@leavepulse/ui 0.93.3 → 0.94.0

package/dist/components/LpScrollStrip.vue.d.ts

@@ -0,0 +1,48 @@
+type __VLS_Props = {
+    /** 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;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    scroller: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    page: (direction: -1 | 1) => void;
+    scrollBy: (px: number) => void;
+    reveal: (el: Element | null | undefined, options?: {
+        smooth?: boolean;
+        block?: "nearest" | "center";
+    }) => void;
+    measure: () => void;
+    overflowing: import("vue").Ref<boolean, boolean>;
+    atStart: import("vue").Ref<boolean, boolean>;
+    atEnd: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    drag: boolean;
+    wheel: boolean;
+    inline: boolean;
+    as: string;
+    fade: boolean;
+    buttons: boolean | "auto";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LpScrollStrip.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpScrollStrip-D4tsOfAQ.js";
+export {
+  _sfc_main as default
+};

package/dist/components/LpSidebar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebar-DQtCYlT4.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-BIhusppV.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTabs.vue.d.ts

@@ -61,13 +61,13 @@ type __VLS_Props = {
      */
     history?: boolean;
 };
-declare var __VLS_67: {
+declare var __VLS_77: {
     value: string;
-}, __VLS_69: {};
+}, __VLS_79: {};
 type __VLS_Slots = {} & {
-    panel?: (props: typeof __VLS_67) => any;
+    panel?: (props: typeof __VLS_77) => any;
 } & {
-    default?: (props: typeof __VLS_69) => any;
+    default?: (props: typeof __VLS_79) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;

package/dist/components/LpTabs.vue.js

@@ -1,17 +1,17 @@
-import { defineComponent, computed, ref, watch, nextTick, useId, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from "vue";
+import { defineComponent, computed, ref, watch, nextTick, useId, openBlock, createBlock, unref, withCtx, resolveDynamicComponent, mergeProps, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from "vue";
 import { isHTMLElement } from "../composables/realm.js";
 import { usePaletteScope, usePaletteCommands } from "../composables/usePaletteCommands.js";
 import { Motion } from "motion-v";
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "reka-ui";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { useStepHistory } from "../composables/useOverlayHistory.js";
-import { prefersReducedMotion } from "../composables/easing.js";
-import { _ as _sfc_main$1 } from "../chunks/LpContextMenu-DEFirphS.js";
-import { _ as _sfc_main$3 } from "../chunks/LpSkeleton-leTl53V9.js";
-import { _ as _sfc_main$2 } from "../chunks/LpTabFace-uoZgD_SN.js";
+import { _ as _sfc_main$2 } from "../chunks/LpContextMenu-DEFirphS.js";
+import { _ as _sfc_main$4 } from "../chunks/LpSkeleton-leTl53V9.js";
+import { _ as _sfc_main$3 } from "../chunks/LpTabFace-uoZgD_SN.js";
+import { _ as _sfc_main$1 } from "../chunks/LpScrollStrip-D4tsOfAQ.js";
 import { pickTab, BOTTOM_BAR, BOTTOM_ITEM, BOTTOM_MARKER } from "./tabs.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTabs-Bh7a-Bdl.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/LpTabs-D7EyG21l.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTabs",
   props: {
     modelValue: {},
@@ -44,19 +44,21 @@ import '../assets/LpTabs-Bh7a-Bdl.css';const _sfc_main = /* @__PURE__ */ defineC
       },
       { deep: true }
     );
+    const strip = ref(null);
+    const Passthrough = (_, { slots }) => slots.default?.();
     const list = ref(null);
     watch(current, () => {
-      void nextTick(() => {
-        const row = list.value?.$el;
-        const active = row?.querySelector('[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"]')));
     });
+    function holdMousePick(event) {
+      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) {
+      if (!item.disabled && !bottom.value) select(item.value);
+    }
     function show(value) {
       if (props.modelValue === void 0) current.value = value;
       emit("update:modelValue", value);
@@ -99,86 +101,98 @@ import '../assets/LpTabs-Bh7a-Bdl.css';const _sfc_main = /* @__PURE__ */ defineC
         "onUpdate:modelValue": _cache[1] || (_cache[1] = (v) => select(v))
       }, {
         default: withCtx(() => [
-          createVNode(unref(TabsList), {
-            ref_key: "list",
-            ref: list,
-            "aria-label": __props.label,
-            class: normalizeClass(bottom.value ? unref(BOTTOM_BAR) : [
-              "max-w-full gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-              __props.block ? "flex w-full" : "inline-flex",
-              __props.variant === "contained" ? "rounded-control border border-line bg-surface-soft p-1" : "",
-              __props.variant === "underline" ? "border-b border-line" : ""
-            ]),
-            onPointerleave: _cache[0] || (_cache[0] = ($event) => hovered.value = null)
-          }, {
+          (openBlock(), createBlock(resolveDynamicComponent(bottom.value ? Passthrough : _sfc_main$1), mergeProps({
+            ref_key: "strip",
+            ref: strip
+          }, bottom.value ? {} : {
+            inline: !__props.block,
+            class: __props.variant === "contained" ? "rounded-control border border-line bg-surface-soft" : void 0,
+            contentClass: __props.variant === "contained" ? "p-1" : void 0
+          }), {
             default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
-                return openBlock(), createBlock(_sfc_main$1, {
-                  key: item.value,
-                  items: item.menu ?? [],
-                  title: item.label,
-                  "title-icon": item.icon
-                }, {
-                  default: withCtx(() => [
-                    createVNode(unref(TabsTrigger), {
-                      value: item.value,
-                      disabled: item.disabled,
-                      title: __props.compact && item.icon && !bottom.value ? item.label : void 0,
-                      class: normalizeClass(["relative inline-flex items-center justify-center outline-none transition-[color,opacity] duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45", [
-                        bottom.value ? unref(BOTTOM_ITEM) : "shrink-0 gap-1.5 whitespace-nowrap text-sm",
-                        __props.block && !bottom.value ? "flex-1" : "",
-                        __props.variant === "underline" ? "rounded-t-inner px-3 pt-1.5 pb-2" : "",
-                        __props.variant === "contained" || __props.variant === "plain" ? "rounded-inner px-3 py-1.5" : "",
-                        __props.accent ? "data-[state=active]:text-brand" : "data-[state=active]:text-ink",
-                        hovered.value === item.value && !bottom.value ? "text-ink" : !__props.hoverFollow && !bottom.value ? "text-muted hover:text-ink" : "text-muted"
-                      ]]),
-                      onPointerenter: ($event) => __props.hoverFollow && !item.disabled && (hovered.value = item.value),
-                      onPointerup: releaseFocusAfterPointer
+              createVNode(unref(TabsList), {
+                ref_key: "list",
+                ref: list,
+                "aria-label": __props.label,
+                class: normalizeClass(bottom.value ? unref(BOTTOM_BAR) : [
+                  "flex w-max min-w-full gap-1",
+                  __props.variant === "underline" ? "border-b border-line" : ""
+                ]),
+                onPointerleave: _cache[0] || (_cache[0] = ($event) => hovered.value = null),
+                onMousedownCapture: holdMousePick
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+                    return openBlock(), createBlock(_sfc_main$2, {
+                      key: item.value,
+                      items: item.menu ?? [],
+                      title: item.label,
+                      "title-icon": item.icon
                     }, {
                       default: withCtx(() => [
-                        pillUnder(item.value, current.value) ? (openBlock(), createBlock(unref(Motion), {
-                          key: 0,
-                          "layout-id": pillId,
-                          transition: unref(pillTransition),
-                          class: normalizeClass(__props.variant === "underline" ? [
-                            "absolute inset-x-0 -bottom-px z-0 h-0.5 rounded-full",
-                            __props.accent ? "bg-brand" : "bg-ink"
-                          ] : bottom.value ? [unref(BOTTOM_MARKER), __props.accent ? "bg-brand" : "bg-ink"] : [
-                            "absolute inset-0 z-0 rounded-inner shadow-sm",
-                            __props.accent ? "border border-brand/35 bg-brand/12" : "border border-line bg-surface-raised"
-                          ])
-                        }, null, 8, ["transition", "class"])) : createCommentVNode("", true),
-                        createVNode(_sfc_main$2, {
-                          item,
-                          bottom: bottom.value,
-                          compact: __props.compact,
-                          active: current.value === item.value
-                        }, null, 8, ["item", "bottom", "compact", "active"])
+                        createVNode(unref(TabsTrigger), {
+                          value: item.value,
+                          disabled: item.disabled,
+                          title: __props.compact && item.icon && !bottom.value ? item.label : void 0,
+                          class: normalizeClass(["relative inline-flex items-center justify-center outline-none transition-[color,opacity] duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45", [
+                            bottom.value ? unref(BOTTOM_ITEM) : "shrink-0 gap-1.5 whitespace-nowrap text-sm",
+                            __props.block && !bottom.value ? "flex-1" : "",
+                            __props.variant === "underline" ? "rounded-t-inner px-3 pt-1.5 pb-2" : "",
+                            __props.variant === "contained" || __props.variant === "plain" ? "rounded-inner px-3 py-1.5" : "",
+                            __props.accent ? "data-[state=active]:text-brand" : "data-[state=active]:text-ink",
+                            hovered.value === item.value && !bottom.value ? "text-ink" : !__props.hoverFollow && !bottom.value ? "text-muted hover:text-ink" : "text-muted"
+                          ]]),
+                          onPointerenter: ($event) => __props.hoverFollow && !item.disabled && (hovered.value = item.value),
+                          onPointerup: releaseFocusAfterPointer,
+                          onClick: ($event) => clickPick(item)
+                        }, {
+                          default: withCtx(() => [
+                            pillUnder(item.value, current.value) ? (openBlock(), createBlock(unref(Motion), {
+                              key: 0,
+                              "layout-id": pillId,
+                              transition: unref(pillTransition),
+                              class: normalizeClass(__props.variant === "underline" ? [
+                                "absolute inset-x-0 -bottom-px z-0 h-0.5 rounded-full",
+                                __props.accent ? "bg-brand" : "bg-ink"
+                              ] : bottom.value ? [unref(BOTTOM_MARKER), __props.accent ? "bg-brand" : "bg-ink"] : [
+                                "absolute inset-0 z-0 rounded-inner shadow-sm",
+                                __props.accent ? "border border-brand/35 bg-brand/12" : "border border-line bg-surface-raised"
+                              ])
+                            }, null, 8, ["transition", "class"])) : createCommentVNode("", true),
+                            createVNode(_sfc_main$3, {
+                              item,
+                              bottom: bottom.value,
+                              compact: __props.compact,
+                              active: current.value === item.value
+                            }, null, 8, ["item", "bottom", "compact", "active"])
+                          ]),
+                          _: 2
+                        }, 1032, ["value", "disabled", "title", "class", "onPointerenter", "onClick"])
                       ]),
                       _: 2
-                    }, 1032, ["value", "disabled", "title", "class", "onPointerenter"])
-                  ]),
-                  _: 2
-                }, 1032, ["items", "title", "title-icon"]);
-              }), 128)),
-              !__props.items.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(bottom.value ? 4 : 3, (n) => {
-                return openBlock(), createElementBlock("span", {
-                  key: `skeleton-${n}`,
-                  class: normalizeClass(["flex items-center justify-center", bottom.value ? "min-h-14 flex-col gap-1.5 py-1.5" : "px-1 py-1.5"])
-                }, [
-                  bottom.value ? (openBlock(), createBlock(_sfc_main$3, {
-                    key: 0,
-                    rounded: "pill",
-                    class: "size-5"
-                  })) : createCommentVNode("", true),
-                  createVNode(_sfc_main$3, {
-                    class: normalizeClass(bottom.value ? "h-2.5 w-10" : "h-5 w-16")
-                  }, null, 8, ["class"])
-                ], 2);
-              }), 128)) : createCommentVNode("", true)
+                    }, 1032, ["items", "title", "title-icon"]);
+                  }), 128)),
+                  !__props.items.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(bottom.value ? 4 : 3, (n) => {
+                    return openBlock(), createElementBlock("span", {
+                      key: `skeleton-${n}`,
+                      class: normalizeClass(["flex items-center justify-center", bottom.value ? "min-h-14 flex-col gap-1.5 py-1.5" : "px-1 py-1.5"])
+                    }, [
+                      bottom.value ? (openBlock(), createBlock(_sfc_main$4, {
+                        key: 0,
+                        rounded: "pill",
+                        class: "size-5"
+                      })) : createCommentVNode("", true),
+                      createVNode(_sfc_main$4, {
+                        class: normalizeClass(bottom.value ? "h-2.5 w-10" : "h-5 w-16")
+                      }, null, 8, ["class"])
+                    ], 2);
+                  }), 128)) : createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["aria-label", "class"])
             ]),
             _: 1
