@motion-proto/live-tokens 0.6.2 → 0.7.1

package/src/{component-editor → editor/component-editor}/scaffolding/ComponentFileManager.svelte

@@ -4,8 +4,9 @@
 
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
+  import UIInfoPopover from '../../ui/UIInfoPopover.svelte';
   import { get } from 'svelte/store';
-  import type { ComponentConfig, ComponentConfigMeta } from '../../lib/themeTypes';
+  import type { ComponentConfig, ComponentConfigMeta } from '../../core/themes/themeTypes';
   import { componentSourceFile } from './componentSources';
   import {
     loadComponentConfig,
@@ -14,19 +15,25 @@
     setActiveComponentFile,
     setComponentProductionFile,
     type ComponentProductionInfo,
-  } from '../../lib/componentConfigService';
+  } from '../../core/components/componentConfigService';
   import {
     editorState,
     componentDirty,
     loadComponentActive,
     markComponentSaved,
-  } from '../../lib/editorStore';
-  import { bumpProductionRevision } from '../../lib/productionPulse';
-  import { CURRENT_COMPONENT_SCHEMA_VERSION } from '../../lib/migrations';
-  import type { CssVarRef } from '../../lib/editorTypes';
-  import { safeFetch } from '../../lib/storage';
+  } from '../../core/store/editorStore';
+  import { bumpProductionRevision } from '../../core/productionPulse';
+  import { listManifests, saveAsManifest } from '../../core/manifests/manifestService';
+  import type { ManifestMeta } from '../../core/themes/themeTypes';
+  import { CURRENT_COMPONENT_SCHEMA_VERSION } from '../../core/themes/migrations';
+  import type { CssVarRef } from '../../core/store/editorTypes';
+  import { safeFetch } from '../../core/storage/storage';
+  import { flashStatus } from '../../core/flashStatus';
   import ComponentFileMenu from './ComponentFileMenu.svelte';
   import SaveAsDialog from './SaveAsDialog.svelte';
+  import FilePill from '../../ui/FilePill.svelte';
+  import UIPillButton from '../../ui/UIPillButton.svelte';
+  import UISquareButton from '../../ui/UISquareButton.svelte';
 
   
   
@@ -50,74 +57,29 @@
 
   type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';
   let saveStatus: SaveStatus = 'idle';
+  const setSaveStatus = (s: SaveStatus) => (saveStatus = s);
 
-  /** Show a transient saveStatus (saved/error) and revert to idle after 2s.
-      Centralises the timing so all flash sites stay in sync. */
-  function flashStatus(state: Exclude<SaveStatus, 'idle'>) {
-    saveStatus = state;
-    setTimeout(() => (saveStatus = 'idle'), 2000);
-  }
   let files: ComponentConfigMeta[] = $state([]);
   let activeFileName = $state('default');
   let currentDisplayName = $state('Default');
   let saveAsDialog = $state(false);
+  // Title + description re-set per trigger so the auto-prompts (Save on
+  // default, Adopt on default+dirty) explain why they appeared, while the
+  // manual Save As button stays terse.
+  let saveAsTitle = $state('Save Component As');
+  let saveAsDescription = $state('');
 
   let productionInfo = $state<ComponentProductionInfo | null>(null);
   type ProductionStatus = 'idle' | 'updating' | 'done' | 'error';
   let productionUpdateStatus: ProductionStatus = $state('idle');
   let adoptFeedback = $state('');
 
