@ponchia/ui 0.6.6 → 0.6.7

package/docs/highlights.md

@@ -0,0 +1,52 @@
+# Highlights
+
+`@ponchia/ui/css/highlights.css` is an opt-in paint layer for the CSS Custom
+Highlight API. It styles named `Range` sets without adding wrapper spans to the
+DOM.
+
+```css
+@import '@ponchia/ui';
+@import '@ponchia/ui/css/highlights.css';
+```
+
+Bronto only paints the names below. The host owns range discovery, search,
+source mapping, current-match state, and cleanup.
+
+| Highlight name | Use |
+| --- | --- |
+| `bronto-evidence` | Cited evidence or selected proof text. |
+| `bronto-search` | Search result matches. |
+| `bronto-current` | The active/current match. |
+
+```html
+<article class="ui-highlights" id="review">
+  <p id="evidence">Latency improved after the migration, but the window is short.</p>
+</article>
+```
+
+```js
+const text = document.querySelector('#evidence').firstChild;
+if (CSS.highlights) {
+  const range = new Range();
+  range.setStart(text, 0);
+  range.setEnd(text, 16);
+  CSS.highlights.set('bronto-evidence', new Highlight(range));
+}
+```
+
+## Contract
+
+| Class | Role |
+| --- | --- |
+| `.ui-highlights` | Scope for Bronto's named highlight paints. |
+
+| Custom property | On | Meaning |
+| --- | --- | --- |
+| `--highlight-evidence` | `.ui-highlights` | Wash for `bronto-evidence`. |
+| `--highlight-search` | `.ui-highlights` | Wash for `bronto-search`. |
+| `--highlight-current` | `.ui-highlights` | Wash for `bronto-current`. |
+
+## Robustness
+
+Check `CSS.highlights` before registering ranges. Without support, the page
+falls back to plain text; no wrapper spans or extra cleanup are required.

package/docs/interop/tailwind.md

