@motion-proto/live-tokens 0.42.0 → 0.44.0

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # Changelog
 
+## 0.44.0 — Every text step derives to body contrast
+
+### Added
+
+- **A full-page Colors route.** `/live-tokens/colors` renders the Colors editor
+  as its own page, alongside the existing editor and components routes, and is
+  auto-appended to the dev nav rail. New `@motion-proto/live-tokens/colors`
+  export for consumers mounting it themselves, and a new `colors` key on
+  `editorRoutes` to relocate it or pass `false` to disable it. Entering the
+  route flips the overlay off its Colors view so the two surfaces never stack.
+
+### Changed
+
+- **Selection reads across every Colors surface.** Picking a family used to
+  highlight only its swatch. Its harmony-axis row and chip now light up, and on
+  the wheel its rail thickens to full contrast while its axis numeral goes
+  white and the others step back. Axis chips are clickable to select.
+
+- **The Color Story is a readout, not a control panel.** Its "Use suggested"
+  button and "Use black and white" checkbox moved out to three pills above the
+  story: *Raise all text to AA* (every family, contrast-first), *Even neutral
+  steps* (Neutral only, hierarchy-first), and an *Anchor at pure white/black*
+  toggle. The old labels named neither the scope nor the effect, which are what
+  separate the two actions; each pill now carries the full explanation on hover.
+  The AA-reach line is gone.
+
+- **Color swatches hold their position.** Both swatch rows were sorted by
+  luminance, so editing a color's lightness reshuffled the row under the
+  pointer and stuttered mid-drag. They render in declaration order now.
+
+- **`--text-muted` now derives to 4.5:1, not 3:1.** The neutral text ramp
+  guaranteed muted at the WCAG AA floor for *large* text, one step below
+  `--text-tertiary`, on the assumption it would only ever be set at 24px (or
+  18.66px bold). Nothing in the token's name or its position in a ramp of text
+  colors carried that condition, so consumers reached for it as a quiet body
+  color and shipped text below AA — in the first site audited, all eleven uses
+  were 13–16px, every one of them failing. `--text-muted` joins primary,
+  secondary and tertiary on the 4.5:1 body floor, which leaves `--text-disabled`
+  as the ramp's only sub-AA step, and WCAG 1.4.3 exempts disabled controls.
+  `AA_LARGE` is unchanged and still floors the graded chromatic steps.
+
+  Derived palettes get a lighter (dark scheme) or darker (light scheme) muted
+  step the next time text contrast is solved. **A theme already on disk keeps
+  its stored curve** — its `--text-muted` does not move until the palette is
+  re-solved, so a consuming site that has shipped muted on small text must
+  either re-derive or restate those colors itself.
+
+  Expect muted and tertiary to derive to nearly the same color: both target the
+  default surface, so both settle just past the same floor (on the reference
+  dark palette, tertiary `#94999c` 4.58:1 and muted `#96989a` 4.55:1). That is
+  arithmetic, not a rough edge — a step quieter than tertiary cannot also clear
+  tertiary's floor. Treat `--text-muted` as an alias of `--text-tertiary` for
+  now; reach for `--text-disabled` when a genuinely quieter, non-AA step is
+  wanted, and expect a decision on deprecating one of the two.
+
+## 0.43.0 — The editor opens on Tokens
+
+### Changed
+
+- **The editor's view no longer carries across sessions.** Opening the editor in
+  a fresh tab always lands on Tokens; previously it restored whichever of
+  Tokens / Colors / Components you last used, so a session that ended on Colors
+  reopened there indefinitely. `editorViewStore` moved the active view from
+  `localStorage` to `sessionStorage`, which keeps the two things that did depend
+  on the round-trip: the parent window and the overlay iframe stay in sync (same
+  tab, same origin, so they share one storage area and its `storage` events),
+  and an in-page deep link that calls `setEditorView()` before opening the
+  overlay still lands on the view it asked for. The sidebar's condensed/expanded
+  state is a durable preference and stays in `localStorage`. A stale
+  `lt.editorView` left in `localStorage` by an earlier version is ignored, not
+  migrated.
+
 ## 0.42.0 — Canvas, and every ramp places its base color
 
 ### Changed (breaking)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -65,6 +65,11 @@
       "svelte": "./src/editor/pages/ComponentEditorPage.svelte",
       "default": "./src/editor/pages/ComponentEditorPage.svelte"
     },
+    "./colors": {
+      "types": "./src/editor/pages/ColorsPage.svelte.d.ts",
+      "svelte": "./src/editor/pages/ColorsPage.svelte",
+      "default": "./src/editor/pages/ColorsPage.svelte"
+    },
     "./docs": {
       "types": "./src/editor/docs/Docs.svelte.d.ts",
       "svelte": "./src/editor/docs/Docs.svelte",

package/src/editor/core/palettes/solveTextContrast.ts

@@ -65,11 +65,15 @@ interface StepPlan {
 
 // Neutral family sits on neutral surfaces; primary/secondary must clear the
 // adverse band extreme, tertiary/muted the default surface. Disabled is graded.
+//
+// Muted held a large-text 3.0 floor until 0.44.0. Nothing in the name marked it
+// large-only, so consumers reached for it as a quiet body colour and shipped
+// text below AA; disabled is now the sole sub-AA step, which WCAG exempts.
 const NEUTRAL_PLAN: Record<string, StepPlan> = {
   primary:   { ratio: 7.0, guaranteed: true,  target: 'band' },
   secondary: { ratio: 4.5, guaranteed: true,  target: 'band' },
   tertiary:  { ratio: 4.5, guaranteed: true,  target: 'default' },
-  muted:     { ratio: 3.0, guaranteed: true,  target: 'default' },
+  muted:     { ratio: 4.5, guaranteed: true,  target: 'default' },
   disabled:  { ratio: 2.0, guaranteed: false, target: 'default' },
 };
 
@@ -216,7 +220,7 @@ export function solveTextCurves(
         againstVar: against.var,
         targetRatio: stepPlan.ratio,
         achievedRatio: achieved,
-        meets: achieved >= minGuarantee(step.name, stepPlan),
+        meets: achieved >= minGuarantee(stepPlan),
         guaranteed: stepPlan.guaranteed,
       });
     }
@@ -225,11 +229,10 @@ export function solveTextCurves(
   return { patches, report };
 }
 
