#Dock Workspace

Dock Workspace is for professional applications that continuously rearrange context, a primary canvas, inspectors, previews, and output. A3S UI re-exports the complete Dockview 8.1.0 MIT API and adds an A3S theme, versioned layout persistence, and React/Vue hooks. The host still owns panel content, permissions, data, and window policy.

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

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

class Panel {
element = document.createElement("section");
init(parameters) {
this.element.className = "workspace-panel";
this.element.textContent = parameters.title ?? parameters.params.title;
}
dispose() {}
}

const api = createDockview(document.querySelector("#workspace"), {
createComponent: () => new Panel(),
theme: themeA3S,
});

api.addPanel({ id: "task", component: "panel", title: "Task" });
api.addPanel({
id: "editor",
component: "panel",
title: "Editor",
position: { direction: "right", referencePanel: "task" },
});

const dispose = api.onDidLayoutChange(() => {
localStorage.setItem("workspace-layout", JSON.stringify(api.toJSON()));
});

</script>

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

The container needs a computed width and height. Do not use panel layout as a replacement for business routing; persist only user-recoverable view state.

#Framework usage

useDockviewLayout restores a versioned snapshot when the layout becomes ready, creates the default layout after an unsuccessful restore, and debounce-saves subsequent changes. It returns api, status, save(), restore(), clear(), and reset(). The reset path removes retained Edge Group slots before rebuilding the default layout; native integrations can call resetDockviewLayout(api, initialize) for the same behavior. Supply migrate and validate for older snapshots; never place business data in a layout snapshot.

#MIT capability coverage

#Essential orchestration

#Edge, floating, popout, and maximize

const explorer = api.addEdgeGroup("left", {
  id: "explorer-edge",
  initialSize: 240,
  collapsedSize: 34,
});
api.addPanel({
  id: "files",
  component: "explorer",
  position: { referenceGroup: explorer.id },
});

api.addFloatingGroup(api.getPanel("inspector"), {
  width: 320,
  height: 440,
  position: { right: 24, top: 56 },
});
await api.addPopoutGroup(api.getPanel("preview"));
api.activePanel?.api.maximize();
api.activePanel?.api.exitMaximized();

#External drag and events

External resources must pass host authorization before a panel is created. onWillDrop may reject a target; onDidDrop records only a completed result.

<DockviewReact
  components={components}
  onReady={layout.onReady}
  onWillDrop={(event) => {
    if (!canOpenResource(event)) event.preventDefault();
  }}
  onDidDrop={(event) => auditLayoutDrop(event)}
/>

#Licence boundary

These entrypoints depend only on the MIT edition and do not reproduce commercial modules. Advanced overflow, multi-row tabs, pinned tabs, tab and Group Chip context menus, DnD compass, Smart Guides, auto-hide Edge Groups, automatic edge docking, layout history, spatial keyboard navigation, and keyboard docking are outside this integration. Evaluate the upstream commercial licence when those capabilities are required.

#Product and accessibility requirements

• Give every panel a stable ID, understandable title, and explicit scroll owner; position must not carry the only meaning.
• A blocked popout must preserve the original panel and provide a retry path.
• Persistence failure must not block dragging or resizing; failed restoration falls back to a usable default layout.
• Custom tabs, header actions, and panel content need visible focus and accessible names.
• Touch targets need sufficient size. On narrow screens, merge complex panes into a tab group instead of squeezing unreadable columns.