@motion-proto/live-tokens 0.6.2 → 0.7.1

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

@@ -1,18 +1,20 @@
 <script lang="ts">
-  import { stopPropagation } from 'svelte/legacy';
-
-  import { onMount, onDestroy } from 'svelte';
-  import type { ThemeMeta } from '../lib/themeTypes';
-  import { listThemes, deleteTheme, setActiveFile, getProductionInfo, setProductionFile } from '../lib/themeService';
-  import { activeFileName } from '../lib/editorConfigStore';
-  import { dirty } from '../lib/editorStore';
-  import { productionRevision, bumpProductionRevision, themeProductionInfo } from '../lib/productionPulse';
-  import UIDialog from './UIDialog.svelte';
+  import { onMount } from 'svelte';
+  import type { ThemeMeta } from '../core/themes/themeTypes';
+  import { listThemes, deleteTheme, setActiveFile, getProductionInfo, setProductionFile, sanitizeFileName } from '../core/themes/themeService';
+  import { listManifests, saveAsManifest } from '../core/manifests/manifestService';
+  import { activeFileName } from '../core/store/editorConfigStore';
+  import { dirty } from '../core/store/editorStore';
+  import { productionRevision, bumpProductionRevision, themeProductionInfo } from '../core/productionPulse';
+  import { flashStatus } from '../core/flashStatus';
+  import UIInfoPopover from './UIInfoPopover.svelte';
+  import FileLoadList from './FileLoadList.svelte';
+  import FilePill from './FilePill.svelte';
   import SaveAsDialog from '../component-editor/scaffolding/SaveAsDialog.svelte';
 
   interface Props {
     saveStatus?: 'idle' | 'saving' | 'saved' | 'error';
-    onsave?: (payload: { fileName: string; displayName: string }) => void;
+    onsave?: (payload: { fileName: string; displayName: string }) => void | Promise<void>;
     onload?: (payload: { fileName: string }) => void;
   }
 
@@ -23,12 +25,14 @@
   let saveAsDialog = $state(false);
   let currentDisplayName = $state('Default Theme');
 
-  let prodApplyStatus: 'idle' | 'applying' | 'done' | 'error' = $state('idle');
+  type ProdApplyStatus = 'idle' | 'applying' | 'done' | 'error';
+  let prodApplyStatus: ProdApplyStatus = $state('idle');
+  const setProdApplyStatus = (s: ProdApplyStatus) => (prodApplyStatus = s);
 
-  let infoOpen = $state(false);
-  let infoBtnEl = $state<HTMLButtonElement | undefined>(undefined);
-  let infoPopoverEl = $state<HTMLDivElement | undefined>(undefined);
-  let infoPopoverReady = $state(false);
+  // Set when Adopt is clicked on a dirty+default theme: the SaveAs dialog opens
+  // for the user to name their theme, and on confirm the Adopt resumes
+  // automatically so the user gets one flow ("save and adopt") from one click.
+  let adoptAfterSave = false;
 
   let prodIsInSync = $derived($themeProductionInfo?.fileName === $activeFileName);
   let editorIsApplied = $derived(prodIsInSync && !$dirty);
@@ -36,6 +40,14 @@
 
   let isDefaultActive = $derived($activeFileName === 'default');
 
