@motion-proto/live-tokens 0.93.0 → 0.94.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.94.0 — Tokens-view swatch swap and copy-paste
+
+### Added
+
+- **The Tokens view swaps two palettes' base colors by drag and drop.** Drop
+  one family's header swatch on another's and the two trade seed colors in one
+  undo step. A swap with a functional family leaves any harmony axis on the
+  family that held it, and the axis follows the new hue.
+- **Every Tokens-view swatch copies and pastes its color.** Click a header,
+  palette step, or override swatch open, and ⌘C (Ctrl+C) copies its color as
+  `oklch()` text. ⌘V (Ctrl+V) pastes a hex or `oklch()` color into the open
+  swatch, inside its edit session, so Cancel takes the paste back.
+
+### Fixed
+
+- **Pasting a swatch color needs no clipboard permission.** Paste reads the
+  browser's paste event, so Chrome no longer asks for clipboard access and
+  Safari no longer shows its Paste confirmation before ⌘V lands.
+
 ## 0.93.0 — Swatch swap and copy-paste
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.93.0",
+  "version": "0.94.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/editor/ui/PaletteEditor.svelte

@@ -30,9 +30,16 @@
   import { editorState, mutate, setPaletteConfig, beginSliderGesture, beginScope, commitScope, cancelScope, type Scope } from '../core/store/editorStore';
   // Base-color edits route through the shared setter so a bound harmony axis
   // follows the hue (invariant 1); the local `edit` would silently detach it.
-  import { setBaseColor } from './colors/paletteBaseColor';
+  import { setBaseColor, swapBaseColors } from './colors/paletteBaseColor';
   import { pendingPaletteFocus } from '../core/store/paletteFocus';
   import { showCopyPopover } from './copyPopover';
+  import {
+    activeSwatchFamily,
+    isSwatchCopy,
+    swatchPasteColor,
+    copySwatchColor,
+    showSwatchColor,
+  } from './swatchClipboard';
 
   // 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.
@@ -565,6 +572,29 @@
     if (!panelOpen || isEditingBase || !editingColor) return;
     dock = { title: editPanelTitle, color: editingColor, paletteIndex: editingPaletteIndex };
   });
