@unpunnyfuns/swatchbook-blocks 0.59.0 → 0.60.0

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as _$react from "react";
 import { ReactElement, ReactNode } from "react";
-import { Axis, AxisVarianceResult, Diagnostic, Preset, TupleKey } from "@unpunnyfuns/swatchbook-core";
+import { TokenGraph } from "@unpunnyfuns/swatchbook-core/graph";
+import { Axis, Diagnostic, Preset } from "@unpunnyfuns/swatchbook-core";
 import { SlimListedToken } from "@unpunnyfuns/swatchbook-core/snapshot-for-wire";
 
 //#region src/format-color.d.ts
@@ -101,20 +102,11 @@ interface VirtualTokenShape {
 type VirtualTokenListingShape = SlimListedToken;
 type VirtualPresetShape = Preset;
 /**
- * Wire shape of one `Project.jointOverrides` entry — same as core's
- * `JointOverride` but with the block's `VirtualTokenShape` for the
- * token values that ship over the wire.
+ * Wire shape of the token graph — aliased from core's authoritative
+ * `TokenGraph` so both the virtual module declaration and the React
+ * context stay aligned with the same definition.
  */
-interface VirtualJointOverrideShape {
-  axes: Record<string, string>;
-  tokens: Record<string, VirtualTokenShape>;
-}
-/**
- * Map from path → cached `AxisVarianceResult`. Snapshot carries this
- * so the `AxisVariance` block can O(1) look up which axes affect a
- * token instead of re-running variance analysis on every render.
- */
-type VirtualVarianceByPathShape = Record<string, AxisVarianceResult>;
+type VirtualTokenGraph = TokenGraph;
 /**
  * Full project data read by blocks. Populated by the addon's preview
  * decorator (from the virtual module) or constructed by hand in
@@ -139,35 +131,19 @@ interface ProjectSnapshot {
    */
   listing?: Readonly<Record<string, VirtualTokenListingShape>>;
   /**
-   * Per-axis cell maps — `cells[axis][context]` is the resolved token
-   * data for `{ ...defaults, [axis]: context }`. Bounded by
-   * `Σ(axes × contexts)` regardless of cartesian product size.
-   * Non-default cells store only the tokens whose value differs from
-   * the default-cell baseline (delta cells).
-   */
-  cells: Record<string, Record<string, Record<string, VirtualTokenShape>>>;
-  /**
-   * `Project.jointOverrides` flattened to entries for wire transport.
-   * Same ascending-arity iteration order the Map carries on the
-   * server side. Empty array when no joint divergences exist.
-   */
-  jointOverrides: readonly (readonly [TupleKey, VirtualJointOverrideShape])[];
-  /**
-   * Cached per-path variance results. Blocks read this for O(1) axis
-   * variance lookup instead of recomputing on each render.
+   * Pre-built token graph for the project. JSON-serializable; nodes
+   * carry per-axis writes plus alias edges. The blocks hook backs
+   * `resolveAt` and variance from this graph.
    */
-  varianceByPath?: VirtualVarianceByPathShape;
+  tokenGraph?: VirtualTokenGraph;
   /** The default tuple — `{ axis: axis.default }` for every axis. */
   defaultTuple: Record<string, string>;
   /**
    * Pre-built `resolveAt(tuple)` accessor. The addon's preview
-   * decorator instantiates this once per iframe lifetime — the
-   * underlying virtual-module exports (cells, jointOverrides, axes,
-   * defaultTuple) are stable, so a single resolver instance with
-   * internal per-tuple memoization is correct and avoids the
-   * per-render rebuild dance the blocks side used to do. Hand-built
+   * decorator instantiates this once per iframe lifetime, backed by
+   * `resolveAllAt` over the stable `tokenGraph` export. Hand-built
    * snapshots (tests, MDX) can omit this; blocks fall back to
-   * building locally from `cells` / `permutationsResolved`.
+   * building a graph-backed resolver from `tokenGraph`.
    */
   resolveAt?: (tuple: Record<string, string>) => Record<string, VirtualTokenShape>;
 }
