@motion-proto/live-tokens 0.10.0 → 0.11.0

package/src/editor/ui/UIPaletteSelector.svelte

@@ -41,7 +41,14 @@
      *  rendered disabled and not clickable. Out-of-family already-set
      *  choices still surface in the trigger meta. */
     familyFilter?: string | null;
+    /** When false, omit the "None" (transparent) option from the family list.
+     *  Slots that must always paint something (e.g. overlay backdrops) opt
+     *  out — picking None would just degenerate to opacity 0. */
+    showNone?: boolean;
     onchange?: () => void;
+    /** Forwarded to UITokenSelector — when set, writes route through this
+     *  callback instead of the DOM. See UITokenSelector.onwrite. */
+    onwrite?: (value: string | null) => void;
   }
 
   let {
@@ -51,7 +58,9 @@
     disabled = false,
     selectionsLocked = false,
     familyFilter = null,
+    showNone = true,
     onchange,
+    onwrite,
   }: Props = $props();
 
   type Category = 'palette' | 'surface' | 'border' | 'text';
@@ -137,6 +146,9 @@
   let chosenFamily = $state<string | null>(null);
   let chosenStep = $state<string | null>(null);
   let chosenNone = $state(false);
+  /** Picked one of the invariants. Bypasses category/family/step — these are
+   *  not part of any ramp and always resolve to pure white/black. */
+  let chosenStatic = $state<'white' | 'black' | null>(null);
   let chosenGradient = $state<string | null>(null);
   /** Per-slot angle override on the chosen linear gradient. Null means
    *  "no override" — the slot writes `var(--gradient-N)` and inherits the
@@ -243,6 +255,14 @@
     return { inner: m[1], opacity: parseInt(m[2]) };
   }
 
+  function parseStatic(raw: string): { name: 'white' | 'black'; opacity: number } | null {
+    const direct = raw.match(/^var\(--color-(white|black)\)$/);
+    if (direct) return { name: direct[1] as 'white' | 'black', opacity: 100 };
+    const wrapped = raw.match(/^color-mix\(in srgb,\s*var\(--color-(white|black)\)\s+(\d+)%,\s*transparent\)$/);
+    if (wrapped) return { name: wrapped[1] as 'white' | 'black', opacity: parseInt(wrapped[2]) };
+    return null;
+  }
+
   function buildValue(varName: string): string | null {
     if (varName === variable && opacity >= 100) return null;
     if (opacity >= 100) return varName;
@@ -251,6 +271,11 @@
 
   function applyOpacity() {
     opacity = Math.max(0, Math.min(100, Math.round(opacity)));
+    if (chosenStatic !== null) {
+      selector?.writeOverride(buildValue(`--color-${chosenStatic}`));
+      onchange?.();
+      return;
+    }
     if (chosenCategory === null || chosenFamily === null || chosenStep === null) return;
     const varName = getVarName(chosenCategory, chosenFamily, chosenStep);
     selector?.writeOverride(buildValue(varName));
@@ -323,6 +348,7 @@
 
     if (raw === 'transparent') {
       chosenNone = true;
+      chosenStatic = null;
       chosenCategory = null;
       chosenFamily = null;
       chosenStep = null;
@@ -362,6 +388,17 @@
     chosenGradient = null;
     chosenAngle = null;
 
+    const staticParsed = parseStatic(raw);
+    if (staticParsed) {
+      chosenStatic = staticParsed.name;
+      chosenCategory = null;
+      chosenFamily = null;
+      chosenStep = null;
+      opacity = staticParsed.opacity;
+      return;
+    }
+    chosenStatic = null;
+
     const opacityParsed = parseOpacity(raw);
     if (opacityParsed) {
       const parsed = parseRef(opacityParsed.inner);
@@ -424,6 +461,7 @@
 
   function selectNone(close: () => void) {
     chosenNone = true;
+    chosenStatic = null;
     chosenCategory = null;
     chosenFamily = null;
     chosenStep = null;
@@ -436,9 +474,24 @@
     onchange?.();
   }
 
+  function selectStatic(name: 'white' | 'black', close: () => void) {
+    chosenNone = false;
+    chosenStatic = name;
+    chosenCategory = null;
+    chosenFamily = null;
+    chosenStep = null;
+    chosenGradient = null;
+    chosenAngle = null;
+    selector?.writeOverride(buildValue(`--color-${name}`));
+    selectedFamily = null;
+    close();
+    onchange?.();
+  }
+
   function selectSwatch(category: Category, step: string, close: () => void) {
     const varName = getVarName(category, selectedFamily!, step);
     chosenNone = false;
+    chosenStatic = null;
     chosenGradient = null;
     chosenAngle = null;
     chosenCategory = category;
@@ -456,6 +509,7 @@
   // token's default angle but with no local override active.
   function selectGradient(gradientVar: string, close: () => void) {
     chosenNone = false;
+    chosenStatic = null;
     chosenCategory = null;
     chosenFamily = null;
     chosenStep = null;
@@ -493,11 +547,13 @@
 
   let metaLabel = $derived(chosenNone
     ? 'none'
-    : chosenGradient
-      ? chosenGradient.replace(/^--/, '') + (chosenAngle !== null ? ` (${effectiveAngle}°)` : '')
-      : (chosenCategory && chosenFamily && chosenStep !== null
-        ? getVarName(chosenCategory, chosenFamily, chosenStep).replace(/^--/, '') + (opacity < 100 ? ` (${opacity}%)` : '')
-        : ''));
+    : chosenStatic
+      ? `color-${chosenStatic}` + (opacity < 100 ? ` (${opacity}%)` : '')
+      : chosenGradient
+        ? chosenGradient.replace(/^--/, '') + (chosenAngle !== null ? ` (${effectiveAngle}°)` : '')
+        : (chosenCategory && chosenFamily && chosenStep !== null
+          ? getVarName(chosenCategory, chosenFamily, chosenStep).replace(/^--/, '') + (opacity < 100 ? ` (${opacity}%)` : '')
+          : ''));
 
   let availableTabs = $derived(selectedFamily
     ? allCategories.filter(c => c.id !== 'text' || familiesWithText.includes(selectedFamily!))
@@ -517,6 +573,7 @@
   {canBeLinked}
   {disabled}
   {selectionsLocked}
+  {onwrite}
   dropdownMinWidth="14rem"
   dropdownMaxWidth="calc(100vw - 2rem)"
   hideDefaultHeader={!!selectedFamily}
@@ -542,13 +599,23 @@
   {#snippet children({ close })}
   
       {#if selectedFamily === null}
-        <div class="family-list">
-          <button class="family-item" class:active={chosenNone} onclick={() => selectNone(close)}>
-            <div class="family-swatches">
-              <div class="none-swatch"></div>
-            </div>
-            <span class="family-label">None</span>
+        <div class="static-band">
+          <button class="static-chip" class:active={chosenStatic === 'white'} onclick={() => selectStatic('white', close)}>
+            <div class="static-swatch static-swatch--white"></div>
+            <span class="static-label">White</span>
           </button>
+          <button class="static-chip" class:active={chosenStatic === 'black'} onclick={() => selectStatic('black', close)}>
+            <div class="static-swatch static-swatch--black"></div>
+            <span class="static-label">Black</span>
+          </button>
+          {#if showNone}
+            <button class="static-chip" class:active={chosenNone} onclick={() => selectNone(close)}>
+              <div class="static-swatch static-swatch--none"></div>
+              <span class="static-label">None</span>
+            </button>
+          {/if}
+        </div>
+        <div class="family-list">
           {#each families as fam}
             {@const outOfFamily = familyFilter !== null && fam.name !== familyFilter}
             <button
@@ -850,6 +917,79 @@
     background: var(--ui-hover);
   }
 
+  /* Inline band of instant-apply atoms (White / Black / None) above the
+     family list. Same swatch+label vocabulary as `.step-item`, scaled to
+     fit three across so the eye groups them as peer one-clicks distinct
+     from the multi-step family rows below. */
+  .static-band {
+    display: flex;
+    gap: var(--ui-space-4);
+    padding: var(--ui-space-8);
+    border-bottom: 1px solid var(--ui-border-low);
+  }
+
+  .static-chip {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--ui-space-2);
+    padding: var(--ui-space-4);
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--ui-radius-sm);
+    cursor: pointer;
+    transition: all var(--ui-transition-fast);
+  }
+
+  .static-chip:hover {
+    background: var(--ui-hover);
+    border-color: var(--ui-border);
+  }
+
+  .static-chip.active {
+    border-color: var(--ui-text-accent);
+    border-width: 2px;
+    background: var(--ui-hover-high);
+    padding: 3px;
+  }
+
+  .static-chip.active .static-label {
+    color: var(--ui-text-accent);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+
+  .static-swatch {
+    width: 2rem;
+    height: 1.5rem;
+    border-radius: var(--ui-radius-sm);
+    border: 1px solid var(--ui-border-low);
+  }
+
+  .static-swatch--white {
+    background: var(--color-white);
+  }
+
+  .static-swatch--black {
+    background: var(--color-black);
+  }
+
+  .static-swatch--none {
+    background: repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 3px,
+      var(--ui-border-low) 3px,
+      var(--ui-border-low) 4px
+    );
+  }
+
+  .static-label {
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-secondary);
+    font-family: var(--ui-font-mono);
+  }
+
   .family-list {
     display: flex;
     flex-direction: column;
@@ -905,15 +1045,6 @@
     border-radius: 2px;
   }
 
