@motion-proto/live-tokens 0.45.0 → 0.46.0

package/src/editor/ui/UIMenuButton.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Heading line inside the menu; also its accessible name. */
+    header: string;
+    /** Accessible name for an icon-only trigger; a text trigger names itself. */
+    triggerLabel?: string;
+    /** Lets the caller style the trigger as its own furniture via `:global`. */
+    triggerClass?: string;
+    menuMinWidth?: string;
+    trigger: Snippet;
+    children: Snippet<[{ close: () => void }]>;
+  }
+
+  let {
+    header,
+    triggerLabel,
+    triggerClass = '',
+    menuMinWidth = '14rem',
+    trigger,
+    children,
+  }: Props = $props();
+
+  let open = $state(false);
+  let btnEl = $state<HTMLButtonElement | undefined>(undefined);
+  let menuEl = $state<HTMLDivElement | undefined>(undefined);
+  let initialItem = $state<'first' | 'last'>('first');
+
+  function items(): HTMLButtonElement[] {
+    return menuEl ? Array.from(menuEl.querySelectorAll<HTMLButtonElement>('button:not(:disabled)')) : [];
+  }
+
+  function close(refocusTrigger = true) {
+    if (!open) return;
+    open = false;
+    if (refocusTrigger) btnEl?.focus();
+  }
+
+  function toggle() {
+    if (open) {
+      close();
+    } else {
+      initialItem = 'first';
+      open = true;
+    }
+  }
+
+  function onTriggerKeydown(e: KeyboardEvent) {
+    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
+    e.preventDefault();
+    initialItem = e.key === 'ArrowUp' ? 'last' : 'first';
+    open = true;
+  }
+
+  // Enter and Space activate the focused item natively: items are real buttons.
+  function onMenuKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape' || e.key === 'Tab') {
+      e.preventDefault();
+      close();
+      return;
+    }
+    const list = items();
+    if (list.length === 0) return;
+    const idx = list.indexOf(document.activeElement as HTMLButtonElement);
+    let next = -1;
+    if (e.key === 'ArrowDown') next = idx === -1 ? 0 : (idx + 1) % list.length;
+    else if (e.key === 'ArrowUp') next = idx === -1 ? list.length - 1 : (idx - 1 + list.length) % list.length;
+    else if (e.key === 'Home') next = 0;
+    else if (e.key === 'End') next = list.length - 1;
+    if (next === -1) return;
+    e.preventDefault();
+    list[next].focus();
+  }
+
+  function onWindowKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape' && open) close();
+  }
+
+  function onDocumentMousedown(e: MouseEvent) {
+    if (!open) return;
+    const target = e.target as Node | null;
+    if (target && (btnEl?.contains(target) || menuEl?.contains(target))) return;
+    // The user is directing attention elsewhere; refocusing the trigger would
+    // steal focus from whatever they clicked.
+    close(false);
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', onWindowKeydown);
+    document.addEventListener('mousedown', onDocumentMousedown, true);
+  });
+
+  onDestroy(() => {
+    window.removeEventListener('keydown', onWindowKeydown);
+    document.removeEventListener('mousedown', onDocumentMousedown, true);
+  });
+
+  /* Fixed positioning escapes any parent overflow/stacking context. Anchored
+     below the trigger, right edges aligned; flips above near the viewport
+     bottom. Inline visibility rather than a state flag so the item focus that
+     follows lands on an already-visible menu (hidden elements refuse focus). */
+  function position(): void {
+    const btn = btnEl;
+    const menu = menuEl;
+    if (!btn || !menu) return;
+    const br = btn.getBoundingClientRect();
+    const mr = menu.getBoundingClientRect();
+    const margin = 8;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let left = br.right - mr.width;
+    if (left < margin) left = margin;
+    if (left + mr.width > vw - margin) left = vw - margin - mr.width;
+    let top = br.bottom + margin / 2;
+    if (top + mr.height > vh - margin) {
+      top = br.top - margin / 2 - mr.height;
+      if (top < margin) top = margin;
+    }
+    menu.style.left = `${left}px`;
+    menu.style.top = `${top}px`;
+    menu.style.visibility = 'visible';
+  }
+
+  $effect(() => {
+    if (!open) return;
+    let raf = requestAnimationFrame(() => {
+      raf = requestAnimationFrame(() => {
+        // The composed option primitives expose no role prop; stamping
+        // menuitem + tabindex here is what makes the popup a real menu with
+        // roving focus instead of a cluster of tab stops.
+        for (const b of items()) {
+          b.setAttribute('role', 'menuitem');
+          b.tabIndex = -1;
+        }
+        position();
+        const list = items();
+        (initialItem === 'last' ? list[list.length - 1] : list[0])?.focus();
+      });
+    });
+    window.addEventListener('scroll', position, true);
+    window.addEventListener('resize', position);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener('scroll', position, true);
+      window.removeEventListener('resize', position);
+    };
+  });
+</script>
+
+<button
+  type="button"
+  class="menu-trigger {triggerClass}"
+  aria-haspopup="menu"
+  aria-expanded={open}
+  aria-label={triggerLabel}
+  bind:this={btnEl}
+  onclick={toggle}
+  onkeydown={onTriggerKeydown}
+>
+  {@render trigger()}
+</button>
+
+{#if open}
+  <div
+    class="menu"
+    role="menu"
+    tabindex="-1"
+    aria-label={header}
+    style="min-width: {menuMinWidth};"
+    bind:this={menuEl}
+    onkeydown={onMenuKeydown}
+  >
+    <div class="menu-header" role="presentation">{header}</div>
+    {@render children({ close })}
+  </div>
+{/if}
+
+<style>
+  .menu-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-space-4);
+    padding: 0;
+    background: transparent;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  .menu-trigger:focus-visible {
+    outline: 2px solid var(--ui-border-higher);
+    outline-offset: 2px;
+  }
+
+  .menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    max-width: calc(100vw - var(--ui-space-24));
+    background: var(--ui-surface-higher);
+    border: 1px solid var(--ui-border-high);
+    border-radius: var(--ui-radius-lg);
+    box-shadow: var(--ui-shadow-lg);
+    z-index: 1000;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  .menu-header {
+    padding: var(--ui-space-8) var(--ui-space-12);
+    border-bottom: 1px solid var(--ui-border-low);
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    line-height: 1.2;
+  }
+
+  /* Roving focus is the menu's selection cursor; the inset ring keeps it
+     inside the clipped rounded corners. */
+  .menu :global(button:focus-visible) {
+    background: var(--ui-hover);
+    outline: 2px solid var(--ui-border-higher);
+    outline-offset: -2px;
+  }
+</style>

