@grafloria/element 0.3.23 → 0.4.0

package/esm/src/lib/dashboard-kit/grid-mapping.js

@@ -1,164 +0,0 @@
-/**
- * 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 { MoveNodeCommand, ResizeNodeCommand, SetGridItemCommand, } from '@grafloria/engine';
-/** Row height for a board currently `rows` rows tall (both modes). */
-export 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. */
-export 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. */
-export 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). */
-export 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.
- */
-export 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.
- */
-export 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.
- */
-export 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. */
-export 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.
- */
-export 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;
-export function buildCommitCommands(deltas) {
-    const commands = [];
-    for (const d of deltas) {
-        const cellChanged = cellsDiffer(d.cellBefore, d.cellAfter);
-        if (cellChanged && !d.isGroup) {
-            commands.push(new 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 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 ResizeNodeCommand(d.id, Object.assign({ depth: 0 }, d.sizeAfter), Object.assign({ depth: 0 }, d.sizeBefore)));
-        }
-    }
-    return commands;
-}
-//# sourceMappingURL=grid-mapping.js.map

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

@@ -1,8 +0,0 @@
-export { bindDashboardGrid, } from './grid-binder';
-export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, } from './grid-mapping';
-export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles';
-// The DATA-FIRST authoring API (the erDiagram/umlDiagram equivalent).
-export { dashboard, } from './dashboard';
-// The built-in renderers behind `kind` — dashboard()'s default renderWidget.
-export { defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './widgets';
-//# sourceMappingURL=index.js.map

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

@@ -1,205 +0,0 @@
-/**
- * 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 const 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). */
-export function ensureDashboardKitStyles(doc = document) {
-    if (doc.getElementById(DASHBOARD_KIT_STYLE_ID))
-        return;
-    const style = doc.createElement('style');
-    style.id = DASHBOARD_KIT_STYLE_ID;
-    style.textContent = CSS;
-    doc.head.appendChild(style);
-}
-//# sourceMappingURL=styles.js.map