@motion-proto/live-tokens 0.7.1 → 0.9.0

package/src/editor/ui/GradientStopPicker.svelte

@@ -12,10 +12,13 @@
     stopId: string; // unique key (e.g. gradient-var + stop index)
     color: string; // token name like '--color-brand-500'
     opacity?: number; // 0–100
+    /** Forwarded to UIPaletteSelector to scope picks to a color family.
+     *  See UIPaletteSelector's `familyFilter` for accepted values. */
+    familyFilter?: string | null;
     onchange?: (payload: { color: string; opacity: number }) => void;
   }
 
-  let { stopId, color, opacity = 100, onchange }: Props = $props();
+  let { stopId, color, opacity = 100, familyFilter = null, onchange }: Props = $props();
 
   /** Scratch var the embedded picker reads/writes; isolated per stop. */
   let scratchVar = $derived(`--__grad-stop-${stopId}`);
@@ -26,10 +29,15 @@
     return `color-mix(in srgb, ${base} ${Math.round(o)}%, transparent)`;
   }
 
-  /** Parse a scratch var write back into structured stop fields. */
+  /** Parse a scratch var write back into structured stop fields. UIPaletteSelector's
+   *  "None" choice writes the literal `transparent`; we round-trip it as a stop
+   *  whose color is the keyword itself — `formatGradientStopColor` already passes
+   *  non-`--` colors through verbatim, so the gradient (or solid first-stop) ends
+   *  up painting `transparent`. */
   function parseScratch(raw: string): { color: string; opacity: number } | null {
     const trimmed = raw.trim();
     if (!trimmed) return null;
+    if (trimmed === 'transparent') return { color: 'transparent', opacity: 100 };
     const mixMatch = trimmed.match(/^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+(?:\.\d+)?)%,\s*transparent\)$/i);
     if (mixMatch) {
       return { color: mixMatch[1], opacity: parseFloat(mixMatch[2]) };
@@ -60,4 +68,4 @@
   }
 </script>
 
-<UIPaletteSelector variable={scratchVar} onchange={handleChange} />
+<UIPaletteSelector variable={scratchVar} {familyFilter} onchange={handleChange} />

package/src/editor/ui/ManifestFileManager.svelte

@@ -8,6 +8,8 @@
     applyManifest,
     saveAsManifest,
     saveActiveManifest,
+    exportManifest,
+    importManifest,
   } from '../core/manifests/manifestService';
   import { dirty, componentDirty } from '../core/store/editorStore';
   import { productionRevision, activeManifest } from '../core/productionPulse';
@@ -118,14 +120,62 @@
     showFileList = false;
     try {
       await applyManifest(file.fileName);
-      // applyManifest atomically flips active pointers; reload to rehydrate
-      // the editor from the now-active theme + component configs.
+      // 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) {
@@ -218,10 +268,27 @@
         <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"
@@ -229,6 +296,8 @@
   {activeFileName}
   onload={handleApply}
   ondelete={handleDelete}
+  onexport={handleExport}
+  exportTitle={(f) => `Export "${f.name}" as a shareable bundle`}
 />
 
 <SaveAsDialog
@@ -265,7 +334,6 @@
     font-size: var(--ui-font-size-xs);
     color: var(--ui-text-secondary);
     text-transform: uppercase;
-    letter-spacing: 0.05em;
   }
 
   .mfm-card {
@@ -304,7 +372,6 @@
   .mfm-card-label {
     font-size: 10px;
     font-weight: var(--ui-font-weight-semibold);
-    letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--ui-text-tertiary);
   }

package/src/editor/ui/PaletteEditor.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { run, stopPropagation, createBubbler } from 'svelte/legacy';
+  import { stopPropagation, createBubbler } from 'svelte/legacy';
 
   const bubble = createBubbler();
-  import { onMount, onDestroy, tick } from 'svelte';
+  import { onMount, onDestroy, tick, untrack } from 'svelte';
   import { hexToOklch } from '../core/palettes/oklch';
   import { type CurveAnchor, lightnessCurveConfig, saturationCurveConfig } from './curveEngine';
   import ColorEditPanel from './ColorEditPanel.svelte';
   import OverridesPanel from './palette/OverridesPanel.svelte';
+  import UIPillButton from './UIPillButton.svelte';
   import GradientStopEditor from './palette/GradientStopEditor.svelte';
   import ScaleCurveEditor from './palette/ScaleCurveEditor.svelte';
   import PaletteBase from './palette/PaletteBase.svelte';
