@grafloria/element 0.4.17 → 0.4.19

package/package.json

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

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

@@ -252,6 +252,12 @@ export interface DashboardOptions {
      * hook). Omit for a titled placeholder frame.
      */
     renderWidget?: (widget: DashboardWidgetSpec, host: HTMLElement) => void;
+    /**
+     * The selection changed on a board: the selected id — a widget or a SECTION
+     * (container) — or undefined when cleared, and the view it belongs to. A
+     * press on a section's empty band selects the section.
+     */
+    onSelect?: (id: string | undefined, viewId: string) => void;
     /** Fires after any committed gesture, with the view whose layout changed. */
     onLayoutChange?: (viewId: string, widgets: DashboardWidgetSpec[]) => void;
     /** Extra binder options, merged last (escape hatch to the layer below). */

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

@@ -1264,7 +1264,7 @@ export function dashboard(options) {
                         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);
-                    } });
+                    }, onSelect: (id) => { var _a; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, v.id); } });
                 if (viewLayout === 'split') {
                     return bindDashboardSplit(a, g, Object.assign(Object.assign(Object.assign({}, common), { columns: (_h = v.columns) !== null && _h !== void 0 ? _h : columns, baseRowHeight: rowHeight, designHeight: viewH(v) }), (v.tree !== undefined ? { tree: v.tree } : {})));
                 }
@@ -1282,7 +1282,7 @@ export function dashboard(options) {
                         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);
-                    } });
+                    }, onSelect: (id) => { var _a, _b; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, (_b = ctx.viewOfBoard.get(w.id)) !== null && _b !== void 0 ? _b : ctx.active); } });
                 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.

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

@@ -196,6 +196,8 @@ export interface DashboardGridOptions {
         changed: boolean;
     }) => void;
     /** Inject the hover-revealed corner resize handle into member hosts (default true). */
+    /** The selection on this board changed: the selected member — a widget or a SECTION (container) — or undefined. */
+    onSelect?: (id: string | undefined) => void;
     resizeHandles?: boolean;
     /**
      * FLUID board: the group's frame follows the CANVAS CONTAINER — width
@@ -429,6 +431,27 @@ 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;
+    /** A nested board's live row bound — what its slab must never shrink below. */
+    innerRows?(): number;
+    /**
+     * SECTION PRESSES. A press on a section's empty band lands on the NESTED
+     * board's tool (it claims its own frame), which knows nothing to select;
+     * the section is a member of the PARENT. The child asks the parent to
+     * select it and, on an edge or the corner handle, to run the section
+     * resize — and forwards the rest of the pointer sequence.
+     */
+    selectMember?(id: string): void;
+    beginSlabResize?(id: string, edges: ResizeEdges, ev: ToolPointerEvent): boolean;
+    slabMove?(ev: ToolPointerEvent): void;
+    slabUp?(): void;
+    slabCancel?(): void;
     /** The member's current cell in this board (undefined when absent). */
     memberCell(id: string): CellRect | undefined;
     /**
@@ -490,6 +513,14 @@ 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 };
+interface ResizeEdges {
+    n: boolean;
+    e: boolean;
+    s: boolean;
+    w: boolean;
+}
 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) {
@@ -458,6 +465,19 @@ export function bindDashboardGrid(api, group, options = {}) {
     /** The engine item a member should enter as (cells from GridItemConfig /
      *  group metadata; spans falling back to metadata columnSpan/rowSpan; last
      *  resort: adopt from the current pixel geometry). */
