first commit

node_modules/its-fine/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Poimandres
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

node_modules/its-fine/README.md

@@ -0,0 +1,233 @@
+# its-fine
+
+[![Size](https://img.shields.io/bundlephobia/minzip/its-fine?label=gzip&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/package/its-fine)
+[![Version](https://img.shields.io/npm/v/its-fine?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/its-fine)
+[![Downloads](https://img.shields.io/npm/dt/its-fine.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/its-fine)
+[![Twitter](https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/pmndrs)
+[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000)](https://discord.gg/poimandres)
+
+<p align="left">
+  <a id="cover" href="#cover">
+    <img src=".github/itsfine.jpg" alt="It's gonna be alright" />
+  </a>
+</p>
+
+A collection of escape hatches for React.
+
+As such, you can go beyond React's component abstraction; components are self-aware and can tap into the [React Fiber](https://youtu.be/ZCuYPiUIONs) tree. This enables powerful abstractions that can modify or extend React behavior without explicitly taking reconciliation into your own hands.
+
+## Table of Contents
+
+- [Components](#components)
+  - [FiberProvider](#fiberprovider)
+- [Hooks](#hooks)
+  - [useFiber](#useFiber)
+  - [useContainer](#useContainer)
+  - [useNearestChild](#useNearestChild)
+  - [useNearestParent](#useNearestParent)
+  - [useContextMap](#useContextMap)
+  - [useContextBridge](#useContextBridge)
+- [Utils](#utils)
+  - [traverseFiber](#traverseFiber)
+
+## Components
+
+### FiberProvider
+
+A react-internal `Fiber` provider. This component binds React children to the React Fiber tree. Call its-fine hooks within this.
+
+> **Note**: pmndrs renderers like react-three-fiber implement this internally to make use of [`useContextBridge`](#usecontextbridge), so you would only need this when using hooks inside of `react-dom` or `react-native`.
+
+```tsx
+import * as ReactDOM from 'react-dom/client'
+import { FiberProvider, useFiber } from 'its-fine'
+
+function App() {
+  const fiber = useFiber()
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <FiberProvider>
+    <App />
+  </FiberProvider>,
+)
+```
+
+## Hooks
+
+Useful React hook abstractions for manipulating and querying from a component. These must be called within a [`FiberProvider`](#fiberprovider) component.
+
+### useFiber
+
+Returns the current react-internal `Fiber`. This is an implementation detail of [react-reconciler](https://github.com/facebook/react/tree/main/packages/react-reconciler).
+
+```tsx
+import * as React from 'react'
+import { type Fiber, useFiber } from 'its-fine'
+
+function Component() {
+  // Returns the current component's react-internal Fiber
+  const fiber: Fiber<null> | undefined = useFiber()
+
+  // function Component() {}
+  if (fiber) console.log(fiber.type)
+}
+```
+
+### useContainer
+
+Returns the current react-reconciler container info passed to `Reconciler.createContainer`.
+
+In react-dom, a container will point to the root DOM element; in react-three-fiber, it will point to the root Zustand store.
+
+```tsx
+import * as React from 'react'
+import { useContainer } from 'its-fine'
+
+function Component() {
+  // Returns the current renderer's root container
+  const container: HTMLDivElement | undefined = useContainer<HTMLDivElement>()
+
+  // <div> (e.g. react-dom)
+  if (container) console.log(container)
+}
+```
+
+### useNearestChild
+
+Returns the nearest react-reconciler child instance or the node created from `Reconciler.createInstance`.
+
+In react-dom, this would be a DOM element; in react-three-fiber this would be an `Instance` descriptor.
+
+```tsx
+import * as React from 'react'
+import { useNearestChild } from 'its-fine'
+
+function Component() {
+  // Returns a React Ref which points to the nearest child <div /> element.
+  // Omit the element type to match the nearest element of any kind
+  const childRef: React.MutableRefObject<HTMLDivElement | undefined> = useNearestChild<HTMLDivElement>('div')
+
+  // Access child Ref on mount
+  React.useEffect(() => {
+    // <div> (e.g. react-dom)
+    const child = childRef.current
+    if (child) console.log(child)
+  }, [])
+
+  // A child element, can live deep down another component
+  return <div />
+}
+```
+
+### useNearestParent
+
+Returns the nearest react-reconciler parent instance or the node created from `Reconciler.createInstance`.
+
+In react-dom, this would be a DOM element; in react-three-fiber this would be an instance descriptor.
+
+```tsx
+import * as React from 'react'
+import { useNearestParent } from 'its-fine'
+
+function Component() {
+  // Returns a React Ref which points to the nearest parent <div /> element.
+  // Omit the element type to match the nearest element of any kind
+  const parentRef: React.MutableRefObject<HTMLDivElement | undefined> = useNearestParent<HTMLDivElement>('div')
+
+  // Access parent Ref on mount
+  React.useEffect(() => {
+    // <div> (e.g. react-dom)
+    const parent = parentRef.current
+    if (parent) console.log(parent)
+  }, [])
+}
+
+// A parent element wrapping Component, can live deep up another component
+;<div>
+  <Component />
+</div>
+```
+
+### useContextMap
+
+Returns a map of all contexts and their values.
+
+```tsx
+import * as React from 'react'
+import { useContextMap } from 'its-fine'
+
+const SomeContext = React.createContext<string>(null!)
+
+function Component() {
+  const contextMap = useContextMap()
+  return contextMap.get(SomeContext)
+}
+```
+
+### useContextBridge
+
+React Context currently cannot be shared across [React renderers](https://reactjs.org/docs/codebase-overview.html#renderers) but explicitly forwarded between providers (see [react#17275](https://github.com/facebook/react/issues/17275)). This hook returns a `ContextBridge` of live context providers to pierce Context across renderers.
+
+Pass `ContextBridge` as a component to a secondary renderer to enable context-sharing within its children.
+
+```tsx
+import * as React from 'react'
+// react-nil is a secondary renderer that is usually used for testing.
+// This also includes Fabric, react-three-fiber, etc
+import * as ReactNil from 'react-nil'
+// react-dom is a primary renderer that works on top of a secondary renderer.
+// This also includes react-native, react-pixi, etc.
+import * as ReactDOM from 'react-dom/client'
+import { type ContextBridge, useContextBridge, FiberProvider } from 'its-fine'
+
+function Canvas(props: { children: React.ReactNode }) {
+  // Returns a bridged context provider that forwards context
+  const Bridge: ContextBridge = useContextBridge()
+  // Renders children with bridged context into a secondary renderer
+  ReactNil.render(<Bridge>{props.children}</Bridge>)
+}
+
+// A React Context whose provider lives in react-dom
+const DOMContext = React.createContext<string>(null!)
+
+// A component that reads from DOMContext
+function Component() {
+  // "Hello from react-dom"
+  console.log(React.useContext(DOMContext))
+}
+
+// Renders into a primary renderer like react-dom or react-native,
+// DOMContext wraps Canvas and is bridged into Component
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <FiberProvider>
+    <DOMContext.Provider value="Hello from react-dom">
+      <Canvas>
+        <Component />
+      </Canvas>
+    </DOMContext.Provider>
+  </FiberProvider>,
+)
+```
+
+## Utils
+
+Additional exported utility functions for raw handling of Fibers.
+
+### traverseFiber
+
+Traverses up or down a `Fiber`, return `true` to stop and select a node.
+
+```ts
+import { type Fiber, traverseFiber } from 'its-fine'
+
+// Traverses through the Fiber tree, returns the current node when `true` is passed via selector
+const parentDiv: Fiber<HTMLDivElement> | undefined = traverseFiber<HTMLDivElement>(
+  // Input Fiber to traverse
+  fiber as Fiber,
+  // Whether to ascend and walk up the tree. Will walk down if `false`
+  true,
+  // A Fiber node selector, returns the first match when `true` is passed
+  (node: Fiber<HTMLDivElement | null>) => node.type === 'div',
+)
+```

node_modules/its-fine/dist/index.cjs

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const React = require("react");
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var _a, _b;
+const useIsomorphicLayoutEffect = typeof window !== "undefined" && (((_a = window.document) == null ? void 0 : _a.createElement) || ((_b = window.navigator) == null ? void 0 : _b.product) === "ReactNative") ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+function traverseFiber(fiber, ascending, selector) {
+  if (!fiber)
+    return;
+  if (selector(fiber) === true)
+    return fiber;
+  let child = ascending ? fiber.return : fiber.child;
+  while (child) {
+    const match = traverseFiber(child, ascending, selector);
+    if (match)
+      return match;
+    child = ascending ? null : child.sibling;
+  }
+}
+function wrapContext(context) {
+  try {
+    return Object.defineProperties(context, {
+      _currentRenderer: {
+        get() {
+          return null;
+        },
+        set() {
+        }
+      },
+      _currentRenderer2: {
+        get() {
+          return null;
+        },
+        set() {
+        }
+      }
+    });
+  } catch (_) {
+    return context;
+  }
+}
+const error = console.error;
+console.error = function() {
+  const message = [...arguments].join("");
+  if ((message == null ? void 0 : message.startsWith("Warning:")) && message.includes("useContext")) {
+    console.error = error;
+    return;
+  }
+  return error.apply(this, arguments);
+};
+const FiberContext = wrapContext(React__namespace.createContext(null));
+class FiberProvider extends React__namespace.Component {
+  render() {
+    return /* @__PURE__ */ React__namespace.createElement(FiberContext.Provider, {
+      value: this._reactInternals
+    }, this.props.children);
+  }
+}
+function useFiber() {
+  const root = React__namespace.useContext(FiberContext);
+  if (root === null)
+    throw new Error("its-fine: useFiber must be called within a <FiberProvider />!");
+  const id = React__namespace.useId();
+  const fiber = React__namespace.useMemo(() => {
+    for (const maybeFiber of [root, root == null ? void 0 : root.alternate]) {
+      if (!maybeFiber)
+        continue;
+      const fiber2 = traverseFiber(maybeFiber, false, (node) => {
+        let state = node.memoizedState;
+        while (state) {
+          if (state.memoizedState === id)
+            return true;
+          state = state.next;
+        }
+      });
+      if (fiber2)
+        return fiber2;
+    }
+  }, [root, id]);
+  return fiber;
+}
+function useContainer() {
+  const fiber = useFiber();
+  const root = React__namespace.useMemo(
+    () => traverseFiber(fiber, true, (node) => {
+      var _a2;
+      return ((_a2 = node.stateNode) == null ? void 0 : _a2.containerInfo) != null;
+    }),
+    [fiber]
+  );
+  return root == null ? void 0 : root.stateNode.containerInfo;
+}
+function useNearestChild(type) {
+  const fiber = useFiber();
+  const childRef = React__namespace.useRef();
+  useIsomorphicLayoutEffect(() => {
+    var _a2;
+    childRef.current = (_a2 = traverseFiber(
+      fiber,
+      false,
+      (node) => typeof node.type === "string" && (type === void 0 || node.type === type)
+    )) == null ? void 0 : _a2.stateNode;
+  }, [fiber]);
+  return childRef;
+}
+function useNearestParent(type) {
+  const fiber = useFiber();
+  const parentRef = React__namespace.useRef();
+  useIsomorphicLayoutEffect(() => {
+    var _a2;
+    parentRef.current = (_a2 = traverseFiber(
+      fiber,
+      true,
+      (node) => typeof node.type === "string" && (type === void 0 || node.type === type)
+    )) == null ? void 0 : _a2.stateNode;
+  }, [fiber]);
+  return parentRef;
+}
+function useContextMap() {
+  const fiber = useFiber();
+  const [contextMap] = React__namespace.useState(() => /* @__PURE__ */ new Map());
+  contextMap.clear();
+  let node = fiber;
+  while (node) {
+    if (node.type && typeof node.type === "object") {
+      const enableRenderableContext = node.type._context === void 0 && node.type.Provider === node.type;
+      const context = enableRenderableContext ? node.type : node.type._context;
+      if (context && context !== FiberContext && !contextMap.has(context)) {
+        contextMap.set(context, React__namespace.useContext(wrapContext(context)));
+      }
+    }
+    node = node.return;
+  }
+  return contextMap;
+}
+function useContextBridge() {
+  const contextMap = useContextMap();
+  return React__namespace.useMemo(
+    () => Array.from(contextMap.keys()).reduce(
+      (Prev, context) => (props) => /* @__PURE__ */ React__namespace.createElement(Prev, null, /* @__PURE__ */ React__namespace.createElement(context.Provider, __spreadProps(__spreadValues({}, props), {
+        value: contextMap.get(context)
+      }))),
+      (props) => /* @__PURE__ */ React__namespace.createElement(FiberProvider, __spreadValues({}, props))
+    ),
+    [contextMap]
+  );
+}
+exports.FiberProvider = FiberProvider;
+exports.traverseFiber = traverseFiber;
+exports.useContainer = useContainer;
+exports.useContextBridge = useContextBridge;
+exports.useContextMap = useContextMap;
+exports.useFiber = useFiber;
+exports.useNearestChild = useNearestChild;
+exports.useNearestParent = useNearestParent;
+//# sourceMappingURL=index.cjs.map

node_modules/its-fine/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/index.tsx"],"sourcesContent":null,"names":["React","fiber","_a"],"mappings":"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"}

node_modules/its-fine/dist/index.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import type ReactReconciler from 'react-reconciler';
+/**
+ * Represents a react-internal Fiber node.
+ */
+export declare type Fiber<T = any> = Omit<ReactReconciler.Fiber, 'stateNode'> & {
+    stateNode: T;
+};
+/**
+ * Represents a {@link Fiber} node selector for traversal.
+ */
+export declare type FiberSelector<T = any> = (
+/** The current {@link Fiber} node. */
+node: Fiber<T | null>) => boolean | void;
+/**
+ * Traverses up or down a {@link Fiber}, return `true` to stop and select a node.
+ */
+export declare function traverseFiber<T = any>(
+/** Input {@link Fiber} to traverse. */
+fiber: Fiber | undefined, 
+/** Whether to ascend and walk up the tree. Will walk down if `false`. */
+ascending: boolean, 
+/** A {@link Fiber} node selector, returns the first match when `true` is passed. */
+selector: FiberSelector<T>): Fiber<T> | undefined;
+/**
+ * A react-internal {@link Fiber} provider. This component binds React children to the React Fiber tree. Call its-fine hooks within this.
+ */
+export declare class FiberProvider extends React.Component<{
+    children?: React.ReactNode;
+}> {
+    private _reactInternals;
+    render(): JSX.Element;
+}
+/**
+ * Returns the current react-internal {@link Fiber}. This is an implementation detail of [react-reconciler](https://github.com/facebook/react/tree/main/packages/react-reconciler).
+ */
+export declare function useFiber(): Fiber<null> | undefined;
+/**
+ * Represents a react-reconciler container instance.
+ */
+export interface ContainerInstance<T = any> {
+    containerInfo: T;
+}
+/**
+ * Returns the current react-reconciler container info passed to {@link ReactReconciler.Reconciler.createContainer}.
+ *
+ * In react-dom, a container will point to the root DOM element; in react-three-fiber, it will point to the root Zustand store.
+ */
+export declare function useContainer<T = any>(): T | undefined;
+/**
+ * Returns the nearest react-reconciler child instance or the node created from {@link ReactReconciler.HostConfig.createInstance}.
+ *
+ * In react-dom, this would be a DOM element; in react-three-fiber this would be an instance descriptor.
+ */
+export declare function useNearestChild<T = any>(
+/** An optional element type to filter to. */
+type?: keyof JSX.IntrinsicElements): React.MutableRefObject<T | undefined>;
+/**
+ * Returns the nearest react-reconciler parent instance or the node created from {@link ReactReconciler.HostConfig.createInstance}.
+ *
+ * In react-dom, this would be a DOM element; in react-three-fiber this would be an instance descriptor.
+ */
+export declare function useNearestParent<T = any>(
+/** An optional element type to filter to. */
+type?: keyof JSX.IntrinsicElements): React.MutableRefObject<T | undefined>;
+export declare type ContextMap = Map<React.Context<any>, any> & {
+    get<T>(context: React.Context<T>): T | undefined;
+};
+/**
+ * Returns a map of all contexts and their values.
+ */
+export declare function useContextMap(): ContextMap;
+/**
+ * Represents a react-context bridge provider component.
+ */
+export declare type ContextBridge = React.FC<React.PropsWithChildren<{}>>;
+/**
+ * React Context currently cannot be shared across [React renderers](https://reactjs.org/docs/codebase-overview.html#renderers) but explicitly forwarded between providers (see [react#17275](https://github.com/facebook/react/issues/17275)). This hook returns a {@link ContextBridge} of live context providers to pierce Context across renderers.
+ *
+ * Pass {@link ContextBridge} as a component to a secondary renderer to enable context-sharing within its children.
+ */
+export declare function useContextBridge(): ContextBridge;

node_modules/its-fine/dist/index.js

@@ -0,0 +1,174 @@
+import * as React from "react";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var _a, _b;
+const useIsomorphicLayoutEffect = typeof window !== "undefined" && (((_a = window.document) == null ? void 0 : _a.createElement) || ((_b = window.navigator) == null ? void 0 : _b.product) === "ReactNative") ? React.useLayoutEffect : React.useEffect;
+function traverseFiber(fiber, ascending, selector) {
+  if (!fiber)
+    return;
+  if (selector(fiber) === true)
+    return fiber;
+  let child = ascending ? fiber.return : fiber.child;
+  while (child) {
+    const match = traverseFiber(child, ascending, selector);
+    if (match)
+      return match;
+    child = ascending ? null : child.sibling;
+  }
+}
+function wrapContext(context) {
+  try {
+    return Object.defineProperties(context, {
+      _currentRenderer: {
+        get() {
+          return null;
+        },
+        set() {
+        }
+      },
+      _currentRenderer2: {
+        get() {
+          return null;
+        },
+        set() {
+        }
+      }
+    });
+  } catch (_) {
+    return context;
+  }
+}
+const error = console.error;
+console.error = function() {
+  const message = [...arguments].join("");
+  if ((message == null ? void 0 : message.startsWith("Warning:")) && message.includes("useContext")) {
+    console.error = error;
+    return;
+  }
+  return error.apply(this, arguments);
+};
+const FiberContext = wrapContext(React.createContext(null));
+class FiberProvider extends React.Component {
+  render() {
+    return /* @__PURE__ */ React.createElement(FiberContext.Provider, {
+      value: this._reactInternals
+    }, this.props.children);
+  }
+}
+function useFiber() {
+  const root = React.useContext(FiberContext);
+  if (root === null)
+    throw new Error("its-fine: useFiber must be called within a <FiberProvider />!");
+  const id = React.useId();
+  const fiber = React.useMemo(() => {
+    for (const maybeFiber of [root, root == null ? void 0 : root.alternate]) {
+      if (!maybeFiber)
+        continue;
+      const fiber2 = traverseFiber(maybeFiber, false, (node) => {
+        let state = node.memoizedState;
+        while (state) {
+          if (state.memoizedState === id)
+            return true;
+          state = state.next;
+        }
+      });
+      if (fiber2)
+        return fiber2;
+    }
+  }, [root, id]);
+  return fiber;
+}
+function useContainer() {
+  const fiber = useFiber();
+  const root = React.useMemo(
+    () => traverseFiber(fiber, true, (node) => {
+      var _a2;
+      return ((_a2 = node.stateNode) == null ? void 0 : _a2.containerInfo) != null;
+    }),
+    [fiber]
+  );
+  return root == null ? void 0 : root.stateNode.containerInfo;
+}
+function useNearestChild(type) {
+  const fiber = useFiber();
+  const childRef = React.useRef();
+  useIsomorphicLayoutEffect(() => {
+    var _a2;
+    childRef.current = (_a2 = traverseFiber(
+      fiber,
+      false,
+      (node) => typeof node.type === "string" && (type === void 0 || node.type === type)
+    )) == null ? void 0 : _a2.stateNode;
+  }, [fiber]);
+  return childRef;
+}
+function useNearestParent(type) {
+  const fiber = useFiber();
+  const parentRef = React.useRef();
+  useIsomorphicLayoutEffect(() => {
+    var _a2;
+    parentRef.current = (_a2 = traverseFiber(
+      fiber,
+      true,
+      (node) => typeof node.type === "string" && (type === void 0 || node.type === type)
+    )) == null ? void 0 : _a2.stateNode;
+  }, [fiber]);
+  return parentRef;
+}
+function useContextMap() {
+  const fiber = useFiber();
+  const [contextMap] = React.useState(() => /* @__PURE__ */ new Map());
+  contextMap.clear();
+  let node = fiber;
+  while (node) {
+    if (node.type && typeof node.type === "object") {
+      const enableRenderableContext = node.type._context === void 0 && node.type.Provider === node.type;
+      const context = enableRenderableContext ? node.type : node.type._context;
+      if (context && context !== FiberContext && !contextMap.has(context)) {
+        contextMap.set(context, React.useContext(wrapContext(context)));
+      }
+    }
+    node = node.return;
+  }
+  return contextMap;
+}
+function useContextBridge() {
+  const contextMap = useContextMap();
+  return React.useMemo(
+    () => Array.from(contextMap.keys()).reduce(
+      (Prev, context) => (props) => /* @__PURE__ */ React.createElement(Prev, null, /* @__PURE__ */ React.createElement(context.Provider, __spreadProps(__spreadValues({}, props), {
+        value: contextMap.get(context)
+      }))),
+      (props) => /* @__PURE__ */ React.createElement(FiberProvider, __spreadValues({}, props))
+    ),
+    [contextMap]
+  );
+}
+export {
+  FiberProvider,
+  traverseFiber,
+  useContainer,
+  useContextBridge,
+  useContextMap,
+  useFiber,
+  useNearestChild,
+  useNearestParent
+};
+//# sourceMappingURL=index.js.map

node_modules/its-fine/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":null,"names":["fiber","_a"],"mappings":"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"}

node_modules/its-fine/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "its-fine",
+  "version": "1.2.5",
+  "description": "A collection of escape hatches for React.",
+  "keywords": [
+    "react",
+    "fiber",
+    "internal",
+    "reconciler",
+    "hooks"
+  ],
+  "author": "Cody Bennett (https://github.com/codyjasonbennett)",
+  "maintainers": [
+    "Paul Henschel (https://github.com/drcmda)"
+  ],
+  "homepage": "https://github.com/pmndrs/its-fine",
+  "repository": "https://github.com/pmndrs/its-fine",
+  "license": "MIT",
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "react-native": "./dist/index.js",
+  "sideEffects": false,
+  "devDependencies": {
+    "@types/node": "^18.7.15",
+    "@types/react": "^18.0.17",
+    "@types/react-test-renderer": "^18.0.0",
+    "react": "^18.2.0",
+    "react-nil": "^1.2.0",
+    "react-test-renderer": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "suspend-react": "^0.0.8",
+    "typescript": "^4.7.4",
+    "vite": "^3.1.0",
+    "vitest": "^0.23.1"
+  },
+  "dependencies": {
+    "@types/react-reconciler": "^0.28.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0"
+  },
+  "scripts": {
+    "build": "rimraf dist && vite build && tsc",
+    "test": "vitest run"
+  }
+}

node_modules/its-fine/src/index.tsx

@@ -0,0 +1,252 @@
+import * as React from 'react'
+import type ReactReconciler from 'react-reconciler'
+
+/**
+ * An SSR-friendly useLayoutEffect.
+ *
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect elsewhere.
+ *
+ * @see https://github.com/facebook/react/issues/14927
+ */
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' && (window.document?.createElement || window.navigator?.product === 'ReactNative')
+    ? React.useLayoutEffect
+    : React.useEffect
+
+/**
+ * Represents a react-internal Fiber node.
+ */
+export type Fiber<T = any> = Omit<ReactReconciler.Fiber, 'stateNode'> & { stateNode: T }
+
+/**
+ * Represents a {@link Fiber} node selector for traversal.
+ */
+export type FiberSelector<T = any> = (
+  /** The current {@link Fiber} node. */
+  node: Fiber<T | null>,
+) => boolean | void
+
+/**
+ * Traverses up or down a {@link Fiber}, return `true` to stop and select a node.
+ */
+export function traverseFiber<T = any>(
+  /** Input {@link Fiber} to traverse. */
+  fiber: Fiber | undefined,
+  /** Whether to ascend and walk up the tree. Will walk down if `false`. */
+  ascending: boolean,
+  /** A {@link Fiber} node selector, returns the first match when `true` is passed. */
+  selector: FiberSelector<T>,
+): Fiber<T> | undefined {
+  if (!fiber) return
+  if (selector(fiber) === true) return fiber
+
+  let child = ascending ? fiber.return : fiber.child
+  while (child) {
+    const match = traverseFiber(child, ascending, selector)
+    if (match) return match
+
+    child = ascending ? null : child.sibling
+  }
+}
+
+// In development, React will warn about using contexts between renderers.
+// Hide the warning because its-fine fixes this issue
+// https://github.com/facebook/react/pull/12779
+function wrapContext<T>(context: React.Context<T>): React.Context<T> {
+  try {
+    return Object.defineProperties(context, {
+      _currentRenderer: {
+        get() {
+          return null
+        },
+        set() {},
+      },
+      _currentRenderer2: {
+        get() {
+          return null
+        },
+        set() {},
+      },
+    })
+  } catch (_) {
+    return context
+  }
+}
+
+const error = console.error
+console.error = function () {
+  const message = [...arguments].join('')
+  if (message?.startsWith('Warning:') && message.includes('useContext')) {
+    console.error = error
+    return
+  }
+
+  return error.apply(this, arguments as any)
+}
+
+const FiberContext = wrapContext(React.createContext<Fiber>(null!))
+
+/**
+ * A react-internal {@link Fiber} provider. This component binds React children to the React Fiber tree. Call its-fine hooks within this.
+ */
+export class FiberProvider extends React.Component<{ children?: React.ReactNode }> {
+  private _reactInternals!: Fiber
+
+  render() {
+    return <FiberContext.Provider value={this._reactInternals}>{this.props.children}</FiberContext.Provider>
+  }
+}
+
+/**
+ * Returns the current react-internal {@link Fiber}. This is an implementation detail of [react-reconciler](https://github.com/facebook/react/tree/main/packages/react-reconciler).
+ */
+export function useFiber(): Fiber<null> | undefined {
+  const root = React.useContext(FiberContext)
+  if (root === null) throw new Error('its-fine: useFiber must be called within a <FiberProvider />!')
+
+  const id = React.useId()
+  const fiber = React.useMemo(() => {
+    for (const maybeFiber of [root, root?.alternate]) {
+      if (!maybeFiber) continue
+      const fiber = traverseFiber<null>(maybeFiber, false, (node) => {
+        let state = node.memoizedState
+        while (state) {
+          if (state.memoizedState === id) return true
+          state = state.next
+        }
+      })
+      if (fiber) return fiber
+    }
+  }, [root, id])
+
+  return fiber
+}
+
+/**
+ * Represents a react-reconciler container instance.
+ */
+export interface ContainerInstance<T = any> {
+  containerInfo: T
+}
+
+/**
+ * Returns the current react-reconciler container info passed to {@link ReactReconciler.Reconciler.createContainer}.
+ *
+ * In react-dom, a container will point to the root DOM element; in react-three-fiber, it will point to the root Zustand store.
+ */
+export function useContainer<T = any>(): T | undefined {
+  const fiber = useFiber()
+  const root = React.useMemo(
+    () => traverseFiber<ContainerInstance<T>>(fiber, true, (node) => node.stateNode?.containerInfo != null),
+    [fiber],
+  )
+
+  return root?.stateNode.containerInfo
+}
+
+/**
+ * Returns the nearest react-reconciler child instance or the node created from {@link ReactReconciler.HostConfig.createInstance}.
+ *
+ * In react-dom, this would be a DOM element; in react-three-fiber this would be an instance descriptor.
+ */
+export function useNearestChild<T = any>(
+  /** An optional element type to filter to. */
+  type?: keyof JSX.IntrinsicElements,
+): React.MutableRefObject<T | undefined> {
+  const fiber = useFiber()
+  const childRef = React.useRef<T>()
+
+  useIsomorphicLayoutEffect(() => {
+    childRef.current = traverseFiber<T>(
+      fiber,
+      false,
+      (node) => typeof node.type === 'string' && (type === undefined || node.type === type),
+    )?.stateNode
+  }, [fiber])
+
+  return childRef
+}
+
+/**
+ * Returns the nearest react-reconciler parent instance or the node created from {@link ReactReconciler.HostConfig.createInstance}.
+ *
+ * In react-dom, this would be a DOM element; in react-three-fiber this would be an instance descriptor.
+ */
+export function useNearestParent<T = any>(
+  /** An optional element type to filter to. */
+  type?: keyof JSX.IntrinsicElements,
+): React.MutableRefObject<T | undefined> {
+  const fiber = useFiber()
+  const parentRef = React.useRef<T>()
+
+  useIsomorphicLayoutEffect(() => {
+    parentRef.current = traverseFiber<T>(
+      fiber,
+      true,
+      (node) => typeof node.type === 'string' && (type === undefined || node.type === type),
+    )?.stateNode
+  }, [fiber])
+
+  return parentRef
+}
+
+export type ContextMap = Map<React.Context<any>, any> & {
+  get<T>(context: React.Context<T>): T | undefined
+}
+
+/**
+ * Returns a map of all contexts and their values.
+ */
+export function useContextMap(): ContextMap {
+  const fiber = useFiber()
+  const [contextMap] = React.useState(() => new Map<React.Context<any>, any>())
+
+  // Collect live context
+  contextMap.clear()
+  let node = fiber
+  while (node) {
+    if (node.type && typeof node.type === 'object') {
+      // https://github.com/facebook/react/pull/28226
+      const enableRenderableContext = node.type._context === undefined && node.type.Provider === node.type
+      const context = enableRenderableContext ? node.type : node.type._context
+      if (context && context !== FiberContext && !contextMap.has(context)) {
+        contextMap.set(context, React.useContext(wrapContext(context)))
+      }
+    }
+
+    node = node.return!
+  }
+
+  return contextMap
+}
+
+/**
+ * Represents a react-context bridge provider component.
+ */
+export type ContextBridge = React.FC<React.PropsWithChildren<{}>>
+
+/**
+ * React Context currently cannot be shared across [React renderers](https://reactjs.org/docs/codebase-overview.html#renderers) but explicitly forwarded between providers (see [react#17275](https://github.com/facebook/react/issues/17275)). This hook returns a {@link ContextBridge} of live context providers to pierce Context across renderers.
+ *
+ * Pass {@link ContextBridge} as a component to a secondary renderer to enable context-sharing within its children.
+ */
+export function useContextBridge(): ContextBridge {
+  const contextMap = useContextMap()
+
+  // Flatten context and their memoized values into a `ContextBridge` provider
+  return React.useMemo(
+    () =>
+      Array.from(contextMap.keys()).reduce(
+        (Prev, context) => (props) =>
+          (
+            <Prev>
+              <context.Provider {...props} value={contextMap.get(context)} />
+            </Prev>
+          ),
+        (props) => <FiberProvider {...props} />,
+      ),
+    [contextMap],
+  )
+}