-  .none-swatch {
-    width: 2.5rem;
-    height: 0.75rem;
-    border-radius: 2px;
-    border: 1px solid var(--ui-border-low);
-    position: relative;
-    overflow: hidden;
-  }
-
   .gradient-swatch {
     width: 2.5rem;
     height: 0.75rem;
@@ -931,22 +1062,6 @@
     border-top: 1px solid var(--ui-border-low);
   }
 
-  .none-swatch::after {
-    content: '';
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    right: -1px;
-    bottom: -1px;
-    background: repeating-linear-gradient(
-      -45deg,
-      transparent,
-      transparent 3px,
-      var(--ui-border-low) 3px,
-      var(--ui-border-low) 4px
-    );
-  }
-
   .family-label {
     flex: 1;
     font-size: var(--ui-font-size-sm);

package/src/editor/ui/{UIRelinkConfirmPopover.svelte → UIRelinkConfirmDialog.svelte}

@@ -1,10 +1,7 @@
 <script lang="ts">
-  import { run, createBubbler, stopPropagation } from 'svelte/legacy';
-
-  const bubble = createBubbler();
   import { onMount, onDestroy } from 'svelte';
+  import { self } from 'svelte/legacy';
   import UIRadio from './UIRadio.svelte';
-  import { keepInViewport } from './keepInViewport';
 
   type Candidate = { variable: string; alias: string };
 
@@ -40,7 +37,7 @@
 
   let options = $derived(distinctOptions(candidates, initialVariable));
   let selected = $state('');
-  run(() => {
+  $effect(() => {
     if (selected === '' && options.length > 0) selected = options[0].alias;
   });
 
@@ -64,10 +61,10 @@
     }
   }
 
-  let popoverEl: HTMLDivElement | undefined = $state();
+  let confirmBtn: HTMLButtonElement | undefined = $state();
 
   onMount(() => {
-    popoverEl?.focus();
+    confirmBtn?.focus();
     document.addEventListener('keydown', handleKeydown, true);
   });
 
@@ -76,70 +73,93 @@
   });
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-  class="ui-relink-popover"
-  role="dialog"
-  aria-label="Confirm link"
-  tabindex="-1"
-  bind:this={popoverEl}
-  use:keepInViewport
-  onclick={stopPropagation(bubble('click'))}
->
-  <div class="ui-relink-header">
-    {#if options.length > 1}
-      <span class="ui-relink-title">{candidates.length} variants disagree — pick one to broadcast</span>
-    {:else}
-      <span class="ui-relink-title">Link this property across {candidates.length} variants?</span>
-    {/if}
-  </div>
-
-  <div class="ui-relink-body">
-    {#each options as opt}
-      <label class="ui-relink-row">
-        <UIRadio bind:group={selected} value={opt.alias} />
-        <div class="ui-relink-row-info">
-          <code class="ui-relink-alias">{opt.alias}</code>
-          <span class="ui-relink-sources">
-            from {opt.sources.join(', ')}
-          </span>
-        </div>
-      </label>
-    {/each}
-  </div>
-
-  <div class="ui-relink-footer">
-    <button type="button" class="ui-relink-btn ui-relink-btn-cancel" onclick={handleCancel}>Cancel</button>
-    <button type="button" class="ui-relink-btn ui-relink-btn-confirm" onclick={handleConfirm}>Link</button>
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions a11y_no_static_element_interactions -->
+<div class="ui-relink-backdrop" onclick={self(handleCancel)}>
+  <div
+    class="ui-relink-dialog"
+    role="dialog"
+    aria-label="Confirm link"
+    aria-modal="true"
+    tabindex="-1"
+  >
+    <div class="ui-relink-header">
+      {#if options.length > 1}
+        <span class="ui-relink-title">{candidates.length} variants disagree — pick one to broadcast</span>
+      {:else}
+        <span class="ui-relink-title">Link this property across {candidates.length} variants?</span>
+      {/if}
+      <button
+        type="button"
+        class="ui-relink-close"
+        onclick={handleCancel}
+        aria-label="Close"
+      >
+        <i class="fas fa-times"></i>
+      </button>
+    </div>
+
+    <div class="ui-relink-body" role="radiogroup">
+      {#each options as opt}
+        <label class="ui-relink-row" class:selected={selected === opt.alias}>
+          <UIRadio bind:group={selected} value={opt.alias} />
+          <div class="ui-relink-row-info">
+            <code class="ui-relink-alias">{opt.alias}</code>
+            <span class="ui-relink-sources">
+              from {opt.sources.join(', ')}
+            </span>
+          </div>
+        </label>
+      {/each}
+    </div>
+
+    <div class="ui-relink-footer">
+      <button type="button" class="ui-relink-btn ui-relink-btn-cancel" onclick={handleCancel}>Cancel</button>
+      <button
+        type="button"
+        class="ui-relink-btn ui-relink-btn-confirm"
+        onclick={handleConfirm}
+        bind:this={confirmBtn}
+      >Link</button>
+    </div>
   </div>
 </div>
 
 <style>
-  .ui-relink-popover {
-    position: absolute;
-    top: calc(100% + var(--ui-space-4));
-    right: 0;
+  .ui-relink-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.55);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10000;
+  }
+
+  .ui-relink-dialog {
     background: var(--ui-surface-higher);
     border: 1px solid var(--ui-border-high);
     border-radius: var(--ui-radius-md);
     box-shadow: var(--ui-shadow-lg);
-    z-index: 20;
-    min-width: 18rem;
-    max-width: 24rem;
-    padding: var(--ui-space-8);
+    min-width: 22rem;
+    max-width: 28rem;
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-8);
-    animation: uiRelinkPopoverIn 120ms ease-out;
+    animation: uiRelinkDialogIn 140ms ease-out;
   }
+  .ui-relink-dialog:focus { outline: none; }
 
-  .ui-relink-popover:focus {
-    outline: none;
+  @keyframes uiRelinkDialogIn {
+    from { opacity: 0; transform: translateY(-6px); }
+    to   { opacity: 1; transform: translateY(0); }
   }
 
   .ui-relink-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-8) var(--ui-space-12);
     border-bottom: 1px solid var(--ui-border-low);
-    padding-bottom: var(--ui-space-6);
   }
 
   .ui-relink-title {
@@ -148,31 +168,52 @@
     font-weight: var(--ui-font-weight-medium);
   }
 
+  .ui-relink-close {
+    flex-shrink: 0;
+    width: 22px;
+    height: 22px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    border: none;
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-tertiary);
+    cursor: pointer;
+    font-size: var(--ui-font-size-xs);
+    transition: background var(--ui-transition-fast), color var(--ui-transition-fast);
+  }
+  .ui-relink-close:hover {
+    background: var(--ui-hover);
+    color: var(--ui-text-primary);
+  }
+
   .ui-relink-body {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-4);