-  let infoOpen = $state(false);
-  let infoBtnEl = $state<HTMLButtonElement | undefined>(undefined);
-  let infoPopoverEl = $state<HTMLDivElement | undefined>(undefined);
-  let infoPopoverReady = $state(false);
-
-  /** Anchor the fixed-position popover centered below the info button.
-      Uses position: fixed so it escapes the sticky header's stacking
-      context (which was letting the side panels paint over it). */
-  function positionInfoPopover(): void {
-    const btn = infoBtnEl;
-    const pop = infoPopoverEl;
-    if (!btn || !pop) return;
-    const br = btn.getBoundingClientRect();
-    const pr = pop.getBoundingClientRect();
-    const margin = 8;
-    let left = br.left + br.width / 2 - pr.width / 2;
-    const vw = window.innerWidth;
-    if (left < margin) left = margin;
-    if (left + pr.width > vw - margin) left = vw - margin - pr.width;
-    pop.style.left = `${left}px`;
-    pop.style.top = `${br.bottom + margin}px`;
-    infoPopoverReady = true;
-  }
-
-  $effect(() => {
-    if (!infoOpen) {
-      infoPopoverReady = false;
-      return;
-    }
-    // Two rAFs: first so Svelte mounts the popover and the bind: ref is set,
-    // second so its rendered width is measurable before we anchor it.
-    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);
-    };
-  });
+  // Manifest SaveAs prompt for the "Adopt while default manifest is active" case.
+  let manifestSaveAsDialog = $state(false);
+  let manifests: ManifestMeta[] = $state([]);
+  let retryAdoptAfterManifestSave = false;
 
-  /** Same idle-after-2s pattern for the production-update flash. */
-  function flashProductionStatus(state: Exclude<ProductionStatus, 'idle'>) {
-    productionUpdateStatus = state;
-    setTimeout(() => {
-      productionUpdateStatus = 'idle';
-      adoptFeedback = '';
-    }, 2000);
-  }
+  const setProductionStatus = (s: ProductionStatus) => (productionUpdateStatus = s);
 
   let compDirty = $derived($componentDirty[component] ?? false);
   let isApplied = $derived(!!productionInfo && productionInfo.fileName === activeFileName && !compDirty);
@@ -150,28 +112,16 @@
     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.metaKey || e.ctrlKey) && e.key === 's') {
       e.preventDefault();
       handleSave();
-    } else 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('.cfm-info-btn, .cfm-info-popover')) {
-      infoOpen = false;
     }
   }
 
@@ -211,21 +161,24 @@
 
   async function handleSave() {
     if (activeFileName === 'default') {
-      // Default is regenerated from source — can't overwrite directly.
-      saveAsDialog = true;
+      // Default is regenerated from source, so the first Save quietly opens
+      // Save As — same dialog as the Save As button, no scolding description.
+      openSaveAs();
       return;
     }
     saveStatus = 'saving';
     try {
       await persist(activeFileName, currentDisplayName);
-      flashStatus('saved');
+      flashStatus(setSaveStatus, 'saved');
       await refreshFiles();
     } catch {
-      flashStatus('error');
+      flashStatus(setSaveStatus, 'error');
     }
   }
 
   function openSaveAs() {
+    saveAsTitle = 'Save Component As';
+    saveAsDescription = '';
     saveAsDialog = true;
   }
 
@@ -234,10 +187,10 @@
     saveStatus = 'saving';
     try {
       await persist(fileName, displayName);
-      flashStatus('saved');
+      flashStatus(setSaveStatus, 'saved');
       await refreshFiles();
     } catch {
-      flashStatus('error');
+      flashStatus(setSaveStatus, 'error');
     }
   }
 
@@ -262,11 +215,16 @@
     // Multi-step service flow (delete + reload-default-on-active-removal).
     // Silent by design — see handleLoad.
     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 deleteComponentConfig(component, file.fileName);
       await refreshFiles();
       await refreshProduction();
