@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/{lib → editor/overlay}/LiveEditorOverlay.svelte

@@ -1,8 +1,5 @@
 <script module lang="ts">
-  // __PROJECT_ROOT__ is injected by the themeFileApi Vite plugin as a `define`.
-  // Consumers don't need to configure it themselves. We declare it locally so
-  // this component's type-check passes in consumer projects that haven't added
-  // the ambient global to their tsconfig.
+  // __PROJECT_ROOT__ / __APP_VERSION__ are Vite-injected defines.
   declare const __PROJECT_ROOT__: string | undefined;
   declare const __APP_VERSION__: string | undefined;
   const INJECTED_PROJECT_ROOT: string =
@@ -17,13 +14,14 @@
   import { onMount, onDestroy } from 'svelte';
   import { fade } from 'svelte/transition';
   import { cubicInOut } from 'svelte/easing';
-  import { route, navigate } from './router';
+  import { route, navigate } from '../core/routing/router';
   import { columnsVisible, toggleColumns } from './columnsOverlay';
-  import { storageKey } from './editorConfig';
+  import { storageKey } from '../core/store/editorConfig';
   import { overlayOpen } from './overlayState';
-  import { quietGet, quietSet } from './storage';
-  import { postParentRoute } from './parentRouteStore';
-  import type { NavLink } from './navLinkTypes';
+  import { quietGet, quietSet } from '../core/storage/storage';
+  import { postParentRoute } from '../core/routing/parentRouteStore';
+  import UIPillButton from '../ui/UIPillButton.svelte';
+  import type { NavLink } from '../core/routing/navLinkTypes';
 
   interface Props {
     open?: boolean | undefined;
@@ -43,15 +41,12 @@
     projectRoot = INJECTED_PROJECT_ROOT
   }: Props = $props();
 
-  // Self-gate: only render in dev, and never inside an iframe (the /editor
-  // page embeds this same app in an iframe and would otherwise recursively
-  // mount another overlay).
+  // Dev-only; skip inside iframe (editor route embeds this app).
   const isDev = import.meta.env.DEV;
   const isInIframe = typeof window !== 'undefined' && window.parent !== window;
   const enabled = isDev && !isInIframe;
 
-  // Self-manage `open` when the consumer doesn't bind it. When they do, their
-  // binding wins and we skip our own persistence.
+  // Persist `open` only when consumer doesn't bind it.
   const OPEN_KEY = storageKey('overlay-open');
   const consumerControlsOpen = open !== undefined;
   if (!consumerControlsOpen) {
@@ -66,15 +61,12 @@
     overlayOpen.set(!!open);
   });
 
-  // Hide the overlay entirely when the user is already on the editor route
-  // (the editor page has its own chrome).
+  // Editor route has its own chrome — hide overlay there.
   let onEditorPath = $derived($route === editorPath);
   let sourceFile = $derived(pageSources[$route]);
   let showSource = $derived(!!sourceFile && !!projectRoot && !hidePageSourceOn.includes($route));
 
