@motion-proto/live-tokens 0.6.2 → 0.7.1

package/src/{pages → editor/pages}/Editor.svelte

@@ -2,9 +2,9 @@
   import { onMount } from 'svelte';
   import EditorShell from './EditorShell.svelte';
   import UICopyPopover from '../ui/UICopyPopover.svelte';
-  import { installEditorKeybindings } from '../lib/editorKeybindings';
-  import { initializeEditorStore } from '../lib/editorStore';
-  import { storageKey } from '../lib/editorConfig';
+  import { installEditorKeybindings } from '../core/store/editorKeybindings';
+  import { initializeEditorStore } from '../core/store/editorStore';
+  import { storageKey } from '../core/store/editorConfig';
   // Editor chrome + form controls + icon font must be JS imports (not @import
   // inside the style block) so Vite resolves them via the module graph
   // regardless of how the consumer compiles Svelte CSS (external ?lang.css vs
@@ -65,7 +65,7 @@
     gap: var(--ui-space-16);
     padding: var(--ui-space-10) var(--ui-space-16);
     background: black;
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
     min-height: 52px;
   }
 

package/src/{pages → editor/pages}/EditorShell.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
   import { run } from 'svelte/legacy';
 
-  import { onMount, onDestroy } from 'svelte';
+  import { onMount } from 'svelte';
   import { get } from 'svelte/store';
   import VariablesTab from '../ui/VariablesTab.svelte';
   import ThemeFileManager from '../ui/ThemeFileManager.svelte';
   import EditorViewSwitcher from '../ui/EditorViewSwitcher.svelte';
   import ComponentsTab from '../component-editor/scaffolding/ComponentsTab.svelte';
-  import PresetFileManager from '../ui/PresetFileManager.svelte';
-  import { persistTheme, hydrateTheme } from '../lib/themeService';
-  import { scrollSectionIntoView } from '../lib/scrollSection';
-  import { editorState } from '../lib/editorStore';
-  import { editorView, sidebarCondensed, selectedComponent } from '../lib/editorViewStore';
-  import { componentDirty } from '../lib/editorStore';
+  import ManifestFileManager from '../ui/ManifestFileManager.svelte';
+  import { persistTheme, hydrateTheme } from '../core/themes/themeService';
+  import { scrollSectionIntoView } from '../ui/scrollSection';
+  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 { listComponents } from '../lib/componentConfigService';
+  import { listComponents } from '../core/components/componentConfigService';
 
   const tokenNavItems = [
     { id: 'palette-editor', label: 'Palette Editor', icon: 'fas fa-palette' },
@@ -34,11 +34,9 @@
   let selectedTokenSection: string | null = $state(null);
   let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = $state('idle');
 
-  let shellEl: HTMLElement | null = $state(null);
-  let shellWidth = $state(1024);
-  const CONDENSE_BELOW = 520;
-
-  let condensed = $derived($sidebarCondensed === 'auto' ? shellWidth < CONDENSE_BELOW : $sidebarCondensed);
+  // 'auto' = open by default. Auto-condensing on shellWidth caused a bounce
+  // as the overlay panel grew past the threshold mid-animation.
+  let condensed = $derived($sidebarCondensed === 'auto' ? false : $sidebarCondensed);
 
   const HINT_DELAY_MS = 80;
   let hintLabel: string | null = $state(null);
@@ -79,10 +77,7 @@
   }
 
   function toggleCondensed() {
-    sidebarCondensed.update((v) => {
-      const isCondensedNow = v === 'auto' ? shellWidth < CONDENSE_BELOW : v;
-      return !isCondensedNow;
-    });
+    sidebarCondensed.update((v) => !(v === true));
   }
 
   async function handleSave(detail: { fileName: string; displayName: string }) {
@@ -106,16 +101,7 @@
     }
   }
 
-  let ro: ResizeObserver | null = null;
   onMount(async () => {
-    if (shellEl && typeof ResizeObserver !== 'undefined') {
-      ro = new ResizeObserver((entries) => {
-        const w = entries[0]?.contentRect.width;
-        if (typeof w === 'number') shellWidth = w;
-      });
-      ro.observe(shellEl);
-      shellWidth = shellEl.clientWidth;
-    }
     try {
       const summaries = await listComponents();
       validateRegistryAgainstServerScan(summaries.map((s) => s.name));
@@ -123,13 +109,9 @@
       // server unreachable — skip validation
     }
   });
-
-  onDestroy(() => {
-    ro?.disconnect();
-  });
 </script>
 
