@motion-proto/live-tokens 0.50.0 → 0.53.0

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

@@ -1,31 +1,40 @@
 <script lang="ts">
   import BezierCurveEditor from '../BezierCurveEditor.svelte';
-  import type { CurveAnchor, CurveConfig } from '../curveEngine';
+  import UIReveal from '../UIReveal.svelte';
+  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 +45,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>
+  <UIReveal {open}>
+    <BezierCurveEditor
+      {anchors}
+      {cfg}
+      {stepCount}
+      defaultAnchors={defaults}
+      {offset}
+      autoSmooth={autoSmoothResolved}
+      {lockedAnchorIndex}
+      {onLockedAnchorUnlock}
+      {onAnchorsChange}
+      onOffsetChange={(v) => onOffsetChange(curveKey, v)}
+      onAutoSmoothChange={(v) => onAutoSmoothChange(curveKey, v)}
+    />
+  </UIReveal>
+</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;