-// The AA floor a guaranteed step must clear (primary/secondary/tertiary = body
-// 4.5; neutral muted = large 3.0). Graded steps floor at 1 (informational).
-function minGuarantee(stepName: string, plan: StepPlan): number {
-  if (!plan.guaranteed) return 1;
-  return stepName === 'muted' ? 3.0 : 4.5;
+// Every guaranteed step clears the body-text AA floor. Graded steps floor at 1
+// (informational).
+function minGuarantee(plan: StepPlan): number {
+  return plan.guaranteed ? 4.5 : 1;
 }
 
 function clamp(lo: number, hi: number, v: number): number {

package/src/editor/core/routing/ownedRoutes.ts

@@ -8,4 +8,5 @@
 // <LiveTokensRouter>; these are only the defaults.
 export const DEFAULT_EDITOR_PATH = '/live-tokens/editor';
 export const DEFAULT_COMPONENTS_PATH = '/live-tokens/components';
+export const DEFAULT_COLORS_PATH = '/live-tokens/colors';
 export const DEFAULT_DOCS_PATH = '/live-tokens/docs';

package/src/editor/core/store/editorViewStore.ts

@@ -10,9 +10,14 @@ function isEditorView(v: unknown): v is EditorView {
   return v === 'tokens' || v === 'components' || v === 'colors';
 }
 
+// Session-scoped, not persistent: opening the editor fresh always starts on
+// Tokens. Within a session it still round-trips, which is what the parent
+// window / overlay iframe pair and in-page deep links (setEditorView before
+// opening the overlay) rely on — same-origin frames in a tab share one
+// sessionStorage area and its `storage` events.
 function readView(): EditorView {
   try {
-    const v = localStorage.getItem(VIEW_KEY);
+    const v = sessionStorage.getItem(VIEW_KEY);
     if (isEditorView(v)) return v;
   } catch {}
   return 'tokens';
@@ -32,14 +37,14 @@ export const sidebarCondensed = writable<SidebarCondensed>(readCondensed());
 export const selectedComponent = writable<string>('button');
 
 editorView.subscribe((v) => {
-  try { localStorage.setItem(VIEW_KEY, v); } catch {}
+  try { sessionStorage.setItem(VIEW_KEY, v); } catch {}
 });
 
 sidebarCondensed.subscribe((v) => {
   try { localStorage.setItem(CONDENSED_KEY, v === 'auto' ? 'auto' : String(v)); } catch {}
 });
 
-// Cross-window sync: parent and overlay iframe share localStorage but each have
+// Cross-window sync: parent and overlay iframe share web storage but each have
 // their own module state. `storage` events fire in the *other* window when one
 // writes, so we mirror the new value into this window's store.
 if (typeof window !== 'undefined') {

package/src/editor/overlay/LiveEditorOverlay.svelte

@@ -15,7 +15,7 @@
   import { fade } from 'svelte/transition';
   import { cubicInOut } from 'svelte/easing';
   import { route, navigate } from '../core/routing/router';
-  import { DEFAULT_EDITOR_PATH, DEFAULT_COMPONENTS_PATH } from '../core/routing/ownedRoutes';
+  import { DEFAULT_EDITOR_PATH, DEFAULT_COMPONENTS_PATH, DEFAULT_COLORS_PATH } from '../core/routing/ownedRoutes';
   import { editorView } from '../core/store/editorViewStore';
   import { columnsVisible, toggleColumns } from './columnsOverlay';
   import { storageKey } from '../core/store/editorConfig';
@@ -29,6 +29,7 @@
     open?: boolean | undefined;
     editorPath?: string;
     componentsPath?: string;
+    colorsPath?: string;
     navLinks?: NavLink[];
     pageSources?: Record<string, string>;
     hidePageSourceOn?: string[];
@@ -39,6 +40,7 @@
     open = $bindable(undefined),
     editorPath = DEFAULT_EDITOR_PATH,
     componentsPath = DEFAULT_COMPONENTS_PATH,
+    colorsPath = DEFAULT_COLORS_PATH,
     navLinks = [],
     pageSources = {},
     hidePageSourceOn = [],
@@ -65,9 +67,9 @@
     overlayOpen.set(!!open);
   });
 
-  // The components route renders the same component-editor surface as the
-  // overlay's components view. Pair them: on entering it, flip the overlay to
-  // tokens so the two surfaces don't stack. Fires only on route
+  // The components and colors routes render the same surfaces as the overlay's
+  // components and colors views. Pair them: on entering one, flip the overlay
+  // to tokens so the two surfaces don't stack. Fires only on route
   // change, not on every editorView change — otherwise cross-window storage
   // sync re-triggers the rule, which writes editorView, which fires another
   // storage event, which fires the rule again. The result is heavy re-render
@@ -81,6 +83,9 @@
     if (r === componentsPath) {
       editorView.update((v) => (v === 'components' ? 'tokens' : v));
     }
+    if (r === colorsPath) {
+      editorView.update((v) => (v === 'colors' ? 'tokens' : v));
+    }
   });
 
   // Editor route has its own chrome — hide overlay there.

package/src/editor/overlay/LiveTokensRouter.svelte

