@unpunnyfuns/swatchbook-blocks 1.1.1 → 2.0.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.
package/dist/index.d.mts CHANGED
@@ -1,162 +1,10 @@
1
- import { COLOR_FORMATS, ColorFormat } from "@unpunnyfuns/swatchbook-core/color-formats";
2
- import { FormatColorResult, NormalizedColor, formatColor } from "@unpunnyfuns/swatchbook-core/format-color";
3
- import * as _$react from "react";
1
+ import { C as useOptionalSwatchbookData, D as NormalizedColor, E as FormatColorResult, O as formatColor, S as useColorFormat, T as ColorFormat, _ as VirtualTokenGraph, a as usePresenter, b as useActiveAxes, c as PresenterRegistry, d as ProjectSnapshot, f as SwatchbookContext, g as VirtualPresetShape, h as VirtualDiagnosticShape, l as AxesContext, m as VirtualAxisShape, n as PresenterContext, o as PresenterComponent, p as ThemeContext, r as mergePresenters, s as PresenterProps, t as DEFAULT_PRESENTERS, u as ColorFormatContext, v as VirtualTokenListing, w as COLOR_FORMATS, x as useActiveTheme, y as VirtualTokenShape } from "./registry-Dm25Go94.mjs";
4
2
  import { ReactElement, ReactNode } from "react";
5
- import { TokenGraph } from "@unpunnyfuns/swatchbook-core/graph";
6
- import { Axis, Diagnostic, Preset } from "@unpunnyfuns/swatchbook-core";
7
- import { SlimListedToken } from "@unpunnyfuns/swatchbook-core/snapshot-for-wire";
3
+ import { formatTokenValue } from "@unpunnyfuns/swatchbook-core/token-value-css";
4
+ import { Axis } from "@unpunnyfuns/swatchbook-core";
5
+ import { SnapshotForWire } from "@unpunnyfuns/swatchbook-core/snapshot-for-wire";
6
+ import { RealisedToken, RealisedToken as RealisedToken$1, TokenType } from "@unpunnyfuns/swatchbook-core/token-value-types";
8
7
 
