@motion-proto/live-tokens 0.3.7 → 0.5.0

package/src/ui/VariablesTab.svelte

@@ -20,7 +20,7 @@
 
   // Bumped on breakpoint flips; passed to TokenScaleTable so it re-resolves.
   // tokens.css declares responsive overrides at 768px and 480px.
-  let liveVersion = 0;
+  let liveVersion = $state(0);
   const BREAKPOINTS = ['(max-width: 768px)', '(max-width: 480px)'] as const;
 
   onMount(() => {
@@ -34,7 +34,7 @@
     };
   });
 
-  let copiedVar: string | null = null;
+  let copiedVar: string | null = $state(null);
   function copyVariable(v: string) {
     navigator.clipboard.writeText(v);
     copiedVar = v;
@@ -65,9 +65,9 @@
   <section class="section" id="spacing">
     <h2 class="section-title">Spacing &amp; Borders</h2>
     <h3 class="subsection-title">Spacing</h3>
-    <TokenScaleTable kind="spacing" vars={SPACING_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+    <TokenScaleTable kind="spacing" vars={SPACING_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
     <h3 class="subsection-title">Borders</h3>
-    <TokenScaleTable kind="border" vars={BORDER_WIDTH_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+    <TokenScaleTable kind="border" vars={BORDER_WIDTH_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
   </section>
 
   <!-- Columns -->
@@ -76,7 +76,7 @@
   <!-- Border Radius -->
   <section class="section" id="border-radius">
     <h2 class="section-title">Border Radius</h2>
-    <TokenScaleTable kind="radius" vars={RADIUS_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+    <TokenScaleTable kind="radius" vars={RADIUS_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
   </section>
 
   <!-- Typography -->
@@ -92,17 +92,17 @@
 
       <div class="typography-group">
         <h3 class="group-title">Font Sizes</h3>
-        <TokenScaleTable kind="font-size" vars={FONT_SIZE_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+        <TokenScaleTable kind="font-size" vars={FONT_SIZE_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
       </div>
 
       <div class="typography-group">
         <h3 class="group-title">Font Weights</h3>
-        <TokenScaleTable kind="font-weight" vars={FONT_WEIGHT_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+        <TokenScaleTable kind="font-weight" vars={FONT_WEIGHT_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
       </div>
 
       <div class="typography-group">
         <h3 class="group-title">Line Heights</h3>
-        <TokenScaleTable kind="line-height" vars={LINE_HEIGHT_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+        <TokenScaleTable kind="line-height" vars={LINE_HEIGHT_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
       </div>
     </div>
   </section>
@@ -110,19 +110,19 @@
   <!-- Icon Sizes -->
   <section class="section" id="icon-sizes">
     <h2 class="section-title">Icon Sizes</h2>
-    <TokenScaleTable kind="icon-size" vars={ICON_SIZE_VARS} {liveVersion} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+    <TokenScaleTable kind="icon-size" vars={ICON_SIZE_VARS} {liveVersion} {copiedVar} oncopy={copyVariable} />
   </section>
 
 
   <!-- Shadows -->
-  <ShadowsSection {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+  <ShadowsSection {copiedVar} oncopy={copyVariable} />
 
 
   <!-- Overlays -->
-  <OverlaysSection {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+  <OverlaysSection {copiedVar} oncopy={copyVariable} />
 
   <!-- Gradients -->
-  <GradientsSection {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+  <GradientsSection {copiedVar} oncopy={copyVariable} />
 
   <!-- Utility Tokens -->
   <section class="section" id="utility-tokens">
@@ -130,17 +130,17 @@
     <div class="utility-columns">
       <div class="utility-group">
         <h3 class="group-title">Durations</h3>
-        <TokenScaleTable kind="line-height" tokens={DURATION_TOKENS} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+        <TokenScaleTable kind="line-height" tokens={DURATION_TOKENS} {copiedVar} oncopy={copyVariable} />
       </div>
 
       <div class="utility-group">
         <h3 class="group-title">Z-Index Layers</h3>
-        <TokenScaleTable kind="line-height" tokens={Z_INDEX_TOKENS} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+        <TokenScaleTable kind="line-height" tokens={Z_INDEX_TOKENS} {copiedVar} oncopy={copyVariable} />
       </div>
 
       <div class="utility-group">
         <h3 class="group-title">Opacity</h3>
-        <TokenScaleTable kind="line-height" tokens={OPACITY_TOKENS} {copiedVar} on:copy={(e) => copyVariable(e.detail)} />
+        <TokenScaleTable kind="line-height" tokens={OPACITY_TOKENS} {copiedVar} oncopy={copyVariable} />
       </div>
     </div>
   </section>

package/src/ui/palette/GradientStopEditor.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { stopPropagation } from 'svelte/legacy';
+
   import type { GradientStyle, GradientStop } from '../../lib/themeTypes';
   import { beginSliderGesture } from '../../lib/editorStore';
 
@@ -16,19 +18,36 @@
 
   interface PaletteStep { label: string; hex: string }
 
-  export let gradientStyle: GradientStyle;
-  export let gradientAngle: number;
-  export let gradientSize: 'page' | 'window';
-  export let gradientReverse: boolean;
-  export let gradientStops: GradientStop[];
-  export let gradientBarPreview: string;
-  export let paletteComputed: PaletteStep[];
 
-  export let onSetGradientStyle: (style: GradientStyle) => void;
-  export let onSetGradientSize: (size: 'page' | 'window') => void;
-  export let onSetGradientAngle: (angle: number) => void;
-  export let onSetGradientReverse: (reverse: boolean) => void;
-  export let onSetGradientStops: (stops: GradientStop[]) => void;
+  interface Props {
+    gradientStyle: GradientStyle;
+    gradientAngle: number;
+    gradientSize: 'page' | 'window';
+    gradientReverse: boolean;
+    gradientStops: GradientStop[];
+    gradientBarPreview: string;
+    paletteComputed: PaletteStep[];
+    onSetGradientStyle: (style: GradientStyle) => void;
+    onSetGradientSize: (size: 'page' | 'window') => void;
+    onSetGradientAngle: (angle: number) => void;
+    onSetGradientReverse: (reverse: boolean) => void;
+    onSetGradientStops: (stops: GradientStop[]) => void;
+  }
+
+  let {
+    gradientStyle,
+    gradientAngle,
+    gradientSize,
+    gradientReverse,
+    gradientStops,
+    gradientBarPreview,
+    paletteComputed,
+    onSetGradientStyle,
+    onSetGradientSize,
+    onSetGradientAngle,
+    onSetGradientReverse,
+    onSetGradientStops
+  }: Props = $props();
 
   const gradientStyleOptions: { value: GradientStyle; icon: string; title: string }[] = [
     { value: 'linear', icon: '/', title: 'Linear' },
@@ -41,7 +60,7 @@
     { value: 'window', label: 'Window', title: 'Gradient stays fixed to the viewport' },
   ];
 
-  let selectedStopIndex = 0;
+  let selectedStopIndex = $state(0);
   let draggingStopIndex: number | null = null;
 
   function stopColor(stop: GradientStop): string {
@@ -152,7 +171,7 @@
           class:active={gradientStyle === opt.value}
           type="button"
           title={opt.title}
-          on:click={() => onSetGradientStyle(opt.value)}
+          onclick={() => onSetGradientStyle(opt.value)}
         >{opt.icon}</button>
       {/each}
     </div>
@@ -166,7 +185,7 @@
       min="0"
       max="360"
       value={gradientAngle}
-      on:input={onAngleInput}
+      oninput={onAngleInput}
     />
     <span class="gradient-unit">deg</span>
     <input
@@ -175,7 +194,7 @@
       min="0"
       max="360"
       value={gradientAngle}
-      on:input={onAngleInput}
+      oninput={onAngleInput}
     />
   </div>
 
@@ -188,7 +207,7 @@
           class:active={gradientSize === opt.value}
           type="button"
           title={opt.title}
-          on:click={() => onSetGradientSize(opt.value)}
+          onclick={() => onSetGradientSize(opt.value)}
         >{opt.label}</button>
       {/each}
     </div>
@@ -196,7 +215,7 @@
 
   <div class="gradient-row">
     <label class="gradient-checkbox-label">
-      <input type="checkbox" checked={gradientReverse} on:change={onReverseChange} />
+      <input type="checkbox" checked={gradientReverse} onchange={onReverseChange} />
       Reverse
     </label>
   </div>
@@ -205,15 +224,15 @@
   <div class="gradient-stop-bar-wrapper">
     <div class="gradient-stop-handles">
       {#each gradientStops as stop, i}
-        <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
         <div
           class="gradient-stop-handle"
           class:selected={selectedStopIndex === i}
           style="left: {stop.position}%; --stop-color: {stopColor(stop)}"
-          on:mousedown|stopPropagation={(e) => handleStopHandleMouseDown(e, i)}
+          onmousedown={stopPropagation((e) => handleStopHandleMouseDown(e as MouseEvent, i))}
           role="button"
           tabindex="0"
-          on:keydown={(e) => {
+          onkeydown={(e) => {
             if (e.key === 'Delete' || e.key === 'Backspace') removeGradientStop(i);
           }}
         >
@@ -222,11 +241,11 @@
         </div>
       {/each}
     </div>
-    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
     <div
       class="gradient-stop-bar"
       style="background: {gradientBarPreview}"
-      on:mousedown={handleStopBarMouseDown}
+      onmousedown={handleStopBarMouseDown}
       role="slider"
       tabindex="0"
       aria-label="Gradient stops"
@@ -243,7 +262,7 @@
       <select
         class="gradient-select"
         value={gradientStops[selectedStopIndex].paletteLabel}
-        on:change={onStopColorChange}
+        onchange={onStopColorChange}
       >
         {#each paletteComputed as ps}
           <option value={ps.label}>{ps.label}</option>
@@ -257,7 +276,7 @@
         min="0"
         max="100"
         value={gradientStops[selectedStopIndex].position}
-        on:change={onStopPositionChange}
+        onchange={onStopPositionChange}
       />
       <span class="gradient-unit">%</span>
       {#if gradientStops.length > 2}
@@ -265,7 +284,7 @@
           class="stop-remove-btn"
           type="button"
           title="Remove stop"
-          on:click={() => removeGradientStop(selectedStopIndex)}
+          onclick={() => removeGradientStop(selectedStopIndex)}
         >&times;</button>
       {/if}
     </div>

package/src/ui/palette/OverridesPanel.svelte

@@ -36,37 +36,71 @@
 
   interface PaletteStep { label: string; hex: string }
 
-  export let scale: Scale;
-  export let editorOpen: boolean;
-  export let snapped: boolean;
-  export let supportsSnap: boolean;
-  export let cssNamespace: string | null;
-  export let scaleCurves: Record<string, { lightness: CurveAnchor[]; saturation: CurveAnchor[] }>;
-  export let curveOffset: Record<string, number>;
-  export let defaultScaleCurves: Record<string, ScaleCurveDef>;
-  export let overrides: Record<string, string>;
-  export let editingKey: string | null;
-  export let snapPickerKey: string | null;
-  export let copiedKey: string | null;
-  export let copiedLabelKey: string | null;
-  export let paletteComputed: PaletteStep[];
-
-  export let derivedHexFor: (step: Step, scaleTitle: string) => string;
-  export let effectiveHexFor: (key: string, step: Step, scaleTitle: string) => string;
-  export let stepKeyFor: (scaleTitle: string, stepName: string) => string;
-  export let scaleCurveKeyFor: (scaleTitle: string, channel: Channel) => string;
-
-  export let onToggleSnap: (scale: Scale) => void;
-  export let onClearScaleOverrides: (scale: Scale) => void;
-  export let onToggleEditor: (scaleTitle: string) => void;
-  export let onResetOverride: (key: string) => void;
-  export let onOverrideClick: (key: string, step: Step, scaleTitle: string) => void;
-  export let onSnappedClick: (key: string) => void;
-  export let onSelectSnapValue: (key: string, paletteHex: string, scaleTitle: string) => void;
-  export let onCopyHex: (key: string, hex: string, event?: MouseEvent) => void;
-  export let onCopyVarName: (key: string, varName: string, event?: MouseEvent) => void;
-  export let onSetScaleCurve: (scaleTitle: string, channel: Channel, anchors: CurveAnchor[]) => void;
-  export let onOffsetChange: (key: string, value: number) => void;
+
+
+  interface Props {
+    scale: Scale;
+    editorOpen: boolean;
+    snapped: boolean;
+    supportsSnap: boolean;
+    cssNamespace: string | null;
+    scaleCurves: Record<string, { lightness: CurveAnchor[]; saturation: CurveAnchor[] }>;
+    curveOffset: Record<string, number>;
+    defaultScaleCurves: Record<string, ScaleCurveDef>;
+    overrides: Record<string, string>;
+    editingKey: string | null;
+    snapPickerKey: string | null;
+    copiedKey: string | null;
+    copiedLabelKey: string | null;
+    paletteComputed: PaletteStep[];
+    derivedHexFor: (step: Step, scaleTitle: string) => string;
+    effectiveHexFor: (key: string, step: Step, scaleTitle: string) => string;
+    stepKeyFor: (scaleTitle: string, stepName: string) => string;
+    scaleCurveKeyFor: (scaleTitle: string, channel: Channel) => string;
+    onToggleSnap: (scale: Scale) => void;
+    onClearScaleOverrides: (scale: Scale) => void;
+    onToggleEditor: (scaleTitle: string) => void;
+    onResetOverride: (key: string) => void;
+    onOverrideClick: (key: string, step: Step, scaleTitle: string) => void;
+    onSnappedClick: (key: string) => void;
+    onSelectSnapValue: (key: string, paletteHex: string, scaleTitle: string) => void;
+    onCopyHex: (key: string, hex: string, event?: MouseEvent) => void;
+    onCopyVarName: (key: string, varName: string, event?: MouseEvent) => void;
+    onSetScaleCurve: (scaleTitle: string, channel: Channel, anchors: CurveAnchor[]) => void;
+    onOffsetChange: (key: string, value: number) => void;
+  }
+
+  let {
+    scale,
+    editorOpen,
+    snapped,
+    supportsSnap,
+    cssNamespace,
+    scaleCurves,
+    curveOffset,
+    defaultScaleCurves,
+    overrides,
+    editingKey,
+    snapPickerKey,
+    copiedKey,
+    copiedLabelKey,
+    paletteComputed,
+    derivedHexFor,
+    effectiveHexFor,
+    stepKeyFor,
+    scaleCurveKeyFor,
+    onToggleSnap,
+    onClearScaleOverrides,
+    onToggleEditor,
+    onResetOverride,
+    onOverrideClick,
+    onSnappedClick,
+    onSelectSnapValue,
+    onCopyHex,
+    onCopyVarName,
+    onSetScaleCurve,
+    onOffsetChange
+  }: Props = $props();
 
   interface CurveDescriptor {
     key: string;
@@ -76,7 +110,7 @@
     channel: Channel;
   }
 
-  $: curveDescriptors = ((): CurveDescriptor[] => {
+  let curveDescriptors = $derived(((): CurveDescriptor[] => {
     const lightnessCfg = scale.isText ? textLightnessCurveConfig : lightnessCurveConfig;
     const sc = scaleCurves[scale.title];
     const defs = defaultScaleCurves[scale.title];
@@ -85,7 +119,7 @@
       { key: scaleCurveKeyFor(scale.title, 'lightness'), anchors: sc.lightness, cfg: lightnessCfg, defaults: defs.lightness(), channel: 'lightness' },
       { key: scaleCurveKeyFor(scale.title, 'saturation'), anchors: sc.saturation, cfg: saturationCurveConfig, defaults: defs.saturation(), channel: 'saturation' },
     ];
-  })();
+  })());
 </script>
 
 <div class="scale-section">
@@ -96,14 +130,14 @@
         class="edit-toggle"
         class:active={snapped}
         type="button"
-        on:click={() => onToggleSnap(scale)}
+        onclick={() => onToggleSnap(scale)}
       >{snapped ? 'Unsnap' : 'Snap All'}</button>
     {/if}
-    <button class="edit-toggle" type="button" on:click={() => onClearScaleOverrides(scale)}>Clear Overrides</button>
+    <button class="edit-toggle" type="button" onclick={() => onClearScaleOverrides(scale)}>Clear Overrides</button>
     <button
       class="edit-toggle"
       type="button"
-      on:click={() => onToggleEditor(scale.title)}
+      onclick={() => onToggleEditor(scale.title)}
     >{editorOpen ? 'Close' : 'Edit'}</button>
   </div>
   <div class="swatch-grid" style="--swatch-cols: {scale.steps.length}; --swatch-gap: var(--ui-space-8)">
@@ -112,37 +146,39 @@
       {@const hex = effectiveHexFor(k, step, scale.title)}
       {@const dHex = derivedHexFor(step, scale.title)}
       <div class="step-column">
-        <button class="step-label copyable-label" class:copied={copiedLabelKey === k} type="button" on:click={(e) => { const v = scaleToCssVar(scale.title, step.name, cssNamespace); if (v) onCopyVarName(k, v, e); }}>
+        <button class="step-label copyable-label" class:copied={copiedLabelKey === k} type="button" onclick={(e) => { const v = scaleToCssVar(scale.title, step.name, cssNamespace); if (v) onCopyVarName(k, v, e); }}>
           {copiedLabelKey === k ? 'copied!' : step.name}
         </button>
         {#if scale.isText}
+          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
           <div
             class="swatch derived text-swatch"
             class:dimmed={k in overrides}
             class:clickable={k in overrides}
-            on:click={() => onResetOverride(k)}
+            onclick={() => onResetOverride(k)}
             role={k in overrides ? 'button' : undefined}
             tabindex={k in overrides ? 0 : undefined}
-            on:keydown={(e) => k in overrides && e.key === 'Enter' && onResetOverride(k)}
+            onkeydown={(e) => k in overrides && e.key === 'Enter' && onResetOverride(k)}
           >
             <span style="color: {dHex}">Ag</span>
           </div>
-          <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
           <div
             class="swatch override-slot text-swatch"
             class:active={editingKey === k}
             class:populated={k in overrides}
             class:matching={k in overrides && overrides[k] === dHex}
-            on:click={() => onOverrideClick(k, step, scale.title)}
+            onclick={() => onOverrideClick(k, step, scale.title)}
             role="button"
             tabindex="0"
-            on:keydown={(e) => e.key === 'Enter' && onOverrideClick(k, step, scale.title)}
+            onkeydown={(e) => e.key === 'Enter' && onOverrideClick(k, step, scale.title)}
           >
             {#if k in overrides}
               <span style="color: {overrides[k]}">Ag</span>
             {/if}
           </div>
         {:else}
+          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
           <div
             class="swatch derived"
             class:border-preview={scale.title === 'Borders'}
@@ -151,23 +187,23 @@
             style={scale.title === 'Borders'
               ? `border: 3px solid ${dHex}`
               : `background: ${dHex}`}
-            on:click={() => onResetOverride(k)}
+            onclick={() => onResetOverride(k)}
             role={k in overrides ? 'button' : undefined}
             tabindex={k in overrides ? 0 : undefined}
-            on:keydown={(e) => k in overrides && e.key === 'Enter' && onResetOverride(k)}
+            onkeydown={(e) => k in overrides && e.key === 'Enter' && onResetOverride(k)}
           ></div>
           <div class="override-slot-wrapper">
-            <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+            <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
             <div
               class="swatch override-slot"
               class:border-preview={scale.title === 'Borders'}
               class:active={editingKey === k || snapPickerKey === k}
               class:populated={k in overrides}
               class:matching={k in overrides && overrides[k] === dHex}
-              on:click={() => snapped ? onSnappedClick(k) : onOverrideClick(k, step, scale.title)}
+              onclick={() => snapped ? onSnappedClick(k) : onOverrideClick(k, step, scale.title)}
               role="button"
               tabindex="0"
-              on:keydown={(e) => e.key === 'Enter' && (snapped ? onSnappedClick(k) : onOverrideClick(k, step, scale.title))}
+              onkeydown={(e) => e.key === 'Enter' && (snapped ? onSnappedClick(k) : onOverrideClick(k, step, scale.title))}
             >
               {#if k in overrides}
                 {#if scale.title === 'Borders'}
@@ -190,7 +226,7 @@
                     class="snap-picker-item"
                     class:selected={overrides[k] === ps.hex}
                     type="button"
-                    on:click={() => onSelectSnapValue(k, ps.hex, scale.title)}
+                    onclick={() => onSelectSnapValue(k, ps.hex, scale.title)}
                   >
                     <span class="snap-picker-swatch" style="background: {ps.hex}"></span>
                     <span class="snap-picker-label">{ps.label}</span>
@@ -204,7 +240,7 @@
           class="step-hex"
           class:copied={copiedKey === k}
           type="button"
-          on:click={(e) => onCopyHex(k, hex, e)}
+          onclick={(e) => onCopyHex(k, hex, e)}
         >{copiedKey === k ? 'copied!' : hex}</button>
       </div>
     {/each}

package/src/ui/palette/PaletteBase.svelte

@@ -3,7 +3,11 @@
   import Toggle from '../Toggle.svelte';
   import { beginSliderGesture } from '../../lib/editorStore';
 
-  /**
+  
+
+
+  interface Props {
+    /**
    * The header swatch + label + base-hex + (when active) the ColorEditPanel
    * for editing the palette's base colour. In chromatic mode the user picks
    * an arbitrary hex; in gray mode the user picks tint hue + chroma and the
@@ -13,51 +17,73 @@
    * fires callbacks (`onStartEdit`, `onConfirm`, `onCancel`, etc.). The
    * parent decides whether to apply the chromatic-vs-gray snapshot dance.
    */
+    label: string;
+    displayLabel?: string | null;
+    mode: 'chromatic' | 'gray';
+    baseColor: string;
+    gray500Hex: string;
+    tintHue: number;
+    tintChroma: number;
+    anchorToBase: boolean;
+    isEditingBase: boolean;
+    panelOpen: boolean;
+    editingColor: string | null;
+    editPanelTitle: string | null;
+    copiedKey: string | null;
+    onStartEdit: () => void;
+    onConfirm: () => void;
+    onCancel: () => void;
+    onColorChange: (hex: string) => void;
+    onTintChange: (hue: number, chroma: number) => void;
+    onAnchorToBaseChange: (next: boolean) => void;
+    onCopyBaseHex: (key: string, hex: string, event?: MouseEvent) => void;
+  }
 
-  export let label: string;
-  export let displayLabel: string | null = null;
-  export let mode: 'chromatic' | 'gray';
-  export let baseColor: string;
-  export let gray500Hex: string;
-  export let tintHue: number;
-  export let tintChroma: number;
-  export let anchorToBase: boolean;
-  export let isEditingBase: boolean;
-  export let panelOpen: boolean;
-  export let editingColor: string | null;
-  export let editPanelTitle: string | null;
-  export let copiedKey: string | null;
-
-  export let onStartEdit: () => void;
-  export let onConfirm: () => void;
-  export let onCancel: () => void;
-  export let onColorChange: (hex: string) => void;
-  export let onTintChange: (hue: number, chroma: number) => void;
-  export let onAnchorToBaseChange: (next: boolean) => void;
-  export let onCopyBaseHex: (key: string, hex: string, event?: MouseEvent) => void;
-
-  $: displayHex = mode === 'gray' ? gray500Hex : baseColor;
-  $: copyKey = mode === 'gray' ? 'gray-500' : '__base__';
+  let {
+    label,
+    displayLabel = null,
+    mode,
+    baseColor,
+    gray500Hex,
+    tintHue,
+    tintChroma,
+    anchorToBase,
+    isEditingBase,
+    panelOpen,
+    editingColor,
+    editPanelTitle,
+    copiedKey,
+    onStartEdit,
+    onConfirm,
+    onCancel,
+    onColorChange,
+    onTintChange,
+    onAnchorToBaseChange,
+    onCopyBaseHex
+  }: Props = $props();
+
+  let displayHex = $derived(mode === 'gray' ? gray500Hex : baseColor);
+  let copyKey = $derived(mode === 'gray' ? 'gray-500' : '__base__');
 </script>
 
 <div class="editor-top">
   <div class="editor-primary">
-    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
     <div
       class="header-swatch"
       class:active={isEditingBase}
       style="background: {displayHex}"
-      on:click={onStartEdit}
+      onclick={onStartEdit}
       role="button"
       tabindex="0"
-      on:keydown={(e) => e.key === 'Enter' && onStartEdit()}
+      onkeydown={(e) => e.key === 'Enter' && onStartEdit()}
     ></div>
     <div class="primary-info">
       <span class="editor-label">{displayLabel ?? label}</span>
       <button
         class="base-hex clickable-hex"
         type="button"
-        on:click={(e) => onCopyBaseHex(copyKey, displayHex, e)}
+        onclick={(e) => onCopyBaseHex(copyKey, displayHex, e)}
       >{copiedKey === copyKey ? 'copied!' : displayHex}</button>
     </div>
   </div>
@@ -78,9 +104,11 @@
     onRemoveOverride={() => {}}
     onSliderStart={() => beginSliderGesture(`edit ${label} base`)}
   >
-    <span slot="actions" class:hidden={mode !== 'chromatic'}>
-      <Toggle checked={anchorToBase} on:change={(e) => onAnchorToBaseChange(e.detail ?? !anchorToBase)} label="Lock base color to position 500" />
-    </span>
+    {#snippet actions()}
+        <span  class:hidden={mode !== 'chromatic'}>
+        <Toggle checked={anchorToBase} onchange={(v) => onAnchorToBaseChange(v ?? !anchorToBase)} label="Lock base color to position 500" />
+      </span>
+      {/snippet}
   </ColorEditPanel>
 {/if}