@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/ui/palette/ScaleCurveEditor.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import BezierCurveEditor from '../BezierCurveEditor.svelte';
+  import type { CurveAnchor, CurveConfig } from '../curveEngine';
+
+  /**
+   * Single-channel curve editor — one Bezier curve for one channel
+   * (lightness or saturation) 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
+   * parent only needs to know how to wire `(key, value)` once (via a
+   * closure passed in).
+   */
+
+  export let curveKey: string;
+  export let anchors: CurveAnchor[];
+  export let cfg: CurveConfig;
+  export let stepCount: number;
+  export let defaults: CurveAnchor[];
+  export let offset: number = 0;
+  export let lockedAnchorIndex: number | null = null;
+  export let onAnchorsChange: (anchors: CurveAnchor[]) => void;
+  export let onOffsetChange: (key: string, value: number) => void;
+</script>
+
+<BezierCurveEditor
+  {anchors}
+  {cfg}
+  {stepCount}
+  defaultAnchors={defaults}
+  {offset}
+  {lockedAnchorIndex}
+  {onAnchorsChange}
+  onOffsetChange={(v) => onOffsetChange(curveKey, v)}
+/>

package/src/ui/palette/paletteEditorState.ts

@@ -0,0 +1,89 @@
+/**
+ * Editing-state machine for the PaletteEditor.
+ *
+ * Replaces five independent `let` decls (`editingKey`, `editingSnapshot`,
+ * `editingDraft`, `snapshotTintHue`, `snapshotTintChroma`) with a single
+ * discriminated union. The type-checker now enforces field validity per
+ * mode — e.g. `snapshotTintHue` only exists when `kind === 'editingBase'`,
+ * making it impossible to leak the gray-mode tint snapshot into a
+ * step-edit cancel path.
+ *
+ * Modes:
+ * - `idle` — no edit panel open.
+ * - `editingBase` — header swatch is active; the user is dragging the
+ *   base hex (chromatic) or tint hue/chroma (gray). Snapshot is the
+ *   original hex used to render the swatch; the tint snapshots are only
+ *   relevant in gray mode and are nullable.
+ * - `editingStep` — a non-base swatch is active (palette / gray-step /
+ *   derived-scale step / override slot). `stepKey` is the dot-keyed
+ *   identifier; `snapshot` is the value at panel-open; `draft` is the
+ *   live working colour (drives the swatch preview before commit).
+ *
+ * Locked-anchor state (`lockedLightnessIdx`, `lockedSaturationIdx`) and
+ * the per-toggle injected flags (`injectedLightness`, `injectedSaturation`)
+ * remain separate `let` decls in the parent because they are anchor-
+ * management state, not edit-session state — they persist across
+ * idle/edit transitions and have their own lifecycle tied to
+ * `setAnchorToBase()`. Folding them into this union (per the audit's
+ * `editingScale` sketch) would conflate two orthogonal axes; the audit's
+ * "scale" mode does not correspond to a user-visible state since curve
+ * edits don't open a panel.
+ */
+
+import type { Scope } from '../../lib/editorStore';
+
+/** Sentinel key for the base swatch (used as `editingKey === BASE_KEY`). */
+export const BASE_KEY = '__base__';
+
+export type EditingState =
+  | { kind: 'idle' }
+  | {
+      kind: 'editingBase';
+      snapshotHex: string;
+      snapshotTintHue: number | null;
+      snapshotTintChroma: number | null;
+    }
+  | {
+      kind: 'editingStep';
+      stepKey: string;
+      snapshot: string;
+      draft: string;
+    };
+
+export const idleState: EditingState = { kind: 'idle' };
+
+export function isIdle(s: EditingState): s is { kind: 'idle' } {
+  return s.kind === 'idle';
+}
+
+export function isEditingBase(s: EditingState): s is Extract<EditingState, { kind: 'editingBase' }> {
+  return s.kind === 'editingBase';
+}
+
+export function isEditingStep(s: EditingState): s is Extract<EditingState, { kind: 'editingStep' }> {
+  return s.kind === 'editingStep';
+}
+
+/**
+ * The currently-active edit key, or null when idle. `editingBase` returns
+ * the BASE_KEY sentinel so call sites that compare against `editingKey`
+ * (e.g. `editingKey === stepKey('Surfaces', 'low')`) keep working.
+ */
+export function activeKey(s: EditingState): string | null {
+  if (s.kind === 'idle') return null;
+  if (s.kind === 'editingBase') return BASE_KEY;
+  return s.stepKey;
+}
+
+/** The current draft hex (for editingStep) or null. Editingbase draws from baseColor/gray500Hex directly. */
+export function activeDraft(s: EditingState): string | null {
+  return s.kind === 'editingStep' ? s.draft : null;
+}
+
+/** Aggregate session handle: holds the `Scope` returned by `beginScope` so confirmEdit/cancelEdit can commit/cancel. */
+export interface PaletteEditSession {
+  state: EditingState;
+  scope: Scope | null;
+}
+
+export const idleSession: PaletteEditSession = { state: idleState, scope: null };

