@motion-proto/live-tokens 0.96.0 → 0.97.0

package/src/editor/ui/UIPaletteSelector.svelte

@@ -1,13 +1,30 @@
 <script lang="ts">
   import { untrack } from 'svelte';
+  import { get } from 'svelte/store';
   import { slide } from 'svelte/transition';
   import { cubicOut, cubicIn } from 'svelte/easing';
   import { resolveAliasChain } from '../core/palettes/tokenRegistry';
-  import { editorState } from '../core/store/editorStore';
+  import {
+    editorState,
+    beginScope,
+    commitScope,
+    cancelScope,
+    beginSliderGesture,
+    addCustomColor,
+    setCustomColor,
+    removeCustomColor,
+    customColorUsages,
+    replaceAndRemoveCustomColor,
+    type Scope,
+  } from '../core/store/editorStore';
+  import { setCssVar, removeCssVar } from '../core/cssVarSync';
+  import { cssColorToOklch, hexToOklch, type Oklch } from '../core/palettes/oklch';
   import { formatGradientStops } from '../core/themes/slices/gradients';
   import { formatColorOpacity, parseColorOpacity } from '../core/themes/parsers/colorOpacity';
   import type { GradientToken } from '../core/store/editorTypes';
   import UITokenSelector from './UITokenSelector.svelte';
+  import ColorEditPanel from './ColorEditPanel.svelte';
+  import CustomColorReplaceStep from './CustomColorReplaceStep.svelte';
 
   /** Honor prefers-reduced-motion: `t()` zeroes durations when the OS asks for
    *  less motion, so the detail-row enter/exit slides skip outright. Mirrors
@@ -52,6 +69,9 @@
     /** Forwarded to UITokenSelector — when set, writes route through this
      *  callback instead of the DOM. See UITokenSelector.onwrite. */
     onwrite?: (value: string | null) => void;
+    /** Set on the picker a replace step opens to choose a stand-in for this
+     *  custom colour. The picker omits the colour and offers no add or edit. */
+    replacing?: string | null;
   }
 
   let {
@@ -66,6 +86,7 @@
     minOpacity = 0,
     onchange,
     onwrite,
+    replacing = null,
   }: Props = $props();
 
   const clampOpacity = (n: number) => Math.max(minOpacity, Math.min(100, Math.round(n)));
@@ -88,6 +109,12 @@
 
   const familyNames = families.map(f => f.name);
 
+  /** The Custom row's family name. A custom colour is its palette step `N`, so
+   *  `getVarName('palette', CUSTOM, N)` yields `--color-custom-N`. */
+  const CUSTOM = 'custom';
+  const CUSTOM_PREFIX = '--color-custom-';
+  const customNumber = (v: string) => v.slice(CUSTOM_PREFIX.length);
+
   const paletteSteps = ['100', '200', '300', '400', '500', '600', '700', '800', '850', '900', '950'];
 
   const surfaceSteps = [
@@ -233,6 +260,9 @@
     if (!varMatch) return null;
     const varName = varMatch[1];
 
+    const customM = varName.match(/^--color-custom-(\d+)$/);
+    if (customM) return { category: 'palette', family: CUSTOM, step: customM[1] };
+
     const paletteM = varName.match(/^--color-([a-z]+)-(\d{3})$/);
     if (paletteM && familyNames.includes(paletteM[1]) && paletteSteps.includes(paletteM[2])) {
       return { category: 'palette', family: paletteM[1], step: paletteM[2] };
@@ -452,6 +482,7 @@
   }
 
   function handleClose() {
+    if (session) cancelSession();
     selectedFamily = null;
   }
 
@@ -464,6 +495,7 @@
   }
 
   function backToFamilies() {
+    if (session) cancelSession();
     selectedFamily = null;
   }
 
@@ -530,6 +562,130 @@
     onchange?.();
   }
 
