pointrix 1.0.0

package/dist/pointrix-vue.d.mts

@@ -0,0 +1,485 @@
+import { App, ObjectDirective, Ref, ShallowRef } from "vue";
+
+//#region src/nano.d.ts
+interface Point {
+  x: number;
+  y: number;
+}
+interface PointerState {
+  id: number;
+  start: Point;
+  current: Point;
+  previous: Point;
+  delta: Point;
+  total: Point;
+  velocity: Point;
+  timestamp: number;
+}
+interface InteractionEvent {
+  target: HTMLElement;
+  pointers: PointerState[];
+  isPrimary: boolean;
+  originalEvent: PointerEvent;
+}
+interface GripOptions {
+  onStart?: (event: InteractionEvent) => void;
+  onMove?: (event: InteractionEvent) => void;
+  onEnd?: (event: InteractionEvent) => void;
+  onTap?: (event: InteractionEvent) => void;
+  onDoubleTap?: (event: InteractionEvent) => void;
+  onHold?: (event: InteractionEvent) => void;
+  threshold?: number;
+  preventScroll?: boolean;
+  holdDelay?: number;
+  holdDuration?: number;
+  mouseButtons?: number;
+  allowFrom?: string;
+  ignoreFrom?: string;
+  touchAction?: string;
+  styleCursor?: boolean;
+}
+declare class Grip {
+  protected element: HTMLElement;
+  protected options: GripOptions;
+  protected pointers: Map<number, PointerState>;
+  private pointersCache;
+  protected isActive: boolean;
+  protected lastUpdate: number;
+  protected priority: number;
+  private _enabled;
+  private holdTimer;
+  private holdEventTimer;
+  private lastTapTime;
+  private lastTapTarget;
+  private listeners;
+  on(event: string, handler: Function): this;
+  off(event: string, handler: Function): this;
+  protected emit(event: string, data: any): void;
+  get enabled(): boolean;
+  set enabled(value: boolean);
+  get interacting(): boolean;
+  private static elementInstances;
+  private static activeInstance;
+  private static elementListeners;
+  constructor(element: HTMLElement, options?: GripOptions);
+  private registerInstance;
+  private unregisterInstance;
+  protected shouldHandleEvent(_e: PointerEvent): boolean;
+  private checkEventFilters;
+  private static handleElementPointerDown;
+  private onPointerDown;
+  private handlePointerDown;
+  private onPointerMove;
+  private onPointerUp;
+  private start;
+  private end;
+  update(): void;
+  hasActivePointers(): boolean;
+  private createEvent;
+  destroy(): void;
+}
+//#endregion
+//#region src/types.d.ts
+interface Point$2 {
+  x: number;
+  y: number;
+}
+interface ActiveEdges {
+  top: boolean;
+  right: boolean;
+  bottom: boolean;
+  left: boolean;
+}
+interface ModifierContext {
+  position: Point$2;
+  velocity: Point$2;
+  element: HTMLElement;
+  startPosition: Point$2;
+  delta: Point$2;
+  edges?: ActiveEdges;
+  size?: {
+    width: number;
+    height: number;
+  };
+  startSize?: {
+    width: number;
+    height: number;
+  };
+}
+interface ModifierResult {
+  position: Point$2;
+  velocity: Point$2;
+  size?: {
+    width: number;
+    height: number;
+  };
+}
+interface Modifier {
+  name: string;
+  onStart?(context: ModifierContext): void;
+  modify(context: ModifierContext): ModifierResult;
+  onEnd?(context: ModifierContext): ModifierResult | void;
+}
+//#endregion
+//#region src/drag.d.ts
+interface DragOptions extends GripOptions {
+  /** Enable ARIA attributes for accessibility (default: true) */
+  aria?: boolean;
+  axis?: 'x' | 'y' | 'xy' | 'start';
+  startAxis?: 'x' | 'y';
+  handle?: string | HTMLElement;
+  bounds?: 'parent' | HTMLElement | {
+    left?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+  };
+  grid?: {
+    x: number;
+    y: number;
+  };
+  momentum?: boolean | {
+    friction?: number;
+    minSpeed?: number;
+  };
+  modifiers?: Modifier[];
+  droppable?: boolean;
+  cursorChecker?: (action: 'idle' | 'grab' | 'grabbing') => string;
+  onDragStart?: (event: DragEvent) => void;
+  onDragMove?: (event: DragEvent) => void;
+  onDragEnd?: (event: DragEvent) => void;
+}
+interface DragEvent extends InteractionEvent {
+  dx: number;
+  dy: number;
+  totalX: number;
+  totalY: number;
+  velocityX: number;
+  velocityY: number;
+}
+declare class Draggable extends Grip {
+  private dragOptions;
+  private transform;
+  private startTransform;
+  private bounds;
+  private momentum;
+  private transformNormalized;
+  private detectedAxis;
+  private startAxisConfirmed;
+  private cachedSize;
+  private modifierContext;
+  private cachedDragEvent;
+  constructor(element: HTMLElement, options?: DragOptions);
+  protected shouldHandleEvent(e: PointerEvent): boolean;
+  private readCurrentTransform;
+  private handleDragStart;
+  private handleDragMove;
+  private handleDragEnd;
+  private startMomentum;
+  private applyTransform;
+  private createDragEvent;
+  setPosition(x: number, y: number): void;
+  getPosition(): {
+    x: number;
+    y: number;
+  };
+  destroy(): void;
+}
+//#endregion
+//#region src/resize.d.ts
+interface ResizeOptions extends GripOptions {
+  edges?: {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+  };
+  handleSize?: number;
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  aspectRatio?: number | 'preserve';
+  square?: boolean;
+  invert?: 'none' | 'negate' | 'reposition';
+  grid?: {
+    width: number;
+    height: number;
+  };
+  modifiers?: Modifier[];
+  cursorChecker?: (edge: string | null) => string;
+  onResizeStart?: (event: ResizeEvent) => void;
+  onResizeMove?: (event: ResizeEvent) => void;
+  onResizeEnd?: (event: ResizeEvent) => void;
+}
+interface ResizeEvent extends InteractionEvent {
+  width: number;
+  height: number;
+  deltaWidth: number;
+  deltaHeight: number;
+  edges: {
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+  };
+}
+declare class Resizable extends Grip {
+  private resizeOptions;
+  private startSize;
+  private startPos;
+  private currentSize;
+  private currentPos;
+  private activeEdge;
+  private edgeFlags;
+  private aspectRatio;
+  private boundUpdateCursor;
+  private transformNormalized;
+  private modifierContext;
+  private cachedResizeEvent;
+  constructor(element: HTMLElement, options?: ResizeOptions);
+  private normalizeInitialTransform;
+  protected shouldHandleEvent(e: PointerEvent): boolean;
+  private updateCursor;
+  private detectEdge;
+  private getCursor;
+  private handleResizeStart;
+  private handleResizeMove;
+  private handleResizeEnd;
+  private createResizeEvent;
+  setSize(width: number, height: number): void;
+  getSize(): {
+    width: number;
+    height: number;
+  };
+  destroy(): void;
+}
+//#endregion
+//#region src/gesture.d.ts
+interface GestureEvent extends InteractionEvent {
+  scale: number;
+  rotation: number;
+  distance: number;
+  angle: number;
+  center: Point;
+  deltaScale: number;
+  deltaAngle: number;
+}
+interface GestureOptions extends GripOptions {
+  minPointers?: number;
+  onGestureStart?: (event: GestureEvent) => void;
+  onGestureMove?: (event: GestureEvent) => void;
+  onGestureEnd?: (event: GestureEvent) => void;
+}
+declare class Gesturable extends Grip {
+  private gestureOptions;
+  private gestureActive;
+  private startDistance;
+  private startAngle;
+  private prevScale;
+  private prevAngle;
+  private minPointers;
+  constructor(element: HTMLElement, options?: GestureOptions);
+  protected shouldHandleEvent(_e: PointerEvent): boolean;
+  private getTwoPointers;
+  private computeDistance;
+  private computeAngle;
+  private computeCenter;
+  private normalizeAngleDelta;
+  private createGestureEvent;
+  update(): void;
+  private endGesture;
+  destroy(): void;
+}
+//#endregion
+//#region src/dropzone.d.ts
+interface DropEvent {
+  target: HTMLElement;
+  draggable: HTMLElement;
+  dragEvent?: DragEvent;
+  overlap: number;
+}
+interface DropzoneOptions {
+  accept?: string | ((draggable: HTMLElement) => boolean);
+  overlap?: 'pointer' | 'center' | number;
+  activeClass?: string;
+  hoverClass?: string;
+  /** Enable ARIA attributes (default: true) */
+  aria?: boolean;
+  onActivate?: (event: DropEvent) => void;
+  onDeactivate?: (event: DropEvent) => void;
+  onDragEnter?: (event: DropEvent) => void;
+  onDragLeave?: (event: DropEvent) => void;
+  onDragOver?: (event: DropEvent) => void;
+  onDrop?: (event: DropEvent) => void;
+}
+interface Point$1 {
+  x: number;
+  y: number;
+}
+declare class Dropzone {
+  readonly element: HTMLElement;
+  private options;
+  private _isOver;
+  private _isActive;
+  private _enabled;
+  private listeners;
+  on(event: string, handler: Function): this;
+  off(event: string, handler: Function): this;
+  private emit;
+  get enabled(): boolean;
+  set enabled(value: boolean);
+  constructor(element: HTMLElement, options?: DropzoneOptions);
+  get isOver(): boolean;
+  get isActive(): boolean;
+  accepts(draggableEl: HTMLElement): boolean;
+  checkOverlap(draggableEl: HTMLElement, pointerPos: Point$1): number;
+  activate(draggableEl: HTMLElement): void;
+  deactivate(draggableEl: HTMLElement): void;
+  enter(draggableEl: HTMLElement, overlap: number, dragEvent?: DragEvent): void;
+  leave(draggableEl: HTMLElement, dragEvent?: DragEvent): void;
+  over(draggableEl: HTMLElement, overlap: number, dragEvent?: DragEvent): void;
+  drop(draggableEl: HTMLElement, overlap: number, dragEvent?: DragEvent): void;
+  private createEvent;
+  updateOptions(options: Partial<DropzoneOptions>): void;
+  destroy(): void;
+}
+//#endregion
+//#region src/sortable.d.ts
+interface SortableOptions {
+  /** Enable ARIA attributes for accessibility (default: true) */
+  aria?: boolean;
+  /** CSS selector for draggable items within the container (default: direct children) */
+  items?: string;
+  /** Axis of sorting: 'y' for vertical lists, 'x' for horizontal (default: 'y') */
+  axis?: 'x' | 'y';
+  /** CSS selector for drag handle within each item (optional) */
+  handle?: string;
+  /** Animation duration in ms for items shifting out of the way (default: 200) */
+  animationDuration?: number;
+  /** CSS class added to the item being dragged */
+  dragClass?: string;
+  /** CSS class added to a container when a grouped item hovers over it */
+  hoverClass?: string;
+  /**
+   * Group name — sortables with the same group can exchange items.
+   * Items can be dragged between any sortables sharing the same group name.
+   */
+  group?: string;
+  /** Called when order changes during drag (within same container) */
+  onSort?: (event: SortEvent) => void;
+  /** Called when drag ends and order is finalized */
+  onSortEnd?: (event: SortEvent) => void;
+  /** Called when an item is added from another sortable */
+  onAdd?: (event: SortTransferEvent) => void;
+  /** Called when an item is removed to another sortable */
+  onRemove?: (event: SortTransferEvent) => void;
+}
+interface SortEvent {
+  item: HTMLElement;
+  oldIndex: number;
+  newIndex: number;
+  items: HTMLElement[];
+}
+interface SortTransferEvent {
+  item: HTMLElement;
+  from: Sortable;
+  to: Sortable;
+  oldIndex: number;
+  newIndex: number;
+}
+declare class Sortable {
+  readonly container: HTMLElement;
+  private options;
+  private draggables;
+  private itemStates;
+  private dragItem;
+  private dragIndex;
+  private currentIndex;
+  private targetSortable;
+  private targetIndex;
+  private placeholder;
+  private _enabled;
+  private listeners;
+  on(event: string, handler: Function): this;
+  off(event: string, handler: Function): this;
+  private emit;
+  get enabled(): boolean;
+  set enabled(value: boolean);
+  constructor(container: HTMLElement, options?: SortableOptions);
+  getItems(): HTMLElement[];
+  private setup;
+  private handleDragStart;
+  private handleDragMove;
+  private updateWithinIndex;
+  private findTargetContainer;
+  private setTargetSortable;
+  private clearTargetSortable;
+  private updatePlaceholder;
+  private removePlaceholder;
+  private handleDragEnd;
+  snapshotItems(): void;
+  private animateItems;
+  private reorderDOM;
+  /** Refresh the sortable (e.g., after dynamically adding/removing items) */
+  refresh(): void;
+  /** Get the current order of items */
+  getOrder(): HTMLElement[];
+  /** Programmatically move an item */
+  move(fromIndex: number, toIndex: number): void;
+  private teardown;
+  destroy(): void;
+}
+//#endregion
+//#region src/index.d.ts
+interface InteractableOptions {
+  drag?: boolean | DragOptions;
+  resize?: boolean | ResizeOptions;
+  gesture?: boolean | GestureOptions;
+}
+//#endregion
+//#region src/vue.d.ts
+type MaybeRef<T> = T | Ref<T>;
+declare const useGrip: (options?: MaybeRef<GripOptions> | undefined) => {
+  elRef: Ref<HTMLElement | null>;
+  instance: ShallowRef<Grip | null>;
+};
+declare const useDraggable: (options?: MaybeRef<DragOptions> | undefined) => {
+  elRef: Ref<HTMLElement | null>;
+  instance: ShallowRef<Draggable | null>;
+};
+declare const useResizable: (options?: MaybeRef<ResizeOptions> | undefined) => {
+  elRef: Ref<HTMLElement | null>;
+  instance: ShallowRef<Resizable | null>;
+};
+declare const useGesturable: (options?: MaybeRef<GestureOptions> | undefined) => {
+  elRef: Ref<HTMLElement | null>;
+  instance: ShallowRef<Gesturable | null>;
+};
+declare const useDropzone: (options?: MaybeRef<DropzoneOptions> | undefined) => {
+  elRef: Ref<HTMLElement | null>;
+  instance: ShallowRef<Dropzone | null>;
+};
+declare const useSortable: (options?: MaybeRef<SortableOptions> | undefined) => {
+  elRef: Ref<HTMLElement | null>;
+  instance: ShallowRef<Sortable | null>;
+};
+declare function useInteractable(options?: MaybeRef<InteractableOptions>): {
+  elRef: Ref<HTMLElement | null>;
+  instance: ShallowRef<{
+    drag: Draggable | null;
+    resize: Resizable | null;
+    gesture: Gesturable | null;
+    destroy(): void;
+  } | null>;
+};
+declare const vDraggable: ObjectDirective<HTMLElement, DragOptions>;
+declare const vResizable: ObjectDirective<HTMLElement, ResizeOptions>;
+declare const vGesturable: ObjectDirective<HTMLElement, GestureOptions>;
+declare const vSortable: ObjectDirective<HTMLElement, SortableOptions>;
+declare const GripPlugin: {
+  install(app: App): void;
+};
+//#endregion
+export { type DragEvent, type DragOptions, type DropEvent, type DropzoneOptions, type GestureEvent, type GestureOptions, type GripOptions, GripPlugin, type InteractableOptions, type InteractionEvent, type Point, type PointerState, type ResizeEvent, type ResizeOptions, type SortEvent, type SortTransferEvent, type SortableOptions, useDraggable, useDropzone, useGesturable, useGrip, useInteractable, useResizable, useSortable, vDraggable, vGesturable, vResizable, vSortable };
+//# sourceMappingURL=pointrix-vue.d.mts.map

