@motion-proto/live-tokens 0.5.0 → 0.6.1

package/src/ui/PresetFileManager.svelte

@@ -1,30 +1,70 @@
 <script lang="ts">
   import { stopPropagation } from 'svelte/legacy';
 
-  import { onMount } from 'svelte';
-  import type { PresetMeta } from '../lib/themeTypes';
+  import { onMount, onDestroy } from 'svelte';
+  import type { Preset, PresetMeta } from '../lib/themeTypes';
   import {
     listPresets,
     deletePreset,
     captureCurrentAsPreset,
+    captureProductionAsPreset,
     applyPreset,
+    applyPresetToProduction,
+    compareActiveToProduction,
     getActivePreset,
   } from '../lib/presetService';
   import { sanitizeFileName } from '../lib/themeService';
-  import { dirty } from '../lib/editorStore';
+  import { dirty, componentDirty } from '../lib/editorStore';
+  import { productionRevision, presetProductionComparison } from '../lib/productionPulse';
   import UIDialog from './UIDialog.svelte';
+  import UnsavedComponentsDialog from './UnsavedComponentsDialog.svelte';
+  import SaveAsDialog from '../component-editor/scaffolding/SaveAsDialog.svelte';
 
   let files: PresetMeta[] = $state([]);
   let showFileList = $state(false);
-  let saveAsEditing = $state(false);
-  let saveAsName = $state('');
-  let saveAsInput: HTMLInputElement | undefined = $state();
+  let saveAsDialog = $state(false);
+  let captureProdDialog = $state(false);
 
   let activeFileName = $state('default');
-  let currentDisplayName = $state('Default');
+  let currentDisplayName = $state('Default Preset');
+  let activePreset = $state<Preset | null>(null);
 
   let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = $state('idle');
   let applyStatus: 'idle' | 'applying' = $state('idle');
+  let prodApplyStatus: 'idle' | 'applying' | 'done' | 'error' = $state('idle');
+  let prodCaptureStatus: 'idle' | 'saving' | 'saved' | 'error' = $state('idle');
+
+  let unsavedDialog = $state(false);
+  /** Pending capture target while UnsavedComponentsDialog is open. The dialog
+   *  resolves to either "save the preset using current on-disk files" (proceed)
+   *  or "user cancelled / closed". */
+  let pendingCapture: { fileName: string; displayName: string } | null = null;
+
+  let infoOpen = $state(false);
+  let infoBtnEl = $state<HTMLButtonElement | undefined>(undefined);
+  let infoPopoverEl = $state<HTMLDivElement | undefined>(undefined);
+  let infoPopoverReady = $state(false);
+
+  let dirtyComponentIds = $derived(
+    Object.entries($componentDirty)
+      .filter(([, isDirty]) => isDirty)
+      .map(([id]) => id),
+  );
+
+  /** True when there are unsaved theme/component edits that won't make it into
+   *  the next preset Save (capture reads on-disk files, not the editor). */
+  let presetStale = $derived(dirtyComponentIds.length > 0 || $dirty);
+
+  let isDefaultActive = $derived(activeFileName === 'default');
+
+  let prodStatus = $derived($presetProductionComparison?.status ?? 'editor-only');
+  let prodPresetName = $derived($presetProductionComparison?.productionPreset?.name ?? '—');
+  let prodIsInSync = $derived(prodStatus === 'in-production');
+  let prodIsDiverged = $derived(prodStatus === 'diverged');
+  /** Editor row is "live" when this preset IS the one in production AND
+   *  nothing's pending — mirrors the cfm-row-editor.applied rule so the green
+   *  dot vocabulary is consistent across components and presets. */
+  let editorIsApplied = $derived(prodIsInSync && !presetStale);
 
   async function refreshFiles() {
     try {
@@ -43,6 +83,7 @@
     try {
       const active = await getActivePreset();
       if (active) {
+        activePreset = active;
         activeFileName = active._fileName ?? activeFileName;
         currentDisplayName = active.name;
       }
@@ -51,18 +92,117 @@
     }
   }
 
+  async function refreshProductionComparison() {
+    if (!activePreset) return;
+    try {
+      $presetProductionComparison = await compareActiveToProduction(activePreset);
+    } catch {
+      // silent — leave previous comparison in place
+    }
+  }
+
   onMount(async () => {
     await refreshActive();
     await refreshFiles();
+    await refreshProductionComparison();
+    window.addEventListener('keydown', handleKeydown);
+    document.addEventListener('mousedown', handleDocumentMousedown, true);
+  });
+
+  // Re-compare when any production pointer ticks (per-component Adopt,
+  // theme production change, or our own apply). Skip the initial tick on
+  // mount — refreshProductionComparison runs there already. Plain closure
+  // variable (not $state) so writing it doesn't add a reactive dependency
+  // back to the effect.
+  let pulseInitialised = false;
+  $effect(() => {
+    void $productionRevision;
+    if (!pulseInitialised) {
+      pulseInitialised = true;
+      return;
+    }
+    refreshProductionComparison();
+  });
+
+  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('.pfm-info-btn, .pfm-info-popover')) {
+      infoOpen = false;
+    }
+  }
+
+  /** Anchor the fixed-position popover relative to the info button. Lives in
+   *  the sidebar footer, so flip-up when there's no room below. */
+  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);
+    };
   });
 
