@tremolo-ui/dom 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -97,10 +97,147 @@ function createMIDIInput(midiAccess, { onNoteOnEvent, onNoteOffEvent, onPitchBen
 	});
 }
 //#endregion
+//#region src/pointer/drag.ts
+/**
+* Applied to the element for the lifetime of the instance.
+*
+* `touch-action` stops touch dragging from scrolling the page. That alone makes
+* the browser treat a long press as the start of a text selection, so selection
+* and the iOS callout are suppressed here too.
+*/
+const MANAGED_STYLES = [
+	["touch-action", "none"],
+	["user-select", "none"],
+	["-webkit-user-select", "none"],
+	["-webkit-touch-callout", "none"]
+];
+/**
+* Track a pointer drag on an element.
+*
+* Uses Pointer Events only, and pointer capture so that the drag keeps working
+* once the pointer leaves the element. For the lifetime of the instance the
+* element gets `touch-action: none` so that touch dragging does not scroll the
+* page, plus `user-select: none` so that a long press does not start a text
+* selection instead.
+*/
+function createDrag(element, { threshold: _threshold = 1, cursor, onDragStart, onDrag, onDragEnd } = {}) {
+	const threshold = Math.max(_threshold, 1);
+	const capture = element;
+	const style = element.style;
+	const previousStyles = /* @__PURE__ */ new Map();
+	if (style) for (const [property, value] of MANAGED_STYLES) {
+		previousStyles.set(property, style.getPropertyValue(property));
+		style.setProperty(property, value);
+	}
+	let pointerId = null;
+	/** Where the listeners for the current drag live. */
+	let moveTarget = null;
+	let startX = 0;
+	let startY = 0;
+	let lastX = 0;
+	let lastY = 0;
+	let previousCursor;
+	function state(event, deltaX, deltaY) {
+		return {
+			x: event.screenX - startX,
+			y: event.screenY - startY,
+			deltaX,
+			deltaY,
+			clientX: event.clientX,
+			clientY: event.clientY,
+			event
+		};
+	}
+	/**
+	* `user-select: none` only makes the element's own text unselectable; the
+	* browser still starts a selection on long press and grabs whatever text it
+	* finds nearby. Cancelling the selection outright is what actually stops it.
+	*/
+	function preventSelectStart(event) {
+		event.preventDefault();
+	}
+	function handlePointerDown(event) {
+		const pointerEvent = event;
+		if (pointerId !== null) return;
+		pointerId = pointerEvent.pointerId;
+		startX = lastX = pointerEvent.screenX;
+		startY = lastY = pointerEvent.screenY;
+		if (cursor && style) {
+			previousCursor = style.cursor;
+			style.cursor = cursor;
+		}
+		capture.setPointerCapture?.(pointerId);
+		moveTarget = capture.hasPointerCapture?.(pointerId) === true ? element : globalThis.window ?? element;
+		moveTarget.addEventListener("pointermove", handlePointerMove);
+		moveTarget.addEventListener("pointerup", handlePointerUp);
+		moveTarget.addEventListener("pointercancel", handlePointerUp);
+		globalThis.document?.addEventListener("selectstart", preventSelectStart);
+		onDragStart?.(state(pointerEvent, 0, 0));
+	}
+	function handlePointerMove(event) {
+		const pointerEvent = event;
+		if (pointerEvent.pointerId !== pointerId) return;
+		const deltaX = pointerEvent.screenX - lastX;
+		const deltaY = pointerEvent.screenY - lastY;
+		lastX = pointerEvent.screenX;
+		lastY = pointerEvent.screenY;
+		if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return;
+		onDrag?.(state(pointerEvent, deltaX, deltaY));
+	}
+	function handlePointerUp(event) {
+		const pointerEvent = event;
+		if (pointerEvent.pointerId !== pointerId) return;
+		const finalState = state(pointerEvent, pointerEvent.screenX - lastX, pointerEvent.screenY - lastY);
+		stopTracking();
+		onDragEnd?.(finalState);
+	}
+	function stopTracking() {
+		if (pointerId === null) return;
+		capture.releasePointerCapture?.(pointerId);
+		moveTarget?.removeEventListener("pointermove", handlePointerMove);
+		moveTarget?.removeEventListener("pointerup", handlePointerUp);
+		moveTarget?.removeEventListener("pointercancel", handlePointerUp);
+		globalThis.document?.removeEventListener("selectstart", preventSelectStart);
+		if (cursor && style) {
+			style.cursor = previousCursor ?? "";
+			previousCursor = void 0;
+		}
+		moveTarget = null;
+		pointerId = null;
+	}
+	element.addEventListener("pointerdown", handlePointerDown);
+	return { destroy: () => {
+		stopTracking();
+		element.removeEventListener("pointerdown", handlePointerDown);
+		if (style) for (const [property] of MANAGED_STYLES) {
+			const previous = previousStyles.get(property);
+			if (previous) style.setProperty(property, previous);
+			else style.removeProperty(property);
+		}
+	} };
+}
+//#endregion
+//#region src/pointer/wheel.ts
+/**
+* Listen to wheel events on an element.
+*
+* The listener is registered with `passive: false` so that the handler can call
+* `preventDefault()` to stop the page from scrolling.
+*/
+function createWheel(element, onWheel) {
+	const handler = (event) => onWheel(event);
+	element.addEventListener("wheel", handler, { passive: false });
+	return { destroy: () => {
+		element.removeEventListener("wheel", handler);
+	} };
+}
+//#endregion
 exports.NOT_SUPPORTED = NOT_SUPPORTED;
 exports.PERMISSION_DENIED = PERMISSION_DENIED;
+exports.createDrag = createDrag;
 exports.createMIDIAccess = createMIDIAccess;
 exports.createMIDIInput = createMIDIInput;
 exports.createMIDIMessage = createMIDIMessage;
