@grafloria/element 0.4.61 → 0.4.62

package/package.json

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

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

@@ -2197,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,
                     });
                 }
@@ -2287,7 +2292,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                             containerId: pendingBeside.id,
                             side: pendingBeside.side,
                             frame0: (() => { const grp = diagram.getGroup(pendingBeside.id); return grp ? frameOfGroup(grp) : cellToRect({ x: pendingBeside.cell.x, y: pendingBeside.cell.y, w: pendingBeside.spans.w, h: pendingBeside.spans.h }, frame(), geom(), rows()); })(),
-                            vacated: cellToRect({ x: pendingBeside.cell.x, y: pendingBeside.cell.y, w: pendingBeside.spans.w, h: pendingBeside.spans.h }, frame(), geom(), rows()),
+                            // 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,

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