@leavepulse/ui 0.20.9 → 0.21.0

package/dist/assets/{LpCommandPalette-C3LdDNHk.css → LpCommandPalette-CEY-pajO.css}

@@ -1,16 +1,16 @@
 
 /* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-75a17488] {
-  animation: lp-cmd-in-75a17488 140ms ease-out both;
+.lp-cmd-item[data-v-a23a2f5f] {
+  animation: lp-cmd-in-a23a2f5f 140ms ease-out both;
 }
-@keyframes lp-cmd-in-75a17488 {
+@keyframes lp-cmd-in-a23a2f5f {
 from {
     opacity: 0;
     transform: translateY(3px);
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-75a17488] {
+.lp-cmd-item[data-v-a23a2f5f] {
     animation: none;
 }
 }

package/dist/assets/LpShortcutsDialog-B7H-RZLQ.css

@@ -0,0 +1,55 @@
+
+/* Two columns where there is room: the list is long enough that one column
+   pushes the last group off a laptop screen. */
+.shortcut-groups[data-v-d86b724b] {
+  display: grid;
+  gap: 18px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+.shortcut-group h3[data-v-d86b724b] {
+  margin: 0 0 6px;
+  color: var(--color-muted);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.shortcut-group dl[data-v-d86b724b] {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin: 0;
+}
+.shortcut-row[data-v-d86b724b] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 5px 0;
+}
+.shortcut-row dt[data-v-d86b724b] {
+  color: var(--color-ink);
+  font-size: 0.82rem;
+  min-width: 0;
+}
+.shortcut-row dd[data-v-d86b724b] {
+  display: flex;
+  flex-shrink: 0;
+  gap: 3px;
+  margin: 0;
+}
+kbd[data-v-d86b724b] {
+  display: inline-flex;
+  min-width: 20px;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border: 1px solid var(--color-line-strong);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
+  color: var(--color-muted-strong);
+  font-family: inherit;
+  font-size: 0.7rem;
+  line-height: 1.5;
+}

package/dist/chunks/_plugin-vue_export-helper-1tPrXgE0.js

@@ -0,0 +1,10 @@
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+export {
+  _export_sfc as _
+};

package/dist/component-names.d.ts

@@ -1 +1 @@
-export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpCheckbox", "LpCodeBlock", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpModal", "LpNotificationBell", "LpNumberField", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpScrollArea", "LpSegmented", "LpSelect", "LpServiceNode", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar"];
+export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpCheckbox", "LpCodeBlock", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpModal", "LpNotificationBell", "LpNumberField", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpScrollArea", "LpSegmented", "LpSelect", "LpServiceNode", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar"];

package/dist/components/LpCommandPalette.vue.js

@@ -1,8 +1,10 @@
-import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createVNode, withModifiers, createTextVNode, createElementVNode, withDirectives, withKeys, vModelText, createElementBlock, toDisplayString, createCommentVNode, Fragment, renderList, normalizeClass } from "vue";
+import { defineComponent, ref, computed, watch, nextTick, openBlock, createBlock, unref, withCtx, createVNode, withModifiers, createTextVNode, createElementVNode, withDirectives, withKeys, vModelText, createElementBlock, toDisplayString, createCommentVNode, Fragment, renderList, normalizeClass } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from "reka-ui";
 import { _ as _sfc_main$1 } from "../chunks/LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$2 } from "../chunks/LpScrollArea-Du8tW8c5.js";
