@react-three/fiber 8.11.8 → 8.11.10

package/dist/{index-ae10f2b1.cjs.prod.js → index-c5f9584c.cjs.prod.js}

@@ -37,15 +37,353 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
+const catalogue = {};
+const extend = objects => void Object.assign(catalogue, objects);
+function createRenderer(_roots, _getEventPriority) {
+  function createInstance(type, {
+    args = [],
+    attach,
+    ...props
+  }, root) {
+    let name = `${type[0].toUpperCase()}${type.slice(1)}`;
+    let instance;
+    if (type === 'primitive') {
+      if (props.object === undefined) throw new Error("R3F: Primitives without 'object' are invalid!");
+      const object = props.object;
+      instance = prepare(object, {
+        type,
+        root,
+        attach,
+        primitive: true
+      });
+    } else {
+      const target = catalogue[name];
+      if (!target) {
+        throw new Error(`R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`);
+      }
+
+      // Throw if an object or literal was passed for args
+      if (!Array.isArray(args)) throw new Error('R3F: The args prop must be an array!');
+
+      // Instanciate new object, link it to the root
+      // Append memoized props with args so it's not forgotten
+      instance = prepare(new target(...args), {
+        type,
+        root,
+        attach,
+        // Save args in case we need to reconstruct later for HMR
+        memoizedProps: {
+          args
+        }
+      });
+    }
+
+    // Auto-attach geometries and materials
+    if (instance.__r3f.attach === undefined) {
+      if (instance instanceof THREE__namespace.BufferGeometry) instance.__r3f.attach = 'geometry';else if (instance instanceof THREE__namespace.Material) instance.__r3f.attach = 'material';
+    }
+
+    // It should NOT call onUpdate on object instanciation, because it hasn't been added to the
+    // view yet. If the callback relies on references for instance, they won't be ready yet, this is
+    // why it passes "true" here
+    // There is no reason to apply props to injects
+    if (name !== 'inject') applyProps$1(instance, props);
+    return instance;
+  }
+  function appendChild(parentInstance, child) {
+    let added = false;
+    if (child) {
+      var _child$__r3f, _parentInstance$__r3f;
+      // The attach attribute implies that the object attaches itself on the parent
+      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
+        // add in the usual parent-child way
+        parentInstance.add(child);
+        added = true;
+      }
+      // This is for anything that used attach, and for non-Object3Ds that don't get attached to props;
+      // that is, anything that's a child in React but not a child in the scenegraph.
+      if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
+      if (!child.__r3f) prepare(child, {});
+      child.__r3f.parent = parentInstance;
+      updateInstance(child);
+      invalidateInstance(child);
+    }
+  }
+  function insertBefore(parentInstance, child, beforeChild) {
+    let added = false;
+    if (child) {
+      var _child$__r3f2, _parentInstance$__r3f2;
+      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
+        child.parent = parentInstance;
+        child.dispatchEvent({
+          type: 'added'
+        });
+        const restSiblings = parentInstance.children.filter(sibling => sibling !== child);
+        const index = restSiblings.indexOf(beforeChild);
+        parentInstance.children = [...restSiblings.slice(0, index), child, ...restSiblings.slice(index)];
+        added = true;
+      }
+      if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
+      if (!child.__r3f) prepare(child, {});
+      child.__r3f.parent = parentInstance;
+      updateInstance(child);
+      invalidateInstance(child);
+    }
+  }
+  function removeRecursive(array, parent, dispose = false) {
+    if (array) [...array].forEach(child => removeChild(parent, child, dispose));
+  }
+  function removeChild(parentInstance, child, dispose) {
+    if (child) {
+      var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
+      // Clear the parent reference
+      if (child.__r3f) child.__r3f.parent = null;
+      // Remove child from the parents objects
+      if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child);
+      // Remove attachment
+      if ((_child$__r3f3 = child.__r3f) != null && _child$__r3f3.attach) {
+        detach(parentInstance, child, child.__r3f.attach);
+      } else if (child.isObject3D && parentInstance.isObject3D) {
+        var _child$__r3f4;
+        parentInstance.remove(child);
+        // Remove interactivity
+        if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
+          removeInteractivity(child.__r3f.root, child);
+        }
+      }
+
+      // Allow objects to bail out of recursive dispose altogether by passing dispose={null}
+      // Never dispose of primitives because their state may be kept outside of React!
+      // In order for an object to be able to dispose it has to have
+      //   - a dispose method,
+      //   - it cannot be a <primitive object={...} />
+      //   - it cannot be a THREE.Scene, because three has broken it's own api
+      //
+      // Since disposal is recursive, we can check the optional dispose arg, which will be undefined
+      // when the reconciler calls it, but then carry our own check recursively
+      const isPrimitive = (_child$__r3f5 = child.__r3f) == null ? void 0 : _child$__r3f5.primitive;
+      const shouldDispose = dispose === undefined ? child.dispose !== null && !isPrimitive : dispose;
+
+      // Remove nested child objects. Primitives should not have objects and children that are
+      // attached to them declaratively ...
+      if (!isPrimitive) {
+        var _child$__r3f6;
+        removeRecursive((_child$__r3f6 = child.__r3f) == null ? void 0 : _child$__r3f6.objects, child, shouldDispose);
+        removeRecursive(child.children, child, shouldDispose);
+      }
+
+      // Remove references
+      if (child.__r3f) {
+        delete child.__r3f.root;
+        delete child.__r3f.objects;
+        delete child.__r3f.handlers;
+        delete child.__r3f.memoizedProps;
+        if (!isPrimitive) delete child.__r3f;
+      }
+
+      // Dispose item whenever the reconciler feels like it
+      if (shouldDispose && child.dispose && child.type !== 'Scene') {
+        scheduler.unstable_scheduleCallback(scheduler.unstable_IdlePriority, () => {
+          try {
+            child.dispose();
+          } catch (e) {
+            /* ... */
+          }
+        });
+      }
+      invalidateInstance(parentInstance);
+    }
+  }
+  function switchInstance(instance, type, newProps, fiber) {
+    var _instance$__r3f;
+    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
+    if (!parent) return;
+    const newInstance = createInstance(type, newProps, instance.__r3f.root);
+
+    // https://github.com/pmndrs/react-three-fiber/issues/1348
+    // When args change the instance has to be re-constructed, which then
+    // forces r3f to re-parent the children and non-scene objects
+    if (instance.children) {
+      for (const child of instance.children) {
+        if (child.__r3f) appendChild(newInstance, child);
+      }
+      instance.children = instance.children.filter(child => !child.__r3f);
+    }
+    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
+    instance.__r3f.objects = [];
+    if (!instance.__r3f.autoRemovedBeforeAppend) {
+      removeChild(parent, instance);
+    }
+    if (newInstance.parent) {
+      newInstance.__r3f.autoRemovedBeforeAppend = true;
+    }
+    appendChild(parent, newInstance);
+
+    // Re-bind event handlers
+    if (newInstance.raycast && newInstance.__r3f.eventCount) {
+      const rootState = newInstance.__r3f.root.getState();
+      rootState.internal.interaction.push(newInstance);
+    }
+    [fiber, fiber.alternate].forEach(fiber => {
+      if (fiber !== null) {
+        fiber.stateNode = newInstance;
+        if (fiber.ref) {
+          if (typeof fiber.ref === 'function') fiber.ref(newInstance);else fiber.ref.current = newInstance;
+        }
+      }
+    });
+  }
+
+  // Don't handle text instances, warn on undefined behavior
+  const handleTextInstance = () => console.warn('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
+  const reconciler = Reconciler__default["default"]({
+    createInstance,
+    removeChild,
+    appendChild,
+    appendInitialChild: appendChild,
+    insertBefore,
+    supportsMutation: true,
+    isPrimaryRenderer: false,
+    supportsPersistence: false,
+    supportsHydration: false,
+    noTimeout: -1,
+    appendChildToContainer: (container, child) => {
+      if (!child) return;
+
+      // Don't append to unmounted container
+      const scene = container.getState().scene;
+      if (!scene.__r3f) return;
+
+      // Link current root to the default scene
+      scene.__r3f.root = container;
+      appendChild(scene, child);
+    },
+    removeChildFromContainer: (container, child) => {
+      if (!child) return;
+      removeChild(container.getState().scene, child);
+    },
+    insertInContainerBefore: (container, child, beforeChild) => {
+      if (!child || !beforeChild) return;
+
+      // Don't append to unmounted container
+      const scene = container.getState().scene;
+      if (!scene.__r3f) return;
+      insertBefore(scene, child, beforeChild);
+    },
+    getRootHostContext: () => null,
+    getChildHostContext: parentHostContext => parentHostContext,
+    finalizeInitialChildren(instance) {
+      var _instance$__r3f2;
+      const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {};
+      // https://github.com/facebook/react/issues/20271
+      // Returning true will trigger commitMount
+      return Boolean(localState.handlers);
+    },
+    prepareUpdate(instance, _type, oldProps, newProps) {
+      // Create diff-sets
+      if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
+        return [true];
+      } else {
+        // This is a data object, let's extract critical information about it
+        const {
+          args: argsNew = [],
+          children: cN,
+          ...restNew
+        } = newProps;
+        const {
+          args: argsOld = [],
+          children: cO,
+          ...restOld
+        } = oldProps;
+
+        // Throw if an object or literal was passed for args
+        if (!Array.isArray(argsNew)) throw new Error('R3F: the args prop must be an array!');
+
+        // If it has new props or arguments, then it needs to be re-instantiated
+        if (argsNew.some((value, index) => value !== argsOld[index])) return [true];
+        // Create a diff-set, flag if there are any changes
+        const diff = diffProps(instance, restNew, restOld, true);
+        if (diff.changes.length) return [false, diff];
+
+        // Otherwise do not touch the instance
+        return null;
+      }
+    },
+    commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
+      // Reconstruct when args or <primitive object={...} have changes
+      if (reconstruct) switchInstance(instance, type, newProps, fiber);
+      // Otherwise just overwrite props
+      else applyProps$1(instance, diff);
+    },
+    commitMount(instance, _type, _props, _int) {
+      var _instance$__r3f3;
+      // https://github.com/facebook/react/issues/20271
+      // This will make sure events are only added once to the central container
+      const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
+      if (instance.raycast && localState.handlers && localState.eventCount) {
+        instance.__r3f.root.getState().internal.interaction.push(instance);
+      }
+    },
+    getPublicInstance: instance => instance,
+    prepareForCommit: () => null,
+    preparePortalMount: container => prepare(container.getState().scene),
+    resetAfterCommit: () => {},
+    shouldSetTextContent: () => false,
+    clearContainer: () => false,
+    hideInstance(instance) {
+      var _instance$__r3f4;
+      // Detach while the instance is hidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f4 = instance.__r3f) != null ? _instance$__r3f4 : {};
+      if (type && parent) detach(parent, instance, type);
+      if (instance.isObject3D) instance.visible = false;
+      invalidateInstance(instance);
+    },
+    unhideInstance(instance, props) {
+      var _instance$__r3f5;
+      // Re-attach when the instance is unhidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f5 = instance.__r3f) != null ? _instance$__r3f5 : {};
+      if (type && parent) attach(parent, instance, type);
+      if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
+      invalidateInstance(instance);
+    },
+    createTextInstance: handleTextInstance,
+    hideTextInstance: handleTextInstance,
+    unhideTextInstance: handleTextInstance,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
+    // @ts-ignore
+    getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
+    beforeActiveInstanceBlur: () => {},
+    afterActiveInstanceBlur: () => {},
+    detachDeletedInstance: () => {},
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
+    scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
+    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
+  });
+  return {
+    reconciler,
+    applyProps: applyProps$1
+  };
+}
+
 var _window$document, _window$navigator;
