pointrix 1.0.0

package/dist/pointrix-drag.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=null,t=new Set,n=new Set,r=null;function i(){return!r&&typeof PointerEvent<`u`&&(r=new PointerEvent(`pointermove`)),r}function a(){e===null&&(e=requestAnimationFrame(()=>{e=null;for(let e of n)e.update();if(n.clear(),t.size>0){let e=!1;for(let n of t)if(n.hasActivePointers()){e=!0;break}e&&a()}}))}var o=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(r){this._enabled=r,!r&&this.isActive&&(this.pointers.clear(),this.pointersCache=[],this.isActive=!1,t.delete(this),n.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 r=this.pointers.get(e.pointerId);if(!r)return;let i=e.clientX,o=e.clientY;if(r.current.x!==i||r.current.y!==o){if(r.current.x=i,r.current.y=o,!this.isActive){let t=r.current.x-r.start.x,n=r.current.y-r.start.y;Math.sqrt(t*t+n*n)>=(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(),t.add(this),n.add(this),a())}}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,t.add(this);let n=this.createEvent(e);this.options.onStart&&this.options.onStart(n),this.emit(`start`,n)}end(r){this.isActive=!1,t.delete(this),n.delete(this),e.activeInstance.get(this.element)===this&&e.activeInstance.set(this.element,null);let i=this.createEvent(r);this.options.onEnd&&this.options.onEnd(i),this.emit(`end`,i)}update(){if(!this.isActive||this.pointers.size===0)return;let e=performance.now(),t=e-this.lastUpdate;this.lastUpdate=e;let r=!1,a=!1;if(this.pointers.forEach(e=>{let n=e.current.x-e.previous.x,i=e.current.y-e.previous.y;if(n!==0||i!==0){if(r=!0,e.delta.x=n,e.delta.y=i,e.total.x=e.current.x-e.start.x,e.total.y=e.current.y-e.start.y,t>0){let r=n/t*1e3,a=i/t*1e3;e.velocity.x=e.velocity.x*.7+r*.3,e.velocity.y=e.velocity.y*.7+a*.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)&&(a=!0)}),r){let e=i(),t=this.createEvent(e);this.options.onMove&&this.options.onMove(t),this.emit(`move`,t)}a&&n.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 n=e.elementInstances.get(this.element);if(!n||n.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)),t.delete(this),this.pointers.clear(),this.pointersCache=[]}};function s(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 c={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 l(){return c}let u=null;function d(){return u&&u.isConnected?u:(u=document.createElement(`div`),u.setAttribute(`aria-live`,`assertive`),u.setAttribute(`aria-atomic`,`true`),u.setAttribute(`role`,`status`),u.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(u),u)}function f(e){let t=d();t.textContent=``,requestAnimationFrame(()=>{t.textContent=e})}let p=null;const m=`grip-instructions`;function h(){return p&&p.isConnected?(p.textContent=c.instructions,m):(p=document.createElement(`div`),p.id=m,p.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`,p.textContent=c.instructions,document.body.appendChild(p),m)}function g(e){e.hasAttribute(`tabindex`)||e.setAttribute(`tabindex`,`0`),e.hasAttribute(`role`)||e.setAttribute(`role`,`button`),e.setAttribute(`aria-roledescription`,`draggable`),e.setAttribute(`aria-describedby`,h())}function _(e,t){e.setAttribute(`aria-grabbed`,String(t))}function v(e){e.removeAttribute(`aria-roledescription`),e.removeAttribute(`aria-grabbed`),e.removeAttribute(`aria-describedby`)}const y=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}};var b=class extends o{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&&g(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&&(_(t,!0),f(l().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&&y.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=s(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 c=this.createDragEvent(e,n,r);this.dragOptions.onDragMove&&this.dragOptions.onDragMove(c),this.emit(`dragmove`,c),this.dragOptions.droppable&&y.onDragMove(e.target,t.current,c)}handleDragEnd(e){let t=e.target;this.dragOptions.aria!==!1&&(_(t,!1),f(l().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};y.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&&v(this.element)}};function x(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new b(n,t)}exports.Draggable=b,exports.default=x,exports.draggable=x;

package/dist/pointrix-drag.d.cts

@@ -0,0 +1,189 @@
+//#region src/nano.d.ts
+interface Point$1 {
+  x: number;
+  y: number;
+}
+interface PointerState {
+  id: number;
+  start: Point$1;
+  current: Point$1;
+  previous: Point$1;
+  delta: Point$1;
+  total: Point$1;
+  velocity: Point$1;
+  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 {
+  x: number;
+  y: number;
+}
+interface ActiveEdges {
+  top: boolean;
+  right: boolean;
+  bottom: boolean;
+  left: boolean;
+}
+interface ModifierContext {
+  position: Point;
+  velocity: Point;
+  element: HTMLElement;
+  startPosition: Point;
+  delta: Point;
+  edges?: ActiveEdges;
+  size?: {
+    width: number;
+    height: number;
+  };
+  startSize?: {
+    width: number;
+    height: number;
+  };
+}
+interface ModifierResult {
+  position: Point;
+  velocity: Point;
+  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;
+}
+declare function draggable(element: HTMLElement | string, options?: DragOptions): Draggable;
+//#endregion
+export { DragEvent, DragOptions, Draggable, draggable as default, draggable };
+//# sourceMappingURL=pointrix-drag.d.cts.map

package/dist/pointrix-drag.d.mts

@@ -0,0 +1,189 @@
+//#region src/nano.d.ts
+interface Point$1 {
+  x: number;
+  y: number;
+}
+interface PointerState {
+  id: number;
+  start: Point$1;
+  current: Point$1;
+  previous: Point$1;
+  delta: Point$1;
+  total: Point$1;
+  velocity: Point$1;
+  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 {
+  x: number;
+  y: number;
+}
+interface ActiveEdges {
+  top: boolean;
+  right: boolean;
+  bottom: boolean;
+  left: boolean;
+}
+interface ModifierContext {
+  position: Point;
+  velocity: Point;
+  element: HTMLElement;
+  startPosition: Point;
+  delta: Point;
+  edges?: ActiveEdges;
+  size?: {
+    width: number;
+    height: number;
+  };
+  startSize?: {
+    width: number;
+    height: number;
+  };
+}
+interface ModifierResult {
+  position: Point;
+  velocity: Point;
+  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;
+}
+declare function draggable(element: HTMLElement | string, options?: DragOptions): Draggable;
+//#endregion
+export { DragEvent, DragOptions, Draggable, draggable as default, draggable };
+//# sourceMappingURL=pointrix-drag.d.mts.map

package/dist/pointrix-drag.mjs

@@ -0,0 +1,2 @@
+let e=null,t=new Set,n=new Set,r=null;function i(){return!r&&typeof PointerEvent<`u`&&(r=new PointerEvent(`pointermove`)),r}function a(){e===null&&(e=requestAnimationFrame(()=>{e=null;for(let e of n)e.update();if(n.clear(),t.size>0){let e=!1;for(let n of t)if(n.hasActivePointers()){e=!0;break}e&&a()}}))}var o=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(r){this._enabled=r,!r&&this.isActive&&(this.pointers.clear(),this.pointersCache=[],this.isActive=!1,t.delete(this),n.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 r=this.pointers.get(e.pointerId);if(!r)return;let i=e.clientX,o=e.clientY;if(r.current.x!==i||r.current.y!==o){if(r.current.x=i,r.current.y=o,!this.isActive){let t=r.current.x-r.start.x,n=r.current.y-r.start.y;Math.sqrt(t*t+n*n)>=(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(),t.add(this),n.add(this),a())}}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,t.add(this);let n=this.createEvent(e);this.options.onStart&&this.options.onStart(n),this.emit(`start`,n)}end(r){this.isActive=!1,t.delete(this),n.delete(this),e.activeInstance.get(this.element)===this&&e.activeInstance.set(this.element,null);let i=this.createEvent(r);this.options.onEnd&&this.options.onEnd(i),this.emit(`end`,i)}update(){if(!this.isActive||this.pointers.size===0)return;let e=performance.now(),t=e-this.lastUpdate;this.lastUpdate=e;let r=!1,a=!1;if(this.pointers.forEach(e=>{let n=e.current.x-e.previous.x,i=e.current.y-e.previous.y;if(n!==0||i!==0){if(r=!0,e.delta.x=n,e.delta.y=i,e.total.x=e.current.x-e.start.x,e.total.y=e.current.y-e.start.y,t>0){let r=n/t*1e3,a=i/t*1e3;e.velocity.x=e.velocity.x*.7+r*.3,e.velocity.y=e.velocity.y*.7+a*.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)&&(a=!0)}),r){let e=i(),t=this.createEvent(e);this.options.onMove&&this.options.onMove(t),this.emit(`move`,t)}a&&n.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 n=e.elementInstances.get(this.element);if(!n||n.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)),t.delete(this),this.pointers.clear(),this.pointersCache=[]}};function s(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 c={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 l(){return c}let u=null;function d(){return u&&u.isConnected?u:(u=document.createElement(`div`),u.setAttribute(`aria-live`,`assertive`),u.setAttribute(`aria-atomic`,`true`),u.setAttribute(`role`,`status`),u.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(u),u)}function f(e){let t=d();t.textContent=``,requestAnimationFrame(()=>{t.textContent=e})}let p=null;const m=`grip-instructions`;function h(){return p&&p.isConnected?(p.textContent=c.instructions,m):(p=document.createElement(`div`),p.id=m,p.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`,p.textContent=c.instructions,document.body.appendChild(p),m)}function g(e){e.hasAttribute(`tabindex`)||e.setAttribute(`tabindex`,`0`),e.hasAttribute(`role`)||e.setAttribute(`role`,`button`),e.setAttribute(`aria-roledescription`,`draggable`),e.setAttribute(`aria-describedby`,h())}function _(e,t){e.setAttribute(`aria-grabbed`,String(t))}function v(e){e.removeAttribute(`aria-roledescription`),e.removeAttribute(`aria-grabbed`),e.removeAttribute(`aria-describedby`)}const y=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}};var b=class extends o{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&&g(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&&(_(t,!0),f(l().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&&y.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=s(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 c=this.createDragEvent(e,n,r);this.dragOptions.onDragMove&&this.dragOptions.onDragMove(c),this.emit(`dragmove`,c),this.dragOptions.droppable&&y.onDragMove(e.target,t.current,c)}handleDragEnd(e){let t=e.target;this.dragOptions.aria!==!1&&(_(t,!1),f(l().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};y.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&&v(this.element)}};function x(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new b(n,t)}export{b as Draggable,x as default,x as draggable};
+//# sourceMappingURL=pointrix-drag.mjs.map

package/dist/pointrix-dropzone.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});function e(e){e.setAttribute(`aria-dropeffect`,`move`)}function t(e,t){e.setAttribute(`aria-dropeffect`,t?`move`:`none`)}function n(e){e.removeAttribute(`aria-dropeffect`)}function r(e,t){return t.x>=e.left&&t.x<=e.right&&t.y>=e.top&&t.y<=e.bottom}function i(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 a=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(t,n={}){this._isOver=!1,this._isActive=!1,this._enabled=!0,this.listeners=new Map,this.element=t,this.options={overlap:`pointer`,aria:!0,...n},o.register(this),this.options.aria!==!1&&e(t)}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(),a=this.options.overlap??`pointer`;if(a===`pointer`)return r(n,t)?1:0;let o=e.getBoundingClientRect();if(a===`center`)return r(n,{x:o.left+o.width/2,y:o.top+o.height/2})?1:0;let s=i(o,n);return s>=a?s:0}activate(e){if(this._isActive)return;this._isActive=!0,this.options.activeClass&&this.element.classList.add(this.options.activeClass),this.options.aria!==!1&&t(this.element,!0);let n=this.createEvent(e,0);this.options.onActivate?.(n),this.emit(`activate`,n)}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&&t(this.element,!1);let n=this.createEvent(e,0);this.options.onDeactivate?.(n),this.emit(`deactivate`,n)}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&&n(this.element),o.unregister(this)}};const o=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 s(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new a(n,t)}exports.Dropzone=a,exports.DropzoneManager=o,exports.default=s,exports.dropzone=s;

