@motion-proto/live-tokens 0.92.0 → 0.94.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # 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
+
+- **The Colors view swaps two main colors by drag and drop.** Drop one swatch
+  of the main row on another and the two families trade seed colors in one
+  undo step. A harmony axis follows the color it held, so every axis keeps
+  its hue and an applied harmony stays true.
+- **Every swatch copies and pastes its color.** ⌘C (Ctrl+C) copies the
+  selected swatch's seed as `oklch()` text, and ⌘V (Ctrl+V) sets the selected
+  swatch's seed from a hex or `oklch()` color on the clipboard.
+
+### Fixed
+
+- **The type-scales migration derives an aliased size's tablet and phone
+  sizes from the alias.** A step size that aliases a primitive, such as
+  `--body-sm-font-size: var(--font-size-md)`, kept the scale's tablet and
+  phone sizes, so a 16px body sm fell to 14.6px on tablets. The migration now
+  resolves the alias through the file's top-level declarations and applies
+  the editor's rule for an edited size, so body sm holds 16px. A size it
+  cannot resolve, such as a `calc()`, keeps the scale's sizes.
+- **The type-scales migration carries a step the project declared by hand.**
+  A step 0.91.2 did not ship, such as a project's own
+  `--heading-2xl-font-size: 1.75rem`, kept that value in its `-font-size`
+  while the 768px and 480px blocks re-pointed it at the scale's tablet and
+  phone sizes. The migration now moves the value into the step's desktop size,
+  points `-font-size` at it, and derives the tablet and phone sizes by the
+  editor's rule.
+- A `tokens.css` that already ran the 0.92.0 migration never runs it again, so
+  these fixes reach projects that upgrade from 0.91 after this release.
+
 ## 0.92.0 — Type scales for text styles
 
 ### Changed (breaking)

package/dist-plugin/{chunk-JOSSYGR2.js → chunk-7XSUHJUH.js}

@@ -825,6 +825,18 @@ function literalRem(size) {
   if (!m) return null;
   return m[2] === "rem" ? Number(m[1]) : Number(m[1]) / 16;
 }
