@motion-proto/live-tokens 0.6.2 → 0.8.0

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

@@ -1,14 +1,10 @@
 <script module lang="ts">
   import type { Token } from './scaffolding/types';
-  import { badgeVariants } from '../components/Badge.svelte';
+  import { badgeVariants } from '../../system/components/Badge.svelte';
 
   export const component = 'cornerbadge';
 
-  // One state per Badge variant. Each variant carries the same five tokens, and
-  // every token has a role-specific groupKey so the LinkedBlock groups
-  // "outer-radius" across variants (not against inner/h-axis/v-axis). Changing
-  // a variant's outer corner radius propagates to the same role on every other
-  // variant when linked; roles within a variant stay independent.
+  // One state per variant; role-specific groupKeys link the same role across variants while keeping roles independent within a variant.
   function variantTokens(v: typeof badgeVariants[number]): Token[] {
     return [
       { label: 'offset from corner', canBeLinked: true, groupKey: 'margin', variable: `--corner-badge-${v}-margin` },
@@ -17,12 +13,7 @@
       { label: 'horizontal-axis radius', canBeLinked: true, groupKey: 'h-axis-radius', variable: `--corner-badge-${v}-h-axis-radius` },
       { label: 'vertical-axis radius', canBeLinked: true, groupKey: 'v-axis-radius', variable: `--corner-badge-${v}-v-axis-radius` },
       { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--corner-badge-${v}-padding` },
-      // Per-side overrides written by the UIPaddingSelector when the user splits
-      // padding. Declared (hidden) so the schema sees them as siblings across
-      // variants — `padding-top` on primary links to `padding-top` on accent, etc.
-      // The themed-padding mixin in CornerBadge.svelte reads them via
-      // `var(--corner-badge-${v}-padding-top, fallback)`; no `:root` default is
-      // needed (test skips `hidden: true` tokens by design — see editorTokens.test.ts).
+      // Hidden per-side overrides for UIPaddingSelector split mode; declared so siblings link across variants.
       { label: 'padding-top', canBeLinked: true, groupKey: 'padding-top', variable: `--corner-badge-${v}-padding-top`, hidden: true },
       { label: 'padding-right', canBeLinked: true, groupKey: 'padding-right', variable: `--corner-badge-${v}-padding-right`, hidden: true },
       { label: 'padding-bottom', canBeLinked: true, groupKey: 'padding-bottom', variable: `--corner-badge-${v}-padding-bottom`, hidden: true },
@@ -33,15 +24,9 @@
       { label: 'line height', canBeLinked: true, groupKey: 'text-line-height', variable: `--corner-badge-${v}-text-line-height` },
     ];
   }
-  const states: Record<string, Token[]> = Object.fromEntries(
-    badgeVariants.map((v) => [v, variantTokens(v)]),
-  );
-
-  export const allTokens: Token[] = Object.values(states).flat();
+  export const allTokens: Token[] = badgeVariants.flatMap((v) => variantTokens(v));
 
-  // Every linkable variable across variants — the LinkedBlock uses this to detect
-  // when ≥2 variants currently agree on an alias for the same groupKey. Variant
-  // name is the context label so the chart rows mirror the variant tab strip.
+  // Linkable vars across variants; variant name as context label so chart rows mirror the tab strip.
   const linkableContexts = new Map<string, string>(
     badgeVariants.flatMap((v) =>
       variantTokens(v)
@@ -49,34 +34,21 @@
         .map((t) => [t.variable, v] as [string, string]),
     ),
   );
+
+  const variantOptions = badgeVariants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
 </script>
 
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import CornerBadge, { type CornerAnchor } from '../components/CornerBadge.svelte';
-  import type { BadgeVariant } from '../components/Badge.svelte';
+  import CornerBadge, { type CornerAnchor } from '../../system/components/CornerBadge.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
-  import UIRadioGroup from '../ui/UIRadioGroup.svelte';
-  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
-  import { setCssVar } from '../lib/cssVarSync';
-  import { editorState } from '../lib/editorStore';
+  import { editorState } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
-  import demoImageUrl from '../assets/newspaper.webp';
+  import { buildSiblings } from './scaffolding/siblings';
+  import demoImageUrl from '../../system/assets/newspaper.webp';
 
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
-  let visibleStates = $derived(Object.fromEntries(
-    badgeVariants.map((v) => [v, withLinkedDisabled(variantTokens(v), linked.varSet)]),
-  ) as Record<string, Token[]>);
-
-  const bgVar = '--backdrop-cornerbadge-surface';
-
-  onMount(() => {
-    if (!document.documentElement.style.getPropertyValue(bgVar)) {
-      setCssVar(bgVar, 'var(--surface-canvas)');
-    }
-  });
+  let visibleVariantTokens = $derived((v: typeof badgeVariants[number]) => withLinkedDisabled(variantTokens(v), linked.varSet));
 
   let anchor: CornerAnchor = $state('bottom-right');
   const anchorGrid: ReadonlyArray<{ value: CornerAnchor; icon: string; label: string }> = [
@@ -85,22 +57,19 @@
     { value: 'bottom-left',  icon: 'fas fa-arrow-down-left',   label: 'Bottom left' },
     { value: 'bottom-right', icon: 'fas fa-arrow-down-right',  label: 'Bottom right' },
   ];
-
-  let variant: BadgeVariant = $state('accent');
-  const variantOptions = badgeVariants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
 </script>
 
-<ComponentEditorBase {component} title="Corner Badge" description="Badge pinned flush to a corner of a positioned ancestor. Composes <code>Badge</code>; adds offset + inner-radius tokens. Import from <code>components/CornerBadge.svelte</code>" tokens={allTokens} {linked}>
-  {#snippet config()}
-  
-      <label class="backdrop-config">
-        <span>Sample background</span>
-        <div class="picker-slot">
-          <UIPaletteSelector variable={bgVar} />
-        </div>
-      </label>
-      <div class="control-row">
-        <span>Anchor</span>
+<ComponentEditorBase {component} title="Corner Badge" description="Badge pinned flush to a corner of a positioned ancestor. Composes <code>Badge</code>; adds offset + inner-radius tokens." tokens={allTokens} {linked} variants={variantOptions}>
+  {#each badgeVariants as v}
+    <VariantGroup
+      name={v}
+      title={v.charAt(0).toUpperCase() + v.slice(1)}
+      states={{ [v]: visibleVariantTokens(v) }}
+      {component}
+      siblings={buildSiblings(badgeVariants, v, (sv) => ({ [sv]: variantTokens(sv) }))}
+    >
+      {#snippet canvasToolbarExtras()}
+        <span class="canvas-toolbar-eyebrow">Anchor</span>
         <div class="anchor-grid" role="radiogroup" aria-label="Corner badge anchor">
           {#each anchorGrid as opt (opt.value)}
             <button
@@ -117,36 +86,25 @@
             </button>
           {/each}
         </div>
-      </div>
-      <div class="control-row">
-        <span>Variant</span>
-        <UIRadioGroup bind:value={variant} name="corner-badge-variant" options={variantOptions} />
-      </div>
-    
-  {/snippet}
-  <VariantGroup name="cornerbadge" title="Corner Badge" states={visibleStates} {component}>
-    <ShadowBackdrop mode="color" colorVariable={bgVar}>
+      {/snippet}
       <div class="corner-stage-wrap">
         <div class="corner-stage">
           <img src={demoImageUrl} alt="" class="corner-stage-image" />
-          <CornerBadge {variant} {anchor}>{variant.charAt(0).toUpperCase() + variant.slice(1)}</CornerBadge>
+          <CornerBadge variant={v} {anchor}>{v.charAt(0).toUpperCase() + v.slice(1)}</CornerBadge>
         </div>
       </div>
-    </ShadowBackdrop>
-  </VariantGroup>
+    </VariantGroup>
+  {/each}
 </ComponentEditorBase>
 
 <style>
-  /* Center the stage in the backdrop so the smaller surface doesn't stretch full-width. */
+  /* Center stage so it doesn't stretch full-width. */
   .corner-stage-wrap {
     display: grid;
     place-items: center;
   }
 
-  /* Anchor parent for the preview — gives CornerBadge a positioned ancestor so it
-     actually pins to a corner, and a visible surface so offset/radius are observable. */
-  /* No overflow:hidden here — the badge needs to be able to extend past the stage
-     (e.g. when the offset is 0 or negative). Rounded corners live on the image. */
+  /* Positioned ancestor for CornerBadge; no overflow:hidden so badge can extend past edges. */
   .corner-stage {
     position: relative;
     width: 380px;
@@ -159,26 +117,6 @@
     border-radius: var(--ui-radius-md);
   }
 
-  .control-row {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-8);
-    font-size: var(--ui-font-size-sm);
-    color: var(--ui-text-secondary);
-  }
-
-  .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%;
-  }
-
   .anchor-grid {
     display: grid;
     grid-template-columns: repeat(2, 1.5rem);
@@ -189,7 +127,7 @@
     display: grid;
     place-items: center;
     padding: 0;
-    border: 1px solid var(--ui-border-subtle, rgba(255, 255, 255, 0.1));
+    border: 1px solid var(--ui-border-low, rgba(255, 255, 255, 0.1));
     border-radius: var(--ui-radius-sm);
     background: transparent;
     color: var(--ui-text-tertiary);
@@ -204,6 +142,6 @@
   .anchor-btn.checked {
     background: var(--ui-surface-active, rgba(255, 255, 255, 0.12));
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-strong, rgba(255, 255, 255, 0.25));
+    border-color: var(--ui-border-higher, rgba(255, 255, 255, 0.25));
   }
 </style>

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);
+    padding-right: var(--ui-space-24);
+    background-color: var(--ui-surface-low);
+    background-position: right var(--ui-space-8) center;
+    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>