@grafloria/element 0.4.18 → 0.4.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.4.18",
+  "version": "0.4.20",
   "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
@@ -436,6 +438,20 @@ interface BinderPeer {
      * 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;
     /**
@@ -501,4 +517,10 @@ interface AdoptedLeg {
 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

@@ -453,7 +453,15 @@ export function bindDashboardGrid(api, group, options = {}) {
         designHeight: sizing === 'fit' ? frame().height : designH,
         rtl,
     });
-    const rows = () => Math.max(1, engine.rows());
+    /**
+     * The rows the board is laid out in. A BOUNDED board (a section) keeps its
+     * bound's rows even when its content ends higher — empty rows stay empty
+     * rows, as in gridstack — instead of stretching the rest to fill the slab:
+     * that stretch made a tile pulled shorter shrink FASTER than the pointer
+     * (each row it gave up made the remaining rows taller, so the same pixel
+     * height quantised to fewer rows on the next move — kit lab L37).
+     */
+    const rows = () => Math.max(1, engine.rows(), maxRows !== null && maxRows !== void 0 ? maxRows : 0);
     const htmlLayer = () => api.container.querySelector('.grafloria-html-layer');
     const hostOf = (id) => {
         const esc = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/"/g, '\\"');
@@ -465,6 +473,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);
@@ -708,23 +729,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) {
@@ -738,7 +763,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');
@@ -759,6 +784,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))
@@ -975,6 +1001,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         finally {
             writing = false;
         }
+        syncSlabs();
     };
     const applyColumns = (n, layout) => {
         var _a;
@@ -1044,6 +1071,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 : []) {
@@ -1057,6 +1158,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)
@@ -1163,7 +1389,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;
@@ -1184,7 +1416,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);
@@ -1232,7 +1464,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. */
@@ -1468,6 +1700,10 @@ export function bindDashboardGrid(api, group, options = {}) {
                             touched = true;
                         }
                     }
