@unpunnyfuns/swatchbook-blocks 1.1.0 → 1.2.0

package/dist/index.mjs

@@ -95,57 +95,6 @@ function useChannelGlobals() {
 	return useSyncExternalStore(subscribe$2, getSnapshot$1, getServerSnapshot$1);
 }
 //#endregion
-//#region src/contexts.ts
-/**
-* Context carrying the full {@link ProjectSnapshot}. `null` sentinel lets
-* `useSwatchbookData()` tell "provider present" from "fall back to the
-* virtual module".
-*/
-const SwatchbookContext = createContext(null);
-function useOptionalSwatchbookData() {
-	return useContext(SwatchbookContext);
-}
-/**
-* Active swatchbook theme for the current story/docs render. Populated by
-* the addon's preview decorator and consumed by `useToken` + any future
-* consumer hooks.
-*
-* This runs through plain React context rather than Storybook's
-* `useGlobals` so the same hook works in autodocs / MDX renders where the
-* preview-hooks context isn't available.
-*/
-const ThemeContext = createContext("");
-function useActiveTheme() {
-	return useContext(ThemeContext);
-}
-/**
-* Active axis tuple for the current story/docs render — `Record<axisName,
-* contextName>`. Derived from the same input as {@link ThemeContext}; split
-* out so consumers needing per-axis info (toolbar, panel, tuple-aware
-* blocks) don't have to reparse the composed theme name.
-*/
-const AxesContext = createContext({});
-function useActiveAxes() {
-	return useContext(AxesContext);
-}
-/**
-* Active color-display format for the current story/docs render. Populated
-* by the addon's preview decorator from the `swatchbookColorFormat` global
-* (per-story `globals` or toolbar dropdown) and consumed by blocks that
-* render color-token values. Emitted CSS is unaffected.
-*
-* Runs through plain React context rather than Storybook's `useGlobals` so
-* per-story seeded globals flow through on first render and the same hook
-* is safe to call from MDX doc blocks (where the preview-hooks context
-* isn't available).
-*/
-const ColorFormatContext = createContext(null);
-function useColorFormat() {
-	const contextValue = useContext(ColorFormatContext);
-	const channelGlobals = useChannelGlobals();
-	return contextValue ?? channelGlobals.format ?? "hex";
-}
-//#endregion
 //#region src/internal/channel-tokens.ts
 /**
 * Host adapter API — same integration tier as {@link BlockChannel} /
@@ -184,6 +133,7 @@ let snapshot = {
 		axisContexts: {}
 	},
 	defaultTuple: {},
+	defaultColorFormat: "hex",
 	version: 0
 };
 const listeners = /* @__PURE__ */ new Set();
@@ -199,6 +149,7 @@ function applyPatch(patch) {
 		listing: patch.listing ?? snapshot.listing,
 		tokenGraph: patch.tokenGraph ?? snapshot.tokenGraph,
 		defaultTuple: patch.defaultTuple ?? snapshot.defaultTuple,
+		defaultColorFormat: patch.defaultColorFormat ?? snapshot.defaultColorFormat,
 		version: snapshot.version + 1
 	};
 	for (const cb of listeners) cb();
@@ -245,6 +196,73 @@ function useTokenSnapshot() {
 	return useSyncExternalStore(subscribe$1, getSnapshot, getServerSnapshot);
 }
 //#endregion
