@leavepulse/ui 0.20.9 → 0.22.0

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-CNAFRgCU.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-Bd0148dd.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-JvMaaYsy.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebarNav.vue.js

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

package/dist/components/LpTable.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTable-BBKlNR9j.js";
+import { _ as _sfc_main } from "../chunks/LpTable-DTj52qlg.js";
 export {
   _sfc_main as default
 };

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

@@ -1,6 +1,21 @@
 type __VLS_Props = {
     content?: string;
     sideOffset?: number;
+    /** Which edge to prefer; flips automatically when there is no room. */
+    side?: "top" | "right" | "bottom" | "left";
+    /**
+     * The tip names the control rather than describing it — for a trigger with
+     * no visible text of its own. Sets the accessible name instead of only
+     * adding a description.
+     */
+    label?: boolean;
+    /** Milliseconds before the tip appears on hover. */
+    delay?: number;
+    /**
+     * Show on any focus, not just keyboard focus. Off by default: a tip that
+     * pops up after every mouse click on the trigger is noise.
+     */
+    showOnPointerFocus?: boolean;
 };
 declare var __VLS_20: {}, __VLS_34: {};
 type __VLS_Slots = {} & {
@@ -8,7 +23,10 @@ type __VLS_Slots = {} & {
 } & {
     content?: (props: typeof __VLS_34) => any;
 };
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    delay: number;
+    side: "top" | "right" | "bottom" | "left";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/LpTooltip.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTooltip-CIwoRCag.js";
+import { _ as _sfc_main } from "../chunks/LpTooltip-D1hbjQWG.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/composables/useRovingFocus.d.ts

@@ -0,0 +1,49 @@
+import { MaybeRefOrGetter } from 'vue';
+export interface RovingItem {
+    /** Stable identity of the row. */
+    id: string;
+    /**
+     * What typeahead matches against. Omit to opt this row out of typeahead —
+     * a separator, say.
+     */
+    label?: string;
+    disabled?: boolean;
+}
+export interface UseRovingFocusOptions {
+    /**
+     * Which axis the arrows follow. `vertical` (default) uses ↑↓, `horizontal`
+     * uses ←→, `both` accepts either — for a grid whose wrapping the caller
+     * cannot describe here.
+     */
+    orientation?: "vertical" | "horizontal" | "both";
+    /** Wrap around at the ends instead of stopping. Default true. */
+    loop?: boolean;
+    /** Jump to an item by typing its first letters. Default true. */
+    typeahead?: boolean;
+    /** Called when the user activates the current item (Enter or Space). */
+    onActivate?: (id: string) => void;
+    /**
+     * Called when focus should leave the list without activating anything —
+     * Escape. Lets a dialog close, or a filter field take focus back.
+     */
+    onEscape?: () => void;
+}
+export declare function useRovingFocus(items: MaybeRefOrGetter<RovingItem[]>, options?: UseRovingFocusOptions): {
+    activeId: import('vue').Ref<string | undefined, string | undefined>;
+    focus: (id: string | undefined) => void;
+    move: (delta: number) => void;
+    first: () => void;
+    last: () => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    setContainer: (el: HTMLElement | null) => void;
+    containerProps: import('vue').ComputedRef<{
+        ref: (el: unknown) => void;
+        onKeydown: (event: KeyboardEvent) => void;
+    }>;
+    itemProps: (id: string) => {
+        tabindex: number;
+        "data-active": string | undefined;
+        "data-roving-id": string;
+        onFocus: () => void;
+    };
+};

package/dist/composables/useRovingFocus.js

@@ -0,0 +1,160 @@
+import { ref, computed, toValue, watch } from "vue";
+const TYPEAHEAD_RESET_MS = 700;
+function useRovingFocus(items, options = {}) {
+  const {
+    orientation = "vertical",
+    loop = true,
+    typeahead = true,
+    onActivate,
+    onEscape
+  } = options;
+  const activeId = ref();
+  const containerEl = ref(null);
+  const enabled = computed(() => toValue(items).filter((item) => !item.disabled));
+  watch(
+    enabled,
+    (list) => {
+      if (list.length === 0) {
+        activeId.value = void 0;
+        return;
+      }
+      if (!activeId.value || !list.some((item) => item.id === activeId.value)) {
+        activeId.value = list[0].id;
+      }
+    },
+    { immediate: true }
+  );
+  function indexOfActive() {
+    return enabled.value.findIndex((item) => item.id === activeId.value);
+  }
+  function focus(id) {
+    if (id) activeId.value = id;
+  }
+  function move(delta) {
+    const list = enabled.value;
+    if (list.length === 0) return;
+    const from = indexOfActive();
+    if (from === -1) {
+      focus(list[0].id);
+      return;
+    }
+    let next = from + delta;
+    if (next < 0) next = loop ? list.length - 1 : 0;
+    if (next >= list.length) next = loop ? 0 : list.length - 1;
+    focus(list[next].id);
+  }
+  function first() {
+    focus(enabled.value[0]?.id);
+  }
+  function last() {
+    focus(enabled.value.at(-1)?.id);
+  }
+  let typed = "";
+  let typedAt = 0;
+  function typeaheadTo(character) {
+    const now = Date.now();
+    typed = now - typedAt > TYPEAHEAD_RESET_MS ? character : typed + character;
+    typedAt = now;
+    const list = enabled.value;
+    const needle = typed.toLowerCase();
+    const repeated = typed.length > 1 && [...typed].every((c) => c === typed[0]);
+    const query = repeated ? typed[0].toLowerCase() : needle;
+    const from = indexOfActive();
+    const offset = repeated || typed.length === 1 ? 1 : 0;
+    for (let step = 0; step < list.length; step += 1) {
+      const item = list[(from + offset + step) % list.length];
+      if (item.label?.toLowerCase().startsWith(query)) {
+        focus(item.id);
+        return;
+      }
+    }
+  }
+  function onKeydown(event) {
+    const vertical = orientation === "vertical" || orientation === "both";
+    const horizontal = orientation === "horizontal" || orientation === "both";
+    switch (event.key) {
+      case "ArrowDown":
+        if (!vertical) return;
+        event.preventDefault();
+        move(1);
+        return;
+      case "ArrowUp":
+        if (!vertical) return;
+        event.preventDefault();
+        move(-1);
+        return;
+      case "ArrowRight":
+        if (!horizontal) return;
+        event.preventDefault();
+        move(1);
+        return;
+      case "ArrowLeft":
+        if (!horizontal) return;
+        event.preventDefault();
+        move(-1);
+        return;
+      case "Home":
+        event.preventDefault();
+        first();
+        return;
+      case "End":
+        event.preventDefault();
+        last();
+        return;
+      case "Enter":
+      case " ":
+        if (!activeId.value) return;
+        event.preventDefault();
+        onActivate?.(activeId.value);
+        return;
+      case "Escape":
+        if (!onEscape) return;
+        event.preventDefault();
+        onEscape();
+        return;
+    }
+    if (typeahead && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && event.key !== " ") {
+      event.preventDefault();
+      typeaheadTo(event.key);
+    }
+  }
+  watch(activeId, (id) => {
+    if (!id || typeof document === "undefined") return;
+    const container = containerEl.value;
+    if (!container || !container.contains(document.activeElement)) return;
+    const target = container.querySelector(
+      `[data-roving-id="${CSS.escape(id)}"]`
+    );
+    target?.focus();
+  });
+  function setContainer(el) {
+    containerEl.value = el;
+  }
+  const containerProps = computed(() => ({
+    ref: (el) => setContainer(el instanceof HTMLElement ? el : null),
+    onKeydown
+  }));
+  function itemProps(id) {
+    const active = activeId.value === id;
+    return {
+      tabindex: active ? 0 : -1,
+      "data-active": active ? "" : void 0,
+      "data-roving-id": id,
+      onFocus: () => focus(id)
+    };
+  }
+  return {
+    activeId,
+    focus,
+    move,
+    first,
+    last,
+    onKeydown,
+    setContainer,
+    containerProps,
+    itemProps
+  };
+}
+export {
+  useRovingFocus
+};

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,8 +109,12 @@ 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 { useRovingFocus } from './composables/useRovingFocus';
+export type { RovingItem, UseRovingFocusOptions } from './composables/useRovingFocus';
 export { useSettled } from './composables/useSettled';
 export type { UseSettledOptions } from './composables/useSettled';
 export { useTilt } from './composables/useTilt';

package/dist/index.js

@@ -1,9 +1,9 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-B411MOJa.js";
+import { _ as _2 } from "./chunks/LpAddressInput-Dah7asXy.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-CfM7fdr3.js";
+import { _ as _5 } from "./chunks/LpAppShell-DGZv907S.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-D8pBGPOI.js";
+import { _ as _15 } from "./chunks/LpConfirmDialog-CkMzeKdp.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-B4cNj39a.js";
+import { _ as _20 } from "./chunks/LpDrawer-DAJN5rGK.js";
 import { _ as _21 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _22 } from "./chunks/LpEmptyState-CrfyRJUG.js";
-import { _ as _23 } from "./chunks/LpFileTree-d9nXtSVo.js";
+import { _ as _23 } from "./chunks/LpFileTree-DWx77B1F.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-BXPBUV21.js";
-import { _ as _31 } from "./chunks/LpModal-DKFdzKwV.js";
-import { _ as _32 } from "./chunks/LpNotificationBell-Nges4kJk.js";
+import { _ as _30 } from "./chunks/LpLogViewer-B1aLUVdz.js";
+import { _ as _31 } from "./chunks/LpModal-CNAFRgCU.js";
+import { _ as _32 } from "./chunks/LpNotificationBell-HSGo1pcf.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-Du8tW8c5.js";
+import { _ as _42 } from "./chunks/LpScrollArea-D8xyKXcF.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-Bd0148dd.js";
+import { default as default3 } from "./components/LpShortcutsDialog.vue.js";
+import { _ as _46 } from "./chunks/LpSidebar-JvMaaYsy.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-BBKlNR9j.js";
+import { _ as _52 } from "./chunks/LpTable-DTj52qlg.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";
@@ -62,14 +63,16 @@ import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpT
 import { D, _ as _56, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";
 import { _ as _57 } from "./chunks/LpTilt-DuyKbpkA.js";
 import { _ as _58 } from "./chunks/LpToaster-gDB1EaU3.js";
-import { _ as _59 } from "./chunks/LpTooltip-CIwoRCag.js";
+import { _ as _59 } from "./chunks/LpTooltip-D1hbjQWG.js";
 import { _ as _60 } from "./chunks/LpTopologyCanvas-DVwyQfKa.js";
 import { _ as _61 } from "./chunks/LpUptimeBar-CB366k0O.js";
 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 { useRovingFocus } from "./composables/useRovingFocus.js";
 import { useSettled } from "./composables/useSettled.js";
 import { useTilt } from "./composables/useTilt.js";
 import { useZoomPan } from "./composables/useZoomPan.js";
@@ -152,6 +155,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 +180,7 @@ export {
   addTab,
   b as amber,
   ancestorIds,
+  appleModifierLabel,
   c as applyTheme,
   d as applyThemeWithTransition,
   blockTitle,
@@ -198,6 +203,7 @@ export {
   formatAddress,
   formatModified,
   formatSize,
+  isAppleKeyboard,
   i as isBrokenBackdropEngine,
   l as leavepulse,
   h as light,
@@ -228,8 +234,10 @@ export {
   m as themeToCssVars,
   tileUrl,
   unproject,
+  useHotkeys,
   useInputFilter,
   useLayout,
+  useRovingFocus,
   useSettled,
   u as useTheme,
   useTilt,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.20.9",
+  "version": "0.22.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>