@motion-proto/live-tokens 0.6.2 → 0.7.1

package/src/{component-editor → editor/component-editor}/scaffolding/ComponentFileMenu.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { stopPropagation } from 'svelte/legacy';
-
   import { onMount, onDestroy } from 'svelte';
-  import type { ComponentConfigMeta } from '../../lib/themeTypes';
-  import UIDialog from '../../ui/UIDialog.svelte';
+  import type { ComponentConfigMeta } from '../../core/themes/themeTypes';
+  import FileLoadList from '../../ui/FileLoadList.svelte';
+  import UISquareButton from '../../ui/UISquareButton.svelte';
 
   interface Props {
     /** Component slug used in the load-dialog title (e.g. "button"). */
@@ -72,22 +71,20 @@
   }
 
   function handleDelete(file: ComponentConfigMeta) {
-    if (file.fileName === 'default') return;
     ondelete?.(file);
   }
 </script>
 
 <div class="file-menu" bind:this={fileMenuRoot}>
-  <button
-    class="cfm-btn"
-    class:active={fileMenuOpen}
+  <UISquareButton
+    icon="fa-file"
+    active={fileMenuOpen}
     onclick={() => (fileMenuOpen = !fileMenuOpen)}
     title="File menu"
   >
-    <i class="fas fa-file"></i>
     <span>File</span>
     <i class="fas fa-chevron-down chevron" class:open={fileMenuOpen}></i>
