react-boxmodel-inspector 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +114 -0
- package/dist/react-boxmodel-inspector.es.js +737 -0
- package/dist/react-boxmodel-inspector.es.js.map +1 -0
- package/dist/react-boxmodel-inspector.umd.js +738 -0
- package/dist/react-boxmodel-inspector.umd.js.map +1 -0
- package/package.json +54 -0
- package/src/BoxModel.jsx +743 -0
- package/src/index.js +1 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"react-boxmodel-inspector.umd.js","sources":["../src/BoxModel.jsx"],"sourcesContent":["/**\r\n * BoxModel.jsx\r\n *\r\n * Usage:\r\n * import BoxModelInspector from './BoxModel'\r\n * \r\n * function App() {\r\n * return (\r\n * <BoxModelInspector>\r\n * <YourApp />\r\n * </BoxModelInspector>\r\n * )\r\n * }\r\n *\r\n * • Press ` (backtick) to toggle inspector mode\r\n * • Long-press any element to inspect it\r\n * • Press ESC to close\r\n */\r\n\r\nimport { useRef, useEffect, useState } from \"react\";\r\nimport { createPortal } from \"react-dom\";\r\n\r\n/* ─── palette ─────────────────────────────────────────────────────────────── */\r\nconst C = {\r\n margin: { fill: \"rgba(232,168,56,0.09)\", stroke: \"rgba(232,168,56,0.75)\", text: \"#e8a838\" },\r\n padding: { fill: \"rgba(93,168,93,0.09)\", stroke: \"rgba(93,168,93,0.75)\", text: \"#5da85d\" },\r\n content: { fill: \"rgba(167,139,250,0.12)\", stroke: \"rgba(167,139,250,0.75)\", text: \"#a78bfa\" },\r\n};\r\n\r\n/* ─── edge label ──────────────────────────────────────────────────────────── */\r\nfunction EL({ v, style, color }) {\r\n if (!v) return null;\r\n return (\r\n <div style={{\r\n position: \"absolute\",\r\n fontSize: 9, fontFamily: \"monospace\", fontWeight: 700,\r\n color, background: \"rgba(0,0,0,0.65)\",\r\n border: `1px solid ${color}44`, borderRadius: 3,\r\n padding: \"0 3px\", lineHeight: \"15px\",\r\n pointerEvents: \"none\",\r\n transform: \"translate(-50%,-50%)\",\r\n whiteSpace: \"nowrap\", zIndex: 100001,\r\n ...style,\r\n }}>\r\n {v}px\r\n </div>\r\n );\r\n}\r\n\r\n/* ─── box overlay ─────────────────────────────────────────────────────────── */\r\nfunction BoxOverlay({ box, rect, tagName }) {\r\n const { width: w, height: h, margin: m, padding: p, border: b } = box;\r\n const f = n => n % 1 === 0 ? String(n) : n.toFixed(1);\r\n const cW = Math.max(0, w - p.left - p.right - b.left - b.right);\r\n const cH = Math.max(0, h - p.top - p.bottom - b.top - b.bottom);\r\n\r\n const containerStyle = {\r\n position: \"fixed\",\r\n left: rect.left - m.left,\r\n top: rect.top - m.top,\r\n width: w + m.left + m.right,\r\n height: h + m.top + m.bottom,\r\n pointerEvents: \"none\",\r\n zIndex: 100000,\r\n };\r\n\r\n return (\r\n <div style={containerStyle}>\r\n {/* Tag label */}\r\n <div style={{\r\n position: \"absolute\",\r\n top: -18, left: 0,\r\n fontSize: 10, fontWeight: 700, fontFamily: \"monospace\",\r\n letterSpacing: \"0.06em\", color: \"#fff\",\r\n background: \"#4a90d9\", borderRadius: \"4px 4px 4px 0\",\r\n padding: \"1px 7px\", lineHeight: \"17px\",\r\n zIndex: 100003, pointerEvents: \"none\",\r\n }}>\r\n {tagName}\r\n </div>\r\n\r\n {/* margin */}\r\n <div style={{\r\n position: \"absolute\",\r\n top: 0, left: 0,\r\n width: \"100%\", height: \"100%\",\r\n background: C.margin.fill, border: `1.5px dashed ${C.margin.stroke}`,\r\n boxSizing: \"border-box\",\r\n }}>\r\n <EL v={f(m.top)} color={C.margin.text} style={{ top: m.top / 2, left: \"50%\" }} />\r\n <EL v={f(m.bottom)} color={C.margin.text} style={{ top: m.top + h + m.bottom / 2, left: \"50%\" }} />\r\n <EL v={f(m.left)} color={C.margin.text} style={{ top: \"50%\", left: m.left / 2 }} />\r\n <EL v={f(m.right)} color={C.margin.text} style={{ top: \"50%\", left: m.left + w + m.right / 2 }} />\r\n </div>\r\n\r\n {/* padding */}\r\n <div style={{\r\n position: \"absolute\",\r\n top: m.top, left: m.left,\r\n width: w, height: h,\r\n background: C.padding.fill, border: `1.5px dashed ${C.padding.stroke}`,\r\n boxSizing: \"border-box\",\r\n }}>\r\n <EL v={f(p.top)} color={C.padding.text} style={{ top: p.top / 2, left: \"50%\" }} />\r\n <EL v={f(p.bottom)} color={C.padding.text} style={{ top: h - p.bottom / 2, left: \"50%\" }} />\r\n <EL v={f(p.left)} color={C.padding.text} style={{ top: \"50%\", left: p.left / 2 }} />\r\n <EL v={f(p.right)} color={C.padding.text} style={{ top: \"50%\", left: w - p.right / 2 }} />\r\n </div>\r\n\r\n {/* content */}\r\n <div style={{\r\n position: \"absolute\",\r\n top: m.top + p.top + b.top,\r\n left: m.left + p.left + b.left,\r\n width: cW, height: cH,\r\n background: C.content.fill, border: `1.5px solid ${C.content.stroke}`,\r\n boxSizing: \"border-box\",\r\n }}>\r\n <div style={{\r\n position: \"absolute\", bottom: 2, right: 3,\r\n fontSize: 9, fontFamily: \"monospace\", fontWeight: 700,\r\n color: C.content.text,\r\n }}>\r\n {Math.round(cW)}×{Math.round(cH)}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\n/* ─── CSS property groups ─────────────────────────────────────────────────── */\r\nconst EXTRA_GROUPS = [\r\n {\r\n key: \"typography\",\r\n label: \"Typography\",\r\n color: \"#f472b6\",\r\n props: [\r\n \"fontFamily\", \"fontSize\", \"fontWeight\", \"fontStyle\",\r\n \"lineHeight\", \"letterSpacing\", \"textAlign\", \"textDecoration\",\r\n \"textTransform\", \"whiteSpace\", \"wordBreak\",\r\n ],\r\n },\r\n {\r\n key: \"color\",\r\n label: \"Color & Background\",\r\n color: \"#fb923c\",\r\n props: [\r\n \"color\", \"backgroundColor\", \"backgroundImage\",\r\n \"opacity\", \"visibility\",\r\n ],\r\n },\r\n {\r\n key: \"layout\",\r\n label: \"Layout\",\r\n color: \"#34d399\",\r\n props: [\r\n \"display\", \"position\", \"top\", \"right\", \"bottom\", \"left\",\r\n \"float\", \"clear\", \"zIndex\", \"overflow\", \"overflowX\", \"overflowY\",\r\n ],\r\n },\r\n {\r\n key: \"flex\",\r\n label: \"Flex / Grid\",\r\n color: \"#60a5fa\",\r\n props: [\r\n \"flexDirection\", \"flexWrap\", \"justifyContent\", \"alignItems\",\r\n \"alignContent\", \"flex\", \"flexGrow\", \"flexShrink\", \"flexBasis\",\r\n \"gap\", \"gridTemplateColumns\", \"gridTemplateRows\", \"gridArea\",\r\n ],\r\n },\r\n {\r\n key: \"box\",\r\n label: \"Box\",\r\n color: \"#a78bfa\",\r\n props: [\r\n \"width\", \"height\", \"minWidth\", \"maxWidth\", \"minHeight\", \"maxHeight\",\r\n \"boxSizing\", \"boxShadow\", \"borderRadius\", \"outline\", \"cursor\",\r\n ],\r\n },\r\n {\r\n key: \"transform\",\r\n label: \"Transform & Animation\",\r\n color: \"#e879f9\",\r\n props: [\r\n \"transform\", \"transition\", \"animation\",\r\n \"willChange\", \"pointerEvents\",\r\n ],\r\n },\r\n];\r\n\r\nfunction camelToKebab(str) {\r\n return str.replace(/([A-Z])/g, \"-$1\").toLowerCase();\r\n}\r\n\r\nfunction PropRow({ name, value }) {\r\n if (!value || value === \"none\" || value === \"normal\" || value === \"auto\" || value === \"0px\") return null;\r\n return (\r\n <div style={{\r\n display: \"flex\", gap: 6, alignItems: \"baseline\",\r\n padding: \"2px 0\",\r\n borderBottom: \"1px solid rgba(255,255,255,0.04)\",\r\n }}>\r\n <span style={{\r\n fontSize: 10, color: \"rgba(255,255,255,0.35)\",\r\n fontFamily: \"monospace\", flexShrink: 0, minWidth: 140,\r\n }}>\r\n {camelToKebab(name)}\r\n </span>\r\n <span style={{\r\n fontSize: 10, color: \"#e2e8f0\",\r\n fontFamily: \"monospace\",\r\n wordBreak: \"break-all\",\r\n maxWidth: 180,\r\n overflow: \"hidden\",\r\n textOverflow: \"ellipsis\",\r\n whiteSpace: \"nowrap\",\r\n }}\r\n title={value}\r\n >\r\n {value}\r\n </span>\r\n </div>\r\n );\r\n}\r\n\r\nfunction ExtraSection({ computed }) {\r\n const [openGroups, setOpenGroups] = useState({});\r\n const toggle = (key) => setOpenGroups(prev => ({ ...prev, [key]: !prev[key] }));\r\n\r\n return (\r\n <div style={{ marginTop: 8, borderTop: \"1px solid rgba(255,255,255,0.07)\", paddingTop: 8 }}>\r\n {EXTRA_GROUPS.map(({ key, label, color, props }) => {\r\n const entries = props\r\n .map(p => ({ name: p, value: computed[p] }))\r\n .filter(({ value }) => value && value !== \"none\" && value !== \"normal\" && value !== \"auto\" && value !== \"0px\");\r\n\r\n if (entries.length === 0) return null;\r\n\r\n const open = openGroups[key];\r\n return (\r\n <div key={key} style={{ marginBottom: 4 }}>\r\n <div\r\n onClick={() => toggle(key)}\r\n style={{\r\n display: \"flex\", alignItems: \"center\", gap: 6,\r\n cursor: \"pointer\", padding: \"3px 0\",\r\n }}\r\n >\r\n <span style={{\r\n width: 7, height: 7, borderRadius: \"50%\",\r\n background: color, flexShrink: 0,\r\n boxShadow: `0 0 4px ${color}88`,\r\n }} />\r\n <span style={{ fontSize: 10, color: \"rgba(255,255,255,0.55)\", flex: 1 }}>\r\n {label}\r\n </span>\r\n <span style={{\r\n fontSize: 10,\r\n color: \"rgba(255,255,255,0.25)\",\r\n marginRight: 2,\r\n transition: \"transform 0.15s\",\r\n display: \"inline-block\",\r\n transform: open ? \"rotate(180deg)\" : \"rotate(0deg)\",\r\n }}>\r\n ▾\r\n </span>\r\n </div>\r\n\r\n {open && (\r\n <div style={{ paddingLeft: 13, paddingTop: 3 }}>\r\n {entries.map(({ name, value }) => (\r\n <PropRow key={name} name={name} value={value} />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n })}\r\n </div>\r\n );\r\n}\r\n\r\n/* ─── draggable panel ─────────────────────────────────────────────────────── */\r\nfunction Panel({ box, tagName, initialPos, onClose }) {\r\n const [pos, setPos] = useState(initialPos);\r\n const [expanded, setExp] = useState(false);\r\n const dragging = useRef(false);\r\n const offset = useRef({ x: 0, y: 0 });\r\n\r\n const onMouseDown = (e) => {\r\n if (e.target.closest(\"[data-nodrag]\")) return;\r\n dragging.current = true;\r\n offset.current = { x: e.clientX - pos.x, y: e.clientY - pos.y };\r\n e.preventDefault();\r\n };\r\n\r\n useEffect(() => {\r\n const move = (e) => {\r\n if (!dragging.current) return;\r\n setPos({ x: e.clientX - offset.current.x, y: e.clientY - offset.current.y });\r\n };\r\n const up = () => { dragging.current = false; };\r\n window.addEventListener(\"mousemove\", move);\r\n window.addEventListener(\"mouseup\", up);\r\n return () => {\r\n window.removeEventListener(\"mousemove\", move);\r\n window.removeEventListener(\"mouseup\", up);\r\n };\r\n }, []);\r\n\r\n if (!box) return null;\r\n\r\n const { margin: m, padding: p, border: b, width, height, computed } = box;\r\n const f = n => n % 1 === 0 ? String(n) : n.toFixed(1);\r\n const cW = Math.round(Math.max(0, width - p.left - p.right - b.left - b.right));\r\n const cH = Math.round(Math.max(0, height - p.top - p.bottom - b.top - b.bottom));\r\n\r\n const rows = [\r\n { key: \"margin\", color: C.margin.text, label: \"margin\", vals: [m.top, m.right, m.bottom, m.left] },\r\n { key: \"border\", color: \"#4a90d9\", label: \"border\", vals: [b.top, b.right, b.bottom, b.left] },\r\n { key: \"padding\", color: C.padding.text, label: \"padding\", vals: [p.top, p.right, p.bottom, p.left] },\r\n ];\r\n\r\n return (\r\n <div\r\n onMouseDown={onMouseDown}\r\n style={{\r\n position: \"fixed\", left: pos.x, top: pos.y,\r\n zIndex: 999999, cursor: \"grab\", userSelect: \"none\",\r\n background: \"rgba(10,11,16,0.97)\",\r\n border: \"1px solid rgba(255,255,255,0.12)\",\r\n borderRadius: 8, padding: \"10px 14px 10px\",\r\n minWidth: 260, maxWidth: 340,\r\n fontFamily: \"'SF Mono','Fira Code','Cascadia Code',monospace\",\r\n boxShadow: \"0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3)\",\r\n whiteSpace: \"nowrap\",\r\n maxHeight: \"80vh\", overflowY: \"auto\",\r\n scrollbarWidth: \"thin\", scrollbarColor: \"#333 transparent\",\r\n }}\r\n >\r\n {/* header */}\r\n <div style={{\r\n display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\",\r\n marginBottom: 8, paddingBottom: 7,\r\n borderBottom: \"1px solid rgba(255,255,255,0.08)\",\r\n }}>\r\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 6 }}>\r\n <span style={{\r\n fontSize: 10, fontWeight: 700, color: \"#4a90d9\",\r\n background: \"rgba(74,144,217,0.15)\",\r\n border: \"1px solid rgba(74,144,217,0.35)\",\r\n borderRadius: 4, padding: \"0 6px\", lineHeight: \"18px\",\r\n }}>\r\n {tagName}\r\n </span>\r\n <span style={{ fontSize: 9, letterSpacing: \"0.14em\", textTransform: \"uppercase\", color: \"rgba(255,255,255,0.28)\" }}>\r\n box model\r\n </span>\r\n </div>\r\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\r\n <span style={{ fontSize: 9, color: \"rgba(255,255,255,0.18)\" }}>T · R · B · L</span>\r\n <span\r\n data-nodrag=\"true\"\r\n onClick={onClose}\r\n title=\"Close (ESC)\"\r\n style={{\r\n cursor: \"pointer\", color: \"rgba(255,255,255,0.35)\",\r\n fontSize: 14, lineHeight: 1, padding: \"0 2px\",\r\n borderRadius: 3, userSelect: \"none\",\r\n }}\r\n onMouseEnter={e => e.currentTarget.style.color = \"#ff6b6b\"}\r\n onMouseLeave={e => e.currentTarget.style.color = \"rgba(255,255,255,0.35)\"}\r\n >✕</span>\r\n </div>\r\n </div>\r\n\r\n {rows.map(({ key, color, label: rowLabel, vals }) => {\r\n const allZero = vals.every(v => v === 0);\r\n return (\r\n <div key={key} style={{\r\n display: \"flex\", alignItems: \"center\", gap: 8,\r\n marginBottom: 5, opacity: allZero ? 0.25 : 1,\r\n }}>\r\n <span style={{\r\n width: 7, height: 7, borderRadius: \"50%\",\r\n background: color, flexShrink: 0,\r\n boxShadow: `0 0 5px ${color}88`,\r\n }} />\r\n <span style={{ fontSize: 10, color: \"rgba(255,255,255,0.35)\", width: 46, flexShrink: 0 }}>\r\n {rowLabel}\r\n </span>\r\n <div style={{ display: \"flex\", gap: 3 }}>\r\n {vals.map((v, i) => (\r\n <span key={i} style={{\r\n fontSize: 11, fontWeight: 600,\r\n color: v === 0 ? \"rgba(255,255,255,0.18)\" : color,\r\n background: v === 0 ? \"transparent\" : `${color}18`,\r\n border: `1px solid ${v === 0 ? \"rgba(255,255,255,0.05)\" : `${color}44`}`,\r\n borderRadius: 4, padding: \"1px 5px\",\r\n minWidth: 32, textAlign: \"center\",\r\n }}>\r\n {f(v)}\r\n </span>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n })}\r\n\r\n <div style={{\r\n display: \"flex\", alignItems: \"center\", gap: 8,\r\n marginTop: 8, paddingTop: 7,\r\n borderTop: \"1px solid rgba(255,255,255,0.07)\",\r\n }}>\r\n <span style={{\r\n width: 7, height: 7, borderRadius: 2,\r\n background: C.content.text, flexShrink: 0,\r\n boxShadow: `0 0 5px ${C.content.text}88`,\r\n }} />\r\n <span style={{ fontSize: 10, color: \"rgba(255,255,255,0.35)\", width: 46 }}>content</span>\r\n <span style={{ fontSize: 12, fontWeight: 600, color: C.content.text }}>\r\n {cW} × {cH} px\r\n </span>\r\n </div>\r\n\r\n <div\r\n data-nodrag=\"true\"\r\n onClick={() => setExp(v => !v)}\r\n style={{\r\n display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\r\n gap: 5, marginTop: 10, paddingTop: 8,\r\n borderTop: \"1px solid rgba(255,255,255,0.07)\",\r\n cursor: \"pointer\", color: \"rgba(255,255,255,0.35)\",\r\n fontSize: 10, letterSpacing: \"0.05em\",\r\n }}\r\n >\r\n <span>All properties</span>\r\n <span style={{\r\n display: \"inline-block\",\r\n transition: \"transform 0.2s\",\r\n transform: expanded ? \"rotate(180deg)\" : \"rotate(0deg)\",\r\n fontSize: 11,\r\n }}>\r\n ▾\r\n </span>\r\n </div>\r\n\r\n {expanded && computed && <ExtraSection computed={computed} />}\r\n\r\n <div style={{\r\n marginTop: 8, paddingTop: 6,\r\n borderTop: \"1px solid rgba(255,255,255,0.05)\",\r\n fontSize: 9, color: \"rgba(255,255,255,0.12)\",\r\n textAlign: \"center\", letterSpacing: \"0.05em\",\r\n }}>\r\n ⠿ drag to move · ESC to close\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\n/* ─── long-press ripple feedback ──────────────────────────────────────────── */\r\nfunction LongPressIndicator({ x, y, progress }) {\r\n if (progress === 0) return null;\r\n\r\n return createPortal(\r\n <div style={{\r\n position: \"fixed\",\r\n left: x, top: y,\r\n width: 0, height: 0,\r\n pointerEvents: \"none\",\r\n zIndex: 99999,\r\n }}>\r\n <div style={{\r\n position: \"absolute\",\r\n top: \"50%\", left: \"50%\",\r\n width: 60, height: 60,\r\n borderRadius: \"50%\",\r\n background: `rgba(74,144,217,${0.1 + progress * 0.2})`,\r\n border: `2px solid rgba(74,144,217,${0.3 + progress * 0.5})`,\r\n transform: `translate(-50%, -50%) scale(${progress})`,\r\n transition: \"transform 0.05s linear\",\r\n }} />\r\n </div>,\r\n document.body\r\n );\r\n}\r\n\r\n/* ─── main inspector component ────────────────────────────────────────────── */\r\nexport default function BoxModelInspector({\r\n children,\r\n longPressDuration = 500,\r\n toggleKey = \"`\"\r\n}) {\r\n const [active, setActive] = useState(false);\r\n const [target, setTarget] = useState(null);\r\n const [box, setBox] = useState(null);\r\n const [rect, setRect] = useState(null);\r\n const [panelPos, setPanelPos] = useState(null);\r\n\r\n const [longPressState, setLongPressState] = useState({ active: false, x: 0, y: 0, progress: 0 });\r\n\r\n const timerRef = useRef(null);\r\n const progressIntervalRef = useRef(null);\r\n\r\n // Read box model from element\r\n const readBox = (el) => {\r\n if (!el) return;\r\n const s = getComputedStyle(el);\r\n const r = el.getBoundingClientRect();\r\n\r\n const computed = {};\r\n EXTRA_GROUPS.forEach(({ props }) => {\r\n props.forEach(prop => {\r\n computed[prop] = s[prop];\r\n });\r\n });\r\n\r\n setBox({\r\n width: r.width,\r\n height: r.height,\r\n margin: {\r\n top: parseFloat(s.marginTop),\r\n right: parseFloat(s.marginRight),\r\n bottom: parseFloat(s.marginBottom),\r\n left: parseFloat(s.marginLeft),\r\n },\r\n padding: {\r\n top: parseFloat(s.paddingTop),\r\n right: parseFloat(s.paddingRight),\r\n bottom: parseFloat(s.paddingBottom),\r\n left: parseFloat(s.paddingLeft),\r\n },\r\n border: {\r\n top: parseFloat(s.borderTopWidth),\r\n right: parseFloat(s.borderRightWidth),\r\n bottom: parseFloat(s.borderBottomWidth),\r\n left: parseFloat(s.borderLeftWidth),\r\n },\r\n computed,\r\n });\r\n\r\n setRect(r);\r\n setPanelPos({\r\n x: Math.min(r.right + 24, window.innerWidth - 320),\r\n y: Math.max(20, r.top),\r\n });\r\n };\r\n\r\n // Start long-press\r\n const handlePointerDown = (e) => {\r\n if (!active) return;\r\n if (e.target.closest('[data-boxmodel-ui]')) return;\r\n\r\n const el = e.target;\r\n\r\n setLongPressState({\r\n active: true,\r\n x: e.clientX,\r\n y: e.clientY,\r\n progress: 0,\r\n });\r\n\r\n const startTime = Date.now();\r\n\r\n progressIntervalRef.current = setInterval(() => {\r\n const elapsed = Date.now() - startTime;\r\n const progress = Math.min(elapsed / longPressDuration, 1);\r\n setLongPressState(prev => ({ ...prev, progress }));\r\n }, 16);\r\n\r\n timerRef.current = setTimeout(() => {\r\n setLongPressState({ active: false, x: 0, y: 0, progress: 0 });\r\n clearInterval(progressIntervalRef.current);\r\n\r\n // Set new target (replaces any previous one)\r\n setTarget(el);\r\n readBox(el);\r\n }, longPressDuration);\r\n };\r\n\r\n // Cancel long-press\r\n const handlePointerUp = () => {\r\n if (timerRef.current) {\r\n clearTimeout(timerRef.current);\r\n timerRef.current = null;\r\n }\r\n if (progressIntervalRef.current) {\r\n clearInterval(progressIntervalRef.current);\r\n progressIntervalRef.current = null;\r\n }\r\n setLongPressState({ active: false, x: 0, y: 0, progress: 0 });\r\n };\r\n\r\n const handlePointerMove = (e) => {\r\n if (!longPressState.active) return;\r\n\r\n const dx = e.clientX - longPressState.x;\r\n const dy = e.clientY - longPressState.y;\r\n if (Math.sqrt(dx * dx + dy * dy) > 10) {\r\n handlePointerUp();\r\n }\r\n };\r\n\r\n // Close inspector\r\n const close = () => {\r\n setTarget(null);\r\n setBox(null);\r\n setRect(null);\r\n setPanelPos(null);\r\n };\r\n\r\n // Keyboard shortcuts\r\n useEffect(() => {\r\n const handleKey = (e) => {\r\n // ESC to close\r\n if (e.key === \"Escape\" && target) {\r\n close();\r\n }\r\n // Toggle key (`) to activate/deactivate\r\n else if (e.key === toggleKey && !e.repeat) {\r\n setActive(v => {\r\n const newVal = !v;\r\n if (!newVal && target) close(); // Close if deactivating\r\n return newVal;\r\n });\r\n }\r\n };\r\n\r\n window.addEventListener(\"keydown\", handleKey);\r\n return () => window.removeEventListener(\"keydown\", handleKey);\r\n }, [target, toggleKey]);\r\n\r\n // Live updates\r\n useEffect(() => {\r\n if (!target) return;\r\n\r\n const update = () => readBox(target);\r\n\r\n const ro = new ResizeObserver(update);\r\n ro.observe(target);\r\n\r\n const mo = new MutationObserver(update);\r\n mo.observe(target, { attributes: true, attributeFilter: [\"style\", \"class\"] });\r\n\r\n const handleScroll = () => update();\r\n const handleResize = () => update();\r\n\r\n window.addEventListener(\"scroll\", handleScroll, { passive: true });\r\n window.addEventListener(\"resize\", handleResize);\r\n\r\n return () => {\r\n ro.disconnect();\r\n mo.disconnect();\r\n window.removeEventListener(\"scroll\", handleScroll);\r\n window.removeEventListener(\"resize\", handleResize);\r\n };\r\n }, [target]);\r\n\r\n // Event listeners for long-press\r\n useEffect(() => {\r\n if (!active) {\r\n handlePointerUp();\r\n return;\r\n }\r\n\r\n window.addEventListener(\"pointerdown\", handlePointerDown, true);\r\n window.addEventListener(\"pointerup\", handlePointerUp, true);\r\n window.addEventListener(\"pointermove\", handlePointerMove, true);\r\n\r\n return () => {\r\n window.removeEventListener(\"pointerdown\", handlePointerDown, true);\r\n window.removeEventListener(\"pointerup\", handlePointerUp, true);\r\n window.removeEventListener(\"pointermove\", handlePointerMove, true);\r\n };\r\n });\r\n\r\n // Get element tag name\r\n const tagName = target\r\n ? `${target.tagName.toLowerCase()}${target.id ? `#${target.id}` : \"\"}${target.className ? `.${target.className.split(\" \")[0]}` : \"\"}`\r\n : \"\";\r\n\r\n return (\r\n <>\r\n {children}\r\n\r\n {/* Active indicator */}\r\n {active && createPortal(\r\n <div\r\n data-boxmodel-ui=\"true\"\r\n style={{\r\n position: \"fixed\",\r\n top: 12, left: \"50%\",\r\n transform: \"translateX(-50%)\",\r\n zIndex: 999998,\r\n background: \"rgba(74,144,217,0.95)\",\r\n color: \"#fff\",\r\n fontSize: 11,\r\n fontFamily: \"monospace\",\r\n padding: \"6px 14px\",\r\n borderRadius: 6,\r\n boxShadow: \"0 4px 12px rgba(0,0,0,0.3)\",\r\n pointerEvents: \"none\",\r\n letterSpacing: \"0.03em\",\r\n }}\r\n >\r\n 🔍 Inspector active · Long-press any element · Press <kbd style={{\r\n background: \"rgba(255,255,255,0.2)\",\r\n padding: \"1px 5px\",\r\n borderRadius: 3,\r\n fontWeight: 700,\r\n }}>{toggleKey}</kbd> to toggle\r\n </div>,\r\n document.body\r\n )}\r\n\r\n {/* Long-press indicator */}\r\n {longPressState.progress > 0 && (\r\n <LongPressIndicator\r\n x={longPressState.x}\r\n y={longPressState.y}\r\n progress={longPressState.progress}\r\n />\r\n )}\r\n\r\n {/* Overlay - ONLY ONE at a time */}\r\n {target && box && rect && createPortal(\r\n <div data-boxmodel-ui=\"true\">\r\n <BoxOverlay box={box} rect={rect} tagName={tagName} />\r\n </div>,\r\n document.body\r\n )}\r\n\r\n {/* Panel - ONLY ONE at a time */}\r\n {target && box && panelPos && createPortal(\r\n <div data-boxmodel-ui=\"true\">\r\n <Panel box={box} tagName={tagName} initialPos={panelPos} onClose={close} />\r\n </div>,\r\n document.body\r\n )}\r\n </>\r\n );\r\n}"],"names":["jsxs","jsx","useState","useRef","useEffect","createPortal","Fragment"],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "react-boxmodel-inspector",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A React developer tool that wraps any element and visually debugs its CSS box model — margin, border, padding, and content — with live overlays and a draggable panel.",
|
|
5
|
+
"main": "dist/react-boxmodel-inspector.umd.js",
|
|
6
|
+
"module": "dist/react-boxmodel-inspector.es.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/react-boxmodel-inspector.es.js",
|
|
10
|
+
"require": "./dist/react-boxmodel-inspector.umd.js"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
"files": [
|
|
14
|
+
"dist",
|
|
15
|
+
"src",
|
|
16
|
+
"README.md"
|
|
17
|
+
],
|
|
18
|
+
"scripts": {
|
|
19
|
+
"build": "vite build",
|
|
20
|
+
"prepublishOnly": "npm run build"
|
|
21
|
+
},
|
|
22
|
+
"keywords": [
|
|
23
|
+
"react",
|
|
24
|
+
"devtools",
|
|
25
|
+
"developer-tools",
|
|
26
|
+
"css",
|
|
27
|
+
"box-model",
|
|
28
|
+
"debug",
|
|
29
|
+
"inspector",
|
|
30
|
+
"margin",
|
|
31
|
+
"padding",
|
|
32
|
+
"layout"
|
|
33
|
+
],
|
|
34
|
+
"author": "Hemant Singh Rawat",
|
|
35
|
+
"license": "MIT",
|
|
36
|
+
"peerDependencies": {
|
|
37
|
+
"react": ">=17.0.0",
|
|
38
|
+
"react-dom": ">=17.0.0"
|
|
39
|
+
},
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"@vitejs/plugin-react": "^4.0.0",
|
|
42
|
+
"react": "^18.0.0",
|
|
43
|
+
"react-dom": "^18.0.0",
|
|
44
|
+
"vite": "^5.0.0"
|
|
45
|
+
},
|
|
46
|
+
"repository": {
|
|
47
|
+
"type": "git",
|
|
48
|
+
"url": "https://github.com/Hemantsrawat15/React-BoxModel-Inspector"
|
|
49
|
+
},
|
|
50
|
+
"bugs": {
|
|
51
|
+
"url": "https://github.com/Hemantsrawat15/React-BoxModel-Inspector"
|
|
52
|
+
},
|
|
53
|
+
"homepage": "https://github.com/Hemantsrawat15/React-BoxModel-Inspector#readme"
|
|
54
|
+
}
|