@grafloria/element 0.4.27 → 0.4.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.4.27",
+  "version": "0.4.29",
   "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, 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, 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.js

@@ -44,7 +44,7 @@
  */
 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 { 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';
@@ -230,6 +230,29 @@ function buildWidgetNode(w, rowHeight) {
         node.removePort(p.id);
     return node;
 }
+/**
+ * EVERY CHILD OF A TAB CONTAINER IS A PAGE. A page is a container, so a plain
+ * widget written among them is wrapped in one carrying its title. Without this
+ * the tab system simply ignored it: it was never positioned and painted at the
+ * board's origin at its 100×60 placeholder size, silently losing part of the
+ * author's layout (measured on a container mixing a widget with two pages).
+ */
+function wrapTabPages(ws) {
+    for (const w of ws) {
+        if (!w.widgets)
+            continue;
+        if (w.layout === 'tabs') {
+            w.widgets = w.widgets.map((c) => {
+                var _a;
+                return c.widgets
+                    ? c
+                    : Object.assign(Object.assign({ id: `${c.id}__page`, title: (_a = c.title) !== null && _a !== void 0 ? _a : c.id }, (w.columns !== undefined ? { columns: w.columns } : {})), { widgets: [Object.assign(Object.assign({}, c), { x: 0, y: 0 })] });
+            });
+        }
+        wrapTabPages(w.widgets);
+    }
+    return ws;
+}
 function cloneWidgets(ws) {
     return ws.map((w) => (Object.assign(Object.assign({}, w), (w.widgets ? { widgets: cloneWidgets(w.widgets) } : {}))));
 }
@@ -319,12 +342,44 @@ 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;
+    // 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, _b, _c;
+        if (!container)
+            return false;
+        const pages = pagesOf(containerId);
+        if (pages.length <= 1)
+            return false;
+        const label = (_b = (_a = pages.find((p) => p.id === pageId)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : pageId;
+        return ((_c = parentPeerOf(container, containerId)) === null || _c === void 0 ? void 0 : _c.tearOutMember(pageId, containerId, label, ev)) === true;
+    };
     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');
@@ -347,7 +402,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) => {
@@ -356,7 +411,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) };
@@ -407,10 +467,14 @@ export function attachTabsRuntime(ctx, model, container, handle) {
             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.
+        for (const ev of ['bounds:changed', 'member:added', 'member:removed']) {
+            const off = cg.on(ev, (() => sync(id)));
+            if (typeof off === 'function')
+                ctx.subscriptions.push(off);
+        }
         sync(id);
     }
 }