-      if (file.fileName === activeFileName) {
-        // Server reverts active to default; reload default aliases into the store.
+      if (wasActive) {
+        // Server reverts active to default; reload default aliases into the store
+        // so the deleted file's CSS vars are replaced by default's.
         const defaultCfg = await loadComponentConfig(component, 'default');
         loadComponentActive(component, 'default', defaultCfg.aliases, defaultCfg.config, defaultCfg.schemaVersion ?? 0);
         activeFileName = 'default';
@@ -283,6 +241,9 @@
     // regenerated from source and can't be overwritten, so route to Save As
     // and bail; the user can re-trigger Adopt after the new file is saved.
     if (compDirty && activeFileName === 'default') {
+      saveAsTitle = 'Save Component As';
+      saveAsDescription =
+        'Adopting pushes this component to production. The default config is read-only, so save your edits to a new file first.';
       saveAsDialog = true;
       return;
     }
@@ -300,10 +261,38 @@
       adoptFeedback = wasDirty
         ? `Saved "${adoptingName}" and adopted`
         : `Adopted "${adoptingName}"`;
-      flashProductionStatus('done');
-    } catch {
+      flashStatus(setProductionStatus, 'done', { onIdle: () => (adoptFeedback = '') });
+    } catch (err) {
+      const e = err as Error & { code?: string };
+      if (e.code === 'ACTIVE_IS_PROTECTED') {
+        adoptFeedback = '';
+        productionUpdateStatus = 'idle';
+        retryAdoptAfterManifestSave = true;
+        try {
+          manifests = await listManifests();
+        } catch {
+          manifests = [];
+        }
+        manifestSaveAsDialog = true;
+        return;
+      }
       adoptFeedback = '';
-      flashProductionStatus('error');
+      flashStatus(setProductionStatus, 'error', { onIdle: () => (adoptFeedback = '') });
+    }
+  }
+
+  async function onManifestSaveAs(detail: { displayName: string; fileName: string }) {
+    manifestSaveAsDialog = false;
+    try {
+      await saveAsManifest(detail.fileName, detail.displayName);
+    } catch (err) {
+      window.alert(`Failed to create manifest: ${(err as Error).message}`);
+      retryAdoptAfterManifestSave = false;
+      return;
+    }
+    if (retryAdoptAfterManifestSave) {
+      retryAdoptAfterManifestSave = false;
+      await handleUpdateProduction();
     }
   }
 
