bippy 0.2.24 → 0.3.0

package/dist/core.d.ts

@@ -1,74 +1,9 @@
 import * as React from 'react';
-import { FiberRoot, Fiber as Fiber$1, ReactContext, Lanes } from 'react-reconciler';
+import { R as ReactDevToolsGlobalHook, F as Fiber, C as ContextDependency, M as MemoizedState, a as ReactRenderer } from './types-bP3PNEQt.js';
+export { D as Dependencies, E as Effect, P as Props } from './types-bP3PNEQt.js';
+import { FiberRoot } from 'react-reconciler';
 export { BundleType, ComponentSelector, DevToolsConfig, FiberRoot, Flags, HasPseudoClassSelector, HookType, HostConfig, LanePriority, Lanes, MutableSource, OpaqueHandle, OpaqueRoot, React$AbstractComponent, ReactConsumer, ReactContext, ReactPortal, ReactProvider, ReactProviderType, RefObject, RoleSelector, RootTag, Selector, Source, SuspenseHydrationCallbacks, TestNameSelector, TextSelector, Thenable, TransitionTracingCallbacks, TypeOfMode, WorkTag } from 'react-reconciler';
 
-interface ReactDevToolsGlobalHook {
-    checkDCE: (fn: unknown) => void;
-    supportsFiber: boolean;
-    supportsFlight: boolean;
-    renderers: Map<number, ReactRenderer>;
-    hasUnsupportedRendererAttached: boolean;
-    onCommitFiberRoot: (rendererID: number, root: FiberRoot, priority: void | number) => void;
-    onCommitFiberUnmount: (rendererID: number, fiber: Fiber) => void;
-    onPostCommitFiberRoot: (rendererID: number, root: FiberRoot) => void;
-    inject: (renderer: ReactRenderer) => number;
-    _instrumentationSource?: string;
-    _instrumentationIsActive?: boolean;
-    _sw?: boolean;
-}
-/**
- * Represents a react-internal Fiber node.
- */
-type Fiber<T = any> = Omit<Fiber$1, 'stateNode' | 'dependencies' | 'child' | 'sibling' | 'return' | 'alternate' | 'memoizedProps' | 'pendingProps' | 'memoizedState' | 'updateQueue'> & {
-    stateNode: T;
-    dependencies: Dependencies | null;
-    child: Fiber | null;
-    sibling: Fiber | null;
-    return: Fiber | null;
-    alternate: Fiber | null;
-    memoizedProps: Props;
-    pendingProps: Props;
-    memoizedState: MemoizedState;
-    updateQueue: {
-        lastEffect: Effect | null;
-        [key: string]: unknown;
-    };
-};
-interface ReactRenderer {
-    version: string;
-    bundleType: 0 | 1;
-    findFiberByHostInstance?: (hostInstance: unknown) => Fiber | null;
-}
-interface ContextDependency<T> {
-    context: ReactContext<T>;
-    memoizedValue: T;
-    observedBits: number;
-    next: ContextDependency<unknown> | null;
-}
-interface Dependencies {
-    lanes: Lanes;
-    firstContext: ContextDependency<unknown> | null;
-}
-interface Effect {
-    next: Effect | null;
-    create: (...args: unknown[]) => unknown;
-    destroy: ((...args: unknown[]) => unknown) | null;
-    deps: unknown[] | null;
-    tag: number;
-    [key: string]: unknown;
-}
-interface MemoizedState {
-    memoizedState: unknown;
-    next: MemoizedState | null;
-    [key: string]: unknown;
-}
-interface Props {
-    [key: string]: unknown;
-}
-declare global {
-    var __REACT_DEVTOOLS_GLOBAL_HOOK__: ReactDevToolsGlobalHook | undefined;
-}
-
 declare const INSTALL_HOOK_SCRIPT_STRING = "(()=>{try{var t=()=>{};const n=new Map;let o=0;globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__={checkDCE:t,supportsFiber:!0,supportsFlight:!0,hasUnsupportedRendererAttached:!1,renderers:n,onCommitFiberRoot:t,onCommitFiberUnmount:t,onPostCommitFiberRoot:t,inject(t){var e=++o;return n.set(e,t),globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__._instrumentationIsActive=!0,e},_instrumentationIsActive:!1,_script:!0}}catch{}})()";
 
 declare const version: string | undefined;
