@antadesign/anta 0.3.26 → 0.3.27

package/dist/elements/capture-input.js

@@ -0,0 +1,609 @@
+import { finiteNumber } from "../anta_helpers";
+const CAPTURE_INPUT_ATTRIBUTES = [
+  "wheel-capture",
+  "wheel-activation",
+  "wheel-modifier",
+  "wheel-delay",
+  "wheel-tolerance",
+  "wheel-reset-on-move",
+  "pointer-capture",
+  "pointer-buttons",
+  "pointer-threshold",
+  "pointer-modifier",
+  "pointer-include-interactive",
+  "pan",
+  "pan-pointer-types",
+  "pan-threshold",
+  "pan-directions",
+  "pan-inertia",
+  "pan-time-constant",
+  "pan-min-velocity"
+];
+const inputs = /* @__PURE__ */ new WeakMap();
+const documents = /* @__PURE__ */ new WeakMap();
+const DIRECTIONS = { up: 1, down: 2, left: 4, right: 8 };
+const POINTER_TYPES = { mouse: 1, pen: 2, touch: 4 };
+const WHEEL_CONTROLS = 'textarea, select, input[type="number"], input[type="range"], a-menu';
+const INTERACTIVE = [
+  'input, textarea, select, button, summary, a[href], [contenteditable]:not([contenteditable="false"])',
+  ...[
+    "button",
+    "checkbox",
+    "combobox",
+    "link",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "radio",
+    "scrollbar",
+    "searchbox",
+    "slider",
+    "spinbutton",
+    "switch",
+    "tab",
+    "textbox",
+    "treeitem"
+  ].map((role) => `[role~="${role}"]`),
+  "a-input, a-button, a-slider, a-checkbox, a-switch, a-radio, a-menu, a-menu-item, a-tab"
+].join(", ");
+function mask(value, values, fallback) {
+  if (value === null || value === "") return fallback;
+  if (value === "all") return Object.values(values).reduce((result, bit) => result | bit, 0);
+  return value.trim().split(/\s+/).reduce((result, key) => result | (values[key] ?? 0), 0);
+}
+function numberAttr(surface, name, fallback, min = 0) {
+  return Math.max(min, finiteNumber(surface.getAttribute(name)?.trim() ?? null, fallback));
+}
+function modifierAttr(surface, name, fallback) {
+  const value = surface.getAttribute(name);
+  return value === "any" || value === "none" || value === "alt" || value === "ctrl" || value === "meta" || value === "shift" ? value : fallback;
+}
+function readWheel(surface) {
+  if (!surface.hasAttribute("wheel-capture")) return;
+  const directions = mask(surface.getAttribute("wheel-capture"), DIRECTIONS, 15);
+  const activation = surface.getAttribute("wheel-activation");
+  return {
+    directions,
+    activation: activation === "hover" || activation === "focus" || activation === "settled-or-focus" ? activation : "settled",
+    modifier: modifierAttr(surface, "wheel-modifier", "none"),
+    delay: numberAttr(surface, "wheel-delay", 150),
+    tolerance: numberAttr(surface, "wheel-tolerance", 5),
+    resetOnMove: surface.hasAttribute("wheel-reset-on-move")
+  };
+}
+function readPointer(surface) {
+  if (!surface.hasAttribute("pointer-capture")) return;
+  const types = mask(surface.getAttribute("pointer-capture"), POINTER_TYPES, 7);
+  if (!types) return;
+  const buttonAttribute = surface.getAttribute("pointer-buttons");
+  const buttons = buttonAttribute === null ? 1 : buttonAttribute.split(/\s+/).reduce((bits, button) => {
+    const n = Number(button);
+    return Number.isInteger(n) && n >= 0 && n <= 5 ? bits | 1 << n : bits;
+  }, 0);
+  if (!buttons) return;
+  return {
+    types,
+    buttons,
+    threshold: numberAttr(surface, "pointer-threshold", 0),
+    modifier: modifierAttr(surface, "pointer-modifier", "any"),
+    interactive: surface.hasAttribute("pointer-include-interactive")
+  };
+}
+function readPan(surface) {
+  if (!surface.hasAttribute("pan")) return;
+  const axis = surface.getAttribute("pan");
+  if (axis !== "" && axis !== "both" && axis !== "x" && axis !== "y") return;
+  const types = mask(surface.getAttribute("pan-pointer-types"), POINTER_TYPES, 4);
+  if (!types) return;
+  return {
+    types,
+    axis: axis || "both",
+    threshold: numberAttr(surface, "pan-threshold", 3),
+    directions: mask(surface.getAttribute("pan-directions"), DIRECTIONS, 15),
+    inertia: surface.hasAttribute("pan-inertia"),
+    tau: numberAttr(surface, "pan-time-constant", 325, 1),
+    minVelocity: numberAttr(surface, "pan-min-velocity", 0.02, 1e-3)
+  };
+}
+function inputStore(surface) {
+  const doc = surface.ownerDocument;
+  let store = documents.get(doc);
+  if (store) return store;
+  const view = doc.defaultView;
+  store = { doc, view, states: /* @__PURE__ */ new Set(), dwell: /* @__PURE__ */ new Map(), sessions: /* @__PURE__ */ new Map(), momenta: /* @__PURE__ */ new Set(), tracking: false, listening: false };
+  documents.set(doc, store);
+  view.addEventListener("blur", onWindowBlur);
+  doc.addEventListener("visibilitychange", onVisibilityChange);
+  return store;
+}
+function syncCaptureInput(surface, attribute) {
+  if (!surface.isConnected || !surface.ownerDocument.defaultView) return;
+  let state = inputs.get(surface);
+  if (!state && !surface.hasAttribute("wheel-capture") && !surface.hasAttribute("pointer-capture") && !surface.hasAttribute("pan")) return;
+  const wheel = readWheel(surface);
+  const pointer = readPointer(surface);
+  const pan = readPan(surface);
+  if (!wheel && !pointer && !pan) {
+    disconnectCaptureInput(surface, "disabled");
+    return;
+  }
+  if (!state) {
+    state = { surface, store: inputStore(surface) };
+    inputs.set(surface, state);
+    state.store.states.add(state);
+  }
+  const hadWheel = !!state.wheel;
+  const hadPointer = !!(state.pointer || state.pan);
+  state.wheel = wheel;
+  state.pointer = pointer;
+  state.pan = pan;
+  if (hadWheel !== !!wheel) {
+    if (wheel) surface.addEventListener("wheel", onWheel, { passive: false });
+    else surface.removeEventListener("wheel", onWheel);
+  }
+  if (hadPointer !== !!(pointer || pan)) {
+    if (pointer || pan) {
+      surface.addEventListener("pointerdown", onPointerDown);
+      surface.addEventListener("lostpointercapture", onLostCapture);
+      surface.addEventListener("click", onClick, true);
+      surface.addEventListener("dragstart", onDragStart);
+    } else removePointerListeners(surface);
+  }
+  if (!wheel || attribute?.startsWith("wheel-") && attribute !== "wheel-capture") state.store.dwell.delete(surface);
+  if (state.session && attribute && (attribute.startsWith("pointer-") || attribute === "pan" || attribute === "pan-pointer-types" || attribute === "pan-threshold")) {
+    finishSession(state.session, null, "disabled");
+  }
+  if (state.momentum && (!pan?.inertia || !pan.directions)) stopMomentum(state.momentum, "disabled");
+  syncDwellTracking(state.store);
+}
+function disconnectCaptureInput(surface, reason = "disconnected") {
+  const state = inputs.get(surface);
+  if (!state) return;
+  inputs.delete(surface);
+  state.wheel = void 0;
+  state.pointer = void 0;
+  state.pan = void 0;
+  surface.removeEventListener("wheel", onWheel);
+  removePointerListeners(surface);
+  if (state.session) finishSession(state.session, null, reason);
+  if (state.momentum) stopMomentum(state.momentum, reason);
+  const store = state.store;
+  store.dwell.delete(surface);
+  store.states.delete(state);
+  syncDwellTracking(store);
+  if (store.states.size) return;
+  store.view.removeEventListener("blur", onWindowBlur);
+  store.doc.removeEventListener("visibilitychange", onVisibilityChange);
+  if (documents.get(store.doc) === store) documents.delete(store.doc);
+}
+function removePointerListeners(surface) {
+  surface.removeEventListener("pointerdown", onPointerDown);
+  surface.removeEventListener("lostpointercapture", onLostCapture);
+  surface.removeEventListener("click", onClick, true);
+  surface.removeEventListener("dragstart", onDragStart);
+}
+function needsDwell(options) {
+  return options?.activation === "settled" || options?.activation === "settled-or-focus";
+}
+function syncDwellTracking(store) {
+  const tracking = Array.from(store.states).some((state) => needsDwell(state.wheel));
+  if (tracking === store.tracking) return;
+  store.tracking = tracking;
+  if (tracking) {
+    store.doc.addEventListener("pointermove", onDwellMove, { passive: true, capture: true });
+    store.doc.addEventListener("pointerout", onDwellOut, { passive: true, capture: true });
+    store.doc.addEventListener("wheel", onDwellWheel, { passive: true, capture: true });
+  } else {
+    store.doc.removeEventListener("pointermove", onDwellMove, true);
+    store.doc.removeEventListener("pointerout", onDwellOut, true);
+    store.doc.removeEventListener("wheel", onDwellWheel, true);
+    store.dwell.clear();
+  }
+}
+function onDwellMove(event) {
+  const store = documents.get(this);
+  if (!store || event.pointerType === "touch") return;
+  const path = event.composedPath();
+  for (const surface of store.dwell.keys()) {
+    if (!path.includes(surface) || event.buttons && !geometry(surface, event.clientX, event.clientY).inside) {
+      store.dwell.delete(surface);
+    }
+  }
+  for (const target of path) {
+    const state = inputs.get(target);
+    const options = state?.wheel;
+    if (!state || !options || !needsDwell(options)) continue;
+    let dwell = store.dwell.get(state.surface);
+    if (!dwell) {
+      if (event.buttons) continue;
+      store.dwell.set(state.surface, { x: event.clientX, y: event.clientY, time: event.timeStamp });
+      continue;
+    }
+    if (event.clientX === dwell.x && event.clientY === dwell.y) continue;
+    if (event.timeStamp - dwell.time >= options.delay && !options.resetOnMove) continue;
+    if (Math.abs(event.clientX - dwell.x) > options.tolerance || Math.abs(event.clientY - dwell.y) > options.tolerance) {
+      dwell = { x: event.clientX, y: event.clientY, time: event.timeStamp };
+      store.dwell.set(state.surface, dwell);
+    }
+  }
+}
+function onDwellOut(event) {
+  if (event.pointerType === "touch") return;
+  if (event.relatedTarget === null) documents.get(this)?.dwell.clear();
+}
+function onDwellWheel(event) {
+  const store = documents.get(this);
+  if (!store) return;
+  const path = event.composedPath();
+  for (const surface of store.dwell.keys()) if (!path.includes(surface)) store.dwell.delete(surface);
+}
+function matchesModifier(event, modifier) {
+  if (modifier === "any") return true;
+  if (modifier === "none") return !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+  return event[`${modifier}Key`];
+}
+function ignoredTarget(surface, event, controls) {
+  const view = surface.ownerDocument.defaultView;
+  for (const target of event.composedPath()) {
+    if (target === surface) break;
+    if (target instanceof view.Element && (target.hasAttribute("data-capture-ignore") || controls && target.matches(controls))) return true;
+  }
+  return surface.hasAttribute("data-capture-ignore");
+}
+function allows(directions, delta, horizontal) {
+  return delta !== 0 && !!(directions & (horizontal ? delta < 0 ? 4 : 8 : delta < 0 ? 1 : 2));
+}
+function geometry(surface, x, y) {
+  const rect = surface.getBoundingClientRect();
+  return {
+    localX: x - rect.left,
+    localY: y - rect.top,
+    boxWidth: rect.width,
+    boxHeight: rect.height,
+    inside: x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom,
+    focusWithin: surface.matches(":focus-within")
+  };
+}
+function serializeMouse(event) {
+  return {
+    type: event.type,
+    timeStamp: event.timeStamp,
+    isTrusted: event.isTrusted,
+    cancelable: event.cancelable,
+    defaultPrevented: event.defaultPrevented,
+    altKey: event.altKey,
+    ctrlKey: event.ctrlKey,
+    metaKey: event.metaKey,
+    shiftKey: event.shiftKey,
+    button: event.button,
+    buttons: event.buttons,
+    clientX: event.clientX,
+    clientY: event.clientY,
+    pageX: event.pageX,
+    pageY: event.pageY,
+    screenX: event.screenX,
+    screenY: event.screenY,
+    offsetX: event.offsetX,
+    offsetY: event.offsetY
+  };
+}
+function serializePointer(event) {
+  return {
+    ...serializeMouse(event),
+    pointerId: event.pointerId,
+    pointerType: event.pointerType,
+    isPrimary: event.isPrimary,
+    width: event.width,
+    height: event.height,
+    pressure: event.pressure,
+    tangentialPressure: event.tangentialPressure,
+    tiltX: event.tiltX,
+    tiltY: event.tiltY,
+    twist: event.twist
+  };
+}
+function emit(state, type, detail) {
+  state.surface.dispatchEvent(new state.store.view.CustomEvent(type, { detail }));
+}
+function onWheel(event) {
+  const state = inputs.get(this);
+  const options = state?.wheel;
+  if (!state || !options || !options.directions || event.defaultPrevented || !event.cancelable || !matchesModifier(event, options.modifier)) return;
+  const deltaMode = event.deltaMode;
+  const deltaX = event.deltaX, deltaY = event.deltaY;
+  const horizontal = Math.abs(deltaX) > Math.abs(deltaY);
+  if (!allows(options.directions, horizontal ? deltaX : deltaY, horizontal)) return;
+  let activationReason;
+  if ((options.activation === "focus" || options.activation === "settled-or-focus") && this.matches(":focus-within")) activationReason = "focus";
+  else if (options.activation === "hover") activationReason = "immediate";
+  else {
+    const dwell = state.store.dwell.get(this);
+    if (!needsDwell(options) || !dwell || event.timeStamp - dwell.time < options.delay) return;
+    activationReason = "settled";
+  }
+  if (ignoredTarget(this, event, WHEEL_CONTROLS)) return;
+  const bounds = geometry(this, event.clientX, event.clientY);
+  if (!bounds.inside) return;
+  event.preventDefault();
+  if (!event.defaultPrevented) return;
+  event.stopPropagation();
+  const wheelEvent = { ...serializeMouse(event), deltaMode, deltaX, deltaY, deltaZ: event.deltaZ };
+  if (state.momentum) stopMomentum(state.momentum, "interrupted");
+  emit(state, "wheelinput", { wheelEvent, ...bounds, activationReason });
+}
+function point(event) {
+  return { x: event.clientX, y: event.clientY, time: event.timeStamp };
+}
+function onPointerDown(event) {
+  const state = inputs.get(this);
+  if (!state) return;
+  state.suppressClickUntil = void 0;
+  if (state.momentum) stopMomentum(state.momentum, "interrupted");
+  if (event.defaultPrevented || !event.isPrimary || state.session || state.store.sessions.has(event.pointerId)) return;
+  const type = POINTER_TYPES[event.pointerType] ?? 0;
+  const options = state.pointer;
+  const pointer = !!options && !!(options.types & type) && !!(options.buttons & 1 << event.button) && matchesModifier(event, options.modifier) && !ignoredTarget(this, event, options.interactive ? "" : INTERACTIVE);
+  const pan = !!state.pan && !!(state.pan.types & type) && event.button === 0 && state.pan.directions !== 0 && !ignoredTarget(this, event, INTERACTIVE);
+  if (!pointer && !pan) return;
+  const snapshot = serializePointer(event);
+  const origin = point(snapshot);
+  const session = {
+    state,
+    id: event.pointerId,
+    start: { pointerEvent: snapshot, ...geometry(this, event.clientX, event.clientY) },
+    current: snapshot,
+    pointer,
+    pan,
+    pointerStarted: false,
+    panStarted: false,
+    captured: false,
+    pointerReason: options?.threshold ? "drag-threshold" : "pointer-down",
+    panReason: state.pan?.threshold ? "drag-threshold" : "pointer-down",
+    pointerLast: origin,
+    panLast: origin,
+    samples: pan ? [origin] : [],
+    lastMoveTime: event.timeStamp
+  };
+  state.session = session;
+  state.store.sessions.set(session.id, session);
+  syncSessionListeners(state.store);
+  updateSession(session, event, true);
+}
+function syncSessionListeners(store) {
+  const listening = store.sessions.size > 0;
+  if (listening === store.listening) return;
+  store.listening = listening;
+  if (listening) {
+    store.doc.addEventListener("pointermove", onSessionMove, { capture: true, passive: false });
+    store.doc.addEventListener("pointerup", onSessionUp, { capture: true, passive: false });
+    store.doc.addEventListener("pointercancel", onSessionCancel, true);
+  } else {
+    store.doc.removeEventListener("pointermove", onSessionMove, true);
+    store.doc.removeEventListener("pointerup", onSessionUp, true);
+    store.doc.removeEventListener("pointercancel", onSessionCancel, true);
+  }
+}
+function onSessionMove(event) {
+  const session = documents.get(this)?.sessions.get(event.pointerId);
+  if (session) updateSession(session, event);
+}
+function onSessionUp(event) {
+  const session = documents.get(this)?.sessions.get(event.pointerId);
+  if (session) finishSession(session, event);
+}
+function onSessionCancel(event) {
+  const session = documents.get(this)?.sessions.get(event.pointerId);
+  if (session) finishSession(session, event, "pointer-cancel");
+}
+function onLostCapture(event) {
+  const session = inputs.get(this)?.session;
+  if (session?.id === event.pointerId && session.captured) finishSession(session, event, "lost-capture");
+}
+function consumePointer(event) {
+  if (event.cancelable) event.preventDefault();
+}
+function recordSample(session, event) {
+  if (!session.pan) return;
+  const last = session.samples.at(-1);
+  if (!last || last.x !== event.clientX || last.y !== event.clientY) session.lastMoveTime = event.timeStamp;
+  session.samples.push(point(event));
+  while (session.samples.length > 8 || session.samples.length > 2 && event.timeStamp - session.samples[0].time > 100) session.samples.shift();
+}
+function velocity(session, time) {
+  if (time - session.lastMoveTime > 80) return { x: 0, y: 0 };
+  const last = session.samples.at(-1);
+  const first = session.samples.find((sample) => last && last.time - sample.time <= 100);
+  const dt = last && first ? last.time - first.time : 0;
+  return dt > 0 && first && last ? { x: (first.x - last.x) / dt, y: (first.y - last.y) / dt } : { x: 0, y: 0 };
+}
+function panDelta(options, x, y) {
+  return {
+    x: options.axis !== "y" && allows(options.directions, x, true) ? x : 0,
+    y: options.axis !== "x" && allows(options.directions, y, false) ? y : 0
+  };
+}
+function updateSession(session, event, down = false) {
+  const state = session.state;
+  const x = event.clientX - session.start.pointerEvent.clientX;
+  const y = event.clientY - session.start.pointerEvent.clientY;
+  const distance = Math.hypot(x, y);
+  const pointerStarts = session.pointer && !session.pointerStarted && !!state.pointer && distance >= state.pointer.threshold;
+  const panDistance = state.pan?.axis === "x" ? Math.abs(x) : state.pan?.axis === "y" ? Math.abs(y) : distance;
+  const panStarts = session.pan && !session.panStarted && !!state.pan && panDistance >= state.pan.threshold;
+  if (pointerStarts || panStarts || session.captured) {
+    if (!session.captured) {
+      try {
+        state.surface.setPointerCapture(session.id);
+      } catch {
+        finishSession(session, event, "lost-capture");
+        return;
+      }
+      session.captured = true;
+    }
+    consumePointer(event);
+  }
+  session.current = serializePointer(event);
+  if (down) session.start.pointerEvent = session.current;
+  if (!down) recordSample(session, event);
+  if (pointerStarts) {
+    session.pointerStarted = true;
+    emitPointer(session, "start", session.start.pointerEvent);
+    if (state.session !== session) return;
+  }
+  if (panStarts) {
+    session.panStarted = true;
+    emitPan(session, "start", session.start.pointerEvent);
+    if (state.session !== session) return;
+  }
+  if (down) return;
+  if (session.pointerStarted) {
+    emitPointer(session, "move", session.current);
+    if (state.session !== session) return;
+  }
+  if (session.panStarted && state.pan) {
+    const delta = panDelta(state.pan, session.panLast.x - event.clientX, session.panLast.y - event.clientY);
+    const v = velocity(session, event.timeStamp);
+    const speed = panDelta(state.pan, v.x, v.y);
+    session.panLast = point(event);
+    emitPan(session, "move", session.current, { deltaX: delta.x, deltaY: delta.y, velocityX: speed.x, velocityY: speed.y });
+  }
+}
+function emitPointer(session, phase, event, cancelReason) {
+  const current = event ?? session.current;
+  const start = session.start.pointerEvent;
+  const first = phase === "start";
+  const deltaX = first ? 0 : current.clientX - session.pointerLast.x;
+  const deltaY = first ? 0 : current.clientY - session.pointerLast.y;
+  session.pointerLast = point(current);
+  emit(session.state, "pointerinput", {
+    phase,
+    pointerEvent: event ? { ...event } : null,
+    start: snapshotStart(session),
+    ...geometry(session.state.surface, current.clientX, current.clientY),
+    deltaX,
+    deltaY,
+    movementX: current.clientX - start.clientX,
+    movementY: current.clientY - start.clientY,
+    activationReason: session.pointerReason,
+    ...cancelReason ? { cancelReason } : {}
+  });
+}
+function emitPan(session, phase, event, motion) {
+  const current = event ?? session.current;
+  emit(session.state, "paninput", {
+    phase,
+    pointerEvent: event ? { ...event } : null,
+    start: snapshotStart(session),
+    ...geometry(session.state.surface, current.clientX, current.clientY),
+    deltaX: 0,
+    deltaY: 0,
+    velocityX: 0,
+    velocityY: 0,
+    activationReason: session.panReason,
+    ...motion
+  });
+}
+function snapshotStart(session) {
+  return { ...session.start, pointerEvent: { ...session.start.pointerEvent } };
+}
+function finishSession(session, event, reason) {
+  const state = session.state;
+  if (state.session !== session) return;
+  state.session = void 0;
+  state.store.sessions.delete(session.id);
+  syncSessionListeners(state.store);
+  if (event) {
+    if (session.captured && !reason) consumePointer(event);
+    recordSample(session, event);
+    session.current = serializePointer(event);
+  }
+  if (state.surface.hasPointerCapture(session.id)) state.surface.releasePointerCapture(session.id);
+  if (session.captured) state.suppressClickUntil = state.store.view.performance.now() + 400;
+  if (session.pointerStarted) emitPointer(session, reason ? "cancel" : "end", event ? session.current : null, reason);
+  if (!session.panStarted) return;
+  if (reason || inputs.get(state.surface) !== state || !state.pan) {
+    emitPan(session, "cancel", event ? session.current : null, { cancelReason: reason ?? "disabled" });
+    return;
+  }
+  const finalDelta = panDelta(state.pan, session.panLast.x - session.current.clientX, session.panLast.y - session.current.clientY);
+  const v = velocity(session, session.current.timeStamp);
+  const speed = panDelta(state.pan, v.x, v.y);
+  emitPan(session, "release", session.current, { deltaX: finalDelta.x, deltaY: finalDelta.y, velocityX: speed.x, velocityY: speed.y });
+  const options = state.pan;
+  if (inputs.get(state.surface) !== state || !options || state.session) {
+    emitPan(session, "cancel", null, { cancelReason: "disabled" });
+    return;
+  }
+  if (options.inertia && (Math.abs(speed.x) >= options.minVelocity || Math.abs(speed.y) >= options.minVelocity)) {
+    const momentum = { state, session, vx: speed.x, vy: speed.y, time: state.store.view.performance.now() };
+    state.momentum = momentum;
+    state.store.momenta.add(momentum);
+    scheduleMomentum(state.store);
+  } else emitPan(session, "end", session.current);
+}
+function scheduleMomentum(store) {
+  if (store.frame !== void 0 || !store.momenta.size) return;
+  store.animate ??= (time) => advanceMomentum(store, time);
+  store.frame = store.view.requestAnimationFrame(store.animate);
+}
+function advanceMomentum(store, time) {
+  store.frame = void 0;
+  for (const motion of Array.from(store.momenta)) {
+    const options = motion.state.pan;
+    if (!options?.inertia || !motion.state.surface.isConnected) {
+      stopMomentum(motion, "disabled");
+      continue;
+    }
+    const dt = Math.min(50, Math.max(0, time - motion.time));
+    motion.time = time;
+    const decay = Math.exp(-dt / options.tau);
+    const delta = panDelta(options, motion.vx * options.tau * (1 - decay), motion.vy * options.tau * (1 - decay));
+    const speed = panDelta(options, motion.vx * decay, motion.vy * decay);
+    motion.vx = speed.x;
+    motion.vy = speed.y;
+    if (delta.x || delta.y) emitPan(motion.session, "inertia", null, { deltaX: delta.x, deltaY: delta.y, velocityX: speed.x, velocityY: speed.y });
+    if (!store.momenta.has(motion)) continue;
+    if (Math.abs(speed.x) < options.minVelocity && Math.abs(speed.y) < options.minVelocity) stopMomentum(motion);
+  }
+  scheduleMomentum(store);
+}
+function stopMomentum(motion, reason) {
+  const state = motion.state;
+  if (state.momentum !== motion) return;
+  state.momentum = void 0;
+  state.store.momenta.delete(motion);
+  if (!state.store.momenta.size && state.store.frame !== void 0) {
+    state.store.view.cancelAnimationFrame(state.store.frame);
+    state.store.frame = void 0;
+  }
+  emitPan(motion.session, reason ? "cancel" : "end", null, reason ? { cancelReason: reason } : void 0);
+}
+function onClick(event) {
+  const state = inputs.get(this);
+  if (!state?.suppressClickUntil || event.detail === 0 || state.store.view.performance.now() > state.suppressClickUntil) return;
+  state.suppressClickUntil = void 0;
+  event.preventDefault();
+  event.stopPropagation();
+}
+function onDragStart(event) {
+  if (inputs.get(this)?.session) event.preventDefault();
+}
+function cancelStore(store) {
+  store.dwell.clear();
+  for (const session of Array.from(store.sessions.values())) finishSession(session, null, "blur");
+  for (const motion of Array.from(store.momenta)) stopMomentum(motion, "blur");
+}
+function onWindowBlur() {
+  const store = documents.get(this.document);
+  if (store) cancelStore(store);
+}
+function onVisibilityChange() {
+  const store = documents.get(this);
+  if (store && this.hidden) cancelStore(store);
+}
+export {
+  CAPTURE_INPUT_ATTRIBUTES,
+  disconnectCaptureInput,
+  syncCaptureInput
+};

