@ponchia/ui 0.5.0 → 0.6.3

package/llms.txt

@@ -31,6 +31,23 @@ later layer) always win over framework styles regardless of selector
 specificity — this is the intended override mechanism; do not fight it
 with `!important`.
 
+Loading a stylesheet — read before copying a `<link>` below. The opt-in
+leaves are written as `@ponchia/ui/css/<leaf>.css` for brevity. That
+package-specifier form resolves ONLY inside a CSS-aware bundler
+(Vite/webpack); in a standalone `.html` file it does not resolve. For plain
+HTML (the usual case when an LLM emits a report) use a real URL — and note
+the path changes from source `css/` to built `dist/css/`:
+
+```html
+<!-- installed locally -->
+<link rel="stylesheet" href="./node_modules/@ponchia/ui/dist/css/<leaf>.css" />
+<!-- or from a CDN; pin the version (pre-1.0, breaking changes ship in the minor) -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.3/dist/css/<leaf>.css" />
+```
+
+The flattened default bundle is `dist/bronto.css` (bundler shorthand
+`@ponchia/ui`). A complete, copy-pasteable CDN report is in `docs/reporting.md`.
+
 Typed class vocabulary (returns plain strings — works in any framework):
 
 ```js
@@ -52,6 +69,14 @@ Optional vanilla behaviors (theme toggle, etc. — SSR-safe, tree-shakeable):
 import { applyStoredTheme } from '@ponchia/ui/behaviors';
 ```
 
+Notable behaviors beyond the obvious: `initMenu()` adds close affordances to a
+native `<details data-bronto-menu>` dropdown (outside-click/Escape/select-close);
+`initModal()` wires the controlled `.ui-modal.is-open` path (inert focus-trap +
+role/aria-modal); `initDisabledGuard()` makes every `aria-disabled` control
+keyboard-inert (CSS alone is only pointer-inert). For the value-bearing fills,
+`attrs.meter(value)` / `attrs.progress(value)` from `@ponchia/ui/classes` return
+`role`+`aria-valuenow/min/max`+the `--value` style to spread onto the host.
+
 For React/Solid/Qwik, optional thin hook bindings over those behaviors (peer
 deps `react` / `solid-js` / `@builder.io/qwik`, optional — core stays zero-dep):
 
@@ -69,6 +94,33 @@ import { renderGlyph, GLYPH_NAMES } from '@ponchia/ui/glyphs';
 el.innerHTML = renderGlyph('check', { label: 'Done' });
 ```
 
+Layout primitives (core bundle, no media queries — intrinsic Every-Layout
+composition that responds to content + available space): `ui-stack` (vertical
+rhythm), `ui-cluster` (wrapping inline row), `ui-grid` (auto-fit columns),
+`ui-sidebar` (sidebar + main that stacks when cramped), `ui-switcher` (row →
+column together), `ui-center` (measure-bounded column), `ui-ratio` (aspect-ratio
+box — one child only), and the `ui-app-shell`/`ui-app-rail`/`ui-app-nav` admin
+shell. `ui-cq` makes descendant layouts respond to THAT box (container queries),
+not the viewport — wrap a `ui-grid`/`ui-statgrid` in it for an island-safe
+collapse in a slim pane. Each is tuned with an inline custom property rather than
+a modifier — set `style="--grid-min: 12rem"`, `--sidebar-width`, `--sidebar-gap`,
+`--switcher-min`, `--switcher-gap`, `--center-max` (the INNER measure; gutters add
+to the total), `--ratio`, `--stack-gap`, `--cluster-gap`, `--app-rail`, etc. The
+full list with defaults is in `classes.json` `customProperties`. App-shell/sitenav
+current page is `aria-current="page"`.
+
+Motion utilities (core bundle, all reduced-motion-safe — they collapse to the
+static end state, not just a zeroed duration): `ui-animate-in`,
+`ui-animate-fade`, `ui-animate-dot`, `ui-animate-matrix` (enter animations),
+`ui-stagger` (+ `--i` per child, or `ui-stagger--auto` to
+derive the delay from `:nth-child`), `ui-reveal` (JS/IntersectionObserver — adds
+`is-visible`), `ui-scroll-reveal` and `ui-scroll-progress` (zero-JS,
+scroll-driven; the recommended reveal for static reports), and `ui-vt` (View
+Transitions — needs the required `--ui-vt-name`, which must be **unique per
+document**: reusing one name across sibling items silently drops the transition).
+Prefer `ui-scroll-reveal` over `ui-reveal` when no JS will run. Details:
+`docs/usage.md`.
+
 Optional display colorways — opt-in, never in the default bundle. Root-level,
 like `data-theme` (the derived accent family only recomputes at `:root`):
 
@@ -92,6 +144,54 @@ import charts from '@ponchia/ui/charts.json' with { type: 'json' };
 // charts.dark.categorical → ['#ff3b41', …] (series 0 = the resolved accent)
 ```
 