-<div class="layout" class:condensed bind:this={shellEl}>
+<div class="layout" class:condensed>
   <nav class="sidebar" class:condensed>
     <div class="rail-toggle-row">
       <button
@@ -186,7 +168,7 @@
       </div>
       {#if !condensed}
         <div class="sidebar-footer">
-          <PresetFileManager />
+          <ManifestFileManager />
         </div>
       {/if}
     {/if}
@@ -228,7 +210,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     background: black;
-    border-right: 1px solid var(--ui-border-faint);
+    border-right: 1px solid var(--ui-border-low);
     display: flex;
     z-index: 1;
     flex-direction: column;
@@ -238,7 +220,7 @@
   .rail-toggle-row {
     display: flex;
     justify-content: flex-end;
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
   }
 
   .rail-toggle {
@@ -356,7 +338,7 @@
     flex-shrink: 0;
     margin-top: auto;
     padding: var(--ui-space-12) var(--ui-space-8) var(--ui-space-16);
-    border-top: 1px solid var(--ui-border-faint);
+    border-top: 1px solid var(--ui-border-low);
   }
 
   .rail-hint {
@@ -366,7 +348,7 @@
     z-index: 50;
     padding: var(--ui-space-4) var(--ui-space-8);
     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-primary);
     font-size: var(--ui-font-size-sm);

package/src/{styles → editor/styles}/ui-editor.css

@@ -1,4 +1,4 @@
-/* Editor UI chrome — `--ui-*` tokens. Theme-immune; see CONVENTIONS.md. */
+/* `--ui-*` tokens, theme-immune. See CONVENTIONS.md. */
 
 .editor-page {
   --ui-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -13,7 +13,7 @@
 }
 
 .editor-page {
-  /* Grayscale ramp — source of truth; lower number = darker. */
+  /* Grayscale ramp; lower number = darker. */
   --ui-gray-50:  #050505;
   --ui-gray-100: #0a0a0a;
   --ui-gray-150: #0f0f0f;
@@ -38,23 +38,19 @@
   --ui-text-accent:     var(--ui-gray-950);
   --ui-text-success:    var(--ui-gray-850);
 
-  /* Bright amber used for selection dots, focus halos, and "unsaved" / "dirty"
-     state indicators. Single token shared by all "this is the live thing"
-     surfaces so the editor speaks one selection language. */
+  /* Shared "this is live" amber: selection, focus, dirty state. */
   --ui-highlight:       #ffac28;
 
-  /* Link-state signals — bar attached to a control's left edge when its value
-     is shared with siblings (active), popped off into the column gap when the
-     control has broken away from its sibling group (broken). */
+  /* Link-state bar: active = attached to control edge, broken = popped into column gap. */
   --ui-link-active:       #6cd0c2;
   --ui-link-broken:       #f0c34a;
   --ui-link-broken-glow:  rgba(240, 195, 74, 0.28);
 
-  --ui-border-faint:    var(--ui-gray-400);
-  --ui-border-subtle:   var(--ui-gray-500);
-  --ui-border-default:  var(--ui-gray-600);
-  --ui-border-medium:   var(--ui-gray-700);
-  --ui-border-strong:   var(--ui-gray-800);
+  --ui-border-low:    var(--ui-gray-400);
+  --ui-border-low:      var(--ui-gray-500);
+  --ui-border:          var(--ui-gray-600);
+  --ui-border-high:     var(--ui-gray-700);
+  --ui-border-higher:   var(--ui-gray-800);
 
   --ui-surface-lowest:  var(--ui-gray-50);
   --ui-surface-lower:   var(--ui-gray-100);
@@ -91,14 +87,14 @@
   --ui-space-32: 2rem;
   --ui-space-48: 3rem;
 
-  --ui-font-size-xs:  0.8125rem;  /* 13px */
+  --ui-font-size-xs:  0.75rem;    /* 12px */
   --ui-font-size-sm:  0.875rem;   /* 14px */
-  --ui-font-size-md:  0.9375rem;  /* 15px */
-  --ui-font-size-lg:  1.0625rem;  /* 17px */
-  --ui-font-size-xl:  1.1875rem;  /* 19px */
-  --ui-font-size-2xl: 1.3125rem;  /* 21px */
-  --ui-font-size-3xl: 1.625rem;   /* 26px */
-  --ui-font-size-4xl: 2rem;       /* 32px */
+  --ui-font-size-md:  1rem;       /* 16px — base */
+  --ui-font-size-lg:  1.125rem;   /* 18px */
+  --ui-font-size-xl:  1.25rem;    /* 20px */
+  --ui-font-size-2xl: 1.5rem;     /* 24px */
+  --ui-font-size-3xl: 1.75rem;    /* 28px */
+  --ui-font-size-4xl: 2.25rem;    /* 36px */
 
   --ui-font-weight-normal:    400;
   --ui-font-weight-medium:    500;
@@ -118,9 +114,33 @@
   --ui-opacity-disabled: 0.5;
 }
 
-/* Dev overlay tokens — scoped to .lt-app to reach chrome outside .editor-page. */
+/* Dev overlay tokens, scoped to .lt-app for chrome outside .editor-page. */
 .lt-app {
   --ui-overlay-fill:   rgba(128, 128, 128, 0.06);
   --ui-overlay-border: rgba(128, 128, 128, 0.32);
   --ui-overlay-num:    rgba(128, 128, 128, 0.75);
 }
+
+/* Section primitives: shared chrome for "named section in a bordered card". Body layout stays per-call-site. */
+.editor-section-card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--ui-space-20);
+  background: var(--ui-surface-low);
+  border: 1px solid var(--ui-border-low);
+  border-radius: var(--ui-radius-md);
+}
+
+.editor-section-title {
+  margin: 0;
+  font-size: var(--ui-font-size-xl);
+  font-weight: var(--ui-font-weight-semibold);
+  color: var(--ui-text-primary);
+}
+
+.editor-subsection-title {
+  margin: 0;
+  font-size: var(--ui-font-size-lg);
+  font-weight: var(--ui-font-weight-semibold);
+  color: var(--ui-text-primary);
+}