+//#region src/contexts.ts
+/**
+* Context carrying the full {@link ProjectSnapshot}. `null` sentinel lets
+* `useSwatchbookData()` tell "provider present" from "fall back to the
+* virtual module".
+*/
+const SwatchbookContext = createContext(null);
+function useOptionalSwatchbookData() {
+	return useContext(SwatchbookContext);
+}
+/**
+* Active swatchbook theme for the current story/docs render. Populated by
+* the addon's preview decorator and consumed by `useToken` + any future
+* consumer hooks.
+*
+* This runs through plain React context rather than Storybook's
+* `useGlobals` so the same hook works in autodocs / MDX renders where the
+* preview-hooks context isn't available.
+*/
+const ThemeContext = createContext("");
+function useActiveTheme() {
+	return useContext(ThemeContext);
+}
+/**
+* Active axis tuple for the current story/docs render — `Record<axisName,
+* contextName>`. Derived from the same input as {@link ThemeContext}; split
+* out so consumers needing per-axis info (toolbar, panel, tuple-aware
+* blocks) don't have to reparse the composed theme name.
+*/
+const AxesContext = createContext({});
+function useActiveAxes() {
+	return useContext(AxesContext);
+}
+/**
+* Active color-display format for the current story/docs render, consumed
+* by blocks that render color-token values. Emitted CSS is unaffected.
+*
+* Sits in the middle of the precedence chain a block resolves via
+* `colorFormat ?? useColorFormat()`: a block's own `colorFormat` prop wins
+* over this context, which wins over the active snapshot's
+* `defaultColorFormat` (from `Config.defaultColorFormat`). "Active
+* snapshot" is whichever source is actually feeding the render:
+* `SwatchbookProvider` when a story decorator mounted one, otherwise the
+* channel-fed `TokenSnapshot` that MDX-embedded blocks (no `<Story/>`, no
+* provider) read through `useProject()`'s fallback path.
+*
+* Runs through plain React context rather than Storybook's `useGlobals` so
+* per-story seeded globals flow through on first render and the same hook
+* is safe to call from MDX doc blocks (where the preview-hooks context
+* isn't available).
+*/
+const ColorFormatContext = createContext(null);
+/**
+* Resolves the color-display format from the context/snapshot/default
+* chain: `ColorFormatContext` → active snapshot's `defaultColorFormat` →
+* `'hex'`. Composing blocks read `colorFormat ?? useColorFormat()` to give
+* their own `colorFormat` prop top precedence over this chain.
+*/
+function useColorFormat() {
+	const contextValue = useContext(ColorFormatContext);
+	const channelGlobals = useChannelGlobals();
+	const snapshot = useContext(SwatchbookContext);
+	const tokenSnapshot = useTokenSnapshot();
+	const activeDefault = snapshot ? snapshot.defaultColorFormat : tokenSnapshot.defaultColorFormat;
+	return contextValue ?? channelGlobals.format ?? activeDefault ?? "hex";
+}
+//#endregion
 //#region src/internal/use-project.ts
 function computeVarianceByPath(graph) {
 	if (!graph) return {};
@@ -687,23 +705,24 @@ function BorderPreviewView({ rows, activeTheme, cssVarPrefix, activeAxes, filter
 		}, row.path))]
 	});
 }
-function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+function BorderPreview({ filter, caption, sortBy = "path", sortDir = "asc", colorFormat }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	return /* @__PURE__ */ jsx(BorderPreviewView, {
 		rows: useMemo(() => deriveBorderRows(resolved, project, {
 			filter,
 			sortBy,
 			sortDir,
-			colorFormat
+			colorFormat: format
 		}), [
 			resolved,
 			project,
 			filter,
 			sortBy,
 			sortDir,
-			colorFormat
+			format
 		]),
 		activeTheme,
 		cssVarPrefix,
@@ -812,16 +831,17 @@ function ColorPaletteView({ groups, activeTheme, cssVarPrefix, activeAxes, filte
 		}, group))]
 	});
 }
-function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc" }) {
+function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "asc", colorFormat }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	return /* @__PURE__ */ jsx(ColorPaletteView, {
 		groups: useMemo(() => deriveColorPaletteGroups(resolved, listing, cssVarPrefix, {
 			filter,
 			groupBy,
 			sortBy,
 			sortDir,
-			colorFormat
+			colorFormat: format
 		}), [
 			resolved,
 			listing,
@@ -830,7 +850,7 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 			groupBy,
 			sortBy,
 			sortDir,
-			colorFormat
+			format
 		]),
 		activeTheme,
 		cssVarPrefix,
@@ -1402,9 +1422,10 @@ function ColorTableView({ groups, activeTheme, cssVarPrefix, activeAxes, colorFo
 * selector; clicking a row expands it in place to show the description,
 * alias chain, and (for grouped rows) every variant's hex/HSL/OKLCH values.
 */
-function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants, id, indicators }) {
+function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants, id, indicators, colorFormat }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing, varianceByPath } = useProject();
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	const enabledIndicators = useMemo(() => ({
 		...resolveIndicators(indicators),
 		gamut: false
@@ -1420,7 +1441,7 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 			variants,
 			sortBy,
 			sortDir,
-			colorFormat
+			colorFormat: format
 		}), [
 			resolved,
 			listing,
@@ -1430,12 +1451,12 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 			variants,
 			sortBy,
 			sortDir,
-			colorFormat
+			format
 		]),
 		activeTheme,
 		cssVarPrefix,
 		activeAxes,
-		colorFormat,
+		colorFormat: format,
 		enabledIndicators,
 		blockKey,
 		filter,
@@ -2425,15 +2446,16 @@ function GradientPaletteView({ rows, activeTheme, cssVarPrefix, activeAxes, filt
 		}, row.path))]
 	});
 }