-  // Mount the iframe the first time the editor is shown, then keep it mounted
-  // across hide/show cycles so editor state (unsaved slider values, scroll
-  // position, expanded sections) survives.
+  // Mount iframe on first open, then keep it to preserve editor state across hide/show.
   let hasBeenOpen: boolean = $state(!!open);
   run(() => {
     if (open) hasBeenOpen = true;
@@ -134,22 +126,17 @@
   let dockedWidth: number = $state(Math.max(MIN_WIDTH, initial.dockedWidth));
   let floating = $state({ ...initial.floating });
 
-  // Approximate natural size of the collapsed pill (Editor title + columns toggle).
-  // A few pixels of overshoot is fine — the panel has overflow:hidden.
-  const COLLAPSED_WIDTH = 184;
-  const COLLAPSED_HEIGHT = 38;
+  // Collapsed-pill size; slight overshoot is fine (overflow:hidden).
+  const COLLAPSED_WIDTH = 200;
+  const COLLAPSED_HEIGHT = 44;
 
-  // Fade timing for the buttons that only render when open (float toggle, spacer,
-  // nav links, page-source). The bar's grow/shrink + iframe fade live in CSS vars
-  // at the top of the style block.
+  // Fade for open-only buttons (bar timing lives in CSS vars below).
   const BTN_FADE = { duration: 130, easing: cubicInOut };
 
-  // Suppress CSS transitions during gestures and mode swaps so dragging doesn't
-  // re-animate every frame, and floating↔docked swaps snap cleanly.
+  // Suppress CSS transitions during gestures + mode swaps.
   let suppressTransition = $state(false);
 
-  // Gesture state — a transparent scrim covers the iframe while any gesture is active
-  // so pointer events land on the panel, not on content inside the iframe.
+  // Scrim catches pointer events during gestures so they hit the panel, not the iframe.
   let gesturing: 'drag' | 'resize-left' | 'resize-se' | null = $state(null);
 
   function startDrag(e: PointerEvent) {
@@ -185,7 +172,7 @@
     const startX = e.clientX;
     const origWidth = dockedWidth;
     function move(ev: PointerEvent) {
-      // Dragging left increases width (panel is anchored to the right edge)
+      // Panel anchored right — drag left grows width.
       dockedWidth = clamp(origWidth + (startX - ev.clientX), MIN_WIDTH, window.innerWidth - 120);
     }
     function up() {
@@ -230,7 +217,7 @@
   function toggleMode() {
     suppressTransition = true;
     mode = mode === 'docked' ? 'floating' : 'docked';
-    // Snap the floating rect back inside the viewport if it drifted off-screen since last use
+    // Re-clamp floating rect into viewport in case it drifted off-screen.
     if (mode === 'floating') {
       floating = {
         x: clamp(floating.x, 0, window.innerWidth - MIN_WIDTH),
@@ -248,8 +235,7 @@
   }
 
   function handleHeaderDblClick(e: MouseEvent) {
-    // Ignore double-clicks on buttons so toggling mode/fullscreen/show-hide
-    // doesn't also fire the dblclick handler.
+    // Skip dblclick on buttons so their handlers don't double-fire.
     if ((e.target as HTMLElement).closest('button')) return;
     toggleOpen();
   }
@@ -327,15 +313,13 @@
     {/if}
 
     {#if open && showSource}
-      <a
-        class="hdr-btn text source"
-        href="vscode://file/{projectRoot}/{sourceFile}"
-        title="Open {sourceFile} in VS Code"
-        transition:fade={BTN_FADE}
-      >
-        <i class="fas fa-code"></i>
-        Show page source
-      </a>
+      <span class="source-pill" transition:fade={BTN_FADE}>
+        <UIPillButton
+          icon="fa-code"
+          href="vscode://file/{projectRoot}/{sourceFile}"
+          title="Open {sourceFile} in VS Code"
+        >Show page source</UIPillButton>
+      </span>
     {/if}
 
     {#if open && navLinks.length > 0}
@@ -386,8 +370,7 @@
 
 <style>
   .lt-overlay {
-    /* Animation knobs. bar = panel grow/shrink, pane = iframe fade.
-       open = collapsed to expanded, close = expanded to collapsed. */
+    /* Animation knobs: bar = panel grow/shrink. */
     --bar-open-dur: 240ms;
     --bar-open-ease: cubic-bezier(0.65, 0, 0.35, 1);
     --bar-open-delay: 0ms;
@@ -395,22 +378,15 @@
     --bar-close-ease: cubic-bezier(0.65, 0, 0.35, 1);
     --bar-close-delay: 70ms;
 
-    --pane-open-dur: 140ms;
-    --pane-open-ease: cubic-bezier(0.65, 0, 0.35, 1);
-    --pane-open-delay: 140ms;
-    --pane-close-dur: 80ms;
-    --pane-close-ease: cubic-bezier(0.65, 0, 0.35, 1);
-    --pane-close-delay: 0ms;
-
     display: flex;
     flex-direction: column;
-    background: #0a0a0a;
+    background: var(--ui-surface-lower, #0a0a0a);
     border: 1px solid rgba(255, 255, 255, 0.12);
     box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
     z-index: 2000;
     overflow: hidden;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-    color: #fff;
+    font-family: var(--ui-font-sans, system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
+    color: var(--ui-text-primary, #fff);
     transition:
       width var(--bar-open-dur) var(--bar-open-ease) var(--bar-open-delay),
       height var(--bar-open-dur) var(--bar-open-ease) var(--bar-open-delay),
@@ -425,14 +401,12 @@
   }
 
   .lt-overlay.floating {
-    border-radius: 8px;
+    border-radius: var(--ui-radius-xl, 8px);
   }
 
-  /* Hidden state: the editor panel is collapsed to just the header bar,
-     pinned to the top-right. The iframe stays mounted; its container fades
-     to opacity 0 and the panel shrinks around it. */
+  /* Collapsed state: pinned top-right; iframe stays mounted, clipped by overflow:hidden. */
   .lt-overlay.hidden {
-    border-radius: 6px;
+    border-radius: var(--ui-radius-lg, 6px);
     transition:
       width var(--bar-close-dur) var(--bar-close-ease) var(--bar-close-delay),
       height var(--bar-close-dur) var(--bar-close-ease) var(--bar-close-delay),
@@ -448,15 +422,15 @@
 
   .lt-overlay.no-transition,
   .lt-overlay.no-transition .frame-wrap {
-    transition: none !important;
+    transition: none;
   }
 
   .header {
     display: flex;
     align-items: center;
-    gap: 6px;
-    padding: 6px 10px;
-    background: #111;
+    gap: var(--ui-space-6, 6px);
+    padding: var(--ui-space-6, 6px) var(--ui-space-10, 10px);
+    background: var(--ui-surface-low, #111);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     cursor: default;
     flex-shrink: 0;
@@ -465,7 +439,7 @@
 
   .lt-overlay.hidden .header {
     border-bottom: none;
-    padding: 5px 8px;
+    padding: 5px var(--ui-space-8, 8px);
   }
 
   .lt-overlay.floating .header {
@@ -474,20 +448,18 @@
 
   .hdr-btn.title {
     gap: 7px;
-    font-size: 13px;
-    font-weight: 600;
+    font-size: var(--ui-font-size-md, 16px);
+    font-weight: var(--ui-font-weight-semibold, 600);
     color: rgba(255, 255, 255, 0.85);
-    letter-spacing: 0.02em;
   }
 
   .spacer { flex: 1; }
 
   .version {
-    font-size: 10px;
-    font-weight: 500;
+    font-size: var(--ui-font-size-md, 16px);
+    font-weight: var(--ui-font-weight-medium, 500);
     color: rgba(255, 255, 255, 0.4);
-    letter-spacing: 0.02em;
-    margin-left: 2px;
+    margin-left: var(--ui-space-2, 2px);
     user-select: none;
   }
 
@@ -497,86 +469,69 @@
     justify-content: center;
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 4px;
+    border-radius: var(--ui-radius-md, 4px);
     color: rgba(255, 255, 255, 0.75);
     cursor: pointer;
-    transition: background 0.1s, color 0.1s;
+    transition: background var(--ui-transition-fast, 120ms ease), color var(--ui-transition-fast, 120ms ease);
     font-family: inherit;
   }
 
   .hdr-btn.icon {
-    width: 26px;
-    height: 26px;
-    font-size: 11px;
+    padding: var(--ui-space-6, 6px);
+    aspect-ratio: 1;
+    font-size: var(--ui-font-size-md, 16px);
   }
 
   .hdr-btn.text {
-    height: 26px;
-    padding: 0 10px;
-    font-size: 12px;
-    font-weight: 500;
-  }
-
-  a.hdr-btn.source {
-    gap: 6px;
-    text-decoration: none;
-    background: rgba(255, 255, 255, 0.06);
-    border-color: rgba(255, 255, 255, 0.45);
-    border-radius: 999px;
-    padding: 0 14px;
-    color: rgba(255, 255, 255, 0.92);
+    padding: var(--ui-space-6, 6px) var(--ui-space-10, 10px);
+    font-size: var(--ui-font-size-md, 16px);
+    font-weight: var(--ui-font-weight-medium, 500);
   }
 
-  a.hdr-btn.source:hover {
-    background: rgba(255, 255, 255, 0.14);
-    border-color: rgba(255, 255, 255, 0.6);
-  }
-
-  a.hdr-btn.source i {
-    color: rgba(255, 255, 255, 0.6);
+  .source-pill {
+    display: inline-flex;
   }
 
   .hdr-btn.nav {
-    height: 26px;
-    padding: 0 9px;
-    gap: 5px;
-    font-size: 11px;
-    font-weight: 500;
+    padding: var(--ui-space-6, 6px) var(--ui-space-8, 8px);
+    gap: var(--ui-space-4, 4px);
+    font-size: var(--ui-font-size-md, 16px);
+    font-weight: var(--ui-font-weight-medium, 500);
   }
 
   .hdr-btn:hover {
     background: rgba(255, 255, 255, 0.08);
-    color: #fff;
+    color: var(--ui-text-primary, #fff);
   }
 
   .hdr-btn.active {
     background: rgba(255, 255, 255, 0.12);
-    color: #fff;
+    color: var(--ui-text-primary, #fff);
     border-color: rgba(255, 255, 255, 0.18);
   }
 
   .seg-group {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--ui-space-8, 8px);
     margin-left: 18px;
-    margin-right: 4px;
+    margin-right: var(--ui-space-4, 4px);
   }
 
   .seg-label {
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    color: #fff;
+    font-size: var(--ui-font-size-md, 16px);
+    font-weight: var(--ui-font-weight-semibold, 600);
+    color: var(--ui-text-primary, #fff);
   }
 
   .seg-bar {
     display: inline-flex;
     align-items: center;
+    gap: var(--ui-space-4, 4px);
     padding: 3px;
     background: rgba(0, 0, 0, 0.55);
     border: 1px solid rgba(255, 255, 255, 0.28);
-    border-radius: 6px;
+    border-radius: var(--ui-radius-lg, 6px);
     box-shadow:
       inset 0 1px 0 rgba(0, 0, 0, 0.5),
       0 0 0 1px rgba(0, 0, 0, 0.4);
@@ -585,22 +540,24 @@
   .seg-pill {
     display: inline-flex;
     align-items: center;
-    gap: 5px;
-    height: 22px;
-    padding: 0 9px;
+    gap: var(--ui-space-4, 4px);
+    padding: var(--ui-space-4, 4px) var(--ui-space-8, 8px);
     background: transparent;
     border: 1px solid transparent;
     border-radius: 3px;
     color: rgba(255, 255, 255, 0.6);
     font-family: inherit;
-    font-size: 11px;
-    font-weight: 500;
+    font-size: var(--ui-font-size-md, 16px);
+    font-weight: var(--ui-font-weight-medium, 500);
     cursor: pointer;
-    transition: background 0.1s, color 0.1s, border-color 0.1s;
+    transition:
+      background var(--ui-transition-fast, 120ms ease),
+      color var(--ui-transition-fast, 120ms ease),
+      border-color var(--ui-transition-fast, 120ms ease);
   }
 
   .seg-pill i {
-    font-size: 10px;
+    font-size: var(--ui-font-size-md, 16px);
     opacity: 0.85;
   }
 
@@ -617,13 +574,11 @@
     opacity: 0.5;
   }
 
-  /* Outlined active — quieter than the iframe's filled switcher, so the two
-     segmented controls read as siblings, not twins. */
+  /* Outlined (not filled) so this reads as sibling to iframe's switcher, not a twin. */
   .seg-pill.active {
-    color: #fff;
-    border-color: rgba(255, 255, 255, 0.3);
-    background: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
+    color: var(--ui-text-primary, #fff);
+    border-color: rgba(255, 255, 255, 0.5);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.25) 100%);
   }
 
   .frame-wrap {
@@ -631,14 +586,10 @@
     flex: 1;
     min-height: 0;
     background: #000;
-    transition: opacity var(--pane-open-dur) var(--pane-open-ease) var(--pane-open-delay);
-    opacity: 1;
   }
 
   .lt-overlay.hidden .frame-wrap {
-    opacity: 0;
     pointer-events: none;
-    transition: opacity var(--pane-close-dur) var(--pane-close-ease) var(--pane-close-delay);
   }
 
   .editor-frame {

package/src/{lib → editor/overlay}/columnsOverlay.ts

@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
-import { storageKey } from './editorConfig';
-import { quietGet, quietSet } from './storage';
+import { storageKey } from '../core/store/editorConfig';
+import { quietGet, quietSet } from '../core/storage/storage';
 
 function getStorageKey(): string {
   return storageKey('columns-visible');

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

@@ -3,12 +3,12 @@
 
   import { onMount, onDestroy } from 'svelte';
   import ComponentsTab from '../component-editor/scaffolding/ComponentsTab.svelte';
-  import PresetFileManager from '../ui/PresetFileManager.svelte';
-  import { navigate } from '../lib/router';
+  import ManifestFileManager from '../ui/ManifestFileManager.svelte';
+  import { navigate } from '../core/routing/router';
   import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
-  import { listComponents } from '../lib/componentConfigService';
-  import { selectedComponent } from '../lib/editorViewStore';
-  import { componentDirty } from '../lib/editorStore';
+  import { listComponents } from '../core/components/componentConfigService';
+  import { selectedComponent } from '../core/store/editorViewStore';
+  import { componentDirty } from '../core/store/editorStore';
   // 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
@@ -165,7 +165,7 @@
     </div>
     {#if drawerOpen}
       <div class="sidebar-footer">
-        <PresetFileManager />
+        <ManifestFileManager />
       </div>
     {/if}
   </nav>
@@ -201,7 +201,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;
     flex-direction: column;
     min-width: 0;
@@ -213,7 +213,7 @@
     grid-template-columns: 48px 1fr;
     align-items: center;
     padding: var(--ui-space-12) 0 var(--ui-space-12) 0;
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
   }
 
   .rail-toggle {
@@ -286,7 +286,7 @@
     left: 48px;
     right: 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-md);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
     padding: var(--ui-space-4);
@@ -335,7 +335,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);
   }
 
   .nav-item {
@@ -395,7 +395,7 @@
   }
 
   .content {
-    padding: 0 var(--ui-space-32);
+    padding: 1rem var(--ui-space-32) 0;
     background: black;
     min-width: 0;
     height: 100vh;
@@ -409,7 +409,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/{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);