+  // Display names already in use by protected files. Passed to SaveAsDialog so
+  // a user can't shadow the default by typing its label ("Default Theme"),
+  // which sanitizes to "default-theme" and would otherwise slip past the
+  // filename-only check.
+  let protectedDisplayNames = $derived(
+    files.filter((f) => f.fileName === 'default').map((f) => f.name),
+  );
+
   async function refreshFiles() {
     try {
       files = await listThemes();
@@ -61,76 +73,9 @@
   onMount(async () => {
     await refreshFiles();
     await refreshProduction();
-    window.addEventListener('keydown', handleKeydown);
-    document.addEventListener('mousedown', handleDocumentMousedown, true);
-  });
-
-  onDestroy(() => {
-    window.removeEventListener('keydown', handleKeydown);
-    document.removeEventListener('mousedown', handleDocumentMousedown, true);
   });
 
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape' && infoOpen) {
-      infoOpen = false;
-    }
-  }
-
-  function handleDocumentMousedown(e: MouseEvent) {
-    if (!infoOpen) return;
-    const target = e.target as Element | null;
-    if (target && !target.closest('.tfm-info-btn, .tfm-info-popover')) {
-      infoOpen = false;
-    }
-  }
-
-  /** Anchor the fixed-position popover to the right of the info button. The
-   *  sidebar lives on the left, so flow into the content area; flip up if the
-   *  button is near the bottom of the viewport. Mirrors the preset popover so
-   *  the two info surfaces feel identical. */
-  function positionInfoPopover(): void {
-    const btn = infoBtnEl;
-    const pop = infoPopoverEl;
-    if (!btn || !pop) return;
-    const br = btn.getBoundingClientRect();
-    const pr = pop.getBoundingClientRect();
-    const margin = 8;
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    let left = br.right + margin;
-    if (left + pr.width > vw - margin) {
-      left = br.left + br.width / 2 - pr.width / 2;
-      if (left < margin) left = margin;
-      if (left + pr.width > vw - margin) left = vw - margin - pr.width;
-    }
-    let top = br.bottom + margin;
-    if (top + pr.height > vh - margin) {
-      top = br.top - margin - pr.height;
-      if (top < margin) top = margin;
-    }
-    pop.style.left = `${left}px`;
-    pop.style.top = `${top}px`;
-    infoPopoverReady = true;
-  }
-
-  $effect(() => {
-    if (!infoOpen) {
-      infoPopoverReady = false;
-      return;
-    }
-    let raf1 = requestAnimationFrame(() => {
-      raf1 = requestAnimationFrame(positionInfoPopover);
-    });
-    window.addEventListener('scroll', positionInfoPopover, true);
-    window.addEventListener('resize', positionInfoPopover);
-    return () => {
-      cancelAnimationFrame(raf1);
-      window.removeEventListener('scroll', positionInfoPopover, true);
-      window.removeEventListener('resize', positionInfoPopover);
-    };
-  });
-
-  // Refresh production state when any production pointer flips (e.g. a preset
+  // Refresh production state when any production pointer flips (e.g. a manifest
   // is adopted elsewhere). Skip the initial tick — onMount already loaded it.
   let pulseInitialised = false;
   $effect(() => {
@@ -143,35 +88,93 @@
   });
 
   function handleSave() {
-    if (isDefaultActive) return;
+    // Default is read-only — quietly redirect the first Save into Save As so the
+    // user gets one motion ("name it, save it") instead of bumping into a
+    // disabled button and having to find Save As themselves.
+    if (isDefaultActive) {
+      openSaveAs();
+      return;
+    }
     onsave?.({ fileName: $activeFileName, displayName: currentDisplayName });
   }
 
   function openSaveAs() {
     showFileList = false;
+    // Standalone Save As must not piggyback on an Adopt that was cancelled
+    // earlier — clear the latch so confirmSaveAs doesn't fire a stale Adopt.
+    adoptAfterSave = false;
     saveAsDialog = true;
   }
 
