@unpunnyfuns/swatchbook-blocks 0.60.7 → 0.60.8

package/dist/index.mjs

@@ -259,11 +259,11 @@ function subscribe$1(cb) {
 function getSnapshot$1() {
 	return snapshot$1;
 }
-function getServerSnapshot() {
+function getServerSnapshot$1() {
 	return snapshot$1;
 }
 function useChannelGlobals() {
-	return useSyncExternalStore(subscribe$1, getSnapshot$1, getServerSnapshot);
+	return useSyncExternalStore(subscribe$1, getSnapshot$1, getServerSnapshot$1);
 }
 //#endregion
 //#region src/contexts.ts
@@ -377,8 +377,11 @@ function subscribe(cb) {
 function getSnapshot() {
 	return snapshot;
 }
+function getServerSnapshot() {
+	return snapshot;
+}
 function useTokenSnapshot() {
-	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 //#endregion
 //#region src/internal/use-project.ts
@@ -2016,10 +2019,13 @@ function stopKey(path, stop, fallback) {
 	return `${path}|${stop.position ?? fallback}|${stopCssColor(stop)}`;
 }
 function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" }) {
-	const project = useProject();
-	const { resolved, activeTheme, activeAxes, cssVarPrefix } = project;
+	const { resolved, activeTheme, activeAxes, cssVarPrefix, listing } = useProject();
 	const colorFormat = useColorFormat();
 	const rows = useMemo(() => {
+		const projectFields = {
+			listing,
+			cssVarPrefix
+		};
 		return sortTokens(Object.entries(resolved).filter(([path, token]) => {
 			if (token.$type !== "gradient") return false;
 			return matchPath(path, filter);
@@ -2028,13 +2034,14 @@ function GradientPalette({ filter, caption, sortBy = "path", sortDir = "asc" })
 			dir: sortDir
 		}).map(([path, token]) => ({
 			path,
-			cssVar: resolveCssVar(path, project),
+			cssVar: resolveCssVar(path, projectFields),
 			stops: asStops(token.$value)
 		}));
 	}, [
 		resolved,
+		listing,
+		cssVarPrefix,
 		filter,
-		project,
 		sortBy,
 		sortDir
 	]);
@@ -3572,10 +3579,32 @@ function TokenHeader({ path, heading }) {
 }
 //#endregion
 //#region src/token-detail/TokenUsageSnippet.tsx
+/**
+* DTCG `$type`s with a single canonical CSS property. Types whose value is
+* applied across many properties (`dimension`, `number`, `strokeStyle`,
+* `typography`) are intentionally absent — they fall back to a commented hint.
+*/
+const CSS_PROPERTY_BY_TYPE = {
+	color: "color",
+	shadow: "box-shadow",
+	border: "border",
+	fontFamily: "font-family",
+	fontWeight: "font-weight",
+	duration: "transition-duration",
+	cubicBezier: "transition-timing-function",
+	gradient: "background",
+	transition: "transition"
+};
+function usageSnippet(cssVar, type) {
+	const property = type ? CSS_PROPERTY_BY_TYPE[type] : void 0;
+	if (property) return `${property}: ${cssVar};`;
+	if (type) return `/* ${type} */ ${cssVar};`;
+	return `${cssVar};`;
+}
 function TokenUsageSnippet({ path }) {
 	const { token, cssVar } = useTokenDetailData(path);
 	if (!token) return null;
-	const snippet = `color: ${cssVar};`;
+	const snippet = usageSnippet(cssVar, token.$type);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__section-header",
 		children: "Usage"
@@ -3895,9 +3924,12 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		return out;
 	}, [tree, initiallyExpanded]);
 	const [expanded, setExpanded] = useState(initialExpanded);
+	const initiallyExpandedRef = useRef(initiallyExpanded);
 	useEffect(() => {
+		if (initiallyExpandedRef.current === initiallyExpanded) return;
+		initiallyExpandedRef.current = initiallyExpanded;
 		setExpanded(initialExpanded);
-	}, [initialExpanded]);
+	}, [initiallyExpanded, initialExpanded]);
 	const [selectedPath, setSelectedPath] = useState(null);
 	const [query, setQuery] = useState("");
 	const deferredQuery = useDeferredValue(query);
@@ -3963,7 +3995,9 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 		const node = treeItemRefs.current.get(focusedPath);
 		if (node && document.activeElement !== node) {
 			const active = document.activeElement;
-			if (active instanceof HTMLElement && active.closest("[role=\"tree\"]")) node.focus();
+			const insideTree = active instanceof HTMLElement && active.closest("[role=\"tree\"]");
+			const orphaned = active === document.body || active === null;
+			if (insideTree || orphaned && storedFocus !== null && storedFocus !== focusedPath) node.focus();
 		}
 	}, [focusedPath]);
 	const handleTreeKeyDown = useCallback((e) => {