-/**
- * Safely accesses a deeply-nested value on an object to get around static bundler analysis.
- */
-const getDeep = (obj, ...keys) => keys.reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
 /**
  * The current THREE.ColorManagement instance, if present.
  */
-const ColorManagement = 'ColorManagement' in THREE__namespace && getDeep(THREE__namespace, 'ColorManagement') || null;
+const getColorManagement = () => {
+  var _ColorManagement;
+  return (_ColorManagement = catalogue.ColorManagement) != null ? _ColorManagement : null;
+};
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const isRef = obj => obj && obj.hasOwnProperty('current');
 
@@ -384,7 +722,7 @@ function applyProps$1(instance, data) {
         // For versions of three which don't support THREE.ColorManagement,
         // Auto-convert sRGB colors
         // https://github.com/pmndrs/react-three-fiber/issues/344
-        if (!ColorManagement && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
+        if (!getColorManagement() && !rootState.linear && isColor) targetProp.convertSRGBToLinear();
       }
       // Else, just overwrite the value
     } else {
@@ -469,724 +807,405 @@ function getEventPriority() {
     case 'wheel':
       return constants.ContinuousEventPriority;
     default:
-      return constants.DefaultEventPriority;
-  }
-}
-
-/**
- * Release pointer captures.
- * This is called by releasePointerCapture in the API, and when an object is removed.
- */
-function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
-  const captureData = captures.get(obj);
-  if (captureData) {
-    captures.delete(obj);
-    // If this was the last capturing object for this pointer
-    if (captures.size === 0) {
-      capturedMap.delete(pointerId);
-      captureData.target.releasePointerCapture(pointerId);
-    }
-  }
-}
-function removeInteractivity(store, object) {
-  const {
-    internal
-  } = store.getState();
-  // Removes every trace of an object from the data store
-  internal.interaction = internal.interaction.filter(o => o !== object);
-  internal.initialHits = internal.initialHits.filter(o => o !== object);
-  internal.hovered.forEach((value, key) => {
-    if (value.eventObject === object || value.object === object) {
-      // Clear out intersects, they are outdated by now
-      internal.hovered.delete(key);
-    }
-  });
-  internal.capturedMap.forEach((captures, pointerId) => {
-    releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
-  });
-}
-function createEvents(store) {
-  /** Calculates delta */
-  function calculateDistance(event) {
-    const {
-      internal
-    } = store.getState();
-    const dx = event.offsetX - internal.initialClick[0];
-    const dy = event.offsetY - internal.initialClick[1];
-    return Math.round(Math.sqrt(dx * dx + dy * dy));
-  }
-
-  /** Returns true if an instance has a valid pointer-event registered, this excludes scroll, clicks etc */
-  function filterPointerEvents(objects) {
-    return objects.filter(obj => ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(name => {
-      var _r3f;
-      return (_r3f = obj.__r3f) == null ? void 0 : _r3f.handlers['onPointer' + name];
-    }));
-  }
-  function intersect(event, filter) {
-    const state = store.getState();
-    const duplicates = new Set();
-    const intersections = [];
-    // Allow callers to eliminate event objects
-    const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction;
-    // Reset all raycaster cameras to undefined
-    for (let i = 0; i < eventsObjects.length; i++) {
-      const state = getRootState(eventsObjects[i]);
-      if (state) {
-        state.raycaster.camera = undefined;
-      }
-    }
-    if (!state.previousRoot) {
-      // Make sure root-level pointer and ray are set up
-      state.events.compute == null ? void 0 : state.events.compute(event, state);
-    }
-    function handleRaycast(obj) {
-      const state = getRootState(obj);
-      // Skip event handling when noEvents is set, or when the raycasters camera is null
-      if (!state || !state.events.enabled || state.raycaster.camera === null) return [];
-
-      // When the camera is undefined we have to call the event layers update function
-      if (state.raycaster.camera === undefined) {
-        var _state$previousRoot;
-        state.events.compute == null ? void 0 : state.events.compute(event, state, (_state$previousRoot = state.previousRoot) == null ? void 0 : _state$previousRoot.getState());
-        // If the camera is still undefined we have to skip this layer entirely
-        if (state.raycaster.camera === undefined) state.raycaster.camera = null;
-      }
-
-      // Intersect object by object
-      return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
-    }
-
-    // Collect events
-    let hits = eventsObjects
-    // Intersect objects
-    .flatMap(handleRaycast)
-    // Sort by event priority and distance
-    .sort((a, b) => {
-      const aState = getRootState(a.object);
-      const bState = getRootState(b.object);
-      if (!aState || !bState) return a.distance - b.distance;
-      return bState.events.priority - aState.events.priority || a.distance - b.distance;
-    })
-    // Filter out duplicates
-    .filter(item => {
-      const id = makeId(item);
-      if (duplicates.has(id)) return false;
-      duplicates.add(id);
-      return true;
-    });
-
-    // https://github.com/mrdoob/three.js/issues/16031
-    // Allow custom userland intersect sort order, this likely only makes sense on the root filter
-    if (state.events.filter) hits = state.events.filter(hits, state);
-
-    // Bubble up the events, find the event source (eventObject)
-    for (const hit of hits) {
-      let eventObject = hit.object;
-      // Bubble event up
-      while (eventObject) {
-        var _r3f2;
-        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({
-          ...hit,
-          eventObject
-        });
-        eventObject = eventObject.parent;
-      }
-    }
-
-    // If the interaction is captured, make all capturing targets part of the intersect.
-    if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
-      for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
-        if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
-      }
-    }
-    return intersections;
-  }
-
-  /**  Handles intersections by forwarding them to handlers */
-  function handleIntersects(intersections, event, delta, callback) {
-    const rootState = store.getState();
-
-    // If anything has been found, forward it to the event listeners
-    if (intersections.length) {
-      const localState = {
-        stopped: false
-      };
-      for (const hit of intersections) {
-        const state = getRootState(hit.object) || rootState;
-        const {
-          raycaster,
-          pointer,
-          camera,
-          internal
-        } = state;
-        const unprojectedPoint = new THREE__namespace.Vector3(pointer.x, pointer.y, 0).unproject(camera);
-        const hasPointerCapture = id => {
-          var _internal$capturedMap, _internal$capturedMap2;
-          return (_internal$capturedMap = (_internal$capturedMap2 = internal.capturedMap.get(id)) == null ? void 0 : _internal$capturedMap2.has(hit.eventObject)) != null ? _internal$capturedMap : false;
-        };
-        const setPointerCapture = id => {
-          const captureData = {
-            intersection: hit,
-            target: event.target
-          };
-          if (internal.capturedMap.has(id)) {
-            // if the pointerId was previously captured, we add the hit to the
-            // event capturedMap.
-            internal.capturedMap.get(id).set(hit.eventObject, captureData);
-          } else {
-            // if the pointerId was not previously captured, we create a map
-            // containing the hitObject, and the hit. hitObject is used for
-            // faster access.
-            internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
-          }
-          event.target.setPointerCapture(id);
-        };
-        const releasePointerCapture = id => {
-          const captures = internal.capturedMap.get(id);
-          if (captures) {
-            releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
-          }
-        };
-
-        // Add native event props
-        let extractEventProps = {};
-        // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
-        for (let prop in event) {
-          let property = event[prop];
-          // Only copy over atomics, leave functions alone as these should be
-          // called as event.nativeEvent.fn()
-          if (typeof property !== 'function') extractEventProps[prop] = property;
-        }
-        let raycastEvent = {
-          ...hit,
-          ...extractEventProps,
-          pointer,
-          intersections,
-          stopped: localState.stopped,
-          delta,
-          unprojectedPoint,
-          ray: raycaster.ray,
-          camera: camera,
-          // Hijack stopPropagation, which just sets a flag
-          stopPropagation() {
-            // https://github.com/pmndrs/react-three-fiber/issues/596
-            // Events are not allowed to stop propagation if the pointer has been captured
-            const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId);
-
-            // We only authorize stopPropagation...
-            if (
-            // ...if this pointer hasn't been captured
-            !capturesForPointer ||
-            // ... or if the hit object is capturing the pointer
-            capturesForPointer.has(hit.eventObject)) {
-              raycastEvent.stopped = localState.stopped = true;
-              // Propagation is stopped, remove all other hover records
-              // An event handler is only allowed to flush other handlers if it is hovered itself
-              if (internal.hovered.size && Array.from(internal.hovered.values()).find(i => i.eventObject === hit.eventObject)) {
-                // Objects cannot flush out higher up objects that have already caught the event
-                const higher = intersections.slice(0, intersections.indexOf(hit));
-                cancelPointer([...higher, hit]);
-              }
-            }
-          },
-          // there should be a distinction between target and currentTarget
-          target: {
-            hasPointerCapture,
-            setPointerCapture,
-            releasePointerCapture
-          },
-          currentTarget: {
-            hasPointerCapture,
-            setPointerCapture,
-            releasePointerCapture
-          },
-          nativeEvent: event
-        };
-
-        // Call subscribers
-        callback(raycastEvent);
-        // Event bubbling may be interrupted by stopPropagation
-        if (localState.stopped === true) break;
-      }
+      return constants.DefaultEventPriority;
+  }
+}
+
+/**
+ * Release pointer captures.
+ * This is called by releasePointerCapture in the API, and when an object is removed.
+ */
+function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
+  const captureData = captures.get(obj);
+  if (captureData) {
+    captures.delete(obj);
+    // If this was the last capturing object for this pointer
+    if (captures.size === 0) {
+      capturedMap.delete(pointerId);
+      captureData.target.releasePointerCapture(pointerId);
     }
-    return intersections;
   }