-function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc", colorFormat }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	return /* @__PURE__ */ jsx(GradientPaletteView, {
 		rows: useMemo(() => deriveGradientRows(resolved, listing, cssVarPrefix, {
 			filter,
 			sortBy,
 			sortDir,
-			colorFormat
+			colorFormat: format
 		}), [
 			resolved,
 			listing,
@@ -2441,7 +2463,7 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 			filter,
 			sortBy,
 			sortDir,
-			colorFormat
+			format
 		]),
 		activeTheme,
 		cssVarPrefix,
@@ -3017,23 +3039,24 @@ function Layer({ layer, index, total }) {
 		})]
 	});
 }
-function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc" }) {
+function ShadowPreview({ filter, caption, sortBy = "path", sortDir = "asc", colorFormat }) {
 	const project = useProject();
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	return /* @__PURE__ */ jsx(ShadowPreviewView, {
 		rows: useMemo(() => deriveShadowRows(resolved, project, {
 			filter,
 			sortBy,
 			sortDir,
-			colorFormat
+			colorFormat: format
 		}), [
 			resolved,
 			project,
 			filter,
 			sortBy,
 			sortDir,
-			colorFormat
+			format
 		]),
 		activeTheme,
 		cssVarPrefix,
@@ -3280,12 +3303,13 @@ function treeHasTruncation(nodes) {
 }
 //#endregion
 //#region src/token-detail/AxisVariance.tsx
-function AxisVariance({ path }) {
+function AxisVariance({ path, colorFormat }) {
 	const { token, cssVar, axes, activeAxes, cssVarPrefix, varianceByPath, resolveAt } = useTokenDetailData(path);
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	const tokenType = token?.$type;
 	const isColor = tokenType === "color";
-	const formatFn = (t) => valueFor(t, tokenType, colorFormat);
+	const formatFn = (t) => valueFor(t, tokenType, format);
 	const variance = useMemo(() => {
 		const result = varianceByPath[path];
 		if (!result) return { kind: "constant" };
@@ -3438,16 +3462,17 @@ function valueFor(token, $type, format) {
 }
 //#endregion
 //#region src/token-detail/CompositeBreakdown.tsx
-function CompositeBreakdown({ path }) {
+function CompositeBreakdown({ path, colorFormat }) {
 	const { token, resolved } = useTokenDetailData(path);
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	if (!token) return null;
 	return /* @__PURE__ */ jsx(CompositeBreakdownContent, {
 		type: token.$type,
 		rawValue: token.$value,
 		partialAliasOf: token.partialAliasOf,
 		resolved,
-		colorFormat
+		colorFormat: format
 	});
 }
 function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, colorFormat }) {
@@ -4166,12 +4191,13 @@ function TokenDetailView({ path, heading, token, cssVar, activeTheme, activeAxes
 		]
 	});
 }
-function TokenDetail({ path, heading }) {
+function TokenDetail({ path, heading, colorFormat }) {
 	const { token, cssVar, activeTheme, activeAxes, cssVarPrefix } = useTokenDetailData(path);
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	const { listing } = useProject();
-	const derived = deriveTokenDetail(path, token, listing, colorFormat);
-	return /* @__PURE__ */ jsx(TokenDetailView, {
+	const derived = deriveTokenDetail(path, token, listing, format);
+	const view = /* @__PURE__ */ jsx(TokenDetailView, {
 		path,
 		...heading !== void 0 && { heading },
 		token,
@@ -4181,6 +4207,10 @@ function TokenDetail({ path, heading }) {
 		cssVarPrefix,
 		...derived
 	});
+	return colorFormat !== void 0 ? /* @__PURE__ */ jsx(ColorFormatContext.Provider, {
+		value: colorFormat,
+		children: view
+	}) : view;
 }
 //#endregion
 //#region src/internal/DetailOverlay.tsx
@@ -4730,14 +4760,14 @@ function TokenNavigatorView({ resolved, root, enabledIndicators, cssVarPrefix, a
 * navigation. Click a leaf to inspect it in a slide-over (unless `onSelect`
 * is provided, which hands the follow-up to the consumer).
 */
-function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect, id, indicators }) {
+function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect, id, indicators, colorFormat }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, indicators: indicatorBaseline } = useProject();
 	const blockKey = useBlockKey("TokenNavigator", [
 		root,
 		type === void 0 ? "" : typeof type === "string" ? type : type.join(","),
 		id
 	]);
-	return /* @__PURE__ */ jsx(TokenNavigatorView, {
+	const view = /* @__PURE__ */ jsx(TokenNavigatorView, {
 		resolved,
 		root,
 		enabledIndicators: useMemo(() => resolveIndicators(indicators, indicatorBaseline), [indicators, indicatorBaseline]),
@@ -4750,6 +4780,10 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		searchable,
 		onSelect
 	});
+	return colorFormat !== void 0 ? /* @__PURE__ */ jsx(ColorFormatContext.Provider, {
+		value: colorFormat,
+		children: view
+	}) : view;
 }
 function TreeNodeRow({ node, expanded, focusedPath, registerTreeItem, onToggle, onFocusPath, onLeafClick, root, resolveInView, onNavigate, enabled, level, setsize, posinset }) {
 	if (node.kind === "leaf") return /* @__PURE__ */ jsx(LeafRow, {
@@ -5207,9 +5241,10 @@ function TokenTableView({ rows, activeTheme, cssVarPrefix, activeAxes, colorForm
 * slide-over (unless `onSelect` is provided, which hands the follow-up to the
 * consumer).
 */
-function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, id, indicators }) {
+function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, id, indicators, colorFormat }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing, varianceByPath, indicators: indicatorBaseline } = useProject();
-	const colorFormat = useColorFormat();
+	const contextColorFormat = useColorFormat();
+	const format = colorFormat ?? contextColorFormat;
 	const rootFontSize = useRootFontSize();
 	const blockKey = useBlockKey("TokenTable", [
 		filter,
@@ -5218,13 +5253,13 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 		id
 	]);
 	const enabledIndicators = useMemo(() => resolveIndicators(indicators, indicatorBaseline), [indicators, indicatorBaseline]);
-	return /* @__PURE__ */ jsx(TokenTableView, {
+	const view = /* @__PURE__ */ jsx(TokenTableView, {
 		rows: useMemo(() => deriveTokenRows(resolved, listing, cssVarPrefix, varianceByPath, {
 			filter,
 			type,
 			sortBy,
 			sortDir,
-			colorFormat,
+			colorFormat: format,
 			rootFontSizePx: rootFontSize
 		}), [
 			resolved,
@@ -5235,13 +5270,13 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 			type,
 			sortBy,
 			sortDir,
-			colorFormat,
+			format,
 			rootFontSize
 		]),
 		activeTheme,
 		cssVarPrefix,
 		activeAxes,
-		colorFormat,
+		colorFormat: format,
 		enabledIndicators,
 		validPaths: useMemo(() => new Set(Object.keys(resolved)), [resolved]),
 		blockKey,
@@ -5251,6 +5286,10 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 		searchable,
 		onSelect
 	});
+	return colorFormat !== void 0 ? /* @__PURE__ */ jsx(ColorFormatContext.Provider, {
+		value: colorFormat,
+		children: view
+	}) : view;
 }
 //#endregion
 //#region src/TypographyScale.tsx