@naylabs/agent-lens 0.0.0-stage → 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1324 @@
+import { jsxs as b, jsx as r, Fragment as S } from "react/jsx-runtime";
+import { useState as k, useEffect as $, useCallback as N, useRef as D } from "react";
+import { createPortal as W } from "react-dom";
+function O(e) {
+  try {
+    const t = e.getAttribute("data-component-id") || e.getAttribute("data-component");
+    if (t)
+      return {
+        componentName: t.split(":")[0] || t,
+        sourceFile: t.includes(":") ? t : null
+      };
+    const o = Object.keys(e).find(
+      (n) => n.startsWith("__reactFiber$") || n.startsWith("__reactInternalInstance$")
+    );
+    if (!o)
+      return { componentName: null, sourceFile: null };
+    let a = e[o], d = null, g = null;
+    for (; a; ) {
+      const n = a.type, l = a._debugSource;
+      if (l != null && l.fileName && !g) {
+        const s = l.fileName, p = l.lineNumber ? `:${l.lineNumber}` : "";
+        g = `${s.replace(/.*\/src\//, "src/")}${p}`;
+      }
+      if (typeof n == "function") {
+        const s = n.displayName || n.name;
+        s && s !== "Anonymous" && !s.startsWith("_") && !d && (d = s);
+      } else if (typeof n == "object" && n !== null) {
+        const s = n.displayName;
+        s && !d && (d = s);
+      }
+      if (d && g)
+        break;
+      a = a.return || null;
+    }
+    return { componentName: d, sourceFile: g };
+  } catch {
+    return { componentName: null, sourceFile: null };
+  }
+}
+function Y(e) {
+  if (e.id)
+    return `#${CSS.escape(e.id)}`;
+  const t = e.getAttribute("data-testid");
+  if (t)
+    return `[data-testid="${CSS.escape(t)}"]`;
+  const o = [];
+  let a = e;
+  for (; a && a.nodeType === Node.ELEMENT_NODE && a !== document.body; ) {
+    let d = a.tagName.toLowerCase();
+    if (a.id) {
+      d = `#${CSS.escape(a.id)}`, o.unshift(d);
+      break;
+    }
+    if (a.className && typeof a.className == "string") {
+      const n = a.className.trim().split(/\s+/).filter((l) => !l.includes(":") && !l.includes("/") && !l.startsWith("[") && l.length < 25);
+      n.length > 0 && n[0] && (d += `.${CSS.escape(n[0])}`);
+    }
+    const g = a.parentElement;
+    if (g) {
+      const n = Array.from(g.children).filter((l) => l.tagName === a.tagName);
+      if (n.length > 1) {
+        const l = n.indexOf(a) + 1;
+        d += `:nth-of-type(${l})`;
+      }
+    }
+    if (o.unshift(d), a = a.parentElement, o.length >= 4) break;
+  }
+  return o.join(" > ");
+}
+function K(e) {
+  const t = window.getComputedStyle(e), o = {};
+  t.display !== "inline" && t.display !== "block" && (o.display = t.display), t.display.includes("flex") && (o.flexDirection = t.flexDirection, t.gap && t.gap !== "normal" && (o.gap = t.gap)), t.display.includes("grid") && t.gridTemplateColumns && (o.gridTemplateColumns = t.gridTemplateColumns, t.gap && t.gap !== "normal" && (o.gap = t.gap)), t.padding && t.padding !== "0px" && (o.padding = t.padding), t.margin && t.margin !== "0px" && (o.margin = t.margin);
+  const a = e.getBoundingClientRect();
+  return o.width = `${Math.round(a.width)}px`, o.height = `${Math.round(a.height)}px`, t.backgroundColor && t.backgroundColor !== "rgba(0, 0, 0, 0)" && t.backgroundColor !== "transparent" && (o.backgroundColor = t.backgroundColor), t.color && (o.color = t.color), t.fontSize && (o.fontSize = t.fontSize), t.fontWeight && t.fontWeight !== "400" && (o.fontWeight = t.fontWeight), t.borderRadius && t.borderRadius !== "0px" && (o.borderRadius = t.borderRadius), t.border && t.border !== "none" && !t.border.startsWith("0px") && (o.border = t.border), o;
+}
+function I(e) {
+  const t = e.getBoundingClientRect(), { componentName: o, sourceFile: a } = O(e), d = Y(e), g = K(e);
+  let n = null;
+  const s = (e.innerText || e.textContent || "").replace(/\s+/g, " ").trim();
+  s && (n = s.length > 50 ? `${s.slice(0, 47)}...` : s);
+  const p = typeof e.className == "string" ? e.className.trim() : "";
+  return {
+    componentName: o,
+    sourceFile: a,
+    selector: d,
+    tagName: e.tagName.toLowerCase(),
+    classes: p,
+    textSnippet: n,
+    rect: {
+      top: Math.round(t.top + window.scrollY),
+      left: Math.round(t.left + window.scrollX),
+      width: Math.round(t.width),
+      height: Math.round(t.height)
+    },
+    computedStyles: g,
+    viewport: {
+      width: window.innerWidth,
+      height: window.innerHeight
+    },
+    route: window.location.pathname + window.location.search + window.location.hash
+  };
+}
+const _ = {
+  style: "Style",
+  copy: "Copy",
+  layout: "Layout",
+  motion: "Motion",
+  bug: "Bug",
+  general: "Note"
+};
+function V(e) {
+  return e < 640 ? "Mobile (< 640px)" : e < 1024 ? "Tablet (640-1024px)" : "Desktop (>= 1024px)";
+}
+function H(e) {
+  if (e.length === 0)
+    return "No visual pins recorded.";
+  const t = e[0], o = t.metadata.viewport, a = t.metadata.route, d = V(o.width), g = [
+    `### AgentLens: Visual UI Feedback (${e.length} ${e.length === 1 ? "item" : "items"})`,
+    `**Context:** Route: \`${a}\` | Viewport: \`${o.width} × ${o.height}px\` (${d})`,
+    `**Timestamp:** ${(/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`,
+    "",
+    "Please implement the following visual and code adjustments:",
+    "",
+    "---"
+  ].join(`
+`), n = e.map((s) => {
+    const p = s.metadata, v = _[s.category] || "Note", f = p.componentName ? `<${p.componentName}> (${p.tagName})` : `<${p.tagName}>`, y = [
+      `#### Pin #${s.number}: ${f}`,
+      `- **Category:** [${v}]`,
+      `- **Instruction:** "${s.instruction.trim()}"`
+    ];
+    p.sourceFile && y.push(`- **Source Component:** \`${p.sourceFile}\``), y.push(`- **CSS Selector:** \`${p.selector}\``), p.textSnippet && y.push(`- **Current Text Snippet:** "${p.textSnippet}"`), p.classes && y.push(`- **Current Classes:** \`${p.classes}\``);
+    const i = p.computedStyles, h = [];
+    return h.push(`box: ${i.width || "auto"} × ${i.height || "auto"}`), i.display && h.push(`display: ${i.display}`), i.gap && h.push(`gap: ${i.gap}`), i.padding && h.push(`padding: ${i.padding}`), i.margin && h.push(`margin: ${i.margin}`), i.backgroundColor && h.push(`bg: ${i.backgroundColor}`), i.color && h.push(`color: ${i.color}`), i.fontSize && h.push(`font-size: ${i.fontSize}`), i.borderRadius && h.push(`radius: ${i.borderRadius}`), h.length > 0 && y.push(`- **Computed Styles:** ${h.join(" | ")}`), y.join(`
+`);
+  }), l = [
+    "---",
+    "**Implementation Guidance:**",
+    "1. Locate each component file indicated above.",
+    "2. Apply the requested visual styling, copy, or layout adjustments.",
+    "3. Ensure responsive behavior is preserved across breakpoints."
+  ].join(`
+`);
+  return [g, ...n, l].join(`
+
+`);
+}
+const X = `
+:host {
+  all: initial;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  z-index: 2147483647;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #F4F4F5;
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Arc Design System Tokens */
+:host {
+  --arc-gradient: linear-gradient(135deg, #FF6EA7 0%, #A855F7 50%, #38BDF8 100%);
+  --arc-gradient-subtle: linear-gradient(135deg, rgba(255, 110, 167, 0.12) 0%, rgba(168, 85, 247, 0.12) 50%, rgba(56, 189, 248, 0.12) 100%);
+  --arc-cyan: #38BDF8;
+  --arc-purple: #A855F7;
+  --arc-pink: #FF6EA7;
+  --arc-glass-bg: rgba(18, 18, 24, 0.88);
+  --arc-glass-surface: rgba(28, 28, 36, 0.72);
+  --arc-glass-hover: rgba(42, 42, 54, 0.85);
+  --arc-border: rgba(255, 255, 255, 0.1);
+  --arc-border-highlight: rgba(255, 255, 255, 0.22);
+  --arc-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
+  --arc-shadow-hover: 0 20px 48px -8px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.18);
+  --arc-radius-pill: 9999px;
+  --arc-radius-card: 16px;
+}
+
+/* Loom / Intercom Floating Trigger Button (Bottom Right) */
+.arc-launcher-btn {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--arc-glass-bg);
+  backdrop-filter: blur(28px) saturate(190%);
+  -webkit-backdrop-filter: blur(28px) saturate(190%);
+  border: 1px solid var(--arc-border);
+  box-shadow: var(--arc-shadow);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #FFFFFF;
+  cursor: pointer;
+  pointer-events: auto;
+  user-select: none;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 2147483647;
+}
+
+.arc-launcher-btn:hover {
+  transform: translateY(-2px) scale(1.04);
+  border-color: var(--arc-border-highlight);
+  box-shadow: var(--arc-shadow-hover);
+}
+
+.arc-launcher-btn:active {
+  transform: translateY(0) scale(0.96);
+}
+
+.arc-launcher-badge {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--arc-radius-pill);
+  background: var(--arc-gradient);
+  color: #FFFFFF;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.6);
+}
+
+/* Arc Expanded Dock / Toolbar (Docked at Bottom-Right) */
+.arc-dock {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  background: var(--arc-glass-bg);
+  backdrop-filter: blur(28px) saturate(190%);
+  -webkit-backdrop-filter: blur(28px) saturate(190%);
+  border: 1px solid var(--arc-border);
+  border-radius: var(--arc-radius-pill);
+  box-shadow: var(--arc-shadow);
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: auto;
+  user-select: none;
+  z-index: 2147483647;
+}
+
+.arc-dock:hover {
+  border-color: var(--arc-border-highlight);
+  box-shadow: var(--arc-shadow-hover);
+}
+
+/* Brand Pill */
+.arc-brand-pill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: var(--arc-radius-pill);
+  background: rgba(255, 255, 255, 0.04);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: #FFFFFF;
+}
+
+.arc-brand-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--arc-gradient);
+  box-shadow: 0 0 8px rgba(168, 85, 247, 0.8);
+  animation: arc-pulse 2s infinite ease-in-out;
+}
+
+@keyframes arc-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.85); }
+}
+
+/* Tactile Pill Buttons */
+.arc-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  background: var(--arc-glass-surface);
+  border: 1px solid var(--arc-border);
+  border-radius: var(--arc-radius-pill);
+  color: #D4D4D8;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+  outline: none;
+  user-select: none;
+}
+
+.arc-btn:hover {
+  background: var(--arc-glass-hover);
+  color: #FFFFFF;
+  border-color: var(--arc-border-highlight);
+  transform: translateY(-1px);
+}
+
+.arc-btn:active {
+  transform: translateY(1px) scale(0.98);
+}
+
+.arc-btn-active {
+  background: var(--arc-gradient);
+  color: #FFFFFF;
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 3px 12px rgba(168, 85, 247, 0.45);
+}
+
+.arc-btn-active:hover {
+  filter: brightness(1.08);
+}
+
+.arc-btn-gradient {
+  background: var(--arc-gradient);
+  color: #FFFFFF;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 0 3px 12px rgba(168, 85, 247, 0.35);
+}
+
+.arc-btn-gradient:hover {
+  filter: brightness(1.1);
+  transform: translateY(-1px);
+}
+
+.arc-btn-success {
+  background: #10B981;
+  color: #FFFFFF;
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4);
+}
+
+.arc-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: var(--arc-radius-pill);
+  font-size: 10px;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.12);
+  color: #FFFFFF;
+}
+
+/* Hover Inspector Overlay */
+.arc-inspect-box {
+  position: fixed;
+  pointer-events: none;
+  z-index: 2147483640;
+  border: 1.5px solid var(--arc-cyan);
+  background: rgba(56, 189, 248, 0.06);
+  border-radius: 4px;
+  transition: all 0.08s ease-out;
+  box-shadow: 0 0 16px rgba(56, 189, 248, 0.2);
+}
+
+.arc-inspect-label {
+  position: absolute;
+  top: -26px;
+  left: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  background: rgba(14, 14, 18, 0.94);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(56, 189, 248, 0.5);
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--arc-cyan);
+  white-space: nowrap;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.arc-inspect-label .size {
+  color: #A1A1AA;
+  font-weight: 400;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 10px;
+}
+
+/* Numbered Pin Badges */
+.arc-pin-marker {
+  position: absolute;
+  z-index: 2147483642;
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--arc-gradient);
+  color: #FFFFFF;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.9);
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
+  transform: translate(-50%, -50%);
+  user-select: none;
+}
+
+.arc-pin-marker:hover {
+  transform: translate(-50%, -50%) scale(1.15);
+  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.75), 0 0 0 2px #FFFFFF;
+}
+
+.arc-pin-marker.active {
+  transform: translate(-50%, -50%) scale(1.2);
+  box-shadow: 0 8px 22px rgba(255, 110, 167, 0.8), 0 0 0 2.5px #FFFFFF;
+}
+
+/* Figma-style Comment Popover */
+.arc-popover {
+  position: absolute;
+  z-index: 2147483645;
+  width: 320px;
+  background: var(--arc-glass-bg);
+  backdrop-filter: blur(32px) saturate(200%);
+  -webkit-backdrop-filter: blur(32px) saturate(200%);
+  border: 1px solid var(--arc-border);
+  border-radius: var(--arc-radius-card);
+  padding: 14px;
+  box-shadow: var(--arc-shadow-hover);
+  pointer-events: auto;
+  animation: arc-pop-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes arc-pop-in {
+  from { opacity: 0; transform: translateY(6px) scale(0.96); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.arc-popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.arc-component-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  border-radius: var(--arc-radius-pill);
+  background: rgba(56, 189, 248, 0.12);
+  border: 1px solid rgba(56, 189, 248, 0.28);
+  color: var(--arc-cyan);
+  font-size: 11px;
+  font-weight: 600;
+  max-width: 230px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Category Chips (Clean Text, No Emojis) */
+.arc-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-bottom: 10px;
+}
+
+.arc-chip {
+  padding: 3px 9px;
+  border-radius: var(--arc-radius-pill);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--arc-border);
+  font-size: 11px;
+  font-weight: 500;
+  color: #A1A1AA;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.arc-chip:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #FFFFFF;
+}
+
+.arc-chip.selected {
+  background: var(--arc-gradient);
+  border-color: rgba(255, 255, 255, 0.3);
+  color: #FFFFFF;
+  font-weight: 600;
+}
+
+/* Comment Input */
+.arc-textarea {
+  width: 100%;
+  height: 76px;
+  padding: 10px 12px;
+  background: rgba(0, 0, 0, 0.32);
+  border: 1px solid var(--arc-border);
+  border-radius: 10px;
+  color: #F4F4F5;
+  font-size: 12px;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+  transition: border-color 0.15s ease;
+  font-family: inherit;
+}
+
+.arc-textarea:focus {
+  border-color: var(--arc-purple);
+  box-shadow: 0 0 0 1px var(--arc-purple);
+}
+
+.arc-textarea::placeholder {
+  color: #71717A;
+}
+
+/* Popover Footer */
+.arc-popover-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.arc-btn-icon {
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--arc-border);
+  color: #A1A1AA;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.arc-btn-icon:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #FFFFFF;
+}
+
+.arc-btn-icon.danger:hover {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: rgba(239, 68, 68, 0.4);
+  color: #EF4444;
+}
+
+/* Slide-up Tray (Docked at Bottom-Right above Launcher) */
+.arc-tray {
+  position: fixed;
+  bottom: 76px;
+  right: 24px;
+  width: 380px;
+  max-width: 90vw;
+  max-height: 360px;
+  background: var(--arc-glass-bg);
+  backdrop-filter: blur(32px) saturate(200%);
+  -webkit-backdrop-filter: blur(32px) saturate(200%);
+  border: 1px solid var(--arc-border);
+  border-radius: var(--arc-radius-card);
+  padding: 14px;
+  box-shadow: var(--arc-shadow-hover);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: auto;
+  animation: arc-pop-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 2147483646;
+}
+
+.arc-tray-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--arc-border);
+}
+
+.arc-tray-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.arc-tray-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  max-height: 250px;
+  padding-right: 2px;
+}
+
+.arc-tray-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.arc-tray-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+.arc-tray-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--arc-border);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.arc-tray-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: var(--arc-border-highlight);
+}
+
+.arc-tray-item-left {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.arc-tray-pin-num {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--arc-gradient);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  color: #FFFFFF;
+  flex-shrink: 0;
+}
+
+.arc-tray-item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.arc-tray-item-meta {
+  font-size: 11px;
+  color: var(--arc-cyan);
+  font-weight: 600;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.arc-tray-item-text {
+  font-size: 11px;
+  color: #E4E4E7;
+  line-height: 1.4;
+  word-break: break-word;
+}
+`, G = ({ size: e = 16 }) => /* @__PURE__ */ b(
+  "svg",
+  {
+    width: e,
+    height: e,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ r("line", { x1: "22", y1: "12", x2: "18", y2: "12" }),
+      /* @__PURE__ */ r("line", { x1: "6", y1: "12", x2: "2", y2: "12" }),
+      /* @__PURE__ */ r("line", { x1: "12", y1: "6", x2: "12", y2: "2" }),
+      /* @__PURE__ */ r("line", { x1: "12", y1: "22", x2: "12", y2: "18" })
+    ]
+  }
+), T = ({ size: e = 14 }) => /* @__PURE__ */ b(
+  "svg",
+  {
+    width: e,
+    height: e,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ r("path", { d: "M12 17v5" }),
+      /* @__PURE__ */ r("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1z" })
+    ]
+  }
+), U = ({ size: e = 14 }) => /* @__PURE__ */ b(
+  "svg",
+  {
+    width: e,
+    height: e,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ r("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+      /* @__PURE__ */ r("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+    ]
+  }
+), q = ({ size: e = 14 }) => /* @__PURE__ */ r(
+  "svg",
+  {
+    width: e,
+    height: e,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ r("polyline", { points: "20 6 9 17 4 12" })
+  }
+), J = ({ size: e = 14 }) => /* @__PURE__ */ b(
+  "svg",
+  {
+    width: e,
+    height: e,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ r("polyline", { points: "3 6 5 6 21 6" }),
+      /* @__PURE__ */ r("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+    ]
+  }
+), P = ({ size: e = 14 }) => /* @__PURE__ */ b(
+  "svg",
+  {
+    width: e,
+    height: e,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ r("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ r("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ]
+  }
+), Q = ({ size: e = 14 }) => /* @__PURE__ */ b(
+  "svg",
+  {
+    width: e,
+    height: e,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ r("line", { x1: "8", y1: "6", x2: "21", y2: "6" }),
+      /* @__PURE__ */ r("line", { x1: "8", y1: "12", x2: "21", y2: "12" }),
+      /* @__PURE__ */ r("line", { x1: "8", y1: "18", x2: "21", y2: "18" }),
+      /* @__PURE__ */ r("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }),
+      /* @__PURE__ */ r("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }),
+      /* @__PURE__ */ r("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })
+    ]
+  }
+), Z = ({ size: e = 14 }) => /* @__PURE__ */ b(
+  "svg",
+  {
+    width: e,
+    height: e,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ r("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+      /* @__PURE__ */ r("line", { x1: "12", y1: "2", x2: "12", y2: "22" }),
+      /* @__PURE__ */ r("path", { d: "m20 16-4-4 4-4" }),
+      /* @__PURE__ */ r("path", { d: "m4 8 4 4-4 4" }),
+      /* @__PURE__ */ r("path", { d: "m16 4-4 4-4-4" }),
+      /* @__PURE__ */ r("path", { d: "m8 20 4-4 4 4" })
+    ]
+  }
+), ee = ({
+  isInspectActive: e,
+  pinCount: t,
+  isTrayOpen: o,
+  freezeCountdown: a,
+  onToggleInspect: d,
+  onToggleTray: g,
+  onTriggerFreeze: n,
+  onCopyPrompt: l
+}) => {
+  const [s, p] = k(!1), [v, f] = k(!1), y = () => {
+    l(), p(!0), setTimeout(() => {
+      p(!1);
+    }, 2200);
+  }, i = (m) => {
+    m.stopPropagation(), m.preventDefault();
+  };
+  return v || e || o || a !== null ? /* @__PURE__ */ b("div", { className: "arc-dock", onPointerDown: i, children: [
+    /* @__PURE__ */ b("div", { className: "arc-brand-pill", children: [
+      /* @__PURE__ */ r("span", { className: "arc-brand-dot" }),
+      /* @__PURE__ */ r("span", { children: "AgentLens" })
+    ] }),
+    /* @__PURE__ */ b(
+      "button",
+      {
+        type: "button",
+        className: `arc-btn ${e ? "arc-btn-active" : ""}`,
+        onPointerDown: i,
+        onClick: d,
+        title: "Inspect element (Hotkey: C or Option+C)",
+        children: [
+          /* @__PURE__ */ r(T, { size: 13 }),
+          /* @__PURE__ */ r("span", { children: e ? "Click Element..." : "Pin" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ b(
+      "button",
+      {
+        type: "button",
+        className: `arc-btn ${a !== null ? "arc-btn-active" : ""}`,
+        onPointerDown: i,
+        onClick: n,
+        disabled: a !== null,
+        title: "3s Freeze countdown: open any popover or hover menu before inspection (Hotkey: Option+F)",
+        children: [
+          /* @__PURE__ */ r(Z, { size: 13 }),
+          /* @__PURE__ */ r("span", { children: a !== null ? `Freeze in ${a}s...` : "Freeze (3s)" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ b(
+      "button",
+      {
+        type: "button",
+        className: `arc-btn ${o ? "arc-btn-active" : ""}`,
+        onPointerDown: i,
+        onClick: g,
+        title: "Review active pins",
+        children: [
+          /* @__PURE__ */ r(Q, { size: 13 }),
+          /* @__PURE__ */ r("span", { children: "Pins" }),
+          /* @__PURE__ */ r("span", { className: "arc-badge", children: t })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: `arc-btn ${s ? "arc-btn-success" : "arc-btn-gradient"}`,
+        onPointerDown: i,
+        onClick: y,
+        disabled: t === 0,
+        style: {
+          opacity: t === 0 ? 0.5 : 1,
+          cursor: t === 0 ? "not-allowed" : "pointer"
+        },
+        title: t === 0 ? "Pin an element first" : "Copy prompt for AI agent",
+        children: s ? /* @__PURE__ */ b(S, { children: [
+          /* @__PURE__ */ r(q, { size: 13 }),
+          /* @__PURE__ */ r("span", { children: "Copied!" })
+        ] }) : /* @__PURE__ */ b(S, { children: [
+          /* @__PURE__ */ r(U, { size: 13 }),
+          /* @__PURE__ */ r("span", { children: "Copy Prompt" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: "arc-btn-icon",
+        style: { width: "26px", height: "26px" },
+        onPointerDown: i,
+        onClick: () => f(!1),
+        title: "Collapse to bottom right",
+        children: /* @__PURE__ */ r(P, { size: 12 })
+      }
+    )
+  ] }) : /* @__PURE__ */ b(
+    "button",
+    {
+      type: "button",
+      className: "arc-launcher-btn",
+      onPointerDown: i,
+      onClick: () => f(!0),
+      title: "Open AgentLens (Hotkey: C or Option+C)",
+      children: [
+        /* @__PURE__ */ r(G, { size: 20 }),
+        t > 0 && /* @__PURE__ */ r("span", { className: "arc-launcher-badge", children: t })
+      ]
+    }
+  );
+}, te = ({
+  isActive: e,
+  onSelectElement: t,
+  shadowHost: o
+}) => {
+  const [a, d] = k(null), [g, n] = k(null);
+  if ($(() => {
+    if (!e) {
+      d(null), n(null);
+      return;
+    }
+    const v = (i) => {
+      const h = document.elementFromPoint(i.clientX, i.clientY);
+      if (!h || h === document.body || h === document.documentElement) {
+        d(null), n(null);
+        return;
+      }
+      if (o && (o.contains(h) || o === h))
+        return;
+      const m = h.getBoundingClientRect();
+      d(m), n(I(h));
+    }, f = (i) => {
+      o && (o.contains(i.target) || o === i.target) || (i.preventDefault(), i.stopPropagation(), i.stopImmediatePropagation());
+    }, y = (i) => {
+      if (o && (o.contains(i.target) || o === i.target))
+        return;
+      i.preventDefault(), i.stopPropagation(), i.stopImmediatePropagation();
+      const h = document.elementFromPoint(i.clientX, i.clientY);
+      !h || h === document.body || h === document.documentElement || (t(h), d(null), n(null));
+    };
+    return window.addEventListener("pointermove", v, { passive: !0, capture: !0 }), window.addEventListener("pointerdown", f, { capture: !0 }), window.addEventListener("mousedown", f, { capture: !0 }), window.addEventListener("click", y, { capture: !0 }), () => {
+      window.removeEventListener("pointermove", v, !0), window.removeEventListener("pointerdown", f, !0), window.removeEventListener("mousedown", f, !0), window.removeEventListener("click", y, !0);
+    };
+  }, [e, o, t]), !e || !a || !g) return null;
+  const l = g.componentName ? `<${g.componentName}>` : g.tagName, s = `${Math.round(a.width)}×${Math.round(a.height)}`, p = a.top > 32 ? -26 : a.height + 6;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "arc-inspect-box",
+      style: {
+        top: `${a.top}px`,
+        left: `${a.left}px`,
+        width: `${a.width}px`,
+        height: `${a.height}px`
+      },
+      children: /* @__PURE__ */ b("div", { className: "arc-inspect-label", style: { top: `${p}px` }, children: [
+        /* @__PURE__ */ r("span", { children: l }),
+        /* @__PURE__ */ r("span", { className: "size", children: s })
+      ] })
+    }
+  );
+}, re = ({ pin: e, isActive: t, onClick: o }) => {
+  const [a, d] = k(null), g = N(() => {
+    if (!e.targetElement || !e.targetElement.isConnected) {
+      d(null);
+      return;
+    }
+    const n = e.targetElement.getBoundingClientRect(), l = n.left + Math.min(16, n.width / 2), s = n.top + Math.min(16, n.height / 2);
+    d({ x: l, y: s });
+  }, [e.targetElement]);
+  return $(() => {
+    g();
+    const n = () => g(), l = () => g();
+    window.addEventListener("scroll", n, { passive: !0, capture: !0 }), window.addEventListener("resize", l, { passive: !0 });
+    let s = null;
+    return e.targetElement && typeof ResizeObserver < "u" && (s = new ResizeObserver(() => g()), s.observe(e.targetElement)), () => {
+      window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", l), s == null || s.disconnect();
+    };
+  }, [g, e.targetElement]), a ? /* @__PURE__ */ r(
+    "div",
+    {
+      className: `arc-pin-marker ${t ? "active" : ""}`,
+      style: {
+        left: `${a.x}px`,
+        top: `${a.y}px`
+      },
+      onClick: (n) => {
+        n.stopPropagation(), o();
+      },
+      title: `Pin #${e.number}: ${e.metadata.componentName || e.metadata.tagName}`,
+      children: e.number
+    }
+  ) : null;
+}, ne = [
+  { id: "style", label: "Style" },
+  { id: "copy", label: "Copy" },
+  { id: "layout", label: "Layout" },
+  { id: "motion", label: "Motion" },
+  { id: "bug", label: "Bug" }
+], oe = ({ pin: e, onSave: t, onDelete: o, onClose: a }) => {
+  var h;
+  const [d, g] = k(e.instruction), [n, l] = k(e.category), s = D(null);
+  $(() => {
+    setTimeout(() => {
+      var m;
+      (m = s.current) == null || m.focus();
+    }, 40);
+  }, []);
+  const p = (m) => {
+    (m.metaKey || m.ctrlKey) && m.key === "Enter" ? (m.preventDefault(), t(d, n)) : m.key === "Escape" && (m.preventDefault(), a());
+  }, v = (h = e.targetElement) == null ? void 0 : h.getBoundingClientRect(), f = v ? Math.min(window.innerHeight - 260, Math.max(16, v.top + 28)) : 100, y = v ? Math.min(window.innerWidth - 340, Math.max(16, v.left + 16)) : 100, i = e.metadata.componentName ? `<${e.metadata.componentName}>` : `<${e.metadata.tagName}>`;
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: "arc-popover",
+      style: {
+        top: `${f}px`,
+        left: `${y}px`
+      },
+      onClick: (m) => m.stopPropagation(),
+      children: [
+        /* @__PURE__ */ b("div", { className: "arc-popover-header", children: [
+          /* @__PURE__ */ b("span", { className: "arc-component-badge", title: e.metadata.sourceFile || e.metadata.selector, children: [
+            /* @__PURE__ */ b("span", { children: [
+              "#",
+              e.number
+            ] }),
+            /* @__PURE__ */ r("span", { children: "•" }),
+            /* @__PURE__ */ r("span", { children: i })
+          ] }),
+          /* @__PURE__ */ r("button", { className: "arc-btn-icon", onClick: a, title: "Close", children: /* @__PURE__ */ r(P, { size: 12 }) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "arc-chips", children: ne.map((m) => /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            className: `arc-chip ${n === m.id ? "selected" : ""}`,
+            onClick: () => l(m.id),
+            children: m.label
+          },
+          m.id
+        )) }),
+        /* @__PURE__ */ r(
+          "textarea",
+          {
+            ref: s,
+            className: "arc-textarea",
+            placeholder: "Instructions for the agent (e.g. increase padding, rounded-full, change copy...)",
+            value: d,
+            onChange: (m) => g(m.target.value),
+            onKeyDown: p
+          }
+        ),
+        /* @__PURE__ */ b("div", { className: "arc-popover-footer", children: [
+          /* @__PURE__ */ r(
+            "button",
+            {
+              className: "arc-btn-icon danger",
+              onClick: o,
+              title: "Delete pin",
+              children: /* @__PURE__ */ r(J, { size: 13 })
+            }
+          ),
+          /* @__PURE__ */ r("div", { style: { display: "flex", gap: "8px" }, children: /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              className: "arc-btn arc-btn-gradient",
+              onClick: () => t(d, n),
+              children: "Save Pin"
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}, ae = ({
+  pins: e,
+  isOpen: t,
+  onSelectPin: o,
+  onDeletePin: a,
+  onClearAll: d,
+  onClose: g
+}) => t ? /* @__PURE__ */ b("div", { className: "arc-tray", onClick: (n) => n.stopPropagation(), children: [
+  /* @__PURE__ */ b("div", { className: "arc-tray-header", children: [
+    /* @__PURE__ */ b("div", { className: "arc-tray-title", children: [
+      /* @__PURE__ */ r(T, { size: 13 }),
+      /* @__PURE__ */ r("span", { children: "Active Pins" }),
+      /* @__PURE__ */ r("span", { className: "arc-badge", children: e.length })
+    ] }),
+    /* @__PURE__ */ b("div", { style: { display: "flex", gap: "6px" }, children: [
+      e.length > 0 && /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          className: "arc-btn",
+          style: { height: "24px", padding: "0 8px", fontSize: "11px" },
+          onClick: d,
+          children: "Clear All"
+        }
+      ),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          className: "arc-btn-icon",
+          style: { width: "24px", height: "24px" },
+          onClick: g,
+          children: /* @__PURE__ */ r(P, { size: 12 })
+        }
+      )
+    ] })
+  ] }),
+  /* @__PURE__ */ r("div", { className: "arc-tray-list", children: e.length === 0 ? /* @__PURE__ */ r("div", { style: { padding: "24px 12px", textAlign: "center", color: "#71717A", fontSize: "12px" }, children: "No pins yet. Press “Pin” (or hit C) to inspect an element." }) : e.map((n) => {
+    const l = n.metadata.componentName ? `<${n.metadata.componentName}>` : `<${n.metadata.tagName}>`;
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        className: "arc-tray-item",
+        onClick: () => {
+          var s;
+          (s = n.targetElement) == null || s.scrollIntoView({ behavior: "smooth", block: "center" }), o(n);
+        },
+        children: [
+          /* @__PURE__ */ b("div", { className: "arc-tray-item-left", children: [
+            /* @__PURE__ */ r("div", { className: "arc-tray-pin-num", children: n.number }),
+            /* @__PURE__ */ b("div", { className: "arc-tray-item-content", children: [
+              /* @__PURE__ */ b("div", { className: "arc-tray-item-meta", children: [
+                l,
+                " • ",
+                n.metadata.sourceFile || n.metadata.selector
+              ] }),
+              /* @__PURE__ */ r("div", { className: "arc-tray-item-text", children: n.instruction || /* @__PURE__ */ r("em", { children: "(No instruction provided)" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              className: "arc-btn-icon",
+              style: { width: "24px", height: "24px", flexShrink: 0 },
+              onClick: (s) => {
+                s.stopPropagation(), a(n.id);
+              },
+              title: "Delete pin",
+              children: /* @__PURE__ */ r(P, { size: 11 })
+            }
+          )
+        ]
+      },
+      n.id
+    );
+  }) })
+] }) : null, le = ({
+  defaultCategory: e = "style",
+  onPromptCopied: t
+}) => {
+  const [o, a] = k(null), [d, g] = k(null), [n, l] = k([]), [s, p] = k(null), [v, f] = k(!1), [y, i] = k(!1), [h, m] = k(null), C = D(null);
+  $(() => {
+    const c = document.getElementById("agent-lens-host");
+    c && c.remove();
+    const u = document.createElement("div");
+    u.id = "agent-lens-host", document.body.appendChild(u);
+    const x = u.attachShadow({ mode: "open" }), w = document.createElement("style");
+    w.textContent = X, x.appendChild(w);
+    const F = document.createElement("div");
+    return F.style.position = "relative", F.style.zIndex = "2147483647", x.appendChild(F), a(u), g(F), () => {
+      u.remove();
+    };
+  }, []), $(() => {
+    if (!o) return;
+    const c = (u) => {
+      const x = u.target;
+      o && (o.contains(x) || o === x) && (u.stopPropagation(), u.stopImmediatePropagation());
+    };
+    return window.addEventListener("pointerdown", c, { capture: !0 }), window.addEventListener("mousedown", c, { capture: !0 }), () => {
+      window.removeEventListener("pointerdown", c, !0), window.removeEventListener("mousedown", c, !0);
+    };
+  }, [o]), $(() => {
+    const c = (u) => {
+      const x = document.activeElement, w = (x == null ? void 0 : x.tagName) === "INPUT" || (x == null ? void 0 : x.tagName) === "TEXTAREA" || (x == null ? void 0 : x.isContentEditable), F = u.altKey;
+      if (F && u.key.toLowerCase() === "c") {
+        u.preventDefault(), f((E) => !E);
+        return;
+      }
+      if (F && u.key.toLowerCase() === "f") {
+        u.preventDefault(), z();
+        return;
+      }
+      !w && u.key.toLowerCase() === "c" && !u.metaKey && !u.ctrlKey && !u.altKey ? (u.preventDefault(), f((E) => !E)) : u.key === "Escape" && (C.current && (clearInterval(C.current), C.current = null, m(null)), f(!1), p(null), i(!1));
+    };
+    return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
+  }, []);
+  const z = N(() => {
+    C.current && clearInterval(C.current), m(3);
+    let c = 3;
+    C.current = setInterval(() => {
+      c -= 1, c > 0 ? m(c) : (C.current && (clearInterval(C.current), C.current = null), m(null), f(!0));
+    }, 1e3);
+  }, []), j = N(
+    (c) => {
+      const u = I(c), x = n.length + 1, w = `pin-${Date.now()}`, F = {
+        id: w,
+        number: x,
+        targetElement: c,
+        category: e,
+        instruction: "",
+        createdAt: Date.now(),
+        metadata: u
+      };
+      l((E) => [...E, F]), p(w), f(!1);
+    },
+    [n.length, e]
+  ), R = N((c, u) => {
+    l(
+      (x) => x.map((w) => w.id === s ? { ...w, instruction: c, category: u } : w)
+    ), p(null);
+  }, [s]), A = N((c) => {
+    l((u) => u.filter((w) => w.id !== c).map((w, F) => ({ ...w, number: F + 1 }))), p((u) => u === c ? null : u);
+  }, []), M = N(() => {
+    l([]), p(null), i(!1);
+  }, []), B = N(() => {
+    if (n.length === 0) return;
+    const c = H(n);
+    navigator.clipboard.writeText(c), t == null || t(c, n.length);
+  }, [n, t]);
+  if (!d) return null;
+  const L = n.find((c) => c.id === s);
+  return W(
+    /* @__PURE__ */ b(S, { children: [
+      /* @__PURE__ */ r(
+        te,
+        {
+          isActive: v,
+          onSelectElement: j,
+          shadowHost: o
+        }
+      ),
+      n.map((c) => /* @__PURE__ */ r(
+        re,
+        {
+          pin: c,
+          isActive: c.id === s,
+          onClick: () => {
+            p((u) => u === c.id ? null : c.id);
+          }
+        },
+        c.id
+      )),
+      L && /* @__PURE__ */ r(
+        oe,
+        {
+          pin: L,
+          onSave: R,
+          onDelete: () => A(L.id),
+          onClose: () => p(null)
+        }
+      ),
+      /* @__PURE__ */ r(
+        ae,
+        {
+          pins: n,
+          isOpen: y,
+          onSelectPin: (c) => p(c.id),
+          onDeletePin: A,
+          onClearAll: M,
+          onClose: () => i(!1)
+        }
+      ),
+      /* @__PURE__ */ r(
+        ee,
+        {
+          isInspectActive: v,
+          pinCount: n.length,
+          isTrayOpen: y,
+          freezeCountdown: h,
+          onToggleInspect: () => f((c) => !c),
+          onToggleTray: () => i((c) => !c),
+          onTriggerFreeze: z,
+          onCopyPrompt: B
+        }
+      )
+    ] }),
+    d
+  );
+};
+export {
+  le as AgentLens,
+  H as compileAgentPrompt,
+  I as extractElementMetadata
+};