@leavepulse/ui 0.68.0 → 0.70.0

package/src/components/PickerField.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useAttrs } from "vue"
+import type { useFieldControl } from "../composables/useField"
+import { mergeClass } from "../composables/useMergedClass"
+import { PICKER_CLEAR, PICKER_PRESET, PICKER_PRESETS, PICKER_SIZE, PICKER_TRIGGER, pickerTone } from "./calendar"
+import LpIcon from "./LpIcon.vue"
+import LpPopover from "./LpPopover.vue"
+import LpRollingText from "./LpRollingText.vue"
+
+defineOptions({ inheritAttrs: false })
+withDefaults(defineProps<{
+  field: ReturnType<typeof useFieldControl>["value"]
+  display: string
+  placeholder: string
+  icon: string
+  size?: "sm" | "md" | "lg"
+  clearable: boolean
+  clearLabel: string
+  presetsLabel: string
+  presets: { label: string; disabled: boolean; selected: boolean; select: () => void }[]
+  presetsClass: string
+}>(), { size: "md" })
+const open = defineModel<boolean>("open")
+defineEmits<{ clear: [] }>()
+const attrs = useAttrs()
+</script>
+
+<template>
+  <div :class="mergeClass('relative w-full', attrs.class as string)" :style="attrs.style as never">
+    <LpPopover v-model:open="open" align="start" panel-class="flex w-auto max-w-[calc(100vw-1rem)] flex-col rounded-card p-0 sm:flex-row">
+      <template #trigger>
+        <button
+          v-bind="{ ...attrs, class: undefined, style: undefined }"
+          :id="field.id"
+          type="button"
+          :disabled="field.disabled"
+          :aria-invalid="field.invalid || undefined"
+          :aria-describedby="field.describedBy"
+          :class="[PICKER_TRIGGER, PICKER_SIZE[size], pickerTone(field.invalid)]"
+        >
+          <LpIcon :name="icon" :size="16" class="shrink-0 text-muted" />
+          <LpRollingText :value="display || placeholder" align="start" class="min-w-0 flex-1" :class="!display && 'text-muted'" />
+          <span v-if="clearable" class="w-[15px] shrink-0" aria-hidden="true" />
+          <LpIcon name="lucide:chevron-down" :size="15" class="shrink-0 text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[state=open]:rotate-180 motion-reduce:transition-none" />
+        </button>
+      </template>
+      <div v-if="presets.length" role="group" :aria-label="presetsLabel" :class="[PICKER_PRESETS, presetsClass]">
+        <button v-for="(preset, i) in presets" :key="`${i}:${preset.label}`" type="button" :disabled="preset.disabled" :aria-pressed="preset.selected" :class="PICKER_PRESET" @click="preset.select">
+          {{ preset.label }}
+        </button>
+      </div>
+      <slot />
+    </LpPopover>
+    <button v-if="clearable" type="button" :aria-label="clearLabel" :class="PICKER_CLEAR" @click="$emit('clear')">
+      <LpIcon name="lucide:x" :size="15" />
+    </button>
+  </div>
+</template>

package/src/components/RevealToggle.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+/*
+ * The eye that shows and hides a value: LpPasswordInput's field, LpSecretField's
+ * display and LpCodeDisplay's code. One button so the three answer a click the
+ * same way: both eyes stay mounted and morph in place (lp-glyph-swap), the
+ * pressed state is announced, and the tooltip says what the next click does
+ * and doubles as the button's name. Internal; the fields expose it through
+ * their own `revealed`/`visible` models.
+ */
+import LpButton from "./LpButton.vue"
+import LpIcon from "./LpIcon.vue"
+import LpTooltip from "./LpTooltip.vue"
+
+defineProps<{
+  /** Glyph size in px. The button's own size comes from the caller's class. */
+  iconSize: number
+  /** What the button says while the value is hidden, and while it is shown. */
+  showLabel: string
+  hideLabel: string
+  disabled?: boolean
+  /** Id of the element whose content this reveals. */
+  controls?: string
+}>()
+
+// The caller's class sizes the BUTTON (each field has its own), not the
+// tooltip wrapper that is this component's root.
+defineOptions({ inheritAttrs: false })
+
+const revealed = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <LpTooltip :content="revealed ? hideLabel : showLabel" label>
+    <LpButton
+      variant="ghost"
+      size="xs"
+      square
+      class="text-muted hover:text-ink"
+      v-bind="$attrs"
+      :disabled="disabled"
+      :aria-pressed="revealed"
+      :aria-controls="controls"
+      @click="revealed = !revealed"
+    >
+      <span class="grid place-items-center">
+        <LpIcon name="lucide:eye" :size="iconSize" class="lp-glyph-swap col-start-1 row-start-1" :data-on="!revealed || undefined" />
+        <LpIcon name="lucide:eye-off" :size="iconSize" class="lp-glyph-swap col-start-1 row-start-1" :data-on="revealed || undefined" />
+      </span>
+    </LpButton>
+  </LpTooltip>
+</template>

