@motion-proto/live-tokens 0.3.7 → 0.5.0

package/src/ui/BezierCurveEditor.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { stopPropagation } from 'svelte/legacy';
+
   import {
     type CurveAnchor, type CurveConfig,
     CURVE_H, CURVE_PAD_Y, CURVE_Y_PAD,
@@ -7,15 +9,29 @@
     serializeCurve, deserializeCurve,
   } from './curveEngine';
 
-  export let anchors: CurveAnchor[];
-  export let cfg: CurveConfig;
-  export let stepCount: number;
-  export let padX: number = 0;
-  export let offset: number = 0;
-  export let defaultAnchors: CurveAnchor[] | null = null;
-  export let lockedAnchorIndex: number | null = null;
-  export let onAnchorsChange: (anchors: CurveAnchor[]) => void = () => {};
-  export let onOffsetChange: (offset: number) => void = () => {};
+  interface Props {
+    anchors: CurveAnchor[];
+    cfg: CurveConfig;
+    stepCount: number;
+    padX?: number;
+    offset?: number;
+    defaultAnchors?: CurveAnchor[] | null;
+    lockedAnchorIndex?: number | null;
+    onAnchorsChange?: (anchors: CurveAnchor[]) => void;
+    onOffsetChange?: (offset: number) => void;
+  }
+
+  let {
+    anchors,
+    cfg,
+    stepCount,
+    padX = 0,
+    offset = 0,
+    defaultAnchors = null,
+    lockedAnchorIndex = null,
+    onAnchorsChange = () => {},
+    onOffsetChange = () => {}
+  }: Props = $props();
 
   function resetToDefault() {
     if (!defaultAnchors) return;
@@ -24,14 +40,14 @@
   }
 
   const CURVE_W_DEFAULT = 720;
-  let svgEl: SVGSVGElement | null = null;
-  let dims = CURVE_W_DEFAULT;
-  let shiftActive = false;
+  let svgEl: SVGSVGElement | null = $state(null);
+  let dims = $state(CURVE_W_DEFAULT);
+  let shiftActive = $state(false);
 
   const clipId = `curve-clip-${Math.random().toString(36).slice(2, 8)}`;
 