@@ -30,20 +30,22 @@
   /**
    * Override the package's dev-only routes, which default to the reserved
    * `/live-tokens/*` namespace (`/live-tokens/editor`, `/live-tokens/components`,
-   * `/live-tokens/docs`) so they never collide with consumer pages. Pass a
-   * string to relocate a route; pass `false` to disable it entirely (no
-   * dispatch and, for `components`/`docs`, no auto-injected nav-rail entry).
+   * `/live-tokens/colors`, `/live-tokens/docs`) so they never collide with
+   * consumer pages. Pass a string to relocate a route; pass `false` to disable
+   * it entirely (no dispatch and, for `components`/`colors`/`docs`, no
+   * auto-injected nav-rail entry).
    */
   export interface EditorRouteOverrides {
     editor?: string | false;
     components?: string | false;
+    colors?: string | false;
     docs?: string | false;
   }
 
   /**
    * Resolve a path to the single entry that renders it. Precedence, after the
-   * package-owned `/live-tokens/*` routes (editor, components, docs) have
-   * already been matched by the component:
+   * package-owned `/live-tokens/*` routes (editor, components, colors, docs)
+   * have already been matched by the component:
    *
    *   1. `pages[route]` — exact static match.
    *   2. `resolve(route)` — consumer code, where params / prefixes / gating
@@ -68,7 +70,7 @@
   import LiveEditorOverlay from './LiveEditorOverlay.svelte';
   import ColumnsOverlay from './ColumnsOverlay.svelte';
   import { route, navigate } from '../core/routing/router';
-  import { DEFAULT_EDITOR_PATH, DEFAULT_COMPONENTS_PATH, DEFAULT_DOCS_PATH } from '../core/routing/ownedRoutes';
+  import { DEFAULT_EDITOR_PATH, DEFAULT_COMPONENTS_PATH, DEFAULT_COLORS_PATH, DEFAULT_DOCS_PATH } from '../core/routing/ownedRoutes';
 
   interface Props {
     pages: Record<string, RouteEntry>;
@@ -86,32 +88,38 @@
 
   let editorEnabled = $derived(editorRoutes.editor !== false);
   let componentsEnabled = $derived(editorRoutes.components !== false);
+  let colorsEnabled = $derived(editorRoutes.colors !== false);
   let docsEnabled = $derived(editorRoutes.docs !== false);
   let editorPath = $derived(typeof editorRoutes.editor === 'string' ? editorRoutes.editor : DEFAULT_EDITOR_PATH);
   let componentsPath = $derived(typeof editorRoutes.components === 'string' ? editorRoutes.components : DEFAULT_COMPONENTS_PATH);
+  let colorsPath = $derived(typeof editorRoutes.colors === 'string' ? editorRoutes.colors : DEFAULT_COLORS_PATH);
   let docsPath = $derived(typeof editorRoutes.docs === 'string' ? editorRoutes.docs : DEFAULT_DOCS_PATH);
 
   const isDev = import.meta.env.DEV;
   let isEditor = $derived(isDev && editorEnabled && $route === editorPath);
   let isComponentEditor = $derived(isDev && componentsEnabled && $route === componentsPath);
+  let isColors = $derived(isDev && colorsEnabled && $route === colorsPath);
   let isDocs = $derived(isDev && docsEnabled && $route === docsPath);
 
   // The single entry that renders the current route. Owned routes are handled
-  // by the isEditor/isComponentEditor/isDocs branches, so they resolve to null
-  // here; everything else flows through resolveRoute and drives both dispatch
-  // (component + props) and page-source from this one value.
+  // by the isEditor/isComponentEditor/isColors/isDocs branches, so they resolve
+  // to null here; everything else flows through resolveRoute and drives both
+  // dispatch (component + props) and page-source from this one value.
   let resolvedEntry = $derived(
-    isEditor || isComponentEditor || isDocs ? null : resolveRoute(pages, resolve, $route),
+    isEditor || isComponentEditor || isColors || isDocs ? null : resolveRoute(pages, resolve, $route),
   );
 
   // Pages with a label show up in the nav rail, in declaration order. In dev,
-  // the components-editor and docs routes are auto-appended so they're reachable
-  // from every page. Docs ship from the package, so consumers reference the
-  // guide in the editor while building without vendoring a copy.
+  // the colors, components-editor, and docs routes are auto-appended so they're
+  // reachable from every page. Docs ship from the package, so consumers
+  // reference the guide in the editor while building without vendoring a copy.
   let navLinks = $derived([
     ...Object.entries(pages)
       .filter(([, e]) => !!e.label)
       .map(([path, e]) => ({ path, label: e.label!, icon: e.icon ?? '' })),
+    ...(isDev && colorsEnabled
+      ? [{ path: colorsPath, label: 'Colors', icon: 'fa-palette' }]
+      : []),
     ...(isDev && componentsEnabled
       ? [{ path: componentsPath, label: 'Components', icon: 'fa-puzzle-piece' }]
       : []),
@@ -132,14 +140,15 @@
     ...(resolvedEntry?.source ? { [$route]: resolvedEntry.source } : {}),
   });
 
-  // The package-owned components and docs routes hide the page-source button
-  // (no consumer source file backs them).
+  // The package-owned components, colors, and docs routes hide the page-source
+  // button (no consumer source file backs them).
   let hidePageSourceOn = $derived([
     ...Object.entries(pages)
       .filter(([, e]) => e.hidePageSource)
       .map(([path]) => path),
     ...(resolvedEntry?.hidePageSource ? [$route] : []),
     ...(componentsEnabled ? [componentsPath] : []),
+    ...(colorsEnabled ? [colorsPath] : []),
     ...(docsEnabled ? [docsPath] : []),
   ]);
 
@@ -150,6 +159,7 @@
   let pagePromise = $derived.by(() => {
     if (isEditor) return import('../pages/Editor.svelte');
     if (isComponentEditor) return import('../pages/ComponentEditorPage.svelte');
+    if (isColors) return import('../pages/ColorsPage.svelte');
     if (isDocs) return import('../docs/Docs.svelte');
     const entry = resolvedEntry;
     if (!entry) return Promise.resolve({ default: null as unknown as Component<any, any, any> });
@@ -177,9 +187,10 @@
   class="lt-app"
   class:is-editor={isEditor}
   class:is-component-editor={isComponentEditor}
+  class:is-colors={isColors}
   onclick={handleClick}
 >
-  <LiveEditorOverlay {navLinks} {pageSources} {hidePageSourceOn} {editorPath} {componentsPath} />
+  <LiveEditorOverlay {navLinks} {pageSources} {hidePageSourceOn} {editorPath} {componentsPath} {colorsPath} />
   <ColumnsOverlay />
 
   {#await pagePromise then m}
@@ -210,7 +221,8 @@
     padding-right: var(--lt-overlay-scroll-pad, 0px);
   }
 
-  .lt-app.is-editor {
+  .lt-app.is-editor,
+  .lt-app.is-colors {
     padding-bottom: 0;
     background: black;
   }

package/src/editor/pages/ColorsPage.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import ColorsTab from '../ui/colors/ColorsTab.svelte';
+  import UICopyPopover from '../ui/UICopyPopover.svelte';
+  import { installEditorKeybindings } from '../core/store/editorKeybindings';
+  import { initializeEditorStore } from '../core/store/editorStore';
+  import { storageKey } from '../core/store/editorConfig';
+  import { DEFAULT_COLORS_PATH } from '../core/routing/ownedRoutes';
+  // Editor chrome + form controls + icon font must be JS imports (not @import
+  // inside the style block) so Vite resolves them via the module graph
+  // regardless of how the consumer compiles Svelte CSS (external ?lang.css vs
+  // injected); otherwise the @import URLs leak to the browser and 404 against
+  // the consumer's root.
+  import '../styles/ui-editor.css';
+  import '../styles/ui-form-controls.css';
+  import '@fortawesome/fontawesome-free/css/all.min.css';
+
+  // Where "Back to site" sends the user. Prefer the previous non-colors entry
+  // from session history; fall back to home.
+  const backHref = pickBackHref();
+
+  function pickBackHref(): string {
+    try {
+      const prev = sessionStorage.getItem(storageKey('prev-route'));
+      if (prev && prev !== DEFAULT_COLORS_PATH) return prev;
+    } catch {
+      // ignore
+    }
+    return '/';
+  }
+
+  onMount(() => {
+    initializeEditorStore();
+    return installEditorKeybindings();
+  });
+</script>
+
+<!-- .editor-page scopes the --ui-* token definitions from ui-editor.css. -->
+<div class="editor-page colors-page">
+  <div class="page-bar">
+    <div class="bar-left">
+      <a href={backHref} class="back-link">
+        <i class="fas fa-arrow-left"></i>
+        <span>Back to site</span>
+      </a>
+      <span class="page-label">Colors</span>
+    </div>
+  </div>
+
+  <main class="content">
+    <ColorsTab />
+  </main>
+  <UICopyPopover />
+</div>
+
+<style>
+  .colors-page {
+    min-height: 100vh;
+    background: black;
+  }
+
+  .page-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-16);
+    padding: var(--ui-space-10) var(--ui-space-16);
+    background: black;
+    border-bottom: 1px solid var(--ui-border-low);
+    min-height: 52px;
+  }
+
+  .bar-left {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-16);
+    min-width: 0;
+  }
+
+  .back-link {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    color: var(--ui-text-tertiary);
+    text-decoration: none;
+    font-size: var(--ui-font-size-md);
+    transition: color var(--ui-transition-fast);
+  }
+
+  .back-link:hover {
+    color: var(--ui-text-primary);
+  }
+
+  .page-label {
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-secondary);
+  }
+
+  .content {
+    max-width: 1680px;
+    margin: 0 auto;
+    padding: var(--ui-space-24) var(--ui-space-32);
+    isolation: isolate;
+  }
+
+  @media (max-width: 1280px) {
+    .content {
+      padding: var(--ui-space-20) var(--ui-space-20);
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .content {
+      padding: var(--ui-space-16) var(--ui-space-12);
+    }
+  }
+</style>

package/src/editor/pages/ColorsPage.svelte.d.ts

@@ -0,0 +1,2 @@
+import { SvelteComponent } from 'svelte';
+export default class ColorsPage extends SvelteComponent<Record<string, never>> {}

package/src/editor/ui/EditorViewSwitcher.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { editorView, type EditorView } from '../core/store/editorViewStore';
   import { parentRoute } from '../core/routing/parentRouteStore';
-  import { DEFAULT_COMPONENTS_PATH } from '../core/routing/ownedRoutes';
+  import { DEFAULT_COMPONENTS_PATH, DEFAULT_COLORS_PATH } from '../core/routing/ownedRoutes';
 
   interface Props {
     condensed?: boolean;
@@ -9,16 +9,17 @@
 
   let { condensed = false }: Props = $props();
 
-  // On the components route the host page is already the components editor —
-  // the overlay's components view would just stack on top, so disable the
-  // switch. The switcher renders inside the editor iframe, so we read the
-  // *parent* route, not this iframe's own. Compares the default path:
-  // editorRoutes.components relocation isn't plumbed across the iframe, so a
-  // relocated route won't disable the switch.
+  // On the components or colors route the host page already renders that
+  // surface — the overlay's matching view would just stack on top, so disable
+  // the switch. The switcher renders inside the editor iframe, so we read the
+  // *parent* route, not this iframe's own. Compares the default paths:
+  // editorRoutes relocation isn't plumbed across the iframe, so a relocated
+  // route won't disable the switch.
   let componentsDisabled = $derived($parentRoute === DEFAULT_COMPONENTS_PATH);
+  let colorsDisabled = $derived($parentRoute === DEFAULT_COLORS_PATH);
 
   // Editing flow order: Tokens → Colors → Components. The condensed rail cycles
-  // through these; Components is skipped while it's disabled (already on that
+  // through these; a view is skipped while it's disabled (already on that
   // page) so the cycle never lands on a dead view.
   const CYCLE: readonly EditorView[] = ['tokens', 'colors', 'components'];
   const ICONS: Record<EditorView, string> = {
@@ -43,6 +44,7 @@
         i = (i + 1) % CYCLE.length;
         const next = CYCLE[i];
         if (next === 'components' && componentsDisabled) continue;
+        if (next === 'colors' && colorsDisabled) continue;
         return next;
       }
       return current;
@@ -81,6 +83,8 @@
         class="seg-btn"
         class:active={$editorView === 'colors'}
         aria-selected={$editorView === 'colors'}
+        disabled={colorsDisabled}
+        title={colorsDisabled ? 'Already viewing the Colors page' : undefined}
         onclick={() => set('colors')}
       >
         <span class="radio" aria-hidden="true"></span>

package/src/editor/ui/UIPillButton.svelte

@@ -10,6 +10,8 @@
     disabled?: boolean;
     title?: string;
     type?: 'button' | 'submit' | 'reset';
+    /** Marks the pill a toggle; true also lights it as on. */
+    ariaPressed?: boolean;
     onclick?: (e: MouseEvent) => void;
     children?: Snippet;
   }
