Constants

Import these from @grafloria/element.

Constants

BUILT_IN_WIDGET_KINDS

The kinds defaultWidgetRenderer knows; anything else gets the placeholder.

ts
Copy
const BUILT_IN_WIDGET_KINDS: readonly ["kpi", "line", "bar", "donut", "funnel", "table"]

CAPTION_HEIGHT

ts
Copy
const CAPTION_HEIGHT: 28

CAPTION_HEIGHT_SUBTITLE

ts
Copy
const CAPTION_HEIGHT_SUBTITLE: 44

CAPTION_HEIGHT_TIGHT

ts
Copy
const CAPTION_HEIGHT_TIGHT: 22

CAPTION_PASS_THROUGH

ts
Copy
const CAPTION_PASS_THROUGH: "button, a, input, select, textarea, [data-axdb-pass]"

DASHBOARD_KIT_CSS

The kit stylesheet as text — for a host that bundles its own CSS, and for the styling spec.

ts
Copy
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 rov …

DASHBOARD_KIT_STYLE_ID

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).

ts
Copy
const DASHBOARD_KIT_STYLE_ID: "grafloria-dashboard-kit-styles"

defaultWidgetRenderer

Paint widget into host by its kind — dashboard()'s default renderWidget, and the composable base for your own.

An unknown (or absent) kind falls back to the titled placeholder frame, so a board of not-yet-implemented widgets still lays out and is still testable. Never throws: bad data paints an empty state.

ts
Copy
const defaultWidgetRenderer: WidgetRenderer

renderBarWidget

{ bars: [{label, value}] } — columns, value above, category below.

ts
Copy
const renderBarWidget: WidgetRenderer

renderDonutWidget

{ slices: [{label, value, color?}], centerLabel? } — ring + legend.

ts
Copy
const renderDonutWidget: WidgetRenderer

renderFunnelWidget

{ stages: [{label, value}] } — centred bars scaled against the widest stage.

ts
Copy
const renderFunnelWidget: WidgetRenderer

renderKpiWidget

{ label, value, delta?, spark? } — headline number + change + sparkline.

ts
Copy
const renderKpiWidget: WidgetRenderer

renderLineWidget

{ series, labels? } — area under the first series, a line per series.

ts
Copy
const renderLineWidget: WidgetRenderer

renderTableWidget

{ columns, rows } — plain rows; numeric cells right-align themselves.

ts
Copy
const renderTableWidget: WidgetRenderer

TAB_DRAG_THRESHOLD

Travel, in px, that turns a press on a tab from a click into a drag. VS Code uses the platform drag threshold; 4 px is the same order and keeps a shaky click a click.

ts
Copy
const TAB_DRAG_THRESHOLD: 4

TAB_STRIP_HEIGHT

ts
Copy
const TAB_STRIP_HEIGHT: 30