@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/{component-editor → editor/component-editor}/NotificationEditor.svelte

@@ -6,10 +6,12 @@
   const variants = ['info', 'success', 'warning', 'danger'] as const;
   type Variant = typeof variants[number];
 
-  // Per variant: notification frame (surface, border, border-width, radius, padding) + icon (color, size).
+  // Per variant: notification frame (surface, border, border-width, radius, padding) + icon (color, size)
+  // + action backdrop surface (paints behind the optional header action button).
   function variantTokens(v: Variant): Token[] {
     return [
       { label: 'surface color', groupKey: 'surface', variable: `--notification-${v}-surface` },
+      { label: 'action surface', groupKey: 'action-surface', variable: `--notification-${v}-action-surface` },
       { label: 'border color', groupKey: 'border', variable: `--notification-${v}-border` },
       { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--notification-${v}-border-width` },
       { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--notification-${v}-radius` },
@@ -88,17 +90,17 @@
 </script>
 
 <script lang="ts">
-  import Notification from '../components/Notification.svelte';
+  import Notification from '../../system/components/Notification.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../lib/editorStore';
+  import { editorState } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import { buildSiblings } from './scaffolding/siblings';
 
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
   let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet));
 
-  import type { NotificationActions } from '../components/types';
+  import type { NotificationActions } from '../../system/components/types';
 
   let dismissible = $state(false);
   let rightOption: ButtonVariantOption = $state('none');
@@ -113,31 +115,7 @@
   })());
 </script>
 
-<ComponentEditorBase {component} title="Notification" description="Contextual feedback notifications with multiple variants. Import from <code>components/Notification.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
-  {#snippet config()}
-  
-      <label>
-        <input type="checkbox" bind:checked={dismissible} />
-        <span>Dismissible</span>
-      </label>
-      <label>
-        <span>Right button</span>
-        <select class="ui-form-select" bind:value={rightOption}>
-          {#each BUTTON_VARIANT_OPTIONS as v}
-            <option value={v}>{variantLabel(v)}</option>
-          {/each}
-        </select>
-      </label>
-      <label>
-        <span>Left button</span>
-        <select class="ui-form-select" bind:value={leftOption}>
-          {#each BUTTON_VARIANT_OPTIONS as v}
-            <option value={v}>{variantLabel(v)}</option>
-          {/each}
-        </select>
-      </label>
-    
-  {/snippet}
+<ComponentEditorBase {component} title="Notification" description="Contextual feedback notifications with multiple variants." tokens={allTokens} {linked} variants={variantOptions}>
   {#each variants as v}
     <VariantGroup
       name={v}
@@ -147,16 +125,67 @@
       {component}
       siblings={buildSiblings(variants, v, (sv) => ({ [sv]: variantTokens(sv) }), (sv) => ({ [sv]: variantTypeGroups(sv) }))}
     >
-      {#if v === 'info'}
-        <Notification variant="info" title="Information" description="This is an informational message to keep you updated." {dismissible} {actions} />
-      {:else if v === 'success'}
-        <Notification variant="success" title="Success" description="Your action was completed successfully." {dismissible} {actions} />
-      {:else if v === 'warning'}
-        <Notification variant="warning" title="Warning" description="Caution: This action may have unintended consequences." {dismissible} {actions} />
-      {:else if v === 'danger'}
-        <Notification variant="danger" title="Danger" description="Critical error: Please address this issue immediately." {dismissible} {actions} />
-      {/if}
+      {#snippet canvasToolbarExtras()}
+        <hr class="canvas-toolbar-divider" />
+        <label class="toolbar-check">
+          <input type="checkbox" bind:checked={dismissible} />
+          <span>Dismissible</span>
+        </label>
+        <label class="toolbar-field">
+          <span>Right button</span>
+          <select class="canvas-toolbar-select" bind:value={rightOption}>
+            {#each BUTTON_VARIANT_OPTIONS as opt}
+              <option value={opt}>{variantLabel(opt)}</option>
+            {/each}
+          </select>
+        </label>
+        <label class="toolbar-field">
+          <span>Left button</span>
+          <select class="canvas-toolbar-select" bind:value={leftOption}>
+            {#each BUTTON_VARIANT_OPTIONS as opt}
+              <option value={opt}>{variantLabel(opt)}</option>
+            {/each}
+          </select>
+        </label>
+      {/snippet}
+      <div class="notification-demo">
+        {#if v === 'info'}
+          <Notification variant="info" title="Information" description="This is an informational message to keep you updated." {dismissible} {actions} />
+        {:else if v === 'success'}
+          <Notification variant="success" title="Success" description="Your action was completed successfully." {dismissible} {actions} />
+        {:else if v === 'warning'}
+          <Notification variant="warning" title="Warning" description="Caution: This action may have unintended consequences." {dismissible} {actions} />
+        {:else if v === 'danger'}
+          <Notification variant="danger" title="Danger" description="Critical error: Please address this issue immediately." {dismissible} {actions} />
+        {/if}
+      </div>
     </VariantGroup>
   {/each}
 </ComponentEditorBase>
 
+<style>
+  .notification-demo {
+    width: 100%;
+    max-width: 46rem;
+  }
+
+  .toolbar-check {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    font-size: var(--ui-font-size-sm);
+    color: rgba(255, 255, 255, 0.78);
+    cursor: pointer;
+  }
+
+  /* Stack label above control so a 11rem-wide toolbar isn't crowded. */
+  .toolbar-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    font-size: var(--ui-font-size-xs);
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+</style>
+

package/src/{component-editor → editor/component-editor}/ProgressBarEditor.svelte

@@ -76,10 +76,10 @@
 </script>
 
 <script lang="ts">
-  import ProgressBar from '../components/ProgressBar.svelte';
+  import ProgressBar from '../../system/components/ProgressBar.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../lib/editorStore';
+  import { editorState } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import { buildSiblings } from './scaffolding/siblings';
 
@@ -87,7 +87,7 @@
   let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet));
 </script>
 
-<ComponentEditorBase {component} title="Progress Bar" description="Animated progress bar with variants. Import from <code>components/ProgressBar.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
+<ComponentEditorBase {component} title="Progress Bar" description="Animated progress bar with variants." tokens={allTokens} {linked} variants={variantOptions}>
   {#each variants as v}
     <VariantGroup
       name={v}
@@ -100,7 +100,6 @@
       <div class="progress-demo-stack">
         {#if v === 'primary'}
           <ProgressBar value={25} label="Getting Started" variant="primary" />
-          <ProgressBar value={60} variant="primary" size="compact" />
         {:else if v === 'success'}
           <ProgressBar value={100} label="Complete" variant="success" />
         {:else if v === 'warning'}
@@ -120,5 +119,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--space-12);
+    width: 100%;
+    max-width: 32rem;
   }
 </style>

package/src/{component-editor → editor/component-editor}/RadioButtonEditor.svelte

@@ -82,10 +82,10 @@
 </script>
 
 <script lang="ts">
-  import RadioButton from '../components/RadioButton.svelte';
+  import RadioButton from '../../system/components/RadioButton.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../lib/editorStore';
+  import { editorState } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
   let selectedRadio = $state('option-b');
@@ -97,7 +97,7 @@
   ) as Record<string, Token[]>);
 </script>
 
-<ComponentEditorBase {component} title="Radio Button" description="Styled radio buttons with icon and color support. Import from <code>components/RadioButton.svelte</code>" tokens={allTokens} {linked}>
+<ComponentEditorBase {component} title="Radio Button" description="Styled radio buttons with icon and color support." tokens={allTokens} {linked}>
   <VariantGroup
     name="radio"
     title="Radio Button"