@ponchia/ui 0.4.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/CHANGELOG.md +230 -8
  2. package/MIGRATIONS.json +92 -0
  3. package/README.md +9 -6
  4. package/annotations/index.d.ts +280 -0
  5. package/annotations/index.js +522 -0
  6. package/behaviors/carousel.js +197 -0
  7. package/behaviors/combobox.js +195 -0
  8. package/behaviors/command.js +187 -0
  9. package/behaviors/connectors.js +96 -0
  10. package/behaviors/crosshair.js +58 -0
  11. package/behaviors/dialog.js +73 -0
  12. package/behaviors/disclosure.js +25 -0
  13. package/behaviors/dismissible.js +24 -0
  14. package/behaviors/forms.js +158 -0
  15. package/behaviors/glyph.js +109 -0
  16. package/behaviors/index.d.ts +79 -0
  17. package/behaviors/index.js +18 -1409
  18. package/behaviors/internal.js +50 -0
  19. package/behaviors/legend.js +46 -0
  20. package/behaviors/menu.js +46 -0
  21. package/behaviors/popover.js +108 -0
  22. package/behaviors/spotlight.js +53 -0
  23. package/behaviors/table.js +109 -0
  24. package/behaviors/tabs.js +103 -0
  25. package/behaviors/theme.js +82 -0
  26. package/behaviors/toast.js +152 -0
  27. package/classes/index.d.ts +280 -2
  28. package/classes/index.js +313 -2
  29. package/connectors/index.d.ts +71 -0
  30. package/connectors/index.js +179 -0
  31. package/css/analytical.css +21 -0
  32. package/css/annotations.css +292 -0
  33. package/css/command.css +97 -0
  34. package/css/connectors.css +93 -0
  35. package/css/crosshair.css +100 -0
  36. package/css/feedback.css +51 -0
  37. package/css/fonts.css +11 -7
  38. package/css/generated.css +117 -0
  39. package/css/legend.css +268 -0
  40. package/css/marks.css +144 -0
  41. package/css/primitives.css +18 -0
  42. package/css/report.css +12 -31
  43. package/css/selection.css +46 -0
  44. package/css/sources.css +179 -0
  45. package/css/spotlight.css +104 -0
  46. package/css/state.css +121 -0
  47. package/css/tokens.css +25 -37
  48. package/css/workbench.css +83 -0
  49. package/dist/bronto.css +1 -1
  50. package/dist/css/analytical.css +1 -0
  51. package/dist/css/annotations.css +1 -0
  52. package/dist/css/command.css +1 -0
  53. package/dist/css/connectors.css +1 -0
  54. package/dist/css/crosshair.css +1 -0
  55. package/dist/css/feedback.css +1 -1
  56. package/dist/css/fonts.css +1 -1
  57. package/dist/css/generated.css +1 -0
  58. package/dist/css/legend.css +1 -0
  59. package/dist/css/marks.css +1 -0
  60. package/dist/css/primitives.css +1 -1
  61. package/dist/css/report.css +1 -1
  62. package/dist/css/selection.css +1 -0
  63. package/dist/css/sources.css +1 -0
  64. package/dist/css/spotlight.css +1 -0
  65. package/dist/css/state.css +1 -0
  66. package/dist/css/workbench.css +1 -0
  67. package/docs/adr/0003-theme-model.md +7 -4
  68. package/docs/annotations.md +345 -0
  69. package/docs/architecture.md +202 -0
  70. package/docs/command.md +95 -0
  71. package/docs/connectors.md +91 -0
  72. package/docs/crosshair.md +63 -0
  73. package/docs/generated.md +91 -0
  74. package/docs/legends.md +168 -0
  75. package/docs/marks.md +86 -0
  76. package/docs/reference.md +309 -3
  77. package/docs/reporting.md +49 -14
  78. package/docs/selection.md +40 -0
  79. package/docs/sources.md +110 -0
  80. package/docs/spotlight.md +78 -0
  81. package/docs/stability.md +16 -1
  82. package/docs/state.md +85 -0
  83. package/docs/usage.md +22 -0
  84. package/docs/workbench.md +72 -0
  85. package/fonts/doto-400.woff2 +0 -0
  86. package/fonts/doto-500.woff2 +0 -0
  87. package/fonts/doto-600.woff2 +0 -0
  88. package/fonts/doto-700.woff2 +0 -0
  89. package/fonts/doto-800.woff2 +0 -0
  90. package/fonts/doto-900.woff2 +0 -0
  91. package/llms.txt +229 -6
  92. package/package.json +69 -4
  93. package/qwik/index.d.ts +5 -0
  94. package/qwik/index.js +20 -0
  95. package/react/index.d.ts +5 -0
  96. package/react/index.js +10 -0
  97. package/solid/index.d.ts +5 -0
  98. package/solid/index.js +10 -0
  99. package/tokens/index.js +9 -5
  100. package/fonts/doto-400.ttf +0 -0
  101. package/fonts/doto-500.ttf +0 -0
  102. package/fonts/doto-600.ttf +0 -0
  103. package/fonts/doto-700.ttf +0 -0
  104. package/fonts/doto-800.ttf +0 -0
  105. package/fonts/doto-900.ttf +0 -0
package/llms.txt CHANGED
@@ -16,8 +16,8 @@
16
16
  CSS (pick one; do not import both):
17
17
 
