@leavepulse/ui 0.44.0 → 0.45.1

package/src/composables/useInputMask.ts

@@ -0,0 +1,254 @@
+import { computed, toValue, type MaybeRefOrGetter } from "vue"
+
+/*
+ * Format-as-you-type for a native <input> without losing the caret.
+ *
+ * A mask is a string of tokens and literals: "+0 (000) 000-00-00",
+ * "0000 0000 0000 0000", "AA-0000". Each token accepts one character; anything
+ * else is a literal the mask inserts itself. A backslash makes the next mask
+ * character literal ("\\0" is a literal zero). A list of masks picks the first
+ * one the typed characters fit, and a function derives the mask from the raw
+ * value typed so far (card networks, phone plans).
+ *
+ * The caret is tracked by how many accepted characters sit before it, not by
+ * its offset, so inserting a literal ahead of it never shoves it backwards.
+ * Literals are only written once a character follows them, so Backspace walks
+ * back naturally instead of hitting an auto-inserted separator.
+ */
+
+export type MaskToken = RegExp | { pattern: RegExp; transform?: (ch: string) => string }
+export type MaskTokens = Record<string, MaskToken>
+export type MaskSpec = string | readonly string[] | ((raw: string) => string)
+
+export const DEFAULT_MASK_TOKENS: MaskTokens = {
+  "0": /\d/,
+  a: /\p{L}/u,
+  A: { pattern: /\p{L}/u, transform: (ch) => ch.toLocaleUpperCase() },
+  "*": /[\p{L}\d]/u,
+}
+
+type Slot = { literal: string } | { test: (ch: string) => boolean; transform: (ch: string) => string }
+
+export interface MaskResult {
+  masked: string
+  raw: string
+  /** Caret offset in `masked`. */
+  caret: number
+  /** Every token of the mask is filled. */
+  complete: boolean
+}
+
+export interface MaskOptions {
+  mask: MaskSpec
+  tokens?: MaskTokens
+  /**
+   * Caret position: an offset into `input`, or with `fromRaw` the number of raw
+   * characters before it. Defaults to the end.
+   */
+  caret?: number
+  /** `input` holds raw characters only; literals in it are never consumed as mask literals. */
+  fromRaw?: boolean
+}
+
+function tester(token: MaskToken): { test: (ch: string) => boolean; transform: (ch: string) => string } {
+  const pattern = token instanceof RegExp ? token : token.pattern
+  const re = new RegExp(pattern.source, pattern.flags.replace(/[gy]/g, ""))
+  const transform = token instanceof RegExp ? undefined : token.transform
+  return { test: (ch) => re.test(ch), transform: transform ?? ((ch) => ch) }
+}
+
+export function parseMask(mask: string, tokens: MaskTokens = DEFAULT_MASK_TOKENS): Slot[] {
+  const slots: Slot[] = []
+  const chars = Array.from(mask)
+  for (let i = 0; i < chars.length; i++) {
+    const ch = chars[i]!
+    if (ch === "\\" && i + 1 < chars.length) {
+      slots.push({ literal: chars[++i]! })
+      continue
+    }
+    const token = tokens[ch]
+    slots.push(token ? tester(token) : { literal: ch })
+  }
+  return slots
+}
+
+interface Run extends MaskResult {
+  overflow: boolean
+  /** Offsets in the input of the characters consumed as tokens. */
+  tokenOffsets: number[]
+}
+
+function run(slots: Slot[], input: string, caret: number, fromRaw: boolean): Run {
+  const tokenStarts: number[] = []
+  const tokenEnds: number[] = []
+  const tokenOffsets: number[] = []
+  let out = ""
+  let raw = ""
+  let pending = ""
+  let si = 0
+  let offset = 0
+  let before = 0
+  let overflow = false
+  for (const ch of input) {
+    const at = offset
+    offset += ch.length
+    if (si >= slots.length) {
+      if (slots.some((s) => "test" in s && s.test(ch))) overflow = true
+      continue
+    }
+    while (si < slots.length) {
+      const slot = slots[si]!
+      if ("literal" in slot) {
+        pending += slot.literal
+        si++
+        if (!fromRaw && slot.literal === ch) break
+        continue
+      }
+      if (slot.test(ch)) {
+        const value = slot.transform(ch)
+        out += pending
+        pending = ""
+        tokenStarts.push(out.length)
+        out += value
+        tokenEnds.push(out.length)
+        raw += value
+        tokenOffsets.push(at)
+        si++
+        if (fromRaw ? raw.length <= caret : at < caret) before++
+      }
+      break
+    }
+  }
+  const rest = slots.slice(si)
+  const complete = !rest.some((s) => "test" in s)
+  // A fully typed mask also shows its closing literals ("(000)" ends with ")").
+  if (complete && out) out += pending + rest.map((s) => ("literal" in s ? s.literal : "")).join("")
+  const at = before === 0 ? (tokenStarts[0] ?? 0) : tokenEnds[before - 1]!
+  return {
+    masked: out,
+    raw,
+    caret: complete && before === tokenEnds.length ? out.length : at,
+    complete,
+    overflow,
+    tokenOffsets,
+  }
+}
+
+function resolve(options: MaskOptions, input: string, caret: number): Run {
+  const tokens = options.tokens ?? DEFAULT_MASK_TOKENS
+  const fromRaw = !!options.fromRaw
+  const { mask } = options
+  if (typeof mask === "string") return run(parseMask(mask, tokens), input, caret, fromRaw)
+  if (typeof mask === "function") {
+    let current = mask("")
+    let result = run(parseMask(current, tokens), input, caret, fromRaw)
+    for (let i = 0; i < 4; i++) {
+      const next = mask(result.raw)
+      if (next === current) break
+      current = next
+      result = run(parseMask(current, tokens), input, caret, fromRaw)
+    }
+    return result
+  }
+  let last: Run | undefined
+  for (const m of mask) {
+    last = run(parseMask(m, tokens), input, caret, fromRaw)
+    if (!last.overflow) return last
+  }
+  return last ?? run([], input, caret, fromRaw)
+}
+
+/** Format `input` through a mask and map the caret into the result. */
+export function applyMask(input: string, options: MaskOptions): MaskResult {
+  const caret = options.caret ?? (options.fromRaw ? Number.POSITIVE_INFINITY : input.length)
+  const { masked, raw, caret: at, complete } = resolve(options, input, caret)
+  return { masked, raw, caret: at, complete }
+}
+
+/**
+ * The value after deleting one accepted character next to a collapsed caret,
+ * skipping over literals, or null when there is nothing to delete that way.
+ */
+export function maskDelete(
+  value: string,
+  caret: number,
+  direction: "backward" | "forward",
+  options: Omit<MaskOptions, "caret" | "fromRaw">,
+): MaskResult | null {
+  const { tokenOffsets, raw } = resolve(options, value, caret)
+  const index =
+    direction === "backward"
+      ? tokenOffsets.filter((o) => o < caret).length - 1
+      : tokenOffsets.findIndex((o) => o >= caret)
+  if (index < 0) return null
+  const chars = Array.from(raw)
+  chars.splice(index, 1)
+  return applyMask(chars.join(""), { ...options, caret: index, fromRaw: true })
+}
+
+export interface UseInputMaskOptions {
+  mask: MaybeRefOrGetter<MaskSpec | undefined>
+  tokens?: MaybeRefOrGetter<MaskTokens | undefined>
+  /** Called with every value the user produces. */
+  onChange?: (masked: string, raw: string, complete: boolean) => void
+}
+
+/**
+ * Bind `onBeforeInput`, `onInput` and `onCompositionEnd` to the input, and show
+ * `format(model).masked` as its value.
+ */
+export function useInputMask(options: UseInputMaskOptions) {
+  const spec = computed(() => {
+    const mask = toValue(options.mask)
+    return mask === undefined || mask === "" ? undefined : { mask, tokens: toValue(options.tokens) }
+  })
+
+  function format(value: string | null | undefined): MaskResult {
+    const s = spec.value
+    const text = value ?? ""
+    return s ? applyMask(text, s) : { masked: text, raw: text, caret: text.length, complete: true }
+  }
+
+  function commit(el: HTMLInputElement, result: MaskResult): void {
+    if (el.value !== result.masked) el.value = result.masked
+    if (el.ownerDocument.activeElement === el) {
+      try {
+        el.setSelectionRange(result.caret, result.caret)
+      } catch {
+        // Input types without a selection cannot place a caret.
+      }
+    }
+    options.onChange?.(result.masked, result.raw, result.complete)
+  }
+
+  function onBeforeInput(event: InputEvent): void {
+    const s = spec.value
+    const el = event.target
+    if (!s || event.isComposing || !(el instanceof HTMLInputElement)) return
+    const backward = event.inputType === "deleteContentBackward"
+    if (!backward && event.inputType !== "deleteContentForward") return
+    const start = el.selectionStart
+    if (start === null || start !== el.selectionEnd) return
+    event.preventDefault()
+    const result = maskDelete(el.value, start, backward ? "backward" : "forward", s)
+    if (result) commit(el, result)
+  }
+
+  function reformat(el: HTMLInputElement): void {
+    const s = spec.value
+    if (!s) return
+    commit(el, applyMask(el.value, { ...s, caret: el.selectionStart ?? el.value.length }))
+  }
+
+  /** Attach to `input`. Composition is left alone until it ends. */
+  function onInput(event: Event): void {
+    if ((event as InputEvent).isComposing || !(event.target instanceof HTMLInputElement)) return
+    reformat(event.target)
+  }
+
+  function onCompositionEnd(event: CompositionEvent): void {
+    if (event.target instanceof HTMLInputElement) reformat(event.target)
+  }
+
+  return { active: computed(() => !!spec.value), format, onBeforeInput, onInput, onCompositionEnd }
+}

