@grafloria/element 0.4.28 → 0.4.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.4.28",
+  "version": "0.4.30",
   "type": "module",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",

package/src/index.d.ts

@@ -79,7 +79,7 @@ export type { JoinColumn, JoinEnd, MatchTier, JoinGuidanceApi, JoinGuidanceOptio
 export type { ErColumn, ErEntitySpec, ErRelationshipSpec, ErCardinality, ErSide, ErDiagramOptions, UmlClassSpec, UmlRelationshipSpec, UmlRelationKind, UmlSide, UmlDiagramOptions, ErEntityDelta, UmlClassDelta, CardEditingHandle, } from './lib/diagram-kit/index.js';
 export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, } from './lib/diagram-kit/index.js';
 export type { HandleApi } from './lib/diagram-kit/index.js';
-export { bindDashboardGrid, paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, dashboard, defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './lib/dashboard-kit/index.js';
+export { bindDashboardGrid, paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, TAB_DRAG_THRESHOLD, normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, dashboard, defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './lib/dashboard-kit/index.js';
 export type { DashboardGridApi, DashboardGridOptions, DashboardGridHandle, CellRect, WorldRect, DashboardGridGeometry, TileDelta, DashboardOptions, DashboardSpec, DashboardSnapshot, DragHandleOption, DragGripOptions, DashboardHandle, DashboardViewSpec, DashboardWidgetSpec, SectionCaption, SectionCaptionOptions, TabsOptions, TabPage, SectionCaptionAction, SectionCaptionFont, WidgetHandle, WidgetRenderer, KpiWidgetData, LineWidgetData, LineSeries, BarWidgetData, DonutWidgetData, FunnelWidgetData, TableWidgetData, } from './lib/dashboard-kit/index.js';
 export { bindStencilPalette, bindShapeDataPanel, ensureStencilKitStyles } from './lib/stencil-kit/index.js';
 export type { StencilPaletteApi, StencilPaletteOptions, StencilPaletteHandle, ShapeDataPanelApi, ShapeDataPanelOptions, ShapeDataPanelHandle, } from './lib/stencil-kit/index.js';

package/src/index.js

@@ -230,7 +230,7 @@ export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField,
 // GridItemConfig. Element-local code, so the Phase-0 wholesale re-export
 // below does NOT cover it — this curated block is its only door.
 // ===========================================================================
-export { bindDashboardGrid, paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, 
+export { bindDashboardGrid, paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, TAB_DRAG_THRESHOLD, normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, 
 // The DATA-FIRST authoring API — the erDiagram()/umlDiagram() equivalent.
 dashboard, 
 // …and the built-in renderers behind `kind`, so a dashboard is useful with

package/src/lib/dashboard-kit/dashboard.d.ts

@@ -43,7 +43,7 @@
  * round-trips with no extra work — same as every other kit.
  */
 import { GroupModel, NodeModel, type GridColumnLayout } from '@grafloria/engine';
-import { type DashboardGridHandle, type DashboardGridOptions, type DashboardResponsiveOptions } from './grid-binder.js';
+import { type DashboardGridHandle, type TearOutPlan, type DashboardGridOptions, type DashboardResponsiveOptions } from './grid-binder.js';
 import type { DragHandleOption } from './grid-binder.js';
 import type { SplitNode } from './split-layout.js';
 import type { SectionCaption } from './caption.js';
@@ -587,6 +587,16 @@ export interface DashboardHandleContext {
     tabStrips: Map<string, HTMLElement>;
     /** Set by finalize: re-lay a tab container's pages and repaint its strip. */
     syncTabs?: (containerId: string) => void;
+    /**
+     * Tab-container runtime hooks (attachTabsRuntime): a container created or
+     * removed AFTER boot — a page torn out into a group of its own, a container
+     * closed because its last page left — registers and unregisters through
+     * these, on execute and on undo alike.
+     */
+    attachTabsContainer?: (containerId: string) => void;
+    detachTabsContainer?: (containerId: string) => void;
+    /** The plan that makes a torn-out page a one-tab group of its own (the handle builder owns the specs and the registry). */
+    tearOutPlan?: (containerId: string, pageId: string) => TearOutPlan | null;
     /** Set by finalize: the user's `onTabChange`, so the handle can fire it. */
     onTabChange?: (containerId: string, pageId: string, viewId: string) => void;
     /** Set by finalize: re-bind a VIEW's board under the given layout (setLayout). */

package/src/lib/dashboard-kit/dashboard.js

@@ -43,8 +43,8 @@
  * round-trips with no extra work — same as every other kit.
  */
 import { __awaiter, __rest } from "tslib";
-import { BatchCommand, BringNodeToFrontCommand, Command, GroupModel, NodeModel, RemoveFromGroupCommand, RemoveGroupCommand, RemoveNodeCommand, SendNodeToBackCommand, } from '@grafloria/engine';
-import { bindDashboardGrid, } from './grid-binder.js';
+import { BatchCommand, BringNodeToFrontCommand, Command, GroupModel, NodeModel, AddGroupCommand, AddToGroupCommand, RemoveFromGroupCommand, RemoveGroupCommand, RemoveNodeCommand, SendNodeToBackCommand, } from '@grafloria/engine';
+import { bindDashboardGrid, parentPeerOf, } from './grid-binder.js';
 import { bindDashboardSplit, SPLIT_TREE_KEY } from './split-binder.js';
 import { gridItemFromCell } from './grid-mapping.js';
 import { ensureDashboardKitStyles } from './styles.js';
@@ -341,13 +341,47 @@ function assignCells(widgets, columns) {
  */
 const cssEscape = (v) => typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(v) : v.replace(/"/g, '\\"');
 export function attachTabsRuntime(ctx, model, container, handle) {
-    var _a, _b, _c;
+    var _a;
+    // Pages come from LIVE membership, in the authored order, with anything that
+    // arrived later on the end. Reading the authored spec instead meant a page
+    // that LEFT the container kept its tab — a tab pointing at nothing, which is
+    // exactly the "the content is taken and the tab remains" report — and a page
+    // that arrived never got one.
     const pagesOf = (id) => {
-        var _a;
-        const w = ctx.specById.get(id);
-        return ((_a = w === null || w === void 0 ? void 0 : w.widgets) !== null && _a !== void 0 ? _a : []).filter((c) => !!c.widgets).map((p) => { var _a; return ({ id: p.id, label: (_a = p.title) !== null && _a !== void 0 ? _a : p.id }); });
+        var _a, _b, _c, _d;
+        const cg = (_a = ctx.boardGroups.get(id)) !== null && _a !== void 0 ? _a : model.getGroup(id);
+        const authored = ((_c = (_b = ctx.specById.get(id)) === null || _b === void 0 ? void 0 : _b.widgets) !== null && _c !== void 0 ? _c : []).map((c) => c.id);
+        const live = [...((_d = cg === null || cg === void 0 ? void 0 : cg.members) !== null && _d !== void 0 ? _d : [])].filter((m) => !!model.getGroup(m));
+        const rank = (pid) => {
+            // A plain child is wrapped as `<id>__page`, so the authored order is
+            // keyed on the id BEFORE the wrap as well as after it.
+            const i = authored.indexOf(pid);
+            const j = i < 0 ? authored.indexOf(pid.replace(/__page$/, '')) : i;
+            return j < 0 ? Number.MAX_SAFE_INTEGER : j;
+        };
+        live.sort((a, b) => rank(a) - rank(b));
+        return live.map((pid) => { var _a, _b; return ({ id: pid, label: (_b = (_a = ctx.specById.get(pid)) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : pid }); });
     };
     const isTabs = (id) => { var _a, _b; return ((_a = ctx.layoutOf.get(id)) !== null && _a !== void 0 ? _a : (_b = ctx.specById.get(id)) === null || _b === void 0 ? void 0 : _b.layout) === 'tabs' && pagesOf(id).length > 0; };
+    /**
+     * A tab dragged off its strip tears its page out onto the board that owns
+     * the container — VS Code's "drag a tab out and it becomes a group of its
+     * own". Only the board below can place it, so the gesture is handed to that
+     * binder; a container with a single page keeps it, because a tab container
+     * with no pages has nothing to show.
+     */
+    const tearOut = (containerId, pageId, ev) => {
+        var _a;
+        if (!container)
+            return false;
+        if (!pagesOf(containerId).some((p) => p.id === pageId))
+            return false;
+        const peer = parentPeerOf(container, containerId);
+        const plan = (_a = ctx.tearOutPlan) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId, pageId);
+        if (!peer || !plan)
+            return false;
+        return peer.tearOutMember(pageId, containerId, ev, plan);
+    };
     const paintStrip = (id, f, h, pages, active) => {
         var _a, _b, _c;
         const layer = container === null || container === void 0 ? void 0 : container.querySelector('.grafloria-html-layer');
@@ -370,7 +404,7 @@ export function attachTabsRuntime(ctx, model, container, handle) {
         const key = tabStripKey(pages, active, ctx.tabsOf.get(id), rtl);
         if (el.getAttribute('data-key') === key)
             return;
-        paintTabStrip(el, pages, active, ctx.tabsOf.get(id), rtl, (pid) => handle.activateTab(id, pid), () => handle.selectWidget(id));
+        paintTabStrip(el, pages, active, ctx.tabsOf.get(id), rtl, (pid) => handle.activateTab(id, pid), () => handle.selectWidget(id), (pid, ev) => tearOut(id, pid, ev));
         el.setAttribute('data-key', key);
     };
     const sync = (id) => {
@@ -379,7 +413,12 @@ export function attachTabsRuntime(ctx, model, container, handle) {
         if (!cg || !isTabs(id))
             return;
         const pages = pagesOf(id);
-        const active = (_b = ctx.activeTab.get(id)) !== null && _b !== void 0 ? _b : pages[0].id;
+        // The page that was showing may have just been dragged out.
+        let active = (_b = ctx.activeTab.get(id)) !== null && _b !== void 0 ? _b : pages[0].id;
+        if (!pages.some((p) => p.id === active)) {
+            active = pages[0].id;
+            ctx.activeTab.set(id, active);
+        }
         const strip = tabStripReserve(ctx.tabsOf.get(id), pages.length);
         const f = { x: cg.position.x, y: cg.position.y, width: (_d = (_c = cg.size) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 0, height: (_f = (_e = cg.size) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 0 };
         const inner = { width: f.width, height: Math.max(0, f.height - strip) };
@@ -419,22 +458,78 @@ export function attachTabsRuntime(ctx, model, container, handle) {
     };
     ctx.syncTabs = sync;
     ctx.subscriptions = (_a = ctx.subscriptions) !== null && _a !== void 0 ? _a : [];
-    for (const [id, cg] of ctx.boardGroups) {
-        if (!isTabs(id))
-            continue;
+    const subsOf = new Map();
+    const attach = (id) => {
+        var _a, _b, _c, _d, _e, _f;
+        const cg = (_a = ctx.boardGroups.get(id)) !== null && _a !== void 0 ? _a : model.getGroup(id);
+        if (!cg || subsOf.has(id))
+            return;
+        if (((_b = ctx.layoutOf.get(id)) !== null && _b !== void 0 ? _b : (_c = ctx.specById.get(id)) === null || _c === void 0 ? void 0 : _c.layout) !== 'tabs')
+            return;
         const pages = pagesOf(id);
-        if (!ctx.activeTab.has(id)) {
+        if (!ctx.activeTab.has(id) && pages.length > 0) {
             const meta = cg.getMetadata('containerWidget');
-            const want = (_c = (_b = ctx.specById.get(id)) === null || _b === void 0 ? void 0 : _b.active) !== null && _c !== void 0 ? _c : meta === null || meta === void 0 ? void 0 : meta.active;
+            const want = (_e = (_d = ctx.specById.get(id)) === null || _d === void 0 ? void 0 : _d.active) !== null && _e !== void 0 ? _e : meta === null || meta === void 0 ? void 0 : meta.active;
             ctx.activeTab.set(id, want && pages.some((p) => p.id === want) ? want : pages[0].id);
             if ((meta === null || meta === void 0 ? void 0 : meta.tabs) && !ctx.tabsOf.has(id))
                 ctx.tabsOf.set(id, meta.tabs);
         }
-        // Re-lay the pages whenever the parent moves or resizes the container.
-        const off = cg.on('bounds:changed', (() => sync(id)));
-        if (typeof off === 'function')
-            ctx.subscriptions.push(off);
+        // Re-lay the pages whenever the parent moves or resizes the container —
+        // and whenever a page joins or leaves, so the strip always shows the pages
+        // that are actually there.
+        const offs = [];
+        for (const ev of ['bounds:changed', 'member:added', 'member:removed']) {
+            const off = cg.on(ev, (() => sync(id)));
+            if (typeof off === 'function')
+                offs.push(off);
+        }
+        subsOf.set(id, offs);
+        (_f = ctx.subscriptions) === null || _f === void 0 ? void 0 : _f.push(() => detach(id));
         sync(id);
+    };
+    const detach = (id) => {
+        var _a, _b;
+        for (const off of (_a = subsOf.get(id)) !== null && _a !== void 0 ? _a : [])
+            off();
+        subsOf.delete(id);
+        (_b = ctx.tabStrips.get(id)) === null || _b === void 0 ? void 0 : _b.remove();
+        ctx.tabStrips.delete(id);
+    };
+    ctx.attachTabsContainer = attach;
+    ctx.detachTabsContainer = detach;
+    for (const id of ctx.boardGroups.keys())
+        if (isTabs(id))
+            attach(id);
+}
+/**
+ * Steps that depend on each other's RESULT — create a group, then move a page
+ * into it, then place the group on the board — run as one history step. A
+ * batch checks every member's `canExecute` before running any of them, and
+ * the second step's precondition (the group exists) is what the first step
+ * creates, so as a batch the chain is refused. This runs the chain in order
+ * and reverses it on undo, judging nothing up front.
+ */
+class SequenceCommand extends Command {
+    constructor(name, steps) {
+        super(name);
+        this.steps = steps;
+    }
+    execute(context) {
+        for (const c of this.steps)
+            c.execute(context);
+    }
+    undo(context) {
+        for (let i = this.steps.length - 1; i >= 0; i--)
+            this.steps[i].undo(context);
+    }
+    canExecute() {
+        return true;
+    }
+    canUndo() {
+        return true;
+    }
+    serialize() {
+        return { id: this.id, name: this.name, timestamp: this.timestamp, data: { steps: this.steps.map((c) => c.serialize()) } };
     }
 }
 /** `setCaption` as one history step: execute re-applies the value, undo the previous one. */
@@ -564,6 +659,160 @@ export function createDashboardHandle(ctx) {
         entries.sort((p1, p2) => { var _a, _b, _c, _d; return ((_a = p1.y) !== null && _a !== void 0 ? _a : 0) - ((_b = p2.y) !== null && _b !== void 0 ? _b : 0) || ((_c = p1.x) !== null && _c !== void 0 ? _c : 0) - ((_d = p2.x) !== null && _d !== void 0 ? _d : 0); });
         return entries;
     };
+    /**
+     * TEARING A TAB OUT — what the page becomes. VS Code: a tab dragged out of
+     * its group makes a group of its own, still wearing its tab. So the board
+     * receives a NEW one-page tab container, `<page>__group`, built exactly as
+     * mountBoard() builds an authored one (slab cell in `gridItem`, spec fields
+     * in `containerWidget`, board metadata so fromDocument() rebinds it), the
+     * page moves into it, and the handle's own registry follows — on execute and
+     * on undo. A container left with no page closes, as VS Code closes a group
+     * whose last editor leaves; undo reopens it. The board that lands it adds
+     * its own displaced-tile commands around these.
+     */
+    ctx.tearOutPlan = (containerId, pageId) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
+        const from = ctx.boardGroups.get(containerId);
+        const pg = (_b = ctx.boardGroups.get(pageId)) !== null && _b !== void 0 ? _b : model === null || model === void 0 ? void 0 : model.getGroup(pageId);
+        const fromSpec = specById.get(containerId);
+        const pageSpec = specById.get(pageId);
+        if (!model || !from || !pg || !pageSpec)
+            return null;
+        const viewId = (_c = ctx.viewOfBoard.get(containerId)) !== null && _c !== void 0 ? _c : ctx.active;
+        const W = `${pageId}__group`;
+        const tabsOpts = (_d = ctx.tabsOf.get(containerId)) !== null && _d !== void 0 ? _d : {};
+        const label = (_e = pageSpec.title) !== null && _e !== void 0 ? _e : pageId;
+        const size = { width: (_g = (_f = pg.size) === null || _f === void 0 ? void 0 : _f.width) !== null && _g !== void 0 ? _g : 0, height: ((_j = (_h = pg.size) === null || _h === void 0 ? void 0 : _h.height) !== null && _j !== void 0 ? _j : 0) + tabStripReserve(tabsOpts, 1) };
+        const remaining = [...((_k = from.members) !== null && _k !== void 0 ? _k : [])].filter((m) => m !== pageId && !!model.getGroup(m));
+        return {
+            arrivingId: W,
+            label,
+            size,
+            commands: (cell, rect, boardId) => {
+                var _a, _b, _c, _d, _e;
+                const fromMeta = ((_a = from.getMetadata('containerWidget')) !== null && _a !== void 0 ? _a : {});
+                const fromBoard = ((_b = from.getMetadata('dashboardBoard')) !== null && _b !== void 0 ? _b : {});
+                const g = new GroupModel({ id: W, name: label });
+                g.setMetadata('frameChrome', 'none');
+                g.setMetadata('gridItem', gridItemFromCell(cell));
+                g.setMetadata('containerWidget', Object.assign({ title: label, columns: (_c = fromMeta.columns) !== null && _c !== void 0 ? _c : cell.w, maxRows: (_d = fromMeta.maxRows) !== null && _d !== void 0 ? _d : cell.h, layout: 'tabs', active: pageId }, (Object.keys(tabsOpts).length ? { tabs: tabsOpts } : {})));
+                g.setMetadata('dashboardBoard', Object.assign(Object.assign({}, fromBoard), { layout: 'tabs' }));
+                g.position = { x: rect.x, y: rect.y };
+                g.size = { width: rect.width, height: rect.height, depth: 0 };
+                const wSpec = Object.assign(Object.assign({ id: W, title: label, layout: 'tabs', active: pageId }, (Object.keys(tabsOpts).length ? { tabs: tabsOpts } : {})), { columns: (_e = fromMeta.columns) !== null && _e !== void 0 ? _e : cell.w, widgets: [pageSpec] });
+                let slot = -1;
+                const born = {
+                    register: () => {
+                        var _a;
+                        const live = model.getGroup(W);
+                        if (!live)
+                            return;
+                        ctx.boardGroups.set(W, live);
+                        ctx.layoutOf.set(W, 'tabs');
+                        ctx.activeTab.set(W, pageId);
+                        ctx.tabsOf.set(W, tabsOpts);
+                        specById.set(W, wSpec);
+                        ctx.viewOfBoard.set(W, viewId);
+                        viewOfWidget.set(W, boardId);
+                        viewOfWidget.set(pageId, W);
+                        if (fromSpec === null || fromSpec === void 0 ? void 0 : fromSpec.widgets) {
+                            const i = fromSpec.widgets.findIndex((p) => p.id === pageId);
+                            if (i >= 0) {
+                                slot = i;
+                                fromSpec.widgets.splice(i, 1);
+                            }
+                        }
+                        const arr = ctx.boardWidgets.get(boardId);
+                        if (arr && !arr.some((w) => w.id === W))
+                            arr.push(wSpec);
+                        ctx.boardWidgets.set(W, wSpec.widgets);
+                        (_a = ctx.attachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, W);
+                    },
+                    unregister: () => {
+                        var _a;
+                        (_a = ctx.detachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, W);
+                        ctx.boardGroups.delete(W);
+                        ctx.layoutOf.delete(W);
+                        ctx.activeTab.delete(W);
+                        ctx.tabsOf.delete(W);
+                        specById.delete(W);
+                        ctx.viewOfBoard.delete(W);
+                        viewOfWidget.delete(W);
+                        viewOfWidget.set(pageId, containerId);
+                        if ((fromSpec === null || fromSpec === void 0 ? void 0 : fromSpec.widgets) && !fromSpec.widgets.some((p) => p.id === pageId)) {
+                            fromSpec.widgets.splice(slot < 0 ? fromSpec.widgets.length : Math.min(slot, fromSpec.widgets.length), 0, pageSpec);
+                        }
+                        const arr = ctx.boardWidgets.get(boardId);
+                        if (arr) {
+                            const i = arr.findIndex((w) => w.id === W);
+                            if (i >= 0)
+                                arr.splice(i, 1);
+                        }
+                        ctx.boardWidgets.delete(W);
+                    },
+                };
+                const move = [
+                    new SequenceCommand('Move tab out', [
+                        new AddGroupCommand(g),
+                        new RemoveFromGroupCommand(containerId, pageId),
+                        new AddToGroupCommand(W, pageId),
+                        new AddToGroupCommand(boardId, W),
+                        new RegisterWidgetCommand(born, 'register'),
+                    ]),
+                ];
+                if (remaining.length > 0)
+                    return { move, collapse: [] };
+                // The last page left: the container closes. Its registry goes FIRST
+                // so that on undo it comes back AFTER the group and its slab do.
+                let fromSlot = -1;
+                const gone = {
+                    register: () => {
+                        var _a;
+                        const live = model.getGroup(containerId);
+                        if (!live)
+                            return;
+                        ctx.boardGroups.set(containerId, live);
+                        ctx.layoutOf.set(containerId, 'tabs');
+                        ctx.viewOfBoard.set(containerId, viewId);
+                        if (fromSpec)
+                            specById.set(containerId, fromSpec);
+                        const arr = ctx.boardWidgets.get(boardId);
+                        if (arr && fromSpec && !arr.some((w) => w.id === containerId)) {
+                            arr.splice(fromSlot < 0 ? arr.length : Math.min(fromSlot, arr.length), 0, fromSpec);
+                        }
+                        (_a = ctx.attachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId);
+                    },
+                    unregister: () => {
+                        var _a;
+                        (_a = ctx.detachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId);
+                        ctx.boardGroups.delete(containerId);
+                        ctx.layoutOf.delete(containerId);
+                        ctx.viewOfBoard.delete(containerId);
+                        specById.delete(containerId);
+                        const arr = ctx.boardWidgets.get(boardId);
+                        if (arr) {
+                            const i = arr.findIndex((w) => w.id === containerId);
+                            if (i >= 0) {
+                                fromSlot = i;
+                                arr.splice(i, 1);
+                            }
+                        }
+                    },
+                };
+                return {
+                    move,
+                    collapse: [
+                        new SequenceCommand('Close empty tab container', [
+                            new RegisterWidgetCommand(gone, 'unregister'),
+                            new RemoveFromGroupCommand(boardId, containerId),
+                            new RemoveGroupCommand(containerId),
+                        ]),
+                    ],
+                };
+            },
+        };
+    };
     /** Bookkeeping closures for one widget, shared by the add and remove
      *  commands (and applied synchronously by the handle — idempotent). */
     const registryOf = (id, boardId, spec) => {

package/src/lib/dashboard-kit/grid-binder.d.ts

@@ -485,13 +485,72 @@ interface BinderPeer {
      */
     containsWorldExtended(x: number, y: number): boolean;
     frameArea(): number;
-    adopt(node: NodeModel, world: {
+    adopt(node: {
+        id: string;
+    }, world: {
         x: number;
         y: number;
     }, pxSize: {
         width: number;
         height: number;
-    }): AdoptedLeg | null;
+    }, opts?: AdoptOptions): AdoptedLeg | null;
+    /**
+     * Tear a tab page out of its container and onto THIS board, driven by the
+     * press that started on its tab. Answers false when the board will not take
+     * it, so the strip can leave the press alone.
+     */
+    tearOutMember(pageId: string, fromGroupId: string, ev: PointerEvent, plan: TearOutPlan): boolean;
+}
+/**
+ * What a torn-out page becomes, decided by the dashboard handle (which owns
+ * the specs and the registry) and carried out by the board it lands on. VS
+ * Code's rule: a tab dragged out of its group makes a GROUP of its own — so
+ * the board receives a new one-page tab container, not the bare page, and the
+ * page keeps its tab.
+ */
+export interface TearOutPlan {
+    /** The id the board will hold: the new one-page tab container around the page. */
+    arrivingId: string;
+    /** What the chip that follows the pointer says. */
+    label: string;
+    /** Pixel size to arrive at — the page plus the strip the new group needs. */
+    size: {
+        width: number;
+        height: number;
+    };
+    /**
+     * The model and registry commands for a landing at `cell`/`rect` on
+     * `boardId`. `move` creates the group, moves the page in and registers it;
+     * `collapse` (possibly empty) removes the container the page left when it
+     * was its last page — VS Code closes an empty group.
+     */
+    commands(cell: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }, rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }, boardId: string): {
+        move: Command[];
+        collapse: Command[];
+    };
+}
+/** A torn-out page never arrives shorter than this: a strip with no room under it is not a group. */
+export declare const TEAR_OUT_MIN_ROWS = 2;
+interface AdoptOptions {
+    /**
+     * 'shrink': take the cell under the pointer at the height that FITS there
+     * (down to TEAR_OUT_MIN_ROWS) before looking for another row — a torn-out
+     * page takes the room where it lands, the way a torn-out editor does. The
+     * default keeps the tile's size and finds the nearest cell that takes it.
+     */
+    fit?: 'shrink';
+    /** Anchor the tile's TOP edge at the pointer instead of centring it (the pointer holds a tab, the page hangs below it). */
+    anchor?: 'top';
 }
 interface AdoptedLeg {
     groupId: string;

package/src/lib/dashboard-kit/grid-binder.js

@@ -154,6 +154,8 @@ export function pressOnDragHandle(sel, target, hostEl, clientX, clientY) {
 }
 /** The caption strip of a host with no kit header, px from the card's top. */
 export const CAPTION_BAND = 28;
+/** A torn-out page never arrives shorter than this: a strip with no room under it is not a group. */
+export const TEAR_OUT_MIN_ROWS = 2;
 /**
  * Binders on the same canvas find each other here. A WeakMap: a canvas that
  * is gone takes its (empty) peer set with it — the strong Map it replaced kept
@@ -448,6 +450,8 @@ export function bindDashboardGrid(api, group, options = {}) {
     let placeholder = null;
     /** Foreign tile currently adopted from another binder's gesture. */
     let adoptedGhostId = null;
+    /** The tab page this board is currently tearing out of a container, if any. */
+    let tearing = null;
     let glideTimer = null;
     let ghostTimer = null;
     /**
@@ -1091,6 +1095,11 @@ export function bindDashboardGrid(api, group, options = {}) {
      *  the plan prototype cannot leave its board at all (cells clamp at the
      *  edges), so a 60px slip past the frame must not dim or delete. */
     const EDGE_GRACE = 60;
+    /** A point inside a member group's own frame (its strip and its pages). */
+    const worldInsideGroup = (g, x, y) => {
+        const s = sizeOf(g);
+        return x >= g.position.x && x <= g.position.x + s.width && y >= g.position.y && y <= g.position.y + s.height;
+    };
     const worldInsideBoardGrace = (x, y) => {
         if (worldInsideBoardExtended(x, y))
             return true;
@@ -2014,6 +2023,14 @@ export function bindDashboardGrid(api, group, options = {}) {
             const geomBefore = g.startGeom.get(g.id);
             const crossing = [
                 ...sourceDisplaced,
+                // …and the TARGET board's own displaced tiles. Dropping onto an
+                // occupied row pushes that row down, and the ghost draws the pushed
+                // layout — but these commands were computed and then dropped on the
+                // floor, so nothing persisted the push. The next rebuild read the
+                // pre-drop cells, found the arriving tile overlapping them, and pushed
+                // IT to the bottom instead: the drop landed a whole row away from the
+                // ghost that promised it ("it goes in as an extra row").
+                ...fin.commands,
                 new RemoveFromGroupCommand(group.id, g.id),
                 new AddToGroupCommand(targetGroupId, g.id),
                 ...buildCommitCommands([
@@ -2115,6 +2132,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         }
         return best;
     };
+    /** `handle.planRemoval` for local use before the handle object exists. */
+    const planRemovalOf = (id) => handle.planRemoval(id);
     /** This binder's side of an adoption: enter gateless, then live-push. */
     /**
      * Put an ARRIVING tile as close to the pointer as the board allows. The
@@ -2124,21 +2143,115 @@ export function bindDashboardGrid(api, group, options = {}) {
      * I put it". Slide along the row instead, nearest first, so a tile that
      * cannot take the cell under the pointer still lands beside it.
      */
-    const placeNear = (id, x, y, w) => {
+    /**
+     * Slide along ONE row, nearest column first. `changed:false` means BOTH
+     * "refused" and "it is already there", and reading the second as the first
+     * made the search walk straight past the right answer: parked on the nearest
+     * legal cell, the next pointer move re-tried the wanted cell (refused),
+     * re-tried the cell it was ON (no change, read as refused) and then took a
+     * FARTHER one — so the tile oscillated for the whole drag and settled
+     * wherever the last swing left it. Ask where the tile IS, not whether the
+     * call moved it.
+     */
+    const placeOnRow = (id, x, y, w) => {
+        const at = (cx) => {
+            const i = engine.getItem(id);
+            return !!i && i.x === cx && i.y === y;
+        };
+        const maxX = Math.max(0, columns - w);
+        if (at(x))
+            return true;
         if (engine.moveCheck(id, x, y, { gate: false }).changed)
             return true;
-        const maxX = Math.max(0, columns - w);
         for (let d = 1; d <= columns; d++) {
             for (const cx of [x - d, x + d]) {
                 if (cx < 0 || cx > maxX)
                     continue;
+                if (at(cx))
+                    return true;
                 if (engine.moveCheck(id, cx, y, { gate: false }).changed)
                     return true;
             }
         }
         return false;
     };
-    const adopt = (node, world, pxSize) => {
+    const placeNear = (id, x, y, w) => {
+        if (placeOnRow(id, x, y, w))
+            return true;
+        // EVERY column on that row refused — which is what a locked section
+        // spanning the full width does, and there are plenty of those. Sliding
+        // sideways can never clear it, so try the rows either side, nearest first.
+        // Without this the drop either fell to the bottom of the board or, when
+        // the board had no room down there either, did nothing at all.
+        const reach = Math.max(1, rows()) + 2;
+        for (let d = 1; d <= reach; d++) {
+            for (const cy of [y - d, y + d]) {
+                if (cy < 0)
+                    continue;
+                if (placeOnRow(id, x, cy, w))
+                    return true;
+            }
+        }
+        return false;
+    };
+    /**
+     * Rows free at (x, y) across `w` columns before the nearest LOCKED tile
+     * below — a section is a locked tile nothing can push, so that is the hard
+     * ceiling on what can land there — capped at the natural height. 0 when the
+     * row itself lies under a locked tile.
+     */
+    const fitHeightAt = (id, x, y, w, hNatural) => {
+        let limit = hNatural;
+        for (const it of engine.getItems()) {
+            if (it.id === id || !it.locked)
+                continue;
+            if (!(it.x < x + w && x < it.x + it.w))
+                continue;
+            if (it.y <= y && it.y + it.h > y)
+                return 0;
+            if (it.y > y)
+                limit = Math.min(limit, it.y - y);
+        }
+        const b = bound();
+        if (b !== undefined)
+            limit = Math.min(limit, Math.max(0, b - y));
+        return limit;
+    };
+    /**
+     * A TEAR-OUT takes the cell under the pointer at the height that fits there
+     * — a page dragged out of a full-height panel onto a busy board would
+     * otherwise have exactly one legal cell, below the lowest section, and the
+     * drop would land a screen away from the pointer with its placeholder out of
+     * sight. Only when nothing fits there does it fall back to the nearest row
+     * at its natural height.
+     */
+    const placeFitting = (id, x, y, w, hNatural) => {
+        var _a, _b;
+        const it = engine.getItem(id);
+        if (!it)
+            return false;
+        const hFit = fitHeightAt(id, x, y, w, hNatural);
+        if (hFit >= TEAR_OUT_MIN_ROWS) {
+            if (it.h !== hFit)
+                engine.resizeCheck(id, w, hFit);
+            if (((_a = engine.getItem(id)) === null || _a === void 0 ? void 0 : _a.h) === hFit && placeOnRow(id, x, y, w))
+                return true;
+        }
+        const now = engine.getItem(id);
+        if (now && now.h !== hNatural) {
+            // Growing back where it sits may be refused; the entry row at the bottom
+            // always has room, so grow there and let placeNear bring it up.
+            engine.resizeCheck(id, w, hNatural);
+            if (((_b = engine.getItem(id)) === null || _b === void 0 ? void 0 : _b.h) !== hNatural) {
+                engine.moveCheck(id, 0, engine.rows(), { gate: false });
+                engine.resizeCheck(id, w, hNatural);
+            }
+        }
+        return placeNear(id, x, y, w);
+    };
+    const adopt = (
+    // Only the id is used: a tab page arriving here is a GROUP, not a node.
+    node, world, pxSize, opts = {}) => {
         if (disposed)
             return null;
         const f = frame();
@@ -2173,9 +2286,16 @@ export function bindDashboardGrid(api, group, options = {}) {
             }
         }
         adoptedGhostId = node.id;
-        const tl = centredTopLeft(world.x, world.y, span);
-        const cell0 = pointToCell(tl.x, tl.y, f, gg, rows(), span.w);
-        placeNear(node.id, cell0.x, cell0.y, span.w);
+        const hNatural = span.h;
+        const wantedCell = (wx, wy, itemW, itemH) => {
+            const tl = centredTopLeft(wx, wy, { w: itemW, h: opts.anchor === 'top' ? 0 : itemH });
+            return pointToCell(tl.x, tl.y, frame(), geom(), rows(), itemW);
+        };
+        const place = (cell, itemW) => opts.fit === 'shrink' ? placeFitting(node.id, cell.x, cell.y, itemW, hNatural) : placeNear(node.id, cell.x, cell.y, itemW);
+        let lastWant = null;
+        const cell0 = wantedCell(world.x, world.y, span.w, span.h);
+        lastWant = cell0;
+        place(cell0, span.w);
         armGlide();
         project();
         syncPlaceholder();
@@ -2185,9 +2305,12 @@ export function bindDashboardGrid(api, group, options = {}) {
                 const item = engine.getItem(node.id);
                 if (!item)
                     return;
-                const tlm = centredTopLeft(w.x, w.y, { w: item.w, h: item.h });
-                const cell = pointToCell(tlm.x, tlm.y, frame(), geom(), rows(), item.w);
-                if (placeNear(node.id, cell.x, cell.y, item.w))
+                const cell = wantedCell(w.x, w.y, item.w, opts.fit === 'shrink' ? hNatural : item.h);
+                // The search is worth running once per wanted cell, not per pixel.
+                if (lastWant && lastWant.x === cell.x && lastWant.y === cell.y)
+                    return;
+                lastWant = cell;
+                if (place(cell, item.w))
                     project();
                 syncPlaceholder();
             },
@@ -2220,6 +2343,7 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     const selfPeer = {
         group,
+        tearOutMember: (pageId, fromGroupId, ev, plan) => beginTearOut(pageId, fromGroupId, ev, plan),
         clearSelection: () => {
             var _a;
             if (selectedId === undefined)
@@ -2757,6 +2881,119 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     api.container.addEventListener('focusin', onFocusIn);
     api.container.addEventListener('keydown', onKey);
+    // -- tab tear-out -----------------------------------------------------------
+    /**
+     * A press that TRAVELLED on a tab drags the whole page onto this board, the
+     * way dragging a VS Code tab out of its group makes a group of its own. The
+     * page is a GROUP, so it rides the same `adopt` leg a widget uses — entry at
+     * the bottom, `placeNear` under the pointer, the dashed placeholder drawn
+     * from the live cell — and the commit is one batch: the cell and frame it
+     * landed on, out of the container, into this board, plus every tile this
+     * board had to push aside.
+     *
+     * Like VS Code, the page itself does not follow the pointer; a chip carrying
+     * the tab's label does, and the placeholder shows where the drop will land.
+     */
+    const beginTearOut = (pageId, fromGroupId, ev, plan) => {
+        var _a;
+        if (disposed || gesture || slabGesture || isStatic || tearing)
+            return false;
+        const from = diagram.getGroup(fromGroupId);
+        if (!from || !diagram.getGroup(pageId) || !engine.getItem(fromGroupId))
+            return false;
+        const toWorld = (cx, cy) => {
+            var _a;
+            const rect = api.container.getBoundingClientRect();
+            return ((_a = api.viewport) === null || _a === void 0 ? void 0 : _a.clientToWorld) ? api.viewport.clientToWorld(cx, cy, rect) : { x: cx - rect.left, y: cy - rect.top };
+        };
+        const first = toWorld(ev.clientX, ev.clientY);
+        // The board holds the NEW group, not the bare page: it is adopted under the
+        // group's id, sized for the page plus its strip, taking the room under the
+        // pointer with its top edge at the pointer — the tab is what the pointer
+        // holds, the page hangs below it.
+        const leg = adopt({ id: plan.arrivingId }, first, plan.size, { fit: 'shrink', anchor: 'top' });
+        if (!leg)
+            return false;
+        tearing = pageId;
+        const doc = (_a = api.container.ownerDocument) !== null && _a !== void 0 ? _a : document;
+        const chip = doc.createElement('div');
+        chip.className = 'axdb-drag-chip axdb-tab-chip';
+        chip.textContent = plan.label;
+        doc.body.appendChild(chip);
+        const moveChip = (cx, cy) => {
+            chip.style.left = `${cx + 6}px`;
+            chip.style.top = `${cy + 6}px`;
+        };
+        moveChip(ev.clientX, ev.clientY);
+        armGlide();
+        api.render();
+        let last = { x: ev.clientX, y: ev.clientY };
+        const detach = () => {
+            window.removeEventListener('pointermove', onMove, true);
+            window.removeEventListener('pointerup', onUp, true);
+            window.removeEventListener('pointercancel', onCancel, true);
+            window.removeEventListener('keydown', onKey, true);
+        };
+        const onMove = (e) => {
+            if (disposed)
+                return detach();
+            last = { x: e.clientX, y: e.clientY };
+            moveChip(e.clientX, e.clientY);
+            const world = toWorld(e.clientX, e.clientY);
+            const home = worldInsideGroup(from, world.x, world.y);
+            // Over its own container it goes home: a tab dragged around its own
+            // strip must not tear itself out.
+            chip.classList.toggle('axdb-out', home || !worldInsideBoardGrace(world.x, world.y));
+            if (!home)
+                leg.move(world);
+            api.render();
+        };
+        const finish = (commit) => {
+            var _a, _b;
+            detach();
+            chip.remove();
+            tearing = null;
+            if (disposed)
+                return;
+            const world = toWorld(last.x, last.y);
+            const home = worldInsideGroup(from, world.x, world.y);
+            if (!commit || home || !worldInsideBoardGrace(world.x, world.y)) {
+                leg.abort();
+                disarmGlideSoon();
+                api.renderNow();
+                (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: 'cancel', kind: 'move', nodeId: pageId, changed: false });
+                return;
+            }
+            const fin = leg.finalize();
+            if (!fin) {
+                disarmGlideSoon();
+                api.renderNow();
+                return;
+            }
+            const planned = plan.commands(fin.cell, fin.rect, group.id);
+            // The container the page left may have been holding its last page: it
+            // goes too, and the tiles around its slab settle the way a removal
+            // settles them (VS Code closes a group whose last editor leaves).
+            const collapse = planned.collapse.length > 0 ? [...planRemovalOf(fromGroupId), ...planned.collapse] : [];
+            const changed = execute('Move tab out', [...fin.commands, ...planned.move, ...collapse]);
+            disarmGlideSoon();
+            enforceBoardHeight();
+            persistLayouts();
+            api.renderNow();
+            (_b = options.onGesture) === null || _b === void 0 ? void 0 : _b.call(options, { type: 'commit', kind: 'move', nodeId: pageId, changed });
+        };
+        const onUp = () => finish(true);
+        const onCancel = () => finish(false);
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                finish(false);
+        };
+        window.addEventListener('pointermove', onMove, true);
+        window.addEventListener('pointerup', onUp, true);
+        window.addEventListener('pointercancel', onCancel, true);
+        window.addEventListener('keydown', onKey, true);
+        return true;
+    };
     // -- palette drag-in --------------------------------------------------------
     const beginPaletteDrag = (node, spec, event) => {
         var _a, _b;
@@ -3126,7 +3363,18 @@ export function bindDashboardGrid(api, group, options = {}) {
             const it = engine.getItem(id);
             if (!it)
                 return [];
-            const clone = new GridPackEngine(engine.getItems().map((i) => (Object.assign({}, i))), { columns, float });
+            // A float:false engine PACKS as it is built, in ARRAY order — so a tile
+            // that entered the engine last (one just adopted by a drop) is packed
+            // last, and everything above it in the array floats up through the room
+            // it occupies. The plan then "moved" tiles the removal never touched and
+            // undid the drop's own push (L64: B back onto the cell the torn-out
+            // group had just taken, and the group auto-placed into the hole the
+            // closed container left). Packing in row-then-column order is gravity,
+            // whatever order the tiles arrived in.
+            const clone = new GridPackEngine(engine
+                .getItems()
+                .map((i) => (Object.assign({}, i)))
+                .sort((a, b) => a.y - b.y || a.x - b.x), { columns, float });
             clone.remove(id);
             const f = frame();
             const g = geom();
@@ -3175,6 +3423,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             api.container.removeEventListener('keydown', onKey);
             hostObserver.disconnect();
             containerObserver === null || containerObserver === void 0 ? void 0 : containerObserver.disconnect();
+            tearing = null;
             for (const off of subs)
                 off();
             // The corner handles are THIS binder's affordance: a board re-bound as a

package/src/lib/dashboard-kit/index.d.ts

@@ -3,7 +3,7 @@ export { bindDashboardSplit, SetSplitTreeCommand, SPLIT_TREE_KEY, type Dashboard
 export { projectSplit, dividersOf, addSplitLeaf, removeSplitLeaf, insertSplitLeaf, moveSplitDivider, splitFromCells, cellsFromSplit, splitLeaves, type SplitNode, type SplitGroup, type SplitLeaf, type SplitDir, type SplitSide, type SplitDivider, } from './split-layout.js';
 export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, type CellRect, type WorldRect, type DashboardGridGeometry, type TileDelta, } from './grid-mapping.js';
 export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles.js';
-export { paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, type TabsOptions, type TabPage } from './tabs.js';
+export { paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, TAB_DRAG_THRESHOLD, type TabsOptions, type TabPage } from './tabs.js';
 export { normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, type SectionCaption, type SectionCaptionOptions, type SectionCaptionAction, type SectionCaptionFont, } from './caption.js';
 export { dashboard, type DashboardOptions, type DashboardSpec, type DashboardSnapshot, type DashboardHandle, type DashboardViewSpec, type DashboardWidgetSpec, type WidgetHandle, } from './dashboard.js';
 export { defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, type WidgetRenderer, type KpiWidgetData, type LineWidgetData, type LineSeries, type BarWidgetData, type DonutWidgetData, type FunnelWidgetData, type TableWidgetData, } from './widgets.js';

package/src/lib/dashboard-kit/index.js

@@ -3,7 +3,7 @@ export { bindDashboardSplit, SetSplitTreeCommand, SPLIT_TREE_KEY, } from './spli
 export { projectSplit, dividersOf, addSplitLeaf, removeSplitLeaf, insertSplitLeaf, moveSplitDivider, splitFromCells, cellsFromSplit, splitLeaves, } from './split-layout.js';
 export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, } from './grid-mapping.js';
 export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles.js';
-export { paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT } from './tabs.js';
+export { paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, TAB_DRAG_THRESHOLD } from './tabs.js';
 export { normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, } from './caption.js';
 // The DATA-FIRST authoring API (the erDiagram/umlDiagram equivalent).
 export { dashboard, } from './dashboard.js';

package/src/lib/dashboard-kit/split-binder.js

@@ -1251,6 +1251,9 @@ export function bindDashboardSplit(api, group, options = {}) {
         hasItem: (id) => { var _a; return ((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id); },
         memberCell: (id) => handle.cellOf(id),
         resizeMemberBy: () => ({ changed: false }),
+        // A split board has no cells to drop a torn-out page into: it refuses,
+        // and the press stays a plain tab click.
+        tearOutMember: (_pageId, _fromGroupId, _ev, _plan) => false,
         containsWorld: (x, y) => worldInsideBoard(x, y),
         containsWorldExtended: (x, y) => worldInsideBoard(x, y),
         frameArea: () => {

package/src/lib/dashboard-kit/styles.js

@@ -111,6 +111,27 @@ const CSS = `
    (the same signal a tile ghost gives outside the board). Without this rule
    the class was set and nothing showed — a refusal a user could not see. */
 .axdb-drag-chip.axdb-out { opacity: .35; filter: grayscale(.7) drop-shadow(0 8px 14px rgba(16, 24, 40, .2)); }
+/* A tab dragged off its strip: VS Code carries the TAB, not the editor, so
+   what follows the pointer is a chip wearing the tab's own label. */
+.axdb-tab-chip {
+  padding: 5px 12px;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 500 12px/1.4 var(--axdb-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+  color: var(--axdb-tabs-on-fg, #1f2430);
+  background: var(--axdb-tabs-on-bg, #fff);
+  border-radius: var(--axdb-rs-radius, 3px);
+  box-shadow: 0 0 0 1px rgba(31, 36, 48, .12);
+}
+@media (prefers-color-scheme: dark) {
+  .axdb-tab-chip {
+    color: var(--axdb-tabs-on-fg, #eceef4);
+    background: var(--axdb-tabs-on-bg, #1a1d25);
+    box-shadow: 0 0 0 1px rgba(236, 238, 244, .16);
+  }
+}
 
 /* ===========================================================================
    BUILT-IN WIDGET CARDS — what widgets.ts paints when a page writes no

package/src/lib/dashboard-kit/tabs.d.ts

@@ -25,6 +25,12 @@ export interface TabPage {
     label: string;
 }
 export declare const TAB_STRIP_HEIGHT = 30;
+/**
+ * Travel, in px, that turns a press on a tab from a click into a drag. VS Code
+ * uses the platform drag threshold; 4 px is the same order and keeps a shaky
+ * click a click.
+ */
+export declare const TAB_DRAG_THRESHOLD = 4;
 /** Pixels the pages give up at the top of the container. */
 export declare function tabStripReserve(o: TabsOptions | undefined, pageCount: number): number;
 /**
@@ -33,4 +39,11 @@ export declare function tabStripReserve(o: TabsOptions | undefined, pageCount: n
  * rebuild — and so a `click` listener survives between switches.
  */
 export declare function tabStripKey(pages: TabPage[], activeId: string, o: TabsOptions | undefined, rtl: boolean): string;
-export declare function paintTabStrip(strip: HTMLElement, pages: TabPage[], activeId: string, o: TabsOptions | undefined, rtl: boolean, onPick: (id: string) => void, onSelectContainer?: () => void): void;
+export declare function paintTabStrip(strip: HTMLElement, pages: TabPage[], activeId: string, o: TabsOptions | undefined, rtl: boolean, onPick: (id: string) => void, onSelectContainer?: () => void, 
+/**
+ * The tab is the PAGE's drag handle, as it is in VS Code: press one and
+ * travel, and the whole page leaves — not the widget under the pointer,
+ * which used to be the only way to drag anything out and left the tab
+ * behind pointing at an empty page.
+ */
+onDrag?: (pageId: string, ev: PointerEvent) => boolean): void;

package/src/lib/dashboard-kit/tabs.js

@@ -9,6 +9,12 @@
  * binder's.
  */
 export const TAB_STRIP_HEIGHT = 30;
+/**
+ * Travel, in px, that turns a press on a tab from a click into a drag. VS Code
+ * uses the platform drag threshold; 4 px is the same order and keeps a shaky
+ * click a click.
+ */
+export const TAB_DRAG_THRESHOLD = 4;
 /** Pixels the pages give up at the top of the container. */
 export function tabStripReserve(o, pageCount) {
     var _a;
@@ -24,8 +30,19 @@ export function tabStripReserve(o, pageCount) {
 export function tabStripKey(pages, activeId, o, rtl) {
     return JSON.stringify([pages, activeId, o !== null && o !== void 0 ? o : null, rtl]);
 }
-export function paintTabStrip(strip, pages, activeId, o, rtl, onPick, onSelectContainer) {
+export function paintTabStrip(strip, pages, activeId, o, rtl, onPick, onSelectContainer, 
+/**
+ * The tab is the PAGE's drag handle, as it is in VS Code: press one and
+ * travel, and the whole page leaves — not the widget under the pointer,
+ * which used to be the only way to drag anything out and left the tab
+ * behind pointing at an empty page.
+ */
+onDrag) {
     const doc = strip.ownerDocument;
+    // Set by a tab drag, read by the click that trails it. Strip-level so it
+    // survives between the two listeners, cleared on the next press so an
+    // aborted drag never eats a later click.
+    let suppressClick = false;
     strip.className = 'axdb-tabs';
     if (o === null || o === void 0 ? void 0 : o.className)
         for (const c of o.className.split(/\s+/).filter(Boolean))
@@ -60,8 +77,41 @@ export function paintTabStrip(strip, pages, activeId, o, rtl, onPick, onSelectCo
         b.tabIndex = p.id === activeId ? 0 : -1;
         b.textContent = p.label;
         b.title = p.label;
+        b.addEventListener('pointerdown', (e) => {
+            const pe = e;
+            if (pe.button !== undefined && pe.button > 0)
+                return;
+            suppressClick = false;
+            if (!onDrag)
+                return;
+            const from = { x: pe.clientX, y: pe.clientY };
+            const stop = () => {
+                doc.removeEventListener('pointermove', move, true);
+                doc.removeEventListener('pointerup', stop, true);
+                doc.removeEventListener('pointercancel', stop, true);
+            };
+            const move = (m) => {
+                const pm = m;
+                if (Math.abs(pm.clientX - from.x) < TAB_DRAG_THRESHOLD &&
+                    Math.abs(pm.clientY - from.y) < TAB_DRAG_THRESHOLD)
+                    return;
+                stop();
+                // A press that TRAVELLED is a drag: the click that may follow it must
+                // not also switch the page — but only if the drag was actually TAKEN.
+                // A board that cannot place the page (a split pane, a container down
+                // to its last page) refuses, and then the press is still a click.
+                suppressClick = onDrag(p.id, pm) === true;
+            };
+            doc.addEventListener('pointermove', move, true);
+            doc.addEventListener('pointerup', stop, true);
+            doc.addEventListener('pointercancel', stop, true);
+        });
         b.addEventListener('click', (e) => {
             e.stopPropagation();
+            if (suppressClick) {
+                suppressClick = false;
+                return;
+            }
             onPick(p.id);
         });
         b.addEventListener('keydown', (e) => {