bippy 0.3.34 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bippy",
-  "version": "0.3.34",
+  "version": "0.5.0",
   "description": "hack into react internals",
   "publishConfig": {
     "access": "public"
@@ -40,14 +40,14 @@
         "default": "./dist/index.cjs"
       }
     },
-    "./core": {
+    "./lite": {
       "import": {
-        "types": "./dist/core.d.ts",
-        "default": "./dist/core.js"
+        "types": "./dist/lite.d.ts",
+        "default": "./dist/lite.js"
       },
       "require": {
-        "types": "./dist/core.d.cts",
-        "default": "./dist/core.cjs"
+        "types": "./dist/lite.d.cts",
+        "default": "./dist/lite.cjs"
       }
     },
     "./source": {
@@ -60,16 +60,6 @@
         "default": "./dist/source.cjs"
       }
     },
-    "./experiments/inspect": {
-      "import": {
-        "types": "./dist/experiments/inspect.d.ts",
-        "default": "./dist/experiments/inspect.js"
-      },
-      "require": {
-        "types": "./dist/experiments/inspect.d.cts",
-        "default": "./dist/experiments/inspect.cjs"
-      }
-    },
     "./dist/*": "./dist/*.js",
     "./dist/*.js": "./dist/*.js",
     "./dist/*.cjs": "./dist/*.cjs"
