@leavepulse/ui 0.37.3 → 0.37.5

package/dist/chunks/{LpAddressInput-C8NZWkH_.js → LpAddressInput-DOVpUONY.js}

@@ -6,7 +6,7 @@ import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$1 } from "./LpFormField-CazBc2-a.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpInput-9EXWUM9B.js";
-import { _ as _sfc_main$7 } from "./LpModal-D3QxgWaT.js";
+import { _ as _sfc_main$7 } from "./LpModal-Dq_qXN8-.js";
 import { _ as _sfc_main$6 } from "./LpSelect-ANIVtrpM.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "flex items-stretch gap-2" };

package/dist/chunks/{LpAppShell-Cs9jDoqJ.js → LpAppShell-1rTB24lI.js}

@@ -3,7 +3,7 @@ import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpScrollArea-D8xyKXcF.js";
 import { _ as _sfc_main$4 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-DvGfofv6.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-DvxMte3k.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "flex min-w-0 flex-1 flex-col" };
 const _hoisted_2 = { class: "relative flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };

package/dist/chunks/{LpConfirmDialog-B6RAvDES.js → LpConfirmDialog-BH7az_E7.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, openBlock, createBlock, createSlots, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString, createElementVNode, normalizeClass } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpModal-D3QxgWaT.js";
+import { _ as _sfc_main$1 } from "./LpModal-Dq_qXN8-.js";
 const _hoisted_1 = { class: "inline-flex items-center gap-2.5" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",

package/dist/chunks/{LpDrawer-CslZtgUm.js → LpDrawer-E67O8fFP.js}

@@ -1,10 +1,9 @@
-import { defineComponent, computed, watch, onBeforeUnmount, ref, useSlots, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, normalizeClass, withDirectives, vShow, toDisplayString, createCommentVNode, createVNode, unref, withCtx, createBlock, renderSlot, createTextVNode } from "vue";
-import { usePointerSwipe } from "@vueuse/core";
+import { ref, defineComponent, computed, watch, onBeforeUnmount, useSlots, openBlock, createElementBlock, Fragment, withDirectives, createElementVNode, normalizeStyle, unref, vShow, normalizeClass, toDisplayString, createCommentVNode, renderSlot, createVNode, withCtx, createBlock, createTextVNode } from "vue";
 import { DrawerRoot, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHandle, DrawerTitle, DrawerDescription, DrawerClose } from "vaul-vue";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
-import { useModalLayer } from "../components/modalDepth.js";
+import { useModalLayer, anyModalOpen } from "../components/modalDepth.js";
 const _hoisted_1 = { class: "text-base font-semibold text-ink" };
 const _hoisted_2 = { class: "flex flex-col gap-1" };
 const _hoisted_3 = ["data-vaul-no-drag"];
@@ -12,7 +11,7 @@ const _hoisted_4 = {
   key: 3,
   class: "flex justify-end gap-2 px-5 pb-5 pt-4"
 };
-const NO_DRAG_SELECTOR = "input, textarea, select, button, a[href], label, [contenteditable=''], [contenteditable='true']";
+const edgeOwner = ref(null);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpDrawer",
   props: {
@@ -104,6 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return "p-5";
     });
     const headerClass = computed(() => showHandle.value ? "px-5 pb-4 pt-1" : "px-5 pb-4 pt-5");
+    const NO_DRAG_SELECTOR = "input, textarea, select, button, a[href], label, [contenteditable=''], [contenteditable='true']";
     function tagNoDrag(el, { value }) {
       if (!value) return;
       for (const node of el.querySelectorAll(NO_DRAG_SELECTOR)) {
@@ -114,97 +114,183 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       mounted: tagNoDrag,
       updated: tagNoDrag
     };
-    const edgeStrip = ref(null);
+    const EDGE_SLOP = 10;
+    const FLICK_SPEED = 0.45;
+    const BREAKPOINT_PX = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+    const EDGE_IGNORE = "input, textarea, select, [contenteditable=''], [contenteditable='true'], [data-vaul-no-drag], [data-lp-no-edge-pull]";
     const peek = ref(0);
     const peeking = ref(false);
     const handingOff = ref(false);
+    const skipOpenSlide = ref(false);
+    watch(
+      () => props.open,
+      (open) => {
+        if (!open) skipOpenSlide.value = false;
+      }
+    );
     function panelPx() {
       const vw = typeof window === "undefined" ? 0 : window.innerWidth;
       const cap = props.width ? Number.parseFloat(props.width) : SIZES[props.size] * 16;
       return Math.min(vw * 0.94, Number.isFinite(cap) ? cap : SIZES[props.size] * 16);
     }
-    usePointerSwipe(edgeStrip, {
-      threshold: 0,
-      pointerTypes: ["touch", "pen"],
-      onSwipeStart() {
-        if (!props.edgeOpen || props.open) return;
+    function edgeEnabled() {
+      if (!props.edgeOpen || !isHorizontal.value || props.open || handingOff.value) return false;
+      const bp = props.edgeBreakpoint ? BREAKPOINT_PX[props.edgeBreakpoint] : null;
+      return bp === null || window.innerWidth < bp;
+    }
+    let track = null;
+    const owner = /* @__PURE__ */ Symbol("edge-pull");
+    function reducedMotion() {
+      return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    }
+    function scrollsWithPull(target) {
+      let el = target instanceof Element ? target : null;
+      const pullsRight = dir.value === "left";
+      while (el && el !== document.body) {
+        if (el.closest(EDGE_IGNORE) === el) return true;
+        if (el.scrollWidth > el.clientWidth) {
+          const overflow = getComputedStyle(el).overflowX;
+          if (overflow === "auto" || overflow === "scroll") {
+            if (pullsRight ? el.scrollLeft > 0 : el.scrollLeft + el.clientWidth < el.scrollWidth) return true;
+          }
+        }
+        el = el.parentElement;
+      }
+      return false;
+    }
+    function inward(x) {
+      return dir.value === "right" ? window.innerWidth - x : x;
+    }
+    function onTouchStart(e) {
+      if (track) dropTrack();
+      if (e.touches.length !== 1 || !edgeEnabled() || anyModalOpen() || edgeOwner.value) return;
+      const t = e.touches[0];
+      if (inward(t.clientX) > props.edgeSize || scrollsWithPull(e.target)) return;
+      track = { id: t.identifier, x: t.clientX, y: t.clientY, t: e.timeStamp, lastX: t.clientX, lastT: e.timeStamp, speed: 0 };
+    }
+    function onTouchMove(e) {
+      if (!track) return;
+      const t = Array.from(e.changedTouches).find((x) => x.identifier === track.id);
+      if (!t) return;
+      const sign = dir.value === "right" ? -1 : 1;
+      const dx = (t.clientX - track.x) * sign;
+      const dy = t.clientY - track.y;
+      if (!peeking.value) {
+        if (Math.abs(dy) > EDGE_SLOP && Math.abs(dy) > Math.abs(dx)) {
+          track = null;
+          return;
+        }
+        if (dx < EDGE_SLOP || Math.abs(dx) < Math.abs(dy)) return;
+        if (edgeOwner.value && edgeOwner.value !== owner) {
+          track = null;
+          return;
+        }
+        edgeOwner.value = owner;
         peeking.value = true;
-      },
-      onSwipe(e) {
-        if (!peeking.value) return;
-        const fromRight = dir.value === "right";
-        const dx = fromRight ? window.innerWidth - e.clientX : e.clientX;
-        peek.value = Math.max(0, Math.min(1, dx / panelPx()));
-      },
-      onSwipeEnd() {
-        if (!peeking.value) return;
-        peeking.value = false;
-        if (peek.value >= props.edgeOpenThreshold) {
-          peek.value = 1;
-          handingOff.value = true;
+      }
+      if (e.cancelable) e.preventDefault();
+      const dt = e.timeStamp - track.lastT;
+      if (dt > 0) track.speed = (t.clientX - track.lastX) * sign / dt * 0.6 + track.speed * 0.4;
+      track.lastX = t.clientX;
+      track.lastT = e.timeStamp;
+      peek.value = Math.max(0, Math.min(1, inward(t.clientX) / panelPx()));
+    }
+    function dropTrack() {
+      track = null;
+      if (edgeOwner.value === owner) edgeOwner.value = null;
+    }
+    function settle() {
+      const flick = track !== null && track.speed > FLICK_SPEED && peek.value > 0.05;
+      dropTrack();
+      if (!peeking.value) return;
+      peeking.value = false;
+      if (peek.value >= props.edgeOpenThreshold || flick) {
+        peek.value = 1;
+        handingOff.value = true;
+        skipOpenSlide.value = true;
+        timers.push(
           window.setTimeout(() => {
             emit("update:open", true);
-            window.setTimeout(() => {
-              handingOff.value = false;
-              peek.value = 0;
-            }, 60);
-          }, 160);
-        } else {
-          peek.value = 0;
-        }
+            timers.push(
+              window.setTimeout(() => {
+                handingOff.value = false;
+                peek.value = 0;
+              }, 60)
+            );
+          }, reducedMotion() ? 0 : 180)
+        );
+      } else {
+        peek.value = 0;
       }
+    }
+    const timers = [];
+    onBeforeUnmount(() => {
+      for (const id of timers) window.clearTimeout(id);
+      if (edgeOwner.value === owner) edgeOwner.value = null;
     });
+    function onTouchEnd(e) {
+      if (track && !Array.from(e.changedTouches).some((x) => x.identifier === track.id)) return;
+      settle();
+    }
+    if (typeof document !== "undefined") {
+      watch(
+        () => props.edgeOpen && isHorizontal.value,
+        (on, _, onCleanup) => {
+          if (!on) return;
+          const passive = { passive: true };
+          document.addEventListener("touchstart", onTouchStart, passive);
+          document.addEventListener("touchmove", onTouchMove, { passive: false });
+          document.addEventListener("touchend", onTouchEnd, passive);
+          document.addEventListener("touchcancel", onTouchEnd, passive);
+          onCleanup(() => {
+            document.removeEventListener("touchstart", onTouchStart);
+            document.removeEventListener("touchmove", onTouchMove);
+            document.removeEventListener("touchend", onTouchEnd);
+            document.removeEventListener("touchcancel", onTouchEnd);
+          });
+        },
+        { immediate: true }
+      );
+    }
     const previewStyle = computed(() => {
       if (!props.edgeOpen || props.open && !handingOff.value) return { display: "none" };
       const off = (1 - peek.value) * 100;
       const axis = dir.value === "right" ? off : -off;
       return {
         transform: `translateX(${axis}%)`,
-        transition: peeking.value ? "none" : "transform 0.16s ease-out",
+        transition: peeking.value || reducedMotion() ? "none" : "transform 0.18s cubic-bezier(0.32, 0.72, 0, 1)",
         pointerEvents: "none"
       };
     });
-    const edgeStripStyle = computed(() => {
-      const w = `${props.edgeSize}px`;
-      return dir.value === "right" ? { right: "0", width: w } : { left: "0", width: w };
-    });
-    const EDGE_STRIP_HIDDEN = {
-      sm: "sm:hidden",
-      md: "md:hidden",
-      lg: "lg:hidden",
-      xl: "xl:hidden"
-    };
-    const edgeStripClass = computed(
-      () => props.edgeBreakpoint ? EDGE_STRIP_HIDDEN[props.edgeBreakpoint] : ""
-    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         __props.edgeOpen && isHorizontal.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createElementVNode("div", {
-            ref_key: "edgeStrip",
-            ref: edgeStrip,
-            class: normalizeClass(["fixed inset-y-0 z-(--z-overlay) touch-none", edgeStripClass.value]),
-            style: normalizeStyle(edgeStripStyle.value),
-            "aria-hidden": "true"
-          }, null, 6),
           withDirectives(createElementVNode("div", {
-            class: "pointer-events-none fixed inset-0 z-(--z-overlay) bg-black/50",
-            style: normalizeStyle({ opacity: peek.value })
+            class: "lp-scrim pointer-events-none fixed inset-0",
+            style: normalizeStyle({ zIndex: unref(layer).scrim, opacity: peek.value, transition: peeking.value || reducedMotion() ? "none" : "opacity 0.18s ease-out" })
           }, null, 4), [
             [vShow, peeking.value || peek.value > 0]
           ]),
-          createElementVNode("div", {
+          withDirectives(createElementVNode("div", {
             class: normalizeClass(contentClass.value),
-            style: normalizeStyle([sizeStyle.value, previewStyle.value]),
-            "aria-hidden": "true"
+            style: normalizeStyle([sizeStyle.value, previewStyle.value, { zIndex: unref(layer).panel }]),
+            "aria-hidden": "true",
+            inert: ""
           }, [
-            hasHeader.value ? (openBlock(), createElementBlock("div", {
+            hasHeader.value ? (openBlock(), createElementBlock("header", {
               key: 0,
               class: normalizeClass(["flex items-start justify-between gap-4", headerClass.value])
             }, [
               createElementVNode("span", _hoisted_1, toDisplayString(__props.title), 1)
-            ], 2)) : createCommentVNode("", true)
-          ], 6)
+            ], 2)) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass(["flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", padClass.value])
+            }, [
+              peeking.value || peek.value > 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
+            ], 2)
+          ], 6), [
+            [vShow, peeking.value || peek.value > 0]
+          ])
         ], 64)) : createCommentVNode("", true),
         createVNode(unref(DrawerRoot), {
           open: __props.open,
@@ -226,7 +312,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createVNode(unref(DrawerContent), {
                   class: normalizeClass(contentClass.value),
                   style: normalizeStyle([sizeStyle.value, { zIndex: unref(layer).panel }]),
-                  "data-vaul-animate": handingOff.value ? "false" : void 0
+                  "data-vaul-animate": handingOff.value || skipOpenSlide.value ? "false" : void 0
                 }, {
                   default: withCtx(() => [
                     __props.resizable && isHorizontal.value ? (openBlock(), createElementBlock("div", {

package/dist/chunks/{LpModal-D3QxgWaT.js → LpModal-Dq_qXN8-.js}

@@ -1,4 +1,4 @@
-import { defineComponent, computed, useSlots, watch, onBeforeUnmount, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, createElementVNode, createElementBlock, renderSlot, createCommentVNode, mergeProps, createTextVNode, toDisplayString, normalizeClass } from "vue";
+import { defineComponent, computed, useSlots, watch, onBeforeUnmount, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, createElementVNode, mergeProps, createElementBlock, renderSlot, createCommentVNode, normalizeClass, createTextVNode, toDisplayString } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
 import { useShift } from "../composables/useShift.js";
 import { useModalLayer } from "../components/modalDepth.js";
@@ -8,7 +8,7 @@ import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
 const _hoisted_1 = {
   key: 0,
   "data-lp-modal-aside": "",
-  class: "pointer-events-auto flex min-h-0 flex-col"
+  class: "flex min-h-0 flex-col"
 };
 const _hoisted_2 = {
   key: 0,
@@ -22,7 +22,7 @@ const _hoisted_4 = {
 const _hoisted_5 = {
   key: 1,
   "data-lp-modal-aside": "",
-  class: "pointer-events-auto flex min-h-0 flex-col"
+  class: "flex min-h-0 flex-col"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModal",
@@ -83,8 +83,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     ];
     function onOpenAutoFocus(event) {
       if (props.autoFocus === "none") return;
-      const panel = panelRef.value?.$el;
-      if (!(panel instanceof HTMLElement)) return;
+      const panel = panelRef.value;
+      if (!panel) return;
       const selectors = props.autoFocus === "auto" ? AUTO_FOCUS_ORDER : [props.autoFocus];
       for (const selector of selectors) {
         const target = panel.querySelector(selector);
@@ -110,8 +110,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       () => props.open ? panelRef.value : null,
       (panel) => {
-        const el = panel?.$el;
-        sizedEl.value = el instanceof HTMLElement ? el : null;
+        sizedEl.value = panel;
       },
       { flush: "post" }
     );
@@ -131,24 +130,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: "fixed inset-0 flex items-center justify-center pointer-events-none",
                 style: normalizeStyle({ zIndex: unref(layer).panel })
               }, [
-                createElementVNode("div", {
-                  class: "flex items-start",
-                  style: normalizeStyle(hasAside.value ? { maxHeight: "min(90vh, calc(100dvh - 2rem))" } : void 0)
-                }, [
-                  __props.open && _ctx.$slots.aside ? (openBlock(), createElementBlock("aside", _hoisted_1, [
-                    renderSlot(_ctx.$slots, "aside")
-                  ])) : createCommentVNode("", true),
-                  createVNode(unref(DialogContent), mergeProps({
-                    ref_key: "panelRef",
-                    ref: panelRef,
-                    class: ["pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]", [widthClass.value, unref(tweening) ? "transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none" : ""]],
-                    style: { ...__props.width ? { width: __props.width } : {}, ...hasAside.value ? { alignSelf: "stretch" } : {} }
-                  }, describedByAttrs.value, {
-                    onOpenAutoFocus,
-                    onInteractOutside,
-                    onPointerDownOutside: onInteractOutside
-                  }), {
-                    default: withCtx(() => [
+                createVNode(unref(DialogContent), mergeProps({
+                  class: "pointer-events-auto flex min-h-0 items-start outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]",
+                  style: { maxHeight: "min(90vh, calc(100dvh - 2rem))" }
+                }, describedByAttrs.value, {
+                  onOpenAutoFocus,
+                  onInteractOutside,
+                  onPointerDownOutside: onInteractOutside
+                }), {
+                  default: withCtx(() => [
+                    _ctx.$slots.aside ? (openBlock(), createElementBlock("aside", _hoisted_1, [
+                      renderSlot(_ctx.$slots, "aside")
+                    ])) : createCommentVNode("", true),
+                    createElementVNode("div", {
+                      ref_key: "panelRef",
+                      ref: panelRef,
+                      class: normalizeClass(["flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel", [widthClass.value, unref(tweening) ? "transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none" : ""]]),
+                      style: normalizeStyle({ ...__props.width ? { width: __props.width } : {}, ...hasAside.value ? { alignSelf: "stretch" } : {} })
+                    }, [
                       __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("header", _hoisted_2, [
                         createElementVNode("div", _hoisted_3, [
                           createVNode(unref(DialogTitle), { class: "text-base font-semibold text-ink" }, {
@@ -202,13 +201,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
                         renderSlot(_ctx.$slots, "footer")
                       ])) : createCommentVNode("", true)
-                    ]),
-                    _: 3
-                  }, 16, ["class", "style"]),
-                  __props.open && _ctx.$slots.asideEnd ? (openBlock(), createElementBlock("aside", _hoisted_5, [
-                    renderSlot(_ctx.$slots, "asideEnd")
-                  ])) : createCommentVNode("", true)
-                ], 4)
+                    ], 6),
+                    _ctx.$slots.asideEnd ? (openBlock(), createElementBlock("aside", _hoisted_5, [
+                      renderSlot(_ctx.$slots, "asideEnd")
+                    ])) : createCommentVNode("", true)
+                  ]),
+                  _: 3
+                }, 16)
               ], 4)
             ]),
             _: 3

package/dist/chunks/{LpModalNav-Dkogc3O_.js → LpModalNav-B42a7R-3.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed, openBlock, createBlock, createSlots, withCtx, renderSlot, createElementVNode, normalizeClass, createVNode, createCommentVNode, createTextVNode, toDisplayString } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpModal-D3QxgWaT.js";
-import { _ as _sfc_main$4 } from "./LpSidebar-DvGfofv6.js";
+import { _ as _sfc_main$1 } from "./LpModal-Dq_qXN8-.js";
+import { _ as _sfc_main$4 } from "./LpSidebar-DvxMte3k.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModalNav",

package/dist/chunks/{LpSidebar-DvGfofv6.js → LpSidebar-DvxMte3k.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, normalizeClass, renderSlot, createCommentVNode, createBlock, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
-import { _ as _sfc_main$3 } from "./LpDrawer-CslZtgUm.js";
+import { _ as _sfc_main$3 } from "./LpDrawer-E67O8fFP.js";
 import { _ as _sfc_main$1 } from "./LpInput-9EXWUM9B.js";
 import { _ as _sfc_main$2 } from "./LpSidebarNav-CqwvT4H8.js";
 const _hoisted_1 = {

package/dist/components/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-C8NZWkH_.js";
+import { _ as _sfc_main } from "../chunks/LpAddressInput-DOVpUONY.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-Cs9jDoqJ.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-1rTB24lI.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpConfirmDialog.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpConfirmDialog-B6RAvDES.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-BH7az_E7.js";
 export {
   _sfc_main as default
 };

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

@@ -1,8 +1,9 @@
-type Direction = "top" | "bottom" | "left" | "right";
-type __VLS_Props = {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     open?: boolean;
     /** Edge the drawer attaches to. `side` is a back-compat alias (left/right). */
-    direction?: Direction;
+    direction?: "left" | "right" | "top" | "bottom";
     side?: "left" | "right";
     title?: string;
     description?: string;
@@ -35,21 +36,20 @@ type __VLS_Props = {
      */
     noDragContent?: boolean;
     /**
-     * Open by dragging in from the screen edge (Discord-style). Renders an
-     * invisible edge strip; a pull from it drags a preview panel that follows
-     * the finger, and a release past `edgeOpenThreshold` opens the drawer. Only
-     * meaningful for left/right drawers.
+     * Open by dragging in from the screen edge (Discord-style). A touch that
+     * starts within `edgeSize` of the edge and travels inward drags a preview of
+     * the panel (with its content) under the finger; a release past
+     * `edgeOpenThreshold`, or a quick flick, opens the drawer. Nothing is laid
+     * over the edge, so taps there still reach the page. Left/right drawers only.
      */
     edgeOpen?: boolean;
     /**
-     * Tailwind breakpoint above which the edge strip is disabled. Edge
-     * swipe-to-open only makes sense on mobile: the strip listens for
-     * touch/pen pointers only, so on a desktop it can never open the drawer
-     * but still overlays the screen edge and swallows clicks. Pass the same
-     * breakpoint at which the host switches to the drawer (LpSidebar does).
+     * Tailwind breakpoint at and above which the edge pull is ignored. Pass the
+     * same breakpoint at which the host switches to the drawer (LpSidebar
+     * does), so a wide touch screen with the rail visible doesn't pull it too.
      */
     edgeBreakpoint?: "sm" | "md" | "lg" | "xl";
-    /** Width (px) of the edge grab strip. */
+    /** Distance (px) from the edge within which a touch can start a pull. */
     edgeSize?: number;
     /** Fraction (0–1) of the panel width the pull must reach to open on release. */
     edgeOpenThreshold?: number;
@@ -63,18 +63,72 @@ type __VLS_Props = {
     minSize?: string;
     /** Max main-axis size while resizing (any CSS length). Default 96vw. */
     maxSize?: string;
-};
-declare var __VLS_37: {}, __VLS_62: {}, __VLS_64: {};
-type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_37) => any;
-} & {
-    default?: (props: typeof __VLS_62) => any;
-} & {
-    footer?: (props: typeof __VLS_64) => any;
-};
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:open": (value: boolean) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<{
+    open?: boolean;
+    /** Edge the drawer attaches to. `side` is a back-compat alias (left/right). */
+    direction?: "left" | "right" | "top" | "bottom";
+    side?: "left" | "right";
+    title?: string;
+    description?: string;
+    /** Size preset along the drawer's main axis (width for left/right, height for top/bottom). */
+    size?: "sm" | "md" | "lg" | "xl";
+    /** Explicit size override (any CSS length), wins over `size`. */
+    width?: string;
+    /** Drag-to-dismiss + click-outside. Set false to force a controlled close. */
+    dismissible?: boolean;
+    /** Fractions (0–1) or px strings the drawer snaps between, nearest edge first. */
+    snapPoints?: (number | string)[];
+    /** Show the drag handle (auto-on for bottom/top sheets). */
+    handle?: boolean;
+    /** Only the handle initiates a drag — frees inner content to scroll. */
+    handleOnly?: boolean;
+    /** Scale the [vaul-drawer-wrapper] background while open. */
+    scaleBackground?: boolean;
+    /** Drag fraction (0–1) past which a release dismisses. */
+    closeThreshold?: number;
+    /**
+     * Auto-tag interactive descendants (input, textarea, select, button, links,
+     * [contenteditable]) with data-vaul-no-drag so a drag can't start on them —
+     * you can select text / use controls without dragging the drawer. On by
+     * default; the drawer still drags from empty space, the handle and header.
+     */
+    noDragControls?: boolean;
+    /**
+     * Mark the entire body as non-draggable: the drawer then only drags from the
+     * handle/header. Stronger than noDragControls — use for form-heavy drawers.
+     */
+    noDragContent?: boolean;
+    /**
+     * Open by dragging in from the screen edge (Discord-style). A touch that
+     * starts within `edgeSize` of the edge and travels inward drags a preview of
+     * the panel (with its content) under the finger; a release past
+     * `edgeOpenThreshold`, or a quick flick, opens the drawer. Nothing is laid
+     * over the edge, so taps there still reach the page. Left/right drawers only.
+     */
+    edgeOpen?: boolean;
+    /**
+     * Tailwind breakpoint at and above which the edge pull is ignored. Pass the
+     * same breakpoint at which the host switches to the drawer (LpSidebar
+     * 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. */
+    edgeSize?: number;
+    /** Fraction (0–1) of the panel width the pull must reach to open on release. */
+    edgeOpenThreshold?: number;
+    /**
+     * Let the user drag the inner edge to resize the panel (horizontal drawers
+     * only — e.g. a logs panel whose long lines overflow). The new size is kept
+     * for the session. Min/max bound the drag.
+     */
+    resizable?: boolean;
+    /** Min main-axis size while resizing (any CSS length). Default 22rem. */
+    minSize?: string;
+    /** Max main-axis size while resizing (any CSS length). Default 96vw. */
+    maxSize?: string;
+}> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg" | "xl";
@@ -85,10 +139,15 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     edgeOpenThreshold: number;
     minSize: string;
     maxSize: string;
-}, {}, {}, {}, 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;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    title?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    footer?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/LpDrawer.vue.js

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

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

@@ -26,19 +26,19 @@ type __VLS_Props = {
      */
     autoFocus?: "auto" | "none" | string;
 };
-declare var __VLS_21: {}, __VLS_41: {}, __VLS_60: {}, __VLS_68: {}, __VLS_70: {}, __VLS_72: {};
+declare var __VLS_31: {}, __VLS_39: {}, __VLS_58: {}, __VLS_66: {}, __VLS_68: {}, __VLS_70: {};
 type __VLS_Slots = {} & {
-    aside?: (props: typeof __VLS_21) => any;
+    aside?: (props: typeof __VLS_31) => any;
 } & {
-    title?: (props: typeof __VLS_41) => any;
+    title?: (props: typeof __VLS_39) => any;
 } & {
-    default?: (props: typeof __VLS_60) => any;
+    default?: (props: typeof __VLS_58) => any;
 } & {
-    default?: (props: typeof __VLS_68) => any;
+    default?: (props: typeof __VLS_66) => any;
 } & {
-    footer?: (props: typeof __VLS_70) => any;
+    footer?: (props: typeof __VLS_68) => any;
 } & {
-    asideEnd?: (props: typeof __VLS_72) => any;
+    asideEnd?: (props: typeof __VLS_70) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:open": (value: boolean) => any;

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-D3QxgWaT.js";
+import { _ as _sfc_main } from "../chunks/LpModal-Dq_qXN8-.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModalNav.vue.js

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

package/dist/components/LpShortcutsDialog.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, unref } from "vue";
-import { _ as _sfc_main$1 } from "../chunks/LpModal-D3QxgWaT.js";
+import { _ as _sfc_main$1 } from "../chunks/LpModal-Dq_qXN8-.js";
 import { appleModifierLabel } from "../composables/useHotkeys.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
 import '../assets/LpShortcutsDialog-B7H-RZLQ.css';const _hoisted_1 = { class: "shortcut-groups" };

package/dist/components/LpSidebar.vue.js

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

package/dist/components/modalDepth.d.ts

@@ -11,3 +11,5 @@ export declare function useModalLayer(): {
         panel: string;
     }>;
 };
+/** True while any dialog or drawer holds a level — e.g. to keep a gesture from opening another one over it. */
+export declare function anyModalOpen(): boolean;

package/dist/components/modalDepth.js

@@ -24,6 +24,10 @@ function useModalLayer() {
     })
   };
 }
+function anyModalOpen() {
+  return stack.value.length > 0;
+}
 export {
+  anyModalOpen,
   useModalLayer
 };

package/dist/index.js

@@ -1,10 +1,10 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-C8NZWkH_.js";
+import { _ as _2 } from "./chunks/LpAddressInput-DOVpUONY.js";
 import { _ as _3 } from "./chunks/LpMapPicker-ul4oYno6.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BlvtGB2P.js";
 import { _ as _5 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _6 } from "./chunks/LpAppShell-Cs9jDoqJ.js";
+import { _ as _6 } from "./chunks/LpAppShell-1rTB24lI.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DExlIZe_.js";
 import { _ as _8 } from "./chunks/LpAvatar-D3l4nabg.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
@@ -19,12 +19,12 @@ import { _ as _15 } from "./chunks/LpCodeBlock-Bo0B4TFR.js";
 import { _ as _16 } from "./chunks/LpColorPicker-CFC6iaNK.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
-import { _ as _17 } from "./chunks/LpConfirmDialog-B6RAvDES.js";
+import { _ as _17 } from "./chunks/LpConfirmDialog-BH7az_E7.js";
 import { _ as _18 } from "./chunks/LpContextMenu-B6WBLleS.js";
 import { _ as _19 } from "./chunks/LpDatePicker-BPbvu3cZ.js";
 import { _ as _20 } from "./chunks/LpDisclosure-ChQYmjlR.js";
 import { _ as _21 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _22 } from "./chunks/LpDrawer-CslZtgUm.js";
+import { _ as _22 } from "./chunks/LpDrawer-E67O8fFP.js";
 import { _ as _23 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { default as default4 } from "./components/LpDropzone.vue.js";
 import { _ as _24 } from "./chunks/LpEmptyState-Dsdqz1Wj.js";
@@ -40,8 +40,8 @@ import { fileNameOf } from "./components/lightbox.js";
 import { _ as _31 } from "./chunks/LpLink-DCND-zyu.js";
 import { _ as _32 } from "./chunks/LpLogViewer-y53ZqSVq.js";
 import { _ as _33 } from "./chunks/LpMediaGallery-Cid7PGYx.js";
-import { _ as _34 } from "./chunks/LpModal-D3QxgWaT.js";
-import { _ as _35 } from "./chunks/LpModalNav-Dkogc3O_.js";
+import { _ as _34 } from "./chunks/LpModal-Dq_qXN8-.js";
+import { _ as _35 } from "./chunks/LpModalNav-B42a7R-3.js";
 import { _ as _36 } from "./chunks/LpNotificationBell-lHePf89W.js";
 import { _ as _37 } from "./chunks/LpNumberField-CWuX08iX.js";
 import { _ as _38 } from "./chunks/LpNumberFlow-amWYaeuA.js";
@@ -63,7 +63,7 @@ import { _ as _52 } from "./chunks/LpSelect-ANIVtrpM.js";
 import { _ as _53 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _54 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default6 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _55 } from "./chunks/LpSidebar-DvGfofv6.js";
+import { _ as _55 } from "./chunks/LpSidebar-DvxMte3k.js";
 import { _ as _56 } from "./chunks/LpSkeleton-CTI-vBgW.js";
 import { _ as _57 } from "./chunks/LpSlider-BwNIBkAK.js";
 import { _ as _58 } from "./chunks/LpSparkline-C6xQ2dwv.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.37.3",
+  "version": "0.37.5",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpDrawer.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+import { ref as sharedRef } from "vue"
+
+// One pull at a time across every edge-open drawer on the page.
+const edgeOwner = sharedRef<symbol | null>(null)
+</script>
+
 <script setup lang="ts">
 /*
  * Side / bottom panel built on vaul-vue (drag-driven drawer over reka's Dialog
@@ -12,7 +19,6 @@
  * solid background) for vaul to find and transform. Without it the drawer still
  * works — the background just doesn't scale.
  */
-import { usePointerSwipe } from "@vueuse/core"
 import {
   DrawerClose,
   DrawerContent,
@@ -27,7 +33,7 @@ import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
-import { useModalLayer } from "./modalDepth"
+import { anyModalOpen, useModalLayer } from "./modalDepth"
 
 type Direction = "top" | "bottom" | "left" | "right"
 
@@ -68,21 +74,20 @@ const props = withDefaults(
      */
     noDragContent?: boolean
     /**
-     * Open by dragging in from the screen edge (Discord-style). Renders an
-     * invisible edge strip; a pull from it drags a preview panel that follows
-     * the finger, and a release past `edgeOpenThreshold` opens the drawer. Only
-     * meaningful for left/right drawers.
+     * Open by dragging in from the screen edge (Discord-style). A touch that
+     * starts within `edgeSize` of the edge and travels inward drags a preview of
+     * the panel (with its content) under the finger; a release past
+     * `edgeOpenThreshold`, or a quick flick, opens the drawer. Nothing is laid
+     * over the edge, so taps there still reach the page. Left/right drawers only.
      */
     edgeOpen?: boolean
     /**
-     * Tailwind breakpoint above which the edge strip is disabled. Edge
-     * swipe-to-open only makes sense on mobile: the strip listens for
-     * touch/pen pointers only, so on a desktop it can never open the drawer
-     * but still overlays the screen edge and swallows clicks. Pass the same
-     * breakpoint at which the host switches to the drawer (LpSidebar does).
+     * Tailwind breakpoint at and above which the edge pull is ignored. Pass the
+     * same breakpoint at which the host switches to the drawer (LpSidebar
+     * does), so a wide touch screen with the rail visible doesn't pull it too.
      */
     edgeBreakpoint?: "sm" | "md" | "lg" | "xl"
-    /** Width (px) of the edge grab strip. */
+    /** Distance (px) from the edge within which a touch can start a pull. */
     edgeSize?: number
     /** Fraction (0–1) of the panel width the pull must reach to open on release. */
     edgeOpenThreshold?: number
@@ -226,19 +231,40 @@ const vNoDragControls = {
 }
 
 // ── Edge-drag-to-open (Discord-style) ──────────────────────────────────────
-// vaul opens/closes programmatically and only drags an *already-open* drawer,
-// so the pull-from-edge gesture is ours: an invisible edge strip captures the
-// pointer, we translate a preview panel that follows the finger, and a release
-// past the threshold flips `open` (vaul then animates the rest). Horizontal
-// drawers only.
-const edgeStrip = ref<HTMLElement | null>(null)
-// 0 (closed) … 1 (fully pulled in). Drives the preview transform + overlay.
+// vaul only drags an *already-open* drawer, so the pull-from-edge gesture is
+// ours. It is detected on the document rather than on an overlay strip: a strip
+// covering the screen edge swallowed every tap there, and the app burger lives
+// exactly in that corner. A touch near the edge is only a candidate; it becomes
+// a pull once the finger travels inward past EDGE_SLOP and mostly sideways, so a
+// tap still reaches the control under it and a vertical scroll stays a scroll.
+// While pulling, a preview of the real panel content follows the finger; on
+// release we open if the pull passed the threshold or was a quick flick, then
+// hand off to the real drawer without a second slide.
+const EDGE_SLOP = 10
+const FLICK_SPEED = 0.45
+const BREAKPOINT_PX = { sm: 640, md: 768, lg: 1024, xl: 1280 } as const
+// Controls whose own drag must win over the pull, plus explicit opt-outs.
+const EDGE_IGNORE =
+  "input, textarea, select, [contenteditable=''], [contenteditable='true'], [data-vaul-no-drag], [data-lp-no-edge-pull]"
+
+// 0 (closed) … 1 (fully pulled in). Drives the preview transform + scrim.
 const peek = ref(0)
 const peeking = ref(false)
 // True while we hand off from the finger-preview to the real drawer, so vaul's
 // own open animation is suppressed — the preview has already slid it in, a
 // second slide would look like a double-open.
 const handingOff = ref(false)
+// vaul plays slideFromLeft whenever data-vaul-animate is absent, so lifting it
+// right after the hand-off restarted the open slide from off-screen — the panel
+// visibly opened twice. It stays on for as long as the drawer is open and goes
+// with the close, which keeps vaul's close animation.
+const skipOpenSlide = ref(false)
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) skipOpenSlide.value = false
+  },
+)
 
 // Resolve the panel's main-axis size in px to map drag distance → progress.
 function panelPx(): number {
@@ -248,44 +274,140 @@ function panelPx(): number {
   return Math.min(vw * 0.94, Number.isFinite(cap) ? cap : SIZES[props.size] * 16)
 }
 
-usePointerSwipe(edgeStrip, {
-  threshold: 0,
-  pointerTypes: ["touch", "pen"],
-  onSwipeStart() {
-    if (!props.edgeOpen || props.open) return
+function edgeEnabled(): boolean {
+  if (!props.edgeOpen || !isHorizontal.value || props.open || handingOff.value) return false
+  const bp = props.edgeBreakpoint ? BREAKPOINT_PX[props.edgeBreakpoint] : null
+  return bp === null || window.innerWidth < bp
+}
+
+let track: { id: number; x: number; y: number; t: number; lastX: number; lastT: number; speed: number } | null = null
+const owner = Symbol("edge-pull")
+
+function reducedMotion(): boolean {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+}
+
+// A horizontally scrollable ancestor that can still move the way the finger
+// pulls (a carousel, a wide table) keeps the gesture: the pull only claims
+// what nothing under the finger wants.
+function scrollsWithPull(target: EventTarget | null): boolean {
+  let el = target instanceof Element ? target : null
+  const pullsRight = dir.value === "left"
+  while (el && el !== document.body) {
+    if (el.closest(EDGE_IGNORE) === el) return true
+    if (el.scrollWidth > el.clientWidth) {
+      const overflow = getComputedStyle(el).overflowX
+      if (overflow === "auto" || overflow === "scroll") {
+        if (pullsRight ? el.scrollLeft > 0 : el.scrollLeft + el.clientWidth < el.scrollWidth) return true
+      }
+    }
+    el = el.parentElement
+  }
+  return false
+}
+
+function inward(x: number): number {
+  return dir.value === "right" ? window.innerWidth - x : x
+}
+
+function onTouchStart(e: TouchEvent) {
+  if (track) dropTrack()
+  if (e.touches.length !== 1 || !edgeEnabled() || anyModalOpen() || edgeOwner.value) return
+  const t = e.touches[0]
+  if (inward(t.clientX) > props.edgeSize || scrollsWithPull(e.target)) return
+  track = { id: t.identifier, x: t.clientX, y: t.clientY, t: e.timeStamp, lastX: t.clientX, lastT: e.timeStamp, speed: 0 }
+}
+
+function onTouchMove(e: TouchEvent) {
+  if (!track) return
+  const t = Array.from(e.changedTouches).find((x) => x.identifier === track!.id)
+  if (!t) return
+  const sign = dir.value === "right" ? -1 : 1
+  const dx = (t.clientX - track.x) * sign
+  const dy = t.clientY - track.y
+  if (!peeking.value) {
+    if (Math.abs(dy) > EDGE_SLOP && Math.abs(dy) > Math.abs(dx)) {
+      track = null
+      return
+    }
+    if (dx < EDGE_SLOP || Math.abs(dx) < Math.abs(dy)) return
+    if (edgeOwner.value && edgeOwner.value !== owner) {
+      track = null
+      return
+    }
+    edgeOwner.value = owner
     peeking.value = true
-  },
-  onSwipe(e) {
-    if (!peeking.value) return
-    // Inward pull distance: from the right edge we move left (−x), from the
-    // left edge we move right (+x). Normalise to 0…1 of the panel width.
-    const fromRight = dir.value === "right"
-    const dx = fromRight ? window.innerWidth - e.clientX : e.clientX
-    peek.value = Math.max(0, Math.min(1, dx / panelPx()))
-  },
-  onSwipeEnd() {
-    if (!peeking.value) return
-    peeking.value = false
-    if (peek.value >= props.edgeOpenThreshold) {
-      // Open: let the preview finish sliding to fully-in, then swap in the real
-      // drawer *without* a vaul slide (handingOff) so there's no second anim.
-      peek.value = 1
-      handingOff.value = true
+  }
+  if (e.cancelable) e.preventDefault()
+  const dt = e.timeStamp - track.lastT
+  if (dt > 0) track.speed = (((t.clientX - track.lastX) * sign) / dt) * 0.6 + track.speed * 0.4
+  track.lastX = t.clientX
+  track.lastT = e.timeStamp
+  peek.value = Math.max(0, Math.min(1, inward(t.clientX) / panelPx()))
+}
+
+function dropTrack() {
+  track = null
+  if (edgeOwner.value === owner) edgeOwner.value = null
+}
+
+function settle() {
+  const flick = track !== null && track.speed > FLICK_SPEED && peek.value > 0.05
+  dropTrack()
+  if (!peeking.value) return
+  peeking.value = false
+  if (peek.value >= props.edgeOpenThreshold || flick) {
+    peek.value = 1
+    handingOff.value = true
+    skipOpenSlide.value = true
+    timers.push(
       window.setTimeout(() => {
         emit("update:open", true)
-        // Clear after the real drawer has mounted in place.
-        window.setTimeout(() => {
-          handingOff.value = false
-          peek.value = 0
-        }, 60)
-      }, 160)
-    } else {
-      // Below threshold: snap the preview back out.
-      peek.value = 0
-    }
-  },
+        timers.push(
+          window.setTimeout(() => {
+            handingOff.value = false
+            peek.value = 0
+          }, 60),
+        )
+      }, reducedMotion() ? 0 : 180),
+    )
+  } else {
+    peek.value = 0
+  }
+}
+
+const timers: number[] = []
+onBeforeUnmount(() => {
+  for (const id of timers) window.clearTimeout(id)
+  if (edgeOwner.value === owner) edgeOwner.value = null
 })
 
+function onTouchEnd(e: TouchEvent) {
+  if (track && !Array.from(e.changedTouches).some((x) => x.identifier === track!.id)) return
+  settle()
+}
+
+if (typeof document !== "undefined") {
+  watch(
+    () => props.edgeOpen && isHorizontal.value,
+    (on, _, onCleanup) => {
+      if (!on) return
+      const passive = { passive: true }
+      document.addEventListener("touchstart", onTouchStart, passive)
+      document.addEventListener("touchmove", onTouchMove, { passive: false })
+      document.addEventListener("touchend", onTouchEnd, passive)
+      document.addEventListener("touchcancel", onTouchEnd, passive)
+      onCleanup(() => {
+        document.removeEventListener("touchstart", onTouchStart)
+        document.removeEventListener("touchmove", onTouchMove)
+        document.removeEventListener("touchend", onTouchEnd)
+        document.removeEventListener("touchcancel", onTouchEnd)
+      })
+    },
+    { immediate: true },
+  )
+}
+
 // The preview panel slides with the finger: translate from fully-off (100%)
 // toward 0 as peek → 1. Kept visible through the hand-off so the real drawer
 // can appear underneath without a flash.
@@ -295,51 +417,34 @@ const previewStyle = computed(() => {
   const axis = dir.value === "right" ? off : -off
   return {
     transform: `translateX(${axis}%)`,
-    transition: peeking.value ? "none" : "transform 0.16s ease-out",
+    transition: peeking.value || reducedMotion() ? "none" : "transform 0.18s cubic-bezier(0.32, 0.72, 0, 1)",
     pointerEvents: "none" as const,
   }
 })
-
-const edgeStripStyle = computed(() => {
-  const w = `${props.edgeSize}px`
-  return dir.value === "right"
-    ? { right: "0", width: w }
-    : { left: "0", width: w }
-})
-
-// The strip must only exist below the host's mobile breakpoint. It is hidden
-// with the same Tailwind breakpoint classes the rest of the mobile logic
-// (LpSidebar rail, burger) uses — no JS media query needed.
-const EDGE_STRIP_HIDDEN: Record<NonNullable<typeof props.edgeBreakpoint>, string> = {
-  sm: "sm:hidden",
-  md: "md:hidden",
-  lg: "lg:hidden",
-  xl: "xl:hidden",
-}
-const edgeStripClass = computed(() =>
-  props.edgeBreakpoint ? EDGE_STRIP_HIDDEN[props.edgeBreakpoint] : "",
-)
 </script>
 
 <template>
-  <!-- Edge-drag-to-open: an invisible grab strip + a finger-following preview
-       of the panel, shown only while closed. Horizontal drawers only. -->
+  <!-- Edge-drag-to-open: a finger-following preview of the panel (with its
+       real content, inert) and a scrim that darkens with the pull. Nothing
+       overlays the screen edge, so taps there reach the page. -->
   <template v-if="edgeOpen && isHorizontal">
     <div
-      ref="edgeStrip"
-      class="fixed inset-y-0 z-(--z-overlay) touch-none"
-      :class="edgeStripClass"
-      :style="edgeStripStyle"
-      aria-hidden="true"
+      v-show="peeking || peek > 0"
+      class="lp-scrim pointer-events-none fixed inset-0"
+      :style="{ zIndex: layer.scrim, opacity: peek, transition: peeking || reducedMotion() ? 'none' : 'opacity 0.18s ease-out' }"
     />
     <div
       v-show="peeking || peek > 0"
-      class="pointer-events-none fixed inset-0 z-(--z-overlay) bg-black/50"
-      :style="{ opacity: peek }"
-    />
-    <div :class="contentClass" :style="[sizeStyle, previewStyle]" aria-hidden="true">
-      <div v-if="hasHeader" class="flex items-start justify-between gap-4" :class="headerClass">
+      :class="contentClass"
+      :style="[sizeStyle, previewStyle, { zIndex: layer.panel }]"
+      aria-hidden="true"
+      inert
+    >
+      <header v-if="hasHeader" class="flex items-start justify-between gap-4" :class="headerClass">
         <span class="text-base font-semibold text-ink">{{ title }}</span>
+      </header>
+      <div class="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden" :class="padClass">
+        <slot v-if="peeking || peek > 0" />
       </div>
     </div>
   </template>
@@ -362,7 +467,7 @@ const edgeStripClass = computed(() =>
       <DrawerContent
         :class="contentClass"
         :style="[sizeStyle, { zIndex: layer.panel }]"
-        :data-vaul-animate="handingOff ? 'false' : undefined"
+        :data-vaul-animate="handingOff || skipOpenSlide ? 'false' : undefined"
       >
         <!-- Resize grip on the inner edge (horizontal drawers). data-vaul-no-drag
              so grabbing it resizes the panel instead of starting a vaul drag. -->

package/src/components/LpModal.vue

@@ -8,7 +8,6 @@ import {
   DialogRoot,
   DialogTitle,
 } from "reka-ui"
-import type { ComponentPublicInstance } from "vue"
 import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { useShift } from "../composables/useShift"
 import { useModalLayer } from "./modalDepth"
@@ -143,7 +142,7 @@ const bodyPad = computed(() =>
  * scroll area exactly as before. A panel whose size never moves is pinned once
  * and never transitions.
  */
-const panelRef = ref<ComponentPublicInstance | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
 
 /**
  * Controls that are worth landing on when the dialog opens, in order of
@@ -171,8 +170,8 @@ const AUTO_FOCUS_ORDER = [
  */
 function onOpenAutoFocus(event: Event) {
   if (props.autoFocus === "none") return
-  const panel = panelRef.value?.$el
-  if (!(panel instanceof HTMLElement)) return
+  const panel = panelRef.value
+  if (!panel) return
 
   const selectors =
     props.autoFocus === "auto" ? AUTO_FOCUS_ORDER : [props.autoFocus]
@@ -210,13 +209,10 @@ const {
   resizing,
 } = useShift({ axis: "height", enabled: () => props.open })
 
-// reka renders a real element but exposes it as a component instance, so the
-// sized element is handed over through $el once the panel has mounted.
 watch(
   () => (props.open ? panelRef.value : null),
   (panel) => {
-    const el = panel?.$el
-    sizedEl.value = el instanceof HTMLElement ? el : null
+    sizedEl.value = panel
   },
   { flush: "post" },
 )
@@ -265,48 +261,38 @@ watch(
         class="fixed inset-0 flex items-center justify-center pointer-events-none"
         :style="{ zIndex: layer.panel }"
       >
-      <!-- The dialog and its aside stand in a row of their own, and that row is
-           what the wrapper centres. Aligning them on the full-screen wrapper
-           instead would pin them to the top of the WINDOW, and the dialog would
-           be free to end up shorter than the aside beside it.
-           `items-start` inside the row: the row collapses to the taller of the
-           two, both hang from its top edge, and neither is stretched. -->
-      <div
-        class="flex items-start"
-        :style="hasAside ? { maxHeight: 'min(90vh, calc(100dvh - 2rem))' } : undefined"
+      <!-- The dialog and its asides stand in one row, and that row IS the
+           DialogContent. An aside rendered as a sibling of DialogContent sat
+           outside the modal: reka marks everything outside aria-hidden and traps
+           focus inside, so a section list beside the dialog could be neither
+           tabbed to nor read by a screen reader. Inside DialogContent it belongs
+           to the dialog, while the visible card is the inner panel, so nothing
+           moves on screen.
+           `items-start`: the row collapses to the taller of the two, both hang
+           from its top edge, and neither is stretched. Without a description
+           reka-ui warns on every open, and the opt-out it checks for is an
+           ABSENT `aria-describedby`; a caller that passes a description keeps
+           the link to DialogDescription. -->
+      <DialogContent
+        class="pointer-events-auto flex min-h-0 items-start outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]"
+        :style="{ maxHeight: 'min(90vh, calc(100dvh - 2rem))' }"
+        v-bind="describedByAttrs"
+        @open-auto-focus="onOpenAutoFocus"
+        @interact-outside="onInteractOutside"
+        @pointer-down-outside="onInteractOutside"
       >
-      <!-- Bound to `open`, not to the slot alone: DialogContent unmounts itself
-           with the dialog, but an aside is an ordinary node in the portal and
-           stayed on screen after the dialog closed — a section list floating
-           over the page with nothing behind it.
-
-           `pointer-events-auto` because the wrapper lets clicks through to the
-           overlay, and the aside is not the overlay. `data-lp-modal-aside` is
-           what tells `interact-outside` a click here is not a click on the
-           scrim — without it the dialog closes under the pointer. -->
       <aside
-        v-if="open && $slots.aside"
+        v-if="$slots.aside"
         data-lp-modal-aside
-        class="pointer-events-auto flex min-h-0 flex-col"
+        class="flex min-h-0 flex-col"
       >
         <slot name="aside" />
       </aside>
-      <!-- Without a description reka-ui warns on every open, and the opt-out it
-           checks for is an ABSENT `aria-describedby` — despite the message
-           naming the string "undefined" (a leftover from Radix, where
-           `aria-describedby={undefined}` is how you drop the attribute).
-           Dropping it here is what silences the warning; a caller that does
-           pass a description keeps the generated id and the link to
-           DialogDescription. -->
-      <DialogContent
+      <div
         ref="panelRef"
-        class="pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]"
+        class="flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel"
         :class="[widthClass, tweening ? 'transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none' : '']"
         :style="{ ...(width ? { width } : {}), ...(hasAside ? { alignSelf: 'stretch' } : {}) }"
-        v-bind="describedByAttrs"
-        @open-auto-focus="onOpenAutoFocus"
-        @interact-outside="onInteractOutside"
-        @pointer-down-outside="onInteractOutside"
       >
         <header v-if="title || $slots.title" class="flex shrink-0 items-start justify-between gap-4 p-5 pb-3">
           <div class="flex flex-col gap-1">
@@ -357,16 +343,15 @@ watch(
         <footer v-if="$slots.footer" class="flex shrink-0 justify-end gap-2 p-5 pt-4">
           <slot name="footer" />
         </footer>
-      </DialogContent>
-
+      </div>
       <aside
-        v-if="open && $slots.asideEnd"
+        v-if="$slots.asideEnd"
         data-lp-modal-aside
-        class="pointer-events-auto flex min-h-0 flex-col"
+        class="flex min-h-0 flex-col"
       >
         <slot name="asideEnd" />
       </aside>
-      </div>
+      </DialogContent>
       </div>
     </DialogPortal>
   </DialogRoot>

package/src/components/modalDepth.ts

@@ -77,3 +77,8 @@ export function useModalLayer(): {
     }),
   }
 }
+
+/** True while any dialog or drawer holds a level — e.g. to keep a gesture from opening another one over it. */
+export function anyModalOpen(): boolean {
+  return stack.value.length > 0
+}