@zargaryanvh/react-component-inspector 1.0.0 → 1.0.2

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,136 @@ export const InspectionProvider = ({ children }) => {
     const [isLocked, setIsLocked] = useState(false);
     const [hoveredComponent, setHoveredComponentState] = useState(null);
     const [hoveredElement, setHoveredElement] = useState(null);
-    // Track CTRL key state and CTRL+H for locking
+    // 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
+    // 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;
+    }, [isInspectionActive]);
+    useEffect(() => {
+        isLockedRef.current = isLocked;
+    }, [isLocked]);
+    useEffect(() => {
+        hoveredComponentRef.current = hoveredComponent;
+    }, [hoveredComponent]);
+    // Mobile touch handlers for activation and 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();
+        // 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 - position fixed. Press H again or release CTRL to unlock.");
+                        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.");
                     }
                 }
-                // If already locked and H is pressed again, unlock (toggle behavior)
-                else if (isLocked && isInspectionActive) {
-                    e.preventDefault();
+                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] Tooltip unlocked - inspection continues while CTRL is held.");
+                        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) {
+                e.preventDefault();
+                e.stopPropagation();
+                // Ignore repeated keydown events (when key is held down)
+                if (e.repeat) {
+                    return;
+                }
+                // 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 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 +149,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,15 +179,25 @@ 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);
+        // 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);
+            }
         };
-    }, [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/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.0",
+  "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",