@unpunnyfuns/swatchbook-addon 0.1.0

package/dist/manager.mjs

@@ -0,0 +1,903 @@
+import { a as GLOBAL_KEY, d as TOOL_ID, n as AXES_GLOBAL_KEY, o as INIT_EVENT, r as COLOR_FORMAT_GLOBAL_KEY, s as PANEL_ID, t as ADDON_ID } from "./constants-1plfdgh7.mjs";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { IconButton, Placeholder, ScrollArea, WithTooltipPure } from "storybook/internal/components";
+import { addons, types, useGlobals, useStorybookApi } from "storybook/manager-api";
+//#region src/panel.tsx
+/** `React.createElement` alias so the manager bundle avoids `react/jsx-runtime`. */
+const h$1 = React.createElement;
+function usePayload() {
+	const [payload, setPayload] = useState(null);
+	useEffect(() => {
+		const channel = addons.getChannel();
+		const onInit = (next) => setPayload(next);
+		channel.on(INIT_EVENT, onInit);
+		return () => {
+			channel.off(INIT_EVENT, onInit);
+		};
+	}, []);
+	return payload;
+}
+function makeCssVarName(path, prefix) {
+	const tail = path.replaceAll(".", "-");
+	return prefix ? `--${prefix}-${tail}` : `--${tail}`;
+}
+async function copy(text) {
+	try {
+		await navigator.clipboard.writeText(text);
+	} catch {}
+}
+/** Format a token `$value` into a short display string. */
+function formatValue(value) {
+	if (value == null) return "";
+	if (typeof value === "string" || typeof value === "number") return String(value);
+	if (typeof value === "object") {
+		const v = value;
+		if (typeof v["hex"] === "string") return v["hex"];
+		if ("value" in v && "unit" in v) return `${String(v["value"])}${String(v["unit"])}`;
+		return JSON.stringify(value).slice(0, 80);
+	}
+	return String(value);
+}
+const containerStyle = {
+	display: "flex",
+	flexDirection: "column",
+	height: "100%"
+};
+const headerStyle = {
+	padding: "8px 12px",
+	borderBottom: "1px solid rgba(128,128,128,0.2)",
+	display: "flex",
+	flexDirection: "column",
+	gap: 6
+};
+const axisIndicatorStyle = {
+	fontSize: 11,
+	fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace",
+	opacity: .7
+};
+const treeWrapperStyle = {
+	fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+	fontSize: 12,
+	padding: 8
+};
+const groupRowStyle = {
+	display: "flex",
+	alignItems: "center",
+	gap: 6,
+	padding: "4px 6px",
+	borderRadius: 4,
+	cursor: "pointer",
+	userSelect: "none",
+	outline: "none"
+};
+const leafRowStyle = {
+	display: "flex",
+	alignItems: "center",
+	gap: 8,
+	padding: "4px 6px",
+	borderRadius: 4,
+	cursor: "pointer",
+	border: "none",
+	background: "transparent",
+	color: "inherit",
+	width: "100%",
+	textAlign: "left",
+	fontFamily: "inherit",
+	fontSize: "inherit",
+	outline: "none"
+};
+const caretStyle = {
+	display: "inline-block",
+	width: 12,
+	textAlign: "center",
+	opacity: .6
+};
+const treeUlStyle = {
+	listStyle: "none",
+	margin: 0,
+	padding: 0
+};
+const nestedUlStyle = {
+	listStyle: "none",
+	margin: 0,
+	paddingLeft: 18,
+	borderLeft: "1px solid rgba(128,128,128,0.2)"
+};
+const typePillStyle = {
+	display: "inline-block",
+	padding: "1px 6px",
+	borderRadius: 4,
+	fontSize: 10,
+	letterSpacing: .5,
+	textTransform: "uppercase",
+	background: "rgba(128,128,128,0.15)"
+};
+const valueStyle = {
+	marginLeft: "auto",
+	opacity: .7,
+	fontSize: 11,
+	maxWidth: "40%",
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+};
+const countStyle = {
+	marginLeft: "auto",
+	fontSize: 11,
+	opacity: .7
+};
+const swatchStyle = {
+	display: "inline-block",
+	width: 14,
+	height: 14,
+	borderRadius: 3,
+	border: "1px solid rgba(128,128,128,0.3)",
+	marginLeft: 8
+};
+const searchInputStyle = {
+	width: "100%",
+	padding: "4px 8px",
+	fontSize: 12,
+	border: "1px solid rgba(128,128,128,0.3)",
+	borderRadius: 4,
+	background: "transparent",
+	color: "inherit"
+};
+function buildTree(resolved) {
+	const rootNode = {
+		kind: "group",
+		segment: "",
+		path: "",
+		children: []
+	};
+	for (const [path, token] of Object.entries(resolved)) {
+		const segments = path.split(".");
+		let node = rootNode;
+		for (let i = 0; i < segments.length - 1; i += 1) {
+			const seg = segments[i];
+			const prefix = segments.slice(0, i + 1).join(".");
+			let child = node.children.find((c) => c.kind === "group" && c.segment === seg);
+			if (!child) {
+				child = {
+					kind: "group",
+					segment: seg,
+					path: prefix,
+					children: []
+				};
+				node.children.push(child);
+			}
+			node = child;
+		}
+		const leafSegment = segments[segments.length - 1];
+		node.children.push({
+			kind: "leaf",
+			segment: leafSegment,
+			path,
+			token
+		});
+	}
+	sortTree(rootNode);
+	return rootNode.children;
+}
+function sortTree(node) {
+	node.children.sort((a, b) => {
+		if (a.kind !== b.kind) return a.kind === "group" ? -1 : 1;
+		return a.segment.localeCompare(b.segment);
+	});
+	for (const c of node.children) if (c.kind === "group") sortTree(c);
+}
+function collectInitialExpanded(nodes, remainingDepth, out) {
+	if (remainingDepth <= 0) return;
+	for (const node of nodes) {
+		if (node.kind !== "group") continue;
+		out.add(node.path);
+		collectInitialExpanded(node.children, remainingDepth - 1, out);
+	}
+}
+function countLeaves(node) {
+	if (node.kind === "leaf") return 1;
+	let n = 0;
+	for (const c of node.children) n += countLeaves(c);
+	return n;
+}
+function filterTree(nodes, query) {
+	if (!query) return nodes;
+	const out = [];
+	for (const node of nodes) {
+		if (node.kind === "leaf") {
+			if (node.path.toLowerCase().includes(query)) out.push(node);
+			continue;
+		}
+		const filteredChildren = filterTree(node.children, query);
+		if (filteredChildren.length > 0) out.push({
+			...node,
+			children: filteredChildren
+		});
+	}
+	return out;
+}
+function collectAllGroupPaths(nodes, out) {
+	for (const node of nodes) if (node.kind === "group") {
+		out.add(node.path);
+		collectAllGroupPaths(node.children, out);
+	}
+}
+function DesignTokensPanel({ active }) {
+	const payload = usePayload();
+	const [globals] = useGlobals();
+	const [query, setQuery] = useState("");
+	const axes = useMemo(() => payload?.axes ?? [], [payload]);
+	const themes = useMemo(() => payload?.themes ?? [], [payload]);
+	const globalAxes = globals[AXES_GLOBAL_KEY];
+	const globalTheme = globals[GLOBAL_KEY];
+	const tuple = useMemo(() => {
+		const out = {};
+		for (const axis of axes) out[axis.name] = axis.default;
+		if (globalAxes && typeof globalAxes === "object") {
+			for (const axis of axes) {
+				const candidate = globalAxes[axis.name];
+				if (candidate && axis.contexts.includes(candidate)) out[axis.name] = candidate;
+			}
+			return out;
+		}
+		if (globalTheme) {
+			const match = themes.find((t) => t.name === globalTheme);
+			if (match) for (const axis of axes) {
+				const candidate = match.input[axis.name];
+				if (candidate && axis.contexts.includes(candidate)) out[axis.name] = candidate;
+			}
+		}
+		return out;
+	}, [
+		axes,
+		themes,
+		globalAxes,
+		globalTheme
+	]);
+	const themeName = useMemo(() => {
+		return themes.find((t) => {
+			const input = t.input;
+			return Object.keys(input).every((k) => input[k] === tuple[k]);
+		})?.name ?? globalTheme ?? payload?.defaultTheme ?? "";
+	}, [
+		themes,
+		tuple,
+		globalTheme,
+		payload
+	]);
+	const prefix = payload?.cssVarPrefix ?? "";
+	const tokens = useMemo(() => payload?.themesResolved[themeName] ?? {}, [payload, themeName]);
+	const tokenCount = Object.keys(tokens).length;
+	const tree = useMemo(() => buildTree(tokens), [tokens]);
+	const lowerQuery = query.toLowerCase();
+	const filtered = useMemo(() => filterTree(tree, lowerQuery), [tree, lowerQuery]);
+	const initialExpanded = useMemo(() => {
+		const out = /* @__PURE__ */ new Set();
+		collectInitialExpanded(tree, 1, out);
+		return out;
+	}, [tree]);
+	const [expanded, setExpanded] = useState(initialExpanded);
+	useEffect(() => {
+		setExpanded(initialExpanded);
+	}, [initialExpanded]);
+	const displayExpanded = useMemo(() => {
+		if (!lowerQuery) return expanded;
+		const all = /* @__PURE__ */ new Set();
+		collectAllGroupPaths(filtered, all);
+		return all;
+	}, [
+		expanded,
+		filtered,
+		lowerQuery
+	]);
+	const toggle = useCallback((path) => {
+		setExpanded((prev) => {
+			const next = new Set(prev);
+			if (next.has(path)) next.delete(path);
+			else next.add(path);
+			return next;
+		});
+	}, []);
+	const handleLeafClick = useCallback((path) => {
+		copy(`var(${makeCssVarName(path, prefix)})`);
+	}, [prefix]);
+	if (!active) return null;
+	if (!payload) return h$1(Placeholder, null, "Waiting for swatchbook preview…");
+	const showAxisIndicator = axes.length > 1 || axes.length === 1 && axes[0]?.source !== "synthetic";
+	const axisIndicatorText = axes.map((axis) => `${axis.name}: ${tuple[axis.name] ?? axis.default}`).join("  ·  ");
+	const disabledAxes = payload?.disabledAxes ?? [];
+	const pinnedSample = themes[0]?.input ?? {};
+	const disabledIndicatorText = disabledAxes.map((name) => `${name}: ${pinnedSample[name] ?? "?"} · pinned`).join("  ·  ");
+	return h$1("div", { style: containerStyle }, h$1("div", { style: headerStyle }, showAxisIndicator && h$1("div", {
+		style: axisIndicatorStyle,
+		"data-testid": "design-tokens-panel-axis-indicator"
+	}, axisIndicatorText), disabledAxes.length > 0 && h$1("div", {
+		style: {
+			...axisIndicatorStyle,
+			opacity: .5
+		},
+		"data-testid": "design-tokens-panel-disabled-axes-indicator"
+	}, disabledIndicatorText), h$1("input", {
+		style: searchInputStyle,
+		type: "search",
+		placeholder: `Search ${tokenCount} tokens in ${themeName}…`,
+		value: query,
+		onChange: (e) => setQuery(e.target.value)
+	})), h$1(DiagnosticsSection, { diagnostics: payload.diagnostics }), h$1(ScrollArea, { vertical: true }, filtered.length === 0 ? h$1(Placeholder, null, query ? "No tokens match this filter." : "No tokens in this theme.") : h$1("div", { style: treeWrapperStyle }, h$1("ul", {
+		style: treeUlStyle,
+		role: "tree"
+	}, filtered.map((node) => h$1(TreeRow, {
+		key: node.path || node.segment,
+		node,
+		expanded: displayExpanded,
+		onToggle: toggle,
+		onLeafClick: handleLeafClick,
+		prefix
+	}))))));
+}
+function TreeRow({ node, expanded, onToggle, onLeafClick, prefix }) {
+	if (node.kind === "leaf") return h$1(LeafRow, {
+		node,
+		onLeafClick,
+		prefix
+	});
+	const isOpen = expanded.has(node.path);
+	const onKey = (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			onToggle(node.path);
+		}
+	};
+	return h$1("li", {
+		role: "treeitem",
+		"aria-expanded": isOpen
+	}, h$1("div", {
+		role: "button",
+		tabIndex: 0,
+		style: groupRowStyle,
+		onClick: () => onToggle(node.path),
+		onKeyDown: onKey,
+		"data-path": node.path,
+		"data-testid": "design-tokens-panel-group"
+	}, h$1("span", {
+		style: caretStyle,
+		"aria-hidden": true
+	}, isOpen ? "▾" : "▸"), h$1("span", null, node.segment), h$1("span", { style: countStyle }, countLeaves(node))), isOpen && h$1("ul", {
+		style: nestedUlStyle,
+		role: "group"
+	}, node.children.map((c) => h$1(TreeRow, {
+		key: c.path || c.segment,
+		node: c,
+		expanded,
+		onToggle,
+		onLeafClick,
+		prefix
+	}))));
+}
+function LeafRow({ node, onLeafClick, prefix }) {
+	const type = node.token.$type ?? "";
+	const value = node.token.$value;
+	const displayValue = formatValue(value);
+	const colorPreview = type === "color" && typeof value === "object" && value !== null && typeof value["hex"] === "string" ? value["hex"] : null;
+	return h$1("li", { role: "treeitem" }, h$1("button", {
+		type: "button",
+		style: leafRowStyle,
+		onClick: () => onLeafClick(node.path),
+		title: `Click to copy var(${makeCssVarName(node.path, prefix)})`,
+		"data-path": node.path,
+		"data-testid": "design-tokens-panel-leaf"
+	}, h$1("span", {
+		style: caretStyle,
+		"aria-hidden": true
+	}, "•"), h$1("span", null, node.segment), type && h$1("span", { style: typePillStyle }, type), h$1("span", { style: valueStyle }, displayValue), colorPreview && h$1("span", {
+		style: {
+			...swatchStyle,
+			background: colorPreview
+		},
+		"aria-hidden": true
+	})));
+}
+const severityStyle = {
+	error: { color: "#d64545" },
+	warn: { color: "#b08900" },
+	info: { opacity: .6 }
+};
+const severityLabel = {
+	error: "ERROR",
+	warn: "WARN",
+	info: "INFO"
+};
+const diagnosticsSectionStyle = { borderBottom: "1px solid rgba(128,128,128,0.2)" };
+const diagnosticsSummaryStyle = {
+	padding: "10px 12px",
+	fontSize: 12,
+	cursor: "pointer",
+	userSelect: "none",
+	listStyle: "none",
+	display: "flex",
+	alignItems: "center",
+	gap: 8
+};
+const diagnosticRowStyle = {
+	display: "grid",
+	gridTemplateColumns: "60px 1fr",
+	gap: 12,
+	padding: "8px 12px",
+	fontSize: 12,
+	borderTop: "1px solid rgba(128,128,128,0.12)"
+};
+function DiagnosticsSection({ diagnostics }) {
+	const counts = diagnostics.reduce((acc, d) => {
+		acc[d.severity] = (acc[d.severity] ?? 0) + 1;
+		return acc;
+	}, {
+		error: 0,
+		warn: 0,
+		info: 0
+	});
+	const hasErrorsOrWarnings = counts.error > 0 || counts.warn > 0;
+	const summaryText = (() => {
+		if (diagnostics.length === 0) return "✔ OK · no diagnostics";
+		const parts = [];
+		if (counts.error > 0) parts.push(`✖ ${counts.error} error${counts.error === 1 ? "" : "s"}`);
+		if (counts.warn > 0) parts.push(`⚠ ${counts.warn} warning${counts.warn === 1 ? "" : "s"}`);
+		if (counts.info > 0) parts.push(`${counts.info} info`);
+		return parts.join(" · ");
+	})();
+	const summaryColor = (() => {
+		if (diagnostics.length === 0) return "#30a46c";
+		if (counts.error > 0) return "#d64545";
+		if (counts.warn > 0) return "#b08900";
+		return "inherit";
+	})();
+	return h$1("details", {
+		style: diagnosticsSectionStyle,
+		open: hasErrorsOrWarnings,
+		"data-testid": "design-tokens-panel-diagnostics"
+	}, h$1("summary", { style: {
+		...diagnosticsSummaryStyle,
+		color: summaryColor,
+		fontWeight: 600
+	} }, h$1("span", null, "Diagnostics"), h$1("span", { style: { fontWeight: 400 } }, summaryText)), diagnostics.length === 0 ? null : h$1("div", null, diagnostics.map((d, i) => h$1("div", {
+		key: `${d.group}-${i}`,
+		style: diagnosticRowStyle
+	}, h$1("span", { style: {
+		...severityStyle[d.severity],
+		fontWeight: 600,
+		fontSize: 10
+	} }, severityLabel[d.severity]), h$1("div", null, h$1("div", null, d.message), (d.filename || d.group) && h$1("div", { style: {
+		opacity: .5,
+		fontSize: 10,
+		marginTop: 4
+	} }, [
+		d.group,
+		d.filename,
+		d.line ? `:${d.line}` : ""
+	].filter(Boolean).join(" · ")))))));
+}
+//#endregion
+//#region src/manager.tsx
+/**
+* Use explicit `React.createElement` rather than JSX so the manager bundle
+* doesn't take a hard dependency on `react/jsx-runtime`. Storybook's manager
+* page injects its own React as a runtime global; `react/jsx-runtime` isn't
+* always part of that exposure, which breaks JSX with
+* "Cannot read properties of undefined (reading 'recentlyCreatedOwnerStacks')".
+* Mirrors the pattern `@storybook/addon-a11y` uses in its manager.
+*/
+const h = React.createElement;
+const EMPTY_AXES = [];
+const EMPTY_PRESETS = [];
+const EMPTY_THEMES = [];
+/**
+* Root toolbar glyph — a split-circle ("yinyang") mark: a faint filled
+* disc for the full-swatch silhouette, with a darker half-and-inset-disc
+* path reading as a pair of theme variants swapped in place.
+*/
+function SwatchbookIcon() {
+	return h("svg", {
+		width: 14,
+		height: 14,
+		viewBox: "0 0 14 14",
+		"aria-hidden": true
+	}, h("circle", {
+		cx: 7,
+		cy: 7,
+		r: 6,
+		fill: "currentColor",
+		opacity: .15
+	}), h("path", {
+		d: "M7 1a6 6 0 0 0 0 12 3 3 0 0 0 0-6 3 3 0 0 1 0-6Z",
+		fill: "currentColor"
+	}));
+}
+function tupleMatchesInput(tuple, input) {
+	const keys = Object.keys(input);
+	if (keys.length === 0) return false;
+	return keys.every((k) => input[k] === tuple[k]);
+}
+function composedNameFor(tuple, themes, fallback) {
+	return themes.find((t) => tupleMatchesInput(tuple, t.input))?.name ?? fallback;
+}
+function defaultTupleFor(axes) {
+	const out = {};
+	for (const axis of axes) out[axis.name] = axis.default;
+	return out;
+}
+/**
+* Treat the `{ name: 'theme', source: 'synthetic' }` axis — the one core
+* fabricates for single-theme projects with no resolver — as a special case
+* that uses the label "Theme" instead of the axis name. Authored single-axis
+* resolvers keep their real axis name (e.g. `mode`).
+*/
+function displayLabelFor(axis) {
+	if (axis.source === "synthetic" && axis.name === "theme") return "Theme";
+	return axis.name;
+}
+/**
+* Compose a preset's sanitized partial tuple with the axis defaults, so
+* applying a preset that only names some axes leaves the omitted ones at
+* their defaults (not blank). Matches the preview decorator's own fallback
+* logic so what the toolbar sends out is what the decorator honors.
+*/
+function presetTuple(preset, axes, defaults) {
+	const out = { ...defaults };
+	for (const axis of axes) {
+		const candidate = preset.axes[axis.name];
+		if (candidate !== void 0 && axis.contexts.includes(candidate)) out[axis.name] = candidate;
+	}
+	return out;
+}
+function tuplesEqual(a, b, axes) {
+	for (const axis of axes) if (a[axis.name] !== b[axis.name]) return false;
+	return true;
+}
+const SECTION_LABEL_STYLE = {
+	padding: "8px 12px 4px",
+	fontSize: 11,
+	textTransform: "uppercase",
+	letterSpacing: .5,
+	opacity: .6
+};
+const SECTION_BODY_STYLE = {
+	padding: "0 12px 10px",
+	display: "flex",
+	flexWrap: "wrap",
+	gap: 4
+};
+const AXIS_ROW_STYLE = {
+	padding: "0 12px 10px",
+	display: "grid",
+	gridTemplateColumns: "max-content 1fr",
+	columnGap: 12,
+	rowGap: 4,
+	alignItems: "center"
+};
+const AXIS_LABEL_STYLE = {
+	fontSize: 12,
+	fontWeight: 600,
+	opacity: .85
+};
+const AXIS_PILLS_STYLE = {
+	display: "flex",
+	flexWrap: "wrap",
+	gap: 4
+};
+const OPTION_PILL_BASE = {
+	padding: "3px 8px",
+	borderRadius: 4,
+	fontSize: 12,
+	lineHeight: "18px",
+	borderWidth: 1,
+	borderStyle: "solid",
+	borderColor: "transparent",
+	background: "transparent",
+	cursor: "pointer",
+	color: "inherit",
+	outline: "none",
+	boxShadow: "none"
+};
+const OPTION_PILL_ACTIVE = {
+	...OPTION_PILL_BASE,
+	fontWeight: 600,
+	background: "rgba(0, 122, 255, 0.12)",
+	borderColor: "rgba(0, 122, 255, 0.45)"
+};
+const PRESET_PILL_MODIFIED = {
+	display: "inline-block",
+	width: 6,
+	height: 6,
+	marginLeft: 6,
+	borderRadius: "50%",
+	background: "currentColor",
+	opacity: .6,
+	verticalAlign: "middle"
+};
+const DIVIDER_STYLE = {
+	height: 1,
+	background: "currentColor",
+	opacity: .1,
+	margin: "2px 8px"
+};
+function OptionPill({ label, active, title, onClick, trailing }) {
+	return h("button", {
+		type: "button",
+		title,
+		onClick,
+		onMouseDown: (event) => event.preventDefault(),
+		style: active ? OPTION_PILL_ACTIVE : OPTION_PILL_BASE
+	}, label, trailing ?? null);
+}
+function PresetsSection({ presets, axes, defaults, activeTuple, lastApplied, onApply }) {
+	return h("div", null, h("div", { style: SECTION_LABEL_STYLE }, "Presets"), h("div", { style: SECTION_BODY_STYLE }, ...presets.map((preset) => {
+		const matches = tuplesEqual(presetTuple(preset, axes, defaults), activeTuple, axes);
+		const modified = !matches && preset.name === lastApplied;
+		const title = preset.description ? `${preset.name} — ${preset.description}` : preset.name;
+		return h(OptionPill, {
+			key: `${TOOL_ID}/preset/${preset.name}`,
+			label: preset.name,
+			active: matches,
+			title,
+			onClick: () => onApply(preset),
+			trailing: modified ? h("span", {
+				"aria-hidden": true,
+				style: PRESET_PILL_MODIFIED
+			}) : null
+		});
+	})));
+}
+function AxisSection({ axis, active, onSelect }) {
+	const label = displayLabelFor(axis);
+	return h("div", { style: AXIS_ROW_STYLE }, h("div", {
+		style: AXIS_LABEL_STYLE,
+		title: axis.description
+	}, label), h("div", { style: AXIS_PILLS_STYLE }, ...axis.contexts.map((ctx) => h(OptionPill, {
+		key: `${TOOL_ID}/${axis.name}/${ctx}`,
+		label: ctx,
+		active: ctx === active,
+		onClick: () => onSelect(ctx)
+	}))));
+}
+const COLOR_FORMAT_OPTIONS = [
+	{
+		id: "hex",
+		label: "Hex"
+	},
+	{
+		id: "rgb",
+		label: "RGB"
+	},
+	{
+		id: "hsl",
+		label: "HSL"
+	},
+	{
+		id: "oklch",
+		label: "OKLCH"
+	},
+	{
+		id: "raw",
+		label: "Raw (JSON)"
+	}
+];
+function ColorFormatSection({ active, onSelect }) {
+	return h("div", null, h("div", { style: SECTION_LABEL_STYLE }, "Color format"), h("div", { style: SECTION_BODY_STYLE }, ...COLOR_FORMAT_OPTIONS.map((opt) => h(OptionPill, {
+		key: `${TOOL_ID}/color-format/${opt.id}`,
+		label: opt.label,
+		active: opt.id === active,
+		onClick: () => onSelect(opt.id)
+	}))));
+}
+function PopoverBody(props) {
+	const { axes, presets, defaults, activeTuple, activeColorFormat, lastApplied, onApplyPreset, onSelectAxis, onSelectColorFormat, onKeyDown } = props;
+	const sections = [];
+	if (presets.length > 0) sections.push(h(PresetsSection, {
+		key: "presets",
+		presets,
+		axes,
+		defaults,
+		activeTuple,
+		lastApplied,
+		onApply: onApplyPreset
+	}), h("div", {
+		key: "presets-divider",
+		style: DIVIDER_STYLE
+	}));
+	axes.forEach((axis, idx) => {
+		sections.push(h(AxisSection, {
+			key: `axis-${axis.name}`,
+			axis,
+			active: activeTuple[axis.name] ?? axis.default,
+			onSelect: (next) => onSelectAxis(axis.name, next)
+		}));
+		if (idx === axes.length - 1) sections.push(h("div", {
+			key: "axes-divider",
+			style: DIVIDER_STYLE
+		}));
+	});
+	sections.push(h(ColorFormatSection, {
+		key: "color-format",
+		active: activeColorFormat,
+		onSelect: onSelectColorFormat
+	}));
+	return h("div", {
+		role: "menu",
+		tabIndex: -1,
+		onKeyDown,
+		style: {
+			minWidth: 260,
+			padding: "4px 0",
+			outline: "none"
+		},
+		"data-testid": "swatchbook-toolbar-popover"
+	}, ...sections);
+}
+function AxesToolbar() {
+	const [globals, updateGlobals] = useGlobals();
+	const api = useStorybookApi();
+	const [payload, setPayload] = useState(null);
+	const [open, setOpen] = useState(false);
+	const bodyRef = useRef(null);
+	useEffect(() => {
+		const channel = addons.getChannel();
+		const onInit = (next) => setPayload(next);
+		channel.on(INIT_EVENT, onInit);
+		return () => {
+			channel.off(INIT_EVENT, onInit);
+		};
+	}, []);
+	const axes = payload?.axes ?? EMPTY_AXES;
+	const presets = payload?.presets ?? EMPTY_PRESETS;
+	const themes = payload?.themes ?? EMPTY_THEMES;
+	const defaults = useMemo(() => defaultTupleFor(axes), [axes]);
+	const [lastApplied, setLastApplied] = useState(null);
+	const globalTuple = globals[AXES_GLOBAL_KEY];
+	const activeColorFormat = globals["swatchbookColorFormat"] ?? "hex";
+	const activeTuple = useMemo(() => {
+		const out = { ...defaults };
+		if (globalTuple) for (const axis of axes) {
+			const candidate = globalTuple[axis.name];
+			if (candidate !== void 0 && axis.contexts.includes(candidate)) out[axis.name] = candidate;
+		}
+		return out;
+	}, [
+		axes,
+		defaults,
+		globalTuple
+	]);
+	const setAxis = useCallback((axisName, next) => {
+		const tuple = {
+			...activeTuple,
+			[axisName]: next
+		};
+		const composed = composedNameFor(tuple, themes, payload?.defaultTheme ?? themes[0]?.name ?? "");
+		updateGlobals({
+			[AXES_GLOBAL_KEY]: tuple,
+			[GLOBAL_KEY]: composed
+		});
+	}, [
+		activeTuple,
+		themes,
+		payload?.defaultTheme,
+		updateGlobals
+	]);
+	const applyPreset = useCallback((preset) => {
+		const tuple = presetTuple(preset, axes, defaults);
+		const composed = composedNameFor(tuple, themes, payload?.defaultTheme ?? themes[0]?.name ?? "");
+		updateGlobals({
+			[AXES_GLOBAL_KEY]: tuple,
+			[GLOBAL_KEY]: composed
+		});
+		setLastApplied(preset.name);
+	}, [
+		axes,
+		defaults,
+		themes,
+		payload?.defaultTheme,
+		updateGlobals
+	]);
+	useEffect(() => {
+		if (axes.length === 0) return;
+		/**
+		* alt+T cycles the primary (first) axis's contexts, keeping the rest
+		* of the tuple pinned. With multi-axis projects this makes the shortcut
+		* predictable — you always know which wheel you're spinning. For
+		* single-axis projects the behavior is identical to the pre-N-dropdown
+		* toolbar (cycle through every theme).
+		*/
+		const primary = axes[0];
+		if (!primary) return;
+		api.setAddonShortcut(ADDON_ID, {
+			label: `Cycle swatchbook ${displayLabelFor(primary)}`,
+			defaultShortcut: ["alt", "T"],
+			actionName: "cycleAxis",
+			showInMenu: true,
+			action: () => {
+				const current = activeTuple[primary.name] ?? primary.default;
+				const idx = primary.contexts.indexOf(current);
+				const next = primary.contexts[(idx + 1) % primary.contexts.length];
+				if (next !== void 0) setAxis(primary.name, next);
+			}
+		});
+	}, [
+		api,
+		axes,
+		activeTuple,
+		setAxis
+	]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			setOpen(false);
+		}
+	}, []);
+	/**
+	* Escape closes even when focus hasn't entered the popover yet (e.g. the
+	* user opened it via click and the mouse is still over the canvas). We
+	* attach a document-level listener when open.
+	*/
+	useEffect(() => {
+		if (!open) return;
+		const onDocKey = (e) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("keydown", onDocKey);
+		return () => document.removeEventListener("keydown", onDocKey);
+	}, [open]);
+	if (axes.length === 0) return h(IconButton, {
+		key: TOOL_ID,
+		title: "Swatchbook theme (loading…)",
+		disabled: true
+	}, h(SwatchbookIcon));
+	const button = h(IconButton, {
+		key: TOOL_ID,
+		title: `Swatchbook · ${axes.map((a) => activeTuple[a.name] ?? a.default).join(" · ")}`,
+		active: open,
+		onClick: () => setOpen((prev) => !prev)
+	}, h(SwatchbookIcon));
+	const tooltipBody = h(PopoverBody, {
+		axes,
+		presets,
+		defaults,
+		activeTuple,
+		activeColorFormat,
+		lastApplied,
+		onApplyPreset: applyPreset,
+		onSelectAxis: setAxis,
+		onSelectColorFormat: (next) => updateGlobals({ [COLOR_FORMAT_GLOBAL_KEY]: next }),
+		onKeyDown: handleKeyDown
+	});
+	return h("span", {
+		ref: bodyRef,
+		style: {
+			display: "inline-flex",
+			alignItems: "center"
+		}
+	}, h(WithTooltipPure, {
+		placement: "bottom",
+		trigger: "click",
+		visible: open,
+		onVisibleChange: (next) => setOpen(next),
+		closeOnOutsideClick: true,
+		tooltip: tooltipBody,
+		children: button
+	}));
+}
+addons.register(ADDON_ID, () => {
+	addons.add(TOOL_ID, {
+		type: types.TOOL,
+		title: "Swatchbook theme",
+		match: ({ viewMode, tabId }) => !tabId && (viewMode === "story" || viewMode === "docs"),
+		render: () => h(AxesToolbar)
+	});
+	addons.add(PANEL_ID, {
+		type: types.PANEL,
+		title: "Design Tokens",
+		match: ({ viewMode }) => viewMode === "story",
+		render: ({ active }) => h(DesignTokensPanel, { active: !!active })
+	});
+});
+//#endregion
+export {};
+
+//# sourceMappingURL=manager.mjs.map