@@ -324,14 +313,11 @@
       <h2 class="cfm-title">{title}</h2>
     {/if}
     {#if sourceFile && projectRoot}
-      <a
-        class="source-link"
+      <UIPillButton
+        icon="fa-code"
         href="vscode://file/{projectRoot}/{sourceFile}"
         title="Open {sourceFile} in VS Code"
-      >
-        <i class="fas fa-code"></i>
-        <span>Show component source</span>
-      </a>
+      >Show component source</UIPillButton>
     {/if}
   </div>
 
@@ -345,18 +331,19 @@
           <span>{compDirty ? 'unsaved' : isApplied ? 'live' : 'saved'}</span>
         </span>
       </div>
-      <span
-        class="cfm-pill"
-        class:dirty={compDirty}
-        class:applied={isApplied}
+      <FilePill
+        name={currentDisplayName}
+        isProtected={activeFileName === 'default'}
+        dirty={compDirty}
+        applied={isApplied}
+        protectedTitle="Protected system config"
         title={compDirty
           ? 'Unsaved changes'
           : isApplied
             ? 'Active config is applied to production'
             : ''}
-      >
-        <span class="cfm-pill-name">{currentDisplayName}</span>
-      </span>
+        style="flex: 0 0 11.25rem; width: 11.25rem;"
+      />
       <div class="cfm-actions">
         <ComponentFileMenu
           {component}
@@ -369,15 +356,12 @@
           ondelete={handleDelete}
         />
         {#if resetVariables}
-          <button
-            class="cfm-btn reset-btn"
+          <UISquareButton
+            icon="fa-rotate-left"
             onclick={handleReset}
             disabled={!resetDirty}
             title="Revert unsaved changes to {currentDisplayName}"
-          >
-            <i class="fas fa-rotate-left"></i>
-            <span>Reset</span>
-          </button>
+          >Reset</UISquareButton>
         {/if}
       </div>
     </div>
@@ -395,15 +379,22 @@
           <span>live</span>
         </span>
       </div>
-      <span class="cfm-pill production">
-        <span class="cfm-pill-name">{productionInfo?.name ?? '—'}</span>
-      </span>
+      <FilePill
+        name={productionInfo?.name ?? '—'}
+        isProtected={productionInfo?.fileName === 'default'}
+        protectedTitle="Protected system config"
+        style="flex: 0 0 11.25rem; width: 11.25rem;"
+      />
       <div class="cfm-actions">
-        <button
-          class="cfm-btn primary apply-btn"
-          class:saving={productionUpdateStatus === 'updating'}
-          class:saved={productionUpdateStatus === 'done'}
-          class:error={productionUpdateStatus === 'error'}
+        <UISquareButton
+          variant="success"
+          icon={productionUpdateStatus === 'updating'
+            ? 'fa-spinner'
+            : productionUpdateStatus === 'done'
+              ? 'fa-check'
+              : productionUpdateStatus === 'error'
+                ? 'fa-xmark'
+                : 'fa-arrow-down'}
           onclick={handleUpdateProduction}
           disabled={productionUpdateStatus === 'updating' || !productionInfo || (productionInfo.fileName === activeFileName && !compDirty)}
           title={!productionInfo
@@ -416,55 +407,21 @@
                   ? `Save "${currentDisplayName}" and adopt`
                   : `Adopt "${currentDisplayName}" from editor`}
         >
-          <i class="fas" class:fa-arrow-down={productionUpdateStatus === 'idle'} class:fa-spinner={productionUpdateStatus === 'updating'} class:fa-check={productionUpdateStatus === 'done'} class:fa-xmark={productionUpdateStatus === 'error'}></i>
-          <span>
-            {#if productionUpdateStatus === 'idle'}Adopt{:else if productionUpdateStatus === 'updating'}Adopting{:else if productionUpdateStatus === 'done'}Adopted{:else}Error{/if}
-          </span>
-        </button>
-        <button
-          type="button"
-          class="cfm-info-btn"
-          aria-label="About Save and Adopt"
-          aria-expanded={infoOpen}
-          bind:this={infoBtnEl}
-          onclick={() => (infoOpen = !infoOpen)}
-        >
-          <i class="fas fa-circle-info"></i>
-        </button>
-        {#if infoOpen}
-          <div
-            class="cfm-info-popover"
-            class:ready={infoPopoverReady}
-            role="dialog"
-            aria-label="About Save and Adopt"
-            bind:this={infoPopoverEl}
-          >
-            <header class="cfm-info-header">
-              <span class="cfm-info-title">Component Configuration</span>
-              <button
-                type="button"
-                class="cfm-info-close"
-                aria-label="Close"
-                onclick={() => (infoOpen = false)}
-              >
-                <i class="fas fa-xmark"></i>
-              </button>
-            </header>
-            <div class="cfm-info-body">
-              <p>
-                Editor and Prod both use a saved file. When they share the
-                <em>same</em> file, <strong>Saved changes</strong> go to into production
-                immediately. They are sharing the configuration.
-              </p>
-              <p>
-                To experiment without changing production,<strong>Save As</strong> a new file first.
-              </p>
-              <p>
-                When ready, click <strong>Adopt</strong> to use the new file on prod.
-              </p>
-            </div>
-          </div>
-        {/if}
+          {#if productionUpdateStatus === 'idle'}Adopt{:else if productionUpdateStatus === 'updating'}Adopting{:else if productionUpdateStatus === 'done'}Adopted{:else}Error{/if}
+        </UISquareButton>
+        <UIInfoPopover title="Component Configuration" ariaLabel="About Save and Adopt">
+          <p>
+            Editor and Prod both use a saved file. When they share the
+            <em>same</em> file, <strong>Saved changes</strong> go to into production
+            immediately. They are sharing the configuration.
+          </p>
+          <p>
+            To experiment without changing production,<strong>Save As</strong> a new file first.
+          </p>
+          <p>
+            When ready, click <strong>Adopt</strong> to use the new file on prod.
+          </p>
+        </UIInfoPopover>
         {#if adoptFeedback}
           <span class="cfm-feedback" aria-live="polite">{adoptFeedback}</span>
         {/if}
@@ -477,33 +434,47 @@
   bind:show={saveAsDialog}
   {currentDisplayName}
   {files}
+  currentFileName={activeFileName}
+  reservedDisplayNames={files.filter((f) => f.fileName === 'default').map((f) => f.name)}
+  title={saveAsTitle}
+  description={saveAsDescription}
+  placeholder="Component config name…"
+  branchFromDefaultName={`my-${(title || 'component').toLowerCase().trim().replace(/\s+/g, '-')}`}
   onsave={confirmSaveAs}
 />
 
+<SaveAsDialog
+  bind:show={manifestSaveAsDialog}
+  currentDisplayName="my-manifest"
+  files={manifests}
+  reservedDisplayNames={manifests.filter((m) => m.fileName === 'default').map((m) => m.name)}
+  title="Save Manifest As"
+  placeholder="Manifest name…"
+  description="Adopting a component change updates the active manifest, The default manifest is locked. Name a new manifest for the site."
+  reservedNameMessage='That name is reserved for the protected default manifest.'
+  onsave={onManifestSaveAs}
+/>
+
 <style>
   .cfm-bar {
     --cfm-applied: #5aa85e;
-    --cfm-rail-neutral: var(--ui-border-default);
+    --cfm-rail-neutral: var(--ui-border);
     --cfm-rail-dirty: var(--ui-highlight);
     --cfm-rail-applied: var(--cfm-applied);
 
-    position: sticky;
-    top: 0;
-    z-index: 5;
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-8);
-    padding: var(--ui-space-12);
-    background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
-    border-radius: var(--ui-radius-lg);
   }
 
   .cfm-title-row {
     display: flex;
     align-items: center;
-    gap: var(--ui-space-12);
+    justify-content: space-between;
+    gap: var(--ui-space-16);
     flex-wrap: wrap;
+    max-width: 34rem;
+    margin-bottom: var(--ui-space-16);
   }
 
   .cfm-title {
@@ -516,33 +487,12 @@
     line-height: 1.1;
   }
 
-  .source-link {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-6);
-    margin-left: 2.5rem;
-    height: 26px;
-    padding: 0 14px;
-    font-size: var(--ui-font-size-xs);
-    font-weight: 500;
-    color: var(--ui-text-secondary);
-    text-decoration: none;
-    border: 1px solid var(--ui-border-default);
-    border-radius: 999px;
-    transition: all var(--ui-transition-fast);
-  }
-
-  .source-link:hover {
-    color: var(--ui-text-primary);
-    border-color: var(--ui-border-strong);
-    background: var(--ui-hover);
-  }
-
   /* ── two-row pipeline ─────────────────────────────────────── */
   .cfm-rows {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-6);
+    max-width: 34rem;
   }
 
   .cfm-row {
@@ -553,7 +503,7 @@
     gap: var(--ui-space-10);
     padding: var(--ui-space-8) var(--ui-space-10) var(--ui-space-8) 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);
   }
 
@@ -626,41 +576,6 @@
     opacity: 1;
   }
 
-  /* filename pill — fixed width so editor and production pills
-     stack with their left and right edges perfectly aligned. */
-  .cfm-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-6);
-    flex: 0 0 7.5rem;
-    width: 7.5rem;
-    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);
-  }
-
-  .cfm-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);
-  }
-
-  .cfm-pill.applied {
-    border-color: color-mix(in srgb, var(--cfm-applied) 50%, var(--ui-border-subtle));
-  }
-
-  .cfm-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;
-  }
-
   /* actions cluster — sits directly next to the filename pill so the
      buttons stay near the input and don't drift under the open editor panel.
      position: relative anchors the info popover below the cluster. */
