@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/component-editor/scaffolding/ComponentFileManager.svelte

@@ -0,0 +1,682 @@
+<script context="module" lang="ts">
+  declare const __PROJECT_ROOT__: string | undefined;
+</script>
+
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { get } from 'svelte/store';
+  import type { ComponentConfig, ComponentConfigMeta } from '../../lib/themeTypes';
+  import { componentSourceFile } from './componentSources';
+  import {
+    loadComponentConfig,
+    saveComponentConfig,
+    deleteComponentConfig,
+    setActiveComponentFile,
+    setComponentProductionFile,
+    type ComponentProductionInfo,
+  } from '../../lib/componentConfigService';
+  import {
+    editorState,
+    componentDirty,
+    loadComponentActive,
+    markComponentSaved,
+  } from '../../lib/editorStore';
+  import { CURRENT_COMPONENT_SCHEMA_VERSION } from '../../lib/migrations';
+  import type { CssVarRef } from '../../lib/editorTypes';
+  import { safeFetch } from '../../lib/storage';
+  import ComponentFileMenu from './ComponentFileMenu.svelte';
+  import SaveAsDialog from './SaveAsDialog.svelte';
+
+  /** Which component this manager controls (e.g. "button"). */
+  export let component: string;
+  /** Display name shown at the start of the bar (e.g. "Segmented Control"). */
+  export let title: string = '';
+  /** When provided, renders a Reset button that reverts the component to its
+      currently-loaded config file (discarding unsaved edits). To switch
+      configs or return to default, use the File menu. */
+  export let resetVariables: string[] | null = null;
+
+  const projectRoot: string =
+    typeof __PROJECT_ROOT__ !== 'undefined' ? (__PROJECT_ROOT__ ?? '') : '';
+  $: sourceFile = componentSourceFile(component);
+
+  type SaveStatus = 'idle' | 'saving' | 'saved' | 'error';
+  let saveStatus: SaveStatus = 'idle';
+
+  /** 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[] = [];
+  let activeFileName = 'default';
+  let currentDisplayName = 'Default';
+  let saveAsDialog = false;
+
+  let productionInfo: ComponentProductionInfo | null = null;
+  type ProductionStatus = 'idle' | 'updating' | 'done' | 'error';
+  let productionUpdateStatus: ProductionStatus = 'idle';
+  let adoptFeedback = '';
+
+  /** Same idle-after-2s pattern for the production-update flash. */
+  function flashProductionStatus(state: Exclude<ProductionStatus, 'idle'>) {
+    productionUpdateStatus = state;
+    setTimeout(() => {
+      productionUpdateStatus = 'idle';
+      adoptFeedback = '';
+    }, 2000);
+  }
+
+  $: compDirty = $componentDirty[component] ?? false;
+  $: isApplied = !!productionInfo && productionInfo.fileName === activeFileName && !compDirty;
+  $: resetDirty = !!resetVariables && compDirty;
+
+  async function refreshFiles() {
+    // safeFetch returns null on dev-server unavailable / non-2xx — silently
+    // leave the file list empty in that case.
+    const data = await safeFetch<{
+      files: ComponentConfigMeta[];
+      activeFile: string;
+    }>(`/api/component-configs/${encodeURIComponent(component)}`);
+    if (!data) return;
+    files = data.files;
+    activeFileName = data.activeFile;
+    const active = files.find((f) => f.fileName === activeFileName);
+    if (active) currentDisplayName = active.name;
+  }
+
+  async function refreshProduction() {
+    // Preserve existing productionInfo on transient fetch failure rather than
+    // clobbering it to null — same behaviour as the previous empty catch.
+    const info = await safeFetch<ComponentProductionInfo>(
+      `/api/component-configs/${encodeURIComponent(component)}/production`,
+    );
+    if (info) productionInfo = info;
+  }
+
+  onMount(async () => {
+    await refreshFiles();
+    await refreshProduction();
+    window.addEventListener('keydown', handleKeydown);
+  });
+
+  onDestroy(() => {
+    window.removeEventListener('keydown', handleKeydown);
+  });
+
+  function handleKeydown(e: KeyboardEvent) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+      e.preventDefault();
+      handleSave();
+    }
+  }
+
+  function refToString(ref: CssVarRef): string {
+    return ref.kind === 'token' ? ref.name : ref.value;
+  }
+
+  function currentAliases(): Record<string, string> {
+    const slice = get(editorState).components[component];
+    if (!slice) return {};
+    const out: Record<string, string> = {};
+    for (const [k, ref] of Object.entries(slice.aliases)) out[k] = refToString(ref);
+    return out;
+  }
+
+  function currentConfig(): Record<string, unknown> {
+    return get(editorState).components[component]?.config ?? {};
+  }
+
+  async function persist(fileName: string, displayName: string): Promise<void> {
+    const now = new Date().toISOString();
+    const data: ComponentConfig = {
+      name: displayName,
+      component,
+      createdAt: now,
+      updatedAt: now,
+      aliases: { ...currentAliases() },
+      config: { ...currentConfig() },
+      schemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION,
+    };
+    await saveComponentConfig(component, fileName, data);
+    await setActiveComponentFile(component, fileName);
+    activeFileName = fileName;
+    currentDisplayName = displayName;
+    markComponentSaved(component);
+  }
+
+  async function handleSave() {
+    if (activeFileName === 'default') {
+      // Default is regenerated from source — can't overwrite directly.
+      saveAsDialog = true;
+      return;
+    }
+    saveStatus = 'saving';
+    try {
+      await persist(activeFileName, currentDisplayName);
+      flashStatus('saved');
+      await refreshFiles();
+    } catch {
+      flashStatus('error');
+    }
+  }
+
+  function openSaveAs() {
+    saveAsDialog = true;
+  }
+
+  async function confirmSaveAs(e: CustomEvent<{ displayName: string; fileName: string }>) {
+    const { displayName, fileName } = e.detail;
+    saveStatus = 'saving';
+    try {
+      await persist(fileName, displayName);
+      flashStatus('saved');
+      await refreshFiles();
+    } catch {
+      flashStatus('error');
+    }
+  }
+
+  async function handleLoad(e: CustomEvent<ComponentConfigMeta>) {
+    const file = e.detail;
+    // Multi-step service flow (load + set-active) — if any network call
+    // fails, the dialog is already closed and the local state stays on the
+    // previous selection. Silent by design; the same boot resilience that
+    // keeps the editor working without a dev-server applies here.
+    try {
+      const cfg = await loadComponentConfig(component, file.fileName);
+      await setActiveComponentFile(component, file.fileName);
+      loadComponentActive(component, file.fileName, cfg.aliases, cfg.config, cfg.schemaVersion ?? 0);
+      activeFileName = file.fileName;
+      currentDisplayName = file.name;
+    } catch {
+      // intentional: see comment above
+    }
+  }
+
+  async function handleDelete(e: CustomEvent<ComponentConfigMeta>) {
+    const file = e.detail;
+    if (file.fileName === 'default') return;
+    // Multi-step service flow (delete + reload-default-on-active-removal).
+    // Silent by design — see handleLoad.
+    try {
+      await deleteComponentConfig(component, file.fileName);
+      await refreshFiles();
+      await refreshProduction();
+      if (file.fileName === activeFileName) {
+        // Server reverts active to default; reload default aliases into the store.
+        const defaultCfg = await loadComponentConfig(component, 'default');
+        loadComponentActive(component, 'default', defaultCfg.aliases, defaultCfg.config, defaultCfg.schemaVersion ?? 0);
+        activeFileName = 'default';
+        currentDisplayName = 'Default';
+      }
+    } catch {
+      // intentional: see comment above
+    }
+  }
+
+  async function handleUpdateProduction() {
+    // If the editor has unsaved edits, persist them first so production adopts
+    // the actual current state — not a stale snapshot. The `default` file is
+    // 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') {
+      saveAsDialog = true;
+      return;
+    }
+    const wasDirty = compDirty;
+    const adoptingName = currentDisplayName;
+    productionUpdateStatus = 'updating';
+    try {
+      if (wasDirty) {
+        await persist(activeFileName, currentDisplayName);
+        await refreshFiles();
+      }
+      await setComponentProductionFile(component, activeFileName);
+      await refreshProduction();
+      adoptFeedback = wasDirty
+        ? `Saved "${adoptingName}" and adopted`
+        : `Adopted "${adoptingName}"`;
+      flashProductionStatus('done');
+    } catch {
+      adoptFeedback = '';
+      flashProductionStatus('error');
+    }
+  }
+
+  async function handleReset() {
+    if (!resetVariables) return;
+    try {
+      const cfg = await loadComponentConfig(component, activeFileName);
+      loadComponentActive(component, activeFileName, cfg.aliases, cfg.config, cfg.schemaVersion ?? 0);
+    } catch {
+      // intentional: dev-server unavailable — leave state untouched
+    }
+  }
+</script>
+
+<header class="cfm-bar">
+  <div class="cfm-title-row">
+    {#if title}
+      <h2 class="cfm-title">{title}</h2>
+    {/if}
+    {#if sourceFile && projectRoot}
+      <a
+        class="source-link"
+        href="vscode://file/{projectRoot}/{sourceFile}"
+        title="Open {sourceFile} in VS Code"
+      >
+        <i class="fas fa-code"></i>
+        <span>Source</span>
+      </a>
+    {/if}
+  </div>
+
+  <div class="cfm-rows" class:in-sync={isApplied} class:promotable={compDirty || (!!productionInfo && productionInfo.fileName !== activeFileName)}>
+    <div class="cfm-row cfm-row-editor" class:dirty={compDirty} class:applied={isApplied}>
+      <span class="cfm-rail" aria-hidden="true"></span>
+      <div class="cfm-row-head">
+        <span class="cfm-row-label">Editor</span>
+        <span class="cfm-row-status" class:dirty={compDirty} class:applied={isApplied}>
+          <i class="cfm-status-dot" aria-hidden="true"></i>
+          <span>{compDirty ? 'unsaved' : isApplied ? 'live' : 'saved'}</span>
+        </span>
+      </div>
+      <span
+        class="cfm-pill"
+        class:dirty={compDirty}
+        class:applied={isApplied}
+        title={compDirty
+          ? 'Unsaved changes'
+          : isApplied
+            ? 'Active config is applied to production'
+            : ''}
+      >
+        <span class="cfm-pill-name">{currentDisplayName}</span>
+      </span>
+      <div class="cfm-actions">
+        <ComponentFileMenu
+          {component}
+          {files}
+          {activeFileName}
+          on:save={handleSave}
+          on:saveAs={openSaveAs}
+          on:openLoad={refreshFiles}
+          on:load={handleLoad}
+          on:delete={handleDelete}
+        />
+        {#if resetVariables}
+          <button
+            class="cfm-btn reset-btn"
+            on:click={handleReset}
+            disabled={!resetDirty}
+            title="Revert unsaved changes to {currentDisplayName}"
+          >
+            <i class="fas fa-rotate-left"></i>
+            <span>Reset</span>
+          </button>
+        {/if}
+      </div>
+    </div>
+
+    <div class="cfm-promote" aria-hidden="true">
+      <i class="fas fa-arrow-down cfm-promote-icon"></i>
+    </div>
+
+    <div class="cfm-row cfm-row-production" class:applied={isApplied}>
+      <span class="cfm-rail" aria-hidden="true"></span>
+      <div class="cfm-row-head">
+        <span class="cfm-row-label">Prod</span>
+        <span class="cfm-row-status applied">
+          <i class="cfm-status-dot" aria-hidden="true"></i>
+          <span>live</span>
+        </span>
+      </div>
+      <span class="cfm-pill production">
+        <span class="cfm-pill-name">{productionInfo?.name ?? '—'}</span>
+      </span>
+      <div class="cfm-actions">
+        <button
+          class="cfm-btn primary apply-btn"
+          class:saving={productionUpdateStatus === 'updating'}
+          class:saved={productionUpdateStatus === 'done'}
+          class:error={productionUpdateStatus === 'error'}
+          on:click={handleUpdateProduction}
+          disabled={productionUpdateStatus === 'updating' || !productionInfo || (productionInfo.fileName === activeFileName && !compDirty)}
+          title={!productionInfo
+            ? ''
+            : productionInfo.fileName === activeFileName && !compDirty
+              ? 'Already in sync with editor'
+              : compDirty && activeFileName === 'default'
+                ? 'Save edits as a new file, then adopt'
+                : compDirty
+                  ? `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>
+        {#if adoptFeedback}
+          <span class="cfm-feedback" aria-live="polite">{adoptFeedback}</span>
+        {/if}
+      </div>
+    </div>
+  </div>
+</header>
+
+<SaveAsDialog
+  bind:show={saveAsDialog}
+  {currentDisplayName}
+  {files}
+  on:save={confirmSaveAs}
+/>
+
+<style>
+  .cfm-bar {
+    --cfm-applied: #5aa85e;
+    --cfm-rail-neutral: var(--ui-border-default);
+    --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: baseline;
+    gap: var(--ui-space-12);
+    flex-wrap: wrap;
+  }
+
+  .cfm-title {
+    margin: 0;
+    min-width: 0;
+    font-size: var(--ui-font-size-3xl);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-primary);
+    letter-spacing: -0.015em;
+    line-height: 1.1;
+  }
+
+  .source-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-4);
+    padding: var(--ui-space-2) var(--ui-space-6);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-secondary);
+    text-decoration: none;
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--ui-radius-sm);
+    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);
+  }
+
+  .cfm-row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    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-radius: var(--ui-radius-md);
+  }
+
+  .cfm-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(--cfm-rail-neutral);
+    transition: background var(--ui-transition-base);
+  }
+
+  .cfm-row-editor.dirty .cfm-rail { background: var(--cfm-rail-dirty); }
+  .cfm-row-editor.applied .cfm-rail { background: var(--cfm-rail-applied); }
+  .cfm-row-production.applied .cfm-rail { background: var(--cfm-rail-applied); }
+
+  /* row head — label stacked over a small status sub-label so the
+     filename pill in each row starts at the same x and width */
+  .cfm-row-head {
+    flex-shrink: 0;
+    width: 4.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-2);
+  }
+
+  .cfm-row-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;
+  }
+
+  .cfm-row-status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-4);
+    font-size: 0.75rem;
+    letter-spacing: 0.02em;
+    color: var(--ui-text-muted);
+    line-height: 1;
+  }
+
+  .cfm-status-dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0.7;
+    flex-shrink: 0;
+  }
+
+  .cfm-row-status.dirty {
+    color: var(--ui-highlight);
+  }
+  .cfm-row-status.dirty .cfm-status-dot {
+    opacity: 1;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-highlight) 22%, transparent);
+    animation: cfm-pulse 1.6s ease-in-out infinite;
+  }
+
+  .cfm-row-status.applied {
+    color: var(--cfm-applied);
+  }
+  .cfm-row-status.applied .cfm-status-dot {
+    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 */
+  .cfm-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    flex-wrap: wrap;
+  }
+
+  .cfm-feedback {
+    font-size: var(--ui-font-size-xs);
+    color: var(--cfm-applied);
+    white-space: nowrap;
+    animation: cfm-feedback-in 180ms ease;
+  }
+
+  @keyframes cfm-feedback-in {
+    from { opacity: 0; transform: translateX(-2px); }
+    to   { opacity: 1; transform: translateX(0); }
+  }
+
+  /* promote connector between rows */
+  .cfm-promote {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    /* aligns under the pill column: row left-padding + head width + row gap */
+    padding-left: calc(var(--ui-space-16) + 4.5rem + var(--ui-space-10));
+    height: 0.25rem;
+    color: var(--ui-text-tertiary);
+    font-size: 0.7rem;
+    opacity: 0;
+    transform: translateY(-2px);
+    transition: opacity var(--ui-transition-base), transform var(--ui-transition-base), color var(--ui-transition-base);
+    pointer-events: none;
+  }
+
+  .cfm-rows.promotable .cfm-promote {
+    opacity: 0.85;
+    transform: translateY(0);
+    color: var(--ui-highlight);
+  }
+
+  .cfm-rows.in-sync .cfm-promote {
+    opacity: 0;
+  }
+
+  .cfm-promote-icon {
+    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); }
+  }
+
+  /* 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>