@grafloria/element 0.4.16 → 0.4.18

package/package.json

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

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

@@ -1128,7 +1128,7 @@ export function dashboard(options) {
              * 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;
+                var _a, _b, _c, _d, _e, _f;
                 const cg = ctx.boardGroups.get(id);
                 const w = specById.get(id);
                 const b = binders.get(id);
@@ -1162,14 +1162,13 @@ export function dashboard(options) {
                 // 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();
+                void ((_b = binders.get((_a = ctx.viewOfWidget.get(id)) !== null && _a !== void 0 ? _a : '')) === null || _b === void 0 ? void 0 : _b.cellOf(id));
+                bindContainer(cg, w, (_c = ctx.viewOfBoard.get(id)) !== null && _c !== void 0 ? _c : ctx.active);
+                (_d = binders.get(id)) === null || _d === void 0 ? void 0 : _d.sync();
                 if (focused)
-                    (_h = binders.get(id)) === null || _h === void 0 ? void 0 : _h.focusWidget(focused);
+                    (_e = binders.get(id)) === null || _e === void 0 ? void 0 : _e.focusWidget(focused);
                 else if (selected)
-                    (_j = binders.get(id)) === null || _j === void 0 ? void 0 : _j.selectWidget(selected);
+                    (_f = binders.get(id)) === null || _f === void 0 ? void 0 : _f.selectWidget(selected);
             }
             (_m = ctx.attachHistory) === null || _m === void 0 ? void 0 : _m.call(ctx);
             return;
@@ -1273,7 +1272,7 @@ export function dashboard(options) {
             }
             /** Bind (or re-bind) a container's inner grid on its group. */
             function bindContainer(cg, w, viewId, innerRows) {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                 void viewId;
                 // The LIVE switches ride on the view's binder when it exists (a
                 // container bound after a setStatic/setRtl/setDragHandle must match).
@@ -1290,7 +1289,10 @@ export function dashboard(options) {
                     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' })));
+                binders.set(w.id, bindDashboardGrid(a, cg, Object.assign(Object.assign({}, inner), { sizing: 'fit', designHeight: 0, 
+                    // The DESIGN: authored, else what the group was mounted with, else
+                    // the children's extent — the binder's live bound follows the cells.
+                    maxRows: (_l = (_j = innerRows !== null && innerRows !== void 0 ? innerRows : w.maxRows) !== null && _j !== void 0 ? _j : (_k = cg.getMetadata('containerWidget')) === null || _k === void 0 ? void 0 : _k.maxRows) !== null && _l !== void 0 ? _l : rowExtentOf((_m = w.widgets) !== null && _m !== void 0 ? _m : []), 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

@@ -429,6 +429,13 @@ interface BinderPeer {
     group: GroupModel;
     /** True when this board's engine holds `id` as an item (member lookup). */
     hasItem(id: string): boolean;
+    /**
+     * Drop this board's selection: a press that selects a tile on ONE board of
+     * a canvas clears the others, so a section and its parent never show two
+     * rings at once (Quantia Groups page: three tiles selected across three
+     * boards after three clicks).
+     */
+    clearSelection?(): void;
     /** The member's current cell in this board (undefined when absent). */
     memberCell(id: string): CellRect | undefined;
     /**
@@ -490,6 +497,8 @@ interface AdoptedLeg {
  * unregister. A split board adopts nothing and grows no slab: its `adopt`
  * answers null and `resizeMemberBy` answers unchanged.
  */
+/** Clear the selection on every OTHER board of the canvas — one selection per canvas. */
+export declare function clearOtherSelections(container: HTMLElement, self: BinderPeer | null): void;
 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

@@ -153,6 +153,13 @@ const BOARD_REGISTRY = new WeakMap();
  * unregister. A split board adopts nothing and grows no slab: its `adopt`
  * answers null and `resizeMemberBy` answers unchanged.
  */
+/** Clear the selection on every OTHER board of the canvas — one selection per canvas. */
+export function clearOtherSelections(container, self) {
+    var _a, _b;
+    for (const p of (_a = BOARD_REGISTRY.get(container)) !== null && _a !== void 0 ? _a : [])
+        if (p !== self)
+            (_b = p.clearSelection) === null || _b === void 0 ? void 0 : _b.call(p);
+}
 export function registerBoardPeer(container, peer) {
     let set = BOARD_REGISTRY.get(container);
     if (!set) {
@@ -280,8 +287,17 @@ export function bindDashboardGrid(api, group, options = {}) {
     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;
+    /**
+     * The AUTHORED bound — a nested section's design (row-first push,
+     * escalation) — and the LIVE bound the gestures respect. A section that
+     * escalation grew holds more rows than its design; the live bound follows
+     * the members' extent on every rebuild (reload, undo, refresh), and a shrink
+     * never takes the section below `designRows`.
+     */
+    const designRows = options.maxRows;
+    let maxRows = options.maxRows;
+    const extentOf = (items) => items.reduce((m, i) => Math.max(m, i.y + i.h), 0);
+    const liveBound = (items) => designRows === undefined ? undefined : Math.max(designRows, extentOf(items));
     /** 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';
@@ -314,6 +330,7 @@ export function bindDashboardGrid(api, group, options = {}) {
      * kit's documented boot contract) and turning float off.
      */
     const engineFrom = (items, pack = false, at = columns) => {
+        maxRows = liveBound(items);
         const e = new GridPackEngine(items, { columns: at, float: pack ? float : true, maxRows, capacity });
         e.float = float;
         return e;
@@ -691,11 +708,15 @@ export function bindDashboardGrid(api, group, options = {}) {
      */
     let selectedId;
     const selectWidget = (id) => {
+        if (id !== undefined)
+            clearOtherSelections(api.container, selfPeerRef);
         if (id === selectedId)
             return;
         selectedId = id;
         syncA11y();
     };
+    /** Set once the peer object exists (below); `selectWidget` runs before that only on boot. */
+    let selfPeerRef = null;
     const syncA11y = (only) => {
         var _a, _b;
         if (disposed)
@@ -1171,6 +1192,10 @@ export function bindDashboardGrid(api, group, options = {}) {
             else {
                 engine.cancelGesture();
             }
+            if (designRows !== undefined) {
+                maxRows = liveBound(engine.getItems());
+                engine.maxRows = maxRows;
+            }
             // Restore every pixel to its gesture-start state.
             writing = true;
             try {
@@ -1375,23 +1400,24 @@ 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.
-        // ESCALATION SCALES THE WHOLE STRIP — every tile inside taller together
-        // (s21, the model the user agreed on for a KPI strip). That is only sane
-        // when the pulled tile spans the strip's full height, which every tile of
-        // a one-row strip does. A partial-height tile in a MULTI-ROW section
-        // resizes within the section and is refused past its rows: the first
-        // version compared the tile's height with the whole section and shrank a
-        // 14-row control panel to 4 rows under a 150-px pull on a one-row
-        // drop-down (Quantia, Groups page — "boom its destroyed"). And a section
-        // never shrinks below its designed rows.
-        const pulled = engine.getItem(g.id);
-        const spansStrip = !!pulled && pulled.y === 0 && pulled.h >= (maxRows !== null && maxRows !== void 0 ? maxRows : Infinity);
-        if (maxRows !== undefined && escalate && spansStrip && g.kind === 'resize') {
+        // NESTED ESCALATION — a section is a board one level down, and a pull
+        // inside it can need rows the section does not hold. Two shapes:
+        //  · a tile spanning the section's FULL HEIGHT (every tile of a one-row
+        //    KPI strip): the section gains a row and every full-height tile grows
+        //    with it — a row of tiles pulled taller stays a row (s21) — and gives
+        //    it back when pulled up, never below the design;
+        //  · a PARTIAL tile (a one-row control in a 14-row panel): it pushes what
+        //    is below it; a row the pushed layout needs and the section does not
+        //    hold is asked of the board, one per pointer step, and rows the
+        //    layout no longer needs go back. The board decides: grow extends, fit
+        //    squeezes or refuses. The first version grew the section only for
+        //    the full-height case and REFUSED the partial one; before that it
+        //    shrank a 14-row panel to 4 (Quantia, Groups page).
+        // The live bound `maxRows` follows the section's rows through all of it.
+        if (designRows !== undefined && maxRows !== undefined && escalate && g.kind === 'resize') {
             const parent = parentPeer();
-            if (parent) {
-                const visual = boardVisualHeight();
-                const slabRows = (_h = (_g = parent.memberCell(group.id)) === null || _g === void 0 ? void 0 : _g.h) !== null && _h !== void 0 ? _h : 1;
-                const rowPx = visual / Math.max(1, slabRows);
+            const pulled = engine.getItem(g.id);
+            if (parent && pulled) {
                 const record = (res, d) => {
                     if (!res.changed || !res.cellBefore || !res.cellAfter || !res.frameBefore || !res.frameAfter)
                         return;
@@ -1408,14 +1434,83 @@ export function bindDashboardGrid(api, group, options = {}) {
                     g.esc.rowsAdded += d;
                     g.esc.cellAfter = res.cellAfter;
                     g.esc.frameAfter = res.frameAfter;
-                    project();
                 };
-                if (h > visual + 24) {
-                    record(parent.resizeMemberBy(group.id, +1), +1);
+                const setInnerRows = (n) => {
+                    maxRows = n;
+                    engine.maxRows = n;
+                };
+                const slabRows = (_h = (_g = parent.memberCell(group.id)) === null || _g === void 0 ? void 0 : _g.h) !== null && _h !== void 0 ? _h : maxRows;
+                const inner = maxRows;
+                const rhNow = rowHeightFor(geom(), rows());
+                const rowPx = rhNow + gap;
+                // The SAME rounding the resize path quantises with, or the tile shrinks
+                // through that path first and the section never gets its row back.
+                const wantRows = Math.max(1, Math.round((h + gap) / rowPx));
+                const wantsMore = wantRows > pulled.h;
+                const wantsLess = wantRows < pulled.h;
+                const fullHeight = pulled.y === 0 && pulled.h >= inner;
+                const fullOnes = engine.getItems().filter((i) => i.y === 0 && i.h >= inner).map((i) => i.id);
+                const resizeAll = (ids, rowsTo) => {
+                    for (const id of ids) {
+                        const it = engine.getItem(id);
+                        if (it)
+                            engine.resizeCheck(id, it.w, rowsTo);
+                    }
+                };
+                let touched = false;
+                if (wantsMore) {
+                    if (fullHeight) {
+                        const res = parent.resizeMemberBy(group.id, +1);
+                        if (res.changed) {
+                            record(res, +1);
+                            setInnerRows(inner + 1);
+                            resizeAll(fullOnes, inner + 1);
+                            touched = true;
+                        }
+                    }
+                    else if (!engine.resizeCheck(g.id, pulled.w, pulled.h + 1).changed) {
+                        const res = parent.resizeMemberBy(group.id, +1);
+                        if (res.changed) {
+                            record(res, +1);
+                            setInnerRows(inner + 1);
+                            engine.resizeCheck(g.id, pulled.w, pulled.h + 1);
+                            touched = true;
+                        }
+                    }
+                    else {
+                        touched = true;
+                    }
                 }
-                else if (slabRows > Math.max(1, maxRows) && h < visual - rowPx * 0.7) {
-                    record(parent.resizeMemberBy(group.id, -1), -1);
+                else if (wantsLess) {
+                    if (fullHeight) {
+                        if (slabRows > designRows && inner > 1) {
+                            resizeAll(fullOnes, inner - 1);
+                            const res = parent.resizeMemberBy(group.id, -1);
+                            if (res.changed) {
+                                record(res, -1);
+                                setInnerRows(inner - 1);
+                            }
+                            else {
+                                resizeAll(fullOnes, inner);
+                            }
+                            touched = true;
+                        }
+                    }
+                    else if (pulled.h > 1) {
+                        engine.resizeCheck(g.id, pulled.w, pulled.h - 1);
+                        const floor = Math.max(designRows, extentOf(engine.getItems()));
+                        if (slabRows > floor) {
+                            const res = parent.resizeMemberBy(group.id, -1);
+                            if (res.changed) {
+                                record(res, -1);
+                                setInnerRows(inner - 1);
+                            }
+                        }
+                        touched = true;
+                    }
                 }
+                if (touched)
+                    project();
             }
         }
         // The fluid preview must not outrun what the board can accept: on a
@@ -1706,6 +1801,12 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     const selfPeer = {
         group,
+        clearSelection: () => {
+            if (selectedId === undefined)
+                return;
+            selectedId = undefined;
+            syncA11y();
+        },
         hasItem: (id) => !!engine.getItem(id),
         memberCell: (id) => {
             const it = engine.getItem(id);
@@ -1742,6 +1843,9 @@ export function bindDashboardGrid(api, group, options = {}) {
         adopt,
     };
     peersOnCanvas().add(selfPeer);
+    selfPeerRef = selfPeer;
+    // The board's gap, for chrome that must fit BETWEEN tiles (the outside grip tab).
+    api.container.style.setProperty('--axdb-gap', `${gap}px`);
     const tool = {
         id: `dashboard-grid:${group.id}:${++binderSeq}`,
         priority: 2, // point-specific claim — outranks mode-style tools (see ext/tools.ts)
@@ -1986,7 +2090,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             return;
         if (focusedId !== hit.id || selectedId !== hit.id) {
             focusedId = hit.id;
-            selectedId = hit.id;
+            selectWidget(hit.id);
             syncA11y();
         }
     };
@@ -2338,7 +2442,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             if (disposed || !((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !diagram.getNode(id))
                 return false;
             focusedId = id;
-            selectedId = id;
+            selectWidget(id);
             syncA11y();
             (_c = (_b = hostOf(id)) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b, { preventScroll: true });
             return true;

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, ownsPress, pressOnDragHandle, registerBoardPeer, syncGrip, DRAG_HANDLE_CLASS } from './grid-binder.js';
+import { clearOtherSelections, 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';
@@ -372,11 +372,14 @@ export function bindDashboardSplit(api, group, options = {}) {
     /** The selected widget (see grid-binder): stamped `axdb-selected`, shows the grip. */
     let selectedId;
     const selectWidget = (id) => {
+        if (id !== undefined)
+            clearOtherSelections(api.container, selfPeerRef);
         if (id === selectedId)
             return;
         selectedId = id;
         syncA11y();
     };
+    let selfPeerRef = null;
     // Static boards let content be clicked — see grid-binder's staticGuard.
     const staticGuard = (e) => {
         var _a, _b, _c, _d;
@@ -823,7 +826,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             return;
         if (focusedId !== hit.id || selectedId !== hit.id) {
             focusedId = hit.id;
-            selectedId = hit.id;
+            selectWidget(hit.id);
             syncA11y();
         }
     };
@@ -967,7 +970,26 @@ export function bindDashboardSplit(api, group, options = {}) {
     if (layerEl && hostObserver)
         hostObserver.observe(layerEl, { childList: true });
     // -- the handle -------------------------------------------------------------
-    const rowsGuess = () => Math.max(1, Math.round(frame().height / (baseRowHeight + gap)));
+    /**
+     * The row count the tree's cells are written in. A grid-authored board (or
+     * one switched from the grid) carries its members' cells: their extent IS
+     * the row count, and switching back must return the same cells — the guess
+     * below quantised three 14-row sections on a 758-px fit board to 5 rows
+     * (base row height 130), and the grid came back with 14-row inner grids
+     * inside 5-row slabs (Quantia, Groups page, Split → Grid). The guess stays
+     * for a tree-authored board that never had cells.
+     */
+    const rowsAtBind = (() => {
+        let max = 0;
+        for (const id of members()) {
+            const c = persistedCell(id);
+            if (!c)
+                return undefined;
+            max = Math.max(max, c.y + c.h);
+        }
+        return max > 0 ? max : undefined;
+    })();
+    const rowsGuess = () => rowsAtBind !== null && rowsAtBind !== void 0 ? rowsAtBind : Math.max(1, Math.round(frame().height / (baseRowHeight + gap)));
     const handle = {
         sync() {
             if (disposed)
@@ -1021,7 +1043,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             if (!((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !diagram.getNode(id))
                 return false;
             focusedId = id;
-            selectedId = id;
+            selectWidget(id);
             syncA11y();
             (_c = (_b = hostOf(id)) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b, { preventScroll: true });
             return true;
@@ -1168,8 +1190,14 @@ export function bindDashboardSplit(api, group, options = {}) {
     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, {
+    const selfPeer = {
         group,
+        clearSelection: () => {
+            if (selectedId === undefined)
+                return;
+            selectedId = undefined;
+            syncA11y();
+        },
         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 }),
@@ -1180,7 +1208,10 @@ export function bindDashboardSplit(api, group, options = {}) {
             return f.width * f.height;
         },
         adopt: () => null,
-    });
+    };
+    const unregisterPeer = registerBoardPeer(api.container, selfPeer);
+    selfPeerRef = selfPeer;
+    api.container.style.setProperty('--axdb-gap', `${gap}px`);
     const disposeHandle = handle.dispose.bind(handle);
     handle.dispose = () => {
         unregisterPeer();

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

@@ -235,7 +235,10 @@ const CSS = `
   .grafloria-node-host > .axdb-grip--inside { top: 2px; }
 }
 /* OUTSIDE: a tab on the card's top edge, its corners in line with the card's. */
-.grafloria-node-host > .axdb-grip--outside { top: -11px; height: 11px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; box-shadow: 0 -1px 2px rgba(16, 24, 40, .08); }
+/* The OUTSIDE tab lives in the gap between tiles: never taller than the gap
+   less a pixel (an 11-px tab in a 10-px gap sat on the tile above), never
+   shorter than 6 px so the dots still read. */
+.grafloria-node-host > .axdb-grip--outside { top: calc(-1 * clamp(6px, var(--axdb-gap, 11px) - 1px, 11px)); height: clamp(6px, calc(var(--axdb-gap, 11px) - 1px), 11px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; box-shadow: 0 -1px 2px rgba(16, 24, 40, .08); }
 .grafloria-node-host > .axdb-grip--outside.axdb-grip--left { left: 10px; }
 .grafloria-node-host > .axdb-grip--outside.axdb-grip--right { right: 10px; }
 .grafloria-node-host > .axdb-grip--center { left: 50%; transform: translateX(-50%); }