bippy 0.1.0 → 0.2.0

package/dist/extract/index.js

@@ -0,0 +1,1013 @@
+/**
+ * @license bippy
+ *
+ * Copyright (c) Aiden Bai, Million Software, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// src/rdt-hook.ts
+var version = "0.2.0";
+var BIPPY_INSTRUMENTATION_STRING = `bippy-${version}`;
+var NO_OP = () => {
+};
+var checkDCE = (fn) => {
+  try {
+    const code = Function.prototype.toString.call(fn);
+    if (code.indexOf("^_^") > -1) {
+      setTimeout(() => {
+        throw new Error(
+          "React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://reactjs.org/link/perf-use-production-build"
+        );
+      });
+    }
+  } catch {
+  }
+};
+var installRDTHook = (onActive) => {
+  const renderers = /* @__PURE__ */ new Map();
+  let i = 0;
+  const rdtHook = {
+    checkDCE,
+    supportsFiber: true,
+    supportsFlight: true,
+    hasUnsupportedRendererAttached: false,
+    renderers,
+    onCommitFiberRoot: NO_OP,
+    onCommitFiberUnmount: NO_OP,
+    onPostCommitFiberRoot: NO_OP,
+    inject(renderer) {
+      const nextID = ++i;
+      renderers.set(nextID, renderer);
+      if (!rdtHook._instrumentationIsActive) {
+        rdtHook._instrumentationIsActive = true;
+        onActive?.();
+      }
+      return nextID;
+    },
+    _instrumentationSource: BIPPY_INSTRUMENTATION_STRING,
+    _instrumentationIsActive: false
+  };
+  try {
+    Object.defineProperty(globalThis, "__REACT_DEVTOOLS_GLOBAL_HOOK__", {
+      value: rdtHook
+    });
+  } catch {
+  }
+  return rdtHook;
+};
+var hasRDTHook = () => {
+  return Object.prototype.hasOwnProperty.call(
+    globalThis,
+    "__REACT_DEVTOOLS_GLOBAL_HOOK__"
+  );
+};
+var getRDTHook = (onActive) => {
+  let rdtHook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (rdtHook) onActive?.();
+  if (!hasRDTHook()) {
+    rdtHook = installRDTHook(onActive);
+  }
+  return rdtHook;
+};
+try {
+  if (typeof window !== "undefined" && // @ts-expect-error `document` may not be defined in some enviroments
+  (window.document?.createElement || window.navigator?.product === "ReactNative") && typeof process !== "undefined" && process.versions != null && process.versions.node != null) {
+    installRDTHook();
+  }
+} catch {
+}
+
+// src/core.ts
+var FunctionComponentTag = 0;
+var ClassComponentTag = 1;
+var HostRootTag = 3;
+var HostComponentTag = 5;
+var HostTextTag = 6;
+var FragmentTag = 7;
+var ContextConsumerTag = 9;
+var ForwardRefTag = 11;
+var SuspenseComponentTag = 13;
+var MemoComponentTag = 14;
+var SimpleMemoComponentTag = 15;
+var DehydratedSuspenseComponentTag = 18;
+var OffscreenComponentTag = 22;
+var LegacyHiddenComponentTag = 23;
+var HostHoistableTag = 26;
+var HostSingletonTag = 27;
+var CONCURRENT_MODE_NUMBER = 60111;
+var CONCURRENT_MODE_SYMBOL_STRING = "Symbol(react.concurrent_mode)";
+var DEPRECATED_ASYNC_MODE_SYMBOL_STRING = "Symbol(react.async_mode)";
+var PerformedWork = 1;
+var isHostFiber = (fiber) => {
+  switch (fiber.tag) {
+    case HostComponentTag:
+    // @ts-expect-error: it exists
+    case HostHoistableTag:
+    // @ts-expect-error: it exists
+    case HostSingletonTag:
+      return true;
+    default:
+      return typeof fiber.type === "string";
+  }
+};
+var isCompositeFiber = (fiber) => {
+  switch (fiber.tag) {
+    case FunctionComponentTag:
+    case ClassComponentTag:
+    case SimpleMemoComponentTag:
+    case MemoComponentTag:
+    case ForwardRefTag:
+      return true;
+    default:
+      return false;
+  }
+};
+var traverseProps = (fiber, selector) => {
+  try {
+    const nextProps = fiber.memoizedProps;
+    const prevProps = fiber.alternate?.memoizedProps || {};
+    const allKeys = /* @__PURE__ */ new Set([
+      ...Object.keys(prevProps),
+      ...Object.keys(nextProps)
+    ]);
+    for (const propName of allKeys) {
+      const prevValue = prevProps?.[propName];
+      const nextValue = nextProps?.[propName];
+      if (selector(propName, nextValue, prevValue) === true) return true;
+    }
+  } catch {
+  }
+  return false;
+};
+var didFiberRender = (fiber) => {
+  const nextProps = fiber.memoizedProps;
+  const prevProps = fiber.alternate?.memoizedProps || {};
+  const flags = fiber.flags ?? fiber.effectTag ?? 0;
+  switch (fiber.tag) {
+    case ClassComponentTag:
+    case FunctionComponentTag:
+    case ContextConsumerTag:
+    case ForwardRefTag:
+    case MemoComponentTag:
+    case SimpleMemoComponentTag: {
+      return (flags & PerformedWork) === PerformedWork;
+    }
+    default:
+      if (!fiber.alternate) return true;
+      return prevProps !== nextProps || fiber.alternate.memoizedState !== fiber.memoizedState || fiber.alternate.ref !== fiber.ref;
+  }
+};
+var getFiberStack = (fiber) => {
+  const stack = [];
+  let currentFiber = fiber;
+  while (currentFiber.return) {
+    stack.push(currentFiber);
+    currentFiber = currentFiber.return;
+  }
+  const newStack = new Array(stack.length);
+  for (let i = 0; i < stack.length; i++) {
+    newStack[i] = stack[stack.length - i - 1];
+  }
+  return newStack;
+};
+var shouldFilterFiber = (fiber) => {
+  switch (fiber.tag) {
+    case DehydratedSuspenseComponentTag:
+      return true;
+    case HostTextTag:
+    case FragmentTag:
+    case LegacyHiddenComponentTag:
+    case OffscreenComponentTag:
+      return true;
+    case HostRootTag:
+      return false;
+    default: {
+      const symbolOrNumber = typeof fiber.type === "object" && fiber.type !== null ? fiber.type.$$typeof : fiber.type;
+      const typeSymbol = typeof symbolOrNumber === "symbol" ? symbolOrNumber.toString() : symbolOrNumber;
+      switch (typeSymbol) {
+        case CONCURRENT_MODE_NUMBER:
+        case CONCURRENT_MODE_SYMBOL_STRING:
+        case DEPRECATED_ASYNC_MODE_SYMBOL_STRING:
+          return true;
+        default:
+          return false;
+      }
+    }
+  }
+};
+var getNearestHostFiber = (fiber, ascending = false) => {
+  let hostFiber = traverseFiber(fiber, isHostFiber, ascending);
+  if (!hostFiber) {
+    hostFiber = traverseFiber(fiber, isHostFiber, !ascending);
+  }
+  return hostFiber;
+};
+var traverseFiber = (fiber, selector, ascending = false) => {
+  if (!fiber) return null;
+  if (selector(fiber) === true) return fiber;
+  let child = ascending ? fiber.return : fiber.child;
+  while (child) {
+    const match = traverseFiber(child, selector, ascending);
+    if (match) return match;
+    child = ascending ? null : child.sibling;
+  }
+  return null;
+};
+var getType = (type) => {
+  const currentType = type;
+  if (typeof currentType === "function") {
+    return currentType;
+  }
+  if (typeof currentType === "object" && currentType) {
+    return getType(
+      currentType.type || currentType.render
+    );
+  }
+  return null;
+};
+var getDisplayName = (type) => {
+  const currentType = type;
+  if (typeof currentType !== "function" && !(typeof currentType === "object" && currentType)) {
+    return null;
+  }
+  const name = currentType.displayName || currentType.name || null;
+  if (name) return name;
+  const unwrappedType = getType(currentType);
+  if (!unwrappedType) return null;
+  return unwrappedType.displayName || unwrappedType.name || null;
+};
+var isUsingRDT = () => {
+  return "reactDevtoolsAgent" in getRDTHook();
+};
+var detectReactBuildType = (renderer) => {
+  try {
+    if (typeof renderer.version === "string" && renderer.bundleType > 0) {
+      return "development";
+    }
+  } catch {
+  }
+  return "production";
+};
+var fiberId = 0;
+var fiberIdMap = /* @__PURE__ */ new WeakMap();
+var setFiberId = (fiber, id = fiberId++) => {
+  fiberIdMap.set(fiber, id);
+};
+var getFiberId = (fiber) => {
+  let id = fiberIdMap.get(fiber);
+  if (!id && fiber.alternate) {
+    id = fiberIdMap.get(fiber.alternate);
+  }
+  if (!id) {
+    id = fiberId++;
+    setFiberId(fiber, id);
+  }
+  return id;
+};
+var mountFiberRecursively = (onRender, firstChild, traverseSiblings) => {
+  let fiber = firstChild;
+  while (fiber != null) {
+    if (!fiberIdMap.has(fiber)) {
+      getFiberId(fiber);
+    }
+    const shouldIncludeInTree = !shouldFilterFiber(fiber);
+    if (shouldIncludeInTree && didFiberRender(fiber)) {
+      onRender(fiber, "mount");
+    }
+    if (fiber.tag === SuspenseComponentTag) {
+      const isTimedOut = fiber.memoizedState !== null;
+      if (isTimedOut) {
+        const primaryChildFragment = fiber.child;
+        const fallbackChildFragment = primaryChildFragment ? primaryChildFragment.sibling : null;
+        if (fallbackChildFragment) {
+          const fallbackChild = fallbackChildFragment.child;
+          if (fallbackChild !== null) {
+            mountFiberRecursively(onRender, fallbackChild, false);
+          }
+        }
+      } else {
+        let primaryChild = null;
+        if (fiber.child !== null) {
+          primaryChild = fiber.child.child;
+        }
+        if (primaryChild !== null) {
+          mountFiberRecursively(onRender, primaryChild, false);
+        }
+      }
+    } else if (fiber.child != null) {
+      mountFiberRecursively(onRender, fiber.child, true);
+    }
+    fiber = traverseSiblings ? fiber.sibling : null;
+  }
+};
+var updateFiberRecursively = (onRender, nextFiber, prevFiber, parentFiber) => {
+  if (!fiberIdMap.has(nextFiber)) {
+    getFiberId(nextFiber);
+  }
+  if (!prevFiber) return;
+  if (!fiberIdMap.has(prevFiber)) {
+    getFiberId(prevFiber);
+  }
+  const isSuspense = nextFiber.tag === SuspenseComponentTag;
+  const shouldIncludeInTree = !shouldFilterFiber(nextFiber);
+  if (shouldIncludeInTree && didFiberRender(nextFiber)) {
+    onRender(nextFiber, "update");
+  }
+  const prevDidTimeout = isSuspense && prevFiber.memoizedState !== null;
+  const nextDidTimeOut = isSuspense && nextFiber.memoizedState !== null;
+  if (prevDidTimeout && nextDidTimeOut) {
+    const nextFallbackChildSet = nextFiber.child?.sibling ?? null;
+    const prevFallbackChildSet = prevFiber.child?.sibling ?? null;
+    if (nextFallbackChildSet !== null && prevFallbackChildSet !== null) {
+      updateFiberRecursively(
+        onRender,
+        nextFallbackChildSet,
+        prevFallbackChildSet);
+    }
+  } else if (prevDidTimeout && !nextDidTimeOut) {
+    const nextPrimaryChildSet = nextFiber.child;
+    if (nextPrimaryChildSet !== null) {
+      mountFiberRecursively(onRender, nextPrimaryChildSet, true);
+    }
+  } else if (!prevDidTimeout && nextDidTimeOut) {
+    unmountFiberChildrenRecursively(onRender, prevFiber);
+    const nextFallbackChildSet = nextFiber.child?.sibling ?? null;
+    if (nextFallbackChildSet !== null) {
+      mountFiberRecursively(onRender, nextFallbackChildSet, true);
+    }
+  } else if (nextFiber.child !== prevFiber.child) {
+    let nextChild = nextFiber.child;
+    while (nextChild) {
+      if (nextChild.alternate) {
+        const prevChild = nextChild.alternate;
+        updateFiberRecursively(
+          onRender,
+          nextChild,
+          prevChild);
+      } else {
+        mountFiberRecursively(onRender, nextChild, false);
+      }
+      nextChild = nextChild.sibling;
+    }
+  }
+};
+var unmountFiber = (onRender, fiber) => {
+  const isRoot = fiber.tag === HostRootTag;
+  if (isRoot || !shouldFilterFiber(fiber)) {
+    onRender(fiber, "unmount");
+  }
+};
+var unmountFiberChildrenRecursively = (onRender, fiber) => {
+  const isTimedOutSuspense = fiber.tag === SuspenseComponentTag && fiber.memoizedState !== null;
+  let child = fiber.child;
+  if (isTimedOutSuspense) {
+    const primaryChildFragment = fiber.child;
+    const fallbackChildFragment = primaryChildFragment?.sibling ?? null;
+    child = fallbackChildFragment?.child ?? null;
+  }
+  while (child !== null) {
+    if (child.return !== null) {
+      unmountFiber(onRender, child);
+      unmountFiberChildrenRecursively(onRender, child);
+    }
+    child = child.sibling;
+  }
+};
+var commitId = 0;
+var rootInstanceMap = /* @__PURE__ */ new WeakMap();
+var traverseRenderedFibers = (root, onRender) => {
+  const fiber = "current" in root ? root.current : root;
+  let rootInstance = rootInstanceMap.get(root);
+  if (!rootInstance) {
+    rootInstance = { prevFiber: null, id: commitId++ };
+    rootInstanceMap.set(root, rootInstance);
+  }
+  const { prevFiber } = rootInstance;
+  if (!fiber) {
+    unmountFiber(onRender, fiber);
+  } else if (prevFiber !== null) {
+    const wasMounted = prevFiber && prevFiber.memoizedState != null && prevFiber.memoizedState.element != null && // A dehydrated root is not considered mounted
+    prevFiber.memoizedState.isDehydrated !== true;
+    const isMounted = fiber.memoizedState != null && fiber.memoizedState.element != null && // A dehydrated root is not considered mounted
+    fiber.memoizedState.isDehydrated !== true;
+    if (!wasMounted && isMounted) {
+      mountFiberRecursively(onRender, fiber, false);
+    } else if (wasMounted && isMounted) {
+      updateFiberRecursively(onRender, fiber, fiber.alternate);
+    } else if (wasMounted && !isMounted) {
+      unmountFiber(onRender, fiber);
+    }
+  } else {
+    mountFiberRecursively(onRender, fiber, true);
+  }
+  rootInstance.prevFiber = fiber;
+};
+var createFiberVisitor = ({
+  onRender
+}) => {
+  return (_rendererID, root, _state) => {
+    traverseRenderedFibers(root, onRender);
+  };
+};
+var instrument = (options) => {
+  return getRDTHook(() => {
+    const rdtHook = getRDTHook();
+    options.onActive?.();
+    rdtHook._instrumentationSource = options.name ?? BIPPY_INSTRUMENTATION_STRING;
+    const prevOnCommitFiberRoot = rdtHook.onCommitFiberRoot;
+    if (options.onCommitFiberRoot) {
+      rdtHook.onCommitFiberRoot = (rendererID, root, priority) => {
+        if (prevOnCommitFiberRoot)
+          prevOnCommitFiberRoot(rendererID, root, priority);
+        options.onCommitFiberRoot?.(rendererID, root, priority);
+      };
+    }
+    const prevOnCommitFiberUnmount = rdtHook.onCommitFiberUnmount;
+    if (options.onCommitFiberUnmount) {
+      rdtHook.onCommitFiberUnmount = (rendererID, root) => {
+        if (prevOnCommitFiberUnmount)
+          prevOnCommitFiberUnmount(rendererID, root);
+        options.onCommitFiberUnmount?.(rendererID, root);
+      };
+    }
+    const prevOnPostCommitFiberRoot = rdtHook.onPostCommitFiberRoot;
+    if (options.onPostCommitFiberRoot) {
+      rdtHook.onPostCommitFiberRoot = (rendererID, root) => {
+        if (prevOnPostCommitFiberRoot)
+          prevOnPostCommitFiberRoot(rendererID, root);
+        options.onPostCommitFiberRoot?.(rendererID, root);
+      };
+    }
+  });
+};
+var getFiberFromHostInstance = (hostInstance) => {
+  const rdtHook = getRDTHook();
+  for (const renderer of rdtHook.renderers.values()) {
+    try {
+      const fiber = renderer.findFiberByHostInstance?.(hostInstance);
+      if (fiber) return fiber;
+    } catch {
+    }
+  }
+  if (typeof hostInstance === "object" && hostInstance != null) {
+    if ("_reactRootContainer" in hostInstance) {
+      return hostInstance._reactRootContainer?._internalRoot?.current?.child;
+    }
+    for (const key in hostInstance) {
+      if (key.startsWith("__reactInternalInstance$") || key.startsWith("__reactFiber")) {
+        return hostInstance[key];
+      }
+    }
+  }
+  return null;
+};
+var secure = (options, secureOptions = {}) => {
+  const onActive = options.onActive;
+  const isRDTHookInstalled = hasRDTHook();
+  const isRDT = isUsingRDT();
+  let timeout;
+  let isProduction = false;
+  options.onActive = () => {
+    clearTimeout(timeout);
+    let isSecure = true;
+    try {
+      onActive?.();
+      const rdtHook = getRDTHook();
+      for (const renderer of rdtHook.renderers.values()) {
+        const [majorVersion] = renderer.version.split(".");
+        if (Number(majorVersion) < (secureOptions.minReactMajorVersion ?? 17)) {
+          isSecure = false;
+        }
+        const buildType = detectReactBuildType(renderer);
+        if (buildType !== "development") {
+          isProduction = true;
+          if (!secureOptions.dangerouslyRunInProduction) {
+            isSecure = false;
+          }
+        }
+      }
+    } catch (err) {
+      secureOptions.onError?.(err);
+    }
+    if (!isSecure) {
+      options.onCommitFiberRoot = void 0;
+      options.onCommitFiberUnmount = void 0;
+      options.onPostCommitFiberRoot = void 0;
+      options.onActive = void 0;
+      return;
+    }
+    try {
+      const onCommitFiberRoot = options.onCommitFiberRoot;
+      if (onCommitFiberRoot) {
+        options.onCommitFiberRoot = (rendererID, root, priority) => {
+          try {
+            onCommitFiberRoot(rendererID, root, priority);
+          } catch (err) {
+            secureOptions.onError?.(err);
+          }
+        };
+      }
+      const onCommitFiberUnmount = options.onCommitFiberUnmount;
+      if (onCommitFiberUnmount) {
+        options.onCommitFiberUnmount = (rendererID, root) => {
+          try {
+            onCommitFiberUnmount(rendererID, root);
+          } catch (err) {
+            secureOptions.onError?.(err);
+          }
+        };
+      }
+      const onPostCommitFiberRoot = options.onPostCommitFiberRoot;
+      if (onPostCommitFiberRoot) {
+        options.onPostCommitFiberRoot = (rendererID, root) => {
+          try {
+            onPostCommitFiberRoot(rendererID, root);
+          } catch (err) {
+            secureOptions.onError?.(err);
+          }
+        };
+      }
+    } catch (err) {
+      secureOptions.onError?.(err);
+    }
+  };
+  if (!isRDTHookInstalled && !isRDT) {
+    timeout = setTimeout(() => {
+      if (!isProduction) {
+        secureOptions.onError?.();
+      }
+      stop();
+    }, secureOptions.installCheckTimeout ?? 100);
+  }
+  return options;
+};
+
+// src/extract/index.ts
+var ReactSpecNodeType = /* @__PURE__ */ ((ReactSpecNodeType2) => {
+  ReactSpecNodeType2["Component"] = "component";
+  ReactSpecNodeType2["Element"] = "element";
+  ReactSpecNodeType2["A11y"] = "a11y";
+  return ReactSpecNodeType2;
+})(ReactSpecNodeType || {});
+var fiberRoots = /* @__PURE__ */ new Set();
+var getDpr = () => {
+  return Math.min(window.devicePixelRatio || 1, 2);
+};
+var CANVAS_HTML_STR = `<canvas style="position:fixed;top:0;left:0;pointer-events:none;z-index:2147483646" aria-hidden="true"></canvas>`;
+var primaryColor = "115,97,230";
+var lerp = (start, end) => {
+  return Math.floor(start + (end - start) * 0.2);
+};
+var init = () => {
+  let hasInitedIds = false;
+  let prevX;
+  let prevY;
+  let isAnimating = false;
+  const handleFiber = (fiber) => {
+    getFiberId(fiber);
+  };
+  const visit = createFiberVisitor({
+    onRender: handleFiber,
+    onError(error) {
+      console.error(error);
+    }
+  });
+  instrument(
+    secure(
+      {
+        onActive() {
+          globalThis.__RST__ = true;
+        },
+        onCommitFiberRoot(rendererID, root) {
+          fiberRoots.add(root);
+          if (!hasInitedIds) {
+            traverseFiber(root, handleFiber);
+            hasInitedIds = true;
+            return;
+          }
+          visit(rendererID, root);
+        }
+      },
+      {
+        dangerouslyRunInProduction: true,
+        onError: (error) => {
+          if (error) {
+            console.error(error);
+          }
+        }
+      }
+    )
+  );
+  let focusedElement = null;
+  let focusedFiber = null;
+  let text = null;
+  const draw = async () => {
+    if (!ctx) return;
+    const currentElement = focusedElement;
+    if (!currentElement) {
+      clear();
+      return false;
+    }
+    const elements = [currentElement];
+    if (focusedFiber) {
+      traverseFiber(focusedFiber, (fiber) => {
+        if (isHostFiber(fiber)) {
+          elements.push(fiber.stateNode);
+        }
+      });
+    }
+    const rectMap = await getRectMap(elements);
+    const currentRect = rectMap.get(currentElement);
+    if (!currentRect) return false;
+    clear();
+    let shouldContinueAnimating = false;
+    const interpolatedX = prevX !== void 0 ? lerp(prevX, currentRect.x) : currentRect.x;
+    const interpolatedY = prevY !== void 0 ? lerp(prevY, currentRect.y) : currentRect.y;
+    if (prevX !== void 0 && (Math.abs(interpolatedX - currentRect.x) > 0.1 || Math.abs(interpolatedY - currentRect.y) > 0.1)) {
+      shouldContinueAnimating = true;
+    }
+    for (const element of elements) {
+      const rect = rectMap.get(element);
+      if (!rect) continue;
+      const { width: width2, height: height2 } = rect;
+      const x = element === currentElement ? interpolatedX : rect.x;
+      const y = element === currentElement ? interpolatedY : rect.y;
+      ctx.beginPath();
+      ctx.rect(x, y, width2, height2);
+      ctx.strokeStyle = `rgba(${primaryColor},0.5)`;
+      if (currentElement === element) {
+        ctx.fillStyle = `rgba(${primaryColor},0.1)`;
+        ctx.strokeStyle = `rgba(${primaryColor})`;
+        ctx.fill();
+      }
+      ctx.stroke();
+    }
+    if (text) {
+      const { width: textWidth } = ctx.measureText(text);
+      const textHeight = 11;
+      ctx.textRendering = "optimizeSpeed";
+      ctx.font = "11px monospace";
+      let labelY = interpolatedY - textHeight - 4;
+      if (labelY < 0) {
+        labelY = 0;
+      }
+      ctx.fillStyle = `rgba(${primaryColor})`;
+      ctx.fillRect(interpolatedX, labelY, textWidth + 4, textHeight + 4);
+      ctx.fillStyle = "rgba(255,255,255)";
+      ctx.fillText(text, interpolatedX + 2, labelY + textHeight);
+      prevX = interpolatedX;
+      prevY = interpolatedY;
+    }
+    return shouldContinueAnimating;
+  };
+  const animate = async () => {
+    if (!isAnimating) return;
+    const shouldContinue = await draw();
+    if (shouldContinue) {
+      requestAnimationFrame(animate);
+    } else {
+      isAnimating = false;
+    }
+  };
+  const startAnimation = () => {
+    if (!isAnimating) {
+      isAnimating = true;
+      requestAnimationFrame(animate);
+    }
+  };
+  document.addEventListener("contextmenu", async (event) => {
+    if (event.button !== 2) return;
+    const target = event.target;
+    const fiber = getFiberFromHostInstance(event.target);
+    focusedElement = target;
+    if (fiber) {
+      focusedFiber = fiber;
+      const stack = getFiberStack(fiber);
+      const displayNames = stack.map((fiber2) => getDisplayName(fiber2));
+      const orderedDisplayNames = [];
+      let count = 0;
+      let nearestCompositeFiber = null;
+      let currentFiber = fiber;
+      while (currentFiber) {
+        if (isCompositeFiber(currentFiber)) {
+          nearestCompositeFiber = currentFiber;
+          break;
+        }
+        currentFiber = currentFiber.return;
+      }
+      for (let i = displayNames.length - 1; i >= 0; i--) {
+        const displayName = displayNames[i];
+        if (displayName) {
+          orderedDisplayNames.push(displayName);
+          count++;
+        }
+        if (count > 2) break;
+      }
+      text = orderedDisplayNames.join(" > ");
+      const rst = await createRSTWithFiber(
+        nearestCompositeFiber || fiber,
+        target
+      );
+      console.log(rst);
+    } else {
+      focusedFiber = null;
+      text = target.tagName.toLowerCase();
+      const rst = await createRSTWithElement(target);
+      console.log(rst);
+    }
+    startAnimation();
+  });
+  const clear = () => {
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+  };
+  const host = document.createElement("div");
+  host.setAttribute("data-react-scan", "true");
+  const shadowRoot = host.attachShadow({ mode: "open" });
+  shadowRoot.innerHTML = CANVAS_HTML_STR;
+  const canvas = shadowRoot.firstChild;
+  if (!canvas) return null;
+  let dpr = Math.min(window.devicePixelRatio || 1, 2);
+  const { innerWidth, innerHeight } = window;
+  canvas.style.width = `${innerWidth}px`;
+  canvas.style.height = `${innerHeight}px`;
+  const width = innerWidth * dpr;
+  const height = innerHeight * dpr;
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d", { alpha: true });
+  if (ctx) {
+    ctx.scale(dpr, dpr);
+  }
+  let isResizeScheduled = false;
+  window.addEventListener("resize", () => {
+    if (!isResizeScheduled) {
+      isResizeScheduled = true;
+      setTimeout(() => {
+        const width2 = window.innerWidth;
+        const height2 = window.innerHeight;
+        dpr = getDpr();
+        canvas.style.width = `${width2}px`;
+        canvas.style.height = `${height2}px`;
+        canvas.width = width2 * dpr;
+        canvas.height = height2 * dpr;
+        if (ctx) {
+          ctx.resetTransform();
+          ctx.scale(dpr, dpr);
+        }
+        startAnimation();
+        isResizeScheduled = false;
+      });
+    }
+  });
+  let isScrollScheduled = false;
+  window.addEventListener("scroll", () => {
+    if (!isScrollScheduled) {
+      isScrollScheduled = true;
+      setTimeout(() => {
+        requestAnimationFrame(() => {
+          startAnimation();
+        });
+        isScrollScheduled = false;
+      }, 16 * 2);
+    }
+  });
+  let prevFocusedElement = null;
+  setInterval(() => {
+    if (prevFocusedElement === focusedElement) {
+      return;
+    }
+    prevFocusedElement = focusedElement;
+    startAnimation();
+  }, 16 * 2);
+  shadowRoot.appendChild(canvas);
+  document.documentElement.appendChild(host);
+};
+init();
+var createRSTWithFiber = async (fiber, element) => {
+  const root = await createRSTNode(fiber, element);
+  return { root };
+};
+var createRSTWithElement = async (element) => {
+  const root = await createRSTNodeFromElement(element);
+  return { root };
+};
+var createElementNode = async (element) => {
+  const rectMap = await getRectMap([element]);
+  const rect = rectMap.get(element) || element.getBoundingClientRect();
+  const computedStyle = window.getComputedStyle(element);
+  const styles = {};
+  Array.from({ length: computedStyle.length }).forEach((_, i) => {
+    const prop = computedStyle[i];
+    styles[prop] = computedStyle.getPropertyValue(prop);
+  });
+  return {
+    type: "element" /* Element */,
+    children: [],
+    x: rect.x,
+    y: rect.y,
+    width: rect.width,
+    height: rect.height,
+    eventHandlers: {},
+    classes: Array.from(element.classList),
+    styles,
+    element
+  };
+};
+var createA11yNode = (base, role, ariaLabel) => {
+  return {
+    ...base,
+    type: "a11y" /* A11y */,
+    role,
+    ariaLabel
+  };
+};
+var createRSTNodeFromElement = async (element) => {
+  const base = await createElementNode(element);
+  for (const attr of Array.from(element.attributes)) {
+    if (attr.name.startsWith("on")) {
+      base.eventHandlers[attr.name] = attr.value;
+    }
+  }
+  base.children = await Promise.all(
+    Array.from(element.children).map(createRSTNodeFromElement)
+  );
+  const role = element.getAttribute("role");
+  const ariaLabel = element.getAttribute("aria-label");
+  if (role || ariaLabel) {
+    return createA11yNode(base, role, ariaLabel);
+  }
+  return base;
+};
+var createRSTNode = async (fiber, element) => {
+  if (isCompositeFiber(fiber)) {
+    const props = {};
+    traverseProps(fiber, (propName, nextValue) => {
+      props[propName] = nextValue;
+    });
+    const children = [];
+    const childPromises = [];
+    traverseFiber(fiber.child, (childFiber) => {
+      if (isHostFiber(childFiber) && childFiber.stateNode) {
+        childPromises.push(
+          createRSTNode(childFiber, childFiber.stateNode).then((node) => {
+            children.push(node);
+          })
+        );
+      } else if (isCompositeFiber(childFiber)) {
+        const hostFiber = getNearestHostFiber(childFiber);
+        if (hostFiber?.stateNode) {
+          childPromises.push(
+            createRSTNode(childFiber, hostFiber.stateNode).then((node) => {
+              children.push(node);
+            })
+          );
+        }
+      }
+    });
+    await Promise.all(childPromises);
+    return {
+      type: "component" /* Component */,
+      children,
+      props,
+      name: getDisplayName(fiber.type)
+    };
+  }
+  if (isHostFiber(fiber)) {
+    const base = await createElementNode(element);
+    traverseProps(fiber, (propName, value) => {
+      if (propName.startsWith("on") && typeof value === "function") {
+        base.eventHandlers[propName] = value.toString();
+      }
+    });
+    base.children = [];
+    const childPromises = [];
+    traverseFiber(fiber.child, (childFiber) => {
+      if (isHostFiber(childFiber) && childFiber.stateNode) {
+        childPromises.push(
+          createRSTNode(childFiber, childFiber.stateNode).then((node) => {
+            base.children.push(node);
+          })
+        );
+      } else if (isCompositeFiber(childFiber)) {
+        const hostFiber = getNearestHostFiber(childFiber);
+        if (hostFiber?.stateNode) {
+          childPromises.push(
+            createRSTNode(childFiber, hostFiber.stateNode).then((node) => {
+              base.children.push(node);
+            })
+          );
+        }
+      }
+    });
+    await Promise.all(childPromises);
+    const role = element.getAttribute("role");
+    const ariaLabel = element.getAttribute("aria-label");
+    if (role || ariaLabel) {
+      return createA11yNode(base, role, ariaLabel);
+    }
+    return base;
+  }
+  throw new Error("Unknown fiber type");
+};
+var getRectMap = (elements) => {
+  return new Promise((resolve) => {
+    const rects = /* @__PURE__ */ new Map();
+    const observer = new IntersectionObserver((entries) => {
+      for (let i = 0, len = entries.length; i < len; i++) {
+        const entry = entries[i];
+        const element = entry.target;
+        const rect = entry.boundingClientRect;
+        if (entry.isIntersecting && rect.width && rect.height) {
+          rects.set(element, rect);
+        }
+      }
+      observer.disconnect();
+      resolve(rects);
+    });
+    for (let i = 0, len = elements.length; i < len; i++) {
+      const element = elements[i];
+      observer.observe(element);
+    }
+  });
+};
+var stringifyWithCircularCheck = (value, seen = /* @__PURE__ */ new WeakSet()) => {
+  if (value === null || value === void 0) {
+    return String(value);
+  }
+  if (typeof value === "function") {
+    return value.toString().slice(0, 50) + (value.toString().length > 50 ? "..." : "");
+  }
+  if (typeof value !== "object") {
+    return JSON.stringify(value);
+  }
+  if (seen.has(value)) {
+    return "[Circular]";
+  }
+  seen.add(value);
+  if (Array.isArray(value)) {
+    const items = value.map((item) => stringifyWithCircularCheck(item, seen));
+    return `[${items.join(", ")}]`;
+  }
+  try {
+    const pairs = Object.entries(value).map(
+      ([key, val]) => `${key}: ${stringifyWithCircularCheck(val, seen)}`
+    );
+    return `{${pairs.join(", ")}}`;
+  } catch {
+    return "[Object]";
+  }
+};
+var printRST = (tree, indent = 0) => {
+  const printNode = (node, indent2) => {
+    const spaces = "  ".repeat(indent2);
+    if (node.type === "component" /* Component */ && "props" in node && "name" in node) {
+      const props = Object.entries(node.props).map(([key, value]) => `${key}={${stringifyWithCircularCheck(value)}}`).join(" ");
+      return `${spaces}<${node.name || "Unknown"}${props ? ` ${props}` : ""}>
+${node.children.map((child) => printNode(child, indent2 + 1)).join("\n")}
+${spaces}</${node.name || "Unknown"}>`;
+    }
+    const attrs = [];
+    if ("classes" in node && node.classes.length > 0) {
+      attrs.push(`class="${node.classes.join(" ")}"`);
+    }
+    if ("eventHandlers" in node) {
+      const eventHandlerAttrs = Object.entries(node.eventHandlers).map(
+        ([event, handler]) => `${event}={${handler.slice(0, 50)}${handler.length > 50 ? "..." : ""}}`
+      ).join(" ");
+      if (eventHandlerAttrs) {
+        attrs.push(eventHandlerAttrs);
+      }
+    }
+    if ("styles" in node) {
+      const styleStr = stringifyWithCircularCheck(node.styles);
+      if (styleStr !== "{}") {
+        attrs.push(`style={${styleStr}}`);
+      }
+    }
+    if (node.type === "a11y" /* A11y */ && "role" in node && "ariaLabel" in node) {
+      if (node.role) attrs.push(`role="${node.role}"`);
+      if (node.ariaLabel) attrs.push(`aria-label="${node.ariaLabel}"`);
+    }
+    if ("x" in node && "y" in node && "width" in node && "height" in node) {
+      const dimensions = `x=${Math.round(node.x)} y=${Math.round(node.y)} w=${Math.round(node.width)} h=${Math.round(node.height)}`;
+      attrs.push(dimensions);
+    }
+    const tagName = "element" in node ? node.element?.tagName.toLowerCase() || "unknown" : "unknown";
+    const attrsStr = attrs.length > 0 ? ` ${attrs.join(" ")}` : "";
+    if (node.children.length === 0) {
+      return `${spaces}<${tagName}${attrsStr} />`;
+    }
+    return `${spaces}<${tagName}${attrsStr}>
+${node.children.map((child) => printNode(child, indent2 + 1)).join("\n")}
+${spaces}</${tagName}>`;
+  };
+  if (!("type" in tree.root)) {
+    throw new Error("Invalid RST: root node must have a type");
+  }
+  return printNode(tree.root, indent);
+};
+
+export { ReactSpecNodeType, getRectMap, init, primaryColor, printRST };