@grafloria/element 0.4.53 → 0.4.55

package/package.json

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

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

@@ -0,0 +1,62 @@
+/**
+ * WHAT A BOARD'S MODULES SEE OF THE BINDER (tile first, step 4b-i).
+ *
+ * `bindDashboardGrid` is one closure: the engine, the group, the options and
+ * a few dozen live values. The modules that left it — the projection, the
+ * chrome, the keyboard — read that state through this context instead of
+ * sharing the closure. Everything that can change during the binder's life
+ * is a call (`engine()`, `frame()`, `isStatic()`), never a copied value, so a
+ * module sees the engine the binder holds NOW, not the one it was created
+ * with (the binder rebuilds its engine on every sync).
+ */
+import type { DiagramModel, GridPackEngine, GroupModel, NodeModel } from '@grafloria/engine';
+import type { DashboardGridGeometry, WorldRect } from './grid-mapping.js';
+import type { DashboardGridApi, DashboardGridOptions } from './grid-binder.js';
+export interface BoardCtx {
+    readonly api: DashboardGridApi;
+    readonly group: GroupModel;
+    readonly diagram: DiagramModel;
+    readonly options: DashboardGridOptions;
+    readonly gap: number;
+    readonly padding: number;
+    readonly baseRowHeight: number;
+    readonly minRowHeight: number;
+    readonly overflow: 'bounded' | 'scroll';
+    /** The engine the binder holds now (it is rebuilt on every sync). */
+    engine(): GridPackEngine;
+    frame(): WorldRect;
+    geom(): DashboardGridGeometry;
+    rows(): number;
+    sizing(): 'fit' | 'grow';
+    /** The board's design height in px, 0 when it has none. */
+    designH(): number;
+    rtl(): boolean;
+    isStatic(): boolean;
+    disposed(): boolean;
+    htmlLayer(): HTMLElement | null;
+    hostOf(id: string): HTMLElement | null;
+    memberEntity(id: string): NodeModel | GroupModel | undefined;
+    sizeOf(e: {
+        size?: {
+            width: number;
+            height: number;
+            depth?: number;
+        };
+    }): {
+        width: number;
+        height: number;
+        depth?: number;
+    };
+    /**
+     * The tile the projection leaves alone — this board's own ghost while its
+     * gesture runs, or a ghost another board's gesture placed here through its
+     * leg — and the tile the placeholder is drawn for. Null when none.
+     */
+    ghostId(): string | null;
+    /**
+     * A system write of DERIVED state (a projected rect, the board's own
+     * height). The binder's `writing` flag guards its bounds handler while it
+     * runs, so a frame the projection wrote is not re-projected as a change.
+     */
+    write(fn: () => void): void;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=board-ctx.js.map

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

@@ -0,0 +1,60 @@
+/**
+ * THE CHROME (tile first, step 4b-i): everything a board paints that is not a
+ * widget — section slabs and their selection ring, a tab container's frame and
+ * tinted surface, caption bands, the carried subtree of a moving group, the
+ * corner resize handles and the painted grips on member hosts, the edge
+ * cursors, the refused cell of a section move, and the static guard that lets
+ * content be clicked on a read-only board. Moved out of the binder unchanged
+ * in behaviour; the binder keeps calling these by the same names.
+ */
+import type { GroupModel } from '@grafloria/engine';
+import { type ResizeEdges } from './edges.js';
+import { type DragHandleOption } from './grip.js';
+import type { BoardCtx } from './board-ctx.js';
+/**
+ * A TAB CONTAINER's frame is its drag handle (0.4.43): its 8-px margin —
+ * under the strip, beside the pages — moves the group, so the edge-resize
+ * zone shrinks to 3 px there (the corner handle still resizes). A section's
+ * edges keep the full grip: its empty band is a drop target, not a handle.
+ */
+export declare const TAB_FRAME_GRIP = 3;
+export declare const isTabsGroup: (grp: GroupModel) => boolean;
+export declare const edgeGripFor: (grp: GroupModel) => number;
+export interface ChromeDeps {
+    /** The selected member (a widget or a section), for the slab's ring. */
+    selectedId(): string | undefined;
+    /** The accessible chrome on every member host — the binder's, since it owns the focus and the selection. */
+    syncA11y(only?: ReadonlySet<string>): void;
+    /** A section is being moved by hand right now (the refusal cell's cursor, the hover cursor). */
+    grabbing(): boolean;
+    /** A tile gesture is live (the hover affordance stays out of its way). */
+    gestureRunning(): boolean;
+    /** The member SECTION whose frame holds the world point, if any. */
+    memberGroupAt(x: number, y: number): string | null;
+    /** Which of a section frame's edges a world point is within its grip of. */
+    slabEdgesNear(grp: GroupModel, x: number, y: number): ResizeEdges;
+    dragHandle(): DragHandleOption;
+    wantHandles: boolean;
+}
+export interface Chrome {
+    /** The section overlays: projected chrome like the placeholder, following every frame write. */
+    syncSlabs(): void;
+    /** The chrome on every member host: the painted grip (or none) and the corner resize handle. */
+    syncHandles(only?: ReadonlySet<string>): void;
+    /** Start answering host churn (a mount, a repaint that wiped the handle) with a re-sync of those hosts. */
+    observe(layer: HTMLElement): void;
+    ensureStaticGuard(): void;
+    /** The pointer over the container: edge cursors on hosts, section-edge cursors, `show: 'hover'` captions. */
+    onHover(e: PointerEvent): void;
+    onHoverLeave(): void;
+    /** Everything in a group's subtree — tiles, strips, slabs, the surface — transition-exempt while it is carried. */
+    setCarried(id: string, on: boolean): void;
+    flushCarried(): void;
+    /** The cell a slab move asked for and could not have — painted so the refusal is visible; null clears it. */
+    showRefusal(cell: {
+        x: number;
+        y: number;
+    } | null, w: number, h: number): void;
+    dispose(): void;
+}
+export declare function createChrome(ctx: BoardCtx, deps: ChromeDeps): Chrome;

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

@@ -0,0 +1,461 @@
+import { cellToRect } from './grid-mapping.js';
+import { captionKey, captionOfGroup, captionPainted, paintCaptionBand, sizeCaptionBand } from './caption.js';
+import { cursorFor, edgesNear, EDGE_GRIP } from './edges.js';
+import { gripOf, syncGrip } from './grip.js';
+/**
+ * A TAB CONTAINER's frame is its drag handle (0.4.43): its 8-px margin —
+ * under the strip, beside the pages — moves the group, so the edge-resize
+ * zone shrinks to 3 px there (the corner handle still resizes). A section's
+ * edges keep the full grip: its empty band is a drop target, not a handle.
+ */
+export const TAB_FRAME_GRIP = 3;
+export const isTabsGroup = (grp) => { var _a; return ((_a = grp.getMetadata('containerWidget')) === null || _a === void 0 ? void 0 : _a.layout) === 'tabs'; };
+export const edgeGripFor = (grp) => (isTabsGroup(grp) ? TAB_FRAME_GRIP : EDGE_GRIP);
+export function createChrome(ctx, deps) {
+    const { api, group, diagram, options } = ctx;
+    // -- section slabs, group frames, caption bands ----------------------------
+    /**
+     * 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();
+    /**
+     * GROUP FRAME (0.4.43): a TAB CONTAINER wears a frame by default — its slab
+     * is bordered and a tinted surface lies under its pages, first in the layer
+     * so the tiles paint over it. A page torn out with two widgets under its tab
+     * read as a strip floating over two loose cards: nothing said the second
+     * card was the tab's. A plain section keeps its invisible slab.
+     */
+    const groupBgs = new Map();
+    const syncGroupBg = (layer, id, on, x, y, w, h) => {
+        var _a;
+        let bg = (_a = groupBgs.get(id)) !== null && _a !== void 0 ? _a : null;
+        if (!on) {
+            bg === null || bg === void 0 ? void 0 : bg.remove();
+            groupBgs.delete(id);
+            return;
+        }
+        if (!bg || bg.parentElement !== layer) {
+            bg === null || bg === void 0 ? void 0 : bg.remove();
+            bg = document.createElement('div');
+            bg.className = 'axdb-group-bg';
+            bg.setAttribute('data-group-bg', id);
+            layer.prepend(bg);
+            groupBgs.set(id, bg);
+        }
+        bg.style.left = `${x}px`;
+        bg.style.top = `${y}px`;
+        bg.style.width = `${w}px`;
+        bg.style.height = `${h}px`;
+    };
+    /**
+     * A `show: 'hover'` caption cannot ride CSS `:hover`: the slab overlay takes
+     * no pointer (by design — it must never steal a press), and while the band
+     * is hidden it takes none either, so nothing in the section is ever hovered
+     * in CSS terms. The binder already tracks the pointer; it marks the section
+     * under it instead.
+     */
+    /** Only the sections carrying a `show: 'hover'` band — usually none, so the
+     *  pointer handler costs nothing on a board that has no hover caption. */
+    const hoverSlabs = new Set();
+    const markHotSection = (clientX, clientY) => {
+        if (!hoverSlabs.size)
+            return;
+        for (const el of hoverSlabs) {
+            const r = el.getBoundingClientRect();
+            el.classList.toggle('axdb-slab--hot', clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom);
+        }
+    };
+    const onHoverLeave = () => {
+        for (const el of hoverSlabs)
+            el.classList.remove('axdb-slab--hot');
+    };
+    /**
+     * THE CAPTION BAND of a section, on its slab overlay. Painted from the
+     * group's persisted caption; repainted only when its identity changes (the
+     * options, RTL, static, the tier) so a custom `renderCaption` is not run
+     * per frame. The band takes the pointer (the slab itself does not): a press
+     * on it selects the section, an action fires, pass-through reaches content.
+     */
+    const syncCaption = (el, id, grp, sectionH) => {
+        const cap = captionOfGroup(grp);
+        const isStatic = ctx.isStatic();
+        let band = el.querySelector(':scope > .axdb-slab-h');
+        if (!cap || !captionPainted(cap, isStatic)) {
+            band === null || band === void 0 ? void 0 : band.remove();
+            hoverSlabs.delete(el);
+            el.classList.remove('axdb-slab--hot');
+            el.removeAttribute('aria-label');
+            el.removeAttribute('role');
+            return;
+        }
+        if (cap.show === 'hover')
+            hoverSlabs.add(el);
+        else {
+            hoverSlabs.delete(el);
+            el.classList.remove('axdb-slab--hot');
+        }
+        const cctx = { rtl: ctx.rtl(), static: isStatic, sectionH };
+        const key = captionKey(cap, cctx);
+        if (band && band.getAttribute('data-key') === key) {
+            sizeCaptionBand(band, cap, sectionH); // the tier follows the live size
+            return;
+        }
+        band === null || band === void 0 ? void 0 : band.remove();
+        band = document.createElement('div');
+        el.prepend(band);
+        const render = options.renderCaption;
+        paintCaptionBand(band, cap, Object.assign(Object.assign(Object.assign({}, cctx), (render ? { render: (host) => render(id, host) } : {})), { onAction: (actionId) => { var _a; return (_a = options.onCaptionAction) === null || _a === void 0 ? void 0 : _a.call(options, id, actionId); } }));
+        band.setAttribute('data-key', key);
+        // A named group, so the caption text is the section's name in the
+        // accessibility tree rather than a stray label on an unnamed div. (The
+        // band is not a tab stop yet — the actions are deliberately out of the
+        // tab order so a board keeps exactly ONE stop; see the plan.)
+        if (cap.text) {
+            el.setAttribute('role', 'group');
+            el.setAttribute('aria-label', cap.text);
+        }
+        else {
+            el.removeAttribute('role');
+            el.removeAttribute('aria-label');
+        }
+    };
+    let slabLayer = null;
+    const syncSlabs = () => {
+        var _a, _b, _c;
+        if (ctx.disposed())
+            return;
+        const layer = (slabLayer === null || slabLayer === void 0 ? void 0 : slabLayer.isConnected) ? slabLayer : (slabLayer = ctx.htmlLayer());
+        if (!layer)
+            return;
+        const seen = new Set();
+        const selectedId = deps.selectedId();
+        const isStatic = ctx.isStatic();
+        const rtl = ctx.rtl();
+        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 = ctx.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);
+            const tabs = isTabsGroup(grp);
+            el.classList.toggle('axdb-slab--tabs', tabs);
+            syncGroupBg(layer, id, tabs, p.x, p.y, sz.width, sz.height);
+            syncCaption(el, id, grp, sz.height);
+        }
+        for (const [id, el] of slabEls) {
+            if (!seen.has(id)) {
+                el.remove();
+                hoverSlabs.delete(el);
+                slabEls.delete(id);
+                (_c = groupBgs.get(id)) === null || _c === void 0 ? void 0 : _c.remove();
+                groupBgs.delete(id);
+            }
+        }
+    };
+    // -- the carried subtree ---------------------------------------------------
+    /**
+     * CARRIED (0.4.43): a group dragged by its strip or band moves as ONE thing.
+     * The held TILE is transition-exempt (the ghost), but a group has no host of
+     * its own: its strip jumped to the pointer while its pages' tiles GLIDED
+     * after it — on the live demo the content trailed the strip by up to 140 px
+     * at every step. Everything in the group's subtree — tiles, strips, slabs,
+     * the surface — is exempt for the gesture and, like the ghost, through the
+     * drop write; then the glides resume.
+     */
+    const carriedEls = new Set();
+    let carriedTimer = null;
+    const subtreeIds = (id) => {
+        var _a;
+        const groups = [];
+        const nodes = [];
+        const queue = [id];
+        const seen = new Set();
+        while (queue.length) {
+            const cur = queue.shift();
+            if (seen.has(cur))
+                continue;
+            seen.add(cur);
+            const grp = diagram.getGroup(cur);
+            if (grp) {
+                groups.push(cur);
+                for (const m of (_a = grp.members) !== null && _a !== void 0 ? _a : [])
+                    queue.push(m);
+            }
+            else if (diagram.getNode(cur))
+                nodes.push(cur);
+        }
+        return { groups, nodes };
+    };
+    const cssId = (id) => (typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/"/g, '\\"'));
+    const setCarried = (id, on) => {
+        const layer = ctx.htmlLayer();
+        if (!layer)
+            return;
+        if (carriedTimer) {
+            clearTimeout(carriedTimer);
+            carriedTimer = null;
+        }
+        if (on) {
+            const { groups, nodes } = subtreeIds(id);
+            const els = [];
+            for (const n of nodes) {
+                const h = ctx.hostOf(n);
+                if (h)
+                    els.push(h);
+            }
+            for (const g of groups) {
+                els.push(...Array.from(layer.querySelectorAll(`:scope > .axdb-tabs[data-tabs-id="${cssId(g)}"], :scope > .axdb-slab[data-slab-id="${cssId(g)}"], :scope > .axdb-group-bg[data-group-bg="${cssId(g)}"]`)));
+            }
+            for (const el of els) {
+                el.classList.add('axdb-carried');
+                carriedEls.add(el);
+            }
+            return;
+        }
+        carriedTimer = setTimeout(() => {
+            for (const el of carriedEls)
+                el.classList.remove('axdb-carried');
+            carriedEls.clear();
+            carriedTimer = null;
+        }, 60);
+    };
+    const flushCarried = () => {
+        if (carriedTimer)
+            clearTimeout(carriedTimer);
+        carriedTimer = null;
+        for (const el of carriedEls)
+            el.classList.remove('axdb-carried');
+        carriedEls.clear();
+    };
+    // -- the refused cell ------------------------------------------------------
+    let refusal = null;
+    const showRefusal = (cell, w, h) => {
+        const layer = ctx.htmlLayer();
+        if (!cell || !layer) {
+            refusal === null || refusal === void 0 ? void 0 : refusal.remove();
+            refusal = null;
+            api.container.style.cursor = deps.grabbing() ? 'grabbing' : '';
+            return;
+        }
+        if (!refusal || refusal.parentElement !== layer) {
+            refusal === null || refusal === void 0 ? void 0 : refusal.remove();
+            refusal = document.createElement('div');
+            refusal.className = 'axdb-ph axdb-ph--no';
+            layer.prepend(refusal);
+        }
+        const r = cellToRect({ x: cell.x, y: cell.y, w, h }, ctx.frame(), ctx.geom(), ctx.rows());
+        refusal.style.left = `${r.x}px`;
+        refusal.style.top = `${r.y}px`;
+        refusal.style.width = `${r.width}px`;
+        refusal.style.height = `${r.height}px`;
+        api.container.style.cursor = 'not-allowed';
+    };
+    // -- the static guard ------------------------------------------------------
+    /**
+     * STATIC BOARDS LET CONTENT BE CLICKED. The renderer prevents the default of
+     * every press a tool claims, which cancels the compatibility mouse events —
+     * a chart inside a read-only board could not be clicked. So under `static`
+     * a press inside a member's CONTENT (not on kit chrome) is stopped on the
+     * HTML layer, in the bubble phase: the content has already received it, the
+     * renderer never does, nothing is prevented.
+     */
+    const staticGuard = (e) => {
+        var _a, _b, _c, _d;
+        if (!ctx.isStatic() || ctx.disposed())
+            return;
+        const t = e.target;
+        const host = (_a = t === null || t === void 0 ? void 0 : t.closest) === null || _a === void 0 ? void 0 : _a.call(t, '.grafloria-node-host');
+        if (!host || !((_b = group.members) !== null && _b !== void 0 ? _b : new Set()).has((_c = host.getAttribute('data-node-id')) !== null && _c !== void 0 ? _c : ''))
+            return;
+        if ((_d = t === null || t === void 0 ? void 0 : t.closest) === null || _d === void 0 ? void 0 : _d.call(t, '.axdb-rs, .axdb-grip, .axdb-div'))
+            return;
+        e.stopPropagation();
+    };
+    let guardedLayer = null;
+    const ensureStaticGuard = () => {
+        if (guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.isConnected)
+            return;
+        const layer = ctx.htmlLayer();
+        if (!layer)
+            return;
+        guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.removeEventListener('pointerdown', staticGuard);
+        guardedLayer = layer;
+        layer.addEventListener('pointerdown', staticGuard);
+    };
+    // -- handles and grips on member hosts -------------------------------------
+    /**
+     * The chrome on every member host: the painted grip (or none) and the corner
+     * resize handle — ONE host lookup per member, which the host observer's
+     * budget counts (a repaint of one host must cost that host's lookup, not a
+     * second pass).
+     */
+    const syncHandles = (only) => {
+        var _a, _b, _c, _d, _e;
+        deps.syncA11y(only);
+        if (ctx.disposed())
+            return;
+        ensureStaticGuard();
+        syncSlabs();
+        const grip = gripOf(deps.dragHandle());
+        const isStatic = ctx.isStatic();
+        const rtl = ctx.rtl();
+        for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
+            if (only && !only.has(id))
+                continue;
+            const node = diagram.getNode(id);
+            if (!node)
+                continue;
+            const host = ctx.hostOf(id);
+            if (!host)
+                continue;
+            syncGrip(host, grip, ((_b = node.state) === null || _b === void 0 ? void 0 : _b.locked) !== true && !isStatic && ((_c = node.getMetadata) === null || _c === void 0 ? void 0 : _c.call(node, 'widgetMovable')) !== false);
+            if (!deps.wantHandles)
+                continue;
+            const existing = host.querySelector(':scope > .axdb-rs');
+            if (((_d = node.state) === null || _d === void 0 ? void 0 : _d.locked) === true || isStatic || ((_e = node.getMetadata) === null || _e === void 0 ? void 0 : _e.call(node, 'widgetResizable')) === false) {
+                existing === null || existing === void 0 ? void 0 : existing.remove();
+                continue;
+            }
+            const rs = existing !== null && existing !== void 0 ? existing : document.createElement('div');
+            if (!existing) {
+                rs.className = 'axdb-rs';
+                rs.setAttribute('title', 'Resize');
+                host.appendChild(rs);
+            }
+            // The grab corner mirrors with the board: bottom-right LTR, bottom-left
+            // RTL — the same corner the tile actually grows from in each direction.
+            rs.classList.toggle('axdb-rs--rtl', rtl);
+        }
+    };
+    /**
+     * Only a HOST-LEVEL change matters: a host arriving (a mount) or a host's
+     * own children changing (a repaint that wiped the injected handle). A
+     * chart's internal churn — most of what a live dashboard mutates — targets
+     * deeper nodes and is ignored, and the hosts the records DO name are the
+     * only ones re-synced. This was members × repaints `querySelector` calls
+     * per wave (9,216 at 96 widgets, review D10); it is now proportional to the
+     * hosts that actually changed.
+     */
+    const hostObserver = new MutationObserver((records) => {
+        const touched = new Set();
+        const noteHost = (el) => {
+            var _a;
+            const e = el;
+            if ((_a = e === null || e === void 0 ? void 0 : e.classList) === null || _a === void 0 ? void 0 : _a.contains('grafloria-node-host')) {
+                const id = e.getAttribute('data-node-id');
+                if (id)
+                    touched.add(id);
+            }
+        };
+        for (const r of records) {
+            // Our own re-injected handle arriving is not a change to answer — it
+            // would echo one more pass per repaint.
+            const ownEcho = r.removedNodes.length === 0 &&
+                r.addedNodes.length > 0 &&
+                Array.from(r.addedNodes).every((n) => { var _a; return (_a = n.classList) === null || _a === void 0 ? void 0 : _a.contains('axdb-rs'); });
+            if (ownEcho)
+                continue;
+            noteHost(r.target);
+            r.addedNodes.forEach((n) => noteHost(n));
+        }
+        if (touched.size)
+            syncHandles(touched);
+    });
+    const observe = (layer) => hostObserver.observe(layer, { childList: true, subtree: true });
+    // -- the hover affordance --------------------------------------------------
+    /**
+     * Edge affordance: the cursor says which border a press would take, the
+     * way gridstack's invisible edge handles do. One passive listener on the
+     * container; the corner handle keeps its own cursor from the stylesheet.
+     */
+    let hoverHost = null;
+    const onHover = (e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (ctx.disposed() || deps.gestureRunning())
+            return;
+        markHotSection(e.clientX, e.clientY);
+        let host = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.grafloria-node-host');
+        if (!host) {
+            for (const id of (_c = group.members) !== null && _c !== void 0 ? _c : []) {
+                const h = ctx.hostOf(id);
+                if (!h)
+                    continue;
+                const r = h.getBoundingClientRect();
+                if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) {
+                    host = h;
+                    break;
+                }
+            }
+        }
+        if (hoverHost && hoverHost !== host) {
+            hoverHost.style.cursor = '';
+            hoverHost.removeAttribute('data-axdb-edge'); // the affordance follows the pointer off a tile
+        }
+        hoverHost = host;
+        const grabbing = deps.grabbing();
+        if (!host) {
+            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 ? deps.memberGroupAt(wpt.x, wpt.y) : null;
+            const grp = sid ? diagram.getGroup(sid) : undefined;
+            const c = grp && wpt && !ctx.isStatic() ? cursorFor(deps.slabEdgesNear(grp, wpt.x, wpt.y)) : '';
+            if (!grabbing)
+                api.container.style.cursor = c;
+            return;
+        }
+        if (!grabbing && 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 && !ctx.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)) : '';
+        if (cursor)
+            host.setAttribute('data-axdb-edge', cursor);
+        else
+            host.removeAttribute('data-axdb-edge');
+    };
+    const dispose = () => {
+        guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.removeEventListener('pointerdown', staticGuard);
+        hostObserver.disconnect();
+        for (const el of slabEls.values())
+            el.remove();
+        slabEls.clear();
+        hoverSlabs.clear();
+        for (const bg of groupBgs.values())
+            bg.remove();
+        groupBgs.clear();
+        refusal === null || refusal === void 0 ? void 0 : refusal.remove();
+        refusal = null;
+        flushCarried();
+    };
+    return { syncSlabs, syncHandles, observe, ensureStaticGuard, onHover, onHoverLeave, setCarried, flushCarried, showRefusal, dispose };
+}
+//# sourceMappingURL=chrome.js.map

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

