@unpunnyfuns/swatchbook-blocks 0.15.0 → 0.17.0

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import './style.css';
 import Color from "colorjs.io";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { addons } from "storybook/preview-api";
 import { axes, css, cssVarPrefix, defaultTheme, diagnostics, presets, themes, themesResolved } from "virtual:swatchbook/tokens";
+import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
 import cx from "clsx";
 import { analyzeAxisVariance } from "@unpunnyfuns/swatchbook-core/variance";
-import { fuzzyFilter } from "@unpunnyfuns/swatchbook-core/fuzzy";
 //#region src/format-color.ts
 const COLOR_FORMATS = [
 	"hex",
@@ -872,6 +872,533 @@ function ColorPalette({ filter, groupBy, caption, sortBy = "path", sortDir = "as
 	});
 }
 //#endregion
+//#region src/internal/CopyButton.tsx
+/**
+* Copy the given string to the clipboard and briefly surface a "Copied!"
+* state. Falls back silently on unsupported clipboard APIs (older Safari,
+* insecure origins) — the click still happens, the user just won't see the
+* tick. No custom permission prompt: relies on the browser's native user-
+* activation gate.
+*/
+function CopyButton$1({ value, label, variant = "icon", className }) {
+	const [copied, setCopied] = useState(false);
+	const timerRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			if (timerRef.current !== null) clearTimeout(timerRef.current);
+		};
+	}, []);
+	const handleClick = useCallback(() => {
+		try {
+			navigator.clipboard?.writeText(value);
+		} catch {
+			return;
+		}
+		setCopied(true);
+		if (timerRef.current !== null) clearTimeout(timerRef.current);
+		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__ */ jsx("button", {
+		type: "button",
+		className: classes.join(" "),
+		onClick: handleClick,
+		"aria-label": ariaLabel,
+		title: ariaLabel,
+		"data-copied": copied ? "true" : void 0,
+		children: variant === "text" ? /* @__PURE__ */ jsx("span", {
+			className: "sb-copy-button__text",
+			children: copied ? "Copied" : "Copy"
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "sb-copy-button__glyph",
+			"aria-hidden": true,
+			children: copied ? "✓" : "⧉"
+		})
+	});
+}
+//#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 }) {
+	const { resolved, activeTheme, cssVarPrefix } = useProject();
+	const colorFormat = useColorFormat();
+	const [query, setQuery] = useState("");
+	const [selectedByBase, setSelectedByBase] = useState({});
+	const [expandedByBase, setExpandedByBase] = useState(() => /* @__PURE__ */ new Set());
+	const defs = useMemo(() => buildVariantDefs(variants), [variants]);
+	const groups = useMemo(() => {
+		const sorted = sortTokens(Object.entries(resolved).filter(([path, token]) => {
+			if (token.$type !== "color") return false;
+			return globMatch(path, filter);
+		}), {
+			by: sortBy,
+			dir: sortDir
+		});
+		const groupMap = /* @__PURE__ */ new Map();
+		for (const [path, token] of sorted) {
+			const raw = token.$value;
+			const hex = formatColor(raw, "hex");
+			const hsl = formatColor(raw, "hsl");
+			const oklch = formatColor(raw, "oklch");
+			const active = pickActiveFormat(raw, colorFormat, hex, hsl, oklch);
+			const match = matchVariant(path, defs.matchOrder);
+			const variant = {
+				label: match?.label ?? BASE_LABEL,
+				path,
+				cssVar: makeCssVar(path, cssVarPrefix),
+				value: active.value,
+				outOfGamut: active.outOfGamut,
+				hex: hex.value,
+				hsl: hsl.value,
+				oklch: oklch.value,
+				...token.$description !== void 0 && { description: token.$description },
+				...token.aliasOf !== void 0 && { aliasOf: token.aliasOf },
+				...token.aliasChain !== void 0 && { aliasChain: token.aliasChain }
+			};
+			const basePath = match?.basePath ?? path;
+			const existing = groupMap.get(basePath);
+			if (existing) existing.variants.push(variant);
+			else groupMap.set(basePath, {
+				base: basePath,
+				variants: [variant]
+			});
+		}
+		const out = [];
+		for (const { base, variants: vs } of groupMap.values()) {
+			vs.sort((a, b) => orderIndex(a.label, defs) - orderIndex(b.label, defs));
+			const searchText = vs.map((v) => `${v.path} ${v.value}`).join(" ");
+			out.push({
+				base,
+				variants: vs,
+				searchText
+			});
+		}
+		return out;
+	}, [
+		resolved,
+		filter,
+		cssVarPrefix,
+		sortBy,
+		sortDir,
+		defs,
+		colorFormat
+	]);
+	const visibleGroups = useMemo(() => {
+		if (!searchable || query.trim() === "") return groups;
+		return fuzzyFilter(groups, query, (g) => g.searchText);
+	}, [
+		groups,
+		query,
+		searchable
+	]);
+	const totalTokens = useMemo(() => groups.reduce((n, g) => n + g.variants.length, 0), [groups]);
+	const toggleExpand = useCallback((base) => {
+		setExpandedByBase((prev) => {
+			const next = new Set(prev);
+			if (next.has(base)) next.delete(base);
+			else next.add(base);
+			return next;
+		});
+	}, []);
+	const selectVariant = useCallback((base, label) => {
+		setSelectedByBase((prev) => ({
+			...prev,
+			[base]: label
+		}));
+	}, []);
+	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", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "sb-block__empty",
+			children: "No color tokens match this filter."
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...themeAttrs(cssVarPrefix, activeTheme),
+		children: [searchable && /* @__PURE__ */ jsx("div", {
+			className: "sb-color-table__search",
+			children: /* @__PURE__ */ jsx("input", {
+				type: "search",
+				className: "sb-color-table__search-input",
+				placeholder: "Search colors…",
+				value: query,
+				onChange: (e) => setQuery(e.target.value),
+				"aria-label": "Fuzzy-search colors by path or value",
+				"data-testid": "color-table-search"
+			})
+		}), /* @__PURE__ */ jsxs("table", {
+			className: "sb-color-table__table",
+			children: [
+				/* @__PURE__ */ jsx("caption", {
+					className: "sb-color-table__caption",
+					children: captionText
+				}),
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", {
+						className: "sb-color-table__th sb-color-table__th--swatch",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "sb-color-table__sr-only",
+							children: "Swatch"
+						})
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "sb-color-table__th sb-color-table__th--path",
+						children: "Name"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "sb-color-table__th",
+						children: "Value"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "sb-color-table__th",
+						children: "CSS var"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "sb-color-table__th",
+						children: "Alias"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "sb-color-table__th sb-color-table__th--expand",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "sb-color-table__sr-only",
+							children: "Expand"
+						})
+					})
+				] }) }),
+				/* @__PURE__ */ jsxs("tbody", { children: [visibleGroups.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
+					colSpan: COLUMN_COUNT,
+					className: "sb-color-table__td sb-color-table__empty-row",
+					children: [
+						"No colors match \"",
+						query.trim(),
+						"\"."
+					]
+				}) }), visibleGroups.map((group) => /* @__PURE__ */ jsx(GroupRow, {
+					group,
+					selectedLabel: selectedByBase[group.base],
+					expanded: expandedByBase.has(group.base),
+					onToggleExpand: toggleExpand,
+					onSelectVariant: selectVariant,
+					...onSelect !== void 0 && { onSelect }
+				}, group.base))] })
+			]
+		})]
+	});
+}
+function GroupRow({ group, selectedLabel, expanded, onToggleExpand, onSelectVariant, onSelect }) {
+	const multi = group.variants.length > 1;
+	const active = group.variants.find((v) => v.label === selectedLabel) ?? group.variants[0];
+	const nameText = multi ? group.base : active.path;
+	const handleRowActivate = () => {
+		if (onSelect) onSelect(active.path);
+		else onToggleExpand(group.base);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
+		className: cx("sb-color-table__row", { "sb-color-table__row--expanded": expanded }),
+		onClick: handleRowActivate,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				handleRowActivate();
+			}
+		},
+		tabIndex: 0,
+		"aria-label": onSelect ? `Inspect ${active.path}` : expanded ? `Collapse ${group.base}` : `Expand ${group.base}`,
+		"data-testid": "color-table-row",
+		"data-path": active.path,
+		"data-base": group.base,
+		children: [
+			/* @__PURE__ */ jsx("td", {
+				className: "sb-color-table__td sb-color-table__swatch-cell",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "sb-color-table__swatch",
+					style: { background: active.cssVar },
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ jsxs("td", {
+				className: cx("sb-color-table__td", "sb-color-table__path"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "sb-color-table__path-text",
+					children: nameText
+				}), multi && /* @__PURE__ */ jsx("span", {
+					className: "sb-color-table__variant-pills",
+					onClick: (e) => e.stopPropagation(),
+					onKeyDown: (e) => e.stopPropagation(),
+					role: "presentation",
+					children: group.variants.map((v) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: cx("sb-color-table__variant-pill", { "sb-color-table__variant-pill--active": v.label === active.label }),
+						onClick: () => onSelectVariant(group.base, v.label),
+						"aria-pressed": v.label === active.label,
+						"data-testid": "color-table-variant",
+						"data-variant": v.label,
+						children: v.label
+					}, v.label))
+				})]
+			}),
+			/* @__PURE__ */ jsx(ValueCell, {
+				value: active.value,
+				label: `Copy value ${active.value}`,
+				children: active.outOfGamut && /* @__PURE__ */ jsx("span", {
+					title: "Out of sRGB gamut for this format",
+					"aria-label": "out of gamut",
+					className: "sb-color-table__gamut-warn",
+					children: "⚠"
+				})
+			}),
+			/* @__PURE__ */ jsx(ValueCell, {
+				value: active.cssVar,
+				label: `Copy CSS var ${active.cssVar}`
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: "sb-color-table__td sb-color-table__alias",
+				children: active.aliasOf ? /* @__PURE__ */ jsx("span", {
+					className: "sb-color-table__alias-text",
+					children: active.aliasOf
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "sb-color-table__alias-empty",
+					"aria-hidden": true,
+					children: "—"
+				})
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: "sb-color-table__td sb-color-table__expand-cell",
+				children: !onSelect && /* @__PURE__ */ jsx("span", {
+					className: cx("sb-color-table__chevron", { "sb-color-table__chevron--expanded": expanded }),
+					"aria-hidden": true,
+					children: "▸"
+				})
+			})
+		]
+	}), expanded && !onSelect && /* @__PURE__ */ jsx("tr", {
+		className: "sb-color-table__detail-row",
+		"data-testid": "color-table-detail",
+		children: /* @__PURE__ */ jsx("td", {
+			colSpan: COLUMN_COUNT,
+			className: "sb-color-table__td sb-color-table__detail-cell",
+			children: /* @__PURE__ */ jsx(ExpandedDetail, {
+				group,
+				active
+			})
+		})
+	})] });
+}
+function ExpandedDetail({ group, active }) {
+	const hasDescription = active.description !== void 0 && active.description.length > 0;
+	const chain = active.aliasChain && active.aliasChain.length > 0 ? active.aliasChain : void 0;
+	const multi = group.variants.length > 1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sb-color-table__detail",
+		children: [
+			hasDescription && /* @__PURE__ */ jsx("p", {
+				className: "sb-color-table__description",
+				children: active.description
+			}),
+			chain && /* @__PURE__ */ jsxs("p", {
+				className: "sb-color-table__chain",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "sb-color-table__detail-label",
+						children: "Alias chain:"
+					}),
+					" ",
+					chain.join(" → ")
+				]
+			}),
+			multi && /* @__PURE__ */ jsxs("div", {
+				className: "sb-color-table__variant-grid",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "sb-color-table__variant-grid-header",
+					children: "All variants"
+				}), /* @__PURE__ */ jsxs("table", {
+					className: "sb-color-table__subtable",
+					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__subth",
+							children: "Variant"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__subth",
+							children: "Path"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__subth",
+							children: "HEX"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__subth",
+							children: "HSL"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "sb-color-table__subth",
+							children: "OKLCH"
+						})
+					] }) }), /* @__PURE__ */ jsx("tbody", { children: group.variants.map((v) => /* @__PURE__ */ jsxs("tr", {
+						className: cx({ "sb-color-table__subrow--active": v.label === active.label }),
+						children: [
+							/* @__PURE__ */ jsx("td", {
+								className: "sb-color-table__subtd",
+								children: v.label
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "sb-color-table__subtd sb-color-table__subtd--path",
+								children: v.path
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "sb-color-table__subtd",
+								children: v.hex
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "sb-color-table__subtd",
+								children: v.hsl
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "sb-color-table__subtd",
+								children: v.oklch
+							})
+						]
+					}, v.label)) })]
+				})]
+			}),
+			!hasDescription && !chain && !multi && /* @__PURE__ */ jsx("p", {
+				className: "sb-color-table__detail-empty",
+				children: "No description or alias chain authored for this token."
+			})
+		]
+	});
+}
+function ValueCell({ value, label, children }) {
+	return /* @__PURE__ */ jsxs("td", {
+		className: "sb-color-table__td sb-color-table__value-cell",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sb-color-table__value-text",
+				title: value,
+				children: value
+			}),
+			children,
+			/* @__PURE__ */ jsx("span", {
+				className: "sb-color-table__copy-wrap",
+				onClick: (e) => e.stopPropagation(),
+				onKeyDown: (e) => e.stopPropagation(),
+				role: "presentation",
+				children: /* @__PURE__ */ jsx(CopyButton$1, {
+					value,
+					label,
+					className: "sb-color-table__copy"
+				})
+			})
+		]
+	});
+}
+/**
+* Pick the value + gamut flag to display in the single Value column based
+* on the active color-format context. We pre-compute hex/hsl/oklch for the
+* expanded sub-table regardless; the extras (`rgb`, `raw`) take a fresh
+* `formatColor` pass. Keeps the hot path fast while staying honest about
+* out-of-gamut warnings per-format.
+*/
+function pickActiveFormat(raw, colorFormat, hex, hsl, oklch) {
+	switch (colorFormat) {
+		case "hex": return {
+			value: hex.value,
+			outOfGamut: hex.outOfGamut
+		};
+		case "hsl": return {
+			value: hsl.value,
+			outOfGamut: hsl.outOfGamut
+		};
+		case "oklch": return {
+			value: oklch.value,
+			outOfGamut: oklch.outOfGamut
+		};
+		default: {
+			const extra = formatColor(raw, colorFormat);
+			return {
+				value: extra.value,
+				outOfGamut: extra.outOfGamut
+			};
+		}
+	}
+}
+function buildVariantDefs(variants) {
+	if (!variants) return {
+		matchOrder: [],
+		displayOrder: []
+	};
+	const entries = [];
+	const displayOrder = [];
+	for (const [label, suffix] of Object.entries(variants)) {
+		if (suffix.length === 0) continue;
+		entries.push({
+			label,
+			suffix
+		});
+		displayOrder.push(label);
+	}
+	return {
+		matchOrder: entries.toSorted((a, b) => b.suffix.length - a.suffix.length),
+		displayOrder
+	};
+}
+/**
+* Position of a label within a group — the `base` entry always sorts first,
+* then declared labels in the order the caller wrote them in the `variants`
+* prop. Unknown labels (shouldn't happen in practice) fall to the end.
+*/
+function orderIndex(label, defs) {
+	if (label === BASE_LABEL) return -1;
+	const idx = defs.displayOrder.indexOf(label);
+	return idx >= 0 ? idx : Number.POSITIVE_INFINITY;
+}
+/**
+* Resolve the variant label + base path for a token, if any. The leaf
+* (last dot-segment) must either equal the suffix outright (dot-segment
+* form: `hi.disabled` matches suffix `disabled`) or end in `-<suffix>`
+* (hyphen-tail form: `hi-d` matches `d`). The leading hyphen is required
+* for the tail form so suffix `0` can't hit `neutral-900` by character.
+*
+* Returned `basePath` is what gets used as the grouping key:
+* - Dot-segment match → parent path (drop the last dot-segment)
+* - Hyphen-tail match → same dot-depth, leaf with `-<suffix>` stripped
+*
+* Entries in `matchOrder` are pre-sorted longest-first, so `h-dark` wins
+* over `dark` for a path ending in `-h-dark`.
+*/
+function matchVariant(path, matchOrder) {
+	if (matchOrder.length === 0) return void 0;
+	const segments = path.split(".");
+	const leaf = segments.at(-1) ?? path;
+	for (const entry of matchOrder) {
+		if (leaf === entry.suffix) {
+			const parent = segments.slice(0, -1).join(".");
+			if (parent.length === 0) continue;
+			return {
+				label: entry.label,
+				basePath: parent
+			};
+		}
+		const tailMarker = `-${entry.suffix}`;
+		if (leaf.endsWith(tailMarker)) {
+			const trimmed = leaf.slice(0, -tailMarker.length);
+			if (trimmed.length === 0) continue;
+			const copy = segments.slice(0, -1);
+			copy.push(trimmed);
+			return {
+				label: entry.label,
+				basePath: copy.join(".")
+			};
+		}
+	}
+}
+//#endregion
 //#region src/Diagnostics.tsx
 const severityLabel = {
 	error: "ERROR",
@@ -2022,7 +2549,7 @@ function AliasChain({ path }) {
 		return [path];
 	}, [token, path]);
 	if (chain.length <= 1) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__section-header",
 		children: "Alias chain"
 	}), /* @__PURE__ */ jsx("div", {
@@ -2051,7 +2578,7 @@ function AliasedBy({ path }) {
 	const tree = useMemo(() => buildAliasedByTree(path, resolved), [path, resolved]);
 	const truncated = useMemo(() => treeHasTruncation(tree), [tree]);
 	if (tree.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__section-header",
 			children: "Aliased by"
@@ -2150,11 +2677,11 @@ function AxisVariance({ path }) {
 		themes,
 		themesResolved
 	]);
-	if (themes.length === 0) return /* @__PURE__ */ jsx(Fragment, {});
+	if (themes.length === 0) return /* @__PURE__ */ jsx(Fragment$1, {});
 	if (variance.kind === "constant") {
 		const anyTheme = themes[0];
 		const value = anyTheme ? formatFn(themesResolved[anyTheme.name]?.[path]) : "—";
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__section-header",
 			children: "Values across axes"
 		}), /* @__PURE__ */ jsx("table", {
@@ -2190,9 +2717,9 @@ function AxisVariance({ path }) {
 	}
 	if (variance.kind === "one-axis") {
 		const axisName = variance.varyingAxes[0];
-		if (!axisName) return /* @__PURE__ */ jsx(Fragment, {});
+		if (!axisName) return /* @__PURE__ */ jsx(Fragment$1, {});
 		const axis = axes.find((a) => a.name === axisName);
-		if (!axis) return /* @__PURE__ */ jsx(Fragment, {});
+		if (!axis) return /* @__PURE__ */ jsx(Fragment$1, {});
 		const contextValues = axis.contexts.map((ctx) => {
 			const target = {
 				...activeAxes,
@@ -2208,7 +2735,7 @@ function AxisVariance({ path }) {
 				value: name ? formatFn(themesResolved[name]?.[path]) : "—"
 			};
 		});
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "sb-token-detail__section-header",
 			children: ["Varies with ", axisName]
 		}), /* @__PURE__ */ jsx("table", {
@@ -2235,8 +2762,8 @@ function AxisVariance({ path }) {
 		})] });
 	}
 	const [rowAxis, colAxis, ...extra] = variance.varyingAxes.map((name) => axes.find((a) => a.name === name)).filter((a) => Boolean(a)).toSorted((a, b) => b.contexts.length - a.contexts.length);
-	if (!rowAxis || !colAxis) return /* @__PURE__ */ jsx(Fragment, {});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	if (!rowAxis || !colAxis) return /* @__PURE__ */ jsx(Fragment$1, {});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: "sb-token-detail__section-header",
 			children: ["Varies with ", variance.varyingAxes.join(" × ")]
@@ -2481,7 +3008,7 @@ function renderKeyValueList(rows) {
 }
 function KeyValueRow({ label, value, alias }) {
 	const hasAlias = alias && alias.length > 0;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		className: "sb-token-detail__breakdown-key",
 		children: label
 	}), /* @__PURE__ */ jsxs("span", {
@@ -2737,7 +3264,7 @@ function ConsumerOutput({ path }) {
 	const { token, cssVar, activeAxes } = useTokenDetailData(path);
 	if (!token) return null;
 	const tupleLabel = Object.entries(activeAxes).map(([k, v]) => `${k}=${v}`).join(", ");
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "sb-token-detail__section-header",
 			children: "Consumer output"
@@ -2817,7 +3344,7 @@ function TokenHeader({ path, heading }) {
 			"."
 		]
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("h3", {
 			className: "sb-token-detail__heading",
 			children: heading ?? path
@@ -2840,12 +3367,19 @@ function TokenHeader({ path, heading }) {
 function TokenUsageSnippet({ path }) {
 	const { token, cssVar } = useTokenDetailData(path);
 	if (!token) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+	const snippet = `color: ${cssVar};`;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		className: "sb-token-detail__section-header",
 		children: "Usage"
-	}), /* @__PURE__ */ jsx("code", {
-		className: "sb-token-detail__snippet",
-		children: `color: ${cssVar};`
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "sb-token-detail__snippet-row",
+		children: [/* @__PURE__ */ jsx("code", {
+			className: "sb-token-detail__snippet",
+			children: snippet
+		}), /* @__PURE__ */ jsx(CopyButton$1, {
+			value: snippet,
+			label: `Copy usage snippet ${snippet}`
+		})]
 	})] });
 }
 //#endregion
@@ -2900,6 +3434,10 @@ function TokenDetail({ path, heading }) {
 						"aria-label": "out of gamut",
 						style: { marginLeft: 6 },
 						children: "⚠"
+					}),
+					/* @__PURE__ */ jsx(CopyButton$1, {
+						value,
+						label: `Copy value ${value}`
 					})
 				]
 			}),