-          }, 8, ["aria-label", "class"]),
+          }, 16)),
           _ctx.$slots.panel ? (openBlock(), createBlock(unref(Motion), {
             key: 0,
             layout: true,
@@ -210,7 +224,7 @@ import '../assets/LpTabs-Bh7a-Bdl.css';const _sfc_main = /* @__PURE__ */ defineC
     };
   }
 });
-const LpTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ef828291"]]);
+const LpTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43a45129"]]);
 export {
   LpTabs as default
 };

package/dist/components/LpVideoTrim.vue.js

@@ -1,5 +1,6 @@
-import { defineComponent, ref, computed, watch, shallowRef, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, toHandlers, Transition, normalizeProps, guardReactiveProps, normalizeStyle, Fragment, renderList, normalizeClass, createCommentVNode, toDisplayString, renderSlot, createBlock, createTextVNode, TransitionGroup, withKeys, withModifiers } from "vue";
+import { defineComponent, ref, computed, watch, onBeforeUnmount, shallowRef, nextTick, onMounted, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, toHandlers, Transition, normalizeProps, guardReactiveProps, normalizeStyle, Fragment, renderList, normalizeClass, createCommentVNode, toDisplayString, renderSlot, createBlock, createTextVNode, TransitionGroup, withKeys, withModifiers } from "vue";
 import { startPointerDrag } from "../composables/pointerDrag.js";
