@motion-proto/live-tokens 0.50.0 → 0.52.1

package/src/editor/ui/palette/OverridesPanel.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import ScaleCurveEditor from './ScaleCurveEditor.svelte';
   import UIPillButton from '../UIPillButton.svelte';
-  import { type CurveAnchor, lightnessCurveConfig, saturationCurveConfig, textLightnessCurveConfig } from '../curveEngine';
+  import { type CurveAnchor, lightnessCurveConfig, saturationCurveConfig, textLightnessCurveConfig, hueCurveConfig } from '../curveEngine';
   import { scaleToCssVar } from '../../core/palettes/paletteDerivation';
+  import { DEFAULT_PALETTE_HUE } from './paletteMath';
   import type { Oklch } from '../../core/palettes/oklch';
 
   /**
@@ -29,7 +30,7 @@
     steps: Step[];
   }
 
-  type Channel = 'lightness' | 'saturation';
+  type Channel = 'lightness' | 'saturation' | 'hue';
 
   interface ScaleCurveDef {
     lightness: () => CurveAnchor[];
@@ -48,8 +49,9 @@
     snapped: boolean;
     supportsSnap: boolean;
     cssNamespace: string | null;
-    scaleCurves: Record<string, { lightness: CurveAnchor[]; saturation: CurveAnchor[] }>;
+    scaleCurves: Record<string, { lightness: CurveAnchor[]; saturation: CurveAnchor[]; hue?: CurveAnchor[] }>;
     curveOffset: Record<string, number>;
+    curveAutoSmooth: Record<string, boolean | undefined>;
     defaultScaleCurves: Record<string, ScaleCurveDef>;
     overrides: Record<string, string>;
     editingKey: string | null;
@@ -72,6 +74,9 @@
     onCopyVarName: (key: string, varName: string, event?: MouseEvent) => void;
     onSetScaleCurve: (scaleTitle: string, channel: Channel, anchors: CurveAnchor[]) => void;
     onOffsetChange: (key: string, value: number) => void;
+    onAutoSmoothChange: (key: string, value: boolean) => void;
+    sectionOpen: (key: string) => boolean;
+    onToggleCurveSection: (key: string) => void;
   }
 
   let {
@@ -82,6 +87,7 @@
     cssNamespace,
     scaleCurves,
     curveOffset,
+    curveAutoSmooth,
     defaultScaleCurves,
     overrides,
     editingKey,
@@ -103,7 +109,10 @@
     onCopyHex,
     onCopyVarName,
     onSetScaleCurve,
-    onOffsetChange
+    onOffsetChange,
+    onAutoSmoothChange,
+    sectionOpen,
+    onToggleCurveSection
   }: Props = $props();
 
   interface CurveDescriptor {
@@ -120,8 +129,9 @@
     const defs = defaultScaleCurves[scale.title];
     if (!sc || !defs) return [];
     return [
-      { key: scaleCurveKeyFor(scale.title, 'lightness'), anchors: sc.lightness, cfg: lightnessCfg, defaults: defs.lightness(), channel: 'lightness' },
+      { key: scaleCurveKeyFor(scale.title, 'hue'), anchors: sc.hue ?? DEFAULT_PALETTE_HUE(), cfg: hueCurveConfig, defaults: DEFAULT_PALETTE_HUE(), channel: 'hue' },
       { key: scaleCurveKeyFor(scale.title, 'saturation'), anchors: sc.saturation, cfg: saturationCurveConfig, defaults: defs.saturation(), channel: 'saturation' },
+      { key: scaleCurveKeyFor(scale.title, 'lightness'), anchors: sc.lightness, cfg: lightnessCfg, defaults: defs.lightness(), channel: 'lightness' },
     ];
   })());
 </script>
@@ -255,8 +265,12 @@
             stepCount={scale.steps.length}
             defaults={curve.defaults}
             offset={curveOffset[curve.key] ?? 0}
+            autoSmooth={curveAutoSmooth[curve.key]}
+            open={sectionOpen(curve.key)}
+            onToggleOpen={() => onToggleCurveSection(curve.key)}
             onAnchorsChange={(a) => onSetScaleCurve(scale.title, curve.channel, a)}
             onOffsetChange={onOffsetChange}
+            onAutoSmoothChange={onAutoSmoothChange}
           />
         {/each}
       </div>

package/src/editor/ui/palette/PaletteBase.svelte

@@ -1,74 +1,38 @@
 <script lang="ts">
-  import ColorEditPanel from '../ColorEditPanel.svelte';
-  import Toggle from '../Toggle.svelte';
-  import { beginSliderGesture } from '../../core/store/editorStore';
+  import type { Snippet } from 'svelte';
   import { oklchToHexClamped, type Oklch } from '../../core/palettes/oklch';
 
-  // 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 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 {
     /**
-   * The header swatch + label + base-hex + (when active) the OKLCH ColorEditPanel
-   * for editing the palette's base colour. The picker edits hue/chroma/lightness
-   * and maps them straight to the base hex. `neutral` only nudges the picker
-   * (a calm-chroma hint on the slider); it does not change behaviour.
-   *
-   * State (`editing`, scope handle) is owned by the parent — this component
-   * fires callbacks (`onStartEdit`, `onConfirm`, `onCancel`, etc.).
+   * The header band: swatch, label, base hex, and the palette's actions on the
+   * right. The base-colour picker itself is rendered by the parent below this
+   * band so it can line up with the curve editors.
    */
     label: string;
     displayLabel?: string | null;