@@ -714,195 +629,8 @@
     line-height: 1;
   }
 
-  /* buttons */
-  .cfm-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-6);
-    padding: var(--ui-space-6) var(--ui-space-12);
-    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-md);
-    font-weight: var(--ui-font-weight-medium);
-    cursor: pointer;
-    transition: all var(--ui-transition-fast);
-    white-space: nowrap;
-  }
-
-  .cfm-btn i {
-    width: 1rem;
-    text-align: center;
-    font-size: 0.85em;
-  }
-
-  .cfm-btn:hover:not(:disabled) {
-    background: var(--ui-surface-high);
-    color: var(--ui-text-primary);
-    border-color: var(--ui-border-default);
-  }
-
-  .cfm-btn:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-
-  .cfm-btn.primary {
-    background: color-mix(in srgb, var(--cfm-applied) 18%, var(--ui-surface-high));
-    border-color: color-mix(in srgb, var(--cfm-applied) 45%, var(--ui-border-medium));
-    color: var(--ui-text-primary);
-  }
-
-  .cfm-btn.primary:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--cfm-applied) 30%, var(--ui-surface-higher));
-    border-color: color-mix(in srgb, var(--cfm-applied) 70%, var(--ui-border-strong));
-  }
-
-  .cfm-btn.primary:disabled {
-    background: var(--ui-surface);
-    border-color: var(--ui-border-subtle);
-    color: var(--ui-text-muted);
-    opacity: 1;
-  }
-
-  .cfm-btn.primary.saving i { animation: cfm-spin 1s linear infinite; }
-  .cfm-btn.primary.saved {
-    background: color-mix(in srgb, var(--cfm-applied) 30%, var(--ui-surface-high));
-    color: var(--cfm-applied);
-  }
-  .cfm-btn.primary.error {
-    color: var(--ui-text-muted);
-  }
-
-  @keyframes cfm-spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-  }
-
   @keyframes cfm-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); }
   }
