react-boxmodel-inspector 1.0.0

package/dist/react-boxmodel-inspector.es.js

@@ -0,0 +1,737 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+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" }
+};
+function EL({ v, style, color }) {
+  if (!v) return null;
+  return /* @__PURE__ */ jsxs("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
+  }, children: [
+    v,
+    "px"
+  ] });
+}
+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: 1e5
+  };
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle, children: [
+    /* @__PURE__ */ jsx("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"
+    }, children: tagName }),
+    /* @__PURE__ */ jsxs("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"
+    }, children: [
+      /* @__PURE__ */ jsx(EL, { v: f(m.top), color: C.margin.text, style: { top: m.top / 2, left: "50%" } }),
+      /* @__PURE__ */ jsx(EL, { v: f(m.bottom), color: C.margin.text, style: { top: m.top + h + m.bottom / 2, left: "50%" } }),
+      /* @__PURE__ */ jsx(EL, { v: f(m.left), color: C.margin.text, style: { top: "50%", left: m.left / 2 } }),
+      /* @__PURE__ */ jsx(EL, { v: f(m.right), color: C.margin.text, style: { top: "50%", left: m.left + w + m.right / 2 } })
+    ] }),
+    /* @__PURE__ */ jsxs("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"
+    }, children: [
+      /* @__PURE__ */ jsx(EL, { v: f(p.top), color: C.padding.text, style: { top: p.top / 2, left: "50%" } }),
+      /* @__PURE__ */ jsx(EL, { v: f(p.bottom), color: C.padding.text, style: { top: h - p.bottom / 2, left: "50%" } }),
+      /* @__PURE__ */ jsx(EL, { v: f(p.left), color: C.padding.text, style: { top: "50%", left: p.left / 2 } }),
+      /* @__PURE__ */ jsx(EL, { v: f(p.right), color: C.padding.text, style: { top: "50%", left: w - p.right / 2 } })
+    ] }),
+    /* @__PURE__ */ jsx("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"
+    }, children: /* @__PURE__ */ jsxs("div", { style: {
+      position: "absolute",
+      bottom: 2,
+      right: 3,
+      fontSize: 9,
+      fontFamily: "monospace",
+      fontWeight: 700,
+      color: C.content.text
+    }, children: [
+      Math.round(cW),
+      "×",
+      Math.round(cH)
+    ] }) })
+  ] });
+}
+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 /* @__PURE__ */ jsxs("div", { style: {
+    display: "flex",
+    gap: 6,
+    alignItems: "baseline",
+    padding: "2px 0",
+    borderBottom: "1px solid rgba(255,255,255,0.04)"
+  }, children: [
+    /* @__PURE__ */ jsx("span", { style: {
+      fontSize: 10,
+      color: "rgba(255,255,255,0.35)",
+      fontFamily: "monospace",
+      flexShrink: 0,
+      minWidth: 140
+    }, children: camelToKebab(name) }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          fontSize: 10,
+          color: "#e2e8f0",
+          fontFamily: "monospace",
+          wordBreak: "break-all",
+          maxWidth: 180,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        title: value,
+        children: value
+      }
+    )
+  ] });
+}
+function ExtraSection({ computed }) {
+  const [openGroups, setOpenGroups] = useState({});
+  const toggle = (key) => setOpenGroups((prev) => ({ ...prev, [key]: !prev[key] }));
+  return /* @__PURE__ */ jsx("div", { style: { marginTop: 8, borderTop: "1px solid rgba(255,255,255,0.07)", paddingTop: 8 }, children: 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 /* @__PURE__ */ jsxs("div", { style: { marginBottom: 4 }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: () => toggle(key),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            cursor: "pointer",
+            padding: "3px 0"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: {
+              width: 7,
+              height: 7,
+              borderRadius: "50%",
+              background: color,
+              flexShrink: 0,
+              boxShadow: `0 0 4px ${color}88`
+            } }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.55)", flex: 1 }, children: label }),
+            /* @__PURE__ */ jsx("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)"
+            }, children: "▾" })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsx("div", { style: { paddingLeft: 13, paddingTop: 3 }, children: entries.map(({ name, value }) => /* @__PURE__ */ jsx(PropRow, { name, value }, name)) })
+    ] }, key);
+  }) });
+}
+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 /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: 8,
+          paddingBottom: 7,
+          borderBottom: "1px solid rgba(255,255,255,0.08)"
+        }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+            /* @__PURE__ */ jsx("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"
+            }, children: tagName }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.28)" }, children: "box model" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.18)" }, children: "T · R · B · L" }),
+            /* @__PURE__ */ jsx(
+              "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)",
+                children: "✕"
+              }
+            )
+          ] })
+        ] }),
+        rows.map(({ key, color, label: rowLabel, vals }) => {
+          const allZero = vals.every((v) => v === 0);
+          return /* @__PURE__ */ jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            marginBottom: 5,
+            opacity: allZero ? 0.25 : 1
+          }, children: [
+            /* @__PURE__ */ jsx("span", { style: {
+              width: 7,
+              height: 7,
+              borderRadius: "50%",
+              background: color,
+              flexShrink: 0,
+              boxShadow: `0 0 5px ${color}88`
+            } }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.35)", width: 46, flexShrink: 0 }, children: rowLabel }),
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 3 }, children: vals.map((v, i) => /* @__PURE__ */ jsx("span", { 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"
+            }, children: f(v) }, i)) })
+          ] }, key);
+        }),
+        /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          marginTop: 8,
+          paddingTop: 7,
+          borderTop: "1px solid rgba(255,255,255,0.07)"
+        }, children: [
+          /* @__PURE__ */ jsx("span", { style: {
+            width: 7,
+            height: 7,
+            borderRadius: 2,
+            background: C.content.text,
+            flexShrink: 0,
+            boxShadow: `0 0 5px ${C.content.text}88`
+          } }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.35)", width: 46 }, children: "content" }),
+          /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, fontWeight: 600, color: C.content.text }, children: [
+            cW,
+            " × ",
+            cH,
+            " px"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "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"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "All properties" }),
+              /* @__PURE__ */ jsx("span", { style: {
+                display: "inline-block",
+                transition: "transform 0.2s",
+                transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                fontSize: 11
+              }, children: "▾" })
+            ]
+          }
+        ),
+        expanded && computed && /* @__PURE__ */ jsx(ExtraSection, { computed }),
+        /* @__PURE__ */ jsx("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"
+        }, children: "⠿ drag to move · ESC to close" })
+      ]
+    }
+  );
+}
+function LongPressIndicator({ x, y, progress }) {
+  if (progress === 0) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { style: {
+      position: "fixed",
+      left: x,
+      top: y,
+      width: 0,
+      height: 0,
+      pointerEvents: "none",
+      zIndex: 99999
+    }, children: /* @__PURE__ */ jsx("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"
+    } }) }),
+    document.body
+  );
+}
+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);
+  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)
+    });
+  };
+  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);
+      setTarget(el);
+      readBox(el);
+    }, longPressDuration);
+  };
+  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();
+    }
+  };
+  const close = () => {
+    setTarget(null);
+    setBox(null);
+    setRect(null);
+    setPanelPos(null);
+  };
+  useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape" && target) {
+        close();
+      } else if (e.key === toggleKey && !e.repeat) {
+        setActive((v) => {
+          const newVal = !v;
+          if (!newVal && target) close();
+          return newVal;
+        });
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [target, toggleKey]);
+  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]);
+  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);
+    };
+  });
+  const tagName = target ? `${target.tagName.toLowerCase()}${target.id ? `#${target.id}` : ""}${target.className ? `.${target.className.split(" ")[0]}` : ""}` : "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    active && createPortal(
+      /* @__PURE__ */ jsxs(
+        "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"
+          },
+          children: [
+            "🔍 Inspector active · Long-press any element · Press ",
+            /* @__PURE__ */ jsx("kbd", { style: {
+              background: "rgba(255,255,255,0.2)",
+              padding: "1px 5px",
+              borderRadius: 3,
+              fontWeight: 700
+            }, children: toggleKey }),
+            " to toggle"
+          ]
+        }
+      ),
+      document.body
+    ),
+    longPressState.progress > 0 && /* @__PURE__ */ jsx(
+      LongPressIndicator,
+      {
+        x: longPressState.x,
+        y: longPressState.y,
+        progress: longPressState.progress
+      }
+    ),
+    target && box && rect && createPortal(
+      /* @__PURE__ */ jsx("div", { "data-boxmodel-ui": "true", children: /* @__PURE__ */ jsx(BoxOverlay, { box, rect, tagName }) }),
+      document.body
+    ),
+    target && box && panelPos && createPortal(
+      /* @__PURE__ */ jsx("div", { "data-boxmodel-ui": "true", children: /* @__PURE__ */ jsx(Panel, { box, tagName, initialPos: panelPos, onClose: close }) }),
+      document.body
+    )
+  ] });
+}
+export {
+  BoxModelInspector
+};
+//# sourceMappingURL=react-boxmodel-inspector.es.js.map