@motion-proto/live-tokens 0.47.1 → 0.48.0

package/src/editor/ui/ThemeFileManager.svelte

@@ -1,785 +0,0 @@
-<script lang="ts">
-  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 | Promise<void>;
-    onload?: (payload: { fileName: string }) => void;
-  }
-
-  let { saveStatus = 'idle', onsave, onload }: Props = $props();
-
-  let files: ThemeMeta[] = $state([]);
-  let showFileList = $state(false);
-  let saveAsDialog = $state(false);
-  let currentDisplayName = $state('Default Theme');
-
-  type ProdApplyStatus = 'idle' | 'applying' | 'done' | 'error';
-  let prodApplyStatus: ProdApplyStatus = $state('idle');
-  const setProdApplyStatus = (s: ProdApplyStatus) => (prodApplyStatus = s);
-
-  // 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);
-  let prodName = $derived($themeProductionInfo?.name ?? '—');
-
-  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();
-      const active = files.find((f) => f.isActive);
-      if (active) {
-        $activeFileName = active.fileName;
-        currentDisplayName = active.name;
-      }
-    } catch {
-      // silent — will show empty list
-    }
-  }
-
-  async function refreshProduction() {
-    try {
-      const info = await getProductionInfo();
-      themeProductionInfo.set(info);
-    } catch {
-      // silent — leave cached value in place
-    }
-  }
-
-  onMount(async () => {
-    await refreshFiles();
-    await refreshProduction();
-  });
-
-  // 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(() => {
-    void $productionRevision;
-    if (!pulseInitialised) {
-      pulseInitialised = true;
-      return;
-    }
-    refreshProduction();
-  });
-
-  function handleSave() {
-    // 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;
-  }
-
-  async function confirmSaveAs(detail: { displayName: string; fileName: string }) {
-    const { displayName, fileName } = detail;
-    await onsave?.({ fileName, displayName });
-    $activeFileName = fileName;
-    currentDisplayName = displayName;
-    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() {
-    // 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;
-    }
-
-    // Already adopted with nothing unsaved to push.
-    if (prodIsInSync && !$dirty) return;
-
-    prodApplyStatus = 'applying';
-    try {
-      // Flush unsaved edits to the active theme file first, so production adopts
-      // the current editor state rather than a stale on-disk snapshot.
-      if ($dirty) await onsave?.({ fileName: $activeFileName, displayName: currentDisplayName });
-      await setProductionFile($activeFileName);
-      await refreshProduction();
-      bumpProductionRevision();
-      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 });
-    }
-  }
-
-  async function handleLoad(file: ThemeMeta) {
-    if ($dirty) {
-      const ok = window.confirm(
-        'Loading a theme will discard unsaved changes. Continue?',
-      );
-      if (!ok) return;
-    }
-    showFileList = false;
-    await setActiveFile(file.fileName);
-    $activeFileName = file.fileName;
-    currentDisplayName = file.name;
-    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 (wasActive) {
-        $activeFileName = 'default';
-        currentDisplayName = 'Default Theme';
-        onload?.({ fileName: 'default' });
-      }
-    } catch {
-      // silent
-    }
-  }
-
-  function toggleFileList() {
-    showFileList = !showFileList;
-    if (showFileList) refreshFiles();
-  }
-
-</script>
-
-<div class="theme-file-manager">
-  <div class="tfm-header">
-    <span class="tfm-header-label">Theme</span>
-    <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}>
-    <div
-      class="tfm-card tfm-card-editor"
-      class:dirty={$dirty}
-      class:applied={editorIsApplied}
-    >
-      <span class="tfm-rail" aria-hidden="true"></span>
-      <div class="tfm-card-head">
-        <span class="tfm-card-label">Editor</span>
-        <span
-          class="tfm-card-status"
-          class:dirty={$dirty}
-          class:applied={editorIsApplied}
-        >
-          <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>
-      <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"
-          class:saving={saveStatus === 'saving'}
-          class:saved={saveStatus === 'saved'}
-          class:error={saveStatus === 'error'}
-          onclick={handleSave}
-          disabled={saveStatus === 'saving'}
-          title={isDefaultActive
-            ? 'Save to a new theme file'
-            : 'Save to current file'}
-        >
-          <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="tfm-btn tfm-btn-row" onclick={openSaveAs} title="Save as new theme">
-          <i class="fas fa-copy"></i>
-          <span>Save As…</span>
-        </button>
-        <button
-          class="tfm-btn tfm-btn-row"
-          class:active={showFileList}
-          onclick={toggleFileList}
-          title="Load a theme"
-        >
-          <i class="fas fa-folder-open"></i>
-          <span>Load…</span>
-        </button>
-      </div>
-    </div>
-
-    <button
-      class="tfm-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 theme is already in production'
-        : `Adopt "${currentDisplayName}" as the production theme`}
-    >
-      <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="tfm-card tfm-card-production"
-      class:in-sync={prodIsInSync}
-    >
-      <span class="tfm-rail" aria-hidden="true"></span>
-      <div class="tfm-card-head">
-        <span class="tfm-card-label">Production</span>
-        <span
-          class="tfm-card-status"
-          class:applied={prodIsInSync}
-        >
-          <i class="tfm-status-dot" aria-hidden="true"></i>
-          <span>{prodIsInSync ? 'live' : 'out of sync'}</span>
-        </span>
-      </div>
-      <FilePill
-        name={prodName}
-        isProtected={$themeProductionInfo?.fileName === 'default'}
-        applied={prodIsInSync}
-        protectedTitle="Protected system theme"
-        title={prodName}
-        style="display: flex;"
-      />
-    </div>
-  </div>
-</div>
-
-<FileLoadList
-  bind:show={showFileList}
-  title="Load Theme"
-  {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='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);
-    --tfm-rail-dirty: var(--ui-highlight);
-    --tfm-rail-applied: var(--tfm-applied);
-
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-8);
-  }
-
-  .tfm-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--ui-space-4);
-    padding: 0 var(--ui-space-4);
-  }
-
-  .tfm-header-label {
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-secondary);
-  }
-
-  /* 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;
-    gap: var(--ui-space-6);
-  }
-
-  .tfm-card {
-    position: relative;
-    display: flex;
-    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-low);
-    border-radius: var(--ui-radius-md);
-  }
-
-  .tfm-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(--tfm-rail-neutral);
-    transition: background var(--ui-transition-base);
-  }
-
-  .tfm-card-editor.dirty .tfm-rail { background: var(--tfm-rail-dirty); }
-  .tfm-card-editor.applied .tfm-rail { background: var(--tfm-rail-applied); }
-  .tfm-card-production.in-sync .tfm-rail { background: var(--tfm-rail-applied); }
-
-  .tfm-card-head {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: var(--ui-space-8);
-  }
-
-  .tfm-card-label {
-    font-size: var(--ui-font-size-xs);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-secondary);
-    line-height: 1.1;
-  }
-
-  .tfm-card-status {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-4);
-    font-size: 0.7rem;
-    color: var(--ui-text-muted);
-    line-height: 1;
-  }
-
-  .tfm-status-dot {
-    width: 5px;
-    height: 5px;
-    border-radius: 50%;
-    background: currentColor;
-    opacity: 0.7;
-    flex-shrink: 0;
-  }
-
-  .tfm-card-status.dirty {
-    color: var(--ui-highlight);
-  }
-
-  .tfm-card-status.dirty .tfm-status-dot {
-    opacity: 1;
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-highlight) 22%, transparent);
-    animation: tfm-pulse 1.6s ease-in-out infinite;
-  }
-
-  .tfm-card-status.applied {
-    color: var(--tfm-applied);
-  }
-  .tfm-card-status.applied .tfm-status-dot {
-    opacity: 1;
-  }
-
-  /* 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;
-    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-revert-btn:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--ui-highlight) 60%, transparent);
-    outline-offset: 1px;
-  }
-
-  .tfm-revert-btn i {
-    font-size: 0.65rem;
-    transition: transform var(--ui-transition-fast);
-  }
-
-  .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);
-    white-space: nowrap;
-  }
-
-  /* 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 {
-    display: flex;
-    gap: var(--ui-space-4);
-    flex-wrap: wrap;
-  }
-
-  .tfm-card-actions-stack {
-    flex-direction: column;
-  }
-
-  .tfm-btn-row {
-    width: 100%;
-    justify-content: flex-start;
-    gap: var(--ui-space-8);
-    flex: 0 0 auto;
-    text-align: left;
-  }
-
-  .tfm-btn-row i {
-    width: 1rem;
-    text-align: center;
-    flex: 0 0 auto;
-  }
-
-  .tfm-btn-row span {
-    flex: 1 1 auto;
-    text-align: left;
-  }
-
-  /* Bridge button — sits between Editor and Production cards as the arrow that
-     promotes the editor theme into production. */
-  .tfm-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(--tfm-applied) 18%, var(--ui-surface-high));
-    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);
-    font-weight: var(--ui-font-weight-medium);
-    cursor: pointer;
-    transition: all var(--ui-transition-fast);
-    white-space: nowrap;
-    position: relative;
-    z-index: 1;
-  }
-
-  .tfm-adopt-btn i {
-    width: 1rem;
-    text-align: center;
-    font-size: 0.85em;
-  }
-
-  .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-higher));
-  }
-
-  .tfm-adopt-btn:disabled {
-    cursor: not-allowed;
-  }
-
-  .tfm-adopt-btn.in-sync {
-    background: transparent;
-    border-color: var(--ui-border-low);
-    color: var(--ui-text-muted);
-    opacity: 0.7;
-  }
-
-  .tfm-adopt-btn.saving i { animation: spin 1s linear infinite; }
-  .tfm-adopt-btn.saved {
-    background: color-mix(in srgb, var(--tfm-applied) 30%, var(--ui-surface-high));
-    color: var(--tfm-applied);
-  }
-  .tfm-adopt-btn.error { color: var(--ui-text-muted); }
-
-  .tfm-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--ui-space-4);
-    padding: var(--ui-space-6) var(--ui-space-10);
-    background: var(--ui-surface);
-    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);
-    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;
-  }
-
-  .tfm-btn i {
-    width: 1rem;
-    text-align: center;
-    font-size: 0.85em;
-  }
-
-  .tfm-btn:hover:not(:disabled) {
-    background: var(--ui-surface-high);
-    color: var(--ui-text-primary);
-    border-color: var(--ui-border);
-  }
-
-  .tfm-btn:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-
-  .tfm-btn.active {
-    background: var(--ui-surface);
-    border-color: var(--ui-border);
-    color: var(--ui-text-primary);
-  }
-
-  .save-btn {
-    background: var(--ui-surface-high);
-    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-higher);
-  }
-
-  .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);
-  }
-
-  @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); }
-  }
-
-  @keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-  }
-</style>