sparkecode-devtools 0.1.37

package/README.md

@@ -0,0 +1,94 @@
+# Sparkecode Dev Tools
+
+Click any React component on a page to copy helpful context to your clipboard.
+
+## Script tag (unpkg/jsDelivr)
+
+```html
+<script src="https://unpkg.com/sparkecode-devtools/sparkecode-select.js"></script>
+<script>
+  window.SparkeCodeSelect.init();
+</script>
+```
+
+## Next.js (App or Pages Router)
+
+```tsx
+import { SparkeCodeSelect } from 'sparkecode-devtools/next';
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <SparkeCodeSelect />
+      {children}
+    </>
+  );
+}
+```
+
+Default behavior:
+- Runs only in development
+- Auto-connects to a local Sparkecoder instance and sends selections into the latest session
+
+Optional overrides:
+
+```tsx
+<SparkeCodeSelect
+  enabled={true}
+  scriptUrl="https://unpkg.com/sparkecode-devtools/sparkecode-select.js"
+  sparkecoderEnabled={true}
+  config={{
+    sparkecoder: {
+      apiBase: "http://127.0.0.1:3141",
+      sessionId: "your-session-id"
+    },
+    primaryColor: "#8b5cf6"
+  }}
+/>
+```
+
+## Sparkecoder integration (local)
+
+If you are running Sparkecoder locally, you can auto-send selections into the
+most recently active session:
+
+```html
+<script>
+  window.SparkeCodeSelect.init({
+    sparkecoder: { enabled: true }
+  });
+</script>
+```
+
+Optional overrides:
+
+```html
+<script>
+  window.SparkeCodeSelect.init({
+    sparkecoder: {
+      enabled: true,
+      apiBase: "http://127.0.0.1:3141",
+      sessionId: "your-session-id"
+    }
+  });
+</script>
+```
+
+## Webhook (custom)
+
+You can also send copy events to any endpoint:
+
+```html
+<script>
+  window.SparkeCodeSelect.init({
+    webhookUrl: "https://example.com/webhook"
+  });
+</script>
+```
+
+## Controls
+
+- Click the floating button to toggle selection
+- Drag the button to reposition
+- Press `Cmd/Ctrl+Shift+S` to toggle
+- Press `Esc` to exit selection mode

package/next.d.ts

@@ -0,0 +1,24 @@
+import type { JSX } from 'react';
+
+export interface SparkeCodeSelectConfig {
+  webhookUrl?: string | null;
+  primaryColor?: string;
+  successColor?: string;
+  bgColor?: string;
+  textColor?: string;
+  sparkecoder?: {
+    enabled?: boolean;
+    apiBase?: string | null;
+    sessionId?: string | null;
+  };
+}
+
+export interface SparkeCodeSelectProps {
+  enabled?: boolean;
+  scriptUrl?: string;
+  config?: SparkeCodeSelectConfig;
+  sparkecoderEnabled?: boolean;
+  strategy?: 'afterInteractive' | 'lazyOnload' | 'beforeInteractive' | 'worker';
+}
+
+export function SparkeCodeSelect(props: SparkeCodeSelectProps): JSX.Element | null;

package/next.js

