@unpunnyfuns/swatchbook-addon 0.3.0 → 0.5.0

package/README.md

@@ -67,8 +67,8 @@ export default definePreview({
 import { useToken } from '@unpunnyfuns/swatchbook-addon/hooks';
 
 function Card() {
-  const bg = useToken('color.sys.surface.default');
-  const radius = useToken('radius.sys.lg');
+  const bg = useToken('color.surface.default');
+  const radius = useToken('radius.lg');
   return (
     <div style={{ background: bg.cssVar, borderRadius: radius.cssVar }}>
       {bg.description}

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { i as preview_exports } from "./preview-6M-JBML3.mjs";
+import { i as preview_exports } from "./preview-C91uAAG-.mjs";
 import { f as VIRTUAL_MODULE_ID, i as GLOBAL_KEY, n as AXES_GLOBAL_KEY, s as PARAM_KEY, t as ADDON_ID } from "./constants-0XmrhOl_.mjs";
 import { definePreviewAddon } from "storybook/internal/csf";
 //#region src/index.ts

package/dist/manager.mjs

@@ -330,33 +330,39 @@ function AxesToolbar() {
 		updateGlobals
 	]);
 	useEffect(() => {
-		if (axes.length === 0) return;
+		if (presets.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).
+		* `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.
 		*/
-		const primary = axes[0];
-		if (!primary) return;
 		api.setAddonShortcut(ADDON_ID, {
-			label: `Cycle swatchbook ${displayLabelFor(primary)}`,
-			defaultShortcut: ["alt", "T"],
-			actionName: "cycleAxis",
+			label: `Cycle swatchbook presets (${presets.length})`,
+			defaultShortcut: [
+				"alt",
+				"shift",
+				"C"
+			],
+			actionName: "cyclePreset",
 			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);
+				const next = presets[((lastApplied ? presets.findIndex((preset) => preset.name === lastApplied) : -1) + 1) % presets.length];
+				if (next) applyPreset(next);
 			}
 		});
 	}, [
 		api,
-		axes,
-		activeTuple,
-		setAxis
+		presets,
+		lastApplied,
+		applyPreset
 	]);
 	const handleKeyDown = useCallback((event) => {
 		if (event.key === "Escape") {

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 (axes.length === 0) return;\n    /**\n     * alt+T cycles the primary (first) axis's contexts, keeping the rest\n     * of the tuple pinned. With multi-axis projects this makes the shortcut\n     * predictable — you always know which wheel you're spinning. For\n     * single-axis projects the behavior is identical to the pre-N-dropdown\n     * toolbar (cycle through every theme).\n     */\n    const primary = axes[0];\n    if (!primary) return;\n    api.setAddonShortcut(ADDON_ID, {\n      label: `Cycle swatchbook ${displayLabelFor(primary)}`,\n      defaultShortcut: ['alt', 'T'],\n      actionName: 'cycleAxis',\n      showInMenu: true,\n      action: () => {\n        const current = activeTuple[primary.name] ?? primary.default;\n        const idx = primary.contexts.indexOf(current);\n        const next = primary.contexts[(idx + 1) % primary.contexts.length];\n        if (next !== undefined) setAxis(primary.name, next);\n      },\n    });\n  }, [api, axes, activeTuple, setAxis]);\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":[],"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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"}

package/dist/{preview-6M-JBML3.mjs → preview-C91uAAG-.mjs}

@@ -47,8 +47,8 @@ function ensureStylesheet() {
 	if (typeof document === "undefined") return;
 	const text = `${css}\n${`
 html, body {
-  background: var(${v("color-sys-surface-default")}, Canvas);
-  color: var(${v("color-sys-text-default")}, CanvasText);
+  background: var(${v("color-surface-default")}, Canvas);
+  color: var(${v("color-text-default")}, CanvasText);
   margin: 0;
 }
 `}`;
@@ -322,4 +322,4 @@ installPreviewMouseDownBridge();
 //#endregion
 export { preview_exports as i, globalTypes as n, initialGlobals as r, decorators as t };
 
-//# sourceMappingURL=preview-6M-JBML3.mjs.map
+//# sourceMappingURL=preview-C91uAAG-.mjs.map

package/dist/preview-C91uAAG-.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-C91uAAG-.mjs","names":["virtualDisabledAxes","virtualAxes","virtualPresets"],"sources":["../src/data-attr.ts","../src/preview.tsx"],"sourcesContent":["/**\n * Produce a prefixed `data-*` attribute name when `prefix` is set, bare\n * `data-<key>` otherwise. Duplicated from `@unpunnyfuns/swatchbook-core`'s\n * `dataAttr` so the preview bundle doesn't have to import from core —\n * core's top-level entry pulls in Node-only modules (`node:fs/promises`\n * via the loader) that throw when evaluated in the browser.\n */\nexport function dataAttr(prefix: string, key: string): string {\n  return prefix ? `data-${prefix}-${key}` : `data-${key}`;\n}\n","import type { Decorator, Preview } from '@storybook/react-vite';\nimport { useEffect, useMemo } from 'react';\nimport { addons } from 'storybook/preview-api';\nimport { dataAttr } from '#/data-attr.ts';\nimport {\n  axes as virtualAxes,\n  css,\n  cssVarPrefix,\n  defaultTheme,\n  diagnostics,\n  disabledAxes as virtualDisabledAxes,\n  presets as virtualPresets,\n  themes,\n  themesResolved,\n} from 'virtual:swatchbook/tokens';\nimport {\n  AxesContext,\n  COLOR_FORMATS,\n  type ColorFormat,\n  ColorFormatContext,\n  type ProjectSnapshot,\n  SwatchbookContext,\n  ThemeContext,\n} from '@unpunnyfuns/swatchbook-blocks';\nimport {\n  AXES_GLOBAL_KEY,\n  COLOR_FORMAT_GLOBAL_KEY,\n  GLOBAL_KEY,\n  INIT_EVENT,\n  INIT_REQUEST_EVENT,\n  PREVIEW_MOUSEDOWN_EVENT,\n  PARAM_KEY,\n  STYLE_ELEMENT_ID,\n} from '#/constants.ts';\n\n/** CSS var name with the active prefix applied. */\nfunction v(name: string): string {\n  return cssVarPrefix ? `--${cssVarPrefix}-${name}` : `--${name}`;\n}\n\n/**\n * Inject the per-theme stylesheet plus a tiny `html, body { ... }` block so\n * the iframe's own chrome (outside any decorator wrapper — Docs mode,\n * autodocs, empty gutters) also picks up the active theme.\n */\nfunction ensureStylesheet(): void {\n  if (typeof document === 'undefined') return;\n  const bodyRules = `\nhtml, body {\n  background: var(${v('color-surface-default')}, Canvas);\n  color: var(${v('color-text-default')}, CanvasText);\n  margin: 0;\n}\n`;\n  const text = `${css}\\n${bodyRules}`;\n  let style = document.getElementById(STYLE_ELEMENT_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ELEMENT_ID;\n    document.head.appendChild(style);\n  }\n  if (style.textContent !== text) style.textContent = text;\n}\n\n/**\n * Apply `cb(axisName, value)` for every pinned (disabled) axis whose value\n * is present on any surviving theme's `input`. Disabled axes don't appear\n * in `virtualAxes`, but CSS may still reference their pinned value on\n * compound selectors — every theme that survived filtering carries the\n * same pinned context per disabled axis, so sampling any theme works.\n */\nfunction forEachPinnedAxis(cb: (name: string, value: string) => void): void {\n  const pinnedSample = themes[0]?.input;\n  if (!pinnedSample) return;\n  for (const name of virtualDisabledAxes) {\n    const value = pinnedSample[name];\n    if (value !== undefined) cb(name, value);\n  }\n}\n\n/**\n * Pick the theme name for a tuple, falling back to `defaultTheme` and then\n * the first theme. Returns empty string when the project has no themes so\n * callers can omit the attr instead of writing a made-up context name.\n */\nfunction matchThemeName(tuple: Readonly<Record<string, string>>): string {\n  const match = themes.find((t) => {\n    const input = t.input as Record<string, string>;\n    return Object.keys(input).every((k) => input[k] === tuple[k]);\n  });\n  return match?.name ?? defaultTheme ?? themes[0]?.name ?? '';\n}\n\n/**\n * Write the composed permutation ID to `data-<prefix>-theme` plus one\n * `data-<prefix>-<axis>=<context>` per axis. Prefix follows `cssVarPrefix`\n * so the attr namespace and the emitted-CSS selectors stay in lockstep;\n * empty prefix keeps the bare `data-theme` form.\n */\nfunction setRootAxes(themeName: string, tuple: Readonly<Record<string, string>>): void {\n  if (typeof document === 'undefined') return;\n  const root = document.documentElement;\n  const themeAttr = dataAttr(cssVarPrefix, 'theme');\n  if (themeName) root.setAttribute(themeAttr, themeName);\n  else root.removeAttribute(themeAttr);\n  for (const axis of virtualAxes) {\n    const attr = dataAttr(cssVarPrefix, axis.name);\n    const value = tuple[axis.name];\n    if (value === undefined) {\n      root.removeAttribute(attr);\n    } else {\n      root.setAttribute(attr, value);\n    }\n  }\n  forEachPinnedAxis((name, value) => {\n    root.setAttribute(dataAttr(cssVarPrefix, name), value);\n  });\n}\n\n/**\n * Emit the full virtual-module payload to the manager over Storybook's\n * channel so the toolbar + panel (which run in the manager bundle and\n * can't import our virtual module) can render from it.\n */\nfunction broadcastInit(): void {\n  const channel = addons.getChannel();\n  channel.emit(INIT_EVENT, {\n    axes: virtualAxes,\n    disabledAxes: virtualDisabledAxes,\n    presets: virtualPresets,\n    themes,\n    defaultTheme,\n    themesResolved,\n    diagnostics,\n    cssVarPrefix,\n  });\n}\n\n/** Axis-default tuple, used as the baseline before overrides. */\nfunction defaultTuple(): Record<string, string> {\n  const out: Record<string, string> = {};\n  for (const axis of virtualAxes) out[axis.name] = axis.default;\n  return out;\n}\n\n/** Look up a `Theme.input` by composed name. Returns `undefined` if no theme matches. */\nfunction tupleForName(name: string): Record<string, string> | undefined {\n  const match = themes.find((t) => t.name === name);\n  return match?.input;\n}\n\n/**\n * Merge a partial tuple onto the axis defaults, dropping keys for axes that\n * don't exist and silently falling back to the default for contexts that\n * aren't listed on the axis.\n */\nfunction normalizeTuple(partial: Readonly<Record<string, string>>): Record<string, string> {\n  const out = defaultTuple();\n  for (const axis of virtualAxes) {\n    const candidate = partial[axis.name];\n    if (candidate !== undefined && axis.contexts.includes(candidate)) {\n      out[axis.name] = candidate;\n    }\n  }\n  return out;\n}\n\n/**\n * Resolve the active tuple from all four input channels, in priority order:\n *   1. `parameters.swatchbook.axes` — per-story tuple.\n *   2. `parameters.swatchbook.theme` — per-story composed name (legacy).\n *   3. `globals.swatchbookAxes` — toolbar-set tuple.\n *   4. `globals.swatchbookTheme` — toolbar-set composed name.\n *   5. virtual module default.\n */\nfunction resolveTuple(\n  globals: Record<string, unknown>,\n  parameters: Record<string, Record<string, unknown>>,\n): Record<string, string> {\n  const param = parameters[PARAM_KEY];\n  const paramAxes = param?.['axes'];\n  if (paramAxes && typeof paramAxes === 'object') {\n    return normalizeTuple(paramAxes as Record<string, string>);\n  }\n  const paramTheme = param?.['theme'];\n  if (typeof paramTheme === 'string') {\n    const hit = tupleForName(paramTheme);\n    if (hit) return normalizeTuple(hit);\n  }\n  const globalAxes = globals[AXES_GLOBAL_KEY];\n  if (globalAxes && typeof globalAxes === 'object') {\n    return normalizeTuple(globalAxes as Record<string, string>);\n  }\n  const globalTheme = globals[GLOBAL_KEY];\n  if (typeof globalTheme === 'string') {\n    const hit = tupleForName(globalTheme);\n    if (hit) return normalizeTuple(hit);\n  }\n  return defaultTuple();\n}\n\nfunction resolveColorFormat(globals: Record<string, unknown>): ColorFormat {\n  const raw = globals[COLOR_FORMAT_GLOBAL_KEY];\n  if (typeof raw === 'string' && (COLOR_FORMATS as readonly string[]).includes(raw)) {\n    return raw as ColorFormat;\n  }\n  return 'hex';\n}\n\nconst themedDecorator: Decorator = (Story, context) => {\n  const tuple = useMemo(\n    () =>\n      resolveTuple(\n        context.globals as Record<string, unknown>,\n        context.parameters as Record<string, Record<string, unknown>>,\n      ),\n    [context.globals, context.parameters],\n  );\n  const colorFormat = useMemo(\n    () => resolveColorFormat(context.globals as Record<string, unknown>),\n    [context.globals],\n  );\n  const themeName = useMemo(() => matchThemeName(tuple), [tuple]);\n\n  useEffect(() => {\n    ensureStylesheet();\n    broadcastInit();\n  }, []);\n\n  useEffect(() => {\n    setRootAxes(themeName, tuple);\n  }, [themeName, tuple]);\n\n  const wrapperAttrs: Record<string, string> = {};\n  if (themeName) wrapperAttrs[dataAttr(cssVarPrefix, 'theme')] = themeName;\n  for (const axis of virtualAxes) {\n    const value = tuple[axis.name];\n    if (value !== undefined) wrapperAttrs[dataAttr(cssVarPrefix, axis.name)] = value;\n  }\n  forEachPinnedAxis((name, value) => {\n    wrapperAttrs[dataAttr(cssVarPrefix, name)] = value;\n  });\n\n  const snapshot = useMemo<ProjectSnapshot>(\n    () => ({\n      axes: virtualAxes,\n      disabledAxes: virtualDisabledAxes,\n      presets: virtualPresets,\n      themes,\n      themesResolved,\n      activeTheme: themeName,\n      activeAxes: tuple,\n      cssVarPrefix,\n      diagnostics,\n      css,\n    }),\n    [themeName, tuple],\n  );\n\n  return (\n    <SwatchbookContext.Provider value={snapshot}>\n      <ThemeContext.Provider value={themeName}>\n        <AxesContext.Provider value={tuple}>\n          <ColorFormatContext.Provider value={colorFormat}>\n            <div\n              {...wrapperAttrs}\n              style={{\n                padding: '1rem',\n                minHeight: '100%',\n              }}\n            >\n              <Story />\n            </div>\n          </ColorFormatContext.Provider>\n        </AxesContext.Provider>\n      </ThemeContext.Provider>\n    </SwatchbookContext.Provider>\n  );\n};\n\n/**\n * Named exports consumed by `definePreviewAddon(previewExports)` in the\n * addon's CSF Next factory (`src/index.ts`).\n */\nexport const decorators: NonNullable<Preview['decorators']> = [themedDecorator];\n\nexport const globalTypes: NonNullable<Preview['globalTypes']> = {\n  [GLOBAL_KEY]: {\n    name: 'Theme',\n    description: 'Active swatchbook theme (composed permutation ID).',\n  },\n  [AXES_GLOBAL_KEY]: {\n    name: 'Axes',\n    description: 'Per-axis context selection. Takes precedence over the composed theme name.',\n  },\n  [COLOR_FORMAT_GLOBAL_KEY]: {\n    name: 'Color format',\n    description: 'Display format for color tokens in blocks. Emitted CSS is unaffected.',\n  },\n};\n\nfunction buildInitialAxes(): Record<string, string> {\n  const out: Record<string, string> = {};\n  for (const axis of virtualAxes) out[axis.name] = axis.default;\n  return out;\n}\n\nexport const initialGlobals: NonNullable<Preview['initialGlobals']> = {\n  [GLOBAL_KEY]: defaultTheme ?? themes[0]?.name ?? '',\n  [AXES_GLOBAL_KEY]: buildInitialAxes(),\n  [COLOR_FORMAT_GLOBAL_KEY]: 'hex',\n};\n\n/**\n * Module-level channel subscription: writes the active tuple's attributes\n * onto `<html>` regardless of whether a story decorator is rendering.\n *\n * The {@link themedDecorator} already sets these inside story renders, but\n * it never runs on MDX docs pages that embed blocks without `<Story />`.\n * Without attrs on an ancestor, the per-tuple CSS selectors\n * (`[data-mode=\"Dark\"][data-brand=\"…\"]`) don't match and everything falls\n * back to the `:root` default tuple — so colors stay defaults even after\n * the toolbar switches axes. Subscribing globally fixes MDX docs at the\n * cost of one idempotent redundant write per story render.\n */\nfunction installGlobalAxisApplier(): void {\n  if (typeof document === 'undefined') return;\n  const channel = addons.getChannel();\n  /**\n   * Inject the stylesheet and emit the init payload once on module load so\n   * the manager's toolbar populates and CSS vars are available even when no\n   * story/decorator ever runs (bare MDX docs pages). Without these, the\n   * toolbar sits in its disabled \"loading…\" state and nothing is styled.\n   */\n  ensureStylesheet();\n  broadcastInit();\n  /**\n   * If the manager subscribes to INIT_EVENT after our initial broadcast,\n   * it misses the payload and the toolbar stays in its \"loading…\" state\n   * until something else re-fires it. Honor an explicit request event so\n   * a late-mounting manager can ask for the payload.\n   */\n  channel.on(INIT_REQUEST_EVENT, broadcastInit);\n  const apply = (globals: Record<string, unknown>): void => {\n    ensureStylesheet();\n    const tuple = resolveTuple(globals, {});\n    setRootAxes(matchThemeName(tuple), tuple);\n  };\n  const onGlobals = (payload: { globals?: Record<string, unknown> }): void => {\n    if (payload.globals) apply(payload.globals);\n  };\n  channel.on('globalsUpdated', onGlobals);\n  channel.on('setGlobals', onGlobals);\n  channel.on('updateGlobals', onGlobals);\n}\n\ninstallGlobalAxisApplier();\n\n/**\n * Bridge `mousedown` inside the preview iframe to the manager via a\n * dedicated channel event. The toolbar popover's outside-click listener\n * runs on the manager's document, which can't observe mousedowns inside\n * the preview; without this bridge, clicking the canvas leaves the\n * popover open. Idempotent: fires at most once per real mousedown.\n */\nfunction installPreviewMouseDownBridge(): void {\n  if (typeof document === 'undefined') return;\n  const channel = addons.getChannel();\n  document.addEventListener('mousedown', () => {\n    channel.emit(PREVIEW_MOUSEDOWN_EVENT);\n  });\n}\n\ninstallPreviewMouseDownBridge();\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAAgB,SAAS,QAAgB,KAAqB;AAC5D,QAAO,SAAS,QAAQ,OAAO,GAAG,QAAQ,QAAQ;;;;;;;;;;AC4BpD,SAAS,EAAE,MAAsB;AAC/B,QAAO,eAAe,KAAK,aAAa,GAAG,SAAS,KAAK;;;;;;;AAQ3D,SAAS,mBAAyB;AAChC,KAAI,OAAO,aAAa,YAAa;CAQrC,MAAM,OAAO,GAAG,IAAI,IAPF;;oBAEA,EAAE,wBAAwB,CAAC;eAChC,EAAE,qBAAqB,CAAC;;;;CAKrC,IAAI,QAAQ,SAAS,eAAe,iBAAiB;AACrD,KAAI,CAAC,OAAO;AACV,UAAQ,SAAS,cAAc,QAAQ;AACvC,QAAM,KAAK;AACX,WAAS,KAAK,YAAY,MAAM;;AAElC,KAAI,MAAM,gBAAgB,KAAM,OAAM,cAAc;;;;;;;;;AAUtD,SAAS,kBAAkB,IAAiD;CAC1E,MAAM,eAAe,OAAO,IAAI;AAChC,KAAI,CAAC,aAAc;AACnB,MAAK,MAAM,QAAQA,cAAqB;EACtC,MAAM,QAAQ,aAAa;AAC3B,MAAI,UAAU,KAAA,EAAW,IAAG,MAAM,MAAM;;;;;;;;AAS5C,SAAS,eAAe,OAAiD;AAKvE,QAJc,OAAO,MAAM,MAAM;EAC/B,MAAM,QAAQ,EAAE;AAChB,SAAO,OAAO,KAAK,MAAM,CAAC,OAAO,MAAM,MAAM,OAAO,MAAM,GAAG;GAC7D,EACY,QAAQ,gBAAgB,OAAO,IAAI,QAAQ;;;;;;;;AAS3D,SAAS,YAAY,WAAmB,OAA+C;AACrF,KAAI,OAAO,aAAa,YAAa;CACrC,MAAM,OAAO,SAAS;CACtB,MAAM,YAAY,SAAS,cAAc,QAAQ;AACjD,KAAI,UAAW,MAAK,aAAa,WAAW,UAAU;KACjD,MAAK,gBAAgB,UAAU;AACpC,MAAK,MAAM,QAAQC,MAAa;EAC9B,MAAM,OAAO,SAAS,cAAc,KAAK,KAAK;EAC9C,MAAM,QAAQ,MAAM,KAAK;AACzB,MAAI,UAAU,KAAA,EACZ,MAAK,gBAAgB,KAAK;MAE1B,MAAK,aAAa,MAAM,MAAM;;AAGlC,oBAAmB,MAAM,UAAU;AACjC,OAAK,aAAa,SAAS,cAAc,KAAK,EAAE,MAAM;GACtD;;;;;;;AAQJ,SAAS,gBAAsB;AACb,QAAO,YAAY,CAC3B,KAAK,YAAY;EACjBA;EACQD;EACLE;EACT;EACA;EACA;EACA;EACA;EACD,CAAC;;;AAIJ,SAAS,eAAuC;CAC9C,MAAM,MAA8B,EAAE;AACtC,MAAK,MAAM,QAAQD,KAAa,KAAI,KAAK,QAAQ,KAAK;AACtD,QAAO;;;AAIT,SAAS,aAAa,MAAkD;AAEtE,QADc,OAAO,MAAM,MAAM,EAAE,SAAS,KAAK,EACnC;;;;;;;AAQhB,SAAS,eAAe,SAAmE;CACzF,MAAM,MAAM,cAAc;AAC1B,MAAK,MAAM,QAAQA,MAAa;EAC9B,MAAM,YAAY,QAAQ,KAAK;AAC/B,MAAI,cAAc,KAAA,KAAa,KAAK,SAAS,SAAS,UAAU,CAC9D,KAAI,KAAK,QAAQ;;AAGrB,QAAO;;;;;;;;;;AAWT,SAAS,aACP,SACA,YACwB;CACxB,MAAM,QAAQ,WAAW;CACzB,MAAM,YAAY,QAAQ;AAC1B,KAAI,aAAa,OAAO,cAAc,SACpC,QAAO,eAAe,UAAoC;CAE5D,MAAM,aAAa,QAAQ;AAC3B,KAAI,OAAO,eAAe,UAAU;EAClC,MAAM,MAAM,aAAa,WAAW;AACpC,MAAI,IAAK,QAAO,eAAe,IAAI;;CAErC,MAAM,aAAa,QAAQ;AAC3B,KAAI,cAAc,OAAO,eAAe,SACtC,QAAO,eAAe,WAAqC;CAE7D,MAAM,cAAc,QAAQ;AAC5B,KAAI,OAAO,gBAAgB,UAAU;EACnC,MAAM,MAAM,aAAa,YAAY;AACrC,MAAI,IAAK,QAAO,eAAe,IAAI;;AAErC,QAAO,cAAc;;AAGvB,SAAS,mBAAmB,SAA+C;CACzE,MAAM,MAAM,QAAQ;AACpB,KAAI,OAAO,QAAQ,YAAa,cAAoC,SAAS,IAAI,CAC/E,QAAO;AAET,QAAO;;AAGT,MAAM,mBAA8B,OAAO,YAAY;CACrD,MAAM,QAAQ,cAEV,aACE,QAAQ,SACR,QAAQ,WACT,EACH,CAAC,QAAQ,SAAS,QAAQ,WAAW,CACtC;CACD,MAAM,cAAc,cACZ,mBAAmB,QAAQ,QAAmC,EACpE,CAAC,QAAQ,QAAQ,CAClB;CACD,MAAM,YAAY,cAAc,eAAe,MAAM,EAAE,CAAC,MAAM,CAAC;AAE/D,iBAAgB;AACd,oBAAkB;AAClB,iBAAe;IACd,EAAE,CAAC;AAEN,iBAAgB;AACd,cAAY,WAAW,MAAM;IAC5B,CAAC,WAAW,MAAM,CAAC;CAEtB,MAAM,eAAuC,EAAE;AAC/C,KAAI,UAAW,cAAa,SAAS,cAAc,QAAQ,IAAI;AAC/D,MAAK,MAAM,QAAQA,MAAa;EAC9B,MAAM,QAAQ,MAAM,KAAK;AACzB,MAAI,UAAU,KAAA,EAAW,cAAa,SAAS,cAAc,KAAK,KAAK,IAAI;;AAE7E,oBAAmB,MAAM,UAAU;AACjC,eAAa,SAAS,cAAc,KAAK,IAAI;GAC7C;CAEF,MAAM,WAAW,eACR;EACCA;EACQD;EACLE;EACT;EACA;EACA,aAAa;EACb,YAAY;EACZ;EACA;EACA;EACD,GACD,CAAC,WAAW,MAAM,CACnB;AAED,QACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;YACjC,oBAAC,aAAa,UAAd;GAAuB,OAAO;aAC5B,oBAAC,YAAY,UAAb;IAAsB,OAAO;cAC3B,oBAAC,mBAAmB,UAApB;KAA6B,OAAO;eAClC,oBAAC,OAAD;MACE,GAAI;MACJ,OAAO;OACL,SAAS;OACT,WAAW;OACZ;gBAED,oBAAC,OAAD,EAAS,CAAA;MACL,CAAA;KACsB,CAAA;IACT,CAAA;GACD,CAAA;EACG,CAAA;;;;;;AAQjC,MAAa,aAAiD,CAAC,gBAAgB;AAE/E,MAAa,cAAmD;EAC7D,aAAa;EACZ,MAAM;EACN,aAAa;EACd;EACA,kBAAkB;EACjB,MAAM;EACN,aAAa;EACd;EACA,0BAA0B;EACzB,MAAM;EACN,aAAa;EACd;CACF;AAED,SAAS,mBAA2C;CAClD,MAAM,MAA8B,EAAE;AACtC,MAAK,MAAM,QAAQD,KAAa,KAAI,KAAK,QAAQ,KAAK;AACtD,QAAO;;AAGT,MAAa,iBAAyD;EACnE,aAAa,gBAAgB,OAAO,IAAI,QAAQ;EAChD,kBAAkB,kBAAkB;EACpC,0BAA0B;CAC5B;;;;;;;;;;;;;AAcD,SAAS,2BAAiC;AACxC,KAAI,OAAO,aAAa,YAAa;CACrC,MAAM,UAAU,OAAO,YAAY;;;;;;;AAOnC,mBAAkB;AAClB,gBAAe;;;;;;;AAOf,SAAQ,GAAG,oBAAoB,cAAc;CAC7C,MAAM,SAAS,YAA2C;AACxD,oBAAkB;EAClB,MAAM,QAAQ,aAAa,SAAS,EAAE,CAAC;AACvC,cAAY,eAAe,MAAM,EAAE,MAAM;;CAE3C,MAAM,aAAa,YAAyD;AAC1E,MAAI,QAAQ,QAAS,OAAM,QAAQ,QAAQ;;AAE7C,SAAQ,GAAG,kBAAkB,UAAU;AACvC,SAAQ,GAAG,cAAc,UAAU;AACnC,SAAQ,GAAG,iBAAiB,UAAU;;AAGxC,0BAA0B;;;;;;;;AAS1B,SAAS,gCAAsC;AAC7C,KAAI,OAAO,aAAa,YAAa;CACrC,MAAM,UAAU,OAAO,YAAY;AACnC,UAAS,iBAAiB,mBAAmB;AAC3C,UAAQ,KAAK,wBAAwB;GACrC;;AAGJ,+BAA+B"}

package/dist/preview.mjs

@@ -1,2 +1,2 @@
-import { n as globalTypes, r as initialGlobals, t as decorators } from "./preview-6M-JBML3.mjs";
+import { n as globalTypes, r as initialGlobals, t as decorators } from "./preview-C91uAAG-.mjs";
 export { decorators, globalTypes, initialGlobals };

package/package.json

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

package/dist/preview-6M-JBML3.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-6M-JBML3.mjs","names":["virtualDisabledAxes","virtualAxes","virtualPresets"],"sources":["../src/data-attr.ts","../src/preview.tsx"],"sourcesContent":["/**\n * Produce a prefixed `data-*` attribute name when `prefix` is set, bare\n * `data-<key>` otherwise. Duplicated from `@unpunnyfuns/swatchbook-core`'s\n * `dataAttr` so the preview bundle doesn't have to import from core —\n * core's top-level entry pulls in Node-only modules (`node:fs/promises`\n * via the loader) that throw when evaluated in the browser.\n */\nexport function dataAttr(prefix: string, key: string): string {\n  return prefix ? `data-${prefix}-${key}` : `data-${key}`;\n}\n","import type { Decorator, Preview } from '@storybook/react-vite';\nimport { useEffect, useMemo } from 'react';\nimport { addons } from 'storybook/preview-api';\nimport { dataAttr } from '#/data-attr.ts';\nimport {\n  axes as virtualAxes,\n  css,\n  cssVarPrefix,\n  defaultTheme,\n  diagnostics,\n  disabledAxes as virtualDisabledAxes,\n  presets as virtualPresets,\n  themes,\n  themesResolved,\n} from 'virtual:swatchbook/tokens';\nimport {\n  AxesContext,\n  COLOR_FORMATS,\n  type ColorFormat,\n  ColorFormatContext,\n  type ProjectSnapshot,\n  SwatchbookContext,\n  ThemeContext,\n} from '@unpunnyfuns/swatchbook-blocks';\nimport {\n  AXES_GLOBAL_KEY,\n  COLOR_FORMAT_GLOBAL_KEY,\n  GLOBAL_KEY,\n  INIT_EVENT,\n  INIT_REQUEST_EVENT,\n  PREVIEW_MOUSEDOWN_EVENT,\n  PARAM_KEY,\n  STYLE_ELEMENT_ID,\n} from '#/constants.ts';\n\n/** CSS var name with the active prefix applied. */\nfunction v(name: string): string {\n  return cssVarPrefix ? `--${cssVarPrefix}-${name}` : `--${name}`;\n}\n\n/**\n * Inject the per-theme stylesheet plus a tiny `html, body { ... }` block so\n * the iframe's own chrome (outside any decorator wrapper — Docs mode,\n * autodocs, empty gutters) also picks up the active theme.\n */\nfunction ensureStylesheet(): void {\n  if (typeof document === 'undefined') return;\n  const bodyRules = `\nhtml, body {\n  background: var(${v('color-sys-surface-default')}, Canvas);\n  color: var(${v('color-sys-text-default')}, CanvasText);\n  margin: 0;\n}\n`;\n  const text = `${css}\\n${bodyRules}`;\n  let style = document.getElementById(STYLE_ELEMENT_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ELEMENT_ID;\n    document.head.appendChild(style);\n  }\n  if (style.textContent !== text) style.textContent = text;\n}\n\n/**\n * Apply `cb(axisName, value)` for every pinned (disabled) axis whose value\n * is present on any surviving theme's `input`. Disabled axes don't appear\n * in `virtualAxes`, but CSS may still reference their pinned value on\n * compound selectors — every theme that survived filtering carries the\n * same pinned context per disabled axis, so sampling any theme works.\n */\nfunction forEachPinnedAxis(cb: (name: string, value: string) => void): void {\n  const pinnedSample = themes[0]?.input;\n  if (!pinnedSample) return;\n  for (const name of virtualDisabledAxes) {\n    const value = pinnedSample[name];\n    if (value !== undefined) cb(name, value);\n  }\n}\n\n/**\n * Pick the theme name for a tuple, falling back to `defaultTheme` and then\n * the first theme. Returns empty string when the project has no themes so\n * callers can omit the attr instead of writing a made-up context name.\n */\nfunction matchThemeName(tuple: Readonly<Record<string, string>>): string {\n  const match = themes.find((t) => {\n    const input = t.input as Record<string, string>;\n    return Object.keys(input).every((k) => input[k] === tuple[k]);\n  });\n  return match?.name ?? defaultTheme ?? themes[0]?.name ?? '';\n}\n\n/**\n * Write the composed permutation ID to `data-<prefix>-theme` plus one\n * `data-<prefix>-<axis>=<context>` per axis. Prefix follows `cssVarPrefix`\n * so the attr namespace and the emitted-CSS selectors stay in lockstep;\n * empty prefix keeps the bare `data-theme` form.\n */\nfunction setRootAxes(themeName: string, tuple: Readonly<Record<string, string>>): void {\n  if (typeof document === 'undefined') return;\n  const root = document.documentElement;\n  const themeAttr = dataAttr(cssVarPrefix, 'theme');\n  if (themeName) root.setAttribute(themeAttr, themeName);\n  else root.removeAttribute(themeAttr);\n  for (const axis of virtualAxes) {\n    const attr = dataAttr(cssVarPrefix, axis.name);\n    const value = tuple[axis.name];\n    if (value === undefined) {\n      root.removeAttribute(attr);\n    } else {\n      root.setAttribute(attr, value);\n    }\n  }\n  forEachPinnedAxis((name, value) => {\n    root.setAttribute(dataAttr(cssVarPrefix, name), value);\n  });\n}\n\n/**\n * Emit the full virtual-module payload to the manager over Storybook's\n * channel so the toolbar + panel (which run in the manager bundle and\n * can't import our virtual module) can render from it.\n */\nfunction broadcastInit(): void {\n  const channel = addons.getChannel();\n  channel.emit(INIT_EVENT, {\n    axes: virtualAxes,\n    disabledAxes: virtualDisabledAxes,\n    presets: virtualPresets,\n    themes,\n    defaultTheme,\n    themesResolved,\n    diagnostics,\n    cssVarPrefix,\n  });\n}\n\n/** Axis-default tuple, used as the baseline before overrides. */\nfunction defaultTuple(): Record<string, string> {\n  const out: Record<string, string> = {};\n  for (const axis of virtualAxes) out[axis.name] = axis.default;\n  return out;\n}\n\n/** Look up a `Theme.input` by composed name. Returns `undefined` if no theme matches. */\nfunction tupleForName(name: string): Record<string, string> | undefined {\n  const match = themes.find((t) => t.name === name);\n  return match?.input;\n}\n\n/**\n * Merge a partial tuple onto the axis defaults, dropping keys for axes that\n * don't exist and silently falling back to the default for contexts that\n * aren't listed on the axis.\n */\nfunction normalizeTuple(partial: Readonly<Record<string, string>>): Record<string, string> {\n  const out = defaultTuple();\n  for (const axis of virtualAxes) {\n    const candidate = partial[axis.name];\n    if (candidate !== undefined && axis.contexts.includes(candidate)) {\n      out[axis.name] = candidate;\n    }\n  }\n  return out;\n}\n\n/**\n * Resolve the active tuple from all four input channels, in priority order:\n *   1. `parameters.swatchbook.axes` — per-story tuple.\n *   2. `parameters.swatchbook.theme` — per-story composed name (legacy).\n *   3. `globals.swatchbookAxes` — toolbar-set tuple.\n *   4. `globals.swatchbookTheme` — toolbar-set composed name.\n *   5. virtual module default.\n */\nfunction resolveTuple(\n  globals: Record<string, unknown>,\n  parameters: Record<string, Record<string, unknown>>,\n): Record<string, string> {\n  const param = parameters[PARAM_KEY];\n  const paramAxes = param?.['axes'];\n  if (paramAxes && typeof paramAxes === 'object') {\n    return normalizeTuple(paramAxes as Record<string, string>);\n  }\n  const paramTheme = param?.['theme'];\n  if (typeof paramTheme === 'string') {\n    const hit = tupleForName(paramTheme);\n    if (hit) return normalizeTuple(hit);\n  }\n  const globalAxes = globals[AXES_GLOBAL_KEY];\n  if (globalAxes && typeof globalAxes === 'object') {\n    return normalizeTuple(globalAxes as Record<string, string>);\n  }\n  const globalTheme = globals[GLOBAL_KEY];\n  if (typeof globalTheme === 'string') {\n    const hit = tupleForName(globalTheme);\n    if (hit) return normalizeTuple(hit);\n  }\n  return defaultTuple();\n}\n\nfunction resolveColorFormat(globals: Record<string, unknown>): ColorFormat {\n  const raw = globals[COLOR_FORMAT_GLOBAL_KEY];\n  if (typeof raw === 'string' && (COLOR_FORMATS as readonly string[]).includes(raw)) {\n    return raw as ColorFormat;\n  }\n  return 'hex';\n}\n\nconst themedDecorator: Decorator = (Story, context) => {\n  const tuple = useMemo(\n    () =>\n      resolveTuple(\n        context.globals as Record<string, unknown>,\n        context.parameters as Record<string, Record<string, unknown>>,\n      ),\n    [context.globals, context.parameters],\n  );\n  const colorFormat = useMemo(\n    () => resolveColorFormat(context.globals as Record<string, unknown>),\n    [context.globals],\n  );\n  const themeName = useMemo(() => matchThemeName(tuple), [tuple]);\n\n  useEffect(() => {\n    ensureStylesheet();\n    broadcastInit();\n  }, []);\n\n  useEffect(() => {\n    setRootAxes(themeName, tuple);\n  }, [themeName, tuple]);\n\n  const wrapperAttrs: Record<string, string> = {};\n  if (themeName) wrapperAttrs[dataAttr(cssVarPrefix, 'theme')] = themeName;\n  for (const axis of virtualAxes) {\n    const value = tuple[axis.name];\n    if (value !== undefined) wrapperAttrs[dataAttr(cssVarPrefix, axis.name)] = value;\n  }\n  forEachPinnedAxis((name, value) => {\n    wrapperAttrs[dataAttr(cssVarPrefix, name)] = value;\n  });\n\n  const snapshot = useMemo<ProjectSnapshot>(\n    () => ({\n      axes: virtualAxes,\n      disabledAxes: virtualDisabledAxes,\n      presets: virtualPresets,\n      themes,\n      themesResolved,\n      activeTheme: themeName,\n      activeAxes: tuple,\n      cssVarPrefix,\n      diagnostics,\n      css,\n    }),\n    [themeName, tuple],\n  );\n\n  return (\n    <SwatchbookContext.Provider value={snapshot}>\n      <ThemeContext.Provider value={themeName}>\n        <AxesContext.Provider value={tuple}>\n          <ColorFormatContext.Provider value={colorFormat}>\n            <div\n              {...wrapperAttrs}\n              style={{\n                padding: '1rem',\n                minHeight: '100%',\n              }}\n            >\n              <Story />\n            </div>\n          </ColorFormatContext.Provider>\n        </AxesContext.Provider>\n      </ThemeContext.Provider>\n    </SwatchbookContext.Provider>\n  );\n};\n\n/**\n * Named exports consumed by `definePreviewAddon(previewExports)` in the\n * addon's CSF Next factory (`src/index.ts`).\n */\nexport const decorators: NonNullable<Preview['decorators']> = [themedDecorator];\n\nexport const globalTypes: NonNullable<Preview['globalTypes']> = {\n  [GLOBAL_KEY]: {\n    name: 'Theme',\n    description: 'Active swatchbook theme (composed permutation ID).',\n  },\n  [AXES_GLOBAL_KEY]: {\n    name: 'Axes',\n    description: 'Per-axis context selection. Takes precedence over the composed theme name.',\n  },\n  [COLOR_FORMAT_GLOBAL_KEY]: {\n    name: 'Color format',\n    description: 'Display format for color tokens in blocks. Emitted CSS is unaffected.',\n  },\n};\n\nfunction buildInitialAxes(): Record<string, string> {\n  const out: Record<string, string> = {};\n  for (const axis of virtualAxes) out[axis.name] = axis.default;\n  return out;\n}\n\nexport const initialGlobals: NonNullable<Preview['initialGlobals']> = {\n  [GLOBAL_KEY]: defaultTheme ?? themes[0]?.name ?? '',\n  [AXES_GLOBAL_KEY]: buildInitialAxes(),\n  [COLOR_FORMAT_GLOBAL_KEY]: 'hex',\n};\n\n/**\n * Module-level channel subscription: writes the active tuple's attributes\n * onto `<html>` regardless of whether a story decorator is rendering.\n *\n * The {@link themedDecorator} already sets these inside story renders, but\n * it never runs on MDX docs pages that embed blocks without `<Story />`.\n * Without attrs on an ancestor, the per-tuple CSS selectors\n * (`[data-mode=\"Dark\"][data-brand=\"…\"]`) don't match and everything falls\n * back to the `:root` default tuple — so colors stay defaults even after\n * the toolbar switches axes. Subscribing globally fixes MDX docs at the\n * cost of one idempotent redundant write per story render.\n */\nfunction installGlobalAxisApplier(): void {\n  if (typeof document === 'undefined') return;\n  const channel = addons.getChannel();\n  /**\n   * Inject the stylesheet and emit the init payload once on module load so\n   * the manager's toolbar populates and CSS vars are available even when no\n   * story/decorator ever runs (bare MDX docs pages). Without these, the\n   * toolbar sits in its disabled \"loading…\" state and nothing is styled.\n   */\n  ensureStylesheet();\n  broadcastInit();\n  /**\n   * If the manager subscribes to INIT_EVENT after our initial broadcast,\n   * it misses the payload and the toolbar stays in its \"loading…\" state\n   * until something else re-fires it. Honor an explicit request event so\n   * a late-mounting manager can ask for the payload.\n   */\n  channel.on(INIT_REQUEST_EVENT, broadcastInit);\n  const apply = (globals: Record<string, unknown>): void => {\n    ensureStylesheet();\n    const tuple = resolveTuple(globals, {});\n    setRootAxes(matchThemeName(tuple), tuple);\n  };\n  const onGlobals = (payload: { globals?: Record<string, unknown> }): void => {\n    if (payload.globals) apply(payload.globals);\n  };\n  channel.on('globalsUpdated', onGlobals);\n  channel.on('setGlobals', onGlobals);\n  channel.on('updateGlobals', onGlobals);\n}\n\ninstallGlobalAxisApplier();\n\n/**\n * Bridge `mousedown` inside the preview iframe to the manager via a\n * dedicated channel event. The toolbar popover's outside-click listener\n * runs on the manager's document, which can't observe mousedowns inside\n * the preview; without this bridge, clicking the canvas leaves the\n * popover open. Idempotent: fires at most once per real mousedown.\n */\nfunction installPreviewMouseDownBridge(): void {\n  if (typeof document === 'undefined') return;\n  const channel = addons.getChannel();\n  document.addEventListener('mousedown', () => {\n    channel.emit(PREVIEW_MOUSEDOWN_EVENT);\n  });\n}\n\ninstallPreviewMouseDownBridge();\n"],"mappings":"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"}