-    neutral?: boolean;
     baseColor: Oklch;
-    anchorToBase: boolean;
-    /** Palette step label ('500', '850', …) the base color is placed at; null while off or unplaced. */
-    anchorStepLabel?: string | null;
     isEditingBase: boolean;
-    panelOpen: boolean;
-    /** Keep the panel open in live-apply mode (no confirm/cancel session) while the curve editors are visible. */
+    /** Keep the swatch reading as active while the curve editors are visible. */
     pinnedOpen?: boolean;
-    editingColor: Oklch | null;
-    editPanelTitle: string | null;
     copiedKey: string | null;
     onStartEdit: () => void;
-    onConfirm: () => void;
-    onCancel: () => void;
-    onBaseChange: (hue: number, chroma: number, lightness: number) => void;
-    onAnchorToBaseChange: (next: boolean) => void;
     onCopyBaseHex: (key: string, hex: string, event?: MouseEvent) => void;
+    actions?: Snippet;
   }
 
   let {
     label,
     displayLabel = null,
-    neutral = false,
     baseColor,
-    anchorToBase,
-    anchorStepLabel = null,
     isEditingBase,
-    panelOpen,
     pinnedOpen = false,
-    editingColor,
-    editPanelTitle,
     copiedKey,
     onStartEdit,
-    onConfirm,
-    onCancel,
-    onBaseChange,
-    onAnchorToBaseChange,
-    onCopyBaseHex
+    onCopyBaseHex,
+    actions
   }: Props = $props();
 
-  let baseOklch = $derived(baseColor);
   let baseHex = $derived(oklchToHexClamped(baseColor.l, baseColor.c, baseColor.h));
-  let pickerChromaHint = $derived(neutral ? NEUTRAL_CALM_CHROMA : undefined);
 </script>
 
 <div class="editor-top">
@@ -103,42 +67,18 @@
     </div>
   </div>
 