+    padding: var(--ui-space-8) var(--ui-space-8);
   }
 
   .ui-relink-row {
     display: flex;
     align-items: flex-start;
     gap: var(--ui-space-8);
-    padding: var(--ui-space-4);
+    padding: var(--ui-space-6) var(--ui-space-8);
+    border: 1px solid transparent;
     border-radius: var(--ui-radius-sm);
     cursor: pointer;
-    transition: background var(--ui-transition-fast);
+    transition:
+      background var(--ui-transition-fast),
+      border-color var(--ui-transition-fast);
   }
-
-  .ui-relink-row:hover {
+  .ui-relink-row:hover { background: var(--ui-hover); }
+  .ui-relink-row.selected {
     background: var(--ui-hover);
+    border-color: var(--ui-border-high);
   }
 
-  /* Lift the radio slightly so it visually aligns with the first line of the
-     two-line row label. Selection styling lives in UIRadio. */
-  .ui-relink-row :global(.ui-radio) {
-    margin-top: 0.2rem;
-  }
+  /* Lift the radio so it visually aligns with the first line of the row label. */
+  .ui-relink-row :global(.ui-radio) { margin-top: 0.2rem; }
 
   .ui-relink-row-info {
     display: flex;
@@ -204,7 +245,7 @@
     display: flex;
     justify-content: flex-end;
     gap: var(--ui-space-6);
-    padding-top: var(--ui-space-4);
+    padding: var(--ui-space-8) var(--ui-space-12);
     border-top: 1px solid var(--ui-border-low);
   }
 
@@ -222,7 +263,6 @@
     border: 1px solid var(--ui-border);
     color: var(--ui-text-secondary);
   }