@@ -0,0 +1,47 @@
+'use client';
+
+import Script from 'next/script';
+import { useEffect, useMemo } from 'react';
+
+const DEFAULT_SCRIPT_URL = 'https://unpkg.com/sparkecode-devtools/sparkecode-select.js';
+
+export function SparkeCodeSelect({
+  enabled = process.env.NODE_ENV !== 'production',
+  scriptUrl = DEFAULT_SCRIPT_URL,
+  config,
+  sparkecoderEnabled = true,
+  strategy = 'afterInteractive',
+}) {
+  const mergedConfig = useMemo(() => ({
+    ...(config || {}),
+    sparkecoder: {
+      enabled: sparkecoderEnabled,
+      ...(config && config.sparkecoder ? config.sparkecoder : {}),
+    },
+  }), [config, sparkecoderEnabled]);
+
+  useEffect(() => {
+    if (!enabled) return;
+    if (typeof window === 'undefined') return;
+    if (window.SparkeCodeSelect && typeof window.SparkeCodeSelect.init === 'function') {
+      window.SparkeCodeSelect.init(mergedConfig);
+    }
+  }, [enabled, mergedConfig]);
+
+  if (!enabled) return null;
+
+  const handleLoad = () => {
+    if (typeof window === 'undefined') return;
+    if (window.SparkeCodeSelect && typeof window.SparkeCodeSelect.init === 'function') {
+      window.SparkeCodeSelect.init(mergedConfig);
+    }
+  };
+
+  return (
+    <Script
+      src={scriptUrl}
+      strategy={strategy}
+      onLoad={handleLoad}
+    />
+  );
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "sparkecode-devtools",
+  "version": "0.1.37",
+  "description": "Sparkecode Dev Tools for selecting and sharing components.",
+  "type": "module",
+  "main": "sparkecode-select.js",
+  "unpkg": "sparkecode-select.js",
+  "jsdelivr": "sparkecode-select.js",
+  "exports": {
+    ".": "./sparkecode-select.js",
+    "./next": {
+      "types": "./next.d.ts",
+      "default": "./next.js"
+    }
+  },
+  "files": [
+    "sparkecode-select.js",
+    "next.js",
+    "next.d.ts",
+    "README.md"
+  ],
+  "keywords": [
+    "react",
+    "nextjs",
+    "devtools",
+    "component",
+    "selector",
+    "clipboard"
+  ],
+  "author": "gostudyfetchgo",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gostudyfetchgo/sparkecoder.git"
+  },
+  "homepage": "https://github.com/gostudyfetchgo/sparkecoder#readme",
+  "bugs": {
+    "url": "https://github.com/gostudyfetchgo/sparkecoder/issues"
+  },
+  "sideEffects": true,
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/sparkecode-select.js

