@grafloria/element 0.4.35 → 0.4.36

package/package.json

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

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

@@ -626,6 +626,9 @@ export interface DashboardHandleContext {
     active: string;
     /** MUTABLE — set by the caller's finalize once the render API exists. */
     apiRef: DashboardApiRef | null;
+    /** MUTABLE — the canvas element, set with apiRef; parking a page or a view
+     *  reaches the html layer through it (see `teleport`). */
+    container: HTMLElement | null;
     /** The consumer's layout hook, if any (dashboard() passes its option). */
     onLayoutChange?: (viewId: string, widgets: DashboardWidgetSpec[]) => void;
     /**

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

@@ -184,6 +184,29 @@ class SetWidgetLockCommand extends Command {
 const HISTORY_EVENTS = ['command:executed', 'command:undone', 'command:redone'];
 const DEFAULTS = { columns: 12, gap: 8, rowHeight: 130, width: 1180, height: 660 };
 const OFFSCREEN_X = -20000;
+/**
+ * Parking is a TELEPORT, never a glide. `.axdb-glide` on the html layer eases
+ * every left/top write while a gesture runs and for 400 ms past its drop; a
+ * page or a view coming back from OFFSCREEN_X under it SLID in from 20,000 px
+ * away over 280 ms (0.4.36). The class comes off for the writes, the styles
+ * are flushed so the landing becomes the before-change state, and the class
+ * goes back to whichever gesture still holds it.
+ */
+const teleport = (container, fn) => {
+    const layer = container === null || container === void 0 ? void 0 : container.querySelector('.grafloria-html-layer');
+    const held = (layer === null || layer === void 0 ? void 0 : layer.classList.contains('axdb-glide')) === true;
+    if (held)
+        layer.classList.remove('axdb-glide');
+    try {
+        fn();
+    }
+    finally {
+        if (held && layer) {
+            void layer.offsetWidth; // flush: the new positions are the before-change style now
+            layer.classList.add('axdb-glide');
+        }
+    }
+};
 let autoId = 0;
 /** The node a widget spec becomes — one place, so addWidget() and the initial
  *  spec build can never drift apart on metadata. */
@@ -1305,18 +1328,20 @@ export function createDashboardHandle(ctx) {
             return ctx.active;
         },
         showView(id) {
-            var _a, _b, _c;
             if (!groups.has(id))
                 return;
             ctx.active = id;
-            for (const [vid, g] of groups) {
-                const x = vid === id ? 0 : OFFSCREEN_X;
-                const s = (_a = g.size) !== null && _a !== void 0 ? _a : { width: ctx.boardW, height: ctx.boardH };
-                if (g.position.x !== x)
-                    g.setFrame({ x, y: 0, width: s.width, height: s.height });
-            }
-            (_b = binders.get(id)) === null || _b === void 0 ? void 0 : _b.sync();
-            (_c = ctx.apiRef) === null || _c === void 0 ? void 0 : _c.renderNow();
+            teleport(ctx.container, () => {
+                var _a, _b, _c;
+                for (const [vid, g] of groups) {
+                    const x = vid === id ? 0 : OFFSCREEN_X;
+                    const s = (_a = g.size) !== null && _a !== void 0 ? _a : { width: ctx.boardW, height: ctx.boardH };
+                    if (g.position.x !== x)
+                        g.setFrame({ x, y: 0, width: s.width, height: s.height });
+                }
+                (_b = binders.get(id)) === null || _b === void 0 ? void 0 : _b.sync();
+                (_c = ctx.apiRef) === null || _c === void 0 ? void 0 : _c.renderNow();
+            });
             frameView(groups.get(id));
         },
         widget(id) {
@@ -1411,7 +1436,7 @@ export function createDashboardHandle(ctx) {
         },
         getCaption: (id) => { var _a; return (_a = specById.get(id)) === null || _a === void 0 ? void 0 : _a.caption; },
         activateTab(containerId, pageId) {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e;
             const cg = ctx.boardGroups.get(containerId);
             const w = specById.get(containerId);
             if (!cg || !w || ((_a = ctx.layoutOf.get(containerId)) !== null && _a !== void 0 ? _a : w.layout) !== 'tabs')
@@ -1424,9 +1449,12 @@ export function createDashboardHandle(ctx) {
             w.active = pageId;
             const cw = (_c = cg.getMetadata('containerWidget')) !== null && _c !== void 0 ? _c : {};
             cg.setMetadata('containerWidget', Object.assign(Object.assign({}, cw), { active: pageId }));
-            (_d = ctx.syncTabs) === null || _d === void 0 ? void 0 : _d.call(ctx, containerId);
-            (_e = ctx.apiRef) === null || _e === void 0 ? void 0 : _e.renderNow();
-            (_f = ctx.onTabChange) === null || _f === void 0 ? void 0 : _f.call(ctx, containerId, pageId, (_g = ctx.viewOfBoard.get(containerId)) !== null && _g !== void 0 ? _g : ctx.active);
+            teleport(ctx.container, () => {
+                var _a, _b;
+                (_a = ctx.syncTabs) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId);
+                (_b = ctx.apiRef) === null || _b === void 0 ? void 0 : _b.renderNow();
+            });
+            (_d = ctx.onTabChange) === null || _d === void 0 ? void 0 : _d.call(ctx, containerId, pageId, (_e = ctx.viewOfBoard.get(containerId)) !== null && _e !== void 0 ? _e : ctx.active);
             reportChanged();
             return true;
         },
@@ -1922,6 +1950,7 @@ export function dashboard(options) {
         optionsBase: options,
         active: (_p = (_o = views[0]) === null || _o === void 0 ? void 0 : _o.id) !== null && _p !== void 0 ? _p : 'main',
         apiRef: null,
+        container: null,
         onLayoutChange: options.onLayoutChange,
     };
     const { binders, groups } = ctx;
@@ -1936,24 +1965,25 @@ export function dashboard(options) {
         }, get handle() {
             return handle;
         }, finalize: (api) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
             const a = api;
             if (!a)
                 return;
             ctx.apiRef = a;
+            ctx.container = (_a = a.container) !== null && _a !== void 0 ? _a : null;
             const model = a.getModel();
             // FLUID: the board starts at the container's box when it can be measured
             // (the binder keeps it there); the authored defaults only fill in for a
             // container with no size yet.
             const box = mode === 'fluid'
-                ? { w: ((_a = a.container) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0, h: ((_b = a.container) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0 }
+                ? { w: ((_b = a.container) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0, h: ((_c = a.container) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0 }
                 : { w: 0, h: 0 };
             const viewW = (v) => { var _a; return (mode === 'fluid' && box.w > 0 ? box.w : (_a = v.width) !== null && _a !== void 0 ? _a : boardW); };
             const viewH = (v) => { var _a; return (mode === 'fluid' && box.h > 0 ? box.h : (_a = v.height) !== null && _a !== void 0 ? _a : boardH); };
             for (const v of views) {
                 // One board per view; the group is a pure LAYOUT CONTAINER, so its
                 // chrome is suppressed (frameChrome) exactly as a dashboard needs.
-                const g = new GroupModel({ id: v.id, name: (_c = v.name) !== null && _c !== void 0 ? _c : v.id });
+                const g = new GroupModel({ id: v.id, name: (_d = v.name) !== null && _d !== void 0 ? _d : v.id });
                 model.addGroup(g);
                 g.setMetadata('frameChrome', 'none');
                 // THE BOARD'S GEOMETRY, PERSISTED. Cells alone do not describe a board:
@@ -1963,28 +1993,28 @@ export function dashboard(options) {
                 // reload would be a picture of a dashboard rather than a dashboard.
                 // Serializable values only: the binder's callbacks belong to the app.
                 g.setMetadata('dashboardBoard', {
-                    columns: (_d = v.columns) !== null && _d !== void 0 ? _d : columns,
+                    columns: (_e = v.columns) !== null && _e !== void 0 ? _e : columns,
                     gap,
                     padding: gap,
                     sizing,
                     baseRowHeight: rowHeight,
                     designHeight: viewH(v),
-                    float: (_e = options.float) !== null && _e !== void 0 ? _e : false,
-                    rtl: (_f = options.rtl) !== null && _f !== void 0 ? _f : false,
+                    float: (_f = options.float) !== null && _f !== void 0 ? _f : false,
+                    rtl: (_g = options.rtl) !== null && _g !== void 0 ? _g : false,
                     fluid: mode === 'fluid',
                     overflow,
-                    static: (_g = options.static) !== null && _g !== void 0 ? _g : false,
-                    dragHandle: (_h = options.dragHandle) !== null && _h !== void 0 ? _h : false,
-                    layout: (_j = ctx.layoutOf.get(v.id)) !== null && _j !== void 0 ? _j : layout,
+                    static: (_h = options.static) !== null && _h !== void 0 ? _h : false,
+                    dragHandle: (_j = options.dragHandle) !== null && _j !== void 0 ? _j : false,
+                    layout: (_k = ctx.layoutOf.get(v.id)) !== null && _k !== void 0 ? _k : layout,
                 });
-                if (((_k = ctx.layoutOf.get(v.id)) !== null && _k !== void 0 ? _k : layout) === 'split' && v.tree !== undefined)
+                if (((_l = ctx.layoutOf.get(v.id)) !== null && _l !== void 0 ? _l : layout) === 'split' && v.tree !== undefined)
                     g.setMetadata(SPLIT_TREE_KEY, v.tree);
                 g.size = { width: viewW(v), height: viewH(v), depth: 0 };
                 g.position = { x: v.id === ctx.active ? 0 : OFFSCREEN_X, y: 0 };
                 groups.set(v.id, g);
                 ctx.boardGroups.set(v.id, g);
                 mountBoard(v.id, v.id, v.widgets, g);
-                binders.set(v.id, bindView(v, g, (_l = ctx.layoutOf.get(v.id)) !== null && _l !== void 0 ? _l : layout));
+                binders.set(v.id, bindView(v, g, (_m = ctx.layoutOf.get(v.id)) !== null && _m !== void 0 ? _m : layout));
             }
             // LIVE LAYOUT SWITCH (setLayout): keep the picture, swap the binder.
             // Either way the outgoing binder's cells are written where the grid
@@ -2100,8 +2130,8 @@ export function dashboard(options) {
             // runs. That cost me a debugging round: `ctx.syncTabs` stayed undefined
             // and every tab switch silently did nothing.)
             ctx.onTabChange = options.onTabChange;
-            attachTabsRuntime(ctx, model, (_m = a.container) !== null && _m !== void 0 ? _m : null, handle);
-            (_o = ctx.attachHistory) === null || _o === void 0 ? void 0 : _o.call(ctx);
+            attachTabsRuntime(ctx, model, (_o = a.container) !== null && _o !== void 0 ? _o : null, handle);
+            (_p = ctx.attachHistory) === null || _p === void 0 ? void 0 : _p.call(ctx);
             return;
             /**
              * Mount one board's widgets into its group — and recurse for CONTAINERS.

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

@@ -3038,6 +3038,12 @@ export function bindDashboardGrid(api, group, options = {}) {
             }
             finally {
                 flushDeferredRebuild();
+                // EVERY press ends disarmed. The press armed the glide (a task ahead
+                // of any displacement — see onPointerDown); a drop disarms on its own
+                // path, but a press that never travelled — a plain CLICK — left it
+                // armed for good, and every later left/top write eased: a tab switch
+                // slid its page in from 20,000 px off canvas over 280 ms (0.4.36).
+                disarmGlideSoon();
             }
         },
         onCancel() {
@@ -3047,6 +3053,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             }
             finally {
                 flushDeferredRebuild();
+                disarmGlideSoon();
             }
         },
     };

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

@@ -21,5 +21,7 @@
  *    (pages own their card innerHTML).
  */
 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 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/* 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

@@ -37,7 +37,7 @@ const CSS = `
 .grafloria-html-layer > .grafloria-node-host:focus-visible {
   outline: 2px solid var(--axdb-accent, #3b52d9);
   outline-offset: 2px;
-  border-radius: var(--axdb-rs-radius, 3px);
+  border-radius: var(--axdb-rs-radius, 8px);
 }
 
 /* ===== the held tile: transition-exempt ghost, above everything ===== */
@@ -55,7 +55,7 @@ const CSS = `
 /* ===== the placeholder: dashed slab, truthful, never animated ===== */
 .grafloria-html-layer > .axdb-ph {
   position: absolute;
-  border-radius: var(--axdb-rs-radius, 3px);
+  border-radius: var(--axdb-rs-radius, 8px);
   background: rgba(30, 34, 45, .14);
   border: 2px dashed rgba(30, 34, 45, .28);
   box-sizing: border-box;
@@ -80,7 +80,7 @@ const CSS = `
   cursor: nwse-resize;
   border-right: 3px solid rgba(120, 130, 148, .55);
   border-bottom: 3px solid rgba(120, 130, 148, .55);
-  border-bottom-right-radius: var(--axdb-rs-radius, 3px);
+  border-bottom-right-radius: var(--axdb-rs-radius, 8px);
   opacity: 0;
   transition: opacity .12s;
   z-index: 5;
@@ -98,7 +98,7 @@ const CSS = `
   border-right: none;
   border-left: 3px solid rgba(120, 130, 148, .55);
   border-bottom-right-radius: 0;
-  border-bottom-left-radius: var(--axdb-rs-radius, 3px);
+  border-bottom-left-radius: var(--axdb-rs-radius, 8px);
 }
 
 /* ===== palette drag-in chip (screen-space clone following the cursor) ===== */
@@ -125,14 +125,14 @@ const CSS = `
   font: 500 12px/1.4 var(--axdb-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
   color: var(--axdb-tabs-on-fg, #1f2430);
   background: var(--axdb-tabs-on-bg, #fff);
-  border-radius: var(--axdb-rs-radius, 3px);
-  box-shadow: 0 0 0 1px rgba(31, 36, 48, .12);
+  border-radius: var(--axdb-tab-radius, 6px);
+  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(31, 36, 48, .08);
 }
 @media (prefers-color-scheme: dark) {
   .axdb-tab-chip {
     color: var(--axdb-tabs-on-fg, #eceef4);
-    background: var(--axdb-tabs-on-bg, #1a1d25);
-    box-shadow: 0 0 0 1px rgba(236, 238, 244, .16);
+    background: var(--axdb-tabs-on-bg, #232836);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 1px rgba(236, 238, 244, .12);
   }
 }
 /* A tab held over ANOTHER group: it will join that group, not the board. The
@@ -145,7 +145,7 @@ const CSS = `
   box-sizing: border-box;
   border: 2px dashed var(--axdb-accent, #3b52d9);
   background: var(--axdb-accent-soft, rgba(59, 82, 217, .08));
-  border-radius: var(--axdb-rs-radius, 3px);
+  border-radius: var(--axdb-rs-radius, 8px);
 }
 .axdb-tabs.axdb-tabs--drop { box-shadow: inset 0 -2px 0 var(--axdb-accent, #3b52d9); }
 .axdb-tab.axdb-tab--drop-before { position: relative; }
@@ -173,7 +173,7 @@ const CSS = `
   --axdb-muted: #5a6478;
   --axdb-grid: rgba(120, 130, 148, .22);
   --axdb-card: #fff;
-  --axdb-line: #e7eaf1;
+  --axdb-line: #e5e8ef;
   --axdb-soft: rgba(120, 130, 148, .14);
   --axdb-up: #0f7a3d;     /* 5.42:1 */
   --axdb-down: #be123c;   /* 6.29:1 */
@@ -181,17 +181,22 @@ const CSS = `
      steps: every entry clears 3:1 against its card (WCAG 1.4.11). */
   --axdb-c1: #3b52d9; --axdb-c2: #0369a1; --axdb-c3: #0f766e;
   --axdb-c4: #b45309; --axdb-c5: #6d28d9; --axdb-c6: #475569;
+  /* The header band: a panel wears its title in a band across its top, the
+     way DevExpress, Grafana and Metabase panels do — tinted ground, hairline
+     below, sentence case (0.4.36; the tracked uppercase micro-label before). */
+  --axdb-head-bg: #f7f8fb;
+  --axdb-head-fg: #2a3140;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  padding: 13px 15px 12px;
+  padding: 0;
   background: var(--axdb-card);
   border: 1px solid var(--axdb-line);
-  border-radius: var(--axdb-rs-radius, 3px);
-  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
+  border-radius: var(--axdb-rs-radius, 8px);
+  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
   font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
   color: var(--axdb-ink);
 }
@@ -203,25 +208,33 @@ const CSS = `
    below and would lose the cascade at equal specificity — at 54 px the margin
    stayed 8 px, the body shrank to 14 px and the KPI figure hid. */
 @container axdb-tile (max-height: 90px) {
-  .axdb-widget { padding: 8px 14px 7px; }
-  .axdb-widget > .axdb-widget-h { margin-bottom: 4px; }
+  .axdb-widget > .axdb-widget-h { padding: 5px 12px; font-size: 11.5px; }
+  .axdb-widget > .axdb-widget-b { padding: 6px 12px; }
 }
+/* The row floor: the band gives way to an inline label beside the figure. */
 @container axdb-tile (max-height: 46px) {
-  .axdb-widget { padding: 4px 12px 3px; }
-  .axdb-widget > .axdb-widget-h { margin-bottom: 0; }
+  .axdb-widget > .axdb-widget-h { padding: 0 0 0 12px; background: none; border-bottom: 0; }
+  .axdb-widget > .axdb-widget-b { padding: 3px 12px; }
 }
 @container axdb-tile (max-height: 26px) {
-  .axdb-widget { padding: 2px 12px 1px; }
+  .axdb-widget > .axdb-widget-h { display: none; }
+  .axdb-widget > .axdb-widget-b { padding: 1px 12px; }
 }
 .axdb-widget-h {
   display: flex;
   align-items: center;
-  gap: 6px;
-  margin-bottom: 8px;
-  font: 600 11px/1.3 system-ui, sans-serif;
-  letter-spacing: .4px;
-  text-transform: uppercase;
-  color: var(--axdb-muted);
+  gap: 8px;
+  flex: none;
+  min-width: 0;
+  padding: 9px 14px;
+  background: var(--axdb-head-bg);
+  border-bottom: 1px solid var(--axdb-line);
+  font: 600 12.5px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
+  letter-spacing: -.005em;
+  color: var(--axdb-head-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 /* Drag-handle mode (DevExpress drags an item by its caption): the header is
    the grip and says so with a dot pattern and a grab cursor; the body keeps
@@ -261,7 +274,7 @@ const CSS = `
 .grafloria-node-host[data-axdb-edge="nesw-resize"], .grafloria-node-host[data-axdb-edge="nesw-resize"] * { cursor: nesw-resize !important; }
 /* INSIDE: centred on the header's text line and flush with the card padding,
    per size tier (padding 13/15, then 8/14, 4/12, 2/12). */
-.grafloria-node-host > .axdb-grip--inside { top: 14px; }
+.grafloria-node-host > .axdb-grip--inside { top: 12px; }
 .grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 15px; }
 .grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 15px; }
 .grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 3px; }
@@ -270,12 +283,18 @@ const CSS = `
   .grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 14px; }
   .grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 14px; }
   .grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 2px; }
+  .grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 46px; }
+  .grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 46px; }
+  .grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 15px; }
 }
 @container axdb-tile (max-height: 46px) {
   .grafloria-node-host > .axdb-grip--inside { top: 5px; }
   .grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 12px; }
   .grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 12px; }
   .grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 1px; }
+  .grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 44px; }
+  .grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 44px; }
+  .grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 13px; }
 }
 @container axdb-tile (max-height: 26px) {
   .grafloria-node-host > .axdb-grip--inside { top: 2px; }
@@ -288,11 +307,13 @@ const CSS = `
 .grafloria-node-host > .axdb-grip--outside.axdb-grip--left { left: 10px; }
 .grafloria-node-host > .axdb-grip--outside.axdb-grip--right { right: 10px; }
 .grafloria-node-host > .axdb-grip--center { left: 50%; transform: translateX(-50%); }
-/* The header makes room for an inside grip on its side; a centred one sits above it. */
-.grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 32px; }
-.grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 32px; }
-.grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 12px; }
-.axdb-widget-b { flex: 1; min-height: 0; position: relative; }
+/* The header makes room for an inside grip on its side — inset + the 24-px
+   grip + an 8-px gap, per tier (32 px under the band's 14-px inset hid the
+   first letter of the title) — and a centred one sits above the text. */
+.grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 47px; }
+.grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 47px; }
+.grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 17px; }
+.axdb-widget-b { flex: 1; min-height: 0; position: relative; padding: 12px 14px; }
 /* A drag across a STATIC board (nothing prevents the press's default there)
    used to select every label on it; kit cards are not prose. Tables stay
    copyable — a figure in a grid is the one thing a viewer selects. */
@@ -358,7 +379,7 @@ const CSS = `
    when the tile is wide enough. */
 @container axdb-tile (max-height: 46px) {
   .axdb-widget--kpi { flex-direction: row; align-items: center; gap: 12px; }
-  .axdb-widget--kpi > .axdb-widget-h { flex: none; }
+  .axdb-widget--kpi > .axdb-widget-h { flex: none; padding: 0 0 0 12px; background: none; border-bottom: 0; }
   /* The body is a SIZE container: in a centred row it would collapse to zero
      and every height query would fire. It takes the card's full inner height. */
   .axdb-widget--kpi > .axdb-kpi { flex: 1; align-self: stretch; }
@@ -403,7 +424,7 @@ const CSS = `
 
 /* SECTION CHROME: a pointer-transparent overlay on every member group. It
    wears the selection ring and, while selected, the corner handle. */
-.grafloria-html-layer > .axdb-slab { position: absolute; pointer-events: none; border-radius: var(--axdb-rs-radius, 3px); z-index: 4; }
+.grafloria-html-layer > .axdb-slab { position: absolute; pointer-events: none; border-radius: var(--axdb-rs-radius, 8px); z-index: 4; }
 /* Selected, the overlay rises above the tiles so ITS corner handle wins a
    corner it shares with a child's; unselected, its handle takes no presses. */
 .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)); }
@@ -418,16 +439,16 @@ const CSS = `
 .grafloria-html-layer > .axdb-slab > .axdb-slab-h {
   position: absolute; box-sizing: border-box; pointer-events: auto; z-index: 1;
   display: flex; align-items: center; gap: 6px; min-width: 0;
-  padding: var(--axdb-caption-pad, 0 10px);
-  background: var(--axdb-caption-bg, rgba(31, 36, 48, .055));
+  padding: var(--axdb-caption-pad, 0 12px);
+  background: var(--axdb-caption-bg, rgba(31, 36, 48, .045));
   /* A hairline by default: two bands meeting (a captioned section inside a
      captioned section) read as two headers, not one grey block. */
   border-bottom: var(--axdb-caption-border, 1px solid rgba(31, 36, 48, .1));
   color: var(--axdb-caption-fg, #1f2430);
   font: var(--axdb-caption-font-weight, 600) var(--axdb-caption-font-size, 13px)/1.2 var(--axdb-caption-font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
   text-transform: var(--axdb-caption-transform, none);
-  letter-spacing: .01em;
-  border-radius: var(--axdb-rs-radius, 3px) var(--axdb-rs-radius, 3px) 0 0;
+  letter-spacing: -.005em;
+  border-radius: var(--axdb-rs-radius, 8px) var(--axdb-rs-radius, 8px) 0 0;
   cursor: default; user-select: none; -webkit-user-select: none; overflow: hidden;
   transition: opacity .12s;
 }
@@ -439,7 +460,7 @@ const CSS = `
 /* 'tab': the same band sized to its text, a chip at the leading corner. It
    reserves its height like 'inside' — see captionReserve. */
 .grafloria-html-layer > .axdb-slab > .axdb-slab-h.axdb-slab-h--tab {
-  max-width: 100%; border-radius: var(--axdb-rs-radius, 3px);
+  max-width: 100%; border-radius: var(--axdb-rs-radius, 8px);
   border-bottom: var(--axdb-caption-border-tab, none);
   box-shadow: inset 0 0 0 1px rgba(31, 36, 48, .08);
 }
@@ -463,14 +484,14 @@ const CSS = `
 .axdb-slab-h-icon { flex: none; }
 .axdb-slab-h-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 0 1 auto; }
 .axdb-slab-h-text, .axdb-slab-h-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.axdb-slab-h-sub { font-size: .85em; font-weight: 500; opacity: .72; }
+.axdb-slab-h-sub { font-size: .88em; font-weight: 500; opacity: .7; }
 .axdb-slab-h-info { flex: none; opacity: .6; font-size: .9em; cursor: help; }
 .axdb-slab-h-actions { flex: none; display: flex; gap: 2px; margin-inline-start: auto; opacity: 0; transition: opacity .12s; }
 .axdb-slab-h--center .axdb-slab-h-actions, .axdb-slab-h--end .axdb-slab-h-actions { margin-inline-start: 0; }
 .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; }
 .axdb-slab-h-action {
-  all: unset; box-sizing: border-box; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
-  border-radius: 4px; cursor: pointer; font-size: 14px; line-height: 1; color: inherit;
+  all: unset; box-sizing: border-box; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
+  border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; color: inherit; transition: background-color .12s;
 }
 .axdb-slab-h-action:hover { background: rgba(31, 36, 48, .08); }
 .axdb-slab-h-action:focus-visible { outline: 2px solid var(--axdb-accent-ring, rgba(59, 82, 217, .55)); outline-offset: -2px; }
@@ -478,8 +499,11 @@ const CSS = `
 .axdb-slab-h-action[disabled]:hover { background: none; }
 .grafloria-html-layer > .axdb-slab.axdb-slab--static > .axdb-slab-h { cursor: default; }
 @media (prefers-color-scheme: dark) {
+  /* The band sits on the PAGE, whose ground the kit does not own (a host that
+     stays light while the kit goes dark is common): a solid ink, not a tint,
+     so the light caption always reads. */
   .grafloria-html-layer > .axdb-slab > .axdb-slab-h {
-    background: var(--axdb-caption-bg, rgba(236, 238, 244, .07));
+    background: var(--axdb-caption-bg, #1b2029);
     color: var(--axdb-caption-fg, #eceef4);
     border-bottom: var(--axdb-caption-border, 1px solid rgba(236, 238, 244, .12));
   }
@@ -493,36 +517,42 @@ const CSS = `
    ordinary boards. */
 .grafloria-html-layer > .axdb-tabs {
   position: absolute; box-sizing: border-box; pointer-events: auto; z-index: 5;
-  display: flex; align-items: flex-end; gap: 2px; padding: 0 6px; overflow-x: auto; overflow-y: hidden;
-  background: var(--axdb-tabs-bg, rgba(31, 36, 48, .05));
-  border-bottom: 1px solid var(--axdb-tabs-line, rgba(31, 36, 48, .12));
-  border-radius: var(--axdb-rs-radius, 3px) var(--axdb-rs-radius, 3px) 0 0;
+  display: flex; align-items: center; gap: 2px; padding: 3px 6px; overflow-x: auto; overflow-y: hidden;
+  background: var(--axdb-tabs-bg, #f1f3f8);
+  border-bottom: 1px solid var(--axdb-tabs-line, #e5e8ef);
+  border-radius: var(--axdb-rs-radius, 8px) var(--axdb-rs-radius, 8px) 0 0;
   scrollbar-width: thin;
 }
 .axdb-tabs--center { justify-content: center; }
 .axdb-tabs--end { justify-content: flex-end; }
 .axdb-tabs--stretch > .axdb-tab { flex: 1 1 0; }
+/* A tab is a PILL on the track (a segmented control): quiet until hovered,
+   the active one lifted in the card's own ground. */
 .axdb-tab {
   all: unset; box-sizing: border-box; flex: 0 0 auto; max-width: 200px;
-  padding: 0 12px; height: calc(100% - 4px); display: inline-flex; align-items: center;
-  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
+  padding: 0 12px; height: 100%; display: inline-flex; align-items: center;
+  font: 500 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
+  letter-spacing: -.005em;
   color: var(--axdb-tabs-fg, #5a6478); cursor: pointer;
-  border-radius: var(--axdb-rs-radius, 3px) var(--axdb-rs-radius, 3px) 0 0;
+  border-radius: var(--axdb-tab-radius, 6px);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  transition: background-color .12s, color .12s, box-shadow .12s;
 }
-.axdb-tab:hover { background: rgba(31, 36, 48, .06); }
+.axdb-tab:hover { background: rgba(31, 36, 48, .06); color: var(--axdb-tabs-on-fg, #1f2430); }
 .axdb-tab:focus-visible { outline: 2px solid var(--axdb-accent-ring, rgba(59, 82, 217, .55)); outline-offset: -2px; }
-/* The active tab reads as the front page: the card's own ground, lifted. */
 .axdb-tab.axdb-tab--on {
   background: var(--axdb-tabs-on-bg, #fff);
   color: var(--axdb-tabs-on-fg, #1f2430);
-  box-shadow: 0 -1px 0 var(--axdb-accent, #3b52d9) inset, 0 0 0 1px rgba(31, 36, 48, .1);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(31, 36, 48, .06);
 }
+@media (prefers-reduced-motion: reduce) { .axdb-tab { transition: none; } }
 @media (prefers-color-scheme: dark) {
-  .grafloria-html-layer > .axdb-tabs { background: var(--axdb-tabs-bg, rgba(236, 238, 244, .06)); border-bottom-color: var(--axdb-tabs-line, rgba(236, 238, 244, .14)); }
+  /* Solid for the same reason as the caption band: the track sits on the page. */
+  .grafloria-html-layer > .axdb-tabs { background: var(--axdb-tabs-bg, #1b2029); border-bottom-color: var(--axdb-tabs-line, rgba(236, 238, 244, .12)); }
   .axdb-tab { color: var(--axdb-tabs-fg, #98a1b4); }
-  .axdb-tab:hover { background: rgba(236, 238, 244, .08); }
-  .axdb-tab.axdb-tab--on { background: var(--axdb-tabs-on-bg, #1a1d25); color: var(--axdb-tabs-on-fg, #eceef4); box-shadow: 0 -1px 0 var(--axdb-accent, #7d8ff0) inset, 0 0 0 1px rgba(236, 238, 244, .14); }
+  .axdb-tab:hover { background: rgba(236, 238, 244, .08); color: var(--axdb-tabs-on-fg, #eceef4); }
+  .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); }
 }
 
 /* legend chips, shared by line and donut */
@@ -550,8 +580,10 @@ const CSS = `
     --axdb-ink: #eceef4;
     --axdb-muted: #98a1b4;
     --axdb-grid: rgba(150, 160, 182, .2);
-    --axdb-card: #1a1d25;
-    --axdb-line: #2b3040;
+    --axdb-card: #161a22;
+    --axdb-line: #2a3040;
+    --axdb-head-bg: rgba(255, 255, 255, .035);
+    --axdb-head-fg: #e6e9f0;
     --axdb-soft: rgba(150, 160, 182, .16);
     --axdb-up: #4ade80;
     --axdb-down: #fb7185;
@@ -560,6 +592,8 @@ const CSS = `
   }
 }
 `;
+/** The kit stylesheet as text — for a host that bundles its own CSS, and for the styling spec. */
+export const DASHBOARD_KIT_CSS = CSS;
 /** Idempotently inject the kit stylesheet (safe to call per binder). */
 export function ensureDashboardKitStyles(doc) {
     // SERVER-SAFE: `dashboard()` is a pure spec builder and runs where there is

package/src/lib/load.js

@@ -238,6 +238,7 @@ export function fromDocument(document, options = {}) {
             : {},
         active: (_x = activeGroup === null || activeGroup === void 0 ? void 0 : activeGroup.id) !== null && _x !== void 0 ? _x : 'main',
         apiRef: null,
+        container: null,
     };
     const handle = createDashboardHandle(ctx);
     const renderCustomNode = (node, host) => {
@@ -255,7 +256,7 @@ export function fromDocument(document, options = {}) {
         (_b = getNodeType(node.type)) === null || _b === void 0 ? void 0 : _b(node, host);
     };
     const finalize = (api) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         const a = api;
         if (!a)
             return;
@@ -296,6 +297,7 @@ export function fromDocument(document, options = {}) {
         // work immediately — no camera move, no showView, so the paint is byte-for-
         // byte what a boards-only load produced.
         ctx.apiRef = a;
+        ctx.container = (_e = a.container) !== null && _e !== void 0 ? _e : null;
         for (const group of groups) {
             const board = group.getMetadata('dashboardBoard');
             if (!board)
@@ -308,7 +310,7 @@ export function fromDocument(document, options = {}) {
         }
         // Tab containers, with the same runtime dashboard() uses — a reloaded
         // document must switch pages exactly like a board built from a literal.
-        attachTabsRuntime(ctx, model, (_e = a.container) !== null && _e !== void 0 ? _e : null, handle);
+        attachTabsRuntime(ctx, model, (_f = a.container) !== null && _f !== void 0 ? _f : null, handle);
         // LIVE LAYOUT SWITCH on a loaded document — the same contract dashboard()
         // finalize offers: cells persisted where the grid reads them, any tree and
         // column cache cleared, the board's `layout` flag flipped, a fresh binder.
@@ -355,7 +357,7 @@ export function fromDocument(document, options = {}) {
         }
         // A loaded board follows the history exactly as an authored one does: an
         // undo re-syncs every binder without the consumer calling refresh().
-        (_f = ctx.attachHistory) === null || _f === void 0 ? void 0 : _f.call(ctx);
+        (_g = ctx.attachHistory) === null || _g === void 0 ? void 0 : _g.call(ctx);
     };
     return Object.assign({ nodes, edges: model.getLinks(), renderCustomNode,
         finalize,