@grafloria/element 0.4.61 → 0.4.63

package/package.json

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

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, bandRects, containerUnder, resolve as resolveZone, stripUnder } from './zones.js';
 import { SequenceCommand, SetGroupCellCommand, tileCommands } from './commit.js';
 import { EDGE_GRACE } from './board-ctx.js';
 import { createProjection } from './project.js';
@@ -943,11 +943,55 @@ export function bindDashboardGrid(api, group, options = {}) {
         joinEl.style.width = `${r.width}px`;
         joinEl.style.height = `${r.height}px`;
     };
+    /**
+     * THE LANES a hand is over, painted. 0.4.62 made a tab group's top and
+     * bottom a fixed 30 px — a good target and an impossible guess, since to put
+     * a widget ABOVE a panel you point just BELOW its header, inside what reads
+     * as page content. Nothing moves while the hand is held (0.4.61), so the
+     * bands can be shown and aimed at. The band you are IN still wears the mark.
+     */
+    let lanesEl = null;
+    const showLanes = (c) => {
+        var _a;
+        const layer = htmlLayer();
+        if (!c || !layer) {
+            lanesEl === null || lanesEl === void 0 ? void 0 : lanesEl.remove();
+            lanesEl = null;
+            return;
+        }
+        if (!lanesEl || lanesEl.parentElement !== layer) {
+            lanesEl === null || lanesEl === void 0 ? void 0 : lanesEl.remove();
+            lanesEl = document.createElement('div');
+            lanesEl.className = 'axdb-lanes';
+            layer.prepend(lanesEl);
+        }
+        lanesEl.style.left = `${c.frame.x}px`;
+        lanesEl.style.top = `${c.frame.y}px`;
+        lanesEl.style.width = `${c.frame.width}px`;
+        lanesEl.style.height = `${c.frame.height}px`;
+        const want = bandRects(c);
+        while (lanesEl.childElementCount > want.length)
+            (_a = lanesEl.lastElementChild) === null || _a === void 0 ? void 0 : _a.remove();
+        while (lanesEl.childElementCount < want.length) {
+            const el = document.createElement('div');
+            el.className = 'axdb-lane';
+            lanesEl.appendChild(el);
+        }
+        want.forEach((b, i) => {
+            const el = lanesEl.children[i];
+            el.setAttribute('data-lane', b.side);
+            el.style.left = `${b.rect.x - c.frame.x}px`;
+            el.style.top = `${b.rect.y - c.frame.y}px`;
+            el.style.width = `${b.rect.width}px`;
+            el.style.height = `${b.rect.height}px`;
+        });
+    };
     const endPendingBeside = () => {
         pendingBeside = null;
         joinEl === null || joinEl === void 0 ? void 0 : joinEl.remove();
         joinEl = null;
     };
+    const endLanes = () => showLanes(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);
@@ -1339,6 +1383,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             }
         }
         endPendingBeside();
+        endLanes();
         disarmGlideSoon();
         releasePointer(g.pointerId);
         api.container.style.cursor = '';