-
   .ui-relink-btn-cancel:hover {
     background: var(--ui-hover);
     color: var(--ui-text-primary);
@@ -233,13 +273,5 @@
     border: 1px solid var(--ui-text-accent);
     color: var(--ui-surface-lowest);
   }
-
-  .ui-relink-btn-confirm:hover {
-    filter: brightness(1.1);
-  }
-
-  @keyframes uiRelinkPopoverIn {
-    from { opacity: 0; transform: translateY(-2px); }
-    to   { opacity: 1; transform: translateY(0); }
-  }
+  .ui-relink-btn-confirm:hover { filter: brightness(1.1); }
 </style>

package/src/editor/ui/UITokenSelector.svelte

@@ -15,7 +15,7 @@
     getComponentPropertySiblings,
   } from '../core/store/editorStore';
   import UILinkToggle from './UILinkToggle.svelte';
-  import UIRelinkConfirmPopover from './UIRelinkConfirmPopover.svelte';
+  import UIRelinkConfirmDialog from './UIRelinkConfirmDialog.svelte';
   import { keepInViewport } from './keepInViewport';
 
   type DropdownContext = { close: () => void; handleReset: () => void };
@@ -58,6 +58,14 @@
     onopen?: () => void;
     onclose?: () => void;
     onvarChange?: () => void;
