fix: gate command palette and shortcut fixes

packages/ui/src/lib/actions/shortcut.ts

@@ -1,4 +1,5 @@
 import type { ActionReturn } from 'svelte/action';
+import { on } from 'svelte/events';
 
 export type Shortcut = {
   key: string;
@@ -111,6 +112,9 @@ export const shortcuts = <T extends HTMLElement>(
   options: ShortcutOptions<T>[],
 ): ActionReturn<ShortcutOptions<T>[]> => {
   function onKeydown(event: KeyboardEvent) {
+    if (event.defaultPrevented) {
+      return;
+    }
     const ignoreShortcut = shouldIgnoreEvent(event);
     for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true } of options) {
       if (ignoreInputFields && ignoreShortcut) {
@@ -127,14 +131,14 @@ export const shortcuts = <T extends HTMLElement>(
     }
   }
 
-  node.addEventListener('keydown', onKeydown);
+  const off = on(node, 'keydown', onKeydown);
 
   return {
     update(newOptions) {
       options = newOptions;
     },
     destroy() {
-      node.removeEventListener('keydown', onKeydown);
+      off();
     },
   };
 };

packages/ui/src/lib/components/Modal/Modal.svelte

@@ -89,6 +89,11 @@
     }
   };
 
+  const handleEscapeKeydown = (event: KeyboardEvent) => {
+    event.stopImmediatePropagation();
+    onEscapeKeydown?.(event);
+  };
+
   onMount(() => {
     layer = modalState.incrementLayer();
 
@@ -100,7 +105,7 @@
   <Dialog.Portal>
     <Dialog.Overlay class="{zIndex.ModalBackdrop} fixed start-0 top-0  flex h-dvh max-h-dvh w-screen bg-black/30" />
     <Dialog.Content
-      {onEscapeKeydown}
+      onEscapeKeydown={handleEscapeKeydown}
       {escapeKeydownBehavior}
       {interactOutsideBehavior}
       class={cleanClass(modalContentStyles({ size }))}

packages/ui/src/lib/index.ts

@@ -110,6 +110,7 @@ export * from '$lib/services/translation.svelte.js';
 export * from '$lib/types.js';
 export * from '$lib/utilities/byte-units.js';
 export * from '$lib/utilities/common.js';
+export { isModalOpen } from '$lib/state/modal-state.svelte.js';
 
 // site
 export * from '$lib/site/constants.js';

packages/ui/src/lib/services/command-palette-manager.svelte.ts

@@ -1,9 +1,11 @@
 import { matchesShortcut, shortcuts, shouldIgnoreEvent } from '$lib/actions/shortcut.js';
 import CommandPaletteModal from '$lib/internal/CommandPaletteModal.svelte';
 import { modalManager } from '$lib/services/modal-manager.svelte.js';
+import { isModalOpen } from '$lib/state/modal-state.svelte.js';
 import type { ActionItem, MaybePromise, TranslationProps } from '$lib/types.js';
 import { isEnabled } from '$lib/utilities/common.js';
 import { asArray, generateId, getSearchString } from '$lib/utilities/internal.js';
+import { on } from 'svelte/events';
 
 export type CommandPaletteTranslations = TranslationProps<
   | 'search_placeholder'
@@ -55,7 +57,7 @@ class CommandPaletteManager {
         { shortcut: { key: 'k', ctrl: true }, onShortcut: () => this.open() },
         { shortcut: { key: '/' }, preventDefault: true, onShortcut: () => this.open() },
       ]);
-      document.body.addEventListener('keydown', (event) => this.#handleKeydown(event));
+      on(document.body, 'keydown', (event) => this.#handleKeydown(event));
     }
   }
 
@@ -80,6 +82,10 @@ class CommandPaletteManager {
   }
 
   async #handleKeydown(event: KeyboardEvent) {
+    if (event.defaultPrevented || isModalOpen()) {
+      return;
+    }
+
     const actions = await Promise.all(this.#providers.map((provider) => Promise.resolve(provider.onSearch())));
 
     for (const action of actions.flat()) {
@@ -101,6 +107,7 @@ class CommandPaletteManager {
       }
 
       action?.onAction(action);
+      return;
     }
   }
 

packages/ui/src/lib/state/modal-state.svelte.ts

@@ -19,3 +19,4 @@ class ModalState {
 }
 
 export const modalState = new ModalState();
+export const isModalOpen = () => modalState.layer > 0;