@@ -1383,6 +1428,7 @@ export function bindDashboardGrid(api, group, options = {}) {
     const cancelActiveGesture = (notify = true) => {
         var _a, _b, _c;
         endPendingBeside();
+        endLanes();
         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;
@@ -1527,6 +1573,12 @@ export function bindDashboardGrid(api, group, options = {}) {
         // BEFORE any engine is asked anything. The strip still wins over every
         // board; a band's stickiness and the vacated cell still hold a beside.
         const z = resolveTileZone(g, ev);
+        // Show the container's bands while a widget is over it: they are a fixed
+        // depth, so they must be visible to be aimed at (0.4.63). A group is never
+        // shown them — it is moved by intent and pushes what is in its way.
+        showLanes(g.subject === 'node' && !isStatic
+            ? containerUnder({ x: ev.world.x, y: ev.world.y, roots: lastRoots, restFrames: lastRests, ghostSubtree: EMPTY_SUBTREE, homeChain: homeChain() })
+            : null);
         if (z.kind === 'strip' && options.tabDrop && !isStatic && g.kind !== 'palette' && g.subject === 'node') {
             // -- INTO A STRIP: the widget becomes a new tab there, so it leaves
             // this board (survivors settle home) and the strip marks the slot.
@@ -2197,6 +2249,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,
                     });
                 }
@@ -2246,6 +2303,9 @@ 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. */
+    /** The tree and the rest frames the LAST resolve used — the lanes are painted on exactly those. */
+    let lastRoots = [];
+    let lastRests = new Map();
     const resolveTileZone = (g, ev) => {
         var _a, _b, _c, _d, _e;
         const roots = zoneRoots();
@@ -2256,6 +2316,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         // pointer, so read live it would answer about a container that is only
         // there because of the answer.
         const rests = restFramesOf(g);
+        lastRoots = roots;
+        lastRests = rests;
         let strip = null;
         if (((_a = options.tabDrop) === null || _a === void 0 ? void 0 : _a.tabIndexAt) && !isStatic && g.kind !== 'palette' && g.subject === 'node') {
             // A group never becomes a tab: over a container's strip it is over the
@@ -2287,7 +2349,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/styles.d.ts

@@ -22,6 +22,6 @@
  */
 export declare const DASHBOARD_KIT_STYLE_ID = "grafloria-dashboard-kit-styles";
 /** The kit stylesheet as text — for a host that bundles its own CSS, and for the styling spec. */
-export declare const DASHBOARD_KIT_CSS = "\n/* ===== reflow glide (armed on the html layer for the whole gesture) ===== */\n.grafloria-html-layer.axdb-glide > .grafloria-node-host {\n  transition: left .28s cubic-bezier(.2, 0, .2, 1), top .28s cubic-bezier(.2, 0, .2, 1),\n              width .28s cubic-bezier(.2, 0, .2, 1), height .28s cubic-bezier(.2, 0, .2, 1);\n}\n\n/* Motion is a preference (WCAG 2.3.3): no glide for those who asked for none. */\n@media (prefers-reduced-motion: reduce) {\n  .grafloria-html-layer.axdb-glide > .grafloria-node-host { transition: none; }\n}\n\n/* ===== keyboard focus: the roving tab stop shows where it is (WCAG 2.4.7) ===== */\n.grafloria-html-layer > .grafloria-node-host:focus-visible {\n  outline: 2px solid var(--axdb-accent, #3b52d9);\n  outline-offset: 2px;\n  border-radius: var(--axdb-rs-radius, 8px);\n}\n\n/* ===== the held tile: transition-exempt ghost, above everything ===== */\n.grafloria-html-layer > .grafloria-node-host.axdb-ghost,\n.grafloria-html-layer.axdb-glide > .grafloria-node-host.axdb-ghost {\n  transition: none;\n  z-index: 30;\n  opacity: .85;\n  cursor: grabbing;\n  filter: drop-shadow(0 10px 16px rgba(16, 24, 40, .3));\n}\n/* Outside the board: release will REMOVE \u2014 dim the ghost to say so. */\n.grafloria-html-layer > .grafloria-node-host.axdb-ghost.axdb-out { opacity: .35; filter: grayscale(.6); }\n\n/* ===== the kit's chrome glides WITH the tiles it belongs to (0.4.43) =====\n   A pushed group's strip, slab and surface used to jump to the new slot while\n   its tiles slid there: one group, two motions. */\n.grafloria-html-layer.axdb-glide > .axdb-tabs,\n.grafloria-html-layer.axdb-glide > .axdb-slab,\n.grafloria-html-layer.axdb-glide > .axdb-group-bg {\n  transition: left .28s cubic-bezier(.2, 0, .2, 1), top .28s cubic-bezier(.2, 0, .2, 1),\n              width .28s cubic-bezier(.2, 0, .2, 1), height .28s cubic-bezier(.2, 0, .2, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  .grafloria-html-layer.axdb-glide > .axdb-tabs,\n  .grafloria-html-layer.axdb-glide > .axdb-slab,\n  .grafloria-html-layer.axdb-glide > .axdb-group-bg { transition: none; }\n}\n\n/* ===== CARRIED (0.4.43): a group dragged by its strip or band moves as ONE thing =====\n   Its whole subtree \u2014 tiles, strips, slabs, surface \u2014 is transition-exempt like\n   the ghost and floats with it; the surface casts the shadow. */\n.grafloria-html-layer > .axdb-carried,\n.grafloria-html-layer.axdb-glide > .axdb-carried { transition: none; cursor: grabbing; }\n.grafloria-html-layer > .grafloria-node-host.axdb-carried { z-index: 30; opacity: .92; }\n.grafloria-html-layer > .axdb-group-bg.axdb-carried { z-index: 29; filter: drop-shadow(0 10px 16px rgba(16, 24, 40, .3)); }\n.grafloria-html-layer > .axdb-slab.axdb-carried { z-index: 31; }\n.grafloria-html-layer > .axdb-tabs.axdb-carried { z-index: 32; }\n\n/* ===== the placeholder: dashed slab, truthful, never animated ===== */\n.grafloria-html-layer > .axdb-ph {\n  position: absolute;\n  border-radius: var(--axdb-rs-radius, 8px);\n  background: rgba(30, 34, 45, .14);\n  border: 2px dashed rgba(30, 34, 45, .28);\n  box-sizing: border-box;\n  pointer-events: none;\n  z-index: 0;\n  transition: none;\n}\n/* A slab move asked for a cell it cannot have (a locked section in the way): the wanted cell in the danger tone. */\n.grafloria-html-layer > .axdb-ph.axdb-ph--no { border-color: var(--axdb-danger, #b3123c); background: var(--axdb-danger-soft, rgba(179, 18, 60, .07)); }\n\n@media (prefers-color-scheme: dark) {\n  .grafloria-html-layer > .axdb-ph { background: rgba(220, 225, 240, .12); border-color: rgba(220, 225, 240, .3); }\n}\n\n/* ===== corner resize handle (hover-revealed, radius-matched) ===== */\n:is(.grafloria-node-host, .axdb-slab) > .axdb-rs {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  width: 24px;   /* WCAG 2.5.8: a 24-px minimum target (was 18) */\n  height: 24px;\n  cursor: nwse-resize;\n  border-right: 3px solid rgba(120, 130, 148, .55);\n  border-bottom: 3px solid rgba(120, 130, 148, .55);\n  border-bottom-right-radius: var(--axdb-rs-radius, 8px);\n  opacity: 0;\n  transition: opacity .12s;\n  z-index: 5;\n}\n.grafloria-node-host:hover > .axdb-rs { opacity: 1; }\n/* A finger never hovers: on touch devices the corner handle is always visible\n   (review D8 \u2014 hover-only meant no resize at all on a tablet). */\n@media (hover: none) { .grafloria-node-host > .axdb-rs { opacity: .8; } }\n.grafloria-node-host > .axdb-rs:hover { border-color: #3b52d9; }\n/* RTL boards grow leftwards, so the grab corner mirrors with them. */\n:is(.grafloria-node-host, .axdb-slab) > .axdb-rs.axdb-rs--rtl {\n  right: auto;\n  left: 0;\n  cursor: nesw-resize;\n  border-right: none;\n  border-left: 3px solid rgba(120, 130, 148, .55);\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: var(--axdb-rs-radius, 8px);\n}\n\n/* ===== palette drag-in chip (screen-space clone following the cursor) ===== */\n.axdb-drag-chip {\n  position: fixed;\n  z-index: 9999;\n  pointer-events: none;\n  opacity: .9;\n  filter: drop-shadow(0 8px 14px rgba(16, 24, 40, .3));\n  transition: opacity .12s, filter .12s;\n}\n/* A bounded board with no room refuses the entry: the chip dims to say so\n   (the same signal a tile ghost gives outside the board). Without this rule\n   the class was set and nothing showed \u2014 a refusal a user could not see. */\n.axdb-drag-chip.axdb-out { opacity: .35; filter: grayscale(.7) drop-shadow(0 8px 14px rgba(16, 24, 40, .2)); }\n/* A tab dragged off its strip: VS Code carries the TAB, not the editor, so\n   what follows the pointer is a chip wearing the tab's own label. */\n.axdb-tab-chip {\n  padding: 5px 12px;\n  max-width: 220px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font: 500 12px/1.4 var(--axdb-font, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  color: var(--axdb-tabs-on-fg, #1f2430);\n  background: var(--axdb-tabs-on-bg, #fff);\n  border-radius: var(--axdb-tab-radius, 6px);\n  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(31, 36, 48, .08);\n}\n@media (prefers-color-scheme: dark) {\n  .axdb-tab-chip {\n    color: var(--axdb-tabs-on-fg, #eceef4);\n    background: var(--axdb-tabs-on-bg, #232836);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 1px rgba(236, 238, 244, .12);\n  }\n}\n/* A tab held over ANOTHER group: it will join that group, not the board. The\n   group's frame lights up, and its strip marks the slot the tab will take \u2014\n   a bar before the tab it lands in front of, or after the last one. */\n.grafloria-html-layer > .axdb-join {\n  position: absolute;\n  z-index: 3;\n  pointer-events: none;\n  box-sizing: border-box;\n  border: 2px dashed var(--axdb-accent, #3b52d9);\n  background: var(--axdb-accent-soft, rgba(59, 82, 217, .08));\n  border-radius: var(--axdb-rs-radius, 8px);\n}\n.axdb-tabs.axdb-tabs--drop { box-shadow: inset 0 -2px 0 var(--axdb-accent, #3b52d9); }\n.axdb-tab.axdb-tab--drop-before { position: relative; }\n.axdb-tab.axdb-tab--drop-before::before {\n  content: \"\"; position: absolute; left: -3px; top: 4px; bottom: 4px; width: 3px;\n  border-radius: 2px; background: var(--axdb-accent, #3b52d9);\n}\n.axdb-tabs.axdb-tabs--drop-end::after {\n  content: \"\"; display: inline-block; width: 3px; height: 18px; margin: 0 4px;\n  border-radius: 2px; background: var(--axdb-accent, #3b52d9); vertical-align: middle; align-self: center;\n}\n\n/* ===========================================================================\n   BUILT-IN WIDGET CARDS \u2014 what widgets.ts paints when a page writes no\n   renderWidget. Class-prefixed (never element selectors), so this can only\n   ever style DOM the kit itself produced. Colours are CSS variables on the\n   card, so a page re-skins every built-in widget by setting them once; the\n   corner radius follows --axdb-rs-radius, which is also the placeholder's and\n   the resize handle's, so the three can never drift apart.\n   =========================================================================== */\n.axdb-widget {\n  --axdb-ink: #1f2430;\n  /* 5.95:1 on the card \u2014 WCAG 1.4.3 for the 9\u201311px captions this paints\n     (the #7a8496 it replaced sat at 3.77:1, axe-core's first finding). */\n  --axdb-muted: #5a6478;\n  --axdb-grid: rgba(120, 130, 148, .22);\n  --axdb-card: #fff;\n  --axdb-line: #e5e8ef;\n  --axdb-soft: rgba(120, 130, 148, .14);\n  --axdb-up: #0f7a3d;     /* 5.42:1 */\n  --axdb-down: #be123c;   /* 6.29:1 */\n  /* The categorical palette, as tokens so the dark card can carry its own\n     steps: every entry clears 3:1 against its card (WCAG 1.4.11). */\n  --axdb-c1: #3b52d9; --axdb-c2: #0369a1; --axdb-c3: #0f766e;\n  --axdb-c4: #b45309; --axdb-c5: #6d28d9; --axdb-c6: #475569;\n  /* The header band: a panel wears its title in a band across its top, the\n     way DevExpress, Grafana and Metabase panels do \u2014 tinted ground, hairline\n     below, sentence case (0.4.36; the tracked uppercase micro-label before). */\n  --axdb-head-bg: #f7f8fb;\n  --axdb-head-fg: #2a3140;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 0;\n  background: var(--axdb-card);\n  border: 1px solid var(--axdb-line);\n  border-radius: var(--axdb-rs-radius, 8px);\n  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);\n  font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  color: var(--axdb-ink);\n}\n/* The host is the card's size container (named, so a widget's inner parts can\n   ask the TILE's size as well as their own body's), so the card can shed its\n   padding as the tile gets short instead of clipping its own content. */\n.grafloria-html-layer > .grafloria-node-host { container: axdb-tile / size; }\n/* Two class hops on the header: these blocks precede the header's own rule\n   below and would lose the cascade at equal specificity \u2014 at 54 px the margin\n   stayed 8 px, the body shrank to 14 px and the KPI figure hid. */\n@container axdb-tile (max-height: 90px) {\n  .axdb-widget > .axdb-widget-h { padding: 5px 12px; font-size: 11.5px; }\n  .axdb-widget > .axdb-widget-b { padding: 6px 12px; }\n}\n/* The row floor: the band gives way to an inline label beside the figure. */\n@container axdb-tile (max-height: 46px) {\n  .axdb-widget > .axdb-widget-h { padding: 0 0 0 12px; background: none; border-bottom: 0; }\n  .axdb-widget > .axdb-widget-b { padding: 3px 12px; }\n}\n@container axdb-tile (max-height: 26px) {\n  .axdb-widget > .axdb-widget-h { display: none; }\n  .axdb-widget > .axdb-widget-b { padding: 1px 12px; }\n}\n.axdb-widget-h {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: none;\n  min-width: 0;\n  padding: 9px 14px;\n  background: var(--axdb-head-bg);\n  border-bottom: 1px solid var(--axdb-line);\n  font: 600 12.5px/1.3 system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  letter-spacing: -.005em;\n  color: var(--axdb-head-fg);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* Drag-handle mode (DevExpress drags an item by its caption): the header is\n   the grip and says so with a dot pattern and a grab cursor; the body keeps\n   its own cursor because a press there starts nothing. */\n.axdb-drag-handle .axdb-widget > .axdb-widget-h { cursor: grab; }\n.axdb-drag-handle .axdb-widget > .axdb-widget-h::before {\n  content: ''; flex: none; width: 8px; height: 12px; opacity: .55;\n  background: radial-gradient(circle, currentColor 1.1px, transparent 1.5px) 0 0 / 4px 4px;\n}\n/* A PAINTED GRIP (dragHandle: { grip: true }): the only drag zone, a small\n   dotted tab along the card's top edge. Inside sits in the header band and\n   the header makes room for it; outside is a tab above the card, the\n   DevExpress item bar. The host must not clip it. */\n.grafloria-node-host > .axdb-grip {\n  position: absolute; z-index: 4; box-sizing: border-box; width: 24px; height: 12px;\n  border: 1px solid var(--axdb-line, #e7eaf1); border-radius: 3px; background: var(--axdb-card, #fff);\n  color: var(--axdb-muted, #5a6478); cursor: grab;\n  /* Shown on the SELECTED widget only (the DevExpress designer shows an item's\n     bar on the selected item): a press or keyboard focus selects, a void\n     click clears. Hidden, it takes no pointer either. */\n  opacity: 0; pointer-events: none; transition: opacity .12s ease;\n}\n.grafloria-node-host.axdb-selected > .axdb-grip, .grafloria-node-host:focus-within > .axdb-grip { opacity: 1; pointer-events: auto; }\n.grafloria-node-host > .axdb-grip::before {\n  content: ''; position: absolute; left: 5px; top: 2px; width: 12px; height: 6px;\n  background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 0 / 4px 3px;\n}\n.grafloria-node-host > .axdb-grip:hover { border-color: var(--axdb-accent, #3b52d9); color: var(--axdb-accent, #3b52d9); }\n/* The selected card says so, quietly. --axdb-accent themes the grip's hover, the\n   ring and the focus outline together; --axdb-accent-ring the ring alone. */\n.grafloria-node-host.axdb-selected > .axdb-widget { box-shadow: 0 0 0 1.5px var(--axdb-accent-ring, rgba(59, 82, 217, .55)), 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05); }\n/* While a resize edge is near, the host and everything in it (a chart canvas\n   with its own cursor included) show the edge's cursor. */\n.grafloria-node-host[data-axdb-edge=\"ns-resize\"], .grafloria-node-host[data-axdb-edge=\"ns-resize\"] * { cursor: ns-resize !important; }\n.grafloria-node-host[data-axdb-edge=\"ew-resize\"], .grafloria-node-host[data-axdb-edge=\"ew-resize\"] * { cursor: ew-resize !important; }\n.grafloria-node-host[data-axdb-edge=\"nwse-resize\"], .grafloria-node-host[data-axdb-edge=\"nwse-resize\"] * { cursor: nwse-resize !important; }\n.grafloria-node-host[data-axdb-edge=\"nesw-resize\"], .grafloria-node-host[data-axdb-edge=\"nesw-resize\"] * { cursor: nesw-resize !important; }\n/* INSIDE: centred on the header's text line and flush with the card padding,\n   per size tier (padding 13/15, then 8/14, 4/12, 2/12). */\n.grafloria-node-host > .axdb-grip--inside { top: 12px; }\n.grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 15px; }\n.grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 15px; }\n.grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 3px; }\n@container axdb-tile (max-height: 90px) {\n  .grafloria-node-host > .axdb-grip--inside { top: 9px; }\n  .grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 14px; }\n  .grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 14px; }\n  .grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 2px; }\n  .grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 46px; }\n  .grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 46px; }\n  .grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 15px; }\n}\n@container axdb-tile (max-height: 46px) {\n  .grafloria-node-host > .axdb-grip--inside { top: 5px; }\n  .grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 12px; }\n  .grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 12px; }\n  .grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 1px; }\n  .grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 44px; }\n  .grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 44px; }\n  .grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 13px; }\n}\n@container axdb-tile (max-height: 26px) {\n  .grafloria-node-host > .axdb-grip--inside { top: 2px; }\n}\n/* OUTSIDE: a tab on the card's top edge, its corners in line with the card's. */\n/* The OUTSIDE tab lives in the gap between tiles: never taller than the gap\n   less a pixel (an 11-px tab in a 10-px gap sat on the tile above), never\n   shorter than 6 px so the dots still read. */\n.grafloria-node-host > .axdb-grip--outside { top: calc(-1 * clamp(6px, var(--axdb-gap, 11px) - 1px, 11px)); height: clamp(6px, calc(var(--axdb-gap, 11px) - 1px), 11px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; box-shadow: 0 -1px 2px rgba(16, 24, 40, .08); }\n.grafloria-node-host > .axdb-grip--outside.axdb-grip--left { left: 10px; }\n.grafloria-node-host > .axdb-grip--outside.axdb-grip--right { right: 10px; }\n.grafloria-node-host > .axdb-grip--center { left: 50%; transform: translateX(-50%); }\n/* The header makes room for an inside grip on its side \u2014 inset + the 24-px\n   grip + an 8-px gap, per tier (32 px under the band's 14-px inset hid the\n   first letter of the title) \u2014 and a centred one sits above the text. */\n.grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 47px; }\n.grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 47px; }\n.grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 17px; }\n.axdb-widget-b { flex: 1; min-height: 0; position: relative; padding: 12px 14px; }\n/* A drag across a STATIC board (nothing prevents the press's default there)\n   used to select every label on it; kit cards are not prose. Tables stay\n   copyable \u2014 a figure in a grid is the one thing a viewer selects. */\n.axdb-widget { user-select: none; -webkit-user-select: none; }\n.axdb-widget .axdb-table { user-select: text; -webkit-user-select: text; }\n.axdb-widget-b > svg { display: block; width: 100%; height: 100%; }\n.axdb-widget-b.axdb-scroll { overflow: auto; }\n/* A chart WITH a legend under it: the plot yields height, the legend keeps its\n   own (without this the 100%-tall svg pushes the legend out of the card). */\n.axdb-widget-b.axdb-has-lg { display: flex; flex-direction: column; }\n.axdb-widget-b.axdb-has-lg > svg { flex: 1; height: auto; min-height: 0; }\n/* The data behind a chart, for readers that cannot see the chart: present in\n   the accessibility tree, absent from the picture (WCAG 1.1.1). */\n.axdb-sr {\n  position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;\n  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;\n}\n.axdb-widget-empty {\n  display: flex; align-items: center; justify-content: center; height: 100%;\n  font: 500 11.5px/1.3 system-ui, sans-serif; color: var(--axdb-muted);\n}\n\n/* kpi: value + delta stack, the spark yields its height before they do */\n/* A SIZE CONTAINER, so the card's type scales with the tile instead of\n   clipping. Fit-mode shrinks tiles when rows are added (dropping a chart above\n   the KPI row took these from 122px to 85px) and fixed 30px/12px lines were\n   sliced mid-glyph by the card's overflow \u2014 the audited \"trimmed\" widgets.\n   cqh = 1% of the body's own height, clamped so full-size tiles look exactly\n   as before and short tiles compress instead of cutting. */\n.axdb-widget-b.axdb-kpi { display: flex; flex-direction: column; container: axdb-kpi / size; }\n/* STEP DOWN, NEVER CLIP. As the body gets shorter the sparkline goes first, then the\n   delta, then the value \u2014 the header alone at the row floor. Before this a 99-px row\n   drew the sparkline as a 13-px sliver and a 28-px row cut the value mid-glyph (the\n   fluid board, after a drag pushed the KPI row down). Thresholds are body heights. */\n/* Two class hops, so these outrank \".axdb-widget-b > svg { display: block }\" \u2014\n   a bare .axdb-kpi-s lost that cascade and the sparkline stayed. */\n@container (max-height: 78px) { .axdb-kpi > .axdb-kpi-s { display: none; } }\n@container (max-height: 40px) { .axdb-kpi > .axdb-kpi-d { display: none; } }\n@container (max-height: 16px) { .axdb-kpi > .axdb-kpi-v { display: none; } }\n.axdb-kpi-v { font: 700 clamp(15px, 44cqh, 30px)/1.05 system-ui, sans-serif; letter-spacing: -.02em; color: var(--axdb-ink); white-space: nowrap; }\n.axdb-kpi-d { margin-top: clamp(1px, 5cqh, 6px); font: 600 clamp(9px, 19cqh, 12px)/1.2 system-ui, sans-serif; white-space: nowrap; }\n.axdb-kpi-d span { color: var(--axdb-muted); font-weight: 500; }\n.axdb-kpi-d.up { color: var(--axdb-up); }\n.axdb-kpi-d.down { color: var(--axdb-down); }\n/* Grows into a tall tile (a 3-row KPI is not a number over a void) and never\n   takes more than two fifths of the body. */\n.axdb-kpi-s { margin-top: auto; height: auto; min-height: 0; flex: 1 1 34px; max-height: 40%; }\n/* SHORT AND WIDE \u2014 a one-row KPI on a fluid board. Stacked, a short tile dropped\n   its sparkline and left a small figure in the corner of an empty card. Here the\n   figure, its delta and the sparkline sit in a row and the spark fills the width.\n   The outer query asks the TILE (host), the inner one the body, so a strip too\n   thin for a readable spark (under 24 px) keeps the figure alone. 340 px is what\n   a figure, its delta, the gaps and a spark worth reading need \u2014 the builder's\n   236-px tiles got a 40-px wedge of spark beside the delta. */\n@container axdb-tile (max-height: 125px) and (min-width: 340px) {\n  .axdb-widget--kpi > .axdb-kpi { flex-direction: row; align-items: center; gap: 14px; }\n  .axdb-widget--kpi .axdb-kpi-d { margin-top: 0; }\n  @container axdb-kpi (min-height: 24px) {\n    .axdb-kpi > .axdb-kpi-s { display: block; flex: 1 1 40%; min-width: 80px; height: 100%; max-height: 100%; margin-top: 0; align-self: stretch; }\n  }\n}\n/* THE STRIP (row floor): header and figure on one line, the spark beside them\n   when the tile is wide enough. */\n@container axdb-tile (max-height: 46px) {\n  .axdb-widget--kpi { flex-direction: row; align-items: center; gap: 12px; }\n  .axdb-widget--kpi > .axdb-widget-h { flex: none; padding: 0 0 0 12px; background: none; border-bottom: 0; }\n  /* The body is a SIZE container: in a centred row it would collapse to zero\n     and every height query would fire. It takes the card's full inner height. */\n  .axdb-widget--kpi > .axdb-kpi { flex: 1; align-self: stretch; }\n}\n\n/* SPLIT LAYOUT chrome: a divider sits in the gap between two siblings (a\n   24-px hit zone around a 10-px gap) and shows its line on hover or while\n   dragged; the insertion line marks the edge a dragged widget will land on. */\n.grafloria-html-layer > .axdb-div { position: absolute; z-index: 2; pointer-events: auto; background: transparent; }\n.grafloria-html-layer > .axdb-div--row { cursor: col-resize; }\n.grafloria-html-layer > .axdb-div--column { cursor: row-resize; }\n.grafloria-html-layer > .axdb-div::after {\n  content: \"\"; position: absolute; border-radius: 2px; background: #3b52d9; opacity: 0; transition: opacity .12s ease;\n}\n.grafloria-html-layer > .axdb-div--row::after { left: 50%; top: 8px; bottom: 8px; width: 4px; margin-left: -2px; }\n.grafloria-html-layer > .axdb-div--column::after { top: 50%; left: 8px; right: 8px; height: 4px; margin-top: -2px; }\n.grafloria-html-layer > .axdb-div:hover::after, .grafloria-html-layer > .axdb-div.axdb-active::after { opacity: .9; }\n.grafloria-html-layer > .axdb-ins {\n  position: absolute; z-index: 3; pointer-events: none; border-radius: 2px;\n  background: #3b52d9; box-shadow: 0 0 0 3px rgba(59, 82, 217, .22);\n}\n@media (prefers-reduced-motion: reduce) { .grafloria-html-layer > .axdb-div::after { transition: none; } }\n\n/* donut: ring beside its legend. The ring takes the body's height (a tall\n   tile gets a bigger ring, not dead card), square, capped so its centre figure\n   stays a figure and not a headline. */\n.axdb-widget-b.axdb-donut { display: flex; align-items: center; gap: 10px; }\n/* A legend taller than a SHORT body (a 2-row donut on a squeezed board) is\n   clipped at its own foot, not centred over the title above it. */\n.axdb-widget-b.axdb-donut > .axdb-lg--col { max-height: 100%; min-height: 0; overflow: hidden; }\n.axdb-widget-b.axdb-donut > svg {\n  flex: 0 0 auto; width: auto; height: 100%; max-height: 260px; max-width: 60%; aspect-ratio: 1 / 1;\n}\n\n/* READABILITY TIERS (widgets.ts chartTier): the text is always in the DOM;\n   what a short body cannot afford is hidden, not dropped. */\n.axdb-tier-1 .axdb-yt--q, .axdb-tier-1 .axdb-yl--q,\n.axdb-tier-2 .axdb-yt--q, .axdb-tier-2 .axdb-yl--q,\n.axdb-tier-2 .axdb-yt--h, .axdb-tier-2 .axdb-yl--h,\n.axdb-tier-2 .axdb-xt, .axdb-tier-2 .axdb-vt,\n.axdb-lg--off { display: none; }\n\n/* SECTION CHROME: a pointer-transparent overlay on every member group. It\n   wears the selection ring and, while selected, the corner handle. */\n.grafloria-html-layer > .axdb-slab { position: absolute; pointer-events: none; border-radius: var(--axdb-rs-radius, 8px); z-index: 4; }\n/* Selected, the overlay rises above the tiles so ITS corner handle wins a\n   corner it shares with a child's; unselected, its handle takes no presses. */\n.grafloria-html-layer > .axdb-slab.axdb-slab--selected { z-index: 6; box-shadow: 0 0 0 1.5px var(--axdb-accent-ring, rgba(59, 82, 217, .55)); }\n.grafloria-html-layer > .axdb-slab > .axdb-rs { pointer-events: none; opacity: 0; }\n.grafloria-html-layer > .axdb-slab.axdb-slab--selected > .axdb-rs { pointer-events: auto; opacity: 1; }\n.grafloria-html-layer > .axdb-slab.axdb-slab--static > .axdb-rs { display: none; }\n\n/* GROUP FRAME (0.4.43): a TAB CONTAINER wears a frame by default \u2014 a bordered\n   slab, and a tinted surface UNDER its pages (the strip's own track colour, so\n   strip and body read as one panel). The layer is isolated so the surface can\n   sit below every tile at z -1 and still paint above the canvas. */\n.grafloria-html-layer { isolation: isolate; }\n.grafloria-html-layer > .axdb-group-bg {\n  position: absolute; pointer-events: none; z-index: -1; box-sizing: border-box;\n  border-radius: var(--axdb-rs-radius, 8px);\n  background: var(--axdb-group-bg, #f1f3f8);\n}\n.grafloria-html-layer > .axdb-slab.axdb-slab--tabs {\n  box-sizing: border-box;\n  border: 1px solid var(--axdb-group-border, var(--axdb-line, #e5e8ef));\n}\n@media (prefers-color-scheme: dark) {\n  .grafloria-html-layer > .axdb-group-bg { background: var(--axdb-group-bg, #1b2029); }\n  .grafloria-html-layer > .axdb-slab.axdb-slab--tabs { border-color: var(--axdb-group-border, rgba(236, 238, 244, .12)); }\n}\n\n/* SECTION CAPTION (0.4.22): the band on the slab. Geometry is inline (the\n   reserve and the pixels come from one function); everything visual is a\n   variable the options write and a theme may override. The band takes the\n   pointer \u2014 the slab does not \u2014 so a press on it is the section's. */\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h {\n  position: absolute; box-sizing: border-box; pointer-events: auto; z-index: 1;\n  display: flex; align-items: center; gap: 6px; min-width: 0;\n  padding: var(--axdb-caption-pad, 0 12px);\n  background: var(--axdb-caption-bg, rgba(31, 36, 48, .045));\n  /* A hairline by default: two bands meeting (a captioned section inside a\n     captioned section) read as two headers, not one grey block. */\n  border-bottom: var(--axdb-caption-border, 1px solid rgba(31, 36, 48, .1));\n  color: var(--axdb-caption-fg, #1f2430);\n  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);\n  text-transform: var(--axdb-caption-transform, none);\n  letter-spacing: -.005em;\n  border-radius: var(--axdb-rs-radius, 8px) var(--axdb-rs-radius, 8px) 0 0;\n  cursor: default; user-select: none; -webkit-user-select: none; overflow: hidden;\n  transition: opacity .12s;\n}\n/* The modifiers carry the band's own selector so they outrank its defaults. */\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--center { justify-content: center; }\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--end { justify-content: flex-end; }\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--vtop { align-items: flex-start; }\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--vbottom { align-items: flex-end; }\n/* 'tab': the same band sized to its text, a chip at the leading corner. It\n   reserves its height like 'inside' \u2014 see captionReserve. */\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--tab {\n  max-width: 100%; border-radius: var(--axdb-rs-radius, 8px);\n  border-bottom: var(--axdb-caption-border-tab, none);\n  box-shadow: inset 0 0 0 1px rgba(31, 36, 48, .08);\n}\n/* 'hover': an overlay. It reserves nothing, so while hidden it must not take\n   the pointer (an invisible band swallowed clicks on the content beneath),\n   and while shown it paints OPAQUE \u2014 a 5% tint over a chart is a smear. */\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--hover {\n  opacity: 0; pointer-events: none;\n  background: var(--axdb-caption-bg, #fff);\n  box-shadow: 0 1px 4px rgba(31, 36, 48, .16);\n}\n/* .axdb-slab--hot is set by the binder from the live pointer (the overlay\n   takes no pointer of its own, so CSS :hover can never fire on it). */\n.grafloria-html-layer > .axdb-slab.axdb-slab--hot > .axdb-slab-h.axdb-slab-h--hover,\n.grafloria-html-layer > .axdb-slab.axdb-slab--selected > .axdb-slab-h.axdb-slab-h--hover { pointer-events: auto; opacity: 1; }\n/* the actions of a hovered or selected section */\n.grafloria-html-layer > .axdb-slab.axdb-slab--hot > .axdb-slab-h > .axdb-slab-h-actions { opacity: 1; }\n/* the tight tier: a section under 90 px */\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--tight { font-size: min(var(--axdb-caption-font-size, 12px), 12px); gap: 4px; }\n.axdb-slab-h--tight .axdb-slab-h-sub, .axdb-slab-h--tight .axdb-slab-h-actions { display: none; }\n.axdb-slab-h-icon { flex: none; }\n.axdb-slab-h-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 0 1 auto; }\n.axdb-slab-h-text, .axdb-slab-h-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.axdb-slab-h-sub { font-size: .88em; font-weight: 500; opacity: .7; }\n.axdb-slab-h-info { flex: none; opacity: .6; font-size: .9em; cursor: help; }\n.axdb-slab-h-actions { flex: none; display: flex; gap: 2px; margin-inline-start: auto; opacity: 0; transition: opacity .12s; }\n.axdb-slab-h--center .axdb-slab-h-actions, .axdb-slab-h--end .axdb-slab-h-actions { margin-inline-start: 0; }\n.axdb-slab-h:hover > .axdb-slab-h-actions, .axdb-slab--selected > .axdb-slab-h > .axdb-slab-h-actions, .axdb-slab-h:focus-within > .axdb-slab-h-actions { opacity: 1; }\n.axdb-slab-h-action {\n  all: unset; box-sizing: border-box; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;\n  border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; color: inherit; transition: background-color .12s;\n}\n.axdb-slab-h-action:hover { background: rgba(31, 36, 48, .08); }\n.axdb-slab-h-action:focus-visible { outline: 2px solid var(--axdb-accent-ring, rgba(59, 82, 217, .55)); outline-offset: -2px; }\n.axdb-slab-h-action[disabled] { opacity: .4; cursor: default; }\n.axdb-slab-h-action[disabled]:hover { background: none; }\n.grafloria-html-layer > .axdb-slab.axdb-slab--static > .axdb-slab-h { cursor: default; }\n@media (prefers-color-scheme: dark) {\n  /* The band sits on the PAGE, whose ground the kit does not own (a host that\n     stays light while the kit goes dark is common): a solid ink, not a tint,\n     so the light caption always reads. */\n  .grafloria-html-layer > .axdb-slab > .axdb-slab-h {\n    background: var(--axdb-caption-bg, #1b2029);\n    color: var(--axdb-caption-fg, #eceef4);\n    border-bottom: var(--axdb-caption-border, 1px solid rgba(236, 238, 244, .12));\n  }\n  .grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--tab { box-shadow: inset 0 0 0 1px rgba(236, 238, 244, .12); }\n  .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); }\n  .axdb-slab-h-action:hover { background: rgba(236, 238, 244, .1); }\n}\n\n/* TAB CONTAINER (0.4.27): a strip of pages across the container's top. The\n   strip takes the pointer (the tabs are real buttons); the pages below it are\n   ordinary boards. */\n.grafloria-html-layer > .axdb-tabs {\n  position: absolute; box-sizing: border-box; pointer-events: auto; z-index: 5;\n  display: flex; align-items: center; gap: 2px; padding: 3px 6px; overflow-x: auto; overflow-y: hidden;\n  background: var(--axdb-tabs-bg, #f1f3f8);\n  border-bottom: 1px solid var(--axdb-tabs-line, #e5e8ef);\n  border-radius: var(--axdb-rs-radius, 8px) var(--axdb-rs-radius, 8px) 0 0;\n  scrollbar-width: thin;\n}\n.axdb-tabs--center { justify-content: center; }\n.axdb-tabs--end { justify-content: flex-end; }\n.axdb-tabs--stretch > .axdb-tab { flex: 1 1 0; }\n/* A tab is a PILL on the track (a segmented control): quiet until hovered,\n   the active one lifted in the card's own ground. */\n.axdb-tab {\n  all: unset; box-sizing: border-box; flex: 0 0 auto; max-width: 200px;\n  padding: 0 12px; height: 100%; display: inline-flex; align-items: center;\n  font: 500 12.5px/1 system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  letter-spacing: -.005em;\n  color: var(--axdb-tabs-fg, #5a6478); cursor: pointer;\n  border-radius: var(--axdb-tab-radius, 6px);\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  transition: background-color .12s, color .12s, box-shadow .12s;\n}\n.axdb-tab:hover { background: rgba(31, 36, 48, .06); color: var(--axdb-tabs-on-fg, #1f2430); }\n.axdb-tab:focus-visible { outline: 2px solid var(--axdb-accent-ring, rgba(59, 82, 217, .55)); outline-offset: -2px; }\n.axdb-tab.axdb-tab--on {\n  background: var(--axdb-tabs-on-bg, #fff);\n  color: var(--axdb-tabs-on-fg, #1f2430);\n  font-weight: 600;\n  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(31, 36, 48, .06);\n}\n@media (prefers-reduced-motion: reduce) { .axdb-tab { transition: none; } }\n@media (prefers-color-scheme: dark) {\n  /* Solid for the same reason as the caption band: the track sits on the page. */\n  .grafloria-html-layer > .axdb-tabs { background: var(--axdb-tabs-bg, #1b2029); border-bottom-color: var(--axdb-tabs-line, rgba(236, 238, 244, .12)); }\n  .axdb-tab { color: var(--axdb-tabs-fg, #98a1b4); }\n  .axdb-tab:hover { background: rgba(236, 238, 244, .08); color: var(--axdb-tabs-on-fg, #eceef4); }\n  .axdb-tab.axdb-tab--on { background: var(--axdb-tabs-on-bg, #232836); color: var(--axdb-tabs-on-fg, #eceef4); box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 1px rgba(236, 238, 244, .1); }\n}\n\n/* legend chips, shared by line and donut */\n.axdb-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; }\n.axdb-lg--col { flex-direction: column; flex-wrap: nowrap; gap: 6px; margin-top: 0; }\n.axdb-lg i {\n  display: inline-flex; align-items: center; gap: 5px; font-style: normal;\n  font: 500 11px/1.3 system-ui, sans-serif; color: var(--axdb-muted);\n}\n.axdb-lg i b { width: 9px; height: 9px; border-radius: 3px; flex: none; }\n\n/* table */\n.axdb-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--axdb-ink); }\n.axdb-table th {\n  text-align: left; padding: 4px 8px 7px; border-bottom: 1px solid var(--axdb-line);\n  font: 600 10px/1.3 system-ui, sans-serif; letter-spacing: .4px; text-transform: uppercase;\n  color: var(--axdb-muted);\n}\n.axdb-table td { padding: 6px 8px; border-bottom: 1px solid var(--axdb-line); white-space: nowrap; }\n.axdb-table td.num { text-align: right; font-variant-numeric: tabular-nums; }\n.axdb-table tr:last-child td { border-bottom: none; }\n\n@media (prefers-color-scheme: dark) {\n  .axdb-widget {\n    --axdb-ink: #eceef4;\n    --axdb-muted: #98a1b4;\n    --axdb-grid: rgba(150, 160, 182, .2);\n    --axdb-card: #161a22;\n    --axdb-line: #2a3040;\n    --axdb-head-bg: rgba(255, 255, 255, .035);\n    --axdb-head-fg: #e6e9f0;\n    --axdb-soft: rgba(150, 160, 182, .16);\n    --axdb-up: #4ade80;\n    --axdb-down: #fb7185;\n    --axdb-c1: #8b9cff; --axdb-c2: #38bdf8; --axdb-c3: #2dd4bf;\n    --axdb-c4: #fbbf24; --axdb-c5: #a78bfa; --axdb-c6: #94a3b8;\n  }\n}\n";
+export declare const DASHBOARD_KIT_CSS = "\n/* ===== reflow glide (armed on the html layer for the whole gesture) ===== */\n.grafloria-html-layer.axdb-glide > .grafloria-node-host {\n  transition: left .28s cubic-bezier(.2, 0, .2, 1), top .28s cubic-bezier(.2, 0, .2, 1),\n              width .28s cubic-bezier(.2, 0, .2, 1), height .28s cubic-bezier(.2, 0, .2, 1);\n}\n\n/* Motion is a preference (WCAG 2.3.3): no glide for those who asked for none. */\n@media (prefers-reduced-motion: reduce) {\n  .grafloria-html-layer.axdb-glide > .grafloria-node-host { transition: none; }\n}\n\n/* ===== keyboard focus: the roving tab stop shows where it is (WCAG 2.4.7) ===== */\n.grafloria-html-layer > .grafloria-node-host:focus-visible {\n  outline: 2px solid var(--axdb-accent, #3b52d9);\n  outline-offset: 2px;\n  border-radius: var(--axdb-rs-radius, 8px);\n}\n\n/* ===== the held tile: transition-exempt ghost, above everything ===== */\n.grafloria-html-layer > .grafloria-node-host.axdb-ghost,\n.grafloria-html-layer.axdb-glide > .grafloria-node-host.axdb-ghost {\n  transition: none;\n  z-index: 30;\n  opacity: .85;\n  cursor: grabbing;\n  filter: drop-shadow(0 10px 16px rgba(16, 24, 40, .3));\n}\n/* Outside the board: release will REMOVE \u2014 dim the ghost to say so. */\n.grafloria-html-layer > .grafloria-node-host.axdb-ghost.axdb-out { opacity: .35; filter: grayscale(.6); }\n\n/* ===== the kit's chrome glides WITH the tiles it belongs to (0.4.43) =====\n   A pushed group's strip, slab and surface used to jump to the new slot while\n   its tiles slid there: one group, two motions. */\n.grafloria-html-layer.axdb-glide > .axdb-tabs,\n.grafloria-html-layer.axdb-glide > .axdb-slab,\n.grafloria-html-layer.axdb-glide > .axdb-group-bg {\n  transition: left .28s cubic-bezier(.2, 0, .2, 1), top .28s cubic-bezier(.2, 0, .2, 1),\n              width .28s cubic-bezier(.2, 0, .2, 1), height .28s cubic-bezier(.2, 0, .2, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  .grafloria-html-layer.axdb-glide > .axdb-tabs,\n  .grafloria-html-layer.axdb-glide > .axdb-slab,\n  .grafloria-html-layer.axdb-glide > .axdb-group-bg { transition: none; }\n}\n\n/* ===== CARRIED (0.4.43): a group dragged by its strip or band moves as ONE thing =====\n   Its whole subtree \u2014 tiles, strips, slabs, surface \u2014 is transition-exempt like\n   the ghost and floats with it; the surface casts the shadow. */\n.grafloria-html-layer > .axdb-carried,\n.grafloria-html-layer.axdb-glide > .axdb-carried { transition: none; cursor: grabbing; }\n.grafloria-html-layer > .grafloria-node-host.axdb-carried { z-index: 30; opacity: .92; }\n.grafloria-html-layer > .axdb-group-bg.axdb-carried { z-index: 29; filter: drop-shadow(0 10px 16px rgba(16, 24, 40, .3)); }\n.grafloria-html-layer > .axdb-slab.axdb-carried { z-index: 31; }\n.grafloria-html-layer > .axdb-tabs.axdb-carried { z-index: 32; }\n\n/* ===== the placeholder: dashed slab, truthful, never animated ===== */\n.grafloria-html-layer > .axdb-ph {\n  position: absolute;\n  border-radius: var(--axdb-rs-radius, 8px);\n  background: rgba(30, 34, 45, .14);\n  border: 2px dashed rgba(30, 34, 45, .28);\n  box-sizing: border-box;\n  pointer-events: none;\n  z-index: 0;\n  transition: none;\n}\n/* A slab move asked for a cell it cannot have (a locked section in the way): the wanted cell in the danger tone. */\n.grafloria-html-layer > .axdb-ph.axdb-ph--no { border-color: var(--axdb-danger, #b3123c); background: var(--axdb-danger-soft, rgba(179, 18, 60, .07)); }\n\n@media (prefers-color-scheme: dark) {\n  .grafloria-html-layer > .axdb-ph { background: rgba(220, 225, 240, .12); border-color: rgba(220, 225, 240, .3); }\n}\n\n/* ===== corner resize handle (hover-revealed, radius-matched) ===== */\n:is(.grafloria-node-host, .axdb-slab) > .axdb-rs {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  width: 24px;   /* WCAG 2.5.8: a 24-px minimum target (was 18) */\n  height: 24px;\n  cursor: nwse-resize;\n  border-right: 3px solid rgba(120, 130, 148, .55);\n  border-bottom: 3px solid rgba(120, 130, 148, .55);\n  border-bottom-right-radius: var(--axdb-rs-radius, 8px);\n  opacity: 0;\n  transition: opacity .12s;\n  z-index: 5;\n}\n.grafloria-node-host:hover > .axdb-rs { opacity: 1; }\n/* A finger never hovers: on touch devices the corner handle is always visible\n   (review D8 \u2014 hover-only meant no resize at all on a tablet). */\n@media (hover: none) { .grafloria-node-host > .axdb-rs { opacity: .8; } }\n.grafloria-node-host > .axdb-rs:hover { border-color: #3b52d9; }\n/* RTL boards grow leftwards, so the grab corner mirrors with them. */\n:is(.grafloria-node-host, .axdb-slab) > .axdb-rs.axdb-rs--rtl {\n  right: auto;\n  left: 0;\n  cursor: nesw-resize;\n  border-right: none;\n  border-left: 3px solid rgba(120, 130, 148, .55);\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: var(--axdb-rs-radius, 8px);\n}\n\n/* ===== palette drag-in chip (screen-space clone following the cursor) ===== */\n.axdb-drag-chip {\n  position: fixed;\n  z-index: 9999;\n  pointer-events: none;\n  opacity: .9;\n  filter: drop-shadow(0 8px 14px rgba(16, 24, 40, .3));\n  transition: opacity .12s, filter .12s;\n}\n/* A bounded board with no room refuses the entry: the chip dims to say so\n   (the same signal a tile ghost gives outside the board). Without this rule\n   the class was set and nothing showed \u2014 a refusal a user could not see. */\n.axdb-drag-chip.axdb-out { opacity: .35; filter: grayscale(.7) drop-shadow(0 8px 14px rgba(16, 24, 40, .2)); }\n/* A tab dragged off its strip: VS Code carries the TAB, not the editor, so\n   what follows the pointer is a chip wearing the tab's own label. */\n.axdb-tab-chip {\n  padding: 5px 12px;\n  max-width: 220px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font: 500 12px/1.4 var(--axdb-font, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  color: var(--axdb-tabs-on-fg, #1f2430);\n  background: var(--axdb-tabs-on-bg, #fff);\n  border-radius: var(--axdb-tab-radius, 6px);\n  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(31, 36, 48, .08);\n}\n@media (prefers-color-scheme: dark) {\n  .axdb-tab-chip {\n    color: var(--axdb-tabs-on-fg, #eceef4);\n    background: var(--axdb-tabs-on-bg, #232836);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 1px rgba(236, 238, 244, .12);\n  }\n}\n/* A tab held over ANOTHER group: it will join that group, not the board. The\n   group's frame lights up, and its strip marks the slot the tab will take \u2014\n   a bar before the tab it lands in front of, or after the last one. */\n.grafloria-html-layer > .axdb-join {\n  position: absolute;\n  z-index: 3;\n  pointer-events: none;\n  box-sizing: border-box;\n  border: 2px dashed var(--axdb-accent, #3b52d9);\n  background: var(--axdb-accent-soft, rgba(59, 82, 217, .08));\n  border-radius: var(--axdb-rs-radius, 8px);\n}\n/* THE LANES: while a widget is held over a container, its four bands are\n   shown, so \"beside it\" is a place you can see and aim at rather than a\n   fixed depth you would have to guess. The band you are IN wears the dashed\n   mark (.axdb-join) on top; these only say where the edges are. */\n.grafloria-html-layer > .axdb-lanes { position: absolute; z-index: 2; pointer-events: none; }\n.grafloria-html-layer > .axdb-lanes > .axdb-lane {\n  position: absolute;\n  box-sizing: border-box;\n  /* A SHADED MARGIN, never a line: the dashed outline already means \"the cell\n     this will take\", and two dashed treatments at once read as one shape. */\n  background: var(--axdb-lane-bg, rgba(59, 82, 217, .13));\n  border-radius: 2px;\n}\n@media (prefers-color-scheme: dark) {\n  .grafloria-html-layer > .axdb-lanes > .axdb-lane { background: var(--axdb-lane-bg, rgba(134, 155, 255, .17)); }\n}\n.axdb-tabs.axdb-tabs--drop { box-shadow: inset 0 -2px 0 var(--axdb-accent, #3b52d9); }\n.axdb-tab.axdb-tab--drop-before { position: relative; }\n.axdb-tab.axdb-tab--drop-before::before {\n  content: \"\"; position: absolute; left: -3px; top: 4px; bottom: 4px; width: 3px;\n  border-radius: 2px; background: var(--axdb-accent, #3b52d9);\n}\n.axdb-tabs.axdb-tabs--drop-end::after {\n  content: \"\"; display: inline-block; width: 3px; height: 18px; margin: 0 4px;\n  border-radius: 2px; background: var(--axdb-accent, #3b52d9); vertical-align: middle; align-self: center;\n}\n\n/* ===========================================================================\n   BUILT-IN WIDGET CARDS \u2014 what widgets.ts paints when a page writes no\n   renderWidget. Class-prefixed (never element selectors), so this can only\n   ever style DOM the kit itself produced. Colours are CSS variables on the\n   card, so a page re-skins every built-in widget by setting them once; the\n   corner radius follows --axdb-rs-radius, which is also the placeholder's and\n   the resize handle's, so the three can never drift apart.\n   =========================================================================== */\n.axdb-widget {\n  --axdb-ink: #1f2430;\n  /* 5.95:1 on the card \u2014 WCAG 1.4.3 for the 9\u201311px captions this paints\n     (the #7a8496 it replaced sat at 3.77:1, axe-core's first finding). */\n  --axdb-muted: #5a6478;\n  --axdb-grid: rgba(120, 130, 148, .22);\n  --axdb-card: #fff;\n  --axdb-line: #e5e8ef;\n  --axdb-soft: rgba(120, 130, 148, .14);\n  --axdb-up: #0f7a3d;     /* 5.42:1 */\n  --axdb-down: #be123c;   /* 6.29:1 */\n  /* The categorical palette, as tokens so the dark card can carry its own\n     steps: every entry clears 3:1 against its card (WCAG 1.4.11). */\n  --axdb-c1: #3b52d9; --axdb-c2: #0369a1; --axdb-c3: #0f766e;\n  --axdb-c4: #b45309; --axdb-c5: #6d28d9; --axdb-c6: #475569;\n  /* The header band: a panel wears its title in a band across its top, the\n     way DevExpress, Grafana and Metabase panels do \u2014 tinted ground, hairline\n     below, sentence case (0.4.36; the tracked uppercase micro-label before). */\n  --axdb-head-bg: #f7f8fb;\n  --axdb-head-fg: #2a3140;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 0;\n  background: var(--axdb-card);\n  border: 1px solid var(--axdb-line);\n  border-radius: var(--axdb-rs-radius, 8px);\n  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);\n  font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  color: var(--axdb-ink);\n}\n/* The host is the card's size container (named, so a widget's inner parts can\n   ask the TILE's size as well as their own body's), so the card can shed its\n   padding as the tile gets short instead of clipping its own content. */\n.grafloria-html-layer > .grafloria-node-host { container: axdb-tile / size; }\n/* Two class hops on the header: these blocks precede the header's own rule\n   below and would lose the cascade at equal specificity \u2014 at 54 px the margin\n   stayed 8 px, the body shrank to 14 px and the KPI figure hid. */\n@container axdb-tile (max-height: 90px) {\n  .axdb-widget > .axdb-widget-h { padding: 5px 12px; font-size: 11.5px; }\n  .axdb-widget > .axdb-widget-b { padding: 6px 12px; }\n}\n/* The row floor: the band gives way to an inline label beside the figure. */\n@container axdb-tile (max-height: 46px) {\n  .axdb-widget > .axdb-widget-h { padding: 0 0 0 12px; background: none; border-bottom: 0; }\n  .axdb-widget > .axdb-widget-b { padding: 3px 12px; }\n}\n@container axdb-tile (max-height: 26px) {\n  .axdb-widget > .axdb-widget-h { display: none; }\n  .axdb-widget > .axdb-widget-b { padding: 1px 12px; }\n}\n.axdb-widget-h {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: none;\n  min-width: 0;\n  padding: 9px 14px;\n  background: var(--axdb-head-bg);\n  border-bottom: 1px solid var(--axdb-line);\n  font: 600 12.5px/1.3 system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  letter-spacing: -.005em;\n  color: var(--axdb-head-fg);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* Drag-handle mode (DevExpress drags an item by its caption): the header is\n   the grip and says so with a dot pattern and a grab cursor; the body keeps\n   its own cursor because a press there starts nothing. */\n.axdb-drag-handle .axdb-widget > .axdb-widget-h { cursor: grab; }\n.axdb-drag-handle .axdb-widget > .axdb-widget-h::before {\n  content: ''; flex: none; width: 8px; height: 12px; opacity: .55;\n  background: radial-gradient(circle, currentColor 1.1px, transparent 1.5px) 0 0 / 4px 4px;\n}\n/* A PAINTED GRIP (dragHandle: { grip: true }): the only drag zone, a small\n   dotted tab along the card's top edge. Inside sits in the header band and\n   the header makes room for it; outside is a tab above the card, the\n   DevExpress item bar. The host must not clip it. */\n.grafloria-node-host > .axdb-grip {\n  position: absolute; z-index: 4; box-sizing: border-box; width: 24px; height: 12px;\n  border: 1px solid var(--axdb-line, #e7eaf1); border-radius: 3px; background: var(--axdb-card, #fff);\n  color: var(--axdb-muted, #5a6478); cursor: grab;\n  /* Shown on the SELECTED widget only (the DevExpress designer shows an item's\n     bar on the selected item): a press or keyboard focus selects, a void\n     click clears. Hidden, it takes no pointer either. */\n  opacity: 0; pointer-events: none; transition: opacity .12s ease;\n}\n.grafloria-node-host.axdb-selected > .axdb-grip, .grafloria-node-host:focus-within > .axdb-grip { opacity: 1; pointer-events: auto; }\n.grafloria-node-host > .axdb-grip::before {\n  content: ''; position: absolute; left: 5px; top: 2px; width: 12px; height: 6px;\n  background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 0 / 4px 3px;\n}\n.grafloria-node-host > .axdb-grip:hover { border-color: var(--axdb-accent, #3b52d9); color: var(--axdb-accent, #3b52d9); }\n/* The selected card says so, quietly. --axdb-accent themes the grip's hover, the\n   ring and the focus outline together; --axdb-accent-ring the ring alone. */\n.grafloria-node-host.axdb-selected > .axdb-widget { box-shadow: 0 0 0 1.5px var(--axdb-accent-ring, rgba(59, 82, 217, .55)), 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05); }\n/* While a resize edge is near, the host and everything in it (a chart canvas\n   with its own cursor included) show the edge's cursor. */\n.grafloria-node-host[data-axdb-edge=\"ns-resize\"], .grafloria-node-host[data-axdb-edge=\"ns-resize\"] * { cursor: ns-resize !important; }\n.grafloria-node-host[data-axdb-edge=\"ew-resize\"], .grafloria-node-host[data-axdb-edge=\"ew-resize\"] * { cursor: ew-resize !important; }\n.grafloria-node-host[data-axdb-edge=\"nwse-resize\"], .grafloria-node-host[data-axdb-edge=\"nwse-resize\"] * { cursor: nwse-resize !important; }\n.grafloria-node-host[data-axdb-edge=\"nesw-resize\"], .grafloria-node-host[data-axdb-edge=\"nesw-resize\"] * { cursor: nesw-resize !important; }\n/* INSIDE: centred on the header's text line and flush with the card padding,\n   per size tier (padding 13/15, then 8/14, 4/12, 2/12). */\n.grafloria-node-host > .axdb-grip--inside { top: 12px; }\n.grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 15px; }\n.grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 15px; }\n.grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 3px; }\n@container axdb-tile (max-height: 90px) {\n  .grafloria-node-host > .axdb-grip--inside { top: 9px; }\n  .grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 14px; }\n  .grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 14px; }\n  .grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 2px; }\n  .grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 46px; }\n  .grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 46px; }\n  .grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 15px; }\n}\n@container axdb-tile (max-height: 46px) {\n  .grafloria-node-host > .axdb-grip--inside { top: 5px; }\n  .grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 12px; }\n  .grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 12px; }\n  .grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 1px; }\n  .grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 44px; }\n  .grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 44px; }\n  .grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 13px; }\n}\n@container axdb-tile (max-height: 26px) {\n  .grafloria-node-host > .axdb-grip--inside { top: 2px; }\n}\n/* OUTSIDE: a tab on the card's top edge, its corners in line with the card's. */\n/* The OUTSIDE tab lives in the gap between tiles: never taller than the gap\n   less a pixel (an 11-px tab in a 10-px gap sat on the tile above), never\n   shorter than 6 px so the dots still read. */\n.grafloria-node-host > .axdb-grip--outside { top: calc(-1 * clamp(6px, var(--axdb-gap, 11px) - 1px, 11px)); height: clamp(6px, calc(var(--axdb-gap, 11px) - 1px), 11px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; box-shadow: 0 -1px 2px rgba(16, 24, 40, .08); }\n.grafloria-node-host > .axdb-grip--outside.axdb-grip--left { left: 10px; }\n.grafloria-node-host > .axdb-grip--outside.axdb-grip--right { right: 10px; }\n.grafloria-node-host > .axdb-grip--center { left: 50%; transform: translateX(-50%); }\n/* The header makes room for an inside grip on its side \u2014 inset + the 24-px\n   grip + an 8-px gap, per tier (32 px under the band's 14-px inset hid the\n   first letter of the title) \u2014 and a centred one sits above the text. */\n.grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 47px; }\n.grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 47px; }\n.grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 17px; }\n.axdb-widget-b { flex: 1; min-height: 0; position: relative; padding: 12px 14px; }\n/* A drag across a STATIC board (nothing prevents the press's default there)\n   used to select every label on it; kit cards are not prose. Tables stay\n   copyable \u2014 a figure in a grid is the one thing a viewer selects. */\n.axdb-widget { user-select: none; -webkit-user-select: none; }\n.axdb-widget .axdb-table { user-select: text; -webkit-user-select: text; }\n.axdb-widget-b > svg { display: block; width: 100%; height: 100%; }\n.axdb-widget-b.axdb-scroll { overflow: auto; }\n/* A chart WITH a legend under it: the plot yields height, the legend keeps its\n   own (without this the 100%-tall svg pushes the legend out of the card). */\n.axdb-widget-b.axdb-has-lg { display: flex; flex-direction: column; }\n.axdb-widget-b.axdb-has-lg > svg { flex: 1; height: auto; min-height: 0; }\n/* The data behind a chart, for readers that cannot see the chart: present in\n   the accessibility tree, absent from the picture (WCAG 1.1.1). */\n.axdb-sr {\n  position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;\n  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;\n}\n.axdb-widget-empty {\n  display: flex; align-items: center; justify-content: center; height: 100%;\n  font: 500 11.5px/1.3 system-ui, sans-serif; color: var(--axdb-muted);\n}\n\n/* kpi: value + delta stack, the spark yields its height before they do */\n/* A SIZE CONTAINER, so the card's type scales with the tile instead of\n   clipping. Fit-mode shrinks tiles when rows are added (dropping a chart above\n   the KPI row took these from 122px to 85px) and fixed 30px/12px lines were\n   sliced mid-glyph by the card's overflow \u2014 the audited \"trimmed\" widgets.\n   cqh = 1% of the body's own height, clamped so full-size tiles look exactly\n   as before and short tiles compress instead of cutting. */\n.axdb-widget-b.axdb-kpi { display: flex; flex-direction: column; container: axdb-kpi / size; }\n/* STEP DOWN, NEVER CLIP. As the body gets shorter the sparkline goes first, then the\n   delta, then the value \u2014 the header alone at the row floor. Before this a 99-px row\n   drew the sparkline as a 13-px sliver and a 28-px row cut the value mid-glyph (the\n   fluid board, after a drag pushed the KPI row down). Thresholds are body heights. */\n/* Two class hops, so these outrank \".axdb-widget-b > svg { display: block }\" \u2014\n   a bare .axdb-kpi-s lost that cascade and the sparkline stayed. */\n@container (max-height: 78px) { .axdb-kpi > .axdb-kpi-s { display: none; } }\n@container (max-height: 40px) { .axdb-kpi > .axdb-kpi-d { display: none; } }\n@container (max-height: 16px) { .axdb-kpi > .axdb-kpi-v { display: none; } }\n.axdb-kpi-v { font: 700 clamp(15px, 44cqh, 30px)/1.05 system-ui, sans-serif; letter-spacing: -.02em; color: var(--axdb-ink); white-space: nowrap; }\n.axdb-kpi-d { margin-top: clamp(1px, 5cqh, 6px); font: 600 clamp(9px, 19cqh, 12px)/1.2 system-ui, sans-serif; white-space: nowrap; }\n.axdb-kpi-d span { color: var(--axdb-muted); font-weight: 500; }\n.axdb-kpi-d.up { color: var(--axdb-up); }\n.axdb-kpi-d.down { color: var(--axdb-down); }\n/* Grows into a tall tile (a 3-row KPI is not a number over a void) and never\n   takes more than two fifths of the body. */\n.axdb-kpi-s { margin-top: auto; height: auto; min-height: 0; flex: 1 1 34px; max-height: 40%; }\n/* SHORT AND WIDE \u2014 a one-row KPI on a fluid board. Stacked, a short tile dropped\n   its sparkline and left a small figure in the corner of an empty card. Here the\n   figure, its delta and the sparkline sit in a row and the spark fills the width.\n   The outer query asks the TILE (host), the inner one the body, so a strip too\n   thin for a readable spark (under 24 px) keeps the figure alone. 340 px is what\n   a figure, its delta, the gaps and a spark worth reading need \u2014 the builder's\n   236-px tiles got a 40-px wedge of spark beside the delta. */\n@container axdb-tile (max-height: 125px) and (min-width: 340px) {\n  .axdb-widget--kpi > .axdb-kpi { flex-direction: row; align-items: center; gap: 14px; }\n  .axdb-widget--kpi .axdb-kpi-d { margin-top: 0; }\n  @container axdb-kpi (min-height: 24px) {\n    .axdb-kpi > .axdb-kpi-s { display: block; flex: 1 1 40%; min-width: 80px; height: 100%; max-height: 100%; margin-top: 0; align-self: stretch; }\n  }\n}\n/* THE STRIP (row floor): header and figure on one line, the spark beside them\n   when the tile is wide enough. */\n@container axdb-tile (max-height: 46px) {\n  .axdb-widget--kpi { flex-direction: row; align-items: center; gap: 12px; }\n  .axdb-widget--kpi > .axdb-widget-h { flex: none; padding: 0 0 0 12px; background: none; border-bottom: 0; }\n  /* The body is a SIZE container: in a centred row it would collapse to zero\n     and every height query would fire. It takes the card's full inner height. */\n  .axdb-widget--kpi > .axdb-kpi { flex: 1; align-self: stretch; }\n}\n\n/* SPLIT LAYOUT chrome: a divider sits in the gap between two siblings (a\n   24-px hit zone around a 10-px gap) and shows its line on hover or while\n   dragged; the insertion line marks the edge a dragged widget will land on. */\n.grafloria-html-layer > .axdb-div { position: absolute; z-index: 2; pointer-events: auto; background: transparent; }\n.grafloria-html-layer > .axdb-div--row { cursor: col-resize; }\n.grafloria-html-layer > .axdb-div--column { cursor: row-resize; }\n.grafloria-html-layer > .axdb-div::after {\n  content: \"\"; position: absolute; border-radius: 2px; background: #3b52d9; opacity: 0; transition: opacity .12s ease;\n}\n.grafloria-html-layer > .axdb-div--row::after { left: 50%; top: 8px; bottom: 8px; width: 4px; margin-left: -2px; }\n.grafloria-html-layer > .axdb-div--column::after { top: 50%; left: 8px; right: 8px; height: 4px; margin-top: -2px; }\n.grafloria-html-layer > .axdb-div:hover::after, .grafloria-html-layer > .axdb-div.axdb-active::after { opacity: .9; }\n.grafloria-html-layer > .axdb-ins {\n  position: absolute; z-index: 3; pointer-events: none; border-radius: 2px;\n  background: #3b52d9; box-shadow: 0 0 0 3px rgba(59, 82, 217, .22);\n}\n@media (prefers-reduced-motion: reduce) { .grafloria-html-layer > .axdb-div::after { transition: none; } }\n\n/* donut: ring beside its legend. The ring takes the body's height (a tall\n   tile gets a bigger ring, not dead card), square, capped so its centre figure\n   stays a figure and not a headline. */\n.axdb-widget-b.axdb-donut { display: flex; align-items: center; gap: 10px; }\n/* A legend taller than a SHORT body (a 2-row donut on a squeezed board) is\n   clipped at its own foot, not centred over the title above it. */\n.axdb-widget-b.axdb-donut > .axdb-lg--col { max-height: 100%; min-height: 0; overflow: hidden; }\n.axdb-widget-b.axdb-donut > svg {\n  flex: 0 0 auto; width: auto; height: 100%; max-height: 260px; max-width: 60%; aspect-ratio: 1 / 1;\n}\n\n/* READABILITY TIERS (widgets.ts chartTier): the text is always in the DOM;\n   what a short body cannot afford is hidden, not dropped. */\n.axdb-tier-1 .axdb-yt--q, .axdb-tier-1 .axdb-yl--q,\n.axdb-tier-2 .axdb-yt--q, .axdb-tier-2 .axdb-yl--q,\n.axdb-tier-2 .axdb-yt--h, .axdb-tier-2 .axdb-yl--h,\n.axdb-tier-2 .axdb-xt, .axdb-tier-2 .axdb-vt,\n.axdb-lg--off { display: none; }\n\n/* SECTION CHROME: a pointer-transparent overlay on every member group. It\n   wears the selection ring and, while selected, the corner handle. */\n.grafloria-html-layer > .axdb-slab { position: absolute; pointer-events: none; border-radius: var(--axdb-rs-radius, 8px); z-index: 4; }\n/* Selected, the overlay rises above the tiles so ITS corner handle wins a\n   corner it shares with a child's; unselected, its handle takes no presses. */\n.grafloria-html-layer > .axdb-slab.axdb-slab--selected { z-index: 6; box-shadow: 0 0 0 1.5px var(--axdb-accent-ring, rgba(59, 82, 217, .55)); }\n.grafloria-html-layer > .axdb-slab > .axdb-rs { pointer-events: none; opacity: 0; }\n.grafloria-html-layer > .axdb-slab.axdb-slab--selected > .axdb-rs { pointer-events: auto; opacity: 1; }\n.grafloria-html-layer > .axdb-slab.axdb-slab--static > .axdb-rs { display: none; }\n\n/* GROUP FRAME (0.4.43): a TAB CONTAINER wears a frame by default \u2014 a bordered\n   slab, and a tinted surface UNDER its pages (the strip's own track colour, so\n   strip and body read as one panel). The layer is isolated so the surface can\n   sit below every tile at z -1 and still paint above the canvas. */\n.grafloria-html-layer { isolation: isolate; }\n.grafloria-html-layer > .axdb-group-bg {\n  position: absolute; pointer-events: none; z-index: -1; box-sizing: border-box;\n  border-radius: var(--axdb-rs-radius, 8px);\n  background: var(--axdb-group-bg, #f1f3f8);\n}\n.grafloria-html-layer > .axdb-slab.axdb-slab--tabs {\n  box-sizing: border-box;\n  border: 1px solid var(--axdb-group-border, var(--axdb-line, #e5e8ef));\n}\n@media (prefers-color-scheme: dark) {\n  .grafloria-html-layer > .axdb-group-bg { background: var(--axdb-group-bg, #1b2029); }\n  .grafloria-html-layer > .axdb-slab.axdb-slab--tabs { border-color: var(--axdb-group-border, rgba(236, 238, 244, .12)); }\n}\n\n/* SECTION CAPTION (0.4.22): the band on the slab. Geometry is inline (the\n   reserve and the pixels come from one function); everything visual is a\n   variable the options write and a theme may override. The band takes the\n   pointer \u2014 the slab does not \u2014 so a press on it is the section's. */\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h {\n  position: absolute; box-sizing: border-box; pointer-events: auto; z-index: 1;\n  display: flex; align-items: center; gap: 6px; min-width: 0;\n  padding: var(--axdb-caption-pad, 0 12px);\n  background: var(--axdb-caption-bg, rgba(31, 36, 48, .045));\n  /* A hairline by default: two bands meeting (a captioned section inside a\n     captioned section) read as two headers, not one grey block. */\n  border-bottom: var(--axdb-caption-border, 1px solid rgba(31, 36, 48, .1));\n  color: var(--axdb-caption-fg, #1f2430);\n  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);\n  text-transform: var(--axdb-caption-transform, none);\n  letter-spacing: -.005em;\n  border-radius: var(--axdb-rs-radius, 8px) var(--axdb-rs-radius, 8px) 0 0;\n  cursor: default; user-select: none; -webkit-user-select: none; overflow: hidden;\n  transition: opacity .12s;\n}\n/* The modifiers carry the band's own selector so they outrank its defaults. */\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--center { justify-content: center; }\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--end { justify-content: flex-end; }\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--vtop { align-items: flex-start; }\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--vbottom { align-items: flex-end; }\n/* 'tab': the same band sized to its text, a chip at the leading corner. It\n   reserves its height like 'inside' \u2014 see captionReserve. */\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--tab {\n  max-width: 100%; border-radius: var(--axdb-rs-radius, 8px);\n  border-bottom: var(--axdb-caption-border-tab, none);\n  box-shadow: inset 0 0 0 1px rgba(31, 36, 48, .08);\n}\n/* 'hover': an overlay. It reserves nothing, so while hidden it must not take\n   the pointer (an invisible band swallowed clicks on the content beneath),\n   and while shown it paints OPAQUE \u2014 a 5% tint over a chart is a smear. */\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--hover {\n  opacity: 0; pointer-events: none;\n  background: var(--axdb-caption-bg, #fff);\n  box-shadow: 0 1px 4px rgba(31, 36, 48, .16);\n}\n/* .axdb-slab--hot is set by the binder from the live pointer (the overlay\n   takes no pointer of its own, so CSS :hover can never fire on it). */\n.grafloria-html-layer > .axdb-slab.axdb-slab--hot > .axdb-slab-h.axdb-slab-h--hover,\n.grafloria-html-layer > .axdb-slab.axdb-slab--selected > .axdb-slab-h.axdb-slab-h--hover { pointer-events: auto; opacity: 1; }\n/* the actions of a hovered or selected section */\n.grafloria-html-layer > .axdb-slab.axdb-slab--hot > .axdb-slab-h > .axdb-slab-h-actions { opacity: 1; }\n/* the tight tier: a section under 90 px */\n.grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--tight { font-size: min(var(--axdb-caption-font-size, 12px), 12px); gap: 4px; }\n.axdb-slab-h--tight .axdb-slab-h-sub, .axdb-slab-h--tight .axdb-slab-h-actions { display: none; }\n.axdb-slab-h-icon { flex: none; }\n.axdb-slab-h-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 0 1 auto; }\n.axdb-slab-h-text, .axdb-slab-h-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.axdb-slab-h-sub { font-size: .88em; font-weight: 500; opacity: .7; }\n.axdb-slab-h-info { flex: none; opacity: .6; font-size: .9em; cursor: help; }\n.axdb-slab-h-actions { flex: none; display: flex; gap: 2px; margin-inline-start: auto; opacity: 0; transition: opacity .12s; }\n.axdb-slab-h--center .axdb-slab-h-actions, .axdb-slab-h--end .axdb-slab-h-actions { margin-inline-start: 0; }\n.axdb-slab-h:hover > .axdb-slab-h-actions, .axdb-slab--selected > .axdb-slab-h > .axdb-slab-h-actions, .axdb-slab-h:focus-within > .axdb-slab-h-actions { opacity: 1; }\n.axdb-slab-h-action {\n  all: unset; box-sizing: border-box; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;\n  border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; color: inherit; transition: background-color .12s;\n}\n.axdb-slab-h-action:hover { background: rgba(31, 36, 48, .08); }\n.axdb-slab-h-action:focus-visible { outline: 2px solid var(--axdb-accent-ring, rgba(59, 82, 217, .55)); outline-offset: -2px; }\n.axdb-slab-h-action[disabled] { opacity: .4; cursor: default; }\n.axdb-slab-h-action[disabled]:hover { background: none; }\n.grafloria-html-layer > .axdb-slab.axdb-slab--static > .axdb-slab-h { cursor: default; }\n@media (prefers-color-scheme: dark) {\n  /* The band sits on the PAGE, whose ground the kit does not own (a host that\n     stays light while the kit goes dark is common): a solid ink, not a tint,\n     so the light caption always reads. */\n  .grafloria-html-layer > .axdb-slab > .axdb-slab-h {\n    background: var(--axdb-caption-bg, #1b2029);\n    color: var(--axdb-caption-fg, #eceef4);\n    border-bottom: var(--axdb-caption-border, 1px solid rgba(236, 238, 244, .12));\n  }\n  .grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--tab { box-shadow: inset 0 0 0 1px rgba(236, 238, 244, .12); }\n  .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); }\n  .axdb-slab-h-action:hover { background: rgba(236, 238, 244, .1); }\n}\n\n/* TAB CONTAINER (0.4.27): a strip of pages across the container's top. The\n   strip takes the pointer (the tabs are real buttons); the pages below it are\n   ordinary boards. */\n.grafloria-html-layer > .axdb-tabs {\n  position: absolute; box-sizing: border-box; pointer-events: auto; z-index: 5;\n  display: flex; align-items: center; gap: 2px; padding: 3px 6px; overflow-x: auto; overflow-y: hidden;\n  background: var(--axdb-tabs-bg, #f1f3f8);\n  border-bottom: 1px solid var(--axdb-tabs-line, #e5e8ef);\n  border-radius: var(--axdb-rs-radius, 8px) var(--axdb-rs-radius, 8px) 0 0;\n  scrollbar-width: thin;\n}\n.axdb-tabs--center { justify-content: center; }\n.axdb-tabs--end { justify-content: flex-end; }\n.axdb-tabs--stretch > .axdb-tab { flex: 1 1 0; }\n/* A tab is a PILL on the track (a segmented control): quiet until hovered,\n   the active one lifted in the card's own ground. */\n.axdb-tab {\n  all: unset; box-sizing: border-box; flex: 0 0 auto; max-width: 200px;\n  padding: 0 12px; height: 100%; display: inline-flex; align-items: center;\n  font: 500 12.5px/1 system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  letter-spacing: -.005em;\n  color: var(--axdb-tabs-fg, #5a6478); cursor: pointer;\n  border-radius: var(--axdb-tab-radius, 6px);\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  transition: background-color .12s, color .12s, box-shadow .12s;\n}\n.axdb-tab:hover { background: rgba(31, 36, 48, .06); color: var(--axdb-tabs-on-fg, #1f2430); }\n.axdb-tab:focus-visible { outline: 2px solid var(--axdb-accent-ring, rgba(59, 82, 217, .55)); outline-offset: -2px; }\n.axdb-tab.axdb-tab--on {\n  background: var(--axdb-tabs-on-bg, #fff);\n  color: var(--axdb-tabs-on-fg, #1f2430);\n  font-weight: 600;\n  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(31, 36, 48, .06);\n}\n@media (prefers-reduced-motion: reduce) { .axdb-tab { transition: none; } }\n@media (prefers-color-scheme: dark) {\n  /* Solid for the same reason as the caption band: the track sits on the page. */\n  .grafloria-html-layer > .axdb-tabs { background: var(--axdb-tabs-bg, #1b2029); border-bottom-color: var(--axdb-tabs-line, rgba(236, 238, 244, .12)); }\n  .axdb-tab { color: var(--axdb-tabs-fg, #98a1b4); }\n  .axdb-tab:hover { background: rgba(236, 238, 244, .08); color: var(--axdb-tabs-on-fg, #eceef4); }\n  .axdb-tab.axdb-tab--on { background: var(--axdb-tabs-on-bg, #232836); color: var(--axdb-tabs-on-fg, #eceef4); box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 1px rgba(236, 238, 244, .1); }\n}\n\n/* legend chips, shared by line and donut */\n.axdb-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; }\n.axdb-lg--col { flex-direction: column; flex-wrap: nowrap; gap: 6px; margin-top: 0; }\n.axdb-lg i {\n  display: inline-flex; align-items: center; gap: 5px; font-style: normal;\n  font: 500 11px/1.3 system-ui, sans-serif; color: var(--axdb-muted);\n}\n.axdb-lg i b { width: 9px; height: 9px; border-radius: 3px; flex: none; }\n\n/* table */\n.axdb-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--axdb-ink); }\n.axdb-table th {\n  text-align: left; padding: 4px 8px 7px; border-bottom: 1px solid var(--axdb-line);\n  font: 600 10px/1.3 system-ui, sans-serif; letter-spacing: .4px; text-transform: uppercase;\n  color: var(--axdb-muted);\n}\n.axdb-table td { padding: 6px 8px; border-bottom: 1px solid var(--axdb-line); white-space: nowrap; }\n.axdb-table td.num { text-align: right; font-variant-numeric: tabular-nums; }\n.axdb-table tr:last-child td { border-bottom: none; }\n\n@media (prefers-color-scheme: dark) {\n  .axdb-widget {\n    --axdb-ink: #eceef4;\n    --axdb-muted: #98a1b4;\n    --axdb-grid: rgba(150, 160, 182, .2);\n    --axdb-card: #161a22;\n    --axdb-line: #2a3040;\n    --axdb-head-bg: rgba(255, 255, 255, .035);\n    --axdb-head-fg: #e6e9f0;\n    --axdb-soft: rgba(150, 160, 182, .16);\n    --axdb-up: #4ade80;\n    --axdb-down: #fb7185;\n    --axdb-c1: #8b9cff; --axdb-c2: #38bdf8; --axdb-c3: #2dd4bf;\n    --axdb-c4: #fbbf24; --axdb-c5: #a78bfa; --axdb-c6: #94a3b8;\n  }\n}\n";
 /** Idempotently inject the kit stylesheet (safe to call per binder). */
 export declare function ensureDashboardKitStyles(doc?: Document): void;

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

@@ -172,6 +172,22 @@ const CSS = `
   background: var(--axdb-accent-soft, rgba(59, 82, 217, .08));
   border-radius: var(--axdb-rs-radius, 8px);
 }
+/* THE LANES: while a widget is held over a container, its four bands are
+   shown, so "beside it" is a place you can see and aim at rather than a
+   fixed depth you would have to guess. The band you are IN wears the dashed
+   mark (.axdb-join) on top; these only say where the edges are. */
+.grafloria-html-layer > .axdb-lanes { position: absolute; z-index: 2; pointer-events: none; }
+.grafloria-html-layer > .axdb-lanes > .axdb-lane {
+  position: absolute;
+  box-sizing: border-box;
+  /* A SHADED MARGIN, never a line: the dashed outline already means "the cell
+     this will take", and two dashed treatments at once read as one shape. */
+  background: var(--axdb-lane-bg, rgba(59, 82, 217, .13));
+  border-radius: 2px;
+}
+@media (prefers-color-scheme: dark) {
+  .grafloria-html-layer > .axdb-lanes > .axdb-lane { background: var(--axdb-lane-bg, rgba(134, 155, 255, .17)); }
+}
 .axdb-tabs.axdb-tabs--drop { box-shadow: inset 0 -2px 0 var(--axdb-accent, #3b52d9); }
 .axdb-tab.axdb-tab--drop-before { position: relative; }
 .axdb-tab.axdb-tab--drop-before::before {

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;
@@ -162,6 +179,43 @@ export interface StripProbe {
 export declare function stripUnder(p: StripProbe): {
     containerId: string;
 } | null;
+export interface ContainerProbe {
+    x: number;
+    y: number;
+    roots: ZoneBoard[];
+    /** Containers the gesture has displaced, at the frames they rest in. */
+    restFrames?: ReadonlyMap<string, ZoneRect>;
+    /** The groups inside the dragged tile: never a target, so never lit. */
+    ghostSubtree?: ReadonlySet<string>;
+    /** The containers the dragged tile's own board sits in: their bands do not apply to it, so they are not lit either. */
+    homeChain?: ReadonlySet<string>;
+}
+/** A container's edges, for showing a hand what they mean. */
+export interface ContainerBands {
+    containerId: string;
+    frame: ZoneRect;
+    stripHeight: number;
+    band: number;
+    bandY?: number;
+}
+/**
+ * The deepest container under a pointer whose EDGES mean something — the one
+ * whose bands a drag should be shown while it is held there.
+ *
+ * `bandOf` decides; this only reports where the decision lives, on the same
+ * tree and the same frames, so a painted lane and the zone it stands for can
+ * never disagree. Without it the bands are invisible: 0.4.62 made the top and
+ * bottom a fixed 30 px, which is a fine target and an impossible guess — to
+ * put a widget ABOVE a panel you point just BELOW its header, inside what
+ * reads as page content. ("Nothing moves it any more, but how can I drag
+ * something on top of the tab group?")
+ */
+export declare function containerUnder(p: ContainerProbe): ContainerBands | null;
+/** Where a container's four bands are, in the same world units as its frame. */
+export declare function bandRects(c: ContainerBands): {
+    side: BesideSide;
+    rect: ZoneRect;
+}[];
 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

@@ -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;
 }
@@ -108,6 +117,61 @@ export function stripUnder(p) {
         visit(r, 0, 0);
     return bestId === null ? null : { containerId: bestId };
 }
+/**
+ * The deepest container under a pointer whose EDGES mean something — the one
+ * whose bands a drag should be shown while it is held there.
+ *
+ * `bandOf` decides; this only reports where the decision lives, on the same
+ * tree and the same frames, so a painted lane and the zone it stands for can
+ * never disagree. Without it the bands are invisible: 0.4.62 made the top and
+ * bottom a fixed 30 px, which is a fine target and an impossible guess — to
+ * put a widget ABOVE a panel you point just BELOW its header, inside what
+ * reads as page content. ("Nothing moves it any more, but how can I drag
+ * something on top of the tab group?")
+ */
+export function containerUnder(p) {
+    const { x, y } = p;
+    let best = null;
+    let bestDepth = -1;
+    const visit = (b, dx, dy) => {
+        var _a, _b, _c;
+        for (const c of b.children()) {
+            if ((_a = p.ghostSubtree) === null || _a === void 0 ? void 0 : _a.has(c.id))
+                continue;
+            const rest = (_b = p.restFrames) === null || _b === void 0 ? void 0 : _b.get(c.id);
+            const atRest = rest && inRect(rest, x, y) ? rest : null;
+            const frame = atRest !== null && atRest !== void 0 ? atRest : c.frame;
+            const tx = atRest ? x : x + dx;
+            const ty = atRest ? y : y + dy;
+            if (!inRect(frame, tx, ty))
+                continue;
+            if (c.band > 0 && !((_c = p.homeChain) === null || _c === void 0 ? void 0 : _c.has(c.id)) && b.depth >= bestDepth) {
+                best = Object.assign({ containerId: c.id, frame, stripHeight: c.stripHeight, band: c.band }, (c.bandY === undefined ? {} : { bandY: c.bandY }));
+                bestDepth = b.depth;
+            }
+            if (c.inner)
+                visit(c.inner, atRest ? c.frame.x - atRest.x : dx, atRest ? c.frame.y - atRest.y : dy);
+        }
+    };
+    for (const r of p.roots)
+        visit(r, 0, 0);
+    return best;
+}
+/** Where a container's four bands are, in the same world units as its frame. */
+export function bandRects(c) {
+    const bodyY = c.frame.y + c.stripHeight;
+    const bodyH = Math.max(1, c.frame.height - c.stripHeight);
+    const w = Math.max(1, c.frame.width);
+    const side = w * c.band;
+    const depth = c.bandY !== undefined && c.bandY > 0 ? Math.min(c.bandY, bodyH / 2) : c.band * bodyH;
+    return [
+        { side: 'left', rect: { x: c.frame.x, y: bodyY, width: side, height: bodyH } },
+        { side: 'right', rect: { x: c.frame.x + w - side, y: bodyY, width: side, height: bodyH } },
+        // the sides take the corners (bandOf tests rx first), so top and bottom stop short of them
+        { side: 'top', rect: { x: c.frame.x + side, y: bodyY, width: w - 2 * side, height: depth } },
+        { side: 'bottom', rect: { x: c.frame.x + side, y: bodyY + bodyH - depth, width: w - 2 * side, height: depth } },
+    ];
+}
 /** The board a container sits on, found by id through the tree. */
 function boardOf(roots, containerId) {
     const visit = (b) => {
@@ -128,6 +192,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 +203,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 +251,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 +278,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