package/src/{styles → editor/styles}/ui-form-controls.css

@@ -61,7 +61,7 @@
   padding: 0 var(--ui-space-16);
   min-height: 2.375rem;  /* ~38px to match button height */
   background: var(--ui-surface-lowest) !important;
-  border: 1px solid var(--ui-border-default) !important;
+  border: 1px solid var(--ui-border) !important;
   border-radius: var(--ui-radius-md);
   color: var(--ui-text-primary) !important;
   font-family: var(--ui-font-sans);
@@ -87,12 +87,12 @@
 
 .ui-form-select:hover:not(:disabled) {
   background-color: var(--ui-surface-low) !important;
-  border-color: var(--ui-border-medium) !important;
+  border-color: var(--ui-border-high) !important;
 }
 
 .ui-form-select:focus {
   outline: none;
-  border-color: var(--ui-border-strong) !important;
+  border-color: var(--ui-border-higher) !important;
   box-shadow: 0 0 0 2px hsla(0, 58%, 50%, 0.2);
 }
 
@@ -107,7 +107,7 @@
 
 .ui-form-select:disabled {
   background-color: var(--ui-surface-lowest) !important;
-  border-color: var(--ui-border-faint) !important;
+  border-color: var(--ui-border-low) !important;
   color: var(--ui-text-disabled) !important;
   cursor: not-allowed;
 }
@@ -134,7 +134,7 @@
 .ui-form-input {
   padding: var(--ui-space-8);
   background: var(--ui-surface-lowest);
-  border: 1px solid var(--ui-border-default);
+  border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius-md);
   color: var(--ui-text-primary);
   font-family: var(--ui-font-sans);
@@ -143,19 +143,19 @@
 }
 
 .ui-form-input:hover:not(:disabled) {
-  border-color: var(--ui-border-strong);
+  border-color: var(--ui-border-higher);
   background: var(--ui-surface-low);
 }
 
 .ui-form-input:focus {
   outline: none;
-  border-color: var(--ui-border-strong);
+  border-color: var(--ui-border-higher);
   box-shadow: 0 0 0 3px hsla(240, 5%, 38%, 0.2);
 }
 
 .ui-form-input:disabled {
   background: var(--ui-surface-lowest);
-  border-color: var(--ui-border-faint);
+  border-color: var(--ui-border-low);
   color: var(--ui-text-disabled);
   cursor: not-allowed;
 }

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

@@ -454,7 +454,7 @@
     width: 100%;
     height: 100%;
     background: transparent;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     cursor: crosshair;
     display: block;
@@ -467,7 +467,7 @@
   }
 
   .curve-grid {
-    stroke: var(--ui-border-faint);
+    stroke: var(--ui-border-low);
     stroke-width: 0.5;
     vector-effect: non-scaling-stroke;
   }
