@leavepulse/ui 0.43.4 → 0.45.0

package/src/components/LpDateRangePicker.vue

@@ -0,0 +1,224 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * Range field + popover: presets on one side, a range calendar on the other.
+ * The model is `{ start, end }` of ISO days, like LpDatePicker's single day.
+ * Picking the second end or a preset fills the field and closes the popover.
+ * Two months sit side by side where there is room, one on a phone.
+ */
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui"
+import { computed, onBeforeUnmount, onMounted, ref, useAttrs } from "vue"
+import { useFieldControl } from "../composables/useField"
+import { useLabels } from "../composables/useLpConfig"
+import { mergeClass } from "../composables/useMergedClass"
+import {
+  clampRange,
+  type DateRange,
+  type DateRangePreset,
+  defaultRangePresets,
+  formatRange,
+  normalizeRange,
+  sameRange,
+} from "./dateRange"
+import { POPOVER_PANEL } from "./dropdown"
+import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
+import LpRangeCalendar, { type RangeChange } from "./LpRangeCalendar.vue"
+
+export interface DateRangePickerLabels extends Record<string, string> {
+  placeholder: string
+  clear: string
+  presets: string
+  today: string
+  last7: string
+  last30: string
+  thisMonth: string
+  lastMonth: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** Selected range (v-model). */
+    modelValue?: DateRange
+    placeholder?: string
+    min?: string
+    max?: string
+    isDisabled?: (iso: string) => boolean
+    isDateUnavailable?: (iso: string) => boolean
+    /** Longest allowed range, in days. */
+    maximumDays?: number
+    /** Shortcut ranges; an empty list hides them. Defaults to the built-in set. */
+    presets?: DateRangePreset[]
+    clearable?: boolean
+    disabled?: boolean
+    invalid?: boolean
+    size?: "sm" | "md" | "lg"
+    locale?: string
+    /** Intl format for the displayed ends. */
+    format?: Intl.DateTimeFormatOptions
+    labels?: Partial<DateRangePickerLabels>
+  }>(),
+  { size: "md" },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: DateRange | undefined): void
+}>()
+
+const text = useLabels<DateRangePickerLabels>(
+  "dateRangePicker",
+  {
+    placeholder: "Pick a date range",
+    clear: "Clear",
+    presets: "Presets",
+    today: "Today",
+    last7: "Last 7 days",
+    last30: "Last 30 days",
+    thisMonth: "This month",
+    lastMonth: "Last month",
+  },
+  () => props.labels,
+)
+
+const open = ref(false)
+const value = computed(() => normalizeRange(props.modelValue))
+const display = computed(() => (value.value ? formatRange(value.value, props.locale, props.format) : ""))
+
+const presetList = computed<DateRangePreset[]>(() => {
+  return props.presets ?? defaultRangePresets(text.value)
+})
+
+/*
+ * A range picked on the calendar keeps the popover open: the field already
+ * shows it, and the user can still pull either end before clicking away.
+ * Closing on the second click left no moment to adjust. A preset is a whole
+ * answer, so it closes.
+ */
+function pick(range: DateRange, change?: RangeChange) {
+  emit("update:modelValue", range)
+  if (!change) open.value = false
+}
+
+function pickPreset(preset: DateRangePreset) {
+  const range = clampRange(preset.range(), props.min, props.max)
+  if (range) pick(range)
+}
+
+function presetFits(preset: DateRangePreset): boolean {
+  return !!clampRange(preset.range(), props.min, props.max)
+}
+
+const wide = ref(false)
+let query: MediaQueryList | undefined
+const onQuery = () => {
+  wide.value = !!query?.matches
+}
+onMounted(() => {
+  query = window.matchMedia("(min-width: 640px)")
+  onQuery()
+  query.addEventListener("change", onQuery)
+})
+onBeforeUnmount(() => query?.removeEventListener("change", onQuery))
+
+const shellSize = {
+  sm: "h-(--size-control-sm) text-xs",
+  md: "h-(--size-control-md) text-sm",
+  lg: "h-(--size-control-lg) text-sm",
+}
+
+const attrs = useAttrs()
+const field = useFieldControl(() => ({
+  wrapped: false,
+  id: typeof attrs.id === "string" ? attrs.id : undefined,
+  invalid: props.invalid,
+  disabled: props.disabled,
+}))
+const showClear = computed(() => props.clearable && !!value.value && !field.value.disabled)
+</script>
+
+<template>
+  <div :class="mergeClass('relative w-full', attrs.class as string)" :style="attrs.style as never">
+    <PopoverRoot v-model:open="open">
+      <PopoverTrigger as-child>
+        <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="group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
+          :class="[
+            shellSize[size],
+            field.invalid ? 'border-danger focus-visible:ring-danger-soft' : 'border-line focus-visible:border-brand',
+          ]"
+        >
+          <LpIcon name="lucide:calendar-range" :size="16" class="shrink-0 text-muted" />
+          <LpRollingText
+            :value="display || placeholder || text.placeholder"
+            align="start"
+            class="min-w-0 flex-1"
+            :class="display ? '' : 'text-muted'"
+          />
+          <span v-if="showClear" 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>
+      </PopoverTrigger>
+      <PopoverPortal>
+        <PopoverContent
+          :side-offset="6"
+          align="start"
+          :collision-padding="8"
+          :class="[POPOVER_PANEL, 'z-(--z-popover) flex max-w-[calc(100vw-1rem)] flex-col rounded-card p-0 outline-none sm:flex-row']"
+        >
+          <div
+            v-if="presetList.length"
+            role="group"
+            :aria-label="text.presets"
+            class="flex gap-1 overflow-x-auto border-b border-line p-2 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-b-0"
+          >
+            <button
+              v-for="(preset, i) in presetList"
+              :key="`${i}:${preset.label}`"
+              type="button"
+              :disabled="!presetFits(preset)"
+              :aria-pressed="sameRange(value, preset.range())"
+              class="shrink-0 rounded-control px-2.5 py-1.5 text-left text-sm whitespace-nowrap text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-surface-soft hover:text-ink focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 aria-pressed:bg-brand-soft aria-pressed:text-ink"
+              @click="pickPreset(preset)"
+            >
+              {{ preset.label }}
+            </button>
+          </div>
+          <LpRangeCalendar
+            :model-value="value"
+            :min="min"
+            :max="max"
+            :is-disabled="isDisabled"
+            :is-date-unavailable="isDateUnavailable"
+            :maximum-days="maximumDays"
+            :months="wide ? 2 : 1"
+            :locale="locale"
+            class="border-0 bg-transparent"
+            @update:model-value="pick"
+          />
+        </PopoverContent>
+      </PopoverPortal>
+    </PopoverRoot>
+    <button
+      v-if="showClear"
+      type="button"
+      :aria-label="text.clear"
+      class="absolute top-1/2 right-[calc(0.75rem+15px+0.5rem)] flex -translate-y-1/2 items-center rounded-sm text-muted outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+      @click="emit('update:modelValue', undefined)"
+    >
+      <LpIcon name="lucide:x" :size="15" />
+    </button>
+  </div>
+</template>

