@grafloria/element 0.4.23 → 0.4.25

package/package.json

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

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

@@ -91,6 +91,37 @@ export declare function captionOfGroup(grp: {
     name?: string;
 } | undefined): SectionCaptionOptions | null;
 export declare function pairOf(v: number | [number, number] | undefined, dflt: [number, number]): [number, number];
+/** The shape of the model and groups this module needs — structural, so the kit's
+ *  caption logic stays free of engine imports. */
+interface CaptionGroup {
+    id: string;
+    name?: string;
+    members?: {
+        has(id: string): boolean;
+    } | null;
+    getMetadata(key: string): unknown;
+}
+interface CaptionDiagram {
+    getGroups?(): CaptionGroup[];
+}
+/**
+ * Does the board that HOLDS this section paint section chrome? Only the grid
+ * binder draws the slab overlay the band lives on, so a section inside a
+ * SPLIT board has no band — and must not reserve space for one.
+ *
+ * Read from the parent group's persisted layout rather than from the live
+ * binder registry: membership and metadata both exist before either binder is
+ * built, so the answer is the same on the first projection as on the hundredth
+ * (asking the registry made the reserve depend on which binder registered
+ * first, and a child binds BEFORE its parent).
+ */
+export declare function parentPaintsSectionChrome(diagram: CaptionDiagram, group: CaptionGroup): boolean;
+/** A section's own caption reserve: its band's pixels, or 0 when nothing paints one. */
+export declare function sectionCaptionReserve(diagram: CaptionDiagram, group: CaptionGroup & {
+    size?: {
+        height: number;
+    } | null;
+}, isStatic: boolean): number;
 /** Painted at all? `show: 'design'` disappears under static. */
 export declare function captionPainted(c: SectionCaptionOptions | null, isStatic: boolean): boolean;
 /**
@@ -117,8 +148,12 @@ export declare function captionKey(c: SectionCaptionOptions, ctx: {
     rtl: boolean;
     static: boolean;
 }): string;
-/** Is a section of `sectionH` px in the tight tier? */
-export declare const captionTight: (sectionH: number) => boolean;
+/**
+ * Is the band too short to carry a subtitle, actions or full-size text? Asked
+ * of the band's ACTUAL height, so an authored `height` that survives on a
+ * short section keeps its content instead of being styled as squeezed.
+ */
+export declare const captionTight: (c: SectionCaptionOptions, sectionH: number) => boolean;
 /** The per-sync geometry of a painted band: height and tier follow the section's live size. */
 export declare function sizeCaptionBand(band: HTMLElement, c: SectionCaptionOptions, sectionH: number): void;
 /**
@@ -142,3 +177,4 @@ export declare function paintCaptionBand(band: HTMLElement, c: SectionCaptionOpt
     render?: (host: HTMLElement) => void;
     onAction?: (actionId: string) => void;
 }): void;
+export {};

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

@@ -48,6 +48,35 @@ export function pairOf(v, dflt) {
         return dflt;
     return typeof v === 'number' ? [v, v] : [v[0], v[1]];
 }
+/**
+ * Does the board that HOLDS this section paint section chrome? Only the grid
+ * binder draws the slab overlay the band lives on, so a section inside a
+ * SPLIT board has no band — and must not reserve space for one.
+ *
+ * Read from the parent group's persisted layout rather than from the live
+ * binder registry: membership and metadata both exist before either binder is
+ * built, so the answer is the same on the first projection as on the hundredth
+ * (asking the registry made the reserve depend on which binder registered
+ * first, and a child binds BEFORE its parent).
+ */
+export function parentPaintsSectionChrome(diagram, group) {
+    var _a, _b, _c, _d;
+    const groups = (_b = (_a = diagram.getGroups) === null || _a === void 0 ? void 0 : _a.call(diagram)) !== null && _b !== void 0 ? _b : [];
+    for (const g of groups) {
+        if (g === group || !((_c = g.members) === null || _c === void 0 ? void 0 : _c.has(group.id)))
+            continue;
+        const board = g.getMetadata('dashboardBoard');
+        return ((_d = board === null || board === void 0 ? void 0 : board.layout) !== null && _d !== void 0 ? _d : 'grid') !== 'split';
+    }
+    return false; // not a member of any board: a view, which carries no caption
+}
+/** A section's own caption reserve: its band's pixels, or 0 when nothing paints one. */
+export function sectionCaptionReserve(diagram, group, isStatic) {
+    var _a, _b;
+    if (!parentPaintsSectionChrome(diagram, group))
+        return 0;
+    return captionReserve(captionOfGroup(group), { static: isStatic, sectionH: (_b = (_a = group.size) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0 });
+}
 /** Painted at all? `show: 'design'` disappears under static. */
 export function captionPainted(c, isStatic) {
     if (!c)
@@ -62,7 +91,10 @@ export function captionPainted(c, isStatic) {
  */
 export function captionBandHeight(c, sectionH) {
     var _a;
-    const want = captionTight(sectionH) ? CAPTION_HEIGHT_TIGHT : (_a = c.height) !== null && _a !== void 0 ? _a : (c.subtitle ? CAPTION_HEIGHT_SUBTITLE : CAPTION_HEIGHT);
+    // An authored `height` WINS over the squeezed tier — the tier is a default
+    // for a short section, not an override of what the app asked for. The clamp
+    // still protects the children either way.
+    const want = (_a = c.height) !== null && _a !== void 0 ? _a : (sectionH > 0 && sectionH < CAPTION_TIGHT_BELOW ? CAPTION_HEIGHT_TIGHT : c.subtitle ? CAPTION_HEIGHT_SUBTITLE : CAPTION_HEIGHT);
     if (sectionH <= 0)
         return want;
     return Math.max(CAPTION_MIN_HEIGHT, Math.min(want, sectionH - CAPTION_MIN_CONTENT));
@@ -87,8 +119,12 @@ export function captionReserve(c, ctx) {
 export function captionKey(c, ctx) {
     return JSON.stringify([c, ctx.rtl, ctx.static]);
 }
-/** Is a section of `sectionH` px in the tight tier? */
-export const captionTight = (sectionH) => sectionH > 0 && sectionH < CAPTION_TIGHT_BELOW;
+/**
+ * Is the band too short to carry a subtitle, actions or full-size text? Asked
+ * of the band's ACTUAL height, so an authored `height` that survives on a
+ * short section keeps its content instead of being styled as squeezed.
+ */
+export const captionTight = (c, sectionH) => captionBandHeight(c, sectionH) <= CAPTION_HEIGHT_TIGHT;
 /** Where the band's box sits horizontally: a tab hugs the LEADING edge, mirrored on RTL. */
 function bandSides(c, mh, rtl) {
     if (c.position !== 'tab')
@@ -97,7 +133,7 @@ function bandSides(c, mh, rtl) {
 }
 /** The per-sync geometry of a painted band: height and tier follow the section's live size. */
 export function sizeCaptionBand(band, c, sectionH) {
-    band.classList.toggle('axdb-slab-h--tight', captionTight(sectionH));
+    band.classList.toggle('axdb-slab-h--tight', captionTight(c, sectionH));
     band.style.height = `${captionBandHeight(c, sectionH)}px`;
 }
 /**
@@ -139,7 +175,7 @@ export function paintCaptionBand(band, c, ctx) {
     const cls = (name, on) => band.classList.toggle(name, on);
     cls('axdb-slab-h--tab', c.position === 'tab');
     cls('axdb-slab-h--hover', c.show === 'hover');
-    cls('axdb-slab-h--tight', captionTight(ctx.sectionH));
+    cls('axdb-slab-h--tight', captionTight(c, ctx.sectionH));
     cls('axdb-slab-h--center', c.align === 'center');
     cls('axdb-slab-h--end', c.align === 'end');
     cls('axdb-slab-h--vtop', c.valign === 'top');

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

@@ -436,14 +436,6 @@ export interface DashboardGridHandle {
  * the feature).
  */
 interface BinderPeer {
-    /**
-     * Does this board paint SECTION CHROME (the slab overlay that carries the
-     * ring, the corner handle and the caption band) for its member groups? Only
-     * the grid binder does. A section reserves its caption's pixels ONLY when
-     * its parent paints one — otherwise a captioned section inside a SPLIT
-     * board pushed its children down by 44 px under a band nobody drew.
-     */
-    paintsCaptions?: boolean;
     group: GroupModel;
     /** True when this board's engine holds `id` as an item (member lookup). */
     hasItem(id: string): boolean;

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

@@ -54,7 +54,7 @@ import { AddToGroupCommand, BatchCommand, Command, GridPackEngine, RemoveFromGro
 import { LiveRegionController, registerTool } from '@grafloria/renderer';
 import { buildCommitCommands, cellFromGridItem, cellToRect, columnUnitFor, gridItemFromCell, pointToCell, rowHeightFor, sizeToSpan, } from './grid-mapping.js';
 import { ensureDashboardKitStyles } from './styles.js';
-import { captionOfGroup, captionPainted, captionPassThrough, captionKey, captionReserve, paintCaptionBand, sizeCaptionBand } from './caption.js';
+import { captionOfGroup, captionPainted, captionPassThrough, captionKey, paintCaptionBand, sectionCaptionReserve, sizeCaptionBand } from './caption.js';
 /** The class of the painted grip element (a child of the node host). */
 export const GRIP_CLASS = 'axdb-grip';
 /** The container class that turns the caption strip's grip dots on. */
@@ -453,12 +453,7 @@ export function bindDashboardGrid(api, group, options = {}) {
      * band is outside `containsWorld`, so a press on it is the PARENT's (it
      * selects the section) rather than an empty press of this board.
      */
-    const ownReserve = () => {
-        var _a, _b, _c;
-        return ((_a = parentPeer()) === null || _a === void 0 ? void 0 : _a.paintsCaptions) === true
-            ? captionReserve(captionOfGroup(group), { static: isStatic, sectionH: (_c = (_b = group.size) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 0 })
-            : 0;
-    };
+    const ownReserve = () => sectionCaptionReserve(diagram, group, isStatic);
     const frame = () => {
         var _a, _b, _c, _d;
         const r = ownReserve();
@@ -1182,6 +1177,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         for (const [id, el] of slabEls) {
             if (!seen.has(id)) {
                 el.remove();
+                hoverSlabs.delete(el);
                 slabEls.delete(id);
             }
         }
@@ -1198,9 +1194,18 @@ export function bindDashboardGrid(api, group, options = {}) {
         let band = el.querySelector(':scope > .axdb-slab-h');
         if (!cap || !captionPainted(cap, isStatic)) {
             band === null || band === void 0 ? void 0 : band.remove();
+            hoverSlabs.delete(el);
+            el.classList.remove('axdb-slab--hot');
             el.removeAttribute('aria-label');
+            el.removeAttribute('role');
             return;
         }
+        if (cap.show === 'hover')
+            hoverSlabs.add(el);
+        else {
+            hoverSlabs.delete(el);
+            el.classList.remove('axdb-slab--hot');
+        }
         const ctx = { rtl, static: isStatic, sectionH };
         const key = captionKey(cap, ctx);
         if (band && band.getAttribute('data-key') === key) {
@@ -1213,10 +1218,18 @@ export function bindDashboardGrid(api, group, options = {}) {
         const render = options.renderCaption;
         paintCaptionBand(band, cap, Object.assign(Object.assign(Object.assign({}, ctx), (render ? { render: (host) => render(id, host) } : {})), { onAction: (actionId) => { var _a; return (_a = options.onCaptionAction) === null || _a === void 0 ? void 0 : _a.call(options, id, actionId); } }));
         band.setAttribute('data-key', key);
-        if (cap.text)
+        // A named group, so the caption text is the section's name in the
+        // accessibility tree rather than a stray label on an unnamed div. (The
+        // band is not a tab stop yet — the actions are deliberately out of the
+        // tab order so a board keeps exactly ONE stop; see the plan.)
+        if (cap.text) {
+            el.setAttribute('role', 'group');
             el.setAttribute('aria-label', cap.text);
-        else
+        }
+        else {
+            el.removeAttribute('role');
             el.removeAttribute('aria-label');
+        }
     };
     const insideMemberGroupFrame = (x, y) => {
         var _a;
@@ -1693,6 +1706,19 @@ export function bindDashboardGrid(api, group, options = {}) {
         // ratchet's second disguise (grow committed; a fresh shrink gesture could
         // never pull low enough to ask the parent for a row back).
         let h = bottom - top;
+        /**
+         * Did the escalation below move this tile AS PART OF THE STRIP? A
+         * full-height tile shares its row count with every other full-height tile
+         * in the section, so once the strip grew, this tile's height is the
+         * strip's — not whatever its own pixels re-quantise to. Without this the
+         * gesture undid itself for its own tile and left the NEIGHBOUR grown:
+         * drag Churn's bottom 70 px and ORDERS became two rows while Churn stayed
+         * one (reported from the fluid demo). The cause is the row height
+         * changing mid-gesture: 86 px rows make +70 read as 2 rows, and the
+         * moment the section grows, rows become 108 px and the same pixels read
+         * as 1 again. See the sibling rule for the un-pulled axis below.
+         */
+        let stripFollow = false;
         // NESTED HEIGHT ESCALATION (live report: "i cant increase height"). A
         // bounded strip cannot grow a tile taller than itself — so pulling
         // clearly past its bottom GROWS THE STRIP: the slab gains a row in the
@@ -1751,9 +1777,30 @@ export function bindDashboardGrid(api, group, options = {}) {
                 // The SAME rounding the resize path quantises with, or the tile shrinks
                 // through that path first and the section never gets its row back.
                 const wantRows = Math.max(1, Math.round((h + gap) / rowPx));
-                const wantsMore = wantRows > pulled.h;
-                const wantsLess = wantRows < pulled.h;
                 const fullHeight = pulled.y === 0 && pulled.h >= inner;
+                // For the WHOLE gesture, not just the move that escalated: a strip
+                // tile's height is its cells. Set on every move so the tile cannot
+                // re-quantise back a row on the moves in between.
+                stripFollow = fullHeight;
+                /**
+                 * A STRIP IS MEASURED FROM THE PRESS, NOT FROM ITSELF. Growing the
+                 * strip changes the row height, so quantising the live pixels against
+                 * the LIVE row height feeds the decision back into its own input: at
+                 * 86 px rows a +80 px pull reads as 2 rows, the section grows, rows
+                 * become 108 px, the same pointer now reads as 1 row, the section
+                 * shrinks — and the gesture oscillates and lands wherever the last
+                 * move left it (measured: +60/+70/+90 grew, +80 did nothing).
+                 * Counting rows from the row height AT PRESS is monotonic in the
+                 * pointer, so the strip cannot fight itself.
+                 */
+                const startCell = g.startCells.get(g.id);
+                const startRowPx = startCell && startCell.h > 0 ? (g.startSize.height + gap) / startCell.h : rowPx;
+                const stripRows = startCell
+                    ? Math.max(1, startCell.h + Math.round((h - g.startSize.height) / startRowPx))
+                    : wantRows;
+                const effWant = fullHeight ? stripRows : wantRows;
+                const wantsMore = effWant > pulled.h;
+                const wantsLess = effWant < pulled.h;
                 const fullOnes = engine.getItems().filter((i) => i.y === 0 && i.h >= inner).map((i) => i.id);
                 const resizeAll = (ids, rowsTo) => {
                     for (const id of ids) {
@@ -1858,7 +1905,11 @@ export function bindDashboardGrid(api, group, options = {}) {
             // projection of its cell span instead of the start-of-gesture pixels.
             if (!pullsX)
                 w = itemNow.w * (cuNow + gap) - gap;
-            if (!pullsY)
+            // …and a tile the STRIP just moved follows its cells on the pulled axis
+            // too: the strip is one row of tiles, so the dragged tile keeps the row
+            // count its peers were given rather than re-quantising against the row
+            // height the escalation itself just changed.
+            if (!pullsY || stripFollow)
                 h = itemNow.h * (rhNow + gap) - gap;
         }
         // Anchor: the pulled edges follow w/h, the opposite ones stay put — on
@@ -2191,7 +2242,6 @@ export function bindDashboardGrid(api, group, options = {}) {
         containsWorldExtended: worldInsideBoardExtended,
         frameArea: boardArea,
         adopt,
-        paintsCaptions: true, // the grid binder owns the slab overlays (syncSlabs)
     };
     peersOnCanvas().add(selfPeer);
     selfPeerRef = selfPeer;
@@ -2425,20 +2475,19 @@ export function bindDashboardGrid(api, group, options = {}) {
      * in CSS terms. The binder already tracks the pointer; it marks the section
      * under it instead.
      */
+    /** Only the sections carrying a `show: 'hover'` band — usually none, so the
+     *  pointer handler costs nothing on a board that has no hover caption. */
+    const hoverSlabs = new Set();
     const markHotSection = (clientX, clientY) => {
-        if (!slabEls.size)
+        if (!hoverSlabs.size)
             return;
-        for (const [id, el] of slabEls) {
-            if (!el.querySelector(':scope > .axdb-slab-h--hover'))
-                continue;
+        for (const el of hoverSlabs) {
             const r = el.getBoundingClientRect();
-            const hot = clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom;
-            el.classList.toggle('axdb-slab--hot', hot);
-            void id;
+            el.classList.toggle('axdb-slab--hot', clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom);
         }
     };
     const onHoverLeave = () => {
-        for (const el of slabEls.values())
+        for (const el of hoverSlabs)
             el.classList.remove('axdb-slab--hot');
     };
     const onHover = (e) => {
@@ -3091,6 +3140,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             for (const el of slabEls.values())
                 el.remove();
             slabEls.clear();
+            hoverSlabs.clear();
             // A rebind inside the 60 ms window (a layout switch right after an undo)
             // disposed this binder with the timer pending — the host kept its
             // lifted ghost for good (visual gate, nested-containers ⑤).

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

@@ -29,7 +29,7 @@ import { anyEdge, clearOtherSelections, dragHandleSelector, gripHostOf, gripOf,
 import { cellFromGridItem } from './grid-mapping.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 { captionOfGroup, captionReserve } from './caption.js';
+import { sectionCaptionReserve } from './caption.js';
 /** Group metadata key the tree persists under. */
 export const SPLIT_TREE_KEY = 'dashboardTree';
 /**
@@ -112,12 +112,7 @@ export function bindDashboardSplit(api, group, options = {}) {
      * reserves nothing until the tab-container round gives the split binder its
      * own overlays.
      */
-    const ownReserve = () => {
-        var _a, _b, _c;
-        return ((_a = parentPeerOf(api.container, group.id)) === null || _a === void 0 ? void 0 : _a.paintsCaptions) === true
-            ? captionReserve(captionOfGroup(group), { static: isStatic, sectionH: (_c = (_b = group.size) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 0 })
-            : 0;
-    };
+    const ownReserve = () => sectionCaptionReserve(diagram, group, isStatic);
     const frame = () => {
         var _a, _b, _c, _d;
         const r = ownReserve();