package/src/composables/useLocale.ts

@@ -0,0 +1,14 @@
+import { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from "vue"
+import { injectConfigProviderContext } from "reka-ui"
+
+/*
+ * The locale a date is written in: the component's own `locale`, else the one
+ * the app gave reka's ConfigProvider, else undefined, which lets Intl use the
+ * browser's. The calendars already followed ConfigProvider while the field
+ * that shows the picked date did not, so a Russian app showed a Russian
+ * calendar under "Oct 8, 2026".
+ */
+export function useLocale(own?: MaybeRefOrGetter<string | undefined>): ComputedRef<string | undefined> {
+  const context = injectConfigProviderContext({})
+  return computed(() => toValue(own) || context.locale?.value || undefined)
+}

package/src/composables/usePaintSelect.ts

@@ -0,0 +1,243 @@
+import { onBeforeUnmount, onMounted, readonly, ref, toValue, type MaybeRefOrGetter, type Ref } from "vue"
+import { useHotkeys, type HotkeyHelp } from "./useHotkeys"
+
+/*
+ * Paint selection: press on one item's tick and sweep across the others, and
+ * every item the pointer passes takes the state the first one is switching
+ * to. Starting on an unticked item ticks the run, starting on a ticked one
+ * clears it, and sweeping back un-paints what the stroke covered, restoring
+ * the items as they were before it. Near the edge of the scrolling box the list
+ * scrolls on its own, so a stroke can run past what is visible.
+ *
+ * Items are found in the DOM by `data-paint-key`, in document order, so the
+ * run follows what the user sees (sorted, filtered, collapsed groups skipped).
+ * A mouse or pen paints at once. A finger holds still for HOLD_MS first, so a
+ * swipe through the list still scrolls it.
+ *
+ * The press itself ticks the first item, so the click the browser sends after
+ * the stroke is swallowed before the item's own handler sees it; otherwise the
+ * first item would toggle back.
+ *
+ * `onPointerDown(event, key, { hold })` makes any pointer hold first. That is
+ * how a list without visible ticks enters selection: a quick click on the row
+ * stays the row's click, a long press selects it and the same press goes on
+ * painting.
+ */
+export interface UsePaintSelectOptions<K> {
+  /** The element that holds the items. */
+  root: Ref<HTMLElement | null>
+  selection: () => readonly K[]
+  set: (keys: K[]) => void
+  /** Turn painting off without unmounting (e.g. selection mode is off). */
+  enabled?: MaybeRefOrGetter<boolean>
+  /** Map an item's `data-paint-key` back to its key. Defaults to the string itself. */
+  resolve?: (raw: string) => K | undefined
+  /** Every key, for Ctrl+A while the focus is inside `root`. Omit to leave Ctrl+A alone. */
+  selectAll?: () => K[]
+  /** How Ctrl+A is listed in the shortcuts reference. */
+  help?: MaybeRefOrGetter<HotkeyHelp | undefined>
+}
+
+const HOLD_MS = 320
+const SLOP_PX = 8
+const EDGE_PX = 40
+const SCROLL_STEP = 14
+
+interface Stroke<K> {
+  keys: K[]
+  anchor: number
+  paint: boolean
+  before: Set<K>
+  x: number
+  y: number
+  scroller: HTMLElement | null
+}
+
+function scrollParent(el: HTMLElement | null): HTMLElement | null {
+  for (let node = el?.parentElement; node; node = node.parentElement) {
+    const { overflowY } = getComputedStyle(node)
+    if ((overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight) return node
+  }
+  return null
+}
+
+export function usePaintSelect<K = string>(options: UsePaintSelectOptions<K>) {
+  const resolve = options.resolve ?? ((raw: string) => raw as unknown as K)
+  let stroke: Stroke<K> | null = null
+  let pending: { key: K; pointerId: number; x: number; y: number; timer: ReturnType<typeof setTimeout> } | null = null
+  let swallowClick = false
+  let frame = 0
+  /** True while a stroke is painting, for UI that reacts to it (a tick column revealing). */
+  const painting = ref(false)
+
+  const enabled = () => toValue(options.enabled) ?? true
+
+  function keysInView(): K[] {
+    const items = options.root.value?.querySelectorAll<HTMLElement>("[data-paint-key]") ?? []
+    const out: K[] = []
+    for (const item of items) {
+      if (item.offsetParent === null) continue
+      const key = resolve(item.dataset.paintKey ?? "")
+      if (key !== undefined) out.push(key)
+    }
+    return out
+  }
+
+  function keyAt(x: number, y: number): K | undefined {
+    const item = document.elementFromPoint(x, y)?.closest<HTMLElement>("[data-paint-key]")
+    if (!item || !options.root.value?.contains(item)) return undefined
+    return resolve(item.dataset.paintKey ?? "")
+  }
+
+  function extend() {
+    if (!stroke) return
+    const key = keyAt(stroke.x, stroke.y)
+    const at = key === undefined ? -1 : stroke.keys.indexOf(key)
+    if (at < 0) return
+    const [lo, hi] = at < stroke.anchor ? [at, stroke.anchor] : [stroke.anchor, at]
+    const next = new Set(stroke.before)
+    for (let i = lo; i <= hi; i++) {
+      const k = stroke.keys[i]!
+      if (stroke.paint) next.add(k)
+      else next.delete(k)
+    }
+    options.set([...next])
+  }
+
+  function tick() {
+    frame = 0
+    if (!stroke) return
+    const box = stroke.scroller?.getBoundingClientRect() ?? { top: 0, bottom: window.innerHeight }
+    const delta = stroke.y > box.bottom - EDGE_PX ? SCROLL_STEP : stroke.y < box.top + EDGE_PX ? -SCROLL_STEP : 0
+    if (delta) {
+      if (stroke.scroller) stroke.scroller.scrollTop += delta
+      else window.scrollBy(0, delta)
+      extend()
+    }
+    frame = requestAnimationFrame(tick)
+  }
+
+  function begin(key: K, x: number, y: number) {
+    const keys = keysInView()
+    const anchor = keys.indexOf(key)
+    if (anchor < 0) return
+    const before = new Set(options.selection())
+    stroke = { keys, anchor, paint: !before.has(key), before, x, y, scroller: scrollParent(options.root.value) }
+    painting.value = true
+    // A sweep over text would otherwise select it, and a hold that started
+    // before the stroke may already have.
+    window.getSelection()?.removeAllRanges()
+    if (options.root.value) options.root.value.style.userSelect = "none"
+    extend()
+    if (!frame) frame = requestAnimationFrame(tick)
+  }
+
+  function cancelPending() {
+    if (pending) clearTimeout(pending.timer)
+    pending = null
+  }
+
+  /** Bind to `pointerdown` on the item's tick (or the whole item). */
+  function onPointerDown(event: PointerEvent, key: K, behaviour: { hold?: number } = {}) {
+    if (!enabled() || event.button !== 0) return
+    cancelPending()
+    if (behaviour.hold === undefined && event.pointerType !== "touch") {
+      // Keeps the press from starting a text selection or moving focus mid-stroke.
+      event.preventDefault()
+      begin(key, event.clientX, event.clientY)
+      return
+    }
+    const { pointerId, clientX: x, clientY: y } = event
+    pending = {
+      key,
+      pointerId,
+      x,
+      y,
+      timer: setTimeout(() => {
+        pending = null
+        begin(key, x, y)
+        navigator.vibrate?.(8)
+      }, behaviour.hold ?? HOLD_MS),
+    }
+  }
+
+  function onMove(event: PointerEvent) {
+    if (pending && event.pointerId === pending.pointerId) {
+      if (Math.hypot(event.clientX - pending.x, event.clientY - pending.y) > SLOP_PX) cancelPending()
+      return
+    }
+    if (!stroke) return
+    stroke.x = event.clientX
+    stroke.y = event.clientY
+    extend()
+  }
+
+  function onUp() {
+    cancelPending()
+    if (!stroke) return
+    stroke = null
+    painting.value = false
+    if (options.root.value) options.root.value.style.userSelect = ""
+    if (frame) cancelAnimationFrame(frame)
+    frame = 0
+    swallowClick = true
+    setTimeout(() => (swallowClick = false), 0)
+  }
+
+  function onClickCapture(event: MouseEvent) {
+    if (!swallowClick) return
+    swallowClick = false
+    event.stopPropagation()
+    event.preventDefault()
+  }
+
+  // A long press is also how a finger asks for the context menu; once it has
+  // turned into painting, that menu would open over the stroke.
+  function onContextMenu(event: Event) {
+    if (!stroke && !swallowClick) return
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  // A finger that has started painting must not scroll the page under it.
+  function onTouchMove(event: TouchEvent) {
+    if (stroke) event.preventDefault()
+  }
+
+  useHotkeys(
+    () =>
+      options.selectAll && enabled()
+        ? [
+            {
+              key: "a",
+              code: "KeyA",
+              ctrl: true,
+              help: toValue(options.help),
+              handler: () => options.set(options.selectAll!()),
+            },
+          ]
+        : [],
+    { scope: options.root },
+  )
+
+  onMounted(() => {
+    window.addEventListener("pointermove", onMove)
+    window.addEventListener("pointerup", onUp)
+    window.addEventListener("pointercancel", onUp)
+    window.addEventListener("click", onClickCapture, true)
+    window.addEventListener("contextmenu", onContextMenu, true)
+    options.root.value?.addEventListener("touchmove", onTouchMove, { passive: false })
+  })
+  onBeforeUnmount(() => {
+    onUp()
+    swallowClick = false
+    window.removeEventListener("pointermove", onMove)
+    window.removeEventListener("pointerup", onUp)
+    window.removeEventListener("pointercancel", onUp)
+    window.removeEventListener("click", onClickCapture, true)
+    window.removeEventListener("contextmenu", onContextMenu, true)
+    options.root.value?.removeEventListener("touchmove", onTouchMove)
+  })
+
+  return { onPointerDown, painting: readonly(painting) }
+}

package/src/composables/useShift.ts

@@ -87,6 +87,13 @@ export function useShift(
   /** Where the box last settled, so a retune has a size to ease FROM. */
   let lastHeight = 0
   let lastWidth = 0
+  /**
+   * Whether the last measurement was of a box actually laid out. An empty box
+   * in the flow measures 0 and is a real size to grow from (a bar or message
+   * appearing in it); a box under `display: none` also measures 0 but has no
+   * layout yet, and growing from that would animate content in from nothing.
+   */
+  let laidOut = false
   /** True while a tween owns the size, so observers don't cancel it midway. */
   let inFlight = false
   /** When the in-flight tween started, to tell a duplicate from a follow-up. */
@@ -192,6 +199,8 @@ export function useShift(
     restoreScroll(tops)
     lastHeight = toHeight
     lastWidth = toWidth
+    const wasLaidOut = laidOut
+    laidOut = node.getClientRects().length > 0
 
     // Nothing moved on either axis, so there is nothing to ease — and leaving
     // the size unset keeps the box free to size itself.
@@ -203,8 +212,8 @@ export function useShift(
     // different thing it was meant to catch: the box was not in the layout yet,
     // so there is no size to ease out of.
     const movesHeight =
-      wantsHeight() && fromHeight !== 0 && toHeight !== fromHeight
-    const movesWidth = wantsWidth() && fromWidth !== 0 && toWidth !== fromWidth
+      wantsHeight() && (fromHeight !== 0 || wasLaidOut) && toHeight !== fromHeight
+    const movesWidth = wantsWidth() && (fromWidth !== 0 || wasLaidOut) && toWidth !== fromWidth
     if (!movesHeight && !movesWidth) return
 
     if (movesHeight) node.style.height = `${fromHeight}px`
@@ -250,6 +259,7 @@ export function useShift(
     resizing.value = false
     lastHeight = 0
     lastWidth = 0
+    laidOut = false
     inFlight = false
   }
 
@@ -263,6 +273,7 @@ export function useShift(
 
       lastHeight = node.offsetHeight
       lastWidth = node.offsetWidth
+      laidOut = node.getClientRects().length > 0
       scrollHost = node
       node.addEventListener("scroll", rememberScroll, { capture: true, passive: true })
       if (wantsHeight()) node.style.height = `${lastHeight}px`

package/src/iconSubset.d.mts

@@ -0,0 +1,10 @@
+export interface IconCollection {
+  prefix: string
+  icons: Record<string, { body: string; width?: number; height?: number }>
+  aliases?: Record<string, { parent: string }>
+  width?: number
+  height?: number
+}
+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

@@ -0,0 +1,51 @@
+// 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).
+import { readdirSync, readFileSync, statSync } from "node:fs"
+import { join } from "node:path"
+
+const NAME = /lucide:([a-z0-9]+(?:-[a-z0-9]+)*)/g
+const SOURCE = /\.(vue|ts|tsx|js|jsx|mjs|md|html)$/
+const SKIP = new Set(["node_modules", "dist", ".nuxt", ".output", ".git"])
+
+export function namesInText(text) {
+  return [...text.matchAll(NAME)].map((m) => m[1])
+}
+
+export function namesInDirs(dirs) {
+  const names = new Set()
+  const walk = (dir) => {
+    let entries
+    try {
+      entries = readdirSync(dir)
+    } catch {
+      return
+    }
+    for (const entry of entries) {
+      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)
+    }
+  }
+  for (const dir of dirs) walk(dir)
+  return names
+}
+
+export function subset(collection, names) {
+  const icons = {}
+  const aliases = {}
+  for (const name of [...names].sort()) {
+    if (collection.icons[name]) {
+      icons[name] = collection.icons[name]
+      continue
+    }
+    const alias = collection.aliases?.[name]
+    if (!alias) continue
+    aliases[name] = alias
+    if (collection.icons[alias.parent]) icons[alias.parent] = collection.icons[alias.parent]
+  }
+  const out = { prefix: collection.prefix, icons, width: collection.width, height: collection.height }
+  if (Object.keys(aliases).length) out.aliases = aliases
+  return out
+}

package/src/icons-all.ts

@@ -0,0 +1,10 @@
+import lucide from "@iconify-json/lucide/icons.json"
+import type { IconifyJSON } from "@iconify/vue"
+import { registerIconCollection } from "./icons"
+
+/*
+ * Side-effect entry: `import "@leavepulse/ui/icons-all"` registers every lucide
+ * icon up front, for apps that render arbitrary icon names during SSR or want
+ * no late chunk. Costs the whole collection (~540 KB before compression).
+ */
+registerIconCollection(lucide as IconifyJSON)