@motion-proto/live-tokens 0.3.9 → 0.5.0

package/src/components/Card.svelte

@@ -1,10 +1,22 @@
 <script lang="ts">
-  export let icon: string = '';
-  export let iconColor: string = 'var(--text-secondary)';
-  export let title: string = '';
-  export let size: 'default' | 'compact' = 'default';
-  let className: string = '';
-  export { className as class };
+  interface Props {
+    icon?: string;
+    iconColor?: string;
+    title?: string;
+    size?: 'default' | 'compact';
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    icon = '',
+    iconColor = 'var(--text-secondary)',
+    title = '',
+    size = 'default',
+    class: className = '',
+    children
+  }: Props = $props();
+  
 </script>
 
 <div
@@ -23,7 +35,7 @@
     </div>
   {/if}
   <div class="card-body">
-    <slot />
+    {@render children?.()}
   </div>
 </div>
 
@@ -44,7 +56,7 @@
     --card-default-title-font-family: var(--font-sans);
     --card-default-title-font-size: var(--font-size-lg);
     --card-default-title-font-weight: var(--font-weight-normal);
-    --card-default-title-line-height: var(--line-height-snug);
+    --card-default-title-line-height: var(--line-height-sm);
 
     --card-default-icon-size: var(--icon-size-lg);
 
@@ -52,7 +64,7 @@
     --card-default-body-font-family: var(--font-sans);
     --card-default-body-font-size: var(--font-size-md);
     --card-default-body-font-weight: var(--font-weight-normal);
-    --card-default-body-line-height: var(--line-height-normal);
+    --card-default-body-line-height: var(--line-height-md);
 
     /* Hover */
     --card-hover-surface: var(--surface-neutral-high);
@@ -69,7 +81,7 @@
     --card-hover-title-font-family: var(--font-sans);
     --card-hover-title-font-size: var(--font-size-lg);
     --card-hover-title-font-weight: var(--font-weight-normal);
-    --card-hover-title-line-height: var(--line-height-snug);
+    --card-hover-title-line-height: var(--line-height-sm);
 
     --card-hover-icon-size: var(--icon-size-lg);
 
@@ -77,7 +89,7 @@
     --card-hover-body-font-family: var(--font-sans);
     --card-hover-body-font-size: var(--font-size-md);
     --card-hover-body-font-weight: var(--font-weight-normal);
