@grafloria/element 0.4.57 → 0.4.59

package/package.json

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

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

@@ -1067,16 +1067,41 @@ export function createDashboardHandle(ctx) {
         return [new RegisterWidgetCommand({ register: () => apply(after), unregister: () => apply(before) }, 'register')];
     };
     ctx.tabDrop = {
-        stripAt: (cx, cy) => {
+        stripAt: (cx, cy, grace) => {
+            // The strip the drag already holds is tested with its box widened by
+            // `grace.px` (see STRIP_STAY): a small overshoot still means the tabs.
+            // Its own hit is checked FIRST, so a neighbour never steals it back.
+            const hit = (id, el, pad) => {
+                const r = el.getBoundingClientRect();
+                if (r.width <= 0)
+                    return null;
+                return cx >= r.left - pad && cx <= r.right + pad && cy >= r.top - pad && cy <= r.bottom + pad
+                    ? { containerId: id, index: indexInStrip(el, cx) }
+                    : null;
+            };
+            if (grace && grace.px > 0) {
+                const el = ctx.tabStrips.get(grace.containerId);
+                if (el && ctx.boardGroups.has(grace.containerId)) {
+                    const held = hit(grace.containerId, el, grace.px);
+                    if (held)
+                        return held;
+                }
+            }
             for (const [id, el] of ctx.tabStrips) {
                 if (!ctx.boardGroups.has(id))
                     continue;
-                const r = el.getBoundingClientRect();
-                if (r.width > 0 && cx >= r.left && cx <= r.right && cy >= r.top && cy <= r.bottom)
-                    return { containerId: id, index: indexInStrip(el, cx) };
+                const h = hit(id, el, 0);
+                if (h)
+                    return h;
             }
             return null;
         },
+        tabIndexAt: (containerId, cx) => {
+            const el = ctx.tabStrips.get(containerId);
+            if (!el || !ctx.boardGroups.has(containerId))
+                return null;
+            return indexInStrip(el, cx);
+        },
         markDrop: markTabDrop,
         dropIntoStrip: (widgetId, containerId, index, sourceBoardId, displaced) => moveWidgetToTabCommands(widgetId, containerId, index, sourceBoardId, displaced),
     };
@@ -1211,12 +1236,12 @@ export function createDashboardHandle(ctx) {
             joinTargets: [...ctx.layoutOf.keys()].filter((id) => { var _a, _b; return id !== containerId && id !== pageId && ((_a = ctx.layoutOf.get(id)) !== null && _a !== void 0 ? _a : (_b = specById.get(id)) === null || _b === void 0 ? void 0 : _b.layout) === 'tabs' && !!model.getGroup(id) && !insidePage(id); }),
             stripHeight: (targetId) => tabStripReserve(ctx.tabsOf.get(targetId), Math.max(1, liveCount(targetId))),
             ownBoards: [pageId, ...[...ctx.boardGroups.keys()].filter((id) => insidePage(id))],
-            stripIndex: (targetId, cx, cy) => {
+            stripIndex: (targetId, cx, cy, grace = 0) => {
                 const strip = ctx.tabStrips.get(targetId);
                 if (!strip)
                     return null;
                 const r = strip.getBoundingClientRect();
-                if (r.width === 0 || cx < r.left || cx > r.right || cy < r.top || cy > r.bottom)
+                if (r.width === 0 || cx < r.left - grace || cx > r.right + grace || cy < r.top - grace || cy > r.bottom + grace)
                     return null;
                 return indexInStrip(strip, cx);
             },

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

@@ -558,7 +558,7 @@ export interface TearOutPlan {
     /** Paint (or, with null, clear) the insertion mark on `targetId`'s strip. */
     markDrop(targetId: string | null, index: number | null): void;
     /** The tab index a CLIENT point means along `targetId`'s strip — null when the point is not over that strip. */
-    stripIndex(targetId: string, clientX: number, clientY: number): number | null;
+    stripIndex(targetId: string, clientX: number, clientY: number, grace?: number): number | null;
     /** The strip's height on `targetId`, px — the band above its body. */
     stripHeight(targetId: string): number;
     /** The page itself and every board inside it — never a board the page can land on. */
@@ -581,13 +581,30 @@ export interface TearOutPlan {
  * handle owns the strips and the registry; the binder owns the gesture.
  */
 export interface TabDropHooks {
-    /** The strip under a CLIENT point, and the tab index that point means along it. */
-    stripAt(clientX: number, clientY: number): {
+    /**
+     * The strip under a CLIENT point, and the tab index that point means along
+     * it. `grace` widens ONE strip's box by that many pixels on every side —
+     * the strip a drag is already aiming at keeps the hand through a small
+     * overshoot, instead of handing it to the zone underneath on one pixel.
+     */
+    stripAt(clientX: number, clientY: number, grace?: {
+        containerId: string;
+        px: number;
+    }): {
         containerId: string;
         index: number;
     } | null;
     /** Paint (or, with null, clear) the insertion mark on a strip. */
     markDrop(containerId: string | null, index: number | null): void;
+    /**
+     * Which tab slot a CLIENT x means along one named strip — the x alone, with
+     * no hit test. The binder decides WHETHER the hand is on a strip from the
+     * container's own frame (the model), because a strip element that is gliding
+     * — home after a push, or away under one — reports a box the hand is not in
+     * yet. Optional: a host with its own hooks and no such method keeps the
+     * live hit test for everything.
+     */
+    tabIndexAt?(containerId: string, clientX: number): number | null;
     /** The commands that make `widgetId` a new tab of `containerId` at `index`; `displaced` are this board's survivors. Empty = refused. */
     dropIntoStrip(widgetId: string, containerId: string, index: number, sourceBoardId: string, displaced: Command[]): Command[];
 }
@@ -680,4 +697,14 @@ export declare function parentPeerOf(container: HTMLElement, groupId: string): B
 export declare function clearOtherSelections(container: HTMLElement, self: BinderPeer | null): void;
 export declare function registerBoardPeer(container: HTMLElement, peer: BinderPeer): () => void;
 export type { BinderPeer };
+/**
+ * THE STRIP KEEPS THE HAND IT HAS (CSS px). A tab strip is ~30 px tall and
+ * the zone right under it moves the whole container out of the way, so at the
+ * seam a wobble of a pixel or two toggled a 90-px animated push — the user,
+ * aiming a widget at the tabs: "it's switching so fast between having it above
+ * the entire tab group or inside as a tab". Once a drag is over a strip, that
+ * strip's box counts as this much larger until the hand really leaves. A strip
+ * the drag has NOT reached gets no extra room: it never grows under the hand.
+ */
+export declare const STRIP_STAY = 9;
 export declare function bindDashboardGrid(api: DashboardGridApi, group: GroupModel, options?: DashboardGridOptions): DashboardGridHandle;

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

@@ -149,6 +149,16 @@ export function registerBoardPeer(container, peer) {
     };
 }
 const DRAG_THRESHOLD = 4;
+/**
+ * THE STRIP KEEPS THE HAND IT HAS (CSS px). A tab strip is ~30 px tall and
+ * the zone right under it moves the whole container out of the way, so at the
+ * seam a wobble of a pixel or two toggled a 90-px animated push — the user,
+ * aiming a widget at the tabs: "it's switching so fast between having it above
+ * the entire tab group or inside as a tab". Once a drag is over a strip, that
+ * strip's box counts as this much larger until the hand really leaves. A strip
+ * the drag has NOT reached gets no extra room: it never grows under the hand.
+ */
+export const STRIP_STAY = 9;
 /** The node a gesture holds — node-only paths (the pixel ghost, a resize, a strip drop, a removal) ask through this. */
 const nodeOf = (g) => g.entity;
 let binderSeq = 0;
@@ -697,6 +707,13 @@ export function bindDashboardGrid(api, group, options = {}) {
         if (!engine.getItem(id))
             return;
         engine.remove(id);
+        // THE LIVE BOUND FOLLOWS THE MEMBERS. A board that took rows from its
+        // parent to hold an arrival (D4) keeps that bound while the tile is here;
+        // when the tile leaves — an undo of the drop, a removal — the bound goes
+        // back to what the remaining tiles need, or the board stays a row taller
+        // than anything in it.
+        if (designRows !== undefined)
+            setLiveBound(liveBound(engine.getItems()));
         project();
         api.render();
     };
@@ -2158,17 +2175,45 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     /** What the pointer means for the dragged tile: the resolve over the live tree, with the beside the hand holds. */
     const resolveTileZone = (g, ev) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         let strip = null;
         if (options.tabDrop && !isStatic && g.kind !== 'palette' && g.subject === 'node') {
             // A group never becomes a tab: over a container's strip it is over the
             // container's margin — a cell on the parent board, pushing with intent.
             const crect = api.container.getBoundingClientRect();
-            strip = options.tabDrop.stripAt(crect.left + ev.screen.x, crect.top + ev.screen.y);
+            const cx = crect.left + ev.screen.x;
+            const cy = crect.top + ev.screen.y;
+            const stay = g.strip ? STRIP_STAY : 0;
+            // THE HELD CONTAINER'S STRIP IS READ FROM THE MODEL, AT REST — as its
+            // bands are (0.4.49). Two reasons, both measured on the live demo with
+            // a widget carried down the panel's strip: a beside SHIFTS or PUSHES the
+            // container and its strip travels with it, so tested where the DOM says
+            // it is, the tab zone runs away from the hand aiming at it (the tabs
+            // became unreachable at any height); and the DOM box GLIDES, so for a
+            // frame or two after the container is sent home the strip is still in
+            // the air and the hand falls through it.
+            const held = (_c = (_a = beside === null || beside === void 0 ? void 0 : beside.id) !== null && _a !== void 0 ? _a : (_b = g.strip) === null || _b === void 0 ? void 0 : _b.containerId) !== null && _c !== void 0 ? _c : null;
+            if (held && options.tabDrop.tabIndexAt) {
+                const grp = diagram.getGroup(held);
+                const f = beside && beside.id === held ? beside.frame0 : grp ? frameOfGroup(grp) : null;
+                if (f) {
+                    const s = clientPerWorld();
+                    const tol = stay / (s.y || 1);
+                    const inStrip = ev.world.x >= f.x - stay / (s.x || 1) &&
+                        ev.world.x <= f.x + f.width + stay / (s.x || 1) &&
+                        ev.world.y >= f.y - tol &&
+                        ev.world.y <= f.y + TAB_STRIP_HEIGHT + tol;
+                    const idx = inStrip ? options.tabDrop.tabIndexAt(held, cx) : null;
+                    if (idx !== null)
+                        strip = { containerId: held, index: idx };
+                }
+            }
+            if (!strip)
+                strip = options.tabDrop.stripAt(cx, cy, g.strip ? { containerId: g.strip.containerId, px: stay } : undefined);
         }
         return resolveZone(Object.assign(Object.assign({ x: ev.world.x, y: ev.world.y, roots: zoneRoots(), strip, prev: beside
                 ? { containerId: beside.id, side: beside.side, frame0: beside.frame0, vacated: cellToRect({ x: beside.vacated.x, y: beside.vacated.y, w: g.spans.w, h: g.spans.h }, frame(), geom(), rows()) }
-                : ((_b = (_a = g.leg) === null || _a === void 0 ? void 0 : _a.adopted.besideState()) !== null && _b !== void 0 ? _b : null), maxDepth: nesting, ghostDepth: g.subject === 'group' ? 1 + levelsInside(g.id) : 0 }, (g.subject === 'group' ? { restFrames: restFramesOf(g) } : {})), { ghostSubtree: g.subject === 'group' ? descendantGroups(g.id) : EMPTY_SUBTREE, gap, homeChain: homeChain() }));
+                : ((_e = (_d = g.leg) === null || _d === void 0 ? void 0 : _d.adopted.besideState()) !== null && _e !== void 0 ? _e : null), maxDepth: nesting, ghostDepth: g.subject === 'group' ? 1 + levelsInside(g.id) : 0 }, (g.subject === 'group' ? { restFrames: restFramesOf(g) } : {})), { ghostSubtree: g.subject === 'group' ? descendantGroups(g.id) : EMPTY_SUBTREE, gap, homeChain: homeChain() }));
     };
     /** This board's containers as they stood at the press: a group ghost's intent pushes never change what the hand means. */
     const restFramesOf = (g) => {
@@ -2220,6 +2265,14 @@ export function bindDashboardGrid(api, group, options = {}) {
         }
         return deepest;
     };