package/dist/elements/index.d.ts

@@ -18,6 +18,7 @@ export { AProgressElement, register_a_progress } from './a-progress';
 export { ALoaderElement, register_a_loader } from './a-loader';
 export { ATextElement, register_a_text } from './a-text';
 export { ABoxElement, register_a_box } from './a-box';
+export { ACaptureElement, register_a_capture } from './a-capture';
 export { AIconElement, register_a_icon } from './a-icon';
 export { AButtonElement, register_a_button } from './a-button';
 export { ACopyElement, register_a_copy } from './a-copy';

package/dist/elements/index.js

@@ -3,6 +3,7 @@ import { AProgressElement, register_a_progress } from "./a-progress";
 import { ALoaderElement, register_a_loader } from "./a-loader";
 import { ATextElement, register_a_text } from "./a-text";
 import { ABoxElement, register_a_box } from "./a-box";
+import { ACaptureElement, register_a_capture } from "./a-capture";
 import { AIconElement, register_a_icon } from "./a-icon";
 import { AButtonElement, register_a_button } from "./a-button";
 import { ACopyElement, register_a_copy } from "./a-copy";
@@ -36,6 +37,7 @@ export {
   ABoxElement,
   AButtonElement,
   ACalendarElement,
+  ACaptureElement,
   ACardElement,
   ACheckboxElement,
   ACopyElement,
@@ -66,6 +68,7 @@ export {
   register_a_box,
   register_a_button,
   register_a_calendar,
+  register_a_capture,
   register_a_card,
   register_a_checkbox,
   register_a_copy,

package/dist/general_types.d.ts

@@ -1,5 +1,6 @@
 import type { IconShape } from './elements/a-icon.shapes';
 import type { BoxContextChange, BoxDisplay, BoxMeasurementChange } from './box-types';
+import type { CaptureInputModifier, CapturePanInput, CapturePointerInput, CaptureWheelActivation, CaptureWheelInput } from './capture-types';
 /** Common props for JSX component wrappers. */
 export interface BaseProps {
     /** CSS class on the component's root element (merged with the component's own
@@ -268,6 +269,39 @@ export interface ATextAttributes extends BaseAttributes {
     /** ARIA disclosure state, mirrors the JSX wrapper's `expanded` flag. */
     'aria-expanded'?: boolean | 'true' | 'false';
 }
+/** Attributes for the opt-in light-DOM capture surface. */
+export interface ACaptureAttributes extends BaseAttributes {
+    /** Space-separated accepted wheel directions. Bare means all; `none` preserves settling while declining input. */
+    'wheel-capture'?: string;
+    'wheel-activation'?: CaptureWheelActivation;
+    'wheel-modifier'?: CaptureInputModifier;
+    'wheel-delay'?: number | string;
+    'wheel-tolerance'?: number | string;
+    'wheel-reset-on-move'?: boolean | '';
+    /** Space-separated pointer types. Bare means mouse, pen, and touch. */
+    'pointer-capture'?: string;
+    'pointer-buttons'?: string;
+    'pointer-threshold'?: number | string;
+    'pointer-modifier'?: CaptureInputModifier;
+    'pointer-include-interactive'?: boolean | '';
+    /** Enable custom panning on the selected axes. */
+    pan?: '' | 'x' | 'y' | 'both';
+    'pan-pointer-types'?: string;
+    'pan-threshold'?: number | string;
+    'pan-directions'?: string;
+    'pan-inertia'?: boolean | '';
+    'pan-time-constant'?: number | string;
+    'pan-min-velocity'?: number | string;
+    onwheelinput?: (event: CustomEvent<CaptureWheelInput> | {
+        nativeEvent: CustomEvent<CaptureWheelInput>;
+    }) => void;
+    onpointerinput?: (event: CustomEvent<CapturePointerInput> | {
+        nativeEvent: CustomEvent<CapturePointerInput>;
+    }) => void;
+    onpaninput?: (event: CustomEvent<CapturePanInput> | {
+        nativeEvent: CustomEvent<CapturePanInput>;
+    }) => void;
+}
 /** Attributes for the light-DOM `<a-box>` observing container. For the JSX
  * wrapper with cross-renderer event unwrapping, use `Box` from
  * `@antadesign/anta`. */