-  {#if pinnedOpen || (isEditingBase && panelOpen && editingColor)}
-    <div class="editor-controls">
-      <ColorEditPanel
-        title={isEditingBase ? editPanelTitle : 'Base Color'}
-        showRemoveOverride={false}
-        hideActions={!isEditingBase}
-        hidePreview
-        hue={baseOklch.h}
-        chroma={baseOklch.c}
-        lightness={baseOklch.l * 100}
-        chromaMax={CHROMA_MAX}
-        chromaHint={pickerChromaHint}
-        onHueChromaChange={onBaseChange}
-        onConfirm={onConfirm}
-        onCancel={onCancel}
-        onRemoveOverride={() => {}}
-        onSliderStart={() => beginSliderGesture(`edit ${label} base`)}
-      >
-        {#snippet actions()}
-          <Toggle
-            checked={anchorToBase}
-            onchange={(v) => onAnchorToBaseChange(v ?? !anchorToBase)}
-            label={anchorStepLabel ? `Base color placed at ${anchorStepLabel}` : 'Place base color in palette'}
-          />
-        {/snippet}
-      </ColorEditPanel>
-    </div>
+  {#if actions}
+    <div class="header-actions">{@render actions()}</div>
   {/if}
 </div>
 
 <style>
-  /* Identity and controls read as one band: the sliders sit beside the swatch
-     rather than under it, which is what leaves the palette below its height. */
+  /* Identity on the left, actions on the right: close and reset sit where a
+     panel's controls are expected, at the top-right of the band they close. */
   .editor-top {
     display: flex;
     align-items: flex-start;
+    justify-content: space-between;
     gap: var(--ui-space-16);
     flex-wrap: wrap;
   }
@@ -157,11 +97,10 @@
     gap: var(--ui-space-2);
   }
 
-  /* Basis, not width: the panel takes the rest of the row and drops below only
-     when it can't hold that much. */
-  .editor-controls {
-    flex: 1 1 26rem;
-    min-width: 0;
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-8);
   }
 
   .header-swatch {

package/src/editor/ui/palette/ScaleCurveEditor.svelte

@@ -1,31 +1,39 @@
 <script lang="ts">
   import BezierCurveEditor from '../BezierCurveEditor.svelte';
-  import type { CurveAnchor, CurveConfig } from '../curveEngine';
+  import { isAutoSmoothCurve, type CurveAnchor, type CurveConfig } from '../curveEngine';
+  import { curveSummary } from './curveSummary';
 
-  
-
-  interface Props {
-    /**
+  /**
    * Single-channel curve editor — one Bezier curve for one channel
-   * (lightness or saturation) of one scale (palette / gray-palette /
+   * (lightness, saturation, or hue) of one scale (palette / gray-palette /
    * Surfaces / Borders / Text). Instantiated 6+ times across PaletteEditor:
    * the parent's chromatic-palette + gray-palette curves and the four
    * derived-scale curve groups inside OverridesPanel.
    *
-   * Pure presentational wrapper: it forwards props to BezierCurveEditor
-   * and adapts the offset key into a single `onOffsetChange(value)` so the
+   * Pure presentational wrapper: it forwards props to BezierCurveEditor and
+   * adapts the offset key into a single `onOffsetChange(value)` so the
    * parent only needs to know how to wire `(key, value)` once (via a
-   * closure passed in).
+   * closure passed in). It also owns the collapsible disclosure chrome
+   * around that editor; the open/closed flag itself is parent state
+   * (session-scoped, never written to theme JSON).
    */
+  interface Props {
     curveKey: string;
     anchors: CurveAnchor[];
     cfg: CurveConfig;
     stepCount: number;
     defaults: CurveAnchor[];
     offset?: number;
+    /** Undefined for a curve saved before the flag existed, or one never toggled;
+     *  its shape answers for it. Only an explicit switch-off needs recording, since
+     *  switching on is self-evident from the shape it produces. */
+    autoSmooth?: boolean;
     lockedAnchorIndex?: number | null;
+    open: boolean;
+    onToggleOpen: () => void;
     onAnchorsChange: (anchors: CurveAnchor[]) => void;
     onOffsetChange: (key: string, value: number) => void;
+    onAutoSmoothChange: (key: string, value: boolean) => void;
     onLockedAnchorUnlock?: (() => void) | null;
   }
 
@@ -36,21 +44,102 @@
     stepCount,
     defaults,
     offset = 0,
+    autoSmooth = undefined,
     lockedAnchorIndex = null,
+    open,
+    onToggleOpen,
     onAnchorsChange,
     onOffsetChange,
+    onAutoSmoothChange,
     onLockedAnchorUnlock = null
   }: Props = $props();
+
+  let summary = $derived(curveSummary(anchors, defaults, offset, cfg.unit ?? ''));
+  let autoSmoothResolved = $derived(autoSmooth ?? isAutoSmoothCurve(anchors));
 </script>
 
-<BezierCurveEditor
-  {anchors}
-  {cfg}
-  {stepCount}
-  defaultAnchors={defaults}
-  {offset}
-  {lockedAnchorIndex}
-  {onLockedAnchorUnlock}
-  {onAnchorsChange}
-  onOffsetChange={(v) => onOffsetChange(curveKey, v)}
-/>
+<div class="curve-section">
+  <button
+    class="curve-section-toggle"
+    type="button"
+    aria-expanded={open}
+    onclick={onToggleOpen}
+  >
+    <i class="fas" class:fa-chevron-right={!open} class:fa-chevron-down={open} aria-hidden="true"></i>
+    <span class="curve-section-label">{cfg.label}</span>
+    <span class="curve-section-summary">
+      {#if summary !== 'default'}<span class="curve-section-dot" aria-hidden="true"></span>{/if}
+      {summary}
+    </span>
+  </button>
+  {#if open}
+    <BezierCurveEditor
+      {anchors}
+      {cfg}
+      {stepCount}
+      defaultAnchors={defaults}
+      {offset}
+      autoSmooth={autoSmoothResolved}
+      {lockedAnchorIndex}
+      {onLockedAnchorUnlock}
+      {onAnchorsChange}
+      onOffsetChange={(v) => onOffsetChange(curveKey, v)}
+      onAutoSmoothChange={(v) => onAutoSmoothChange(curveKey, v)}
+    />
+  {/if}
+</div>
+
+<style>
+  .curve-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+  }
+
+  .curve-section-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    width: 100%;
+    padding: var(--ui-space-4) var(--ui-space-2);
+    background: none;
+    border: none;
+    color: var(--ui-text-tertiary);
+    cursor: pointer;
+    text-align: left;
+    transition: color var(--ui-transition-fast);
+  }
+
+  .curve-section-toggle:hover {
+    color: var(--ui-text-primary);
+  }
+
+  .curve-section-toggle i {
+    font-size: var(--ui-font-size-xs);
+    width: 0.75rem;
+    text-align: center;
+  }
+
+  .curve-section-label {
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+
+  .curve-section-summary {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-4);
+    margin-left: auto;
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-normal);
+    color: var(--ui-text-muted);
+  }
+
+  .curve-section-dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: var(--ui-radius-full);
+    background: var(--ui-text-primary);
+    flex-shrink: 0;
+  }
+</style>