@@ -198,7 +133,7 @@ declare const hasMemoCache: (fiber: Fiber) => boolean;
  */
 declare const getType: (type: unknown) => React.ComponentType<unknown> | null;
 /**
- * Returns the display name of the {@link Fiber}.
+ * Returns the display name of the {@link Fiber} type.
  */
 declare const getDisplayName: (type: unknown) => string | null;
 /**
@@ -272,4 +207,4 @@ declare const secure: (options: InstrumentationOptions, secureOptions?: {
  */
 declare const onCommitFiberRoot: (handler: (root: FiberRoot) => void) => ReactDevToolsGlobalHook;
 
-export { BIPPY_INSTRUMENTATION_STRING, CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ClassComponentTag, ContextConsumerTag, type ContextDependency, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponentTag, type Dependencies, ELEMENT_TYPE_SYMBOL_STRING, type Effect, type Fiber, ForwardRefTag, FragmentTag, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRootTag, HostSingletonTag, HostTextTag, INSTALL_ERROR, INSTALL_HOOK_SCRIPT_STRING, type InstrumentationOptions, LegacyHiddenComponentTag, MemoComponentTag, type MemoizedState, OffscreenComponentTag, type Props, type ReactDevToolsGlobalHook, type ReactRenderer, type RenderHandler, type RenderPhase, SimpleMemoComponentTag, SuspenseComponentTag, TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, fiberIdMap, getDisplayName, getFiberFromHostInstance, getFiberId, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getNearestHostFibers, getRDTHook, getTimings, getType, hasMemoCache, hasRDTHook, installRDTHook, instrument, isClientEnvironment, isCompositeFiber, isHostFiber, isInstrumentationActive, isReactRefresh, isRealReactDevtools, isValidElement, isValidFiber, mountFiberRecursively, onCommitFiberRoot, patchRDTHook, secure, setFiberId, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseRenderedFibers, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively, version };
+export { BIPPY_INSTRUMENTATION_STRING, CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ClassComponentTag, ContextConsumerTag, ContextDependency, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponentTag, ELEMENT_TYPE_SYMBOL_STRING, Fiber, ForwardRefTag, FragmentTag, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRootTag, HostSingletonTag, HostTextTag, INSTALL_ERROR, INSTALL_HOOK_SCRIPT_STRING, type InstrumentationOptions, LegacyHiddenComponentTag, MemoComponentTag, MemoizedState, OffscreenComponentTag, ReactDevToolsGlobalHook, ReactRenderer, type RenderHandler, type RenderPhase, SimpleMemoComponentTag, SuspenseComponentTag, TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, fiberIdMap, getDisplayName, getFiberFromHostInstance, getFiberId, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getNearestHostFibers, getRDTHook, getTimings, getType, hasMemoCache, hasRDTHook, installRDTHook, instrument, isClientEnvironment, isCompositeFiber, isHostFiber, isInstrumentationActive, isReactRefresh, isRealReactDevtools, isValidElement, isValidFiber, mountFiberRecursively, onCommitFiberRoot, patchRDTHook, secure, setFiberId, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseRenderedFibers, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively, version };

package/dist/core.js

