@maas/vue-equipment 1.2.0 → 1.4.0

package/dist/plugins/MagicDotMatrix/src/utils/presets/fill.mjs

@@ -0,0 +1,10 @@
+export function createFill({ cols, rows }) {
+  const total = cols * rows;
+  return [
+    ...Array.from(
+      { length: total },
+      (_, index) => Array.from({ length: index + 1 }, (__, dot) => dot)
+    ),
+    []
+  ];
+}

package/dist/plugins/MagicDotMatrix/src/utils/presets/focus.d.ts

@@ -0,0 +1,2 @@
+import type { DotMatrixGrid, DotMatrixSequence } from '../../types/index.js';
+export declare function createFocus(grid: DotMatrixGrid): DotMatrixSequence;

package/dist/plugins/MagicDotMatrix/src/utils/presets/focus.mjs

@@ -0,0 +1,5 @@
+import { getRings } from "../sequence/getRings.mjs";
+export function createFocus(grid) {
+  const rings = [...getRings(grid)].reverse();
+  return [...rings, ...rings.slice(0, -1).reverse(), []];
+}

package/dist/plugins/MagicDotMatrix/src/utils/presets/index.d.ts

@@ -0,0 +1,12 @@
+export { createBounce } from './bounce.js';
+export { createCheckerboard } from './checkerboard.js';
+export { createComet } from './comet.js';
+export { createDrift } from './drift.js';
+export { createEqualizer } from './equalizer.js';
+export { createFill } from './fill.js';
+export { createFocus } from './focus.js';
+export { createOrbit } from './orbit.js';
+export { createPulse } from './pulse.js';
+export { createRipple } from './ripple.js';
+export { createScan } from './scan.js';
+export { createSpiral } from './spiral.js';

package/dist/plugins/MagicDotMatrix/src/utils/presets/index.mjs

@@ -0,0 +1,12 @@
+export { createBounce } from "./bounce.mjs";
+export { createCheckerboard } from "./checkerboard.mjs";
+export { createComet } from "./comet.mjs";
+export { createDrift } from "./drift.mjs";
+export { createEqualizer } from "./equalizer.mjs";
+export { createFill } from "./fill.mjs";
+export { createFocus } from "./focus.mjs";
+export { createOrbit } from "./orbit.mjs";
+export { createPulse } from "./pulse.mjs";
+export { createRipple } from "./ripple.mjs";
+export { createScan } from "./scan.mjs";
+export { createSpiral } from "./spiral.mjs";

package/dist/plugins/MagicDotMatrix/src/utils/presets/orbit.d.ts

@@ -0,0 +1,2 @@
+import type { DotMatrixGrid, DotMatrixSequence } from '../../types/index.js';
+export declare function createOrbit({ cols, rows }: DotMatrixGrid): DotMatrixSequence;

package/dist/plugins/MagicDotMatrix/src/utils/presets/orbit.mjs

@@ -0,0 +1,8 @@
+import { ringPath } from "../sequence/ringPath.mjs";
+export function createOrbit({ cols, rows }) {
+  const path = ringPath({ cols, rows });
+  if (path.length === 0) {
+    return [[]];
+  }
+  return path.map((_, index) => [path[index]]);
+}

package/dist/plugins/MagicDotMatrix/src/utils/presets/pulse.d.ts

@@ -0,0 +1,2 @@
+import type { DotMatrixGrid, DotMatrixSequence } from '../../types/index.js';
+export declare function createPulse(grid: DotMatrixGrid): DotMatrixSequence;

package/dist/plugins/MagicDotMatrix/src/utils/presets/pulse.mjs

@@ -0,0 +1,7 @@
+import { getRings } from "../sequence/getRings.mjs";
+export function createPulse(grid) {
+  const rings = getRings(grid);
+  const expand = rings.map((_, index) => rings.slice(0, index + 1).flat());
+  const contract = rings.map((_, index) => rings.slice(0, rings.length - index - 1).flat()).slice(1);
+  return [...expand, ...contract, []];
+}

