@motion-proto/live-tokens 0.6.2 → 0.7.1

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

@@ -88,12 +88,10 @@
 </script>
 
 <script lang="ts">
-  import Dialog from '../components/Dialog.svelte';
+  import Dialog from '../../system/components/Dialog.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState, setComponentConfig } from '../lib/editorStore';
-  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
-  import ShadowBackdropControls from './scaffolding/ShadowBackdropControls.svelte';
+  import { editorState, setComponentConfig } from '../core/store/editorStore';
 
   let config = $derived($editorState.components.dialog?.config ?? {});
   let confirmVariant = $derived((BUTTON_VARIANTS.includes(config[CONFIRM_VAR] as ButtonVariant) ? config[CONFIRM_VAR] : DEFAULT_CONFIRM) as ButtonVariant);
@@ -108,67 +106,72 @@
     setComponentConfig(component, CANCEL_VAR, v);
   }
 
-  let bgMode: 'image' | 'color' = $state('image');
-  const bgVar = '--backdrop-dialog-surface';
 </script>
 
-<ComponentEditorBase {component} title="Dialog" description="Modal dialog with focus management and slide-in animation. Import from <code>components/Dialog.svelte</code>" tokens={allTokens}>
-  {#snippet config()}
-  
-      <label>
-        <span>Cancel button (left)</span>
-        <select class="ui-form-select" value={cancelVariant} onchange={setCancelVariant}>
-          {#each BUTTON_VARIANTS as v}
-            <option value={v}>{variantLabel(v)}</option>
-          {/each}
-        </select>
-      </label>
-      <label>
-        <span>Confirm button (right)</span>
-        <select class="ui-form-select" value={confirmVariant} onchange={setConfirmVariant}>
-          {#each BUTTON_VARIANTS as v}
-            <option value={v}>{variantLabel(v)}</option>
-          {/each}
-        </select>
-      </label>
-      <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
-    
-  {/snippet}
-  <div class="dialog-preview">
-    <ShadowBackdrop mode={bgMode} colorVariable={bgVar} padding="0">
-      <Dialog
-        show
-        inline
-        title="Sample Dialog"
-        confirm={{ label: 'Save', onClick: () => {} }}
-        cancel={{ label: 'Cancel', onClick: () => {} }}
-      >
-        <p style="margin: 0;">This is the dialog body content. It supports any slotted content including forms, lists, or other components.</p>
-      </Dialog>
-    </ShadowBackdrop>
-  </div>
-  <VariantGroup name="dialog" title="Dialog" states={frameStates} typeGroups={frameTypeGroups} {component} />
+<ComponentEditorBase {component} title="Dialog" description="Modal dialog with focus management and slide-in animation." tokens={allTokens}>
+  <VariantGroup name="dialog" title="Dialog" states={frameStates} typeGroups={frameTypeGroups} {component} backdropPadding="0">
+    {#snippet extraPropertyRows(stateName)}
+      {#if stateName === 'footer'}
+        <div class="property-row button-variant-row">
+          <span class="property-label">right button</span>
+          <select class="ui-form-select compact" value={confirmVariant} onchange={setConfirmVariant}>
+            {#each BUTTON_VARIANTS as v}
+              <option value={v}>{variantLabel(v)}</option>
+            {/each}
+          </select>
+        </div>
+        <div class="property-row button-variant-row">
+          <span class="property-label">left button</span>
+          <select class="ui-form-select compact" value={cancelVariant} onchange={setCancelVariant}>
+            {#each BUTTON_VARIANTS as v}
+              <option value={v}>{variantLabel(v)}</option>
+            {/each}
+          </select>
+        </div>
+      {/if}
+    {/snippet}
+    <Dialog
+      show
+      inline
+      title="Sample Dialog"
+      confirm={{ label: 'Save', onClick: () => {} }}
+      cancel={{ label: 'Cancel', onClick: () => {} }}
+    >
+      <p style="margin: 0;">This is the dialog body content. It supports any slotted content including forms, lists, or other components.</p>
+    </Dialog>
+  </VariantGroup>
 </ComponentEditorBase>
 
 <style>
-  .dialog-preview {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    min-width: 0;
-  }
-  .dialog-preview :global(.shadow-backdrop) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    min-width: 0;
-  }
-  .dialog-preview :global(.dialog-backdrop.inline) {
+  :global(.dialog-backdrop.inline) {
     width: auto;
     box-sizing: border-box;
     padding: clamp(24px, 6vw, 128px);
   }
+
+  /* Pull the button-variant rows into the same 3-column geometry the token
+     grid uses (label / 8rem selector / context) so they line up under
+     `padding`, `border width`, etc. Also shrink the native select to match
+     the visual weight of the `.ui-ts-trigger` chips used by the other
+     selectors on the row. */
+  :global(.extra-property-rows .property-row.button-variant-row) {
+    /* Col 1 min matches the typical max-content width of the token labels
+       above (`border color`, `border width`) so the select edge sits flush
+       with the selector column in the token grid even though the two grids
+       are independent. */
+    grid-template-columns: minmax(6.5rem, max-content) 8rem 1fr;
+    padding-left: var(--ui-space-12);
+    column-gap: var(--ui-space-10);
+  }
+
+  :global(.ui-form-select.compact) {
+    min-height: 1.75rem;
+    padding: 0 var(--ui-space-8) !important;
+    padding-right: var(--ui-space-24) !important;
+    background-color: var(--ui-surface-low) !important;
+    background-position: right var(--ui-space-8) center !important;
+    font-size: var(--ui-font-size-sm);
+    width: 100%;
+  }
 </style>
 

package/src/editor/component-editor/ImageEditor.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import type { Token } from './scaffolding/types';
+
+  export const component = 'image';
+
+  // Single object: image frame.
+  const states: Record<string, Token[]> = {
+    image: [
+      { label: 'border color', groupKey: 'border', variable: '--image-default-border' },
+      { label: 'border width', groupKey: 'width', variable: '--image-default-border-width' },
+      { label: 'corner radius', groupKey: 'radius', variable: '--image-default-radius' },
+      { label: 'image shadow', groupKey: 'shadow', variable: '--image-default-shadow' },
+    ],
+  };
+
+  export const allTokens: Token[] = Object.values(states).flat();
+</script>
+
+<script lang="ts">
+  import Image from '../../system/components/Image.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import demoImageUrl from '../../system/assets/offering.webp';
+</script>
+
+<ComponentEditorBase {component} title="Image" description="Framed image with rounded corners, border, and shadow." tokens={allTokens}>
+  <VariantGroup name="image" title="Image" {states} {component}>
+    <Image src={demoImageUrl} alt="Demo" variant="banner" />
+  </VariantGroup>
+</ComponentEditorBase>

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

@@ -1,4 +1,5 @@
 <script module lang="ts">
+  import { buildSiblings } from './scaffolding/siblings';
   import type { Token } from './scaffolding/types';
 
   export const component = 'inlineeditactions';
@@ -8,6 +9,7 @@
   // Save and cancel are different objects, so they don't link to each other by default.
   const buttons = ['save', 'cancel'] as const;
   type Button = typeof buttons[number];
+  const variantOptions = buttons.map((b) => ({ value: b, label: b === 'save' ? 'Save button' : 'Cancel button' }));
   function buttonStateTokens(btn: Button, state: 'default' | 'hover'): Token[] {
     return [
       { label: 'surface color', groupKey: 'surface', variable: `--inlineeditactions-${btn}-${state}-surface` },
@@ -39,10 +41,10 @@
 </script>
 
 <script lang="ts">
-  import InlineEditActions from '../components/InlineEditActions.svelte';
+  import InlineEditActions from '../../system/components/InlineEditActions.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 linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
@@ -52,14 +54,14 @@
   ) as Record<string, Token[]>);
 </script>
 
-<ComponentEditorBase {component} title="Inline Edit Actions" description="Confirm/cancel button pair for inline editing. Import from <code>components/InlineEditActions.svelte</code>" tokens={allTokens} {linked}>
+<ComponentEditorBase {component} title="Inline Edit Actions" description="Confirm/cancel button pair for inline editing." tokens={allTokens} {linked} variants={variantOptions}>
   {#each buttons as btn}
     <VariantGroup
       name={btn}
       title={btn === 'save' ? 'Save button' : 'Cancel button'}
       states={visibleStatesByButton(btn)}
       {component}
-      
+      siblings={buildSiblings(buttons, btn, buttonStates)}
     >
       {#snippet children({ activeState })}
             {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}

package/src/editor/component-editor/MenuSelectEditor.svelte

@@ -0,0 +1,160 @@
+<script module lang="ts">
+  import { buildTypeGroupTokens, buildTypeGroupShareableContexts } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+
+  export const component = 'menuselect';
+
+  // Non-text tokens per state; text/font lives in typeGroups. Item-shape tokens sit under `menu` so they read as one decision across states.
+  const states: Record<string, Token[]> = {
+    menu: [
+      { label: 'surface color', groupKey: 'surface', variable: '--menuselect-menu-surface' },
+      { label: 'border color', groupKey: 'border', variable: '--menuselect-menu-border' },
+      { label: 'border width', groupKey: 'width', variable: '--menuselect-menu-border-width' },
+      { label: 'corner radius', groupKey: 'menu-radius', variable: '--menuselect-menu-radius' },
+      { label: 'padding', variable: '--menuselect-menu-padding', groupKey: 'menu-padding' },
+      { label: 'padding-top', variable: '--menuselect-menu-padding-top', groupKey: 'menu-padding-top', hidden: true },
+      { label: 'padding-right', variable: '--menuselect-menu-padding-right', groupKey: 'menu-padding-right', hidden: true },
+      { label: 'padding-bottom', variable: '--menuselect-menu-padding-bottom', groupKey: 'menu-padding-bottom', hidden: true },
+      { label: 'padding-left', variable: '--menuselect-menu-padding-left', groupKey: 'menu-padding-left', hidden: true },
+      { label: 'item gap', groupKey: 'gap', variable: '--menuselect-menu-gap' },
+      { label: 'shadow', groupKey: 'shadow', variable: '--menuselect-menu-shadow' },
+      { label: 'item radius', groupKey: 'item-radius', variable: '--menuselect-item-radius' },
+      { label: 'item padding', variable: '--menuselect-item-padding', groupKey: 'item-padding' },
+      { label: 'item padding-top', variable: '--menuselect-item-padding-top', groupKey: 'item-padding-top', hidden: true },
+      { label: 'item padding-right', variable: '--menuselect-item-padding-right', groupKey: 'item-padding-right', hidden: true },
+      { label: 'item padding-bottom', variable: '--menuselect-item-padding-bottom', groupKey: 'item-padding-bottom', hidden: true },
+      { label: 'item padding-left', variable: '--menuselect-item-padding-left', groupKey: 'item-padding-left', hidden: true },
+    ],
+    'default item': [
+      { label: 'surface color', groupKey: 'surface', variable: '--menuselect-default-surface' },
+      { label: 'icon color', groupKey: 'icon', variable: '--menuselect-default-icon' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--menuselect-default-icon-size' },
+    ],
+    'hover item': [
+      { label: 'surface color', groupKey: 'surface', variable: '--menuselect-hover-surface' },
+      { label: 'icon color', groupKey: 'icon', variable: '--menuselect-hover-icon' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--menuselect-hover-icon-size' },
+    ],
+    'selected item': [
+      { label: 'surface color', groupKey: 'surface', variable: '--menuselect-selected-surface' },
+      { label: 'icon color', groupKey: 'icon', variable: '--menuselect-selected-icon' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--menuselect-selected-icon-size' },
+      { label: 'indicator color', groupKey: 'indicator', variable: '--menuselect-selected-indicator' },
+    ],
+    'disabled item': [
+      { label: 'surface color', groupKey: 'surface', variable: '--menuselect-disabled-surface' },
+      { label: 'icon color', groupKey: 'icon', variable: '--menuselect-disabled-icon' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--menuselect-disabled-icon-size' },
+    ],
+  };
+
+  // Per-state item-label typography; linkable groupKeys let users collapse or diverge across states.
+  const typeGroups: Record<string, TypeGroupConfig[]> = {
+    'default item': [{
+      legend: 'item label',
+      colorVariable: '--menuselect-default-text',
+      familyVariable: '--menuselect-default-text-font-family',
+      sizeVariable: '--menuselect-default-text-font-size',
+      weightVariable: '--menuselect-default-text-font-weight',
+      lineHeightVariable: '--menuselect-default-text-line-height',
+    }],
+    'hover item': [{
+      legend: 'item label',
+      colorVariable: '--menuselect-hover-text',
+      familyVariable: '--menuselect-hover-text-font-family',
+      sizeVariable: '--menuselect-hover-text-font-size',
+      weightVariable: '--menuselect-hover-text-font-weight',
+      lineHeightVariable: '--menuselect-hover-text-line-height',
+    }],
+    'selected item': [{
+      legend: 'item label',
+      colorVariable: '--menuselect-selected-text',
+      familyVariable: '--menuselect-selected-text-font-family',
+      sizeVariable: '--menuselect-selected-text-font-size',
+      weightVariable: '--menuselect-selected-text-font-weight',
+      lineHeightVariable: '--menuselect-selected-text-line-height',
+    }],
+    'disabled item': [{
+      legend: 'item label',
+      colorVariable: '--menuselect-disabled-text',
+      familyVariable: '--menuselect-disabled-text-font-family',
+      sizeVariable: '--menuselect-disabled-text-font-size',
+      weightVariable: '--menuselect-disabled-text-font-weight',
+      lineHeightVariable: '--menuselect-disabled-text-line-height',
+    }],
+  };
+
+  const typeGroupTokens: Token[] = buildTypeGroupTokens(typeGroups);
+  export const allTokens: Token[] = [...Object.values(states).flat(), ...typeGroupTokens];
+
+  const linkableContexts = new Map<string, string>([
+    ...buildTypeGroupShareableContexts(typeGroups),
+    ['--menuselect-default-icon-size', 'default item'],
+    ['--menuselect-hover-icon-size', 'hover item'],
+    ['--menuselect-selected-icon-size', 'selected item'],
+    ['--menuselect-disabled-icon-size', 'disabled item'],
+  ]);
+</script>
+
+<script lang="ts">
+  import MenuSelect from '../../system/components/MenuSelect.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../core/store/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+
+  type Item = { value: string; label: string; icon?: string; disabled?: boolean };
+  const items: Item[] = [
+    { value: 'option-1', label: 'Option one',   icon: 'fas fa-circle' },
+    { value: 'option-2', label: 'Option two',   icon: 'fas fa-square' },
+    { value: 'option-3', label: 'Option three', icon: 'fas fa-triangle-exclamation' },
+    { value: 'option-4', label: 'Option four',  icon: 'fas fa-ban', disabled: true },
+  ];
+
+  let showIcons = $state(true);
+  let previewItems = $derived(showIcons ? items : items.map((it) => ({ ...it, icon: undefined })));
+
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
+
+  let visibleStates = $derived(Object.fromEntries(
+    Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>);
+</script>
+
+<ComponentEditorBase {component} title="Menu Select" description="A select-style dropdown panel. Items support default, hover, selected, and disabled states." tokens={allTokens} {linked}>
+  <VariantGroup
+    name="menuselect"
+    title="Menu Select"
+    states={visibleStates}
+    {typeGroups}
+    {component}
+  >
+    {#snippet canvasToolbarExtras()}
+      <hr class="canvas-toolbar-divider" />
+      <label class="show-icons-row">
+        <input type="checkbox" bind:checked={showIcons} />
+        <span>Show icons</span>
+      </label>
+    {/snippet}
+    {#snippet children({ activeState })}
+      {@const previewValue = activeState === 'selected item' ? 'option-2' : ''}
+      {@const previewForceHover = activeState === 'hover item' ? 'option-1' : null}
+      <MenuSelect
+        items={previewItems}
+        value={previewValue}
+        forceHoverValue={previewForceHover}
+      />
+    {/snippet}
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  .show-icons-row {
+    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;
+  }
+</style>

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

@@ -88,17 +88,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 +113,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 +123,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"