@motion-proto/live-tokens 0.9.0 → 0.11.0

package/src/editor/ui/UIEasingSelector.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { resolveAliasChain } from '../core/palettes/tokenRegistry';
+  import UITokenSelector from './UITokenSelector.svelte';
+  import UIOptionList from './UIOptionList.svelte';
+  import UIOptionItem from './UIOptionItem.svelte';
+
+  interface Props {
+    variable: string;
+    component?: string | undefined;
+    canBeLinked?: boolean;
+    disabled?: boolean;
+    selectionsLocked?: boolean;
+    onchange?: () => void;
+  }
+
+  let {
+    variable,
+    component = undefined,
+    canBeLinked = false,
+    disabled = false,
+    selectionsLocked = false,
+    onchange,
+  }: Props = $props();
+
+  /** Family list mirrors easings.net's catalog. `linear` is the special-case
+      curve with no variant; all others take in/out/in-out. Keys are the suffix
+      portion of the corresponding `--ease-*` token name. */
+  const FAMILIES = [
+    { key: 'linear', label: 'Linear' },
+    { key: 'sine',    label: 'Sine' },
+    { key: 'quad',    label: 'Quad' },
+    { key: 'cubic',   label: 'Cubic' },
+    { key: 'quart',   label: 'Quart' },
+    { key: 'quint',   label: 'Quint' },
+    { key: 'expo',    label: 'Expo' },
+    { key: 'circ',    label: 'Circ' },
+    { key: 'back',    label: 'Back' },
+    { key: 'elastic', label: 'Elastic' },
+    { key: 'bounce',  label: 'Bounce' },
+  ] as const;
+  type FamilyKey = typeof FAMILIES[number]['key'];
+
+  const VARIANTS = [
+    { key: 'in',     label: 'In' },
+    { key: 'out',    label: 'Out' },
+    { key: 'in-out', label: 'In-Out' },
+  ] as const;
+  type VariantKey = typeof VARIANTS[number]['key'];
+
+  const FAMILY_KEYS = new Set<string>(FAMILIES.map((f) => f.key));
+  const VARIANT_KEYS = new Set<string>(VARIANTS.map((v) => v.key));
+
+  let selector: UITokenSelector;
+  let chosenFamily: FamilyKey | null = $state(null);
+  let chosenVariant: VariantKey | null = $state(null);
+  let currentValue: string = $state('');
+
+  /** Parse `--ease-linear` or `--ease-<variant>-<family>` into its parts.
+      Returns nulls when the name doesn't match the ease-token convention. */
+  function parseEaseToken(varName: string): { family: FamilyKey | null; variant: VariantKey | null } {
+    if (varName === '--ease-linear') return { family: 'linear', variant: null };
+    const m = varName.match(/^--ease-(in-out|in|out)-([a-z]+)$/);
+    if (!m) return { family: null, variant: null };
+    const variant = m[1] as VariantKey;
+    const family = m[2] as FamilyKey;
+    if (!FAMILY_KEYS.has(family) || family === 'linear') return { family: null, variant: null };
+    if (!VARIANT_KEYS.has(variant)) return { family: null, variant: null };
+    return { family, variant };
+  }
+
+  function buildEaseToken(family: FamilyKey, variant: VariantKey | null): string | null {
+    if (family === 'linear') return '--ease-linear';
+    if (!variant) return null;
+    return `--ease-${variant}-${family}`;
+  }
+
+  /** Pull the var() reference out of `var(--ease-...)`, returns the inner name. */
+  function parseRef(raw: string): string | null {
+    const m = raw.match(/var\((--ease-[a-z-]+)\)/);
+    return m ? m[1] : null;
+  }
+
+  function readResolved() {
+    currentValue = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+  }
+
+  function initFromCurrent() {
+    readResolved();
+    const raw = document.documentElement.style.getPropertyValue(variable).trim();
+    if (raw) {
+      const inner = parseRef(raw);
+      if (inner) {
+        const parts = parseEaseToken(inner);
+        chosenFamily = parts.family;
+        chosenVariant = parts.variant;
+        return;
+      }
+    }
+    for (const alias of resolveAliasChain(variable)) {
+      const parts = parseEaseToken(alias);
+      if (parts.family) {
+        chosenFamily = parts.family;
+        chosenVariant = parts.variant;
+        return;
+      }
+    }
+    chosenFamily = null;
+    chosenVariant = null;
+  }
+
+  function handleReset() {
+    chosenFamily = null;
+    chosenVariant = null;
+    readResolved();
+    onchange?.();
+  }
+
+  /** Commit (family, variant) — writes the override if both halves are valid;
+      for non-linear families without a variant yet, defaults to `out`. Closes
+      the dropdown only when a full token name was produced. */
+  function commit(family: FamilyKey, variant: VariantKey | null, close: () => void): void {
+    let v = variant;
+    if (family !== 'linear' && !v) v = 'out';
+    const target = buildEaseToken(family, v);
+    if (!target) return;
+    if (target === variable) {
+      selector.writeOverride(null);
+    } else {
+      selector.writeOverride(target);
+    }
+    chosenFamily = family;
+    chosenVariant = family === 'linear' ? null : v;
+    readResolved();
+    close();
+    onchange?.();
+  }
+
+  function selectFamily(key: FamilyKey, close: () => void) {
+    commit(key, chosenVariant, close);
+  }
+  function selectVariant(key: VariantKey, close: () => void) {
+    if (!chosenFamily || chosenFamily === 'linear') return;
+    commit(chosenFamily, key, close);
+  }
+
+  let lastSeenVariable: string | null = null;
+  $effect(() => {
+    if (variable !== lastSeenVariable) {
+      lastSeenVariable = variable;
+      initFromCurrent();
+    }
+  });
+
+  let familyLabel = $derived(FAMILIES.find((f) => f.key === chosenFamily)?.label ?? '');
+  let variantLabel = $derived(VARIANTS.find((v) => v.key === chosenVariant)?.label ?? '');
+  let triggerTitleText = $derived(
+    chosenFamily === 'linear'
+      ? 'Linear'
+      : chosenFamily && chosenVariant
+      ? `${variantLabel} ${familyLabel}`
+      : chosenFamily
+      ? `${familyLabel} —`
+      : '',
+  );
+</script>
+
+<UITokenSelector
+  bind:this={selector}
+  {variable}
+  {component}
+  {canBeLinked}
+  {disabled}
+  {selectionsLocked}
+  dropdownMinWidth="18rem"
+  onreset={handleReset}
+  onvarChange={initFromCurrent}
+>
+  {#snippet triggerTitle()}{triggerTitleText}{/snippet}
+  {#snippet triggerMeta()}{currentValue || '—'}{/snippet}
+
+  {#snippet children({ close })}
+    <div class="ease-grid" class:no-variants={chosenFamily === 'linear'}>
+      <div class="ease-col">
+        <span class="ease-col-label">Curve</span>
+        <UIOptionList>
+          {#each FAMILIES as fam (fam.key)}
+            <UIOptionItem
+              active={chosenFamily === fam.key}
+              onclick={() => selectFamily(fam.key, close)}
+            >
+              {#snippet label()}{fam.label}{/snippet}
+            </UIOptionItem>
+          {/each}
+        </UIOptionList>
+      </div>
+      {#if chosenFamily && chosenFamily !== 'linear'}
+        <div class="ease-col">
+          <span class="ease-col-label">Variant</span>
+          <UIOptionList>
+            {#each VARIANTS as v (v.key)}
+              <UIOptionItem
+                active={chosenVariant === v.key}
+                onclick={() => selectVariant(v.key, close)}
+              >
+                {#snippet label()}{v.label}{/snippet}
+              </UIOptionItem>
+            {/each}
+          </UIOptionList>
+        </div>
+      {/if}
+    </div>
+  {/snippet}
+</UITokenSelector>
+
+<style>
+  .ease-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--ui-space-8);
+    min-width: 18rem;
+  }
+  .ease-grid.no-variants {
+    grid-template-columns: 1fr;
+  }
+  .ease-col {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    min-width: 0;
+  }
+  .ease-col-label {
+    padding: var(--ui-space-4) var(--ui-space-8) 0;
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-tertiary);
+    font-family: var(--ui-font-mono);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+</style>

package/src/editor/ui/UIPaddingSelector.svelte

@@ -18,7 +18,7 @@
     unlinkComponentProperty,
     relinkComponentProperty,
   } from '../core/store/editorStore';
-  import UIRelinkConfirmPopover from './UIRelinkConfirmPopover.svelte';
+  import UIRelinkConfirmDialog from './UIRelinkConfirmDialog.svelte';
   import UILinkToggle from './UILinkToggle.svelte';
 
   interface Props {
@@ -383,7 +383,7 @@
       <div class="link-toggle-wrap">
         <UILinkToggle linked={isLinkedParent} ontoggle={toggleLinkPaddingGroup} />
         {#if relinkOpen && component}
-          <UIRelinkConfirmPopover
+          <UIRelinkConfirmDialog
             candidates={relinkCandidates}
             initialVariable={variable}
             prefixToStrip={`--${component}-`}

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