@motion-proto/live-tokens 0.40.0 → 0.41.0

package/src/editor/ui/colors/HarmonyAxesList.svelte

@@ -0,0 +1,320 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { flip } from 'svelte/animate';
+  import { cubicOut } from 'svelte/easing';
+  import { oklchToHexClamped } from '../../core/palettes/oklch';
+  import { PALETTE_SPECS, type PaletteSpec } from '../../core/palettes/paletteDerivation';
+  import { AXIS_ROLES, modeActiveAxes, type HarmonyMode, HARMONY_ELIGIBLE } from '../../core/palettes/colorHarmony';
+  import { editorState } from '../../core/store/editorStore';
+  import { bindFamilyToAxis, unbindFamily } from './paletteBaseColor';
+
+  interface Props {
+    /** The applied harmony mode: an unbound slot is disabled when the geometry
+     *  deals it no distinct position (complementary enables only the first two). */
+    activeMode: HarmonyMode;
+  }
+
+  let { activeMode }: Props = $props();
+
+  const DRAG_TYPE = 'application/x-harmony-family';
+  // Unbound swatch previews the hue a dropped color would take, at fixed preview
+  // L/C so only the hue reads (Reserved judgment call 4).
+  const PREVIEW_L = 0.65;
+  const PREVIEW_C = 0.12;
+
+  const SPEC_BY_LABEL: Record<string, PaletteSpec> = Object.fromEntries(PALETTE_SPECS.map((s) => [s.label, s]));
+
+  let listEl: HTMLElement | undefined = $state();
+
+  let axes = $derived($editorState.harmonyAxes);
+  let unassigned = $derived(HARMONY_ELIGIBLE.filter((f) => !axes.some((a) => a.family === f)));
+  let axisDisabled = $derived(modeActiveAxes(activeMode).map((active, i) => !active && axes[i].family === null));
+  // Keyboard sequence: the enabled axes then Unassigned.
+  let axisSeq = $derived(axisDisabled.flatMap((disabled, i) => (disabled ? [] : [i])));
+  let positionCount = $derived(axisSeq.length + 1);
+  let lastAxis = $derived(axisSeq[axisSeq.length - 1]);
+
+  function familyHex(family: string): string {
+    const { l, c, h } = $editorState.palettes[family]?.baseColor ?? SPEC_BY_LABEL[family].initialColor;
+    return oklchToHexClamped(l, c, h);
+  }
+
+  // Keep focus on the moved family so keyboard bind/move/unbind chains without
+  // hunting for the row it landed in.
+  async function refocus(family: string) {
+    await tick();
+    listEl?.querySelector<HTMLElement>(`[data-family="${family}"]`)?.focus();
+  }
+
+  function moveFamily(family: string, dir: -1 | 1) {
+    const idx = axes.findIndex((a) => a.family === family);
+    const pos = idx === -1 ? axisSeq.length : axisSeq.indexOf(idx);
+    const target = pos + dir;
+    if (target < 0 || target > axisSeq.length) return;
+    if (target === axisSeq.length) unbindFamily(family);
+    else bindFamilyToAxis(family, axisSeq[target]);
+    refocus(family);
+  }
+
+  function onChipKeydown(e: KeyboardEvent, family: string) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      moveFamily(family, -1);
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      moveFamily(family, 1);
+    } else if (e.key === 'Delete' || e.key === 'Backspace') {
+      e.preventDefault();
+      unbindFamily(family);
+      refocus(family);
+    }
+  }
+
+  let dragTarget = $state<number | 'unassigned' | null>(null);
+
+  function onDragStart(e: DragEvent, family: string) {
+    if (!e.dataTransfer) return;
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData(DRAG_TYPE, family);
+  }
+
+  function onDragOver(e: DragEvent, target: number | 'unassigned') {
+    if (!(e.dataTransfer?.types ?? []).includes(DRAG_TYPE)) return;
+    if (typeof target === 'number' && axisDisabled[target]) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    dragTarget = target;
+  }
+
+  function onDragLeave(target: number | 'unassigned') {
+    if (dragTarget === target) dragTarget = null;
+  }
+
+  function onDrop(e: DragEvent, target: number | 'unassigned') {
+    e.preventDefault();
+    const family = e.dataTransfer?.getData(DRAG_TYPE);
+    dragTarget = null;
+    if (!family) return;
+    if (typeof target === 'number' && axisDisabled[target]) return;
+    // Self-drop is a no-op: the setters early-return when nothing changes.
+    if (target === 'unassigned') unbindFamily(family);
+    else bindFamilyToAxis(family, target);
+  }
+
+  function onDragEnd() {
+    dragTarget = null;
+  }
+</script>
+
+<div class="axes-list" bind:this={listEl}>
+  {#each axes as axis, i (i)}
+    {@const disabled = axisDisabled[i]}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="axis-row"
+      class:disabled
+      class:drop-target={dragTarget === i}
+      aria-disabled={disabled || undefined}
+      ondragover={(e) => onDragOver(e, i)}
+      ondragleave={() => onDragLeave(i)}
+      ondrop={(e) => onDrop(e, i)}
+    >
+      <span class="role"><span class="role-num">{i + 1}.</span> {AXIS_ROLES[i]}</span>
+      {#if axis.family !== null}
+        {@const family = axis.family}
+        <span class="swatch" style="--fill: {familyHex(family)}"></span>
+        <button
+          type="button"
+          class="chip"
+          draggable="true"
+          data-family={family}
+          aria-label={`${family}, ${AXIS_ROLES[i]} axis, position ${i + 1} of ${positionCount}. Arrow up or down to move it, Delete to unbind.`}
+          title="Drag to another axis or to Unassigned. Arrow keys move it, Delete unbinds."
+          ondragstart={(e) => onDragStart(e, family)}
+          ondragend={onDragEnd}
+          onkeydown={(e) => onChipKeydown(e, family)}
+        >
+          <span class="grip" aria-hidden="true">⋮⋮</span>
+          <span class="chip-swatch" style="--fill: {familyHex(family)}"></span>
+          <span class="chip-name">{family}</span>
+        </button>
+      {:else}
+        <span class="swatch preview" style="--fill: {oklchToHexClamped(PREVIEW_L, PREVIEW_C, axis.hue)}"></span>
+        <span class="empty">Empty</span>
+      {/if}
+    </div>
+  {/each}
+
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="unassigned"
+    class:drop-target={dragTarget === 'unassigned'}
+    ondragover={(e) => onDragOver(e, 'unassigned')}
+    ondragleave={() => onDragLeave('unassigned')}
+    ondrop={(e) => onDrop(e, 'unassigned')}
+  >
+    <span class="eyebrow">Unassigned</span>
+    <div class="chips">
+      {#each unassigned as family (family)}
+        <button
+          type="button"
+          class="chip"
+          draggable="true"
+          data-family={family}
+          aria-label={`${family}, unassigned, position ${positionCount} of ${positionCount}. Arrow up to bind it to ${AXIS_ROLES[lastAxis]}.`}
+          title={`Drag onto an axis to bind it. Arrow up binds it to ${AXIS_ROLES[lastAxis]}.`}
+          ondragstart={(e) => onDragStart(e, family)}
+          ondragend={onDragEnd}
+          onkeydown={(e) => onChipKeydown(e, family)}
+          animate:flip={{ duration: 200, easing: cubicOut }}
+        >
+          <span class="grip" aria-hidden="true">⋮⋮</span>
+          <span class="chip-swatch" style="--fill: {familyHex(family)}"></span>
+          <span class="chip-name">{family}</span>
+        </button>
+      {/each}
+      {#if unassigned.length === 0}
+        <span class="empty">Every color is bound to an axis.</span>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .axes-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-6);
+  }
+
+  .axis-row {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-10);
+    padding: var(--ui-space-6) var(--ui-space-8);
+    background: var(--ui-surface-lowest);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-md);
+    font-size: var(--ui-font-size-sm);
+    transition:
+      border-color var(--ui-transition-fast),
+      background var(--ui-transition-fast);
+  }
+
+  .axis-row.drop-target,
+  .unassigned.drop-target {
+    border-color: var(--ui-border-higher);
+    background: var(--ui-surface-low);
+  }
+
+  .role {
+    flex: none;
+    width: 6.5rem;
+    color: var(--ui-text-secondary);
+  }
+
+  .role-num {
+    color: var(--ui-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Disabled slot: the applied geometry deals it no distinct position. The Empty
+     label stays visible; shape + dimming carry the state. */
+  .axis-row.disabled {
+    border-style: dashed;
+    opacity: 0.45;
+  }
+
+  .swatch {
+    flex: none;
+    width: 0.375rem;
+    height: 1.5rem;
+    border-radius: var(--ui-radius-sm);
+    background: var(--fill);
+    border: 1px solid var(--ui-border-low);
+  }
+
+  .swatch.preview {
+    border-style: dashed;
+    opacity: 0.7;
+  }
+
+  .empty {
+    color: var(--ui-text-tertiary);
+    font-size: var(--ui-font-size-sm);
+  }
+
+  .grip {
+    flex: none;
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-xs);
+    line-height: 1;
+    letter-spacing: -0.1em;
+    user-select: none;
+  }
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    padding: var(--ui-space-4) var(--ui-space-8);
+    background: var(--ui-surface-low);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-md);
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-sm);
+    line-height: 1;
+    cursor: grab;
+    user-select: none;
+  }
+
+  .chip:hover {
+    border-color: var(--ui-border-high);
+  }
+
+  .chip:focus-visible {
+    outline: 2px solid var(--ui-border-higher);
+    outline-offset: 2px;
+  }
+
+  .chip:active {
+    cursor: grabbing;
+  }
+
+  .chip-swatch {
+    flex: none;
+    width: 0.85rem;
+    height: 0.85rem;
+    border-radius: var(--ui-radius-sm);
+    background: var(--fill);
+    border: 1px solid var(--ui-border-low);
+  }
+
+  .unassigned {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+    margin-top: var(--ui-space-4);
+    padding: var(--ui-space-8);
+    border: 1px dashed var(--ui-border-low);
+    border-radius: var(--ui-radius-md);
+    transition:
+      border-color var(--ui-transition-fast),
+      background var(--ui-transition-fast);
+  }
+
+  .eyebrow {
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-6);
+    min-height: 1.75rem;
+    align-items: center;
+  }
+</style>

