@grafloria/element 0.4.12 → 0.4.13

package/package.json

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

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

@@ -282,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

@@ -520,6 +520,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));
@@ -1043,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, _b;
+                var _a, _b, _c;
                 const v = views.find((x) => x.id === viewId);
                 const g = groups.get(viewId);
                 const b = binders.get(viewId);
@@ -1052,6 +1070,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 +1091,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) => {

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 {
@@ -261,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
@@ -313,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);
@@ -1673,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;
@@ -1825,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;
@@ -2262,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;

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';
@@ -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()) };
         },

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;
 }