@unpunnyfuns/swatchbook-switcher 0.55.0 → 0.57.0

package/README.md

@@ -21,7 +21,6 @@ import '@unpunnyfuns/swatchbook-switcher/style.css';
 <ThemeSwitcher
   axes={axes}
   presets={presets}
-  permutations={permutations}
   activeTuple={{ mode: 'Dark' }}
   defaults={{ mode: 'Light', brand: 'Default', contrast: 'Normal' }}
   lastApplied={null}
@@ -40,7 +39,7 @@ The component is pure — it doesn't read or write to storage, and it doesn't ba
 
 Color-format selection isn't part of the switcher — hosts that need it slot a `<ColorFormatSelector>` (or any other custom node) into the optional `footer` prop.
 
-`SwitcherAxis` / `SwitcherPreset` / `SwitcherPermutation` are the accepted shapes and are cross-compatible with `Project.axes` / `.presets` / `.permutations` from `@unpunnyfuns/swatchbook-core` — pass them through directly.
+`SwitcherAxis` / `SwitcherPreset` are the accepted shapes and are cross-compatible with `Project.axes` / `Project.presets` from `@unpunnyfuns/swatchbook-core` — pass them through directly.
 
 ## Credits
 

package/dist/index.d.mts

@@ -65,5 +65,14 @@ declare function ThemeSwitcher({
   footer
 }: ThemeSwitcherProps): ReactElement;
 //#endregion
-export { type SwitcherAxis, type SwitcherPreset, ThemeSwitcher, type ThemeSwitcherProps };
+//#region src/preset-tuple.d.ts
+/**
+ * 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). Mirrors the addon preview decorator's own
+ * fallback logic so what a host sends out is what the decorator honors.
+ */
+declare function presetTuple(preset: SwitcherPreset, axes: readonly SwitcherAxis[], defaults: Readonly<Record<string, string>>): Record<string, string>;
+//#endregion
+export { type SwitcherAxis, type SwitcherPreset, ThemeSwitcher, type ThemeSwitcherProps, presetTuple };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -1,6 +1,22 @@
 import './style.css';
 import cx from "clsx";
 import React from "react";
+//#region src/preset-tuple.ts
+/**
+* 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). Mirrors the addon preview decorator's own
+* fallback logic so what a host sends out is what the decorator honors.
+*/
+function presetTuple(preset, axes, defaults) {
+	const out = { ...defaults };
+	for (const axis of axes) {
+		const candidate = preset.axes[axis.name];
+		if (candidate !== void 0 && axis.contexts.includes(candidate)) out[axis.name] = candidate;
+	}
+	return out;
+}
+//#endregion
 //#region src/ThemeSwitcher.tsx
 /**
 * Popover body for the swatchbook theme switcher. Renders preset pills
@@ -84,26 +100,11 @@ function displayLabelFor(axis) {
 	if (axis.source === "synthetic" && axis.name === "theme") return "Permutation";
 	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). Mirrors the addon preview decorator's own
-* fallback logic so what the switcher sends out matches what the host
-* honors.
-*/
-function presetTuple(preset, axes, defaults) {
-	const out = { ...defaults };
-	for (const axis of axes) {
-		const candidate = preset.axes[axis.name];
-		if (candidate !== void 0 && axis.contexts.includes(candidate)) out[axis.name] = candidate;
-	}
-	return out;
-}
 function tuplesEqual(a, b, axes) {
 	for (const axis of axes) if (a[axis.name] !== b[axis.name]) return false;
 	return true;
 }
 //#endregion
