@leavepulse/ui 0.40.1 → 0.42.0

package/dist/components/LpShortcutsDialog.vue.js

@@ -1,20 +1,25 @@
-import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, unref } from "vue";
-import { _ as _sfc_main$1 } from "../chunks/LpModal-EyEdRuqF.js";
-import { appleModifierLabel } from "../composables/useHotkeys.js";
+import { defineComponent, computed, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, unref } from "vue";
+import { _ as _sfc_main$1 } from "../chunks/LpModal-8bja5bWS.js";
+import { mergeShortcutGroups, activeShortcuts, appleModifierLabel } from "../composables/useHotkeys.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpShortcutsDialog-Cap_ALQM.css';const _hoisted_1 = { class: "shortcut-groups" };
+import '../assets/LpShortcutsDialog-C6YoQ8_M.css';const _hoisted_1 = { class: "shortcut-groups" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpShortcutsDialog",
   props: {
     open: { type: Boolean, default: false },
-    groups: {},
+    groups: { default: () => [] },
+    live: { type: Boolean, default: false },
     title: { default: "Keyboard shortcuts" },
     description: {},
-    glass: { type: Boolean }
+    glass: { type: Boolean, default: void 0 }
   },
   emits: ["update:open"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    function keysOf(combo) {
+      return combo.split(/\+(?!$)/);
+    }
+    const shown = computed(() => props.live ? mergeShortcutGroups(props.groups, activeShortcuts.value) : props.groups);
     const emit = __emit;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, {
@@ -27,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(props.groups, (group) => {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(shown.value, (group) => {
               return openBlock(), createElementBlock("section", {
                 key: group.title,
                 class: "shortcut-group"
@@ -41,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, [
                       createElementVNode("dt", null, toDisplayString(entry.label), 1),
                       createElementVNode("dd", null, [
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(entry.combo.split("+"), (key, index) => {
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(keysOf(entry.combo), (key, index) => {
                           return openBlock(), createElementBlock("kbd", {
                             key: `${key}-${index}`
                           }, toDisplayString(unref(appleModifierLabel)(key.trim())), 1);
@@ -59,7 +64,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpShortcutsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7b1cdfeb"]]);
+const LpShortcutsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8af3bafc"]]);
 export {
   LpShortcutsDialog as default
 };

package/dist/components/LpSidebar.vue.js

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

package/dist/composables/useGlass.d.ts

@@ -0,0 +1,9 @@
+import { ComputedRef, MaybeRefOrGetter } from 'vue';
+/** Make `glass` the default for every overlay below the calling component. */
+export declare function provideGlass(enabled?: MaybeRefOrGetter<boolean>): void;
+/**
+ * The glass flag an overlay renders with: its own prop when set, otherwise the
+ * nearest `provideGlass`, otherwise off. The prop must default to `undefined`,
+ * not `false`, or an unset prop could not be told apart from an explicit off.
+ */
+export declare function useGlass(own: () => boolean | undefined): ComputedRef<boolean>;

package/dist/composables/useGlass.js

@@ -0,0 +1,13 @@
+import { inject, computed, toValue, provide } from "vue";
+const GLASS = /* @__PURE__ */ Symbol("lp-glass");
+function provideGlass(enabled = true) {
+  provide(GLASS, enabled);
+}
+function useGlass(own) {
+  const inherited = inject(GLASS, false);
+  return computed(() => own() ?? toValue(inherited));
+}
+export {
+  provideGlass,
+  useGlass
+};

package/dist/composables/useHotkeys.d.ts

@@ -16,13 +16,40 @@ export interface HotkeyBinding {
      * something there — Escape, and the palette the user reaches from anywhere.
      */
     allowInInput?: boolean;
+    /**
+     * How the key reference lists this binding while it is mounted. Bindings
+     * without it still work, they just stay out of `activeShortcuts`.
+     */
+    help?: HotkeyHelp;
     /**
      * 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.
+     * and swallowing it here would close all of them. The event is passed for
+     * the checks only it can answer: where the focus is, whether an inner
+     * control already took the key.
+     */
+    handler: (event: KeyboardEvent) => void | boolean;
+}
+export interface HotkeyHelp {
+    /** Section of the reference the entry goes under. */
+    group: string;
+    label: string;
+    /**
+     * Written the way it reads, "+"-separated. Defaults to one built from the
+     * binding; set it where the binding is not the whole story, such as the
+     * second key of a chord ("G+D") or a key that needs Shift to type ("?").
      */
-    handler: () => void | boolean;
+    combo?: string;
+}
+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[];
 }
 /**
  * Whether this machine prints ⌘ where the rest print Ctrl. Read once: the
@@ -43,6 +70,8 @@ export declare function appleModifierLabel(key: string): string;
  * formality.
  */
 export interface UseHotkeysOptions {
+    enabled?: MaybeRefOrGetter<boolean>;
+    priority?: MaybeRefOrGetter<number>;
     /**
      * Only act while the focus is inside this element.
      *
@@ -58,3 +87,15 @@ export interface UseHotkeysOptions {
     scope?: MaybeRefOrGetter<HTMLElement | null | undefined>;
 }
 export declare function useHotkeys(bindings: MaybeRefOrGetter<HotkeyBinding[]>, options?: UseHotkeysOptions): void;
+/**
+ * The shortcuts that work right now, grouped for `LpShortcutsDialog`: every
+ * binding with `help` from every mounted `useHotkeys`. A screen that binds its
+ * own keys adds its section while it is open, so the reference never lists a
+ * key that does nothing here or misses one that does.
+ */
+export declare const activeShortcuts: import('vue').ComputedRef<ShortcutGroup[]>;
+/**
+ * Groups merged by title, entries kept once per combo: what a reference shows
+ * when it lists both its own entries and the live ones.
+ */
+export declare function mergeShortcutGroups(...lists: ShortcutGroup[][]): ShortcutGroup[];

package/dist/composables/useHotkeys.js

@@ -1,4 +1,4 @@
-import { onMounted, onBeforeUnmount, toValue } from "vue";
+import { shallowReactive, computed, toValue, onMounted, onBeforeUnmount } from "vue";
 const isAppleKeyboard = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || "");
 function appleModifierLabel(key) {
   if (!isAppleKeyboard) return key;
@@ -31,30 +31,103 @@ function matches(event, binding) {
   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, options = {}) {
-  function inScope(target) {
-    const el = toValue(options.scope);
-    if (!el) return true;
-    const node = target instanceof Node ? target : null;
-    return !!node && (el === node || el.contains(node));
-  }
-  function onKeydown(event) {
-    if (event.isComposing) return;
-    if (!inScope(event.target)) return;
-    const inTextEntry = isTextEntry(event.target);
-    for (const binding of toValue(bindings)) {
+const mounted = shallowReactive(/* @__PURE__ */ new Set());
+let mountOrder = 0;
+let listening = false;
+function inScope(target, scope) {
+  const el = toValue(scope);
+  if (!el) return true;
+  const node = target instanceof Node ? target : null;
+  return !!node && (el === node || el.contains(node));
+}
+function onKeydown(event) {
+  if (event.isComposing) return;
+  const inTextEntry = isTextEntry(event.target);
+  const entries = [...mounted].sort(
+    (a, b) => Number(toValue(b.priority) || 0) - Number(toValue(a.priority) || 0) || b.order - a.order
+  );
+  for (const entry of entries) {
+    if (toValue(entry.enabled) === false || !inScope(event.target, entry.scope)) continue;
+    for (const binding of entry.read()) {
       if (inTextEntry && !binding.allowInInput) continue;
       if (!matches(event, binding)) continue;
-      if (binding.handler() === false) continue;
+      if (binding.handler(event) === false) continue;
       event.preventDefault();
       return;
     }
   }
-  onMounted(() => window.addEventListener("keydown", onKeydown));
-  onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+}
+function useHotkeys(bindings, options = {}) {
+  const entry = {
+    read: () => toValue(bindings),
+    scope: options.scope,
+    enabled: options.enabled,
+    priority: options.priority,
+    order: ++mountOrder
+  };
+  onMounted(() => {
+    mounted.add(entry);
+    if (!listening) {
+      window.addEventListener("keydown", onKeydown);
+      listening = true;
+    }
+  });
+  onBeforeUnmount(() => {
+    mounted.delete(entry);
+    if (!mounted.size && listening) {
+      window.removeEventListener("keydown", onKeydown);
+      listening = false;
+    }
+  });
+}
+const KEY_NAMES = {
+  escape: "Esc",
+  enter: "Enter",
+  backspace: "Backspace",
+  delete: "Delete",
+  tab: "Tab",
+  " ": "Space",
+  arrowup: "↑",
+  arrowdown: "↓",
+  arrowleft: "←",
+  arrowright: "→"
+};
+function comboOf(binding) {
+  const key = binding.key.toLowerCase();
+  const name = KEY_NAMES[key] ?? (key.length === 1 || /^f\d+$/.test(key) ? key.toUpperCase() : binding.key);
+  return [binding.ctrl && "Ctrl", binding.alt && "Alt", binding.shift && "Shift", name].filter(Boolean).join("+");
+}
+const activeShortcuts = computed(() => {
+  const groups = /* @__PURE__ */ new Map();
+  for (const entry of mounted) {
+    if (toValue(entry.enabled) === false) continue;
+    for (const binding of entry.read()) {
+      if (!binding.help) continue;
+      const combo = binding.help.combo ?? comboOf(binding);
+      const entries = groups.get(binding.help.group) ?? [];
+      if (!entries.some((e) => e.combo === combo)) entries.push({ combo, label: binding.help.label });
+      groups.set(binding.help.group, entries);
+    }
+  }
+  return [...groups].map(([title, entries]) => ({ title, entries }));
+});
+function mergeShortcutGroups(...lists) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const list of lists) {
+    for (const group of list) {
+      const entries = groups.get(group.title) ?? [];
+      for (const entry of group.entries) {
+        if (!entries.some((e) => e.combo === entry.combo)) entries.push(entry);
+      }
+      groups.set(group.title, entries);
+    }
+  }
+  return [...groups].map(([title, entries]) => ({ title, entries }));
 }
 export {
+  activeShortcuts,
   appleModifierLabel,
   isAppleKeyboard,
+  mergeShortcutGroups,
   useHotkeys
 };

package/dist/index.d.ts

@@ -91,7 +91,6 @@ export { default as LpServiceNode } from './components/LpServiceNode.vue';
 export type { ServiceNodeData } from './components/LpServiceNode.vue';
 export { default as LpShift } from './components/LpShift.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';
@@ -135,8 +134,9 @@ export { parseConfig, serializeConfig, UI_CONFIG_VERSION } from './theme/config'
 export type { UiConfig } from './theme/config';
 export { useClipboard } from './composables/useClipboard';
 export type { CopyOptions, UseClipboard } from './composables/useClipboard';
-export { useHotkeys, isAppleKeyboard, appleModifierLabel } from './composables/useHotkeys';
-export type { HotkeyBinding } from './composables/useHotkeys';
+export { useHotkeys, isAppleKeyboard, appleModifierLabel, activeShortcuts, mergeShortcutGroups, } from './composables/useHotkeys';
+export type { HotkeyBinding, HotkeyHelp, ShortcutEntry, ShortcutGroup } from './composables/useHotkeys';
+export { provideGlass, useGlass } from './composables/useGlass';
 export { useMergedClass, useMergedAttrs, mergeClass } from './composables/useMergedClass';
 export { useInputFilter } from './composables/useInputFilter';
 export type { UseInputFilterOptions } from './composables/useInputFilter';

package/dist/index.js

@@ -1,10 +1,10 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-H5NdhK6c.js";
+import { _ as _2 } from "./chunks/LpAddressInput-CMjaPQVw.js";
 import { _ as _3 } from "./chunks/LpMapPicker-ul4oYno6.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BlvtGB2P.js";
 import { _ as _5 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _6 } from "./chunks/LpAppShell-BfqSA1ba.js";
+import { _ as _6 } from "./chunks/LpAppShell-Bcv6EhqU.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DExlIZe_.js";
 import { _ as _8 } from "./chunks/LpAvatar-B3-xAOH3.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
@@ -19,12 +19,12 @@ import { _ as _15 } from "./chunks/LpCodeBlock-Bo0B4TFR.js";
 import { _ as _16 } from "./chunks/LpColorPicker-BlXea7LM.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
-import { _ as _17 } from "./chunks/LpConfirmDialog-BBRnMkV4.js";
+import { _ as _17 } from "./chunks/LpConfirmDialog-BNAvOR24.js";
 import { _ as _18 } from "./chunks/LpContextMenu-CwW1QXe_.js";
 import { _ as _19 } from "./chunks/LpDatePicker-CwOToxGq.js";
 import { _ as _20 } from "./chunks/LpDisclosure-ChQYmjlR.js";
 import { _ as _21 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _22 } from "./chunks/LpDrawer-B8vBnCWF.js";
+import { _ as _22 } from "./chunks/LpDrawer-DgaS2s2i.js";
 import { _ as _23 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { default as default4 } from "./components/LpDropzone.vue.js";
 import { _ as _24 } from "./chunks/LpEmptyState-Dsdqz1Wj.js";
@@ -40,8 +40,8 @@ import { fileNameOf } from "./components/lightbox.js";
 import { _ as _31 } from "./chunks/LpLink-DCND-zyu.js";
 import { _ as _32 } from "./chunks/LpLogViewer-CaRy5MeS.js";
 import { _ as _33 } from "./chunks/LpMediaGallery-Cid7PGYx.js";
-import { _ as _34 } from "./chunks/LpModal-EyEdRuqF.js";
-import { _ as _35 } from "./chunks/LpModalNav-BrDtP7b_.js";
+import { _ as _34 } from "./chunks/LpModal-8bja5bWS.js";
+import { _ as _35 } from "./chunks/LpModalNav-w9kfwHqO.js";
 import { _ as _36 } from "./chunks/LpNotificationBell-DyGGsMAM.js";
 import { _ as _37 } from "./chunks/LpNumberField-CWuX08iX.js";
 import { _ as _38 } from "./chunks/LpTimeField-K6nAGboX.js";
@@ -64,7 +64,7 @@ import { _ as _53 } from "./chunks/LpSelect-ANIVtrpM.js";
 import { _ as _54 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _55 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default6 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _56 } from "./chunks/LpSidebar-DZ20iBxY.js";
+import { _ as _56 } from "./chunks/LpSidebar-DlTn5nXc.js";
 import { _ as _57 } from "./chunks/LpSkeleton-CTI-vBgW.js";
 import { _ as _58 } from "./chunks/LpSlider-BwNIBkAK.js";
 import { _ as _59 } from "./chunks/LpSparkline-C6xQ2dwv.js";
@@ -87,7 +87,8 @@ import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, remove
 import { blockTitle, defineBlocks } from "./layout/registry.js";
 import { useLayout } from "./layout/useLayout.js";
 import { useClipboard } from "./composables/useClipboard.js";
-import { appleModifierLabel, isAppleKeyboard, useHotkeys } from "./composables/useHotkeys.js";
+import { activeShortcuts, appleModifierLabel, isAppleKeyboard, mergeShortcutGroups, useHotkeys } from "./composables/useHotkeys.js";
+import { provideGlass, useGlass } from "./composables/useGlass.js";
 import { mergeClass, useMergedAttrs, useMergedClass } from "./composables/useMergedClass.js";
 import { useInputFilter } from "./composables/useInputFilter.js";
 import { easeOut, easeTravel, easingToken, prefersReducedMotion } from "./composables/easing.js";
@@ -215,6 +216,7 @@ export {
   OSM_TILES,
   T as THEME_COOKIE,
   UI_CONFIG_VERSION,
+  activeShortcuts,
   addLeaf,
   addTab,
   b as amber,
@@ -261,6 +263,7 @@ export {
   makeLayout,
   matchCountryByValue,
   mergeClass,
+  mergeShortcutGroups,
   moveLeaf,
   niceScale,
   n as nord,
@@ -273,6 +276,7 @@ export {
   prefersReducedMotion,
   presets,
   project,
+  provideGlass,
   removeBlock,
   removeLeaf,
   reorderTab,
@@ -296,6 +300,7 @@ export {
   useAsyncTask,
   useClipboard,
   useFormDraft,
+  useGlass,
   useHotkeys,
   useInputFilter,
   useLayout,

package/package.json

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