@motion-proto/live-tokens 0.6.2 → 0.7.1

package/src/{component-editor → editor/component-editor}/registry.ts

@@ -1,6 +1,6 @@
 import type { Component } from 'svelte';
 import type { Token } from './scaffolding/types';
-import { registerComponentSchema } from '../lib/editorStore';
+import { registerComponentSchema } from '../core/store/editorStore';
 
 import BadgeEditor, { allTokens as badgeTokens } from './BadgeEditor.svelte';
 import CalloutEditor, { allTokens as calloutTokens } from './CalloutEditor.svelte';
@@ -11,6 +11,7 @@ import CollapsibleSectionEditor, { allTokens as collapsibleSectionTokens } from
 import DialogEditor, { allTokens as dialogTokens } from './DialogEditor.svelte';
 import ImageEditor, { allTokens as imageTokens } from './ImageEditor.svelte';
 import InlineEditActionsEditor, { allTokens as inlineEditActionsTokens } from './InlineEditActionsEditor.svelte';
+import MenuSelectEditor, { allTokens as menuSelectTokens } from './MenuSelectEditor.svelte';
 import NotificationEditor, { allTokens as notificationTokens } from './NotificationEditor.svelte';
 import ProgressBarEditor, { allTokens as progressBarTokens } from './ProgressBarEditor.svelte';
 import RadioButtonEditor, { allTokens as radioButtonTokens } from './RadioButtonEditor.svelte';
@@ -32,6 +33,7 @@ export type ComponentId =
   | 'cornerbadge'
   | 'image'
   | 'inlineeditactions'
+  | 'menuselect'
   | 'sectiondivider'
   | 'collapsiblesection'
   | 'table'
@@ -71,7 +73,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'segmentedcontrol',
     label: 'Segmented Control',
     icon: 'fas fa-hand-pointer',
-    sourceFile: 'src/components/SegmentedControl.svelte',
+    sourceFile: 'src/system/components/SegmentedControl.svelte',
     editorComponent: SegmentedControlEditor,
     schema: segmentedControlTokens,
   },
@@ -79,7 +81,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'button',
     label: 'Button',
     icon: 'fas fa-square',
-    sourceFile: 'src/components/Button.svelte',
+    sourceFile: 'src/system/components/Button.svelte',
     editorComponent: StandardButtonsEditor,
     schema: buttonTokens,
   },
@@ -87,7 +89,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'notification',
     label: 'Notification',
     icon: 'fas fa-bell',
-    sourceFile: 'src/components/Notification.svelte',
+    sourceFile: 'src/system/components/Notification.svelte',
     editorComponent: NotificationEditor,
     schema: notificationTokens,
   },
@@ -95,7 +97,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'dialog',
     label: 'Dialog',
     icon: 'fas fa-window-restore',
-    sourceFile: 'src/components/Dialog.svelte',
+    sourceFile: 'src/system/components/Dialog.svelte',
     editorComponent: DialogEditor,
     schema: dialogTokens,
   },
@@ -103,7 +105,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'radiobutton',
     label: 'Radio Button',
     icon: 'fas fa-dot-circle',
-    sourceFile: 'src/components/RadioButton.svelte',
+    sourceFile: 'src/system/components/RadioButton.svelte',
     editorComponent: RadioButtonEditor,
     schema: radioButtonTokens,
   },
@@ -111,7 +113,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'card',
     label: 'Card',
     icon: 'fas fa-id-card',
-    sourceFile: 'src/components/Card.svelte',
+    sourceFile: 'src/system/components/Card.svelte',
     editorComponent: CardEditor,
     schema: cardTokens,
   },
@@ -119,7 +121,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'badge',
     label: 'Badge',
     icon: 'fas fa-tag',
-    sourceFile: 'src/components/Badge.svelte',
+    sourceFile: 'src/system/components/Badge.svelte',
     editorComponent: BadgeEditor,
     schema: badgeTokens,
   },
@@ -127,7 +129,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'callout',
     label: 'Callout',
     icon: 'fas fa-quote-left',
-    sourceFile: 'src/components/Callout.svelte',
+    sourceFile: 'src/system/components/Callout.svelte',
     editorComponent: CalloutEditor,
     schema: calloutTokens,
   },
@@ -135,7 +137,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'cornerbadge',
     label: 'Corner Badge',
     icon: 'fas fa-tags',
-    sourceFile: 'src/components/CornerBadge.svelte',
+    sourceFile: 'src/system/components/CornerBadge.svelte',
     editorComponent: CornerBadgeEditor,
     schema: cornerBadgeTokens,
   },
@@ -143,7 +145,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'image',
     label: 'Image',
     icon: 'fas fa-image',
-    sourceFile: 'src/components/Image.svelte',
+    sourceFile: 'src/system/components/Image.svelte',
     editorComponent: ImageEditor,
     schema: imageTokens,
   },
@@ -151,15 +153,23 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'inlineeditactions',
     label: 'Inline Edit Actions',
     icon: 'fas fa-pen',
-    sourceFile: 'src/components/InlineEditActions.svelte',
+    sourceFile: 'src/system/components/InlineEditActions.svelte',
     editorComponent: InlineEditActionsEditor,
     schema: inlineEditActionsTokens,
   },