@@ -0,0 +1,148 @@
+# Tailwind v4 bridge and cascade-layer interop
+
+Everything `@ponchia/ui` ships lives inside a single named cascade layer,
+`@layer bronto`. This makes coexistence with Tailwind (or any layer-based CSS)
+deterministic, but only if you control **layer order**.
+
+Bronto also ships a Tailwind v4 bridge at `@ponchia/ui/tailwind`. It maps
+Bronto's CSS custom properties into Tailwind's CSS-first `@theme` namespaces and
+defines Bronto-aware variants. The bridge does **not** import the Bronto
+component CSS for you; import both when you want both systems.
+
+## The one rule
+
+In CSS, an explicit `@layer` declaration's order beats specificity: later layers
+win over earlier layers, and **un-layered styles beat all layered styles**. So:
+
+- Un-layered Tailwind utilities already override `@ponchia/ui` with no
+  `!important` and no specificity fight.
+- If Tailwind is itself layered (Tailwind v4 default), you must place its layers
+  **after** `bronto`.
+
+## Tailwind v4
+
+v4 emits `@layer theme, base, components, utilities;`. Declare `bronto`
+**before** Tailwind's utilities so utilities can override components, then import
+Tailwind and the Bronto bridge:
+
+```css
+/* app.css — order line first, before any @import */
+@layer bronto, theme, base, components, utilities;
+
+@import '@ponchia/ui'; /* fills @layer bronto */
+@import 'tailwindcss'; /* fills theme/base/components/utilities */
+@import '@ponchia/ui/tailwind'; /* adds @theme + @custom-variant bridge */
+```
+
+Because the `@layer` statement above fixes the order up front, it does not
+matter that `@ponchia/ui` is imported first — `utilities` is declared after
+`bronto`, so `class="ui-button px-8"` gives Tailwind's `px-8` the final word.
+
+If you'd rather Tailwind's **Preflight reset not touch** `@ponchia/ui` elements,
+keep Preflight (in `base`) before `bronto` instead:
+
+```css
+@layer theme, base, bronto, components, utilities;
+```
+
+Pick based on which reset you want to win; `@ponchia/ui`'s own reset is inside
+`bronto`, so whichever layer is later wins the reset too.
+
+### Theme utilities
+
+The bridge uses Tailwind v4's CSS-first `@theme inline` form, so Bronto tokens
+become ordinary Tailwind utilities while still reading the live CSS variables
+from the active theme:
+
+```html
+<section
+  class="bg-bronto-surface text-bronto-text border border-bronto-border p-bronto-lg rounded-bronto-lg"
+>
+  <button class="bg-bronto-action text-bronto-on-action ring-bronto-focus">Save</button>
+</section>
+```
+
+Useful namespaces:
+
+| Bronto token family | Tailwind utility examples |
+| --- | --- |
+| Surface/text/action colours | `bg-bronto-surface`, `text-bronto-text`, `border-bronto-border`, `ring-bronto-focus` |
+| Accent ramps | `bg-bronto-accent-1` … `bg-bronto-accent-6` |
+| Status colours | `text-bronto-success`, `bg-bronto-warning`, `border-bronto-danger`, `text-bronto-info` |
+| Typography | `font-bronto-sans`, `font-bronto-mono`, `font-bronto-display`, `text-bronto-sm` |
+| Spacing/radius/shadow/easing | `p-bronto-md`, `gap-bronto-sm`, `rounded-bronto-xl`, `shadow-bronto-raised`, `ease-bronto-standard` |
+
+### Bronto variants
+
+The bridge defines root/theme variants and common Bronto state variants:
+
+```html
+<article
+  class="bg-bronto-surface bronto-dark:bg-bronto-surface-raised bronto-contrast-more:border-bronto-border-strong"
+>
+  ...
+</article>
+
+<button class="bronto-active:text-bronto-action bronto-busy:opacity-70">Run</button>
+```
+
+Available variants:
+
+| Variant | Selector intent |
+| --- | --- |
+| `bronto-light:*` / `bronto-dark:*` | Descendants under `html[data-theme="light|dark"]` |
+| `bronto-oled:*` | Descendants under `[data-surface="oled"]` |
+| `bronto-contrast-more:*` | Descendants under `[data-contrast="more"]` |
+| `bronto-compact:*` / `bronto-comfortable:*` | Descendants under density presets |
+| `bronto-active:*` | `.is-active`, current page, or selected tab state |
+| `bronto-open:*` | Native/dialog/popover/open disclosure state |
+| `bronto-selected:*` | selected/pressed state |
+| `bronto-invalid:*` | invalid field state |
+| `bronto-busy:*` | busy/loading state |
+
+### Svelte/Vue component styles
+
+When using `@apply` or `@variant` inside Vue or Svelte component style blocks,
+import your app stylesheet with Tailwind's `@reference` directive so Tailwind
+can see the Bronto theme variables and custom variants without duplicating CSS
+output:
+
+```css
+@reference '../app.css';
+
+.panel {
+  @apply bg-bronto-surface text-bronto-text bronto-dark:bg-bronto-surface-raised;
+}
+```
+
+### Package source detection
+
+`@ponchia/ui` components are normal `.ui-*` classes and do not need Tailwind to
+scan the package. If your own app builds Tailwind class names inside ignored
+generated files or an external package, register those sources with Tailwind's
+`@source` directive in your app stylesheet.
+
+## Tailwind v3
+
+v3 (`@tailwind base/components/utilities`) is un-layered by default, so its
+utilities **already** beat `@layer bronto` with zero config — just
+`@import '@ponchia/ui';` first. If you opt into v3's experimental `cssLayers`,
+apply the v4 rule above.
+
+## Override matrix
+
+| You want…                                            | Use                                                                 |
+| ---------------------------------------------------- | ------------------------------------------------------------------- |
+| Tailwind utilities to win (normal case)              | Nothing — un-layered utilities already beat `@layer bronto`          |
+| A full-specificity, layer-free `@ponchia/ui` build   | Import the `@ponchia/ui/css/unlayered/<leaf>.css` escape-hatch paths |
+| Per-route CSS splitting + the bundle, no inversion   | Mix freely — every leaf export self-wraps in `@layer bronto`         |
+| Tailwind's Preflight to NOT reset `ui-*` elements    | `@layer theme, base, bronto, components, utilities;`                 |
+| Bronto tokens as Tailwind utilities                  | `@import '@ponchia/ui/tailwind';` after Tailwind v4                  |
+| Vue/Svelte style blocks using Bronto utilities       | `@reference '../app.css';` from the component style block            |
+
+## Gotcha
+
+Do **not** mix `@ponchia/ui` (layered) with `@ponchia/ui/css/unlayered/*` for
+the _same_ leaf — the unlayered copy will unconditionally win and you lose the
+ordering guarantees. The `unlayered/*` paths are a deliberate, surgical escape
+hatch, not a default.

package/docs/interval.md