-import '../assets/LpCommandPalette-C3LdDNHk.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
+import { useHotkeys } from "../composables/useHotkeys.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
+import '../assets/LpCommandPalette-CEY-pajO.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
 const _hoisted_2 = ["placeholder", "onKeydown"];
 const _hoisted_3 = {
   key: 0,
@@ -149,16 +151,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     );
-    function onHotkey(e) {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
-        e.preventDefault();
-        emit("update:open", !props.open);
-      }
-    }
-    onMounted(() => {
-      if (props.hotkey) window.addEventListener("keydown", onHotkey);
-    });
-    onBeforeUnmount(() => window.removeEventListener("keydown", onHotkey));
+    useHotkeys(
+      () => props.hotkey ? [
+        {
+          key: "k",
+          code: "KeyK",
+          ctrl: true,
+          allowInInput: true,
+          handler: () => emit("update:open", !props.open)
+        }
+      ] : []
+    );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DialogRoot), {
         open: __props.open,
@@ -297,14 +300,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-75a17488"]]);
+const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a23a2f5f"]]);
 export {
   LpCommandPalette as default
 };

package/dist/components/LpShortcutsDialog.vue.d.ts

@@ -0,0 +1,25 @@
+export interface ShortcutEntry {
+    /** Rendered one <kbd> per "+"-separated key, so write it the way it reads. */
+    combo: string;
+    label: string;
+}
+export interface ShortcutGroup {
+    title: string;
+    entries: ShortcutEntry[];
+}
+type __VLS_Props = {
+    open?: boolean;
+    groups: ShortcutGroup[];
+    title?: string;
+    description?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    title: string;
+    open: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/LpShortcutsDialog.vue.js

@@ -0,0 +1,63 @@
+import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, unref } from "vue";
+import { _ as _sfc_main$1 } from "../chunks/LpModal-DKFdzKwV.js";
+import { appleModifierLabel } from "../composables/useHotkeys.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
+import '../assets/LpShortcutsDialog-B7H-RZLQ.css';const _hoisted_1 = { class: "shortcut-groups" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpShortcutsDialog",
+  props: {
+    open: { type: Boolean, default: false },
+    groups: {},
+    title: { default: "Keyboard shortcuts" },
+    description: {}
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        open: props.open,
+        size: "lg",
+        title: props.title,
+        description: props.description,
+        "onUpdate:open": _cache[0] || (_cache[0] = (value) => emit("update:open", value))
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(props.groups, (group) => {
+              return openBlock(), createElementBlock("section", {
+                key: group.title,
+                class: "shortcut-group"
+              }, [
+                createElementVNode("h3", null, toDisplayString(group.title), 1),
+                createElementVNode("dl", null, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(group.entries, (entry) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: entry.combo,
+                      class: "shortcut-row"
+                    }, [
+                      createElementVNode("dt", null, toDisplayString(entry.label), 1),
+                      createElementVNode("dd", null, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(entry.combo.split("+"), (key, index) => {
+                          return openBlock(), createElementBlock("kbd", {
+                            key: `${key}-${index}`
+                          }, toDisplayString(unref(appleModifierLabel)(key.trim())), 1);
+                        }), 128))
+                      ])
+                    ]);
+                  }), 128))
+                ])
+              ]);
+            }), 128))
+          ])
+        ]),
+        _: 1
+      }, 8, ["open", "title", "description"]);
+    };
+  }
+});
+const LpShortcutsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d86b724b"]]);
+export {
+  LpShortcutsDialog as default
+};

package/dist/composables/useHotkeys.d.ts

@@ -0,0 +1,45 @@
+import { MaybeRefOrGetter } from 'vue';
+export interface HotkeyBinding {
+    /** Layout-produced key, compared case-insensitively ("l", "f2", "escape"). */
+    key: string;
+    /**
+     * Physical key position ("KeyL", "F2", "Digit1"). Matches on its own, which
+     * is what makes non-Latin layouts work.
+     */
+    code?: string;
+    /** Ctrl on Windows/Linux, ⌘ on macOS — the two are treated as one. */
+    ctrl?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    /**
+     * Runs even while a text field has focus. Only for shortcuts that mean
+     * something there — Escape, and the palette the user reaches from anywhere.
+     */
+    allowInInput?: boolean;
+    /**
+     * Returning `false` declines the key: the event keeps its default and the
+     * search moves on. This is what lets a binding defer to a layer that owns the
+     * key better than it does — Escape belongs to whichever overlay is on top,
+     * and swallowing it here would close all of them.
+     */
+    handler: () => void | boolean;
+}
+/**
+ * Whether this machine prints ⌘ where the rest print Ctrl. Read once: the
+ * keyboard does not change under a running window, and the check is only ever
+ * used to pick a label.
+ */
+export declare const isAppleKeyboard: boolean;
+/**
+ * The symbol to print for a modifier on this platform. Bindings treat Ctrl and
+ * Meta as one modifier, so only the label may differ — never the binding.
+ */
+export declare function appleModifierLabel(key: string): string;
+/**
+ * Bind a list of hotkeys for as long as the calling component is mounted.
+ *
+ * The list is read on every keystroke rather than captured once, so bindings
+ * may come and go with the state that owns them — a getter is the point, not a
+ * formality.
+ */
+export declare function useHotkeys(bindings: MaybeRefOrGetter<HotkeyBinding[]>): void;

