@motion-proto/live-tokens 0.47.0 → 0.48.0

package/src/editor/ui/FileLoadList.svelte

@@ -6,7 +6,8 @@
     show: boolean;
     title: string;
     files: F[];
-    activeFileName: string;
+    /** Marks the row the editor already has open. Omit where no row is. */
+    activeFileName?: string;
     /** Show name/date sort headers above the list. */
     sortable?: boolean;
     /** Render the updatedAt column on each row. */
@@ -20,20 +21,37 @@
     /** Shown when `files` is empty. Omit to render no row at all. */
     emptyMessage?: string;
     width?: string;
+    /** Marks the row the user picked, for lists where picking is a step rather
+     *  than the whole action (theme preview). Null leaves every row unpicked. */
+    selectedFileName?: string | null;
+    /** Badge on the selected row, naming what picking it did. Null hides it. */
+    selectedBadge?: { label: string; title: string } | null;
+    /** Per-row badge naming what kind of file the row is, for lists that mix
+     *  kinds. Null leaves the row unmarked. */
+    rowBadge?: (file: F) => { label: string; title: string } | null;
+    /** Dialog footer: label for the dismiss button, and an optional commit
+     *  button. Both pass straight through to `UIDialog`. */
+    cancelLabel?: string;
+    confirmLabel?: string;
+    onconfirm?: () => void;
     onload: (file: F) => void;
     ondelete?: (file: F) => void;
-    /** Optional per-row export action — e.g. download a manifest bundle.
+    /** Optional per-row export action — e.g. download a theme bundle.
      *  When omitted, no export button renders. */
     onexport?: (file: F) => void;
+    /** Whether the export button should appear for a row. Default: every row. */
+    canExport?: (file: F) => boolean;
     /** Tooltip for the per-row export button. Falls back to "Export {name}". */
     exportTitle?: (file: F) => string;
+    /** Controls under the list, above the dialog footer. */
+    options?: import('svelte').Snippet;
   }
 
   let {
     show = $bindable(false),
     title,
     files,
-    activeFileName,
+    activeFileName = '',
     sortable = false,
     showUpdatedAt = false,
     isProtected = (f) => f.isProtected ?? f.fileName === 'default',
@@ -41,10 +59,18 @@
     systemBadge = null,
     emptyMessage,
     width = '420px',
+    selectedFileName = null,
+    selectedBadge = null,
+    rowBadge,
+    cancelLabel = 'Close',
+    confirmLabel = '',
+    onconfirm,
     onload,
     ondelete,
     onexport,
+    canExport,
     exportTitle,
+    options,
   }: Props = $props();
 
   type SortKey = 'name' | 'updatedAt';
@@ -101,9 +127,14 @@
     if (canDelete) return canDelete(file);
     return !isProtected(file);
   }
+
+  function shouldShowExport(file: F): boolean {
+    if (!onexport) return false;
+    return canExport ? canExport(file) : true;
+  }
 </script>
 