@@ -86,13 +76,13 @@
     "LICENSE"
   ],
   "devDependencies": {
+    "@jridgewell/sourcemap-codec": "^1.5.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/node": "^20",
     "@types/react": "^19.0.4",
     "@types/react-dom": "^19.0.2",
     "@vitest/coverage-istanbul": "2.1.8",
-    "error-stack-parser-es": "^1.0.5",
     "esbuild": "^0.24.2",
     "happy-dom": "^15.11.7",
     "publint": "^0.2.12",
@@ -101,7 +91,6 @@
     "react-dom": "19.0.0",
     "react-reconciler": "^0.31.0",
     "react-refresh": "^0.16.0",
-    "source-map-js": "^1.2.1",
     "terser": "^5.36.0",
     "tsdown": "^0.12.3",
     "vitest": "^2.1.8"

package/dist/experiments/inspect.cjs

@@ -1,292 +0,0 @@
-/**
- * @license bippy
- *
- * Copyright (c) Aiden Bai
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-Object.defineProperty(exports, '__esModule', { value: true });
-const require_source = require('../source-BAPwFAwe.cjs');
-const require_src = require('../src-J3uOnLH2.cjs');
-const react = require_source.__toESM(require("react"));
-const react_dom = require_source.__toESM(require("react-dom"));
-const react_inspector = require_source.__toESM(require("react-inspector"));
-const react_jsx_runtime = require_source.__toESM(require("react/jsx-runtime"));
-
-//#region src/experiments/inspect.tsx
-const useImperativeHandlePolyfill = (ref, init, deps) => {
-	(0, react.useEffect)(() => {
-		if (ref) {
-			if (typeof ref === "function") ref(init());
-			else if (typeof ref === "object" && "current" in ref) ref.current = init();
-		}
-	}, deps);
-};
-const useImperativeHandle = react.useImperativeHandle || useImperativeHandlePolyfill;
-const throttle = (fn, wait) => {
-	let timeout = null;
-	return function(...args) {
-		if (!timeout) timeout = setTimeout(() => {
-			fn.apply(this, args);
-			timeout = null;
-		}, wait);
-	};
-};
-const theme = {
-	ARROW_ANIMATION_DURATION: "0",
-	ARROW_COLOR: "#A0A0A0",
-	ARROW_FONT_SIZE: 12,
-	ARROW_MARGIN_RIGHT: 3,
-	BASE_BACKGROUND_COLOR: "none",
-	BASE_COLOR: "#FFF",
-	BASE_FONT_FAMILY: "Menlo, monospace",
-	BASE_FONT_SIZE: "12px",
-	BASE_LINE_HEIGHT: 1.2,
-	HTML_ATTRIBUTE_NAME_COLOR: "#A0A0A0",
-	HTML_ATTRIBUTE_VALUE_COLOR: "#99FFE4",
-	HTML_COMMENT_COLOR: "#8b8b8b94",
-	HTML_DOCTYPE_COLOR: "#A0A0A0",
-	HTML_TAG_COLOR: "#FFC799",
-	HTML_TAGNAME_COLOR: "#FFC799",
-	HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
-	OBJECT_NAME_COLOR: "#FFC799",
-	OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
-	OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
-	OBJECT_VALUE_BOOLEAN_COLOR: "#FFC799",
-	OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "#FFC799",
-	OBJECT_VALUE_NULL_COLOR: "#A0A0A0",
-	OBJECT_VALUE_NUMBER_COLOR: "#FFC799",
-	OBJECT_VALUE_REGEXP_COLOR: "#FF8080",
-	OBJECT_VALUE_STRING_COLOR: "#99FFE4",
-	OBJECT_VALUE_SYMBOL_COLOR: "#FFC799",
-	OBJECT_VALUE_UNDEFINED_COLOR: "#A0A0A0",
-	TABLE_BORDER_COLOR: "#282828",
-	TABLE_DATA_BACKGROUND_IMAGE: "none",
-	TABLE_DATA_BACKGROUND_SIZE: "0",
-	TABLE_SORT_ICON_COLOR: "#A0A0A0",
-	TABLE_TH_BACKGROUND_COLOR: "#161616",
-	TABLE_TH_HOVER_COLOR: "#232323",
-	TREENODE_FONT_FAMILY: "Menlo, monospace",
-	TREENODE_FONT_SIZE: "11px",
-	TREENODE_LINE_HEIGHT: 1.2,
-	TREENODE_PADDING_LEFT: 12
-};
-const RawInspector = (0, react.forwardRef)(({ dangerouslyRunInProduction = false, enabled = true }, ref) => {
-	const [element, setElement] = (0, react.useState)(null);
-	const [currentFiber, setCurrentFiber] = (0, react.useState)(null);
-	const [currentFiberSource, setCurrentFiberSource] = (0, react.useState)(null);
-	const [rect, setRect] = (0, react.useState)(null);
-	const [isActive, setIsActive] = (0, react.useState)(true);
-	const [isEnabled, setIsEnabled] = (0, react.useState)(enabled);
-	const [position, setPosition] = (0, react.useState)({
-		left: 0,
-		top: 0
-	});
-	const currentCleanedFiber = (0, react.useMemo)(() => {
-		if (!currentFiber) return null;
-		const clonedFiber = { ...currentFiber };
-		for (const key in clonedFiber) {
-			const value = clonedFiber[key];
-			if (!value) delete clonedFiber[key];
-		}
-		return clonedFiber;
-	}, [currentFiber]);
-	useImperativeHandle(ref, () => ({
-		disable: () => {
-			setIsEnabled(false);
-			setElement(null);
-			setRect(null);
-		},
-		enable: () => setIsEnabled(true),
-		inspectElement: (element$1) => {
-			if (!isEnabled) return;
-			setElement(element$1);
-			setRect(element$1.getBoundingClientRect());
-		}
-	}));
-	(0, react.useEffect)(() => {
-		(async () => {
-			if (!element) return;
-			const fiber = require_src.getFiberFromHostInstance(element);
-			if (!fiber) return;
-			const latestFiber = require_src.getLatestFiber(fiber);
-			const source = await require_source.getFiberSource(latestFiber);
-			setCurrentFiber(latestFiber);
-			if (source) setCurrentFiberSource(source);
-		})();
-	}, [element]);
-	(0, react.useEffect)(() => {
-		const handleMouseMove = (event) => {
-			const isActive$1 = require_src.isInstrumentationActive() || require_src.hasRDTHook();
-			if (!isActive$1) {
-				setIsActive(false);
-				return;
-			}
-			if (!dangerouslyRunInProduction) {
-				const rdtHook = require_src.getRDTHook();
-				for (const renderer of rdtHook.renderers.values()) {
-					const buildType = require_src.detectReactBuildType(renderer);
-					if (buildType === "production") {
-						setIsActive(false);
-						return;
-					}
-				}
-			}
-			if (!isEnabled) {
-				setElement(null);
-				setRect(null);
-				return;
-			}
-			const element$1 = document.elementFromPoint(event.clientX, event.clientY);
-			if (!element$1) return;
-			setElement(element$1);
-			setRect(element$1.getBoundingClientRect());
-		};
-		const throttledMouseMove = throttle(handleMouseMove, 16);
-		document.addEventListener("mousemove", throttledMouseMove);
-		return () => document.removeEventListener("mousemove", throttledMouseMove);
-	}, [isEnabled, dangerouslyRunInProduction]);
-	(0, react.useEffect)(() => {
-		if (!rect) return;
-		const padding = 10;
-		const inspectorWidth = 400;
-		const inspectorHeight = 320;
-		let left = rect.left + rect.width + padding;
-		let top = rect.top;
-		if (left + inspectorWidth > window.innerWidth) left = Math.max(padding, rect.left - inspectorWidth - padding);
-		if (top >= rect.top && top <= rect.bottom) if (rect.bottom + inspectorHeight + padding <= window.innerHeight) top = rect.bottom + padding;
-		else if (rect.top - inspectorHeight - padding >= 0) top = rect.top - inspectorHeight - padding;
-		else top = window.innerHeight - inspectorHeight - padding;
-		top = Math.max(padding, Math.min(top, window.innerHeight - inspectorHeight - padding));
-		left = Math.max(padding, Math.min(left, window.innerWidth - inspectorWidth - padding));
-		setPosition({
-			left,
-			top
-		});
-	}, [rect]);
-	if (!rect || !isActive || !isEnabled) return null;
-	if (!currentFiber) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "inspector-container",
-			style: {
-				backgroundColor: "#101010",
-				border: "1px solid #444",
-				borderRadius: "8px",
-				boxShadow: "0 4px 8px rgba(0, 0, 0, 0.5)",
-				color: "#FFF",
-				height: "25ch",
-				left: position.left,
-				opacity: rect ? 1 : 0,
-				overflow: "auto",
-				padding: "1rem",
-				pointerEvents: rect ? "auto" : "none",
-				position: "fixed",
-				top: position.top,
-				transform: rect ? "translateY(0)" : "translateY(10px)",
-				transition: "all 150ms ease-in-out",
-				width: "30ch",
-				zIndex: 50
-			},
-			children: [currentFiber && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_inspector.Inspector, {
-				data: currentCleanedFiber,
-				expandLevel: 1,
-				table: false,
-				theme
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: {
-					alignItems: "center",
-					backgroundColor: "#101010",
-					borderBottomLeftRadius: "8px",
-					borderBottomRightRadius: "8px",
-					borderTop: "1px solid #555",
-					bottom: "0",
-					display: "flex",
-					gap: "1rem",
-					left: "0",
-					padding: "0.75rem 1rem",
-					position: "absolute",
-					right: "0",
-					zIndex: 1e3
-				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: {
-						backgroundColor: "#3a3a3a",
-						borderRadius: "4px",
-						color: "#FFF",
-						fontSize: "0.875rem",
-						padding: "0.25rem 0.5rem"
-					},
-					children: `<${require_src.getDisplayName(currentFiber.type) || "unknown"}>`
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: {
-						color: "#CCC",
-						fontSize: "0.75rem"
-					},
-					children: currentFiberSource ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-						currentFiberSource.fileName.split("/").slice(-2).join("/"),
-						" ",
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
-						"@ line ",
-						currentFiberSource.lineNumber,
-						", column",
-						" ",
-						currentFiberSource.columnNumber
-					] }) : null
-				})]
-			})]
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `
-          .inspector-container::-webkit-scrollbar {
-            width: 8px;
-          }
-          .inspector-container::-webkit-scrollbar-track {
-            background: #1E1E1E;
-            border-radius: 8px;
-          }
-          .inspector-container::-webkit-scrollbar-thumb {
-            background: #444;
-            border-radius: 8px;
-          }
-          .inspector-container::-webkit-scrollbar-thumb:hover {
-            background: #555;
-          }
-        ` }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-			border: "1px dashed #505050",
-			height: rect.height,
-			left: rect.left,
-			opacity: rect ? 1 : 0,
-			pointerEvents: "none",
-			position: "fixed",
-			top: rect.top,
-			transition: "all 150ms",
-			width: rect.width,
-			zIndex: 40
-		} })
-	] });
-});
-const Inspector = (0, react.forwardRef)((props, ref) => {
-	const [root, setRoot] = (0, react.useState)(null);
-	(0, react.useEffect)(() => {
-		const div = document.createElement("div");
-		document.documentElement.appendChild(div);
-		const shadowRoot = div.attachShadow({ mode: "open" });
-		setRoot(shadowRoot);
-		return () => {
-			document.documentElement.removeChild(div);
-		};
-	}, []);
-	if (!root) return null;
-	return react_dom.default.createPortal(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RawInspector, {
-		ref,
-		...props
-	}), root);
-});
-var inspect_default = Inspector;
-
-//#endregion
-exports.Inspector = Inspector;
-exports.RawInspector = RawInspector;
-exports.default = inspect_default;

package/dist/experiments/inspect.d.cts

@@ -1,18 +0,0 @@
-import React from "react";
-
-//#region src/experiments/inspect.d.ts
-interface InspectorHandle {
-  disable: () => void;
-  enable: () => void;
-  inspectElement: (element: Element) => void;
-}
-interface InspectorProps {
-  children?: React.ReactNode;
-  dangerouslyRunInProduction?: boolean;
-  enabled?: boolean;
-}
-declare const RawInspector: React.ForwardRefExoticComponent<InspectorProps & React.RefAttributes<InspectorHandle>>;
-declare const Inspector: React.ForwardRefExoticComponent<InspectorProps & React.RefAttributes<InspectorHandle>>;
-
-//#endregion
-export { Inspector, Inspector as default, InspectorHandle, InspectorProps, RawInspector };

package/dist/experiments/inspect.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-
-//#region src/experiments/inspect.d.ts
-interface InspectorHandle {
-  disable: () => void;
-  enable: () => void;
-  inspectElement: (element: Element) => void;
-}
-interface InspectorProps {
-  children?: React.ReactNode;
-  dangerouslyRunInProduction?: boolean;
-  enabled?: boolean;
-}
-declare const RawInspector: React.ForwardRefExoticComponent<InspectorProps & React.RefAttributes<InspectorHandle>>;
-declare const Inspector: React.ForwardRefExoticComponent<InspectorProps & React.RefAttributes<InspectorHandle>>;
-
-//#endregion
-export { Inspector, Inspector as default, InspectorHandle, InspectorProps, RawInspector };

package/dist/experiments/inspect.js

@@ -1,289 +0,0 @@
-/**
- * @license bippy
- *
- * Copyright (c) Aiden Bai
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { getFiberSource } from "../source-D2grjLFe.js";
-import { detectReactBuildType, getDisplayName, getFiberFromHostInstance, getLatestFiber, getRDTHook, hasRDTHook, isInstrumentationActive } from "../src-DnJsD_Sy.js";
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
-import ReactDOM from "react-dom";
-import { Inspector as Inspector$1 } from "react-inspector";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/experiments/inspect.tsx
-const useImperativeHandlePolyfill = (ref, init, deps) => {
-	useEffect(() => {
-		if (ref) {
-			if (typeof ref === "function") ref(init());
-			else if (typeof ref === "object" && "current" in ref) ref.current = init();
-		}
-	}, deps);
-};
-const useImperativeHandle$1 = useImperativeHandle || useImperativeHandlePolyfill;
-const throttle = (fn, wait) => {
-	let timeout = null;
-	return function(...args) {
-		if (!timeout) timeout = setTimeout(() => {
-			fn.apply(this, args);
-			timeout = null;
-		}, wait);
-	};
-};
-const theme = {
-	ARROW_ANIMATION_DURATION: "0",
-	ARROW_COLOR: "#A0A0A0",
-	ARROW_FONT_SIZE: 12,
-	ARROW_MARGIN_RIGHT: 3,
-	BASE_BACKGROUND_COLOR: "none",
-	BASE_COLOR: "#FFF",
-	BASE_FONT_FAMILY: "Menlo, monospace",
-	BASE_FONT_SIZE: "12px",
-	BASE_LINE_HEIGHT: 1.2,
-	HTML_ATTRIBUTE_NAME_COLOR: "#A0A0A0",
-	HTML_ATTRIBUTE_VALUE_COLOR: "#99FFE4",
-	HTML_COMMENT_COLOR: "#8b8b8b94",
-	HTML_DOCTYPE_COLOR: "#A0A0A0",
-	HTML_TAG_COLOR: "#FFC799",
-	HTML_TAGNAME_COLOR: "#FFC799",
-	HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
-	OBJECT_NAME_COLOR: "#FFC799",
-	OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
-	OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
-	OBJECT_VALUE_BOOLEAN_COLOR: "#FFC799",
-	OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "#FFC799",
-	OBJECT_VALUE_NULL_COLOR: "#A0A0A0",
-	OBJECT_VALUE_NUMBER_COLOR: "#FFC799",
-	OBJECT_VALUE_REGEXP_COLOR: "#FF8080",
-	OBJECT_VALUE_STRING_COLOR: "#99FFE4",
-	OBJECT_VALUE_SYMBOL_COLOR: "#FFC799",
-	OBJECT_VALUE_UNDEFINED_COLOR: "#A0A0A0",
-	TABLE_BORDER_COLOR: "#282828",
-	TABLE_DATA_BACKGROUND_IMAGE: "none",
-	TABLE_DATA_BACKGROUND_SIZE: "0",
-	TABLE_SORT_ICON_COLOR: "#A0A0A0",
-	TABLE_TH_BACKGROUND_COLOR: "#161616",
-	TABLE_TH_HOVER_COLOR: "#232323",
-	TREENODE_FONT_FAMILY: "Menlo, monospace",
-	TREENODE_FONT_SIZE: "11px",
-	TREENODE_LINE_HEIGHT: 1.2,
-	TREENODE_PADDING_LEFT: 12
-};
-const RawInspector = forwardRef(({ dangerouslyRunInProduction = false, enabled = true }, ref) => {
-	const [element, setElement] = useState(null);
-	const [currentFiber, setCurrentFiber] = useState(null);
-	const [currentFiberSource, setCurrentFiberSource] = useState(null);
-	const [rect, setRect] = useState(null);
-	const [isActive, setIsActive] = useState(true);
-	const [isEnabled, setIsEnabled] = useState(enabled);
-	const [position, setPosition] = useState({
-		left: 0,
-		top: 0
-	});
-	const currentCleanedFiber = useMemo(() => {
-		if (!currentFiber) return null;
-		const clonedFiber = { ...currentFiber };
-		for (const key in clonedFiber) {
-			const value = clonedFiber[key];
-			if (!value) delete clonedFiber[key];
-		}
-		return clonedFiber;
-	}, [currentFiber]);
-	useImperativeHandle$1(ref, () => ({
-		disable: () => {
-			setIsEnabled(false);
-			setElement(null);
-			setRect(null);
-		},
-		enable: () => setIsEnabled(true),
-		inspectElement: (element$1) => {
-			if (!isEnabled) return;
-			setElement(element$1);
-			setRect(element$1.getBoundingClientRect());
-		}
-	}));
-	useEffect(() => {
-		(async () => {
-			if (!element) return;
-			const fiber = getFiberFromHostInstance(element);
-			if (!fiber) return;
-			const latestFiber = getLatestFiber(fiber);
-			const source = await getFiberSource(latestFiber);
-			setCurrentFiber(latestFiber);
-			if (source) setCurrentFiberSource(source);
-		})();
-	}, [element]);
-	useEffect(() => {
-		const handleMouseMove = (event) => {
-			const isActive$1 = isInstrumentationActive() || hasRDTHook();
-			if (!isActive$1) {
-				setIsActive(false);
-				return;
-			}
-			if (!dangerouslyRunInProduction) {
-				const rdtHook = getRDTHook();
-				for (const renderer of rdtHook.renderers.values()) {
-					const buildType = detectReactBuildType(renderer);
-					if (buildType === "production") {
-						setIsActive(false);
-						return;
-					}
-				}
-			}
-			if (!isEnabled) {
-				setElement(null);
-				setRect(null);
-				return;
-			}
-			const element$1 = document.elementFromPoint(event.clientX, event.clientY);
-			if (!element$1) return;
-			setElement(element$1);
-			setRect(element$1.getBoundingClientRect());
-		};
-		const throttledMouseMove = throttle(handleMouseMove, 16);
-		document.addEventListener("mousemove", throttledMouseMove);
-		return () => document.removeEventListener("mousemove", throttledMouseMove);
-	}, [isEnabled, dangerouslyRunInProduction]);
-	useEffect(() => {
-		if (!rect) return;
-		const padding = 10;
-		const inspectorWidth = 400;
-		const inspectorHeight = 320;
-		let left = rect.left + rect.width + padding;
-		let top = rect.top;
-		if (left + inspectorWidth > window.innerWidth) left = Math.max(padding, rect.left - inspectorWidth - padding);
-		if (top >= rect.top && top <= rect.bottom) if (rect.bottom + inspectorHeight + padding <= window.innerHeight) top = rect.bottom + padding;
-		else if (rect.top - inspectorHeight - padding >= 0) top = rect.top - inspectorHeight - padding;
-		else top = window.innerHeight - inspectorHeight - padding;
-		top = Math.max(padding, Math.min(top, window.innerHeight - inspectorHeight - padding));
-		left = Math.max(padding, Math.min(left, window.innerWidth - inspectorWidth - padding));
-		setPosition({
-			left,
-			top
-		});
-	}, [rect]);
-	if (!rect || !isActive || !isEnabled) return null;
-	if (!currentFiber) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: "inspector-container",
-			style: {
-				backgroundColor: "#101010",
-				border: "1px solid #444",
-				borderRadius: "8px",
-				boxShadow: "0 4px 8px rgba(0, 0, 0, 0.5)",
-				color: "#FFF",
-				height: "25ch",
-				left: position.left,
-				opacity: rect ? 1 : 0,
-				overflow: "auto",
-				padding: "1rem",
-				pointerEvents: rect ? "auto" : "none",
-				position: "fixed",
-				top: position.top,
-				transform: rect ? "translateY(0)" : "translateY(10px)",
-				transition: "all 150ms ease-in-out",
-				width: "30ch",
-				zIndex: 50
-			},
-			children: [currentFiber && /* @__PURE__ */ jsx(Inspector$1, {
-				data: currentCleanedFiber,
-				expandLevel: 1,
-				table: false,
-				theme
-			}), /* @__PURE__ */ jsxs("div", {
-				style: {
-					alignItems: "center",
-					backgroundColor: "#101010",
-					borderBottomLeftRadius: "8px",
-					borderBottomRightRadius: "8px",
-					borderTop: "1px solid #555",
-					bottom: "0",
-					display: "flex",
-					gap: "1rem",
-					left: "0",
-					padding: "0.75rem 1rem",
-					position: "absolute",
-					right: "0",
-					zIndex: 1e3
-				},
-				children: [/* @__PURE__ */ jsx("div", {
-					style: {
-						backgroundColor: "#3a3a3a",
-						borderRadius: "4px",
-						color: "#FFF",
-						fontSize: "0.875rem",
-						padding: "0.25rem 0.5rem"
-					},
-					children: `<${getDisplayName(currentFiber.type) || "unknown"}>`
-				}), /* @__PURE__ */ jsx("div", {
-					style: {
-						color: "#CCC",
-						fontSize: "0.75rem"
-					},
-					children: currentFiberSource ? /* @__PURE__ */ jsxs(Fragment, { children: [
-						currentFiberSource.fileName.split("/").slice(-2).join("/"),
-						" ",
-						/* @__PURE__ */ jsx("br", {}),
-						"@ line ",
-						currentFiberSource.lineNumber,
-						", column",
-						" ",
-						currentFiberSource.columnNumber
-					] }) : null
-				})]
-			})]
-		}),
-		/* @__PURE__ */ jsx("style", { children: `
-          .inspector-container::-webkit-scrollbar {
-            width: 8px;
-          }
-          .inspector-container::-webkit-scrollbar-track {
-            background: #1E1E1E;
-            border-radius: 8px;
-          }
-          .inspector-container::-webkit-scrollbar-thumb {
-            background: #444;
-            border-radius: 8px;
-          }
-          .inspector-container::-webkit-scrollbar-thumb:hover {
-            background: #555;
-          }
-        ` }),
-		/* @__PURE__ */ jsx("div", { style: {
-			border: "1px dashed #505050",
-			height: rect.height,
-			left: rect.left,
-			opacity: rect ? 1 : 0,
-			pointerEvents: "none",
-			position: "fixed",
-			top: rect.top,
-			transition: "all 150ms",
-			width: rect.width,
-			zIndex: 40
-		} })
-	] });
-});
-const Inspector = forwardRef((props, ref) => {
-	const [root, setRoot] = useState(null);
-	useEffect(() => {
-		const div = document.createElement("div");
-		document.documentElement.appendChild(div);
-		const shadowRoot = div.attachShadow({ mode: "open" });
-		setRoot(shadowRoot);
-		return () => {
-			document.documentElement.removeChild(div);
-		};
-	}, []);
-	if (!root) return null;
-	return ReactDOM.createPortal(/* @__PURE__ */ jsx(RawInspector, {
-		ref,
-		...props
-	}), root);
-});
-var inspect_default = Inspector;
-
-//#endregion
-export { Inspector, RawInspector, inspect_default as default };