@unpunnyfuns/swatchbook-blocks 0.62.2 → 0.62.4

package/dist/index.d.mts

@@ -271,6 +271,8 @@ interface ColorTableProps {
    * own row.
    */
   variants?: Record<string, string>;
+  /** Disambiguates persisted UI state for two identical-prop tables on a page. */
+  id?: string;
 }
 declare function ColorTable({
   filter,
@@ -279,7 +281,8 @@ declare function ColorTable({
   sortDir,
   searchable,
   onSelect,
-  variants
+  variants,
+  id
 }: ColorTableProps): ReactElement;
 //#endregion
 //#region src/Diagnostics.d.ts
@@ -789,13 +792,21 @@ interface TokenNavigatorProps {
    * the follow-up UI.
    */
   onSelect?(path: string): void;
+  /**
+   * Disambiguates persisted UI state (expand/collapse, selection, search)
+   * when two navigators with otherwise-identical props sit on the same docs
+   * page. Only needed in that case; the state key is derived from the other
+   * props otherwise.
+   */
+  id?: string;
 }
 declare function TokenNavigator({
   root,
   type,
   initiallyExpanded,
   searchable,
-  onSelect
+  onSelect,
+  id
 }: TokenNavigatorProps): ReactElement;
 //#endregion
 //#region src/TokenTable.d.ts
@@ -836,6 +847,8 @@ interface TokenTableProps {
    * follow-up UI (inline panel, drill-down route, …).
    */
   onSelect?(path: string): void;
+  /** Disambiguates persisted UI state for two identical-prop tables on a page. */
+  id?: string;
 }
 declare function TokenTable({
   filter,
@@ -844,7 +857,8 @@ declare function TokenTable({
   sortBy,
   sortDir,
   searchable,
-  onSelect
+  onSelect,
+  id
 }: TokenTableProps): ReactElement;
 //#endregion
 //#region src/TypographyScale.d.ts

package/dist/index.mjs

@@ -809,16 +809,73 @@ function CopyButton$1({ value, label, variant = "icon", className }) {
 	})] });
 }
 //#endregion
+//#region src/internal/persistent-state.ts
+/**
+* Block UI state that survives a docs-mode remount.
+*
+* In MDX docs mode Storybook re-renders the docs container on every
+* `updateGlobals` (axis flip), which unmounts and remounts the embedded
+* blocks — destroying any plain `useState` (expand/collapse, selection,
+* search). This is the same problem `channel-globals` solves for the
+* globals: lift the value out of React into module state so it persists
+* across the remount, and re-seed component state from it on mount.
+*
+* `usePersistedState` is a drop-in `useState` whose value is mirrored to a
+* module-level store under a caller-supplied key, and read back from it on
+* (re)mount. `useBlockKey` builds a stable key scoped to the current docs
+* page + block identity so two pages (or two distinct blocks) don't share
+* an entry.
+*/
+const store = /* @__PURE__ */ new Map();
+function pageScope() {
+	if (typeof window === "undefined") return "";
+	try {
+		return new URLSearchParams(window.location.search).get("id") ?? window.location.pathname;
+	} catch {
+		return "";
+	}
+}
+const SEP = "
";
+/**
+* Build a stable persistence key for a block's UI state: docs page + block
+* type + the props that distinguish one instance from another (and an
+* optional explicit `id` for identical-prop siblings on the same page).
+*/
+function useBlockKey(blockType, parts) {
+	const partsKey = parts.map((p) => p === void 0 ? "" : String(p)).join(SEP);
+	return useMemo(() => `${pageScope()}${SEP}${blockType}${SEP}${partsKey}`, [blockType, partsKey]);
+}
+/**
+* `useState`, but the value persists across remounts under `key`. `initial`
+* may be a value or a lazy initializer (used only on the first mount when the
+* store has no entry yet — never an actual `T` that's a function here).
+*/
+function usePersistedState(key, initial) {
+	const [value, setValue] = useState(() => {
+		if (store.has(key)) return store.get(key);
+		return typeof initial === "function" ? initial() : initial;
+	});
+	useEffect(() => {
+		store.set(key, value);
+	}, [key, value]);
+	return [value, setValue];
+}
+//#endregion
 //#region src/ColorTable.tsx
 const BASE_LABEL = "base";
 const COLUMN_COUNT = 6;
-function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants }) {
+function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, variants, id }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
 	const colorFormat = useColorFormat();
-	const [query, setQuery] = useState("");
+	const blockKey = useBlockKey("ColorTable", [
+		filter,
+		caption,
+		id
+	]);
+	const [query, setQuery] = usePersistedState(`${blockKey}::query`, "");
 	const deferredQuery = useDeferredValue(query);
