@grafloria/element 0.4.60 → 0.4.62

package/package.json

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

package/src/lib/dashboard-kit/grid-binder.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();
@@ -2125,6 +2197,11 @@ export function bindDashboardGrid(api, group, options = {}) {
                         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,
                         inner: innerPeer ? boardRef(innerPeer, depth + 1) : null,
                     });
                 }
@@ -2209,7 +2286,15 @@ 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()) }
-                : ((_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
+                : 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()); })(),
+                            // no vacated cell: nothing has moved, so the BAND alone holds the mark
+                        }
+                    : ((_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,
@@ -3206,6 +3291,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

@@ -57,6 +57,8 @@ export interface ZoneContainer {
     stripHeight: number;
     /** The outer fraction of the body that means "beside"; 0 for a container whose whole body is "into" (a section). */
     band: number;
+    /** The TOP and BOTTOM depth in world units, when it is a fixed depth rather than `band` of the body. */
+    bandY?: number;
     /** The board a descent enters: a tab container's ACTIVE page, a section's own board. Null: nothing to enter. */
     inner: ZoneBoard | null;
 }
@@ -69,7 +71,14 @@ export interface BesideMemory {
     containerId: string;
     side: BesideSide;
     frame0: ZoneRect;
-    vacated: ZoneRect;
+    /**
+     * The cell the widget TOOK, when it took one. A beside that is only MARKED
+     * (a vertical band since 0.4.61 — nothing moves until release) has none, and
+     * must not borrow one: the cell a mark would take is the container's own, so
+     * for a widget the size of its container that rect covers the whole panel
+     * and the band would then hold the hand everywhere inside it (lab L105).
+     */
+    vacated?: ZoneRect;
 }
 export interface ResolveInput {
     x: number;
@@ -129,8 +138,16 @@ export declare const BESIDE_STAY = 0.05;
  * the middle, or outside. The left and right bands take the corners (VS
  * Code's precedence): a one-row widget carried along the top of a tall panel
  * to its far right means "after it", not "above it".
+ *
+ * `bandY` is the TOP and BOTTOM depth in world units. A fraction is the wrong
+ * unit there: it grows with the container, so the taller and more useful the
+ * panel, the more of its page means "above the whole panel" — 216 px of the
+ * fluid demo's panel, starting right under its tabs, which is exactly where a
+ * hand aiming into the page lands (0.4.62). The SIDES keep the fraction: that
+ * is how a widget gets beside a full-height panel, and a tab's split bands
+ * are a fifth on all four edges by design.
  */
-export declare function bandOf(f: ZoneRect, stripHeight: number, x: number, y: number, band?: number): BesideSide | null;
+export declare function bandOf(f: ZoneRect, stripHeight: number, x: number, y: number, band?: number, bandY?: number): BesideSide | null;
 export interface StripProbe {
     x: number;
     y: number;

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

@@ -39,8 +39,16 @@ const inRect = (r, x, y, tol = 0) => x >= r.x - tol && x <= r.x + r.width + tol
  * the middle, or outside. The left and right bands take the corners (VS
  * Code's precedence): a one-row widget carried along the top of a tall panel
  * to its far right means "after it", not "above it".
+ *
+ * `bandY` is the TOP and BOTTOM depth in world units. A fraction is the wrong
+ * unit there: it grows with the container, so the taller and more useful the
+ * panel, the more of its page means "above the whole panel" — 216 px of the
+ * fluid demo's panel, starting right under its tabs, which is exactly where a
+ * hand aiming into the page lands (0.4.62). The SIDES keep the fraction: that
+ * is how a widget gets beside a full-height panel, and a tab's split bands
+ * are a fifth on all four edges by design.
  */
-export function bandOf(f, stripHeight, x, y, band = BESIDE_BAND) {
+export function bandOf(f, stripHeight, x, y, band = BESIDE_BAND, bandY) {
     if (band <= 0 || !inRect(f, x, y))
         return null;
     const bodyY = f.y + stripHeight;
@@ -53,9 +61,10 @@ export function bandOf(f, stripHeight, x, y, band = BESIDE_BAND) {
         return 'left';
     if (rx > 1 - band)
         return 'right';
-    if (ry < band)
+    const depth = bandY !== undefined && bandY > 0 ? Math.min(bandY, bodyH / 2) : band * bodyH;
+    if (y - bodyY < depth)
         return 'top';
-    if (ry > 1 - band)
+    if (bodyY + bodyH - y < depth)
         return 'bottom';
     return null;
 }
@@ -128,6 +137,7 @@ function boardOf(roots, containerId) {
     return null;
 }
 export function resolve(input) {
+    var _a;
     const { x, y } = input;
     if (input.strip)
         return { kind: 'strip', containerId: input.strip.containerId, index: input.strip.index };
@@ -138,10 +148,13 @@ export function resolve(input) {
     // middle of it is a zone change too (into the page).
     if (input.prev) {
         const p = input.prev;
-        const stripH = stripHeightOf(input.roots, p.containerId);
-        const stay = bandOf(p.frame0, stripH, x, y, BESIDE_BAND + BESIDE_STAY);
-        const other = bandOf(p.frame0, stripH, x, y);
-        const held = stay === p.side || (!(other !== null && other !== p.side) && inRect(p.vacated, x, y, input.gap));
+        const c0 = containerOf(input.roots, p.containerId);
+        const stripH = (_a = c0 === null || c0 === void 0 ? void 0 : c0.stripHeight) !== null && _a !== void 0 ? _a : 0;
+        const depth = c0 === null || c0 === void 0 ? void 0 : c0.bandY;
+        const stay = bandOf(p.frame0, stripH, x, y, BESIDE_BAND + BESIDE_STAY, depth === undefined ? undefined : depth * (1 + BESIDE_STAY / BESIDE_BAND));
+        const other = bandOf(p.frame0, stripH, x, y, BESIDE_BAND, depth);
+        const onVacated = !!p.vacated && inRect(p.vacated, x, y, input.gap);
+        const held = stay === p.side || (!(other !== null && other !== p.side) && onVacated);
         if (held) {
             const board = boardOf(input.roots, p.containerId);
             if (board)
@@ -183,7 +196,7 @@ export function resolve(input) {
             const ndx0 = atRest ? c.frame.x - atRest.x : dx;
             const ndy0 = atRest ? c.frame.y - atRest.y : dy;
             const overNested = !!c.inner && c.inner.children().some((cc) => inRect(cc.frame, x + ndx0, y + ndy0));
-            const side = overNested || input.homeChain.has(c.id) ? null : bandOf(frame, c.stripHeight, tx, ty, c.band);
+            const side = overNested || input.homeChain.has(c.id) ? null : bandOf(frame, c.stripHeight, tx, ty, c.band, c.bandY);
             if (side)
                 return { kind: 'beside', board, containerId: c.id, side, kept: false };
             if (opaque(board, c) || !c.inner)
@@ -210,23 +223,24 @@ export function resolve(input) {
         visit(root);
     return deepest ? { kind: 'plain', board: deepest, grace: true } : { kind: 'off' };
 }
-function stripHeightOf(roots, containerId) {
+/** The container with this id, anywhere in the tree — its strip rows and its band depth. */
+function containerOf(roots, containerId) {
     const visit = (b) => {
         for (const c of b.children()) {
             if (c.id === containerId)
-                return c.stripHeight;
+                return c;
             const deeper = c.inner ? visit(c.inner) : null;
-            if (deeper !== null)
+            if (deeper)
                 return deeper;
         }
         return null;
     };
     for (const r of roots) {
-        const h = visit(r);
-        if (h !== null)
-            return h;
+        const c = visit(r);
+        if (c)
+            return c;
     }
-    return 0;
+    return null;
 }
 /**
  * What a pointer means for a TORN-OUT PAGE, in the one order both binders