@plumeria/inspector 16.2.1 → 16.2.2

package/README.md

@@ -2,11 +2,6 @@
 
 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.
@@ -33,9 +28,17 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `production` | `boolean` | `false` | If `true`, the inspector is enabled in production environments. |
+| `initial` | `boolean` | `false` | If `true`, the inspector starts toggled ON. If `false`, it starts toggled OFF. |
+
 ## Keyboard Shortcuts
 
 | Shortcut | Action |
 | --- | --- |
 | `Cmd + I` / `Ctrl + I` | Toggle inspector |
 | `Shift` | Lock / unlock target element |
+

package/dist/index.d.ts

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

package/dist/index.js

@@ -30,21 +30,26 @@ var getClassName = (el) => {
 };
 var getStylesForElement = (el) => {
   const rulesFound = [];
-  for (const sheet of Array.from(document.styleSheets)) {
+  const traverse = (rule) => {
     try {
-      const rules = Array.from(sheet.cssRules || sheet.rules || []);
-      for (const rule of rules) {
-        if (rule instanceof CSSStyleRule) {
-          if (el.matches(rule.selectorText)) {
+      const rules = "cssRules" in rule ? Array.from(rule.cssRules) : [];
+      for (const r of rules) {
+        if (r instanceof CSSStyleRule) {
+          if (el.matches(r.selectorText)) {
             rulesFound.push({
-              selector: rule.selectorText,
-              cssText: rule.style.cssText
+              selector: r.selectorText,
+              cssText: r.style.cssText
             });
           }
+        } else if ("cssRules" in r) {
+          traverse(r);
         }
       }
     } catch (e) {
     }
+  };
+  for (const sheet of Array.from(document.styleSheets)) {
+    traverse(sheet);
   }
   return rulesFound;
 };
@@ -59,11 +64,11 @@ var parseCssText = (cssText) => {
     };
   }).filter((x) => x !== null);
 };
-var DevInspector = () => {
+var DevInspector = ({ initial }) => {
   React.useEffect(() => {
     injectInspectorCSS();
   }, []);
-  const [isActive, setIsActive] = React.useState(true);
+  const [isActive, setIsActive] = React.useState(initial);
   const [isFrozen, setIsFrozen] = React.useState(false);
   const [hoveredElement, setHoveredElement] = React.useState(null);
   const [overlayStyle, setOverlayStyle] = React.useState({
@@ -120,6 +125,13 @@ var DevInspector = () => {
       document.removeEventListener("mouseover", handleMouseOver);
     };
   }, [isActive, isFrozen]);
+  React.useEffect(() => {
+    if (!hoveredElement || !isActive) {
+      setRules([]);
+      return;
+    }
+    setRules(getStylesForElement(hoveredElement));
+  }, [hoveredElement, isActive]);
   React.useEffect(() => {
     if (!hoveredElement || !isActive) return;
     const update = () => {
@@ -131,8 +143,6 @@ var DevInspector = () => {
         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;
@@ -217,7 +227,7 @@ var DevInspector = () => {
               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) => {
+          /* @__PURE__ */ jsx("div", { className: "xf05shqu xwflkjz8 xslz5qa9 xx3zn3a6 x6hkxz0i", children: rules.length === 0 ? /* @__PURE__ */ jsx("div", { className: "x7zjcec6 xw9ej4ts x9jma4hx", children: "No matching 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: [
@@ -240,11 +250,14 @@ var DevInspector = () => {
     )
   ] });
 };
-var Inspector = ({ production = false }) => {
+var Inspector = ({
+  production = false,
+  initial = false
+}) => {
   if (!production && process.env.NODE_ENV === "production") {
     return null;
   }
-  return /* @__PURE__ */ jsx(DevInspector, {});
+  return /* @__PURE__ */ jsx(DevInspector, { initial });
 };
 export {
   Inspector

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/inspector",
-  "version": "16.2.1",
+  "version": "16.2.2",
   "description": "Styled components inspector for development",
   "author": "Refirst 11",
   "license": "MIT",
@@ -35,14 +35,14 @@
     "dist/"
   ],
   "dependencies": {
-    "@plumeria/headlessui": "^16.2.1"
+    "@plumeria/headlessui": "^16.2.2"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "esbuild": "^0.28.0",
-    "@plumeria/core": "^16.2.1",
-    "@plumeria/unplugin": "^16.2.1"
+    "@plumeria/core": "^16.2.2",
+    "@plumeria/unplugin": "^16.2.2"
   },
   "publishConfig": {
     "access": "public"