package/dist/pointrix-dropzone.d.cts

@@ -0,0 +1,99 @@
+//#region src/nano.d.ts
+interface Point$1 {
+  x: number;
+  y: number;
+}
+interface PointerState {
+  id: number;
+  start: Point$1;
+  current: Point$1;
+  previous: Point$1;
+  delta: Point$1;
+  total: Point$1;
+  velocity: Point$1;
+  timestamp: number;
+}
+interface InteractionEvent {
+  target: HTMLElement;
+  pointers: PointerState[];
+  isPrimary: boolean;
+  originalEvent: PointerEvent;
+}
+//#endregion
+//#region src/drag.d.ts
+interface DragEvent extends InteractionEvent {
+  dx: number;
+  dy: number;
+  totalX: number;
+  totalY: number;
+  velocityX: number;
+  velocityY: number;
+}
+//#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 {
+  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): 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;
+}
+declare class DropzoneManagerSingleton {
+  private zones;
+  register(zone: Dropzone): void;
+  unregister(zone: Dropzone): void;
+  onDragStart(draggableEl: HTMLElement): void;
+  onDragMove(draggableEl: HTMLElement, pointerPos: Point, dragEvent?: DragEvent): void;
+  onDragEnd(draggableEl: HTMLElement, pointerPos: Point, dragEvent?: DragEvent): void;
+  getActiveZones(): Dropzone[];
+  getHoveredZones(): Dropzone[];
+}
+declare const DropzoneManager: DropzoneManagerSingleton;
+declare function dropzone(element: HTMLElement | string, options?: DropzoneOptions): Dropzone;
+//#endregion
+export { DropEvent, Dropzone, DropzoneManager, DropzoneOptions, dropzone as default, dropzone };
+//# sourceMappingURL=pointrix-dropzone.d.cts.map