-<UIDialog bind:show {title} cancelLabel="Close" {width}>
+<UIDialog bind:show {title} {cancelLabel} {confirmLabel} {onconfirm} {width}>
   <div class="load-list">
     {#if sortable}
       <div class="load-header">
@@ -137,9 +168,14 @@
       <div
         class="load-item"
         class:active={file.fileName === activeFileName}
+        class:selected={file.fileName === selectedFileName}
         class:protected={protectedRow}
       >
-        <button class="load-name-btn" onclick={() => handleLoad(file)}>
+        <button
+          class="load-name-btn"
+          aria-pressed={selectedFileName === null ? undefined : file.fileName === selectedFileName}
+          onclick={() => handleLoad(file)}
+        >
           {#if protectedRow}
             <i class="fas fa-lock system-glyph" aria-hidden="true"></i>
           {/if}
@@ -148,13 +184,21 @@
         {#if protectedRow && systemBadge}
           <span class="system-badge" title={systemBadge.title}>{systemBadge.label}</span>
         {/if}
+        {#if rowBadge}
+          {@const badge = rowBadge(file)}
+          {#if badge}
+            <span class="system-badge" title={badge.title}>{badge.label}</span>
+          {/if}
+        {/if}
         {#if showUpdatedAt}
           <span class="updated-at" title={file.updatedAt}>{formatUpdatedAt(file.updatedAt)}</span>
         {/if}
-        {#if file.fileName === activeFileName}
+        {#if file.fileName === selectedFileName && selectedBadge}
+          <span class="active-badge" title={selectedBadge.title}>{selectedBadge.label}</span>
+        {:else if file.fileName === activeFileName}
           <span class="active-badge">Active</span>
         {/if}
-        {#if onexport}
+        {#if shouldShowExport(file)}
           <button
             class="file-action-btn"
             onclick={stopPropagation(() => onexport!(file))}
@@ -178,6 +222,9 @@
       <div class="load-item empty">{emptyMessage}</div>
     {/if}
   </div>
+  {#if options}
+    <div class="load-options">{@render options()}</div>
+  {/if}
 </UIDialog>
 
 <style>
@@ -188,6 +235,11 @@
     overflow-y: auto;
   }
 
+  .load-options {
+    padding: var(--ui-space-10) var(--ui-space-4) var(--ui-space-2);
+    border-top: 1px solid var(--ui-border-low);
+  }
+
   .load-header {
     display: flex;
     align-items: center;
@@ -289,6 +341,14 @@
     color: #e0e0e0;
   }
 
+  .load-item.selected {
+    background: var(--ui-surface-high);
+  }
+
+  .load-item.selected .load-name-btn {
+    color: var(--ui-text-primary);
+  }
+
   .load-item.active .load-name-btn {
     color: #e0e0e0;
     font-weight: 600;

package/src/editor/ui/GradientEditor.svelte

@@ -7,7 +7,7 @@
   import { get } from 'svelte/store';
   import type { GradientType, GradientTokenStop } from '../core/store/editorTypes';
   import {
-    themeGradientSource,
+    colorsAndTypeGradientSource,
     snapshotGradient,
     type GradientSource,
     type GradientSourceSnapshot,
@@ -20,7 +20,7 @@
   import { snapTokenToFamily } from '../core/palettes/familySwap';
 
   interface Props {
-    /** Theme-gradient mode: variable name (e.g. `--gradient-1`). */
+    /** ColorsAndType-gradient mode: variable name (e.g. `--gradient-1`). */
     variable?: string;
     /** Component-gradient mode: source adapter. Wins over `variable`. */
     source?: GradientSource;
@@ -52,7 +52,7 @@
 
   // Captured once: callers remount when the target gradient changes.
   // svelte-ignore state_referenced_locally
-  const gradientSource: GradientSource = source ?? themeGradientSource(variable!);
+  const gradientSource: GradientSource = source ?? colorsAndTypeGradientSource(variable!);
   // Local const so Svelte 5's `$<store>` auto-subscription works.
   const gradientSourceCurrent = gradientSource.current;
   // svelte-ignore state_referenced_locally

package/src/editor/ui/PaletteEditor.svelte

@@ -8,6 +8,7 @@
   import GradientStopEditor from './palette/GradientStopEditor.svelte';
   import ScaleCurveEditor from './palette/ScaleCurveEditor.svelte';
   import PaletteBase from './palette/PaletteBase.svelte';
+  import PaletteJumpButton from './palette/PaletteJumpButton.svelte';
   import { type EditingState, idleState, BASE_KEY, isEditingBase as isBaseEdit } from './palette/paletteEditorState';
   import { dockTrackTemplate } from './palette/dockMagnify';
   import {
@@ -520,6 +521,7 @@
             <span>Gradient</span>
           </label>
         {/if}
+        <PaletteJumpButton family={label} {displayLabel} target="wheel" />
         <UIPillButton size="compact" variant="outline" onclick={clearPaletteOverrides}>Clear Overrides</UIPillButton>
         <UIPillButton size="compact" variant="outline" onclick={() => paletteEditorOpen = !paletteEditorOpen}>
           {paletteEditorOpen ? 'Close' : 'Edit'}
@@ -551,7 +553,9 @@
               onkeydown={(e) => e.key === 'Enter' && handlePaletteClick({ label: ps.label, lightness: ps.lightness, index: ps.index })}
             >
               {#if ps.key in overrides}
-                <span class="override-dot" title="Palette override"></span>
+                <span class="override-lock" title="Palette override: this step is set by hand, not derived from the curve">
+                  <i class="fas fa-lock" aria-hidden="true"></i>
+                </span>
               {/if}
             </div>
             <button
@@ -864,7 +868,7 @@
     align-items: start;
     justify-content: start;
     min-width: 0;
-    max-width: calc(var(--swatch-cols) * 4rem + (var(--swatch-cols) - 1) * var(--swatch-gap, var(--ui-space-4)));
+    max-width: calc(var(--swatch-cols) * 4.5rem + (var(--swatch-cols) - 1) * var(--swatch-gap, var(--ui-space-4)));
   }
 
   .curve-grid-span {
@@ -897,7 +901,7 @@
 
   .swatch.gray-swatch {
     width: 100%;
-    height: calc(4rem + var(--ui-space-2));
+    height: calc(4.75rem + var(--ui-space-2));
     /* Compensating margin: height + margin-bottom is constant every frame of
        the magnification, so the grid's row height never dips mid-transition
        (the dip bounced everything below the palette). Also keeps the hex row
@@ -928,19 +932,29 @@
      change — the swatch itself already IS the picked color. */
   .swatch.gray-swatch.anchored {
     border-color: var(--ui-border-higher);
-    height: calc(5rem + var(--ui-space-2));
+    height: calc(5.75rem + var(--ui-space-2));
     margin-bottom: 0;
   }
 
-  .override-dot {
+  /* An overridden step is held by hand and no longer follows the curve, which a
+     lock says and a dot could not. The badge carries its own dark disc: the
+     ramp runs from near-white to near-black, so no single glyph colour reads
+     against every swatch it can land on. */
+  .override-lock {
     position: absolute;
-    top: 3px;
-    right: 3px;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--ui-text-primary);
-    border: 1px solid rgba(255, 255, 255, 0.6);
+    top: var(--ui-space-4);
+    right: var(--ui-space-4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: var(--ui-radius-full);
+    background: rgba(0, 0, 0, 0.55);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
+    color: #fff;
+    font-size: var(--ui-font-size-xs);
+    line-height: 1;
   }
 
   .empty-mode-toggle {