@grafloria/element 0.4.42 → 0.4.43

package/package.json

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

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

@@ -48,7 +48,7 @@ import { bindDashboardGrid, parentPeerOf, SequenceCommand, } from './grid-binder
 import { bindDashboardSplit, SPLIT_TREE_KEY } from './split-binder.js';
 import { gridItemFromCell } from './grid-mapping.js';
 import { ensureDashboardKitStyles } from './styles.js';
-import { paintTabStrip, tabStripKey, tabStripReserve } from './tabs.js';
+import { paintTabStrip, tabStripKey, tabStripReserve, tabPageInset } from './tabs.js';
 import { defaultWidgetRenderer } from './widgets.js';
 /**
  * Add a widget node AND its board membership as ONE undoable step.
@@ -457,8 +457,12 @@ export function attachTabsRuntime(ctx, model, container, handle) {
             active = pages[0].id;
         ctx.activeTab.set(id, active);
         const strip = tabStripReserve(ctx.tabsOf.get(id), pages.length);
+        // The pages sit INSET in the container's frame (0.4.43): below the strip
+        // and its inset, `inset` px in from the sides and the bottom, so their
+        // cards read as inside the panel rather than as loose cards under a strip.
+        const inset = tabPageInset(ctx.tabsOf.get(id));
         const f = { x: cg.position.x, y: cg.position.y, width: (_d = (_c = cg.size) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 0, height: (_f = (_e = cg.size) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 0 };
-        const inner = { width: f.width, height: Math.max(0, f.height - strip) };
+        const inner = { width: Math.max(0, f.width - 2 * inset), height: Math.max(0, f.height - strip - 2 * inset) };
         const write = (fn) => (model.runSystemWrite ? model.runSystemWrite(fn) : fn());
         write(() => {
             for (const p of pages) {
@@ -467,7 +471,7 @@ export function attachTabsRuntime(ctx, model, container, handle) {
                     continue;
                 // A PARKED page keeps its size, so its own board keeps its layout and
                 // comes back exactly as it was; only its x leaves the canvas.
-                pg.setFrame({ x: p.id === active ? f.x : OFFSCREEN_X, y: f.y + strip, width: inner.width, height: inner.height });
+                pg.setFrame({ x: p.id === active ? f.x + inset : OFFSCREEN_X, y: f.y + strip + inset, width: inner.width, height: inner.height });
             }
         });
         for (const p of pages)
@@ -1049,7 +1053,9 @@ export function createDashboardHandle(ctx) {
             W = `${pageId}__group${n}`;
         const tabsOpts = (_d = ctx.tabsOf.get(containerId)) !== null && _d !== void 0 ? _d : {};
         const label = (_e = pageSpec.title) !== null && _e !== void 0 ? _e : pageId;
-        const size = { width: (_g = (_f = pg.size) === null || _f === void 0 ? void 0 : _f.width) !== null && _g !== void 0 ? _g : 0, height: ((_j = (_h = pg.size) === null || _h === void 0 ? void 0 : _h.height) !== null && _j !== void 0 ? _j : 0) + tabStripReserve(tabsOpts, 1) };
+        // The new group is sized for the page PLUS its frame: the strip above, the inset around.
+        const inset = tabPageInset(tabsOpts);
+        const size = { width: ((_g = (_f = pg.size) === null || _f === void 0 ? void 0 : _f.width) !== null && _g !== void 0 ? _g : 0) + 2 * inset, height: ((_j = (_h = pg.size) === null || _h === void 0 ? void 0 : _h.height) !== null && _j !== void 0 ? _j : 0) + tabStripReserve(tabsOpts, 1) + 2 * inset };
         const remaining = [...((_k = from.members) !== null && _k !== void 0 ? _k : [])].filter((m) => m !== pageId && !!model.getGroup(m));
         // The page that was showing when the gesture began. Undo puts the tab
         // back — and shows THAT page again, not the one the container switched to

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

@@ -1196,10 +1196,10 @@ export function bindDashboardGrid(api, group, options = {}) {
         return null;
     };
     /** Which of a section frame's edges a world point is within EDGE_GRIP of. */