18
18
  ```css
19
- @import '@ponchia/ui'; /* dist/bronto.css — flattened, minified, one file (recommended) */
20
- @import '@ponchia/ui/css'; /* css/core.css — @import fan-out, needs a bundler */
19
+ @import '@ponchia/ui'; /* dist/bronto.css — flattened, minified, one file (recommended) */
20
+ @import '@ponchia/ui/css'; /* css/core.css — @import fan-out, needs a bundler */
21
21
  ```
22
22
 
23
23
  `import '@ponchia/ui'` is supported only as a CSS side-effect import in a
@@ -74,7 +74,7 @@ like `data-theme` (the derived accent family only recomputes at `:root`):
74
74
 
75
75
  ```html
76
76
  <link rel="stylesheet" href="@ponchia/ui/css/skins.css" />
77
- <html data-bronto-skin="amber-crt | phosphor-green | e-ink">
77
+ <html data-bronto-skin="amber-crt | phosphor-green | e-ink"></html>
78
78
  ```
79
79
 
80
80
  Each re-points the one `--accent` (OKLCH, per-theme, contrast-gated); status
@@ -97,6 +97,221 @@ simulated protan/deutan/tritan), `--chart-seq-*` (sequential), `--chart-div-*`
97
97
  (diverging), and `--chart-pattern-1..8` (dot-matrix fills — pair colour N with
98
98
  pattern N; colour is never the sole signal). Details in `docs/theming.md`.
99
99
 
