react-boxmodel-inspector 1.0.0

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

@@ -0,0 +1,738 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "react-dom"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ReactBoxModelInspector = {}, global.ReactJSXRuntime, global.React, global.ReactDOM));
+})(this, function(exports2, jsxRuntime, react, reactDom) {
+  "use strict";
+  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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: containerStyle, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(EL, { v: f(m.top), color: C.margin.text, style: { top: m.top / 2, left: "50%" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(EL, { v: f(m.bottom), color: C.margin.text, style: { top: m.top + h + m.bottom / 2, left: "50%" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(EL, { v: f(m.left), color: C.margin.text, style: { top: "50%", left: m.left / 2 } }),
+        /* @__PURE__ */ jsxRuntime.jsx(EL, { v: f(m.right), color: C.margin.text, style: { top: "50%", left: m.left + w + m.right / 2 } })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(EL, { v: f(p.top), color: C.padding.text, style: { top: p.top / 2, left: "50%" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(EL, { v: f(p.bottom), color: C.padding.text, style: { top: h - p.bottom / 2, left: "50%" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(EL, { v: f(p.left), color: C.padding.text, style: { top: "50%", left: p.left / 2 } }),
+        /* @__PURE__ */ jsxRuntime.jsx(EL, { v: f(p.right), color: C.padding.text, style: { top: "50%", left: w - p.right / 2 } })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: {
+      display: "flex",
+      gap: 6,
+      alignItems: "baseline",
+      padding: "2px 0",
+      borderBottom: "1px solid rgba(255,255,255,0.04)"
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+        fontSize: 10,
+        color: "rgba(255,255,255,0.35)",
+        fontFamily: "monospace",
+        flexShrink: 0,
+        minWidth: 140
+      }, children: camelToKebab(name) }),
+      /* @__PURE__ */ jsxRuntime.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] = react.useState({});
+    const toggle = (key) => setOpenGroups((prev) => ({ ...prev, [key]: !prev[key] }));
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 4 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            onClick: () => toggle(key),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              cursor: "pointer",
+              padding: "3px 0"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+                width: 7,
+                height: 7,
+                borderRadius: "50%",
+                background: color,
+                flexShrink: 0,
+                boxShadow: `0 0 4px ${color}88`
+              } }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.55)", flex: 1 }, children: label }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { paddingLeft: 13, paddingTop: 3 }, children: entries.map(({ name, value }) => /* @__PURE__ */ jsxRuntime.jsx(PropRow, { name, value }, name)) })
+      ] }, key);
+    }) });
+  }
+  function Panel({ box, tagName, initialPos, onClose }) {
+    const [pos, setPos] = react.useState(initialPos);
+    const [expanded, setExp] = react.useState(false);
+    const dragging = react.useRef(false);
+    const offset = react.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();
+    };
+    react.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: { fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.28)" }, children: "box model" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 9, color: "rgba(255,255,255,0.18)" }, children: "T · R · B · L" }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              marginBottom: 5,
+              opacity: allZero ? 0.25 : 1
+            }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+                width: 7,
+                height: 7,
+                borderRadius: "50%",
+                background: color,
+                flexShrink: 0,
+                boxShadow: `0 0 5px ${color}88`
+              } }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.35)", width: 46, flexShrink: 0 }, children: rowLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 3 }, children: vals.map((v, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            marginTop: 8,
+            paddingTop: 7,
+            borderTop: "1px solid rgba(255,255,255,0.07)"
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+              width: 7,
+              height: 7,
+              borderRadius: 2,
+              background: C.content.text,
+              flexShrink: 0,
+              boxShadow: `0 0 5px ${C.content.text}88`
+            } }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10, color: "rgba(255,255,255,0.35)", width: 46 }, children: "content" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 12, fontWeight: 600, color: C.content.text }, children: [
+              cW,
+              " × ",
+              cH,
+              " px"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: "All properties" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
+                  display: "inline-block",
+                  transition: "transform 0.2s",
+                  transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                  fontSize: 11
+                }, children: "▾" })
+              ]
+            }
+          ),
+          expanded && computed && /* @__PURE__ */ jsxRuntime.jsx(ExtraSection, { computed }),
+          /* @__PURE__ */ jsxRuntime.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 reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        position: "fixed",
+        left: x,
+        top: y,
+        width: 0,
+        height: 0,
+        pointerEvents: "none",
+        zIndex: 99999
+      }, children: /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+    const [target, setTarget] = react.useState(null);
+    const [box, setBox] = react.useState(null);
+    const [rect, setRect] = react.useState(null);
+    const [panelPos, setPanelPos] = react.useState(null);
+    const [longPressState, setLongPressState] = react.useState({ active: false, x: 0, y: 0, progress: 0 });
+    const timerRef = react.useRef(null);
+    const progressIntervalRef = react.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);
+    };
+    react.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]);
+    react.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]);
+    react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children,
+      active && reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        LongPressIndicator,
+        {
+          x: longPressState.x,
+          y: longPressState.y,
+          progress: longPressState.progress
+        }
+      ),
+      target && box && rect && reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-boxmodel-ui": "true", children: /* @__PURE__ */ jsxRuntime.jsx(BoxOverlay, { box, rect, tagName }) }),
+        document.body
+      ),
+      target && box && panelPos && reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-boxmodel-ui": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Panel, { box, tagName, initialPos: panelPos, onClose: close }) }),
+        document.body
+      )
+    ] });
+  }
+  exports2.BoxModelInspector = BoxModelInspector;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});
+//# sourceMappingURL=react-boxmodel-inspector.umd.js.map