@grafloria/element 0.4.22 → 0.4.24

package/package.json

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

package/src/index.d.ts

@@ -79,7 +79,7 @@ export type { JoinColumn, JoinEnd, MatchTier, JoinGuidanceApi, JoinGuidanceOptio
 export type { ErColumn, ErEntitySpec, ErRelationshipSpec, ErCardinality, ErSide, ErDiagramOptions, UmlClassSpec, UmlRelationshipSpec, UmlRelationKind, UmlSide, UmlDiagramOptions, ErEntityDelta, UmlClassDelta, CardEditingHandle, } from './lib/diagram-kit/index.js';
 export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, } from './lib/diagram-kit/index.js';
 export type { HandleApi } from './lib/diagram-kit/index.js';
-export { bindDashboardGrid, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, dashboard, defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './lib/dashboard-kit/index.js';
+export { bindDashboardGrid, normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, dashboard, defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './lib/dashboard-kit/index.js';
 export type { DashboardGridApi, DashboardGridOptions, DashboardGridHandle, CellRect, WorldRect, DashboardGridGeometry, TileDelta, DashboardOptions, DashboardSpec, DashboardSnapshot, DragHandleOption, DragGripOptions, DashboardHandle, DashboardViewSpec, DashboardWidgetSpec, SectionCaption, SectionCaptionOptions, SectionCaptionAction, SectionCaptionFont, WidgetHandle, WidgetRenderer, KpiWidgetData, LineWidgetData, LineSeries, BarWidgetData, DonutWidgetData, FunnelWidgetData, TableWidgetData, } from './lib/dashboard-kit/index.js';
 export { bindStencilPalette, bindShapeDataPanel, ensureStencilKitStyles } from './lib/stencil-kit/index.js';
 export type { StencilPaletteApi, StencilPaletteOptions, StencilPaletteHandle, ShapeDataPanelApi, ShapeDataPanelOptions, ShapeDataPanelHandle, } from './lib/stencil-kit/index.js';

package/src/index.js

@@ -230,7 +230,7 @@ export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField,
 // GridItemConfig. Element-local code, so the Phase-0 wholesale re-export
 // below does NOT cover it — this curated block is its only door.
 // ===========================================================================
-export { bindDashboardGrid, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, 
+export { bindDashboardGrid, normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, 
 // The DATA-FIRST authoring API — the erDiagram()/umlDiagram() equivalent.
 dashboard, 
 // …and the built-in renderers behind `kind`, so a dashboard is useful with

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

@@ -40,7 +40,12 @@ export interface SectionCaptionOptions {
     description?: string;
     /** A glyph before the text (emoji or short text). */
     icon?: string;
-    /** 'inside' (default): a band inside the frame, reserved. 'tab': above the frame, nothing reserved. */
+    /**
+     * 'inside' (default): a band across the top of the frame. 'tab': the same
+     * band sized to its text, a label chip at the leading corner. BOTH reserve
+     * their height inside the SECTION's own cell — a header that hangs over the
+     * neighbour above is the overlap bug this feature exists to end.
+     */
     position?: 'inside' | 'tab';
     /** Horizontal alignment (default 'start', mirrored on RTL). */
     align?: 'start' | 'center' | 'end';
@@ -73,6 +78,10 @@ export declare const CAPTION_HEIGHT_SUBTITLE = 44;
 export declare const CAPTION_HEIGHT_TIGHT = 22;
 /** A section shorter than this steps its band down to the tight tier. */
 export declare const CAPTION_TIGHT_BELOW = 90;
+/** A band never paints thinner than this. */
+export declare const CAPTION_MIN_HEIGHT = 16;
+/** …nor takes the last pixels: the children keep at least this much. */
+export declare const CAPTION_MIN_CONTENT = 20;
 export declare const CAPTION_PASS_THROUGH = "button, a, input, select, textarea, [data-axdb-pass]";
 /** The caption as options, or null when there is none. `title` fills the text. */
 export declare function normalizeCaption(c: SectionCaption | undefined, title?: string): SectionCaptionOptions | null;
@@ -82,11 +91,54 @@ 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;
-/** The band's height for a section of `sectionH` px. */
+/**
+ * The band's height for a section of `sectionH` px: the authored height (or
+ * the tier), CLAMPED so the children always keep `CAPTION_MIN_CONTENT` px. A
+ * one-row section used to hand its whole 34 px to a 22 px band and paint a
+ * 12 px sliver of a child.
+ */
 export declare function captionBandHeight(c: SectionCaptionOptions, sectionH: number): number;
-/** Pixels the nested board's frame gives up at the top: the band plus its vertical margins. */
+/**
+ * Pixels the nested board's frame gives up at the top: the band plus its
+ * vertical margins. A TAB reserves too — it is a narrower band, not a header
+ * hanging over whatever the parent board put above the section (the stress
+ * page had one lying across a chart's legend, and one clipped off the top of
+ * the canvas). Only `show: 'hover'` reserves nothing: it is an overlay by
+ * definition, and it paints opaque so the content beneath stays readable.
+ */
 export declare function captionReserve(c: SectionCaptionOptions | null, ctx: {
     static: boolean;
     sectionH: number;
@@ -96,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;
 /**
@@ -121,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

@@ -19,6 +19,10 @@ export const CAPTION_HEIGHT_SUBTITLE = 44;
 export const CAPTION_HEIGHT_TIGHT = 22;
 /** A section shorter than this steps its band down to the tight tier. */
 export const CAPTION_TIGHT_BELOW = 90;
+/** A band never paints thinner than this. */
+export const CAPTION_MIN_HEIGHT = 16;
+/** …nor takes the last pixels: the children keep at least this much. */
+export const CAPTION_MIN_CONTENT = 20;
 export const CAPTION_PASS_THROUGH = 'button, a, input, select, textarea, [data-axdb-pass]';
 /** The caption as options, or null when there is none. `title` fills the text. */
 export function normalizeCaption(c, title) {
@@ -44,24 +48,69 @@ 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)
         return false;
     return !(c.show === 'design' && isStatic);
 }
-/** The band's height for a section of `sectionH` px. */
+/**
+ * The band's height for a section of `sectionH` px: the authored height (or
+ * the tier), CLAMPED so the children always keep `CAPTION_MIN_CONTENT` px. A
+ * one-row section used to hand its whole 34 px to a 22 px band and paint a
+ * 12 px sliver of a child.
+ */
 export function captionBandHeight(c, sectionH) {
     var _a;
-    if (sectionH > 0 && sectionH < CAPTION_TIGHT_BELOW)
-        return CAPTION_HEIGHT_TIGHT;
-    return (_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));
 }
-/** Pixels the nested board's frame gives up at the top: the band plus its vertical margins. */
+/**
+ * Pixels the nested board's frame gives up at the top: the band plus its
+ * vertical margins. A TAB reserves too — it is a narrower band, not a header
+ * hanging over whatever the parent board put above the section (the stress
+ * page had one lying across a chart's legend, and one clipped off the top of
+ * the canvas). Only `show: 'hover'` reserves nothing: it is an overlay by
+ * definition, and it paints opaque so the content beneath stays readable.
+ */
 export function captionReserve(c, ctx) {
     if (!c || !captionPainted(c, ctx.static))
         return 0;
-    if (c.position === 'tab' || c.show === 'hover')
+    if (c.show === 'hover')
         return 0;
     const [mv] = pairOf(c.margin, [0, 0]);
     return captionBandHeight(c, ctx.sectionH) + 2 * mv;
@@ -70,15 +119,22 @@ 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')
+        return { left: `${mh}px`, right: `${mh}px` };
+    return rtl ? { left: 'auto', right: `${mh}px` } : { left: `${mh}px`, right: 'auto' };
+}
 /** The per-sync geometry of a painted band: height and tier follow the section's live size. */
 export function sizeCaptionBand(band, c, sectionH) {
-    const h = captionBandHeight(c, sectionH);
-    band.classList.toggle('axdb-slab-h--tight', captionTight(sectionH));
-    band.style.height = `${h}px`;
-    if (c.position === 'tab')
-        band.style.top = `${-h}px`;
+    band.classList.toggle('axdb-slab-h--tight', captionTight(c, sectionH));
+    band.style.height = `${captionBandHeight(c, sectionH)}px`;
 }
 /**
  * Is a press on `target`, inside `band`, content rather than the band? An
@@ -119,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');
@@ -129,9 +185,10 @@ export function paintCaptionBand(band, c, ctx) {
             band.classList.add(k);
     band.setAttribute('dir', ctx.rtl ? 'rtl' : 'ltr');
     band.style.height = `${h}px`;
-    band.style.top = c.position === 'tab' ? `${-h}px` : `${mv}px`;
-    band.style.left = `${mh}px`;
-    band.style.right = c.position === 'tab' ? 'auto' : `${mh}px`; // a tab is sized to its text
+    band.style.top = `${mv}px`;
+    const sides = bandSides(c, mh, ctx.rtl);
+    band.style.left = sides.left;
+    band.style.right = sides.right;
     const v = (name, value) => {
         if (value === undefined)
             band.style.removeProperty(name);

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,7 +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; 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 }); };
+    const ownReserve = () => sectionCaptionReserve(diagram, group, isStatic);
     const frame = () => {
         var _a, _b, _c, _d;
         const r = ownReserve();
@@ -1177,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);
             }
         }
@@ -1193,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) {
@@ -1208,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;
@@ -2412,10 +2430,33 @@ export function bindDashboardGrid(api, group, options = {}) {
      * container; the corner handle keeps its own cursor from the stylesheet.
      */
     let hoverHost = null;
+    /**
+     * A `show: 'hover'` caption cannot ride CSS `:hover`: the slab overlay takes
+     * no pointer (by design — it must never steal a press), and while the band
+     * is hidden it takes none either, so nothing in the section is ever hovered
+     * 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 (!hoverSlabs.size)
+            return;
+        for (const el of hoverSlabs) {
+            const r = el.getBoundingClientRect();
+            el.classList.toggle('axdb-slab--hot', clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom);
+        }
+    };
+    const onHoverLeave = () => {
+        for (const el of hoverSlabs)
+            el.classList.remove('axdb-slab--hot');
+    };
     const onHover = (e) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         if (disposed || gesture)
             return;
+        markHotSection(e.clientX, e.clientY);
         // The event may target the host, its content, or (when a host's content
         // is pointer-transparent) the canvas under it — find the member host by
         // the pointer's position in that case.
@@ -2465,6 +2506,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             host.removeAttribute('data-axdb-edge');
     };
     api.container.addEventListener('pointermove', onHover, { passive: true });
+    api.container.addEventListener('pointerleave', onHoverLeave, { passive: true });
     /**
      * STATIC BOARDS LET CONTENT BE CLICKED. The renderer prevents the default of
      * every press a tool claims, which cancels the compatibility mouse events —
@@ -3041,6 +3083,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             peersOnCanvas().delete(selfPeer);
             unregisterTool();
             api.container.removeEventListener('pointermove', onHover);
+            api.container.removeEventListener('pointerleave', onHoverLeave);
             guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.removeEventListener('pointerdown', staticGuard);
             api.container.removeEventListener('focusin', onFocusIn);
             api.container.removeEventListener('keydown', onKey);
@@ -3059,6 +3102,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';
 /**
@@ -105,8 +105,14 @@ export function bindDashboardSplit(api, group, options = {}) {
     let focusedId;
     const live = liveRegionFor(api.container);
     // -- geometry ---------------------------------------------------------------
-    /** Our own caption band's pixels, given up at the top of the pane (see grid-binder). */
-    const ownReserve = () => { var _a, _b; 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 }); };
+    /**
+     * Our own caption band's pixels, given up at the top of the pane — but only
+     * when the parent board actually paints one (see BinderPeer.paintsCaptions).
+     * A split board paints no section chrome, so a captioned section inside one
+     * reserves nothing until the tab-container round gives the split binder its
+     * own overlays.
+     */
+    const ownReserve = () => sectionCaptionReserve(diagram, group, isStatic);
     const frame = () => {
         var _a, _b, _c, _d;
         const r = ownReserve();

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

@@ -373,8 +373,10 @@ const CSS = `
   position: absolute; box-sizing: border-box; pointer-events: auto; z-index: 1;
   display: flex; align-items: center; gap: 6px; min-width: 0;
   padding: var(--axdb-caption-pad, 0 10px);
-  background: var(--axdb-caption-bg, rgba(31, 36, 48, .045));
-  border-bottom: var(--axdb-caption-border, none);
+  background: var(--axdb-caption-bg, rgba(31, 36, 48, .055));
+  /* A hairline by default: two bands meeting (a captioned section inside a
+     captioned section) read as two headers, not one grey block. */
+  border-bottom: var(--axdb-caption-border, 1px solid rgba(31, 36, 48, .1));
   color: var(--axdb-caption-fg, #1f2430);
   font: var(--axdb-caption-font-weight, 600) var(--axdb-caption-font-size, 13px)/1.2 var(--axdb-caption-font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
   text-transform: var(--axdb-caption-transform, none);
@@ -388,13 +390,27 @@ const CSS = `
 .grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--end { justify-content: flex-end; }
 .grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--vtop { align-items: flex-start; }
 .grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--vbottom { align-items: flex-end; }
-/* 'tab': above the frame, sized to its text */
-.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--tab { right: auto; max-width: 100%; }
-/* 'hover': an overlay that appears with the pointer or the selection */
-.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--hover { opacity: 0; }
-.grafloria-html-layer > .axdb-slab:hover > .axdb-slab-h.axdb-slab-h--hover,
-.grafloria-html-layer > .axdb-slab.axdb-slab--selected > .axdb-slab-h.axdb-slab-h--hover,
-.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--hover:focus-within { opacity: 1; }
+/* 'tab': the same band sized to its text, a chip at the leading corner. It
+   reserves its height like 'inside' — see captionReserve. */
+.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--tab {
+  max-width: 100%; border-radius: var(--axdb-rs-radius, 3px);
+  border-bottom: var(--axdb-caption-border-tab, none);
+  box-shadow: inset 0 0 0 1px rgba(31, 36, 48, .08);
+}
+/* 'hover': an overlay. It reserves nothing, so while hidden it must not take
+   the pointer (an invisible band swallowed clicks on the content beneath),
+   and while shown it paints OPAQUE — a 5% tint over a chart is a smear. */
+.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--hover {
+  opacity: 0; pointer-events: none;
+  background: var(--axdb-caption-bg, #fff);
+  box-shadow: 0 1px 4px rgba(31, 36, 48, .16);
+}
+/* .axdb-slab--hot is set by the binder from the live pointer (the overlay
+   takes no pointer of its own, so CSS :hover can never fire on it). */
+.grafloria-html-layer > .axdb-slab.axdb-slab--hot > .axdb-slab-h.axdb-slab-h--hover,
+.grafloria-html-layer > .axdb-slab.axdb-slab--selected > .axdb-slab-h.axdb-slab-h--hover { pointer-events: auto; opacity: 1; }
+/* the actions of a hovered or selected section */
+.grafloria-html-layer > .axdb-slab.axdb-slab--hot > .axdb-slab-h > .axdb-slab-h-actions { opacity: 1; }
 /* the tight tier: a section under 90 px */
 .grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--tight { font-size: min(var(--axdb-caption-font-size, 12px), 12px); gap: 4px; }
 .axdb-slab-h--tight .axdb-slab-h-sub, .axdb-slab-h--tight .axdb-slab-h-actions { display: none; }
@@ -416,7 +432,13 @@ const CSS = `
 .axdb-slab-h-action[disabled]:hover { background: none; }
 .grafloria-html-layer > .axdb-slab.axdb-slab--static > .axdb-slab-h { cursor: default; }
 @media (prefers-color-scheme: dark) {
-  .grafloria-html-layer > .axdb-slab > .axdb-slab-h { background: var(--axdb-caption-bg, rgba(236, 238, 244, .06)); color: var(--axdb-caption-fg, #eceef4); }
+  .grafloria-html-layer > .axdb-slab > .axdb-slab-h {
+    background: var(--axdb-caption-bg, rgba(236, 238, 244, .07));
+    color: var(--axdb-caption-fg, #eceef4);
+    border-bottom: var(--axdb-caption-border, 1px solid rgba(236, 238, 244, .12));
+  }
+  .grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--tab { box-shadow: inset 0 0 0 1px rgba(236, 238, 244, .12); }
+  .grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--hover { background: var(--axdb-caption-bg, #1a1d25); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
   .axdb-slab-h-action:hover { background: rgba(236, 238, 244, .1); }
 }