@@ -1133,8 +1197,8 @@ export function dashboard(options) {
     const sizing = (_h = options.sizing) !== null && _h !== void 0 ? _h : (mode === 'fluid' ? 'grow' : 'fit');
     const layout = (_j = options.layout) !== null && _j !== void 0 ? _j : 'grid';
     const views = options.views
-        ? options.views.map((v) => (Object.assign(Object.assign({}, v), { widgets: cloneWidgets(v.widgets) })))
-        : [{ id: 'main', widgets: cloneWidgets((_k = options.widgets) !== null && _k !== void 0 ? _k : []) }];
+        ? options.views.map((v) => (Object.assign(Object.assign({}, v), { widgets: wrapTabPages(cloneWidgets(v.widgets)) })))
+        : [{ id: 'main', widgets: wrapTabPages(cloneWidgets((_k = options.widgets) !== null && _k !== void 0 ? _k : [])) }];
     for (const v of views)
         assignCellsDeep(v.widgets, (_l = v.columns) !== null && _l !== void 0 ? _l : columns);
     // -- the render spec: one custom-HTML node per widget ----------------------

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

@@ -485,13 +485,21 @@ 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;
+    /**
+     * 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, label: string, ev: PointerEvent): boolean;
 }
 interface AdoptedLeg {
     groupId: string;

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

@@ -448,6 +448,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 +1093,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 +2021,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([
@@ -2116,7 +2131,65 @@ export function bindDashboardGrid(api, group, options = {}) {
         return best;
     };
     /** This binder's side of an adoption: enter gateless, then live-push. */
-    const adopt = (node, world, pxSize) => {
+    /**
+     * Put an ARRIVING tile as close to the pointer as the board allows. The
+     * exact cell is often refused because a SECTION is a locked tile and the
+     * incoming tile overlaps it (E4b), and a refused placement left the tile
+     * wherever it entered — the bottom row. That read as "it did not drop where
+     * 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) => {
+        // `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 at = (cx, cy) => {
+            const i = engine.getItem(id);
+            return !!i && i.x === cx && i.y === cy;
+        };
+        const maxX = Math.max(0, columns - w);
+        const scanRow = (cy) => {
+            if (at(x, cy))
+                return true;
+            if (engine.moveCheck(id, x, cy, { gate: false }).changed)
+                return true;
+            for (let d = 1; d <= columns; d++) {
+                for (const cx of [x - d, x + d]) {
+                    if (cx < 0 || cx > maxX)
+                        continue;
+                    if (at(cx, cy))
+                        return true;
+                    if (engine.moveCheck(id, cx, cy, { gate: false }).changed)
+                        return true;
+                }
+            }
+            return false;
+        };
+        if (scanRow(y))
+            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 (scanRow(cy))
+                    return true;
+            }
+        }
+        return false;
+    };
+    const adopt = (
+    // Only the id is used: a tab page arriving here is a GROUP, not a node.
+    node, world, pxSize) => {
         if (disposed)
             return null;
         const f = frame();
@@ -2153,7 +2226,7 @@ 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);
-        engine.moveCheck(node.id, cell0.x, cell0.y, { gate: false });
+        placeNear(node.id, cell0.x, cell0.y, span.w);
         armGlide();
         project();
         syncPlaceholder();
@@ -2165,7 +2238,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                     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 (engine.moveCheck(node.id, cell.x, cell.y).changed)
+                if (placeNear(node.id, cell.x, cell.y, item.w))
                     project();
                 syncPlaceholder();
             },
@@ -2198,6 +2271,7 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     const selfPeer = {
         group,
+        tearOutMember: (pageId, fromGroupId, label, ev) => beginTearOut(pageId, fromGroupId, label, ev),
         clearSelection: () => {
             var _a;
             if (selectedId === undefined)
@@ -2735,6 +2809,124 @@ 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, label, ev) => {
+        var _a, _b, _c;
+        if (disposed || gesture || slabGesture || isStatic || tearing)
+            return false;
+        const pg = diagram.getGroup(pageId);
+        const from = diagram.getGroup(fromGroupId);
+        if (!pg || !from || !engine.getItem(fromGroupId))
+            return false;
+        const size = sizeOf(pg);
+        const frameBefore = frameOfGroup(pg);
+        const cellBefore = (_b = cellFromGridItem((_a = pg.getMetadata) === null || _a === void 0 ? void 0 : _a.call(pg, 'gridItem'))) !== null && _b !== void 0 ? _b : {
+            x: 0,
+            y: 0,
+            w: 1,
+            h: 1,
+        };
+        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);
+        const leg = adopt({ id: pageId }, first, { width: size.width, height: size.height });
+        if (!leg)
+            return false;
+        tearing = pageId;
+        const doc = (_c = api.container.ownerDocument) !== null && _c !== void 0 ? _c : document;
+        const chip = doc.createElement('div');
+        chip.className = 'axdb-drag-chip axdb-tab-chip';
+        chip.textContent = 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 changed = execute('Move tab out', [
+                ...fin.commands,
+                new SetGroupCellCommand(pageId, cellBefore, fin.cell, frameBefore, fin.rect),
+                new RemoveFromGroupCommand(fromGroupId, pageId),
+                new AddToGroupCommand(group.id, pageId),
+            ]);
+            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;
@@ -3153,6 +3345,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: () => 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) => {