-  $: w = dims;
-  $: offsetPx = -(offset / ((cfg.yMax - cfg.yMin) * (1 + 2 * CURVE_Y_PAD))) * (CURVE_H - 2 * CURVE_PAD_Y);
+  let w = $derived(dims);
+  let offsetPx = $derived(-(offset / ((cfg.yMax - cfg.yMin) * (1 + 2 * CURVE_Y_PAD))) * (CURVE_H - 2 * CURVE_PAD_Y));
 
   function stepToX(index: number): number {
     return stepCount > 1 ? (index / (stepCount - 1)) * 100 : 50;
@@ -281,21 +297,21 @@
       <!-- Curve content group — offset vertically, clipped -->
       <g transform="translate(0,{offsetPx})" clip-path="url(#{clipId})">
         {#if shiftActive}
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
           <rect
             x="0" y={-CURVE_H} width={w} height={CURVE_H * 3}
             class="shift-overlay"
-            on:pointerdown={handleShiftPointerDown}
-            on:pointermove={handleShiftPointerMove}
-            on:pointerup={handleShiftPointerUp}
+            onpointerdown={handleShiftPointerDown}
+            onpointermove={handleShiftPointerMove}
+            onpointerup={handleShiftPointerUp}
           />
         {:else}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
           <path
             d={buildCurvePath(anchors, cfg, w, padX)}
             class="curve-hit"
-            on:click={insertPointOnPath}
+            onclick={insertPointOnPath}
           />
         {/if}
 
@@ -311,13 +327,13 @@
                 x2={curveXToSvg(pt.x + pt.inDx, w, padX)} y2={curveYToSvg(pt.y + pt.inDy, cfg)}
                 class="handle-line"
               />
-              <!-- svelte-ignore a11y-no-static-element-interactions -->
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
               <circle
                 cx={curveXToSvg(pt.x + pt.inDx, w, padX)} cy={curveYToSvg(pt.y + pt.inDy, cfg)}
                 r="3.5" class="handle-grip"
-                on:pointerdown={(e) => handlePointerDown(e, { kind: 'handleIn', index: i })}
-                on:pointermove={handlePointerMove}
-                on:pointerup={handlePointerUp}
+                onpointerdown={(e) => handlePointerDown(e, { kind: 'handleIn', index: i })}
+                onpointermove={handlePointerMove}
+                onpointerup={handlePointerUp}
               />
             {/if}
             {#if i < anchors.length - 1 && !isCornerAnchor(pt)}
@@ -326,16 +342,16 @@
                 x2={curveXToSvg(pt.x + pt.outDx, w, padX)} y2={curveYToSvg(pt.y + pt.outDy, cfg)}
                 class="handle-line"
               />
-              <!-- svelte-ignore a11y-no-static-element-interactions -->
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
               <circle
                 cx={curveXToSvg(pt.x + pt.outDx, w, padX)} cy={curveYToSvg(pt.y + pt.outDy, cfg)}
                 r="3.5" class="handle-grip"
-                on:pointerdown={(e) => handlePointerDown(e, { kind: 'handleOut', index: i })}
-                on:pointermove={handlePointerMove}
-                on:pointerup={handlePointerUp}
+                onpointerdown={(e) => handlePointerDown(e, { kind: 'handleOut', index: i })}
+                onpointermove={handlePointerMove}
+                onpointerup={handlePointerUp}
               />
             {/if}
-            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
             {#if i === lockedAnchorIndex}
               <path
                 d="M{curveXToSvg(pt.x, w, padX)},{curveYToSvg(pt.y, cfg) - 6} l5,6 l-5,6 l-5,-6 Z"
@@ -346,19 +362,19 @@
                 x={curveXToSvg(pt.x, w, padX) - 4} y={curveYToSvg(pt.y, cfg) - 4}
                 width="8" height="8"
                 class="curve-handle corner"
-                on:pointerdown={(e) => handlePointerDown(e, { kind: 'anchor', index: i })}
-                on:pointermove={handlePointerMove}
-                on:pointerup={handlePointerUp}
-                on:dblclick|stopPropagation={() => toggleAnchorSmooth(i)}
+                onpointerdown={(e) => handlePointerDown(e, { kind: 'anchor', index: i })}
+                onpointermove={handlePointerMove}
+                onpointerup={handlePointerUp}
+                ondblclick={stopPropagation(() => toggleAnchorSmooth(i))}
               />
             {:else}
               <circle
                 cx={curveXToSvg(pt.x, w, padX)} cy={curveYToSvg(pt.y, cfg)}
                 r="5" class="curve-handle"
-                on:pointerdown={(e) => handlePointerDown(e, { kind: 'anchor', index: i })}
-                on:pointermove={handlePointerMove}
-                on:pointerup={handlePointerUp}
-                on:dblclick|stopPropagation={() => toggleAnchorSmooth(i)}
+                onpointerdown={(e) => handlePointerDown(e, { kind: 'anchor', index: i })}
+                onpointermove={handlePointerMove}
+                onpointerup={handlePointerUp}
+                ondblclick={stopPropagation(() => toggleAnchorSmooth(i))}
               />
             {/if}
           {/each}
@@ -373,7 +389,7 @@
         class:active={shiftActive}
         type="button"
         title="Vertical offset"
-        on:click={() => shiftActive = !shiftActive}
+        onclick={() => shiftActive = !shiftActive}
       >
         <svg viewBox="0 0 12 20" class="curve-tool-icon">
           <path d="M6,2 L10,7 L7,7 L7,13 L10,13 L6,18 L2,13 L5,13 L5,7 L2,7 Z" />
@@ -381,8 +397,8 @@
         <span>Offset{offset !== 0 ? ` ${offset > 0 ? '+' : ''}${offset}` : ''}</span>
       </button>
       <span class="curve-hint">&x2325;-click to remove point</span>
-      <button class="curve-tool-btn" type="button" title="Copy curve" on:click={copyToClipboard}>Copy</button>
-      <button class="curve-tool-btn" type="button" title="Paste curve" on:click={pasteFromClipboard}>Paste</button>
+      <button class="curve-tool-btn" type="button" title="Copy curve" onclick={copyToClipboard}>Copy</button>
+      <button class="curve-tool-btn" type="button" title="Paste curve" onclick={pasteFromClipboard}>Paste</button>
     </div>
     <div class="curve-templates">
       {#each curveTemplates as tpl}
@@ -390,7 +406,7 @@
           class="curve-template-btn"
           type="button"
           title={tpl.name}
-          on:click={() => applyTemplate(tpl)}
+          onclick={() => applyTemplate(tpl)}
         >
           <svg viewBox="0 0 20 12" class="curve-template-icon">
             <path d={tpl.icon} />
@@ -402,7 +418,7 @@
           class="curve-tool-btn"
           type="button"
           title="Reset to default"
-          on:click={resetToDefault}
+          onclick={resetToDefault}
         >Reset</button>
       {/if}
     </div>

package/src/ui/ColorEditPanel.svelte

@@ -3,25 +3,46 @@
   import InlineEditActions from '../components/InlineEditActions.svelte';
   import Button from '../components/Button.svelte';
 
-  export let color: string;
-  export let title: string | null = null;
-  export let showRemoveOverride: boolean = false;
-  export let onColorChange: (hex: string) => void = () => {};
-  export let onConfirm: () => void = () => {};
-  export let onCancel: () => void = () => {};
-  export let onRemoveOverride: () => void = () => {};
-  /**
+  
+
+  
+  interface Props {
+    color: string;
+    title?: string | null;
+    showRemoveOverride?: boolean;
+    onColorChange?: (hex: string) => void;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onRemoveOverride?: () => void;
+    /**
    * Optional pointerdown hook for slider drags — lets parents open a store
    * transaction so the whole drag collapses to one undo step. If the parent
    * doesn't route slider writes through the editor store, leave this unset.
    */
-  export let onSliderStart: () => void = () => {};
-
-  // Hue-chroma mode props (for neutral/gray base editing)
-  export let mode: 'hsl' | 'hue-chroma' = 'hsl';
-  export let hue: number = 0;
-  export let chroma: number = 0.04;
-  export let onHueChromaChange: (hue: number, chroma: number) => void = () => {};
+    onSliderStart?: () => void;
+    // Hue-chroma mode props (for neutral/gray base editing)
+    mode?: 'hsl' | 'hue-chroma';
+    hue?: number;
+    chroma?: number;
+    onHueChromaChange?: (hue: number, chroma: number) => void;
+    actions?: import('svelte').Snippet;
+  }
+
+  let {
+    color,
+    title = null,
+    showRemoveOverride = false,
+    onColorChange = () => {},
+    onConfirm = () => {},
+    onCancel = () => {},
+    onRemoveOverride = () => {},
+    onSliderStart = () => {},
+    mode = 'hsl',
+    hue = 0,
+    chroma = 0.04,
+    onHueChromaChange = () => {},
+    actions
+  }: Props = $props();
 
   const hasEyeDropper = typeof window !== 'undefined' && 'EyeDropper' in window;
   const PREVIEW_LIGHTNESS = 0.55;
@@ -59,7 +80,7 @@
 
   // --- HSL mode reactives ---
 
-  $: hsl = hexToHsl(color);
+  let hsl = $derived(hexToHsl(color));
 
   function hueGrad(s: number, l: number): string {
     return `linear-gradient(to right, ${
@@ -83,11 +104,11 @@
 
   // --- Hue-chroma mode reactives ---
 
-  $: previewHex = mode === 'hue-chroma'
+  let previewHex = $derived(mode === 'hue-chroma'
     ? (() => { const c = gamutClamp(PREVIEW_LIGHTNESS, chroma, hue); return oklchToHex(c.l, c.c, c.h); })()
-    : color;
+    : color);
 
-  $: hueGradient = (() => {
+  let hueGradient = $derived((() => {
     const _c = chroma;
     const displayChroma = Math.max(_c, CHROMA_MAX);
     const stops = Array.from({ length: 13 }, (_, i) => {
@@ -96,9 +117,9 @@
       return oklchToHex(c.l, c.c, c.h);
     });
     return `linear-gradient(to right, ${stops.join(',')})`;
-  })();
+  })());
 
-  $: chromaGradient = (() => {
+  let chromaGradient = $derived((() => {
     const _h = hue;
     const stops = Array.from({ length: 8 }, (_, i) => {
       const c = (i / 7) * CHROMA_MAX;
@@ -106,7 +127,7 @@
       return oklchToHex(clamped.l, clamped.c, clamped.h);
     });
     return `linear-gradient(to right, ${stops.join(',')})`;
-  })();
+  })());
 
   // --- Shared ---
 
@@ -127,8 +148,8 @@
     }
   }
 
-  let hexEditing = false;
-  let hexDraft = '';
+  let hexEditing = $state(false);
+  let hexDraft = $state('');
 
   function startHexEdit() {
     hexDraft = previewHex;
@@ -165,7 +186,7 @@
         class="eyedropper-btn"
         type="button"
         title="Pick color from screen"
-        on:click={pickScreenColor}
+        onclick={pickScreenColor}
       ><i class="fas fa-eye-dropper"></i></button>
     {/if}
     {#if title}
@@ -176,20 +197,20 @@
         class="hsl-hex-input"
         type="text"
         bind:value={hexDraft}
-        on:keydown={handleHexKeydown}
-        on:blur={commitHex}
+        onkeydown={handleHexKeydown}
+        onblur={commitHex}
         maxlength="7"
         use:autoFocus
       />
     {:else}
-      <button class="hsl-hex" on:click={startHexEdit} title="Click to edit hex">{previewHex}</button>
+      <button class="hsl-hex" onclick={startHexEdit} title="Click to edit hex">{previewHex}</button>
     {/if}
     {#if mode === 'hue-chroma'}
       <code class="hsl-values">oklch({PREVIEW_LIGHTNESS}, {chroma.toFixed(3)}, {Math.round(hue)})</code>
     {:else}
       <code class="hsl-values">hsl({hsl[0]}, {hsl[1]}%, {hsl[2]}%)</code>
     {/if}
-    <slot name="actions" />
+    {@render actions?.()}
     <div class="hsl-panel-actions">
       {#if showRemoveOverride}
         <Button
@@ -211,9 +232,10 @@
     {#if mode === 'hue-chroma'}
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">H</span>
-        <div class="slider-track" style="background: {hueGradient}" on:pointerdown={onSliderStart}>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="slider-track" style="background: {hueGradient}" onpointerdown={onSliderStart}>
           <input type="range" min="0" max="360" value={hue}
-            on:input={(e) => onHueChromaChange(+e.currentTarget.value, chroma)} />
+            oninput={(e) => onHueChromaChange(+e.currentTarget.value, chroma)} />
         </div>
         <input
           class="hsl-slider-input"
@@ -221,14 +243,15 @@
           min="0"
           max="360"
           value={hue}
-          on:change={(e) => onHueChromaChange(Math.min(360, Math.max(0, +e.currentTarget.value)), chroma)}
+          onchange={(e) => onHueChromaChange(Math.min(360, Math.max(0, +e.currentTarget.value)), chroma)}
         /><span class="hsl-slider-unit">&deg;</span>
       </div>
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">C</span>
-        <div class="slider-track" style="background: {chromaGradient}" on:pointerdown={onSliderStart}>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="slider-track" style="background: {chromaGradient}" onpointerdown={onSliderStart}>
           <input type="range" min="0" max={CHROMA_MAX} step="0.001" value={chroma}
-            on:input={(e) => onHueChromaChange(hue, +e.currentTarget.value)} />
+            oninput={(e) => onHueChromaChange(hue, +e.currentTarget.value)} />
         </div>
         <input
           class="hsl-slider-input chroma-input"
@@ -237,15 +260,16 @@
           max={CHROMA_MAX}
           step="0.001"
           value={chroma.toFixed(3)}
-          on:change={(e) => onHueChromaChange(hue, Math.min(CHROMA_MAX, Math.max(0, +e.currentTarget.value)))}
+          onchange={(e) => onHueChromaChange(hue, Math.min(CHROMA_MAX, Math.max(0, +e.currentTarget.value)))}
         />
       </div>
     {:else}
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">H</span>
-        <div class="slider-track" style="background: {hueGrad(hsl[1], hsl[2])}" on:pointerdown={onSliderStart}>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="slider-track" style="background: {hueGrad(hsl[1], hsl[2])}" onpointerdown={onSliderStart}>
           <input type="range" min="0" max="360" value={hsl[0]}
-            on:input={(e) => updateHsl(0, +e.currentTarget.value)} />
+            oninput={(e) => updateHsl(0, +e.currentTarget.value)} />
         </div>
         <input
           class="hsl-slider-input"
@@ -253,14 +277,15 @@
           min="0"
           max="360"
           value={hsl[0]}
-          on:change={(e) => updateHsl(0, Math.min(360, Math.max(0, +e.currentTarget.value)))}
+          onchange={(e) => updateHsl(0, Math.min(360, Math.max(0, +e.currentTarget.value)))}
         /><span class="hsl-slider-unit">&deg;</span>
       </div>
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">S</span>
-        <div class="slider-track" style="background: {satGrad(hsl[0], hsl[2])}" on:pointerdown={onSliderStart}>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="slider-track" style="background: {satGrad(hsl[0], hsl[2])}" onpointerdown={onSliderStart}>
           <input type="range" min="0" max="100" value={hsl[1]}
-            on:input={(e) => updateHsl(1, +e.currentTarget.value)} />
+            oninput={(e) => updateHsl(1, +e.currentTarget.value)} />
         </div>
         <input
           class="hsl-slider-input"
@@ -268,14 +293,15 @@
           min="0"
           max="100"
           value={hsl[1]}
-          on:change={(e) => updateHsl(1, Math.min(100, Math.max(0, +e.currentTarget.value)))}
+          onchange={(e) => updateHsl(1, Math.min(100, Math.max(0, +e.currentTarget.value)))}
         /><span class="hsl-slider-unit">%</span>
       </div>
       <div class="hsl-slider-row">
         <span class="hsl-slider-label">L</span>
-        <div class="slider-track" style="background: {lightGrad(hsl[0], hsl[1])}" on:pointerdown={onSliderStart}>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="slider-track" style="background: {lightGrad(hsl[0], hsl[1])}" onpointerdown={onSliderStart}>
           <input type="range" min="0" max="100" value={hsl[2]}
-            on:input={(e) => updateHsl(2, +e.currentTarget.value)} />
+            oninput={(e) => updateHsl(2, +e.currentTarget.value)} />
         </div>
         <input
           class="hsl-slider-input"
@@ -283,7 +309,7 @@
           min="0"
           max="100"
           value={hsl[2]}
-          on:change={(e) => updateHsl(2, Math.min(100, Math.max(0, +e.currentTarget.value)))}
+          onchange={(e) => updateHsl(2, Math.min(100, Math.max(0, +e.currentTarget.value)))}
         /><span class="hsl-slider-unit">%</span>
       </div>
     {/if}
@@ -477,6 +503,7 @@
     border-radius: var(--ui-radius-sm);
     padding: var(--ui-space-2) var(--ui-space-4);
     -moz-appearance: textfield;
+    appearance: textfield;
   }
 
   .hsl-slider-input.chroma-input {

package/src/ui/EditorViewSwitcher.svelte

@@ -2,13 +2,17 @@
   import { editorView } from '../lib/editorViewStore';
   import { parentRoute } from '../lib/parentRouteStore';
 
-  export let condensed = false;
+  interface Props {
+    condensed?: boolean;
+  }
+
+  let { condensed = false }: Props = $props();
 
   // On /components the host page is already the components editor — the
   // overlay's components view would just stack on top of it, so disable the
   // switch. The switcher renders inside the editor iframe, so we read the
   // *parent* route, not this iframe's own route.
-  $: componentsDisabled = $parentRoute === '/components';
+  let componentsDisabled = $derived($parentRoute === '/components');
 
   function set(v: 'tokens' | 'components') {
     editorView.set(v);
@@ -26,7 +30,7 @@
     class="compact"
     aria-label={$editorView === 'tokens' ? 'Switch to components' : 'Switch to tokens'}
     title={$editorView === 'tokens' ? 'Tokens (click for components)' : 'Components (click for tokens)'}
-    on:click={toggle}
+    onclick={toggle}
   >
     <i class="fas {$editorView === 'tokens' ? 'fa-palette' : 'fa-cubes'}"></i>
   </button>
@@ -40,7 +44,7 @@
         class="seg-btn"
         class:active={$editorView === 'tokens'}
         aria-selected={$editorView === 'tokens'}
-        on:click={() => set('tokens')}
+        onclick={() => set('tokens')}
       >
         <span class="radio" aria-hidden="true"></span>
         <span>Tokens</span>
@@ -53,7 +57,7 @@
         aria-selected={$editorView === 'components'}
         disabled={componentsDisabled}
         title={componentsDisabled ? 'Already viewing the Components page' : undefined}
-        on:click={() => set('components')}
+        onclick={() => set('components')}
       >
         <span class="radio" aria-hidden="true"></span>
         <span>Components</span>

package/src/ui/FontStackEditor.svelte

@@ -21,17 +21,17 @@
     '--font-mono',
   ];
 
-  $: fontSourcesList = $editorState.fonts.sources;
-  $: fontStacksList = $editorState.fonts.stacks;
-  $: allFamilies = (fontSourcesList as FontSource[]).flatMap((s) => s.families.map((f) => ({ ...f, sourceLabel: s.label ?? s.kind })));
-  $: familyById = new Map<string, FontFamily>(allFamilies.map((f) => [f.id, f]));
+  let fontSourcesList = $derived($editorState.fonts.sources);
+  let fontStacksList = $derived($editorState.fonts.stacks);
+  let allFamilies = $derived((fontSourcesList as FontSource[]).flatMap((s) => s.families.map((f) => ({ ...f, sourceLabel: s.label ?? s.kind }))));
+  let familyById = $derived(new Map<string, FontFamily>(allFamilies.map((f) => [f.id, f])));
 
   function ensureAllStacksPresent(current: FontStack[]): FontStack[] {
     const byVar = new Map(current.map((s) => [s.variable, s]));
     return STACK_VARIABLES.map((v) => byVar.get(v) ?? { variable: v, slots: [{ kind: 'generic', value: 'sans-serif' } as FontStackSlot] });
   }
 
-  $: stacks = ensureAllStacksPresent(fontStacksList);
+  let stacks = $derived(ensureAllStacksPresent(fontStacksList));
 
   function slotKey(slot: FontStackSlot): string {
     if (slot.kind === 'project') return `project:${slot.familyId}`;
@@ -108,8 +108,8 @@
     });
   }
 
-  let dragSource: { variable: FontStackVariable; index: number } | null = null;
-  let dragOver: { variable: FontStackVariable; index: number; position: 'before' | 'on' | 'after' } | null = null;
+  let dragSource: { variable: FontStackVariable; index: number } | null = $state(null);
+  let dragOver: { variable: FontStackVariable; index: number; position: 'before' | 'on' | 'after' } | null = $state(null);
 
   function onDragStart(e: DragEvent, variable: FontStackVariable, index: number) {
     if (!e.dataTransfer) return;
@@ -167,6 +167,7 @@
       </div>
       <div class="font-stack-list">
         {#each stack.slots as slot, i (i + ':' + slotKey(slot))}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
           <div
             class="slot-row"
             class:drop-on={dragOver?.variable === stack.variable && dragOver?.index === i && dragOver?.position === 'on'}
@@ -174,11 +175,11 @@
             class:drop-after={dragOver?.variable === stack.variable && dragOver?.index === i && dragOver?.position === 'after'}
             class:dragging={dragSource?.variable === stack.variable && dragSource?.index === i}
             draggable="true"
-            on:dragstart={(e) => onDragStart(e, stack.variable, i)}
-            on:dragover={(e) => onDragOver(e, stack.variable, i)}
-            on:dragleave={onDragLeave}
-            on:drop={(e) => onDrop(e, stack.variable, i)}
-            on:dragend={onDragEnd}
+            ondragstart={(e) => onDragStart(e, stack.variable, i)}
+            ondragover={(e) => onDragOver(e, stack.variable, i)}
+            ondragleave={onDragLeave}
+            ondrop={(e) => onDrop(e, stack.variable, i)}
+            ondragend={onDragEnd}
           >
             <span class="drag-handle" aria-hidden="true">⋮⋮</span>
             <span class="slot-position">{i + 1}.</span>
@@ -190,7 +191,7 @@
               <select
                 class="form-select slot-select"
                 value={slotKey(slot)}
-                on:change={(e) => onSelectChange(e, stack.variable, i)}
+                onchange={(e) => onSelectChange(e, stack.variable, i)}
               >
                 {#if allFamilies.length > 0}
                   <optgroup label="Project fonts">
@@ -216,13 +217,13 @@
               class="slot-remove"
               aria-label="Remove slot"
               title="Remove"
-              on:click={() => removeSlot(stack.variable, i)}
+              onclick={() => removeSlot(stack.variable, i)}
               disabled={stack.slots.length <= 1}
             >×</button>
           </div>
         {/each}
       </div>
-      <button type="button" class="add-fallback" on:click={() => addSlot(stack.variable)}>
+      <button type="button" class="add-fallback" onclick={() => addSlot(stack.variable)}>
         + add fallback
       </button>
     </div>