react-boxmodel-inspector 1.0.0

package/src/BoxModel.jsx

@@ -0,0 +1,743 @@
+/**
+ * BoxModel.jsx
+ *
+ * Usage:
+ *   import BoxModelInspector from './BoxModel'
+ *   
+ *   function App() {
+ *     return (
+ *       <BoxModelInspector>
+ *         <YourApp />
+ *       </BoxModelInspector>
+ *     )
+ *   }
+ *
+ * • Press ` (backtick) to toggle inspector mode
+ * • Long-press any element to inspect it
+ * • Press ESC to close
+ */
+
+import { useRef, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+/* ─── palette ─────────────────────────────────────────────────────────────── */
+const C = {
+    margin: { fill: "rgba(232,168,56,0.09)", stroke: "rgba(232,168,56,0.75)", text: "#e8a838" },
+    padding: { fill: "rgba(93,168,93,0.09)", stroke: "rgba(93,168,93,0.75)", text: "#5da85d" },
+    content: { fill: "rgba(167,139,250,0.12)", stroke: "rgba(167,139,250,0.75)", text: "#a78bfa" },
+};
+
+/* ─── edge label ──────────────────────────────────────────────────────────── */
+function EL({ v, style, color }) {
+    if (!v) return null;
+    return (
+        <div style={{
+            position: "absolute",
+            fontSize: 9, fontFamily: "monospace", fontWeight: 700,
+            color, background: "rgba(0,0,0,0.65)",
+            border: `1px solid ${color}44`, borderRadius: 3,
+            padding: "0 3px", lineHeight: "15px",
+            pointerEvents: "none",
+            transform: "translate(-50%,-50%)",
+            whiteSpace: "nowrap", zIndex: 100001,
+            ...style,
+        }}>
+            {v}px
+        </div>
+    );
+}
+
+/* ─── box overlay ─────────────────────────────────────────────────────────── */
+function BoxOverlay({ box, rect, tagName }) {
+    const { width: w, height: h, margin: m, padding: p, border: b } = box;
+    const f = n => n % 1 === 0 ? String(n) : n.toFixed(1);
+    const cW = Math.max(0, w - p.left - p.right - b.left - b.right);
+    const cH = Math.max(0, h - p.top - p.bottom - b.top - b.bottom);
+
+    const containerStyle = {
+        position: "fixed",
+        left: rect.left - m.left,
+        top: rect.top - m.top,
+        width: w + m.left + m.right,
+        height: h + m.top + m.bottom,
+        pointerEvents: "none",
+        zIndex: 100000,
+    };
+
+    return (
+        <div style={containerStyle}>
+            {/* Tag label */}
+            <div style={{
+                position: "absolute",
+                top: -18, left: 0,
+                fontSize: 10, fontWeight: 700, fontFamily: "monospace",
+                letterSpacing: "0.06em", color: "#fff",
+                background: "#4a90d9", borderRadius: "4px 4px 4px 0",
+                padding: "1px 7px", lineHeight: "17px",
+                zIndex: 100003, pointerEvents: "none",
+            }}>
+                {tagName}
+            </div>
+
+            {/* margin */}
+            <div style={{
+                position: "absolute",
+                top: 0, left: 0,
+                width: "100%", height: "100%",
+                background: C.margin.fill, border: `1.5px dashed ${C.margin.stroke}`,
+                boxSizing: "border-box",
+            }}>
+                <EL v={f(m.top)} color={C.margin.text} style={{ top: m.top / 2, left: "50%" }} />
+                <EL v={f(m.bottom)} color={C.margin.text} style={{ top: m.top + h + m.bottom / 2, left: "50%" }} />
+                <EL v={f(m.left)} color={C.margin.text} style={{ top: "50%", left: m.left / 2 }} />
+                <EL v={f(m.right)} color={C.margin.text} style={{ top: "50%", left: m.left + w + m.right / 2 }} />
+            </div>
+
+            {/* padding */}
+            <div style={{
+                position: "absolute",
+                top: m.top, left: m.left,
+                width: w, height: h,
+                background: C.padding.fill, border: `1.5px dashed ${C.padding.stroke}`,
+                boxSizing: "border-box",
+            }}>
+                <EL v={f(p.top)} color={C.padding.text} style={{ top: p.top / 2, left: "50%" }} />
+                <EL v={f(p.bottom)} color={C.padding.text} style={{ top: h - p.bottom / 2, left: "50%" }} />
+                <EL v={f(p.left)} color={C.padding.text} style={{ top: "50%", left: p.left / 2 }} />
+                <EL v={f(p.right)} color={C.padding.text} style={{ top: "50%", left: w - p.right / 2 }} />
+            </div>
+
+            {/* content */}
+            <div style={{
+                position: "absolute",
+                top: m.top + p.top + b.top,
+                left: m.left + p.left + b.left,
+                width: cW, height: cH,
+                background: C.content.fill, border: `1.5px solid ${C.content.stroke}`,
+                boxSizing: "border-box",
+            }}>
+                <div style={{
+                    position: "absolute", bottom: 2, right: 3,
+                    fontSize: 9, fontFamily: "monospace", fontWeight: 700,
+                    color: C.content.text,
+                }}>
+                    {Math.round(cW)}×{Math.round(cH)}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/* ─── CSS property groups ─────────────────────────────────────────────────── */
+const EXTRA_GROUPS = [
+    {
+        key: "typography",
+        label: "Typography",
+        color: "#f472b6",
+        props: [
+            "fontFamily", "fontSize", "fontWeight", "fontStyle",
+            "lineHeight", "letterSpacing", "textAlign", "textDecoration",
+            "textTransform", "whiteSpace", "wordBreak",
+        ],
+    },
+    {
+        key: "color",
+        label: "Color & Background",
+        color: "#fb923c",
+        props: [
+            "color", "backgroundColor", "backgroundImage",
+            "opacity", "visibility",
+        ],
+    },
+    {
+        key: "layout",
+        label: "Layout",
+        color: "#34d399",
+        props: [
+            "display", "position", "top", "right", "bottom", "left",
+            "float", "clear", "zIndex", "overflow", "overflowX", "overflowY",
+        ],
+    },
+    {
+        key: "flex",
+        label: "Flex / Grid",
+        color: "#60a5fa",
+        props: [
+            "flexDirection", "flexWrap", "justifyContent", "alignItems",
+            "alignContent", "flex", "flexGrow", "flexShrink", "flexBasis",
+            "gap", "gridTemplateColumns", "gridTemplateRows", "gridArea",
+        ],
+    },
+    {
+        key: "box",
+        label: "Box",
+        color: "#a78bfa",
+        props: [
+            "width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight",
+            "boxSizing", "boxShadow", "borderRadius", "outline", "cursor",
+        ],
+    },
+    {
+        key: "transform",
+        label: "Transform & Animation",
+        color: "#e879f9",
+        props: [
+            "transform", "transition", "animation",
+            "willChange", "pointerEvents",
+        ],
+    },
+];
+
+function camelToKebab(str) {
+    return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+
+function PropRow({ name, value }) {
+    if (!value || value === "none" || value === "normal" || value === "auto" || value === "0px") return null;
+    return (
+        <div style={{
+            display: "flex", gap: 6, alignItems: "baseline",
+            padding: "2px 0",
+            borderBottom: "1px solid rgba(255,255,255,0.04)",
+        }}>
+            <span style={{
+                fontSize: 10, color: "rgba(255,255,255,0.35)",
+                fontFamily: "monospace", flexShrink: 0, minWidth: 140,
+            }}>
+                {camelToKebab(name)}
+            </span>
+            <span style={{
+                fontSize: 10, color: "#e2e8f0",
+                fontFamily: "monospace",
+                wordBreak: "break-all",
+                maxWidth: 180,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+            }}
+                title={value}
+            >
+                {value}
+            </span>
+        </div>
+    );
+}
+
+function ExtraSection({ computed }) {
+    const [openGroups, setOpenGroups] = useState({});
+    const toggle = (key) => setOpenGroups(prev => ({ ...prev, [key]: !prev[key] }));
+
+    return (
+        <div style={{ marginTop: 8, borderTop: "1px solid rgba(255,255,255,0.07)", paddingTop: 8 }}>
+            {EXTRA_GROUPS.map(({ key, label, color, props }) => {
+                const entries = props
+                    .map(p => ({ name: p, value: computed[p] }))
+                    .filter(({ value }) => value && value !== "none" && value !== "normal" && value !== "auto" && value !== "0px");
+
+                if (entries.length === 0) return null;
+
+                const open = openGroups[key];
+                return (
+                    <div key={key} style={{ marginBottom: 4 }}>
+                        <div
+                            onClick={() => toggle(key)}
+                            style={{
+                                display: "flex", alignItems: "center", gap: 6,
+                                cursor: "pointer", padding: "3px 0",
+                            }}
+                        >
+                            <span style={{
+                                width: 7, height: 7, borderRadius: "50%",
+                                background: color, flexShrink: 0,
+                                boxShadow: `0 0 4px ${color}88`,
+                            }} />
+                            <span style={{ fontSize: 10, color: "rgba(255,255,255,0.55)", flex: 1 }}>
+                                {label}
+                            </span>
+                            <span style={{
+                                fontSize: 10,
+                                color: "rgba(255,255,255,0.25)",
+                                marginRight: 2,
+                                transition: "transform 0.15s",
+                                display: "inline-block",
+                                transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                            }}>
+                                ▾
+                            </span>
+                        </div>
+
+                        {open && (
+                            <div style={{ paddingLeft: 13, paddingTop: 3 }}>
+                                {entries.map(({ name, value }) => (
+                                    <PropRow key={name} name={name} value={value} />
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
+/* ─── draggable panel ─────────────────────────────────────────────────────── */
+function Panel({ box, tagName, initialPos, onClose }) {
+    const [pos, setPos] = useState(initialPos);
+    const [expanded, setExp] = useState(false);
+    const dragging = useRef(false);
+    const offset = useRef({ x: 0, y: 0 });
+
+    const onMouseDown = (e) => {
+        if (e.target.closest("[data-nodrag]")) return;
+        dragging.current = true;
+        offset.current = { x: e.clientX - pos.x, y: e.clientY - pos.y };
+        e.preventDefault();
+    };
+
+    useEffect(() => {
+        const move = (e) => {
+            if (!dragging.current) return;
+            setPos({ x: e.clientX - offset.current.x, y: e.clientY - offset.current.y });
+        };
+        const up = () => { dragging.current = false; };
+        window.addEventListener("mousemove", move);
+        window.addEventListener("mouseup", up);
+        return () => {
+            window.removeEventListener("mousemove", move);
+            window.removeEventListener("mouseup", up);
+        };
+    }, []);
+
+    if (!box) return null;
+
+    const { margin: m, padding: p, border: b, width, height, computed } = box;
+    const f = n => n % 1 === 0 ? String(n) : n.toFixed(1);
+    const cW = Math.round(Math.max(0, width - p.left - p.right - b.left - b.right));
+    const cH = Math.round(Math.max(0, height - p.top - p.bottom - b.top - b.bottom));
+
+    const rows = [
+        { key: "margin", color: C.margin.text, label: "margin", vals: [m.top, m.right, m.bottom, m.left] },
+        { key: "border", color: "#4a90d9", label: "border", vals: [b.top, b.right, b.bottom, b.left] },
+        { key: "padding", color: C.padding.text, label: "padding", vals: [p.top, p.right, p.bottom, p.left] },
+    ];
+
+    return (
+        <div
+            onMouseDown={onMouseDown}
+            style={{
+                position: "fixed", left: pos.x, top: pos.y,
+                zIndex: 999999, cursor: "grab", userSelect: "none",
+                background: "rgba(10,11,16,0.97)",
+                border: "1px solid rgba(255,255,255,0.12)",
+                borderRadius: 8, padding: "10px 14px 10px",
+                minWidth: 260, maxWidth: 340,
+                fontFamily: "'SF Mono','Fira Code','Cascadia Code',monospace",
+                boxShadow: "0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3)",
+                whiteSpace: "nowrap",
+                maxHeight: "80vh", overflowY: "auto",
+                scrollbarWidth: "thin", scrollbarColor: "#333 transparent",
+            }}
+        >
+            {/* header */}
+            <div style={{
+                display: "flex", justifyContent: "space-between", alignItems: "center",
+                marginBottom: 8, paddingBottom: 7,
+                borderBottom: "1px solid rgba(255,255,255,0.08)",
+            }}>
+                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                    <span style={{
+                        fontSize: 10, fontWeight: 700, color: "#4a90d9",
+                        background: "rgba(74,144,217,0.15)",
+                        border: "1px solid rgba(74,144,217,0.35)",
+                        borderRadius: 4, padding: "0 6px", lineHeight: "18px",
+                    }}>
+                        {tagName}
+                    </span>
+                    <span style={{ fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.28)" }}>
+                        box model
+                    </span>
+                </div>
+                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                    <span style={{ fontSize: 9, color: "rgba(255,255,255,0.18)" }}>T · R · B · L</span>
+                    <span
+                        data-nodrag="true"
+                        onClick={onClose}
+                        title="Close (ESC)"
+                        style={{
+                            cursor: "pointer", color: "rgba(255,255,255,0.35)",
+                            fontSize: 14, lineHeight: 1, padding: "0 2px",
+                            borderRadius: 3, userSelect: "none",
+                        }}
+                        onMouseEnter={e => e.currentTarget.style.color = "#ff6b6b"}
+                        onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.35)"}
+                    >✕</span>
+                </div>
+            </div>
+
+            {rows.map(({ key, color, label: rowLabel, vals }) => {
+                const allZero = vals.every(v => v === 0);
+                return (
+                    <div key={key} style={{
+                        display: "flex", alignItems: "center", gap: 8,
+                        marginBottom: 5, opacity: allZero ? 0.25 : 1,
+                    }}>
+                        <span style={{
+                            width: 7, height: 7, borderRadius: "50%",
+                            background: color, flexShrink: 0,
+                            boxShadow: `0 0 5px ${color}88`,
+                        }} />
+                        <span style={{ fontSize: 10, color: "rgba(255,255,255,0.35)", width: 46, flexShrink: 0 }}>
+                            {rowLabel}
+                        </span>
+                        <div style={{ display: "flex", gap: 3 }}>
+                            {vals.map((v, i) => (
+                                <span key={i} style={{
+                                    fontSize: 11, fontWeight: 600,
+                                    color: v === 0 ? "rgba(255,255,255,0.18)" : color,
+                                    background: v === 0 ? "transparent" : `${color}18`,
+                                    border: `1px solid ${v === 0 ? "rgba(255,255,255,0.05)" : `${color}44`}`,
+                                    borderRadius: 4, padding: "1px 5px",
+                                    minWidth: 32, textAlign: "center",
+                                }}>
+                                    {f(v)}
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                );
+            })}
+
+            <div style={{
+                display: "flex", alignItems: "center", gap: 8,
+                marginTop: 8, paddingTop: 7,
+                borderTop: "1px solid rgba(255,255,255,0.07)",
+            }}>
+                <span style={{
+                    width: 7, height: 7, borderRadius: 2,
+                    background: C.content.text, flexShrink: 0,
+                    boxShadow: `0 0 5px ${C.content.text}88`,
+                }} />
+                <span style={{ fontSize: 10, color: "rgba(255,255,255,0.35)", width: 46 }}>content</span>
+                <span style={{ fontSize: 12, fontWeight: 600, color: C.content.text }}>
+                    {cW} × {cH} px
+                </span>
+            </div>
+
+            <div
+                data-nodrag="true"
+                onClick={() => setExp(v => !v)}
+                style={{
+                    display: "flex", alignItems: "center", justifyContent: "center",
+                    gap: 5, marginTop: 10, paddingTop: 8,
+                    borderTop: "1px solid rgba(255,255,255,0.07)",
+                    cursor: "pointer", color: "rgba(255,255,255,0.35)",
+                    fontSize: 10, letterSpacing: "0.05em",
+                }}
+            >
+                <span>All properties</span>
+                <span style={{
+                    display: "inline-block",
+                    transition: "transform 0.2s",
+                    transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                    fontSize: 11,
+                }}>
+                    ▾
+                </span>
+            </div>
+
+            {expanded && computed && <ExtraSection computed={computed} />}
+
+            <div style={{
+                marginTop: 8, paddingTop: 6,
+                borderTop: "1px solid rgba(255,255,255,0.05)",
+                fontSize: 9, color: "rgba(255,255,255,0.12)",
+                textAlign: "center", letterSpacing: "0.05em",
+            }}>
+                ⠿ drag to move · ESC to close
+            </div>
+        </div>
+    );
+}
+
+/* ─── long-press ripple feedback ──────────────────────────────────────────── */
+function LongPressIndicator({ x, y, progress }) {
+    if (progress === 0) return null;
+
+    return createPortal(
+        <div style={{
+            position: "fixed",
+            left: x, top: y,
+            width: 0, height: 0,
+            pointerEvents: "none",
+            zIndex: 99999,
+        }}>
+            <div style={{
+                position: "absolute",
+                top: "50%", left: "50%",
+                width: 60, height: 60,
+                borderRadius: "50%",
+                background: `rgba(74,144,217,${0.1 + progress * 0.2})`,
+                border: `2px solid rgba(74,144,217,${0.3 + progress * 0.5})`,
+                transform: `translate(-50%, -50%) scale(${progress})`,
+                transition: "transform 0.05s linear",
+            }} />
+        </div>,
+        document.body
+    );
+}
+
+/* ─── main inspector component ────────────────────────────────────────────── */
+export default function BoxModelInspector({
+    children,
+    longPressDuration = 500,
+    toggleKey = "`"
+}) {
+    const [active, setActive] = useState(false);
+    const [target, setTarget] = useState(null);
+    const [box, setBox] = useState(null);
+    const [rect, setRect] = useState(null);
+    const [panelPos, setPanelPos] = useState(null);
+
+    const [longPressState, setLongPressState] = useState({ active: false, x: 0, y: 0, progress: 0 });
+
+    const timerRef = useRef(null);
+    const progressIntervalRef = useRef(null);
+
+    // Read box model from element
+    const readBox = (el) => {
+        if (!el) return;
+        const s = getComputedStyle(el);
+        const r = el.getBoundingClientRect();
+
+        const computed = {};
+        EXTRA_GROUPS.forEach(({ props }) => {
+            props.forEach(prop => {
+                computed[prop] = s[prop];
+            });
+        });
+
+        setBox({
+            width: r.width,
+            height: r.height,
+            margin: {
+                top: parseFloat(s.marginTop),
+                right: parseFloat(s.marginRight),
+                bottom: parseFloat(s.marginBottom),
+                left: parseFloat(s.marginLeft),
+            },
+            padding: {
+                top: parseFloat(s.paddingTop),
+                right: parseFloat(s.paddingRight),
+                bottom: parseFloat(s.paddingBottom),
+                left: parseFloat(s.paddingLeft),
+            },
+            border: {
+                top: parseFloat(s.borderTopWidth),
+                right: parseFloat(s.borderRightWidth),
+                bottom: parseFloat(s.borderBottomWidth),
+                left: parseFloat(s.borderLeftWidth),
+            },
+            computed,
+        });
+
+        setRect(r);
+        setPanelPos({
+            x: Math.min(r.right + 24, window.innerWidth - 320),
+            y: Math.max(20, r.top),
+        });
+    };
+
+    // Start long-press
+    const handlePointerDown = (e) => {
+        if (!active) return;
+        if (e.target.closest('[data-boxmodel-ui]')) return;
+
+        const el = e.target;
+
+        setLongPressState({
+            active: true,
+            x: e.clientX,
+            y: e.clientY,
+            progress: 0,
+        });
+
+        const startTime = Date.now();
+
+        progressIntervalRef.current = setInterval(() => {
+            const elapsed = Date.now() - startTime;
+            const progress = Math.min(elapsed / longPressDuration, 1);
+            setLongPressState(prev => ({ ...prev, progress }));
+        }, 16);
+
+        timerRef.current = setTimeout(() => {
+            setLongPressState({ active: false, x: 0, y: 0, progress: 0 });
+            clearInterval(progressIntervalRef.current);
+
+            // Set new target (replaces any previous one)
+            setTarget(el);
+            readBox(el);
+        }, longPressDuration);
+    };
+
+    // Cancel long-press
+    const handlePointerUp = () => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        if (progressIntervalRef.current) {
+            clearInterval(progressIntervalRef.current);
+            progressIntervalRef.current = null;
+        }
+        setLongPressState({ active: false, x: 0, y: 0, progress: 0 });
+    };
+
+    const handlePointerMove = (e) => {
+        if (!longPressState.active) return;
+
+        const dx = e.clientX - longPressState.x;
+        const dy = e.clientY - longPressState.y;
+        if (Math.sqrt(dx * dx + dy * dy) > 10) {
+            handlePointerUp();
+        }
+    };
+
+    // Close inspector
+    const close = () => {
+        setTarget(null);
+        setBox(null);
+        setRect(null);
+        setPanelPos(null);
+    };
+
+    // Keyboard shortcuts
+    useEffect(() => {
+        const handleKey = (e) => {
+            // ESC to close
+            if (e.key === "Escape" && target) {
+                close();
+            }
+            // Toggle key (`) to activate/deactivate
+            else if (e.key === toggleKey && !e.repeat) {
+                setActive(v => {
+                    const newVal = !v;
+                    if (!newVal && target) close(); // Close if deactivating
+                    return newVal;
+                });
+            }
+        };
+
+        window.addEventListener("keydown", handleKey);
+        return () => window.removeEventListener("keydown", handleKey);
+    }, [target, toggleKey]);
+
+    // Live updates
+    useEffect(() => {
+        if (!target) return;
+
+        const update = () => readBox(target);
+
+        const ro = new ResizeObserver(update);
+        ro.observe(target);
+
+        const mo = new MutationObserver(update);
+        mo.observe(target, { attributes: true, attributeFilter: ["style", "class"] });
+
+        const handleScroll = () => update();
+        const handleResize = () => update();
+
+        window.addEventListener("scroll", handleScroll, { passive: true });
+        window.addEventListener("resize", handleResize);
+
+        return () => {
+            ro.disconnect();
+            mo.disconnect();
+            window.removeEventListener("scroll", handleScroll);
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [target]);
+
+    // Event listeners for long-press
+    useEffect(() => {
+        if (!active) {
+            handlePointerUp();
+            return;
+        }
+
+        window.addEventListener("pointerdown", handlePointerDown, true);
+        window.addEventListener("pointerup", handlePointerUp, true);
+        window.addEventListener("pointermove", handlePointerMove, true);
+
+        return () => {
+            window.removeEventListener("pointerdown", handlePointerDown, true);
+            window.removeEventListener("pointerup", handlePointerUp, true);
+            window.removeEventListener("pointermove", handlePointerMove, true);
+        };
+    });
+
+    // Get element tag name
+    const tagName = target
+        ? `${target.tagName.toLowerCase()}${target.id ? `#${target.id}` : ""}${target.className ? `.${target.className.split(" ")[0]}` : ""}`
+        : "";
+
+    return (
+        <>
+            {children}
+
+            {/* Active indicator */}
+            {active && createPortal(
+                <div
+                    data-boxmodel-ui="true"
+                    style={{
+                        position: "fixed",
+                        top: 12, left: "50%",
+                        transform: "translateX(-50%)",
+                        zIndex: 999998,
+                        background: "rgba(74,144,217,0.95)",
+                        color: "#fff",
+                        fontSize: 11,
+                        fontFamily: "monospace",
+                        padding: "6px 14px",
+                        borderRadius: 6,
+                        boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+                        pointerEvents: "none",
+                        letterSpacing: "0.03em",
+                    }}
+                >
+                    🔍 Inspector active · Long-press any element · Press <kbd style={{
+                        background: "rgba(255,255,255,0.2)",
+                        padding: "1px 5px",
+                        borderRadius: 3,
+                        fontWeight: 700,
+                    }}>{toggleKey}</kbd> to toggle
+                </div>,
+                document.body
+            )}
+
+            {/* Long-press indicator */}
+            {longPressState.progress > 0 && (
+                <LongPressIndicator
+                    x={longPressState.x}
+                    y={longPressState.y}
+                    progress={longPressState.progress}
+                />
+            )}
+
+            {/* Overlay - ONLY ONE at a time */}
+            {target && box && rect && createPortal(
+                <div data-boxmodel-ui="true">
+                    <BoxOverlay box={box} rect={rect} tagName={tagName} />
+                </div>,
+                document.body
+            )}
+
+            {/* Panel - ONLY ONE at a time */}
+            {target && box && panelPos && createPortal(
+                <div data-boxmodel-ui="true">
+                    <Panel box={box} tagName={tagName} initialPos={panelPos} onClose={close} />
+                </div>,
+                document.body
+            )}
+        </>
+    );
+}