-  function confirmSaveAs(detail: { displayName: string; fileName: string }) {
+  async function confirmSaveAs(detail: { displayName: string; fileName: string }) {
     const { displayName, fileName } = detail;
-    onsave?.({ fileName, displayName });
+    await onsave?.({ fileName, displayName });
     $activeFileName = fileName;
     currentDisplayName = displayName;
-    setTimeout(() => refreshFiles(), 500);
+    await refreshFiles();
+    if (adoptAfterSave) {
+      adoptAfterSave = false;
+      await handleApplyToProduction();
+    }
+  }
+
+  // Pick a manifest filename that doesn't collide with anything on disk so
+  // auto-creating doesn't clobber a manifest the user customized earlier.
+  async function pickFreshManifestName(base: string): Promise<string> {
+    const baseFile = sanitizeFileName(base);
+    let manifests: { fileName: string }[];
+    try {
+      manifests = await listManifests();
+    } catch {
+      return baseFile;
+    }
+    const taken = new Set(manifests.map((m) => m.fileName));
+    if (!taken.has(baseFile)) return baseFile;
+    for (let n = 1; n < 1000; n++) {
+      const suffix = String(n).padStart(2, '0');
+      const candidate = `${baseFile}_${suffix}`;
+      if (!taken.has(candidate)) return candidate;
+    }
+    return `${baseFile}_${Date.now()}`;
   }
 
   async function handleApplyToProduction() {
     if (prodIsInSync) return;
+
+    // Dirty edits on the protected default theme can't be saved to that file,
+    // and adopting the on-disk default would silently strand the user's
+    // changes. Open the theme SaveAs dialog and resume Adopt after save.
+    if (isDefaultActive && $dirty) {
+      adoptAfterSave = true;
+      saveAsDialog = true;
+      return;
+    }
+
     prodApplyStatus = 'applying';
     try {
       await setProductionFile($activeFileName);
       await refreshProduction();
       bumpProductionRevision();
-      prodApplyStatus = 'done';
-      setTimeout(() => { prodApplyStatus = 'idle'; }, 2000);
-    } catch {
-      prodApplyStatus = 'error';
-      setTimeout(() => { prodApplyStatus = 'idle'; }, 3000);
+      flashStatus(setProdApplyStatus, 'done');
+    } catch (err) {
+      const e = err as Error & { code?: string };
+      if (e.code === 'ACTIVE_IS_PROTECTED') {
+        // Default manifest is active — auto-create a user manifest and retry.
+        // No second dialog: the user clicked one button (Adopt) and gave the
+        // theme a name; the manifest is bookkeeping they shouldn't have to
+        // think about.
+        prodApplyStatus = 'idle';
+        try {
+          const targetName = await pickFreshManifestName('my-manifest');
+          await saveAsManifest(targetName, targetName);
+        } catch {
+          flashStatus(setProdApplyStatus, 'error', { durationMs: 3000 });
+          return;
+        }
+        await handleApplyToProduction();
+        return;
+      }
+      flashStatus(setProdApplyStatus, 'error', { durationMs: 3000 });
     }
   }
 
@@ -189,12 +192,62 @@
     onload?.({ fileName: file.fileName });
   }
 