package/dist/composables/useHotkeys.js

@@ -0,0 +1,53 @@
+import { onMounted, onBeforeUnmount, toValue } from "vue";
+const isAppleKeyboard = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || "");
+function appleModifierLabel(key) {
+  if (!isAppleKeyboard) return key;
+  if (key === "Ctrl") return "⌘";
+  if (key === "Alt") return "⌥";
+  return key;
+}
+const TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "text",
+  "search",
+  "email",
+  "number",
+  "password",
+  "tel",
+  "url"
+]);
+function isTextEntry(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  if (target instanceof HTMLTextAreaElement) return true;
+  if (target instanceof HTMLInputElement) {
+    return TEXT_INPUT_TYPES.has(target.type);
+  }
+  return false;
+}
+function matches(event, binding) {
+  const ctrlHeld = event.ctrlKey || event.metaKey;
+  if (ctrlHeld !== Boolean(binding.ctrl)) return false;
+  if (event.shiftKey !== Boolean(binding.shift)) return false;
+  if (event.altKey !== Boolean(binding.alt)) return false;
+  return event.key.toLowerCase() === binding.key.toLowerCase() || binding.code !== void 0 && event.code === binding.code;
+}
+function useHotkeys(bindings) {
+  function onKeydown(event) {
+    if (event.isComposing) return;
+    const inTextEntry = isTextEntry(event.target);
+    for (const binding of toValue(bindings)) {
+      if (inTextEntry && !binding.allowInInput) continue;
+      if (!matches(event, binding)) continue;
+      if (binding.handler() === false) continue;
+      event.preventDefault();
+      return;
+    }
+  }
+  onMounted(() => window.addEventListener("keydown", onKeydown));
+  onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+}
+export {
+  appleModifierLabel,
+  isAppleKeyboard,
+  useHotkeys
+};

package/dist/index.d.ts

@@ -67,6 +67,8 @@ export { default as LpSelect } from './components/LpSelect.vue';
 export type { SelectOption, SelectValue } from './components/LpSelect.vue';
 export { default as LpServiceNode } from './components/LpServiceNode.vue';
 export type { ServiceNodeData } from './components/LpServiceNode.vue';
+export { default as LpShortcutsDialog } from './components/LpShortcutsDialog.vue';
+export type { ShortcutEntry, ShortcutGroup } from './components/LpShortcutsDialog.vue';
 export { default as LpSidebar } from './components/LpSidebar.vue';
 export type { SidebarItem, SidebarSection } from './components/LpSidebar.vue';
 export { default as LpSkeleton } from './components/LpSkeleton.vue';
@@ -107,6 +109,8 @@ export { amber, dark, leavepulse, light, lime, nord, presets, rose, violet } fro
 export type { PresetName } from './theme/presets';
 export { parseConfig, serializeConfig, UI_CONFIG_VERSION } from './theme/config';
 export type { UiConfig } from './theme/config';
+export { useHotkeys, isAppleKeyboard, appleModifierLabel } from './composables/useHotkeys';
+export type { HotkeyBinding } from './composables/useHotkeys';
 export { useInputFilter } from './composables/useInputFilter';
 export type { UseInputFilterOptions } from './composables/useInputFilter';
 export { useSettled } from './composables/useSettled';

package/dist/index.js

@@ -48,6 +48,7 @@ import { _ as _42 } from "./chunks/LpScrollArea-Du8tW8c5.js";
 import { _ as _43 } from "./chunks/LpSegmented-BmpanyAo.js";
 import { _ as _44 } from "./chunks/LpSelect-D5mU4cZO.js";
 import { _ as _45 } from "./chunks/LpServiceNode-Dc-Ut5RS.js";
