@leavepulse/ui 0.93.2 → 0.94.0

package/src/components/LpMediaGallery.vue

@@ -115,7 +115,7 @@ function fill(template: string, n: number, total = 0): string {
  */
 function menuTitle(item: LightboxItem, i: number): string {
   if (isHidden(item)) return text.value.spoiler
-  return item.title || fill(text.value.image, i + 1, props.items.length)
+  return item.title || fill(text.value.image, i + 1, shown.value.length)
 }
 
 const emit = defineEmits<{
@@ -123,6 +123,8 @@ const emit = defineEmits<{
   (e: "select", item: LightboxItem, index: number): void
   /** A spoiler was uncovered. */
   (e: "reveal", item: LightboxItem): void
+  /** An image failed to load from both its thumbnail and its source and left the grid. */
+  (e: "broken", item: LightboxItem): void
   (e: "update:open", value: boolean): void
 }>()
 
@@ -142,12 +144,39 @@ watch(open, (value, was) => {
   if (!value && was) emit("update:open", false)
 })
 
+/*
+ * Images that failed to load. A thumbnail that fails falls back to the full
+ * source once; when that fails too the image leaves the grid and the lightbox
+ * and `broken` says so. A cell of grey with a broken-picture glyph tells the
+ * viewer nothing they can act on, and paging the lightbox onto it is worse.
+ * Keyed by `src`, like `revealed`, so a reordered set keeps the right ones out.
+ */
+const fellBack = ref(new Set<string>())
+const broken = ref(new Set<string>())
+const shown = computed(() =>
+  broken.value.size ? props.items.filter((item) => !broken.value.has(item.src)) : props.items,
+)
+
+function thumbOf(item: LightboxItem): string {
+  return item.thumb && !fellBack.value.has(item.src) ? item.thumb : item.src
+}
+
+function onImageError(item: LightboxItem) {
+  if (item.thumb && item.thumb !== item.src && !fellBack.value.has(item.src)) {
+    fellBack.value = new Set(fellBack.value).add(item.src)
+    return
+  }
+  if (broken.value.has(item.src)) return
+  broken.value = new Set(broken.value).add(item.src)
+  emit("broken", item)
+}
+
 // `max` counts what is SHOWN, so the badge reads "+N more" rather than "N
 // total". A set of 7 capped at 4 shows 4 cells, the last one badged +3.
 const visible = computed(() =>
-  props.max && props.items.length > props.max ? props.items.slice(0, props.max) : props.items,
+  props.max && shown.value.length > props.max ? shown.value.slice(0, props.max) : shown.value,
 )
-const hiddenCount = computed(() => Math.max(props.items.length - visible.value.length, 0))
+const hiddenCount = computed(() => Math.max(shown.value.length - visible.value.length, 0))
 
 /*
  * Column classes are written out rather than interpolated. Tailwind scans
@@ -231,11 +260,11 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
 )
 
 function activate(i: number) {
-  const item = props.items[i]
+  const item = shown.value[i]
   if (!item) return
   // `select` reports the position in the caller's own array, which is the one
   // they can do anything with — the lightbox's filtered index is internal.
-  emit("select", item, i)
+  emit("select", item, props.items.indexOf(item))
   if (!props.openable) return
   // Covered images are not in the lightbox's list, so the index has to be
   // translated into it.
@@ -285,17 +314,20 @@ function reveal(item: LightboxItem) {
  * pass through untouched, so opening the one you just uncovered still lands on
  * it.
  */
-const openItems = computed(() => props.items.filter((item) => !isHidden(item)))
+const openItems = computed(() => shown.value.filter((item) => !isHidden(item)))
 
 /** Index within `openItems` of the grid item at `i`, or -1 when it is covered. */
 function openIndexOf(i: number): number {
-  const item = props.items[i]
+  const item = shown.value[i]
   return item ? openItems.value.indexOf(item) : -1
 }
 
 defineExpose({
   /** Open the lightbox at an index — for a "view all" button outside the grid. */
-  openAt: (i: number) => activate(i),
+  openAt: (i: number) => {
+    const item = props.items[i]
+    if (item) activate(shown.value.indexOf(item))
+  },
   /** Uncover every spoiler in the set. */
   revealAll: () => {
     const next = new Set(revealed.value)
@@ -306,7 +338,7 @@ defineExpose({
 </script>
 
 <template>
-  <div v-if="!items.length">
+  <div v-if="!shown.length">
     <slot name="empty" />
   </div>
 
@@ -316,7 +348,7 @@ defineExpose({
       :key="item.src + i"
       :items="itemMenu?.(item, i) ?? []"
       :title="menuTitle(item, i)"
-      :title-image="isHidden(item) ? undefined : isVideoItem(item) ? item.poster ?? item.thumb : item.thumb || item.src"
+      :title-image="isHidden(item) ? undefined : isVideoItem(item) ? item.poster ?? item.thumb : thumbOf(item)"
       :subtitle="isHidden(item) ? undefined : item.description"
     >
     <button
@@ -370,10 +402,11 @@ defineExpose({
         />
         <img
           v-else
-          :src="item.thumb || item.src"
+          :src="thumbOf(item)"
           :alt="isHidden(item) ? '' : item.title || ''"
           loading="lazy"
           decoding="async"
+          @error="onImageError(item)"
           class="size-full object-cover transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] group-hover:scale-[1.03] motion-reduce:transition-none motion-reduce:group-hover:scale-100"
           :class="[
             isHidden(item)

package/src/components/LpRangeCalendar.vue

@@ -24,6 +24,7 @@ export type RangeChange = { via: "pick" | "drag" | "keyboard" }
  * "keyboard"), so a popover around the calendar can stay open while the user
  * fine-tunes instead of closing on the first nudge.
  */
+import { HOLD_TO_DRAG_MS, TOUCH_SLOP } from "../composables/gesture"
 import { type DateValue, getLocalTimeZone, today } from "@internationalized/date"
 import {
   type DateRange as RekaRange,
@@ -119,12 +120,10 @@ const root = ref<HTMLElement | null>(null)
  * Press-and-drag, the way a phone selects text. A press on either end of the
  * range drags that end; a press anywhere else starts a new range that follows
  * the pointer. A mouse or pen drags at once. A finger has to hold still for
- * HOLD_MS first, so an ordinary swipe still scrolls the page; after that the
+ * HOLD_TO_DRAG_MS first, so an ordinary swipe still scrolls the page; after that the
  * page stops scrolling and the finger selects. A press that never moves stays
  * an ordinary click for reka.
  */
-const HOLD_MS = 320
-const SLOP_PX = 8
 
 /** The day the range pivots around while the pointer moves. */
 let anchor: string | null = null
@@ -183,14 +182,14 @@ function onPointerDown(e: PointerEvent) {
     dragging.value = true
     draft.value = toReka({ start: day, end: day })
     navigator.vibrate?.(8)
-  }, HOLD_MS)
+  }, HOLD_TO_DRAG_MS)
 }
 
 function onPointerMove(e: PointerEvent) {
   if (anchor === null || e.pointerId !== pointerId) return
   if (!armed) {
     // Moved before the hold landed: that is a scroll, not a selection.
-    if (Math.hypot(e.clientX - startX, e.clientY - startY) > SLOP_PX) reset()
+    if (Math.hypot(e.clientX - startX, e.clientY - startY) > TOUCH_SLOP) reset()
     return
   }
   const day = cellAt(e.clientX, e.clientY)?.dataset.value

package/src/components/LpScrollStrip.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+/*
+ * A row that scrolls sideways and can be reached with any input: tabs, chips,
+ * branch pills, a filmstrip. The scrollbar is hidden, so useScrollStrip gives
+ * the mouse its way in (the wheel and drag-to-scroll), the edges with items
+ * beyond them fade, and on a device with a fine pointer a hover shows a
+ * previous and a next button on whichever side still has something to show.
+ * Touch keeps its native scrolling and any scroll snap the row sets.
+ *
+ * The default slot is the row's content; `contentClass` styles the scrolling
+ * row itself (gap, padding, snap), the class on the component its frame. The
+ * buttons are a pointer's shortcut and stay out of the tab order: the
+ * keyboard reaches the items, and the focused one is scrolled into view.
+ * Class and style go on the frame; any other attribute (an aria-label, a
+ * role, listeners) lands on the row, which is the element the items sit in.
+ */
+import { computed, ref, useAttrs } from "vue"
+import { useMediaQuery } from "../composables/useMediaQuery"
+import { useScrollStrip } from "../composables/useScrollStrip"
+import LpIcon from "./LpIcon.vue"
+
+defineOptions({ inheritAttrs: false })
+const attrs = useAttrs()
+const rowAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
+
+const props = withDefaults(
+  defineProps<{
+    /** Classes for the scrolling row (layout, gap, padding, snap). */
+    contentClass?: unknown
+    /** Fade the edges that have items beyond them. */
+    fade?: boolean
+    /** Previous/next buttons: `auto` shows them on hover where the pointer is fine (a mouse), true on any device, false never. */
+    buttons?: boolean | "auto"
+    /** Map a vertical wheel to sideways scrolling while the row can move. */
+    wheel?: boolean
+    /** Drag to scroll with a mouse or pen. */
+    drag?: boolean
+    /** The row element's tag. */
+    as?: string
+    /** Size to the content up to the parent's width (inline-flex), rather than fill the line. */
+    inline?: boolean
+  }>(),
+  { fade: true, buttons: "auto", wheel: true, drag: true, as: "div", inline: false },
+)
+
+const scroller = ref<HTMLElement | null>(null)
+const strip = useScrollStrip(scroller, { wheel: () => props.wheel, drag: () => props.drag })
+const fine = useMediaQuery("(hover: hover) and (pointer: fine)")
+const withButtons = computed(() => props.buttons === true || (props.buttons === "auto" && fine.value))
+
+defineExpose({ scroller, page: strip.page, scrollBy: strip.scrollBy, reveal: strip.reveal, measure: strip.measure, overflowing: strip.overflowing, atStart: strip.atStart, atEnd: strip.atEnd })
+
+const BUTTON =
+  "absolute top-1/2 z-10 grid size-7 -translate-y-1/2 place-items-center rounded-full border border-line bg-surface-raised text-muted shadow-sm outline-none transition-[opacity,color] duration-(--duration-fast) ease-(--ease-emphasized) hover:text-ink motion-reduce:transition-none"
+</script>
+
+<template>
+  <div class="group/strip relative min-w-0" :class="[inline ? 'inline-flex max-w-full' : 'flex', attrs.class]" :style="attrs.style as never" data-lp-strip>
+    <component
+      :is="as"
+      v-bind="rowAttrs"
+      ref="scroller"
+      class="lp-scrollbar-none flex min-w-0 flex-1 overflow-x-auto"
+      :class="[contentClass, fade ? 'lp-strip-fade' : '', strip.dragging.value ? 'cursor-grabbing select-none' : '']"
+      :data-lp-more-start="strip.overflowing.value && !strip.atStart.value ? '' : undefined"
+      :data-lp-more-end="strip.overflowing.value && !strip.atEnd.value ? '' : undefined"
+      data-lp-strip-row
+    >
+      <slot />
+    </component>
+    <template v-if="withButtons">
+      <button
+        v-for="side in ([-1, 1] as const)"
+        :key="side"
+        type="button"
+        tabindex="-1"
+        aria-hidden="true"
+        :class="[
+          BUTTON,
+          side < 0 ? 'left-0.5' : 'right-0.5',
+          strip.overflowing.value && !(side < 0 ? strip.atStart.value : strip.atEnd.value)
+            ? (buttons === true ? 'opacity-100' : 'opacity-0 group-hover/strip:opacity-100')
+            : 'pointer-events-none opacity-0',
+        ]"
+        :data-lp-strip-button="side < 0 ? 'prev' : 'next'"
+        @pointerdown.prevent
+        @click="strip.page(side)"
+      >
+        <LpIcon :name="side < 0 ? 'lucide:chevron-left' : 'lucide:chevron-right'" :size="16" />
+      </button>
+    </template>
+  </div>
+</template>

package/src/components/LpSidebar.vue

@@ -8,7 +8,7 @@
  * v-model. Each item can route via href (rendered as <a>) or just emit select.
  *
  * Phones: set `responsive` and the rail hides below the `mobileBreakpoint` and
- * is replaced by a swipeable LpDrawer (vaul-vue gives drag-to-close for free).
+ * is replaced by a swipeable LpDrawer (pulled in from the edge, swiped shut).
  * The host owns the burger button and binds v-model:open; selecting an item
  * auto-closes the drawer. With `responsive` off the component renders exactly
  * the static <nav> it always has — existing call sites are unaffected.
@@ -659,7 +659,7 @@ const searchField = computed(() => ({
     </div>
   </nav>
 
-  <!-- Mobile: same nav inside a swipeable drawer (drag-to-close via vaul). -->
+  <!-- Mobile: same nav inside a swipeable drawer (LpDrawer's edge pull and swipe to close). -->
   <LpDrawer
     v-if="responsive"
     :open="open"

package/src/components/LpTabs.vue

@@ -3,13 +3,13 @@ import { isHTMLElement } from "../composables/useView"
 import { usePaletteCommands, usePaletteScope } from "../composables/usePaletteCommands"
 import { Motion } from "motion-v"
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
-import { computed, nextTick, ref, useId, watch } from "vue"
+import { computed, nextTick, ref, useId, watch, type FunctionalComponent } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
 import { useStepHistory } from "../composables/useOverlayHistory"
-import { prefersReducedMotion } from "../composables/easing"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpSkeleton from "./LpSkeleton.vue"
 import LpTabFace from "./LpTabFace.vue"
+import LpScrollStrip from "./LpScrollStrip.vue"
 import { BOTTOM_BAR, BOTTOM_ITEM, BOTTOM_MARKER, pickTab } from "./tabs"
 
 export interface TabItem {
@@ -104,22 +104,31 @@ watch(
 )
 
 // A row wider than its container scrolls sideways (a phone, a narrow card)
-// instead of wrapping each label onto two lines; the active tab is brought
-// into view whenever it changes, including from outside.
+// instead of wrapping each label onto two lines. LpScrollStrip lets a mouse
+// reach the tabs off to the side (wheel, drag, edge buttons), and the active
+// tab is brought into view whenever it changes, including from outside.
+const strip = ref<InstanceType<typeof LpScrollStrip> | null>(null)
+const Passthrough: FunctionalComponent = (_, { slots }) => slots.default?.()
 const list = ref<{ $el: HTMLElement } | null>(null)
 watch(current, () => {
-  void nextTick(() => {
-    const row = list.value?.$el
-    const active = row?.querySelector<HTMLElement>('[data-state="active"]')
-    if (!row || !active || row.scrollWidth <= row.clientWidth) return
-    const start = active.offsetLeft - row.offsetLeft
-    const end = start + active.offsetWidth
-    if (start >= row.scrollLeft && end <= row.scrollLeft + row.clientWidth) return
-    const left = start < row.scrollLeft ? start : end - row.clientWidth
-    row.scrollTo({ left, behavior: prefersReducedMotion() ? "auto" : "smooth" })
-  })
+  void nextTick(() => strip.value?.reveal(list.value?.$el?.querySelector('[data-state="active"]')))
 })
 
+/*
+ * reka selects a tab on mousedown, so a press meant to drag the row would
+ * pick whichever tab it started on. Mouse picks wait for the click instead,
+ * which a drag swallows; the keyboard still selects as focus moves.
+ */
+function holdMousePick(event: MouseEvent) {
+  if (event.button !== 0 || event.ctrlKey || bottom.value) return
+  if (!isHTMLElement(event.target) || !event.target.closest('[role="tab"]')) return
+  event.stopPropagation()
+  event.preventDefault()
+}
+function clickPick(item: TabItem) {
+  if (!item.disabled && !bottom.value) select(item.value)
+}
+
 function show(value: string) {
   if (props.modelValue === undefined) current.value = value
   emit("update:modelValue", value)
@@ -195,18 +204,26 @@ usePaletteCommands(() => props.items.map(item => ({
     :model-value="current"
     @update:model-value="(v) => select(v as string)"
   >
+    <component
+      :is="bottom ? Passthrough : LpScrollStrip"
+      ref="strip"
+      v-bind="bottom ? {} : {
+        inline: !block,
+        class: variant === 'contained' ? 'rounded-control border border-line bg-surface-soft' : undefined,
+        contentClass: variant === 'contained' ? 'p-1' : undefined,
+      }"
+    >
     <TabsList
       ref="list"
       :aria-label="label"
       :class="bottom
         ? BOTTOM_BAR
         : [
-            'max-w-full gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-            block ? 'flex w-full' : 'inline-flex',
-            variant === 'contained' ? 'rounded-control border border-line bg-surface-soft p-1' : '',
+            'flex w-max min-w-full gap-1',
             variant === 'underline' ? 'border-b border-line' : '',
           ]"
       @pointerleave="hovered = null"
+      @mousedown.capture="holdMousePick"
     >
       <!-- Passthrough when the tab has no menu, so it keeps the native one. -->
       <LpContextMenu
@@ -233,6 +250,7 @@ usePaletteCommands(() => props.items.map(item => ({
         ]"
         @pointerenter="hoverFollow && !item.disabled && (hovered = item.value)"
         @pointerup="releaseFocusAfterPointer"
+        @click="clickPick(item)"
       >
         <!-- Active marker: a bar under the tab in "underline", over it in
              "bottom", a filled pill otherwise. All slide between tabs via the
@@ -268,6 +286,7 @@ usePaletteCommands(() => props.items.map(item => ({
         </span>
       </template>
     </TabsList>
+    </component>
 
     <!-- Animated panels: only rendered if a per-item #panel slot is provided.
          The Motion wrapper layout-animates its height so switching to a taller

package/src/components/LpVideoTrim.vue

@@ -29,6 +29,7 @@ export default { inheritAttrs: false }
  */
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue"
 import { startPointerDrag } from "../composables/pointerDrag"
+import { createGesture } from "../composables/useGesture"
 import { isHTMLElement, nodeWindow } from "../composables/realm"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
@@ -367,8 +368,6 @@ const markDigits = computed(() => tickStep(span.value, trackWidth.value) < 1)
 
 /* ---------- timeline pointers ---------- */
 
-const pointers = new Map<number, number>()
-let pinch: { distance: number; anchor: number } | null = null
 const pinching = ref(false)
 let edgeFrame = 0
 let lastX = 0
@@ -420,48 +419,41 @@ function edgeScroll() {
   })
 }
 
-function onTrackDown(event: PointerEvent) {
-  if (off.value || (event.pointerType === "mouse" && event.button !== 0)) return
-  ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
-  pointers.set(event.pointerId, event.clientX)
-  if (pointers.size === 2) {
+/* The track on the kit's gesture engine: a press scrubs at once, a drag keeps scrubbing, two fingers zoom about where they started. */
+let pinchDistance = 0
+let pinchAnchor = 0
+const track = createGesture({
+  threshold: 0,
+  onPress(event) {
+    if (off.value || (event.pointerType === "mouse" && event.button !== 0)) return false
+    event.preventDefault()
+    trackEl.value?.querySelector<HTMLElement>("[data-lp-playhead]")?.focus({ preventScroll: true })
+    pause()
+    scrubbing.value = true
+    lastX = event.clientX
+    seek(timeAt(event.clientX))
+  },
+  onDrag({ point }) {
+    if (!scrubbing.value) return
+    lastX = point.x
+    seek(timeAt(point.x))
+    edgeScroll()
+  },
+  onDragEnd: () => (scrubbing.value = false),
+  onTap: () => (scrubbing.value = false),
+  onPinchStart(pinch) {
     scrubbing.value = false
-    const [a, b] = [...pointers.values()] as [number, number]
-    pinch = { distance: Math.max(8, Math.abs(a - b)), anchor: timeAt((a + b) / 2) }
     pinching.value = true
-    return
-  }
-  if (pointers.size > 2) return
-  event.preventDefault()
-  trackEl.value?.querySelector<HTMLElement>("[data-lp-playhead]")?.focus({ preventScroll: true })
-  pause()
-  scrubbing.value = true
-  lastX = event.clientX
-  seek(timeAt(event.clientX))
-}
-function onTrackMove(event: PointerEvent) {
-  if (!pointers.has(event.pointerId)) return
-  pointers.set(event.pointerId, event.clientX)
-  if (pinch && pointers.size === 2) {
-    const [a, b] = [...pointers.values()] as [number, number]
-    const distance = Math.max(8, Math.abs(a - b))
-    zoomBy(distance / pinch.distance, pinch.anchor)
-    pinch.distance = distance
-    return
-  }
-  if (!scrubbing.value) return
-  lastX = event.clientX
-  seek(timeAt(event.clientX))
-  edgeScroll()
-}
-function onTrackUp(event: PointerEvent) {
-  pointers.delete(event.pointerId)
-  if (pointers.size < 2) {
-    pinch = null
-    pinching.value = false
-  }
-  if (!pointers.size) scrubbing.value = false
-}
+    pinchDistance = pinch.distance
+    pinchAnchor = timeAt(pinch.origin.x)
+  },
+  onPinch(pinch) {
+    zoomBy(pinch.distance / Math.max(8, pinchDistance), pinchAnchor)
+    pinchDistance = pinch.distance
+  },
+  onPinchEnd: () => (pinching.value = false),
+})
+onBeforeUnmount(track.dispose)
 
 /* The overview: press or drag to centre the view there. */
 function onOverviewDown(event: PointerEvent) {
@@ -948,10 +940,7 @@ const widestLeft = computed(() => leftOf(widestClipTime(limits.value.maxClip), w
         :class="off ? 'opacity-60' : 'cursor-text'"
         :aria-label="text.timeline"
         role="group"
-        @pointerdown="onTrackDown"
-        @pointermove="onTrackMove"
-        @pointerup="onTrackUp"
-        @pointercancel="onTrackUp"
+        v-bind="track.handlers"
       >
         <div class="absolute inset-0 overflow-hidden rounded-control">
           <TransitionGroup v-bind="FADE">