package/src/editor/ui/colors/LightnessBar.svelte

@@ -0,0 +1,261 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { oklchToHex, gamutClamp } from '../../core/palettes/oklch';
+  import { PALETTE_SPECS } from '../../core/palettes/paletteDerivation';
+  import { editorState, beginScope, commitScope, cancelScope, type Scope } from '../../core/store/editorStore';
+  import { maxChroma } from './colorWheelMath';
+  import { setBaseLightnessChroma } from './paletteBaseColor';
+
+  interface Props {
+    selected: string | null;
+    /** Shared with the wheel: off preserves relative saturation as L moves
+     *  (wheel dot holds radius); on preserves absolute chroma (dot drifts,
+     *  desaturates at the L extremes where that chroma leaves gamut). */
+    absoluteChroma: boolean;
+  }
+
+  let { selected, absoluteChroma }: Props = $props();
+
+  const L_STEP = 0.02;
+  const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v));
+
+  let track: HTMLDivElement | undefined = $state();
+  let canvas: HTMLCanvasElement | undefined = $state();
+  let trackWidth = $state(300);
+
+  // The store holds unclamped OKLCH intent, so the thumb, strip, and every write
+  // read straight from it — no gesture-start pinning. A lossless write means the
+  // re-derived value doesn't twitch, which is what let the old workaround go.
+  let selectedColor = $derived.by(() => {
+    const spec = PALETTE_SPECS.find((s) => s.label === selected) ?? PALETTE_SPECS[0];
+    return (selected != null && $editorState.palettes[selected]?.baseColor) || spec.initialColor;
+  });
+
+  let dragScope: Scope | null = null;
+
+  const rFracOf = (l: number, c: number, h: number) => clamp(c / (maxChroma(l, h) || 1e-6), 0, 1);
+
+  let barHue = $derived(selectedColor.h);
+  let barChroma0 = $derived(selectedColor.c);
+  let barRFrac0 = $derived(rFracOf(selectedColor.l, selectedColor.c, selectedColor.h));
+  let renderL = $derived(selectedColor.l);
+
+  $effect(() => {
+    const el = track;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width ?? 0;
+      if (w > 0) trackWidth = Math.round(w);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  });
+
+  // L 0→1 swept at the store hue, gamut-clamped per column for painting.
+  $effect(() => {
+    const cv = canvas;
+    if (!cv) return;
+    const hue = barHue;
+    const mode = absoluteChroma;
+    const chroma0 = barChroma0;
+    const rFrac0 = barRFrac0;
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    const px = Math.max(1, Math.round(trackWidth * dpr));
+    cv.width = px;
+    cv.height = 1;
+    const ctx = cv.getContext('2d');
+    if (ctx) renderStrip(ctx, px, hue, mode, chroma0, rFrac0);
+  });
+
+  // L 0→1 swept left→right at the fixed hue, gamut-clamped per column. Relative:
+  // per-column chroma = rFrac0·maxChroma(L, hue) (constant colorfulness fraction).
+  // Absolute: chroma0 held, clamped inward where it leaves gamut at the extremes.
+  function renderStrip(
+    ctx: CanvasRenderingContext2D,
+    px: number,
+    hue: number,
+    mode: boolean,
+    chroma0: number,
+    rFrac0: number,
+  ) {
+    const img = ctx.createImageData(px, 1);
+    const data = img.data;
+    for (let x = 0; x < px; x++) {
+      const L = px === 1 ? 0.5 : x / (px - 1);
+      const chroma = mode ? chroma0 : rFrac0 * maxChroma(L, hue);
+      const g = gamutClamp(L, chroma, hue);
+      const hex = oklchToHex(g.l, g.c, g.h);
+      const i = x * 4;
+      data[i] = parseInt(hex.slice(1, 3), 16);
+      data[i + 1] = parseInt(hex.slice(3, 5), 16);
+      data[i + 2] = parseInt(hex.slice(5, 7), 16);
+      data[i + 3] = 255;
+    }
+    ctx.putImageData(img, 0, 0);
+  }
+
+  function lFromEvent(e: PointerEvent): number {
+    const r = track!.getBoundingClientRect();
+    return clamp((e.clientX - r.left) / r.width, 0, 1);
+  }
+
+  function startDrag(e: PointerEvent) {
+    if (e.button !== 0 || selected == null) return;
+    e.preventDefault();
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    dragScope = beginScope({ label: `colors: ${selected} lightness`, collapseToOne: true, clipUndoFloor: true });
+    window.addEventListener('keydown', onGestureKey, true);
+    applyDrag(e);
+  }
+
+  function applyDrag(e: PointerEvent) {
+    if (!dragScope || selected == null) return;
+    const L = lFromEvent(e);
+    const sc = selectedColor;
+    const chroma = absoluteChroma ? sc.c : rFracOf(sc.l, sc.c, sc.h) * maxChroma(L, sc.h);
+    setBaseLightnessChroma(selected, L, chroma);
+  }
+
+  function endDrag() {
+    if (!dragScope) return;
+    commitScope(dragScope);
+    dragScope = null;
+    window.removeEventListener('keydown', onGestureKey, true);
+  }
+
+  function onGestureKey(e: KeyboardEvent) {
+    if (e.key !== 'Escape' || !dragScope) return;
+    e.preventDefault();
+    cancelScope(dragScope);
+    dragScope = null;
+    window.removeEventListener('keydown', onGestureKey, true);
+  }
+
+  // Discrete keyboard nudge — one store mutation = one undo (no scope).
+  function thumbKey(e: KeyboardEvent) {
+    if (selected == null) return;
+    let dir = 0;
+    if (e.key === 'ArrowLeft') dir = -1;
+    else if (e.key === 'ArrowRight') dir = 1;
+    else return;
+    e.preventDefault();
+    const sc = selectedColor;
+    const newL = clamp(sc.l + dir * L_STEP, 0, 1);
+    const chroma = absoluteChroma ? sc.c : rFracOf(sc.l, sc.c, sc.h) * maxChroma(newL, sc.h);
+    setBaseLightnessChroma(selected, newL, chroma);
+  }
+
+  onDestroy(() => {
+    if (dragScope) {
+      cancelScope(dragScope);
+      dragScope = null;
+    }
+    if (typeof window !== 'undefined') window.removeEventListener('keydown', onGestureKey, true);
+  });
+</script>
+
+<div class="lightness">
+  <div class="lightness-head">
+    <span class="lightness-label">Lightness</span>
+    <span class="lightness-value">{Math.round(renderL * 100)}%</span>
+  </div>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="lbar"
+    bind:this={track}
+    onpointerdown={startDrag}
+    onpointermove={applyDrag}
+    onpointerup={endDrag}
+    onpointercancel={endDrag}
+    onlostpointercapture={endDrag}
+  >
+    <canvas class="lbar-strip" bind:this={canvas} aria-hidden="true"></canvas>
+    <button
+      type="button"
+      class="lbar-thumb"
+      style="left: {renderL * 100}%"
+      role="slider"
+      aria-label={`Lightness${selected ? ` — ${selected}` : ''}`}
+      aria-valuemin="0"
+      aria-valuemax="100"
+      aria-valuenow={Math.round(renderL * 100)}
+      title="Drag to set lightness"
+      onkeydown={thumbKey}
+    ></button>
+  </div>
+</div>
+
+<style>
+  .lightness {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-6);
+  }
+
+  .lightness-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+
+  .lightness-label {
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .lightness-value {
+    font-size: var(--ui-font-size-sm);
+    font-family: var(--ui-font-mono);
+    color: var(--ui-text-secondary);
+  }
+
+  .lbar {
+    position: relative;
+    width: 100%;
+    height: 1.75rem;
+    border-radius: var(--ui-radius-md);
+    border: 1px solid var(--ui-border-low);
+    touch-action: none;
+    cursor: pointer;
+  }
+
+  /* The only element carrying real colour — the swept-L gradient. Rounded to
+     the frame instead of clipping the parent, so the taller thumb can overhang
+     the bar at the L extremes without being cut off. */
+  .lbar-strip {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    border-radius: var(--ui-radius-md);
+  }
+
+  /* Greyscale thumb chrome — a stem slightly taller than the bar. */
+  .lbar-thumb {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 0.6rem;
+    height: calc(100% + 0.5rem);
+    padding: 0;
+    border-radius: var(--ui-radius-sm);
+    background: var(--ui-surface-low);
+    border: 2px solid var(--ui-text-primary);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .lbar-thumb:active {
+    cursor: grabbing;
+  }
+
+  .lbar-thumb:focus-visible {
+    outline: 2px solid var(--ui-border-higher);
+    outline-offset: 2px;
+  }
+</style>