package/src/editor/ui/UIPaletteSelector.svelte

@@ -1059,7 +1059,6 @@
     font-size: var(--ui-font-size-xs);
     font-family: var(--ui-font-mono);
     color: var(--ui-text-tertiary);
-    text-transform: uppercase;
     border-top: 1px solid var(--ui-border-low);
   }
 

package/src/editor/ui/VariablesTab.svelte

@@ -204,10 +204,9 @@
   /* Subsection title (used by Spacing & Borders) */
   .subsection-title {
     margin: var(--ui-space-16) 0 var(--ui-space-8);
-    font-size: var(--ui-font-size-xs);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-tertiary);
-    text-transform: uppercase;
+    font-size: var(--ui-font-size-xl);
+    font-weight: var(--ui-font-weight-bold);
+    color: var(--ui-text-primary);
   }
 
   .subsection-title:first-child {

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

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { AxisStatus } from '../../core/palettes/colorHarmony';
+
+  interface Props {
+    index: number;
+    status: AxisStatus;
+    /** The axis carries the family selected across the Colors surfaces. */
+    selected?: boolean;
+    /** Rendered over the swatch badge's scrim rather than an editor surface. */
+    scrim?: boolean;
+  }
+
+  let { index, status, selected = false, scrim = false }: Props = $props();
+</script>
+
+<!-- Carries no positioning: the wheel places it absolutely, the rows inline. -->
+<span class="numeral" class:filled={status === 'on-wheel'} class:selected class:scrim>{index + 1}</span>
+
+<style>
+  /* Hollow is the resting shape; filled means the axis has a rail on the wheel
+     right now. An unused axis is hollow too, but it never holds a family, so a
+     hollow numeral beside a color always reads "bound, off the wheel". */
+  .numeral {
+    box-sizing: border-box;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* Callers that need a bigger numeral set these two; the row default is the
+       size the wheel and the axes list share. */
+    width: var(--numeral-size, 1rem);
+    height: var(--numeral-size, 1rem);
+    border: 1px dashed var(--ui-text-muted);
+    border-radius: var(--ui-radius-full);
+    color: var(--ui-text-muted);
+    font-size: var(--numeral-font-size, var(--ui-font-size-xs));
+    font-weight: var(--ui-font-weight-semibold);
+    /* No tabular figures: the box is a fixed circle, so nothing needs aligning,
+       and a padded tabular "1" sits off-center inside its own advance. */
+    line-height: 1;
+    user-select: none;
+  }
+
+  /* The scrim composites with the swatch fill beneath it, which lands close
+     enough to the muted token to erase the ring and the digit. */
+  .numeral.scrim:not(.filled) {
+    border-color: var(--ui-text-secondary);
+    color: var(--ui-text-secondary);
+  }
+
+  .numeral.filled {
+    border-style: solid;
+    border-color: var(--ui-border-higher);
+    background: var(--ui-surface-high);
+    color: var(--ui-text-secondary);
+  }
+
+  .numeral.filled.selected {
+    background: var(--ui-text-primary);
+    border-color: var(--ui-text-primary);
+    color: var(--ui-surface-lowest);
+  }
+
+  /* Selection raises contrast but never fills: filled is reserved for "has a
+     rail", so inverting here would make the list contradict the wheel. */
+  .numeral.selected:not(.filled) {
+    border-color: var(--ui-text-primary);
+    color: var(--ui-text-primary);
+  }
+</style>

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

@@ -93,8 +93,6 @@
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-tertiary);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
   }
 
   .row-value {

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

@@ -5,7 +5,9 @@
   import { editorState, beginScope, commitScope, cancelScope, type Scope } from '../../core/store/editorStore';
   import { setBaseHueChroma, setBaseChroma, setAxisHue, setAxisHues } from './paletteBaseColor';
   import { maxChroma } from './colorWheelMath';
-  import { applyHarmonyToAxes, modeActiveAxes, AXIS_ROLES, type HarmonyMode } from '../../core/palettes/colorHarmony';
+  import { applyHarmonyToAxes, axisLabel, axisStatuses, type HarmonyMode } from '../../core/palettes/colorHarmony';
+  import AxisNumeral from './AxisNumeral.svelte';
+  import { modeLabel } from './harmonyModeIcons';
 
   interface Props {
     selected: string | null;
@@ -29,12 +31,12 @@
 
   let { selected, onSelect, discLightness, onCustomize, absoluteChroma, activeMode, previewMode = null }: Props = $props();
 
-  // One handle per axis (index = role). A bound axis reads its color from the
-  // family's baseColor (hue equals axes[i].hue by invariant 1); an unbound axis
-  // carries only its stored hue, previewing where a dropped color would land.
+  // One handle per axis. A bound axis reads its color from the family's
+  // baseColor (hue equals axes[i].hue by invariant 1); an unbound axis carries
+  // only its stored hue, previewing where an assigned color would land.
   let axisData = $derived(
     $editorState.harmonyAxes.map((axis, i) => {
-      const common = { index: i, role: AXIS_ROLES[i], family: axis.family, bound: axis.family !== null };
+      const common = { index: i, label: axisLabel(i), family: axis.family, bound: axis.family !== null };
       if (axis.family !== null) {
         const spec = PALETTE_SPECS.find((s) => s.label === axis.family);
         const { l, c, h } = $editorState.palettes[axis.family]?.baseColor ?? spec!.initialColor;
@@ -50,8 +52,8 @@
   // active in the applied geometry (its slot is a distinct position). A bound
   // inactive axis keeps its family's color but is edited in dot mode, not axis
   // mode: the family renders as the free dot and sits out the global spin.
-  let activeAxes = $derived(modeActiveAxes(activeMode));
-  const isVisible = (t: { index: number }) => activeAxes[t.index];
+  let statuses = $derived(axisStatuses(activeMode, $editorState.harmonyAxes));
+  const isVisible = (t: { index: number }) => statuses[t.index] === 'on-wheel';
 
   // Reserved judgment call: keyboard nudge increments.
   const HUE_STEP = 2;
@@ -59,6 +61,7 @@
   const MARGIN = 52;      // ring-to-edge gap: houses the external handles AND the axis numerals outside them
   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 FREE_NUM_OFFSET = 15; // free-dot numeral, diagonal clearance past the enlarged dot
   const MIN_SIZE = 240;
   const MAX_SIZE = 560;
 
@@ -87,7 +90,7 @@
   // lossy and makes the non-dragged coordinate wobble). Writes also use the
   // pristine hue0/L0, so nothing accumulates across frames.
   type AxisView = {
-    index: number; role: string; family: string | null; bound: boolean;
+    index: number; label: string; family: string | null; bound: boolean;
     hex: string; hue: number; chroma: number; lightness: number; rFrac: number;
   };
 
@@ -146,7 +149,9 @@
   // Writes go through setBaseHueChroma only — active axes never move; a bound
   // inactive axis follows its family via syncBoundAxisHue.
   let freeDot = $derived.by(() => {
-    if (!selected || $editorState.harmonyAxes.some((a, i) => a.family === selected && activeAxes[i])) return null;
+    if (!selected) return null;
+    const axisIndex = $editorState.harmonyAxes.findIndex((a) => a.family === selected);
+    if (axisIndex !== -1 && statuses[axisIndex] === 'on-wheel') return null;
     const spec = PALETTE_SPECS.find((s) => s.label === selected);
     if (!spec) return null;
     const { l, c, h } = $editorState.palettes[selected]?.baseColor ?? spec.initialColor;
@@ -159,11 +164,22 @@
     }
     const r = rFrac * discRadius;
     return {
-      family: selected, hex: oklchToHexClamped(l, c, h), hue, chroma: c, lightness: l,
+      family: selected, axisIndex: axisIndex === -1 ? null : axisIndex,
+      hex: oklchToHexClamped(l, c, h), hue, chroma: c, lightness: l,
       x: center + r * Math.cos(rad(hue)), y: center - r * Math.sin(rad(hue)),
     };
   });
 
+  // The dot serves two states: bound to an axis the mode left off the wheel, and
+  // unassigned. Only the first has an axis to name.
+  let freeDotLabel = $derived.by(() => {
+    if (!freeDot) return '';
+    const where = freeDot.axisIndex === null
+      ? 'unassigned'
+      : `${axisLabel(freeDot.axisIndex)}. Off the wheel in ${modeLabel(activeMode)}`;
+    return `${freeDot.family}, ${where}. Drag to adjust hue and chroma.`;
+  });
+
   let globalHandle = $derived.by(() => {
     const d = drag;
     const angle = d?.kind === 'global' ? d.angle : globalAngle;
@@ -315,7 +331,7 @@
     if (axis.family !== null) onSelect(axis.family);
     onCustomize();
     capture(e);
-    openGesture(`colors: ${axis.role} axis rotate`);
+    openGesture(`colors: ${axis.label} rotate`);
     drag = { kind: 'axis', index: axis.index, angle: pointerAngle(e), start: startOf(axis) };
     applyAxis(e);
   }
@@ -483,7 +499,9 @@
   {/each}
 
   {#each visibleRender as t (t.index)}
-    <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>
+    <span class="axis-num" style="left: {t.num.x}px; top: {t.num.y}px" aria-hidden="true">
+      <AxisNumeral index={t.index} status={statuses[t.index]} selected={t.selected} />
+    </span>
   {/each}
 
   {#each visibleRender as t (t.index)}
@@ -493,7 +511,7 @@
         class="dot"
         class:selected={t.selected}
         style="left: {t.dot.x}px; top: {t.dot.y}px; --fill: {t.hex}"
-        aria-label={`${t.family} — drag along rail to adjust chroma`}
+        aria-label={`${t.family}, drag along the rail to adjust chroma`}
         title={`${t.family} (drag for chroma)`}
         onpointerdown={(e) => startChromaDrag(e, t)}
         onpointermove={moveDrag}
@@ -513,8 +531,8 @@
       class:unbound={!t.bound}
       class:selected={t.selected}
       style="left: {t.ext.x}px; top: {t.ext.y}px; transform: translate(-50%, -50%) rotate({t.iconRot}deg)"
-      aria-label={t.bound ? `Rotate ${t.role} axis hue (${t.family})` : `Rotate ${t.role} axis hue`}
-      title={t.bound ? `Rotate ${t.role} axis hue (${t.family})` : `Rotate ${t.role} axis hue`}
+      aria-label={t.bound ? `Rotate ${t.label} hue (${t.family})` : `Rotate ${t.label} hue`}
+      title={t.bound ? `Rotate ${t.label} hue (${t.family})` : `Rotate ${t.label} hue`}
       onpointerdown={(e) => startAxisDrag(e, t)}
       onpointermove={moveDrag}
       onpointerup={endDrag}
@@ -526,12 +544,21 @@
   {/each}
 
   {#if freeDot}
+    {#if freeDot.axisIndex !== null}
+      <span
+        class="axis-num"
+        style="left: {freeDot.x + FREE_NUM_OFFSET}px; top: {freeDot.y - FREE_NUM_OFFSET}px"
+        aria-hidden="true"
+      >
+        <AxisNumeral index={freeDot.axisIndex} status={statuses[freeDot.axisIndex]} selected />
+      </span>
+    {/if}
     <button
       type="button"
       class="dot selected"
       style="left: {freeDot.x}px; top: {freeDot.y}px; --fill: {freeDot.hex}"
-      aria-label={`${freeDot.family} — drag to adjust hue and chroma`}
-      title={`${freeDot.family} (drag freely)`}
+      aria-label={freeDotLabel}
+      title={freeDotLabel}
       onpointerdown={startFreeDrag}
       onpointermove={moveDrag}
       onpointerup={endDrag}
@@ -632,7 +659,7 @@
   }
 
   /* Unbound-axis ghost: a hollow greyscale marker on the external track (no color
-     to preview, only where a dropped color's hue would land). */
+     to preview, only where an assigned color's hue would land). */
   .ghost.unbound {
     width: 0.7rem;
     height: 0.7rem;
@@ -731,24 +758,16 @@
     color: var(--ui-text-primary);
   }
 
-  /* Axis numeral just outside the handle track. Positioned only — never rotated,
-     so it stays upright at any angle. */
+  /* Axis numeral just outside the handle track. Positioning only — never
+     rotated, so the digit stays upright at any angle. */
   .axis-num {
     position: absolute;
     transform: translate(-50%, -50%);
-    font-size: var(--ui-font-size-xs);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-tertiary);
+    display: flex;
     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 {