@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/{showcase/TokenFileManager.svelte → ui/ThemeFileManager.svelte}

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { createEventDispatcher, onMount } from 'svelte';
-  import type { TokenFileMeta } from '../lib/tokenTypes';
-  import { listTokenFiles, deleteTokenFile, setActiveFile, sanitizeFileName, getProductionInfo, setProductionFile } from '../lib/tokenService';
-  import type { ProductionInfo } from '../lib/tokenService';
-  import { activeFileName, editorConfigs, configsLoadedFromFile } from '../lib/editorConfigStore';
-  import BackupBrowser from './BackupBrowser.svelte';
-  import EditorDialog from './EditorDialog.svelte';
+  import type { ThemeMeta } from '../lib/themeTypes';
+  import { listThemes, deleteTheme, setActiveFile, sanitizeFileName, getProductionInfo, setProductionFile } from '../lib/themeService';
+  import type { ProductionInfo } from '../lib/themeService';
+  import { activeFileName } from '../lib/editorConfigStore';
+  import { dirty } from '../lib/editorStore';
+  import UIDialog from './UIDialog.svelte';
 
   const dispatch = createEventDispatcher<{
     save: { fileName: string; displayName: string };
@@ -14,28 +14,20 @@
 
   export let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = 'idle';
 
-  let files: TokenFileMeta[] = [];
+  let files: ThemeMeta[] = [];
   let showFileList = false;
   let saveAsEditing = false;
   let saveAsName = '';
   let saveAsInput: HTMLInputElement;
   let currentDisplayName = 'Default';
-  let showBackups = false;
 
   // --- Production state ---
   let productionInfo: ProductionInfo | null = null;
   let productionUpdateStatus: 'idle' | 'updating' | 'done' | 'error' = 'idle';
 
-  // --- Dirty state tracking ---
-  let savedConfigHash = '';
-  let initialized = false;
-
-  $: configHash = JSON.stringify($editorConfigs);
-  $: unsaved = initialized && configHash !== savedConfigHash;
-
   async function refreshFiles() {
     try {
-      files = await listTokenFiles();
+      files = await listThemes();
       const active = files.find(f => f.isActive);
       if (active) {
         $activeFileName = active.fileName;
@@ -70,16 +62,10 @@
   onMount(async () => {
     await refreshFiles();
     await refreshProduction();
-    // Delay snapshot until editors have initialized
-    setTimeout(() => {
-      savedConfigHash = JSON.stringify($editorConfigs);
-      initialized = true;
-    }, 500);
   });
 
   function handleSave() {
     dispatch('save', { fileName: $activeFileName, displayName: currentDisplayName });
-    setTimeout(() => { savedConfigHash = JSON.stringify($editorConfigs); }, 300);
   }
 
   function handleSaveIncrement() {
@@ -100,10 +86,7 @@
     dispatch('save', { fileName, displayName });
     $activeFileName = fileName;
     currentDisplayName = displayName;
-    setTimeout(() => {
-      refreshFiles();
-      savedConfigHash = JSON.stringify($editorConfigs);
-    }, 500);
+    setTimeout(() => refreshFiles(), 500);
   }
 
   function openSaveAs() {
@@ -126,10 +109,7 @@
     dispatch('save', { fileName, displayName });
     $activeFileName = fileName;
     currentDisplayName = displayName;
-    setTimeout(() => {
-      refreshFiles();
-      savedConfigHash = JSON.stringify($editorConfigs);
-    }, 500);
+    setTimeout(() => refreshFiles(), 500);
   }
 
   function cancelSaveAs() {
@@ -137,22 +117,19 @@
     saveAsName = '';
   }
 
-  async function handleLoad(file: TokenFileMeta) {
+  async function handleLoad(file: ThemeMeta) {
     showFileList = false;
     await setActiveFile(file.fileName);
     $activeFileName = file.fileName;
     currentDisplayName = file.name;
     dispatch('load', { fileName: file.fileName });
-    // Snapshot after load completes
-    setTimeout(() => {
-      savedConfigHash = JSON.stringify($editorConfigs);
-    }, 500);
+    // editorStore.loadFromFile clears history and resets dirty — no snapshot needed here.
   }
 
-  async function handleDelete(file: TokenFileMeta) {
+  async function handleDelete(file: ThemeMeta) {
     if (file.fileName === 'default') return;
     try {
-      await deleteTokenFile(file.fileName);
+      await deleteTheme(file.fileName);
       await refreshFiles();
       // If we deleted the active file, it reverts to default on the server
       if (file.fileName === $activeFileName) {
@@ -176,9 +153,46 @@
     if (showFileList) refreshFiles();
   }
 
+  const dateFormatter = new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+
+  function formatUpdatedAt(iso: string): string {
+    if (!iso) return '';
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return '';
+    return dateFormatter.format(d);
+  }
+
+  type SortKey = 'name' | 'updatedAt';
+  let sortKey: SortKey = 'updatedAt';
+  let sortDir: 'asc' | 'desc' = 'desc';
+
+  function toggleSort(key: SortKey) {
+    if (sortKey === key) {
+      sortDir = sortDir === 'asc' ? 'desc' : 'asc';
+    } else {
+      sortKey = key;
+      // Default: names asc, dates desc (most-recent first)
+      sortDir = key === 'name' ? 'asc' : 'desc';
+    }
+  }
+
+  $: sortedFiles = [...files].sort((a, b) => {
+    let cmp = 0;
+    if (sortKey === 'name') {
+      cmp = a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
+    } else {
+      cmp = (a.updatedAt || '').localeCompare(b.updatedAt || '');
+    }
+    return sortDir === 'asc' ? cmp : -cmp;
+  });
 </script>
 
-<div class="token-file-manager">
+<div class="theme-file-manager">
   <div class="active-file">
     <span class="active-label">Theme</span>
     <span class="active-name">{currentDisplayName}</span>
@@ -193,8 +207,8 @@
         class:saved={saveStatus === 'saved'}
         class:error={saveStatus === 'error'}
         on:click={handleSave}
-        disabled={saveStatus === 'saving' || !$configsLoadedFromFile}
-        title={$configsLoadedFromFile ? "Save to current file" : "Load a token file first"}
+        disabled={saveStatus === 'saving'}
+        title="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>
@@ -204,7 +218,7 @@
       <button
         class="tfm-btn increment-btn"
         on:click={handleSaveIncrement}
-        disabled={saveStatus === 'saving' || !$configsLoadedFromFile}
+        disabled={saveStatus === 'saving'}
         title="Save as incremented copy"
       >
         <i class="fas fa-plus"></i>
@@ -245,26 +259,18 @@
       class="tfm-btn"
       class:active={showFileList}
       on:click={toggleFileList}
-      title="Load a token file"
+      title="Load a theme"
     >
       <i class="fas fa-folder-open"></i>
       <span>Load</span>
     </button>
 
-    <button
-      class="tfm-btn history-btn"
-      on:click={() => showBackups = true}
-      title="View backup history and restore"
-    >
-      <i class="fas fa-history"></i>
-      <span>History</span>
-    </button>
 
   </div>
 
   <div class="status-labels">
-    <span class="status-label" class:dirty={unsaved} class:clean={!unsaved}>
-      {unsaved ? 'Unsaved changes' : 'Saved'}
+    <span class="status-label" class:dirty={$dirty} class:clean={!$dirty}>
+      {$dirty ? 'Unsaved changes' : 'Saved'}
     </span>
   </div>
 
@@ -282,12 +288,12 @@
       class:done={productionUpdateStatus === 'done'}
       class:error={productionUpdateStatus === 'error'}
       on:click={handleUpdateProduction}
-      disabled={productionUpdateStatus === 'updating' || !$configsLoadedFromFile || (productionInfo?.fileName === $activeFileName)}
+      disabled={productionUpdateStatus === 'updating' || (productionInfo?.fileName === $activeFileName)}
       title={productionInfo?.fileName === $activeFileName ? 'Already in production' : `Set "${currentDisplayName}" as production`}
     >
-      <i class="fas" class:fa-sync-alt={productionUpdateStatus === 'idle'} class:fa-spinner={productionUpdateStatus === 'updating'} class:fa-check={productionUpdateStatus === 'done'} class:fa-times={productionUpdateStatus === 'error'}></i>
+      <i class="fas" class:fa-upload={productionUpdateStatus === 'idle'} class:fa-spinner={productionUpdateStatus === 'updating'} class:fa-check={productionUpdateStatus === 'done'} class:fa-times={productionUpdateStatus === 'error'}></i>
       <span>
-        {#if productionUpdateStatus === 'idle'}Sync Theme{:else if productionUpdateStatus === 'updating'}Syncing{:else if productionUpdateStatus === 'done'}Synced{:else}Error{/if}
+        {#if productionUpdateStatus === 'idle'}Apply Theme{:else if productionUpdateStatus === 'updating'}Applying{:else if productionUpdateStatus === 'done'}Applied{:else}Error{/if}
       </span>
     </button>
 
@@ -300,18 +306,42 @@
 
 </div>
 
-<EditorDialog
+<UIDialog
   bind:show={showFileList}
   title="Load Theme"
   cancelLabel="Close"
   width="420px"
 >
   <div class="load-list">
-    {#each files as file}
+    <div class="load-header">
+      <button
+        class="sort-btn name-col"
+        class:active-sort={sortKey === 'name'}
+        on:click={() => toggleSort('name')}
+      >
+        <span>Name</span>
+        {#if sortKey === 'name'}
+          <i class="fas {sortDir === 'asc' ? 'fa-caret-up' : 'fa-caret-down'}"></i>
+        {/if}
+      </button>
+      <button
+        class="sort-btn date-col"
+        class:active-sort={sortKey === 'updatedAt'}
+        on:click={() => toggleSort('updatedAt')}
+      >
+        <span>Date</span>
+        {#if sortKey === 'updatedAt'}
+          <i class="fas {sortDir === 'asc' ? 'fa-caret-up' : 'fa-caret-down'}"></i>
+        {/if}
+      </button>
+      <span class="header-spacer"></span>
+    </div>
+    {#each sortedFiles as file}
       <div class="load-item" class:active={file.fileName === $activeFileName}>
         <button class="load-name-btn" on:click={() => handleLoad(file)}>
           {file.name}
         </button>
+        <span class="updated-at" title={file.updatedAt}>{formatUpdatedAt(file.updatedAt)}</span>
         {#if file.fileName === $activeFileName}
           <span class="active-badge">active</span>
         {/if}
@@ -330,65 +360,55 @@
       <div class="load-item empty">No saved files</div>
     {/if}
   </div>
-</EditorDialog>
-
-<BackupBrowser
-  bind:open={showBackups}
-  on:restored={(e) => {
-    if (e.detail.type === 'tokens') {
-      dispatch('load', { fileName: $activeFileName });
-    }
-    refreshFiles();
-  }}
-/>
+</UIDialog>
 
 
 <style>
-  .token-file-manager {
+  .theme-file-manager {
     display: flex;
     flex-direction: column;
-    gap: var(--space-8);
+    gap: var(--ui-space-8);
   }
 
   .active-file {
     display: flex;
     flex-direction: column;
-    gap: var(--space-2);
-    padding: 0 var(--space-4);
+    gap: var(--ui-space-2);
+    padding: 0 var(--ui-space-4);
   }
 
   .active-label {
-    font-size: var(--font-xs);
-    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
 
   .active-name {
-    font-size: var(--font-md);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
   }
 
   .button-grid {
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
+    gap: var(--ui-space-4);
   }
 
   .tfm-btn {
     display: flex;
     align-items: center;
-    gap: var(--space-4);
+    gap: var(--ui-space-4);
     width: 100%;
-    padding: var(--space-6) var(--space-8);
+    padding: var(--ui-space-6) var(--ui-space-8);
     background: var(--ui-surface-low);
     border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-md);
+    border-radius: var(--ui-radius-md);
     color: var(--ui-text-secondary);
-    font-size: var(--font-md);
+    font-size: var(--ui-font-size-md);
     cursor: pointer;
-    transition: all var(--transition-fast);
+    transition: all var(--ui-transition-fast);
     white-space: nowrap;
   }
 
@@ -400,7 +420,7 @@
   .tfm-btn:hover:not(:disabled) {
     background: var(--ui-surface);
     color: var(--ui-text-primary);
-    border-color: var(--border);
+    border-color: var(--ui-border-default);
   }
 
   .tfm-btn:disabled {
@@ -416,7 +436,7 @@
 
   .save-row {
     display: flex;
-    gap: var(--space-4);
+    gap: var(--ui-space-4);
   }
 
   .save-row .save-btn {
@@ -451,24 +471,24 @@
   .save-as-inline {
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
+    gap: var(--ui-space-4);
   }
 
   .save-as-actions {
     display: flex;
-    gap: var(--space-4);
+    gap: var(--ui-space-4);
     justify-content: flex-end;
   }
 
   .save-as-input {
     flex: 1;
     min-width: 0;
-    padding: var(--space-6) var(--space-8);
+    padding: var(--ui-space-6) var(--ui-space-8);
     background: var(--ui-surface-lowest);
     border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-md);
+    border-radius: var(--ui-radius-md);
     color: var(--ui-text-primary);
-    font-size: var(--font-md);
+    font-size: var(--ui-font-size-md);
     outline: none;
   }
 
@@ -490,17 +510,17 @@
     padding: 0;
     background: var(--ui-surface-low);
     border: 1px solid var(--ui-border-subtle);
-    border-radius: var(--radius-md);
+    border-radius: var(--ui-radius-md);
     color: var(--ui-text-secondary);
-    font-size: var(--font-sm);
+    font-size: var(--ui-font-size-sm);
     cursor: pointer;
-    transition: all var(--transition-fast);
+    transition: all var(--ui-transition-fast);
   }
 
   .inline-btn:hover:not(:disabled) {
     background: var(--ui-surface);
     color: var(--ui-text-primary);
-    border-color: var(--border);
+    border-color: var(--ui-border-default);
   }
 
   .inline-btn:disabled {
@@ -521,6 +541,62 @@
     overflow-y: auto;
   }
 
+  .load-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 6px;
+    border-bottom: 1px solid #3a3a3a;
+    position: sticky;
+    top: 0;
+    background: var(--ui-surface, #1a1a1a);
+    z-index: 1;
+  }
+
+  .sort-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 0;
+    background: none;
+    border: none;
+    color: #888;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .sort-btn:hover {
+    color: #ccc;
+  }
+
+  .sort-btn.active-sort {
+    color: #e0e0e0;
+  }
+
+  .sort-btn i {
+    font-size: 10px;
+    opacity: 0.85;
+  }
+
+  .sort-btn.name-col {
+    flex: 1;
+    min-width: 0;
+    padding-left: 4px;
+  }
+
+  .sort-btn.date-col {
+    flex-shrink: 0;
+  }
+
+  .header-spacer {
+    flex-shrink: 0;
+    width: 24px; /* reserve space matching .file-delete-btn */
+  }
+
   .load-item {
     display: flex;
     align-items: center;
@@ -565,6 +641,14 @@
     font-weight: 600;
   }
 
+  .updated-at {
+    flex-shrink: 0;
+    font-size: 12px;
+    color: #777;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
   .active-badge {
     flex-shrink: 0;
     font-size: 12px;
@@ -600,21 +684,21 @@
 
   .status-labels {
     display: flex;
-    gap: var(--space-8);
-    padding: 0 var(--space-4);
+    gap: var(--ui-space-8);
+    padding: 0 var(--ui-space-4);
   }
 
   .status-label {
-    font-size: var(--font-xs);
+    font-size: var(--ui-font-size-xs);
     letter-spacing: 0.02em;
   }
 
   .status-label.clean {
-    color: var(--ui-text-muted);
+    color: var(--ui-text-secondary);
   }
 
   .status-label.dirty {
-    color: var(--ui-text-warning, #e6a030);
+    color: var(--ui-highlight);
   }
 
   /* ── Production section ── */
@@ -622,28 +706,28 @@
   .production-section {
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
-    padding-top: var(--space-8);
+    gap: var(--ui-space-4);
+    padding-top: var(--ui-space-8);
     border-top: 1px solid var(--ui-border-subtle);
   }
 
   .production-header {
     display: flex;
     flex-direction: column;
-    gap: var(--space-2);
-    padding: 0 var(--space-4);
+    gap: var(--ui-space-2);
+    padding: 0 var(--ui-space-4);
   }
 
   .production-label {
-    font-size: var(--font-xs);
-    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
 
   .production-name {
-    font-size: var(--font-md);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
   }
 
@@ -663,16 +747,16 @@
   .production-update-btn.error { color: var(--ui-text-muted); }
 
   .production-match {
-    font-size: var(--font-xs);
-    color: var(--ui-text-muted);
-    padding: 0 var(--space-4);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-text-secondary);
+    padding: 0 var(--ui-space-4);
     letter-spacing: 0.02em;
   }
 
   .production-diff {
-    font-size: var(--font-xs);
-    color: var(--ui-text-warning, #e6a030);
-    padding: 0 var(--space-4);
+    font-size: var(--ui-font-size-xs);
+    color: var(--ui-highlight);
+    padding: 0 var(--ui-space-4);
     letter-spacing: 0.02em;
   }
 

package/src/ui/Toggle.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let checked: boolean = false;
+  export let disabled: boolean = false;
+  export let label: string = '';
+
+  const dispatch = createEventDispatcher<{ change: boolean }>();
+
+  function toggle() {
+    if (disabled) return;
+    checked = !checked;
+    dispatch('change', checked);
+  }
+</script>
+
+<label class="toggle" class:disabled>
+  <button
+    type="button"
+    role="switch"
+    aria-checked={checked}
+    {disabled}
+    class="toggle-track"
+    class:on={checked}
+    on:click={toggle}
+  >
+    <span class="toggle-thumb" />
+  </button>
+  {#if label}
+    <span class="toggle-label">{label}</span>
+  {/if}
+</label>
+
+<style lang="scss">
+  .toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-8);
+    cursor: pointer;
+    user-select: none;
+
+    &.disabled {
+      cursor: not-allowed;
+
+      .toggle-track {
+        background: var(--surface-neutral-lower);
+        border-color: var(--border-neutral-faint);
+      }
+
+      .toggle-thumb {
+        background: var(--text-disabled);
+      }
+
+      .toggle-label {
+        color: var(--text-disabled);
+      }
+    }
+  }
+
+  .toggle-track {
+    position: relative;
+    width: 2.25rem;
+    height: var(--space-20);
+    border-radius: var(--radius-2xl);
+    border: var(--border-width-1) solid var(--border-neutral);
+    background: var(--surface-neutral-low);
+    padding: 0;
+    cursor: inherit;
+    transition: background var(--duration-150), border-color var(--duration-150);
+    flex-shrink: 0;
+
+    &.on {
+      background: var(--ui-toggle);
+      border-color: var(--ui-toggle);
+    }
+
+    &:hover:not(:disabled) {
+      border-color: var(--border-neutral-medium);
+    }
+
+    &:focus-visible {
+      outline: var(--border-width-2) solid var(--border-brand);
+      outline-offset: var(--space-2);
+    }
+  }
+
+  .toggle-thumb {
+    position: absolute;
+    top: var(--space-2);
+    left: var(--space-2);
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: var(--radius-full);
+    background: var(--text-secondary);
+    transition: transform var(--duration-150), background var(--duration-150);
+
+    .on & {
+      transform: translateX(var(--space-16));
+      background: var(--text-primary);
+    }
+  }
+
+  .toggle-label {
+    font-size: var(--font-size-md);
+    color: var(--text-secondary);
+    line-height: 1;
+  }
+</style>