@grafloria/element 0.4.58 → 0.4.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.4.58",
+  "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;
@@ -2165,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) => {
@@ -2227,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();

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