@zargaryanvh/react-component-inspector 1.0.1 → 1.0.2

package/dist/InspectionContext.js

@@ -16,6 +16,22 @@ export const InspectionProvider = ({ children }) => {
     const isLockedRef = useRef(isLocked);
     const hoveredComponentRef = useRef(hoveredComponent);
     const hKeyPressedRef = useRef(false); // Track if H key is currently being held
+    // Mobile touch support
+    const longPressTimerRef = useRef(null);
+    const touchStartTimeRef = useRef(0);
+    const lastTapRef = useRef(0);
+    const isMobileRef = useRef(false);
+    // Detect mobile device
+    useEffect(() => {
+        const checkMobile = () => {
+            if (typeof window === 'undefined')
+                return false;
+            return 'ontouchstart' in window ||
+                navigator.maxTouchPoints > 0 ||
+                /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        };
+        isMobileRef.current = checkMobile();
+    }, []);
     // Keep refs in sync with state
     useEffect(() => {
         isInspectionActiveRef.current = isInspectionActive;
@@ -26,11 +42,84 @@ export const InspectionProvider = ({ children }) => {
     useEffect(() => {
         hoveredComponentRef.current = hoveredComponent;
     }, [hoveredComponent]);
-    // Track CTRL key state and CTRL+H for locking
+    // Mobile touch handlers for activation and locking
     React.useEffect(() => {
         if (process.env.NODE_ENV !== "development") {
             return; // Only in development
         }
+        // Long-press to activate inspection mode (mobile)
+        const handleTouchStart = (e) => {
+            if (!isMobileRef.current)
+                return;
+            // Only activate if touching with 3 fingers (to avoid accidental activation)
+            if (e.touches.length === 3) {
+                touchStartTimeRef.current = Date.now();
+                longPressTimerRef.current = setTimeout(() => {
+                    setIsInspectionActive(true);
+                    setInspectionActive(true);
+                    if (process.env.NODE_ENV === "development") {
+                        console.log("[Inspection] Activated (mobile) - Long-press with 3 fingers. Double-tap tooltip to lock.");
+                    }
+                }, 800); // 800ms long-press
+            }
+        };
+        const handleTouchEnd = (e) => {
+            if (!isMobileRef.current)
+                return;
+            // Clear long-press timer
+            if (longPressTimerRef.current) {
+                clearTimeout(longPressTimerRef.current);
+                longPressTimerRef.current = null;
+            }
+            // Double-tap detection for locking (on tooltip or component)
+            const now = Date.now();
+            const timeSinceLastTap = now - lastTapRef.current;
+            if (timeSinceLastTap < 300 && timeSinceLastTap > 0) {
+                // Double-tap detected
+                if (isInspectionActiveRef.current && hoveredComponentRef.current && !isLockedRef.current) {
+                    setIsLocked(true);
+                    if (process.env.NODE_ENV === "development") {
+                        console.log("[Inspection] Tooltip LOCKED (mobile) - Double-tap again to unlock.");
+                    }
+                }
+                else if (isLockedRef.current) {
+                    // Unlock on double-tap when locked
+                    setIsLocked(false);
+                    if (process.env.NODE_ENV === "development") {
+                        console.log("[Inspection] Tooltip UNLOCKED (mobile) - inspection continues.");
+                    }
+                }
+                lastTapRef.current = 0; // Reset
+            }
+            else {
+                lastTapRef.current = now;
+            }
+            // Deactivate if 3-finger touch ends and inspection was active
+            if (e.touches.length === 0 && isInspectionActiveRef.current) {
+                const touchDuration = Date.now() - touchStartTimeRef.current;
+                // Only deactivate if it was a quick tap (not a long-press that activated)
+                if (touchDuration < 800) {
+                    setIsInspectionActive(false);
+                    setIsLocked(false);
+                    hKeyPressedRef.current = false;
+                    setInspectionActive(false);
+                    setHoveredComponentState(null);
+                    setHoveredElement(null);
+                    if (process.env.NODE_ENV === "development") {
+                        console.log("[Inspection] Deactivated (mobile)");
+                    }
+                }
+            }
+        };
+        const handleTouchCancel = () => {
+            if (!isMobileRef.current)
+                return;
+            if (longPressTimerRef.current) {
+                clearTimeout(longPressTimerRef.current);
+                longPressTimerRef.current = null;
+            }
+        };
+        // Track CTRL key state and CTRL+H for locking (desktop)
         const handleKeyDown = (e) => {
             // H key pressed while CTRL is held - lock tooltip position
             if (e.key.toLowerCase() === "h" && e.ctrlKey) {
@@ -93,9 +182,20 @@ export const InspectionProvider = ({ children }) => {
         };
         window.addEventListener("keydown", handleKeyDown);
         window.addEventListener("keyup", handleKeyUp);
+        // Mobile touch events
+        window.addEventListener("touchstart", handleTouchStart, { passive: true });
+        window.addEventListener("touchend", handleTouchEnd, { passive: true });
+        window.addEventListener("touchcancel", handleTouchCancel, { passive: true });
         return () => {
             window.removeEventListener("keydown", handleKeyDown);
             window.removeEventListener("keyup", handleKeyUp);
+            window.removeEventListener("touchstart", handleTouchStart);
+            window.removeEventListener("touchend", handleTouchEnd);
+            window.removeEventListener("touchcancel", handleTouchCancel);
+            // Cleanup timers
+            if (longPressTimerRef.current) {
+                clearTimeout(longPressTimerRef.current);
+            }
         };
     }, []); // Empty deps - refs handle state access
     const setHoveredComponent = useCallback((component, element) => {

package/dist/InspectionWrapper.js

@@ -29,6 +29,26 @@ export const InspectionWrapper = ({ componentName, variant, role, usagePath, pro
             return;
         setHoveredComponent(null, null);
     };
+    // Touch handlers for mobile
+    const handleTouchStart = (e) => {
+        if (!isInspectionActive)
+            return;
+        const target = e.currentTarget;
+        const metadata = {
+            componentName,
+            componentId: generateComponentId(componentName, instanceIndex),
+            variant,
+            role,
+            usagePath,
+            instanceIndex,
+            propsSignature: formatPropsSignature(props),
+            sourceFile,
+        };
+        setHoveredComponent(metadata, target);
+    };
+    const handleTouchEnd = () => {
+        // Don't clear on touch end - let autoInspection handle it
+    };
     // Clone the child element and add inspection handlers
     if (!React.isValidElement(children)) {
         return _jsx(_Fragment, { children: children });
@@ -36,6 +56,8 @@ export const InspectionWrapper = ({ componentName, variant, role, usagePath, pro
     const existingProps = (children.props || {});
     const existingOnMouseEnter = existingProps.onMouseEnter;
     const existingOnMouseLeave = existingProps.onMouseLeave;
+    const existingOnTouchStart = existingProps.onTouchStart;
+    const existingOnTouchEnd = existingProps.onTouchEnd;
     const childWithProps = React.cloneElement(children, {
         onMouseEnter: (e) => {
             handleMouseEnter(e);
@@ -49,6 +71,18 @@ export const InspectionWrapper = ({ componentName, variant, role, usagePath, pro
                 existingOnMouseLeave(e);
             }
         },
+        onTouchStart: (e) => {
+            handleTouchStart(e);
+            if (existingOnTouchStart) {
+                existingOnTouchStart(e);
+            }
+        },
+        onTouchEnd: (e) => {
+            handleTouchEnd();
+            if (existingOnTouchEnd) {
+                existingOnTouchEnd(e);
+            }
+        },
         "data-inspection-id": generateComponentId(componentName, instanceIndex),
         "data-inspection-name": componentName,
     });

package/dist/autoInspection.js

@@ -130,6 +130,114 @@ export const parseInspectionMetadata = (element) => {
         sourceFile: "DOM",
     };
 };
+/**
+ * Helper function to inspect an element (used by both mouse and touch events)
+ */
+const inspectElement = (target, isInspectionActive, isLocked, setHoveredComponent) => {
+    if (!isInspectionActive) {
+        return;
+    }
+    // If locked, don't update - keep current tooltip fixed
+    if (isLocked) {
+        return;
+    }
+    if (!target || !document.body.contains(target)) {
+        return;
+    }
+    // Always show inspection for any element (not just ones with metadata)
+    // Walk up the DOM tree to find a meaningful element to inspect
+    let current = target;
+    let bestElement = null;
+    let bestMetadata = null;
+    let elementWithExplicitMetadata = null;
+    let metadataWithExplicitId = null;
+    // Skip text nodes and very small elements
+    const isMeaningfulElement = (el) => {
+        const rect = el.getBoundingClientRect();
+        // Skip elements that are too small (likely text nodes or empty spans)
+        if (rect.width < 5 && rect.height < 5) {
+            return false;
+        }
+        // Prefer elements with explicit metadata, IDs, or meaningful classes
+        return !!(el.getAttribute("data-inspection-name") ||
+            el.id ||
+            el.className ||
+            el.tagName !== "SPAN" && el.tagName !== "DIV");
+    };
+    // First pass: Look for elements with explicit inspection metadata
+    // This ensures we always find the same component regardless of which child is hovered
+    while (current) {
+        // Ensure element is still in the DOM
+        if (!document.body.contains(current)) {
+            break;
+        }
+        // Check if this element has explicit inspection metadata
+        const hasExplicitMetadata = current.getAttribute("data-inspection-name") &&
+            current.getAttribute("data-inspection-id");
+        if (hasExplicitMetadata) {
+            const metadata = parseInspectionMetadata(current);
+            if (metadata) {
+                elementWithExplicitMetadata = current;
+                metadataWithExplicitId = metadata;
+                break; // Found explicit metadata, use it
+            }
+        }
+        current = current.parentElement;
+        // Stop at body to avoid inspecting the entire page
+        if (current && (current.tagName === "BODY" || current.tagName === "HTML")) {
+            break;
+        }
+    }
+    // If we found explicit metadata, use it (this ensures consistent IDs)
+    if (elementWithExplicitMetadata && metadataWithExplicitId) {
+        if (process.env.NODE_ENV === "development") {
+            console.log("[Inspection] Found element with explicit metadata:", metadataWithExplicitId.componentName);
+        }
+        setHoveredComponent(metadataWithExplicitId, elementWithExplicitMetadata);
+        return;
+    }
+    // Second pass: If no explicit metadata found, look for meaningful elements
+    // Reset current to target for second pass
+    current = target;
+    while (current) {
+        // Ensure element is still in the DOM
+        if (!document.body.contains(current)) {
+            break;
+        }
+        // Check if this is a meaningful element
+        if (isMeaningfulElement(current)) {
+            const metadata = parseInspectionMetadata(current);
+            if (metadata) {
+                // Keep the first meaningful element (closest to target)
+                if (!bestElement) {
+                    bestElement = current;
+                    bestMetadata = metadata;
+                }
+            }
+        }
+        current = current.parentElement;
+        // Stop at body to avoid inspecting the entire page
+        if (current && (current.tagName === "BODY" || current.tagName === "HTML")) {
+            break;
+        }
+    }
+    if (bestElement && bestMetadata) {
+        if (process.env.NODE_ENV === "development") {
+            console.log("[Inspection] Found element:", bestMetadata.componentName);
+        }
+        setHoveredComponent(bestMetadata, bestElement);
+    }
+    else {
+        // Fallback: show info for the target element itself
+        const fallbackMetadata = parseInspectionMetadata(target);
+        if (fallbackMetadata) {
+            setHoveredComponent(fallbackMetadata, target);
+        }
+        else {
+            setHoveredComponent(null, null);
+        }
+    }
+};
 /**
  * Setup global mouse event listener for automatic inspection detection
  * This works with components that have data-inspection-* attributes
@@ -138,6 +246,10 @@ export const setupAutoInspection = (setHoveredComponent, isInspectionActive, isL
     if (process.env.NODE_ENV !== "development") {
         return () => { }; // No-op in production
     }
+    // Detect if device supports touch
+    const isTouchDevice = 'ontouchstart' in window ||
+        navigator.maxTouchPoints > 0 ||
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
     const handleMouseMove = (e) => {
         if (!isInspectionActive) {
             return;
@@ -147,101 +259,33 @@ export const setupAutoInspection = (setHoveredComponent, isInspectionActive, isL
             return;
         }
         const target = e.target;
-        if (!target || !document.body.contains(target)) {
+        inspectElement(target, isInspectionActive, isLocked, setHoveredComponent);
+    };
+    // Touch move handler for mobile devices
+    const handleTouchMove = (e) => {
+        // Only process if inspection is active and we have touches
+        if (!isInspectionActive || e.touches.length === 0) {
             return;
         }
-        // Always show inspection for any element (not just ones with metadata)
-        // Walk up the DOM tree to find a meaningful element to inspect
-        let current = target;
-        let bestElement = null;
-        let bestMetadata = null;
-        let elementWithExplicitMetadata = null;
-        let metadataWithExplicitId = null;
-        // Skip text nodes and very small elements
-        const isMeaningfulElement = (el) => {
-            const rect = el.getBoundingClientRect();
-            // Skip elements that are too small (likely text nodes or empty spans)
-            if (rect.width < 5 && rect.height < 5) {
-                return false;
-            }
-            // Prefer elements with explicit metadata, IDs, or meaningful classes
-            return !!(el.getAttribute("data-inspection-name") ||
-                el.id ||
-                el.className ||
-                el.tagName !== "SPAN" && el.tagName !== "DIV");
-        };
-        // First pass: Look for elements with explicit inspection metadata
-        // This ensures we always find the same component regardless of which child is hovered
-        while (current) {
-            // Ensure element is still in the DOM
-            if (!document.body.contains(current)) {
-                break;
-            }
-            // Check if this element has explicit inspection metadata
-            const hasExplicitMetadata = current.getAttribute("data-inspection-name") &&
-                current.getAttribute("data-inspection-id");
-            if (hasExplicitMetadata) {
-                const metadata = parseInspectionMetadata(current);
-                if (metadata) {
-                    elementWithExplicitMetadata = current;
-                    metadataWithExplicitId = metadata;
-                    break; // Found explicit metadata, use it
-                }
-            }
-            current = current.parentElement;
-            // Stop at body to avoid inspecting the entire page
-            if (current && (current.tagName === "BODY" || current.tagName === "HTML")) {
-                break;
-            }
+        // Get the element under the first touch point
+        const touch = e.touches[0];
+        const target = document.elementFromPoint(touch.clientX, touch.clientY);
+        if (target) {
+            inspectElement(target, isInspectionActive, isLocked, setHoveredComponent);
         }
-        // If we found explicit metadata, use it (this ensures consistent IDs)
-        if (elementWithExplicitMetadata && metadataWithExplicitId) {
-            if (process.env.NODE_ENV === "development") {
-                console.log("[Inspection] Found element with explicit metadata:", metadataWithExplicitId.componentName);
-            }
-            setHoveredComponent(metadataWithExplicitId, elementWithExplicitMetadata);
+    };
+    // Touch start handler for mobile - inspect on touch
+    const handleTouchStart = (e) => {
+        // Only process if inspection is active and we have touches
+        // Skip if it's a 3-finger touch (used for activation)
+        if (!isInspectionActive || e.touches.length === 3) {
             return;
         }
-        // Second pass: If no explicit metadata found, look for meaningful elements
-        // Reset current to target for second pass
-        current = target;
-        while (current) {
-            // Ensure element is still in the DOM
-            if (!document.body.contains(current)) {
-                break;
-            }
-            // Check if this is a meaningful element
-            if (isMeaningfulElement(current)) {
-                const metadata = parseInspectionMetadata(current);
-                if (metadata) {
-                    // Keep the first meaningful element (closest to target)
-                    if (!bestElement) {
-                        bestElement = current;
-                        bestMetadata = metadata;
-                    }
-                }
-            }
-            current = current.parentElement;
-            // Stop at body to avoid inspecting the entire page
-            if (current && (current.tagName === "BODY" || current.tagName === "HTML")) {
-                break;
-            }
-        }
-        if (bestElement && bestMetadata) {
-            if (process.env.NODE_ENV === "development") {
-                console.log("[Inspection] Found element:", bestMetadata.componentName);
-            }
-            setHoveredComponent(bestMetadata, bestElement);
-        }
-        else {
-            // Fallback: show info for the target element itself
-            const fallbackMetadata = parseInspectionMetadata(target);
-            if (fallbackMetadata) {
-                setHoveredComponent(fallbackMetadata, target);
-            }
-            else {
-                setHoveredComponent(null, null);
-            }
+        // Get the element under the first touch point
+        const touch = e.touches[0];
+        const target = document.elementFromPoint(touch.clientX, touch.clientY);
+        if (target) {
+            inspectElement(target, isInspectionActive, isLocked, setHoveredComponent);
         }
     };
     const handleMouseLeave = () => {
@@ -249,10 +293,28 @@ export const setupAutoInspection = (setHoveredComponent, isInspectionActive, isL
             setHoveredComponent(null, null);
         }
     };
+    const handleTouchEnd = () => {
+        // Clear inspection on touch end (unless locked)
+        if (isInspectionActive && !isLocked) {
+            setHoveredComponent(null, null);
+        }
+    };
+    // Add mouse event listeners
     window.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseleave", handleMouseLeave);
+    // Add touch event listeners for mobile devices
+    if (isTouchDevice) {
+        window.addEventListener("touchmove", handleTouchMove, { passive: true });
+        window.addEventListener("touchstart", handleTouchStart, { passive: true });
+        window.addEventListener("touchend", handleTouchEnd, { passive: true });
+    }
     return () => {
         window.removeEventListener("mousemove", handleMouseMove);
         document.removeEventListener("mouseleave", handleMouseLeave);
+        if (isTouchDevice) {
+            window.removeEventListener("touchmove", handleTouchMove);
+            window.removeEventListener("touchstart", handleTouchStart);
+            window.removeEventListener("touchend", handleTouchEnd);
+        }
     };
 };

package/dist/useInspectionMetadata.d.ts

@@ -27,6 +27,8 @@ export declare const useInspectionMetadata: (config: {
 }) => {
     onMouseEnter: (e: React.MouseEvent) => void;
     onMouseLeave: () => void;
+    onTouchStart: (e: React.TouchEvent) => void;
+    onTouchEnd: () => void;
     "data-inspection-id": string;
     "data-inspection-name": string;
 };

package/dist/useInspectionMetadata.js

@@ -43,9 +43,24 @@ export const useInspectionMetadata = (config) => {
             return;
         setHoveredComponent(null, null);
     };
+    // Touch handlers for mobile
+    const handleTouchStart = (e) => {
+        if (!isInspectionActive)
+            return;
+        const target = e.currentTarget;
+        setHoveredComponent(metadata, target);
+    };
+    const handleTouchEnd = () => {
+        if (!isInspectionActive)
+            return;
+        // Don't clear on touch end - let autoInspection handle it
+        // This allows touch move to continue inspecting
+    };
     return {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
         "data-inspection-id": metadata.componentId,
         "data-inspection-name": config.componentName,
     };

package/package.json

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