package/src/components/StepConnector.vue

@@ -0,0 +1,54 @@
+<script lang="ts">
+// The consumer's `class` is merged into the track's own rather than appended.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * The line between two steps, filled once the step it leaves is behind.
+ * Internal: LpStepper and LpPipeline both draw it, and it was two copies of
+ * the same track, fill and transition that had started to drift apart.
+ *
+ * The fill grows from the step it leaves towards the next one (scaled, so it
+ * eases on the compositor), which reads as moving forward. `flowing` runs a
+ * light along the empty line: the step is running and the work is on its way
+ * to the next. Thickness and margins are the caller's, through `class`.
+ */
+import { computed } from "vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
+
+const props = withDefaults(
+  defineProps<{
+    filled: boolean
+    orientation?: "horizontal" | "vertical"
+    /** The fill's colour class: what the travelled part says (passed, skipped, done). */
+    fill?: string
+    flowing?: boolean
+  }>(),
+  { orientation: "horizontal", fill: "bg-brand", flowing: false },
+)
+
+const across = computed(() => props.orientation === "horizontal")
+
+const { class: trackClass, attrs: rest } = useMergedAttrs(() =>
+  `relative flex-1 overflow-hidden rounded-pill bg-line ${across.value ? "h-0.5" : "w-0.5"}`,
+)
+</script>
+
+<template>
+  <span :class="trackClass" aria-hidden="true" v-bind="rest">
+    <span
+      class="absolute inset-0 transition-[scale,background-color] duration-(--duration-slow) ease-(--ease-emphasized) motion-reduce:transition-none"
+      :class="[
+        fill,
+        across ? 'origin-left rtl:origin-right' : 'origin-top',
+        filled ? (across ? 'scale-x-100' : 'scale-y-100') : across ? 'scale-x-0' : 'scale-y-0',
+      ]"
+    />
+    <span
+      v-if="flowing"
+      class="lp-sweep absolute from-transparent via-brand to-transparent [--sweep-to:200%]"
+      :class="across ? 'inset-y-0 left-0 w-1/2 bg-linear-to-r' : 'lp-sweep--y inset-x-0 top-0 h-1/2 bg-linear-to-b'"
+    />
+  </span>
+</template>

package/src/components/TourCard.vue

@@ -3,6 +3,9 @@ import type { TourStep } from "./LpTour.vue"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
 import LpKeys from "./LpKeys.vue"
