@leavepulse/ui 0.44.0 → 0.45.1

package/src/components/LpToaster.vue

@@ -11,17 +11,65 @@ import {
   ToastTitle,
   ToastViewport,
 } from "reka-ui"
-import { onBeforeUnmount, ref, watch } from "vue"
+import { nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
+import { useClipboard } from "../composables/useClipboard"
 import { useLabels } from "../composables/useLpConfig"
 import { useToast, type ToastItem } from "../composables/useToast"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 
-const props = defineProps<{ labels?: Partial<{ dismiss: string }> }>()
-const text = useLabels("toast", { dismiss: "Dismiss" }, () => props.labels)
+const props = defineProps<{ labels?: Partial<{ dismiss: string; copy: string; copied: string }> }>()
+const text = useLabels("toast", { dismiss: "Dismiss", copy: "Copy message", copied: "Copied" }, () => props.labels)
 
 const { queue, dismiss } = useToast()
 
+/*
+ * The stack slides rather than jumps. A new toast lands at the bottom and the
+ * ones above used to leap up by its height in a single frame; one leaving let
+ * the rest drop the same way. Each toast's layout position (offsetTop, which
+ * ignores transforms) is remembered, and when the list changes every toast
+ * that moved is played from where it was to where it is (FLIP). The observer
+ * fires after the DOM changes and before the frame is painted, so the jump is
+ * never seen. Toasts render through reka's portal into the viewport, which is
+ * why this watches the DOM rather than a TransitionGroup.
+ */
+let observer: MutationObserver | undefined
+const tops = new WeakMap<Element, number>()
+
+function toastsIn(root: Element): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>("li[data-state]")]
+}
+
+function slide(root: Element) {
+  const reduce = prefersReducedMotion()
+  const height = (root as HTMLElement).offsetHeight
+  for (const el of toastsIn(root)) {
+    const before = tops.get(el)
+    const now = el.offsetTop - height
+    tops.set(el, now)
+    if (before === undefined || before === now || reduce || el.hasAttribute("data-swipe")) continue
+    el.animate([{ translate: `0 ${before - now}px` }, { translate: "0 0" }], {
+      duration: 220,
+      easing: "cubic-bezier(0.2, 0, 0, 1)",
+    })
+  }
+}
+
+// The viewport's component root is a wrapper fragment, not the list, so the
+// list is found by a mark of its own once it is teleported into place.
+const viewportId = useId()
+onMounted(() =>
+  nextTick(() => {
+    const root = document.querySelector(`[data-lp-toasts="${viewportId}"]`)
+    if (!root || typeof MutationObserver === "undefined") return
+    for (const el of toastsIn(root)) tops.set(el, el.offsetTop - (root as HTMLElement).offsetHeight)
+    observer = new MutationObserver(() => slide(root))
+    observer.observe(root, { childList: true, subtree: true })
+  }),
+)
+onBeforeUnmount(() => observer?.disconnect())
+
 // A toast replaced through its `key` keeps its id and gets a new revision, so
 // everything tied to one rendered toast goes by both.
 const tag = (t: ToastItem) => `${t.id}:${t.rev}`
@@ -164,8 +212,32 @@ async function settle(t: ToastItem, run: () => void | Promise<void>) {
   }
 }
 
+/*
+ * An error is something people need to pass on, so its text can be selected
+ * and copied. reka sets user-select: none on the toast and starts a swipe on
+ * any press, which made the message impossible to select: the description
+ * opts back into selection and keeps its presses from starting a swipe. A
+ * click that ends a selection is not a click on the toast.
+ */
+const { copy } = useClipboard()
+const copiedId = ref<string | null>(null)
+let copiedTimer: ReturnType<typeof setTimeout> | undefined
+const copyable = (t: ToastItem) => t.variant === "error" || t.variant === "warning"
+
+async function copyToast(t: ToastItem) {
+  if (!(await copy([t.title, t.message].filter(Boolean).join("\n")))) return
+  copiedId.value = tag(t)
+  clearTimeout(copiedTimer)
+  copiedTimer = setTimeout(() => (copiedId.value = null), 1500)
+}
+onBeforeUnmount(() => clearTimeout(copiedTimer))
+
+function selecting(): boolean {
+  return Boolean(window.getSelection()?.toString())
+}
+
 function runClick(t: ToastItem) {
-  if (swiped === tag(t)) return
+  if (swiped === tag(t) || selecting()) return
   if (t.onClick) return settle(t, t.onClick)
 }
 
