@unpunnyfuns/swatchbook-blocks 0.67.0 → 0.68.0

package/README.md

@@ -4,7 +4,7 @@ React MDX doc blocks for [swatchbook](https://github.com/unpunnyfuns/swatchbook)
 
 Render your DTCG tokens in `.mdx` stories: swatch grids, type-specific previews, per-token inspectors. The blocks react to the toolbar's axis flips without any wiring in your story code.
 
-Most consumers pick this up transitively via [`@unpunnyfuns/swatchbook-addon`](../addon); `import { TokenTable } from '@unpunnyfuns/swatchbook-addon'` works out of the box. Install this package directly when you want blocks *without* the Storybook addon, such as unit tests or a standalone React app wrapping tokens in a custom surface.
+Most consumers pick this up transitively via [`@unpunnyfuns/swatchbook-addon`](../addon); `import { TokenTable } from '@unpunnyfuns/swatchbook-addon'` works out of the box. Install this package directly when you want blocks _without_ the Storybook addon, such as unit tests or a standalone React app wrapping tokens in a custom surface.
 
 ## Install
 
@@ -32,7 +32,7 @@ import snapshot from './tokens-snapshot.json';
 
 <SwatchbookProvider value={snapshot}>
   <TokenTable filter="color.**" />
-</SwatchbookProvider>
+</SwatchbookProvider>;
 ```
 
 Block catalogue, props, and composition patterns live in the [blocks reference](https://unpunnyfuns.github.io/swatchbook/reference/blocks) and the [authoring guide](https://unpunnyfuns.github.io/swatchbook/guides/authoring-doc-stories).

package/dist/index.mjs

@@ -2,41 +2,16 @@ import './style.css';
 import { COLOR_FORMATS } from "@unpunnyfuns/swatchbook-core/color-formats";
 import { formatColor, parseColor } from "@unpunnyfuns/swatchbook-core/format-color";
 import { createContext, memo, useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getVariance, listPaths, resolveAllWithProvenanceAt } 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { dataAttr } from "@unpunnyfuns/swatchbook-core/data-attr";
 import { matchPath } from "@unpunnyfuns/swatchbook-core/match-path";
 import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
 import cx from "clsx";
-//#region src/internal/styles.tsx
-/**
-* Chrome-style primitives shared across every block. Kept as JS exports
-* for the inline-style sites that still compose them into per-block style
-* objects (e.g. TokenNavigator's `typePill` that builds on the shared
-* pill base). The pure direct-reference chrome — surface wrapper, caption,
-* empty-state — lives in `styles.css` and is applied via class names.
-*/
-const TEXT_MUTED = "var(--swatchbook-text-muted, CanvasText)";
-const SURFACE_RAISED = "var(--swatchbook-surface-raised, Canvas)";
-const SURFACE_MUTED = "var(--swatchbook-surface-muted, rgba(128,128,128,0.15))";
-const BORDER_FAINT = `1px solid var(--swatchbook-border-default, rgba(128,128,128,0.15))`;
-const BORDER_STRONG = `1px solid var(--swatchbook-border-default, rgba(128,128,128,0.3))`;
-/**
-* Inner content for a block's "nothing to render" state. Call sites wrap
-* it in their own block wrapper (which already carries `blockWrapperAttrs`), so
-* the message itself just needs the muted type.
-*/
-function EmptyState({ children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "sb-block__empty",
-		children
-	});
-}
-//#endregion
 //#region src/internal/channel-globals.ts
 const AXES_GLOBAL_KEY = "swatchbookAxes";
 const COLOR_FORMAT_GLOBAL_KEY = "swatchbookColorFormat";
@@ -388,19 +363,10 @@ function resolveColorValue(path, raw, colorFormat, project) {
 }
 //#endregion
 //#region src/border-preview/BorderSample.tsx
-const sampleStyle$1 = {
-	width: 120,
-	height: 56,
-	background: SURFACE_RAISED,
-	borderRadius: 6
-};
 function BorderSample({ path }) {
-	const cssVar = resolveCssVar(path, useProject());
 	return /* @__PURE__ */ jsx("div", {
-		style: {
-			...sampleStyle$1,
-			border: cssVar
-		},
+		className: "sb-border-sample",
+		style: { border: resolveCssVar(path, useProject()) },
 		"aria-hidden": true
 	});
 }
@@ -1057,12 +1023,9 @@ function CopyButton$1({ value, label, variant = "icon", className }) {
 		timerRef.current = setTimeout(() => setCopied(false), 1500);
 	}, [value]);
 	const ariaLabel = label ?? `Copy ${value}`;
-	const classes = ["sb-copy-button", `sb-copy-button--${variant}`];
-	if (copied) classes.push("sb-copy-button--copied");
-	if (className) classes.push(className);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: classes.join(" "),
+		className: cx("sb-copy-button", `sb-copy-button--${variant}`, copied && "sb-copy-button--copied", className),
 		onClick: handleClick,
 		"aria-label": ariaLabel,
 		title: ariaLabel,
@@ -1746,44 +1709,9 @@ function useRootFontSize() {
 }
 //#endregion
 //#region src/dimension-scale/DimensionBar.tsx
-const styles$1 = {
-	cappedWrap: {
-		display: "inline-flex",
-		alignItems: "center",
-		gap: "var(--swatchbook-space-3xs)",
-		maxWidth: "100%",
-		minWidth: 0
-	},
-	cap: {
-		color: "var(--swatchbook-text-muted)",
-		fontSize: 11,
-		lineHeight: 1,
-		userSelect: "none"
-	},
-	bar: {
-		height: 14,
-		background: "var(--swatchbook-accent-bg, #3b82f6)",
-		borderRadius: 2,
-		minWidth: 1,
-		maxWidth: "100%"
-	},
-	radiusSample: {
-		width: 56,
-		height: 56,
-		background: "var(--swatchbook-accent-bg, #3b82f6)",
-		border: BORDER_STRONG
-	},
-	sizeSample: {
-		background: "var(--swatchbook-accent-bg, #3b82f6)",
-		border: BORDER_STRONG,
-		minWidth: 1,
-		minHeight: 1
-	}
-};
 function withCap(visual) {
 	return /* @__PURE__ */ jsxs("span", {
 		className: "sb-dimension-bar sb-dimension-bar--capped",
-		style: styles$1.cappedWrap,
 		title: `capped at 480px`,
 		children: [visual, /* @__PURE__ */ jsx("span", {
 			className: "sb-dimension-bar__cap",
@@ -1803,16 +1731,14 @@ function DimensionBar({ path, visual = "length" }) {
 	const cappedValue = capped ? `480px` : cssVar;
 	switch (visual) {
 		case "radius": return /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles$1.radiusSample,
-				borderRadius: cssVar
-			},
+			className: "sb-dimension-bar__radius-sample",
+			style: { borderRadius: cssVar },
 			"aria-hidden": true
 		});
 		case "size": {
 			const sample = /* @__PURE__ */ jsx("div", {
+				className: "sb-dimension-bar__size-sample",
 				style: {
-					...styles$1.sizeSample,
 					width: cappedValue,
 					height: cappedValue
 				},
@@ -1822,10 +1748,8 @@ function DimensionBar({ path, visual = "length" }) {
 		}
 		default: {
 			const bar = /* @__PURE__ */ jsx("div", {
-				style: {
-					...styles$1.bar,
-					width: cappedValue
-				},
+				className: "sb-dimension-bar__bar",
+				style: { width: cappedValue },
 				"aria-hidden": true
 			});
 			return capped ? withCap(bar) : bar;
@@ -2287,29 +2211,6 @@ function usePrefersReducedMotion() {
 //#region src/motion-preview/MotionSample.tsx
 const DEFAULT_DURATION_MS = 300;
 const DEFAULT_EASING = "cubic-bezier(0.2, 0, 0, 1)";
-const styles = {
-	track: {
-		position: "relative",
-		height: 36,
-		background: SURFACE_MUTED,
-		borderRadius: 18,
-		overflow: "hidden"
-	},
-	ball: {
-		position: "absolute",
-		top: "50%",
-		width: 28,
-		height: 28,
-		marginTop: -14,
-		borderRadius: "50%",
-		background: "var(--swatchbook-accent-bg, #3b82f6)"
-	},
-	reducedMotion: {
-		fontSize: 11,
-		color: TEXT_MUTED,
-		fontStyle: "italic"
-	}
-};
 function extractDurationMs(raw) {
 	if (raw == null) return NaN;
 	if (typeof raw === "object") {
@@ -2404,7 +2305,7 @@ function MotionSample({ path, speed = 1, runKey = 0 }) {
 		reducedMotion
 	]);
 	if (reducedMotion) return /* @__PURE__ */ jsxs("div", {
-		style: styles.reducedMotion,
+		className: "sb-motion-sample__reduced-motion",
 		children: [
 			"Animation suppressed by ",
 			/* @__PURE__ */ jsx("code", { children: "prefers-reduced-motion: reduce" }),
@@ -2412,13 +2313,10 @@ function MotionSample({ path, speed = 1, runKey = 0 }) {
 		]
 	});
 	return /* @__PURE__ */ jsx("div", {
-		style: styles.track,
+		className: "sb-motion-sample__track",
 		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				...styles.ball,
-				left: phase === 1 ? "calc(100% - 32px)" : "4px",
-				transition: `left ${scaledDuration}ms ${easing}`
-			},
+			className: cx("sb-motion-sample__ball", phase === 1 ? "sb-motion-sample__ball--end" : "sb-motion-sample__ball--start"),
+			style: { transition: `left ${scaledDuration}ms ${easing}` },
 			"aria-hidden": true
 		})
 	});
@@ -2660,20 +2558,10 @@ function useSwatchbookData() {
 }
 //#endregion
 //#region src/shadow-preview/ShadowSample.tsx
-const sampleStyle = {
-	width: 120,
-	height: 56,
-	background: SURFACE_RAISED,
-	border: BORDER_FAINT,
-	borderRadius: 6
-};
 function ShadowSample({ path }) {
-	const cssVar = resolveCssVar(path, useProject());
 	return /* @__PURE__ */ jsx("div", {
-		style: {
-			...sampleStyle,
-			boxShadow: cssVar
-		},
+		className: "sb-shadow-sample",
+		style: { boxShadow: resolveCssVar(path, useProject()) },
 		"aria-hidden": true
 	});
 }
@@ -3048,10 +2936,7 @@ function AxisVariance({ path }) {
 						}),
 						value,
 						/* @__PURE__ */ jsx("span", {
-							style: {
-								opacity: .6,
-								marginLeft: 8
-							},
+							className: "sb-token-detail__constant-label-note",
 							children: "same across every axis"
 						})
 					]
@@ -3085,8 +2970,7 @@ function AxisVariance({ path }) {
 				"data-axis": axisName,
 				"data-context": row.ctx,
 				children: [/* @__PURE__ */ jsx("td", {
-					className: "sb-token-detail__theme-cell",
-					style: { width: "30%" },
+					className: "sb-token-detail__theme-cell sb-token-detail__theme-cell--label",
 					children: row.ctx
 				}), /* @__PURE__ */ jsxs("td", {
 					className: "sb-token-detail__theme-cell",
@@ -3113,22 +2997,14 @@ function AxisVariance({ path }) {
 			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
 				className: "sb-token-detail__theme-row",
 				children: [/* @__PURE__ */ jsxs("th", {
-					className: "sb-token-detail__theme-cell",
-					style: {
-						textAlign: "left",
-						opacity: .7
-					},
+					className: "sb-token-detail__theme-cell sb-token-detail__theme-cell--header",
 					children: [
 						rowAxis.name,
 						" \\ ",
 						colAxis.name
 					]
 				}), colAxis.contexts.map((col) => /* @__PURE__ */ jsx("th", {
-					className: "sb-token-detail__theme-cell",
-					style: {
-						textAlign: "left",
-						opacity: .7
-					},
+					className: "sb-token-detail__theme-cell sb-token-detail__theme-cell--header",
 					children: col
 				}, col))]
 			}) }), /* @__PURE__ */ jsx("tbody", { children: rowAxis.contexts.map((row) => /* @__PURE__ */ jsxs("tr", {
@@ -3158,8 +3034,7 @@ function AxisVariance({ path }) {
 			}, row)) })]
 		}),
 		extra.length > 0 && /* @__PURE__ */ jsxs("div", {
-			className: "sb-token-detail__aliased-by-truncated",
-			style: { marginTop: 6 },
+			className: "sb-token-detail__aliased-by-truncated sb-token-detail__aliased-by-truncated--axis-note",
 			children: [
 				"Values also vary with ",
 				extra.map((a) => a.name).join(", "),
@@ -3270,7 +3145,7 @@ function CompositeBreakdownContent({ type, rawValue, partialAliasOf, resolved, c
 			children: layers.map((layer, i) => {
 				const v = layer;
 				return /* @__PURE__ */ jsxs("div", {
-					style: { display: "contents" },
+					className: "sb-token-detail__shadow-layer",
 					children: [
 						multi && /* @__PURE__ */ jsxs("div", {
 							className: "sb-token-detail__breakdown-layer-header",
@@ -3612,11 +3487,8 @@ function TransitionSample({ transition, durationMs }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__motion-track",
 		children: /* @__PURE__ */ jsx("div", {
-			className: "sb-token-detail__motion-ball",
-			style: {
-				left: phase === 1 ? "calc(100% - 28px)" : "4px",
-				transition
-			},
+			className: cx("sb-token-detail__motion-ball", phase === 1 ? "sb-token-detail__motion-ball--end" : "sb-token-detail__motion-ball--start"),
+			style: { transition },
 			"aria-hidden": true
 		})
 	});
@@ -3840,7 +3712,7 @@ function TokenDetail({ path, heading }) {
 					outOfGamut && /* @__PURE__ */ jsx("span", {
 						title: "Out of sRGB gamut for this format",
 						"aria-label": "out of gamut",
-						style: { marginLeft: 6 },
+						className: "sb-token-detail__out-of-gamut-icon",
 						children: "⚠"
 					}),
 					/* @__PURE__ */ jsx(CopyButton$1, {
@@ -4314,7 +4186,10 @@ function TokenNavigator({ root, type, initiallyExpanded = 1, searchable = true,
 	}, [visibleTree, searchExpanded]);
 	if (tree.length === 0) return /* @__PURE__ */ jsx("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),
-		children: /* @__PURE__ */ jsx(EmptyState, { children: root ? `No tokens under "${root}"${typeFilter ? ` matching ${typeLabel.slice(3)}` : ""}.` : typeFilter ? `No tokens matching ${typeLabel.slice(3)} in the active theme.` : "No tokens in the active theme." })
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			children: root ? `No tokens under "${root}"${typeFilter ? ` matching ${typeLabel.slice(3)}` : ""}.` : typeFilter ? `No tokens matching ${typeLabel.slice(3)} in the active theme.` : "No tokens in the active theme."
+		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		...blockWrapperAttrs(cssVarPrefix, activeAxes),