feat(drawer): dismiss on Escape key

Drawer only closed via underlay click or navigation, both gated
behind hasAutoClose. Register Escape unconditionally through a new
reusable onEscapeKey action (GlobalEventBus-backed) so every drawer,
including those with hasAutoClose disabled, closes on ESC.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Magnea

projects/client/src/lib/components/drawer/Drawer.svelte

@@ -5,6 +5,7 @@
   import RenderFor from "$lib/guards/RenderFor.svelte";
   import { useMedia, WellKnownMediaQuery } from "$lib/stores/css/useMedia";
   import { appendClassList } from "$lib/utils/actions/appendClassList";
+  import { onEscapeKey } from "$lib/utils/actions/onEscapeKey";
   import { writable } from "$lib/utils/store/WritableSubject";
   import { onMount, type Snippet } from "svelte";
   import { slide } from "svelte/transition";
@@ -99,6 +100,7 @@
   transition:slide={{ duration: 150, axis: slideAxis }}
   use:portal
   use:trap
+  use:onEscapeKey={onClose}
   use:appendClassList={classList}
   onintrostart={() => isOpening.set(true)}
   onintroend={() => {

projects/client/src/lib/utils/actions/onEscapeKey.spec.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+import { onEscapeKey } from './onEscapeKey.ts';
+
+function pressKey(key: string) {
+  globalThis.window.dispatchEvent(new KeyboardEvent('keydown', { key }));
+}
+
+describe('onEscapeKey', () => {
+  const node = document.createElement('div');
+
+  it('should invoke the callback when Escape is pressed', () => {
+    let callCount = 0;
+    const action = onEscapeKey(node, () => {
+      callCount += 1;
+    });
+
+    pressKey('Escape');
+
+    expect(callCount).toBe(1);
+    action.destroy();
+  });
+
+  it('should NOT invoke the callback for other keys', () => {
+    let callCount = 0;
+    const action = onEscapeKey(node, () => {
+      callCount += 1;
+    });
+
+    pressKey('Enter');
+    pressKey('a');
+
+    expect(callCount).toBe(0);
+    action.destroy();
+  });
+
+  it('should clean up the listener when destroyed', () => {
+    let callCount = 0;
+    const action = onEscapeKey(node, () => {
+      callCount += 1;
+    });
+
+    action.destroy();
+    pressKey('Escape');
+
+    expect(callCount).toBe(0);
+  });
+});

projects/client/src/lib/utils/actions/onEscapeKey.ts

@@ -0,0 +1,22 @@
+import { GlobalEventBus } from '../events/GlobalEventBus.ts';
+
+export function onEscapeKey(_node: HTMLElement, onEscape: () => void) {
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape') {
+      return;
+    }
+
+    onEscape();
+  };
+
+  const unregister = GlobalEventBus.getInstance().register(
+    'keydown',
+    handleKeyDown,
+  );
+
+  return {
+    destroy() {
+      unregister();
+    },
+  };
+}