@grafloria/element 0.4.12 → 0.4.14

package/package.json

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

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

@@ -106,6 +106,25 @@ export interface DashboardWidgetSpec {
      * extent of the declared children.
      */
     maxRows?: number;
+    /**
+     * Container only: the inner board's layout, exactly as a view's. `'grid'`
+     * (default) packs the children in cells; `'split'` is a splitter tree that
+     * always covers the pane. Switch live with `setLayout(mode, containerId)`;
+     * `toJSON()` writes it per container.
+     */
+    layout?: 'grid' | 'split';
+    /**
+     * Container only, split layout: the authored splitter tree. Omit it and the
+     * tree is derived from the children's cells. `toJSON()` writes it back.
+     */
+    tree?: SplitNode | null;
+    /**
+     * Container only: what a pull past the pane's rows does. `'grow'` (default):
+     * the container's slab grows a row in the parent — the ratchet above.
+     * `'fit'`: the pane is the bound — a child that needs a row the pane does
+     * not hold is refused where it stands, and nothing outside the pane moves.
+     */
+    sizing?: 'fit' | 'grow';
 }
 /** One board. Multiple views are the tab pattern: only one is on-camera. */
 export interface DashboardViewSpec {
@@ -282,6 +301,14 @@ export interface DashboardHandle {
      * and a quiet ring; a void click clears. False when the id is unknown.
      */
     focusWidget(id: string): boolean;
+    /**
+     * SELECT a widget WITHOUT moving keyboard focus — the ring and the grip,
+     * nothing else; what a mouse press does. `undefined` clears the selection
+     * on every view. False when the id is unknown.
+     */
+    selectWidget(id: string | undefined): boolean;
+    /** The selected widget, if any (across views: only the on-camera one can be). */
+    getSelectedWidget(): string | undefined;
     /** Every widget handle of a view (default: the active one). */
     widgetsOf(viewId?: string): WidgetHandle[];
     /**

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

@@ -42,7 +42,7 @@
  * Cells are the truth and live in the existing `GridItemConfig`, so save/load
  * round-trips with no extra work — same as every other kit.
  */
-import { __awaiter } from "tslib";
+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 { bindDashboardSplit, SPLIT_TREE_KEY } from './split-binder.js';
@@ -358,7 +358,7 @@ export function createDashboardHandle(ctx) {
      * tile under the container it is actually in, in every one of those states.
      */
     const treeOf = (boardId) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const g = ctx.boardGroups.get(boardId);
         const b = binders.get(boardId);
         if (!g)
@@ -373,7 +373,14 @@ export function createDashboardHandle(ctx) {
             const cell = cellOf(memberId);
             const at = cell ? { x: cell.x, y: cell.y, span: cell.w, rows: cell.h } : {};
             if (ctx.boardGroups.has(memberId)) {
-                entries.push(Object.assign(Object.assign(Object.assign({ id: memberId }, (spec !== null && spec !== void 0 ? spec : {})), at), { widgets: treeOf(memberId) }));
+                // The container's LIVE layout and, under split, its live tree — the
+                // authored `tree` is stale the moment a divider moves.
+                const _g = spec !== null && spec !== void 0 ? spec : {}, { tree: _authored } = _g, rest = __rest(_g, ["tree"]);
+                void _authored;
+                const clayout = (_c = (_b = ctx.layoutOf.get(memberId)) !== null && _b !== void 0 ? _b : spec === null || spec === void 0 ? void 0 : spec.layout) !== null && _c !== void 0 ? _c : 'grid';
+                const cb = binders.get(memberId);
+                const ctree = clayout === 'split' && (cb === null || cb === void 0 ? void 0 : cb.getSplitTree) ? cb.getSplitTree() : undefined;
+                entries.push(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ id: memberId }, rest), at), { layout: clayout }), (ctree !== undefined ? { tree: ctree } : {})), { widgets: treeOf(memberId) }));
             }
             else if (spec) {
                 // `pinned` is read from the NODE's lock, not the authored spec: pin()
@@ -381,7 +388,7 @@ export function createDashboardHandle(ctx) {
                 // the user left it (D5). Written only when true, so an unpinned
                 // widget serialises exactly as it always did.
                 const entry = Object.assign(Object.assign({}, spec), at);
-                if (((_d = (_c = (_b = ctx.apiRef) === null || _b === void 0 ? void 0 : _b.getModel().getNode(memberId)) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.locked) === true)
+                if (((_f = (_e = (_d = ctx.apiRef) === null || _d === void 0 ? void 0 : _d.getModel().getNode(memberId)) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.locked) === true)
                     entry.pinned = true;
                 else
                     delete entry.pinned;
@@ -520,6 +527,24 @@ export function createDashboardHandle(ctx) {
             queueMicrotask(() => retry(4));
             return true;
         },
+        selectWidget(id) {
+            var _a;
+            if (id === undefined) {
+                for (const b of binders.values())
+                    b.selectWidget(undefined);
+                return true;
+            }
+            const b = binders.get((_a = viewOfWidget.get(id)) !== null && _a !== void 0 ? _a : '');
+            return !!b && b.selectWidget(id);
+        },
+        getSelectedWidget() {
+            for (const b of binders.values()) {
+                const s = b.getSelectedWidget();
+                if (s)
+                    return s;
+            }
+            return undefined;
+        },
         widgetsOf(viewId) {
             var _a;
             const v = views.find((x) => x.id === (viewId !== null && viewId !== void 0 ? viewId : ctx.active));
@@ -528,7 +553,8 @@ export function createDashboardHandle(ctx) {
         setLayout(layout, viewId) {
             var _a, _b, _c;
             const vid = viewId !== null && viewId !== void 0 ? viewId : ctx.active;
-            if (!views.some((v) => v.id === vid))
+            // A view, or a CONTAINER (item 7): the same switch one level down.
+            if (!views.some((v) => v.id === vid) && !ctx.boardGroups.has(vid))
                 return;
             if (((_a = ctx.layoutOf.get(vid)) !== null && _a !== void 0 ? _a : 'grid') === layout)
                 return;
@@ -1043,8 +1069,12 @@ export function dashboard(options) {
             // its tree from exactly those, so any stale tree is cleared first;
             // split → grid rebuilds from them, so the column cache goes too.
             ctx.rebindView = (viewId, next) => {
-                var _a, _b;
+                var _a, _b, _c;
                 const v = views.find((x) => x.id === viewId);
+                if (!v) {
+                    rebindContainerLayout(viewId, next);
+                    return;
+                }
                 const g = groups.get(viewId);
                 const b = binders.get(viewId);
                 if (!v || !g || !b)
@@ -1052,6 +1082,7 @@ export function dashboard(options) {
                 const cells = b.saveLayout().cells;
                 const live = { rtl: b.getRtl(), static: b.getStatic(), dragHandle: b.getDragHandle() };
                 const focused = b.getFocusedWidget();
+                const selected = b.getSelectedWidget();
                 b.dispose();
                 const write = (fn) => (model.runSystemWrite ? model.runSystemWrite(fn) : fn());
                 write(() => {
@@ -1072,9 +1103,13 @@ export function dashboard(options) {
                 binders.set(viewId, bindView(v, g, next, live));
                 (_a = binders.get(viewId)) === null || _a === void 0 ? void 0 : _a.sync();
                 // The selected widget (and its grip) survives the switch, as it does in
-                // the DevExpress designer — the host used to have to restate it.
+                // the DevExpress designer — the host used to have to restate it. A
+                // MOUSE selection is not a focus (the press never focuses the host),
+                // so it is carried on its own: the kit lab's L21 lost it (2026-09-08).
                 if (focused)
                     (_b = binders.get(viewId)) === null || _b === void 0 ? void 0 : _b.focusWidget(focused);
+                else if (selected)
+                    (_c = binders.get(viewId)) === null || _c === void 0 ? void 0 : _c.selectWidget(selected);
             };
             handle.showView(ctx.active);
             ctx.rebindContainer = (id) => {
@@ -1086,6 +1121,56 @@ export function dashboard(options) {
                 ctx.boardGroups.set(id, g);
                 bindContainer(g, w, (_a = ctx.viewOfBoard.get(id)) !== null && _a !== void 0 ? _a : ctx.active);
             };
+            /**
+             * LIVE LAYOUT SWITCH ON A CONTAINER (item 7) — the view's contract one
+             * level down: cells persisted where the grid reads them, the tree and
+             * column cache cleared, the container's `layout` flipped on its spec and
+             * its metadata, a fresh binder on the same group, selection carried.
+             */
+            function rebindContainerLayout(id, next) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                const cg = ctx.boardGroups.get(id);
+                const w = specById.get(id);
+                const b = binders.get(id);
+                if (!cg || !w || !w.widgets || !b)
+                    return;
+                const cells = b.saveLayout().cells;
+                const focused = b.getFocusedWidget();
+                const selected = b.getSelectedWidget();
+                b.dispose();
+                const write = (fn) => (model.runSystemWrite ? model.runSystemWrite(fn) : fn());
+                write(() => {
+                    var _a, _b, _c;
+                    for (const [cid, cell] of cells) {
+                        const n = model.getNode(cid);
+                        if (n)
+                            n.setMetadata('gridItem', gridItemFromCell(cell));
+                        else
+                            (_a = model.getGroup(cid)) === null || _a === void 0 ? void 0 : _a.setMetadata('gridItem', gridItemFromCell(cell));
+                    }
+                    cg.setMetadata(SPLIT_TREE_KEY, undefined);
+                    cg.setMetadata('dashboardLayouts', undefined);
+                    const board = (_b = cg.getMetadata('dashboardBoard')) !== null && _b !== void 0 ? _b : {};
+                    cg.setMetadata('dashboardBoard', Object.assign(Object.assign({}, board), { layout: next }));
+                    const cw = (_c = cg.getMetadata('containerWidget')) !== null && _c !== void 0 ? _c : {};
+                    cg.setMetadata('containerWidget', Object.assign(Object.assign({}, cw), { layout: next }));
+                });
+                w.layout = next;
+                delete w.tree;
+                ctx.layoutOf.set(id, next);
+                // The inner bound is the slab's LIVE row count, not the authored design:
+                // a child escalation grew to two rows must keep them through a
+                // split → grid round trip (the visual gate caught it collapsing to one
+                // inside a two-row slab).
+                const slabRows = (_c = (_b = binders.get((_a = ctx.viewOfWidget.get(id)) !== null && _a !== void 0 ? _a : '')) === null || _b === void 0 ? void 0 : _b.cellOf(id)) === null || _c === void 0 ? void 0 : _c.h;
+                const authored = (_d = w.maxRows) !== null && _d !== void 0 ? _d : rowExtentOf((_e = w.widgets) !== null && _e !== void 0 ? _e : []);
+                bindContainer(cg, w, (_f = ctx.viewOfBoard.get(id)) !== null && _f !== void 0 ? _f : ctx.active, Math.max(authored, slabRows !== null && slabRows !== void 0 ? slabRows : 0));
+                (_g = binders.get(id)) === null || _g === void 0 ? void 0 : _g.sync();
+                if (focused)
+                    (_h = binders.get(id)) === null || _h === void 0 ? void 0 : _h.focusWidget(focused);
+                else if (selected)
+                    (_j = binders.get(id)) === null || _j === void 0 ? void 0 : _j.selectWidget(selected);
+            }
             (_m = ctx.attachHistory) === null || _m === void 0 ? void 0 : _m.call(ctx);
             return;
             /**
@@ -1098,7 +1183,7 @@ export function dashboard(options) {
              * hit-testing and the height-escalation ratchet all apply unchanged.
              */
             function mountBoard(boardId, viewId, widgets, boardGroup) {
-                var _a, _b, _c, _d, _e;
+                var _a, _b, _c, _d, _e, _f, _g;
                 for (const w of widgets) {
                     if (w.widgets) {
                         const innerColumns = innerColumnsOf(w);
@@ -1110,7 +1195,11 @@ export function dashboard(options) {
                         cg.setMetadata('gridItem', gridItemFromCell({ x: w.x, y: w.y, w: w.span, h: w.rows }));
                         // The container's own spec fields, persisted ON the group — a
                         // reloaded document has no authored literal to read them from.
-                        cg.setMetadata('containerWidget', Object.assign(Object.assign(Object.assign(Object.assign({}, (w.kind !== undefined ? { kind: w.kind } : {})), (w.title !== undefined ? { title: w.title } : {})), { columns: innerColumns, maxRows: innerRows }), (w.data !== undefined ? { data: w.data } : {})));
+                        cg.setMetadata('containerWidget', Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (w.kind !== undefined ? { kind: w.kind } : {})), (w.title !== undefined ? { title: w.title } : {})), { columns: innerColumns, maxRows: innerRows }), (w.data !== undefined ? { data: w.data } : {})), (w.layout !== undefined ? { layout: w.layout } : {})), (w.sizing !== undefined ? { sizing: w.sizing } : {})));
+                        // Item 7: the container's own layout and bound, persisted like a view's.
+                        ctx.layoutOf.set(w.id, (_c = w.layout) !== null && _c !== void 0 ? _c : 'grid');
+                        if (w.layout === 'split' && w.tree !== undefined)
+                            cg.setMetadata(SPLIT_TREE_KEY, w.tree);
                         cg.setMetadata('dashboardBoard', {
                             columns: innerColumns,
                             gap,
@@ -1123,7 +1212,9 @@ export function dashboard(options) {
                             designHeight: 0,
                             maxRows: innerRows,
                             float: false,
-                            rtl: (_c = options.rtl) !== null && _c !== void 0 ? _c : false,
+                            rtl: (_d = options.rtl) !== null && _d !== void 0 ? _d : false,
+                            layout: (_e = w.layout) !== null && _e !== void 0 ? _e : 'grid',
+                            escalate: w.sizing !== 'fit',
                         });
                         cg.size = { width: 100, height: rowHeight, depth: 0 };
                         boardGroup.addMember(w.id);
@@ -1143,7 +1234,7 @@ export function dashboard(options) {
                     // and made toJSON() → dashboard() NOT round-trip (a saved layout
                     // rebuilt back into its declaration order rather than its cells).
                     if (w.x !== undefined && w.y !== undefined) {
-                        n.setGridItem(gridItemFromCell({ x: w.x, y: w.y, w: (_d = w.span) !== null && _d !== void 0 ? _d : 3, h: (_e = w.rows) !== null && _e !== void 0 ? _e : 1 }));
+                        n.setGridItem(gridItemFromCell({ x: w.x, y: w.y, w: (_f = w.span) !== null && _f !== void 0 ? _f : 3, h: (_g = w.rows) !== null && _g !== void 0 ? _g : 1 }));
                     }
                     if (w.pinned)
                         n.setState({ locked: true });
@@ -1181,14 +1272,25 @@ export function dashboard(options) {
                 return bindDashboardGrid(a, g, Object.assign(Object.assign(Object.assign({}, common), { columns: (_j = v.columns) !== null && _j !== void 0 ? _j : columns, sizing, baseRowHeight: rowHeight, designHeight: viewH(v), float: (_k = options.float) !== null && _k !== void 0 ? _k : false, overflow }), (options.responsive ? { responsive: options.responsive } : {})));
             }
             /** Bind (or re-bind) a container's inner grid on its group. */
-            function bindContainer(cg, w, viewId) {
-                var _a, _b, _c, _d, _e;
-                binders.set(w.id, bindDashboardGrid(a, cg, Object.assign(Object.assign({ columns: innerColumnsOf(w), gap, padding: 0, sizing: 'fit', baseRowHeight: rowHeight, designHeight: 0, maxRows: (_a = w.maxRows) !== null && _a !== void 0 ? _a : rowExtentOf((_b = w.widgets) !== null && _b !== void 0 ? _b : []), float: false, rtl: (_c = options.rtl) !== null && _c !== void 0 ? _c : false, static: (_d = options.static) !== null && _d !== void 0 ? _d : false, dragHandle: (_e = options.dragHandle) !== null && _e !== void 0 ? _e : false }, (options.squeeze !== undefined ? { squeeze: options.squeeze } : {})), { onGesture: (e) => {
+            function bindContainer(cg, w, viewId, innerRows) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                void viewId;
+                // The LIVE switches ride on the view's binder when it exists (a
+                // container bound after a setStatic/setRtl/setDragHandle must match).
+                const vb = binders.get((_a = ctx.viewOfBoard.get(w.id)) !== null && _a !== void 0 ? _a : ctx.active);
+                const inner = Object.assign(Object.assign({ columns: innerColumnsOf(w), gap, padding: 0, baseRowHeight: rowHeight, rtl: (_c = (_b = vb === null || vb === void 0 ? void 0 : vb.getRtl()) !== null && _b !== void 0 ? _b : options.rtl) !== null && _c !== void 0 ? _c : false, static: (_e = (_d = vb === null || vb === void 0 ? void 0 : vb.getStatic()) !== null && _d !== void 0 ? _d : options.static) !== null && _e !== void 0 ? _e : false, dragHandle: (_g = (_f = vb === null || vb === void 0 ? void 0 : vb.getDragHandle()) !== null && _f !== void 0 ? _f : options.dragHandle) !== null && _g !== void 0 ? _g : false }, (options.squeeze !== undefined ? { squeeze: options.squeeze } : {})), { onGesture: (e) => {
                         var _a, _b;
                         if (e.type === 'commit')
                             reportChanged();
                         (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    } })));
+                    } });
+                if (((_h = ctx.layoutOf.get(w.id)) !== null && _h !== void 0 ? _h : w.layout) === 'split') {
+                    // A splitter tree covering the pane; the pane's frame is the parent's
+                    // slab, so no design height of its own.
+                    binders.set(w.id, bindDashboardSplit(a, cg, Object.assign(Object.assign({}, inner), (w.tree !== undefined ? { tree: w.tree } : {}))));
+                    return;
+                }
+                binders.set(w.id, bindDashboardGrid(a, cg, Object.assign(Object.assign({}, inner), { sizing: 'fit', designHeight: 0, maxRows: (_j = innerRows !== null && innerRows !== void 0 ? innerRows : w.maxRows) !== null && _j !== void 0 ? _j : rowExtentOf((_k = w.widgets) !== null && _k !== void 0 ? _k : []), float: false, escalate: w.sizing !== 'fit' })));
             }
             /**
              * One reporter for every binder on a view — the view's own and each

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

@@ -50,6 +50,7 @@
  * second `bindDashboardGrid` on the section for a nested pack grid.
  */
 import { Command, type DiagramModel, type GridColumnLayout, type GroupModel, type NodeModel } from '@grafloria/engine';
+import { type ToolPointerEvent } from '@grafloria/renderer';
 import { type CellRect, type WorldRect } from './grid-mapping.js';
 /** The slice of a DiagramInstance the binder needs (structural, test-friendly). */
 export interface DashboardGridApi {
@@ -147,6 +148,13 @@ export interface DashboardGridOptions {
      * row instead), and the strip can never be squeezed.
      */
     maxRows?: number;
+    /**
+     * Nested boards only. `true` (default): a child pulled clearly past the
+     * bound GROWS the container's slab in the parent (height escalation).
+     * `false`: the pane is the bound — the pull is refused where it stands, the
+     * container's `sizing: 'fit'`.
+     */
+    escalate?: boolean;
     /**
      * What dragging a tile OUT of the board means (default 'cancel' — the tile
      * snaps back on release). 'remove' dims the ghost outside the board and a
@@ -261,6 +269,23 @@ export declare const gripOf: (v: DragHandleOption) => DragGripOptions | null;
  */
 export declare function syncGrip(host: HTMLElement, cfg: DragGripOptions | null, movable: boolean): void;
 /** The member host a press on a painted grip belongs to (the grip may sit OUTSIDE the host's box). */
+/**
+ * Is this press OURS? The renderer's tool registry is PAGE-GLOBAL: every
+ * registered tool is asked about every press on every canvas, ties going to
+ * the first registered. Two boards on one page sharing widget ids — a designer
+ * beside its preview, a page of examples — had the FIRST board's tool claim
+ * the second's presses: it selected its own tile and moved nothing (kit lab,
+ * 2026-09-08: 16 of 23 boards dead to the mouse). A tool claims only a press
+ * whose DOM target sits in its own container and whose hit node is its own
+ * diagram's object, not a namesake from another model.
+ */
+export declare function ownsPress(container: HTMLElement, diagram: {
+    getNode(id: string): unknown;
+}, ev: ToolPointerEvent, hit: {
+    node?: {
+        id: string;
+    };
+}): boolean;
 export declare function gripHostOf(target: Element | null): HTMLElement | null;
 /**
  * Did a press land on the drag handle? A press INSIDE the handle element
@@ -313,6 +338,14 @@ export interface DashboardGridHandle {
     focusWidget(id: string): boolean;
     /** The member the roving tabindex currently rests on. */
     getFocusedWidget(): string | undefined;
+    /**
+     * SELECT a member without moving keyboard focus — what a mouse press does
+     * (the renderer cancels the press's default, so a click never focuses the
+     * host). `undefined` clears. False for a non-member.
+     */
+    selectWidget(id: string | undefined): boolean;
+    /** The selected member: the one wearing the ring and, in grip mode, the grip. */
+    getSelectedWidget(): string | undefined;
     /**
      * The layout to PERSIST — from the engine's LARGEST cached column count, so
      * saving while the board is narrow still saves the wide layout the user
@@ -380,4 +413,83 @@ export interface DashboardGridHandle {
     }, event: PointerEvent): void;
     dispose(): void;
 }
+/**
+ * CROSS-CONTAINER HANDOFF. Binders on the same canvas register here; a move
+ * gesture whose pointer enters ANOTHER registered board (deepest wins — the
+ * nested KPI section beats the tab that contains it) hands the tile off: the
+ * source engine drops it (survivors settle home), the target engine ADOPTS it
+ * (gateless first placement, then the normal live-push loop), and release
+ * commits ONE batch across both boards — displaced tiles on each side,
+ * RemoveFromGroup + AddToGroup, the tile's new cells and geometry. This is
+ * what makes "drag Total Revenue under Top reps" MOVE the KPI to the main
+ * board rather than snapping it home (live review: parking was a guard, not
+ * the feature).
+ */
+interface BinderPeer {
+    group: GroupModel;
+    /** True when this board's engine holds `id` as an item (member lookup). */
+    hasItem(id: string): boolean;
+    /** The member's current cell in this board (undefined when absent). */
+    memberCell(id: string): CellRect | undefined;
+    /**
+     * Grow/shrink a member's row span by `dRows` — the parent half of nested
+     * HEIGHT ESCALATION: pulling a KPI taller than its one-row strip grows the
+     * STRIP's slab in the board that contains it (live report: "i cant
+     * increase height"). Returns the cell+frame before/after when accepted.
+     */
+    resizeMemberBy(id: string, dRows: number): {
+        changed: boolean;
+        cellBefore?: CellRect;
+        cellAfter?: CellRect;
+        frameBefore?: WorldRect;
+        frameAfter?: WorldRect;
+    };
+    containsWorld(x: number, y: number): boolean;
+    /**
+     * Containment plus ONE extra row of grace below the frame — gridstack's
+     * `_extraDragRow`: dropping "under the last row" appends a row rather than
+     * counting as off-board. Consulted only when NO strict frame matched, so a
+     * nested strip's band can never steal a point that strictly belongs to the
+     * board below it.
+     */
+    containsWorldExtended(x: number, y: number): boolean;
+    frameArea(): number;
+    adopt(node: NodeModel, world: {
+        x: number;
+        y: number;
+    }, pxSize: {
+        width: number;
+        height: number;
+    }): AdoptedLeg | null;
+}
+interface AdoptedLeg {
+    groupId: string;
+    /** Drive the target engine from the source binder's pointer stream. */
+    move(world: {
+        x: number;
+        y: number;
+    }): void;
+    /** Undo the adoption: target board back to its pre-entry layout. */
+    abort(): void;
+    /**
+     * Close the leg for commit: returns the target-side displaced commands, the
+     * tile's final cell and its projected rect. Null when the tile is somehow
+     * gone (treat as abort).
+     */
+    finalize(): {
+        commands: Command[];
+        cell: CellRect;
+        rect: WorldRect;
+    } | null;
+}
+/**
+ * Register a board that is NOT a grid (the split binder on a container) as a
+ * peer on its canvas, so the parent grid's hitTest defers a press on one of
+ * its tiles to it ("a press on a tile that belongs to a NESTED board must
+ * reach that board's tool") whatever the registration order. Returns the
+ * unregister. A split board adopts nothing and grows no slab: its `adopt`
+ * answers null and `resizeMemberBy` answers unchanged.
+ */
+export declare function registerBoardPeer(container: HTMLElement, peer: BinderPeer): () => void;
+export type { BinderPeer };
 export declare function bindDashboardGrid(api: DashboardGridApi, group: GroupModel, options?: DashboardGridOptions): DashboardGridHandle;

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

@@ -92,6 +92,25 @@ export function syncGrip(host, cfg, movable) {
     host.classList.add(`axdb-gp-${(_d = cfg.placement) !== null && _d !== void 0 ? _d : 'inside'}`, `axdb-gp-${(_e = cfg.position) !== null && _e !== void 0 ? _e : 'left'}`);
 }
 /** The member host a press on a painted grip belongs to (the grip may sit OUTSIDE the host's box). */
+/**
+ * Is this press OURS? The renderer's tool registry is PAGE-GLOBAL: every
+ * registered tool is asked about every press on every canvas, ties going to
+ * the first registered. Two boards on one page sharing widget ids — a designer
+ * beside its preview, a page of examples — had the FIRST board's tool claim
+ * the second's presses: it selected its own tile and moved nothing (kit lab,
+ * 2026-09-08: 16 of 23 boards dead to the mouse). A tool claims only a press
+ * whose DOM target sits in its own container and whose hit node is its own
+ * diagram's object, not a namesake from another model.
+ */
+export function ownsPress(container, diagram, ev, hit) {
+    var _a;
+    const t = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target;
+    if (typeof Node !== 'undefined' && t instanceof Node && !container.contains(t))
+        return false;
+    if (hit.node && diagram.getNode(hit.node.id) !== hit.node)
+        return false;
+    return true;
+}
 export function gripHostOf(target) {
     var _a, _b;
     const grip = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '.' + GRIP_CLASS);
@@ -126,6 +145,26 @@ export const CAPTION_BAND = 28;
  * page (review D12).
  */
 const BOARD_REGISTRY = new WeakMap();
+/**
+ * Register a board that is NOT a grid (the split binder on a container) as a
+ * peer on its canvas, so the parent grid's hitTest defers a press on one of
+ * its tiles to it ("a press on a tile that belongs to a NESTED board must
+ * reach that board's tool") whatever the registration order. Returns the
+ * unregister. A split board adopts nothing and grows no slab: its `adopt`
+ * answers null and `resizeMemberBy` answers unchanged.
+ */
+export function registerBoardPeer(container, peer) {
+    let set = BOARD_REGISTRY.get(container);
+    if (!set) {
+        set = new Set();
+        BOARD_REGISTRY.set(container, set);
+    }
+    set.add(peer);
+    const s = set;
+    return () => {
+        s.delete(peer);
+    };
+}
 /**
  * ONE aria-live region per canvas, shared by every board on it — the
  * renderer's own controller (coalescing, de-duplicating), so a dashboard
@@ -243,6 +282,8 @@ export function bindDashboardGrid(api, group, options = {}) {
     let float = (_f = options.float) !== null && _f !== void 0 ? _f : false;
     /** The AUTHORED bound — a nested strip's design (row-first push, escalation). */
     const maxRows = options.maxRows;
+    /** May a pull past the bound grow the slab in the parent? `false` = the pane is the bound. */
+    const escalate = options.escalate !== false;
     const dragOut = (_g = options.dragOut) !== null && _g !== void 0 ? _g : 'cancel';
     const wantHandles = options.resizeHandles !== false;
     const fluid = options.fluid === true;
@@ -575,15 +616,35 @@ export function bindDashboardGrid(api, group, options = {}) {
             clearTimeout(glideTimer);
         glideTimer = setTimeout(() => { var _a; return (_a = htmlLayer()) === null || _a === void 0 ? void 0 : _a.classList.remove('axdb-glide'); }, GLIDE_OFF_DELAY);
     };
+    /** The host whose ghost class the pending timer will lift. */
+    let ghostHost = null;
+    /**
+     * Lift a pending ghost NOW. One timer serves every host, so superseding it
+     * (a new gesture within 60 ms of the last drop — ③ then ④ in the
+     * nested-containers checks — or a dispose on a rebind) used to clear the
+     * timer and leave the previous tile lifted for good: a permanent drop
+     * shadow the visual gate finally caught.
+     */
+    const flushGhost = () => {
+        if (ghostTimer)
+            clearTimeout(ghostTimer);
+        ghostTimer = null;
+        ghostHost === null || ghostHost === void 0 ? void 0 : ghostHost.classList.remove('axdb-ghost', 'axdb-out');
+        ghostHost = null;
+    };
     const setGhost = (id, on) => {
         const host = hostOf(id);
         if (!host)
             return;
+        if (ghostHost && ghostHost !== host)
+            flushGhost();
         if (on) {
             if (ghostTimer)
                 clearTimeout(ghostTimer);
+            ghostTimer = null;
             host.classList.add('axdb-ghost');
             host.classList.remove('axdb-out');
+            ghostHost = host;
         }
         else {
             host.classList.remove('axdb-out');
@@ -591,7 +652,13 @@ export function bindDashboardGrid(api, group, options = {}) {
             // placeholder is INSTANT (gridstack-style), then let glides resume.
             if (ghostTimer)
                 clearTimeout(ghostTimer);
-            ghostTimer = setTimeout(() => host.classList.remove('axdb-ghost'), 60);
+            ghostHost = host;
+            ghostTimer = setTimeout(() => {
+                host.classList.remove('axdb-ghost');
+                ghostTimer = null;
+                if (ghostHost === host)
+                    ghostHost = null;
+            }, 60);
         }
     };
     // -- resize handles ---------------------------------------------------------
@@ -1308,7 +1375,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         // the strip's CURRENT slab rows, whatever gesture created them; the
         // ledger just accumulates this gesture's net change for the one-batch
         // commit and for Escape.
-        if (maxRows !== undefined && g.kind === 'resize') {
+        if (maxRows !== undefined && escalate && g.kind === 'resize') {
             const parent = parentPeer();
             if (parent) {
                 const visual = boardVisualHeight();
@@ -1673,6 +1740,8 @@ export function bindDashboardGrid(api, group, options = {}) {
                 return false;
             if (gesture)
                 return true; // own the rest of an in-flight gesture
+            if (!ownsPress(api.container, diagram, ev, hit))
+                return false;
             if (hit.node) {
                 if (((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(hit.node.id))
                     return true;
@@ -1825,8 +1894,10 @@ export function bindDashboardGrid(api, group, options = {}) {
                 }
             }
         }
-        if (hoverHost && hoverHost !== host)
+        if (hoverHost && hoverHost !== host) {
             hoverHost.style.cursor = '';
+            hoverHost.removeAttribute('data-axdb-edge'); // the affordance follows the pointer off a tile
+        }
         hoverHost = host;
         if (!host)
             return;
@@ -2262,6 +2333,16 @@ export function bindDashboardGrid(api, group, options = {}) {
             return true;
         },
         getFocusedWidget: () => focusedId,
+        selectWidget(id) {
+            var _a;
+            if (disposed)
+                return false;
+            if (id !== undefined && (!((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !diagram.getNode(id)))
+                return false;
+            selectWidget(id);
+            return true;
+        },
+        getSelectedWidget: () => selectedId,
         setStatic(on) {
             if (on === isStatic)
                 return;
@@ -2412,8 +2493,10 @@ export function bindDashboardGrid(api, group, options = {}) {
             placeholder = null;
             if (glideTimer)
                 clearTimeout(glideTimer);
-            if (ghostTimer)
-                clearTimeout(ghostTimer);
+            // A rebind inside the 60 ms window (a layout switch right after an undo)
+            // disposed this binder with the timer pending — the host kept its
+            // lifted ghost for good (visual gate, nested-containers ⑤).
+            flushGhost();
             (_d = htmlLayer()) === null || _d === void 0 ? void 0 : _d.classList.remove('axdb-glide');
             api.container.style.cursor = '';
         },

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

@@ -25,7 +25,7 @@
 import { __awaiter } from "tslib";
 import { Command } from '@grafloria/engine';
 import { LiveRegionController, registerTool } from '@grafloria/renderer';
-import { dragHandleSelector, gripHostOf, gripOf, normalizeDragHandle, pressOnDragHandle, syncGrip, DRAG_HANDLE_CLASS } from './grid-binder.js';
+import { dragHandleSelector, gripHostOf, gripOf, normalizeDragHandle, ownsPress, pressOnDragHandle, registerBoardPeer, syncGrip, DRAG_HANDLE_CLASS } from './grid-binder.js';
 import { cellFromGridItem } from './grid-mapping.js';
 import { addSplitLeaf, cellsFromSplit, cloneSplit, dividersOf, groupRectsOf, insertSplitLeaf, moveSplitDivider, normalizeSplit, pathToLeaf, projectSplit, removeSplitLeaf, splitFromCells, splitLeaves, } from './split-layout.js';
 import { ensureDashboardKitStyles } from './styles.js';
@@ -631,6 +631,8 @@ export function bindDashboardSplit(api, group, options = {}) {
                 return false;
             if (gesture)
                 return true;
+            if (!ownsPress(api.container, diagram, ev, hit))
+                return false;
             if (hit.node)
                 return ((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(hit.node.id);
             return worldInsideBoard(ev.world.x, ev.world.y);
@@ -1025,6 +1027,16 @@ export function bindDashboardSplit(api, group, options = {}) {
             return true;
         },
         getFocusedWidget: () => focusedId,
+        selectWidget(id) {
+            var _a;
+            if (disposed)
+                return false;
+            if (id !== undefined && (!((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !diagram.getNode(id)))
+                return false;
+            selectWidget(id);
+            return true;
+        },
+        getSelectedWidget: () => selectedId,
         saveLayout() {
             return { columns, cells: cellsFromSplit(readTree(), columns, rowsGuess()) };
         },
@@ -1154,6 +1166,26 @@ export function bindDashboardSplit(api, group, options = {}) {
     applyFluidFrame();
     project(reconcile());
     api.renderNow();
+    // A split board on a CONTAINER (item 7) sits inside a parent grid: register
+    // as a peer so the parent's hitTest hands presses on our tiles to us.
+    const unregisterPeer = registerBoardPeer(api.container, {
+        group,
+        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 }),
+        containsWorld: (x, y) => worldInsideBoard(x, y),
+        containsWorldExtended: (x, y) => worldInsideBoard(x, y),
+        frameArea: () => {
+            const f = frame();
+            return f.width * f.height;
+        },
+        adopt: () => null,
+    });
+    const disposeHandle = handle.dispose.bind(handle);
+    handle.dispose = () => {
+        unregisterPeer();
+        disposeHandle();
+    };
     return handle;
 }
 //# sourceMappingURL=split-binder.js.map

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

@@ -244,6 +244,11 @@ const CSS = `
 .grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 32px; }
 .grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 12px; }
 .axdb-widget-b { flex: 1; min-height: 0; position: relative; }
+/* A drag across a STATIC board (nothing prevents the press's default there)
+   used to select every label on it; kit cards are not prose. Tables stay
+   copyable — a figure in a grid is the one thing a viewer selects. */
+.axdb-widget { user-select: none; -webkit-user-select: none; }
+.axdb-widget .axdb-table { user-select: text; -webkit-user-select: text; }
 .axdb-widget-b > svg { display: block; width: 100%; height: 100%; }
 .axdb-widget-b.axdb-scroll { overflow: auto; }
 /* A chart WITH a legend under it: the plot yields height, the legend keeps its
@@ -332,6 +337,9 @@ const CSS = `
    tile gets a bigger ring, not dead card), square, capped so its centre figure
    stays a figure and not a headline. */
 .axdb-widget-b.axdb-donut { display: flex; align-items: center; gap: 10px; }
+/* A legend taller than a SHORT body (a 2-row donut on a squeezed board) is
+   clipped at its own foot, not centred over the title above it. */
+.axdb-widget-b.axdb-donut > .axdb-lg--col { max-height: 100%; min-height: 0; overflow: hidden; }
 .axdb-widget-b.axdb-donut > svg {
   flex: 0 0 auto; width: auto; height: 100%; max-height: 260px; max-width: 60%; aspect-ratio: 1 / 1;
 }

package/src/lib/load.js

@@ -206,7 +206,7 @@ export function fromDocument(document, options = {}) {
         // a fixed world — it stays one. Fluid is only what was saved fluid.
         mode: (firstBoard === null || firstBoard === void 0 ? void 0 : firstBoard.fluid) === true ? 'fluid' : 'fixed',
         overflow: (_p = firstBoard === null || firstBoard === void 0 ? void 0 : firstBoard.overflow) !== null && _p !== void 0 ? _p : 'bounded',
-        layoutOf: new Map(viewGroups.map((g) => { var _a, _b; return [g.id, ((_b = (_a = g.getMetadata('dashboardBoard')) === null || _a === void 0 ? void 0 : _a.layout) !== null && _b !== void 0 ? _b : 'grid')]; })),
+        layoutOf: new Map(dashGroups.map((g) => { var _a, _b; return [g.id, ((_b = (_a = g.getMetadata('dashboardBoard')) === null || _a === void 0 ? void 0 : _a.layout) !== null && _b !== void 0 ? _b : 'grid')]; })),
         // responsive is NOT in the document (a runtime seam), so it is deliberately
         // absent from the round-trip; width/height/columns/gap/sizing/float/rtl are.
         optionsBase: firstBoard