@leavepulse/ui 0.43.4 → 0.45.0

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/useLpConfig.ts

@@ -0,0 +1,87 @@
+import {
+  computed,
+  inject,
+  provide,
+  toValue,
+  type App,
+  type Component,
+  type ComputedRef,
+  type InjectionKey,
+  type MaybeRefOrGetter,
+} from "vue"
+
+/*
+ * App-wide kit configuration, said once at the root instead of on every call
+ * site: the router link component that navigation pieces render, and the text
+ * the kit would otherwise hard-code in English.
+ *
+ * Labels are grouped by scope (one scope per component, e.g. "lightbox",
+ * "toast") so each component owns its own keys and defaults. The precedence is
+ * always: the component's own `labels` prop, then the nearest config, then the
+ * component's English defaults.
+ */
+export type LabelScope = Record<string, string>
+
+export interface LpConfig {
+  /** Component rendered for internal links (RouterLink, NuxtLink). Plain `<a>` when unset. */
+  linkComponent?: Component | string
+  /** Text overrides by scope: `{ lightbox: { previous: "Back" } }`. */
+  labels?: Partial<Record<string, Partial<LabelScope>>>
+}
+
+export const LP_CONFIG: InjectionKey<MaybeRefOrGetter<LpConfig>> = Symbol.for("lp-config")
+
+/** Provide kit configuration to every component below the caller. */
+export function provideLpConfig(config: MaybeRefOrGetter<LpConfig>): void {
+  provide(LP_CONFIG, layered(inject(LP_CONFIG, {}), config))
+}
+
+/** Install the configuration app-wide: `app.use(lpConfig({ ... }))`. */
+export function lpConfig(config: MaybeRefOrGetter<LpConfig>) {
+  return {
+    install: (app: App) => {
+      const outer = app.runWithContext(() => inject(LP_CONFIG, {}))
+      app.provide(LP_CONFIG, layered(outer, config))
+    },
+  }
+}
+
+/*
+ * A nested config refines the one above it rather than replacing it: an app's
+ * own labels must not drop the link component a framework plugin provided.
+ */
+function layered(outer: MaybeRefOrGetter<LpConfig>, inner: MaybeRefOrGetter<LpConfig>): () => LpConfig {
+  return () => mergeConfig(toValue(outer), toValue(inner))
+}
+
+export function mergeConfig(outer: LpConfig, inner: LpConfig): LpConfig {
+  const labels: Partial<Record<string, Partial<LabelScope>>> = { ...outer.labels }
+  for (const [scope, values] of Object.entries(inner.labels ?? {})) {
+    labels[scope] = { ...labels[scope], ...values }
+  }
+  return { ...outer, ...inner, linkComponent: inner.linkComponent ?? outer.linkComponent, labels }
+}
+
+export function useLpConfig(): ComputedRef<LpConfig> {
+  const config = inject(LP_CONFIG, {})
+  return computed(() => toValue(config))
+}
+
+/**
+ * The labels a component renders: its own `labels` prop over the configured
+ * scope over its defaults.
+ */
+export function useLabels<T extends LabelScope>(
+  scope: string,
+  defaults: T,
+  own?: () => Partial<T> | undefined,
+): ComputedRef<T> {
+  const config = useLpConfig()
+  return computed(() => ({ ...defaults, ...config.value.labels?.[scope], ...own?.() }) as T)
+}
+
+/** The link component to render for an internal destination. */
+export function useLinkComponent(): ComputedRef<Component | string> {
+  const config = useLpConfig()
+  return computed(() => config.value.linkComponent ?? "a")
+}

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/useRovingFocus.ts

@@ -1,5 +1,7 @@
 import { computed, ref, watch, type MaybeRefOrGetter, toValue } from "vue"
 
+const NON_TEXT_INPUTS = new Set(["checkbox", "radio", "button", "submit", "reset", "range", "color", "file", "image"])
+
 /*
  * Arrow-key navigation over a list, with a roving tabindex.
  *
@@ -152,7 +154,16 @@ export function useRovingFocus(
     }
   }
 
+  function isTextEntry(target: EventTarget | null): boolean {
+    if (!(target instanceof HTMLElement)) return false
+    if (target.isContentEditable || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) return true
+    return target instanceof HTMLInputElement && !NON_TEXT_INPUTS.has(target.type)
+  }
+
   function onKeydown(event: KeyboardEvent) {
+    // A field inside a row (an inline rename, a filter) owns its keys: the list
+    // taking letters for typeahead or Space for activation made it untypeable.
+    if (event.isComposing || isTextEntry(event.target)) return
     const vertical = orientation === "vertical" || orientation === "both"
     const horizontal = orientation === "horizontal" || orientation === "both"
 

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/composables/useTilt.ts

@@ -1,5 +1,5 @@
 import { useReducedMotion } from "motion-v"
-import { computed, ref, type ComputedRef, type CSSProperties, type Ref } from "vue"
+import { computed, ref, toValue, type ComputedRef, type CSSProperties, type MaybeRefOrGetter, type Ref } from "vue"
 
 /*
  * useTilt — pointer-reactive 3D tilt for a "tactile" surface (a card, a tile, a
@@ -35,10 +35,8 @@ export interface UseTilt {
   active: Ref<boolean>
 }
 
-export function useTilt(options: UseTiltOptions = {}): UseTilt {
-  const max = options.max ?? 10
-  const lift = options.lift ?? 8
-  const scale = options.scale ?? 1.03
+export function useTilt(source: MaybeRefOrGetter<UseTiltOptions> = {}): UseTilt {
+  const options = computed(() => toValue(source))
   const reduceMotion = useReducedMotion()
 
   const active = ref(false)
@@ -72,6 +70,7 @@ export function useTilt(options: UseTiltOptions = {}): UseTilt {
     // rotateX tips away from the pointer's vertical position; rotateY toward its
     // horizontal one. Only tilt while active so it rests flat when the pointer
     // leaves (nx/ny are already zeroed on leave).
+    const { max = 10, lift = 8, scale = 1.03 } = options.value
     const rx = active.value ? -ny.value * max : 0
     const ry = active.value ? nx.value * max : 0
     const z = active.value ? lift : 0
@@ -86,7 +85,7 @@ export function useTilt(options: UseTiltOptions = {}): UseTilt {
   })
 
   const glareStyle = computed<CSSProperties>(() => {
-    if (!options.glare || reduceMotion.value || !active.value) {
+    if (!options.value.glare || reduceMotion.value || !active.value) {
       return { opacity: 0 }
     }
     // Bright spot tracks the pointer; map [-1,1] → [0%,100%].