@leavepulse/ui 0.93.3 → 0.94.0

package/src/composables/useScrollStrip.ts

@@ -0,0 +1,249 @@
+import { onBeforeUnmount, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from "vue"
+import { prefersReducedMotion } from "./easing"
+import { momentumDistance, wheelPixels } from "./gesture"
+import { isHTMLElement, nodeWindow } from "./realm"
+import { scrollToElement } from "./scroll"
+import { useGesture } from "./useGesture"
+
+/*
+ * A row that scrolls sideways, made reachable without a touch screen. A
+ * hidden scrollbar leaves a mouse with no way to the items off to the right,
+ * so:
+ *
+ * - The wheel scrolls the row while the row can still move that way. At
+ *   either end it does nothing, and the page scrolls on as usual; a sideways
+ *   wheel or touchpad is left to the browser. Notches ease on a frame loop of
+ *   our own, so quick notches add up instead of restarting.
+ * - A mouse or pen drags the row. A press that stays within a few pixels is
+ *   an ordinary click on the item under it; a drag past that swallows the
+ *   click, and a release while moving coasts on.
+ * - The focused item is kept in view, scrolling the row and nothing else
+ *   (scrollIntoView would move every scrollable ancestor too).
+ * - Touch keeps the browser's own scrolling and scroll snap; a snapping row
+ *   lets the browser snap the wheel and the end of a drag.
+ *
+ * `atStart`/`atEnd`/`overflowing` drive the edge fades and the buttons.
+ */
+
+export interface ScrollStripOptions {
+  /** Map a vertical wheel to sideways scrolling. Default true. */
+  wheel?: MaybeRefOrGetter<boolean | undefined>
+  /** Drag to scroll with a mouse or pen. Default true. */
+  drag?: MaybeRefOrGetter<boolean | undefined>
+  /** Room kept beside a focused item, so it clears the fade. Default 24. */
+  focusMargin?: number
+}
+
+export interface ScrollStrip {
+  overflowing: Ref<boolean>
+  atStart: Ref<boolean>
+  atEnd: Ref<boolean>
+  dragging: Ref<boolean>
+  /** Scroll most of a view's width toward the start (-1) or the end (1). */
+  page: (direction: -1 | 1) => void
+  /** Scroll by `px`, eased unless reduced motion asks otherwise. */
+  scrollBy: (px: number) => void
+  /** Bring `el` into view within the strip only (`center` puts it in the middle). */
+  reveal: (el: Element | null | undefined, options?: { smooth?: boolean; block?: "nearest" | "center" }) => void
+  /** Measure again (after content changed in a way nothing observed). */
+  measure: () => void
+}
+
+const PAGE_SHARE = 0.8
+
+export function useScrollStrip(target: MaybeRefOrGetter<HTMLElement | null | undefined>, options: ScrollStripOptions = {}): ScrollStrip {
+  const overflowing = ref(false)
+  const atStart = ref(true)
+  const atEnd = ref(true)
+  const el = () => {
+    const box = toValue(target)
+    return isHTMLElement(box) ? box : null
+  }
+
+  function measure() {
+    const box = el()
+    if (!box) return
+    const max = box.scrollWidth - box.clientWidth
+    const left = Math.abs(box.scrollLeft)
+    overflowing.value = max > 1
+    atStart.value = left <= 1
+    atEnd.value = left >= max - 1
+  }
+
+  const maxScroll = (box: HTMLElement) => Math.max(0, box.scrollWidth - box.clientWidth)
+  const snaps = (box: HTMLElement) => {
+    const type = nodeWindow(box).getComputedStyle(box).scrollSnapType
+    return !!type && type !== "none"
+  }
+
+  let frame = 0
+  let goal: number | null = null
+  let restoreBehavior: (() => void) | null = null
+
+  function stopEase() {
+    const box = el()
+    if (frame && box) nodeWindow(box).cancelAnimationFrame(frame)
+    frame = 0
+    goal = null
+    restoreBehavior?.()
+    restoreBehavior = null
+  }
+
+  function easeTo(box: HTMLElement, to: number) {
+    const win = nodeWindow(box)
+    goal = Math.max(0, Math.min(maxScroll(box), to))
+    if (prefersReducedMotion(win)) {
+      box.scrollLeft = goal
+      goal = null
+      return
+    }
+    if (frame) return
+    let previous = win.performance.now()
+    let position = box.scrollLeft
+    const behavior = box.style.scrollBehavior
+    box.style.scrollBehavior = "auto"
+    restoreBehavior = () => (box.style.scrollBehavior = behavior)
+    const done = () => {
+      frame = 0
+      goal = null
+      restoreBehavior?.()
+      restoreBehavior = null
+    }
+    const tick = (now: number) => {
+      if (goal === null) {
+        done()
+        return
+      }
+      const dt = Math.min(now - previous, 32)
+      previous = now
+      position += (goal - position) * (1 - Math.exp(-dt / 70))
+      if (Math.abs(goal - position) < 0.5) position = goal
+      box.scrollLeft = position
+      if (position === goal) {
+        done()
+        return
+      }
+      frame = win.requestAnimationFrame(tick)
+    }
+    frame = win.requestAnimationFrame(tick)
+  }
+
+  function scrollBy(px: number) {
+    const box = el()
+    if (!box) return
+    if (snaps(box)) {
+      box.scrollBy({ left: px, behavior: prefersReducedMotion(nodeWindow(box)) ? "auto" : "smooth" })
+      return
+    }
+    easeTo(box, (goal ?? box.scrollLeft) + px)
+  }
+
+  function page(direction: -1 | 1) {
+    const box = el()
+    if (box) scrollBy(direction * box.clientWidth * PAGE_SHARE)
+  }
+
+  function reveal(item: Element | null | undefined, { smooth = true, block = "nearest" }: { smooth?: boolean; block?: "nearest" | "center" } = {}) {
+    const box = el()
+    if (!box || !item || !box.contains(item)) return
+    stopEase()
+    const behavior = smooth && !prefersReducedMotion(nodeWindow(box)) ? "smooth" : "auto"
+    scrollToElement(item, { axis: "x", container: box, margin: options.focusMargin ?? 24, behavior, block })
+  }
+
+  function onWheel(e: WheelEvent) {
+    const box = el()
+    if (!box || toValue(options.wheel) === false || e.ctrlKey || e.defaultPrevented) return
+    if (Math.abs(e.deltaX) >= Math.abs(e.deltaY)) return
+    const max = maxScroll(box)
+    if (max <= 1) return
+    const px = wheelPixels(e.shiftKey ? e.deltaX || e.deltaY : e.deltaY, e.deltaMode, box.clientWidth)
+    const from = goal ?? box.scrollLeft
+    if ((px > 0 && from >= max - 1) || (px < 0 && from <= 1)) return
+    e.preventDefault()
+    const notch = e.deltaMode !== 0 || Math.abs(px) >= 50
+    if (notch) scrollBy(px)
+    else {
+      stopEase()
+      box.scrollLeft += px
+    }
+  }
+
+  function onFocusin(e: FocusEvent) {
+    const item = e.target
+    if (!isHTMLElement(item) || gesture.dragging.value) return
+    try {
+      if (!item.matches(":focus-visible")) return
+    } catch {}
+    reveal(item)
+  }
+
+  let snapType: string | null = null
+  const gesture = useGesture(el, {
+    pointerTypes: ["mouse", "pen"],
+    enabled: () => toValue(options.drag) !== false && overflowing.value,
+    onDragStart() {
+      const box = el()
+      if (!box) return
+      stopEase()
+      if (snaps(box)) {
+        snapType = box.style.scrollSnapType
+        box.style.scrollSnapType = "none"
+      }
+      box.style.scrollBehavior = "auto"
+    },
+    onDrag({ delta }) {
+      const box = el()
+      if (box) box.scrollLeft -= delta.x
+    },
+    onDragEnd({ velocity, cancelled }) {
+      const box = el()
+      if (!box) return
+      box.style.scrollBehavior = ""
+      const travel = cancelled ? 0 : -momentumDistance(velocity.x)
+      if (snapType !== null) {
+        box.style.scrollSnapType = snapType
+        snapType = null
+        box.scrollBy({ left: travel, behavior: prefersReducedMotion(nodeWindow(box)) ? "auto" : "smooth" })
+        return
+      }
+      if (Math.abs(travel) > 4) easeTo(box, box.scrollLeft + travel)
+    },
+  })
+
+  watch(
+    () => el(),
+    (box, _, onCleanup) => {
+      if (!box) return
+      const win = nodeWindow(box)
+      const resize = new win.ResizeObserver(measure)
+      const observeAll = () => {
+        resize.disconnect()
+        resize.observe(box)
+        for (const child of Array.from(box.children)) resize.observe(child)
+      }
+      const mutations = new win.MutationObserver(() => {
+        observeAll()
+        measure()
+      })
+      observeAll()
+      mutations.observe(box, { childList: true })
+      box.addEventListener("scroll", measure, { passive: true })
+      box.addEventListener("wheel", onWheel, { passive: false })
+      box.addEventListener("focusin", onFocusin)
+      measure()
+      onCleanup(() => {
+        resize.disconnect()
+        mutations.disconnect()
+        box.removeEventListener("scroll", measure)
+        box.removeEventListener("wheel", onWheel)
+        box.removeEventListener("focusin", onFocusin)
+        stopEase()
+      })
+    },
+    { immediate: true, flush: "post" },
+  )
+  onBeforeUnmount(stopEase)
+
+  return { overflowing, atStart, atEnd, dragging: gesture.dragging, page, scrollBy, reveal, measure }
+}

package/src/composables/useTouchHold.ts

@@ -1,19 +1,16 @@
 import { onBeforeUnmount } from "vue"
+import { createGesture } from "./useGesture"
 
 /*
  * Press-and-hold on a touch screen, for things a pointer reaches by hovering
- * (a hover card, a tooltip). A hold that drifts is a scroll, not a hold, so
- * moving past a few pixels cancels it. Once it has fired, the click the finger
- * produces on lifting is swallowed: the reader asked for the preview, not for
- * the link or button under it. A mouse or pen is left alone.
+ * (a hover card, a tooltip). The kit's gesture engine's long press, limited to
+ * touch: a hold that drifts past the slop is a scroll, not a hold; once it has
+ * fired, the click the finger produces on lifting is swallowed (the reader
+ * asked for the preview, not for the link or button under it), and the
+ * system's own long-press menu is kept away. A mouse or pen is left alone.
  *
- * The handlers go on the trigger: pointerdown, pointermove, pointerup,
- * pointercancel, click (capture) and contextmenu.
+ * The handlers go on the trigger.
  */
-const SLOP = 8
-/* A long press may produce no click at all; past this the next click is the user's own. */
-const CLICK_AFTER_RELEASE_MS = 350
-
 export interface TouchHoldOptions {
   /** Whether a touch press may start a hold now. */
   enabled: () => boolean
@@ -23,70 +20,15 @@ export interface TouchHoldOptions {
 }
 
 export function useTouchHold(options: TouchHoldOptions) {
-  let timer = 0
-  /* The finger the hold belongs to: a second one must not move or end it. */
-  let finger: number | null = null
-  let start = { x: 0, y: 0 }
-  let held = false
-
-  function stop() {
-    window.clearTimeout(timer)
-    timer = 0
-  }
-
-  function onPointerDown(event: PointerEvent) {
-    // Any new press starts over: on a hybrid laptop the mouse click after a
-    // hold must not be taken for that hold's own click.
-    if (timer && event.pointerId !== finger) return
-    held = false
-    if (event.pointerType !== "touch" || !options.enabled()) return
-    finger = event.pointerId
-    start = { x: event.clientX, y: event.clientY }
-    stop()
-    timer = window.setTimeout(() => {
-      timer = 0
-      held = true
-      options.onHold()
-    }, options.delay())
-  }
-
-  function onPointerMove(event: PointerEvent) {
-    if (!timer || event.pointerId !== finger) return
-    if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > SLOP) stop()
-  }
-
-  function onPointerUp(event: PointerEvent) {
-    if (finger !== null && event.pointerId !== finger) return
-    finger = null
-    stop()
-    if (held) window.setTimeout(() => (held = false), CLICK_AFTER_RELEASE_MS)
-  }
-
-  // A cancelled press produces no click, so there is nothing left to swallow.
-  function onPointerCancel(event?: PointerEvent) {
-    if (event && finger !== null && event.pointerId !== finger) return
-    finger = null
-    stop()
-    held = false
-  }
-
-  function onClickCapture(event: MouseEvent) {
-    if (!held) return
-    held = false
-    event.preventDefault()
-    event.stopImmediatePropagation()
-  }
-
-  // A long press would otherwise also bring up the system's own menu.
-  function onContextMenu(event: Event) {
-    if (timer || held) event.preventDefault()
-  }
-
-  onBeforeUnmount(stop)
-
+  const gesture = createGesture({
+    enabled: options.enabled,
+    pointerTypes: ["touch"],
+    longPress: { delay: options.delay, handler: () => options.onHold() },
+  })
+  onBeforeUnmount(gesture.dispose)
   return {
     /** Drops a hold in progress, as if the finger had been lifted off the screen. */
-    cancel: () => onPointerCancel(),
-    handlers: { onPointerdown: onPointerDown, onPointermove: onPointerMove, onPointerup: onPointerUp, onPointercancel: onPointerCancel, onClickCapture, onContextmenu: onContextMenu },
+    cancel: gesture.cancel,
+    handlers: gesture.handlers,
   }
 }

package/src/composables/useZoomPan.ts

@@ -1,4 +1,5 @@
 import { clamp } from "./clamp"
+import { distance, pinchFrame } from "./gesture"
 import { computed, ref, toValue, type ComputedRef, type CSSProperties, type MaybeRefOrGetter, type Ref } from "vue"
 
 /*
@@ -130,15 +131,11 @@ export function useZoomPan(options: UseZoomPanOptions = {}): UseZoomPan {
     zoomAbout(scale.value * (e.deltaY < 0 ? step : 1 / step), point.x, point.y)
   }
 
-  function distance(a: { x: number; y: number }, b: { x: number; y: number }) {
-    return Math.hypot(a.x - b.x, a.y - b.y)
-  }
-
   function onPointerDown(e: PointerEvent) {
     pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
 
     if (pointers.size === 2) {
-      const [a, b] = [...pointers.values()]
+      const [a, b] = [...pointers.values()] as [{ x: number; y: number }, { x: number; y: number }]
       pinchStartDistance = distance(a, b)
       pinchStartScale = scale.value
       panning.value = false
@@ -159,10 +156,10 @@ export function useZoomPan(options: UseZoomPanOptions = {}): UseZoomPan {
     pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
 
     if (pointers.size === 2 && pinchStartDistance > 0) {
-      const [a, b] = [...pointers.values()]
-      const mid = { clientX: (a.x + b.x) / 2, clientY: (a.y + b.y) / 2 }
-      const point = relative(mid)
-      zoomAbout(pinchStartScale * (distance(a, b) / pinchStartDistance), point.x, point.y)
+      const [a, b] = [...pointers.values()] as [{ x: number; y: number }, { x: number; y: number }]
+      const pinch = pinchFrame(a, b, pinchStartDistance)
+      const point = relative({ clientX: pinch.origin.x, clientY: pinch.origin.y })
+      zoomAbout(pinchStartScale * pinch.scale, point.x, point.y)
       return
     }
 

package/src/index.ts

@@ -216,6 +216,7 @@ export { default as LpRadioGroup } from "./components/LpRadioGroup.vue"
 export type { RadioOption } from "./components/LpRadioGroup.vue"
 export { default as LpRollingText } from "./components/LpRollingText.vue"
 export { default as LpScrollArea } from "./components/LpScrollArea.vue"
+export { default as LpScrollStrip } from "./components/LpScrollStrip.vue"
 export { default as LpPageScrollbar } from "./components/LpPageScrollbar.vue"
 export { default as LpSegmented } from "./components/LpSegmented.vue"
 export type { SegmentedOption } from "./components/LpSegmented.vue"
@@ -496,6 +497,30 @@ export { useTilt } from "./composables/useTilt"
 export type { UseTilt, UseTiltOptions } from "./composables/useTilt"
 export { useZoomPan } from "./composables/useZoomPan"
 export type { UseZoomPan, UseZoomPanOptions } from "./composables/useZoomPan"
+export { createGesture, glide, useGesture } from "./composables/useGesture"
+export type { Gesture, GestureEnd, GestureOptions, GesturePinch, GestureState, Glide } from "./composables/useGesture"
+export {
+  createDragSession,
+  createVelocityTracker,
+  FLICK_VELOCITY,
+  HOLD_TO_DRAG_MS,
+  LONG_PRESS_MS,
+  lockAxis,
+  MOUSE_SLOP,
+  momentumDistance,
+  pageAfterSwipe,
+  pinchFrame,
+  rubberBand,
+  rubberClamp,
+  shouldDismiss,
+  slopFor,
+  swipeDirection,
+  TOUCH_SLOP,
+  wheelPixels,
+} from "./composables/gesture"
+export type { DismissOptions, DragFrame, DragSession, DragSessionOptions, GestureAxis, GesturePoint, PageSwipeOptions, PinchFrame, SwipeOptions, VelocityTracker } from "./composables/gesture"
+export { useScrollStrip } from "./composables/useScrollStrip"
+export type { ScrollStrip, ScrollStripOptions } from "./composables/useScrollStrip"
 export { useToast } from "./composables/useToast"
 export type {
   ToastAction,
@@ -572,6 +597,8 @@ export type { PipelineStep, StepStatus } from "./components/pipeline"
 export { default as LpLoader } from "./components/LpLoader.vue"
 export type { LoaderLabels, LoaderSize, LoaderTone, LoaderVariant } from "./components/LpLoader.vue"
 export { useLoadingGate } from "./composables/useLoadingGate"
+export { useAppUpdate } from "./composables/useAppUpdate"
+export type { AppUpdate, AppUpdateOptions } from "./composables/useAppUpdate"
 export type { LoadingGateOptions } from "./composables/useLoadingGate"
 export { useNow } from "./composables/useNow"
 export type { UseNowOptions } from "./composables/useNow"

package/src/tokens/effects.css

@@ -149,3 +149,43 @@
     display: none;
   }
 }
+
+/*
+ * Edge fades for a sideways strip (LpScrollStrip, useScrollStrip): an edge
+ * with items beyond it fades out, an edge at the end of the row stays crisp.
+ * The widths are registered so a fade grows and leaves rather than switching;
+ * without @property it switches.
+ */
+@property --lp-strip-fade-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --lp-strip-fade-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+.lp-strip-fade {
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--lp-strip-fade-start), #000 calc(100% - var(--lp-strip-fade-end)), transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0, #000 var(--lp-strip-fade-start), #000 calc(100% - var(--lp-strip-fade-end)), transparent 100%);
+  transition:
+    --lp-strip-fade-start var(--duration-fast) var(--ease-emphasized),
+    --lp-strip-fade-end var(--duration-fast) var(--ease-emphasized);
+}
+
+.lp-strip-fade[data-lp-more-start] {
+  --lp-strip-fade-start: var(--lp-strip-fade, 28px);
+}
+
+.lp-strip-fade[data-lp-more-end] {
+  --lp-strip-fade-end: var(--lp-strip-fade, 28px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lp-strip-fade {
+    transition: none;
+  }
+}

package/dist/assets/LpTabs-Bh7a-Bdl.css

@@ -1,18 +0,0 @@
-
-.lp-tab-badge-enter-active[data-v-ef828291],
-.lp-tab-badge-leave-active[data-v-ef828291] {
-  transition:
-    opacity var(--duration-fast) var(--ease-emphasized),
-    transform var(--duration-fast) var(--ease-emphasized);
-}
-.lp-tab-badge-enter-from[data-v-ef828291],
-.lp-tab-badge-leave-to[data-v-ef828291] {
-  opacity: 0;
-  transform: scale(0.6);
-}
-@media (prefers-reduced-motion: reduce) {
-.lp-tab-badge-enter-active[data-v-ef828291],
-  .lp-tab-badge-leave-active[data-v-ef828291] {
-    transition: none;
-}
-}

package/dist/assets/LpVideoTrim-CMoUw3dJ.css

@@ -1,8 +0,0 @@
-
-.lp-trim-still-in[data-v-ba15829e] >  canvas:not([data-lp-stand-in]) {
-  animation: lp-trim-still-ba15829e var(--duration-medium) var(--ease-emphasized);
-}
-@keyframes lp-trim-still-ba15829e {
-from { opacity: 0;
-}
-}

package/dist/chunks/AppShellContextNav-C6Ho2mof.js

@@ -1,49 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, withCtx, createTextVNode, toDisplayString } from "vue";
-import { useLinkComponent } from "../composables/useLpConfig.js";
-import { resolveLink } from "../components/link.js";
-const _hoisted_1 = ["aria-label"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "AppShellContextNav",
-  props: {
-    items: {},
-    isActive: { type: Function },
-    label: {}
-  },
-  emits: ["select"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const linkComponent = useLinkComponent();
-    function rowOf(item) {
-      const link = item.disabled ? null : resolveLink(linkComponent.value, { to: item.to, href: item.href });
-      return link ?? { is: "button", props: { type: "button", disabled: item.disabled || void 0 } };
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("nav", {
-        "aria-label": props.label,
-        class: "flex shrink-0 gap-1 overflow-x-auto border-b border-line bg-surface px-4 py-1.5 lp-scrollbar-none"
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
-          return openBlock(), createBlock(resolveDynamicComponent(rowOf(item).is), mergeProps({
-            key: item.id
-          }, { ref_for: true }, rowOf(item).props, {
-            "aria-current": __props.isActive(item) ? "page" : void 0,
-            class: [
-              "shrink-0 rounded-control px-2.5 py-1 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring",
-              item.disabled ? "cursor-not-allowed opacity-45" : __props.isActive(item) ? "bg-surface-soft text-ink" : "text-muted hover:text-ink"
-            ],
-            onClick: ($event) => emit("select", item)
-          }), {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(item.label), 1)
-            ]),
-            _: 2
-          }, 1040, ["aria-current", "class", "onClick"]);
-        }), 128))
-      ], 8, _hoisted_1);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};