@ui-context-kit/bridge 0.1.0

package/dist/index.js

@@ -0,0 +1,870 @@
+// src/vite-plugin.ts
+import path2 from "path";
+import fs2 from "fs";
+import { injectSourceAttributes } from "@ui-context-kit/babel-plugin";
+
+// src/context-writer.ts
+import fs from "fs";
+import path from "path";
+async function writeContext(context, projectRoot, outputDir) {
+  const outPath = path.resolve(projectRoot, outputDir);
+  const capturesDir = path.join(outPath, "captures");
+  fs.mkdirSync(outPath, { recursive: true });
+  fs.mkdirSync(path.join(outPath, "screenshots"), { recursive: true });
+  fs.mkdirSync(capturesDir, { recursive: true });
+  const contexts = Array.isArray(context) ? context : [context];
+  const screenshotPaths = [];
+  for (const ctx of contexts) {
+    if (ctx.screenshotDataUrl) {
+      const timestamp2 = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+      const filename = `capture-${timestamp2}.png`;
+      const relPath = `./screenshots/${filename}`;
+      const base64 = ctx.screenshotDataUrl.replace(/^data:image\/\w+;base64,/, "");
+      fs.writeFileSync(path.join(outPath, "screenshots", filename), Buffer.from(base64, "base64"));
+      screenshotPaths.push(relPath);
+    } else {
+      screenshotPaths.push(void 0);
+    }
+  }
+  const sourceSnippets = [];
+  for (const ctx of contexts) {
+    if (ctx.source) {
+      sourceSnippets.push(readSourceSnippet(
+        path.resolve(projectRoot, ctx.source.file),
+        ctx.source.line,
+        10
+      ));
+    } else {
+      sourceSnippets.push("");
+    }
+  }
+  const md = contexts.length === 1 ? buildMarkdown(contexts[0], sourceSnippets[0], screenshotPaths[0]) : buildMultiMarkdown(contexts, sourceSnippets, screenshotPaths);
+  const latestPath = path.join(outPath, "latest.md");
+  fs.writeFileSync(latestPath, md, "utf-8");
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+  const capturePath = path.join(capturesDir, `${timestamp}.md`);
+  fs.writeFileSync(capturePath, md, "utf-8");
+  updateHistory(outPath, contexts, timestamp);
+  cleanupOldCaptures(capturesDir, 50);
+  console.log(`[ui-context-kit] Context written to ${path.relative(projectRoot, latestPath)}`);
+  console.log(`[ui-context-kit] History saved to ${path.relative(projectRoot, capturePath)}`);
+  return latestPath;
+}
+function updateHistory(outPath, contexts, timestamp) {
+  const historyPath = path.join(outPath, "history.md");
+  const lines = [];
+  const time = timestamp.replace(/T/, " ").replace(/-(\d{2})-(\d{2})-(\d+)Z?$/, ":$1:$2");
+  for (const ctx of contexts) {
+    const component = ctx.source?.component || ctx.tagName;
+    const file = ctx.source ? `${ctx.source.file}:${ctx.source.line}` : "";
+    lines.push(`- **${component}** ${file ? `(\`${file}\`)` : ""} \u2014 ${ctx.url}`);
+  }
+  const entry = `### ${time}
+${lines.join("\n")}
+
+`;
+  let existing = "";
+  try {
+    existing = fs.readFileSync(historyPath, "utf-8");
+  } catch {
+    existing = "# UI Context Capture History\n\n";
+  }
+  const headerEnd = existing.indexOf("\n\n");
+  if (headerEnd !== -1) {
+    const header2 = existing.slice(0, headerEnd + 2);
+    const body = existing.slice(headerEnd + 2);
+    existing = header2 + entry + body;
+  } else {
+    existing += entry;
+  }
+  const entries = existing.split(/(?=### )/);
+  const header = entries[0];
+  const captureEntries = entries.slice(1);
+  if (captureEntries.length > 20) {
+    existing = header + captureEntries.slice(0, 20).join("");
+  }
+  fs.writeFileSync(historyPath, existing, "utf-8");
+}
+function cleanupOldCaptures(capturesDir, maxFiles) {
+  try {
+    const files = fs.readdirSync(capturesDir).filter((f) => f.endsWith(".md")).sort().reverse();
+    for (let i = maxFiles; i < files.length; i++) {
+      fs.unlinkSync(path.join(capturesDir, files[i]));
+    }
+  } catch {
+  }
+}
+function readSourceSnippet(filePath, targetLine, contextLines) {
+  try {
+    const content = fs.readFileSync(filePath, "utf-8");
+    const lines = content.split("\n");
+    const start = Math.max(0, targetLine - contextLines - 1);
+    const end = Math.min(lines.length, targetLine + contextLines);
+    return lines.slice(start, end).map((line, i) => {
+      const lineNum = start + i + 1;
+      const marker = lineNum === targetLine ? " // <-- target" : "";
+      return `${line}${marker}`;
+    }).join("\n");
+  } catch {
+    return "// Source file not found";
+  }
+}
+function buildMarkdown(context, sourceSnippet, screenshotPath) {
+  const { source, tagName, classes, computedStyles, dimensions, componentHierarchy, url } = context;
+  const lines = ["# UI Context Capture", ""];
+  lines.push("## Target Element");
+  if (source) {
+    if (source.component) {
+      lines.push(`- **Component**: \`${source.component}\` in \`${source.file}:${source.line}\``);
+    } else {
+      lines.push(`- **File**: \`${source.file}:${source.line}\``);
+    }
+  }
+  lines.push(`- **URL**: ${url}`);
+  lines.push(`- **Tag**: \`<${tagName}>\``);
+  lines.push("");
+  if (source && sourceSnippet) {
+    const startLine = Math.max(1, source.line - 10);
+    const endLine = source.line + 10;
+    lines.push("## Source Code");
+    lines.push("```tsx");
+    lines.push(`// ${source.file}:${startLine}-${endLine}`);
+    lines.push(sourceSnippet);
+    lines.push("```");
+    lines.push("");
+  }
+  lines.push("## Styling");
+  if (classes) {
+    lines.push(`- **Classes**: \`${classes}\``);
+  }
+  const styleEntries = Object.entries(computedStyles);
+  if (styleEntries.length > 0) {
+    lines.push(`- **Computed**: ${styleEntries.map(([k, v]) => `${camelToKebab(k)}: ${v}`).join(", ")}`);
+  }
+  lines.push(`- **Dimensions**: ${Math.round(dimensions.width)}x${Math.round(dimensions.height)}px at (${Math.round(dimensions.x)}, ${Math.round(dimensions.y)})`);
+  lines.push("");
+  if (componentHierarchy.length > 0) {
+    lines.push("## Component Hierarchy");
+    lines.push(componentHierarchy.join(" > "));
+    lines.push("");
+  }
+  if (screenshotPath) {
+    lines.push("## Screenshot");
+    lines.push(`![element](${screenshotPath})`);
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+function buildMultiMarkdown(contexts, sourceSnippets, screenshotPaths) {
+  const lines = [
+    `# UI Context Capture (${contexts.length} elements)`,
+    ""
+  ];
+  for (let i = 0; i < contexts.length; i++) {
+    const ctx = contexts[i];
+    const snippet = sourceSnippets[i];
+    const screenshot = screenshotPaths[i];
+    lines.push(`---`);
+    lines.push("");
+    lines.push(`## Element ${i + 1}: \`<${ctx.tagName}>\`${ctx.source?.component ? ` (${ctx.source.component})` : ""}`);
+    lines.push("");
+    if (ctx.source) {
+      if (ctx.source.component) {
+        lines.push(`- **Component**: \`${ctx.source.component}\` in \`${ctx.source.file}:${ctx.source.line}\``);
+      } else {
+        lines.push(`- **File**: \`${ctx.source.file}:${ctx.source.line}\``);
+      }
+    }
+    lines.push(`- **URL**: ${ctx.url}`);
+    lines.push("");
+    if (ctx.source && snippet) {
+      const startLine = Math.max(1, ctx.source.line - 10);
+      const endLine = ctx.source.line + 10;
+      lines.push("### Source Code");
+      lines.push("```tsx");
+      lines.push(`// ${ctx.source.file}:${startLine}-${endLine}`);
+      lines.push(snippet);
+      lines.push("```");
+      lines.push("");
+    }
+    lines.push("### Styling");
+    if (ctx.classes) {
+      lines.push(`- **Classes**: \`${ctx.classes}\``);
+    }
+    const styleEntries = Object.entries(ctx.computedStyles);
+    if (styleEntries.length > 0) {
+      lines.push(`- **Computed**: ${styleEntries.map(([k, v]) => `${camelToKebab(k)}: ${v}`).join(", ")}`);
+    }
+    lines.push(`- **Dimensions**: ${Math.round(ctx.dimensions.width)}x${Math.round(ctx.dimensions.height)}px at (${Math.round(ctx.dimensions.x)}, ${Math.round(ctx.dimensions.y)})`);
+    lines.push("");
+    if (ctx.componentHierarchy.length > 0) {
+      lines.push("### Component Hierarchy");
+      lines.push(ctx.componentHierarchy.join(" > "));
+      lines.push("");
+    }
+    if (screenshot) {
+      lines.push("### Screenshot");
+      lines.push(`![element ${i + 1}](${screenshot})`);
+      lines.push("");
+    }
+  }
+  return lines.join("\n");
+}
+function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+}
+
+// src/clipboard.ts
+import { exec } from "child_process";
+import { platform } from "os";
+function copyToClipboard(text) {
+  return new Promise((resolve, reject) => {
+    const os = platform();
+    let cmd;
+    if (os === "darwin") {
+      cmd = "pbcopy";
+    } else if (os === "linux") {
+      cmd = "xclip -selection clipboard";
+    } else if (os === "win32") {
+      cmd = "clip";
+    } else {
+      reject(new Error(`Unsupported platform: ${os}`));
+      return;
+    }
+    const proc = exec(cmd, (err) => {
+      if (err) reject(err);
+      else resolve();
+    });
+    proc.stdin?.write(text);
+    proc.stdin?.end();
+  });
+}
+
+// src/ws-server.ts
+function setupWebSocket(server, options) {
+  const root = server.config.root;
+  const outputDir = options.outputDir || ".ui-context";
+  const shouldCopy = options.clipboard !== false;
+  server.ws.on("ui-context:capture", async (data, client) => {
+    try {
+      const count = Array.isArray(data) ? data.length : 1;
+      console.log(`[ui-context-kit] Received context capture (${count} element${count > 1 ? "s" : ""})`);
+      const filePath = await writeContext(data, root, outputDir);
+      if (shouldCopy) {
+        try {
+          const fs3 = await import("fs");
+          const content = fs3.readFileSync(filePath, "utf-8");
+          await copyToClipboard(content);
+          console.log("[ui-context-kit] Context copied to clipboard");
+        } catch (e) {
+          console.warn("[ui-context-kit] Could not copy to clipboard:", e);
+        }
+      }
+      client.send("ui-context:capture-result", { success: true });
+    } catch (err) {
+      console.error("[ui-context-kit] Error writing context:", err);
+      client.send("ui-context:capture-result", { success: false, error: err.message });
+    }
+  });
+}
+
+// src/vite-plugin.ts
+var JSX_EXTENSIONS = /\.(jsx|tsx)$/;
+var VIRTUAL_MODULE_ID = "virtual:ui-context-overlay";
+var RESOLVED_VIRTUAL_MODULE_ID = "\0" + VIRTUAL_MODULE_ID;
+function createVitePlugin(options = {}) {
+  const {
+    shortcut = "alt+x",
+    include,
+    exclude = ["node_modules"]
+  } = options;
+  let projectRoot = "";
+  const transformPlugin = {
+    name: "ui-context-kit:transform",
+    enforce: "pre",
+    apply: "serve",
+    configResolved(config) {
+      projectRoot = config.root;
+    },
+    transform(code, id) {
+      if (!JSX_EXTENSIONS.test(id)) return null;
+      const relativePath = path2.relative(projectRoot, id);
+      if (exclude?.some((p) => relativePath.includes(p))) return null;
+      if (include && !include.some((p) => relativePath.includes(p))) return null;
+      if (id.includes("\0") || id.includes("node_modules")) return null;
+      const filePath = path2.relative(projectRoot, id);
+      let originalCode;
+      try {
+        originalCode = fs2.readFileSync(id, "utf-8");
+      } catch {
+      }
+      const result = injectSourceAttributes(code, filePath, originalCode);
+      if (!result) return null;
+      return { code: result.code, map: result.map };
+    }
+  };
+  const overlayPlugin = {
+    name: "ui-context-kit:overlay",
+    apply: "serve",
+    resolveId(id) {
+      if (id === VIRTUAL_MODULE_ID) return RESOLVED_VIRTUAL_MODULE_ID;
+    },
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+        return getOverlayCode(shortcut);
+      }
+    },
+    configureServer(server) {
+      setupWebSocket(server, options);
+    },
+    transformIndexHtml() {
+      return [
+        {
+          tag: "script",
+          attrs: { type: "module", src: `/@id/${VIRTUAL_MODULE_ID}` },
+          injectTo: "body"
+        }
+      ];
+    }
+  };
+  return [transformPlugin, overlayPlugin];
+}
+function getOverlayCode(shortcut) {
+  return `
+// UI Context Kit - Overlay (auto-injected in dev mode)
+(function() {
+  if (typeof window === 'undefined') return;
+
+  var isActive = false;
+  var highlightEl = null;
+  var toolbarEl = null;
+  var selectedEl = null;
+  var isFrozen = false;
+  var frozenObservers = [];
+  var multiSelected = new Set();
+
+  var SHORTCUT = '${shortcut}';
+  var ONBOARDING_KEY = 'ui-context-kit-onboarding-dismissed';
+
+  // ---- Shadow DOM Overlay ----
+  function createOverlay() {
+    var host = document.createElement('div');
+    host.id = 'ui-context-host';
+    host.style.cssText = 'position:fixed;top:0;left:0;width:0;height:0;z-index:2147483647;pointer-events:none;';
+    document.body.appendChild(host);
+
+    var shadow = host.attachShadow({ mode: 'open' });
+    shadow.innerHTML = [
+      '<style>',
+      '.highlight { position:fixed; border:2px solid #3b82f6; background:rgba(59,130,246,0.08); pointer-events:none; transition:all 0.15s ease; border-radius:3px; display:none; }',
+      '.highlight-label { position:absolute; top:-22px; left:-2px; background:#3b82f6; color:white; font-size:11px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; padding:2px 8px; border-radius:3px 3px 0 0; white-space:nowrap; }',
+      '.toolbar { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#0f172a; border:1px solid #334155; border-radius:12px; padding:8px 12px; display:flex; gap:6px; align-items:center; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; box-shadow:0 8px 32px rgba(0,0,0,0.5); pointer-events:auto; }',
+      '.toolbar-label { color:#94a3b8; font-size:12px; padding:0 4px; }',
+      '.toolbar-btn { color:white; border:none; padding:6px 14px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap; }',
+      '.toolbar-btn:hover { filter:brightness(1.15); }',
+      '.toolbar-btn.primary { background:#3b82f6; }',
+      '.toolbar-btn.secondary { background:#475569; }',
+      '.toolbar-btn.freeze { background:#475569; }',
+      '.toolbar-btn.freeze.active { background:#f59e0b; color:#1e293b; }',
+      '.badge { display:inline-block; background:#f59e0b; color:#1e293b; font-size:10px; font-weight:700; padding:1px 5px; border-radius:10px; margin-left:4px; }',
+      '.divider { width:1px; height:20px; background:#334155; }',
+      '.toast { position:fixed; bottom:72px; left:50%; transform:translateX(-50%); background:#0f172a; color:#e2e8f0; padding:10px 20px; border-radius:8px; font-size:13px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; box-shadow:0 4px 16px rgba(0,0,0,0.4); pointer-events:none; animation:toastIn 0.2s ease; }',
+      '@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(8px); } }',
+      '.banner { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); border:1px solid #334155; border-radius:12px; padding:12px 20px; display:flex; gap:12px; align-items:center; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; box-shadow:0 8px 32px rgba(0,0,0,0.4); animation:bannerIn 0.4s ease; max-width:480px; pointer-events:auto; }',
+      '@keyframes bannerIn { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }',
+      '.banner-text { color:#e2e8f0; font-size:13px; line-height:1.4; }',
+      '.banner-text strong { color:#60a5fa; }',
+      '.kbd { display:inline-block; background:#334155; color:#e2e8f0; padding:1px 6px; border-radius:4px; font-size:12px; font-family:monospace; border:1px solid #475569; }',
+      '.banner-close { background:none; border:none; color:#64748b; cursor:pointer; padding:4px; font-size:16px; flex-shrink:0; }',
+      '.banner-close:hover { color:#94a3b8; }',
+      '</style>',
+      '<div class="highlight"><div class="highlight-label"></div></div>',
+      '<div class="toolbar" style="display:none">',
+      '  <span class="toolbar-label">UI Context</span>',
+      '  <div class="divider"></div>',
+      '  <button class="toolbar-btn primary" id="capture-btn">Capture</button>',
+      '  <button class="toolbar-btn primary" id="capture-all-btn" style="display:none">Capture All <span class="badge" id="multi-badge" style="display:none">0</span></button>',
+      '  <div class="divider"></div>',
+      '  <button class="toolbar-btn freeze" id="freeze-btn" title="Freeze DOM (Ctrl+Shift+F)">Freeze</button>',
+      '  <button class="toolbar-btn secondary" id="close-btn">\\u2715</button>',
+      '</div>',
+    ].join('\\n');
+
+    highlightEl = shadow.querySelector('.highlight');
+    toolbarEl = shadow.querySelector('.toolbar');
+
+    shadow.getElementById('close-btn').addEventListener('click', deactivate);
+    shadow.getElementById('capture-btn').addEventListener('click', function() {
+      if (selectedEl) captureAndSend(selectedEl);
+    });
+    shadow.getElementById('capture-all-btn').addEventListener('click', captureAllSelected);
+    shadow.getElementById('freeze-btn').addEventListener('click', toggleFreeze);
+
+    return { host: host, shadow: shadow };
+  }
+
+  var overlayRef = null;
+
+  function showHighlight(el) {
+    if (!highlightEl || !el) { highlightEl && (highlightEl.style.display = 'none'); return; }
+    var rect = el.getBoundingClientRect();
+    highlightEl.style.display = 'block';
+    highlightEl.style.top = rect.top + 'px';
+    highlightEl.style.left = rect.left + 'px';
+    highlightEl.style.width = rect.width + 'px';
+    highlightEl.style.height = rect.height + 'px';
+
+    var label = highlightEl.querySelector('.highlight-label');
+    var src = el.getAttribute('data-source-file');
+    var line = el.getAttribute('data-source-line');
+    var comp = el.getAttribute('data-source-component');
+    label.textContent = src
+      ? (comp || el.tagName.toLowerCase()) + ' \\u00b7 ' + src + ':' + line
+      : el.tagName.toLowerCase();
+  }
+
+  function showToast(msg, duration) {
+    if (!overlayRef) return;
+    duration = duration || 3000;
+    var t = document.createElement('div');
+    t.className = 'toast';
+    t.textContent = msg;
+    overlayRef.shadow.appendChild(t);
+    setTimeout(function() { t.remove(); }, duration);
+  }
+
+  // ---- React Fiber Hierarchy ----
+  function getComponentHierarchy(el) {
+    var fiberKey = Object.keys(el).find(function(k) {
+      return k.startsWith('__reactFiber$') || k.startsWith('__reactInternalInstance$');
+    });
+    if (!fiberKey) return [];
+    var hierarchy = [];
+    var fiber = el[fiberKey];
+    while (fiber) {
+      if (typeof fiber.type === 'function') {
+        var name = fiber.type.displayName || fiber.type.name;
+        if (name && !name.startsWith('_') && name !== 'Fragment') hierarchy.unshift(name);
+      } else if (typeof fiber.type === 'object' && fiber.type) {
+        var name = fiber.type.displayName || (fiber.type.render && (fiber.type.render.displayName || fiber.type.render.name));
+        if (name && !name.startsWith('_') && name !== 'Fragment') hierarchy.unshift(name);
+      }
+      fiber = fiber.return;
+    }
+    return hierarchy;
+  }
+
+  // ---- Computed Styles ----
+  var STYLE_PROPS = [
+    'padding','padding-top','padding-right','padding-bottom','padding-left',
+    'margin','margin-top','margin-right','margin-bottom','margin-left',
+    'background-color','color','font-size','font-weight','font-family',
+    'border-radius','display','flex-direction','justify-content','align-items',
+    'gap','width','height','overflow','position','z-index','opacity',
+    'border','box-shadow','line-height','letter-spacing','text-align'
+  ];
+
+  function extractContext(el) {
+    var computed = getComputedStyle(el);
+    var rect = el.getBoundingClientRect();
+    var styles = {};
+    for (var i = 0; i < STYLE_PROPS.length; i++) {
+      var p = STYLE_PROPS[i];
+      var v = computed.getPropertyValue(p);
+      if (v && v !== 'none' && v !== 'normal' && v !== 'auto' && v !== '0px' && v !== 'rgba(0, 0, 0, 0)') {
+        styles[p] = v;
+      }
+    }
+
+    var file = el.getAttribute('data-source-file');
+    var line = el.getAttribute('data-source-line');
+    var col = el.getAttribute('data-source-col');
+    var component = el.getAttribute('data-source-component');
+
+    return {
+      source: file ? { file: file, line: parseInt(line||'0'), col: parseInt(col||'0'), component: component || undefined } : null,
+      tagName: el.tagName.toLowerCase(),
+      classes: el.className || '',
+      computedStyles: styles,
+      dimensions: { width: rect.width, height: rect.height, x: rect.x, y: rect.y },
+      componentHierarchy: getComponentHierarchy(el),
+      url: location.href
+    };
+  }
+
+  // ---- Screenshot ----
+  function captureScreenshot(el) {
+    return new Promise(function(resolve) {
+      try {
+        var rect = el.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) { resolve(undefined); return; }
+
+        var canvas = document.createElement('canvas');
+        var dpr = window.devicePixelRatio || 1;
+        var pad = 8;
+        var w = Math.ceil(rect.width + pad * 2);
+        var h = Math.ceil(rect.height + pad * 2);
+        canvas.width = w * dpr;
+        canvas.height = h * dpr;
+
+        var ctx = canvas.getContext('2d');
+        if (!ctx) { resolve(undefined); return; }
+        ctx.scale(dpr, dpr);
+
+        // Try SVG foreignObject approach
+        var clone = el.cloneNode(true);
+        copyStyles(el, clone);
+
+        var svgNs = 'http://www.w3.org/2000/svg';
+        var svg = document.createElementNS(svgNs, 'svg');
+        svg.setAttribute('width', String(w));
+        svg.setAttribute('height', String(h));
+        svg.setAttribute('xmlns', svgNs);
+
+        var fo = document.createElementNS(svgNs, 'foreignObject');
+        fo.setAttribute('width', '100%');
+        fo.setAttribute('height', '100%');
+
+        var container = document.createElement('div');
+        container.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+        container.style.cssText = 'width:' + w + 'px;height:' + h + 'px;display:flex;align-items:center;justify-content:center;background:white;padding:' + pad + 'px;box-sizing:border-box;';
+        container.appendChild(clone);
+        fo.appendChild(container);
+        svg.appendChild(fo);
+
+        var svgStr = new XMLSerializer().serializeToString(svg);
+        var blob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
+        var url = URL.createObjectURL(blob);
+
+        var img = new Image();
+        img.onload = function() {
+          ctx.drawImage(img, 0, 0);
+          URL.revokeObjectURL(url);
+          try { resolve(canvas.toDataURL('image/png')); } catch(e) { resolve(undefined); }
+        };
+        img.onerror = function() {
+          URL.revokeObjectURL(url);
+          // Fallback: placeholder
+          ctx.fillStyle = '#f8fafc';
+          ctx.fillRect(0, 0, w, h);
+          ctx.strokeStyle = '#3b82f6';
+          ctx.lineWidth = 2;
+          ctx.strokeRect(pad, pad, rect.width, rect.height);
+          ctx.fillStyle = '#64748b';
+          ctx.font = '11px -apple-system, BlinkMacSystemFont, sans-serif';
+          ctx.fillText(Math.round(rect.width) + ' x ' + Math.round(rect.height) + 'px', pad + 4, pad + rect.height / 2 + 4);
+          try { resolve(canvas.toDataURL('image/png')); } catch(e) { resolve(undefined); }
+        };
+        img.src = url;
+      } catch(e) {
+        resolve(undefined);
+      }
+    });
+  }
+
+  function copyStyles(src, tgt) {
+    var cs = getComputedStyle(src);
+    var props = ['display','width','height','padding','margin','border','border-radius','background','background-color','color','font-size','font-weight','font-family','line-height','text-align','box-shadow','opacity','flex-direction','justify-content','align-items','gap','overflow'];
+    for (var i = 0; i < props.length; i++) {
+      tgt.style.setProperty(props[i], cs.getPropertyValue(props[i]));
+    }
+    var sc = src.children, tc = tgt.children;
+    for (var j = 0; j < sc.length && j < tc.length; j++) {
+      if (sc[j] instanceof HTMLElement && tc[j] instanceof HTMLElement) copyStyles(sc[j], tc[j]);
+    }
+  }
+
+  // ---- Capture & Send ----
+  function captureAndSend(el) {
+    showToast('Capturing context...');
+    var ctx = extractContext(el);
+
+    captureScreenshot(el).then(function(screenshot) {
+      if (screenshot) ctx.screenshotDataUrl = screenshot;
+
+      if (import.meta.hot) {
+        import.meta.hot.send('ui-context:capture', ctx);
+        import.meta.hot.on('ui-context:capture-result', function(result) {
+          if (result.success) {
+            showToast('Context captured! Check .ui-context/latest.md');
+          } else {
+            showToast('Capture failed: ' + (result.error || 'unknown error'));
+          }
+        });
+      }
+    });
+  }
+
+  function captureAllSelected() {
+    if (multiSelected.size === 0) {
+      showToast('No elements selected. Use Shift+Click to select multiple.');
+      return;
+    }
+    showToast('Capturing ' + multiSelected.size + ' elements...');
+
+    var elements = Array.from(multiSelected);
+    var contexts = [];
+    var pending = elements.length;
+
+    elements.forEach(function(el) {
+      var ctx = extractContext(el);
+      captureScreenshot(el).then(function(screenshot) {
+        if (screenshot) ctx.screenshotDataUrl = screenshot;
+        contexts.push(ctx);
+        pending--;
+        if (pending === 0) {
+          if (import.meta.hot) {
+            import.meta.hot.send('ui-context:capture', contexts);
+            import.meta.hot.on('ui-context:capture-result', function(result) {
+              if (result.success) {
+                showToast(contexts.length + ' elements captured!');
+                clearMultiSelection();
+              } else {
+                showToast('Capture failed: ' + (result.error || 'unknown error'));
+              }
+            });
+          }
+        }
+      });
+    });
+  }
+
+  function updateMultiBadge() {
+    if (!overlayRef) return;
+    var btn = overlayRef.shadow.getElementById('capture-all-btn');
+    var badge = overlayRef.shadow.getElementById('multi-badge');
+    if (multiSelected.size > 0) {
+      btn.style.display = '';
+      badge.style.display = '';
+      badge.textContent = String(multiSelected.size);
+    } else {
+      btn.style.display = 'none';
+      badge.style.display = 'none';
+    }
+  }
+
+  function clearMultiSelection() {
+    multiSelected.forEach(function(el) { el.style.outline = ''; });
+    multiSelected.clear();
+    updateMultiBadge();
+  }
+
+  // ---- Freeze Mode ----
+  function toggleFreeze() {
+    if (isFrozen) {
+      unfreezeDOM();
+      showToast('DOM unfrozen');
+    } else {
+      freezeDOM();
+      showToast('DOM frozen \u2014 hover states preserved');
+    }
+    var btn = overlayRef && overlayRef.shadow.getElementById('freeze-btn');
+    if (btn) {
+      if (isFrozen) {
+        btn.classList.add('active');
+        btn.textContent = 'Frozen';
+      } else {
+        btn.classList.remove('active');
+        btn.textContent = 'Freeze';
+      }
+    }
+  }
+
+  function freezeDOM() {
+    isFrozen = true;
+    var observer = new MutationObserver(function(mutations) {
+      for (var i = 0; i < mutations.length; i++) {
+        var m = mutations[i];
+        for (var j = 0; j < m.addedNodes.length; j++) {
+          var node = m.addedNodes[j];
+          if (node instanceof HTMLElement && !(node.id && node.id.indexOf('ui-context') !== -1)) {
+            node.remove();
+          }
+        }
+        if (m.type === 'attributes' && m.target instanceof HTMLElement) {
+          if (!(m.target.id && m.target.id.indexOf('ui-context') !== -1)) {
+            var old = m.oldValue;
+            if (old !== null && m.attributeName) {
+              m.target.setAttribute(m.attributeName, old);
+            }
+          }
+        }
+      }
+    });
+    observer.observe(document.body, {
+      childList: true, subtree: true, attributes: true, attributeOldValue: true
+    });
+    frozenObservers.push(observer);
+  }
+
+  function unfreezeDOM() {
+    isFrozen = false;
+    frozenObservers.forEach(function(obs) { obs.disconnect(); });
+    frozenObservers = [];
+  }
+
+  // ---- Event Handlers ----
+  function isOverlayEl(t) {
+    return t.id === 'ui-context-host' || (t.closest && t.closest('#ui-context-host'));
+  }
+
+  function onMouseMove(e) {
+    if (!isActive) return;
+    var t = e.target;
+    if (isOverlayEl(t)) return;
+    showHighlight(t);
+  }
+
+  function onClick(e) {
+    if (!isActive) return;
+    var t = e.target;
+    if (isOverlayEl(t)) return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Shift+Click: multi-select
+    if (e.shiftKey) {
+      if (multiSelected.has(t)) {
+        multiSelected.delete(t);
+        t.style.outline = '';
+      } else {
+        multiSelected.add(t);
+        t.style.outline = '2px dashed #f59e0b';
+      }
+      updateMultiBadge();
+      return;
+    }
+
+    selectedEl = t;
+    captureAndSend(t);
+  }
+
+  // ---- Activate / Deactivate ----
+  function activate() {
+    if (isActive) return;
+    isActive = true;
+    overlayRef = createOverlay();
+    toolbarEl.style.display = 'flex';
+    document.addEventListener('mousemove', onMouseMove, true);
+    document.addEventListener('click', onClick, true);
+    document.body.style.cursor = 'crosshair';
+    showToast('Click to capture, Shift+click for multi-select', 2000);
+  }
+
+  function deactivate() {
+    if (!isActive) return;
+    isActive = false;
+    selectedEl = null;
+    if (isFrozen) unfreezeDOM();
+    clearMultiSelection();
+    document.removeEventListener('mousemove', onMouseMove, true);
+    document.removeEventListener('click', onClick, true);
+    document.body.style.cursor = '';
+    if (overlayRef) {
+      overlayRef.host.remove();
+      overlayRef = null;
+      highlightEl = null;
+      toolbarEl = null;
+    }
+  }
+
+  // ---- Keyboard Shortcuts ----
+  document.addEventListener('keydown', function(e) {
+    var keys = SHORTCUT.split('+');
+    var needsAlt = keys.indexOf('alt') !== -1;
+    var needsCtrl = keys.indexOf('ctrl') !== -1;
+    var needsShift = keys.indexOf('shift') !== -1;
+    var mainKey = keys[keys.length - 1].toLowerCase();
+
+    if (e.altKey === needsAlt && e.ctrlKey === needsCtrl && e.shiftKey === needsShift && e.key.toLowerCase() === mainKey) {
+      e.preventDefault();
+      isActive ? deactivate() : activate();
+      return;
+    }
+
+    // Freeze: Ctrl+Shift+F (only when active)
+    if (isActive && e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'f') {
+      e.preventDefault();
+      toggleFreeze();
+    }
+  });
+
+  // ---- Onboarding Banner ----
+  function showOnboarding() {
+    try { if (localStorage.getItem(ONBOARDING_KEY)) return; } catch(e) { return; }
+
+    // Wait for overlay ref to be set up
+    var bannerHost = document.createElement('div');
+    bannerHost.style.cssText = 'position:fixed;top:0;left:0;width:0;height:0;z-index:2147483646;pointer-events:none;';
+    document.body.appendChild(bannerHost);
+    var bannerShadow = bannerHost.attachShadow({ mode: 'open' });
+
+    var shortcutDisplay = SHORTCUT.split('+').map(function(k) { return k.charAt(0).toUpperCase() + k.slice(1); }).join(' + ');
+
+    bannerShadow.innerHTML = [
+      '<style>',
+      '.banner { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); border:1px solid #334155; border-radius:12px; padding:12px 20px; display:flex; gap:12px; align-items:center; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; box-shadow:0 8px 32px rgba(0,0,0,0.4); animation:bannerIn 0.4s ease; max-width:480px; pointer-events:auto; }',
+      '@keyframes bannerIn { from { opacity:0; transform:translateX(-50%) translateY(20px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }',
+      '.text { color:#e2e8f0; font-size:13px; line-height:1.4; }',
+      '.text strong { color:#60a5fa; }',
+      '.kbd { display:inline-block; background:#334155; color:#e2e8f0; padding:1px 6px; border-radius:4px; font-size:12px; font-family:monospace; border:1px solid #475569; }',
+      '.close { background:none; border:none; color:#64748b; cursor:pointer; padding:4px; font-size:16px; flex-shrink:0; }',
+      '.close:hover { color:#94a3b8; }',
+      '</style>',
+      '<div class="banner">',
+      '  <span style="font-size:20px">\\u{1F3AF}</span>',
+      '  <span class="text">',
+      '    <strong>UI Context Kit</strong> is ready! Press <kbd class="kbd">' + shortcutDisplay + '</kbd> to capture any UI element for AI.',
+      '    <strong>Shift+Click</strong> for multi-select, <strong>Ctrl+Shift+F</strong> to freeze state.',
+      '  </span>',
+      '  <button class="close" title="Dismiss">\\u2715</button>',
+      '</div>',
+    ].join('\\n');
+
+    bannerShadow.querySelector('.close').addEventListener('click', function() {
+      bannerHost.remove();
+      try { localStorage.setItem(ONBOARDING_KEY, '1'); } catch(e) {}
+    });
+
+    setTimeout(function() {
+      if (bannerHost.parentNode) {
+        var banner = bannerShadow.querySelector('.banner');
+        if (banner) {
+          banner.style.transition = 'opacity 0.3s ease';
+          banner.style.opacity = '0';
+          setTimeout(function() { bannerHost.remove(); }, 300);
+        }
+      }
+    }, 8000);
+  }
+
+  showOnboarding();
+  console.log('[ui-context-kit] Ready. Press ' + SHORTCUT + ' to activate.');
+})();
+  `;
+}
+
+// src/next-wrapper.ts
+function withUIContext(nextConfig = {}, _options) {
+  if (process.env.NODE_ENV !== "development") return nextConfig;
+  return {
+    ...nextConfig,
+    webpack(config, context) {
+      if (typeof nextConfig.webpack === "function") {
+        config = nextConfig.webpack(config, context);
+      }
+      return config;
+    }
+  };
+}
+
+// src/index.ts
+function uiContextKit(options) {
+  return createVitePlugin(options);
+}
+export {
+  uiContextKit,
+  withUIContext,
+  writeContext
+};
+//# sourceMappingURL=index.js.map