package/src/editor/ui/palette/curveSummary.ts

@@ -0,0 +1,20 @@
+import type { CurveAnchor } from '../curveEngine';
+
+const ANCHOR_KEYS = ['x', 'y', 'inDx', 'inDy', 'outDx', 'outDy'] as const;
+
+function anchorsEqual(a: CurveAnchor[], b: CurveAnchor[]): boolean {
+  return a.length === b.length && a.every((anchor, i) => ANCHOR_KEYS.every((k) => anchor[k] === b[i][k]));
+}
+
+/**
+ * Collapsed-row readout for a curve section. Range rather than first-to-last:
+ * a peak's endpoints can match the defaults' while the middle diverges, and
+ * first-to-last would misstate the peak's range as flat.
+ */
+export function curveSummary(anchors: CurveAnchor[], defaults: CurveAnchor[], offset: number, unit = ''): string {
+  if (offset === 0 && anchorsEqual(anchors, defaults)) return 'default';
+  const ys = anchors.map((a) => a.y);
+  const range = `${Math.round(Math.min(...ys))} to ${Math.round(Math.max(...ys))}${unit}`;
+  const offsetPart = offset !== 0 ? ` offset ${offset > 0 ? '+' : ''}${offset}${unit}` : '';
+  return `${range}${offsetPart}`;
+}

package/src/editor/ui/palette/dockMagnify.ts

