@leavepulse/ui 0.40.0 → 0.41.0

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
@@ -58,3 +85,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, onMounted, onBeforeUnmount, toValue } from "vue";
 const isAppleKeyboard = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || "");
 function appleModifierLabel(key) {
   if (!isAppleKeyboard) return key;
@@ -45,16 +45,69 @@ function useHotkeys(bindings, options = {}) {
     for (const binding of toValue(bindings)) {
       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));
+  const read = () => toValue(bindings);
+  onMounted(() => {
+    window.addEventListener("keydown", onKeydown);
+    mounted.add(read);
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("keydown", onKeydown);
+    mounted.delete(read);
+  });
+}
+const mounted = shallowReactive(/* @__PURE__ */ new Set());
+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 read of mounted) {
+    for (const binding of 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.0",
+  "version": "0.41.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpCommandPalette.vue

@@ -40,6 +40,7 @@ import { computed, nextTick, ref, shallowRef, useId, watch } from "vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import { useAsyncTask } from "../composables/useAsyncTask"
+import { useGlass } from "../composables/useGlass"
 import { useClipboard } from "../composables/useClipboard"
 import { useHotkeys } from "../composables/useHotkeys"
 
@@ -210,7 +211,8 @@ const props = withDefaults(
     /**
      * Frosted glass instead of a solid panel: the page shows through,
      * blurred, under a lighter scrim (.lp-glass-overlay, .lp-scrim--light).
-     * A look, not a behaviour, so it is the app's call and off by default.
+     * A look, not a behaviour, so it is the app's call: unset follows
+     * `provideGlass`, and without one it is off.
      */
     glass?: boolean
   }>(),
@@ -227,10 +229,12 @@ const props = withDefaults(
     groupLimit: 0,
     layoutFallback: true,
     previewPane: false,
-    glass: false,
+    glass: undefined,
   },
 )
 
+const frosted = useGlass(() => props.glass)
+
 const DEFAULT_LABELS: PaletteLabels = {
   navigate: "navigate",
   select: "select",
@@ -864,16 +868,13 @@ useHotkeys(() =>
   <DialogRoot :open="open" @update:open="(v) => emit('update:open', v)">
     <DialogPortal>
       <DialogOverlay
-        :class="{ 'lp-scrim--light': glass }"
+        :class="{ 'lp-scrim--light': frosted }"
         class="lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
       />
       <DialogContent
-        class="fixed left-1/2 top-[12vh] z-(--z-modal) flex max-h-[76vh] -translate-x-1/2 flex-col overflow-hidden rounded-card border border-line shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]"
-        :class="[glass ? 'lp-glass-overlay' : 'bg-surface-raised', previewPane && 'lp-cmd-resizing']"
-        :style="{
-          width: paneOpen ? 'min(92vw, 64rem)' : 'min(92vw, 40rem)',
-          minHeight: paneOpen ? 'min(76vh, 36rem)' : '0px',
-        }"
+        class="lp-cmd-dialog fixed left-1/2 top-[12vh] z-(--z-modal) flex max-h-[76vh] -translate-x-1/2 flex-col overflow-hidden rounded-card border border-line shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]"
+        :class="[frosted ? 'lp-glass-overlay' : 'bg-surface-raised', previewPane && 'lp-cmd-split']"
+        :data-pane="paneOpen ? 'open' : undefined"
         @open-auto-focus.prevent
       >
         <DialogTitle class="sr-only">Command palette</DialogTitle>
@@ -927,7 +928,7 @@ useHotkeys(() =>
 
         <!-- Results -->
         <div class="flex min-h-0 flex-1">
-          <LpScrollArea ref="scrollRef" class="min-h-0 min-w-0 flex-1" content-class="p-2">
+          <LpScrollArea ref="scrollRef" class="lp-cmd-list min-h-0 min-w-0 flex-1" content-class="p-2">
             <!-- While a request is out there is nothing to say yet: "no results"
                  under a spinner reads as an answer, and it is not one. -->
             <p v-if="flat.length === 0 && !failed" class="px-2 py-10 text-center text-sm text-muted">
@@ -1040,7 +1041,7 @@ useHotkeys(() =>
           <Transition name="lp-cmd-pane">
             <aside
               v-if="paneOpen"
-              class="hidden min-h-0 w-[56%] shrink-0 flex-col border-l border-line md:flex"
+              class="lp-cmd-pane hidden min-h-0 shrink-0 flex-col border-l border-line md:flex"
             >
               <LpScrollArea ref="previewRef" class="min-h-0 flex-1" content-class="px-5 py-4">
                 <!-- Keyed by the row, so moving the highlight replays the
@@ -1107,28 +1108,49 @@ useHotkeys(() =>
 
 <style scoped>
 /*
- * The dialog changes width and height when the preview pane comes and goes;
- * eased, so the list does not jump sideways under the pointer.
+ * Sizes for the split layout. Only the dialog's width animates: the list and
+ * the pane keep fixed widths, and the dialog — overflow hidden — uncovers the
+ * pane from its right edge as it grows. Animating the columns themselves made
+ * every line of the list and the pane re-wrap on every frame.
  */
-.lp-cmd-resizing {
-  transition:
-    width 260ms var(--ease-emphasized, ease),
-    min-height 260ms var(--ease-emphasized, ease);
+.lp-cmd-dialog {
+  --lp-cmd-list: min(92vw, 40rem);
+  --lp-cmd-pane: max(0px, min(26rem, 96vw - var(--lp-cmd-list)));
+  width: var(--lp-cmd-list);
 }
-.lp-cmd-pane-enter-active {
+.lp-cmd-split {
   transition:
-    opacity 220ms ease 60ms,
-    transform 260ms var(--ease-emphasized, ease);
+    width 300ms var(--ease-emphasized, ease),
+    min-height 300ms var(--ease-emphasized, ease);
 }
-.lp-cmd-pane-leave-active {
-  transition: opacity 120ms ease;
+@media (min-width: 768px) {
+  .lp-cmd-split .lp-cmd-list {
+    flex: 0 0 auto;
+    /* the dialog's 1px border on each side */
+    width: calc(var(--lp-cmd-list) - 2px);
+  }
+  .lp-cmd-dialog[data-pane="open"] {
+    width: calc(var(--lp-cmd-list) + var(--lp-cmd-pane));
+    min-height: min(76vh, 36rem);
+  }
 }
-.lp-cmd-pane-enter-from {
-  opacity: 0;
-  transform: translateX(16px);
+.lp-cmd-pane {
+  width: var(--lp-cmd-pane);
+}
+/*
+ * The pane rides in from the right edge while the dialog opens up to it, and
+ * leaves the same way, for as long as the dialog takes to close over it.
+ */
+.lp-cmd-pane-enter-active,
+.lp-cmd-pane-leave-active {
+  transition:
+    transform 300ms var(--ease-emphasized, ease),
+    opacity 300ms ease;
 }
+.lp-cmd-pane-enter-from,
 .lp-cmd-pane-leave-to {
   opacity: 0;
+  transform: translateX(40%);
 }
 .lp-cmd-para {
   animation: lp-cmd-para-in 260ms ease-out both;
@@ -1140,7 +1162,7 @@ useHotkeys(() =>
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .lp-cmd-resizing,
+  .lp-cmd-split,
   .lp-cmd-pane-enter-active,
   .lp-cmd-pane-leave-active {
     transition: none;

package/src/components/LpConfirmDialog.vue

@@ -36,10 +36,10 @@ const props = withDefaults(
      */
     loading?: boolean
     loadingLabel?: string
-    /** Frosted glass panel, passed to LpModal. Off by default. */
+    /** Frosted glass panel, passed to LpModal. Follows `provideGlass` when unset. */
     glass?: boolean
   }>(),
-  { confirmLabel: "Confirm", cancelLabel: "Cancel", loadingLabel: "Working…" },
+  { confirmLabel: "Confirm", cancelLabel: "Cancel", loadingLabel: "Working…", glass: undefined },
 )
 
 const emit = defineEmits<{

package/src/components/LpDrawer.vue

@@ -31,6 +31,7 @@ import {
 } from "vaul-vue"
 import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { CLOSE_ICON } from "./dropdown"
+import { useGlass } from "../composables/useGlass"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import { anyModalOpen, useModalLayer } from "./modalDepth"
@@ -104,7 +105,8 @@ const props = withDefaults(
     /**
      * Frosted glass instead of a solid panel: the page shows through,
      * blurred, under a lighter scrim (.lp-glass-overlay, .lp-scrim--light).
-     * A look, not a behaviour, so it is the app's call and off by default.
+     * A look, not a behaviour, so it is the app's call: unset follows
+     * `provideGlass`, and without one it is off.
      */
     glass?: boolean
   }>(),
@@ -117,10 +119,12 @@ const props = withDefaults(
     edgeOpenThreshold: 0.3,
     minSize: "22rem",
     maxSize: "96vw",
-    glass: false,
+    glass: undefined,
   },
 )
 
+const frosted = useGlass(() => props.glass)
+
 const emit = defineEmits<{
   (e: "update:open", value: boolean): void
 }>()
@@ -149,7 +153,7 @@ watch(() => props.open, (open) => (open ? claim() : release()), { immediate: tru
 onBeforeUnmount(release)
 
 const contentClass = computed(() => {
-  const surface = props.glass ? "lp-glass-overlay" : "bg-surface-raised"
+  const surface = frosted.value ? "lp-glass-overlay" : "bg-surface-raised"
   const base = `fixed z-(--z-modal) flex flex-col border-line ${surface} shadow-panel outline-none`
   const map: Record<Direction, string> = {
     left: "inset-y-0 left-0 border-r rounded-r-card",
@@ -439,7 +443,7 @@ const previewStyle = computed(() => {
     <div
       v-show="peeking || peek > 0"
       class="lp-scrim pointer-events-none fixed inset-0"
-      :class="{ 'lp-scrim--light': glass }"
+      :class="{ 'lp-scrim--light': frosted }"
       :style="{ zIndex: layer.scrim, opacity: peek, transition: peeking || reducedMotion() ? 'none' : 'opacity 0.18s ease-out' }"
     />
     <div
@@ -472,7 +476,7 @@ const previewStyle = computed(() => {
       <DrawerOverlay
         :style="{ zIndex: layer.scrim }"
         class="lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
-        :class="{ 'lp-scrim--light': glass }"
+        :class="{ 'lp-scrim--light': frosted }"
       />
       <DrawerContent
         :class="contentClass"

package/src/components/LpModal.vue

@@ -9,6 +9,7 @@ import {
   DialogTitle,
 } from "reka-ui"
 import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
+import { useGlass } from "../composables/useGlass"
 import { useShift } from "../composables/useShift"
 import { useModalLayer } from "./modalDepth"
 import { CLOSE_ICON } from "./dropdown"
@@ -65,13 +66,16 @@ const props = withDefaults(
     /**
      * Frosted glass instead of a solid panel: the page shows through,
      * blurred, under a lighter scrim (.lp-glass-overlay, .lp-scrim--light).
-     * A look, not a behaviour, so it is the app's call and off by default.
+     * A look, not a behaviour, so it is the app's call: unset follows
+     * `provideGlass`, and without one it is off.
      */
     glass?: boolean
   }>(),
-  { size: "md", autoFocus: "auto", glass: false },
+  { size: "md", autoFocus: "auto", glass: undefined },
 )
 
+const frosted = useGlass(() => props.glass)
+
 defineEmits<{ (e: "update:open", value: boolean): void }>()
 
 // Spread rather than a plain `:aria-describedby` binding: with a description
@@ -228,7 +232,7 @@ watch(
   <DialogRoot :open="open" @update:open="(v) => $emit('update:open', v)">
     <DialogPortal>
       <DialogOverlay
-        :class="{ 'lp-scrim--light': glass }"
+        :class="{ 'lp-scrim--light': frosted }"
         class="lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
         :style="{ zIndex: layer.scrim }"
       />
@@ -298,7 +302,7 @@ watch(
       <div
         ref="panelRef"
         class="flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line shadow-panel"
-        :class="[glass ? 'lp-glass-overlay' : 'bg-surface-raised', widthClass, tweening ? 'transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none' : '']"
+        :class="[frosted ? 'lp-glass-overlay' : 'bg-surface-raised', widthClass, tweening ? 'transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none' : '']"
         :style="{ ...(width ? { width } : {}), ...(hasAside ? { alignSelf: 'stretch' } : {}) }"
       >
         <header v-if="title || $slots.title" class="flex shrink-0 items-start justify-between gap-4 p-5 pb-3">

package/src/components/LpModalNav.vue

@@ -55,7 +55,7 @@ const props = withDefaults(
      * column inside the body, and the rail is no longer in the body.
      */
     fillBody?: boolean
-    /** Frosted glass panel, passed to LpModal. Off by default. */
+    /** Frosted glass panel, passed to LpModal. Follows `provideGlass` when unset. */
     glass?: boolean
   }>(),
   {
@@ -64,6 +64,7 @@ const props = withDefaults(
     mobileBreakpoint: "lg",
     navLabel: "Sections",
     navSide: "start",
+    glass: undefined,
   },
 )
 

package/src/components/LpShortcutsDialog.vue

@@ -2,40 +2,49 @@
 /*
  * 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.
+ * Two sources, used together or apart. `groups` is the written list: keys
+ * that are not bindings at all (arrows inside a list, Backspace in a palette)
+ * and the ones worth knowing before their screen is open. `live` adds every
+ * mounted `useHotkeys` binding that carries `help`, so a screen with its own
+ * keys documents them while it is open and drops them when it closes. Groups
+ * of the same title merge, and a combo is listed once.
  *
- * Combos are written the way they read ("Ctrl+Shift+M", "←→↑↓") and split on
- * "+" into one <kbd> each.
+ * Combos are written the way they read ("Ctrl+Shift+M", "Ctrl++", "←→↑↓") and
+ * split on "+" into one <kbd> each.
  */
+import { computed } from "vue"
 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[]
-}
+import {
+  activeShortcuts,
+  appleModifierLabel,
+  mergeShortcutGroups,
+  type ShortcutGroup,
+} from "../composables/useHotkeys"
 
 const props = withDefaults(
   defineProps<{
     open?: boolean
-    groups: ShortcutGroup[]
+    groups?: ShortcutGroup[]
+    /** Also list the bindings mounted right now (`useHotkeys` with `help`). */
+    live?: boolean
     title?: string
     description?: string
-    /** Frosted glass panel, passed to LpModal. Off by default. */
+    /** Frosted glass panel, passed to LpModal. Follows `provideGlass` when unset. */
     glass?: boolean
   }>(),
-  { open: false, title: "Keyboard shortcuts" },
+  { open: false, groups: () => [], live: false, title: "Keyboard shortcuts", glass: undefined },
 )
 
+/*
+ * One key per "+", except a "+" that is the key itself: "Ctrl++" is Ctrl and
+ * plus, not Ctrl and two blanks.
+ */
+function keysOf(combo: string): string[] {
+  return combo.split(/\+(?!$)/)
+}
+
+const shown = computed(() => (props.live ? mergeShortcutGroups(props.groups, activeShortcuts.value) : props.groups))
+
 const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
 </script>
 
@@ -49,13 +58,13 @@ const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
     @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">
+      <section v-for="group in shown" :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}`">
+              <kbd v-for="(key, index) in keysOf(entry.combo)" :key="`${key}-${index}`">
                 {{ appleModifierLabel(key.trim()) }}
               </kbd>
             </dd>

package/src/composables/useGlass.ts

@@ -0,0 +1,25 @@
+import { computed, inject, provide, toValue, type ComputedRef, type InjectionKey, type MaybeRefOrGetter } from "vue"
+
+/*
+ * Frosted glass as an app-wide default for overlays (modals, drawers, dialogs,
+ * the command palette). An app that wants every overlay frosted says so once
+ * at its root instead of on each of dozens of call sites, where the next new
+ * dialog would be the one that forgets. An explicit `glass` prop on a single
+ * overlay still wins, either way.
+ */
+const GLASS: InjectionKey<MaybeRefOrGetter<boolean>> = Symbol("lp-glass")
+
+/** Make `glass` the default for every overlay below the calling component. */
+export function provideGlass(enabled: MaybeRefOrGetter<boolean> = true): void {
+  provide(GLASS, enabled)
+}
+
+/**
+ * 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 function useGlass(own: () => boolean | undefined): ComputedRef<boolean> {
+  const inherited = inject(GLASS, false)
+  return computed(() => own() ?? toValue(inherited))
+}