9
- //#region src/contexts.d.ts
10
- /**
11
- * Typed shape of the addon's `virtual:swatchbook/tokens` module.
12
- *
13
- * The axis / permutation / diagnostic / preset entries are deliberate
14
- * type-aliases of core's authoritative shapes — the virtual module
15
- * publishes those shapes verbatim, so single-sourcing the types prevents
16
- * silent drift the moment core grows a field the plugin doesn't
17
- * serialise.
18
- *
19
- * Token / listing shapes stay as narrowed interfaces because blocks
20
- * only read a subset of Terrazzo's full token / listing structure; the
21
- * narrower shape documents what's actually relied on.
22
- *
23
- * The ambient `declare module 'virtual:swatchbook/tokens'` declarations
24
- * in `packages/addon/src/virtual.d.ts` describe the same payload.
25
- */
26
- type VirtualAxisShape = Axis;
27
- type VirtualDiagnosticShape = Diagnostic;
28
- interface VirtualTokenShape {
29
- $type?: string | undefined;
30
- $value?: unknown;
31
- $description?: string | undefined;
32
- /**
33
- * DTCG `$deprecated` — `true` or a message string. Mirrors core's
34
- * `SwatchbookToken.$deprecated`; reaches blocks via the resolved token
35
- * map reconstructed from the wire `tokenGraph`.
36
- */
37
- $deprecated?: string | boolean | undefined;
38
- aliasOf?: string | undefined;
39
- aliasChain?: readonly string[] | undefined;
40
- aliasedBy?: readonly string[] | undefined;
41
- /**
42
- * Per-sub-field alias map for composite tokens whose value blends
43
- * primitives with aliased fragments — Terrazzo populates this when
44
- * one or more component fields of a composite ($type: 'border',
45
- * 'shadow', 'typography', 'gradient', 'transition') resolve through
46
- * an alias. The `CompositeBreakdown` block reads it to render the
47
- * source path beside each component value. Typed as `unknown` because
48
- * the shape varies per composite type (color carries a
49
- * `{components: (string | undefined)[]}` sub-shape; typography/border
50
- * carry a flat `Record<string, string | undefined>`); the block
51
- * narrows it at the consumer.
52
- */
53
- partialAliasOf?: unknown;
54
- }
55
- /**
56
- * Subset of `@terrazzo/plugin-token-listing`'s `ListedToken` that the
57
- * snapshot carries. Blocks read `names.css` for the authoritative CSS
58
- * variable name and `previewValue` for the display-ready CSS string.
59
- * `source.loc` enables "jump to authoring source" affordances.
60
- *
61
- * Aliases `SlimListedToken` from core's `/snapshot-for-wire` subpath —
62
- * the single canonical wire shape; both the addon's plugin (server-side
63
- * emit) and blocks (consumer-side read) reference the same definition.
64
- */
65
- type VirtualTokenListing = SlimListedToken;
66
- type VirtualPresetShape = Preset;
67
- /**
68
- * Wire shape of the token graph — aliased from core's authoritative
69
- * `TokenGraph` so both the virtual module declaration and the React
70
- * context stay aligned with the same definition.
71
- */
72
- type VirtualTokenGraph = TokenGraph;
73
- /**
74
- * Full project data read by blocks. Populated by the addon's preview
75
- * decorator (from the virtual module) or constructed by hand in
76
- * non-Storybook consumers.
77
- */
78
- interface ProjectSnapshot {
79
- axes: readonly VirtualAxisShape[];
80
- activeTheme: string;
81
- activeAxes: Readonly<Record<string, string>>;
82
- cssVarPrefix: string;
83
- /**
84
- * Project-wide baseline for the row-indicator strip from
85
- * `config.indicators`. Sits between the hard-coded indicator defaults
86
- * and a block's `indicators` prop. Optional — hand-built snapshots
87
- * (tests, MDX) omit it and blocks fall back to the bare defaults.
88
- */
89
- indicators?: Readonly<Record<string, boolean>>;
90
- diagnostics: readonly VirtualDiagnosticShape[];
91
- /**
92
- * Raw stylesheet text for the active theme. Optional — nothing on the
93
- * `SwatchbookProvider` read path consumes it (`useProject()` never reads
94
- * `snapshot.css`); the addon populates it incidentally when constructing
95
- * its snapshot but injects CSS through its own independent mechanism.
96
- */
97
- css?: string;
98
- /**
99
- * Path-indexed Token Listing data produced by
100
- * `@terrazzo/plugin-token-listing`. Blocks prefer reading authoritative
101
- * CSS var names and preview values from here; empty for non-resolver
102
- * projects. Treat as enrichment — fall back gracefully when a path is
103
- * absent.
104
- */
105
- listing?: Readonly<Record<string, VirtualTokenListing>>;
106
- /**
107
- * Pre-built token graph for the project. JSON-serializable; nodes
108
- * carry per-axis writes plus alias edges. The blocks hook backs
109
- * `resolveAt` and variance from this graph.
110
- */
111
- tokenGraph?: VirtualTokenGraph;
112
- /** The default tuple — `{ axis: axis.default }` for every axis. */
113
- defaultTuple: Record<string, string>;
114
- /**
115
- * Pre-built `resolveAt(tuple)` accessor. The addon's preview decorator
116
- * instantiates this once per iframe lifetime. When present, use-project
117
- * prefers it over building its own from `tokenGraph`, so it MUST preserve
118
- * alias provenance — back it with `resolveAllWithProvenanceAt`, not the raw
119
- * leaf `resolveAllAt`, or axis-varying aliases silently lose their chain /
120
- * reverse refs / description at non-default tuples. Hand-built snapshots
121
- * (tests, MDX) can omit this; blocks then fall back to a provenance-aware
122
- * graph-backed resolver built from `tokenGraph`.
123
- */
124
- resolveAt?: (tuple: Record<string, string>) => Record<string, VirtualTokenShape>;
125
- }
126
- declare function useOptionalSwatchbookData(): ProjectSnapshot | null;
127
- /**
128
- * Active swatchbook theme for the current story/docs render. Populated by
129
- * the addon's preview decorator and consumed by `useToken` + any future
130
- * consumer hooks.
131
- *
132
- * This runs through plain React context rather than Storybook's
133
- * `useGlobals` so the same hook works in autodocs / MDX renders where the
134
- * preview-hooks context isn't available.
135
- */
136
- declare const ThemeContext: _$react.Context<string>;
137
- declare function useActiveTheme(): string;
138
- /**
139
- * Active axis tuple for the current story/docs render — `Record<axisName,
140
- * contextName>`. Derived from the same input as {@link ThemeContext}; split
141
- * out so consumers needing per-axis info (toolbar, panel, tuple-aware
142
- * blocks) don't have to reparse the composed theme name.
143
- */
144
- declare const AxesContext: _$react.Context<Readonly<Record<string, string>>>;
145
- declare function useActiveAxes(): Readonly<Record<string, string>>;
146
- /**
147
- * Active color-display format for the current story/docs render. Populated
148
- * by the addon's preview decorator from the `swatchbookColorFormat` global
149
- * (per-story `globals` or toolbar dropdown) and consumed by blocks that
150
- * render color-token values. Emitted CSS is unaffected.
151
- *
152
- * Runs through plain React context rather than Storybook's `useGlobals` so
153
- * per-story seeded globals flow through on first render and the same hook
154
- * is safe to call from MDX doc blocks (where the preview-hooks context
155
- * isn't available).
156
- */
157
- declare const ColorFormatContext: _$react.Context<ColorFormat | null>;
158
- declare function useColorFormat(): ColorFormat;
159
- //#endregion
160
8
  //#region src/internal/sort-tokens.d.ts
161
9
  type SortBy = 'path' | 'value' | 'none';
162
10
  type SortDir = 'asc' | 'desc';
@@ -178,21 +26,28 @@ interface BorderPreviewProps {
178
26
  sortBy?: SortBy;
179
27
  /** `'asc'` (default) or `'desc'`. */
180
28
  sortDir?: SortDir;
29
+ /**
30
+ * Highest-precedence color format for this preview's values, overriding
31
+ * an outer `ColorFormatContext` and the project's `defaultColorFormat`.
32
+ * Omit to inherit the existing precedence chain (see `useColorFormat`).
33
+ */
34
+ colorFormat?: ColorFormat;
181
35
  }
182
36
  declare function BorderPreview({
183
37
  filter,
184
38
  caption,
185
39
  sortBy,
186
- sortDir
40
+ sortDir,
41
+ colorFormat
187
42
  }: BorderPreviewProps): ReactElement;
188
43
  //#endregion
189
44
  //#region src/border-preview/BorderSample.d.ts
190
- interface BorderSampleProps {
191
- /** Full dot-path of the border token to preview. */
192
- path: string;
193
- }
45
+ /** Props for the connected {@link BorderSample} block. */
46
+ type BorderSampleProps = PresenterProps<'border'>;
194
47
  declare function BorderSample({
195
- path
48
+ token,
49
+ cssVar,
50
+ colorFormat
196
51
  }: BorderSampleProps): ReactElement;
197
52
  //#endregion