+    /**
+     * A SECTION's floor: its nested board's live rows (the peer), else the rows
+     * it was mounted with — a section resized by hand never squeezes its
+     * children below their cells.
+     */
+    const innerRowsOf = (id) => {
+        var _a, _b, _c, _d;
+        for (const p of (_a = BOARD_REGISTRY.get(api.container)) !== null && _a !== void 0 ? _a : [])
+            if (p.group.id === id && p.innerRows)
+                return Math.max(1, p.innerRows());
+        const meta = (_c = (_b = diagram.getGroup(id)) === null || _b === void 0 ? void 0 : _b.getMetadata) === null || _c === void 0 ? void 0 : _c.call(_b, 'containerWidget');
+        return Math.max(1, (_d = meta === null || meta === void 0 ? void 0 : meta.maxRows) !== null && _d !== void 0 ? _d : 1);
+    };
     const itemFor = (id) => {
         var _a, _b, _c, _d, _e, _f, _g;
         const node = diagram.getNode(id);
@@ -701,19 +721,27 @@ export function bindDashboardGrid(api, group, options = {}) {
      */
     let selectedId;
     const selectWidget = (id) => {
+        var _a;
+        if (id !== undefined)
+            clearOtherSelections(api.container, selfPeerRef);
         if (id === selectedId)
             return;
         selectedId = id;
         syncA11y();
+        syncSlabs();
+        (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id);
     };
+    /** Set once the peer object exists (below); `selectWidget` runs before that only on boot. */
+    let selfPeerRef = null;
     const syncA11y = (only) => {
-        var _a, _b;
+        var _a, _b, _c;
         if (disposed)
             return;
         const members = [...((_a = group.members) !== null && _a !== void 0 ? _a : [])].filter((id) => !!diagram.getNode(id));
         if (focusedId && !members.includes(focusedId))
             focusedId = undefined;
-        if (selectedId && !members.includes(selectedId))
+        // A selected SECTION is a group member, not a node: keep it as long as it is a member.
+        if (selectedId && !members.includes(selectedId) && !(((_b = group.members) === null || _b === void 0 ? void 0 : _b.has(selectedId)) && memberEntity(selectedId)))
             selectedId = undefined;
         const stop = focusedId !== null && focusedId !== void 0 ? focusedId : members[0];
         for (const id of members) {
@@ -727,7 +755,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             const bits = [nameOf(node)];
             if (cell)
                 bits.push(describeCell(cell));
-            if (((_b = node.state) === null || _b === void 0 ? void 0 : _b.locked) === true)
+            if (((_c = node.state) === null || _c === void 0 ? void 0 : _c.locked) === true)
                 bits.push('pinned');
             host.setAttribute('role', 'group');
             host.setAttribute('aria-roledescription', 'dashboard widget');
@@ -748,6 +776,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         if (disposed)
             return;
         ensureStaticGuard();
+        syncSlabs();
         const grip = gripOf(dragHandle);
         for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
             if (only && !only.has(id))
@@ -964,6 +993,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         finally {
             writing = false;
         }
+        syncSlabs();
     };
     const applyColumns = (n, layout) => {
         var _a;
@@ -1033,6 +1063,80 @@ export function bindDashboardGrid(api, group, options = {}) {
         const band = rowHeightFor(geom(), rows()) + gap;
         return x >= f.x && x <= f.x + f.width && y >= f.y && y <= f.y + boardVisualHeight() + band;
     };
+    /** The member SECTION whose frame holds the world point, if any. */
+    const memberGroupAt = (x, y) => {
+        var _a;
+        for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
+            const grp = diagram.getGroup(id);
+            if (!grp)
+                continue;
+            const p = grp.position;
+            const s = sizeOf(grp);
+            if (x >= p.x && x <= p.x + s.width && y >= p.y && y <= p.y + s.height)
+                return id;
+        }
+        return null;
+    };
+    /** Which of a section frame's edges a world point is within EDGE_GRIP of. */
+    const slabEdgesNear = (grp, x, y) => {
+        const p = grp.position;
+        const s = sizeOf(grp);
+        return { n: y - p.y <= EDGE_GRIP, s: p.y + s.height - y <= EDGE_GRIP, w: x - p.x <= EDGE_GRIP, e: p.x + s.width - x <= EDGE_GRIP };
+    };
+    /**
+     * SECTION CHROME. A section (member group) paints no card of its own, so it
+     * had nothing to press: a click on its empty band cleared the selection and
+     * its frame had no handle and no edge — a section with many children could
+     * not be selected at all, and could only be resized by pulling a child
+     * (Quantia, Groups page). Every section gets a pointer-transparent overlay
+     * in the HTML layer that wears the selection ring and, while selected, the
+     * corner handle; its frame edges answer the resize cursor.
+     */
+    const slabEls = new Map();
+    let slabLayer = null;
+    const syncSlabs = () => {
+        var _a, _b;
+        if (disposed)
+            return;
+        const layer = (slabLayer === null || slabLayer === void 0 ? void 0 : slabLayer.isConnected) ? slabLayer : (slabLayer = htmlLayer());
+        if (!layer)
+            return;
+        const seen = new Set();
+        for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
+            const grp = diagram.getGroup(id);
+            if (!grp || diagram.getNode(id))
+                continue;
+            seen.add(id);
+            let el = slabEls.get(id);
+            if (!el || el.parentElement !== layer) {
+                el === null || el === void 0 ? void 0 : el.remove();
+                el = document.createElement('div');
+                el.className = 'axdb-slab';
+                el.setAttribute('data-slab-id', id);
+                const rs = document.createElement('div');
+                rs.className = 'axdb-rs';
+                rs.setAttribute('title', 'Resize section');
+                el.appendChild(rs);
+                layer.appendChild(el);
+                slabEls.set(id, el);
+            }
+            const p = grp.position;
+            const sz = sizeOf(grp);
+            el.style.left = `${p.x}px`;
+            el.style.top = `${p.y}px`;
+            el.style.width = `${sz.width}px`;
+            el.style.height = `${sz.height}px`;
+            el.classList.toggle('axdb-slab--selected', selectedId === id);
+            el.classList.toggle('axdb-slab--static', isStatic);
+            (_b = el.querySelector(':scope > .axdb-rs')) === null || _b === void 0 ? void 0 : _b.classList.toggle('axdb-rs--rtl', rtl);
+        }
+        for (const [id, el] of slabEls) {
+            if (!seen.has(id)) {
+                el.remove();
+                slabEls.delete(id);
+            }
+        }
+    };
     const insideMemberGroupFrame = (x, y) => {
         var _a;
         for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
@@ -1046,6 +1150,131 @@ export function bindDashboardGrid(api, group, options = {}) {
         }
         return false;
     };
+    let slabGesture = null;
+    /** The PARENT running a resize of OUR section from a press this tool claimed. */
+    let forwardSlab = null;
+    const frameOfGroup = (grp) => ({ x: grp.position.x, y: grp.position.y, width: sizeOf(grp).width, height: sizeOf(grp).height });
+    const beginSlabResize = (id, edges, ev) => {
+        const grp = diagram.getGroup(id);
+        const it = engine.getItem(id);
+        if (!grp || !it || gesture || slabGesture)
+            return;
+        engine.beginGesture();
+        const snap = snapshotAll();
+        slabGesture = {
+            id,
+            edges,
+            pointerId: typeof PointerEvent !== 'undefined' && ev.source instanceof PointerEvent ? ev.source.pointerId : null,
+            started: false,
+            downScreen: { x: ev.screen.x, y: ev.screen.y },
+            startCells: snap.cells,
+            startGeom: snap.geoms,
+            cellBefore: { x: it.x, y: it.y, w: it.w, h: it.h },
+            frameBefore: frameOfGroup(grp),
+            grab: {
+                dx: edges.e ? grp.position.x + sizeOf(grp).width - ev.world.x : edges.w ? grp.position.x - ev.world.x : 0,
+                dy: edges.s ? grp.position.y + sizeOf(grp).height - ev.world.y : edges.n ? grp.position.y - ev.world.y : 0,
+            },
+        };
+        capturePointer(slabGesture.pointerId);
+        api.container.style.cursor = cursorFor(edges);
+    };
+    const slabMove = (ev) => {
+        const g = slabGesture;
+        if (!g)
+            return;
+        if (!g.started) {
+            if (Math.abs(ev.screen.x - g.downScreen.x) + Math.abs(ev.screen.y - g.downScreen.y) < DRAG_THRESHOLD)
+                return;
+            g.started = true;
+            armGlide();
+        }
+        const it = engine.getItem(g.id);
+        if (!it)
+            return;
+        const f = frame();
+        const gg = geom();
+        const cu = columnUnitFor(gg, f.width);
+        const rh = rowHeightFor(gg, rows());
+        // The grid line nearest the pointer, in cells (mirrored on RTL).
+        const colAt = (wx) => Math.round((rtl ? f.x + f.width - padding - wx : wx - f.x - padding) / (cu + gap));
+        const rowAt = (wy) => Math.round((wy - f.y - padding) / (rh + gap));
+        let { x, y, w, h } = it;
+        const px = ev.world.x + g.grab.dx;
+        const py = ev.world.y + g.grab.dy;
+        if (g.edges.e)
+            w = Math.max(1, colAt(px) - x);
+        if (g.edges.s)
+            h = Math.max(1, rowAt(py) - y);
+        if (g.edges.w) {
+            const nx = Math.max(0, Math.min(x + w - 1, colAt(px)));
+            w = x + w - nx;
+            x = nx;
+        }
+        if (g.edges.n) {
+            const ny = Math.max(0, Math.min(y + h - 1, rowAt(py)));
+            h = y + h - ny;
+            y = ny;
+        }
+        w = Math.max(1, Math.min(w, columns - x));
+        // Never below the children's rows (the nested board's live bound).
+        const floor = innerRowsOf(g.id);
+        if (h < floor) {
+            if (g.edges.n)
+                y = y + h - floor;
+            h = floor;
+        }
+        let changed = false;
+        if (x !== it.x || y !== it.y)
+            changed = engine.moveCheck(g.id, x, y, { gate: false }).changed || changed;
+        if (w !== it.w || h !== it.h)
+            changed = engine.resizeCheck(g.id, w, h).changed || changed;
+        if (changed)
+            project();
+    };
+    const slabUp = () => {
+        var _a;
+        const g = slabGesture;
+        if (!g)
+            return;
+        slabGesture = null;
+        releasePointer(g.pointerId);
+        api.container.style.cursor = '';
+        if (!g.started) {
+            engine.endGesture();
+            return;
+        }
+        engine.endGesture();
+        project();
+        const it = engine.getItem(g.id);
+        const grp = diagram.getGroup(g.id);
+        const commands = buildCommitCommands(deltasSince(g.startCells, g.startGeom, g.id));
+        const b = g.cellBefore;
+        if (it && grp && (b.x !== it.x || b.y !== it.y || b.w !== it.w || b.h !== it.h)) {
+            commands.push(new SetGroupCellCommand(g.id, b, { x: it.x, y: it.y, w: it.w, h: it.h }, g.frameBefore, frameOfGroup(grp)));
+        }
+        const changed = execute('Resize section', commands);
+        disarmGlideSoon();
+        syncHandles();
+        api.renderNow();
+        (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: 'commit', kind: 'resize', nodeId: g.id, changed });
+    };
+    const slabCancel = () => {
+        var _a;
+        const g = slabGesture;
+        if (!g)
+            return;
+        slabGesture = null;
+        releasePointer(g.pointerId);
+        api.container.style.cursor = '';
+        if (g.started)
+            engine.cancelGesture();
+        else
+            engine.endGesture();
+        project();
+        disarmGlideSoon();
+        (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: 'cancel', kind: 'resize', nodeId: g.id, changed: false });
+    };
     const capturePointer = (pointerId) => {
         var _a, _b;
         if (pointerId === null)
@@ -1152,7 +1381,13 @@ export function bindDashboardGrid(api, group, options = {}) {
         (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: 'commit', kind: g.kind, nodeId: g.id, changed });
     };
     const cancelActiveGesture = (notify = true) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