+import { createGesture } from "../composables/useGesture.js";
 import { nodeWindow, isHTMLElement } from "../composables/realm.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
@@ -20,7 +21,7 @@ import { formatClipTime, widestClipTime } from "./videoBackdrop.js";
 import { stillSpan, FrameSampler } from "./videoFrames.js";
 import { normalizeRange, ticks, tickStep, containRect, setEnd, revealTime, zoomView, shiftView, adjustRegion, dragEnd, parseClipTime, regionBetween } from "./videoTrim.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpVideoTrim-CMoUw3dJ.css';const _hoisted_1 = ["data-disabled"];
+import '../assets/LpVideoTrim-D8JDg9Qn.css';const _hoisted_1 = ["data-disabled"];
 const _hoisted_2 = ["src", "poster"];
 const _hoisted_3 = ["src"];
 const _hoisted_4 = ["data-live", "aria-label"];
@@ -261,8 +262,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     const marks = computed(() => ready.value ? ticks(view.value, tickStep(span.value, trackWidth.value)) : []);
     const markDigits = computed(() => tickStep(span.value, trackWidth.value) < 1);
-    const pointers = /* @__PURE__ */ new Map();
-    let pinch = null;
     const pinching = ref(false);
     let edgeFrame = 0;
     let lastX = 0;