@@ -3443,6 +3981,17 @@ function TokenTable({ filter, type, caption, sortBy = "path", sortDir = "asc", s
 										"aria-label": "out of gamut",
 										className: "sb-token-table__gamut-warn",
 										children: "⚠"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "sb-token-table__copy-wrap",
+										onClick: (e) => e.stopPropagation(),
+										onKeyDown: (e) => e.stopPropagation(),
+										role: "presentation",
+										children: /* @__PURE__ */ jsx(CopyButton$1, {
+											value: row.value,
+											label: `Copy value ${row.value}`,
+											className: "sb-token-table__copy"
+										})
 									})
 								]
 							})
@@ -3550,6 +4099,6 @@ function TypographyScale({ filter, sample = "The quick brown fox jumps over the
 	});
 }
 //#endregion
-export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilySample, FontWeightScale, GradientPalette, MotionPreview, MotionSample, ShadowPreview, ShadowSample, StrokeStyleSample, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
+export { AliasChain, AliasedBy, AxesContext, AxisVariance, BorderPreview, BorderSample, COLOR_FORMATS, ColorFormatContext, ColorPalette, ColorTable, CompositeBreakdown, CompositePreview, ConsumerOutput, Diagnostics, DimensionBar, DimensionScale, FontFamilySample, FontWeightScale, GradientPalette, MotionPreview, MotionSample, ShadowPreview, ShadowSample, StrokeStyleSample, SwatchbookContext, SwatchbookProvider, ThemeContext, TokenDetail, TokenHeader, TokenNavigator, TokenTable, TokenUsageSnippet, TypographyScale, formatColor, useActiveAxes, useActiveTheme, useColorFormat, useOptionalSwatchbookData, useSwatchbookData };
 
 //# sourceMappingURL=index.mjs.map