@@ -0,0 +1,902 @@
+/**
+ * SparkeCode Select - Component Selector & Copier
+ * 
+ * Click on any React component to instantly copy it to your clipboard.
+ * Simple, fast, and easy to use.
+ */
+
+(function() {
+  'use strict';
+
+  // ============================================
+  // Configuration
+  // ============================================
+  
+  const DEFAULT_CONFIG = {
+    webhookUrl: null,
+    primaryColor: '#8b5cf6',
+    successColor: '#10b981',
+    bgColor: '#1e1e2e',
+    textColor: '#ffffff',
+    sparkecoder: {
+      enabled: false,
+      apiBase: null,
+      sessionId: null,
+    },
+  };
+
+  let config = { ...DEFAULT_CONFIG };
+  let isActive = false;
+  let isInitialized = false;
+  let hoveredElement = null;
+  let overlay = null;
+  let hoverBox = null;
+  let label = null;
+  let floatingButton = null;
+  let sparkecoderState = { apiBase: null, sessionId: null, inFlight: null };
+  
+  // Drag state
+  let isDragging = false;
+  let dragOffset = { x: 0, y: 0 };
+  let buttonPos = { x: 16, y: 16 };
+
+  // ============================================
+  // Utilities
+  // ============================================
+
+  function isMac() {
+    return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+  }
+
+  function applyConfig(options = {}) {
+    const next = { ...config, ...options };
+    if (options.sparkecoder) {
+      next.sparkecoder = { ...config.sparkecoder, ...options.sparkecoder };
+      sparkecoderState = {
+        apiBase: options.sparkecoder.apiBase || null,
+        sessionId: options.sparkecoder.sessionId || null,
+        inFlight: null,
+      };
+    }
+    config = next;
+    return config;
+  }
+
+  function isInDOM(element) {
+    return element && document.body.contains(element);
+  }
+
+  function fetchWithTimeout(url, options = {}, timeoutMs = 1500) {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+    return fetch(url, { ...options, signal: controller.signal })
+      .finally(() => clearTimeout(timeoutId));
+  }
+
+  function throttle(fn, delay) {
+    let lastCall = 0;
+    return function(...args) {
+      const now = Date.now();
+      if (now - lastCall >= delay) {
+        lastCall = now;
+        return fn.apply(this, args);
+      }
+    };
+  }
+
+  // ============================================
+  // React Fiber Detection
+  // ============================================
+
+  const INTERNAL_NAMES = new Set([
+    'Fragment', 'Suspense', 'StrictMode', 'Profiler', 'Provider', 'Consumer',
+    'Context', 'ForwardRef', 'Memo', 'Lazy', 'Portal', 'Router', 'ErrorBoundary',
+    'InnerLayoutRouter', 'OuterLayoutRouter', 'RenderFromTemplateContext',
+    'ScrollAndFocusHandler', 'RedirectBoundary', 'NotFoundBoundary',
+    'LoadingBoundary', 'HotReload', 'AppRouter', 'ServerRoot',
+    'HTTPAccessFallbackBoundary', 'DevRootHTTPAccessFallbackBoundary',
+    'ClientPageRoot', 'InnerScrollAndFocusHandler', 'RedirectErrorBoundary',
+  ]);
+
+  function getFiber(element) {
+    if (!element) return null;
+    const keys = Object.keys(element);
+    for (const key of keys) {
+      if (key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$')) {
+        return element[key];
+      }
+    }
+    return null;
+  }
+
+  function isInternalComponent(name) {
+    if (!name || name.length <= 1) return true;
+    if (name.startsWith('_')) return true;
+    if (INTERNAL_NAMES.has(name)) return true;
+    if (name.includes('Provider') && name.includes('Context')) return true;
+    if (name[0] === name[0].toLowerCase()) return true;
+    return false;
+  }
+
+  function isSourceFile(filePath) {
+    if (!filePath) return false;
+    if (filePath.includes('node_modules')) return false;
+    if (filePath.includes('react-dom')) return false;
+    if (filePath.includes('react/')) return false;
+    if (filePath.includes('next/dist')) return false;
+    return true;
+  }
+
+  function normalizeFilePath(filePath) {
+    if (!filePath) return null;
+    
+    let normalized = filePath
+      .replace(/^webpack-internal:\/\/\//, '')
+      .replace(/^webpack:\/\/[^/]*\//, '')
+      .replace(/^\(app-pages-browser\)\//, '')
+      .replace(/^\(rsc\)\//, '')
+      .replace(/^\(ssr\)\//, '')
+      .replace(/\?.*$/, '')
+      .replace(/^\.\//, '')
+      .replace(/^\/+/, '');
+    
+    const appMatch = normalized.match(/\/(app|src|pages|components)\/(.+)$/);
+    if (appMatch) {
+      normalized = appMatch[1] + '/' + appMatch[2];
+    }
+    
+    if (!isSourceFile(normalized)) return null;
+    return normalized;
+  }
+
+  function getSourceFromFiber(fiber) {
+    if (!fiber) return null;
+    
+    if (fiber._debugSource?.fileName) return fiber._debugSource;
+    if (fiber._source?.fileName) return fiber._source;
+    if (fiber.elementType?._source) return fiber.elementType._source;
+    if (fiber.type?._source) return fiber.type._source;
+    if (fiber.memoizedProps?.__source) return fiber.memoizedProps.__source;
+    
+    return null;
+  }
+
+  function getDisplayName(fiber) {
+    if (!fiber?.type) return null;
+    const type = fiber.type;
+    if (typeof type === 'function') return type.displayName || type.name || null;
+    if (typeof type === 'object') {
+      if (type.displayName) return type.displayName;
+      if (type.type) return type.type.displayName || type.type.name || null;
+    }
+    return null;
+  }
+
+  function getComponentInfo(element) {
+    if (!element || !isInDOM(element)) return null;
+    
+    const fiber = getFiber(element);
+    if (!fiber) return null;
+
+    let current = fiber;
+    let foundName = null;
+    let foundSource = null;
+    const seen = new Set();
+    
+    while (current && !seen.has(current)) {
+      seen.add(current);
+      
+      const name = getDisplayName(current);
+      if (name && !isInternalComponent(name)) {
+        if (!foundName) foundName = name;
+        
+        const source = getSourceFromFiber(current);
+        if (source?.fileName) {
+          const normalized = normalizeFilePath(source.fileName);
+          if (normalized) {
+            foundSource = { fileName: normalized, lineNumber: source.lineNumber || null };
+            break;
+          }
+        }
+      }
+      current = current.return;
+    }
+    
+    if (!foundName) return null;
+    return { name: foundName, fileName: foundSource?.fileName || null, lineNumber: foundSource?.lineNumber || null };
+  }
+
+  function getComponentStack(element) {
+    if (!element || !isInDOM(element)) return [];
+    
+    const fiber = getFiber(element);
+    if (!fiber) return [];
+
+    const stack = [];
+    let current = fiber;
+    const seen = new Set();
+    
+    while (current && !seen.has(current) && stack.length < 5) {
+      seen.add(current);
+      
+      const name = getDisplayName(current);
+      if (name && !isInternalComponent(name)) {
+        const source = getSourceFromFiber(current);
+        const fileName = source?.fileName ? normalizeFilePath(source.fileName) : null;
+        stack.push({ name, fileName, lineNumber: source?.lineNumber || null });
+      }
+      current = current.return;
+    }
+    return stack;
+  }
+
+  // ============================================
+  // Webhook
+  // ============================================
+
+  async function sendWebhook(event, data = {}) {
+    if (!config.webhookUrl) return;
+    try {
+      await fetch(config.webhookUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ event, timestamp: new Date().toISOString(), url: window.location.href, ...data }),
+      });
+    } catch (e) {
+      console.warn('[SparkeCode] Webhook error:', e.message);
+    }
+  }
+
+  // ============================================
+  // Sparkecoder Integration
+  // ============================================
+
+  const SPARKECODER_DEFAULT_BASES = [
+    'http://127.0.0.1:3141',
+    'http://localhost:3141',
+  ];
+
+  async function detectSparkecoderBase() {
+    for (const base of SPARKECODER_DEFAULT_BASES) {
+      try {
+        const res = await fetchWithTimeout(`${base}/health/ready`, { method: 'GET' }, 800);
+        if (res.ok) return base;
+      } catch (e) {
+        // Ignore and try next base
+      }
+    }
+    return null;
+  }
+
+  async function getLatestSessionId(apiBase) {
+    try {
+      const res = await fetchWithTimeout(`${apiBase}/sessions`, { method: 'GET' }, 1500);
+      if (!res.ok) return null;
+      const data = await res.json();
+      const sessions = Array.isArray(data.sessions) ? data.sessions : [];
+      const candidates = sessions.filter((s) => s && s.status !== 'error');
+      if (candidates.length === 0) return null;
+      candidates.sort((a, b) => {
+        const aTime = a.updatedAt ? Date.parse(a.updatedAt) : (a.createdAt ? Date.parse(a.createdAt) : 0);
+        const bTime = b.updatedAt ? Date.parse(b.updatedAt) : (b.createdAt ? Date.parse(b.createdAt) : 0);
+        return bTime - aTime;
+      });
+      return candidates[0].id || null;
+    } catch (e) {
+      return null;
+    }
+  }
+
+  async function ensureSparkecoderConnection() {
+    if (!config.sparkecoder?.enabled) return null;
+    if (sparkecoderState.apiBase && sparkecoderState.sessionId) {
+      return { apiBase: sparkecoderState.apiBase, sessionId: sparkecoderState.sessionId };
+    }
+    if (sparkecoderState.inFlight) return sparkecoderState.inFlight;
+
+    sparkecoderState.inFlight = (async () => {
+      const apiBase = config.sparkecoder.apiBase || await detectSparkecoderBase();
+      if (!apiBase) return null;
+      const sessionId = config.sparkecoder.sessionId || await getLatestSessionId(apiBase);
+      if (!sessionId) return null;
+      sparkecoderState.apiBase = apiBase;
+      sparkecoderState.sessionId = sessionId;
+      return { apiBase, sessionId };
+    })();
+
+    try {
+      return await sparkecoderState.inFlight;
+    } finally {
+      sparkecoderState.inFlight = null;
+    }
+  }
+
+  async function sendToSparkecoder(promptText) {
+    const connection = await ensureSparkecoderConnection();
+    if (!connection) return false;
+
+    try {
+      // Post to pending-input endpoint so it appears in the web UI input field
+      // (instead of running the agent immediately)
+      const res = await fetchWithTimeout(
+        `${connection.apiBase}/sessions/${connection.sessionId}/pending-input`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text: promptText }),
+        },
+        1500
+      );
+      return res.ok;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  // Heartbeat interval ID
+  let heartbeatIntervalId = null;
+  let lastHeartbeatPath = null;
+
+  async function sendDevtoolsHeartbeat() {
+    const connection = await ensureSparkecoderConnection();
+    if (!connection) return;
+
+    const path = window.location.pathname;
+    const url = window.location.href;
+    const pageName = getPageName();
+
+    // Skip if path hasn't changed (unless it's the first heartbeat)
+    if (lastHeartbeatPath === path && lastHeartbeatPath !== null) return;
+    lastHeartbeatPath = path;
+
+    try {
+      await fetchWithTimeout(
+        `${connection.apiBase}/sessions/${connection.sessionId}/devtools-context`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url, path, pageName }),
+        },
+        1500
+      );
+    } catch (e) {
+      // Ignore heartbeat errors
+    }
+  }
+
+  function startHeartbeat() {
+    if (heartbeatIntervalId) return;
+    
+    // Send initial heartbeat
+    sendDevtoolsHeartbeat();
+    
+    // Send heartbeat every 5 seconds (will only actually send if path changed)
+    heartbeatIntervalId = setInterval(() => {
+      // Force send every interval to keep connection alive
+      lastHeartbeatPath = null;
+      sendDevtoolsHeartbeat();
+    }, 5000);
+
+    // Also send on navigation (for SPAs)
+    if (typeof window !== 'undefined') {
+      window.addEventListener('popstate', sendDevtoolsHeartbeat);
+      
+      // Intercept pushState/replaceState for SPA navigation
+      const originalPushState = history.pushState;
+      const originalReplaceState = history.replaceState;
+      
+      history.pushState = function(...args) {
+        const result = originalPushState.apply(this, args);
+        sendDevtoolsHeartbeat();
+        return result;
+      };
+      
+      history.replaceState = function(...args) {
+        const result = originalReplaceState.apply(this, args);
+        sendDevtoolsHeartbeat();
+        return result;
+      };
+    }
+  }
+
+  function stopHeartbeat() {
+    if (heartbeatIntervalId) {
+      clearInterval(heartbeatIntervalId);
+      heartbeatIntervalId = null;
+    }
+  }
+
+  // ============================================
+  // Page Path Detection
+  // ============================================
+
+  function getPagePath() {
+    if (typeof window !== 'undefined' && window.__NEXT_DATA__) {
+      const route = window.__NEXT_DATA__.page;
+      const path = window.location.pathname;
+      if (route && route !== path) return `${path} (route: ${route})`;
+      return path || '/';
+    }
+    return window.location.pathname || '/';
+  }
+
+  function getPageName() {
+    const path = getPagePath().split(' (route:')[0].split('?')[0];
+    if (path === '/' || path === '') return 'Home page';
+    
+    const parts = path.split('/').filter(p => p && !/^\d+$/.test(p) && !/^[a-f0-9-]{36}$/i.test(p));
+    if (parts.length === 0) return `"${path}" page`;
+    
+    return parts.map(p => p.charAt(0).toUpperCase() + p.slice(1).replace(/-/g, ' ')).join(' > ') + ' page';
+  }
+
+  // ============================================
+  // UI Components
+  // ============================================
+
+  function createFloatingButton() {
+    floatingButton = document.createElement('div');
+    floatingButton.id = 'sparkecode-button';
+    floatingButton.innerHTML = `<span style="font-weight: 600; font-size: 13px;">SparkeCode Select</span>`;
+    floatingButton.style.cssText = `
+      position: fixed;
+      top: ${buttonPos.y}px;
+      left: ${buttonPos.x}px;
+      height: 40px;
+      padding: 0 16px;
+      background: ${config.primaryColor};
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: grab;
+      z-index: 999998;
+      box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
+      transition: box-shadow 0.2s, background 0.2s;
+      color: white;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      user-select: none;
+    `;
+    floatingButton.title = 'Drag to move • Click to toggle';
+    
+    // Drag handling
+    floatingButton.addEventListener('mousedown', startDrag);
+    floatingButton.addEventListener('touchstart', startDrag, { passive: false });
+    
+    document.body.appendChild(floatingButton);
+  }
+
+  function startDrag(e) {
+    if (e.target.closest('#sparkecode-button')) {
+      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+      
+      dragOffset.x = clientX - buttonPos.x;
+      dragOffset.y = clientY - buttonPos.y;
+      isDragging = false;
+      
+      const startX = clientX;
+      const startY = clientY;
+      
+      const onMove = (e) => {
+        const moveX = e.touches ? e.touches[0].clientX : e.clientX;
+        const moveY = e.touches ? e.touches[0].clientY : e.clientY;
+        
+        // Only start dragging if moved more than 5px
+        if (!isDragging && (Math.abs(moveX - startX) > 5 || Math.abs(moveY - startY) > 5)) {
+          isDragging = true;
+          floatingButton.style.cursor = 'grabbing';
+        }
+        
+        if (isDragging) {
+          e.preventDefault();
+          buttonPos.x = Math.max(0, Math.min(window.innerWidth - 200, moveX - dragOffset.x));
+          buttonPos.y = Math.max(0, Math.min(window.innerHeight - 50, moveY - dragOffset.y));
+          floatingButton.style.left = buttonPos.x + 'px';
+          floatingButton.style.top = buttonPos.y + 'px';
+        }
+      };
+      
+      const onUp = () => {
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        document.removeEventListener('touchmove', onMove);
+        document.removeEventListener('touchend', onUp);
+        
+        floatingButton.style.cursor = 'grab';
+        
+        // If not dragging, it was a click
+        if (!isDragging) {
+          toggleActive();
+        }
+        isDragging = false;
+      };
+      
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+      document.addEventListener('touchmove', onMove, { passive: false });
+      document.addEventListener('touchend', onUp);
+    }
+  }
+
+  function createOverlay() {
+    overlay = document.createElement('div');
+    overlay.id = 'sparkecode-overlay';
+    overlay.style.cssText = `position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999999;`;
+    document.body.appendChild(overlay);
+
+    hoverBox = document.createElement('div');
+    hoverBox.id = 'sparkecode-hover';
+    hoverBox.style.cssText = `
+      position: fixed; pointer-events: none;
+      border: 2px solid ${config.primaryColor};
+      background: ${config.primaryColor}15;
+      border-radius: 6px; display: none;
+      transition: all 0.05s ease-out;
+    `;
+    overlay.appendChild(hoverBox);
+
+    label = document.createElement('div');
+    label.id = 'sparkecode-label';
+    label.style.cssText = `
+      position: fixed;
+      background: ${config.bgColor};
+      color: ${config.textColor};
+      padding: 8px 14px;
+      border-radius: 8px;
+      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+      font-size: 13px;
+      font-weight: 500;
+      display: none;
+      z-index: 1000000;
+      pointer-events: none;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+      border: 1px solid rgba(255,255,255,0.1);
+    `;
+    overlay.appendChild(label);
+  }
+
+  function removeOverlay() {
+    if (overlay) { overlay.remove(); overlay = null; hoverBox = null; label = null; }
+  }
+
+  function updateHoverHighlight(element) {
+    if (!hoverBox || !label) return;
+
+    if (!element || !isInDOM(element)) {
+      hoverBox.style.display = 'none';
+      label.style.display = 'none';
+      return;
+    }
+
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+      hoverBox.style.display = 'none';
+      label.style.display = 'none';
+      return;
+    }
+    
+    hoverBox.style.display = 'block';
+    hoverBox.style.left = `${rect.left - 2}px`;
+    hoverBox.style.top = `${rect.top - 2}px`;
+    hoverBox.style.width = `${rect.width + 4}px`;
+    hoverBox.style.height = `${rect.height + 4}px`;
+
+    const info = getComponentInfo(element);
+    if (info?.name) {
+      let text = `<${info.name}>`;
+      if (info.fileName) {
+        text += ` · ${info.fileName}${info.lineNumber ? `:${info.lineNumber}` : ''}`;
+      }
+      text += '  ⎘ Click to copy';
+      
+      label.textContent = text;
+      label.style.display = 'block';
+      label.style.left = `${Math.max(10, Math.min(rect.left, window.innerWidth - 400))}px`;
+      label.style.top = `${rect.top > 50 ? rect.top - 44 : rect.bottom + 8}px`;
+    } else {
+      label.style.display = 'none';
+    }
+  }
+
+  // ============================================
+  // Copy Functions
+  // ============================================
+
+  function generateContent(element) {
+    const info = getComponentInfo(element);
+    const stack = getComponentStack(element);
+    
+    let html = '';
+    try {
+      html = element.outerHTML.replace(/\s+/g, ' ').trim();
+      if (html.length > 500) html = html.substring(0, 500) + '...';
+    } catch (e) {
+      html = '[HTML unavailable]';
+    }
+
+    const pageName = getPageName();
+    const pagePath = getPagePath();
+    
+    let content = `I've selected this component on the ${pageName}:\n`;
+    content += `Path: ${pagePath}\n\n`;
+    content += `<!-- Component: ${info?.name || 'Unknown'} -->\n`;
+    content += html + '\n\n';
+    
+    if (stack.length > 0) {
+      content += 'Component Stack:\n';
+      stack.forEach((comp, i) => {
+        content += '  '.repeat(i) + `<${comp.name}>`;
+        if (comp.fileName) {
+          content += ` at ${comp.fileName}${comp.lineNumber ? `:${comp.lineNumber}` : ''}`;
+        }
+        content += '\n';
+      });
+    }
+    
+    return content;
+  }
+
+  async function copyToClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch (e) {
+      const textarea = document.createElement('textarea');
+      textarea.value = text;
+      textarea.style.cssText = 'position:fixed;left:-9999px;';
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      textarea.remove();
+      return true;
+    }
+  }
+
+  function showToast(message) {
+    const existing = document.querySelector('.sparkecode-toast');
+    if (existing) existing.remove();
+    
+    const toast = document.createElement('div');
+    toast.className = 'sparkecode-toast';
+    toast.style.cssText = `
+      position: fixed;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%) translateY(10px);
+      background: ${config.successColor};
+      color: white;
+      padding: 12px 24px;
+      border-radius: 10px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 14px;
+      font-weight: 600;
+      z-index: 1000002;
+      opacity: 0;
+      transition: all 0.2s ease;
+      box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
+    `;
+    toast.textContent = message;
+    document.body.appendChild(toast);
+
+    requestAnimationFrame(() => {
+      toast.style.opacity = '1';
+      toast.style.transform = 'translateX(-50%) translateY(0)';
+    });
+
+    setTimeout(() => {
+      toast.style.opacity = '0';
+      toast.style.transform = 'translateX(-50%) translateY(10px)';
+      setTimeout(() => toast.remove(), 200);
+    }, 1500);
+  }
+
+  // ============================================
+  // Event Handlers
+  // ============================================
+
+  function isValidElement(element) {
+    if (!element || !isInDOM(element)) return false;
+    if (element.id?.startsWith('sparkecode-')) return false;
+    if (element.closest('#sparkecode-button')) return false;
+    if (element === document.body || element === document.documentElement) return false;
+    try {
+      const style = getComputedStyle(element);
+      if (style.display === 'none' || style.visibility === 'hidden') return false;
+    } catch (e) { return false; }
+    return true;
+  }
+
+  function getElementAtPosition(x, y) {
+    const elements = document.elementsFromPoint(x, y);
+    for (const el of elements) {
+      if (isValidElement(el) && getComponentInfo(el)) return el;
+    }
+    for (const el of elements) {
+      if (isValidElement(el)) return el;
+    }
+    return null;
+  }
+
+  const handleMouseMove = throttle(function(e) {
+    if (!isActive) return;
+    const element = getElementAtPosition(e.clientX, e.clientY);
+    if (element !== hoveredElement) {
+      hoveredElement = element;
+      updateHoverHighlight(element);
+    }
+  }, 16);
+
+  async function handleClick(e) {
+    if (!isActive) return;
+    if (e.target.closest('#sparkecode-button')) return;
+    
+    e.preventDefault();
+    e.stopPropagation();
+
+    const element = getElementAtPosition(e.clientX, e.clientY);
+    if (!element) return;
+
+    const content = generateContent(element);
+    await copyToClipboard(content);
+    
+    const info = getComponentInfo(element);
+    showToast(`Copied <${info?.name || 'Component'}>`);
+    
+    // Flash effect
+    if (hoverBox) {
+      hoverBox.style.background = `${config.successColor}40`;
+      hoverBox.style.borderColor = config.successColor;
+      setTimeout(() => {
+        hoverBox.style.background = `${config.primaryColor}15`;
+        hoverBox.style.borderColor = config.primaryColor;
+      }, 200);
+    }
+    
+    sendWebhook('copy', {
+      component: info?.name,
+      fileName: info?.fileName,
+      lineNumber: info?.lineNumber,
+      page: getPagePath(),
+    });
+
+    if (config.sparkecoder?.enabled) {
+      sendToSparkecoder(content).catch(() => {});
+    }
+  }
+
+  function handleKeyDown(e) {
+    const modKey = isMac() ? e.metaKey : e.ctrlKey;
+
+    if (modKey && e.shiftKey && e.key.toLowerCase() === 's') {
+      e.preventDefault();
+      e.stopPropagation();
+      toggleActive();
+      return;
+    }
+
+    if (isActive && e.key === 'Escape') {
+      e.preventDefault();
+      deactivate();
+    }
+  }
+
+  function handleScroll() {
+    if (!isActive || !hoveredElement) return;
+    requestAnimationFrame(() => {
+      if (hoveredElement && isInDOM(hoveredElement)) {
+        updateHoverHighlight(hoveredElement);
+      } else {
+        hoveredElement = null;
+        updateHoverHighlight(null);
+      }
+    });
+  }
+
+  // ============================================
+  // Activation
+  // ============================================
+
+  function activate() {
+    if (isActive) return;
+    isActive = true;
+    
+    createOverlay();
+    
+    if (floatingButton) {
+      floatingButton.style.background = config.successColor;
+      floatingButton.style.boxShadow = '0 4px 20px rgba(16, 185, 129, 0.4)';
+    }
+    
+    document.addEventListener('mousemove', handleMouseMove, true);
+    document.addEventListener('click', handleClick, true);
+    document.addEventListener('scroll', handleScroll, true);
+    window.addEventListener('resize', handleScroll);
+    
+    document.body.style.userSelect = 'none';
+    
+    sendWebhook('activate');
+  }
+
+  function deactivate() {
+    if (!isActive) return;
+    isActive = false;
+    
+    removeOverlay();
+    
+    if (floatingButton) {
+      floatingButton.style.background = config.primaryColor;
+      floatingButton.style.boxShadow = '0 4px 20px rgba(139, 92, 246, 0.4)';
+    }
+    
+    document.removeEventListener('mousemove', handleMouseMove, true);
+    document.removeEventListener('click', handleClick, true);
+    document.removeEventListener('scroll', handleScroll, true);
+    window.removeEventListener('resize', handleScroll);
+    
+    document.body.style.userSelect = '';
+    hoveredElement = null;
+    
+    sendWebhook('deactivate');
+  }
+
+  function toggleActive() {
+    if (isActive) deactivate();
+    else activate();
+  }
+
+  // ============================================
+  // Public API
+  // ============================================
+
+  const SparkeCodeSelect = {
+    init(options = {}) {
+      if (isInitialized) {
+        if (Object.keys(options).length > 0) this.configure(options);
+        return this;
+      }
+      
+      isInitialized = true;
+      config = { ...DEFAULT_CONFIG };
+      applyConfig(options);
+      
+      document.addEventListener('keydown', handleKeyDown, true);
+      createFloatingButton();
+      
+      const modKey = isMac() ? 'Cmd' : 'Ctrl';
+      console.log(`[SparkeCode] Ready! Click button or press ${modKey}+Shift+S`);
+      
+      sendWebhook('init', { version: this.version });
+
+      if (config.sparkecoder?.enabled) {
+        ensureSparkecoderConnection().then(() => {
+          startHeartbeat();
+        }).catch(() => {});
+      }
+      return this;
+    },
+
+    activate,
+    deactivate,
+    toggle: toggleActive,
+    isActive: () => isActive,
+    
+    configure(options) {
+      applyConfig(options);
+      return this;
+    },
+    
+    getConfig: () => ({ ...config }),
+    sendEvent: (event, data) => sendWebhook(event, data),
+    getComponentInfo,
+    getComponentStack,
+    
+    version: '1.0.0',
+  };
+
+  if (typeof window !== 'undefined') {
+    window.SparkeCodeSelect = SparkeCodeSelect;
+    window.ReactGrab = SparkeCodeSelect; // Alias
+  }
+
+})();