@@ -203,7 +275,10 @@ function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[numbe
           <ToastTitle v-if="t.title" class="text-sm font-semibold text-ink">
             {{ t.title }}
           </ToastTitle>
-          <ToastDescription class="break-words text-xs text-muted">
+          <ToastDescription
+            class="cursor-text select-text break-words text-xs text-muted"
+            @pointerdown.stop
+          >
             {{ t.message }}
           </ToastDescription>
 
@@ -227,6 +302,16 @@ function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[numbe
           </div>
         </div>
 
+        <button
+          v-if="copyable(t)"
+          type="button"
+          class="-mt-1 rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+          :aria-label="copiedId === tag(t) ? text.copied : text.copy"
+          :title="copiedId === tag(t) ? text.copied : text.copy"
+          @click.stop="copyToast(t)"
+        >
+          <LpIcon :name="copiedId === tag(t) ? 'lucide:check' : 'lucide:copy'" :size="15" />
+        </button>
         <button
           type="button"
           class="group -mr-1 -mt-1 rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
@@ -256,6 +341,7 @@ function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[numbe
          --z-toast (200) > --z-modal (110) wins as intended. -->
     <Teleport to="body">
       <ToastViewport
+        :data-lp-toasts="viewportId"
         class="fixed bottom-0 right-0 z-(--z-toast) flex w-[min(92vw,22rem)] flex-col gap-2 p-4 outline-none"
       />
     </Teleport>

package/src/components/LpTooltip.vue

@@ -35,7 +35,7 @@ import {
   TooltipRoot,
   TooltipTrigger,
 } from "reka-ui"
-import { Fragment, onBeforeUnmount, ref, watch } from "vue"
+import { onBeforeUnmount, ref, watch, type FunctionalComponent } from "vue"
 import {
   springSettled,
   springStep,
@@ -108,6 +108,13 @@ const props = withDefaults(
  * shared one (LpTooltipProvider at the root) the next tip opens at once.
  */
 const shared = injectTooltipProviderContext(null)
+/*
+ * Under a shared provider the tip renders straight into it. `Fragment` cannot
+ * stand in for the wrapper: given through `<component :is>` it takes slots,
+ * not children, and rendered nothing at all, so every tip inside an
+ * LpTooltipProvider vanished together with its trigger.
+ */
+const PassThrough: FunctionalComponent = (_, { slots }) => slots.default?.()
 
 const reducedMotion = () =>
   typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
@@ -221,7 +228,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <component :is="shared ? Fragment : TooltipProvider" v-bind="shared ? {} : { delayDuration: delay ?? 200 }">
+  <component :is="shared ? PassThrough : TooltipProvider" v-bind="shared ? {} : { delayDuration: delay ?? 200 }">
     <!--
       `disable-closing-trigger` in follow mode: reka dismisses a tip when its
       trigger is clicked, which is right for a button (the tip explained the

package/src/components/LpTopologyCanvas.vue

@@ -417,8 +417,12 @@ defineExpose({ fitView, setViewport: applyViewport })
     class="lp-topology"
   >
     <Background :gap="22" :size="1.4" pattern-color="var(--color-line-strong)" />
+    <!-- On a phone the minimap, the zoom controls and the legend would all
+         share the bottom of a canvas a few hundred pixels wide and cover each
+         other and the graph; pinch-zoom and panning do the minimap's job there. -->
     <MiniMap
       v-if="minimap"
+      class="max-sm:!hidden"
       pannable
       zoomable
       node-color="var(--color-surface-soft)"
@@ -427,7 +431,9 @@ defineExpose({ fitView, setViewport: applyViewport })
     <Controls v-if="controls" />
 
     <!-- Edge-type legend: makes the colour/dash encoding self-explanatory. -->
-    <Panel v-if="legend" :position="legendPosition" :class="legendOffset">
+    <!-- On a phone the legend would sit on the graph itself; the edge styles
+         stay readable without it there. -->
+    <Panel v-if="legend" :position="legendPosition" :class="legendOffset" class="max-sm:hidden">
       <div
         class="flex flex-col gap-1.5 rounded-card border border-line bg-surface-overlay/90 px-3 py-2 text-[11px] backdrop-blur"
       >

package/src/components/chart.ts

@@ -157,10 +157,12 @@ export const niceScale = (
 ): { min: number; max: number; step: number } => {
   if (!Number.isFinite(min) || !Number.isFinite(max)) return { min: 0, max: 1, step: 1 }
   if (min === max) {
-    // A flat series still needs a band to sit in.
+    // A flat series still needs a band to sit in, but the band must not cross
+    // zero: an all-zero count would otherwise read as dipping to -0.5.
     const pad = Math.abs(min) || 1
-    min -= pad / 2
-    max += pad / 2
+    min = min >= 0 ? Math.max(0, min - pad / 2) : min - pad / 2
+    max = max <= 0 ? Math.min(0, max + pad / 2) : max + pad / 2
+    if (min === max) max = min + pad
   }
   const raw = (max - min) / Math.max(1, ticks)
   const mag = 10 ** Math.floor(Math.log10(raw))

package/src/components/commandSearch.ts

@@ -63,6 +63,12 @@ function score(command: SearchableCommand, terms: CommandSearchTerms): number {
     if (!hit) return 0
     total += hit
   }
+  // A label that IS what was typed, or starts with it, is what the person is
+  // naming: "theme" must put the Theme command above ThemeSwitcher, which only
+  // contains the word but also matches its keywords and description.
+  const typed = terms.include.join(" ")
+  if (typed && label === typed) total += 6
+  else if (typed && label.startsWith(typed)) total += 2
   return total
 }
 

package/src/components/dateRange.ts

@@ -0,0 +1,134 @@
+import {
+  type CalendarDate,
+  endOfMonth,
+  getLocalTimeZone,
+  parseDate,
+  startOfMonth,
+  today,
+} from "@internationalized/date"
+
+/*
+ * Date ranges as the kit models them: two ISO "YYYY-MM-DD" strings, inclusive
+ * on both ends, the same shape LpDatePicker uses for a single day. Presets are
+ * plain functions so a consumer can add "This quarter" or "Year to date"
+ * without the kit knowing about it.
+ */
+export interface DateRange {
+  start: string
+  end: string
+}
+
+export interface DateRangePreset {
+  label: string
+  range: () => DateRange
+}
+
+export interface DateRangePresetLabels {
+  today: string
+  last7: string
+  last30: string
+  thisMonth: string
+  lastMonth: string
+}
+
+function span(start: CalendarDate, end: CalendarDate): DateRange {
+  return { start: start.toString(), end: end.toString() }
+}
+
+/** The default preset list. `now` is injectable so the set can be tested. */
+export function defaultRangePresets(
+  labels: DateRangePresetLabels,
+  now: () => CalendarDate = () => today(getLocalTimeZone()),
+): DateRangePreset[] {
+  return [
+    { label: labels.today, range: () => span(now(), now()) },
+    { label: labels.last7, range: () => span(now().subtract({ days: 6 }), now()) },
+    { label: labels.last30, range: () => span(now().subtract({ days: 29 }), now()) },
+    { label: labels.thisMonth, range: () => span(startOfMonth(now()), endOfMonth(now())) },
+    {
+      label: labels.lastMonth,
+      range: () => {
+        const previous = now().subtract({ months: 1 })
+        return span(startOfMonth(previous), endOfMonth(previous))
+      },
+    },
+  ]
+}
+
+export function parseIsoDay(iso: string | undefined): CalendarDate | undefined {
+  if (!iso) return undefined
+  try {
+    return parseDate(iso.slice(0, 10))
+  } catch {
+    return undefined
+  }
+}
+
+/** A range with both ends parsed and in order, or undefined. */
+export function normalizeRange(range: Partial<DateRange> | undefined): DateRange | undefined {
+  const start = parseIsoDay(range?.start)
+  const end = parseIsoDay(range?.end)
+  if (!start || !end) return undefined
+  return start.compare(end) <= 0 ? span(start, end) : span(end, start)
+}
+
+export function sameRange(a: Partial<DateRange> | undefined, b: Partial<DateRange> | undefined): boolean {
+  const x = normalizeRange(a)
+  const y = normalizeRange(b)
+  return !!x && !!y && x.start === y.start && x.end === y.end
+}
+
+/** Clip a preset to the allowed bounds; undefined when nothing of it is left. */
+export function clampRange(range: DateRange, min?: string, max?: string): DateRange | undefined {
+  const r = normalizeRange(range)
+  if (!r) return undefined
+  const start = min && r.start < min ? min : r.start
+  const end = max && r.end > max ? max : r.end
+  return start <= end ? { start, end } : undefined
+}
+
+/**
+ * "Jun 3 – 18, 2026" style text: Intl's own range formatting collapses the
+ * shared month and year, which is how a range reads naturally in every locale.
+ */
+export function formatRange(
+  range: DateRange,
+  locale?: string,
+  format: Intl.DateTimeFormatOptions = { year: "numeric", month: "short", day: "numeric" },
+): string {
+  const start = parseIsoDay(range.start)
+  const end = parseIsoDay(range.end)
+  if (!start || !end) return ""
+  const zone = "UTC"
+  const fmt = new Intl.DateTimeFormat(locale, { ...format, timeZone: zone })
+  return fmt.formatRange(start.toDate(zone), end.toDate(zone))
+}
+
+export interface ReshapeRules {
+  /** Whether the moving end may land on this day (min, max, disabled). */
+  allowed?: (iso: string) => boolean
+  /** Days a range may not include. */
+  unavailable?: (iso: string) => boolean
+  /** Longest range, in days, counting both ends. */
+  maximumDays?: number
+}
+
+/**
+ * The range one end makes when it is dragged to `moving` while the other stays
+ * at `anchor`; passing the anchor flips which end is which. Null when the result
+ * would break a rule, so a drag simply does not follow onto that day.
+ */
+export function reshapeRange(anchor: string, moving: string, rules: ReshapeRules = {}): DateRange | null {
+  const a = parseIsoDay(anchor)
+  const m = parseIsoDay(moving)
+  if (!a || !m) return null
+  if (rules.allowed && !rules.allowed(m.toString())) return null
+  const [start, end] = a.compare(m) <= 0 ? [a, m] : [m, a]
+  if (rules.maximumDays && end.compare(start) + 1 > rules.maximumDays) return null
+  if (rules.unavailable) {
+    for (let d = start; d.compare(end) <= 0; d = d.add({ days: 1 })) {
+      if (rules.unavailable(d.toString())) return null
+    }
+  }
+  return { start: start.toString(), end: end.toString() }
+}

package/src/components/exportData.ts

@@ -0,0 +1,228 @@
+/*
+ * Data export shared by the table and the chart: CSV text, a file download,
+ * and an SVG rasterised with its theme resolved.
+ */
+
+export interface CsvColumn<Row> {
+  key: string
+  /** Header cell. Defaults to the key. */
+  label?: string
+  /** The value written for a row; the row's `key` field when omitted. */
+  value?: (row: Row) => unknown
+}
+
+export interface CsvOptions {
+  /** Field separator. Default ",". Some locales' spreadsheets expect ";". */
+  separator?: string
+  /** Prefix a UTF-8 byte order mark so Excel reads non-ASCII text correctly. */
+  bom?: boolean
+  /**
+   * Neutralise cells a spreadsheet would run as a formula (leading = + - @,
+   * tab or CR) by prefixing a quote. On by default: exported data is often
+   * user-supplied, and opening it is enough to trigger a formula.
+   */
+  guardFormulas?: boolean
+  /** Line ending. Default "\r\n", as RFC 4180 specifies. */
+  newline?: string
+}
+
+const FORMULA_START = /^[=+\-@\t\r]/
+
+function cellText(value: unknown): string {
+  if (value == null) return ""
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toISOString()
+  if (typeof value === "object") return JSON.stringify(value)
+  return String(value)
+}
+
+/** One CSV field, quoted when it holds a separator, a quote or a line break. */
+export function csvField(value: unknown, options: CsvOptions = {}): string {
+  const separator = options.separator ?? ","
+  let text = cellText(value)
+  if ((options.guardFormulas ?? true) && typeof value === "string" && FORMULA_START.test(text)) {
+    text = `'${text}`
+  }
+  const needsQuotes = text.includes(separator) || /["\r\n]/.test(text) || /^\s|\s$/.test(text)
+  return needsQuotes ? `"${text.replace(/"/g, '""')}"` : text
+}
+
+/** Rows as CSV text, a header line first. */
+export function toCsv<Row>(rows: readonly Row[], columns: readonly CsvColumn<Row>[], options: CsvOptions = {}): string {
+  const separator = options.separator ?? ","
+  const newline = options.newline ?? "\r\n"
+  const line = (cells: unknown[]) => cells.map((c) => csvField(c, options)).join(separator)
+  const out = [line(columns.map((c) => c.label ?? c.key))]
+  for (const row of rows) {
+    out.push(
+      line(columns.map((c) => (c.value ? c.value(row) : (row as Record<string, unknown>)[c.key]))),
+    )
+  }
+  return (options.bom ? "" : "") + out.join(newline) + newline
+}
+
+/**
+ * Hand the viewer a file to save. Does nothing outside a browser, so a call
+ * that runs during SSR is harmless.
+ */
+export function downloadFile(name: string, data: Blob | string, type = "text/plain;charset=utf-8"): void {
+  if (typeof document === "undefined" || typeof URL === "undefined") return
+  const blob = typeof data === "string" ? new Blob([data], { type }) : data
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement("a")
+  a.href = url
+  a.download = name
+  a.rel = "noopener"
+  a.style.display = "none"
+  document.body.append(a)
+  a.click()
+  a.remove()
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+const PAINT_PROPS = [
+  "fill",
+  "fill-opacity",
+  "fill-rule",
+  "stroke",
+  "stroke-opacity",
+  "stroke-width",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "opacity",
+  "stop-color",
+  "stop-opacity",
+  "color",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "letter-spacing",
+  "text-anchor",
+  "dominant-baseline",
+  "visibility",
+  "display",
+] as const
+
+/**
+ * A standalone copy of a live SVG: every element carries its computed paint as
+ * an inline style, so CSS custom properties and classes from the page's
+ * stylesheet survive being rendered as an image, and running SMIL animations
+ * are frozen at their end state.
+ */
+export function inlineSvg(svg: SVGSVGElement): SVGSVGElement {
+  const clone = svg.cloneNode(true) as SVGSVGElement
+  const source = [svg, ...svg.querySelectorAll("*")]
+  const target = [clone, ...clone.querySelectorAll("*")]
+  source.forEach((el, i) => {
+    const copy = target[i]
+    if (!(copy instanceof Element)) return
+    const computed = getComputedStyle(el)
+    const style = PAINT_PROPS.map((p) => `${p}:${computed.getPropertyValue(p)}`)
+      .filter((d) => !d.endsWith(":"))
+      .join(";")
+    copy.setAttribute("style", style)
+    copy.removeAttribute("class")
+  })
+  // Comment nodes (Vue leaves them in development builds) may hold "--", which
+  // is invalid inside an XML comment and makes the whole image fail to load.
+  const comments = document.createTreeWalker(clone, NodeFilter.SHOW_COMMENT)
+  const dead: Node[] = []
+  while (comments.nextNode()) dead.push(comments.currentNode)
+  for (const node of dead) node.parentNode?.removeChild(node)
+  for (const anim of clone.querySelectorAll("animate")) {
+    const attr = anim.getAttribute("attributeName")
+    const to = anim.getAttribute("to")
+    if (attr && to != null) anim.parentElement?.setAttribute(attr, to)
+    anim.remove()
+  }
+  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  const { width, height } = svg.getBoundingClientRect()
+  clone.setAttribute("width", String(width))
+  clone.setAttribute("height", String(height))
+  clone.style.overflow = "visible"
+  return clone
+}
+
+export interface RasterOptions {
+  /** Device pixels per CSS pixel. Default: the screen's ratio, at least 2. */
+  scale?: number
+  /** Fill behind the drawing; transparent when omitted. */
+  background?: string
+  /** Extra space around the drawing, in CSS pixels. */
+  padding?: number
+  /** Drawn above the SVG, in the page's own font. */
+  header?: (ctx: CanvasRenderingContext2D, width: number) => number
+}
+
+/** Rasterise an SVG element to a PNG blob with its theme resolved. */
+export async function svgToPng(svg: SVGSVGElement, options: RasterOptions = {}): Promise<Blob> {
+  const copy = inlineSvg(svg)
+  const width = Number(copy.getAttribute("width"))
+  const height = Number(copy.getAttribute("height"))
+  const markup = new XMLSerializer().serializeToString(copy)
+  const url = URL.createObjectURL(new Blob([markup], { type: "image/svg+xml;charset=utf-8" }))
+  try {
+    const img = new Image()
+    img.decoding = "async"
+    const loaded = new Promise<void>((resolve, reject) => {
+      img.onload = () => resolve()
+      img.onerror = () => reject(new Error("SVG could not be rasterised"))
+    })
+    img.src = url
+    await loaded
+
+    const scale = options.scale ?? Math.max(2, globalThis.devicePixelRatio || 1)
+    const pad = options.padding ?? 0
+    const measure = document.createElement("canvas").getContext("2d")
+    const headerHeight = measure && options.header ? options.header(measure, width) : 0
+    const canvas = document.createElement("canvas")
+    canvas.width = Math.ceil((width + pad * 2) * scale)
+    canvas.height = Math.ceil((height + headerHeight + pad * 2) * scale)
+    const ctx = canvas.getContext("2d")
+    if (!ctx) throw new Error("Canvas 2D is unavailable")
+    ctx.scale(scale, scale)
+    if (options.background) {
+      ctx.fillStyle = options.background
+      ctx.fillRect(0, 0, width + pad * 2, height + headerHeight + pad * 2)
+    }
+    ctx.translate(pad, pad)
+    if (options.header) options.header(ctx, width)
+    ctx.drawImage(img, 0, headerHeight, width, height)
+    return await new Promise<Blob>((resolve, reject) =>
+      canvas.toBlob((b) => (b ? resolve(b) : reject(new Error("PNG encoding failed"))), "image/png"),
+    )
+  } finally {
+    URL.revokeObjectURL(url)
+  }
+}
+
+/** The first non-transparent background at or above an element. */
+export function backgroundOf(el: Element | null): string | undefined {
+  for (let node = el; node; node = node.parentElement) {
+    const bg = getComputedStyle(node).backgroundColor
+    if (bg && bg !== "transparent" && !/rgba\([^)]*,\s*0\)$/.test(bg)) return bg
+  }
+  return undefined
+}
+
+/**
+ * A colour as the browser resolves it where `within` sits, for APIs that cannot
+ * read custom properties (canvas, an SVG drawn as an image).
+ */
+export function resolveCssColor(value: string, within: Element): string {
+  if (!value.includes("var(") && !value.toLowerCase().includes("currentcolor")) return value
+  const probe = document.createElement("span")
+  probe.style.color = value
+  probe.style.display = "none"
+  within.append(probe)
+  const resolved = getComputedStyle(probe).color
+  probe.remove()
+  return resolved || value
+}
+
+/** A filesystem-safe name from a title. */
+export function fileStem(title: string | undefined, fallback: string): string {
+  const stem = (title ?? "").trim().replace(/[\\/:*?"<>|\u0000-\u001f]+/g, "").replace(/\s+/g, "-")
+  return stem || fallback
+}

package/src/components/logSearch.ts

@@ -0,0 +1,46 @@
+/*
+ * The log viewer's search and filtering, kept free of the component so the
+ * rules (what counts as a match, how the cursor wraps) can be tested alone.
+ */
+
+/** The last `max` lines, and how many were cut from the front. */
+export function ringWindow<T>(lines: readonly T[], max: number | undefined): { lines: readonly T[]; offset: number } {
+  if (!max || max <= 0 || lines.length <= max) return { lines, offset: 0 }
+  return { lines: lines.slice(lines.length - max), offset: lines.length - max }
+}
+
+/** Lines per level, a line with no level counting as `fallback`. */
+export function countLevels<L extends string>(
+  lines: readonly { level?: L }[],
+  fallback: L,
+): Map<L, number> {
+  const counts = new Map<L, number>()
+  for (const line of lines) {
+    const level = line.level ?? fallback
+    counts.set(level, (counts.get(level) ?? 0) + 1)
+  }
+  return counts
+}
+
+/** Case-insensitive substring test; an empty term matches nothing. */
+export function matchesTerm(message: string, term: string): boolean {
+  const needle = term.trim().toLowerCase()
+  return needle.length > 0 && message.toLowerCase().includes(needle)
+}
+
+/** Positions (into `rows`) of the rows whose message or source holds the term. */
+export function matchPositions(rows: readonly { message: string; source?: string }[], term: string): number[] {
+  if (!term.trim()) return []
+  const out: number[] = []
+  rows.forEach((row, i) => {
+    if (matchesTerm(row.message, term) || (row.source !== undefined && matchesTerm(row.source, term))) out.push(i)
+  })
+  return out
+}
+
+/** The next match cursor, wrapping at both ends; -1 when there are none. */
+export function stepMatch(current: number, total: number, direction: 1 | -1): number {
+  if (total <= 0) return -1
+  if (current < 0 || current >= total) return direction === 1 ? 0 : total - 1
+  return (current + direction + total) % total
+}