package/src/ui/sections/ColumnsSection.svelte

@@ -0,0 +1,273 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { editorState, mutate, beginSliderGesture } from '../../lib/editorStore';
+  import type { ColumnsState } from '../../lib/editorTypes';
+
+  function clampNum(v: number, lo: number, hi: number): number {
+    return Math.max(lo, Math.min(hi, Math.round(v)));
+  }
+
+  function setColumnsCount(n: number) {
+    mutate('set columns count', (s) => { s.columns.count = clampNum(n, 1, 24); });
+  }
+  function setColumnsMaxWidth(px: number) {
+    mutate('set columns max-width', (s) => { s.columns.maxWidth = clampNum(px, 320, 2560); });
+  }
+  function setColumnsGutter(px: number) {
+    mutate('set columns gutter', (s) => { s.columns.gutter = clampNum(px, 0, 200); });
+  }
+  function setColumnsMargin(px: number) {
+    mutate('set columns margin', (s) => { s.columns.margin = clampNum(px, 0, 400); });
+  }
+
+  let initialColumns: ColumnsState | null = null;
+
+  onMount(() => {
+    initialColumns = { ...$editorState.columns };
+  });
+
+  function resetColumns() {
+    if (!initialColumns) return;
+    const snapshot = initialColumns;
+    mutate('reset columns', (s) => { s.columns = { ...snapshot }; });
+  }
+</script>
+
+<section class="section" id="columns">
+  <h2 class="section-title">Columns</h2>
+  <p class="columns-intro">
+    Layout grid for page content. Toggle the live overlay from the editor bar's
+    <i class="fas fa-grip-lines-vertical"></i> button to visualize.
+  </p>
+
+  <div class="columns-controls">
+    <div class="global-shadow-row">
+      <span class="shadow-slider-label" title="Number of columns">Cols</span>
+      <input type="range" min="1" max="24" value={$editorState.columns.count}
+        on:pointerdown={() => beginSliderGesture('drag columns count')}
+        on:input={(e) => setColumnsCount(+e.currentTarget.value)} />
+      <input class="shadow-slider-input" type="number" min="1" max="24"
+        value={$editorState.columns.count}
+        on:change={(e) => setColumnsCount(+e.currentTarget.value)} />
+      <span class="shadow-slider-unit"></span>
+    </div>
+    <div class="global-shadow-row">
+      <span class="shadow-slider-label" title="Maximum content width">Max-Width</span>
+      <input type="range" min="480" max="2560" step="10" value={$editorState.columns.maxWidth}
+        on:pointerdown={() => beginSliderGesture('drag columns max-width')}
+        on:input={(e) => setColumnsMaxWidth(+e.currentTarget.value)} />
+      <input class="shadow-slider-input columns-input-wide" type="number" min="320" max="2560"
+        value={$editorState.columns.maxWidth}
+        on:change={(e) => setColumnsMaxWidth(+e.currentTarget.value)} />
+      <span class="shadow-slider-unit">px</span>
+    </div>
+    <div class="global-shadow-row">
+      <span class="shadow-slider-label" title="Space between columns">Gutter</span>
+      <input type="range" min="0" max="80" value={$editorState.columns.gutter}
+        on:pointerdown={() => beginSliderGesture('drag columns gutter')}
+        on:input={(e) => setColumnsGutter(+e.currentTarget.value)} />
+      <input class="shadow-slider-input" type="number" min="0" max="200"
+        value={$editorState.columns.gutter}
+        on:change={(e) => setColumnsGutter(+e.currentTarget.value)} />
+      <span class="shadow-slider-unit">px</span>
+    </div>
+    <div class="global-shadow-row">
+      <span class="shadow-slider-label" title="Outer page margin (side gutters)">Margin</span>
+      <input type="range" min="0" max="200" value={$editorState.columns.margin}
+        on:pointerdown={() => beginSliderGesture('drag columns margin')}
+        on:input={(e) => setColumnsMargin(+e.currentTarget.value)} />
+      <input class="shadow-slider-input columns-input-wide" type="number" min="0" max="400"
+        value={$editorState.columns.margin}
+        on:change={(e) => setColumnsMargin(+e.currentTarget.value)} />
+      <span class="shadow-slider-unit">px</span>
+    </div>
+
+    <div class="columns-controls-footer">
+      <button class="columns-reset" on:click={resetColumns} title="Restore values from when this editor session opened">
+        <i class="fas fa-rotate-left"></i>
+        Reset to initial
+      </button>
+    </div>
+  </div>
+
+  <div class="columns-preview">
+    <div
+      class="columns-preview-inner"
+      style="gap: {$editorState.columns.gutter}px; padding-inline: {$editorState.columns.margin}px; grid-template-columns: repeat({$editorState.columns.count}, 1fr);"
+    >
+      {#each Array($editorState.columns.count) as _, i}
+        <div class="columns-preview-col"><span>{i + 1}</span></div>
+      {/each}
+    </div>
+  </div>
+</section>
+
+<style>
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-16);
+  }
+
+  .section-title {
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-primary);
+    margin: 0;
+    padding-bottom: var(--ui-space-8);
+    border-bottom: 1px solid var(--ui-border-subtle);
+  }
+
+  .columns-intro {
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-muted);
+    margin: 0;
+    line-height: var(--ui-line-height-relaxed);
+  }
+
+  .columns-intro i {
+    margin-inline: 2px;
+    color: var(--ui-text-tertiary);
+  }
+
+  .columns-controls {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-12) var(--ui-space-16);
+    background: var(--ui-surface-low);
+    border: 1px solid var(--ui-border-faint);
+    border-radius: var(--ui-radius-md);
+  }
+
+  .columns-controls .shadow-slider-label {
+    width: 5rem;
+    text-align: left;
+  }
+
+  .columns-input-wide {
+    width: 3.5rem;
+  }
+
+  .columns-controls-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: var(--ui-space-8);
+    margin-top: var(--ui-space-4);
+    border-top: 1px solid var(--ui-border-faint);
+  }
+
+  .columns-reset {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    padding: var(--ui-space-4) var(--ui-space-10);
+    background: transparent;
+    border: 1px solid var(--ui-border-subtle);
+    border-radius: var(--ui-radius-md);
+    color: var(--ui-text-tertiary);
+    font-family: inherit;
+    font-size: var(--ui-font-size-xs);
+    cursor: pointer;
+    transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
+  }
+
+  .columns-reset:hover {
+    color: var(--ui-text-primary);
+    border-color: var(--ui-border-medium);
+  }
+
+  .columns-reset i {
+    font-size: 10px;
+  }
+
+  .columns-preview {
+    background: var(--ui-surface-lowest);
+    border: 1px solid var(--ui-border-faint);
+    border-radius: var(--ui-radius-md);
+    padding: var(--ui-space-12) 0;
+    overflow: hidden;
+  }
+
+  .columns-preview-inner {
+    display: grid;
+    min-height: 64px;
+  }
+
+  .columns-preview-col {
+    background: rgba(239, 68, 68, 0.08);
+    border-left: 1px dashed rgba(239, 68, 68, 0.3);
+    border-right: 1px dashed rgba(239, 68, 68, 0.3);
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    min-height: 48px;
+  }
+
+  .columns-preview-col span {
+    font-family: var(--ui-font-mono);
+    font-size: 9px;
+    color: var(--ui-text-muted);
+    padding-top: 4px;
+  }
+
+  /* Slider rows shared with VariablesTab — duplicated locally so this section
+     is self-contained. Same names used because the hidden inputs/units are
+     positioned with the same flex layout as elsewhere in VariablesTab. */
+  .global-shadow-row {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+  }
+
+  .global-shadow-row input[type="range"] {
+    flex: 1;
+    min-width: 4rem;
+    accent-color: var(--ui-text-accent);
+    height: 4px;
+    cursor: pointer;
+  }
+
+  .shadow-slider-label {
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-tertiary);
+    width: 4rem;
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  .shadow-slider-input {
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-primary);
+    font-family: var(--ui-font-mono);
+    width: 2.5rem;
+    text-align: right;
+    flex-shrink: 0;
+    background: var(--ui-surface-lowest);
+    border: 1px solid var(--ui-border-subtle);
+    border-radius: var(--ui-radius-sm);
+    padding: var(--ui-space-2) var(--ui-space-4);
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  .shadow-slider-input::-webkit-inner-spin-button,
+  .shadow-slider-input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .shadow-slider-input:focus {
+    outline: none;
+    border-color: var(--ui-border-medium);
+  }
+
+  .shadow-slider-unit {
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-muted);
+    font-family: var(--ui-font-mono);
+    width: 1rem;
+    flex-shrink: 0;
+  }
+</style>

