@motion-proto/live-tokens 0.6.2 → 0.7.1

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;

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 {

package/src/editor/ui/UIInfoPopover.svelte

@@ -0,0 +1,244 @@
+<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);
+    letter-spacing: 0.02em;
+    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/{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 {

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

@@ -3,10 +3,10 @@
 
   import { slide } from 'svelte/transition';
   import { cubicOut, cubicIn } from 'svelte/easing';
-  import { resolveAliasChain } from '../lib/tokenRegistry';
-  import { editorState } from '../lib/editorStore';
-  import { formatGradientStops } from '../lib/slices/gradients';
-  import type { GradientToken } from '../lib/editorTypes';
+  import { resolveAliasChain } from '../core/palettes/tokenRegistry';
+  import { editorState } from '../core/store/editorStore';
+  import { formatGradientStops } from '../core/themes/slices/gradients';
+  import type { GradientToken } from '../core/store/editorTypes';
   import UITokenSelector from './UITokenSelector.svelte';
 
   /** Honor prefers-reduced-motion: `t()` zeroes durations when the OS asks for
@@ -698,11 +698,11 @@
     align-self: stretch;
     flex: 1;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-faint);
-    background-image: linear-gradient(45deg, var(--ui-border-subtle) 25%, transparent 25%),
-      linear-gradient(-45deg, var(--ui-border-subtle) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--ui-border-subtle) 75%),
-      linear-gradient(-45deg, transparent 75%, var(--ui-border-subtle) 75%);
+    border: 1px solid var(--ui-border-low);
+    background-image: linear-gradient(45deg, var(--ui-border-low) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--ui-border-low) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--ui-border-low) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--ui-border-low) 75%);
     background-size: 8px 8px;
     background-position: 0 0, 0 4px, 4px -4px, -4px 0;
     overflow: hidden;
@@ -718,7 +718,7 @@
     align-items: center;
     gap: var(--ui-space-6);
     padding: var(--ui-space-6) var(--ui-space-8);
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
   }
 
   .opacity-control.hidden {
@@ -736,7 +736,7 @@
     height: 4px;
     -webkit-appearance: none;
     appearance: none;
-    background: var(--ui-border-default);
+    background: var(--ui-border);
     border-radius: 2px;
     outline: none;
     cursor: pointer;
@@ -755,7 +755,7 @@
     width: 3rem;
     padding: var(--ui-space-2) var(--ui-space-4);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-xs);
@@ -784,7 +784,7 @@
     padding: var(--ui-space-8) var(--ui-space-10);
     background: none;
     border: none;
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
     font-weight: var(--ui-font-weight-medium);
@@ -802,7 +802,7 @@
 
   .tab-bar {
     display: flex;
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
   }
 
   .tab-btn {
@@ -825,7 +825,7 @@
   }
 
   .tab-btn.assigned {
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
   }
 
   .tab-btn.selected {
@@ -881,7 +881,7 @@
     width: 2.5rem;
     height: 0.75rem;
     border-radius: 2px;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     position: relative;
     overflow: hidden;
   }
@@ -890,7 +890,7 @@
     width: 2.5rem;
     height: 0.75rem;
     border-radius: 2px;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
   }
 
   .family-divider {
@@ -901,7 +901,7 @@
     color: var(--ui-text-tertiary);
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    border-top: 1px solid var(--ui-border-faint);
+    border-top: 1px solid var(--ui-border-low);
   }
 
   .none-swatch::after {
@@ -915,8 +915,8 @@
       -45deg,
       transparent,
       transparent 3px,
-      var(--ui-border-subtle) 3px,
-      var(--ui-border-subtle) 4px
+      var(--ui-border-low) 3px,
+      var(--ui-border-low) 4px
     );
   }
 
@@ -954,7 +954,7 @@
 
   .step-item:hover {
     background: var(--ui-hover);
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
   }
 
   .step-item.active {
@@ -973,7 +973,7 @@
     width: 2rem;
     height: 1.5rem;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
   }
 
   .step-label {
@@ -1020,7 +1020,7 @@
 
   .orientation-reset.active {
     color: var(--ui-link-broken, var(--ui-text-secondary));
-    border-color: var(--ui-border-subtle);
+    border-color: var(--ui-border-low);
   }
 
   .orientation-reset:hover:not(:disabled) {
@@ -1055,7 +1055,7 @@
     justify-content: center;
     padding: 0;
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-secondary);
     font-size: 0.875rem;
@@ -1066,7 +1066,7 @@
 
   .dir-btn:hover {
     background: var(--ui-hover);
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
     color: var(--ui-text-primary);
   }
 
@@ -1086,7 +1086,7 @@
     width: 3rem;
     padding: var(--ui-space-2) var(--ui-space-4);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-xs);