+exports.createWheel = createWheel;
 
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../src/midi/access.ts","../src/midi/message.ts","../src/midi/input.ts"],"sourcesContent":["/** @private */\nexport const PERMISSION_DENIED = 'PERMISSION_DENIED'\n/** @private */\nexport const NOT_SUPPORTED = 'NOT_SUPPORTED'\n\n/** @private */\nexport type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED\n\nexport type MIDIAccessState = {\n  readonly midiAccess: MIDIAccess | null\n  readonly error: MIDIAccessError | null\n}\n\nconst INITIAL_STATE: MIDIAccessState = {\n  midiAccess: null,\n  error: null,\n}\n\nexport interface MIDIAccessInstance {\n  /** Request MIDI access. Safe to call more than once. */\n  request: () => void\n  getState: () => MIDIAccessState\n  /** Snapshot for server side rendering. Always the initial state. */\n  getServerState: () => MIDIAccessState\n  /** @returns unsubscribe function */\n  subscribe: (listener: () => void) => () => void\n  destroy: () => void\n}\n\n/**\n * Request MIDI access in the browser.\n *\n * The returned instance holds the state and notifies subscribers when it changes,\n * so it can be consumed from any framework.\n */\nexport function createMIDIAccess(): MIDIAccessInstance {\n  let state = INITIAL_STATE\n  let destroyed = false\n  const listeners = new Set<() => void>()\n\n  function setState(next: MIDIAccessState) {\n    state = next\n    for (const listener of listeners) listener()\n  }\n\n  function request() {\n    if (destroyed) return\n    if (typeof navigator === 'undefined' || !navigator.requestMIDIAccess) {\n      setState({ ...state, error: NOT_SUPPORTED })\n      return\n    }\n    navigator\n      .requestMIDIAccess()\n      .then((access) => {\n        if (destroyed) return\n        setState({ midiAccess: access, error: null })\n      })\n      .catch(() => {\n        if (destroyed) return\n        setState({ ...state, error: PERMISSION_DENIED })\n      })\n  }\n\n  return {\n    request,\n    getState: () => state,\n    getServerState: () => INITIAL_STATE,\n    subscribe: (listener) => {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n    destroy: () => {\n      destroyed = true\n      listeners.clear()\n    },\n  }\n}\n","export interface MIDIMessageInstance {\n  destroy: () => void\n}\n\n/**\n * Listen to raw `midimessage` events on every input of a MIDIAccess.\n *\n * Use this when you need more detail than {@link createMIDIInput} provides.\n */\nexport function createMIDIMessage(\n  midiAccess: MIDIAccess | null,\n  onMIDIMessage: (event: MIDIMessageEvent) => void,\n): MIDIMessageInstance {\n  if (!midiAccess) {\n    return { destroy: () => {} }\n  }\n\n  const inputs = [...midiAccess.inputs.values()]\n  for (const input of inputs) {\n    input.addEventListener('midimessage', onMIDIMessage)\n  }\n\n  return {\n    destroy: () => {\n      for (const input of inputs) {\n        input.removeEventListener('midimessage', onMIDIMessage)\n      }\n    },\n  }\n}\n","import { createMIDIMessage, type MIDIMessageInstance } from './message'\n\nconst MIDI_EVENT_TO_NUMBER = {\n  NOTE_ON: 0x90,\n  NOTE_OFF: 0x80,\n  PITCH_BEND: 0xe0,\n}\n\nexport type MIDIInputHandlers = {\n  onNoteOnEvent?: (note: number, velocity: number) => void\n  onNoteOffEvent?: (note: number) => void\n  onPitchBendEvent?: (msb: number, lsb: number) => void\n}\n\nexport type MIDIInputInstance = MIDIMessageInstance\n\n/**\n * Handle note on/off and pitch bend events. To be used with {@link createMIDIAccess}.\n * Internally uses {@link createMIDIMessage}.\n */\nexport function createMIDIInput(\n  midiAccess: MIDIAccess | null,\n  { onNoteOnEvent, onNoteOffEvent, onPitchBendEvent }: MIDIInputHandlers,\n): MIDIInputInstance {\n  return createMIDIMessage(midiAccess, (event) => {\n    if (!event.data) return\n    // event.data[0] ... command\n    // event.data[1] ... note, MSB (Most Significant Byte)\n    // event.data[2] ... velocity, LSB (Least Significant Byte)\n    const kind = event.data[0] & 0xf0\n\n    if (\n      kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF ||\n      (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0)\n    ) {\n      onNoteOffEvent?.(event.data[1])\n    } else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) {\n      onNoteOnEvent?.(event.data[1], event.data[2])\n    } else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) {\n      onPitchBendEvent?.(event.data[1], event.data[2])\n    }\n  })\n}\n"],"mappings":";;;AACA,MAAa,oBAAoB;;AAEjC,MAAa,gBAAgB;AAU7B,MAAM,gBAAiC;CACrC,YAAY;CACZ,OAAO;CACR;;;;;;;AAmBD,SAAgB,mBAAuC;CACrD,IAAI,QAAQ;CACZ,IAAI,YAAY;CAChB,MAAM,4BAAY,IAAI,KAAiB;CAEvC,SAAS,SAAS,MAAuB;AACvC,UAAQ;AACR,OAAK,MAAM,YAAY,UAAW,WAAU;;CAG9C,SAAS,UAAU;AACjB,MAAI,UAAW;AACf,MAAI,OAAO,cAAc,eAAe,CAAC,UAAU,mBAAmB;AACpE,YAAS;IAAE,GAAG;IAAO,OAAO;IAAe,CAAC;AAC5C;;AAEF,YACG,mBAAmB,CACnB,MAAM,WAAW;AAChB,OAAI,UAAW;AACf,YAAS;IAAE,YAAY;IAAQ,OAAO;IAAM,CAAC;IAC7C,CACD,YAAY;AACX,OAAI,UAAW;AACf,YAAS;IAAE,GAAG;IAAO,OAAO;IAAmB,CAAC;IAChD;;AAGN,QAAO;EACL;EACA,gBAAgB;EAChB,sBAAsB;EACtB,YAAY,aAAa;AACvB,aAAU,IAAI,SAAS;AACvB,gBAAa;AACX,cAAU,OAAO,SAAS;;;EAG9B,eAAe;AACb,eAAY;AACZ,aAAU,OAAO;;EAEpB;;;;;;;;;ACpEH,SAAgB,kBACd,YACA,eACqB;AACrB,KAAI,CAAC,WACH,QAAO,EAAE,eAAe,IAAI;CAG9B,MAAM,SAAS,CAAC,GAAG,WAAW,OAAO,QAAQ,CAAC;AAC9C,MAAK,MAAM,SAAS,OAClB,OAAM,iBAAiB,eAAe,cAAc;AAGtD,QAAO,EACL,eAAe;AACb,OAAK,MAAM,SAAS,OAClB,OAAM,oBAAoB,eAAe,cAAc;IAG5D;;;;AC1BH,MAAM,uBAAuB;CAC3B,SAAS;CACT,UAAU;CACV,YAAY;CACb;;;;;AAcD,SAAgB,gBACd,YACA,EAAE,eAAe,gBAAgB,oBACd;AACnB,QAAO,kBAAkB,aAAa,UAAU;AAC9C,MAAI,CAAC,MAAM,KAAM;EAIjB,MAAM,OAAO,MAAM,KAAK,KAAK;AAE7B,MACE,QAAQ,qBAAqB,YAC5B,QAAQ,qBAAqB,WAAW,MAAM,KAAK,MAAM,EAE1D,kBAAiB,MAAM,KAAK,GAAG;WACtB,QAAQ,qBAAqB,QACtC,iBAAgB,MAAM,KAAK,IAAI,MAAM,KAAK,GAAG;WACpC,QAAQ,qBAAqB,WACtC,oBAAmB,MAAM,KAAK,IAAI,MAAM,KAAK,GAAG;GAElD"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/midi/access.ts","../src/midi/message.ts","../src/midi/input.ts","../src/pointer/drag.ts","../src/pointer/wheel.ts"],"sourcesContent":["/** @private */\nexport const PERMISSION_DENIED = 'PERMISSION_DENIED'\n/** @private */\nexport const NOT_SUPPORTED = 'NOT_SUPPORTED'\n\n/** @private */\nexport type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED\n\nexport type MIDIAccessState = {\n  readonly midiAccess: MIDIAccess | null\n  readonly error: MIDIAccessError | null\n}\n\nconst INITIAL_STATE: MIDIAccessState = {\n  midiAccess: null,\n  error: null,\n}\n\nexport interface MIDIAccessInstance {\n  /** Request MIDI access. Safe to call more than once. */\n  request: () => void\n  getState: () => MIDIAccessState\n  /** Snapshot for server side rendering. Always the initial state. */\n  getServerState: () => MIDIAccessState\n  /** @returns unsubscribe function */\n  subscribe: (listener: () => void) => () => void\n  destroy: () => void\n}\n\n/**\n * Request MIDI access in the browser.\n *\n * The returned instance holds the state and notifies subscribers when it changes,\n * so it can be consumed from any framework.\n */\nexport function createMIDIAccess(): MIDIAccessInstance {\n  let state = INITIAL_STATE\n  let destroyed = false\n  const listeners = new Set<() => void>()\n\n  function setState(next: MIDIAccessState) {\n    state = next\n    for (const listener of listeners) listener()\n  }\n\n  function request() {\n    if (destroyed) return\n    if (typeof navigator === 'undefined' || !navigator.requestMIDIAccess) {\n      setState({ ...state, error: NOT_SUPPORTED })\n      return\n    }\n    navigator\n      .requestMIDIAccess()\n      .then((access) => {\n        if (destroyed) return\n        setState({ midiAccess: access, error: null })\n      })\n      .catch(() => {\n        if (destroyed) return\n        setState({ ...state, error: PERMISSION_DENIED })\n      })\n  }\n\n  return {\n    request,\n    getState: () => state,\n    getServerState: () => INITIAL_STATE,\n    subscribe: (listener) => {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n    destroy: () => {\n      destroyed = true\n      listeners.clear()\n    },\n  }\n}\n","export interface MIDIMessageInstance {\n  destroy: () => void\n}\n\n/**\n * Listen to raw `midimessage` events on every input of a MIDIAccess.\n *\n * Use this when you need more detail than {@link createMIDIInput} provides.\n */\nexport function createMIDIMessage(\n  midiAccess: MIDIAccess | null,\n  onMIDIMessage: (event: MIDIMessageEvent) => void,\n): MIDIMessageInstance {\n  if (!midiAccess) {\n    return { destroy: () => {} }\n  }\n\n  const inputs = [...midiAccess.inputs.values()]\n  for (const input of inputs) {\n    input.addEventListener('midimessage', onMIDIMessage)\n  }\n\n  return {\n    destroy: () => {\n      for (const input of inputs) {\n        input.removeEventListener('midimessage', onMIDIMessage)\n      }\n    },\n  }\n}\n","import { createMIDIMessage, type MIDIMessageInstance } from './message'\n\nconst MIDI_EVENT_TO_NUMBER = {\n  NOTE_ON: 0x90,\n  NOTE_OFF: 0x80,\n  PITCH_BEND: 0xe0,\n}\n\nexport type MIDIInputHandlers = {\n  onNoteOnEvent?: (note: number, velocity: number) => void\n  onNoteOffEvent?: (note: number) => void\n  onPitchBendEvent?: (msb: number, lsb: number) => void\n}\n\nexport type MIDIInputInstance = MIDIMessageInstance\n\n/**\n * Handle note on/off and pitch bend events. To be used with {@link createMIDIAccess}.\n * Internally uses {@link createMIDIMessage}.\n */\nexport function createMIDIInput(\n  midiAccess: MIDIAccess | null,\n  { onNoteOnEvent, onNoteOffEvent, onPitchBendEvent }: MIDIInputHandlers,\n): MIDIInputInstance {\n  return createMIDIMessage(midiAccess, (event) => {\n    if (!event.data) return\n    // event.data[0] ... command\n    // event.data[1] ... note, MSB (Most Significant Byte)\n    // event.data[2] ... velocity, LSB (Least Significant Byte)\n    const kind = event.data[0] & 0xf0\n\n    if (\n      kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF ||\n      (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0)\n    ) {\n      onNoteOffEvent?.(event.data[1])\n    } else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) {\n      onNoteOnEvent?.(event.data[1], event.data[2])\n    } else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) {\n      onPitchBendEvent?.(event.data[1], event.data[2])\n    }\n  })\n}\n","export type DragState = {\n  /** Total movement from the drag start, in screen coordinates. */\n  x: number\n  y: number\n  /** Movement since the previous event, in screen coordinates. */\n  deltaX: number\n  deltaY: number\n  /** Pointer position in viewport coordinates. */\n  clientX: number\n  clientY: number\n  event: PointerEvent\n}\n\nexport type DragOptions = {\n  /**\n   * Minimum movement in pixels before `onDrag` fires.\n   * Prevents `onDrag` from firing on, for example, a double click.\n   * Values below 1 are clamped to 1.\n   *\n   * @default 1\n   */\n  threshold?: number\n\n  /**\n   * CSS cursor to show while dragging. Applied to the element itself: pointer\n   * capture keeps it in effect even once the pointer leaves the element, so\n   * there is no need to touch the document.\n   */\n  cursor?: string\n\n  onDragStart?: (state: DragState) => void\n  onDrag?: (state: DragState) => void\n  onDragEnd?: (state: DragState) => void\n}\n\nexport interface DragInstance {\n  destroy: () => void\n}\n\n/**\n * Applied to the element for the lifetime of the instance.\n *\n * `touch-action` stops touch dragging from scrolling the page. That alone makes\n * the browser treat a long press as the start of a text selection, so selection\n * and the iOS callout are suppressed here too.\n */\nconst MANAGED_STYLES = [\n  ['touch-action', 'none'],\n  ['user-select', 'none'],\n  ['-webkit-user-select', 'none'],\n  ['-webkit-touch-callout', 'none'],\n] as const\n\ntype CaptureTarget = {\n  setPointerCapture?: (pointerId: number) => void\n  releasePointerCapture?: (pointerId: number) => void\n  hasPointerCapture?: (pointerId: number) => boolean\n}\n\n/**\n * Track a pointer drag on an element.\n *\n * Uses Pointer Events only, and pointer capture so that the drag keeps working\n * once the pointer leaves the element. For the lifetime of the instance the\n * element gets `touch-action: none` so that touch dragging does not scroll the\n * page, plus `user-select: none` so that a long press does not start a text\n * selection instead.\n */\nexport function createDrag(\n  element: Element,\n  {\n    threshold: _threshold = 1,\n    cursor,\n    onDragStart,\n    onDrag,\n    onDragEnd,\n  }: DragOptions = {},\n): DragInstance {\n  const threshold = Math.max(_threshold, 1)\n  const capture = element as CaptureTarget\n  const style = (element as Partial<HTMLElement>).style\n\n  const previousStyles = new Map<string, string>()\n  if (style) {\n    for (const [property, value] of MANAGED_STYLES) {\n      previousStyles.set(property, style.getPropertyValue(property))\n      style.setProperty(property, value)\n    }\n  }\n\n  let pointerId: number | null = null\n  /** Where the listeners for the current drag live. */\n  let moveTarget: EventTarget | null = null\n  let startX = 0\n  let startY = 0\n  let lastX = 0\n  let lastY = 0\n  let previousCursor: string | undefined\n\n  function state(\n    event: PointerEvent,\n    deltaX: number,\n    deltaY: number,\n  ): DragState {\n    return {\n      x: event.screenX - startX,\n      y: event.screenY - startY,\n      deltaX,\n      deltaY,\n      clientX: event.clientX,\n      clientY: event.clientY,\n      event,\n    }\n  }\n\n  /**\n   * `user-select: none` only makes the element's own text unselectable; the\n   * browser still starts a selection on long press and grabs whatever text it\n   * finds nearby. Cancelling the selection outright is what actually stops it.\n   */\n  function preventSelectStart(event: Event) {\n    event.preventDefault()\n  }\n\n  function handlePointerDown(event: Event) {\n    const pointerEvent = event as PointerEvent\n    // Only one pointer drives the drag; ignore additional touches.\n    if (pointerId !== null) return\n\n    pointerId = pointerEvent.pointerId\n    startX = lastX = pointerEvent.screenX\n    startY = lastY = pointerEvent.screenY\n\n    if (cursor && style) {\n      previousCursor = style.cursor\n      style.cursor = cursor\n    }\n\n    capture.setPointerCapture?.(pointerId)\n    // With pointer capture the element receives the rest of the gesture.\n    // Without it (older engines, jsdom) fall back to the window.\n    moveTarget =\n      capture.hasPointerCapture?.(pointerId) === true\n        ? element\n        : (globalThis.window ?? element)\n\n    moveTarget.addEventListener('pointermove', handlePointerMove)\n    moveTarget.addEventListener('pointerup', handlePointerUp)\n    moveTarget.addEventListener('pointercancel', handlePointerUp)\n    globalThis.document?.addEventListener('selectstart', preventSelectStart)\n\n    onDragStart?.(state(pointerEvent, 0, 0))\n  }\n\n  function handlePointerMove(event: Event) {\n    const pointerEvent = event as PointerEvent\n    if (pointerEvent.pointerId !== pointerId) return\n\n    const deltaX = pointerEvent.screenX - lastX\n    const deltaY = pointerEvent.screenY - lastY\n    lastX = pointerEvent.screenX\n    lastY = pointerEvent.screenY\n\n    // Movement below the threshold is dropped rather than accumulated.\n    if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return\n\n    onDrag?.(state(pointerEvent, deltaX, deltaY))\n  }\n\n  function handlePointerUp(event: Event) {\n    const pointerEvent = event as PointerEvent\n    if (pointerEvent.pointerId !== pointerId) return\n\n    const deltaX = pointerEvent.screenX - lastX\n    const deltaY = pointerEvent.screenY - lastY\n    const finalState = state(pointerEvent, deltaX, deltaY)\n\n    stopTracking()\n    onDragEnd?.(finalState)\n  }\n\n  function stopTracking() {\n    if (pointerId === null) return\n    capture.releasePointerCapture?.(pointerId)\n    moveTarget?.removeEventListener('pointermove', handlePointerMove)\n    moveTarget?.removeEventListener('pointerup', handlePointerUp)\n    moveTarget?.removeEventListener('pointercancel', handlePointerUp)\n    globalThis.document?.removeEventListener('selectstart', preventSelectStart)\n    if (cursor && style) {\n      style.cursor = previousCursor ?? ''\n      previousCursor = undefined\n    }\n    moveTarget = null\n    pointerId = null\n  }\n\n  element.addEventListener('pointerdown', handlePointerDown)\n\n  return {\n    destroy: () => {\n      stopTracking()\n      element.removeEventListener('pointerdown', handlePointerDown)\n      if (style) {\n        for (const [property] of MANAGED_STYLES) {\n          const previous = previousStyles.get(property)\n          if (previous) {\n            style.setProperty(property, previous)\n          } else {\n            style.removeProperty(property)\n          }\n        }\n      }\n    },\n  }\n}\n","export interface WheelInstance {\n  destroy: () => void\n}\n\n/**\n * Listen to wheel events on an element.\n *\n * The listener is registered with `passive: false` so that the handler can call\n * `preventDefault()` to stop the page from scrolling.\n */\nexport function createWheel(\n  element: Element,\n  onWheel: (event: WheelEvent) => void,\n): WheelInstance {\n  const handler = (event: Event) => onWheel(event as WheelEvent)\n\n  element.addEventListener('wheel', handler, { passive: false })\n\n  return {\n    destroy: () => {\n      // Only `capture` matters when removing, and it is false here.\n      element.removeEventListener('wheel', handler)\n    },\n  }\n}\n"],"mappings":"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"}

package/dist/index.d.cts

@@ -55,5 +55,66 @@ declare function createMIDIInput(midiAccess: MIDIAccess | null, {
   onPitchBendEvent
 }: MIDIInputHandlers): MIDIInputInstance;
 //#endregion
-export { type MIDIAccessError, type MIDIAccessInstance, type MIDIAccessState, type MIDIInputHandlers, type MIDIInputInstance, type MIDIMessageInstance, NOT_SUPPORTED, PERMISSION_DENIED, createMIDIAccess, createMIDIInput, createMIDIMessage };
+//#region src/pointer/drag.d.ts
+type DragState = {
+  /** Total movement from the drag start, in screen coordinates. */x: number;
+  y: number; /** Movement since the previous event, in screen coordinates. */
+  deltaX: number;
+  deltaY: number; /** Pointer position in viewport coordinates. */
+  clientX: number;
+  clientY: number;
+  event: PointerEvent;
+};
+type DragOptions = {
+  /**
+   * Minimum movement in pixels before `onDrag` fires.
+   * Prevents `onDrag` from firing on, for example, a double click.
+   * Values below 1 are clamped to 1.
+   *
+   * @default 1
+   */
+  threshold?: number;
+  /**
+   * CSS cursor to show while dragging. Applied to the element itself: pointer
+   * capture keeps it in effect even once the pointer leaves the element, so
+   * there is no need to touch the document.
+   */
+  cursor?: string;
+  onDragStart?: (state: DragState) => void;
+  onDrag?: (state: DragState) => void;
+  onDragEnd?: (state: DragState) => void;
+};
+interface DragInstance {
+  destroy: () => void;
+}
+/**
+ * Track a pointer drag on an element.
+ *
+ * Uses Pointer Events only, and pointer capture so that the drag keeps working
+ * once the pointer leaves the element. For the lifetime of the instance the
+ * element gets `touch-action: none` so that touch dragging does not scroll the
+ * page, plus `user-select: none` so that a long press does not start a text
+ * selection instead.
+ */
+declare function createDrag(element: Element, {
+  threshold: _threshold,
+  cursor,
+  onDragStart,
+  onDrag,
+  onDragEnd
+}?: DragOptions): DragInstance;
+//#endregion
+//#region src/pointer/wheel.d.ts
+interface WheelInstance {
+  destroy: () => void;
+}
+/**
+ * Listen to wheel events on an element.
+ *
+ * The listener is registered with `passive: false` so that the handler can call
+ * `preventDefault()` to stop the page from scrolling.
+ */
+declare function createWheel(element: Element, onWheel: (event: WheelEvent) => void): WheelInstance;
+//#endregion
+export { type DragInstance, type DragOptions, type DragState, type MIDIAccessError, type MIDIAccessInstance, type MIDIAccessState, type MIDIInputHandlers, type MIDIInputInstance, type MIDIMessageInstance, NOT_SUPPORTED, PERMISSION_DENIED, type WheelInstance, createDrag, createMIDIAccess, createMIDIInput, createMIDIMessage, createWheel };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/midi/access.ts","../src/midi/message.ts","../src/midi/input.ts"],"mappings":";;cACa,iBAAA;;cAEA,aAAA;;KAGD,eAAA,UAAyB,iBAAA,UAA2B,aAAA;AAAA,KAEpD,eAAA;EAAA,SACD,UAAA,EAAY,UAAA;EAAA,SACZ,KAAA,EAAO,eAAA;AAAA;AAAA,UAQD,kBAAA;EAZL;EAcV,OAAA;EACA,QAAA,QAAgB,eAAA;EAfmB;EAiBnC,cAAA,QAAsB,eAAA;EAfZ;EAiBV,SAAA,GAAY,QAAA;EACZ,OAAA;AAAA;;;;;;;iBASc,gBAAA,CAAA,GAAoB,kBAAA;;;UCnCnB,mBAAA;EACf,OAAA;AAAA;;;;ADEF;;iBCMgB,iBAAA,CACd,UAAA,EAAY,UAAA,SACZ,aAAA,GAAgB,KAAA,EAAO,gBAAA,YACtB,mBAAA;;;KCJS,iBAAA;EACV,aAAA,IAAiB,IAAA,UAAc,QAAA;EAC/B,cAAA,IAAkB,IAAA;EAClB,gBAAA,IAAoB,GAAA,UAAa,GAAA;AAAA;AAAA,KAGvB,iBAAA,GAAoB,mBAAA;;;;;iBAMhB,eAAA,CACd,UAAA,EAAY,UAAA;EACV,aAAA;EAAe,cAAA;EAAgB;AAAA,GAAoB,iBAAA,GACpD,iBAAA"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/midi/access.ts","../src/midi/message.ts","../src/midi/input.ts","../src/pointer/drag.ts","../src/pointer/wheel.ts"],"mappings":";;cACa,iBAAA;;cAEA,aAAA;;KAGD,eAAA,UAAyB,iBAAA,UAA2B,aAAA;AAAA,KAEpD,eAAA;EAAA,SACD,UAAA,EAAY,UAAA;EAAA,SACZ,KAAA,EAAO,eAAA;AAAA;AAAA,UAQD,kBAAA;EAZL;EAcV,OAAA;EACA,QAAA,QAAgB,eAAA;EAfmB;EAiBnC,cAAA,QAAsB,eAAA;EAfZ;EAiBV,SAAA,GAAY,QAAA;EACZ,OAAA;AAAA;;;;;;;iBASc,gBAAA,CAAA,GAAoB,kBAAA;;;UCnCnB,mBAAA;EACf,OAAA;AAAA;;;;ADEF;;iBCMgB,iBAAA,CACd,UAAA,EAAY,UAAA,SACZ,aAAA,GAAgB,KAAA,EAAO,gBAAA,YACtB,mBAAA;;;KCJS,iBAAA;EACV,aAAA,IAAiB,IAAA,UAAc,QAAA;EAC/B,cAAA,IAAkB,IAAA;EAClB,gBAAA,IAAoB,GAAA,UAAa,GAAA;AAAA;AAAA,KAGvB,iBAAA,GAAoB,mBAAA;;;;;iBAMhB,eAAA,CACd,UAAA,EAAY,UAAA;EACV,aAAA;EAAe,cAAA;EAAgB;AAAA,GAAoB,iBAAA,GACpD,iBAAA;;;KCvBS,SAAA;EHCC,iEGCX,CAAA;EACA,CAAA,UHF4B;EGI5B,MAAA;EACA,MAAA,UHHwB;EGKxB,OAAA;EACA,OAAA;EACA,KAAA,EAAO,YAAA;AAAA;AAAA,KAGG,WAAA;;;;AHLZ;;;;EGaE,SAAA;EHZqB;;;;;EGmBrB,MAAA;EAEA,WAAA,IAAe,KAAA,EAAO,SAAA;EACtB,MAAA,IAAU,KAAA,EAAO,SAAA;EACjB,SAAA,IAAa,KAAA,EAAO,SAAA;AAAA;AAAA,UAGL,YAAA;EACf,OAAA;AAAA;;;;;;;AHDF;;;iBGiCgB,UAAA,CACd,OAAA,EAAS,OAAA;EAEP,SAAA,EAAW,UAAA;EACX,MAAA;EACA,WAAA;EACA,MAAA;EACA;AAAA,IACC,WAAA,GACF,YAAA;;;UC7Ec,aAAA;EACf,OAAA;AAAA;;;;AJEF;;;iBIOgB,WAAA,CACd,OAAA,EAAS,OAAA,EACT,OAAA,GAAU,KAAA,EAAO,UAAA,YAChB,aAAA"}

package/dist/index.d.ts

@@ -55,5 +55,66 @@ declare function createMIDIInput(midiAccess: MIDIAccess | null, {
   onPitchBendEvent
 }: MIDIInputHandlers): MIDIInputInstance;
 //#endregion
-export { type MIDIAccessError, type MIDIAccessInstance, type MIDIAccessState, type MIDIInputHandlers, type MIDIInputInstance, type MIDIMessageInstance, NOT_SUPPORTED, PERMISSION_DENIED, createMIDIAccess, createMIDIInput, createMIDIMessage };
+//#region src/pointer/drag.d.ts
+type DragState = {
+  /** Total movement from the drag start, in screen coordinates. */x: number;
+  y: number; /** Movement since the previous event, in screen coordinates. */
+  deltaX: number;
+  deltaY: number; /** Pointer position in viewport coordinates. */
+  clientX: number;
+  clientY: number;
+  event: PointerEvent;
+};
+type DragOptions = {
+  /**
+   * Minimum movement in pixels before `onDrag` fires.
+   * Prevents `onDrag` from firing on, for example, a double click.
+   * Values below 1 are clamped to 1.
+   *
+   * @default 1
+   */
+  threshold?: number;
+  /**
+   * CSS cursor to show while dragging. Applied to the element itself: pointer
+   * capture keeps it in effect even once the pointer leaves the element, so
+   * there is no need to touch the document.
+   */
+  cursor?: string;
+  onDragStart?: (state: DragState) => void;
+  onDrag?: (state: DragState) => void;
+  onDragEnd?: (state: DragState) => void;
+};
+interface DragInstance {
+  destroy: () => void;
+}
+/**
+ * Track a pointer drag on an element.
+ *
+ * Uses Pointer Events only, and pointer capture so that the drag keeps working
+ * once the pointer leaves the element. For the lifetime of the instance the
+ * element gets `touch-action: none` so that touch dragging does not scroll the
+ * page, plus `user-select: none` so that a long press does not start a text
+ * selection instead.
+ */
+declare function createDrag(element: Element, {
+  threshold: _threshold,
+  cursor,
+  onDragStart,
+  onDrag,
+  onDragEnd
+}?: DragOptions): DragInstance;
+//#endregion
+//#region src/pointer/wheel.d.ts
+interface WheelInstance {
+  destroy: () => void;
+}
+/**
+ * Listen to wheel events on an element.
+ *
+ * The listener is registered with `passive: false` so that the handler can call
+ * `preventDefault()` to stop the page from scrolling.
+ */
+declare function createWheel(element: Element, onWheel: (event: WheelEvent) => void): WheelInstance;
+//#endregion
+export { type DragInstance, type DragOptions, type DragState, type MIDIAccessError, type MIDIAccessInstance, type MIDIAccessState, type MIDIInputHandlers, type MIDIInputInstance, type MIDIMessageInstance, NOT_SUPPORTED, PERMISSION_DENIED, type WheelInstance, createDrag, createMIDIAccess, createMIDIInput, createMIDIMessage, createWheel };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/midi/access.ts","../src/midi/message.ts","../src/midi/input.ts"],"mappings":";;cACa,iBAAA;;cAEA,aAAA;;KAGD,eAAA,UAAyB,iBAAA,UAA2B,aAAA;AAAA,KAEpD,eAAA;EAAA,SACD,UAAA,EAAY,UAAA;EAAA,SACZ,KAAA,EAAO,eAAA;AAAA;AAAA,UAQD,kBAAA;EAZL;EAcV,OAAA;EACA,QAAA,QAAgB,eAAA;EAfmB;EAiBnC,cAAA,QAAsB,eAAA;EAfZ;EAiBV,SAAA,GAAY,QAAA;EACZ,OAAA;AAAA;;;;;;;iBASc,gBAAA,CAAA,GAAoB,kBAAA;;;UCnCnB,mBAAA;EACf,OAAA;AAAA;;;;ADEF;;iBCMgB,iBAAA,CACd,UAAA,EAAY,UAAA,SACZ,aAAA,GAAgB,KAAA,EAAO,gBAAA,YACtB,mBAAA;;;KCJS,iBAAA;EACV,aAAA,IAAiB,IAAA,UAAc,QAAA;EAC/B,cAAA,IAAkB,IAAA;EAClB,gBAAA,IAAoB,GAAA,UAAa,GAAA;AAAA;AAAA,KAGvB,iBAAA,GAAoB,mBAAA;;;;;iBAMhB,eAAA,CACd,UAAA,EAAY,UAAA;EACV,aAAA;EAAe,cAAA;EAAgB;AAAA,GAAoB,iBAAA,GACpD,iBAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/midi/access.ts","../src/midi/message.ts","../src/midi/input.ts","../src/pointer/drag.ts","../src/pointer/wheel.ts"],"mappings":";;cACa,iBAAA;;cAEA,aAAA;;KAGD,eAAA,UAAyB,iBAAA,UAA2B,aAAA;AAAA,KAEpD,eAAA;EAAA,SACD,UAAA,EAAY,UAAA;EAAA,SACZ,KAAA,EAAO,eAAA;AAAA;AAAA,UAQD,kBAAA;EAZL;EAcV,OAAA;EACA,QAAA,QAAgB,eAAA;EAfmB;EAiBnC,cAAA,QAAsB,eAAA;EAfZ;EAiBV,SAAA,GAAY,QAAA;EACZ,OAAA;AAAA;;;;;;;iBASc,gBAAA,CAAA,GAAoB,kBAAA;;;UCnCnB,mBAAA;EACf,OAAA;AAAA;;;;ADEF;;iBCMgB,iBAAA,CACd,UAAA,EAAY,UAAA,SACZ,aAAA,GAAgB,KAAA,EAAO,gBAAA,YACtB,mBAAA;;;KCJS,iBAAA;EACV,aAAA,IAAiB,IAAA,UAAc,QAAA;EAC/B,cAAA,IAAkB,IAAA;EAClB,gBAAA,IAAoB,GAAA,UAAa,GAAA;AAAA;AAAA,KAGvB,iBAAA,GAAoB,mBAAA;;;;;iBAMhB,eAAA,CACd,UAAA,EAAY,UAAA;EACV,aAAA;EAAe,cAAA;EAAgB;AAAA,GAAoB,iBAAA,GACpD,iBAAA;;;KCvBS,SAAA;EHCC,iEGCX,CAAA;EACA,CAAA,UHF4B;EGI5B,MAAA;EACA,MAAA,UHHwB;EGKxB,OAAA;EACA,OAAA;EACA,KAAA,EAAO,YAAA;AAAA;AAAA,KAGG,WAAA;;;;AHLZ;;;;EGaE,SAAA;EHZqB;;;;;EGmBrB,MAAA;EAEA,WAAA,IAAe,KAAA,EAAO,SAAA;EACtB,MAAA,IAAU,KAAA,EAAO,SAAA;EACjB,SAAA,IAAa,KAAA,EAAO,SAAA;AAAA;AAAA,UAGL,YAAA;EACf,OAAA;AAAA;;;;;;;AHDF;;;iBGiCgB,UAAA,CACd,OAAA,EAAS,OAAA;EAEP,SAAA,EAAW,UAAA;EACX,MAAA;EACA,WAAA;EACA,MAAA;EACA;AAAA,IACC,WAAA,GACF,YAAA;;;UC7Ec,aAAA;EACf,OAAA;AAAA;;;;AJEF;;;iBIOgB,WAAA,CACd,OAAA,EAAS,OAAA,EACT,OAAA,GAAU,KAAA,EAAO,UAAA,YAChB,aAAA"}

package/dist/index.js

@@ -96,6 +96,141 @@ function createMIDIInput(midiAccess, { onNoteOnEvent, onNoteOffEvent, onPitchBen
 	});
 }
 //#endregion
-export { NOT_SUPPORTED, PERMISSION_DENIED, createMIDIAccess, createMIDIInput, createMIDIMessage };
+//#region src/pointer/drag.ts
+/**
+* Applied to the element for the lifetime of the instance.
+*
+* `touch-action` stops touch dragging from scrolling the page. That alone makes
+* the browser treat a long press as the start of a text selection, so selection
+* and the iOS callout are suppressed here too.
+*/
+const MANAGED_STYLES = [
+	["touch-action", "none"],
+	["user-select", "none"],
+	["-webkit-user-select", "none"],
+	["-webkit-touch-callout", "none"]
+];
+/**
+* Track a pointer drag on an element.
+*
+* Uses Pointer Events only, and pointer capture so that the drag keeps working
+* once the pointer leaves the element. For the lifetime of the instance the
+* element gets `touch-action: none` so that touch dragging does not scroll the
+* page, plus `user-select: none` so that a long press does not start a text
+* selection instead.
+*/
+function createDrag(element, { threshold: _threshold = 1, cursor, onDragStart, onDrag, onDragEnd } = {}) {
+	const threshold = Math.max(_threshold, 1);
+	const capture = element;
+	const style = element.style;
+	const previousStyles = /* @__PURE__ */ new Map();
+	if (style) for (const [property, value] of MANAGED_STYLES) {
+		previousStyles.set(property, style.getPropertyValue(property));
+		style.setProperty(property, value);
+	}
+	let pointerId = null;
+	/** Where the listeners for the current drag live. */
+	let moveTarget = null;
+	let startX = 0;
+	let startY = 0;
+	let lastX = 0;
+	let lastY = 0;
+	let previousCursor;
+	function state(event, deltaX, deltaY) {
+		return {
+			x: event.screenX - startX,
+			y: event.screenY - startY,
+			deltaX,
+			deltaY,
+			clientX: event.clientX,
+			clientY: event.clientY,
+			event
+		};
+	}
+	/**
+	* `user-select: none` only makes the element's own text unselectable; the
+	* browser still starts a selection on long press and grabs whatever text it
+	* finds nearby. Cancelling the selection outright is what actually stops it.
+	*/
+	function preventSelectStart(event) {
+		event.preventDefault();
+	}
+	function handlePointerDown(event) {
+		const pointerEvent = event;
+		if (pointerId !== null) return;
+		pointerId = pointerEvent.pointerId;
+		startX = lastX = pointerEvent.screenX;
+		startY = lastY = pointerEvent.screenY;
+		if (cursor && style) {
+			previousCursor = style.cursor;
+			style.cursor = cursor;
+		}
+		capture.setPointerCapture?.(pointerId);
+		moveTarget = capture.hasPointerCapture?.(pointerId) === true ? element : globalThis.window ?? element;
+		moveTarget.addEventListener("pointermove", handlePointerMove);
+		moveTarget.addEventListener("pointerup", handlePointerUp);
+		moveTarget.addEventListener("pointercancel", handlePointerUp);
+		globalThis.document?.addEventListener("selectstart", preventSelectStart);
+		onDragStart?.(state(pointerEvent, 0, 0));
+	}
+	function handlePointerMove(event) {
+		const pointerEvent = event;
+		if (pointerEvent.pointerId !== pointerId) return;
+		const deltaX = pointerEvent.screenX - lastX;
+		const deltaY = pointerEvent.screenY - lastY;
+		lastX = pointerEvent.screenX;
+		lastY = pointerEvent.screenY;
+		if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return;
+		onDrag?.(state(pointerEvent, deltaX, deltaY));
+	}
+	function handlePointerUp(event) {
+		const pointerEvent = event;
+		if (pointerEvent.pointerId !== pointerId) return;
+		const finalState = state(pointerEvent, pointerEvent.screenX - lastX, pointerEvent.screenY - lastY);
+		stopTracking();
+		onDragEnd?.(finalState);
+	}
+	function stopTracking() {
+		if (pointerId === null) return;
+		capture.releasePointerCapture?.(pointerId);
+		moveTarget?.removeEventListener("pointermove", handlePointerMove);
+		moveTarget?.removeEventListener("pointerup", handlePointerUp);
+		moveTarget?.removeEventListener("pointercancel", handlePointerUp);
+		globalThis.document?.removeEventListener("selectstart", preventSelectStart);
+		if (cursor && style) {
+			style.cursor = previousCursor ?? "";
+			previousCursor = void 0;
+		}
+		moveTarget = null;
+		pointerId = null;
+	}
+	element.addEventListener("pointerdown", handlePointerDown);
+	return { destroy: () => {
+		stopTracking();
+		element.removeEventListener("pointerdown", handlePointerDown);
+		if (style) for (const [property] of MANAGED_STYLES) {
+			const previous = previousStyles.get(property);
+			if (previous) style.setProperty(property, previous);
+			else style.removeProperty(property);
+		}
+	} };
+}
+//#endregion
+//#region src/pointer/wheel.ts
+/**
+* Listen to wheel events on an element.
+*
+* The listener is registered with `passive: false` so that the handler can call
+* `preventDefault()` to stop the page from scrolling.
+*/
+function createWheel(element, onWheel) {
+	const handler = (event) => onWheel(event);
+	element.addEventListener("wheel", handler, { passive: false });
+	return { destroy: () => {
+		element.removeEventListener("wheel", handler);
+	} };
+}
+//#endregion
+export { NOT_SUPPORTED, PERMISSION_DENIED, createDrag, createMIDIAccess, createMIDIInput, createMIDIMessage, createWheel };
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/midi/access.ts","../src/midi/message.ts","../src/midi/input.ts"],"sourcesContent":["/** @private */\nexport const PERMISSION_DENIED = 'PERMISSION_DENIED'\n/** @private */\nexport const NOT_SUPPORTED = 'NOT_SUPPORTED'\n\n/** @private */\nexport type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED\n\nexport type MIDIAccessState = {\n  readonly midiAccess: MIDIAccess | null\n  readonly error: MIDIAccessError | null\n}\n\nconst INITIAL_STATE: MIDIAccessState = {\n  midiAccess: null,\n  error: null,\n}\n\nexport interface MIDIAccessInstance {\n  /** Request MIDI access. Safe to call more than once. */\n  request: () => void\n  getState: () => MIDIAccessState\n  /** Snapshot for server side rendering. Always the initial state. */\n  getServerState: () => MIDIAccessState\n  /** @returns unsubscribe function */\n  subscribe: (listener: () => void) => () => void\n  destroy: () => void\n}\n\n/**\n * Request MIDI access in the browser.\n *\n * The returned instance holds the state and notifies subscribers when it changes,\n * so it can be consumed from any framework.\n */\nexport function createMIDIAccess(): MIDIAccessInstance {\n  let state = INITIAL_STATE\n  let destroyed = false\n  const listeners = new Set<() => void>()\n\n  function setState(next: MIDIAccessState) {\n    state = next\n    for (const listener of listeners) listener()\n  }\n\n  function request() {\n    if (destroyed) return\n    if (typeof navigator === 'undefined' || !navigator.requestMIDIAccess) {\n      setState({ ...state, error: NOT_SUPPORTED })\n      return\n    }\n    navigator\n      .requestMIDIAccess()\n      .then((access) => {\n        if (destroyed) return\n        setState({ midiAccess: access, error: null })\n      })\n      .catch(() => {\n        if (destroyed) return\n        setState({ ...state, error: PERMISSION_DENIED })\n      })\n  }\n\n  return {\n    request,\n    getState: () => state,\n    getServerState: () => INITIAL_STATE,\n    subscribe: (listener) => {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n    destroy: () => {\n      destroyed = true\n      listeners.clear()\n    },\n  }\n}\n","export interface MIDIMessageInstance {\n  destroy: () => void\n}\n\n/**\n * Listen to raw `midimessage` events on every input of a MIDIAccess.\n *\n * Use this when you need more detail than {@link createMIDIInput} provides.\n */\nexport function createMIDIMessage(\n  midiAccess: MIDIAccess | null,\n  onMIDIMessage: (event: MIDIMessageEvent) => void,\n): MIDIMessageInstance {\n  if (!midiAccess) {\n    return { destroy: () => {} }\n  }\n\n  const inputs = [...midiAccess.inputs.values()]\n  for (const input of inputs) {\n    input.addEventListener('midimessage', onMIDIMessage)\n  }\n\n  return {\n    destroy: () => {\n      for (const input of inputs) {\n        input.removeEventListener('midimessage', onMIDIMessage)\n      }\n    },\n  }\n}\n","import { createMIDIMessage, type MIDIMessageInstance } from './message'\n\nconst MIDI_EVENT_TO_NUMBER = {\n  NOTE_ON: 0x90,\n  NOTE_OFF: 0x80,\n  PITCH_BEND: 0xe0,\n}\n\nexport type MIDIInputHandlers = {\n  onNoteOnEvent?: (note: number, velocity: number) => void\n  onNoteOffEvent?: (note: number) => void\n  onPitchBendEvent?: (msb: number, lsb: number) => void\n}\n\nexport type MIDIInputInstance = MIDIMessageInstance\n\n/**\n * Handle note on/off and pitch bend events. To be used with {@link createMIDIAccess}.\n * Internally uses {@link createMIDIMessage}.\n */\nexport function createMIDIInput(\n  midiAccess: MIDIAccess | null,\n  { onNoteOnEvent, onNoteOffEvent, onPitchBendEvent }: MIDIInputHandlers,\n): MIDIInputInstance {\n  return createMIDIMessage(midiAccess, (event) => {\n    if (!event.data) return\n    // event.data[0] ... command\n    // event.data[1] ... note, MSB (Most Significant Byte)\n    // event.data[2] ... velocity, LSB (Least Significant Byte)\n    const kind = event.data[0] & 0xf0\n\n    if (\n      kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF ||\n      (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0)\n    ) {\n      onNoteOffEvent?.(event.data[1])\n    } else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) {\n      onNoteOnEvent?.(event.data[1], event.data[2])\n    } else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) {\n      onPitchBendEvent?.(event.data[1], event.data[2])\n    }\n  })\n}\n"],"mappings":";;AACA,MAAa,oBAAoB;;AAEjC,MAAa,gBAAgB;AAU7B,MAAM,gBAAiC;CACrC,YAAY;CACZ,OAAO;CACR;;;;;;;AAmBD,SAAgB,mBAAuC;CACrD,IAAI,QAAQ;CACZ,IAAI,YAAY;CAChB,MAAM,4BAAY,IAAI,KAAiB;CAEvC,SAAS,SAAS,MAAuB;AACvC,UAAQ;AACR,OAAK,MAAM,YAAY,UAAW,WAAU;;CAG9C,SAAS,UAAU;AACjB,MAAI,UAAW;AACf,MAAI,OAAO,cAAc,eAAe,CAAC,UAAU,mBAAmB;AACpE,YAAS;IAAE,GAAG;IAAO,OAAO;IAAe,CAAC;AAC5C;;AAEF,YACG,mBAAmB,CACnB,MAAM,WAAW;AAChB,OAAI,UAAW;AACf,YAAS;IAAE,YAAY;IAAQ,OAAO;IAAM,CAAC;IAC7C,CACD,YAAY;AACX,OAAI,UAAW;AACf,YAAS;IAAE,GAAG;IAAO,OAAO;IAAmB,CAAC;IAChD;;AAGN,QAAO;EACL;EACA,gBAAgB;EAChB,sBAAsB;EACtB,YAAY,aAAa;AACvB,aAAU,IAAI,SAAS;AACvB,gBAAa;AACX,cAAU,OAAO,SAAS;;;EAG9B,eAAe;AACb,eAAY;AACZ,aAAU,OAAO;;EAEpB;;;;;;;;;ACpEH,SAAgB,kBACd,YACA,eACqB;AACrB,KAAI,CAAC,WACH,QAAO,EAAE,eAAe,IAAI;CAG9B,MAAM,SAAS,CAAC,GAAG,WAAW,OAAO,QAAQ,CAAC;AAC9C,MAAK,MAAM,SAAS,OAClB,OAAM,iBAAiB,eAAe,cAAc;AAGtD,QAAO,EACL,eAAe;AACb,OAAK,MAAM,SAAS,OAClB,OAAM,oBAAoB,eAAe,cAAc;IAG5D;;;;AC1BH,MAAM,uBAAuB;CAC3B,SAAS;CACT,UAAU;CACV,YAAY;CACb;;;;;AAcD,SAAgB,gBACd,YACA,EAAE,eAAe,gBAAgB,oBACd;AACnB,QAAO,kBAAkB,aAAa,UAAU;AAC9C,MAAI,CAAC,MAAM,KAAM;EAIjB,MAAM,OAAO,MAAM,KAAK,KAAK;AAE7B,MACE,QAAQ,qBAAqB,YAC5B,QAAQ,qBAAqB,WAAW,MAAM,KAAK,MAAM,EAE1D,kBAAiB,MAAM,KAAK,GAAG;WACtB,QAAQ,qBAAqB,QACtC,iBAAgB,MAAM,KAAK,IAAI,MAAM,KAAK,GAAG;WACpC,QAAQ,qBAAqB,WACtC,oBAAmB,MAAM,KAAK,IAAI,MAAM,KAAK,GAAG;GAElD"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/midi/access.ts","../src/midi/message.ts","../src/midi/input.ts","../src/pointer/drag.ts","../src/pointer/wheel.ts"],"sourcesContent":["/** @private */\nexport const PERMISSION_DENIED = 'PERMISSION_DENIED'\n/** @private */\nexport const NOT_SUPPORTED = 'NOT_SUPPORTED'\n\n/** @private */\nexport type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED\n\nexport type MIDIAccessState = {\n  readonly midiAccess: MIDIAccess | null\n  readonly error: MIDIAccessError | null\n}\n\nconst INITIAL_STATE: MIDIAccessState = {\n  midiAccess: null,\n  error: null,\n}\n\nexport interface MIDIAccessInstance {\n  /** Request MIDI access. Safe to call more than once. */\n  request: () => void\n  getState: () => MIDIAccessState\n  /** Snapshot for server side rendering. Always the initial state. */\n  getServerState: () => MIDIAccessState\n  /** @returns unsubscribe function */\n  subscribe: (listener: () => void) => () => void\n  destroy: () => void\n}\n\n/**\n * Request MIDI access in the browser.\n *\n * The returned instance holds the state and notifies subscribers when it changes,\n * so it can be consumed from any framework.\n */\nexport function createMIDIAccess(): MIDIAccessInstance {\n  let state = INITIAL_STATE\n  let destroyed = false\n  const listeners = new Set<() => void>()\n\n  function setState(next: MIDIAccessState) {\n    state = next\n    for (const listener of listeners) listener()\n  }\n\n  function request() {\n    if (destroyed) return\n    if (typeof navigator === 'undefined' || !navigator.requestMIDIAccess) {\n      setState({ ...state, error: NOT_SUPPORTED })\n      return\n    }\n    navigator\n      .requestMIDIAccess()\n      .then((access) => {\n        if (destroyed) return\n        setState({ midiAccess: access, error: null })\n      })\n      .catch(() => {\n        if (destroyed) return\n        setState({ ...state, error: PERMISSION_DENIED })\n      })\n  }\n\n  return {\n    request,\n    getState: () => state,\n    getServerState: () => INITIAL_STATE,\n    subscribe: (listener) => {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n    destroy: () => {\n      destroyed = true\n      listeners.clear()\n    },\n  }\n}\n","export interface MIDIMessageInstance {\n  destroy: () => void\n}\n\n/**\n * Listen to raw `midimessage` events on every input of a MIDIAccess.\n *\n * Use this when you need more detail than {@link createMIDIInput} provides.\n */\nexport function createMIDIMessage(\n  midiAccess: MIDIAccess | null,\n  onMIDIMessage: (event: MIDIMessageEvent) => void,\n): MIDIMessageInstance {\n  if (!midiAccess) {\n    return { destroy: () => {} }\n  }\n\n  const inputs = [...midiAccess.inputs.values()]\n  for (const input of inputs) {\n    input.addEventListener('midimessage', onMIDIMessage)\n  }\n\n  return {\n    destroy: () => {\n      for (const input of inputs) {\n        input.removeEventListener('midimessage', onMIDIMessage)\n      }\n    },\n  }\n}\n","import { createMIDIMessage, type MIDIMessageInstance } from './message'\n\nconst MIDI_EVENT_TO_NUMBER = {\n  NOTE_ON: 0x90,\n  NOTE_OFF: 0x80,\n  PITCH_BEND: 0xe0,\n}\n\nexport type MIDIInputHandlers = {\n  onNoteOnEvent?: (note: number, velocity: number) => void\n  onNoteOffEvent?: (note: number) => void\n  onPitchBendEvent?: (msb: number, lsb: number) => void\n}\n\nexport type MIDIInputInstance = MIDIMessageInstance\n\n/**\n * Handle note on/off and pitch bend events. To be used with {@link createMIDIAccess}.\n * Internally uses {@link createMIDIMessage}.\n */\nexport function createMIDIInput(\n  midiAccess: MIDIAccess | null,\n  { onNoteOnEvent, onNoteOffEvent, onPitchBendEvent }: MIDIInputHandlers,\n): MIDIInputInstance {\n  return createMIDIMessage(midiAccess, (event) => {\n    if (!event.data) return\n    // event.data[0] ... command\n    // event.data[1] ... note, MSB (Most Significant Byte)\n    // event.data[2] ... velocity, LSB (Least Significant Byte)\n    const kind = event.data[0] & 0xf0\n\n    if (\n      kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF ||\n      (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0)\n    ) {\n      onNoteOffEvent?.(event.data[1])\n    } else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) {\n      onNoteOnEvent?.(event.data[1], event.data[2])\n    } else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) {\n      onPitchBendEvent?.(event.data[1], event.data[2])\n    }\n  })\n}\n","export type DragState = {\n  /** Total movement from the drag start, in screen coordinates. */\n  x: number\n  y: number\n  /** Movement since the previous event, in screen coordinates. */\n  deltaX: number\n  deltaY: number\n  /** Pointer position in viewport coordinates. */\n  clientX: number\n  clientY: number\n  event: PointerEvent\n}\n\nexport type DragOptions = {\n  /**\n   * Minimum movement in pixels before `onDrag` fires.\n   * Prevents `onDrag` from firing on, for example, a double click.\n   * Values below 1 are clamped to 1.\n   *\n   * @default 1\n   */\n  threshold?: number\n\n  /**\n   * CSS cursor to show while dragging. Applied to the element itself: pointer\n   * capture keeps it in effect even once the pointer leaves the element, so\n   * there is no need to touch the document.\n   */\n  cursor?: string\n\n  onDragStart?: (state: DragState) => void\n  onDrag?: (state: DragState) => void\n  onDragEnd?: (state: DragState) => void\n}\n\nexport interface DragInstance {\n  destroy: () => void\n}\n\n/**\n * Applied to the element for the lifetime of the instance.\n *\n * `touch-action` stops touch dragging from scrolling the page. That alone makes\n * the browser treat a long press as the start of a text selection, so selection\n * and the iOS callout are suppressed here too.\n */\nconst MANAGED_STYLES = [\n  ['touch-action', 'none'],\n  ['user-select', 'none'],\n  ['-webkit-user-select', 'none'],\n  ['-webkit-touch-callout', 'none'],\n] as const\n\ntype CaptureTarget = {\n  setPointerCapture?: (pointerId: number) => void\n  releasePointerCapture?: (pointerId: number) => void\n  hasPointerCapture?: (pointerId: number) => boolean\n}\n\n/**\n * Track a pointer drag on an element.\n *\n * Uses Pointer Events only, and pointer capture so that the drag keeps working\n * once the pointer leaves the element. For the lifetime of the instance the\n * element gets `touch-action: none` so that touch dragging does not scroll the\n * page, plus `user-select: none` so that a long press does not start a text\n * selection instead.\n */\nexport function createDrag(\n  element: Element,\n  {\n    threshold: _threshold = 1,\n    cursor,\n    onDragStart,\n    onDrag,\n    onDragEnd,\n  }: DragOptions = {},\n): DragInstance {\n  const threshold = Math.max(_threshold, 1)\n  const capture = element as CaptureTarget\n  const style = (element as Partial<HTMLElement>).style\n\n  const previousStyles = new Map<string, string>()\n  if (style) {\n    for (const [property, value] of MANAGED_STYLES) {\n      previousStyles.set(property, style.getPropertyValue(property))\n      style.setProperty(property, value)\n    }\n  }\n\n  let pointerId: number | null = null\n  /** Where the listeners for the current drag live. */\n  let moveTarget: EventTarget | null = null\n  let startX = 0\n  let startY = 0\n  let lastX = 0\n  let lastY = 0\n  let previousCursor: string | undefined\n\n  function state(\n    event: PointerEvent,\n    deltaX: number,\n    deltaY: number,\n  ): DragState {\n    return {\n      x: event.screenX - startX,\n      y: event.screenY - startY,\n      deltaX,\n      deltaY,\n      clientX: event.clientX,\n      clientY: event.clientY,\n      event,\n    }\n  }\n\n  /**\n   * `user-select: none` only makes the element's own text unselectable; the\n   * browser still starts a selection on long press and grabs whatever text it\n   * finds nearby. Cancelling the selection outright is what actually stops it.\n   */\n  function preventSelectStart(event: Event) {\n    event.preventDefault()\n  }\n\n  function handlePointerDown(event: Event) {\n    const pointerEvent = event as PointerEvent\n    // Only one pointer drives the drag; ignore additional touches.\n    if (pointerId !== null) return\n\n    pointerId = pointerEvent.pointerId\n    startX = lastX = pointerEvent.screenX\n    startY = lastY = pointerEvent.screenY\n\n    if (cursor && style) {\n      previousCursor = style.cursor\n      style.cursor = cursor\n    }\n\n    capture.setPointerCapture?.(pointerId)\n    // With pointer capture the element receives the rest of the gesture.\n    // Without it (older engines, jsdom) fall back to the window.\n    moveTarget =\n      capture.hasPointerCapture?.(pointerId) === true\n        ? element\n        : (globalThis.window ?? element)\n\n    moveTarget.addEventListener('pointermove', handlePointerMove)\n    moveTarget.addEventListener('pointerup', handlePointerUp)\n    moveTarget.addEventListener('pointercancel', handlePointerUp)\n    globalThis.document?.addEventListener('selectstart', preventSelectStart)\n\n    onDragStart?.(state(pointerEvent, 0, 0))\n  }\n\n  function handlePointerMove(event: Event) {\n    const pointerEvent = event as PointerEvent\n    if (pointerEvent.pointerId !== pointerId) return\n\n    const deltaX = pointerEvent.screenX - lastX\n    const deltaY = pointerEvent.screenY - lastY\n    lastX = pointerEvent.screenX\n    lastY = pointerEvent.screenY\n\n    // Movement below the threshold is dropped rather than accumulated.\n    if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return\n\n    onDrag?.(state(pointerEvent, deltaX, deltaY))\n  }\n\n  function handlePointerUp(event: Event) {\n    const pointerEvent = event as PointerEvent\n    if (pointerEvent.pointerId !== pointerId) return\n\n    const deltaX = pointerEvent.screenX - lastX\n    const deltaY = pointerEvent.screenY - lastY\n    const finalState = state(pointerEvent, deltaX, deltaY)\n\n    stopTracking()\n    onDragEnd?.(finalState)\n  }\n\n  function stopTracking() {\n    if (pointerId === null) return\n    capture.releasePointerCapture?.(pointerId)\n    moveTarget?.removeEventListener('pointermove', handlePointerMove)\n    moveTarget?.removeEventListener('pointerup', handlePointerUp)\n    moveTarget?.removeEventListener('pointercancel', handlePointerUp)\n    globalThis.document?.removeEventListener('selectstart', preventSelectStart)\n    if (cursor && style) {\n      style.cursor = previousCursor ?? ''\n      previousCursor = undefined\n    }\n    moveTarget = null\n    pointerId = null\n  }\n\n  element.addEventListener('pointerdown', handlePointerDown)\n\n  return {\n    destroy: () => {\n      stopTracking()\n      element.removeEventListener('pointerdown', handlePointerDown)\n      if (style) {\n        for (const [property] of MANAGED_STYLES) {\n          const previous = previousStyles.get(property)\n          if (previous) {\n            style.setProperty(property, previous)\n          } else {\n            style.removeProperty(property)\n          }\n        }\n      }\n    },\n  }\n}\n","export interface WheelInstance {\n  destroy: () => void\n}\n\n/**\n * Listen to wheel events on an element.\n *\n * The listener is registered with `passive: false` so that the handler can call\n * `preventDefault()` to stop the page from scrolling.\n */\nexport function createWheel(\n  element: Element,\n  onWheel: (event: WheelEvent) => void,\n): WheelInstance {\n  const handler = (event: Event) => onWheel(event as WheelEvent)\n\n  element.addEventListener('wheel', handler, { passive: false })\n\n  return {\n    destroy: () => {\n      // Only `capture` matters when removing, and it is false here.\n      element.removeEventListener('wheel', handler)\n    },\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/dom",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "framework-agnostic DOM layer used in @tremolo-ui/*",
   "type": "module",
   "sideEffects": false,

package/src/index.ts

@@ -12,3 +12,10 @@ export {
   type MIDIInputInstance,
 } from './midi/input'
 export { createMIDIMessage, type MIDIMessageInstance } from './midi/message'
+export {
+  createDrag,
+  type DragInstance,
+  type DragOptions,
+  type DragState,
+} from './pointer/drag'
+export { createWheel, type WheelInstance } from './pointer/wheel'

package/src/pointer/drag.ts

@@ -0,0 +1,215 @@
+export type DragState = {
+  /** Total movement from the drag start, in screen coordinates. */
+  x: number
+  y: number
+  /** Movement since the previous event, in screen coordinates. */
+  deltaX: number
+  deltaY: number
+  /** Pointer position in viewport coordinates. */
+  clientX: number
+  clientY: number
+  event: PointerEvent
+}
+
+export type DragOptions = {
+  /**
+   * Minimum movement in pixels before `onDrag` fires.
+   * Prevents `onDrag` from firing on, for example, a double click.
+   * Values below 1 are clamped to 1.
+   *
+   * @default 1
+   */
+  threshold?: number
+
+  /**
+   * CSS cursor to show while dragging. Applied to the element itself: pointer
+   * capture keeps it in effect even once the pointer leaves the element, so
+   * there is no need to touch the document.
+   */
+  cursor?: string
+
+  onDragStart?: (state: DragState) => void
+  onDrag?: (state: DragState) => void
+  onDragEnd?: (state: DragState) => void
+}
+
+export interface DragInstance {
+  destroy: () => void
+}
+
+/**
+ * Applied to the element for the lifetime of the instance.
+ *
+ * `touch-action` stops touch dragging from scrolling the page. That alone makes
+ * the browser treat a long press as the start of a text selection, so selection
+ * and the iOS callout are suppressed here too.
+ */
+const MANAGED_STYLES = [
+  ['touch-action', 'none'],
+  ['user-select', 'none'],
+  ['-webkit-user-select', 'none'],
+  ['-webkit-touch-callout', 'none'],
+] as const
+
+type CaptureTarget = {
+  setPointerCapture?: (pointerId: number) => void
+  releasePointerCapture?: (pointerId: number) => void
+  hasPointerCapture?: (pointerId: number) => boolean
+}
+
+/**
+ * Track a pointer drag on an element.
+ *
+ * Uses Pointer Events only, and pointer capture so that the drag keeps working
+ * once the pointer leaves the element. For the lifetime of the instance the
+ * element gets `touch-action: none` so that touch dragging does not scroll the
+ * page, plus `user-select: none` so that a long press does not start a text
+ * selection instead.
+ */
+export function createDrag(
+  element: Element,
+  {
+    threshold: _threshold = 1,
+    cursor,
+    onDragStart,
+    onDrag,
+    onDragEnd,
+  }: DragOptions = {},
+): DragInstance {
+  const threshold = Math.max(_threshold, 1)
+  const capture = element as CaptureTarget
+  const style = (element as Partial<HTMLElement>).style
+
+  const previousStyles = new Map<string, string>()
+  if (style) {
+    for (const [property, value] of MANAGED_STYLES) {
+      previousStyles.set(property, style.getPropertyValue(property))
+      style.setProperty(property, value)
+    }
+  }
+
+  let pointerId: number | null = null
+  /** Where the listeners for the current drag live. */
+  let moveTarget: EventTarget | null = null
+  let startX = 0
+  let startY = 0
+  let lastX = 0
+  let lastY = 0
+  let previousCursor: string | undefined
+
+  function state(
+    event: PointerEvent,
+    deltaX: number,
+    deltaY: number,
+  ): DragState {
+    return {
+      x: event.screenX - startX,
+      y: event.screenY - startY,
+      deltaX,
+      deltaY,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      event,
+    }
+  }
+
+  /**
+   * `user-select: none` only makes the element's own text unselectable; the
+   * browser still starts a selection on long press and grabs whatever text it
+   * finds nearby. Cancelling the selection outright is what actually stops it.
+   */
+  function preventSelectStart(event: Event) {
+    event.preventDefault()
+  }
+
+  function handlePointerDown(event: Event) {
+    const pointerEvent = event as PointerEvent
+    // Only one pointer drives the drag; ignore additional touches.
+    if (pointerId !== null) return
+
+    pointerId = pointerEvent.pointerId
+    startX = lastX = pointerEvent.screenX
+    startY = lastY = pointerEvent.screenY
+
+    if (cursor && style) {
+      previousCursor = style.cursor
+      style.cursor = cursor
+    }
+
+    capture.setPointerCapture?.(pointerId)
+    // With pointer capture the element receives the rest of the gesture.
+    // Without it (older engines, jsdom) fall back to the window.
+    moveTarget =
+      capture.hasPointerCapture?.(pointerId) === true
+        ? element
+        : (globalThis.window ?? element)
+
+    moveTarget.addEventListener('pointermove', handlePointerMove)
+    moveTarget.addEventListener('pointerup', handlePointerUp)
+    moveTarget.addEventListener('pointercancel', handlePointerUp)
+    globalThis.document?.addEventListener('selectstart', preventSelectStart)
+
+    onDragStart?.(state(pointerEvent, 0, 0))
+  }
+
+  function handlePointerMove(event: Event) {
+    const pointerEvent = event as PointerEvent
+    if (pointerEvent.pointerId !== pointerId) return
+
+    const deltaX = pointerEvent.screenX - lastX
+    const deltaY = pointerEvent.screenY - lastY
+    lastX = pointerEvent.screenX
+    lastY = pointerEvent.screenY
+
+    // Movement below the threshold is dropped rather than accumulated.
+    if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return
+
+    onDrag?.(state(pointerEvent, deltaX, deltaY))
+  }
+
+  function handlePointerUp(event: Event) {
+    const pointerEvent = event as PointerEvent
+    if (pointerEvent.pointerId !== pointerId) return
+
+    const deltaX = pointerEvent.screenX - lastX
+    const deltaY = pointerEvent.screenY - lastY
+    const finalState = state(pointerEvent, deltaX, deltaY)
+
+    stopTracking()
+    onDragEnd?.(finalState)
+  }
+
+  function stopTracking() {
+    if (pointerId === null) return
+    capture.releasePointerCapture?.(pointerId)
+    moveTarget?.removeEventListener('pointermove', handlePointerMove)
+    moveTarget?.removeEventListener('pointerup', handlePointerUp)
+    moveTarget?.removeEventListener('pointercancel', handlePointerUp)
+    globalThis.document?.removeEventListener('selectstart', preventSelectStart)
+    if (cursor && style) {
+      style.cursor = previousCursor ?? ''
+      previousCursor = undefined
+    }
+    moveTarget = null
+    pointerId = null
+  }
+
+  element.addEventListener('pointerdown', handlePointerDown)
+
+  return {
+    destroy: () => {
+      stopTracking()
+      element.removeEventListener('pointerdown', handlePointerDown)
+      if (style) {
+        for (const [property] of MANAGED_STYLES) {
+          const previous = previousStyles.get(property)
+          if (previous) {
+            style.setProperty(property, previous)
+          } else {
+            style.removeProperty(property)
+          }
+        }
+      }
+    },
+  }
+}

package/src/pointer/wheel.ts

@@ -0,0 +1,25 @@
+export interface WheelInstance {
+  destroy: () => void
+}
+
+/**
+ * Listen to wheel events on an element.
+ *
+ * The listener is registered with `passive: false` so that the handler can call
+ * `preventDefault()` to stop the page from scrolling.
+ */
+export function createWheel(
+  element: Element,
+  onWheel: (event: WheelEvent) => void,
+): WheelInstance {
+  const handler = (event: Event) => onWheel(event as WheelEvent)
+
+  element.addEventListener('wheel', handler, { passive: false })
+
+  return {
+    destroy: () => {
+      // Only `capture` matters when removing, and it is false here.
+      element.removeEventListener('wheel', handler)
+    },
+  }
+}