@motion-proto/live-tokens 0.49.1 → 0.52.1

package/src/editor/ui/PaletteEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy, tick } from 'svelte';
   import { oklchToHexClamped, type Oklch } from '../core/palettes/oklch';
-  import { type CurveAnchor, lightnessCurveConfig, saturationCurveConfig } from './curveEngine';
+  import { type CurveAnchor, lightnessCurveConfig, saturationCurveConfig, hueCurveConfig } from './curveEngine';
   import ColorEditPanel from './ColorEditPanel.svelte';
   import OverridesPanel from './palette/OverridesPanel.svelte';
   import UIPillButton from './UIPillButton.svelte';
@@ -9,12 +9,12 @@
   import ScaleCurveEditor from './palette/ScaleCurveEditor.svelte';
   import PaletteBase from './palette/PaletteBase.svelte';
   import PaletteJumpButton from './palette/PaletteJumpButton.svelte';
+  import Toggle from './Toggle.svelte';
   import { type EditingState, idleState, BASE_KEY, isEditingBase as isBaseEdit } from './palette/paletteEditorState';
-  import { dockTrackTemplate } from './palette/dockMagnify';
   import {
     type Step, type Scale,
     GRAY_FALLBACK,
-    DEFAULT_PALETTE_LIGHTNESS, DEFAULT_PALETTE_SATURATION,
+    DEFAULT_PALETTE_LIGHTNESS, DEFAULT_PALETTE_SATURATION, DEFAULT_PALETTE_HUE,
     defaultScaleCurves, defaultScaleCurvesObject, defaultPaletteConfig,
     paletteStepLightness, scales,
     paletteStepKey, stepKey, scaleCurveKey as getScaleCurveKey,
@@ -32,6 +32,12 @@
   import { pendingPaletteFocus } from '../core/store/paletteFocus';
   import { showCopyPopover } from './copyPopover';
 
+  // Full sRGB chroma range (gamutClamp trims per hue/lightness). Neutrals default
+  // low but are not capped; their calm character comes from defaults, not a ceiling.
+  const BASE_CHROMA_MAX = 0.4;
+  // Where a typical neutral's chroma sits, marked on the slider as a soft nudge.
+  const NEUTRAL_CALM_CHROMA = 0.05;
+
   interface Props {
     label: string;
     displayLabel?: string | null;
@@ -80,6 +86,14 @@
     const idx = saturationCurve.findIndex(a => Math.abs(a.x - x) < 0.5);
     return idx >= 0 ? idx : null;
   });
+  // Unlike lightness/saturation, hue has no always-present curve to search: it stays
+  // undefined until the first edit (RJC 5), and there is nothing to lock before then.
+  let lockedHueIdx: number | null = $derived.by(() => {
+    if (!anchorToBase || anchorPlacement === undefined || hueCurve === undefined) return null;
+    const x = stepIndexToX(anchorPlacement.step);
+    const idx = hueCurve.findIndex(a => Math.abs(a.x - x) < 0.5);
+    return idx >= 0 ? idx : null;
+  });
 
   // Held at component scope so inline header-swatch handlers and the function
   // handlers share one handle for commit/cancel.
@@ -114,14 +128,36 @@
   function setLightnessCurve(a: CurveAnchor[]) { edit('lightnessCurve', a); }
   function setSaturationCurve(a: CurveAnchor[]) { edit('saturationCurve', a); }
 
+  // First edit materializes the field (RJC 5) with `a` — the curve the UI
+  // actually rendered and edited — written in BEFORE syncBaseAnchor runs, not
+  // after: syncBaseAnchor pins the anchor by inserting a y=0 point into
+  // whatever `cfg.hueCurve` currently holds, so calling it against the
+  // about-to-be-discarded flat default and then overwriting with `a` would
+  // throw the pin away. Wave 3's idempotency guarantee is what makes
+  // re-running syncBaseAnchor here safe without disturbing the
+  // lightness/saturation anchors it already placed.
+  function setHueCurve(a: CurveAnchor[]) {
+    mutate(`${label}: hueCurve`, (s) => {
+      if (!s.palettes[label]) s.palettes[label] = seedConfig();
+      const cfg = s.palettes[label];
+      const materializing = cfg.hueCurve === undefined;
+      cfg.hueCurve = a;
+      if (materializing) syncBaseAnchor(cfg);
+    });
+  }
+
   function handleOffset(key: string, value: number) {
     edit('curveOffset', { ...curveOffset, [key]: value });
   }
 