@@ -0,0 +1,55 @@
+# Interval
+
+`@ponchia/ui/css/interval.css` is an opt-in low/high uncertainty primitive for
+reports: confidence intervals, estimates, measurement ranges, target windows,
+and caveated values.
+
+```css
+@import '@ponchia/ui';
+@import '@ponchia/ui/css/interval.css';
+```
+
+The host normalises every value to `0..1`. Bronto paints only the track, range,
+and optional point estimate.
+
+```html
+<div
+  class="ui-interval"
+  style="--lo: 0.22; --hi: 0.68"
+  role="img"
+  aria-label="Estimated completion between 22 and 68 percent, point estimate 52 percent"
+>
+  <span class="ui-interval__label">Estimate window</span>
+  <span class="ui-interval__track" aria-hidden="true">
+    <span class="ui-interval__range"></span>
+    <span class="ui-interval__point" style="--v: 0.52"></span>
+  </span>
+  <span class="ui-interval__bounds" aria-hidden="true">
+    <span>22%</span>
+    <span>68%</span>
+  </span>
+</div>
+```
+
+## Contract
+
+| Class | Role |
+| --- | --- |
+| `.ui-interval` | Wrapper and custom-property host. |
+| `.ui-interval__track` | Neutral track. |
+| `.ui-interval__range` | Low-high range span. |
+| `.ui-interval__point` | Optional point estimate. Omit the element when none exists. |
+| `.ui-interval__label` | Written label. |
+| `.ui-interval__bounds` | Visible low/high labels. |
+
+| Custom property | On | Meaning |
+| --- | --- | --- |
+| `--lo` | `.ui-interval` | Required normalised lower bound, `0..1`. |
+| `--hi` | `.ui-interval` | Required normalised upper bound, `0..1`. |
+| `--v` | `.ui-interval__point` | Optional normalised point estimate, `0..1`. |
+
+## Accessibility
+
+Pair each interval with a written label or `role="img"` plus `aria-label`. The
+range is not the data of record: under forced-colors or print, the readable
+label and bounds must still explain the value.

package/docs/legends.md