+On-brand Mermaid diagrams use the same tokens-as-data path — Mermaid is the
+consumer's renderer, bronto just hands it a resolved `base` theme (Mermaid can't
+read `var(--x)`):
+
+```js
+import { brontoMermaidTheme } from '@ponchia/ui/mermaid';
+mermaid.initialize(brontoMermaidTheme('dark')); // { theme: 'base', themeVariables }
+```
+
+Annotate a rendered diagram with the SVG annotation layer as a build-time
+recipe. Details: `docs/mermaid.md`.
+
+D2 (d2lang.com) is themed the same way — it compiles to a frozen SVG, so the
+slots take resolved hex; the base ramp is monochrome and the accent is opt-in
+per node:
+
+```js
+import { brontoD2Vars } from '@ponchia/ui/d2';
+const source = brontoD2Vars() + 'a -> b'; // prepend the vars block, then render
+```
+
+Details: `docs/d2.md`.
+
+Charting is the same path: bronto does NOT ship a chart component (a chart needs
+scales + data binding, which the analytical layer refuses). For charts, recommend
+Vega-Lite — a declarative JSON spec an external system can emit — themed by the
+on-brand `config` (resolved hex; Vega bakes colours into SVG/canvas, can't read
+`var()`). `range.category` is the `--chart-*` palette, series 1 = accent:
+
+```js
+import { brontoVegaConfig, brontoVegaAccent, brontoVegaNeutral } from '@ponchia/ui/vega';
+vegaEmbed('#chart', spec, { config: brontoVegaConfig('dark'), renderer: 'svg', actions: false });
+```
+
+Pass `renderer: 'svg'` (canvas is the wrong default for print/inspection).
+`brontoVegaAccent(theme)`/`brontoVegaNeutral(theme)` give the exact hexes to spend
+the accent on one mark. From a CDN, pin the `/build/*.min.js` UMD bundles (a bare
+`vega@6` tag has no `window.vega`; keep Vega-Lite 6 / Vega 6 / vega-embed 7
+aligned) and INLINE the config from `vega.json` — a
+`file://` report can't `import`/`fetch` it (CORS). A label on an accent fill in a
+foreign renderer (a themed Vega/D2/Mermaid node or bar) reads the `--on-accent`
+token, never `--accent-text` (that is accent-coloured text for a neutral bg).
+`--on-accent` is a READ-ONLY export for those renderers — no in-DOM `.ui-*` rule
+consumes it, so setting it does not re-ink a component; to colour text on an
+accent-filled DOM control, set `--button-text`. Details: `docs/vega.md`. (Observable
+Plot works too — it inherits the page CSS, so it needs even less theming;
+Vega-Lite is the recommended LLM-emittable path.)
+
 `--chart-1..8` (categorical; series 1 = accent; colourblind-safe, gated under
 simulated protan/deutan/tritan), `--chart-seq-*` (sequential), `--chart-div-*`
 (diverging), and `--chart-pattern-1..8` (dot-matrix fills — pair colour N with
@@ -245,14 +345,147 @@ reports/AI output:
 ```
 
 `ui-citation` (inline ref on a real `<a>`/`<button>`; `--chip` = named-source
-pill), `ui-source-card` (+`__title`/`__origin`/`__time`/`__excerpt`/`__actions`),
-`ui-source-list` (+`__item`), and `ui-provenance` (+`__item`). A cross-cutting
-trust state sets the tone: `ui-src--verified`/`--reviewed`/`--generated`/
-`--unverified`/`--stale`/`--conflict` — always paired with an author-written
-label (never colour alone). Bronto styles + states; the host owns fetching,
-numbering, and trust. `ui.citation({chip,state})` / `ui.source({state})` /
+pill), `ui-source-card` (+`__title`/`__origin`/`__time`/`__excerpt`/`__actions`;
+the body part is `__excerpt`, not `__detail`), `ui-source-list` (+`__item`),
+`ui-provenance` (+`__item`), and `ui-src` (a standalone trust pill). A
+cross-cutting trust state sets the tone: `ui-src--verified`/`--reviewed`/
+`--generated`/`--unverified`/`--stale`/`--conflict` — always paired with an
+author-written label (never colour alone). A tone class **needs a host**:
+`ui-src--verified` on its own renders nothing — put it on `ui-src`,
+`ui-citation`, `ui-source-card`, or `ui-provenance__item`. Bronto styles +
+states; the host owns fetching, numbering, and trust. `ui.citation({chip,state})` / `ui.source({state})` /
 `ui.provenance({state})`. Details: `docs/sources.md`.
 
+Optional line/row change-review grammar — opt-in, CSS only, never in the
+default bundle. For code review, changelogs, version history, config diffs, and
+generated reports:
+
+```html
+<link rel="stylesheet" href="@ponchia/ui/css/diff.css" />
+```
+
+The HOST pre-classifies each row (`add`/`remove`/`context`), computes hunks, and
+aligns split panes; Bronto only paints — it never parses or diffs source.
+Unified: `ui-diff` with `ui-diff__row--add`/`--remove`/`--context` rows of
+`ui-diff__ln` (line-number gutters, keep `aria-hidden`) + `ui-diff__code`.
+Split: `ui-diff--split` holds two `ui-diff__pane` columns. The `+`/`−` gutter
+glyph is generated content, so add/remove survive forced-colors and print where
+the tint drops (never colour alone, WCAG 1.4.1). `ui.diff({ split })` /
+`ui.diffRow({ change })`. Pairs with `ui-compare--2up`. Details: `docs/diff.md`.
+
+Optional fenced-code evidence chrome — opt-in, CSS only, never in the default
+bundle. For code-as-evidence in changelogs, version history, and reports:
+
+```html
+<link rel="stylesheet" href="@ponchia/ui/css/code.css" />
+```
+
+It NEVER parses or tokenizes — the host (or Shiki, via the shipped
+`shiki/nothing.json` token theme) supplies the coloured spans; Bronto owns only
+the chrome. `ui-code` (+`__head` filename bar, `__body` the `<pre>`); wrap each
+line in `ui-code__line` to opt into the `ui-code--numbered` gutter (CSS
+counters) and the `ui-code__line--add`/`--del`/`--hl` line states (forced-colors
++ print safe via an inline-start border). Long lines wrap. `ui.code({ numbered })`
+/ `ui.codeLine({ change })`. Details: `docs/code.md`.
+
+Optional inline datawords — opt-in, CSS only, never in the default bundle. A
+word-sized microchart (trend-in-a-sentence) for reports and dense tables, the
+inline counterpart to the scalar `ui-delta`/`ui-num`/`ui-stat`:
+
+```html
+<link rel="stylesheet" href="@ponchia/ui/css/spark.css" />
+```
+
+The HOST normalises each point to 0..1 and sets it as `--v` on a
+`ui-spark__bar`; Bronto only paints. Pure CSS, SSR-static, print-safe. A bare
+spark is opaque to AT, so the `ui-spark` container MUST carry a host-written
+`role="img"` + `aria-label` (colour is never the only channel, WCAG 1.4.1).
+`ui-spark__bar--accent`/`--pos`/`--neg` tone a single bar.
+`ui.sparkBar({ tone })`. Details: `docs/spark.md`.
+
+Optional Tufte margin notes — opt-in, CSS only, never in the default bundle. For
+evidence, caveats, and provenance asides beside the text:
+
+```html
+<link rel="stylesheet" href="@ponchia/ui/css/sidenote.css" />
+```
+
+`ui-sidenote` is a numbered margin note (CSS counters; anchored by an inline
+`ui-sidenote__ref`); `ui-marginnote` is the unnumbered variant. Wide viewports
+float the note into the inline-end margin, narrow viewports collapse it to an
+indented inline block. The HOST owns where numbering restarts
+(`counter-reset: ui-sidenote` on the article) and reserves the margin gutter
+(`padding-inline-end`). Details: `docs/sidenote.md`.
+
+Optional deep-link-to-cited-text — opt-in, CSS only, never in the default
+bundle. For a citation that jumps to the EXACT quoted sentence:
+
+```html
+<link rel="stylesheet" href="@ponchia/ui/css/textref.css" />
+```
+
+`ui-textref` is a link whose `href` is a URL Text Fragment (`#…:~:text=`); the
+browser scrolls to + highlights the quote and Bronto owns the on-brand
+`::target-text` paint (`--textref-highlight`). The HOST builds the fragment URL
+(a three-line pure encoder, see docs); no kernel ships. Text Fragment nav needs
+a real user activation; unsupported engines just navigate (the highlight is
+additive). Details: `docs/textref.md`.
+
+Optional bullet graph — opt-in, CSS only, never in the default bundle. The
+Stephen-Few measure-vs-target-vs-bands SLO figure `ui-meter` can't encode:
+
+```html
+<link rel="stylesheet" href="@ponchia/ui/css/bullet.css" />
+```
+
+`ui-bullet` is the track + grayscale qualitative bands (`--band-lo`/`--band-hi`);
+`ui-bullet__measure` is the value bar (REQUIRED `--v` 0..1, `--accent`/`--pos`/
+`--neg` tones); `ui-bullet__target` is the tick at `--t`; `ui-bullet__label` an
+optional caption. Same contract as spark: the HOST normalises, Bronto paints. A
+bare bullet is opaque to AT, so `ui-bullet` MUST carry a host-written
+`role="img"` + `aria-label`. `ui.bulletMeasure({ tone })`. Details:
+`docs/bullet.md`.
+
+Optional inline glossary — opt-in, CSS only, never in the default bundle. The
+accessible upgrade of the broken `abbr[title]`:
+
+```html
+<link rel="stylesheet" href="@ponchia/ui/css/term.css" />
+```
+
+`ui-term` is the term `<button popovertarget>` (keyboard/touch-reachable);
+`ui-def` is the definition body — a native `[popover]` styled as a raised card;
+`ui-glossary` is the end-of-document `<dl>` (`ui-glossary__term`/`__def`). The
+native popover pairing gives open/Esc/light-dismiss for free, no kernel. Popovers
+don't print — the printed doc leans on the glossary block. Details: `docs/term.md`.
+
+Optional scrollspy table-of-contents — opt-in, CSS only, never in the default
+bundle. A sticky contents rail that highlights the section in view:
+
+```html
+<link rel="stylesheet" href="@ponchia/ui/css/toc.css" />
+```
+
+`ui-toc` is the sticky rail (`--toc-top`); `ui-toc__title`/`ui-toc__list`/
+`ui-toc__link`. The active entry keys on `aria-current="true"`. CSS can't know
+the in-view section, so the HOST mirrors it — statically, or with a small
+copy-paste IntersectionObserver (no kernel ships). Without it the rail is a plain
+anchored list. Details: `docs/toc.md`.
+
+Optional hierarchy outline — opt-in, CSS only, never in the default bundle. A
+depth-indented tree on nested native `<details>`:
+
+```html
+<link rel="stylesheet" href="@ponchia/ui/css/tree.css" />
+```
+
+`ui-tree` is the outline; `ui-tree__branch` is a `<details>` node (twist
+chevron; add `name` for an exclusive-accordion group); `ui-tree__leaf` a childless
+row; `ui-tree__summary`/`ui-tree__label`. Open/close + keyboard are native
+`<details>`. A11y honesty: this is a disclosure group, NOT an ARIA `tree` — don't
+add `role="tree"`; the roving-focus kernel is deferred behind a real consumer.
+Details: `docs/tree.md`.
+
 Optional lifecycle/system-state vocabulary — opt-in, CSS only, never in the
 default bundle. The states apps live in (saving/saved/queued/offline/stale/
 conflict/error/locked/reviewed/needs-review):
@@ -351,10 +584,18 @@ Canonical report skeleton:
 Report rules for agents: static output by default; do not initialize behaviors
 over untrusted generated content; sanitize arbitrary LLM/CMS/user HTML before
 rendering; use semantic headings; give tables captions and header cells; give
-charts captions, legends/direct labels, and fallback data; use
-`ui-chart__plot`/`ui-chart__bar`/`ui-chart__fill` for simple static bar charts;
-use `ui-report__section--unnumbered` for appendices in numbered reports; never
-use raw chromatic inline colors. Full cookbook: `docs/reporting.md`.
+charts captions, legends/direct labels, and fallback data; for a chart, theme
+Vega-Lite with `@ponchia/ui/vega` (or hand-author a token-themed inline `<svg>`)
+inside a `ui-report__figure` — bronto ships no chart component; use
+`ui-delta` (`--up`/`--down`/`--flat`, `--invert` when up is bad) for a
+trend figure and `ui-compare` (`--2up`) for an A/B / before-after section; use
+`ui-report__section--unnumbered` for appendices in numbered reports; never
+use raw chromatic inline colors. Format numbers/dates yourself (the framework
+aligns figures, it does not format them) — see the reporting cookbook. To make
+a PDF, render with `chrome-headless-shell` (or any Chromium) using
+`printBackground: true` so figure fills survive — reports are static/zero-JS, so
+it is just load → print; see "Print and PDF" in `docs/reporting.md`. Full
+cookbook: `docs/reporting.md`.
 
 ## Authoritative offline references (shipped in this package)
 
@@ -363,6 +604,15 @@ Read these from `node_modules/@ponchia/ui/` — no network needed:
 - `classes/index.d.ts` — literal-typed `cls` map (exact class strings),
   every `ui.*()` recipe signature, every `*Opts` interface. The complete
   class surface; an agent should read this to know valid class names.
+- `classes/classes.json` — the same vocabulary as language-neutral data, to
+  VALIDATE markup without executing ESM/parsing TS: `groups` (base →
+  modifiers/parts, the BEM structure; `base` is null for a parts-only namespace —
+  do not emit it), `classes` (flat list), `states` (the `is-*` hooks that live
+  outside `cls` by design, with their scope), `customProperties` (the author-set
+  inline-style knobs like `--chart-color` / `--value`), `behaviorAttributes` (the
+  `data-bronto-*` open/close/dismiss hooks the optional behaviors delegate on), and
+  `requiredAria` (the role/aria a generator must emit per component — meter/progress/
+  error-summary paint but are invisible to AT without it).
 - `docs/reference.md` — the full class catalog as prose tables (every
   class grouped by component, with registry key + kind). Generated from
   the same source as the types and CI-drift-checked.
@@ -378,6 +628,13 @@ Read these from `node_modules/@ponchia/ui/` — no network needed:
   boundaries.
 - `docs/annotations.md` — SVG annotation recipes and helper guidance for
   analytical figures.
+- `docs/mermaid.md` — theme Mermaid diagrams from bronto tokens (resolved
+  `base` themeVariables, gated) and annotate the rendered SVG.
+- `docs/d2.md` — theme D2 diagrams from bronto tokens (theme-override slots,
+  monochrome base + opt-in accent, gated) and annotate the rendered SVG.
+- `docs/vega.md` — theme Vega-Lite charts from bronto tokens (resolved `config`,
+  gated + render-probed) — the recommended path when a report needs a chart,
+  since bronto ships no chart component.
 - `docs/contrast.md` — the published, CI-gated WCAG 2.1 contrast matrix
   for every contractual token pairing, per theme. Generated from the
   resolved palette; the build fails below the declared floor.
@@ -385,8 +642,11 @@ Read these from `node_modules/@ponchia/ui/` — no network needed:
 - `tokens/index.json` — tokens as plain data (global / light / dark).
 - `tokens/tokens.dtcg.json` — same tokens in W3C DTCG format.
 - `tokens/resolved.json` — every colour token resolved to a static
-  `#rrggbb` / `rgba(...)` per theme (var() + color-mix() evaluated).
-  Use this for non-CSS render targets: MapLibre/canvas/WebGL/SVG.
+  `#rrggbb` / `rgba(...)` per theme (var() + color-mix() evaluated) in
+  `light`/`dark`, plus a `scale` block of the non-colour scales
+  (spacing/radius/type/z/motion, var() chains flattened). The complete token
+  contract for non-CSS render targets: MapLibre/canvas/WebGL/SVG, or a
+  non-JS host (Python/Go) building a themed report.
 - `behaviors/index.d.ts` — typed signatures for the optional behaviors.
 - `glyphs/glyphs.d.ts` — the `GlyphName` literal union plus `renderGlyph` /
   `glyphCells` signatures for the display glyphs. (The DOM form,
@@ -404,13 +664,24 @@ Read these from `node_modules/@ponchia/ui/` — no network needed:
 
 ## Rules an agent should respect
 
-- Never invent `ui-*` class names. Every valid class is a member of
-  `cls` in `classes/index.d.ts`; if it is not there, it does not exist.
+- Never invent `ui-*` class names. Every valid `ui-*` class is a member of
+  `cls` in `classes/index.d.ts` (and `classes/classes.json`); if a `ui-*`
+  name is not there, it does not exist. The `is-*` state hooks
+  (`is-num`/`is-pos`/`is-neg`/`is-key` on `.ui-table` cells and `.ui-stat`
+  deltas, `is-open`/`is-active`/`is-inactive` on stateful components) are the
+  one exception — they are real, documented in `docs/reference.md`
+  (§"Table-local state classes" / §"Composition & state") and emitted by the
+  `ui.*()` recipes, but deliberately NOT in `cls`. Do not strip them.
 - Prefer the `ui.*()` recipes over hand-concatenating modifier strings.
   Report/layout classes added in 0.4.1 are the exception: use `cls.report*`,
   `cls.chart*`, `cls.printOnly`, or literal documented class names because
   there are no `ui.report()` / `ui.chart()` recipes yet. Annotations do have a
   `ui.annotation()` recipe for variant/tone selection.
+- For a standalone HTML report, never `<link>` a `@ponchia/ui/css/*.css`
+  package specifier (it does not resolve in a browser) and never assume
+  `dist/bronto.css` carries the report/chart/legend/annotation layers — it
+  does not. Link each opt-in leaf from `dist/css/` via a real URL
+  (`./node_modules/…` or a pinned CDN). See the loading note above.
 - Override framework styles by writing your own rules outside
   `@layer bronto` — not with higher specificity or `!important`.
 - Color is tiered (ADR-0001): neutral canvas · one rationed accent · locked

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponchia/ui",
-  "version": "0.5.0",
+  "version": "0.6.3",
   "type": "module",
   "description": "CSS-first design system for interfaces that explain themselves — works in HTML, every framework, and PDF, no component runtime. A standard component set plus an opt-in analytical & report layer (annotations, legends, connectors, data-viz, report grammar). Monochrome with one rationed accent, re-skinnable from one --accent knob. Zero runtime dependencies.",
   "keywords": [
@@ -35,6 +35,9 @@
     "access": "public",
     "provenance": true
   },
+  "engines": {
+    "node": ">=18"
+  },
   "sideEffects": [
     "**/*.css"
   ],
@@ -62,6 +65,9 @@
     "docs/stability.md",
     "docs/usage.md",
     "docs/reporting.md",
+    "docs/mermaid.md",
+    "docs/d2.md",
+    "docs/vega.md",
     "docs/annotations.md",
     "docs/legends.md",
     "docs/marks.md",
@@ -70,6 +76,15 @@
     "docs/crosshair.md",
     "docs/selection.md",
     "docs/sources.md",
+    "docs/diff.md",
+    "docs/code.md",
+    "docs/spark.md",
+    "docs/sidenote.md",
+    "docs/textref.md",
+    "docs/bullet.md",
+    "docs/term.md",
+    "docs/toc.md",
+    "docs/tree.md",
     "docs/state.md",
     "docs/generated.md",
     "docs/workbench.md",
@@ -85,59 +100,76 @@
     "format": "prettier --write .",
     "check:format": "prettier --check .",
     "size:report": "node scripts/size-report.mjs",
+    "report:pdf": "node scripts/render-pdf.mjs",
+    "emit:theme": "node scripts/emit-theme.mjs",
+    "emit:theme:check": "node scripts/emit-theme.mjs --check",
+    "gen": "npm run prepack",
+    "fresh:build": "node scripts/gen-all.mjs",
     "tokens:build": "node scripts/gen-tokens-json.mjs",
     "tokens:css:build": "node scripts/gen-tokens-css.mjs",
     "dtcg:build": "node scripts/gen-dtcg.mjs",
     "resolved:build": "node scripts/gen-resolved.mjs",
     "dts:build": "node scripts/gen-dts.mjs",
+    "dts:emit": "node scripts/emit-dts.mjs",
     "glyphs:build": "node scripts/gen-glyphs.mjs",
     "skins:build": "node scripts/gen-skins.mjs",
     "charts:build": "node scripts/gen-charts.mjs",
+    "mermaid:build": "node scripts/gen-mermaid.mjs",
+    "d2:build": "node scripts/gen-d2.mjs",
+    "vega:build": "node scripts/gen-vega.mjs",
     "reference:build": "node scripts/gen-reference.mjs",
+    "classes:json:build": "node scripts/gen-classes-json.mjs",
     "contrast:build": "node scripts/gen-contrast.mjs",
     "vscode:build": "node scripts/gen-vscode-data.mjs",
     "dist:build": "node scripts/build-dist.mjs",
     "check:exports": "node scripts/check-exports.mjs",
-    "check:tokens": "node scripts/check-tokens.mjs",
+    "check:fresh": "node scripts/check-fresh.mjs",
     "check:classes": "node scripts/check-classes.mjs",
-    "check:dts": "node scripts/check-dts.mjs",
-    "check:behaviors": "node scripts/check-behaviors.mjs",
-    "check:bindings": "node scripts/check-bindings.mjs",
-    "check:helpers-dts": "node scripts/check-helpers-dts.mjs",
+    "check:recipe-types": "node scripts/check-recipe-types.mjs",
+    "check:chain": "node scripts/check-chain.mjs",
+    "check:dts-emit": "node scripts/check-dts-emit.mjs",
     "check:glyphs": "node scripts/check-glyphs.mjs",
     "check:color-policy": "node scripts/check-color-policy.mjs",
     "check:skins": "node scripts/check-skins.mjs",
     "check:charts": "node scripts/check-charts.mjs",
+    "check:mermaid": "node scripts/check-mermaid.mjs",
+    "check:d2": "node scripts/check-d2.mjs",
+    "check:vega": "node scripts/check-vega.mjs",
     "check:report": "node scripts/check-report.mjs",
     "check:legend": "node scripts/check-legend.mjs",
     "check:types": "tsc -p tsconfig.json",
-    "check:dtcg": "node scripts/check-dtcg.mjs",
-    "check:resolved": "node scripts/check-resolved.mjs",
     "check:shiki": "node scripts/check-shiki.mjs",
     "check:dist": "node scripts/check-dist.mjs",
     "check:pack": "node scripts/check-pack.mjs",
     "check:release": "node scripts/check-release.mjs",
-    "check:reference": "node scripts/check-reference.mjs",
+    "check:versions": "node scripts/check-versions.mjs",
+    "check:doc-recipes": "node scripts/check-doc-recipes.mjs",
+    "check:contract": "node scripts/check-contract.mjs",
     "check:contrast": "node scripts/check-contrast.mjs",
-    "check:vscode": "node scripts/check-vscode-data.mjs",
-    "check": "npm run lint && npm run check:format && npm run check:exports && npm run check:tokens && npm run check:classes && npm run check:dts && npm run check:types && npm run check:dtcg && npm run check:resolved && npm run check:shiki && npm run check:dist && npm run check:pack && npm run check:release && npm run check:reference && npm run check:contrast && npm run check:vscode && npm run check:behaviors && npm run check:bindings && npm run check:helpers-dts && npm run check:glyphs && npm run check:color-policy && npm run check:skins && npm run check:charts && npm run check:report && npm run check:legend",
+    "check:publint": "publint --strict",
+    "check:attw": "attw --pack --ignore-rules no-resolution cjs-resolves-to-esm",
+    "check": "npm run lint && npm run check:format && npm run check:exports && npm run check:fresh && npm run check:classes && npm run check:recipe-types && npm run check:types && npm run check:shiki && npm run check:dist && npm run check:pack && npm run check:publint && npm run check:attw && npm run check:release && npm run check:versions && npm run check:doc-recipes && npm run check:contract && npm run check:contrast && npm run check:dts-emit && npm run check:glyphs && npm run check:color-policy && npm run check:skins && npm run check:charts && npm run check:mermaid && npm run check:d2 && npm run check:vega && npm run check:report && npm run check:legend && npm run check:chain",
     "test": "node --test \"test/*.test.mjs\"",
-    "prepack": "npm run tokens:css:build && npm run tokens:build && npm run dtcg:build && npm run resolved:build && npm run dts:build && npm run reference:build && npm run contrast:build && npm run vscode:build && npm run skins:build && npm run charts:build && npm run dist:build && npm run glyphs:build",
+    "prepack": "npm run tokens:css:build && npm run tokens:build && npm run dtcg:build && npm run resolved:build && npm run dts:build && npm run dts:emit && npm run reference:build && npm run classes:json:build && npm run contrast:build && npm run vscode:build && npm run skins:build && npm run charts:build && npm run mermaid:build && npm run d2:build && npm run vega:build && npm run dist:build && npm run glyphs:build",
     "prepublishOnly": "npm run check && npm test"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.3",
     "@axe-core/playwright": "^4.11.3",
     "@builder.io/qwik": "^1.20.0",
-    "@playwright/test": "^1.60.0",
+    "@playwright/test": "1.60.0",
     "jsdom": "^29.1.1",
     "prettier": "^3.8.3",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
+    "publint": "^0.3.21",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "solid-js": "^1.9.13",
-    "stylelint": "^17.11.1",
+    "stylelint": "^17.13.0",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-use-logical": "^2.1.3",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "vega": "^6.2.0",
+    "vega-lite": "^6.4.3"
   },
   "peerDependencies": {
     "@builder.io/qwik": ">=1.5",
@@ -189,6 +221,15 @@
     "./css/crosshair.css": "./dist/css/crosshair.css",
     "./css/selection.css": "./dist/css/selection.css",
     "./css/sources.css": "./dist/css/sources.css",
+    "./css/diff.css": "./dist/css/diff.css",
+    "./css/code.css": "./dist/css/code.css",
+    "./css/spark.css": "./dist/css/spark.css",
+    "./css/sidenote.css": "./dist/css/sidenote.css",
+    "./css/textref.css": "./dist/css/textref.css",
+    "./css/bullet.css": "./dist/css/bullet.css",
+    "./css/term.css": "./dist/css/term.css",
+    "./css/toc.css": "./dist/css/toc.css",
+    "./css/tree.css": "./dist/css/tree.css",
     "./css/state.css": "./dist/css/state.css",
     "./css/generated.css": "./dist/css/generated.css",
     "./css/workbench.css": "./dist/css/workbench.css",
@@ -220,6 +261,15 @@
     "./css/unlayered/crosshair.css": "./css/crosshair.css",
     "./css/unlayered/selection.css": "./css/selection.css",
     "./css/unlayered/sources.css": "./css/sources.css",
+    "./css/unlayered/diff.css": "./css/diff.css",
+    "./css/unlayered/code.css": "./css/code.css",
+    "./css/unlayered/spark.css": "./css/spark.css",
+    "./css/unlayered/sidenote.css": "./css/sidenote.css",
+    "./css/unlayered/textref.css": "./css/textref.css",
+    "./css/unlayered/bullet.css": "./css/bullet.css",
+    "./css/unlayered/term.css": "./css/term.css",
+    "./css/unlayered/toc.css": "./css/toc.css",
+    "./css/unlayered/tree.css": "./css/tree.css",
     "./css/unlayered/state.css": "./css/state.css",
     "./css/unlayered/generated.css": "./css/generated.css",
     "./css/unlayered/workbench.css": "./css/workbench.css",
@@ -241,6 +291,9 @@
     "./docs/stability.md": "./docs/stability.md",
     "./docs/usage.md": "./docs/usage.md",
     "./docs/reporting.md": "./docs/reporting.md",
+    "./docs/mermaid.md": "./docs/mermaid.md",
+    "./docs/d2.md": "./docs/d2.md",
+    "./docs/vega.md": "./docs/vega.md",
     "./docs/annotations.md": "./docs/annotations.md",
     "./docs/legends.md": "./docs/legends.md",
     "./docs/marks.md": "./docs/marks.md",
@@ -249,6 +302,15 @@
     "./docs/crosshair.md": "./docs/crosshair.md",
     "./docs/selection.md": "./docs/selection.md",
     "./docs/sources.md": "./docs/sources.md",
+    "./docs/diff.md": "./docs/diff.md",
+    "./docs/code.md": "./docs/code.md",
+    "./docs/spark.md": "./docs/spark.md",
+    "./docs/sidenote.md": "./docs/sidenote.md",
+    "./docs/textref.md": "./docs/textref.md",
+    "./docs/bullet.md": "./docs/bullet.md",
+    "./docs/term.md": "./docs/term.md",
+    "./docs/toc.md": "./docs/toc.md",
+    "./docs/tree.md": "./docs/tree.md",
     "./docs/state.md": "./docs/state.md",
     "./docs/generated.md": "./docs/generated.md",
     "./docs/workbench.md": "./docs/workbench.md",
@@ -260,6 +322,7 @@
       "types": "./classes/index.d.ts",
       "default": "./classes/index.js"
     },
+    "./classes.json": "./classes/classes.json",
     "./behaviors": {
       "types": "./behaviors/index.d.ts",
       "default": "./behaviors/index.js"
@@ -297,6 +360,21 @@
       "default": "./tokens/charts.js"
     },
     "./charts.json": "./tokens/charts.json",
+    "./mermaid": {
+      "types": "./tokens/mermaid.d.ts",
+      "default": "./tokens/mermaid.js"
+    },
+    "./mermaid.json": "./tokens/mermaid.json",
+    "./d2": {
+      "types": "./tokens/d2.d.ts",
+      "default": "./tokens/d2.js"
+    },
+    "./d2.json": "./tokens/d2.json",
+    "./vega": {
+      "types": "./tokens/vega.d.ts",
+      "default": "./tokens/vega.js"
+    },
+    "./vega.json": "./tokens/vega.json",
     "./fonts/*": "./fonts/*"
   }
 }