-    --card-hover-body-line-height: var(--line-height-normal);
+    --card-hover-body-line-height: var(--line-height-md);
   }
 
   .card {

package/src/components/CollapsibleSection.svelte

@@ -1,48 +1,71 @@
 <script lang="ts">
    import { createEventDispatcher } from 'svelte';
 
-   export let label: string;
-   export let expanded: boolean = false;
-   export let href: string | undefined = undefined;
-   export let active: boolean = false;
-   export let variant: 'chromeless' | 'divider' | 'container' = 'container';
-   let className: string = '';
-   export { className as class };
+   interface Props {
+      label: string;
+      expanded?: boolean;
+      href?: string | undefined;
+      active?: boolean;
+      variant?: 'chromeless' | 'divider' | 'container';
+      class?: string;
+      /** Toggle callback. Preferred over `on:toggle` from 0.5.0 onward. */
+      ontoggle?: () => void;
+      summary?: import('svelte').Snippet;
+      children?: import('svelte').Snippet;
+   }
+
+   let {
+      label,
+      expanded = false,
+      href = undefined,
+      active = false,
+      variant = 'container',
+      class: className = '',
+      ontoggle,
+      summary,
+      children
+   }: Props = $props();
 
+   // Dual-fire bridge — see Button.svelte for the deprecation timeline.
    const dispatch = createEventDispatcher<{
       toggle: void;
    }>();
 
+   function fireToggle() {
+      ontoggle?.();
+      dispatch('toggle');
+   }
+
    function handleHeaderClick(e: MouseEvent) {
       if (href && active) {
          e.preventDefault();
-         dispatch('toggle');
+         fireToggle();
       }
    }
 </script>
 
 <section class="es-root variant-{variant} {className}">
    {#if href}
-      <a {href} class="section-header" class:expanded class:active on:click={handleHeaderClick}>
+      <a {href} class="section-header" class:expanded class:active onclick={handleHeaderClick}>
          <div class="section-toggle">
             <i class="fas fa-chevron-right toggle-icon"></i>
             <span class="section-label">{label}</span>
          </div>
-         <slot name="summary" />
+         {@render summary?.()}
       </a>
    {:else}
-      <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-      <div class="section-header" class:expanded on:click={() => dispatch('toggle')}>
+      <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions, a11y_no_static_element_interactions -->
+      <div class="section-header" class:expanded onclick={fireToggle}>
          <div class="section-toggle">
             <i class="fas fa-chevron-right toggle-icon"></i>
             <span class="section-label">{label}</span>
          </div>
-         <slot name="summary" />
+         {@render summary?.()}
       </div>
    {/if}
-   {#if expanded && $$slots.default}
+   {#if expanded && children}
       <div class="section-content">
-         <slot />
+         {@render children?.()}
       </div>
    {/if}
 </section>
@@ -58,7 +81,7 @@
       --collapsiblesection-chromeless-default-label-font-family: var(--font-sans);
       --collapsiblesection-chromeless-default-label-font-size: var(--font-size-md);
       --collapsiblesection-chromeless-default-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-chromeless-default-label-line-height: var(--line-height-normal);
+      --collapsiblesection-chromeless-default-label-line-height: var(--line-height-md);
       --collapsiblesection-chromeless-default-icon: var(--text-muted);
       --collapsiblesection-chromeless-default-icon-size: var(--icon-size-xs);
       /* Chromeless — hover */
@@ -68,7 +91,7 @@
       --collapsiblesection-chromeless-hover-label-font-family: var(--font-sans);
       --collapsiblesection-chromeless-hover-label-font-size: var(--font-size-md);
       --collapsiblesection-chromeless-hover-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-chromeless-hover-label-line-height: var(--line-height-normal);
+      --collapsiblesection-chromeless-hover-label-line-height: var(--line-height-md);
       --collapsiblesection-chromeless-hover-icon: var(--text-primary);
       --collapsiblesection-chromeless-hover-icon-size: var(--icon-size-xs);
       /* Chromeless — active */
@@ -78,7 +101,7 @@
       --collapsiblesection-chromeless-active-label-font-family: var(--font-sans);
       --collapsiblesection-chromeless-active-label-font-size: var(--font-size-md);
       --collapsiblesection-chromeless-active-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-chromeless-active-label-line-height: var(--line-height-normal);
+      --collapsiblesection-chromeless-active-label-line-height: var(--line-height-md);
       --collapsiblesection-chromeless-active-icon: var(--text-muted);
       --collapsiblesection-chromeless-active-icon-size: var(--icon-size-xs);
       /* Chromeless — expanded */
@@ -93,7 +116,7 @@
       --collapsiblesection-divider-default-label-font-family: var(--font-sans);
       --collapsiblesection-divider-default-label-font-size: var(--font-size-md);
       --collapsiblesection-divider-default-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-divider-default-label-line-height: var(--line-height-normal);
+      --collapsiblesection-divider-default-label-line-height: var(--line-height-md);
       --collapsiblesection-divider-default-icon: var(--text-muted);
       --collapsiblesection-divider-default-icon-size: var(--icon-size-xs);
       /* Divider — hover */
@@ -105,7 +128,7 @@
       --collapsiblesection-divider-hover-label-font-family: var(--font-sans);
       --collapsiblesection-divider-hover-label-font-size: var(--font-size-md);
       --collapsiblesection-divider-hover-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-divider-hover-label-line-height: var(--line-height-normal);
+      --collapsiblesection-divider-hover-label-line-height: var(--line-height-md);
       --collapsiblesection-divider-hover-icon: var(--text-primary);
       --collapsiblesection-divider-hover-icon-size: var(--icon-size-xs);
       /* Divider — active */
@@ -117,7 +140,7 @@
       --collapsiblesection-divider-active-label-font-family: var(--font-sans);
       --collapsiblesection-divider-active-label-font-size: var(--font-size-md);
       --collapsiblesection-divider-active-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-divider-active-label-line-height: var(--line-height-normal);
+      --collapsiblesection-divider-active-label-line-height: var(--line-height-md);
       --collapsiblesection-divider-active-icon: var(--text-muted);
       --collapsiblesection-divider-active-icon-size: var(--icon-size-xs);
       /* Divider — expanded */
@@ -135,7 +158,7 @@
       --collapsiblesection-container-default-label-font-family: var(--font-sans);
       --collapsiblesection-container-default-label-font-size: var(--font-size-md);
       --collapsiblesection-container-default-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-container-default-label-line-height: var(--line-height-normal);
+      --collapsiblesection-container-default-label-line-height: var(--line-height-md);
       --collapsiblesection-container-default-icon: var(--text-muted);
       --collapsiblesection-container-default-icon-size: var(--icon-size-xs);
       /* Container — hover header strip */
@@ -145,7 +168,7 @@
       --collapsiblesection-container-hover-label-font-family: var(--font-sans);
       --collapsiblesection-container-hover-label-font-size: var(--font-size-md);
       --collapsiblesection-container-hover-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-container-hover-label-line-height: var(--line-height-normal);
+      --collapsiblesection-container-hover-label-line-height: var(--line-height-md);
       --collapsiblesection-container-hover-icon: var(--text-muted);
       --collapsiblesection-container-hover-icon-size: var(--icon-size-xs);
       /* Container — active header strip */
@@ -155,7 +178,7 @@
       --collapsiblesection-container-active-label-font-family: var(--font-sans);
       --collapsiblesection-container-active-label-font-size: var(--font-size-md);
       --collapsiblesection-container-active-label-font-weight: var(--font-weight-normal);
-      --collapsiblesection-container-active-label-line-height: var(--line-height-normal);
+      --collapsiblesection-container-active-label-line-height: var(--line-height-md);
       --collapsiblesection-container-active-icon: var(--text-muted);
       --collapsiblesection-container-active-icon-size: var(--icon-size-xs);
       /* Container — expanded content area */
@@ -215,9 +238,10 @@
    .es-root.variant-chromeless {
       > .section-header {
          @include header-paint(chromeless, default);
-         &:hover, &.force-hover { @include header-paint(chromeless, hover); }
+         &:hover { @include header-paint(chromeless, hover); }
          &.active { @include header-paint(chromeless, active); }
       }
+      &.force-hover > .section-header { @include header-paint(chromeless, hover); }
       > .section-content {
          @include themed-padding(--collapsiblesection-chromeless-expanded-padding, $h: 2);
       }
@@ -227,7 +251,7 @@
       > .section-header {
          @include header-paint(divider, default);
          @include divider-bottom(default);
-         &:hover, &.force-hover {
+         &:hover {
             @include header-paint(divider, hover);
             @include divider-bottom(hover);
          }
@@ -236,6 +260,10 @@
             @include divider-bottom(active);
          }
       }
+      &.force-hover > .section-header {
+         @include header-paint(divider, hover);
+         @include divider-bottom(hover);
+      }
       > .section-content {
          @include themed-padding(--collapsiblesection-divider-expanded-padding, $h: 2);
       }
@@ -249,9 +277,10 @@
 
       > .section-header {
          @include header-paint(container, default);
-         &:hover, &.force-hover { @include header-paint(container, hover); }
+         &:hover { @include header-paint(container, hover); }
          &.active { @include header-paint(container, active); }
       }
+      &.force-hover > .section-header { @include header-paint(container, hover); }
       > .section-content {
          background: var(--collapsiblesection-container-expanded-surface);
          @include themed-padding(--collapsiblesection-container-expanded-padding, $h: 2);

package/src/components/CornerBadge.svelte

@@ -1,20 +1,34 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export type CornerAnchor = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 </script>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import Badge, { type BadgeVariant } from './Badge.svelte';
 
-  export let variant: BadgeVariant = 'accent';
-  export let anchor: CornerAnchor = 'bottom-right';
-  export let size: 'default' | 'small' = 'default';
-  export let icon: string | undefined = undefined;
+  interface Props {
+    variant?: BadgeVariant;
+    anchor?: CornerAnchor;
+    size?: 'default' | 'small';
+    icon?: string | undefined;
+    /** Custom icon content. Falls back to `icon` prop's font-icon class. Renamed from `slot="icon"` in 0.5.0. */
+    iconSlot?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'accent',
+    anchor = 'bottom-right',
+    size = 'default',
+    icon = undefined,
+    iconSlot,
+    children,
+  }: Props = $props();
 </script>
 
 <span class="corner-badge corner-badge-{anchor} corner-badge-{variant}">
-  <Badge {variant} {size} {icon}>
-    <slot name="icon" slot="icon" />
-    <slot />
+  <Badge {variant} {size} {icon} {iconSlot}>
+    {@render children?.()}
   </Badge>
 </span>
 
@@ -51,7 +65,7 @@
     --corner-badge-primary-text-font-family: var(--font-sans);
     --corner-badge-primary-text-font-size: var(--font-size-sm);
     --corner-badge-primary-text-font-weight: var(--font-weight-light);
-    --corner-badge-primary-text-line-height: var(--line-height-tight);
+    --corner-badge-primary-text-line-height: var(--line-height-xs);
 
     /* Accent */
     --corner-badge-accent-margin: var(--space-0);
@@ -63,7 +77,7 @@
     --corner-badge-accent-text-font-family: var(--font-sans);
     --corner-badge-accent-text-font-size: var(--font-size-sm);
     --corner-badge-accent-text-font-weight: var(--font-weight-light);
-    --corner-badge-accent-text-line-height: var(--line-height-tight);
+    --corner-badge-accent-text-line-height: var(--line-height-xs);
 
     /* Neutral */
     --corner-badge-neutral-margin: var(--space-0);
@@ -75,7 +89,7 @@
     --corner-badge-neutral-text-font-family: var(--font-sans);
     --corner-badge-neutral-text-font-size: var(--font-size-sm);
     --corner-badge-neutral-text-font-weight: var(--font-weight-light);
-    --corner-badge-neutral-text-line-height: var(--line-height-tight);
+    --corner-badge-neutral-text-line-height: var(--line-height-xs);
 
     /* Alternate */
     --corner-badge-alternate-margin: var(--space-0);
@@ -87,7 +101,7 @@
     --corner-badge-alternate-text-font-family: var(--font-sans);
     --corner-badge-alternate-text-font-size: var(--font-size-sm);
     --corner-badge-alternate-text-font-weight: var(--font-weight-light);
-    --corner-badge-alternate-text-line-height: var(--line-height-tight);
+    --corner-badge-alternate-text-line-height: var(--line-height-xs);
 
     /* Canvas */
     --corner-badge-canvas-margin: var(--space-0);
@@ -99,7 +113,7 @@
     --corner-badge-canvas-text-font-family: var(--font-sans);
     --corner-badge-canvas-text-font-size: var(--font-size-sm);
     --corner-badge-canvas-text-font-weight: var(--font-weight-light);
-    --corner-badge-canvas-text-line-height: var(--line-height-tight);
+    --corner-badge-canvas-text-line-height: var(--line-height-xs);
 
     /* Special */
     --corner-badge-special-margin: var(--space-0);
@@ -111,7 +125,7 @@
     --corner-badge-special-text-font-family: var(--font-sans);
     --corner-badge-special-text-font-size: var(--font-size-sm);
     --corner-badge-special-text-font-weight: var(--font-weight-light);
-    --corner-badge-special-text-line-height: var(--line-height-tight);
+    --corner-badge-special-text-line-height: var(--line-height-xs);
 
     /* Success */
     --corner-badge-success-margin: var(--space-0);
@@ -123,7 +137,7 @@
     --corner-badge-success-text-font-family: var(--font-sans);
     --corner-badge-success-text-font-size: var(--font-size-sm);
     --corner-badge-success-text-font-weight: var(--font-weight-light);
-    --corner-badge-success-text-line-height: var(--line-height-tight);
+    --corner-badge-success-text-line-height: var(--line-height-xs);
 
     /* Warning */
     --corner-badge-warning-margin: var(--space-0);
@@ -135,7 +149,7 @@
     --corner-badge-warning-text-font-family: var(--font-sans);
     --corner-badge-warning-text-font-size: var(--font-size-sm);
     --corner-badge-warning-text-font-weight: var(--font-weight-light);
-    --corner-badge-warning-text-line-height: var(--line-height-tight);
+    --corner-badge-warning-text-line-height: var(--line-height-xs);
 
     /* Danger */
     --corner-badge-danger-margin: var(--space-0);
@@ -147,7 +161,7 @@
     --corner-badge-danger-text-font-family: var(--font-sans);
     --corner-badge-danger-text-font-size: var(--font-size-sm);
     --corner-badge-danger-text-font-weight: var(--font-weight-light);
-    --corner-badge-danger-text-line-height: var(--line-height-tight);
+    --corner-badge-danger-text-line-height: var(--line-height-xs);
 
     /* Info */
     --corner-badge-info-margin: var(--space-0);
@@ -159,7 +173,7 @@
     --corner-badge-info-text-font-family: var(--font-sans);
     --corner-badge-info-text-font-size: var(--font-size-sm);
     --corner-badge-info-text-font-weight: var(--font-weight-light);
-    --corner-badge-info-text-line-height: var(--line-height-tight);
+    --corner-badge-info-text-line-height: var(--line-height-xs);
   }
 
   .corner-badge {

package/src/components/Dialog.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher, tick } from 'svelte';
+  import type { Snippet } from 'svelte';
   import Button from './Button.svelte';
   import { editorState } from '../lib/editorStore';
   import type { ButtonVariant, DialogButtonSpec } from './types';
@@ -9,40 +10,62 @@
     return v && (BUTTON_VARIANTS as readonly string[]).includes(v) ? (v as ButtonVariant) : fallback;
   }
 
-  export let show: boolean = false;
-  export let title: string = '';
-  export let width: string = '500px';
-  /** When true, the dialog renders inline within its parent rather than as a fixed-position overlay. Used by the editor preview. */
-  export let inline: boolean = false;
-  /** Right footer button. Undefined hides it. `--dialog-confirm-variant` config drives the variant when `confirm.variant` is unset. */
-  export let confirm: DialogButtonSpec | undefined = undefined;
-  /** Left footer button. Undefined hides it. `--dialog-cancel-variant` config drives the variant when `cancel.variant` is unset. */
-  export let cancel: DialogButtonSpec | undefined = undefined;
+  interface Props {
+    show?: boolean;
+    title?: string;
+    width?: string;
+    /** When true, the dialog renders inline within its parent rather than as a fixed-position overlay. Used by the editor preview. */
+    inline?: boolean;
+    /** Right footer button. Undefined hides it. `--dialog-confirm-variant` config drives the variant when `confirm.variant` is unset. */
+    confirm?: DialogButtonSpec | undefined;
+    /** Left footer button. Undefined hides it. `--dialog-cancel-variant` config drives the variant when `cancel.variant` is unset. */
+    cancel?: DialogButtonSpec | undefined;
+    /** Close callback. Preferred over `on:close` from 0.5.0 onward. */
+    onclose?: () => void;
+    /** Left-aligned footer content. Renamed from `slot="footer-left"` in 0.5.0. */
+    footerLeft?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    show = $bindable(false),
+    title = '',
+    width = '500px',
+    inline = false,
+    confirm = undefined,
+    cancel = undefined,
+    onclose,
+    footerLeft,
+    children,
+  }: Props = $props();
 
-  $: configuredConfig = $editorState.components.dialog?.config ?? {};
-  $: effectiveConfirmVariant = confirm?.variant ?? asVariant(configuredConfig['--dialog-confirm-variant'] as string | undefined, 'primary');
-  $: effectiveCancelVariant = cancel?.variant ?? asVariant(configuredConfig['--dialog-cancel-variant'] as string | undefined, 'outline');
+  let configuredConfig = $derived($editorState.components.dialog?.config ?? {});
+  let effectiveConfirmVariant = $derived(confirm?.variant ?? asVariant(configuredConfig['--dialog-confirm-variant'] as string | undefined, 'primary'));
+  let effectiveCancelVariant = $derived(cancel?.variant ?? asVariant(configuredConfig['--dialog-cancel-variant'] as string | undefined, 'outline'));
 
+  // Dual-fire bridge — see Button.svelte for the deprecation timeline.
   const dispatch = createEventDispatcher<{
     close: void;
   }>();
 
-  let confirmButtonRef: HTMLButtonElement;
-  let cancelButtonRef: HTMLButtonElement;
-  let closeButtonRef: HTMLButtonElement;
+  let confirmButtonRef: HTMLButtonElement = $state()!;
+  let cancelButtonRef: HTMLButtonElement = $state()!;
+  let closeButtonRef: HTMLButtonElement = $state()!;
 
   // Focus the primary button when dialog opens (skip in inline mode so the editor doesn't steal focus).
-  $: if (show && !inline) {
-    tick().then(() => {
-      if (confirm && confirmButtonRef && !confirm.disabled) {
-        confirmButtonRef.focus();
-      } else if (cancel && cancelButtonRef) {
-        cancelButtonRef.focus();
-      } else if (closeButtonRef) {
-        closeButtonRef.focus();
-      }
-    });
-  }
+  $effect(() => {
+    if (show && !inline) {
+      tick().then(() => {
+        if (confirm && confirmButtonRef && !confirm.disabled) {
+          confirmButtonRef.focus();
+        } else if (cancel && cancelButtonRef) {
+          cancelButtonRef.focus();
+        } else if (closeButtonRef) {
+          closeButtonRef.focus();
+        }
+      });
+    }
+  });
 
   function handleConfirm() {
     if (confirm && !confirm.disabled) {
@@ -54,6 +77,7 @@
     if (cancel) {
       cancel.onClick();
     } else {
+      onclose?.();
       dispatch('close');
       show = false;
     }
@@ -70,7 +94,7 @@
             <button
               bind:this={closeButtonRef}
               class="dialog-close"
-              on:click={handleCancel}
+              onclick={handleCancel}
               aria-label="Close"
               tabindex="0"
             >
@@ -80,13 +104,13 @@
         {/if}
 
         <div class="dialog-body">
-          <slot />
+          {@render children?.()}
         </div>
 
         {#if confirm || cancel}
           <div class="dialog-footer">
             <div class="dialog-footer-left">
-              <slot name="footer-left" />
+              {@render footerLeft?.()}
             </div>
             <div class="dialog-footer-buttons">
               {#if cancel}
@@ -141,7 +165,7 @@
     --dialog-title-font-family: var(--font-sans);
     --dialog-title-font-size: var(--font-size-2xl);
     --dialog-title-font-weight: var(--font-weight-normal);
-    --dialog-title-line-height: var(--line-height-snug);
+    --dialog-title-line-height: var(--line-height-sm);
 
     /* Close icon */
     --dialog-close-icon: var(--text-secondary);
@@ -153,7 +177,7 @@
     --dialog-body-font-family: var(--font-sans);
     --dialog-body-font-size: var(--font-size-md);
     --dialog-body-font-weight: var(--font-weight-normal);
-    --dialog-body-line-height: var(--line-height-normal);
+    --dialog-body-line-height: var(--line-height-md);
 
     /* Footer */
     --dialog-footer-border: var(--border-neutral-subtle);

package/src/components/Image.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
-  export let src: string;
-  export let alt: string;
-  export let variant: 'default' | 'banner' | 'medium' | 'compact' = 'default';
-  export let height: string | undefined = undefined;
+  interface Props {
+    src: string;
+    alt: string;
+    variant?: 'default' | 'banner' | 'medium' | 'compact';
+    height?: string | undefined;
+  }
+
+  let {
+    src,
+    alt,
+    variant = 'default',
+    height = undefined
+  }: Props = $props();
 
   const variantHeights: Record<string, string | undefined> = {
     default: undefined,
@@ -11,7 +20,7 @@
     compact: '180px',
   };
 
-  $: resolvedHeight = height ?? variantHeights[variant];
+  let resolvedHeight = $derived(height ?? variantHeights[variant]);
 </script>
 
 <div class="image" style:height={resolvedHeight}>

package/src/components/InlineEditActions.svelte

@@ -1,23 +1,35 @@
 <script lang="ts">
-   /**
+   
+
+   interface Props {
+      /**
     * Reusable inline edit action buttons (confirm/cancel)
     * Used for inline editing throughout the app
     */
+      onSave: () => void | Promise<void>;
+      onCancel: () => void;
+      disabled?: boolean;
+      saveTitle?: string;
+      cancelTitle?: string;
+      class?: string;
+   }
 
-   export let onSave: () => void | Promise<void>;
-   export let onCancel: () => void;
-   export let disabled = false;
-   export let saveTitle = "Save";
-   export let cancelTitle = "Cancel";
-   let className: string = '';
-   export { className as class };
+   let {
+      onSave,
+      onCancel,
+      disabled = false,
+      saveTitle = "Save",
+      cancelTitle = "Cancel",
+      class: className = ''
+   }: Props = $props();
+   
 </script>
 
 <div class="inline-actions {className}">
    <button
       class="save-btn"
       type="button"
-      on:click={onSave}
+      onclick={onSave}
       {disabled}
       title={saveTitle}
    >
@@ -26,7 +38,7 @@
    <button
       class="cancel-btn"
       type="button"
-      on:click={onCancel}
+      onclick={onCancel}
       disabled={disabled}
       title={cancelTitle}
    >