+                    else if (!E.s) {
+                        // A top-edge pull needs the row ABOVE: the anchored resize path
+                        // decides it (refused when that row is taken) — never the section.
+                    }
                     else if (!engine.resizeCheck(g.id, pulled.w, pulled.h + 1).changed) {
                         const res = parent.resizeMemberBy(group.id, +1);
                         if (res.changed) {
@@ -1496,15 +1732,22 @@ export function bindDashboardGrid(api, group, options = {}) {
                             touched = true;
                         }
                     }
-                    else if (pulled.h > 1) {
-                        engine.resizeCheck(g.id, pulled.w, pulled.h - 1);
+                    else if (pulled.h > 1 && E.s) {
+                        // Shrink to the row the pointer asks for (one row per move lagged
+                        // a fast pull and overshot a slow one), then hand every row the
+                        // layout no longer needs back to the board.
+                        engine.resizeCheck(g.id, pulled.w, Math.max(1, wantRows));
                         const floor = Math.max(designRows, extentOf(engine.getItems()));
-                        if (slabRows > floor) {
+                        let slab = slabRows;
+                        let bound = inner;
+                        while (slab > floor) {
                             const res = parent.resizeMemberBy(group.id, -1);
-                            if (res.changed) {
-                                record(res, -1);
-                                setInnerRows(inner - 1);
-                            }
+                            if (!res.changed)
+                                break;
+                            record(res, -1);
+                            slab -= 1;
+                            bound -= 1;
+                            setInnerRows(bound);
                         }
                         touched = true;
                     }
@@ -1573,9 +1816,23 @@ export function bindDashboardGrid(api, group, options = {}) {
             const moves = tx !== itemNow.x || ty !== itemNow.y;
             const growing = span.w > itemNow.w || span.h > itemNow.h;
             let changed = false;
-            if (moves && growing)
-                changed = engine.moveCheck(g.id, tx, ty, { gate: false }).changed || changed;
-            changed = engine.resizeCheck(g.id, span.w, span.h).changed || changed;
+            // A north or west pull grows by MOVING the anchor first; when that move
+            // is refused (the row above is taken) the growth is refused with it —
+            // the first version fell through to a plain resize and grew the tile at
+            // the OPPOSITE edge, so pulling a control's top edge up made it taller
+            // at the bottom and pushed its section a row (kit lab L37).
+            let anchored = true;
+            if (moves && growing) {
+                // The anchor may move only into FREE cells: a move that pushes would
+                // relocate the tile (a top-edge pull sent a control to row 0 and its
+                // neighbours below it) instead of growing it.
+                const probe = { x: tx, y: ty, w: itemNow.w, h: itemNow.h };
+                const blocked = engine.getItems().some((o) => o.id !== g.id && o.x < probe.x + probe.w && probe.x < o.x + o.w && o.y < probe.y + probe.h && probe.y < o.y + o.h);
+                anchored = !blocked && engine.moveCheck(g.id, tx, ty, { gate: false }).changed;
+                changed = anchored || changed;
+            }
+            if (anchored)
+                changed = engine.resizeCheck(g.id, span.w, span.h).changed || changed;
             if (moves && !growing)
                 changed = engine.moveCheck(g.id, tx, ty, { gate: false }).changed || changed;
             if (changed)
@@ -1802,11 +2059,31 @@ 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);
@@ -1853,7 +2130,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;
@@ -1882,7 +2159,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, _t;
             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);
@@ -1892,10 +2169,47 @@ export function bindDashboardGrid(api, group, options = {}) {
             const gripHost = gripHostOf(target);
             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 SECTION's corner handle sits on top of whatever tile shares that
+            // corner; the DOM target names the section, the hit test the tile.
+            const sectionHandle = (_e = target === null || target === void 0 ? void 0 : target.closest) === null || _e === void 0 ? void 0 : _e.call(target, '.axdb-slab > .axdb-rs');
+            if ((!hit.node && !onGrip) || sectionHandle) {
+                // 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 = (_f = target === null || target === void 0 ? void 0 : target.closest) === null || _f === void 0 ? void 0 : _f.call(target, '.axdb-slab > .axdb-rs');
+                const slabId = (_h = (_g = slabHandle === null || slabHandle === void 0 ? void 0 : slabHandle.parentElement) === null || _g === void 0 ? void 0 : _g.getAttribute('data-slab-id')) !== null && _h !== void 0 ? _h : memberGroupAt(ev.world.x, ev.world.y);
+                const grp = slabId && ((_j = group.members) !== null && _j !== void 0 ? _j : 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 = ((_k = slabHandle === null || slabHandle === void 0 ? void 0 : slabHandle.parentElement) === null || _k === void 0 ? void 0 : _k.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);
+                (_m = (_l = diagram).clearSelection) === null || _m === void 0 ? void 0 : _m.call(_l);
                 selectWidget(undefined);
                 api.render();
                 return;
@@ -1904,17 +2218,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 (((_o = node.state) === null || _o === void 0 ? void 0 : _o.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 = !!((_p = target === null || target === void 0 ? void 0 : target.closest) === null || _p === void 0 ? void 0 : _p.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 = ((_q = node.getMetadata) === null || _q === void 0 ? void 0 : _q.call(node, 'widgetResizable')) !== false;
+            const movable = ((_r = node.getMetadata) === null || _r === void 0 ? void 0 : _r.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.
@@ -1962,7 +2276,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: (_s = it === null || it === void 0 ? void 0 : it.w) !== null && _s !== void 0 ? _s : 1, h: (_t = it === null || it === void 0 ? void 0 : it.h) !== null && _t !== void 0 ? _t : 1 },
                 removedFromBoard: false,
                 leg: null,
                 lastWorld: null,
@@ -1973,10 +2287,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();
@@ -1990,7 +2318,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
@@ -2014,13 +2342,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
@@ -2354,6 +2692,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();
@@ -2452,7 +2801,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;
@@ -2581,7 +2930,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() {
@@ -2608,6 +2958,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

@@ -372,12 +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) => {
+        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.
@@ -1193,10 +1195,12 @@ export function bindDashboardSplit(api, group, options = {}) {
     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),

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;
@@ -355,6 +355,16 @@ 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; }
+/* Selected, the overlay rises above the tiles so ITS corner handle wins a
+   corner it shares with a child's; unselected, its handle takes no presses. */
+.grafloria-html-layer > .axdb-slab.axdb-slab--selected { z-index: 6; 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: none; opacity: 0; }
+.grafloria-html-layer > .axdb-slab.axdb-slab--selected > .axdb-rs { pointer-events: auto; 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; }