# Constants

Import these from `@grafloria/element`.

## Constants

### `BUILT_IN_WIDGET_KINDS`

The kinds `defaultWidgetRenderer` knows; anything else gets the placeholder.

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

### `CAPTION_HEIGHT`

```ts
const CAPTION_HEIGHT: 28
```

### `CAPTION_HEIGHT_SUBTITLE`

```ts
const CAPTION_HEIGHT_SUBTITLE: 44
```

### `CAPTION_HEIGHT_TIGHT`

```ts
const CAPTION_HEIGHT_TIGHT: 22
```

### `CAPTION_PASS_THROUGH`

```ts
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
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 …
```

### `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
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
const defaultWidgetRenderer: WidgetRenderer
```

### `renderBarWidget`

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

```ts
const renderBarWidget: WidgetRenderer
```

### `renderDonutWidget`

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

```ts
const renderDonutWidget: WidgetRenderer
```

### `renderFunnelWidget`

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

```ts
const renderFunnelWidget: WidgetRenderer
```

### `renderKpiWidget`

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

```ts
const renderKpiWidget: WidgetRenderer
```

### `renderLineWidget`

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

```ts
const renderLineWidget: WidgetRenderer
```

### `renderTableWidget`

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

```ts
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
const TAB_DRAG_THRESHOLD: 4
```

### `TAB_STRIP_HEIGHT`

```ts
const TAB_STRIP_HEIGHT: 30
```