+import { default as default3 } from "./components/LpShortcutsDialog.vue.js";
 import { _ as _46 } from "./chunks/LpSidebar-Bd0148dd.js";
 import { _ as _47 } from "./chunks/LpSkeleton-eSFIo4kD.js";
 import { _ as _48 } from "./chunks/LpSlider-B1SF3pRV.js";
@@ -69,6 +70,7 @@ import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
 import { useLayout } from "./layout/useLayout.js";
+import { appleModifierLabel, isAppleKeyboard, useHotkeys } from "./composables/useHotkeys.js";
 import { useInputFilter } from "./composables/useInputFilter.js";
 import { useSettled } from "./composables/useSettled.js";
 import { useTilt } from "./composables/useTilt.js";
@@ -152,6 +154,7 @@ export {
   _43 as LpSegmented,
   _44 as LpSelect,
   _45 as LpServiceNode,
+  default3 as LpShortcutsDialog,
   _46 as LpSidebar,
   _47 as LpSkeleton,
   _48 as LpSlider,
@@ -176,6 +179,7 @@ export {
   addTab,
   b as amber,
   ancestorIds,
+  appleModifierLabel,
   c as applyTheme,
   d as applyThemeWithTransition,
   blockTitle,
@@ -198,6 +202,7 @@ export {
   formatAddress,
   formatModified,
   formatSize,
+  isAppleKeyboard,
   i as isBrokenBackdropEngine,
   l as leavepulse,
   h as light,
@@ -228,6 +233,7 @@ export {
   m as themeToCssVars,
   tileUrl,
   unproject,
+  useHotkeys,
   useInputFilter,
   useLayout,
   useSettled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.20.9",
+  "version": "0.21.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/component-names.ts

@@ -51,6 +51,7 @@ export const COMPONENT_NAMES = [
   "LpSegmented",
   "LpSelect",
   "LpServiceNode",
+  "LpShortcutsDialog",
   "LpSidebar",
   "LpSidebarNav",
   "LpSkeleton",

package/src/components/LpCommandPalette.vue

@@ -18,9 +18,10 @@ import {
   DialogRoot,
   DialogTitle,
 } from "reka-ui"
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue"
+import { computed, nextTick, ref, watch } from "vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
+import { useHotkeys } from "../composables/useHotkeys"
 
 export interface Command {
   id: string
@@ -196,16 +197,22 @@ watch(
   },
 )
 
-function onHotkey(e: KeyboardEvent) {
-  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
-    e.preventDefault()
-    emit("update:open", !props.open)
-  }
-}
-onMounted(() => {
-  if (props.hotkey) window.addEventListener("keydown", onHotkey)
-})
-onBeforeUnmount(() => window.removeEventListener("keydown", onHotkey))
+// Through useHotkeys rather than a listener of its own: the palette is the one
+// shortcut that has to work from inside a text field, and `code` is what makes
+// it fire on a layout where Ctrl-K arrives as "л".
+useHotkeys(() =>
+  props.hotkey
+    ? [
+        {
+          key: "k",
+          code: "KeyK",
+          ctrl: true,
+          allowInInput: true,
+          handler: () => emit("update:open", !props.open),
+        },
+      ]
+    : [],
+)
 </script>
 
 <template>

package/src/components/LpShortcutsDialog.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/*
+ * A keyboard reference, conventionally opened with F1.
+ *
+ * Shortcuts are passed in as data rather than read off a live binding list: a
+ * binding knows its key but not what to call it, and in most apps half of them
+ * are only mounted in the section they belong to — a reference that lists what
+ * happens to be active is not a reference.
+ *
+ * Combos are written the way they read ("Ctrl+Shift+M", "←→↑↓") and split on
+ * "+" into one <kbd> each.
+ */
+import LpModal from "./LpModal.vue"
+import { appleModifierLabel } from "../composables/useHotkeys"
+
+export interface ShortcutEntry {
+  /** Rendered one <kbd> per "+"-separated key, so write it the way it reads. */
+  combo: string
+  label: string
+}
+
+export interface ShortcutGroup {
+  title: string
+  entries: ShortcutEntry[]
+}
+
+const props = withDefaults(
+  defineProps<{
+    open?: boolean
+    groups: ShortcutGroup[]
+    title?: string
+    description?: string
+  }>(),
+  { open: false, title: "Keyboard shortcuts" },
+)
+
+const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
+</script>
+
+<template>
+  <LpModal
+    :open="props.open"
+    size="lg"
+    :title="props.title"
+    :description="props.description"
+    @update:open="(value: boolean) => emit('update:open', value)"
+  >
+    <div class="shortcut-groups">
+      <section v-for="group in props.groups" :key="group.title" class="shortcut-group">
+        <h3>{{ group.title }}</h3>
+        <dl>
+          <div v-for="entry in group.entries" :key="entry.combo" class="shortcut-row">
+            <dt>{{ entry.label }}</dt>
+            <dd>
+              <kbd v-for="(key, index) in entry.combo.split('+')" :key="`${key}-${index}`">
+                {{ appleModifierLabel(key.trim()) }}
+              </kbd>
+            </dd>
+          </div>
+        </dl>
+      </section>
+    </div>
+  </LpModal>
+</template>
+
+<style scoped>
+/* Two columns where there is room: the list is long enough that one column
+   pushes the last group off a laptop screen. */
+.shortcut-groups {
+  display: grid;
+  gap: 18px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.shortcut-group h3 {
+  margin: 0 0 6px;
+  color: var(--color-muted);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.shortcut-group dl {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin: 0;
+}
+
+.shortcut-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 5px 0;
+}
+
+.shortcut-row dt {
+  color: var(--color-ink);
+  font-size: 0.82rem;
+  min-width: 0;
+}
+
+.shortcut-row dd {
+  display: flex;
+  flex-shrink: 0;
+  gap: 3px;
+  margin: 0;
+}
+
+kbd {
+  display: inline-flex;
+  min-width: 20px;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border: 1px solid var(--color-line-strong);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
+  color: var(--color-muted-strong);
+  font-family: inherit;
+  font-size: 0.7rem;
+  line-height: 1.5;
+}
+</style>

package/src/composables/useHotkeys.ts

@@ -0,0 +1,131 @@
+import { onBeforeUnmount, onMounted, type MaybeRefOrGetter, toValue } from "vue"
+
+/*
+ * One keydown listener over a registry of bindings, so a shortcut is declared
+ * next to the action it runs instead of growing another window-level handler.
+ *
+ * Three things every hand-rolled shortcut handler tends to get wrong, and the
+ * reason this is worth sharing rather than rewriting per app:
+ *
+ *   layout — a binding names its key twice over. `key` is what the layout
+ *     produced, `code` is the physical position, and either matching counts. On
+ *     a Cyrillic layout Ctrl+K arrives as `key: "л"` with `code: "KeyK"`, and a
+ *     user pressing the key printed "K" expects it to work either way.
+ *
+ *   IME — a composing input delivers every keystroke as its own event, so
+ *     acting on them fires shortcuts mid-word.
+ *
+ *   text entry — a shortcut that steals a key from someone typing is a bug,
+ *     except for the few that mean something in a field (Escape, a palette).
+ *
+ * Modifier note: Ctrl and Meta are one modifier here, since macOS binds ⌘ where
+ * the rest bind Ctrl. Label the difference in the UI, not in the binding.
+ */
+
+export interface HotkeyBinding {
+  /** Layout-produced key, compared case-insensitively ("l", "f2", "escape"). */
+  key: string
+  /**
+   * Physical key position ("KeyL", "F2", "Digit1"). Matches on its own, which
+   * is what makes non-Latin layouts work.
+   */
+  code?: string
+  /** Ctrl on Windows/Linux, ⌘ on macOS — the two are treated as one. */
+  ctrl?: boolean
+  shift?: boolean
+  alt?: boolean
+  /**
+   * Runs even while a text field has focus. Only for shortcuts that mean
+   * something there — Escape, and the palette the user reaches from anywhere.
+   */
+  allowInInput?: boolean
+  /**
+   * Returning `false` declines the key: the event keeps its default and the
+   * search moves on. This is what lets a binding defer to a layer that owns the
+   * key better than it does — Escape belongs to whichever overlay is on top,
+   * and swallowing it here would close all of them.
+   */
+  handler: () => void | boolean
+}
+
+/**
+ * Whether this machine prints ⌘ where the rest print Ctrl. Read once: the
+ * keyboard does not change under a running window, and the check is only ever
+ * used to pick a label.
+ */
+export const isAppleKeyboard =
+  typeof navigator !== "undefined"
+  && /Mac|iPhone|iPad|iPod/.test(navigator.platform || "")
+
+/**
+ * The symbol to print for a modifier on this platform. Bindings treat Ctrl and
+ * Meta as one modifier, so only the label may differ — never the binding.
+ */
+export function appleModifierLabel(key: string): string {
+  if (!isAppleKeyboard) return key
+  if (key === "Ctrl") return "⌘"
+  if (key === "Alt") return "⌥"
+  return key
+}
+
+const TEXT_INPUT_TYPES = new Set([
+  "text",
+  "search",
+  "email",
+  "number",
+  "password",
+  "tel",
+  "url",
+])
+
+/**
+ * Whether the event lands in something the user is typing into. Checked off the
+ * event target rather than `document.activeElement` so it stays right inside a
+ * dialog's focus trap.
+ */
+function isTextEntry(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  if (target.isContentEditable) return true
+  if (target instanceof HTMLTextAreaElement) return true
+  if (target instanceof HTMLInputElement) {
+    return TEXT_INPUT_TYPES.has(target.type)
+  }
+  return false
+}
+
+function matches(event: KeyboardEvent, binding: HotkeyBinding): boolean {
+  const ctrlHeld = event.ctrlKey || event.metaKey
+  if (ctrlHeld !== Boolean(binding.ctrl)) return false
+  if (event.shiftKey !== Boolean(binding.shift)) return false
+  if (event.altKey !== Boolean(binding.alt)) return false
+  return (
+    event.key.toLowerCase() === binding.key.toLowerCase()
+    || (binding.code !== undefined && event.code === binding.code)
+  )
+}
+
+/**
+ * Bind a list of hotkeys for as long as the calling component is mounted.
+ *
+ * The list is read on every keystroke rather than captured once, so bindings
+ * may come and go with the state that owns them — a getter is the point, not a
+ * formality.
+ */
+export function useHotkeys(bindings: MaybeRefOrGetter<HotkeyBinding[]>) {
+  function onKeydown(event: KeyboardEvent) {
+    if (event.isComposing) return
+    const inTextEntry = isTextEntry(event.target)
+    for (const binding of toValue(bindings)) {
+      if (inTextEntry && !binding.allowInInput) continue
+      if (!matches(event, binding)) continue
+      // Claimed only once the handler has run and not declined, so a binding
+      // that stands down leaves the key untouched for whoever handles it next.
+      if (binding.handler() === false) continue
+      event.preventDefault()
+      return
+    }
+  }
+
+  onMounted(() => window.addEventListener("keydown", onKeydown))
+  onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown))
+}

package/src/index.ts

@@ -99,6 +99,8 @@ export { default as LpSelect } from "./components/LpSelect.vue"
 export type { SelectOption, SelectValue } from "./components/LpSelect.vue"
 export { default as LpServiceNode } from "./components/LpServiceNode.vue"
 export type { ServiceNodeData } from "./components/LpServiceNode.vue"
+export { default as LpShortcutsDialog } from "./components/LpShortcutsDialog.vue"
+export type { ShortcutEntry, ShortcutGroup } from "./components/LpShortcutsDialog.vue"
 export { default as LpSidebar } from "./components/LpSidebar.vue"
 export type { SidebarItem, SidebarSection } from "./components/LpSidebar.vue"
 export { default as LpSkeleton } from "./components/LpSkeleton.vue"
@@ -182,6 +184,8 @@ export type { PresetName } from "./theme/presets"
 export { parseConfig, serializeConfig, UI_CONFIG_VERSION } from "./theme/config"
 export type { UiConfig } from "./theme/config"
 
+export { useHotkeys, isAppleKeyboard, appleModifierLabel } from "./composables/useHotkeys"
+export type { HotkeyBinding } from "./composables/useHotkeys"
 export { useInputFilter } from "./composables/useInputFilter"
 export type { UseInputFilterOptions } from "./composables/useInputFilter"
 export { useSettled } from "./composables/useSettled"