@@ -23,6 +25,7 @@
     disabled = false,
     title,
     type = 'button',
+    ariaPressed,
     onclick,
     children,
   }: Props = $props();
@@ -48,6 +51,7 @@
     {disabled}
     {title}
     {onclick}
+    aria-pressed={ariaPressed}
   >
     {#if icon}<i class="fas {icon}" aria-hidden="true"></i>{/if}
     {#if children}<span class="ui-pill-label">{@render children()}</span>{/if}
@@ -89,6 +93,17 @@
     border-color: rgba(255, 255, 255, 0.75);
   }
 
+  /* Toggle "on": inset fill so it reads as depressed, not merely hovered. */
+  .ui-pill[aria-pressed='true'] {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.16) 100%);
+    border-color: rgba(255, 255, 255, 0.9);
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
+  }
+
+  .ui-pill[aria-pressed='true'] i {
+    color: rgba(255, 255, 255, 0.95);
+  }
+
   .ui-pill:focus-visible {
     outline: none;
     border-color: rgba(255, 255, 255, 0.9);

package/src/editor/ui/colors/ColorStory.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
-  import { editorState } from '../../core/store/editorStore';
   import { oklchToHexClamped } from '../../core/palettes/oklch';
-  import { palettesToVars, PALETTE_SPECS, type PaletteSpec } from '../../core/palettes/paletteDerivation';
-  import { defaultPaletteConfig } from '../palette/paletteMath';
+  import { palettesToVars } from '../../core/palettes/paletteDerivation';
   import { contrastRatio } from '../../core/palettes/contrast';
-  import { recommendNeutralText } from '../../core/palettes/recommendText';
-  import { applySuggestedNeutralText } from './paletteBaseColor';
-  import UIPillButton from '../UIPillButton.svelte';
+  import type { NeutralTextRecommendation } from '../../core/palettes/recommendText';
   import type { PaletteConfig } from '../../core/themes/themeTypes';
 
+  interface Props {
+    /** Every family's config, spec defaults filled in (palettesWithDefaults). */
+    full: Record<string, PaletteConfig>;
+    /** Suggested neutral text hierarchy — read out here, acted on from the
+     *  section's action pills. The story itself stays non-interactive. */
+    rec: NeutralTextRecommendation;
+  }
+
+  let { full, rec }: Props = $props();
+
   // 60-30-10 as an area composition: the background surface is the dominant 60%
   // field (the page), and Brand/Accent/Special are the tones shown against it.
   // Shares are flex-grow weights, not exact percentages.
@@ -30,31 +36,15 @@
   // 1:1. Derived --surface-* tokens deliberately do not appear here: their
   // lightness is curve-owned, which decouples the story from the wheel and
   // reads as broken.
-  const SPEC_BY_LABEL: Record<string, PaletteSpec> = Object.fromEntries(PALETTE_SPECS.map((s) => [s.label, s]));
-
   function seedHex(label: string): string {
-    const { l, c, h } = $editorState.palettes[label]?.baseColor ?? SPEC_BY_LABEL[label].initialColor;
+    const { l, c, h } = full[label].baseColor;
     return oklchToHexClamped(l, c, h);
   }
 
-  // Text still renders from this store-derived map (text derivation tracks the
-  // seed), never from the ambient :root variables — those stay at vendored
-  // defaults for families a loaded theme doesn't configure, so a story bound
-  // to them silently goes static.
-  let full = $derived.by(() => {
-    const map: Record<string, PaletteConfig> = {};
-    for (const spec of PALETTE_SPECS) {
-      map[spec.label] =
-        $editorState.palettes[spec.label] ??
-        defaultPaletteConfig({ baseColor: spec.initialColor, neutral: spec.neutral ?? false });
-    }
-    return map;
-  });
-
+  // Text renders from this map (text derivation tracks the seed), never from the
+  // ambient :root variables — those stay at vendored defaults for families a
+  // loaded theme doesn't configure, so a story bound to them silently goes static.
   let vars = $derived(palettesToVars(full));
-  let useBlackWhite = $state(false);
-  let rec = $derived(recommendNeutralText(full, undefined, useBlackWhite));
-  let partialCoverage = $derived(rec.suggestions.filter((s) => !s.current.coverage.full));
 
   // Shadow the consumed text variables locally with the store-derived values;
   // the page field is the Canvas family's SEED, not its derived page step.
@@ -116,11 +106,9 @@
       </span>
     </p>
 
-    <!-- Always rendered: toggling "Use black and white" changes the
-         suggestion, so the toggle must stay reachable even when the current
-         values already match. -->
-    <div class="suggest-row">
-      <span class="suggest-label">Suggested</span>
+    <!-- Readout only: applied from the section's actions, not from here. -->
+    <div class="suggest-row" title="What “Even neutral steps” would set these three text steps to">
+      <span class="suggest-label">Suggested steps</span>
       {#each rec.suggestions as s (s.step)}
         <span class="suggest-entry" class:dim={!s.differs}>
           <span class="fn-dot" style:--dot={s.suggested.hex}></span>
@@ -128,40 +116,15 @@
           <span class="ratio">{fmt(contrastRatio(s.suggested.hex, seedHex('Canvas')))}</span>
         </span>
       {/each}
-      <label class="bw-toggle" title="Anchor the suggestion at pure white or black instead of the softened extreme">
-        <input type="checkbox" bind:checked={useBlackWhite} />
-        <span>Use black and white</span>
-      </label>
-      {#if rec.anyDiffers}
-        <UIPillButton
-          icon="fa-arrow-down-short-wide"
-          title="Anchor on primary and step secondary/tertiary down by even lightness drops, floored at WCAG AA (one undo)"
-          onclick={() => applySuggestedNeutralText(useBlackWhite)}
-        >
-          Use suggested
-        </UIPillButton>
-      {/if}
     </div>
 
-    {#if partialCoverage.length > 0}
-      <div
-        class="coverage-alert"
-        title="WCAG AA (4.5:1) coverage across the neutral surface steps. Informational, nothing is blocked."
-      >
-        <i class="fa-solid fa-triangle-exclamation"></i>
-        <span>
-          AA reach: {partialCoverage
-            .map((s) => `${s.step} ${s.current.coverage.cleared}/${s.current.coverage.total} surfaces`)
-            .join(' · ')}
-        </span>
-      </div>
-    {/if}
-
     <div class="functional-row">
       {#each FUNCTIONAL as fn (fn.ns)}
         {@const r = fmt(ratioOnBg(`--text-${fn.ns}`))}
         <span class="fn-chip">
-          <span class="fn-dot" style:--dot={seedHex(fn.label)}></span>
+          <!-- The dot shows the TEXT color the ratio measures (shadowed via
+               storyVars), matching the label — not the family's seed fill. -->
+          <span class="fn-dot" style:--dot="var(--text-{fn.ns})"></span>
           <span class="fn-label" style:color="var(--text-{fn.ns})">{fn.label}</span>
           {#if r}<span class="ratio">{r}</span>{/if}
         </span>
@@ -197,14 +160,15 @@
   }
 
   /* Transparent: the background surface reads directly, no card over it. */
+  /* No min-height: 0 — the field must keep its content min-height so tall
+     text wrapping grows the frame instead of overflowing onto the tone bars. */
   .field {
     flex-grow: 60;
     flex-basis: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-4);
-    min-height: 0;
-    padding: var(--ui-space-8) var(--ui-space-12);
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-12);
     color: var(--text-primary);
   }
 
@@ -216,30 +180,30 @@
   }
 
   .field-label {
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
     font-weight: var(--ui-font-weight-semibold);
   }
 
   .body {
     margin: 0;
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
     color: var(--text-primary);
   }
 
   .secondary {
     margin: 0;
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
     color: var(--text-secondary);
   }
 
   .tertiary {
     margin: 0;
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
     color: var(--text-tertiary);
   }
 
   .inverted-row {
-    margin: 0;
+    margin: var(--ui-space-8) 0 0;
   }
 
   /* The pill's fill IS the primary text color: the flip is shown literally,
@@ -252,7 +216,7 @@
     border-radius: var(--ui-radius-full);
     background: var(--text-primary);
     color: var(--text-inverted);
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
   }
 
   .suggest-row {
@@ -260,10 +224,11 @@
     align-items: center;
     flex-wrap: wrap;
     gap: var(--ui-space-8);
+    margin-top: var(--ui-space-12);
   }
 
   .suggest-label {
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
     font-weight: var(--ui-font-weight-semibold);
     opacity: 0.6;
   }
@@ -279,36 +244,15 @@
   }
 
   .suggest-step {
-    font-size: var(--ui-font-size-xs);
-  }
-
-  .bw-toggle {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-4);
-    font-size: var(--ui-font-size-xs);
-    cursor: pointer;
-  }
-
-  .bw-toggle input {
-    margin: 0;
-    cursor: pointer;
-  }
-
-  .coverage-alert {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-6);
-    font-size: var(--ui-font-size-xs);
-    opacity: 0.75;
+    font-size: var(--ui-font-size-md);
   }
 
   .functional-row {
     display: flex;
-    gap: var(--ui-space-8);
+    gap: var(--ui-space-8) var(--ui-space-12);
     flex-wrap: wrap;
     margin-top: auto;
-    padding-top: var(--ui-space-12);
+    padding-top: var(--ui-space-16);
   }
 
   .fn-chip {
@@ -326,17 +270,18 @@
   }
 
   .fn-label {
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
     font-weight: var(--ui-font-weight-semibold);
   }
 
+  /* Like .field, no min-height: 0 — the bars' min heights must grow the frame
+     rather than spill past its border when the field's text is tall. */
   .tones {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-8);
     flex-grow: 40;
     flex-basis: 0;
-    min-height: 0;
   }
 
   .tone {
@@ -363,12 +308,12 @@
   }
 
   .tone-name {
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
     font-weight: var(--ui-font-weight-semibold);
   }
 
   .ratio {
-    font-size: var(--ui-font-size-xs);
+    font-size: var(--ui-font-size-md);
     font-family: var(--ui-font-mono);
     opacity: 0.75;
   }

package/src/editor/ui/colors/ColorWheel.svelte

@@ -60,7 +60,7 @@
   const EXT_OFFSET = 20;  // external handle radius beyond the disc rim (room for the dotted tether)
   const NUM_OFFSET = 24;  // numeral radius beyond the external handles
   const MIN_SIZE = 240;
-  const MAX_SIZE = 360;
+  const MAX_SIZE = 560;
 
   const normDeg = (d: number) => ((d % 360) + 360) % 360;
   const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v));