-
-  /* info button — naked icon, no chrome. The icon itself carries the
-     affordance; hover/active simply brighten its color. */
-  .cfm-info-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--ui-space-2) var(--ui-space-4);
-    background: transparent;
-    border: 0;
-    color: var(--ui-text-tertiary);
-    font-size: 1.15rem;
-    line-height: 1;
-    cursor: pointer;
-    transition: color var(--ui-transition-fast);
-  }
-
-  .cfm-info-btn:hover,
-  .cfm-info-btn[aria-expanded='true'] {
-    color: var(--ui-text-primary);
-  }
-
-  .cfm-info-popover {
-    /* Fixed positioning escapes the sticky header's stacking context,
-       so the popover paints over the side panels. JS in this file
-       anchors it centered below the info button. */
-    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: cfm-info-in 140ms ease-out;
-  }
-
-  .cfm-info-popover.ready {
-    visibility: visible;
-  }
-
-  .cfm-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);
-  }
-
-  .cfm-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;
-  }
-
-  .cfm-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);
-  }
-
-  .cfm-info-close:hover {
-    color: var(--ui-text-primary);
-    background: var(--ui-hover);
-  }
-
-  .cfm-info-body {
-    padding: var(--ui-space-16);
-  }
-
-  .cfm-info-popover p {
-    margin: 0 0 var(--ui-space-12) 0;
-    font-size: var(--ui-font-size-xs);
-    line-height: 1.55;
-  }
-
-  .cfm-info-popover p:last-child {
-    margin-bottom: 0;
-  }
-
-  .cfm-info-popover strong {
-    color: var(--ui-text-primary);
-    font-weight: var(--ui-font-weight-semibold);
-  }
-
-  .cfm-info-popover em {
-    font-style: italic;
-    color: var(--ui-text-primary);
-  }
-
-  @keyframes cfm-info-in {
-    from { opacity: 0; transform: translateY(-3px); }
-    to   { opacity: 1; transform: translateY(0); }
-  }
-
-  /* narrow viewports: hide button text, keep icons visible */
-  @media (max-width: 640px) {
-    .cfm-btn span { display: none; }
-    .cfm-btn { padding: var(--ui-space-6) var(--ui-space-10); }
-  }
 </style>