package/dist/pointrix-dropzone.d.mts

@@ -0,0 +1,99 @@
+//#region src/nano.d.ts
+interface Point$1 {
+  x: number;
+  y: number;
+}
+interface PointerState {
+  id: number;
+  start: Point$1;
+  current: Point$1;
+  previous: Point$1;
+  delta: Point$1;
+  total: Point$1;
+  velocity: Point$1;
+  timestamp: number;
+}
+interface InteractionEvent {
+  target: HTMLElement;
+  pointers: PointerState[];
+  isPrimary: boolean;
+  originalEvent: PointerEvent;
+}
+//#endregion
+//#region src/drag.d.ts
+interface DragEvent extends InteractionEvent {
+  dx: number;
+  dy: number;
+  totalX: number;
+  totalY: number;
+  velocityX: number;
+  velocityY: number;
+}
+//#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 {
+  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): 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;
+}
+declare class DropzoneManagerSingleton {
+  private zones;
+  register(zone: Dropzone): void;
+  unregister(zone: Dropzone): void;
+  onDragStart(draggableEl: HTMLElement): void;
+  onDragMove(draggableEl: HTMLElement, pointerPos: Point, dragEvent?: DragEvent): void;
+  onDragEnd(draggableEl: HTMLElement, pointerPos: Point, dragEvent?: DragEvent): void;
+  getActiveZones(): Dropzone[];
+  getHoveredZones(): Dropzone[];
+}
+declare const DropzoneManager: DropzoneManagerSingleton;
+declare function dropzone(element: HTMLElement | string, options?: DropzoneOptions): Dropzone;
+//#endregion
+export { DropEvent, Dropzone, DropzoneManager, DropzoneOptions, dropzone as default, dropzone };
+//# sourceMappingURL=pointrix-dropzone.d.mts.map