-  function cancelPointer(intersections) {
+}
+function removeInteractivity(store, object) {
+  const {
+    internal
+  } = store.getState();
+  // Removes every trace of an object from the data store
+  internal.interaction = internal.interaction.filter(o => o !== object);
+  internal.initialHits = internal.initialHits.filter(o => o !== object);
+  internal.hovered.forEach((value, key) => {
+    if (value.eventObject === object || value.object === object) {
+      // Clear out intersects, they are outdated by now
+      internal.hovered.delete(key);
+    }
+  });
+  internal.capturedMap.forEach((captures, pointerId) => {
+    releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
+  });
+}
+function createEvents(store) {
+  /** Calculates delta */
+  function calculateDistance(event) {
     const {
       internal
     } = store.getState();
-    for (const hoveredObj of internal.hovered.values()) {
-      // When no objects were hit or the the hovered object wasn't found underneath the cursor
-      // we call onPointerOut and delete the object from the hovered-elements map
-      if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
-        const eventObject = hoveredObj.eventObject;
-        const instance = eventObject.__r3f;
-        const handlers = instance == null ? void 0 : instance.handlers;
-        internal.hovered.delete(makeId(hoveredObj));
-        if (instance != null && instance.eventCount) {
-          // Clear out intersects, they are outdated by now
-          const data = {
-            ...hoveredObj,
-            intersections
-          };
-          handlers.onPointerOut == null ? void 0 : handlers.onPointerOut(data);
-          handlers.onPointerLeave == null ? void 0 : handlers.onPointerLeave(data);
-        }
-      }
-    }
-  }
-  function pointerMissed(event, objects) {
-    for (let i = 0; i < objects.length; i++) {
-      const instance = objects[i].__r3f;
-      instance == null ? void 0 : instance.handlers.onPointerMissed == null ? void 0 : instance.handlers.onPointerMissed(event);
-    }
+    const dx = event.offsetX - internal.initialClick[0];
+    const dy = event.offsetY - internal.initialClick[1];
+    return Math.round(Math.sqrt(dx * dx + dy * dy));
   }