+var ALIAS = /^var\(\s*(--[a-z0-9-]+)\s*\)$/i;
+function resolvedRem(size, values) {
+  const seen = /* @__PURE__ */ new Set();
+  let value = size.trim();
+  for (let ref = ALIAS.exec(value); ref; ref = ALIAS.exec(value)) {
+    const next = values.get(ref[1]);
+    if (next === void 0 || seen.has(ref[1])) return null;
+    seen.add(ref[1]);
+    value = next.trim();
+  }
+  return literalRem(value);
+}
 function editedSizes(prefix, rem) {
   const count = String(Number(rem.toFixed(4)));
   return COMPRESSED_VIEWPORTS.map((viewport) => ({
@@ -1453,6 +1465,12 @@ var DECLARED = new Map(
   USAGES.flatMap((u) => u.steps.flatMap((s) => s.entries)).concat(EYEBROW).map((e) => [e.name, e.value])
 );
 var TYPE_PRIMITIVES = ["--letter-spacing-", "--line-height-", "--font-weight-", "--font-size-", "--font-"];
+var CARRIED_PREFIXES = new Set(CARRIED.map((step) => step.prefix));
+function handDeclaredSteps(values) {
+  return USAGES.flatMap((u) => u.steps).filter(
+    ({ prefix }) => !CARRIED_PREFIXES.has(prefix) && values.has(`${prefix}-font-size`) && !values.has(`${prefix}-desktop-font-size`)
+  ).map(({ prefix }) => ({ prefix, links: [] }));
+}
 var tokensCssMigration_2026_10_08_typeScales = {
   id: "2026-10-08-type-scales",
   kind: "breaking",
@@ -1461,12 +1479,12 @@ var tokensCssMigration_2026_10_08_typeScales = {
     let out = css;
     for (const [from, to] of RENAMES3) out = renameToken(out, from, to);
     const values = collectTokenValues(out);
-    for (const step of CARRIED) {
+    for (const step of [...CARRIED, ...handDeclaredSteps(values)]) {
       const size = values.get(`${step.prefix}-font-size`);
       if (size === void 0) continue;
       const desktop = `${step.prefix}-desktop-font-size`;
       const edited = size !== step.size;
-      const rem = edited ? literalRem(size) : null;
+      const rem = edited ? resolvedRem(size, values) : null;
       out = ensureScale(out, {
         anchorPrefixes: [`${step.prefix}-font-family`, `${step.prefix}-`],
         entries: [

package/dist-plugin/index.cjs

@@ -4259,6 +4259,18 @@ function literalRem(size) {
   if (!m) return null;
   return m[2] === "rem" ? Number(m[1]) : Number(m[1]) / 16;
 }
+var ALIAS = /^var\(\s*(--[a-z0-9-]+)\s*\)$/i;
+function resolvedRem(size, values) {
+  const seen = /* @__PURE__ */ new Set();
+  let value = size.trim();
+  for (let ref2 = ALIAS.exec(value); ref2; ref2 = ALIAS.exec(value)) {
+    const next = values.get(ref2[1]);
+    if (next === void 0 || seen.has(ref2[1])) return null;
+    seen.add(ref2[1]);
+    value = next.trim();
+  }
+  return literalRem(value);
+}
 function editedSizes(prefix, rem) {
   const count = String(Number(rem.toFixed(4)));
   return COMPRESSED_VIEWPORTS.map((viewport) => ({
@@ -4887,6 +4899,12 @@ var DECLARED = new Map(
   USAGES.flatMap((u) => u.steps.flatMap((s) => s.entries)).concat(EYEBROW).map((e) => [e.name, e.value])
 );
 var TYPE_PRIMITIVES = ["--letter-spacing-", "--line-height-", "--font-weight-", "--font-size-", "--font-"];
+var CARRIED_PREFIXES = new Set(CARRIED.map((step) => step.prefix));
+function handDeclaredSteps(values) {
+  return USAGES.flatMap((u) => u.steps).filter(
+    ({ prefix }) => !CARRIED_PREFIXES.has(prefix) && values.has(`${prefix}-font-size`) && !values.has(`${prefix}-desktop-font-size`)
+  ).map(({ prefix }) => ({ prefix, links: [] }));
+}
 var tokensCssMigration_2026_10_08_typeScales = {
   id: "2026-10-08-type-scales",
   kind: "breaking",
@@ -4895,12 +4913,12 @@ var tokensCssMigration_2026_10_08_typeScales = {
     let out = css;
     for (const [from, to] of RENAMES14) out = renameToken2(out, from, to);
     const values = collectTokenValues(out);
-    for (const step of CARRIED) {
+    for (const step of [...CARRIED, ...handDeclaredSteps(values)]) {
       const size = values.get(`${step.prefix}-font-size`);
       if (size === void 0) continue;
       const desktop = `${step.prefix}-desktop-font-size`;
       const edited = size !== step.size;
-      const rem = edited ? literalRem(size) : null;
+      const rem = edited ? resolvedRem(size, values) : null;
       out = ensureScale(out, {
         anchorPrefixes: [`${step.prefix}-font-family`, `${step.prefix}-`],
         entries: [

package/dist-plugin/index.js

@@ -23,7 +23,7 @@ import {
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-JOSSYGR2.js";
+} from "./chunk-7XSUHJUH.js";
 import {
   hexToOklch,
   oklchToRgb255,

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -914,6 +914,18 @@ function literalRem(size) {
   if (!m) return null;
   return m[2] === "rem" ? Number(m[1]) : Number(m[1]) / 16;
 }
+var ALIAS = /^var\(\s*(--[a-z0-9-]+)\s*\)$/i;
+function resolvedRem(size, values) {
+  const seen = /* @__PURE__ */ new Set();
+  let value = size.trim();
+  for (let ref = ALIAS.exec(value); ref; ref = ALIAS.exec(value)) {
+    const next = values.get(ref[1]);
+    if (next === void 0 || seen.has(ref[1])) return null;
+    seen.add(ref[1]);
+    value = next.trim();
+  }
+  return literalRem(value);
+}
 function editedSizes(prefix, rem) {
   const count = String(Number(rem.toFixed(4)));
   return COMPRESSED_VIEWPORTS.map((viewport) => ({
@@ -1542,6 +1554,12 @@ var DECLARED = new Map(
   USAGES.flatMap((u) => u.steps.flatMap((s) => s.entries)).concat(EYEBROW).map((e) => [e.name, e.value])
 );
 var TYPE_PRIMITIVES = ["--letter-spacing-", "--line-height-", "--font-weight-", "--font-size-", "--font-"];
+var CARRIED_PREFIXES = new Set(CARRIED.map((step) => step.prefix));
+function handDeclaredSteps(values) {
+  return USAGES.flatMap((u) => u.steps).filter(
+    ({ prefix }) => !CARRIED_PREFIXES.has(prefix) && values.has(`${prefix}-font-size`) && !values.has(`${prefix}-desktop-font-size`)
+  ).map(({ prefix }) => ({ prefix, links: [] }));
+}
 var tokensCssMigration_2026_10_08_typeScales = {
   id: "2026-10-08-type-scales",
   kind: "breaking",
@@ -1550,12 +1568,12 @@ var tokensCssMigration_2026_10_08_typeScales = {
     let out = css;
     for (const [from, to] of RENAMES3) out = renameToken(out, from, to);
     const values = collectTokenValues(out);
-    for (const step of CARRIED) {
+    for (const step of [...CARRIED, ...handDeclaredSteps(values)]) {
       const size = values.get(`${step.prefix}-font-size`);
       if (size === void 0) continue;
       const desktop = `${step.prefix}-desktop-font-size`;
       const edited = size !== step.size;
-      const rem = edited ? literalRem(size) : null;
+      const rem = edited ? resolvedRem(size, values) : null;
       out = ensureScale(out, {
         anchorPrefixes: [`${step.prefix}-font-family`, `${step.prefix}-`],
         entries: [

package/dist-plugin/tokensCssMigrations/index.js

@@ -15,7 +15,7 @@ import {
   semverBumpType,
   setTokenValue,
   validateTokensCss
-} from "../chunk-JOSSYGR2.js";
+} from "../chunk-7XSUHJUH.js";
 import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig

package/package.json

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

package/src/editor/core/store/editorKeybindings.ts

@@ -41,7 +41,7 @@ const TEXT_INPUT_TYPES = new Set([
   'date', 'datetime-local', 'month', 'time', 'week',
 ]);
 
-function isEditable(el: HTMLElement): boolean {
+export function isEditable(el: HTMLElement): boolean {
   const tag = el.tagName;
   if (tag === 'TEXTAREA') return true;
   if (tag === 'INPUT') {

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

@@ -13,10 +13,12 @@
   import PaletteStepStrip from './PaletteStepStrip.svelte';
   import HarmonyAxesList from './HarmonyAxesList.svelte';
   import PaletteJumpButton from '../palette/PaletteJumpButton.svelte';
+  import { isSwatchCopy, swatchPasteColor, copySwatchColor, showSwatchColor } from '../swatchClipboard';
   import {
     setBaseColor,
     setAxisHues,
     unbindFamily,
+    swapBaseColors,
     palettesWithDefaults,
   } from './paletteBaseColor';
   import { HARMONY_MODE_BUTTONS } from './harmonyModeIcons';
@@ -108,23 +110,91 @@
     if (family) unbindFamily(family);
   }
 
+  // A swatch dropped on another swatch swaps their colors; a chip dropped there
+  // still unassigns. The swap source is held here because dataTransfer data is
+  // unreadable during dragover, and both ends of a swap live in this row.
+  let swapSource = $state<string | null>(null);
+  let swapTarget = $state<string | null>(null);
+
+  function onSwatchDragStart(e: DragEvent, family: string) {
+    startFamilyDrag(e, family);
+    swapSource = family;
+  }
+
+  function onSwatchDragEnd() {
+    swapSource = null;
+    swapTarget = null;
+  }
+
+  function acceptsSwap(sw: Swatch): boolean {
+    return sw.eligible && swapSource !== null && swapSource !== sw.label;
+  }
+
+  function onSwatchDragOver(e: DragEvent, sw: Swatch) {
+    if (!acceptsSwap(sw)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    swapTarget = sw.label;
+    unassignHover = false;
+  }
+
+  function onSwatchDragLeave(sw: Swatch) {
+    if (swapTarget === sw.label) swapTarget = null;
+  }
+
+  function onSwatchDrop(e: DragEvent, sw: Swatch) {
+    if (!acceptsSwap(sw)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    swapBaseColors(swapSource!, sw.label);
+    onSwatchDragEnd();
+  }
+
+  const swatchEls: Record<string, HTMLButtonElement> = {};
+
+  // 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) {
+    const sw = selectedSwatch;
+    if (!sw || !isSwatchCopy(e)) return;
+    e.preventDefault();
+    copySwatchColor(sw.color, swatchEls[sw.label]);
+  }
+
+  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);
+    showSwatchColor(color, swatchEls[sw.label]);
+  }
+
   let fullPalettes = $derived(palettesWithDefaults($editorState.palettes));
 
   let swatches = $derived.by(() => {
     const statuses = axisStatuses(activeMode, $editorState.harmonyAxes);
     return PALETTE_SPECS.map((spec) => {
-      const { l, c, h } = $editorState.palettes[spec.label]?.baseColor ?? spec.initialColor;
+      const color = $editorState.palettes[spec.label]?.baseColor ?? spec.initialColor;
       const index = $editorState.harmonyAxes.findIndex((a) => a.family === spec.label);
       return {
         label: spec.label,
         display: spec.displayLabel ?? spec.label,
-        hex: oklchToHexClamped(l, c, h),
+        color,
+        hex: oklchToHexClamped(color.l, color.c, color.h),
         axis: index === -1 ? null : { index, status: statuses[index] },
         eligible: ELIGIBLE.has(spec.label),
       };
     });
   });
 
+  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.
@@ -150,6 +220,8 @@
   }
 </script>
 
+<svelte:window onkeydown={onWindowKeydown} onpaste={onWindowPaste} />
+
 <div class="colors-tab">
   <div class="pane">
     <section id="colors-wheel" class="block">
@@ -227,7 +299,7 @@
       <div class="harmony-cols">
         <div class="group">
           <h3 class="title">Selected color</h3>
-          {#snippet swatchRow(row: typeof swatches, acceptsDrop = false)}
+          {#snippet swatchRow(row: Swatch[], acceptsDrop = false)}
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
               class="swatch-row"
@@ -242,12 +314,18 @@
                   class="swatch"
                   class:active={selected === sw.label}
                   class:draggable={sw.eligible}
+                  class:swap-target={swapTarget === sw.label}
                   style="--swatch-fill: {sw.hex}"
                   draggable={sw.eligible}
                   title={sw.eligible ? `${sw.display} · drag onto an axis to assign it` : sw.display}
                   aria-label={`Select ${sw.display}`}
                   aria-pressed={selected === sw.label}
-                  ondragstart={(e) => startFamilyDrag(e, sw.label)}
+                  bind:this={swatchEls[sw.label]}
+                  ondragstart={(e) => onSwatchDragStart(e, sw.label)}
+                  ondragend={onSwatchDragEnd}
+                  ondragover={(e) => onSwatchDragOver(e, sw)}
+                  ondragleave={() => onSwatchDragLeave(sw)}
+                  ondrop={(e) => onSwatchDrop(e, sw)}
                   onclick={() => select(sw.label)}
                 >
                   <span class="frame">
@@ -685,6 +763,13 @@
     border-color: var(--ui-border-high);
   }
 
+  /* The axis row's drop ring, doubled so it never reads as selection. */
+  .swatch.swap-target .frame {
+    border-color: var(--ui-text-primary);
+    outline: 1px solid var(--ui-text-primary);
+    outline-offset: 1px;
+  }
+
   .swatch-label {
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-secondary);

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,6 +208,30 @@ function giveAxisHue(s: EditorState, index: number, family: string): boolean {
   return false;
 }
 
+/** 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) => {
+    const ca = ensureConfig(s, a);
+    const cb = ensureConfig(s, b);
+    [ca.baseColor, cb.baseColor] = [cb.baseColor, ca.baseColor];
+    syncBaseAnchor(ca);
+    syncBaseAnchor(cb);
+    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);
+    }
+  });
+}
+
 /** Set several seed colors in ONE undo entry (harmony apply, global rotate). */
 export function setBaseColors(patch: Record<string, Oklch>, historyLabel = 'colors: harmony'): void {
   transaction(historyLabel, (s) => {

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);
+}