+  let customTokens = $derived(
+    $editorState.customColors.tokens
+      .filter((t) => t.variable !== replacing)
+      .sort((a, b) => Number(customNumber(a.variable)) - Number(customNumber(b.variable))),
+  );
+  let customOutOfFamily = $derived(familyFilter !== null && familyFilter !== CUSTOM);
+
+  /** An open add, edit, or replace-on-remove of one custom colour. */
+  interface CustomSession {
+    mode: 'add' | 'edit' | 'remove';
+    variable: string;
+    draft: Oklch;
+  }
+  let session = $state<CustomSession | null>(null);
+  // Held outside $state: the store matches an open scope by identity, and a
+  // proxied handle would never match.
+  let sessionScope: Scope | null = null;
+  let slotRawBeforeAdd = '';
+
+  function readSlotRaw(): string {
+    return document.documentElement.style.getPropertyValue(variable).trim();
+  }
+
+  function rgbChannelsToOklch(r: number, g: number, b: number): Oklch {
+    const hex = (n: number) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0');
+    return hexToOklch(`#${hex(r)}${hex(g)}${hex(b)}`);
+  }
+
+  /** The slot's colour as the browser paints it. A custom property's computed
+   *  value is its unresolved text, so a probe's `color` does the resolving. */
+  function resolvedSlotColor(): Oklch {
+    const probe = document.createElement('span');
+    probe.style.color = `var(${variable})`;
+    document.body.appendChild(probe);
+    const css = getComputedStyle(probe).color.trim();
+    probe.remove();
+    const rgb = css.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+    if (rgb) return rgbChannelsToOklch(+rgb[1], +rgb[2], +rgb[3]);
+    const srgb = css.match(/^color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)/i);
+    if (srgb) return rgbChannelsToOklch(+srgb[1] * 255, +srgb[2] * 255, +srgb[3] * 255);
+    return cssColorToOklch(css) ?? { l: 0.6, c: 0, h: 0 };
+  }
+
+  function openAdd() {
+    const seed = resolvedSlotColor();
+    slotRawBeforeAdd = readSlotRaw();
+    sessionScope = beginScope({ label: 'add custom colour', collapseToOne: true, clipUndoFloor: true });
+    const added = addCustomColor(seed);
+    chosenNone = false;
+    chosenStatic = null;
+    chosenGradient = null;
+    chosenAngle = null;
+    chosenCategory = 'palette';
+    chosenFamily = CUSTOM;
+    chosenStep = customNumber(added);
+    selector?.writeOverride(buildValue(added));
+    onchange?.();
+    session = { mode: 'add', variable: added, draft: seed };
+  }
+
+  function openEdit(customVar: string) {
+    const token = get(editorState).customColors.tokens.find((t) => t.variable === customVar);
+    if (!token) return;
+    sessionScope = beginScope({ label: `edit custom colour ${customVar}`, collapseToOne: true, clipUndoFloor: true });
+    session = { mode: 'edit', variable: customVar, draft: { ...token.color } };
+  }
+
+  function editDraft(h: number, c: number, lPct: number) {
+    if (!session) return;
+    session.draft = { l: lPct / 100, c, h };
+    setCustomColor(session.variable, session.draft);
+  }
+
+  function confirmSession() {
+    if (!session) return;
+    const added = session.mode === 'add';
+    if (sessionScope) commitScope(sessionScope);
+    sessionScope = null;
+    session = null;
+    if (added) {
+      selectedFamily = null;
+      selector?.close();
+      onchange?.();
+    }
+  }
+
+  // A cancelled add would leave the slot naming a colour the scope removed, so
+  // the scope restores the slot with it. A slot that writes only to the DOM
+  // sits outside the store, so its prior value goes back by hand.
+  function cancelSession() {
+    const added = session?.mode === 'add';
+    if (sessionScope) cancelScope(sessionScope);
+    sessionScope = null;
+    session = null;
+    if (added && !component && !onwrite) {
+      if (slotRawBeforeAdd) setCssVar(variable, slotRawBeforeAdd);
+      else removeCssVar(variable);
+    }
+    initFromCurrent();
+  }
+
+  function requestRemove(customVar: string) {
+    if (customColorUsages(get(editorState), customVar).length === 0) {
+      removeCustomColor(customVar);
+      initFromCurrent();
+      return;
+    }
+    const token = get(editorState).customColors.tokens.find((t) => t.variable === customVar);
+    if (!token) return;
+    session = { mode: 'remove', variable: customVar, draft: { ...token.color } };
+  }
+
+  function confirmReplace(replacement: string) {
+    if (!session) return;
+    const customVar = session.variable;
+    session = null;
+    replaceAndRemoveCustomColor(customVar, replacement);
+    initFromCurrent();
+  }
+
+  function cancelReplace() {
+    session = null;
+  }
+
   // Re-derive trigger state when the bound `variable` changes (e.g. when a
   // VariantGroup tabs view reuses the same selector instance across states).
   // The wrapper UITokenSelector forwards `var-change` only for the currently