@@ -411,9 +411,17 @@ export interface DashboardHandle {
     /**
      * Add a widget to a view. CREATES the node (you do not pre-build one), wires
      * its metadata, and commits node + membership as ONE undoable step.
-     * Auto-positions when the spec names no cell.
-     */
-    addWidget(spec: DashboardWidgetSpec, viewId?: string): WidgetHandle | undefined;
+     * Auto-positions when the spec names no cell. `opts.displaced`: the
+     * commands a palette drop handed `onDropIn` for the tiles the placeholder
+     * pushed aside — folded into the same step, so the widget lands on the cell
+     * the drop showed and undo puts the pushed tiles back with it. Left out,
+     * the board is re-read from the model and the push is forgotten: the new
+     * widget then auto-positions into whatever hole is left (Quantia's "lands
+     * on the cell it was aimed at", element 0.4.54).
+     */
+    addWidget(spec: DashboardWidgetSpec, viewId?: string, opts?: {
+        displaced?: Command[];
+    }): WidgetHandle | undefined;
     /**
      * Re-read every board from the model — call after undo/redo, or any
      * out-of-band mutation, so the grid and the projection agree again.

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

@@ -1575,8 +1575,8 @@ export function createDashboardHandle(ctx) {
             (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
         },
         getDragHandle: () => { var _a, _b, _c; return (_b = (_a = binders.get(ctx.active)) === null || _a === void 0 ? void 0 : _a.getDragHandle()) !== null && _b !== void 0 ? _b : ((_c = ctx.optionsBase.dragHandle) !== null && _c !== void 0 ? _c : false); },
-        addWidget(spec, viewId) {
-            var _a, _b, _c, _d, _e, _f;
+        addWidget(spec, viewId, opts) {
+            var _a, _b, _c, _d, _e, _f, _g;
             const vid = viewId !== null && viewId !== void 0 ? viewId : ctx.active;
             // `vid` may name a view OR a container — both are boards with a group,
             // a binder and an authored array.
@@ -1601,10 +1601,15 @@ export function createDashboardHandle(ctx) {
             const node = existing !== null && existing !== void 0 ? existing : buildWidgetNode(w, ctx.rowHeight);
             if (w.pinned)
                 node.setState({ locked: true });
-            // ONE undoable step, registration included (see AddWidgetCommand).
-            execCommand(new AddWidgetCommand(node, group.id, registry, !!existing));
-            (_e = binders.get(vid)) === null || _e === void 0 ? void 0 : _e.sync();
-            (_f = ctx.apiRef) === null || _f === void 0 ? void 0 : _f.renderNow();
+            // ONE undoable step, registration included (see AddWidgetCommand). The
+            // tiles a drop pushed aside ride in front of it, in a SEQUENCE: a batch
+            // runs its members across awaits, and the board is re-read right after
+            // this call — the pushed cells must be in the model by then.
+            const add = new AddWidgetCommand(node, group.id, registry, !!existing);
+            const displaced = (_e = opts === null || opts === void 0 ? void 0 : opts.displaced) !== null && _e !== void 0 ? _e : [];
+            execCommand(displaced.length > 0 ? new SequenceCommand('Add widget', [...displaced, add]) : add);
+            (_f = binders.get(vid)) === null || _f === void 0 ? void 0 : _f.sync();
+            (_g = ctx.apiRef) === null || _g === void 0 ? void 0 : _g.renderNow();
             return makeWidgetHandle(w.id);
         },
         refresh() {

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

@@ -0,0 +1,15 @@
+/** Which edges of a tile a press takes, and the cursor that says so (tile first, step 4b-i: out of the binder). */
+/** A press this close (CSS px) to a tile's border takes that edge for a resize. */
+export declare const EDGE_GRIP = 7;
+export interface ResizeEdges {
+    n: boolean;
+    e: boolean;
+    s: boolean;
+    w: boolean;
+}
+export declare const NO_EDGES: ResizeEdges;
+/** Which of a host's edges a client point is within EDGE_GRIP of (none when outside). */
+export declare function edgesNear(host: Element, cx: number, cy: number): ResizeEdges;
+export declare const anyEdge: (E: ResizeEdges) => boolean;
+/** The resize cursor for a set of edges ('' when none). */
+export declare function cursorFor(E: ResizeEdges): string;