@@ -1,22 +1,14 @@
-/**
- * macOS-dock magnification policy for palette ramps, shared by the palette
- * editor's swatch grid and the Colors view's step strips so the falloff tunes
- * in one place. Layout stays native to each surface (grid tracks vs
- * flex-grow); only the size policy is shared.
- */
+/** macOS-dock magnification for the Colors view's step strips. The palette
+ *  editor's own grid stays even, because its curve editors plot one step per
+ *  column. */
 
 const ANCHORED_GROW = 1.7;
 const NEIGHBOUR_GROW = 1.2;
 
-/** Size share for a ramp cell: anchored opens widest, immediate neighbours
- *  get a smaller boost, everything else stays 1. Doubles as a flex-grow. */
+/** Flex-grow for a ramp cell: anchored opens widest, immediate neighbours get a
+ *  smaller boost, everything else stays 1. */
 export function dockGrow(index: number, anchored: number | null): number {
   if (anchored === null) return 1;
   const d = Math.abs(index - anchored);
   return d === 0 ? ANCHORED_GROW : d === 1 ? NEIGHBOUR_GROW : 1;
 }
-
-/** Grid track list (`minmax(0, Nfr)` per column) for a `cols`-column ramp. */
-export function dockTrackTemplate(cols: number, anchored: number | null): string {
-  return Array.from({ length: cols }, (_, i) => `minmax(0, ${dockGrow(i, anchored)}fr)`).join(' ');
-}

package/src/editor/ui/palette/paletteMath.ts

@@ -1,5 +1,5 @@
 import type { Oklch } from '../../core/palettes/oklch';
-import { type CurveAnchor, makeAnchor } from '../curveEngine';
+import { type CurveAnchor, makeAnchor, resmoothAutoCurve } from '../curveEngine';
 import type { PaletteConfig } from '../../core/themes/themeTypes';
 import {
   type Step,
@@ -9,6 +9,7 @@ import {
   PALETTE_STEPS,
   DEFAULT_PALETTE_LIGHTNESS,
   DEFAULT_PALETTE_SATURATION,
+  DEFAULT_PALETTE_HUE,
   defaultScaleCurves,
   scaleCurveDefaults,
   computePaletteOklch,
@@ -33,6 +34,7 @@ export {
   PALETTE_STEPS,
   DEFAULT_PALETTE_LIGHTNESS,
   DEFAULT_PALETTE_SATURATION,
+  DEFAULT_PALETTE_HUE,
   defaultScaleCurves,
   scaleCurveDefaults,
   computePaletteOklch,
@@ -54,11 +56,12 @@ export interface PaletteStepDef {
 }
 
 export type CurveOffset = Record<string, number>;
-export type ScaleCurves = Record<string, { lightness: CurveAnchor[]; saturation: CurveAnchor[] }>;
+export type ScaleCurves = Record<string, { lightness: CurveAnchor[]; saturation: CurveAnchor[]; hue?: CurveAnchor[] }>;
 
 // Neutrals seed a calmer, wider lightness ramp than accents; the saturation
 // curve is the same flat 100 (chroma comes from a low-chroma base, not a cap).
-export const DEFAULT_NEUTRAL_LIGHTNESS = (): CurveAnchor[] => [makeAnchor(0, 92, 5), makeAnchor(100, 3, 5)];
+export const DEFAULT_NEUTRAL_LIGHTNESS = (): CurveAnchor[] =>
+  resmoothAutoCurve([makeAnchor(0, 92), makeAnchor(100, 3)]);
 
 /**
  * Seed config for a palette. The derivation path is unified; the only
@@ -103,7 +106,7 @@ export const paletteStepLightness: PaletteStepDef[] = [
   { label: '950', lightness: 8 },
 ];
 
-export const scaleCurveKey = (scaleTitle: string, channel: 'lightness' | 'saturation') => `${scaleTitle}-${channel}`;
+export const scaleCurveKey = (scaleTitle: string, channel: 'lightness' | 'saturation' | 'hue') => `${scaleTitle}-${channel}`;
 
 interface PaletteComputed {
   oklch: Oklch;