@grafloria/element 0.4.59 → 0.4.61

package/package.json

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

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

@@ -1067,35 +1067,6 @@ export function createDashboardHandle(ctx) {
         return [new RegisterWidgetCommand({ register: () => apply(after), unregister: () => apply(before) }, 'register')];
     };
     ctx.tabDrop = {
-        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 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))

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

@@ -581,28 +581,14 @@ 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. `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.
+     * no hit test. WHETHER the hand is on a strip at all is the zone walk's
+     * answer, from the container's frame in the model at rest: a strip element
+     * reports the box it is painted in, and a strip that has been pushed — or
+     * is gliding home from a push — is a box the hand never asked for.
      */
     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. */

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

@@ -56,7 +56,7 @@ import { buildCommitCommands, cellFromGridItem, cellToRect, columnUnitFor, gridI
 import { ensureDashboardKitStyles } from './styles.js';
 import { captionOfGroup, captionPassThrough, sectionCaptionReserve } from './caption.js';
 import { TAB_STRIP_HEIGHT } from './tabs.js';
-import { BESIDE_BAND, resolve as resolveZone } from './zones.js';
+import { BESIDE_BAND, resolve as resolveZone, stripUnder } from './zones.js';
 import { SequenceCommand, SetGroupCellCommand, tileCommands } from './commit.js';
 import { EDGE_GRACE } from './board-ctx.js';
 import { createProjection } from './project.js';
@@ -910,6 +910,52 @@ export function bindDashboardGrid(api, group, options = {}) {
      * come back by themselves when the widget leaves (S2).
      */
     let beside = null;
+    /**
+     * A VERTICAL BESIDE, HELD BUT NOT APPLIED (0.4.61). A container's top or
+     * bottom band pushes it a whole row along its own column — and the zone walk
+     * reads the container where it RESTS (0.4.60, which is what stopped the
+     * strip flickering), so the moment the push lands, the painted tabs sit a
+     * row below the only place that accepts them, and a hand following them down
+     * pushes them again. The user met it as "it pushes the entire tab group down
+     * and then I cannot go up to the tab header".
+     *
+     * So a vertical band moves NOTHING while the hand is held: an overlay marks
+     * the cell the widget will take and the container gives way on release — the
+     * rule a tab's dock and split previews have followed since 0.4.42. The LEFT
+     * and RIGHT bands keep their live slide (0.4.48): sideways, a full-width
+     * strip never leaves the hand, and the user missed that slide the one time
+     * it was frozen.
+     */
+    let pendingBeside = null;
+    let joinEl = null;
+    const showJoin = (r) => {
+        const layer = htmlLayer();
+        if (!layer)
+            return;
+        if (!joinEl || joinEl.parentElement !== layer) {
+            joinEl === null || joinEl === void 0 ? void 0 : joinEl.remove();
+            joinEl = document.createElement('div');
+            joinEl.className = 'axdb-join';
+            layer.prepend(joinEl);
+        }
+        joinEl.style.left = `${r.x}px`;
+        joinEl.style.top = `${r.y}px`;
+        joinEl.style.width = `${r.width}px`;
+        joinEl.style.height = `${r.height}px`;
+    };
+    const endPendingBeside = () => {
+        pendingBeside = null;
+        joinEl === null || joinEl === void 0 ? void 0 : joinEl.remove();
+        joinEl = null;
+    };
+    /** The cell a vertical beside would take: the container's own, or the row under it. Never the pointer's row — the container is not moving. */
+    const pendingCellOf = (containerId, side, spans) => {
+        const it = engine.getItem(containerId);
+        if (!it)
+            return null;
+        const x = Math.max(0, Math.min(engine.columns - spans.w, it.x));
+        return { x, y: side === 'top' ? it.y : it.y + it.h };
+    };
     const endBeside = (restore) => {
         if (!beside)
             return;
@@ -1292,6 +1338,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 showRefusal(null, 0, 0);
             }
         }
+        endPendingBeside();
         disarmGlideSoon();
         releasePointer(g.pointerId);
         api.container.style.cursor = '';
@@ -1335,6 +1382,7 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     const cancelActiveGesture = (notify = true) => {
         var _a, _b, _c;
+        endPendingBeside();
         if (gesture === null || gesture === void 0 ? void 0 : gesture.strip) {
             (_a = options.tabDrop) === null || _a === void 0 ? void 0 : _a.markDrop(null, null);
             gesture.strip = null;
@@ -1483,6 +1531,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             // -- INTO A STRIP: the widget becomes a new tab there, so it leaves
             // this board (survivors settle home) and the strip marks the slot.
             endBeside(true); // a band's shift gives way to the strip: the container comes back
+            endPendingBeside();
             leaveSelf();
             setDim(g, false);
             if (!g.strip || g.strip.containerId !== z.containerId || g.strip.index !== z.index) {
@@ -1501,6 +1550,22 @@ export function bindDashboardGrid(api, group, options = {}) {
         // — at the board's edge the container shifts over to make room, live
         // and gliding, like any widget gives way (0.4.48). On THIS board the
         // engine is driven directly; on another board its leg drives it (4a).
+        if (z.kind === 'beside' && !isStatic && z.board.ref === selfPeer && g.subject === 'node' && (z.side === 'top' || z.side === 'bottom')) {
+            // -- A VERTICAL BAND: marked, not applied. Nothing moves until release.
+            if (beside)
+                endBeside(true);
+            const cell = pendingCellOf(z.containerId, z.side, g.spans);
+            if (cell) {
+                leaveSelf();
+                setDim(g, false);
+                pendingBeside = { id: z.containerId, side: z.side, cell, spans: Object.assign({}, g.spans) };
+                showJoin(cellToRect({ x: cell.x, y: cell.y, w: g.spans.w, h: g.spans.h }, frame(), geom(), rows()));
+                syncPlaceholder();
+                return;
+            }
+        }
+        if (pendingBeside)
+            endPendingBeside(); // the hand left the band: the mark goes
         if (z.kind === 'beside' && !isStatic && z.board.ref === selfPeer) {
             const row = rowOfPoint(ev.world.y);
             if (!z.kept || !beside || beside.row !== row)
@@ -1955,6 +2020,13 @@ export function bindDashboardGrid(api, group, options = {}) {
             (_b = options.onGesture) === null || _b === void 0 ? void 0 : _b.call(options, { type: 'commit', kind: g.kind, nodeId: g.id, changed: true });
             return;
         }
+        if (pendingBeside) {
+            // -- REALIZED ON RELEASE: the container held still while the hand chose;
+            // now it gives way, and the commit below reads the settled layout.
+            const p = pendingBeside;
+            endPendingBeside();
+            applyBeside(g, { id: p.id, side: p.side }, p.cell.y);
+        }
         if (g.leg) {
             // -- CROSS-CONTAINER COMMIT: one batch across both boards -----------
             const fin = g.leg.adopted.finalize();
@@ -2176,46 +2248,57 @@ 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, _c, _d, _e;
+        const roots = zoneRoots();
+        // THE CONTAINERS THIS GESTURE HAS MOVED, at the frames they rest in. A
+        // drag's own pushes must never change what the hand means — settled for a
+        // group ghost in 0.4.44, and true of a widget for the same reason: the
+        // beside that a band previews SHOVES the container out from under the
+        // pointer, so read live it would answer about a container that is only
+        // there because of the answer.
+        const rests = restFramesOf(g);
         let strip = null;
-        if (options.tabDrop && !isStatic && g.kind !== 'palette' && g.subject === 'node') {
+        if (((_a = options.tabDrop) === null || _a === void 0 ? void 0 : _a.tabIndexAt) && !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();
-            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
+            const hit = stripUnder({ x: ev.world.x, y: ev.world.y, roots, held: (_c = (_b = g.strip) === null || _b === void 0 ? void 0 : _b.containerId) !== null && _c !== void 0 ? _c : null, stay: STRIP_STAY / (clientPerWorld().y || 1), restFrames: rests });
+            if (hit) {
+                // The SLOT is the painted strip's business — its tabs are laid out by
+                // the browser. A container the gesture shifted sideways is painted
+                // that far from where it was measured, so the client x is carried
+                // across with it.
+                const grp = diagram.getGroup(hit.containerId);
+                const rest = rests.get(hit.containerId);
+                const dx = grp && rest ? (grp.position.x - rest.x) * clientPerWorld().x : 0;
+                const idx = options.tabDrop.tabIndexAt(hit.containerId, api.container.getBoundingClientRect().left + ev.screen.x + dx);
+                if (idx !== null)
+                    strip = { containerId: hit.containerId, index: idx };
+            }
+        }
+        return resolveZone({
+            x: ev.world.x,
+            y: ev.world.y,
+            roots,
+            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()) }
-                : ((_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() }));
+                : pendingBeside
+                    ? // a VERTICAL band the hand holds: the container never moved, so its own frame is the sticky one
+                        {
+                            containerId: pendingBeside.id,
+                            side: pendingBeside.side,
+                            frame0: (() => { const grp = diagram.getGroup(pendingBeside.id); return grp ? frameOfGroup(grp) : cellToRect({ x: pendingBeside.cell.x, y: pendingBeside.cell.y, w: pendingBeside.spans.w, h: pendingBeside.spans.h }, frame(), geom(), rows()); })(),
+                            vacated: cellToRect({ x: pendingBeside.cell.x, y: pendingBeside.cell.y, w: pendingBeside.spans.w, h: pendingBeside.spans.h }, frame(), geom(), rows()),
+                        }
+                    : ((_e = (_d = g.leg) === null || _d === void 0 ? void 0 : _d.adopted.besideState()) !== null && _e !== void 0 ? _e : null), // a beside another board holds for the ghost, through its leg
+            maxDepth: nesting,
+            ghostDepth: g.subject === 'group' ? 1 + levelsInside(g.id) : 0, // a group's widgets sit one board deeper than wherever it lands
+            restFrames: rests,
+            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. */
+    /** This board's containers as they stood at the press: a gesture's own pushes never change what the hand means. */
     const restFramesOf = (g) => {
         const out = new Map();
         for (const [id, snap] of g.startGeom) {
@@ -3203,6 +3286,13 @@ export function bindDashboardGrid(api, group, options = {}) {
                 chip === null || chip === void 0 ? void 0 : chip.remove();
                 return;
             }
+            if (commit && pendingBeside) {
+                const p = pendingBeside;
+                endPendingBeside();
+                applyBeside(g, { id: p.id, side: p.side }, p.cell.y);
+            }
+            else
+                endPendingBeside();
             if (commit && g.leg) {
                 // Dropped into another board (a page, a section): its leg closes with
                 // that board's displaced tiles; this board displaced nothing.

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

@@ -21,6 +21,10 @@
  * descendant). The strip rows of a tab container are nobody's band, and its
  * margin (inside the frame, outside the page) is a plain cell on the parent.
  *
+ * `stripUnder` walks the same tree for the strip itself, so a tab slot and a
+ * band are decided on one set of frames — the ones the containers REST in,
+ * never the ones a preview pushed them to.
+ *
  * This module is pure geometry: no DOM, no engine, no model. The binder
  * builds the tree for each move from its peers and the model, and acts on
  * the answer.
@@ -89,13 +93,13 @@ export interface ResolveInput {
      */
     homeChain: ReadonlySet<string>;
     /**
-     * Containers of the source board as they stood when the gesture began (a
-     * GROUP ghost pushes solids with intent, 0.4.44). The hand over a pushed
-     * container's rest frame still means that container — its zones, its
-     * page tested at the displacement — or a group could never enter a
-     * container its own body reaches before the hand does: the target fled.
-     * The engine's memory brings the pushed container home when the ghost
-     * leaves the board.
+     * Containers of the source board as they stood when the gesture began. The
+     * hand over a pushed container's rest frame still means that container —
+     * its zones, its page tested at the displacement — or the target flees the
+     * hand that is aiming at it: a group could never enter a container its own
+     * body reaches first (0.4.44), and a widget aimed at a tab strip chased a
+     * strip its own preview kept shoving away (0.4.60). The engine's memory
+     * brings the pushed container home when the ghost leaves the board.
      */
     restFrames?: ReadonlyMap<string, ZoneRect>;
 }
@@ -127,6 +131,37 @@ export declare const BESIDE_STAY = 0.05;
  * to its far right means "after it", not "above it".
  */
 export declare function bandOf(f: ZoneRect, stripHeight: number, x: number, y: number, band?: number): BesideSide | null;
+export interface StripProbe {
+    x: number;
+    y: number;
+    roots: ZoneBoard[];
+    /** The container whose strip the gesture already holds: its rows are widened by `stay`, and it wins over a neighbour's. */
+    held: string | null;
+    /** The stickiness around the held strip, in world units. */
+    stay: number;
+    /** Containers the gesture has displaced, at the frames they rest in. */
+    restFrames?: ReadonlyMap<string, ZoneRect>;
+}
+/**
+ * The tab strip under a pointer — WHERE THE CONTAINER RESTS, read from the
+ * same tree at the same frames as `resolve`.
+ *
+ * A strip is painted at the top of its container, so it travels with it: a
+ * beside shifts the container, a refusal pushes it, and it GLIDES home
+ * afterwards. Hit-testing the painted box therefore makes the strip a target
+ * at wherever the preview happened to put it — and a box in the air sweeps
+ * under a hand that is not moving at all and steals the zone. That is a
+ * closed loop: the tab claims the hand, the container comes home, the band
+ * under the hand claims it back, the container is pushed away, and the strip
+ * flies through the pointer again. The user met it as "it flickers between a
+ * tab and above the group; I have to go very slowly".
+ *
+ * So the rows are the container's own, at rest, on the model's frames. What
+ * a hand means never depends on what the preview did with it.
+ */
+export declare function stripUnder(p: StripProbe): {
+    containerId: string;
+} | null;
 export declare function resolve(input: ResolveInput): Zone;
 /** A join target as the walk sees it: another tab container, its frame anchored by the binder while the pointer is inside it. */
 export interface TabTarget {

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

@@ -21,6 +21,10 @@
  * descendant). The strip rows of a tab container are nobody's band, and its
  * margin (inside the frame, outside the page) is a plain cell on the parent.
  *
+ * `stripUnder` walks the same tree for the strip itself, so a tab slot and a
+ * band are decided on one set of frames — the ones the containers REST in,
+ * never the ones a preview pushed them to.
+ *
  * This module is pure geometry: no DOM, no engine, no model. The binder
  * builds the tree for each move from its peers and the model, and acts on
  * the answer.
@@ -55,6 +59,55 @@ export function bandOf(f, stripHeight, x, y, band = BESIDE_BAND) {
         return 'bottom';
     return null;
 }
+/**
+ * The tab strip under a pointer — WHERE THE CONTAINER RESTS, read from the
+ * same tree at the same frames as `resolve`.
+ *
+ * A strip is painted at the top of its container, so it travels with it: a
+ * beside shifts the container, a refusal pushes it, and it GLIDES home
+ * afterwards. Hit-testing the painted box therefore makes the strip a target
+ * at wherever the preview happened to put it — and a box in the air sweeps
+ * under a hand that is not moving at all and steals the zone. That is a
+ * closed loop: the tab claims the hand, the container comes home, the band
+ * under the hand claims it back, the container is pushed away, and the strip
+ * flies through the pointer again. The user met it as "it flickers between a
+ * tab and above the group; I have to go very slowly".
+ *
+ * So the rows are the container's own, at rest, on the model's frames. What
+ * a hand means never depends on what the preview did with it.
+ */
+export function stripUnder(p) {
+    const { x, y } = p;
+    // Plain locals, not one object: a `let` assigned only inside the closure
+    // narrows to `never` at the return.
+    let bestId = null;
+    let bestDepth = -1;
+    let bestHeld = false;
+    const visit = (b, dx, dy) => {
+        var _a;
+        for (const c of b.children()) {
+            const rest = (_a = p.restFrames) === null || _a === void 0 ? void 0 : _a.get(c.id);
+            const atRest = rest && inRect(rest, x, y) ? rest : null;
+            const frame = atRest !== null && atRest !== void 0 ? atRest : c.frame;
+            const tx = atRest ? x : x + dx;
+            const ty = atRest ? y : y + dy;
+            const held = c.id === p.held;
+            const pad = held ? p.stay : 0;
+            if (c.stripHeight > 0 && inRect({ x: frame.x, y: frame.y, width: frame.width, height: c.stripHeight }, tx, ty, pad)) {
+                if (bestId === null || held || (!bestHeld && b.depth >= bestDepth)) {
+                    bestId = c.id;
+                    bestDepth = b.depth;
+                    bestHeld = held;
+                }
+            }
+            if (c.inner && inRect(frame, tx, ty, pad))
+                visit(c.inner, atRest ? c.frame.x - atRest.x : dx, atRest ? c.frame.y - atRest.y : dy);
+        }
+    };
+    for (const r of p.roots)
+        visit(r, 0, 0);
+    return bestId === null ? null : { containerId: bestId };
+}
 /** The board a container sits on, found by id through the tree. */
 function boardOf(roots, containerId) {
     const visit = (b) => {