@@ -469,11 +469,11 @@
          its inner half — reads as one axis that extends outward as dots to the
          external handle. Same angle as the handle, so it tracks live. -->
     {#each visibleRender as t (t.index)}
-      <line class="tether" x1={center} y1={center} x2={t.ext.x} y2={t.ext.y} />
+      <line class="tether" class:selected={t.selected} x1={center} y1={center} x2={t.ext.x} y2={t.ext.y} />
     {/each}
     {#each visibleRender as t (t.index)}
       {#if t.bound}
-        <line class="rail" x1={center} y1={center} x2={t.dot.x} y2={t.dot.y} />
+        <line class="rail" class:selected={t.selected} x1={center} y1={center} x2={t.dot.x} y2={t.dot.y} />
       {/if}
     {/each}
   </svg>
@@ -483,7 +483,7 @@
   {/each}
 
   {#each visibleRender as t (t.index)}
-    <span class="axis-num" style="left: {t.num.x}px; top: {t.num.y}px" aria-hidden="true">{t.index + 1}</span>
+    <span class="axis-num" class:selected={t.selected} style="left: {t.num.x}px; top: {t.num.y}px" aria-hidden="true">{t.index + 1}</span>
   {/each}
 
   {#each visibleRender as t (t.index)}
@@ -583,7 +583,7 @@
   .rail {
     stroke: var(--ui-text-primary);
     stroke-width: 2;
-    opacity: 0.65;
+    opacity: 0.5;
   }
 
   /* Dotted continuation of the axis out to the external handle. Greyscale. */
@@ -592,7 +592,20 @@
     stroke-width: 1.5;
     stroke-dasharray: 2 4;
     stroke-linecap: round;
-    opacity: 0.9;
+    opacity: 0.7;
+  }
+
+  /* Selected family's axis: heavier stroke at full contrast, so the whole axis
+     reads as active alongside its enlarged dot and handle. */
+  .rail.selected {
+    stroke-width: 4;
+    opacity: 1;
+  }
+
+  .tether.selected {
+    stroke: var(--ui-text-primary);
+    stroke-width: 2.5;
+    opacity: 1;
   }
 
   /* Faint ring the external axis handles ride along. Decorative. */
@@ -725,12 +738,17 @@
     transform: translate(-50%, -50%);
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-primary);
+    color: var(--ui-text-tertiary);
     pointer-events: none;
     user-select: none;
     z-index: 3;
   }
 
+  .axis-num.selected {
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-sm);
+  }
+
   .dot:focus-visible,
   .ext-handle:focus-visible,
   .global-handle:focus-visible {

package/src/editor/ui/colors/ColorsTab.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { flip } from 'svelte/animate';
-  import { cubicOut } from 'svelte/easing';
   import { oklchToHexClamped } from '../../core/palettes/oklch';
   import { PALETTE_SPECS } from '../../core/palettes/paletteDerivation';
   import { editorState, beginSliderGesture, transaction } from '../../core/store/editorStore';
@@ -13,7 +11,15 @@
   import PaletteStepStrip from './PaletteStepStrip.svelte';
   import HarmonyAxesList from './HarmonyAxesList.svelte';
   import UIPillButton from '../UIPillButton.svelte';
-  import { setBaseColor, setBaseColors, setAxisHues, applySolvedTextCurves } from './paletteBaseColor';
+  import { recommendNeutralText } from '../../core/palettes/recommendText';
+  import {
+    setBaseColor,
+    setBaseColors,
+    setAxisHues,
+    applySolvedTextCurves,
+    applySuggestedNeutralText,
+    palettesWithDefaults,
+  } from './paletteBaseColor';
   import { HARMONY_MODE_BUTTONS } from './harmonyModeIcons';
   import { dockGrow } from '../palette/dockMagnify';
 
@@ -65,6 +71,14 @@
     transaction('derive accessible text', applySolvedTextCurves);
   }
 
+  // Color Story model: the story is a pure readout, so its palette map and text
+  // recommendation are owned here alongside the actions that write them.
+  let useBlackWhite = $state(false);
+  let fullPalettes = $derived(palettesWithDefaults($editorState.palettes));
+  let textRec = $derived(recommendNeutralText(fullPalettes, undefined, useBlackWhite));
+
+  let pureExtreme = $derived(textRec.scheme === 'light' ? 'pure black' : 'pure white');
+
   let swatches = $derived.by(() => {
     // A family bound to an inactive axis edits in dot mode, so it is not "on the wheel".
     const active = modeActiveAxes(activeMode);
@@ -74,17 +88,16 @@
         label: spec.label,
         display: spec.displayLabel ?? spec.label,
         hex: oklchToHexClamped(l, c, h),
-        l,
         onWheel: $editorState.harmonyAxes.some((a, i) => a.family === spec.label && active[i]),
       };
     });
   });
 
   const FUNCTIONAL_FAMILIES = new Set(['Info', 'Success', 'Warning', 'Danger']);
