pixelpick 2.0.0

package/dist/chrome-mv3/content-scripts/content.js

@@ -0,0 +1,34 @@
+var content=(function(){"use strict";function E(n){return n}const u={matches:["<all_urls>"],runAt:"document_start",main(){function n(){return!!(chrome.runtime&&chrome.runtime.id)}function t(){if(document.getElementById("pixelpick-reload-notification"))return;const e=document.createElement("div");if(e.id="pixelpick-reload-notification",e.style.cssText=`
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: #1e293b;
+        color: white;
+        padding: 16px 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+        z-index: 2147483647;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font-size: 14px;
+        max-width: 320px;
+        animation: pixelpick-slidein 0.3s ease-out;
+      `,e.innerHTML=`
+        <div style="font-weight: 600; margin-bottom: 8px;">🔍 PixelPick Extension Updated</div>
+        <div style="opacity: 0.9; margin-bottom: 12px;">Please reload this page to continue using element selection.</div>
+        <button id="pixelpick-reload-btn" style="
+          background: #3b82f6;
+          color: white;
+          border: none;
+          padding: 8px 16px;
+          border-radius: 6px;
+          cursor: pointer;
+          font-size: 13px;
+          font-weight: 500;
+        ">Reload Page</button>
+      `,!document.getElementById("pixelpick-reload-styles")){const i=document.createElement("style");i.id="pixelpick-reload-styles",i.textContent=`
+          @keyframes pixelpick-slidein {
+            from { transform: translateX(400px); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+          }
+        `,document.head.appendChild(i)}document.body.appendChild(e),document.getElementById("pixelpick-reload-btn")?.addEventListener("click",()=>{window.location.reload()}),setTimeout(()=>{e.parentNode&&(e.style.animation="pixelpick-slidein 0.3s ease-out reverse",setTimeout(()=>e.remove(),300))},1e4)}if(n()){const e=document.createElement("script");e.src=chrome.runtime.getURL("src/inspector/index.js"),e.type="module",(document.head||document.documentElement).appendChild(e)}else console.error("[PixelPick Bridge] Extension context invalidated on load"),t();window.addEventListener("message",e=>{if(e.source!==window||!e.data||e.data.source!=="pixelpick-inspector")return;const{type:i,data:r}=e.data;switch(i){case"selection":if(!n()){console.error("[PixelPick Bridge] Extension context invalidated - cannot send selection"),t();return}chrome.runtime.sendMessage({type:"selection",data:r},x=>{chrome.runtime.lastError?(console.error("[PixelPick Bridge] Error sending to background:",chrome.runtime.lastError),chrome.runtime.lastError.message?.includes("Extension context invalidated")&&t()):console.log("[PixelPick Bridge] Selection sent to background")});break;case"picker_deactivated":chrome.runtime.sendMessage({type:"picker_deactivated"},x=>{chrome.runtime.lastError&&console.error("[PixelPick Bridge] Error sending picker_deactivated:",chrome.runtime.lastError)});break;default:console.log("[PixelPick Bridge] Unknown message type:",i)}}),chrome.runtime.onMessage.addListener((e,i,r)=>{if(e.type==="activate_picker")return window.postMessage({source:"pixelpick-bridge",type:"activate_picker"},"*"),r({success:!0}),!0;if(e.type==="deactivate_picker")return window.postMessage({source:"pixelpick-bridge",type:"deactivate_picker"},"*"),r({success:!0}),!0}),console.log("[PixelPick Bridge] Content bridge loaded")}};function s(n,...t){}const p={debug:(...n)=>s(console.debug,...n),log:(...n)=>s(console.log,...n),warn:(...n)=>s(console.warn,...n),error:(...n)=>s(console.error,...n)},l=globalThis.browser?.runtime?.id?globalThis.browser:globalThis.chrome;var m=class d extends Event{static EVENT_NAME=c("wxt:locationchange");constructor(t,e){super(d.EVENT_NAME,{}),this.newUrl=t,this.oldUrl=e}};function c(n){return`${l?.runtime?.id}:content:${n}`}function h(n){let t,e;return{run(){t==null&&(e=new URL(location.href),t=n.setInterval(()=>{let i=new URL(location.href);i.href!==e.href&&(window.dispatchEvent(new m(i,e)),e=i)},1e3))}}}var g=class o{static SCRIPT_STARTED_MESSAGE_TYPE=c("wxt:content-script-started");id;abortController;locationWatcher=h(this);constructor(t,e){this.contentScriptName=t,this.options=e,this.id=Math.random().toString(36).slice(2),this.abortController=new AbortController,this.stopOldScripts(),this.listenForNewerScripts()}get signal(){return this.abortController.signal}abort(t){return this.abortController.abort(t)}get isInvalid(){return l.runtime?.id==null&&this.notifyInvalidated(),this.signal.aborted}get isValid(){return!this.isInvalid}onInvalidated(t){return this.signal.addEventListener("abort",t),()=>this.signal.removeEventListener("abort",t)}block(){return new Promise(()=>{})}setInterval(t,e){const i=setInterval(()=>{this.isValid&&t()},e);return this.onInvalidated(()=>clearInterval(i)),i}setTimeout(t,e){const i=setTimeout(()=>{this.isValid&&t()},e);return this.onInvalidated(()=>clearTimeout(i)),i}requestAnimationFrame(t){const e=requestAnimationFrame((...i)=>{this.isValid&&t(...i)});return this.onInvalidated(()=>cancelAnimationFrame(e)),e}requestIdleCallback(t,e){const i=requestIdleCallback((...r)=>{this.signal.aborted||t(...r)},e);return this.onInvalidated(()=>cancelIdleCallback(i)),i}addEventListener(t,e,i,r){e==="wxt:locationchange"&&this.isValid&&this.locationWatcher.run(),t.addEventListener?.(e.startsWith("wxt:")?c(e):e,i,{...r,signal:this.signal})}notifyInvalidated(){this.abort("Content script context invalidated"),p.debug(`Content script "${this.contentScriptName}" context invalidated`)}stopOldScripts(){document.dispatchEvent(new CustomEvent(o.SCRIPT_STARTED_MESSAGE_TYPE,{detail:{contentScriptName:this.contentScriptName,messageId:this.id}})),window.postMessage({type:o.SCRIPT_STARTED_MESSAGE_TYPE,contentScriptName:this.contentScriptName,messageId:this.id},"*")}verifyScriptStartedEvent(t){const e=t.detail?.contentScriptName===this.contentScriptName,i=t.detail?.messageId===this.id;return e&&!i}listenForNewerScripts(){const t=e=>{!(e instanceof CustomEvent)||!this.verifyScriptStartedEvent(e)||this.notifyInvalidated()};document.addEventListener(o.SCRIPT_STARTED_MESSAGE_TYPE,t),this.onInvalidated(()=>document.removeEventListener(o.SCRIPT_STARTED_MESSAGE_TYPE,t))}};function b(){}function a(n,...t){}const f={debug:(...n)=>a(console.debug,...n),log:(...n)=>a(console.log,...n),warn:(...n)=>a(console.warn,...n),error:(...n)=>a(console.error,...n)};return(async()=>{try{const{main:n,...t}=u;return await n(new g("content",t))}catch(n){throw f.error('The content script "content" crashed on startup!',n),n}})()})();
+content;