198
53
  //#region src/ColorPalette.d.ts
@@ -227,15 +82,45 @@ interface ColorPaletteProps {
227
82
  sortBy?: SortBy;
228
83
  /** `'asc'` (default) or `'desc'`. */
229
84
  sortDir?: SortDir;
85
+ /**
86
+ * Highest-precedence color format for this palette's values, overriding
87
+ * an outer `ColorFormatContext` and the project's `defaultColorFormat`.
88
+ * Omit to inherit the existing precedence chain (see `useColorFormat`).
89
+ */
90
+ colorFormat?: ColorFormat;
230
91
  }
231
92
  declare function ColorPalette({
232
93
  filter,
233
94
  groupBy,
234
95
  caption,
235
96
  sortBy,
236
- sortDir
97
+ sortDir,
98
+ colorFormat
237
99
  }: ColorPaletteProps): ReactElement;
238
100
  //#endregion
101
+ //#region src/presenters/ColorSwatch.d.ts
102
+ /** Props for the {@link ColorSwatch} presenter. */
103
+ type ColorSwatchProps = PresenterProps<'color'>;
104
+ /**
105
+ * Presenter for `$type: color` tokens: a color chip, leaf label, and
106
+ * formatted value with an out-of-gamut marker. The chip's background is
107
+ * `cssVar` when supplied (R3); otherwise it is computed straight from
108
+ * `token.$value`, with `raw` guarded to `hex` (`cssColorFormat`) so the chip
109
+ * always paints a real color even when the display format is a JSON debug
110
+ * string. The value text below the chip uses the actual `colorFormat`,
111
+ * `raw` included. `options.label` lets a grouped consumer (e.g.
112
+ * `ColorPalette`) supply a group-relative label instead of the bare leaf
113
+ * segment, so context lost to grouping (`blue` in `color.palette.blue.50`)
114
+ * still reads on the swatch; standalone usage falls back to `leafOf(path)`.
115
+ */
116
+ declare function ColorSwatch({
117
+ path,
118
+ token,
119
+ cssVar,
120
+ colorFormat,
121
+ options
122
+ }: ColorSwatchProps): ReactElement;
123
+ //#endregion
239
124
  //#region src/indicators/resolve.d.ts
240
125
  /** The individually-toggleable indicators in the row strip. `alias` covers the whole alias unit (forward chain + reverse count). */
241
126
  type IndicatorName = 'alias' | 'variance' | 'gamut' | 'deprecation' | 'description' | 'composes';
@@ -303,6 +188,12 @@ interface ColorTableProps {
303
188
  id?: string;
304
189
  /** Configure the per-row indicator strip. See `IndicatorsProp`. Gamut stays in the Value cell, so it is not part of this strip. */
305
190
  indicators?: IndicatorsProp;
191
+ /**
192
+ * Highest-precedence color format for this table's values, overriding
193
+ * an outer `ColorFormatContext` and the project's `defaultColorFormat`.
194
+ * Omit to inherit the existing precedence chain (see `useColorFormat`).
195
+ */
196
+ colorFormat?: ColorFormat;
306
197
  }
307
198
  /**
308
199
  * A grouped, searchable table of `$type: color` tokens. Suffix-matched
@@ -319,7 +210,8 @@ declare function ColorTable({
319
210
  onSelect,
320
211
  variants,
321
212
  id,
322
- indicators
213
+ indicators,
214
+ colorFormat
323
215
  }: ColorTableProps): ReactElement;
324
216
  //#endregion
325
217
  //#region src/Diagnostics.d.ts
@@ -344,22 +236,14 @@ declare function Diagnostics({
344
236
  //#region src/dimension-scale/DimensionSample.d.ts
345
237
  /** The visual treatment for a dimension sample: a length bar, a radius square, or a sized square. */
346
238
  type DimensionVisual = 'length' | 'radius' | 'size';
347
- /** Props for the connected {@link DimensionSample} block. */
348
- interface DimensionSampleProps {
349
- /** Full dot-path of the dimension token to preview. */
350
- path: string;
351
- /**
352
- * Visualization kind:
353
- * - `'length'` (default): horizontal bar whose width equals the token's dimension.
354
- * - `'radius'`: 56×56 square with the token applied as `border-radius`.
355
- * - `'size'`: a square sized to the token's dimension.
356
- */
357
- visual?: DimensionVisual;
358
- }
359
- /** Connected block: resolves `path` against the active project and renders its dimension sample. */
239
+ /** Props for the connected {@link DimensionSample} block. `options.visual` selects the visualization kind (see {@link DimensionVisual}); defaults to `'length'`. */
240
+ type DimensionSampleProps = PresenterProps<'dimension'>;
241
+ /** Connected block: renders a realised dimension token's sample, capped for oversized values. */
360
242
  declare function DimensionSample({
361
- path,
362
- visual
243
+ token,
244
+ cssVar,
245
+ colorFormat,
246
+ options
363
247
  }: DimensionSampleProps): ReactElement;
364
248
  //#endregion
365
249
  //#region src/DimensionScale.d.ts
@@ -425,6 +309,20 @@ declare function FontFamilyPreview({
425
309
  sortDir
426
310
  }: FontFamilyPreviewProps): ReactElement;
427
311
  //#endregion
312
+ //#region src/presenters/FontFamilySpecimen.d.ts
313
+ /** Props for the {@link FontFamilySpecimen} presenter. `options.sample` overrides the rendered sample text; defaults to a pangram. */
314
+ type FontFamilySpecimenProps = PresenterProps<'fontFamily'>;
315
+ /**
316
+ * Presenter for `$type: fontFamily` tokens: path, resolved stack, a sample
317
+ * line styled per R3, and the css var in use.
318
+ */
319
+ declare function FontFamilySpecimen({
320
+ path,
321
+ token,
322
+ cssVar,
323
+ options
324
+ }: FontFamilySpecimenProps): ReactElement;
325
+ //#endregion
428
326
  //#region src/FontWeightScale.d.ts