package/dist/plugins/MagicDotMatrix/src/utils/presets/ripple.d.ts

@@ -0,0 +1,2 @@
+import type { DotMatrixGrid, DotMatrixSequence } from '../../types/index.js';
+export declare function createRipple(grid: DotMatrixGrid): DotMatrixSequence;

package/dist/plugins/MagicDotMatrix/src/utils/presets/ripple.mjs

@@ -0,0 +1,5 @@
+import { getRings } from "../sequence/getRings.mjs";
+export function createRipple(grid) {
+  const rings = getRings(grid);
+  return [...rings, ...rings.slice(0, -1).reverse(), []];
+}

package/dist/plugins/MagicDotMatrix/src/utils/presets/scan.d.ts

@@ -0,0 +1,2 @@
+import type { DotMatrixGrid, DotMatrixSequence } from '../../types/index.js';
+export declare function createScan({ cols, rows }: DotMatrixGrid): DotMatrixSequence;

package/dist/plugins/MagicDotMatrix/src/utils/presets/scan.mjs

@@ -0,0 +1,6 @@
+export function createScan({ cols, rows }) {
+  return Array.from(
+    { length: rows },
+    (_, row) => Array.from({ length: cols }, (__, col) => row * cols + col)
+  );
+}

package/dist/plugins/MagicDotMatrix/src/utils/presets/spiral.d.ts

@@ -0,0 +1,2 @@
+import type { DotMatrixGrid, DotMatrixSequence } from '../../types/index.js';
+export declare function createSpiral(grid: DotMatrixGrid): DotMatrixSequence;

package/dist/plugins/MagicDotMatrix/src/utils/presets/spiral.mjs

@@ -0,0 +1,34 @@
+function spiralOrder({ cols, rows }) {
+  const result = [];
+  let top = 0;
+  let bottom = rows - 1;
+  let left = 0;
+  let right = cols - 1;
+  while (top <= bottom && left <= right) {
+    for (let col = left; col <= right; col++) {
+      result.push(top * cols + col);
+    }
+    top++;
+    for (let row = top; row <= bottom; row++) {
+      result.push(row * cols + right);
+    }
+    right--;
+    if (top <= bottom) {
+      for (let col = right; col >= left; col--) {
+        result.push(bottom * cols + col);
+      }
+      bottom--;
+    }
+    if (left <= right) {
+      for (let row = bottom; row >= top; row--) {
+        result.push(row * cols + left);
+      }
+      left++;
+    }
+  }
+  return result;
+}
+export function createSpiral(grid) {
+  const order = spiralOrder(grid);
+  return [...order.map((_, index) => order.slice(0, index + 1)), []];
+}

package/dist/plugins/MagicDotMatrix/src/utils/sequence/equalizerFrame.d.ts

@@ -0,0 +1,7 @@
+import type { DotMatrixFrame } from '../../types/index.js';
+export type EqualizerFrameArgs = {
+    heights: Array<number>;
+    cols: number;
+    rows: number;
+};
+export declare function equalizerFrame({ heights, cols, rows, }: EqualizerFrameArgs): DotMatrixFrame;

package/dist/plugins/MagicDotMatrix/src/utils/sequence/equalizerFrame.mjs

@@ -0,0 +1,12 @@
+export function equalizerFrame({
+  heights,
+  cols,
+  rows
+}) {
+  return heights.flatMap(
+    (height, col) => Array.from(
+      { length: Math.max(0, Math.min(height, rows)) },
+      (_, index) => (rows - 1 - index) * cols + col
+    )
+  );
+}

package/dist/plugins/MagicDotMatrix/src/utils/sequence/getRings.d.ts

@@ -0,0 +1,2 @@
+import type { DotMatrixFrame, DotMatrixGrid } from '../../types/index.js';
+export declare function getRings({ cols, rows }: DotMatrixGrid): Array<DotMatrixFrame>;

package/dist/plugins/MagicDotMatrix/src/utils/sequence/getRings.mjs