package/dist/pointrix-dropzone.mjs

@@ -0,0 +1,2 @@
+function e(e){e.setAttribute(`aria-dropeffect`,`move`)}function t(e,t){e.setAttribute(`aria-dropeffect`,t?`move`:`none`)}function n(e){e.removeAttribute(`aria-dropeffect`)}function r(e,t){return t.x>=e.left&&t.x<=e.right&&t.y>=e.top&&t.y<=e.bottom}function i(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 a=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(t,n={}){this._isOver=!1,this._isActive=!1,this._enabled=!0,this.listeners=new Map,this.element=t,this.options={overlap:`pointer`,aria:!0,...n},o.register(this),this.options.aria!==!1&&e(t)}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(),a=this.options.overlap??`pointer`;if(a===`pointer`)return r(n,t)?1:0;let o=e.getBoundingClientRect();if(a===`center`)return r(n,{x:o.left+o.width/2,y:o.top+o.height/2})?1:0;let s=i(o,n);return s>=a?s:0}activate(e){if(this._isActive)return;this._isActive=!0,this.options.activeClass&&this.element.classList.add(this.options.activeClass),this.options.aria!==!1&&t(this.element,!0);let n=this.createEvent(e,0);this.options.onActivate?.(n),this.emit(`activate`,n)}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&&t(this.element,!1);let n=this.createEvent(e,0);this.options.onDeactivate?.(n),this.emit(`deactivate`,n)}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&&n(this.element),o.unregister(this)}};const o=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 s(e,t){let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`Element not found: ${e}`);return new a(n,t)}export{a as Dropzone,o as DropzoneManager,s as default,s as dropzone};
+//# sourceMappingURL=pointrix-dropzone.mjs.map