-  /** Standard "save dirty editor first?" gate. Returns true if the caller
-   *  should proceed with capturing from disk; false to abort. */
-  function confirmDirtyCapture(): boolean {
-    if (!$dirty) return true;
-    return window.confirm(
-      'You have unsaved changes in the editor. They will not be included in the preset (presets are built from the named files on disk). Continue saving the preset anyway?',
-    );
+  /** Standard "save dirty editor first?" gate. If any component has unsaved
+   *  edits, defer to UnsavedComponentsDialog (which can save them in place);
+   *  callers receive `false` and the dialog's "proceed" path re-invokes the
+   *  capture with the pending args. Returns `true` if the caller can capture
+   *  immediately (no dirty components). */
+  function gateDirtyCapture(fileName: string, displayName: string): boolean {
+    if (dirtyComponentIds.length === 0 && !$dirty) return true;
+    pendingCapture = { fileName, displayName };
+    unsavedDialog = true;
+    return false;
+  }
+
+  function handleUnsavedProceed() {
+    const target = pendingCapture;
+    pendingCapture = null;
+    if (target) doCapture(target.fileName, target.displayName);
   }
 
   async function doCapture(fileName: string, displayName: string) {
@@ -74,64 +214,66 @@
       saveStatus = 'saved';
       setTimeout(() => { saveStatus = 'idle'; }, 2000);
       await refreshFiles();
+      await refreshActive();
+      await refreshProductionComparison();
     } catch {
       saveStatus = 'error';
       setTimeout(() => { saveStatus = 'idle'; }, 3000);
     }
   }
 
