@motion-proto/live-tokens 0.3.9 → 0.6.0

package/README.md

@@ -127,13 +127,56 @@ The components carry their own design-token aliases (declared inside each `.svel
 
 ### Styles
 
+Editor chrome (`ui-editor.css`, `ui-form-controls.css`) and the icon font are
+**auto-loaded by the editor pages themselves**; you don't import them. The
+only stylesheet a consumer needs is a `tokens.css` declaring the design-token
+CSS variables on `:root`.
+
+You can use the package's default as a starting point:
+
+```ts
+import '@motion-proto/live-tokens/starter/tokens.css';
+import '@motion-proto/live-tokens/starter/site.css';   // optional: themed h1/p/a styles
+import '@motion-proto/live-tokens/starter/fonts.css';  // optional: Fraunces + Manrope @font-face
+```
+
+…or copy `node_modules/@motion-proto/live-tokens/src/styles/tokens.css` into
+your project and edit. The editor will seed `themes/default.json` on first
+run and you can promote your edits back into the file.
+
+## Consuming live-tokens from scratch
+
+The minimum a consumer needs after `npm install @motion-proto/live-tokens`:
+
+```ts
+// src/main.ts
+import '@motion-proto/live-tokens/starter/tokens.css';
+import { mount } from 'svelte';
+import App from './App.svelte';
+
+mount(App, { target: document.getElementById('app')! });
+```
+
+```svelte
+<!-- src/App.svelte -->
+<script lang="ts">
+  import Editor from '@motion-proto/live-tokens/editor';
+</script>
+
+<Editor />
+```
+
 ```ts
-import '@motion-proto/live-tokens/styles/ui-editor.css';
-import '@motion-proto/live-tokens/styles/form-controls.css';
-import '@motion-proto/live-tokens/styles/fonts.css';
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+  plugins: [svelte()],
+});
 ```
 
-You'll also need your own `src/styles/tokens.css` declaring your design tokens as CSS variables on `:root`. Start from the package's default (`node_modules/@motion-proto/live-tokens/src/styles/tokens.css`) and overlay your overrides — or let the editor seed `themes/default.json` on first run and promote it.
+No `css: 'injected'` workaround, no `optimizeDeps` excludes — `vite build` works as-is. (You'll want the full `themeFileApi` plugin from the Quick install section above when you're ready to persist edits to disk.)
 
 ## Greenfield? Use the starter
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.3.9",
+  "version": "0.6.0",
   "type": "module",
-  "description": "Design token editor with live CSS variable editing. Svelte 4/5 + Vite 5/6/7.",
+  "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 6/7.",
   "keywords": [
     "svelte",
     "vite",
@@ -11,6 +11,7 @@
     "editor"
   ],
   "license": "MIT",
+  "author": "Mark Pearce <mark@motionproto.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/motionproto/live-tokens.git"
@@ -28,11 +29,12 @@
     "src/pages/ComponentEditorPage.svelte",
     "src/pages/ComponentEditorPage.svelte.d.ts",
     "src/styles/ui-editor.css",
-    "src/styles/form-controls.css",
+    "src/styles/ui-form-controls.css",
     "src/styles/fonts.css",
     "src/styles/fonts",
     "src/styles/_padding.scss",
     "src/styles/tokens.css",
+    "src/styles/site.css",
     "src/data",
     "src/assets",
     "dist-plugin",
@@ -76,8 +78,9 @@
       "require": "./dist-plugin/index.cjs"
     },
     "./styles/ui-editor.css": "./src/styles/ui-editor.css",
-    "./styles/form-controls.css": "./src/styles/form-controls.css",
-    "./styles/fonts.css": "./src/styles/fonts.css"
+    "./starter/tokens.css": "./src/styles/tokens.css",
+    "./starter/site.css": "./src/styles/site.css",
+    "./starter/fonts.css": "./src/styles/fonts.css"
   },
   "scripts": {
     "dev": "vite",
@@ -89,26 +92,29 @@
     "build:plugin": "tsup src/vite-plugin/index.ts --out-dir dist-plugin --format esm,cjs --dts --external vite --platform node --clean",
     "build:lib": "npm run build:plugin",
     "deploy:local": "bash scripts/deploy-local.sh",
-    "prepublishOnly": "npm run build:lib"
+    "check:no-style-imports": "node scripts/check-no-style-imports.mjs",
+    "check:editor-font-isolation": "node scripts/check-editor-font-isolation.mjs",
+    "check:smoke-install": "bash scripts/smoke-install.sh",
+    "prepublishOnly": "npm run check:no-style-imports && npm run check:editor-font-isolation && npm run build:lib && npm run check:smoke-install"
   },
   "peerDependencies": {
     "sass": "^1.0",
-    "svelte": "^4.2 || ^5",
+    "svelte": "^5",
     "svelte-preprocess": "^6.0",
-    "vite": "^5 || ^6 || ^7"
+    "vite": "^6 || ^7"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tsconfig/svelte": "^5.0.8",
     "@types/node": "^24.12.0",
     "happy-dom": "^20.9.0",
     "sass": "^1.98.0",
-    "svelte": "^4.2.20",
-    "svelte-check": "^3.8.6",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.8",
     "svelte-preprocess": "^6.0.3",
     "tsup": "^8.5.1",
     "typescript": "~5.9.3",
-    "vite": "^5.4.21",
+    "vite": "^7.3.3",
     "vitest": "^4.1.4"
   },
   "dependencies": {

package/src/component-editor/BadgeEditor.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';
   import { badgeVariants } from '../components/Badge.svelte';
@@ -69,18 +69,18 @@
   import ShadowBackdropControls from './scaffolding/ShadowBackdropControls.svelte';
   import UIRadioGroup from '../ui/UIRadioGroup.svelte';
 
-  $: 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));
 
-  let bgMode: 'image' | 'color' = 'image';
+  let bgMode: 'image' | 'color' = $state('image');
   const bgVar = '--backdrop-badge-surface';
 
   // Preview-only props for Badge's floating/anchor/flush features (not persisted).
   // For corner-anchored use, prefer the dedicated CornerBadge component; Badge.floating
   // is the low-level escape hatch for off-corner floating placements.
-  let floating: boolean = false;
-  let flush: boolean = false;
-  let anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'bottom-right';
+  let floating: boolean = $state(false);
+  let flush: boolean = $state(false);
+  let anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = $state('bottom-right');
   const anchorOptions = [
     { value: 'top-left' as const, label: 'TL' },
     { value: 'top-right' as const, label: 'TR' },
@@ -90,23 +90,25 @@
 </script>
 
 <ComponentEditorBase {component} title="Badge" description="Pill-shaped badges with color variants. Import from <code>components/Badge.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
-  <svelte:fragment slot="config">
-    <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
-    <label class="float-toggle">
-      <input type="checkbox" bind:checked={floating} />
-      <span>Floating preview</span>
-    </label>
-    {#if floating}
+  {#snippet config()}
+  
+      <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
       <label class="float-toggle">
-        <input type="checkbox" bind:checked={flush} />
-        <span>Flush corner</span>
+        <input type="checkbox" bind:checked={floating} />
+        <span>Floating preview</span>
       </label>
-      <div class="anchor-control">
-        <span>Anchor</span>
-        <UIRadioGroup bind:value={anchor} name="badge-anchor" options={anchorOptions} />
-      </div>
-    {/if}
-  </svelte:fragment>
+      {#if floating}
+        <label class="float-toggle">
+          <input type="checkbox" bind:checked={flush} />
+          <span>Flush corner</span>
+        </label>
+        <div class="anchor-control">
+          <span>Anchor</span>
+          <UIRadioGroup bind:value={anchor} name="badge-anchor" options={anchorOptions} />
+        </div>
+      {/if}
+    
+  {/snippet}
   {#each variants as v}
     <VariantGroup
       name={v}

package/src/component-editor/CalloutEditor.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';
   import { calloutVariants } from '../components/Callout.svelte';
@@ -76,8 +76,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));
 
   const sample: Record<Variant, { label: string; message: string }> = {
     info: { label: 'Note.', message: 'This is contextual information you should know about.' },

package/src/component-editor/CardEditor.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';
 
@@ -127,46 +127,50 @@
   import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
   import ShadowBackdropControls from './scaffolding/ShadowBackdropControls.svelte';
 
-  $: 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[]>);
 
-  let hoverEnabled = true;
-  let bgMode: 'image' | 'color' = 'image';
+  let hoverEnabled = $state(true);
+  let bgMode: 'image' | 'color' = $state('image');
   const bgVar = '--backdrop-card-surface';
 </script>
 
 <ComponentEditorBase {component} title="Card" description="Generic card with icon, title, and slotted body. Import from <code>components/Card.svelte</code>" tokens={allTokens} {linked}>
-  <svelte:fragment slot="config">
-    <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
-  </svelte:fragment>
+  {#snippet config()}
+  
+      <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
+    
+  {/snippet}
   <VariantGroup
     name="card"
     title="Card"
     states={visibleStates}
     {typeGroups}
     {component}
-    let:activeState
+    
   >
-    <svelte:fragment slot="state-actions" let:stateName>
+    {#snippet stateActions(stateName)}
       {#if stateName === 'hover'}
         <label class="hover-enable">
           <input type="checkbox" bind:checked={hoverEnabled} />
           <span>Use hover</span>
         </label>
       {/if}
-    </svelte:fragment>
-    {@const previewClass = activeState === 'hover' ? 'force-hover' : (hoverEnabled ? '' : 'no-hover')}
-    <ShadowBackdrop mode={bgMode} colorVariable={bgVar}>
-      <div class="card-demo">
-        <Card title="Card title" class={previewClass}>
-          <p style="margin: 0;">Slotted body content. Hover the card (or switch the editor to the Hover state) to preview hover styling.</p>
-        </Card>
-      </div>
-    </ShadowBackdrop>
-  </VariantGroup>
+    {/snippet}
+    {#snippet children({ activeState })}
+        {@const previewClass = activeState === 'hover' ? 'force-hover' : (hoverEnabled ? '' : 'no-hover')}
+      <ShadowBackdrop mode={bgMode} colorVariable={bgVar}>
+        <div class="card-demo">
+          <Card title="Card title" class={previewClass}>
+            <p style="margin: 0;">Slotted body content. Hover the card (or switch the editor to the Hover state) to preview hover styling.</p>
+          </Card>
+        </div>
+      </ShadowBackdrop>
+          {/snippet}
+    </VariantGroup>
 </ComponentEditorBase>
 
 <style>

package/src/component-editor/CollapsibleSectionEditor.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';
 
@@ -125,11 +125,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));
 
-  $: 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="Collapsible Section" description="Expandable section with chevron toggle. Variants: chromeless, divider, container. Import from <code>components/CollapsibleSection.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
@@ -141,27 +141,29 @@
       typeGroups={variantTypeGroups(v)}
       {component}
       siblings={buildSiblings(VARIANTS, v, variantStates, variantTypeGroups)}
-      let:activeState
+      
     >
-      {@const isExpanded = activeState === 'expanded'}
-      {@const isFrame = activeState === 'frame'}
-      {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
-      {@const forceActive = activeState === 'active'}
-      <CollapsibleSection
-        variant={v}
-        label="Click to expand"
-        expanded={isExpanded}
-        active={forceActive}
-        class={forceClass}
-      >
-        <p style="margin: 0; color: var(--text-secondary);">
-          {#if isFrame}
-            (Frame) — outer chrome only; expand the section to see content area styling.
-          {:else}
-            This content is revealed when the section is expanded. Any content can go here.
-          {/if}
-        </p>
-      </CollapsibleSection>
-    </VariantGroup>
+      {#snippet children({ activeState })}
+            {@const isExpanded = activeState === 'expanded'}
+        {@const isFrame = activeState === 'frame'}
+        {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
+        {@const forceActive = activeState === 'active'}
+        <CollapsibleSection
+          variant={v}
+          label="Click to expand"
+          expanded={isExpanded}
+          active={forceActive}
+          class={forceClass}
+        >
+          <p style="margin: 0; color: var(--text-secondary);">
+            {#if isFrame}
+              (Frame) — outer chrome only; expand the section to see content area styling.
+            {:else}
+              This content is revealed when the section is expanded. Any content can go here.
+            {/if}
+          </p>
+        </CollapsibleSection>
+                {/snippet}
+        </VariantGroup>
   {/each}
 </ComponentEditorBase>

package/src/component-editor/CornerBadgeEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import type { Token } from './scaffolding/types';
   import { badgeVariants } from '../components/Badge.svelte';
 
@@ -65,10 +65,10 @@
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import demoImageUrl from '../assets/newspaper.webp';
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
-  $: visibleStates = Object.fromEntries(
+  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[]>;
+  ) as Record<string, Token[]>);
 
   const bgVar = '--backdrop-cornerbadge-surface';
 
@@ -78,7 +78,7 @@
     }
   });
 
-  let anchor: CornerAnchor = 'bottom-right';
+  let anchor: CornerAnchor = $state('bottom-right');
   const anchorGrid: ReadonlyArray<{ value: CornerAnchor; icon: string; label: string }> = [
     { value: 'top-left',     icon: 'fas fa-arrow-up-left',     label: 'Top left' },
     { value: 'top-right',    icon: 'fas fa-arrow-up-right',    label: 'Top right' },
@@ -86,42 +86,44 @@
     { value: 'bottom-right', icon: 'fas fa-arrow-down-right',  label: 'Bottom right' },
   ];
 
-  let variant: BadgeVariant = 'accent';
+  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}>
-  <svelte:fragment slot="config">
-    <label class="backdrop-config">
-      <span>Sample background</span>
-      <div class="picker-slot">
-        <UIPaletteSelector variable={bgVar} />
+  {#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>
+        <div class="anchor-grid" role="radiogroup" aria-label="Corner badge anchor">
+          {#each anchorGrid as opt (opt.value)}
+            <button
+              type="button"
+              class="anchor-btn"
+              class:checked={anchor === opt.value}
+              role="radio"
+              aria-checked={anchor === opt.value}
+              aria-label={opt.label}
+              title={opt.label}
+              onclick={() => (anchor = opt.value)}
+            >
+              <i class={opt.icon} aria-hidden="true"></i>
+            </button>
+          {/each}
+        </div>
       </div>
-    </label>
-    <div class="control-row">
-      <span>Anchor</span>
-      <div class="anchor-grid" role="radiogroup" aria-label="Corner badge anchor">
-        {#each anchorGrid as opt (opt.value)}
-          <button
-            type="button"
-            class="anchor-btn"
-            class:checked={anchor === opt.value}
-            role="radio"
-            aria-checked={anchor === opt.value}
-            aria-label={opt.label}
-            title={opt.label}
-            on:click={() => (anchor = opt.value)}
-          >
-            <i class={opt.icon} aria-hidden="true"></i>
-          </button>
-        {/each}
+      <div class="control-row">
+        <span>Variant</span>
+        <UIRadioGroup bind:value={variant} name="corner-badge-variant" options={variantOptions} />
       </div>
-    </div>
-    <div class="control-row">
-      <span>Variant</span>
-      <UIRadioGroup bind:value={variant} name="corner-badge-variant" options={variantOptions} />
-    </div>
-  </svelte:fragment>
+    
+  {/snippet}
   <VariantGroup name="cornerbadge" title="Corner Badge" states={visibleStates} {component}>
     <ShadowBackdrop mode="color" colorVariable={bgVar}>
       <div class="corner-stage-wrap">

package/src/component-editor/DialogEditor.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,9 +95,9 @@
   import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
   import ShadowBackdropControls from './scaffolding/ShadowBackdropControls.svelte';
 
-  $: config = $editorState.components.dialog?.config ?? {};
-  $: confirmVariant = (BUTTON_VARIANTS.includes(config[CONFIRM_VAR] as ButtonVariant) ? config[CONFIRM_VAR] : DEFAULT_CONFIRM) as ButtonVariant;
-  $: cancelVariant = (BUTTON_VARIANTS.includes(config[CANCEL_VAR] as ButtonVariant) ? config[CANCEL_VAR] : DEFAULT_CANCEL) as ButtonVariant;
+  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);
+  let cancelVariant = $derived((BUTTON_VARIANTS.includes(config[CANCEL_VAR] as ButtonVariant) ? config[CANCEL_VAR] : DEFAULT_CANCEL) as ButtonVariant);
 
   function setConfirmVariant(e: Event) {
     const v = (e.target as HTMLSelectElement).value;
@@ -108,30 +108,32 @@
     setComponentConfig(component, CANCEL_VAR, v);
   }
 
-  let bgMode: 'image' | 'color' = 'image';
+  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}>
-  <svelte:fragment slot="config">
-    <label>
-      <span>Cancel button (left)</span>
-      <select class="form-select" value={cancelVariant} on:change={setCancelVariant}>
-        {#each BUTTON_VARIANTS as v}
-          <option value={v}>{variantLabel(v)}</option>
-        {/each}
-      </select>
-    </label>
-    <label>
-      <span>Confirm button (right)</span>
-      <select class="form-select" value={confirmVariant} on:change={setConfirmVariant}>
-        {#each BUTTON_VARIANTS as v}
-          <option value={v}>{variantLabel(v)}</option>
-        {/each}
-      </select>
-    </label>
-    <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
-  </svelte:fragment>
+  {#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

package/src/component-editor/ImageEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import type { Token } from './scaffolding/types';
 
   export const component = 'image';
@@ -36,14 +36,16 @@
 </script>
 
 <ComponentEditorBase {component} title="Image" description="Framed image with rounded corners, border, and shadow. Import from <code>components/Image.svelte</code>" tokens={allTokens}>
-  <svelte:fragment slot="config">
-    <label class="backdrop-config">
-      <span>Sample background</span>
-      <div class="picker-slot">
-        <UIPaletteSelector variable={bgVar} />
-      </div>
-    </label>
-  </svelte:fragment>
+  {#snippet config()}
+  
+      <label class="backdrop-config">
+        <span>Sample background</span>
+        <div class="picker-slot">
+          <UIPaletteSelector variable={bgVar} />
+        </div>
+      </label>
+    
+  {/snippet}
   <VariantGroup name="image" title="Image" {states} {component}>
     <ShadowBackdrop mode="color" colorVariable={bgVar}>
       <div class="image-demo-grid">