@plumeria/inspector 16.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) zss-in-js contributer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+# @plumeria/inspector
+
+A development inspector for visualizing and debugging styled components in the browser.
+
+## Features
+
+- **Inlined CSS** — No additional `.css` imports required. The stylesheet is bundled into the JavaScript output.
+- **Zero production overhead** — Renders `null` and skips CSS injection when `process.env.NODE_ENV === 'production'`. Safe to leave in your root layout.
+
+## Documentation(Demo)
+
+Read the [documentation](https://plumeria.dev/docs/api-reference/components/inspector) for more details.
+## Installation
+
+```bash
+pnpm install -D @plumeria/inspector
+```
+
+## Usage
+
+```tsx
+import { Inspector } from '@plumeria/inspector';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <Inspector />
+      </body>
+    </html>
+  );
+}
+```
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+| --- | --- |
+| `Cmd + I` / `Ctrl + I` | Toggle inspector |
+| `Shift` | Lock / unlock target element |

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const Inspector: ({ production }: {
+    production?: boolean;
+}) => React.JSX.Element | null;

package/dist/index.js

@@ -0,0 +1,251 @@
+"use client";
+
+// src/index.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var isCssInjected = false;
+var injectInspectorCSS = () => {
+  if (typeof document === "undefined" || isCssInjected) return;
+  const styleId = "plumeria-inspector-styles";
+  if (document.getElementById(styleId)) {
+    isCssInjected = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = "/* @plumeria/unplugin:/Users/sou/create-app/plumeria/packages/inspector/src/index.zero.css */\n.xm2svzo4 {\n  position: fixed;\n}\n.xwargx9a {\n  right: 16px;\n}\n.xnr54dgw {\n  bottom: 16px;\n}\n.xhtz6c5t {\n  z-index: 9999999;\n}\n.xxp6epoh {\n  display: flex;\n}\n.xi3fytem {\n  gap: 8px;\n}\n.xj0ln8hv {\n  align-items: center;\n}\n.x636886i {\n  padding: 8px 16px;\n}\n.x7z3vutq:not(#\\#) {\n  font-family:\n    system-ui,\n    -apple-system,\n    sans-serif;\n}\n.xhrr6ses:not(#\\#) {\n  font-size: 12px;\n}\n.x6vb0uvf:not(#\\#) {\n  font-weight: 500;\n}\n.xd3oqkpm {\n  color: #e5e7eb;\n}\n.x6iuzqez {\n  cursor: pointer;\n}\n.x1gd64ir {\n  -webkit-user-select: none;\n  user-select: none;\n}\n.xb90zzvn:not(#\\#) {\n  background-color: #111827d9;\n}\n.x7vpbndt {\n  border: 1px solid #ffffff1a;\n}\n.xvickkgg {\n  border-radius: 9999px;\n}\n.xfcpkn9a {\n  -webkit-backdrop-filter: blur(12px);\n  backdrop-filter: blur(12px);\n}\n.x1wwwd6e {\n  transition: all .2s;\n}\n.xtby5ou6 {\n  border-color: #a855f7;\n}\n.xkqfgj67 {\n  box-shadow: 0 4px 15px #00000040;\n}\n.xdp2dozu {\n  box-shadow: 0 4px 20px #a855f759;\n}\n.xq0askt6 {\n  width: 8px;\n}\n.xsemx3zn {\n  height: 8px;\n}\n.xyqzlrhp {\n  border-radius: 50%;\n}\n.xs6s67ix {\n  transition: background-color .2s;\n}\n.xlufsbde {\n  box-shadow: 0 0 8px #a855f7;\n}\n.xy2ymyq7:not(#\\#) {\n  background-color: #9ca3af;\n}\n.xbv1awaq:not(#\\#) {\n  background-color: #a855f7;\n}\n.xtzw270y {\n  pointer-events: none;\n}\n.xzjvpdw4 {\n  border: 1px dashed #a855f7;\n}\n.xwghexut:not(#\\#) {\n  background-color: #a855f70f;\n}\n.xlcznmkr {\n  z-index: 999999;\n}\n.xnnxtoqx {\n  transition: all 80ms cubic-bezier(.16, 1, .3, 1);\n}\n.xka75a01 {\n  top: var(--overlay-top);\n}\n.xzwctcax {\n  left: var(--overlay-left);\n}\n.xgwg3gye {\n  width: var(--overlay-width);\n}\n.xerytlo0 {\n  height: var(--overlay-height);\n}\n.x4o5bm7x {\n  z-index: 1000000;\n}\n.x1jethze:not(#\\#) {\n  background-color: #111827e6;\n}\n.xp7py9n1 {\n  border: 1px solid #ffffff1f;\n}\n.xhdqk8nx {\n  border-radius: 12px;\n}\n.xr7ynoef {\n  padding: 12px 16px;\n}\n.xv21k0fp {\n  box-shadow: 0 10px 25px -5px #0000004d, 0 8px 10px -6px #0000004d;\n}\n.xjwv009s {\n  color: #f3f4f6;\n}\n.xgm2v5ee {\n  width: 320px;\n}\n.xsc1chnd {\n  transition: opacity .15s ease-out, transform .15s ease-out;\n}\n.xx2zw91q {\n  pointer-events: var(--tooltip-pointerEvents);\n}\n.xlucmkc1 {\n  top: var(--tooltip-top);\n}\n.xk0pf7xw {\n  left: var(--tooltip-left);\n}\n.x6apt1gh {\n  opacity: var(--tooltip-opacity);\n}\n.xy3932pz {\n  transform: var(--tooltip-transform);\n}\n.xcvxfwrf:not(#\\#) {\n  margin-bottom: 6px;\n}\n.xm6rg4e9:not(#\\#) {\n  font-size: 13px;\n}\n.xybc5i37:not(#\\#) {\n  font-weight: bold;\n}\n.xnuimpaw:not(#\\#) {\n  margin-right: 6px;\n}\n.x8eb0qpq:not(#\\#) {\n  font-family: monospace;\n}\n.xierkllv {\n  color: #67e8f9;\n}\n.xjmc5lje {\n  padding: 2px 6px;\n}\n.x7zjcec6:not(#\\#) {\n  font-size: 11px;\n}\n.xwosyyr8 {\n  color: #c084fc;\n}\n.xzdqhyei {\n  word-break: break-all;\n}\n.xk197wcs:not(#\\#) {\n  background-color: #a855f71a;\n}\n.x4vahbk7 {\n  border-radius: 4px;\n}\n.xf05shqu {\n  max-height: 180px;\n}\n.xwflkjz8:not(#\\#) {\n  padding-top: 8px;\n}\n.xslz5qa9:not(#\\#) {\n  margin-top: 6px;\n}\n.xx3zn3a6 {\n  overflow-y: auto;\n}\n.x6hkxz0i {\n  border-top: 1px solid #ffffff14;\n}\n.xw9ej4ts:not(#\\#) {\n  font-style: italic;\n}\n.x9jma4hx {\n  color: #9ca3af;\n}\n.xs291xkc:not(#\\#) {\n  margin-bottom: 8px;\n}\n.xap91uzz {\n  display: block;\n}\n.xxkhp7ge:not(#\\#) {\n  margin-bottom: 2px;\n}\n.x3f36k41 {\n  color: #a5b4fc;\n}\n.xo0i6zyh:not(#\\#) {\n  padding-left: 12px;\n}\n.xsfilhj8:not(#\\#) {\n  line-height: 1.4;\n}\n.xmzl9t4s {\n  color: #d1d5db;\n}\n.x4ygbjrq {\n  color: #f472b6;\n}\n.xyfpgrbg {\n  color: #93c5fd;\n}\n.xhue4zxv:not(#\\#) {\n  padding-top: 6px;\n}\n.xxb8i1k0:not(#\\#) {\n  margin-top: 8px;\n}\n.xdatukya:not(#\\#) {\n  font-size: 10px;\n}\n.xvaeii17 {\n  text-align: center;\n}\n";
+  document.head.appendChild(style);
+  isCssInjected = true;
+};
+var getClassName = (el) => {
+  if (!el) return "";
+  const className = el.className;
+  if (typeof className === "string") {
+    return className;
+  }
+  if (className && typeof className.baseVal === "string") {
+    return className.baseVal;
+  }
+  return "";
+};
+var getStylesForElement = (el) => {
+  const rulesFound = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      const rules = Array.from(sheet.cssRules || sheet.rules || []);
+      for (const rule of rules) {
+        if (rule instanceof CSSStyleRule) {
+          if (el.matches(rule.selectorText)) {
+            rulesFound.push({
+              selector: rule.selectorText,
+              cssText: rule.style.cssText
+            });
+          }
+        }
+      }
+    } catch (e) {
+    }
+  }
+  return rulesFound;
+};
+var parseCssText = (cssText) => {
+  if (!cssText) return [];
+  return cssText.split(";").map((p) => p.trim()).filter(Boolean).map((prop) => {
+    const index = prop.indexOf(":");
+    if (index === -1) return null;
+    return {
+      name: prop.substring(0, index).trim(),
+      value: prop.substring(index + 1).trim()
+    };
+  }).filter((x) => x !== null);
+};
+var DevInspector = () => {
+  React.useEffect(() => {
+    injectInspectorCSS();
+  }, []);
+  const [isActive, setIsActive] = React.useState(true);
+  const [isFrozen, setIsFrozen] = React.useState(false);
+  const [hoveredElement, setHoveredElement] = React.useState(null);
+  const [overlayStyle, setOverlayStyle] = React.useState({
+    opacity: 0
+  });
+  const [tooltipStyle, setTooltipStyle] = React.useState({
+    opacity: 0
+  });
+  const [rules, setRules] = React.useState([]);
+  const tooltipRef = React.useRef(null);
+  React.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if ((e.altKey || e.metaKey) && e.key.toLowerCase() === "i") {
+        e.preventDefault();
+        setIsActive((prev) => !prev);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+  React.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Shift") {
+        setIsFrozen((prev) => !prev);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (!isActive) {
+      setHoveredElement(null);
+      setOverlayStyle({ opacity: 0 });
+      setTooltipStyle({ opacity: 0 });
+      return;
+    }
+    const handleMouseOver = (e) => {
+      if (isFrozen) return;
+      const target = e.target;
+      if (!target) return;
+      if (target.closest("[data-plumeria-inspector-ignore]")) {
+        return;
+      }
+      if (target === document.documentElement || target === document.body) {
+        setHoveredElement(null);
+        return;
+      }
+      setHoveredElement(target);
+    };
+    document.addEventListener("mouseover", handleMouseOver);
+    return () => {
+      document.removeEventListener("mouseover", handleMouseOver);
+    };
+  }, [isActive, isFrozen]);
+  React.useEffect(() => {
+    if (!hoveredElement || !isActive) return;
+    const update = () => {
+      const rect = hoveredElement.getBoundingClientRect();
+      setOverlayStyle({
+        top: `${rect.top}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+        opacity: 1
+      });
+      const matchedRules = getStylesForElement(hoveredElement);
+      setRules(matchedRules);
+      const tooltipWidth = tooltipRef.current ? tooltipRef.current.offsetWidth : 320;
+      const tooltipHeight = tooltipRef.current ? tooltipRef.current.offsetHeight : 180;
+      const margin = 20;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      let top = rect.top - tooltipHeight - margin;
+      let left = rect.right - tooltipWidth;
+      if (top < margin) {
+        top = rect.bottom + margin;
+      }
+      if (left < margin) {
+        left = margin;
+      }
+      if (left + tooltipWidth > viewportWidth - margin) {
+        left = viewportWidth - tooltipWidth - margin;
+      }
+      if (top + tooltipHeight > viewportHeight - margin) {
+        top = rect.top - tooltipHeight - margin;
+      }
+      setTooltipStyle({
+        top: `${top}px`,
+        left: `${left}px`,
+        opacity: 1,
+        transform: "none"
+      });
+    };
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [hoveredElement, isActive, isFrozen]);
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-plumeria-inspector-ignore": "true",
+        className: "xm2svzo4 xwargx9a xnr54dgw xhtz6c5t xxp6epoh xi3fytem xj0ln8hv x636886i x7z3vutq xhrr6ses x6vb0uvf xd3oqkpm x6iuzqez x1gd64ir xb90zzvn x7vpbndt xvickkgg xfcpkn9a x1wwwd6e " + (isActive ? "xtby5ou6" : "") + " " + ({ "0": "xkqfgj67", "1": "xdp2dozu" }[isActive ? "1" : "0"] || "xkqfgj67"),
+        onClick: () => setIsActive((prev) => !prev),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "xq0askt6 xsemx3zn xyqzlrhp xs6s67ix " + (isActive ? "xlufsbde" : "") + " " + ({ "0": "xy2ymyq7", "1": "xbv1awaq" }[isActive ? "1" : "0"] || "xy2ymyq7")
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Inspector: ",
+            isActive ? "ON" : "OFF",
+            " ",
+            /* @__PURE__ */ jsx("span", { style: { opacity: 0.6 }, children: "(\u2318 + I)" })
+          ] })
+        ]
+      }
+    ),
+    isActive && hoveredElement && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-plumeria-inspector-ignore": "true",
+        className: "xm2svzo4 xtzw270y xzjvpdw4 xwghexut xlcznmkr xnnxtoqx xka75a01 xzwctcax xgwg3gye xerytlo0",
+        style: { "--overlay-top": typeof (overlayStyle.top || "0px") === "number" ? (overlayStyle.top || "0px") + "px" : overlayStyle.top || "0px", "--overlay-left": typeof (overlayStyle.left || "0px") === "number" ? (overlayStyle.left || "0px") + "px" : overlayStyle.left || "0px", "--overlay-width": typeof (overlayStyle.width || "0px") === "number" ? (overlayStyle.width || "0px") + "px" : overlayStyle.width || "0px", "--overlay-height": typeof (overlayStyle.height || "0px") === "number" ? (overlayStyle.height || "0px") + "px" : overlayStyle.height || "0px" }
+      }
+    ),
+    isActive && hoveredElement && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: tooltipRef,
+        "data-plumeria-inspector-ignore": "true",
+        className: "xm2svzo4 x4o5bm7x x1jethze xfcpkn9a xp7py9n1 xhdqk8nx xr7ynoef xv21k0fp xjwv009s x7z3vutq xgm2v5ee xsc1chnd xx2zw91q xlucmkc1 xk0pf7xw x6apt1gh xy3932pz",
+        style: { "--tooltip-pointerEvents": typeof (isFrozen ? "auto" : "none") === "number" ? (isFrozen ? "auto" : "none") + "px" : isFrozen ? "auto" : "none", "--tooltip-top": typeof (tooltipStyle.top || "0px") === "number" ? (tooltipStyle.top || "0px") + "px" : tooltipStyle.top || "0px", "--tooltip-left": typeof (tooltipStyle.left || "0px") === "number" ? (tooltipStyle.left || "0px") + "px" : tooltipStyle.left || "0px", "--tooltip-opacity": tooltipStyle.opacity ?? 0, "--tooltip-transform": typeof (tooltipStyle.transform || "none") === "number" ? (tooltipStyle.transform || "none") + "px" : tooltipStyle.transform || "none" },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "xxp6epoh xj0ln8hv xcvxfwrf xm6rg4e9 xybc5i37", children: [
+            /* @__PURE__ */ jsxs("span", { className: "xnuimpaw x8eb0qpq xierkllv", children: [
+              "<",
+              hoveredElement.tagName.toLowerCase(),
+              ">"
+            ] }),
+            getClassName(hoveredElement) && /* @__PURE__ */ jsxs("span", { className: "xjmc5lje x8eb0qpq x7zjcec6 xwosyyr8 xzdqhyei xk197wcs x4vahbk7", children: [
+              ".",
+              getClassName(hoveredElement).split(" ").filter(Boolean).join(" .")
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "xf05shqu xwflkjz8 xslz5qa9 xx3zn3a6 x6hkxz0i", children: rules.length === 0 ? /* @__PURE__ */ jsx("div", { className: "x7zjcec6 xw9ej4ts x9jma4hx", children: "No matching Plumeria CSS rules" }) : rules.map((rule, idx) => {
+            const parsedProps = parseCssText(rule.cssText);
+            return /* @__PURE__ */ jsxs("div", { className: "xs291xkc", children: [
+              /* @__PURE__ */ jsxs("span", { className: "xap91uzz xxkhp7ge x8eb0qpq x7zjcec6 x3f36k41", children: [
+                rule.selector,
+                " ",
+                "{"
+              ] }),
+              parsedProps.map((prop, pIdx) => /* @__PURE__ */ jsxs("span", { className: "xap91uzz xo0i6zyh x8eb0qpq x7zjcec6 xsfilhj8 xmzl9t4s", children: [
+                /* @__PURE__ */ jsx("span", { className: "x4ygbjrq", children: prop.name }),
+                ": ",
+                /* @__PURE__ */ jsx("span", { className: "xyfpgrbg", children: prop.value }),
+                ";"
+              ] }, pIdx)),
+              /* @__PURE__ */ jsx("span", { className: "xap91uzz xxkhp7ge x8eb0qpq x7zjcec6 x3f36k41", children: "}" })
+            ] }, idx);
+          }) }),
+          /* @__PURE__ */ jsx("div", { className: "xhue4zxv xxb8i1k0 xdatukya xw9ej4ts x9jma4hx xvaeii17 x6hkxz0i", children: isFrozen ? "\u2744\uFE0F Targeting Locked (Press Shift to unlock)" : "\u26A1 Press Shift to lock targeting & scroll rules" })
+        ]
+      }
+    )
+  ] });
+};
+var Inspector = ({ production = false }) => {
+  if (!production && process.env.NODE_ENV === "production") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DevInspector, {});
+};
+export {
+  Inspector
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@plumeria/inspector",
+  "version": "16.1.0",
+  "description": "Styled components inspector for development",
+  "author": "Refirst 11",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/refirst11",
+  "homepage": "https://plumeria.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zss-in-js/plumeria.git",
+    "directory": "packages/inspector"
+  },
+  "bugs": {
+    "url": "https://github.com/zss-in-js/plumeria/issues"
+  },
+  "keywords": [
+    "react",
+    "inspector",
+    "devtools",
+    "plumeria",
+    "css-in-js"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "rimraf dist && node scripts/build.js && tsc --emitDeclarationOnly --declarationDir dist"
+  },
+  "dependencies": {
+    "@plumeria/headlessui": "workspace:^"
+  },
+  "devDependencies": {
+    "@plumeria/core": "workspace:^",
+    "@plumeria/unplugin": "workspace:^",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "esbuild": "^0.28.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}