@@ -310,48 +309,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         edgeScroll();
       });
     }
-    function onTrackDown(event) {
-      if (off.value || event.pointerType === "mouse" && event.button !== 0) return;
-      event.currentTarget.setPointerCapture(event.pointerId);
-      pointers.set(event.pointerId, event.clientX);
-      if (pointers.size === 2) {
+    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("[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()];
-        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("[data-lp-playhead]")?.focus({ preventScroll: true });
-      pause();
-      scrubbing.value = true;
-      lastX = event.clientX;
-      seek(timeAt(event.clientX));
-    }
-    function onTrackMove(event) {
-      if (!pointers.has(event.pointerId)) return;
-      pointers.set(event.pointerId, event.clientX);
-      if (pinch && pointers.size === 2) {
-        const [a, b] = [...pointers.values()];
-        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) {
-      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);
     function onOverviewDown(event) {
       if (off.value || event.button !== 0) return;
       const box = event.currentTarget.getBoundingClientRect();
@@ -908,17 +899,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }, 16),
-              createElementVNode("div", {
+              createElementVNode("div", mergeProps({
                 ref_key: "trackEl",
                 ref: trackEl,
-                class: normalizeClass(["relative h-14 touch-none rounded-control bg-surface-soft transition-opacity duration-(--duration-fast) motion-reduce:transition-none", off.value ? "opacity-60" : "cursor-text"]),
+                class: ["relative h-14 touch-none rounded-control bg-surface-soft transition-opacity duration-(--duration-fast) motion-reduce:transition-none", off.value ? "opacity-60" : "cursor-text"],
                 "aria-label": unref(text).timeline,
-                role: "group",
-                onPointerdown: onTrackDown,
-                onPointermove: onTrackMove,
-                onPointerup: onTrackUp,
-                onPointercancel: onTrackUp
-              }, [
+                role: "group"
+              }, unref(track).handlers), [
                 createElementVNode("div", _hoisted_13, [
                   createVNode(TransitionGroup, normalizeProps(guardReactiveProps(unref(FADE))), {
                     default: withCtx(() => [
@@ -1001,7 +988,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     createElementVNode("span", { class: "absolute -top-0.5 -left-1.5 size-3 rounded-full bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.3),0_1px_3px_rgb(0_0_0/0.35)] group-focus-visible/playhead:ring-2 group-focus-visible/playhead:ring-ring" }, null, -1)
                   ])], 2)
                 ], 12, _hoisted_16)
-              ], 42, _hoisted_12),
+              ], 16, _hoisted_12),
               createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE))), {
                 default: withCtx(() => [
                   zoomed.value ? (openBlock(), createElementBlock("div", {
@@ -1100,7 +1087,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpVideoTrim = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ba15829e"]]);
+const LpVideoTrim = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5ee84a84"]]);
 export {
   LpVideoTrim as default
 };

package/dist/composables/gesture.d.ts

@@ -0,0 +1,141 @@
+import type { Direction } from "./spatialNav";
+export interface GesturePoint {
+    x: number;
+    y: number;
+}
+export type GestureAxis = "x" | "y";
+/** How far a touch may drift before a press stops being a tap or a hold. */
+export declare const TOUCH_SLOP = 8;
+/** A mouse is steadier: a press that moves this far is a drag. */
+export declare const MOUSE_SLOP = 4;
+/** Px/ms at release past which a short swipe still counts (a flick). */
+export declare const FLICK_VELOCITY = 0.45;
+/** How long a finger holds still before it drags (selects, paints) rather than scrolls the page. */
+export declare const HOLD_TO_DRAG_MS = 320;
+/** How long a press must stay for a long press, in ms. */
+export declare const LONG_PRESS_MS = 500;
+/** The slop for a pointer type: a finger gets more room than a mouse. */
+export declare function slopFor(pointerType: string): number;
+export interface VelocityTracker {
+    /** Record where the pointer is at `time` (ms, an event's timeStamp). */
+    add: (point: GesturePoint, time: number) => void;
+    /** Px/ms over the last moments, zero when the pointer rested before `now`. */
+    velocity: (now?: number) => GesturePoint;
+    reset: () => void;
+}
+/**
+ * Velocity from the samples in the last VELOCITY_WINDOW_MS rather than from
+ * the last two events: a jittery final frame (two events a millisecond apart)
+ * would otherwise decide how far a flick travels.
+ */
+export declare function createVelocityTracker(): VelocityTracker;
+/**
+ * Which axis a movement has committed to, or null while it is still inside
+ * the slop or too diagonal to call. `ratio` is how much the winning axis must
+ * lead by: 1 takes any lead, higher waits for a clearer one.
+ */
+export declare function lockAxis(movement: GesturePoint, slop: number, ratio?: number): GestureAxis | null;
+export interface SwipeOptions {
+    /** Distance in px that is a swipe at any speed. Default 60. */
+    distance?: number;
+    /** Px/ms that turns a shorter move into a swipe. Default FLICK_VELOCITY. */
+    velocity?: number;
+    /** A flick must still travel this far, so a twitch is not one. Default 16. */
+    minDistance?: number;
+    /** Only these axes count. Default both. */
+    axis?: GestureAxis;
+    /** How much the swipe's axis must lead the other. Default 1.5. */
+    ratio?: number;
+}
+/** Which way a released movement swiped, or null when it was not a swipe. */
+export declare function swipeDirection(movement: GesturePoint, velocity: GesturePoint, options?: SwipeOptions): Direction | null;
+/**
+ * How far an edge moves when pulled `overshoot` px past it: the further the
+ * pull, the less each pixel gives, approaching `size` and never passing it.
+ * The sign follows the overshoot. `c` is the stiffness, iOS uses 0.55.
+ */
+export declare function rubberBand(overshoot: number, size: number, c?: number): number;
+/** Clamp `value` into [min, max], letting it stretch past either end by rubberBand. */
+export declare function rubberClamp(value: number, min: number, max: number, size: number, c?: number): number;
+export interface DismissOptions {
+    /** Offset toward the dismissing side, in px (positive is toward it). */
+    offset: number;
+    /** Velocity toward the dismissing side, px/ms. */
+    velocity: number;
+    /** The size of what is being swiped away along the swipe, in px. */
+    size: number;
+    /** Fraction of `size` past which a slow release dismisses. Default 0.5. */
+    ratio?: number;
+    /** Px/ms past which a release dismisses from any distance. Default FLICK_VELOCITY. */
+    flick?: number;
+}
+/** Swipe to dismiss: whether a release should carry it away or let it spring back. */
+export declare function shouldDismiss({ offset, velocity, size, ratio, flick }: DismissOptions): boolean;
+export interface PageSwipeOptions {
+    index: number;
+    count: number;
+    /** Drag offset along the strip in px, positive toward the previous item. */
+    offset: number;
+    /** Velocity in px/ms, same sign as `offset`. */
+    velocity: number;
+    /** Width of one item in px. */
+    size: number;
+    /** Fraction of `size` that pages at any speed. Default 0.25. */
+    ratio?: number;
+    flick?: number;
+    /** Wrap past the ends instead of stopping. */
+    loop?: boolean;
+}
+/** Swipe between items: the index a release lands on, one step at most. */
+export declare function pageAfterSwipe({ index, count, offset, velocity, size, ratio, flick, loop }: PageSwipeOptions): number;
+/** Where a fling at `velocity` px/ms comes to rest with exponential friction of time constant `tau` ms. */
+export declare function momentumDistance(velocity: number, tau?: number): number;
+export interface PinchFrame {
+    /** Distance between the two pointers now, over the distance at the start. */
+    scale: number;
+    /** Midpoint of the two pointers. */
+    origin: GesturePoint;
+    distance: number;
+}
+export declare function distance(a: GesturePoint, b: GesturePoint): number;
+export declare function midpoint(a: GesturePoint, b: GesturePoint): GesturePoint;
+/** The pinch between two pointers, measured against the distance it started at. */
+export declare function pinchFrame(a: GesturePoint, b: GesturePoint, startDistance: number): PinchFrame;
+/** The wheel's delta in pixels, whatever unit the device reported it in. */
+export declare function wheelPixels(delta: number, mode: number, page: number): number;
+export interface DragSessionOptions {
+    /** Px of travel before a press becomes a drag. */
+    slop: number;
+    /** Only a drag along this axis counts; one along the other is rejected. `lock` takes whichever comes first. */
+    axis?: GestureAxis | "lock";
+}
+export interface DragFrame {
+    /** `pending` inside the slop, `drag` once committed, `rejected` when it went the other way. */
+    phase: "pending" | "drag" | "rejected";
+    /** True on the frame the drag committed. */
+    first: boolean;
+    start: GesturePoint;
+    point: GesturePoint;
+    movement: GesturePoint;
+    delta: GesturePoint;
+    velocity: GesturePoint;
+    axis: GestureAxis | null;
+    elapsed: number;
+}
+export interface DragSession {
+    readonly phase: DragFrame["phase"];
+    /** Feed the pointer's position; returns where the gesture stands. */
+    move: (point: GesturePoint, time: number) => DragFrame;
+    /** The final frame at release, with the swipe it made (if it was a drag). */
+    end: (point: GesturePoint, time: number, swipe?: SwipeOptions) => DragFrame & {
+        swipe: Direction | null;
+    };
+}
+/**
+ * One press followed from down to up, whatever events carry it: useGesture
+ * feeds it pointer events, a pull from the screen edge feeds it touches. It
+ * decides when the press becomes a drag, along which axis, how fast it moves
+ * and whether the release was a swipe, so every gesture in the kit draws the
+ * line in the same place.
+ */
+export declare function createDragSession(start: GesturePoint, time: number, options: DragSessionOptions): DragSession;