package/dist/chrome-mv3/manifest.json

@@ -0,0 +1 @@
+{"manifest_version":3,"name":"PixelPick","description":"Select UI elements and send context to Claude Code","version":"2.0.0","icons":{"16":"icon/16.png","48":"icon/48.png","128":"icon/128.png"},"permissions":["activeTab","scripting","alarms","sidePanel"],"host_permissions":["<all_urls>"],"action":{"default_title":"Open PixelPick","default_icon":{"16":"icon/16.png","48":"icon/48.png","128":"icon/128.png"}},"side_panel":{"default_path":"sidepanel.html"},"minimum_chrome_version":"116","content_security_policy":{"extension_pages":"script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"},"web_accessible_resources":[{"resources":["src/inspector/index.js","src/inspector/dom-inspector.js","src/inspector/react-detector.js","src/inspector/picker.js","src/inspector/highlight.js","src/constants.js"],"matches":["<all_urls>"]}],"background":{"service_worker":"background.js"},"content_scripts":[{"matches":["<all_urls>"],"run_at":"document_start","js":["content-scripts/content.js"]}]}

package/dist/chrome-mv3/sidepanel.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PixelPick</title>
+    <script type="module" crossorigin src="/chunks/sidepanel-CzCbYvqW.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/sidepanel-D7qwGDau.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/dist/chrome-mv3/src/constants.js