@@ -567,9 +723,11 @@
           ? getVarName(chosenCategory, chosenFamily, chosenStep).replace(/^--/, '') + (opacity < 100 ? ` (${opacity}%)` : '')
           : ''));
 
-  let availableTabs = $derived(selectedFamily
-    ? allCategories.filter(c => c.id !== 'text' || familiesWithText.includes(selectedFamily!))
-    : allCategories);
+  let availableTabs = $derived(selectedFamily === CUSTOM
+    ? allCategories.filter(c => c.id === 'palette')
+    : selectedFamily
+      ? allCategories.filter(c => c.id !== 'text' || familiesWithText.includes(selectedFamily!))
+      : allCategories);
 
   $effect(() => {
     const family = selectedFamily;
@@ -590,7 +748,7 @@
   {disabled}
   {selectionsLocked}
   {onwrite}
-  dropdownMinWidth="14rem"
+  dropdownMinWidth={session ? '22rem' : '14rem'}
   dropdownMaxWidth="calc(100vw - 2rem)"
   hideDefaultHeader={!!selectedFamily}
   onreset={handleReset}
@@ -632,7 +790,7 @@
           {/if}
         </div>
         <div class="family-list">
-          {#each families as fam}
+          {#each families as fam (fam.name)}
             {@const outOfFamily = familyFilter !== null && fam.name !== familyFilter}
             <button
               class="family-item"
@@ -652,9 +810,30 @@
               {/if}
             </button>
           {/each}
+          <button
+            class="family-item"
+            class:active={!chosenNone && chosenFamily === CUSTOM}
+            class:out-of-family={customOutOfFamily}
+            disabled={customOutOfFamily}
+            onclick={() => selectFamily(CUSTOM)}
+          >
+            <div class="family-swatches">
+              {#each [0, 1, 2] as i (i)}
+                {#if customTokens[i]}
+                  <div class="mini-swatch" style="background: var({customTokens[i].variable});"></div>
+                {:else}
+                  <div class="mini-swatch mini-swatch--empty"></div>
+                {/if}
+              {/each}
+            </div>
+            <span class="family-label">Custom</span>
+            {#if !customOutOfFamily}
+              <i class="fas fa-chevron-right family-arrow"></i>
+            {/if}
+          </button>
           {#if gradientsAllowed && gradientTokens.length > 0}
             <div class="family-divider">Gradients</div>
-            {#each gradientTokens as g}
+            {#each gradientTokens as g (g.variable)}
               <button class="family-item" class:active={chosenGradient === g.variable} onclick={() => selectGradient(g.variable, close)}>
                 <div class="family-swatches">
                   <div class="gradient-swatch" style="background: var({g.variable});"></div>
@@ -667,11 +846,11 @@
       {:else}
         <button class="dropdown-back" onclick={backToFamilies}>
           <i class="fas fa-chevron-left"></i>
-          <span>{families.find(f => f.name === selectedFamily)?.label}</span>
+          <span>{selectedFamily === CUSTOM ? 'Custom' : families.find(f => f.name === selectedFamily)?.label}</span>
         </button>
 
         <div class="tab-bar">
-          {#each availableTabs as tab}
+          {#each availableTabs as tab (tab.id)}
             <button
               class="tab-btn"
               class:selected={selectedCategory === tab.id}
@@ -681,9 +860,79 @@
           {/each}
         </div>
 
-        {#if selectedCategory === 'palette'}
+        {#if selectedFamily === CUSTOM}
           <div class="step-grid">
-            {#each paletteSteps as step}
+            {#each customTokens as token (token.variable)}
+              {@const n = customNumber(token.variable)}
+              <div class="custom-cell">
+                <button
+                  class="step-item"
+                  class:active={chosenCategory === 'palette' && chosenFamily === CUSTOM && chosenStep === n}
+                  disabled={session !== null}
+                  onclick={() => selectSwatch('palette', n, close)}
+                >
+                  <div class="step-swatch" style="background: var({token.variable});"></div>
+                  <span class="step-label">{n}</span>
+                </button>
+                {#if !replacing}
+                  <button
+                    type="button"
+                    class="custom-edit"
+                    title="Edit custom colour {n}"
+                    aria-label="Edit custom colour {n}"
+                    disabled={session !== null}
+                    onclick={() => openEdit(token.variable)}
+                  ><i class="fas fa-pen" aria-hidden="true"></i></button>
+                  <button
+                    type="button"
+                    class="custom-remove"
+                    title="Remove custom colour {n}"
+                    aria-label="Remove custom colour {n}"
+                    disabled={session !== null}
+                    onclick={() => requestRemove(token.variable)}
+                  ><i class="fas fa-trash" aria-hidden="true"></i></button>
+                {/if}
+              </div>
+            {/each}
+            {#if !replacing}
+              <button
+                class="step-item"
+                title="Add a custom colour"
+                aria-label="Add a custom colour"
+                disabled={session !== null}
+                onclick={openAdd}
+              >
+                <div class="step-swatch step-swatch--add"><i class="fas fa-plus" aria-hidden="true"></i></div>
+                <span class="step-label">Add</span>
+              </button>
+            {/if}
+          </div>
+          {#if session}
+            <div class="custom-panel">
+              {#if session.mode === 'remove'}
+                <CustomColorReplaceStep
+                  variable={session.variable}
+                  color={session.draft}
+                  onconfirm={confirmReplace}
+                  oncancel={cancelReplace}
+                />
+              {:else}
+                <ColorEditPanel
+                  title="Custom › {customNumber(session.variable)}"
+                  hue={session.draft.h}
+                  chroma={session.draft.c}
+                  lightness={session.draft.l * 100}
+                  onHueChromaChange={editDraft}
+                  onSliderStart={() => beginSliderGesture(`edit ${session?.variable ?? 'custom colour'}`)}
+                  onConfirm={confirmSession}
+                  onCancel={cancelSession}
+                />
+              {/if}
+            </div>
+          {/if}
+        {:else if selectedCategory === 'palette'}
+          <div class="step-grid">
+            {#each paletteSteps as step (step)}
               <button
                 class="step-item"
                 class:active={chosenCategory === 'palette' && chosenFamily === selectedFamily && chosenStep === step}
@@ -696,7 +945,7 @@
           </div>
         {:else if selectedCategory === 'surface'}
           <div class="step-grid">
-            {#each surfaceSteps as step}
+            {#each surfaceSteps as step (step.key)}
               <button
                 class="step-item"
                 class:active={chosenCategory === 'surface' && chosenFamily === selectedFamily && chosenStep === step.key}
@@ -709,7 +958,7 @@
           </div>
         {:else if selectedCategory === 'border'}
           <div class="step-grid">
-            {#each borderSteps as step}
+            {#each borderSteps as step (step.key)}
               <button
                 class="step-item"
                 class:active={chosenCategory === 'border' && chosenFamily === selectedFamily && chosenStep === step.key}
@@ -722,7 +971,7 @@
           </div>
         {:else if selectedCategory === 'text'}
           <div class="step-grid">
-            {#each (selectedFamily === 'neutral' ? neutralTextSteps : textSteps) as step}
+            {#each (selectedFamily === 'neutral' ? neutralTextSteps : textSteps) as step (step.key)}
               <button
                 class="step-item"
                 class:active={chosenCategory === 'text' && chosenFamily === selectedFamily && chosenStep === step.key}
@@ -756,7 +1005,7 @@
     <span class="detail-label">orientation</span>
     <div class="orientation-body">
       <div class="dir-grid">
-        {#each directionGrid as d}
+        {#each directionGrid as d (d.angle)}
           <button
             type="button"
             class="dir-btn"
@@ -1061,6 +1310,80 @@
     border-radius: 2px;
   }
 
+  .mini-swatch--empty {
+    border: 1px dashed var(--ui-border);
+  }
+
+  .custom-cell {
+    position: relative;
+    display: flex;
+  }
+
+  .custom-cell > .step-item {
+    flex: 1;
+  }
+
+  .custom-edit,
+  .custom-remove {
+    position: absolute;
+    top: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    padding: 0;
+    background: var(--ui-surface-high);
+    border: 1px solid var(--ui-border);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-secondary);
+    font-size: 0.5625rem;
+    cursor: pointer;
+  }
+
+  .custom-edit {
+    right: 0;
+  }
+
+  .custom-remove {
+    left: 0;
+  }
+
+  .custom-edit:hover:not(:disabled),
+  .custom-remove:hover:not(:disabled) {
+    color: var(--ui-text-primary);
+    border-color: var(--ui-border-higher);
+  }
+
+  .custom-edit:disabled,
+  .custom-remove:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .step-item:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .step-item:disabled:hover {
+    background: none;
+    border-color: transparent;
+  }
+
+  .step-swatch--add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed var(--ui-border-higher);
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-xs);
+  }
+
+  .custom-panel {
+    padding: 0 var(--ui-space-8) var(--ui-space-8);
+  }
+
   .gradient-swatch {
     width: 2.5rem;
     height: 0.75rem;

package/src/editor/ui/UITokenSelector.svelte

@@ -22,7 +22,7 @@
   } from '../core/store/editorStore';
   import UILinkToggle from './UILinkToggle.svelte';
   import UIRelinkConfirmDialog from './UIRelinkConfirmDialog.svelte';
-  import { keepInViewport } from './keepInViewport';
+  import { anchorToTrigger } from './anchorToTrigger';
 
   type DropdownContext = { close: () => void; handleReset: () => void };
 
@@ -100,6 +100,7 @@
 
   let open = $state(false);
   let container: HTMLElement;
+  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
   let relinkOpen = $state(false);
   let relinkCandidates: { variable: string; alias: string }[] = $state([]);
 
@@ -292,6 +293,7 @@
 >
   <div class="ui-ts-trigger-wrap">
     <button
+      bind:this={triggerEl}
       class="ui-ts-trigger"
       class:linked={isLinkedDisplay}
       class:unlinked={showLinkToggle && !isLinkedDisplay}
@@ -329,7 +331,7 @@
       <div
         class="ui-ts-dropdown"
         style="min-width: {dropdownMinWidth};{dropdownMaxWidth ? ` max-width: ${dropdownMaxWidth};` : ''}"
-        use:keepInViewport
+        use:anchorToTrigger={triggerEl!}
       >
         {#if !hideDefaultHeader}
           {#if header}
@@ -452,8 +454,7 @@
     background: var(--ui-surface-high);
   }
 
-  /* Link-state pop-bar. The wrap already has `position: relative` (so the
-     dropdown can anchor). The bar is a `::before` anchored at the wrap's
+  /* Link-state pop-bar. The wrap already has `position: relative`. The bar is a `::before` anchored at the wrap's
      left edge — same column position regardless of state, so a stack of
      mixed linked/unlinked rows shares one continuous link-state column.
      Linked rows: bar is teal, full size, sitting flush against the trigger.
@@ -488,12 +489,6 @@
     height: 0.875rem;
     border-radius: 1px;
   }
-  /* Keep the dropdown's left edge aligned with the (indented) trigger rather
-     than the column anchor, so an open dropdown doesn't bleed left of its
-     associated control. */
-  .ui-ts-trigger-wrap:has(> .ui-ts-trigger.unlinked) > .ui-ts-dropdown {
-    left: 0.5rem;
-  }
   @media (prefers-reduced-motion: reduce) {
     .ui-ts-trigger-wrap,
     .ui-ts-trigger-wrap::before { transition: none; }
@@ -534,8 +529,8 @@
   }
 
   .ui-ts-dropdown {
-    position: absolute;
-    top: calc(100% + var(--ui-space-4));
+    position: fixed;
+    top: 0;
     left: 0;
     background: var(--ui-surface-higher);
     border: 1px solid var(--ui-border-high);

package/src/editor/ui/VariablesTab.svelte

@@ -8,6 +8,7 @@
   import ColumnsSection from './sections/ColumnsSection.svelte';
   import TokenScaleTable from './sections/TokenScaleTable.svelte';
   import WashesSection from './sections/WashesSection.svelte';
+  import CustomColorsSection from './sections/CustomColorsSection.svelte';
   import GradientsSection from './sections/GradientsSection.svelte';
   import ShadowsSection from './sections/ShadowsSection.svelte';
   import {
@@ -139,6 +140,8 @@
   <!-- Overlays -->
   <WashesSection {copiedVar} oncopy={copyVariable} />
 
+  <CustomColorsSection {copiedVar} oncopy={copyVariable} />
+
   <!-- Gradients -->
   <GradientsSection {copiedVar} oncopy={copyVariable} />
 

package/src/editor/ui/anchorToTrigger.ts

@@ -0,0 +1,63 @@
+/**
+ * Svelte action: pin a `position: fixed` popover under its trigger so no
+ * scrolling or clipping ancestor can cut it off. It aligns to the trigger's
+ * left edge, flips above when the space below runs out, and clamps to the
+ * viewport. It re-places on scroll, resize, and content reflow.
+ */
+
+const GAP = 4;
+const MARGIN = 8;
+
+export function anchorToTrigger(node: HTMLElement, trigger: HTMLElement) {
+  let anchor = trigger;
+  let pendingFrame: number | null = null;
+
+  function place(): void {
+    // A container-type or transformed ancestor moves the fixed containing
+    // block off the viewport origin. Measuring at 0,0 reads that offset.
+    node.style.left = '0px';
+    node.style.top = '0px';
+    const origin = node.getBoundingClientRect();
+    const a = anchor.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    const left = Math.max(MARGIN, Math.min(a.left, vw - MARGIN - origin.width));
+    let top = a.bottom + GAP;
+    if (top + origin.height > vh - MARGIN) {
+      const above = a.top - GAP - origin.height;
+      top = above >= MARGIN ? above : Math.max(MARGIN, vh - MARGIN - origin.height);
+    }
+
+    node.style.left = `${left - origin.left}px`;
+    node.style.top = `${top - origin.top}px`;
+  }
+
+  function schedule(): void {
+    if (pendingFrame !== null) return;
+    pendingFrame = requestAnimationFrame(() => {
+      pendingFrame = null;
+      place();
+    });
+  }
+
+  place();
+
+  const ro = new ResizeObserver(schedule);
+  ro.observe(node);
+  window.addEventListener('resize', schedule);
+  window.addEventListener('scroll', schedule, true);
+
+  return {
+    update(next: HTMLElement) {
+      anchor = next;
+      schedule();
+    },
+    destroy() {
+      if (pendingFrame !== null) cancelAnimationFrame(pendingFrame);
+      ro.disconnect();
+      window.removeEventListener('resize', schedule);
+      window.removeEventListener('scroll', schedule, true);
+    },
+  };
+}