-	const [selectedByBase, setSelectedByBase] = useState({});
-	const [expandedByBase, setExpandedByBase] = useState(() => /* @__PURE__ */ new Set());
+	const [selectedByBase, setSelectedByBase] = usePersistedState(`${blockKey}::selected`, {});
+	const [expandedByBase, setExpandedByBase] = usePersistedState(`${blockKey}::expanded`, () => /* @__PURE__ */ new Set());
 	const defs = useMemo(() => buildVariantDefs(variants), [variants]);
 	const groups = useMemo(() => {
 		const projectFields = {
@@ -898,13 +955,13 @@ function ColorTable({ filter, caption, sortBy = "path", sortDir = "asc", searcha
 			else next.add(base);
 			return next;
 		});
-	}, []);
+	}, [setExpandedByBase]);
 	const selectVariant = useCallback((base, label) => {
 		setSelectedByBase((prev) => ({
 			...prev,
 			[base]: label
 		}));
-	}, []);
+	}, [setSelectedByBase]);
 	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleGroups.length} matching "${query.trim()}"` : "";
 	const captionText = caption ?? `${totalTokens} color${totalTokens === 1 ? "" : "s"} across ${groups.length} group${groups.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${matchSuffix} · ${activeTheme}`;
 	if (groups.length === 0) return /* @__PURE__ */ jsx("div", {
@@ -3639,8 +3696,13 @@ function pruneTreeForMatches(nodes, matches, expandOut) {
 	}
 	return out;
 }
-function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect }) {
+function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true, onSelect, id }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix } = useProject();
+	const blockKey = useBlockKey("TokenNavigator", [
+		root,
+		type === void 0 ? "" : typeof type === "string" ? type : type.join(","),
+		id
+	]);
 	const typeFilter = useMemo(() => {
 		if (type === void 0) return void 0;
 		return new Set(Array.isArray(type) ? type : [type]);
@@ -3655,15 +3717,19 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		collectInitialExpanded(tree, initiallyExpanded, out);
 		return out;
 	}, [tree, initiallyExpanded]);
-	const [expanded, setExpanded] = useState(initialExpanded);
+	const [expanded, setExpanded] = usePersistedState(`${blockKey}::expanded`, initialExpanded);
 	const initiallyExpandedRef = useRef(initiallyExpanded);
 	useEffect(() => {
 		if (initiallyExpandedRef.current === initiallyExpanded) return;
 		initiallyExpandedRef.current = initiallyExpanded;
 		setExpanded(initialExpanded);
-	}, [initiallyExpanded, initialExpanded]);
-	const [selectedPath, setSelectedPath] = useState(null);
-	const [query, setQuery] = useState("");
+	}, [
+		initiallyExpanded,
+		initialExpanded,
+		setExpanded
+	]);
+	const [selectedPath, setSelectedPath] = usePersistedState(`${blockKey}::selected`, null);
+	const [query, setQuery] = usePersistedState(`${blockKey}::query`, "");
 	const deferredQuery = useDeferredValue(query);
 	const { visibleTree, searchExpanded } = useMemo(() => {
 		if (!searchable || deferredQuery.trim() === "") return {
@@ -3696,11 +3762,11 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 			else next.add(path);
 			return next;
 		});
-	}, []);
+	}, [setExpanded]);
 	const handleLeafClick = useCallback((path) => {
 		if (onSelect) onSelect(path);
 		else setSelectedPath(path);
-	}, [onSelect]);
+	}, [onSelect, setSelectedPath]);
 	const [storedFocus, setStoredFocus] = useState(null);
 	const treeItemRefs = useRef(/* @__PURE__ */ new Map());
 	const registerTreeItem = useCallback((path) => (el) => {
@@ -4055,11 +4121,17 @@ const LeafPreview = memo(function LeafPreview({ path, token }) {
 });
 //#endregion
 //#region src/TokenTable.tsx
-function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect }) {
+function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", searchable = true, onSelect, id }) {
 	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
 	const colorFormat = useColorFormat();
-	const [selectedPath, setSelectedPath] = useState(null);
-	const [query, setQuery] = useState("");
+	const blockKey = useBlockKey("TokenTable", [
+		filter,
+		type,
+		caption,
+		id
+	]);
+	const [selectedPath, setSelectedPath] = usePersistedState(`${blockKey}::selected`, null);
+	const [query, setQuery] = usePersistedState(`${blockKey}::query`, "");
 	const deferredQuery = useDeferredValue(query);
 	const rows = useMemo(() => {
 		const projectFields = {
@@ -4106,7 +4178,7 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 	const handleRowClick = useCallback((path) => {
 		if (onSelect) onSelect(path);
 		else setSelectedPath(path);
-	}, [onSelect]);
+	}, [onSelect, setSelectedPath]);
 	const matchSuffix = searchable && query.trim() !== "" ? ` · ${visibleRows.length} matching "${query.trim()}"` : "";
 	const captionText = caption ?? `${rows.length} token${rows.length === 1 ? "" : "s"}${filter ? ` matching \`${filter}\`` : ""}${type ? ` · $type=${type}` : ""}${matchSuffix} · ${activeTheme}`;
 	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {