@motion-proto/live-tokens 0.1.0 → 0.3.1

package/src/data/google-fonts.json

@@ -0,0 +1,75 @@
+{
+  "updatedAt": "2026-04-17",
+  "note": "Curated list of popular Google Fonts. Regenerate via scripts/fetch-google-fonts.ts to pull the full catalog.",
+  "fonts": [
+    { "family": "Inter", "category": "sans-serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Roboto", "category": "sans-serif", "variants": [100, 300, 400, 500, 700, 900] },
+    { "family": "Open Sans", "category": "sans-serif", "variants": [300, 400, 500, 600, 700, 800] },
+    { "family": "Lato", "category": "sans-serif", "variants": [100, 300, 400, 700, 900] },
+    { "family": "Montserrat", "category": "sans-serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Poppins", "category": "sans-serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Raleway", "category": "sans-serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Nunito", "category": "sans-serif", "variants": [200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Nunito Sans", "category": "sans-serif", "variants": [200, 300, 400, 600, 700, 800, 900] },
+    { "family": "Work Sans", "category": "sans-serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Fira Sans", "category": "sans-serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Source Sans 3", "category": "sans-serif", "variants": [200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "DM Sans", "category": "sans-serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Manrope", "category": "sans-serif", "variants": [200, 300, 400, 500, 600, 700, 800] },
+    { "family": "Space Grotesk", "category": "sans-serif", "variants": [300, 400, 500, 600, 700] },
+    { "family": "Plus Jakarta Sans", "category": "sans-serif", "variants": [200, 300, 400, 500, 600, 700, 800] },
+    { "family": "Outfit", "category": "sans-serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Rubik", "category": "sans-serif", "variants": [300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Mulish", "category": "sans-serif", "variants": [200, 300, 400, 500, 600, 700, 800, 900, 1000] },
+    { "family": "Figtree", "category": "sans-serif", "variants": [300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Ubuntu", "category": "sans-serif", "variants": [300, 400, 500, 700] },
+    { "family": "Barlow", "category": "sans-serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Karla", "category": "sans-serif", "variants": [200, 300, 400, 500, 600, 700, 800] },
+    { "family": "Signika", "category": "sans-serif", "variants": [300, 400, 500, 600, 700] },
+    { "family": "Oswald", "category": "sans-serif", "variants": [200, 300, 400, 500, 600, 700] },
+    { "family": "PT Sans", "category": "sans-serif", "variants": [400, 700] },
+    { "family": "Archivo", "category": "sans-serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Hind", "category": "sans-serif", "variants": [300, 400, 500, 600, 700] },
+    { "family": "Noto Sans", "category": "sans-serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "IBM Plex Sans", "category": "sans-serif", "variants": [100, 200, 300, 400, 500, 600, 700] },
+    { "family": "Faculty Glyphic", "category": "sans-serif", "variants": [400] },
+
+    { "family": "Playfair Display", "category": "serif", "variants": [400, 500, 600, 700, 800, 900] },
+    { "family": "Merriweather", "category": "serif", "variants": [300, 400, 700, 900] },
+    { "family": "Lora", "category": "serif", "variants": [400, 500, 600, 700] },
+    { "family": "PT Serif", "category": "serif", "variants": [400, 700] },
+    { "family": "Source Serif 4", "category": "serif", "variants": [200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Crimson Pro", "category": "serif", "variants": [200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Cormorant Garamond", "category": "serif", "variants": [300, 400, 500, 600, 700] },
+    { "family": "Libre Baskerville", "category": "serif", "variants": [400, 700] },
+    { "family": "EB Garamond", "category": "serif", "variants": [400, 500, 600, 700, 800] },
+    { "family": "Domine", "category": "serif", "variants": [400, 500, 600, 700] },
+    { "family": "Bitter", "category": "serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Noto Serif", "category": "serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Spectral", "category": "serif", "variants": [200, 300, 400, 500, 600, 700, 800] },
+    { "family": "Cardo", "category": "serif", "variants": [400, 700] },
+    { "family": "Fraunces", "category": "serif", "variants": [100, 200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "DM Serif Display", "category": "serif", "variants": [400] },
+    { "family": "DM Serif Text", "category": "serif", "variants": [400] },
+
+    { "family": "Fira Code", "category": "monospace", "variants": [300, 400, 500, 600, 700] },
+    { "family": "JetBrains Mono", "category": "monospace", "variants": [100, 200, 300, 400, 500, 600, 700, 800] },
+    { "family": "Source Code Pro", "category": "monospace", "variants": [200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "IBM Plex Mono", "category": "monospace", "variants": [100, 200, 300, 400, 500, 600, 700] },
+    { "family": "Inconsolata", "category": "monospace", "variants": [200, 300, 400, 500, 600, 700, 800, 900] },
+    { "family": "Roboto Mono", "category": "monospace", "variants": [100, 200, 300, 400, 500, 600, 700] },
+    { "family": "Space Mono", "category": "monospace", "variants": [400, 700] },
+    { "family": "DM Mono", "category": "monospace", "variants": [300, 400, 500] },
+
+    { "family": "Bebas Neue", "category": "display", "variants": [400] },
+    { "family": "Abril Fatface", "category": "display", "variants": [400] },
+    { "family": "Archivo Black", "category": "display", "variants": [400] },
+    { "family": "Alfa Slab One", "category": "display", "variants": [400] },
+    { "family": "Righteous", "category": "display", "variants": [400] },
+    { "family": "Anton", "category": "display", "variants": [400] },
+    { "family": "Permanent Marker", "category": "handwriting", "variants": [400] },
+    { "family": "Caveat", "category": "handwriting", "variants": [400, 500, 600, 700] },
+    { "family": "Dancing Script", "category": "handwriting", "variants": [400, 500, 600, 700] },
+    { "family": "Pacifico", "category": "handwriting", "variants": [400] }
+  ]
+}

package/src/lib/ColumnsOverlay.svelte

@@ -2,6 +2,10 @@
   import { onMount } from 'svelte';
   import { columnsVisible } from './columnsOverlay';
 
+  const isDev = import.meta.env.DEV;
+  const isInIframe = typeof window !== 'undefined' && window.parent !== window;
+  const enabled = isDev && !isInIframe;
+
   let count = 12;
   let gutter = '';
   let margin = '';
@@ -33,7 +37,7 @@
   });
 </script>
 
-{#if $columnsVisible}
+{#if enabled && $columnsVisible}
   <div class="columns-overlay" aria-hidden="true">
     <div class="columns-overlay__inner">
       {#each Array(count) as _, i}
@@ -70,21 +74,30 @@
     height: 100%;
     display: grid;
     grid-template-columns: repeat(var(--columns-count, 12), 1fr);
+    /* Single implicit row that fills the container — without this, row
+       tracks default to `auto` and collapse to the content height (the
+       number span, ~12px), so the column fill and dashed borders are
+       only ~12px tall and look invisible against any backdrop. */
+    grid-template-rows: 1fr;
     gap: var(--columns-gutter);
   }
 
   .columns-overlay__col {
-    background: rgba(239, 68, 68, 0.04);
-    border-left: 1px dashed rgba(239, 68, 68, 0.22);
-    border-right: 1px dashed rgba(239, 68, 68, 0.22);
+    /* Fallbacks let the overlay render on any host. --ui-* tokens are
+       declared in ui-editor.css which by convention is editor-scoped and
+       not loaded globally; without fallbacks the host site sees invisible
+       columns. */
+    background: var(--ui-overlay-fill, rgba(128, 128, 128, 0.06));
+    border-left: 1px dashed var(--ui-overlay-border, rgba(128, 128, 128, 0.32));
+    border-right: 1px dashed var(--ui-overlay-border, rgba(128, 128, 128, 0.32));
   }
 
   .columns-overlay__num {
     display: block;
-    font-family: var(--font-mono);
+    font-family: var(--ui-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
     font-size: 9px;
     line-height: 1;
-    color: rgba(255, 255, 255, 0.4);
+    color: var(--ui-overlay-num, rgba(128, 128, 128, 0.75));
     text-align: center;
     padding-top: 3px;
   }
@@ -102,7 +115,7 @@
     -webkit-backdrop-filter: blur(6px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 4px;
-    font-family: var(--font-mono);
+    font-family: var(--ui-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
     font-size: 10px;
     color: rgba(255, 255, 255, 0.75);
     letter-spacing: 0.02em;

package/src/lib/LiveEditorOverlay.svelte

@@ -1,26 +1,66 @@
+<script context="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.
+  declare const __PROJECT_ROOT__: string | undefined;
+  const INJECTED_PROJECT_ROOT: string =
+    typeof __PROJECT_ROOT__ !== 'undefined' ? (__PROJECT_ROOT__ ?? '') : '';
+</script>
+
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { route, navigate } from '../router';
-  import { resolvePageSource } from './pageSource';
+  import { fade } from 'svelte/transition';
+  import { cubicInOut } from 'svelte/easing';
+  import { route, navigate } from './router';
   import { columnsVisible, toggleColumns } from './columnsOverlay';
   import { storageKey } from './editorConfig';
-
-  const projectRoot = __PROJECT_ROOT__;
-
-  $: sourceFile = resolvePageSource($route);
-
-  // `open` controls the editor's visible state. The overlay chrome itself
-  // is always rendered (in dev, on non-admin pages):
-  //   open === true   → full panel (docked or floating) with the iframe
-  //   open === false  → just the header bar pinned to top-right
-  export let open: boolean = false;
+  import { overlayOpen } from './overlayState';
+  import { quietGet, quietSet } from './storage';
+  import { postParentRoute } from './parentRouteStore';
+  import type { NavLink } from './navLinkTypes';
+
+  export let open: boolean | undefined = undefined;
+  export let editorPath: string = '/editor';
+  export let navLinks: NavLink[] = [];
+  export let pageSources: Record<string, string> = {};
+  export let hidePageSourceOn: string[] = [];
+  export let projectRoot: string = INJECTED_PROJECT_ROOT;
+
+  // 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).
+  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.
+  const OPEN_KEY = storageKey('overlay-open');
+  const consumerControlsOpen = open !== undefined;
+  if (!consumerControlsOpen) {
+    open = enabled && quietGet(OPEN_KEY) === '1';
+  }
+  $: if (!consumerControlsOpen && typeof window !== 'undefined') {
+    quietSet(OPEN_KEY, open ? '1' : '0');
+  }
+  $: overlayOpen.set(!!open);
+
+  // Hide the overlay entirely when the user is already on the editor route
+  // (the editor page has its own chrome).
+  $: onEditorPath = $route === editorPath;
+  $: sourceFile = pageSources[$route];
+  $: showSource = !!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.
-  let hasBeenOpen: boolean = open;
+  let hasBeenOpen: boolean = !!open;
   $: if (open) hasBeenOpen = true;
 
+  let editorFrame: HTMLIFrameElement | undefined;
+  $: postParentRoute(editorFrame?.contentWindow, $route);
+
   type Mode = 'docked' | 'floating';
 
   const STORAGE_KEY = storageKey('overlay-state');
@@ -41,23 +81,18 @@
   }
 
   function loadState(): OverlayState {
-    try {
-      const raw = localStorage.getItem(STORAGE_KEY);
-      if (raw) {
-        const parsed = JSON.parse(raw) as Partial<OverlayState>;
-        return {
-          mode: parsed.mode === 'floating' ? 'floating' : 'docked',
-          dockedWidth: typeof parsed.dockedWidth === 'number' ? parsed.dockedWidth : DEFAULT_DOCKED_WIDTH,
-          floating: {
-            x: parsed.floating?.x ?? DEFAULT_FLOATING.x,
-            y: parsed.floating?.y ?? DEFAULT_FLOATING.y,
-            width: parsed.floating?.width ?? DEFAULT_FLOATING.width,
-            height: parsed.floating?.height ?? DEFAULT_FLOATING.height,
-          },
-        };
-      }
-    } catch {
-      // ignore
+    const parsed = quietGet<Partial<OverlayState>>(STORAGE_KEY, { parse: true });
+    if (parsed && typeof parsed === 'object') {
+      return {
+        mode: parsed.mode === 'floating' ? 'floating' : 'docked',
+        dockedWidth: typeof parsed.dockedWidth === 'number' ? parsed.dockedWidth : DEFAULT_DOCKED_WIDTH,
+        floating: {
+          x: parsed.floating?.x ?? DEFAULT_FLOATING.x,
+          y: parsed.floating?.y ?? DEFAULT_FLOATING.y,
+          width: parsed.floating?.width ?? DEFAULT_FLOATING.width,
+          height: parsed.floating?.height ?? DEFAULT_FLOATING.height,
+        },
+      };
     }
     return {
       mode: 'docked',
@@ -67,11 +102,7 @@
   }
 
   function persist() {
-    try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify({ mode, dockedWidth, floating }));
-    } catch {
-      // ignore quota errors
-    }
+    quietSet(STORAGE_KEY, JSON.stringify({ mode, dockedWidth, floating }));
   }
 
   const initial = loadState();
@@ -79,6 +110,20 @@
   let dockedWidth: number = Math.max(MIN_WIDTH, initial.dockedWidth);
   let floating = { ...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;
+
+  // 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.
+  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.
+  let suppressTransition = 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.
   let gesturing: 'drag' | 'resize-left' | 'resize-se' | null = null;
@@ -159,6 +204,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
     if (mode === 'floating') {
@@ -170,6 +216,7 @@
       };
     }
     persist();
+    requestAnimationFrame(() => requestAnimationFrame(() => { suppressTransition = false; }));
   }
 
   function toggleOpen() {
@@ -183,31 +230,25 @@
     toggleOpen();
   }
 
-  // Messages from the editor iframe:
-  //   lt-overlay-close — iframe's Close button (hides the editor)
-  function handleMessage(ev: MessageEvent) {
-    if (ev.origin !== window.location.origin) return;
-    const data = ev.data;
-    if (!data || typeof data !== 'object') return;
-    if (data.type === 'lt-overlay-close') {
-      open = false;
-    }
+  function handleToggleRequest() {
+    open = !open;
   }
 
   onMount(() => {
-    window.addEventListener('message', handleMessage);
+    window.addEventListener('lt-overlay-toggle', handleToggleRequest);
   });
   onDestroy(() => {
-    window.removeEventListener('message', handleMessage);
+    window.removeEventListener('lt-overlay-toggle', handleToggleRequest);
   });
 
   $: panelStyle = !open
-    ? 'position: fixed; top: 12px; right: 12px;'
+    ? `position: fixed; top: 12px; right: 12px; width: ${COLLAPSED_WIDTH}px; height: ${COLLAPSED_HEIGHT}px;`
     : mode === 'docked'
-      ? `position: fixed; top: 0; right: 0; bottom: 0; width: ${dockedWidth}px;`
+      ? `position: fixed; top: 0; right: 0; width: ${dockedWidth}px; height: 100vh;`
       : `position: fixed; top: ${floating.y}px; left: ${floating.x}px; width: ${floating.width}px; height: ${floating.height}px;`;
 </script>
 
+{#if enabled && !onEditorPath}
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="lt-overlay"
@@ -216,6 +257,7 @@
   class:hidden={!open}
   class:docked={open && mode === 'docked'}
   class:floating={open && mode === 'floating'}
+  class:no-transition={!!gesturing || suppressTransition}
 >
   <div
     class="header"
@@ -223,23 +265,14 @@
     on:dblclick={handleHeaderDblClick}
     title={open ? 'Double-click to hide' : 'Double-click to show'}
   >
-    {#if open}
-      <span class="title">Design Editor</span>
-      <div class="spacer"></div>
-    {/if}
-
-    {#if open}
-      <div class="preview-nav">
-        <button class="hdr-btn nav" class:active={$route === '/'} on:click={() => navigate('/')}>
-          <i class="fas fa-home"></i>
-          <span>Site</span>
-        </button>
-        <button class="hdr-btn nav" class:active={$route === '/components'} on:click={() => navigate('/components')}>
-          <i class="fas fa-puzzle-piece"></i>
-          <span>Components</span>
-        </button>
-      </div>
-    {/if}
+    <button
+      class="hdr-btn text title"
+      on:click={toggleOpen}
+      title={open ? 'Hide Editor' : 'Show Editor'}
+    >
+      <i class="fas {open ? 'fa-chevron-right' : 'fa-chevron-left'}"></i>
+      <span>Editor</span>
+    </button>
 
     <button
       class="hdr-btn icon"
@@ -250,34 +283,64 @@
       <i class="fas fa-grip-lines-vertical"></i>
     </button>
 
-    <button class="hdr-btn text" on:click={toggleOpen}>
-      {open ? 'Hide Editor' : 'Editor'}
-    </button>
-
     {#if open}
-      <button class="hdr-btn icon" title={mode === 'docked' ? 'Float' : 'Dock to right'} on:click={toggleMode}>
+      <button
+        class="hdr-btn icon"
+        title={mode === 'docked' ? 'Float' : 'Dock to right'}
+        on:click={toggleMode}
+        transition:fade={BTN_FADE}
+      >
         <i class={mode === 'docked' ? 'fas fa-up-right-from-square' : 'fas fa-thumbtack'}></i>
       </button>
     {/if}
 
-    {#if sourceFile}
+    {#if open}
+      <div class="spacer" transition:fade={BTN_FADE}></div>
+    {/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>
-        Page Source
+        Show Source
       </a>
     {/if}
+
+    {#if open && navLinks.length > 0}
+      <div class="seg-group" transition:fade={BTN_FADE}>
+        <span class="seg-label">Active Page:</span>
+        <div class="seg-bar" role="tablist" aria-label="Underlying page">
+          {#each navLinks as link (link.path)}
+            <button
+              type="button"
+              role="tab"
+              class="seg-pill"
+              class:active={$route === link.path}
+              aria-selected={$route === link.path}
+              disabled={link.disabled}
+              on:click={() => navigate(link.path)}
+            >
+              {#if link.icon}<i class="fas {link.icon}"></i>{/if}
+              <span>{link.label}</span>
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
   </div>
 
   {#if hasBeenOpen}
     <div class="frame-wrap">
       <iframe
-        src="/admin"
-        title="Design editor"
+        src={editorPath}
+        title="Token editor"
         class="editor-frame"
+        bind:this={editorFrame}
+        on:load={() => postParentRoute(editorFrame?.contentWindow, $route)}
       ></iframe>
       {#if gesturing}
         <div class="gesture-scrim"></div>
@@ -291,9 +354,26 @@
     {/if}
   {/if}
 </div>
+{/if}
 
 <style>
   .lt-overlay {
+    /* Animation knobs. bar = panel grow/shrink, pane = iframe fade.
+       open = collapsed to expanded, close = expanded to collapsed. */
+    --bar-open-dur: 240ms;
+    --bar-open-ease: cubic-bezier(0.65, 0, 0.35, 1);
+    --bar-open-delay: 0ms;
+    --bar-close-dur: 240ms;
+    --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;
@@ -303,6 +383,12 @@
     overflow: hidden;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
     color: #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),
+      top var(--bar-open-dur) var(--bar-open-ease) var(--bar-open-delay),
+      right var(--bar-open-dur) var(--bar-open-ease) var(--bar-open-delay),
+      border-radius var(--bar-open-dur) var(--bar-open-ease) var(--bar-open-delay);
   }
 
   .lt-overlay.docked {
@@ -315,19 +401,28 @@
   }
 
   /* Hidden state: the editor panel is collapsed to just the header bar,
-     pinned to the top-right. The iframe stays mounted (for instant show)
-     but its container is display:none. */
+     pinned to the top-right. The iframe stays mounted; its container fades
+     to opacity 0 and the panel shrinks around it. */
   .lt-overlay.hidden {
     border-radius: 6px;
-    width: auto;
+    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),
+      top var(--bar-close-dur) var(--bar-close-ease) var(--bar-close-delay),
+      right var(--bar-close-dur) var(--bar-close-ease) var(--bar-close-delay),
+      border-radius var(--bar-close-dur) var(--bar-close-ease) var(--bar-close-delay);
   }
 
-  .lt-overlay.hidden .frame-wrap,
   .lt-overlay.hidden .resize-left,
   .lt-overlay.hidden .resize-se {
     display: none;
   }
 
+  .lt-overlay.no-transition,
+  .lt-overlay.no-transition .frame-wrap {
+    transition: none !important;
+  }
+
   .header {
     display: flex;
     align-items: center;
@@ -349,7 +444,8 @@
     cursor: move;
   }
 
-  .title {
+  .hdr-btn.title {
+    gap: 7px;
     font-size: 13px;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.85);
@@ -387,6 +483,20 @@
   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);
+  }
+
+  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);
   }
 
   .hdr-btn.nav {
@@ -408,17 +518,90 @@
     border-color: rgba(255, 255, 255, 0.18);
   }
 
-  .preview-nav {
-    display: flex;
-    gap: 3px;
+  .seg-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 18px;
     margin-right: 4px;
   }
 
+  .seg-label {
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    color: #fff;
+  }
+
+  .seg-bar {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px;
+    background: rgba(0, 0, 0, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.28);
+    border-radius: 6px;
+    box-shadow:
+      inset 0 1px 0 rgba(0, 0, 0, 0.5),
+      0 0 0 1px rgba(0, 0, 0, 0.4);
+  }
+
+  .seg-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    height: 22px;
+    padding: 0 9px;
+    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;
+    cursor: pointer;
+    transition: background 0.1s, color 0.1s, border-color 0.1s;
+  }
+
+  .seg-pill i {
+    font-size: 10px;
+    opacity: 0.85;
+  }
+
+  .seg-pill:hover:not(:disabled) {
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .seg-pill:disabled {
+    color: rgba(255, 255, 255, 0.28);
+    cursor: not-allowed;
+  }
+
+  .seg-pill:disabled i {
+    opacity: 0.5;
+  }
+
+  /* Outlined active — quieter than the iframe's filled switcher, so the two
+     segmented controls read as siblings, not twins. */
+  .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);
+  }
+
   .frame-wrap {
     position: relative;
     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 {