@leavepulse/ui 0.20.8 → 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/{LpAddressInput-DaJ97mQ4.js → LpAddressInput-B411MOJa.js}

@@ -6,7 +6,7 @@ import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$1 } from "./LpFormField-Bn-ZwC6z.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpInput-BauZRyzm.js";
-import { _ as _sfc_main$7 } from "./LpModal-2YEJI45Q.js";
+import { _ as _sfc_main$7 } from "./LpModal-DKFdzKwV.js";
 import { _ as _sfc_main$6 } from "./LpSelect-D5mU4cZO.js";
 const _hoisted_1 = { class: "flex flex-col gap-3" };
 const _hoisted_2 = { class: "flex items-stretch gap-2" };

package/dist/chunks/{LpAppShell-Ds3WkurD.js → LpAppShell-CfM7fdr3.js}

@@ -1,8 +1,8 @@
 import { defineComponent, computed, watch, openBlock, createElementBlock, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, createBlock } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$4 } from "./LpScrollArea-CXy8dkTN.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-B_UD_yUx.js";
+import { _ as _sfc_main$4 } from "./LpScrollArea-Du8tW8c5.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-Bd0148dd.js";
 const _hoisted_1 = { class: "flex h-dvh overflow-hidden bg-surface text-ink" };
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };
 const _hoisted_3 = { class: "flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };

package/dist/chunks/{LpConfirmDialog-Cwqzbfgo.js → LpConfirmDialog-D8pBGPOI.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createBlock, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
-import { _ as _sfc_main$1 } from "./LpModal-2YEJI45Q.js";
+import { _ as _sfc_main$1 } from "./LpModal-DKFdzKwV.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {

package/dist/chunks/{LpDrawer-DcxlpxJ7.js → LpDrawer-B4cNj39a.js}

@@ -3,7 +3,7 @@ import { usePointerSwipe } from "@vueuse/core";
 import { DrawerRoot, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHandle, DrawerTitle, DrawerDescription, DrawerClose } from "vaul-vue";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-CXy8dkTN.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-Du8tW8c5.js";
 const _hoisted_1 = { class: "text-base font-semibold text-ink" };
 const _hoisted_2 = { class: "flex flex-col gap-1" };
 const _hoisted_3 = ["data-vaul-no-drag"];

package/dist/chunks/{LpFileTree-BGNzXknB.js → LpFileTree-d9nXtSVo.js}

@@ -2,7 +2,7 @@ import { defineComponent, ref, watch, computed, openBlock, createElementBlock, F
 import { formatSize, sortNodes, computeStats, subtreeIds, ancestorIds } from "../components/fileTree.js";
 import { _ as _sfc_main$1 } from "./LpEmptyState-CrfyRJUG.js";
 import { _ as _sfc_main$3 } from "./LpFileTreeNode-DFg4PhOK.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-CXy8dkTN.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-Du8tW8c5.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex h-full w-full min-w-0 flex-col gap-1 overflow-hidden"

package/dist/chunks/{LpLogViewer-DQod8kXW.js → LpLogViewer-BXPBUV21.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, watch, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, createVNode, normalizeStyle, withCtx, createElementVNode, toDisplayString, createCommentVNode, Fragment, createBlock, resolveDynamicComponent, TransitionGroup, mergeProps, renderList, normalizeClass, createTextVNode, Transition } from "vue";
 import { _ as _sfc_main$3 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpScrollArea-CXy8dkTN.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-Du8tW8c5.js";
 const _hoisted_1 = { class: "relative overflow-hidden rounded-card border border-line bg-surface font-mono text-xs leading-relaxed" };
 const _hoisted_2 = {
   key: 0,

package/dist/chunks/{LpModal-2YEJI45Q.js → LpModal-DKFdzKwV.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, useSlots, ref, watch, onBeforeUnmount, openB
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-CXy8dkTN.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-Du8tW8c5.js";
 const _hoisted_1 = { class: "fixed inset-0 z-(--z-modal) flex items-center justify-center pointer-events-none" };
 const _hoisted_2 = {
   key: 0,

package/dist/chunks/{LpNotificationBell-D1gdEtuI.js → LpNotificationBell-Nges4kJk.js}

@@ -5,7 +5,7 @@ import { _ as _sfc_main$4 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpEmptyState-CrfyRJUG.js";
 import { _ as _sfc_main$5 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$1 } from "./LpPopover-8268UmlC.js";
-import { _ as _sfc_main$3 } from "./LpScrollArea-CXy8dkTN.js";
+import { _ as _sfc_main$3 } from "./LpScrollArea-Du8tW8c5.js";
 const _hoisted_1 = { class: "flex items-center justify-between gap-2 px-3 py-2.5" };
 const _hoisted_2 = { class: "text-sm font-semibold" };
 const _hoisted_3 = {

package/dist/chunks/{LpScrollArea-CXy8dkTN.js → LpScrollArea-Du8tW8c5.js}

@@ -90,7 +90,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(ScrollAreaScrollbar), {
             orientation: "vertical",
             "force-mount": "",
-            class: normalizeClass(["group flex w-3.5 touch-none select-none justify-end py-px pl-2.5 pr-px", barFade]),
+            class: normalizeClass(["group z-1 flex w-3.5 touch-none select-none justify-end py-px pl-2.5 pr-px", barFade]),
             style: normalizeStyle(__props.barInsetTop ? { marginTop: __props.barInsetTop } : void 0)
           }, {
             default: withCtx(() => [
@@ -103,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 8, ["style"]),
           createVNode(unref(ScrollAreaScrollbar), {
             orientation: "horizontal",
-            class: normalizeClass(["group flex h-3.5 flex-col touch-none select-none justify-end px-px pb-px pt-2.5", barFade])
+            class: normalizeClass(["group z-1 flex h-3.5 flex-col touch-none select-none justify-end px-px pb-px pt-2.5", barFade])
           }, {
             default: withCtx(() => [
               createVNode(unref(ScrollAreaThumb), {

package/dist/chunks/{LpSidebar-B_UD_yUx.js → LpSidebar-Bd0148dd.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, normalizeClass, renderSlot, createCommentVNode, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps, createBlock } from "vue";
-import { _ as _sfc_main$2 } from "./LpDrawer-DcxlpxJ7.js";
-import { _ as _sfc_main$1 } from "./LpSidebarNav-S1QPTGcg.js";
+import { _ as _sfc_main$2 } from "./LpDrawer-B4cNj39a.js";
+import { _ as _sfc_main$1 } from "./LpSidebarNav-BqGpNr4S.js";
 const _hoisted_1 = {
   key: 1,
   class: "mt-2 flex shrink-0 flex-col gap-2"

package/dist/chunks/{LpSidebarNav-S1QPTGcg.js → LpSidebarNav-BqGpNr4S.js}

@@ -4,7 +4,7 @@ import { usePillTransition } from "../composables/usePillTransition.js";
 import { _ as _sfc_main$4 } from "./LpBadge-CXzBPnwO.js";
 import { _ as _sfc_main$2 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpScrollArea-CXy8dkTN.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-Du8tW8c5.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex min-h-0 flex-1 flex-col gap-4"

package/dist/chunks/{LpTable-pZmjnEti.js → LpTable-BBKlNR9j.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, crea
 import { _ as _sfc_main$2 } from "./LpCheckbox-BO0zuuPh.js";
 import { _ as _sfc_main$4 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpScrollArea-CXy8dkTN.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-Du8tW8c5.js";
 const _hoisted_1 = { class: "w-full border-collapse text-sm" };
 const _hoisted_2 = { class: "border-b border-line bg-surface-soft" };
 const _hoisted_3 = {

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/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-DaJ97mQ4.js";
+import { _ as _sfc_main } from "../chunks/LpAddressInput-B411MOJa.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-Ds3WkurD.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-CfM7fdr3.js";
 export {
   _sfc_main as default
 };

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-CXy8dkTN.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 { _ as _sfc_main$2 } from "../chunks/LpScrollArea-Du8tW8c5.js";
+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/LpConfirmDialog.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpConfirmDialog-Cwqzbfgo.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-D8pBGPOI.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpDrawer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDrawer-DcxlpxJ7.js";
+import { _ as _sfc_main } from "../chunks/LpDrawer-B4cNj39a.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpFileTree.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTree-BGNzXknB.js";
+import { _ as _sfc_main } from "../chunks/LpFileTree-d9nXtSVo.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpLogViewer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLogViewer-DQod8kXW.js";
+import { _ as _sfc_main } from "../chunks/LpLogViewer-BXPBUV21.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-2YEJI45Q.js";
+import { _ as _sfc_main } from "../chunks/LpModal-DKFdzKwV.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpNotificationBell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpNotificationBell-D1gdEtuI.js";
+import { _ as _sfc_main } from "../chunks/LpNotificationBell-Nges4kJk.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpScrollArea.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpScrollArea-CXy8dkTN.js";
+import { _ as _sfc_main } from "../chunks/LpScrollArea-Du8tW8c5.js";
 export {
   _sfc_main 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/components/LpSidebar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebar-B_UD_yUx.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-Bd0148dd.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebarNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebarNav-S1QPTGcg.js";
+import { _ as _sfc_main } from "../chunks/LpSidebarNav-BqGpNr4S.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTable.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTable-pZmjnEti.js";
+import { _ as _sfc_main } from "../chunks/LpTable-BBKlNR9j.js";
 export {
   _sfc_main 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

@@ -1,9 +1,9 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-DaJ97mQ4.js";
+import { _ as _2 } from "./chunks/LpAddressInput-B411MOJa.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DFKrd1Ne.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _5 } from "./chunks/LpAppShell-Ds3WkurD.js";
+import { _ as _5 } from "./chunks/LpAppShell-CfM7fdr3.js";
 import { _ as _6 } from "./chunks/LpAutocomplete-DIgXmtCA.js";
 import { _ as _7 } from "./chunks/LpAvatar-B1Ez0ZAx.js";
 import { _ as _8 } from "./chunks/LpBadge-CXzBPnwO.js";
@@ -14,15 +14,15 @@ import { _ as _12 } from "./chunks/LpCard-BmrTvWOe.js";
 import { _ as _13 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _14 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _15 } from "./chunks/LpConfirmDialog-Cwqzbfgo.js";
+import { _ as _15 } from "./chunks/LpConfirmDialog-D8pBGPOI.js";
 import { _ as _16 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _17 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _18 } from "./chunks/LpDisclosure-DP6yfgfM.js";
 import { _ as _19 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _20 } from "./chunks/LpDrawer-DcxlpxJ7.js";
+import { _ as _20 } from "./chunks/LpDrawer-B4cNj39a.js";
 import { _ as _21 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _22 } from "./chunks/LpEmptyState-CrfyRJUG.js";
-import { _ as _23 } from "./chunks/LpFileTree-BGNzXknB.js";
+import { _ as _23 } from "./chunks/LpFileTree-d9nXtSVo.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _24 } from "./chunks/LpFormField-Bn-ZwC6z.js";
 import { _ as _25 } from "./chunks/LpIcon-CCnX5_2j.js";
@@ -31,9 +31,9 @@ import { _ as _27 } from "./chunks/LpInput-BauZRyzm.js";
 import { _ as _28 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _29 } from "./chunks/LpLink-DHwOEp4e.js";
-import { _ as _30 } from "./chunks/LpLogViewer-DQod8kXW.js";
-import { _ as _31 } from "./chunks/LpModal-2YEJI45Q.js";
-import { _ as _32 } from "./chunks/LpNotificationBell-D1gdEtuI.js";
+import { _ as _30 } from "./chunks/LpLogViewer-BXPBUV21.js";
+import { _ as _31 } from "./chunks/LpModal-DKFdzKwV.js";
+import { _ as _32 } from "./chunks/LpNotificationBell-Nges4kJk.js";
 import { _ as _33 } from "./chunks/LpNumberField-C5ar-OwE.js";
 import { _ as _34 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _35 } from "./chunks/LpPagination-CeGuNe_q.js";
@@ -44,17 +44,18 @@ import { _ as _38 } from "./chunks/LpPopover-8268UmlC.js";
 import { _ as _39 } from "./chunks/LpProgress-BhI0IbjC.js";
 import { _ as _40 } from "./chunks/LpRadio-CL-pI0_O.js";
 import { _ as _41 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
-import { _ as _42 } from "./chunks/LpScrollArea-CXy8dkTN.js";
+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 { _ as _46 } from "./chunks/LpSidebar-B_UD_yUx.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";
 import { _ as _49 } from "./chunks/LpStat-CdbEFOvn.js";
 import { _ as _50 } from "./chunks/LpStepper-5dFTrW21.js";
 import { _ as _51 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { _ as _52 } from "./chunks/LpTable-pZmjnEti.js";
+import { _ as _52 } from "./chunks/LpTable-BBKlNR9j.js";
 import { _ as _53 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
 import { _ as _54 } from "./chunks/LpTabs-Cefe_lys.js";
 import { _ as _55 } from "./chunks/LpTextarea-CRAkhemZ.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.8",
+  "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/LpScrollArea.vue

@@ -184,10 +184,15 @@ function onThumbPointerDown() {
          first hover — so before the pointer ever entered, the region silently
          refused to scroll (wheel included). Mounting it up front fixes that;
          the bar still only becomes visible on hover, via `barFade` below. -->
+    <!-- z-1: reka positions the bar absolutely but leaves it on `z-index: auto`,
+         and it sits BEFORE the viewport in the DOM — so any positioned row in
+         the content painted over it, and a row with an opaque hover background
+         swallowed the thumb wherever the pointer went. The bar only has to
+         clear its own content, not the page, so a local step is enough. -->
     <ScrollAreaScrollbar
       orientation="vertical"
       force-mount
-      class="group flex w-3.5 touch-none select-none justify-end py-px pl-2.5 pr-px"
+      class="group z-1 flex w-3.5 touch-none select-none justify-end py-px pl-2.5 pr-px"
       :class="barFade"
       :style="barInsetTop ? { marginTop: barInsetTop } : undefined"
     >
@@ -205,7 +210,7 @@ function onThumbPointerDown() {
 
     <ScrollAreaScrollbar
       orientation="horizontal"
-      class="group flex h-3.5 flex-col touch-none select-none justify-end px-px pb-px pt-2.5"
+      class="group z-1 flex h-3.5 flex-col touch-none select-none justify-end px-px pb-px pt-2.5"
       :class="barFade"
     >
       <ScrollAreaThumb

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"