@naylabs/agent-lens 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,552 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),T=require("react-dom");function R(t){try{const r=t.getAttribute("data-component-id")||t.getAttribute("data-component");if(r)return{componentName:r.split(":")[0]||r,sourceFile:r.includes(":")?r:null};const a=Object.keys(t).find(n=>n.startsWith("__reactFiber$")||n.startsWith("__reactInternalInstance$"));if(!a)return{componentName:null,sourceFile:null};let o=t[a],d=null,x=null;for(;o;){const n=o.type,l=o._debugSource;if(l!=null&&l.fileName&&!x){const s=l.fileName,p=l.lineNumber?`:${l.lineNumber}`:"";x=`${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&&x)break;o=o.return||null}return{componentName:d,sourceFile:x}}catch{return{componentName:null,sourceFile:null}}}function M(t){if(t.id)return`#${CSS.escape(t.id)}`;const r=t.getAttribute("data-testid");if(r)return`[data-testid="${CSS.escape(r)}"]`;const a=[];let o=t;for(;o&&o.nodeType===Node.ELEMENT_NODE&&o!==document.body;){let d=o.tagName.toLowerCase();if(o.id){d=`#${CSS.escape(o.id)}`,a.unshift(d);break}if(o.className&&typeof o.className=="string"){const n=o.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 x=o.parentElement;if(x){const n=Array.from(x.children).filter(l=>l.tagName===o.tagName);if(n.length>1){const l=n.indexOf(o)+1;d+=`:nth-of-type(${l})`}}if(a.unshift(d),o=o.parentElement,a.length>=4)break}return a.join(" > ")}function B(t){const r=window.getComputedStyle(t),a={};r.display!=="inline"&&r.display!=="block"&&(a.display=r.display),r.display.includes("flex")&&(a.flexDirection=r.flexDirection,r.gap&&r.gap!=="normal"&&(a.gap=r.gap)),r.display.includes("grid")&&r.gridTemplateColumns&&(a.gridTemplateColumns=r.gridTemplateColumns,r.gap&&r.gap!=="normal"&&(a.gap=r.gap)),r.padding&&r.padding!=="0px"&&(a.padding=r.padding),r.margin&&r.margin!=="0px"&&(a.margin=r.margin);const o=t.getBoundingClientRect();return a.width=`${Math.round(o.width)}px`,a.height=`${Math.round(o.height)}px`,r.backgroundColor&&r.backgroundColor!=="rgba(0, 0, 0, 0)"&&r.backgroundColor!=="transparent"&&(a.backgroundColor=r.backgroundColor),r.color&&(a.color=r.color),r.fontSize&&(a.fontSize=r.fontSize),r.fontWeight&&r.fontWeight!=="400"&&(a.fontWeight=r.fontWeight),r.borderRadius&&r.borderRadius!=="0px"&&(a.borderRadius=r.borderRadius),r.border&&r.border!=="none"&&!r.border.startsWith("0px")&&(a.border=r.border),a}function E(t){const r=t.getBoundingClientRect(),{componentName:a,sourceFile:o}=R(t),d=M(t),x=B(t);let n=null;const s=(t.innerText||t.textContent||"").replace(/\s+/g," ").trim();s&&(n=s.length>50?`${s.slice(0,47)}...`:s);const p=typeof t.className=="string"?t.className.trim():"";return{componentName:a,sourceFile:o,selector:d,tagName:t.tagName.toLowerCase(),classes:p,textSnippet:n,rect:{top:Math.round(r.top+window.scrollY),left:Math.round(r.left+window.scrollX),width:Math.round(r.width),height:Math.round(r.height)},computedStyles:x,viewport:{width:window.innerWidth,height:window.innerHeight},route:window.location.pathname+window.location.search+window.location.hash}}const W={style:"Style",copy:"Copy",layout:"Layout",motion:"Motion",bug:"Bug",general:"Note"};function O(t){return t<640?"Mobile (< 640px)":t<1024?"Tablet (640-1024px)":"Desktop (>= 1024px)"}function P(t){if(t.length===0)return"No visual pins recorded.";const r=t[0],a=r.metadata.viewport,o=r.metadata.route,d=O(a.width),x=[`### AgentLens: Visual UI Feedback (${t.length} ${t.length===1?"item":"items"})`,`**Context:** Route: \`${o}\` | Viewport: \`${a.width} × ${a.height}px\` (${d})`,`**Timestamp:** ${new Date().toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}`,"","Please implement the following visual and code adjustments:","","---"].join(`
+`),n=t.map(s=>{const p=s.metadata,v=W[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,g=[];return g.push(`box: ${i.width||"auto"} × ${i.height||"auto"}`),i.display&&g.push(`display: ${i.display}`),i.gap&&g.push(`gap: ${i.gap}`),i.padding&&g.push(`padding: ${i.padding}`),i.margin&&g.push(`margin: ${i.margin}`),i.backgroundColor&&g.push(`bg: ${i.backgroundColor}`),i.color&&g.push(`color: ${i.color}`),i.fontSize&&g.push(`font-size: ${i.fontSize}`),i.borderRadius&&g.push(`radius: ${i.borderRadius}`),g.length>0&&y.push(`- **Computed Styles:** ${g.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[x,...n,l].join(`
+
+`)}const Y=`
+: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;
+}
+`,K=({size:t=16})=>e.jsxs("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"22",y1:"12",x2:"18",y2:"12"}),e.jsx("line",{x1:"6",y1:"12",x2:"2",y2:"12"}),e.jsx("line",{x1:"12",y1:"6",x2:"12",y2:"2"}),e.jsx("line",{x1:"12",y1:"22",x2:"12",y2:"18"})]}),A=({size:t=14})=>e.jsxs("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M12 17v5"}),e.jsx("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"})]}),_=({size:t=14})=>e.jsxs("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("rect",{x:"9",y:"9",width:"13",height:"13",rx:"2",ry:"2"}),e.jsx("path",{d:"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"})]}),V=({size:t=14})=>e.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("polyline",{points:"20 6 9 17 4 12"})}),H=({size:t=14})=>e.jsxs("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("polyline",{points:"3 6 5 6 21 6"}),e.jsx("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"})]}),C=({size:t=14})=>e.jsxs("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),q=({size:t=14})=>e.jsxs("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("line",{x1:"8",y1:"6",x2:"21",y2:"6"}),e.jsx("line",{x1:"8",y1:"12",x2:"21",y2:"12"}),e.jsx("line",{x1:"8",y1:"18",x2:"21",y2:"18"}),e.jsx("line",{x1:"3",y1:"6",x2:"3.01",y2:"6"}),e.jsx("line",{x1:"3",y1:"12",x2:"3.01",y2:"12"}),e.jsx("line",{x1:"3",y1:"18",x2:"3.01",y2:"18"})]}),X=({size:t=14})=>e.jsxs("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("line",{x1:"2",y1:"12",x2:"22",y2:"12"}),e.jsx("line",{x1:"12",y1:"2",x2:"12",y2:"22"}),e.jsx("path",{d:"m20 16-4-4 4-4"}),e.jsx("path",{d:"m4 8 4 4-4 4"}),e.jsx("path",{d:"m16 4-4 4-4-4"}),e.jsx("path",{d:"m8 20 4-4 4 4"})]}),G=({isInspectActive:t,pinCount:r,isTrayOpen:a,freezeCountdown:o,onToggleInspect:d,onToggleTray:x,onTriggerFreeze:n,onCopyPrompt:l})=>{const[s,p]=h.useState(!1),[v,f]=h.useState(!1),y=()=>{l(),p(!0),setTimeout(()=>{p(!1)},2200)},i=b=>{b.stopPropagation(),b.preventDefault()};return v||t||a||o!==null?e.jsxs("div",{className:"arc-dock",onPointerDown:i,children:[e.jsxs("div",{className:"arc-brand-pill",children:[e.jsx("span",{className:"arc-brand-dot"}),e.jsx("span",{children:"AgentLens"})]}),e.jsxs("button",{type:"button",className:`arc-btn ${t?"arc-btn-active":""}`,onPointerDown:i,onClick:d,title:"Inspect element (Hotkey: C or Option+C)",children:[e.jsx(A,{size:13}),e.jsx("span",{children:t?"Click Element...":"Pin"})]}),e.jsxs("button",{type:"button",className:`arc-btn ${o!==null?"arc-btn-active":""}`,onPointerDown:i,onClick:n,disabled:o!==null,title:"3s Freeze countdown: open any popover or hover menu before inspection (Hotkey: Option+F)",children:[e.jsx(X,{size:13}),e.jsx("span",{children:o!==null?`Freeze in ${o}s...`:"Freeze (3s)"})]}),e.jsxs("button",{type:"button",className:`arc-btn ${a?"arc-btn-active":""}`,onPointerDown:i,onClick:x,title:"Review active pins",children:[e.jsx(q,{size:13}),e.jsx("span",{children:"Pins"}),e.jsx("span",{className:"arc-badge",children:r})]}),e.jsx("button",{type:"button",className:`arc-btn ${s?"arc-btn-success":"arc-btn-gradient"}`,onPointerDown:i,onClick:y,disabled:r===0,style:{opacity:r===0?.5:1,cursor:r===0?"not-allowed":"pointer"},title:r===0?"Pin an element first":"Copy prompt for AI agent",children:s?e.jsxs(e.Fragment,{children:[e.jsx(V,{size:13}),e.jsx("span",{children:"Copied!"})]}):e.jsxs(e.Fragment,{children:[e.jsx(_,{size:13}),e.jsx("span",{children:"Copy Prompt"})]})}),e.jsx("button",{type:"button",className:"arc-btn-icon",style:{width:"26px",height:"26px"},onPointerDown:i,onClick:()=>f(!1),title:"Collapse to bottom right",children:e.jsx(C,{size:12})})]}):e.jsxs("button",{type:"button",className:"arc-launcher-btn",onPointerDown:i,onClick:()=>f(!0),title:"Open AgentLens (Hotkey: C or Option+C)",children:[e.jsx(K,{size:20}),r>0&&e.jsx("span",{className:"arc-launcher-badge",children:r})]})},U=({isActive:t,onSelectElement:r,shadowHost:a})=>{const[o,d]=h.useState(null),[x,n]=h.useState(null);if(h.useEffect(()=>{if(!t){d(null),n(null);return}const v=i=>{const g=document.elementFromPoint(i.clientX,i.clientY);if(!g||g===document.body||g===document.documentElement){d(null),n(null);return}if(a&&(a.contains(g)||a===g))return;const b=g.getBoundingClientRect();d(b),n(E(g))},f=i=>{a&&(a.contains(i.target)||a===i.target)||(i.preventDefault(),i.stopPropagation(),i.stopImmediatePropagation())},y=i=>{if(a&&(a.contains(i.target)||a===i.target))return;i.preventDefault(),i.stopPropagation(),i.stopImmediatePropagation();const g=document.elementFromPoint(i.clientX,i.clientY);!g||g===document.body||g===document.documentElement||(r(g),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)}},[t,a,r]),!t||!o||!x)return null;const l=x.componentName?`<${x.componentName}>`:x.tagName,s=`${Math.round(o.width)}×${Math.round(o.height)}`,p=o.top>32?-26:o.height+6;return e.jsx("div",{className:"arc-inspect-box",style:{top:`${o.top}px`,left:`${o.left}px`,width:`${o.width}px`,height:`${o.height}px`},children:e.jsxs("div",{className:"arc-inspect-label",style:{top:`${p}px`},children:[e.jsx("span",{children:l}),e.jsx("span",{className:"size",children:s})]})})},J=({pin:t,isActive:r,onClick:a})=>{const[o,d]=h.useState(null),x=h.useCallback(()=>{if(!t.targetElement||!t.targetElement.isConnected){d(null);return}const n=t.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})},[t.targetElement]);return h.useEffect(()=>{x();const n=()=>x(),l=()=>x();window.addEventListener("scroll",n,{passive:!0,capture:!0}),window.addEventListener("resize",l,{passive:!0});let s=null;return t.targetElement&&typeof ResizeObserver<"u"&&(s=new ResizeObserver(()=>x()),s.observe(t.targetElement)),()=>{window.removeEventListener("scroll",n,!0),window.removeEventListener("resize",l),s==null||s.disconnect()}},[x,t.targetElement]),o?e.jsx("div",{className:`arc-pin-marker ${r?"active":""}`,style:{left:`${o.x}px`,top:`${o.y}px`},onClick:n=>{n.stopPropagation(),a()},title:`Pin #${t.number}: ${t.metadata.componentName||t.metadata.tagName}`,children:t.number}):null},Q=[{id:"style",label:"Style"},{id:"copy",label:"Copy"},{id:"layout",label:"Layout"},{id:"motion",label:"Motion"},{id:"bug",label:"Bug"}],Z=({pin:t,onSave:r,onDelete:a,onClose:o})=>{var g;const[d,x]=h.useState(t.instruction),[n,l]=h.useState(t.category),s=h.useRef(null);h.useEffect(()=>{setTimeout(()=>{var b;(b=s.current)==null||b.focus()},40)},[]);const p=b=>{(b.metaKey||b.ctrlKey)&&b.key==="Enter"?(b.preventDefault(),r(d,n)):b.key==="Escape"&&(b.preventDefault(),o())},v=(g=t.targetElement)==null?void 0:g.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=t.metadata.componentName?`<${t.metadata.componentName}>`:`<${t.metadata.tagName}>`;return e.jsxs("div",{className:"arc-popover",style:{top:`${f}px`,left:`${y}px`},onClick:b=>b.stopPropagation(),children:[e.jsxs("div",{className:"arc-popover-header",children:[e.jsxs("span",{className:"arc-component-badge",title:t.metadata.sourceFile||t.metadata.selector,children:[e.jsxs("span",{children:["#",t.number]}),e.jsx("span",{children:"•"}),e.jsx("span",{children:i})]}),e.jsx("button",{className:"arc-btn-icon",onClick:o,title:"Close",children:e.jsx(C,{size:12})})]}),e.jsx("div",{className:"arc-chips",children:Q.map(b=>e.jsx("button",{type:"button",className:`arc-chip ${n===b.id?"selected":""}`,onClick:()=>l(b.id),children:b.label},b.id))}),e.jsx("textarea",{ref:s,className:"arc-textarea",placeholder:"Instructions for the agent (e.g. increase padding, rounded-full, change copy...)",value:d,onChange:b=>x(b.target.value),onKeyDown:p}),e.jsxs("div",{className:"arc-popover-footer",children:[e.jsx("button",{className:"arc-btn-icon danger",onClick:a,title:"Delete pin",children:e.jsx(H,{size:13})}),e.jsx("div",{style:{display:"flex",gap:"8px"},children:e.jsx("button",{type:"button",className:"arc-btn arc-btn-gradient",onClick:()=>r(d,n),children:"Save Pin"})})]})]})},ee=({pins:t,isOpen:r,onSelectPin:a,onDeletePin:o,onClearAll:d,onClose:x})=>r?e.jsxs("div",{className:"arc-tray",onClick:n=>n.stopPropagation(),children:[e.jsxs("div",{className:"arc-tray-header",children:[e.jsxs("div",{className:"arc-tray-title",children:[e.jsx(A,{size:13}),e.jsx("span",{children:"Active Pins"}),e.jsx("span",{className:"arc-badge",children:t.length})]}),e.jsxs("div",{style:{display:"flex",gap:"6px"},children:[t.length>0&&e.jsx("button",{type:"button",className:"arc-btn",style:{height:"24px",padding:"0 8px",fontSize:"11px"},onClick:d,children:"Clear All"}),e.jsx("button",{type:"button",className:"arc-btn-icon",style:{width:"24px",height:"24px"},onClick:x,children:e.jsx(C,{size:12})})]})]}),e.jsx("div",{className:"arc-tray-list",children:t.length===0?e.jsx("div",{style:{padding:"24px 12px",textAlign:"center",color:"#71717A",fontSize:"12px"},children:"No pins yet. Press “Pin” (or hit C) to inspect an element."}):t.map(n=>{const l=n.metadata.componentName?`<${n.metadata.componentName}>`:`<${n.metadata.tagName}>`;return e.jsxs("div",{className:"arc-tray-item",onClick:()=>{var s;(s=n.targetElement)==null||s.scrollIntoView({behavior:"smooth",block:"center"}),a(n)},children:[e.jsxs("div",{className:"arc-tray-item-left",children:[e.jsx("div",{className:"arc-tray-pin-num",children:n.number}),e.jsxs("div",{className:"arc-tray-item-content",children:[e.jsxs("div",{className:"arc-tray-item-meta",children:[l," • ",n.metadata.sourceFile||n.metadata.selector]}),e.jsx("div",{className:"arc-tray-item-text",children:n.instruction||e.jsx("em",{children:"(No instruction provided)"})})]})]}),e.jsx("button",{type:"button",className:"arc-btn-icon",style:{width:"24px",height:"24px",flexShrink:0},onClick:s=>{s.stopPropagation(),o(n.id)},title:"Delete pin",children:e.jsx(C,{size:11})})]},n.id)})})]}):null,te=({defaultCategory:t="style",onPromptCopied:r})=>{const[a,o]=h.useState(null),[d,x]=h.useState(null),[n,l]=h.useState([]),[s,p]=h.useState(null),[v,f]=h.useState(!1),[y,i]=h.useState(!1),[g,b]=h.useState(null),F=h.useRef(null);h.useEffect(()=>{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 m=u.attachShadow({mode:"open"}),w=document.createElement("style");w.textContent=Y,m.appendChild(w);const k=document.createElement("div");return k.style.position="relative",k.style.zIndex="2147483647",m.appendChild(k),o(u),x(k),()=>{u.remove()}},[]),h.useEffect(()=>{if(!a)return;const c=u=>{const m=u.target;a&&(a.contains(m)||a===m)&&(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)}},[a]),h.useEffect(()=>{const c=u=>{const m=document.activeElement,w=(m==null?void 0:m.tagName)==="INPUT"||(m==null?void 0:m.tagName)==="TEXTAREA"||(m==null?void 0:m.isContentEditable),k=u.altKey;if(k&&u.key.toLowerCase()==="c"){u.preventDefault(),f(j=>!j);return}if(k&&u.key.toLowerCase()==="f"){u.preventDefault(),S();return}!w&&u.key.toLowerCase()==="c"&&!u.metaKey&&!u.ctrlKey&&!u.altKey?(u.preventDefault(),f(j=>!j)):u.key==="Escape"&&(F.current&&(clearInterval(F.current),F.current=null,b(null)),f(!1),p(null),i(!1))};return window.addEventListener("keydown",c),()=>window.removeEventListener("keydown",c)},[]);const S=h.useCallback(()=>{F.current&&clearInterval(F.current),b(3);let c=3;F.current=setInterval(()=>{c-=1,c>0?b(c):(F.current&&(clearInterval(F.current),F.current=null),b(null),f(!0))},1e3)},[]),L=h.useCallback(c=>{const u=E(c),m=n.length+1,w=`pin-${Date.now()}`,k={id:w,number:m,targetElement:c,category:t,instruction:"",createdAt:Date.now(),metadata:u};l(j=>[...j,k]),p(w),f(!1)},[n.length,t]),z=h.useCallback((c,u)=>{l(m=>m.map(w=>w.id===s?{...w,instruction:c,category:u}:w)),p(null)},[s]),$=h.useCallback(c=>{l(u=>u.filter(w=>w.id!==c).map((w,k)=>({...w,number:k+1}))),p(u=>u===c?null:u)},[]),D=h.useCallback(()=>{l([]),p(null),i(!1)},[]),I=h.useCallback(()=>{if(n.length===0)return;const c=P(n);navigator.clipboard.writeText(c),r==null||r(c,n.length)},[n,r]);if(!d)return null;const N=n.find(c=>c.id===s);return T.createPortal(e.jsxs(e.Fragment,{children:[e.jsx(U,{isActive:v,onSelectElement:L,shadowHost:a}),n.map(c=>e.jsx(J,{pin:c,isActive:c.id===s,onClick:()=>{p(u=>u===c.id?null:c.id)}},c.id)),N&&e.jsx(Z,{pin:N,onSave:z,onDelete:()=>$(N.id),onClose:()=>p(null)}),e.jsx(ee,{pins:n,isOpen:y,onSelectPin:c=>p(c.id),onDeletePin:$,onClearAll:D,onClose:()=>i(!1)}),e.jsx(G,{isInspectActive:v,pinCount:n.length,isTrayOpen:y,freezeCountdown:g,onToggleInspect:()=>f(c=>!c),onToggleTray:()=>i(c=>!c),onTriggerFreeze:S,onCopyPrompt:I})]}),d)};exports.AgentLens=te;exports.compileAgentPrompt=P;exports.extractElementMetadata=E;