@@ -184,5 +184,6 @@ document.addEventListener('bronto:legend:toggle', (e) => {
 Convention: `aria-pressed="true"` means the series is **shown** (the default).
 The entry's label never changes on toggle — only `aria-pressed` and
 `.is-inactive` flip, so a screen reader reads a stable name with a clear
-pressed state. React/Solid/Qwik consumers can use `useLegend()` instead of
-calling `initLegend` directly.
+pressed state. React/Solid/Qwik/Svelte consumers can use `useLegend()` (or the
+`legend` Svelte action) instead of calling `initLegend` directly; Vue consumers
+can use `vLegend`.

package/docs/mermaid.md

@@ -54,6 +54,12 @@ below):
 </script>
 ```
 
+> **There is no classic-script path.** Mermaid v11 ships **no UMD bundle** —
+> its `dist/` is ESM-chunked, so vendoring a `mermaid.min.js` for a plain
+> `<script src>` is a dead end. In the browser it is the ES-module import
+> above (over a real `http(s)` origin); for everything else, pre-render to a
+> frozen SVG with `mmdc` (below) so there is no runtime at all.
+
 > **file:// portability.** A report opened straight from disk (`file://`) cannot
 > `import` the `@ponchia/ui/mermaid` module **nor** `fetch('…/mermaid.json')` —
 > the browser blocks both across the `null`/file origin (CORS), exactly as with

package/docs/migrations/0.2-to-0.3.md

@@ -0,0 +1,80 @@
+# Migrating 0.2 → 0.3
+
+0.3.0 removed the entire pre-`ui-*` vocabulary. Everything shipped is now
+under the `.ui-*` contract and the `check-classes` drift gate. This page
+turns the CHANGELOG's BREAKING notes into a runnable recipe. The
+machine-readable source of truth is [`MIGRATIONS.json`](../../MIGRATIONS.json).
+
+## 1. Mechanical renames (safe to automate)
+
+These are whole-class-token renames with no semantic change. Run from
+your **consuming app's** repo root (adjust the glob to your templates —
+`.astro`, `.svelte`, `.jsx`, `.tsx`, `.html`):
+
+```bash
+# Preview first — list every file/line that will change:
+rg -l --glob '*.{astro,svelte,jsx,tsx,vue,html}' \
+  -e 'skip-link' -e 'site-nav' -e 'site-menu' -e 'theme-toggle' -e '\bapp-' .
+
+# Apply (BSD/macOS sed shown; GNU sed: drop the '' after -i):
+fd -e astro -e svelte -e jsx -e tsx -e vue -e html -x sed -i '' \
+  -e 's/\bskip-link\b/ui-skiplink/g' \
+  -e 's/\bsite-nav\b/ui-sitenav/g' \
+  -e 's/\bsite-menu\b/ui-sitemenu/g' \
+  -e 's/\btheme-toggle\b/ui-themetoggle/g' \
+  -e 's/\bapp-\(shell\|rail\|topbar\|toolbar\|nav\|panel\|content\|main\|metrics\|metric\|empty-state\)/ui-app-\1/g' {}
+```
+
+The `\b` word boundaries keep `app-` from clobbering unrelated tokens,
+but **review the diff** — a codemod cannot know your markup.
+
+If you import the typed class registry, switch to the new entries
+instead and let the compiler find the rest:
+
+```js
+import { cls } from '@ponchia/ui/classes';
+// cls.appShell, cls.appRail, …, cls.themetoggleTrack, cls.menuHost
+```
+
+## 2. Concept moves (manual — no 1:1 rename)
+
+| Old                                              | Now                                                                         |
+| ------------------------------------------------ | --------------------------------------------------------------------------- |
+| `.hero`, `.project-*`, `.post-card`, `.essay-*`, `.page-*`, `.home-*`, `.signal-panel`, `.worklog-summary` | Re-compose with the content layer: `.ui-prose` / `.ui-quote`, `.ui-card`, `.ui-grid` / `.ui-stack`, the `ui-site*` shell |
+| `.callout`                                       | `.ui-alert` (pick a tone: `--info` / `--success` / `--warning` / `--danger`) |
+| `.metric-tile`                                   | `.ui-app-metric` inside `.ui-app-metrics`                                    |
+| `.tag-list` / `.tag`                             | `.ui-tags` / `.ui-tag` (verify accent-on-accent contrast)                    |
+
+## 3. Import and token checks
+
+The bundle collapsed in 0.3.0. Use the package root (`@ponchia/ui`) or
+`@ponchia/ui/css`; removed paths such as `./css/index.css`,
+`./css/responsive.css`, `./dist/bronto-core.css`, and
+`./css/{layout,typography,cards}.css` should be deleted.
+
+Direct leaf imports changed meaning too: `@ponchia/ui/css/<leaf>.css` now
+resolves to the safe layered build. If you intentionally depended on a raw
+unlayered leaf overriding your app by specificity, switch that import to
+`@ponchia/ui/css/unlayered/<leaf>.css`.
+
+If you re-brand with a pale `--accent`, set `--accent-text` as well; 0.3.0
+routes small accent-coloured text through that AA-safe token. TypeScript users
+should also expect `cls` and token helpers to reject typos now that the
+declarations are literal unions.
+
+## 4. Verify
+
+- `rg -n 'class(Name)?=.*"[^"]*\b(hero|callout|metric-tile|post-card|skip-link)\b'`
+  should return nothing after the pass.
+- `rg -n '@ponchia/ui/(css/(index|responsive|layout|typography|cards)\\.css|dist/bronto-core\\.css)'`
+  should return nothing.
+- Visual-diff your app: token **values** can change in any release
+  without a major bump, so eyeball the result, don't just diff classes.
+
+## Deprecation policy
+
+From 0.3.1 onward, removals follow the policy in
+[CONTRIBUTING.md](../../CONTRIBUTING.md#deprecation-policy): a class is
+deprecated for **one minor** (kept working, marked in CHANGELOG +
+`MIGRATIONS.json`) before it is removed. 0.2 → 0.3 predates this policy,
+which is why it was a hard cut.

package/docs/migrations/0.3-to-0.4.md

@@ -0,0 +1,48 @@
+# Migrating 0.3 → 0.4
+
+0.4.0 is the **colour-system** release (see
+[ADR-0001](../adr/0001-color-system.md)). It is **additive for almost
+everyone** — the default `dist/bronto.css` renders identically. There is a
+single breaking change, and it only bites if you used an undocumented token.
+The machine-readable map is [`MIGRATIONS.json`](../../MIGRATIONS.json).
+
+## The one breaking change
+
+**`--orange` / `--orange-soft` were removed.** They were defined in the token
+mirrors but referenced by no component and documented nowhere — an orphan that
+contradicted the tier model. Removed under the CONTRIBUTING "provably-
+unreferenced surface" exception.
+
+**Migration:** if you referenced `--orange` / `--orange-soft` anywhere, define
+it yourself in a consumer override:
+
+```css
+:root {
+  --orange: #a85f32;
+  --orange-soft: rgb(168 95 50 / 0.13);
+}
+```
+
+Most apps need to do nothing. Verify with:
+
+```bash
+rg -- '--orange' .
+```
+
+## What's new (all opt-in, nothing to change)
+
+- **Colorways** — `@ponchia/ui/css/skins.css` + `data-bronto-skin="amber-crt |
+  phosphor-green | e-ink"` on `<html>`. Not loaded → no effect.
+- **Data-viz palette** — `@ponchia/ui/css/dataviz.css` + `@ponchia/ui/charts.json`
+  (`--chart-*` + dot-matrix pattern fills). Charts only.
+- **Tier-3 dot-matrix display tokens** (`--dotmatrix-glow`, `--dotmatrix-pulse-min`)
+  — default to a no-op.
+- **APCA** advisory contrast column in `docs/contrast.md`; WCAG 2.1 AA stays the
+  gate.
+
+## Re-pin
+
+```jsonc
+// package.json — 0.4 is a breaking minor under the pre-1.0 policy
+"@ponchia/ui": "~0.4.0"
+```

package/docs/migrations/0.4-to-0.5.md

@@ -0,0 +1,96 @@
+# Migrating 0.4 → 0.5
+
+0.5.0 builds out the **analytical & communication** identity: an opt-in suite of
+primitives for interfaces that explain themselves — SVG annotations, standalone
+legends, text/evidence marks, leader-line connectors, a guided-focus spotlight, a
+crosshair/readout, a selection vocabulary (rolled up in
+[`css/analytical.css`](../../css/analytical.css)), plus standalone
+`sources`/provenance, lifecycle `state`, AI-trust `generated`, `workbench` and a
+`command` palette.
+
+Almost all of it is **additive and opt-in** — the default `dist/bronto.css`
+renders identically and needs no change. There are **three breaking changes**,
+and every one of them lives in the _opt-in_ report / analytical layer. The
+machine-readable map is [`MIGRATIONS.json`](../../MIGRATIONS.json) (now shipped
+in the package).
+
+## 1. The report kit's chart key moved to the standalone Legends layer
+
+`.ui-chart__legend` / `.ui-chart__swatch` were **removed** from
+`css/report.css`. The data key is now the standalone Legends layer
+(`css/legend.css`), which is richer (categorical / gradient / threshold /
+pattern keys, an optional interactive series toggle) and reusable outside
+reports.
+
+**Migration:** add the legend leaf next to the report kit and rework the wrapper.
+
+```diff
++ <link rel="stylesheet" href="@ponchia/ui/css/legend.css">
+
+- <ul class="ui-chart__legend">
+-   <li><span class="ui-chart__swatch" style="--chart-color: var(--chart-1)"></span> Research</li>
+- </ul>
++ <ul class="ui-legend">
++   <li class="ui-legend__item">
++     <span class="ui-legend__swatch" style="--chart-color: var(--chart-1)"></span>
++     <span class="ui-legend__label">Research</span>
++   </li>
++ </ul>
+```
+
+The swatch's `--chart-color` / `--chart-pattern` inline contract is unchanged;
+the categorical colour is also available via `.ui-legend__swatch--1..8`. Full
+grammar: [`docs/legends.md`](../legends.md). Quick rename:
+
+```bash
+rg -l 'ui-chart__legend|ui-chart__swatch' .
+# s/ui-chart__swatch/ui-legend__swatch/g  + rework the <ul> wrapper as above
+```
+
+## 2. The marks rationed-accent tone `evidence` → `accent`
+
+To match the connector/annotation tone vocabulary, the **tone** modifier on
+text marks and bracket notes was renamed:
+
+| 0.4 | 0.5 |
+| --- | --- |
+| `.ui-mark--evidence` | `.ui-mark--accent` |
+| `.ui-bracket-note--evidence` | `.ui-bracket-note--accent` |
+| `ui.mark({ tone: 'evidence' })` | `ui.mark({ tone: 'accent' })` |
+| `ui.bracketNote({ tone: 'evidence' })` | `ui.bracketNote({ tone: 'accent' })` |
+
+**Do _not_ rewrite** `ui.annotation({ variant: 'evidence' })` or the
+`.ui-annotation--evidence` subject marker — those are a marker **shape**, not a
+tone, and are unchanged.
+
+```bash
+rg -l 'ui-mark--evidence|ui-bracket-note--evidence' .
+# s/ui-mark--evidence/ui-mark--accent/g ; s/ui-bracket-note--evidence/ui-bracket-note--accent/g
+```
+
+## 3. Annotation arrowheads share the connectors geometry kernel
+
+No API change — `connectorEndArrow` and the annotation arrowhead recipes keep
+their signatures. Only the **rendered arrowhead path** differs slightly now that
+it reuses the shared `@ponchia/ui/connectors` geometry kernel.
+
+**Migration:** nothing to change in code. If you keep exact-path SVG snapshot
+tests of annotation arrowheads, **re-baseline** them.
+
+## What's new (all opt-in, nothing to change)
+
+- **Analytical suite** — `@ponchia/ui/css/analytical.css` rolls up annotations,
+  legend, marks, connectors, spotlight, crosshair and selection. Each owns only
+  its visual grammar + pure geometry (no chart engine, no state, no hit-testing).
+- **App-tier leaves** — `css/sources.css` (citation/provenance trust),
+  `css/state.css` (lifecycle/system state), `css/generated.css` (AI-trust),
+  `css/workbench.css` (inspector/property/selection bar), and `css/command.css`
+  + `initCommand` (a filter/keyboard command palette).
+- **`.ui-shortcut`** — a keyboard-hint chord/sequence primitive in the core layer.
+
+## Re-pin
+
+```jsonc
+// package.json — 0.5 is a breaking minor under the pre-1.0 policy
+"@ponchia/ui": "~0.5.0"
+```

package/docs/migrations/0.5-to-0.6.md

@@ -0,0 +1,82 @@
+# Migrating 0.5 -> 0.6
+
+0.6.0 is the **charting realignment** release. The analytical layer still
+explains figures, but it no longer pretends CSS can be a chart renderer:
+scales, domains, axes and data binding belong to a chart engine.
+
+There is one breaking change. The data-viz palette (`--chart-*`,
+`tokens/charts.json`) and the standalone Legends layer are unchanged. The
+machine-readable map is [`MIGRATIONS.json`](../../MIGRATIONS.json).
+
+## 1. Replace the removed `.ui-chart*` renderer
+
+The static bar-chart classes were removed:
+
+```text
+ui-chart
+ui-chart__plot
+ui-chart__bar
+ui-chart__label
+ui-chart__track
+ui-chart__fill
+ui-chart__fallback
+ui-chart__caption
+```
+
+There is no safe class rename. Find call sites first:
+
+```bash
+rg -n 'ui-chart\b|ui-chart__' .
+```
+
+For live or data-driven charts, migrate to Vega-Lite and apply the Bronto
+theme config:
+
+```js
+import { brontoVegaConfig } from '@ponchia/ui/vega';
+
+vegaEmbed('#chart', spec, {
+  config: brontoVegaConfig(document.documentElement.dataset.theme || 'light'),
+  renderer: 'svg',
+  actions: false,
+});
+```
+
+Wrap the rendered chart in report chrome and keep the data key in the
+standalone legend layer:
+
+```html
+<figure class="ui-report__figure">
+  <div id="chart"></div>
+  <figcaption class="ui-report__caption">Latency by region.</figcaption>
+  <ul class="ui-legend">
+    <li class="ui-legend__item">
+      <span class="ui-legend__swatch ui-legend__swatch--1"></span>
+      <span class="ui-legend__label">EU West</span>
+    </li>
+  </ul>
+</figure>
+```
+
+For frozen print charts with no runtime, hand-author an inline `<svg>` using the
+resolved `--chart-*` palette or `tokens/charts.json`.
+
+## 2. Remove `--chart-value`
+
+The old renderer's per-bar `--chart-value` knob is gone with the renderer.
+Keep using `--chart-color` and `--chart-pattern` on `.ui-legend__swatch`; those
+belong to the unchanged Legends layer.
+
+## 3. Import the new chart theme helper only when needed
+
+`@ponchia/ui/vega` and `vega.json` are config/data only. Vega, Vega-Lite and
+vega-embed remain consumer dependencies; Bronto does not bundle a chart engine.
+See [`docs/vega.md`](../vega.md) for the browser, CDN and static-report
+recipes.
+
+## Re-pin
+
+```jsonc
+// package.json — 0.6 is a breaking minor under the pre-1.0 policy
+"@ponchia/ui": "~0.6.0"
+```