@leavepulse/ui 0.93.3 → 0.94.1

package/dist/components/LpChart.vue.js

@@ -6,6 +6,7 @@ import { useLabels } from "../composables/useLpConfig.js";
 import { easeTravel } from "../composables/easing.js";
 import { usePrefersReducedMotion } from "../composables/useReducedMotion.js";
 import { startPointerDrag } from "../composables/pointerDrag.js";
+import { MOUSE_SLOP } from "../composables/gesture.js";
 import { nodeWindow } from "../composables/realm.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { useReveal } from "../composables/useReveal.js";
@@ -605,7 +606,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const crosshair = computed(() => active.value >= 0 ? active.value : peerSlot.value);
     watch(active, (slot) => publish(slot >= 0 ? labels.value[slot] ?? null : null));
-    const SELECT_SLOP = 4;
     let swallowClick = false;
     const selection = ref(null);
     const onPointerDown = (e) => {
@@ -616,7 +616,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       startPointerDrag(e, {
         move(ev) {
           const x = offset(ev);
-          if (Math.abs(x - pressedAt) > SELECT_SLOP) selection.value = { from: pressedAt, to: x };
+          if (Math.abs(x - pressedAt) > MOUSE_SLOP) selection.value = { from: pressedAt, to: x };
         },
         end(completed) {
           const picked = selection.value;
@@ -1457,7 +1457,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-39ed90d7"]]);
+const LpChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-946a5b6d"]]);
 export {
   LpChart as default
 };

package/dist/components/LpDateRangePicker.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDateRangePicker-CAn2yGbn.js";
+import { _ as _sfc_main } from "../chunks/LpDateRangePicker-DRBB8z6t.js";
 export {
   _sfc_main as default
 };

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

@@ -55,7 +55,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * does), so a wide touch screen with the rail visible doesn't pull it too.
      */
     edgeBreakpoint?: "sm" | "md" | "lg" | "xl";
-    /** Distance (px) from the edge within which a touch can start a pull. */
+    /**
+     * Distance (px) from the edge within which a touch can start a pull. Wide
+     * enough to start a thumb's width in, clear of the system's back gesture
+     * along the very edge.
+     */
     edgeSize?: number;
     /** Fraction (0–1) of the panel width the pull must reach to open on release. */
     edgeOpenThreshold?: number;
@@ -152,7 +156,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * does), so a wide touch screen with the rail visible doesn't pull it too.
      */
     edgeBreakpoint?: "sm" | "md" | "lg" | "xl";
-    /** Distance (px) from the edge within which a touch can start a pull. */
+    /**
+     * Distance (px) from the edge within which a touch can start a pull. Wide
+     * enough to start a thumb's width in, clear of the system's back gesture
+     * along the very edge.
+     */
     edgeSize?: number;
     /** Fraction (0–1) of the panel width the pull must reach to open on release. */
     edgeOpenThreshold?: number;

package/dist/components/LpDrawer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDrawer-iRHwJOGn.js";
+import { _ as _sfc_main } from "../chunks/LpDrawer-BkWjFdV0.js";
 export {
   _sfc_main as default
 };

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

@@ -109,11 +109,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
 }> & Readonly<{
     onLink?: ((url: string) => any) | undefined;
     onFiles?: ((files: File[]) => any) | undefined;
-    "onUpdate:linking"?: ((value: boolean) => any) | undefined;
     onRejected?: ((reason: {
         file: File;
         cause: "type" | "size";
     }[]) => any) | undefined;
+    "onUpdate:linking"?: ((value: boolean) => any) | undefined;
 }>, {
     title: string;
     animate: boolean;

package/dist/components/LpLightbox.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLightbox-a24V_0Wk.js";
+import { _ as _sfc_main } from "../chunks/LpLightbox-DPgz7IsT.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpMapPicker.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpMapPicker-DVfiy3rR.js";
+import { _ as _sfc_main } from "../chunks/LpMapPicker-V0Lybi10.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpMediaGallery.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpMediaGallery-CtWA5Uab.js";
+import { _ as _sfc_main } from "../chunks/LpMediaGallery-CTejKF2-.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModalNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModalNav-DivqT1NV.js";
+import { _ as _sfc_main } from "../chunks/LpModalNav-BFjiHWbr.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpRangeCalendar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpRangeCalendar-C9gkNMYw.js";
+import { _ as _sfc_main } from "../chunks/LpRangeCalendar-9BvaLZji.js";
 export {
   _sfc_main as default
 };

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

@@ -53,10 +53,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     direction: RevealDirection;
     delay: number;
     immediate: boolean;
+    distance: number;
     threshold: number;
     preset: RevealPreset;
     stagger: number;
-    distance: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

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-BKhVDsMt.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebarNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebarNav-CFcI7--7.js";
+import { _ as _sfc_main } from "../chunks/LpSidebarNav-DbCap8z1.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,18 @@
-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, onMounted, 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 { useResizeObserver } from "../composables/useResizeObserver.js";
 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-7yQjX2ih.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTabs",
   props: {
     modelValue: {},
@@ -44,19 +45,25 @@ 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" });
-      });
-    });
+    function revealActive(smooth) {
+      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));
+    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 +106,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 +229,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-60b1eda3"]]);
 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
 };