@@ -1 +1 @@
-export { BIPPY_INSTRUMENTATION_STRING, CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ClassComponentTag, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponentTag, ELEMENT_TYPE_SYMBOL_STRING, ForwardRefTag, FragmentTag, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRootTag, HostSingletonTag, HostTextTag, INSTALL_ERROR, INSTALL_HOOK_SCRIPT_STRING, LegacyHiddenComponentTag, MemoComponentTag, OffscreenComponentTag, SimpleMemoComponentTag, SuspenseComponentTag, TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, fiberIdMap, getDisplayName, getFiberFromHostInstance, getFiberId, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getNearestHostFibers, getRDTHook, getTimings, getType, hasMemoCache, hasRDTHook, installRDTHook, instrument, isClientEnvironment, isCompositeFiber, isHostFiber, isInstrumentationActive, isReactRefresh, isRealReactDevtools, isValidElement, isValidFiber, mountFiberRecursively, onCommitFiberRoot, patchRDTHook, secure, setFiberId, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseRenderedFibers, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively, version } from './chunk-347RWTP3.js';
+export { BIPPY_INSTRUMENTATION_STRING, CONCURRENT_MODE_NUMBER, CONCURRENT_MODE_SYMBOL_STRING, ClassComponentTag, ContextConsumerTag, DEPRECATED_ASYNC_MODE_SYMBOL_STRING, DehydratedSuspenseComponentTag, ELEMENT_TYPE_SYMBOL_STRING, ForwardRefTag, FragmentTag, FunctionComponentTag, HostComponentTag, HostHoistableTag, HostRootTag, HostSingletonTag, HostTextTag, INSTALL_ERROR, INSTALL_HOOK_SCRIPT_STRING, LegacyHiddenComponentTag, MemoComponentTag, OffscreenComponentTag, SimpleMemoComponentTag, SuspenseComponentTag, TRANSITIONAL_ELEMENT_TYPE_SYMBOL_STRING, createFiberVisitor, detectReactBuildType, didFiberCommit, didFiberRender, fiberIdMap, getDisplayName, getFiberFromHostInstance, getFiberId, getFiberStack, getMutatedHostFibers, getNearestHostFiber, getNearestHostFibers, getRDTHook, getTimings, getType, hasMemoCache, hasRDTHook, installRDTHook, instrument, isClientEnvironment, isCompositeFiber, isHostFiber, isInstrumentationActive, isReactRefresh, isRealReactDevtools, isValidElement, isValidFiber, mountFiberRecursively, onCommitFiberRoot, patchRDTHook, secure, setFiberId, shouldFilterFiber, traverseContexts, traverseFiber, traverseProps, traverseRenderedFibers, traverseState, unmountFiber, unmountFiberChildrenRecursively, updateFiberRecursively, version } from './chunk-NK43KTPL.js';

package/dist/experiments/inspect.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunk-HQYIPSLJ.cjs');
-var chunkGVWERSAB_cjs = require('../chunk-GVWERSAB.cjs');
+require('../chunk-POWCTW3F.cjs');
+var chunkR357CEJU_cjs = require('../chunk-R357CEJU.cjs');
 var React17 = require('react');
 var ReactDOM = require('react-dom');
 
@@ -1204,6 +1204,8 @@ var Inspector = ({ table = false, data, ...rest }) => {
     ...rest
   });
 };
