@grafloria/element 0.4.11 → 0.4.13

package/package.json

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

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

@@ -199,6 +199,14 @@ export interface DashboardOptions {
      * interactive. Live: `handle.setDragHandle()`.
      */
     dragHandle?: DragHandleOption;
+    /**
+     * FIT AND THE ROW FLOOR. `true` (default): a bounded fit board squeezes its
+     * rows toward `minRowHeight` before refusing growth. `false`: rows freeze at
+     * the height they have now — a gesture that needs a row the frame does not
+     * hold is refused outright and no other tile shrinks. See the grid binder's
+     * `squeeze` for the exact rule.
+     */
+    squeeze?: boolean;
     /**
      * RIGHT-TO-LEFT boards: column x=0 renders at the RIGHT edge and columns run
      * leftwards. Cells are untouched — the same `widgets` array describes the
@@ -274,6 +282,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

@@ -505,9 +505,38 @@ export function createDashboardHandle(ctx) {
             return makeWidgetHandle(id);
         },
         focusWidget(id) {
-            var _a, _b;
+            var _a;
             const b = binders.get((_a = viewOfWidget.get(id)) !== null && _a !== void 0 ? _a : '');
-            return (_b = b === null || b === void 0 ? void 0 : b.focusWidget(id)) !== null && _b !== void 0 ? _b : false;
+            if (!b)
+                return false;
+            if (b.focusWidget(id))
+                return true;
+            // A widget added in this same tick is not a member yet (adds commit
+            // asynchronously): the spec knows it, so select it once the commit lands.
+            if (!specById.has(id))
+                return false;
+            const retry = (n) => { if (!b.focusWidget(id) && n > 0)
+                setTimeout(() => retry(n - 1), 16); };
+            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;
@@ -1032,7 +1061,7 @@ 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;
+                var _a, _b, _c;
                 const v = views.find((x) => x.id === viewId);
                 const g = groups.get(viewId);
                 const b = binders.get(viewId);
@@ -1040,6 +1069,8 @@ export function dashboard(options) {
                     return;
                 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(() => {
@@ -1059,6 +1090,14 @@ export function dashboard(options) {
                 ctx.layoutOf.set(viewId, next);
                 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. 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) => {
@@ -1153,7 +1192,7 @@ export function dashboard(options) {
              */
             function bindView(v, g, viewLayout, live) {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                const common = Object.assign(Object.assign({ gap, padding: gap, rtl: (_b = (_a = live === null || live === void 0 ? void 0 : live.rtl) !== null && _a !== void 0 ? _a : options.rtl) !== null && _b !== void 0 ? _b : false, fluid: mode === 'fluid', static: (_d = (_c = live === null || live === void 0 ? void 0 : live.static) !== null && _c !== void 0 ? _c : options.static) !== null && _d !== void 0 ? _d : false, dragHandle: (_f = (_e = live === null || live === void 0 ? void 0 : live.dragHandle) !== null && _e !== void 0 ? _e : options.dragHandle) !== null && _f !== void 0 ? _f : false }, ((_g = options.binder) !== null && _g !== void 0 ? _g : {})), { onGesture: (e) => {
+                const common = Object.assign(Object.assign(Object.assign({ gap, padding: gap, rtl: (_b = (_a = live === null || live === void 0 ? void 0 : live.rtl) !== null && _a !== void 0 ? _a : options.rtl) !== null && _b !== void 0 ? _b : false, fluid: mode === 'fluid', static: (_d = (_c = live === null || live === void 0 ? void 0 : live.static) !== null && _c !== void 0 ? _c : options.static) !== null && _d !== void 0 ? _d : false, dragHandle: (_f = (_e = live === null || live === void 0 ? void 0 : live.dragHandle) !== null && _e !== void 0 ? _e : options.dragHandle) !== null && _f !== void 0 ? _f : false }, (options.squeeze !== undefined ? { squeeze: options.squeeze } : {})), ((_g = options.binder) !== null && _g !== void 0 ? _g : {})), { onGesture: (e) => {
                         var _a, _b;
                         if (e.type === 'commit')
                             reportChanged();
@@ -1167,25 +1206,12 @@ export function dashboard(options) {
             /** 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, {
-                    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,
-                    onGesture: (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) => {
                         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);
-                    },
-                }));
+                    } })));
             }
             /**
              * 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 {
@@ -223,6 +224,18 @@ export interface DashboardGridOptions {
      * interactive (scroll a table, click a legend). Live: `setDragHandle`.
      */
     dragHandle?: DragHandleOption;
+    /**
+     * FIT AND THE ROW FLOOR. `true` (default): a bounded fit board holds as many
+     * rows as fit at `minRowHeight` — a gesture that needs another row SQUEEZES
+     * every row toward the floor, and is refused only when even that is not
+     * enough. `false`: rows FREEZE at the height they have now — the capacity is
+     * what the frame holds at the current row height, so a resize, move or add
+     * that needs a row the frame does not have is refused outright (placeholder
+     * stays, `onGesture` reports `changed: false`) and no other tile shrinks. A
+     * board loaded with more rows than fit still squeezes to the frame (fit never
+     * scrolls); it just cannot be pushed further by a gesture.
+     */
+    squeeze?: boolean;
 }
 /** A painted grip: the only drag zone, placed along the card's top edge. */
 export interface DragGripOptions {
@@ -249,6 +262,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
@@ -257,6 +287,8 @@ export declare function gripHostOf(target: Element | null): HTMLElement | null;
  * included — so the pointer need not hit the header's text to grab the tile.
  */
 export declare function pressOnDragHandle(sel: string, target: Element | null, hostEl: HTMLElement | null, clientX: number, clientY: number): boolean;
+/** The caption strip of a host with no kit header, px from the card's top. */
+export declare const CAPTION_BAND = 28;
 export interface DashboardGridHandle {
     /** Rebuild the engine from the group's members + their cells, re-project pixels. */
     sync(): void;
@@ -299,6 +331,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

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);
@@ -110,13 +129,15 @@ export function pressOnDragHandle(sel, target, hostEl, clientX, clientY) {
         return true;
     if (sel !== '.axdb-widget-h' || !hostEl)
         return false;
-    const header = hostEl.querySelector('.axdb-widget-h');
-    if (!header)
-        return false;
     const hr = hostEl.getBoundingClientRect();
-    const r = header.getBoundingClientRect();
-    return clientX >= hr.left && clientX <= hr.right && clientY >= hr.top && clientY <= r.bottom;
+    const header = hostEl.querySelector('.axdb-widget-h');
+    // A host painting its own content has no kit header: its caption is the top
+    // band of the card, so `dragHandle: true` still means something there.
+    const bottom = header ? header.getBoundingClientRect().bottom : hr.top + CAPTION_BAND;
+    return clientX >= hr.left && clientX <= hr.right && clientY >= hr.top && clientY <= bottom;
 }
+/** The caption strip of a host with no kit header, px from the card's top. */
+export const CAPTION_BAND = 28;
 /**
  * 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
@@ -237,6 +258,7 @@ export function bindDashboardGrid(api, group, options = {}) {
     const padding = (_c = options.padding) !== null && _c !== void 0 ? _c : gap;
     const baseRowHeight = (_d = options.baseRowHeight) !== null && _d !== void 0 ? _d : 110;
     const minRowHeight = (_e = options.minRowHeight) !== null && _e !== void 0 ? _e : 28;
+    const squeeze = options.squeeze !== false;
     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;
@@ -285,7 +307,10 @@ export function bindDashboardGrid(api, group, options = {}) {
     const fitCapacity = () => {
         if (maxRows !== undefined || sizing !== 'fit' || overflow === 'scroll' || designH <= 0)
             return undefined;
-        const rowsThatFit = Math.floor((designH - 2 * padding + gap) / (minRowHeight + gap));
+        // Elastic (default): rows at the floor. Frozen (`squeeze: false`): rows at
+        // the height they have NOW, so a gesture never shrinks a neighbour.
+        const floor = squeeze ? minRowHeight : Math.max(minRowHeight, rowHeightFor(geom(), rows()));
+        const rowsThatFit = Math.floor((designH - 2 * padding + gap) / (floor + gap));
         return Math.max(1, rowsThatFit, engine.rows());
     };
     /** Re-derive the capacity; true when the engine must be rebuilt to carry it. */
@@ -664,6 +689,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         syncA11y(only);
         if (disposed)
             return;
+        ensureStaticGuard();
         const grip = gripOf(dragHandle);
         for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
             if (only && !only.has(id))
@@ -1666,6 +1692,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;
@@ -1818,8 +1846,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;
@@ -1828,9 +1858,50 @@ export function bindDashboardGrid(api, group, options = {}) {
             return;
         const node = diagram.getNode(id);
         const resizable = !!node && !isStatic && ((_f = node.state) === null || _f === void 0 ? void 0 : _f.locked) !== true && ((_g = node.getMetadata) === null || _g === void 0 ? void 0 : _g.call(node, 'widgetResizable')) !== false;
-        host.style.cursor = resizable ? cursorFor(edgesNear(host, e.clientX, e.clientY)) : '';
+        const cursor = resizable ? cursorFor(edgesNear(host, e.clientX, e.clientY)) : '';
+        // The affordance rides on an ATTRIBUTE, not the inline style: a repaint
+        // rewrites the host's style and used to clear the cursor mid-hover, and
+        // content that sets its own cursor (a chart canvas) hid it — the
+        // stylesheet applies the attribute's cursor to the host and everything in it.
+        if (cursor)
+            host.setAttribute('data-axdb-edge', cursor);
+        else
+            host.removeAttribute('data-axdb-edge');
     };
     api.container.addEventListener('pointermove', onHover, { passive: true });
+    /**
+     * STATIC BOARDS LET CONTENT BE CLICKED. The renderer prevents the default of
+     * every press a tool claims, which cancels the compatibility mouse events —
+     * a chart inside a read-only board could not be clicked. So under `static`
+     * a press inside a member's CONTENT (not on kit chrome) is stopped on the
+     * HTML layer, in the bubble phase: the content has already received it, the
+     * renderer never does, nothing is prevented.
+     */
+    const staticGuard = (e) => {
+        var _a, _b, _c, _d;
+        if (!isStatic || disposed)
+            return;
+        const t = e.target;
+        const host = (_a = t === null || t === void 0 ? void 0 : t.closest) === null || _a === void 0 ? void 0 : _a.call(t, '.grafloria-node-host');
+        if (!host || !((_b = group.members) !== null && _b !== void 0 ? _b : new Set()).has((_c = host.getAttribute('data-node-id')) !== null && _c !== void 0 ? _c : ''))
+            return;
+        if ((_d = t === null || t === void 0 ? void 0 : t.closest) === null || _d === void 0 ? void 0 : _d.call(t, '.axdb-rs, .axdb-grip, .axdb-div'))
+            return;
+        e.stopPropagation();
+    };
+    let guardedLayer = null;
+    const ensureStaticGuard = () => {
+        // One lookup, ever: the host observer budgets container lookups per
+        // repaint, and the layer element lives as long as the instance.
+        if (guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.isConnected)
+            return;
+        const layer = htmlLayer();
+        if (!layer)
+            return;
+        guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.removeEventListener('pointerdown', staticGuard);
+        guardedLayer = layer;
+        layer.addEventListener('pointerdown', staticGuard);
+    };
     /**
      * KEYBOARD OPERATION (WCAG 2.1.1, and the non-drag alternative 2.5.7 asks
      * for): on a focused member, arrows move it one cell, Shift+arrows resize it
@@ -2214,6 +2285,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;
@@ -2349,6 +2430,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             peersOnCanvas().delete(selfPeer);
             unregisterTool();
             api.container.removeEventListener('pointermove', onHover);
+            guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.removeEventListener('pointerdown', staticGuard);
             api.container.removeEventListener('focusin', onFocusIn);
             api.container.removeEventListener('keydown', onKey);
             hostObserver.disconnect();

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

@@ -27,7 +27,7 @@ import type { DashboardGridApi, DashboardGridHandle, DashboardGridOptions } from
 import { type SplitNode } from './split-layout.js';
 /** Group metadata key the tree persists under. */
 export declare const SPLIT_TREE_KEY = "dashboardTree";
-export interface DashboardSplitOptions extends Pick<DashboardGridOptions, 'columns' | 'gap' | 'padding' | 'rtl' | 'fluid' | 'static' | 'dragHandle' | 'designHeight' | 'baseRowHeight' | 'dragOut' | 'removeZone' | 'onRemoveRequest' | 'onDropIn' | 'onGesture'> {
+export interface DashboardSplitOptions extends Pick<DashboardGridOptions, 'columns' | 'gap' | 'padding' | 'rtl' | 'fluid' | 'static' | 'dragHandle' | 'squeeze' | 'designHeight' | 'baseRowHeight' | 'dragOut' | 'removeZone' | 'onRemoveRequest' | 'onDropIn' | 'onGesture'> {
     /** An authored tree. Default: the persisted one, else derived from the members' cells. */
     tree?: SplitNode | null;
 }

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, 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';
@@ -377,23 +377,48 @@ export function bindDashboardSplit(api, group, options = {}) {
         selectedId = id;
         syncA11y();
     };
-    const syncA11y = () => {
+    // Static boards let content be clicked — see grid-binder's staticGuard.
+    const staticGuard = (e) => {
         var _a, _b, _c, _d;
+        if (!isStatic || disposed)
+            return;
+        const t = e.target;
+        const host = (_a = t === null || t === void 0 ? void 0 : t.closest) === null || _a === void 0 ? void 0 : _a.call(t, '.grafloria-node-host');
+        if (!host || !((_b = group.members) !== null && _b !== void 0 ? _b : new Set()).has((_c = host.getAttribute('data-node-id')) !== null && _c !== void 0 ? _c : ''))
+            return;
+        if ((_d = t === null || t === void 0 ? void 0 : t.closest) === null || _d === void 0 ? void 0 : _d.call(t, '.axdb-rs, .axdb-grip, .axdb-div'))
+            return;
+        e.stopPropagation();
+    };
+    let guardedLayer = null;
+    const ensureStaticGuard = () => {
+        if (guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.isConnected)
+            return;
+        const layer = api.container.querySelector('.grafloria-html-layer');
+        if (!layer)
+            return;
+        guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.removeEventListener('pointerdown', staticGuard);
+        guardedLayer = layer;
+        layer.addEventListener('pointerdown', staticGuard);
+    };
+    const syncA11y = () => {
+        var _a, _b, _c, _d, _e;
         if (disposed)
             return;
+        ensureStaticGuard();
         const order = splitLeaves(paintedTree()).filter((id) => !!diagram.getNode(id));
         if (selectedId && !order.includes(selectedId))
             selectedId = undefined;
         // No corner handles on a split board: size comes from the dividers. A host
         // that carried the grid's handle (a board switched live) sheds it here.
-        for (const id of order)
-            (_b = (_a = hostOf(id)) === null || _a === void 0 ? void 0 : _a.querySelector(':scope > .axdb-rs')) === null || _b === void 0 ? void 0 : _b.remove();
+        for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : [])
+            (_c = (_b = hostOf(id)) === null || _b === void 0 ? void 0 : _b.querySelector(':scope > .axdb-rs')) === null || _c === void 0 ? void 0 : _c.remove();
         // The painted grip (or none), on every leaf host.
         for (const id of order) {
             const host = hostOf(id);
             const node = diagram.getNode(id);
             if (host && node)
-                syncGrip(host, gripOf(dragHandle), ((_c = node.state) === null || _c === void 0 ? void 0 : _c.locked) !== true && !isStatic && ((_d = node.getMetadata) === null || _d === void 0 ? void 0 : _d.call(node, 'widgetMovable')) !== false);
+                syncGrip(host, gripOf(dragHandle), ((_d = node.state) === null || _d === void 0 ? void 0 : _d.locked) !== true && !isStatic && ((_e = node.getMetadata) === null || _e === void 0 ? void 0 : _e.call(node, 'widgetMovable')) !== false);
         }
         if (focusedId && !order.includes(focusedId))
             focusedId = undefined;
@@ -606,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);
@@ -1000,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()) };
         },
@@ -1103,6 +1140,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             });
         },
         dispose() {
+            guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.removeEventListener('pointerdown', staticGuard);
             if (disposed)
                 return;
             cancelActiveGesture();

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

@@ -35,7 +35,7 @@ const CSS = `
 
 /* ===== keyboard focus: the roving tab stop shows where it is (WCAG 2.4.7) ===== */
 .grafloria-html-layer > .grafloria-node-host:focus-visible {
-  outline: 2px solid #3b52d9;
+  outline: 2px solid var(--axdb-accent, #3b52d9);
   outline-offset: 2px;
   border-radius: var(--axdb-rs-radius, 3px);
 }
@@ -203,9 +203,16 @@ const CSS = `
   content: ''; position: absolute; left: 5px; top: 2px; width: 12px; height: 6px;
   background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 0 / 4px 3px;
 }
-.grafloria-node-host > .axdb-grip:hover { border-color: #3b52d9; color: #3b52d9; }
-/* The selected card says so, quietly. */
-.grafloria-node-host.axdb-selected > .axdb-widget { box-shadow: 0 0 0 1.5px rgba(59, 82, 217, .55), 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05); }
+.grafloria-node-host > .axdb-grip:hover { border-color: var(--axdb-accent, #3b52d9); color: var(--axdb-accent, #3b52d9); }
+/* The selected card says so, quietly. --axdb-accent themes the grip's hover, the
+   ring and the focus outline together; --axdb-accent-ring the ring alone. */
+.grafloria-node-host.axdb-selected > .axdb-widget { box-shadow: 0 0 0 1.5px var(--axdb-accent-ring, rgba(59, 82, 217, .55)), 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05); }
+/* While a resize edge is near, the host and everything in it (a chart canvas
+   with its own cursor included) show the edge's cursor. */
+.grafloria-node-host[data-axdb-edge="ns-resize"], .grafloria-node-host[data-axdb-edge="ns-resize"] * { cursor: ns-resize !important; }
+.grafloria-node-host[data-axdb-edge="ew-resize"], .grafloria-node-host[data-axdb-edge="ew-resize"] * { cursor: ew-resize !important; }
+.grafloria-node-host[data-axdb-edge="nwse-resize"], .grafloria-node-host[data-axdb-edge="nwse-resize"] * { cursor: nwse-resize !important; }
+.grafloria-node-host[data-axdb-edge="nesw-resize"], .grafloria-node-host[data-axdb-edge="nesw-resize"] * { cursor: nesw-resize !important; }
 /* INSIDE: centred on the header's text line and flush with the card padding,
    per size tier (padding 13/15, then 8/14, 4/12, 2/12). */
 .grafloria-node-host > .axdb-grip--inside { top: 14px; }
@@ -237,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
@@ -325,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;
 }