#Pane View

Pane View is a tool-pane stack with headers, expansion state, and resizable content heights. It suits outlines, symbols, filters, history, and property sections. Use Split View when every region must remain visible and does not need collapse.

npm install @a3s-lab/ui@0.4.0 dockview@8.1.0

<div id="pane-view" style="height: 32rem"></div>
<script type="module">
import {
Orientation,
PaneviewPanel,
createPaneview,
themeA3S,
} from "@a3s-lab/ui/dockview";
import "@a3s-lab/ui/dockview/css";

class Pane extends PaneviewPanel {
body = { element: document.createElement("section"), dispose() {} };
header = { element: document.createElement("strong"), dispose() {} };
constructor(id, component) {
super({
id,
component,
headerComponent: "header",
orientation: Orientation.VERTICAL,
isExpanded: true,
isHeaderVisible: true,
headerSize: 32,
minimumBodySize: 48,
maximumBodySize: Number.MAX_SAFE_INTEGER,
});
this.header.element.textContent = id;
this.body.element.textContent = "Pane content";
}
getBodyComponent() { return this.body; }
getHeaderComponent() { return this.header; }
}

const root = document.querySelector("#pane-view");
const api = createPaneview(root, {
className: themeA3S.className,
createComponent: options => new Pane(options.id, options.name),
});
api.layout(root.clientWidth, root.clientHeight);
api.addPanel({ id: "files", component: "pane", title: "Files", size: 160 });
api.addPanel({ id: "symbols", component: "pane", title: "Symbols", size: 120 });

</script>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Framework usage

React usePaneview returns api, ready, and a stable onReady; the Vue composable returns an api shallow ref and onReady. Expansion, resizing, and order remain on the native PaneviewApi and panel APIs.

#State and behavior

• A header names its pane; it must not show only an icon or internal ID.
• Expand high-frequency content by default. Low-frequency, expensive, or contextual regions may start collapsed.
• Observe onDidExpansionChange to persist a user preference, but do not collapse merely because asynchronous data is empty.
• A custom header retains expansion state, pointer and keyboard operation, focus treatment, and an accessible name.
• Drag reordering changes presentation only; data ownership and permission do not follow pane position.

#Accessibility

Associate each header with its content and expose expansion state to assistive technology. Collapsed content leaves the focus order; reopening a pane must not forcibly move focus. Header targets are at least 44px high for coarse pointers.