-  async function handleSave() {
-    if (!confirmDirtyCapture()) return;
-    await doCapture(activeFileName, currentDisplayName);
+  async function handleApplyToProduction() {
+    if (!activeFileName) return;
+    prodApplyStatus = 'applying';
+    try {
+      await applyPresetToProduction(activeFileName);
+      // applyPresetToProduction bakes css; refresh comparison so the
+      // Production card flips to the live state.
+      await refreshProductionComparison();
+      prodApplyStatus = 'done';
+      setTimeout(() => { prodApplyStatus = 'idle'; }, 2000);
+    } catch {
+      prodApplyStatus = 'error';
+      setTimeout(() => { prodApplyStatus = 'idle'; }, 3000);
+    }
   }
 
-  async function handleSaveIncrement() {
-    if (!confirmDirtyCapture()) return;
-    const baseName = currentDisplayName.replace(/_\d+$/, '');
-    const baseFileName = sanitizeFileName(baseName);
-    const existingNums = files
-      .filter(
-        (f) => f.fileName === baseFileName || f.fileName.match(new RegExp(`^${baseFileName}_\\d+$`)),
-      )
-      .map((f) => {
-        const m = f.fileName.match(/_(\d+)$/);
-        return m ? parseInt(m[1], 10) : 0;
-      });
-    const next = (existingNums.length > 0 ? Math.max(...existingNums) : 0) + 1;
-    const suffix = String(next).padStart(2, '0');
-    const displayName = `${baseName}_${suffix}`;
-    const fileName = `${baseFileName}_${suffix}`;
-    await doCapture(fileName, displayName);
+  function openCaptureFromProduction() {
+    captureProdDialog = true;
   }
 
-  function openSaveAs() {
-    saveAsName = currentDisplayName;
-    saveAsEditing = true;
-    showFileList = false;
-    setTimeout(() => saveAsInput?.select(), 0);
+  async function confirmCaptureFromProduction(detail: { displayName: string; fileName: string }) {
+    const { displayName, fileName } = detail;
+    prodCaptureStatus = 'saving';
+    try {
+      await captureProductionAsPreset(fileName, displayName);
+      await refreshFiles();
+      prodCaptureStatus = 'saved';
+      setTimeout(() => { prodCaptureStatus = 'idle'; }, 2000);
+    } catch {
+      prodCaptureStatus = 'error';
+      setTimeout(() => { prodCaptureStatus = 'idle'; }, 3000);
+    }
   }
 
-  async function confirmSaveAs() {
-    const displayName = saveAsName.trim();
-    if (!displayName) return;
-    const fileName = sanitizeFileName(displayName);
-    if (fileName === 'default') {
-      saveAsName = '';
-      return;
-    }
-    if (!confirmDirtyCapture()) return;
-    saveAsEditing = false;
-    await doCapture(fileName, displayName);
+  async function handleSave() {
+    // Default is the protected initial-distribution preset — disabled in the
+    // UI when active, but guard here too. Callers in that state should route
+    // through Save As (which seeds an incremented name).
+    if (isDefaultActive) return;
+    if (!gateDirtyCapture(activeFileName, currentDisplayName)) return;
+    await doCapture(activeFileName, currentDisplayName);
   }
 
-  function cancelSaveAs() {
-    saveAsEditing = false;
-    saveAsName = '';
+  function openSaveAs() {
+    showFileList = false;
+    saveAsDialog = true;
   }
 
-  function handleSaveAsKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter') confirmSaveAs();
-    if (e.key === 'Escape') cancelSaveAs();
+  async function confirmSaveAs(detail: { displayName: string; fileName: string }) {
+    const { displayName, fileName } = detail;
+    if (!gateDirtyCapture(fileName, displayName)) return;
+    await doCapture(fileName, displayName);
   }
 
   async function handleApply(file: PresetMeta) {
@@ -161,7 +303,7 @@
       await refreshFiles();
       if (file.fileName === activeFileName) {
         activeFileName = 'default';
-        currentDisplayName = 'Default';
+        currentDisplayName = 'Default Preset';
       }
     } catch {
       // silent
@@ -170,90 +312,168 @@
 
   function toggleFileList() {
     showFileList = !showFileList;
-    saveAsEditing = false;
     if (showFileList) refreshFiles();
   }
 </script>
 
 <div class="preset-file-manager">
-  <div class="active-file">
-    <span class="active-label">Preset</span>
-    <span class="active-name">{currentDisplayName}</span>
+  <div class="pfm-header">
+    <span class="pfm-header-label">Preset</span>
+    <button
+      type="button"
+      class="pfm-info-btn"
+      aria-label="About presets"
+      aria-expanded={infoOpen}
+      bind:this={infoBtnEl}
+      onclick={() => (infoOpen = !infoOpen)}
+    >
+      <i class="fas fa-circle-info"></i>
+    </button>
   </div>
 
-  <div class="button-grid">
-    <div class="save-row">
-      <button
-        class="pfm-btn save-btn"
-        class:saving={saveStatus === 'saving'}
-        class:saved={saveStatus === 'saved'}
-        class:error={saveStatus === 'error'}
-        onclick={handleSave}
-        disabled={saveStatus === 'saving' || applyStatus === 'applying'}
-        title="Capture the current theme + component configs into this preset"
-      >
-        <i
-          class="fas"
-          class:fa-save={saveStatus === 'idle'}
-          class:fa-spinner={saveStatus === 'saving'}
-          class:fa-check={saveStatus === 'saved'}
-          class:fa-times={saveStatus === 'error'}
-        ></i>
-        <span>
-          {#if saveStatus === 'idle'}Save{:else if saveStatus === 'saving'}Saving{:else if saveStatus === 'saved'}Saved{:else}Error{/if}
+  <div class="pfm-cards" class:in-sync={prodIsInSync}>
+    <div
+      class="pfm-card pfm-card-editor"
+      class:dirty={presetStale}
+      class:applied={editorIsApplied}
+    >
+      <span class="pfm-rail" aria-hidden="true"></span>
+      <div class="pfm-card-head">
+        <span class="pfm-card-label">Editor</span>
+        <span
+          class="pfm-card-status"
+          class:dirty={presetStale}
+          class:applied={editorIsApplied}
+        >
+          <i class="pfm-status-dot" aria-hidden="true"></i>
+          <span>{presetStale ? 'unsaved' : editorIsApplied ? 'live' : 'saved'}</span>
         </span>
-      </button>
-      <button
-        class="pfm-btn increment-btn"
-        onclick={handleSaveIncrement}
-        disabled={saveStatus === 'saving' || applyStatus === 'applying'}
-        title="Save as incremented preset"
-      >
-        <i class="fas fa-plus"></i>
-      </button>
+      </div>
+      <div class="pfm-pill" class:dirty={presetStale} class:applied={editorIsApplied}>
+        <span class="pfm-pill-name" title={currentDisplayName}>{currentDisplayName}</span>
+      </div>
+      {#if presetStale}
+        <span class="pfm-stale-note" aria-live="polite">unsaved edits won't be captured</span>
+      {/if}
+      <div class="pfm-card-actions pfm-card-actions-stack">
+        <button
+          class="pfm-btn pfm-btn-row save-btn"
+          class:saving={saveStatus === 'saving'}
+          class:saved={saveStatus === 'saved'}
+          class:error={saveStatus === 'error'}
+          onclick={handleSave}
+          disabled={saveStatus === 'saving' || applyStatus === 'applying' || isDefaultActive}
+          title={isDefaultActive
+            ? 'Default is read-only — use Save As to capture under a new name'
+            : 'Capture the current theme + component configs into this preset'}
+        >
+          <i
+            class="fas"
+            class:fa-save={saveStatus === 'idle'}
+            class:fa-spinner={saveStatus === 'saving'}
+            class:fa-check={saveStatus === 'saved'}
+            class:fa-times={saveStatus === 'error'}
+          ></i>
+          <span>
+            {#if saveStatus === 'idle'}Save{:else if saveStatus === 'saving'}Saving{:else if saveStatus === 'saved'}Saved{:else}Error{/if}
+          </span>
+        </button>
+        <button class="pfm-btn pfm-btn-row" onclick={openSaveAs} title="Save as new preset">
+          <i class="fas fa-copy"></i>
+          <span>Save As…</span>
+        </button>
+        <button
+          class="pfm-btn pfm-btn-row"
+          class:active={showFileList}
+          onclick={toggleFileList}
+          disabled={applyStatus === 'applying'}
+          title="Load a preset"
+        >
+          <i class="fas fa-folder-open"></i>
+          <span>Load…</span>
+        </button>
+      </div>
     </div>
 
-    {#if saveAsEditing}
-      <div class="save-as-inline">
-        <input
-          class="save-as-input"
-          type="text"
-          bind:value={saveAsName}
-          bind:this={saveAsInput}
-          onkeydown={handleSaveAsKeydown}
-          placeholder="Preset name..."
-        />
-        <div class="save-as-actions">
+    <button
+      class="pfm-adopt-btn"
+      class:saving={prodApplyStatus === 'applying'}
+      class:saved={prodApplyStatus === 'done'}
+      class:error={prodApplyStatus === 'error'}
+      class:in-sync={prodIsInSync}
+      onclick={handleApplyToProduction}
+      disabled={prodApplyStatus === 'applying' || prodIsInSync}
+      title={prodIsInSync
+        ? 'This preset is already in production'
+        : prodIsDiverged
+          ? `Re-adopt "${currentDisplayName}" — discards individual component adopts`
+          : `Adopt "${currentDisplayName}" as the production preset`}
+    >
+      <i
+        class="fas"
+        class:fa-arrow-down={prodApplyStatus === 'idle'}
+        class:fa-spinner={prodApplyStatus === 'applying'}
+        class:fa-check={prodApplyStatus === 'done'}
+        class:fa-xmark={prodApplyStatus === 'error'}
+      ></i>
+      <span>
+        {#if prodApplyStatus === 'idle'}Adopt{:else if prodApplyStatus === 'applying'}Adopting{:else if prodApplyStatus === 'done'}Adopted{:else}Error{/if}
+      </span>
+    </button>
+
+    <div
+      class="pfm-card pfm-card-production"
+      class:in-sync={prodIsInSync}
+      class:diverged={prodIsDiverged}
+    >
+      <span class="pfm-rail" aria-hidden="true"></span>
+      <div class="pfm-card-head">
+        <span class="pfm-card-label">Production</span>
+        <span
+          class="pfm-card-status"
+          class:applied={prodIsInSync}
+          class:diverged={prodIsDiverged}
+        >
+          <i class="pfm-status-dot" aria-hidden="true"></i>
+          <span>
+            {#if prodIsInSync}live{:else if prodIsDiverged}diverged{:else}out of sync{/if}
+          </span>
+        </span>
+      </div>
+      <div class="pfm-pill" class:applied={prodIsInSync} class:diverged={prodIsDiverged}>
+        <span class="pfm-pill-name" title={prodPresetName}>{prodPresetName}</span>
+      </div>
+      {#if prodIsDiverged && $presetProductionComparison}
+        <span class="pfm-diverged-note" aria-live="polite">
+          {$presetProductionComparison.driftedComponents.length > 0
+            ? `${$presetProductionComparison.driftedComponents.length} component${
+                $presetProductionComparison.driftedComponents.length === 1 ? '' : 's'
+              } adopted individually`
+            : 'theme production differs from this preset'}
+        </span>
+      {/if}
+      {#if prodIsDiverged}
+        <div class="pfm-card-actions">
           <button
-            class="inline-btn confirm-btn"
-            onclick={confirmSaveAs}
-            disabled={!saveAsName.trim()}
-            title="Save"
+            class="pfm-btn pfm-btn-wide"
+            onclick={openCaptureFromProduction}
+            disabled={prodCaptureStatus === 'saving'}
+            title="Save the current production state as a new named preset"
           >
-            <i class="fas fa-check"></i>
-          </button>
-          <button class="inline-btn cancel-btn" onclick={cancelSaveAs} title="Cancel">
-            <i class="fas fa-times"></i>
+            <i
+              class="fas"
+              class:fa-bookmark={prodCaptureStatus === 'idle'}
+              class:fa-spinner={prodCaptureStatus === 'saving'}
+              class:fa-check={prodCaptureStatus === 'saved'}
+              class:fa-times={prodCaptureStatus === 'error'}
+            ></i>
+            <span>
+              {#if prodCaptureStatus === 'idle'}Capture as preset{:else if prodCaptureStatus === 'saving'}Saving{:else if prodCaptureStatus === 'saved'}Saved{:else}Error{/if}
+            </span>
           </button>
         </div>
-      </div>
-    {:else}
-      <button class="pfm-btn" onclick={openSaveAs} title="Save as new preset">
-        <i class="fas fa-copy"></i>
-        <span>Save As</span>
-      </button>
-    {/if}
-
-    <button
-      class="pfm-btn"
-      class:active={showFileList}
-      onclick={toggleFileList}
-      disabled={applyStatus === 'applying'}
-      title="Load a preset"
-    >
-      <i class="fas fa-folder-open"></i>
-      <span>Load</span>
-    </button>
+      {/if}
+    </div>
   </div>
 
   {#if applyStatus === 'applying'}
@@ -261,6 +481,49 @@
   {/if}
 </div>
 
+{#if infoOpen}
+  <div
+    class="pfm-info-popover"
+    class:ready={infoPopoverReady}
+    role="dialog"
+    aria-label="About presets"
+    bind:this={infoPopoverEl}
+  >
+    <header class="pfm-info-header">
+      <span class="pfm-info-title">Presets</span>
+      <button
+        type="button"
+        class="pfm-info-close"
+        aria-label="Close"
+        onclick={() => (infoOpen = false)}
+      >
+        <i class="fas fa-xmark"></i>
+      </button>
+    </header>
+    <div class="pfm-info-body">
+      <p>
+        A <strong>preset</strong> is a manifest naming one theme file and one
+        config file per component.
+      </p>
+      <p>
+        The <strong>Editor</strong> row is the preset you're working under.
+        <strong>Save</strong> captures the currently active files into its
+        manifest.
+      </p>
+      <p>
+        The <strong>Production</strong> row is the preset currently baked into
+        <code>tokens.css</code>. <strong>Adopt</strong> sets every component's
+        production file from the editor preset.
+      </p>
+      <p>
+        Adopting a single component elsewhere can leave production
+        <em>diverged</em> from any preset. <strong>Capture</strong> saves that
+        state under a new name.
+      </p>
+    </div>
+  </div>
+{/if}
+
 <UIDialog bind:show={showFileList} title="Load Preset" cancelLabel="Close" width="420px">
   <div class="load-list">
     {#each files as file}
@@ -288,185 +551,369 @@
   </div>
 </UIDialog>
 
+<SaveAsDialog
+  bind:show={saveAsDialog}
+  {currentDisplayName}
+  {files}
+  title="Save Preset As"
+  placeholder="Preset name…"
+  reservedNameMessage='The name "default" is reserved for the initial distribution.'
+  onsave={confirmSaveAs}
+/>
+
+<SaveAsDialog
+  bind:show={captureProdDialog}
+  currentDisplayName={prodPresetName}
+  {files}
+  title="Capture Production as Preset"
+  placeholder="Preset name…"
+  reservedNameMessage='The name "default" is reserved for the initial distribution.'
+  onsave={confirmCaptureFromProduction}
+/>
+
+<UnsavedComponentsDialog
+  bind:show={unsavedDialog}
+  dirtyComponents={dirtyComponentIds}
+  onproceed={handleUnsavedProceed}
+/>
+
 <style>
   .preset-file-manager {
+    --pfm-applied: #5aa85e;
+    --pfm-rail-neutral: var(--ui-border-default);
+    --pfm-rail-dirty: var(--ui-highlight);
+    --pfm-rail-applied: var(--pfm-applied);
+
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-8);
   }
 
-  .active-file {
+  .pfm-header {
     display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-2);
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ui-space-4);
     padding: 0 var(--ui-space-4);
   }
 
-  .active-label {
+  .pfm-header-label {
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
 
-  .active-name {
-    font-size: var(--ui-font-size-md);
-    font-weight: var(--ui-font-weight-semibold);
+  /* Naked icon button — same affordance language as cfm-info-btn. */
+  .pfm-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);
+  }
+
+  .pfm-info-btn:hover,
+  .pfm-info-btn[aria-expanded='true'] {
     color: var(--ui-text-primary);
   }
 
-  .button-grid {
+  /* ── two-card pipeline (Editor → Production) ─────────────────────────────
+     Mirrors the cfm-rows pattern in ComponentFileManager so the preset reads
+     as the same kind of artifact as themes and components, just one level up. */
+  .pfm-cards {
     display: flex;
     flex-direction: column;
-    gap: var(--ui-space-4);
+    gap: var(--ui-space-6);
   }
 
-  .pfm-btn {
+  .pfm-card {
+    position: relative;
     display: flex;
-    align-items: center;
-    gap: var(--ui-space-4);
-    width: 100%;
-    padding: var(--ui-space-6) var(--ui-space-8);
-    background: var(--ui-surface-low);
+    flex-direction: column;
+    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-radius: var(--ui-radius-md);
-    color: var(--ui-text-secondary);
-    font-size: var(--ui-font-size-md);
-    cursor: pointer;
-    transition: all var(--ui-transition-fast);
-    white-space: nowrap;
   }
 
-  .pfm-btn i {
-    width: 1rem;
-    text-align: center;
+  .pfm-rail {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
+    background: var(--pfm-rail-neutral);
+    transition: background var(--ui-transition-base);
   }
 
-  .pfm-btn:hover:not(:disabled) {
-    background: var(--ui-surface);
-    color: var(--ui-text-primary);
-    border-color: var(--ui-border-default);
-  }
+  .pfm-card-editor.dirty .pfm-rail { background: var(--pfm-rail-dirty); }
+  .pfm-card-editor.applied .pfm-rail { background: var(--pfm-rail-applied); }
+  .pfm-card-production.in-sync .pfm-rail { background: var(--pfm-rail-applied); }
+  .pfm-card-production.diverged .pfm-rail { background: var(--ui-highlight); }
 
-  .pfm-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  .pfm-card-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--ui-space-8);
   }
 
-  .pfm-btn.active {
-    background: var(--ui-surface);
-    border-color: var(--ui-border-default);
-    color: var(--ui-text-primary);
+  .pfm-card-label {
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ui-text-secondary);
+    line-height: 1.1;
   }
 
-  .save-row {
-    display: flex;
+  .pfm-card-status {
+    display: inline-flex;
+    align-items: center;
     gap: var(--ui-space-4);
+    font-size: 0.7rem;
+    letter-spacing: 0.02em;
+    color: var(--ui-text-muted);
+    line-height: 1;
   }
 
-  .save-row .save-btn {
-    flex: 1;
-    min-width: 0;
+  .pfm-status-dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0.7;
+    flex-shrink: 0;
   }
 
-  .increment-btn {
-    flex: 0 0 auto;
-    width: 34px;
-    padding: 0;
+  .pfm-card-status.dirty,
+  .pfm-card-status.diverged {
+    color: var(--ui-highlight);
+  }
+
+  .pfm-card-status.dirty .pfm-status-dot,
+  .pfm-card-status.diverged .pfm-status-dot {
+    opacity: 1;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-highlight) 22%, transparent);
+    animation: pfm-pulse 1.6s ease-in-out infinite;
+  }
+
+  .pfm-card-status.applied {
+    color: var(--pfm-applied);
+  }
+  .pfm-card-status.applied .pfm-status-dot {
+    opacity: 1;
+  }
+
+  /* filename pill — matches the cfm-pill vocabulary so the editor side and
+     the preset side use one visual idiom for "this is a named file". */
+  .pfm-pill {
     display: flex;
     align-items: center;
-    justify-content: 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);
   }
 
-  .save-btn {
-    background: var(--ui-surface-high);
-    border-color: var(--ui-border-medium);
-    color: var(--ui-text-primary);
+  .pfm-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);
   }
 
-  .save-btn:hover:not(:disabled) {
-    background: var(--ui-surface-higher);
-    border-color: var(--ui-border-strong);
+  .pfm-pill.applied {
+    border-color: color-mix(in srgb, var(--pfm-applied) 50%, var(--ui-border-subtle));
   }
 
-  .save-btn.saving i {
-    animation: spin 1s linear infinite;
+  .pfm-pill.diverged {
+    border-color: color-mix(in srgb, var(--ui-highlight) 50%, var(--ui-border-subtle));
   }
-  .save-btn.saved {
-    background: var(--ui-surface-highest);
-    color: var(--ui-text-success);
+
+  .pfm-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);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-  .save-btn.error {
-    background: var(--ui-surface-high);
-    color: var(--ui-text-muted);
+
+  .pfm-stale-note,
+  .pfm-diverged-note {
+    font-size: 0.7rem;
+    letter-spacing: 0.02em;
+    color: var(--ui-highlight);
+    line-height: 1.2;
   }
 
-  .save-as-inline {
+  .pfm-card-actions {
     display: flex;
-    flex-direction: column;
     gap: var(--ui-space-4);
+    flex-wrap: wrap;
   }
 
-  .save-as-actions {
-    display: flex;
-    gap: var(--ui-space-4);
-    justify-content: flex-end;
+  /* Stack variant — Save / Save As / Load as left-aligned rows. */
+  .pfm-card-actions-stack {
+    flex-direction: column;
   }
 
-  .save-as-input {
-    flex: 1;
-    min-width: 0;
-    padding: var(--ui-space-6) var(--ui-space-8);
-    background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+  .pfm-btn-row {
+    width: 100%;
+    justify-content: flex-start;
+    gap: var(--ui-space-8);
+    flex: 0 0 auto;
+    text-align: left;
+  }
+
+  .pfm-btn-row i {
+    width: 1rem;
+    text-align: center;
+    flex: 0 0 auto;
+  }
+
+  .pfm-btn-row span {
+    flex: 1 1 auto;
+    text-align: left;
+  }
+
+  /* Bridge button — lives between the Editor and Production cards so the
+     promote action visually IS the arrow that connects them. Matches the
+     .cfm-btn.primary geometry (--ui-radius-md, --ui-space-6/12 padding) so
+     it reads as the same affordance as the per-component Adopt. */
+  .pfm-adopt-btn {
+    align-self: stretch;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-space-6);
+    margin: calc(var(--ui-space-2) * -1) 0;
+    padding: var(--ui-space-6) var(--ui-space-12);
+    background: color-mix(in srgb, var(--pfm-applied) 18%, var(--ui-surface-high));
+    border: 1px solid color-mix(in srgb, var(--pfm-applied) 45%, var(--ui-border-medium));
     border-radius: var(--ui-radius-md);
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-md);
-    outline: none;
+    font-weight: var(--ui-font-weight-medium);
+    cursor: pointer;
+    transition: all var(--ui-transition-fast);
+    white-space: nowrap;
+    position: relative;
+    z-index: 1;
   }
 
-  .save-as-input:focus {
-    border-color: var(--ui-border-medium);
+  .pfm-adopt-btn i {
+    width: 1rem;
+    text-align: center;
+    font-size: 0.85em;
   }
 
-  .save-as-input::placeholder {
+  .pfm-adopt-btn:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--pfm-applied) 30%, var(--ui-surface-higher));
+    border-color: color-mix(in srgb, var(--pfm-applied) 70%, var(--ui-border-strong));
+  }
+
+  .pfm-adopt-btn:disabled {
+    cursor: not-allowed;
+  }
+
+  .pfm-adopt-btn.in-sync {
+    background: transparent;
+    border-color: var(--ui-border-subtle);
     color: var(--ui-text-muted);
+    opacity: 0.7;
   }
 
-  .inline-btn {
-    flex: 0 0 auto;
-    display: flex;
+  .pfm-adopt-btn.saving i { animation: spin 1s linear infinite; }
+  .pfm-adopt-btn.saved {
+    background: color-mix(in srgb, var(--pfm-applied) 30%, var(--ui-surface-high));
+    color: var(--pfm-applied);
+  }
+  .pfm-adopt-btn.error { color: var(--ui-text-muted); }
+
+  .pfm-btn {
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 30px;
-    height: 30px;
-    padding: 0;
-    background: var(--ui-surface-low);
+    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-radius: var(--ui-radius-md);
     color: var(--ui-text-secondary);
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-medium);
     cursor: pointer;
     transition: all var(--ui-transition-fast);
+    white-space: nowrap;
+    flex: 1 1 0;
+    min-width: 0;
   }
 
-  .inline-btn:hover:not(:disabled) {
-    background: var(--ui-surface);
+  .pfm-btn i {
+    width: 1rem;
+    text-align: center;
+    font-size: 0.85em;
+  }
+
+  .pfm-btn:hover:not(:disabled) {
+    background: var(--ui-surface-high);
     color: var(--ui-text-primary);
     border-color: var(--ui-border-default);
   }
 
-  .inline-btn:disabled {
-    opacity: 0.5;
+  .pfm-btn:disabled {
+    opacity: 0.45;
     cursor: not-allowed;
   }
 
-  .inline-btn.confirm-btn {
+  .pfm-btn.active {
+    background: var(--ui-surface);
+    border-color: var(--ui-border-default);
+    color: var(--ui-text-primary);
+  }
+
+  .pfm-btn-wide {
+    flex: 1 1 100%;
+    width: 100%;
+  }
+
+  .save-btn {
     background: var(--ui-surface-high);
     border-color: var(--ui-border-medium);
     color: var(--ui-text-primary);
   }
 
+  .save-btn:hover:not(:disabled) {
+    background: var(--ui-surface-higher);
+    border-color: var(--ui-border-strong);
+  }
+
+  .save-btn.saving i { animation: spin 1s linear infinite; }
+  .save-btn.saved {
+    background: var(--ui-surface-highest);
+    color: var(--ui-text-success);
+  }
+  .save-btn.error {
+    background: var(--ui-surface-high);
+    color: var(--ui-text-muted);
+  }
+
+
   .load-list {
     display: flex;
     flex-direction: column;
@@ -558,6 +1005,106 @@
     letter-spacing: 0.02em;
   }
 
+  /* 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). */
+  .pfm-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: pfm-info-in 140ms ease-out;
+  }
+
+  .pfm-info-popover.ready {
+    visibility: visible;
+  }
+
+  .pfm-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);
+  }
+
+  .pfm-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;
+  }
+
+  .pfm-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);
+  }
+
+  .pfm-info-close:hover {
+    color: var(--ui-text-primary);
+    background: var(--ui-hover);
+  }
+
+  .pfm-info-body {
+    padding: var(--ui-space-16);
+  }
+
+  .pfm-info-popover p {
+    margin: 0 0 var(--ui-space-12) 0;
+    font-size: var(--ui-font-size-xs);
+    line-height: 1.55;
+  }
+
+  .pfm-info-popover p:last-child {
+    margin-bottom: 0;
+  }
+
+  .pfm-info-popover strong {
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+
+  .pfm-info-popover em {
+    font-style: italic;
+    color: var(--ui-text-primary);
+  }
+
+  @keyframes pfm-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); }
+  }
+
+  @keyframes pfm-info-in {
+    from { opacity: 0; transform: translateY(-3px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
   @keyframes spin {
     from {
       transform: rotate(0deg);