@leavepulse/ui 0.93.3 → 0.94.1

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.
@@ -185,7 +185,7 @@ const props = withDefaults(
   }>(),
   {
     skeletonRows: 6,
-    skeletonHeader: true,
+    skeletonHeader: false,
     responsive: false,
     mobileBreakpoint: "md",
     divider: true,
@@ -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/LpSidebarNav.vue

@@ -56,7 +56,7 @@ const props = withDefaults(
     previewDelay?: number
     labels: { pinned: string; pin: string; unpin: string; expand: string }
   }>(),
-  { skeletonRows: 6, skeletonHeader: true, collapsedKeys: () => [], hoverFollow: false, pinned: () => [], previewDelay: 900 },
+  { skeletonRows: 6, skeletonHeader: false, collapsedKeys: () => [], hoverFollow: false, pinned: () => [], previewDelay: 900 },
 )
 
 const emit = defineEmits<{
@@ -212,6 +212,8 @@ function activate(item: SidebarItem) {
 }
 
 // The nav fills the remaining height with a fixed gap between groups; a short sidebar needs both under the consumer's control.
+const SKELETON_WIDTHS = ["55%", "70%", "45%", "62%", "50%", "68%"]
+
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "flex min-h-0 flex-1 flex-col gap-4",
 )
@@ -222,7 +224,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
        LpSkeleton wrapper so it pulses in phase with every other placeholder
        on the page and stops under reduced motion. -->
   <LpSkeleton v-if="loading"
-    :class="rootClass"
+    :class="[rootClass, 'overflow-hidden']"
     v-bind="rest">
     <div v-if="skeletonHeader" class="flex items-center gap-3 px-1">
       <div class="lp-skeleton-item size-10 shrink-0 rounded-pill bg-surface-soft" />
@@ -231,12 +233,20 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         <div class="lp-skeleton-item h-3 w-16 rounded-small bg-surface-soft/60" />
       </div>
     </div>
-    <div class="space-y-1">
-      <div
-        v-for="n in skeletonRows"
-        :key="n"
-        class="lp-skeleton-item h-9 rounded-control bg-surface-soft"
-      />
+    <!-- Rows in the shape of the items they stand in for: an icon and a label
+         of uneven width at the item's own height and padding, with a section
+         label after the first three. A run of full-width bars read as a list
+         of buttons, not as navigation. -->
+    <div class="flex flex-col gap-1">
+      <template v-for="n in skeletonRows" :key="n">
+        <div v-if="n === 4" class="px-3 pb-1 pt-3">
+          <div class="lp-skeleton-item h-2.5 w-20 rounded-small bg-surface-soft/60" />
+        </div>
+        <div class="flex h-9 items-center gap-3 px-3">
+          <div class="lp-skeleton-item size-4 shrink-0 rounded-small bg-surface-soft" />
+          <div class="lp-skeleton-item h-3 rounded-small bg-surface-soft" :style="{ width: SKELETON_WIDTHS[(n - 1) % SKELETON_WIDTHS.length] }" />
+        </div>
+      </template>
     </div>
   </LpSkeleton>
 

package/src/components/LpTabs.vue

@@ -3,13 +3,14 @@ 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, onMounted, ref, useId, watch, type FunctionalComponent } from "vue"
+import { useResizeObserver } from "../composables/useResizeObserver"
 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,21 +105,38 @@ 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, and
+// also on mount and when the row resizes: a tab picked by the address before
+// the first paint, or left beyond the edge by a narrower window, would
+// otherwise sit off-screen with nothing saying which section is open. Those
+// two jump; only a change the person can follow eases.
+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" })
-  })
-})
+function revealActive(smooth: boolean) {
+  if (bottom.value) return
+  strip.value?.reveal(list.value?.$el?.querySelector('[data-state="active"]'), { smooth })
+}
+watch(current, () => void nextTick(() => revealActive(true)))
+onMounted(() => requestAnimationFrame(() => revealActive(false)))
+useResizeObserver(() => strip.value?.scroller, () => revealActive(false))
+
+/*
+ * 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
@@ -195,18 +213,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 +259,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 +295,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">