429
327
  interface FontWeightScaleProps {
430
328
  /**
@@ -454,6 +352,20 @@ declare function FontWeightScale({
454
352
  sortDir
455
353
  }: FontWeightScaleProps): ReactElement;
456
354
  //#endregion
355
+ //#region src/presenters/FontWeightSpecimen.d.ts
356
+ /** Props for the {@link FontWeightSpecimen} presenter. `options.sample` overrides the rendered sample text; defaults to `'Aa'`. */
357
+ type FontWeightSpecimenProps = PresenterProps<'fontWeight'>;
358
+ /**
359
+ * Presenter for `$type: fontWeight` tokens: path, the raw weight value, a
360
+ * sample glyph styled per R3, and the css var in use.
361
+ */
362
+ declare function FontWeightSpecimen({
363
+ path,
364
+ token,
365
+ cssVar,
366
+ options
367
+ }: FontWeightSpecimenProps): ReactElement;
368
+ //#endregion
457
369
  //#region src/GradientPalette.d.ts
458
370
  interface GradientPaletteProps {
459
371
  /**
@@ -471,32 +383,63 @@ interface GradientPaletteProps {
471
383
  sortBy?: SortBy;
472
384
  /** `'asc'` (default) or `'desc'`. */
473
385
  sortDir?: SortDir;
386
+ /**
387
+ * Highest-precedence color format for this palette's values, overriding
388
+ * an outer `ColorFormatContext` and the project's `defaultColorFormat`.
389
+ * Omit to inherit the existing precedence chain (see `useColorFormat`).
390
+ */
391
+ colorFormat?: ColorFormat;
474
392
  }
475
393
  declare function GradientPalette({
476
394
  filter,
477
395
  caption,
478
396
  sortBy,
479
- sortDir
397
+ sortDir,
398
+ colorFormat
480
399
  }: GradientPaletteProps): ReactElement;
481
400
  //#endregion
401
+ //#region src/presenters/GradientSwatch.d.ts
402
+ /** Props for the {@link GradientSwatch} presenter. */
403
+ type GradientSwatchProps = PresenterProps<'gradient'>;
404
+ /**
405
+ * Presenter for `$type: gradient` tokens: a gradient chip. Unlike the
406
+ * other composite presenters, a gradient's css var (per Terrazzo's
407
+ * `transformGradient`) resolves to a bare `<color> <pct>, ...` stop list,
408
+ * not a complete property value: DTCG gradients carry no direction, so
409
+ * both branches need one supplied at render time. `90deg` (`to right`)
410
+ * matches the direction the standalone block previously hard-coded.
411
+ */
412
+ declare function GradientSwatch({
413
+ token,
414
+ cssVar,
415
+ colorFormat
416
+ }: GradientSwatchProps): ReactElement;
417
+ //#endregion
482
418
  //#region src/motion-preview/MotionSample.d.ts
483
419
  type MotionSpeed = 0.25 | 0.5 | 1 | 2;
484
- interface MotionSampleProps {
485
- /** Full dot-path of the motion token (`transition`, `duration`, or `cubicBezier`). */
486
- path: string;
487
- /** Playback speed multiplier. Defaults to `1`. */
488
- speed?: MotionSpeed;
489
- /**
490
- * Change this value to force the animation to restart. Useful when an
491
- * outer block exposes a "replay" button that should re-trigger every
492
- * sample at once.
493
- */
494
- runKey?: number;
495
- }
420
+ /**
421
+ * Props for the connected {@link MotionSample} block. `token` accepts any
422
+ * of the three motion `$type`s (`transition`, `duration`, `cubicBezier`) —
423
+ * looser than a single-type `PresenterProps<'transition'>` because
424
+ * `resolveMotionSpec` dispatches on the realised `$type` at runtime and
425
+ * TokenNavigator/MotionPreview feed it all three from one call site.
426
+ * `options.speed` is the playback speed multiplier (defaults to `1`);
427
+ * `options.runKey` forces the animation to restart when changed, e.g. from
428
+ * an outer block's "replay" button re-triggering every sample at once.
429
+ */
430
+ type MotionSampleProps = PresenterProps;
431
+ /**
432
+ * Connected block: renders a realised motion token's animated sample. Both
433
+ * `durationMs` and `easing` come from the realised `$value`; the ball's
434
+ * setInterval loop needs a JS-readable duration, and (see the comment below)
435
+ * `cssVar` cannot stand in for `easing` here. `cssVar` is still accepted, per
436
+ * the uniform `PresenterProps` contract every presenter shares, but this
437
+ * View has nowhere safe to apply it.
438
+ */
496
439
  declare function MotionSample({
497
- path,
498
- speed,
499
- runKey
440
+ token,
441
+ cssVar: _cssVar,
442
+ options
500
443
  }: MotionSampleProps): ReactElement;
501
444
  //#endregion
502
445
  //#region src/MotionPreview.d.ts
@@ -569,81 +512,71 @@ declare function OpacityScale({
569
512
  sortDir
570
513
  }: OpacityScaleProps): ReactElement;
571
514
  //#endregion
572
- //#region src/internal/channel-globals.d.ts
573
- /**
574
- * Shared subscription to Storybook's globals channel, lifted out of React
575
- * component state so the values survive docs-mode remounts.
576
- *
577
- * On MDX docs pages, Storybook force-rerenders the docs container on every
578
- * `updateGlobals` (see `preview/runtime.js` → `onUpdateGlobals`), which
579
- * unmounts and remounts any embedded blocks. A `useState(null)` initializer
580
- * inside the block would reset to null on each remount — the symptom is a
581
- * one-frame flicker to the correct value, then revert to the defaults.
582
- * Module-level state persists; React reads it through `useSyncExternalStore`
583
- * and stays concurrent-safe.
584
- */
585
- interface ChannelGlobals {
586
- axes: Record<string, string> | null;
587
- format: ColorFormat | null;
588
- }
589
- declare function useChannelGlobals(): ChannelGlobals;
590
- //#endregion
591
- //#region src/internal/channel.d.ts
592
- /**
593
- * Host adapter API — a distinct tier from the components/hooks/
594
- * `SwatchbookProvider` surface that MDX/story authors use. This is how a
595
- * host (Storybook's addon, or an alternative embedding) injects live data
596
- * into blocks without blocks depending on that host. Most consumers never
597
- * touch this; it exists for whoever builds the next integration.
598
- *
599
- * Minimal event-source contract blocks need from their host. Storybook's
600
- * preview Channel satisfies it structurally; a plain emitter or a test double
601
- * does too. Blocks never import `storybook/preview-api` — the addon, which
602
- * owns the Storybook relationship, injects the channel at preview init via
603
- * {@link registerChannel}, mirroring how `registerTokenSource` injects the
604
- * initial token snapshot.
605
- */
606
- interface BlockChannel {
607
- on<T>(event: string, listener: (payload: T) => void): void;
608
- }
515
+ //#region src/presenters/OpacitySwatch.d.ts
609
516
  /**
610
- * Host adapter API. The single most load-bearing function in the host
611
- * contract the addon calls it once at preview init.
612
- *
613
- * Inject the host channel. Runs any subscribers that queued before the
614
- * channel existed, then clears the queue. The host contract does NOT dedupe:
615
- * on HMR a subscriber's module re-runs {@link onChannel}, which re-attaches
616
- * immediately once the channel is set, so each subscriber MUST guard its own
617
- * attach to stay single-wired.
517
+ * Props for the {@link OpacitySwatch} presenter. `options.sampleColorVar`
518
+ * sets the chip's fill color (a resolved css var or literal); defaults to
519
+ * the swatchbook accent surface.
618
520
  */
619
- declare function registerChannel(next: BlockChannel): void;
521
+ type OpacitySwatchProps = PresenterProps<'number'>;
620
522
  /**
621
- * Host adapter API see {@link registerChannel}.
622
- *
623
- * Attach a subscriber to the host channel now if one is registered, else queue
624
- * it to run the moment {@link registerChannel} fires. Blocks call this at
625
- * module load; the queue absorbs the gap until the addon injects the channel.
523
+ * Presenter for `$type: number` opacity tokens: a colored chip over a
524
+ * checkerboard backdrop, with the chip's `opacity` set from the token per
525
+ * R3. The number alone (`0.4`) doesn't convey what the token looks like
526
+ * applied to a surface; the chip does.
626
527
  */
627
- declare function onChannel(attach: (channel: BlockChannel) => void): void;
528
+ declare function OpacitySwatch({
529
+ token,
530
+ cssVar,
531
+ options
532
+ }: OpacitySwatchProps): ReactElement;
628
533
  //#endregion
629
534
  //#region src/provider.d.ts
630
535
  interface SwatchbookProviderProps {
631
- value: ProjectSnapshot;
536
+ snapshot: SnapshotForWire;
537
+ /** Controlled active tuple. Mutually exclusive with `defaultAxes`. */
538
+ axes?: Record<string, string> | undefined;
539
+ /** Uncontrolled initial tuple; the provider owns state and `useSetAxes` flips it. */
540
+ defaultAxes?: Record<string, string> | undefined;
541
+ /** Overrides merged over {@link DEFAULT_PRESENTERS} for this subtree. */
542
+ presenters?: PresenterRegistry | undefined;
543
+ /**
544
+ * Mount the snapshot's emitted CSS into `document.head` through the shared
545
+ * managed style element (default `true`). Pass `false` when the host places
546
+ * the stylesheet itself: SSR frameworks, shadow roots, the Storybook addon
547
+ * (which injects its own combined stylesheet). The element is shared by ID,
548
+ * so a page hosting providers with different snapshots should opt out and
549
+ * manage stylesheets itself; same-snapshot providers are idempotent.
550
+ */
551
+ mountCss?: boolean | undefined;
632
552
  children: ReactNode;
633
553
  }
634
554
  /**
635
- * Wraps a tree of blocks with the token data they need to render.
555
+ * Wraps a tree of blocks with the token data they need to render, assembled
556
+ * from core's wire snapshot plus an active axis tuple.
636
557
  *
637
- * The Storybook addon's preview decorator mounts this automatically, so
638
- * story/MDX authors typically never see it. Outside Storybook — unit
639
- * tests, custom React apps, non-Storybook doc sites — consumers construct
640
- * a {@link ProjectSnapshot} (often imported from a JSON file) and wrap
641
- * their blocks in this provider.
558
+ * The Storybook addon's preview decorator mounts this automatically
559
+ * (`axes` controlled by the toolbar), so story/MDX authors typically never
560
+ * see it. Outside Storybook: unit tests, custom React apps, non-Storybook
561
+ * doc sites. Consumers pass a {@link SnapshotForWire} (often imported from
562
+ * a JSON file) and either drive `axes` themselves or let the provider own
563
+ * the tuple via `defaultAxes` + {@link useSetAxes}.
642
564
  */
643
565
  declare function SwatchbookProvider({
644
- value,
566
+ snapshot,
567
+ axes,
568
+ defaultAxes,
569
+ presenters,
570
+ mountCss,
645
571
  children
646
572
  }: SwatchbookProviderProps): ReactElement;
573
+ /**
574
+ * Flip the active tuple on an uncontrolled {@link SwatchbookProvider}
575
+ * (mounted with `defaultAxes`, not `axes`). Throws when the nearest
576
+ * provider is controlled (the host owns `axes`) or absent, since there's
577
+ * no internal state to flip in either case.
578
+ */
579
+ declare function useSetAxes(): (tuple: Record<string, string>) => void;
647
580
  /**
648
581
  * Read the current {@link ProjectSnapshot}. Throws if called outside a
649
582
  * {@link SwatchbookProvider}; blocks that need to fall back to the
@@ -651,66 +584,6 @@ declare function SwatchbookProvider({
651
584
  */
652
585
  declare function useSwatchbookData(): ProjectSnapshot;
653
586
  //#endregion
654
- //#region src/internal/channel-tokens.d.ts
655
- /**
656
- * Host adapter API — same integration tier as {@link BlockChannel} /
657
- * {@link registerChannel} / {@link onChannel}, distinct from the
658
- * components/hooks/`SwatchbookProvider` surface MDX/story authors use.
659
- * Most consumers never touch this; it exists for whoever builds the next
660
- * host integration.
661
- *
662
- * Live token snapshot backed by the addon's preview dev-time HMR event.
663
- *
664
- * The initial snapshot is *injected* by the addon preview via
665
- * {@link registerTokenSource} rather than imported from the addon's
666
- * `virtual:swatchbook/tokens` build artifact — so blocks carries no
667
- * dependency on that module and imports cleanly standalone (outside
668
- * Storybook, in unit tests, in the docs site). Until something registers
669
- * a source, blocks render from empty defaults.
670
- *
671
- * For dev-time updates this module subscribes to `TOKENS_UPDATED_EVENT`
672
- * on Storybook's channel (which the addon preview re-broadcasts from its
673
- * own HMR listener) and exposes the latest snapshot via
674
- * `useSyncExternalStore`, so hooks re-render in place on each token save.
675
- */
676
- declare const TOKENS_UPDATED_EVENT = "swatchbook/tokens-updated";
677
- /** Host adapter API — see {@link registerTokenSource}. */
678
- interface TokenSnapshot {
679
- readonly axes: readonly VirtualAxisShape[];
680
- readonly presets: readonly {
681
- name: string;
682
- axes: Partial<Record<string, string>>;
683
- description?: string;
684
- }[];
685
- readonly diagnostics: readonly VirtualDiagnosticShape[];
686
- readonly css: string;
687
- readonly cssVarPrefix: string;
688
- /** Project-wide baseline for the row-indicator strip from `config.indicators`. */
689
- readonly indicators: Readonly<Record<string, boolean>>;
690
- readonly listing: Readonly<Record<string, VirtualTokenListing>>;
691
- readonly tokenGraph: VirtualTokenGraph;
692
- readonly defaultTuple: Record<string, string>;
693
- /** Monotonic counter, bumped on each update. Useful as a React key. */
694
- readonly version: number;
695
- }
696
- /**
697
- * Host adapter API — same integration tier as {@link registerChannel}.
698
- *
699
- * Seed the initial token snapshot. The addon preview calls this once at
700
- * init with the build-time `virtual:swatchbook/tokens` data. Keeping the
701
- * virtual-module read on the addon side (the package that owns it) lets
702
- * blocks import cleanly without it. No-op fields fall back to the current
703
- * snapshot, so a partial source is safe.
704
- */
705
- declare function registerTokenSource(source: Partial<TokenSnapshot>): void;
706
- /**
707
- * Host adapter API — same integration tier as {@link registerChannel}. Most
708
- * consumers read project data through `useSwatchbookData()` /
709
- * `SwatchbookProvider` instead; this is the internal subscription
710
- * `useProject()`'s fallback path uses to read the live channel-fed snapshot.
711
- */
712
- declare function useTokenSnapshot(): TokenSnapshot;
713
- //#endregion
714
587
  //#region src/ShadowPreview.d.ts
715
588
  interface ShadowPreviewProps {
716
589
  /**
@@ -728,23 +601,43 @@ interface ShadowPreviewProps {
728
601
  sortBy?: SortBy;
729
602
  /** `'asc'` (default) or `'desc'`. */
730
603
  sortDir?: SortDir;
604
+ /**
605
+ * Highest-precedence color format for this preview's values, overriding
606
+ * an outer `ColorFormatContext` and the project's `defaultColorFormat`.
607
+ * Omit to inherit the existing precedence chain (see `useColorFormat`).
608
+ */
609
+ colorFormat?: ColorFormat;
731
610
  }
732
611
  declare function ShadowPreview({
733
612
  filter,
734
613
  caption,
735
614
  sortBy,
736
- sortDir
615
+ sortDir,
616
+ colorFormat
737
617
  }: ShadowPreviewProps): ReactElement;
738
618
  //#endregion
739
619
  //#region src/shadow-preview/ShadowSample.d.ts
740
- interface ShadowSampleProps {
741
- /** Full dot-path of the shadow token to preview. */
742
- path: string;
743
- }
620
+ /** Props for the connected {@link ShadowSample} block. */
621
+ type ShadowSampleProps = PresenterProps<'shadow'>;
744
622
  declare function ShadowSample({
745
- path
623
+ token,
624
+ cssVar,
625
+ colorFormat
746
626
  }: ShadowSampleProps): ReactElement;
747
627
  //#endregion
628
+ //#region src/presenters/StrokeSample.d.ts
629
+ /** Props for the {@link StrokeSample} presenter. */
630
+ type StrokeSampleProps = PresenterProps<'strokeStyle'>;
631
+ /**
632
+ * Presenter for `$type: strokeStyle` tokens: a line styled with the
633
+ * token's `border-top-style` per R3, or the object-form fallback message
634
+ * when `$value` is a dash pattern with no pure CSS equivalent.
635
+ */
636
+ declare function StrokeSample({
637
+ token,
638
+ cssVar
639
+ }: StrokeSampleProps): ReactElement;
640
+ //#endregion
748
641
  //#region src/StrokeStylePreview.d.ts
749
642
  interface StrokeStylePreviewProps {
750
643
  /**
@@ -776,10 +669,18 @@ interface TokenDetailProps {
776
669
  path: string;
777
670
  /** Override the heading. Defaults to the path. */
778
671
  heading?: string;
672
+ /**
673
+ * Highest-precedence color format for this block's values, overriding
674
+ * an outer `ColorFormatContext` and the project's `defaultColorFormat`.
675
+ * Omit to inherit the existing precedence chain (see `useColorFormat`).
676
+ * Also governs the composed `CompositeBreakdown` / `AxisVariance` sub-parts.
677
+ */
678
+ colorFormat?: ColorFormat;
779
679
  }
780
680
  declare function TokenDetail({
781
681
  path,
782
- heading
682
+ heading,
683
+ colorFormat
783
684
  }: TokenDetailProps): ReactElement;
784
685
  //#endregion
785
686
  //#region src/token-detail/AliasChain.d.ts
@@ -804,18 +705,32 @@ declare function AliasedBy({
804
705
  interface AxisVarianceProps {
805
706
  /** Full dot-path of the token. */
806
707
  path: string;
708
+ /**
709
+ * Highest-precedence color format for this block's values, overriding
710
+ * an outer `ColorFormatContext` and the project's `defaultColorFormat`.
711
+ * Omit to inherit the existing precedence chain (see `useColorFormat`).
712
+ */
713
+ colorFormat?: ColorFormat;
807
714
  }
808
715
  declare function AxisVariance({
809
- path
716
+ path,
717
+ colorFormat
810
718
  }: AxisVarianceProps): ReactElement;
811
719
  //#endregion
812
720
  //#region src/token-detail/CompositeBreakdown.d.ts
813
721
  interface CompositeBreakdownProps {
814
722
  /** Full dot-path of the token. */
815
723
  path: string;
724
+ /**
725
+ * Highest-precedence color format for this block's values, overriding
726
+ * an outer `ColorFormatContext` and the project's `defaultColorFormat`.
727
+ * Omit to inherit the existing precedence chain (see `useColorFormat`).
728
+ */
729
+ colorFormat?: ColorFormat;
816
730
  }
817
731
  declare function CompositeBreakdown({
818
- path
732
+ path,
733
+ colorFormat
819
734
  }: CompositeBreakdownProps): ReactElement | null;
820
735
  //#endregion
821
736
  //#region src/token-detail/CompositePreview.d.ts
@@ -909,6 +824,13 @@ interface TokenNavigatorProps {
909
824
  id?: string;
910
825
  /** Configure the per-row indicator strip. See `IndicatorsProp`. */
911
826
  indicators?: IndicatorsProp;
827
+ /**
828
+ * Highest-precedence color format for this tree's values, overriding
829
+ * an outer `ColorFormatContext` and the project's `defaultColorFormat`.
830
+ * Omit to inherit the existing precedence chain (see `useColorFormat`).
831
+ * Also governs the composed row-detail `TokenDetail` slide-over.
832
+ */
833
+ colorFormat?: ColorFormat;
912
834
  }
913
835
  /**
914
836
  * A collapsible, searchable tree of tokens with roving-tabindex keyboard
@@ -922,7 +844,8 @@ declare function TokenNavigator({
922
844
  searchable,
923
845
  onSelect,
924
846
  id,
925
- indicators
847
+ indicators,
848
+ colorFormat
926
849
  }: TokenNavigatorProps): ReactElement;
927
850
  //#endregion
928
851
  //#region src/TokenTable.d.ts
@@ -967,6 +890,13 @@ interface TokenTableProps {
967
890
  id?: string;
968
891
  /** Configure the per-row indicator strip. See `IndicatorsProp`. */
969
892
  indicators?: IndicatorsProp;
893
+ /**
894
+ * Highest-precedence color format for this table's values, overriding
895
+ * an outer `ColorFormatContext` and the project's `defaultColorFormat`.
896
+ * Omit to inherit the existing precedence chain (see `useColorFormat`).
897
+ * Also governs the composed row-detail `TokenDetail` slide-over.
898
+ */
899
+ colorFormat?: ColorFormat;
970
900
  }
971
901
  /**
972
902
  * A sortable, searchable table of tokens. Click a row to inspect it in a
@@ -982,9 +912,24 @@ declare function TokenTable({
982
912
  searchable,
983
913
  onSelect,
984
914
  id,
985
- indicators
915
+ indicators,
916
+ colorFormat
986
917
  }: TokenTableProps): ReactElement;
987
918
  //#endregion
919
+ //#region src/presenters/TypeSpecimen.d.ts
920
+ /** Props for the connected {@link TypeSpecimen} block. `options.sample` overrides the rendered sample text; defaults to a pangram. */
921
+ type TypeSpecimenProps = PresenterProps<'typography'>;
922
+ /**
923
+ * Presenter for `$type: typography` tokens: a spec summary and a sample line
924
+ * styled per R3. Token identity (the path) is the consuming block's
925
+ * responsibility, not this presenter's; see `TypographyScale`.
926
+ */
927
+ declare function TypeSpecimen({
928
+ token,
929
+ cssVar: _cssVar,
930
+ options
931
+ }: TypeSpecimenProps): ReactElement;
932
+ //#endregion
988
933
  //#region src/TypographyScale.d.ts
989
934
  interface TypographyScaleProps {
990
935
  /**
@@ -1013,5 +958,5 @@ declare function TypographyScale({
1013
958
  sortDir
1014
959
  }: TypographyScaleProps): ReactElement;
1015
960
  //#endregion
1016
- export { AliasChain, type AliasChainProps, AliasedBy, type AliasedByProps, AxesContext, AxisVariance, type AxisVarianceProps, type BlockChannel, BorderPreview, type BorderPreviewProps, BorderSample, type BorderSampleProps, COLOR_FORMATS, type ChannelGlobals, type ColorFormat, ColorFormatContext, ColorPalette, type ColorPaletteProps, ColorTable, type ColorTableProps, CompositeBreakdown, type CompositeBreakdownProps, CompositePreview, type CompositePreviewProps, ConsumerOutput, type ConsumerOutputProps, Diagnostics, type DiagnosticsProps, DimensionSample, type DimensionSampleProps, DimensionScale, type DimensionScaleProps, type DimensionVisual, FontFamilyPreview, type FontFamilyPreviewProps, FontWeightScale, type FontWeightScaleProps, type FormatColorResult, GradientPalette, type GradientPaletteProps, type IndicatorName, type IndicatorsProp, MotionPreview, type MotionPreviewProps, MotionSample, type MotionSampleProps, type MotionSpeed, type NormalizedColor, OpacityScale, type OpacityScaleProps, type ProjectSnapshot, ShadowPreview, type ShadowPreviewProps, ShadowSample, type ShadowSampleProps, type SortBy, type SortDir, StrokeStylePreview, type StrokeStylePreviewProps, SwatchbookProvider, type SwatchbookProviderProps, TOKENS_UPDATED_EVENT, ThemeContext, TokenDetail, type TokenDetailProps, TokenHeader, type TokenHeaderProps, TokenNavigator, type TokenNavigatorProps, type TokenSnapshot, TokenTable, type TokenTableProps, TokenUsageSnippet, type TokenUsageSnippetProps, TypographyScale, type TypographyScaleProps, type VirtualAxisShape as VirtualAxis, type VirtualDiagnosticShape as VirtualDiagnostic, type VirtualPresetShape as VirtualPreset, type VirtualTokenShape as VirtualToken, type VirtualTokenGraph, type VirtualTokenListing, formatColor, onChannel, registerChannel, registerTokenSource, useActiveAxes, useActiveTheme, useChannelGlobals, useColorFormat, useOptionalSwatchbookData, useSwatchbookData, useTokenSnapshot };
961
+ export { AliasChain, type AliasChainProps, AliasedBy, type AliasedByProps, AxesContext, AxisVariance, type AxisVarianceProps, BorderPreview, type BorderPreviewProps, BorderSample, type BorderSampleProps, COLOR_FORMATS, type ColorFormat, ColorFormatContext, ColorPalette, type ColorPaletteProps, ColorSwatch, type ColorSwatchProps, ColorTable, type ColorTableProps, CompositeBreakdown, type CompositeBreakdownProps, CompositePreview, type CompositePreviewProps, ConsumerOutput, type ConsumerOutputProps, DEFAULT_PRESENTERS, Diagnostics, type DiagnosticsProps, DimensionSample, type DimensionSampleProps, DimensionScale, type DimensionScaleProps, type DimensionVisual, FontFamilyPreview, type FontFamilyPreviewProps, FontFamilySpecimen, type FontFamilySpecimenProps, FontWeightScale, type FontWeightScaleProps, FontWeightSpecimen, type FontWeightSpecimenProps, type FormatColorResult, GradientPalette, type GradientPaletteProps, GradientSwatch, type GradientSwatchProps, type IndicatorName, type IndicatorsProp, MotionPreview, type MotionPreviewProps, MotionSample, type MotionSampleProps, type MotionSpeed, type NormalizedColor, OpacityScale, type OpacityScaleProps, OpacitySwatch, type OpacitySwatchProps, type PresenterComponent, PresenterContext, type PresenterProps, type PresenterRegistry, type ProjectSnapshot, type RealisedToken, ShadowPreview, type ShadowPreviewProps, ShadowSample, type ShadowSampleProps, type SortBy, type SortDir, StrokeSample, type StrokeSampleProps, StrokeStylePreview, type StrokeStylePreviewProps, SwatchbookContext, SwatchbookProvider, type SwatchbookProviderProps, ThemeContext, TokenDetail, type TokenDetailProps, TokenHeader, type TokenHeaderProps, TokenNavigator, type TokenNavigatorProps, TokenTable, type TokenTableProps, type TokenType, TokenUsageSnippet, type TokenUsageSnippetProps, TypeSpecimen, type TypeSpecimenProps, TypographyScale, type TypographyScaleProps, type VirtualAxisShape as VirtualAxis, type VirtualDiagnosticShape as VirtualDiagnostic, type VirtualPresetShape as VirtualPreset, type VirtualTokenShape as VirtualToken, type VirtualTokenGraph, type VirtualTokenListing, formatColor, formatTokenValue, mergePresenters, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, usePresenter, useSetAxes, useSwatchbookData };
1017
962
  //# sourceMappingURL=index.d.mts.map