-  // Light → dark, matching the palette ramps (white bookend on the left).
-  const byLuminance = (arr: typeof swatches) => [...arr].sort((a, b) => b.l - a.l);
-  let coreSwatches = $derived(byLuminance(swatches.filter((sw) => !FUNCTIONAL_FAMILIES.has(sw.label))));
-  let functionalSwatches = $derived(byLuminance(swatches.filter((sw) => FUNCTIONAL_FAMILIES.has(sw.label))));
+  // Declaration order, never a computed one: sorting by luminance made the row
+  // reshuffle under the pointer while a lightness edit was in flight.
+  let coreSwatches = $derived(swatches.filter((sw) => !FUNCTIONAL_FAMILIES.has(sw.label)));
+  let functionalSwatches = $derived(swatches.filter((sw) => FUNCTIONAL_FAMILIES.has(sw.label)));
 
   let shownModeLabel = $derived(
     HARMONY_MODE_BUTTONS.find((b) => b.mode === (hoverMode ?? activeMode))?.label ?? '',
@@ -135,7 +148,6 @@
 
         <div class="harmony-actions">
           <UIPillButton
-            size="compact"
             icon="fa-fill-drip"
             title="Re-hue Neutral and Alternate to the anchor color (their own chroma and lightness kept)"
             onclick={tintNeutrals}
@@ -183,7 +195,6 @@
                 aria-label={`Select ${sw.display}`}
                 aria-pressed={selected === sw.label}
                 onclick={() => select(sw.label)}
-                animate:flip={{ duration: 200, easing: cubicOut }}
               >
                 <span class="chip">
                   {#if sw.onWheel}<span class="wheel-dot" title="On the wheel" aria-hidden="true"></span>{/if}
@@ -225,24 +236,38 @@
 
   <div class="pane">
     <section id="colors-story" class="block">
-      <div class="head-row">
-        <header class="block-head">
-          <span class="eyebrow">Proportional preview</span>
-          <h2 class="title">Color Story</h2>
-        </header>
+      <header class="block-head">
+        <span class="eyebrow">Proportional preview</span>
+        <h2 class="title">Color Story</h2>
+      </header>
+      <div class="story-actions">
         <UIPillButton
-          icon="fa-wand-magic-sparkles"
-          title="Solve each family's Text lightness curve so derived text meets WCAG AA against its surfaces (one undo)"
+          icon="fa-universal-access"
+          title="Every family: solve its Text lightness curve to the value that clears WCAG AA (4.5:1) against its own surfaces. Contrast-first, so secondary and tertiary can land close together. One undo."
           onclick={deriveAccessibleText}
-        >Derive accessible text</UIPillButton>
+        >Raise all text to AA</UIPillButton>
+        <UIPillButton
+          icon="fa-arrow-down-short-wide"
+          disabled={!textRec.anyDiffers}
+          title={textRec.anyDiffers
+            ? 'Neutral text: keep primary where it is and step secondary and tertiary down in even lightness drops, floored at WCAG AA (4.5:1). Muted and disabled stay put. One undo.'
+            : 'The neutral text steps already match the suggestion shown below.'}
+          onclick={() => applySuggestedNeutralText(useBlackWhite)}
+        >Even neutral steps</UIPillButton>
+        <UIPillButton
+          icon="fa-circle-half-stroke"
+          ariaPressed={useBlackWhite}
+          title={`Start the suggested steps from ${pureExtreme} instead of the softer extreme most designers prefer. Changes the suggestion shown below.`}
+          onclick={() => (useBlackWhite = !useBlackWhite)}
+        >Anchor at {pureExtreme}</UIPillButton>
       </div>
-      <ColorStory />
+      <ColorStory full={fullPalettes} rec={textRec} />
     </section>
 
     <section id="colors-axes" class="block">
       <h2 class="title">Harmony axes</h2>
       <p class="axes-desc">Each axis owns a hue. Drop a color on an axis to bind it. The color adopts the axis hue and follows the axis. Drag a color to Unassigned to let it float free.</p>
-      <HarmonyAxesList {activeMode} />
+      <HarmonyAxesList {activeMode} {selected} onSelect={select} />
     </section>
   </div>
 </div>
@@ -255,6 +280,17 @@
     align-items: start;
   }
 
+  /* Wide standalone layouts (Colors page, full-screen editor): pin the story
+     pane to the width it was designed at in the docked panel — wider stretches
+     the seed-color bars into heavy slabs — and let the wheel column absorb the
+     rest. The docked panel's iframe viewport stays below this breakpoint. */
+  @media (min-width: 1200px) {
+    .colors-tab {
+      grid-template-columns: minmax(0, 1fr) 30rem;
+      gap: var(--ui-space-48);
+    }
+  }
+
   .pane {
     display: flex;
     flex-direction: column;
@@ -264,7 +300,7 @@
 
   .axes-desc {
     margin: 0;
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
     line-height: 1.5;
     color: var(--ui-text-secondary);
   }
@@ -424,16 +460,14 @@
     color: var(--ui-text-secondary);
   }
 
-  .head-row {
+  .harmony-actions {
     display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: var(--ui-space-12);
-    flex-wrap: wrap;
+    gap: var(--ui-space-8);
   }
 
-  .harmony-actions {
+  .story-actions {
     display: flex;
+    flex-wrap: wrap;
     gap: var(--ui-space-8);
   }
 
@@ -445,8 +479,7 @@
   }
 
   /* Dock magnification, mirroring PaletteStepStrip: the flex-grow transition
-     animates the selected swatch opening while flip walks it to its
-     luminance-sorted spot as lightness is dialed. */
+     animates the selected swatch opening in place. */
   .swatch-row {
     display: flex;
     align-items: flex-end;

package/src/editor/ui/colors/HarmonyAxesList.svelte

@@ -12,9 +12,12 @@
     /** The applied harmony mode: an unbound slot is disabled when the geometry
      *  deals it no distinct position (complementary enables only the first two). */
     activeMode: HarmonyMode;
+    /** Family selected in the swatch grid / wheel — its row (or chip) reads as active here. */
+    selected: string | null;
+    onSelect: (family: string) => void;
   }
 
-  let { activeMode }: Props = $props();
+  let { activeMode, selected, onSelect }: Props = $props();
 
   const DRAG_TYPE = 'application/x-harmony-family';
   // Unbound swatch previews the hue a dropped color would take, at fixed preview
@@ -113,6 +116,7 @@
     <div
       class="axis-row"
       class:disabled
+      class:selected={axis.family !== null && axis.family === selected}
       class:drop-target={dragTarget === i}
       aria-disabled={disabled || undefined}
       ondragover={(e) => onDragOver(e, i)}
@@ -126,13 +130,16 @@
         <button
           type="button"
           class="chip"
+          class:selected={family === selected}
           draggable="true"
           data-family={family}
           aria-label={`${family}, ${AXIS_ROLES[i]} axis, position ${i + 1} of ${positionCount}. Arrow up or down to move it, Delete to unbind.`}
+          aria-pressed={family === selected}
           title="Drag to another axis or to Unassigned. Arrow keys move it, Delete unbinds."
           ondragstart={(e) => onDragStart(e, family)}
           ondragend={onDragEnd}
           onkeydown={(e) => onChipKeydown(e, family)}
+          onclick={() => onSelect(family)}
         >
           <span class="grip" aria-hidden="true">⋮⋮</span>
           <span class="chip-swatch" style="--fill: {familyHex(family)}"></span>
@@ -159,13 +166,16 @@
         <button
           type="button"
           class="chip"
+          class:selected={family === selected}
           draggable="true"
           data-family={family}
           aria-label={`${family}, unassigned, position ${positionCount} of ${positionCount}. Arrow up to bind it to ${AXIS_ROLES[lastAxis]}.`}
+          aria-pressed={family === selected}
           title={`Drag onto an axis to bind it. Arrow up binds it to ${AXIS_ROLES[lastAxis]}.`}
           ondragstart={(e) => onDragStart(e, family)}
           ondragend={onDragEnd}
           onkeydown={(e) => onChipKeydown(e, family)}
+          onclick={() => onSelect(family)}
           animate:flip={{ duration: 200, easing: cubicOut }}
         >
           <span class="grip" aria-hidden="true">⋮⋮</span>
@@ -195,7 +205,7 @@
     background: var(--ui-surface-lowest);
     border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
     transition:
       border-color var(--ui-transition-fast),
       background var(--ui-transition-fast);
@@ -207,6 +217,19 @@
     background: var(--ui-surface-low);
   }
 
+  /* The family selected in the swatch grid / wheel: the row's numeral and role
+     go full-contrast so the selection reads across both surfaces. */
+  .axis-row.selected {
+    border-color: var(--ui-text-primary);
+    background: var(--ui-surface-low);
+  }
+
+  .axis-row.selected .role,
+  .axis-row.selected .role-num {
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+
   .role {
     flex: none;
     width: 6.5rem;
@@ -241,7 +264,7 @@
 
   .empty {
     color: var(--ui-text-tertiary);
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
   }
 
   .grip {
@@ -262,7 +285,7 @@
     border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     color: var(--ui-text-primary);
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
     line-height: 1;
     cursor: grab;
     user-select: none;
@@ -272,6 +295,11 @@
     border-color: var(--ui-border-high);
   }
 
+  .chip.selected {
+    border-color: var(--ui-text-primary);
+    background: var(--ui-surface-high);
+  }
+
   .chip:focus-visible {
     outline: 2px solid var(--ui-border-higher);
     outline-offset: 2px;

package/src/editor/ui/colors/paletteBaseColor.ts

@@ -201,6 +201,18 @@ export function applySolvedTextCurves(s: EditorState): void {
   }
 }
 
+/** Read-only view of every family's config, seeding spec defaults for the ones a
+ *  loaded theme leaves unconfigured — previews and recommendations must not go
+ *  static on a family the theme never mentions. */
+export function palettesWithDefaults(palettes: Record<string, PaletteConfig>): Record<string, PaletteConfig> {
+  const map: Record<string, PaletteConfig> = {};
+  for (const spec of PALETTE_SPECS) {
+    map[spec.label] =
+      palettes[spec.label] ?? defaultPaletteConfig({ baseColor: spec.initialColor, neutral: spec.neutral ?? false });
+  }
+  return map;
+}
+
 /** Apply the Color Story's suggested neutral text hierarchy (primary anchor,
  *  two even L drops, AA floors) as the Neutral family's Text curve. */
 export function applySuggestedNeutralText(useBlackWhite = false): void {