@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/{ui → editor/ui}/UICopyPopover.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { run } from 'svelte/legacy';
 
-  import { copyPopover } from '../lib/copyPopover';
+  import { copyPopover } from './copyPopover';
 
   let bubbleEl: HTMLDivElement | null = $state(null);
   let bubbleW = $state(0);
@@ -49,7 +49,7 @@
     padding: var(--ui-space-6) var(--ui-space-10);
     background: var(--ui-surface-highest);
     color: var(--ui-text-primary);
-    border: 1px solid var(--ui-border-medium);
+    border: 1px solid var(--ui-border-high);
     border-radius: var(--ui-radius-lg);
     box-shadow: var(--ui-shadow-lg);
     font-family: var(--ui-font-mono);
@@ -70,8 +70,8 @@
     width: 8px;
     height: 8px;
     background: var(--ui-surface-highest);
-    border-right: 1px solid var(--ui-border-medium);
-    border-bottom: 1px solid var(--ui-border-medium);
+    border-right: 1px solid var(--ui-border-high);
+    border-bottom: 1px solid var(--ui-border-high);
     transform: translateX(-50%) rotate(45deg);
   }
 

package/src/{ui → editor/ui}/UIFontFamilySelector.svelte

@@ -2,10 +2,10 @@
   import { run } from 'svelte/legacy';
 
   import { onMount, onDestroy } from 'svelte';
-  import { resolveAliasChain } from '../lib/tokenRegistry';
-  import { editorState } from '../lib/editorStore';
-  import { CSS_VAR_CHANGE_EVENT } from '../lib/cssVarSync';
-  import type { FontFamily, FontSource } from '../lib/themeTypes';
+  import { resolveAliasChain } from '../core/palettes/tokenRegistry';
+  import { editorState } from '../core/store/editorStore';
+  import { CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
+  import type { FontFamily, FontSource } from '../core/themes/themeTypes';
   import UITokenSelector from './UITokenSelector.svelte';
   import UIOptionList from './UIOptionList.svelte';
   import UIOptionItem from './UIOptionItem.svelte';
@@ -260,7 +260,7 @@
 
   .pfs-divider {
     height: 1px;
-    background: var(--ui-border-faint);
+    background: var(--ui-border-low);
     margin: var(--ui-space-4) 0;
   }
 
@@ -312,7 +312,7 @@
     overflow-y: auto;
     padding: var(--ui-space-4);
     background: var(--ui-surface-higher);
-    border: 1px solid var(--ui-border-medium);
+    border: 1px solid var(--ui-border-high);
     border-radius: var(--ui-radius-md);
     box-shadow: var(--ui-shadow-lg);
     z-index: 1;
@@ -330,6 +330,5 @@
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-tertiary);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
   }
 </style>

package/src/{ui → editor/ui}/UIFontSizeSelector.svelte

@@ -2,7 +2,7 @@
   import { run } from 'svelte/legacy';
 
   import { onMount, onDestroy } from 'svelte';
