@zargaryanvh/react-component-inspector 1.0.0 → 1.0.1

package/dist/InspectionContext.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useState, useCallback, useEffect } from "react";
+import React, { createContext, useContext, useState, useCallback, useEffect, useRef } from "react";
 import { setInspectionActive } from "./inspectionInterceptors";
 import { setupAutoInspection } from "./autoInspection";
 const InspectionContext = createContext(undefined);
@@ -11,34 +11,47 @@ export const InspectionProvider = ({ children }) => {
     const [isLocked, setIsLocked] = useState(false);
     const [hoveredComponent, setHoveredComponentState] = useState(null);
     const [hoveredElement, setHoveredElement] = useState(null);
+    // Use refs to always access latest state values in event handlers
+    const isInspectionActiveRef = useRef(isInspectionActive);
+    const isLockedRef = useRef(isLocked);
+    const hoveredComponentRef = useRef(hoveredComponent);
+    const hKeyPressedRef = useRef(false); // Track if H key is currently being held
+    // Keep refs in sync with state
+    useEffect(() => {
+        isInspectionActiveRef.current = isInspectionActive;
+    }, [isInspectionActive]);
+    useEffect(() => {
+        isLockedRef.current = isLocked;
+    }, [isLocked]);
+    useEffect(() => {
+        hoveredComponentRef.current = hoveredComponent;
+    }, [hoveredComponent]);
     // Track CTRL key state and CTRL+H for locking
     React.useEffect(() => {
         if (process.env.NODE_ENV !== "development") {
             return; // Only in development
         }
         const handleKeyDown = (e) => {
-            // H key pressed (with or without CTRL) to lock tooltip position while hovering
-            if (e.key.toLowerCase() === "h") {
-                // Only lock if inspection is active, we have a hovered component, and it's not already locked
-                if (isInspectionActive && hoveredComponent && !isLocked) {
-                    e.preventDefault();
-                    setIsLocked(true);
-                    if (process.env.NODE_ENV === "development") {
-                        console.log("[Inspection] Tooltip locked - position fixed. Press H again or release CTRL to unlock.");
-                    }
+            // H key pressed while CTRL is held - lock tooltip position
+            if (e.key.toLowerCase() === "h" && e.ctrlKey) {
+                e.preventDefault();
+                e.stopPropagation();
+                // Ignore repeated keydown events (when key is held down)
+                if (e.repeat) {
+                    return;
                 }
-                // If already locked and H is pressed again, unlock (toggle behavior)
-                else if (isLocked && isInspectionActive) {
-                    e.preventDefault();
-                    setIsLocked(false);
+                // Only lock if inspection is active, we have a hovered component, and H is not already being held
+                if (isInspectionActiveRef.current && hoveredComponentRef.current && !hKeyPressedRef.current) {
+                    hKeyPressedRef.current = true;
+                    setIsLocked(true);
                     if (process.env.NODE_ENV === "development") {
-                        console.log("[Inspection] Tooltip unlocked - inspection continues while CTRL is held.");
+                        console.log("[Inspection] Tooltip LOCKED - Hold H to keep locked. Release H to unlock.");
                     }
                 }
                 return;
             }
             // CTRL key pressed
-            if (e.key === "Control" || e.ctrlKey) {
+            if (e.key === "Control" && !e.repeat) {
                 setIsInspectionActive(true);
                 setInspectionActive(true);
                 if (process.env.NODE_ENV === "development") {
@@ -47,10 +60,29 @@ export const InspectionProvider = ({ children }) => {
             }
         };
         const handleKeyUp = (e) => {
+            // H key released - unlock tooltip but keep inspection active if CTRL is still held
+            if (e.key.toLowerCase() === "h") {
+                e.preventDefault();
+                e.stopPropagation();
+                // Only process if H was actually being held
+                if (hKeyPressedRef.current) {
+                    const wasLocked = isLockedRef.current;
+                    hKeyPressedRef.current = false;
+                    // Only unlock if we were locked and CTRL is still held
+                    if (wasLocked && e.ctrlKey && isInspectionActiveRef.current) {
+                        setIsLocked(false);
+                        if (process.env.NODE_ENV === "development") {
+                            console.log("[Inspection] Tooltip UNLOCKED - inspection continues while CTRL is held.");
+                        }
+                    }
+                }
+                return;
+            }
             // CTRL key released - unlock and clear
-            if (e.key === "Control" || (!e.ctrlKey && e.key !== "h")) {
+            if (e.key === "Control") {
                 setIsInspectionActive(false);
                 setIsLocked(false);
+                hKeyPressedRef.current = false;
                 setInspectionActive(false);
                 setHoveredComponentState(null);
                 setHoveredElement(null);
@@ -58,7 +90,6 @@ export const InspectionProvider = ({ children }) => {
                     console.log("[Inspection] Deactivated");
                 }
             }
-            // Note: H key release doesn't unlock anymore - use H key press to toggle lock state
         };
         window.addEventListener("keydown", handleKeyDown);
         window.addEventListener("keyup", handleKeyUp);
@@ -66,7 +97,7 @@ export const InspectionProvider = ({ children }) => {
             window.removeEventListener("keydown", handleKeyDown);
             window.removeEventListener("keyup", handleKeyUp);
         };
-    }, [isInspectionActive, hoveredComponent, isLocked]);
+    }, []); // Empty deps - refs handle state access
     const setHoveredComponent = useCallback((component, element) => {
         if (process.env.NODE_ENV !== "development") {
             return; // Only in development

package/dist/InspectionTooltip.js

@@ -224,7 +224,7 @@ export const InspectionTooltip = () => {
             backdropFilter: "blur(8px)",
             border: "1px solid rgba(255, 255, 255, 0.1)",
             transition: stablePosition ? "none" : "left 0.1s ease-out, top 0.1s ease-out",
-        }, children: [_jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 1 }, children: [_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [_jsx(Typography, { variant: "subtitle2", sx: { color: "#fff", fontWeight: 600, fontSize: "0.875rem" }, children: "Component Inspector" }), isLocked && (_jsx(Typography, { variant: "caption", sx: { color: "#4caf50", fontSize: "0.7rem", fontStyle: "italic" }, children: "(Locked - Release CTRL to unlock)" }))] }), _jsx(MuiTooltip, { title: copied ? "Copied!" : "Copy metadata", children: _jsx(IconButton, { size: "small", onClick: handleCopy, sx: {
+        }, children: [_jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 1 }, children: [_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [_jsx(Typography, { variant: "subtitle2", sx: { color: "#fff", fontWeight: 600, fontSize: "0.875rem" }, children: "Component Inspector" }), isLocked && (_jsx(Typography, { variant: "caption", sx: { color: "#4caf50", fontSize: "0.7rem", fontStyle: "italic" }, children: "(Locked - Release H to unlock)" }))] }), _jsx(MuiTooltip, { title: copied ? "Copied!" : "Copy metadata", children: _jsx(IconButton, { size: "small", onClick: handleCopy, sx: {
                                 color: copied ? "#4caf50" : "#fff",
                                 "&:hover": { backgroundColor: "rgba(255, 255, 255, 0.1)" },
                                 p: 0.5,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zargaryanvh/react-component-inspector",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A development tool for inspecting React components with AI-friendly metadata extraction",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",