@@ -0,0 +1,24 @@
+import { toIndex } from "./toIndex.mjs";
+export function getRings({ cols, rows }) {
+  const centerCol = (cols - 1) / 2;
+  const centerRow = (rows - 1) / 2;
+  const maxRing = Math.max(
+    Math.ceil(Math.max(centerCol, cols - 1 - centerCol)),
+    Math.ceil(Math.max(centerRow, rows - 1 - centerRow))
+  );
+  return Array.from({ length: maxRing + 1 }, (_, ring) => {
+    const indices = [];
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        const distance = Math.max(
+          Math.abs(col - centerCol),
+          Math.abs(row - centerRow)
+        );
+        if (Math.floor(distance + 0.5) === ring) {
+          indices.push(toIndex({ col, row, cols }));
+        }
+      }
+    }
+    return indices;
+  }).filter((frame) => frame.length > 0);
+}

package/dist/plugins/MagicDotMatrix/src/utils/sequence/ringPath.d.ts

@@ -0,0 +1,7 @@
+import type { DotMatrixFrame } from '../../types/index.js';
+export type RingPathArgs = {
+    cols: number;
+    rows: number;
+    inset?: number;
+};
+export declare function ringPath({ cols, rows, inset, }: RingPathArgs): DotMatrixFrame;

package/dist/plugins/MagicDotMatrix/src/utils/sequence/ringPath.mjs

@@ -0,0 +1,35 @@
+import { toIndex } from "./toIndex.mjs";
+export function ringPath({
+  cols,
+  rows,
+  inset = 0
+}) {
+  const left = inset;
+  const top = inset;
+  const right = cols - 1 - inset;
+  const bottom = rows - 1 - inset;
+  if (left > right || top > bottom) {
+    return [];
+  }
+  if (left === right && top === bottom) {
+    return [toIndex({ col: left, row: top, cols })];
+  }
+  const path = [];
+  for (let col = left; col <= right; col++) {
+    path.push(toIndex({ col, row: top, cols }));
+  }
+  for (let row = top + 1; row <= bottom; row++) {
+    path.push(toIndex({ col: right, row, cols }));
+  }
+  if (bottom > top) {
+    for (let col = right - 1; col >= left; col--) {
+      path.push(toIndex({ col, row: bottom, cols }));
+    }
+  }
+  if (right > left) {
+    for (let row = bottom - 1; row > top; row--) {
+      path.push(toIndex({ col: left, row, cols }));
+    }
+  }
+  return path;
+}

package/dist/plugins/MagicDotMatrix/src/utils/sequence/toIndex.d.ts

@@ -0,0 +1,6 @@
+export type ToIndexArgs = {
+    col: number;
+    row: number;
+    cols: number;
+};
+export declare function toIndex({ col, row, cols }: ToIndexArgs): number;

package/dist/plugins/MagicDotMatrix/src/utils/sequence/toIndex.mjs

@@ -0,0 +1,3 @@
+export function toIndex({ col, row, cols }) {
+  return row * cols + col;
+}

package/dist/plugins/MagicDotMatrix/src/utils/sequence/withTrail.d.ts

@@ -0,0 +1,6 @@
+import type { DotMatrixFrame, DotMatrixSequence } from '../../types/index.js';
+export type WithTrailArgs = {
+    path: DotMatrixFrame;
+    length?: number;
+};
+export declare function withTrail({ path, length, }: WithTrailArgs): DotMatrixSequence;

package/dist/plugins/MagicDotMatrix/src/utils/sequence/withTrail.mjs

@@ -0,0 +1,17 @@
+export function withTrail({
+  path,
+  length = 3
+}) {
+  if (path.length === 0) {
+    return [[]];
+  }
+  const trail = Math.max(1, Math.min(length, path.length));
+  return path.map((_, index) => [
+    ...new Set(
+      Array.from(
+        { length: trail },
+        (__, offset) => path[(index + offset) % path.length]
+      )
+    )
+  ]);
+}

package/dist/plugins/MagicDrawer/src/components/MagicDrawerTrigger.d.vue.ts