+        if (forwardSlab) {
+            (_a = forwardSlab.slabCancel) === null || _a === void 0 ? void 0 : _a.call(forwardSlab);
+            forwardSlab = null;
+        }
+        if (slabGesture)
+            slabCancel();
         const g = gesture;
         if (!g)
             return;
@@ -1173,7 +1408,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 engine.endGesture();
                 const items = [];
                 for (const [id, c] of g.startCells) {
-                    const lockedNode = ((_b = (_a = diagram.getNode(id)) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.locked) === true;
+                    const lockedNode = ((_c = (_b = diagram.getNode(id)) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.locked) === true;
                     items.push(Object.assign(Object.assign({ id }, c), { locked: lockedNode || isGroupMember(id) }));
                 }
                 engine = engineFrom(items);
@@ -1221,7 +1456,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         enforceBoardHeight();
         api.renderNow();
         if (notify) {
-            (_c = options.onGesture) === null || _c === void 0 ? void 0 : _c.call(options, { type: 'cancel', kind: g.kind, nodeId: g.id, changed: false });
+            (_d = options.onGesture) === null || _d === void 0 ? void 0 : _d.call(options, { type: 'cancel', kind: g.kind, nodeId: g.id, changed: false });
         }
     };
     /** Centre a w×h-span tile's top-left under the cursor, in world px. */
@@ -1790,6 +2025,32 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     const selfPeer = {
         group,
+        clearSelection: () => {
+            var _a;
+            if (selectedId === undefined)
+                return;
+            selectedId = undefined;
+            syncA11y();
+            syncSlabs();
+            (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, undefined);
+        },
+        innerRows: () => maxRows !== null && maxRows !== void 0 ? maxRows : rows(),
+        selectMember: (id) => {
+            var _a;
+            if (((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id)) {
+                selectWidget(id);
+                api.render();
+            }
+        },
+        beginSlabResize: (id, edges, ev) => {
+            if (isStatic)
+                return false;
+            beginSlabResize(id, edges, ev);
+            return (slabGesture === null || slabGesture === void 0 ? void 0 : slabGesture.id) === id;
+        },
+        slabMove: (ev) => slabMove(ev),
+        slabUp: () => slabUp(),
+        slabCancel: () => slabCancel(),
         hasItem: (id) => !!engine.getItem(id),
         memberCell: (id) => {
             const it = engine.getItem(id);
@@ -1826,6 +2087,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)
@@ -1833,7 +2097,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             var _a, _b;
             if (disposed)
                 return false;
-            if (gesture)
+            if (gesture || slabGesture || forwardSlab)
                 return true; // own the rest of an in-flight gesture
             if (!ownsPress(api.container, diagram, ev, hit))
                 return false;
@@ -1862,7 +2126,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             return insideMemberGroupFrame(ev.world.x, ev.world.y) || worldInsideBoard(ev.world.x, ev.world.y);
         },
         onPointerDown(ev, hit) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             if (gesture)
                 return; // mid-palette
             const target = ((_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) !== null && _b !== void 0 ? _b : null);
@@ -1873,9 +2137,43 @@ export function bindDashboardGrid(api, group, options = {}) {
             const gripId = (_c = gripHost === null || gripHost === void 0 ? void 0 : gripHost.getAttribute('data-node-id')) !== null && _c !== void 0 ? _c : null;
             const onGrip = !!gripId && ((_d = group.members) !== null && _d !== void 0 ? _d : new Set()).has(gripId);
             if (!hit.node && !onGrip) {
+                // A press on a SECTION — its empty band, its corner handle or its
+                // frame edge — selects the section; the handle or an edge resizes it.
+                const slabHandle = (_e = target === null || target === void 0 ? void 0 : target.closest) === null || _e === void 0 ? void 0 : _e.call(target, '.axdb-slab > .axdb-rs');
+                const slabId = (_g = (_f = slabHandle === null || slabHandle === void 0 ? void 0 : slabHandle.parentElement) === null || _f === void 0 ? void 0 : _f.getAttribute('data-slab-id')) !== null && _g !== void 0 ? _g : memberGroupAt(ev.world.x, ev.world.y);
+                const grp = slabId && ((_h = group.members) !== null && _h !== void 0 ? _h : new Set()).has(slabId) ? diagram.getGroup(slabId) : undefined;
+                if (slabId && grp) {
+                    selectWidget(slabId);
+                    api.render();
+                    if (isStatic)
+                        return;
+                    const edges = slabHandle
+                        ? rtl ? { n: false, e: false, s: true, w: true } : { n: false, e: true, s: true, w: false }
+                        : slabEdgesNear(grp, ev.world.x, ev.world.y);
+                    if (anyEdge(edges))
+                        beginSlabResize(slabId, edges, ev);
+                    return;
+                }
+                // OUR OWN empty band, and we are a section of a parent board: the
+                // press selects the section there, and its edge or corner handle
+                // starts the section resize, which the parent runs while this tool
+                // forwards the pointer sequence.
+                const parent = parentPeer();
+                if ((parent === null || parent === void 0 ? void 0 : parent.selectMember) && worldInsideBoard(ev.world.x, ev.world.y)) {
+                    const ownHandle = ((_j = slabHandle === null || slabHandle === void 0 ? void 0 : slabHandle.parentElement) === null || _j === void 0 ? void 0 : _j.getAttribute('data-slab-id')) === group.id;
+                    parent.selectMember(group.id);
+                    if (!isStatic && parent.beginSlabResize) {
+                        const edges = ownHandle
+                            ? rtl ? { n: false, e: false, s: true, w: true } : { n: false, e: true, s: true, w: false }
+                            : slabEdgesNear(group, ev.world.x, ev.world.y);
+                        if (anyEdge(edges) && parent.beginSlabResize(group.id, edges, ev))
+                            forwardSlab = parent;
+                    }
+                    return;
+                }
                 // The board's own empty area: a void click. Nothing to drag, and the
                 // selection clears exactly as a click outside any board would.
-                (_f = (_e = diagram).clearSelection) === null || _f === void 0 ? void 0 : _f.call(_e);
+                (_l = (_k = diagram).clearSelection) === null || _l === void 0 ? void 0 : _l.call(_k);
                 selectWidget(undefined);
                 api.render();
                 return;
@@ -1884,17 +2182,17 @@ export function bindDashboardGrid(api, group, options = {}) {
             if (!node)
                 return;
             selectWidget(node.id); // a press selects, whether or not it starts a gesture
-            if (((_g = node.state) === null || _g === void 0 ? void 0 : _g.locked) === true)
+            if (((_m = node.state) === null || _m === void 0 ? void 0 : _m.locked) === true)
                 return; // pinned: refuse; click still focuses
             if (isStatic)
                 return; // a static board: claimed and deadened, click still focuses
             // Which edges did the press take? The corner handle names its own (s+e,
             // or s+w on RTL); a bare press within EDGE_GRIP of the tile's border
             // takes that border; anywhere else is a move. A grip press is a move.
-            const onHandle = !!((_h = target === null || target === void 0 ? void 0 : target.closest) === null || _h === void 0 ? void 0 : _h.call(target, '.axdb-rs'));
+            const onHandle = !!((_o = target === null || target === void 0 ? void 0 : target.closest) === null || _o === void 0 ? void 0 : _o.call(target, '.axdb-rs'));
             const hostEl = hostOf(node.id);
-            const resizable = ((_j = node.getMetadata) === null || _j === void 0 ? void 0 : _j.call(node, 'widgetResizable')) !== false;
-            const movable = ((_k = node.getMetadata) === null || _k === void 0 ? void 0 : _k.call(node, 'widgetMovable')) !== false;
+            const resizable = ((_p = node.getMetadata) === null || _p === void 0 ? void 0 : _p.call(node, 'widgetResizable')) !== false;
+            const movable = ((_q = node.getMetadata) === null || _q === void 0 ? void 0 : _q.call(node, 'widgetMovable')) !== false;
             // `ev.screen` is ELEMENT-LOCAL px; host rects are in client px. Compare
             // like with like — the source event's clientX/Y when there is one, else
             // the container's origin plus the local offset.
@@ -1942,7 +2240,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 startSize: { width: node.size.width, height: node.size.height },
                 startPos: { x: node.position.x, y: node.position.y },
                 edges,
-                spans: { w: (_l = it === null || it === void 0 ? void 0 : it.w) !== null && _l !== void 0 ? _l : 1, h: (_m = it === null || it === void 0 ? void 0 : it.h) !== null && _m !== void 0 ? _m : 1 },
+                spans: { w: (_r = it === null || it === void 0 ? void 0 : it.w) !== null && _r !== void 0 ? _r : 1, h: (_s = it === null || it === void 0 ? void 0 : it.h) !== null && _s !== void 0 ? _s : 1 },
                 removedFromBoard: false,
                 leg: null,
                 lastWorld: null,
@@ -1953,10 +2251,24 @@ export function bindDashboardGrid(api, group, options = {}) {
             };
         },
         onPointerMove(ev) {
-            onToolMove(ev);
+            var _a;
+            if (forwardSlab)
+                (_a = forwardSlab.slabMove) === null || _a === void 0 ? void 0 : _a.call(forwardSlab, ev);
+            else if (slabGesture)
+                slabMove(ev);
+            else
+                onToolMove(ev);
         },
         onPointerUp() {
-            onToolUp();
+            var _a;
+            if (forwardSlab) {
+                (_a = forwardSlab.slabUp) === null || _a === void 0 ? void 0 : _a.call(forwardSlab);
+                forwardSlab = null;
+            }
+            else if (slabGesture)
+                slabUp();
+            else
+                onToolUp();
         },
         onCancel() {
             cancelActiveGesture();
@@ -1970,7 +2282,7 @@ export function bindDashboardGrid(api, group, options = {}) {
      */
     let hoverHost = null;
     const onHover = (e) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (disposed || gesture)
             return;
         // The event may target the host, its content, or (when a host's content
@@ -1994,13 +2306,23 @@ export function bindDashboardGrid(api, group, options = {}) {
             hoverHost.removeAttribute('data-axdb-edge'); // the affordance follows the pointer off a tile
         }
         hoverHost = host;
-        if (!host)
+        if (!host) {
+            // No tile under the pointer: a SECTION's frame edge still says resize.
+            const wpt = ((_d = api.viewport) === null || _d === void 0 ? void 0 : _d.clientToWorld) ? api.viewport.clientToWorld(e.clientX, e.clientY, api.container.getBoundingClientRect()) : null;
+            const sid = wpt ? memberGroupAt(wpt.x, wpt.y) : null;
+            const grp = sid ? diagram.getGroup(sid) : undefined;
+            const c = grp && wpt && !isStatic ? cursorFor(slabEdgesNear(grp, wpt.x, wpt.y)) : '';
+            if (!slabGesture)
+                api.container.style.cursor = c;
             return;
-        const id = (_d = host.getAttribute('data-node-id')) !== null && _d !== void 0 ? _d : '';
-        if (!((_e = group.members) !== null && _e !== void 0 ? _e : new Set()).has(id))
+        }
+        if (!slabGesture && api.container.style.cursor)
+            api.container.style.cursor = '';
+        const id = (_e = host.getAttribute('data-node-id')) !== null && _e !== void 0 ? _e : '';
+        if (!((_f = group.members) !== null && _f !== void 0 ? _f : new Set()).has(id))
             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;
+        const resizable = !!node && !isStatic && ((_g = node.state) === null || _g === void 0 ? void 0 : _g.locked) !== true && ((_h = node.getMetadata) === null || _h === void 0 ? void 0 : _h.call(node, 'widgetResizable')) !== false;
         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
@@ -2070,7 +2392,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();
         }
     };
@@ -2334,6 +2656,17 @@ export function bindDashboardGrid(api, group, options = {}) {
             writing = false;
         }
         const commands = buildCommitCommands(deltasSince(snap.cells, snap.geoms));
+        if (isGroupMember(id)) {
+            // A SECTION: its cell lives in group metadata and its frame is written
+            // by project(); the node commands above skip groups (D5 of the review).
+            const it = engine.getItem(id);
+            const grp = diagram.getGroup(id);
+            const cb = snap.cells.get(id);
+            const gb = snap.geoms.get(id);
+            if (it && grp && cb && gb && (cb.x !== it.x || cb.y !== it.y || cb.w !== it.w || cb.h !== it.h)) {
+                commands.push(new SetGroupCellCommand(id, cb, { x: it.x, y: it.y, w: it.w, h: it.h }, { x: gb.pos.x, y: gb.pos.y, width: gb.size.width, height: gb.size.height }, frameOfGroup(grp)));
+            }
+        }
         engine.endGesture();
         disarmGlideSoon();
         enforceBoardHeight();
@@ -2422,7 +2755,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;
@@ -2432,7 +2765,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             var _a;
             if (disposed)
                 return false;
-            if (id !== undefined && (!((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !diagram.getNode(id)))
+            if (id !== undefined && (!((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !memberEntity(id)))
                 return false;
             selectWidget(id);
             return true;
@@ -2561,7 +2894,8 @@ export function bindDashboardGrid(api, group, options = {}) {
             return programmatic('Move widget', id, () => engine.moveCheck(id, x, y).changed);
         },
         resizeTo(id, w, h) {
-            return programmatic('Resize widget', id, () => engine.resizeCheck(id, w, h).changed);
+            const hh = isGroupMember(id) ? Math.max(h, innerRowsOf(id)) : h; // a section: never below its children
+            return programmatic('Resize widget', id, () => engine.resizeCheck(id, w, hh).changed);
         },
         beginPaletteDrag,
         dispose() {
@@ -2588,6 +2922,9 @@ export function bindDashboardGrid(api, group, options = {}) {
             placeholder = null;
             if (glideTimer)
                 clearTimeout(glideTimer);
+            for (const el of slabEls.values())
+                el.remove();
+            slabEls.clear();
             // 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 ⑤).

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' | 'squeeze' | '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' | 'onSelect'> {
     /** 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, 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,16 @@ export function bindDashboardSplit(api, group, options = {}) {
     /** The selected widget (see grid-binder): stamped `axdb-selected`, shows the grip. */
     let selectedId;
     const selectWidget = (id) => {
+        var _a;
+        if (id !== undefined)
+            clearOtherSelections(api.container, selfPeerRef);
         if (id === selectedId)
             return;
         selectedId = id;
         syncA11y();
+        (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id);
     };
+    let selfPeerRef = null;
     // Static boards let content be clicked — see grid-binder's staticGuard.
     const staticGuard = (e) => {
         var _a, _b, _c, _d;
@@ -823,7 +828,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 +972,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 +1045,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 +1192,16 @@ 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: () => {
+            var _a;
+            if (selectedId === undefined)
+                return;
+            selectedId = undefined;
+            syncA11y();
+            (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, undefined);
+        },
         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 +1212,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

@@ -68,7 +68,7 @@ const CSS = `
 }
 
 /* ===== corner resize handle (hover-revealed, radius-matched) ===== */
-.grafloria-node-host > .axdb-rs {
+:is(.grafloria-node-host, .axdb-slab) > .axdb-rs {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -88,7 +88,7 @@ const CSS = `
 @media (hover: none) { .grafloria-node-host > .axdb-rs { opacity: .8; } }
 .grafloria-node-host > .axdb-rs:hover { border-color: #3b52d9; }
 /* RTL boards grow leftwards, so the grab corner mirrors with them. */
-.grafloria-node-host > .axdb-rs.axdb-rs--rtl {
+:is(.grafloria-node-host, .axdb-slab) > .axdb-rs.axdb-rs--rtl {
   right: auto;
   left: 0;
   cursor: nesw-resize;
@@ -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%); }
@@ -352,6 +355,14 @@ const CSS = `
 .axdb-tier-2 .axdb-xt, .axdb-tier-2 .axdb-vt,
 .axdb-lg--off { display: none; }
 
+/* SECTION CHROME: a pointer-transparent overlay on every member group. It
+   wears the selection ring and, while selected, the corner handle. */
+.grafloria-html-layer > .axdb-slab { position: absolute; pointer-events: none; border-radius: var(--axdb-rs-radius, 3px); z-index: 4; }
+.grafloria-html-layer > .axdb-slab.axdb-slab--selected { box-shadow: 0 0 0 1.5px var(--axdb-accent-ring, rgba(59, 82, 217, .55)); }
+.grafloria-html-layer > .axdb-slab > .axdb-rs { pointer-events: auto; opacity: 0; }
+.grafloria-html-layer > .axdb-slab.axdb-slab--selected > .axdb-rs { opacity: 1; }
+.grafloria-html-layer > .axdb-slab.axdb-slab--static > .axdb-rs { display: none; }
+
 /* legend chips, shared by line and donut */
 .axdb-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; }
 .axdb-lg--col { flex-direction: column; flex-wrap: nowrap; gap: 6px; margin-top: 0; }