-  function handlePointer(name) {
-    // Deal with cancelation
-    switch (name) {
-      case 'onPointerLeave':
-      case 'onPointerCancel':
-        return () => cancelPointer([]);
-      case 'onLostPointerCapture':
-        return event => {
-          const {
-            internal
-          } = store.getState();
-          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-            // If the object event interface had onLostPointerCapture, we'd call it here on every
-            // object that's getting removed.
-            internal.capturedMap.delete(event.pointerId);
-            cancelPointer([]);
-          }
-        };
-    }
-
-    // Any other pointer goes here ...
-    return function handleEvent(event) {
-      const {
-        onPointerMissed,
-        internal
-      } = store.getState();
-
-      // prepareRay(event)
-      internal.lastEvent.current = event;
-
-      // Get fresh intersects
-      const isPointerMove = name === 'onPointerMove';
-      const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
-      const filter = isPointerMove ? filterPointerEvents : undefined;
-      const hits = intersect(event, filter);
-      const delta = isClickEvent ? calculateDistance(event) : 0;
-
-      // Save initial coordinates on pointer-down
-      if (name === 'onPointerDown') {
-        internal.initialClick = [event.offsetX, event.offsetY];
-        internal.initialHits = hits.map(hit => hit.eventObject);
-      }
-
-      // If a click yields no results, pass it back to the user as a miss
-      // Missed events have to come first in order to establish user-land side-effect clean up
-      if (isClickEvent && !hits.length) {
-        if (delta <= 2) {
-          pointerMissed(event, internal.interaction);
-          if (onPointerMissed) onPointerMissed(event);
-        }
-      }
-      // Take care of unhover
-      if (isPointerMove) cancelPointer(hits);
-      function onIntersect(data) {
-        const eventObject = data.eventObject;
-        const instance = eventObject.__r3f;
-        const handlers = instance == null ? void 0 : instance.handlers;
 
-        // Check presence of handlers
-        if (!(instance != null && instance.eventCount)) return;
-        if (isPointerMove) {
-          // Move event ...
-          if (handlers.onPointerOver || handlers.onPointerEnter || handlers.onPointerOut || handlers.onPointerLeave) {
-            // When enter or out is present take care of hover-state
-            const id = makeId(data);
-            const hoveredItem = internal.hovered.get(id);
-            if (!hoveredItem) {
-              // If the object wasn't previously hovered, book it and call its handler
-              internal.hovered.set(id, data);
-              handlers.onPointerOver == null ? void 0 : handlers.onPointerOver(data);
-              handlers.onPointerEnter == null ? void 0 : handlers.onPointerEnter(data);
-            } else if (hoveredItem.stopped) {
-              // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
-              data.stopPropagation();
-            }
-          }
-          // Call mouse move
-          handlers.onPointerMove == null ? void 0 : handlers.onPointerMove(data);
-        } else {
-          // All other events ...
-          const handler = handlers[name];
-          if (handler) {
-            // Forward all events back to their respective handlers with the exception of click events,
-            // which must use the initial target
-            if (!isClickEvent || internal.initialHits.includes(eventObject)) {
-              // Missed events have to come first
-              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
-              // Now call the handler
-              handler(data);
-            }
-          } else {
-            // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
-            if (isClickEvent && internal.initialHits.includes(eventObject)) {
-              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
-            }
-          }
-        }
-      }
-      handleIntersects(hits, event, delta, onIntersect);
-    };
+  /** Returns true if an instance has a valid pointer-event registered, this excludes scroll, clicks etc */
+  function filterPointerEvents(objects) {
+    return objects.filter(obj => ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(name => {
+      var _r3f;
+      return (_r3f = obj.__r3f) == null ? void 0 : _r3f.handlers['onPointer' + name];
+    }));
   }