-  import { CSS_VAR_CHANGE_EVENT } from '../lib/cssVarSync';
+  import { CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
   import UIVariantSelector from './UIVariantSelector.svelte';
 
   interface Props {
@@ -104,6 +104,9 @@
   dropdownGridColumns="auto auto auto auto"
   {onchange}
 >
+  {#snippet triggerMeta({ currentValue, activeOption })}
+    {activeOption ? (pxByKey[activeOption.key] ?? '—') : (currentValue || '—')}
+  {/snippet}
   {#snippet option({ opt, active, select })}
   
       <button class="font-size-row" class:active onclick={select}>

package/src/editor/ui/UIInfoPopover.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    ariaLabel?: string;
+    children?: Snippet;
+  }
+
+  let { title, ariaLabel, children }: Props = $props();
+
+  let open = $state(false);
+  let btnEl = $state<HTMLButtonElement | undefined>(undefined);
+  let popoverEl = $state<HTMLDivElement | undefined>(undefined);
+  let ready = $state(false);
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape' && open) open = false;
+  }
+
+  function handleDocumentMousedown(e: MouseEvent) {
+    if (!open) return;
+    const target = e.target as Element | null;
+    if (target && !target.closest('[data-info-popover-root]')) {
+      open = false;
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', handleKeydown);
+    document.addEventListener('mousedown', handleDocumentMousedown, true);
+  });
+
+  onDestroy(() => {
+    window.removeEventListener('keydown', handleKeydown);
+    document.removeEventListener('mousedown', handleDocumentMousedown, true);
+  });
+
+  function position(): void {
+    const btn = btnEl;
+    const pop = popoverEl;
+    if (!btn || !pop) return;
+    const br = btn.getBoundingClientRect();
+    const pr = pop.getBoundingClientRect();
+    const margin = 8;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let left = br.right + margin;
+    if (left + pr.width > vw - margin) {
+      left = br.left + br.width / 2 - pr.width / 2;
+      if (left < margin) left = margin;
+      if (left + pr.width > vw - margin) left = vw - margin - pr.width;
+    }
+    let top = br.bottom + margin;
+    if (top + pr.height > vh - margin) {
+      top = br.top - margin - pr.height;
+      if (top < margin) top = margin;
+    }
+    pop.style.left = `${left}px`;
+    pop.style.top = `${top}px`;
+    ready = true;
+  }
+
+  $effect(() => {
+    if (!open) {
+      ready = false;
+      return;
+    }
+    let raf1 = requestAnimationFrame(() => {
+      raf1 = requestAnimationFrame(position);
+    });
+    window.addEventListener('scroll', position, true);
+    window.addEventListener('resize', position);
+    return () => {
+      cancelAnimationFrame(raf1);
+      window.removeEventListener('scroll', position, true);
+      window.removeEventListener('resize', position);
+    };
+  });
+</script>
+
+<button
+  type="button"
+  class="info-btn"
+  aria-label={ariaLabel ?? `About ${title}`}
+  aria-expanded={open}
+  bind:this={btnEl}
+  data-info-popover-root
+  onclick={() => (open = !open)}
+>
+  <i class="fas fa-circle-info"></i>
+</button>
+
+{#if open}
+  <div
+    class="info-popover"
+    class:ready
+    role="dialog"
+    aria-label={ariaLabel ?? `About ${title}`}
+    bind:this={popoverEl}
+    data-info-popover-root
+  >
+    <header class="info-header">
+      <span class="info-title">{title}</span>
+      <button
+        type="button"
+        class="info-close"
+        aria-label="Close"
+        onclick={() => (open = false)}
+      >
+        <i class="fas fa-xmark"></i>
+      </button>
+    </header>
+    <div class="info-body">
+      {@render children?.()}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .info-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    color: var(--ui-text-tertiary);
+    font-size: 0.95rem;
+    line-height: 1;
+    cursor: pointer;
+    transition: color var(--ui-transition-fast);
+  }
+
+  .info-btn:hover,
+  .info-btn[aria-expanded='true'] {
+    color: var(--ui-text-primary);
+  }
+
+  /* Fixed positioning escapes any parent overflow/stacking context. JS
+     anchors it to the right of the trigger; falls back to centered-below
+     then flips up near the viewport bottom. */
+  .info-popover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 22rem;
+    max-width: calc(100vw - var(--ui-space-24));
+    padding: 0;
+    background: var(--ui-surface-higher);
+    border: 1px solid var(--ui-border-high);
+    border-radius: var(--ui-radius-lg);
+    box-shadow: var(--ui-shadow-lg);
+    z-index: 1000;
+    color: var(--ui-text-secondary);
+    font-family: var(--ui-font-family, system-ui, sans-serif);
+    overflow: hidden;
+    visibility: hidden;
+    animation: info-popover-in 140ms ease-out;
+  }
+
+  .info-popover.ready {
+    visibility: visible;
+  }
+
+  .info-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-8) var(--ui-space-10) var(--ui-space-8) var(--ui-space-12);
+    border-bottom: 1px solid var(--ui-border-low);
+  }
+
+  /* Header sized to the body text (xs) so the title reads as a label, not
+     a heading that dwarfs the prose. Weight + color carry the hierarchy. */
+  .info-title {
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    line-height: 1.2;
+  }
+
+  .info-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ui-space-24);
+    height: var(--ui-space-24);
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-tertiary);
+    font-size: var(--ui-font-size-xs);
+    line-height: 1;
+    cursor: pointer;
+    transition: color var(--ui-transition-fast), background var(--ui-transition-fast);
+  }
+
+  .info-close:hover {
+    color: var(--ui-text-primary);
+    background: var(--ui-hover);
+  }
+
+  .info-body {
+    padding: var(--ui-space-12) var(--ui-space-16);
+  }
+
+  .info-popover :global(p) {
+    margin: 0 0 var(--ui-space-12) 0;
+    font-size: var(--ui-font-size-xs);
+    line-height: 1.55;
+  }
+
+  .info-popover :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .info-popover :global(strong) {
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+
+  .info-popover :global(em) {
+    font-style: italic;
+    color: var(--ui-text-primary);
+  }
+
+  .info-popover :global(code) {
+    font-family: var(--ui-font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    font-size: 0.92em;
+    color: var(--ui-text-primary);
+  }
+
+  @keyframes info-popover-in {
+    from { opacity: 0; transform: translateY(-3px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+</style>

package/src/editor/ui/UILetterSpacingSelector.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import UIVariantSelector from './UIVariantSelector.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();
+
+  const options = [
+    { key: 'tighter', label: 'Tighter', value: '-0.04em' },
+    { key: 'tight', label: 'Tight', value: '-0.02em' },
+    { key: 'normal', label: 'Normal', value: '0' },
+    { key: 'wide', label: 'Wide', value: '0.04em' },
+    { key: 'wider', label: 'Wider', value: '0.08em' },
+  ] as const;
+</script>
+
+<UIVariantSelector
+  {variable}
+  {component}
+  {canBeLinked}
+  {disabled}
+  {selectionsLocked}
+  varPrefix="--letter-spacing-"
+  {options}
+  {onchange}
+>
+  {#snippet option({ opt, active, select })}
+    <UIOptionItem {active} onclick={select}>
+      {#snippet preview()}
+        <span class="ls-sample" style="letter-spacing: var(--letter-spacing-{opt.key});">AV</span>
+      {/snippet}
+      {#snippet label()}
+        {opt.label}
+      {/snippet}
+      {#snippet meta()}
+        {opt.value}
+      {/snippet}
+    </UIOptionItem>
+  {/snippet}
+</UIVariantSelector>
+
+<style>
+  .ls-sample {
+    display: inline-block;
+    width: 1.75rem;
+    text-align: center;
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-primary);
+  }
+</style>

package/src/{ui → editor/ui}/UILineHeightSelector.svelte

@@ -21,11 +21,11 @@
   }: Props = $props();
 
   const options = [
-    { key: 'tight', label: 'Tight', value: '1' },
-    { key: 'snug', label: 'Snug', value: '1.2' },
-    { key: 'normal', label: 'Normal', value: '1.4' },
-    { key: 'relaxed', label: 'Relaxed', value: '1.5' },
-    { key: 'loose', label: 'Loose', value: '2' },
+    { key: 'xs', label: 'Extra Small', value: '1' },
+    { key: 'sm', label: 'Small', value: '1.25' },
+    { key: 'md', label: 'Medium', value: '1.5' },
+    { key: 'lg', label: 'Large', value: '1.75' },
+    { key: 'xl', label: 'Extra Large', value: '2' },
   ] as const;
 </script>
 

package/src/{ui → editor/ui}/UILinkToggle.svelte

@@ -31,7 +31,7 @@
     padding: var(--ui-space-2) var(--ui-space-8);
     height: 1.5rem;
     background: none;
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-secondary);
     font-family: inherit;
@@ -47,7 +47,7 @@
   .ui-link-toggle:hover {
     color: var(--ui-text-primary);
     background: var(--ui-hover);
-    border-color: var(--ui-border-strong);
+    border-color: var(--ui-border-higher);
   }
 
   .ui-link-toggle.linked {

package/src/{ui → editor/ui}/UIPaddingSelector.svelte

@@ -7,7 +7,7 @@
   import UITokenSelector from './UITokenSelector.svelte';
   import UIOptionList from './UIOptionList.svelte';
   import UIOptionItem from './UIOptionItem.svelte';
-  import { setCssVar, removeCssVar, CSS_VAR_CHANGE_EVENT } from '../lib/cssVarSync';
+  import { setCssVar, removeCssVar, CSS_VAR_CHANGE_EVENT } from '../core/cssVarSync';
   import {
     editorState,
     setComponentAlias,
@@ -17,7 +17,7 @@
     setComponentAliasLinked,
     unlinkComponentProperty,
     relinkComponentProperty,
-  } from '../lib/editorStore';
+  } from '../core/store/editorStore';
   import UIRelinkConfirmPopover from './UIRelinkConfirmPopover.svelte';
   import UILinkToggle from './UILinkToggle.svelte';
 
@@ -555,7 +555,7 @@
     height: 1.75rem;
     padding: 0;
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
@@ -565,7 +565,7 @@
   }
 
   .split-btn:hover:not(:disabled) {
-    border-color: var(--ui-border-strong);
+    border-color: var(--ui-border-higher);
     background: var(--ui-surface-high);
     color: var(--ui-text-primary);
   }
@@ -601,7 +601,7 @@
     padding: var(--ui-space-4) var(--ui-space-8);
     height: 1.5rem;
     background: none;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-muted);
     font-family: inherit;
@@ -613,7 +613,7 @@
   .merge-btn:hover:not(:disabled) {
     background: var(--ui-hover);
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
   }
 
   .merge-btn:disabled {