@@ -0,0 +1,63 @@
+// Extension-specific constants for PixelPick Chrome Extension
+// Note: Extension files cannot import from parent directories due to Chrome manifest restrictions
+
+/**
+ * WebSocket connection configuration
+ */
+export const WS_PORT = 9315; // TODO: Make configurable via chrome.storage if needed
+export const WS_URL = `ws://localhost:${WS_PORT}`;
+
+export const WEBSOCKET_CONFIG = {
+  HEARTBEAT_INTERVAL: 20000, // 20 seconds - keep service worker alive
+  RECONNECT_DELAYS: [3000, 6000, 12000, 24000, 60000], // Exponential backoff
+  MAX_RECONNECT_ATTEMPTS: 10,
+};
+
+/**
+ * Badge states for extension icon
+ */
+export const BADGE_STATES = {
+  CONNECTED: {
+    color: '#10b981', // Green
+    text: '',
+  },
+  DISCONNECTED: {
+    color: '#f59e0b', // Yellow/Orange
+    text: '!',
+  },
+  ERROR: {
+    color: '#ef4444', // Red
+    text: 'X',
+  },
+};
+
+/**
+ * Highlight overlay styles for picker mode
+ */
+export const HIGHLIGHT_STYLES = {
+  BORDER_COLOR: '#0ea5e9', // Sky blue
+  BORDER_WIDTH: '2px',
+  BACKGROUND_COLOR: 'rgba(14, 165, 233, 0.1)', // 10% opacity
+  BORDER_RADIUS: '2px',
+  TRANSITION: 'all 0.05s ease-out',
+  Z_INDEX: '2147483647', // Max z-index
+};
+
+/**
+ * React detection configuration
+ */
+export const REACT_CONFIG = {
+  MAX_COMPONENT_TREE_DEPTH: 5,
+  MAX_PROPS_LENGTH: 200,
+  FIBER_KEY_PATTERNS: ['__reactFiber', '__reactInternalInstance'],
+  CONTAINER_KEY_PATTERN: '__reactContainer',
+};
+
+/**
+ * Tailwind CSS class patterns for detection
+ */
+export const TAILWIND_PATTERNS = [
+  /^bg-/, /^text-/, /^flex/, /^grid/, /^p-/, /^m-/,
+  /^w-/, /^h-/, /^rounded/, /^shadow/, /^border/,
+  /^hover:/, /^focus:/, /^active:/, /^transition/,
+];

package/dist/chrome-mv3/src/inspector/dom-inspector.js

