@motion-proto/live-tokens 0.47.1 → 0.48.0

package/src/editor/core/manifests/manifestService.ts

@@ -1,172 +0,0 @@
-import type { Manifest, ManifestMeta, ManifestBundle, Theme, ComponentConfig } from '../themes/themeTypes';
-import { versionedFileResource } from '../storage/files/versionedFileResourceClient';
-import { API_BASE } from '../storage/apiBase';
-import { listComponents } from '../components/componentConfigService';
-import { getActiveTheme } from '../themes/themeService';
-
-/**
- * REST client for manifest files. A manifest references one theme file +
- * one config file per component (by basename). The active manifest is the
- * single live snapshot: theme and component Adopts patch its refs server-side.
- *
- * `default` is the protected baseline — cannot be overwritten or deleted, and
- * Adopts return 409 ACTIVE_IS_PROTECTED while it is active.
- */
-
-const manifestsResource = versionedFileResource<Manifest, ManifestMeta, never>({
-  baseUrl: `${API_BASE}/manifests`,
-});
-
-export const listManifests = async (): Promise<ManifestMeta[]> => {
-  const data = await manifestsResource.list();
-  return data.files;
-};
-
-export const loadManifest = (fileName: string): Promise<Manifest> =>
-  manifestsResource.load(fileName);
-export const saveManifest = (fileName: string, data: Manifest): Promise<void> =>
-  manifestsResource.save(fileName, data);
-export const deleteManifest = (fileName: string): Promise<void> =>
-  manifestsResource.remove(fileName);
-export const getActiveManifest = (): Promise<Manifest | null> => manifestsResource.getActive();
-export const setActiveManifest = (fileName: string): Promise<void> =>
-  manifestsResource.setActive(fileName);
-
-export interface ApplyManifestResult {
-  ok: boolean;
-  manifest: Manifest;
-  theme: Theme;
-  componentConfigs: Record<string, ComponentConfig>;
-}
-
-/**
- * Server-side atomic apply: validate every referenced file exists, flip the
- * theme + each component's `_active.json` and `_production.json` pointers,
- * sync tokens.css/fonts.css from the new theme, mark the manifest active, and
- * return the resolved theme + component configs in one payload. Clients
- * usually follow with a full page reload — manifest load is a "blow up the
- * world" action.
- */
-export async function applyManifest(fileName: string): Promise<ApplyManifestResult> {
-  const res = await fetch(`${API_BASE}/manifests/${encodeURIComponent(fileName)}/apply`, {
-    method: 'PUT',
-  });
-  if (!res.ok) {
-    const err = await res.json().catch(() => ({ error: 'Apply failed' }));
-    throw new Error(err.error || 'Apply failed');
-  }
-  return res.json();
-}
-
-/**
- * Snapshot the currently-active theme + component-config file pointers into
- * a new manifest file and set it active. Used by the manifest panel's Save As
- * action and by the SaveAs-then-Adopt recovery flow when active is `default`.
- */
-export async function saveAsManifest(
-  fileName: string,
-  displayName: string,
-): Promise<void> {
-  const activeTheme = await getActiveTheme();
-  if (!activeTheme || !activeTheme._fileName) {
-    throw new Error('No active theme on disk to capture');
-  }
-  const components = await listComponents();
-  const componentConfigs: Record<string, string> = {};
-  for (const c of components) {
-    componentConfigs[c.name] = c.activeFile || 'default';
-  }
-  const now = new Date().toISOString();
-  const manifest: Manifest = {
-    name: displayName,
-    createdAt: now,
-    updatedAt: now,
-    theme: activeTheme._fileName,
-    componentConfigs,
-  };
-  await saveManifest(fileName, manifest);
-  await setActiveManifest(fileName);
-}
-
-/**
- * Re-snapshot the editor's current active pointers into the *currently active*
- * manifest file. Used by the manifest panel's Save action. Server rejects with
- * 403 if active is `default` (protected).
- */
-export async function saveActiveManifest(displayName?: string): Promise<void> {
-  const active = await getActiveManifest();
-  if (!active || !active._fileName) {
-    throw new Error('No active manifest');
-  }
-  const activeTheme = await getActiveTheme();
-  if (!activeTheme || !activeTheme._fileName) {
-    throw new Error('No active theme on disk');
-  }
-  const components = await listComponents();
-  const componentConfigs: Record<string, string> = {};
-  for (const c of components) {
-    componentConfigs[c.name] = c.activeFile || 'default';
-  }
-  const manifest: Manifest = {
-    name: displayName ?? active.name,
-    createdAt: active.createdAt,
-    updatedAt: new Date().toISOString(),
-    theme: activeTheme._fileName,
-    componentConfigs,
-  };
-  await saveManifest(active._fileName, manifest);
-}
-
-export interface ImportManifestResult {
-  ok: boolean;
-  /** Final manifest filename (may be renamed if it collided with an existing one). */
-  manifest: string;
-  /** Keyed `theme:<orig>` / `componentConfig:<comp>/<orig>` / `manifest:<orig>` → final name. */
-  renames: Record<string, string>;
-}
-
-/**
- * Fetch the manifest as a self-contained `ManifestBundle` and trigger a
- * browser download. Hidden-anchor trick — no infrastructure beyond the
- * existing GET `/api/manifests/:name/export` endpoint.
- *
- * See temp/manifest-robustness-plan.md §11.
- */
-export async function exportManifest(fileName: string): Promise<void> {
-  const res = await fetch(`${API_BASE}/manifests/${encodeURIComponent(fileName)}/export`);
-  if (!res.ok) {
-    const err = await res.json().catch(() => ({ error: 'Export failed' }));
-    throw new Error(err.error || 'Export failed');
-  }
-  const blob = await res.blob();
-  const url = URL.createObjectURL(blob);
-  try {
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${fileName}.bundle.json`;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-  } finally {
-    URL.revokeObjectURL(url);
-  }
-}
-
-/**
- * POST a `ManifestBundle` to the import endpoint. Server materialises the
- * inlined theme + component configs as fresh files (renaming on collision),
- * rewrites the manifest's pointers, and returns the final manifest name plus
- * the rename map so the UI can surface what got renamed.
- */
-export async function importManifest(bundle: ManifestBundle): Promise<ImportManifestResult> {
-  const res = await fetch(`${API_BASE}/manifests/import`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(bundle),
-  });
-  if (!res.ok) {
-    const err = await res.json().catch(() => ({ error: 'Import failed' }));
-    throw new Error(err.error || 'Import failed');
-  }
-  return res.json();
-}

package/src/editor/ui/ManifestFileManager.svelte

@@ -1,446 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import type { ManifestMeta } from '../core/themes/themeTypes';
-  import {
-    listManifests,
-    deleteManifest,
-    getActiveManifest,
-    applyManifest,
-    saveAsManifest,
-    saveActiveManifest,
-    exportManifest,
-    importManifest,
-  } from '../core/manifests/manifestService';
-  import { dirty, componentDirty } from '../core/store/editorStore';
-  import { productionRevision, activeManifest } 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';
-
-  let files: ManifestMeta[] = $state([]);
-  let showFileList = $state(false);
-  let saveAsDialog = $state(false);
-  let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = $state('idle');
-
-  let activeFileName = $state('default');
-  let currentDisplayName = $state('Default');
-  let activeIsProtected = $derived(activeFileName === 'default');
-
-  type SaveState = 'idle' | 'saving' | 'saved' | 'error';
-  const setSaveStatus = (s: SaveState) => (saveStatus = s);
-
-  let dirtyComponentCount = $derived(
-    Object.values($componentDirty).filter(Boolean).length,
-  );
-  let editorDirty = $derived($dirty || dirtyComponentCount > 0);
-
-  async function refreshFiles() {
-    try {
-      files = await listManifests();
-    } catch {
-      // silent — empty list
-    }
-  }
-
-  async function refreshActive() {
-    try {
-      const active = await getActiveManifest();
-      if (active) {
-        activeFileName = active._fileName ?? 'default';
-        currentDisplayName = active.name ?? activeFileName;
-        const meta = (await listManifests()).find((f) => f.fileName === activeFileName) ?? null;
-        activeManifest.set(meta);
-      }
-    } catch {
-      // silent
-    }
-  }
-
-  onMount(async () => {
-    await refreshFiles();
-    await refreshActive();
-  });
-
-  // Re-read active manifest whenever a sibling Adopt fires — the server
-  // patches our active file in those moments, so the timestamp + refs
-  // displayed here need to track. Skip the first tick (refreshActive ran
-  // already on mount).
-  let pulseInitialised = false;
-  $effect(() => {
-    void $productionRevision;
-    if (!pulseInitialised) {
-      pulseInitialised = true;
-      return;
-    }
-    refreshActive();
-  });
-
-  // A manifest snapshots saved file pointers, not the editor's live state. Warn
-  // before capturing if there are unsaved theme/component edits, since those
-  // won't make it into the manifest until they're saved (and adopted).
-  function confirmUnsavedExclusion(): boolean {
-    if (!editorDirty) return true;
-    return window.confirm(
-      'You have unsaved theme or component changes. A manifest captures only saved, ' +
-        'adopted files, so these edits will not be included. Save and adopt them first ' +
-        'to capture them. Save the manifest anyway?',
-    );
-  }
-
-  async function handleSave() {
-    if (activeIsProtected) return;
-    if (!confirmUnsavedExclusion()) return;
-    saveStatus = 'saving';
-    try {
-      await saveActiveManifest(currentDisplayName);
-      await refreshActive();
-      flashStatus(setSaveStatus, 'saved');
-    } catch {
-      flashStatus(setSaveStatus, 'error');
-    }
-  }
-
-  function openSaveAs() {
-    if (!confirmUnsavedExclusion()) return;
-    showFileList = false;
-    saveAsDialog = true;
-  }
-
-  async function confirmSaveAs(detail: { displayName: string; fileName: string }) {
-    saveStatus = 'saving';
-    try {
-      await saveAsManifest(detail.fileName, detail.displayName);
-      await refreshFiles();
-      await refreshActive();
-      flashStatus(setSaveStatus, 'saved');
-    } catch {
-      flashStatus(setSaveStatus, 'error');
-    }
-  }
-
-  async function handleApply(file: ManifestMeta) {
-    if (editorDirty) {
-      const ok = window.confirm(
-        'Loading a manifest will reload the editor and discard unsaved changes. Continue?',
-      );
-      if (!ok) return;
-    }
-    showFileList = false;
-    try {
-      await applyManifest(file.fileName);
-      // applyManifest atomically flips active + production pointers and
-      // syncs tokens.css; reload to rehydrate the editor from the
-      // now-active theme + component configs.
-      window.location.reload();
-    } catch (err) {
-      window.alert(`Failed to apply manifest: ${(err as Error).message}`);
-    }
-  }
-
-  async function handleExport(file: ManifestMeta) {
-    try {
-      await exportManifest(file.fileName);
-    } catch (err) {
-      window.alert(`Failed to export: ${(err as Error).message}`);
-    }
-  }
-
-  let importInput: HTMLInputElement | null = $state(null);
-
-  function openImport() {
-    importInput?.click();
-  }
-
-  async function handleImportFile(event: Event) {
-    const input = event.target as HTMLInputElement;
-    const file = input.files?.[0];
-    input.value = ''; // allow re-picking the same file later
-    if (!file) return;
-    let bundle: any;
-    try {
-      bundle = JSON.parse(await file.text());
-    } catch {
-      window.alert('Selected file is not valid JSON.');
-      return;
-    }
-    if (bundle?.kind !== 'manifest-bundle') {
-      window.alert('Not a manifest bundle (missing kind discriminator).');
-      return;
-    }
-    try {
-      const result = await importManifest(bundle);
-      await refreshFiles();
-      const renameCount = Object.keys(result.renames).length;
-      if (renameCount > 0) {
-        const summary = Object.entries(result.renames)
-          .map(([k, v]) => `${k} → ${v}`)
-          .join('\n');
-        window.alert(
-          `Imported as "${result.manifest}". ${renameCount} file(s) renamed to avoid collisions:\n\n${summary}`,
-        );
-      }
-    } catch (err) {
-      window.alert(`Failed to import: ${(err as Error).message}`);
-    }
-  }
-
-  async function handleDelete(file: ManifestMeta) {
-    if (file.isProtected) return;
-    if (file.fileName === activeFileName) {
-      window.alert('Cannot delete the active manifest. Load another manifest first.');
-      return;
-    }
-    const ok = window.confirm(`Delete manifest "${file.name}"?`);
-    if (!ok) return;
-    try {
-      await deleteManifest(file.fileName);
-      await refreshFiles();
-    } catch (err) {
-      window.alert(`Failed to delete: ${(err as Error).message}`);
-    }
-  }
-
-  function toggleFileList() {
-    showFileList = !showFileList;
-    if (showFileList) refreshFiles();
-  }
-</script>
-
-<div class="manifest-file-manager">
-  <div class="mfm-header">
-    <span class="mfm-header-label">Manifest</span>
-    <UIInfoPopover title="Manifests" ariaLabel="About manifests">
-      <p>
-        A <strong>manifest</strong> pins one theme plus one config file per component.
-      </p>
-      <p>
-        The <strong>active</strong> manifest is what the editor reads and what production runs. Theme and component <strong>Adopt</strong> actions auto-update its file.
-      </p>
-      <p>
-        <strong>Default</strong> is protected. To start customizing, <strong>Save As</strong> a new manifest first.
-      </p>
-    </UIInfoPopover>
-  </div>
-
-  <div class="mfm-card" class:protected={activeIsProtected}>
-    <span class="mfm-rail" aria-hidden="true"></span>
-    <div class="mfm-card-head">
-      <span class="mfm-card-label">Active</span>
-      {#if activeIsProtected}
-        <span class="mfm-badge protected" title="The default manifest is read-only">
-          <i class="fas fa-lock" aria-hidden="true"></i>
-          <span>protected</span>
-        </span>
-      {/if}
-    </div>
-    <FilePill
-      name={currentDisplayName}
-      isProtected={activeIsProtected}
-      protectedTitle="Protected default manifest"
-      title={currentDisplayName}
-      style="display: flex;"
-    />
-    <div class="mfm-card-actions">
-      <button
-        class="mfm-btn mfm-btn-row save-btn"
-        class:saving={saveStatus === 'saving'}
-        class:saved={saveStatus === 'saved'}
-        class:error={saveStatus === 'error'}
-        onclick={handleSave}
-        disabled={activeIsProtected || saveStatus === 'saving'}
-        title={activeIsProtected
-          ? 'Default is read-only — use Save As to capture under a new name'
-          : 'Re-stamp the active manifest with the current editor state'}
-      >
-        <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="mfm-btn mfm-btn-row" onclick={openSaveAs} title="Save current state as a new manifest">
-        <i class="fas fa-copy"></i>
-        <span>Save As…</span>
-      </button>
-      <button
-        class="mfm-btn mfm-btn-row"
-        class:active={showFileList}
-        onclick={toggleFileList}
-        title="Load a manifest"
-      >
-        <i class="fas fa-folder-open"></i>
-        <span>Load…</span>
-      </button>
-      <button
-        class="mfm-btn mfm-btn-row"
-        onclick={openImport}
-        title="Import a shared manifest bundle"
-      >
-        <i class="fas fa-file-import"></i>
-        <span>Import…</span>
-      </button>
-    </div>
-  </div>
-</div>
-
-<!-- Hidden file input for Import; clicked via openImport(). -->
-<input
-  bind:this={importInput}
-  type="file"
-  accept=".json,application/json"
-  onchange={handleImportFile}
-  style="display: none;"
-/>
-
-<FileLoadList
-  bind:show={showFileList}
-  title="Load Manifest"
-  {files}
-  {activeFileName}
-  onload={handleApply}
-  ondelete={handleDelete}
-  onexport={handleExport}
-  exportTitle={(f) => `Export "${f.name}" as a shareable bundle`}
-/>
-
-<SaveAsDialog
-  bind:show={saveAsDialog}
-  {currentDisplayName}
-  {files}
-  title="Save Manifest As"
-  placeholder="Manifest name…"
-  reservedNameMessage='The name "default" is reserved for the protected baseline.'
-  branchFromDefaultName="my-manifest"
-  onsave={confirmSaveAs}
-/>
-
-<style>
-  .manifest-file-manager {
-    --mfm-active: #5aa85e;
-    --mfm-rail-neutral: var(--ui-border);
-    --mfm-rail-active: var(--mfm-active);
-
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-8);
-  }
-
-  .mfm-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--ui-space-4);
-    padding: 0 var(--ui-space-4);
-  }
-
-  .mfm-header-label {
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-secondary);
-  }
-
-  .mfm-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);
-  }
-
-  .mfm-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(--mfm-rail-active);
-    transition: background var(--ui-transition-base);
-  }
-
-  .mfm-card.protected .mfm-rail {
-    background: var(--mfm-rail-neutral);
-  }
-
-  .mfm-card-head {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: var(--ui-space-8);
-  }
-
-  .mfm-card-label {
-    font-size: var(--ui-font-size-xs);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-tertiary);
-  }
-
-  .mfm-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-4);
-    font-size: var(--ui-font-size-xs);
-    color: var(--ui-text-tertiary);
-  }
-
-  .mfm-badge.protected i {
-    font-size: 0.8em;
-  }
-
-  .mfm-card-actions {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-space-4);
-  }
-
-  .mfm-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: var(--ui-space-8);
-    padding: var(--ui-space-6) var(--ui-space-10);
-    background: var(--ui-surface-high);
-    border: 1px solid var(--ui-border-low);
-    border-radius: var(--ui-radius-sm);
-    color: var(--ui-text-primary);
-    font-family: inherit;
-    font-size: var(--ui-font-size-sm);
-    line-height: 1;
-    cursor: pointer;
-    transition: background var(--ui-transition-fast), color var(--ui-transition-fast);
-  }
-
-  .mfm-btn:hover:not(:disabled) {
-    background: var(--ui-hover);
-  }
-
-  .mfm-btn:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .mfm-btn.active {
-    background: var(--ui-active);
-  }
-
-  .mfm-btn.saved { color: var(--mfm-active); }
-  .mfm-btn.error { color: var(--ui-error, #c0392b); }
-
-  .mfm-btn .fa-spinner {
-    animation: mfm-spin 0.8s linear infinite;
-  }
-
-  @keyframes mfm-spin {
-    from { transform: rotate(0deg); }
-    to   { transform: rotate(360deg); }
-  }
-</style>