+  function handleAutoSmooth(key: string, value: boolean) {
+    edit('curveAutoSmooth', { ...curveAutoSmooth, [key]: value });
+  }
+
   let editing: EditingState = $state(idleState);
 
   function computePaletteOklch(index: number, base: Oklch): Oklch {
-    return computePaletteOklchPure(index, base, lightnessCurve, saturationCurve, curveOffset);
+    return computePaletteOklchPure(index, base, lightnessCurve, saturationCurve, curveOffset, hueCurve);
   }
 
   function computeDerivedOklch(step: Step, base: Oklch, scaleTitle: string): Oklch {
@@ -176,7 +212,17 @@
     scaleEditorOpen = scaleEditorOpen;
   }
 
-  function setScaleCurve(title: string, channel: 'lightness' | 'saturation', a: CurveAnchor[]) {
+  // Session-scoped (RJC 9): viewport state, never written to theme JSON.
+  // Keyed by the same curveKey strings that already key curveOffset, so a
+  // hue key ("hue" or "<scale>-hue") defaults closed and the rest open.
+  let curveSectionOpen: Record<string, boolean> = $state({});
+  const sectionOpen = (key: string) => curveSectionOpen[key] ?? !key.endsWith('hue');
+  function toggleCurveSection(key: string) {
+    curveSectionOpen[key] = !sectionOpen(key);
+    curveSectionOpen = curveSectionOpen;
+  }
+
+  function setScaleCurve(title: string, channel: 'lightness' | 'saturation' | 'hue', a: CurveAnchor[]) {
     const cur = scaleCurves[title] ?? { lightness: defaultScaleCurves[title].lightness(), saturation: defaultScaleCurves[title].saturation() };
     edit('scaleCurves', { ...scaleCurves, [title]: { ...cur, [channel]: a } });
   }
@@ -389,22 +435,16 @@
   let baseColor = $derived($editorState.palettes[label]?.baseColor ?? initialColor);
   let lightnessCurve = $derived($editorState.palettes[label]?.lightnessCurve ?? DEFAULT_PALETTE_LIGHTNESS());
   let saturationCurve = $derived($editorState.palettes[label]?.saturationCurve ?? DEFAULT_PALETTE_SATURATION());
+  // Left undefined when absent (RJC 5): materializing here would seed every
+  // fresh palette with a redundant flat curve it never asked for.
+  let hueCurve = $derived($editorState.palettes[label]?.hueCurve);
   let scaleCurves = $derived($editorState.palettes[label]?.scaleCurves ?? defaultScaleCurvesObject());
   let curveOffset = $derived($editorState.palettes[label]?.curveOffset ?? { lightness: 0, saturation: 0 });
+  let curveAutoSmooth = $derived($editorState.palettes[label]?.curveAutoSmooth ?? {});
   let overrides = $derived($editorState.palettes[label]?.overrides ?? {});
   let snappedScales = $derived(new Set($editorState.palettes[label]?.snappedScales ?? []));
   let anchorToBase = $derived($editorState.palettes[label]?.anchorToBase ?? true);
   let anchorPlacement = $derived($editorState.palettes[label]?.anchorPlacement);
-  let anchorStepLabel = $derived(anchorToBase && anchorPlacement !== undefined
-    ? paletteStepLightness[anchorPlacement.step]?.label ?? null
-    : null);
-  // Dock magnification: the grid transitions between track lists, so dialing
-  // lightness reads as swatches opening/closing while the anchor walks the
-  // ramp. Column 0 is the white bookend, so step i is column i+1.
-  let swatchTemplate = $derived(dockTrackTemplate(
-    paletteStepLightness.length + 2,
-    anchorToBase && anchorPlacement !== undefined ? anchorPlacement.step + 1 : null,
-  ));
   let emptyMode = $derived($editorState.palettes[label]?.emptyMode ?? 'solid');
   let gradientStyle = $derived($editorState.palettes[label]?.gradientStyle ?? 'linear');
   let gradientAngle = $derived($editorState.palettes[label]?.gradientAngle ?? 180);
@@ -417,7 +457,7 @@
   let editingKey = $derived(editing.kind === 'idle' ? null : editing.kind === 'editingBase' ? BASE_KEY : editing.stepKey);
   let editingDraft = $derived(editing.kind === 'editingStep' ? editing.draft : null);
   let paletteComputed = $derived((() => {
-    const _bc = baseColor, _lc = lightnessCurve, _sc = saturationCurve, _co = curveOffset, _ed = editingDraft, _ek = editingKey, _ov = overrides, _ab = anchorToBase, _ap = anchorPlacement;
+    const _bc = baseColor, _lc = lightnessCurve, _sc = saturationCurve, _hc = hueCurve, _co = curveOffset, _ed = editingDraft, _ek = editingKey, _ov = overrides, _ab = anchorToBase, _ap = anchorPlacement;
     return paletteStepLightness.map((ps, index) => {
       const k = paletteStepKey(ps.label);
       const oklch = computePaletteOklch(index, baseColor);
@@ -488,23 +528,55 @@
   <PaletteBase
     {label}
     {displayLabel}
-    {neutral}
     {baseColor}
-    {anchorToBase}
-    {anchorStepLabel}
     {isEditingBase}
-    {panelOpen}
     pinnedOpen={paletteEditorOpen}
-    {editingColor}
-    {editPanelTitle}
     {copiedKey}
     onStartEdit={startBaseEdit}
-    onConfirm={confirmEdit}
-    onCancel={cancelEdit}
-    onBaseChange={(h, c, l) => setBaseColor(label, { l: l / 100, c, h })}
-    onAnchorToBaseChange={setAnchorToBase}
     onCopyBaseHex={copyHex}
-  />
+  >
+    {#snippet actions()}
+      <PaletteJumpButton family={label} {displayLabel} target="wheel" />
+      <UIPillButton size="compact" variant="outline" onclick={clearPaletteOverrides}>Clear Overrides</UIPillButton>
+      <UIPillButton size="compact" variant="outline" onclick={() => paletteEditorOpen = !paletteEditorOpen}>
+        {paletteEditorOpen ? 'Close' : 'Edit'}
+      </UIPillButton>
+    {/snippet}
+  </PaletteBase>
+
+  {#if paletteEditorOpen || (isEditingBase && panelOpen && editingColor)}
+    <div class="swatch-grid" style="--swatch-cols: {paletteStepLightness.length + 2}">
+      <div class="base-panel" style="grid-column: 2 / {paletteStepLightness.length + 2}">
+        <ColorEditPanel
+          title={isEditingBase ? editPanelTitle : 'Base Color'}
+          showRemoveOverride={false}
+          hideActions={!isEditingBase}
+          hidePreview
+          hue={baseColor.h}
+          chroma={baseColor.c}
+          lightness={baseColor.l * 100}
+          chromaMax={BASE_CHROMA_MAX}
+          chromaHint={neutral ? NEUTRAL_CALM_CHROMA : undefined}
+          onHueChromaChange={(h, c, l) => setBaseColor(label, { l: l / 100, c, h })}
+          onConfirm={confirmEdit}
+          onCancel={cancelEdit}
+          onRemoveOverride={() => {}}
+          onSliderStart={() => beginSliderGesture(`edit ${label} base`)}
+        >
+          {#snippet actions()}
+            <div class="base-anchor-toggle">
+              <Toggle
+                checked={anchorToBase}
+                onchange={(v) => setAnchorToBase(v ?? !anchorToBase)}
+                label="Base color must appear in palette"
+                labelFirst
+              />
+            </div>
+          {/snippet}
+        </ColorEditPanel>
+      </div>
+    </div>
+  {/if}
 
   <!-- Palette + Text row -->
   <div class="scales-row">
@@ -521,13 +593,8 @@
             <span>Gradient</span>
           </label>
         {/if}
-        <PaletteJumpButton family={label} {displayLabel} target="wheel" />
-        <UIPillButton size="compact" variant="outline" onclick={clearPaletteOverrides}>Clear Overrides</UIPillButton>
-        <UIPillButton size="compact" variant="outline" onclick={() => paletteEditorOpen = !paletteEditorOpen}>
-          {paletteEditorOpen ? 'Close' : 'Edit'}
-        </UIPillButton>
       </div>
-      <div class="swatch-grid" style="--swatch-cols: {paletteStepLightness.length + 2}; grid-template-columns: {swatchTemplate}">
+      <div class="swatch-grid" style="--swatch-cols: {paletteStepLightness.length + 2}">
         <div class="step-column">
           <button class="step-label copyable-label" class:copied={copiedLabelKey === 'palette-white'} type="button" onclick={(e) => copyVarName('palette-white', `--color-${cssNamespace}-white`, e)}>
             {copiedLabelKey === 'palette-white' ? 'copied!' : 'white'}
@@ -585,16 +652,20 @@
             </div>
           {/if}
           <ScaleCurveEditor
-            curveKey="lightness"
-            anchors={lightnessCurve}
-            cfg={lightnessCurveConfig}
+            curveKey="hue"
+            anchors={hueCurve ?? DEFAULT_PALETTE_HUE()}
+            cfg={hueCurveConfig}
             stepCount={paletteStepLightness.length}
-            defaults={DEFAULT_PALETTE_LIGHTNESS()}
-            offset={curveOffset['lightness'] ?? 0}
-            lockedAnchorIndex={lockedLightnessIdx}
+            defaults={DEFAULT_PALETTE_HUE()}
+            offset={curveOffset['hue'] ?? 0}
+            autoSmooth={curveAutoSmooth['hue']}
+            lockedAnchorIndex={lockedHueIdx}
+            open={sectionOpen('hue')}
+            onToggleOpen={() => toggleCurveSection('hue')}
             onLockedAnchorUnlock={() => anchorUnlockPrompt = true}
-            onAnchorsChange={setLightnessCurve}
+            onAnchorsChange={setHueCurve}
             onOffsetChange={handleOffset}
+            onAutoSmoothChange={handleAutoSmooth}
           />
           <ScaleCurveEditor
             curveKey="saturation"
@@ -603,10 +674,30 @@
             stepCount={paletteStepLightness.length}
             defaults={DEFAULT_PALETTE_SATURATION()}
             offset={curveOffset['saturation'] ?? 0}
+            autoSmooth={curveAutoSmooth['saturation']}
             lockedAnchorIndex={lockedSaturationIdx}
+            open={sectionOpen('saturation')}
+            onToggleOpen={() => toggleCurveSection('saturation')}
             onLockedAnchorUnlock={() => anchorUnlockPrompt = true}
             onAnchorsChange={setSaturationCurve}
             onOffsetChange={handleOffset}
+            onAutoSmoothChange={handleAutoSmooth}
+          />
+          <ScaleCurveEditor
+            curveKey="lightness"
+            anchors={lightnessCurve}
+            cfg={lightnessCurveConfig}
+            stepCount={paletteStepLightness.length}
+            defaults={DEFAULT_PALETTE_LIGHTNESS()}
+            offset={curveOffset['lightness'] ?? 0}
+            autoSmooth={curveAutoSmooth['lightness']}
+            lockedAnchorIndex={lockedLightnessIdx}
+            open={sectionOpen('lightness')}
+            onToggleOpen={() => toggleCurveSection('lightness')}
+            onLockedAnchorUnlock={() => anchorUnlockPrompt = true}
+            onAnchorsChange={setLightnessCurve}
+            onOffsetChange={handleOffset}
+            onAutoSmoothChange={handleAutoSmooth}
           />
         </div>
       {/if}
@@ -641,6 +732,7 @@
       {cssNamespace}
       {scaleCurves}
       {curveOffset}
+      {curveAutoSmooth}
       {defaultScaleCurves}
       overrides={overridesHex}
       {editingKey}
@@ -663,6 +755,9 @@
       onCopyVarName={copyVarName}
       onSetScaleCurve={setScaleCurve}
       onOffsetChange={handleOffset}
+      onAutoSmoothChange={handleAutoSmooth}
+      {sectionOpen}
+      onToggleCurveSection={toggleCurveSection}
     />
   {/snippet}
 
@@ -862,8 +957,9 @@
 
   .swatch-grid {
     display: grid;
+    /* Even tracks: the curve editors below plot one step per column, so a wider
+       anchored column would slide every swatch out from under its own point. */
     grid-template-columns: repeat(var(--swatch-cols), minmax(0, 1fr));
-    transition: grid-template-columns var(--ui-transition-fast);
     gap: var(--ui-space-4) var(--swatch-gap, var(--ui-space-4));
     align-items: start;
     justify-content: start;
@@ -871,6 +967,16 @@
     max-width: calc(var(--swatch-cols) * 4.5rem + (var(--swatch-cols) - 1) * var(--swatch-gap, var(--ui-space-4)));
   }
 
+  /* The picker rides the same track geometry as the curve editors below, so
+     the two graphs share one left and right edge. */
+  .base-panel {
+    min-width: 0;
+  }
+
+  .base-anchor-toggle {
+    margin-left: auto;
+  }
+
   .curve-grid-span {
     display: flex;
     flex-direction: column;
@@ -927,9 +1033,9 @@
     outline-offset: 1px;
   }
 
-  /* The step the base color is placed at: dock-magnified (its grid column is
-     also widened via the track template) with an emphasized border. No fill
-     change — the swatch itself already IS the picked color. */
+  /* The step the base color is placed at: taller, with an emphasized border. It
+     keeps its column width so the curve editors stay aligned. No fill change:
+     the swatch itself already IS the picked color. */
   .swatch.gray-swatch.anchored {
     border-color: var(--ui-border-higher);
     height: calc(5.75rem + var(--ui-space-2));

package/src/editor/ui/ProjectFontsSection.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { FontFamily, FontSource } from '../core/themes/themeTypes';
   import { editorState, setFontSources, transaction } from '../core/store/editorStore';
-  import { applyFontSources, applyFontStacks } from '../core/fonts/fontLoader';
   import {
     buildSourceFromFontFaceText,
     buildSourceFromUrl,
@@ -69,8 +68,6 @@
 
   function commitSources(next: FontSource[]) {
     setFontSources(next);
-    applyFontSources(next);
-    applyFontStacks(fontStacksList, next);
   }
 
   /** One paste field → sniff whether it's @font-face or a URL/embed and
@@ -220,8 +217,6 @@
       s.fonts.sources = next;
       s.fonts.stacks = updatedStacks;
     });
-    applyFontSources(next);
-    applyFontStacks(updatedStacks, next);
   }
 
   /** Resolve a clickable target for the row. We prefer the human-readable