claude-dev-server 1.1.4 → 1.2.1

package/dist/assets/inspect-bridge.js

@@ -0,0 +1,47 @@
+// Inspect bridge script - injected into dev server iframe
+// This script enables element inspection in the left iframe and communicates with the parent window
+
+(function() {
+  window.addEventListener('message', function(e) {
+    if (e.data.type === 'enableInspect') {
+      window.__CLAUDE_INSPECT__ = true;
+      document.body.style.cursor = 'crosshair';
+    } else if (e.data.type === 'disableInspect') {
+      window.__CLAUDE_INSPECT__ = false;
+      document.body.style.cursor = '';
+    }
+  });
+
+  document.addEventListener('click', function(e) {
+    if (window.__CLAUDE_INSPECT__) {
+      e.preventDefault();
+      e.stopPropagation();
+      const el = e.target;
+      // Send element info to parent
+      window.parent.postMessage({
+        type: 'inspectElement',
+        element: {
+          tagName: el.tagName,
+          id: el.id,
+          className: el.className,
+          // Try to get React fiber
+          reactFiber: el.__reactFiber__ || el.__reactInternalInstance__
+        }
+      }, '*');
+    }
+  }, true);
+
+  document.addEventListener('mousemove', function(e) {
+    if (window.__CLAUDE_INSPECT__) {
+      window.parent.postMessage({
+        type: 'highlightElement',
+        rect: e.target.getBoundingClientRect(),
+        element: {
+          tagName: e.target.tagName,
+          id: e.target.id,
+          className: e.target.className
+        }
+      }, '*');
+    }
+  }, true);
+})();