@@ -477,7 +477,7 @@
   }
 
   .curve-step-line {
-    stroke: var(--ui-border-faint);
+    stroke: var(--ui-border-low);
     stroke-width: 0.5;
     vector-effect: non-scaling-stroke;
 
@@ -581,7 +581,7 @@
     align-items: center;
     gap: var(--ui-space-4);
     padding: var(--ui-space-2) var(--ui-space-6);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     background: var(--ui-surface-lowest);
     cursor: pointer;
@@ -590,13 +590,13 @@
   }
 
   .curve-tool-btn:hover {
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
     color: var(--ui-text-secondary);
     background: var(--ui-surface-high);
   }
 
   .curve-tool-btn.active {
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
     background: var(--ui-surface-highest);
     color: var(--ui-text-primary);
   }
@@ -634,14 +634,14 @@
     width: 1.5rem;
     height: 1rem;
     padding: 0;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     background: var(--ui-surface-lowest);
     cursor: pointer;
   }
 
   .curve-template-btn:hover {
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
     background: var(--ui-surface-high);
   }
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { hexToOklch, oklchToHex, gamutClamp } from '../lib/oklch';
-  import InlineEditActions from '../components/InlineEditActions.svelte';
-  import Button from '../components/Button.svelte';
+  import { hexToOklch, oklchToHex, gamutClamp } from '../core/palettes/oklch';
+  import InlineEditActions from '../../system/components/InlineEditActions.svelte';
+  import Button from '../../system/components/Button.svelte';
 
   
 
@@ -323,7 +323,7 @@
     gap: var(--ui-space-12);
     padding: var(--ui-space-12);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
   }
 
@@ -338,7 +338,7 @@
     width: 1.5rem;
     height: 1.5rem;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     flex-shrink: 0;
   }
 
@@ -349,7 +349,7 @@
     width: 1.5rem;
     height: 1.5rem;
     padding: 0;
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     border-radius: var(--ui-radius-sm);
     background: var(--ui-hover);
     color: var(--ui-text-secondary);
@@ -360,7 +360,7 @@
     &:hover {
       background: var(--ui-hover-high);
       color: var(--ui-text-primary);
-      border-color: var(--ui-border-strong);
+      border-color: var(--ui-border-higher);
     }
   }
 
@@ -383,7 +383,7 @@
   }
 
   .hsl-hex:hover {
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
     background: var(--ui-surface-low);
   }
 
@@ -392,7 +392,7 @@
     color: var(--ui-text-accent);
     font-family: var(--ui-font-mono);
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-strong);
+    border: 1px solid var(--ui-border-higher);
     border-radius: var(--ui-radius-sm);
     padding: var(--ui-space-2) var(--ui-space-4);
     width: 5.5rem;
@@ -438,7 +438,7 @@
     position: relative;
     height: 1.25rem;
     border-radius: var(--ui-radius-md);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     flex: 1;
     min-width: 6rem;
   }
@@ -487,7 +487,7 @@
   }
 
   .slider-track input[type="range"]:focus-visible {
-    outline: 2px solid var(--ui-border-medium);
+    outline: 2px solid var(--ui-border-high);
     outline-offset: 2px;
   }
 
@@ -499,7 +499,7 @@
     text-align: right;
     flex-shrink: 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);
     padding: var(--ui-space-2) var(--ui-space-4);
     -moz-appearance: textfield;
@@ -518,7 +518,7 @@
 
   .hsl-slider-input:focus {
     outline: none;
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .hsl-slider-unit {

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { editorView } from '../lib/editorViewStore';
-  import { parentRoute } from '../lib/parentRouteStore';
+  import { editorView } from '../core/store/editorViewStore';
+  import { parentRoute } from '../core/routing/parentRouteStore';
 
   interface Props {
     condensed?: boolean;
@@ -36,7 +36,7 @@
   </button>
 {:else}
   <div class="seg-group">
-    <span class="seg-label">Editor</span>
+    <span class="seg-label">Editor Mode</span>
     <div class="seg" role="tablist" aria-label="Editor view">
       <button
         type="button"
@@ -77,19 +77,21 @@
   .seg-label {
     font-size: 10px;
     font-weight: var(--ui-font-weight-semibold);
-    letter-spacing: 0.08em;
+    letter-spacing: 0.04em;
     text-transform: uppercase;
     color: #fff;
     padding-left: var(--ui-space-2);
+    margin-bottom: 2px;
   }
 
   .seg {
     display: flex;
     flex-direction: column;
     gap: 2px;
-    padding: 3px;
+    padding: 4px;
+    margin-bottom: 4px;
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-text-primary);
     border-radius: var(--ui-radius-lg);
     /* Fill the sidebar's content area so the box width is fixed by the rail,
        not by which label happens to be active. Buttons inherit this width via