quilt-vanilla 0.2.4 → 0.4.0

package/src/renderer.ts

@@ -1,3 +1,4 @@
+import { chromeMinimum } from './chrome-size.js';
 import { closeRequests } from './close.js';
 import { dockLayout, parseWorkspace } from './workspace.js';
 import { validateTheme, themePixels } from './theme.js';
@@ -9,9 +10,20 @@ import { bindCorners } from './corners.js';
 import { applyTheme } from './theme.js';
 import { fillTabs } from './tabs.js';
 import { bindShortcuts } from './shortcuts.js';
-import { allocate, bounds, DIVIDER, findNode, groups, paneIds } from 'quilt-core';
+import { createActions } from './actions.js';
+import { registeredShortcuts } from './shortcut-registration.js';
+import {
+  LayoutStore,
+  createLayout,
+  allocate,
+  bounds as modelBounds,
+  DIVIDER,
+  findNode,
+  groups,
+  paneIds,
+} from 'quilt-core';
 import type { Group, Layout, Node, Pane } from 'quilt-core';
-import type { LayoutOptions, ResolvedLayoutOptions, MountedLayout } from './types.js';
+import type { LayoutOptions, ResolvedLayoutOptions, MountedLayout, TabBarStyle } from './types.js';
 import { Scope, el, syncChildren } from './lifetime.js';
 import { mountPane } from './panes.js';
 import type { MountedPane } from './panes.js';
@@ -26,19 +38,51 @@ interface Region {
   divider?: HTMLElement;
   signature?: string;
   updateTabBar?: () => void;
+  tabStyle?: () => TabBarStyle;
 }
 let nextMount = 0;
 export function mountLayout<State = unknown>(
   host: HTMLElement,
   input: LayoutOptions<State>,
 ): MountedLayout<State> {
-  // State typing is a boundary contract; the renderer only forwards the value.
-  return mountLayoutInternal(
-    host,
-    input as unknown as ResolvedLayoutOptions,
-  ) as MountedLayout<State>;
+  if ('store' in input)
+    throw new Error('Quilt owns its store; pass initialLayout or initialWorkspace');
+  if (input.initialLayout !== undefined && input.initialWorkspace !== undefined)
+    throw new Error('initialLayout and initialWorkspace are mutually exclusive');
+  if (input.registry && (input.renderers || input.tabs))
+    throw new Error('registry cannot be combined with renderers or tabs');
+  const preset =
+    input.initialWorkspace === undefined ? undefined : parseWorkspace(input.initialWorkspace);
+  const theme = preset?.theme ?? input.theme ?? {};
+  const tabBar = preset?.tabBar ?? input.tabBar ?? {};
+  validateTheme(theme);
+  validateTabBar(tabBar);
+  const store = new LayoutStore(
+    dockLayout(preset?.layout ?? input.initialLayout ?? createLayout()),
+    {
+      autoCollapse: preset?.autoCollapse ?? 'disabled',
+    },
+  );
+  // The initialization scope rolls back even if setup fails before returning a handle.
+  const scope = new Scope();
+  scope.add(() => store.dispose());
+  try {
+    return mountLayoutInternal(
+      host,
+      { ...input, store, theme, tabBar } as unknown as ResolvedLayoutOptions,
+      scope,
+    ) as MountedLayout<State>;
+  } catch (error) {
+    scope.dispose();
+    throw error;
+  }
 }
