@grafloria/element 0.3.18 → 0.3.20

package/src/libs/element/src/lib/dashboard-kit/grid-mapping.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Dashboard-kit pure math — Phase 2 of the dashboard-grid plan
+ * (`documentation/api-architecture/dashboard-grid-plan.html`).
+ *
+ * Everything here is DOM-free and instance-free so it can be table-driven from
+ * a jest spec: the cell↔pixel mapping in both sizing modes, the
+ * GridItemConfig↔GridPackItem round-trip, and the gesture commit-batch
+ * construction. The stateful binder (`grid-binder.ts`) is a thin pointer loop
+ * over these functions plus the engine's `GridPackEngine` — the engine owns
+ * ALL cell math (push/swap/gate/settle); this module owns only how cells and
+ * pixels convert into each other and into undoable commands.
+ *
+ * SIZING MODES (user decision, recorded in the plan's Section 6):
+ *   'fit'  — DevExtreme-style compact. The board keeps its DESIGN height and
+ *            the row height re-derives from the content's row count, so every
+ *            widget always stays inside the frame — nothing can be pushed out
+ *            of reach. Guarded by `minRowHeight` so a pathological row count
+ *            squeezes to a floor instead of zero.
+ *   'grow' — rows keep `baseRowHeight` and the board frame extends downward
+ *            to hold them (never below the design height). Camera refit after
+ *            growth is the page's concern (its existing `frameTab`).
+ */
+import { type Command, type GridItemConfig } from '@grafloria/engine';
+/** One tile in integer board cells — the shape `GridPackEngine` speaks. */
+export interface CellRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** A world-space rectangle (the group frame, or a projected tile). */
+export interface WorldRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface DashboardGridGeometry {
+    /** Column count of the board (default 12). */
+    columns: number;
+    /** Gap between cells, px. */
+    gap: number;
+    /** Padding between the board frame and the outermost cells, px. */
+    padding: number;
+    sizing: 'fit' | 'grow';
+    /** Row height in 'grow' mode, px. */
+    baseRowHeight: number;
+    /** Floor for the derived 'fit' row height, px. */
+    minRowHeight: number;
+    /** The board's design height — 'fit' keeps it, 'grow' never shrinks below it. */
+    designHeight: number;
+    /**
+     * RIGHT-TO-LEFT boards. The MODEL is direction-agnostic — cell x=0 is always
+     * "the first column" and every rule in `GridPackEngine` (push, swap, gravity,
+     * the anti-jitter gate) is written in cells, so none of it changes. ONLY this
+     * module's pixel mapping mirrors: x=0 renders at the board's RIGHT edge and
+     * columns run leftwards. A layout saved in one direction therefore renders
+     * mirrored in the other with byte-identical cells, which is the property the
+     * kit's spec and the e2e battery both assert.
+     */
+    rtl?: boolean;
+}
+/** Row height for a board currently `rows` rows tall (both modes). */
+export declare function rowHeightFor(g: DashboardGridGeometry, rows: number): number;
+/** The board frame height the mode implies for `rows` rows. */
+export declare function boardHeightFor(g: DashboardGridGeometry, rows: number): number;
+/** Width of one column cell for a board `width` px wide. */
+export declare function columnUnitFor(g: DashboardGridGeometry, width: number): number;
+/** Width in px of a `w`-column span (the pitch identity used by both mappings). */
+export declare function spanWidthPx(w: number, g: DashboardGridGeometry, frameWidth: number): number;
+/**
+ * Project integer cells into a world rectangle inside `frame`.
+ *
+ * RTL mirrors about the board's vertical centre line: the distance from the
+ * board's RIGHT padding edge to the tile's RIGHT edge equals what the LTR
+ * distance from the left padding edge to the tile's LEFT edge would be. Only
+ * the x term changes — rows, heights and spans are direction-agnostic.
+ */
+export declare function cellToRect(cell: CellRect, frame: WorldRect, g: DashboardGridGeometry, rows: number): WorldRect;
+/**
+ * The cell whose slot a tile TOP-LEFT at world (x, y) is closest to — the
+ * prototype's margin-adjusted midpoint rounding (`round(L / cellPitch)`).
+ * Clamping to the board is the ENGINE's job (moveCheck clamps), not ours.
+ *
+ * `spanW` is the tile's COLUMN SPAN and is used only when `g.rtl`: mirrored,
+ * the cell is decided by the tile's RIGHT edge (its leading edge), so the
+ * span is what converts the given left edge into it. LTR ignores it entirely,
+ * which is why every existing call site keeps its exact behaviour. Getting
+ * this wrong is the classic RTL drag bug — the tile lands a span away from
+ * the placeholder — so the e2e battery asserts drop-on-placeholder in RTL.
+ */
+export declare function pointToCell(x: number, y: number, frame: WorldRect, g: DashboardGridGeometry, rows: number, spanW?: number): {
+    x: number;
+    y: number;
+};
+/**
+ * The integer span a fluid pixel size rounds to — the prototype's
+ * `round((W + margin) / cellPitch)`, floored at 1×1.
+ */
+export declare function sizeToSpan(widthPx: number, heightPx: number, frame: WorldRect, g: DashboardGridGeometry, rows: number): {
+    w: number;
+    h: number;
+};
+/** Engine cells → the GridItemConfig that persists them. */
+export declare function gridItemFromCell(cell: CellRect): GridItemConfig;
+/**
+ * GridItemConfig → engine cells, or null when the config carries no usable
+ * placement (absent, or 'auto' lines). `fallback` fills spans a partial
+ * config omits — the first-adoption path uses metadata `columnSpan` there.
+ */
+export declare function cellFromGridItem(gi: GridItemConfig | undefined, fallback?: {
+    w?: number;
+    h?: number;
+}): CellRect | null;
+export interface TileDelta {
+    id: string;
+    locked?: boolean;
+    /** Group members (layout slabs) get cells-only commands — never Move/Resize. */
+    isGroup?: boolean;
+    cellBefore: CellRect;
+    cellAfter: CellRect;
+    posBefore: {
+        x: number;
+        y: number;
+    };
+    posAfter: {
+        x: number;
+        y: number;
+    };
+    sizeBefore: {
+        width: number;
+        height: number;
+        depth?: number;
+    };
+    sizeAfter: {
+        width: number;
+        height: number;
+        depth?: number;
+    };
+}
+export declare function buildCommitCommands(deltas: TileDelta[]): Command[];

package/src/libs/element/src/lib/dashboard-kit/grid-mapping.js

@@ -0,0 +1,176 @@
+"use strict";
+/**
+ * Dashboard-kit pure math — Phase 2 of the dashboard-grid plan
+ * (`documentation/api-architecture/dashboard-grid-plan.html`).
+ *
+ * Everything here is DOM-free and instance-free so it can be table-driven from
+ * a jest spec: the cell↔pixel mapping in both sizing modes, the
+ * GridItemConfig↔GridPackItem round-trip, and the gesture commit-batch
+ * construction. The stateful binder (`grid-binder.ts`) is a thin pointer loop
+ * over these functions plus the engine's `GridPackEngine` — the engine owns
+ * ALL cell math (push/swap/gate/settle); this module owns only how cells and
+ * pixels convert into each other and into undoable commands.
+ *
+ * SIZING MODES (user decision, recorded in the plan's Section 6):
+ *   'fit'  — DevExtreme-style compact. The board keeps its DESIGN height and
+ *            the row height re-derives from the content's row count, so every
+ *            widget always stays inside the frame — nothing can be pushed out
+ *            of reach. Guarded by `minRowHeight` so a pathological row count
+ *            squeezes to a floor instead of zero.
+ *   'grow' — rows keep `baseRowHeight` and the board frame extends downward
+ *            to hold them (never below the design height). Camera refit after
+ *            growth is the page's concern (its existing `frameTab`).
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rowHeightFor = rowHeightFor;
+exports.boardHeightFor = boardHeightFor;
+exports.columnUnitFor = columnUnitFor;
+exports.spanWidthPx = spanWidthPx;
+exports.cellToRect = cellToRect;
+exports.pointToCell = pointToCell;
+exports.sizeToSpan = sizeToSpan;
+exports.gridItemFromCell = gridItemFromCell;
+exports.cellFromGridItem = cellFromGridItem;
+exports.buildCommitCommands = buildCommitCommands;
+const engine_1 = require("@grafloria/engine");
+/** Row height for a board currently `rows` rows tall (both modes). */
+function rowHeightFor(g, rows) {
+    if (g.sizing === 'grow')
+        return g.baseRowHeight;
+    const r = Math.max(1, rows);
+    // design = 2*padding + r*rowH + (r-1)*gap  →  solve for rowH.
+    return Math.max(g.minRowHeight, (g.designHeight - 2 * g.padding - (r - 1) * g.gap) / r);
+}
+/** The board frame height the mode implies for `rows` rows. */
+function boardHeightFor(g, rows) {
+    if (g.sizing === 'fit')
+        return g.designHeight;
+    const r = Math.max(0, rows);
+    const content = 2 * g.padding + (r === 0 ? 0 : r * g.baseRowHeight + (r - 1) * g.gap);
+    return Math.max(g.designHeight, content);
+}
+/** Width of one column cell for a board `width` px wide. */
+function columnUnitFor(g, width) {
+    return (width - 2 * g.padding - (g.columns - 1) * g.gap) / g.columns;
+}
+/** Width in px of a `w`-column span (the pitch identity used by both mappings). */
+function spanWidthPx(w, g, frameWidth) {
+    const cu = columnUnitFor(g, frameWidth);
+    return w * cu + (w - 1) * g.gap;
+}
+/**
+ * Project integer cells into a world rectangle inside `frame`.
+ *
+ * RTL mirrors about the board's vertical centre line: the distance from the
+ * board's RIGHT padding edge to the tile's RIGHT edge equals what the LTR
+ * distance from the left padding edge to the tile's LEFT edge would be. Only
+ * the x term changes — rows, heights and spans are direction-agnostic.
+ */
+function cellToRect(cell, frame, g, rows) {
+    const cu = columnUnitFor(g, frame.width);
+    const rh = rowHeightFor(g, rows);
+    const width = cell.w * cu + (cell.w - 1) * g.gap;
+    return {
+        x: g.rtl
+            ? frame.x + frame.width - g.padding - cell.x * (cu + g.gap) - width
+            : frame.x + g.padding + cell.x * (cu + g.gap),
+        y: frame.y + g.padding + cell.y * (rh + g.gap),
+        width,
+        height: cell.h * rh + (cell.h - 1) * g.gap,
+    };
+}
+/**
+ * The cell whose slot a tile TOP-LEFT at world (x, y) is closest to — the
+ * prototype's margin-adjusted midpoint rounding (`round(L / cellPitch)`).
+ * Clamping to the board is the ENGINE's job (moveCheck clamps), not ours.
+ *
+ * `spanW` is the tile's COLUMN SPAN and is used only when `g.rtl`: mirrored,
+ * the cell is decided by the tile's RIGHT edge (its leading edge), so the
+ * span is what converts the given left edge into it. LTR ignores it entirely,
+ * which is why every existing call site keeps its exact behaviour. Getting
+ * this wrong is the classic RTL drag bug — the tile lands a span away from
+ * the placeholder — so the e2e battery asserts drop-on-placeholder in RTL.
+ */
+function pointToCell(x, y, frame, g, rows, spanW = 1) {
+    const cu = columnUnitFor(g, frame.width);
+    const rh = rowHeightFor(g, rows);
+    const right = x + spanWidthPx(spanW, g, frame.width);
+    return {
+        x: g.rtl
+            ? Math.round((frame.x + frame.width - g.padding - right) / (cu + g.gap))
+            : Math.round((x - frame.x - g.padding) / (cu + g.gap)),
+        y: Math.round((y - frame.y - g.padding) / (rh + g.gap)),
+    };
+}
+/**
+ * The integer span a fluid pixel size rounds to — the prototype's
+ * `round((W + margin) / cellPitch)`, floored at 1×1.
+ */
+function sizeToSpan(widthPx, heightPx, frame, g, rows) {
+    const cu = columnUnitFor(g, frame.width);
+    const rh = rowHeightFor(g, rows);
+    return {
+        w: Math.max(1, Math.round((widthPx + g.gap) / (cu + g.gap))),
+        h: Math.max(1, Math.round((heightPx + g.gap) / (rh + g.gap))),
+    };
+}
+// ---------------------------------------------------------------------------
+// GridItemConfig ↔ engine cells.
+//
+// The cell state lives in the EXISTING GridItemConfig (1-based, exclusive-end
+// line numbers — CSS grid vocabulary): columnStart/rowStart are the cell + 1,
+// columnEnd/rowEnd are cell + span + 1. Nothing new is persisted; save/load
+// already round-trips gridItem.
+// ---------------------------------------------------------------------------
+/** Engine cells → the GridItemConfig that persists them. */
+function gridItemFromCell(cell) {
+    return {
+        columnStart: cell.x + 1,
+        columnEnd: cell.x + cell.w + 1,
+        rowStart: cell.y + 1,
+        rowEnd: cell.y + cell.h + 1,
+    };
+}
+/**
+ * GridItemConfig → engine cells, or null when the config carries no usable
+ * placement (absent, or 'auto' lines). `fallback` fills spans a partial
+ * config omits — the first-adoption path uses metadata `columnSpan` there.
+ */
+function cellFromGridItem(gi, fallback) {
+    var _a, _b;
+    if (!gi)
+        return null;
+    const num = (v) => typeof v === 'number' && Number.isFinite(v) ? v : null;
+    const cs = num(gi.columnStart);
+    const rs = num(gi.rowStart);
+    if (cs === null || rs === null)
+        return null;
+    const ce = num(gi.columnEnd);
+    const re = num(gi.rowEnd);
+    const w = ce !== null ? ce - cs : (_a = fallback === null || fallback === void 0 ? void 0 : fallback.w) !== null && _a !== void 0 ? _a : 1;
+    const h = re !== null ? re - rs : (_b = fallback === null || fallback === void 0 ? void 0 : fallback.h) !== null && _b !== void 0 ? _b : 1;
+    return { x: cs - 1, y: rs - 1, w: Math.max(1, w), h: Math.max(1, h) };
+}
+const cellsDiffer = (a, b) => a.x !== b.x || a.y !== b.y || a.w !== b.w || a.h !== b.h;
+const EPS = 0.5;
+function buildCommitCommands(deltas) {
+    const commands = [];
+    for (const d of deltas) {
+        const cellChanged = cellsDiffer(d.cellBefore, d.cellAfter);
+        if (cellChanged && !d.isGroup) {
+            commands.push(new engine_1.SetGridItemCommand(d.id, gridItemFromCell(d.cellAfter)));
+        }
+        if (d.locked || d.isGroup)
+            continue;
+        if (Math.abs(d.posAfter.x - d.posBefore.x) > EPS ||
+            Math.abs(d.posAfter.y - d.posBefore.y) > EPS) {
+            commands.push(new engine_1.MoveNodeCommand(d.id, Object.assign({}, d.posAfter), Object.assign({}, d.posBefore), { mergeable: false }));
+        }
+        if (Math.abs(d.sizeAfter.width - d.sizeBefore.width) > EPS ||
+            Math.abs(d.sizeAfter.height - d.sizeBefore.height) > EPS) {
+            commands.push(new engine_1.ResizeNodeCommand(d.id, Object.assign({ depth: 0 }, d.sizeAfter), Object.assign({ depth: 0 }, d.sizeBefore)));
+        }
+    }
+    return commands;
+}
+//# sourceMappingURL=grid-mapping.js.map

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

@@ -0,0 +1,5 @@
+export { bindDashboardGrid, type DashboardGridApi, type DashboardGridOptions, type DashboardGridHandle, type DashboardResponsiveOptions, } from './grid-binder';
+export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, type CellRect, type WorldRect, type DashboardGridGeometry, type TileDelta, } from './grid-mapping';
+export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles';
+export { dashboard, type DashboardOptions, type DashboardSpec, type DashboardSnapshot, type DashboardHandle, type DashboardViewSpec, type DashboardWidgetSpec, type WidgetHandle, } from './dashboard';
+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';

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUILT_IN_WIDGET_KINDS = exports.renderTableWidget = exports.renderFunnelWidget = exports.renderDonutWidget = exports.renderBarWidget = exports.renderLineWidget = exports.renderKpiWidget = exports.defaultWidgetRenderer = exports.dashboard = exports.DASHBOARD_KIT_STYLE_ID = exports.ensureDashboardKitStyles = exports.buildCommitCommands = exports.cellFromGridItem = exports.gridItemFromCell = exports.spanWidthPx = exports.sizeToSpan = exports.pointToCell = exports.cellToRect = exports.columnUnitFor = exports.boardHeightFor = exports.rowHeightFor = exports.bindDashboardGrid = void 0;
+var grid_binder_1 = require("./grid-binder");
+Object.defineProperty(exports, "bindDashboardGrid", { enumerable: true, get: function () { return grid_binder_1.bindDashboardGrid; } });
+var grid_mapping_1 = require("./grid-mapping");
+Object.defineProperty(exports, "rowHeightFor", { enumerable: true, get: function () { return grid_mapping_1.rowHeightFor; } });
+Object.defineProperty(exports, "boardHeightFor", { enumerable: true, get: function () { return grid_mapping_1.boardHeightFor; } });
+Object.defineProperty(exports, "columnUnitFor", { enumerable: true, get: function () { return grid_mapping_1.columnUnitFor; } });
+Object.defineProperty(exports, "cellToRect", { enumerable: true, get: function () { return grid_mapping_1.cellToRect; } });
+Object.defineProperty(exports, "pointToCell", { enumerable: true, get: function () { return grid_mapping_1.pointToCell; } });
+Object.defineProperty(exports, "sizeToSpan", { enumerable: true, get: function () { return grid_mapping_1.sizeToSpan; } });
+Object.defineProperty(exports, "spanWidthPx", { enumerable: true, get: function () { return grid_mapping_1.spanWidthPx; } });
+Object.defineProperty(exports, "gridItemFromCell", { enumerable: true, get: function () { return grid_mapping_1.gridItemFromCell; } });
+Object.defineProperty(exports, "cellFromGridItem", { enumerable: true, get: function () { return grid_mapping_1.cellFromGridItem; } });
+Object.defineProperty(exports, "buildCommitCommands", { enumerable: true, get: function () { return grid_mapping_1.buildCommitCommands; } });
+var styles_1 = require("./styles");
+Object.defineProperty(exports, "ensureDashboardKitStyles", { enumerable: true, get: function () { return styles_1.ensureDashboardKitStyles; } });
+Object.defineProperty(exports, "DASHBOARD_KIT_STYLE_ID", { enumerable: true, get: function () { return styles_1.DASHBOARD_KIT_STYLE_ID; } });
+// The DATA-FIRST authoring API (the erDiagram/umlDiagram equivalent).
+var dashboard_1 = require("./dashboard");
+Object.defineProperty(exports, "dashboard", { enumerable: true, get: function () { return dashboard_1.dashboard; } });
+// The built-in renderers behind `kind` — dashboard()'s default renderWidget.
+var widgets_1 = require("./widgets");
+Object.defineProperty(exports, "defaultWidgetRenderer", { enumerable: true, get: function () { return widgets_1.defaultWidgetRenderer; } });
+Object.defineProperty(exports, "renderKpiWidget", { enumerable: true, get: function () { return widgets_1.renderKpiWidget; } });
+Object.defineProperty(exports, "renderLineWidget", { enumerable: true, get: function () { return widgets_1.renderLineWidget; } });
+Object.defineProperty(exports, "renderBarWidget", { enumerable: true, get: function () { return widgets_1.renderBarWidget; } });
+Object.defineProperty(exports, "renderDonutWidget", { enumerable: true, get: function () { return widgets_1.renderDonutWidget; } });
+Object.defineProperty(exports, "renderFunnelWidget", { enumerable: true, get: function () { return widgets_1.renderFunnelWidget; } });
+Object.defineProperty(exports, "renderTableWidget", { enumerable: true, get: function () { return widgets_1.renderTableWidget; } });
+Object.defineProperty(exports, "BUILT_IN_WIDGET_KINDS", { enumerable: true, get: function () { return widgets_1.BUILT_IN_WIDGET_KINDS; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,25 @@
+/**
+ * Dashboard-kit stylesheet — injected once, on first `bindDashboardGrid`.
+ *
+ * Everything is prefixed `axdb-` and scoped under `.grafloria-html-layer`, so
+ * binding the kit can never restyle a host's own DOM. Four jobs:
+ *
+ *  - GLIDE: the reflow transition (the pattern from commit 180a27974) that
+ *    makes displaced tiles slide to their new slot while a gesture is live.
+ *    The kit arms `.axdb-glide` on the html layer for the WHOLE gesture, so
+ *    every accepted moveCheck/resizeCheck animates the neighbours.
+ *  - GHOST: the held tile is transition-EXEMPT (it must track the pointer
+ *    1:1), floats above everything, and dims + lifts like the prototype's
+ *    `.tile.drag`. When a drag leaves the board (drag-out-to-remove) the
+ *    ghost dims further as the "release deletes" affordance.
+ *  - PLACEHOLDER: the dashed slab that always shows the exact drop result
+ *    (the prototype's `#ph`). It JUMPS — never animates — so it is always
+ *    truthful about the engine's current cell.
+ *  - RESIZE HANDLE: a corner affordance INSIDE each widget card, bottom-right,
+ *    radius-matched via `--axdb-rs-radius`, revealed on hover. The binder
+ *    injects it into each member host and re-injects if the host repaints
+ *    (pages own their card innerHTML).
+ */
+export declare const DASHBOARD_KIT_STYLE_ID = "grafloria-dashboard-kit-styles";
+/** Idempotently inject the kit stylesheet (safe to call per binder). */
+export declare function ensureDashboardKitStyles(doc?: Document): void;

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

@@ -0,0 +1,209 @@
+"use strict";
+/**
+ * Dashboard-kit stylesheet — injected once, on first `bindDashboardGrid`.
+ *
+ * Everything is prefixed `axdb-` and scoped under `.grafloria-html-layer`, so
+ * binding the kit can never restyle a host's own DOM. Four jobs:
+ *
+ *  - GLIDE: the reflow transition (the pattern from commit 180a27974) that
+ *    makes displaced tiles slide to their new slot while a gesture is live.
+ *    The kit arms `.axdb-glide` on the html layer for the WHOLE gesture, so
+ *    every accepted moveCheck/resizeCheck animates the neighbours.
+ *  - GHOST: the held tile is transition-EXEMPT (it must track the pointer
+ *    1:1), floats above everything, and dims + lifts like the prototype's
+ *    `.tile.drag`. When a drag leaves the board (drag-out-to-remove) the
+ *    ghost dims further as the "release deletes" affordance.
+ *  - PLACEHOLDER: the dashed slab that always shows the exact drop result
+ *    (the prototype's `#ph`). It JUMPS — never animates — so it is always
+ *    truthful about the engine's current cell.
+ *  - RESIZE HANDLE: a corner affordance INSIDE each widget card, bottom-right,
+ *    radius-matched via `--axdb-rs-radius`, revealed on hover. The binder
+ *    injects it into each member host and re-injects if the host repaints
+ *    (pages own their card innerHTML).
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DASHBOARD_KIT_STYLE_ID = void 0;
+exports.ensureDashboardKitStyles = ensureDashboardKitStyles;
+exports.DASHBOARD_KIT_STYLE_ID = 'grafloria-dashboard-kit-styles';
+const CSS = `
+/* ===== reflow glide (armed on the html layer for the whole gesture) ===== */
+.grafloria-html-layer.axdb-glide > .grafloria-node-host {
+  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);
+}
+
+/* ===== the held tile: transition-exempt ghost, above everything ===== */
+.grafloria-html-layer > .grafloria-node-host.axdb-ghost,
+.grafloria-html-layer.axdb-glide > .grafloria-node-host.axdb-ghost {
+  transition: none;
+  z-index: 30;
+  opacity: .85;
+  cursor: grabbing;
+  filter: drop-shadow(0 10px 16px rgba(16, 24, 40, .3));
+}
+/* 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 placeholder: dashed slab, truthful, never animated ===== */
+.grafloria-html-layer > .axdb-ph {
+  position: absolute;
+  border-radius: var(--axdb-rs-radius, 12px);
+  background: rgba(30, 34, 45, .14);
+  border: 2px dashed rgba(30, 34, 45, .28);
+  box-sizing: border-box;
+  pointer-events: none;
+  z-index: 0;
+  transition: none;
+}
+@media (prefers-color-scheme: dark) {
+  .grafloria-html-layer > .axdb-ph { background: rgba(220, 225, 240, .12); border-color: rgba(220, 225, 240, .3); }
+}
+
+/* ===== corner resize handle (hover-revealed, radius-matched) ===== */
+.grafloria-node-host > .axdb-rs {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 18px;
+  height: 18px;
+  cursor: nwse-resize;
+  border-right: 3px solid rgba(120, 130, 148, .55);
+  border-bottom: 3px solid rgba(120, 130, 148, .55);
+  border-bottom-right-radius: var(--axdb-rs-radius, 12px);
+  opacity: 0;
+  transition: opacity .12s;
+  z-index: 5;
+}
+.grafloria-node-host:hover > .axdb-rs { opacity: 1; }
+.grafloria-node-host > .axdb-rs:hover { border-color: #3b52d9; }
+/* RTL boards grow leftwards, so the grab corner mirrors with them. */
+.grafloria-node-host > .axdb-rs.axdb-rs--rtl {
+  right: auto;
+  left: 0;
+  cursor: nesw-resize;
+  border-right: none;
+  border-left: 3px solid rgba(120, 130, 148, .55);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: var(--axdb-rs-radius, 12px);
+}
+
+/* ===== palette drag-in chip (screen-space clone following the cursor) ===== */
+.axdb-drag-chip {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: .9;
+  filter: drop-shadow(0 8px 14px rgba(16, 24, 40, .3));
+}
+
+/* ===========================================================================
+   BUILT-IN WIDGET CARDS — what widgets.ts paints when a page writes no
+   renderWidget. Class-prefixed (never element selectors), so this can only
+   ever style DOM the kit itself produced. Colours are CSS variables on the
+   card, so a page re-skins every built-in widget by setting them once; the
+   corner radius follows --axdb-rs-radius, which is also the placeholder's and
+   the resize handle's, so the three can never drift apart.
+   =========================================================================== */
+.axdb-widget {
+  --axdb-ink: #1f2430;
+  --axdb-muted: #7a8496;
+  --axdb-grid: rgba(120, 130, 148, .22);
+  --axdb-card: #fff;
+  --axdb-line: #e7eaf1;
+  --axdb-soft: rgba(120, 130, 148, .14);
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 13px 15px 12px;
+  background: var(--axdb-card);
+  border: 1px solid var(--axdb-line);
+  border-radius: var(--axdb-rs-radius, 12px);
+  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: var(--axdb-ink);
+}
+.axdb-widget-h {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  font: 600 11px/1.3 system-ui, sans-serif;
+  letter-spacing: .4px;
+  text-transform: uppercase;
+  color: var(--axdb-muted);
+}
+.axdb-widget-b { flex: 1; min-height: 0; position: relative; }
+.axdb-widget-b > svg { display: block; width: 100%; height: 100%; }
+.axdb-widget-b.axdb-scroll { overflow: auto; }
+/* A chart WITH a legend under it: the plot yields height, the legend keeps its
+   own (without this the 100%-tall svg pushes the legend out of the card). */
+.axdb-widget-b.axdb-has-lg { display: flex; flex-direction: column; }
+.axdb-widget-b.axdb-has-lg > svg { flex: 1; height: auto; min-height: 0; }
+.axdb-widget-empty {
+  display: flex; align-items: center; justify-content: center; height: 100%;
+  font: 500 11.5px/1.3 system-ui, sans-serif; color: var(--axdb-muted); opacity: .75;
+}
+
+/* kpi: value + delta stack, the spark yields its height before they do */
+/* A SIZE CONTAINER, so the card's type scales with the tile instead of
+   clipping. Fit-mode shrinks tiles when rows are added (dropping a chart above
+   the KPI row took these from 122px to 85px) and fixed 30px/12px lines were
+   sliced mid-glyph by the card's overflow — the audited "trimmed" widgets.
+   cqh = 1% of the body's own height, clamped so full-size tiles look exactly
+   as before and short tiles compress instead of cutting. */
+.axdb-widget-b.axdb-kpi { display: flex; flex-direction: column; container-type: size; }
+.axdb-kpi-v { font: 700 clamp(15px, 44cqh, 30px)/1.05 system-ui, sans-serif; letter-spacing: -.02em; color: var(--axdb-ink); }
+.axdb-kpi-d { margin-top: clamp(1px, 5cqh, 6px); font: 600 clamp(9px, 19cqh, 12px)/1.2 system-ui, sans-serif; }
+.axdb-kpi-d span { color: var(--axdb-muted); font-weight: 500; }
+.axdb-kpi-d.up { color: #12a150; }
+.axdb-kpi-d.down { color: #e11d48; }
+.axdb-kpi-s { margin-top: auto; height: 34px; min-height: 0; flex: 0 1 34px; }
+
+/* donut: ring beside its legend */
+.axdb-widget-b.axdb-donut { display: flex; align-items: center; gap: 10px; }
+.axdb-widget-b.axdb-donut > svg { max-width: 150px; }
+
+/* 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; }
+.axdb-lg i {
+  display: inline-flex; align-items: center; gap: 5px; font-style: normal;
+  font: 500 11px/1.3 system-ui, sans-serif; color: var(--axdb-muted);
+}
+.axdb-lg i b { width: 9px; height: 9px; border-radius: 3px; flex: none; }
+
+/* table */
+.axdb-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--axdb-ink); }
+.axdb-table th {
+  text-align: left; padding: 4px 8px 7px; border-bottom: 1px solid var(--axdb-line);
+  font: 600 10px/1.3 system-ui, sans-serif; letter-spacing: .4px; text-transform: uppercase;
+  color: var(--axdb-muted);
+}
+.axdb-table td { padding: 6px 8px; border-bottom: 1px solid var(--axdb-line); white-space: nowrap; }
+.axdb-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
+.axdb-table tr:last-child td { border-bottom: none; }
+
+@media (prefers-color-scheme: dark) {
+  .axdb-widget {
+    --axdb-ink: #eceef4;
+    --axdb-muted: #98a1b4;
+    --axdb-grid: rgba(150, 160, 182, .2);
+    --axdb-card: #1a1d25;
+    --axdb-line: #2b3040;
+    --axdb-soft: rgba(150, 160, 182, .16);
+  }
+}
+`;
+/** Idempotently inject the kit stylesheet (safe to call per binder). */
+function ensureDashboardKitStyles(doc = document) {
+    if (doc.getElementById(exports.DASHBOARD_KIT_STYLE_ID))
+        return;
+    const style = doc.createElement('style');
+    style.id = exports.DASHBOARD_KIT_STYLE_ID;
+    style.textContent = CSS;
+    doc.head.appendChild(style);
+}
+//# sourceMappingURL=styles.js.map