@motion-proto/live-tokens 0.6.2 → 0.8.0

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

@@ -11,10 +11,8 @@
   function statePrefix(v: Variant, s: StateName): string {
     return s === 'default' ? `--button-${v}` : `--button-${v}-${s}`;
   }
-  /** Buttons have a single text slot, so its typography props live as peer
-   *  rows in the unified token grid (no TypeEditor fieldset). Default state
-   *  carries the full font shape (family/weight/size/line-height); hover and
-   *  disabled only override text color, so they keep just the color row. */
+  // Single text slot: typography props are peer rows, not a TypeEditor fieldset.
+  // Default carries the full font shape; hover/disabled only override text color.
   function variantStateTokens(v: Variant, s: StateName): Token[] {
     const p = statePrefix(v, s);
     const tokens: Token[] = [
@@ -39,16 +37,27 @@
     return tokens;
   }
 
+  // Outline is the only variant that paints a surface tint on :active; the rest
+  // express press feedback through transform/shadow only. Expose just the one
+  // tunable property here rather than adding an active state to every variant.
+  const outlineActiveTokens: Token[] = [
+    { label: 'surface color', groupKey: 'surface', variable: '--button-outline-active-surface' },
+  ];
+
   function variantStates(v: Variant): Record<string, Token[]> {
-    return Object.fromEntries(stateNames.map((s) => [s, variantStateTokens(v, s)]));
+    const out: Record<string, Token[]> = {};
+    out.default = variantStateTokens(v, 'default');
+    out.hover = variantStateTokens(v, 'hover');
+    if (v === 'outline') out.active = outlineActiveTokens;
+    out.disabled = variantStateTokens(v, 'disabled');
+    return out;
   }
   export const allTokens: Token[] = variants.flatMap((v) =>
     Object.values(variantStates(v)).flat(),
   );
 
-  // Linked block:
-  //   - shape props (border-width, radius, padding) link across every variant × state — buttons share one geometry.
-  //   - typography props link across all six variants.
+  // Shape props link across every variant × state (buttons share one geometry).
+  // Typography props link across all variants.
   const linkableContexts = new Map<string, string>([
     ...variants.flatMap((v) => stateNames.flatMap((s) => [
       [`${statePrefix(v, s)}-border-width`, `${v} ${s}`] as const,
@@ -68,11 +77,11 @@
 </script>
 
 <script lang="ts">
-  import Button from '../components/Button.svelte';
+  import Button from '../../system/components/Button.svelte';
   import Toggle from '../ui/Toggle.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState, setComponentAlias } from '../lib/editorStore';
+  import { editorState, setComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
   let shimmerRef = $derived($editorState.components.button?.aliases['--button-shimmer']);
@@ -89,15 +98,7 @@
   ) as Record<string, Token[]>);
 </script>
 
-<ComponentEditorBase {component} title="Button" description="Reusable button component with multiple variants and sizes. Import from <code>components/Button.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
-  {#snippet config()}
-  
-      <label>
-        <span>Hover shimmer</span>
-        <Toggle checked={shimmerEnabled} onchange={handleShimmerChange} />
-      </label>
-    
-  {/snippet}
+<ComponentEditorBase {component} title="Button" description="Reusable button component with multiple variants and sizes." tokens={allTokens} {linked} variants={variantOptions}>
   {#each variants as v}
     <VariantGroup
       name={v}
@@ -106,8 +107,15 @@
       {component}
       columns={2}
       siblings={buildSiblings(variants, v, variantStates)}
-      
     >
+      {#snippet extraPropertyRows(stateName)}
+        {#if stateName === 'hover'}
+          <div class="property-row">
+            <span class="property-label">hover shimmer</span>
+            <Toggle checked={shimmerEnabled} onchange={handleShimmerChange} />
+          </div>
+        {/if}
+      {/snippet}
       {#snippet children({ activeState })}
             {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
         {@const isDisabled = activeState === 'disabled'}
@@ -150,7 +158,7 @@
 
   .size-divider {
     width: 1px;
-    background: var(--ui-border-faint);
+    background: var(--ui-border-low);
     align-self: stretch;
   }
 

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

@@ -37,7 +37,10 @@
       { label: 'divider thickness', groupKey: 'bar-divider-thickness', variable: '--tabbar-bar-divider-thickness' },
       { label: 'indicator thickness', groupKey: 'bar-indicator-thickness', variable: '--tabbar-bar-indicator-thickness' },
       { label: 'space above', groupKey: 'bar-top-margin', variable: '--tabbar-bar-top-margin' },
-      { label: 'space below tabs', groupKey: 'bar-bottom-padding', variable: '--tabbar-bar-bottom-padding' },
+      // Consumed via `padding-bottom: var(--tabbar-bar-bottom-padding)` — a
+      // one-axis read. Splitting would produce top/left/right values that have
+      // nowhere to render.
+      { label: 'space below tabs', groupKey: 'bar-bottom-padding', variable: '--tabbar-bar-bottom-padding', splittable: false },
       { label: 'space under divider', groupKey: 'bar-bottom-margin', variable: '--tabbar-bar-bottom-margin' },
       { label: 'tab gap', groupKey: 'tab-gap', variable: '--tabbar-tab-gap' },
     ],
@@ -81,10 +84,10 @@
 </script>
 
 <script lang="ts">
-  import TabBar from '../components/TabBar.svelte';
+  import TabBar from '../../system/components/TabBar.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 selectedDemoTab = $state('overview');
@@ -102,7 +105,7 @@
   ) as Record<string, Token[]>);
 </script>
 
-<ComponentEditorBase {component} title="Tab Bar" description="Tab navigation with icon support and disabled state. Import from <code>components/TabBar.svelte</code>" tokens={allTokens} {linked}>
+<ComponentEditorBase {component} title="Tab Bar" description="Tab navigation with icon support and disabled state." tokens={allTokens} {linked}>
   <VariantGroup
     name="tabbar"
     title="Tab Bar"
@@ -115,13 +118,7 @@
         {@const forceClass = activeState === 'hover tab' ? 'force-hover' : ''}
       <TabBar tabs={demoTabs} selectedTab={selectedDemoTab} class={forceClass} on:tabChange={(e) => (selectedDemoTab = e.detail)} />
       <div class="tab-content-demo">
-        {#if selectedDemoTab === 'overview'}
-          <p style="margin: 0;">Overview tab content</p>
-        {:else if selectedDemoTab === 'details'}
-          <p style="margin: 0;">Details tab content</p>
-        {:else if selectedDemoTab === 'settings'}
-          <p style="margin: 0;">Settings tab content</p>
-        {/if}
+        <p style="margin: 0;">placeholder tab content</p>
       </div>
           {/snippet}
     </VariantGroup>
@@ -129,11 +126,9 @@
 
 <style>
   .tab-content-demo {
+    width: 100%;
     padding: var(--space-16);
     color: var(--ui-text-secondary);
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
-    border-top: none;
-    border-radius: 0 0 var(--radius-md) var(--radius-md);
   }
 </style>

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

@@ -3,15 +3,10 @@
 
   export const component = 'table';
 
-  // Border colors and widths are linkable across wrapper/header/row/column so
-  // a user can lock "all lines on the table" to the same swatch + weight with
-  // one move, then break out individual surfaces when needed. Every other
-  // groupKey is slot-unique so header/cell/stripe stay independent — header bg
-  // vs zebra stripe, header pad vs cell pad, header text vs cell text all
-  // serve different visual roles. (Sharing a groupKey would silently declare
-  // them as siblings without surfacing the link in the LinkedBlock.)
+  // Shared border/width groupKeys link all table lines; other groupKeys are slot-unique to keep surfaces independent.
   const states: Record<string, Token[]> = {
     wrapper: [
+      { label: 'surface color', groupKey: 'wrapper-surface', variable: '--table-default-surface' },
       { label: 'border color', canBeLinked: true, groupKey: 'border', variable: '--table-default-border' },
       { label: 'border width', canBeLinked: true, groupKey: 'width', variable: '--table-default-border-width' },
       { label: 'corner radius', groupKey: 'radius', variable: '--table-default-radius' },
@@ -27,9 +22,10 @@
       { label: 'padding', groupKey: 'cell-padding', variable: '--table-default-cell-padding' },
     ],
     row: [
+      { label: 'surface color', groupKey: 'row-surface', variable: '--table-default-row-surface' },
+      { label: 'stripe surface', groupKey: 'row-stripe-surface', variable: '--table-default-row-stripe-surface' },
       { label: 'divider color', canBeLinked: true, groupKey: 'border', variable: '--table-default-row-divider' },
       { label: 'divider width', canBeLinked: true, groupKey: 'width', variable: '--table-default-row-divider-width' },
-      { label: 'stripe surface', groupKey: 'row-stripe-surface', variable: '--table-default-row-stripe-surface' },
     ],
     column: [
       { label: 'divider color', canBeLinked: true, groupKey: 'border', variable: '--table-default-column-divider' },
@@ -37,8 +33,7 @@
     ],
   };
 
-  // State name is the context label so the LinkageChart rows read as
-  // wrapper/header/row/column for each shared groupKey.
+  // State name as context label so LinkageChart rows read wrapper/header/row/column.
   const linkableContexts = new Map<string, string>(
     Object.entries(states).flatMap(([state, tokens]) =>
       tokens
@@ -65,11 +60,7 @@
       lineHeightVariable: '--table-default-cell-line-height',
     }],
   };
-  // Slot-unique groupKeys keep header text and cell text independent. The
-  // generic `buildTypeGroupColorTokens` helper isn't used here because it
-  // derives groupKey from the variable's last-dash suffix, which collapses
-  // both `--table-...-header-text` and `--table-...-cell-text` onto a shared
-  // `text` groupKey — phantom-linking the two slots.
+  // Hand-rolled (not buildTypeGroupColorTokens) because its suffix-derived groupKey would phantom-link header-text and cell-text.
   const typeGroupColorTokens: Token[] = [
     { label: 'color', groupKey: 'header-text', variable: '--table-default-header-text' },
     { label: 'color', groupKey: 'cell-text', variable: '--table-default-cell-text' },
@@ -93,10 +84,10 @@
 </script>
 
 <script lang="ts">
-  import Table from '../components/Table.svelte';
+  import Table from '../../system/components/Table.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));
@@ -105,7 +96,7 @@
   ) as Record<string, Token[]>);
 </script>
 
-<ComponentEditorBase {component} title="Table" description="Styled wrapper around <code>&lt;table&gt;</code> with horizontal scroll on narrow viewports. Import from <code>components/Table.svelte</code>" tokens={allTokens} {linked}>
+<ComponentEditorBase {component} title="Table" description="Styled wrapper around <code>&lt;table&gt;</code> with horizontal scroll on narrow viewports." tokens={allTokens} {linked}>
   <VariantGroup name="table" title="Table" states={visibleStates} {typeGroups} {component}>
     <Table>
       <table>

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

@@ -40,35 +40,14 @@
 </script>
 
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import Tooltip from '../components/Tooltip.svelte';
+  import Tooltip from '../../system/components/Tooltip.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
-  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
-  import { setCssVar } from '../lib/cssVarSync';
 
-  const bgVar = '--backdrop-tooltip-surface';
   const hintText = 'Helpful Hint';
-
-  onMount(() => {
-    if (!document.documentElement.style.getPropertyValue(bgVar)) {
-      setCssVar(bgVar, 'var(--surface-canvas)');
-    }
-  });
 </script>
 
-<ComponentEditorBase {component} title="Tooltip" description="Hover tooltip with configurable position. Import from <code>components/Tooltip.svelte</code>" tokens={allTokens}>
-  {#snippet config()}
-  
-      <label class="backdrop-config">
-        <span>Sample background</span>
-        <div class="picker-slot">
-          <UIPaletteSelector variable={bgVar} />
-        </div>
-      </label>
-    
-  {/snippet}
+<ComponentEditorBase {component} title="Tooltip" description="Hover tooltip with configurable position." tokens={allTokens}>
   <VariantGroup
     name="tooltip"
     title="Tooltip"
@@ -76,16 +55,14 @@
     {typeGroups}
     {component}
   >
-    <ShadowBackdrop mode="color" colorVariable={bgVar}>
-      <div class="tooltip-demo-row">
-        <Tooltip text={hintText} open>
-          <span class="tooltip-demo-target">Helpful Hint</span>
-        </Tooltip>
-        <Tooltip text={hintText} position="bottom">
-          <span class="tooltip-demo-target">Hover me</span>
-        </Tooltip>
-      </div>
-    </ShadowBackdrop>
+    <div class="tooltip-demo-row">
+      <Tooltip text={hintText} open>
+        <span class="tooltip-demo-target">Helpful Hint</span>
+      </Tooltip>
+      <Tooltip text={hintText} position="bottom">
+        <span class="tooltip-demo-target">Hover me</span>
+      </Tooltip>
+    </div>
   </VariantGroup>
 </ComponentEditorBase>
 
@@ -103,22 +80,9 @@
     padding: var(--space-8) var(--space-16);
     color: var(--ui-text-secondary);
     font-size: var(--font-size-sm);
-    border: 1px dashed var(--ui-border-subtle);
+    border: 1px dashed var(--ui-border-low);
     border-radius: var(--radius-sm);
     background: transparent;
   }
 
-  .backdrop-config {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-8);
-  }
-
-  .picker-slot {
-    min-width: 8rem;
-  }
-
-  .picker-slot :global(.ui-token-selector) {
-    width: 100%;
-  }
 </style>

package/src/editor/component-editor/editors.d.ts

@@ -0,0 +1,10 @@
+// Augment the global `*.svelte` ambient module to expose the named
+// `allTokens` export that each `<Name>Editor.svelte` declares in its
+// `<script module>` block. The default ambient (shipped via
+// node_modules/svelte/types/index.d.ts) declares only a default export,
+// so without this augmentation tsc fails on the named imports in
+// registry.ts.
+
+declare module '*.svelte' {
+  export const allTokens: import('./scaffolding/types').Token[];
+}

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

@@ -9,10 +9,14 @@
     value?: number;
     label?: string;
     size?: number;
+    /** 'horizontal' (default) lays the label, dial, input, and degree mark on a
+     *  single line. 'vertical' stacks the dial above the input — used when the
+     *  dial sits in its own column with a section header providing the label. */
+    orientation?: 'horizontal' | 'vertical';
     onchange?: (payload: { value: number }) => void;
   }
 
-  let { value = $bindable(0), label = 'Angle', size = 44, onchange }: Props = $props();
+  let { value = $bindable(0), label = 'Angle', size = 44, orientation = 'horizontal', onchange }: Props = $props();
 
   let dialEl: HTMLDivElement | undefined = $state();
   let dragging = $state(false);
@@ -63,8 +67,8 @@
   let indicatorTransform = $derived(`rotate(${value}deg)`);
 </script>
 
-<div class="angle-dial-row">
-  {#if label}
+<div class="angle-dial-row" class:vertical={orientation === 'vertical'}>
+  {#if label && orientation === 'horizontal'}
     <span class="dial-label">{label}:</span>
   {/if}
   <div
@@ -90,16 +94,18 @@
     <div class="indicator" style="transform: {indicatorTransform}"></div>
     <div class="hub"></div>
   </div>
-  <input
-    class="num"
-    type="number"
-    min="0"
-    max="360"
-    step="1"
-    value={value}
-    onchange={onInputChange}
-  />
-  <span class="suffix">°</span>
+  <div class="num-row" style={orientation === 'vertical' ? `width: ${size}px;` : ''}>
+    <input
+      class="num"
+      type="number"
+      min="0"
+      max="360"
+      step="1"
+      value={value}
+      onchange={onInputChange}
+    />
+    <span class="suffix">°</span>
+  </div>
 </div>
 
 <style>
@@ -110,6 +116,39 @@
     font-size: var(--ui-font-size-sm);
     color: var(--ui-text-secondary);
   }
+  /* Stacked layout: dial centered, input + degree mark on the row below. Used
+     when the dial sits in its own grid column with an external section label. */
+  .angle-dial-row.vertical {
+    flex-direction: column;
+    align-items: center;
+    gap: var(--ui-space-6);
+  }
+
+  .num-row {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+  }
+
+  /* Vertical mode: lock the row to the dial's width and overlay the degree
+     mark inside the input's right padding so the input fills the column
+     instead of the row growing past the dial. */
+  .angle-dial-row.vertical .num-row {
+    position: relative;
+    display: block;
+  }
+  .angle-dial-row.vertical .num {
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 1.25rem;
+  }
+  .angle-dial-row.vertical .suffix {
+    position: absolute;
+    right: var(--ui-space-6);
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
 
   .dial-label {
     user-select: none;
@@ -119,7 +158,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 +206,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);