@grafloria/element 0.4.26 → 0.4.27

package/package.json

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

package/src/index.d.ts

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

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

@@ -47,6 +47,7 @@ import { type DashboardGridHandle, type DashboardGridOptions, type DashboardResp
 import type { DragHandleOption } from './grid-binder.js';
 import type { SplitNode } from './split-layout.js';
 import type { SectionCaption } from './caption.js';
+import { type TabsOptions } from './tabs.js';
 /** A widget, declared as data. */
 export interface DashboardWidgetSpec {
     id: string;
@@ -113,7 +114,16 @@ export interface DashboardWidgetSpec {
      * always covers the pane. Switch live with `setLayout(mode, containerId)`;
      * `toJSON()` writes it per container.
      */
-    layout?: 'grid' | 'split';
+    layout?: 'grid' | 'split' | 'tabs';
+    /**
+     * TAB CONTAINER (`layout: 'tabs'`). Every child that carries `widgets` is a
+     * PAGE: one is visible at a time, and a strip of tabs across the top
+     * switches between them (DevExpress' Tab Container; VS Code's editor area
+     * is a split of these). `active` is the page showing, persisted by
+     * `toJSON()`; `tabs` styles the strip.
+     */
+    active?: string;
+    tabs?: TabsOptions;
     /**
      * Container only: a CAPTION painted by the kit on the section's slab —
      * `true` for the title, a string, or the full options (subtitle,
@@ -276,6 +286,8 @@ export interface DashboardOptions {
     renderCaption?: (widget: DashboardWidgetSpec, host: HTMLElement) => void;
     /** A press on a caption action (`caption.actions`): the section, the action id, the view. */
     onCaptionAction?: (sectionId: string, actionId: string, viewId: string) => void;
+    /** A tab container switched pages: the container, the page now showing, the view. */
+    onTabChange?: (containerId: string, pageId: string, viewId: string) => void;
     /** Fires after any committed gesture, with the view whose layout changed. */
     onLayoutChange?: (viewId: string, widgets: DashboardWidgetSpec[]) => void;
     /** Extra binder options, merged last (escape hatch to the layer below). */
@@ -342,7 +354,8 @@ export interface DashboardHandle {
      * saved document reopens in the layout it was left in.
      */
     setLayout(layout: 'grid' | 'split', viewId?: string): void;
-    getLayout(viewId?: string): 'grid' | 'split';
+    /** A container built with `layout: 'tabs'` reports 'tabs'; views never do. */
+    getLayout(viewId?: string): 'grid' | 'split' | 'tabs';
     /**
      * Set a SECTION's caption live — `false` removes it, `true` is the title, a
      * string or the options. Repaints the band, gives the reserve back or takes
@@ -352,6 +365,14 @@ export interface DashboardHandle {
     setCaption(id: string, caption: SectionCaption): boolean;
     /** The caption as authored or last set; undefined when the section has none. */
     getCaption(id: string): SectionCaption | undefined;
+    /**
+     * Show a PAGE of a tab container (`layout: 'tabs'`). False when the
+     * container or the page is not one. Persisted, so a saved board reopens on
+     * the page it was left on.
+     */
+    activateTab(containerId: string, pageId: string): boolean;
+    /** The page showing in a tab container. */
+    getActiveTab(containerId: string): string | undefined;
     /** Live sizing/float switches — the two prototype toggles. */
     setSizing(mode: 'fit' | 'grow'): void;
     getSizing(): 'fit' | 'grow';
@@ -527,6 +548,10 @@ export interface DashboardApiRef {
         onChange?(listener: (state: unknown) => void): () => void;
     };
 }
+export declare function attachTabsRuntime(ctx: DashboardHandleContext, model: {
+    getGroup(id: string): GroupModel | undefined;
+    runSystemWrite?(fn: () => void): void;
+}, container: HTMLElement | null, handle: DashboardHandle): void;
 export interface DashboardHandleContext {
     /** The views — MUTATED in place by addWidget (push) and remove (filter). */
     views: DashboardViewSpec[];
@@ -555,7 +580,15 @@ export interface DashboardHandleContext {
     mode: 'fluid' | 'fixed';
     overflow: 'bounded' | 'scroll';
     /** See DashboardOptions.layout — per view. */
-    layoutOf: Map<string, 'grid' | 'split'>;
+    layoutOf: Map<string, 'grid' | 'split' | 'tabs'>;
+    /** Tab containers: the page showing, the strip options, the strip element. */
+    activeTab: Map<string, string>;
+    tabsOf: Map<string, TabsOptions>;
+    tabStrips: Map<string, HTMLElement>;
+    /** Set by finalize: re-lay a tab container's pages and repaint its strip. */
+    syncTabs?: (containerId: string) => void;
+    /** Set by finalize: the user's `onTabChange`, so the handle can fire it. */
+    onTabChange?: (containerId: string, pageId: string, viewId: string) => void;
     /** Set by finalize: re-bind a VIEW's board under the given layout (setLayout). */
     rebindView?: (viewId: string, layout: 'grid' | 'split') => void;
     /**

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

@@ -48,6 +48,7 @@ import { bindDashboardGrid, } from './grid-binder.js';
 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 { defaultWidgetRenderer } from './widgets.js';
 /**
  * Add a widget node AND its board membership as ONE undoable step.
@@ -302,6 +303,117 @@ function assignCells(widgets, columns) {
  * reads and writes is the whole reason a second handle implementation, which
  * would silently drift, is not needed.
  */
+/**
+ * TAB CONTAINER RUNTIME, shared by `dashboard()` and `fromDocument()`.
+ *
+ * A tab container binds no grid of its own: it positions its PAGES itself —
+ * one into its frame under the strip, the rest parked off-canvas, exactly as
+ * `showView` parks a view one level up — and paints the strip. Each page is an
+ * ordinary container with an ordinary binder, so a page can be a grid or a
+ * split, and the parent board still sees ONE member group to place and resize.
+ *
+ * Both entry points call this, so a board reloaded from a document behaves
+ * like one built from a literal (the first version lived inside `dashboard()`
+ * and `fromDocument` silently produced a tab container that never switched).
+ */
+const cssEscape = (v) => typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(v) : v.replace(/"/g, '\\"');
+export function attachTabsRuntime(ctx, model, container, handle) {
+    var _a, _b, _c;
+    const pagesOf = (id) => {
+        var _a;
+        const w = ctx.specById.get(id);
+        return ((_a = w === null || w === void 0 ? void 0 : w.widgets) !== null && _a !== void 0 ? _a : []).filter((c) => !!c.widgets).map((p) => { var _a; return ({ id: p.id, label: (_a = p.title) !== null && _a !== void 0 ? _a : p.id }); });
+    };
+    const isTabs = (id) => { var _a, _b; return ((_a = ctx.layoutOf.get(id)) !== null && _a !== void 0 ? _a : (_b = ctx.specById.get(id)) === null || _b === void 0 ? void 0 : _b.layout) === 'tabs' && pagesOf(id).length > 0; };
+    const paintStrip = (id, f, h, pages, active) => {
+        var _a, _b, _c;
+        const layer = container === null || container === void 0 ? void 0 : container.querySelector('.grafloria-html-layer');
+        if (!layer)
+            return;
+        let el = ctx.tabStrips.get(id);
+        if (!el || el.parentElement !== layer) {
+            el === null || el === void 0 ? void 0 : el.remove();
+            el = document.createElement('div');
+            el.setAttribute('data-tabs-id', id);
+            layer.appendChild(el);
+            ctx.tabStrips.set(id, el);
+        }
+        el.style.position = 'absolute';
+        el.style.left = `${f.x}px`;
+        el.style.top = `${f.y}px`;
+        el.style.width = `${f.width}px`;
+        el.style.height = `${h}px`;
+        const rtl = (_c = (_b = ctx.binders.get((_a = ctx.viewOfBoard.get(id)) !== null && _a !== void 0 ? _a : ctx.active)) === null || _b === void 0 ? void 0 : _b.getRtl()) !== null && _c !== void 0 ? _c : false;
+        const key = tabStripKey(pages, active, ctx.tabsOf.get(id), rtl);
+        if (el.getAttribute('data-key') === key)
+            return;
+        paintTabStrip(el, pages, active, ctx.tabsOf.get(id), rtl, (pid) => handle.activateTab(id, pid), () => handle.selectWidget(id));
+        el.setAttribute('data-key', key);
+    };
+    const sync = (id) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const cg = (_a = ctx.boardGroups.get(id)) !== null && _a !== void 0 ? _a : model.getGroup(id);
+        if (!cg || !isTabs(id))
+            return;
+        const pages = pagesOf(id);
+        const active = (_b = ctx.activeTab.get(id)) !== null && _b !== void 0 ? _b : pages[0].id;
+        const strip = tabStripReserve(ctx.tabsOf.get(id), pages.length);
+        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 write = (fn) => (model.runSystemWrite ? model.runSystemWrite(fn) : fn());
+        write(() => {
+            for (const p of pages) {
+                const pg = model.getGroup(p.id);
+                if (!pg)
+                    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 });
+            }
+        });
+        for (const p of pages)
+            (_g = ctx.binders.get(p.id)) === null || _g === void 0 ? void 0 : _g.sync();
+        // A PARKED page is off-canvas but still in the DOM: take its widgets out
+        // of the tab order and hide them from assistive tech, or a keyboard user
+        // tabs through pages nobody can see (the accessibility scenario counted
+        // five tab stops on a board with three of them hidden).
+        for (const p of pages) {
+            const pg = model.getGroup(p.id);
+            const parked = p.id !== active;
+            for (const m of (_h = pg === null || pg === void 0 ? void 0 : pg.members) !== null && _h !== void 0 ? _h : []) {
+                const host = container === null || container === void 0 ? void 0 : container.querySelector(`.grafloria-node-host[data-node-id="${cssEscape(m)}"]`);
+                if (!host)
+                    continue;
+                if (parked) {
+                    host.setAttribute('aria-hidden', 'true');
+                    host.tabIndex = -1;
+                }
+                else
+                    host.removeAttribute('aria-hidden');
+            }
+        }
+        paintStrip(id, f, strip, pages, active);
+    };
+    ctx.syncTabs = sync;
+    ctx.subscriptions = (_a = ctx.subscriptions) !== null && _a !== void 0 ? _a : [];
+    for (const [id, cg] of ctx.boardGroups) {
+        if (!isTabs(id))
+            continue;
+        const pages = pagesOf(id);
+        if (!ctx.activeTab.has(id)) {
+            const meta = cg.getMetadata('containerWidget');
+            const want = (_c = (_b = ctx.specById.get(id)) === null || _b === void 0 ? void 0 : _b.active) !== null && _c !== void 0 ? _c : meta === null || meta === void 0 ? void 0 : meta.active;
+            ctx.activeTab.set(id, want && pages.some((p) => p.id === want) ? want : pages[0].id);
+            if ((meta === null || meta === void 0 ? void 0 : meta.tabs) && !ctx.tabsOf.has(id))
+                ctx.tabsOf.set(id, meta.tabs);
+        }
+        // Re-lay the pages whenever the parent moves or resizes the container.
+        const off = cg.on('bounds:changed', (() => sync(id)));
+        if (typeof off === 'function')
+            ctx.subscriptions.push(off);
+        sync(id);
+    }
+}
 /** `setCaption` as one history step: execute re-applies the value, undo the previous one. */
 class SetCaptionCommand extends Command {
     constructor(sectionId, before, after, apply) {
@@ -484,16 +596,27 @@ export function createDashboardHandle(ctx) {
         for (const v of handle.toJSON().views)
             lastReported.set(v.id, JSON.stringify(v.widgets));
         const onHistory = () => {
-            var _a;
+            var _a, _b;
             if (!ctx.apiRef)
                 return;
             const model = ctx.apiRef.getModel();
             for (const id of [...ctx.boardGroups.keys()]) {
+                // A TAB CONTAINER deliberately has no binder — it places its pages
+                // itself. "No binder" must not read as "needs rebinding", or every
+                // history event bound a GRID on it and laid the three pages out as
+                // cells side by side (measured: 2×2 of 216×200 after one resize).
+                if (ctx.layoutOf.get(id) === 'tabs')
+                    continue;
                 if (!binders.has(id) && model.getGroup(id))
                     (_a = ctx.rebindContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, id);
             }
             for (const b of binders.values())
                 b.sync();
+            // …and undo/redo of a section resize must re-place the pages under the
+            // strip, which only the tabs runtime knows how to do.
+            for (const id of ctx.layoutOf.keys())
+                if (ctx.layoutOf.get(id) === 'tabs')
+                    (_b = ctx.syncTabs) === null || _b === void 0 ? void 0 : _b.call(ctx, id);
             clampCamera();
             ctx.apiRef.renderNow();
             reportChanged();
@@ -630,6 +753,27 @@ export function createDashboardHandle(ctx) {
             return true;
         },
         getCaption: (id) => { var _a; return (_a = specById.get(id)) === null || _a === void 0 ? void 0 : _a.caption; },
+        activateTab(containerId, pageId) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            const cg = ctx.boardGroups.get(containerId);
+            const w = specById.get(containerId);
+            if (!cg || !w || ((_a = ctx.layoutOf.get(containerId)) !== null && _a !== void 0 ? _a : w.layout) !== 'tabs')
+                return false;
+            if (!((_b = w.widgets) !== null && _b !== void 0 ? _b : []).some((p) => p.id === pageId && p.widgets))
+                return false;
+            if (ctx.activeTab.get(containerId) === pageId)
+                return true;
+            ctx.activeTab.set(containerId, pageId);
+            w.active = pageId;
+            const cw = (_c = cg.getMetadata('containerWidget')) !== null && _c !== void 0 ? _c : {};
+            cg.setMetadata('containerWidget', Object.assign(Object.assign({}, cw), { active: pageId }));
+            (_d = ctx.syncTabs) === null || _d === void 0 ? void 0 : _d.call(ctx, containerId);
+            (_e = ctx.apiRef) === null || _e === void 0 ? void 0 : _e.renderNow();
+            (_f = ctx.onTabChange) === null || _f === void 0 ? void 0 : _f.call(ctx, containerId, pageId, (_g = ctx.viewOfBoard.get(containerId)) !== null && _g !== void 0 ? _g : ctx.active);
+            reportChanged();
+            return true;
+        },
+        getActiveTab: (containerId) => ctx.activeTab.get(containerId),
         setSizing(mode) {
             var _a;
             for (const b of binders.values())
@@ -1061,6 +1205,9 @@ export function dashboard(options) {
         boardH,
         mode,
         overflow,
+        activeTab: new Map(),
+        tabsOf: new Map(),
+        tabStrips: new Map(),
         layoutOf: new Map(views.map((v) => { var _a; return [v.id, (_a = v.layout) !== null && _a !== void 0 ? _a : layout]; })),
         optionsBase: options,
         active: (_p = (_o = views[0]) === null || _o === void 0 ? void 0 : _o.id) !== null && _p !== void 0 ? _p : 'main',
@@ -1079,7 +1226,7 @@ export function dashboard(options) {
         }, get handle() {
             return handle;
         }, finalize: (api) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
             const a = api;
             if (!a)
                 return;
@@ -1179,13 +1326,15 @@ export function dashboard(options) {
             };
             handle.showView(ctx.active);
             ctx.rebindContainer = (id) => {
-                var _a;
+                var _a, _b;
                 const g = model.getGroup(id);
                 const w = specById.get(id);
                 if (!g || !w || !w.widgets)
                     return;
+                if (((_a = ctx.layoutOf.get(id)) !== null && _a !== void 0 ? _a : w.layout) === 'tabs')
+                    return; // places its own pages
                 ctx.boardGroups.set(id, g);
-                bindContainer(g, w, (_a = ctx.viewOfBoard.get(id)) !== null && _a !== void 0 ? _a : ctx.active);
+                bindContainer(g, w, (_b = ctx.viewOfBoard.get(id)) !== null && _b !== void 0 ? _b : ctx.active);
             };
             /**
              * LIVE LAYOUT SWITCH ON A CONTAINER (item 7) — the view's contract one
@@ -1236,7 +1385,13 @@ export function dashboard(options) {
                 else if (selected)
                     (_f = binders.get(id)) === null || _f === void 0 ? void 0 : _f.selectWidget(selected);
             }
-            (_m = ctx.attachHistory) === null || _m === void 0 ? void 0 : _m.call(ctx);
+            // (Statements must live BEFORE this return — everything below it is a
+            // hoisted function declaration, so an assignment placed there never
+            // runs. That cost me a debugging round: `ctx.syncTabs` stayed undefined
+            // and every tab switch silently did nothing.)
+            ctx.onTabChange = options.onTabChange;
+            attachTabsRuntime(ctx, model, (_m = a.container) !== null && _m !== void 0 ? _m : null, handle);
+            (_o = ctx.attachHistory) === null || _o === void 0 ? void 0 : _o.call(ctx);
             return;
             /**
              * Mount one board's widgets into its group — and recurse for CONTAINERS.
@@ -1248,7 +1403,7 @@ export function dashboard(options) {
              * hit-testing and the height-escalation ratchet all apply unchanged.
              */
             function mountBoard(boardId, viewId, widgets, boardGroup) {
-                var _a, _b, _c, _d, _e, _f, _g;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 for (const w of widgets) {
                     if (w.widgets) {
                         const innerColumns = innerColumnsOf(w);
@@ -1285,6 +1440,21 @@ export function dashboard(options) {
                         boardGroup.addMember(w.id);
                         ctx.boardGroups.set(w.id, cg);
                         mountBoard(w.id, viewId, w.widgets, cg);
+                        if (w.layout === 'tabs') {
+                            // A TAB CONTAINER lays its pages out itself — one visible, the
+                            // rest parked — so it binds no grid of its own. Its pages are
+                            // ordinary containers with ordinary binders. The runtime that
+                            // positions them is attached once, after every board is mounted.
+                            const pages = ((_f = w.widgets) !== null && _f !== void 0 ? _f : []).filter((c) => !!c.widgets);
+                            const active = w.active && pages.some((p) => p.id === w.active) ? w.active : (_g = pages[0]) === null || _g === void 0 ? void 0 : _g.id;
+                            if (active) {
+                                ctx.activeTab.set(w.id, active);
+                                w.active = active;
+                            }
+                            cg.setMetadata('containerWidget', Object.assign(Object.assign(Object.assign(Object.assign({}, cg.getMetadata('containerWidget')), { layout: 'tabs' }), (active ? { active } : {})), (w.tabs ? { tabs: w.tabs } : {})));
+                            ctx.tabsOf.set(w.id, (_h = w.tabs) !== null && _h !== void 0 ? _h : {});
+                            continue;
+                        }
                         bindContainer(cg, w, viewId);
                         continue;
                     }
@@ -1299,7 +1469,7 @@ export function dashboard(options) {
                     // and made toJSON() → dashboard() NOT round-trip (a saved layout
                     // rebuilt back into its declaration order rather than its cells).
                     if (w.x !== undefined && w.y !== undefined) {
-                        n.setGridItem(gridItemFromCell({ x: w.x, y: w.y, w: (_f = w.span) !== null && _f !== void 0 ? _f : 3, h: (_g = w.rows) !== null && _g !== void 0 ? _g : 1 }));
+                        n.setGridItem(gridItemFromCell({ x: w.x, y: w.y, w: (_j = w.span) !== null && _j !== void 0 ? _j : 3, h: (_k = w.rows) !== null && _k !== void 0 ? _k : 1 }));
                     }
                     if (w.pinned)
                         n.setState({ locked: true });

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

@@ -114,6 +114,9 @@ export function ownsPress(container, diagram, ev, hit) {
     // anything the caption's `passThrough` names) is the content's, not any
     // tool's: no selection, no drag, no resize — the DOM handles it.
     if (typeof Element !== 'undefined' && t instanceof Element) {
+        // A TAB STRIP is content, never a board press: its tabs are real buttons.
+        if (t.closest('.axdb-tabs'))
+            return false;
         const band = t.closest('.axdb-slab > .axdb-slab-h');
         const sid = (_b = band === null || band === void 0 ? void 0 : band.parentElement) === null || _b === void 0 ? void 0 : _b.getAttribute('data-slab-id');
         if (band && sid) {
@@ -2274,10 +2277,20 @@ export function bindDashboardGrid(api, group, options = {}) {
             // A press on one of OUR sections' caption bands is ours by the DOM: a
             // 'tab' band sits above the frame, over the gap or the tile above,
             // where the geometry says otherwise.
-            const bandTarget = (_c = (_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, '.axdb-slab > .axdb-slab-h');
-            const bandId = (_d = bandTarget === null || bandTarget === void 0 ? void 0 : bandTarget.parentElement) === null || _d === void 0 ? void 0 : _d.getAttribute('data-slab-id');
-            if (bandId && ((_e = group.members) !== null && _e !== void 0 ? _e : new Set()).has(bandId))
+            const chrome = (_c = (_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, '.axdb-slab > .axdb-slab-h, .axdb-slab > .axdb-rs');
+            const chromeId = (_d = chrome === null || chrome === void 0 ? void 0 : chrome.parentElement) === null || _d === void 0 ? void 0 : _d.getAttribute('data-slab-id');
+            const mine = !!chromeId && ((_e = group.members) !== null && _e !== void 0 ? _e : new Set()).has(chromeId);
+            if (mine)
                 return true;
+            // Someone else's SECTION HANDLE is never ours to claim. A tab
+            // container's pages register before the parent board, so a page's tool
+            // won the tie for the CONTAINER's corner handle and, finding no peer to
+            // hand it to, just cleared the selection — the container could not be
+            // resized by hand at all while the API resized it fine. (Only the
+            // handle: declining every foreign band broke the press that reaches the
+            // content under a hidden `show: 'hover'` caption.)
+            if (chromeId && (chrome === null || chrome === void 0 ? void 0 : chrome.classList.contains('axdb-rs')))
+                return false;
             if (hit.node) {
                 if (((_f = group.members) !== null && _f !== void 0 ? _f : new Set()).has(hit.node.id))
                     return true;

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

@@ -3,6 +3,7 @@ export { bindDashboardSplit, SetSplitTreeCommand, SPLIT_TREE_KEY, type Dashboard
 export { projectSplit, dividersOf, addSplitLeaf, removeSplitLeaf, insertSplitLeaf, moveSplitDivider, splitFromCells, cellsFromSplit, splitLeaves, type SplitNode, type SplitGroup, type SplitLeaf, type SplitDir, type SplitSide, type SplitDivider, } from './split-layout.js';
 export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, type CellRect, type WorldRect, type DashboardGridGeometry, type TileDelta, } from './grid-mapping.js';
 export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles.js';
+export { paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT, type TabsOptions, type TabPage } from './tabs.js';
 export { normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, type SectionCaption, type SectionCaptionOptions, type SectionCaptionAction, type SectionCaptionFont, } from './caption.js';
 export { dashboard, type DashboardOptions, type DashboardSpec, type DashboardSnapshot, type DashboardHandle, type DashboardViewSpec, type DashboardWidgetSpec, type WidgetHandle, } from './dashboard.js';
 export { defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, type WidgetRenderer, type KpiWidgetData, type LineWidgetData, type LineSeries, type BarWidgetData, type DonutWidgetData, type FunnelWidgetData, type TableWidgetData, } from './widgets.js';

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

@@ -3,6 +3,7 @@ export { bindDashboardSplit, SetSplitTreeCommand, SPLIT_TREE_KEY, } from './spli
 export { projectSplit, dividersOf, addSplitLeaf, removeSplitLeaf, insertSplitLeaf, moveSplitDivider, splitFromCells, cellsFromSplit, splitLeaves, } from './split-layout.js';
 export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, } from './grid-mapping.js';
 export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles.js';
+export { paintTabStrip, tabStripReserve, tabStripKey, TAB_STRIP_HEIGHT } from './tabs.js';
 export { normalizeCaption, captionReserve, captionBandHeight, paintCaptionBand, CAPTION_HEIGHT, CAPTION_HEIGHT_SUBTITLE, CAPTION_HEIGHT_TIGHT, CAPTION_PASS_THROUGH, } from './caption.js';
 // The DATA-FIRST authoring API (the erDiagram/umlDiagram equivalent).
 export { dashboard, } from './dashboard.js';

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

@@ -442,6 +442,43 @@ const CSS = `
   .axdb-slab-h-action:hover { background: rgba(236, 238, 244, .1); }
 }
 
+/* TAB CONTAINER (0.4.27): a strip of pages across the container's top. The
+   strip takes the pointer (the tabs are real buttons); the pages below it are
+   ordinary boards. */
+.grafloria-html-layer > .axdb-tabs {
+  position: absolute; box-sizing: border-box; pointer-events: auto; z-index: 5;
+  display: flex; align-items: flex-end; gap: 2px; padding: 0 6px; overflow-x: auto; overflow-y: hidden;
+  background: var(--axdb-tabs-bg, rgba(31, 36, 48, .05));
+  border-bottom: 1px solid var(--axdb-tabs-line, rgba(31, 36, 48, .12));
+  border-radius: var(--axdb-rs-radius, 3px) var(--axdb-rs-radius, 3px) 0 0;
+  scrollbar-width: thin;
+}
+.axdb-tabs--center { justify-content: center; }
+.axdb-tabs--end { justify-content: flex-end; }
+.axdb-tabs--stretch > .axdb-tab { flex: 1 1 0; }
+.axdb-tab {
+  all: unset; box-sizing: border-box; flex: 0 0 auto; max-width: 200px;
+  padding: 0 12px; height: calc(100% - 4px); display: inline-flex; align-items: center;
+  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: var(--axdb-tabs-fg, #5a6478); cursor: pointer;
+  border-radius: var(--axdb-rs-radius, 3px) var(--axdb-rs-radius, 3px) 0 0;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.axdb-tab:hover { background: rgba(31, 36, 48, .06); }
+.axdb-tab:focus-visible { outline: 2px solid var(--axdb-accent-ring, rgba(59, 82, 217, .55)); outline-offset: -2px; }
+/* The active tab reads as the front page: the card's own ground, lifted. */
+.axdb-tab.axdb-tab--on {
+  background: var(--axdb-tabs-on-bg, #fff);
+  color: var(--axdb-tabs-on-fg, #1f2430);
+  box-shadow: 0 -1px 0 var(--axdb-accent, #3b52d9) inset, 0 0 0 1px rgba(31, 36, 48, .1);
+}
+@media (prefers-color-scheme: dark) {
+  .grafloria-html-layer > .axdb-tabs { background: var(--axdb-tabs-bg, rgba(236, 238, 244, .06)); border-bottom-color: var(--axdb-tabs-line, rgba(236, 238, 244, .14)); }
+  .axdb-tab { color: var(--axdb-tabs-fg, #98a1b4); }
+  .axdb-tab:hover { background: rgba(236, 238, 244, .08); }
+  .axdb-tab.axdb-tab--on { background: var(--axdb-tabs-on-bg, #1a1d25); color: var(--axdb-tabs-on-fg, #eceef4); box-shadow: 0 -1px 0 var(--axdb-accent, #7d8ff0) inset, 0 0 0 1px rgba(236, 238, 244, .14); }
+}
+
 /* legend chips, shared by line and donut */
 .axdb-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; }
 .axdb-lg--col { flex-direction: column; flex-wrap: nowrap; gap: 6px; margin-top: 0; }

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

@@ -0,0 +1,36 @@
+/**
+ * TAB CONTAINERS — a container whose children are PAGES, one visible at a
+ * time, with a strip of tabs across its top. DevExpress ships this as its Tab
+ * Container; VS Code's editor area is a split of them.
+ *
+ * This module owns the strip: its height, its geometry and its DOM. Who is
+ * active, where the pages sit and what a press means are the container's
+ * business (dashboard.ts), exactly as the caption band's press routing is the
+ * binder's.
+ */
+export interface TabsOptions {
+    /** Where the strip sits. Only 'top' today; 'bottom' | 'start' | 'end' follow. */
+    position?: 'top';
+    /** Along the strip (default 'start', mirrored on RTL). */
+    align?: 'start' | 'center' | 'end';
+    /** Tabs share the strip's width equally. */
+    stretch?: boolean;
+    /** Strip height, px (default 30). */
+    height?: number;
+    /** Your class on the strip, for per-container theming. */
+    className?: string;
+}
+export interface TabPage {
+    id: string;
+    label: string;
+}
+export declare const TAB_STRIP_HEIGHT = 30;
+/** Pixels the pages give up at the top of the container. */
+export declare function tabStripReserve(o: TabsOptions | undefined, pageCount: number): 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
+ * rebuild — and so a `click` listener survives between switches.
+ */
+export declare function tabStripKey(pages: TabPage[], activeId: string, o: TabsOptions | undefined, rtl: boolean): string;
+export declare function paintTabStrip(strip: HTMLElement, pages: TabPage[], activeId: string, o: TabsOptions | undefined, rtl: boolean, onPick: (id: string) => void, onSelectContainer?: () => void): void;

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

@@ -0,0 +1,84 @@
+/**
+ * TAB CONTAINERS — a container whose children are PAGES, one visible at a
+ * time, with a strip of tabs across its top. DevExpress ships this as its Tab
+ * Container; VS Code's editor area is a split of them.
+ *
+ * This module owns the strip: its height, its geometry and its DOM. Who is
+ * active, where the pages sit and what a press means are the container's
+ * business (dashboard.ts), exactly as the caption band's press routing is the
+ * binder's.
+ */
+export const TAB_STRIP_HEIGHT = 30;
+/** Pixels the pages give up at the top of the container. */
+export function tabStripReserve(o, pageCount) {
+    var _a;
+    if (pageCount <= 0)
+        return 0;
+    return Math.max(18, (_a = o === null || o === void 0 ? void 0 : o.height) !== null && _a !== void 0 ? _a : TAB_STRIP_HEIGHT);
+}
+/**
+ * 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
+ * rebuild — and so a `click` listener survives between switches.
+ */
+export function tabStripKey(pages, activeId, o, rtl) {
+    return JSON.stringify([pages, activeId, o !== null && o !== void 0 ? o : null, rtl]);
+}
+export function paintTabStrip(strip, pages, activeId, o, rtl, onPick, onSelectContainer) {
+    const doc = strip.ownerDocument;
+    strip.className = 'axdb-tabs';
+    if (o === null || o === void 0 ? void 0 : o.className)
+        for (const c of o.className.split(/\s+/).filter(Boolean))
+            strip.classList.add(c);
+    strip.classList.toggle('axdb-tabs--center', (o === null || o === void 0 ? void 0 : o.align) === 'center');
+    strip.classList.toggle('axdb-tabs--end', (o === null || o === void 0 ? void 0 : o.align) === 'end');
+    strip.classList.toggle('axdb-tabs--stretch', (o === null || o === void 0 ? void 0 : o.stretch) === true);
+    strip.setAttribute('dir', rtl ? 'rtl' : 'ltr');
+    strip.setAttribute('role', 'tablist');
+    strip.textContent = '';
+    // The strip's EMPTY space selects the container. A tab container's pages
+    // cover it completely, so without this there is nowhere to press to select
+    // it — and an unselected section shows no corner handle, which made the
+    // container impossible to resize by hand.
+    strip.onpointerdown = (e) => {
+        var _a;
+        if ((_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('.axdb-tab'))
+            return;
+        onSelectContainer === null || onSelectContainer === void 0 ? void 0 : onSelectContainer();
+    };
+    for (const p of pages) {
+        const b = doc.createElement('button');
+        b.type = 'button';
+        b.className = 'axdb-tab';
+        b.setAttribute('role', 'tab');
+        b.setAttribute('data-tab-id', p.id);
+        b.setAttribute('aria-selected', String(p.id === activeId));
+        b.classList.toggle('axdb-tab--on', p.id === activeId);
+        // ONE tab stop for the whole strip, arrows move between tabs — the
+        // pattern every tablist uses, and it keeps the board's single tab stop
+        // rule intact.
+        b.tabIndex = p.id === activeId ? 0 : -1;
+        b.textContent = p.label;
+        b.title = p.label;
+        b.addEventListener('click', (e) => {
+            e.stopPropagation();
+            onPick(p.id);
+        });
+        b.addEventListener('keydown', (e) => {
+            var _a;
+            const k = e.key;
+            const step = k === 'ArrowRight' ? 1 : k === 'ArrowLeft' ? -1 : k === 'Home' ? -pages.length : k === 'End' ? pages.length : 0;
+            if (!step)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            const i = pages.findIndex((x) => x.id === p.id);
+            const dir = rtl && (k === 'ArrowRight' || k === 'ArrowLeft') ? -step : step;
+            const next = Math.max(0, Math.min(pages.length - 1, i + dir));
+            onPick(pages[next].id);
+            (_a = strip.querySelector(`[data-tab-id="${pages[next].id}"]`)) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+        strip.appendChild(b);
+    }
+}
+//# sourceMappingURL=tabs.js.map

package/src/lib/load.js

@@ -72,7 +72,7 @@ import { gridItemFromCell } from './dashboard-kit/grid-mapping.js';
 import { cellFromGridItem } from './dashboard-kit/grid-mapping.js';
 import { ensureDashboardKitStyles } from './dashboard-kit/styles.js';
 import { defaultWidgetRenderer } from './dashboard-kit/widgets.js';
-import { createDashboardHandle, } from './dashboard-kit/dashboard.js';
+import { createDashboardHandle, attachTabsRuntime } from './dashboard-kit/dashboard.js';
 /** True when the node is an ER entity card or a UML class card. */
 function isDiagramKitCard(node) {
     return node.getMetadata('kitEntity') !== undefined || node.getMetadata('kitClass') !== undefined;
@@ -206,6 +206,9 @@ export function fromDocument(document, options = {}) {
         // a fixed world — it stays one. Fluid is only what was saved fluid.
         mode: (firstBoard === null || firstBoard === void 0 ? void 0 : firstBoard.fluid) === true ? 'fluid' : 'fixed',
         overflow: (_p = firstBoard === null || firstBoard === void 0 ? void 0 : firstBoard.overflow) !== null && _p !== void 0 ? _p : 'bounded',
+        activeTab: new Map(),
+        tabsOf: new Map(),
+        tabStrips: new Map(),
         layoutOf: new Map(dashGroups.map((g) => { var _a, _b; return [g.id, ((_b = (_a = g.getMetadata('dashboardBoard')) === null || _a === void 0 ? void 0 : _a.layout) !== null && _b !== void 0 ? _b : 'grid')]; })),
         // responsive is NOT in the document (a runtime seam), so it is deliberately
         // absent from the round-trip; width/height/columns/gap/sizing/float/rtl are.
@@ -244,7 +247,7 @@ export function fromDocument(document, options = {}) {
         (_b = getNodeType(node.type)) === null || _b === void 0 ? void 0 : _b(node, host);
     };
     const finalize = (api) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const a = api;
         if (!a)
             return;
@@ -289,8 +292,15 @@ export function fromDocument(document, options = {}) {
             const board = group.getMetadata('dashboardBoard');
             if (!board)
                 continue;
+            // A TAB CONTAINER binds no board of its own — the runtime below places
+            // its pages and paints its strip.
+            if (board.layout === 'tabs')
+                continue;
             boards.set(group.id, bindBoard(group, board));
         }
+        // Tab containers, with the same runtime dashboard() uses — a reloaded
+        // document must switch pages exactly like a board built from a literal.
+        attachTabsRuntime(ctx, model, (_e = a.container) !== null && _e !== void 0 ? _e : null, handle);
         // LIVE LAYOUT SWITCH on a loaded document — the same contract dashboard()
         // finalize offers: cells persisted where the grid reads them, any tree and
         // column cache cleared, the board's `layout` flag flipped, a fresh binder.
@@ -337,7 +347,7 @@ export function fromDocument(document, options = {}) {
         }
         // A loaded board follows the history exactly as an authored one does: an
         // undo re-syncs every binder without the consumer calling refresh().
-        (_e = ctx.attachHistory) === null || _e === void 0 ? void 0 : _e.call(ctx);
+        (_f = ctx.attachHistory) === null || _f === void 0 ? void 0 : _f.call(ctx);
     };
     return Object.assign({ nodes, edges: model.getLinks(), renderCustomNode,
         finalize,