+    /** Client pixels per world unit — the camera's scale, measured the way the tear-out measures its bands. */
+    const clientPerWorld = () => {
+        const rect = api.container.getBoundingClientRect();
+        const toWorld = (cx, cy) => { var _a; return ((_a = api.viewport) === null || _a === void 0 ? void 0 : _a.clientToWorld) ? api.viewport.clientToWorld(cx, cy, rect) : { x: cx - rect.left, y: cy - rect.top }; };
+        const o = toWorld(rect.left, rect.top);
+        const u = toWorld(rect.left + 100, rect.top + 100);
+        return { x: 100 / (u.x - o.x || 100), y: 100 / (u.y - o.y || 100) };
+    };
     /** The groups this board sits in, all the way up: their bands never apply to a tile of this board. */
     const homeChain = () => {
         const out = new Set();
@@ -2394,9 +2447,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         const squeezeBefore = squeezeRoom;
         let entered = engine.add({ id: node.id, x: 0, y: engine.rows(), w: span.w, h: span.h });
         // Only a board with NO parent tile to grow through squeezes — a page. A
-        // full SECTION keeps refusing (grid-options s05: refused, then joined once
-        // a strip was removed); growing its slab for a dropped tile is the
-        // escalation path's, not a squeeze's, and is not built yet.
+        // full SECTION grows instead (D4, below): its height is a tile of its
+        // parent, and the parent is what has the rows to give.
         if (!entered && !parentPeer()) {
             const room = elasticRows();
             if (room !== undefined && room > ((_a = bound()) !== null && _a !== void 0 ? _a : 0)) {
@@ -2405,7 +2457,38 @@ export function bindDashboardGrid(api, group, options = {}) {
                 entered = engine.add({ id: node.id, x: 0, y: engine.rows(), w: span.w, h: span.h });
             }
         }
+        let grown = null;
+        const ungrow = () => {
+            const g = grown;
+            if (!g)
+                return;
+            g.peer.resizeMemberBy(group.id, -g.rows);
+            setLiveBound(Math.max(1, (maxRows !== null && maxRows !== void 0 ? maxRows : 1) - g.rows));
+            grown = null;
+        };
+        if (!entered && escalate) {
+            const parent = parentPeer();
+            let rowsAdded = 0;
+            let firstBefore = null;
+            let lastAfter = null;
+            // At most the tile's own height in rows: past that the board is not
+            // "full", it is smaller than the thing being dropped into it.
+            for (let i = 0; parent && !entered && i < Math.max(1, span.h); i++) {
+                const res = parent.resizeMemberBy(group.id, +1);
+                if (!res.changed || !res.cellBefore || !res.cellAfter || !res.frameBefore || !res.frameAfter)
+                    break;
+                rowsAdded += 1;
+                firstBefore = firstBefore !== null && firstBefore !== void 0 ? firstBefore : { cell: res.cellBefore, frame: res.frameBefore };
+                lastAfter = { cell: res.cellAfter, frame: res.frameAfter };
+                setLiveBound((maxRows !== null && maxRows !== void 0 ? maxRows : 0) + 1);
+                entered = engine.add({ id: node.id, x: 0, y: engine.rows(), w: span.w, h: span.h });
+            }
+            if (parent && rowsAdded > 0 && firstBefore && lastAfter) {
+                grown = { peer: parent, rows: rowsAdded, cellBefore: firstBefore.cell, frameBefore: firstBefore.frame, cellAfter: lastAfter.cell, frameAfter: lastAfter.frame };
+            }
+        }
         if (!entered) {
+            ungrow();
             setSqueeze(squeezeBefore);
             engine.endGesture();
             return null; // a bounded, full board refuses the adoption
@@ -2535,6 +2618,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 if (engine.getItem(node.id))
                     engine.remove(node.id);
                 engine.cancelGesture(); // pre-entry layout, memory cleared
+                ungrow(); // the rows this board took from its parent for the arrival go back (D4)
                 setSqueeze(squeezeBefore);
                 adoptedGhostId = null;
                 disarmGlideSoon();
@@ -2555,6 +2639,11 @@ export function bindDashboardGrid(api, group, options = {}) {
                 // Widgets AND sections this board's adoption displaced, as one list: a
                 // dock or a push that moved a section commits it with the drop.
                 const commands = tileCommands(deltasSince(startCells, startGeom, node.id));
+                // …and the rows this board took from its parent to hold the arrival (D4).
+                if (grown) {
+                    commands.push(new SetGroupCellCommand(group.id, grown.cellBefore, grown.cellAfter, grown.frameBefore, grown.frameAfter));
+                    grown = null;
+                }
                 engine.endGesture();
                 pendingDrop = node.id; // the tile stays for the member the commit (or the host's drop-in) adds
                 if (squeezeRoom !== undefined) {

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

@@ -1,6 +1,7 @@
 import { cellToRect, rowHeightFor, sizeToSpan } from './grid-mapping.js';
 import { BESIDE_BAND, resolveTabZone } from './zones.js';
 import { EDGE_GRACE } from './board-ctx.js';
+import { STRIP_STAY } from './grid-binder.js';
 /** A torn-out page never arrives shorter than this: a strip with no room under it is not a group. */
 export const TEAR_OUT_MIN_ROWS = 2;
 export function createTearOut(ctx, deps) {
@@ -278,8 +279,11 @@ export function createTearOut(ctx, deps) {
                 x: world.x,
                 y: world.y,
                 clientInside,
-                ownStrip: plan.stripIndex(fromGroupId, cx, cy),
-                stripOf: (id) => plan.stripIndex(id, cx, cy),
+                // A page dragged along its own strip, or over another's, keeps that
+                // strip through a small overshoot too (STRIP_STAY): the zone under a
+                // strip moves the container, and a pixel must not toggle it.
+                ownStrip: plan.stripIndex(fromGroupId, cx, cy, zone.kind === 'reorder' ? STRIP_STAY : 0),
+                stripOf: (id) => plan.stripIndex(id, cx, cy, zone.kind === 'strip' && zone.target.id === id ? STRIP_STAY : 0),
                 root: root && root.kind === 'root' ? { side: root.side } : null,
                 target: target
                     ? {