@ericmhalvorsen/aperture 0.2.1

package/dist-browser/client.js

@@ -0,0 +1,457 @@
+var N=[],w=[];function V(){return N}function J(){return w}function Y(){let a=["log","warn","error","info","debug"];for(let e of a){let t=console[e];console[e]=(...r)=>{let i=r.map(o=>typeof o=="string"?o:JSON.stringify(o)).join(" ");N.push({level:e,message:i,timestamp:Date.now()}),N.length>500&&N.shift(),t(...r)}}}function K(){let a=window.fetch;window.fetch=async(...e)=>{let t={url:String(e[0]),method:"GET",start:Date.now(),end:0,status:0,responseText:""};e[1]&&(t.method=e[1].method||"GET");try{let r=await a(...e);return t.status=r.status,t.end=Date.now(),w.push(t),w.length>100&&w.shift(),r}catch(r){throw t.end=Date.now(),t.error=String(r),w.push(t),w.length>100&&w.shift(),r}}}var X={browser_dom_query:(a,{selector:e,includeHtml:t=!1})=>Array.from(document.querySelectorAll(String(e))).map(i=>({tag:i.tagName.toLowerCase(),text:i.textContent?.slice(0,200)||"",visible:!!i.offsetParent,attributes:Object.fromEntries(Array.from(i.attributes).map(o=>[o.name,o.value])),html:t?i.outerHTML.slice(0,500):void 0})),browser_network_requests:(a,{limit:e=20})=>J().slice(-Number(e)),browser_page_info:(a,{logLimit:e=20,logLevel:t="all"})=>{let r=V();return t!=="all"&&(r=r.filter(i=>i.level===t)),{url:window.location.href,title:document.title,width:window.innerWidth,height:window.innerHeight,scrollX:window.scrollX,scrollY:window.scrollY,userAgent:navigator.userAgent,logs:r.slice(-Number(e))}},browser_storage_get:(a,{type:e,key:t,prefix:r,name:i})=>{if(e==="localStorage"){let o={};if(t&&(o[String(t)]=localStorage.getItem(String(t))),r)for(let n=0;n<localStorage.length;n++){let l=localStorage.key(n);l?.startsWith(String(r))&&(o[l]=localStorage.getItem(l))}return o}if(e==="cookie"){let o={},n=document.cookie;if(n)for(let l of n.split(";")){let[s,p]=l.split("=").map(c=>c.trim());s&&(o[s]=decodeURIComponent(p||""))}if(i){let l=String(i);return{[l]:o[l]||null}}return o}return{error:`Unknown type: ${e}. Use 'localStorage' or 'cookie'.`}},browser_screenshot:async a=>{try{return{base64:(await a.captureScreenshotFromStream()).split(",")[1],format:"png"}}catch(e){return{error:e instanceof Error?e.message:String(e)}}},browser_evaluate:(a,{expression:e})=>{let t=window.eval(String(e));return{result:typeof t=="object"?JSON.stringify(t):String(t)}},browser_click:(a,{selector:e})=>{let t=document.querySelector(String(e));if(!t)return{error:`Element not found matching selector: ${e}`};t.focus();let r=["pointerdown","mousedown","pointerup","mouseup","click"];for(let i of r){let o=new MouseEvent(i,{bubbles:!0,cancelable:!0});t.dispatchEvent(o)}return{success:!0}},browser_type:(a,{selector:e,text:t})=>{let r=document.querySelector(String(e));if(!r)return{error:`Element not found matching selector: ${e}`};let i=r instanceof HTMLInputElement,o=r instanceof HTMLTextAreaElement;if(i||o){let n=i?HTMLInputElement.prototype:HTMLTextAreaElement.prototype,l=Object.getOwnPropertyDescriptor(n,"value")?.set;l?l.call(r,String(t)):r.value=String(t)}else if(r.isContentEditable)r.textContent=String(t);else return{error:"Element is not an input, textarea, or contenteditable."};return r.dispatchEvent(new Event("input",{bubbles:!0})),r.dispatchEvent(new Event("change",{bubbles:!0})),{success:!0}},browser_scroll:(a,{selector:e,x:t,y:r,scrollIntoView:i})=>{if(e){let o=document.querySelector(String(e));return o?i?(o.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"}),{success:!0}):(t!==void 0&&(o.scrollLeft=Number(t)),r!==void 0&&(o.scrollTop=Number(r)),{success:!0,scrollLeft:o.scrollLeft,scrollTop:o.scrollTop}):{error:`Element not found matching selector: ${e}`}}else{let o=t!==void 0?Number(t):window.scrollX,n=r!==void 0?Number(r):window.scrollY;return window.scrollTo({left:o,top:n,behavior:"smooth"}),{success:!0,scrollX:window.scrollX,scrollY:window.scrollY}}}};var u={get(a){if(typeof window>"u"||typeof localStorage>"u")return null;try{return localStorage.getItem(a)}catch{return null}},set(a,e){if(!(typeof window>"u"||typeof localStorage>"u"))try{localStorage.setItem(a,e)}catch{}},remove(a){if(!(typeof window>"u"||typeof localStorage>"u"))try{localStorage.removeItem(a)}catch{}}};var D=globalThis,Z=a=>a,P=D.trustedTypes,G=P?P.createPolicy("lit-html",{createHTML:a=>a}):void 0,ae="$lit$",v=`lit$${Math.random().toFixed(9).slice(2)}$`,oe="?"+v,ue=`<${oe}>`,_=D.document===void 0?{createTreeWalker:()=>({})}:document,k=()=>_.createComment(""),E=a=>a===null||typeof a!="object"&&typeof a!="function",j=Array.isArray,he=a=>j(a)||typeof a?.[Symbol.iterator]=="function",B=`[ 	
+\f\r]`,S=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Q=/-->/g,ee=/>/g,y=RegExp(`>|${B}(?:([^\\s"'>=/]+)(${B}*=${B}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),te=/'/g,re=/"/g,ne=/^(?:script|style|textarea|title)$/i,W=a=>(e,...t)=>({_$litType$:a,strings:e,values:t}),m=W(1),ye=W(2),xe=W(3),C=Symbol.for("lit-noChange"),h=Symbol.for("lit-nothing"),ie=new WeakMap,x=_.createTreeWalker(_,129);function se(a,e){if(!j(a)||!a.hasOwnProperty("raw"))throw Error("invalid template strings array");return G!==void 0?G.createHTML(e):e}var ge=(a,e)=>{let t=a.length-1,r=[],i,o=e===2?"<svg>":e===3?"<math>":"",n=S;for(let l=0;l<t;l++){let s=a[l],p,c,d=-1,f=0;for(;f<s.length&&(n.lastIndex=f,c=n.exec(s),c!==null);)f=n.lastIndex,n===S?c[1]==="!--"?n=Q:c[1]!==void 0?n=ee:c[2]!==void 0?(ne.test(c[2])&&(i=RegExp("</"+c[2],"g")),n=y):c[3]!==void 0&&(n=y):n===y?c[0]===">"?(n=i??S,d=-1):c[1]===void 0?d=-2:(d=n.lastIndex-c[2].length,p=c[1],n=c[3]===void 0?y:c[3]==='"'?re:te):n===re||n===te?n=y:n===Q||n===ee?n=S:(n=y,i=void 0);let b=n===y&&a[l+1].startsWith("/>")?" ":"";o+=n===S?s+ue:d>=0?(r.push(p),s.slice(0,d)+ae+s.slice(d)+v+b):s+v+(d===-2?l:b)}return[se(a,o+(a[t]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),r]},T=class a{constructor({strings:e,_$litType$:t},r){let i;this.parts=[];let o=0,n=0,l=e.length-1,s=this.parts,[p,c]=ge(e,t);if(this.el=a.createElement(p,r),x.currentNode=this.el.content,t===2||t===3){let d=this.el.content.firstChild;d.replaceWith(...d.childNodes)}for(;(i=x.nextNode())!==null&&s.length<l;){if(i.nodeType===1){if(i.hasAttributes())for(let d of i.getAttributeNames())if(d.endsWith(ae)){let f=c[n++],b=i.getAttribute(d).split(v),g=/([.?@])?(.*)/.exec(f);s.push({type:1,index:o,name:g[2],strings:b,ctor:g[1]==="."?I:g[1]==="?"?O:g[1]==="@"?U:$}),i.removeAttribute(d)}else d.startsWith(v)&&(s.push({type:6,index:o}),i.removeAttribute(d));if(ne.test(i.tagName)){let d=i.textContent.split(v),f=d.length-1;if(f>0){i.textContent=P?P.emptyScript:"";for(let b=0;b<f;b++)i.append(d[b],k()),x.nextNode(),s.push({type:2,index:++o});i.append(d[f],k())}}}else if(i.nodeType===8)if(i.data===oe)s.push({type:2,index:o});else{let d=-1;for(;(d=i.data.indexOf(v,d+1))!==-1;)s.push({type:7,index:o}),d+=v.length-1}o++}}static createElement(e,t){let r=_.createElement("template");return r.innerHTML=e,r}};function A(a,e,t=a,r){if(e===C)return e;let i=r!==void 0?t._$Co?.[r]:t._$Cl,o=E(e)?void 0:e._$litDirective$;return i?.constructor!==o&&(i?._$AO?.(!1),o===void 0?i=void 0:(i=new o(a),i._$AT(a,t,r)),r!==void 0?(t._$Co??=[])[r]=i:t._$Cl=i),i!==void 0&&(e=A(a,i._$AS(a,e.values),i,r)),e}var L=class{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:t},parts:r}=this._$AD,i=(e?.creationScope??_).importNode(t,!0);x.currentNode=i;let o=x.nextNode(),n=0,l=0,s=r[0];for(;s!==void 0;){if(n===s.index){let p;s.type===2?p=new M(o,o.nextSibling,this,e):s.type===1?p=new s.ctor(o,s.name,s.strings,this,e):s.type===6&&(p=new q(o,this,e)),this._$AV.push(p),s=r[++l]}n!==s?.index&&(o=x.nextNode(),n++)}return x.currentNode=_,i}p(e){let t=0;for(let r of this._$AV)r!==void 0&&(r.strings!==void 0?(r._$AI(e,r,t),t+=r.strings.length-2):r._$AI(e[t])),t++}},M=class a{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,r,i){this.type=2,this._$AH=h,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=r,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=A(this,e,t),E(e)?e===h||e==null||e===""?(this._$AH!==h&&this._$AR(),this._$AH=h):e!==this._$AH&&e!==C&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):he(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==h&&E(this._$AH)?this._$AA.nextSibling.data=e:this.T(_.createTextNode(e)),this._$AH=e}$(e){let{values:t,_$litType$:r}=e,i=typeof r=="number"?this._$AC(e):(r.el===void 0&&(r.el=T.createElement(se(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===i)this._$AH.p(t);else{let o=new L(i,this),n=o.u(this.options);o.p(t),this.T(n),this._$AH=o}}_$AC(e){let t=ie.get(e.strings);return t===void 0&&ie.set(e.strings,t=new T(e)),t}k(e){j(this._$AH)||(this._$AH=[],this._$AR());let t=this._$AH,r,i=0;for(let o of e)i===t.length?t.push(r=new a(this.O(k()),this.O(k()),this,this.options)):r=t[i],r._$AI(o),i++;i<t.length&&(this._$AR(r&&r._$AB.nextSibling,i),t.length=i)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){let r=Z(e).nextSibling;Z(e).remove(),e=r}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},$=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,r,i,o){this.type=1,this._$AH=h,this._$AN=void 0,this.element=e,this.name=t,this._$AM=i,this.options=o,r.length>2||r[0]!==""||r[1]!==""?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=h}_$AI(e,t=this,r,i){let o=this.strings,n=!1;if(o===void 0)e=A(this,e,t,0),n=!E(e)||e!==this._$AH&&e!==C,n&&(this._$AH=e);else{let l=e,s,p;for(e=o[0],s=0;s<o.length-1;s++)p=A(this,l[r+s],t,s),p===C&&(p=this._$AH[s]),n||=!E(p)||p!==this._$AH[s],p===h?e=h:e!==h&&(e+=(p??"")+o[s+1]),this._$AH[s]=p}n&&!i&&this.j(e)}j(e){e===h?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}},I=class extends ${constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===h?void 0:e}},O=class extends ${constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==h)}},U=class extends ${constructor(e,t,r,i,o){super(e,t,r,i,o),this.type=5}_$AI(e,t=this){if((e=A(this,e,t,0)??h)===C)return;let r=this._$AH,i=e===h&&r!==h||e.capture!==r.capture||e.once!==r.once||e.passive!==r.passive,o=e!==h&&(r===h||i);i&&this.element.removeEventListener(this.name,this,r),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}},q=class{constructor(e,t,r){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(e){A(this,e)}};var be=D.litHtmlPolyfillSupport;be?.(T,M),(D.litHtmlVersions??=[]).push("3.3.3");var z=(a,e,t)=>{let r=t?.renderBefore??e,i=r._$litPart$;if(i===void 0){let o=t?.renderBefore??null;r._$litPart$=i=new M(e.insertBefore(k(),o),o,void 0,t??{})}return i._$AI(a),i};function le(){if(typeof document>"u")return;let a="aperture-styles";if(document.getElementById(a))return;let e=document.createElement("style");e.id=a,e.textContent=`
+    :root {
+      --ap-bg: #0f0f10;
+      --ap-bg-glass: rgba(15, 15, 16, 0.92);
+      --ap-border: rgba(255, 255, 255, 0.10);
+      --ap-text: #f3f4f6;
+      --ap-text-secondary: #9ca3af;
+      --ap-text-muted: #6b7280;
+      --ap-accent: #6366f1;
+      --ap-accent-hover: #4f46e5;
+      --ap-btn-deny-bg: rgba(255, 255, 255, 0.06);
+      --ap-btn-deny-border: rgba(255, 255, 255, 0.12);
+      --ap-btn-deny-text: #d1d5db;
+      --ap-warning-bg: rgba(239, 68, 68, 0.10);
+      --ap-warning-border: rgba(239, 68, 68, 0.25);
+      --ap-warning-text: #fca5a5;
+      --ap-shadow: 0 24px 64px rgba(0, 0, 0, 0.50);
+    }
+
+    @media (prefers-color-scheme: light) {
+      :root {
+        --ap-bg: #ffffff;
+        --ap-bg-glass: rgba(255, 255, 255, 0.96);
+        --ap-border: rgba(0, 0, 0, 0.10);
+        --ap-text: #111827;
+        --ap-text-secondary: #4b5563;
+        --ap-text-muted: #9ca3af;
+        --ap-btn-deny-bg: rgba(0, 0, 0, 0.04);
+        --ap-btn-deny-border: rgba(0, 0, 0, 0.10);
+        --ap-btn-deny-text: #374151;
+        --ap-warning-bg: rgba(239, 68, 68, 0.06);
+        --ap-warning-border: rgba(239, 68, 68, 0.18);
+        --ap-warning-text: #b91c1c;
+        --ap-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
+      }
+    }
+
+    #aperture-badge,
+    #aperture-dialog-overlay,
+    #aperture-dialog,
+    #aperture-dialog .aperture-header,
+    #aperture-dialog .aperture-icon,
+    #aperture-dialog .aperture-title-container,
+    #aperture-dialog .aperture-title,
+    #aperture-dialog .aperture-subtitle,
+    #aperture-dialog .aperture-body,
+    #aperture-dialog .aperture-list,
+    #aperture-dialog .aperture-list li,
+    #aperture-dialog .aperture-options,
+    #aperture-dialog .aperture-checkbox-label,
+    #aperture-dialog .aperture-checkbox-label input,
+    #aperture-dialog .aperture-checkbox-desc,
+    #aperture-dialog .aperture-warning-box,
+    #aperture-dialog .aperture-footer,
+    #aperture-dialog .aperture-btn {
+      all: initial;
+      box-sizing: border-box;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    }
+
+    #aperture-badge {
+      position: fixed;
+      bottom: 12px;
+      right: 12px;
+      z-index: 2147483646;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      border-radius: 20px;
+      background: var(--ap-bg-glass);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid var(--ap-border);
+      color: var(--ap-text);
+      font-size: 11px;
+      font-weight: 500;
+      box-shadow: var(--ap-shadow);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    #aperture-badge:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
+    }
+
+    #aperture-badge .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      transition: background-color 0.3s ease;
+    }
+
+    #aperture-badge .dot.connected {
+      background-color: #10b981;
+      box-shadow: 0 0 8px #10b981;
+      animation: aperture-pulse 2s infinite;
+    }
+
+    #aperture-badge .dot.connecting {
+      background-color: #f59e0b;
+      box-shadow: 0 0 8px #f59e0b;
+    }
+
+    #aperture-badge .dot.disconnected {
+      background-color: #ef4444;
+      box-shadow: 0 0 8px #ef4444;
+    }
+
+    @keyframes aperture-pulse {
+      0% { transform: scale(1); opacity: 1; }
+      50% { transform: scale(1.2); opacity: 0.7; }
+      100% { transform: scale(1); opacity: 1; }
+    }
+
+    #aperture-dialog-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.45);
+      backdrop-filter: blur(6px);
+      -webkit-backdrop-filter: blur(6px);
+      z-index: 2147483647;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      color-scheme: light dark;
+    }
+
+    #aperture-dialog {
+      background: var(--ap-bg-glass);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid var(--ap-border);
+      border-radius: 16px;
+      width: 400px;
+      max-width: 92vw;
+      max-height: 90vh;
+      overflow-y: auto;
+      box-shadow: var(--ap-shadow);
+      padding: 24px;
+      color: var(--ap-text);
+      transform: scale(0.96);
+      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+      line-height: 1.5;
+    }
+
+    #aperture-dialog-overlay.active {
+      opacity: 1;
+    }
+
+    #aperture-dialog-overlay.active #aperture-dialog {
+      transform: scale(1);
+    }
+
+    #aperture-dialog .aperture-header {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      margin-bottom: 20px;
+    }
+
+    #aperture-dialog .aperture-icon {
+      width: 42px;
+      height: 42px;
+      border-radius: 12px;
+      background: linear-gradient(135deg, var(--ap-accent), var(--ap-accent-hover));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      line-height: 1;
+      flex-shrink: 0;
+    }
+
+    #aperture-dialog .aperture-title-container {
+      display: flex;
+      flex-direction: column;
+    }
+
+    #aperture-dialog .aperture-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--ap-text);
+      margin: 0;
+    }
+
+    #aperture-dialog .aperture-subtitle {
+      font-size: 12px;
+      color: var(--ap-text-secondary);
+      margin: 2px 0 0 0;
+    }
+
+    #aperture-dialog .aperture-body {
+      display: block;
+      font-size: 13px;
+      color: var(--ap-text-secondary);
+      margin-bottom: 20px;
+    }
+
+    #aperture-dialog .aperture-list {
+      display: block;
+      margin: 12px 0 0 24px;
+      padding: 0;
+      color: var(--ap-text-secondary);
+      list-style-type: disc;
+    }
+
+    #aperture-dialog .aperture-list li {
+      display: list-item;
+      color: inherit;
+      margin-bottom: 6px;
+      font-size: 13px;
+      line-height: 1.4;
+    }
+
+    #aperture-dialog .aperture-options {
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      margin-bottom: 20px;
+      border-top: 1px solid var(--ap-border);
+      border-bottom: 1px solid var(--ap-border);
+      padding: 16px 0;
+    }
+
+    #aperture-dialog .aperture-checkbox-label {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      font-size: 13px;
+      color: var(--ap-text);
+      cursor: pointer;
+      user-select: none;
+      line-height: 1.4;
+    }
+
+    #aperture-dialog .aperture-checkbox-label input[type="checkbox"] {
+      margin-top: 2px;
+      width: 16px;
+      height: 16px;
+      accent-color: var(--ap-accent);
+      cursor: pointer;
+      flex-shrink: 0;
+      appearance: auto;
+      -webkit-appearance: checkbox;
+    }
+
+    #aperture-dialog .aperture-checkbox-desc {
+      font-size: 11px;
+      color: var(--ap-text-muted);
+      margin-top: 2px;
+      display: block;
+      line-height: 1.35;
+    }
+
+    #aperture-dialog .aperture-warning-box {
+      background: var(--ap-warning-bg);
+      border: 1px solid var(--ap-warning-border);
+      border-radius: 8px;
+      padding: 10px 12px;
+      margin-top: 6px;
+      margin-left: 26px;
+      font-size: 12px;
+      color: var(--ap-warning-text);
+      display: none;
+      line-height: 1.4;
+    }
+
+    #aperture-dialog .aperture-warning-box.visible {
+      display: block;
+    }
+
+    #aperture-dialog .aperture-footer {
+      display: flex;
+      gap: 10px;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+    }
+
+    #aperture-dialog .aperture-btn {
+      display: inline-block;
+      padding: 8px 14px;
+      font-size: 13px;
+      font-weight: 500;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      border: 1px solid transparent;
+      white-space: nowrap;
+      line-height: 1;
+    }
+
+    #aperture-dialog .aperture-btn-deny {
+      background: var(--ap-btn-deny-bg);
+      color: var(--ap-btn-deny-text);
+      border-color: var(--ap-btn-deny-border);
+    }
+
+    #aperture-dialog .aperture-btn-deny:hover {
+      background: var(--ap-btn-deny-text);
+      color: var(--ap-bg);
+      border-color: var(--ap-btn-deny-text);
+    }
+
+    #aperture-dialog .aperture-btn-allow {
+      background: linear-gradient(135deg, var(--ap-accent), var(--ap-accent-hover));
+      color: #fff;
+      border-color: transparent;
+    }
+
+    #aperture-dialog .aperture-btn-allow:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
+    }
+  `,document.head.appendChild(e)}function de(a){let e=document.createElement("div");e.id="aperture-dialog-overlay",document.body.appendChild(e);let t=()=>{e.classList.remove("active"),setTimeout(()=>{e.remove()},300),document.removeEventListener("keydown",r)},r=n=>{n.key==="Escape"&&(t(),a?.())};document.addEventListener("keydown",r);let i=n=>{n.target===e&&(t(),a?.())};return e.addEventListener("click",i),{overlay:e,cleanup:t,activate:()=>{setTimeout(()=>{e.classList.add("active")},10)}}}async function F(){try{return await navigator.mediaDevices.getDisplayMedia({video:{displaySurface:"browser"},audio:!1})}catch(a){return console.warn("[Aperture] Failed to acquire screen share stream for screenshots:",a),null}}function pe(a,e){return new Promise(t=>{if(typeof document>"u"){t({approved:!1,capabilities:[]});return}let{overlay:r,cleanup:i,activate:o}=de(()=>{t({approved:!1,capabilities:[],dismissed:!0})}),n=!0,l=!0,s=!0,p=()=>{i(),t({approved:!1,capabilities:[],dismissed:!0})},c=()=>{i(),t({approved:!1,capabilities:[]})},d=async()=>{let b=s?864e5:36e5,g=["console","dom","network","storage"];if(l&&g.push("evaluate"),n){let H=await F();H&&(e({stream:H}),g.push("screenshot"))}i(),t({approved:!0,capabilities:g,ttlMs:b})};(()=>{let b=m`
+				<div id="aperture-dialog">
+					<div class="aperture-header">
+						<div class="aperture-icon">🔌</div>
+						<div class="aperture-title-container">
+							<h3 class="aperture-title">Agent Bridge</h3>
+							<p class="aperture-subtitle">${a} wants to access this tab</p>
+						</div>
+					</div>
+
+					<div class="aperture-body">
+						By allowing, the agent will be able to:
+						<ul class="aperture-list">
+							<li>Read the current page URL, title, and visible text</li>
+							<li>Query the DOM and read element attributes / contents</li>
+							<li>View console logs (errors, warnings, info, debug)</li>
+							<li>Monitor network requests made by this page</li>
+							<li>Read localStorage and cookies for this origin</li>
+							${n?m`<li id="aperture-perm-screenshot">Capture screenshots of the page</li>`:""}
+							${l?m`<li id="aperture-perm-eval">Execute arbitrary JavaScript in this page</li>`:""}
+						</ul>
+					</div>
+
+					<div class="aperture-options">
+						<label class="aperture-checkbox-label">
+							<input
+								type="checkbox"
+								id="aperture-allow-screenshot"
+								.checked=${n}
+								@change=${g=>{n=g.target.checked}}
+							/>
+							<div>
+								<strong>Allow screenshot capture</strong>
+								<div class="aperture-checkbox-desc">Requests browser tab/screen sharing for live views</div>
+							</div>
+						</label>
+
+						<label class="aperture-checkbox-label">
+							<input
+								type="checkbox"
+								id="aperture-allow-eval"
+								.checked=${l}
+								@change=${g=>{l=g.target.checked}}
+							/>
+							<div>
+								<strong>Allow JavaScript evaluation</strong>
+								<div class="aperture-checkbox-desc">Enables arbitrary JS execution in this page (dangerous)</div>
+							</div>
+						</label>
+
+						<label class="aperture-checkbox-label">
+							<input
+								type="checkbox"
+								id="aperture-remember-24h"
+								.checked=${s}
+								@change=${g=>{s=g.target.checked}}
+							/>
+							<div>
+								<strong>Trust this device for 24 hours</strong>
+								<div class="aperture-checkbox-desc">Otherwise approval resets after 1 hour</div>
+							</div>
+						</label>
+
+						<div id="aperture-eval-warning" class="aperture-warning-box ${l?"visible":""}">
+							⚠️ Warning: Allowing evaluation lets the agent run any command or access any sensitive data on this origin.
+						</div>
+					</div>
+
+					<div class="aperture-footer">
+						<button id="aperture-btn-dismiss" class="aperture-btn aperture-btn-deny" @click=${p}>Dismiss</button>
+						<button id="aperture-btn-deny" class="aperture-btn aperture-btn-deny" @click=${c}>Deny</button>
+						<button id="aperture-btn-allow" class="aperture-btn aperture-btn-allow" @click=${d}>Allow for this session</button>
+					</div>
+				</div>
+			`;z(b,r)})(),o()})}function ce(a){if(typeof document>"u"||document.getElementById("aperture-dialog-overlay"))return;let{overlay:e,cleanup:t}=de(),i=navigator.platform.toLowerCase().includes("mac")?"Cmd+Shift+A":"Ctrl+Shift+A",o=()=>t(),n=()=>{a.revokeApproval(),a.onApprovalStateChange({approved:!1,capabilities:[],stream:null}),t()},l=()=>{a.isBadgeHidden()?a.showBadge():a.hideBadgeFor24h(),t()};(()=>{let p=a.wsReadyState===WebSocket.OPEN?"Connected":"Disconnected",c=a.denied?"Denied":a.approved?"Approved":"Pending Approval",d=a.capabilities.includes("screenshot"),f=a.capabilities.includes("evaluate"),g=a.isBadgeHidden()?"Show badge":"Hide badge for 24 hours",H=m`
+			<div id="aperture-dialog">
+				<div class="aperture-header">
+					<div class="aperture-icon">⚙️</div>
+					<div class="aperture-title-container">
+						<h3 class="aperture-title">Agent Bridge</h3>
+						<p class="aperture-subtitle">${a.approved?"Session active":"Waiting for approval"}</p>
+					</div>
+				</div>
+
+				<div class="aperture-body">
+					<div style="margin-bottom: 12px; display: flex; justify-content: space-between; font-size: 13px;">
+						<span>Connection:</span>
+						<strong style="color: ${p==="Connected"?"#10b981":"#ef4444"};">${p}</strong>
+					</div>
+					<div style="margin-bottom: 12px; display: flex; justify-content: space-between; font-size: 13px;">
+						<span>Status:</span>
+						<strong style="color: ${c==="Approved"?"#10b981":c==="Denied"?"#ef4444":"#f59e0b"};">${c}</strong>
+					</div>
+
+					${a.approved?m`
+						<div style="margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ap-border);">
+							<div style="font-size: 12px; color: var(--ap-text-muted); margin-bottom: 8px;">Enabled capabilities:</div>
+							<ul style="font-size: 13px; margin: 0; padding-left: 20px; color: var(--ap-text);">
+								<li>Console logs</li>
+								<li>DOM queries</li>
+								<li>Network requests</li>
+								<li>Storage access</li>
+								${d?m`<li>Screenshots</li>`:""}
+								${f?m`<li>JavaScript evaluation</li>`:""}
+							</ul>
+						</div>
+					`:""}
+				</div>
+
+				<div class="aperture-footer">
+					${a.approved?m`
+									<button id="aperture-status-btn-revoke" class="aperture-btn aperture-btn-deny" @click=${n}>Revoke</button>
+									<button id="aperture-status-btn-close" class="aperture-btn aperture-btn-allow" @click=${o}>Close</button>
+							  `:m`
+									<div style="width: 100%; text-align: center; color: var(--ap-text-muted); font-size: 13px;">
+										Waiting for agent connection...
+									</div>
+							  `}
+				</div>
+
+				<div style="margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ap-border); text-align: center;">
+					<button id="aperture-status-btn-hide" class="aperture-btn aperture-btn-deny" style="width: 100%;" @click=${l}>${g}</button>
+					<div style="margin-top: 8px; font-size: 11px; color: var(--ap-text-muted);">
+						Re-open with <kbd style="font-family: monospace; background: var(--ap-btn-deny-bg); border: 1px solid var(--ap-btn-deny-border); border-radius: 4px; padding: 1px 4px; font-size: 10px;">${i}</kbd>
+					</div>
+				</div>
+			</div>
+		`;z(H,e)})(),setTimeout(()=>{e.classList.add("active")},10)}var R=class{ws=null;config;approved=!1;denied=!1;capabilities=[];screenCaptureStream=null;badgeElement=null;focusListenersAdded=!1;constructor(e){this.config=e,window.__apertureInstance__=this,le(),Y(),K(),this.loadCachedApproval(),this.registerKeyboardShortcut(),typeof window<"u"&&window.addEventListener("beforeunload",()=>{this.stopScreenCapture()})}registerKeyboardShortcut(){typeof document>"u"||document.addEventListener("keydown",e=>{(navigator.platform.toLowerCase().includes("mac")?e.metaKey:e.ctrlKey)&&e.shiftKey&&(e.key==="a"||e.key==="A")&&(e.preventDefault(),this.openStatusDialog())})}isBadgeHidden(){let e=u.get("aperture_badge_hidden_until");return e?Date.now()<Number(e):!1}hideBadgeFor24h(){let e=String(Date.now()+864e5);u.set("aperture_badge_hidden_until",e),this.badgeElement&&(this.badgeElement.remove(),this.badgeElement=null)}showBadge(){if(u.remove("aperture_badge_hidden_until"),this.ws){let e=this.ws.readyState===WebSocket.OPEN?"connected":"connecting";this.updateBadge(e)}}loadCachedApproval(){let e=u.get("aperture_approved"),t=u.get("aperture_approved_at"),r=u.get("aperture_ttl_ms"),i=3600*1e3,o=r?Number(r):i,n=t?Date.now()-Number(t)>o:!0;e==="true"&&!n?(this.approved=!0,this.denied=!1,this.capabilities=JSON.parse(u.get("aperture_capabilities")||"[]")):e==="false"&&(this.denied=!0,this.approved=!1),n&&(u.remove("aperture_approved"),u.remove("aperture_approved_at"),u.remove("aperture_capabilities"),u.remove("aperture_ttl_ms"))}saveApproval(e,t,r){e?(u.set("aperture_approved","true"),u.set("aperture_approved_at",String(Date.now())),u.set("aperture_capabilities",JSON.stringify(t)),r&&u.set("aperture_ttl_ms",String(r))):(u.set("aperture_approved","false"),u.remove("aperture_approved_at"),u.remove("aperture_capabilities"),u.remove("aperture_ttl_ms"))}revokeApproval(){u.remove("aperture_approved"),u.remove("aperture_approved_at"),u.remove("aperture_capabilities"),u.remove("aperture_ttl_ms"),this.approved=!1,this.denied=!1,this.capabilities=[]}connect(){let e=new URL("/mcp",this.config.serverUrl);e.searchParams.set("type","browser"),this.updateBadge("connecting"),this.ws=new WebSocket(e.toString()),this.ws.onopen=()=>{let t=this.config.customTools?Object.entries(this.config.customTools).map(([r,i])=>({name:r,description:i.description,inputSchema:i.inputSchema})):[];this.send({type:"register",url:window.location.href,title:document.title,customTools:t}),console.log("[Aperture] Connected to server"),this.updateBadge("connected"),this.approved&&this.send({type:"approval",approved:this.approved,capabilities:this.capabilities}),this.reportFocusState(),typeof window<"u"&&!this.focusListenersAdded&&(this.focusListenersAdded=!0,window.addEventListener("focus",()=>this.reportFocusState()),window.addEventListener("blur",()=>this.reportFocusState()))},this.ws.onmessage=async t=>{try{let r=JSON.parse(t.data);r.type==="tool_call"?await this.handleToolCall(r):r.type==="agent_connected"&&await this.getOrWaitApproval()}catch{}},this.ws.onclose=()=>{console.log("[Aperture] Disconnected. Retrying in 3s..."),this.updateBadge("disconnected"),this.stopScreenCapture(),setTimeout(()=>this.connect(),3e3)}}disconnect(){this.ws&&(this.ws.onclose=null,this.ws.close(),this.ws=null),this.stopScreenCapture(),this.badgeElement&&(this.badgeElement.remove(),this.badgeElement=null)}reportFocusState(){if(typeof document>"u")return;let e=document.hasFocus();this.send({type:"focus",focused:e})}send(e){this.ws?.readyState===WebSocket.OPEN&&this.ws.send(JSON.stringify(e))}updateBadge(e){if(typeof document>"u")return;if(this.isBadgeHidden()){this.badgeElement&&(this.badgeElement.remove(),this.badgeElement=null);return}if(!this.badgeElement){this.badgeElement=document.createElement("div"),this.badgeElement.id="aperture-badge",this.badgeElement.title="Manage Aperture session (Ctrl+Shift+A)";let r=document.createElement("span");r.className="dot",this.badgeElement.appendChild(r),this.badgeElement.addEventListener("click",()=>{this.openStatusDialog()}),document.body.appendChild(this.badgeElement)}let t=this.badgeElement.querySelector(".dot");t&&(t.className=`dot ${e}`)}async handleToolCall(e){if(this.denied){this.send({type:"result",requestId:e.requestId,result:{error:"User denied browser access"}});return}if(!this.approved&&(await this.getOrWaitApproval(),!this.approved)){this.send({type:"result",requestId:e.requestId,result:{error:this.denied?"User denied browser access":"User dismissed the approval request"}});return}let t=X[e.tool],r=this.config.customTools?.[e.tool]?.handler,i=t||r;if(!i){this.send({type:"result",requestId:e.requestId,result:{error:`Unknown tool: ${e.tool}`}});return}try{let o=await i(this,e.args);this.send({type:"result",requestId:e.requestId,result:o})}catch(o){this.send({type:"result",requestId:e.requestId,result:{error:o instanceof Error?o.message:String(o)}})}}approvalPendingPromise=null;getOrWaitApproval(){return this.approved||this.denied?Promise.resolve():this.approvalPendingPromise?this.approvalPendingPromise:(this.approvalPendingPromise=(async()=>{let e=await this.getApproval("MCP Agent");e.dismissed||(this.approved=e.approved,this.denied=!e.approved,this.capabilities=e.capabilities,this.saveApproval(this.approved,this.capabilities,e.ttlMs),this.send({type:"approval",approved:this.approved,capabilities:this.capabilities}))})(),this.approvalPendingPromise.finally(()=>{this.approvalPendingPromise=null}),this.approvalPendingPromise)}async getApproval(e){return this.config.onApprovalRequest?{...await this.config.onApprovalRequest(e),dismissed:!1}:pe(e,t=>{t.stream!==void 0&&(this.screenCaptureStream=t.stream)})}async captureScreenshotFromStream(){if(!this.screenCaptureStream?.active){if(!this.approved||!this.capabilities.includes("screenshot"))throw new Error("Screenshot access was not granted. Please approve the connection with screenshot capability enabled.");let n=await this.requestScreenCapture();if(!n)throw new Error("Failed to acquire screen capture. Please try again or re-approve the connection.");this.screenCaptureStream=n}if(!this.screenCaptureStream.getVideoTracks()[0])throw new Error("No video tracks found in screen capture stream.");let t=document.createElement("video");t.srcObject=this.screenCaptureStream,t.autoplay=!0,t.playsInline=!0,t.muted=!0,await new Promise(n=>{t.onloadedmetadata=()=>n(null)}),await t.play().catch(()=>null),await new Promise(n=>{typeof t.requestVideoFrameCallback=="function"?(t.requestVideoFrameCallback(()=>n()),setTimeout(()=>n(),1e3)):setTimeout(()=>n(),300)});let r=document.createElement("canvas");r.width=t.videoWidth||800,r.height=t.videoHeight||600;let i=r.getContext("2d");if(!i)throw new Error("Could not get 2D context from canvas");i.drawImage(t,0,0);let o=r.toDataURL("image/png");return t.srcObject=null,t.load(),o}stopScreenCapture(){if(this.screenCaptureStream){for(let e of this.screenCaptureStream.getTracks())e.stop();this.screenCaptureStream=null}}setMediaStream(e){this.screenCaptureStream=e}async requestScreenCapture(){return F()}openStatusDialog(){ce({wsReadyState:this.ws?.readyState??WebSocket.CLOSED,approved:this.approved,denied:this.denied,capabilities:this.capabilities,isBadgeHidden:()=>this.isBadgeHidden(),showBadge:()=>this.showBadge(),hideBadgeFor24h:()=>this.hideBadgeFor24h(),revokeApproval:()=>this.revokeApproval(),onApprovalStateChange:e=>{this.approved=e.approved,e.approved?this.denied=!1:this.denied=!0,this.capabilities=e.capabilities,e.stream!==void 0&&(e.stream===null?this.stopScreenCapture():this.screenCaptureStream=e.stream),this.saveApproval(this.approved,this.capabilities),this.send({type:"approval",approved:this.approved,capabilities:this.capabilities})}})}};function Te(a){if(typeof window>"u"||!(location.hostname==="localhost"||location.hostname==="127.0.0.1"||location.hostname.endsWith(".localhost")||!!window.__vite_inject__))return;let t=a?.port||window.__APERTURE_PORT__||3456,r=a?.serverUrl||`ws://localhost:${t}`,i=window.__apertureInstance__;i&&typeof i.disconnect=="function"&&i.disconnect();let o=new R({serverUrl:r,customTools:a?.customTools});return o.connect(),window.__apertureInstance__=o,o}typeof window<"u"&&(location.hostname==="localhost"||location.hostname==="127.0.0.1"||location.hostname.endsWith(".localhost")||window.__vite_inject__)&&setTimeout(()=>{if(!window.__apertureInstance__){let e=window.__APERTURE_PORT__||3456,t=window.__APERTURE_URL__||`ws://localhost:${e}`;console.log("[Aperture] No manual initialization detected. Auto-connecting...");let r=new R({serverUrl:t});r.connect(),window.__apertureInstance__=r}},500);export{R as ApertureClient,Te as initAperture};
+/*! Bundled license information:
+
+lit-html/node/lit-html.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/package.json

@@ -0,0 +1,123 @@
+{
+	"name": "@ericmhalvorsen/aperture",
+	"version": "0.2.1",
+	"description": "Browser-to-agent bridge for AI agents. Auto-connects your dev browser to any MCP-capable agent.",
+	"license": "MIT",
+	"author": "Eric M. Halvorsen",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ericmhalvorsen/aperture.git"
+  },
+	"homepage": "https://github.com/ericmhalvorsen/aperture#readme",
+	"bugs": {
+		"url": "https://github.com/ericmhalvorsen/aperture/issues"
+	},
+	"keywords": [
+		"mcp",
+		"browser",
+		"ai",
+		"agent",
+		"devtools",
+		"debugging",
+		"claude",
+		"cursor",
+		"opencode"
+	],
+	"engines": {
+		"node": ">=18"
+	},
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./react": {
+			"types": "./dist/react.d.ts",
+			"default": "./dist/react.js"
+		},
+		"./client": {
+			"types": "./dist/client.d.ts",
+			"default": "./dist/client.js"
+		},
+		"./server": {
+			"types": "./dist/server.d.ts",
+			"default": "./dist/server.js"
+		},
+		"./register": {
+			"types": "./dist/register.d.ts",
+			"default": "./dist/register.js"
+		},
+		"./next": {
+			"types": "./dist/frameworks/next.d.ts",
+			"default": "./dist/frameworks/next.js"
+		},
+		"./vite": {
+			"types": "./dist/frameworks/vite.d.ts",
+			"default": "./dist/frameworks/vite.js"
+		}
+	},
+	"bin": {
+		"aperture": "./dist/bin.js"
+	},
+	"scripts": {
+		"build": "tsc -p tsconfig.build.json && pnpm exec tsup --config tsup.browser.ts",
+		"dev": "tsc -p tsconfig.build.json --watch",
+		"typecheck": "tsc --noEmit",
+		"lint": "biome lint .",
+		"format": "biome format --write .",
+		"check": "biome check .",
+		"knip": "knip",
+		"audit:deps": "pnpm audit",
+		"test": "vitest run",
+		"test:e2e": "playwright test",
+		"test:watch": "vitest",
+		"test:coverage": "vitest run --coverage",
+		"changeset": "changeset",
+		"version-packages": "changeset version",
+		"release": "pnpm build && changeset publish",
+		"publint": "publint",
+		"example": "cd samples/next-aperture && pnpm run dev"
+	},
+	"dependencies": {
+		"@modelcontextprotocol/sdk": "^1.29.0",
+		"lit-html": "^3.3.3",
+		"picocolors": "^1.1.1",
+		"ws": "^8"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.4.16",
+		"@changesets/cli": "^2.31.0",
+		"@playwright/test": "^1.60.0",
+		"@types/node": "^20",
+		"@types/react": "^19",
+		"@types/ws": "^8",
+		"@vitest/coverage-v8": "^4.1.7",
+		"jsdom": "^29.1.1",
+		"knip": "^6.14.2",
+		"publint": "^0.3.21",
+		"tsup": "^8.5.1",
+		"typescript": "^5",
+		"vitest": "^4.1.7"
+	},
+	"peerDependencies": {
+		"react": ">=18",
+		"react-dom": ">=18"
+	},
+	"peerDependenciesMeta": {
+		"react": { "optional": true },
+		"react-dom": { "optional": true }
+	},
+	"files": [
+		"dist",
+		"dist-browser",
+		"README.md"
+	],
+	"pnpm": {
+		"overrides": {
+			"postcss": "^8.5.10"
+		}
+	}
+}