+  $effect(() => {
+    if (editingKey !== null) activeSwatchFamily.set(label);
+  });
+
+  let ownsClipboard = $derived($activeSwatchFamily === label && editingKey !== null);
+  let openSwatchEl = $derived(rootEl?.querySelector(`[data-swatch-key="${editingKey}"]`) ?? null);
+
+  function onWindowKeydown(e: KeyboardEvent) {
+    if (!ownsClipboard || !isSwatchCopy(e)) return;
+    e.preventDefault();
+    copySwatchColor(editing.kind === 'editingStep' ? editing.draft : baseColor, openSwatchEl);
+  }
+
+  // Paste lands in the open session like a slider edit: Cancel takes it back.
+  function onWindowPaste(e: ClipboardEvent) {
+    const color = ownsClipboard ? swatchPasteColor(e) : null;
+    if (color === null) return;
+    e.preventDefault();
+    if (isEditingBase) setBaseColor(label, color);
+    else handleColorChange(color);
+    showSwatchColor(color, openSwatchEl);
+  }
+
   $effect(() => {
     // Touch each input so the effect tracks them (resnapScales reads indirectly).
     void baseColor;
@@ -595,6 +625,8 @@
   {/if}
 {/snippet}
 
+<svelte:window onkeydown={onWindowKeydown} onpaste={onWindowPaste} />
+
 <div class="palette-editor" bind:this={rootEl} style="--editor-base: {toHex(baseColor)}">
   <PaletteBase
     {label}
@@ -606,6 +638,7 @@
     {copiedKey}
     onStartEdit={startBaseEdit}
     onCopyBaseHex={copyHex}
+    onSwapFrom={(family) => swapBaseColors(family, label)}
   >
     {#snippet setting()}
       <!-- The family's own swatch and name sit alongside, so the label drops
@@ -687,6 +720,7 @@
               class:anchored={ps.anchored}
               title={ps.anchored ? 'Base color' : undefined}
               style="background: {ps.effective}"
+              data-swatch-key={ps.key}
               onclick={() => handlePaletteClick(ps)}
               role="button"
               tabindex="0"

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

@@ -1,9 +1,8 @@
 <script lang="ts">
   import { cubicOut } from 'svelte/easing';
-  import { cssColorToOklch, oklchToCss, oklchToHexClamped } from '../../core/palettes/oklch';
+  import { oklchToHexClamped } from '../../core/palettes/oklch';
   import { PALETTE_SPECS } from '../../core/palettes/paletteDerivation';
   import { editorState, beginSliderGesture } from '../../core/store/editorStore';
-  import { isEditable } from '../../core/store/editorKeybindings';
   import { selectedPalette } from '../../core/store/paletteFocus';
   import { applyHarmonyToAxes, axisStatuses, HARMONY_ELIGIBLE, type HarmonyMode } from '../../core/palettes/colorHarmony';
   import AxisNumeral from './AxisNumeral.svelte';
@@ -14,7 +13,7 @@
   import PaletteStepStrip from './PaletteStepStrip.svelte';
   import HarmonyAxesList from './HarmonyAxesList.svelte';
   import PaletteJumpButton from '../palette/PaletteJumpButton.svelte';
-  import { showCopyPopover } from '../copyPopover';
+  import { isSwatchCopy, swatchPasteColor, copySwatchColor, showSwatchColor } from '../swatchClipboard';
   import {
     setBaseColor,
     setAxisHues,
@@ -157,31 +156,21 @@
   // Copy and paste act on the selected swatch, never the focused one: Safari
   // and macOS Firefox do not focus a button on click.
   function onWindowKeydown(e: KeyboardEvent) {
-    if (!(e.metaKey || e.ctrlKey) || e.shiftKey || e.altKey) return;
-    if (e.target instanceof HTMLElement && isEditable(e.target)) return;
-    const sw = swatches.find((s) => s.label === selected);
-    if (!sw) return;
-    const key = e.key.toLowerCase();
-    if (key === 'c') {
-      // Selected page text keeps the browser's own copy.
-      if (window.getSelection()?.isCollapsed === false) return;
-      e.preventDefault();
-      const css = oklchToCss(sw.color.l, sw.color.c, sw.color.h);
-      navigator.clipboard?.writeText(css);
-      showCopyPopover(css, swatchEls[sw.label]);
-    } else if (key === 'v') {
-      e.preventDefault();
-      pasteInto(sw, swatchEls[sw.label]);
-    }
+    const sw = selectedSwatch;
+    if (!sw || !isSwatchCopy(e)) return;
+    e.preventDefault();
+    copySwatchColor(sw.color, swatchEls[sw.label]);
   }
 
-  async function pasteInto(sw: Swatch, anchor: EventTarget | null) {
-    const color = cssColorToOklch(await navigator.clipboard.readText());
-    if (!color) return;
+  function onWindowPaste(e: ClipboardEvent) {
+    const sw = selectedSwatch;
+    const color = sw ? swatchPasteColor(e) : null;
+    if (!sw || color === null) return;
+    e.preventDefault();
     // A bound color drags its axis along, so an applied harmony no longer holds.
     if (sw.axis && color.h !== sw.color.h) activeMode = 'custom';
     setBaseColor(sw.label, color);
-    showCopyPopover(oklchToCss(color.l, color.c, color.h), anchor);
+    showSwatchColor(color, swatchEls[sw.label]);
   }
 
   let fullPalettes = $derived(palettesWithDefaults($editorState.palettes));
@@ -204,6 +193,8 @@
 
   type Swatch = (typeof swatches)[number];
 
+  let selectedSwatch = $derived(swatches.find((s) => s.label === selected));
+
   const FUNCTIONAL_FAMILIES = new Set(['Info', 'Success', 'Warning', 'Danger']);
   // Declaration order, never a computed one: sorting by luminance made the row
   // reshuffle under the pointer while a lightness edit was in flight.
@@ -229,7 +220,7 @@
   }
 </script>
 
-<svelte:window onkeydown={onWindowKeydown} />
+<svelte:window onkeydown={onWindowKeydown} onpaste={onWindowPaste} />
 
 <div class="colors-tab">
   <div class="pane">

package/src/editor/ui/colors/paletteBaseColor.ts

@@ -19,7 +19,7 @@
 
 import { get } from 'svelte/store';
 import type { Oklch } from '../../core/palettes/oklch';
-import { axisLabel } from '../../core/palettes/colorHarmony';
+import { axisLabel, HARMONY_ELIGIBLE } from '../../core/palettes/colorHarmony';
 import { PALETTE_SPECS, syncBaseAnchor, type PaletteSpec } from '../../core/palettes/paletteDerivation';
 import { defaultPaletteConfig } from '../palette/paletteMath';
 import { mutate, transaction, editorState } from '../../core/store/editorStore';
@@ -208,8 +208,10 @@ function giveAxisHue(s: EditorState, index: number, family: string): boolean {
   return false;
 }
 
-/** Two families trade seed colors. Each axis binding travels with the color it
- *  held, so every axis keeps its hue and an applied harmony stays true. */
+/** Two families trade seed colors. Between two families an axis can hold, each
+ *  binding travels with its color, so every axis keeps its hue and an applied
+ *  harmony stays true. Otherwise a bound family keeps its axis, which follows
+ *  the new hue as it does on any direct color edit. */
 export function swapBaseColors(a: string, b: string): void {
   if (a === b) return;
   mutate(`colors: swap ${a} and ${b}`, (s) => {
@@ -218,9 +220,14 @@ export function swapBaseColors(a: string, b: string): void {
     [ca.baseColor, cb.baseColor] = [cb.baseColor, ca.baseColor];
     syncBaseAnchor(ca);
     syncBaseAnchor(cb);
-    for (const axis of s.harmonyAxes) {
-      if (axis.family === a) axis.family = b;
-      else if (axis.family === b) axis.family = a;
+    if (HARMONY_ELIGIBLE.includes(a) && HARMONY_ELIGIBLE.includes(b)) {
+      for (const axis of s.harmonyAxes) {
+        if (axis.family === a) axis.family = b;
+        else if (axis.family === b) axis.family = a;
+      }
+    } else {
+      syncBoundAxisHue(s, a);
+      syncBoundAxisHue(s, b);
     }
   });
 }

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

@@ -180,6 +180,7 @@
             class:active={editingKey === k}
             class:populated={k in overrides}
             class:matching={k in overrides && overrides[k] === dHex}
+            data-swatch-key={k}
             onclick={() => onOverrideClick(k, step, scale.title)}
             role="button"
             tabindex="0"
@@ -212,6 +213,7 @@
               class:active={editingKey === k || snapPickerKey === k}
               class:populated={k in overrides}
               class:matching={k in overrides && overrides[k] === dHex}
+              data-swatch-key={k}
               onclick={() => snapped ? onSnappedClick(k) : onOverrideClick(k, step, scale.title)}
               role="button"
               tabindex="0"

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

@@ -1,6 +1,14 @@
+<script module lang="ts">
+  // Every family's header reads one drag source, because dataTransfer data is
+  // unreadable during dragover.
+  let swapSource: string | null = null;
+  const SWAP_DRAG_TYPE = 'application/x-palette-family';
+</script>
+
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { oklchToHexClamped, type Oklch } from '../../core/palettes/oklch';
+  import { BASE_KEY } from './paletteEditorState';
 
   interface Props {
     /**
@@ -20,6 +28,8 @@
     copiedKey: string | null;
     onStartEdit: () => void;
     onCopyBaseHex: (key: string, hex: string, event?: MouseEvent) => void;
+    /** Another family's header swatch dropped on this one. */
+    onSwapFrom: (family: string) => void;
     actions?: Snippet;
     /** A family-level setting, shown beside the name while this family's
      *  editor is open. Collapsed families keep the band to identity + actions. */
@@ -36,10 +46,34 @@
     copiedKey,
     onStartEdit,
     onCopyBaseHex,
+    onSwapFrom,
     actions,
     setting
   }: Props = $props();
 
+  let swapHover = $state(false);
+
+  function onDragStart(e: DragEvent) {
+    if (!e.dataTransfer) return;
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData(SWAP_DRAG_TYPE, label);
+    swapSource = label;
+  }
+
+  function onDragOver(e: DragEvent) {
+    if (swapSource === null || swapSource === label) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    swapHover = true;
+  }
+
+  function onDrop(e: DragEvent) {
+    swapHover = false;
+    if (swapSource === null || swapSource === label) return;
+    e.preventDefault();
+    onSwapFrom(swapSource);
+  }
+
   let baseHex = $derived(oklchToHexClamped(baseColor.l, baseColor.c, baseColor.h));
 
   // `pinnedOpen || isEditingBase` is exactly when the base panel shows: editing
@@ -54,11 +88,19 @@
       class="header-swatch"
       class:active={isEditingBase || pinnedOpen}
       class:selected
+      class:swap-target={swapHover}
       style="background: {baseHex}"
+      data-swatch-key={BASE_KEY}
+      draggable="true"
       onclick={onStartEdit}
       role="button"
       tabindex="0"
       onkeydown={(e) => e.key === 'Enter' && onStartEdit()}
+      ondragstart={onDragStart}
+      ondragend={() => (swapSource = null)}
+      ondragover={onDragOver}
+      ondragleave={() => (swapHover = false)}
+      ondrop={onDrop}
     ></div>
     <div class="primary-info">
       <span class="editor-label">{displayLabel ?? label}</span>
@@ -163,6 +205,13 @@
       inset 0 0 0 4px var(--ui-surface-lowest);
   }
 
+  /* About to receive a swap: the axis row's doubled drop ring. */
+  .header-swatch.swap-target {
+    border-color: var(--ui-text-primary);
+    outline: 1px solid var(--ui-text-primary);
+    outline-offset: 1px;
+  }
+
   .editor-label {
     font-size: var(--ui-font-size-xl);
     font-weight: var(--ui-font-weight-semibold);

package/src/editor/ui/swatchClipboard.ts

@@ -0,0 +1,35 @@
+import { writable } from 'svelte/store';
+import { cssColorToOklch, oklchToCss, type Oklch } from '../core/palettes/oklch';
+import { isEditable } from '../core/store/editorKeybindings';
+import { showCopyPopover } from './copyPopover';
+
+/** The Tokens-view family whose swatch opened last. Every family can hold an
+ *  open swatch at once, and copy and paste act on this one alone. */
+export const activeSwatchFamily = writable<string | null>(null);
+
+const inTextField = (e: Event) => e.target instanceof HTMLElement && isEditable(e.target);
+
+/** ⌘C on a swatch view. A text field or selected page text keeps the browser's
+ *  own copy. Copy rides the key rather than the copy event because Safari fires
+ *  no copy event without a text selection. */
+export function isSwatchCopy(e: KeyboardEvent): boolean {
+  if (!(e.metaKey || e.ctrlKey) || e.shiftKey || e.altKey || e.key.toLowerCase() !== 'c') return false;
+  return !inTextField(e) && window.getSelection()?.isCollapsed !== false;
+}
+
+/** The color a paste carries to a swatch, or null when a text field keeps the
+ *  paste or the clipboard holds no hex or `oklch()` color. Paste rides the
+ *  event because its clipboardData needs no read permission. */
+export function swatchPasteColor(e: ClipboardEvent): Oklch | null {
+  if (inTextField(e)) return null;
+  return cssColorToOklch(e.clipboardData?.getData('text/plain') ?? '');
+}
+
+export function showSwatchColor(color: Oklch, anchor: Element | null): void {
+  showCopyPopover(oklchToCss(color.l, color.c, color.h), anchor);
+}
+
+export function copySwatchColor(color: Oklch, anchor: Element | null): void {
+  navigator.clipboard?.writeText(oklchToCss(color.l, color.c, color.h));
+  showSwatchColor(color, anchor);
+}