@promakeai/inspector 1.0.0 → 1.0.3

package/src/App.tsx

@@ -1,912 +0,0 @@
-/**
- * Inspector Canvas - Main App Component
- */
-
-import { useState, useEffect, useMemo, useRef } from "react";
-import { useMessageBridge } from "./hooks/useMessageBridge";
-import { ErrorTracker } from "./utils/errorTracker";
-import { UrlTracker } from "./utils/urlTracker";
-import { Overlay } from "./components/Overlay";
-import { ControlBox } from "./components/ControlBox";
-import { Badge } from "./components/Badge";
-import { useInspectorStore } from "./store/useInspectorStore";
-import { ElementHighlighter } from "./core/highlighter";
-import {
-  ComponentInfo,
-  SelectedElementData,
-  ElementReference,
-} from "@promakeai/inspector-types";
-
-const idAttribute = "data-dev-id";
-
-const normalizeId = (id: string) => {
-  return id.replace(/\\/g, "/");
-};
-
-const deNormalizeId = (id: string) => {
-  // Her / karakterini \\\\ ile değiştir (CSS selector için double escape)
-  return id.replace(/\//g, "\\\\\\\\");
-};
-
-const isElementInViewport = (el: Element) => {
-  const rect = el.getBoundingClientRect();
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <=
-      (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-  );
-};
-const findElementById = (id: string | ElementReference) => {
-  const idString = typeof id === "string" ? id : id.id;
-  const denormalizedId = idString.replace(/\//g, "\\");
-  const escapedId = CSS.escape(denormalizedId);
-
-  console.log({
-    id: idString,
-    denormalizedId,
-    escapedId,
-  });
-
-  // Try exact match first
-  let element =
-    document.querySelector(`[${idAttribute}="${escapedId}"]`) ||
-    document.querySelector(`[${idAttribute}="${CSS.escape(idString)}"]`) ||
-    document.querySelector(
-      `[${idAttribute}="${CSS.escape(normalizeId(idString))}"]`
-    );
-
-  // If not found, try to find by partial match (for components)
-  if (!element) {
-    const allElements = document.querySelectorAll(`[${idAttribute}]`);
-    for (const el of allElements) {
-      const devId = el.getAttribute(idAttribute);
-      if (devId && devId.includes(idString)) {
-        element = el;
-        break;
-      }
-    }
-  }
-
-  // If object with selector provided, try selector as fallback
-  if (!element && typeof id === "object" && id.selector) {
-    element = document.querySelector(id.selector);
-  }
-
-  return element;
-};
-
-function generateSelector(element: HTMLElement): string {
-  if (element.id) {
-    return "#" + element.id;
-  }
-
-  let selector = element.tagName.toLowerCase();
-
-  if (element.className && typeof element.className === "string") {
-    const classes = element.className
-      .trim()
-      .split(/\s+/)
-      .filter((c) => c);
-    if (classes.length > 0) {
-      selector += "." + classes.join(".");
-    }
-  }
-
-  return selector;
-}
-
-function getComponentInfo(element: HTMLElement): ComponentInfo | null {
-  const componentElement = element.hasAttribute(idAttribute)
-    ? element
-    : element.closest(`[${idAttribute}]`);
-
-  const dataDevId = componentElement?.getAttribute(idAttribute);
-  // Get all attributes from vite-plugin-component-debugger
-  const dataDevName = componentElement?.getAttribute("data-dev-name");
-  const dataDevPath = componentElement?.getAttribute("data-dev-path");
-  const dataDevComponent = componentElement?.getAttribute("data-dev-component");
-
-  // Normalize paths: replace Windows backslashes with forward slashes
-  const normalizedPath = dataDevPath ? normalizeId(dataDevPath) : undefined;
-  const normalizedId = dataDevId ? normalizeId(dataDevId) : undefined;
-
-  const parts = dataDevId?.split(":");
-
-  const lineNumber = parts?.[1] ? parseInt(parts[1], 10) : 0;
-  const columnNumber = parts?.[2] ? parseInt(parts[2], 10) : 0;
-
-  return {
-    id: normalizedId,
-    name: dataDevName || undefined,
-    path: normalizedPath || undefined,
-    fileName: normalizedPath || "production build",
-    lineNumber: lineNumber,
-    columnNumber: columnNumber,
-    component: dataDevComponent || dataDevName || "Unknown",
-  };
-}
-
-function getElementReference(element: HTMLElement): ElementReference {
-  const component = getComponentInfo(element);
-  return {
-    id: component?.id || "",
-    tagName: element.tagName,
-    className: element.className,
-    selector: generateSelector(element),
-  };
-}
-
-function collectParents(element: HTMLElement): ElementReference[] {
-  const parents: ElementReference[] = [];
-  let current = element.parentElement;
-  let count = 0;
-
-  while (current && count < 3) {
-    // Skip inspector's own elements
-    if (!current.closest("[data-inspector-ignore]")) {
-      parents.push(getElementReference(current));
-      count++;
-    }
-    current = current.parentElement;
-  }
-
-  return parents;
-}
-
-function collectChildren(element: HTMLElement): ElementReference[] {
-  const children: ElementReference[] = [];
-  const childElements = Array.from(element.children) as HTMLElement[];
-
-  for (let i = 0; i < Math.min(3, childElements.length); i++) {
-    children.push(getElementReference(childElements[i]));
-  }
-
-  return children;
-}
-
-function getElementsAtPoint(x: number, y: number): HTMLElement[] {
-  const elements: HTMLElement[] = [];
-  let currentElement = document.elementFromPoint(x, y) as HTMLElement;
-
-  if (!currentElement) return elements;
-
-  // Skip inspector's own elements
-  if (currentElement.closest("[data-inspector-ignore]")) {
-    return elements;
-  }
-
-  // Skip SVG elements - find the closest HTML parent
-  if (currentElement instanceof SVGElement) {
-    let parent = currentElement.parentElement;
-    while (parent && parent instanceof SVGElement) {
-      parent = parent.parentElement;
-    }
-    if (parent) {
-      currentElement = parent as HTMLElement;
-    } else {
-      return elements;
-    }
-  }
-
-  // Start with the clicked element
-  elements.push(currentElement);
-
-  // Collect all meaningful direct children (not just at click point)
-  const collectMeaningfulChildren = (parent: HTMLElement, depth: number) => {
-    if (depth > 2) return; // Remove element count limit
-
-    const children = Array.from(parent.children);
-
-    console.log(`🔍 Checking children at depth ${depth}:`, {
-      parent: parent.tagName,
-      childrenCount: children.length,
-      currentStackLength: elements.length,
-    });
-
-    // Collect ALL meaningful children, prioritizing those with data-dev-id
-    const meaningfulChildren: HTMLElement[] = [];
-
-    for (const child of children) {
-      // Skip SVG elements and non-HTML elements
-      if (!(child instanceof HTMLElement)) continue;
-
-      // Skip inspector's own elements
-      if (child.closest("[data-inspector-ignore]")) continue;
-
-      const rect = child.getBoundingClientRect();
-      const hasDevId = child.hasAttribute("data-dev-id");
-      const hasDimensions = rect.width > 0 && rect.height > 0;
-      const hasChildren = child.children.length > 0;
-      const hasText = child.textContent && child.textContent.trim().length > 0;
-      const isInteractive = [
-        "BUTTON",
-        "A",
-        "INPUT",
-        "IMG",
-        "VIDEO",
-        "SELECT",
-        "TEXTAREA",
-      ].includes(child.tagName);
-
-      const isMeaningful =
-        hasDevId ||
-        (hasDimensions && (hasChildren || hasText || isInteractive));
-
-      console.log(`  📦 Child ${child.tagName}:`, {
-        isMeaningful,
-        hasDevId,
-        hasDimensions,
-        hasChildren,
-        hasText,
-        isInteractive,
-        rect: { width: rect.width, height: rect.height },
-      });
-
-      if (isMeaningful) {
-        meaningfulChildren.push(child as HTMLElement);
-      }
-    }
-
-    console.log(`  ✅ Found ${meaningfulChildren.length} meaningful children`);
-
-    // Add ALL meaningful children (prioritize data-dev-id first)
-    const childrenWithDevId = meaningfulChildren.filter((c) =>
-      c.hasAttribute("data-dev-id")
-    );
-    const childrenWithoutDevId = meaningfulChildren.filter(
-      (c) => !c.hasAttribute("data-dev-id")
-    );
-    const sortedChildren = [...childrenWithDevId, ...childrenWithoutDevId];
-
-    for (const child of sortedChildren) {
-      console.log(`  ➕ Adding to stack:`, child.tagName, child);
-      elements.push(child);
-      // Recursively check EACH child's children (to go deeper for all branches)
-      collectMeaningfulChildren(child, depth + 1);
-    }
-  };
-
-  collectMeaningfulChildren(currentElement, 1);
-
-  return elements;
-}
-
-function getElementData(element: HTMLElement): SelectedElementData {
-  const isTextNode = element.textContent && element.children.length === 0;
-  const isImageNode = element.tagName === "IMG";
-
-  const component = getComponentInfo(element);
-
-  return {
-    id: component?.id || "",
-    tagName: element.tagName,
-    className: element.className,
-    component: component,
-    position: {
-      top: element.getBoundingClientRect().top,
-      left: element.getBoundingClientRect().left,
-      width: element.getBoundingClientRect().width,
-      height: element.getBoundingClientRect().height,
-    },
-    isTextNode: isTextNode ? true : false,
-    textContent: isTextNode ? element.textContent?.trim() : "",
-    isImageNode,
-    imageUrl: isImageNode ? (element as HTMLImageElement).src : "",
-    selector: generateSelector(element),
-    currentRoute: window.location.pathname,
-    parents: collectParents(element),
-    children: collectChildren(element),
-  };
-}
-export function App() {
-  const { setTheme, setLabels, labels } = useInspectorStore();
-  const [inspectMode, setInspectMode] = useState(false);
-  const highlighter = useRef<ElementHighlighter | null>(null);
-  useEffect(() => {
-    highlighter.current = new ElementHighlighter();
-  }, []);
-  const [isPaused, setIsPaused] = useState(false);
-  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(
-    null
-  );
-  const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(
-    null
-  );
-  const [selectedElementData, setSelectedElementData] =
-    useState<SelectedElementData | null>(null);
-  const [activeTab, setActiveTab] = useState<"text" | "image" | "style" | null>(
-    null
-  );
-  const [showTextEditor, setShowTextEditor] = useState(false);
-  const [showImageEditor, setShowImageEditor] = useState(false);
-  const [showStyleEditor, setShowStyleEditor] = useState(false);
-  const [badgeVisible, setBadgeVisible] = useState(false);
-  const [showChildBorders, setShowChildBorders] = useState(true);
-  const [elementStack, setElementStack] = useState<HTMLElement[]>([]);
-
-  const { sendToParent, listenToParent } = useMessageBridge();
-
-  // Refs for trackers
-  const errorTrackerRef = useRef<ErrorTracker | null>(null);
-  const urlTrackerRef = useRef<UrlTracker | null>(null);
-
-  // Determine which tabs to show
-  const availableTabs = useMemo(() => {
-    const tabs: ("text" | "image" | "style")[] = [];
-    if (showTextEditor) tabs.push("text");
-    if (showImageEditor) tabs.push("image");
-    if (showStyleEditor) tabs.push("style");
-    return tabs;
-  }, [showTextEditor, showImageEditor, showStyleEditor]);
-
-  // Auto-select first available tab
-  useEffect(() => {
-    if (availableTabs.length > 0 && !activeTab) {
-      setActiveTab(availableTabs[0]);
-    }
-  }, [availableTabs, activeTab]);
-
-  // Initialize error and URL tracking
-  useEffect(() => {
-    // Error tracker
-    errorTrackerRef.current = new ErrorTracker((errorData) => {
-      sendToParent("INSPECTOR_ERROR", errorData);
-    });
-    errorTrackerRef.current.start();
-
-    // URL tracker
-    urlTrackerRef.current = new UrlTracker((urlData) => {
-      sendToParent("URL_CHANGED", urlData);
-    });
-    urlTrackerRef.current.start();
-
-    return () => {
-      errorTrackerRef.current?.stop();
-    };
-  }, [sendToParent]);
-
-  // Listen for messages from parent
-  useEffect(() => {
-    return listenToParent((message) => {
-      switch (message.type) {
-        case "TOGGLE_INSPECTOR":
-          setInspectMode(message.active);
-          if (message.labels) {
-            setLabels(message.labels);
-          }
-          if (message.theme) {
-            setTheme(message.theme);
-          }
-          break;
-
-        case "SHOW_CONTENT_INPUT":
-          setShowTextEditor(message.show);
-          break;
-
-        case "SHOW_IMAGE_INPUT":
-          setShowImageEditor(message.show);
-          break;
-
-        case "SHOW_STYLE_EDITOR":
-          setShowStyleEditor(message.show);
-          break;
-
-        case "SET_BADGE_VISIBLE":
-          setBadgeVisible(message.visible);
-          if (message.badgeText) {
-            setLabels({ badgeText: message.badgeText });
-          }
-          break;
-
-        case "HIGHLIGHT_ELEMENT":
-          handleHighlightElement(message.identifier, message.options);
-          break;
-
-        case "GET_ELEMENT_BY_ID":
-          handleGetElementById(message.inspectorId);
-          break;
-
-        case "SET_SHOW_CHILD_BORDERS":
-          setShowChildBorders(message.show);
-          break;
-      }
-    });
-  }, [listenToParent]);
-
-  // Mouse move handler for hover
-  useEffect(() => {
-    if (!inspectMode || isPaused) return;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-
-      // Ignore inspector's own elements
-      if (target.closest("[data-inspector-ignore]")) {
-        setHoveredElement(null);
-        return;
-      }
-
-      setHoveredElement(target);
-    };
-
-    document.addEventListener("mousemove", handleMouseMove, true);
-    return () =>
-      document.removeEventListener("mousemove", handleMouseMove, true);
-  }, [inspectMode, isPaused]);
-
-  // Click handler for element selection
-  useEffect(() => {
-    if (!inspectMode) return;
-
-    const handleClick = (e: MouseEvent) => {
-      let target = e.target as HTMLElement;
-
-      // Ignore inspector's own elements
-      if (target.closest && target.closest("[data-inspector-ignore]")) {
-        return;
-      }
-
-      // If target is SVG, find the closest HTML parent
-      if (target instanceof SVGElement) {
-        let parent = target.parentElement;
-        while (parent && parent instanceof SVGElement) {
-          parent = parent.parentElement;
-        }
-        if (parent) {
-          target = parent as HTMLElement;
-        } else {
-          return; // No HTML parent found
-        }
-      }
-
-      // If already paused, unpause
-      if (isPaused) {
-        e.preventDefault();
-        e.stopPropagation();
-        unpauseInspection();
-        return;
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      // Get element data and pause inspection
-      const elementData = getElementData(target);
-
-      // Collect z-index stack
-      const stack = getElementsAtPoint(e.clientX, e.clientY);
-      console.log("Element stack:", stack.length, stack);
-      setElementStack(stack);
-
-      setSelectedElement(target);
-      setSelectedElementData(elementData);
-      pauseInspection();
-
-      // Send to parent
-      sendToParent("INSPECTOR_ELEMENT_SELECTED", elementData);
-    };
-
-    document.addEventListener("click", handleClick, true);
-    return () => document.removeEventListener("click", handleClick, true);
-  }, [inspectMode, isPaused, sendToParent]);
-
-  // Cursor style
-  useEffect(() => {
-    if (inspectMode && !isPaused) {
-      document.body.style.cursor = "crosshair";
-    } else {
-      document.body.style.cursor = "";
-    }
-  }, [inspectMode, isPaused]);
-
-  function pauseInspection() {
-    setIsPaused(true);
-    document.body.style.overflow = "hidden";
-  }
-
-  async function unpauseInspection() {
-    setIsPaused(false);
-    setSelectedElement(null);
-    setSelectedElementData(null);
-    setActiveTab(null);
-    setElementStack([]);
-    document.body.style.overflow = "";
-
-    // Clean up window variables
-    (window as any).__styleEditorHasChanges = false;
-    (window as any).__styleEditorSave = null;
-  }
-
-  function handleElementStackSelect(element: HTMLElement) {
-    console.log("🔄 Element stack select:", element);
-    const elementData = getElementData(element);
-    console.log("📦 New element data:", elementData);
-    setSelectedElement(element);
-    setSelectedElementData(elementData);
-
-    // Send to parent
-    sendToParent("INSPECTOR_ELEMENT_SELECTED", elementData);
-  }
-
-  function handleHighlightElement(identifier: string | any, options?: any) {
-    // Check if we need to navigate to a different route first
-    const targetRoute =
-      typeof identifier === "object"
-        ? identifier.targetRoute
-        : options?.targetRoute;
-
-    if (targetRoute && targetRoute !== window.location.pathname) {
-      console.log(`Navigating to route: ${targetRoute}`);
-      window.history.pushState({}, "", targetRoute);
-
-      // Dispatch popstate event to trigger React Router
-      window.dispatchEvent(new PopStateEvent("popstate"));
-
-      // Wait for route change and DOM update
-      setTimeout(() => {
-        handleHighlightElement(identifier, options);
-      }, 300);
-      return;
-    }
-
-    let element: Element | null = null;
-
-    // If identifier is an object with element data
-    if (typeof identifier === "object" && identifier !== null) {
-      // Try by inspector ID first
-      if (identifier.id) {
-        element = findElementById(identifier.id);
-      }
-
-      // If not found or element is invisible, try by selector with smart matching
-      if (
-        (!element || element.getBoundingClientRect().width === 0) &&
-        identifier.selector
-      ) {
-        // Try with provided selector first - find ALL matching elements
-        const candidates = document.querySelectorAll(identifier.selector);
-
-        if (candidates.length === 1) {
-          // Only one match, use it
-          element = candidates[0];
-        } else if (candidates.length > 1) {
-          // Multiple matches - filter by text content or position
-          for (const candidate of candidates) {
-            const rect = candidate.getBoundingClientRect();
-
-            // Skip invisible elements
-            if (rect.width === 0 || rect.height === 0) continue;
-
-            // Match by text content if available
-            if (
-              identifier.textContent &&
-              candidate.textContent?.trim() === identifier.textContent.trim()
-            ) {
-              element = candidate;
-              break;
-            }
-
-            // Match by approximate position if available
-            if (identifier.position) {
-              const posMatch =
-                Math.abs(rect.top - identifier.position.top) < 5 &&
-                Math.abs(rect.left - identifier.position.left) < 5;
-              if (posMatch) {
-                element = candidate;
-                break;
-              }
-            }
-          }
-
-          // If still no match, use first visible element
-          if (!element) {
-            for (const candidate of candidates) {
-              const rect = candidate.getBoundingClientRect();
-              if (rect.width > 0 && rect.height > 0) {
-                element = candidate;
-                break;
-              }
-            }
-          }
-        }
-
-        // Fallback to class name if selector fails
-        if (!element && identifier.className) {
-          const classes = identifier.className.split(" ").filter(Boolean);
-          if (classes.length > 0) {
-            const elements = document.getElementsByClassName(classes[0]);
-            for (let i = 0; i < elements.length; i++) {
-              const rect = elements[i].getBoundingClientRect();
-              if (rect.width > 0 && rect.height > 0) {
-                element = elements[i];
-                break;
-              }
-            }
-          }
-        }
-      }
-    } else if (typeof identifier === "string") {
-      // Fallback: identifier is a string (ID or selector)
-      // Try 1: Find by inspector ID
-      element = findElementById(identifier);
-
-      // Try 2: If not found, try as CSS selector
-      if (!element) {
-        try {
-          element = document.querySelector(identifier);
-        } catch (e) {
-          // Invalid selector, continue to next fallback
-        }
-      }
-
-      // Try 3: If still not found, try finding by class name
-      if (!element && identifier.includes(".")) {
-        const className = identifier.split(".").filter(Boolean).join(" ");
-        const elements = document.getElementsByClassName(className);
-        if (elements.length > 0) {
-          element = elements[0];
-        }
-      }
-    }
-
-    console.log("🔍 Highlight Debug:", {
-      element,
-      identifier,
-      elementRect: element?.getBoundingClientRect(),
-      elementInViewport: element ? isElementInViewport(element) : false,
-    });
-
-    if (!element) {
-      console.warn("❌ Element not found for highlighting:", identifier);
-      return;
-    }
-
-    // Check if element is visible, try parents if not
-    const rect = element.getBoundingClientRect();
-    if (rect.width === 0 || rect.height === 0) {
-      console.log("⚠️ Element is invisible, trying parents...");
-
-      // Try to find visible parent
-      if (typeof identifier === "object" && identifier.parents) {
-        for (const parent of identifier.parents) {
-          let parentElement = null;
-
-          // Try by ID first
-          if (parent.id) {
-            parentElement = findElementById(parent.id);
-          }
-
-          // Try by selector
-          if (!parentElement && parent.selector) {
-            parentElement = document.querySelector(parent.selector);
-          }
-
-          if (parentElement) {
-            const parentRect = parentElement.getBoundingClientRect();
-            if (parentRect.width > 0 && parentRect.height > 0) {
-              console.log("✅ Found visible parent:", parent.tagName);
-              element = parentElement;
-              break;
-            }
-          }
-        }
-      }
-    }
-
-    // Highlight element
-    if (highlighter.current && element instanceof HTMLElement) {
-      highlighter.current?.highlight(element, {
-        color: options?.color || "#4417db",
-        duration: options?.duration || 2000,
-      });
-
-      // Scroll into view
-      if (options?.scrollIntoView !== false) {
-        element.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest",
-          inline: "nearest",
-        });
-      }
-    }
-  }
-
-  function handleGetElementById(inspectorId: string) {
-    const element = findElementById(inspectorId);
-
-    if (element && element instanceof HTMLElement) {
-      const elementData = getElementData(element);
-      sendToParent("ELEMENT_INFO_RESPONSE", elementData);
-    } else {
-      sendToParent("ELEMENT_INFO_RESPONSE", {
-        error: "Element not found",
-        inspectorId,
-      });
-    }
-  }
-
-  // Block scroll and pointer events when inspector is active
-  useEffect(() => {
-    if (isPaused) {
-      // Track if user is dragging
-      let isDragging = false;
-
-      const handlePointerDown = () => {
-        isDragging = true;
-      };
-
-      const handlePointerUp = () => {
-        isDragging = false;
-      };
-
-      // Listen to pointer events on inspector root to track dragging
-      const inspectorRoot = document.getElementById("inspector-canvas-root");
-      if (inspectorRoot) {
-        inspectorRoot.addEventListener("pointerdown", handlePointerDown);
-        inspectorRoot.addEventListener("pointerup", handlePointerUp);
-        document.addEventListener("pointerup", handlePointerUp); // Global pointer up
-      }
-
-      // Prevent scroll on body
-      const preventScroll = (e: WheelEvent | TouchEvent) => {
-        // Allow scroll inside inspector components
-        const target = e.target as HTMLElement;
-        if (target.closest("#inspector-canvas-root")) {
-          return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-      };
-
-      // Prevent all pointer events on body
-      const preventPointer = (e: PointerEvent | MouseEvent) => {
-        const target = e.target as HTMLElement;
-
-        // Allow events inside inspector
-        if (target.closest("#inspector-canvas-root")) {
-          return;
-        }
-
-        // Don't prevent if user is dragging
-        if (isDragging) {
-          return;
-        }
-
-        // Don't prevent if mouse is leaving viewport
-        if (e.type === "mouseleave" || e.type === "mouseout") {
-          return;
-        }
-
-        e.preventDefault();
-        e.stopPropagation();
-      };
-
-      // Add event listeners with capture phase to catch all events
-      document.addEventListener("wheel", preventScroll, {
-        passive: false,
-        capture: true,
-      });
-      document.addEventListener("touchmove", preventScroll, {
-        passive: false,
-        capture: true,
-      });
-      document.addEventListener("pointerdown", preventPointer, {
-        capture: true,
-      });
-      document.addEventListener("pointerup", preventPointer, { capture: true });
-      document.addEventListener("pointermove", preventPointer, {
-        capture: true,
-      });
-      document.addEventListener("mousedown", preventPointer, { capture: true });
-      document.addEventListener("mouseup", preventPointer, { capture: true });
-      document.addEventListener("mousemove", preventPointer, { capture: true });
-      document.addEventListener("click", preventPointer, { capture: true });
-
-      // Prevent keyboard events
-      const preventKeyboard = (e: KeyboardEvent) => {
-        const target = e.target as HTMLElement;
-        if (target.closest("#inspector-canvas-root")) {
-          return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-      };
-      document.addEventListener("keydown", preventKeyboard, { capture: true });
-      document.addEventListener("keyup", preventKeyboard, { capture: true });
-
-      return () => {
-        // Cleanup drag tracking
-        const inspectorRoot = document.getElementById("inspector-canvas-root");
-        if (inspectorRoot) {
-          inspectorRoot.removeEventListener("pointerdown", handlePointerDown);
-          inspectorRoot.removeEventListener("pointerup", handlePointerUp);
-        }
-        document.removeEventListener("pointerup", handlePointerUp);
-
-        document.removeEventListener("wheel", preventScroll, {
-          capture: true,
-        } as any);
-        document.removeEventListener("touchmove", preventScroll, {
-          capture: true,
-        } as any);
-        document.removeEventListener("pointerdown", preventPointer, {
-          capture: true,
-        });
-        document.removeEventListener("pointerup", preventPointer, {
-          capture: true,
-        });
-        document.removeEventListener("pointermove", preventPointer, {
-          capture: true,
-        });
-        document.removeEventListener("mousedown", preventPointer, {
-          capture: true,
-        });
-        document.removeEventListener("mouseup", preventPointer, {
-          capture: true,
-        });
-        document.removeEventListener("mousemove", preventPointer, {
-          capture: true,
-        });
-        document.removeEventListener("click", preventPointer, {
-          capture: true,
-        });
-        document.removeEventListener("keydown", preventKeyboard, {
-          capture: true,
-        });
-        document.removeEventListener("keyup", preventKeyboard, {
-          capture: true,
-        });
-      };
-    }
-  }, [isPaused]);
-
-  return (
-    <div
-      id="inspector-canvas-root"
-      data-inspector-ignore
-      className={isPaused ? "inspector-active" : ""}
-    >
-      {/* Backdrop to block all interactions (but not close inspector) */}
-      {isPaused && (
-        <div
-          className="inspector-backdrop"
-          onClick={(e) => {
-            // Prevent backdrop clicks from closing inspector
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-        />
-      )}
-
-      <Overlay
-        element={inspectMode && !isPaused ? hoveredElement : null}
-        selectedElement={isPaused ? selectedElement : null}
-        showChildBorders={showChildBorders}
-      />
-      {isPaused && selectedElement && selectedElementData && (
-        <ControlBox
-          element={selectedElement}
-          elementData={selectedElementData}
-          activeTab={activeTab}
-          availableTabs={availableTabs}
-          onTabChange={setActiveTab}
-          onClose={unpauseInspection}
-          onPromptSubmit={(prompt) => {
-            sendToParent("INSPECTOR_PROMPT_SUBMITTED", {
-              prompt,
-              element: selectedElementData,
-            });
-            setInspectMode(false);
-            unpauseInspection();
-          }}
-          elementStack={elementStack}
-          onElementSelect={handleElementStackSelect}
-          labels={labels}
-        />
-      )}
-      <Badge visible={badgeVisible} />
-    </div>
-  );
-}