@unpunnyfuns/swatchbook-addon 0.6.1 → 0.7.0

package/dist/manager.mjs

@@ -1,7 +1,42 @@
 import { a as INIT_EVENT, c as PREVIEW_MOUSEDOWN_EVENT, d as TOOL_ID, i as GLOBAL_KEY, n as AXES_GLOBAL_KEY, o as INIT_REQUEST_EVENT, r as COLOR_FORMAT_GLOBAL_KEY, t as ADDON_ID } from "./constants-0XmrhOl_.mjs";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ThemeSwitcher } from "@unpunnyfuns/swatchbook-switcher";
 import { IconButton, WithTooltipPure } from "storybook/internal/components";
 import { addons, types, useGlobals, useStorybookApi } from "storybook/manager-api";
+//#region src/ColorFormatSelector.tsx
+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)"
+	}
+];
+const h$1 = React.createElement;
+function ColorFormatSelector({ active, onSelect }) {
+	return h$1("div", null, h$1("div", { className: "sb-switcher__section-label" }, "Color format"), h$1("div", { className: "sb-switcher__section-body" }, ...COLOR_FORMAT_OPTIONS.map((opt) => h$1("button", {
+		key: `color-format/${opt.id}`,
+		type: "button",
+		onClick: () => onSelect(opt.id),
+		onMouseDown: (event) => event.preventDefault(),
+		className: opt.id === active ? "sb-switcher__pill sb-switcher__pill--active" : "sb-switcher__pill"
+	}, opt.label))));
+}
+//#endregion
 //#region src/manager.tsx
 /**
 * Use explicit `React.createElement` rather than JSX so the manager bundle
@@ -10,6 +45,10 @@ import { addons, types, useGlobals, useStorybookApi } from "storybook/manager-ap
 * 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.
+*
+* The imported `<ThemeSwitcher>` from `@unpunnyfuns/swatchbook-switcher`
+* compiles with classic JSX (`React.createElement`) specifically so it
+* survives embedding in the manager bundle the same way.
 */
 const h = React.createElement;
 const EMPTY_AXES = [];