-function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): MountedLayout {
+
+function mountLayoutInternal(
+  host: HTMLElement,
+  input: ResolvedLayoutOptions,
+  scope: Scope,
+): MountedLayout {
   const options = { ...input };
   const configure = () => {
     if (options.registry) {
@@ -58,8 +102,7 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
   const doc = host.ownerDocument,
     win = doc.defaultView;
   if (!win) throw new Error('Layout host must belong to a live document');
-  const scope = new Scope(),
-    regions = new Map<string, Region>(),
+  const regions = new Map<string, Region>(),
     panes = new Map<string, MountedPane>();
   const root = el(doc, 'div', 'layouts');
   applyTheme(root, options.theme ?? {});
@@ -69,6 +112,7 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
   status.setAttribute('role', 'status');
   root.append(stage, status);
   host.append(root);
+  scope.add(() => root.remove());
   let disposed = false,
     rendering = false,
     again = false,
@@ -89,13 +133,53 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
       error(e);
     }
   };
-  const requestClose = closeRequests(root, options, scope, error);
+  const closeScope = new Scope();
+  scope.add(() => closeScope.dispose());
+  const requestClose = closeRequests(root, options, closeScope, error);
   const windows = new Windows(doc, options, error, root);
-  const menu = createPaneMenu(root, options, windows, render, error, requestClose);
-  bindShortcuts(root, options, scope, act, (group) => {
-    const region = regions.get(group.id);
-    if (region) menu.addTab(region.header ?? region.element, group);
+  scope.add(() => windows.dispose());
+  scope.add(() => {
+    for (const pane of panes.values()) pane.dispose();
+    panes.clear();
+    for (const region of regions.values()) region.scope.dispose();
+    regions.clear();
+  });
+  const actions = createActions(options, {
+    context: () => shortcutContext(),
+    disposed: () => disposed,
+    close: requestClose,
+    popout: (id) => windows.open(id),
+    report: error,
+    create(action, group, pane) {
+      const region = regions.get(group.id);
+      if (!region) throw new Error('Region is not mounted');
+      const anchor = region.header ?? region.element;
+      if (action === 'addTab') menu.addTab(anchor, group);
+      else {
+        const direction =
+          action === 'splitLeft'
+            ? 'left'
+            : action === 'splitRight'
+              ? 'right'
+              : action === 'splitUp'
+                ? 'top'
+                : 'bottom';
+        menu.open(anchor, pane, group, direction);
+      }
+    },
   });
+  const menu = createPaneMenu(root, options, render, error, actions);
+  scope.add(() => menu.dispose());
+  scope.add(() => dragScope?.dispose());
+  const shortcutContext = bindShortcuts(
+    root,
+    options,
+    scope,
+    actions.canExecuteAction,
+    actions.executeAction,
+    menu.getShortcutTarget,
+  );
+  registeredShortcuts(options);
   const renderOptions = { ...options, onError: error };
   function button(text: string, title: string, action: () => void) {
     const b = el(doc, 'button', 'layouts-button', text);
@@ -123,24 +207,25 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
       r.header = el(doc, 'header', 'layouts-header');
       r.body = el(doc, 'div', 'layouts-body');
       r.element.append(r.header, r.body);
+      r.tabStyle = () => {
+        const current = findNode(options.store.getSnapshot().root, node.id);
+        return {
+          ...tabBar,
+          ...(tabBar.regions?.[node.id] ?? {}),
+          ...(current?.kind === 'group' && current.tabDisplay
+            ? { display: current.tabDisplay }
+            : {}),
+          ...(current?.kind === 'group' && current.tabPlacement
+            ? { placement: current.tabPlacement }
+            : {}),
+        };
+      };
       r.updateTabBar = bindTabBar(
         r.element,
         r.header,
         root,
         r.scope,
-        () => {
-          const current = findNode(options.store.getSnapshot().root, node.id);
-          return {
-            ...tabBar,
-            ...(tabBar.regions?.[node.id] ?? {}),
-            ...(current?.kind === 'group' && current.tabDisplay
-              ? { display: current.tabDisplay }
-              : {}),
-            ...(current?.kind === 'group' && current.tabPlacement
-              ? { placement: current.tabPlacement }
-              : {}),
-          };
-        },
+        r.tabStyle,
         () => options.messages ?? {},
       );
       bindCorners(
@@ -150,6 +235,7 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
         r.scope,
         (pane, group, direction, ratio) => menu.open(r.header!, pane, group, direction, ratio),
         error,
+        bounds,
       );
       r.element.setAttribute('aria-label', message(options, 'Pane region'));
       r.scope.listen(r.element, 'dragover', (event) => {
@@ -203,10 +289,15 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
         dragScope?.dispose();
         const drag = new Scope();
         dragScope = drag;
-        const resize = isolatedResize(geometryLayout(), node.id, (child, axis) => {
-          const rect = regions.get(child.id)!.element.getBoundingClientRect();
-          return axis === 'horizontal' ? rect.width : rect.height;
-        });
+        const resize = isolatedResize(
+          geometryLayout(),
+          node.id,
+          (child, axis) => {
+            const rect = regions.get(child.id)!.element.getBoundingClientRect();
+            return axis === 'horizontal' ? rect.width : rect.height;
+          },
+          bounds,
+        );
         r.divider!.setPointerCapture(e.pointerId);
         root.classList.add('layouts-resizing');
         drag.add(() => {
@@ -258,10 +349,15 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
           n.axis === 'horizontal' ? ['ArrowLeft', 'ArrowRight'] : ['ArrowUp', 'ArrowDown'];
         if (keys.includes(e.key)) {
           e.preventDefault();
-          const resize = isolatedResize(geometryLayout(), node.id, (child, axis) => {
-            const rect = regions.get(child.id)!.element.getBoundingClientRect();
-            return axis === 'horizontal' ? rect.width : rect.height;
-          });
+          const resize = isolatedResize(
+            geometryLayout(),
+            node.id,
+            (child, axis) => {
+              const rect = regions.get(child.id)!.element.getBoundingClientRect();
+              return axis === 'horizontal' ? rect.width : rect.height;
+            },
+            bounds,
+          );
           act(() =>
             options.store.resizeMany(
               resize.ratios(
@@ -558,9 +654,29 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
       return node.axis === 'horizontal' ? b.minWidth < b.maxWidth : b.minHeight < b.maxHeight;
     });
   }
+  const chromeSizes = new Map<string, { minWidth: number; minHeight: number }>();
+  function bounds(node: Node, layout: Layout) {
+    return modelBounds(node, layout, (group, constraints) => {
+      const chrome = chromeSizes.get(group.id);
+      if (!chrome) return constraints;
+      const minWidth = Math.max(constraints.minWidth, chrome.minWidth);
+      const minHeight = Math.max(constraints.minHeight, chrome.minHeight);
+      return {
+        minWidth,
+        minHeight,
+        maxWidth: Math.max(constraints.maxWidth, minWidth),
+        maxHeight: Math.max(constraints.maxHeight, minHeight),
+      };
+    });
+  }
   // Renderer-only gaps participate in bounds/allocation without modifying Layout JSON.
   function geometryLayout(): Layout {
     const layout = options.store.getSnapshot();
+    chromeSizes.clear();
+    for (const [id, region] of regions) {
+      if (region.header && region.tabStyle && region.element.isConnected)
+        chromeSizes.set(id, chromeMinimum(region.element, region.header, region.tabStyle()));
+    }
     const pixels = (property: string, fallback: number) => themePixels(root, property, fallback);
     const width = pixels('--layouts-resize-handle-width', DIVIDER);
     const disabledWidth = pixels('--layouts-disabled-resize-handle-width', 0);
@@ -648,9 +764,21 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
       render();
     }),
   );
-  const observer = new ResizeObserver(measure);
+  // Geometry can change the stage's scrollbar gutter. Defer those writes out
+  // of ResizeObserver delivery so WebKit does not detect a nested resize loop.
+  let measureFrame = 0;
+  const observer = new ResizeObserver(() => {
+    if (!measureFrame && !disposed)
+      measureFrame = doc.defaultView!.requestAnimationFrame(() => {
+        measureFrame = 0;
+        if (!disposed) measure();
+      });
+  });
   observer.observe(stage);
-  scope.add(() => observer.disconnect());
+  scope.add(() => {
+    observer.disconnect();
+    if (measureFrame) doc.defaultView!.cancelAnimationFrame(measureFrame);
+  });
   scope.listen(doc, 'dragend', () => {
     dragId = undefined;
     for (const r of regions.values()) delete r.element.dataset.drop;
@@ -702,15 +830,28 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
     themeObserver.observe(ancestor, { attributes: true });
   themeObserver.observe(doc.head, { childList: true, subtree: true, characterData: true });
   scope.add(() => themeObserver.disconnect());
+  // Cancel asynchronous actions before tearing down views and the owned store.
+  scope.add(() => {
+    closeScope.dispose();
+    windows.dispose();
+  });
   render();
   return {
+    store: options.store,
+    ...actions,
+    getShortcuts: () => registeredShortcuts(options),
     requestClose,
     refreshTheme,
     updateOptions(next) {
       if (disposed) return;
+      if ('store' in next || 'initialLayout' in next || 'initialWorkspace' in next)
+        throw new Error(
+          'Initial configuration cannot be updated; use loadWorkspace or store commands',
+        );
       const candidate = { ...options, ...next };
       if (candidate.registry && (next.renderers || next.tabs))
         throw new Error('registry cannot be combined with renderers or tabs');
+      registeredShortcuts(candidate);
       validateTheme(candidate.theme ?? {});
       validateTabBar(candidate.tabBar ?? {});
       const sameRegistrations =
@@ -736,8 +877,7 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
         (!candidate.registry && candidate.tabs !== options.tabs) ||
         candidate.renderIcon !== options.renderIcon ||
         candidate.popouts !== options.popouts ||
-        JSON.stringify(candidate.messages) !== JSON.stringify(options.messages) ||
-        JSON.stringify(candidate.shortcuts) !== JSON.stringify(options.shortcuts);
+        JSON.stringify(candidate.messages) !== JSON.stringify(options.messages);
       // Clear maps derived from the old registry when returning to low-level registration.
       if ('registry' in next && !next.registry && options.registry) {
         Object.assign(options, { renderers: undefined, tabs: undefined });
@@ -747,6 +887,7 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
       if ('tabBar' in next) tabBar = structuredClone(options.tabBar ?? {});
       bindRegistry();
       refreshOptions(repaintChrome);
+      menu.refreshShortcuts();
       refreshTheme();
     },
     exportWorkspace() {
@@ -801,21 +942,7 @@ function mountLayoutInternal(host: HTMLElement, input: ResolvedLayoutOptions): M
     dispose() {
       if (disposed) return;
       disposed = true;
-      menu.dispose();
-      dragScope?.dispose();
       scope.dispose();
-      windows.dispose();
-      for (const p of panes.values()) {
-        try {
-          p.dispose();
-        } catch (e) {
-          error(e);
-        }
-      }
-      for (const r of regions.values()) r.scope.dispose();
-      panes.clear();
-      regions.clear();
-      root.remove();
     },
   };
 }

package/src/resize.ts

@@ -6,6 +6,7 @@ export function isolatedResize(
   layout: Layout,
   splitId: string,
   extent: (node: Node, axis: Axis) => number,
+  measureBounds: typeof bounds = bounds,
 ) {
   const split = findNode(layout.root, splitId);
   if (split?.kind !== 'split') throw new Error('Split not found');
@@ -22,7 +23,7 @@ export function isolatedResize(
   capture(split);
   function limits(node: Node, start: boolean): [number, number] {
     if (node.kind === 'group') {
-      const b = bounds(node, layout),
+      const b = measureBounds(node, layout),
         size = sizes.get(node.id)!;
       return axis === 'horizontal'
         ? [b.minWidth - size, b.maxWidth - size]

package/src/shortcut-registration.ts

@@ -0,0 +1,106 @@
+import type {
+  KeyBinding,
+  RegisteredShortcut,
+  WorkspaceAction,
+  WorkspaceSettings,
+} from './types.js';
+
+/** Stable conflict priority. Existing presets retain their original priority. */
+export const actionOrder: readonly WorkspaceAction[] = [
+  'maximize',
+  'addTab',
+  'restoreClosedTab',
+  'closeActiveTab',
+  'closePane',
+  'closeEmptyPane',
+  'popout',
+  'joinSiblingRegion',
+  'splitLeft',
+  'splitRight',
+  'splitUp',
+  'splitDown',
+  'tabOrientationDefault',
+  'tabOrientationHorizontal',
+  'tabOrientationVertical',
+  'tabDisplayDefault',
+  'tabDisplayAutomatic',
+  'tabDisplayCompact',
+];
+const defaults: Partial<Record<WorkspaceAction, readonly KeyBinding[]>> = {
+  maximize: [{ key: '`' }, { key: ' ', alt: true }],
+  addTab: [{ key: 't' }],
+  restoreClosedTab: [{ key: 'r' }],
+};
+export function registeredShortcuts(options: {
+  shortcuts?: WorkspaceSettings['shortcuts'];
+}): readonly RegisteredShortcut[] {
+  const result: RegisteredShortcut[] = [];
+  for (const action of actionOrder) {
+    const value =
+      options.shortcuts === true
+        ? !!defaults[action]
+        : typeof options.shortcuts === 'object'
+          ? options.shortcuts[action]
+          : false;
+    if (!value) continue;
+    const extended = typeof value === 'object' && 'bindings' in value ? value : undefined;
+    const configured = extended ? extended.bindings : value;
+    const bindings: readonly KeyBinding[] =
+      configured === true
+        ? (defaults[action] ?? [])
+        : Array.isArray(configured)
+          ? configured
+          : [configured as KeyBinding];
+    const handling = extended?.handling ?? 'quilt';
+    if (handling !== 'quilt' && handling !== 'external')
+      throw new Error('Invalid shortcut handling');
+    const normalized = bindings.map((binding) => {
+      if (
+        !binding ||
+        typeof binding.key !== 'string' ||
+        !binding.key ||
+        (binding.key !== ' ' && /\s/.test(binding.key))
+      )
+        throw new Error('Invalid shortcut key');
+      for (const modifier of ['ctrl', 'alt', 'shift', 'meta'] as const)
+        if (binding[modifier] !== undefined && typeof binding[modifier] !== 'boolean')
+          throw new Error(`Invalid shortcut modifier: ${modifier}`);
+      return Object.freeze({
+        key: binding.key,
+        ctrl: !!binding.ctrl,
+        alt: !!binding.alt,
+        shift: !!binding.shift,
+        meta: !!binding.meta,
+      });
+    });
+    if (normalized.length)
+      result.push(Object.freeze({ action, handling, bindings: Object.freeze(normalized) }));
+  }
+  return Object.freeze(result);
+}
+export function formatShortcut(binding: Readonly<KeyBinding>): string {
+  return [
+    binding.ctrl && 'Ctrl',
+    binding.alt && 'Alt',
+    binding.shift && 'Shift',
+    binding.meta && 'Meta',
+    binding.key === ' '
+      ? 'Space'
+      : binding.key.length === 1
+        ? binding.key.toUpperCase()
+        : binding.key,
+  ]
+    .filter(Boolean)
+    .join(' + ');
+}
+export function ariaShortcut(binding: Readonly<KeyBinding>): string {
+  return [
+    binding.ctrl && 'Control',
+    binding.alt && 'Alt',
+    binding.shift && 'Shift',
+    binding.meta && 'Meta',
+    binding.key === ' ' ? 'Space' : binding.key === '+' ? 'Plus' : binding.key,
+  ]
+    .filter(Boolean)
+    .join('+');
+}

package/src/shortcuts.ts

@@ -1,14 +1,7 @@
-import { findNode } from 'quilt-core';
-import type { Group } from 'quilt-core';
-import type { ResolvedLayoutOptions, KeyBinding } from './types.js';
+import type { ActionContext, ResolvedLayoutOptions, WorkspaceAction } from './types.js';
 import type { Scope } from './lifetime.js';
-type Action = 'maximize' | 'addTab' | 'restoreClosedTab';
-const defaults: Record<Action, readonly KeyBinding[]> = {
-  maximize: [{ key: '`' }, { key: ' ', alt: true }],
-  addTab: [{ key: 't' }],
-  restoreClosedTab: [{ key: 'r' }],
-};
-export function shortcutEnabled(options: ResolvedLayoutOptions, key: Action | 'middleClickClose') {
+import { registeredShortcuts } from './shortcut-registration.js';
+export function shortcutEnabled(options: ResolvedLayoutOptions, key: 'middleClickClose') {
   return (
     options.shortcuts === true ||
     (typeof options.shortcuts === 'object' && !!options.shortcuts[key])
@@ -19,8 +12,10 @@ export function bindShortcuts(
   root: HTMLElement,
   options: ResolvedLayoutOptions,
   scope: Scope,
-  act: (fn: () => void) => void,
-  addTab: (group: Group) => void,
+  canExecute: (action: WorkspaceAction, context?: ActionContext) => boolean,
+  execute: (action: WorkspaceAction, context?: ActionContext) => Promise<boolean>,
+  menuTarget: () =>
+    { dialog: HTMLDialogElement; context: ActionContext; close(): void } | undefined,
 ) {
   const doc = root.ownerDocument;
   let hoveredGroup: string | undefined;
@@ -35,65 +30,45 @@ export function bindShortcuts(
   scope.add(() => {
     if (hovered.get(doc) === root) hovered.delete(doc);
   });
+  const ownsFocus = () =>
+    (doc.activeElement?.closest<HTMLElement>('.layouts') ?? hovered.get(doc)) === root;
+  const context = (): ActionContext => {
+    if (!ownsFocus()) return {};
+    const menu = menuTarget();
+    if (menu) return menu.context;
+    const focusedGroup = doc.activeElement?.closest<HTMLElement>('.layouts-group')?.dataset.nodeId;
+    const groupId = (hovered.get(doc) === root ? hoveredGroup : undefined) ?? focusedGroup;
+    return groupId ? { groupId } : {};
+  };
   scope.listen(doc, 'keydown', (event) => {
     const e = event as KeyboardEvent;
     const target = e.target as HTMLElement | null;
-    const focused = doc.activeElement?.closest<HTMLElement>('.layouts');
-    if ((focused ?? hovered.get(doc)) !== root || e.defaultPrevented || e.repeat || e.isComposing)
-      return;
+    if (!ownsFocus() || e.defaultPrevented || e.repeat || e.isComposing) return;
+    const menu = menuTarget();
     if (
       target?.closest(
-        'input, textarea, select, [contenteditable]:not([contenteditable="false"]), dialog',
+        'input, textarea, select, [contenteditable]:not([contenteditable="false"])',
       ) ||
-      doc.querySelector('dialog[open]')
+      Array.from(doc.querySelectorAll('dialog[open]')).some((dialog) => dialog !== menu?.dialog)
     )
       return;
-    const matches = (binding: KeyBinding) =>
-      e.key.toLowerCase() === binding.key.toLowerCase() &&
-      e.ctrlKey === !!binding.ctrl &&
-      e.altKey === !!binding.alt &&
-      e.shiftKey === !!binding.shift &&
-      e.metaKey === !!binding.meta;
-    const action = (Object.keys(defaults) as Action[]).find((key) => {
-      const configured =
-        options.shortcuts === true
-          ? true
-          : typeof options.shortcuts === 'object'
-            ? options.shortcuts[key]
-            : false;
-      if (!configured) return false;
-      const bindings =
-        configured === true
-          ? defaults[key]
-          : Array.isArray(configured)
-            ? configured
-            : [configured as KeyBinding];
-      return bindings.some(matches);
-    });
-    if (!action) return;
-    if (action === 'restoreClosedTab') {
-      if (!options.store.canRestoreClosedTab()) return;
-      e.preventDefault();
-      act(() => options.store.restoreClosedTab());
-      return;
-    }
-    const focusedGroup =
-      focused === root ? target?.closest<HTMLElement>('.layouts-group')?.dataset.nodeId : undefined;
-    const id = (hovered.get(doc) === root ? hoveredGroup : undefined) ?? focusedGroup;
-    const group = id ? findNode(options.store.getSnapshot().root, id) : undefined;
-    if (group?.kind !== 'group') return;
-    if (
-      action === 'addTab' &&
-      (!options.tabs?.list().length || !group.panes.every((id) => options.store.can(id, 'move')))
-    )
-      return;
-    e.preventDefault();
-    act(() =>
-      action === 'addTab'
-        ? addTab(group)
-        : options.store.maximize(
-            options.store.getSnapshot().maximized === group.id ? null : group.id,
-          ),
+    const entry = registeredShortcuts(options).find(
+      (entry) =>
+        entry.handling === 'quilt' &&
+        entry.bindings.some(
+          (binding) =>
+            e.key.toLowerCase() === binding.key.toLowerCase() &&
+            e.ctrlKey === !!binding.ctrl &&
+            e.altKey === !!binding.alt &&
+            e.shiftKey === !!binding.shift &&
+            e.metaKey === !!binding.meta,
+        ),
     );
+    const actionContext = context();
+    if (!entry || !canExecute(entry.action, actionContext)) return;
+    e.preventDefault();
+    menu?.close();
+    void execute(entry.action, actionContext);
   });
+  return context;
 }