@@ -79,8 +80,18 @@
     });
   }
 
-  let lockedLightnessIdx: number | null = $state(null);
-  let lockedSaturationIdx: number | null = $state(null);
+  let lockedLightnessIdx: number | null = $derived.by(() => {
+    if (!anchorToBase) return null;
+    const x500 = stepIndexToX(4);
+    const idx = lightnessCurve.findIndex(a => Math.abs(a.x - x500) < 0.5);
+    return idx >= 0 ? idx : null;
+  });
+  let lockedSaturationIdx: number | null = $derived.by(() => {
+    if (!anchorToBase) return null;
+    const x500 = stepIndexToX(4);
+    const idx = saturationCurve.findIndex(a => Math.abs(a.x - x500) < 0.5);
+    return idx >= 0 ? idx : null;
+  });
 
   // Held at component scope so inline header-swatch handlers and the function
   // handlers share one handle for commit/cancel.
@@ -95,10 +106,6 @@
     return ps ? ps.effective : '#000000';
   }
 
-  let gradientColorStops = $state('');
-  let gradientCssValue = $state('');
-  let gradientBarPreview = $state('');
-
   function onEmptyModeChange(e: Event) {
     edit('emptyMode', (e.currentTarget as HTMLInputElement).checked ? 'gradient' : 'solid');
   }
@@ -464,28 +471,21 @@
   let gray500Hex = $derived(mode === 'gray'
     ? (grayComputed.find(g => g.step.label === '500')?.hex ?? GRAY_FALLBACK)
     : baseColor);
-  run(() => {
-    if (anchorToBase) {
-      const x500 = stepIndexToX(4);
-      const lIdx = lightnessCurve.findIndex(a => Math.abs(a.x - x500) < 0.5);
-      lockedLightnessIdx = lIdx >= 0 ? lIdx : null;
-      const sIdx = saturationCurve.findIndex(a => Math.abs(a.x - x500) < 0.5);
-      lockedSaturationIdx = sIdx >= 0 ? sIdx : null;
-    } else {
-      lockedLightnessIdx = null;
-      lockedSaturationIdx = null;
-    }
-  });
   // Keep the locked lightness anchor y in sync with baseColor. Idempotent.
-  // During a baseColor drag the curve edit merges into the same history entry;
-  // on undo/redo the curve already has the correct y, so this is a no-op.
-  run(() => {
-    if (anchorToBase && lockedLightnessIdx !== null && baseColor) {
-      const targetY = hexToOklch(baseColor).l * 100;
-      if (lightnessCurve[lockedLightnessIdx] && Math.abs(lightnessCurve[lockedLightnessIdx].y - targetY) > 0.01) {
-        edit('lightnessCurve', lightnessCurve.map((a, i) => i === lockedLightnessIdx ? { ...a, y: targetY } : a));
+  // `lightnessCurve` is read via `untrack` so writing it back via `edit` does
+  // not retrigger this effect (Svelte 5 flags the read+write pattern as
+  // recursive).
+  $effect(() => {
+    if (!anchorToBase || lockedLightnessIdx === null || !baseColor) return;
+    const targetY = hexToOklch(baseColor).l * 100;
+    untrack(() => {
+      const idx = lockedLightnessIdx;
+      if (idx === null) return;
+      const curve = lightnessCurve;
+      if (curve[idx] && Math.abs(curve[idx].y - targetY) > 0.01) {
+        edit('lightnessCurve', curve.map((a, i) => i === idx ? { ...a, y: targetY } : a));
       }
-    }
+    });
   });
   let paletteComputed = $derived((() => {
     const _bc = baseColor, _lc = lightnessCurve, _sc = saturationCurve, _co = curveOffset, _ed = editingDraft, _ek = editingKey, _ov = overrides, _ab = anchorToBase;
@@ -503,21 +503,11 @@
       };
     });
   })());