package/src/ui/sections/GradientsSection.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  /**
+   * Gradient tokens UI lifted from VariablesTab.
+   *
+   * Reads token list from $editorState.gradients; each stop references a
+   * color token, so palette edits flow through. Heavy lifting (stop drag,
+   * direction, kind switch) lives in <GradientEditor>; this section is a
+   * thin grid that toggles which gradient is being edited.
+   */
+  import { createEventDispatcher } from 'svelte';
+  import { editorState } from '../../lib/editorStore';
+  import GradientEditor from '../GradientEditor.svelte';
+
+  export let copiedVar: string | null = null;
+
+  const dispatch = createEventDispatcher<{ copy: string }>();
+  function copy(v: string) { dispatch('copy', v); }
+
+  let editingGradient: string | null = null;
+</script>
+
+<section class="section" id="gradients">
+  <h2 class="section-title">Gradients</h2>
+  <p class="editor-intro">Each stop references a color token, so palette edits flow through. Add or remove stops; switch between linear and radial.</p>
+  <div class="gradients-grid">
+    {#each $editorState.gradients.tokens as token (token.variable)}
+      {@const isEditing = editingGradient === token.variable}
+      <div class="gradient-item" class:active={isEditing}>
+        {#if !isEditing}
+          <div class="gradient-box" style="background: var({token.variable});"></div>
+        {/if}
+        <div class="token-info">
+          <button class="token-variable copyable" class:copied={copiedVar === token.variable} on:click={() => copy(token.variable)}>{copiedVar === token.variable ? 'copied!' : token.variable}</button>
+          {#if !isEditing}
+            <button class="gradient-edit-btn" on:click={() => editingGradient = token.variable}>Edit</button>
+          {/if}
+        </div>
+        {#if isEditing}
+          <div class="gradient-editor-host">
+            <GradientEditor
+              variable={token.variable}
+              on:save={() => editingGradient = null}
+              on:cancel={() => editingGradient = null}
+            />
+          </div>
+        {/if}
+      </div>
+    {/each}
+  </div>
+</section>
+
+<style>
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-16);
+  }
+
+  .section-title {
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-primary);
+    margin: 0;
+    padding-bottom: var(--ui-space-8);
+    border-bottom: 1px solid var(--ui-border-subtle);
+  }
+
+  .editor-intro {
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-tertiary);
+    margin: 0;
+  }
+
+  .token-variable.copyable {
+    all: unset;
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-tertiary);
+    font-family: var(--ui-font-mono);
+    cursor: pointer;
+    transition: color var(--ui-transition-fast);
+  }
+
+  .token-variable.copyable:hover {
+    color: var(--ui-text-accent);
+  }
+
+  .token-variable.copyable.copied {
+    color: var(--ui-text-success);
+  }
+
+  /* Gradients */
+  .gradients-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
+    gap: var(--ui-space-16);
+  }
+
+  .gradient-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-12);
+    border: 1px solid var(--ui-border-faint);
+    border-radius: var(--ui-radius-lg);
+    background: var(--ui-surface-lowest);
+    min-width: 0;
+  }
+
+  .gradient-item.active {
+    grid-column: 1 / -1;
+    border-color: var(--ui-text-primary);
+  }
+
+  .gradient-item .token-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ui-space-8);
+  }
+
+  .gradient-edit-btn {
+    padding: var(--ui-space-2) var(--ui-space-10);
+    background: var(--ui-surface-low);
+    border: 1px solid var(--ui-border-faint);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-xs);
+    cursor: pointer;
+    font-family: inherit;
+  }
+
+  .gradient-edit-btn:hover {
+    color: var(--ui-text-primary);
+    border-color: var(--ui-border-default);
+  }
+
+  .gradient-editor-host {
+    margin-top: var(--ui-space-8);
+    padding-top: var(--ui-space-12);
+    border-top: 1px dashed var(--ui-border-faint);
+  }
+
+  .gradient-box {
+    height: 3rem;
+    border-radius: var(--ui-radius-md);
+  }
+</style>