+import LpRollingText from "./LpRollingText.vue"
+import LpShift from "./LpShift.vue"
+import LpSwap from "./LpSwap.vue"
 
 defineProps<{
   step: TourStep | undefined
@@ -21,22 +24,32 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="flex items-start justify-between gap-3">
-    <p class="font-medium" aria-live="polite">{{ step?.title }}</p>
-    <button type="button" class="text-muted hover:text-ink" :aria-label="labels.close" @click="$emit('dismiss')">
-      <LpIcon name="lucide:x" class="size-4" />
-    </button>
-  </div>
-  <p v-if="step?.text" class="mt-1.5 text-muted">{{ step.text }}</p>
-  <LpKeys v-if="step?.keys" :combo="step.keys" size="sm" class="mt-2" />
-  <p v-if="step?.try" class="mt-2 text-xs text-brand">{{ labels.tryIt }}</p>
-  <p v-if="step?.example" class="mt-2 text-xs text-muted">{{ labels.example }}</p>
-  <div class="mt-4 flex items-center justify-between gap-2">
-    <span class="text-xs tabular-nums text-muted">{{ progress }}</span>
-    <div class="flex gap-2">
-      <LpButton v-if="index > 0" size="sm" variant="ghost" @click="$emit('back')">{{ labels.back }}</LpButton>
-      <LpButton v-if="step?.try && step.perform" size="sm" variant="outline" @click="$emit('perform')">{{ labels.perform }}</LpButton>
-      <LpButton size="sm" :variant="step?.try ? 'ghost' : undefined" @click="$emit('next')">{{ last ? labels.done : labels.next }}</LpButton>
+  <!-- A step is another piece of content in the same card: it swaps in and the
+       card eases to its height (LpSwap), the count and the main button roll,
+       and the button row eases when Back joins it, so moving on reads as the
+       card turning a page rather than being redrawn. -->
+  <LpSwap :swap-key="index">
+    <div class="flex items-start justify-between gap-3">
+      <p class="font-medium" aria-live="polite">{{ step?.title }}</p>
+      <button type="button" class="text-muted hover:text-ink" :aria-label="labels.close" @click="$emit('dismiss')">
+        <LpIcon name="lucide:x" class="size-4" />
+      </button>
     </div>
+    <p v-if="step?.text" class="mt-1.5 text-muted">{{ step.text }}</p>
+    <LpKeys v-if="step?.keys" :combo="step.keys" size="sm" class="mt-2" />
+    <p v-if="step?.try" class="mt-2 text-xs text-brand">{{ labels.tryIt }}</p>
+    <p v-if="step?.example" class="mt-2 text-xs text-muted">{{ labels.example }}</p>
+  </LpSwap>
+  <div class="mt-4 flex items-center justify-between gap-2">
+    <LpRollingText class="text-xs tabular-nums text-muted" :value="progress" align="start" />
+    <LpShift axis="width">
+      <div class="flex gap-2">
+        <LpButton v-if="index > 0" size="sm" variant="ghost" @click="$emit('back')">{{ labels.back }}</LpButton>
+        <LpButton v-if="step?.try && step.perform" size="sm" variant="outline" @click="$emit('perform')">{{ labels.perform }}</LpButton>
+        <LpButton size="sm" :variant="step?.try ? 'ghost' : undefined" @click="$emit('next')">
+          <LpRollingText :value="last ? labels.done : labels.next" />
+        </LpButton>
+      </div>
+    </LpShift>
   </div>
 </template>

package/src/components/badge.ts

@@ -0,0 +1,8 @@
+/*
+ * The remove control on a chip (LpBadge `removable`): a small round ✕ that
+ * tints on hover. Exported for a chip whose remove control has to be another
+ * primitive's (reka's TagsInputItemDelete in LpTagsInput, which owns the
+ * keyboard handling), so it still looks like the badge's own.
+ */
+export const BADGE_REMOVE =
+  "grid size-4 shrink-0 place-items-center rounded-pill text-muted outline-none transition-colors duration-fast hover:bg-ink/10 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"

package/src/components/chart.ts

@@ -4,6 +4,8 @@
  * pixel box, return paths and tick positions.
  */
 
+import { compactNumber } from "./format"
+
 export interface ChartPoint {
   /** Numeric value. `null` breaks the line — a real gap, not a zero. */
   y: number | null
@@ -761,26 +763,9 @@ export const calloutLabels = (
   return out
 }
 
-/** Compact default tick formatting: 1.2k, 3.4M — never 1200.0000001 or 1000k. */
-export const formatTick = (v: number): string => {
-  if (!Number.isFinite(v)) return String(v)
-  const units: [number, string][] = [
-    [1e3, "k"],
-    [1e6, "M"],
-    [1e9, "B"],
-    [1e12, "T"],
-  ]
-  const abs = Math.abs(v)
-  let i = units.length - 1
-  while (i >= 0 && abs < units[i][0]) i--
-  if (i < 0) {
-    const plain = Number(v.toFixed(2))
-    return Math.abs(plain) >= 1000 ? formatTick(Math.sign(v) * 1000) : String(plain)
-  }
-  const scaled = Number((v / units[i][0]).toFixed(1))
-  // 999 950 rounds to "1000k"; it reads as the next unit up.
-  if (Math.abs(scaled) >= 1000 && i < units.length - 1) {
-    return `${Number((v / units[i + 1][0]).toFixed(1))}${units[i + 1][1]}`
-  }
-  return `${scaled}${units[i][1]}`
-}
+/**
+ * Compact default tick formatting: 1.2k, 3.4M — never 1200.0000001 or 1000k.
+ * One argument on purpose: it is handed around as a formatter, and an index
+ * passed by `map` must not land in an options slot.
+ */
+export const formatTick = (v: number): string => compactNumber(v)

package/src/components/dateRange.ts

@@ -184,3 +184,28 @@ export function dayAllowed(iso: string, rules: DayRules = {}): boolean {
   if (rules.isDisabled?.(value)) return false
   return !rules.isDateUnavailable?.(value)
 }
+
+export interface RangeRules extends DayRules {
+  /** Longest range, in days, counting both ends. */
+  maximumDays?: number
+}
+
+/**
+ * A preset's range under the same rules as one picked on the calendar: trimmed
+ * to min/max, then refused if either end is a disabled day, it is longer than
+ * maximumDays, or a day inside it is unavailable. A preset that breaks them is
+ * shown disabled instead of writing a range the calendar would never allow.
+ */
+export function allowedRange(range: DateRange, rules: RangeRules = {}): DateRange | undefined {
+  const trimmed = clampRange(range, rules.min, rules.max)
+  if (!trimmed) return undefined
+  const end = (iso: string) => !rules.isDisabled?.(iso)
+  if (!end(trimmed.start)) return undefined
+  return (
+    reshapeRange(trimmed.start, trimmed.end, {
+      allowed: end,
+      unavailable: rules.isDateUnavailable,
+      maximumDays: rules.maximumDays,
+    }) ?? undefined
+  )
+}

package/src/components/dock.ts

@@ -0,0 +1,31 @@
+/*
+ * Magnification curve for LpDock, apart from the component for testing.
+ */
+
+/**
+ * Size of an item whose centre is `distance` px from the pointer.
+ *
+ * A raised cosine: full size right under the pointer, falling smoothly to the
+ * resting size at `radius` and flat beyond it. A linear falloff has a corner
+ * at the peak, which shows as the hovered icon "ticking" between sizes while
+ * the pointer crosses it.
+ */
+export function dockSize(base: number, max: number, distance: number, radius: number): number {
+  const d = Math.abs(distance)
+  if (radius <= 0 || d >= radius) return base
+  return base + (max - base) * ((Math.cos((Math.PI * d) / radius) + 1) / 2)
+}
+
+/**
+ * Offset of a magnetic element toward a pointer at (`dx`, `dy`) px from its
+ * centre (LpMagnetic). Zero beyond `reach`; inside it the pull is a fraction
+ * of the distance that fades out toward the edge of the field, so the element
+ * lets go gradually instead of snapping back at an invisible line.
+ */
+export function magneticOffset(dx: number, dy: number, reach: number, strength: number): { x: number; y: number } {
+  const distance = Math.hypot(dx, dy)
+  if (reach <= 0 || distance >= reach) return { x: 0, y: 0 }
+  const falloff = 1 - distance / reach
+  const pull = Math.max(0, strength) * falloff
+  return { x: dx * pull, y: dy * pull }
+}

package/src/components/dropdown.ts

@@ -13,6 +13,9 @@
  * the right way when the list flips above the trigger.
  */
 
+
+import { staggerDelay } from "./reveal"
+
 /** Enter/exit animation for state-open panels (Select, Popover, Dropdown, …). */
 export const POPOVER_ANIM =
   "data-[state=open]:animate-[popover-in_140ms_var(--ease-emphasized)] " +
@@ -46,14 +49,23 @@ export const POPOVER_PANEL = PANEL_SURFACE + " " + POPOVER_ANIM
  * A selectable option row: layout, highlight state, and the staggered cascade.
  * Cascades downward by default and upward when the panel is flipped above the
  * trigger (group-data-[side=top]). Pair with an inline animationDelay for the
- * stagger. `flex` + gap are included; add justify/extra layout if needed.
+ * stagger (optionStagger). `flex` + gap are included; add justify/extra layout if needed.
  */
 export const OPTION_ITEM =
   "flex cursor-pointer items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm text-ink outline-none " +
-  "animate-[option-in_180ms_var(--ease-emphasized)_both] " +
-  "group-data-[side=top]:animate-[option-in-up_180ms_var(--ease-emphasized)_both] " +
+  "animate-[rise-in_180ms_var(--ease-emphasized)_both] [--rise:-6px] group-data-[side=top]:[--rise:6px] " +
   "data-[highlighted]:bg-brand-soft data-[highlighted]:text-brand"
 
+/**
+ * The cascade's delay for the option at `index`, as an inline style for the
+ * row: 22 ms apart, and from the 12th on every option arrives together, so a
+ * long list still lands at once. Select, Autocomplete, PhoneInput and
+ * TagsInput each had this formula written out.
+ */
+export const optionStagger = (index: number): { animationDelay: string } => ({
+  animationDelay: `${staggerDelay(index, 0, 22, 12)}ms`,
+})
+
 /**
  * Micro-animation for a close / clear "✕" icon: a quarter-turn on hover and a
  * dip on press. Put on the <LpIcon>, with `group` on its button. Shared by

package/src/components/fieldText.ts

@@ -0,0 +1,95 @@
+/*
+ * Pure text helpers behind the "fields and text" components: grouping a code
+ * for reading aloud (LpCodeDisplay, LpOtpInput) and cutting a string out of its middle (LpTruncate). Kept apart from the
+ * components so the rules can be tested without a DOM.
+ */
+
+import { ceilToSecond, formatTime } from "./timeSpan"
+
+/**
+ * Splits a code into the groups a person reads it in.
+ *
+ * `groups` is either one size for every group ("4" → `ABCD EFGH IJ`) or the
+ * exact sizes in order (`[3, 3]` → `123 456`), the latter for formats whose
+ * groups differ (a licence key `5-5-5-5`, a card `4-6-5`). Characters past
+ * the listed sizes form one last group rather than being dropped: a code is
+ * never shown shorter than it is. Without `groups`, short codes read best in
+ * threes (6 → 3+3, 8 → 4+4) and longer ones in fours.
+ */
+export function groupCode(code: string, groups?: number | number[]): string[] {
+  const chars = Array.from(code)
+  if (!chars.length) return []
+  const sizes = Array.isArray(groups)
+    ? groups.filter((n) => n > 0)
+    : [groups && groups > 0 ? groups : autoGroup(chars.length)]
+  const out: string[] = []
+  let at = 0
+  let i = 0
+  while (at < chars.length) {
+    const size = Array.isArray(groups) ? (sizes[i] ?? chars.length - at) : sizes[0]!
+    out.push(chars.slice(at, at + size).join(""))
+    at += size
+    i++
+  }
+  return out
+}
+
+function autoGroup(length: number): number {
+  if (length <= 4) return length
+  if (length === 6 || length === 9) return 3
+  if (length % 4 === 0) return 4
+  if (length % 3 === 0) return 3
+  return 4
+}
+
+/** Strips what people and copy-paste add to a code: spaces, dashes, dots. */
+export function normalizeCode(code: string): string {
+  return code.replace(/[\s\-_.·]/g, "")
+}
+
+/**
+ * A remaining time the way a countdown shows it: `0:42`, `4:05`, `1:02:03`.
+ * Rounded UP to the second, so "0:00" only ever appears once time is out.
+ *
+ * @deprecated LpCountdown's own formatting, kept for apps that imported it:
+ * use `formatTime(ceilToSecond(ms), "clock")` from the time-span helpers.
+ */
+export function formatRemaining(ms: number): string {
+  return formatTime(ceilToSecond(ms), "clock")
+}
+
+/**
+ * The longest `start…end` cut of `text` that `fits`, keeping both ends.
+ *
+ * For identifiers whose meaning sits at both ends: a path's root and file
+ * name, a hash's first and last characters people compare, a server id's
+ * prefix and number. An ellipsis at the end would throw away exactly the part
+ * that tells two of them apart.
+ *
+ * `tail` pins how many characters the end keeps (an extension, the last
+ * digits); without it both ends shrink evenly. `fits` is the measurement —
+ * the component passes a canvas measure of its own font — so the search
+ * itself stays a pure binary search over how many characters survive.
+ */
+export function middleTruncate(
+  text: string,
+  fits: (candidate: string) => boolean,
+  options: { tail?: number; ellipsis?: string } = {},
+): string {
+  const ellipsis = options.ellipsis ?? "…"
+  const chars = Array.from(text)
+  if (fits(text)) return text
+  const cut = (keep: number): string => {
+    const tail = options.tail !== undefined ? Math.min(options.tail, keep) : Math.floor(keep / 2)
+    const head = keep - tail
+    return chars.slice(0, head).join("") + ellipsis + (tail ? chars.slice(chars.length - tail).join("") : "")
+  }
+  let lo = 0
+  let hi = chars.length - 1
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2)
+    if (fits(cut(mid))) lo = mid
+    else hi = mid - 1
+  }
+  return cut(lo)
+}