-  // Gradient reactives — must follow paletteComputed
-  run(() => {
+  let gradientBarPreview = $derived.by(() => {
     const pc = paletteComputed;
     const sorted = [...gradientStops].sort((a, b) => gradientReverse ? b.position - a.position : a.position - b.position);
-    gradientColorStops = sorted.map(s => `${stopColor(s, pc)} ${s.position}%`).join(', ');
-    gradientBarPreview = `linear-gradient(to right, ${gradientColorStops})`;
-    if (emptySelector && emptyMode === 'gradient') {
-      switch (gradientStyle) {
-        case 'radial': gradientCssValue = `radial-gradient(circle, ${gradientColorStops})`; break;
-        case 'conic': gradientCssValue = `conic-gradient(from ${gradientAngle}deg, ${gradientColorStops})`; break;
-        default: gradientCssValue = `linear-gradient(${gradientAngle}deg, ${gradientColorStops})`;
-      }
-    } else {
-      gradientCssValue = '';
-    }
+    const stops = sorted.map(s => `${stopColor(s, pc)} ${s.position}%`).join(', ');
+    return `linear-gradient(to right, ${stops})`;
   });
   let grayScales = $derived(mode === 'gray' ? scales : []);
   let curveVersion = $derived(JSON.stringify(scaleCurves) + JSON.stringify(curveOffset) + gray500Hex);
@@ -606,12 +596,10 @@
             <span>Gradient</span>
           </label>
         {/if}
-        <button class="edit-toggle" type="button" onclick={clearPaletteOverrides}>Clear Overrides</button>
-        <button
-          class="edit-toggle"
-          type="button"
-          onclick={() => paletteEditorOpen = !paletteEditorOpen}
-        >{paletteEditorOpen ? 'Close' : 'Edit'}</button>
+        <UIPillButton size="compact" variant="outline" onclick={clearPaletteOverrides}>Clear Overrides</UIPillButton>
+        <UIPillButton size="compact" variant="outline" onclick={() => paletteEditorOpen = !paletteEditorOpen}>
+          {paletteEditorOpen ? 'Close' : 'Edit'}
+        </UIPillButton>
       </div>
       <div class="swatch-grid" style="--swatch-cols: {paletteStepLightness.length + 2}">
         <div class="step-column">
@@ -718,12 +706,10 @@
   <div class="scale-section">
     <div class="scale-header">
       <h4 class="scale-title">{displayLabel ?? label}</h4>
-      <button class="edit-toggle" type="button" onclick={clearPaletteOverrides}>Clear Overrides</button>
-      <button
-        class="edit-toggle"
-        type="button"
-        onclick={() => grayEditorOpen = !grayEditorOpen}
-      >{grayEditorOpen ? 'Close' : 'Edit'}</button>
+      <UIPillButton size="compact" variant="outline" onclick={clearPaletteOverrides}>Clear Overrides</UIPillButton>
+      <UIPillButton size="compact" variant="outline" onclick={() => grayEditorOpen = !grayEditorOpen}>
+        {grayEditorOpen ? 'Close' : 'Edit'}
+      </UIPillButton>
     </div>
     <div class="swatch-grid" style="--swatch-cols: {graySteps.length + 2}">
       <div class="step-column">
@@ -891,21 +877,7 @@
     display: flex;
     align-items: center;
     gap: var(--ui-space-8);
-  }
-
-  .edit-toggle {
-    font-size: var(--ui-font-size-md);
-    color: var(--ui-text-tertiary);
-    background: none;
-    border: 1px solid var(--ui-border-low);
-    border-radius: var(--ui-radius-sm);
-    padding: var(--ui-space-2) var(--ui-space-6);
-    cursor: pointer;
-  }
-
-  .edit-toggle:hover {
-    color: var(--ui-text-primary);
-    border-color: var(--ui-border-high);
+    padding-bottom: 0.5rem;
   }
 
   .derived-toggle {
@@ -915,17 +887,15 @@
     padding: var(--ui-space-6) var(--ui-space-4);
     background: none;
     border: none;
-    color: var(--ui-text-tertiary);
-    font-size: var(--ui-font-size-sm);
-    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-weight-light);
     cursor: pointer;
     transition: color var(--ui-transition-fast);
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
   }
 
   .derived-toggle:hover {
-    color: var(--ui-text-secondary);
+    color: var(--ui-text-primary);
   }
 
   .derived-toggle i {
@@ -952,12 +922,11 @@
   }
 
   .scale-title {
-    font-size: var(--ui-font-size-md);
-    font-weight: var(--ui-font-weight-semibold);
-    color: var(--ui-text-tertiary);
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-weight-bold);
+    color: var(--ui-text-primary);
     margin: 0;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    padding-right: 1rem;
   }
 
   /* Step columns */
@@ -1024,7 +993,11 @@
     background: none;
     border: none;
     text-align: center;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
     min-width: 0;
+    margin-top: var(--ui-space-2);
     overflow: hidden;
     text-overflow: ellipsis;
   }