@leavepulse/ui 0.42.0 → 0.43.0

package/dist/index.js

@@ -1,10 +1,10 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-CMjaPQVw.js";
+import { _ as _2 } from "./chunks/LpAddressInput-B-Zvxsn7.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-Bcv6EhqU.js";
+import { _ as _6 } from "./chunks/LpAppShell-BGQVIY-3.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,13 @@ 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-BNAvOR24.js";
+import { parseCommandQuery, rankCommandItems, swapCommandTerms } from "./components/commandSearch.js";
+import { _ as _17 } from "./chunks/LpConfirmDialog-Q-bxff8z.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-DgaS2s2i.js";
+import { _ as _22 } from "./chunks/LpDrawer-BZ6k3hvo.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";
@@ -35,13 +36,13 @@ import { _ as _27 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { default as default5 } from "./components/LpImageEditor.vue.js";
 import { _ as _28 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
 import { _ as _29 } from "./chunks/LpInput-9EXWUM9B.js";
-import { _ as _30 } from "./chunks/LpLightbox-oLqyjOln.js";
+import { _ as _30 } from "./chunks/LpLightbox-2sYVMY-S.js";
 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-8bja5bWS.js";
-import { _ as _35 } from "./chunks/LpModalNav-w9kfwHqO.js";
+import { _ as _33 } from "./chunks/LpMediaGallery-FF-NquIo.js";
+import { _ as _34 } from "./chunks/LpModal-Bt0pQCI_.js";
+import { _ as _35 } from "./chunks/LpModalNav-YaifHrXC.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 +65,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-DlTn5nXc.js";
+import { _ as _56 } from "./chunks/LpSidebar-ClBUwoEz.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";
@@ -270,6 +271,7 @@ export {
   normalizeHue,
   opaqueCss,
   parseColor,
+  parseCommandQuery,
   parseConfig,
   parseHex,
   parseTheme,
@@ -277,6 +279,7 @@ export {
   presets,
   project,
   provideGlass,
+  rankCommandItems,
   removeBlock,
   removeLeaf,
   reorderTab,
@@ -292,6 +295,7 @@ export {
   sortNodes,
   subtreeIds,
   subtreeSize,
+  swapCommandTerms,
   t as themeFromCookie,
   k as themeToCssRule,
   m as themeToCssVars,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -45,10 +45,11 @@
   "scripts": {
     "dev": "vite",
     "gen:names": "node scripts/gen-component-names.mjs",
-    "build": "node scripts/gen-component-names.mjs && vue-tsc --noEmit -p tsconfig.build.json && vite build --config vite.lib.config.ts",
+    "build": "node scripts/gen-component-names.mjs && vue-tsc --noEmit -p tsconfig.build.json && vite build --config vite.lib.config.ts && vue-tsc --declaration --emitDeclarationOnly --noEmit false -p tsconfig.build.json --outDir dist",
     "dev:dist": "vite build --watch --config vite.lib.config.ts",
     "prepublishOnly": "node scripts/gen-component-names.mjs && vue-tsc --noEmit -p tsconfig.build.json && vite build --config vite.lib.config.ts",
     "typecheck": "vue-tsc --noEmit",
+    "test": "bun test",
     "release": "npm version patch -m \"chore: release v%s\" && git push --follow-tags",
     "release:minor": "npm version minor -m \"chore: release v%s\" && git push --follow-tags",
     "release:major": "npm version major -m \"chore: release v%s\" && git push --follow-tags"
@@ -83,7 +84,6 @@
     "tailwindcss": "^4.2.4",
     "typescript": "^5.6.3",
     "vite": "^7.0.0",
-    "vite-plugin-dts": "^5.0.2",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vue": "3.5.31",
     "vue-tsc": "^3.0.0"

package/src/components/LpCommandPalette.vue

@@ -36,13 +36,15 @@ import {
   DialogRoot,
   DialogTitle,
 } from "reka-ui"
-import { computed, nextTick, ref, shallowRef, useId, watch } from "vue"
+import { computed, nextTick, onBeforeUnmount, 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"
+import { useModalLayer } from "./modalDepth"
+import { parseCommandQuery, rankCommandItems, swapCommandTerms } from "./commandSearch"
 
 export interface Command {
   id: string
@@ -234,6 +236,7 @@ const props = withDefaults(
 )
 
 const frosted = useGlass(() => props.glass)
+const { claim, release, layer } = useModalLayer()
 
 const DEFAULT_LABELS: PaletteLabels = {
   navigate: "navigate",
@@ -453,123 +456,22 @@ const source = computed<Command[]>(() => (mode.value ? modeItems.value : props.c
  * the one bilingual setup common enough to be worth a table — and it is a
  * fallback, tried only when the query as typed matches nothing.
  */
-const LATIN = "qwertyuiop[]asdfghjkl;'zxcvbnm,.`"
-const CYRILLIC = "йцукенгшщзхъфывапролджэячсмитьбюё"
-const SWAP = new Map<string, string>()
-for (let i = 0; i < LATIN.length; i++) {
-  SWAP.set(LATIN[i]!, CYRILLIC[i]!)
-  SWAP.set(CYRILLIC[i]!, LATIN[i]!)
-}
-
-function swapLayout(term: string): string {
-  return [...term].map((ch) => SWAP.get(ch) ?? ch).join("")
-}
-
-/** Damerau-Levenshtein distance, giving up past 1: all a typo check needs. */
-function withinOne(a: string, b: string): boolean {
-  if (Math.abs(a.length - b.length) > 1) return false
-  let i = 0
-  while (i < a.length && i < b.length && a[i] === b[i]) i++
-  if (i === a.length || i === b.length) return true
-  const rest = (x: number, y: number) => a.slice(i + x) === b.slice(i + y)
-  return rest(1, 1) || rest(1, 0) || rest(0, 1) || (a[i] === b[i + 1] && a[i + 1] === b[i] && rest(2, 2))
-}
-
-/*
- * A typo in a word long enough to have one: a slip in a three-letter word
- * makes it a different word. Compared against the word and its start, so
- * "deplyo" finds "deploy" and "deployment" alike.
- */
-const TYPO_MIN = 5
-function nearWord(term: string, label: string): boolean {
-  if (term.length < TYPO_MIN) return false
-  return label
-    .split(/[^\p{L}\p{N}]+/u)
-    .some((word) => withinOne(term, word) || (word.length > term.length && withinOne(term, word.slice(0, term.length))))
-}
-
-/*
- * Every word of the query has to land somewhere, in any order: "branch deploy"
- * finds "Deploy current branch". Per word, label > keywords > description,
- * the same weights the palette always had; a typo match ranks below all of
- * them, so an exact hit is never outranked by a near one.
- */
-interface SearchTerms {
-  include: string[]
-  exclude: string[]
-  groups: string[]
-}
-
-const QUERY_TOKEN = /(-?)(?:(in):)?(?:"([^"]*)"|(\S+))/giu
-
-function searchTerms(value: string): SearchTerms {
-  const out: SearchTerms = { include: [], exclude: [], groups: [] }
-  QUERY_TOKEN.lastIndex = 0
-  for (let match; (match = QUERY_TOKEN.exec(value)); ) {
-    const text = (match[3] ?? match[4] ?? "").trim().toLowerCase()
-    if (!text) continue
-    if (match[2] && !match[1]) out.groups.push(text)
-    else if (match[1]) out.exclude.push(text)
-    else out.include.push(text)
-  }
-  return out
-}
-
-function matches(c: Command, term: string): boolean {
-  return (
-    c.label.toLowerCase().includes(term) ||
-    (c.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(term)) ||
-    (c.description?.toLowerCase().includes(term) ?? false)
-  )
-}
-
-function score(c: Command, terms: SearchTerms): number {
-  const label = c.label.toLowerCase()
-  const keywords = (c.keywords ?? []).map((k) => k.toLowerCase())
-  const description = c.description?.toLowerCase() ?? ""
-  const group = c.group?.toLowerCase() ?? ""
-  if (terms.exclude.some((term) => matches(c, term)) || terms.groups.some((term) => !group.includes(term))) return 0
-  let total = terms.include.length ? 0 : 1
-  for (const term of terms.include) {
-    let hit =
-      (label.includes(term) ? 4 : 0) +
-      (keywords.some((k) => k.includes(term)) ? 3 : 0) +
-      (description.includes(term) ? 2 : 0)
-    if (!hit && nearWord(term, label)) hit = 1
-    if (!hit) return 0
-    total += hit
-  }
-  return total
-}
-
-function rank(items: Command[], terms: SearchTerms): Command[] {
-  return items
-    .map((c) => ({ c, score: score(c, terms) }))
-    .filter((e) => e.score > 0)
-    .sort((a, b) => b.score - a.score || a.c.label.localeCompare(b.c.label))
-    .map((e) => e.c)
-}
-
 /*
  * The local match and the terms it matched with — the swapped ones when the
  * layout fallback is what found it, so the highlight marks what actually hit.
  */
 const local = computed<{ items: Command[]; terms: string[] }>(() => {
-  const terms = searchTerms(query.value)
+  const terms = parseCommandQuery(query.value)
   const filtered = query.value.trim()
     ? source.value
     : source.value.filter((c) => !c.hidden)
   // Empty query: show everything EXCEPT hidden commands (they only surface once
   // typed). With a query, hidden commands rank like any other.
   if (!terms.include.length && !terms.exclude.length && !terms.groups.length) return { items: filtered, terms: [] }
-  const items = rank(filtered, terms)
+  const items = rankCommandItems(filtered, terms)
   if (items.length || !props.layoutFallback) return { items, terms: terms.include }
-  const swapped: SearchTerms = {
-    include: terms.include.map(swapLayout),
-    exclude: terms.exclude.map(swapLayout),
-    groups: terms.groups.map(swapLayout),
-  }
-  const other = rank(filtered, swapped)
+  const swapped = swapCommandTerms(terms)
+  const other = rankCommandItems(filtered, swapped)
   return other.length ? { items: other, terms: swapped.include } : { items, terms: terms.include }
 })
 
@@ -904,6 +806,8 @@ function onEscape(event: KeyboardEvent) {
 watch(
   () => props.open,
   async (o) => {
+    if (o) claim()
+    else release()
     cancel()
     query.value = ""
     select(0)
@@ -921,6 +825,8 @@ watch(
   { immediate: true },
 )
 
+onBeforeUnmount(release)
+
 // 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 "л".
@@ -943,12 +849,14 @@ useHotkeys(() =>
   <DialogRoot :open="open" @update:open="(v) => emit('update:open', v)">
     <DialogPortal>
       <DialogOverlay
-        :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]"
+        :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested }"
+        class="lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
+        :style="{ zIndex: layer.scrim }"
       />
       <DialogContent
-        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']"
+        class="lp-cmd-dialog fixed left-1/2 top-[12vh] 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 ? (layer.nested ? 'lp-glass-overlay--nested' : 'lp-glass-overlay') : 'bg-surface-raised', previewPane && 'lp-cmd-split']"
+        :style="{ zIndex: layer.panel }"
         :data-pane="paneOpen ? 'open' : undefined"
         @open-auto-focus.prevent
         @keydown.capture="onPaletteKeydown"

package/src/components/LpDrawer.vue

@@ -153,7 +153,7 @@ watch(() => props.open, (open) => (open ? claim() : release()), { immediate: tru
 onBeforeUnmount(release)
 
 const contentClass = computed(() => {
-  const surface = frosted.value ? "lp-glass-overlay" : "bg-surface-raised"
+  const surface = frosted.value ? (layer.value.nested ? "lp-glass-overlay--nested" : "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",
@@ -443,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': frosted }"
+      :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested }"
       :style="{ zIndex: layer.scrim, opacity: peek, transition: peeking || reducedMotion() ? 'none' : 'opacity 0.18s ease-out' }"
     />
     <div
@@ -476,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': frosted }"
+        :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested }"
       />
       <DrawerContent
         :class="contentClass"

package/src/components/LpLightbox.vue

@@ -21,10 +21,11 @@ import {
   DialogRoot,
   DialogTitle,
 } from "reka-ui"
-import { computed, nextTick, ref, watch } from "vue"
+import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue"
 import { useZoomPan } from "../composables/useZoomPan"
 import { fileNameOf, type LightboxItem } from "./lightbox"
 import LpIcon from "./LpIcon.vue"
+import { useModalLayer } from "./modalDepth"
 
 const props = withDefaults(
   defineProps<{
@@ -67,6 +68,10 @@ const emit = defineEmits<{
   (e: "copy", item: LightboxItem, ok: boolean): void
 }>()
 
+const { claim, release, layer } = useModalLayer()
+watch(() => props.open, (open) => (open ? claim() : release()), { immediate: true })
+onBeforeUnmount(release)
+
 defineSlots<{
   /** Replace the caption block under the image. */
   caption(props: { item: LightboxItem; index: number; total: number }): unknown
@@ -335,13 +340,14 @@ const ARROW =
 <template>
   <DialogRoot :open="open" @update:open="(v) => emit('update:open', v)">
     <DialogPortal>
-      <!-- Sits on the lightbox rung, not the shared modal one: opening this
-           from inside a dialog must cover that dialog, not tie with it. -->
       <DialogOverlay
-        class="lp-scrim lp-scrim--deep fixed inset-0 z-(--z-lightbox-overlay) data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
+        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]"
+        :class="{ 'lp-scrim--nested': layer.nested }"
+        :style="{ zIndex: layer.scrim }"
       />
       <DialogContent
-        class="fixed inset-0 z-(--z-lightbox) flex flex-col outline-none data-[state=open]:animate-[lightbox-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[lightbox-out_140ms_cubic-bezier(0.4,0,1,1)] motion-reduce:animate-none"
+        class="fixed inset-0 flex flex-col outline-none data-[state=open]:animate-[lightbox-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[lightbox-out_140ms_cubic-bezier(0.4,0,1,1)] motion-reduce:animate-none"
+        :style="{ zIndex: layer.panel }"
         @keydown="onKeydown"
       >
         <!-- reka wants both for a labelled dialog; the caption is the title. -->

package/src/components/LpModal.vue

@@ -232,7 +232,7 @@ watch(
   <DialogRoot :open="open" @update:open="(v) => $emit('update:open', v)">
     <DialogPortal>
       <DialogOverlay
-        :class="{ 'lp-scrim--light': frosted }"
+        :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested }"
         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 }"
       />
@@ -302,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="[frosted ? 'lp-glass-overlay' : 'bg-surface-raised', widthClass, tweening ? 'transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none' : '']"
+        :class="[frosted ? (layer.nested ? 'lp-glass-overlay--nested' : '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/commandSearch.ts

@@ -0,0 +1,92 @@
+export interface SearchableCommand {
+  label: string
+  description?: string
+  keywords?: string[]
+  group?: string
+}
+
+export interface CommandSearchTerms {
+  include: string[]
+  exclude: string[]
+  groups: string[]
+}
+
+const QUERY_TOKEN = /(-?)(?:(in):)?(?:"([^"]*)"|(\S+))/giu
+const LATIN = "qwertyuiop[]asdfghjkl;'zxcvbnm,.`"
+const CYRILLIC = "йцукенгшщзхъфывапролджэячсмитьбюё"
+const SWAP = new Map<string, string>()
+
+for (let i = 0; i < LATIN.length; i++) {
+  SWAP.set(LATIN[i]!, CYRILLIC[i]!)
+  SWAP.set(CYRILLIC[i]!, LATIN[i]!)
+}
+
+export function parseCommandQuery(value: string): CommandSearchTerms {
+  const out: CommandSearchTerms = { include: [], exclude: [], groups: [] }
+  QUERY_TOKEN.lastIndex = 0
+  for (let match; (match = QUERY_TOKEN.exec(value)); ) {
+    const text = (match[3] ?? match[4] ?? "").trim().toLowerCase()
+    if (!text) continue
+    if (match[2] && !match[1]) out.groups.push(text)
+    else if (match[1]) out.exclude.push(text)
+    else out.include.push(text)
+  }
+  return out
+}
+
+export function swapCommandTerms(terms: CommandSearchTerms): CommandSearchTerms {
+  const swap = (term: string) => [...term].map((ch) => SWAP.get(ch) ?? ch).join("")
+  return {
+    include: terms.include.map(swap),
+    exclude: terms.exclude.map(swap),
+    groups: terms.groups.map(swap),
+  }
+}
+
+function matches(command: SearchableCommand, term: string): boolean {
+  return (
+    command.label.toLowerCase().includes(term)
+    || (command.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(term))
+    || (command.description?.toLowerCase().includes(term) ?? false)
+  )
+}
+
+function withinOne(a: string, b: string): boolean {
+  if (Math.abs(a.length - b.length) > 1) return false
+  let i = 0
+  while (i < a.length && i < b.length && a[i] === b[i]) i++
+  if (i === a.length || i === b.length) return true
+  const rest = (x: number, y: number) => a.slice(i + x) === b.slice(i + y)
+  return rest(1, 1) || rest(1, 0) || rest(0, 1) || (a[i] === b[i + 1] && a[i + 1] === b[i] && rest(2, 2))
+}
+
+function nearWord(term: string, label: string): boolean {
+  if (term.length < 5) return false
+  return label
+    .split(/[^\p{L}\p{N}]+/u)
+    .some((word) => withinOne(term, word) || (word.length > term.length && withinOne(term, word.slice(0, term.length))))
+}
+
+function score(command: SearchableCommand, terms: CommandSearchTerms): number {
+  const label = command.label.toLowerCase()
+  const keywords = (command.keywords ?? []).map((keyword) => keyword.toLowerCase())
+  const description = command.description?.toLowerCase() ?? ""
+  const group = command.group?.toLowerCase() ?? ""
+  if (terms.exclude.some((term) => matches(command, term)) || terms.groups.some((term) => !group.includes(term))) return 0
+  let total = terms.include.length ? 0 : 1
+  for (const term of terms.include) {
+    let hit = (label.includes(term) ? 4 : 0) + (keywords.some((keyword) => keyword.includes(term)) ? 3 : 0) + (description.includes(term) ? 2 : 0)
+    if (!hit && nearWord(term, label)) hit = 1
+    if (!hit) return 0
+    total += hit
+  }
+  return total
+}
+
+export function rankCommandItems<T extends SearchableCommand>(items: T[], terms: CommandSearchTerms): T[] {
+  return items
+    .map((command) => ({ command, score: score(command, terms) }))
+    .filter((entry) => entry.score > 0)
+    .sort((a, b) => b.score - a.score || a.command.label.localeCompare(b.command.label))
+    .map((entry) => entry.command)
+}

package/src/components/modalDepth.ts

@@ -1,61 +1,17 @@
-/*
- * Stacking order for dialogs that are open at the same time.
- *
- * Not provide/inject, which was the first shape tried: it only works when the
- * second dialog is rendered INSIDE the first one's subtree, and the ordinary
- * way to write a dialog opened from a dialog is to put both at the top level of
- * the same component and toggle them with separate flags. Those two are
- * siblings, so the inner one injects nothing and lands on the same rungs as the
- * outer — which is the bug.
- *
- * What decides the order is the sequence of OPENING: a dialog opened while
- * another is up belongs above it, wherever it sits in the markup.
- *
- * The newest dialog keeps the scale's own --z-overlay/--z-modal and the ones
- * beneath are pushed DOWN, rather than each new dialog climbing higher. Climbing
- * runs out of room immediately: --z-popover is only 10 above --z-modal, so the
- * second nested dialog would tie with every popover and the third with every
- * tooltip — and a select inside a dialog is ordinary. Descending has no such
- * ceiling, and it keeps the frontmost dialog exactly where a single one has
- * always been.
- */
 import { computed, ref, type ComputedRef } from "vue"
 
-/*
- * Rungs per level. Has to clear a whole level, not just its scrim: --z-overlay
- * is 100 and --z-modal 110, so a gap of 2 left the upper scrim under the lower
- * PANEL — it darkened that panel and could not blur it, a backdrop-filter
- * having nothing of it underneath to work on.
- *
- * Clearing it means strictly more than the 10 between the two rungs. A step of
- * exactly 10 put the lower panel at 100, level with the upper scrim, and a tie
- * in z-index is settled by DOM order. Siblings in one component happened to
- * come out right, but a dialog mounted once at the app root — opened from a
- * page dialog that teleported in later — lost the tie, and its scrim darkened
- * the page behind the first dialog instead of the first dialog itself.
- */
 const STEP = 20
 
-/** Levels currently claimed, oldest first. */
 const stack = ref<number[]>([])
 let nextId = 0
 
-/**
- * Register a dialog as open and get back the z-indexes it should paint with.
- * The result is reactive: opening another dialog moves this one down a step.
- */
 export function useModalLayer(): {
   claim: () => void
   release: () => void
-  layer: ComputedRef<{ scrim: string; panel: string }>
+  layer: ComputedRef<{ scrim: string; panel: string; nested: boolean }>
 } {
   const id = nextId++
 
-  /*
-   * How far from the TOP of the stack, so the newest dialog is 0 and keeps the
-   * unmodified rungs. A dialog that is not in the stack reads 0 too: it is
-   * either closed, or opening this very frame and about to claim.
-   */
   const fromTop = computed(() => {
     const at = stack.value.indexOf(id)
     return at === -1 ? 0 : stack.value.length - 1 - at
@@ -71,14 +27,14 @@ export function useModalLayer(): {
     layer: computed(() => {
       const drop = fromTop.value * STEP
       return {
-        scrim: `calc(var(--z-overlay) - ${drop})`,
-        panel: `calc(var(--z-modal) - ${drop})`,
+        scrim: `calc(var(--z-toast) - 20 - ${drop})`,
+        panel: `calc(var(--z-toast) - 10 - ${drop})`,
+        nested: stack.value.indexOf(id) > 0,
       }
     }),
   }
 }
 
-/** True while any dialog or drawer holds a level — e.g. to keep a gesture from opening another one over it. */
 export function anyModalOpen(): boolean {
   return stack.value.length > 0
 }

package/src/index.ts

@@ -65,6 +65,8 @@ export {
 export type { ColorFormat, Hsv, Rgb } from "./components/color"
 export { default as LpCommandPalette } from "./components/LpCommandPalette.vue"
 export type { Command, PaletteLabels } from "./components/LpCommandPalette.vue"
+export { parseCommandQuery, rankCommandItems, swapCommandTerms } from "./components/commandSearch"
+export type { CommandSearchTerms, SearchableCommand } from "./components/commandSearch"
 export { default as LpConfirmDialog } from "./components/LpConfirmDialog.vue"
 export { default as LpContextMenu } from "./components/LpContextMenu.vue"
 export type { ContextMenuItemDef } from "./components/LpContextMenu.vue"

package/src/tokens/tokens.css

@@ -171,14 +171,6 @@
   --z-tooltip: 130;
   --z-toast: 200;
 
-  /* A lightbox is usually opened FROM a dialog — click a thumbnail in a modal
-     and the full image comes up over it. Sharing --z-overlay/--z-modal left
-     that order to DOM insertion alone, so the lightbox's own scrim landed on
-     top of the modal panel and swallowed it while double-darkening the page
-     behind. Its own rung above the modal (but below tooltip/toast, which must
-     outrank everything) makes the stack explicit. */
-  --z-lightbox-overlay: 140;
-  --z-lightbox: 150;
 }
 
 /* ── overlay enter/exit animations ───────────────
@@ -511,17 +503,6 @@
   --scrim-opacity: 0.62;
 }
 
-/*
- * A lightbox is the one scrim that hides a whole page behind a photo, and it is
- * usually opened FROM a dialog — so it is the layer the mild shared tint serves
- * worst: without the blur, the content behind stayed readable around the image.
- * It gets its own value instead of raising the shared one, which would darken
- * every stacked pair.
- */
-:root[data-lp-no-backdrop] .lp-scrim--deep {
-  --scrim-opacity: 0.78;
-}
-
 /*
  * Under a glass panel (.lp-glass-overlay) the usual tint leaves nothing but
  * grey to see through it, so the scrim dims less and the panel's own blur
@@ -532,6 +513,12 @@
   --scrim-opacity: 0.32;
 }
 
+.lp-scrim--nested {
+  --scrim-opacity: 0.24;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
 /*
  * Frosted overlay: a floating panel that lets the page show through, softened.
  * For surfaces that float over everything and are read briefly (the command
@@ -550,6 +537,13 @@
   backdrop-filter: blur(var(--glass-overlay-blur, 28px)) saturate(170%);
 }
 
+.lp-glass-overlay--nested {
+  background-color: color-mix(in srgb, var(--color-surface-raised) 88%, transparent);
+  background-image: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
 :root[data-lp-no-backdrop] .lp-glass-overlay {
   background-color: var(--color-surface-raised);
   background-image: none;

package/dist/component-names.d.ts

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

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

@@ -1,28 +0,0 @@
-import { Split } from '../layout/tree';
-import { BlockRegistry } from '../layout/registry';
-type __VLS_Props = {
-    modelValue: Split;
-    edit?: boolean;
-    /** Catalogue mapping block ids to titles/icons for the tab bars. */
-    registry?: BlockRegistry;
-};
-type __VLS_Slots = {
-    block(props: {
-        block: string;
-        leafId: string;
-        edit: boolean;
-    }): unknown;
-};
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:modelValue": (value: Split) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((value: Split) => any) | undefined;
-}>, {}, {}, {}, {}, 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;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};