100
+ Building analytical / generated-report UI? Import the roll-up
101
+ `@ponchia/ui/css/analytical.css` (bundles annotations + legend + marks +
102
+ connectors + spotlight + crosshair + selection) instead of the seven leaves;
103
+ add `css/dataviz.css` for chart colours and `css/report.css` for the document
104
+ grammar. The individual layers (each opt-in, none in the default bundle):
105
+
106
+ Optional SVG annotations for charts/reports — opt-in, never in the default
107
+ bundle. This is Bronto's subject / connector / note grammar inspired by
108
+ d3-annotation, not an authoring engine:
109
+
110
+ ```html
111
+ <link rel="stylesheet" href="@ponchia/ui/css/annotations.css" />
112
+ ```
113
+
114
+ ```js
115
+ import { annotationParts, connectorLine, circleSubjectPath } from '@ponchia/ui/annotations';
116
+ ```
117
+
118
+ Use `ui-annotation` groups inside SVG with `ui-annotation__subject`,
119
+ `ui-annotation__connector`, `ui-annotation__note`, `ui-annotation__title`, and
120
+ `ui-annotation__label`. `ui.annotation({ variant, tone, motion })` builds the
121
+ base class string. Variants cover labels, callouts, elbow/curve connectors,
122
+ circle/rect/threshold subjects, badges, brackets, bands, slopes, comparisons,
123
+ clusters, axis marks, timeline pins, and evidence markers. Motion is opt-in
124
+ (`draw`, `reveal`, `pulse`, `focus`) and respects reduced-motion preferences.
125
+ Use `notePlacement()` for one-note bounded placement, but do not treat it as a
126
+ whole-chart collision solver. `declutterLabels(items,{gap,min,max})` is a
127
+ deterministic 1-D declutter; `directLabels(items,{axis,cross,gap,min,max,shape})`
128
+ adds the leader line (it declutters labels along an axis and returns each placed
129
+ point plus a leader path `d` for `ui-annotation__connector`) — neither owns
130
+ scales, DOM, or 2-D placement. Status tones are only for status-bearing callouts.
131
+ Keep charts sparse; dense mobile figures need horizontal scrolling, a simplified
132
+ SVG, or complete caption/fallback text. Details: `docs/annotations.md`.
133
+
134
+ Optional legends / data keys for charts and figures — opt-in, never in the
135
+ default bundle. Reads the `--chart-*` tokens, so a key never drifts from its
136
+ series:
137
+
138
+ ```html
139
+ <link rel="stylesheet" href="@ponchia/ui/css/legend.css" />
140
+ ```
141
+
142
+ Use a `ui-legend` container with `ui-legend__item` rows, each holding a
143
+ `ui-legend__swatch` (decorative, `aria-hidden`) and a `ui-legend__label` (the
144
+ required non-colour channel — WCAG 1.4.1; colour alone never carries meaning).
145
+ Set the swatch colour inline (`style="--chart-color: var(--chart-3)"`, plus
146
+ `--chart-pattern` to match a patterned mark) or with a `ui-legend__swatch--1..8`
147
+ index helper. Variants: `ui-legend--vertical`/`--compact`/`--with-values`,
148
+ `ui-legend--gradient` (+`--diverging`, with `ui-legend__track`/`__ticks`/`__tick`),
149
+ and `ui-legend--threshold`. `ui.legend()`/`ui.legendItem()`/`ui.legendSwatch()`
150
+ build the class strings. Interactive (series-toggling) legends are opt-in:
151
+ author entries as `<button aria-pressed>` under `[data-bronto-legend]`, run
152
+ `initLegend()` (or `useLegend()`), and listen for `bronto:legend:toggle`
153
+ (`{ series, active }`) — Bronto flips the control state; you hide the series and
154
+ own the `aria-live` announcement. Details: `docs/legends.md`.
155
+
156
+ Optional text marks / evidence emphasis for running prose — opt-in, never in
157
+ the default bundle. The prose counterpart to annotations (annotations call out a
158
+ figure; marks call out a sentence):
159
+
160
+ ```html
161
+ <link rel="stylesheet" href="@ponchia/ui/css/marks.css" />
162
+ ```
163
+
164
+ Put `ui-mark` on a `<mark>` for inline emphasis (semantic, not just visual).
165
+ Styles: default highlight, `ui-mark--underline`, `ui-mark--box`,
166
+ `ui-mark--strike`. Tones: `ui-mark--accent` (the rationed accent),
167
+ `--success`/`--warning`/`--danger`/`--info` (status-bearing only), `--muted`.
168
+ `ui-mark--draw` sweeps the highlight in (reduced-motion-safe). `ui-bracket-note`
169
+ (+ `ui-bracket-note__label`, tones `--accent`/`--warning`/`--danger`/`--info`)
170
+ brackets a whole passage — the prose analogue of `ui-annotation--bracket`.
171
+ `ui.mark({ style, tone, motion })` / `ui.bracketNote({ tone })` build the class
172
+ strings. A mark is visual only; if the emphasis carries meaning the words don't,
173
+ state it in the text (WCAG 1.4.1). Details: `docs/marks.md`.
174
+
175
+ Optional connectors / leader lines between two DOM elements — opt-in, never in
176
+ the default bundle. Pure geometry + an optional draw/track behavior; owns no
177
+ layout:
178
+
179
+ ```html
180
+ <link rel="stylesheet" href="@ponchia/ui/css/connectors.css" />
181
+ ```
182
+
183
+ Place a `ui-connector` SVG (`data-bronto-connector`, `aria-hidden`) as an
184
+ overlay inside a `position: relative` container holding both endpoints; set
185
+ `data-from`/`data-to` (element ids), optional `data-shape`
186
+ (straight|elbow|curve), `data-from-side`/`data-to-side`, and `data-end`
187
+ (arrow|dot|none). `initConnectors()` (or `useConnectors()`) draws the path and
188
+ redraws on resize/scroll. Tones `ui-connector--accent`/`--muted`/status,
189
+ `ui-connector--dashed`, `ui-connector--draw`. Pure helpers from
190
+ `@ponchia/ui/connectors` (`connectRects`, `connectorPath`, `arrowHead`,
191
+ `anchorPoint`, …) return SVG strings for SSR/canvas. Details: `docs/connectors.md`.
192
+
193
+ Optional spotlight / guided-focus overlay — opt-in, never in the default
194
+ bundle. The visual language of a tour, NOT a tour engine (the host owns step
195
+ order/advancing/visibility):
196
+
197
+ ```html
198
+ <link rel="stylesheet" href="@ponchia/ui/css/spotlight.css" />
199
+ ```
200
+
201
+ A `ui-spotlight` overlay (`data-bronto-spotlight`, `data-target=<element id>`)
202
+ contains a `ui-spotlight__hole` (the box-shadow cutout) and a `ui-tour-note`
203
+ callout (`__step`/`__title`/`__body`/`__actions`). `initSpotlight()` (or
204
+ `useSpotlight()`) measures the target and sets `--spot-x/y/w/h`, re-placing on
205
+ resize/scroll and when `data-target` changes — so advance a tour by updating
206
+ `data-target`. `ui-spotlight--ring` adds a ring. The overlay is non-blocking by
207
+ design; put the real guidance text in the focusable `ui-tour-note`. Details:
208
+ `docs/spotlight.md`.
209
+
210
+ Optional crosshair / readout for reading a value off a plot — opt-in, never in
211
+ the default bundle. Reports the pointer position; the host maps it to data:
212
+
213
+ ```html
214
+ <link rel="stylesheet" href="@ponchia/ui/css/crosshair.css" />
215
+ ```
216
+
217
+ Mark the plot `[data-bronto-crosshair]` (position: relative) and put a
218
+ `ui-crosshair` overlay inside it with `ui-crosshair__line ui-crosshair__line--x`
219
+ and/or `--y`, optional `ui-crosshair__badge`, and a `ui-readout` chip.
220
+ `initCrosshair()` (or `useCrosshair()`) sets `--crosshair-x/y` (px) on pointer
221
+ move, toggles `is-active`, and dispatches `bronto:crosshair:move`
222
+ ({ x, y, fx, fy } — px + 0..1 fractions) / `bronto:crosshair:leave`. It does NOT
223
+ find the nearest datum or map pixels→data (that needs your scales). `ui.crosshair({ muted })`.
224
+ Details: `docs/crosshair.md`.
225
+
226
+ Optional selection-state vocabulary — opt-in, cross-cutting, CSS only. The carve
227
+ from brush/lasso: Bronto does not do region selection/hit-testing; it ships only
228
+ the states an item can be in:
229
+
230
+ ```html
231
+ <link rel="stylesheet" href="@ponchia/ui/css/selection.css" />
232
+ ```
233
+
234
+ Apply `ui-sel` + `ui-sel--on` (selected), `ui-sel--off` (excluded), or
235
+ `ui-sel--maybe` (live-brush candidate) to any data element (chart mark, table
236
+ row, list item, map region) from YOUR selection/brush logic — Bronto only styles
237
+ them. `ui.sel({ state: 'on'|'off'|'maybe' })`. Details: `docs/selection.md`.
238
+
239
+ Optional source/citation/provenance trust layer — opt-in, CSS only, never in
240
+ the default bundle. The grammar for "where did this come from?" in generated
241
+ reports/AI output:
242
+
243
+ ```html
244
+ <link rel="stylesheet" href="@ponchia/ui/css/sources.css" />
245
+ ```
246
+
247
+ `ui-citation` (inline ref on a real `<a>`/`<button>`; `--chip` = named-source
248
+ pill), `ui-source-card` (+`__title`/`__origin`/`__time`/`__excerpt`/`__actions`),
249
+ `ui-source-list` (+`__item`), and `ui-provenance` (+`__item`). A cross-cutting
250
+ trust state sets the tone: `ui-src--verified`/`--reviewed`/`--generated`/
251
+ `--unverified`/`--stale`/`--conflict` — always paired with an author-written
252
+ label (never colour alone). Bronto styles + states; the host owns fetching,
253
+ numbering, and trust. `ui.citation({chip,state})` / `ui.source({state})` /
254
+ `ui.provenance({state})`. Details: `docs/sources.md`.
255
+
256
+ Optional lifecycle/system-state vocabulary — opt-in, CSS only, never in the
257
+ default bundle. The states apps live in (saving/saved/queued/offline/stale/
258
+ conflict/error/locked/reviewed/needs-review):
259
+
260
+ ```html
261
+ <link rel="stylesheet" href="@ponchia/ui/css/state.css" />
262
+ ```
263
+
264
+ `ui-state` (+`__label`/`__detail`) carries a tone dot + the canonical label;
265
+ the `ui-state--saving`/`--saved`/… modifier bakes the tone, `ui-state--busy`
266
+ pulses the indicator for
267
+ in-progress states (reduced-motion-safe). `ui-syncbar` is a page/document
268
+ save-status strip. The label IS the state (never colour alone); the host owns
269
+ the state machine, retry, and persistence — persistent state gets persistent UI,
270
+ not a toast. `ui.state({ state, busy })`. Details: `docs/state.md`.
271
+
272
+ Optional generated-content / AI-trust surfaces — opt-in, CSS only, never in the
273
+ default bundle. NOT a chat kit; the trust surfaces around generated content:
274
+
275
+ ```html
276
+ <link rel="stylesheet" href="@ponchia/ui/css/generated.css" />
277
+ ```
278
+
279
+ `ui-generated` (+`__label`) marks a machine-authored region; `ui-origin-label`
280
+ (+`--ai`) tags origin ("AI generated" / "Human reviewed"); `ui-reasoning`
281
+ (+`__body`) and `ui-tool-log` / `ui-tool-call` (+`__name`/`__status`/`__body`)
282
+ are quiet native-`<details>` collapsibles for reasoning + tool traces. Bronto
283
+ styles disclosure/origin/trace; the host owns model metadata, redaction, and
284
+ safety. No confidence/verdict widget (don't fabricate precision). `ui.originLabel({ ai })`.
285
+ Details: `docs/generated.md`.
286
+
287
+ Optional workbench primitives for tool UIs — opt-in, CSS only, never in the
288
+ default bundle:
289
+
290
+ ```html
291
+ <link rel="stylesheet" href="@ponchia/ui/css/workbench.css" />
292
+ ```
293
+
294
+ `ui-inspector` (+`__header`/`__body`) is a selected-object detail panel;
295
+ `ui-property` (+`__label`/`__value`) is a denser key/value row for it;
296
+ `ui-selectionbar` (+`__count`/`__actions`) is a raised action bar for the current
297
+ selection (pair with `ui-sel` states on the items). Layout/affordances only —
298
+ resizable split panes and drag handles are deferred. Class-only. Details:
299
+ `docs/workbench.md`.
300
+
301
+ Optional command palette — opt-in CSS shell (`css/command.css`) + `initCommand`
302
+ behavior. Filter + keyboard-navigate a DOM-authored command list:
303
+
304
+ ```html
305
+ <link rel="stylesheet" href="@ponchia/ui/css/command.css" />
306
+ ```
307
+
308
+ `ui-command` (+`__input`/`__list`/`__group`/`__item`/`__shortcut`/`__meta`/
309
+ `__empty`); `initCommand()` owns filtering, roving focus (Down/Up/Home/End),
310
+ Enter→`bronto:command:select` ({value,label}) and Escape→`bronto:command:close`.
311
+ The HOST owns the action registry + execution; NO global Cmd/Ctrl+K (open it
312
+ yourself, e.g. a <dialog> via initDialog). Pairs with `ui-shortcut`. Binding:
313
+ `useCommand()` (react/solid/qwik). Details: `docs/command.md`.
314
+
100
315
  Optional static report layer for LLM-authored HTML reports — opt-in, never in
101
316
  the default bundle. Pair it with the normal bundle, and add data-viz only when
102
317
  the report contains charts. For standalone browser HTML, use real URLs; package
@@ -119,7 +334,10 @@ Canonical report skeleton:
119
334
  <p class="ui-eyebrow">Report</p>
120
335
  <h1 class="ui-report__title">System review</h1>
121
336
  <p class="ui-report__subtitle">Static HTML, Chromium PDF-ready.</p>
122
- <ol class="ui-report__meta"><li>2026-06-01</li><li>Generated</li></ol>
337
+ <ol class="ui-report__meta">
338
+ <li>2026-06-01</li>
339
+ <li>Generated</li>
340
+ </ol>
123
341
  </header>
124
342
  <section class="ui-report__section">
125
343
  <h2 class="ui-report__section-head">Executive summary</h2>
@@ -158,6 +376,8 @@ Read these from `node_modules/@ponchia/ui/` — no network needed:
158
376
  - `docs/reporting.md` — static/PDF-first report cookbook for LLM-authored
159
377
  reports, including report skeletons, chart rules, print utilities, and safety
160
378
  boundaries.
379
+ - `docs/annotations.md` — SVG annotation recipes and helper guidance for
380
+ analytical figures.
161
381
  - `docs/contrast.md` — the published, CI-gated WCAG 2.1 contrast matrix
162
382
  for every contractual token pairing, per theme. Generated from the
163
383
  resolved palette; the build fails below the declared floor.
@@ -171,6 +391,8 @@ Read these from `node_modules/@ponchia/ui/` — no network needed:
171
391
  - `glyphs/glyphs.d.ts` — the `GlyphName` literal union plus `renderGlyph` /
172
392
  `glyphCells` signatures for the display glyphs. (The DOM form,
173
393
  `initDotGlyph`, is declared in `behaviors/index.d.ts`.)
394
+ - `annotations/index.d.ts` — no-dependency SVG path helpers for Bronto
395
+ annotation geometry.
174
396
  - `classes/vscode.css-custom-data.json` — editor autocomplete for tokens.
175
397
 
176
398
  ## Human-browsable references (not shipped in the npm tarball, by design)
@@ -187,7 +409,8 @@ Read these from `node_modules/@ponchia/ui/` — no network needed:
187
409
  - Prefer the `ui.*()` recipes over hand-concatenating modifier strings.
188
410
  Report/layout classes added in 0.4.1 are the exception: use `cls.report*`,
189
411
  `cls.chart*`, `cls.printOnly`, or literal documented class names because
190
- there are no `ui.report()` / `ui.chart()` recipes yet.
412
+ there are no `ui.report()` / `ui.chart()` recipes yet. Annotations do have a
413
+ `ui.annotation()` recipe for variant/tone selection.
191
414
  - Override framework styles by writing your own rules outside
192
415
  `@layer bronto` — not with higher specificity or `!important`.
193
416
  - Color is tiered (ADR-0001): neutral canvas · one rationed accent · locked
@@ -195,4 +418,4 @@ Read these from `node_modules/@ponchia/ui/` — no network needed:
195
418
  tokens — re-point `--accent` (or a `data-bronto-skin` colorway), use status
196
419
  tokens for status, and `--chart-*` (from `css/dataviz.css`) for charts only.
197
420
  Don't add raw hues to components; `check:color-policy` enforces this.
198
- - Pre-1.0 SemVer: breaking changes ship in the *minor*. Pin `~0.x`.
421
+ - Pre-1.0 SemVer: breaking changes ship in the _minor_. Pin `~0.x`.
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@ponchia/ui",
3
- "version": "0.4.1",
3
+ "version": "0.5.0",
4
4
  "type": "module",
5
- "description": "CSS-first, framework-agnostic UI framework — token-driven restraint (monochrome by default, one rationed accent), OKLCH colorways, a dot-matrix icon set, a colourblind-safe data-viz palette, dot-matrix motifs, zero runtime dependencies.",
5
+ "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.",
6
6
  "keywords": [
7
7
  "css",
8
8
  "ui",
@@ -46,18 +46,34 @@
46
46
  "classes",
47
47
  "behaviors",
48
48
  "glyphs",
49
+ "annotations",
50
+ "connectors",
49
51
  "react",
50
52
  "solid",
51
53
  "qwik",
52
54
  "shiki",
53
55
  "llms.txt",
54
56
  "CHANGELOG.md",
57
+ "MIGRATIONS.json",
58
+ "docs/architecture.md",
55
59
  "docs/reference.md",
56
60
  "docs/theming.md",
57
61
  "docs/contrast.md",
58
62
  "docs/stability.md",
59
63
  "docs/usage.md",
60
64
  "docs/reporting.md",
65
+ "docs/annotations.md",
66
+ "docs/legends.md",
67
+ "docs/marks.md",
68
+ "docs/connectors.md",
69
+ "docs/spotlight.md",
70
+ "docs/crosshair.md",
71
+ "docs/selection.md",
72
+ "docs/sources.md",
73
+ "docs/state.md",
74
+ "docs/generated.md",
75
+ "docs/workbench.md",
76
+ "docs/command.md",
61
77
  "docs/adr/0001-color-system.md",
62
78
  "docs/adr/0002-scope-and-2026-baseline.md",
63
79
  "docs/adr/0003-theme-model.md"
@@ -70,6 +86,7 @@
70
86
  "check:format": "prettier --check .",
71
87
  "size:report": "node scripts/size-report.mjs",
72
88
  "tokens:build": "node scripts/gen-tokens-json.mjs",
89
+ "tokens:css:build": "node scripts/gen-tokens-css.mjs",
73
90
  "dtcg:build": "node scripts/gen-dtcg.mjs",
74
91
  "resolved:build": "node scripts/gen-resolved.mjs",
75
92
  "dts:build": "node scripts/gen-dts.mjs",
@@ -86,11 +103,13 @@
86
103
  "check:dts": "node scripts/check-dts.mjs",
87
104
  "check:behaviors": "node scripts/check-behaviors.mjs",
88
105
  "check:bindings": "node scripts/check-bindings.mjs",
106
+ "check:helpers-dts": "node scripts/check-helpers-dts.mjs",
89
107
  "check:glyphs": "node scripts/check-glyphs.mjs",
90
108
  "check:color-policy": "node scripts/check-color-policy.mjs",
91
109
  "check:skins": "node scripts/check-skins.mjs",
92
110
  "check:charts": "node scripts/check-charts.mjs",
93
111
  "check:report": "node scripts/check-report.mjs",
112
+ "check:legend": "node scripts/check-legend.mjs",
94
113
  "check:types": "tsc -p tsconfig.json",
95
114
  "check:dtcg": "node scripts/check-dtcg.mjs",
96
115
  "check:resolved": "node scripts/check-resolved.mjs",
@@ -101,9 +120,9 @@
101
120
  "check:reference": "node scripts/check-reference.mjs",
102
121
  "check:contrast": "node scripts/check-contrast.mjs",
103
122
  "check:vscode": "node scripts/check-vscode-data.mjs",
104
- "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:glyphs && npm run check:color-policy && npm run check:skins && npm run check:charts && npm run check:report",
123
+ "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",
105
124
  "test": "node --test \"test/*.test.mjs\"",
106
- "prepack": "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",
125
+ "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",
107
126
  "prepublishOnly": "npm run check && npm test"
108
127
  },
109
128
  "devDependencies": {
@@ -162,6 +181,19 @@
162
181
  "./css/skins.css": "./dist/css/skins.css",
163
182
  "./css/dataviz.css": "./dist/css/dataviz.css",
164
183
  "./css/report.css": "./dist/css/report.css",
184
+ "./css/annotations.css": "./dist/css/annotations.css",
185
+ "./css/legend.css": "./dist/css/legend.css",
186
+ "./css/marks.css": "./dist/css/marks.css",
187
+ "./css/connectors.css": "./dist/css/connectors.css",
188
+ "./css/spotlight.css": "./dist/css/spotlight.css",
189
+ "./css/crosshair.css": "./dist/css/crosshair.css",
190
+ "./css/selection.css": "./dist/css/selection.css",
191
+ "./css/sources.css": "./dist/css/sources.css",
192
+ "./css/state.css": "./dist/css/state.css",
193
+ "./css/generated.css": "./dist/css/generated.css",
194
+ "./css/workbench.css": "./dist/css/workbench.css",
195
+ "./css/command.css": "./dist/css/command.css",
196
+ "./css/analytical.css": "./dist/css/analytical.css",
165
197
  "./css/unlayered/tokens.css": "./css/tokens.css",
166
198
  "./css/unlayered/fonts.css": "./css/fonts.css",
167
199
  "./css/unlayered/base.css": "./css/base.css",
@@ -180,6 +212,18 @@
180
212
  "./css/unlayered/skins.css": "./css/skins.css",
181
213
  "./css/unlayered/dataviz.css": "./css/dataviz.css",
182
214
  "./css/unlayered/report.css": "./css/report.css",
215
+ "./css/unlayered/annotations.css": "./css/annotations.css",
216
+ "./css/unlayered/legend.css": "./css/legend.css",
217
+ "./css/unlayered/marks.css": "./css/marks.css",
218
+ "./css/unlayered/connectors.css": "./css/connectors.css",
219
+ "./css/unlayered/spotlight.css": "./css/spotlight.css",
220
+ "./css/unlayered/crosshair.css": "./css/crosshair.css",
221
+ "./css/unlayered/selection.css": "./css/selection.css",
222
+ "./css/unlayered/sources.css": "./css/sources.css",
223
+ "./css/unlayered/state.css": "./css/state.css",
224
+ "./css/unlayered/generated.css": "./css/generated.css",
225
+ "./css/unlayered/workbench.css": "./css/workbench.css",
226
+ "./css/unlayered/command.css": "./css/command.css",
183
227
  "./tokens": {
184
228
  "types": "./tokens/index.d.ts",
185
229
  "default": "./tokens/index.js"
@@ -190,12 +234,25 @@
190
234
  "./tokens/resolved.json": "./tokens/resolved.json",
191
235
  "./shiki/nothing.json": "./shiki/nothing.json",
192
236
  "./llms.txt": "./llms.txt",
237
+ "./docs/architecture.md": "./docs/architecture.md",
193
238
  "./docs/reference.md": "./docs/reference.md",
194
239
  "./docs/theming.md": "./docs/theming.md",
195
240
  "./docs/contrast.md": "./docs/contrast.md",
196
241
  "./docs/stability.md": "./docs/stability.md",
197
242
  "./docs/usage.md": "./docs/usage.md",
198
243
  "./docs/reporting.md": "./docs/reporting.md",
244
+ "./docs/annotations.md": "./docs/annotations.md",
245
+ "./docs/legends.md": "./docs/legends.md",
246
+ "./docs/marks.md": "./docs/marks.md",
247
+ "./docs/connectors.md": "./docs/connectors.md",
248
+ "./docs/spotlight.md": "./docs/spotlight.md",
249
+ "./docs/crosshair.md": "./docs/crosshair.md",
250
+ "./docs/selection.md": "./docs/selection.md",
251
+ "./docs/sources.md": "./docs/sources.md",
252
+ "./docs/state.md": "./docs/state.md",
253
+ "./docs/generated.md": "./docs/generated.md",
254
+ "./docs/workbench.md": "./docs/workbench.md",
255
+ "./docs/command.md": "./docs/command.md",
199
256
  "./docs/adr/0001-color-system.md": "./docs/adr/0001-color-system.md",
200
257
  "./docs/adr/0002-scope-and-2026-baseline.md": "./docs/adr/0002-scope-and-2026-baseline.md",
201
258
  "./docs/adr/0003-theme-model.md": "./docs/adr/0003-theme-model.md",
@@ -211,6 +268,14 @@
211
268
  "types": "./glyphs/glyphs.d.ts",
212
269
  "default": "./glyphs/glyphs.js"
213
270
  },
271
+ "./annotations": {
272
+ "types": "./annotations/index.d.ts",
273
+ "default": "./annotations/index.js"
274
+ },
275
+ "./connectors": {
276
+ "types": "./connectors/index.d.ts",
277
+ "default": "./connectors/index.js"
278
+ },
214
279
  "./react": {
215
280
  "types": "./react/index.d.ts",
216
281
  "default": "./react/index.js"
package/qwik/index.d.ts CHANGED
@@ -47,6 +47,11 @@ export declare function useTabs(opts?: BrontoBindingOptsResolver): void;
47
47
  export declare function useDialog(opts?: BrontoBindingOptsResolver): void;
48
48
  export declare function useCarousel(opts?: BrontoBindingOptsResolver): void;
49
49
  export declare function useDotGlyph(opts?: BrontoBindingOptsResolver): void;
50
+ export declare function useLegend(opts?: BrontoBindingOptsResolver): void;
51
+ export declare function useConnectors(opts?: BrontoBindingOptsResolver): void;
52
+ export declare function useSpotlight(opts?: BrontoBindingOptsResolver): void;
53
+ export declare function useCrosshair(opts?: BrontoBindingOptsResolver): void;
54
+ export declare function useCommand(opts?: BrontoBindingOptsResolver): void;
50
55
 
51
56
  /** The `toast()` imperative (no lifecycle of its own). */
52
57
  export declare function useToast(): (message: string, opts?: ToastOpts) => Cleanup;
package/qwik/index.js CHANGED
@@ -40,6 +40,11 @@ import {
40
40
  initDialog,
41
41
  initCarousel,
42
42
  initDotGlyph,
43
+ initLegend,
44
+ initConnectors,
45
+ initSpotlight,
46
+ initCrosshair,
47
+ initCommand,
43
48
  toast,
44
49
  } from '../behaviors/index.js';
45
50
 
@@ -117,6 +122,21 @@ export const useCarousel = (opts) =>
117
122
  export const useDotGlyph = (opts) =>
118
123
  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
119
124
  useVisibleTask$((ctx) => start(initDotGlyph, opts, ctx));
125
+ export const useLegend = (opts) =>
126
+ // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
127
+ useVisibleTask$((ctx) => start(initLegend, opts, ctx));
128
+ export const useConnectors = (opts) =>
129
+ // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
130
+ useVisibleTask$((ctx) => start(initConnectors, opts, ctx));
131
+ export const useSpotlight = (opts) =>
132
+ // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
133
+ useVisibleTask$((ctx) => start(initSpotlight, opts, ctx));
134
+ export const useCrosshair = (opts) =>
135
+ // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
136
+ useVisibleTask$((ctx) => start(initCrosshair, opts, ctx));
137
+ export const useCommand = (opts) =>
138
+ // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
139
+ useVisibleTask$((ctx) => start(initCommand, opts, ctx));
120
140
 
121
141
  /** The `toast()` imperative (no lifecycle of its own). */
122
142
  export const useToast = () => toast;
package/react/index.d.ts CHANGED
@@ -49,6 +49,11 @@ export declare function useTabs(opts?: BrontoBindingOptsResolver): void;
49
49
  export declare function useDialog(opts?: BrontoBindingOptsResolver): void;
50
50
  export declare function useCarousel(opts?: BrontoBindingOptsResolver): void;
51
51
  export declare function useDotGlyph(opts?: BrontoBindingOptsResolver): void;
52
+ export declare function useLegend(opts?: BrontoBindingOptsResolver): void;
53
+ export declare function useConnectors(opts?: BrontoBindingOptsResolver): void;
54
+ export declare function useSpotlight(opts?: BrontoBindingOptsResolver): void;
55
+ export declare function useCrosshair(opts?: BrontoBindingOptsResolver): void;
56
+ export declare function useCommand(opts?: BrontoBindingOptsResolver): void;
52
57
 
53
58
  /** The `toast()` imperative (no lifecycle of its own). */
54
59
  export declare function useToast(): (message: string, opts?: ToastOpts) => Cleanup;
package/react/index.js CHANGED
@@ -32,6 +32,11 @@ import {
32
32
  initDialog,
33
33
  initCarousel,
34
34
  initDotGlyph,
35
+ initLegend,
36
+ initConnectors,
37
+ initSpotlight,
38
+ initCrosshair,
39
+ initCommand,
35
40
  toast,
36
41
  } from '../behaviors/index.js';
37
42
 
@@ -71,6 +76,11 @@ export const useTabs = (opts) => useBrontoBehavior(initTabs, opts);
71
76
  export const useDialog = (opts) => useBrontoBehavior(initDialog, opts);
72
77
  export const useCarousel = (opts) => useBrontoBehavior(initCarousel, opts);
73
78
  export const useDotGlyph = (opts) => useBrontoBehavior(initDotGlyph, opts);
79
+ export const useLegend = (opts) => useBrontoBehavior(initLegend, opts);
80
+ export const useConnectors = (opts) => useBrontoBehavior(initConnectors, opts);
81
+ export const useSpotlight = (opts) => useBrontoBehavior(initSpotlight, opts);
82
+ export const useCrosshair = (opts) => useBrontoBehavior(initCrosshair, opts);
83
+ export const useCommand = (opts) => useBrontoBehavior(initCommand, opts);
74
84
 
75
85
  /** The `toast()` imperative (no lifecycle of its own). */
76
86
  export const useToast = () => toast;
package/solid/index.d.ts CHANGED
@@ -49,6 +49,11 @@ export declare function useTabs(opts?: BrontoBindingOptsResolver): void;
49
49
  export declare function useDialog(opts?: BrontoBindingOptsResolver): void;
50
50
  export declare function useCarousel(opts?: BrontoBindingOptsResolver): void;
51
51
  export declare function useDotGlyph(opts?: BrontoBindingOptsResolver): void;
52
+ export declare function useLegend(opts?: BrontoBindingOptsResolver): void;
53
+ export declare function useConnectors(opts?: BrontoBindingOptsResolver): void;
54
+ export declare function useSpotlight(opts?: BrontoBindingOptsResolver): void;
55
+ export declare function useCrosshair(opts?: BrontoBindingOptsResolver): void;
56
+ export declare function useCommand(opts?: BrontoBindingOptsResolver): void;
52
57
 
53
58
  /** The `toast()` imperative (no lifecycle of its own). */
54
59
  export declare function useToast(): (message: string, opts?: ToastOpts) => Cleanup;
package/solid/index.js CHANGED
@@ -32,6 +32,11 @@ import {
32
32
  initDialog,
33
33
  initCarousel,
34
34
  initDotGlyph,
35
+ initLegend,
36
+ initConnectors,
37
+ initSpotlight,
38
+ initCrosshair,
39
+ initCommand,
35
40
  toast,
36
41
  } from '../behaviors/index.js';
37
42
 
@@ -73,6 +78,11 @@ export const useTabs = (opts) => useBrontoBehavior(initTabs, opts);
73
78
  export const useDialog = (opts) => useBrontoBehavior(initDialog, opts);
74
79
  export const useCarousel = (opts) => useBrontoBehavior(initCarousel, opts);
75
80
  export const useDotGlyph = (opts) => useBrontoBehavior(initDotGlyph, opts);
81
+ export const useLegend = (opts) => useBrontoBehavior(initLegend, opts);
82
+ export const useConnectors = (opts) => useBrontoBehavior(initConnectors, opts);
83
+ export const useSpotlight = (opts) => useBrontoBehavior(initSpotlight, opts);
84
+ export const useCrosshair = (opts) => useBrontoBehavior(initCrosshair, opts);
85
+ export const useCommand = (opts) => useBrontoBehavior(initCommand, opts);
76
86
 
77
87
  /** The `toast()` imperative (no lifecycle of its own). */
78
88
  export const useToast = () => toast;
package/tokens/index.js CHANGED
@@ -4,16 +4,20 @@
4
4
  * For consumers that need token values in JS rather than CSS: charting,
5
5
  * canvas, inline styles, theme-aware logic, Style Dictionary / Figma sync.
6
6
  *
7
- * `cssVars` is the canonical, exact mirror of the :root blocks in
8
- * css/tokens.css — keyed by the real custom-property name, values are
9
- * the verbatim CSS strings. scripts/check-tokens.mjs fails CI if this
10
- * drifts from the stylesheet, so the two cannot silently diverge.
7
+ * `cssVars` is the SINGLE SOURCE of truth for token values — keyed by the
8
+ * real custom-property name, values are the verbatim CSS strings. The four
9
+ * :root palette blocks of css/tokens.css are GENERATED from it
10
+ * (scripts/gen-tokens-css.mjs), so the dark palette is authored once here
11
+ * rather than in three places (the two CSS dark blocks + a JS mirror).
12
+ * scripts/check-tokens.mjs fails CI if css/tokens.css drifts from this model.
11
13
  *
12
14
  * `tokens` is an ergonomic view derived programmatically from `cssVars`
13
15
  * (no second hand-maintained copy, so nothing to keep in sync).
14
16
  */
15
17
 
16
- /** Exact mirror of css/tokens.css. Do not reshape — the sync check is literal. */
18
+ /** Single source for token values; the css/tokens.css palette blocks are
19
+ * generated from this (scripts/gen-tokens-css.mjs). Edit values here, then run
20
+ * `npm run tokens:css:build`. Do not reshape — the generators consume it literally. */
17
21
  export const cssVars = {
18
22
  // Global :root — scales, shared with both themes.
19
23
  global: {
package/fonts/doto-400.ttf DELETED
Binary file
package/fonts/doto-500.ttf DELETED
Binary file
package/fonts/doto-600.ttf DELETED
Binary file
package/fonts/doto-700.ttf DELETED
Binary file
package/fonts/doto-800.ttf DELETED
Binary file
package/fonts/doto-900.ttf DELETED
Binary file