@motion-proto/live-tokens 0.44.0 → 0.46.0

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 {