package/dist/pointrix-vue.mjs

@@ -0,0 +1,2 @@
+import{isRef as e,onBeforeUnmount as t,onMounted as n,ref as r,shallowRef as i,unref as a,watch as o}from"vue";let s=null,c=new Set,l=new Set,u=null;function d(){return!u&&typeof PointerEvent<`u`&&(u=new PointerEvent(`pointermove`)),u}function f(){s===null&&(s=requestAnimationFrame(()=>{s=null;for(let e of l)e.update();if(l.clear(),c.size>0){let e=!1;for(let t of c)if(t.hasActivePointers()){e=!0;break}e&&f()}}))}var p=class e{on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),this}off(e,t){return this.listeners.get(e)?.delete(t),this}emit(e,t){let n=this.listeners.get(e);if(n)for(let e of n)e(t)}get enabled(){return this._enabled}set enabled(t){this._enabled=t,!t&&this.isActive&&(this.pointers.clear(),this.pointersCache=[],this.isActive=!1,c.delete(this),l.delete(this),e.activeInstance.get(this.element)===this&&e.activeInstance.set(this.element,null),document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp))}get interacting(){return this.isActive}static{this.elementInstances=new WeakMap}static{this.activeInstance=new WeakMap}static{this.elementListeners=new WeakMap}constructor(t,n={}){this.pointers=new Map,this.pointersCache=[],this.isActive=!1,this.lastUpdate=0,this.priority=0,this._enabled=!0,this.holdTimer=null,this.holdEventTimer=null,this.lastTapTime=0,this.lastTapTarget=null,this.listeners=new Map,this.element=t,this.options={threshold:3,preventScroll:!0,styleCursor:!0,...n},this.registerInstance();let r=e.elementInstances.get(t);if(r&&r.length===1&&(t.style.touchAction=this.options.touchAction??`none`,t.style.userSelect=`none`,t.style.webkitUserSelect=`none`),this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),r&&r.length===1){let n=n=>e.handleElementPointerDown(t,n);e.elementListeners.set(t,n),t.addEventListener(`pointerdown`,n)}}registerInstance(){let t=e.elementInstances.get(this.element);t?t.push(this):e.elementInstances.set(this.element,[this])}unregisterInstance(){let t=e.elementInstances.get(this.element);if(!t)return;let n=t.indexOf(this);n>=0&&(t.splice(n,1),t.length===0?(e.elementInstances.delete(this.element),e.activeInstance.delete(this.element),e.elementListeners.delete(this.element)):e.elementInstances.set(this.element,t))}shouldHandleEvent(e){return!0}checkEventFilters(e){let t=e.target;return t?!(this.options.ignoreFrom&&t.closest(this.options.ignoreFrom)||this.options.allowFrom&&!t.closest(this.options.allowFrom)):!0}static handleElementPointerDown(t,n){let r=e.elementInstances.get(t);if(!r)return;let i=e.activeInstance.get(t);if(i){i.onPointerDown(n);return}let a=null,o=-1;for(let e of r)e.checkEventFilters(n)&&e.shouldHandleEvent(n)&&e.enabled&&e.priority>o&&(a=e,o=e.priority);a&&(e.activeInstance.set(t,a),a.handlePointerDown(n))}onPointerDown(e){this.handlePointerDown(e)}handlePointerDown(e){if(this.options.mouseButtons&&!(e.buttons&this.options.mouseButtons))return;this.options.preventScroll&&e.preventDefault();let t={x:e.clientX,y:e.clientY},n={id:e.pointerId,start:{...t},current:{...t},previous:{...t},delta:{x:0,y:0},total:{x:0,y:0},velocity:{x:0,y:0},timestamp:e.timeStamp};this.pointers.set(e.pointerId,n),this.pointersCache=Array.from(this.pointers.values()),this.pointers.size===1&&(document.addEventListener(`pointermove`,this.onPointerMove,{passive:!1}),document.addEventListener(`pointerup`,this.onPointerUp),document.addEventListener(`pointercancel`,this.onPointerUp)),this.options.onHold&&(this.holdEventTimer&&clearTimeout(this.holdEventTimer),this.holdEventTimer=setTimeout(()=>{this.holdEventTimer=null,this.pointers.size>0&&!this.isActive&&this.options.onHold(this.createEvent(e))},this.options.holdDuration??600));let r=this.options.holdDelay??0;r>0?(this.holdTimer&&clearTimeout(this.holdTimer),this.holdTimer=setTimeout(()=>{this.holdTimer=null,!this.isActive&&this.pointers.size>0&&this.start(e)},r)):this.options.threshold===0&&this.start(e)}onPointerMove(e){let t=this.pointers.get(e.pointerId);if(!t)return;let n=e.clientX,r=e.clientY;if(t.current.x!==n||t.current.y!==r){if(t.current.x=n,t.current.y=r,!this.isActive){let n=t.current.x-t.start.x,r=t.current.y-t.start.y;Math.sqrt(n*n+r*r)>=(this.options.threshold||3)&&(this.holdTimer&&=(clearTimeout(this.holdTimer),null),this.holdEventTimer&&=(clearTimeout(this.holdEventTimer),null),this.start(e))}this.isActive&&(this.options.preventScroll&&e.preventDefault(),c.add(this),l.add(this),f())}}onPointerUp(e){if(this.pointers.get(e.pointerId)&&(this.pointers.delete(e.pointerId),this.pointersCache=Array.from(this.pointers.values()),this.holdTimer&&=(clearTimeout(this.holdTimer),null),this.holdEventTimer&&=(clearTimeout(this.holdEventTimer),null),this.pointers.size===0))if(document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp),this.isActive)this.end(e);else{let t=this.createEvent(e);this.options.onTap&&this.options.onTap(t),this.emit(`tap`,t);let n=e.timeStamp;this.options.onDoubleTap&&n-this.lastTapTime<300&&this.lastTapTarget===e.target&&this.options.onDoubleTap(t),this.lastTapTime=n,this.lastTapTarget=e.target}}start(e){this.isActive=!0,c.add(this);let t=this.createEvent(e);this.options.onStart&&this.options.onStart(t),this.emit(`start`,t)}end(t){this.isActive=!1,c.delete(this),l.delete(this),e.activeInstance.get(this.element)===this&&e.activeInstance.set(this.element,null);let n=this.createEvent(t);this.options.onEnd&&this.options.onEnd(n),this.emit(`end`,n)}update(){if(!this.isActive||this.pointers.size===0)return;let e=performance.now(),t=e-this.lastUpdate;this.lastUpdate=e;let n=!1,r=!1;if(this.pointers.forEach(e=>{let i=e.current.x-e.previous.x,a=e.current.y-e.previous.y;if(i!==0||a!==0){if(n=!0,e.delta.x=i,e.delta.y=a,e.total.x=e.current.x-e.start.x,e.total.y=e.current.y-e.start.y,t>0){let n=i/t*1e3,r=a/t*1e3;e.velocity.x=e.velocity.x*.7+n*.3,e.velocity.y=e.velocity.y*.7+r*.3}e.previous.x=e.current.x,e.previous.y=e.current.y}(Math.abs(e.velocity.x)>.1||Math.abs(e.velocity.y)>.1)&&(r=!0)}),n){let e=d(),t=this.createEvent(e);this.options.onMove&&this.options.onMove(t),this.emit(`move`,t)}r&&l.add(this)}hasActivePointers(){if(!this.isActive||this.pointers.size===0)return!1;for(let e of this.pointers.values())if(Math.abs(e.velocity.x)>.1||Math.abs(e.velocity.y)>.1)return!0;return this.pointers.size>0}createEvent(e){return{target:this.element,pointers:this.pointersCache,isPrimary:e.isPrimary,originalEvent:e}}destroy(){this.holdTimer&&=(clearTimeout(this.holdTimer),null),this.holdEventTimer&&=(clearTimeout(this.holdEventTimer),null),this.unregisterInstance();let t=e.elementInstances.get(this.element);if(!t||t.length===0){let t=e.elementListeners.get(this.element);t&&(this.element.removeEventListener(`pointerdown`,t),e.elementListeners.delete(this.element)),this.element.style.touchAction=``,this.element.style.userSelect=``,this.element.style.webkitUserSelect=``}this.pointers.size>0&&(document.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerUp)),c.delete(this),this.pointers.clear(),this.pointersCache=[]}};function m(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new p(n,t)}function h(e,t){let n=t.position.x,r=t.position.y,i=t.velocity.x,a=t.velocity.y,o=t.size?.width,s=t.size?.height;for(let c of e){t.position.x=n,t.position.y=r,t.velocity.x=i,t.velocity.y=a,t.size&&o!==void 0&&s!==void 0&&(t.size.width=o,t.size.height=s);let e=c.modify(t);n=e.position.x,r=e.position.y,i=e.velocity.x,a=e.velocity.y,e.size&&(o=e.size.width,s=e.size.height)}return{position:{x:n,y:r},velocity:{x:i,y:a},size:o!==void 0&&s!==void 0?{width:o,height:s}:void 0}}let g={instructions:`Press Space or Enter to pick up. Use arrow keys to move. Press Space or Enter to drop. Press Escape to cancel.`,pickedUp:(e,t,n)=>`Picked up ${e}, position ${t} of ${n}`,movedTo:(e,t)=>`Moved to position ${e} of ${t}`,dropped:(e,t,n)=>`Dropped ${e} in position ${t} of ${n}`,dragPickedUp:`Picked up`,dragDropped:`Dropped`};function _(){return g}let v=null;function ee(){return v&&v.isConnected?v:(v=document.createElement(`div`),v.setAttribute(`aria-live`,`assertive`),v.setAttribute(`aria-atomic`,`true`),v.setAttribute(`role`,`status`),v.style.cssText=`position:fixed;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0`,document.body.appendChild(v),v)}function y(e){let t=ee();t.textContent=``,requestAnimationFrame(()=>{t.textContent=e})}let b=null;const x=`grip-instructions`;function S(){return b&&b.isConnected?(b.textContent=g.instructions,x):(b=document.createElement(`div`),b.id=x,b.style.cssText=`position:fixed;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0`,b.textContent=g.instructions,document.body.appendChild(b),x)}function te(e){e.hasAttribute(`tabindex`)||e.setAttribute(`tabindex`,`0`),e.hasAttribute(`role`)||e.setAttribute(`role`,`button`),e.setAttribute(`aria-roledescription`,`draggable`),e.setAttribute(`aria-describedby`,S())}function C(e,t){e.setAttribute(`aria-grabbed`,String(t))}function w(e){e.removeAttribute(`aria-roledescription`),e.removeAttribute(`aria-grabbed`),e.removeAttribute(`aria-describedby`)}function T(e,t,n){e.hasAttribute(`tabindex`)||e.setAttribute(`tabindex`,`0`),e.hasAttribute(`role`)||e.setAttribute(`role`,`option`),e.setAttribute(`aria-roledescription`,`sortable`),e.setAttribute(`aria-describedby`,S()),e.setAttribute(`aria-posinset`,String(t+1)),e.setAttribute(`aria-setsize`,String(n))}function E(e){e.removeAttribute(`aria-roledescription`),e.removeAttribute(`aria-grabbed`),e.removeAttribute(`aria-describedby`),e.removeAttribute(`aria-posinset`),e.removeAttribute(`aria-setsize`)}function D(e){e.hasAttribute(`role`)||e.setAttribute(`role`,`listbox`)}function O(e){e.getAttribute(`role`)===`listbox`&&e.removeAttribute(`role`)}function ne(e){e.setAttribute(`aria-dropeffect`,`move`)}function k(e,t){e.setAttribute(`aria-dropeffect`,t?`move`:`none`)}function A(e){e.removeAttribute(`aria-dropeffect`)}function j(e,t){return t.x>=e.left&&t.x<=e.right&&t.y>=e.top&&t.y<=e.bottom}function M(e,t){let n=Math.max(0,Math.min(e.right,t.right)-Math.max(e.left,t.left))*Math.max(0,Math.min(e.bottom,t.bottom)-Math.max(e.top,t.top)),r=e.width*e.height;return r>0?n/r:0}var re=class{on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),this}off(e,t){return this.listeners.get(e)?.delete(t),this}emit(e,t){let n=this.listeners.get(e);if(n)for(let e of n)e(t)}get enabled(){return this._enabled}set enabled(e){this._enabled=e}constructor(e,t={}){this._isOver=!1,this._isActive=!1,this._enabled=!0,this.listeners=new Map,this.element=e,this.options={overlap:`pointer`,aria:!0,...t},N.register(this),this.options.aria!==!1&&ne(e)}get isOver(){return this._isOver}get isActive(){return this._isActive}accepts(e){if(!this._enabled)return!1;let{accept:t}=this.options;return t?typeof t==`function`?t(e):e.matches(t):!0}checkOverlap(e,t){let n=this.element.getBoundingClientRect(),r=this.options.overlap??`pointer`;if(r===`pointer`)return j(n,t)?1:0;let i=e.getBoundingClientRect();if(r===`center`)return j(n,{x:i.left+i.width/2,y:i.top+i.height/2})?1:0;let a=M(i,n);return a>=r?a:0}activate(e){if(this._isActive)return;this._isActive=!0,this.options.activeClass&&this.element.classList.add(this.options.activeClass),this.options.aria!==!1&&k(this.element,!0);let t=this.createEvent(e,0);this.options.onActivate?.(t),this.emit(`activate`,t)}deactivate(e){if(!this._isActive)return;this._isOver&&this.leave(e),this._isActive=!1,this.options.activeClass&&this.element.classList.remove(this.options.activeClass),this.options.aria!==!1&&k(this.element,!1);let t=this.createEvent(e,0);this.options.onDeactivate?.(t),this.emit(`deactivate`,t)}enter(e,t,n){if(this._isOver)return;this._isOver=!0,this.options.hoverClass&&this.element.classList.add(this.options.hoverClass);let r=this.createEvent(e,t,n);this.options.onDragEnter?.(r),this.emit(`dragenter`,r)}leave(e,t){if(!this._isOver)return;this._isOver=!1,this.options.hoverClass&&this.element.classList.remove(this.options.hoverClass);let n=this.createEvent(e,0,t);this.options.onDragLeave?.(n),this.emit(`dragleave`,n)}over(e,t,n){let r=this.createEvent(e,t,n);this.options.onDragOver?.(r),this.emit(`dragover`,r)}drop(e,t,n){let r=this.createEvent(e,t,n);this.options.onDrop?.(r),this.emit(`drop`,r)}createEvent(e,t,n){return{target:this.element,draggable:e,dragEvent:n,overlap:t}}updateOptions(e){this.options={...this.options,...e}}destroy(){this._isOver=!1,this._isActive=!1,this.options.activeClass&&this.element.classList.remove(this.options.activeClass),this.options.hoverClass&&this.element.classList.remove(this.options.hoverClass),this.options.aria!==!1&&A(this.element),N.unregister(this)}};const N=new class{constructor(){this.zones=new Set}register(e){this.zones.add(e)}unregister(e){this.zones.delete(e)}onDragStart(e){for(let t of this.zones)t.accepts(e)&&t.activate(e)}onDragMove(e,t,n){for(let r of this.zones){if(!r.isActive)continue;let i=r.checkOverlap(e,t);i>0?(r.isOver||r.enter(e,i,n),r.over(e,i,n)):r.isOver&&r.leave(e,n)}}onDragEnd(e,t,n){for(let r of this.zones)if(r.isActive){if(r.isOver){let i=r.checkOverlap(e,t);r.drop(e,i>0?i:1,n)}r.deactivate(e)}}getActiveZones(){let e=[];for(let t of this.zones)t.isActive&&e.push(t);return e}getHoveredZones(){let e=[];for(let t of this.zones)t.isOver&&e.push(t);return e}};function P(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new re(n,t)}var F=class extends p{constructor(e,t={}){super(e,{...t,onStart:e=>{this.handleDragStart(e),t.onStart?.(e)},onMove:e=>{this.handleDragMove(e),t.onMove?.(e)},onEnd:e=>{this.handleDragEnd(e),t.onEnd?.(e)}}),this.transform={x:0,y:0},this.startTransform={x:0,y:0},this.bounds=null,this.momentum={vx:0,vy:0,active:!1},this.transformNormalized=!1,this.detectedAxis=null,this.startAxisConfirmed=!1,this.cachedSize={width:0,height:0},this.modifierContext={position:{x:0,y:0},velocity:{x:0,y:0},element:null,startPosition:{x:0,y:0},delta:{x:0,y:0},size:{width:0,height:0}},this.cachedDragEvent={target:null,originalEvent:null,pointers:[],isPrimary:!0,dx:0,dy:0,totalX:0,totalY:0,velocityX:0,velocityY:0},this.dragOptions=t,this.priority=5,t.styleCursor!==!1&&(e.style.cursor=t.cursorChecker?t.cursorChecker(`idle`):`grab`),t.aria!==!1&&te(e)}shouldHandleEvent(e){if(!this.dragOptions.handle)return!0;let t=null;return t=typeof this.dragOptions.handle==`string`?this.element.querySelector(this.dragOptions.handle):this.dragOptions.handle,t?t.contains(e.target):!1}readCurrentTransform(e){let t=window.getComputedStyle(e).transform;if(t&&t!==`none`){let e=t.match(/matrix.*\((.+)\)/);if(e){let t=e[1].split(`, `);this.transform.x=parseFloat(t[4])||0,this.transform.y=parseFloat(t[5])||0}}else this.transformNormalized||(this.transform.x=0,this.transform.y=0);this.transformNormalized||=(e.style.transform=`translate3d(${this.transform.x}px, ${this.transform.y}px, 0)`,!0)}handleDragStart(e){let t=e.target;if(this.dragOptions.aria!==!1&&(C(t,!0),y(_().dragPickedUp)),this.detectedAxis=null,this.startAxisConfirmed=!1,this.readCurrentTransform(t),this.dragOptions.styleCursor!==!1&&(t.style.cursor=this.dragOptions.cursorChecker?this.dragOptions.cursorChecker(`grabbing`):`grabbing`),t.style.willChange=`transform`,this.startTransform={...this.transform},this.dragOptions.bounds){let e=t.getBoundingClientRect(),n=this.startTransform.x,r=this.startTransform.y,i;if(this.dragOptions.bounds===`parent`){let e=(t.offsetParent||document.body).getBoundingClientRect();i={left:e.left,top:e.top,right:e.right,bottom:e.bottom}}else if(this.dragOptions.bounds instanceof HTMLElement){let e=this.dragOptions.bounds.getBoundingClientRect();i={left:e.left,top:e.top,right:e.right,bottom:e.bottom}}else{let e=this.dragOptions.bounds;i={left:e.left??-1/0,top:e.top??-1/0,right:e.right??1/0,bottom:e.bottom??1/0}}let a=i.left-e.left+n,o=i.top-e.top+r,s=i.right-e.right+n,c=i.bottom-e.bottom+r;this.bounds=new DOMRect(a,o,s-a,c-o)}this.momentum.active=!1;let n=e.target.getBoundingClientRect();if(this.cachedSize.width=n.width,this.cachedSize.height=n.height,this.dragOptions.modifiers?.length){let t=this.modifierContext;t.position.x=this.startTransform.x,t.position.y=this.startTransform.y,t.velocity.x=0,t.velocity.y=0,t.element=e.target,t.startPosition.x=this.startTransform.x,t.startPosition.y=this.startTransform.y,t.delta.x=0,t.delta.y=0,t.size.width=this.cachedSize.width,t.size.height=this.cachedSize.height;for(let e of this.dragOptions.modifiers)e.onStart?.(t)}let r=this.createDragEvent(e,0,0);this.dragOptions.onDragStart&&this.dragOptions.onDragStart(r),this.emit(`dragstart`,r),this.dragOptions.droppable&&N.onDragStart(e.target)}handleDragMove(e){let t=e.pointers[0],n=t.total.x,r=t.total.y;if(this.dragOptions.startAxis&&!this.startAxisConfirmed){let e=Math.abs(n),t=Math.abs(r);if(this.dragOptions.startAxis===`x`&&t>e||this.dragOptions.startAxis===`y`&&e>t)return;this.startAxisConfirmed=!0}if(this.dragOptions.axis===`start`&&this.detectedAxis===null){let e=Math.abs(n),t=Math.abs(r);(e>0||t>0)&&(this.detectedAxis=e>t?`x`:`y`)}let i=this.dragOptions.axis===`start`?this.detectedAxis:this.dragOptions.axis;i===`x`?r=0:i===`y`&&(n=0);let a=this.startTransform.x+n,o=this.startTransform.y+r;if(this.dragOptions.grid&&(a=Math.round(a/this.dragOptions.grid.x)*this.dragOptions.grid.x,o=Math.round(o/this.dragOptions.grid.y)*this.dragOptions.grid.y),this.bounds&&(a=Math.max(this.bounds.left,Math.min(a,this.bounds.right)),o=Math.max(this.bounds.top,Math.min(o,this.bounds.bottom))),this.dragOptions.modifiers?.length){let n=this.modifierContext;n.position.x=a,n.position.y=o,n.velocity.x=t.velocity.x,n.velocity.y=t.velocity.y,n.element=e.target,n.startPosition.x=this.startTransform.x,n.startPosition.y=this.startTransform.y,n.delta.x=t.delta.x,n.delta.y=t.delta.y,n.size.width=this.cachedSize.width,n.size.height=this.cachedSize.height;let r=h(this.dragOptions.modifiers,n);a=r.position.x,o=r.position.y}this.transform={x:a,y:o},this.applyTransform(e.target),this.dragOptions.momentum&&(this.momentum.vx=t.velocity.x,this.momentum.vy=t.velocity.y);let s=this.createDragEvent(e,n,r);this.dragOptions.onDragMove&&this.dragOptions.onDragMove(s),this.emit(`dragmove`,s),this.dragOptions.droppable&&N.onDragMove(e.target,t.current,s)}handleDragEnd(e){let t=e.target;this.dragOptions.aria!==!1&&(C(t,!1),y(_().dragDropped)),this.dragOptions.styleCursor!==!1&&(t.style.cursor=this.dragOptions.cursorChecker?this.dragOptions.cursorChecker(`grab`):`grab`);let n=this.transform.x-this.startTransform.x,r=this.transform.y-this.startTransform.y;if(this.dragOptions.momentum&&(Math.abs(this.momentum.vx)>10||Math.abs(this.momentum.vy)>10)?this.startMomentum():t.style.willChange=``,this.dragOptions.modifiers?.length){let i=e.pointers[0],a={...this.transform},o={position:a,velocity:i?.velocity??{x:0,y:0},element:e.target,startPosition:{...this.startTransform},delta:{x:n,y:r}};for(let e of this.dragOptions.modifiers){let t=e.onEnd?.(o);t&&(a=t.position,o.position=a)}if(a.x!==this.transform.x||a.y!==this.transform.y){this.transform=a,t.style.transition=`transform 300ms cubic-bezier(0.25, 1, 0.5, 1)`,this.applyTransform(t);let e=()=>{t.style.transition=``,t.removeEventListener(`transitionend`,e)};t.addEventListener(`transitionend`,e)}}if(this.dragOptions.droppable){let t=e.pointers[0]?.current??{x:0,y:0};N.onDragEnd(e.target,t,this.createDragEvent(e,n,r))}let i=this.createDragEvent(e,n,r);this.dragOptions.onDragEnd&&this.dragOptions.onDragEnd(i),this.emit(`dragend`,i)}startMomentum(){this.momentum.active=!0;let e=typeof this.dragOptions.momentum==`object`&&this.dragOptions.momentum.friction||.95,t=typeof this.dragOptions.momentum==`object`&&this.dragOptions.momentum.minSpeed||.1,n=()=>{if(this.momentum.active){if(this.momentum.vx*=e,this.momentum.vy*=e,Math.abs(this.momentum.vx)<t&&Math.abs(this.momentum.vy)<t){this.momentum.active=!1,this.element.style.willChange=``;return}this.transform.x+=this.momentum.vx*.016,this.transform.y+=this.momentum.vy*.016,this.bounds&&((this.transform.x<this.bounds.left||this.transform.x>this.bounds.right)&&(this.momentum.vx*=-.5,this.transform.x=Math.max(this.bounds.left,Math.min(this.transform.x,this.bounds.right))),(this.transform.y<this.bounds.top||this.transform.y>this.bounds.bottom)&&(this.momentum.vy*=-.5,this.transform.y=Math.max(this.bounds.top,Math.min(this.transform.y,this.bounds.bottom)))),this.applyTransform(this.element),requestAnimationFrame(n)}};requestAnimationFrame(n)}applyTransform(e){e.style.transform=`translate3d(${this.transform.x}px, ${this.transform.y}px, 0)`}createDragEvent(e,t,n){let r=e.pointers[0],i=this.cachedDragEvent;return i.target=e.target,i.originalEvent=e.originalEvent,i.pointers=e.pointers,i.isPrimary=e.isPrimary,i.dx=r?.delta.x||0,i.dy=r?.delta.y||0,i.totalX=t,i.totalY=n,i.velocityX=r?.velocity.x||0,i.velocityY=r?.velocity.y||0,i}setPosition(e,t){this.transform={x:e,y:t},this.applyTransform(this.element)}getPosition(){return{...this.transform}}destroy(){super.destroy(),this.element.style.cursor=``,this.element.style.willChange=``,this.momentum.active=!1,this.dragOptions.aria!==!1&&w(this.element)}};function I(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new F(n,t)}var ie=class extends p{constructor(e,t={}){let n={edges:{top:!0,right:!0,bottom:!0,left:!0},handleSize:10,minWidth:50,minHeight:50,...t};super(e,{...n,threshold:0,onStart:e=>{this.handleResizeStart(e),t.onStart?.(e)},onMove:e=>{this.handleResizeMove(e),t.onMove?.(e)},onEnd:e=>{this.handleResizeEnd(e),t.onEnd?.(e)}}),this.startSize={width:0,height:0},this.startPos={x:0,y:0},this.currentSize={width:0,height:0},this.currentPos={x:0,y:0},this.activeEdge=null,this.edgeFlags={top:!1,right:!1,bottom:!1,left:!1},this.aspectRatio=null,this.transformNormalized=!1,this.modifierContext={position:{x:0,y:0},velocity:{x:0,y:0},element:null,startPosition:{x:0,y:0},delta:{x:0,y:0},edges:{top:!1,right:!1,bottom:!1,left:!1},size:{width:0,height:0},startSize:{width:0,height:0}},this.cachedResizeEvent={target:null,originalEvent:null,pointers:[],isPrimary:!0,width:0,height:0,deltaWidth:0,deltaHeight:0,edges:{top:!1,right:!1,bottom:!1,left:!1}},this.resizeOptions=n,this.resizeOptions.square&&(this.resizeOptions.aspectRatio=1),this.priority=10,this.boundUpdateCursor=this.updateCursor.bind(this),e.addEventListener(`pointermove`,this.boundUpdateCursor),e.style.position=`relative`}normalizeInitialTransform(e){let t=window.getComputedStyle(e).transform;if(t&&t!==`none`){let n=t.match(/matrix.*\((.+)\)/);if(n){let t=n[1].split(`, `),r=parseFloat(t[4])||0,i=parseFloat(t[5])||0;e.style.transform=`translate3d(${r}px, ${i}px, 0)`}}}shouldHandleEvent(e){return this.detectEdge(e)!==null}updateCursor(e){if(this.activeEdge)return;let t=this.detectEdge(e);this.element.style.cursor=this.resizeOptions.cursorChecker?this.resizeOptions.cursorChecker(t):this.getCursor(t)}detectEdge(e){let t=this.element.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top,i=this.resizeOptions.handleSize||10,a=this.resizeOptions.edges||{},o=a.top&&r<i,s=a.bottom&&r>t.height-i,c=a.left&&n<i,l=a.right&&n>t.width-i;return o&&c?`top-left`:o&&l?`top-right`:s&&c?`bottom-left`:s&&l?`bottom-right`:o?`top`:s?`bottom`:c?`left`:l?`right`:null}getCursor(e){switch(e){case`top`:case`bottom`:return`ns-resize`;case`left`:case`right`:return`ew-resize`;case`top-left`:case`bottom-right`:return`nwse-resize`;case`top-right`:case`bottom-left`:return`nesw-resize`;default:return``}}handleResizeStart(e){this.transformNormalized||=(this.normalizeInitialTransform(this.element),!0);let t=this.element.getBoundingClientRect(),n=window.getComputedStyle(this.element);if(this.activeEdge=this.detectEdge(e.originalEvent),!this.activeEdge)return;this.edgeFlags.top=this.activeEdge.includes(`top`),this.edgeFlags.right=this.activeEdge.includes(`right`),this.edgeFlags.bottom=this.activeEdge.includes(`bottom`),this.edgeFlags.left=this.activeEdge.includes(`left`),this.startSize={width:parseFloat(n.width)||t.width,height:parseFloat(n.height)||t.height},this.currentSize={...this.startSize};let r=n.transform;if(r&&r!==`none`){let e=r.match(/matrix.*\((.+)\)/);if(e){let t=e[1].split(`, `);this.startPos.x=parseFloat(t[4])||0,this.startPos.y=parseFloat(t[5])||0}}else this.startPos.x=0,this.startPos.y=0;this.currentPos={...this.startPos},this.resizeOptions.aspectRatio===`preserve`?this.aspectRatio=this.startSize.width/this.startSize.height:typeof this.resizeOptions.aspectRatio==`number`&&(this.aspectRatio=this.resizeOptions.aspectRatio),this.element.style.willChange=`width, height, transform`;let i=this.createResizeEvent(e,0,0);this.resizeOptions.onResizeStart&&this.resizeOptions.onResizeStart(i),this.emit(`resizestart`,i)}handleResizeMove(e){if(!this.activeEdge)return;let t=e.pointers[0],n=t.total.x,r=t.total.y,i=this.startSize.width,a=this.startSize.height,o=this.startPos.x,s=this.startPos.y;this.edgeFlags.right&&(i+=n),this.edgeFlags.left&&(i-=n,o+=n),this.edgeFlags.bottom&&(a+=r),this.edgeFlags.top&&(a-=r,s+=r);let c=this.resizeOptions.invert||`none`;c===`reposition`&&(i<0&&(o+=i,i=-i),a<0&&(s+=a,a=-a));let l=c===`negate`?-1/0:this.resizeOptions.minWidth||0,u=c===`negate`?-1/0:this.resizeOptions.minHeight||0,d=this.resizeOptions.maxWidth||1/0,f=this.resizeOptions.maxHeight||1/0,p=c===`reposition`?1:l||50,m=c===`reposition`?1:u||50;if(this.aspectRatio&&(this.activeEdge===`left`||this.activeEdge===`right`?a=i/this.aspectRatio:this.activeEdge===`top`||this.activeEdge===`bottom`?i=a*this.aspectRatio:Math.abs(i-this.startSize.width)>Math.abs(a-this.startSize.height)?a=i/this.aspectRatio:i=a*this.aspectRatio),i<p&&(this.edgeFlags.left&&(o+=i-p),i=p,this.aspectRatio&&(a=i/this.aspectRatio)),i>d&&(this.edgeFlags.left&&(o+=i-d),i=d,this.aspectRatio&&(a=i/this.aspectRatio)),a<m&&(this.edgeFlags.top&&(s+=a-m),a=m,this.aspectRatio&&(i=a*this.aspectRatio)),a>f&&(this.edgeFlags.top&&(s+=a-f),a=f,this.aspectRatio&&(i=a*this.aspectRatio)),this.resizeOptions.grid&&(i=Math.round(i/this.resizeOptions.grid.width)*this.resizeOptions.grid.width,a=Math.round(a/this.resizeOptions.grid.height)*this.resizeOptions.grid.height),this.resizeOptions.modifiers?.length){let e=this.modifierContext;e.position.x=o,e.position.y=s,e.velocity.x=t.velocity?.x??0,e.velocity.y=t.velocity?.y??0,e.element=this.element,e.startPosition.x=this.startPos.x,e.startPosition.y=this.startPos.y,e.delta.x=n,e.delta.y=r,e.edges.top=this.edgeFlags.top,e.edges.right=this.edgeFlags.right,e.edges.bottom=this.edgeFlags.bottom,e.edges.left=this.edgeFlags.left,e.size.width=i,e.size.height=a,e.startSize.width=this.startSize.width,e.startSize.height=this.startSize.height;let c=h(this.resizeOptions.modifiers,e);o=c.position.x,s=c.position.y,c.size&&(i=c.size.width,a=c.size.height)}this.currentSize={width:i,height:a},this.currentPos={x:o,y:s},this.element.style.width=`${i}px`,this.element.style.height=`${a}px`,(o!==this.startPos.x||s!==this.startPos.y)&&(this.element.style.transform=`translate3d(${o}px, ${s}px, 0)`);let g=i-this.startSize.width,_=a-this.startSize.height,v=this.createResizeEvent(e,g,_);this.resizeOptions.onResizeMove&&this.resizeOptions.onResizeMove(v),this.emit(`resizemove`,v)}handleResizeEnd(e){this.element.style.willChange=``,this.activeEdge=null;let t=this.currentSize.width-this.startSize.width,n=this.currentSize.height-this.startSize.height,r=this.createResizeEvent(e,t,n);this.resizeOptions.onResizeEnd&&this.resizeOptions.onResizeEnd(r),this.emit(`resizeend`,r)}createResizeEvent(e,t,n){let r=this.cachedResizeEvent;return r.target=e.target,r.originalEvent=e.originalEvent,r.pointers=e.pointers,r.isPrimary=e.isPrimary,r.width=this.currentSize.width,r.height=this.currentSize.height,r.deltaWidth=t,r.deltaHeight=n,r.edges.top=this.edgeFlags.top,r.edges.right=this.edgeFlags.right,r.edges.bottom=this.edgeFlags.bottom,r.edges.left=this.edgeFlags.left,r}setSize(e,t){this.currentSize={width:e,height:t},this.element.style.width=`${e}px`,this.element.style.height=`${t}px`}getSize(){return{...this.currentSize}}destroy(){super.destroy(),this.element.removeEventListener(`pointermove`,this.boundUpdateCursor),this.element.style.cursor=``,this.element.style.willChange=``}};function L(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new ie(n,t)}var ae=class extends p{constructor(e,t={}){super(e,{...t,threshold:0}),this.gestureActive=!1,this.startDistance=0,this.startAngle=0,this.prevScale=1,this.prevAngle=0,this.gestureOptions=t,this.minPointers=t.minPointers??2,this.priority=15}shouldHandleEvent(e){return!0}getTwoPointers(){if(this.pointers.size<2)return null;let e=this.pointers.values(),t=e.next().value,n=e.next().value;return[t.current,n.current]}computeDistance(e,t){let n=t.x-e.x,r=t.y-e.y;return Math.sqrt(n*n+r*r)}computeAngle(e,t){return Math.atan2(t.y-e.y,t.x-e.x)*180/Math.PI}computeCenter(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}normalizeAngleDelta(e){for(;e>180;)e-=360;for(;e<-180;)e+=360;return e}createGestureEvent(e,t){return{...e,scale:t.scale??1,rotation:t.rotation??0,distance:t.distance??0,angle:t.angle??0,center:t.center??{x:0,y:0},deltaScale:t.deltaScale??0,deltaAngle:t.deltaAngle??0}}update(){if(!this.isActive||this.pointers.size===0)return;let e=this.getTwoPointers();if(!this.gestureActive&&e&&this.pointers.size>=this.minPointers){this.gestureActive=!0;let[t,n]=e;this.startDistance=this.computeDistance(t,n),this.startAngle=this.computeAngle(t,n),this.prevScale=1,this.prevAngle=0;let r={target:this.element,pointers:Array.from(this.pointers.values()),isPrimary:!1,originalEvent:new PointerEvent(`pointermove`)},i=this.createGestureEvent(r,{scale:1,rotation:0,distance:this.startDistance,angle:this.startAngle,center:this.computeCenter(t,n),deltaScale:0,deltaAngle:0});this.gestureOptions.onGestureStart&&this.gestureOptions.onGestureStart(i),this.emit(`gesturestart`,i);return}if(this.gestureActive&&this.pointers.size<this.minPointers){this.endGesture(),super.update();return}if(this.gestureActive&&e){let[t,n]=e,r=this.computeDistance(t,n),i=this.computeAngle(t,n),a=this.computeCenter(t,n),o=this.startDistance>0?r/this.startDistance:1,s=this.normalizeAngleDelta(i-this.startAngle),c=o-this.prevScale,l=this.normalizeAngleDelta(s-this.prevAngle);this.prevScale=o,this.prevAngle=s;let u={target:this.element,pointers:Array.from(this.pointers.values()),isPrimary:!1,originalEvent:new PointerEvent(`pointermove`)},d=this.createGestureEvent(u,{scale:o,rotation:s,distance:r,angle:i,center:a,deltaScale:c,deltaAngle:l});this.gestureOptions.onGestureMove&&this.gestureOptions.onGestureMove(d),this.emit(`gesturemove`,d)}super.update()}endGesture(){if(!this.gestureActive)return;this.gestureActive=!1;let e={target:this.element,pointers:Array.from(this.pointers.values()),isPrimary:!1,originalEvent:new PointerEvent(`pointerup`)},t=this.getTwoPointers(),n=t?this.computeDistance(t[0],t[1]):0,r=t?this.computeAngle(t[0],t[1]):0,i=t?this.computeCenter(t[0],t[1]):{x:0,y:0},a=this.startDistance>0&&n>0?n/this.startDistance:this.prevScale,o=this.createGestureEvent(e,{scale:a,rotation:this.prevAngle,distance:n,angle:r,center:i,deltaScale:0,deltaAngle:0});this.gestureOptions.onGestureEnd&&this.gestureOptions.onGestureEnd(o),this.emit(`gestureend`,o)}destroy(){this.gestureActive&&this.endGesture(),super.destroy()}};function R(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new ae(n,t)}const z=new Map;function B(e,t){z.has(e)||z.set(e,new Set),z.get(e).add(t)}function V(e,t){let n=z.get(e);n&&(n.delete(t),n.size===0&&z.delete(e))}function H(e){let t=z.get(e);return t?Array.from(t):[]}var U=class{on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),this}off(e,t){return this.listeners.get(e)?.delete(t),this}emit(e,t){let n=this.listeners.get(e);if(n)for(let e of n)e(t)}get enabled(){return this._enabled}set enabled(e){this._enabled=e}constructor(e,t={}){this.draggables=[],this.itemStates=[],this.dragItem=null,this.dragIndex=-1,this.currentIndex=-1,this.targetSortable=null,this.targetIndex=-1,this.placeholder=null,this._enabled=!0,this.listeners=new Map,this.container=e,this.options={items:t.items??``,axis:t.axis??`y`,handle:t.handle??``,animationDuration:t.animationDuration??200,dragClass:t.dragClass??`sortable-dragging`,hoverClass:t.hoverClass??`sortable-hover`,group:t.group??``,onSort:t.onSort??(()=>{}),onSortEnd:t.onSortEnd??(()=>{}),onAdd:t.onAdd??(()=>{}),onRemove:t.onRemove??(()=>{}),aria:t.aria??!0},this.options.group&&B(this.options.group,this),this.options.aria&&D(e),this.setup()}getItems(){return this.options.items?Array.from(this.container.querySelectorAll(this.options.items+`:not(.sortable-placeholder)`)):Array.from(this.container.children).filter(e=>!e.classList.contains(`sortable-placeholder`))}setup(){this.teardown();let e=this.getItems();if(this.options.aria)for(let t=0;t<e.length;t++)T(e[t],t,e.length);for(let t of e){let e={aria:!1,axis:this.options.group?void 0:this.options.axis,handle:this.options.handle||void 0,onDragStart:e=>this.handleDragStart(t,e),onDragMove:e=>this.handleDragMove(t,e),onDragEnd:e=>this.handleDragEnd(t,e)};this.draggables.push(new F(t,e))}}handleDragStart(e,t){if(!this._enabled)return;this.dragItem=e;let n=this.getItems();if(this.dragIndex=n.indexOf(e),this.currentIndex=this.dragIndex,this.targetSortable=null,this.targetIndex=-1,this.snapshotItems(),e.classList.add(this.options.dragClass),e.style.zIndex=`9999`,e.style.position=`relative`,this.options.aria){C(e,!0);let t=e.textContent?.trim()||`Item ${this.dragIndex+1}`;y(_().pickedUp(t,this.dragIndex+1,n.length))}}handleDragMove(e,t){if(!this.dragItem)return;let n=e.getBoundingClientRect(),r=n.left+n.width/2,i=n.top+n.height/2;if(this.options.group){let n=this.findTargetContainer(r,i);if(n&&n!==this){this.setTargetSortable(n,r,i),this.updateWithinIndex(e,t);return}else this.targetSortable&&this.clearTargetSortable()}this.updateWithinIndex(e,t)}updateWithinIndex(e,t){let n=this.options.axis===`y`,r=this.itemStates[this.dragIndex];if(!r)return;let i=n?t.totalY:t.totalX,a=n?r.rect.top+r.rect.height/2+i:r.rect.left+r.rect.width/2+i,o=0;for(let e=0;e<this.itemStates.length;e++){if(e===this.dragIndex)continue;let t=this.itemStates[e];a>(n?t.rect.top+t.rect.height/2:t.rect.left+t.rect.width/2)&&o++}if(o=Math.max(0,Math.min(o,this.itemStates.length-1)),o!==this.currentIndex){this.currentIndex=o,this.animateItems(e);let t={item:e,oldIndex:this.dragIndex,newIndex:o,items:this.getItems()};this.options.onSort(t),this.emit(`sort`,t),this.options.aria&&y(_().movedTo(o+1,this.itemStates.length))}}findTargetContainer(e,t){for(let n of H(this.options.group)){if(n===this)continue;let r=n.container.getBoundingClientRect();if(e>=r.left&&e<=r.right&&t>=r.top&&t<=r.bottom)return n}return null}setTargetSortable(e,t,n){let r=this.targetSortable!==e;if(this.targetSortable=e,r){for(let e of H(this.options.group))e!==this&&e.container.classList.remove(this.options.hoverClass);e.container.classList.add(this.options.hoverClass)}let i=this.options.axis===`y`,a=e.getItems(),o=a.length;for(let e=0;e<a.length;e++){let r=a[e].getBoundingClientRect(),s=i?r.top+r.height/2:r.left+r.width/2;if((i?n:t)<s){o=e;break}}(o!==this.targetIndex||r)&&(this.targetIndex=o,this.updatePlaceholder(e,o))}clearTargetSortable(){this.targetSortable&&this.targetSortable.container.classList.remove(this.options.hoverClass),this.targetSortable=null,this.targetIndex=-1,this.removePlaceholder()}updatePlaceholder(e,t){if(this.removePlaceholder(),!this.dragItem)return;let n=document.createElement(`div`);n.className=`sortable-placeholder`;let r=this.dragItem.getBoundingClientRect();n.style.height=`${r.height}px`,n.style.width=`${r.width}px`,n.style.border=`2px dashed currentColor`,n.style.borderRadius=`6px`,n.style.opacity=`0.3`,n.style.transition=`all 150ms ease`,n.style.boxSizing=`border-box`;let i=e.getItems();t>=i.length?e.container.appendChild(n):i[t].before(n),this.placeholder=n}removePlaceholder(){this.placeholder&&=(this.placeholder.remove(),null)}handleDragEnd(e,t){if(!this.dragItem)return;let n=this.dragIndex,r=this.targetSortable!==null;if(e.classList.remove(this.options.dragClass),e.style.zIndex=``,this.options.aria&&C(e,!1),r&&this.targetSortable){let t=this.targetSortable,r=this.targetIndex;this.removePlaceholder(),t.container.classList.remove(this.options.hoverClass),e.style.transform=``,e.style.transition=``;let i=t.getItems();r>=i.length?t.container.appendChild(e):i[r].before(e);let a=t.getItems().indexOf(e),o={item:e,from:this,to:t,oldIndex:n,newIndex:a};this.options.onRemove(o),this.emit(`remove`,o);let s={item:e,from:this,to:t,oldIndex:n,newIndex:a};t.options.onAdd(s),t.emit(`add`,s);let c={item:e,oldIndex:-1,newIndex:a,items:t.getItems()};t.options.onSortEnd(c),t.emit(`sortend`,c)}else{let t=this.currentIndex;if(n!==t){let e=this.getItems();this.reorderDOM(e,n,t)}let r={item:e,oldIndex:n,newIndex:t,items:this.getItems()};this.options.onSortEnd(r),this.emit(`sortend`,r)}for(let e of this.getItems())e.style.transform=``,e.style.transition=``;if(this.options.aria){let t=e.textContent?.trim()||`Item`,n=this.getItems(),r=n.indexOf(e);y(_().dropped(t,r+1,n.length));for(let e=0;e<n.length;e++)T(n[e],e,n.length)}if(this.dragItem=null,this.dragIndex=-1,this.currentIndex=-1,this.targetSortable=null,this.targetIndex=-1,this.setup(),this.options.group)for(let e of H(this.options.group))e!==this&&e.setup()}snapshotItems(){this.itemStates=this.getItems().map((e,t)=>({el:e,rect:e.getBoundingClientRect(),originalIndex:t}))}animateItems(e){let t=this.options.axis===`y`,n=this.options.animationDuration,r=this.dragIndex,i=this.currentIndex;for(let a=0;a<this.itemStates.length;a++){if(this.itemStates[a].el===e)continue;let o=this.itemStates[a].el,s=0;if(r<i&&a>r&&a<=i){let e=this.itemStates[a-1].rect,n=this.itemStates[a].rect;s=t?e.top-n.top:e.left-n.left}else if(r>i&&a>=i&&a<r){let e=this.itemStates[a+1].rect,n=this.itemStates[a].rect;s=t?e.top-n.top:e.left-n.left}o.style.transition=`transform ${n}ms ease`,o.style.transform=t?`translateY(${s}px)`:`translateX(${s}px)`}}reorderDOM(e,t,n){let r=e[t];t<n?e[n].after(r):e[n].before(r)}refresh(){this.setup()}getOrder(){return this.getItems()}move(e,t){let n=this.getItems();if(e<0||e>=n.length||t<0||t>=n.length||e===t)return;this.reorderDOM(n,e,t);let r={item:n[e],oldIndex:e,newIndex:t,items:this.getItems()};this.options.onSortEnd(r),this.emit(`sortend`,r),this.setup()}teardown(){for(let e of this.draggables)e.destroy();this.draggables=[]}destroy(){this.teardown(),this.removePlaceholder();let e=this.getItems();for(let t of e)t.style.transform=``,t.style.transition=``,this.options.aria&&E(t);this.options.aria&&O(this.container),this.options.group&&V(this.options.group,this)}};function W(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Container not found: ${e}`);return new U(n,t)}function G(e,t={}){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);let r=null,i=null,a=null;return t.drag&&(r=I(n,typeof t.drag==`object`?t.drag:{})),t.resize&&(i=L(n,typeof t.resize==`object`?t.resize:{})),t.gesture&&(a=R(n,typeof t.gesture==`object`?t.gesture:{})),{drag:r,resize:i,gesture:a,destroy(){r?.destroy(),i?.destroy(),a?.destroy()}}}const K=Symbol(`grip`);function q(s){return function(c){let l=r(null),u=i(null);function d(){if(f(),!l.value)return;let t=(e(c)?a(c):c)??{};u.value=s(l.value,t)}function f(){u.value&&=(u.value.destroy(),null)}return n(()=>{d(),e(c)&&o(c,()=>d(),{deep:!0})}),t(()=>{f()}),{elRef:l,instance:u}}}const oe=q(m),se=q(I),ce=q(L),le=q(R),ue=q(P),de=q(W);function J(s){let c=r(null),l=i(null);function u(){if(d(),!c.value)return;let t=(e(s)?a(s):s)??{};l.value=G(c.value,t)}function d(){l.value&&=(l.value.destroy(),null)}return n(()=>{u(),e(s)&&o(s,()=>u(),{deep:!0})}),t(()=>{d()}),{elRef:c,instance:l}}function Y(e){return{mounted(t,n){t[K]=e(t,n.value??{})},updated(t,n){n.value!==n.oldValue&&(t[K]?.destroy(),t[K]=e(t,n.value??{}))},beforeUnmount(e){e[K]?.destroy(),delete e[K]}}}const X=Y(I),Z=Y(L),Q=Y(R),$=Y(W),fe={install(e){e.directive(`draggable`,X),e.directive(`resizable`,Z),e.directive(`gesturable`,Q),e.directive(`sortable`,$)}};export{fe as GripPlugin,se as useDraggable,ue as useDropzone,le as useGesturable,oe as useGrip,J as useInteractable,ce as useResizable,de as useSortable,X as vDraggable,Q as vGesturable,Z as vResizable,$ as vSortable};
+//# sourceMappingURL=pointrix-vue.mjs.map