-export { ThemeSwitcher };
+export { ThemeSwitcher, presetTuple };
 
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/ThemeSwitcher.tsx"],"sourcesContent":["import cx from 'clsx';\nimport React, { type KeyboardEvent, type ReactElement } from 'react';\nimport './ThemeSwitcher.css';\nimport type { SwitcherAxis, SwitcherPreset } from '#/types.ts';\n\nexport interface ThemeSwitcherProps {\n  /** Project axes the UI renders one section per. */\n  axes: readonly SwitcherAxis[];\n  /** Saved preset snapshots rendered above the axes, if any. */\n  presets?: readonly SwitcherPreset[];\n  /** Active axis tuple, keyed by axis name. */\n  activeTuple: Readonly<Record<string, string>>;\n  /** Default tuple used to fill in omitted preset axes. */\n  defaults: Readonly<Record<string, string>>;\n  /** Name of the most recently applied preset, or null. Drives the \"modified\" dot. */\n  lastApplied: string | null;\n  /** Receives an axis name + new context. */\n  onAxisChange(axisName: string, next: string): void;\n  /** Called with the full preset object when the user clicks a preset pill. */\n  onPresetApply(preset: SwitcherPreset): void;\n  /** Optional key handler, usually used by consumers to close a popover on Escape. */\n  onKeyDown?(event: KeyboardEvent<HTMLDivElement>): void;\n  /** Host-specific content rendered after the axes (e.g. the Storybook addon's color-format picker). */\n  footer?: ReactElement | null;\n}\n\n/**\n * Popover body for the swatchbook theme switcher. Renders preset pills\n * (when the project ships any) and one row per axis. Color-format\n * selection is specific to the Storybook addon (it toggles how blocks\n * stringify colors); hosts that need it slot\n * `<ColorFormatSelector>` into the `footer` prop rather than it being\n * baked into every consumer.\n *\n * Consumers own the trigger + positioning — the switcher just draws\n * the menu. Uses classic JSX so it survives embedding in Storybook's\n * manager bundle (which doesn't expose `react/jsx-runtime`).\n */\nexport function ThemeSwitcher({\n  axes,\n  presets = [],\n  activeTuple,\n  defaults,\n  lastApplied,\n  onAxisChange,\n  onPresetApply,\n  onKeyDown,\n  footer,\n}: ThemeSwitcherProps): ReactElement {\n  return (\n    // `role=\"group\"` + `aria-label` — the switcher is a settings panel\n    // (presets, per-axis selectors, color-format pills), not a command\n    // menu. WAI-ARIA `menu` would require `menuitem`-rolled children plus\n    // a roving tabindex; the actual content is a panel of independent\n    // controls each of which already exposes its own role + state.\n    <div\n      role=\"group\"\n      aria-label=\"Swatchbook controls\"\n      tabIndex={-1}\n      className=\"sb-switcher\"\n      onKeyDown={onKeyDown}\n      data-testid=\"swatchbook-switcher\"\n    >\n      {presets.length > 0 && (\n        <>\n          <PresetsSection\n            presets={presets}\n            axes={axes}\n            defaults={defaults}\n            activeTuple={activeTuple}\n            lastApplied={lastApplied}\n            onApply={onPresetApply}\n          />\n          <div className=\"sb-switcher__divider\" />\n        </>\n      )}\n\n      {axes.map((axis) => (\n        <AxisSection\n          key={`axis-${axis.name}`}\n          axis={axis}\n          active={activeTuple[axis.name] ?? axis.default}\n          onSelect={(next) => onAxisChange(axis.name, next)}\n        />\n      ))}\n\n      {footer && (\n        <>\n          <div className=\"sb-switcher__divider\" />\n          {footer}\n        </>\n      )}\n    </div>\n  );\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 (\n    <button\n      type=\"button\"\n      title={title}\n      onClick={onClick}\n      // Skip focus on mouse click so host permutations that paint a :focus\n      // border-color don't stick it on the previously-clicked pill.\n      // Keyboard tabbing still lands focus normally; only preventDefault\n      // on mousedown blocks the implicit focus-on-click behavior.\n      onMouseDown={(event) => event.preventDefault()}\n      className={cx('sb-switcher__pill', active && 'sb-switcher__pill--active')}\n    >\n      {label}\n      {trailing ?? null}\n    </button>\n  );\n}\n\ninterface PresetsSectionProps {\n  presets: readonly SwitcherPreset[];\n  axes: readonly SwitcherAxis[];\n  defaults: Readonly<Record<string, string>>;\n  activeTuple: Readonly<Record<string, string>>;\n  lastApplied: string | null;\n  onApply(preset: SwitcherPreset): void;\n}\n\nfunction PresetsSection({\n  presets,\n  axes,\n  defaults,\n  activeTuple,\n  lastApplied,\n  onApply,\n}: PresetsSectionProps): ReactElement {\n  return (\n    <div>\n      <div className=\"sb-switcher__section-label\">Presets</div>\n      <div className=\"sb-switcher__section-body\">\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 (\n            <OptionPill\n              key={`preset/${preset.name}`}\n              label={preset.name}\n              active={matches}\n              title={title}\n              onClick={() => onApply(preset)}\n              trailing={\n                modified ? <span aria-hidden className=\"sb-switcher__pill-modified\" /> : null\n              }\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\ninterface AxisSectionProps {\n  axis: SwitcherAxis;\n  active: string;\n  onSelect(next: string): void;\n}\n\nfunction AxisSection({ axis, active, onSelect }: AxisSectionProps): ReactElement {\n  return (\n    <div className=\"sb-switcher__axis-row\">\n      <div className=\"sb-switcher__axis-label\" title={axis.description}>\n        {displayLabelFor(axis)}\n      </div>\n      <div className=\"sb-switcher__axis-pills\">\n        {axis.contexts.map((ctx) => (\n          <OptionPill\n            key={`${axis.name}/${ctx}`}\n            label={ctx}\n            active={ctx === active}\n            onClick={() => onSelect(ctx)}\n          />\n        ))}\n      </div>\n    </div>\n  );\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 reads as \"Permutation\". Authored single-axis resolvers keep their real\n * name (e.g. `mode`, `brand`).\n */\nfunction displayLabelFor(axis: SwitcherAxis): string {\n  if (axis.source === 'synthetic' && axis.name === 'theme') return 'Permutation';\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). Mirrors the addon preview decorator's own\n * fallback logic so what the switcher sends out matches what the host\n * honors.\n */\nfunction presetTuple(\n  preset: SwitcherPreset,\n  axes: readonly SwitcherAxis[],\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 SwitcherAxis[],\n): boolean {\n  for (const axis of axes) {\n    if (a[axis.name] !== b[axis.name]) return false;\n  }\n  return true;\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/preset-tuple.ts","../src/ThemeSwitcher.tsx"],"sourcesContent":["import type { SwitcherAxis, SwitcherPreset } from '#/types.ts';\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 addon preview decorator's own\n * fallback logic so what a host sends out is what the decorator honors.\n */\nexport function presetTuple(\n  preset: SwitcherPreset,\n  axes: readonly SwitcherAxis[],\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","import cx from 'clsx';\nimport React from 'react';\nimport type { KeyboardEvent, ReactElement } from 'react';\nimport './ThemeSwitcher.css';\nimport { presetTuple } from '#/preset-tuple.ts';\nimport type { SwitcherAxis, SwitcherPreset } from '#/types.ts';\n\nexport interface ThemeSwitcherProps {\n  /** Project axes the UI renders one section per. */\n  axes: readonly SwitcherAxis[];\n  /** Saved preset snapshots rendered above the axes, if any. */\n  presets?: readonly SwitcherPreset[];\n  /** Active axis tuple, keyed by axis name. */\n  activeTuple: Readonly<Record<string, string>>;\n  /** Default tuple used to fill in omitted preset axes. */\n  defaults: Readonly<Record<string, string>>;\n  /** Name of the most recently applied preset, or null. Drives the \"modified\" dot. */\n  lastApplied: string | null;\n  /** Receives an axis name + new context. */\n  onAxisChange(axisName: string, next: string): void;\n  /** Called with the full preset object when the user clicks a preset pill. */\n  onPresetApply(preset: SwitcherPreset): void;\n  /** Optional key handler, usually used by consumers to close a popover on Escape. */\n  onKeyDown?(event: KeyboardEvent<HTMLDivElement>): void;\n  /** Host-specific content rendered after the axes (e.g. the Storybook addon's color-format picker). */\n  footer?: ReactElement | null;\n}\n\n/**\n * Popover body for the swatchbook theme switcher. Renders preset pills\n * (when the project ships any) and one row per axis. Color-format\n * selection is specific to the Storybook addon (it toggles how blocks\n * stringify colors); hosts that need it slot\n * `<ColorFormatSelector>` into the `footer` prop rather than it being\n * baked into every consumer.\n *\n * Consumers own the trigger + positioning — the switcher just draws\n * the menu. Uses classic JSX so it survives embedding in Storybook's\n * manager bundle (which doesn't expose `react/jsx-runtime`).\n */\nexport function ThemeSwitcher({\n  axes,\n  presets = [],\n  activeTuple,\n  defaults,\n  lastApplied,\n  onAxisChange,\n  onPresetApply,\n  onKeyDown,\n  footer,\n}: ThemeSwitcherProps): ReactElement {\n  return (\n    // `role=\"group\"` + `aria-label` — the switcher is a settings panel\n    // (presets, per-axis selectors, color-format pills), not a command\n    // menu. WAI-ARIA `menu` would require `menuitem`-rolled children plus\n    // a roving tabindex; the actual content is a panel of independent\n    // controls each of which already exposes its own role + state.\n    <div\n      role=\"group\"\n      aria-label=\"Swatchbook controls\"\n      tabIndex={-1}\n      className=\"sb-switcher\"\n      onKeyDown={onKeyDown}\n      data-testid=\"swatchbook-switcher\"\n    >\n      {presets.length > 0 && (\n        <>\n          <PresetsSection\n            presets={presets}\n            axes={axes}\n            defaults={defaults}\n            activeTuple={activeTuple}\n            lastApplied={lastApplied}\n            onApply={onPresetApply}\n          />\n          <div className=\"sb-switcher__divider\" />\n        </>\n      )}\n\n      {axes.map((axis) => (\n        <AxisSection\n          key={`axis-${axis.name}`}\n          axis={axis}\n          active={activeTuple[axis.name] ?? axis.default}\n          onSelect={(next) => onAxisChange(axis.name, next)}\n        />\n      ))}\n\n      {footer && (\n        <>\n          <div className=\"sb-switcher__divider\" />\n          {footer}\n        </>\n      )}\n    </div>\n  );\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 (\n    <button\n      type=\"button\"\n      title={title}\n      onClick={onClick}\n      // Skip focus on mouse click so host permutations that paint a :focus\n      // border-color don't stick it on the previously-clicked pill.\n      // Keyboard tabbing still lands focus normally; only preventDefault\n      // on mousedown blocks the implicit focus-on-click behavior.\n      onMouseDown={(event) => event.preventDefault()}\n      className={cx('sb-switcher__pill', active && 'sb-switcher__pill--active')}\n    >\n      {label}\n      {trailing ?? null}\n    </button>\n  );\n}\n\ninterface PresetsSectionProps {\n  presets: readonly SwitcherPreset[];\n  axes: readonly SwitcherAxis[];\n  defaults: Readonly<Record<string, string>>;\n  activeTuple: Readonly<Record<string, string>>;\n  lastApplied: string | null;\n  onApply(preset: SwitcherPreset): void;\n}\n\nfunction PresetsSection({\n  presets,\n  axes,\n  defaults,\n  activeTuple,\n  lastApplied,\n  onApply,\n}: PresetsSectionProps): ReactElement {\n  return (\n    <div>\n      <div className=\"sb-switcher__section-label\">Presets</div>\n      <div className=\"sb-switcher__section-body\">\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 (\n            <OptionPill\n              key={`preset/${preset.name}`}\n              label={preset.name}\n              active={matches}\n              title={title}\n              onClick={() => onApply(preset)}\n              trailing={\n                modified ? <span aria-hidden className=\"sb-switcher__pill-modified\" /> : null\n              }\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\ninterface AxisSectionProps {\n  axis: SwitcherAxis;\n  active: string;\n  onSelect(next: string): void;\n}\n\nfunction AxisSection({ axis, active, onSelect }: AxisSectionProps): ReactElement {\n  return (\n    <div className=\"sb-switcher__axis-row\">\n      <div className=\"sb-switcher__axis-label\" title={axis.description}>\n        {displayLabelFor(axis)}\n      </div>\n      <div className=\"sb-switcher__axis-pills\">\n        {axis.contexts.map((ctx) => (\n          <OptionPill\n            key={`${axis.name}/${ctx}`}\n            label={ctx}\n            active={ctx === active}\n            onClick={() => onSelect(ctx)}\n          />\n        ))}\n      </div>\n    </div>\n  );\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 reads as \"Permutation\". Authored single-axis resolvers keep their real\n * name (e.g. `mode`, `brand`).\n */\nfunction displayLabelFor(axis: SwitcherAxis): string {\n  if (axis.source === 'synthetic' && axis.name === 'theme') return 'Permutation';\n  return axis.name;\n}\n\nfunction tuplesEqual(\n  a: Readonly<Record<string, string>>,\n  b: Readonly<Record<string, string>>,\n  axes: readonly SwitcherAxis[],\n): boolean {\n  for (const axis of axes) {\n    if (a[axis.name] !== b[axis.name]) return false;\n  }\n  return true;\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unpunnyfuns/swatchbook-switcher",
-  "version": "0.55.0",
+  "version": "0.57.0",
   "description": "Framework-agnostic theme-switcher UI for swatchbook — axis pills, preset pills, color-format selector. Consumed by the Storybook addon toolbar and any React host that knows how to set data-attributes on the document.",
   "license": "MIT",
   "author": "unpunnyfuns <unpunnyfuns@gmail.com>",
@@ -52,7 +52,9 @@
     "@tsdown/css": "^0.21.9",
     "@types/react": "^19.2.14",
     "@vitejs/plugin-react": "^6.0.1",
-    "jsdom": "^29.0.2",
+    "@vitest/browser": "^4.1.4",
+    "@vitest/browser-playwright": "^4.1.4",
+    "playwright": "^1.59.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tsdown": "^0.21.9",