@@ -0,0 +1,165 @@
+// DOM element inspection utilities
+import { TAILWIND_PATTERNS } from '../constants.js';
+import { detectFramework, extractReactData, getReactVersion } from './react-detector.js';
+
+/**
+ * Inspects a DOM element and extracts all relevant data
+ * @param {HTMLElement} element
+ * @returns {Object} - Complete element inspection data
+ */
+export function inspectElement(element) {
+  const result = {
+    tagName: element.tagName.toLowerCase(),
+    id: element.id || null,
+    className: element.className || null,
+    textContent: element.textContent?.trim().slice(0, 100) || null,
+    selector: generateSelector(element),
+    styles: getComputedStylesAndTailwind(element),
+    boundingBox: element.getBoundingClientRect().toJSON(),
+    accessibility: getAccessibilityInfo(element),
+    framework: detectFramework(element),
+    component: null,
+    props: null,
+    fileLocation: null,
+    componentTree: null,
+  };
+
+  // Framework-specific enrichment
+  if (result.framework === 'react') {
+    const reactData = extractReactData(element);
+    if (reactData) {
+      result.component = reactData.name;
+      result.props = reactData.props;
+      result.fileLocation = reactData.fileLocation;
+      result.componentTree = reactData.tree;
+
+      // Add React version warning if applicable
+      const version = getReactVersion();
+      if (version.startsWith('19') && !reactData.fileLocation) {
+        result.reactVersionNote = 'React 19 detected - file location may be unavailable';
+      }
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Generates a unique CSS selector for an element
+ * Priority: id > data-testid > nth-child path
+ * @param {HTMLElement} element
+ * @returns {string}
+ */
+export function generateSelector(element) {
+  if (element.id) {
+    return `#${element.id}`;
+  }
+
+  if (element.hasAttribute('data-testid')) {
+    return `[data-testid="${element.getAttribute('data-testid')}"]`;
+  }
+
+  // Generate nth-child path
+  const path = [];
+  let current = element;
+
+  while (current && current !== document.documentElement) {
+    let selector = current.tagName.toLowerCase();
+
+    if (current.id) {
+      selector = `#${current.id}`;
+      path.unshift(selector);
+      break;
+    }
+
+    // Get nth-child index
+    let sibling = current;
+    let nth = 1;
+    while (sibling.previousElementSibling) {
+      sibling = sibling.previousElementSibling;
+      if (sibling.tagName === current.tagName) {
+        nth++;
+      }
+    }
+
+    if (nth > 1 || current.parentElement?.children.length > 1) {
+      selector += `:nth-child(${nth})`;
+    }
+
+    path.unshift(selector);
+    current = current.parentElement;
+  }
+
+  return path.join(' > ');
+}
+
+/**
+ * Gets computed styles and detects Tailwind classes
+ * @param {HTMLElement} element
+ * @returns {Object}
+ */
+export function getComputedStylesAndTailwind(element) {
+  const computed = window.getComputedStyle(element);
+
+  const styles = {
+    display: computed.display,
+    position: computed.position,
+    width: computed.width,
+    height: computed.height,
+    padding: computed.padding,
+    margin: computed.margin,
+    backgroundColor: computed.backgroundColor,
+    color: computed.color,
+    fontSize: computed.fontSize,
+    fontFamily: computed.fontFamily,
+    fontWeight: computed.fontWeight,
+    lineHeight: computed.lineHeight,
+    borderRadius: computed.borderRadius,
+    boxShadow: computed.boxShadow,
+    transition: computed.transition,
+    transform: computed.transform,
+    opacity: computed.opacity,
+    zIndex: computed.zIndex,
+  };
+
+  // Detect Tailwind classes
+  const classNames = element.className?.toString().split(/\s+/).filter(Boolean) || [];
+
+  // Use patterns from constants
+  const tailwindClasses = classNames.filter(cls =>
+    TAILWIND_PATTERNS.some(pattern => pattern.test(cls))
+  );
+
+  if (tailwindClasses.length > 0) {
+    styles._tailwindClasses = tailwindClasses;
+  }
+
+  return styles;
+}
+
+/**
+ * Gets accessibility information for an element
+ * @param {HTMLElement} element
+ * @returns {Object}
+ */
+export function getAccessibilityInfo(element) {
+  const role = element.getAttribute('role') || element.tagName.toLowerCase();
+  const ariaLabel = element.getAttribute('aria-label');
+  const ariaLabelledBy = element.getAttribute('aria-labelledby');
+  const tabIndex = element.tabIndex;
+
+  // Check if element is interactive
+  const interactiveTags = ['a', 'button', 'input', 'select', 'textarea', 'details', 'summary'];
+  const isInteractive = interactiveTags.includes(element.tagName.toLowerCase()) ||
+    element.hasAttribute('onclick') ||
+    element.hasAttribute('role') ||
+    tabIndex >= 0;
+
+  return {
+    role,
+    ariaLabel,
+    ariaLabelledBy,
+    tabIndex,
+    isInteractive,
+  };
+}

package/dist/chrome-mv3/src/inspector/highlight.js

@@ -0,0 +1,155 @@
+// Visual highlight overlay for element selection
+import { HIGHLIGHT_STYLES } from '../constants.js';
+
+let highlightOverlay = null;
+let tooltipOverlay = null;
+let currentHighlightedElement = null;
+
+/**
+ * Highlights an element with a visual overlay
+ * @param {HTMLElement} element - The element to highlight
+ */
+export function highlightElement(element) {
+  removeHighlight();
+  currentHighlightedElement = element;
+
+  const rect = element.getBoundingClientRect();
+
+  if (!highlightOverlay) {
+    highlightOverlay = document.createElement('div');
+    highlightOverlay.style.position = 'fixed';
+    highlightOverlay.style.pointerEvents = 'none';
+    highlightOverlay.style.zIndex = HIGHLIGHT_STYLES.Z_INDEX;
+    highlightOverlay.style.transition = HIGHLIGHT_STYLES.TRANSITION;
+    document.body.appendChild(highlightOverlay);
+  }
+
+  highlightOverlay.style.left = rect.left + 'px';
+  highlightOverlay.style.top = rect.top + 'px';
+  highlightOverlay.style.width = rect.width + 'px';
+  highlightOverlay.style.height = rect.height + 'px';
+  highlightOverlay.style.border = `${HIGHLIGHT_STYLES.BORDER_WIDTH} solid ${HIGHLIGHT_STYLES.BORDER_COLOR}`;
+  highlightOverlay.style.backgroundColor = HIGHLIGHT_STYLES.BACKGROUND_COLOR;
+  highlightOverlay.style.borderRadius = HIGHLIGHT_STYLES.BORDER_RADIUS;
+}
+
+/**
+ * Removes the highlight overlay
+ */
+export function removeHighlight() {
+  if (highlightOverlay) {
+    highlightOverlay.remove();
+    highlightOverlay = null;
+  }
+  hideTooltip();
+  currentHighlightedElement = null;
+}
+
+/**
+ * Gets the currently highlighted element
+ * @returns {HTMLElement|null}
+ */
+export function getCurrentHighlightedElement() {
+  return currentHighlightedElement;
+}
+
+/**
+ * Flash the highlight to provide visual feedback
+ * @param {string} color - The color to flash (defaults to green)
+ */
+export function flashHighlight(color = 'rgba(16, 185, 129, 0.2)') {
+  if (highlightOverlay) {
+    const originalColor = highlightOverlay.style.backgroundColor;
+    highlightOverlay.style.backgroundColor = color;
+    setTimeout(() => {
+      if (highlightOverlay) {
+        highlightOverlay.style.backgroundColor = originalColor;
+      }
+    }, 150);
+  }
+}
+
+/**
+ * Shows a tooltip with element information
+ * @param {HTMLElement} element - The element being hovered
+ * @param {Object} data - Element data (selector, component, etc.)
+ * @param {number} mouseX - Mouse X position
+ * @param {number} mouseY - Mouse Y position
+ */
+export function showTooltip(element, data, mouseX, mouseY) {
+  const rect = element.getBoundingClientRect();
+
+  if (!tooltipOverlay) {
+    tooltipOverlay = document.createElement('div');
+    tooltipOverlay.style.cssText = `
+      position: fixed;
+      background: #1e293b;
+      color: white;
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
+      font-size: 12px;
+      line-height: 1.5;
+      pointer-events: none;
+      z-index: ${parseInt(HIGHLIGHT_STYLES.Z_INDEX) + 1};
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+      white-space: nowrap;
+      transition: opacity 0.1s ease;
+    `;
+    document.body.appendChild(tooltipOverlay);
+  }
+
+  // Build tooltip content
+  let content = `<div style="font-weight: 600; color: #0ea5e9;">${data.selector || element.tagName.toLowerCase()}</div>`;
+
+  if (data.component?.name) {
+    content += `<div style="color: #10b981; margin-top: 2px;">${data.component.name}</div>`;
+  }
+
+  const width = Math.round(rect.width);
+  const height = Math.round(rect.height);
+  content += `<div style="color: #94a3b8; margin-top: 2px; font-size: 11px;">${width} × ${height}</div>`;
+
+  if (data.component?.file) {
+    const fileName = data.component.file.split('/').pop();
+    const lineInfo = data.component.line ? `:${data.component.line}` : '';
+    content += `<div style="color: #94a3b8; margin-top: 2px; font-size: 10px;">${fileName}${lineInfo}</div>`;
+  }
+
+  tooltipOverlay.innerHTML = content;
+
+  // Position tooltip near cursor, but avoid edges
+  const tooltipRect = tooltipOverlay.getBoundingClientRect();
+  const padding = 12;
+
+  let left = mouseX + padding;
+  let top = mouseY + padding;
+
+  // Adjust if tooltip goes off right edge
+  if (left + tooltipRect.width > window.innerWidth - padding) {
+    left = mouseX - tooltipRect.width - padding;
+  }
+
+  // Adjust if tooltip goes off bottom edge
+  if (top + tooltipRect.height > window.innerHeight - padding) {
+    top = mouseY - tooltipRect.height - padding;
+  }
+
+  // Keep within bounds
+  left = Math.max(padding, Math.min(left, window.innerWidth - tooltipRect.width - padding));
+  top = Math.max(padding, Math.min(top, window.innerHeight - tooltipRect.height - padding));
+
+  tooltipOverlay.style.left = left + 'px';
+  tooltipOverlay.style.top = top + 'px';
+  tooltipOverlay.style.opacity = '1';
+}
+
+/**
+ * Hides the tooltip overlay
+ */
+export function hideTooltip() {
+  if (tooltipOverlay) {
+    tooltipOverlay.remove();
+    tooltipOverlay = null;
+  }
+}

package/dist/chrome-mv3/src/inspector/index.js

@@ -0,0 +1,82 @@
+// Inspector - MAIN world element selection and inspection
+// Orchestrator that coordinates picker, highlight, and inspection modules
+
+import { activatePicker, deactivatePicker, isPickerActive } from './picker.js';
+import { flashHighlight, removeHighlight } from './highlight.js';
+import { inspectElement } from './dom-inspector.js';
+
+console.log('[PixelPick Inspector] Loaded');
+
+// Event listeners
+document.addEventListener('click', handleElementClick, true);
+
+// Listen for picker activation/deactivation from bridge
+window.addEventListener('message', (event) => {
+  if (event.source !== window) return;
+  if (!event.data || event.data.source !== 'pixelpick-bridge') return;
+
+  if (event.data.type === 'activate_picker') {
+    activatePicker();
+  }
+
+  if (event.data.type === 'deactivate_picker') {
+    deactivatePicker();
+    notifyPickerDeactivated();
+  }
+});
+
+/**
+ * Handles element clicks (Cmd+Shift+Click or picker mode)
+ * @param {MouseEvent} event
+ */
+function handleElementClick(event) {
+  // Check for Cmd+Shift+Click (Mac) or Ctrl+Shift+Click (Windows/Linux)
+  const isModifierClick = (event.metaKey || event.ctrlKey) && event.shiftKey;
+
+  if (!isModifierClick && !isPickerActive()) {
+    return; // Not a PixelPick interaction
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+
+  const element = event.target;
+  inspectAndSendElement(element);
+
+  if (isPickerActive()) {
+    deactivatePicker();
+    notifyPickerDeactivated();
+  }
+}
+
+
+/**
+ * Inspects an element and sends data to content bridge
+ * @param {HTMLElement} element
+ */
+function inspectAndSendElement(element) {
+  const data = inspectElement(element);
+
+  console.log('[PixelPick Inspector] Element inspected:', data);
+
+  // Send to content bridge
+  window.postMessage({
+    source: 'pixelpick-inspector',
+    type: 'selection',
+    data,
+  }, '*');
+
+  // Visual feedback - flash green
+  flashHighlight('rgba(16, 185, 129, 0.2)');
+}
+
+/**
+ * Notifies that picker was deactivated
+ */
+function notifyPickerDeactivated() {
+  window.postMessage({
+    source: 'pixelpick-inspector',
+    type: 'picker_deactivated',
+  }, '*');
+}

package/dist/chrome-mv3/src/inspector/picker.js

@@ -0,0 +1,101 @@
+// Picker mode for visual element selection
+import { highlightElement, removeHighlight, showTooltip, hideTooltip } from './highlight.js';
+import { inspectElement } from './dom-inspector.js';
+
+let pickerActive = false;
+
+/**
+ * Handles Escape key to cancel picker
+ * @param {KeyboardEvent} event
+ */
+function handleEscapeKey(event) {
+  console.log('[PixelPick Picker] Key pressed:', event.key);
+  if (event.key === 'Escape') {
+    console.log('[PixelPick Picker] Escape detected, deactivating picker');
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    deactivatePicker();
+
+    // Notify that picker was deactivated
+    window.postMessage({
+      source: 'pixelpick-inspector',
+      type: 'picker_deactivated',
+    }, '*');
+  }
+}
+
+/**
+ * Activates picker mode - user can click to select elements
+ */
+export function activatePicker() {
+  pickerActive = true;
+  document.body.style.cursor = 'crosshair';
+
+  // Add mousemove listener for visual highlight
+  document.addEventListener('mousemove', handleMouseMove, true);
+
+  // Add escape key listener
+  document.addEventListener('keydown', handleEscapeKey, true);
+  window.addEventListener('keydown', handleEscapeKey, true);
+
+  console.log('[PixelPick Inspector] Picker activated - click to select, press Esc to cancel');
+}
+
+/**
+ * Deactivates picker mode
+ */
+export function deactivatePicker() {
+  pickerActive = false;
+  document.body.style.cursor = '';
+  document.removeEventListener('mousemove', handleMouseMove, true);
+  document.removeEventListener('keydown', handleEscapeKey, true);
+  window.removeEventListener('keydown', handleEscapeKey, true);
+  removeHighlight();
+  hideTooltip();
+
+  console.log('[PixelPick Inspector] Picker deactivated');
+}
+
+/**
+ * Checks if picker mode is currently active
+ * @returns {boolean}
+ */
+export function isPickerActive() {
+  return pickerActive;
+}
+
+/**
+ * Handles mouse movement to highlight elements under cursor
+ * @param {MouseEvent} event
+ */
+function handleMouseMove(event) {
+  const element = document.elementFromPoint(event.clientX, event.clientY);
+  if (element) {
+    highlightElement(element);
+
+    // Inspect element for tooltip data
+    const data = inspectElement(element);
+
+    // Show tooltip with element info
+    showTooltip(element, {
+      selector: data.selector,
+      component: data.component ? {
+        name: data.component,
+        file: data.fileLocation,
+        line: extractLineNumber(data.fileLocation),
+      } : null,
+    }, event.clientX, event.clientY);
+  }
+}
+
+/**
+ * Extracts line number from file location string
+ * @param {string} fileLocation - e.g., "src/App.tsx:42" or "src/App.tsx:42:10"
+ * @returns {number|null}
+ */
+function extractLineNumber(fileLocation) {
+  if (!fileLocation) return null;
+  const match = fileLocation.match(/:(\d+)/);
+  return match ? parseInt(match[1], 10) : null;
+}