@leavepulse/ui 0.70.0 → 0.71.0

package/dist/components/PalettePreviewBoundary.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/PalettePreviewBoundary-B0Hhu3Yw.js";
+export {
+  _sfc_main as default
+};

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

@@ -1,4 +1,4 @@
-import type { useFieldControl } from "../composables/useField";
+import { type useFieldControl } from "../composables/useField";
 type __VLS_Props = {
     field: ReturnType<typeof useFieldControl>["value"];
     display: string;
@@ -20,14 +20,16 @@ type __VLS_ModelProps = {
     "open"?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_23: {};
+declare var __VLS_25: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (event: FocusEvent) => any;
     clear: () => any;
     "update:open": (value: boolean | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
     onClear?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
 }>, {

package/dist/components/PickerField.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/PickerField-CHRS1h7K.js";
+import { _ as _sfc_main } from "../chunks/PickerField-DwLw7j0L.js";
 export {
   _sfc_main as default
 };

package/dist/components/RevealToggle.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/RevealToggle-C-KzaQGJ.js";
+import { _ as _sfc_main } from "../chunks/RevealToggle-BVFM_FAU.js";
 export {
   _sfc_main as default
 };

package/dist/components/TourCard.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/TourCard-BXuVHsfn.js";
+import { _ as _sfc_main } from "../chunks/TourCard--2IfgnUU.js";
 export {
   _sfc_main as default
 };

package/dist/components/commandPalette.d.ts

@@ -1,6 +1,11 @@
 import { type CommandSearchTerms, type HighlightPart, type SearchableCommand } from "./commandSearch";
+import type { Command } from "./LpCommandPalette.vue";
+import type { ContextMenuItemDef } from "./LpContextMenu.vue";
+/** The same action definitions serve a row menu and the command palette. */
+export declare function menuPaletteCommands(items: ContextMenuItemDef[], prefix: string): Command[];
 /** The fields of a command that decide whether the preview pane opens for it. */
 export interface PreviewableCommand {
+    previewComponent?: unknown;
     preview?: string;
     excerpt?: string;
     noPreview?: boolean;
@@ -14,6 +19,34 @@ export declare function commandHasPreview<T extends PreviewableCommand>(command:
     slot: boolean;
     hasPreview?: (command: T) => boolean;
 }): boolean;
+export declare const PALETTE_MODES: {
+    readonly people: {
+        readonly prefix: "@";
+        readonly label: "People";
+        readonly icon: "lucide:users";
+    };
+    readonly channels: {
+        readonly prefix: "#";
+        readonly label: "Channels";
+        readonly icon: "lucide:hash";
+    };
+    readonly roles: {
+        readonly prefix: "&";
+        readonly label: "Roles";
+        readonly icon: "lucide:shield";
+    };
+    readonly commands: {
+        readonly prefix: ">";
+        readonly label: "Commands";
+        readonly icon: "lucide:terminal";
+    };
+    readonly help: {
+        readonly prefix: "?";
+        readonly label: "Help";
+        readonly icon: "lucide:circle-help";
+    };
+};
+export type PaletteMode = keyof typeof PALETTE_MODES;
 /** One line of LpPaletteFacts: what it is, and what it is set to now. */
 export interface PaletteFact {
     /** Text, or the preview slot's `highlight(text)` to mark the query. */

package/dist/components/commandPalette.js

@@ -1,9 +1,27 @@
 import { parsePaletteQuery, applyQueryFilters } from "./commandSearch.js";
+function menuPaletteCommands(items, prefix) {
+  return items.map((item, index) => ({
+    id: `${prefix}/${index}`,
+    label: item.label,
+    icon: item.icon,
+    disabled: item.disabled,
+    onSelect: item.onSelect,
+    keepOpen: item.checked !== void 0,
+    children: item.children ? menuPaletteCommands(item.children, `${prefix}/${index}`) : void 0
+  }));
+}
 function commandHasPreview(command, options) {
   if (!command || command.noPreview) return false;
   if (options.hasPreview) return options.hasPreview(command);
-  return options.slot || !!(command.preview || command.excerpt);
+  return options.slot || !!(command.previewComponent || command.preview || command.excerpt);
 }
+const PALETTE_MODES = {
+  people: { prefix: "@", label: "People", icon: "lucide:users" },
+  channels: { prefix: "#", label: "Channels", icon: "lucide:hash" },
+  roles: { prefix: "&", label: "Roles", icon: "lucide:shield" },
+  commands: { prefix: ">", label: "Commands", icon: "lucide:terminal" },
+  help: { prefix: "?", label: "Help", icon: "lucide:circle-help" }
+};
 function matchModePrefix(query, commands) {
   const typed = query.trimStart().toLowerCase();
   let best = null;
@@ -91,9 +109,11 @@ function modeChipLabel(command) {
   return command.label.replace(/\s*["'“”«»]?\{query\}["'“”«»]?/g, "").replace(/\s+(for|in|on|:)$/i, "").trim();
 }
 export {
+  PALETTE_MODES,
   commandHasPreview,
   fallbackRows,
   matchModePrefix,
+  menuPaletteCommands,
   modeChipLabel,
   pushRecent,
   readRecent,

package/dist/components/commandSearch.d.ts

@@ -10,6 +10,11 @@ export interface CommandSearchTerms {
     groups: string[];
 }
 export declare function parseCommandQuery(value: string): CommandSearchTerms;
+export declare function swapCommandLayout(value: string): string;
+export declare function searchCommandItems<T extends SearchableCommand>(items: T[], terms: CommandSearchTerms): {
+    items: T[];
+    terms: string[];
+};
 export declare function rankCommandItems<T extends SearchableCommand>(items: T[], terms: CommandSearchTerms): T[];
 /**
  * A query as a fetcher receives it. `text` is what a remote search should be

package/dist/components/commandSearch.js

@@ -44,9 +44,27 @@ function score(command, terms) {
   else if (typed && label.startsWith(typed)) total += 2;
   return total;
 }
-function rankCommandItems(items, terms) {
+function rankExact(items, terms) {
   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);
 }
+const LATIN_KEYS = "`qwertyuiop[]asdfghjkl;'zxcvbnm,.";
+const CYRILLIC_KEYS = "ёйцукенгшщзхъфывапролджэячсмитьбю";
+const LAYOUT_KEYS = new Map([...LATIN_KEYS].flatMap((key, i) => [[key, CYRILLIC_KEYS[i]], [CYRILLIC_KEYS[i], key]]));
+function swapCommandLayout(value) {
+  return [...value].map((char) => {
+    const replacement = LAYOUT_KEYS.get(char.toLowerCase());
+    return replacement ? char === char.toUpperCase() ? replacement.toUpperCase() : replacement : char;
+  }).join("");
+}
+function searchCommandItems(items, terms) {
+  const exact = rankExact(items, terms);
+  if (exact.length || !terms.include.length) return { items: exact, terms: terms.include };
+  const alternate = { include: terms.include.map(swapCommandLayout), exclude: terms.exclude, groups: terms.groups };
+  return { items: rankExact(items, alternate), terms: alternate.include };
+}
+function rankCommandItems(items, terms) {
+  return searchCommandItems(items, terms).items;
+}
 function parsePaletteQuery(raw) {
   const terms = parseCommandQuery(raw);
   const words = [];
@@ -97,5 +115,7 @@ export {
   highlightParts,
   parseCommandQuery,
   parsePaletteQuery,
-  rankCommandItems
+  rankCommandItems,
+  searchCommandItems,
+  swapCommandLayout
 };

package/dist/components/format.d.ts

@@ -39,3 +39,10 @@ export interface CompactNumberOptions {
  * "1M"; 999.999 with two places would be "1000", so it becomes "1k".
  */
 export declare function compactNumber(value: number, options?: CompactNumberOptions): string;
+/**
+ * The character a locale writes between the whole and the fractional part:
+ * "." in English, "," in Russian and German. A counter that splits a grouped
+ * figure into columns has to find the fraction by this mark, not by ".",
+ * because in German "." is the thousands separator.
+ */
+export declare function decimalMark(locale?: string): string;

package/dist/components/format.js

@@ -61,7 +61,11 @@ function compactNumber(value, options = {}) {
   }).format(scaled);
   return `${number}${COMPACT_UNITS[i][1]}`;
 }
+function decimalMark(locale) {
+  return numberFormat(locale, {}).formatToParts(1.5).find((p) => p.type === "decimal")?.value ?? ".";
+}
 export {
   compactNumber,
+  decimalMark,
   formatBytes
 };

package/dist/components/menuWhen.js

@@ -1,5 +1,5 @@
 import { defineComponent, h } from "vue";
-import { _ as _sfc_main } from "../chunks/LpContextMenu-COwOwRgI.js";
+import { _ as _sfc_main } from "../chunks/LpContextMenu-DXpFJjlO.js";
 const MenuWhen = defineComponent({
   name: "MenuWhen",
   inheritAttrs: false,

package/dist/components/uptimeBar.d.ts

@@ -0,0 +1,45 @@
+export type UptimeStatus = "operational" | "degraded" | "down" | "maintenance" | "empty";
+export type UptimeMoment = Date | string | number;
+/** Something that happened inside a slice: a restart, a deploy, an alert. */
+export interface UptimeEvent {
+    text: string;
+    at?: UptimeMoment;
+    status?: UptimeStatus;
+}
+export interface UptimeSegment {
+    /** Health of this slice. `empty` renders a faded placeholder (no data). */
+    status: UptimeStatus;
+    /** Optional rich tooltip body; falls back to a humanised status. */
+    label?: string;
+    /** When the slice begins and ends. Shown in the tooltip, and weights the uptime figure. */
+    start?: UptimeMoment;
+    end?: UptimeMoment;
+    /**
+     * Time spent in each state inside the slice, in ms. With it the figure
+     * counts real time rather than slices (one bad minute in a day no longer
+     * costs the whole day), and the tooltip says how long each state lasted.
+     */
+    durations?: Partial<Record<Exclude<UptimeStatus, "empty">, number>>;
+    /** What happened in the slice, a line each in the tooltip. */
+    events?: UptimeEvent[];
+}
+/** Worst first: the order a tooltip lists the time a slice spent in each state. */
+export declare const UPTIME_SEVERITY: readonly Exclude<UptimeStatus, "empty">[];
+/**
+ * Percent of the tracked time that was up (operational or planned
+ * maintenance). Slices with `durations` count their real minutes; the rest
+ * count by their span when every one of them has a span, and as one slice
+ * each otherwise. Empty slices are not tracked. Null when nothing is.
+ */
+export declare function uptimeShare(segments: readonly UptimeSegment[]): number | null;
+/**
+ * The figure and its decimal places: trailing zeros trimmed (100, 99.9), and
+ * never rounded up to 100 while some time was down — 99.999 prints as 99.99,
+ * because "100%" over an outage reads as no outage at all.
+ */
+export declare function uptimeFigure(pct: number): {
+    value: number;
+    decimals: number;
+};
+/** "26 Oct, 12:00 – 12:15", the date written once when both ends share a day. */
+export declare function uptimeRange(start: UptimeMoment, end: UptimeMoment | undefined, locale?: string): string;

package/dist/components/uptimeBar.js

@@ -0,0 +1,51 @@
+import { toEpoch } from "./timeSpan.js";
+const UP = /* @__PURE__ */ new Set(["operational", "maintenance"]);
+const UPTIME_SEVERITY = ["down", "degraded", "maintenance", "operational"];
+function span(seg) {
+  if (seg.start === void 0 || seg.end === void 0) return null;
+  const ms = toEpoch(seg.end) - toEpoch(seg.start);
+  return Number.isFinite(ms) && ms > 0 ? ms : null;
+}
+function uptimeShare(segments) {
+  const tracked = segments.filter((s) => s.status !== "empty");
+  const bySpan = tracked.every((s) => s.durations || span(s) !== null);
+  let up = 0;
+  let total = 0;
+  for (const seg of tracked) {
+    if (seg.durations) {
+      for (const [status, ms] of Object.entries(seg.durations)) {
+        if (!ms || ms < 0) continue;
+        total += ms;
+        if (UP.has(status)) up += ms;
+      }
+      continue;
+    }
+    const weight = bySpan ? span(seg) ?? 0 : 1;
+    total += weight;
+    if (UP.has(seg.status)) up += weight;
+  }
+  return total > 0 ? up / total * 100 : null;
+}
+function uptimeFigure(pct) {
+  let value = Number(pct.toFixed(2));
+  if (pct < 100 && value >= 100) value = 99.99;
+  const decimals = Number.isInteger(value) ? 0 : String(value).split(".")[1].length;
+  return { value, decimals };
+}
+function uptimeRange(start, end, locale) {
+  const from = toEpoch(start);
+  if (!Number.isFinite(from)) return "";
+  const full = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
+  if (end === void 0) return full.format(from);
+  const to = toEpoch(end);
+  if (!Number.isFinite(to)) return full.format(from);
+  const sameDay = new Date(from).toDateString() === new Date(to).toDateString();
+  const tail = sameDay ? new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit" }) : full;
+  return `${full.format(from)} – ${tail.format(to)}`;
+}
+export {
+  UPTIME_SEVERITY,
+  uptimeFigure,
+  uptimeRange,
+  uptimeShare
+};

package/dist/composables/scroll.d.ts

@@ -6,6 +6,11 @@ export interface ScrollParentOptions {
 }
 /** The nearest ancestor that scrolls along `axis` and has something to scroll, or null. */
 export declare function scrollParent(el: Element | null | undefined, { axis, self }?: ScrollParentOptions): HTMLElement | null;
+/**
+ * Whether `el`'s scroller (or the page) has no more room to scroll down.
+ * `slack` absorbs the pixel a rounded-up scrollHeight can sit above the sum.
+ */
+export declare function atScrollEnd(el: Element | null | undefined, slack?: number): boolean;
 export interface ScrollToElementOptions {
     /** `nearest` scrolls only when the element is out of view. */
     block?: "nearest" | "center" | "start";

package/dist/composables/scroll.js

@@ -9,6 +9,12 @@ function scrollParent(el, { axis = "y", self = false } = {}) {
   }
   return null;
 }
+function atScrollEnd(el, slack = 2) {
+  if (!el) return false;
+  const box = scrollParent(el) ?? el.ownerDocument.scrollingElement;
+  if (!box) return true;
+  return box.scrollTop + box.clientHeight >= box.scrollHeight - slack;
+}
 function scrollToElement(el, { block = "nearest", behavior = "auto", margin = 0 } = {}) {
   if (!el) return;
   const doc = el.ownerDocument;
@@ -26,6 +32,7 @@ function scrollToElement(el, { block = "nearest", behavior = "auto", margin = 0
   if (target !== box.scrollTop) box.scrollTo({ top: target, behavior });
 }
 export {
+  atScrollEnd,
   scrollParent,
   scrollToElement
 };

package/dist/composables/useField.d.ts

@@ -2,6 +2,10 @@ import { type ComputedRef, type InjectionKey } from "vue";
 import type { FieldNoticeOptions } from "./useFieldNotice";
 export interface FieldContext {
     id: string;
+    /** Human-readable name shared by controls and contextual commands. */
+    label?: string;
+    hint?: string;
+    error?: string;
     /** Id of the visible label, for controls a `<label for>` cannot name (groups). */
     labelId?: string;
     describedBy?: string;
@@ -44,3 +48,8 @@ export declare function useFieldControl(own: () => FieldControlState): ComputedR
  * `useForm().field()` could not mark such a field touched.
  */
 export declare function focusLeft(event: FocusEvent): boolean;
+/** Trigger and portalled content share a boundary for the control's public blur. */
+export declare function useFieldBlur(blur: (event: FocusEvent) => void): {
+    partId: string;
+    onFocusOut: (event: FocusEvent) => void;
+};

package/dist/composables/useField.js

@@ -1,4 +1,4 @@
-import { useId, computed, provide, inject } from "vue";
+import { useId, computed, provide, onScopeDispose, inject } from "vue";
 const LP_FIELD = /* @__PURE__ */ Symbol.for("lp-field");
 function provideField(context) {
   provide(LP_FIELD, context);
@@ -29,6 +29,9 @@ function useFieldControl(own) {
     return {
       id: state.id ?? field?.id,
       labelId: field?.labelId,
+      label: field?.label,
+      hint: field?.hint,
+      error: field?.error,
       describedBy: field?.describedBy,
       invalid: !!state.invalid || !!field?.invalid,
       required: !!state.required || !!field?.required,
@@ -40,11 +43,31 @@ function focusLeft(event) {
   const next = event.relatedTarget;
   return !(next instanceof Node && event.currentTarget?.contains(next));
 }
+function useFieldBlur(blur) {
+  const partId = `lp-field-${useId()}`;
+  let cancelPending;
+  const inside = (target) => !!target?.closest?.(`[data-lp-field-part="${partId}"]`);
+  function onFocusOut(event) {
+    cancelPending?.();
+    if (inside(event.relatedTarget)) return;
+    if (event.relatedTarget) return blur(event);
+    const doc = event.target.ownerDocument;
+    const view = doc.defaultView;
+    const frame = view.requestAnimationFrame(() => {
+      cancelPending = void 0;
+      if (!inside(doc.activeElement)) blur(event);
+    });
+    cancelPending = () => view.cancelAnimationFrame(frame);
+  }
+  onScopeDispose(() => cancelPending?.());
+  return { partId, onFocusOut };
+}
 export {
   LP_FIELD,
   fieldMessageId,
   focusLeft,
   provideField,
   useField,
+  useFieldBlur,
   useFieldControl
 };

package/dist/composables/useForm.js

@@ -30,6 +30,7 @@ function useForm(options) {
   const submitting = ref(false);
   const submitCount = ref(0);
   const runs = /* @__PURE__ */ new Map();
+  let validationEpoch = 0;
   const fromForm = /* @__PURE__ */ new Map();
   const baseVersion = ref(0);
   const keys = () => Object.keys(plain());
@@ -51,7 +52,7 @@ function useForm(options) {
     return void 0;
   }
   async function runField(name) {
-    const run = (runs.get(name) ?? 0) + 1;
+    const run = /* @__PURE__ */ Symbol();
     runs.set(name, run);
     const found = await checkField(name);
     if (runs.get(name) !== run) return !errors[name];
@@ -61,7 +62,7 @@ function useForm(options) {
   }
   async function runForm() {
     if (!options.validate) return true;
-    const run = (runs.get("form") ?? 0) + 1;
+    const run = /* @__PURE__ */ Symbol();
     runs.set("form", run);
     const found = await options.validate(plain()) ?? {};
     if (runs.get("form") !== run) return true;
@@ -78,12 +79,17 @@ function useForm(options) {
     return ok;
   }
   async function validate(name) {
+    const epoch = validationEpoch;
     validating.value = true;
     try {
-      if (name !== void 0) return await runField(name);
+      if (name !== void 0) {
+        const valid2 = await runField(name);
+        return epoch === validationEpoch && valid2;
+      }
       const fields = await Promise.all(keys().map(runField));
+      if (epoch !== validationEpoch) return false;
       const form = await runForm();
-      return fields.every(Boolean) && form && !Object.values(external).some(Boolean);
+      return epoch === validationEpoch && fields.every(Boolean) && form && !Object.values(external).some(Boolean);
     } finally {
       validating.value = false;
     }
@@ -99,6 +105,7 @@ function useForm(options) {
     for (const [k, v] of Object.entries(next)) set(k, v);
   }
   function clearState() {
+    validationEpoch++;
     for (const k of Object.keys(errors)) delete errors[k];
     for (const k of Object.keys(external)) delete external[k];
     for (const k of Object.keys(touched)) delete touched[k];
@@ -131,7 +138,9 @@ function useForm(options) {
     { deep: true }
   );
   async function recheck(names) {
+    const epoch = validationEpoch;
     await Promise.all(names.map((name) => validate(name)));
+    if (epoch !== validationEpoch) return;
     if (fromForm.size || submitCount.value) await runForm();
   }
   let snapshot = clone(plain());

package/dist/composables/usePaletteCommands.d.ts

@@ -0,0 +1,61 @@
+import { type Directive, type MaybeRefOrGetter } from "vue";
+import type { Command } from "../components/LpCommandPalette.vue";
+export interface PaletteRegistration {
+    commands: () => readonly Command[];
+    priority: number;
+    /** Discovered from a component rather than written by the app: an id clash numbers it instead of hiding it. */
+    automatic?: boolean;
+}
+/** One registry per application/provider; never shared between SSR requests. */
+export declare function createPaletteRegistry(): {
+    commands: import("vue").ComputedRef<Command[]>;
+    register(entry: PaletteRegistration): () => void;
+};
+export type PaletteRegistry = ReturnType<typeof createPaletteRegistry>;
+export interface PaletteScope {
+    registry: PaletteRegistry;
+    id: string;
+    label: string;
+    depth: number;
+    enabled: boolean;
+    discover: boolean;
+}
+export declare function bindPaletteScopeElement(element: Element, scope: PaletteScope): void;
+export declare const usePaletteScope: () => PaletteScope | null;
+export declare const providePaletteScope: (scope: PaletteScope) => void;
+/** Preview controls and compound controls must not discover their own implementation. */
+export declare function suppressPaletteDiscovery(): void;
+export declare function usePaletteCommands(commands: MaybeRefOrGetter<readonly Command[]>, options?: {
+    automatic?: boolean;
+    scope?: PaletteScope;
+}): void;
+/** Manual definitions override a discovered command without changing its place. */
+export declare function mergePaletteCommands(discovered: readonly Command[], manual: readonly Command[]): Command[];
+export type PaletteControlOptions = false | {
+    id?: string;
+    label?: string;
+    description?: string;
+    keywords?: string[];
+};
+export interface PaletteTargetOptions {
+    id: string;
+    label: string;
+    description?: string;
+    keywords?: string[];
+    action?: "click" | "focus";
+}
+/** Native/custom markup opt-in; editing values still goes through the component's own binding. */
+export declare const vPalette: Directive<HTMLElement, PaletteTargetOptions>;
+export declare function usePaletteAction(options: {
+    label?: () => string | undefined;
+    element: () => HTMLElement | null | undefined;
+    disabled?: () => boolean;
+}): void;
+export declare function usePaletteControl(options?: {
+    label?: () => string | undefined;
+    disabled?: () => boolean;
+    invalid?: () => boolean;
+    available?: () => boolean;
+    ownsChildren?: boolean;
+    editorProps?: () => Record<string, unknown>;
+}): void;