@unpunnyfuns/swatchbook-blocks 0.1.2 → 0.1.3

package/dist/index.d.mts

@@ -324,7 +324,7 @@ declare function useActiveAxes(): Readonly<Record<string, string>>;
  * is safe to call from MDX doc blocks (where the preview-hooks context
  * isn't available).
  */
-declare const ColorFormatContext: _$react.Context<ColorFormat>;
+declare const ColorFormatContext: _$react.Context<ColorFormat | null>;
 declare function useColorFormat(): ColorFormat;
 //#endregion
 //#region src/provider.d.ts

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import Color from "colorjs.io";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { addons } from "storybook/preview-api";
 import { axes, css, cssVarPrefix, defaultTheme, themes, themesResolved } from "virtual:swatchbook/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -178,6 +178,83 @@ function stringifyFallback(value, fallback) {
 	return fallback;
 }
 //#endregion
+//#region src/internal/channel-globals.ts
+const AXES_GLOBAL_KEY = "swatchbookAxes";
+const THEME_GLOBAL_KEY = "swatchbookTheme";
+const COLOR_FORMAT_GLOBAL_KEY = "swatchbookColorFormat";
+let snapshot = {
+	axes: null,
+	theme: null,
+	format: null
+};
+const listeners = /* @__PURE__ */ new Set();
+let subscribed = false;
+function isColorFormat(value) {
+	return typeof value === "string" && COLOR_FORMATS.includes(value);
+}
+function ensureSubscribed() {
+	if (subscribed || typeof window === "undefined") return;
+	subscribed = true;
+	const channel = addons.getChannel();
+	const onGlobals = (payload) => {
+		const globals = payload.globals;
+		if (!globals) return;
+		let next = snapshot;
+		const nextAxes = globals[AXES_GLOBAL_KEY];
+		if (nextAxes && typeof nextAxes === "object") next = {
+			...next,
+			axes: nextAxes
+		};
+		const nextTheme = globals[THEME_GLOBAL_KEY];
+		if (typeof nextTheme === "string") next = {
+			...next,
+			theme: nextTheme
+		};
+		const nextFormat = globals[COLOR_FORMAT_GLOBAL_KEY];
+		if (isColorFormat(nextFormat)) next = {
+			...next,
+			format: nextFormat
+		};
+		if (next !== snapshot) {
+			snapshot = next;
+			for (const cb of listeners) cb();
+		}
+	};
+	/**
+	* `setGlobals` fires once on preview init carrying the URL-persisted user
+	* globals (Storybook stores toolbar selections in `?globals=…`). Without
+	* this listener, deeplinking to an MDX page with a non-default axis tuple
+	* or color format renders defaults for one frame before the first
+	* `updateGlobals` arrives. `emitGlobals()` reads from `userGlobals.get()`
+	* (current state), so the payload is never stale — safe to handle.
+	*/
+	channel.on("globalsUpdated", onGlobals);
+	channel.on("updateGlobals", onGlobals);
+	channel.on("setGlobals", onGlobals);
+}
+/**
+* Subscribe at module load so the `SET_GLOBALS` emission from preview init
+* lands in our snapshot before any block renders. Running `useSyncExternalStore`'s
+* `subscribe` lazily on first hook call would miss the event in most cases.
+*/
+ensureSubscribed();
+function subscribe(cb) {
+	ensureSubscribed();
+	listeners.add(cb);
+	return () => {
+		listeners.delete(cb);
+	};
+}
+function getSnapshot() {
+	return snapshot;
+}
+function getServerSnapshot() {
+	return snapshot;
+}
+function useChannelGlobals() {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+//#endregion
 //#region src/contexts.ts
 /**
 * Context carrying the full {@link ProjectSnapshot}. `null` sentinel lets
@@ -222,15 +299,15 @@ function useActiveAxes() {
 * is safe to call from MDX doc blocks (where the preview-hooks context
 * isn't available).
 */
-const ColorFormatContext = createContext("hex");
+const ColorFormatContext = createContext(null);
 function useColorFormat() {
-	return useContext(ColorFormatContext);
+	const contextValue = useContext(ColorFormatContext);
+	const channelGlobals = useChannelGlobals();
+	return contextValue ?? channelGlobals.format ?? "hex";
 }
 //#endregion
 //#region src/internal/use-project.ts
 const STYLE_ELEMENT_ID = "swatchbook-tokens";
-const GLOBAL_KEY = "swatchbookTheme";
-const AXES_GLOBAL_KEY = "swatchbookAxes";
 function ensureStylesheet(css) {
 	if (typeof document === "undefined") return;
 	let style = document.getElementById(STYLE_ELEMENT_ID);
@@ -288,32 +365,14 @@ function useProject() {
 function useVirtualModuleFallback(enabled) {
 	const contextTheme = useActiveTheme();
 	const contextAxes = useActiveAxes();
-	const [channelTheme, setChannelTheme] = useState(null);
-	const [channelAxes, setChannelAxes] = useState(null);
+	const channelGlobals = useChannelGlobals();
 	useEffect(() => {
 		if (!enabled) return;
 		ensureStylesheet(css);
 	}, [enabled]);
-	useEffect(() => {
-		if (!enabled) return;
-		const channel = addons.getChannel();
-		const onGlobals = (payload) => {
-			const nextTheme = payload.globals?.[GLOBAL_KEY];
-			if (typeof nextTheme === "string") setChannelTheme(nextTheme);
-			const nextAxes = payload.globals?.[AXES_GLOBAL_KEY];
-			if (nextAxes && typeof nextAxes === "object") setChannelAxes(nextAxes);
-		};
-		channel.on("globalsUpdated", onGlobals);
-		channel.on("updateGlobals", onGlobals);
-		channel.on("setGlobals", onGlobals);
-		return () => {
-			channel.off("globalsUpdated", onGlobals);
-			channel.off("updateGlobals", onGlobals);
-			channel.off("setGlobals", onGlobals);
-		};
-	}, [enabled]);
-	const activeAxes = Object.keys(contextAxes).length > 0 ? { ...contextAxes } : channelAxes ?? defaultTuple(axes);
+	const activeAxes = Object.keys(contextAxes).length > 0 ? { ...contextAxes } : channelGlobals.axes ?? defaultTuple(axes);
 	const derivedName = nameForTuple(themes, activeAxes);
+	const channelTheme = channelGlobals.theme;
 	const fallbackTupleName = channelTheme && tupleForName(themes, channelTheme) ? channelTheme : null;
 	const activeTheme = contextTheme || derivedName || fallbackTupleName || channelTheme || defaultTheme || themes[0]?.name || "";
 	return {