@grafloria/element 0.4.58 → 0.4.60

package/package.json

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

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

@@ -1067,15 +1067,11 @@ export function createDashboardHandle(ctx) {
         return [new RegisterWidgetCommand({ register: () => apply(after), unregister: () => apply(before) }, 'register')];
     };
     ctx.tabDrop = {
-        stripAt: (cx, cy) => {
-            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) };
-            }
-            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 +1207,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,16 @@ 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): {
-        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. 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. */
     dropIntoStrip(widgetId: string, containerId: string, index: number, sourceBoardId: string, displaced: Command[]): Command[];
 }
@@ -680,4 +683,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

@@ -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';
@@ -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;
@@ -2165,19 +2175,50 @@ 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;
+        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();
-            strip = options.tabDrop.stripAt(crect.left + ev.screen.x, crect.top + ev.screen.y);
+            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(Object.assign(Object.assign({ x: ev.world.x, y: ev.world.y, roots: zoneRoots(), strip, prev: beside
+        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()) }
-                : ((_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), // 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) {
@@ -2227,6 +2268,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();

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
                     ? {

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) => {