-  </button>
+  </UISquareButton>
   {#if fileMenuOpen}
     <div class="file-menu-dropdown" role="menu">
       <button class="file-menu-item" onclick={handleSave} role="menuitem">
@@ -106,89 +103,24 @@
   {/if}
 </div>
 
-<UIDialog
+<FileLoadList
   bind:show={showFileList}
   title="Load {component} Config"
-  cancelLabel="Close"
-  width="420px"
->
-  <div class="load-list">
-    {#each files as file}
-      <div class="load-item" class:active={file.fileName === activeFileName}>
-        <button class="load-name-btn" onclick={() => handleLoad(file)}>
-          {file.name}
-        </button>
-        {#if file.fileName === activeFileName}
-          <span class="active-badge">active</span>
-        {/if}
-        {#if file.fileName !== 'default'}
-          <button
-            class="file-delete-btn"
-            onclick={stopPropagation(() => handleDelete(file))}
-            title="Delete {file.name}"
-          >
-            <i class="fas fa-trash-alt"></i>
-          </button>
-        {/if}
-      </div>
-    {/each}
-    {#if files.length === 0}
-      <div class="load-item empty">No saved files</div>
-    {/if}
-  </div>
-</UIDialog>
+  {files}
+  {activeFileName}
+  systemBadge={{ label: 'system', title: 'Protected system config' }}
+  emptyMessage="No saved files"
+  onload={handleLoad}
+  ondelete={handleDelete}
+/>
 
 <style>
-  .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.active {
-    background: var(--ui-surface-high);
-    border-color: var(--ui-border-default);
-    color: var(--ui-text-primary);
-  }
-
-  @media (max-width: 640px) {
-    .cfm-btn > span:not(.chevron) { display: none; }
-    .cfm-btn { padding: var(--ui-space-6) var(--ui-space-10); }
-  }
-
-  .chevron {
+  :global(.file-menu .chevron) {
     font-size: 0.7em;
     transition: transform var(--ui-transition-fast);
   }
 
-  .chevron.open {
+  :global(.file-menu .chevron.open) {
     transform: rotate(180deg);
   }
 
@@ -202,7 +134,7 @@
     left: 0;
     min-width: 160px;
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     border-radius: var(--ui-radius-md);
     box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.4));
     padding: var(--ui-space-4);
@@ -237,88 +169,4 @@
     background: var(--ui-hover);
     color: var(--ui-text-primary);
   }
-
-  .load-list {
-    display: flex;
-    flex-direction: column;
-    max-height: 60vh;
-    overflow-y: auto;
-  }
-
-  .load-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 6px;
-    border-bottom: 1px solid #2a2a2a;
-  }
-
-  .load-item:last-child {
-    border-bottom: none;
-  }
-
-  .load-item.empty {
-    padding: 16px;
-    color: #888;
-    font-size: 14px;
-    text-align: center;
-  }
-
-  .load-name-btn {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 6px 4px;
-    background: none;
-    border: none;
-    color: #aaa;
-    font-size: 14px;
-    cursor: pointer;
-    text-align: left;
-    border-radius: 3px;
-  }
-
-  .load-name-btn:hover {
-    color: #e0e0e0;
-  }
-
-  .load-item.active .load-name-btn {
-    color: #e0e0e0;
-    font-weight: 600;
-  }
-
-  .active-badge {
-    flex-shrink: 0;
-    font-size: 12px;
-    padding: 1px 6px;
-    border-radius: 3px;
-    background: #333;
-    color: #ccc;
-  }
-
-  .file-delete-btn {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    background: none;
-    border: none;
-    color: #555;
-    font-size: 12px;
-    cursor: pointer;
-    opacity: 0;
-  }
-
-  .load-item:hover .file-delete-btn {
-    opacity: 1;
-  }
-
-  .file-delete-btn:hover {
-    color: #ccc;
-  }
 </style>

package/src/{component-editor → editor/component-editor}/scaffolding/ComponentsTab.svelte

@@ -40,11 +40,11 @@
     color: var(--ui-text-primary);
     margin: 0;
     padding-bottom: var(--ui-space-8);
-    border-bottom: 1px solid var(--ui-border-subtle);
+    border-bottom: 1px solid var(--ui-border-low);
   }
 
   :global(.components-container .demo-description) {
-    font-size: var(--ui-font-size-sm);
+    font-size: var(--ui-font-size-md);
     color: var(--ui-text-tertiary);
     margin: 0;
   }

package/src/{component-editor → editor/component-editor}/scaffolding/CopyFromMenu.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { getEditorContext } from './editorContext';
 
   type Source = { name: string; label: string; states: string[] };
 
@@ -21,6 +23,13 @@
 
   let open = $state(false);
   let root: HTMLElement | undefined = $state();
+  /** When true, copy rewrites the source variant segment in palette aliases
+      (e.g. `--surface-accent-high` → `--surface-primary-high`) so cross-variant
+      copies preserve color identity while picking up shape/typography choices.
+      Lifted to editor context so the toggle persists across VariantGroup
+      remounts (focus-mode swaps unmount the previous group). */
+  const editorCtx = getEditorContext();
+  const preserveColorFamilyStore = editorCtx?.preserveColorFamily ?? writable(false);
 
   function toggle() {
     open = !open;
@@ -64,6 +73,11 @@
   </button>
   {#if open}
     <div class="copy-menu" role="menu">
+      <label class="copy-menu-toggle">
+        <input type="checkbox" bind:checked={$preserveColorFamilyStore} />
+        <span>Preserve color families</span>
+      </label>
+      <div class="copy-menu-divider" aria-hidden="true"></div>
       {#each copySources as src}
         {#if src.states.length === 1}
           {@const onlyState = src.states[0]}
@@ -147,7 +161,7 @@
     left: 0;
     min-width: 12rem;
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     border-radius: var(--ui-radius-md);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
     padding: var(--ui-space-4);
@@ -183,7 +197,7 @@
   .copy-menu-item:hover:not(:disabled) {
     background: var(--ui-surface-high);
     color: var(--ui-text-primary);
-    box-shadow: inset 0 0 0 1px var(--ui-border-faint);
+    box-shadow: inset 0 0 0 1px var(--ui-border-low);
   }
 
   .copy-menu-item:disabled {
@@ -209,7 +223,7 @@
   .copy-menu-item-parent:hover > .copy-menu-item-trigger {
     background: var(--ui-surface-high);
     color: var(--ui-text-primary);
-    box-shadow: inset 0 0 0 1px var(--ui-border-faint);
+    box-shadow: inset 0 0 0 1px var(--ui-border-low);
   }
 
   .copy-submenu {
@@ -219,7 +233,7 @@
     left: 100%;
     min-width: 10rem;
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     border-radius: var(--ui-radius-md);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
     padding: var(--ui-space-4);
@@ -252,4 +266,30 @@
   .copy-menu-item-parent:hover > .copy-submenu {
     display: flex;
   }
+
+  .copy-menu-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+    padding: var(--ui-space-6) var(--ui-space-10);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .copy-menu-toggle:hover {
+    color: var(--ui-text-primary);
+  }
+
+  .copy-menu-toggle input {
+    margin: 0;
+    cursor: pointer;
+  }
+
+  .copy-menu-divider {
+    height: 1px;
+    background: var(--ui-border-low);
+    margin: 2px 0;
+  }
 </style>

package/src/{component-editor → editor/component-editor}/scaffolding/DividerEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { CSS_VAR_CHANGE_EVENT } from '../../lib/cssVarSync';
+  import { CSS_VAR_CHANGE_EVENT } from '../../core/cssVarSync';
   import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
   import UIVariantSelector from '../../ui/UIVariantSelector.svelte';
   import { BORDER_WIDTH, DIVIDER_HEIGHT } from '../../ui/variantScales';

package/src/{component-editor → editor/component-editor}/scaffolding/FieldsetWrapper.svelte

@@ -21,7 +21,7 @@
 
 <style>
   .fieldset-wrapper {
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-lg);
     padding: 0 var(--ui-space-8) var(--ui-space-8);
     margin: 0;

package/src/{component-editor → editor/component-editor}/scaffolding/GradientCard.svelte

@@ -11,8 +11,8 @@
    * UIPaletteSelector. Reads resolve through `tokenRegistry$` so values
    * authored as `var(--gradient-angle-diagonal)` show their resolved degrees.
    */
-  import { setComponentAlias } from '../../lib/editorStore';
-  import { tokenRegistry$ } from '../../lib/tokenRegistry';
+  import { setComponentAlias } from '../../core/store/editorStore';
+  import { tokenRegistry$ } from '../../core/palettes/tokenRegistry';
   import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
   import AngleDial from './AngleDial.svelte';
 
@@ -173,7 +173,7 @@
     gap: var(--ui-space-12);
     padding: var(--ui-space-12);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
   }
 
@@ -187,7 +187,7 @@
     position: relative;
     height: 2.25rem;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
   }
 
   .handles {
@@ -218,7 +218,7 @@
     width: 0.7rem;
     height: 0.7rem;
     background: var(--stop-color, var(--ui-surface-high));
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     transform: rotate(45deg);
     border-radius: 1px;
     transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
@@ -274,7 +274,7 @@
     width: 4rem;
     padding: var(--ui-space-2) var(--ui-space-6);
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-primary);
     font-family: var(--ui-font-mono);

package/src/{component-editor → editor/component-editor}/scaffolding/LinkageChart.svelte

@@ -206,8 +206,8 @@
   .grid {
     display: grid;
     gap: 1px;
-    background: var(--ui-border-faint);
-    border: 1px solid var(--ui-border-faint);
+    background: var(--ui-border-low);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     overflow: hidden;
   }
@@ -242,7 +242,7 @@
     text-align: center;
   }
   button.row-target:focus-visible {
-    outline: 1px solid var(--ui-border-default, var(--ui-gray-700));
+    outline: 1px solid var(--ui-border, var(--ui-gray-700));
     outline-offset: -2px;
   }
 
@@ -265,7 +265,7 @@
   .grid .row-h.row-target.selected {
     background: var(--ui-surface-high);
     color: var(--ui-text-primary);
-    box-shadow: inset 0 0 0 1px var(--ui-border-default);
+    box-shadow: inset 0 0 0 1px var(--ui-border);
     z-index: 1;
   }
   .grid .cell.row-target.in-selected-row,
@@ -273,7 +273,7 @@
     background: var(--ui-surface-high);
   }
   .grid .cell.row-target.selected {
-    box-shadow: inset 0 0 0 1px var(--ui-border-default);
+    box-shadow: inset 0 0 0 1px var(--ui-border);
     z-index: 1;
   }
   .grid .cell.broken.row-target.in-selected-row,
@@ -300,7 +300,7 @@
   .absent {
     width: 5px;
     height: 1px;
-    background: var(--ui-border-subtle);
+    background: var(--ui-border-low);
     opacity: 0.6;
   }
 </style>

package/src/{component-editor → editor/component-editor}/scaffolding/LinkedBlock.svelte

@@ -127,7 +127,7 @@
       onclick={toggleSection}
     >
       <i class="fas fa-chevron-right chevron"></i>
-      <span class="section-title">Linked properties</span>
+      <span class="editor-section-title">Linked properties</span>
       <span class="section-summary">
         <span class="section-summary-sep">·</span>
         <span class="section-summary-count">{cards.length}</span>
@@ -203,7 +203,7 @@
   .linked-block {
     margin-top: var(--ui-space-12);
     padding: var(--ui-space-12);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     background: var(--ui-surface-low);
   }
@@ -235,11 +235,6 @@
   .section-header.expanded .chevron {
     transform: rotate(90deg);
   }
-  .section-title {
-    font-size: var(--ui-font-size-md);
-    font-weight: 500;
-    color: var(--ui-text-primary);
-  }
   .section-summary {
     display: inline-flex;
     align-items: center;
@@ -248,7 +243,7 @@
     color: var(--ui-text-tertiary);
   }
   .section-summary-sep {
-    color: var(--ui-border-default);
+    color: var(--ui-border);
   }
   .section-summary-count {
     font-family: var(--ui-font-mono);
@@ -268,7 +263,7 @@
     flex-wrap: wrap;
     align-items: flex-start;
     gap: var(--ui-space-12);
-    margin-top: var(--ui-space-16);
+    margin-top: var(--ui-space-20);
   }
 
   /* Card — vertical stack: label heading · control row · drill-down · chart.
@@ -279,7 +274,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-8);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-lg);
     padding: var(--ui-space-12) var(--ui-space-16);
     min-width: 14rem;
@@ -299,7 +294,7 @@
   }
   .linked-card.hovered {
     background: var(--ui-hover-lowest);
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
   }
   .linked-card.hovered.broken {
     border-color: var(--ui-link-broken);

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
+  /** Section that gathers render-time toggles a component accepts as props
+      (e.g. dismissible, action buttons, hover shimmer, show icons). */
+</script>
+
+<section class="editor-section-card config-block">
+  <h3 class="editor-section-title config-title">Editor Configuration</h3>
+  <div class="config-controls">
+    {@render children?.()}
+  </div>
+</section>
+
+<style>
+  .config-title {
+    margin-bottom: var(--ui-space-20);
+  }
+
+  .config-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-16);
+    align-items: center;
+  }
+
+  .config-controls :global(label) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+  }
+</style>