@@ -51,19 +90,9 @@ function defaultTupleFor(axes) {
 	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
+* their defaults (not blank). Mirrors the preview decorator's own fallback
 * logic so what the toolbar sends out is what the decorator honors.
 */
 function presetTuple(preset, axes, defaults) {
@@ -74,190 +103,6 @@ function presetTuple(preset, axes, defaults) {
 	}
 	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();
@@ -331,19 +176,6 @@ function AxesToolbar() {
 	]);
 	useEffect(() => {
 		if (presets.length === 0) return;
-		/**
-		* `alt+shift+C` cycles through the project's presets, applying the
-		* next one each press. When no preset has been applied yet, starts
-		* from the first. Stays out of Storybook's core shortcut surface —
-		* the earlier default (`alt+T`) collided with the built-in "toggle
-		* addon panel" binding on some platforms. Users can still rebind it
-		* through Storybook's own keyboard-shortcuts panel.
-		*
-		* Only registers when the project actually defines presets. For
-		* projects without presets the cycle would have nothing to cycle
-		* through, so the shortcut disappears entirely rather than sitting
-		* dead in the menu.
-		*/
 		api.setAddonShortcut(ADDON_ID, {
 			label: `Cycle swatchbook presets (${presets.length})`,
 			defaultShortcut: [
@@ -395,7 +227,7 @@ function AxesToolbar() {
 			const target = e.target;
 			if (!(target instanceof Element)) return;
 			if (bodyRef.current?.contains(target)) return;
-			if (target.closest("[data-testid=\"swatchbook-toolbar-popover\"]")) return;
+			if (target.closest("[data-testid=\"swatchbook-switcher\"]")) return;
 			setOpen(false);
 		};
 		/**
@@ -424,17 +256,20 @@ function AxesToolbar() {
 		active: open,
 		onClick: () => setOpen((prev) => !prev)
 	}, h(SwatchbookIcon));
-	const tooltipBody = h(PopoverBody, {
+	const tooltipBody = h(ThemeSwitcher, {
 		axes,
 		presets,
-		defaults,
+		themes,
 		activeTuple,
-		activeColorFormat,
+		defaults,
 		lastApplied,
-		onApplyPreset: applyPreset,
-		onSelectAxis: setAxis,
-		onSelectColorFormat: (next) => updateGlobals({ [COLOR_FORMAT_GLOBAL_KEY]: next }),
-		onKeyDown: handleKeyDown
+		onAxisChange: setAxis,
+		onPresetApply: applyPreset,
+		onKeyDown: handleKeyDown,
+		footer: h(ColorFormatSelector, {
+			active: activeColorFormat,
+			onSelect: (next) => updateGlobals({ [COLOR_FORMAT_GLOBAL_KEY]: next })
+		})
 	});
 	return h("span", {
 		ref: bodyRef,

package/dist/manager.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"manager.mjs","names":[],"sources":["../src/manager.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactElement } from 'react';\nimport { IconButton, WithTooltipPure } from 'storybook/internal/components';\nimport { addons, types, useGlobals, useStorybookApi } from 'storybook/manager-api';\nimport {\n  type InitPayload,\n  type VirtualAxis as AxisEntry,\n  type VirtualPreset as PresetEntry,\n  type VirtualTheme as ThemeEntry,\n} from '#/channel-types.ts';\nimport {\n  ADDON_ID,\n  AXES_GLOBAL_KEY,\n  COLOR_FORMAT_GLOBAL_KEY,\n  GLOBAL_KEY,\n  INIT_EVENT,\n  INIT_REQUEST_EVENT,\n  PREVIEW_MOUSEDOWN_EVENT,\n  TOOL_ID,\n} from '#/constants.ts';\n\n/**\n * Use explicit `React.createElement` rather than JSX so the manager bundle\n * doesn't take a hard dependency on `react/jsx-runtime`. Storybook's manager\n * page injects its own React as a runtime global; `react/jsx-runtime` isn't\n * always part of that exposure, which breaks JSX with\n * \"Cannot read properties of undefined (reading 'recentlyCreatedOwnerStacks')\".\n * Mirrors the pattern `@storybook/addon-a11y` uses in its manager.\n */\nconst h = React.createElement;\n\nconst EMPTY_AXES: readonly AxisEntry[] = [];\nconst EMPTY_PRESETS: readonly PresetEntry[] = [];\nconst EMPTY_THEMES: readonly ThemeEntry[] = [];\n\n/**\n * Root toolbar glyph — a split-circle (\"yinyang\") mark: a faint filled\n * disc for the full-swatch silhouette, with a darker half-and-inset-disc\n * path reading as a pair of theme variants swapped in place.\n */\nfunction SwatchbookIcon(): ReactElement {\n  return h(\n    'svg',\n    { width: 14, height: 14, viewBox: '0 0 14 14', 'aria-hidden': true },\n    h('circle', { cx: 7, cy: 7, r: 6, fill: 'currentColor', opacity: 0.15 }),\n    h('path', {\n      d: 'M7 1a6 6 0 0 0 0 12 3 3 0 0 0 0-6 3 3 0 0 1 0-6Z',\n      fill: 'currentColor',\n    }),\n  );\n}\n\nfunction tupleMatchesInput(\n  tuple: Readonly<Record<string, string>>,\n  input: Readonly<Record<string, string>>,\n): boolean {\n  const keys = Object.keys(input);\n  if (keys.length === 0) return false;\n  return keys.every((k) => input[k] === tuple[k]);\n}\n\nfunction composedNameFor(\n  tuple: Readonly<Record<string, string>>,\n  themes: readonly ThemeEntry[],\n  fallback: string,\n): string {\n  const match = themes.find((t) => tupleMatchesInput(tuple, t.input));\n  return match?.name ?? fallback;\n}\n\nfunction defaultTupleFor(axes: readonly AxisEntry[]): Record<string, string> {\n  const out: Record<string, string> = {};\n  for (const axis of axes) out[axis.name] = axis.default;\n  return out;\n}\n\n/**\n * Treat the `{ name: 'theme', source: 'synthetic' }` axis — the one core\n * fabricates for single-theme projects with no resolver — as a special case\n * that uses the label \"Theme\" instead of the axis name. Authored single-axis\n * resolvers keep their real axis name (e.g. `mode`).\n */\nfunction displayLabelFor(axis: AxisEntry): string {\n  if (axis.source === 'synthetic' && axis.name === 'theme') return 'Theme';\n  return axis.name;\n}\n\n/**\n * Compose a preset's sanitized partial tuple with the axis defaults, so\n * applying a preset that only names some axes leaves the omitted ones at\n * their defaults (not blank). Matches the preview decorator's own fallback\n * logic so what the toolbar sends out is what the decorator honors.\n */\nfunction presetTuple(\n  preset: PresetEntry,\n  axes: readonly AxisEntry[],\n  defaults: Readonly<Record<string, string>>,\n): Record<string, string> {\n  const out: Record<string, string> = { ...defaults };\n  for (const axis of axes) {\n    const candidate = preset.axes[axis.name];\n    if (candidate !== undefined && axis.contexts.includes(candidate)) {\n      out[axis.name] = candidate;\n    }\n  }\n  return out;\n}\n\nfunction tuplesEqual(\n  a: Readonly<Record<string, string>>,\n  b: Readonly<Record<string, string>>,\n  axes: readonly AxisEntry[],\n): boolean {\n  for (const axis of axes) {\n    if (a[axis.name] !== b[axis.name]) return false;\n  }\n  return true;\n}\n\nconst SECTION_LABEL_STYLE: React.CSSProperties = {\n  padding: '8px 12px 4px',\n  fontSize: 11,\n  textTransform: 'uppercase',\n  letterSpacing: 0.5,\n  opacity: 0.6,\n};\n\nconst SECTION_BODY_STYLE: React.CSSProperties = {\n  padding: '0 12px 10px',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 4,\n};\n\nconst AXIS_ROW_STYLE: React.CSSProperties = {\n  padding: '0 12px 10px',\n  display: 'grid',\n  gridTemplateColumns: 'max-content 1fr',\n  columnGap: 12,\n  rowGap: 4,\n  alignItems: 'center',\n};\n\nconst AXIS_LABEL_STYLE: React.CSSProperties = {\n  fontSize: 12,\n  fontWeight: 600,\n  opacity: 0.85,\n};\n\nconst AXIS_PILLS_STYLE: React.CSSProperties = {\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 4,\n};\n\nconst OPTION_PILL_BASE: React.CSSProperties = {\n  padding: '3px 8px',\n  borderRadius: 4,\n  fontSize: 12,\n  lineHeight: '18px',\n  // Longhand border properties (not the `border` shorthand) so\n  // active → inactive only updates `borderColor`'s value instead of\n  // *removing* the key from inline style. Removing it lets Storybook's\n  // theme paint a stray border-color on the previously-selected pill.\n  borderWidth: 1,\n  borderStyle: 'solid',\n  borderColor: 'transparent',\n  background: 'transparent',\n  cursor: 'pointer',\n  color: 'inherit',\n  outline: 'none',\n  boxShadow: 'none',\n};\n\nconst OPTION_PILL_ACTIVE: React.CSSProperties = {\n  ...OPTION_PILL_BASE,\n  fontWeight: 600,\n  background: 'rgba(0, 122, 255, 0.12)',\n  borderColor: 'rgba(0, 122, 255, 0.45)',\n};\n\nconst PRESET_PILL_MODIFIED: React.CSSProperties = {\n  display: 'inline-block',\n  width: 6,\n  height: 6,\n  marginLeft: 6,\n  borderRadius: '50%',\n  background: 'currentColor',\n  opacity: 0.6,\n  verticalAlign: 'middle',\n};\n\nconst DIVIDER_STYLE: React.CSSProperties = {\n  height: 1,\n  background: 'currentColor',\n  opacity: 0.1,\n  margin: '2px 8px',\n};\n\ninterface OptionPillProps {\n  label: string;\n  active: boolean;\n  title?: string;\n  onClick: () => void;\n  trailing?: ReactElement | null;\n}\n\nfunction OptionPill({ label, active, title, onClick, trailing }: OptionPillProps): ReactElement {\n  return h(\n    'button',\n    {\n      type: 'button',\n      title,\n      onClick,\n      // Skip focus on mouse click so Storybook's `:focus` border-color\n      // theming doesn't stick on the previously-clicked pill. Keyboard\n      // tabbing still lands focus normally — preventDefault on mousedown\n      // only blocks the implicit focus-on-click behavior.\n      onMouseDown: (event) => event.preventDefault(),\n      style: active ? OPTION_PILL_ACTIVE : OPTION_PILL_BASE,\n    },\n    label,\n    trailing ?? null,\n  );\n}\n\ninterface PresetsSectionProps {\n  presets: readonly PresetEntry[];\n  axes: readonly AxisEntry[];\n  defaults: Readonly<Record<string, string>>;\n  activeTuple: Readonly<Record<string, string>>;\n  lastApplied: string | null;\n  onApply: (preset: PresetEntry) => void;\n}\n\nfunction PresetsSection({\n  presets,\n  axes,\n  defaults,\n  activeTuple,\n  lastApplied,\n  onApply,\n}: PresetsSectionProps): ReactElement {\n  return h(\n    'div',\n    null,\n    h('div', { style: SECTION_LABEL_STYLE }, 'Presets'),\n    h(\n      'div',\n      { style: SECTION_BODY_STYLE },\n      ...presets.map((preset) => {\n        const tuple = presetTuple(preset, axes, defaults);\n        const matches = tuplesEqual(tuple, activeTuple, axes);\n        const modified = !matches && preset.name === lastApplied;\n        const title = preset.description ? `${preset.name} — ${preset.description}` : preset.name;\n        return h(OptionPill, {\n          key: `${TOOL_ID}/preset/${preset.name}`,\n          label: preset.name,\n          active: matches,\n          title,\n          onClick: () => onApply(preset),\n          trailing: modified\n            ? h('span', { 'aria-hidden': true, style: PRESET_PILL_MODIFIED })\n            : null,\n        });\n      }),\n    ),\n  );\n}\n\ninterface AxisSectionProps {\n  axis: AxisEntry;\n  active: string;\n  onSelect: (next: string) => void;\n}\n\nfunction AxisSection({ axis, active, onSelect }: AxisSectionProps): ReactElement {\n  const label = displayLabelFor(axis);\n  return h(\n    'div',\n    { style: AXIS_ROW_STYLE },\n    h('div', { style: AXIS_LABEL_STYLE, title: axis.description }, label),\n    h(\n      'div',\n      { style: AXIS_PILLS_STYLE },\n      ...axis.contexts.map((ctx) =>\n        h(OptionPill, {\n          key: `${TOOL_ID}/${axis.name}/${ctx}`,\n          label: ctx,\n          active: ctx === active,\n          onClick: () => onSelect(ctx),\n        }),\n      ),\n    ),\n  );\n}\n\nconst COLOR_FORMAT_OPTIONS: readonly { id: string; label: string }[] = [\n  { id: 'hex', label: 'Hex' },\n  { id: 'rgb', label: 'RGB' },\n  { id: 'hsl', label: 'HSL' },\n  { id: 'oklch', label: 'OKLCH' },\n  { id: 'raw', label: 'Raw (JSON)' },\n];\n\ninterface ColorFormatSectionProps {\n  active: string;\n  onSelect: (next: string) => void;\n}\n\nfunction ColorFormatSection({ active, onSelect }: ColorFormatSectionProps): ReactElement {\n  return h(\n    'div',\n    null,\n    h('div', { style: SECTION_LABEL_STYLE }, 'Color format'),\n    h(\n      'div',\n      { style: SECTION_BODY_STYLE },\n      ...COLOR_FORMAT_OPTIONS.map((opt) =>\n        h(OptionPill, {\n          key: `${TOOL_ID}/color-format/${opt.id}`,\n          label: opt.label,\n          active: opt.id === active,\n          onClick: () => onSelect(opt.id),\n        }),\n      ),\n    ),\n  );\n}\n\ninterface PopoverBodyProps {\n  axes: readonly AxisEntry[];\n  presets: readonly PresetEntry[];\n  defaults: Readonly<Record<string, string>>;\n  activeTuple: Readonly<Record<string, string>>;\n  activeColorFormat: string;\n  lastApplied: string | null;\n  onApplyPreset: (preset: PresetEntry) => void;\n  onSelectAxis: (axisName: string, next: string) => void;\n  onSelectColorFormat: (next: string) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nfunction PopoverBody(props: PopoverBodyProps): ReactElement {\n  const {\n    axes,\n    presets,\n    defaults,\n    activeTuple,\n    activeColorFormat,\n    lastApplied,\n    onApplyPreset,\n    onSelectAxis,\n    onSelectColorFormat,\n    onKeyDown,\n  } = props;\n  const sections: ReactElement[] = [];\n  if (presets.length > 0) {\n    sections.push(\n      h(PresetsSection, {\n        key: 'presets',\n        presets,\n        axes,\n        defaults,\n        activeTuple,\n        lastApplied,\n        onApply: onApplyPreset,\n      }),\n      h('div', { key: 'presets-divider', style: DIVIDER_STYLE }),\n    );\n  }\n  axes.forEach((axis, idx) => {\n    sections.push(\n      h(AxisSection, {\n        key: `axis-${axis.name}`,\n        axis,\n        active: activeTuple[axis.name] ?? axis.default,\n        onSelect: (next) => onSelectAxis(axis.name, next),\n      }),\n    );\n    if (idx === axes.length - 1) {\n      sections.push(h('div', { key: 'axes-divider', style: DIVIDER_STYLE }));\n    }\n  });\n  sections.push(\n    h(ColorFormatSection, {\n      key: 'color-format',\n      active: activeColorFormat,\n      onSelect: onSelectColorFormat,\n    }),\n  );\n  return h(\n    'div',\n    {\n      role: 'menu',\n      tabIndex: -1,\n      onKeyDown,\n      style: { minWidth: 260, padding: '4px 0', outline: 'none' },\n      'data-testid': 'swatchbook-toolbar-popover',\n    },\n    ...sections,\n  );\n}\n\nfunction AxesToolbar(): ReactElement {\n  const [globals, updateGlobals] = useGlobals();\n  const api = useStorybookApi();\n  const [payload, setPayload] = useState<InitPayload | null>(null);\n  const [open, setOpen] = useState(false);\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    const channel = addons.getChannel();\n    const onInit = (next: InitPayload): void => setPayload(next);\n    channel.on(INIT_EVENT, onInit);\n    /**\n     * Ask the preview to (re-)emit INIT_EVENT in case it already broadcast\n     * before this effect subscribed. Without this request, a late-mounting\n     * manager (story navigation, docs reload) can stay in \"loading…\" until\n     * the user triggers a globals change.\n     */\n    channel.emit(INIT_REQUEST_EVENT);\n    return () => {\n      channel.off(INIT_EVENT, onInit);\n    };\n  }, []);\n\n  const axes = payload?.axes ?? EMPTY_AXES;\n  const presets = payload?.presets ?? EMPTY_PRESETS;\n  const themes = payload?.themes ?? EMPTY_THEMES;\n  const defaults = useMemo(() => defaultTupleFor(axes), [axes]);\n  const [lastApplied, setLastApplied] = useState<string | null>(null);\n  const globalTuple = globals[AXES_GLOBAL_KEY] as Record<string, string> | undefined;\n  const activeColorFormat = (globals[COLOR_FORMAT_GLOBAL_KEY] as string | undefined) ?? 'hex';\n\n  const activeTuple = useMemo<Record<string, string>>(() => {\n    const out: Record<string, string> = { ...defaults };\n    if (globalTuple) {\n      for (const axis of axes) {\n        const candidate = globalTuple[axis.name];\n        if (candidate !== undefined && axis.contexts.includes(candidate)) {\n          out[axis.name] = candidate;\n        }\n      }\n    }\n    return out;\n  }, [axes, defaults, globalTuple]);\n\n  const setAxis = useCallback(\n    (axisName: string, next: string): void => {\n      const tuple: Record<string, string> = { ...activeTuple, [axisName]: next };\n      const fallback = payload?.defaultTheme ?? themes[0]?.name ?? '';\n      const composed = composedNameFor(tuple, themes, fallback);\n      updateGlobals({ [AXES_GLOBAL_KEY]: tuple, [GLOBAL_KEY]: composed });\n    },\n    [activeTuple, themes, payload?.defaultTheme, updateGlobals],\n  );\n\n  const applyPreset = useCallback(\n    (preset: PresetEntry): void => {\n      const tuple = presetTuple(preset, axes, defaults);\n      const fallback = payload?.defaultTheme ?? themes[0]?.name ?? '';\n      const composed = composedNameFor(tuple, themes, fallback);\n      updateGlobals({ [AXES_GLOBAL_KEY]: tuple, [GLOBAL_KEY]: composed });\n      setLastApplied(preset.name);\n    },\n    [axes, defaults, themes, payload?.defaultTheme, updateGlobals],\n  );\n\n  useEffect(() => {\n    if (presets.length === 0) return;\n    /**\n     * `alt+shift+C` cycles through the project's presets, applying the\n     * next one each press. When no preset has been applied yet, starts\n     * from the first. Stays out of Storybook's core shortcut surface —\n     * the earlier default (`alt+T`) collided with the built-in \"toggle\n     * addon panel\" binding on some platforms. Users can still rebind it\n     * through Storybook's own keyboard-shortcuts panel.\n     *\n     * Only registers when the project actually defines presets. For\n     * projects without presets the cycle would have nothing to cycle\n     * through, so the shortcut disappears entirely rather than sitting\n     * dead in the menu.\n     */\n    api.setAddonShortcut(ADDON_ID, {\n      label: `Cycle swatchbook presets (${presets.length})`,\n      defaultShortcut: ['alt', 'shift', 'C'],\n      actionName: 'cyclePreset',\n      showInMenu: true,\n      action: () => {\n        const currentIdx = lastApplied\n          ? presets.findIndex((preset) => preset.name === lastApplied)\n          : -1;\n        const next = presets[(currentIdx + 1) % presets.length];\n        if (next) applyPreset(next);\n      },\n    });\n  }, [api, presets, lastApplied, applyPreset]);\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      setOpen(false);\n    }\n  }, []);\n\n  /**\n   * Escape closes even when focus hasn't entered the popover yet (e.g. the\n   * user opened it via click and the mouse is still over the canvas). We\n   * attach a document-level listener when open.\n   */\n  useEffect(() => {\n    if (!open) return;\n    const onDocKey = (e: KeyboardEvent): void => {\n      if (e.key === 'Escape') setOpen(false);\n    };\n    document.addEventListener('keydown', onDocKey);\n    return () => document.removeEventListener('keydown', onDocKey);\n  }, [open]);\n\n  /**\n   * `WithTooltipPure`'s built-in `closeOnOutsideClick` misses some cases\n   * (portaled popover + manager iframe boundaries). Belt-and-suspenders:\n   * close when the user mouses down anywhere that isn't the trigger wrapper\n   * or the popover body.\n   */\n  useEffect(() => {\n    if (!open) return;\n    const onDocMouseDown = (e: MouseEvent): void => {\n      const target = e.target;\n      if (!(target instanceof Element)) return;\n      if (bodyRef.current?.contains(target)) return;\n      if (target.closest('[data-testid=\"swatchbook-toolbar-popover\"]')) return;\n      setOpen(false);\n    };\n    /**\n     * The manager's document-level listener above can't see mousedowns\n     * inside the preview iframe. Preview emits PREVIEW_MOUSEDOWN_EVENT on\n     * every mousedown over its own document; listen for it here so\n     * clicking the canvas / docs page also closes the popover.\n     */\n    const channel = addons.getChannel();\n    const onPreviewMouseDown = (): void => setOpen(false);\n    document.addEventListener('mousedown', onDocMouseDown);\n    channel.on(PREVIEW_MOUSEDOWN_EVENT, onPreviewMouseDown);\n    return () => {\n      document.removeEventListener('mousedown', onDocMouseDown);\n      channel.off(PREVIEW_MOUSEDOWN_EVENT, onPreviewMouseDown);\n    };\n  }, [open]);\n\n  if (axes.length === 0) {\n    return h(\n      IconButton,\n      { key: TOOL_ID, title: 'Swatchbook theme (loading…)', disabled: true },\n      h(SwatchbookIcon),\n    );\n  }\n\n  const summary = axes.map((a) => activeTuple[a.name] ?? a.default).join(' · ');\n  const title = `Swatchbook · ${summary}`;\n\n  const button = h(\n    IconButton,\n    {\n      key: TOOL_ID,\n      title,\n      active: open,\n      onClick: () => setOpen((prev) => !prev),\n    },\n    h(SwatchbookIcon),\n  );\n\n  const tooltipBody = h(PopoverBody, {\n    axes,\n    presets,\n    defaults,\n    activeTuple,\n    activeColorFormat,\n    lastApplied,\n    onApplyPreset: applyPreset,\n    onSelectAxis: setAxis,\n    onSelectColorFormat: (next: string) => updateGlobals({ [COLOR_FORMAT_GLOBAL_KEY]: next }),\n    onKeyDown: handleKeyDown,\n  });\n\n  return h(\n    'span',\n    { ref: bodyRef, style: { display: 'inline-flex', alignItems: 'center' } },\n    h(WithTooltipPure, {\n      placement: 'bottom',\n      trigger: 'click',\n      visible: open,\n      onVisibleChange: (next: boolean) => setOpen(next),\n      closeOnOutsideClick: true,\n      tooltip: tooltipBody,\n      children: button,\n    }),\n  );\n}\n\naddons.register(ADDON_ID, () => {\n  addons.add(TOOL_ID, {\n    type: types.TOOL,\n    title: 'Swatchbook theme',\n    match: ({ viewMode, tabId }) => !tabId && (viewMode === 'story' || viewMode === 'docs'),\n    render: () => h(AxesToolbar),\n  });\n});\n"],"mappings":"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"}
+{"version":3,"file":"manager.mjs","names":["h"],"sources":["../src/ColorFormatSelector.tsx","../src/manager.tsx"],"sourcesContent":["import React, { type ReactElement } from 'react';\n\n/**\n * Storybook-addon-specific pill row for picking how color sub-values\n * render in swatchbook blocks (hex / rgb / hsl / oklch / raw). Lives in\n * the addon rather than the shared switcher because color format is a\n * blocks-rendering concern, not a theming one — the docs-site navbar\n * switcher has no consumer for it.\n *\n * Reuses the `sb-switcher__*` class names so styling stays consistent\n * with the rest of the toolbar popover. The switcher's CSS is already\n * loaded on the page because this selector only renders inside\n * `<ThemeSwitcher>`'s `footer` prop.\n *\n * Uses `React.createElement` (via `h`) to survive embedding in Storybook's\n * manager bundle, which doesn't expose `react/jsx-runtime`.\n */\n\nexport type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch' | 'raw';\n\nconst COLOR_FORMAT_OPTIONS: readonly { id: ColorFormat; label: string }[] = [\n  { id: 'hex', label: 'Hex' },\n  { id: 'rgb', label: 'RGB' },\n  { id: 'hsl', label: 'HSL' },\n  { id: 'oklch', label: 'OKLCH' },\n  { id: 'raw', label: 'Raw (JSON)' },\n];\n\nconst h = React.createElement;\n\nexport interface ColorFormatSelectorProps {\n  active: ColorFormat;\n  onSelect(next: ColorFormat): void;\n}\n\nexport function ColorFormatSelector({ active, onSelect }: ColorFormatSelectorProps): ReactElement {\n  return h(\n    'div',\n    null,\n    h('div', { className: 'sb-switcher__section-label' }, 'Color format'),\n    h(\n      'div',\n      { className: 'sb-switcher__section-body' },\n      ...COLOR_FORMAT_OPTIONS.map((opt) =>\n        h(\n          'button',\n          {\n            key: `color-format/${opt.id}`,\n            type: 'button',\n            onClick: () => onSelect(opt.id),\n            onMouseDown: (event: React.MouseEvent) => event.preventDefault(),\n            className:\n              opt.id === active\n                ? 'sb-switcher__pill sb-switcher__pill--active'\n                : 'sb-switcher__pill',\n          },\n          opt.label,\n        ),\n      ),\n    ),\n  );\n}\n","import { ThemeSwitcher } from '@unpunnyfuns/swatchbook-switcher';\nimport { type ColorFormat, ColorFormatSelector } from '#/ColorFormatSelector.tsx';\nimport React, { useCallback, useEffect, useMemo, useRef, useState, type ReactElement } from 'react';\nimport { IconButton, WithTooltipPure } from 'storybook/internal/components';\nimport { addons, types, useGlobals, useStorybookApi } from 'storybook/manager-api';\nimport {\n  type InitPayload,\n  type VirtualAxis as AxisEntry,\n  type VirtualPreset as PresetEntry,\n  type VirtualTheme as ThemeEntry,\n} from '#/channel-types.ts';\nimport {\n  ADDON_ID,\n  AXES_GLOBAL_KEY,\n  COLOR_FORMAT_GLOBAL_KEY,\n  GLOBAL_KEY,\n  INIT_EVENT,\n  INIT_REQUEST_EVENT,\n  PREVIEW_MOUSEDOWN_EVENT,\n  TOOL_ID,\n} from '#/constants.ts';\n\n/**\n * Use explicit `React.createElement` rather than JSX so the manager bundle\n * doesn't take a hard dependency on `react/jsx-runtime`. Storybook's manager\n * page injects its own React as a runtime global; `react/jsx-runtime` isn't\n * always part of that exposure, which breaks JSX with\n * \"Cannot read properties of undefined (reading 'recentlyCreatedOwnerStacks')\".\n * Mirrors the pattern `@storybook/addon-a11y` uses in its manager.\n *\n * The imported `<ThemeSwitcher>` from `@unpunnyfuns/swatchbook-switcher`\n * compiles with classic JSX (`React.createElement`) specifically so it\n * survives embedding in the manager bundle the same way.\n */\nconst h = React.createElement;\n\nconst EMPTY_AXES: readonly AxisEntry[] = [];\nconst EMPTY_PRESETS: readonly PresetEntry[] = [];\nconst EMPTY_THEMES: readonly ThemeEntry[] = [];\n\n/**\n * Root toolbar glyph — a split-circle (\"yinyang\") mark: a faint filled\n * disc for the full-swatch silhouette, with a darker half-and-inset-disc\n * path reading as a pair of theme variants swapped in place.\n */\nfunction SwatchbookIcon(): ReactElement {\n  return h(\n    'svg',\n    { width: 14, height: 14, viewBox: '0 0 14 14', 'aria-hidden': true },\n    h('circle', { cx: 7, cy: 7, r: 6, fill: 'currentColor', opacity: 0.15 }),\n    h('path', {\n      d: 'M7 1a6 6 0 0 0 0 12 3 3 0 0 0 0-6 3 3 0 0 1 0-6Z',\n      fill: 'currentColor',\n    }),\n  );\n}\n\nfunction tupleMatchesInput(\n  tuple: Readonly<Record<string, string>>,\n  input: Readonly<Record<string, string>>,\n): boolean {\n  const keys = Object.keys(input);\n  if (keys.length === 0) return false;\n  return keys.every((k) => input[k] === tuple[k]);\n}\n\nfunction composedNameFor(\n  tuple: Readonly<Record<string, string>>,\n  themes: readonly ThemeEntry[],\n  fallback: string,\n): string {\n  const match = themes.find((t) => tupleMatchesInput(tuple, t.input));\n  return match?.name ?? fallback;\n}\n\nfunction defaultTupleFor(axes: readonly AxisEntry[]): Record<string, string> {\n  const out: Record<string, string> = {};\n  for (const axis of axes) out[axis.name] = axis.default;\n  return out;\n}\n\n/**\n * Compose a preset's sanitized partial tuple with the axis defaults, so\n * applying a preset that only names some axes leaves the omitted ones at\n * their defaults (not blank). Mirrors the preview decorator's own fallback\n * logic so what the toolbar sends out is what the decorator honors.\n */\nfunction presetTuple(\n  preset: PresetEntry,\n  axes: readonly AxisEntry[],\n  defaults: Readonly<Record<string, string>>,\n): Record<string, string> {\n  const out: Record<string, string> = { ...defaults };\n  for (const axis of axes) {\n    const candidate = preset.axes[axis.name];\n    if (candidate !== undefined && axis.contexts.includes(candidate)) {\n      out[axis.name] = candidate;\n    }\n  }\n  return out;\n}\n\nfunction AxesToolbar(): ReactElement {\n  const [globals, updateGlobals] = useGlobals();\n  const api = useStorybookApi();\n  const [payload, setPayload] = useState<InitPayload | null>(null);\n  const [open, setOpen] = useState(false);\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    const channel = addons.getChannel();\n    const onInit = (next: InitPayload): void => setPayload(next);\n    channel.on(INIT_EVENT, onInit);\n    /**\n     * Ask the preview to (re-)emit INIT_EVENT in case it already broadcast\n     * before this effect subscribed. Without this request, a late-mounting\n     * manager (story navigation, docs reload) can stay in \"loading…\" until\n     * the user triggers a globals change.\n     */\n    channel.emit(INIT_REQUEST_EVENT);\n    return () => {\n      channel.off(INIT_EVENT, onInit);\n    };\n  }, []);\n\n  const axes = payload?.axes ?? EMPTY_AXES;\n  const presets = payload?.presets ?? EMPTY_PRESETS;\n  const themes = payload?.themes ?? EMPTY_THEMES;\n  const defaults = useMemo(() => defaultTupleFor(axes), [axes]);\n  const [lastApplied, setLastApplied] = useState<string | null>(null);\n  const globalTuple = globals[AXES_GLOBAL_KEY] as Record<string, string> | undefined;\n  const activeColorFormat = ((globals[COLOR_FORMAT_GLOBAL_KEY] as string | undefined) ??\n    'hex') as ColorFormat;\n\n  const activeTuple = useMemo<Record<string, string>>(() => {\n    const out: Record<string, string> = { ...defaults };\n    if (globalTuple) {\n      for (const axis of axes) {\n        const candidate = globalTuple[axis.name];\n        if (candidate !== undefined && axis.contexts.includes(candidate)) {\n          out[axis.name] = candidate;\n        }\n      }\n    }\n    return out;\n  }, [axes, defaults, globalTuple]);\n\n  const setAxis = useCallback(\n    (axisName: string, next: string): void => {\n      const tuple: Record<string, string> = { ...activeTuple, [axisName]: next };\n      const fallback = payload?.defaultTheme ?? themes[0]?.name ?? '';\n      const composed = composedNameFor(tuple, themes, fallback);\n      updateGlobals({ [AXES_GLOBAL_KEY]: tuple, [GLOBAL_KEY]: composed });\n    },\n    [activeTuple, themes, payload?.defaultTheme, updateGlobals],\n  );\n\n  const applyPreset = useCallback(\n    (preset: PresetEntry): void => {\n      const tuple = presetTuple(preset, axes, defaults);\n      const fallback = payload?.defaultTheme ?? themes[0]?.name ?? '';\n      const composed = composedNameFor(tuple, themes, fallback);\n      updateGlobals({ [AXES_GLOBAL_KEY]: tuple, [GLOBAL_KEY]: composed });\n      setLastApplied(preset.name);\n    },\n    [axes, defaults, themes, payload?.defaultTheme, updateGlobals],\n  );\n\n  useEffect(() => {\n    if (presets.length === 0) return;\n    // `alt+shift+C` rather than `alt+T` — the latter conflicts with\n    // Storybook's built-in \"toggle addon panel\" binding on some\n    // platforms. Rebindable from Storybook's keyboard-shortcuts panel.\n    api.setAddonShortcut(ADDON_ID, {\n      label: `Cycle swatchbook presets (${presets.length})`,\n      defaultShortcut: ['alt', 'shift', 'C'],\n      actionName: 'cyclePreset',\n      showInMenu: true,\n      action: () => {\n        const currentIdx = lastApplied\n          ? presets.findIndex((preset) => preset.name === lastApplied)\n          : -1;\n        const next = presets[(currentIdx + 1) % presets.length];\n        if (next) applyPreset(next);\n      },\n    });\n  }, [api, presets, lastApplied, applyPreset]);\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      setOpen(false);\n    }\n  }, []);\n\n  /**\n   * Escape closes even when focus hasn't entered the popover yet (e.g. the\n   * user opened it via click and the mouse is still over the canvas). We\n   * attach a document-level listener when open.\n   */\n  useEffect(() => {\n    if (!open) return;\n    const onDocKey = (e: KeyboardEvent): void => {\n      if (e.key === 'Escape') setOpen(false);\n    };\n    document.addEventListener('keydown', onDocKey);\n    return () => document.removeEventListener('keydown', onDocKey);\n  }, [open]);\n\n  /**\n   * `WithTooltipPure`'s built-in `closeOnOutsideClick` misses some cases\n   * (portaled popover + manager iframe boundaries). Belt-and-suspenders:\n   * close when the user mouses down anywhere that isn't the trigger wrapper\n   * or the popover body.\n   */\n  useEffect(() => {\n    if (!open) return;\n    const onDocMouseDown = (e: MouseEvent): void => {\n      const target = e.target;\n      if (!(target instanceof Element)) return;\n      if (bodyRef.current?.contains(target)) return;\n      if (target.closest('[data-testid=\"swatchbook-switcher\"]')) return;\n      setOpen(false);\n    };\n    /**\n     * The manager's document-level listener above can't see mousedowns\n     * inside the preview iframe. Preview emits PREVIEW_MOUSEDOWN_EVENT on\n     * every mousedown over its own document; listen for it here so\n     * clicking the canvas / docs page also closes the popover.\n     */\n    const channel = addons.getChannel();\n    const onPreviewMouseDown = (): void => setOpen(false);\n    document.addEventListener('mousedown', onDocMouseDown);\n    channel.on(PREVIEW_MOUSEDOWN_EVENT, onPreviewMouseDown);\n    return () => {\n      document.removeEventListener('mousedown', onDocMouseDown);\n      channel.off(PREVIEW_MOUSEDOWN_EVENT, onPreviewMouseDown);\n    };\n  }, [open]);\n\n  if (axes.length === 0) {\n    return h(\n      IconButton,\n      { key: TOOL_ID, title: 'Swatchbook theme (loading…)', disabled: true },\n      h(SwatchbookIcon),\n    );\n  }\n\n  const summary = axes.map((a) => activeTuple[a.name] ?? a.default).join(' · ');\n  const title = `Swatchbook · ${summary}`;\n\n  const button = h(\n    IconButton,\n    {\n      key: TOOL_ID,\n      title,\n      active: open,\n      onClick: () => setOpen((prev) => !prev),\n    },\n    h(SwatchbookIcon),\n  );\n\n  const tooltipBody = h(ThemeSwitcher, {\n    axes,\n    presets,\n    themes,\n    activeTuple,\n    defaults,\n    lastApplied,\n    onAxisChange: setAxis,\n    onPresetApply: applyPreset,\n    onKeyDown: handleKeyDown,\n    /**\n     * Color format is addon-local chrome — drives how swatchbook blocks\n     * stringify colors inside stories and docs. Slotted through the\n     * switcher's `footer` escape hatch so shared theming UI stays free\n     * of this concern.\n     */\n    footer: h(ColorFormatSelector, {\n      active: activeColorFormat,\n      onSelect: (next: ColorFormat) => updateGlobals({ [COLOR_FORMAT_GLOBAL_KEY]: next }),\n    }),\n  });\n\n  return h(\n    'span',\n    { ref: bodyRef, style: { display: 'inline-flex', alignItems: 'center' } },\n    h(WithTooltipPure, {\n      placement: 'bottom',\n      trigger: 'click',\n      visible: open,\n      onVisibleChange: (next: boolean) => setOpen(next),\n      closeOnOutsideClick: true,\n      tooltip: tooltipBody,\n      children: button,\n    }),\n  );\n}\n\naddons.register(ADDON_ID, () => {\n  addons.add(TOOL_ID, {\n    type: types.TOOL,\n    title: 'Swatchbook theme',\n    match: ({ viewMode, tabId }) => !tabId && (viewMode === 'story' || viewMode === 'docs'),\n    render: () => h(AxesToolbar),\n  });\n});\n"],"mappings":"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"}

package/dist/preset.mjs

@@ -1,10 +1,11 @@
 import { l as RESOLVED_VIRTUAL_MODULE_ID } from "./constants-0XmrhOl_.mjs";
 import { mkdir, writeFile } from "node:fs/promises";
-import { dirname, isAbsolute, resolve, sep } from "node:path";
+import { basename, dirname, isAbsolute, resolve } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import { loadProject, projectCss } from "@unpunnyfuns/swatchbook-core";
 import { createJiti } from "jiti";
-import picomatch from "picomatch";
+import { watch } from "node:fs";
+import "picomatch";
 //#region src/virtual/plugin.ts
 /**
 * Vite plugin that serves the virtual `virtual:swatchbook/tokens` module —
@@ -45,51 +46,67 @@ function swatchbookTokensPlugin({ config, cwd }) {
 				`export const cssVarPrefix = ${JSON.stringify(config.cssVarPrefix ?? "")};`
 			].join("\n");
 		},
-		configureServer(server) {
-			const watchPaths = collectWatchPaths(config, project, cwd);
-			for (const p of watchPaths) server.watcher.add(p);
-			const invalidate = async () => {
-				await refresh();
-				const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID);
-				if (mod) server.moduleGraph.invalidateModule(mod);
-				server.ws.send({ type: "full-reload" });
+		async configureServer(server) {
+			if (!project) await refresh();
+			/**
+			* Editors typically emit two or three filesystem events per save
+			* (atomic rename + rewrite + metadata). A 100 ms trailing debounce
+			* coalesces those into a single reload while staying well under
+			* user-perceptible latency.
+			*/
+			let pending = null;
+			const invalidate = () => {
+				if (pending) clearTimeout(pending);
+				pending = setTimeout(() => {
+					pending = null;
+					(async () => {
+						await refresh();
+						const tokenCount = project ? Object.keys(project.themesResolved[project.themes[0]?.name ?? ""] ?? {}).length : 0;
+						const diagCount = project?.diagnostics.length ?? 0;
+						server.config.logger.info(`\x1b[36m[swatchbook]\x1b[0m tokens reloaded — ${tokenCount} tokens, ${diagCount} diagnostic${diagCount === 1 ? "" : "s"}`, {
+							clear: false,
+							timestamp: true
+						});
+						const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID);
+						if (mod) server.moduleGraph.invalidateModule(mod);
+						server.ws.send({ type: "full-reload" });
+					})();
+				}, 100);
 			};
-			const matches = (changed) => watchPaths.some((p) => changed === p || changed.startsWith(`${p}${sep}`));
-			server.watcher.on("change", (changed) => {
-				if (matches(changed)) invalidate();
-			});
-			server.watcher.on("add", (changed) => {
-				if (matches(changed)) invalidate();
-			});
-			server.watcher.on("unlink", (changed) => {
-				if (matches(changed)) invalidate();
+			/**
+			* Watch each source file's *parent directory* rather than the file
+			* itself. File-level `fs.watch` is fragile: atomic-save editors
+			* unlink the old inode and write a new one, so the original
+			* watcher either fires a one-shot 'rename' and goes deaf, or on
+			* some platforms loops on ghost events for the old inode. Watching
+			* the dir sidesteps both — the dir inode is stable across the
+			* rename dance — and filename filtering keeps event volume low.
+			*
+			* Vite's `server.watcher` still wouldn't carry these events across
+			* pnpm symlink boundaries, so we keep running our own watchers.
+			*/
+			const byDir = /* @__PURE__ */ new Map();
+			for (const file of project?.sourceFiles ?? []) {
+				const dir = dirname(file);
+				const set = byDir.get(dir) ?? /* @__PURE__ */ new Set();
+				set.add(basename(file));
+				byDir.set(dir, set);
+			}
+			const fileWatchers = [];
+			for (const [dir, names] of byDir) try {
+				const w = watch(dir, { persistent: false }, (eventType, filename) => {
+					if (!filename) return;
+					if (!names.has(filename)) return;
+					if (eventType === "change" || eventType === "rename") invalidate();
+				});
+				fileWatchers.push(w);
+			} catch {}
+			server.httpServer?.once("close", () => {
+				for (const w of fileWatchers) w.close();
 			});
 		}
 	};
 }
-/**
-* Collect the set of filesystem paths the dev server should watch for
-* HMR. When `config.tokens` is set, use its globs (stripped to their
-* base directories) — users opt in to broader watching this way. When
-* absent, use the resolver file + every `$ref` target it pulled in, as
-* tracked on `project.sourceFiles` — which stays correct as the resolver
-* evolves without requiring a parallel `tokens` glob.
-*/
-/** @internal Exported for tests; not part of the public API. */
-function collectWatchPaths(config, project, cwd) {
-	const paths = [];
-	if (config.tokens && config.tokens.length > 0) for (const glob of config.tokens) {
-		const { base } = picomatch.scan(glob);
-		paths.push(resolveFromCwd(base || ".", cwd));
-	}
-	else if (project?.sourceFiles) for (const file of project.sourceFiles) paths.push(dirname(file));
-	if (config.resolver) paths.push(resolveFromCwd(config.resolver, cwd));
-	return [...new Set(paths)];
-}
-function resolveFromCwd(p, cwd) {
-	if (isAbsolute(p)) return p;
-	return resolve(cwd, p);
-}
 //#endregion
 //#region src/preset.ts
 /**

package/dist/preset.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"preset.mjs","names":["resolvePath"],"sources":["../src/virtual/plugin.ts","../src/preset.ts"],"sourcesContent":["import type { Config, Project } from '@unpunnyfuns/swatchbook-core';\nimport { loadProject, projectCss } from '@unpunnyfuns/swatchbook-core';\nimport { dirname, isAbsolute, resolve as resolvePath, sep } from 'node:path';\nimport picomatch from 'picomatch';\nimport type { Plugin } from 'vite';\nimport { RESOLVED_VIRTUAL_MODULE_ID, VIRTUAL_MODULE_ID } from '#/constants.ts';\n\nexport interface SwatchbookPluginOptions {\n  config: Config;\n  cwd: string;\n}\n\n/**\n * Vite plugin that serves the virtual `virtual:swatchbook/tokens` module —\n * a single source of truth for themes, resolved token maps, per-theme CSS,\n * and diagnostics. Watches the token files + resolver for changes and\n * invalidates the module so HMR reloads the preview with fresh data.\n */\nexport function swatchbookTokensPlugin({ config, cwd }: SwatchbookPluginOptions): Plugin {\n  let project: Project | undefined;\n  let css = '';\n\n  async function refresh(): Promise<void> {\n    project = await loadProject(config, cwd);\n    css = projectCss(project);\n  }\n\n  return {\n    name: 'swatchbook:virtual-tokens',\n    enforce: 'pre',\n\n    async buildStart() {\n      await refresh();\n    },\n\n    resolveId(id) {\n      if (id === VIRTUAL_MODULE_ID) return RESOLVED_VIRTUAL_MODULE_ID;\n      return null;\n    },\n\n    load(id) {\n      if (id !== RESOLVED_VIRTUAL_MODULE_ID) return null;\n      if (!project) return 'export default null;';\n      // Emit a typed ESM module. Values are JSON-stringified for stability.\n      return [\n        `/* swatchbook virtual module — generated */`,\n        `export const axes = ${JSON.stringify(project.axes)};`,\n        `export const presets = ${JSON.stringify(project.presets)};`,\n        `export const disabledAxes = ${JSON.stringify(project.disabledAxes)};`,\n        `export const themes = ${JSON.stringify(project.themes)};`,\n        `export const defaultTheme = ${JSON.stringify(project.themes[0]?.name ?? null)};`,\n        `export const themesResolved = ${JSON.stringify(project.themesResolved)};`,\n        `export const diagnostics = ${JSON.stringify(project.diagnostics)};`,\n        `export const css = ${JSON.stringify(css)};`,\n        `export const cssVarPrefix = ${JSON.stringify(config.cssVarPrefix ?? '')};`,\n      ].join('\\n');\n    },\n\n    configureServer(server) {\n      const watchPaths = collectWatchPaths(config, project, cwd);\n      for (const p of watchPaths) server.watcher.add(p);\n\n      const invalidate = async (): Promise<void> => {\n        await refresh();\n        const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID);\n        if (mod) server.moduleGraph.invalidateModule(mod);\n        server.ws.send({ type: 'full-reload' });\n      };\n\n      const matches = (changed: string): boolean =>\n        watchPaths.some((p) => changed === p || changed.startsWith(`${p}${sep}`));\n\n      server.watcher.on('change', (changed) => {\n        if (matches(changed)) void invalidate();\n      });\n      server.watcher.on('add', (changed) => {\n        if (matches(changed)) void invalidate();\n      });\n      server.watcher.on('unlink', (changed) => {\n        if (matches(changed)) void invalidate();\n      });\n    },\n  };\n}\n\n/**\n * Collect the set of filesystem paths the dev server should watch for\n * HMR. When `config.tokens` is set, use its globs (stripped to their\n * base directories) — users opt in to broader watching this way. When\n * absent, use the resolver file + every `$ref` target it pulled in, as\n * tracked on `project.sourceFiles` — which stays correct as the resolver\n * evolves without requiring a parallel `tokens` glob.\n */\n/** @internal Exported for tests; not part of the public API. */\nexport function collectWatchPaths(\n  config: Config,\n  project: Project | undefined,\n  cwd: string,\n): string[] {\n  const paths: string[] = [];\n  if (config.tokens && config.tokens.length > 0) {\n    for (const glob of config.tokens) {\n      // `picomatch.scan` yields the longest literal prefix before any glob\n      // metachar, so it handles brace expansion, nested globstars, and the\n      // other shapes the hand-rolled regex missed.\n      const { base } = picomatch.scan(glob);\n      paths.push(resolveFromCwd(base || '.', cwd));\n    }\n  } else if (project?.sourceFiles) {\n    for (const file of project.sourceFiles) paths.push(dirname(file));\n  }\n  if (config.resolver) paths.push(resolveFromCwd(config.resolver, cwd));\n  return [...new Set(paths)];\n}\n\nfunction resolveFromCwd(p: string, cwd: string): string {\n  if (isAbsolute(p)) return p;\n  return resolvePath(cwd, p);\n}\n","import { mkdir, writeFile } from 'node:fs/promises';\nimport { dirname, isAbsolute, resolve } from 'node:path';\nimport { fileURLToPath, pathToFileURL } from 'node:url';\nimport type { Config, Project } from '@unpunnyfuns/swatchbook-core';\nimport { loadProject } from '@unpunnyfuns/swatchbook-core';\nimport { createJiti } from 'jiti';\nimport type { InlineConfig } from 'vite';\nimport type { AddonOptions } from '#/options.ts';\nimport { swatchbookTokensPlugin } from '#/virtual/plugin.ts';\n\ninterface PresetOptions extends AddonOptions {\n  /** Storybook injects this — the `.storybook` directory absolute path. */\n  configDir: string;\n}\n\n/**\n * Storybook preset entry. Called by Storybook at config time; extends Vite's\n * plugin list with our virtual-module plugin so the preview can import\n * `virtual:swatchbook/tokens`. Also writes the typed token-path codegen so\n * `useToken()` autocompletes against the loaded project.\n */\nexport async function viteFinal(\n  viteConfig: InlineConfig,\n  options: PresetOptions,\n): Promise<InlineConfig> {\n  const { config, cwd } = await resolveConfig(options);\n\n  // Codegen runs once at Vite startup. The virtual module plugin still\n  // owns the live reload path via its HMR watcher; this file just gives\n  // TS autocomplete for `useToken('…')` in consumer stories.\n  await writeTokenCodegen(config, cwd, options);\n\n  const plugins = Array.isArray(viteConfig.plugins) ? [...viteConfig.plugins] : [];\n  plugins.push(swatchbookTokensPlugin({ config, cwd }));\n\n  return { ...viteConfig, plugins };\n}\n\n/** Storybook appends this module into the manager bundle so our toolbar tool registers. */\nexport function managerEntries(entry: string[] = []): string[] {\n  const managerUrl = import.meta.resolve('@unpunnyfuns/swatchbook-addon/manager');\n  return [...entry, fileURLToPath(managerUrl)];\n}\n\nasync function resolveConfig(options: PresetOptions): Promise<{ config: Config; cwd: string }> {\n  const projectRoot = resolve(options.configDir, '..');\n\n  if (options.config) {\n    return { config: options.config, cwd: projectRoot };\n  }\n\n  const path = options.configPath ?? 'swatchbook.config.ts';\n  const absolute = isAbsolute(path) ? path : resolve(options.configDir, path);\n\n  const jiti = createJiti(pathToFileURL(options.configDir).href, {\n    interopDefault: true,\n    moduleCache: false,\n  });\n  const loaded = (await jiti.import(absolute, { default: true })) as Config;\n\n  // If the config file isn't at projectRoot, still resolve globs from its dir.\n  const cwd = dirname(absolute);\n  return { config: loaded, cwd };\n}\n\nasync function writeTokenCodegen(\n  config: Config,\n  cwd: string,\n  options: PresetOptions,\n): Promise<void> {\n  const project = await loadProject(config, cwd);\n  const projectRoot = resolve(options.configDir, '..');\n  const outDir = resolve(projectRoot, config.outDir ?? '.swatchbook');\n  await mkdir(outDir, { recursive: true });\n  const content = renderTokenTypes(project);\n  await writeFile(resolve(outDir, 'tokens.d.ts'), content);\n}\n\n/** @internal Exported for tests; not part of the public API. */\nexport function renderTokenTypes(project: Project): string {\n  const paths = new Set<string>();\n  for (const theme of project.themes) {\n    const tokens = project.themesResolved[theme.name];\n    if (!tokens) continue;\n    for (const path of Object.keys(tokens)) paths.add(path);\n  }\n  const sorted = [...paths].toSorted();\n  const tokenEntries = sorted.map((p) => `    ${JSON.stringify(p)}: string;`);\n  const themeUnion = project.themes.map((t) => JSON.stringify(t.name)).join(' | ') || 'string';\n\n  return [\n    '// Generated by @unpunnyfuns/swatchbook-addon. Do not edit.',\n    \"declare module '@unpunnyfuns/swatchbook-addon/hooks' {\",\n    '  interface SwatchbookTokenMap {',\n    ...tokenEntries,\n    '  }',\n    '',\n    `  export type SwatchbookThemeName = ${themeUnion};`,\n    '}',\n    '',\n  ].join('\\n');\n}\n"],"mappings":"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"}
+{"version":3,"file":"preset.mjs","names":["fsWatch"],"sources":["../src/virtual/plugin.ts","../src/preset.ts"],"sourcesContent":["import type { Config, Project } from '@unpunnyfuns/swatchbook-core';\nimport { loadProject, projectCss } from '@unpunnyfuns/swatchbook-core';\nimport { type FSWatcher, watch as fsWatch } from 'node:fs';\nimport { basename, dirname, isAbsolute, resolve as resolvePath } from 'node:path';\nimport picomatch from 'picomatch';\nimport type { Plugin } from 'vite';\nimport { RESOLVED_VIRTUAL_MODULE_ID, VIRTUAL_MODULE_ID } from '#/constants.ts';\n\nexport interface SwatchbookPluginOptions {\n  config: Config;\n  cwd: string;\n}\n\n/**\n * Vite plugin that serves the virtual `virtual:swatchbook/tokens` module —\n * a single source of truth for themes, resolved token maps, per-theme CSS,\n * and diagnostics. Watches the token files + resolver for changes and\n * invalidates the module so HMR reloads the preview with fresh data.\n */\nexport function swatchbookTokensPlugin({ config, cwd }: SwatchbookPluginOptions): Plugin {\n  let project: Project | undefined;\n  let css = '';\n\n  async function refresh(): Promise<void> {\n    project = await loadProject(config, cwd);\n    css = projectCss(project);\n  }\n\n  return {\n    name: 'swatchbook:virtual-tokens',\n    enforce: 'pre',\n\n    async buildStart() {\n      await refresh();\n    },\n\n    resolveId(id) {\n      if (id === VIRTUAL_MODULE_ID) return RESOLVED_VIRTUAL_MODULE_ID;\n      return null;\n    },\n\n    load(id) {\n      if (id !== RESOLVED_VIRTUAL_MODULE_ID) return null;\n      if (!project) return 'export default null;';\n      // Emit a typed ESM module. Values are JSON-stringified for stability.\n      return [\n        `/* swatchbook virtual module — generated */`,\n        `export const axes = ${JSON.stringify(project.axes)};`,\n        `export const presets = ${JSON.stringify(project.presets)};`,\n        `export const disabledAxes = ${JSON.stringify(project.disabledAxes)};`,\n        `export const themes = ${JSON.stringify(project.themes)};`,\n        `export const defaultTheme = ${JSON.stringify(project.themes[0]?.name ?? null)};`,\n        `export const themesResolved = ${JSON.stringify(project.themesResolved)};`,\n        `export const diagnostics = ${JSON.stringify(project.diagnostics)};`,\n        `export const css = ${JSON.stringify(css)};`,\n        `export const cssVarPrefix = ${JSON.stringify(config.cssVarPrefix ?? '')};`,\n      ].join('\\n');\n    },\n\n    async configureServer(server) {\n      // `configureServer` fires before `buildStart` in Vite's plugin\n      // lifecycle, so `project` is still undefined when consumers only\n      // set `config.resolver` (no `tokens` glob). Force an initial load\n      // here so the watcher setup below sees a populated `sourceFiles`\n      // list — otherwise only the resolver file itself gets watched,\n      // and saves to any `$ref` target silently drop.\n      if (!project) await refresh();\n\n      /**\n       * Editors typically emit two or three filesystem events per save\n       * (atomic rename + rewrite + metadata). A 100 ms trailing debounce\n       * coalesces those into a single reload while staying well under\n       * user-perceptible latency.\n       */\n      let pending: ReturnType<typeof setTimeout> | null = null;\n      const invalidate = (): void => {\n        if (pending) clearTimeout(pending);\n        pending = setTimeout(() => {\n          pending = null;\n          void (async () => {\n            await refresh();\n            const tokenCount = project\n              ? Object.keys(project.themesResolved[project.themes[0]?.name ?? ''] ?? {}).length\n              : 0;\n            const diagCount = project?.diagnostics.length ?? 0;\n            server.config.logger.info(\n              `\\x1b[36m[swatchbook]\\x1b[0m tokens reloaded — ${tokenCount} tokens, ${diagCount} diagnostic${diagCount === 1 ? '' : 's'}`,\n              { clear: false, timestamp: true },\n            );\n            const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID);\n            if (mod) server.moduleGraph.invalidateModule(mod);\n            server.ws.send({ type: 'full-reload' });\n          })();\n        }, 100);\n      };\n\n      /**\n       * Watch each source file's *parent directory* rather than the file\n       * itself. File-level `fs.watch` is fragile: atomic-save editors\n       * unlink the old inode and write a new one, so the original\n       * watcher either fires a one-shot 'rename' and goes deaf, or on\n       * some platforms loops on ghost events for the old inode. Watching\n       * the dir sidesteps both — the dir inode is stable across the\n       * rename dance — and filename filtering keeps event volume low.\n       *\n       * Vite's `server.watcher` still wouldn't carry these events across\n       * pnpm symlink boundaries, so we keep running our own watchers.\n       */\n      const byDir = new Map<string, Set<string>>();\n      for (const file of project?.sourceFiles ?? []) {\n        const dir = dirname(file);\n        const set = byDir.get(dir) ?? new Set<string>();\n        set.add(basename(file));\n        byDir.set(dir, set);\n      }\n\n      const fileWatchers: FSWatcher[] = [];\n      for (const [dir, names] of byDir) {\n        try {\n          const w = fsWatch(dir, { persistent: false }, (eventType, filename) => {\n            if (!filename) return;\n            if (!names.has(filename)) return;\n            if (eventType === 'change' || eventType === 'rename') invalidate();\n          });\n          fileWatchers.push(w);\n        } catch {\n          // unwatchable dir — skip. Next loadProject pass will report it.\n        }\n      }\n      server.httpServer?.once('close', () => {\n        for (const w of fileWatchers) w.close();\n      });\n    },\n  };\n}\n\n/**\n * Collect the set of filesystem paths the dev server should watch for\n * HMR. When `config.tokens` is set, use its globs (stripped to their\n * base directories) — users opt in to broader watching this way. When\n * absent, use the resolver file + every `$ref` target it pulled in, as\n * tracked on `project.sourceFiles` — which stays correct as the resolver\n * evolves without requiring a parallel `tokens` glob.\n */\n/** @internal Exported for tests; not part of the public API. */\nexport function collectWatchPaths(\n  config: Config,\n  project: Project | undefined,\n  cwd: string,\n): string[] {\n  const paths: string[] = [];\n  if (config.tokens && config.tokens.length > 0) {\n    for (const glob of config.tokens) {\n      // `picomatch.scan` yields the longest literal prefix before any glob\n      // metachar, so it handles brace expansion, nested globstars, and the\n      // other shapes the hand-rolled regex missed.\n      const { base } = picomatch.scan(glob);\n      paths.push(resolveFromCwd(base || '.', cwd));\n    }\n  } else if (project?.sourceFiles) {\n    for (const file of project.sourceFiles) paths.push(dirname(file));\n  }\n  if (config.resolver) paths.push(resolveFromCwd(config.resolver, cwd));\n  return [...new Set(paths)];\n}\n\nfunction resolveFromCwd(p: string, cwd: string): string {\n  if (isAbsolute(p)) return p;\n  return resolvePath(cwd, p);\n}\n","import { mkdir, writeFile } from 'node:fs/promises';\nimport { dirname, isAbsolute, resolve } from 'node:path';\nimport { fileURLToPath, pathToFileURL } from 'node:url';\nimport type { Config, Project } from '@unpunnyfuns/swatchbook-core';\nimport { loadProject } from '@unpunnyfuns/swatchbook-core';\nimport { createJiti } from 'jiti';\nimport type { InlineConfig } from 'vite';\nimport type { AddonOptions } from '#/options.ts';\nimport { swatchbookTokensPlugin } from '#/virtual/plugin.ts';\n\ninterface PresetOptions extends AddonOptions {\n  /** Storybook injects this — the `.storybook` directory absolute path. */\n  configDir: string;\n}\n\n/**\n * Storybook preset entry. Called by Storybook at config time; extends Vite's\n * plugin list with our virtual-module plugin so the preview can import\n * `virtual:swatchbook/tokens`. Also writes the typed token-path codegen so\n * `useToken()` autocompletes against the loaded project.\n */\nexport async function viteFinal(\n  viteConfig: InlineConfig,\n  options: PresetOptions,\n): Promise<InlineConfig> {\n  const { config, cwd } = await resolveConfig(options);\n\n  // Codegen runs once at Vite startup. The virtual module plugin still\n  // owns the live reload path via its HMR watcher; this file just gives\n  // TS autocomplete for `useToken('…')` in consumer stories.\n  await writeTokenCodegen(config, cwd, options);\n\n  const plugins = Array.isArray(viteConfig.plugins) ? [...viteConfig.plugins] : [];\n  plugins.push(swatchbookTokensPlugin({ config, cwd }));\n\n  return { ...viteConfig, plugins };\n}\n\n/** Storybook appends this module into the manager bundle so our toolbar tool registers. */\nexport function managerEntries(entry: string[] = []): string[] {\n  const managerUrl = import.meta.resolve('@unpunnyfuns/swatchbook-addon/manager');\n  return [...entry, fileURLToPath(managerUrl)];\n}\n\nasync function resolveConfig(options: PresetOptions): Promise<{ config: Config; cwd: string }> {\n  const projectRoot = resolve(options.configDir, '..');\n\n  if (options.config) {\n    return { config: options.config, cwd: projectRoot };\n  }\n\n  const path = options.configPath ?? 'swatchbook.config.ts';\n  const absolute = isAbsolute(path) ? path : resolve(options.configDir, path);\n\n  const jiti = createJiti(pathToFileURL(options.configDir).href, {\n    interopDefault: true,\n    moduleCache: false,\n  });\n  const loaded = (await jiti.import(absolute, { default: true })) as Config;\n\n  // If the config file isn't at projectRoot, still resolve globs from its dir.\n  const cwd = dirname(absolute);\n  return { config: loaded, cwd };\n}\n\nasync function writeTokenCodegen(\n  config: Config,\n  cwd: string,\n  options: PresetOptions,\n): Promise<void> {\n  const project = await loadProject(config, cwd);\n  const projectRoot = resolve(options.configDir, '..');\n  const outDir = resolve(projectRoot, config.outDir ?? '.swatchbook');\n  await mkdir(outDir, { recursive: true });\n  const content = renderTokenTypes(project);\n  await writeFile(resolve(outDir, 'tokens.d.ts'), content);\n}\n\n/** @internal Exported for tests; not part of the public API. */\nexport function renderTokenTypes(project: Project): string {\n  const paths = new Set<string>();\n  for (const theme of project.themes) {\n    const tokens = project.themesResolved[theme.name];\n    if (!tokens) continue;\n    for (const path of Object.keys(tokens)) paths.add(path);\n  }\n  const sorted = [...paths].toSorted();\n  const tokenEntries = sorted.map((p) => `    ${JSON.stringify(p)}: string;`);\n  const themeUnion = project.themes.map((t) => JSON.stringify(t.name)).join(' | ') || 'string';\n\n  return [\n    '// Generated by @unpunnyfuns/swatchbook-addon. Do not edit.',\n    \"declare module '@unpunnyfuns/swatchbook-addon/hooks' {\",\n    '  interface SwatchbookTokenMap {',\n    ...tokenEntries,\n    '  }',\n    '',\n    `  export type SwatchbookThemeName = ${themeUnion};`,\n    '}',\n    '',\n  ].join('\\n');\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unpunnyfuns/swatchbook-addon",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Storybook addon for DTCG design tokens — toolbar, panel, and useToken hook.",
   "license": "MIT",
   "author": "unpunnyfuns <unpunnyfuns@gmail.com>",
@@ -70,8 +70,9 @@
   "dependencies": {
     "jiti": "^2.4.0",
     "picomatch": "^4.0.4",
-    "@unpunnyfuns/swatchbook-blocks": "0.6.1",
-    "@unpunnyfuns/swatchbook-core": "0.6.1"
+    "@unpunnyfuns/swatchbook-blocks": "0.7.0",
+    "@unpunnyfuns/swatchbook-core": "0.7.0",
+    "@unpunnyfuns/swatchbook-switcher": "0.7.0"
   },
   "peerDependencies": {
     "react": ">=18",