package/src/components/LpDrawer.vue

@@ -1,8 +1,11 @@
 <script lang="ts">
-import { ref as sharedRef } from "vue"
+import { ref as sharedRef, type Ref } from "vue"
 
-// One pull at a time across every edge-open drawer on the page.
-const edgeOwner = sharedRef<symbol | null>(null)
+// One pull at a time across every edge-open drawer on the page, pinned to a
+// global symbol so a barrel and a deep import still share it.
+const EDGE_KEY = Symbol.for("@leavepulse/ui:drawer-edge-owner")
+type GlobalWithEdge = typeof globalThis & { [EDGE_KEY]?: Ref<symbol | null> }
+const edgeOwner = ((globalThis as GlobalWithEdge)[EDGE_KEY] ??= sharedRef<symbol | null>(null))
 </script>
 
 <script setup lang="ts">
@@ -32,6 +35,7 @@ import {
 import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { CLOSE_ICON } from "./dropdown"
 import { useGlass } from "../composables/useGlass"
+import { useLabels } from "../composables/useLpConfig"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import { anyModalOpen, useModalLayer } from "./modalDepth"
@@ -109,6 +113,9 @@ const props = withDefaults(
      * `provideGlass`, and without one it is off.
      */
     glass?: boolean
+    /** Accessible name for a drawer without a visible `title`. */
+    ariaLabel?: string
+    labels?: Partial<{ close: string }>
   }>(),
   {
     side: "right",
@@ -124,6 +131,7 @@ const props = withDefaults(
 )
 
 const frosted = useGlass(() => props.glass)
+const text = useLabels("drawer", { close: "Close" }, () => props.labels)
 
 const emit = defineEmits<{
   (e: "update:open", value: boolean): void
@@ -148,7 +156,8 @@ const SIZES = { sm: 22, md: 28, lg: 36, xl: 48 } // rem along the main axis
  * settings drawer) claimed those same rungs and the tie went to DOM order —
  * the drawer, portalled later on reopen, covered the dialog it had opened.
  */
-const { claim, release, layer } = useModalLayer()
+const contentRef = ref<{ $el: HTMLElement } | null>(null)
+const { claim, release, layer } = useModalLayer({ element: () => contentRef.value?.$el })
 watch(() => props.open, (open) => (open ? claim() : release()), { immediate: true })
 onBeforeUnmount(release)
 
@@ -179,36 +188,60 @@ const sizeStyle = computed(() => {
   return isHorizontal.value ? { width: len } : { height: len }
 })
 
+// Resolve a CSS length to px against the viewport. Anything it cannot read
+// (calc(), min()) comes back NaN for the caller to fall back on.
+function toPx(css: string): number {
+  const n = Number.parseFloat(css)
+  if (css.endsWith("rem")) {
+    const root = typeof document === "undefined" ? 16 : Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
+    return n * root
+  }
+  if (css.endsWith("vw")) return (n / 100) * window.innerWidth
+  if (css.endsWith("vh")) return (n / 100) * window.innerHeight
+  if (css.endsWith("px") || /^[\d.]+$/.test(css.trim())) return n
+  return Number.NaN
+}
+
 // Drag the inner edge to resize. For a right drawer the panel grows as the
-// pointer moves left (width = viewportRight − clientX); mirror for left.
+// pointer moves left (width = viewportRight − clientX); mirror for left. The
+// pointer is captured, so a release over an iframe or outside the window still
+// ends the drag, and a cancelled touch ends it too.
+let endResize: (() => void) | null = null
+
 function startResize(e: PointerEvent) {
   if (!props.resizable || !isHorizontal.value) return
   e.preventDefault()
+  endResize?.()
+  const grip = e.currentTarget instanceof HTMLElement ? e.currentTarget : null
+  grip?.setPointerCapture(e.pointerId)
   const fromRight = dir.value === "right"
-  const toPx = (css: string) => {
-    // Resolve rem/vw to px against the viewport for clamping.
-    if (css.endsWith("rem")) return Number.parseFloat(css) * 16
-    if (css.endsWith("vw")) return (Number.parseFloat(css) / 100) * window.innerWidth
-    return Number.parseFloat(css)
-  }
   const min = toPx(props.minSize)
   const max = toPx(props.maxSize)
   const onMove = (ev: PointerEvent) => {
+    if (ev.pointerId !== e.pointerId) return
     const raw = fromRight ? window.innerWidth - ev.clientX : ev.clientX
-    resizedPx.value = Math.max(min, Math.min(max, raw))
+    resizedPx.value = Math.max(Number.isNaN(min) ? 0 : min, Math.min(Number.isNaN(max) ? Infinity : max, raw))
   }
-  const onUp = () => {
+  const end = () => {
     window.removeEventListener("pointermove", onMove)
-    window.removeEventListener("pointerup", onUp)
+    window.removeEventListener("pointerup", end)
+    window.removeEventListener("pointercancel", end)
+    grip?.removeEventListener("lostpointercapture", end)
     document.body.style.userSelect = ""
     document.body.style.cursor = ""
+    endResize = null
   }
+  endResize = end
   document.body.style.userSelect = "none"
   document.body.style.cursor = "ew-resize"
   window.addEventListener("pointermove", onMove)
-  window.addEventListener("pointerup", onUp)
+  window.addEventListener("pointerup", end)
+  window.addEventListener("pointercancel", end)
+  grip?.addEventListener("lostpointercapture", end)
 }
 
+onBeforeUnmount(() => endResize?.())
+
 const slots = useSlots()
 const hasHeader = computed(() => Boolean(props.title || slots.title))
 
@@ -281,9 +314,9 @@ watch(
 // Resolve the panel's main-axis size in px to map drag distance → progress.
 function panelPx(): number {
   const vw = typeof window === "undefined" ? 0 : window.innerWidth
-  // mirror sizeStyle's min(94vw, SIZES[size]rem); 1rem≈16px.
-  const cap = props.width ? Number.parseFloat(props.width) : SIZES[props.size] * 16
-  return Math.min(vw * 0.94, Number.isFinite(cap) ? cap : SIZES[props.size] * 16)
+  const preset = toPx(`${SIZES[props.size]}rem`)
+  const cap = props.width ? toPx(props.width) : preset
+  return Math.min(vw * 0.94, Number.isFinite(cap) ? cap : preset)
 }
 
 function edgeEnabled(): boolean {
@@ -479,6 +512,8 @@ const previewStyle = computed(() => {
         :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested }"
       />
       <DrawerContent
+        ref="contentRef"
+        v-bind="description ? {} : { 'aria-describedby': undefined }"
         :class="contentClass"
         :style="[sizeStyle, { zIndex: layer.panel }]"
         :data-vaul-animate="handingOff || skipOpenSlide ? 'false' : undefined"
@@ -498,6 +533,8 @@ const previewStyle = computed(() => {
           />
         </div>
 
+        <DrawerTitle v-if="!hasHeader && ariaLabel" class="sr-only">{{ ariaLabel }}</DrawerTitle>
+
         <!-- Drag handle: a pill the user grabs; vaul wires the drag to it. -->
         <DrawerHandle
           v-if="showHandle"
@@ -519,7 +556,7 @@ const previewStyle = computed(() => {
           </div>
           <DrawerClose
             class="group flex shrink-0 items-center 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="Close"
+            :aria-label="text.close"
           >
             <LpIcon
               name="lucide:x"

package/src/components/LpDropdownMenu.vue

@@ -28,6 +28,7 @@ defineProps<{ items: MenuItem[] }>()
     </DropdownMenuTrigger>
     <DropdownMenuPortal>
       <DropdownMenuContent
+        :collision-padding="8"
         :side-offset="6"
         align="end"
         :class="[POPOVER_PANEL, 'z-(--z-popover) min-w-44 p-1 outline-none']"

package/src/components/LpDropzone.vue

@@ -23,7 +23,7 @@ export default { inheritAttrs: false }
  * invisible to a keyboard: nothing focusable, nothing that Enter activates, and
  * the file dialog unreachable without a mouse.
  */
-import { onBeforeUnmount, onMounted, ref } from "vue"
+import { onBeforeUnmount, onMounted, ref, watch } from "vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useReveal } from "../composables/useReveal"
 import LpIcon from "./LpIcon.vue"
@@ -168,17 +168,34 @@ function onPicked(event: Event) {
 }
 
 function windowPaste(event: ClipboardEvent) {
-  if (props.disabled) return
+  // Already taken by the zone itself, which the paste bubbled up from.
+  if (props.disabled || event.defaultPrevented) return
   const target = event.target as HTMLElement | null
   // A paste aimed at somewhere you can type belongs to that thing.
   if (target?.closest("input, textarea, [contenteditable]")) return
   onPaste(event)
 }
 
+let listening = false
+function listen(on: boolean) {
+  if (on === listening || typeof window === "undefined") return
+  listening = on
+  if (on) window.addEventListener("paste", windowPaste)
+  else window.removeEventListener("paste", windowPaste)
+}
+let mounted = false
 onMounted(() => {
-  if (props.pasteTarget) window.addEventListener("paste", windowPaste)
+  mounted = true
+  listen(props.pasteTarget)
+})
+watch(
+  () => props.pasteTarget,
+  (on) => mounted && listen(on),
+)
+onBeforeUnmount(() => {
+  mounted = false
+  listen(false)
 })
-onBeforeUnmount(() => window.removeEventListener("paste", windowPaste))
 
 defineExpose({ browse: () => input.value?.click() })
 

package/src/components/LpFieldNotice.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/*
+ * The floating note from useFieldNotice: anchored under the nearest
+ * `relative` box, over whatever sits below it (usually the hint), so it never
+ * moves the layout. It slides in, slides out, and nudges sideways when the
+ * same note is raised again while showing.
+ */
+import { ref, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
+import type { FieldNotice } from "../composables/useFieldNotice"
+import LpIcon from "./LpIcon.vue"
+
+const props = defineProps<{
+  notice: FieldNotice
+  id?: string
+}>()
+
+const el = ref<HTMLElement | null>(null)
+
+watch(
+  () => props.notice.seq.value,
+  (_, before) => {
+    if (before === undefined || !el.value || prefersReducedMotion()) return
+    el.value.animate(
+      [
+        { transform: "translateX(0)" },
+        { transform: "translateX(-3px)" },
+        { transform: "translateX(3px)" },
+        { transform: "translateX(0)" },
+      ],
+      { duration: 240, easing: "ease-out" },
+    )
+  },
+)
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition-[opacity,translate] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+    leave-active-class="transition-[opacity,translate] duration-fast ease-out motion-reduce:transition-none"
+    enter-from-class="-translate-y-1 opacity-0"
+    leave-to-class="-translate-y-1 opacity-0"
+  >
+    <div
+      v-if="notice.message.value"
+      :id="id"
+      ref="el"
+      role="status"
+      class="pointer-events-none absolute top-full left-0 z-20 mt-1.5 flex max-w-full items-center gap-1.5 rounded-control border px-2 py-1 text-xs shadow-sm"
+      :class="
+        notice.tone.value === 'danger'
+          ? 'border-danger/40 bg-surface-raised bg-[linear-gradient(var(--color-danger-soft),var(--color-danger-soft))] text-danger'
+          : 'border-line bg-surface-raised text-ink'
+      "
+    >
+      <LpIcon
+        :name="notice.tone.value === 'danger' ? 'lucide:circle-alert' : 'lucide:info'"
+        :size="13"
+        class="shrink-0"
+        :class="notice.tone.value === 'danger' ? '' : 'text-muted'"
+      />
+      <span class="truncate">{{ notice.message.value }}</span>
+    </div>
+  </Transition>
+</template>

package/src/components/LpFileTree.vue

@@ -38,10 +38,21 @@ import LpEmptyState from "./LpEmptyState.vue"
 import LpFileTreeNode from "./LpFileTreeNode.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { useLabels } from "../composables/useLpConfig"
 
 export type { FileNode } from "./fileTree"
 
 /** Rolled-up stats for the ticked entries — what a backup picker summarises. */
+export interface FileTreeLabels {
+  [key: string]: string
+  empty: string
+  emptyDescription: string
+  file: string
+  files: string
+  folder: string
+  folders: string
+}
+
 export interface FileTreeSummary {
   /** Ticked files (directories excluded — they're containers, not payload). */
   files: number
@@ -84,6 +95,7 @@ const props = withDefaults(
     /** Empty-state copy when `nodes` is empty. */
     emptyLabel?: string
     emptyDescription?: string
+    labels?: Partial<FileTreeLabels>
   }>(),
   {
     sort: true,
@@ -93,8 +105,6 @@ const props = withDefaults(
     showModified: false,
     loading: false,
     skeletonRows: 8,
-    emptyLabel: "No files",
-    emptyDescription: "This folder is empty.",
   },
 )
 
@@ -131,6 +141,19 @@ watch(
   },
 )
 
+const text = useLabels<FileTreeLabels>(
+  "fileTree",
+  {
+    empty: "No files",
+    emptyDescription: "This folder is empty.",
+    file: "file",
+    files: "files",
+    folder: "folder",
+    folders: "folders",
+  },
+  () => props.labels,
+)
+
 const loadingSet = computed(() => new Set(props.loadingIds ?? []))
 
 // Same controlled/uncontrolled deal as `expanded`.
@@ -229,7 +252,7 @@ const summary = computed<FileTreeSummary>(() => {
   }
 })
 
-watch(summary, (value) => emit("summary", value), { deep: false })
+watch(summary, (value) => emit("summary", value), { immediate: true })
 
 function setChecked(next: Set<string>) {
   checkedIds.value = next
@@ -350,6 +373,9 @@ function expand(node: FileNode) {
 
 function collapse(node: FileNode) {
   if (!openIds.value.has(node.id)) return
+  // A fetch that failed left `children` unset; collapsing lets the next open
+  // ask again instead of showing an empty folder forever.
+  if (node.children === undefined && !loadingSet.value.has(node.id)) requested.delete(node.id)
   const next = new Set(openIds.value)
   next.delete(node.id)
   setExpanded(next)
@@ -506,8 +532,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
   <LpEmptyState
     v-else-if="!roots.length"
     icon="lucide:folder-search"
-    :title="emptyLabel"
-    :description="emptyDescription"
+    :title="emptyLabel ?? text.empty"
+    :description="emptyDescription ?? text.emptyDescription"
   />
 
   <!-- h-full so the tree fills whatever box the caller gave it and the scroll
@@ -558,9 +584,9 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       class="shrink-0 border-t border-line px-2 py-1.5 text-xs text-muted"
     >
       <slot name="summary" v-bind="summary">
-        {{ summary.files }} {{ summary.files === 1 ? "file" : "files" }}<template
+        {{ summary.files }} {{ summary.files === 1 ? text.file : text.files }}<template
           v-if="summary.dirs"
-        >, {{ summary.dirs }} {{ summary.dirs === 1 ? "folder" : "folders" }}</template>
+        >, {{ summary.dirs }} {{ summary.dirs === 1 ? text.folder : text.folders }}</template>
         <template v-if="summary.bytes !== undefined"> · {{ summary.sizeLabel }}</template>
       </slot>
     </div>