@grafloria/element 0.4.68 → 0.4.69

package/package.json

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

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

@@ -52,7 +52,7 @@
 import { Command, type DiagramModel, type GridColumnLayout, type GroupModel, type NodeModel } from '@grafloria/engine';
 import { type ToolPointerEvent } from '@grafloria/renderer';
 import { type CellRect, type WorldRect } from './grid-mapping.js';
-import { type BesideSide } from './zones.js';
+import { type BesideSide, type ZoneBoard } from './zones.js';
 import { type ResizeEdges } from './edges.js';
 import { type DragHandleOption } from './grip.js';
 export { TEAR_OUT_MIN_ROWS } from './tear-out.js';
@@ -683,6 +683,24 @@ 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 peers registered on a canvas (the set is created on first ask): the boards the zone walk sees. */
+export declare function peersOnCanvasOf(container: HTMLElement): Set<BinderPeer>;
+/** Client pixels per world unit on a canvas: a zoomed camera makes a 9 px stay fewer world units. */
+export declare function clientPerWorldOf(api: Pick<DashboardGridApi, 'container' | 'viewport'>): {
+    x: number;
+    y: number;
+};
+/**
+ * The boards of a canvas as the zone walk sees them (tile first, step 2): a
+ * ROOT is a board whose group has no parent group (a view); a board's children
+ * are its member groups that are containers, each with the board a descent
+ * enters — a tab container's ACTIVE page, a section's own board — one level
+ * deeper. Built from the peers and the model on every move: a handful of
+ * groups, and the frames are live. One builder for the grid AND the split
+ * board (0.4.69): what a hand means over a tab group must not depend on which
+ * layout the board under it runs.
+ */
+export declare function zoneRootsOf(peers: Iterable<BinderPeer>, diagram: DiagramModel): ZoneBoard[];
 /**
  * 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

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, stripUnder } from './zones.js';
+import { BESIDE_BAND, resolve as resolveZone, stripCrossing, stripUnder } from './zones.js';
 import { SequenceCommand, SetGroupCellCommand, tileCommands } from './commit.js';
 import { EDGE_GRACE } from './board-ctx.js';
 import { createProjection } from './project.js';
@@ -148,6 +148,84 @@ export function registerBoardPeer(container, peer) {
         s.delete(peer);
     };
 }
+/** The peers registered on a canvas (the set is created on first ask): the boards the zone walk sees. */
+export function peersOnCanvasOf(container) {
+    let set = BOARD_REGISTRY.get(container);
+    if (!set) {
+        set = new Set();
+        BOARD_REGISTRY.set(container, set);
+    }
+    return set;
+}
+/** Client pixels per world unit on a canvas: a zoomed camera makes a 9 px stay fewer world units. */
+export function clientPerWorldOf(api) {
+    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 boards of a canvas as the zone walk sees them (tile first, step 2): a
+ * ROOT is a board whose group has no parent group (a view); a board's children
+ * are its member groups that are containers, each with the board a descent
+ * enters — a tab container's ACTIVE page, a section's own board — one level
+ * deeper. Built from the peers and the model on every move: a handful of
+ * groups, and the frames are live. One builder for the grid AND the split
+ * board (0.4.69): what a hand means over a tab group must not depend on which
+ * layout the board under it runs.
+ */
+export function zoneRootsOf(peers, diagram) {
+    const list = [...peers];
+    const byGroup = new Map(list.map((p) => [p.group.id, p]));
+    const frameOf = (grp) => { var _a, _b, _c, _d; return ({ x: grp.position.x, y: grp.position.y, width: (_b = (_a = grp.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0, height: (_d = (_c = grp.size) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0 }); };
+    const boardRef = (p, depth) => ({
+        id: p.group.id,
+        depth,
+        ref: p,
+        contains: (x, y) => p.containsWorld(x, y),
+        containsExtended: (x, y) => p.containsWorldExtended(x, y),
+        children: () => {
+            var _a, _b, _c, _d, _e;
+            const out = [];
+            for (const id of (_a = p.group.members) !== null && _a !== void 0 ? _a : []) {
+                const grp = diagram.getGroup(id);
+                if (!grp || diagram.getNode(id))
+                    continue;
+                const cw = ((_b = grp.getMetadata('containerWidget')) !== null && _b !== void 0 ? _b : {});
+                const layout = cw.layout === 'tabs' ? 'tabs' : cw.layout === 'split' ? 'split' : 'grid';
+                let innerPeer;
+                if (layout === 'tabs') {
+                    const pageId = cw.active && byGroup.has(cw.active) ? cw.active : [...((_c = grp.members) !== null && _c !== void 0 ? _c : [])].find((m) => byGroup.has(m));
+                    innerPeer = pageId ? byGroup.get(pageId) : undefined;
+                }
+                else
+                    innerPeer = byGroup.get(id);
+                out.push({
+                    id,
+                    layout,
+                    static: (_e = (_d = innerPeer === null || innerPeer === void 0 ? void 0 : innerPeer.isStatic) === null || _d === void 0 ? void 0 : _d.call(innerPeer)) !== null && _e !== void 0 ? _e : false,
+                    frame: frameOf(grp),
+                    stripHeight: layout === 'tabs' ? TAB_STRIP_HEIGHT : 0,
+                    band: layout === 'tabs' ? BESIDE_BAND : 0, // a section's whole body is "into" (Quantia's Groups page)
+                    // The top and bottom are a FIXED depth — one strip's worth, under
+                    // the strip — not a fifth of the body, which grew with the panel
+                    // until 216 px of the fluid demo's page meant "above the whole
+                    // panel" (0.4.62). The sides keep the fifth.
+                    bandY: layout === 'tabs' ? TAB_STRIP_HEIGHT : 0,
+                    // …and the TOP band hangs ABOVE the frame, where a hand looking
+                    // for "above this panel" actually goes (0.4.65). A panel holding
+                    // the board's first row has no row above it to point at, and the
+                    // lane under its header is the last place anyone would try.
+                    topOutside: layout === 'tabs' ? TAB_STRIP_HEIGHT : 0,
+                    inner: innerPeer ? boardRef(innerPeer, depth + 1) : null,
+                });
+            }
+            return out;
+        },
+    });
+    return list.filter((p) => !p.group.parentGroupId).map((p) => boardRef(p, 0));
+}
 const DRAG_THRESHOLD = 4;
 /**
  * THE STRIP KEEPS THE HAND IT HAS (CSS px). A tab strip is ~30 px tall and
@@ -2081,72 +2159,9 @@ export function bindDashboardGrid(api, group, options = {}) {
         const f = frame();
         return f.width * boardVisualHeight();
     };
-    const peersOnCanvas = () => {
-        let set = BOARD_REGISTRY.get(api.container);
-        if (!set) {
-            set = new Set();
-            BOARD_REGISTRY.set(api.container, set);
-        }
-        return set;
-    };
-    /**
-     * The boards of this canvas as the zone walk sees them (tile first, step
-     * 2): a ROOT is a board whose group has no parent group (a view); a board's
-     * children are its member groups that are containers, each with the board a
-     * descent enters — a tab container's ACTIVE page, a section's own board —
-     * one level deeper. Built from the peers and the model on every move: a
-     * handful of groups, and the frames are live.
-     */
-    const zoneRoots = () => {
-        const peers = [...peersOnCanvas()];
-        const byGroup = new Map(peers.map((p) => [p.group.id, p]));
-        const boardRef = (p, depth) => ({
-            id: p.group.id,
-            depth,
-            ref: p,
-            contains: (x, y) => p.containsWorld(x, y),
-            containsExtended: (x, y) => p.containsWorldExtended(x, y),
-            children: () => {
-                var _a, _b, _c, _d, _e;
-                const out = [];
-                for (const id of (_a = p.group.members) !== null && _a !== void 0 ? _a : []) {
-                    const grp = diagram.getGroup(id);
-                    if (!grp || diagram.getNode(id))
-                        continue;
-                    const cw = ((_b = grp.getMetadata('containerWidget')) !== null && _b !== void 0 ? _b : {});
-                    const layout = cw.layout === 'tabs' ? 'tabs' : cw.layout === 'split' ? 'split' : 'grid';
-                    let innerPeer;
-                    if (layout === 'tabs') {
-                        const pageId = cw.active && byGroup.has(cw.active) ? cw.active : [...((_c = grp.members) !== null && _c !== void 0 ? _c : [])].find((m) => byGroup.has(m));
-                        innerPeer = pageId ? byGroup.get(pageId) : undefined;
-                    }
-                    else
-                        innerPeer = byGroup.get(id);
-                    out.push({
-                        id,
-                        layout,
-                        static: (_e = (_d = innerPeer === null || innerPeer === void 0 ? void 0 : innerPeer.isStatic) === null || _d === void 0 ? void 0 : _d.call(innerPeer)) !== null && _e !== void 0 ? _e : false,
-                        frame: frameOfGroup(grp),
-                        stripHeight: layout === 'tabs' ? TAB_STRIP_HEIGHT : 0,
-                        band: layout === 'tabs' ? BESIDE_BAND : 0, // a section's whole body is "into" (Quantia's Groups page)
-                        // The top and bottom are a FIXED depth — one strip's worth, under
-                        // the strip — not a fifth of the body, which grew with the panel
-                        // until 216 px of the fluid demo's page meant "above the whole
-                        // panel" (0.4.62). The sides keep the fifth.
-                        bandY: layout === 'tabs' ? TAB_STRIP_HEIGHT : 0,
-                        // …and the TOP band hangs ABOVE the frame, where a hand looking
-                        // for "above this panel" actually goes (0.4.65). A panel holding
-                        // the board's first row has no row above it to point at, and the
-                        // lane under its header is the last place anyone would try.
-                        topOutside: layout === 'tabs' ? TAB_STRIP_HEIGHT : 0,
-                        inner: innerPeer ? boardRef(innerPeer, depth + 1) : null,
-                    });
-                }
-                return out;
-            },
-        });
-        return peers.filter((p) => !p.group.parentGroupId).map((p) => boardRef(p, 0));
-    };
+    const peersOnCanvas = () => peersOnCanvasOf(api.container);
+    /** The boards of this canvas as the zone walk sees them — see `zoneRootsOf`. */
+    const zoneRoots = () => zoneRootsOf(peersOnCanvas(), diagram);
     /** The ghost takes the cell under the hand on THIS board: re-entering at the bottom edge first (collision-free), then gatelessly; a tile already here moves through the gate. */
     const placeOnSelf = (g, desired, pushSolid = false) => {
         var _a, _b;
@@ -2198,7 +2213,7 @@ 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, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f;
         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
@@ -2212,44 +2227,8 @@ export function bindDashboardGrid(api, group, options = {}) {
             // 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 scaleY = clientPerWorld().y || 1;
-            let 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 / scaleY, restFrames: rests });
-            if (!hit && prevWorld && !g.strip) {
-                // A HAND MOVES FASTER THAN A STRIP IS TALL. (Only for a hand ARRIVING:
-                // one already holding the strip leaves it by the stay, which reaches
-                // down and never up — the band above must stay reachable.) The strip is 30 px and a
-                // hand covers 40 to 80 px between events, so testing only where the
-                // pointer LANDS skips it — the user, coming down from above the panel:
-                // "it's not passing by the tab header, it drops directly to inside or
-                // outside." The segment it travelled is tested too, in steps of half a
-                // strip: crossing the rows and landing within one strip's height of
-                // them means the tabs. Flying far past them does not — a fast drag
-                // into the page must never snag on the header.
-                const dx = ev.world.x - prevWorld.x;
-                const dy = ev.world.y - prevWorld.y;
-                const n = Math.ceil(Math.hypot(dx, dy) / (TAB_STRIP_HEIGHT / 2));
-                let crossed = null;
-                for (let i = 1; i < n && !crossed; i++)
-                    crossed = (_e = (_d = stripUnder({ x: prevWorld.x + (dx * i) / n, y: prevWorld.y + (dy * i) / n, roots, held: null, stay: 0, restFrames: rests })) === null || _d === void 0 ? void 0 : _d.containerId) !== null && _e !== void 0 ? _e : null;
-                if (crossed) {
-                    const grp = diagram.getGroup(crossed);
-                    const f = (_f = rests.get(crossed)) !== null && _f !== void 0 ? _f : (grp ? frameOfGroup(grp) : null);
-                    if (f) {
-                        const top = f.y;
-                        const bottom = f.y + TAB_STRIP_HEIGHT;
-                        // A CROSSING is the two events on OPPOSITE sides of the rows — a
-                        // hand that swept along the tabs from beside the panel and ended
-                        // above it did not cross them, it went past them. And the sides
-                        // still take the corners (0.4.47): a hand landing in the outer
-                        // fifth meant "after it", whatever it crossed on the way.
-                        const through = (prevWorld.y < top && ev.world.y > bottom) || (prevWorld.y > bottom && ev.world.y < top);
-                        const away = ev.world.y < top ? top - ev.world.y : ev.world.y > bottom ? ev.world.y - bottom : 0;
-                        const rx = (ev.world.x - f.x) / Math.max(1, f.width);
-                        const inSideBand = rx < BESIDE_BAND || rx > 1 - BESIDE_BAND;
-                        if (through && !inSideBand && ev.world.x >= f.x && ev.world.x <= f.x + f.width && away <= TAB_STRIP_HEIGHT / scaleY)
-                            hit = { containerId: crossed };
-                    }
-                }
-            }
+            // …and the segment the hand TRAVELLED, for a hand arriving faster than a strip is tall (0.4.67; `stripCrossing`).
+            const hit = (_d = 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 / scaleY, restFrames: rests })) !== null && _d !== void 0 ? _d : (prevWorld && !g.strip ? stripCrossing({ prev: prevWorld, cur: ev.world, roots, restFrames: rests, stripHeight: TAB_STRIP_HEIGHT, band: BESIDE_BAND, reach: TAB_STRIP_HEIGHT / scaleY }) : null);
             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
@@ -2270,7 +2249,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             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()) }
-                : ((_h = (_g = g.leg) === null || _g === void 0 ? void 0 : _g.adopted.besideState()) !== null && _h !== void 0 ? _h : null), // a beside another board holds for the ghost, through its leg
+                : ((_f = (_e = g.leg) === null || _e === void 0 ? void 0 : _e.adopted.besideState()) !== null && _f !== void 0 ? _f : 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,
@@ -2330,13 +2309,7 @@ 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) };
-    };
+    const clientPerWorld = () => clientPerWorldOf(api);
     /** 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/split-binder.d.ts

@@ -27,7 +27,7 @@ import type { DashboardGridApi, DashboardGridHandle, DashboardGridOptions } from
 import { type SplitNode } from './split-layout.js';
 /** Group metadata key the tree persists under. */
 export declare const SPLIT_TREE_KEY = "dashboardTree";