@@ -883,5 +859,5 @@ declare function TypographyScale({
   sortDir
 }: TypographyScaleProps): ReactElement;
 //#endregion
-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, ColorTable, type ColorTableProps, CompositeBreakdown, type CompositeBreakdownProps, CompositePreview, type CompositePreviewProps, ConsumerOutput, type ConsumerOutputProps, Diagnostics, type DiagnosticsProps, DimensionBar, type DimensionBarProps, type DimensionKind, DimensionScale, type DimensionScaleProps, FontFamilySample, type FontFamilySampleProps, FontWeightScale, type FontWeightScaleProps, type FormatColorResult, GradientPalette, type GradientPaletteProps, MotionPreview, type MotionPreviewProps, MotionSample, type MotionSampleProps, type MotionSpeed, type NormalizedColor, OpacityScale, type OpacityScaleProps, type ProjectSnapshot, ShadowPreview, type ShadowPreviewProps, ShadowSample, type ShadowSampleProps, StrokeStyleSample, type StrokeStyleSampleProps, SwatchbookContext, SwatchbookProvider, type SwatchbookProviderProps, ThemeContext, TokenDetail, type TokenDetailProps, TokenHeader, type TokenHeaderProps, TokenNavigator, type TokenNavigatorProps, TokenTable, type TokenTableProps, TokenUsageSnippet, type TokenUsageSnippetProps, TypographyScale, type TypographyScaleProps, type VirtualAxisShape as VirtualAxis, type VirtualAxisShape, type VirtualDiagnosticShape as VirtualDiagnostic, type VirtualDiagnosticShape, type VirtualPresetShape as VirtualPreset, type VirtualPresetShape, type VirtualTokenShape as VirtualToken, type VirtualTokenShape, type VirtualTokenListingShape, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
+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, ColorTable, type ColorTableProps, CompositeBreakdown, type CompositeBreakdownProps, CompositePreview, type CompositePreviewProps, ConsumerOutput, type ConsumerOutputProps, Diagnostics, type DiagnosticsProps, DimensionBar, type DimensionBarProps, type DimensionKind, DimensionScale, type DimensionScaleProps, FontFamilySample, type FontFamilySampleProps, FontWeightScale, type FontWeightScaleProps, type FormatColorResult, GradientPalette, type GradientPaletteProps, MotionPreview, type MotionPreviewProps, MotionSample, type MotionSampleProps, type MotionSpeed, type NormalizedColor, OpacityScale, type OpacityScaleProps, type ProjectSnapshot, ShadowPreview, type ShadowPreviewProps, ShadowSample, type ShadowSampleProps, StrokeStyleSample, type StrokeStyleSampleProps, SwatchbookContext, SwatchbookProvider, type SwatchbookProviderProps, ThemeContext, TokenDetail, type TokenDetailProps, TokenHeader, type TokenHeaderProps, TokenNavigator, type TokenNavigatorProps, TokenTable, type TokenTableProps, TokenUsageSnippet, type TokenUsageSnippetProps, TypographyScale, type TypographyScaleProps, type VirtualAxisShape as VirtualAxis, type VirtualAxisShape, type VirtualDiagnosticShape as VirtualDiagnostic, type VirtualDiagnosticShape, type VirtualPresetShape as VirtualPreset, type VirtualPresetShape, type VirtualTokenShape as VirtualToken, type VirtualTokenShape, type VirtualTokenGraph, type VirtualTokenListingShape, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -2,12 +2,12 @@ import './style.css';
 import Color from "colorjs.io";
 import { createContext, memo, useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { buildResolveAt } from "@unpunnyfuns/swatchbook-core/resolve-at";
+import { getVariance, listPaths, resolveAllAt } from "@unpunnyfuns/swatchbook-core/graph";
 import { makeCssVar } from "@unpunnyfuns/swatchbook-core/css-var";
 import { SWATCHBOOK_STYLE_ELEMENT_ID, ensureStyleElement } from "@unpunnyfuns/swatchbook-core/style-element";
 import { tupleToName } from "@unpunnyfuns/swatchbook-core/themes";
 import { addons } from "storybook/preview-api";
-import { axes, cells, css, cssVarPrefix, defaultTuple, diagnostics, jointOverrides, listing, presets, varianceByPath } from "virtual:swatchbook/tokens";
+import { axes, css, cssVarPrefix, defaultTuple, diagnostics, listing, presets, tokenGraph } from "virtual:swatchbook/tokens";
 import { dataAttr } from "@unpunnyfuns/swatchbook-core/data-attr";
 import { matchPath } from "@unpunnyfuns/swatchbook-core/match-path";
 import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
@@ -342,9 +342,7 @@ let snapshot = {
 	css,
 	cssVarPrefix,
 	listing: listing ?? {},
-	cells: cells ?? {},
-	jointOverrides: jointOverrides ?? [],
-	varianceByPath: varianceByPath ?? {},
+	tokenGraph,
 	defaultTuple: defaultTuple ?? {},
 	version: 0
 };
@@ -361,9 +359,7 @@ function ensureSubscribed() {
 			css: payload.css ?? snapshot.css,
 			cssVarPrefix: payload.cssVarPrefix ?? snapshot.cssVarPrefix,
 			listing: payload.listing ?? snapshot.listing,
-			cells: payload.cells ?? snapshot.cells,
-			jointOverrides: payload.jointOverrides ?? snapshot.jointOverrides,
-			varianceByPath: payload.varianceByPath ?? snapshot.varianceByPath,
+			tokenGraph: payload.tokenGraph ?? snapshot.tokenGraph,
 			defaultTuple: payload.defaultTuple ?? snapshot.defaultTuple,
 			version: snapshot.version + 1
 		};
@@ -395,31 +391,27 @@ function defaultTuple$1(axes) {
 	return out;
 }
 /**
-* Reconstruct a `resolveAt` accessor from snapshot data. Both `cells`
-* and `jointOverrides` ship as plain JSON in the same shape core uses
-* internally — no Map reconstruction at the boundary. Stable identity
-* across calls with the same snapshot — `useMemo` keyed on the
-* snapshot fields produces a referentially stable function.
+* Build a `resolveAt` accessor backed by the token graph. Returns an
+* empty resolver when no graph is present (test stubs, partial
+* snapshots). Stable identity when memoized on `tokenGraph` — the
+* graph is a module-level virtual-module export so its reference stays
+* constant for the lifetime of the iframe.
 */
-function makeResolveAt(snapshot) {
-	const cells = snapshot.cells ?? {};
-	const jointOverrides = snapshot.jointOverrides ?? [];
-	const defaults = snapshot.defaultTuple ?? defaultTuple$1(snapshot.axes);
-	const resolver = buildResolveAt(snapshot.axes, cells, jointOverrides, defaults);
-	return (tuple) => resolver(tuple);
+function makeResolveAt(graph) {
+	if (!graph) return () => ({});
+	return (tuple) => resolveAllAt(graph, tuple);
 }
 /**
 * Build the `resolveAt` accessor for a snapshot. Prefers the
 * snapshot's own `resolveAt` (the addon's preview decorator
 * pre-builds one at module load — see `previewResolveAt` in
-* `packages/addon/src/preview.tsx`), otherwise composes one from
-* `cells` + `jointOverrides` via `makeResolveAt`. Hand-built
-* snapshots should provide both via the test `withCellsShape`
-* helper or by populating the fields directly.
+* `packages/addon/src/preview.tsx`), otherwise builds one from
+* `tokenGraph`. Hand-built snapshots can omit `resolveAt`;
+* the graph-backed fallback covers them.
 */
 function snapshotResolveAt(snapshot) {
 	if (snapshot.resolveAt) return snapshot.resolveAt;
-	return makeResolveAt(snapshot);
+	return makeResolveAt(snapshot.tokenGraph);
 }
 /**
 * Reads project data either from a mounted {@link SwatchbookProvider}
@@ -436,25 +428,22 @@ function snapshotResolveAt(snapshot) {
 function useProject() {
 	const snapshot = useOptionalSwatchbookData();
 	const axes = snapshot?.axes;
-	const cells = snapshot?.cells;
-	const jointOverrides = snapshot?.jointOverrides;
-	const dataDefaultTuple = snapshot?.defaultTuple;
 	const activeAxes = snapshot?.activeAxes;
 	const activeTheme = snapshot?.activeTheme;
 	const diagnostics = snapshot?.diagnostics;
 	const cssVarPrefix = snapshot?.cssVarPrefix;
 	const listing = snapshot?.listing;
-	const varianceByPath = snapshot?.varianceByPath;
+	const tokenGraph = snapshot?.tokenGraph;
 	const resolveAt = useMemo(() => {
 		if (!snapshot) return null;
 		return snapshotResolveAt(snapshot);
-	}, [
-		axes,
-		cells,
-		jointOverrides,
-		dataDefaultTuple,
-		activeTheme
-	]);
+	}, [tokenGraph, activeTheme]);
+	const derivedVarianceByPath = useMemo(() => {
+		if (!tokenGraph) return {};
+		const out = {};
+		for (const path of listPaths(tokenGraph)) out[path] = getVariance(tokenGraph, path);
+		return out;
+	}, [tokenGraph]);
 	const providerData = useMemo(() => {
 		if (!snapshot || !resolveAt || !axes || !activeAxes) return null;
 		return {
@@ -465,22 +454,26 @@ function useProject() {
 			diagnostics: diagnostics ?? [],
 			cssVarPrefix: cssVarPrefix ?? "",
 			listing: listing ?? {},
-			varianceByPath: varianceByPath ?? {},
+			varianceByPath: derivedVarianceByPath,
+			tokenGraph: tokenGraph ?? {
+				nodes: {},
+				axes: [],
+				axisDefaults: {},
+				axisContexts: {}
+			},
 			resolveAt
 		};
 	}, [
 		snapshot,
 		resolveAt,
 		axes,
-		cells,
-		jointOverrides,
-		dataDefaultTuple,
 		activeTheme,
 		activeAxes,
 		diagnostics,
 		cssVarPrefix,
 		listing,
-		varianceByPath
+		derivedVarianceByPath,
+		tokenGraph
 	]);
 	const fallback = useVirtualModuleFallback(snapshot === null);
 	return providerData ?? fallback;
@@ -509,17 +502,14 @@ function useVirtualModuleFallback(enabled) {
 		tokens.axes
 	]);
 	const activeTheme = contextPermutation || tupleToName(tokens.axes, activeAxes);
-	const resolveAt = useMemo(() => makeResolveAt({
-		axes: tokens.axes,
-		cells: tokens.cells,
-		jointOverrides: tokens.jointOverrides,
-		defaultTuple: tokens.defaultTuple
-	}), [
-		tokens.axes,
-		tokens.cells,
-		tokens.jointOverrides,
-		tokens.defaultTuple
-	]);
+	const resolveAt = useMemo(() => makeResolveAt(tokens.tokenGraph), [tokens.tokenGraph]);
+	const fallbackVarianceByPath = useMemo(() => {
+		const graph = tokens.tokenGraph;
+		if (!graph) return {};
+		const out = {};
+		for (const path of listPaths(graph)) out[path] = getVariance(graph, path);
+		return out;
+	}, [tokens.tokenGraph]);
 	return useMemo(() => ({
 		activeTheme,
 		activeAxes,
@@ -528,7 +518,8 @@ function useVirtualModuleFallback(enabled) {
 		diagnostics: tokens.diagnostics,
 		cssVarPrefix: tokens.cssVarPrefix,
 		listing: tokens.listing,
-		varianceByPath: tokens.varianceByPath,
+		varianceByPath: fallbackVarianceByPath,
+		tokenGraph: tokens.tokenGraph,
 		resolveAt
 	}), [
 		activeTheme,
@@ -537,7 +528,8 @@ function useVirtualModuleFallback(enabled) {
 		tokens.diagnostics,
 		tokens.cssVarPrefix,
 		tokens.listing,
-		tokens.varianceByPath,
+		fallbackVarianceByPath,
+		tokens.tokenGraph,
 		resolveAt
 	]);
 }