+  // Two-step arm pattern. First click flips `revertArmed` so the button
+  // morphs into a "Discard?" affordance; second click commits. Click-out,
+  // Escape, a 3s timeout, or the dirty flag clearing all disarm.
+  let revertArmed = $state(false);
+  let revertTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function disarmRevert() {
+    revertArmed = false;
+    if (revertTimer) {
+      clearTimeout(revertTimer);
+      revertTimer = null;
+    }
+  }
+
+  function handleRevert() {
+    if (!$dirty) return;
+    if (!revertArmed) {
+      revertArmed = true;
+      revertTimer = setTimeout(disarmRevert, 3000);
+      return;
+    }
+    disarmRevert();
+    onload?.({ fileName: $activeFileName });
+  }
+
+  $effect(() => {
+    if (!$dirty && revertArmed) disarmRevert();
+  });
+
+  $effect(() => {
+    if (!revertArmed) return;
+    const onDocClick = (e: MouseEvent) => {
+      if (!(e.target as HTMLElement).closest('.tfm-revert-btn')) disarmRevert();
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') disarmRevert();
+    };
+    document.addEventListener('click', onDocClick, true);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('click', onDocClick, true);
+      document.removeEventListener('keydown', onKey);
+    };
+  });
+
   async function handleDelete(file: ThemeMeta) {
     if (file.fileName === 'default') return;
+    if (file.fileName === $themeProductionInfo?.fileName) return;
     try {
+      // Capture before refreshFiles() reads the server's reverted active back
+      // into local state — otherwise the "was this the active file?" check
+      // below sees the post-revert value and skips the reload.
+      const wasActive = file.fileName === $activeFileName;
       await deleteTheme(file.fileName);
       await refreshFiles();
-      if (file.fileName === $activeFileName) {
+      if (wasActive) {
         $activeFileName = 'default';
         currentDisplayName = 'Default Theme';
         onload?.({ fileName: 'default' });
@@ -209,57 +262,16 @@
     if (showFileList) refreshFiles();
   }
 
-  const dateFormatter = new Intl.DateTimeFormat(undefined, {
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-  });
-
-  function formatUpdatedAt(iso: string): string {
-    if (!iso) return '';
-    const d = new Date(iso);
-    if (Number.isNaN(d.getTime())) return '';
-    return dateFormatter.format(d);
-  }
-
-  type SortKey = 'name' | 'updatedAt';
-  let sortKey: SortKey = $state('updatedAt');
-  let sortDir: 'asc' | 'desc' = $state('desc');
-
-  function toggleSort(key: SortKey) {
-    if (sortKey === key) {
-      sortDir = sortDir === 'asc' ? 'desc' : 'asc';
-    } else {
-      sortKey = key;
-      sortDir = key === 'name' ? 'asc' : 'desc';
-    }
-  }
-
-  let sortedFiles = $derived([...files].sort((a, b) => {
-    let cmp = 0;
-    if (sortKey === 'name') {
-      cmp = a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
-    } else {
-      cmp = (a.updatedAt || '').localeCompare(b.updatedAt || '');
-    }
-    return sortDir === 'asc' ? cmp : -cmp;
-  }));
 </script>
 
 <div class="theme-file-manager">
   <div class="tfm-header">
     <span class="tfm-header-label">Theme</span>
-    <button
-      type="button"
-      class="tfm-info-btn"
-      aria-label="About themes"
-      aria-expanded={infoOpen}
-      bind:this={infoBtnEl}
-      onclick={() => (infoOpen = !infoOpen)}
-    >
-      <i class="fas fa-circle-info"></i>
-    </button>
+    <UIInfoPopover title="Themes" ariaLabel="About themes">
+      <p>
+        A <strong>theme</strong> saves the design tokens for a site, components use these tokens to define their appearance.
+      </p>
+    </UIInfoPopover>
   </div>
 
   <div class="tfm-cards" class:in-sync={prodIsInSync}>
@@ -278,11 +290,32 @@
         >
           <i class="tfm-status-dot" aria-hidden="true"></i>
           <span>{$dirty ? 'unsaved' : editorIsApplied ? 'live' : 'saved'}</span>
+          {#if $dirty}
+            <button
+              type="button"
+              class="tfm-revert-btn"
+              class:armed={revertArmed}
+              onclick={handleRevert}
+              title={revertArmed
+                ? 'Click again to discard unsaved changes'
+                : 'Revert to last saved version'}
+              aria-label={revertArmed ? 'Confirm discard unsaved changes' : 'Revert unsaved changes'}
+            >
+              <i class="fas fa-rotate-left" aria-hidden="true"></i>
+              {#if revertArmed}<span class="tfm-revert-label">Discard?</span>{/if}
+            </button>
+          {/if}
         </span>
       </div>
-      <div class="tfm-pill" class:dirty={$dirty} class:applied={editorIsApplied}>
-        <span class="tfm-pill-name" title={currentDisplayName}>{currentDisplayName}</span>
-      </div>
+      <FilePill
+        name={currentDisplayName}
+        isProtected={isDefaultActive}
+        dirty={$dirty}
+        applied={editorIsApplied}
+        protectedTitle="Protected system theme"
+        title={currentDisplayName}
+        style="display: flex;"
+      />
       <div class="tfm-card-actions tfm-card-actions-stack">
         <button
           class="tfm-btn tfm-btn-row save-btn"
@@ -290,9 +323,9 @@
           class:saved={saveStatus === 'saved'}
           class:error={saveStatus === 'error'}
           onclick={handleSave}
-          disabled={saveStatus === 'saving' || isDefaultActive}
+          disabled={saveStatus === 'saving'}
           title={isDefaultActive
-            ? 'Default is read-only — use Save As to capture under a new name'
+            ? 'Save to a new theme file'
             : 'Save to current file'}
         >
           <i
@@ -361,110 +394,49 @@
           <span>{prodIsInSync ? 'live' : 'out of sync'}</span>
         </span>
       </div>
-      <div class="tfm-pill" class:applied={prodIsInSync}>
-        <span class="tfm-pill-name" title={prodName}>{prodName}</span>
-      </div>
+      <FilePill
+        name={prodName}
+        isProtected={$themeProductionInfo?.fileName === 'default'}
+        applied={prodIsInSync}
+        protectedTitle="Protected system theme"
+        title={prodName}
+        style="display: flex;"
+      />
     </div>
   </div>
 </div>
 
-{#if infoOpen}
-  <div
-    class="tfm-info-popover"
-    class:ready={infoPopoverReady}
-    role="dialog"
-    aria-label="About themes"
-    bind:this={infoPopoverEl}
-  >
-    <header class="tfm-info-header">
-      <span class="tfm-info-title">Themes</span>
-      <button
-        type="button"
-        class="tfm-info-close"
-        aria-label="Close"
-        onclick={() => (infoOpen = false)}
-      >
-        <i class="fas fa-xmark"></i>
-      </button>
-    </header>
-    <div class="tfm-info-body">
-      <p>
-        A <strong>theme</strong> saves the design tokens for a site, components use these tokens to define their appearance.
-      </p>
-    </div>
-  </div>
-{/if}
-
-<UIDialog
+<FileLoadList
   bind:show={showFileList}
   title="Load Theme"
-  cancelLabel="Close"
-  width="420px"
->
-  <div class="load-list">
-    <div class="load-header">
-      <button
-        class="sort-btn name-col"
-        class:active-sort={sortKey === 'name'}
-        onclick={() => toggleSort('name')}
-      >
-        <span>Name</span>
-        {#if sortKey === 'name'}
-          <i class="fas {sortDir === 'asc' ? 'fa-caret-up' : 'fa-caret-down'}"></i>
-        {/if}
-      </button>
-      <button
-        class="sort-btn date-col"
-        class:active-sort={sortKey === 'updatedAt'}
-        onclick={() => toggleSort('updatedAt')}
-      >
-        <span>Date</span>
-        {#if sortKey === 'updatedAt'}
-          <i class="fas {sortDir === 'asc' ? 'fa-caret-up' : 'fa-caret-down'}"></i>
-        {/if}
-      </button>
-      <span class="header-spacer"></span>
-    </div>
-    {#each sortedFiles as file}
-      <div class="load-item" class:active={file.fileName === $activeFileName}>
-        <button class="load-name-btn" onclick={() => handleLoad(file)}>
-          {file.name}
-        </button>
-        <span class="updated-at" title={file.updatedAt}>{formatUpdatedAt(file.updatedAt)}</span>
-        {#if file.fileName === $activeFileName}
-          <span class="active-badge">active</span>
-        {/if}
-        {#if file.fileName !== 'default'}
-          <button
-            class="file-delete-btn"
-            onclick={stopPropagation(() => handleDelete(file))}
-            title="Delete {file.name}"
-          >
-            <i class="fas fa-trash-alt"></i>
-          </button>
-        {/if}
-      </div>
-    {/each}
-    {#if files.length === 0}
-      <div class="load-item empty">No saved files</div>
-    {/if}
-  </div>
-</UIDialog>
+  {files}
+  activeFileName={$activeFileName}
+  sortable
+  showUpdatedAt
+  systemBadge={{ label: 'system', title: 'Protected system theme' }}
+  emptyMessage="No saved files"
+  canDelete={(file) => file.fileName !== 'default' && file.fileName !== $themeProductionInfo?.fileName}
+  onload={handleLoad}
+  ondelete={handleDelete}
+/>
 
 <SaveAsDialog
   bind:show={saveAsDialog}
   {currentDisplayName}
   {files}
+  currentFileName={$activeFileName}
+  reservedDisplayNames={protectedDisplayNames}
   title="Save Theme As"
   placeholder="Theme name…"
-  reservedNameMessage='The name "default" is reserved for the initial distribution.'
+  reservedNameMessage='That name is reserved for the protected default theme.'
+  branchFromDefaultName="My Theme"
   onsave={confirmSaveAs}
 />
 
 <style>
   .theme-file-manager {
     --tfm-applied: #5aa85e;
-    --tfm-rail-neutral: var(--ui-border-default);
+    --tfm-rail-neutral: var(--ui-border);
     --tfm-rail-dirty: var(--ui-highlight);
     --tfm-rail-applied: var(--tfm-applied);
 
@@ -488,29 +460,9 @@
     letter-spacing: 0.05em;
   }
 
-  .tfm-info-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    background: transparent;
-    border: 0;
-    color: var(--ui-text-tertiary);
-    font-size: 0.95rem;
-    line-height: 1;
-    cursor: pointer;
-    transition: color var(--ui-transition-fast);
-  }
-
-  .tfm-info-btn:hover,
-  .tfm-info-btn[aria-expanded='true'] {
-    color: var(--ui-text-primary);
-  }
-
-  /* Two-card pipeline (Editor → Production) — mirrors PresetFileManager so
-     theme and preset surfaces share one visual idiom. */
+  /* Two-card pipeline (Editor → Production) — theme card + production card
+     surface the per-artifact pipeline. The manifest panel sits one level up
+     and tracks active vs default rather than editor vs production. */
   .tfm-cards {
     display: flex;
     flex-direction: column;
@@ -524,7 +476,7 @@
     gap: var(--ui-space-6);
     padding: var(--ui-space-8) var(--ui-space-10) var(--ui-space-10) var(--ui-space-16);
     background: var(--ui-surface-lower);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
   }
 
@@ -595,34 +547,87 @@
     opacity: 1;
   }
 
-  .tfm-pill {
-    display: flex;
+  /* Revert button — paired with the "unsaved" status label. Lives only when
+     dirty, in the highlight color so it reads as part of the status group
+     rather than a peer of the action stack below. Two-step arm: first click
+     adds .armed (label appears, fills with highlight), second click commits. */
+  .tfm-revert-btn {
+    position: relative;
+    display: inline-flex;
     align-items: center;
-    padding: var(--ui-space-6) var(--ui-space-10);
-    background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--ui-radius-md);
-    transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
+    justify-content: center;
+    gap: 4px;
+    height: 18px;
+    margin-left: 2px;
+    padding: 0 4px;
+    background: transparent;
+    border: 1px solid color-mix(in srgb, var(--ui-highlight) 35%, transparent);
+    border-radius: 4px;
+    color: var(--ui-highlight);
+    font-size: 0.65rem;
+    line-height: 1;
+    cursor: pointer;
+    opacity: 0.85;
+    overflow: hidden;
+    transition:
+      background var(--ui-transition-fast),
+      border-color var(--ui-transition-fast),
+      color var(--ui-transition-fast),
+      opacity var(--ui-transition-fast),
+      padding var(--ui-transition-fast);
+  }
+
+  .tfm-revert-btn:hover {
+    background: color-mix(in srgb, var(--ui-highlight) 18%, transparent);
+    border-color: color-mix(in srgb, var(--ui-highlight) 65%, transparent);
+    opacity: 1;
   }
 
-  .tfm-pill.dirty {
-    border-color: color-mix(in srgb, var(--ui-highlight) 60%, var(--ui-border-subtle));
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-highlight) 35%, transparent);
+  .tfm-revert-btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-highlight) 60%, transparent);
+    outline-offset: 1px;
   }
 
-  .tfm-pill.applied {
-    border-color: color-mix(in srgb, var(--tfm-applied) 50%, var(--ui-border-subtle));
+  .tfm-revert-btn i {
+    font-size: 0.65rem;
+    transition: transform var(--ui-transition-fast);
   }
 
-  .tfm-pill-name {
-    flex: 1;
-    min-width: 0;
-    font-size: var(--ui-font-size-md);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-primary);
+  .tfm-revert-btn.armed {
+    background: var(--ui-highlight);
+    border-color: var(--ui-highlight);
+    color: var(--ui-surface-lowest, #111);
+    opacity: 1;
+    padding: 0 6px;
+  }
+
+  .tfm-revert-btn.armed i {
+    transform: rotate(-35deg);
+  }
+
+  .tfm-revert-label {
+    font-weight: var(--ui-font-weight-semibold, 600);
+    letter-spacing: 0.02em;
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  }
+
+  /* Time-window cue — thin bar drains across the bottom edge as the 3s
+     auto-disarm window elapses. Pure CSS, runs once per arm cycle. */
+  .tfm-revert-btn.armed::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 2px;
+    width: 100%;
+    background: color-mix(in srgb, var(--ui-surface-lowest, #111) 70%, transparent);
+    transform-origin: left center;
+    animation: tfm-revert-drain 3s linear forwards;
+  }
+
+  @keyframes tfm-revert-drain {
+    from { transform: scaleX(1); }
+    to   { transform: scaleX(0); }
   }
 
   .tfm-card-actions {
@@ -666,7 +671,7 @@
     margin: calc(var(--ui-space-2) * -1) 0;
     padding: var(--ui-space-6) var(--ui-space-12);
     background: color-mix(in srgb, var(--tfm-applied) 18%, var(--ui-surface-high));
-    border: 1px solid color-mix(in srgb, var(--tfm-applied) 45%, var(--ui-border-medium));
+    border: 1px solid color-mix(in srgb, var(--tfm-applied) 45%, var(--ui-border-high));
     border-radius: var(--ui-radius-md);
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-md);
@@ -686,7 +691,7 @@
 
   .tfm-adopt-btn:hover:not(:disabled) {
     background: color-mix(in srgb, var(--tfm-applied) 30%, var(--ui-surface-higher));
-    border-color: color-mix(in srgb, var(--tfm-applied) 70%, var(--ui-border-strong));
+    border-color: color-mix(in srgb, var(--tfm-applied) 70%, var(--ui-border-higher));
   }
 
   .tfm-adopt-btn:disabled {
@@ -695,7 +700,7 @@
 
   .tfm-adopt-btn.in-sync {
     background: transparent;
-    border-color: var(--ui-border-subtle);
+    border-color: var(--ui-border-low);
     color: var(--ui-text-muted);
     opacity: 0.7;
   }
@@ -714,7 +719,7 @@
     gap: var(--ui-space-4);
     padding: var(--ui-space-6) var(--ui-space-10);
     background: var(--ui-surface);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-md);
@@ -735,7 +740,7 @@
   .tfm-btn:hover:not(:disabled) {
     background: var(--ui-surface-high);
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
   }
 
   .tfm-btn:disabled {
@@ -745,19 +750,19 @@
 
   .tfm-btn.active {
     background: var(--ui-surface);
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
     color: var(--ui-text-primary);
   }
 
   .save-btn {
     background: var(--ui-surface-high);
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
     color: var(--ui-text-primary);
   }
 
   .save-btn:hover:not(:disabled) {
     background: var(--ui-surface-higher);
-    border-color: var(--ui-border-strong);
+    border-color: var(--ui-border-higher);
   }
 
   .save-btn.saving i { animation: spin 1s linear infinite; }
@@ -770,244 +775,6 @@
     color: var(--ui-text-muted);
   }
 
-  .load-list {
-    display: flex;
-    flex-direction: column;
-    max-height: 60vh;
-    overflow-y: auto;
-  }
-
-  .load-header {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 6px;
-    border-bottom: 1px solid #3a3a3a;
-    position: sticky;
-    top: 0;
-    background: var(--ui-surface, #1a1a1a);
-    z-index: 1;
-  }
-
-  .sort-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 4px 0;
-    background: none;
-    border: none;
-    color: #888;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    cursor: pointer;
-    text-align: left;
-  }
-
-  .sort-btn:hover {
-    color: #ccc;
-  }
-
-  .sort-btn.active-sort {
-    color: #e0e0e0;
-  }
-
-  .sort-btn i {
-    font-size: 10px;
-    opacity: 0.85;
-  }
-
-  .sort-btn.name-col {
-    flex: 1;
-    min-width: 0;
-    padding-left: 4px;
-  }
-
-  .sort-btn.date-col {
-    flex-shrink: 0;
-  }
-
-  .header-spacer {
-    flex-shrink: 0;
-    width: 24px;
-  }
-
-  .load-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 6px;
-    border-bottom: 1px solid #2a2a2a;
-  }
-
-  .load-item:last-child {
-    border-bottom: none;
-  }
-
-  .load-item.empty {
-    padding: 16px;
-    color: #888;
-    font-size: 14px;
-    text-align: center;
-  }
-
-  .load-name-btn {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 6px 4px;
-    background: none;
-    border: none;
-    color: #aaa;
-    font-size: 14px;
-    cursor: pointer;
-    text-align: left;
-    border-radius: 3px;
-  }
-
-  .load-name-btn:hover {
-    color: #e0e0e0;
-  }
-
-  .load-item.active .load-name-btn {
-    color: #e0e0e0;
-    font-weight: 600;
-  }
-
-  .updated-at {
-    flex-shrink: 0;
-    font-size: 12px;
-    color: #777;
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-  }
-
-  .active-badge {
-    flex-shrink: 0;
-    font-size: 12px;
-    padding: 1px 6px;
-    border-radius: 3px;
-    background: #333;
-    color: #ccc;
-  }
-
-  .file-delete-btn {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    background: none;
-    border: none;
-    color: #555;
-    font-size: 12px;
-    cursor: pointer;
-    opacity: 0;
-  }
-
-  .load-item:hover .file-delete-btn {
-    opacity: 1;
-  }
-
-  .file-delete-btn:hover {
-    color: #ccc;
-  }
-
-  /* Info popover — fixed positioning escapes the sidebar's overflow and any
-     parent stacking context. JS in this file anchors it to the right of the
-     info button (the sidebar is on the left, so there's room to flow into
-     the main content area without obscuring the button). */
-  .tfm-info-popover {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 22rem;
-    max-width: calc(100vw - var(--ui-space-24));
-    padding: 0;
-    background: var(--ui-surface-higher);
-    border: 1px solid var(--ui-border-medium);
-    border-radius: var(--ui-radius-lg);
-    box-shadow: var(--ui-shadow-lg);
-    z-index: 1000;
-    color: var(--ui-text-secondary);
-    font-family: var(--ui-font-family, system-ui, sans-serif);
-    overflow: hidden;
-    visibility: hidden;
-    animation: tfm-info-in 140ms ease-out;
-  }
-
-  .tfm-info-popover.ready {
-    visibility: visible;
-  }
-
-  .tfm-info-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--ui-space-8);
-    padding: var(--ui-space-10) var(--ui-space-12) var(--ui-space-10) var(--ui-space-16);
-    border-bottom: 1px solid var(--ui-border-subtle);
-  }
-
-  .tfm-info-title {
-    color: var(--ui-text-primary);
-    font-size: var(--ui-font-size-sm);
-    font-weight: var(--ui-font-weight-semibold);
-    letter-spacing: -0.01em;
-    line-height: 1.2;
-  }
-
-  .tfm-info-close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--ui-space-24);
-    height: var(--ui-space-24);
-    padding: 0;
-    background: transparent;
-    border: 0;
-    border-radius: var(--ui-radius-sm);
-    color: var(--ui-text-tertiary);
-    font-size: var(--ui-font-size-xs);
-    line-height: 1;
-    cursor: pointer;
-    transition: color var(--ui-transition-fast), background var(--ui-transition-fast);
-  }
-
-  .tfm-info-close:hover {
-    color: var(--ui-text-primary);
-    background: var(--ui-hover);
-  }
-
-  .tfm-info-body {
-    padding: var(--ui-space-16);
-  }
-
-  .tfm-info-popover p {
-    margin: 0 0 var(--ui-space-12) 0;
-    font-size: var(--ui-font-size-xs);
-    line-height: 1.55;
-  }
-
-  .tfm-info-popover p:last-child {
-    margin-bottom: 0;
-  }
-
-  .tfm-info-popover strong {
-    color: var(--ui-text-primary);
-    font-weight: var(--ui-font-weight-semibold);
-  }
-
-  @keyframes tfm-info-in {
-    from { opacity: 0; transform: translateY(-3px); }
-    to   { opacity: 1; transform: translateY(0); }
-  }
-
   @keyframes tfm-pulse {
     0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-highlight) 22%, transparent); }
     50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ui-highlight) 10%, transparent); }