+  menuselect: {
+    id: 'menuselect',
+    label: 'Menu Select',
+    icon: 'fas fa-list',
+    sourceFile: 'src/system/components/MenuSelect.svelte',
+    editorComponent: MenuSelectEditor,
+    schema: menuSelectTokens,
+  },
   sectiondivider: {
     id: 'sectiondivider',
     label: 'Section Divider',
     icon: 'fas fa-minus',
-    sourceFile: 'src/components/SectionDivider.svelte',
+    sourceFile: 'src/system/components/SectionDivider.svelte',
     editorComponent: SectionDividerEditor,
     schema: sectionDividerTokens,
   },
@@ -167,7 +177,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'collapsiblesection',
     label: 'Collapsible Section',
     icon: 'fas fa-chevron-down',
-    sourceFile: 'src/components/CollapsibleSection.svelte',
+    sourceFile: 'src/system/components/CollapsibleSection.svelte',
     editorComponent: CollapsibleSectionEditor,
     schema: collapsibleSectionTokens,
   },
@@ -175,7 +185,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'table',
     label: 'Table',
     icon: 'fas fa-table',
-    sourceFile: 'src/components/Table.svelte',
+    sourceFile: 'src/system/components/Table.svelte',
     editorComponent: TableEditor,
     schema: tableTokens,
   },
@@ -183,7 +193,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'tabbar',
     label: 'Tab Bar',
     icon: 'fas fa-columns',
-    sourceFile: 'src/components/TabBar.svelte',
+    sourceFile: 'src/system/components/TabBar.svelte',
     editorComponent: TabBarEditor,
     schema: tabBarTokens,
   },
@@ -191,7 +201,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'tooltip',
     label: 'Tooltip',
     icon: 'fas fa-comment-dots',
-    sourceFile: 'src/components/Tooltip.svelte',
+    sourceFile: 'src/system/components/Tooltip.svelte',
     editorComponent: TooltipEditor,
     schema: tooltipTokens,
   },
@@ -199,7 +209,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     id: 'progressbar',
     label: 'Progress Bar',
     icon: 'fas fa-tasks',
-    sourceFile: 'src/components/ProgressBar.svelte',
+    sourceFile: 'src/system/components/ProgressBar.svelte',
     editorComponent: ProgressBarEditor,
     schema: progressBarTokens,
   },

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

@@ -119,7 +119,7 @@
     position: relative;
     border-radius: 50%;
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-default);
+    border: 1px solid var(--ui-border);
     cursor: grab;
     flex: none;
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
@@ -167,7 +167,7 @@
     width: 3.25rem;
     padding: var(--ui-space-2) var(--ui-space-6);
     background: var(--ui-surface-lowest);
-    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/ComponentEditorBase.svelte

@@ -46,6 +46,9 @@
   run(() => {
     ctx._linkedOrder.set(linked?.linkedOrder ?? null);
   });
+  run(() => {
+    ctx._variants.set(variants);
+  });
   let showVariantTabs = $derived(variants.length >= 2);
   run(() => {
     if (showVariantTabs && ($focusedVariant === null || !variants.some((v) => v.value === $focusedVariant))) {
@@ -62,59 +65,8 @@
       {@render config?.()}
     </NonStylableConfig>
   {/if}
-  {#if showVariantTabs}
-    <div class="variant-tabs" role="tablist">
-      {#each variants as opt}
-        <button
-          type="button"
-          class="variant-tab-btn"
-          class:active={opt.value === $focusedVariant}
-          role="tab"
-          aria-selected={opt.value === $focusedVariant}
-          onclick={() => focusedVariant.set(opt.value)}
-        >{opt.label}</button>
-      {/each}
-    </div>
-  {/if}
   {@render children?.({ focusedVariant: $focusedVariant, })}
   {#if linked}
     <LinkedBlock {component} {linked} />
   {/if}
 </div>
-
-<style>
-  .variant-tabs {
-    display: inline-flex;
-    flex-wrap: wrap;
-    gap: var(--ui-space-4);
-    padding: var(--ui-space-4);
-    background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-faint);
-    border-radius: var(--ui-radius-md);
-    align-self: flex-start;
-  }
-
-  .variant-tab-btn {
-    padding: var(--ui-space-6) var(--ui-space-12);
-    background: none;
-    border: none;
-    border-radius: var(--ui-radius-sm);
-    color: var(--ui-text-secondary);
-    font-size: var(--ui-font-size-md);
-    font-weight: var(--ui-font-weight-semibold);
-    text-transform: capitalize;
-    cursor: pointer;
-    transition: color var(--ui-transition-fast), background var(--ui-transition-fast);
-  }
-
-  .variant-tab-btn:hover:not(.active) {
-    color: var(--ui-text-primary);
-    background: var(--ui-hover);
-  }
-
-  .variant-tab-btn.active {
-    color: var(--ui-text-primary);
-    background: var(--ui-surface-high);
-    box-shadow: 0 0 0 1px var(--ui-border-default);
-  }
-</style>