package/src/components/fileTree.ts

@@ -5,6 +5,7 @@
  */
 
 import type { ContextMenuItemDef } from "./LpContextMenu.vue"
+import { formatBytes } from "./format"
 
 export interface FileNode {
   /** Stable identity — use the full path when you have one. */
@@ -119,33 +120,30 @@ export function sortNodes(nodes: FileNode[]): FileNode[] {
   })
 }
 
-/** Human-readable byte size — binary units, matching what file managers show. */
-export function formatSize(bytes: number): string {
-  if (!Number.isFinite(bytes) || bytes < 0) return "—"
-  if (bytes < 1024) return `${bytes} B`
-  const units = ["KB", "MB", "GB", "TB", "PB"]
-  let value = bytes / 1024
-  let i = 0
-  // Compare the value as it will print, so 1 048 575 B is "1.0 MB", not "1024 KB".
-  while (Math.round(value) >= 1024 && i < units.length - 1) {
-    value /= 1024
-    i++
-  }
-  // One decimal below 10 (2.4 MB), none above (240 MB) — keeps the column tidy.
-  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[i]}`
+/**
+ * Human-readable byte size for the size column (`formatBytes`, binary units,
+ * matching what file managers show). The decimal is kept even when it is zero
+ * ("1.0 MB") so the column holds one shape from row to row.
+ */
+export function formatSize(bytes: number, locale?: string): string {
+  return formatBytes(bytes, locale, { fixed: true })
 }
 
+const modifiedFormats = new Map<string, Intl.DateTimeFormat>()
+
 /** Short local date-time for the modified column; passes strings through. */
-export function formatModified(value: Date | number | string): string {
+export function formatModified(value: Date | number | string, locale?: string): string {
   if (typeof value === "string") return value
   const date = value instanceof Date ? value : new Date(value)
   if (Number.isNaN(date.getTime())) return "—"
-  return date.toLocaleString(undefined, {
-    day: "2-digit",
-    month: "short",
-    hour: "2-digit",
-    minute: "2-digit",
-  })
+  // Built once per locale: the column formats a date on every row.
+  const key = locale ?? ""
+  let format = modifiedFormats.get(key)
+  if (!format) {
+    format = new Intl.DateTimeFormat(locale, { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" })
+    modifiedFormats.set(key, format)
+  }
+  return format.format(date)
 }
 
 /**