-export interface DashboardSplitOptions extends Pick<DashboardGridOptions, 'columns' | 'gap' | 'padding' | 'rtl' | 'fluid' | 'static' | 'dragHandle' | 'squeeze' | 'designHeight' | 'baseRowHeight' | 'dragOut' | 'removeZone' | 'onRemoveRequest' | 'onDropIn' | 'onGesture' | 'onSelect' | 'renderCaption' | 'onCaptionAction'> {
+export interface DashboardSplitOptions extends Pick<DashboardGridOptions, 'columns' | 'gap' | 'padding' | 'rtl' | 'fluid' | 'static' | 'dragHandle' | 'squeeze' | 'designHeight' | 'baseRowHeight' | 'dragOut' | 'removeZone' | 'onRemoveRequest' | 'onDropIn' | 'tabDrop' | 'onMemberLeaving' | 'nesting' | 'onGesture' | 'onSelect' | 'renderCaption' | 'onCaptionAction'> {
     /** An authored tree. Default: the persisted one, else derived from the members' cells. */
     tree?: SplitNode | null;
 }

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

@@ -23,11 +23,13 @@
  * the authored size.
  */
 import { __awaiter } from "tslib";
-import { BESIDE_BAND, resolveTabZone } from './zones.js';
-import { BatchCommand, Command } from '@grafloria/engine';
+import { BESIDE_BAND, resolveTabZone, resolve as resolveZone, stripCrossing, stripUnder } from './zones.js';
+import { AddToGroupCommand, BatchCommand, Command, RemoveFromGroupCommand } from '@grafloria/engine';
 import { LiveRegionController, registerTool } from '@grafloria/renderer';
-import { anyEdge, clearOtherSelections, dragHandleSelector, gripHostOf, gripOf, normalizeDragHandle, ownsPress, parentPeerOf, pressOnDragHandle, registerBoardPeer, syncGrip, DRAG_HANDLE_CLASS, EDGE_GRIP } from './grid-binder.js';
-import { cellFromGridItem } from './grid-mapping.js';
+import { anyEdge, clearOtherSelections, clientPerWorldOf, dragHandleSelector, gripHostOf, gripOf, normalizeDragHandle, ownsPress, parentPeerOf, peersOnCanvasOf, pressOnDragHandle, registerBoardPeer, syncGrip, zoneRootsOf, DRAG_HANDLE_CLASS, EDGE_GRIP, STRIP_STAY } from './grid-binder.js';
+import { buildCommitCommands, cellFromGridItem } from './grid-mapping.js';
+import { SequenceCommand } from './commit.js';
+import { TAB_STRIP_HEIGHT } from './tabs.js';
 import { addSplitLeaf, cellsFromSplit, cloneSplit, dividersOf, groupRectsOf, insertSplitLeaf, moveSplitDivider, normalizeSplit, pathToLeaf, projectSplit, removeSplitLeaf, splitFromCells, splitLeaves, } from './split-layout.js';
 import { ensureDashboardKitStyles } from './styles.js';
 import { captionKey, captionOfGroup, captionPainted, paintCaptionBand, sectionCaptionReserve, sizeCaptionBand } from './caption.js';
@@ -509,6 +511,75 @@ export function bindDashboardSplit(api, group, options = {}) {
         const f = frame();
         return x >= f.x && x <= f.x + f.width && y >= f.y && y <= f.y + f.height;
     };
+    // -- the tab-group zones on a split board (0.4.69) ----------------------------
+    const frameOfGroupW = (grp) => { var _a, _b, _c, _d; return ({ x: grp.position.x, y: grp.position.y, width: (_b = (_a = grp.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0, height: (_d = (_c = grp.size) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0 }); };
+    const EMPTY_SUBTREE = new Set();
+    /** This board's group and its ancestors: a container's band never applies to a widget that lives inside it. */
+    const homeChain = () => {
+        const out = new Set();
+        let cur = group;
+        for (let i = 0; cur && i < 32; i++) {
+            out.add(cur.id);
+            cur = cur.parentGroupId ? diagram.getGroup(cur.parentGroupId) : undefined;
+        }
+        return out;
+    };
+    /**
+     * The zone under the hand for a widget of this board — the SAME walk the
+     * grid board runs (zones.ts), over the same tree of boards: a strip slot
+     * (with the crossing rule for a hand arriving faster than a strip is
+     * tall), a band beside a container, a plain cell on the deepest board the
+     * pointer may enter, or off. Nothing on a split board is pushed, so no
+     * container is read at rest.
+     */
+    const tileZone = (g, ev, prev) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const roots = zoneRootsOf(peersOnCanvasOf(api.container), diagram);
+        let strip = null;
+        if (((_a = options.tabDrop) === null || _a === void 0 ? void 0 : _a.tabIndexAt) && !isStatic && g.kind === 'move' && g.node) {
+            const scaleY = clientPerWorldOf(api).y || 1;
+            const hit = (_d = 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 / scaleY })) !== null && _d !== void 0 ? _d : (prev && !g.strip ? stripCrossing({ prev, cur: ev.world, roots, stripHeight: TAB_STRIP_HEIGHT, band: BESIDE_BAND, reach: TAB_STRIP_HEIGHT / scaleY }) : null);
+            if (hit) {
+                const idx = options.tabDrop.tabIndexAt(hit.containerId, api.container.getBoundingClientRect().left + ev.screen.x);
+                if (idx !== null)
+                    strip = { containerId: hit.containerId, index: idx };
+            }
+        }
+        return resolveZone({
+            x: ev.world.x,
+            y: ev.world.y,
+            roots,
+            strip,
+            prev: (_g = (_e = g.beside) !== null && _e !== void 0 ? _e : (_f = g.leg) === null || _f === void 0 ? void 0 : _f.adopted.besideState()) !== null && _g !== void 0 ? _g : null,
+            maxDepth: (_h = options.nesting) !== null && _h !== void 0 ? _h : 2,
+            ghostDepth: 0,
+            ghostSubtree: EMPTY_SUBTREE,
+            gap,
+            homeChain: homeChain(),
+        });
+    };
+    /** The widget's NATURAL size for a board that adopts it: its authored cell at this board's units, not the pane it was stretched over. */
+    const pxSizeOf = (g) => {
+        const cell = persistedCell(g.id);
+        const f = frame();
+        const colW = Math.max(1, (f.width - 2 * padding - (columns - 1) * gap) / columns);
+        if (cell)
+            return { width: Math.max(1, cell.w * (colW + gap) - gap), height: Math.max(1, cell.h * (baseRowHeight + gap) - gap) };
+        return g.node ? { width: g.node.size.width, height: g.node.size.height } : { width: colW, height: baseRowHeight };
+    };
+    const endStrip = (g) => {
+        var _a;
+        if (!g.strip)
+            return;
+        (_a = options.tabDrop) === null || _a === void 0 ? void 0 : _a.markDrop(null, null);
+        g.strip = null;
+    };
+    const endLeg = (g) => {
+        if (!g.leg)
+            return;
+        g.leg.adopted.abort();
+        g.leg = null;
+    };
     // -- a11y -------------------------------------------------------------------
     const nameOf = (id) => {
         var _a, _b, _c, _d;
@@ -543,6 +614,8 @@ export function bindDashboardSplit(api, group, options = {}) {
         (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id);
     };
     let selfPeerRef = null;
+    /** The previous move event's world point: the segment a hand travelled, for a strip it stepped over. */
+    let prevWorld = null;
     // Static boards let content be clicked — see grid-binder's staticGuard.
     const staticGuard = (e) => {
         var _a, _b, _c, _d;
@@ -679,6 +752,7 @@ export function bindDashboardSplit(api, group, options = {}) {
     const beginMoveVisuals = (g) => {
         var _a;
         g.started = true;
+        prevWorld = null;
         g.liveTree = removeSplitLeaf(g.startTree, g.id); // the siblings take the slot at once
         g.hostEl = hostOf(g.id);
         (_a = g.hostEl) === null || _a === void 0 ? void 0 : _a.classList.add('axdb-ghost');
@@ -686,7 +760,7 @@ export function bindDashboardSplit(api, group, options = {}) {
         api.render();
     };
     const onToolMove = (ev) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         const g = gesture;
         if (!g || g.kind === 'palette')
             return;
@@ -711,24 +785,83 @@ export function bindDashboardSplit(api, group, options = {}) {
             api.render();
             return;
         }
-        // MOVE: the ghost follows the pointer; the target is the nearest edge under it.
+        // MOVE: the ghost follows the pointer. What the hand means is the ZONE
+        // WALK's answer first (0.4.69, the grid board's since 0.4.50): a tab
+        // container's strip makes the widget a tab, its page takes the widget
+        // through a leg, its outer fifth means a pane beside it — and only then
+        // the split board's own rule, the nearest edge of the pane under the
+        // pointer. Measured before this on the fluid demo in split mode: the
+        // header was never a tab target, the page never took a widget, and
+        // "above" claimed the upper half of the panel's body.
         if (g.node) {
             const x = ev.world.x - g.grab.dx;
             const y = ev.world.y - g.grab.dy;
             diagram.runSystemWrite(() => g.node.setPosition(x, y));
         }
         const inside = worldInsideBoard(ev.world.x, ev.world.y);
-        const t = inside ? dropTargetAt(g.liveTree, ev.world.x, ev.world.y, g.id) : null;
+        const prev = prevWorld;
+        prevWorld = { x: ev.world.x, y: ev.world.y };
+        const z = tileZone(g, ev, prev);
+        let t = null;
+        if (z.kind === 'strip') {
+            // -- INTO A STRIP: the strip marks the slot; nothing else is painted.
+            endLeg(g);
+            g.beside = null;
+            if (!g.strip || g.strip.containerId !== z.containerId || g.strip.index !== z.index)
+                (_b = options.tabDrop) === null || _b === void 0 ? void 0 : _b.markDrop(z.containerId, z.index);
+            g.strip = { containerId: z.containerId, index: z.index };
+        }
+        else {
+            endStrip(g);
+            const peer = z.kind === 'plain' ? (_c = z.board.ref) !== null && _c !== void 0 ? _c : null : null;
+            if (z.kind === 'beside') {
+                // -- BESIDE a container: a pane on that side of it — the split board's own line.
+                endLeg(g);
+                const grp = diagram.getGroup(z.containerId);
+                const rect = (_d = rectsOf(g.liveTree).get(z.containerId)) !== null && _d !== void 0 ? _d : (grp ? frameOfGroupW(grp) : null);
+                if (rect) {
+                    g.beside = z.kept && g.beside ? g.beside : { containerId: z.containerId, side: z.side, frame0: rect };
+                    t = { id: z.containerId, side: z.side, rect };
+                }
+            }
+            else if (peer && peer !== selfPeerRef) {
+                // -- INTO a nested board (a page, a section) — or out onto the board
+                // that holds this one: that board holds the widget through a leg and
+                // paints its own placeholder. A board that refuses (full, fit) leaves
+                // the split rule to answer.
+                g.beside = null;
+                if (g.leg && g.leg.peer !== peer)
+                    endLeg(g);
+                if (!g.leg) {
+                    const adopted = peer.adopt({ id: g.id }, ev.world, pxSizeOf(g), {});
+                    if (adopted)
+                        g.leg = { peer, adopted };
+                }
+                if (g.leg)
+                    g.leg.adopted.move(ev.world);
+                else
+                    t = inside ? dropTargetAt(g.liveTree, ev.world.x, ev.world.y, g.id) : null;
+            }
+            else {
+                g.beside = null;
+                endLeg(g);
+                t = inside ? dropTargetAt(g.liveTree, ev.world.x, ev.world.y, g.id) : null;
+            }
+        }
         g.target = t ? targetOf(t) : null;
         showInsertion(t ? insertionRect(t.rect, t.side) : null);
         const out = !inside &&
+            !t &&
+            !g.strip &&
+            !g.leg &&
             options.dragOut === 'remove' &&
             (!options.removeZone || options.removeZone({ x: ev.screen.x, y: ev.screen.y }, { x: ev.world.x, y: ev.world.y }));
         g.out = out;
-        (_b = g.hostEl) === null || _b === void 0 ? void 0 : _b.classList.toggle('axdb-out', out);
+        (_e = g.hostEl) === null || _e === void 0 ? void 0 : _e.classList.toggle('axdb-out', out);
         api.render();
     };
     const onToolUp = () => {
+        var _a, _b, _c, _d;
         const g = gesture;
         if (!g || g.kind === 'palette')
             return;
@@ -747,6 +880,89 @@ export function bindDashboardSplit(api, group, options = {}) {
             fire({ type: changed ? 'commit' : 'cancel', kind: 'resize', nodeId: g.id, changed });
             return;
         }
+        const paint = () => {
+            if (disposed)
+                return;
+            project(readTree());
+            api.renderNow();
+        };
+        const settle = () => {
+            paint();
+            void Promise.resolve(pendingBatch).then(paint, () => undefined);
+        };
+        if (g.strip && options.tabDrop) {
+            // -- INTO A STRIP: the widget becomes a new tab of that container and
+            // its pane leaves this tree — the tree-without-it rides as the source's
+            // "displaced", the way a grid's survivors do (0.4.69). One history step.
+            const target = g.strip;
+            g.strip = null;
+            options.tabDrop.markDrop(null, null);
+            const without = new SetSplitTreeCommand(group.id, g.startTree, normalizeSplit(g.liveTree));
+            const cmds = options.tabDrop.dropIntoStrip(g.id, target.containerId, target.index, group.id, [without]);
+            if (cmds.length === 0) {
+                project(g.startTree);
+                api.renderNow();
+                fire({ type: 'cancel', kind: 'move', nodeId: g.id, changed: false });
+                return;
+            }
+            execute('Move widget into a new tab', cmds);
+            settle();
+            live.announce(`${nameOf(g.id)} became a tab of ${nameOf(target.containerId)}`, 'polite', true);
+            fire({ type: 'commit', kind: 'move', nodeId: g.id, changed: true });
+            return;
+        }
+        if (g.leg) {
+            // -- ONTO ANOTHER BOARD (a page, a section, the board holding this one):
+            // one batch across both — this tree without the pane, the target's
+            // displaced tiles, the membership, the widget's cell and frame there.
+            const leg = g.leg;
+            g.leg = null;
+            const fin = leg.adopted.finalize();
+            if (!fin) {
+                project(g.startTree);
+                api.renderNow();
+                fire({ type: 'cancel', kind: 'move', nodeId: g.id, changed: false });
+                return;
+            }
+            const node = g.node;
+            if (node) {
+                diagram.runSystemWrite(() => {
+                    var _a;
+                    node.setPosition(fin.rect.x, fin.rect.y);
+                    node.setSize(fin.rect.width, fin.rect.height, (_a = node.size.depth) !== null && _a !== void 0 ? _a : 0);
+                });
+            }
+            const geom0 = (_a = g.startGeom) !== null && _a !== void 0 ? _a : { pos: { x: fin.rect.x, y: fin.rect.y }, size: { width: fin.rect.width, height: fin.rect.height } };
+            const own = buildCommitCommands([
+                {
+                    id: g.id,
+                    locked: false,
+                    isGroup: false,
+                    cellBefore: (_b = persistedCell(g.id)) !== null && _b !== void 0 ? _b : fin.cell,
+                    cellAfter: fin.cell,
+                    posBefore: geom0.pos,
+                    posAfter: { x: fin.rect.x, y: fin.rect.y },
+                    sizeBefore: geom0.size,
+                    sizeAfter: { width: fin.rect.width, height: fin.rect.height },
+                },
+            ]);
+            const crossing = [
+                new SetSplitTreeCommand(group.id, g.startTree, normalizeSplit(g.liveTree)),
+                ...fin.commands,
+                new RemoveFromGroupCommand(group.id, g.id),
+                new AddToGroupCommand(leg.adopted.groupId, g.id),
+                ...own,
+            ];
+            // …and whatever follows a member out of this board: an emptied split
+            // page closes — inside one sequence with the move, or the batch could
+            // never undo (its group is gone).
+            const leaving = (_d = (_c = options.onMemberLeaving) === null || _c === void 0 ? void 0 : _c.call(options, g.id)) !== null && _d !== void 0 ? _d : [];
+            execute('Move widget', leaving.length > 0 ? [new SequenceCommand('Move widget', [...crossing, ...leaving])] : crossing);
+            settle();
+            live.announce(`${nameOf(g.id)} moved into ${nameOf(leg.adopted.groupId)}`, 'polite', true);
+            fire({ type: 'commit', kind: 'move', nodeId: g.id, changed: true });
+            return;
+        }
         if (g.out && options.onRemoveRequest) {
             const without = g.liveTree;
             void options.onRemoveRequest(g.id, [new SetSplitTreeCommand(group.id, g.startTree, normalizeSplit(without))]);
@@ -779,6 +995,8 @@ export function bindDashboardSplit(api, group, options = {}) {
             return;
         gesture = null;
         teardownGesture(g);
+        endStrip(g);
+        endLeg(g);
         if (g.kind === 'palette') {
             api.renderNow();
             fire({ type: 'cancel', kind: 'palette', nodeId: g.id, changed: false });
@@ -835,6 +1053,10 @@ export function bindDashboardSplit(api, group, options = {}) {
                     out: false,
                     chip: null,
                     esc: null,
+                    strip: null,
+                    leg: null,
+                    beside: null,
+                    startGeom: null,
                     hostEl: null,
                     pointerId: typeof PointerEvent !== 'undefined' && ev.source instanceof PointerEvent ? ev.source.pointerId : null,
                 };
@@ -934,6 +1156,10 @@ export function bindDashboardSplit(api, group, options = {}) {
                 out: false,
                 chip: null,
                 esc: null,
+                strip: null,
+                leg: null,
+                beside: null,
+                startGeom: { pos: { x: node.position.x, y: node.position.y }, size: { width: node.size.width, height: node.size.height } },
                 hostEl: null,
                 pointerId: typeof PointerEvent !== 'undefined' && ev.source instanceof PointerEvent ? ev.source.pointerId : null,
             };
@@ -1314,6 +1540,10 @@ export function bindDashboardSplit(api, group, options = {}) {
             out: false,
             chip,
             esc: null,
+            strip: null,
+            leg: null,
+            beside: null,
+            startGeom: null,
             hostEl: null,
             pointerId: null,
         };

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

@@ -190,6 +190,44 @@ export interface StripProbe {
 export declare function stripUnder(p: StripProbe): {
     containerId: string;
 } | null;
+export interface CrossingProbe {
+    /** The previous pointer event's point and this one's, in world units. */
+    prev: {
+        x: number;
+        y: number;
+    };
+    cur: {
+        x: number;
+        y: number;
+    };
+    roots: ZoneBoard[];
+    /** Containers the gesture has displaced, at the frames they rest in. */
+    restFrames?: ReadonlyMap<string, ZoneRect>;
+    /** A strip's rows, in world units. */
+    stripHeight: number;
+    /** The outer fraction of a container that is its side bands: those keep their corners. Default BESIDE_BAND. */
+    band?: number;
+    /** How far past the rows a landing may be and still mean the tabs, in world units. Default: one strip's height. */
+    reach?: number;
+}
+/**
+ * A HAND MOVES FASTER THAN A STRIP IS TALL. The strip is 30 px and a hand
+ * covers 40 to 80 px between pointer events, so testing only where the pointer
+ * LANDS skips it — the user, coming down from above the panel: "it's not
+ * passing by the tab header, it drops directly to inside or outside." The
+ * segment the hand travelled is tested too, in steps of half a strip: a
+ * CROSSING — the two events on opposite sides of a strip's rows — that lands
+ * within one strip's height of them means the tabs. Flying far past them does
+ * not (a fast drag into the page must never snag on the header), a sweep
+ * ALONG the rows is not a crossing, and the sides still take the corners
+ * (0.4.47): a hand landing in the outer fifth meant "after it", whatever it
+ * crossed on the way. Only for a hand ARRIVING: one already holding a strip
+ * leaves it by the stay. The grid board had this inline (0.4.67); the split
+ * board asks the same question, so it is one helper (0.4.69).
+ */
+export declare function stripCrossing(p: CrossingProbe): {
+    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

@@ -125,6 +125,45 @@ export function stripUnder(p) {
         visit(r, 0, 0);
     return bestId === null ? null : { containerId: bestId };
 }
+/**
+ * A HAND MOVES FASTER THAN A STRIP IS TALL. The strip is 30 px and a hand
+ * covers 40 to 80 px between pointer events, so testing only where the pointer
+ * LANDS skips it — the user, coming down from above the panel: "it's not
+ * passing by the tab header, it drops directly to inside or outside." The
+ * segment the hand travelled is tested too, in steps of half a strip: a
+ * CROSSING — the two events on opposite sides of a strip's rows — that lands
+ * within one strip's height of them means the tabs. Flying far past them does
+ * not (a fast drag into the page must never snag on the header), a sweep
+ * ALONG the rows is not a crossing, and the sides still take the corners
+ * (0.4.47): a hand landing in the outer fifth meant "after it", whatever it
+ * crossed on the way. Only for a hand ARRIVING: one already holding a strip
+ * leaves it by the stay. The grid board had this inline (0.4.67); the split
+ * board asks the same question, so it is one helper (0.4.69).
+ */
+export function stripCrossing(p) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const dx = p.cur.x - p.prev.x;
+    const dy = p.cur.y - p.prev.y;
+    const n = Math.ceil(Math.hypot(dx, dy) / Math.max(1, p.stripHeight / 2));
+    let crossed = null;
+    for (let i = 1; i < n && !crossed; i++) {
+        crossed = (_b = (_a = stripUnder({ x: p.prev.x + (dx * i) / n, y: p.prev.y + (dy * i) / n, roots: p.roots, held: null, stay: 0, restFrames: p.restFrames })) === null || _a === void 0 ? void 0 : _a.containerId) !== null && _b !== void 0 ? _b : null;
+    }
+    if (!crossed)
+        return null;
+    const f = (_d = (_c = p.restFrames) === null || _c === void 0 ? void 0 : _c.get(crossed)) !== null && _d !== void 0 ? _d : (_e = containerOf(p.roots, crossed)) === null || _e === void 0 ? void 0 : _e.frame;
+    if (!f)
+        return null;
+    const top = f.y;
+    const bottom = f.y + p.stripHeight;
+    const through = (p.prev.y < top && p.cur.y > bottom) || (p.prev.y > bottom && p.cur.y < top);
+    const away = p.cur.y < top ? top - p.cur.y : p.cur.y > bottom ? p.cur.y - bottom : 0;
+    const band = (_f = p.band) !== null && _f !== void 0 ? _f : BESIDE_BAND;
+    const rx = (p.cur.x - f.x) / Math.max(1, f.width);
+    const inSideBand = rx < band || rx > 1 - band;
+    const inside = p.cur.x >= f.x && p.cur.x <= f.x + f.width;
+    return through && !inSideBand && inside && away <= ((_g = p.reach) !== null && _g !== void 0 ? _g : p.stripHeight) ? { containerId: crossed } : null;
+}
 /**
  * The band a point is in for a TILE drag: the sides and the bottom as
  * `bandOf` gives them, and "top" ONLY from the band hanging above the frame.