+    /** When provided, writes route through this callback instead of touching
+     *  the DOM or component aliases. Caller owns persistence (typically into
+     *  a typed slice). The callback receives the same payload `writeOverride`
+     *  would have written: a bare `--token-name`, a CSS expression like
+     *  `color-mix(...)` or `transparent`, or `null` to reset. Caller is
+     *  responsible for re-emitting the var so the picker's DOM read-back
+     *  reflects the new state. */
+    onwrite?: (value: string | null) => void;
   }
 
   let {
@@ -81,6 +89,7 @@
     onopen,
     onclose,
     onvarChange,
+    onwrite,
   }: Props = $props();
 
   let open = $state(false);
@@ -100,6 +109,10 @@
 
   /** Persist a semantic CSS-var reference (or clear it when null). */
   export function writeOverride(semanticName: string | null): void {
+    if (onwrite) {
+      onwrite(semanticName);
+      return;
+    }
     if (component) {
       const useLinked = isLinkedDisplay;
       if (semanticName) {
@@ -280,7 +293,7 @@
     </button>
 
     {#if relinkOpen && component}
-      <UIRelinkConfirmPopover
+      <UIRelinkConfirmDialog
         candidates={relinkCandidates}
         initialVariable={variable}
         prefixToStrip={`--${component}-`}