-  return {
-    handlePointer
-  };
-}
-
-let catalogue = {};
-let extend = objects => void (catalogue = {
-  ...catalogue,
-  ...objects
-});
-function createRenderer(_roots, _getEventPriority) {
-  function createInstance(type, {
-    args = [],
-    attach,
-    ...props
-  }, root) {
-    let name = `${type[0].toUpperCase()}${type.slice(1)}`;
-    let instance;
-    if (type === 'primitive') {
-      if (props.object === undefined) throw new Error("R3F: Primitives without 'object' are invalid!");
-      const object = props.object;
-      instance = prepare(object, {
-        type,
-        root,
-        attach,
-        primitive: true
-      });
-    } else {
-      const target = catalogue[name];
-      if (!target) {
-        throw new Error(`R3F: ${name} is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively`);
+  function intersect(event, filter) {
+    const state = store.getState();
+    const duplicates = new Set();
+    const intersections = [];
+    // Allow callers to eliminate event objects
+    const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction;
+    // Reset all raycaster cameras to undefined
+    for (let i = 0; i < eventsObjects.length; i++) {
+      const state = getRootState(eventsObjects[i]);
+      if (state) {
+        state.raycaster.camera = undefined;
       }
+    }
+    if (!state.previousRoot) {
+      // Make sure root-level pointer and ray are set up
+      state.events.compute == null ? void 0 : state.events.compute(event, state);
+    }
+    function handleRaycast(obj) {
+      const state = getRootState(obj);
+      // Skip event handling when noEvents is set, or when the raycasters camera is null
+      if (!state || !state.events.enabled || state.raycaster.camera === null) return [];
 
-      // Throw if an object or literal was passed for args
-      if (!Array.isArray(args)) throw new Error('R3F: The args prop must be an array!');
+      // When the camera is undefined we have to call the event layers update function
+      if (state.raycaster.camera === undefined) {
+        var _state$previousRoot;
+        state.events.compute == null ? void 0 : state.events.compute(event, state, (_state$previousRoot = state.previousRoot) == null ? void 0 : _state$previousRoot.getState());
+        // If the camera is still undefined we have to skip this layer entirely
+        if (state.raycaster.camera === undefined) state.raycaster.camera = null;
+      }
 
-      // Instanciate new object, link it to the root
-      // Append memoized props with args so it's not forgotten
-      instance = prepare(new target(...args), {
-        type,
-        root,
-        attach,
-        // Save args in case we need to reconstruct later for HMR
-        memoizedProps: {
-          args
-        }
-      });
+      // Intersect object by object
+      return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
     }
 
-    // Auto-attach geometries and materials
-    if (instance.__r3f.attach === undefined) {
-      if (instance instanceof THREE__namespace.BufferGeometry) instance.__r3f.attach = 'geometry';else if (instance instanceof THREE__namespace.Material) instance.__r3f.attach = 'material';
-    }
+    // Collect events
+    let hits = eventsObjects
+    // Intersect objects
+    .flatMap(handleRaycast)
+    // Sort by event priority and distance
+    .sort((a, b) => {
+      const aState = getRootState(a.object);
+      const bState = getRootState(b.object);
+      if (!aState || !bState) return a.distance - b.distance;
+      return bState.events.priority - aState.events.priority || a.distance - b.distance;
+    })
+    // Filter out duplicates
+    .filter(item => {
+      const id = makeId(item);
+      if (duplicates.has(id)) return false;
+      duplicates.add(id);
+      return true;
+    });
+
+    // https://github.com/mrdoob/three.js/issues/16031
+    // Allow custom userland intersect sort order, this likely only makes sense on the root filter
+    if (state.events.filter) hits = state.events.filter(hits, state);
 
-    // It should NOT call onUpdate on object instanciation, because it hasn't been added to the
-    // view yet. If the callback relies on references for instance, they won't be ready yet, this is
-    // why it passes "true" here
-    // There is no reason to apply props to injects
-    if (name !== 'inject') applyProps$1(instance, props);
-    return instance;
-  }
-  function appendChild(parentInstance, child) {
-    let added = false;
-    if (child) {
-      var _child$__r3f, _parentInstance$__r3f;
-      // The attach attribute implies that the object attaches itself on the parent
-      if ((_child$__r3f = child.__r3f) != null && _child$__r3f.attach) {
-        attach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
-        // add in the usual parent-child way
-        parentInstance.add(child);
-        added = true;
+    // Bubble up the events, find the event source (eventObject)
+    for (const hit of hits) {
+      let eventObject = hit.object;
+      // Bubble event up
+      while (eventObject) {
+        var _r3f2;
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({
+          ...hit,
+          eventObject
+        });
+        eventObject = eventObject.parent;
       }
-      // This is for anything that used attach, and for non-Object3Ds that don't get attached to props;
-      // that is, anything that's a child in React but not a child in the scenegraph.
-      if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
-      if (!child.__r3f) prepare(child, {});
-      child.__r3f.parent = parentInstance;
-      updateInstance(child);
-      invalidateInstance(child);
     }
-  }
-  function insertBefore(parentInstance, child, beforeChild) {
-    let added = false;
-    if (child) {
-      var _child$__r3f2, _parentInstance$__r3f2;
-      if ((_child$__r3f2 = child.__r3f) != null && _child$__r3f2.attach) {
-        attach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
-        child.parent = parentInstance;
-        child.dispatchEvent({
-          type: 'added'
-        });
-        const restSiblings = parentInstance.children.filter(sibling => sibling !== child);
-        const index = restSiblings.indexOf(beforeChild);
-        parentInstance.children = [...restSiblings.slice(0, index), child, ...restSiblings.slice(index)];
-        added = true;
+
+    // If the interaction is captured, make all capturing targets part of the intersect.
+    if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
+      for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
+        if (!duplicates.has(makeId(captureData.intersection))) intersections.push(captureData.intersection);
       }
-      if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
-      if (!child.__r3f) prepare(child, {});
-      child.__r3f.parent = parentInstance;
-      updateInstance(child);
-      invalidateInstance(child);
     }
+    return intersections;
   }
-  function removeRecursive(array, parent, dispose = false) {
-    if (array) [...array].forEach(child => removeChild(parent, child, dispose));
-  }
-  function removeChild(parentInstance, child, dispose) {
-    if (child) {
-      var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
-      // Clear the parent reference
-      if (child.__r3f) child.__r3f.parent = null;
-      // Remove child from the parents objects
-      if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child);
-      // Remove attachment
-      if ((_child$__r3f3 = child.__r3f) != null && _child$__r3f3.attach) {
-        detach(parentInstance, child, child.__r3f.attach);
-      } else if (child.isObject3D && parentInstance.isObject3D) {
-        var _child$__r3f4;
-        parentInstance.remove(child);
-        // Remove interactivity
-        if ((_child$__r3f4 = child.__r3f) != null && _child$__r3f4.root) {
-          removeInteractivity(child.__r3f.root, child);
-        }
-      }
 
-      // Allow objects to bail out of recursive dispose altogether by passing dispose={null}
-      // Never dispose of primitives because their state may be kept outside of React!
-      // In order for an object to be able to dispose it has to have
-      //   - a dispose method,
-      //   - it cannot be a <primitive object={...} />
-      //   - it cannot be a THREE.Scene, because three has broken it's own api
-      //
-      // Since disposal is recursive, we can check the optional dispose arg, which will be undefined
-      // when the reconciler calls it, but then carry our own check recursively
-      const isPrimitive = (_child$__r3f5 = child.__r3f) == null ? void 0 : _child$__r3f5.primitive;
-      const shouldDispose = dispose === undefined ? child.dispose !== null && !isPrimitive : dispose;
+  /**  Handles intersections by forwarding them to handlers */
+  function handleIntersects(intersections, event, delta, callback) {
+    const rootState = store.getState();
 
-      // Remove nested child objects. Primitives should not have objects and children that are
-      // attached to them declaratively ...
-      if (!isPrimitive) {
-        var _child$__r3f6;
-        removeRecursive((_child$__r3f6 = child.__r3f) == null ? void 0 : _child$__r3f6.objects, child, shouldDispose);
-        removeRecursive(child.children, child, shouldDispose);
-      }
+    // If anything has been found, forward it to the event listeners
+    if (intersections.length) {
+      const localState = {
+        stopped: false
+      };
+      for (const hit of intersections) {
+        const state = getRootState(hit.object) || rootState;
+        const {
+          raycaster,
+          pointer,
+          camera,
+          internal
+        } = state;
+        const unprojectedPoint = new THREE__namespace.Vector3(pointer.x, pointer.y, 0).unproject(camera);
+        const hasPointerCapture = id => {
+          var _internal$capturedMap, _internal$capturedMap2;
+          return (_internal$capturedMap = (_internal$capturedMap2 = internal.capturedMap.get(id)) == null ? void 0 : _internal$capturedMap2.has(hit.eventObject)) != null ? _internal$capturedMap : false;
+        };
+        const setPointerCapture = id => {
+          const captureData = {
+            intersection: hit,
+            target: event.target
+          };
+          if (internal.capturedMap.has(id)) {
+            // if the pointerId was previously captured, we add the hit to the
+            // event capturedMap.
+            internal.capturedMap.get(id).set(hit.eventObject, captureData);
+          } else {
+            // if the pointerId was not previously captured, we create a map
+            // containing the hitObject, and the hit. hitObject is used for
+            // faster access.
+            internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
+          }
+          event.target.setPointerCapture(id);
+        };
+        const releasePointerCapture = id => {
+          const captures = internal.capturedMap.get(id);
+          if (captures) {
+            releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+          }
+        };
 
-      // Remove references
-      if (child.__r3f) {
-        delete child.__r3f.root;
-        delete child.__r3f.objects;
-        delete child.__r3f.handlers;
-        delete child.__r3f.memoizedProps;
-        if (!isPrimitive) delete child.__r3f;
-      }
+        // Add native event props
+        let extractEventProps = {};
+        // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
+        for (let prop in event) {
+          let property = event[prop];
+          // Only copy over atomics, leave functions alone as these should be
+          // called as event.nativeEvent.fn()
+          if (typeof property !== 'function') extractEventProps[prop] = property;
+        }
+        let raycastEvent = {
+          ...hit,
+          ...extractEventProps,
+          pointer,
+          intersections,
+          stopped: localState.stopped,
+          delta,
+          unprojectedPoint,
+          ray: raycaster.ray,
+          camera: camera,
+          // Hijack stopPropagation, which just sets a flag
+          stopPropagation() {
+            // https://github.com/pmndrs/react-three-fiber/issues/596
+            // Events are not allowed to stop propagation if the pointer has been captured
+            const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId);
 
-      // Dispose item whenever the reconciler feels like it
-      if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        scheduler.unstable_scheduleCallback(scheduler.unstable_IdlePriority, () => {
-          try {
-            child.dispose();
-          } catch (e) {
-            /* ... */
-          }
-        });
+            // We only authorize stopPropagation...
+            if (
+            // ...if this pointer hasn't been captured
+            !capturesForPointer ||
+            // ... or if the hit object is capturing the pointer
+            capturesForPointer.has(hit.eventObject)) {
+              raycastEvent.stopped = localState.stopped = true;
+              // Propagation is stopped, remove all other hover records
+              // An event handler is only allowed to flush other handlers if it is hovered itself
+              if (internal.hovered.size && Array.from(internal.hovered.values()).find(i => i.eventObject === hit.eventObject)) {
+                // Objects cannot flush out higher up objects that have already caught the event
+                const higher = intersections.slice(0, intersections.indexOf(hit));
+                cancelPointer([...higher, hit]);
+              }
+            }
+          },
+          // there should be a distinction between target and currentTarget
+          target: {
+            hasPointerCapture,
+            setPointerCapture,
+            releasePointerCapture
+          },
+          currentTarget: {
+            hasPointerCapture,
+            setPointerCapture,
+            releasePointerCapture
+          },
+          nativeEvent: event
+        };
+
+        // Call subscribers
+        callback(raycastEvent);
+        // Event bubbling may be interrupted by stopPropagation
+        if (localState.stopped === true) break;
       }
-      invalidateInstance(parentInstance);
     }
+    return intersections;
   }
-  function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f;
-    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
-    if (!parent) return;
-    const newInstance = createInstance(type, newProps, instance.__r3f.root);
-
-    // https://github.com/pmndrs/react-three-fiber/issues/1348
-    // When args change the instance has to be re-constructed, which then
-    // forces r3f to re-parent the children and non-scene objects
-    if (instance.children) {
-      for (const child of instance.children) {
-        if (child.__r3f) appendChild(newInstance, child);
+  function cancelPointer(intersections) {
+    const {
+      internal
+    } = store.getState();
+    for (const hoveredObj of internal.hovered.values()) {
+      // When no objects were hit or the the hovered object wasn't found underneath the cursor
+      // we call onPointerOut and delete the object from the hovered-elements map
+      if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
+        const eventObject = hoveredObj.eventObject;
+        const instance = eventObject.__r3f;
+        const handlers = instance == null ? void 0 : instance.handlers;
+        internal.hovered.delete(makeId(hoveredObj));
+        if (instance != null && instance.eventCount) {
+          // Clear out intersects, they are outdated by now
+          const data = {
+            ...hoveredObj,
+            intersections
+          };
+          handlers.onPointerOut == null ? void 0 : handlers.onPointerOut(data);
+          handlers.onPointerLeave == null ? void 0 : handlers.onPointerLeave(data);
+        }
       }
-      instance.children = instance.children.filter(child => !child.__r3f);
     }
-    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
-    instance.__r3f.objects = [];
-    if (!instance.__r3f.autoRemovedBeforeAppend) {
-      removeChild(parent, instance);
+  }
+  function pointerMissed(event, objects) {
+    for (let i = 0; i < objects.length; i++) {
+      const instance = objects[i].__r3f;
+      instance == null ? void 0 : instance.handlers.onPointerMissed == null ? void 0 : instance.handlers.onPointerMissed(event);
     }
-    if (newInstance.parent) {
-      newInstance.__r3f.autoRemovedBeforeAppend = true;
+  }
+  function handlePointer(name) {
+    // Deal with cancelation
+    switch (name) {
+      case 'onPointerLeave':
+      case 'onPointerCancel':
+        return () => cancelPointer([]);
+      case 'onLostPointerCapture':
+        return event => {
+          const {
+            internal
+          } = store.getState();
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
+            // If the object event interface had onLostPointerCapture, we'd call it here on every
+            // object that's getting removed. We call it on the next frame because onLostPointerCapture
+            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
+            // happen in the object it originated from, leaving components in a in-between state.
+            requestAnimationFrame(() => {
+              // Only release if pointer-up didn't do it already
+              if (internal.capturedMap.has(event.pointerId)) {
+                internal.capturedMap.delete(event.pointerId);
+                cancelPointer([]);
+              }
+            });
+          }
+        };
     }
-    appendChild(parent, newInstance);
 
-    // Re-bind event handlers
-    if (newInstance.raycast && newInstance.__r3f.eventCount) {
-      const rootState = newInstance.__r3f.root.getState();
-      rootState.internal.interaction.push(newInstance);
-    }
-    [fiber, fiber.alternate].forEach(fiber => {
-      if (fiber !== null) {
-        fiber.stateNode = newInstance;
-        if (fiber.ref) {
-          if (typeof fiber.ref === 'function') fiber.ref(newInstance);else fiber.ref.current = newInstance;
-        }
-      }
-    });
-  }
+    // Any other pointer goes here ...
+    return function handleEvent(event) {
+      const {
+        onPointerMissed,
+        internal
+      } = store.getState();
 
-  // Don't handle text instances, warn on undefined behavior
-  const handleTextInstance = () => console.warn('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
-  const reconciler = Reconciler__default["default"]({
-    createInstance,
-    removeChild,
-    appendChild,
-    appendInitialChild: appendChild,
-    insertBefore,
-    supportsMutation: true,
-    isPrimaryRenderer: false,
-    supportsPersistence: false,
-    supportsHydration: false,
-    noTimeout: -1,
-    appendChildToContainer: (container, child) => {
-      if (!child) return;
+      // prepareRay(event)
+      internal.lastEvent.current = event;
 
-      // Don't append to unmounted container
-      const scene = container.getState().scene;
-      if (!scene.__r3f) return;
+      // Get fresh intersects
+      const isPointerMove = name === 'onPointerMove';
+      const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
+      const filter = isPointerMove ? filterPointerEvents : undefined;
+      const hits = intersect(event, filter);
+      const delta = isClickEvent ? calculateDistance(event) : 0;
 
-      // Link current root to the default scene
-      scene.__r3f.root = container;
-      appendChild(scene, child);
-    },
-    removeChildFromContainer: (container, child) => {
-      if (!child) return;
-      removeChild(container.getState().scene, child);
-    },
-    insertInContainerBefore: (container, child, beforeChild) => {
-      if (!child || !beforeChild) return;
+      // Save initial coordinates on pointer-down
+      if (name === 'onPointerDown') {
+        internal.initialClick = [event.offsetX, event.offsetY];
+        internal.initialHits = hits.map(hit => hit.eventObject);
+      }
 
-      // Don't append to unmounted container
-      const scene = container.getState().scene;
-      if (!scene.__r3f) return;
-      insertBefore(scene, child, beforeChild);
-    },
-    getRootHostContext: () => null,
-    getChildHostContext: parentHostContext => parentHostContext,
-    finalizeInitialChildren(instance) {
-      var _instance$__r3f2;
-      const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {};
-      // https://github.com/facebook/react/issues/20271
-      // Returning true will trigger commitMount
-      return Boolean(localState.handlers);
-    },
-    prepareUpdate(instance, _type, oldProps, newProps) {
-      // Create diff-sets
-      if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
-        return [true];
-      } else {
-        // This is a data object, let's extract critical information about it
-        const {
-          args: argsNew = [],
-          children: cN,
-          ...restNew
-        } = newProps;
-        const {
-          args: argsOld = [],
-          children: cO,
-          ...restOld
-        } = oldProps;
+      // If a click yields no results, pass it back to the user as a miss
+      // Missed events have to come first in order to establish user-land side-effect clean up
+      if (isClickEvent && !hits.length) {
+        if (delta <= 2) {
+          pointerMissed(event, internal.interaction);
+          if (onPointerMissed) onPointerMissed(event);
+        }
+      }
+      // Take care of unhover
+      if (isPointerMove) cancelPointer(hits);
+      function onIntersect(data) {
+        const eventObject = data.eventObject;
+        const instance = eventObject.__r3f;
+        const handlers = instance == null ? void 0 : instance.handlers;
 
-        // Throw if an object or literal was passed for args
-        if (!Array.isArray(argsNew)) throw new Error('R3F: the args prop must be an array!');
+        // Check presence of handlers
+        if (!(instance != null && instance.eventCount)) return;
 
-        // If it has new props or arguments, then it needs to be re-instantiated
-        if (argsNew.some((value, index) => value !== argsOld[index])) return [true];
-        // Create a diff-set, flag if there are any changes
-        const diff = diffProps(instance, restNew, restOld, true);
-        if (diff.changes.length) return [false, diff];
+        /*
+        MAYBE TODO, DELETE IF NOT: 
+          Check if the object is captured, captured events should not have intersects running in parallel
+          But wouldn't it be better to just replace capturedMap with a single entry?
+          Also, are we OK with straight up making picking up multiple objects impossible?
+          
+        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId        
+        if (pointerId !== undefined) {
+          const capturedMeshSet = internal.capturedMap.get(pointerId)
+          if (capturedMeshSet) {
+            const captured = capturedMeshSet.get(eventObject)
+            if (captured && captured.localState.stopped) return
+          }
+        }*/
 
-        // Otherwise do not touch the instance
-        return null;
-      }
-    },
-    commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
-      // Reconstruct when args or <primitive object={...} have changes
-      if (reconstruct) switchInstance(instance, type, newProps, fiber);
-      // Otherwise just overwrite props
-      else applyProps$1(instance, diff);
-    },
-    commitMount(instance, _type, _props, _int) {
-      var _instance$__r3f3;
-      // https://github.com/facebook/react/issues/20271
-      // This will make sure events are only added once to the central container
-      const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
-      if (instance.raycast && localState.handlers && localState.eventCount) {
-        instance.__r3f.root.getState().internal.interaction.push(instance);
+        if (isPointerMove) {
+          // Move event ...
+          if (handlers.onPointerOver || handlers.onPointerEnter || handlers.onPointerOut || handlers.onPointerLeave) {
+            // When enter or out is present take care of hover-state
+            const id = makeId(data);
+            const hoveredItem = internal.hovered.get(id);
+            if (!hoveredItem) {
+              // If the object wasn't previously hovered, book it and call its handler
+              internal.hovered.set(id, data);
+              handlers.onPointerOver == null ? void 0 : handlers.onPointerOver(data);
+              handlers.onPointerEnter == null ? void 0 : handlers.onPointerEnter(data);
+            } else if (hoveredItem.stopped) {
+              // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
+              data.stopPropagation();
+            }
+          }
+          // Call mouse move
+          handlers.onPointerMove == null ? void 0 : handlers.onPointerMove(data);
+        } else {
+          // All other events ...
+          const handler = handlers[name];
+          if (handler) {
+            // Forward all events back to their respective handlers with the exception of click events,
+            // which must use the initial target
+            if (!isClickEvent || internal.initialHits.includes(eventObject)) {
+              // Missed events have to come first
+              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
+              // Now call the handler
+              handler(data);
+            }
+          } else {
+            // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
+            if (isClickEvent && internal.initialHits.includes(eventObject)) {
+              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
+            }
+          }
+        }
       }
-    },
-    getPublicInstance: instance => instance,
-    prepareForCommit: () => null,
-    preparePortalMount: container => prepare(container.getState().scene),
-    resetAfterCommit: () => {},
-    shouldSetTextContent: () => false,
-    clearContainer: () => false,
-    hideInstance(instance) {
-      var _instance$__r3f4;
-      // Detach while the instance is hidden
-      const {
-        attach: type,
-        parent
-      } = (_instance$__r3f4 = instance.__r3f) != null ? _instance$__r3f4 : {};
-      if (type && parent) detach(parent, instance, type);
-      if (instance.isObject3D) instance.visible = false;
-      invalidateInstance(instance);
-    },
-    unhideInstance(instance, props) {
-      var _instance$__r3f5;
-      // Re-attach when the instance is unhidden
-      const {
-        attach: type,
-        parent
-      } = (_instance$__r3f5 = instance.__r3f) != null ? _instance$__r3f5 : {};
-      if (type && parent) attach(parent, instance, type);
-      if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
-      invalidateInstance(instance);
-    },
-    createTextInstance: handleTextInstance,
-    hideTextInstance: handleTextInstance,
-    unhideTextInstance: handleTextInstance,
-    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
-    // @ts-ignore
-    getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
-    beforeActiveInstanceBlur: () => {},
-    afterActiveInstanceBlur: () => {},
-    detachDeletedInstance: () => {},
-    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
-    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
-    scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
-  });
+      handleIntersects(hits, event, delta, onIntersect);
+    };
+  }
   return {
-    reconciler,
-    applyProps: applyProps$1
+    handlePointer
   };
 }
 
@@ -1874,6 +1893,7 @@ function createRoot(canvas) {
 
       // Safely set color management if available.
       // Avoid accessing THREE.ColorManagement to play nice with older versions
+      const ColorManagement = getColorManagement();
       if (ColorManagement) {
         if ('enabled' in ColorManagement) ColorManagement.enabled = !legacy;else if ('legacyMode' in ColorManagement) ColorManagement.legacyMode = legacy;
       }