-    const slabEdgesNear = (grp, x, y) => {
+    const slabEdgesNear = (grp, x, y, grip = edgeGripFor(grp)) => {
         const p = grp.position;
         const s = sizeOf(grp);
-        return { n: y - p.y <= EDGE_GRIP, s: p.y + s.height - y <= EDGE_GRIP, w: x - p.x <= EDGE_GRIP, e: p.x + s.width - x <= EDGE_GRIP };
+        return { n: y - p.y <= grip, s: p.y + s.height - y <= grip, w: x - p.x <= grip, e: p.x + s.width - x <= grip };
     };
     /**
      * SECTION CHROME. A section (member group) paints no card of its own, so it
@@ -1211,9 +1211,121 @@ export function bindDashboardGrid(api, group, options = {}) {
      * corner handle; its frame edges answer the resize cursor.
      */
     const slabEls = new Map();
+    /**
+     * GROUP FRAME (0.4.43): a TAB CONTAINER wears a frame by default — its slab
+     * is bordered and a tinted surface lies under its pages, first in the layer
+     * so the tiles paint over it. A page torn out with two widgets under its tab
+     * read as a strip floating over two loose cards: nothing said the second
+     * card was the tab's. A plain section keeps its invisible slab.
+     */
+    const groupBgs = new Map();
+    const syncGroupBg = (layer, id, on, x, y, w, h) => {
+        var _a;
+        let bg = (_a = groupBgs.get(id)) !== null && _a !== void 0 ? _a : null;
+        if (!on) {
+            bg === null || bg === void 0 ? void 0 : bg.remove();
+            groupBgs.delete(id);
+            return;
+        }
+        if (!bg || bg.parentElement !== layer) {
+            bg === null || bg === void 0 ? void 0 : bg.remove();
+            bg = document.createElement('div');
+            bg.className = 'axdb-group-bg';
+            bg.setAttribute('data-group-bg', id);
+            layer.prepend(bg);
+            groupBgs.set(id, bg);
+        }
+        bg.style.left = `${x}px`;
+        bg.style.top = `${y}px`;
+        bg.style.width = `${w}px`;
+        bg.style.height = `${h}px`;
+    };
+    const isTabsGroup = (grp) => { var _a; return ((_a = grp.getMetadata('containerWidget')) === null || _a === void 0 ? void 0 : _a.layout) === 'tabs'; };
+    /**
+     * A TAB CONTAINER's frame is its drag handle (0.4.43): its 8-px margin —
+     * under the strip, beside the pages — moves the group, so the edge-resize
+     * zone shrinks to 3 px there (the corner handle still resizes). A section's
+     * edges keep the full grip: its empty band is a drop target, not a handle.
+     */
+    const TAB_FRAME_GRIP = 3;
+    const edgeGripFor = (grp) => (isTabsGroup(grp) ? TAB_FRAME_GRIP : EDGE_GRIP);
+    /**
+     * CARRIED (0.4.43): a group dragged by its strip or band moves as ONE thing.
+     * The held TILE is transition-exempt (the ghost), but a group has no host of
+     * its own: its strip jumped to the pointer while its pages' tiles GLIDED
+     * after it — on the live demo the content trailed the strip by up to 140 px
+     * at every step. Everything in the group's subtree — tiles, strips, slabs,
+     * the surface — is exempt for the gesture and, like the ghost, through the
+     * drop write; then the glides resume.
+     */
+    const carriedEls = new Set();
+    let carriedTimer = null;
+    const subtreeIds = (id) => {
+        var _a;
+        const groups = [];
+        const nodes = [];
+        const queue = [id];
+        const seen = new Set();
+        while (queue.length) {
+            const cur = queue.shift();
+            if (seen.has(cur))
+                continue;
+            seen.add(cur);
+            const grp = diagram.getGroup(cur);
+            if (grp) {
+                groups.push(cur);
+                for (const m of (_a = grp.members) !== null && _a !== void 0 ? _a : [])
+                    queue.push(m);
+            }
+            else if (diagram.getNode(cur))
+                nodes.push(cur);
+        }
+        return { groups, nodes };
+    };
+    const cssId = (id) => (typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/"/g, '\\"'));
+    const setCarried = (id, on) => {
+        const layer = htmlLayer();
+        if (!layer)
+            return;
+        if (carriedTimer) {
+            clearTimeout(carriedTimer);
+            carriedTimer = null;
+        }
+        if (on) {
+            const { groups, nodes } = subtreeIds(id);
+            const els = [];
+            for (const n of nodes) {
+                const h = hostOf(n);
+                if (h)
+                    els.push(h);
+            }
+            for (const g of groups) {
+                els.push(...Array.from(layer.querySelectorAll(`:scope > .axdb-tabs[data-tabs-id="${cssId(g)}"], :scope > .axdb-slab[data-slab-id="${cssId(g)}"], :scope > .axdb-group-bg[data-group-bg="${cssId(g)}"]`)));
+            }
+            for (const el of els) {
+                el.classList.add('axdb-carried');
+                carriedEls.add(el);
+            }
+            return;
+        }
+        carriedTimer = setTimeout(() => {
+            for (const el of carriedEls)
+                el.classList.remove('axdb-carried');
+            carriedEls.clear();
+            carriedTimer = null;
+        }, 60);
+    };
+    const flushCarried = () => {
+        if (carriedTimer)
+            clearTimeout(carriedTimer);
+        carriedTimer = null;
+        for (const el of carriedEls)
+            el.classList.remove('axdb-carried');
+        carriedEls.clear();
+    };
     let slabLayer = null;
     const syncSlabs = () => {
-        var _a, _b;
+        var _a, _b, _c;
         if (disposed)
             return;
         const layer = (slabLayer === null || slabLayer === void 0 ? void 0 : slabLayer.isConnected) ? slabLayer : (slabLayer = htmlLayer());
@@ -1247,6 +1359,9 @@ export function bindDashboardGrid(api, group, options = {}) {
             el.classList.toggle('axdb-slab--selected', selectedId === id);
             el.classList.toggle('axdb-slab--static', isStatic);
             (_b = el.querySelector(':scope > .axdb-rs')) === null || _b === void 0 ? void 0 : _b.classList.toggle('axdb-rs--rtl', rtl);
+            const tabs = isTabsGroup(grp);
+            el.classList.toggle('axdb-slab--tabs', tabs);
+            syncGroupBg(layer, id, tabs, p.x, p.y, sz.width, sz.height);
             syncCaption(el, id, grp, sz.height);
         }
         for (const [id, el] of slabEls) {
@@ -1254,6 +1369,8 @@ export function bindDashboardGrid(api, group, options = {}) {
                 el.remove();
                 hoverSlabs.delete(el);
                 slabEls.delete(id);
+                (_c = groupBgs.get(id)) === null || _c === void 0 ? void 0 : _c.remove();
+                groupBgs.delete(id);
             }
         }
     };
@@ -1427,6 +1544,8 @@ export function bindDashboardGrid(api, group, options = {}) {
                 return;
             g.started = true;
             armGlide();
+            if (g.move)
+                setCarried(g.id, true);
         }
         const it = engine.getItem(g.id);
         if (!it)
@@ -1447,8 +1566,10 @@ export function bindDashboardGrid(api, group, options = {}) {
                 // column (the row search) read as the wrong tile moving.
                 const was = { x: it.x, y: it.y };
                 const moved = engine.moveCheck(g.id, cell.x, cell.y, { gate: false }).changed || placeOnRow(g.id, cell.x, cell.y, it.w);
-                if (moved)
+                if (moved) {
                     project();
+                    setCarried(g.id, true); // chrome repainted by the projection is carried too
+                }
                 // STUCK: the pointer asks for another cell and the slab did not budge
                 // (placeOnRow counts "already on a legal cell" as placed) — paint what
                 // was asked for as refused.
@@ -1507,6 +1628,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         releasePointer(g.pointerId);
         api.container.style.cursor = '';
         relockSlab(g.id);
+        if (g.move && g.started)
+            setCarried(g.id, false); // exempt through the drop write, then the glides resume
         if (!g.started) {
             engine.endGesture();
             return;
@@ -1535,6 +1658,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         releasePointer(g.pointerId);
         api.container.style.cursor = '';
         relockSlab(g.id);
+        if (g.move && g.started)
+            setCarried(g.id, false);
         if (g.started)
             engine.cancelGesture();
         else
@@ -2914,7 +3039,11 @@ export function bindDashboardGrid(api, group, options = {}) {
                         beginSlabResize(slabId, edges, ev);
                     // The caption band is the section's handle: pressed and travelled,
                     // it moves the whole section (its inner empty space only selects).
-                    else if (ownCaption)
+                    // A TAB CONTAINER's frame is its handle (0.4.43): the margin around
+                    // its pages moves the group — the strip's empty space, the only
+                    // handle before, was one nobody found ("I'm not able to drag an
+                    // entire tab group").
+                    else if (ownCaption || isTabsGroup(grp))
                         beginSlabMove(slabId, ev);
                     return;
                 }
@@ -4417,10 +4546,14 @@ export function bindDashboardGrid(api, group, options = {}) {
                 el.remove();
             slabEls.clear();
             hoverSlabs.clear();
+            for (const bg of groupBgs.values())
+                bg.remove();
+            groupBgs.clear();
             // A rebind inside the 60 ms window (a layout switch right after an undo)
             // disposed this binder with the timer pending — the host kept its
             // lifted ghost for good (visual gate, nested-containers ⑤).
             flushGhost();
+            flushCarried();
             (_d = htmlLayer()) === null || _d === void 0 ? void 0 : _d.classList.remove('axdb-glide');
             api.container.style.cursor = '';
         },

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

@@ -264,6 +264,43 @@ export function bindDashboardSplit(api, group, options = {}) {
     // resizes a pane); the band is the section's drag handle (beginMemberDrag).
     const slabEls = new Map();
     const hoverSlabs = new Set();
+    /** The member group (a pane's section or tab container) whose frame holds a world point. */
+    const memberGroupAt = (x, y) => {
+        var _a, _b;
+        for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : new Set()) {
+            const grp = diagram.getGroup(id);
+            if (!grp || diagram.getNode(id))
+                continue;
+            const p = grp.position;
+            const sz = (_b = grp.size) !== null && _b !== void 0 ? _b : { width: 0, height: 0 };
+            if (x >= p.x && x <= p.x + sz.width && y >= p.y && y <= p.y + sz.height)
+                return id;
+        }
+        return null;
+    };
+    /** GROUP FRAME (0.4.43): a tab container's tinted surface, under its pages — see the grid binder. */
+    const groupBgs = new Map();
+    const syncGroupBg = (layer, id, on, x, y, w, h) => {
+        var _a;
+        let bg = (_a = groupBgs.get(id)) !== null && _a !== void 0 ? _a : null;
+        if (!on) {
+            bg === null || bg === void 0 ? void 0 : bg.remove();
+            groupBgs.delete(id);
+            return;
+        }
+        if (!bg || bg.parentElement !== layer) {
+            bg === null || bg === void 0 ? void 0 : bg.remove();
+            bg = document.createElement('div');
+            bg.className = 'axdb-group-bg';
+            bg.setAttribute('data-group-bg', id);
+            layer.prepend(bg);
+            groupBgs.set(id, bg);
+        }
+        bg.style.left = `${x}px`;
+        bg.style.top = `${y}px`;
+        bg.style.width = `${w}px`;
+        bg.style.height = `${h}px`;
+    };
     const syncCaption = (el, id, grp, sectionH) => {
         const cap = captionOfGroup(grp);
         let band = el.querySelector(':scope > .axdb-slab-h');
@@ -303,7 +340,7 @@ export function bindDashboardSplit(api, group, options = {}) {
         }
     };
     const syncSlabs = () => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (disposed)
             return;
         const layer = htmlLayer();
@@ -332,6 +369,9 @@ export function bindDashboardSplit(api, group, options = {}) {
             el.style.height = `${sz.height}px`;
             el.classList.toggle('axdb-slab--selected', selectedId === id);
             el.classList.toggle('axdb-slab--static', isStatic);
+            const tabs = ((_c = grp.getMetadata('containerWidget')) === null || _c === void 0 ? void 0 : _c.layout) === 'tabs';
+            el.classList.toggle('axdb-slab--tabs', tabs);
+            syncGroupBg(layer, id, tabs, p.x, p.y, sz.width, sz.height);
             syncCaption(el, id, grp, sz.height);
         }
         for (const [id, el] of slabEls) {
@@ -339,6 +379,8 @@ export function bindDashboardSplit(api, group, options = {}) {
                 el.remove();
                 hoverSlabs.delete(el);
                 slabEls.delete(id);
+                (_d = groupBgs.get(id)) === null || _d === void 0 ? void 0 : _d.remove();
+                groupBgs.delete(id);
             }
         }
     };
@@ -767,7 +809,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             return worldInsideBoard(ev.world.x, ev.world.y);
         },
         onPointerDown(ev, hit) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             if (gesture)
                 return;
             const target = ((_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) !== null && _b !== void 0 ? _b : null);
@@ -817,13 +859,30 @@ export function bindDashboardSplit(api, group, options = {}) {
                 return;
             }
             if ((!hit.node && !onGrip) || sectionHandle) {
+                // A press inside a MEMBER's frame — a tab container's margin under
+                // its strip or beside its pages, a section's empty band — selects
+                // that member; a tab container's frame is its handle (0.4.43) and
+                // drags it the way its strip's empty space does.
+                if (!sectionHandle) {
+                    const member = memberGroupAt(ev.world.x, ev.world.y);
+                    const mg = member ? diagram.getGroup(member) : undefined;
+                    if (member && mg) {
+                        selectWidget(member);
+                        api.render();
+                        const srcM = ev.source;
+                        const tabsM = ((_m = mg.getMetadata('containerWidget')) === null || _m === void 0 ? void 0 : _m.layout) === 'tabs';
+                        if (!isStatic && tabsM && typeof (srcM === null || srcM === void 0 ? void 0 : srcM.clientX) === 'number' && typeof (srcM === null || srcM === void 0 ? void 0 : srcM.clientY) === 'number')
+                            beginMemberDrag(member, srcM);
+                        return;
+                    }
+                }
                 // OUR OWN empty band or corner handle, and we are a section of a
                 // parent board: select the section there; an edge or the handle
                 // starts the section resize, which the parent runs while this tool
                 // forwards the pointer sequence (the grid binder does the same).
                 const parent = parentPeerOf(api.container, group.id);
                 if ((parent === null || parent === void 0 ? void 0 : parent.selectMember) && (sectionHandle || worldInsideBoard(ev.world.x, ev.world.y))) {
-                    const own = ((_m = sectionHandle === null || sectionHandle === void 0 ? void 0 : sectionHandle.parentElement) === null || _m === void 0 ? void 0 : _m.getAttribute('data-slab-id')) === group.id;
+                    const own = ((_o = sectionHandle === null || sectionHandle === void 0 ? void 0 : sectionHandle.parentElement) === null || _o === void 0 ? void 0 : _o.getAttribute('data-slab-id')) === group.id;
                     parent.selectMember(group.id);
                     if (!isStatic && parent.beginSlabResize) {
                         const f = frame();
@@ -835,7 +894,7 @@ export function bindDashboardSplit(api, group, options = {}) {
                     }
                     return;
                 }
-                (_p = (_o = diagram).clearSelection) === null || _p === void 0 ? void 0 : _p.call(_o);
+                (_q = (_p = diagram).clearSelection) === null || _q === void 0 ? void 0 : _q.call(_p);
                 selectWidget(undefined);
                 api.render();
                 return;
@@ -844,9 +903,9 @@ export function bindDashboardSplit(api, group, options = {}) {
             if (!node)
                 return;
             selectWidget(node.id); // a press selects, whether or not it starts a gesture
-            if (((_q = node.state) === null || _q === void 0 ? void 0 : _q.locked) === true || isStatic)
+            if (((_r = node.state) === null || _r === void 0 ? void 0 : _r.locked) === true || isStatic)
                 return;
-            if (((_r = node.getMetadata) === null || _r === void 0 ? void 0 : _r.call(node, 'widgetMovable')) === false)
+            if (((_s = node.getMetadata) === null || _s === void 0 ? void 0 : _s.call(node, 'widgetMovable')) === false)
                 return;
             // Drag-handle mode: only the handle (the caption strip, a custom element
             // or the painted grip) lifts a widget out — see pressOnDragHandle.
@@ -1665,6 +1724,9 @@ export function bindDashboardSplit(api, group, options = {}) {
             api.container.removeEventListener('pointerleave', onHoverLeave);
             for (const el of slabEls.values())
                 el.remove();
+            for (const bg of groupBgs.values())
+                bg.remove();
+            groupBgs.clear();
             slabEls.clear();
             hoverSlabs.clear();
             insertion === null || insertion === void 0 ? void 0 : insertion.remove();

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 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";
+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";
 /** Idempotently inject the kit stylesheet (safe to call per binder). */
 export declare function ensureDashboardKitStyles(doc?: Document): void;

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

@@ -52,6 +52,31 @@ const CSS = `
 /* Outside the board: release will REMOVE — dim the ghost to say so. */
 .grafloria-html-layer > .grafloria-node-host.axdb-ghost.axdb-out { opacity: .35; filter: grayscale(.6); }
 
+/* ===== the kit's chrome glides WITH the tiles it belongs to (0.4.43) =====
+   A pushed group's strip, slab and surface used to jump to the new slot while
+   its tiles slid there: one group, two motions. */
+.grafloria-html-layer.axdb-glide > .axdb-tabs,
+.grafloria-html-layer.axdb-glide > .axdb-slab,
+.grafloria-html-layer.axdb-glide > .axdb-group-bg {
+  transition: left .28s cubic-bezier(.2, 0, .2, 1), top .28s cubic-bezier(.2, 0, .2, 1),
+              width .28s cubic-bezier(.2, 0, .2, 1), height .28s cubic-bezier(.2, 0, .2, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .grafloria-html-layer.axdb-glide > .axdb-tabs,
+  .grafloria-html-layer.axdb-glide > .axdb-slab,
+  .grafloria-html-layer.axdb-glide > .axdb-group-bg { transition: none; }
+}
+
+/* ===== CARRIED (0.4.43): a group dragged by its strip or band moves as ONE thing =====
+   Its whole subtree — tiles, strips, slabs, surface — is transition-exempt like
+   the ghost and floats with it; the surface casts the shadow. */
+.grafloria-html-layer > .axdb-carried,
+.grafloria-html-layer.axdb-glide > .axdb-carried { transition: none; cursor: grabbing; }
+.grafloria-html-layer > .grafloria-node-host.axdb-carried { z-index: 30; opacity: .92; }
+.grafloria-html-layer > .axdb-group-bg.axdb-carried { z-index: 29; filter: drop-shadow(0 10px 16px rgba(16, 24, 40, .3)); }
+.grafloria-html-layer > .axdb-slab.axdb-carried { z-index: 31; }
+.grafloria-html-layer > .axdb-tabs.axdb-carried { z-index: 32; }
+
 /* ===== the placeholder: dashed slab, truthful, never animated ===== */
 .grafloria-html-layer > .axdb-ph {
   position: absolute;
@@ -432,6 +457,25 @@ const CSS = `
 .grafloria-html-layer > .axdb-slab.axdb-slab--selected > .axdb-rs { pointer-events: auto; opacity: 1; }
 .grafloria-html-layer > .axdb-slab.axdb-slab--static > .axdb-rs { display: none; }
 
+/* GROUP FRAME (0.4.43): a TAB CONTAINER wears a frame by default — a bordered
+   slab, and a tinted surface UNDER its pages (the strip's own track colour, so
+   strip and body read as one panel). The layer is isolated so the surface can
+   sit below every tile at z -1 and still paint above the canvas. */
+.grafloria-html-layer { isolation: isolate; }
+.grafloria-html-layer > .axdb-group-bg {
+  position: absolute; pointer-events: none; z-index: -1; box-sizing: border-box;
+  border-radius: var(--axdb-rs-radius, 8px);
+  background: var(--axdb-group-bg, #f1f3f8);
+}
+.grafloria-html-layer > .axdb-slab.axdb-slab--tabs {
+  box-sizing: border-box;
+  border: 1px solid var(--axdb-group-border, var(--axdb-line, #e5e8ef));
+}
+@media (prefers-color-scheme: dark) {
+  .grafloria-html-layer > .axdb-group-bg { background: var(--axdb-group-bg, #1b2029); }
+  .grafloria-html-layer > .axdb-slab.axdb-slab--tabs { border-color: var(--axdb-group-border, rgba(236, 238, 244, .12)); }
+}
+
 /* SECTION CAPTION (0.4.22): the band on the slab. Geometry is inline (the
    reserve and the pixels come from one function); everything visual is a
    variable the options write and a theme may override. The band takes the

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

@@ -9,6 +9,14 @@
  * binder's.
  */
 export interface TabsOptions {
+    /**
+     * Pixels between the frame and the pages — left, right, bottom, and below
+     * the strip (0.4.43). The cards of a page sit INSIDE the container's tinted
+     * frame, so two cards under one tab read as one panel; a border on the
+     * cell alone ran exactly where the cards' own borders were. Default 8;
+     * 0 puts the pages edge to edge, the look before 0.4.43.
+     */
+    inset?: number;
     /** Where the strip sits. Only 'top' today; 'bottom' | 'start' | 'end' follow. */
     position?: 'top';
     /** Along the strip (default 'start', mirrored on RTL). */
@@ -33,6 +41,9 @@ export declare const TAB_STRIP_HEIGHT = 30;
 export declare const TAB_DRAG_THRESHOLD = 4;
 /** Pixels the pages give up at the top of the container. */
 export declare function tabStripReserve(o: TabsOptions | undefined, pageCount: number): number;
+export declare const TAB_PAGE_INSET = 8;
+/** Pixels between the container's frame and its pages: left, right, bottom, and below the strip. */
+export declare function tabPageInset(o: TabsOptions | undefined): number;
 /**
  * Paint the strip. Repainted only when its identity changes (the pages, the
  * active one, the options, RTL) so a page switch is a class toggle, not a

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

@@ -22,6 +22,12 @@ export function tabStripReserve(o, pageCount) {
         return 0;
     return Math.max(18, (_a = o === null || o === void 0 ? void 0 : o.height) !== null && _a !== void 0 ? _a : TAB_STRIP_HEIGHT);
 }
+export const TAB_PAGE_INSET = 8;
+/** Pixels between the container's frame and its pages: left, right, bottom, and below the strip. */
+export function tabPageInset(o) {
+    var _a;
+    return Math.max(0, (_a = o === null || o === void 0 ? void 0 : o.inset) !== null && _a !== void 0 ? _a : TAB_PAGE_INSET);
+}
 /**
  * Paint the strip. Repainted only when its identity changes (the pages, the
  * active one, the options, RTL) so a page switch is a class toggle, not a