@motion-proto/live-tokens 0.8.0 → 0.10.0

package/src/editor/pages/ComponentEditorPage.svelte

@@ -5,7 +5,7 @@
   import ComponentsTab from '../component-editor/scaffolding/ComponentsTab.svelte';
   import ManifestFileManager from '../ui/ManifestFileManager.svelte';
   import { navigate } from '../core/routing/router';
-  import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
+  import { getComponentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../core/components/componentConfigService';
   import { selectedComponent } from '../core/store/editorViewStore';
   import { componentDirty } from '../core/store/editorStore';
@@ -96,7 +96,9 @@
     window.removeEventListener('keydown', handleKeydown);
   });
 
-  const componentNavItems = componentRegistryEntries.map(({ id, label, icon }) => ({ id, label, icon }));
+  const allComponentNavItems = getComponentRegistryEntries().map(({ id, label, icon, origin }) => ({ id, label, icon, origin }));
+  const systemNavItems = allComponentNavItems.filter((i) => i.origin === 'system');
+  const customNavItems = allComponentNavItems.filter((i) => i.origin === 'custom');
 </script>
 
 <!--
@@ -146,7 +148,7 @@
       {/if}
     </div>
     <div class="nav-items">
-      {#each componentNavItems as item}
+      {#each systemNavItems as item}
         <button
           class="nav-item"
           class:active={$selectedComponent === item.id}
@@ -162,6 +164,27 @@
           {/if}
         </button>
       {/each}
+      {#if customNavItems.length > 0}
+        <div class="nav-divider">
+          <span class="nav-divider-label">Custom</span>
+        </div>
+        {#each customNavItems as item}
+          <button
+            class="nav-item"
+            class:active={$selectedComponent === item.id}
+            class:dirty={$componentDirty[item.id]}
+            onmouseenter={(e) => showHint(item.label, e.currentTarget)}
+            onmouseleave={hideHint}
+            onclick={() => selectComponent(item.id)}
+          >
+            <i class={item.icon}></i>
+            <span class="rail-label">{item.label}</span>
+            {#if $componentDirty[item.id]}
+              <span class="dirty-dot" aria-label="Unsaved changes" title="Unsaved changes"></span>
+            {/if}
+          </button>
+        {/each}
+      {/if}
     </div>
     {#if drawerOpen}
       <div class="sidebar-footer">
@@ -331,6 +354,33 @@
     background: black;
   }
 
+  /* Divider between SYSTEM and CUSTOM groups. The horizontal line uses the
+     dimmer border token (sub-element separator), with an uppercase eyebrow
+     label that fades out when the rail is collapsed so the line still reads. */
+  .nav-divider {
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    align-items: center;
+    height: 28px;
+    margin-top: var(--ui-space-8);
+    border-top: 1px solid var(--ui-border-low);
+  }
+
+  .nav-divider-label {
+    grid-column: 2;
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    opacity: 0;
+    transition: opacity 180ms ease;
+  }
+
+  .components-shell.rail-expanded .nav-divider-label {
+    opacity: 1;
+  }
+
   .sidebar-footer {
     flex-shrink: 0;
     margin-top: auto;

package/src/editor/pages/EditorShell.svelte

@@ -13,7 +13,7 @@
   import { editorState } from '../core/store/editorStore';
   import { editorView, sidebarCondensed, selectedComponent } from '../core/store/editorViewStore';
   import { componentDirty } from '../core/store/editorStore';
-  import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
+  import { getComponentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../core/components/componentConfigService';
 
   const tokenNavItems = [
@@ -29,7 +29,9 @@
     { id: 'utility-tokens', label: 'Utility Tokens', icon: 'fas fa-sliders' }
   ];
 
-  const componentNavItems = componentRegistryEntries.map(({ id, label, icon }) => ({ id, label, icon }));
+  const allComponentNavItems = getComponentRegistryEntries().map(({ id, label, icon, origin }) => ({ id, label, icon, origin }));
+  const systemNavItems = allComponentNavItems.filter((i) => i.origin === 'system');
+  const customNavItems = allComponentNavItems.filter((i) => i.origin === 'custom');
 
   let selectedTokenSection: string | null = $state(null);
   let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = $state('idle');
@@ -149,7 +151,7 @@
       {/if}
     {:else}
       <div class="nav-items">
-        {#each componentNavItems as item}
+        {#each systemNavItems as item}
           <button
             class="nav-item"
             class:active={$selectedComponent === item.id}
@@ -165,6 +167,27 @@
             {/if}
           </button>
         {/each}
+        {#if customNavItems.length > 0}
+          <div class="nav-divider">
+            <span class="nav-divider-label">Custom</span>
+          </div>
+          {#each customNavItems as item}
+            <button
+              class="nav-item"
+              class:active={$selectedComponent === item.id}
+              class:dirty={$componentDirty[item.id]}
+              onmouseenter={(e) => showHint(item.label, e.currentTarget)}
+              onmouseleave={hideHint}
+              onclick={() => selectComponent(item.id)}
+            >
+              <i class={item.icon}></i>
+              <span class="nav-label">{item.label}</span>
+              {#if $componentDirty[item.id]}
+                <span class="dirty-dot" aria-label="Unsaved changes" title="Unsaved changes"></span>
+              {/if}
+            </button>
+          {/each}
+        {/if}
       </div>
       {#if !condensed}
         <div class="sidebar-footer">
@@ -248,6 +271,33 @@
     flex-shrink: 0;
   }
 
+  /* Divider between SYSTEM and CUSTOM groups. The horizontal line uses the
+     dimmer border token (sub-element separator), with an uppercase eyebrow
+     label that fades out when the rail is condensed so the line still reads. */
+  .nav-divider {
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    align-items: center;
+    height: 28px;
+    margin-top: var(--ui-space-8);
+    border-top: 1px solid var(--ui-border-low);
+  }
+
+  .nav-divider-label {
+    grid-column: 2;
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    opacity: 1;
+    transition: opacity 180ms ease;
+  }
+
+  .layout.condensed .nav-divider-label {
+    opacity: 0;
+  }
+
   .nav-item {
     position: relative;
     display: grid;

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/variantScales.ts

@@ -106,3 +106,37 @@ export const DIVIDER_HEIGHT: VariantScaleEntry = {
     { key: 'full', label: 'Full', value: '100%' },
   ],
 };
+
+/** Used by `*-duration` variables (CSS transition timing). Pulls keys directly
+ *  from the shared `--duration-*` scale in tokens.css — labels mirror the token
+ *  slugs so the picker reflects the utility token namespace, no synthetic names. */
+export const DURATION: VariantScaleEntry = {
+  varPrefix: '--duration-',
+  options: [
+    { key: '75',   label: '75',   value: '75ms' },
+    { key: '150',  label: '150',  value: '150ms' },
+    { key: '200',  label: '200',  value: '200ms' },
+    { key: '300',  label: '300',  value: '300ms' },
+    { key: '500',  label: '500',  value: '500ms' },
+    { key: '750',  label: '750',  value: '750ms' },
+    { key: '1000', label: '1000', value: '1000ms' },
+  ],
+};
+
+/** Used by `*-divider-inset` variables (margin-block trimmed off a stretched
+ *  divider). Labels describe the resulting divider, not the inset value: 0
+ *  inset = bar-height divider ("Full"); larger insets = shorter divider.
+ *  Replaces the percentage-height approach that collapsed to 0 in
+ *  auto-height flex parents. */
+export const DIVIDER_INSET: VariantScaleEntry = {
+  varPrefix: '--space-',
+  options: [
+    { key: '0', label: 'Full', value: '0px' },
+    { key: '2', label: 'Tall', value: '0.125rem' },
+    { key: '4', label: 'Large', value: '0.25rem' },
+    { key: '6', label: 'Medium', value: '0.375rem' },
+    { key: '8', label: 'Short', value: '0.5rem' },
+    { key: '12', label: 'XS', value: '0.75rem' },
+    { key: '16', label: 'Tiny', value: '1rem' },
+  ],
+};