@motion-proto/live-tokens 0.47.1 → 0.48.0

package/src/editor/ui/UIDialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { run, self } from 'svelte/legacy';
+  import { self } from 'svelte/legacy';
 
   import { tick } from 'svelte';
 
@@ -31,14 +31,16 @@
   let cancelButtonRef: HTMLButtonElement | undefined = $state();
   let confirmButtonRef: HTMLButtonElement | undefined = $state();
 
-  run(() => {
-    if (show) {
-      tick().then(() => {
-        if (confirmLabel && confirmButtonRef) confirmButtonRef.focus();
-        else if (showCancel && cancelButtonRef) cancelButtonRef.focus();
-        else if (closeButtonRef) closeButtonRef.focus();
-      });
-    }
+  // Depends on `show` alone: the footer can gain or lose its confirm button
+  // while the dialog is open (theme preview), and pulling focus out of the
+  // body each time that happens would fight whatever the user is doing.
+  $effect(() => {
+    if (!show) return;
+    tick().then(() => {
+      if (confirmLabel && confirmButtonRef) confirmButtonRef.focus();
+      else if (showCancel && cancelButtonRef) cancelButtonRef.focus();
+      else if (closeButtonRef) closeButtonRef.focus();
+    });
   });
 
   function handleClose() {

package/src/editor/ui/index.ts

@@ -26,5 +26,7 @@ export { default as BezierCurveEditor } from './BezierCurveEditor.svelte';
 export { default as FontStackEditor } from './FontStackEditor.svelte';
 export { default as ProjectFontsSection } from './ProjectFontsSection.svelte';
 
-// Theme persistence UI
-export { default as ThemeFileManager } from './ThemeFileManager.svelte';
+// Theme persistence UI. `ThemeFileManager` was the layer manager; the panel is
+// what carries that role now, and the alias keeps the public import working.
+export { default as ThemePanel } from './ThemePanel.svelte';
+export { default as ThemeFileManager } from './ThemePanel.svelte';