@motion-proto/live-tokens 0.3.9 → 0.6.0

package/src/component-editor/InlineEditActionsEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import type { Token } from './scaffolding/types';
 
   export const component = 'inlineeditactions';
@@ -45,11 +45,11 @@
   import { editorState } from '../lib/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
-  $: visibleStatesByButton = (btn: Button) => Object.fromEntries(
+  let visibleStatesByButton = $derived((btn: Button) => Object.fromEntries(
     Object.entries(buttonStates(btn)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
-  ) as Record<string, Token[]>;
+  ) 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}>
@@ -59,18 +59,20 @@
       title={btn === 'save' ? 'Save button' : 'Cancel button'}
       states={visibleStatesByButton(btn)}
       {component}
-      let:activeState
+      
     >
-      {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
-      <div class="inline-edit-demo-row">
-        <span style="color: var(--text-secondary);">Editing value...</span>
-        <InlineEditActions
-          onSave={() => {}}
-          onCancel={() => {}}
-          class={forceClass}
-        />
-      </div>
-    </VariantGroup>
+      {#snippet children({ activeState })}
+            {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
+        <div class="inline-edit-demo-row">
+          <span style="color: var(--text-secondary);">Editing value...</span>
+          <InlineEditActions
+            onSave={() => {}}
+            onCancel={() => {}}
+            class={forceClass}
+          />
+        </div>
+                {/snippet}
+        </VariantGroup>
   {/each}
 </ComponentEditorBase>
 

package/src/component-editor/NotificationEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
 
@@ -95,47 +95,49 @@
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import { buildSiblings } from './scaffolding/siblings';
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
-  $: visibleVariantTokens = (v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
+  let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet));
 
   import type { NotificationActions } from '../components/types';
 
-  let dismissible = false;
-  let rightOption: ButtonVariantOption = 'none';
-  let leftOption: ButtonVariantOption = 'none';
-  $: actions = ((): NotificationActions => {
+  let dismissible = $state(false);
+  let rightOption: ButtonVariantOption = $state('none');
+  let leftOption: ButtonVariantOption = $state('none');
+  let actions = $derived(((): NotificationActions => {
     const a: NotificationActions = {};
     const right = toVariant(rightOption);
     const left = toVariant(leftOption);
     if (right) a.right = { label: 'Confirm', variant: right, onClick: () => {} };
     if (left) a.left = { label: 'Cancel', variant: left, onClick: () => {} };
     return a;
-  })();
+  })());
 </script>
 
 <ComponentEditorBase {component} title="Notification" description="Contextual feedback notifications with multiple variants. Import from <code>components/Notification.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
-  <svelte:fragment slot="config">
-    <label>
-      <input type="checkbox" bind:checked={dismissible} />
-      <span>Dismissible</span>
-    </label>
-    <label>
-      <span>Right button</span>
-      <select class="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="form-select" bind:value={leftOption}>
-        {#each BUTTON_VARIANT_OPTIONS as v}
-          <option value={v}>{variantLabel(v)}</option>
-        {/each}
-      </select>
-    </label>
-  </svelte:fragment>
+  {#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}
   {#each variants as v}
     <VariantGroup
       name={v}

package/src/component-editor/ProgressBarEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
 
@@ -83,8 +83,8 @@
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import { buildSiblings } from './scaffolding/siblings';
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
-  $: visibleVariantTokens = (v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
+  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}>

package/src/component-editor/RadioButtonEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
 
@@ -88,13 +88,13 @@
   import { editorState } from '../lib/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
-  let selectedRadio = 'option-b';
+  let selectedRadio = $state('option-b');
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
-  $: visibleStates = Object.fromEntries(
+  let visibleStates = $derived(Object.fromEntries(
     Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
-  ) as Record<string, Token[]>;
+  ) 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}>
@@ -104,31 +104,33 @@
     states={visibleStates}
     {typeGroups}
     {component}
-    let:activeState
+    
   >
-    {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
-    {@const forceActive = activeState === 'active'}
-    <div class="radio-demo-row">
-      <RadioButton
-        label="Defense"
-        active={forceActive || selectedRadio === 'option-a'}
-        class={forceClass}
-        on:click={() => (selectedRadio = 'option-a')}
-      />
-      <RadioButton
-        label="Economy"
-        active={forceActive || selectedRadio === 'option-b'}
-        class={forceClass}
-        on:click={() => (selectedRadio = 'option-b')}
-      />
-      <RadioButton
-        label="Loyalty"
-        active={forceActive || selectedRadio === 'option-c'}
-        class={forceClass}
-        on:click={() => (selectedRadio = 'option-c')}
-      />
-    </div>
-  </VariantGroup>
+    {#snippet children({ activeState })}
+        {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
+      {@const forceActive = activeState === 'active'}
+      <div class="radio-demo-row">
+        <RadioButton
+          label="Defense"
+          active={forceActive || selectedRadio === 'option-a'}
+          class={forceClass}
+          on:click={() => (selectedRadio = 'option-a')}
+        />
+        <RadioButton
+          label="Economy"
+          active={forceActive || selectedRadio === 'option-b'}
+          class={forceClass}
+          on:click={() => (selectedRadio = 'option-b')}
+        />
+        <RadioButton
+          label="Loyalty"
+          active={forceActive || selectedRadio === 'option-c'}
+          class={forceClass}
+          on:click={() => (selectedRadio = 'option-c')}
+        />
+      </div>
+          {/snippet}
+    </VariantGroup>
 </ComponentEditorBase>
 
 <style>

package/src/component-editor/SectionDividerEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { buildSiblings } from './scaffolding/siblings';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
 
@@ -133,9 +133,9 @@
   import { setCssVar } from '../lib/cssVarSync';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
-  let testTitle = 'Section Title';
-  let showDescription = true;
-  let descriptionText = 'This text is meant to provide additional context or meaning.';
+  let testTitle = $state('Section Title');
+  let showDescription = $state(true);
+  let descriptionText = $state('This text is meant to provide additional context or meaning.');
 
   const bgVar = '--backdrop-sectiondivider-surface';
 
@@ -145,34 +145,36 @@
     }
   });
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
   // The gradient tokens are owned by GradientCard, so the property grid only
   // shows the frame tokens (padding/radius/outline). Gradient tokens still
   // live in `allTokens` so they participate in reset and the registry.
-  $: visibleVariantTokens = (v: Variant) => withLinkedDisabled(frameTokens(v), linked.varSet);
+  let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(frameTokens(v), linked.varSet));
 </script>
 
 <ComponentEditorBase {component} title="Section Divider" description="Full-width section banner with display font and palette variants. Import from <code>components/SectionDivider.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
-  <svelte:fragment slot="config">
-    <label class="text-field">
-      <span>Test title</span>
-      <input type="text" bind:value={testTitle} placeholder="Section Title" />
-    </label>
-    <label class="checkbox-field">
-      <input type="checkbox" bind:checked={showDescription} />
-      <span>Show description</span>
-    </label>
-    <label class="text-field text-field-wide">
-      <span>Description text</span>
-      <input type="text" bind:value={descriptionText} placeholder="Description text" />
-    </label>
-    <label class="backdrop-config">
-      <span>Sample background</span>
-      <div class="picker-slot">
-        <UIPaletteSelector variable={bgVar} />
-      </div>
-    </label>
-  </svelte:fragment>
+  {#snippet config()}
+  
+      <label class="text-field">
+        <span>Test title</span>
+        <input type="text" bind:value={testTitle} placeholder="Section Title" />
+      </label>
+      <label class="checkbox-field">
+        <input type="checkbox" bind:checked={showDescription} />
+        <span>Show description</span>
+      </label>
+      <label class="text-field text-field-wide">
+        <span>Description text</span>
+        <input type="text" bind:value={descriptionText} placeholder="Description text" />
+      </label>
+      <label class="backdrop-config">
+        <span>Sample background</span>
+        <div class="picker-slot">
+          <UIPaletteSelector variable={bgVar} />
+        </div>
+      </label>
+    
+  {/snippet}
   {#each variants as v}
     <VariantGroup
       name={v.key}
@@ -194,10 +196,10 @@
           description={showDescription ? descriptionText : undefined}
         />
       </ShadowBackdrop>
-      <svelte:fragment slot="composite-controls">
+      {#snippet compositeControls(_stateName)}
         <span class="gradient-section-label">Gradient</span>
         <GradientCard {component} prefix={`--sectiondivider-${v.key}`} />
-      </svelte:fragment>
+      {/snippet}
     </VariantGroup>
   {/each}
 </ComponentEditorBase>

package/src/component-editor/SegmentedControlEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { buildTypeGroupTokens, buildTypeGroupShareableContexts } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
 
@@ -113,42 +113,46 @@
     { value: 'option-2', label: 'Option 2', icon: 'fas fa-check' },
     { value: 'option-3', label: 'Option 3', icon: 'fas fa-heart' },
   ];
-  let showIcons = true;
-  $: previewSegments = showIcons ? segments : segments.map((s) => ({ ...s, icon: undefined }));
+  let showIcons = $state(true);
+  let previewSegments = $derived(showIcons ? segments : segments.map((s) => ({ ...s, icon: undefined })));
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
-  $: visibleStates = Object.fromEntries(
+  let visibleStates = $derived(Object.fromEntries(
     Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
-  ) as Record<string, Token[]>;
+  ) as Record<string, Token[]>);
 </script>
 
 <ComponentEditorBase {component} title="Segmented Control" description="A connected set of buttons for toggling between mutually exclusive options." tokens={allTokens} {linked}>
-  <svelte:fragment slot="config">
-    <label>
-      <input type="checkbox" bind:checked={showIcons} />
-      <span>Show icons</span>
-    </label>
-  </svelte:fragment>
+  {#snippet config()}
+  
+      <label>
+        <input type="checkbox" bind:checked={showIcons} />
+        <span>Show icons</span>
+      </label>
+    
+  {/snippet}
   <VariantGroup
     name="segmentedcontrol"
     title="Segmented Control"
     states={visibleStates}
     {typeGroups}
     {component}
-    let:activeState
+    
   >
-    {@const previewValue = activeState === 'selected option' ? 'option-2' : ''}
-    {@const previewForceHover = activeState === 'hover option' ? 'option-1' : null}
-    {@const previewDisabled = activeState === 'disabled option'}
-    <div>
-      <SegmentedControl
-        segments={previewSegments}
-        value={previewValue}
-        forceHoverValue={previewForceHover}
-        disabled={previewDisabled}
-      />
-    </div>
-  </VariantGroup>
+    {#snippet children({ activeState })}
+        {@const previewValue = activeState === 'selected option' ? 'option-2' : ''}
+      {@const previewForceHover = activeState === 'hover option' ? 'option-1' : null}
+      {@const previewDisabled = activeState === 'disabled option'}
+      <div>
+        <SegmentedControl
+          segments={previewSegments}
+          value={previewValue}
+          forceHoverValue={previewForceHover}
+          disabled={previewDisabled}
+        />
+      </div>
+          {/snippet}
+    </VariantGroup>
 </ComponentEditorBase>
 

package/src/component-editor/StandardButtonsEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { buildSiblings } from './scaffolding/siblings';
   import type { Token } from './scaffolding/types';
 
@@ -75,27 +75,29 @@
   import { editorState, setComponentAlias } from '../lib/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
-  $: shimmerRef = $editorState.components.button?.aliases['--button-shimmer'];
-  $: shimmerEnabled = !(shimmerRef?.kind === 'token' && shimmerRef.name === '--shimmer-off');
+  let shimmerRef = $derived($editorState.components.button?.aliases['--button-shimmer']);
+  let shimmerEnabled = $derived(!(shimmerRef?.kind === 'token' && shimmerRef.name === '--shimmer-off'));
 
-  function handleShimmerChange(e: CustomEvent<boolean>) {
-    setComponentAlias('button', '--button-shimmer', { kind: 'token', name: e.detail ? '--shimmer-on' : '--shimmer-off' });
+  function handleShimmerChange(checked: boolean) {
+    setComponentAlias('button', '--button-shimmer', { kind: 'token', name: checked ? '--shimmer-on' : '--shimmer-off' });
   }
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
-  $: visibleVariantStates = (v: Variant) => Object.fromEntries(
+  let visibleVariantStates = $derived((v: Variant) => Object.fromEntries(
     Object.entries(variantStates(v)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
-  ) as Record<string, Token[]>;
+  ) 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}>
-  <svelte:fragment slot="config">
-    <label>
-      <span>Hover shimmer</span>
-      <Toggle checked={shimmerEnabled} on:change={handleShimmerChange} />
-    </label>
-  </svelte:fragment>
+  {#snippet config()}
+  
+      <label>
+        <span>Hover shimmer</span>
+        <Toggle checked={shimmerEnabled} onchange={handleShimmerChange} />
+      </label>
+    
+  {/snippet}
   {#each variants as v}
     <VariantGroup
       name={v}
@@ -104,36 +106,38 @@
       {component}
       columns={2}
       siblings={buildSiblings(variants, v, variantStates)}
-      let:activeState
+      
     >
-      {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
-      {@const isDisabled = activeState === 'disabled'}
-      <div class="size-row">
-        <div class="size-section">
-          <span class="size-label">size="default"</span>
-          <div class="button-showcase-grid">
-            <div class="button-showcase-item">
-              <Button variant={v} disabled={isDisabled} class={forceClass}>{v.charAt(0).toUpperCase() + v.slice(1)}</Button>
-            </div>
-            <div class="button-showcase-item">
-              <Button variant={v} icon="fas fa-star" iconPosition="left" disabled={isDisabled} class={forceClass}>With Icon</Button>
+      {#snippet children({ activeState })}
+            {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
+        {@const isDisabled = activeState === 'disabled'}
+        <div class="size-row">
+          <div class="size-section">
+            <span class="size-label">size="default"</span>
+            <div class="button-showcase-grid">
+              <div class="button-showcase-item">
+                <Button variant={v} disabled={isDisabled} class={forceClass}>{v.charAt(0).toUpperCase() + v.slice(1)}</Button>
+              </div>
+              <div class="button-showcase-item">
+                <Button variant={v} icon="fas fa-star" iconPosition="left" disabled={isDisabled} class={forceClass}>With Icon</Button>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="size-divider"></div>
-        <div class="size-section">
-          <span class="size-label">size="small"</span>
-          <div class="button-showcase-grid">
-            <div class="button-showcase-item">
-              <Button variant={v} size="small" disabled={isDisabled} class={forceClass}>{v.charAt(0).toUpperCase() + v.slice(1)}</Button>
-            </div>
-            <div class="button-showcase-item">
-              <Button variant={v} size="small" icon="fas fa-star" iconPosition="left" disabled={isDisabled} class={forceClass}>With Icon</Button>
+          <div class="size-divider"></div>
+          <div class="size-section">
+            <span class="size-label">size="small"</span>
+            <div class="button-showcase-grid">
+              <div class="button-showcase-item">
+                <Button variant={v} size="small" disabled={isDisabled} class={forceClass}>{v.charAt(0).toUpperCase() + v.slice(1)}</Button>
+              </div>
+              <div class="button-showcase-item">
+                <Button variant={v} size="small" icon="fas fa-star" iconPosition="left" disabled={isDisabled} class={forceClass}>With Icon</Button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </VariantGroup>
+                {/snippet}
+        </VariantGroup>
   {/each}
 </ComponentEditorBase>
 

package/src/component-editor/TabBarEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
 
@@ -87,7 +87,7 @@
   import { editorState } from '../lib/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
-  let selectedDemoTab = 'overview';
+  let selectedDemoTab = $state('overview');
   const demoTabs = [
     { id: 'overview', label: 'Overview', icon: 'fas fa-home' },
     { id: 'details', label: 'Details', icon: 'fas fa-info-circle' },
@@ -95,11 +95,11 @@
     { id: 'disabled', label: 'Disabled', icon: 'fas fa-ban', disabled: true },
   ];
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
-  $: visibleStates = Object.fromEntries(
+  let visibleStates = $derived(Object.fromEntries(
     Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
-  ) as Record<string, Token[]>;
+  ) 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}>
@@ -109,20 +109,22 @@
     states={visibleStates}
     {typeGroups}
     {component}
-    let:activeState
+    
   >
-    {@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}
-    </div>
-  </VariantGroup>
+    {#snippet children({ activeState })}
+        {@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}
+      </div>
+          {/snippet}
+    </VariantGroup>
 </ComponentEditorBase>
 
 <style>

package/src/component-editor/TableEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import type { Token, TypeGroupConfig } from './scaffolding/types';
 
   export const component = 'table';
@@ -99,10 +99,10 @@
   import { editorState } from '../lib/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
-  $: visibleStates = Object.fromEntries(
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
+  let visibleStates = $derived(Object.fromEntries(
     Object.entries(states).map(([state, tokens]) => [state, withLinkedDisabled(tokens, linked.varSet)]),
-  ) as Record<string, Token[]>;
+  ) 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}>