@motion-proto/live-tokens 0.6.2 → 0.7.1

package/src/{lib → editor/core/themes}/themeInit.ts

@@ -1,10 +1,10 @@
 import type { Theme } from './themeTypes';
-import { activeFileName } from './editorConfigStore';
-import { migrateThemeFonts } from './fontMigration';
-import { applyFontSources, applyFontStacks } from './fontLoader';
-import { loadFromFile, seedComponentsFromApi } from './editorStore';
-import { getActiveComponentConfig } from './componentConfigService';
-import { safeFetch } from './storage';
+import { activeFileName } from '../store/editorConfigStore';
+import { migrateThemeFonts } from '../fonts/fontMigration';
+import { applyFontSources, applyFontStacks } from '../fonts/fontLoader';
+import { loadFromFile, seedComponentsFromApi } from '../store/editorStore';
+import { getActiveComponentConfig } from '../components/componentConfigService';
+import { safeFetch } from '../storage/storage';
 
 interface ComponentSummaryDto {
   name: string;

package/src/{lib → editor/core/themes}/themeService.ts

@@ -1,14 +1,14 @@
 import { tick } from 'svelte';
 import type { Theme, ThemeMeta } from './themeTypes';
-import type { EditorState } from './editorTypes';
+import type { EditorState } from '../store/editorTypes';
 import {
   versionedFileResource,
   sanitizeFileName as sanitizeFileNameImpl,
-} from './files/versionedFileResource';
-import { loadFromFile as loadEditorState, toTheme, markSaved } from './editorStore';
-import { activeFileName } from './editorConfigStore';
-import { applyFontSources, applyFontStacks } from './fontLoader';
-import { migrateThemeFonts } from './fontMigration';
+} from '../storage/files/versionedFileResourceClient';
+import { loadFromFile as loadEditorState, toTheme, markSaved } from '../store/editorStore';
+import { activeFileName } from '../store/editorConfigStore';
+import { applyFontSources, applyFontStacks } from '../fonts/fontLoader';
+import { migrateThemeFonts } from '../fonts/fontMigration';
 
 // ── API helpers ──────────────────────────────────────────────
 //

package/src/{lib → editor/core/themes}/themeTypes.ts

@@ -1,4 +1,4 @@
-import type { CurveAnchor } from '../ui/curveEngine';
+import type { CurveAnchor } from '../../ui/curveEngine';
 
 export type GradientStyle = 'linear' | 'radial' | 'conic';
 
@@ -120,16 +120,17 @@ export interface ComponentConfigMeta {
 
 /**
  * Manifest that captures an entire site state — the active theme plus the
- * active config for every component. Loading a preset flips the relevant
+ * active config for every component. Loading a manifest flips the relevant
  * `_active.json` pointers; the underlying theme + component-config files stay
- * the source of truth, so editing them flows through any preset that
- * references them.
+ * the source of truth, so editing them flows through any manifest that
+ * references them. The currently-active manifest is the live snapshot: theme
+ * and component Adopts auto-patch its refs on the server.
  */
-export interface Preset {
+export interface Manifest {
   name: string;
   createdAt: string;
   updatedAt: string;
-  /** File basename (no `.json`) of the theme this preset pins. */
+  /** File basename (no `.json`) of the theme this manifest pins. */
   theme: string;
   /** Map of componentId → config file basename. Components omitted here fall
    *  back to "default" at apply time. */
@@ -138,9 +139,12 @@ export interface Preset {
   _fileName?: string;
 }
 
-export interface PresetMeta {
+export interface ManifestMeta {
   name: string;
   fileName: string;
   updatedAt: string;
   isActive: boolean;
+  /** `true` only for `default` — the protected baseline. Cannot be written
+   *  to or deleted, and theme/component Adopts cannot patch into it. */
+  isProtected: boolean;
 }

package/src/editor/index.ts

@@ -0,0 +1,69 @@
+export { default as LiveEditorOverlay } from './overlay/LiveEditorOverlay.svelte';
+export type { NavLink } from './core/routing/navLinkTypes';
+export { default as ColumnsOverlay } from './overlay/ColumnsOverlay.svelte';
+
+export { columnsVisible, toggleColumns, init as initColumnsOverlay } from './overlay/columnsOverlay';
+export { configureEditor, storageKey } from './core/store/editorConfig';
+export { activeFileName } from './core/store/editorConfigStore';
+export { init as initRouter, route, navigate } from './core/routing/router';
+export { init as initCssVarSync } from './core/cssVarSync';
+export { init as initEditorStore } from './core/store/editorStore';
+
+export { setCssVar, removeCssVar } from './core/cssVarSync';
+
+export {
+  listThemes,
+  loadTheme,
+  saveTheme,
+  deleteTheme,
+  getActiveTheme,
+  setActiveFile,
+  getProductionInfo,
+  setProductionFile,
+  sanitizeFileName,
+} from './core/themes/themeService';
+export type { ProductionInfo } from './core/themes/themeService';
+
+export type {
+  PaletteConfig,
+  Theme,
+  ThemeMeta,
+  GradientStyle,
+  GradientStop,
+  FontSource,
+  FontSourceKind,
+  FontFamily,
+  FontStack,
+  FontStackSlot,
+  FontStackVariable,
+  SystemCascadePreset,
+  GenericFamily,
+  Manifest,
+  ManifestMeta,
+} from './core/themes/themeTypes';
+
+export {
+  listManifests,
+  loadManifest,
+  saveManifest,
+  deleteManifest,
+  getActiveManifest,
+  setActiveManifest,
+  applyManifest,
+  saveAsManifest,
+  saveActiveManifest,
+} from './core/manifests/manifestService';
+export type { ApplyManifestResult } from './core/manifests/manifestService';
+
+export {
+  applyFontSources,
+  applyFontStacks,
+  resolveFontStackValues,
+  SYSTEM_CASCADES,
+} from './core/fonts/fontLoader';
+export { migrateThemeFonts, defaultFontSources, defaultFontStacks } from './core/fonts/fontMigration';
+
+export { hexToOklch, oklchToHex, gamutClamp } from './core/palettes/oklch';
+export type { Oklch } from './core/palettes/oklch';
+
+export { initializeTheme } from './core/themes/themeInit';

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),
@@ -454,9 +428,9 @@
   .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,8 +448,8 @@
 
   .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;
   }
@@ -483,11 +457,11 @@
   .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 +471,70 @@
     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;
+    font-size: var(--ui-font-size-md, 16px);
+    font-weight: var(--ui-font-weight-semibold, 600);
     letter-spacing: 0.02em;
-    color: #fff;
+    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 +543,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 +577,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 +589,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);