Tighten Modal API and align dialog patterns

Add an optional onenter prop to Modal so the consolidated keyboard
contract (Escape-closes, Enter-confirms) lives in one place.
ConfirmDialog drops its own Enter window listener and forwards
onenter to Modal. SaveDialog does the same and trades its open=
true literal for an open prop forwarded by the parent, so its API
matches ConfirmDialog and the Export modal.

ConfirmDialog Cancel restyles to the borderless 'text-fg-dimmed
hover:text-fg-secondary' pattern used by SaveDialog, Export, and
the rest of the app's secondary buttons.

LockIcon gains a strokeWidth prop matching SearchIcon's shape so
the two share the same configuration surface.

Author: bjarneo

frontend/src/lib/components/blueprints/BlueprintsView.svelte

@@ -137,13 +137,12 @@
         {/if}
     </div>
 
-    {#if showSaveDialog}
-        <SaveDialog
-            onclose={() => (showSaveDialog = false)}
-            onsave={() => {
-                showSaveDialog = false;
-                loadBlueprints();
-            }}
-        />
-    {/if}
+    <SaveDialog
+        open={showSaveDialog}
+        onclose={() => (showSaveDialog = false)}
+        onsave={() => {
+            showSaveDialog = false;
+            loadBlueprints();
+        }}
+    />
 </div>

frontend/src/lib/components/blueprints/SaveDialog.svelte

@@ -11,35 +11,27 @@
     } from '$lib/stores/theme.svelte';
     import Modal from '$lib/components/shared/Modal.svelte';
 
-    let {onclose, onsave}: {onclose: () => void; onsave: () => void} = $props();
+    let {
+        open = true,
+        onclose,
+        onsave,
+    }: {open?: boolean; onclose: () => void; onsave: () => void} = $props();
     let name = $state('');
     let isSaving = $state(false);
     let showOverrideConfirm = $state(false);
     let nameInput = $state<HTMLInputElement | null>(null);
     let attemptedSubmit = $state(false);
 
     $effect(() => {
-        if (!showOverrideConfirm) nameInput?.focus();
+        if (open && !showOverrideConfirm) nameInput?.focus();
     });
 
     let nameError = $derived(
         attemptedSubmit && !name.trim() ? 'Theme name is required' : ''
     );
 
-    // Enter on the form commits; Esc/backdrop dismissal goes through Modal's
-    // onclose, which we override below to step back from the override-confirm
-    // sub-panel before fully closing.
-    $effect(() => {
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === 'Enter' && !showOverrideConfirm) {
-                e.preventDefault();
-                handleSave();
-            }
-        };
-        window.addEventListener('keydown', onKey);
-        return () => window.removeEventListener('keydown', onKey);
-    });
-
+    // Esc/backdrop dismissal goes through Modal's onclose, which we override
+    // to step back from the override-confirm sub-panel before fully closing.
     function handleClose() {
         if (showOverrideConfirm) {
             showOverrideConfirm = false;
@@ -48,6 +40,10 @@
         }
     }
 
+    function handleEnter() {
+        if (!showOverrideConfirm) handleSave();
+    }
+
     async function handleSave() {
         attemptedSubmit = true;
         if (!name.trim()) {
@@ -98,7 +94,7 @@
     }
 </script>
 
-<Modal open={true} onclose={handleClose} z="z-40">
+<Modal {open} onclose={handleClose} onenter={handleEnter} z="z-40">
     {#if showOverrideConfirm}
         <h3 class="text-fg-primary mb-3 text-[12px] font-medium">
             Override existing theme?

frontend/src/lib/components/layout/ActionBar.svelte

@@ -578,13 +578,11 @@
     </div>
 </Modal>
 
-<!-- Save Blueprint Dialog -->
-{#if showSaveDialog}
-    <SaveDialog
-        onclose={() => (showSaveDialog = false)}
-        onsave={() => (showSaveDialog = false)}
-    />
-{/if}
+<SaveDialog
+    open={showSaveDialog}
+    onclose={() => (showSaveDialog = false)}
+    onsave={() => (showSaveDialog = false)}
+/>
 
 {#if confirmKind}
     {@const cfg = CONFIRM_CONFIG[confirmKind]}

frontend/src/lib/components/shared/ConfirmDialog.svelte

@@ -24,20 +24,11 @@
     let confirmEl = $state<HTMLButtonElement | null>(null);
 
     $effect(() => {
-        if (!open) return;
-        confirmEl?.focus();
-        const onKey = (e: KeyboardEvent) => {
-            if (e.key === 'Enter') {
-                e.preventDefault();
-                onconfirm();
-            }
-        };
-        window.addEventListener('keydown', onKey);
-        return () => window.removeEventListener('keydown', onKey);
+        if (open) confirmEl?.focus();
     });
 </script>
 
-<Modal {open} onclose={oncancel}>
+<Modal {open} onclose={oncancel} onenter={onconfirm}>
     <h3 class="text-fg-primary mb-1.5 text-[12px] font-medium">
         {title}
     </h3>
@@ -49,7 +40,7 @@
     <div class="flex justify-end gap-2">
         <button
             type="button"
-            class="text-fg-secondary border-border hover:bg-bg-hover border px-3 py-1 text-[11px] transition-colors"
+            class="text-fg-dimmed hover:text-fg-secondary px-3 py-1 text-[11px] transition-colors"
             onclick={oncancel}>{cancelLabel}</button
         >
         <button

frontend/src/lib/components/shared/LockIcon.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
-    let {locked, size = 'w-3.5 h-3.5'}: {locked: boolean; size?: string} =
-        $props();
+    let {
+        locked,
+        size = 'w-3.5 h-3.5',
+        strokeWidth = 2,
+    }: {locked: boolean; size?: string; strokeWidth?: number} = $props();
 </script>
 
 <svg
     class={size}
     viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
-    stroke-width="2"
+    stroke-width={strokeWidth}
     stroke-linecap="round"
     stroke-linejoin="round"
 >

frontend/src/lib/components/shared/Modal.svelte

@@ -4,12 +4,14 @@
     let {
         open,
         onclose,
+        onenter,
         panelClass = 'w-80',
         z = 'z-50',
         children,
     }: {
         open: boolean;
         onclose: () => void;
+        onenter?: () => void;
         panelClass?: string;
         z?: string;
         children: Snippet;
@@ -21,6 +23,9 @@
             if (e.key === 'Escape') {
                 e.preventDefault();
                 onclose();
+            } else if (e.key === 'Enter' && onenter) {
+                e.preventDefault();
+                onenter();
             }
         };
         window.addEventListener('keydown', onKey);