@@ -6,7 +6,7 @@ interface MagicDrawerTriggerProps {
 }
 declare var __VLS_10: {
     active: any;
-    disabled: boolean;
+    disabled: any;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_10) => any;

package/dist/plugins/MagicDrawer/src/components/MagicDrawerTrigger.vue

@@ -18,7 +18,11 @@ import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useMagicDrawer } from "../composables/useMagicDrawer";
 import { useDrawerState } from "../composables/private/useDrawerState";
 import { MagicDrawerInstanceId } from "../symbols";
-const { id, disabled, asChild } = defineProps({
+const {
+  id,
+  disabled = void 0,
+  asChild
+} = defineProps({
   id: { type: null, required: false },
   disabled: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false }

package/dist/plugins/MagicDrawer/src/components/MagicDrawerTrigger.vue.d.ts

@@ -6,7 +6,7 @@ interface MagicDrawerTriggerProps {
 }
 declare var __VLS_10: {
     active: any;
-    disabled: boolean;
+    disabled: any;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_10) => any;

package/dist/plugins/MagicEmitter/src/types/index.d.ts

@@ -1,6 +1,7 @@
 import type { AccordionEvents } from '../../../MagicAccordion/src/types/index.js';
 import type { CarouselEvents } from '../../../MagicCarousel/src/types/index.js';
 import type { CookieEvents } from '../../../MagicCookie/src/types/index.js';
+import type { DotMatrixEvents } from '../../../MagicDotMatrix/src/types/index.js';
 import type { DraggableEvents } from '../../../MagicDraggable/src/types/index.js';
 import type { DrawerEvents } from '../../../MagicDrawer/src/types/index.js';
 import type { ModalEvents } from '../../../MagicModal/src/types/index.js';
@@ -17,6 +18,7 @@ export type MagicEmitterEvents = Merge<[
     AccordionEvents,
     CarouselEvents,
     CookieEvents,
+    DotMatrixEvents,
     DraggableEvents,
     DrawerEvents,
     ModalEvents,

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue

@@ -29,7 +29,12 @@ import {
   MagicMenuItemId,
   MagicMenuViewId
 } from "../symbols";
-const { instanceId, viewId, disabled, trigger } = defineProps({
+const {
+  instanceId,
+  viewId,
+  disabled = void 0,
+  trigger
+} = defineProps({
   instanceId: { type: String, required: false },
   viewId: { type: String, required: false },
   disabled: { type: Boolean, required: false },
@@ -54,13 +59,18 @@ magicError.assert(mappedViewId.value, {
   message: "MagicMenuTrigger must be nested inside MagicMenuView or a viewId must be provided",
   errorCode: "missing_view_id"
 });
-const { getView, getRelativeViewIndex } = useMenuView(mappedInstanceId.value);
+const { getView, getRelativeViewIndex, getParentView } = useMenuView(
+  mappedInstanceId.value
+);
 const view = getView(mappedViewId.value);
 const viewIndex = getRelativeViewIndex(mappedViewId.value);
 const { initializeState } = useMenuState(mappedInstanceId.value);
 const state = initializeState();
 const { getItem } = useMenuItem(mappedInstanceId.value);
-const item = getItem({ viewId: mappedViewId.value, id: itemId ?? "" });
+const item = getItem({
+  viewId: getParentView(mappedViewId.value)?.id ?? "",
+  id: itemId ?? ""
+});
 const mappedDisabled = computed(() => disabled ?? item?.disabled ?? false);
 const mappedTrigger = computed(() => {
   if (trigger?.length) {

package/dist/plugins/MagicTray/src/components/MagicTrayTrigger.d.vue.ts

@@ -2,7 +2,7 @@ import type { MaybeRef } from 'vue';
 import type { MagicTraySide } from '../types/index.js';
 interface MagicTrayTriggerProps {
     id?: MaybeRef<string>;
-    side: MagicTraySide;
+    side: MagicTraySide | Array<MagicTraySide>;
     disabled?: boolean;
     preventEdgeNavigation?: boolean;
     asChild?: boolean;

package/dist/plugins/MagicTray/src/components/MagicTrayTrigger.vue

@@ -3,7 +3,8 @@
     class="magic-tray-trigger"
     :as-child="asChild"
     :data-id="`${mappedId}-trigger`"
-    :data-side="side"
+    :data-side="mappedSide"
+    :data-axis="axis"
     :data-dragging="active"
     :data-dragged="hasDragged"
     :data-disabled="mappedDisabled"
@@ -21,9 +22,15 @@ import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useTrayState } from "../composables/private/useTrayState";
 import { useTrayGesture } from "../composables/private/useTrayGesture";
 import { MagicTrayInstanceId } from "../symbols";
-const { id, side, disabled, preventEdgeNavigation, asChild } = defineProps({
+const {
+  id,
+  side,
+  disabled,
+  preventEdgeNavigation = void 0,
+  asChild
+} = defineProps({
   id: { type: null, required: false },
-  side: { type: String, required: true },
+  side: { type: [String, Array], required: true },
   disabled: { type: Boolean, required: false },
   preventEdgeNavigation: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false }
@@ -48,6 +55,17 @@ const { active, hasDragged, onPointerdown, onTouchstart } = useTrayGesture({
   preventEdgeNavigation: () => preventEdgeNavigation ?? state.options.preventEdgeNavigation
 });
 const mappedDisabled = computed(() => disabled || state.options.disabled);
+const sides = computed(() => Array.isArray(side) ? side : [side]);
+const mappedSide = computed(() => sides.value.join(" "));
+const axis = computed(() => {
+  const horizontal = sides.value.some(
+    (side2) => side2 === "left" || side2 === "right"
+  );
+  const vertical = sides.value.some(
+    (side2) => side2 === "top" || side2 === "bottom"
+  );
+  return horizontal && vertical ? "both" : vertical ? "y" : "x";
+});
 function isEditable(target) {
   if (!(target instanceof Element)) {
     return false;
@@ -70,16 +88,18 @@ function guardedTouchstart(event) {
 </script>
 
 <style>
-.magic-tray-trigger[data-disabled='false'][data-side='left'],
-.magic-tray-trigger[data-disabled='false'][data-side='right'] {
+.magic-tray-trigger[data-disabled='false'][data-axis='x'] {
   touch-action: var(--magic-tray-trigger-touch-action, pan-y);
 }
 
-.magic-tray-trigger[data-disabled='false'][data-side='top'],
-.magic-tray-trigger[data-disabled='false'][data-side='bottom'] {
+.magic-tray-trigger[data-disabled='false'][data-axis='y'] {
   touch-action: var(--magic-tray-trigger-touch-action, pan-x);
 }
 
+.magic-tray-trigger[data-disabled='false'][data-axis='both'] {
+  touch-action: var(--magic-tray-trigger-touch-action, none);
+}
+
 .magic-tray-trigger[data-dragging='true'] * {
   -webkit-user-drag: none;
 }

package/dist/plugins/MagicTray/src/components/MagicTrayTrigger.vue.d.ts

@@ -2,7 +2,7 @@ import type { MaybeRef } from 'vue';
 import type { MagicTraySide } from '../types/index.js';
 interface MagicTrayTriggerProps {
     id?: MaybeRef<string>;
-    side: MagicTraySide;
+    side: MagicTraySide | Array<MagicTraySide>;
     disabled?: boolean;
     preventEdgeNavigation?: boolean;
     asChild?: boolean;

package/dist/plugins/MagicTray/src/composables/private/useTrayGesture.d.ts

@@ -9,8 +9,8 @@ type UseTrayGestureArgs = {
 export declare function useTrayGesture(args: UseTrayGestureArgs): {
     active: Readonly<import("vue").Ref<boolean, boolean>>;
     hasDragged: import("vue").ComputedRef<boolean>;
-    onPointerdown: (side: MagicTraySide, e: PointerEvent) => void;
-    onTouchstart: (side: MagicTraySide, e: TouchEvent) => void;
+    onPointerdown: (side: MagicTraySide | Array<MagicTraySide>, e: PointerEvent) => void;
+    onTouchstart: (side: MagicTraySide | Array<MagicTraySide>, e: TouchEvent) => void;
 };
 export type UseTrayGestureReturn = ReturnType<typeof useTrayGesture>;
 export {};

package/dist/plugins/MagicTray/src/composables/private/useTrayGesture.mjs

@@ -39,6 +39,7 @@ export function useTrayGesture(args) {
   let cancelTouchcancel = void 0;
   let pointerdownTarget = null;
   let releaseSelection = void 0;
+  let pending = void 0;
   const threshold = computed(() => state.options.threshold);
   const disabled = computed(() => state.options.disabled);
   const snapMode = computed(() => state.options.snap.mode);
@@ -57,8 +58,45 @@ export function useTrayGesture(args) {
   function lockSelectionOnce() {
     releaseSelection ??= lockSelection();
   }
-  function canBegin(side) {
-    return !state.dragging && !toValue(disabled) && state.elRect !== void 0 && isDraggableSide({ snapPoints: state.options.snapPoints, side });
+  function canStart() {
+    return !state.dragging && !toValue(disabled) && state.elRect !== void 0;
+  }
+  function draggableSides(side) {
+    const sides = Array.isArray(side) ? side : [side];
+    return sides.filter(
+      (side2) => isDraggableSide({ snapPoints: state.options.snapPoints, side: side2 })
+    );
+  }
+  function resolveSide(sides, dx, dy) {
+    const horizontal = sides.filter((side) => !isVertical(side));
+    const vertical = sides.filter(isVertical);
+    const alongX = horizontal.length > 0 && (!vertical.length || Math.abs(dx) >= Math.abs(dy));
+    const delta = alongX ? dx : dy;
+    if (Math.abs(delta) <= toValue(threshold).lock) {
+      return void 0;
+    }
+    const candidates = alongX ? horizontal : vertical;
+    const preferred = alongX ? delta > 0 ? "left" : "right" : delta > 0 ? "top" : "bottom";
+    return candidates.includes(preferred) ? preferred : candidates[0];
+  }
+  function resolvePending(x, y) {
+    if (!pending) {
+      return void 0;
+    }
+    if (!canStart()) {
+      pending = void 0;
+      resetListeners();
+      return void 0;
+    }
+    const side = resolveSide(pending.sides, x - pending.x, y - pending.y);
+    if (!side) {
+      return void 0;
+    }
+    const { x: pressX, y: pressY, target, pressedAt } = pending;
+    pending = void 0;
+    beginDrag(side, isVertical(side) ? pressY : pressX, target);
+    state.dragStart = pressedAt;
+    return side;
   }
   function dragBounds(side) {
     const points = mappedSnapPoints(side);
@@ -173,11 +211,11 @@ export function useTrayGesture(args) {
   function emitWillSnapTo(side) {
     const target = settleTarget(side);
     const isPoint = mappedSnapPoints(side).includes(target);
-    const pending = !isPoint && rangeAt(side, target)?.range || target;
-    if (pending === lastPendingTarget) {
+    const pending2 = !isPoint && rangeAt(side, target)?.range || target;
+    if (pending2 === lastPendingTarget) {
       return;
     }
-    lastPendingTarget = pending;
+    lastPendingTarget = pending2;
     const snapPoint = snapPointAt(side, target);
     if (snapPoint === void 0) {
       return;
@@ -204,6 +242,7 @@ export function useTrayGesture(args) {
   }
   function resetDragState() {
     const side = state.draggingSide;
+    pending = void 0;
     if (side) {
       state.lastDragged[side] = state.snapped[side];
     }
@@ -226,7 +265,7 @@ export function useTrayGesture(args) {
     if (e.isTrusted && !e.isPrimary) {
       return;
     }
-    const side = state.draggingSide;
+    const side = state.draggingSide ?? resolvePending(e.clientX, e.clientY);
     if (!side) {
       return;
     }
@@ -269,14 +308,14 @@ export function useTrayGesture(args) {
     guardedReleasePointerCapture({ event: e, element: pointerdownTarget });
   }
   function onTouchmove(e) {
-    const side = state.draggingSide;
-    if (!side) {
-      return;
-    }
     const firstTouch = e.touches[0];
     if (!firstTouch) {
       return;
     }
+    const side = state.draggingSide ?? resolvePending(firstTouch.clientX, firstTouch.clientY);
+    if (!side) {
+      return;
+    }
     e.stopImmediatePropagation();
     e.stopPropagation();
     if (hasDragged.value) {
@@ -355,15 +394,28 @@ export function useTrayGesture(args) {
       interpolateDragged({ side, to: state.snapped[side] });
       resetDragState();
     }
+    pending = void 0;
     resetListeners();
   }
   function onPointerdown(side, e) {
-    if (!canBegin(side)) {
+    const sides = draggableSides(side);
+    if (!canStart() || !sides.length) {
       return;
     }
-    const coord = isVertical(side) ? e.clientY : e.clientX;
     const target = e.target instanceof Element ? e.target : null;
-    beginDrag(side, coord, target);
+    const only = sides.length === 1 ? sides[0] : void 0;
+    if (only) {
+      beginDrag(only, isVertical(only) ? e.clientY : e.clientX, target);
+    } else {
+      pending = {
+        sides,
+        x: e.clientX,
+        y: e.clientY,
+        target,
+        pressedAt: /* @__PURE__ */ new Date()
+      };
+      pointerdownTarget = target;
+    }
     guardedSetPointerCapture({ event: e, element: target });
     resetListeners();
     cancelPointerup = useEventListener(document, "pointerup", onPointerup);
@@ -382,23 +434,42 @@ export function useTrayGesture(args) {
     );
     cancelTouchend = isIOS() || isAndroid() ? useEventListener(document, "touchend", onTouchend) : void 0;
     cancelTouchcancel = isIOS() || isAndroid() ? useEventListener(document, "touchcancel", onTouchend) : void 0;
-    onPointermove(e);
+    if (!pending) {
+      onPointermove(e);
+    }
   }
   function onTouchstart(side, e) {
     if (toValue(preventEdgeNavigation)) {
       cancelEdgeNavigation({ event: e });
     }
-    if (!isAndroid() || !canBegin(side)) {
+    const sides = draggableSides(side);
+    if (!isAndroid() || !canStart() || !sides.length) {
       return;
     }
     const firstTouch = e.touches[0];
     if (!firstTouch) {
       return;
     }
-    e.stopImmediatePropagation();
-    e.stopPropagation();
-    const coord = isVertical(side) ? firstTouch.clientY : firstTouch.clientX;
-    beginDrag(side, coord, e.target instanceof Element ? e.target : null);
+    const target = e.target instanceof Element ? e.target : null;
+    const only = sides.length === 1 ? sides[0] : void 0;
+    if (only) {
+      e.stopImmediatePropagation();
+      e.stopPropagation();
+      beginDrag(
+        only,
+        isVertical(only) ? firstTouch.clientY : firstTouch.clientX,
+        target
+      );
+    } else {
+      pending = {
+        sides,
+        x: firstTouch.clientX,
+        y: firstTouch.clientY,
+        target,
+        pressedAt: /* @__PURE__ */ new Date()
+      };
+      pointerdownTarget = target;
+    }
     cancelTouchmove?.();
     cancelTouchmove = useEventListener(document, "touchmove", onTouchmove, {
       passive: false
@@ -409,7 +480,9 @@ export function useTrayGesture(args) {
     });
     cancelTouchcancel?.();
     cancelTouchcancel = useEventListener(document, "touchcancel", onTouchend);
-    onTouchmove(e);
+    if (!pending) {
+      onTouchmove(e);
+    }
   }
   watch(disabled, (value) => {
     if (value) {