@leavepulse/ui 0.89.1 → 0.91.0

package/README.md

@@ -312,7 +312,7 @@ from the comment that opens the component.
 - `LpPopover`: A floating panel anchored to a trigger, for content that is more than a tip.
 - `LpRelativeTime`: A date said the way people say it ("3 min ago", "in 2 h"), kept true as time passes, with the exact date one hover away.
 - `LpScrollArea`: Drawn overlay scrollbar (reka ScrollArea).
-- `LpSection`: A section heading: a title, an optional line under it, and actions on the right.
+- `LpSection`: A section heading with no default slot: a title, an optional line under it and actions on the right; the section's content goes after it, not inside.
 - `LpSkeleton`: Loading placeholder, in two shapes.
 - `LpStatus`: What state something is in, as a light and a word: a server online, a bot starting, a region degraded.
 - `LpTooltip`: Tooltip for controls whose meaning is not written on them — an icon button, a truncated value, a disabled action that owes an explanation.

package/dist/assets/{LpCommandPalette-CO_5TFOQ.css → LpCommandPalette-D9ZuNQmc.css}

@@ -5,28 +5,28 @@
  * 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-dialog[data-v-1801065c] {
+.lp-cmd-dialog[data-v-d51dc98f] {
   --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-split[data-v-1801065c] {
+.lp-cmd-split[data-v-d51dc98f] {
   transition:
     width 300ms var(--ease-emphasized, ease),
     min-height 300ms var(--ease-emphasized, ease);
 }
 @media (min-width: 768px) {
-.lp-cmd-split .lp-cmd-list[data-v-1801065c] {
+.lp-cmd-split .lp-cmd-list[data-v-d51dc98f] {
     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"][data-v-1801065c] {
+.lp-cmd-dialog[data-pane="open"][data-v-d51dc98f] {
     width: calc(var(--lp-cmd-list) + var(--lp-cmd-pane));
     min-height: min(76vh, 36rem);
 }
 }
-.lp-cmd-pane[data-v-1801065c] {
+.lp-cmd-pane[data-v-d51dc98f] {
   width: var(--lp-cmd-pane);
 }
 /*
@@ -36,7 +36,7 @@
  * desktop window keeps the card.
  */
 @media (hover: none) and (pointer: coarse) and (max-width: 639px) {
-.lp-cmd-dialog[data-v-1801065c] {
+.lp-cmd-dialog[data-v-d51dc98f] {
     inset: var(--lp-cmd-vy, 0) auto auto var(--lp-cmd-vx, 0);
     translate: none;
     width: var(--lp-cmd-vw, 100%);
@@ -48,10 +48,10 @@
     padding-bottom: env(safe-area-inset-bottom);
 }
 }
-.lp-cmd-dialog[data-editing] .lp-cmd-pane[data-v-1801065c] {
+.lp-cmd-dialog[data-editing] .lp-cmd-pane[data-v-d51dc98f] {
   width: 100%;
 }
-.lp-cmd-dialog[data-editing][data-v-1801065c] {
+.lp-cmd-dialog[data-editing][data-v-d51dc98f] {
   width: var(--lp-cmd-list);
   min-height: 0;
 }
@@ -59,43 +59,43 @@
  * 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[data-v-1801065c],
-.lp-cmd-pane-leave-active[data-v-1801065c] {
+.lp-cmd-pane-enter-active[data-v-d51dc98f],
+.lp-cmd-pane-leave-active[data-v-d51dc98f] {
   transition:
     transform 300ms var(--ease-emphasized, ease),
     opacity 300ms ease;
 }
-.lp-cmd-pane-enter-from[data-v-1801065c],
-.lp-cmd-pane-leave-to[data-v-1801065c] {
+.lp-cmd-pane-enter-from[data-v-d51dc98f],
+.lp-cmd-pane-leave-to[data-v-d51dc98f] {
   opacity: 0;
   transform: translateX(40%);
 }
-.lp-cmd-para[data-v-1801065c] {
+.lp-cmd-para[data-v-d51dc98f] {
   --rise: 4px;
   animation: rise-in 260ms ease-out both;
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-split[data-v-1801065c],
-  .lp-cmd-pane-enter-active[data-v-1801065c],
-  .lp-cmd-pane-leave-active[data-v-1801065c] {
+.lp-cmd-split[data-v-d51dc98f],
+  .lp-cmd-pane-enter-active[data-v-d51dc98f],
+  .lp-cmd-pane-leave-active[data-v-d51dc98f] {
     transition: none;
 }
-.lp-cmd-para[data-v-1801065c] {
+.lp-cmd-para[data-v-d51dc98f] {
     animation: none;
 }
 }
-.lp-cmd-excerpt[data-v-1801065c] {
+.lp-cmd-excerpt[data-v-d51dc98f] {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 /* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-1801065c] {
+.lp-cmd-item[data-v-d51dc98f] {
   --rise: 3px;
   animation: rise-in 140ms ease-out both;
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-1801065c] {
+.lp-cmd-item[data-v-d51dc98f] {
     animation: none;
 }
 }

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

@@ -53,11 +53,19 @@ export interface Command {
     group?: string;
     disabled?: boolean;
     /**
-     * Hidden from the default (empty-query) list — only surfaces once the user
-     * types something it matches. For rarely-used or destructive actions (prune,
-     * decommission, …) that shouldn't clutter the palette but stay reachable.
+     * Hidden from the default (empty-query) list and surfaced only when the query
+     * names it: every typed word starts a word of its label or keywords. A word
+     * inside another word, the description or a near miss does not reveal it.
+     * For rarely-used or destructive actions (prune, decommission, …) that
+     * shouldn't clutter the palette but stay reachable.
      */
     hidden?: boolean;
+    /**
+     * For a hidden command: the words that reveal it, instead of its label and
+     * keywords. A variant whose label repeats its parent's word ("Vacation: sick
+     * leave…") then stays out of a search for the parent and shows up for "sick".
+     */
+    revealOn?: string[];
     /**
      * Picking this opens a mode instead of closing: a nested list, either given
      * outright or fetched from the query typed inside it. This is what keeps a

package/dist/components/LpCommandPalette.vue.js

@@ -26,7 +26,7 @@ import { parsePaletteQuery, parseCommandQuery, searchCommandItems, applyQueryFil
 import { PALETTE_MODES, modeChipLabel, settleFetched, fallbackRows, readRecent, resolveRecentItems, recentVisible, commandHasPreview, matchModePrefix, isSafeHref, absoluteHref, commandKey, recentKey, pushRecent, moreRowId, toRecentItem } from "./commandPalette.js";
 import { useView, usePortalTarget, useOutsideGuard, viewWindow } from "../composables/useView.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpCommandPalette-CO_5TFOQ.css';const _hoisted_1 = { class: "relative flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
+import '../assets/LpCommandPalette-D9ZuNQmc.css';const _hoisted_1 = { class: "relative flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
 const _hoisted_2 = ["title", "onClick"];
 const _hoisted_3 = ["readonly", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "placeholder", "onKeydown"];
 const _hoisted_4 = { class: "shrink-0 rounded-small border border-line px-1.5 py-0.5 text-[10px] text-muted [@media(hover:none)_and_(pointer:coarse)]:hidden" };
@@ -1400,7 +1400,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1801065c"]]);
+const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d51dc98f"]]);
 export {
   LpCommandPalette as default
 };

package/dist/components/commandSearch.d.ts

@@ -3,6 +3,8 @@ export interface SearchableCommand {
     description?: string;
     keywords?: string[];
     group?: string;
+    hidden?: boolean;
+    revealOn?: string[];
 }
 export interface CommandSearchTerms {
     include: string[];

package/dist/components/commandSearch.js

@@ -26,9 +26,17 @@ function nearWord(term, label) {
   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 wordStarts(text, term) {
+  return text.split(/[^\p{L}\p{N}]+/u).some((word) => word.startsWith(term));
+}
+function named(command, terms) {
+  const words = command.revealOn ? command.revealOn.map((word) => word.toLowerCase()) : [command.label.toLowerCase(), ...(command.keywords ?? []).map((keyword) => keyword.toLowerCase())];
+  return terms.include.length > 0 && terms.include.every((term) => words.some((text) => wordStarts(text, term)));
+}
 function score(command, terms) {
+  if (command.hidden && !named(command, terms)) return 0;
   const label = command.label.toLowerCase();
-  const keywords = (command.keywords ?? []).map((keyword) => keyword.toLowerCase());
+  const keywords = [...command.keywords ?? [], ...command.revealOn ?? []].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;

package/package.json

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

package/src/components/LpCommandPalette.vue

@@ -143,11 +143,19 @@ export interface Command {
   group?: string
   disabled?: boolean
   /**
-   * Hidden from the default (empty-query) list — only surfaces once the user
-   * types something it matches. For rarely-used or destructive actions (prune,
-   * decommission, …) that shouldn't clutter the palette but stay reachable.
+   * Hidden from the default (empty-query) list and surfaced only when the query
+   * names it: every typed word starts a word of its label or keywords. A word
+   * inside another word, the description or a near miss does not reveal it.
+   * For rarely-used or destructive actions (prune, decommission, …) that
+   * shouldn't clutter the palette but stay reachable.
    */
   hidden?: boolean
+  /**
+   * For a hidden command: the words that reveal it, instead of its label and
+   * keywords. A variant whose label repeats its parent's word ("Vacation: sick
+   * leave…") then stays out of a search for the parent and shows up for "sick".
+   */
+  revealOn?: string[]
   /**
    * Picking this opens a mode instead of closing: a nested list, either given
    * outright or fetched from the query typed inside it. This is what keeps a
@@ -902,8 +910,8 @@ const local = computed<{ items: Command[]; terms: string[] }>(() => {
   const filtered = query.value.trim()
     ? source.value.filter((c) => !c.fallback)
     : source.value.filter((c) => !c.hidden && !c.fallback)
-  // Empty query: show everything EXCEPT hidden commands (they only surface once
-  // typed). With a query, hidden commands rank like any other.
+  // Empty query: show everything EXCEPT hidden commands. With a query, a hidden
+  // command ranks only when the query names it (see commandSearch).
   if (!terms.include.length && !terms.exclude.length && !terms.groups.length) return { items: filtered, terms: [] }
   return searchCommandItems(filtered, terms)
 })

package/src/components/LpSection.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /*
- * A section heading: a title, an optional line under it, and actions on the
- * right.
+ * A section heading with no default slot: a title, an optional line under
+ * it and actions on the right; the section's content goes after it, not
+ * inside.
  *
  *   <LpSection title="Recent invoices">
  *     <template #actions><LpButton size="sm">Export</LpButton></template>

package/src/components/commandSearch.ts

@@ -3,6 +3,8 @@ export interface SearchableCommand {
   description?: string
   keywords?: string[]
   group?: string
+  hidden?: boolean
+  revealOn?: string[]
 }
 
 export interface CommandSearchTerms {
@@ -50,9 +52,29 @@ function nearWord(term: string, label: string): boolean {
     .some((word) => withinOne(term, word) || (word.length > term.length && withinOne(term, word.slice(0, term.length))))
 }
 
+function wordStarts(text: string, term: string): boolean {
+  return text.split(/[^\p{L}\p{N}]+/u).some((word) => word.startsWith(term))
+}
+
+/*
+ * A hidden command is there for whoever names it, not for whoever types a word
+ * it happens to contain. Every term has to start a word of its label or of a
+ * keyword (or of `revealOn`, which then replaces both): "пт" no longer digs a
+ * settings key out of "Транскрипты", and "vacation" no longer spills every
+ * hidden variant of it. Descriptions, mid-word hits and near misses do not
+ * reveal; the visible list keeps all of those.
+ */
+function named(command: SearchableCommand, terms: CommandSearchTerms): boolean {
+  const words = command.revealOn
+    ? command.revealOn.map((word) => word.toLowerCase())
+    : [command.label.toLowerCase(), ...(command.keywords ?? []).map((keyword) => keyword.toLowerCase())]
+  return terms.include.length > 0 && terms.include.every((term) => words.some((text) => wordStarts(text, term)))
+}
+
 function score(command: SearchableCommand, terms: CommandSearchTerms): number {
+  if (command.hidden && !named(command, terms)) return 0
   const label = command.label.toLowerCase()
-  const keywords = (command.keywords ?? []).map((keyword) => keyword.toLowerCase())
+  const keywords = [...(command.keywords ?? []), ...(command.revealOn ?? [])].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

package/src/iconSubset.d.mts

@@ -5,6 +5,8 @@ export interface IconCollection {
   width?: number
   height?: number
 }
+export function refsInText(text: string): [prefix: string, name: string][]
+export function refsInDirs(dirs: string[]): Map<string, Set<string>>
 export function namesInText(text: string): string[]
 export function namesInDirs(dirs: string[]): Set<string>
 export function subset(collection: IconCollection, names: Iterable<string>): IconCollection

package/src/iconSubset.mjs

@@ -1,19 +1,32 @@
 // Shared by the kit's own icon generator and the Nuxt module's app scan: find
-// "lucide:<name>" literals in source text and cut an iconify collection down to
-// just those icons (aliases keep their parent).
+// "<prefix>:<name>" literals in source text and cut an iconify collection down
+// to just those icons (aliases keep their parent). Any prefix is collected;
+// whoever reads the result decides which prefixes are icon sets (the module
+// keeps those the app has an @iconify-json package for), so "node:fs" in a
+// source file costs nothing.
 import { readdirSync, readFileSync, statSync } from "node:fs"
 import { join } from "node:path"
 
-const NAME = /lucide:([a-z0-9]+(?:-[a-z0-9]+)*)/g
+const PART = "[a-z0-9]+(?:-[a-z0-9]+)*"
+const REF = new RegExp(`(?<![a-z0-9-])(${PART}):(${PART})`, "g")
 const SOURCE = /\.(vue|ts|tsx|js|jsx|mjs|md|html)$/
 const SKIP = new Set(["node_modules", "dist", ".nuxt", ".output", ".git"])
 
+/** Every "<prefix>:<name>" literal, as [prefix, name] pairs. */
+export function refsInText(text) {
+  return [...text.matchAll(REF)].map((m) => [m[1], m[2]])
+}
+
+/** The lucide names in a text. */
 export function namesInText(text) {
-  return [...text.matchAll(NAME)].map((m) => m[1])
+  return refsInText(text)
+    .filter(([prefix]) => prefix === "lucide")
+    .map(([, name]) => name)
 }
 
-export function namesInDirs(dirs) {
-  const names = new Set()
+/** Every "<prefix>:<name>" literal under the dirs, as prefix -> names. */
+export function refsInDirs(dirs) {
+  const refs = new Map()
   const walk = (dir) => {
     let entries
     try {
@@ -25,11 +38,21 @@ export function namesInDirs(dirs) {
       if (SKIP.has(entry)) continue
       const path = join(dir, entry)
       if (statSync(path).isDirectory()) walk(path)
-      else if (SOURCE.test(entry)) for (const n of namesInText(readFileSync(path, "utf8"))) names.add(n)
+      else if (SOURCE.test(entry)) {
+        for (const [prefix, name] of refsInText(readFileSync(path, "utf8"))) {
+          if (!refs.has(prefix)) refs.set(prefix, new Set())
+          refs.get(prefix).add(name)
+        }
+      }
     }
   }
   for (const dir of dirs) walk(dir)
-  return names
+  return refs
+}
+
+/** The lucide names under the dirs. */
+export function namesInDirs(dirs) {
+  return refsInDirs(dirs).get("lucide") ?? new Set()
 }
 
 export function subset(collection, names) {

package/src/nuxt.ts

@@ -18,11 +18,16 @@
  *   link         false to skip providing NuxtLink as the kit's link component
  *   exclude      component names not to auto-register (e.g. ["LayoutCanvas"]
  *                when the app has its own component of that name)
- *   icons        which lucide icons render in the server pass and ship in the
- *                main bundle: "scan" (default) finds "lucide:*" literals in the
- *                app's source, "all" registers the whole set, "kit" only the
- *                kit's own, or a list of names. Anything else still renders,
- *                from a lazily loaded chunk of the bundled collection.
+ *   icons        which icons render in the server pass and ship in the main
+ *                bundle: "scan" (default) finds "lucide:*" literals in the
+ *                app's source, "all" registers the whole lucide set, "kit"
+ *                only the kit's own, or a list of names. Anything else in
+ *                lucide still renders, from a lazily loaded chunk of the
+ *                bundled collection. Other sets ("logos:google-icon") are
+ *                found the same way, by "scan" or in the list, for every
+ *                prefix the app has an @iconify-json/<prefix> package for:
+ *                registered offline from that package, never fetched from
+ *                the iconify API.
  *   propCheck    false to skip the dev warning for an unknown prop on a kit
  *                component (default: on in `nuxt dev`, never in a build)
  */
@@ -30,7 +35,7 @@ import { readFileSync } from "node:fs"
 import { createRequire } from "node:module"
 import { addComponent, addPlugin, addPluginTemplate, addTemplate, createResolver, defineNuxtModule } from "@nuxt/kit"
 import { COMPONENT_NAMES } from "./component-names"
-import { namesInDirs, subset } from "./iconSubset.mjs"
+import { type IconCollection, refsInDirs, subset } from "./iconSubset.mjs"
 
 export interface LeavepulseUiOptions {
   /** Register the SSR theme plugin. Disable to wire theming yourself. */
@@ -43,18 +48,52 @@ export interface LeavepulseUiOptions {
   link?: boolean
   /** Component names to leave unregistered. */
   exclude?: string[]
-  /** Lucide icons registered up front (default "scan"). */
+  /** Icons registered up front (default "scan"). */
   icons?: "scan" | "all" | "kit" | string[]
   /** Warn in `nuxt dev` about an unknown prop on a kit component (default true). */
   propCheck?: boolean
 }
 
-function iconsPlugin(mode: LeavepulseUiOptions["icons"], srcDir: string): string {
+/** The names asked for, as prefix -> names; a bare name is lucide. */
+function iconRefs(mode: LeavepulseUiOptions["icons"], srcDir: string): Map<string, Set<string>> {
+  if (!Array.isArray(mode)) return refsInDirs([srcDir])
+  const refs = new Map<string, Set<string>>()
+  for (const ref of mode) {
+    const [prefix, name] = ref.includes(":") ? ref.split(":", 2) : ["lucide", ref]
+    if (!refs.has(prefix!)) refs.set(prefix!, new Set())
+    refs.get(prefix!)!.add(name!)
+  }
+  return refs
+}
+
+/** An installed iconify set, read from the app's own dependencies; null if it has none. */
+function collectionOf(prefix: string, rootDir: string): IconCollection | null {
+  try {
+    const path = createRequire(`${rootDir}/package.json`).resolve(`@iconify-json/${prefix}/icons.json`)
+    return JSON.parse(readFileSync(path, "utf8")) as IconCollection
+  } catch {
+    return null
+  }
+}
+
+export function iconsPlugin(mode: LeavepulseUiOptions["icons"], srcDir: string, rootDir: string): string {
   if (mode === "kit") return ""
-  if (mode === "all") return 'import "@leavepulse/ui/icons-all"\n'
-  const lucide = JSON.parse(readFileSync(createRequire(import.meta.url).resolve("@iconify-json/lucide/icons.json"), "utf8"))
-  const names = Array.isArray(mode) ? mode.map((n) => n.replace(/^lucide:/, "")) : namesInDirs([srcDir])
-  return `import { registerIconCollection } from "@leavepulse/ui"\nregisterIconCollection(${JSON.stringify(subset(lucide, names))})\n`
+  const refs = iconRefs(mode, srcDir)
+  const sets: IconCollection[] = []
+  if (mode !== "all") {
+    const lucide = JSON.parse(readFileSync(createRequire(import.meta.url).resolve("@iconify-json/lucide/icons.json"), "utf8"))
+    sets.push(subset(lucide, refs.get("lucide") ?? []))
+  }
+  for (const [prefix, names] of refs) {
+    if (prefix === "lucide") continue
+    const collection = collectionOf(prefix, rootDir)
+    if (!collection) continue
+    const cut = subset(collection, names)
+    if (Object.keys(cut.icons).length) sets.push(cut)
+  }
+  const head = mode === "all" ? 'import "@leavepulse/ui/icons-all"\n' : ""
+  if (!sets.length) return head
+  return `${head}import { registerIconCollection } from "@leavepulse/ui"\n${sets.map((set) => `registerIconCollection(${JSON.stringify(set)})\n`).join("")}`
 }
 
 export default defineNuxtModule<LeavepulseUiOptions>({
@@ -74,7 +113,7 @@ export default defineNuxtModule<LeavepulseUiOptions>({
       })
     }
 
-    const icons = iconsPlugin(options.icons, nuxt.options.srcDir)
+    const icons = iconsPlugin(options.icons, nuxt.options.srcDir, nuxt.options.rootDir)
     if (icons) {
       addPluginTemplate({
         filename: "leavepulse-ui-icons.mjs",