+
+// src/experiments/inspect.tsx
 var FIBER_PROP_EXPLANATIONS = {
   tag: "Numeric type identifier for this fiber (e.g. 1=FunctionComponent, 5=HostComponent)",
   elementType: "The original function/class/element type",
@@ -1362,7 +1364,7 @@ var RawInspector = React17__default.default.memo(
     const [fiberHistory, setFiberHistory] = React17.useState([]);
     const getFiberForDisplay = React17.useCallback(() => {
       if (selectedFiber) return selectedFiber;
-      const fiber2 = chunkGVWERSAB_cjs.getFiberFromHostInstance(element);
+      const fiber2 = chunkR357CEJU_cjs.getFiberFromHostInstance(element);
       return fiber2;
     }, [selectedFiber, element]);
     const handlePropertyHover = (_e, propName) => {
@@ -1409,15 +1411,15 @@ var RawInspector = React17__default.default.memo(
     React17.useEffect(() => {
       const handleMouseMove = (event) => {
         if (isDialogMode) return;
-        const isActive2 = chunkGVWERSAB_cjs.isInstrumentationActive() || chunkGVWERSAB_cjs.hasRDTHook();
+        const isActive2 = chunkR357CEJU_cjs.isInstrumentationActive() || chunkR357CEJU_cjs.hasRDTHook();
         if (!isActive2) {
           setIsActive(false);
           return;
         }
         if (!dangerouslyRunInProduction) {
-          const rdtHook = chunkGVWERSAB_cjs.getRDTHook();
+          const rdtHook = chunkR357CEJU_cjs.getRDTHook();
           for (const renderer of rdtHook.renderers.values()) {
-            const buildType = chunkGVWERSAB_cjs.detectReactBuildType(renderer);
+            const buildType = chunkR357CEJU_cjs.detectReactBuildType(renderer);
             if (buildType === "production") {
               setIsActive(false);
               return;
@@ -1478,7 +1480,7 @@ var RawInspector = React17__default.default.memo(
     }, [rect]);
     React17.useEffect(() => {
       if (selectedFiber) {
-        const element2 = chunkGVWERSAB_cjs.getNearestHostFiber(selectedFiber)?.stateNode;
+        const element2 = chunkR357CEJU_cjs.getNearestHostFiber(selectedFiber)?.stateNode;
         if (element2) {
           setElement(element2);
           setRect(element2.getBoundingClientRect());
@@ -1496,7 +1498,7 @@ var RawInspector = React17__default.default.memo(
     const fiber = getFiberForDisplay();
     if (!fiber) return null;
     let foundInspect = false;
-    chunkGVWERSAB_cjs.traverseFiber(
+    chunkR357CEJU_cjs.traverseFiber(
       fiber,
       (innerFiber) => {
         if (innerFiber.type === Inspector2) {
@@ -1531,7 +1533,7 @@ var RawInspector = React17__default.default.memo(
       backgroundColor: "rgba(0, 0, 0, 0.7)",
       zIndex: 999
     } : {};
-    const fiberStack = fiber ? chunkGVWERSAB_cjs.getFiberStack(fiber) : [];
+    const fiberStack = fiber ? chunkR357CEJU_cjs.getFiberStack(fiber) : [];
     return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, null, isDialogMode && /* @__PURE__ */ React17__default.default.createElement(
       "div",
       {
@@ -1592,7 +1594,7 @@ var RawInspector = React17__default.default.memo(
               margin: 0
             }
           },
-          `<${typeof fiber.type === "string" ? fiber.type : chunkGVWERSAB_cjs.getDisplayName(fiber.type) || "unknown"}>`,
+          `<${typeof fiber.type === "string" ? fiber.type : chunkR357CEJU_cjs.getDisplayName(fiber.type) || "unknown"}>`,
           !isDialogMode && /* @__PURE__ */ React17__default.default.createElement(
             "span",
             {
@@ -1621,9 +1623,9 @@ var RawInspector = React17__default.default.memo(
           }
         },
         fiberStack.reverse().map((f, i, arr) => {
-          const name = typeof f.type === "string" ? f.type : chunkGVWERSAB_cjs.getDisplayName(f.type) || "unknown";
+          const name = typeof f.type === "string" ? f.type : chunkR357CEJU_cjs.getDisplayName(f.type) || "unknown";
           if (!name) return null;
-          return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, { key: chunkGVWERSAB_cjs.getFiberId(f) }, /* @__PURE__ */ React17__default.default.createElement(
+          return /* @__PURE__ */ React17__default.default.createElement(React17__default.default.Fragment, { key: chunkR357CEJU_cjs.getFiberId(f) }, /* @__PURE__ */ React17__default.default.createElement(
             BreadcrumbButton,
             {
               name,
@@ -1632,7 +1634,7 @@ var RawInspector = React17__default.default.memo(
                   setFiberHistory((prev) => [...prev, selectedFiber]);
                 }
                 setSelectedFiber(f);
-                const element2 = chunkGVWERSAB_cjs.getNearestHostFiber(f)?.stateNode;
+                const element2 = chunkR357CEJU_cjs.getNearestHostFiber(f)?.stateNode;
                 if (element2) {
                   setElement(element2);
                   setRect(element2.getBoundingClientRect());
@@ -1644,7 +1646,7 @@ var RawInspector = React17__default.default.memo(
                     setFiberHistory((prev) => [...prev, selectedFiber]);
                   }
                   setSelectedFiber(f);
-                  const element2 = chunkGVWERSAB_cjs.getNearestHostFiber(f)?.stateNode;
+                  const element2 = chunkR357CEJU_cjs.getNearestHostFiber(f)?.stateNode;
                   if (element2) {
                     setElement(element2);
                     setRect(element2.getBoundingClientRect());

package/dist/experiments/inspect.js

@@ -1,5 +1,5 @@
-import '../chunk-N23WFCSF.js';
-import { getFiberFromHostInstance, getNearestHostFiber, traverseFiber, getFiberStack, getDisplayName, getFiberId, isInstrumentationActive, hasRDTHook, getRDTHook, detectReactBuildType } from '../chunk-347RWTP3.js';
+import '../chunk-2R5SJTFQ.js';
+import { getFiberFromHostInstance, getNearestHostFiber, traverseFiber, getFiberStack, getDisplayName, getFiberId, isInstrumentationActive, hasRDTHook, getRDTHook, detectReactBuildType } from '../chunk-NK43KTPL.js';
 import React17, { createContext, memo, Children, useContext, useCallback, useState, useLayoutEffect, useEffect, useMemo } from 'react';
 import ReactDOM from 'react-dom';
 
@@ -1195,6 +1195,8 @@ var Inspector = ({ table = false, data, ...rest }) => {
     ...rest
   });
 };
+
+// src/experiments/inspect.tsx
 var FIBER_PROP_EXPLANATIONS = {
   tag: "Numeric type identifier for this fiber (e.g. 1=FunctionComponent, 5=HostComponent)",
   elementType: "The original function/class/element type",

package/dist/experiments/shrinkwrap.cjs

@@ -0,0 +1,374 @@
+'use strict';
+
+require('../chunk-POWCTW3F.cjs');
+var chunkR357CEJU_cjs = require('../chunk-R357CEJU.cjs');
+
+/**
+ * @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/experiments/shrinkwrap.ts
+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 COLORS = [
+  [255, 0, 0],
+  [0, 255, 0],
+  [0, 0, 255],
+  [255, 165, 0],
+  [128, 0, 128],
+  [0, 128, 128],
+  [255, 105, 180],
+  [75, 0, 130],
+  [255, 69, 0],
+  [46, 139, 87],
+  [220, 20, 60],
+  [70, 130, 180]
+];
+var interactiveElements = [
+  "a",
+  "button",
+  "details",
+  "embed",
+  "input",
+  "label",
+  "menu",
+  "menuitem",
+  "object",
+  "select",
+  "textarea",
+  "summary"
+];
+var interactiveRoles = [
+  "button",
+  "menu",
+  "menuitem",
+  "link",
+  "checkbox",
+  "radio",
+  "slider",
+  "tab",
+  "tabpanel",
+  "textbox",
+  "combobox",
+  "grid",
+  "listbox",
+  "option",
+  "progressbar",
+  "scrollbar",
+  "searchbox",
+  "switch",
+  "tree",
+  "treeitem",
+  "spinbutton",
+  "tooltip",
+  "a-button-inner",
+  "a-dropdown-button",
+  "click",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "a-button-text",
+  "button-text",
+  "button-icon",
+  "button-icon-only",
+  "button-text-icon-only",
+  "dropdown",
+  "combobox"
+];
+var interactiveEvents = [
+  "click",
+  "mousedown",
+  "mouseup",
+  "touchstart",
+  "touchend",
+  "keydown",
+  "keyup",
+  "focus",
+  "blur"
+];
+var isScrollable = (element) => {
+  const isScrollable2 = element.hasAttribute("aria-scrollable") || element.hasAttribute("scrollable") || "style" in element && (element.style.overflow === "auto" || element.style.overflow === "scroll" || element.style.overflowY === "auto" || element.style.overflowY === "scroll" || element.style.overflowX === "auto" || element.style.overflowX === "scroll");
+  return isScrollable2;
+};
+var isInteractive = (element) => {
+  const fiber = chunkR357CEJU_cjs.getFiberFromHostInstance(element);
+  if (fiber?.stateNode instanceof Element) {
+    for (const propName of Object.keys(fiber.memoizedProps || {})) {
+      if (!propName.startsWith("on")) continue;
+      const event = propName.slice(2).toLowerCase().replace(/capture$/, "");
+      if (!interactiveEvents.includes(event)) continue;
+      if (fiber.memoizedProps[propName]) {
+        return true;
+      }
+    }
+  }
+  for (const event of interactiveEvents) {
+    const dotOnHandler = element[`on${event}`];
+    const explicitOnHandler = element.hasAttribute(`on${event}`);
+    const ngClick = element.hasAttribute(`ng-${event}`);
+    const atClick = element.hasAttribute(`@${event}`);
+    const vOnClick = element.hasAttribute(`v-on:${event}`);
+    if (dotOnHandler || explicitOnHandler || ngClick || atClick || vOnClick) {
+      return true;
+    }
+  }
+  const tagName = element.tagName.toLowerCase();
+  const role = element.getAttribute("role");
+  const ariaRole = element.getAttribute("aria-role");
+  const tabIndex = element.getAttribute("tabindex");
+  const hasInteractiveRole = interactiveElements.includes(tagName) || role && interactiveRoles.includes(role) || ariaRole && interactiveRoles.includes(ariaRole) || tabIndex !== null && tabIndex !== "-1";
+  const hasAriaProps = element.hasAttribute("aria-expanded") || element.hasAttribute("aria-pressed") || element.hasAttribute("aria-selected") || element.hasAttribute("aria-checked");
+  const isFormRelated = "form" in element && element.form !== void 0 || element.hasAttribute("contenteditable");
+  const isDraggable = "draggable" in element && element.draggable || element.getAttribute("draggable") === "true";
+  return hasInteractiveRole || isFormRelated || isDraggable || hasAriaProps;
+};
+var isElementVisible = (element) => {
+  const style = window.getComputedStyle(element);
+  return element.offsetWidth > 0 && element.offsetHeight > 0 && style.visibility !== "hidden" && style.display !== "none";
+};
+var isTopElement = (element) => {
+  const doc = element.ownerDocument;
+  if (doc !== window.document) {
+    return true;
+  }
+  const shadowRoot = element.getRootNode();
+  if (shadowRoot instanceof ShadowRoot) {
+    const rect2 = element.getBoundingClientRect();
+    const point = {
+      x: rect2.left + rect2.width / 2,
+      y: rect2.top + rect2.height / 2
+    };
+    try {
+      const topEl = shadowRoot.elementFromPoint(point.x, point.y);
+      if (!topEl) return false;
+      let current = topEl;
+      while (current && current !== shadowRoot) {
+        if (current === element) return true;
+        current = current.parentElement;
+      }
+      return false;
+    } catch {
+      return true;
+    }
+  }
+  const rect = element.getBoundingClientRect();
+  const scrollX = window.scrollX;
+  const scrollY = window.scrollY;
+  const viewportTop = scrollY;
+  const viewportLeft = scrollX;
+  const viewportBottom = window.innerHeight + scrollY;
+  const viewportRight = window.innerWidth + scrollX;
+  const absTop = rect.top + scrollY;
+  const absLeft = rect.left + scrollX;
+  const absBottom = rect.bottom + scrollY;
+  const absRight = rect.right + scrollX;
+  if (absBottom < viewportTop || absTop > viewportBottom || absRight < viewportLeft || absLeft > viewportRight) {
+    return false;
+  }
+  try {
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const point = {
+      x: centerX,
+      y: centerY
+    };
+    if (point.x < 0 || point.x >= window.innerWidth || point.y < 0 || point.y >= window.innerHeight) {
+      return true;
+    }
+    const topEl = document.elementFromPoint(point.x, point.y);
+    if (!topEl) return false;
+    let current = topEl;
+    while (current && current !== document.documentElement) {
+      if (current === element) return true;
+      current = current.parentElement;
+    }
+    return false;
+  } catch {
+    return true;
+  }
+};
+var createShrinkwrap = () => {
+  const draw = async (elements) => {
+    if (!ctx) return;
+    const rectMap = await getRectMap(elements);
+    clear();
+    const drawnLabelBounds = [];
+    let visibleCount = 0;
+    const visibleIndices = /* @__PURE__ */ new Map();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const COVERAGE_THRESHOLD = 0.97;
+    for (let i = 0, len = elements.length; i < len; i++) {
+      const element = elements[i];
+      const rect = rectMap.get(element);
+      if (!rect) continue;
+      const { width: width2, height: height2 } = rect;
+      const x = rect.x;
+      const y = rect.y;
+      if (width2 / viewportWidth > COVERAGE_THRESHOLD && height2 / viewportHeight > COVERAGE_THRESHOLD)
+        continue;
+      const text = `${visibleCount + 1}`;
+      const textSize = 16;
+      ctx.textRendering = "optimizeSpeed";
+      ctx.font = `${textSize}px monospace`;
+      const { width: textWidth } = ctx.measureText(text);
+      let labelY = y - textSize - 4;
+      if (labelY < 0) {
+        labelY = 0;
+      }
+      const labelBounds = {
+        x,
+        y: labelY,
+        width: textWidth + 4,
+        height: textSize + 4
+      };
+      const hasCollision = drawnLabelBounds.some(
+        (bound) => labelBounds.x < bound.x + bound.width && labelBounds.x + labelBounds.width > bound.x && labelBounds.y < bound.y + bound.height && labelBounds.y + labelBounds.height > bound.y
+      );
+      if (!hasCollision) {
+        drawnLabelBounds.push(labelBounds);
+        visibleCount++;
+        visibleIndices.set(element, visibleCount);
+        ctx.beginPath();
+        ctx.rect(x, y, width2, height2);
+        const color = COLORS[i % COLORS.length].join(",");
+        ctx.fillStyle = `rgba(${color},0.1)`;
+        ctx.strokeStyle = `rgba(${color})`;
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = `rgba(${color})`;
+        ctx.fillRect(x, labelY, textWidth + 4, textSize + 4);
+        ctx.fillStyle = "rgba(255,255,255)";
+        ctx.fillText(text, x + 2, labelY + textSize);
+      }
+    }
+    return visibleIndices;
+  };
+  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 root = host.attachShadow({ mode: "open" });
+  root.innerHTML = CANVAS_HTML_STR;
+  const canvas = root.firstChild;
+  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);
+  }
+  root.appendChild(canvas);
+  document.documentElement.appendChild(host);
+  let isResizeScheduled = false;
+  const resizeHandler = () => {
+    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);
+        }
+        shrinkwrap.trackInteractive();
+        isResizeScheduled = false;
+      });
+    }
+  };
+  let isScrollScheduled = false;
+  const scrollHandler = () => {
+    if (isScrollScheduled) return;
+    isScrollScheduled = true;
+    setTimeout(() => {
+      requestAnimationFrame(() => {
+        shrinkwrap.trackInteractive();
+      });
+      isScrollScheduled = false;
+    }, 8);
+  };
+  const fiberRoots = /* @__PURE__ */ new Set();
+  const shrinkwrap = {
+    draw(elements) {
+      draw(elements).then((visibleIndices) => {
+        if (!visibleIndices) return;
+        const elementMap = {};
+        visibleIndices.forEach((index, element) => {
+          elementMap[index] = element;
+        });
+        window.shrinkwrap = {
+          elementMap
+        };
+      });
+    },
+    trackInteractive() {
+      chunkR357CEJU_cjs.instrument({
+        onCommitFiberRoot(_, root2) {
+          fiberRoots.add(root2);
+          const elements = [];
+          for (const fiberRoot of fiberRoots) {
+            chunkR357CEJU_cjs.traverseFiber(fiberRoot.current, (fiber) => {
+              if (chunkR357CEJU_cjs.isHostFiber(fiber) && isInteractive(fiber.stateNode) && isElementVisible(fiber.stateNode) && isTopElement(fiber.stateNode)) {
+                elements.push(fiber.stateNode);
+              }
+            });
+          }
+          shrinkwrap.draw(elements);
+        }
+      });
+    },
+    cleanup() {
+      fiberRoots.clear();
+      window.removeEventListener("scroll", scrollHandler);
+      window.removeEventListener("resize", resizeHandler);
+      document.documentElement.removeChild(host);
+    }
+  };
+  window.addEventListener("scroll", scrollHandler);
+  window.addEventListener("resize", resizeHandler);
+  return shrinkwrap;
+};
+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);
+    }
+  });
+};
+
+exports.createShrinkwrap = createShrinkwrap;
+exports.getRectMap = getRectMap;
+exports.isInteractive = isInteractive;
+exports.isScrollable = isScrollable;

package/dist/experiments/shrinkwrap.d.cts

@@ -0,0 +1,10 @@
+declare const isScrollable: (element: Element) => boolean;
+declare const isInteractive: (element: Element) => {};
+declare const createShrinkwrap: () => {
+    draw(elements: Element[]): void;
+    trackInteractive(): void;
+    cleanup(): void;
+};
+declare const getRectMap: (elements: Element[]) => Promise<Map<Element, DOMRect>>;
+
+export { createShrinkwrap, getRectMap, isInteractive, isScrollable };

package/dist/experiments/shrinkwrap.d.ts

@@ -0,0 +1,10 @@
+declare const isScrollable: (element: Element) => boolean;
+declare const isInteractive: (element: Element) => {};
+declare const createShrinkwrap: () => {
+    draw(elements: Element[]): void;
+    trackInteractive(): void;
+    cleanup(): void;
+};
+declare const getRectMap: (elements: Element[]) => Promise<Map<Element, DOMRect>>;
+
+export { createShrinkwrap, getRectMap, isInteractive, isScrollable };