@popmelt.com/core 0.6.6 → 0.6.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bridge-entry.mjs +130 -42
- package/dist/cli.mjs +130 -42
- package/dist/index.mjs +22 -22
- package/dist/plugin-astro.mjs +1 -1
- package/dist/plugin-vite.mjs +1 -1
- package/dist/server-E44GIKD2.mjs +221 -0
- package/dist/server.mjs +128 -40
- package/package.json +1 -1
- package/dist/server-HPHAQXHA.mjs +0 -133
package/dist/index.mjs
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var Tc=Object.defineProperty,Mc=Object.defineProperties;var Ic=Object.getOwnPropertyDescriptors;var Ar=Object.getOwnPropertySymbols;var Ks=Object.prototype.hasOwnProperty,qs=Object.prototype.propertyIsEnumerable;var Xs=(e,t,n)=>t in e?Tc(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))Ks.call(t,n)&&Xs(e,n,t[n]);if(Ar)for(var n of Ar(t))qs.call(t,n)&&Xs(e,n,t[n]);return e},y=(e,t)=>Mc(e,Ic(t));var co=e=>typeof e=="symbol"?e:e+"",Hn=(e,t)=>{var n={};for(var r in e)Ks.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&Ar)for(var r of Ar(e))t.indexOf(r)<0&&qs.call(e,r)&&(n[r]=e[r]);return n};import{createContext as Eg,useCallback as nn,useContext as Tg,useEffect as Yt,useMemo as cr,useRef as Vt,useState as pn}from"react";import{useCallback as ll,useEffect as Lc,useSyncExternalStore as Rc}from"react";var jn="http://localhost:1111";function Wn(e,t={},n=15e3){let r=new AbortController;t.signal&&t.signal.addEventListener("abort",()=>r.abort());let o=setTimeout(()=>r.abort(),n);return fetch(e,y(f({},t),{signal:r.signal})).finally(()=>clearTimeout(o))}async function Qs(e=jn){try{let t=await Wn(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch(t){return null}}async function Ho(e=jn){try{let t=new AbortController,n=setTimeout(()=>t.abort(),2e3),r=await fetch(`${e}/status`,{signal:t.signal});return clearTimeout(n),r.ok?await r.json():null}catch(t){return null}}async function Zs(e){try{let t=new AbortController,n=setTimeout(()=>t.abort(),500),r=await fetch(`http://localhost:${e}/status`,{signal:t.signal});return clearTimeout(n),r.ok?await r.json():null}catch(t){return null}}async function el(e){if(e&&e!=="http://localhost:1111")try{let d=new URL(e);return{url:e,port:parseInt(d.port,10)||1111}}catch(d){return null}let o=typeof window!="undefined"?window.location.origin:null,i=await Zs(1111);if(i&&i.devOrigin&&o&&i.devOrigin===o)return{url:"http://localhost:1111",port:1111};let s=Array.from({length:8},(d,c)=>{let u=1112+c;return Zs(u).then(p=>p?{status:p,port:u}:null)}),l=(await Promise.all(s)).filter(d=>d!==null),a=[];i&&a.push({port:1111,devOrigin:i.devOrigin});for(let d of l)a.push({port:d.port,devOrigin:d.status.devOrigin});if(o){let d=a.find(c=>c.devOrigin===o);if(d)return{url:`http://localhost:${d.port}`,port:d.port}}return a.length===1?{url:`http://localhost:${a[0].port}`,port:a[0].port}:i?{url:"http://localhost:1111",port:1111}:a.length>0?{url:`http://localhost:${a[0].port}`,port:a[0].port}:null}async function Pr(e=jn,t,n=-1){try{let r=await Wn(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return r.ok?await r.json():null}catch(r){return null}}async function tl(e,t,n=jn,r,o,i,s,l){let a=new FormData;if(e instanceof Map){let c=!0;for(let[u,p]of e){let g=encodeURIComponent(u);a.append(`screenshot-${g}`,p,`screenshot-${g}.png`),c&&(a.append("screenshot",p,"screenshot.png"),c=!1)}c&&a.append("screenshot",new Blob([],{type:"image/png"}),"screenshot.png")}else a.append("screenshot",e,"screenshot.png");if(a.append("feedback",t),r&&a.append("color",r),o&&a.append("provider",o),i&&a.append("model",i),l&&a.append("sourceId",l),s)for(let[c,u]of s)for(let p=0;p<u.length;p++)a.append(`image-${c}-${p}`,u[p],`image-${c}-${p}.png`);let d=await Wn(`${n}/send`,{method:"POST",body:a},3e4);if(!d.ok){let c=await d.text();throw new Error(`Bridge returned ${d.status}: ${c}`)}return d.json()}async function nl(e=jn,t){try{let n=await Wn(`${e}/mcp/install`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t?{serverUrl:t}:{})},15e3);return n.ok?await n.json():null}catch(n){return null}}async function ol(e,t=jn){let n=await Wn(`${t}/model/component`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})},1e4);if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function rl(e,t=jn){let n=await Wn(`${t}/model/component`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})},1e4);if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function xi(e,t,n=jn){let r=await Wn(`${n}/model/token`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e,value:t})},1e4);if(!r.ok){let o=await r.text();throw new Error(`Bridge returned ${r.status}: ${o}`)}return r.json()}async function il(e,t=jn){let n=await Wn(`${t}/model/token`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e})},1e4);if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function Fo(e=jn){var t;try{let n=await Wn(`${e}/model`,{},5e3);return n.ok&&(t=(await n.json()).model)!=null?t:null}catch(n){return null}}async function sl(e,t,n=jn,r,o,i,s,l){let a;if(s&&s.length>0){let d=new FormData,c=new Blob([new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,1,0,0,0,1,8,6,0,0,0,31,21,196,137,0,0,0,10,73,68,65,84,120,156,98,0,0,0,2,0,1,229,39,222,252,0,0,0,0,73,69,78,68,174,66,96,130])],{type:"image/png"});d.append("screenshot",c,"screenshot.png"),d.append("feedback",JSON.stringify({threadId:e,reply:t,color:r,provider:o,model:i,sourceId:l}));for(let u=0;u<s.length;u++)d.append(`image-reply-${u}`,s[u],`reply-image-${u}.png`);a=await Wn(`${n}/reply`,{method:"POST",body:d},3e4)}else a=await Wn(`${n}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:e,reply:t,color:r,provider:o,model:i,sourceId:l})},3e4);if(!a.ok){let d=await a.text();throw new Error(`Bridge returned ${a.status}: ${d}`)}return a.json()}var Dr={};var To=typeof Dr!="undefined"?Dr.hot:void 0,cl,dl,ul,_r=(ul=(dl=(cl=To==null?void 0:To.data)==null?void 0:cl.sourceId)!=null?dl:typeof localStorage!="undefined"&&localStorage.getItem("popmelt-source-id"))!=null?ul:typeof crypto!="undefined"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2);To!=null&&To.data&&(To.data.sourceId=_r);try{typeof localStorage!="undefined"&&localStorage.setItem("popmelt-source-id",_r)}catch(e){}function wi(){return _r}var Mo=typeof Dr!="undefined"?Dr.hot:void 0,an=Mo==null?void 0:Mo.data,Ac={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},pl,Wo=(pl=an==null?void 0:an.store)!=null?pl:f({},Ac),fl,Or=(fl=an==null?void 0:an.listeners)!=null?fl:new Set,gl,ko=(gl=an==null?void 0:an.activeEs)!=null?gl:null,ml,Si=(ml=an==null?void 0:an.activeBridgeUrl)!=null?ml:null,wo=null,hl,Br=(hl=an==null?void 0:an.connectionGeneration)!=null?hl:0;Mo!=null&&Mo.data&&Object.defineProperties(Mo.data,{store:{get:()=>Wo,configurable:!0},listeners:{get:()=>Or,configurable:!0},activeEs:{get:()=>ko,configurable:!0},activeBridgeUrl:{get:()=>Si,configurable:!0},connectionGeneration:{get:()=>Br,configurable:!0},discoveredBridgeUrl:{get:()=>Eo,configurable:!0}});var Nr=new Set,zo=new Map,uo={};function Co(e,t){var r;if(!e)return!1;if(Nr.has(e)){let o=zo.get(e);return o||(o=[],zo.set(e,o)),o.push({type:(r=t.type)!=null?r:"",data:t}),!0}let n=uo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function Pc(e,t,n){let r=()=>n!==Br;for(let o of t){if(r())return;Nr.add(o),zo.set(o,[])}await Promise.all(t.map(async o=>{var i;try{let s=await Pr(e,o);if(r())return;let l=(i=zo.get(o))!=null?i:[];if(s){if(Kt(a=>{let d=y(f({},a.jobResponses),{[o]:s.accumulated.response}),c=y(f({},a.jobThinking),{[o]:s.accumulated.thinking}),u=[...a.events];for(let p of s.events)p.type==="done"||p.type==="error"||u.push({type:p.type,data:p,timestamp:Date.now()});return y(f({},a),{jobResponses:d,jobThinking:c,currentResponse:o===a.activeJobId?s.accumulated.response:a.currentResponse,currentThinking:o===a.activeJobId?s.accumulated.thinking:a.currentThinking,events:u})}),uo[o]=s.currentSeq,!s.jobActive){let a=s.events.find(d=>d.type==="done"||d.type==="error");a&&vi(a.type,a,o)}for(let a of l)typeof a.data.seq=="number"&&a.data.seq<=s.currentSeq||vi(a.type,a.data,o)}else for(let a of l)vi(a.type,a.data,o)}finally{Nr.delete(o),zo.delete(o)}}))}function vi(e,t,n){var r;if(e==="delta"){let o=t.text||"";Kt(i=>y(f({},i),{jobResponses:y(f({},i.jobResponses),{[n]:(i.jobResponses[n]||"")+o}),currentResponse:n===i.activeJobId?i.currentResponse+o:i.currentResponse,events:[...i.events,{type:"delta",data:t,timestamp:Date.now()}]}))}else if(e==="thinking"){let o=t.text||"";Kt(i=>y(f({},i),{jobThinking:y(f({},i.jobThinking),{[n]:(i.jobThinking[n]||"")+o}),currentThinking:n===i.activeJobId?i.currentThinking+o:i.currentThinking,events:[...i.events,{type:"thinking",data:t,timestamp:Date.now()}]}))}else if(e==="done")delete uo[n],Kt(o=>{var c;let i=o.activeJobIds.filter(u=>u!==n),s=f({},o.jobResponses),l=f({},o.jobThinking),a=s[n];delete s[n],delete l[n];let d=n===o.activeJobId?i.length>0?i[i.length-1]:null:o.activeJobId;return y(f(y(f({},o),{activeJobIds:i,activeJobId:d,jobResponses:s,jobThinking:l,lastCompletedJobId:n,lastResponseText:a||o.currentResponse||t.responseText||null,lastThreadId:(c=t.threadId)!=null?c:null}),n===o.activeJobId?{currentResponse:d&&s[d]||"",currentThinking:d&&l[d]||""}:{}),{events:[...o.events,{type:"done",data:t,timestamp:Date.now()}]})});else if(e==="error"){delete uo[n];let o=(r=t.message)!=null?r:"";Kt(i=>{let s=i.activeJobIds.filter(a=>a!==n),l=s.length>0?i.status:"error";return y(f({},i),{status:l,activeJobIds:s,lastCompletedJobId:n,lastErrorByJob:o?y(f({},i.lastErrorByJob),{[n]:o}):i.lastErrorByJob,events:[...i.events,{type:"error",data:t,timestamp:Date.now()}]})})}else Kt(o=>y(f({},o),{events:[...o.events,{type:e,data:t,timestamp:Date.now()}]}))}var yl,Eo=(yl=an==null?void 0:an.discoveredBridgeUrl)!=null?yl:null,$o=null;async function Oc(e){return e&&e!=="http://localhost:1111"?(Eo=e,e):Eo||$o||($o=el(e).then(n=>{var r;return Eo=(r=n==null?void 0:n.url)!=null?r:null,$o=null,Eo}).catch(()=>($o=null,null)),$o)}function bl(){return Eo}function al(){return Wo}function Bc(e){return Or.add(e),()=>{Or.delete(e)}}function Kt(e){Wo=e(Wo);for(let t of Or)t()}function xl(e){if(ko&&ko.readyState!==EventSource.CLOSED&&Si===e)return;ko&&(ko.close(),ko=null),wo&&(clearTimeout(wo),wo=null),Si=e;let t=++Br,n=new EventSource(`${e}/events?sourceId=${_r}`);ko=n;let r=()=>t!==Br;n.addEventListener("connected",()=>{r()||Ho(e).then(o=>{var p,g;if(r())return;let i=(p=o==null?void 0:o.activeJobs)!=null?p:o!=null&&o.activeJob?[o.activeJob]:[],s=new Set(i.map(w=>w.id)),l=(g=o==null?void 0:o.recentJobs)!=null?g:[],a=new Map(l.map(w=>[w.id,w])),d=i.length>0;Kt(w=>{let C=f({},w.lastErrorByJob),R=w.activeJobIds.filter(M=>!s.has(M));for(let M of R){let T=a.get(M);(T==null?void 0:T.status)==="error"&&T.error&&(C[M]=T.error)}let P=w.activeJobIds.filter(M=>s.has(M));for(let M of s)P.includes(M)||P.push(M);let G={};for(let M of i)M.threadId&&(G[M.id]=M.threadId);return y(f({},w),{isConnected:!0,status:d?"streaming":R.length>0||w.status==="disconnected"?"idle":w.status,activeJobId:d?i[i.length-1].id:P.length>0?P[P.length-1]:null,activeJobIds:P,activeJobThreads:G,lastErrorByJob:C,lastCompletedJobId:R.length>0?R[R.length-1]:w.lastCompletedJobId})});let c=Wo.activeJobIds.filter(w=>!s.has(w)),u=[...Array.from(s),...c];u.length>0&&Pc(e,u,t).catch(()=>{})})}),n.addEventListener("job_started",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;if(Co(s,i))return;let l=i.threadId;Kt(a=>{var d,c,u,p;return y(f({},a),{status:"streaming",activeJobId:s,activeJobIds:a.activeJobIds.includes(s)?a.activeJobIds:[...a.activeJobIds,s],activeJobThreads:l?y(f({},a.activeJobThreads),{[s]:l}):a.activeJobThreads,jobResponses:y(f({},a.jobResponses),{[s]:(d=a.jobResponses[s])!=null?d:""}),jobThinking:y(f({},a.jobThinking),{[s]:(c=a.jobThinking[s])!=null?c:""}),currentResponse:(u=a.jobResponses[s])!=null?u:"",currentThinking:(p=a.jobThinking[s])!=null?p:"",lastResponseText:null,lastThreadId:null,events:[...a.events,{type:"job_started",data:i,timestamp:Date.now()}]})})}),n.addEventListener("delta",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;if(Co(s,i))return;let l=i.text||"";Kt(a=>y(f({},a),{jobResponses:s?y(f({},a.jobResponses),{[s]:(a.jobResponses[s]||"")+l}):a.jobResponses,currentResponse:!s||s===a.activeJobId?a.currentResponse+l:a.currentResponse,events:[...a.events,{type:"delta",data:i,timestamp:Date.now()}]}))}),n.addEventListener("thinking",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;if(Co(s,i))return;let l=i.text||"";Kt(a=>y(f({},a),{jobThinking:s?y(f({},a.jobThinking),{[s]:(a.jobThinking[s]||"")+l}):a.jobThinking,currentThinking:!s||s===a.activeJobId?a.currentThinking+l:a.currentThinking,events:[...a.events,{type:"thinking",data:i,timestamp:Date.now()}]}))}),n.addEventListener("tool_use",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;Co(s,i)||Kt(l=>y(f({},l),{events:[...l.events,{type:"tool_use",data:i,timestamp:Date.now()}]}))}),n.addEventListener("done",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;Co(s,i)||(s&&delete uo[s],Kt(l=>{var w;let a=s?l.activeJobIds.filter(C=>C!==s):l.activeJobIds,d=f({},l.jobResponses),c=f({},l.jobThinking),u=f({},l.activeJobThreads),p=s?d[s]:void 0;s&&(delete d[s],delete c[s],delete u[s]);let g=s===l.activeJobId?a.length>0?a[a.length-1]:null:l.activeJobId;return y(f(y(f({},l),{activeJobIds:a,activeJobId:g,jobResponses:d,jobThinking:c,lastCompletedJobId:s!=null?s:l.activeJobId,lastResponseText:p||l.currentResponse||i.responseText||null,lastThreadId:(w=i.threadId)!=null?w:null}),s===l.activeJobId?{currentResponse:g&&d[g]||"",currentThinking:g&&c[g]||""}:{}),{events:[...l.events,{type:"done",data:i,timestamp:Date.now()}]})}))}),n.addEventListener("question",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;Co(s,i)||Kt(l=>y(f({},l),{pendingQuestions:[...l.pendingQuestions,{jobId:i.jobId,threadId:i.threadId,question:i.question,annotationIds:i.annotationIds,timestamp:Date.now()}],events:[...l.events,{type:"question",data:i,timestamp:Date.now()}]}))}),n.addEventListener("capabilities_changed",()=>{r()||Kt(o=>y(f({},o),{capabilitiesVersion:o.capabilitiesVersion+1}))}),n.addEventListener("queue_drained",()=>{if(!r()){for(let o of Object.keys(uo))delete uo[o];Nr.clear(),zo.clear(),Kt(o=>y(f({},o),{status:o.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}}),n.addEventListener("error",o=>{var i,s;if(!r()){if(n.readyState===EventSource.CLOSED)Kt(l=>y(f({},l),{isConnected:!1,status:"disconnected"})),wo&&(clearTimeout(wo),wo=null),wo=setTimeout(()=>{Ho(e).then(l=>{l&&xl(e)})},5e3);else if(o instanceof MessageEvent){let l=JSON.parse(o.data),a=(i=l.jobId)!=null?i:null;if(Co(a!=null?a:void 0,l))return;a&&delete uo[a];let d=(s=l.message)!=null?s:"";Kt(c=>{let u=a?c.activeJobIds.filter(g=>g!==a):c.activeJobIds,p=u.length>0?c.status:"error";return y(f({},c),{status:p,activeJobIds:u,lastCompletedJobId:a!=null?a:c.activeJobId,lastErrorByJob:a&&d?y(f({},c.lastErrorByJob),{[a]:d}):c.lastErrorByJob,events:[...c.events,{type:"error",data:l,timestamp:Date.now()}]})})}}}),n.onerror=()=>{r()||n.readyState===EventSource.CLOSED&&Kt(o=>y(f({},o),{isConnected:!1,status:"disconnected"}))}}function vl(e="http://localhost:1111",t=!0){let n=Rc(Bc,al,al);Lc(()=>{t&&Oc(e).then(i=>{i&&Ho(i).then(s=>{s&&xl(i)})})},[e,t]);let r=ll(()=>{Kt(()=>y(f({},Wo),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),o=ll(i=>{Kt(s=>y(f({},s),{pendingQuestions:s.pendingQuestions.filter(l=>l.threadId!==i)}))},[]);return y(f({},n),{clearEvents:r,dismissQuestion:o})}import{useEffect as Nc,useReducer as Dc}from"react";var _c={isAnnotating:!1,activeTool:"inspector",activeColor:"oklch(0.628 0.258 29)",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function Hr(){return Math.random().toString(36).substring(2,9)}function Sl(e){return e.status?e:e.captured?y(f({},e),{status:"in_flight"}):y(f({},e),{status:"pending"})}function Cn(e){return y(f({},e),{undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]})}function Hc(e,t){return y(f({},e),{isAnnotating:t})}function Fc(e,t){return y(f({},e),{activeTool:t,inspectedElement:null})}function $c(e,t){return y(f({},e),{activeColor:t})}function zc(e,t){return y(f({},e),{strokeWidth:t})}function Wc(e,t){return y(f({},e),{currentPath:[t]})}function jc(e,t){return y(f({},e),{currentPath:[...e.currentPath,t]})}function Yc(e){return y(f({},e),{currentPath:[]})}function Gc(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return y(f({},e),{currentPath:[]});let n={id:Hr(),type:e.activeTool,points:e.currentPath,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window!="undefined"?window.location.pathname:"/",groupId:t==null?void 0:t.groupId,elements:t==null?void 0:t.elements},r=Cn(e);return y(f({},r),{annotations:[...e.annotations,n],currentPath:[]})}function Jc(e,t){var o;let n=f({id:(o=t.id)!=null?o:Hr(),type:"text",points:[t.point],text:t.text,fontSize:t.fontSize||12,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window!="undefined"?window.location.pathname:"/",groupId:t.groupId,linkedSelector:t.linkedSelector,linkedAnchor:t.linkedAnchor,elements:t.elements},t.imageCount?{imageCount:t.imageCount}:{}),r=t.groupId?e:Cn(e);return y(f({},r),{annotations:[...e.annotations,n]})}function Uc(e,t){let n=Cn(e);return y(f({},n),{annotations:e.annotations.map(r=>r.id===t.id?f(y(f({},r),{text:t.text}),t.imageCount!=null?{imageCount:t.imageCount}:{}):r)})}function Vc(e,t){return y(f({},e),{annotations:e.annotations.map(n=>n.id===t.id?y(f({},n),{fontSize:Math.max(12,Math.min(72,t.fontSize))}):n)})}function Xc(e,t){let n=Cn(e),r=e.annotations.find(i=>i.id===t.id),o=r==null?void 0:r.groupId;return y(f({},n),{annotations:e.annotations.filter(i=>i.id!==t.id&&!(o&&i.groupId===o))})}function Kc(e,t){let n=t.saveUndo?Cn(e):e,r=e.annotations.find(i=>i.id===t.id),o=r==null?void 0:r.groupId;return y(f({},n),{annotations:e.annotations.map(i=>{if(!(i.id===t.id||o&&i.groupId===o))return i;let l=t.delta.x,a=t.delta.y;return y(f({},i),{points:i.points.map(d=>({x:d.x+l,y:d.y+a}))})})})}function qc(e,t){let n=t.saveUndo?Cn(e):e,r=e.annotations.find(s=>s.id===t.id);if(!r||r.type==="text"||r.points.length<2)return e;let o=0,i=0;if(r.type==="rectangle"&&r.groupId){let s=t.points,l=Math.min(s[0].x,s[1].x),a=Math.max(s[0].y,s[1].y),d=r.points[0],c=r.points[r.points.length-1],u=Math.min(d.x,c.x),p=Math.max(d.y,c.y);o=l-u,i=a-p}return y(f({},n),{annotations:e.annotations.map(s=>s.id===t.id?y(f({},s),{points:t.points}):r.groupId&&s.groupId===r.groupId&&s.type==="text"?y(f({},s),{points:s.points.map(l=>({x:l.x+o,y:l.y+i}))}):s)})}function Zc(e,t){let n=Cn(e);return y(f({},n),{annotations:[...e.annotations,...t.annotations.map(Sl)]})}function Qc(e,t){let n=new Set,r=[];for(let o of t.annotations)n.has(o.id)||(n.add(o.id),r.push(Sl(o)));return y(f({},e),{annotations:r})}function ed(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return y(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],undoStack:e.undoStack.slice(0,-1),redoStack:[...e.redoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function td(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return y(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],redoStack:e.redoStack.slice(0,-1),undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function nd(e,t){let{id:n,addToSelection:r}=t;if(n===null)return y(f({},e),{selectedAnnotationIds:[],lastSelectedId:null});if(r)if(e.selectedAnnotationIds.includes(n)){let i=e.selectedAnnotationIds.filter(s=>s!==n);return y(f({},e),{selectedAnnotationIds:i,lastSelectedId:i.length>0?i[i.length-1]:null})}else return y(f({},e),{selectedAnnotationIds:[...e.selectedAnnotationIds,n],lastSelectedId:n});return y(f({},e),{selectedAnnotationIds:[n],lastSelectedId:n})}function od(e,t){let n=new Set;for(let r of e.selectedAnnotationIds){let o=e.annotations.find(i=>i.id===r);o!=null&&o.groupId&&n.add(o.groupId)}return y(f({},e),{annotations:e.annotations.map(r=>{let o=e.selectedAnnotationIds.includes(r.id),i=r.groupId&&n.has(r.groupId);return!o&&!i?r:y(f({},r),{color:t.color})})})}function rd(e){return y(f({},e),{annotations:e.annotations.map(t=>y(f({},t),{captured:!0,status:t.status==="pending"||!t.status?"in_flight":t.status})),styleModifications:e.styleModifications.map(t=>y(f({},t),{captured:!0})),spacingTokenChanges:e.spacingTokenChanges.map(t=>y(f({},t),{captured:!0}))})}function id(e){return y(f({},e),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function sd(e,t){return y(f({},e),{inspectedElement:t})}function ld(e,t){let{selector:n,element:r,property:o,original:i,modified:s}=t,l=e.styleModifications.findIndex(a=>a.selector===n);if(i===s&&l<0)return e;if(l>=0){let a=e.styleModifications[l];if(a.captured){let g=Cn(e),w=g.styleModifications.map((C,R)=>R===l?y(f({},C),{changes:[{property:o,original:i,modified:s}],captured:!1}):C);return y(f({},g),{styleModifications:w})}let d=a.changes.findIndex(g=>g.property===o),c,u=e;if(d>=0){let g=a.changes[d];s===g.original?c=a.changes.filter((w,C)=>C!==d):c=a.changes.map((w,C)=>C===d?y(f({},w),{modified:s}):w)}else{if(i===s)return e;u=Cn(e),c=[...a.changes,{property:o,original:i,modified:s}]}if(c.length===0)return y(f({},u),{styleModifications:u.styleModifications.filter((g,w)=>w!==l)});let p=u.styleModifications.map((g,w)=>w===l?y(f({},g),{changes:c}):g);return y(f({},u),{styleModifications:p})}else{let a=Cn(e),d={selector:n,element:r,changes:[{property:o,original:i,modified:s}]};return y(f({},a),{styleModifications:[...a.styleModifications,d]})}}function ad(e,t){let{selector:n,durableSelector:r,element:o,changes:i}=t,s=i.filter(d=>d.original!==d.modified);if(s.length===0)return e;let l=Cn(e),a=l.styleModifications.findIndex(d=>d.selector===n);if(a>=0){let d=l.styleModifications[a],c=d.captured?[]:[...d.changes];for(let u of s){let p=c.findIndex(g=>g.property===u.property);p>=0?u.modified===c[p].original?c=c.filter((g,w)=>w!==p):c=c.map((g,w)=>w===p?y(f({},g),{modified:u.modified}):g):c.push(u)}return c.length===0?y(f({},l),{styleModifications:l.styleModifications.filter((u,p)=>p!==a)}):y(f({},l),{styleModifications:l.styleModifications.map((u,p)=>p===a?y(f({},u),{changes:c,captured:!1}):u)})}else return y(f({},l),{styleModifications:[...l.styleModifications,{selector:n,durableSelector:r,element:o,changes:s}]})}function cd(e,t){let{selector:n,property:r}=t,o=Cn(e),i=o.styleModifications.map(s=>s.selector!==n?s:y(f({},s),{changes:s.changes.filter(l=>l.property!==r)})).filter(s=>s.changes.length>0);return y(f({},o),{styleModifications:i})}function dd(e){if(e.styleModifications.length===0)return y(f({},e),{inspectedElement:null});let t=Cn(e);return y(f({},t),{styleModifications:[],inspectedElement:null})}function ud(e,t){return y(f({},e),{styleModifications:t})}function pd(e,t){let{updates:n}=t,r=new Map(n.map(o=>[o.id,o]));return y(f({},e),{annotations:e.annotations.map(o=>{let i=r.get(o.id);return i?f(y(f({},o),{points:[i.point,...o.points.slice(1)]}),i.linkedAnchor?{linkedAnchor:i.linkedAnchor}:{}):o})})}function fd(e,t){let n=new Set(t.ids);return y(f({},e),{annotations:e.annotations.map(r=>n.has(r.id)?y(f({},r),{status:t.status}):r)})}function gd(e,t){let n=new Set(t.ids),r=new Set;for(let o of e.annotations)n.has(o.id)&&o.groupId&&r.add(o.groupId);return y(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)||o.groupId&&r.has(o.groupId)?y(f({},o),{threadId:t.threadId}):o)})}function md(e,t){let n=new Set(t.ids),r=new Set;for(let o of e.annotations)n.has(o.id)&&o.groupId&&r.add(o.groupId);return y(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)||o.groupId&&r.has(o.groupId)?y(f({},o),{status:"waiting_input",question:t.question,threadId:t.threadId}):o)})}function hd(e,t){let n=new Map(t.resolutions.map(o=>[o.annotationId,o])),r=new Map;for(let o of e.annotations){let i=n.get(o.id);i&&o.groupId&&r.set(o.groupId,i)}return y(f({},e),{annotations:e.annotations.map(o=>{var s,l,a;let i=n.get(o.id)||(o.groupId?r.get(o.groupId):void 0);return i?y(f({},o),{status:i.status,resolutionSummary:i.summary,scope:(l=(s=i.finalScope)!=null?s:i.inferredScope)!=null?l:null,replyCount:((a=o.replyCount)!=null?a:0)+1,question:void 0,threadId:o.threadId||t.threadId}):o})})}function yd(e,t){let{linkedSelectors:n,styleSelectors:r}=t,o=new Set(n),i=new Set(r),s=new Set,l=new Set;for(let p of e.annotations)p.linkedSelector&&o.has(p.linkedSelector)&&(s.add(p.id),p.groupId&&l.add(p.groupId));for(let p of e.annotations)p.groupId&&l.has(p.groupId)&&s.add(p.id);let a=e.annotations.filter(p=>!s.has(p.id)),d=e.styleModifications.filter(p=>!i.has(p.selector));if(a.length===e.annotations.length&&d.length===e.styleModifications.length)return e;let c=e.selectedAnnotationIds.filter(p=>!s.has(p)),u=e.inspectedElement&&i.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return y(f({},e),{annotations:a,styleModifications:d,selectedAnnotationIds:c,lastSelectedId:c.length>0?c[c.length-1]:null,inspectedElement:u})}function bd(e,t){let n=e.spacingTokenChanges.findIndex(r=>r.tokenPath===t.tokenPath);return n>=0?y(f({},e),{spacingTokenChanges:e.spacingTokenChanges.map((r,o)=>o===n?t:r)}):y(f({},e),{spacingTokenChanges:[...e.spacingTokenChanges,t]})}function xd(e,t){return y(f({},e),{spacingTokenChanges:t})}function vd(e,t){let n=Cn(e),r=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),o;if(r>=0){let i=e.spacingTokenMods[r],s=y(f({},t),{originalValue:i.originalValue,originalPx:i.originalPx});o=e.spacingTokenMods.map((l,a)=>a===r?s:l)}else o=[...e.spacingTokenMods,t];return y(f({},n),{spacingTokenMods:o})}function Sd(e,t){let n=Cn(e),r=e.spacingTokenMods.findIndex(a=>a.tokenPath===t.tokenPath),o=r>=0?e.spacingTokenMods[r].originalValue:t.originalValue,i=r>=0?e.spacingTokenMods[r].originalPx:parseFloat(t.originalValue)||0,s={tokenPath:t.tokenPath,originalValue:o,currentValue:"__deleted__",targets:r>=0?e.spacingTokenMods[r].targets:[],originalPx:i,currentPx:0},l;return r>=0?l=e.spacingTokenMods.map((a,d)=>d===r?s:a):l=[...e.spacingTokenMods,s],y(f({},n),{spacingTokenMods:l})}var wd={SET_ANNOTATING:Hc,SET_TOOL:Fc,SET_COLOR:$c,SET_STROKE_WIDTH:zc,START_PATH:Wc,CONTINUE_PATH:jc,CANCEL_PATH:Yc,FINISH_PATH:Gc,ADD_TEXT:Jc,UPDATE_TEXT:Uc,UPDATE_TEXT_SIZE:Vc,DELETE_ANNOTATION:Xc,MOVE_ANNOTATION:Kc,RESIZE_ANNOTATION:qc,PASTE_ANNOTATIONS:Zc,RESTORE_ANNOTATIONS:Qc,UNDO:ed,REDO:td,SELECT_ANNOTATION:nd,UPDATE_ANNOTATION_COLOR:od,MARK_CAPTURED:rd,CLEAR:id,SELECT_ELEMENT:sd,MODIFY_STYLE:ld,MODIFY_STYLES_BATCH:ad,CLEAR_STYLE:cd,CLEAR_ALL_STYLES:dd,RESTORE_STYLE_MODIFICATIONS:ud,UPDATE_LINKED_POSITIONS:pd,CLEANUP_ORPHANED:yd,SET_ANNOTATION_STATUS:fd,SET_ANNOTATION_THREAD:gd,SET_ANNOTATION_QUESTION:md,APPLY_RESOLUTIONS:hd,ADD_SPACING_TOKEN_CHANGE:bd,RESTORE_SPACING_TOKEN_CHANGES:xd,MODIFY_SPACING_TOKEN:vd,DELETE_SPACING_TOKEN:Sd};function Cd(e,t){let n=wd[t.type];return n?n(e,t.payload):e}function wl(){let[e,t]=Dc(Cd,_c);return Nc(()=>{let n=r=>{(r.metaKey||r.ctrlKey)&&r.key==="z"&&(r.preventDefault(),r.shiftKey?t({type:"REDO"}):t({type:"UNDO"}))};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[]),[e,t]}import{useSyncExternalStore as kd}from"react";if(typeof window!="undefined"&&!window.__popmeltPathPatch){window.__popmeltPathPatch=!0;for(let e of["pushState","replaceState"]){let t=History.prototype[e];History.prototype[e]=function(...n){let r=window.location.pathname;t.apply(this,n),window.dispatchEvent(new CustomEvent("popmelt:locationchange",{detail:{prevPath:r}}))}}}function Ed(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function Td(){return window.location.pathname}function jo(){return kd(Ed,Td,()=>"/")}import{domToCanvas as Md}from"modern-screenshot";function Ci(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function ki(e,t=[],n,r){let o=new Map,i=[];for(let l of e)if(l.groupId){let a=o.get(l.groupId)||[];a.push(l),o.set(l.groupId,a)}else i.push(l);let s=[];for(let[l,a]of o){let d=a.find(u=>u.type!=="text"),c=a.find(u=>u.type==="text");if(d){let u=d.linkedSelector||(c==null?void 0:c.linkedSelector),p=(c==null?void 0:c.imageCount)||d.imageCount,g=d.pathname||(c==null?void 0:c.pathname);s.push(f(y(f(f({id:d.id,type:d.type,instruction:c==null?void 0:c.text},u?{linkedSelector:u}:{}),g?{pathname:g}:{}),{elements:d.elements||[]}),p?{imageCount:p}:{}))}}for(let l of i)s.push(f(y(f(f({id:l.id,type:l.type,instruction:l.type==="text"?l.text:void 0},l.linkedSelector?{linkedSelector:l.linkedSelector}:{}),l.pathname?{pathname:l.pathname}:{}),{elements:l.elements||[]}),l.imageCount?{imageCount:l.imageCount}:{}));return f(f({timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:s,styleModifications:t},n?{inspectedElement:n}:{}),r&&r.length>0?{spacingTokenChanges:r}:{})}function Id(e){if(!e.points||e.points.length===0)return null;let t=e.points.map(r=>r.x),n=e.points.map(r=>r.y);return{minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)}}function Ld(e,t){if(e.length===0)return[];let n=e.map(c=>({annotation:c,bounds:Id(c)})).filter(c=>c.bounds!==null);if(n.length===0)return[];n.sort((c,u)=>c.bounds.minY-u.bounds.minY);let r=Math.min(...n.map(c=>c.bounds.minY)),o=Math.max(...n.map(c=>c.bounds.maxY));if(o-r<=t){let c=(r+o)/2,u=Math.max(0,c-t/2);return[{top:u,bottom:u+t,annotations:e}]}let i=[],s=50,l=Math.max(0,r-s),a=[],d=l;for(let{annotation:c,bounds:u}of n){let p=u.maxY+s;if(p-l<=t)a.push(c),d=Math.max(d,p);else{if(a.length>0){let g=(l+d)/2,w=Math.max(0,g-t/2);i.push({top:w,bottom:w+t,annotations:a})}l=Math.max(0,u.minY-s),a=[c],d=u.maxY+s}}if(a.length>0){let c=(l+d)/2,u=Math.max(0,c-t/2);i.push({top:u,bottom:u+t,annotations:a})}return i}function Rd(e){let t=new Map;for(let n of e)if(n.linkedSelector)try{let r=document.querySelector(n.linkedSelector);if(r){let o=r.getBoundingClientRect();t.set(n.id,{x:o.left+window.scrollX,y:o.top+window.scrollY,width:o.width,height:o.height})}}catch(r){}return t}function Ad(e,t,n,r,o){if(e.save(),e.scale(r,r),o)for(let i of t){let s=o.get(i.id);if(!s)continue;let l=s.y-n;e.fillStyle=i.color,e.globalAlpha=.05,e.fillRect(s.x,l,s.width,s.height),e.globalAlpha=1,e.strokeStyle=i.color,e.lineWidth=1,e.setLineDash([2,4]),e.strokeRect(s.x,l,s.width,s.height),e.setLineDash([])}for(let i of t){let s=i.points.map(l=>({x:l.x,y:l.y-n}));switch(e.strokeStyle=i.color,e.fillStyle=i.color,e.lineWidth=i.strokeWidth,e.lineCap="round",e.lineJoin="round",i.type){case"freehand":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y);for(let l=1;l<s.length;l++)e.lineTo(s[l].x,s[l].y);e.stroke();break;case"line":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y),e.lineTo(s[s.length-1].x,s[s.length-1].y),e.stroke();break;case"rectangle":{if(s.length<2)break;let l=s[0],a=s[s.length-1],d=Math.min(l.x,a.x),c=Math.min(l.y,a.y),u=Math.abs(a.x-l.x),p=Math.abs(a.y-l.y);e.strokeRect(d,c,u,p);break}case"circle":{if(s.length<2)break;let l=s[0],a=s[s.length-1],d=(l.x+a.x)/2,c=(l.y+a.y)/2,u=Math.abs(a.x-l.x)/2,p=Math.abs(a.y-l.y)/2;e.beginPath(),e.ellipse(d,c,u,p,0,0,Math.PI*2),e.stroke();break}case"text":{if(!i.text||s.length<1)break;let l=s[0],a=i.fontSize||16;e.font=`${a}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=i.color;let c=(i.imageCount&&i.imageCount>0?`[${i.imageCount} image${i.imageCount>1?"s":""}] ${i.text}`:i.text).split(`
|
|
3
|
-
`),u=a*1.2,p=4,g=0;for(let w of c)g=Math.max(g,e.measureText(w).width);e.fillRect(l.x-p,l.y-p,g+p*2,c.length*u+p*2),e.fillStyle="#ffffff",c.forEach((w,C)=>{e.fillText(w,l.x,l.y+a+C*u)});break}}}e.restore()}async function gr(e,t,n=[]){try{let r=window.devicePixelRatio||1,o=window.innerWidth,i=window.innerHeight,s=n.filter(c=>{var u;return((u=c.status)!=null?u:"pending")==="pending"});console.log("[Screenshot] Starting capture with",s.length,"active annotations (filtered",n.length-s.length,"captured)");let l=Rd(s),a=Ld(s,i);if(a.length===0){let c=await Cl(e,[],window.scrollY,o,i,r,l);return c?[c]:[]}let d=[];for(let c=0;c<a.length;c++){let u=a[c],p=await Cl(e,u.annotations,u.top,o,i,r,l);p?d.push(p):console.warn(`[Screenshot] Region ${c+1} failed to capture`)}return console.log("[Screenshot] Capture complete"),d}catch(r){return console.error("[Screenshot] Capture failed:",r),[]}}async function Cl(e,t,n,r,o,i,s){try{let l=await Md(e,{filter:c=>!(c instanceof HTMLElement&&(c.id==="devtools-canvas"||c.id==="devtools-toolbar"||c.id==="devtools-scrim"||c.dataset.devtools!==void 0)),scale:i,backgroundColor:"#ffffff",width:r,height:o,style:{transform:`translate(${-window.scrollX}px, ${-n}px)`}}),a=document.createElement("canvas");a.width=r*i,a.height=o*i;let d=a.getContext("2d");return d?(d.drawImage(l,0,0,r*i,o*i,0,0,r*i,o*i),Ad(d,t,n,i,s),new Promise(c=>{a.toBlob(u=>c(u),"image/png")})):null}catch(l){return console.error("Region capture failed:",l),null}}async function mr(e){if(e.length===0)return null;if(e.length===1)return e[0];let t=await Promise.all(e.map(l=>new Promise((a,d)=>{let c=new Image;c.onload=()=>a(c),c.onerror=d,c.src=URL.createObjectURL(l)}))),n=t[0].width,r=t.reduce((l,a)=>l+a.height,0),o=document.createElement("canvas");o.width=n,o.height=r;let i=o.getContext("2d");if(!i)return null;let s=0;for(let l of t)i.drawImage(l,0,s),s+=l.height,URL.revokeObjectURL(l.src);return new Promise(l=>{o.toBlob(a=>l(a),"image/png")})}async function kl(e,t,n){try{let r=Array.isArray(e)?e:[e];if(r.length===0)return!1;let o=await mr(r);if(!o)return!1;let i={"image/png":o},s=t&&t.length>0,l=n&&n.length>0;if(s||l){let a=t?t.filter(d=>{var c;return((c=d.status)!=null?c:"pending")==="pending"}):[];if(a.length>0||l){let d=ki(a,n||[]),c=new Blob([JSON.stringify(d,null,2)],{type:"text/plain"});i["text/plain"]=c}}return await navigator.clipboard.write([new ClipboardItem(i)]),!0}catch(r){return console.warn("Clipboard write failed:",r),!1}}import{useCallback as Zt,useEffect as hn,useMemo as ri,useRef as jt,useState as gt}from"react";import{useCallback as Jo,useRef as Od}from"react";function Ei(e,t,n,r){if(t.length<2)return;let o=t[0],i=t[t.length-1];if(!o||!i)return;let s=(o.x+i.x)/2,l=(o.y+i.y)/2,a=Math.abs(i.x-o.x)/2,d=Math.abs(i.y-o.y)/2;e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.ellipse(s,l,a,d,0,0,Math.PI*2),e.stroke()}function Ti(e,t,n,r){if(t.length<2)return;let o=t[0],i=t[t.length-1];if(!(!o||!i)){e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.lineCap="round",e.lineJoin="round",e.moveTo(o.x,o.y);for(let s=1;s<t.length-1;s++){let l=t[s],a=t[s+1];if(!l||!a)continue;let d=(l.x+a.x)/2,c=(l.y+a.y)/2;e.quadraticCurveTo(l.x,l.y,d,c)}e.lineTo(i.x,i.y),e.stroke()}}function Mi(e,t,n,r){if(t.length<2)return;let o=t[0],i=t[t.length-1];!o||!i||(e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.lineCap="round",e.moveTo(o.x,o.y),e.lineTo(i.x,i.y),e.stroke())}function Ii(e,t,n,r){if(t.length<2)return;let o=t[0],i=t[t.length-1];if(!o||!i)return;let s=Math.min(o.x,i.x),l=Math.min(o.y,i.y),a=Math.abs(i.x-o.x),d=Math.abs(i.y-o.y);e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.lineCap="round",e.lineJoin="round",e.strokeRect(s,l,a,d)}var Ut='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function Pd(e,t,n){if(!t||e.measureText(t).width<=n)return[t];let r=t.split(/\s+/),o=[],i="";for(let s of r){let l=i?i+" "+s:s;i&&e.measureText(l).width>n?(o.push(i),i=s):i=l}return i&&o.push(i),o.length>0?o:[t]}function Yo(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function El(e,t,n){let r=[];for(let o of t)r.push(...Pd(e,o,n));return r}function Go(e,t,n){if(e.measureText(t).width<=n)return t;let r="\u2026";for(let o=t.length-1;o>0;o--){let i=t.slice(0,o)+r;if(e.measureText(i).width<=n)return i}return r}function Tl(e,t,n,r,o=12,i,s){if(!n)return;let l=o*1.4,a=n.replace(/\n/g," "),d=i!==void 0?i+". "+a:a;e.font=`${o}px ${Ut}`,e.textBaseline="middle";let c=s!==void 0?Math.min(400,Math.max(60,window.innerWidth-s-16)):400,u=Go(e,d,c),p=e.measureText(u).width;e.fillStyle=r,e.fillRect(t.x-4,t.y-4,p+8,l+8),e.fillStyle="#ffffff",e.fillText(u,t.x,t.y+l/2)}var Ml=11,Li=4,Bd=`600 ${Ml}px system-ui, -apple-system, sans-serif`;function Ri(e,t,n){return e.map(r=>({x:r.x-t,y:r.y-n}))}function Nd(e,t,n,r,o,i){let s=String(r);e.font=Bd;let a=e.measureText(s).width+Li*2,d=Ml+Li*2,c=t-a/2,u=n+i/2+2;e.fillStyle=o,e.fillRect(c,u,a,d),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(s,c+Li,u+d/2)}function Dd(e,t){if(e.points.length<2&&e.type!=="text")return null;switch(e.type){case"rectangle":case"freehand":{let n,r;if(e.type==="freehand")n=Math.min(...e.points.map(o=>o.x)),r=Math.max(...e.points.map(o=>o.y));else{let o=e.points[0],i=e.points[e.points.length-1];n=Math.min(o.x,i.x),r=Math.max(o.y,i.y)}return{x:n,y:r}}case"circle":{let n=e.points[0],r=e.points[e.points.length-1],o=Math.min(n.x,r.x),i=(Math.min(n.y,r.y)+Math.max(n.y,r.y))/2;return{x:o,y:i}}case"line":{let n=e.points[0],r=e.points[e.points.length-1],o=n.y>r.y?n:r;return{x:o.x,y:o.y}}default:return null}}function Il(){let e=Od(null),t=Jo(()=>{let l=e.current;if(!l)return;let a=l.getContext("2d");a&&a.clearRect(0,0,l.width,l.height)},[]),n=Jo((l,a,d)=>{var w;let c=e.current;if(!c)return;let u=c.getContext("2d");if(!u)return;let g=((w=l.status)!=null?w:l.captured?"in_flight":"pending")==="pending"||d?l.color:"#999999";switch(l.type){case"freehand":Ti(u,l.points,g,l.strokeWidth);break;case"line":Mi(u,l.points,g,l.strokeWidth);break;case"rectangle":Ii(u,l.points,g,l.strokeWidth);break;case"circle":Ei(u,l.points,g,l.strokeWidth);break;case"text":l.text&&l.points[0]&&Tl(u,l.points[0],l.text,g,l.fontSize,a,l.points[0].x);break}},[]),r=Jo((l,a,d,c)=>{let u=e.current;if(!u||l.length<2)return;let p=u.getContext("2d");if(p)switch(a){case"freehand":Ti(p,l,d,c);break;case"line":Mi(p,l,d,c);break;case"rectangle":Ii(p,l,d,c);break;case"circle":Ei(p,l,d,c);break}},[]),o=Jo((l,a)=>{let d=e.current;if(!d||l.points.length<2)return;let c=d.getContext("2d");if(c){if(c.fillStyle="#ffffff",c.strokeStyle=l.color,c.lineWidth=1.5,l.type==="line"){let u=l.points[0],p=l.points[l.points.length-1];[u,p].forEach(g=>{c.beginPath(),c.arc(g.x,g.y,a/2,0,Math.PI*2),c.fill(),c.stroke()});return}if(l.type==="circle"){let u=l.points[0],p=l.points[l.points.length-1],g=Math.min(u.x,p.x),w=Math.max(u.x,p.x),C=Math.min(u.y,p.y),R=Math.max(u.y,p.y),P=(g+w)/2,G=(C+R)/2;[{x:P,y:C},{x:P,y:R},{x:g,y:G},{x:w,y:G}].forEach(T=>{c.beginPath(),c.rect(T.x-a/2,T.y-a/2,a,a),c.fill(),c.stroke()});return}if(l.type==="rectangle"||l.type==="freehand"){let u,p,g,w;if(l.type==="freehand")u=Math.min(...l.points.map(R=>R.x)),p=Math.max(...l.points.map(R=>R.x)),g=Math.min(...l.points.map(R=>R.y)),w=Math.max(...l.points.map(R=>R.y));else{let R=l.points[0],P=l.points[l.points.length-1];u=Math.min(R.x,P.x),p=Math.max(R.x,P.x),g=Math.min(R.y,P.y),w=Math.max(R.y,P.y)}[{x:u,y:g},{x:p,y:g},{x:u,y:w},{x:p,y:w}].forEach(R=>{c.beginPath(),c.rect(R.x-a/2,R.y-a/2,a,a),c.fill(),c.stroke()})}}},[]),i=Jo((l,a,d,c,u,p,g,w=0,C=0,R,P)=>{var G;if(t(),l.forEach(M=>{var W;let T=y(f({},M),{points:Ri(M.points,w,C)}),x=R==null?void 0:R.get(M.id),N=(W=P==null?void 0:P.has(M.id))!=null?W:!1;n(T,x,N)}),a.length>0){let M=Ri(a,w,C);r(M,d,c,u)}if(p&&p.length>0&&g){let M=e.current,T=M==null?void 0:M.getContext("2d");for(let x of p){let N=l.find(W=>W.id===x);if(N){let W=y(f({},N),{points:Ri(N.points,w,C)});if(o(W,g),T&&N.type!=="text"&&R&&!(N.groupId&&l.some(H=>H.groupId===N.groupId&&H.type==="text"))){let H=R.get(N.id);if(H!==void 0){let V=Dd(W,g);if(V){let A=((G=N.status)!=null?G:N.captured?"in_flight":"pending")==="pending"?N.color:"#999999";Nd(T,V.x,V.y,H,A,g)}}}}}}},[t,n,r,o]),s=Jo(()=>{let l=e.current;if(!l)return;let a=window.devicePixelRatio||1;l.width=window.innerWidth*a,l.height=window.innerHeight*a;let d=l.getContext("2d");d&&d.scale(a,a)},[]);return{canvasRef:e,clearCanvas:t,drawAnnotation:n,drawCurrentPath:r,redrawAll:i,resizeCanvas:s}}import{useEffect as _d,useRef as Hd}from"react";function Ll(){let e=Hd({shift:!1,cmd:!1});return _d(()=>{let t=o=>{o.key==="Shift"&&(e.current.shift=!0),(o.key==="Meta"||o.key==="Control")&&(e.current.cmd=!0)},n=o=>{o.key==="Shift"&&(e.current.shift=!1),(o.key==="Meta"||o.key==="Control")&&(e.current.cmd=!1)},r=()=>{e.current={shift:!1,cmd:!1}};return window.addEventListener("keydown",t,!0),window.addEventListener("keyup",n,!0),window.addEventListener("blur",r),()=>{window.removeEventListener("keydown",t,!0),window.removeEventListener("keyup",n,!0),window.removeEventListener("blur",r)}},[]),e}import{useEffect as Fd}from"react";function Rl(e,t,n,r,o){Fd(()=>{let i=s=>{if(e){if(e.linkedSelector)return;s.preventDefault(),s.stopPropagation();let a=s.deltaY>0?-2:2;t(d=>d?y(f({},d),{fontSize:Math.max(12,Math.min(72,d.fontSize+a))}):null);return}if(!n)return;s.preventDefault();let l=r.find(a=>a.id===n);if(l&&l.type==="text"&&!l.linkedSelector){let a=l.fontSize||12,d=s.deltaY>0?-2:2;o({type:"UPDATE_TEXT_SIZE",payload:{id:n,fontSize:a+d}})}};return window.addEventListener("wheel",i,{passive:!1}),()=>{window.removeEventListener("wheel",i)}},[n,e,r,o,t])}import{useCallback as Yl,useEffect as Xr,useRef as Gl,useState as wr}from"react";function Fr(e){let t=Object.keys(e).find(o=>o.startsWith("__reactFiber$")||o.startsWith("__reactInternalInstance$"));if(!t)return null;let n=e[t],r=[];for(;n;){let o=n.type,i=(o==null?void 0:o.displayName)||(o==null?void 0:o.name);i&&typeof i=="string"&&/^[A-Z]/.test(i)&&!i.startsWith("_")&&i!=="Fragment"&&r.unshift(i),n=n.return}return r.length>0?{name:r[r.length-1],path:r}:null}function Ai(e){let t=Object.keys(e).find(o=>o.startsWith("__reactFiber$")||o.startsWith("__reactInternalInstance$"));if(!t)return[];let n=e[t],r=[];for(;n;){let o=n.type,i=typeof o=="function"||typeof o=="object"?(o==null?void 0:o.displayName)||(o==null?void 0:o.name):null;i&&typeof i=="string"&&/^[A-Z]/.test(i)&&!i.startsWith("_")&&i!=="Fragment"&&r.push({name:i,fiber:n}),n=n.return}return r.reverse(),r}function $r(e){let t=e,n=new Set;for(;t&&!n.has(t);){if(n.add(t),t.stateNode instanceof Element)return t.stateNode;t.child?t=t.child:t=null}return null}function Al(e){if(e.id)return`#${e.id}`;let t=e.tagName.toLowerCase(),n=Array.from(e.classList).slice(0,3).join(".");return n?`${t}.${n}`:t}function Rn(e){if(e.id&&!e.id.startsWith("radix-")&&!e.id.startsWith(":"))return`#${CSS.escape(e.id)}`;let t=[],n=e;for(;n&&n!==document.documentElement;){let r=n.tagName.toLowerCase();if(n.id&&!n.id.startsWith("radix-")&&!n.id.startsWith(":")){t.unshift(`#${CSS.escape(n.id)}`);break}let o=Array.from(n.classList).filter(s=>!s.startsWith("_")&&s.length<30).slice(0,2);o.length>0&&(r+="."+o.map(s=>CSS.escape(s)).join("."));let i=n.parentElement;if(i){let s=Array.from(i.children).filter(l=>l.tagName===n.tagName);if(s.length>1){let l=s.indexOf(n)+1;r+=`:nth-of-type(${l})`}}t.unshift(r),n=i}return t.join(" > ")}function vn(e){try{return document.querySelector(e)}catch(t){return null}}function zr(e,t=0){var a;let n=Ai(e);if(n.length===0)return null;let r=n.map(d=>d.name),o=n.length-1,i=Math.max(0,Math.min(n.length-1,o-t)),s=n[i],l=(a=$r(s.fiber))!=null?a:e;return{name:s.name,path:r,depthIndex:i,rootElement:l}}function Pl(e,t){var i,s;let n=Ai(e),r=t.toLowerCase(),o=-1;for(let l=n.length-1;l>=0;l--){let a=n[l].name;if(a===t){let d=(i=$r(n[l].fiber))!=null?i:e;return{name:t,path:n.map(c=>c.name),depthIndex:l,rootElement:d}}if(o===-1){let d=a.toLowerCase();(d.length>=4&&r.includes(d)||r.length>=4&&d.includes(r))&&(o=l)}}if(o>=0){let l=(s=$r(n[o].fiber))!=null?s:e;return{name:t,path:n.map(a=>a.name),depthIndex:o,rootElement:l}}return null}function Uo(e){let t=Vo(),n=[],r=new Set,o=t.currentNode;for(;o=t.nextNode();){let i=Pl(o,e);i&&!r.has(i.rootElement)&&(r.add(i.rootElement),n.push(i))}return n}function Pi(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),r=Vo(),o=new Set,i=r.currentNode;for(;(i=r.nextNode())&&n.size>0;)for(let s of n){let l=Pl(i,s);if(!l||o.has(l.rootElement))continue;o.add(l.rootElement);let a=l.rootElement.getBoundingClientRect();t.set(s,a.top+window.scrollY),n.delete(s);break}for(let s of n)t.set(s,1/0);return t}function Vo(){return document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(e){return e.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}})}function kn(e){let t={selector:Al(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=Ol(e);n&&n.length>0&&n.length<200&&(t.textContent=n);let r={};for(let s of e.attributes)s.name.startsWith("data-")&&(r[s.name]=s.value);Object.keys(r).length>0&&(t.dataAttributes=r);let o=Fr(e);o&&(t.reactComponent=o.name);let i=$d(e);return i&&(t.context=i),t}function Ol(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function Io(e,t){let n=document.elementsFromPoint(e,t);for(let r of n)if(r instanceof HTMLElement&&!(r.id==="devtools-canvas"||r.id==="devtools-toolbar"||r.id==="devtools-scrim")&&!r.closest("#devtools-toolbar")&&!(r.dataset.devtools||r.closest("[data-devtools]"))&&!["html","body"].includes(r.tagName.toLowerCase()))return r;return null}function $d(e){let t=e.parentElement,n=["section","article","nav","aside","header","footer","main"];for(;t&&t!==document.body;){let r=t.tagName.toLowerCase();if(n.includes(r)&&t.id)return`${r}#${t.id}`;if(t.id&&!t.id.startsWith("radix-")&&!t.id.startsWith(":"))return`${r}#${t.id}`;t=t.parentElement}return null}function Bl(e){let t=new Set,n=[],r=window.scrollX,o=window.scrollY,i=[{x:(e.minX+e.maxX)/2,y:(e.minY+e.maxY)/2},{x:e.minX,y:e.minY},{x:e.maxX,y:e.minY},{x:e.minX,y:e.maxY},{x:e.maxX,y:e.maxY}];for(let s of i){let l=s.x-r,a=s.y-o;if(l<0||a<0||l>window.innerWidth||a>window.innerHeight)continue;let d=Io(l,a);d&&!t.has(d)&&(t.add(d),n.push(kn(d)))}return n.slice(0,3)}function Oi(e){if(e.length===0)return[];let t=e.map(r=>r.x),n=e.map(r=>r.y);return Bl({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function qt(e,t){return e.style.getPropertyValue(t)!==""}function zd(e,t=30){if(e<=0)return[];let n=[],r=Vo(),o=.5,i=r.currentNode;for(;(i=r.nextNode())&&n.length<t;){let s=i,l=s.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let a=getComputedStyle(s);!qt(s,"padding-top")&&Math.abs((parseFloat(a.paddingTop)||0)-e)<o&&n.push({element:s,property:"padding-top"}),!qt(s,"padding-bottom")&&Math.abs((parseFloat(a.paddingBottom)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-bottom"}),!qt(s,"padding-left")&&Math.abs((parseFloat(a.paddingLeft)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-left"}),!qt(s,"padding-right")&&Math.abs((parseFloat(a.paddingRight)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-right"}),!qt(s,"margin-top")&&Math.abs((parseFloat(a.marginTop)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-top"}),!qt(s,"margin-bottom")&&Math.abs((parseFloat(a.marginBottom)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-bottom"}),!qt(s,"margin-left")&&Math.abs((parseFloat(a.marginLeft)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-left"}),!qt(s,"margin-right")&&Math.abs((parseFloat(a.marginRight)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-right"});let d=a.display;if((d.includes("flex")||d.includes("grid"))&&n.length<t){let c=qt(s,"gap"),u=parseFloat(a.gap)||0,p=parseFloat(a.rowGap)||0,g=parseFloat(a.columnGap)||0;!c&&Math.abs(u-e)<o?n.push({element:s,property:"gap"}):!qt(s,"row-gap")&&Math.abs(p-e)<o?n.push({element:s,property:"row-gap"}):!qt(s,"column-gap")&&Math.abs(g-e)<o&&n.push({element:s,property:"column-gap"})}}return n}function Bi(e,t=30){if(e<=0)return[];let n=[],r=Vo(),o=.5,i=r.currentNode;for(;(i=r.nextNode())&&n.length<t;){let s=i,l=s.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let a=getComputedStyle(s),d=parseFloat(a.borderTopWidth)||0,c=parseFloat(a.borderRightWidth)||0,u=parseFloat(a.borderBottomWidth)||0,p=parseFloat(a.borderLeftWidth)||0,g=s.clientWidth,w=s.clientHeight,C=parseFloat(a.paddingTop)||0;!qt(s,"padding-top")&&Math.abs(C-e)<o&&n.push({x:l.left+p,y:l.top+d,width:g,height:e,direction:"vertical",property:"padding-top"});let R=parseFloat(a.paddingBottom)||0;!qt(s,"padding-bottom")&&Math.abs(R-e)<o&&n.length<t&&n.push({x:l.left+p,y:l.top+d+w-e,width:g,height:e,direction:"vertical",property:"padding-bottom"});let P=parseFloat(a.paddingLeft)||0;!qt(s,"padding-left")&&Math.abs(P-e)<o&&n.length<t&&n.push({x:l.left+p,y:l.top+d,width:e,height:w,direction:"horizontal",property:"padding-left"});let G=parseFloat(a.paddingRight)||0;!qt(s,"padding-right")&&Math.abs(G-e)<o&&n.length<t&&n.push({x:l.left+p+g-e,y:l.top+d,width:e,height:w,direction:"horizontal",property:"padding-right"});let M=parseFloat(a.marginTop)||0;!qt(s,"margin-top")&&Math.abs(M-e)<o&&n.length<t&&n.push({x:l.left,y:l.top-e,width:l.width,height:e,direction:"vertical",property:"margin-top"});let T=parseFloat(a.marginBottom)||0;!qt(s,"margin-bottom")&&Math.abs(T-e)<o&&n.length<t&&n.push({x:l.left,y:l.bottom,width:l.width,height:e,direction:"vertical",property:"margin-bottom"});let x=parseFloat(a.marginLeft)||0;!qt(s,"margin-left")&&Math.abs(x-e)<o&&n.length<t&&n.push({x:l.left-e,y:l.top,width:e,height:l.height,direction:"horizontal",property:"margin-left"});let N=parseFloat(a.marginRight)||0;!qt(s,"margin-right")&&Math.abs(N-e)<o&&n.length<t&&n.push({x:l.right,y:l.top,width:e,height:l.height,direction:"horizontal",property:"margin-right"});let W=a.display;if((W.includes("flex")||W.includes("grid"))&&n.length<t&&!qt(s,"gap")){let H=Array.from(s.children).filter(V=>{let k=getComputedStyle(V);return k.display!=="none"&&k.position!=="absolute"&&k.position!=="fixed"});if(H.length>=2)for(let V=0;V<H.length-1&&n.length<t;V++){let k=H[V].getBoundingClientRect(),A=H[V+1].getBoundingClientRect(),Q=A.top-k.bottom;Math.abs(Q-e)<o&&Q>.5&&n.push({x:Math.min(k.left,A.left),y:k.bottom,width:Math.max(k.right,A.right)-Math.min(k.left,A.left),height:Q,direction:"vertical",property:"gap"});let ie=A.left-k.right;Math.abs(ie-e)<o&&ie>.5&&n.push({x:k.right,y:Math.min(k.top,A.top),width:ie,height:Math.max(k.bottom,A.bottom)-Math.min(k.top,A.top),direction:"horizontal",property:"gap"})}}}return n}function Wr(e){return typeof e=="string"?{value:e}:e}var Dl={gap:["gap","row-gap","column-gap"],padding:["padding-top","padding-bottom","padding-left","padding-right"],margin:["margin-top","margin-bottom","margin-left","margin-right"]};function Nl(e,t){let n=Dl[t];return n?n.includes(e):!1}function Wd(e,t){let n=e.split(/\s+/);for(let r of n){if(r===t)return!0;let o=r.lastIndexOf(":");if(o>=0&&r.slice(o+1)===t)return!0}return!1}function jd(e){var l,a;let t=e.lastIndexOf(":"),n=t>=0?e.slice(t+1):e,r=n.indexOf("-");if(r<0)return null;let o=n.slice(0,r),i={gap:"gap","gap-x":"column-gap","gap-y":"row-gap",p:"padding",pt:"padding-top",pb:"padding-bottom",pl:"padding-left",pr:"padding-right",px:"padding-left",py:"padding-top",m:"margin",mt:"margin-top",mb:"margin-bottom",ml:"margin-left",mr:"margin-right",mx:"margin-left",my:"margin-top"},s=n.slice(0,n.indexOf("-",r+1)>0?n.indexOf("-",r+1):r);return(a=(l=i[s])!=null?l:i[o])!=null?a:null}function Ni(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let o=[],i=Vo(),s=i.currentNode;for(;(s=i.nextNode())&&o.length<t;){let l=s,a=l.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let d=l.className;if(typeof d=="string")for(let c of e.bindings){if(!Wd(d,c))continue;let u=jd(c);if(u&&!(e.property&&!Nl(u,e.property))){o.push({element:l,property:u});break}}}return o}let r=zd(n,t*2);return e.property?r.filter(o=>Nl(o.property,e.property)).slice(0,t):r.slice(0,t)}function Di(e,t=30){let n=Ni(e,t),r=[];for(let o of n){let i=o.element,s=i.getBoundingClientRect(),l=getComputedStyle(i),a=parseFloat(l.borderTopWidth)||0,d=parseFloat(l.borderRightWidth)||0,c=parseFloat(l.borderLeftWidth)||0,u=i.clientWidth,p=i.clientHeight;switch(o.property){case"padding-top":{let g=parseFloat(l.paddingTop)||0;r.push({x:s.left+c,y:s.top+a,width:u,height:g,direction:"vertical",property:o.property});break}case"padding-bottom":{let g=parseFloat(l.paddingBottom)||0;r.push({x:s.left+c,y:s.top+a+p-g,width:u,height:g,direction:"vertical",property:o.property});break}case"padding-left":{let g=parseFloat(l.paddingLeft)||0;r.push({x:s.left+c,y:s.top+a,width:g,height:p,direction:"horizontal",property:o.property});break}case"padding-right":{let g=parseFloat(l.paddingRight)||0;r.push({x:s.left+c+u-g,y:s.top+a,width:g,height:p,direction:"horizontal",property:o.property});break}case"margin-top":{let g=parseFloat(l.marginTop)||0;r.push({x:s.left,y:s.top-g,width:s.width,height:g,direction:"vertical",property:o.property});break}case"margin-bottom":{let g=parseFloat(l.marginBottom)||0;r.push({x:s.left,y:s.bottom,width:s.width,height:g,direction:"vertical",property:o.property});break}case"margin-left":{let g=parseFloat(l.marginLeft)||0;r.push({x:s.left-g,y:s.top,width:g,height:s.height,direction:"horizontal",property:o.property});break}case"margin-right":{let g=parseFloat(l.marginRight)||0;r.push({x:s.right,y:s.top,width:g,height:s.height,direction:"horizontal",property:o.property});break}case"gap":case"row-gap":case"column-gap":{let g=Array.from(i.children).filter(w=>{let C=getComputedStyle(w);return C.display!=="none"&&C.position!=="absolute"&&C.position!=="fixed"});for(let w=0;w<g.length-1&&r.length<t;w++){let C=g[w].getBoundingClientRect(),R=g[w+1].getBoundingClientRect(),P=R.top-C.bottom;P>.5&&r.push({x:Math.min(C.left,R.left),y:C.bottom,width:Math.max(C.right,R.right)-Math.min(C.left,R.left),height:P,direction:"vertical",property:"gap"});let G=R.left-C.right;G>.5&&r.push({x:C.right,y:Math.min(C.top,R.top),width:G,height:Math.max(C.bottom,R.bottom)-Math.min(C.top,R.top),direction:"horizontal",property:"gap"})}break}}}return r}function _l(e,t){let n=new Set,r=hr(t);for(let o of e){let i=Fl[o.property];if(!i)continue;let s=o.element.className;if(typeof s=="string")for(let l of i){let a=`${l}-${r}`;for(let d of s.split(/\s+/)){let c=d.lastIndexOf(":"),u=c>=0?d.slice(c+1):d;if(u===a){n.add(u);break}}}}return[...n]}function Hl(e){let t=new Set;for(let n of e)for(let[r,o]of Object.entries(Dl))if(o.includes(n.property)){t.add(r);break}if(t.size===1)return[...t][0]}function _i(e,t,n){if(t===n)return e;let r=hr(t),o=hr(n);return e.map(i=>{let s=i.lastIndexOf("-");if(s<0)return i;let l=i.slice(0,s),a=i.slice(s+1);return a===r||a===`[${t}px]`?`${l}-${o}`:i})}var Yd={0:"0",1:"px",2:"0.5",4:"1",6:"1.5",8:"2",12:"3",16:"4",20:"5",24:"6",28:"7",32:"8",40:"10",48:"12",64:"16",80:"20",96:"24"};function hr(e){var t;return(t=Yd[e])!=null?t:`[${e}px]`}var Fl={"padding-top":["pt","py","p"],"padding-bottom":["pb","py","p"],"padding-left":["pl","px","p"],"padding-right":["pr","px","p"],"margin-top":["mt","my","m"],"margin-bottom":["mb","my","m"],"margin-left":["ml","mx","m"],"margin-right":["mr","mx","m"],gap:["gap"],"row-gap":["gap-y","gap"],"column-gap":["gap-x","gap"]};function Gd(e,t,n,r){let o=Fl[t];if(!o)return null;let i=hr(n);for(let s of o){let l=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+s+"-(?:"+Jd(i)+"|\\["+n+"px\\]))(?:\\s|$)"),a=e.match(l);if(a!=null&&a[1]){let d=hr(r),c=a[1].lastIndexOf(":"),u=c>=0?a[1].slice(0,c+1):"";return{matched:a[1],suggested:`${u}${s}-${d}`}}}return null}function Jd(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function $l(e,t,n){let r=new Set,o=[];for(let i of e){let s=Rn(i.element),l=`${s}::${i.property}`;if(r.has(l))continue;r.add(l);let a=Fr(i.element),d=i.element.className||"",c=Gd(d,i.property,t,n);o.push({selector:s,reactComponent:a==null?void 0:a.name,className:d,property:i.property,matchedClass:c==null?void 0:c.matched,suggestedClass:c==null?void 0:c.suggested})}return o}function yr(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function Hi(e,t){if(e instanceof HTMLElement){let r=e.style.getPropertyValue(t);if(r)return r}let n=Ud(e,t);return n&&n.includes("var(")?n:yr(e,t)}function Ud(e,t){let n=t.replace(/-([a-z])/g,(r,o)=>o.toUpperCase());try{for(let r of document.styleSheets)try{let o=r.cssRules||r.rules;for(let i of o)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let s=i.style.getPropertyValue(t);if(s&&s.includes("var("))return s;let l=i.style[n];if(l&&l.includes("var("))return l}}catch(o){}}catch(r){}return null}function jr(e,t){if(e instanceof HTMLElement){let r=e.style.getPropertyValue(t);if(r)return r}let n=t.replace(/-([a-z])/g,(r,o)=>o.toUpperCase());try{for(let r of document.styleSheets)try{let o=r.cssRules||r.rules;for(let i of o)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let s=i.style.getPropertyValue(t);if(s)return s;let l=i.style[n];if(l)return l}}catch(o){}}catch(r){}return null}function Yr(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function br(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function Vd(e){let t=[];for(let n of e){let r=t.find(o=>o.axis!==n.axis?!1:n.axis==="row"?Math.abs(o.y-n.y)<2&&Math.abs(o.h-n.h)<2:Math.abs(o.x-n.x)<2&&Math.abs(o.w-n.w)<2);if(r)if(n.axis==="row"){let o=Math.min(r.x,n.x),i=Math.max(r.x+r.w,n.x+n.w);r.x=o,r.w=i-o}else{let o=Math.min(r.y,n.y),i=Math.max(r.y+r.h,n.y+n.h);r.y=o,r.h=i-o}else t.push(f({},n))}return t}function Lo(e){let t=Array.from(e.children).filter(a=>{if(!(a instanceof HTMLElement))return!1;let d=window.getComputedStyle(a);return d.display!=="none"&&d.position!=="absolute"&&d.position!=="fixed"});if(t.length<2)return[];let n=[],r=e.getBoundingClientRect(),i=window.getComputedStyle(e).flexDirection,s=i==="column"||i==="column-reverse",l=6;for(let a=0;a<t.length-1;a++){let d=t[a].getBoundingClientRect(),c=t[a+1].getBoundingClientRect();if(c.left>d.right+.5&&n.push({axis:"column",x:d.right,y:r.top,w:c.left-d.right,h:r.height}),c.top>d.bottom+.5&&n.push({axis:"row",x:r.left,y:d.bottom,w:r.width,h:c.top-d.bottom}),!(c.left>d.right+.5)&&!(c.top>d.bottom+.5))if(s){let u=(d.bottom+c.top)/2;n.push({axis:"row",x:r.left,y:u-l/2,w:r.width,h:l})}else{let u=(d.right+c.left)/2;n.push({axis:"column",x:u-l/2,y:r.top,w:l,h:r.height})}}return Vd(n)}function Fi(e,t){let n=window.getComputedStyle(e),r=n.display;if(r!=="flex"&&r!=="inline-flex")return!1;let o=n.justifyContent;if(o!=="space-between"&&o!=="space-around"&&o!=="space-evenly"&&o!=="stretch")return!1;let i=n.flexDirection;return!(t!==(i==="column"||i==="column-reverse"?"row":"column")||parseFloat(t==="row"?n.rowGap:n.columnGap)>0)}function Xo(e){let t=window.getComputedStyle(e);return{top:parseFloat(t.paddingTop)||0,right:parseFloat(t.paddingRight)||0,bottom:parseFloat(t.paddingBottom)||0,left:parseFloat(t.paddingLeft)||0}}function Ro(e){let t=window.getComputedStyle(e);return{"top-left":parseFloat(t.borderTopLeftRadius)||0,"top-right":parseFloat(t.borderTopRightRadius)||0,"bottom-right":parseFloat(t.borderBottomRightRadius)||0,"bottom-left":parseFloat(t.borderBottomLeftRadius)||0}}function $i(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function Ko(e){var c,u;let t=document.createRange(),n=!1;for(let p of e.childNodes)p.nodeType===Node.TEXT_NODE&&(p.textContent||"").trim().length>0&&(n||(t.setStart(p,0),n=!0),t.setEnd(p,(u=(c=p.textContent)==null?void 0:c.length)!=null?u:0));if(!n)return null;let r=t.getBoundingClientRect(),o=window.getComputedStyle(e),i=parseFloat(o.fontSize)||16,s=parseFloat(o.lineHeight);isNaN(s)&&(s=i*1.2);let l=Math.max(1,t.getClientRects().length),a=Math.max(r.height,l*s),d=(a-r.height)/2;return new DOMRect(r.x,r.y-d,r.width,a)}function xr(e){let t=window.getComputedStyle(e),n=parseFloat(t.fontSize)||16,r=parseFloat(t.lineHeight);return isNaN(r)&&(r=n*1.2),{fontSize:n,lineHeight:r}}function Ve(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function zi(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function Gr(e){var t;for(let n of e){let r=vn(n.selector);if(!r&&n.durableSelector&&(r=vn(n.durableSelector),r)){let o=(t=n.selector.match(/\[data-pm="([^"]+)"\]/))==null?void 0:t[1];o&&r.setAttribute("data-pm",o)}if(r)for(let o of n.changes)Ve(r,o.property,o.modified)}}function Wi(e,t){let n=vn(e);if(!n)return;let r=t.find(o=>o.selector===e);if(r)for(let o of r.changes)zi(n,o.property,o.original)}function Jr(e){for(let t of e){let n=vn(t.selector);if(n)for(let r of t.changes)zi(n,r.property,r.original)}}function Wl(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){Wl(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Xd(o.style,t,n,r)}}}function Xd(e,t,n,r){for(let o=0;o<e.length;o++){let i=e[o];if(i!=null&&i.startsWith("--")){if(n.has(i))continue;n.add(i);let s=t.getPropertyValue(i).trim();jl(s)&&r.push({name:i,value:s,usage:`var(${i})`})}}}var Ur=null,Kd=5e3;function ji(){if(Ur&&Date.now()-Ur.timestamp<Kd)return Ur.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{Wl(i.cssRules||i.rules,n,t,e)}catch(s){}}catch(i){}let r=document.documentElement.style;for(let i=0;i<r.length;i++){let s=r[i];if(s!=null&&s.startsWith("--")&&!t.has(s)){t.add(s);let l=n.getPropertyValue(s).trim();jl(l)&&e.push({name:s,value:l,usage:`var(${s})`})}}let o=e.sort((i,s)=>i.name.localeCompare(s.name));return Ur={variables:o,timestamp:Date.now()},o}function jl(e){if(!e)return!1;let t=e.toLowerCase().trim();return!!(/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)||t.startsWith("rgb")||t.startsWith("hsl")||t.startsWith("oklch")||t.startsWith("oklab")||t.startsWith("lch")||t.startsWith("lab")||["transparent","currentcolor","inherit","white","black","red","green","blue","yellow","orange","purple","pink","gray","grey"].includes(t))}function vr(e,t){let n=t.match(/var\((--[^,)]+)(?:,\s*([^)]+))?\)/);if(n){let r=n[1],o=n[2];return getComputedStyle(document.documentElement).getPropertyValue(r).trim()||o||t}return t}function Sr(e,t){if(!e)return null;let n=zl(e);if(!n)return null;for(let r of t){let o=zl(r.value);if(o&&n===o)return r}return null}function zl(e){if(!e)return null;let t=e.trim().toLowerCase();if(t.startsWith("oklch(")){let n=t.match(/oklch\(\s*([\d.]+%?)\s+([\d.]+%?)\s+([\d.]+)/);if(n){let r=n[1].endsWith("%")?parseFloat(n[1])/100:parseFloat(n[1]),o=n[2].endsWith("%")?parseFloat(n[2])/100:parseFloat(n[2]),i=parseFloat(n[3]);r=Math.round(r*100)/100,o=Math.round(o*1e3)/1e3;let s=Math.round(i);return`oklch(${r} ${o} ${s})`}}if(t.startsWith("rgb")){let n=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(n)return`rgb(${n[1]},${n[2]},${n[3]})`}return t.startsWith("#")?t.length===4?`#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`:t.slice(0,7):t}import{Fragment as Ao,jsx as pt,jsxs as Un}from"react/jsx-runtime";var Fn=22,po=12,qd=3,Zd=250,Vr=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Qd=3e3;function eu(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=Hn(l,["left","top","avoidBottom","style","children"]);let a=e+po,d=t+po,c=n!==void 0?`${n}px`:"100vh";return pt("div",y(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:e,top:t,padding:po},r),children:pt("div",{style:{transform:`translate(min(0px, calc(100vw - ${a}px - 100%)), min(0px, calc(${c} - ${d}px - 100%)))`},children:o})}))}function Jl({annotations:e,supersededAnnotations:t,inFlightIds:n,scrollX:r,scrollY:o,annotationGroupMap:i,onViewThread:s,onSelectAnnotation:l,onHoverAnnotation:a,canvasRef:d}){var x,N,W,_,H,V,k;let[c,u]=wr(0),[p,g]=wr(()=>Math.floor(Math.random()*Vr.length)),w=!!(n&&n.size>0);Xr(()=>{if(!w)return;let A=setInterval(()=>{u(ie=>(ie+1)%qd)},Zd),Q=setInterval(()=>{g(ie=>(ie+1)%Vr.length)},Qd);return()=>{clearInterval(A),clearInterval(Q)}},[w]);let C=[];for(let A of e){if(A.type!=="text"||!A.text||!A.points[0]||t.has(A))continue;let Q=A.groupId?e.filter(Oe=>Oe.groupId===A.groupId):[A],ie=(x=A.status)!=null?x:"pending",pe=Q.reduce((Oe,h)=>{var z;return Oe+((z=h.replyCount)!=null?z:0)},0),be=Oe=>Oe==="resolved"&&pe===0,me=!!(n&&(n.has(A.id)||Q.some(Oe=>n.has(Oe.id))))||A.status==="in_flight"||Q.some(Oe=>Oe.status==="in_flight")||be(A.status)||Q.some(Oe=>be(Oe.status)),We=Q.some(Oe=>{var h;return Oe.status==="resolved"&&((h=Oe.replyCount)!=null?h:0)>0||Oe.status==="needs_review"}),Ce=Q.some(Oe=>Oe.threadId);if(!me&&ie!=="resolved"&&ie!=="needs_review"&&!We&&!Ce)continue;let oe=A.threadId||((N=Q.find(Oe=>Oe.threadId))==null?void 0:N.threadId),_e=ie==="needs_review"||Q.some(Oe=>Oe.status==="needs_review"),Ne=A.points[0],je=A.fontSize||12,Fe=je*1.4,Ie=i.get(A.id),ct=A.text.replace(/\n/g," "),wt=Ie!==void 0?Ie+". "+ct:ct,Pe=(_=(W=d==null?void 0:d.current)==null?void 0:W.getContext("2d"))!=null?_:document.createElement("canvas").getContext("2d");if(!Pe)continue;Pe.font=`${je}px ${Ut}`;let Tt=Ne.x-r,nt=Yo(Tt),Lt=Go(Pe,wt,nt),Mt=Pe.measureText(Lt).width;C.push({id:A.id,threadId:oe,linkedSelector:A.linkedSelector||((H=Q.find(Oe=>Oe.linkedSelector))==null?void 0:H.linkedSelector),x:Ne.x+Mt+4,y:Ne.y-4,size:Fe+8,color:A.color,isInFlight:me,isNeedsReview:_e,replyCount:pe})}if(C.length===0)return null;let R=2,P=(k=(V=d==null?void 0:d.current)==null?void 0:V.getContext("2d"))!=null?k:document.createElement("canvas").getContext("2d"),G=C.map(A=>{var me;let Q;A.isInFlight?Q=(me=Vr[p])!=null?me:"thinking":A.replyCount>0?Q=`${A.replyCount} ${A.replyCount===1?"reply":"replies"}`:Q="Cancelled";let ie=11,pe=4,be=Q.length*7.2;return P&&(P.font=`12px ${Ut}`,be=P.measureText(Q).width),4+ie+pe+be+4}),M=typeof window!="undefined"?window.innerHeight:9999,T=[];for(let A=0;A<C.length;A++){let Q=C[A].y-o,ie=Math.min(Q,M-Fn),pe=ie+Fn,me=C[A].x-r;for(let We=0;We<A;We++){let Ce=C[We].y-o,oe=Math.min(Ce,M-Fn),_e=oe+Fn;if(!(ie<_e&&pe>oe))continue;let je=T[We]+G[We];me<je+R&&(me=je+R)}T.push(me)}return pt(Ao,{children:C.map((A,Q)=>{let ie=!!A.threadId;return pt(eu,{left:T[Q]-po,top:A.y-o-po,onMouseDown:ie?pe=>pe.stopPropagation():void 0,onClick:ie?pe=>{if(pe.stopPropagation(),l==null||l(A.id),s==null||s(A.threadId),A.linkedSelector)try{let be=document.querySelector(A.linkedSelector);if(be){let me=be.getBoundingClientRect();(me.bottom<0||me.top>window.innerHeight)&&be.scrollIntoView({behavior:"smooth",block:"center"})}}catch(be){}}:void 0,onMouseEnter:a?()=>a(A.id):void 0,onMouseLeave:a?()=>a(null):void 0,style:{pointerEvents:ie?"auto":"none",cursor:ie?"pointer":void 0,zIndex:9999},children:pt("div",{"data-devtools":"annotation-badge",style:{height:A.size,display:"flex",alignItems:"center",backgroundColor:A.color,fontFamily:Ut,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:A.isInFlight?Un(Ao,{children:[pt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:c===1?Un(Ao,{children:[pt("circle",{cx:"7",cy:"7",r:"2"}),pt("circle",{cx:"17",cy:"7",r:"2"}),pt("circle",{cx:"7",cy:"17",r:"2"}),pt("circle",{cx:"17",cy:"17",r:"2"})]}):Un(Ao,{children:[pt("circle",{cx:"12",cy:"6",r:"2"}),pt("circle",{cx:"6",cy:"12",r:"2"}),pt("circle",{cx:"18",cy:"12",r:"2"}),pt("circle",{cx:"12",cy:"18",r:"2"})]})}),pt("span",{style:{opacity:.7,color:"inherit"},children:Vr[p]})]}):Un(Ao,{children:[A.isNeedsReview?pt("span",{style:{fontWeight:700,color:"inherit"},children:"?"}):pt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:pt("polyline",{points:"4 12 10 18 20 6"})}),pt("span",{style:{opacity:.7,color:"inherit"},children:A.replyCount>0?`${A.replyCount} ${A.replyCount===1?"reply":"replies"}`:"Cancelled"})]})})},A.id)})})}function Yi({inFlightSelectorColors:e,animated:t=!0}){let[n,r]=wr([]);return Xr(()=>{if(e.size===0){r([]);return}let o=null,i=()=>{let a=[];for(let[d,c]of e){let u=vn(d);if(!u)continue;let p=u.getBoundingClientRect();a.push({selector:d,top:p.top,left:p.left,width:p.width,height:p.height,color:c})}r(a)},s=()=>{o&&cancelAnimationFrame(o),o=requestAnimationFrame(i)};i(),window.addEventListener("scroll",s,!0),window.addEventListener("resize",s,!0);let l=new MutationObserver(s);return l.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s,!0),l.disconnect(),o&&cancelAnimationFrame(o)}},[e]),n.length===0?null:Un(Ao,{children:[t&&pt("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(o=>pt("div",{"data-devtools":"marching-ants",style:{position:"fixed",top:o.top,left:o.left,width:o.width,height:o.height,pointerEvents:"none",zIndex:9995,overflow:"visible"},children:pt("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:pt("rect",{x:"0.5",y:"0.5",width:Math.max(0,o.width-1),height:Math.max(0,o.height-1),fill:"none",stroke:o.color,strokeWidth:"1",strokeDasharray:"2 4",style:t?{animation:"popmelt-march 0.5s steps(2) infinite"}:void 0})})},o.selector))]})}function Ul({annotations:e,supersededAnnotations:t,scrollX:n,scrollY:r,onReply:o,annotationGroupMap:i,canvasRef:s,onHoverAnnotation:l}){let a=e.filter(u=>t.has(u)?!1:u.status==="waiting_input"&&u.question&&u.threadId);if(a.length===0)return null;let d=new Set,c=[];for(let u of a){if(!u.threadId||d.has(u.threadId))continue;d.add(u.threadId);let p=u.type==="text"?u:e.find(g=>g.groupId&&g.groupId===u.groupId&&g.type==="text")||u;if(p.type==="text"&&p.text&&p.points[0]){let g=p.points[0],w=p.fontSize||12,C=w*1.4,R=i.get(p.id),P=p.text.replace(/\n/g," "),G=R!==void 0?R+". "+P:P,T=document.createElement("canvas").getContext("2d");if(!T)continue;T.font=`${w}px ${Ut}`;let x=g.x-n,N=Yo(x),W=Go(T,G,N),_=T.measureText(W).width;c.push({annotation:u,x:g.x+_+4,y:g.y-4,size:C+8})}}return c.length===0?null:pt(Ao,{children:c.map(({annotation:u,x:p,y:g,size:w})=>pt(tu,{annotation:u,x:p-n,y:g-r,size:w,onReply:o,onHoverAnnotation:l},`question-${u.threadId}`))})}function tu({annotation:e,x:t,y:n,size:r,onReply:o,onHoverAnnotation:i}){let[s,l]=wr(!1),[a,d]=wr(""),c=Gl(null),u=Gl(null);Xr(()=>{s&&c.current&&c.current.focus()},[s]),Xr(()=>{if(!s)return;let R=G=>{u.current&&!G.composedPath().includes(u.current)&&l(!1)},P=G=>{G.key==="Escape"&&l(!1)};return document.addEventListener("mousedown",R),document.addEventListener("keydown",P),()=>{document.removeEventListener("mousedown",R),document.removeEventListener("keydown",P)}},[s]);let p=Yl(()=>{!a.trim()||!e.threadId||(o(e.threadId,a.trim()),d(""),l(!1))},[a,e.threadId,o]),g=Yl(R=>{R.key==="Enter"&&(R.metaKey||R.ctrlKey)&&(R.preventDefault(),p())},[p]),w=s?t:t-po,C=s?n:n-po;return Un("div",{ref:u,"data-devtools":"question-badge",onMouseEnter:i?()=>i(e.id):void 0,onMouseLeave:i?()=>i(null):void 0,style:{position:"fixed",left:`max(0px, ${w}px)`,top:`max(0px, ${C}px)`,padding:s?0:po,transform:`translate(min(0px, calc(100vw - max(0px, ${w}px) - 100%)), min(0px, calc(100vh - max(0px, ${C}px) - 100%)))`,zIndex:s?10002:9999,pointerEvents:"auto",cursor:s?void 0:"pointer"},children:[!s&&Un("div",{onClick:()=>l(!0),style:{height:r,display:"flex",alignItems:"center",backgroundColor:e.color,padding:`0 ${4}px`,gap:4,fontFamily:Ut,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[Un("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",children:[pt("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),pt("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),pt("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),pt("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]}),pt("span",{style:{opacity:.7},children:"reply?"})]}),s&&Un("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#eaeaea",fontFamily:Ut,fontSize:12,color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)"},children:[pt("div",{style:{padding:`${6}px ${8}px`,lineHeight:1.4},children:e.question}),Un("div",{style:{padding:`0 ${4}px ${4}px`},children:[pt("textarea",{ref:c,value:a,onChange:R=>d(R.target.value),onKeyDown:g,placeholder:"Type your reply...",style:{width:"100%",minHeight:40,padding:4,fontSize:12,fontFamily:Ut,backgroundColor:"rgba(0, 0, 0, 0.04)",color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)",borderRadius:0,outline:"none",resize:"vertical",lineHeight:1.4,boxSizing:"border-box"}}),pt("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:4},children:pt("button",{onClick:p,disabled:!a.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:Ut,fontWeight:600,backgroundColor:a.trim()?e.color:"rgba(0,0,0,0.1)",color:a.trim()?"#ffffff":"rgba(0,0,0,0.3)",border:"none",cursor:a.trim()?"pointer":"default"},children:"Send \u2318\u23CE"})})]})]})]})}function Kr(e){var i;let t=new Set,n=new Map;for(let s of e){if(!s.linkedSelector)continue;let l=n.get(s.linkedSelector)||[];l.push(s),n.set(s.linkedSelector,l)}let r=new Set,o=new Set;for(let s of n.values()){if(s.length<=1){(i=s[0])!=null&&i.groupId&&o.add(s[0].groupId);continue}s.sort((a,d)=>d.timestamp-a.timestamp);let l=s[0];l.groupId&&o.add(l.groupId);for(let a=1;a<s.length;a++){let d=s[a];t.add(d),d.groupId&&r.add(d.groupId)}}for(let s of e)s.groupId&&r.has(s.groupId)&&!o.has(s.groupId)&&t.add(s);return t}import{useEffect as Vl,useLayoutEffect as nu,useState as Xl}from"react";import{jsx as Gi,jsxs as ql}from"react/jsx-runtime";function ou(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}var Kl=["top-left","top-right","bottom-right","bottom-left"];function Zl({element:e,radius:t,accentColor:n,hoveredCorner:r,draggingCorner:o,cursorViewport:i}){let[s,l]=Xl(null),[a,d]=Xl(!1);if(Vl(()=>{let P=T=>{(T.key==="Meta"||T.key==="Control")&&d(!0)},G=T=>{(T.key==="Meta"||T.key==="Control")&&d(!1)},M=()=>d(!1);return window.addEventListener("keydown",P,!0),window.addEventListener("keyup",G,!0),window.addEventListener("blur",M),()=>{window.removeEventListener("keydown",P,!0),window.removeEventListener("keyup",G,!0),window.removeEventListener("blur",M)}},[]),Vl(()=>{if(!e){l(null);return}let P=()=>{l(e.getBoundingClientRect())};return P(),window.addEventListener("scroll",P,{passive:!0}),window.addEventListener("resize",P,{passive:!0}),()=>{window.removeEventListener("scroll",P),window.removeEventListener("resize",P)}},[e]),nu(()=>{e&&l(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!s)return null;let c=s.width,u=s.height,p=ou(n,.2),g={"top-left":{x:0,y:t["top-left"]},"top-right":{x:c,y:t["top-right"]},"bottom-right":{x:c,y:u-t["bottom-right"]},"bottom-left":{x:0,y:u-t["bottom-left"]}},w=new Set,C=o!=null?o:r;if(C)if(a)w.add(C);else for(let P of Kl)w.add(P);let R={position:"fixed",top:s.top,left:s.left,width:c,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"};return ql("div",{"data-devtools":"border-radius-handles",style:R,children:[ql("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${u}`,children:[Gi("rect",{x:"0.5",y:"0.5",width:Math.max(0,c-1),height:Math.max(0,u-1),fill:"none",stroke:p,strokeWidth:"1"}),Kl.map(P=>{let G=g[P],M=w.has(P);return Gi("circle",{cx:G.x,cy:G.y,r:P===(o!=null?o:r)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:P===(o!=null?o:r)?4:2,paintOrder:"stroke"},P)})]}),i&&C&&(()=>{let P=Math.round(t[C]);return Gi("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:P})})()]})}import{useEffect as ru,useState as iu}from"react";function qo(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);if(n)return`oklch(${n[1]} / ${t})`;let r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r){let o=parseInt(r[1],16),i=parseInt(r[2],16),s=parseInt(r[3],16);return`rgba(${o}, ${i}, ${s}, ${t})`}return`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}import{Fragment as su,jsx as Ji,jsxs as Cr}from"react/jsx-runtime";function Vn({element:e,isSelected:t=!1,elementInfo:n,color:r="#3b82f6",annotationNumber:o,changeCount:i,hideTooltip:s=!1}){let[l,a]=iu(null);if(ru(()=>{if(!e){a(null);return}let x=()=>{let N=e.getBoundingClientRect();a(N)};return x(),window.addEventListener("scroll",x,{passive:!0}),window.addEventListener("resize",x,{passive:!0}),()=>{window.removeEventListener("scroll",x),window.removeEventListener("resize",x)}},[e]),!l||!e)return null;let d={position:"fixed",top:l.top,left:l.left,width:l.width,height:l.height,pointerEvents:"none",zIndex:9996,backgroundColor:qo(r,.05),overflow:"visible"},c=e.tagName.toLowerCase(),u=e.id?`#${e.id}`:"",p=e.classList.length>0?"."+Array.from(e.classList).slice(0,2).join("."):"",g=n==null?void 0:n.reactComponent,w=g?`<${g}> ${c}${u}${p}`:`${c}${u}${p}`,C=22,R=l.height>=window.innerHeight,P=R?0:l.top>=C?l.top-C:l.bottom,G=R?{position:"absolute",top:8,left:8,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:r,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400}:{position:"fixed",top:P,left:l.left,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:r,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400},T=!s&&Cr("div",{"data-devtools":"tooltip",style:G,children:[o!==void 0&&Cr("span",{children:[o,"."]}),Ji("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:w}),i!==void 0&&i>0&&Cr("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return Cr(su,{children:[Cr("div",{"data-devtools":"highlight",style:d,children:[Ji("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:Ji("rect",f({x:"0.5",y:"0.5",width:Math.max(0,l.width-1),height:Math.max(0,l.height-1),fill:"none",stroke:r,strokeWidth:"1"},!t&&{strokeDasharray:"2 4"}))}),R&&T]}),!R&&T]})}import{useEffect as Ql,useLayoutEffect as lu,useState as Ui}from"react";import{jsx as oo,jsxs as Xi}from"react/jsx-runtime";function Vi(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function Ki({element:e,gap:t,accentColor:n,hoveredAxis:r,draggingAxis:o,cursorViewport:i,isAutoGap:s=!1,refreshKey:l=0}){let[a,d]=Ui(null),[c,u]=Ui([]),[p,g]=Ui(!1);if(Ql(()=>{let _=k=>{(k.key==="Meta"||k.key==="Control")&&g(!0)},H=k=>{(k.key==="Meta"||k.key==="Control")&&g(!1)},V=()=>g(!1);return window.addEventListener("keydown",_,!0),window.addEventListener("keyup",H,!0),window.addEventListener("blur",V),()=>{window.removeEventListener("keydown",_,!0),window.removeEventListener("keyup",H,!0),window.removeEventListener("blur",V)}},[]),Ql(()=>{if(!e){d(null),u([]);return}let _=()=>{d(e.getBoundingClientRect()),u(Lo(e))};return _(),window.addEventListener("scroll",_,{passive:!0}),window.addEventListener("resize",_,{passive:!0}),()=>{window.removeEventListener("scroll",_),window.removeEventListener("resize",_)}},[e]),lu(()=>{e&&(d(e.getBoundingClientRect()),u(Lo(e)))},[e,t.row,t.column,l]),!a||c.length===0)return null;let w=a.width,C=a.height,R="pm-gap-stripe-pattern",P=Vi(n,.25),G=Vi(n,.1),M=Vi(n,.2),T=8,x=2,N={position:"fixed",top:a.top,left:a.left,width:w,height:C,pointerEvents:"none",zIndex:9996,overflow:"visible"},W=o!=null?o:r;return Xi("div",{"data-devtools":"gap-handles",style:N,children:[Xi("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${w} ${C}`,children:[oo("defs",{children:oo("pattern",{id:R,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:oo("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:P,strokeWidth:"1.5"})})}),oo("rect",{x:"0.5",y:"0.5",width:Math.max(0,w-1),height:Math.max(0,C-1),fill:"none",stroke:M,strokeWidth:"1"}),c.map((_,H)=>{let V=_.x-a.left,k=_.y-a.top,A=_.w,Q=_.h,ie=p?_.axis===W:!0;return(_.axis==="row"?t.row:t.column)===0?null:Xi("g",{opacity:ie?1:.6,children:[oo("rect",{x:V,y:k,width:A,height:Q,fill:G}),oo("rect",{x:V,y:k,width:A,height:Q,fill:`url(#${R})`})]},H)}),W&&(()=>{let _=c.filter(_e=>_e.axis===W);if(_.length===0)return null;let H=_[0];if(i&&_.length>1){let _e=1/0;for(let Ne of _){let je=Ne.x+Ne.w/2,Fe=Ne.y+Ne.h/2,Ie=Math.abs(i.x-je)+Math.abs(i.y-Fe);Ie<_e&&(_e=Ie,H=Ne)}}let V=H.x-a.left,k=H.y-a.top,A=H.w,Q=H.h,ie=V+A/2,pe=k+Q/2;if(s)return oo("circle",{cx:ie,cy:pe,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let be=W==="column",me=be?x:T,We=be?T:x,Ce=ie-me/2,oe=pe-We/2;return oo("rect",{x:Ce,y:oe,width:me,height:We,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&W&&(()=>{let _=s?"auto":String(Math.round(W==="row"?t.row:t.column));return oo("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:_})})()]})}import{useCallback as pu,useEffect as fu,useState as gu}from"react";import{useEffect as au,useState as ea}from"react";var cu=3,du=250,qi=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],uu=3e3;function ta(e){let[t,n]=ea(0),[r,o]=ea(()=>Math.floor(Math.random()*qi.length));return au(()=>{if(!e)return;let i=setInterval(()=>n(l=>(l+1)%cu),du),s=setInterval(()=>o(l=>(l+1)%qi.length),uu);return()=>{clearInterval(i),clearInterval(s)}},[e]),{charIndex:t,word:qi[r]}}import{Fragment as Zi,jsx as An,jsxs as Zo}from"react/jsx-runtime";function mu(e){let{element:t}=e,n=t.tagName,r=t.id?`#${t.id}`:"",o=t.className?"."+t.className.split(" ").slice(0,2).join("."):"",i=t.reactComponent;return i?`<${i}> ${n}${r}${o}`:`${n}${r}${o}`}var na=22,Qi=12;function hu(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=Hn(l,["left","top","avoidBottom","style","children"]);let a=n!==void 0?`${n}px`:"100vh";return An("div",y(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:Qi,transform:`translate(min(0px, calc(100vw - max(0px, ${e}px) - 100%)), min(0px, calc(${a} - max(0px, ${t}px) - 100%)))`},r),children:o}))}function oa({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:r,dispatch:o,inFlightSelectors:i,toolbarRef:s,onHoverSelector:l}){var G;let[a,d]=gu([]),c=i&&i.size>0,{charIndex:u,word:p}=ta(!!c);fu(()=>{if(t){d([]);return}let M=null,T=()=>{let W=[];e.forEach((_,H)=>{let V=vn(_.selector);if(!V)return;let k=V.getBoundingClientRect();W.push({selector:_.selector,modIndex:H,top:k.top>=na?k.top-na:k.bottom,left:k.left,label:mu(_),changeCount:_.changes.length,annotationNumber:r+H+1})}),d(W)},x=()=>{M&&cancelAnimationFrame(M),M=requestAnimationFrame(T)};T(),window.addEventListener("scroll",x,!0),window.addEventListener("resize",x,!0);let N=new MutationObserver(x);return N.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",x),document.fonts.ready.then(x),()=>{window.removeEventListener("scroll",x,!0),window.removeEventListener("resize",x,!0),window.removeEventListener("load",x),N.disconnect(),M&&cancelAnimationFrame(M)}},[e,t,r]);let g=pu(M=>{let T=e[M];if(!T)return;let x=vn(T.selector);x&&(o({type:"SELECT_ANNOTATION",payload:{id:null}}),o({type:"SET_TOOL",payload:"inspector"}),o({type:"SELECT_ELEMENT",payload:{el:x,info:T.element}}))},[e,o]);if(a.length===0)return null;let w=(G=s==null?void 0:s.current)==null?void 0:G.getBoundingClientRect(),C=w?w.top-8:void 0,R={display:"flex",alignItems:"center",gap:6,backgroundColor:n,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,whiteSpace:"nowrap",maxWidth:400},P={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return An(Zi,{children:a.map(M=>{let T=i==null?void 0:i.has(M.selector);return An(hu,{left:M.left-Qi,top:M.top-Qi,avoidBottom:C,onClick:()=>g(M.modIndex),onMouseEnter:l?()=>l(M.selector):void 0,onMouseLeave:l?()=>l(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:Zo("div",{"data-devtools":"badge",style:y(f({},R),{backgroundColor:T?"#999999":n}),children:[Zo("span",{children:[M.annotationNumber,"."]}),An("span",{style:P,children:M.label}),Zo("span",{style:{opacity:.8},children:["(",M.changeCount," ",M.changeCount===1?"change":"changes",")"]}),T&&Zo("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[An("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:u===1?Zo(Zi,{children:[An("circle",{cx:"7",cy:"7",r:"2"}),An("circle",{cx:"17",cy:"7",r:"2"}),An("circle",{cx:"7",cy:"17",r:"2"}),An("circle",{cx:"17",cy:"17",r:"2"})]}):Zo(Zi,{children:[An("circle",{cx:"12",cy:"6",r:"2"}),An("circle",{cx:"6",cy:"12",r:"2"}),An("circle",{cx:"18",cy:"12",r:"2"}),An("circle",{cx:"12",cy:"18",r:"2"})]})}),p]})]})},M.selector)})})}import{useEffect as yu,useState as bu}from"react";import{Fragment as vu,jsx as ra}from"react/jsx-runtime";function xu(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function ia({styleModifications:e,accentColor:t}){let[n,r]=bu([]);if(yu(()=>{let i=null,s=()=>{let d=[];for(let c of e){let u=vn(c.selector);if(!u)continue;let p=u.getBoundingClientRect();if(p.width===0&&p.height===0)continue;let g=Ro(u);d.push({selector:c.selector,top:p.top,left:p.left,width:p.width,height:p.height,borderRadius:`${g["top-left"]}px ${g["top-right"]}px ${g["bottom-right"]}px ${g["bottom-left"]}px`})}r(d)},l=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(s)};s(),window.addEventListener("scroll",l,{passive:!0}),window.addEventListener("resize",l,{passive:!0});let a=new MutationObserver(l);return a.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",l),window.removeEventListener("resize",l),a.disconnect(),i&&cancelAnimationFrame(i)}},[e]),n.length===0)return null;let o=xu(t,.2);return ra(vu,{children:n.map(i=>{let s={position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${o}`,borderRadius:i.borderRadius,boxSizing:"border-box"};return ra("div",{"data-devtools":"mod-border",style:s},i.selector)})})}import{useEffect as sa,useLayoutEffect as Su,useState as la}from"react";import{jsx as fo,jsxs as ts}from"react/jsx-runtime";function es(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}var wu={top:"bottom",bottom:"top",left:"right",right:"left"};function ns({element:e,padding:t,accentColor:n,hoveredSide:r,draggingSide:o,cursorViewport:i,refreshKey:s}){let[l,a]=la(null),[d,c]=la(!1);if(sa(()=>{let A=pe=>{(pe.key==="Meta"||pe.key==="Control")&&c(!0)},Q=pe=>{(pe.key==="Meta"||pe.key==="Control")&&c(!1)},ie=()=>c(!1);return window.addEventListener("keydown",A,!0),window.addEventListener("keyup",Q,!0),window.addEventListener("blur",ie),()=>{window.removeEventListener("keydown",A,!0),window.removeEventListener("keyup",Q,!0),window.removeEventListener("blur",ie)}},[]),sa(()=>{if(!e){a(null);return}let A=()=>{a(e.getBoundingClientRect())};return A(),window.addEventListener("scroll",A,{passive:!0}),window.addEventListener("resize",A,{passive:!0}),()=>{window.removeEventListener("scroll",A),window.removeEventListener("resize",A)}},[e]),Su(()=>{e&&a(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,s]),!l)return null;let u=l.width,p=l.height,{top:g,right:w,bottom:C,left:R}=t,P="pm-stripe-pattern",G=es(n,.25),M=es(n,.1),T=es(n,.2),x=8,N=2,W={position:"fixed",top:l.top,left:l.left,width:u,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"},_=["top","right","bottom","left"],H={top:`0,0 ${u},0 ${u-w},${g} ${R},${g}`,right:`${u},0 ${u},${p} ${u-w},${p-C} ${u-w},${g}`,bottom:`0,${p} ${R},${p-C} ${u-w},${p-C} ${u},${p}`,left:`0,0 ${R},${g} ${R},${p-C} 0,${p}`},V={top:{x:u/2-x/2,y:g/2-N/2,w:x,h:N},bottom:{x:u/2-x/2,y:p-C/2-N/2,w:x,h:N},left:{x:R/2-N/2,y:p/2-x/2,w:N,h:x},right:{x:u-w/2-N/2,y:p/2-x/2,w:N,h:x}},k=new Set;return o?k.add(o):r&&(k.add(r),d||k.add(wu[r])),ts("div",{"data-devtools":"padding-handles",style:W,children:[ts("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${u} ${p}`,children:[fo("defs",{children:fo("pattern",{id:P,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:fo("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:G,strokeWidth:"1.5"})})}),fo("rect",{x:"0.5",y:"0.5",width:Math.max(0,u-1),height:Math.max(0,p-1),fill:"none",stroke:T,strokeWidth:"1"}),_.map(A=>{if(t[A]<=0)return null;let ie=k.has(A);return ts("g",{opacity:ie?1:.6,children:[fo("polygon",{points:H[A],fill:M}),fo("polygon",{points:H[A],fill:`url(#${P})`})]},A)}),_.map(A=>{let Q=V[A],ie=k.has(A);return fo("rect",{x:Q.x,y:Q.y,width:Q.w,height:Q.h,fill:n,stroke:"#ffffff",strokeWidth:ie?4:2,paintOrder:"stroke"},`handle-${A}`)})]}),i&&(r||o)&&(()=>{let A=o!=null?o:r,Q=Math.round(t[A]);return fo("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:Q})})()]})}import{useCallback as Xn,useEffect as $n,useMemo as oi,useRef as Ln,useState as dn}from"react";import{Check as ni,ChevronDown as ds,MoveHorizontal as xa,RotateCcw as Uu,Shrink as Vu,X as Xu}from"lucide-react";var Cu="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",go={borderWidth:3,borderStyle:"solid",borderImage:`url("${Cu}") 4 / 1.9 / 0 round`};var qr={"font-size":["rem","px","em"],"line-height":["","rem","px","em"],"letter-spacing":["rem","px","em"],gap:["rem","px","em"],"column-gap":["rem","px","em"],"row-gap":["rem","px","em"],padding:["rem","px","em","%"],margin:["rem","px","em","%"],width:["rem","px","%","em"],height:["rem","px","%","em"],"min-width":["rem","px","%","em"],"max-width":["rem","px","%","em"],"min-height":["rem","px","%","em"],"max-height":["rem","px","%","em"],"border-width":["px","rem","em"],"border-radius":["rem","px","%","em"]};function Qo(e){var t,n;return(n=(t=qr[e])==null?void 0:t[0])!=null?n:"px"}function mo(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function Zr(e,t,n,r){let o=e.trim();if(!o)return"";let i=o.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i);if(i)return`${parseFloat(i[1])}${i[2].toLowerCase()}`;let s=parseFloat(o);if(!isNaN(s)){if(r){let{unit:l}=mo(n);return`${s}${l||Qo(t)}`}return`${s}${Qo(t)}`}return o}function os(e,t){if(!t||t==="px")return e;if(t==="rem"){let n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return Math.round(e/n*1e3)/1e3}return e}import{useCallback as ku,useEffect as Eu,useRef as aa,useState as Tu}from"react";import{Plus as ca,X as Mu}from"lucide-react";import{jsx as In,jsxs as Po}from"react/jsx-runtime";var Qr=[{name:"blur",label:"Blur",unit:"px",defaultValue:10,min:0,max:100,step:1},{name:"brightness",label:"Brightness",unit:"",defaultValue:1,min:0,max:3,step:.05},{name:"contrast",label:"Contrast",unit:"",defaultValue:1,min:0,max:3,step:.05},{name:"saturate",label:"Saturate",unit:"",defaultValue:1,min:0,max:3,step:.05},{name:"grayscale",label:"Grayscale",unit:"",defaultValue:0,min:0,max:1,step:.05},{name:"sepia",label:"Sepia",unit:"",defaultValue:0,min:0,max:1,step:.05},{name:"invert",label:"Invert",unit:"",defaultValue:0,min:0,max:1,step:.05},{name:"hue-rotate",label:"Hue Rotate",unit:"deg",defaultValue:0,min:0,max:360,step:1},{name:"opacity",label:"Opacity",unit:"",defaultValue:1,min:0,max:1,step:.05}];function Iu(e){if(!e||e==="none")return[];let t=[],n=/([\w-]+)\(([^)]+)\)/g,r;for(;(r=n.exec(e))!==null;){let o=r[1],i=r[2],s=parseFloat(i);isNaN(s)||t.push({name:o,value:s})}return t}function rs(e){return e.length===0?"none":e.map(t=>{var o;let n=Qr.find(i=>i.name===t.name),r=(o=n==null?void 0:n.unit)!=null?o:"";return`${t.name}(${t.value}${r})`}).join(" ")}function da({value:e,onChange:t,accentColor:n,modified:r,panelContentRef:o}){let i=Iu(e),[s,l]=Tu(!1),a=aa(null),d=aa(null);Eu(()=>{if(!s)return;let M=T=>{a.current&&!T.composedPath().includes(a.current)&&l(!1)};return document.addEventListener("mousedown",M,!0),()=>document.removeEventListener("mousedown",M,!0)},[s]);let c=Qr.filter(M=>!i.some(T=>T.name===M.name)),u=M=>{let T=[...i,{name:M.name,value:M.defaultValue}];t(rs(T)),l(!1)},p=M=>{let T=i.filter((x,N)=>N!==M);t(rs(T))},g=(M,T)=>{let x=i.map((N,W)=>W===M?y(f({},N),{value:T}):N);t(rs(x))},w={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},C=ku(M=>{var k;if(!d.current)return{position:"fixed",top:0,left:0};let T=d.current.getBoundingClientRect(),x=d.current.closest('[data-devtools="panel"]'),N=x?x.getBoundingClientRect():{top:0,left:0,bottom:9999},W=(k=o==null?void 0:o.current)==null?void 0:k.getBoundingClientRect(),_=M*24+8,V=N.bottom-T.bottom<_;return y(f({position:"fixed"},V?{bottom:N.bottom-T.top+2-N.top}:{top:T.bottom+2-N.top}),{left:W?W.left+4-N.left:T.left-N.left,width:W?W.width-8:140,zIndex:10001})},[o]),R={backgroundColor:"rgba(255, 255, 255, 0.95)",backdropFilter:"blur(16px)",WebkitBackdropFilter:"blur(16px)",border:"1px solid rgba(0,0,0,0.1)",borderRadius:4,padding:"4px 0",boxShadow:"0 4px 12px rgba(0,0,0,0.1)"},P={display:"block",width:"100%",padding:"4px 10px",border:"none",backgroundColor:"transparent",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#334155",cursor:"pointer",textAlign:"left"},G=M=>In("div",{ref:a,style:f(f({},C(M.length)),R),children:M.map(T=>In("button",{type:"button",onClick:()=>u(T),style:P,onMouseEnter:x=>{x.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:x=>{x.currentTarget.style.backgroundColor="transparent"},children:T.label},T.name))});return i.length===0?Po("div",{children:[Po("div",{style:{display:"flex",alignItems:"center",gap:4},children:[In(ro,{modified:!1,children:In("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:y(f({},w),{color:"#999",cursor:"default"})})}),In("button",{ref:d,type:"button",onClick:()=>l(!s),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:In(ca,{size:12})})]}),s&&G(Qr)]}):Po("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((M,T)=>{let x=Qr.find(N=>N.name===M.name);return x?Po("div",{style:{display:"flex",alignItems:"center",gap:4},children:[In("span",{style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:r?n:"#94a3b8",fontWeight:r?600:400,width:56,flexShrink:0,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:x.label}),In(ro,{modified:r,children:Po("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[In("input",{type:"range",min:x.min,max:x.max,step:x.step,value:M.value,onChange:N=>g(T,parseFloat(N.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(M.value-x.min)/(x.max-x.min)*100}%, rgba(0,0,0,0.1) ${(M.value-x.min)/(x.max-x.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),In("input",{type:"number",min:x.min,max:x.max,step:x.step,value:x.unit==="px"||x.unit==="deg"?Math.round(M.value):Math.round(M.value*100)/100,onChange:N=>g(T,parseFloat(N.target.value)||0),style:y(f({},w),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),x.unit&&In("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:x.unit})]})}),In("button",{type:"button",onClick:()=>p(T),style:{display:"flex",alignItems:"center",justifyContent:"center",width:16,height:16,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:In(Mu,{size:10})})]},M.name):null}),c.length>0&&Po("div",{children:[Po("button",{ref:d,type:"button",onClick:()=>l(!s),style:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",border:"none",borderRadius:2,backgroundColor:"transparent",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#94a3b8",cursor:"pointer"},children:[In(ca,{size:10}),"Add filter"]}),s&&G(c)]})]})}import{useCallback as tr,useEffect as Pu,useRef as ei,useState as ua}from"react";import{AlignHorizontalSpaceAround as Ou,AlignVerticalSpaceAround as Bu,Columns3 as Nu,Grid2x2 as Du,RectangleHorizontal as _u,Rows3 as Hu,UnfoldHorizontal as pa,UnfoldVertical as fa}from"lucide-react";import{useCallback as Lu,useEffect as Ru,useRef as kr}from"react";import{jsx as Au}from"react/jsx-runtime";var is=[0,1,2,4,8,12,16,20,24,28,32];function er({value:e,onChange:t,onPreview:n,onScrubEnd:r,onReset:o,isModified:i,accentColor:s,defaultUnit:l="rem",snapSteps:a,color:d,style:c,children:u}){let p=kr(null),g=kr(null),w=kr(o),C=kr(i),R=kr(!1);w.current=o,C.current=i,Ru(()=>{let G=T=>{let x=g.current;if(!x)return;x.hasMoved=!0,R.current=T.shiftKey;let N=x.unit==="rem"||x.unit==="em"?.1:1;x.accum+=T.movementX*N;let W=Math.max(0,Math.round((x.startValue+x.accum)*10)/10);if(T.shiftKey&&a){let _=x.unit==="rem"||x.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,H=x.unit==="rem"||x.unit==="em"?W*_:W,V=a[a.length-1];for(let k=0;k<a.length-1;k++){let A=a[k],Q=a[k+1];if(H<=(A+Q)/2){V=A;break}if(H<Q){V=Q;break}}H>a[a.length-1]&&(V=Math.round(H/8)*8),W=x.unit==="rem"||x.unit==="em"?Math.round(V/_*1e3)/1e3:V}n==null||n(`${W}${x.unit}`)},M=()=>{let T=g.current;if(!T)return;let x=Math.max(0,Math.round((T.startValue+T.accum)*10)/10);if(R.current&&a){let W=T.unit==="rem"||T.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,_=T.unit==="rem"||T.unit==="em"?x*W:x,H=a[a.length-1];for(let V=0;V<a.length-1;V++){let k=a[V],A=a[V+1];if(_<=(k+A)/2){H=k;break}if(_<A){H=A;break}}_>a[a.length-1]&&(H=Math.round(_/8)*8),x=T.unit==="rem"||T.unit==="em"?Math.round(H/W*1e3)/1e3:H}let N=T.hasMoved&&x!==T.startValue;g.current=null,document.exitPointerLock(),N?t(`${x}${T.unit}`):T.hasMoved?n==null||n(`${T.startValue}${T.unit}`):C.current&&w.current&&w.current(),r==null||r()};return document.addEventListener("mousemove",G),document.addEventListener("mouseup",M),()=>{document.removeEventListener("mousemove",G),document.removeEventListener("mouseup",M)}},[t,n,r]);let P=Lu(G=>{var x;if(G.button!==0)return;G.preventDefault();let M=mo(e),T=M.unit&&M.unit!=="px"?M.unit:l;g.current={startValue:M.num,unit:T,accum:0,hasMoved:!1},(x=p.current)==null||x.requestPointerLock()},[e,l]);return Au("span",{ref:p,onMouseDown:P,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:f({color:i?s||"#3b82f6":d||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize"},c),children:u})}import{Fragment as ss,jsx as Ae,jsxs as tn}from"react/jsx-runtime";function Fu({gridCols:e,gridRows:t,gridModified:n,accentColor:r,onColsChange:o,onRowsChange:i}){return Ae(Pn,{style:{width:100},children:tn("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"8px 4px"},children:[Ae("input",{type:"number",min:1,max:12,value:e,onChange:s=>o(parseInt(s.target.value)||1),style:y(f({},cn),{width:32,textAlign:"center",padding:2})}),Ae("span",{style:{fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:n?r:"#999",fontWeight:n?600:400,fontSize:11,margin:"0 4px"},children:"\xD7"}),Ae("input",{type:"number",min:1,max:12,value:t,onChange:s=>i(parseInt(s.target.value)||1),style:y(f({},cn),{width:32,textAlign:"center",padding:2})})]})})}function ga({element:e,getValue:t,getOriginalValue:n,handleChange:r,isModified:o,onResetProperty:i,isCollapsed:s,onToggle:l,sectionHeaderStyle:a,activeDropdown:d,onDropdownChange:c,panelContentRef:u,accentColor:p,onFieldHover:g,preferredUnit:w,onUnitCycle:C}){let R=c,P=t("display"),G=t("flex-direction"),M=ma(P,G),T=P==="flex"||P==="inline-flex",x=P==="grid",N=T||x,W=t("width"),_=t("height"),H=o("width")?W:jr(e,"width"),V=o("height")?_:jr(e,"height"),k=ls(W,H),A=ls(_,V),Q=t("min-width"),ie=t("max-width"),pe=t("min-height"),be=t("max-height"),me=nr(t("padding")),We=t("gap"),Ce=t("row-gap"),oe=t("column-gap"),_e=t("grid-template-columns"),Ne=t("grid-template-rows"),je=t("overflow"),Fe=_e.split(/\s+/).filter(ne=>ne&&ne!=="none").length||1,Ie=Ne.split(/\s+/).filter(ne=>ne&&ne!=="none").length||1,[ct,wt]=ua(!1),Pe=d!==null,Tt=Pe||ct,nt=Pe?.3:ct?.65:1,Lt=({mode:ne,icon:De,active:ot})=>Ae("button",{type:"button",onClick:()=>ha(ne,r),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:ot?qo(p,.15):"transparent",color:ot?p:"#64748b",cursor:"pointer",fontSize:14},children:De}),Mt=(ne,De,ot)=>{ot==="fixed"?r(ne,De):r(ne,ti(ot,De))},Oe=ne=>{let De=nr(t("padding")),ot=ne||"0";r("padding",`${De.top} ${ot} ${De.bottom} ${ot}`)},h=ne=>{let De=nr(t("padding")),ot=ne||"0";r("padding",`${ot} ${De.right} ${ot} ${De.left}`)},[z,te]=ua({}),se=tr((ne,De)=>ot=>{De(ot),te(Dn=>y(f({},Dn),{[ne]:ot}))},[]),ke=tr(ne=>{te(De=>{let ot=f({},De);return delete ot[ne],ot})},[]),ye=tr(ne=>{let De=nr(t("padding"));Ve(e,"padding",`${De.top} ${ne} ${De.bottom} ${ne}`)},[e,t]),ae=tr(ne=>{let De=nr(t("padding"));Ve(e,"padding",`${ne} ${De.right} ${ne} ${De.left}`)},[e,t]),de=tr(ne=>De=>{Ve(e,ne,De)},[e]),ue=G==="column"||G==="column-reverse",Ye=ne=>ne==="center"?1:ne==="flex-end"||ne==="end"?2:0,qe=Ye(t("justify-content")),st=Ye(t("align-items")),Pt=ue?st:qe,Ct=ue?qe:st,It=ei(null),Gt=ei({x:0,y:0}),Jt=ei({col:Pt,row:Ct});Jt.current={col:Pt,row:Ct};let $t=tr((ne,De)=>{let ot=["flex-start","center","flex-end"];ue?(r("justify-content",ot[De]),r("align-items",ot[ne])):(r("justify-content",ot[ne]),r("align-items",ot[De]))},[ue,r]),on=ei($t);on.current=$t,Pu(()=>{let De=ot=>{let Dn=It.current;if(!Dn||!ot.composedPath().includes(Dn))return;ot.preventDefault(),ot.stopPropagation(),Gt.current.x+=ot.deltaX,Gt.current.y+=ot.deltaY;let{col:Tn,row:Qt}=Jt.current,Mn=!1;Math.abs(Gt.current.x)>=30&&(Tn=Math.max(0,Math.min(2,Tn+(Gt.current.x>0?1:-1))),Gt.current.x=0,Gt.current.y=0,Mn=!0),!Mn&&Math.abs(Gt.current.y)>=30&&(Qt=Math.max(0,Math.min(2,Qt+(Gt.current.y>0?1:-1))),Gt.current.x=0,Gt.current.y=0,Mn=!0),Mn&&(Tn!==Jt.current.col||Qt!==Jt.current.row)&&on.current(Tn,Qt)};return document.addEventListener("wheel",De,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",De,{capture:!0})},[]);let Ot=()=>Ae("div",{ref:It,onMouseEnter:()=>{wt(!0),u.current&&(u.current.style.overflowY="hidden")},onMouseLeave:()=>{wt(!1),u.current&&(u.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:Jn,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(ne=>[0,1,2].map(De=>Ae("button",{type:"button",onClick:()=>$t(De,ne),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:De===Pt&&ne===Ct?Ae("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:De===0?tn(ss,{children:[Ae("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),Ae("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),Ae("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):De===1?tn(ss,{children:[Ae("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),Ae("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),Ae("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):tn(ss,{children:[Ae("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),Ae("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),Ae("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]})}):Ae("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${ne}-${De}`)))}),bn=o("grid-template-columns")||o("grid-template-rows");return tn("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Ae("div",{style:a,children:Ae("span",{children:N?"Auto layout":"Layout"})}),tn("div",{style:{padding:"8px 12px"},children:[tn("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:Jn,borderRadius:2,padding:2,opacity:nt,transition:"opacity 150ms ease"},children:[Ae(Lt,{mode:"block",icon:Ae(_u,{size:16}),active:M==="block"}),Ae(Lt,{mode:"flex-col",icon:Ae(Hu,{size:16}),active:M==="flex-col"}),Ae(Lt,{mode:"flex-row",icon:Ae(Nu,{size:16}),active:M==="flex-row"}),Ae(Lt,{mode:"grid",icon:Ae(Du,{size:16}),active:M==="grid"})]}),tn("div",{style:{display:"flex",gap:4,marginBottom:8},children:[Ae(as,{label:"W",property:"width",cssValue:k==="fixed"?W:`${Math.round(e.getBoundingClientRect().width)}px`,mode:k,onValueChange:ne=>r("width",ne),onModeChange:ne=>{if(ne==="fixed"){let De=e.getBoundingClientRect();r("width",`${Math.round(De.width)}px`)}else r("width",ti(ne,W))},modified:o("width"),dimmed:Pe&&d!=="width",dropdownOpen:d==="width",onDropdownChange:ne=>R(ne?"width":null),panelContentRef:u,accentColor:p,onReset:()=>i("width"),minValue:Q!=="none"&&Q!=="0px"&&Q!=="auto"?Q:"",maxValue:ie!=="none"&&ie!=="auto"?ie:"",onMinChange:ne=>r("min-width",ne||"0"),onMaxChange:ne=>r("max-width",ne||"none"),onMinReset:()=>i("min-width"),onMaxReset:()=>i("max-width"),minModified:o("min-width"),maxModified:o("max-width")}),Ae(as,{label:"H",property:"height",cssValue:A==="fixed"?_:`${Math.round(e.getBoundingClientRect().height)}px`,mode:A,onValueChange:ne=>r("height",ne),onModeChange:ne=>{if(ne==="fixed"){let De=e.getBoundingClientRect();r("height",`${Math.round(De.height)}px`)}else r("height",ti(ne,_))},modified:o("height"),dimmed:Pe&&d!=="height",dropdownOpen:d==="height",onDropdownChange:ne=>R(ne?"height":null),panelContentRef:u,minValue:pe!=="none"&&pe!=="0px"&&pe!=="auto"?pe:"",maxValue:be!=="none"&&be!=="auto"?be:"",onMinChange:ne=>r("min-height",ne||"0"),onMaxChange:ne=>r("max-height",ne||"none"),onMinReset:()=>i("min-height"),onMaxReset:()=>i("max-height"),minModified:o("min-height"),maxModified:o("max-height"),accentColor:p,onReset:()=>i("height")})]}),T&&tn("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8},children:[Ae("div",{style:{opacity:Pe?.3:1,transition:"opacity 150ms ease"},children:Ot()}),tn("div",{style:{flex:1,opacity:nt,transition:"opacity 150ms ease"},children:[Ae("div",{onClick:o("gap")?()=>i("gap"):void 0,title:o("gap")?"Click to reset":void 0,style:{fontSize:9,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:o("gap")?p:"#999",fontWeight:o("gap")?600:400,marginBottom:2,cursor:o("gap")?"pointer":"default"},children:"Gap"}),Ae(Pn,{dimmed:Pe,children:tn("div",{style:{display:"flex",alignItems:"center"},children:[Ae(er,{value:We,onChange:ne=>{ke("gap"),r("gap",ne)},onPreview:se("gap",de("gap")),onScrubEnd:()=>ke("gap"),onReset:()=>i("gap"),isModified:o("gap"),accentColor:p,defaultUnit:w,children:G==="column"||G==="column-reverse"?Ae(fa,{size:12,strokeWidth:o("gap")?2.5:1.5}):Ae(pa,{size:12,strokeWidth:o("gap")?2.5:1.5})}),Ae(Gn,{property:"gap",value:z.gap||We,onChange:ne=>r("gap",ne),isModified:o("gap")||"gap"in z,style:y(f({},cn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:w,onUnitCycle:C})]})})]})]}),x&&tn("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:nt,transition:"opacity 150ms ease"},children:[Ae(Fu,{gridCols:Fe,gridRows:Ie,gridModified:bn,accentColor:p,onColsChange:ne=>r("grid-template-columns",`repeat(${ne}, 1fr)`),onRowsChange:ne=>r("grid-template-rows",`repeat(${ne}, 1fr)`)}),tn("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[Ae(Pn,{dimmed:Pe,children:tn("div",{style:{display:"flex",alignItems:"center"},children:[Ae(er,{value:oe||We,onChange:ne=>{ke("column-gap"),r("column-gap",ne)},onPreview:se("column-gap",de("column-gap")),onScrubEnd:()=>ke("column-gap"),onReset:()=>i("column-gap"),isModified:o("column-gap"),accentColor:p,defaultUnit:w,children:Ae(pa,{size:12,strokeWidth:o("column-gap")?2.5:1.5})}),Ae(Gn,{property:"column-gap",value:z["column-gap"]||oe||We,onChange:ne=>r("column-gap",ne),isModified:o("column-gap")||"column-gap"in z,placeholder:"col",style:y(f({},cn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:w,onUnitCycle:C})]})}),Ae(Pn,{dimmed:Pe,children:tn("div",{style:{display:"flex",alignItems:"center"},children:[Ae(er,{value:Ce||We,onChange:ne=>{ke("row-gap"),r("row-gap",ne)},onPreview:se("row-gap",de("row-gap")),onScrubEnd:()=>ke("row-gap"),onReset:()=>i("row-gap"),isModified:o("row-gap"),accentColor:p,defaultUnit:w,children:Ae(fa,{size:12,strokeWidth:o("row-gap")?2.5:1.5})}),Ae(Gn,{property:"row-gap",value:z["row-gap"]||Ce||We,onChange:ne=>r("row-gap",ne),isModified:o("row-gap")||"row-gap"in z,placeholder:"row",style:y(f({},cn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:w,onUnitCycle:C})]})})]})]}),N&&tn("div",{onMouseEnter:()=>g==null?void 0:g("padding"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:nt,transition:"opacity 150ms ease"},children:[Ae(Pn,{style:{flex:1},dimmed:Pe,children:tn("div",{style:{display:"flex",alignItems:"center"},children:[Ae(er,{value:me.left,onChange:ne=>{ke("padding-h"),Oe(ne)},onPreview:se("padding-h",ye),onScrubEnd:()=>ke("padding-h"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:p,defaultUnit:w,snapSteps:is,children:Ae(Ou,{size:12,strokeWidth:o("padding")?2.5:1.5})}),Ae(Gn,{property:"padding",value:z["padding-h"]||me.left,onChange:ne=>Oe(ne),isModified:o("padding")||"padding-h"in z,placeholder:"H pad",style:y(f({},cn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:w,onUnitCycle:C})]})}),Ae(Pn,{style:{flex:1},dimmed:Pe,children:tn("div",{style:{display:"flex",alignItems:"center"},children:[Ae(er,{value:me.top,onChange:ne=>{ke("padding-v"),h(ne)},onPreview:se("padding-v",ae),onScrubEnd:()=>ke("padding-v"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:p,defaultUnit:w,snapSteps:is,children:Ae(Bu,{size:12,strokeWidth:o("padding")?2.5:1.5})}),Ae(Gn,{property:"padding",value:z["padding-v"]||me.top,onChange:ne=>h(ne),isModified:o("padding")||"padding-v"in z,placeholder:"V pad",style:y(f({},cn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:w,onUnitCycle:C})]})})]}),tn("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:nt,transition:"opacity 150ms ease"},children:[Ae("input",{type:"checkbox",checked:je==="hidden",onChange:ne=>r("overflow",ne.target.checked?"hidden":"visible"),style:{margin:0,accentColor:p}}),"Clip content"]})]})]})}import{AlignCenter as $u,AlignJustify as zu,AlignLeft as Wu,AlignRight as ju,Baseline as Yu,ChevronDown as Gu,WholeWord as Ju}from"lucide-react";import{jsx as kt,jsxs as io}from"react/jsx-runtime";var ya={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function ba({element:e,getValue:t,handleChange:n,isModified:r,onResetProperty:o,isCollapsed:i,onToggle:s,sectionHeaderStyle:l,accentColor:a,colorVariables:d,activeColorDropdown:c,onColorDropdownChange:u,panelContentRef:p,preferredUnit:g,onUnitCycle:w}){var A;let C=t("font-family"),R=t("font-size"),P=t("font-weight"),G=t("line-height"),M=t("letter-spacing"),T=t("text-align"),x=t("color"),N=String(P),W=ya[N]||N,_=vr(e,x),H=x.includes("var(")?null:Sr(_,d),V=({align:Q,icon:ie})=>{let pe=T===Q;return kt("button",{type:"button",onClick:()=>n("text-align",Q),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:pe?qo(a,.15):"transparent",color:pe?a:"#64748b",cursor:"pointer"},children:ie})},k=((A=C.split(",")[0])==null?void 0:A.trim().replace(/^["']|["']$/g,""))||"System";return io("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[kt("div",{style:l,children:kt("span",{children:"Typography"})}),io("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[kt(Pn,{children:io("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[kt("input",{type:"text",value:C,onChange:Q=>n("font-family",Q.target.value),style:y(f({},cn),{flex:1,minWidth:0,padding:0,fontWeight:r("font-family")?600:400,color:r("font-family")?a:"inherit"}),title:C}),kt(Gu,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),io("div",{style:{display:"flex",gap:4},children:[kt(Pn,{style:{flex:1},children:kt("select",{value:N,onChange:Q=>n("font-weight",Q.target.value),style:y(f({},cn),{padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:r("font-weight")?600:400,color:r("font-weight")?a:"inherit"}),children:Object.entries(ya).map(([Q,ie])=>kt("option",{value:Q,children:ie},Q))})}),kt(Pn,{style:{flex:1},children:kt("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:kt(Gn,{property:"font-size",value:R,onChange:Q=>n("font-size",Q),isModified:r("font-size"),min:1,max:999,style:y(f({},cn),{padding:"6px 8px",paddingRight:24,fontWeight:r("font-size")?600:400,color:r("font-size")?a:"inherit"}),unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999"},preferredUnit:g,onUnitCycle:w})})})]}),io("div",{style:{display:"flex",gap:4},children:[kt(Pn,{style:{flex:1},children:io("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[kt(Yu,{size:12,style:{color:r("line-height")?a:"#999",flexShrink:0}}),kt(Gn,{property:"line-height",value:G,onChange:Q=>n("line-height",Q),isModified:r("line-height"),step:.1,min:0,placeholder:"Auto",style:y(f({},cn),{flex:1,minWidth:0,padding:0,fontWeight:r("line-height")?600:400,color:r("line-height")?a:"inherit"}),showUnit:!1})]})}),kt(Pn,{style:{flex:1},children:io("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[kt(Ju,{size:12,style:{color:r("letter-spacing")?a:"#999",flexShrink:0}}),kt(Gn,{property:"letter-spacing",value:M,onChange:Q=>n("letter-spacing",Q),isModified:r("letter-spacing"),step:.1,placeholder:"\u2014",style:y(f({},cn),{flex:1,minWidth:0,padding:0,fontWeight:r("letter-spacing")?600:400,color:r("letter-spacing")?a:"inherit"}),showUnit:!1})]})})]}),io("div",{style:{display:"flex",gap:2,backgroundColor:Jn,borderRadius:2,padding:2},children:[kt(V,{align:"left",icon:kt(Wu,{size:14})}),kt(V,{align:"center",icon:kt($u,{size:14})}),kt(V,{align:"right",icon:kt(ju,{size:14})}),kt(V,{align:"justify",icon:kt(zu,{size:14})})]}),io("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[kt("span",{onClick:r("color")?()=>o("color"):void 0,title:r("color")?"Click to reset":void 0,style:{fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:r("color")?a:"#64748b",fontWeight:r("color")?600:400,cursor:r("color")?"pointer":"default",width:40,flexShrink:0},children:"Color"}),kt("div",{style:{flex:1,minWidth:0},children:kt(cs,{value:x,resolvedValue:_,colorVariables:d,matchingVariable:H,onChange:Q=>n("color",Q),accentColor:a,modified:r("color"),panelContentRef:p,isDropdownOpen:c==="color",onDropdownChange:Q=>u(Q?"color":null)})})]})]})]})}import{Fragment as qu,jsx as ve,jsxs as At}from"react/jsx-runtime";var va=[{name:"Background",properties:[{property:"background-color",label:"Color",type:"color"},{property:"opacity",label:"Opacity",type:"number",step:.1,min:0,max:1}]},{name:"Borders",properties:[{property:"border-width",label:"Width",type:"number",min:0,max:20},{property:"border-color",label:"Color",type:"color"},{property:"border-radius",label:"Radius",type:"number",min:0,max:100},{property:"border-style",label:"Style",type:"select",options:["none","solid","dashed","dotted","double"]}]},{name:"Effects",properties:[{property:"box-shadow",label:"Box Shadow",type:"text"},{property:"backdrop-filter",label:"Backdrop Filter",type:"backdrop-filter"},{property:"transform",label:"Transform",type:"text"}]}];function Ku(e,t){let n=t.trim().toLowerCase();switch(e){case"opacity":return n==="1";case"border-width":return n==="0px"||n==="0"||n==="medium";case"border-radius":return n==="0px"||n==="0";case"border-style":return n==="none";case"box-shadow":return n==="none";case"backdrop-filter":return n==="none"||n==="";case"letter-spacing":return n==="normal"||n==="0px"||n==="0";case"background-color":return n==="rgba(0, 0, 0, 0)"||n==="transparent";default:return!1}}function ls(e,t){return!t||e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":"fixed"}function ti(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=mo(t);if(typeof n.num=="number"&&!isNaN(n.num)){let r=n.unit==="%"?"px":n.unit||"px";return`${n.num}${r}`}return"auto"}}}function nr(e){let t=e.split(/\s+/).filter(Boolean);return t.length===1?{top:t[0],right:t[0],bottom:t[0],left:t[0]}:t.length===2?{top:t[0],right:t[1],bottom:t[0],left:t[1]}:t.length===3?{top:t[0],right:t[1],bottom:t[2],left:t[1]}:t.length>=4?{top:t[0],right:t[1],bottom:t[2],left:t[3]}:{top:"0px",right:"0px",bottom:"0px",left:"0px"}}function ma(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function ha(e,t){switch(e){case"block":t("display","block");break;case"flex-row":t("display","flex"),t("flex-direction","row");break;case"flex-col":t("display","flex"),t("flex-direction","column");break;case"grid":t("display","grid");break}}var Jn="rgba(0, 0, 0, 0.04)",cn={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};function as({label:e,property:t,cssValue:n,mode:r,onValueChange:o,onModeChange:i,modified:s,dimmed:l,dropdownOpen:a,onDropdownChange:d,panelContentRef:c,accentColor:u="#3b82f6",onReset:p,minValue:g,maxValue:w,onMinChange:C,onMaxChange:R,onMinReset:P,onMaxReset:G,minModified:M,maxModified:T}){let x=mo(n),N=s?x.unit||Qo(t):Qo(t),W=!s&&x.unit&&x.unit!==N?os(x.num,N):x.num,[_,H]=dn(!1),[V,k]=dn(String(W)),[A,Q]=dn(!1),ie=Ln(null),pe=Ln(null),be=Ln(null),me=Ln(!1);$n(()=>{_||k(String(W))},[W,_]),$n(()=>{if(!a)return;let Ie=wt=>{pe.current&&!wt.composedPath().includes(pe.current)&&be.current&&!wt.composedPath().includes(be.current)&&(d==null||d(!1))},ct=wt=>{wt.key==="Escape"&&(d==null||d(!1))};return document.addEventListener("mousedown",Ie),document.addEventListener("keydown",ct),()=>{document.removeEventListener("mousedown",Ie),document.removeEventListener("keydown",ct)}},[a,d]),$n(()=>{_&&ie.current&&(ie.current.focus(),ie.current.select())},[_]);let We=()=>{let Ie=Zr(V,t,n,s);o(Ie||`${Math.max(0,parseFloat(V)||0)}${N}`),H(!1)},Ce=()=>{if(me.current){me.current=!1;return}We()},oe=Ie=>{if(Ie.key==="Enter"){We();return}if(Ie.key==="Escape"){me.current=!0,k(String(W)),H(!1);return}if(Ie.key==="ArrowUp"||Ie.key==="ArrowDown"){Ie.preventDefault();let ct=Ie.key==="ArrowUp"?1:-1,wt=Ie.shiftKey?8:Ie.altKey?.1:1,Pe=parseFloat(V)||0,Tt=Math.round(Math.max(0,Pe+ct*wt)*1e3)/1e3;k(String(Tt)),o(`${Tt}${N}`)}},_e={fixed:"Fixed",hug:"Hug",fill:"Fill"},Ne={fixed:ve(xa,{size:12}),hug:ve(Vu,{size:12}),fill:ve(xa,{size:12})},je=()=>{d==null||d(!a)},Fe=()=>{if(!be.current||!(c!=null&&c.current))return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let Ie=be.current.getBoundingClientRect(),ct=c.current.getBoundingClientRect(),wt=c.current.closest('[data-devtools="panel"]'),Pe=wt?wt.getBoundingClientRect():{top:0,left:0};return{position:"fixed",top:Ie.bottom+4-Pe.top,left:ct.left+4-Pe.left,width:ct.width-8}};return At("div",{ref:be,onMouseEnter:()=>Q(!0),onMouseLeave:()=>Q(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:_?u:A?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Jn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:l?.3:1},children:[ve("span",{onClick:s&&p?p:void 0,title:s?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:s?u:"#999",fontWeight:s?600:400,padding:"0 8px",flexShrink:0,cursor:s?"pointer":"default"},children:e}),r==="fixed"?_?ve("input",{ref:ie,type:"text",inputMode:"numeric",value:V,onChange:Ie=>k(Ie.target.value),onKeyDown:oe,onBlur:Ce,style:y(f({},cn),{flex:1,minWidth:0,padding:"4px 2px"})}):ve("span",{onClick:()=>H(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:W}):ve("span",{style:{flex:1}}),At("button",{type:"button",onClick:je,style:{display:"flex",alignItems:"center",gap:2,padding:"4px 8px",border:"none",outline:"none",backgroundColor:"transparent",color:"#999",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"pointer",flexShrink:0},children:[_e[r],ve(ds,{size:12})]}),a&&At("div",{ref:pe,style:y(f({},Fe()),{backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:12,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'}),children:[At("button",{type:"button",onClick:()=>{i("fixed"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="fixed"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="fixed"?600:400,cursor:"pointer",textAlign:"left"},children:[Ne.fixed,At("span",{children:["Fixed ",t," (",n,")"]}),r==="fixed"&&ve(ni,{size:14,style:{marginLeft:"auto"}})]}),At("button",{type:"button",onClick:()=>{i("hug"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="hug"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="hug"?600:400,cursor:"pointer",textAlign:"left"},children:[Ne.hug,ve("span",{children:"Hug contents"}),r==="hug"&&ve(ni,{size:14,style:{marginLeft:"auto"}})]}),At("button",{type:"button",onClick:()=>{i("fill"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="fill"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="fill"?600:400,cursor:"pointer",textAlign:"left"},children:[Ne.fill,ve("span",{children:"Fill container"}),r==="fill"&&ve(ni,{size:14,style:{marginLeft:"auto"}})]}),ve("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),At("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[At("div",{style:{display:"flex",alignItems:"center",backgroundColor:Jn,borderRadius:2,padding:"4px 8px"},children:[ve("span",{onClick:M?Ie=>{Ie.stopPropagation(),P==null||P()}:void 0,title:M?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:M?u:"#999",fontWeight:M?600:400,marginRight:8,flexShrink:0,cursor:M?"pointer":"default"},children:"Min"}),ve("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:Ie=>C==null?void 0:C(Ie.target.value),onClick:Ie=>Ie.stopPropagation(),style:y(f({},cn),{flex:1,minWidth:0,padding:0,textAlign:"right",color:M?u:"inherit",fontWeight:M?600:400})})]}),At("div",{style:{display:"flex",alignItems:"center",backgroundColor:Jn,borderRadius:2,padding:"4px 8px"},children:[ve("span",{onClick:T?Ie=>{Ie.stopPropagation(),G==null||G()}:void 0,title:T?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:T?u:"#999",fontWeight:T?600:400,marginRight:8,flexShrink:0,cursor:T?"pointer":"default"},children:"Max"}),ve("input",{type:"text",value:w||"",placeholder:"\u2014",onChange:Ie=>R==null?void 0:R(Ie.target.value),onClick:Ie=>Ie.stopPropagation(),style:y(f({},cn),{flex:1,minWidth:0,padding:0,textAlign:"right",color:T?u:"inherit",fontWeight:T?600:400})})]})]})]})]})}function Pn({children:e,style:t,dimmed:n}){let[r,o]=dn(!1);return ve("div",{onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),style:f({position:"relative",borderRadius:2,border:"1px solid",borderColor:r?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Jn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:n?.3:1},t),children:e})}function ro({children:e}){let[t,n]=dn(!1);return ve("div",{onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:t?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Jn,transition:"border-color 100ms ease"},children:e})}function Gn({property:e,value:t,onChange:n,isModified:r=!1,step:o=1,min:i,max:s,style:l,placeholder:a,showUnit:d=!0,unitStyle:c,preferredUnit:u,onUnitCycle:p}){let g=mo(t),w=Qo(e),C=qr[e],P=u&&C&&C.includes(u)?u:w,G=r&&g.unit||P,M=!r&&g.unit&&g.unit!==G?os(g.num,G):g.num,[T,x]=dn(!1),[N,W]=dn(""),_=Ce=>{x(!0),W(String(M||"")),requestAnimationFrame(()=>Ce.target.select())},H=()=>{if(x(!1),N.trim()){let Ce=Zr(N,e,t,r);Ce&&n(Ce)}},V=Ce=>{let oe=Ce.target.value;W(oe);let _e=oe.trim(),Ne=_e.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),je=_e.match(/^(-?[\d.]+)$/);if(Ne){let Fe=parseFloat(Ne[1]);isNaN(Fe)||n(`${Fe}${Ne[2].toLowerCase()}`)}else if(je){let Fe=parseFloat(je[1]);isNaN(Fe)||n(`${Fe}${G}`)}},k=Ce=>{if(Ce.key==="Enter"){if(N.trim()){let oe=Zr(N,e,t,r);oe&&n(oe)}Ce.target.blur();return}if(Ce.key==="ArrowUp"||Ce.key==="ArrowDown"){Ce.preventDefault();let oe=Ce.shiftKey?10:Ce.altKey?.1:1,_e=(Ce.key==="ArrowUp"?1:-1)*o*oe,Ne=parseFloat(N)||M||0,je=Math.round((Ne+_e)*1e3)/1e3;i!==void 0&&(je=Math.max(i,je)),s!==void 0&&(je=Math.min(s,je)),W(String(je)),n(`${je}${G}`)}},A=/^-?[\d.]/.test(t.trim()),Q=T?N:A?String(M):"",pe=T&&/\s*(rem|em|px|%)\s*$/i.test(N)?"":G,be=p&&(pe==="rem"||pe==="px"),me={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},We=y(f({},c!=null?c:me),{pointerEvents:"auto",cursor:"pointer"});return At(qu,{children:[ve("input",{type:"text",inputMode:"decimal",value:Q,onFocus:_,onBlur:H,onChange:V,onKeyDown:k,placeholder:a,style:l}),d&&pe&&ve("span",{style:be?We:c!=null?c:me,onClick:be?p:void 0,title:be?"Click to switch units":void 0,children:pe})]})}function cs({value:e,resolvedValue:t,colorVariables:n,matchingVariable:r,onChange:o,accentColor:i="#3b82f6",modified:s,panelContentRef:l,isDropdownOpen:a,onDropdownChange:d}){let[c,u]=dn(!1),p=!e.includes("var(")&&r?r.usage:e,[g,w]=dn(p),[C,R]=dn(!1),[P,G]=dn(!1),[M,T]=dn(!1),x=Ln(null),N=Ln(null),W=Ln(null),_=a!==void 0?a:C,H=d||R,V=Xn(()=>{if(!W.current)return{position:"fixed",top:0,left:0,width:200};let oe=W.current.getBoundingClientRect(),_e=W.current.closest('[data-devtools="panel"]'),Ne=_e?_e.getBoundingClientRect():{top:0,left:0};if(l!=null&&l.current){let je=l.current.getBoundingClientRect();return{position:"fixed",top:oe.bottom+4-Ne.top,left:je.left+4-Ne.left,width:je.width-8}}return{position:"fixed",top:oe.bottom+4-Ne.top,left:oe.left-Ne.left,width:oe.width}},[l]);$n(()=>{if(!c){let oe=!e.includes("var(")&&r?r.usage:e;w(oe)}},[e,c,r]),$n(()=>{if(!_&&!P)return;let oe=Ne=>{W.current&&!Ne.composedPath().includes(W.current)&&(H(!1),G(!1))},_e=Ne=>{Ne.key==="Escape"&&(H(!1),G(!1))};return document.addEventListener("mousedown",oe),document.addEventListener("keydown",_e),()=>{document.removeEventListener("mousedown",oe),document.removeEventListener("keydown",_e)}},[_,P]),$n(()=>{c&&x.current&&(x.current.focus(),x.current.select())},[c]);let k=oi(()=>{if(!g||g.startsWith("#")||g.startsWith("rgb")||g.startsWith("hsl")||g.startsWith("oklch"))return[];let oe=g.toLowerCase();return n.filter(_e=>_e.name.toLowerCase().includes(oe)||_e.usage.toLowerCase().includes(oe)).slice(0,8)},[g,n]),A=()=>{o(g),u(!1),G(!1)},Q=oe=>{w(oe),oe.includes("var")||oe.includes("--")||oe.length>0&&!oe.startsWith("#")?G(!0):G(!1)},ie=oe=>{w(oe.usage),o(oe.usage),H(!1),G(!1),u(!1)},pe=()=>{setTimeout(()=>{!_&&!P&&A()},150)},be=oe=>{oe.key==="Enter"?A():oe.key==="Escape"&&(w(e),u(!1),G(!1))},me=oi(()=>{let oe=t.trim().toLowerCase();if(oe.startsWith("#"))return oe.length===4?`#${oe[1]}${oe[1]}${oe[2]}${oe[2]}${oe[3]}${oe[3]}`:oe.slice(0,7);let _e=oe.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(_e){let je=parseInt(_e[1],10).toString(16).padStart(2,"0"),Fe=parseInt(_e[2],10).toString(16).padStart(2,"0"),Ie=parseInt(_e[3],10).toString(16).padStart(2,"0");return`#${je}${Fe}${Ie}`}let Ne=oe.match(/oklch\(\s*([\d.]+)/);if(Ne){let je=Math.max(0,Math.min(1,parseFloat(Ne[1]))),Fe=Math.round(je*255).toString(16).padStart(2,"0");return`#${Fe}${Fe}${Fe}`}return"#000000"},[t]),We=oe=>{let _e=oe.target.value;w(_e),o(_e)},Ce=e.includes("var(");return At("div",{ref:W,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:c?i:M?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Jn,transition:"border-color 100ms ease",overflow:"hidden"},children:[At("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[At("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[ve("input",{type:"color",value:me,onChange:We,style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),ve("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),c?ve("input",{ref:x,type:"text",value:g,onChange:oe=>Q(oe.target.value),onKeyDown:be,onBlur:pe,style:y(f({},cn),{flex:1,minWidth:0})}):ve("span",{onClick:()=>u(!0),style:{flex:1,minWidth:0,padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:s?i:"inherit"},title:p,children:p}),n.length>0&&ve("button",{type:"button",onClick:()=>H(!_),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:ve(ds,{size:12})})]}),P&&k.length>0&&ve("div",{style:y(f({},V()),{backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,maxHeight:200,overflowY:"auto",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'}),children:k.map(oe=>At("button",{type:"button",onClick:()=>ie(oe),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:"transparent",color:"#1e293b",cursor:"pointer",textAlign:"left",fontSize:12},children:[ve("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:oe.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),ve("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:oe.name})]},oe.name))}),_&&ve("div",{ref:N,style:y(f({},V()),{backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,maxHeight:280,overflowY:"auto",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'}),children:n.map(oe=>At("button",{type:"button",onClick:()=>ie(oe),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:p===oe.usage||e===oe.usage?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:p===oe.usage||e===oe.usage?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[ve("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:oe.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),ve("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:oe.name}),(p===oe.usage||e===oe.usage)&&ve(ni,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},oe.name))})]})}function Sa({element:e,elementInfo:t,selector:n,styleModifications:r,dispatch:o,onClose:i,onHover:s,accentColor:l="#3b82f6",toolbarRef:a}){var Mt,Oe;let d=Ln(null),c=Ln(null),[u,p]=dn(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch(h){return!1}});$n(()=>{if(u)return;let h=setTimeout(()=>p(!0),50);return()=>clearTimeout(h)},[u]);let[g,w]=dn(null),[C,R]=dn(null),P=g!==null||C!==null,[G,M]=dn("rem"),T=Xn(()=>{M(h=>h==="rem"?"px":"rem")},[]),x=Ln(new Map),[N,W]=dn(""),_=oi(()=>ji(),[]);$n(()=>{let h=z=>{var se;if(z.key!=="Escape")return;let te=document.activeElement;te&&((se=d.current)!=null&&se.contains(te))||i()};return window.addEventListener("keydown",h),()=>window.removeEventListener("keydown",h)},[i]);let H=Ln({top:0,left:0,maxHeight:400}),[,V]=dn(0),k="devtools-panel-position",A=Ln({x:0,y:0}),Q=Ln(null),ie=Ln(!1);$n(()=>{try{let h=localStorage.getItem(k);if(h){let z=JSON.parse(h);typeof z.top=="number"&&typeof z.left=="number"&&(ie.current=!0,H.current=y(f({},H.current),{top:z.top,left:z.left}))}}catch(h){}},[]),$n(()=>{let h=te=>{var Jt;let se=Q.current;if(!se)return;let ke=se.startOffsetX+(te.clientX-se.startX),ye=se.startOffsetY+(te.clientY-se.startY),ae=280,de=16,ue=Math.max(de,Math.min(window.innerWidth-ae-de,H.current.left+ke)),Ye=Math.max(de,H.current.top+ye);A.current={x:ue-H.current.left,y:Ye-H.current.top};let qe=d.current,st=qe==null?void 0:qe.parentElement;if(!st)return;st.style.top=`${Ye}px`,st.style.left=`${ue}px`;let Pt=(Jt=a==null?void 0:a.current)==null?void 0:Jt.getBoundingClientRect(),Ct=window.innerHeight-16;Pt&&ue+ae>Pt.left&&(Ct=Pt.top-8);let It=Math.max(0,Ye),Gt=Math.max(200,Ct-It);qe&&(qe.style.maxHeight=`${Gt}px`)},z=()=>{if(!Q.current)return;let te=H.current.top+A.current.y,se=H.current.left+A.current.x;H.current=y(f({},H.current),{top:te,left:se}),A.current={x:0,y:0},ie.current=!0;try{localStorage.setItem(k,JSON.stringify({top:te,left:se}))}catch(ke){}Q.current=null};return window.addEventListener("mousemove",h),window.addEventListener("mouseup",z),()=>{window.removeEventListener("mousemove",h),window.removeEventListener("mouseup",z)}},[]);let pe=Xn(h=>{h.button!==0||h.target.closest("button")||(h.preventDefault(),Q.current={startX:h.clientX,startY:h.clientY,startOffsetX:A.current.x,startOffsetY:A.current.y})},[]);$n(()=>{A.current={x:0,y:0};let h=(se=!1)=>{var Ct;let ke=d.current,ye=280,ae=8,de,ue;if(ie.current)de=H.current.top,ue=H.current.left;else{let It=e.getBoundingClientRect();ue=It.right+ae,de=It.top,ue+ye>window.innerWidth-ae&&(ue=It.left-ye-ae),ue<ae&&(ue=Math.max(ae,(window.innerWidth-ye)/2))}let Ye=(Ct=a==null?void 0:a.current)==null?void 0:Ct.getBoundingClientRect(),qe=window.innerHeight-16;Ye&&ue+ye>Ye.left&&(qe=Ye.top-ae);let st=Math.max(0,de),Pt=Math.max(200,qe-st);if(H.current={top:de,left:ue,maxHeight:Pt},se&&ke){let It=ke.parentElement;It&&!ie.current&&(It.style.top=`${de+A.current.y}px`,It.style.left=`${ue+A.current.x}px`),ke.style.maxHeight=`${Pt}px`}else V(It=>It+1)};h(!1);let z=()=>h(!0),te=()=>h(!1);return window.addEventListener("scroll",z,{passive:!0}),window.addEventListener("resize",te,{passive:!0}),()=>{window.removeEventListener("scroll",z),window.removeEventListener("resize",te)}},[e]),$n(()=>{let h=d.current;if(!h)return;let z=te=>{let se=c.current;if(!se){te.preventDefault();return}let{scrollTop:ke,scrollHeight:ye,clientHeight:ae}=se,de=ke<=0&&te.deltaY<0,ue=ke+ae>=ye&&te.deltaY>0;(de||ue)&&te.preventDefault()};return h.addEventListener("wheel",z,{passive:!1}),()=>h.removeEventListener("wheel",z)},[]);let be=oi(()=>r.find(h=>h.selector===n),[r,n]),me=Xn(h=>{let z=be==null?void 0:be.changes.find(te=>te.property===h);if(z)return z.modified;if(h.includes("color")){let te=Hi(e,h);if(te&&te.includes("var("))return te}return yr(e,h)},[e,be]),We=Xn(h=>{if(x.current.has(h))return x.current.get(h);let z=be==null?void 0:be.changes.find(se=>se.property===h);if(z)return z.original;let te=yr(e,h);return x.current.set(h,te),te},[e,be]),Ce=Xn((h,z)=>{let te=We(h);Ve(e,h,z),h==="backdrop-filter"&&Ve(e,"-webkit-backdrop-filter",z),o({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:h,original:te,modified:z}})},[e,n,t,o,We]),oe=Xn(()=>{Wi(n,r);let h=r.find(z=>z.selector===n);if(h)for(let z of h.changes)o({type:"CLEAR_STYLE",payload:{selector:n,property:z.property}});x.current.clear()},[n,r,o]),_e=Xn(h=>{let z=r.find(se=>se.selector===n);z!=null&&z.changes.find(se=>se.property===h)&&e instanceof HTMLElement&&(e.style.removeProperty(h),o({type:"CLEAR_STYLE",payload:{selector:n,property:h}}),x.current.delete(h))},[e,n,r,o]),Ne=Xn(()=>{let h=N.split(";").map(z=>z.trim()).filter(z=>z);for(let z of h){let te=z.indexOf(":");if(te>0){let se=z.slice(0,te).trim(),ke=z.slice(te+1).trim();se&&ke&&Ce(se,ke)}}W("")},[N,Ce]),je=Xn(h=>{var z;return(z=be==null?void 0:be.changes.some(te=>te.property===h))!=null?z:!1},[be]),Fe=h=>{var ye;let z=me(h.property),te=je(h.property),se=!te&&Ku(h.property,z),ke={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};if(se&&h.type!=="backdrop-filter")return ve(ro,{modified:!1,children:ve("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:ae=>Ce(h.property,ae.target.value),style:y(f({},ke),{color:"#999"})})});switch(h.type){case"color":{let ae=vr(e,z),de=z.includes("var(")?null:Sr(ae,_);return ve(cs,{value:z,resolvedValue:ae,colorVariables:_,matchingVariable:de,onChange:ue=>Ce(h.property,ue),accentColor:l,modified:te,panelContentRef:c,isDropdownOpen:C===h.property,onDropdownChange:ue=>R(ue?h.property:null)})}case"number":{if(!!qr[h.property])return ve(ro,{modified:te,children:ve(Gn,{property:h.property,value:z,onChange:ue=>Ce(h.property,ue),isModified:te,min:h.min,max:h.max,step:h.step||1,style:y(f({},ke),{paddingRight:32}),unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999"},preferredUnit:G,onUnitCycle:T})});let{num:de}=mo(z);return ve(ro,{modified:te,children:ve("input",{type:"number",value:de,min:h.min,max:h.max,step:h.step||1,onChange:ue=>Ce(h.property,ue.target.value),style:ke})})}case"select":return ve(ro,{modified:te,children:At("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[ve("select",{value:z,onChange:ae=>Ce(h.property,ae.target.value),style:y(f({},ke),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(ye=h.options)==null?void 0:ye.map(ae=>ve("option",{value:ae,children:ae},ae))}),ve("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:ve(ds,{size:12})})]})});case"spacing":return ve(ro,{modified:te,children:ve("input",{type:"text",value:z,onChange:ae=>Ce(h.property,ae.target.value),placeholder:"e.g., 10px or 10px 20px",style:ke})});case"backdrop-filter":return ve(da,{value:z,onChange:ae=>Ce(h.property,ae),accentColor:l,modified:te,panelContentRef:c});default:return ve(ro,{modified:te,children:ve("input",{type:"text",value:z,onChange:ae=>Ce(h.property,ae.target.value),style:ke})})}},Ie=(Mt=be==null?void 0:be.changes.length)!=null?Mt:0,ct=(Oe=be==null?void 0:be.captured)!=null?Oe:!1,wt=y(f({position:"fixed",top:H.current.top,left:H.current.left,width:280,maxHeight:H.current.maxHeight,backgroundColor:"rgba(255, 255, 255, 0.85)",backdropFilter:"blur(32px)",WebkitBackdropFilter:"blur(32px)"},go),{zIndex:1e4,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,overflow:"hidden",display:"flex",flexDirection:"column",opacity:u?1:0,transition:"opacity 150ms ease"}),Pe={display:"flex",alignItems:"center",justifyContent:"space-between",margin:"3px 3px 0",padding:"8px 7px 8px 12px",borderBottom:"1px solid rgba(0,0,0,0.1)",backgroundColor:"#f8fafc",cursor:Q.current?"grabbing":"grab"},Tt={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 12px 6px",userSelect:"none",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:600,color:"#475569"},nt={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},Lt={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return ve("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:H.current.top+A.current.y,left:H.current.left+A.current.x,zIndex:1e4,pointerEvents:"none"},children:At("div",{ref:d,"data-devtools":"panel",style:y(f({},wt),{position:"relative",top:0,left:0,zIndex:0,pointerEvents:"auto"}),onMouseEnter:()=>s==null?void 0:s("element"),onMouseLeave:()=>s==null?void 0:s(null),children:[At("div",{style:Pe,onMouseDown:pe,children:[At("div",{style:{display:"flex",alignItems:"center",gap:8,overflow:"hidden"},children:[ve("span",{style:{fontWeight:600,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t.tagName}),Ie>0&&ve("span",{style:{backgroundColor:ct?"#999999":l,color:"#fff",fontSize:9,padding:"1px 4px",borderRadius:2},children:Ie})]}),At("div",{style:{display:"flex",gap:4},children:[Ie>0&&ve("button",{type:"button",onClick:oe,title:"Reset all changes",style:{display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,border:"none",background:"none",cursor:"pointer",color:"#64748b",borderRadius:2},children:ve(Uu,{size:14})}),ve("button",{type:"button",onClick:i,title:"Close",style:{display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,border:"none",background:"none",cursor:"pointer",color:"#64748b",borderRadius:2},children:ve(Xu,{size:14})})]})]}),At("div",{ref:c,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[ve("div",{style:{opacity:C?.3:1,transition:"opacity 150ms ease"},children:ve(ga,{element:e,getValue:me,getOriginalValue:We,handleChange:Ce,isModified:je,onResetProperty:_e,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:Tt,activeDropdown:g,onDropdownChange:w,panelContentRef:c,accentColor:l,onFieldHover:s,preferredUnit:G,onUnitCycle:T})}),ve("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:ve(ba,{element:e,getValue:me,handleChange:Ce,isModified:je,onResetProperty:_e,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:Tt,accentColor:l,colorVariables:_,activeColorDropdown:C,onColorDropdownChange:R,panelContentRef:c,preferredUnit:G,onUnitCycle:T})}),va.map((h,z)=>{let te=z===va.length-1,se=C&&h.properties.some(ye=>ye.property===C);return At("div",{style:{borderBottom:te?"none":"1px solid rgba(0,0,0,0.08)",opacity:P&&!se?.3:1,transition:"opacity 150ms ease"},children:[ve("div",{style:Tt,children:ve("span",{children:h.name})}),ve("div",{style:{padding:"4px 0"},children:h.properties.map(ye=>{let ae=je(ye.property),de=se&&ye.property!==C;return At("div",{style:y(f({},nt),{opacity:de?.3:1,transition:"opacity 150ms ease"}),children:[ve("span",{onClick:ae?()=>_e(ye.property):void 0,title:ae?"Click to reset":void 0,style:y(f({},Lt),{color:ae?l:"#64748b",fontWeight:ae?600:400,cursor:ae?"pointer":"default"}),children:ye.label}),ve("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:Fe(ye)})]},ye.property)})})]},h.name)}),At("div",{style:{opacity:P?.3:1,transition:"opacity 150ms ease"},children:[ve("div",{style:Tt,children:ve("span",{children:"Raw CSS"})}),At("div",{style:{padding:"8px 12px"},children:[ve("textarea",{value:N,onChange:h=>W(h.target.value),placeholder:"property: value; ...",style:{width:"100%",height:60,padding:8,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"1px solid rgba(0,0,0,0.1)",borderRadius:2,resize:"vertical",outline:"none"}}),N.trim()&&ve("button",{type:"button",onClick:Ne,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:l,color:"#fff",cursor:"pointer",opacity:N.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as Zu,useLayoutEffect as Qu,useState as ep}from"react";import{Fragment as rp,jsx as Oo,jsxs as op}from"react/jsx-runtime";var us=["flex-start","center","flex-end"],ps=["flex-start","center","flex-end"];function tp(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function np(e){return e==="normal"||e==="stretch"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function wa(e){let t=Array.from(e.children);if(t.length===0)return null;let n=1/0,r=1/0,o=-1/0,i=-1/0;for(let s of t){let l=s.getBoundingClientRect();l.width===0&&l.height===0||(l.top<n&&(n=l.top),l.left<r&&(r=l.left),l.bottom>o&&(o=l.bottom),l.right>i&&(i=l.right))}return n===1/0?null:new DOMRect(r,n,i-r,o-n)}function Ca({element:e,modifier:t,accentColor:n,refreshKey:r=0}){let[o,i]=ep(null);if(Zu(()=>{if(!e){i(null);return}let C=()=>i(wa(e));return C(),window.addEventListener("scroll",C,{passive:!0}),window.addEventListener("resize",C,{passive:!0}),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}},[e]),Qu(()=>{e&&i(wa(e))},[e,r]),!o)return null;let s=o,l=window.getComputedStyle(e),a=l.display;if(a!=="flex"&&a!=="inline-flex")return null;let d=l.flexDirection,c=d==="column"||d==="column-reverse"?"vertical":"horizontal",u=c==="horizontal"?"vertical":"horizontal",p=[];if(t==="shift"){let C=tp(l.justifyContent);if(C){let R=us.indexOf(C);c==="horizontal"?(R>0&&p.push("left"),R<us.length-1&&p.push("right")):(R>0&&p.push("up"),R<us.length-1&&p.push("down"))}}else{let C=np(l.alignItems);if(C){let R=ps.indexOf(C);u==="horizontal"?(R>0&&p.push("left"),R<ps.length-1&&p.push("right")):(R>0&&p.push("up"),R<ps.length-1&&p.push("down"))}}if(p.length===0)return null;let g=14,w=7;return Oo(rp,{children:p.map(C=>{let R,P;switch(C){case"right":R=s.right+g,P=s.top+s.height/2;break;case"left":R=s.left-g,P=s.top+s.height/2;break;case"down":R=s.left+s.width/2,P=s.bottom+g;break;case"up":R=s.left+s.width/2,P=s.top-g;break}let G=C==="right"?0:C==="left"?180:C==="down"?90:-90,M={position:"fixed",left:R-w,top:P-w,width:w*2,height:w*2,pointerEvents:"none",zIndex:9997};return Oo("div",{"data-devtools":"swipe-hint",style:M,children:Oo("svg",{width:w*2,height:w*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:op("g",{transform:`rotate(${G})`,children:[Oo("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),Oo("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),Oo("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),Oo("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},C)})})}import{useEffect as ip,useLayoutEffect as sp,useState as lp}from"react";import{jsx as fs,jsxs as gs}from"react/jsx-runtime";function ap(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function ka({element:e,fontSize:t,lineHeight:n,accentColor:r,hoveredProperty:o,draggingProperty:i,cursorViewport:s}){let[l,a]=lp(null);if(ip(()=>{if(!e){a(null);return}let P=()=>{a(Ko(e))};return P(),window.addEventListener("scroll",P,{passive:!0}),window.addEventListener("resize",P,{passive:!0}),()=>{window.removeEventListener("scroll",P),window.removeEventListener("resize",P)}},[e]),sp(()=>{e&&a(Ko(e))},[e,t,n]),!l)return null;let d=l.width,c=l.height,u=ap(r,.2),p=i!=null?i:o,g=8,w=2,C={position:"fixed",top:l.top,left:l.left,width:d,height:c,pointerEvents:"none",zIndex:9996,overflow:"visible"},R=P=>P==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return gs("div",{"data-devtools":"text-handles",style:C,children:[gs("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${c}`,children:[fs("rect",{x:"0.5",y:"0.5",width:Math.max(0,d-1),height:Math.max(0,c-1),fill:"none",stroke:u,strokeWidth:"1"}),(p==="font-size"||!p)&&fs("rect",{x:d-w/2,y:c/2-g/2,width:w,height:g,fill:r,stroke:"#ffffff",strokeWidth:p==="font-size"?4:2,paintOrder:"stroke"}),(p==="line-height"||!p)&&fs("rect",{x:d/2-g/2,y:c-w/2,width:g,height:w,fill:r,stroke:"#ffffff",strokeWidth:p==="line-height"?4:2,paintOrder:"stroke"})]}),s&&p&&(()=>{let P=p==="font-size"?"Aa":"Lh",G=R(p);return gs("div",{style:{position:"fixed",left:s.x+8,top:s.y-28,background:r,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:[P," ",G]})})()]})}import{Fragment as rr,jsx as at,jsxs as or}from"react/jsx-runtime";var Ea=8,ms=[0,1,2,4,8,12,16,20,24,28,32],hs="devtools-active-text";function Ta(e,t,n=0,r,o){let i=e.left+window.scrollX+4,s=t==="top-left"?e.top+window.scrollY-Fn-n*Fn+4:e.bottom+window.scrollY+4-1+n*Fn,l=window.scrollY+4,a=window.scrollY+window.innerHeight-Fn-4,d=90,c=!1;if(r&&o!==void 0){let u=r.getBoundingClientRect();if(e.left+4+o+4+d>u.left){let g=window.scrollY+u.top-Fn-4;g<a&&(a=g,c=!0)}}return s<l?s=e.top+window.scrollY+4:s>a&&(s=c?a:Math.max(e.top+window.scrollY+4,a)),{x:i,y:s}}function Ma({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:r,inFlightStyleSelectors:o,inFlightSelectorColors:i,onAttachImages:s,onReply:l,onViewThread:a,onCloseThread:d,onModelComponentsAdd:c,onModelComponentFocus:u,onModelComponentHover:p,modelComponentNames:g,modelPanelHoveredComponent:w,modelSpacingTokenHover:C,highlightedAnnotationIds:R,focusedThreadAnnotationId:P,externalCanvasRef:G,toolbarRef:M}){var $s,zs,Ws,js,Ys,Gs,Js,Us,Vs;let{canvasRef:T,redrawAll:x,resizeCanvas:N}=Il(),W=Zt(m=>{T.current=m,G&&(G.current=m)},[G,T]),_=jt(!1);hn(()=>{let m=T.current;if(!m)return;let b=()=>{_.current&&(_.current=!1,m.style.pointerEvents="")},q=I=>{I.button===0&&_.current&&b()};return window.addEventListener("mousedown",q),()=>window.removeEventListener("mousedown",q)},[T]);let[H,V]=gt(!1),[k,A]=gt(()=>{if(typeof window=="undefined")return null;try{let m=localStorage.getItem(hs);return m?JSON.parse(m):null}catch(m){return null}}),[Q,ie]=gt(null),[pe,be]=gt(null),[me,We]=gt(null),Ce=jt(null),oe=jt(null),_e=jt({x:0,y:0}),Ne=jt([]),je=jt(0),[Fe,Ie]=gt(null),[ct,wt]=gt(new Map),Pe=jt(0),Tt=jt(null),[nt,Lt]=gt(null),[Mt,Oe]=gt(null),[h,z]=gt(null),[te,se]=gt(null),ke=jt({isDragging:!1,side:null,startX:0,startY:0,original:{top:0,right:0,bottom:0,left:0},element:null,elementInfo:null,selector:null,durableSelector:null}),[ye,ae]=gt(null),[de,ue]=gt(null),[Ye,qe]=gt(null),[st,Pt]=gt(null),Ct=jt({x:0,y:0}),[It,Gt]=gt({x:0,y:0}),Jt=jt({isDragging:!1,hasMoved:!1,axis:null,startX:0,startY:0,originalRow:0,originalColumn:0,element:null,elementInfo:null,selector:null,durableSelector:null,isAuto:!1,originalJustifyContent:"",visualGap:0}),[$t,on]=gt(null),[Ot,bn]=gt(null),[St,ne]=gt(null),[De,ot]=gt(!1),[Dn,Tn]=gt(0),[Qt,Mn]=gt(null),Sn=jt({isDragging:!1,corner:null,startY:0,original:{"top-left":0,"top-right":0,"bottom-right":0,"bottom-left":0},maxRadius:0,element:null,elementInfo:null,selector:null,durableSelector:null}),[Bt,ur]=gt(null),[fn,Nt]=gt(null),[Dt,yt]=gt(null),rn=jt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[_t,Qn]=gt(null),[wn,bo]=gt(null),[lt,eo]=gt(null),xo=Ll(),vo=jt(i);vo.current=i;let to=Zt(m=>{let b=vo.current;if(!b||b.size===0)return!1;for(let q of b.keys())try{if(m.matches(q))return!0}catch(I){}return!1},[]),D=jt(e);D.current=e;let X=jt(k);X.current=k;let re=jt([]),we=jt(n);we.current=n;let[K,Ee]=gt(null),Te=e.selectedAnnotationIds;re.current=Te;let Le=Zt((m,b=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:m,addToSelection:b}})},[t]),v=Zt(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[B,ee]=gt(null),[le,Me]=gt({x:window.scrollX,y:window.scrollY});hn(()=>(N(),window.addEventListener("resize",N),()=>window.removeEventListener("resize",N)),[N]),hn(()=>{let m=()=>{Me({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",m,{passive:!0}),()=>window.removeEventListener("scroll",m)},[]),hn(()=>{k?localStorage.setItem(hs,JSON.stringify(k)):localStorage.removeItem(hs)},[k]),Rl(k,A,Q,e.annotations,t);let ge=jt(Fe);ge.current=Fe,hn(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let m=b=>{if(!b.altKey||!ge.current)return;b.preventDefault();let q=b.deltaY>0?-1:1;Pe.current=Math.max(0,Pe.current+q);let I=Tt.current;if(I){let L=zr(I,Pe.current);Ie(L)}};return window.addEventListener("wheel",m,{passive:!1}),()=>window.removeEventListener("wheel",m)},[e.activeTool,e.isAnnotating]),hn(()=>{e.activeTool!=="model"&&(Ie(null),wt(new Map),Pe.current=0,Tt.current=null)},[e.activeTool]),hn(()=>{var q;let m=(q=Fe==null?void 0:Fe.name)!=null?q:null,b=m&&(g!=null&&g.has(m))?m:null;p==null||p(b)},[Fe,g,p]);let[Ge,Xe]=gt(null);hn(()=>{var q;if(!w){Xe(null);return}let m=Uo(w.name),b=w.instanceIndex;Xe((q=m[b%m.length])!=null?q:null)},[w]);let[mt,Ze]=gt([]);hn(()=>{var m,b;if(!C){Ze([]);return}(b=(m=C.token)==null?void 0:m.bindings)!=null&&b.length?Ze(Di(C.token)):Ze(Bi(C.px))},[C]);let rt=jt(null),dt=jt(null);rt.current=$t,dt.current=Ot,hn(()=>{let m=["flex-start","center","flex-end"],b=["flex-start","center","flex-end"],I=null,L=!1,j=null,ce=null,$=(he,Re)=>{let et=Io(he,Re);for(;et&&et!==document.documentElement;){let vt=window.getComputedStyle(et).display;if(vt==="flex"||vt==="inline-flex")return et;et=et.parentElement}return null},Z=he=>{let Re=window.getComputedStyle(he).flexDirection;return Re==="column"||Re==="column-reverse"?"vertical":"horizontal"},S=he=>{let Re=he.getAttribute("data-pm");return Re||(Re=Math.random().toString(36).substring(2,8),he.setAttribute("data-pm",Re)),{selector:`[data-pm="${Re}"]`,durableSelector:Rn(he)}},E=()=>{L=!0,I&&clearTimeout(I),I=setTimeout(()=>{L=!1,I=null},300)},J=(he,Re,it)=>{let et=Z(he);if(Re===et){let Je=window.getComputedStyle(he).justifyContent,Rt=Je==="normal"||Je==="flex-start"||Je==="start"?"flex-start":Je==="flex-end"||Je==="end"?"flex-end":Je==="center"?"center":null;if(!Rt)return;let en=m.indexOf(Rt)+it;if(en<0||en>=m.length)return;let no=m[en],{selector:So,durableSelector:bi}=S(he);Ve(he,"justify-content",no),t({type:"MODIFY_STYLES_BATCH",payload:{selector:So,durableSelector:bi,element:kn(he),changes:[{property:"justify-content",original:Je,modified:no}]}})}else{let Je=window.getComputedStyle(he).flexDirection,Rt=et==="horizontal"?"column":"row",{selector:zn,durableSelector:en}=S(he);Ve(he,"flex-direction",Rt),t({type:"MODIFY_STYLES_BATCH",payload:{selector:zn,durableSelector:en,element:kn(he),changes:[{property:"flex-direction",original:Je,modified:Rt}]}})}Tn(vt=>vt+1)},O=(he,Re,it)=>{let vt=Z(he)==="horizontal"?"vertical":"horizontal";if(Re!==vt)return;let Rt=window.getComputedStyle(he).alignItems,zn=Rt==="normal"||Rt==="stretch"||Rt==="flex-start"||Rt==="start"?"flex-start":Rt==="flex-end"||Rt==="end"?"flex-end":Rt==="center"?"center":null;if(!zn)return;let no=b.indexOf(zn)+it;if(no<0||no>=b.length)return;let So=b[no],{selector:bi,durableSelector:kc}=S(he);Ve(he,"align-items",So),t({type:"MODIFY_STYLES_BATCH",payload:{selector:bi,durableSelector:kc,element:kn(he),changes:[{property:"align-items",original:Rt,modified:So}]}}),Tn(Ec=>Ec+1)},F=20,Y=null,U=null,xe=0,Be=(he,Re,it)=>{let et=$(Re,it);Mn(et?{modifier:he,target:et}:null)},Ue=he=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(he.key==="Shift"&&!he.altKey){let Re=Ct.current;Be("shift",Re.x,Re.y)}else if(he.key==="Alt"&&!he.shiftKey){let Re=Ct.current;Be("alt",Re.x,Re.y)}}},Ke=he=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let Re=he.shiftKey&&!he.altKey,it=he.altKey&&!he.shiftKey;if(!Re&&!it||he.buttons!==0){Y=null,U=null,xe=0,j=null,ce=null,Mn(null);return}if(j===null&&(j=he.clientX,ce=he.clientY,Be(Re?"shift":"alt",he.clientX,he.clientY)),L)return;Y===null&&(Y=he.clientX,U=he.clientY,xe=0);let et=he.clientX-Y,vt=he.clientY-U,Je=Math.abs(et)>=Math.abs(vt)?et:vt;if(Math.abs(Je)>3){let So=Je>0?1:-1;if(xe!==0&&So!==xe){Y=he.clientX,U=he.clientY,xe=0;return}xe=So}if(Math.abs(et)<F&&Math.abs(vt)<F)return;let Rt=$(j,ce);if(!Rt)return;let zn=Math.abs(et)>=Math.abs(vt)?"horizontal":"vertical",no=(zn==="horizontal"?et:vt)>0?1:-1;Y=null,U=null,xe=0,Re?J(Rt,zn,no):O(Rt,zn,no),E()},Ht=he=>{(he.key==="Shift"||he.key==="Alt")&&(j=null,ce=null,Y=null,U=null,xe=0,Mn(null))},Qe=()=>{Mn(null),Y=null,U=null,xe=0};return window.addEventListener("keydown",Ue),window.addEventListener("mousemove",Ke),window.addEventListener("mousedown",Qe),window.addEventListener("keyup",Ht),()=>{window.removeEventListener("keydown",Ue),window.removeEventListener("mousemove",Ke),window.removeEventListener("mousedown",Qe),window.removeEventListener("keyup",Ht),I&&clearTimeout(I)}},[e.activeTool,e.isAnnotating,t]),hn(()=>{let m=b=>{var j,ce,$,Z;if(b.key==="Escape"){if(X.current)return;if(e.activeTool==="model"&&ct.size>0){b.preventDefault(),wt(new Map);return}if(re.current.length>0){b.preventDefault(),v();return}}if(b.key==="Enter"&&e.activeTool==="model"&&ct.size>0&&c){b.preventDefault();let S=[...ct.keys()].filter(E=>!(g!=null&&g.has(E)));S.length>0&&c(S),wt(new Map);return}if((b.metaKey||b.ctrlKey)&&b.key==="v"&&Ne.current.length>0&&!X.current){b.preventDefault(),je.current++;let S=je.current*20,J=((j=Ne.current[0])==null?void 0:j.groupId)?Math.random().toString(36).substring(2,9):void 0,O=Ne.current.map(Y=>y(f({},Y),{id:Math.random().toString(36).substring(2,9),groupId:Y.groupId?J:void 0,timestamp:Date.now(),points:Y.points.map(U=>({x:U.x+S,y:U.y+S}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:O}});let F=O.find(Y=>Y.type!=="text")||O[0];F&&Le(F.id);return}let q=re.current;if(q.length===0||X.current)return;let I=($=(ce=b.composedPath)==null?void 0:ce.call(b)[0])!=null?$:b.target,L=I==null?void 0:I.tagName;if(!(L==="INPUT"||L==="TEXTAREA"||I!=null&&I.isContentEditable)&&(b.key==="Delete"||b.key==="Backspace")){if(b.preventDefault(),d){let S=D.current.annotations;for(let E of q){let J=S.find(F=>F.id===E);if(!J)continue;let O=J.threadId||J.groupId&&((Z=S.find(F=>F.groupId===J.groupId&&F.threadId))==null?void 0:Z.threadId);O&&d(O)}}for(let S of q)t({type:"DELETE_ANNOTATION",payload:{id:S}});v()}};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[t,v,Le,e.activeTool,ct,g,c,d]);let ut=jo(),ht=ri(()=>e.annotations.filter(m=>!m.pathname||m.pathname===ut),[e.annotations,ut]),gn=ri(()=>Kr(e.annotations),[e.annotations]),mn=ri(()=>{let m=new Map,b=new Set,q=1,I=[...e.annotations].sort((L,j)=>L.timestamp-j.timestamp);for(let L of I)if(!gn.has(L))if(L.groupId){if(!b.has(L.groupId)){b.add(L.groupId);let j=e.annotations.filter(ce=>ce.groupId===L.groupId);for(let ce of j)m.set(ce.id,q);q++}}else m.set(L.id,q),q++;return m},[e.annotations,gn]),sn=ri(()=>{if(Te.length===0)return null;let m=new Map;for(let b of Te){let q=e.annotations.find(L=>L.id===b);if(!q)continue;let I=q.groupId?e.annotations.filter(L=>L.groupId===q.groupId):[q];for(let L of I)if(L.linkedSelector&&!(i!=null&&i.has(L.linkedSelector))){let j=L.color||e.activeColor;m.set(L.linkedSelector,j)}}return m.size>0?m:null},[Te,e.annotations,e.activeColor,i]);hn(()=>{let m=ht.filter(b=>!(gn.has(b)||k&&!k.isNew&&b.id===k.id));x(m,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,Te,Ea,le.x,le.y,mn,R)},[ht,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,x,k,Te,le,mn,gn,R]),hn(()=>{if(pe){let m=Math.random().toString(36).substring(2,9);A({id:m,point:pe.point,text:"",fontSize:12,isNew:!0,groupId:pe.groupId}),be(null)}},[pe]),hn(()=>{me&&(A({id:Math.random().toString(36).substring(2,9),point:me.point,text:"",fontSize:12,isNew:!0,linkedSelector:me.linkedSelector,linkedAnchor:me.linkedAnchor,elements:me.elements}),We(null))},[me]);let bt=jt(null),ln=($s=k==null?void 0:k.id)!=null?$s:null;hn(()=>{ln&&Ce.current?requestAnimationFrame(()=>{var q;let m=Ce.current;if(!m||(m.focus(),oe.current===ln))return;oe.current=ln;let b=X.current;if(b){if(bt.current!==null){let I=Math.min(bt.current,m.value.length);m.setSelectionRange(I,I);return}if(!b.isNew&&b.clickPoint){let I=T.current;if(!I)return;let L=I.getContext("2d");if(!L)return;L.font=`${b.fontSize}px ${Ut}`;let j=b.fontSize*1.4,ce=b.text.split(`
|
|
4
|
-
`),$=b.clickPoint.y-b.point.y,Z=Math.max(0,Math.min(ce.length-1,Math.floor($/j))),S=b.clickPoint.x-b.point.x,E=ce[Z]||"",J=0;for(let F=0;F<=E.length;F++){let Y=L.measureText(E.substring(0,F)).width;if(Y>S){let U=F>0?L.measureText(E.substring(0,F-1)).width:0;J=S-U<Y-S?F-1:F;break}J=F}let O=J;for(let F=0;F<Z;F++)O+=(((q=ce[F])==null?void 0:q.length)||0)+1;m.setSelectionRange(O,O)}}}):(oe.current=null,bt.current=null)},[ln,T]);let He=Zt(m=>{let b=T.current;if(!b)return{x:0,y:0};let q=b.getBoundingClientRect(),I,L;if("touches"in m&&m.touches[0])I=m.touches[0].clientX,L=m.touches[0].clientY;else if("clientX"in m)I=m.clientX,L=m.clientY;else return{x:0,y:0};return{x:I-q.left+window.scrollX,y:L-q.top+window.scrollY}},[T]),xt=Zt((m,b,q,I)=>{let L=q.x-b.x,j=q.y-b.y,ce=L*L+j*j;if(ce===0)return Math.sqrt((m.x-b.x)**2+(m.y-b.y)**2)<=I;let $=Math.max(0,Math.min(1,((m.x-b.x)*L+(m.y-b.y)*j)/ce)),Z=b.x+$*L,S=b.y+$*j;return Math.sqrt((m.x-Z)**2+(m.y-S)**2)<=I},[]),Wt=Zt(m=>{for(let q=ht.length-1;q>=0;q--){let I=ht[q];if(!I||gn.has(I))continue;let L=(I.strokeWidth||3)+4;switch(I.type){case"text":{if(!I.points[0]||!I.text)continue;let j=I.points[0],ce=I.fontSize||12,$=T.current;if($){let Z=$.getContext("2d");if(Z){Z.font=`${ce}px ${Ut}`;let S=I.text.replace(/\n/g," "),E=j.x-le.x,J=Yo(E),O=Go(Z,S,J),F=Z.measureText(O).width,Y=ce*1.4;if(m.x>=j.x-4-4&&m.x<=j.x+F+4+4&&m.y>=j.y-4-4&&m.y<=j.y+Y+4+4)return I}}break}case"rectangle":{if(I.points.length<2)continue;let j=I.points[0],ce=I.points[I.points.length-1],$=Math.min(j.x,ce.x),Z=Math.max(j.x,ce.x),S=Math.min(j.y,ce.y),E=Math.max(j.y,ce.y),J=xt(m,{x:$,y:S},{x:Z,y:S},L),O=xt(m,{x:$,y:E},{x:Z,y:E},L),F=xt(m,{x:$,y:S},{x:$,y:E},L),Y=xt(m,{x:Z,y:S},{x:Z,y:E},L);if(J||O||F||Y)return I;break}case"circle":{if(I.points.length<2)continue;let j=I.points[0],ce=I.points[I.points.length-1],$=(j.x+ce.x)/2,Z=(j.y+ce.y)/2,S=Math.abs(ce.x-j.x)/2,E=Math.abs(ce.y-j.y)/2,J=m.x-$,O=m.y-Z,F=Math.sqrt((J/S)**2+(O/E)**2);if(Math.abs(F-1)*Math.max(S,E)<=L)return I;break}case"line":{if(I.points.length<2)continue;let j=I.points[0],ce=I.points[I.points.length-1];if(xt(m,j,ce,L))return I;break}case"freehand":{if(I.points.length<2)continue;for(let j=0;j<I.points.length-1;j++){let ce=I.points[j],$=I.points[j+1];if(xt(m,ce,$,L))return I}break}}}return null},[ht,T,xt,gn,le.x]),xn=Zt(m=>{let b=Wt(m);return(b==null?void 0:b.type)==="text"?b:null},[Wt]),ao=Zt(m=>{if(Te.length===0)return null;let b=Ea/2+4;for(let q of Te){let I=e.annotations.find(L=>L.id===q);if(!(!I||I.points.length<2)){if(I.type==="line"){let L=I.points[0],j=I.points[I.points.length-1];if(Math.sqrt((m.x-L.x)**2+(m.y-L.y)**2)<=b)return{handle:"start",annotationId:q};if(Math.sqrt((m.x-j.x)**2+(m.y-j.y)**2)<=b)return{handle:"end",annotationId:q};continue}if(I.type==="circle"){let L=I.points[0],j=I.points[I.points.length-1],ce=Math.min(L.x,j.x),$=Math.max(L.x,j.x),Z=Math.min(L.y,j.y),S=Math.max(L.y,j.y),E=(ce+$)/2,J=(Z+S)/2,O=[{handle:"top",x:E,y:Z},{handle:"bottom",x:E,y:S},{handle:"left",x:ce,y:J},{handle:"right",x:$,y:J}];for(let{handle:F,x:Y,y:U}of O)if(Math.sqrt((m.x-Y)**2+(m.y-U)**2)<=b)return{handle:F,annotationId:q};continue}if(I.type==="rectangle"||I.type==="freehand"){let L=I.points[0],j=I.points[I.points.length-1],ce,$,Z,S;I.type==="freehand"?(ce=Math.min(...I.points.map(J=>J.x)),$=Math.max(...I.points.map(J=>J.x)),Z=Math.min(...I.points.map(J=>J.y)),S=Math.max(...I.points.map(J=>J.y))):(ce=Math.min(L.x,j.x),$=Math.max(L.x,j.x),Z=Math.min(L.y,j.y),S=Math.max(L.y,j.y));let E=[{corner:"topLeft",x:ce,y:Z},{corner:"topRight",x:$,y:Z},{corner:"bottomLeft",x:ce,y:S},{corner:"bottomRight",x:$,y:S}];for(let{corner:J,x:O,y:F}of E)if(Math.sqrt((m.x-O)**2+(m.y-F)**2)<=b)return{handle:J,annotationId:q}}}}return null},[Te,e.annotations]);hn(()=>{let m=b=>{if(_e.current={x:b.clientX+window.scrollX,y:b.clientY+window.scrollY},!k){let q=xn(_e.current);ie((q==null?void 0:q.id)||null)}};return window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m)},[k,xn]);let _n=Zt(()=>{var b;if(!k)return;let m=((b=k.images)==null?void 0:b.length)||0;if(k.text.trim()||m>0)if(k.isNew){let q=Hr();t({type:"ADD_TEXT",payload:f({point:k.point,text:k.text||(m>0?`[${m} image${m>1?"s":""}]`:""),fontSize:k.fontSize,id:q,groupId:k.groupId,linkedSelector:k.linkedSelector,linkedAnchor:k.linkedAnchor,elements:k.elements},m>0?{imageCount:m}:{})}),m>0&&k.images&&s&&s(q,k.images)}else t({type:"UPDATE_TEXT",payload:f({id:k.id,text:k.text||(m>0?`[${m} image${m>1?"s":""}]`:"")},m>0?{imageCount:m}:{})}),m>0&&k.images&&s&&s(k.id,k.images);else k.isNew||t({type:"DELETE_ANNOTATION",payload:{id:k.id}});A(null)},[k,t,s]),Xt=Zt(m=>{for(let b=0;b<ms.length-1;b++){let q=ms[b],I=ms[b+1];if(m<=(q+I)/2)return q;if(m<I)return I}return Math.round(m/8)*8},[]),hi=Zt((m,b,q,I)=>{let L=q.top+Math.max(I.top,4),j=q.bottom-Math.max(I.bottom,4),ce=q.left+Math.max(I.left,4),$=q.right-Math.max(I.right,4);if(m<q.left||m>q.right||b<q.top||b>q.bottom)return null;let Z=b<L,S=b>j,E=m<ce,J=m>$;return Z&&E?I.top>=I.left?"top":"left":Z&&J?I.top>=I.right?"top":"right":S&&E?I.bottom>=I.left?"bottom":"left":S&&J?I.bottom>=I.right?"bottom":"right":Z?"top":S?"bottom":E?"left":J?"right":null},[]),Rr=Zt(m=>{var j,ce;if(!e.isAnnotating)return;if(e.inspectedElement&&e.activeTool==="hand"&&!("button"in m&&m.button===2)){m.preventDefault(),m.stopPropagation(),t({type:"SELECT_ELEMENT",payload:null});return}let b=He(m),q="shiftKey"in m&&m.shiftKey;if(e.activeTool==="inspector"){if("button"in m&&m.button===2)return;if(nt&&!to(nt)){let $=e.annotations.find(Ue=>{if(!Ue.linkedSelector||!Ue.threadId)return!1;try{return nt.matches(Ue.linkedSelector)}catch(Ke){return!1}});if($!=null&&$.threadId&&a){a($.threadId),requestAnimationFrame(()=>{var Ht;let Ue=document.querySelector("[data-popmelt-shadow-host]"),Ke=(Ht=Ue==null?void 0:Ue.shadowRoot)==null?void 0:Ht.querySelector("[data-popmelt-reply]");Ke==null||Ke.focus()});return}let Z=kn(nt),S=Rn(nt),E=nt.getBoundingClientRect(),J=nt.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),nt.setAttribute("data-pm",J));let O=`[data-pm="${J}"]`,F=e.styleModifications.some(Ue=>{try{return nt.matches(Ue.selector)}catch(Ke){return!1}}),Y=e.annotations.filter(Ue=>{if(!Ue.linkedSelector)return!1;try{return nt.matches(Ue.linkedSelector)}catch(Ke){return!1}}).length,U=(F?1:0)+Y,xe=E.top>=Fn*(1+U)?"top-left":"bottom-left",Be=Ta(E,xe,U,M==null?void 0:M.current);We({point:Be,linkedSelector:O,linkedAnchor:xe,elements:[y(f({},Z),{selector:S})]})}return}if(e.activeTool==="model"){if("button"in m&&m.button===2)return;if(Fe){let $=Fe.name;if(g!=null&&g.has($)){u==null||u($);return}"shiftKey"in m&&m.shiftKey?wt(S=>{let E=new Map(S);return E.has($)?E.delete($):E.set($,Fe),E}):ct.size===1&&ct.has($)?(c&&c([$]),wt(new Map)):wt(new Map([[$,Fe]]))}return}if(e.activeTool==="hand"&&$t&&Ot){let $=$t,Z=$.getAttribute("data-pm");Z||(Z=Math.random().toString(36).substring(2,8),$.setAttribute("data-pm",Z));let S=Rn($),E=`[data-pm="${Z}"]`,J=kn($),O=br($),F=b.x-window.scrollX,Y=b.y-window.scrollY,U=De,xe=window.getComputedStyle($).justifyContent,Be=0;if(U){let Ke=Lo($).find(Ht=>Ht.axis===Ot);Be=Ke?Ot==="column"?Ke.w:Ke.h:0}Ve($,"transition","none"),Jt.current={isDragging:!0,hasMoved:!1,axis:Ot,startX:F,startY:Y,originalRow:U?Be:O.row,originalColumn:U?Be:O.column,element:$,elementInfo:y(f({},J),{selector:E}),selector:E,durableSelector:S,isAuto:U,originalJustifyContent:xe,visualGap:Be},ne({axis:Ot,row:U?Be:O.row,column:U?Be:O.column});return}if(e.activeTool==="hand"&&_t&&wn){let $=_t,Z=$.getAttribute("data-pm");Z||(Z=Math.random().toString(36).substring(2,8),$.setAttribute("data-pm",Z));let S=`[data-pm="${Z}"]`,E=kn($),{fontSize:J,lineHeight:O}=xr($),F=J>0?O/J:1.2,Y=b.x-window.scrollX,U=b.y-window.scrollY;Ve($,"transition","none");let xe=Rn($);rn.current={isDragging:!0,property:wn,startX:Y,startY:U,originalFontSize:J,originalLineHeight:O,originalRatio:F,element:$,elementInfo:y(f({},E),{selector:S}),selector:S,durableSelector:xe},eo({property:wn,fontSize:J,lineHeight:O});return}if(e.activeTool==="hand"&&Bt&&fn){let $=Bt,Z=$.getAttribute("data-pm");Z||(Z=Math.random().toString(36).substring(2,8),$.setAttribute("data-pm",Z));let S=`[data-pm="${Z}"]`,E=Rn($),J=kn($),O=Ro($),F=$.getBoundingClientRect(),Y=Math.floor(F.height/2),U=b.y-window.scrollY;Ve($,"transition","none"),Sn.current={isDragging:!0,corner:fn,startY:U,original:O,maxRadius:Y,element:$,elementInfo:y(f({},J),{selector:S}),selector:S,durableSelector:E},yt({corner:fn,radius:f({},O)});return}if(e.activeTool==="hand"&&ye&&de){let $=ye,Z=$.getAttribute("data-pm");Z||(Z=Math.random().toString(36).substring(2,8),$.setAttribute("data-pm",Z));let S=`[data-pm="${Z}"]`,E=Rn($),J=kn($),O=Xo($),F=b.x-window.scrollX,Y=b.y-window.scrollY;Ve($,"transition","none"),ke.current={isDragging:!0,side:de,startX:F,startY:Y,original:O,element:$,elementInfo:y(f({},J),{selector:S}),selector:S,durableSelector:E},Pt({side:de,padding:f({},O)});return}let I=ao(b);if(I){let $=e.annotations.find(Z=>Z.id===I.annotationId);if($&&$.type!=="text"&&((j=$.status)!=null?j:"pending")==="pending"){ee({annotationId:I.annotationId,handle:I.handle,startPoint:b,originalPoints:[...$.points],hasMoved:!1});return}}let L=Wt(b);if(L&&L.points[0]){if(k&&_n(),L.type!=="text"?(Le(L.id,q),L.color&&t({type:"SET_COLOR",payload:L.color})):q||v(),a){let $=L.threadId||(L.groupId?(ce=e.annotations.find(Z=>Z.groupId===L.groupId&&Z.threadId))==null?void 0:ce.threadId:void 0);$&&a($)}Ee({annotation:L,startPoint:b,hasMoved:!1});return}if(q||v(),e.activeTool==="text"){k&&_n();let $=Math.random().toString(36).substring(2,9);A({id:$,point:b,text:"",fontSize:12,isNew:!0});return}V(!0),t({type:"START_PATH",payload:b})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,k,Te,nt,ye,de,Bt,fn,$t,Ot,De,_t,wn,Fe,ct,g,c,u,a,He,Wt,ao,t,Le,v,_n]),pr=Zt(m=>{var q,I;let b=He(m);if(e.activeTool==="inspector"&&e.isAnnotating){let L=b.x-window.scrollX,j=b.y-window.scrollY,ce=Io(L,j),$=ce&&to(ce)?null:ce;$!==nt&&(Lt($),Oe($?kn($):null));return}if(e.activeTool==="model"&&e.isAnnotating){let L=b.x-window.scrollX,j=b.y-window.scrollY,ce=Io(L,j);if(ce!==Tt.current&&(Tt.current=ce,Pe.current=0),ce){let $=zr(ce,Pe.current);Ie($)}else Ie(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let L=b.x-window.scrollX,j=b.y-window.scrollY;Ct.current={x:L,y:j},Gt({x:L,y:j});let ce=xo.current.cmd,$=xo.current.shift;if(Jt.current.isDragging){let S=Jt.current,E=S.element;if(!E)return;if(!S.hasMoved){let Y=Math.abs(L-S.startX),U=Math.abs(j-S.startY);if(Y<=2&&U<=2)return;S.hasMoved=!0,S.isAuto&&(Ve(E,"justify-content","normal"),Ve(E,"row-gap",`${S.visualGap}px`),Ve(E,"column-gap",`${S.visualGap}px`),ot(!1))}let J=S.axis,O=S.originalRow,F=S.originalColumn;if(J==="column"){let Y=L-S.startX;F=S.originalColumn+Y,ce||(O=S.originalRow+Y)}else{let Y=j-S.startY;O=S.originalRow+Y,ce||(F=S.originalColumn+Y)}O=Math.max(0,O),F=Math.max(0,F),$&&(O=Xt(O),F=Xt(F)),O=Math.round(O),F=Math.round(F),Ve(E,"row-gap",`${O}px`),Ve(E,"column-gap",`${F}px`),ne({axis:J,row:O,column:F});return}if(Sn.current.isDragging){let S=Sn.current,E=S.element;if(!E)return;let J=j-S.startY,O=S.corner,F=S.original,Y=f({},F);if(ce){let U=F[O]+J;U=Math.max(0,Math.min(S.maxRadius,U)),$&&(U=Xt(U)),U=Math.round(U),Y[O]=U}else{let U=F[O]+J;U=Math.max(0,Math.min(S.maxRadius,U)),$&&(U=Xt(U)),U=Math.round(U),Y={"top-left":U,"top-right":U,"bottom-right":U,"bottom-left":U}}Ve(E,"border-top-left-radius",`${Y["top-left"]}px`),Ve(E,"border-top-right-radius",`${Y["top-right"]}px`),Ve(E,"border-bottom-right-radius",`${Y["bottom-right"]}px`),Ve(E,"border-bottom-left-radius",`${Y["bottom-left"]}px`),yt({corner:O,radius:Y});return}if(rn.current.isDragging){let S=rn.current,E=S.element;if(!E)return;let J=S.property,O=S.originalFontSize,F=S.originalLineHeight,Y=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(J==="font-size"){let xe=L-S.startX;O=S.originalFontSize+xe,O=Math.max(1,O)}else{let xe=j-S.startY;F=S.originalLineHeight+xe,F=Math.max(O,F)}if($)if(J==="font-size"){let xe=Y[0],Be=Math.abs(O-xe);for(let Ue of Y){let Ke=Math.abs(O-Ue);Ke<Be&&(xe=Ue,Be=Ke)}O=xe}else{let xe=O>0?F/O:1.2,Be=Math.round(xe*2)/2;F=O*Math.max(1,Be)}O=Math.round(O),F=Math.round(F*10)/10,Ve(E,"font-size",`${O}px`);let U=O>0?Math.round(F/O*1e3)/1e3:1.2;Ve(E,"line-height",`${U}`),eo({property:J,fontSize:O,lineHeight:F});return}if(ke.current.isDragging){let S=ke.current,E=S.element;if(!E)return;let J=S.side,O=S.original,F=O.top,Y=O.right,U=O.bottom,xe=O.left;if(J==="top"){let Be=S.startY-j;F=O.top+Be,ce||(U=O.bottom+Be)}else if(J==="bottom"){let Be=j-S.startY;U=O.bottom+Be,ce||(F=O.top+Be)}else if(J==="left"){let Be=S.startX-L;xe=O.left+Be,ce||(Y=O.right+Be)}else if(J==="right"){let Be=L-S.startX;Y=O.right+Be,ce||(xe=O.left+Be)}F=Math.max(0,F),Y=Math.max(0,Y),U=Math.max(0,U),xe=Math.max(0,xe),$&&(F=Xt(F),Y=Xt(Y),U=Xt(U),xe=Xt(xe)),F=Math.round(F),Y=Math.round(Y),U=Math.round(U),xe=Math.round(xe),Ve(E,"padding",`${F}px ${Y}px ${U}px ${xe}px`),Pt({side:J,padding:{top:F,right:Y,bottom:U,left:xe}});return}let Z=Io(L,j);for(;Z&&Z.tagName==="A";)Z=Z.parentElement;{let E=[];Z&&E.push(Z),Bt&&Bt!==Z&&E.push(Bt);let J=null,O=16,F=null;for(let Y of E){let U=Y.getBoundingClientRect(),xe=Ro(Y),Be=[["top-left",U.left,U.top+xe["top-left"]],["top-right",U.right,U.top+xe["top-right"]],["bottom-right",U.right,U.bottom-xe["bottom-right"]],["bottom-left",U.left,U.bottom-xe["bottom-left"]]];for(let[Ue,Ke,Ht]of Be){let Qe=Math.hypot(L-Ke,j-Ht);Qe<O&&(O=Qe,J=Ue,F=Y)}}if(J&&F){ur(F),Nt(J),ye&&ae(null),de&&ue(null),$t&&on(null),Ot&&bn(null),ot(!1),_t&&Qn(null),wn&&bo(null);return}}Bt&&ur(null),fn&&Nt(null);{let S=[];Z&&Yr(Z)&&S.push(Z);let E=(q=Z==null?void 0:Z.parentElement)!=null?q:null;for(;E&&E!==document.body&&S.length<3;)Yr(E)&&S.push(E),E=E.parentElement;for(let J of S){let F=Lo(J).find(Y=>L>=Y.x&&L<=Y.x+Y.w&&j>=Y.y&&j<=Y.y+Y.h);if(F){on(J),bn(F.axis),ot(Fi(J,F.axis)),ye&&ae(null),de&&ue(null),_t&&Qn(null),wn&&bo(null);return}}}$t&&on(null),Ot&&bn(null),ot(!1);{let E=[];Z&&E.push(Z),_t&&_t!==Z&&E.push(_t);let J=null,O=1/0,F=null;for(let Y of E){if(!$i(Y))continue;let U=Ko(Y);if(!U)continue;let xe=L>=U.left&&L<=U.right&&j>=U.top&&j<=U.bottom,Be=[["font-size",U.right,U.top+U.height/2],["line-height",U.left+U.width/2,U.bottom]];for(let[Ue,Ke,Ht]of Be){let Qe=Math.hypot(L-Ke,j-Ht);(xe||Qe<12)&&Qe<O&&(O=Qe,J=Ue,F=Y)}}J&&F?(Qn(F),bo(J)):(_t&&Qn(null),wn&&bo(null))}if(Z!==ye&&ae(Z),Z){let S=Xo(Z),E=Z.getBoundingClientRect(),J=hi(L,j,E,S);ue(J)}else ue(null);return}if(B){let{handle:L,originalPoints:j,hasMoved:ce}=B,$=e.annotations.find(O=>O.id===B.annotationId);if(!$)return;let Z="metaKey"in m,S=Z&&(m.metaKey||m.ctrlKey),E=Z&&m.shiftKey,J;if($.type==="line"){let O=j[0],F=j[j.length-1];L==="start"?J=[b,F]:J=[O,b]}else if($.type==="freehand"){let O=Math.min(...j.map(Je=>Je.x)),F=Math.max(...j.map(Je=>Je.x)),Y=Math.min(...j.map(Je=>Je.y)),U=Math.max(...j.map(Je=>Je.y)),xe=(O+F)/2,Be=(Y+U)/2,Ue=F-O||1,Ke=U-Y||1,Ht=Ue/Ke,Qe=O,he=F,Re=Y,it=U;switch(L){case"topLeft":Qe=b.x,Re=b.y;break;case"topRight":he=b.x,Re=b.y;break;case"bottomLeft":Qe=b.x,it=b.y;break;case"bottomRight":he=b.x,it=b.y;break}if(S)switch(L){case"topLeft":he=F+(O-Qe),it=U+(Y-Re);break;case"topRight":Qe=O-(he-F),it=U+(Y-Re);break;case"bottomLeft":he=F+(O-Qe),Re=Y-(it-U);break;case"bottomRight":Qe=O-(he-F),Re=Y-(it-U);break}if(E){let Je=he-Qe,Rt=it-Re;if(Math.abs(Je/Rt)>Ht){let en=Math.abs(Rt)*Ht*Math.sign(Je);L==="topLeft"||L==="bottomLeft"?Qe=he-en:he=Qe+en}else{let en=Math.abs(Je)/Ht*Math.sign(Rt);L==="topLeft"||L==="topRight"?Re=it-en:it=Re+en}}let et=he-Qe||1,vt=it-Re||1;J=j.map(Je=>({x:Qe+(Je.x-O)/Ue*et,y:Re+(Je.y-Y)/Ke*vt}))}else if($.type==="circle"){let O=j[0],F=j[j.length-1],Y=Math.min(O.x,F.x),U=Math.max(O.x,F.x),xe=Math.min(O.y,F.y),Be=Math.max(O.y,F.y),Ue=(Y+U)/2,Ke=(xe+Be)/2,Ht=U-Y,Qe=Be-xe,he=Y,Re=U,it=xe,et=Be;switch(L){case"top":if(it=b.y,S&&(et=Ke+(Ke-b.y)),E){let Je=(et-it)*(Ht/Qe)/2;he=Ue-Je,Re=Ue+Je}break;case"bottom":if(et=b.y,S&&(it=Ke-(b.y-Ke)),E){let Je=(et-it)*(Ht/Qe)/2;he=Ue-Je,Re=Ue+Je}break;case"left":if(he=b.x,S&&(Re=Ue+(Ue-b.x)),E){let Je=(Re-he)*(Qe/Ht)/2;it=Ke-Je,et=Ke+Je}break;case"right":if(Re=b.x,S&&(he=Ue-(b.x-Ue)),E){let Je=(Re-he)*(Qe/Ht)/2;it=Ke-Je,et=Ke+Je}break}J=[{x:he,y:it},{x:Re,y:et}]}else{let O=j[0],F=j[j.length-1],Y=Math.min(O.x,F.x),U=Math.max(O.x,F.x),xe=Math.min(O.y,F.y),Be=Math.max(O.y,F.y),Ue=(Y+U)/2,Ke=(xe+Be)/2,Ht=U-Y||1,Qe=Be-xe||1,he=Ht/Qe,Re=Y,it=U,et=xe,vt=Be;switch(L){case"topLeft":Re=b.x,et=b.y;break;case"topRight":it=b.x,et=b.y;break;case"bottomLeft":Re=b.x,vt=b.y;break;case"bottomRight":it=b.x,vt=b.y;break}if(S)switch(L){case"topLeft":it=U+(Y-Re),vt=Be+(xe-et);break;case"topRight":Re=Y-(it-U),vt=Be+(xe-et);break;case"bottomLeft":it=U+(Y-Re),et=xe-(vt-Be);break;case"bottomRight":Re=Y-(it-U),et=xe-(vt-Be);break}if(E){let Je=it-Re,Rt=vt-et;if(Math.abs(Je/Rt)>he){let en=Math.abs(Rt)*he*Math.sign(Je);L==="topLeft"||L==="bottomLeft"?Re=it-en:it=Re+en}else{let en=Math.abs(Je)/he*Math.sign(Rt);L==="topLeft"||L==="topRight"?et=vt-en:vt=et+en}}J=[{x:Re,y:et},{x:it,y:vt}]}t({type:"RESIZE_ANNOTATION",payload:{id:B.annotationId,points:J,saveUndo:!ce}}),ce||ee(y(f({},B),{hasMoved:!0}));return}if(K&&((I=K.annotation.status)!=null?I:"pending")==="pending"){let L=b.x-K.startPoint.x,j=b.y-K.startPoint.y;if((Math.abs(L)>2||Math.abs(j)>2)&&!K.hasMoved)Ee(y(f({},K),{hasMoved:!0,startPoint:b})),t({type:"MOVE_ANNOTATION",payload:{id:K.annotation.id,delta:{x:L,y:j},saveUndo:!0}});else if(K.hasMoved){let $=b.x-K.startPoint.x,Z=b.y-K.startPoint.y;Ee(y(f({},K),{startPoint:b})),t({type:"MOVE_ANNOTATION",payload:{id:K.annotation.id,delta:{x:$,y:Z}}})}return}!H||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:b})},[H,e.isAnnotating,e.activeTool,K,B,nt,ye,de,Bt,fn,$t,Ot,_t,wn,He,t,Xt,hi]),yi=Zt(m=>{var I,L,j,ce,$,Z;if(rn.current.isDragging){let S=rn.current,E=S.element;if(E&&S.selector&&S.elementInfo&<){E instanceof HTMLElement&&(E.style.removeProperty("font-size"),E.style.removeProperty("line-height"),E.style.removeProperty("transition"));let J=[];if(S.originalFontSize!==lt.fontSize&&(Ve(E,"font-size",`${lt.fontSize}px`),J.push({property:"font-size",original:`${S.originalFontSize}px`,modified:`${lt.fontSize}px`})),S.originalLineHeight!==lt.lineHeight){let O=S.originalFontSize>0?Math.round(S.originalLineHeight/S.originalFontSize*1e3)/1e3:1.2,F=lt.fontSize>0?Math.round(lt.lineHeight/lt.fontSize*1e3)/1e3:1.2;Ve(E,"line-height",`${F}`),J.push({property:"line-height",original:`${O}`,modified:`${F}`})}J.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:S.selector,durableSelector:(I=S.durableSelector)!=null?I:void 0,element:S.elementInfo,changes:J}})}rn.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},eo(null);return}if(Jt.current.isDragging){let S=Jt.current,E=S.element,J="button"in m&&m.button===2;if(!S.hasMoved&&!J&&E&&S.selector&&S.elementInfo){E instanceof HTMLElement&&E.style.removeProperty("transition");let O=["space-between","space-around","stretch","normal"],F=S.originalJustifyContent||"normal",Y=O.indexOf(F),U=O[(Y+1)%O.length],xe=[];U==="normal"?(Ve(E,"justify-content","normal"),xe.push({property:"justify-content",original:S.originalJustifyContent,modified:"normal"})):U==="stretch"?(Ve(E,"justify-content",U),Ve(E,"row-gap","8px"),Ve(E,"column-gap","8px"),xe.push({property:"justify-content",original:S.originalJustifyContent||"normal",modified:U}),S.originalRow!==8&&xe.push({property:"row-gap",original:`${S.originalRow}px`,modified:"8px"}),S.originalColumn!==8&&xe.push({property:"column-gap",original:`${S.originalColumn}px`,modified:"8px"})):(E instanceof HTMLElement&&(E.style.removeProperty("row-gap"),E.style.removeProperty("column-gap")),Ve(E,"justify-content",U),xe.push({property:"justify-content",original:S.originalJustifyContent||"normal",modified:U}),S.originalRow>0&&xe.push({property:"row-gap",original:`${S.originalRow}px`,modified:"0px"}),S.originalColumn>0&&xe.push({property:"column-gap",original:`${S.originalColumn}px`,modified:"0px"})),xe.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:S.selector,durableSelector:(L=S.durableSelector)!=null?L:void 0,element:S.elementInfo,changes:xe}})}else if(S.hasMoved&&E&&S.selector&&S.elementInfo&&St){E instanceof HTMLElement&&(E.style.removeProperty("row-gap"),E.style.removeProperty("column-gap"),E.style.removeProperty("transition"));let O=[];S.isAuto?(E instanceof HTMLElement&&E.style.removeProperty("justify-content"),Ve(E,"justify-content","normal"),Ve(E,"row-gap",`${St.row}px`),Ve(E,"column-gap",`${St.column}px`),O.push({property:"justify-content",original:S.originalJustifyContent,modified:"normal"}),O.push({property:"row-gap",original:"0px",modified:`${St.row}px`}),O.push({property:"column-gap",original:"0px",modified:`${St.column}px`})):(S.originalRow!==St.row&&(Ve(E,"row-gap",`${St.row}px`),O.push({property:"row-gap",original:`${S.originalRow}px`,modified:`${St.row}px`})),S.originalColumn!==St.column&&(Ve(E,"column-gap",`${St.column}px`),O.push({property:"column-gap",original:`${S.originalColumn}px`,modified:`${St.column}px`}))),O.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:S.selector,durableSelector:(j=S.durableSelector)!=null?j:void 0,element:S.elementInfo,changes:O}})}Jt.current={isDragging:!1,hasMoved:!1,axis:null,startX:0,startY:0,originalRow:0,originalColumn:0,element:null,elementInfo:null,selector:null,durableSelector:null,isAuto:!1,originalJustifyContent:"",visualGap:0},ne(null);return}if(Sn.current.isDragging){let S=Sn.current,E=S.element;if(E&&S.selector&&S.elementInfo&&Dt){E instanceof HTMLElement&&(E.style.removeProperty("border-top-left-radius"),E.style.removeProperty("border-top-right-radius"),E.style.removeProperty("border-bottom-right-radius"),E.style.removeProperty("border-bottom-left-radius"),E.style.removeProperty("transition"));let J=["top-left","top-right","bottom-right","bottom-left"],O={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},F=[];for(let Y of J)S.original[Y]!==Dt.radius[Y]&&(Ve(E,O[Y],`${Dt.radius[Y]}px`),F.push({property:O[Y],original:`${S.original[Y]}px`,modified:`${Dt.radius[Y]}px`}));F.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:S.selector,durableSelector:(ce=S.durableSelector)!=null?ce:void 0,element:S.elementInfo,changes:F}})}Sn.current={isDragging:!1,corner:null,startY:0,original:{"top-left":0,"top-right":0,"bottom-right":0,"bottom-left":0},maxRadius:0,element:null,elementInfo:null,selector:null,durableSelector:null},yt(null);return}if(ke.current.isDragging){let S=ke.current,E=S.element,J=S.selector,O=S.elementInfo;if(E&&J&&O&&st){let F=S.original,Y=st.padding;E instanceof HTMLElement&&(E.style.removeProperty("padding"),E.style.removeProperty("transition"));let U=[],xe=[{prop:"padding-top",origVal:F.top,newVal:Y.top},{prop:"padding-right",origVal:F.right,newVal:Y.right},{prop:"padding-bottom",origVal:F.bottom,newVal:Y.bottom},{prop:"padding-left",origVal:F.left,newVal:Y.left}];for(let{prop:Be,origVal:Ue,newVal:Ke}of xe)Ue!==Ke&&(Ve(E,Be,`${Ke}px`),U.push({property:Be,original:`${Ue}px`,modified:`${Ke}px`}));U.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:J,durableSelector:($=S.durableSelector)!=null?$:void 0,element:O,changes:U}})}ke.current={isDragging:!1,side:null,startX:0,startY:0,original:{top:0,right:0,bottom:0,left:0},element:null,elementInfo:null,selector:null,durableSelector:null},Pt(null);return}if(B){ee(null);return}if(K){if(!K.hasMoved&&K.annotation.type==="text"&&((Z=K.annotation.status)!=null?Z:"pending")==="pending"){let S=He(m);A({id:K.annotation.id,point:K.annotation.points[0],text:K.annotation.text||"",fontSize:K.annotation.fontSize||12,isNew:!1,clickPoint:S,groupId:K.annotation.groupId})}Ee(null);return}if(!H)return;let b=5;if(e.currentPath.length>=2){let S=e.currentPath[0],E=e.currentPath[e.currentPath.length-1],J=Math.abs(E.x-S.x),O=Math.abs(E.y-S.y);if((e.activeTool==="line"?Math.sqrt(J*J+O*O)<b:J<b&&O<b)&&["rectangle","circle","line"].includes(e.activeTool)){V(!1),t({type:"CANCEL_PATH"});return}}let q=Oi(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let S=e.currentPath[0],E=e.currentPath[e.currentPath.length-1],J=Math.min(S.x,E.x),O=Math.max(S.y,E.y),F=e.strokeWidth/2,Y=Math.random().toString(36).substring(2,9);be({point:{x:J-F+4,y:O+F+4},groupId:Y}),V(!1),t({type:"FINISH_PATH",payload:{groupId:Y,elements:q}});return}V(!1),t({type:"FINISH_PATH",payload:{elements:q}})},[H,K,B,st,Dt,St,lt,He,t,e.activeTool,e.currentPath,e.strokeWidth]),mc=Zt(m=>{let b=m.target.value;bt.current=m.target.selectionStart,A(q=>q&&y(f({},q),{text:b}))},[]),hc=Zt(m=>{m.key==="Escape"?A(null):m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),_n())},[_n]),yc=Zt(m=>{if(!k)return;let b=m.clipboardData.items,q=[];for(let I=0;I<b.length;I++){let L=b[I];if(L.type.startsWith("image/")){let j=L.getAsFile();j&&q.push(j)}}q.length>0&&(m.preventDefault(),A(I=>I?y(f({},I),{images:[...I.images||[],...q]}):null))},[k]),bc=Zt(m=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){m.preventDefault();let q=ye||$t||Bt||_t;if(q&&!to(q)){let I=kn(q),L=Rn(q);t({type:"SELECT_ELEMENT",payload:{el:q,info:y(f({},I),{selector:L})}})}return}m.preventDefault();let b=T.current;b&&(_.current=!0,b.style.pointerEvents="none",setTimeout(()=>{_.current&&(_.current=!1,b.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,ye,$t,Bt,_t,t,to,T]);hn(()=>{let m=ht.filter(ce=>ce.linkedSelector);if(m.length===0)return;let b=null,q=document.createElement("canvas").getContext("2d"),I=()=>{var $,Z,S;let ce=[];for(let E of m){let J=document.querySelector(E.linkedSelector);if(!J&&((Z=($=E.elements)==null?void 0:$[0])!=null&&Z.selector)&&E.linkedSelector.startsWith("[data-pm=")){try{J=document.querySelector(E.elements[0].selector)}catch(Qe){}if(J){let Qe=(S=E.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:S[1];Qe&&J.setAttribute("data-pm",Qe)}}if(!J)continue;let O=J.getBoundingClientRect(),F=e.styleModifications.some(Qe=>{try{return J.matches(Qe.selector)}catch(he){return!1}}),Y=m.filter(Qe=>Qe.id!==E.id&&Qe.timestamp<E.timestamp&&Qe.linkedSelector===E.linkedSelector).length,U=(F?1:0)+Y,xe;if(E.text&&q){let Qe=E.fontSize||12;q.font=`${Qe}px ${Ut}`,xe=Math.max(...E.text.split(`
|
|
5
|
-
`).map(
|
|
6
|
-
`),
|
|
7
|
-
`).length)*k.fontSize*1.4+8:0,Fs=fr.height+8,wc=fr.isWrapped?Fs-Sc:0,Cc=k?{position:"fixed",left:k.point.x-4-le.x,top:k.point.y-4-le.y-wc,zIndex:9999,width:fr.width+8,height:Fs,padding:4,fontSize:k.fontSize,fontFamily:Ut,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:fr.isWrapped?"pre-wrap":"pre",wordBreak:fr.isWrapped?"break-word":void 0}:{};return or(rr,{children:[at("canvas",{ref:W,id:"devtools-canvas",style:vc,onMouseDown:Rr,onMouseMove:pr,onMouseUp:m=>yi(m),onMouseLeave:m=>{yi(m),Lt(null),Oe(null)},onTouchStart:Rr,onTouchMove:pr,onTouchEnd:m=>yi(m),onContextMenu:bc}),k&&or(rr,{children:[at("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),at("textarea",{id:"devtools-text-input",ref:Ce,value:k.text,onChange:mc,onKeyDown:hc,onPaste:yc,onBlur:_n,placeholder:"Type here...",style:Cc}),k.images&&k.images.length>0&&or("div",{"data-devtools":!0,style:{position:"fixed",left:k.point.x-4-le.x,top:k.point.y-4-le.y-20,zIndex:1e4,fontSize:11,fontFamily:"system-ui, sans-serif",color:"#fff",backgroundColor:"rgba(0,0,0,0.7)",padding:"2px 6px",borderRadius:3,whiteSpace:"nowrap"},children:[k.images.length," image",k.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&&at(oa,{styleModifications:e.styleModifications,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(ht.map(m=>m.groupId||m.id)).size,dispatch:t,inFlightSelectors:o,toolbarRef:M,onHoverSelector:se}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&&at(ia,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&&at(Jl,{annotations:ht,supersededAnnotations:gn,inFlightIds:r,scrollX:le.x,scrollY:le.y,annotationGroupMap:mn,onViewThread:a,onSelectAnnotation:Le,onHoverAnnotation:z,canvasRef:T}),e.isAnnotating&&l&&at(Ul,{annotations:ht,supersededAnnotations:gn,scrollX:le.x,scrollY:le.y,onReply:l,annotationGroupMap:mn,canvasRef:T,onHoverAnnotation:z}),e.isAnnotating&&i&&i.size>0&&at(Yi,{inFlightSelectorColors:i}),e.isAnnotating&&sn&&at(Yi,{inFlightSelectorColors:sn,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(St?Jt.current.element:$t)&&at(Ki,{element:St?Jt.current.element:$t,gap:St?{row:St.row,column:St.column}:br($t),accentColor:e.activeColor,hoveredAxis:Ot,draggingAxis:(zs=St==null?void 0:St.axis)!=null?zs:null,cursorViewport:It,isAutoGap:De,refreshKey:Dn}),e.activeTool==="hand"&&e.isAnnotating&&Qt&&at(Ca,{element:Qt.target,modifier:Qt.modifier,accentColor:e.activeColor,refreshKey:Dn}),e.activeTool==="hand"&&e.isAnnotating&&!Qt&&(Dt?Sn.current.element:Bt)&&at(Zl,{element:Dt?Sn.current.element:Bt,radius:(Ws=Dt==null?void 0:Dt.radius)!=null?Ws:Ro(Bt),accentColor:e.activeColor,hoveredCorner:fn,draggingCorner:(js=Dt==null?void 0:Dt.corner)!=null?js:null,cursorViewport:It}),e.activeTool==="hand"&&e.isAnnotating&&!Qt&&(lt?rn.current.element:_t)&&at(ka,{element:lt?rn.current.element:_t,fontSize:(Ys=lt==null?void 0:lt.fontSize)!=null?Ys:xr(_t).fontSize,lineHeight:(Gs=lt==null?void 0:lt.lineHeight)!=null?Gs:xr(_t).lineHeight,accentColor:e.activeColor,hoveredProperty:wn,draggingProperty:(Js=lt==null?void 0:lt.property)!=null?Js:null,cursorViewport:It}),e.activeTool==="hand"&&e.isAnnotating&&!Qt&&(st?ke.current.element:ye)&&at(ns,{element:st?ke.current.element:ye,padding:(Us=st==null?void 0:st.padding)!=null?Us:Xo(ye),accentColor:e.activeColor,hoveredSide:de,draggingSide:(Vs=st==null?void 0:st.side)!=null?Vs:null,cursorViewport:It,refreshKey:lt?lt.fontSize+lt.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&at(rr,{children:nt&&!e.inspectedElement&&(()=>{let m=(k==null?void 0:k.linkedSelector)||(me==null?void 0:me.linkedSelector);if(m)try{if(nt.matches(m))return null}catch(q){}let b=!!me||!!(k!=null&&k.linkedSelector)||ht.some(q=>{if(!q.linkedSelector)return!1;try{return nt.matches(q.linkedSelector)}catch(I){return!1}});return at(Vn,{element:nt,isSelected:!1,elementInfo:Mt,color:e.activeColor,hideTooltip:b})})()}),((k==null?void 0:k.linkedSelector)||(me==null?void 0:me.linkedSelector))&&(()=>{let m=(k==null?void 0:k.linkedSelector)||(me==null?void 0:me.linkedSelector);if(!m)return null;let b=null;try{b=document.querySelector(m)}catch(q){}return b?at(Vn,{element:b,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),P&&(()=>{let m=e.annotations.find(I=>I.id===P);if(!(m!=null&&m.linkedSelector))return null;let b=null;try{b=document.querySelector(m.linkedSelector)}catch(I){}if(!b)return null;let q=!!(r&&r.has(m.id));return at(Vn,{element:b,isSelected:!q,color:m.color,hideTooltip:!0})})(),h&&(()=>{let m=e.annotations.find(L=>L.id===h);if(!(m!=null&&m.linkedSelector))return null;let b=null;try{b=document.querySelector(m.linkedSelector)}catch(L){}if(!b)return null;let q=m.groupId?e.annotations.filter(L=>L.groupId===m.groupId):[m],I=!!(r&&q.some(L=>r.has(L.id)));return at(Vn,{element:b,isSelected:!I,color:m.color,hideTooltip:!0})})(),te&&(()=>{let m=null;try{m=document.querySelector(te)}catch(q){}if(!m)return null;let b=!!(o&&o.has(te));return at(Vn,{element:m,isSelected:!b,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&ct.size>0&&[...ct.entries()].map(([m,b])=>at(Vn,{element:b.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:b.rootElement.tagName.toLowerCase(),reactComponent:m},color:"#8b5cf6"},m)),e.activeTool==="model"&&e.isAnnotating&&Ge&&at(Vn,{element:Ge.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:Ge.rootElement.tagName.toLowerCase(),reactComponent:Ge.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&mt.length>0&&mt.map((m,b)=>at("div",{style:{position:"absolute",left:m.x,top:m.y,width:m.width,height:m.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:m.direction==="vertical"?or(rr,{children:[at("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),at("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),at("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),at("div",{style:{position:"absolute",left:"calc(50% + 6px)",top:m.height<16?-6:"50%",transform:m.height<16?"none":"translateY(-50%)",fontSize:11,fontWeight:600,color:"#fff",backgroundColor:"#FF0000",padding:"2px 4px",whiteSpace:"nowrap",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1},children:Math.round(m.height)})]}):or(rr,{children:[at("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),at("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),at("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),at("div",{style:{position:"absolute",left:m.width<30?0:"50%",top:(m.width<30,void 0),bottom:"calc(50% + 4px)",transform:m.width<30?"none":"translateX(-50%)",fontSize:11,fontWeight:600,color:"#fff",backgroundColor:"#FF0000",padding:"2px 4px",whiteSpace:"nowrap",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1},children:Math.round(m.width)})]})},b)),e.activeTool==="model"&&e.isAnnotating&&Fe&&at(Vn,{element:Fe.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:Fe.rootElement.tagName.toLowerCase(),reactComponent:Fe.name},color:g!=null&&g.has(Fe.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&or(rr,{children:[Ye&&Ye!=="padding"&&Ye!=="gap"&&(()=>{var $;let m=new Set(ht.map(Z=>Z.groupId||Z.id)).size,b=e.inspectedElement.info.selector,q=e.styleModifications.findIndex(Z=>Z.selector===b),I=q>=0?m+q+1:m+e.styleModifications.length+1,L=e.styleModifications.find(Z=>Z.selector===b),j=($=L==null?void 0:L.changes.length)!=null?$:0,ce=!!(L!=null&&L.captured);return at(Vn,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:ce?"#999999":e.activeColor,annotationNumber:I,changeCount:j})})(),Ye==="padding"&&at(ns,{element:e.inspectedElement.el,padding:Xo(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),Ye==="gap"&&at(Ki,{element:e.inspectedElement.el,gap:br(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),at(Sa,{element:e.inspectedElement.el,elementInfo:e.inspectedElement.info,selector:e.inspectedElement.info.selector,styleModifications:e.styleModifications,dispatch:t,onClose:()=>t({type:"SELECT_ELEMENT",payload:null}),onHover:qe,accentColor:e.activeColor,toolbarRef:M})]})]})}import{useCallback as Bn,useEffect as yn,useMemo as Er,useRef as Ft,useState as lr}from"react";import{Circle as of,Component as rf,Hand as sf,MessageCircle as lf,Pen as af,Slash as cf,Square as df,Trash2 as uf,Type as pf}from"lucide-react";import{useEffect as Ia,useRef as La}from"react";function Ra(e,t,n,r,o){let i=La(0),s=La(t.annotations);Ia(()=>{if(!n.current||!e)return;s.current=t.annotations;let l=t.annotations.length;l>0&&(l>=i.current||!r)&&(localStorage.setItem(o.annotations,JSON.stringify(t.annotations)),i.current=l)},[t.annotations,e,r,n,o]),Ia(()=>{n.current&&(localStorage.setItem(o.expanded,String(e)),e&&(localStorage.setItem(o.styleMods,JSON.stringify(t.styleModifications)),localStorage.setItem(o.spacingChanges,JSON.stringify(t.spacingTokenChanges)),localStorage.setItem(o.tool,t.activeTool),localStorage.setItem(o.color,t.activeColor),localStorage.setItem(o.stroke,String(t.strokeWidth)),t.inspectedElement?localStorage.setItem(o.inspected,JSON.stringify({selector:t.inspectedElement.info.selector,info:t.inspectedElement.info})):localStorage.removeItem(o.inspected)))},[e,t.styleModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,n,o])}import{Component as Tp,createElement as Mp,useCallback as ci,useEffect as ho,useRef as Bo,useState as On}from"react";import{Link2 as Ip}from"lucide-react";var cp={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},dp=/^#[0-9a-fA-F]{3,8}$/,up=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,pp=new Set(["transparent","currentcolor","inherit","white","black","red","green","blue","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]);function Pa(e){let t=e.trim().toLowerCase();return dp.test(t)||up.test(t)||pp.has(t)}var fp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function ys(e){return fp.test(e.trim())}var Aa=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function gp(e){let t=e.trim().toLowerCase();return!!(Aa.has(t)||t.includes(",")&&t.split(",").some(n=>Aa.has(n.trim().replace(/['"]/g,""))))}function mp(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(Pa(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var hp=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,yp=/^--(font-family|font|ff|family)/i,bp=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,xp=/^--(space|gap|padding|margin|inset)/i,vp=/^--(radius|rounded|br|border-radius)/i,Sp=/^--(shadow|elevation|drop-shadow)/i;function Oa(e,t){let n=e.toLowerCase();return Sp.test(n)?"shadows":vp.test(n)?"radii":yp.test(n)?"fonts":bp.test(n)&&ys(t)?"typeScale":hp.test(n)||Pa(t)?"colors":gp(t)?"fonts":mp(t)?"shadows":xp.test(n)&&ys(t)||ys(t)?"spacing":"other"}function Ba(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){Ba(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&wp(o.style,t,n,r)}}}var Na=/var\((--[^,)]+)/;function wp(e,t,n,r){for(let o=0;o<e.length;o++){let i=e[o];if(!(i!=null&&i.startsWith("--"))||n.has(i))continue;n.add(i);let s=t.getPropertyValue(i).trim();if(!s)continue;let l=Oa(i,s);r[l].push([i,s]);let d=e.getPropertyValue(i).trim().match(Na);d&&(r.references[i]=d[1])}}function ii(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function li(e){let t=e.trim().toLowerCase(),n=t.match(/oklch\(\s*([\d.]+%?)/);if(n){let i=n[1];return i.endsWith("%")?parseFloat(i)/100:parseFloat(i)}let r=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(r){let[i,s,l]=[parseInt(r[1],10),parseInt(r[2],10),parseInt(r[3],10)];return(.2126*i+.7152*s+.0722*l)/255}let o=t.match(/hsla?\(\s*[\d.]+[,\s]+[\d.]+%?[,\s]+([\d.]+)%?/);if(o)return parseFloat(o[1])/100;if(t.startsWith("#")){let i=t.slice(1);(i.length===3||i.length===4)&&(i=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]);let s=parseInt(i.slice(0,2),16),l=parseInt(i.slice(2,4),16),a=parseInt(i.slice(4,6),16);if(!isNaN(s))return(.2126*s+.7152*l+.0722*a)/255}return null}function Da(e){return e==="colors"?(t,n)=>{let r=li(t[1]),o=li(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let r=ii(t[1]),o=ii(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let r=ii(t[1]),o=ii(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:(t,n)=>t[0].localeCompare(n[0])}function Cp(e){let t=e.replace(/^--/,"");t=t.replace(/^(?:color|clr)-/,"");let n=t.split("-");return n.length>1&&/^\d+$/.test(n[n.length-1])&&n.pop(),n.join("-")}function _a(e){let t=new Map;for(let o of e){let i=Cp(o[0]),s=t.get(i);s||(s=[],t.set(i,s)),s.push(o)}let n=Da("colors");for(let o of t.values())o.sort(n);let r=[...t.entries()];return r.sort((o,i)=>{var a,d;let s=(a=li(o[1][0][1]))!=null?a:0,l=(d=li(i[1][0][1]))!=null?d:0;return s-l}),r}var kp=["colors","fonts","typeScale","spacing","radii","shadows","other"],si=null,Ep=5e3;function Ha(){if(typeof document=="undefined")return cp;if(si&&Date.now()-si.timestamp<Ep)return si.tokens;let e={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},t=new Set,n=getComputedStyle(document.documentElement);try{for(let o of document.styleSheets)try{Ba(o.cssRules||o.rules,n,t,e)}catch(i){}}catch(o){}let r=document.documentElement.style;for(let o=0;o<r.length;o++){let i=r[o];if(!(i!=null&&i.startsWith("--"))||t.has(i))continue;t.add(i);let s=n.getPropertyValue(i).trim();if(!s)continue;let l=Oa(i,s);e[l].push([i,s]);let d=r.getPropertyValue(i).trim().match(Na);d&&(e.references[i]=d[1])}for(let o of kp)e[o].sort(Da(o));return si={tokens:e,timestamp:Date.now()},e}import{Fragment as ir,jsx as $e,jsxs as un}from"react/jsx-runtime";var Fa="popmelt-library-tab",Lp=/^#[0-9a-fA-F]{3,8}$/,Rp=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,Ap=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),Pp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function za(e){let t=e.trim();return Lp.test(t)||Rp.test(t)||Ap.has(t.toLowerCase())}function Op(e){return Pp.test(e.trim())}function Bp(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function Wa(e,t=""){if(e==null)return[];if(typeof e!="object")return[[t,String(e)]];if(Array.isArray(e))return[[t,e.map(String).join(", ")]];let n=[];for(let[r,o]of Object.entries(e)){let i=t?`${t}.${r}`:r;if(o!==null&&typeof o=="object"&&!Array.isArray(o)){let s=o;typeof s.value=="string"?n.push([i,s.value]):n.push(...Wa(o,i))}else n.push([i,Array.isArray(o)?o.map(String).join(", "):String(o!=null?o:"")])}return n}function Np(e){return e.length===0?"generic":e.filter(([,r])=>za(r)).length>e.length/2?"colors":e.filter(([,r])=>Op(r)).length>e.length/2?"spacing":"generic"}var Dp=y(f({position:"fixed",top:16,right:16,bottom:80,width:300,backgroundColor:"#eaeaea"},go),{boxSizing:"content-box",zIndex:10001,display:"flex",flexDirection:"column",overflow:"hidden",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:12,color:"#1f2937",padding:12,pointerEvents:"auto"}),ja={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},_p=y(f({},ja),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function Hp({varName:e,value:t,reference:n}){return $e("div",{title:n?`${e} \u2192 ${n}
|
|
8
|
-
${t}`:`${e}: ${t}`,style:{width:28,height:28,backgroundColor:t,outline:"1px solid rgba(0,0,0,0.08)",outlineOffset:-1,position:"relative"},children:n&&$e(Ip,{size:10,strokeWidth:2.5,style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",color:"white",filter:"drop-shadow(0 0 1px rgba(0,0,0,0.5))"}})})}function Ya({entries:e,references:t}){let n=[],r=[];for(let i of e)za(i[1])?n.push(i):r.push(i);let o=_a(n);return un(ir,{children:[o.map(([i,s])=>un("div",{style:{marginBottom:4},children:[un("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[i,s.length>1?` (${s.length})`:""]}),$e("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:s.map(([l,a])=>$e(Hp,{varName:l,value:a,reference:t[l]},l))})]},i)),r.length>0&&$e(di,{entries:r})]})}var ai=[0,1,2,4,8,12,16,20,24,28,32];function Fp(e){if(e<=32){let t=ai[0],n=Math.abs(e-t);for(let r=1;r<ai.length;r++){let o=Math.abs(e-ai[r]);o<n&&(t=ai[r],n=o)}return t}return Math.round(e/8)*8}function $p({label:e,value:t,px:n,tokenPath:r,rawToken:o,onHover:i,onModify:s,onDelete:l}){let[a,d]=On(!1),[c,u]=On(null),p=Bo(!1),g=Bo(0),w=Bo(0),C=Bo([]),R=c!==null?c:n,P=c!==null?`${c}px`:t,G=c!==null,M=ci(x=>{x.preventDefault(),p.current=!0,g.current=x.clientX,w.current=n;let N=Wr(o);C.current=Ni(N);let W=H=>{let V=H.clientX-g.current,k=Math.max(0,Math.round(w.current+V));H.shiftKey&&(k=Fp(k));for(let A of C.current)A.element.style.setProperty(A.property,k+"px","important");u(k),i==null||i({name:e,px:k,token:N})},_=()=>{window.removeEventListener("mousemove",W),window.removeEventListener("mouseup",_),document.body.style.cursor="",p.current=!1,u(H=>{if(H!==null&&H!==n&&s){let V=Wr(o),k=V.bindings&&V.bindings.length>0,A;if(k){let be=_i(V.bindings,w.current,H);A=JSON.stringify(y(f({},V),{value:`${H}px`,bindings:be}))}else{let be=_l(C.current,w.current),me=Hl(C.current);if(be.length>0){let We=_i(be,w.current,H);A=JSON.stringify({value:`${H}px`,property:me,bindings:We})}else A=`${H}px`}let Q=typeof o=="string"?o:JSON.stringify(o),ie=C.current.map(be=>({selector:Rn(be.element),property:be.property})),pe=$l(C.current,w.current,H);s({tokenPath:r,originalValue:Q,currentValue:A,targets:ie,originalPx:w.current,currentPx:H},{id:Math.random().toString(36).substring(2,9),tokenPath:r,tokenName:e,originalPx:w.current,newPx:H,affectedElements:pe})}return H})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",W),window.addEventListener("mouseup",_)},[n,e,r,o,i,s]),T=Wr(o);return un("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,padding:"1px 0",cursor:"ew-resize",userSelect:"none"},onMouseEnter:()=>{p.current||(d(!0),i==null||i({name:e,px:R,token:T}))},onMouseLeave:()=>{p.current||(d(!1),i==null||i(null))},onMouseDown:M,children:[$e("span",{style:{color:a||G?"#FF0000":"#9ca3af"},children:e}),un("span",{style:{display:"flex",alignItems:"center",gap:4},children:[$e("span",{style:{color:a||G?"#FF0000":"#6b7280",fontWeight:600},children:P}),l&&a&&!G&&$e("button",{type:"button",title:"Remove token",onMouseDown:x=>{x.stopPropagation();let N=typeof o=="string"?o:JSON.stringify(o);l(r,N)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:x=>{x.currentTarget.style.color="#FF0000"},onMouseLeave:x=>{x.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function zp({entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}){let s=[],l=[];for(let a of e){let d=Bp(a[1]);d!==null?s.push([a[0],a[1],d]):l.push(a)}return un(ir,{children:[s.length>0&&$e("div",{style:{display:"flex",flexDirection:"column",gap:2},children:s.map(([a,d,c])=>{let u=a.split(".").pop(),p=n?Wp(n,a):d,g=p&&typeof p=="object"&&"value"in p?p:d;return $e($p,{label:u,value:d,px:c,tokenPath:`tokens.${t}.${a}`,rawToken:g,onHover:r,onModify:o,onDelete:i},a)})}),l.length>0&&$e(di,{entries:l})]})}function Wp(e,t){let n=t.split("."),r=e;for(let o of n){if(r==null||typeof r!="object")return;r=r[o]}return r}function di({entries:e}){return $e("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>un("div",{style:{fontSize:11},children:[$e("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),$e("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function jp({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:r,onModifyToken:o,onDeleteToken:i}){let s=Np(e);return s==="colors"?$e(Ya,{entries:e}):s==="spacing"?$e(zp,{entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}):$e(di,{entries:e})}function Yp(e){let t=e.toLowerCase(),n=null,r=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(i){return i.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),o=r.currentNode;for(;o=r.nextNode();){let i=o,s=Object.keys(i).find(a=>a.startsWith("__reactFiber$")||a.startsWith("__reactInternalInstance$"));if(!s)continue;let l=i[s];for(;l;){let a=l.type,d=typeof a=="function"||typeof a=="object"?(a==null?void 0:a.displayName)||(a==null?void 0:a.name):null;if(typeof d=="string"){let c=d.toLowerCase();if(c===t){let u=f({},l.memoizedProps);return delete u.ref,{type:a,props:u}}if(!n){if(c.length>=4&&t.includes(c)){let u=f({},l.memoizedProps);delete u.ref,n={type:a,props:u}}else if(t.length>=4&&c.includes(t)){let u=f({},l.memoizedProps);delete u.ref,n={type:a,props:u}}}}l=l.return}}return n}var bs=class extends Tp{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(){this.props.onError()}render(){return this.state.hasError?null:this.props.children}},Ga="popmelt-principles-collapsed";function Gp(){try{let e=localStorage.getItem(Ga);if(e)return new Set(JSON.parse(e))}catch(e){}return new Set}function Jp(e){try{localStorage.setItem(Ga,JSON.stringify([...e]))}catch(t){}}function Up({id:e,label:t,count:n,children:r,collapsed:o,onToggle:i}){return un("div",{style:{marginBottom:14},children:[un("div",{onClick:()=>i(e),style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:o?0:6,cursor:"pointer",display:"flex",alignItems:"center",gap:4,userSelect:"none"},children:[$e("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:o?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,$e("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!o&&r]})}var Vp={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},$a=["colors","fonts","typeScale","spacing","radii","shadows","other"];function Xp(){let[e,t]=On(null),[n,r]=On(Gp);ho(()=>{t(Ha())},[]);let o=ci(s=>{r(l=>{let a=new Set(l);return a.has(s)?a.delete(s):a.add(s),Jp(a),a})},[]);return e?$a.some(s=>e[s].length>0)?$e(ir,{children:$a.map(s=>{let l=e[s];return l.length===0?null:$e(Up,{id:s,label:Vp[s],count:l.length,collapsed:n.has(s),onToggle:o,children:s==="colors"?$e(Ya,{entries:l,references:e.references}):$e(di,{entries:l})},s)})}):$e("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function Kp({rules:e}){return!e||e.length===0?$e("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."}):$e(ir,{children:e.map((t,n)=>un("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[un("span",{style:{color:"#9ca3af",flexShrink:0},children:[n+1,"."]}),$e("span",{children:t})]},n))})}function qp({name:e,value:t,selected:n,highlighted:r,onRemove:o,onHover:i}){var H;let[s,l]=On(!1),[a,d]=On(!1),c=Bo(null),u=Bo(0),[p,g]=On(0),[w,C]=On(0),R=Wa(t),P=(H=R.find(([V])=>V==="description"))==null?void 0:H[1];ho(()=>{if(!a&&!r){g(0),C(0),u.current=0;return}let V=Uo(e);g(V.length)},[a,r,e]),ho(()=>{n&&c.current&&c.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let G=n||r||a,M=n?"139,92,246":"34,197,94",T=n?"#8b5cf6":"#22c55e",x=G?`rgba(${M},0.06)`:void 0,N=G?`inset 0 0 0 1.5px rgba(${M},0.35)`:void 0,W=r||a,_=ci(()=>{let V=Uo(e);if(V.length===0)return;let k=u.current%V.length;V[k].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),C(k),u.current=k+1,i==null||i({name:e,instanceIndex:k})},[e,i]);return un("div",{ref:c,onClick:_,onMouseEnter:()=>{d(!0),i==null||i({name:e,instanceIndex:0})},onMouseLeave:()=>{d(!1),i==null||i(null)},style:{marginBottom:8,background:x,padding:6,boxShadow:N,cursor:"pointer"},children:[un("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[un("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[$e("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:W?T:"transparent",color:W?"#fff":"#6b7280"},children:e}),W&&p>1&&un("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[w+1,"/",p]})]}),o&&a&&$e("button",{type:"button",title:"Remove from model",onClick:V=>{V.stopPropagation(),o(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:V=>{V.currentTarget.style.color="#FF0000"},onMouseLeave:V=>{V.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),P&&$e("div",{style:{fontSize:11,color:W?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:P}),s?$e(jp,{entries:R.filter(([V])=>V!=="description"),categoryKey:""}):$e(Zp,{name:e,onNotFound:()=>l(!0),entries:R})]})}function Zp({name:e,onNotFound:t}){let[n,r]=On(null),[o,i]=On(!1);return ho(()=>{let s=Yp(e);s||t(),r(s),i(!0)},[e,t]),!o||!n?null:$e(bs,{onError:t,children:$e("div",{"data-popmelt-panel":!0,onClick:s=>{s.preventDefault(),s.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center",contain:"layout paint",position:"relative",isolation:"isolate"},children:$e("div",{style:{zoom:.5,pointerEvents:"none"},children:Mp(n.type,n.props)})})})}function Qp({components:e,selectedComponent:t,hoveredComponent:n,onRemove:r,onHover:o}){if(!e||Object.keys(e).length===0)return $e("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),s=Pi(i),l=Object.entries(e).sort(([a],[d])=>{var c,u;return((c=s.get(a))!=null?c:1/0)-((u=s.get(d))!=null?u:1/0)});return $e(ir,{children:l.map(([a,d])=>$e(qp,{name:a,value:d,selected:t===a,highlighted:n===a,onRemove:r,onHover:o},a))})}function Ja({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:r,selectedComponent:o,hoveredComponent:i,onComponentHover:s,onSpacingTokenHover:l,onModifySpacingToken:a,onDeleteSpacingToken:d,onComponentAdded:c,onComponentRemoved:u}){let[p,g]=On(void 0),[w,C]=On(!0),[R,P]=On(()=>{try{let _=localStorage.getItem(Fa);if(_==="patterns"||_==="principles"||_==="rules")return _}catch(_){}return"patterns"});ho(()=>{Fo(e).then(_=>{g(_),C(!1)})},[e,t]),ho(()=>{try{localStorage.setItem(Fa,R)}catch(_){}},[R]),ho(()=>{o&&(P("patterns"),Fo(e).then(_=>{_&&g(_)}))},[o,e]);let G=ci(_=>{g(H=>{if(!(H!=null&&H.components))return H;let A=H.components,{[_]:V}=A,k=Hn(A,[co(_)]);return y(f({},H),{components:k})}),u==null||u(_)},[u]),M=p==null?void 0:p.components,T=p==null?void 0:p.rules,x=M&&Object.keys(M).length>0,N=T&&T.length>0,W=Bo(null);return ho(()=>{let _=W.current;if(!_)return;let H=n,V=r;return H&&_.addEventListener("mouseenter",H),V&&_.addEventListener("mouseleave",V),()=>{H&&_.removeEventListener("mouseenter",H),V&&_.removeEventListener("mouseleave",V)}},[n,r]),un("div",{ref:W,style:Dp,children:[un("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[$e("span",{children:"Model"}),$e("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),$e("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(_=>$e("button",{type:"button",style:R===_?_p:ja,onClick:()=>P(_),children:_.charAt(0).toUpperCase()+_.slice(1)},_))}),$e("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:R==="principles"?$e(Xp,{}):w?$e("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!p||!x&&!N?$e("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):un(ir,{children:[R==="patterns"&&$e(Qp,{components:M,selectedComponent:o,hoveredComponent:i,onRemove:G,onHover:s}),R==="rules"&&$e(Kp,{rules:T})]})})]})}import{jsx as sr}from"react/jsx-runtime";var ef="M 233.959793 800.214905 L 468.644287 668.536987 L 472.590637 657.100647 L 468.644287 650.738403 L 457.208069 650.738403 L 417.986633 648.322144 L 283.892639 644.69812 L 167.597321 639.865845 L 54.926208 633.825623 L 26.577238 627.785339 L 3.3e-05 592.751709 L 2.73832 575.27533 L 26.577238 559.248352 L 60.724873 562.228149 L 136.187973 567.382629 L 249.422867 575.194763 L 331.570496 580.026978 L 453.261841 592.671082 L 472.590637 592.671082 L 475.328857 584.859009 L 468.724915 580.026978 L 463.570557 575.194763 L 346.389313 495.785217 L 219.543671 411.865906 L 153.100723 363.543762 L 117.181267 339.060425 L 99.060455 316.107361 L 91.248367 266.01355 L 123.865784 230.093994 L 167.677887 233.073853 L 178.872513 236.053772 L 223.248367 270.201477 L 318.040283 343.570496 L 441.825592 434.738342 L 459.946411 449.798706 L 467.194672 444.64447 L 468.080597 441.020203 L 459.946411 427.409485 L 392.617493 305.718323 L 320.778564 181.932983 L 288.80542 130.630859 L 280.348999 99.865845 C 277.369171 87.221436 275.194641 76.590698 275.194641 63.624268 L 312.322174 13.20813 L 332.8591 6.604126 L 382.389313 13.20813 L 403.248352 31.328979 L 434.013519 101.71814 L 483.865753 212.537048 L 561.181274 363.221497 L 583.812134 407.919434 L 595.892639 449.315491 L 600.40271 461.959839 L 608.214783 461.959839 L 608.214783 454.711609 L 614.577271 369.825623 L 626.335632 265.61084 L 637.771851 131.516846 L 641.718201 93.745117 L 660.402832 48.483276 L 697.530334 24.000122 L 726.52356 37.852417 L 750.362549 72 L 747.060486 94.067139 L 732.886047 186.201416 L 705.100708 330.52356 L 686.979919 427.167847 L 697.530334 427.167847 L 709.61084 415.087341 L 758.496704 350.174561 L 840.644348 247.490051 L 876.885925 206.738342 L 919.167847 161.71814 L 946.308838 140.29541 L 997.61084 140.29541 L 1035.38269 196.429626 L 1018.469849 254.416199 L 965.637634 321.422852 L 921.825562 378.201538 L 859.006714 462.765259 L 819.785278 530.41626 L 823.409424 535.812073 L 832.75177 534.92627 L 974.657776 504.724915 L 1051.328979 490.872559 L 1142.818848 475.167786 L 1184.214844 494.496582 L 1188.724854 514.147644 L 1172.456421 554.335693 L 1074.604126 578.496765 L 959.838989 601.449829 L 788.939636 641.879272 L 786.845764 643.409485 L 789.261841 646.389343 L 866.255127 653.637634 L 899.194702 655.409424 L 979.812134 655.409424 L 1129.932861 666.604187 L 1169.154419 692.537109 L 1192.671265 724.268677 L 1188.724854 748.429688 L 1128.322144 779.194641 L 1046.818848 759.865845 L 856.590759 714.604126 L 791.355774 698.335754 L 782.335693 698.335754 L 782.335693 703.731567 L 836.69812 756.885986 L 936.322205 846.845581 L 1061.073975 962.81897 L 1067.436279 991.490112 L 1051.409424 1014.120911 L 1034.496704 1011.704712 L 924.885986 929.234924 L 882.604126 892.107544 L 786.845764 811.48999 L 780.483276 811.48999 L 780.483276 819.946289 L 802.550415 852.241699 L 919.087341 1027.409424 L 925.127625 1081.127686 L 916.671204 1098.604126 L 886.469849 1109.154419 L 853.288696 1103.114136 L 785.073914 1007.355835 L 714.684631 899.516785 L 657.906067 802.872498 L 650.979858 806.81897 L 617.476624 1167.704834 L 601.771851 1186.147705 L 565.530212 1200 L 535.328857 1177.046997 L 519.302124 1139.919556 L 535.328857 1066.550537 L 554.657776 970.792053 L 570.362488 894.68457 L 584.536926 800.134277 L 592.993347 768.724976 L 592.429626 766.630859 L 585.503479 767.516968 L 514.22821 865.369263 L 405.825531 1011.865906 L 320.053711 1103.677979 L 299.516815 1111.812256 L 263.919525 1093.369263 L 267.221497 1060.429688 L 287.114136 1031.114136 L 405.825531 880.107361 L 477.422913 786.52356 L 523.651062 732.483276 L 523.328918 724.671265 L 520.590698 724.671265 L 205.288605 929.395935 L 149.154434 936.644409 L 124.993355 914.01355 L 127.973183 876.885986 L 139.409409 864.80542 L 234.201385 799.570435 L 233.879227 799.8927 Z",tf="M60.8734,57.2556v-14.9432c0-1.2586.4722-2.2029,1.5728-2.8314l30.0443-17.3023c4.0899-2.3593,8.9662-3.4599,13.9988-3.4599,18.8759,0,30.8307,14.6289,30.8307,30.2006,0,1.1007,0,2.3593-.158,3.6178l-31.1446-18.2467c-1.8872-1.1006-3.7754-1.1006-5.6629,0l-39.4812,22.9651ZM131.0276,115.4561v-35.7074c0-2.2028-.9446-3.7756-2.8318-4.8763l-39.481-22.9651,12.8982-7.3934c1.1007-.6285,2.0453-.6285,3.1458,0l30.0441,17.3024c8.6523,5.0341,14.4708,15.7296,14.4708,26.1107,0,11.9539-7.0769,22.965-18.2461,27.527v.0021ZM51.593,83.9964l-12.8982-7.5497c-1.1007-.6285-1.5728-1.5728-1.5728-2.8314v-34.6048c0-16.8303,12.8982-29.5722,30.3585-29.5722,6.607,0,12.7403,2.2029,17.9324,6.1349l-30.987,17.9324c-1.8871,1.1007-2.8314,2.6735-2.8314,4.8764v45.6159l-.0014-.0015ZM79.3562,100.0403l-18.4829-10.3811v-22.0209l18.4829-10.3811,18.4812,10.3811v22.0209l-18.4812,10.3811ZM91.2319,147.8591c-6.607,0-12.7403-2.2031-17.9324-6.1344l30.9866-17.9333c1.8872-1.1005,2.8318-2.6728,2.8318-4.8759v-45.616l13.0564,7.5498c1.1005.6285,1.5723,1.5728,1.5723,2.8314v34.6051c0,16.8297-13.0564,29.5723-30.5147,29.5723v.001ZM53.9522,112.7822l-30.0443-17.3024c-8.652-5.0343-14.471-15.7296-14.471-26.1107,0-12.1119,7.2356-22.9652,18.403-27.5272v35.8634c0,2.2028.9443,3.7756,2.8314,4.8763l39.3248,22.8068-12.8982,7.3938c-1.1007.6287-2.045.6287-3.1456,0ZM52.2229,138.5791c-17.7745,0-30.8306-13.3713-30.8306-29.8871,0-1.2585.1578-2.5169.3143-3.7754l30.987,17.9323c1.8871,1.1005,3.7757,1.1005,5.6628,0l39.4811-22.807v14.9435c0,1.2585-.4721,2.2021-1.5728,2.8308l-30.0443,17.3025c-4.0898,2.359-8.9662,3.4605-13.9989,3.4605h.0014ZM91.2319,157.296c19.0327,0,34.9188-13.5272,38.5383-31.4594,17.6164-4.562,28.9425-21.0779,28.9425-37.908,0-11.0112-4.719-21.7066-13.2133-29.4143.7867-3.3035,1.2595-6.607,1.2595-9.909,0-22.4929-18.2471-39.3247-39.3251-39.3247-4.2461,0-8.3363.6285-12.4262,2.045-7.0792-6.9213-16.8318-11.3254-27.5271-11.3254-19.0331,0-34.9191,13.5268-38.5384,31.4591C11.3255,36.0212,0,52.5373,0,69.3675c0,11.0112,4.7184,21.7065,13.2125,29.4142-.7865,3.3035-1.2586,6.6067-1.2586,9.9092,0,22.4923,18.2466,39.3241,39.3248,39.3241,4.2462,0,8.3362-.6277,12.426-2.0441,7.0776,6.921,16.8302,11.3251,27.5271,11.3251Z";function xs({size:e=16,style:t}){return sr("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:sr("path",{d:ef})})}function vs({size:e=16,style:t}){return sr("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:sr("path",{d:tf})})}function Ss({provider:e,size:t=16,style:n}){return e==="codex"?sr(vs,{size:t,style:n}):sr(xs,{size:t,style:n})}var ui=[{id:"claude-opus-4-6",label:"Opus 4.6"},{id:"claude-sonnet-4-6",label:"Sonn 4.6"}],pi=[{id:"gpt-5.4",label:"GPT 5.4"},{id:"gpt-5.3-codex",label:"Codex 5.3"},{id:"gpt-5.3-codex-spark",label:"Spark 5.3"}];var nf=[...ui,...pi];function ws(e,t){if(!e)return t==="codex"?"Codex":"Claude Code";let n=nf.find(r=>r.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as Va}from"react/jsx-runtime";var so={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function yo({children:e,active:t,siblingActive:n,disabled:r,onClick:o,title:i}){let s=()=>r?.4:n&&!t?.5:1,l={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:0,border:"none",cursor:r?"default":"pointer",transition:"background-color 150ms ease, color 150ms ease, transform 100ms ease, opacity 150ms ease",backgroundColor:t?so.bgActive:"transparent",color:t?so.iconActive:so.iconDefault,opacity:s()};return Va("button",{type:"button",onClick:r?void 0:o,title:i,disabled:r,style:l,onMouseEnter:a=>{r||(a.currentTarget.style.opacity="1",t||(a.currentTarget.style.backgroundColor=so.bgHover))},onMouseLeave:a=>{r||(a.currentTarget.style.opacity=String(s()),t||(a.currentTarget.style.backgroundColor="transparent"))},onMouseDown:a=>{r||(a.currentTarget.style.transform="scale(0.95)")},onMouseUp:a=>{r||(a.currentTarget.style.transform="scale(1)")},children:e})}function Ua(){return Va("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as Tr,jsx as Se,jsxs as Et}from"react/jsx-runtime";var No=[{type:"rectangle",icon:df,label:"Rectangle",shortcut:"R"},{type:"circle",icon:of,label:"Oval",shortcut:"O"},{type:"line",icon:cf,label:"Line",shortcut:"L"},{type:"freehand",icon:af,label:"Pen",shortcut:"P"}],ff=new Set(No.map(e=>e.type));function gf(e,t,n,r,o,i,s,l){let a=(e-o)*(r-i)-(n-o)*(t-i),d=(e-s)*(i-l)-(o-s)*(t-l),c=(e-n)*(l-r)-(s-n)*(t-r),u=a<0||d<0||c<0,p=a>0||d>0||c>0;return!(u&&p)}function mf(){let e=window.innerWidth-16,t=e-326,n=window.innerHeight-80;return{left:t,right:e,y:n}}var hf=[{type:"text",icon:pf,label:"Text",shortcut:"T"}],Xa={inspector:{name:"Comment",desc:"Pin feedback to specific elements on the page.",usage:["Click any element to attach a comment","Type your note, then hand off to your AI","Your AI may ask clarifying questions","Replies get threaded"],keys:[{key:"C",desc:"Select tool"},{key:"Click",desc:"Pin comment to element"},{key:"Esc",desc:"Deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},hand:{name:"Handle",desc:"Quickly finetune layout and typescale.",usage:["Edges \u2192 padding","Between items \u2192 spacing","Corners \u2192 rounding","Right of text \u2192 font size","Below text \u2192 line height","Click a spacing handle to cycle distribution","Right-click \u2192 inspect element styles"],keys:[{key:"H",desc:"Select tool"},{key:"Shift",desc:"Snap to scale"},{key:"\u2325 + swipe",desc:"Cycle justify / flip direction"},{key:"\u21E7 + swipe",desc:"Cycle align-items"},{key:"Right-click",desc:"Inspect styles"},{key:"Esc",desc:"Deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},rectangle:{name:"Rectangle",desc:"Draw rectangular highlights to mark areas of interest.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"R",desc:"Rectangle"},{key:"O",desc:"Oval"},{key:"L",desc:"Line"},{key:"P",desc:"Pen"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},circle:{name:"Oval",desc:"Draw oval highlights to mark areas of interest.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"O",desc:"Oval"},{key:"R",desc:"Rectangle"},{key:"L",desc:"Line"},{key:"P",desc:"Pen"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},line:{name:"Line",desc:"Draw line annotations to point at or connect elements.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"L",desc:"Line"},{key:"R",desc:"Rectangle"},{key:"O",desc:"Oval"},{key:"P",desc:"Pen"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},freehand:{name:"Pen",desc:"Draw freehand paths to annotate freely.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"P",desc:"Pen"},{key:"R",desc:"Rectangle"},{key:"O",desc:"Oval"},{key:"L",desc:"Line"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},text:{name:"Text",desc:"Place text labels anywhere on the page.",usage:["Click to place, then start typing","Click away or press Enter to finish","Scroll while hovering a label to resize it"],keys:[{key:"T",desc:"Select tool"},{key:"Esc",desc:"Cancel text or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},model:{name:"Model",desc:"Promote components into the local design model.",usage:["Hover to highlight component boundaries","Scroll to walk up/down the component tree","Click to add to model.json","Green = already in model"],keys:[{key:"M",desc:"Select tool"},{key:"Scroll",desc:"Walk tree depth"},{key:"Click",desc:"Promote component"},{key:"Esc",desc:"Deselect"}]},counter:{name:"Annotations",desc:"Click to cycle, scroll to change color, long press to reset.",usage:[],keys:[{key:"Click",desc:"Cycle annotations"},{key:"Scroll",desc:"Change color"},{key:"Hold",desc:"Reset to red"}]},clear:{name:"Clear",desc:"Remove all annotations and style changes.",usage:[],keys:[{key:"\u2318 \u232B",desc:"Clear all"},{key:"\u232B",desc:"Delete selected annotation"},{key:"\u2318 Z",desc:"Undo"},{key:"\u2318 \u21E7 Z",desc:"Redo"}]},collapse:{name:"Popmelt",desc:`Comment and zhuzh, then hand off.
|
|
2
|
+
var Yc=Object.defineProperty,Jc=Object.defineProperties;var Uc=Object.getOwnPropertyDescriptors;var jr=Object.getOwnPropertySymbols;var ca=Object.prototype.hasOwnProperty,da=Object.prototype.propertyIsEnumerable;var la=(e,t,n)=>t in e?Yc(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))ca.call(t,n)&&la(e,n,t[n]);if(jr)for(var n of jr(t))da.call(t,n)&&la(e,n,t[n]);return e},h=(e,t)=>Jc(e,Uc(t));var bo=e=>typeof e=="symbol"?e:e+"",Gn=(e,t)=>{var n={};for(var r in e)ca.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&jr)for(var r of jr(e))t.indexOf(r)<0&&da.call(e,r)&&(n[r]=e[r]);return n};import{createContext as Ug,useCallback as Kt,useContext as Vg,useEffect as $t,useMemo as lo,useRef as qt,useState as Zt}from"react";import{useCallback as wa,useEffect as Vc,useSyncExternalStore as Xc}from"react";var _n="http://localhost:1111";function Mn(e,t={},n=15e3){let r=new AbortController;t.signal&&t.signal.addEventListener("abort",()=>r.abort());let o=setTimeout(()=>r.abort(),n);return fetch(e,h(f({},t),{signal:r.signal})).finally(()=>clearTimeout(o))}async function pa(e=_n){try{let t=await Mn(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch(t){return null}}async function Qo(e=_n){try{let t=new AbortController,n=setTimeout(()=>t.abort(),2e3),r=await fetch(`${e}/status`,{signal:t.signal});return clearTimeout(n),r.ok?await r.json():null}catch(t){return null}}async function ua(e){try{let t=new AbortController,n=setTimeout(()=>t.abort(),500),r=await fetch(`http://localhost:${e}/status`,{signal:t.signal});return clearTimeout(n),r.ok?await r.json():null}catch(t){return null}}async function fa(e){if(e&&e!=="http://localhost:1111")try{let d=new URL(e);return{url:e,port:parseInt(d.port,10)||1111}}catch(d){return null}let o=typeof window!="undefined"?window.location.origin:null,i=await ua(1111);if(i&&i.devOrigin&&o&&i.devOrigin===o)return{url:"http://localhost:1111",port:1111};let s=Array.from({length:8},(d,c)=>{let p=1112+c;return ua(p).then(u=>u?{status:u,port:p}:null)}),a=(await Promise.all(s)).filter(d=>d!==null),l=[];i&&l.push({port:1111,devOrigin:i.devOrigin});for(let d of a)l.push({port:d.port,devOrigin:d.status.devOrigin});if(o){let d=l.find(c=>c.devOrigin===o);if(d)return{url:`http://localhost:${d.port}`,port:d.port}}return l.length===1?{url:`http://localhost:${l[0].port}`,port:l[0].port}:i?{url:"http://localhost:1111",port:1111}:l.length>0?{url:`http://localhost:${l[0].port}`,port:l[0].port}:null}async function Gr(e=_n,t,n=-1){try{let r=await Mn(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return r.ok?await r.json():null}catch(r){return null}}async function ga(e,t,n=_n,r,o,i,s,a){let l=new FormData;if(e instanceof Map){let c=!0;for(let[p,u]of e){let g=encodeURIComponent(p);l.append(`screenshot-${g}`,u,`screenshot-${g}.webp`),c&&(l.append("screenshot",u,"screenshot.webp"),c=!1)}c&&l.append("screenshot",new Blob([],{type:"image/webp"}),"screenshot.webp")}else l.append("screenshot",e,"screenshot.webp");if(l.append("feedback",t),r&&l.append("color",r),o&&l.append("provider",o),i&&l.append("model",i),a&&l.append("sourceId",a),s)for(let[c,p]of s)for(let u=0;u<p.length;u++)l.append(`image-${c}-${u}`,p[u],`image-${c}-${u}.webp`);let d=await Mn(`${n}/send`,{method:"POST",body:l},3e4);if(!d.ok){let c=await d.text();throw new Error(`Bridge returned ${d.status}: ${c}`)}return d.json()}async function ma(e=_n,t){try{let n=await Mn(`${e}/mcp/install`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t?{serverUrl:t}:{})},15e3);return n.ok?await n.json():null}catch(n){return null}}async function ha(e,t=_n){let n=await Mn(`${t}/model/component`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})},1e4);if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function ya(e,t=_n){let n=await Mn(`${t}/model/component`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})},1e4);if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function Ai(e,t,n=_n){let r=await Mn(`${n}/model/token`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e,value:t})},1e4);if(!r.ok){let o=await r.text();throw new Error(`Bridge returned ${r.status}: ${o}`)}return r.json()}async function ba(e,t=_n){let n=await Mn(`${t}/model/token`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e})},1e4);if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function er(e=_n){var t;try{let n=await Mn(`${e}/model`,{},5e3);return n.ok&&(t=(await n.json()).model)!=null?t:null}catch(n){return null}}async function xa(e=_n){try{return(await Mn(`${e}/restart`,{method:"POST"},5e3)).ok||await Mn(`${e}/shutdown`,{method:"POST"},5e3),!0}catch(t){try{await Mn(`${e}/shutdown`,{method:"POST"},5e3)}catch(n){}return!0}}async function va(e=_n,t,n){let r=await Mn(`${e}/model/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n})},1e4);if(!r.ok){let o=await r.text();throw new Error(`Bridge returned ${r.status}: ${o}`)}return r.json()}async function Sa(e,t,n=_n,r,o,i,s,a){let l;if(s&&s.length>0){let d=new FormData,c=new Blob([new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,1,0,0,0,1,8,6,0,0,0,31,21,196,137,0,0,0,10,73,68,65,84,120,156,98,0,0,0,2,0,1,229,39,222,252,0,0,0,0,73,69,78,68,174,66,96,130])],{type:"image/png"});d.append("screenshot",c,"screenshot.png"),d.append("feedback",JSON.stringify({threadId:e,reply:t,color:r,provider:o,model:i,sourceId:a}));for(let p=0;p<s.length;p++)d.append(`image-reply-${p}`,s[p],`reply-image-${p}.webp`);l=await Mn(`${n}/reply`,{method:"POST",body:d},3e4)}else l=await Mn(`${n}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:e,reply:t,color:r,provider:o,model:i,sourceId:a})},3e4);if(!l.ok){let d=await l.text();throw new Error(`Bridge returned ${l.status}: ${d}`)}return l.json()}var Vr={};var Do=typeof Vr!="undefined"?Vr.hot:void 0,Ea,ka,Ta,Xr=(Ta=(ka=(Ea=Do==null?void 0:Do.data)==null?void 0:Ea.sourceId)!=null?ka:typeof localStorage!="undefined"&&localStorage.getItem("popmelt-source-id"))!=null?Ta:typeof crypto!="undefined"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2);Do!=null&&Do.data&&(Do.data.sourceId=Xr);try{typeof localStorage!="undefined"&&localStorage.setItem("popmelt-source-id",Xr)}catch(e){}function Bi(){return Xr}var _o=typeof Vr!="undefined"?Vr.hot:void 0,un=_o==null?void 0:_o.data,Kc={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},Ma,or=(Ma=un==null?void 0:un.store)!=null?Ma:f({},Kc),Ia,Yr=(Ia=un==null?void 0:un.listeners)!=null?Ia:new Set,Ra,Oo=(Ra=un==null?void 0:un.activeEs)!=null?Ra:null,La,Oi=(La=un==null?void 0:un.activeBridgeUrl)!=null?La:null,Ao=null,Aa,Jr=(Aa=un==null?void 0:un.connectionGeneration)!=null?Aa:0;_o!=null&&_o.data&&Object.defineProperties(_o.data,{store:{get:()=>or,configurable:!0},listeners:{get:()=>Yr,configurable:!0},activeEs:{get:()=>Oo,configurable:!0},activeBridgeUrl:{get:()=>Oi,configurable:!0},connectionGeneration:{get:()=>Jr,configurable:!0},discoveredBridgeUrl:{get:()=>Bo,configurable:!0}});var Ur=new Set,nr=new Map,xo={};function Po(e,t){var r;if(!e)return!1;if(Ur.has(e)){let o=nr.get(e);return o||(o=[],nr.set(e,o)),o.push({type:(r=t.type)!=null?r:"",data:t}),!0}let n=xo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function qc(e,t,n){let r=()=>n!==Jr;for(let o of t){if(r())return;Ur.add(o),nr.set(o,[])}await Promise.all(t.map(async o=>{var i;try{let s=await Gr(e,o);if(r())return;let a=(i=nr.get(o))!=null?i:[];if(s){if(en(l=>{let d=h(f({},l.jobResponses),{[o]:s.accumulated.response}),c=h(f({},l.jobThinking),{[o]:s.accumulated.thinking}),p=[...l.events];for(let u of s.events)u.type==="done"||u.type==="error"||p.push({type:u.type,data:u,timestamp:Date.now()});return h(f({},l),{jobResponses:d,jobThinking:c,currentResponse:o===l.activeJobId?s.accumulated.response:l.currentResponse,currentThinking:o===l.activeJobId?s.accumulated.thinking:l.currentThinking,events:p})}),xo[o]=s.currentSeq,!s.jobActive){let l=s.events.find(d=>d.type==="done"||d.type==="error");l&&Pi(l.type,l,o)}for(let l of a)typeof l.data.seq=="number"&&l.data.seq<=s.currentSeq||Pi(l.type,l.data,o)}else for(let l of a)Pi(l.type,l.data,o)}finally{Ur.delete(o),nr.delete(o)}}))}function Pi(e,t,n){var r;if(e==="delta"){let o=t.text||"";en(i=>h(f({},i),{jobResponses:h(f({},i.jobResponses),{[n]:(i.jobResponses[n]||"")+o}),currentResponse:n===i.activeJobId?i.currentResponse+o:i.currentResponse,events:[...i.events,{type:"delta",data:t,timestamp:Date.now()}]}))}else if(e==="thinking"){let o=t.text||"";en(i=>h(f({},i),{jobThinking:h(f({},i.jobThinking),{[n]:(i.jobThinking[n]||"")+o}),currentThinking:n===i.activeJobId?i.currentThinking+o:i.currentThinking,events:[...i.events,{type:"thinking",data:t,timestamp:Date.now()}]}))}else if(e==="done")delete xo[n],en(o=>{var c;let i=o.activeJobIds.filter(p=>p!==n),s=f({},o.jobResponses),a=f({},o.jobThinking),l=s[n];delete s[n],delete a[n];let d=n===o.activeJobId?i.length>0?i[i.length-1]:null:o.activeJobId;return h(f(h(f({},o),{activeJobIds:i,activeJobId:d,jobResponses:s,jobThinking:a,lastCompletedJobId:n,lastResponseText:l||o.currentResponse||t.responseText||null,lastThreadId:(c=t.threadId)!=null?c:null}),n===o.activeJobId?{currentResponse:d&&s[d]||"",currentThinking:d&&a[d]||""}:{}),{events:[...o.events,{type:"done",data:t,timestamp:Date.now()}]})});else if(e==="error"){delete xo[n];let o=(r=t.message)!=null?r:"";en(i=>{let s=i.activeJobIds.filter(l=>l!==n),a=s.length>0?i.status:"error";return h(f({},i),{status:a,activeJobIds:s,lastCompletedJobId:n,lastErrorByJob:o?h(f({},i.lastErrorByJob),{[n]:o}):i.lastErrorByJob,events:[...i.events,{type:"error",data:t,timestamp:Date.now()}]})})}else en(o=>h(f({},o),{events:[...o.events,{type:e,data:t,timestamp:Date.now()}]}))}var Pa,Bo=(Pa=un==null?void 0:un.discoveredBridgeUrl)!=null?Pa:null,tr=null;async function Zc(e){return e&&e!=="http://localhost:1111"?(Bo=e,e):Bo||tr||(tr=fa(e).then(n=>{var r;return Bo=(r=n==null?void 0:n.url)!=null?r:null,tr=null,Bo}).catch(()=>(tr=null,null)),tr)}function Oa(){return Bo}function Ca(){return or}function Qc(e){return Yr.add(e),()=>{Yr.delete(e)}}function en(e){or=e(or);for(let t of Yr)t()}function Ba(e){if(Oo&&Oo.readyState!==EventSource.CLOSED&&Oi===e)return;Oo&&(Oo.close(),Oo=null),Ao&&(clearTimeout(Ao),Ao=null),Oi=e;let t=++Jr,n=new EventSource(`${e}/events?sourceId=${Xr}`);Oo=n;let r=()=>t!==Jr;n.addEventListener("connected",()=>{r()||Qo(e).then(o=>{var u,g;if(r())return;let i=(u=o==null?void 0:o.activeJobs)!=null?u:o!=null&&o.activeJob?[o.activeJob]:[],s=new Set(i.map(b=>b.id)),a=(g=o==null?void 0:o.recentJobs)!=null?g:[],l=new Map(a.map(b=>[b.id,b])),d=i.length>0;en(b=>{let v=f({},b.lastErrorByJob),R=b.activeJobIds.filter(L=>!s.has(L));for(let L of R){let A=l.get(L);(A==null?void 0:A.status)==="error"&&A.error&&(v[L]=A.error)}let C=b.activeJobIds.filter(L=>s.has(L));for(let L of s)C.includes(L)||C.push(L);let G={};for(let L of i)L.threadId&&(G[L.id]=L.threadId);return h(f({},b),{isConnected:!0,status:d?"streaming":R.length>0||b.status==="disconnected"?"idle":b.status,activeJobId:d?i[i.length-1].id:C.length>0?C[C.length-1]:null,activeJobIds:C,activeJobThreads:G,lastErrorByJob:v,lastCompletedJobId:R.length>0?R[R.length-1]:b.lastCompletedJobId})});let c=or.activeJobIds.filter(b=>!s.has(b)),p=[...Array.from(s),...c];p.length>0&&qc(e,p,t).catch(()=>{})})}),n.addEventListener("job_started",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;if(Po(s,i))return;let a=i.threadId;en(l=>{var d,c,p,u;return h(f({},l),{status:"streaming",activeJobId:s,activeJobIds:l.activeJobIds.includes(s)?l.activeJobIds:[...l.activeJobIds,s],activeJobThreads:a?h(f({},l.activeJobThreads),{[s]:a}):l.activeJobThreads,jobResponses:h(f({},l.jobResponses),{[s]:(d=l.jobResponses[s])!=null?d:""}),jobThinking:h(f({},l.jobThinking),{[s]:(c=l.jobThinking[s])!=null?c:""}),currentResponse:(p=l.jobResponses[s])!=null?p:"",currentThinking:(u=l.jobThinking[s])!=null?u:"",lastResponseText:null,lastThreadId:null,events:[...l.events,{type:"job_started",data:i,timestamp:Date.now()}]})})}),n.addEventListener("delta",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;if(Po(s,i))return;let a=i.text||"";en(l=>h(f({},l),{jobResponses:s?h(f({},l.jobResponses),{[s]:(l.jobResponses[s]||"")+a}):l.jobResponses,currentResponse:!s||s===l.activeJobId?l.currentResponse+a:l.currentResponse,events:[...l.events,{type:"delta",data:i,timestamp:Date.now()}]}))}),n.addEventListener("thinking",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;if(Po(s,i))return;let a=i.text||"";en(l=>h(f({},l),{jobThinking:s?h(f({},l.jobThinking),{[s]:(l.jobThinking[s]||"")+a}):l.jobThinking,currentThinking:!s||s===l.activeJobId?l.currentThinking+a:l.currentThinking,events:[...l.events,{type:"thinking",data:i,timestamp:Date.now()}]}))}),n.addEventListener("tool_use",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;Po(s,i)||en(a=>h(f({},a),{events:[...a.events,{type:"tool_use",data:i,timestamp:Date.now()}]}))}),n.addEventListener("done",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;Po(s,i)||(s&&delete xo[s],en(a=>{var b;let l=s?a.activeJobIds.filter(v=>v!==s):a.activeJobIds,d=f({},a.jobResponses),c=f({},a.jobThinking),p=f({},a.activeJobThreads),u=s?d[s]:void 0;s&&(delete d[s],delete c[s],delete p[s]);let g=s===a.activeJobId?l.length>0?l[l.length-1]:null:a.activeJobId;return h(f(h(f({},a),{activeJobIds:l,activeJobId:g,jobResponses:d,jobThinking:c,lastCompletedJobId:s!=null?s:a.activeJobId,lastResponseText:u||a.currentResponse||i.responseText||null,lastThreadId:(b=i.threadId)!=null?b:null}),s===a.activeJobId?{currentResponse:g&&d[g]||"",currentThinking:g&&c[g]||""}:{}),{events:[...a.events,{type:"done",data:i,timestamp:Date.now()}]})}))}),n.addEventListener("question",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;Po(s,i)||en(a=>h(f({},a),{pendingQuestions:[...a.pendingQuestions,{jobId:i.jobId,threadId:i.threadId,question:i.question,annotationIds:i.annotationIds,timestamp:Date.now()}],events:[...a.events,{type:"question",data:i,timestamp:Date.now()}]}))}),n.addEventListener("capabilities_changed",()=>{r()||en(o=>h(f({},o),{capabilitiesVersion:o.capabilitiesVersion+1}))}),n.addEventListener("queue_drained",()=>{if(!r()){for(let o of Object.keys(xo))delete xo[o];Ur.clear(),nr.clear(),en(o=>h(f({},o),{status:o.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}}),n.addEventListener("error",o=>{var i,s;if(!r()){if(n.readyState===EventSource.CLOSED)en(a=>h(f({},a),{isConnected:!1,status:"disconnected"})),Ao&&(clearTimeout(Ao),Ao=null),Ao=setTimeout(()=>{Qo(e).then(a=>{a&&Ba(e)})},5e3);else if(o instanceof MessageEvent){let a=JSON.parse(o.data),l=(i=a.jobId)!=null?i:null;if(Po(l!=null?l:void 0,a))return;l&&delete xo[l];let d=(s=a.message)!=null?s:"";en(c=>{let p=l?c.activeJobIds.filter(g=>g!==l):c.activeJobIds,u=p.length>0?c.status:"error";return h(f({},c),{status:u,activeJobIds:p,lastCompletedJobId:l!=null?l:c.activeJobId,lastErrorByJob:l&&d?h(f({},c.lastErrorByJob),{[l]:d}):c.lastErrorByJob,events:[...c.events,{type:"error",data:a,timestamp:Date.now()}]})})}}}),n.onerror=()=>{r()||n.readyState===EventSource.CLOSED&&en(o=>h(f({},o),{isConnected:!1,status:"disconnected"}))}}function Da(e="http://localhost:1111",t=!0){let n=Xc(Qc,Ca,Ca);Vc(()=>{t&&Zc(e).then(i=>{i&&Qo(i).then(s=>{s&&Ba(i)})})},[e,t]);let r=wa(()=>{en(()=>h(f({},or),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),o=wa(i=>{en(s=>h(f({},s),{pendingQuestions:s.pendingQuestions.filter(a=>a.threadId!==i)}))},[]);return h(f({},n),{clearEvents:r,dismissQuestion:o})}import{useEffect as ed,useReducer as td}from"react";var nd={isAnnotating:!1,activeTool:"inspector",activeColor:"oklch(0.628 0.258 29)",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function Kr(){return Math.random().toString(36).substring(2,9)}function _a(e){return e.status?e:e.captured?h(f({},e),{status:"in_flight"}):h(f({},e),{status:"pending"})}function In(e){return h(f({},e),{undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]})}function od(e,t){return h(f({},e),{isAnnotating:t})}function rd(e,t){return h(f({},e),{activeTool:t,inspectedElement:null})}function id(e,t){return h(f({},e),{activeColor:t})}function sd(e,t){return h(f({},e),{strokeWidth:t})}function ad(e,t){return h(f({},e),{currentPath:[t]})}function ld(e,t){return h(f({},e),{currentPath:[...e.currentPath,t]})}function cd(e){return h(f({},e),{currentPath:[]})}function dd(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return h(f({},e),{currentPath:[]});let n={id:Kr(),type:e.activeTool,points:e.currentPath,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window!="undefined"?window.location.pathname:"/",groupId:t==null?void 0:t.groupId,elements:t==null?void 0:t.elements},r=In(e);return h(f({},r),{annotations:[...e.annotations,n],currentPath:[]})}function ud(e,t){var o;let n=f({id:(o=t.id)!=null?o:Kr(),type:"text",points:[t.point],text:t.text,fontSize:t.fontSize||12,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window!="undefined"?window.location.pathname:"/",groupId:t.groupId,linkedSelector:t.linkedSelector,linkedAnchor:t.linkedAnchor,elements:t.elements},t.imageCount?{imageCount:t.imageCount}:{}),r=t.groupId?e:In(e);return h(f({},r),{annotations:[...e.annotations,n]})}function pd(e,t){let n=In(e);return h(f({},n),{annotations:e.annotations.map(r=>r.id===t.id?f(h(f({},r),{text:t.text}),t.imageCount!=null?{imageCount:t.imageCount}:{}):r)})}function fd(e,t){return h(f({},e),{annotations:e.annotations.map(n=>n.id===t.id?h(f({},n),{fontSize:Math.max(12,Math.min(72,t.fontSize))}):n)})}function gd(e,t){let n=In(e),r=e.annotations.find(i=>i.id===t.id),o=r==null?void 0:r.groupId;return h(f({},n),{annotations:e.annotations.filter(i=>i.id!==t.id&&!(o&&i.groupId===o))})}function md(e,t){let n=t.saveUndo?In(e):e,r=e.annotations.find(i=>i.id===t.id),o=r==null?void 0:r.groupId;return h(f({},n),{annotations:e.annotations.map(i=>{if(!(i.id===t.id||o&&i.groupId===o))return i;let a=t.delta.x,l=t.delta.y;return h(f({},i),{points:i.points.map(d=>({x:d.x+a,y:d.y+l}))})})})}function hd(e,t){let n=t.saveUndo?In(e):e,r=e.annotations.find(s=>s.id===t.id);if(!r||r.type==="text"||r.points.length<2)return e;let o=0,i=0;if(r.type==="rectangle"&&r.groupId){let s=t.points,a=Math.min(s[0].x,s[1].x),l=Math.max(s[0].y,s[1].y),d=r.points[0],c=r.points[r.points.length-1],p=Math.min(d.x,c.x),u=Math.max(d.y,c.y);o=a-p,i=l-u}return h(f({},n),{annotations:e.annotations.map(s=>s.id===t.id?h(f({},s),{points:t.points}):r.groupId&&s.groupId===r.groupId&&s.type==="text"?h(f({},s),{points:s.points.map(a=>({x:a.x+o,y:a.y+i}))}):s)})}function yd(e,t){let n=In(e);return h(f({},n),{annotations:[...e.annotations,...t.annotations.map(_a)]})}function bd(e,t){let n=new Set,r=[];for(let o of t.annotations)n.has(o.id)||(n.add(o.id),r.push(_a(o)));return h(f({},e),{annotations:r})}function xd(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return h(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],undoStack:e.undoStack.slice(0,-1),redoStack:[...e.redoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function vd(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return h(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],redoStack:e.redoStack.slice(0,-1),undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function Sd(e,t){let{id:n,addToSelection:r}=t;if(n===null)return h(f({},e),{selectedAnnotationIds:[],lastSelectedId:null});if(r)if(e.selectedAnnotationIds.includes(n)){let i=e.selectedAnnotationIds.filter(s=>s!==n);return h(f({},e),{selectedAnnotationIds:i,lastSelectedId:i.length>0?i[i.length-1]:null})}else return h(f({},e),{selectedAnnotationIds:[...e.selectedAnnotationIds,n],lastSelectedId:n});return h(f({},e),{selectedAnnotationIds:[n],lastSelectedId:n})}function wd(e,t){let n=new Set;for(let r of e.selectedAnnotationIds){let o=e.annotations.find(i=>i.id===r);o!=null&&o.groupId&&n.add(o.groupId)}return h(f({},e),{annotations:e.annotations.map(r=>{let o=e.selectedAnnotationIds.includes(r.id),i=r.groupId&&n.has(r.groupId);return!o&&!i?r:h(f({},r),{color:t.color})})})}function Cd(e){return h(f({},e),{annotations:e.annotations.map(t=>h(f({},t),{captured:!0,status:t.status==="pending"||!t.status?"in_flight":t.status})),styleModifications:e.styleModifications.map(t=>h(f({},t),{captured:!0})),spacingTokenChanges:e.spacingTokenChanges.map(t=>h(f({},t),{captured:!0}))})}function Ed(e){return h(f({},e),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function kd(e,t){return h(f({},e),{inspectedElement:t})}function Td(e,t){let{selector:n,element:r,property:o,original:i,modified:s}=t,a=e.styleModifications.findIndex(l=>l.selector===n);if(i===s&&a<0)return e;if(a>=0){let l=e.styleModifications[a];if(l.captured){let g=In(e),b=g.styleModifications.map((v,R)=>R===a?h(f({},v),{changes:[{property:o,original:i,modified:s}],captured:!1}):v);return h(f({},g),{styleModifications:b})}let d=l.changes.findIndex(g=>g.property===o),c,p=e;if(d>=0){let g=l.changes[d];s===g.original?c=l.changes.filter((b,v)=>v!==d):c=l.changes.map((b,v)=>v===d?h(f({},b),{modified:s}):b)}else{if(i===s)return e;p=In(e),c=[...l.changes,{property:o,original:i,modified:s}]}if(c.length===0)return h(f({},p),{styleModifications:p.styleModifications.filter((g,b)=>b!==a)});let u=p.styleModifications.map((g,b)=>b===a?h(f({},g),{changes:c}):g);return h(f({},p),{styleModifications:u})}else{let l=In(e),d={selector:n,element:r,changes:[{property:o,original:i,modified:s}]};return h(f({},l),{styleModifications:[...l.styleModifications,d]})}}function Md(e,t){let{selector:n,durableSelector:r,element:o,changes:i}=t,s=i.filter(d=>d.original!==d.modified);if(s.length===0)return e;let a=In(e),l=a.styleModifications.findIndex(d=>d.selector===n);if(l>=0){let d=a.styleModifications[l],c=d.captured?[]:[...d.changes];for(let p of s){let u=c.findIndex(g=>g.property===p.property);u>=0?p.modified===c[u].original?c=c.filter((g,b)=>b!==u):c=c.map((g,b)=>b===u?h(f({},g),{modified:p.modified}):g):c.push(p)}return c.length===0?h(f({},a),{styleModifications:a.styleModifications.filter((p,u)=>u!==l)}):h(f({},a),{styleModifications:a.styleModifications.map((p,u)=>u===l?h(f({},p),{changes:c,captured:!1}):p)})}else return h(f({},a),{styleModifications:[...a.styleModifications,{selector:n,durableSelector:r,element:o,changes:s}]})}function Id(e,t){let{selector:n,property:r}=t,o=In(e),i=o.styleModifications.map(s=>s.selector!==n?s:h(f({},s),{changes:s.changes.filter(a=>a.property!==r)})).filter(s=>s.changes.length>0);return h(f({},o),{styleModifications:i})}function Rd(e){if(e.styleModifications.length===0)return h(f({},e),{inspectedElement:null});let t=In(e);return h(f({},t),{styleModifications:[],inspectedElement:null})}function Ld(e,t){return h(f({},e),{styleModifications:t})}function Ad(e,t){let{updates:n}=t,r=new Map(n.map(o=>[o.id,o]));return h(f({},e),{annotations:e.annotations.map(o=>{let i=r.get(o.id);return i?f(h(f({},o),{points:[i.point,...o.points.slice(1)]}),i.linkedAnchor?{linkedAnchor:i.linkedAnchor}:{}):o})})}function Pd(e,t){let n=new Set(t.ids);return h(f({},e),{annotations:e.annotations.map(r=>n.has(r.id)?h(f({},r),{status:t.status}):r)})}function Od(e,t){let n=new Set(t.ids),r=new Set;for(let o of e.annotations)n.has(o.id)&&o.groupId&&r.add(o.groupId);return h(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)||o.groupId&&r.has(o.groupId)?h(f({},o),{threadId:t.threadId}):o)})}function Bd(e,t){let n=new Set(t.ids),r=new Set;for(let o of e.annotations)n.has(o.id)&&o.groupId&&r.add(o.groupId);return h(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)||o.groupId&&r.has(o.groupId)?h(f({},o),{status:"waiting_input",question:t.question,threadId:t.threadId}):o)})}function Dd(e,t){let n=new Map(t.resolutions.map(o=>[o.annotationId,o])),r=new Map;for(let o of e.annotations){let i=n.get(o.id);i&&o.groupId&&r.set(o.groupId,i)}return h(f({},e),{annotations:e.annotations.map(o=>{var s,a,l;let i=n.get(o.id)||(o.groupId?r.get(o.groupId):void 0);return i?h(f({},o),{status:i.status,resolutionSummary:i.summary,scope:(a=(s=i.finalScope)!=null?s:i.inferredScope)!=null?a:null,replyCount:((l=o.replyCount)!=null?l:0)+1,question:void 0,threadId:o.threadId||t.threadId}):o})})}function _d(e,t){let{linkedSelectors:n,styleSelectors:r}=t,o=new Set(n),i=new Set(r),s=new Set,a=new Set;for(let u of e.annotations)u.linkedSelector&&o.has(u.linkedSelector)&&(s.add(u.id),u.groupId&&a.add(u.groupId));for(let u of e.annotations)u.groupId&&a.has(u.groupId)&&s.add(u.id);let l=e.annotations.filter(u=>!s.has(u.id)),d=e.styleModifications.filter(u=>!i.has(u.selector));if(l.length===e.annotations.length&&d.length===e.styleModifications.length)return e;let c=e.selectedAnnotationIds.filter(u=>!s.has(u)),p=e.inspectedElement&&i.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return h(f({},e),{annotations:l,styleModifications:d,selectedAnnotationIds:c,lastSelectedId:c.length>0?c[c.length-1]:null,inspectedElement:p})}function Nd(e,t){let n=e.spacingTokenChanges.findIndex(r=>r.tokenPath===t.tokenPath);return n>=0?h(f({},e),{spacingTokenChanges:e.spacingTokenChanges.map((r,o)=>o===n?t:r)}):h(f({},e),{spacingTokenChanges:[...e.spacingTokenChanges,t]})}function Hd(e,t){return h(f({},e),{spacingTokenChanges:t})}function Fd(e,t){let n=In(e),r=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),o;if(r>=0){let i=e.spacingTokenMods[r],s=h(f({},t),{originalValue:i.originalValue,originalPx:i.originalPx});o=e.spacingTokenMods.map((a,l)=>l===r?s:a)}else o=[...e.spacingTokenMods,t];return h(f({},n),{spacingTokenMods:o})}function $d(e,t){let n=In(e),r=e.spacingTokenMods.findIndex(l=>l.tokenPath===t.tokenPath),o=r>=0?e.spacingTokenMods[r].originalValue:t.originalValue,i=r>=0?e.spacingTokenMods[r].originalPx:parseFloat(t.originalValue)||0,s={tokenPath:t.tokenPath,originalValue:o,currentValue:"__deleted__",targets:r>=0?e.spacingTokenMods[r].targets:[],originalPx:i,currentPx:0},a;return r>=0?a=e.spacingTokenMods.map((l,d)=>d===r?s:l):a=[...e.spacingTokenMods,s],h(f({},n),{spacingTokenMods:a})}var zd={SET_ANNOTATING:od,SET_TOOL:rd,SET_COLOR:id,SET_STROKE_WIDTH:sd,START_PATH:ad,CONTINUE_PATH:ld,CANCEL_PATH:cd,FINISH_PATH:dd,ADD_TEXT:ud,UPDATE_TEXT:pd,UPDATE_TEXT_SIZE:fd,DELETE_ANNOTATION:gd,MOVE_ANNOTATION:md,RESIZE_ANNOTATION:hd,PASTE_ANNOTATIONS:yd,RESTORE_ANNOTATIONS:bd,UNDO:xd,REDO:vd,SELECT_ANNOTATION:Sd,UPDATE_ANNOTATION_COLOR:wd,MARK_CAPTURED:Cd,CLEAR:Ed,SELECT_ELEMENT:kd,MODIFY_STYLE:Td,MODIFY_STYLES_BATCH:Md,CLEAR_STYLE:Id,CLEAR_ALL_STYLES:Rd,RESTORE_STYLE_MODIFICATIONS:Ld,UPDATE_LINKED_POSITIONS:Ad,CLEANUP_ORPHANED:_d,SET_ANNOTATION_STATUS:Pd,SET_ANNOTATION_THREAD:Od,SET_ANNOTATION_QUESTION:Bd,APPLY_RESOLUTIONS:Dd,ADD_SPACING_TOKEN_CHANGE:Nd,RESTORE_SPACING_TOKEN_CHANGES:Hd,MODIFY_SPACING_TOKEN:Fd,DELETE_SPACING_TOKEN:$d};function Wd(e,t){let n=zd[t.type];return n?n(e,t.payload):e}function Na(){let[e,t]=td(Wd,nd);return ed(()=>{let n=r=>{(r.metaKey||r.ctrlKey)&&r.key==="z"&&(r.preventDefault(),r.shiftKey?t({type:"REDO"}):t({type:"UNDO"}))};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[]),[e,t]}import{useSyncExternalStore as jd}from"react";if(typeof window!="undefined"&&!window.__popmeltPathPatch){window.__popmeltPathPatch=!0;for(let e of["pushState","replaceState"]){let t=History.prototype[e];History.prototype[e]=function(...n){let r=window.location.pathname;t.apply(this,n),window.dispatchEvent(new CustomEvent("popmelt:locationchange",{detail:{prevPath:r}}))}}}function Gd(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function Yd(){return window.location.pathname}function rr(){return jd(Gd,Yd,()=>"/")}var Ha="popmelt-toolbar-snap-position";function No(e){return e.startsWith("top-")}function Ho(e){return e.endsWith("-right")}function Mr(e){return e.endsWith("-center")}function Fa(){try{let e=localStorage.getItem(Ha);if(e&&Jd(e))return e}catch(e){}return"bottom-right"}function $a(e){try{localStorage.setItem(Ha,e)}catch(t){}}function Jd(e){return["bottom-right","bottom-center","bottom-left","top-right","top-center","top-left"].includes(e)}function za(e,t,n){let r=No(e)?16:n-16-54;return Mr(e)?{position:"fixed",top:r,left:t/2,transform:"translateX(-50%)"}:Ho(e)?{position:"fixed",top:r,right:16,left:"auto"}:{position:"fixed",top:r,left:16,right:"auto"}}function Wa(e,t,n){let o=No(e)?{top:82}:{bottom:82},i;return Mr(e)?i={left:t/2,transform:"translateX(-50%)"}:Ho(e)?i={right:16}:i={left:16},f(f({position:"fixed"},o),i)}function ja(e,t,n){let r=No(e),o=r?{top:78}:{bottom:78},i,s;return Mr(e)?(i={left:"50%",transform:"translateX(-50%)"},s="center"):Ho(e)?(i={right:16},s="flex-end"):(i={left:16},s="flex-start"),h(f(f({position:"fixed"},o),i),{zIndex:9999,display:"flex",flexDirection:"column",alignItems:s})}function Ga(e){let t=No(e),n=Ho(e)||Mr(e);return{position:"fixed",top:t&&n?82:16,right:16,bottom:!t&&n?82:16}}function Ya(e,t,n){let o=No(e),i,s;Ho(e)||Mr(e)?(i=t-16,s=i-326):(s=16,i=s+326);let a=o?82:n-16-54-12;return{left:s,right:i,y:a}}var Ja=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"];import{domToCanvas as Ud}from"modern-screenshot";function Di(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function _i(e,t=[],n,r){let o=new Map,i=[];for(let a of e)if(a.groupId){let l=o.get(a.groupId)||[];l.push(a),o.set(a.groupId,l)}else i.push(a);let s=[];for(let[a,l]of o){let d=l.find(p=>p.type!=="text"),c=l.find(p=>p.type==="text");if(d){let p=d.linkedSelector||(c==null?void 0:c.linkedSelector),u=(c==null?void 0:c.imageCount)||d.imageCount,g=d.pathname||(c==null?void 0:c.pathname);s.push(f(h(f(f({id:d.id,type:d.type,instruction:c==null?void 0:c.text},p?{linkedSelector:p}:{}),g?{pathname:g}:{}),{elements:d.elements||[]}),u?{imageCount:u}:{}))}}for(let a of i)s.push(f(h(f(f({id:a.id,type:a.type,instruction:a.type==="text"?a.text:void 0},a.linkedSelector?{linkedSelector:a.linkedSelector}:{}),a.pathname?{pathname:a.pathname}:{}),{elements:a.elements||[]}),a.imageCount?{imageCount:a.imageCount}:{}));return f(f({timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:s,styleModifications:t},n?{inspectedElement:n}:{}),r&&r.length>0?{spacingTokenChanges:r}:{})}function Vd(e){if(!e.points||e.points.length===0)return null;let t=e.points.map(r=>r.x),n=e.points.map(r=>r.y);return{minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)}}function Xd(e,t){if(e.length===0)return[];let n=e.map(c=>({annotation:c,bounds:Vd(c)})).filter(c=>c.bounds!==null);if(n.length===0)return[];n.sort((c,p)=>c.bounds.minY-p.bounds.minY);let r=Math.min(...n.map(c=>c.bounds.minY)),o=Math.max(...n.map(c=>c.bounds.maxY));if(o-r<=t){let c=(r+o)/2,p=Math.max(0,c-t/2);return[{top:p,bottom:p+t,annotations:e}]}let i=[],s=50,a=Math.max(0,r-s),l=[],d=a;for(let{annotation:c,bounds:p}of n){let u=p.maxY+s;if(u-a<=t)l.push(c),d=Math.max(d,u);else{if(l.length>0){let g=(a+d)/2,b=Math.max(0,g-t/2);i.push({top:b,bottom:b+t,annotations:l})}a=Math.max(0,p.minY-s),l=[c],d=p.maxY+s}}if(l.length>0){let c=(a+d)/2,p=Math.max(0,c-t/2);i.push({top:p,bottom:p+t,annotations:l})}return i}function Kd(e){let t=new Map;for(let n of e)if(n.linkedSelector)try{let r=document.querySelector(n.linkedSelector);if(r){let o=r.getBoundingClientRect();t.set(n.id,{x:o.left+window.scrollX,y:o.top+window.scrollY,width:o.width,height:o.height})}}catch(r){}return t}function qd(e,t,n,r,o){if(e.save(),e.scale(r,r),o)for(let i of t){let s=o.get(i.id);if(!s)continue;let a=s.y-n;e.fillStyle=i.color,e.globalAlpha=.05,e.fillRect(s.x,a,s.width,s.height),e.globalAlpha=1,e.strokeStyle=i.color,e.lineWidth=1,e.setLineDash([2,4]),e.strokeRect(s.x,a,s.width,s.height),e.setLineDash([])}for(let i of t){let s=i.points.map(a=>({x:a.x,y:a.y-n}));switch(e.strokeStyle=i.color,e.fillStyle=i.color,e.lineWidth=i.strokeWidth,e.lineCap="round",e.lineJoin="round",i.type){case"freehand":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y);for(let a=1;a<s.length;a++)e.lineTo(s[a].x,s[a].y);e.stroke();break;case"line":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y),e.lineTo(s[s.length-1].x,s[s.length-1].y),e.stroke();break;case"rectangle":{if(s.length<2)break;let a=s[0],l=s[s.length-1],d=Math.min(a.x,l.x),c=Math.min(a.y,l.y),p=Math.abs(l.x-a.x),u=Math.abs(l.y-a.y);e.strokeRect(d,c,p,u);break}case"circle":{if(s.length<2)break;let a=s[0],l=s[s.length-1],d=(a.x+l.x)/2,c=(a.y+l.y)/2,p=Math.abs(l.x-a.x)/2,u=Math.abs(l.y-a.y)/2;e.beginPath(),e.ellipse(d,c,p,u,0,0,Math.PI*2),e.stroke();break}case"text":{if(!i.text||s.length<1)break;let a=s[0],l=i.fontSize||16;e.font=`${l}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=i.color;let c=(i.imageCount&&i.imageCount>0?`[${i.imageCount} image${i.imageCount>1?"s":""}] ${i.text}`:i.text).split(`
|
|
3
|
+
`),p=l*1.2,u=4,g=0;for(let b of c)g=Math.max(g,e.measureText(b).width);e.fillRect(a.x-u,a.y-u,g+u*2,c.length*p+u*2),e.fillStyle="#ffffff",c.forEach((b,v)=>{e.fillText(b,a.x,a.y+l+v*p)});break}}}e.restore()}async function Ir(e,t,n=[],r){var o;try{let i=(o=r==null?void 0:r.dpr)!=null?o:window.devicePixelRatio||1,s=window.innerWidth,a=window.innerHeight,l=n.filter(u=>{var g;return((g=u.status)!=null?g:"pending")==="pending"});console.log("[Screenshot] Starting capture with",l.length,"active annotations (filtered",n.length-l.length,"captured)");let d=Kd(l),c=Xd(l,a);if(c.length===0){let u=await Ua(e,[],window.scrollY,s,a,i,d);return u?[u]:[]}let p=[];for(let u=0;u<c.length;u++){let g=c[u],b=await Ua(e,g.annotations,g.top,s,a,i,d);b?p.push(b):console.warn(`[Screenshot] Region ${u+1} failed to capture`)}return console.log("[Screenshot] Capture complete"),p}catch(i){return console.error("[Screenshot] Capture failed:",i),[]}}async function Ua(e,t,n,r,o,i,s){try{let a=getComputedStyle(document.documentElement).backgroundColor,d=await Ud(e,{filter:u=>!(u instanceof HTMLElement&&(u.id==="devtools-canvas"||u.id==="devtools-toolbar"||u.id==="devtools-scrim"||u.dataset.devtools!==void 0)),scale:i,backgroundColor:a&&a!=="rgba(0, 0, 0, 0)"&&a!=="transparent"?a:"#ffffff",width:r,height:o,style:{transform:`translate(${-window.scrollX}px, ${-n}px)`}}),c=document.createElement("canvas");c.width=r*i,c.height=o*i;let p=c.getContext("2d");return p?(p.drawImage(d,0,0,r*i,o*i,0,0,r*i,o*i),qd(p,t,n,i,s),new Promise(u=>{c.toBlob(g=>u(g),"image/webp",.8)})):null}catch(a){return console.error("Region capture failed:",a),null}}async function Rr(e){if(e.length===0)return null;if(e.length===1)return e[0];let t=await Promise.all(e.map(a=>new Promise((l,d)=>{let c=new Image;c.onload=()=>l(c),c.onerror=d,c.src=URL.createObjectURL(a)}))),n=t[0].width,r=t.reduce((a,l)=>a+l.height,0),o=document.createElement("canvas");o.width=n,o.height=r;let i=o.getContext("2d");if(!i)return null;let s=0;for(let a of t)i.drawImage(a,0,s),s+=a.height,URL.revokeObjectURL(a.src);return new Promise(a=>{o.toBlob(l=>a(l),"image/webp",.8)})}async function Va(e,t,n){try{let r=Array.isArray(e)?e:[e];if(r.length===0)return!1;let o=await Rr(r);if(!o)return!1;let i=o;if(o.type!=="image/png"){let d=new Image,c=URL.createObjectURL(o);await new Promise(u=>{d.onload=()=>u(),d.src=c}),URL.revokeObjectURL(c);let p=document.createElement("canvas");p.width=d.naturalWidth,p.height=d.naturalHeight,p.getContext("2d").drawImage(d,0,0),i=await new Promise(u=>p.toBlob(g=>u(g),"image/png"))}let s={"image/png":i},a=t&&t.length>0,l=n&&n.length>0;if(a||l){let d=t?t.filter(c=>{var p;return((p=c.status)!=null?p:"pending")==="pending"}):[];if(d.length>0||l){let c=_i(d,n||[]),p=new Blob([JSON.stringify(c,null,2)],{type:"text/plain"});s["text/plain"]=p}}return await navigator.clipboard.write([new ClipboardItem(s)]),!0}catch(r){return console.warn("Clipboard write failed:",r),!1}}import{useCallback as nn,useEffect as yn,useMemo as hi,useRef as Yt,useState as bt}from"react";import{useCallback as ar,useRef as Qd}from"react";function Ni(e,t,n,r){if(t.length<2)return;let o=t[0],i=t[t.length-1];if(!o||!i)return;let s=(o.x+i.x)/2,a=(o.y+i.y)/2,l=Math.abs(i.x-o.x)/2,d=Math.abs(i.y-o.y)/2;e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.ellipse(s,a,l,d,0,0,Math.PI*2),e.stroke()}function Hi(e,t,n,r){if(t.length<2)return;let o=t[0],i=t[t.length-1];if(!(!o||!i)){e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.lineCap="round",e.lineJoin="round",e.moveTo(o.x,o.y);for(let s=1;s<t.length-1;s++){let a=t[s],l=t[s+1];if(!a||!l)continue;let d=(a.x+l.x)/2,c=(a.y+l.y)/2;e.quadraticCurveTo(a.x,a.y,d,c)}e.lineTo(i.x,i.y),e.stroke()}}function Fi(e,t,n,r){if(t.length<2)return;let o=t[0],i=t[t.length-1];!o||!i||(e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.lineCap="round",e.moveTo(o.x,o.y),e.lineTo(i.x,i.y),e.stroke())}function $i(e,t,n,r){if(t.length<2)return;let o=t[0],i=t[t.length-1];if(!o||!i)return;let s=Math.min(o.x,i.x),a=Math.min(o.y,i.y),l=Math.abs(i.x-o.x),d=Math.abs(i.y-o.y);e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.lineCap="round",e.lineJoin="round",e.strokeRect(s,a,l,d)}var Vt='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function Zd(e,t,n){if(!t||e.measureText(t).width<=n)return[t];let r=t.split(/\s+/),o=[],i="";for(let s of r){let a=i?i+" "+s:s;i&&e.measureText(a).width>n?(o.push(i),i=s):i=a}return i&&o.push(i),o.length>0?o:[t]}function ir(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function Xa(e,t,n){let r=[];for(let o of t)r.push(...Zd(e,o,n));return r}function sr(e,t,n){if(e.measureText(t).width<=n)return t;let r="\u2026";for(let o=t.length-1;o>0;o--){let i=t.slice(0,o)+r;if(e.measureText(i).width<=n)return i}return r}function Ka(e,t,n,r,o=12,i,s){if(!n)return;let a=o*1.4,l=n.replace(/\n/g," "),d=i!==void 0?i+". "+l:l;e.font=`${o}px ${Vt}`,e.textBaseline="middle";let c=s!==void 0?Math.min(400,Math.max(60,window.innerWidth-s-16)):400,p=sr(e,d,c),u=e.measureText(p).width;e.fillStyle=r,e.fillRect(t.x-4,t.y-4,u+8,a+8),e.fillStyle="#ffffff",e.fillText(p,t.x,t.y+a/2)}var qa=11,zi=4,eu=`600 ${qa}px system-ui, -apple-system, sans-serif`;function Wi(e,t,n){return e.map(r=>({x:r.x-t,y:r.y-n}))}function tu(e,t,n,r,o,i){let s=String(r);e.font=eu;let l=e.measureText(s).width+zi*2,d=qa+zi*2,c=t-l/2,p=n+i/2+2;e.fillStyle=o,e.fillRect(c,p,l,d),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(s,c+zi,p+d/2)}function nu(e,t){if(e.points.length<2&&e.type!=="text")return null;switch(e.type){case"rectangle":case"freehand":{let n,r;if(e.type==="freehand")n=Math.min(...e.points.map(o=>o.x)),r=Math.max(...e.points.map(o=>o.y));else{let o=e.points[0],i=e.points[e.points.length-1];n=Math.min(o.x,i.x),r=Math.max(o.y,i.y)}return{x:n,y:r}}case"circle":{let n=e.points[0],r=e.points[e.points.length-1],o=Math.min(n.x,r.x),i=(Math.min(n.y,r.y)+Math.max(n.y,r.y))/2;return{x:o,y:i}}case"line":{let n=e.points[0],r=e.points[e.points.length-1],o=n.y>r.y?n:r;return{x:o.x,y:o.y}}default:return null}}function Za(){let e=Qd(null),t=ar(()=>{let a=e.current;if(!a)return;let l=a.getContext("2d");l&&l.clearRect(0,0,a.width,a.height)},[]),n=ar((a,l,d)=>{var b;let c=e.current;if(!c)return;let p=c.getContext("2d");if(!p)return;let g=((b=a.status)!=null?b:a.captured?"in_flight":"pending")==="pending"||d?a.color:"#999999";switch(a.type){case"freehand":Hi(p,a.points,g,a.strokeWidth);break;case"line":Fi(p,a.points,g,a.strokeWidth);break;case"rectangle":$i(p,a.points,g,a.strokeWidth);break;case"circle":Ni(p,a.points,g,a.strokeWidth);break;case"text":a.text&&a.points[0]&&Ka(p,a.points[0],a.text,g,a.fontSize,l,a.points[0].x);break}},[]),r=ar((a,l,d,c)=>{let p=e.current;if(!p||a.length<2)return;let u=p.getContext("2d");if(u)switch(l){case"freehand":Hi(u,a,d,c);break;case"line":Fi(u,a,d,c);break;case"rectangle":$i(u,a,d,c);break;case"circle":Ni(u,a,d,c);break}},[]),o=ar((a,l)=>{let d=e.current;if(!d||a.points.length<2)return;let c=d.getContext("2d");if(c){if(c.fillStyle="#ffffff",c.strokeStyle=a.color,c.lineWidth=1.5,a.type==="line"){let p=a.points[0],u=a.points[a.points.length-1];[p,u].forEach(g=>{c.beginPath(),c.arc(g.x,g.y,l/2,0,Math.PI*2),c.fill(),c.stroke()});return}if(a.type==="circle"){let p=a.points[0],u=a.points[a.points.length-1],g=Math.min(p.x,u.x),b=Math.max(p.x,u.x),v=Math.min(p.y,u.y),R=Math.max(p.y,u.y),C=(g+b)/2,G=(v+R)/2;[{x:C,y:v},{x:C,y:R},{x:g,y:G},{x:b,y:G}].forEach(A=>{c.beginPath(),c.rect(A.x-l/2,A.y-l/2,l,l),c.fill(),c.stroke()});return}if(a.type==="rectangle"||a.type==="freehand"){let p,u,g,b;if(a.type==="freehand")p=Math.min(...a.points.map(R=>R.x)),u=Math.max(...a.points.map(R=>R.x)),g=Math.min(...a.points.map(R=>R.y)),b=Math.max(...a.points.map(R=>R.y));else{let R=a.points[0],C=a.points[a.points.length-1];p=Math.min(R.x,C.x),u=Math.max(R.x,C.x),g=Math.min(R.y,C.y),b=Math.max(R.y,C.y)}[{x:p,y:g},{x:u,y:g},{x:p,y:b},{x:u,y:b}].forEach(R=>{c.beginPath(),c.rect(R.x-l/2,R.y-l/2,l,l),c.fill(),c.stroke()})}}},[]),i=ar((a,l,d,c,p,u,g,b=0,v=0,R,C)=>{var G;if(t(),a.forEach(L=>{var ie;let A=h(f({},L),{points:Wi(L.points,b,v)}),E=R==null?void 0:R.get(L.id),_=(ie=C==null?void 0:C.has(L.id))!=null?ie:!1;n(A,E,_)}),l.length>0){let L=Wi(l,b,v);r(L,d,c,p)}if(u&&u.length>0&&g){let L=e.current,A=L==null?void 0:L.getContext("2d");for(let E of u){let _=a.find(ie=>ie.id===E);if(_){let ie=h(f({},_),{points:Wi(_.points,b,v)});if(o(ie,g),A&&_.type!=="text"&&R&&!(_.groupId&&a.some(Y=>Y.groupId===_.groupId&&Y.type==="text"))){let Y=R.get(_.id);if(Y!==void 0){let K=nu(ie,g);if(K){let ee=((G=_.status)!=null?G:_.captured?"in_flight":"pending")==="pending"?_.color:"#999999";tu(A,K.x,K.y,Y,ee,g)}}}}}}},[t,n,r,o]),s=ar(()=>{let a=e.current;if(!a)return;let l=window.devicePixelRatio||1;a.width=window.innerWidth*l,a.height=window.innerHeight*l;let d=a.getContext("2d");d&&d.scale(l,l)},[]);return{canvasRef:e,clearCanvas:t,drawAnnotation:n,drawCurrentPath:r,redrawAll:i,resizeCanvas:s}}import{useEffect as ou,useRef as ru}from"react";function Qa(){let e=ru({shift:!1,cmd:!1});return ou(()=>{let t=o=>{o.key==="Shift"&&(e.current.shift=!0),(o.key==="Meta"||o.key==="Control")&&(e.current.cmd=!0)},n=o=>{o.key==="Shift"&&(e.current.shift=!1),(o.key==="Meta"||o.key==="Control")&&(e.current.cmd=!1)},r=()=>{e.current={shift:!1,cmd:!1}};return window.addEventListener("keydown",t,!0),window.addEventListener("keyup",n,!0),window.addEventListener("blur",r),()=>{window.removeEventListener("keydown",t,!0),window.removeEventListener("keyup",n,!0),window.removeEventListener("blur",r)}},[]),e}import{useEffect as iu}from"react";function el(e,t,n,r,o){iu(()=>{let i=s=>{if(e){if(e.linkedSelector)return;s.preventDefault(),s.stopPropagation();let l=s.deltaY>0?-2:2;t(d=>d?h(f({},d),{fontSize:Math.max(12,Math.min(72,d.fontSize+l))}):null);return}if(!n)return;s.preventDefault();let a=r.find(l=>l.id===n);if(a&&a.type==="text"&&!a.linkedSelector){let l=a.fontSize||12,d=s.deltaY>0?-2:2;o({type:"UPDATE_TEXT_SIZE",payload:{id:n,fontSize:l+d}})}};return window.addEventListener("wheel",i,{passive:!1}),()=>{window.removeEventListener("wheel",i)}},[n,e,r,o,t])}import{useCallback as gl,useEffect as ai,useRef as ml,useState as _r}from"react";function qr(e){let t=Object.keys(e).find(o=>o.startsWith("__reactFiber$")||o.startsWith("__reactInternalInstance$"));if(!t)return null;let n=e[t],r=[];for(;n;){let o=n.type,i=(o==null?void 0:o.displayName)||(o==null?void 0:o.name);i&&typeof i=="string"&&/^[A-Z]/.test(i)&&!i.startsWith("_")&&i!=="Fragment"&&r.unshift(i),n=n.return}return r.length>0?{name:r[r.length-1],path:r}:null}function ji(e){let t=Object.keys(e).find(o=>o.startsWith("__reactFiber$")||o.startsWith("__reactInternalInstance$"));if(!t)return[];let n=e[t],r=[];for(;n;){let o=n.type,i=typeof o=="function"||typeof o=="object"?(o==null?void 0:o.displayName)||(o==null?void 0:o.name):null;i&&typeof i=="string"&&/^[A-Z]/.test(i)&&!i.startsWith("_")&&i!=="Fragment"&&r.push({name:i,fiber:n}),n=n.return}return r.reverse(),r}function Zr(e){let t=e,n=new Set;for(;t&&!n.has(t);){if(n.add(t),t.stateNode instanceof Element)return t.stateNode;t.child?t=t.child:t=null}return null}function tl(e){if(e.id)return`#${e.id}`;let t=e.tagName.toLowerCase(),n=Array.from(e.classList).slice(0,3).join(".");return n?`${t}.${n}`:t}function Nn(e){if(e.id&&!e.id.startsWith("radix-")&&!e.id.startsWith(":"))return`#${CSS.escape(e.id)}`;let t=[],n=e;for(;n&&n!==document.documentElement;){let r=n.tagName.toLowerCase();if(n.id&&!n.id.startsWith("radix-")&&!n.id.startsWith(":")){t.unshift(`#${CSS.escape(n.id)}`);break}let o=Array.from(n.classList).filter(s=>!s.startsWith("_")&&s.length<30).slice(0,2);o.length>0&&(r+="."+o.map(s=>CSS.escape(s)).join("."));let i=n.parentElement;if(i){let s=Array.from(i.children).filter(a=>a.tagName===n.tagName);if(s.length>1){let a=s.indexOf(n)+1;r+=`:nth-of-type(${a})`}}t.unshift(r),n=i}return t.join(" > ")}function wn(e){try{return document.querySelector(e)}catch(t){return null}}function Qr(e,t=0){var l;let n=ji(e);if(n.length===0)return null;let r=n.map(d=>d.name),o=n.length-1,i=Math.max(0,Math.min(n.length-1,o-t)),s=n[i],a=(l=Zr(s.fiber))!=null?l:e;return{name:s.name,path:r,depthIndex:i,rootElement:a}}function nl(e,t){var i,s;let n=ji(e),r=t.toLowerCase(),o=-1;for(let a=n.length-1;a>=0;a--){let l=n[a].name;if(l===t){let d=(i=Zr(n[a].fiber))!=null?i:e;return{name:t,path:n.map(c=>c.name),depthIndex:a,rootElement:d}}if(o===-1){let d=l.toLowerCase();(d.length>=4&&r.includes(d)||r.length>=4&&d.includes(r))&&(o=a)}}if(o>=0){let a=(s=Zr(n[o].fiber))!=null?s:e;return{name:t,path:n.map(l=>l.name),depthIndex:o,rootElement:a}}return null}function lr(e){let t=cr(),n=[],r=new Set,o=t.currentNode;for(;o=t.nextNode();){let i=nl(o,e);i&&!r.has(i.rootElement)&&(r.add(i.rootElement),n.push(i))}return n}function Gi(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),r=cr(),o=new Set,i=r.currentNode;for(;(i=r.nextNode())&&n.size>0;)for(let s of n){let a=nl(i,s);if(!a||o.has(a.rootElement))continue;o.add(a.rootElement);let l=a.rootElement.getBoundingClientRect();t.set(s,l.top+window.scrollY),n.delete(s);break}for(let s of n)t.set(s,1/0);return t}function cr(){return document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(e){return e.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}})}function Rn(e){let t={selector:tl(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=ol(e);n&&n.length>0&&n.length<200&&(t.textContent=n);let r={};for(let s of e.attributes)s.name.startsWith("data-")&&(r[s.name]=s.value);Object.keys(r).length>0&&(t.dataAttributes=r);let o=qr(e);o&&(t.reactComponent=o.name);let i=su(e);return i&&(t.context=i),t}function ol(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function Fo(e,t){let n=document.elementsFromPoint(e,t);for(let r of n)if(r instanceof HTMLElement&&!(r.id==="devtools-canvas"||r.id==="devtools-toolbar"||r.id==="devtools-scrim")&&!r.closest("#devtools-toolbar")&&!(r.dataset.devtools||r.closest("[data-devtools]"))&&!["html","body"].includes(r.tagName.toLowerCase()))return r;return null}function su(e){let t=e.parentElement,n=["section","article","nav","aside","header","footer","main"];for(;t&&t!==document.body;){let r=t.tagName.toLowerCase();if(n.includes(r)&&t.id)return`${r}#${t.id}`;if(t.id&&!t.id.startsWith("radix-")&&!t.id.startsWith(":"))return`${r}#${t.id}`;t=t.parentElement}return null}function rl(e){let t=new Set,n=[],r=window.scrollX,o=window.scrollY,i=[{x:(e.minX+e.maxX)/2,y:(e.minY+e.maxY)/2},{x:e.minX,y:e.minY},{x:e.maxX,y:e.minY},{x:e.minX,y:e.maxY},{x:e.maxX,y:e.maxY}];for(let s of i){let a=s.x-r,l=s.y-o;if(a<0||l<0||a>window.innerWidth||l>window.innerHeight)continue;let d=Fo(a,l);d&&!t.has(d)&&(t.add(d),n.push(Rn(d)))}return n.slice(0,3)}function Yi(e){if(e.length===0)return[];let t=e.map(r=>r.x),n=e.map(r=>r.y);return rl({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function tn(e,t){return e.style.getPropertyValue(t)!==""}function au(e,t=30){if(e<=0)return[];let n=[],r=cr(),o=.5,i=r.currentNode;for(;(i=r.nextNode())&&n.length<t;){let s=i,a=s.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let l=getComputedStyle(s);!tn(s,"padding-top")&&Math.abs((parseFloat(l.paddingTop)||0)-e)<o&&n.push({element:s,property:"padding-top"}),!tn(s,"padding-bottom")&&Math.abs((parseFloat(l.paddingBottom)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-bottom"}),!tn(s,"padding-left")&&Math.abs((parseFloat(l.paddingLeft)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-left"}),!tn(s,"padding-right")&&Math.abs((parseFloat(l.paddingRight)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-right"}),!tn(s,"margin-top")&&Math.abs((parseFloat(l.marginTop)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-top"}),!tn(s,"margin-bottom")&&Math.abs((parseFloat(l.marginBottom)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-bottom"}),!tn(s,"margin-left")&&Math.abs((parseFloat(l.marginLeft)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-left"}),!tn(s,"margin-right")&&Math.abs((parseFloat(l.marginRight)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-right"});let d=l.display;if((d.includes("flex")||d.includes("grid"))&&n.length<t){let c=tn(s,"gap"),p=parseFloat(l.gap)||0,u=parseFloat(l.rowGap)||0,g=parseFloat(l.columnGap)||0;!c&&Math.abs(p-e)<o?n.push({element:s,property:"gap"}):!tn(s,"row-gap")&&Math.abs(u-e)<o?n.push({element:s,property:"row-gap"}):!tn(s,"column-gap")&&Math.abs(g-e)<o&&n.push({element:s,property:"column-gap"})}}return n}function Ji(e,t=30){if(e<=0)return[];let n=[],r=cr(),o=.5,i=r.currentNode;for(;(i=r.nextNode())&&n.length<t;){let s=i,a=s.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let l=getComputedStyle(s),d=parseFloat(l.borderTopWidth)||0,c=parseFloat(l.borderRightWidth)||0,p=parseFloat(l.borderBottomWidth)||0,u=parseFloat(l.borderLeftWidth)||0,g=s.clientWidth,b=s.clientHeight,v=parseFloat(l.paddingTop)||0;!tn(s,"padding-top")&&Math.abs(v-e)<o&&n.push({x:a.left+u,y:a.top+d,width:g,height:e,direction:"vertical",property:"padding-top"});let R=parseFloat(l.paddingBottom)||0;!tn(s,"padding-bottom")&&Math.abs(R-e)<o&&n.length<t&&n.push({x:a.left+u,y:a.top+d+b-e,width:g,height:e,direction:"vertical",property:"padding-bottom"});let C=parseFloat(l.paddingLeft)||0;!tn(s,"padding-left")&&Math.abs(C-e)<o&&n.length<t&&n.push({x:a.left+u,y:a.top+d,width:e,height:b,direction:"horizontal",property:"padding-left"});let G=parseFloat(l.paddingRight)||0;!tn(s,"padding-right")&&Math.abs(G-e)<o&&n.length<t&&n.push({x:a.left+u+g-e,y:a.top+d,width:e,height:b,direction:"horizontal",property:"padding-right"});let L=parseFloat(l.marginTop)||0;!tn(s,"margin-top")&&Math.abs(L-e)<o&&n.length<t&&n.push({x:a.left,y:a.top-e,width:a.width,height:e,direction:"vertical",property:"margin-top"});let A=parseFloat(l.marginBottom)||0;!tn(s,"margin-bottom")&&Math.abs(A-e)<o&&n.length<t&&n.push({x:a.left,y:a.bottom,width:a.width,height:e,direction:"vertical",property:"margin-bottom"});let E=parseFloat(l.marginLeft)||0;!tn(s,"margin-left")&&Math.abs(E-e)<o&&n.length<t&&n.push({x:a.left-e,y:a.top,width:e,height:a.height,direction:"horizontal",property:"margin-left"});let _=parseFloat(l.marginRight)||0;!tn(s,"margin-right")&&Math.abs(_-e)<o&&n.length<t&&n.push({x:a.right,y:a.top,width:e,height:a.height,direction:"horizontal",property:"margin-right"});let ie=l.display;if((ie.includes("flex")||ie.includes("grid"))&&n.length<t&&!tn(s,"gap")){let Y=Array.from(s.children).filter(K=>{let H=getComputedStyle(K);return H.display!=="none"&&H.position!=="absolute"&&H.position!=="fixed"});if(Y.length>=2)for(let K=0;K<Y.length-1&&n.length<t;K++){let H=Y[K].getBoundingClientRect(),ee=Y[K+1].getBoundingClientRect(),k=ee.top-H.bottom;Math.abs(k-e)<o&&k>.5&&n.push({x:Math.min(H.left,ee.left),y:H.bottom,width:Math.max(H.right,ee.right)-Math.min(H.left,ee.left),height:k,direction:"vertical",property:"gap"});let Ae=ee.left-H.right;Math.abs(Ae-e)<o&&Ae>.5&&n.push({x:H.right,y:Math.min(H.top,ee.top),width:Ae,height:Math.max(H.bottom,ee.bottom)-Math.min(H.top,ee.top),direction:"horizontal",property:"gap"})}}}return n}function ei(e){return typeof e=="string"?{value:e}:e}var sl={gap:["gap","row-gap","column-gap"],padding:["padding-top","padding-bottom","padding-left","padding-right"],margin:["margin-top","margin-bottom","margin-left","margin-right"]};function il(e,t){let n=sl[t];return n?n.includes(e):!1}function lu(e,t){let n=e.split(/\s+/);for(let r of n){if(r===t)return!0;let o=r.lastIndexOf(":");if(o>=0&&r.slice(o+1)===t)return!0}return!1}function cu(e){var a,l;let t=e.lastIndexOf(":"),n=t>=0?e.slice(t+1):e,r=n.indexOf("-");if(r<0)return null;let o=n.slice(0,r),i={gap:"gap","gap-x":"column-gap","gap-y":"row-gap",p:"padding",pt:"padding-top",pb:"padding-bottom",pl:"padding-left",pr:"padding-right",px:"padding-left",py:"padding-top",m:"margin",mt:"margin-top",mb:"margin-bottom",ml:"margin-left",mr:"margin-right",mx:"margin-left",my:"margin-top"},s=n.slice(0,n.indexOf("-",r+1)>0?n.indexOf("-",r+1):r);return(l=(a=i[s])!=null?a:i[o])!=null?l:null}function Ui(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let o=[],i=cr(),s=i.currentNode;for(;(s=i.nextNode())&&o.length<t;){let a=s,l=a.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let d=a.className;if(typeof d=="string")for(let c of e.bindings){if(!lu(d,c))continue;let p=cu(c);if(p&&!(e.property&&!il(p,e.property))){o.push({element:a,property:p});break}}}return o}let r=au(n,t*2);return e.property?r.filter(o=>il(o.property,e.property)).slice(0,t):r.slice(0,t)}function Vi(e,t=30){let n=Ui(e,t),r=[];for(let o of n){let i=o.element,s=i.getBoundingClientRect(),a=getComputedStyle(i),l=parseFloat(a.borderTopWidth)||0,d=parseFloat(a.borderRightWidth)||0,c=parseFloat(a.borderLeftWidth)||0,p=i.clientWidth,u=i.clientHeight;switch(o.property){case"padding-top":{let g=parseFloat(a.paddingTop)||0;r.push({x:s.left+c,y:s.top+l,width:p,height:g,direction:"vertical",property:o.property});break}case"padding-bottom":{let g=parseFloat(a.paddingBottom)||0;r.push({x:s.left+c,y:s.top+l+u-g,width:p,height:g,direction:"vertical",property:o.property});break}case"padding-left":{let g=parseFloat(a.paddingLeft)||0;r.push({x:s.left+c,y:s.top+l,width:g,height:u,direction:"horizontal",property:o.property});break}case"padding-right":{let g=parseFloat(a.paddingRight)||0;r.push({x:s.left+c+p-g,y:s.top+l,width:g,height:u,direction:"horizontal",property:o.property});break}case"margin-top":{let g=parseFloat(a.marginTop)||0;r.push({x:s.left,y:s.top-g,width:s.width,height:g,direction:"vertical",property:o.property});break}case"margin-bottom":{let g=parseFloat(a.marginBottom)||0;r.push({x:s.left,y:s.bottom,width:s.width,height:g,direction:"vertical",property:o.property});break}case"margin-left":{let g=parseFloat(a.marginLeft)||0;r.push({x:s.left-g,y:s.top,width:g,height:s.height,direction:"horizontal",property:o.property});break}case"margin-right":{let g=parseFloat(a.marginRight)||0;r.push({x:s.right,y:s.top,width:g,height:s.height,direction:"horizontal",property:o.property});break}case"gap":case"row-gap":case"column-gap":{let g=Array.from(i.children).filter(b=>{let v=getComputedStyle(b);return v.display!=="none"&&v.position!=="absolute"&&v.position!=="fixed"});for(let b=0;b<g.length-1&&r.length<t;b++){let v=g[b].getBoundingClientRect(),R=g[b+1].getBoundingClientRect(),C=R.top-v.bottom;C>.5&&r.push({x:Math.min(v.left,R.left),y:v.bottom,width:Math.max(v.right,R.right)-Math.min(v.left,R.left),height:C,direction:"vertical",property:"gap"});let G=R.left-v.right;G>.5&&r.push({x:v.right,y:Math.min(v.top,R.top),width:G,height:Math.max(v.bottom,R.bottom)-Math.min(v.top,R.top),direction:"horizontal",property:"gap"})}break}}}return r}function al(e,t){let n=new Set,r=Lr(t);for(let o of e){let i=cl[o.property];if(!i)continue;let s=o.element.className;if(typeof s=="string")for(let a of i){let l=`${a}-${r}`;for(let d of s.split(/\s+/)){let c=d.lastIndexOf(":"),p=c>=0?d.slice(c+1):d;if(p===l){n.add(p);break}}}}return[...n]}function ll(e){let t=new Set;for(let n of e)for(let[r,o]of Object.entries(sl))if(o.includes(n.property)){t.add(r);break}if(t.size===1)return[...t][0]}function Xi(e,t,n){if(t===n)return e;let r=Lr(t),o=Lr(n);return e.map(i=>{let s=i.lastIndexOf("-");if(s<0)return i;let a=i.slice(0,s),l=i.slice(s+1);return l===r||l===`[${t}px]`?`${a}-${o}`:i})}var du={0:"0",1:"px",2:"0.5",4:"1",6:"1.5",8:"2",12:"3",16:"4",20:"5",24:"6",28:"7",32:"8",40:"10",48:"12",64:"16",80:"20",96:"24"};function Lr(e){var t;return(t=du[e])!=null?t:`[${e}px]`}var cl={"padding-top":["pt","py","p"],"padding-bottom":["pb","py","p"],"padding-left":["pl","px","p"],"padding-right":["pr","px","p"],"margin-top":["mt","my","m"],"margin-bottom":["mb","my","m"],"margin-left":["ml","mx","m"],"margin-right":["mr","mx","m"],gap:["gap"],"row-gap":["gap-y","gap"],"column-gap":["gap-x","gap"]};function uu(e,t,n,r){let o=cl[t];if(!o)return null;let i=Lr(n);for(let s of o){let a=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+s+"-(?:"+pu(i)+"|\\["+n+"px\\]))(?:\\s|$)"),l=e.match(a);if(l!=null&&l[1]){let d=Lr(r),c=l[1].lastIndexOf(":"),p=c>=0?l[1].slice(0,c+1):"";return{matched:l[1],suggested:`${p}${s}-${d}`}}}return null}function pu(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function dl(e,t,n){let r=new Set,o=[];for(let i of e){let s=Nn(i.element),a=`${s}::${i.property}`;if(r.has(a))continue;r.add(a);let l=qr(i.element),d=i.element.className||"",c=uu(d,i.property,t,n);o.push({selector:s,reactComponent:l==null?void 0:l.name,className:d,property:i.property,matchedClass:c==null?void 0:c.matched,suggestedClass:c==null?void 0:c.suggested})}return o}function Ar(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function Ki(e,t){if(e instanceof HTMLElement){let r=e.style.getPropertyValue(t);if(r)return r}let n=fu(e,t);return n&&n.includes("var(")?n:Ar(e,t)}function fu(e,t){let n=t.replace(/-([a-z])/g,(r,o)=>o.toUpperCase());try{for(let r of document.styleSheets)try{let o=r.cssRules||r.rules;for(let i of o)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let s=i.style.getPropertyValue(t);if(s&&s.includes("var("))return s;let a=i.style[n];if(a&&a.includes("var("))return a}}catch(o){}}catch(r){}return null}function ti(e,t){if(e instanceof HTMLElement){let r=e.style.getPropertyValue(t);if(r)return r}let n=t.replace(/-([a-z])/g,(r,o)=>o.toUpperCase());try{for(let r of document.styleSheets)try{let o=r.cssRules||r.rules;for(let i of o)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let s=i.style.getPropertyValue(t);if(s)return s;let a=i.style[n];if(a)return a}}catch(o){}}catch(r){}return null}function ni(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function Pr(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function gu(e){let t=[];for(let n of e){let r=t.find(o=>o.axis!==n.axis?!1:n.axis==="row"?Math.abs(o.y-n.y)<2&&Math.abs(o.h-n.h)<2:Math.abs(o.x-n.x)<2&&Math.abs(o.w-n.w)<2);if(r)if(n.axis==="row"){let o=Math.min(r.x,n.x),i=Math.max(r.x+r.w,n.x+n.w);r.x=o,r.w=i-o}else{let o=Math.min(r.y,n.y),i=Math.max(r.y+r.h,n.y+n.h);r.y=o,r.h=i-o}else t.push(f({},n))}return t}function $o(e){let t=Array.from(e.children).filter(l=>{if(!(l instanceof HTMLElement))return!1;let d=window.getComputedStyle(l);return d.display!=="none"&&d.position!=="absolute"&&d.position!=="fixed"});if(t.length<2)return[];let n=[],r=e.getBoundingClientRect(),i=window.getComputedStyle(e).flexDirection,s=i==="column"||i==="column-reverse",a=6;for(let l=0;l<t.length-1;l++){let d=t[l].getBoundingClientRect(),c=t[l+1].getBoundingClientRect();if(c.left>d.right+.5&&n.push({axis:"column",x:d.right,y:r.top,w:c.left-d.right,h:r.height}),c.top>d.bottom+.5&&n.push({axis:"row",x:r.left,y:d.bottom,w:r.width,h:c.top-d.bottom}),!(c.left>d.right+.5)&&!(c.top>d.bottom+.5))if(s){let p=(d.bottom+c.top)/2;n.push({axis:"row",x:r.left,y:p-a/2,w:r.width,h:a})}else{let p=(d.right+c.left)/2;n.push({axis:"column",x:p-a/2,y:r.top,w:a,h:r.height})}}return gu(n)}function qi(e,t){let n=window.getComputedStyle(e),r=n.display;if(r!=="flex"&&r!=="inline-flex")return!1;let o=n.justifyContent;if(o!=="space-between"&&o!=="space-around"&&o!=="space-evenly"&&o!=="stretch")return!1;let i=n.flexDirection;return!(t!==(i==="column"||i==="column-reverse"?"row":"column")||parseFloat(t==="row"?n.rowGap:n.columnGap)>0)}function dr(e){let t=window.getComputedStyle(e);return{top:parseFloat(t.paddingTop)||0,right:parseFloat(t.paddingRight)||0,bottom:parseFloat(t.paddingBottom)||0,left:parseFloat(t.paddingLeft)||0}}function zo(e){let t=window.getComputedStyle(e);return{"top-left":parseFloat(t.borderTopLeftRadius)||0,"top-right":parseFloat(t.borderTopRightRadius)||0,"bottom-right":parseFloat(t.borderBottomRightRadius)||0,"bottom-left":parseFloat(t.borderBottomLeftRadius)||0}}function Zi(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function ur(e){var c,p;let t=document.createRange(),n=!1;for(let u of e.childNodes)u.nodeType===Node.TEXT_NODE&&(u.textContent||"").trim().length>0&&(n||(t.setStart(u,0),n=!0),t.setEnd(u,(p=(c=u.textContent)==null?void 0:c.length)!=null?p:0));if(!n)return null;let r=t.getBoundingClientRect(),o=window.getComputedStyle(e),i=parseFloat(o.fontSize)||16,s=parseFloat(o.lineHeight);isNaN(s)&&(s=i*1.2);let a=Math.max(1,t.getClientRects().length),l=Math.max(r.height,a*s),d=(l-r.height)/2;return new DOMRect(r.x,r.y-d,r.width,l)}function Or(e){let t=window.getComputedStyle(e),n=parseFloat(t.fontSize)||16,r=parseFloat(t.lineHeight);return isNaN(r)&&(r=n*1.2),{fontSize:n,lineHeight:r}}function Qe(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function Qi(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function oi(e){var t;for(let n of e){let r=wn(n.selector);if(!r&&n.durableSelector&&(r=wn(n.durableSelector),r)){let o=(t=n.selector.match(/\[data-pm="([^"]+)"\]/))==null?void 0:t[1];o&&r.setAttribute("data-pm",o)}if(r)for(let o of n.changes)Qe(r,o.property,o.modified)}}function es(e,t){let n=wn(e);if(!n)return;let r=t.find(o=>o.selector===e);if(r)for(let o of r.changes)Qi(n,o.property,o.original)}function ri(e){for(let t of e){let n=wn(t.selector);if(n)for(let r of t.changes)Qi(n,r.property,r.original)}}function pl(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){pl(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&mu(o.style,t,n,r)}}}function mu(e,t,n,r){for(let o=0;o<e.length;o++){let i=e[o];if(i!=null&&i.startsWith("--")){if(n.has(i))continue;n.add(i);let s=t.getPropertyValue(i).trim();fl(s)&&r.push({name:i,value:s,usage:`var(${i})`})}}}var ii=null,hu=5e3;function ts(){if(ii&&Date.now()-ii.timestamp<hu)return ii.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{pl(i.cssRules||i.rules,n,t,e)}catch(s){}}catch(i){}let r=document.documentElement.style;for(let i=0;i<r.length;i++){let s=r[i];if(s!=null&&s.startsWith("--")&&!t.has(s)){t.add(s);let a=n.getPropertyValue(s).trim();fl(a)&&e.push({name:s,value:a,usage:`var(${s})`})}}let o=e.sort((i,s)=>i.name.localeCompare(s.name));return ii={variables:o,timestamp:Date.now()},o}function fl(e){if(!e)return!1;let t=e.toLowerCase().trim();return!!(/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)||t.startsWith("rgb")||t.startsWith("hsl")||t.startsWith("oklch")||t.startsWith("oklab")||t.startsWith("lch")||t.startsWith("lab")||["transparent","currentcolor","inherit","white","black","red","green","blue","yellow","orange","purple","pink","gray","grey"].includes(t))}function Br(e,t){let n=t.match(/var\((--[^,)]+)(?:,\s*([^)]+))?\)/);if(n){let r=n[1],o=n[2];return getComputedStyle(document.documentElement).getPropertyValue(r).trim()||o||t}return t}function Dr(e,t){if(!e)return null;let n=ul(e);if(!n)return null;for(let r of t){let o=ul(r.value);if(o&&n===o)return r}return null}function ul(e){if(!e)return null;let t=e.trim().toLowerCase();if(t.startsWith("oklch(")){let n=t.match(/oklch\(\s*([\d.]+%?)\s+([\d.]+%?)\s+([\d.]+)/);if(n){let r=n[1].endsWith("%")?parseFloat(n[1])/100:parseFloat(n[1]),o=n[2].endsWith("%")?parseFloat(n[2])/100:parseFloat(n[2]),i=parseFloat(n[3]);r=Math.round(r*100)/100,o=Math.round(o*1e3)/1e3;let s=Math.round(i);return`oklch(${r} ${o} ${s})`}}if(t.startsWith("rgb")){let n=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(n)return`rgb(${n[1]},${n[2]},${n[3]})`}return t.startsWith("#")?t.length===4?`#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`:t.slice(0,7):t}import{Fragment as Wo,jsx as yt,jsxs as qn}from"react/jsx-runtime";var Yn=22,vo=12,yu=3,bu=250,si=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],xu=3e3;function vu(s){var a=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=a,i=Gn(a,["left","top","avoidBottom","style","children"]);let l=e+vo,d=t+vo,c=n!==void 0?`${n}px`:"100vh";return yt("div",h(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:e,top:t,padding:vo},r),children:yt("div",{style:{transform:`translate(min(0px, calc(100vw - ${l}px - 100%)), min(0px, calc(${c} - ${d}px - 100%)))`},children:o})}))}function hl({annotations:e,supersededAnnotations:t,inFlightIds:n,activeIds:r,queuePositions:o,scrollX:i,scrollY:s,annotationGroupMap:a,onViewThread:l,onSelectAnnotation:d,onHoverAnnotation:c,canvasRef:p}){var oe,Y,K,H,ee,k,Ae;let[u,g]=_r(0),[b,v]=_r(()=>Math.floor(Math.random()*si.length)),R=!!(n&&n.size>0);ai(()=>{if(!R)return;let X=setInterval(()=>{g(B=>(B+1)%yu)},bu),ge=setInterval(()=>{v(B=>(B+1)%si.length)},xu);return()=>{clearInterval(X),clearInterval(ge)}},[R]);let C=[];for(let X of e){if(X.type!=="text"||!X.text||!X.points[0]||t.has(X))continue;let ge=X.groupId?e.filter(me=>me.groupId===X.groupId):[X],B=(oe=X.status)!=null?oe:"pending",ce=ge.reduce((me,N)=>{var ye;return me+((ye=N.replyCount)!=null?ye:0)},0),Q=me=>me==="resolved"&&ce===0,q=!!(n&&(n.has(X.id)||ge.some(me=>n.has(me.id))))||X.status==="in_flight"||ge.some(me=>me.status==="in_flight")||Q(X.status)||ge.some(me=>Q(me.status)),Ee=ge.some(me=>{var N;return me.status==="resolved"&&((N=me.replyCount)!=null?N:0)>0||me.status==="needs_review"}),De=ge.some(me=>me.threadId);if(!q&&B!=="resolved"&&B!=="needs_review"&&!Ee&&!De)continue;let pe=X.threadId||((Y=ge.find(me=>me.threadId))==null?void 0:Y.threadId),Pe=B==="needs_review"||ge.some(me=>me.status==="needs_review"),Re=X.points[0],Me=X.fontSize||12,et=Me*1.4,Ve=a.get(X.id),Tt=X.text.replace(/\n/g," "),Mt=Ve!==void 0?Ve+". "+Tt:Tt,zt=(H=(K=p==null?void 0:p.current)==null?void 0:K.getContext("2d"))!=null?H:document.createElement("canvas").getContext("2d");if(!zt)continue;zt.font=`${Me}px ${Vt}`;let tt=Re.x-i,gn=ir(tt),$=sr(zt,Mt,gn),de=zt.measureText($).width,Te=q&&!!r&&!r.has(X.id)&&!ge.some(me=>r.has(me.id));C.push({id:X.id,threadId:pe,linkedSelector:X.linkedSelector||((ee=ge.find(me=>me.linkedSelector))==null?void 0:ee.linkedSelector),x:Re.x+de+4,y:Re.y-4,size:et+8,color:X.color,isInFlight:q,isQueued:Te,queuePosition:void 0,isNeedsReview:Pe,replyCount:ce})}let G=C.filter(X=>X.isQueued);if(G.length>0&&G.forEach((X,ge)=>{var B;X.queuePosition=(B=o==null?void 0:o.get(X.id))!=null?B:`(${ge+1}/${G.length})`}),C.length===0)return null;let L=2,A=(Ae=(k=p==null?void 0:p.current)==null?void 0:k.getContext("2d"))!=null?Ae:document.createElement("canvas").getContext("2d"),E=C.map(X=>{var Ee;let ge;X.isQueued?ge=X.queuePosition?`queued ${X.queuePosition}`:"queued":X.isInFlight?ge=(Ee=si[b])!=null?Ee:"thinking":X.replyCount>0?ge=`${X.replyCount} ${X.replyCount===1?"reply":"replies"}`:ge="Cancelled";let B=!X.isQueued,ce=B?11:0,Q=B?4:0,q=ge.length*7.2;return A&&(A.font=`12px ${Vt}`,q=A.measureText(ge).width),4+ce+Q+q+4}),_=typeof window!="undefined"?window.innerHeight:9999,ie=[];for(let X=0;X<C.length;X++){let ge=C[X].y-s,B=Math.min(ge,_-Yn),ce=B+Yn,q=C[X].x-i;for(let Ee=0;Ee<X;Ee++){let De=C[Ee].y-s,pe=Math.min(De,_-Yn),Pe=pe+Yn;if(!(B<Pe&&ce>pe))continue;let Me=ie[Ee]+E[Ee];q<Me+L&&(q=Me+L)}ie.push(q)}return yt(Wo,{children:C.map((X,ge)=>{let B=!!X.threadId;return yt(vu,{left:ie[ge]-vo,top:X.y-s-vo,onMouseDown:B?ce=>ce.stopPropagation():void 0,onClick:B?ce=>{if(ce.stopPropagation(),d==null||d(X.id),l==null||l(X.threadId),X.linkedSelector)try{let Q=document.querySelector(X.linkedSelector);if(Q){let q=Q.getBoundingClientRect();(q.bottom<0||q.top>window.innerHeight)&&Q.scrollIntoView({behavior:"smooth",block:"center"})}}catch(Q){}}:void 0,onMouseEnter:c?()=>c(X.id):void 0,onMouseLeave:c?()=>c(null):void 0,style:{pointerEvents:B?"auto":"none",cursor:B?"pointer":void 0,zIndex:9999},children:yt("div",{"data-devtools":"annotation-badge",style:{height:X.size,display:"flex",alignItems:"center",backgroundColor:X.color,fontFamily:Vt,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:X.isQueued?qn("span",{style:{opacity:.5,color:"inherit"},children:["queued",X.queuePosition?` ${X.queuePosition}`:""]}):X.isInFlight?qn(Wo,{children:[yt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:u===1?qn(Wo,{children:[yt("circle",{cx:"7",cy:"7",r:"2"}),yt("circle",{cx:"17",cy:"7",r:"2"}),yt("circle",{cx:"7",cy:"17",r:"2"}),yt("circle",{cx:"17",cy:"17",r:"2"})]}):qn(Wo,{children:[yt("circle",{cx:"12",cy:"6",r:"2"}),yt("circle",{cx:"6",cy:"12",r:"2"}),yt("circle",{cx:"18",cy:"12",r:"2"}),yt("circle",{cx:"12",cy:"18",r:"2"})]})}),yt("span",{style:{opacity:.7,color:"inherit"},children:si[b]})]}):qn(Wo,{children:[X.isNeedsReview?yt("span",{style:{fontWeight:700,color:"inherit"},children:"?"}):yt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:yt("polyline",{points:"4 12 10 18 20 6"})}),yt("span",{style:{opacity:.7,color:"inherit"},children:X.replyCount>0?`${X.replyCount} ${X.replyCount===1?"reply":"replies"}`:"Cancelled"})]})})},X.id)})})}function ns({inFlightSelectorColors:e,animated:t=!0}){let[n,r]=_r([]);return ai(()=>{if(e.size===0){r([]);return}let o=null,i=()=>{let l=[];for(let[d,c]of e){let p=wn(d);if(!p)continue;let u=p.getBoundingClientRect();l.push({selector:d,top:u.top,left:u.left,width:u.width,height:u.height,color:c})}r(l)},s=()=>{o&&cancelAnimationFrame(o),o=requestAnimationFrame(i)};i(),window.addEventListener("scroll",s,!0),window.addEventListener("resize",s,!0);let a=new MutationObserver(s);return a.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s,!0),a.disconnect(),o&&cancelAnimationFrame(o)}},[e]),n.length===0?null:qn(Wo,{children:[t&&yt("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(o=>yt("div",{"data-devtools":"marching-ants",style:{position:"fixed",top:o.top,left:o.left,width:o.width,height:o.height,pointerEvents:"none",zIndex:9995,overflow:"visible"},children:yt("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:yt("rect",{x:"0.5",y:"0.5",width:Math.max(0,o.width-1),height:Math.max(0,o.height-1),fill:"none",stroke:o.color,strokeWidth:"1",strokeDasharray:"2 4",style:t?{animation:"popmelt-march 0.5s steps(2) infinite"}:void 0})})},o.selector))]})}function yl({annotations:e,supersededAnnotations:t,scrollX:n,scrollY:r,onReply:o,annotationGroupMap:i,canvasRef:s,onHoverAnnotation:a}){let l=e.filter(p=>t.has(p)?!1:p.status==="waiting_input"&&p.question&&p.threadId);if(l.length===0)return null;let d=new Set,c=[];for(let p of l){if(!p.threadId||d.has(p.threadId))continue;d.add(p.threadId);let u=p.type==="text"?p:e.find(g=>g.groupId&&g.groupId===p.groupId&&g.type==="text")||p;if(u.type==="text"&&u.text&&u.points[0]){let g=u.points[0],b=u.fontSize||12,v=b*1.4,R=i.get(u.id),C=u.text.replace(/\n/g," "),G=R!==void 0?R+". "+C:C,A=document.createElement("canvas").getContext("2d");if(!A)continue;A.font=`${b}px ${Vt}`;let E=g.x-n,_=ir(E),ie=sr(A,G,_),oe=A.measureText(ie).width;c.push({annotation:p,x:g.x+oe+4,y:g.y-4,size:v+8})}}return c.length===0?null:yt(Wo,{children:c.map(({annotation:p,x:u,y:g,size:b})=>yt(Su,{annotation:p,x:u-n,y:g-r,size:b,onReply:o,onHoverAnnotation:a},`question-${p.threadId}`))})}function Su({annotation:e,x:t,y:n,size:r,onReply:o,onHoverAnnotation:i}){let[s,a]=_r(!1),[l,d]=_r(""),c=ml(null),p=ml(null);ai(()=>{s&&c.current&&c.current.focus()},[s]),ai(()=>{if(!s)return;let R=G=>{p.current&&!G.composedPath().includes(p.current)&&a(!1)},C=G=>{G.key==="Escape"&&a(!1)};return document.addEventListener("mousedown",R),document.addEventListener("keydown",C),()=>{document.removeEventListener("mousedown",R),document.removeEventListener("keydown",C)}},[s]);let u=gl(()=>{!l.trim()||!e.threadId||(o(e.threadId,l.trim()),d(""),a(!1))},[l,e.threadId,o]),g=gl(R=>{R.key==="Enter"&&(R.metaKey||R.ctrlKey)&&(R.preventDefault(),u())},[u]),b=s?t:t-vo,v=s?n:n-vo;return qn("div",{ref:p,"data-devtools":"question-badge",onMouseEnter:i?()=>i(e.id):void 0,onMouseLeave:i?()=>i(null):void 0,style:{position:"fixed",left:`max(0px, ${b}px)`,top:`max(0px, ${v}px)`,padding:s?0:vo,transform:`translate(min(0px, calc(100vw - max(0px, ${b}px) - 100%)), min(0px, calc(100vh - max(0px, ${v}px) - 100%)))`,zIndex:s?10002:9999,pointerEvents:"auto",cursor:s?void 0:"pointer"},children:[!s&&qn("div",{onClick:()=>a(!0),style:{height:r,display:"flex",alignItems:"center",backgroundColor:e.color,padding:`0 ${4}px`,gap:4,fontFamily:Vt,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[qn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",children:[yt("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),yt("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),yt("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),yt("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]}),yt("span",{style:{opacity:.7},children:"reply?"})]}),s&&qn("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#eaeaea",fontFamily:Vt,fontSize:12,color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)"},children:[yt("div",{style:{padding:`${6}px ${8}px`,lineHeight:1.4},children:e.question}),qn("div",{style:{padding:`0 ${4}px ${4}px`},children:[yt("textarea",{ref:c,value:l,onChange:R=>d(R.target.value),onKeyDown:g,placeholder:"Type your reply...",style:{width:"100%",minHeight:40,padding:4,fontSize:12,fontFamily:Vt,backgroundColor:"rgba(0, 0, 0, 0.04)",color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)",borderRadius:0,outline:"none",resize:"vertical",lineHeight:1.4,boxSizing:"border-box"}}),yt("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:4},children:yt("button",{onClick:u,disabled:!l.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:Vt,fontWeight:600,backgroundColor:l.trim()?e.color:"rgba(0,0,0,0.1)",color:l.trim()?"#ffffff":"rgba(0,0,0,0.3)",border:"none",cursor:l.trim()?"pointer":"default"},children:"Send \u2318\u23CE"})})]})]})]})}function li(e){var i;let t=new Set,n=new Map;for(let s of e){if(!s.linkedSelector)continue;let a=n.get(s.linkedSelector)||[];a.push(s),n.set(s.linkedSelector,a)}let r=new Set,o=new Set;for(let s of n.values()){if(s.length<=1){(i=s[0])!=null&&i.groupId&&o.add(s[0].groupId);continue}s.sort((l,d)=>d.timestamp-l.timestamp);let a=s[0];a.groupId&&o.add(a.groupId);for(let l=1;l<s.length;l++){let d=s[l];t.add(d),d.groupId&&r.add(d.groupId)}}for(let s of e)s.groupId&&r.has(s.groupId)&&!o.has(s.groupId)&&t.add(s);return t}import{useEffect as bl,useLayoutEffect as wu,useState as xl}from"react";import{jsx as os,jsxs as Sl}from"react/jsx-runtime";function Cu(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}var vl=["top-left","top-right","bottom-right","bottom-left"];function wl({element:e,radius:t,accentColor:n,hoveredCorner:r,draggingCorner:o,cursorViewport:i}){let[s,a]=xl(null),[l,d]=xl(!1);if(bl(()=>{let C=A=>{(A.key==="Meta"||A.key==="Control")&&d(!0)},G=A=>{(A.key==="Meta"||A.key==="Control")&&d(!1)},L=()=>d(!1);return window.addEventListener("keydown",C,!0),window.addEventListener("keyup",G,!0),window.addEventListener("blur",L),()=>{window.removeEventListener("keydown",C,!0),window.removeEventListener("keyup",G,!0),window.removeEventListener("blur",L)}},[]),bl(()=>{if(!e){a(null);return}let C=()=>{a(e.getBoundingClientRect())};return C(),window.addEventListener("scroll",C,{passive:!0}),window.addEventListener("resize",C,{passive:!0}),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}},[e]),wu(()=>{e&&a(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!s)return null;let c=s.width,p=s.height,u=Cu(n,.2),g={"top-left":{x:0,y:t["top-left"]},"top-right":{x:c,y:t["top-right"]},"bottom-right":{x:c,y:p-t["bottom-right"]},"bottom-left":{x:0,y:p-t["bottom-left"]}},b=new Set,v=o!=null?o:r;if(v)if(l)b.add(v);else for(let C of vl)b.add(C);let R={position:"fixed",top:s.top,left:s.left,width:c,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"};return Sl("div",{"data-devtools":"border-radius-handles",style:R,children:[Sl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${p}`,children:[os("rect",{x:"0.5",y:"0.5",width:Math.max(0,c-1),height:Math.max(0,p-1),fill:"none",stroke:u,strokeWidth:"1"}),vl.map(C=>{let G=g[C],L=b.has(C);return os("circle",{cx:G.x,cy:G.y,r:C===(o!=null?o:r)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:C===(o!=null?o:r)?4:2,paintOrder:"stroke"},C)})]}),i&&v&&(()=>{let C=Math.round(t[v]);return os("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:C})})()]})}import{useEffect as Eu,useState as ku}from"react";function pr(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);if(n)return`oklch(${n[1]} / ${t})`;let r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r){let o=parseInt(r[1],16),i=parseInt(r[2],16),s=parseInt(r[3],16);return`rgba(${o}, ${i}, ${s}, ${t})`}return`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}import{Fragment as Tu,jsx as rs,jsxs as Nr}from"react/jsx-runtime";function ro({element:e,isSelected:t=!1,elementInfo:n,color:r="#3b82f6",annotationNumber:o,changeCount:i,hideTooltip:s=!1}){let[a,l]=ku(null);if(Eu(()=>{if(!e){l(null);return}let E=()=>{let _=e.getBoundingClientRect();l(_)};return E(),window.addEventListener("scroll",E,{passive:!0}),window.addEventListener("resize",E,{passive:!0}),()=>{window.removeEventListener("scroll",E),window.removeEventListener("resize",E)}},[e]),!a||!e)return null;let d={position:"fixed",top:a.top,left:a.left,width:a.width,height:a.height,pointerEvents:"none",zIndex:9996,backgroundColor:pr(r,.05),overflow:"visible"},c=e.tagName.toLowerCase(),p=e.id?`#${e.id}`:"",u=e.classList.length>0?"."+Array.from(e.classList).slice(0,2).join("."):"",g=n==null?void 0:n.reactComponent,b=g?`<${g}> ${c}${p}${u}`:`${c}${p}${u}`,v=22,R=a.height>=window.innerHeight,C=R?0:a.top>=v?a.top-v:a.bottom,G=R?{position:"absolute",top:8,left:8,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:r,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400}:{position:"fixed",top:C,left:a.left,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:r,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400},A=!s&&Nr("div",{"data-devtools":"tooltip",style:G,children:[o!==void 0&&Nr("span",{children:[o,"."]}),rs("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:b}),i!==void 0&&i>0&&Nr("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return Nr(Tu,{children:[Nr("div",{"data-devtools":"highlight",style:d,children:[rs("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:rs("rect",f({x:"0.5",y:"0.5",width:Math.max(0,a.width-1),height:Math.max(0,a.height-1),fill:"none",stroke:r,strokeWidth:"1"},!t&&{strokeDasharray:"2 4"}))}),R&&A]}),!R&&A]})}import{useEffect as Cl,useLayoutEffect as Mu,useState as is}from"react";import{jsx as go,jsxs as as}from"react/jsx-runtime";function ss(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function ls({element:e,gap:t,accentColor:n,hoveredAxis:r,draggingAxis:o,cursorViewport:i,isAutoGap:s=!1,refreshKey:a=0}){let[l,d]=is(null),[c,p]=is([]),[u,g]=is(!1);if(Cl(()=>{let oe=H=>{(H.key==="Meta"||H.key==="Control")&&g(!0)},Y=H=>{(H.key==="Meta"||H.key==="Control")&&g(!1)},K=()=>g(!1);return window.addEventListener("keydown",oe,!0),window.addEventListener("keyup",Y,!0),window.addEventListener("blur",K),()=>{window.removeEventListener("keydown",oe,!0),window.removeEventListener("keyup",Y,!0),window.removeEventListener("blur",K)}},[]),Cl(()=>{if(!e){d(null),p([]);return}let oe=()=>{d(e.getBoundingClientRect()),p($o(e))};return oe(),window.addEventListener("scroll",oe,{passive:!0}),window.addEventListener("resize",oe,{passive:!0}),()=>{window.removeEventListener("scroll",oe),window.removeEventListener("resize",oe)}},[e]),Mu(()=>{e&&(d(e.getBoundingClientRect()),p($o(e)))},[e,t.row,t.column,a]),!l||c.length===0)return null;let b=l.width,v=l.height,R="pm-gap-stripe-pattern",C=ss(n,.25),G=ss(n,.1),L=ss(n,.2),A=8,E=2,_={position:"fixed",top:l.top,left:l.left,width:b,height:v,pointerEvents:"none",zIndex:9996,overflow:"visible"},ie=o!=null?o:r;return as("div",{"data-devtools":"gap-handles",style:_,children:[as("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${b} ${v}`,children:[go("defs",{children:go("pattern",{id:R,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:go("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:C,strokeWidth:"1.5"})})}),go("rect",{x:"0.5",y:"0.5",width:Math.max(0,b-1),height:Math.max(0,v-1),fill:"none",stroke:L,strokeWidth:"1"}),c.map((oe,Y)=>{let K=oe.x-l.left,H=oe.y-l.top,ee=oe.w,k=oe.h,Ae=u?oe.axis===ie:!0;return(oe.axis==="row"?t.row:t.column)===0?null:as("g",{opacity:Ae?1:.6,children:[go("rect",{x:K,y:H,width:ee,height:k,fill:G}),go("rect",{x:K,y:H,width:ee,height:k,fill:`url(#${R})`})]},Y)}),ie&&(()=>{let oe=c.filter(Ee=>Ee.axis===ie);if(oe.length===0)return null;let Y=oe[0];if(i&&oe.length>1){let Ee=1/0;for(let De of oe){let pe=De.x+De.w/2,Pe=De.y+De.h/2,Re=Math.abs(i.x-pe)+Math.abs(i.y-Pe);Re<Ee&&(Ee=Re,Y=De)}}let K=Y.x-l.left,H=Y.y-l.top,ee=Y.w,k=Y.h,Ae=K+ee/2,X=H+k/2;if(s)return go("circle",{cx:Ae,cy:X,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let ge=ie==="column",B=ge?E:A,ce=ge?A:E,Q=Ae-B/2,q=X-ce/2;return go("rect",{x:Q,y:q,width:B,height:ce,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&ie&&(()=>{let oe=s?"auto":String(Math.round(ie==="row"?t.row:t.column));return go("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:oe})})()]})}import{useCallback as Pu,useEffect as Ou,useState as Bu}from"react";import{useEffect as Iu,useState as El}from"react";var Ru=3,Lu=250,cs=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Au=3e3;function kl(e){let[t,n]=El(0),[r,o]=El(()=>Math.floor(Math.random()*cs.length));return Iu(()=>{if(!e)return;let i=setInterval(()=>n(a=>(a+1)%Ru),Lu),s=setInterval(()=>o(a=>(a+1)%cs.length),Au);return()=>{clearInterval(i),clearInterval(s)}},[e]),{charIndex:t,word:cs[r]}}import{Fragment as ds,jsx as Hn,jsxs as fr}from"react/jsx-runtime";function Du(e){let{element:t}=e,n=t.tagName,r=t.id?`#${t.id}`:"",o=t.className?"."+t.className.split(" ").slice(0,2).join("."):"",i=t.reactComponent;return i?`<${i}> ${n}${r}${o}`:`${n}${r}${o}`}var Tl=22,us=12;function _u(s){var a=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=a,i=Gn(a,["left","top","avoidBottom","style","children"]);let l=n!==void 0?`${n}px`:"100vh";return Hn("div",h(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:us,transform:`translate(min(0px, calc(100vw - max(0px, ${e}px) - 100%)), min(0px, calc(${l} - max(0px, ${t}px) - 100%)))`},r),children:o}))}function Ml({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:r,dispatch:o,inFlightSelectors:i,toolbarRef:s,onHoverSelector:a}){var G;let[l,d]=Bu([]),c=i&&i.size>0,{charIndex:p,word:u}=kl(!!c);Ou(()=>{if(t){d([]);return}let L=null,A=()=>{let ie=[];e.forEach((oe,Y)=>{let K=wn(oe.selector);if(!K)return;let H=K.getBoundingClientRect();ie.push({selector:oe.selector,modIndex:Y,top:H.top>=Tl?H.top-Tl:H.bottom,left:H.left,label:Du(oe),changeCount:oe.changes.length,annotationNumber:r+Y+1})}),d(ie)},E=()=>{L&&cancelAnimationFrame(L),L=requestAnimationFrame(A)};A(),window.addEventListener("scroll",E,!0),window.addEventListener("resize",E,!0);let _=new MutationObserver(E);return _.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",E),document.fonts.ready.then(E),()=>{window.removeEventListener("scroll",E,!0),window.removeEventListener("resize",E,!0),window.removeEventListener("load",E),_.disconnect(),L&&cancelAnimationFrame(L)}},[e,t,r]);let g=Pu(L=>{let A=e[L];if(!A)return;let E=wn(A.selector);E&&(o({type:"SELECT_ANNOTATION",payload:{id:null}}),o({type:"SET_TOOL",payload:"inspector"}),o({type:"SELECT_ELEMENT",payload:{el:E,info:A.element}}))},[e,o]);if(l.length===0)return null;let b=(G=s==null?void 0:s.current)==null?void 0:G.getBoundingClientRect(),v=b?b.top-8:void 0,R={display:"flex",alignItems:"center",gap:6,backgroundColor:n,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,whiteSpace:"nowrap",maxWidth:400},C={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return Hn(ds,{children:l.map(L=>{let A=i==null?void 0:i.has(L.selector);return Hn(_u,{left:L.left-us,top:L.top-us,avoidBottom:v,onClick:()=>g(L.modIndex),onMouseEnter:a?()=>a(L.selector):void 0,onMouseLeave:a?()=>a(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:fr("div",{"data-devtools":"badge",style:h(f({},R),{backgroundColor:A?"#999999":n}),children:[fr("span",{children:[L.annotationNumber,"."]}),Hn("span",{style:C,children:L.label}),fr("span",{style:{opacity:.8},children:["(",L.changeCount," ",L.changeCount===1?"change":"changes",")"]}),A&&fr("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[Hn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:p===1?fr(ds,{children:[Hn("circle",{cx:"7",cy:"7",r:"2"}),Hn("circle",{cx:"17",cy:"7",r:"2"}),Hn("circle",{cx:"7",cy:"17",r:"2"}),Hn("circle",{cx:"17",cy:"17",r:"2"})]}):fr(ds,{children:[Hn("circle",{cx:"12",cy:"6",r:"2"}),Hn("circle",{cx:"6",cy:"12",r:"2"}),Hn("circle",{cx:"18",cy:"12",r:"2"}),Hn("circle",{cx:"12",cy:"18",r:"2"})]})}),u]})]})},L.selector)})})}import{useEffect as Nu,useState as Hu}from"react";import{Fragment as $u,jsx as Il}from"react/jsx-runtime";function Fu(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function Rl({styleModifications:e,accentColor:t}){let[n,r]=Hu([]);if(Nu(()=>{let i=null,s=()=>{let d=[];for(let c of e){let p=wn(c.selector);if(!p)continue;let u=p.getBoundingClientRect();if(u.width===0&&u.height===0)continue;let g=zo(p);d.push({selector:c.selector,top:u.top,left:u.left,width:u.width,height:u.height,borderRadius:`${g["top-left"]}px ${g["top-right"]}px ${g["bottom-right"]}px ${g["bottom-left"]}px`})}r(d)},a=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(s)};s(),window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a,{passive:!0});let l=new MutationObserver(a);return l.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",a),window.removeEventListener("resize",a),l.disconnect(),i&&cancelAnimationFrame(i)}},[e]),n.length===0)return null;let o=Fu(t,.2);return Il($u,{children:n.map(i=>{let s={position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${o}`,borderRadius:i.borderRadius,boxSizing:"border-box"};return Il("div",{"data-devtools":"mod-border",style:s},i.selector)})})}import{useEffect as Ll,useLayoutEffect as zu,useState as Al}from"react";import{jsx as So,jsxs as fs}from"react/jsx-runtime";function ps(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}var Wu={top:"bottom",bottom:"top",left:"right",right:"left"};function gs({element:e,padding:t,accentColor:n,hoveredSide:r,draggingSide:o,cursorViewport:i,refreshKey:s}){let[a,l]=Al(null),[d,c]=Al(!1);if(Ll(()=>{let ee=X=>{(X.key==="Meta"||X.key==="Control")&&c(!0)},k=X=>{(X.key==="Meta"||X.key==="Control")&&c(!1)},Ae=()=>c(!1);return window.addEventListener("keydown",ee,!0),window.addEventListener("keyup",k,!0),window.addEventListener("blur",Ae),()=>{window.removeEventListener("keydown",ee,!0),window.removeEventListener("keyup",k,!0),window.removeEventListener("blur",Ae)}},[]),Ll(()=>{if(!e){l(null);return}let ee=()=>{l(e.getBoundingClientRect())};return ee(),window.addEventListener("scroll",ee,{passive:!0}),window.addEventListener("resize",ee,{passive:!0}),()=>{window.removeEventListener("scroll",ee),window.removeEventListener("resize",ee)}},[e]),zu(()=>{e&&l(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,s]),!a)return null;let p=a.width,u=a.height,{top:g,right:b,bottom:v,left:R}=t,C="pm-stripe-pattern",G=ps(n,.25),L=ps(n,.1),A=ps(n,.2),E=8,_=2,ie={position:"fixed",top:a.top,left:a.left,width:p,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"},oe=["top","right","bottom","left"],Y={top:`0,0 ${p},0 ${p-b},${g} ${R},${g}`,right:`${p},0 ${p},${u} ${p-b},${u-v} ${p-b},${g}`,bottom:`0,${u} ${R},${u-v} ${p-b},${u-v} ${p},${u}`,left:`0,0 ${R},${g} ${R},${u-v} 0,${u}`},K={top:{x:p/2-E/2,y:g/2-_/2,w:E,h:_},bottom:{x:p/2-E/2,y:u-v/2-_/2,w:E,h:_},left:{x:R/2-_/2,y:u/2-E/2,w:_,h:E},right:{x:p-b/2-_/2,y:u/2-E/2,w:_,h:E}},H=new Set;return o?H.add(o):r&&(H.add(r),d||H.add(Wu[r])),fs("div",{"data-devtools":"padding-handles",style:ie,children:[fs("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${p} ${u}`,children:[So("defs",{children:So("pattern",{id:C,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:So("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:G,strokeWidth:"1.5"})})}),So("rect",{x:"0.5",y:"0.5",width:Math.max(0,p-1),height:Math.max(0,u-1),fill:"none",stroke:A,strokeWidth:"1"}),oe.map(ee=>{if(t[ee]<=0)return null;let Ae=H.has(ee);return fs("g",{opacity:Ae?1:.6,children:[So("polygon",{points:Y[ee],fill:L}),So("polygon",{points:Y[ee],fill:`url(#${C})`})]},ee)}),oe.map(ee=>{let k=K[ee],Ae=H.has(ee);return So("rect",{x:k.x,y:k.y,width:k.w,height:k.h,fill:n,stroke:"#ffffff",strokeWidth:Ae?4:2,paintOrder:"stroke"},`handle-${ee}`)})]}),i&&(r||o)&&(()=>{let ee=o!=null?o:r,k=Math.round(t[ee]);return So("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:k})})()]})}import{useCallback as io,useEffect as Jn,useMemo as mi,useRef as Dn,useState as fn}from"react";import{Check as gi,ChevronDown as ws,MoveHorizontal as jl,RotateCcw as fp,Shrink as gp,X as mp}from"lucide-react";var ju="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",wo={borderWidth:3,borderStyle:"solid",borderImage:`url("${ju}") 4 / 1.9 / 0 round`};var ci={"font-size":["rem","px","em"],"line-height":["","rem","px","em"],"letter-spacing":["rem","px","em"],gap:["rem","px","em"],"column-gap":["rem","px","em"],"row-gap":["rem","px","em"],padding:["rem","px","em","%"],margin:["rem","px","em","%"],width:["rem","px","%","em"],height:["rem","px","%","em"],"min-width":["rem","px","%","em"],"max-width":["rem","px","%","em"],"min-height":["rem","px","%","em"],"max-height":["rem","px","%","em"],"border-width":["px","rem","em"],"border-radius":["rem","px","%","em"]};function gr(e){var t,n;return(n=(t=ci[e])==null?void 0:t[0])!=null?n:"px"}function Co(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function di(e,t,n,r){let o=e.trim();if(!o)return"";let i=o.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i);if(i)return`${parseFloat(i[1])}${i[2].toLowerCase()}`;let s=parseFloat(o);if(!isNaN(s)){if(r){let{unit:a}=Co(n);return`${s}${a||gr(t)}`}return`${s}${gr(t)}`}return o}function ms(e,t){if(!t||t==="px")return e;if(t==="rem"){let n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return Math.round(e/n*1e3)/1e3}return e}import{useCallback as Gu,useEffect as Yu,useRef as Pl,useState as Ju}from"react";import{Plus as Ol,X as Uu}from"lucide-react";import{jsx as Bn,jsxs as jo}from"react/jsx-runtime";var ui=[{name:"blur",label:"Blur",unit:"px",defaultValue:10,min:0,max:100,step:1},{name:"brightness",label:"Brightness",unit:"",defaultValue:1,min:0,max:3,step:.05},{name:"contrast",label:"Contrast",unit:"",defaultValue:1,min:0,max:3,step:.05},{name:"saturate",label:"Saturate",unit:"",defaultValue:1,min:0,max:3,step:.05},{name:"grayscale",label:"Grayscale",unit:"",defaultValue:0,min:0,max:1,step:.05},{name:"sepia",label:"Sepia",unit:"",defaultValue:0,min:0,max:1,step:.05},{name:"invert",label:"Invert",unit:"",defaultValue:0,min:0,max:1,step:.05},{name:"hue-rotate",label:"Hue Rotate",unit:"deg",defaultValue:0,min:0,max:360,step:1},{name:"opacity",label:"Opacity",unit:"",defaultValue:1,min:0,max:1,step:.05}];function Vu(e){if(!e||e==="none")return[];let t=[],n=/([\w-]+)\(([^)]+)\)/g,r;for(;(r=n.exec(e))!==null;){let o=r[1],i=r[2],s=parseFloat(i);isNaN(s)||t.push({name:o,value:s})}return t}function hs(e){return e.length===0?"none":e.map(t=>{var o;let n=ui.find(i=>i.name===t.name),r=(o=n==null?void 0:n.unit)!=null?o:"";return`${t.name}(${t.value}${r})`}).join(" ")}function Bl({value:e,onChange:t,accentColor:n,modified:r,panelContentRef:o}){let i=Vu(e),[s,a]=Ju(!1),l=Pl(null),d=Pl(null);Yu(()=>{if(!s)return;let L=A=>{l.current&&!A.composedPath().includes(l.current)&&a(!1)};return document.addEventListener("mousedown",L,!0),()=>document.removeEventListener("mousedown",L,!0)},[s]);let c=ui.filter(L=>!i.some(A=>A.name===L.name)),p=L=>{let A=[...i,{name:L.name,value:L.defaultValue}];t(hs(A)),a(!1)},u=L=>{let A=i.filter((E,_)=>_!==L);t(hs(A))},g=(L,A)=>{let E=i.map((_,ie)=>ie===L?h(f({},_),{value:A}):_);t(hs(E))},b={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},v=Gu(L=>{var H;if(!d.current)return{position:"fixed",top:0,left:0};let A=d.current.getBoundingClientRect(),E=d.current.closest('[data-devtools="panel"]'),_=E?E.getBoundingClientRect():{top:0,left:0,bottom:9999},ie=(H=o==null?void 0:o.current)==null?void 0:H.getBoundingClientRect(),oe=L*24+8,K=_.bottom-A.bottom<oe;return h(f({position:"fixed"},K?{bottom:_.bottom-A.top+2-_.top}:{top:A.bottom+2-_.top}),{left:ie?ie.left+4-_.left:A.left-_.left,width:ie?ie.width-8:140,zIndex:10001})},[o]),R={backgroundColor:"rgba(255, 255, 255, 0.95)",backdropFilter:"blur(16px)",WebkitBackdropFilter:"blur(16px)",border:"1px solid rgba(0,0,0,0.1)",borderRadius:4,padding:"4px 0",boxShadow:"0 4px 12px rgba(0,0,0,0.1)"},C={display:"block",width:"100%",padding:"4px 10px",border:"none",backgroundColor:"transparent",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#334155",cursor:"pointer",textAlign:"left"},G=L=>Bn("div",{ref:l,style:f(f({},v(L.length)),R),children:L.map(A=>Bn("button",{type:"button",onClick:()=>p(A),style:C,onMouseEnter:E=>{E.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:E=>{E.currentTarget.style.backgroundColor="transparent"},children:A.label},A.name))});return i.length===0?jo("div",{children:[jo("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Bn(mo,{modified:!1,children:Bn("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:h(f({},b),{color:"#999",cursor:"default"})})}),Bn("button",{ref:d,type:"button",onClick:()=>a(!s),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:Bn(Ol,{size:12})})]}),s&&G(ui)]}):jo("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((L,A)=>{let E=ui.find(_=>_.name===L.name);return E?jo("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Bn("span",{style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:r?n:"#94a3b8",fontWeight:r?600:400,width:56,flexShrink:0,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:E.label}),Bn(mo,{modified:r,children:jo("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[Bn("input",{type:"range",min:E.min,max:E.max,step:E.step,value:L.value,onChange:_=>g(A,parseFloat(_.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(L.value-E.min)/(E.max-E.min)*100}%, rgba(0,0,0,0.1) ${(L.value-E.min)/(E.max-E.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),Bn("input",{type:"number",min:E.min,max:E.max,step:E.step,value:E.unit==="px"||E.unit==="deg"?Math.round(L.value):Math.round(L.value*100)/100,onChange:_=>g(A,parseFloat(_.target.value)||0),style:h(f({},b),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),E.unit&&Bn("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:E.unit})]})}),Bn("button",{type:"button",onClick:()=>u(A),style:{display:"flex",alignItems:"center",justifyContent:"center",width:16,height:16,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:Bn(Uu,{size:10})})]},L.name):null}),c.length>0&&jo("div",{children:[jo("button",{ref:d,type:"button",onClick:()=>a(!s),style:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",border:"none",borderRadius:2,backgroundColor:"transparent",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#94a3b8",cursor:"pointer"},children:[Bn(Ol,{size:10}),"Add filter"]}),s&&G(c)]})]})}import{useCallback as hr,useEffect as Zu,useRef as pi,useState as Dl}from"react";import{AlignHorizontalSpaceAround as Qu,AlignVerticalSpaceAround as ep,Columns3 as tp,Grid2x2 as np,RectangleHorizontal as op,Rows3 as rp,UnfoldHorizontal as _l,UnfoldVertical as Nl}from"lucide-react";import{useCallback as Xu,useEffect as Ku,useRef as Hr}from"react";import{jsx as qu}from"react/jsx-runtime";var ys=[0,1,2,4,8,12,16,20,24,28,32];function mr({value:e,onChange:t,onPreview:n,onScrubEnd:r,onReset:o,isModified:i,accentColor:s,defaultUnit:a="rem",snapSteps:l,color:d,style:c,children:p}){let u=Hr(null),g=Hr(null),b=Hr(o),v=Hr(i),R=Hr(!1);b.current=o,v.current=i,Ku(()=>{let G=A=>{let E=g.current;if(!E)return;E.hasMoved=!0,R.current=A.shiftKey;let _=E.unit==="rem"||E.unit==="em"?.1:1;E.accum+=A.movementX*_;let ie=Math.max(0,Math.round((E.startValue+E.accum)*10)/10);if(A.shiftKey&&l){let oe=E.unit==="rem"||E.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,Y=E.unit==="rem"||E.unit==="em"?ie*oe:ie,K=l[l.length-1];for(let H=0;H<l.length-1;H++){let ee=l[H],k=l[H+1];if(Y<=(ee+k)/2){K=ee;break}if(Y<k){K=k;break}}Y>l[l.length-1]&&(K=Math.round(Y/8)*8),ie=E.unit==="rem"||E.unit==="em"?Math.round(K/oe*1e3)/1e3:K}n==null||n(`${ie}${E.unit}`)},L=()=>{let A=g.current;if(!A)return;let E=Math.max(0,Math.round((A.startValue+A.accum)*10)/10);if(R.current&&l){let ie=A.unit==="rem"||A.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,oe=A.unit==="rem"||A.unit==="em"?E*ie:E,Y=l[l.length-1];for(let K=0;K<l.length-1;K++){let H=l[K],ee=l[K+1];if(oe<=(H+ee)/2){Y=H;break}if(oe<ee){Y=ee;break}}oe>l[l.length-1]&&(Y=Math.round(oe/8)*8),E=A.unit==="rem"||A.unit==="em"?Math.round(Y/ie*1e3)/1e3:Y}let _=A.hasMoved&&E!==A.startValue;g.current=null,document.exitPointerLock(),_?t(`${E}${A.unit}`):A.hasMoved?n==null||n(`${A.startValue}${A.unit}`):v.current&&b.current&&b.current(),r==null||r()};return document.addEventListener("mousemove",G),document.addEventListener("mouseup",L),()=>{document.removeEventListener("mousemove",G),document.removeEventListener("mouseup",L)}},[t,n,r]);let C=Xu(G=>{var E;if(G.button!==0)return;G.preventDefault();let L=Co(e),A=L.unit&&L.unit!=="px"?L.unit:a;g.current={startValue:L.num,unit:A,accum:0,hasMoved:!1},(E=u.current)==null||E.requestPointerLock()},[e,a]);return qu("span",{ref:u,onMouseDown:C,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:f({color:i?s||"#3b82f6":d||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize"},c),children:p})}import{Fragment as bs,jsx as Ne,jsxs as ln}from"react/jsx-runtime";function ip({gridCols:e,gridRows:t,gridModified:n,accentColor:r,onColsChange:o,onRowsChange:i}){return Ne(Fn,{style:{width:100},children:ln("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"8px 4px"},children:[Ne("input",{type:"number",min:1,max:12,value:e,onChange:s=>o(parseInt(s.target.value)||1),style:h(f({},pn),{width:32,textAlign:"center",padding:2})}),Ne("span",{style:{fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:n?r:"#999",fontWeight:n?600:400,fontSize:11,margin:"0 4px"},children:"\xD7"}),Ne("input",{type:"number",min:1,max:12,value:t,onChange:s=>i(parseInt(s.target.value)||1),style:h(f({},pn),{width:32,textAlign:"center",padding:2})})]})})}function Hl({element:e,getValue:t,getOriginalValue:n,handleChange:r,isModified:o,onResetProperty:i,isCollapsed:s,onToggle:a,sectionHeaderStyle:l,activeDropdown:d,onDropdownChange:c,panelContentRef:p,accentColor:u,onFieldHover:g,preferredUnit:b,onUnitCycle:v}){let R=c,C=t("display"),G=t("flex-direction"),L=Fl(C,G),A=C==="flex"||C==="inline-flex",E=C==="grid",_=A||E,ie=t("width"),oe=t("height"),Y=o("width")?ie:ti(e,"width"),K=o("height")?oe:ti(e,"height"),H=xs(ie,Y),ee=xs(oe,K),k=t("min-width"),Ae=t("max-width"),X=t("min-height"),ge=t("max-height"),B=yr(t("padding")),ce=t("gap"),Q=t("row-gap"),q=t("column-gap"),Ee=t("grid-template-columns"),De=t("grid-template-rows"),pe=t("overflow"),Pe=Ee.split(/\s+/).filter(le=>le&&le!=="none").length||1,Re=De.split(/\s+/).filter(le=>le&&le!=="none").length||1,[Me,et]=Dl(!1),Ve=d!==null,Tt=Ve||Me,Mt=Ve?.3:Me?.65:1,zt=({mode:le,icon:Ie,active:Ue})=>Ne("button",{type:"button",onClick:()=>$l(le,r),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:Ue?pr(u,.15):"transparent",color:Ue?u:"#64748b",cursor:"pointer",fontSize:14},children:Ie}),tt=(le,Ie,Ue)=>{Ue==="fixed"?r(le,Ie):r(le,fi(Ue,Ie))},gn=le=>{let Ie=yr(t("padding")),Ue=le||"0";r("padding",`${Ie.top} ${Ue} ${Ie.bottom} ${Ue}`)},$=le=>{let Ie=yr(t("padding")),Ue=le||"0";r("padding",`${Ue} ${Ie.right} ${Ue} ${Ie.left}`)},[de,Te]=Dl({}),me=hr((le,Ie)=>Ue=>{Ie(Ue),Te(on=>h(f({},on),{[le]:Ue}))},[]),N=hr(le=>{Te(Ie=>{let Ue=f({},Ie);return delete Ue[le],Ue})},[]),ye=hr(le=>{let Ie=yr(t("padding"));Qe(e,"padding",`${Ie.top} ${le} ${Ie.bottom} ${le}`)},[e,t]),re=hr(le=>{let Ie=yr(t("padding"));Qe(e,"padding",`${le} ${Ie.right} ${le} ${Ie.left}`)},[e,t]),we=hr(le=>Ie=>{Qe(e,le,Ie)},[e]),We=G==="column"||G==="column-reverse",Ge=le=>le==="center"?1:le==="flex-end"||le==="end"?2:0,dt=Ge(t("justify-content")),xt=Ge(t("align-items")),vt=We?xt:dt,Oe=We?dt:xt,ke=pi(null),ht=pi({x:0,y:0}),mn=pi({col:vt,row:Oe});mn.current={col:vt,row:Oe};let Wn=hr((le,Ie)=>{let Ue=["flex-start","center","flex-end"];We?(r("justify-content",Ue[Ie]),r("align-items",Ue[le])):(r("justify-content",Ue[le]),r("align-items",Ue[Ie]))},[We,r]),hn=pi(Wn);hn.current=Wn,Zu(()=>{let Ie=Ue=>{let on=ke.current;if(!on||!Ue.composedPath().includes(on))return;Ue.preventDefault(),Ue.stopPropagation(),ht.current.x+=Ue.deltaX,ht.current.y+=Ue.deltaY;let{col:Qt,row:An}=mn.current,bn=!1;Math.abs(ht.current.x)>=30&&(Qt=Math.max(0,Math.min(2,Qt+(ht.current.x>0?1:-1))),ht.current.x=0,ht.current.y=0,bn=!0),!bn&&Math.abs(ht.current.y)>=30&&(An=Math.max(0,Math.min(2,An+(ht.current.y>0?1:-1))),ht.current.x=0,ht.current.y=0,bn=!0),bn&&(Qt!==mn.current.col||An!==mn.current.row)&&hn.current(Qt,An)};return document.addEventListener("wheel",Ie,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",Ie,{capture:!0})},[]);let Rt=()=>Ne("div",{ref:ke,onMouseEnter:()=>{et(!0),p.current&&(p.current.style.overflowY="hidden")},onMouseLeave:()=>{et(!1),p.current&&(p.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:eo,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(le=>[0,1,2].map(Ie=>Ne("button",{type:"button",onClick:()=>Wn(Ie,le),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:Ie===vt&&le===Oe?Ne("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:Ie===0?ln(bs,{children:[Ne("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Ne("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Ne("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]}):Ie===1?ln(bs,{children:[Ne("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Ne("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Ne("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]}):ln(bs,{children:[Ne("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Ne("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Ne("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]})}):Ne("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${le}-${Ie}`)))}),oo=o("grid-template-columns")||o("grid-template-rows");return ln("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Ne("div",{style:l,children:Ne("span",{children:_?"Auto layout":"Layout"})}),ln("div",{style:{padding:"8px 12px"},children:[ln("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:eo,borderRadius:2,padding:2,opacity:Mt,transition:"opacity 150ms ease"},children:[Ne(zt,{mode:"block",icon:Ne(op,{size:16}),active:L==="block"}),Ne(zt,{mode:"flex-col",icon:Ne(rp,{size:16}),active:L==="flex-col"}),Ne(zt,{mode:"flex-row",icon:Ne(tp,{size:16}),active:L==="flex-row"}),Ne(zt,{mode:"grid",icon:Ne(np,{size:16}),active:L==="grid"})]}),ln("div",{style:{display:"flex",gap:4,marginBottom:8},children:[Ne(vs,{label:"W",property:"width",cssValue:H==="fixed"?ie:`${Math.round(e.getBoundingClientRect().width)}px`,mode:H,onValueChange:le=>r("width",le),onModeChange:le=>{if(le==="fixed"){let Ie=e.getBoundingClientRect();r("width",`${Math.round(Ie.width)}px`)}else r("width",fi(le,ie))},modified:o("width"),dimmed:Ve&&d!=="width",dropdownOpen:d==="width",onDropdownChange:le=>R(le?"width":null),panelContentRef:p,accentColor:u,onReset:()=>i("width"),minValue:k!=="none"&&k!=="0px"&&k!=="auto"?k:"",maxValue:Ae!=="none"&&Ae!=="auto"?Ae:"",onMinChange:le=>r("min-width",le||"0"),onMaxChange:le=>r("max-width",le||"none"),onMinReset:()=>i("min-width"),onMaxReset:()=>i("max-width"),minModified:o("min-width"),maxModified:o("max-width")}),Ne(vs,{label:"H",property:"height",cssValue:ee==="fixed"?oe:`${Math.round(e.getBoundingClientRect().height)}px`,mode:ee,onValueChange:le=>r("height",le),onModeChange:le=>{if(le==="fixed"){let Ie=e.getBoundingClientRect();r("height",`${Math.round(Ie.height)}px`)}else r("height",fi(le,oe))},modified:o("height"),dimmed:Ve&&d!=="height",dropdownOpen:d==="height",onDropdownChange:le=>R(le?"height":null),panelContentRef:p,minValue:X!=="none"&&X!=="0px"&&X!=="auto"?X:"",maxValue:ge!=="none"&&ge!=="auto"?ge:"",onMinChange:le=>r("min-height",le||"0"),onMaxChange:le=>r("max-height",le||"none"),onMinReset:()=>i("min-height"),onMaxReset:()=>i("max-height"),minModified:o("min-height"),maxModified:o("max-height"),accentColor:u,onReset:()=>i("height")})]}),A&&ln("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8},children:[Ne("div",{style:{opacity:Ve?.3:1,transition:"opacity 150ms ease"},children:Rt()}),ln("div",{style:{flex:1,opacity:Mt,transition:"opacity 150ms ease"},children:[Ne("div",{onClick:o("gap")?()=>i("gap"):void 0,title:o("gap")?"Click to reset":void 0,style:{fontSize:9,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:o("gap")?u:"#999",fontWeight:o("gap")?600:400,marginBottom:2,cursor:o("gap")?"pointer":"default"},children:"Gap"}),Ne(Fn,{dimmed:Ve,children:ln("div",{style:{display:"flex",alignItems:"center"},children:[Ne(mr,{value:ce,onChange:le=>{N("gap"),r("gap",le)},onPreview:me("gap",we("gap")),onScrubEnd:()=>N("gap"),onReset:()=>i("gap"),isModified:o("gap"),accentColor:u,defaultUnit:b,children:G==="column"||G==="column-reverse"?Ne(Nl,{size:12,strokeWidth:o("gap")?2.5:1.5}):Ne(_l,{size:12,strokeWidth:o("gap")?2.5:1.5})}),Ne(Qn,{property:"gap",value:de.gap||ce,onChange:le=>r("gap",le),isModified:o("gap")||"gap"in de,style:h(f({},pn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:v})]})})]})]}),E&&ln("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:Mt,transition:"opacity 150ms ease"},children:[Ne(ip,{gridCols:Pe,gridRows:Re,gridModified:oo,accentColor:u,onColsChange:le=>r("grid-template-columns",`repeat(${le}, 1fr)`),onRowsChange:le=>r("grid-template-rows",`repeat(${le}, 1fr)`)}),ln("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[Ne(Fn,{dimmed:Ve,children:ln("div",{style:{display:"flex",alignItems:"center"},children:[Ne(mr,{value:q||ce,onChange:le=>{N("column-gap"),r("column-gap",le)},onPreview:me("column-gap",we("column-gap")),onScrubEnd:()=>N("column-gap"),onReset:()=>i("column-gap"),isModified:o("column-gap"),accentColor:u,defaultUnit:b,children:Ne(_l,{size:12,strokeWidth:o("column-gap")?2.5:1.5})}),Ne(Qn,{property:"column-gap",value:de["column-gap"]||q||ce,onChange:le=>r("column-gap",le),isModified:o("column-gap")||"column-gap"in de,placeholder:"col",style:h(f({},pn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:v})]})}),Ne(Fn,{dimmed:Ve,children:ln("div",{style:{display:"flex",alignItems:"center"},children:[Ne(mr,{value:Q||ce,onChange:le=>{N("row-gap"),r("row-gap",le)},onPreview:me("row-gap",we("row-gap")),onScrubEnd:()=>N("row-gap"),onReset:()=>i("row-gap"),isModified:o("row-gap"),accentColor:u,defaultUnit:b,children:Ne(Nl,{size:12,strokeWidth:o("row-gap")?2.5:1.5})}),Ne(Qn,{property:"row-gap",value:de["row-gap"]||Q||ce,onChange:le=>r("row-gap",le),isModified:o("row-gap")||"row-gap"in de,placeholder:"row",style:h(f({},pn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:v})]})})]})]}),_&&ln("div",{onMouseEnter:()=>g==null?void 0:g("padding"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:Mt,transition:"opacity 150ms ease"},children:[Ne(Fn,{style:{flex:1},dimmed:Ve,children:ln("div",{style:{display:"flex",alignItems:"center"},children:[Ne(mr,{value:B.left,onChange:le=>{N("padding-h"),gn(le)},onPreview:me("padding-h",ye),onScrubEnd:()=>N("padding-h"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:u,defaultUnit:b,snapSteps:ys,children:Ne(Qu,{size:12,strokeWidth:o("padding")?2.5:1.5})}),Ne(Qn,{property:"padding",value:de["padding-h"]||B.left,onChange:le=>gn(le),isModified:o("padding")||"padding-h"in de,placeholder:"H pad",style:h(f({},pn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:v})]})}),Ne(Fn,{style:{flex:1},dimmed:Ve,children:ln("div",{style:{display:"flex",alignItems:"center"},children:[Ne(mr,{value:B.top,onChange:le=>{N("padding-v"),$(le)},onPreview:me("padding-v",re),onScrubEnd:()=>N("padding-v"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:u,defaultUnit:b,snapSteps:ys,children:Ne(ep,{size:12,strokeWidth:o("padding")?2.5:1.5})}),Ne(Qn,{property:"padding",value:de["padding-v"]||B.top,onChange:le=>$(le),isModified:o("padding")||"padding-v"in de,placeholder:"V pad",style:h(f({},pn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:v})]})})]}),ln("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:Mt,transition:"opacity 150ms ease"},children:[Ne("input",{type:"checkbox",checked:pe==="hidden",onChange:le=>r("overflow",le.target.checked?"hidden":"visible"),style:{margin:0,accentColor:u}}),"Clip content"]})]})]})}import{AlignCenter as sp,AlignJustify as ap,AlignLeft as lp,AlignRight as cp,Baseline as dp,ChevronDown as up,WholeWord as pp}from"lucide-react";import{jsx as Et,jsxs as ho}from"react/jsx-runtime";var zl={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function Wl({element:e,getValue:t,handleChange:n,isModified:r,onResetProperty:o,isCollapsed:i,onToggle:s,sectionHeaderStyle:a,accentColor:l,colorVariables:d,activeColorDropdown:c,onColorDropdownChange:p,panelContentRef:u,preferredUnit:g,onUnitCycle:b}){var ee;let v=t("font-family"),R=t("font-size"),C=t("font-weight"),G=t("line-height"),L=t("letter-spacing"),A=t("text-align"),E=t("color"),_=String(C),ie=zl[_]||_,oe=Br(e,E),Y=E.includes("var(")?null:Dr(oe,d),K=({align:k,icon:Ae})=>{let X=A===k;return Et("button",{type:"button",onClick:()=>n("text-align",k),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:X?pr(l,.15):"transparent",color:X?l:"#64748b",cursor:"pointer"},children:Ae})},H=((ee=v.split(",")[0])==null?void 0:ee.trim().replace(/^["']|["']$/g,""))||"System";return ho("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Et("div",{style:a,children:Et("span",{children:"Typography"})}),ho("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[Et(Fn,{children:ho("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[Et("input",{type:"text",value:v,onChange:k=>n("font-family",k.target.value),style:h(f({},pn),{flex:1,minWidth:0,padding:0,fontWeight:r("font-family")?600:400,color:r("font-family")?l:"inherit"}),title:v}),Et(up,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),ho("div",{style:{display:"flex",gap:4},children:[Et(Fn,{style:{flex:1},children:Et("select",{value:_,onChange:k=>n("font-weight",k.target.value),style:h(f({},pn),{padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:r("font-weight")?600:400,color:r("font-weight")?l:"inherit"}),children:Object.entries(zl).map(([k,Ae])=>Et("option",{value:k,children:Ae},k))})}),Et(Fn,{style:{flex:1},children:Et("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:Et(Qn,{property:"font-size",value:R,onChange:k=>n("font-size",k),isModified:r("font-size"),min:1,max:999,style:h(f({},pn),{padding:"6px 8px",paddingRight:24,fontWeight:r("font-size")?600:400,color:r("font-size")?l:"inherit"}),unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999"},preferredUnit:g,onUnitCycle:b})})})]}),ho("div",{style:{display:"flex",gap:4},children:[Et(Fn,{style:{flex:1},children:ho("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[Et(dp,{size:12,style:{color:r("line-height")?l:"#999",flexShrink:0}}),Et(Qn,{property:"line-height",value:G,onChange:k=>n("line-height",k),isModified:r("line-height"),step:.1,min:0,placeholder:"Auto",style:h(f({},pn),{flex:1,minWidth:0,padding:0,fontWeight:r("line-height")?600:400,color:r("line-height")?l:"inherit"}),showUnit:!1})]})}),Et(Fn,{style:{flex:1},children:ho("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[Et(pp,{size:12,style:{color:r("letter-spacing")?l:"#999",flexShrink:0}}),Et(Qn,{property:"letter-spacing",value:L,onChange:k=>n("letter-spacing",k),isModified:r("letter-spacing"),step:.1,placeholder:"\u2014",style:h(f({},pn),{flex:1,minWidth:0,padding:0,fontWeight:r("letter-spacing")?600:400,color:r("letter-spacing")?l:"inherit"}),showUnit:!1})]})})]}),ho("div",{style:{display:"flex",gap:2,backgroundColor:eo,borderRadius:2,padding:2},children:[Et(K,{align:"left",icon:Et(lp,{size:14})}),Et(K,{align:"center",icon:Et(sp,{size:14})}),Et(K,{align:"right",icon:Et(cp,{size:14})}),Et(K,{align:"justify",icon:Et(ap,{size:14})})]}),ho("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[Et("span",{onClick:r("color")?()=>o("color"):void 0,title:r("color")?"Click to reset":void 0,style:{fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:r("color")?l:"#64748b",fontWeight:r("color")?600:400,cursor:r("color")?"pointer":"default",width:40,flexShrink:0},children:"Color"}),Et("div",{style:{flex:1,minWidth:0},children:Et(Ss,{value:E,resolvedValue:oe,colorVariables:d,matchingVariable:Y,onChange:k=>n("color",k),accentColor:l,modified:r("color"),panelContentRef:u,isDropdownOpen:c==="color",onDropdownChange:k=>p(k?"color":null)})})]})]})]})}import{Fragment as yp,jsx as Ce,jsxs as Ot}from"react/jsx-runtime";var Gl=[{name:"Background",properties:[{property:"background-color",label:"Color",type:"color"},{property:"opacity",label:"Opacity",type:"number",step:.1,min:0,max:1}]},{name:"Borders",properties:[{property:"border-width",label:"Width",type:"number",min:0,max:20},{property:"border-color",label:"Color",type:"color"},{property:"border-radius",label:"Radius",type:"number",min:0,max:100},{property:"border-style",label:"Style",type:"select",options:["none","solid","dashed","dotted","double"]}]},{name:"Effects",properties:[{property:"box-shadow",label:"Box Shadow",type:"text"},{property:"backdrop-filter",label:"Backdrop Filter",type:"backdrop-filter"},{property:"transform",label:"Transform",type:"text"}]}];function hp(e,t){let n=t.trim().toLowerCase();switch(e){case"opacity":return n==="1";case"border-width":return n==="0px"||n==="0"||n==="medium";case"border-radius":return n==="0px"||n==="0";case"border-style":return n==="none";case"box-shadow":return n==="none";case"backdrop-filter":return n==="none"||n==="";case"letter-spacing":return n==="normal"||n==="0px"||n==="0";case"background-color":return n==="rgba(0, 0, 0, 0)"||n==="transparent";default:return!1}}function xs(e,t){return!t||e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":"fixed"}function fi(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=Co(t);if(typeof n.num=="number"&&!isNaN(n.num)){let r=n.unit==="%"?"px":n.unit||"px";return`${n.num}${r}`}return"auto"}}}function yr(e){let t=e.split(/\s+/).filter(Boolean);return t.length===1?{top:t[0],right:t[0],bottom:t[0],left:t[0]}:t.length===2?{top:t[0],right:t[1],bottom:t[0],left:t[1]}:t.length===3?{top:t[0],right:t[1],bottom:t[2],left:t[1]}:t.length>=4?{top:t[0],right:t[1],bottom:t[2],left:t[3]}:{top:"0px",right:"0px",bottom:"0px",left:"0px"}}function Fl(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function $l(e,t){switch(e){case"block":t("display","block");break;case"flex-row":t("display","flex"),t("flex-direction","row");break;case"flex-col":t("display","flex"),t("flex-direction","column");break;case"grid":t("display","grid");break}}var eo="rgba(0, 0, 0, 0.04)",pn={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};function vs({label:e,property:t,cssValue:n,mode:r,onValueChange:o,onModeChange:i,modified:s,dimmed:a,dropdownOpen:l,onDropdownChange:d,panelContentRef:c,accentColor:p="#3b82f6",onReset:u,minValue:g,maxValue:b,onMinChange:v,onMaxChange:R,onMinReset:C,onMaxReset:G,minModified:L,maxModified:A}){let E=Co(n),_=s?E.unit||gr(t):gr(t),ie=!s&&E.unit&&E.unit!==_?ms(E.num,_):E.num,[oe,Y]=fn(!1),[K,H]=fn(String(ie)),[ee,k]=fn(!1),Ae=Dn(null),X=Dn(null),ge=Dn(null),B=Dn(!1);Jn(()=>{oe||H(String(ie))},[ie,oe]),Jn(()=>{if(!l)return;let Re=et=>{X.current&&!et.composedPath().includes(X.current)&&ge.current&&!et.composedPath().includes(ge.current)&&(d==null||d(!1))},Me=et=>{et.key==="Escape"&&(d==null||d(!1))};return document.addEventListener("mousedown",Re),document.addEventListener("keydown",Me),()=>{document.removeEventListener("mousedown",Re),document.removeEventListener("keydown",Me)}},[l,d]),Jn(()=>{oe&&Ae.current&&(Ae.current.focus(),Ae.current.select())},[oe]);let ce=()=>{let Re=di(K,t,n,s);o(Re||`${Math.max(0,parseFloat(K)||0)}${_}`),Y(!1)},Q=()=>{if(B.current){B.current=!1;return}ce()},q=Re=>{if(Re.key==="Enter"){ce();return}if(Re.key==="Escape"){B.current=!0,H(String(ie)),Y(!1);return}if(Re.key==="ArrowUp"||Re.key==="ArrowDown"){Re.preventDefault();let Me=Re.key==="ArrowUp"?1:-1,et=Re.shiftKey?8:Re.altKey?.1:1,Ve=parseFloat(K)||0,Tt=Math.round(Math.max(0,Ve+Me*et)*1e3)/1e3;H(String(Tt)),o(`${Tt}${_}`)}},Ee={fixed:"Fixed",hug:"Hug",fill:"Fill"},De={fixed:Ce(jl,{size:12}),hug:Ce(gp,{size:12}),fill:Ce(jl,{size:12})},pe=()=>{d==null||d(!l)},Pe=()=>{if(!ge.current||!(c!=null&&c.current))return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let Re=ge.current.getBoundingClientRect(),Me=c.current.getBoundingClientRect(),et=c.current.closest('[data-devtools="panel"]'),Ve=et?et.getBoundingClientRect():{top:0,left:0};return{position:"fixed",top:Re.bottom+4-Ve.top,left:Me.left+4-Ve.left,width:Me.width-8}};return Ot("div",{ref:ge,onMouseEnter:()=>k(!0),onMouseLeave:()=>k(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:oe?p:ee?"rgba(0,0,0,0.15)":"transparent",backgroundColor:eo,transition:"border-color 100ms ease, opacity 150ms ease",opacity:a?.3:1},children:[Ce("span",{onClick:s&&u?u:void 0,title:s?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:s?p:"#999",fontWeight:s?600:400,padding:"0 8px",flexShrink:0,cursor:s?"pointer":"default"},children:e}),r==="fixed"?oe?Ce("input",{ref:Ae,type:"text",inputMode:"numeric",value:K,onChange:Re=>H(Re.target.value),onKeyDown:q,onBlur:Q,style:h(f({},pn),{flex:1,minWidth:0,padding:"4px 2px"})}):Ce("span",{onClick:()=>Y(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:ie}):Ce("span",{style:{flex:1}}),Ot("button",{type:"button",onClick:pe,style:{display:"flex",alignItems:"center",gap:2,padding:"4px 8px",border:"none",outline:"none",backgroundColor:"transparent",color:"#999",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"pointer",flexShrink:0},children:[Ee[r],Ce(ws,{size:12})]}),l&&Ot("div",{ref:X,style:h(f({},Pe()),{backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:12,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'}),children:[Ot("button",{type:"button",onClick:()=>{i("fixed"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="fixed"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="fixed"?600:400,cursor:"pointer",textAlign:"left"},children:[De.fixed,Ot("span",{children:["Fixed ",t," (",n,")"]}),r==="fixed"&&Ce(gi,{size:14,style:{marginLeft:"auto"}})]}),Ot("button",{type:"button",onClick:()=>{i("hug"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="hug"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="hug"?600:400,cursor:"pointer",textAlign:"left"},children:[De.hug,Ce("span",{children:"Hug contents"}),r==="hug"&&Ce(gi,{size:14,style:{marginLeft:"auto"}})]}),Ot("button",{type:"button",onClick:()=>{i("fill"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="fill"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="fill"?600:400,cursor:"pointer",textAlign:"left"},children:[De.fill,Ce("span",{children:"Fill container"}),r==="fill"&&Ce(gi,{size:14,style:{marginLeft:"auto"}})]}),Ce("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),Ot("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[Ot("div",{style:{display:"flex",alignItems:"center",backgroundColor:eo,borderRadius:2,padding:"4px 8px"},children:[Ce("span",{onClick:L?Re=>{Re.stopPropagation(),C==null||C()}:void 0,title:L?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:L?p:"#999",fontWeight:L?600:400,marginRight:8,flexShrink:0,cursor:L?"pointer":"default"},children:"Min"}),Ce("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:Re=>v==null?void 0:v(Re.target.value),onClick:Re=>Re.stopPropagation(),style:h(f({},pn),{flex:1,minWidth:0,padding:0,textAlign:"right",color:L?p:"inherit",fontWeight:L?600:400})})]}),Ot("div",{style:{display:"flex",alignItems:"center",backgroundColor:eo,borderRadius:2,padding:"4px 8px"},children:[Ce("span",{onClick:A?Re=>{Re.stopPropagation(),G==null||G()}:void 0,title:A?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:A?p:"#999",fontWeight:A?600:400,marginRight:8,flexShrink:0,cursor:A?"pointer":"default"},children:"Max"}),Ce("input",{type:"text",value:b||"",placeholder:"\u2014",onChange:Re=>R==null?void 0:R(Re.target.value),onClick:Re=>Re.stopPropagation(),style:h(f({},pn),{flex:1,minWidth:0,padding:0,textAlign:"right",color:A?p:"inherit",fontWeight:A?600:400})})]})]})]})]})}function Fn({children:e,style:t,dimmed:n}){let[r,o]=fn(!1);return Ce("div",{onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),style:f({position:"relative",borderRadius:2,border:"1px solid",borderColor:r?"rgba(0,0,0,0.15)":"transparent",backgroundColor:eo,transition:"border-color 100ms ease, opacity 150ms ease",opacity:n?.3:1},t),children:e})}function mo({children:e}){let[t,n]=fn(!1);return Ce("div",{onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:t?"rgba(0,0,0,0.15)":"transparent",backgroundColor:eo,transition:"border-color 100ms ease"},children:e})}function Qn({property:e,value:t,onChange:n,isModified:r=!1,step:o=1,min:i,max:s,style:a,placeholder:l,showUnit:d=!0,unitStyle:c,preferredUnit:p,onUnitCycle:u}){let g=Co(t),b=gr(e),v=ci[e],C=p&&v&&v.includes(p)?p:b,G=r&&g.unit||C,L=!r&&g.unit&&g.unit!==G?ms(g.num,G):g.num,[A,E]=fn(!1),[_,ie]=fn(""),oe=Q=>{E(!0),ie(String(L||"")),requestAnimationFrame(()=>Q.target.select())},Y=()=>{if(E(!1),_.trim()){let Q=di(_,e,t,r);Q&&n(Q)}},K=Q=>{let q=Q.target.value;ie(q);let Ee=q.trim(),De=Ee.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),pe=Ee.match(/^(-?[\d.]+)$/);if(De){let Pe=parseFloat(De[1]);isNaN(Pe)||n(`${Pe}${De[2].toLowerCase()}`)}else if(pe){let Pe=parseFloat(pe[1]);isNaN(Pe)||n(`${Pe}${G}`)}},H=Q=>{if(Q.key==="Enter"){if(_.trim()){let q=di(_,e,t,r);q&&n(q)}Q.target.blur();return}if(Q.key==="ArrowUp"||Q.key==="ArrowDown"){Q.preventDefault();let q=Q.shiftKey?10:Q.altKey?.1:1,Ee=(Q.key==="ArrowUp"?1:-1)*o*q,De=parseFloat(_)||L||0,pe=Math.round((De+Ee)*1e3)/1e3;i!==void 0&&(pe=Math.max(i,pe)),s!==void 0&&(pe=Math.min(s,pe)),ie(String(pe)),n(`${pe}${G}`)}},ee=/^-?[\d.]/.test(t.trim()),k=A?_:ee?String(L):"",X=A&&/\s*(rem|em|px|%)\s*$/i.test(_)?"":G,ge=u&&(X==="rem"||X==="px"),B={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},ce=h(f({},c!=null?c:B),{pointerEvents:"auto",cursor:"pointer"});return Ot(yp,{children:[Ce("input",{type:"text",inputMode:"decimal",value:k,onFocus:oe,onBlur:Y,onChange:K,onKeyDown:H,placeholder:l,style:a}),d&&X&&Ce("span",{style:ge?ce:c!=null?c:B,onClick:ge?u:void 0,title:ge?"Click to switch units":void 0,children:X})]})}function Ss({value:e,resolvedValue:t,colorVariables:n,matchingVariable:r,onChange:o,accentColor:i="#3b82f6",modified:s,panelContentRef:a,isDropdownOpen:l,onDropdownChange:d}){let[c,p]=fn(!1),u=!e.includes("var(")&&r?r.usage:e,[g,b]=fn(u),[v,R]=fn(!1),[C,G]=fn(!1),[L,A]=fn(!1),E=Dn(null),_=Dn(null),ie=Dn(null),oe=l!==void 0?l:v,Y=d||R,K=io(()=>{if(!ie.current)return{position:"fixed",top:0,left:0,width:200};let q=ie.current.getBoundingClientRect(),Ee=ie.current.closest('[data-devtools="panel"]'),De=Ee?Ee.getBoundingClientRect():{top:0,left:0};if(a!=null&&a.current){let pe=a.current.getBoundingClientRect();return{position:"fixed",top:q.bottom+4-De.top,left:pe.left+4-De.left,width:pe.width-8}}return{position:"fixed",top:q.bottom+4-De.top,left:q.left-De.left,width:q.width}},[a]);Jn(()=>{if(!c){let q=!e.includes("var(")&&r?r.usage:e;b(q)}},[e,c,r]),Jn(()=>{if(!oe&&!C)return;let q=De=>{ie.current&&!De.composedPath().includes(ie.current)&&(Y(!1),G(!1))},Ee=De=>{De.key==="Escape"&&(Y(!1),G(!1))};return document.addEventListener("mousedown",q),document.addEventListener("keydown",Ee),()=>{document.removeEventListener("mousedown",q),document.removeEventListener("keydown",Ee)}},[oe,C]),Jn(()=>{c&&E.current&&(E.current.focus(),E.current.select())},[c]);let H=mi(()=>{if(!g||g.startsWith("#")||g.startsWith("rgb")||g.startsWith("hsl")||g.startsWith("oklch"))return[];let q=g.toLowerCase();return n.filter(Ee=>Ee.name.toLowerCase().includes(q)||Ee.usage.toLowerCase().includes(q)).slice(0,8)},[g,n]),ee=()=>{o(g),p(!1),G(!1)},k=q=>{b(q),q.includes("var")||q.includes("--")||q.length>0&&!q.startsWith("#")?G(!0):G(!1)},Ae=q=>{b(q.usage),o(q.usage),Y(!1),G(!1),p(!1)},X=()=>{setTimeout(()=>{!oe&&!C&&ee()},150)},ge=q=>{q.key==="Enter"?ee():q.key==="Escape"&&(b(e),p(!1),G(!1))},B=mi(()=>{let q=t.trim().toLowerCase();if(q.startsWith("#"))return q.length===4?`#${q[1]}${q[1]}${q[2]}${q[2]}${q[3]}${q[3]}`:q.slice(0,7);let Ee=q.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(Ee){let pe=parseInt(Ee[1],10).toString(16).padStart(2,"0"),Pe=parseInt(Ee[2],10).toString(16).padStart(2,"0"),Re=parseInt(Ee[3],10).toString(16).padStart(2,"0");return`#${pe}${Pe}${Re}`}let De=q.match(/oklch\(\s*([\d.]+)/);if(De){let pe=Math.max(0,Math.min(1,parseFloat(De[1]))),Pe=Math.round(pe*255).toString(16).padStart(2,"0");return`#${Pe}${Pe}${Pe}`}return"#000000"},[t]),ce=q=>{let Ee=q.target.value;b(Ee),o(Ee)},Q=e.includes("var(");return Ot("div",{ref:ie,onMouseEnter:()=>A(!0),onMouseLeave:()=>A(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:c?i:L?"rgba(0,0,0,0.15)":"transparent",backgroundColor:eo,transition:"border-color 100ms ease",overflow:"hidden"},children:[Ot("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[Ot("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[Ce("input",{type:"color",value:B,onChange:ce,style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),Ce("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),c?Ce("input",{ref:E,type:"text",value:g,onChange:q=>k(q.target.value),onKeyDown:ge,onBlur:X,style:h(f({},pn),{flex:1,minWidth:0})}):Ce("span",{onClick:()=>p(!0),style:{flex:1,minWidth:0,padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:s?i:"inherit"},title:u,children:u}),n.length>0&&Ce("button",{type:"button",onClick:()=>Y(!oe),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:Ce(ws,{size:12})})]}),C&&H.length>0&&Ce("div",{style:h(f({},K()),{backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,maxHeight:200,overflowY:"auto",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'}),children:H.map(q=>Ot("button",{type:"button",onClick:()=>Ae(q),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:"transparent",color:"#1e293b",cursor:"pointer",textAlign:"left",fontSize:12},children:[Ce("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:q.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),Ce("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:q.name})]},q.name))}),oe&&Ce("div",{ref:_,style:h(f({},K()),{backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,maxHeight:280,overflowY:"auto",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'}),children:n.map(q=>Ot("button",{type:"button",onClick:()=>Ae(q),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:u===q.usage||e===q.usage?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:u===q.usage||e===q.usage?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[Ce("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:q.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),Ce("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:q.name}),(u===q.usage||e===q.usage)&&Ce(gi,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},q.name))})]})}function Yl({element:e,elementInfo:t,selector:n,styleModifications:r,dispatch:o,onClose:i,onHover:s,accentColor:a="#3b82f6",toolbarRef:l}){var tt,gn;let d=Dn(null),c=Dn(null),[p,u]=fn(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch($){return!1}});Jn(()=>{if(p)return;let $=setTimeout(()=>u(!0),50);return()=>clearTimeout($)},[p]);let[g,b]=fn(null),[v,R]=fn(null),C=g!==null||v!==null,[G,L]=fn("rem"),A=io(()=>{L($=>$==="rem"?"px":"rem")},[]),E=Dn(new Map),[_,ie]=fn(""),oe=mi(()=>ts(),[]);Jn(()=>{let $=de=>{var me;if(de.key!=="Escape")return;let Te=document.activeElement;Te&&((me=d.current)!=null&&me.contains(Te))||i()};return window.addEventListener("keydown",$),()=>window.removeEventListener("keydown",$)},[i]);let Y=Dn({top:0,left:0,maxHeight:400}),[,K]=fn(0),H="devtools-panel-position",ee=Dn({x:0,y:0}),k=Dn(null),Ae=Dn(!1);Jn(()=>{try{let $=localStorage.getItem(H);if($){let de=JSON.parse($);typeof de.top=="number"&&typeof de.left=="number"&&(Ae.current=!0,Y.current=h(f({},Y.current),{top:de.top,left:de.left}))}}catch($){}},[]),Jn(()=>{let $=Te=>{var mn;let me=k.current;if(!me)return;let N=me.startOffsetX+(Te.clientX-me.startX),ye=me.startOffsetY+(Te.clientY-me.startY),re=280,we=16,We=Math.max(we,Math.min(window.innerWidth-re-we,Y.current.left+N)),Ge=Math.max(we,Y.current.top+ye);ee.current={x:We-Y.current.left,y:Ge-Y.current.top};let dt=d.current,xt=dt==null?void 0:dt.parentElement;if(!xt)return;xt.style.top=`${Ge}px`,xt.style.left=`${We}px`;let vt=(mn=l==null?void 0:l.current)==null?void 0:mn.getBoundingClientRect(),Oe=window.innerHeight-16;vt&&We+re>vt.left&&(Oe=vt.top-8);let ke=Math.max(0,Ge),ht=Math.max(200,Oe-ke);dt&&(dt.style.maxHeight=`${ht}px`)},de=()=>{if(!k.current)return;let Te=Y.current.top+ee.current.y,me=Y.current.left+ee.current.x;Y.current=h(f({},Y.current),{top:Te,left:me}),ee.current={x:0,y:0},Ae.current=!0;try{localStorage.setItem(H,JSON.stringify({top:Te,left:me}))}catch(N){}k.current=null};return window.addEventListener("mousemove",$),window.addEventListener("mouseup",de),()=>{window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",de)}},[]);let X=io($=>{$.button!==0||$.target.closest("button")||($.preventDefault(),k.current={startX:$.clientX,startY:$.clientY,startOffsetX:ee.current.x,startOffsetY:ee.current.y})},[]);Jn(()=>{ee.current={x:0,y:0};let $=(me=!1)=>{var Oe;let N=d.current,ye=280,re=8,we,We;if(Ae.current)we=Y.current.top,We=Y.current.left;else{let ke=e.getBoundingClientRect();We=ke.right+re,we=ke.top,We+ye>window.innerWidth-re&&(We=ke.left-ye-re),We<re&&(We=Math.max(re,(window.innerWidth-ye)/2))}let Ge=(Oe=l==null?void 0:l.current)==null?void 0:Oe.getBoundingClientRect(),dt=window.innerHeight-16;Ge&&We+ye>Ge.left&&(dt=Ge.top-re);let xt=Math.max(0,we),vt=Math.max(200,dt-xt);if(Y.current={top:we,left:We,maxHeight:vt},me&&N){let ke=N.parentElement;ke&&!Ae.current&&(ke.style.top=`${we+ee.current.y}px`,ke.style.left=`${We+ee.current.x}px`),N.style.maxHeight=`${vt}px`}else K(ke=>ke+1)};$(!1);let de=()=>$(!0),Te=()=>$(!1);return window.addEventListener("scroll",de,{passive:!0}),window.addEventListener("resize",Te,{passive:!0}),()=>{window.removeEventListener("scroll",de),window.removeEventListener("resize",Te)}},[e]),Jn(()=>{let $=d.current;if(!$)return;let de=Te=>{let me=c.current;if(!me){Te.preventDefault();return}let{scrollTop:N,scrollHeight:ye,clientHeight:re}=me,we=N<=0&&Te.deltaY<0,We=N+re>=ye&&Te.deltaY>0;(we||We)&&Te.preventDefault()};return $.addEventListener("wheel",de,{passive:!1}),()=>$.removeEventListener("wheel",de)},[]);let ge=mi(()=>r.find($=>$.selector===n),[r,n]),B=io($=>{let de=ge==null?void 0:ge.changes.find(Te=>Te.property===$);if(de)return de.modified;if($.includes("color")){let Te=Ki(e,$);if(Te&&Te.includes("var("))return Te}return Ar(e,$)},[e,ge]),ce=io($=>{if(E.current.has($))return E.current.get($);let de=ge==null?void 0:ge.changes.find(me=>me.property===$);if(de)return de.original;let Te=Ar(e,$);return E.current.set($,Te),Te},[e,ge]),Q=io(($,de)=>{let Te=ce($);Qe(e,$,de),$==="backdrop-filter"&&Qe(e,"-webkit-backdrop-filter",de),o({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:$,original:Te,modified:de}})},[e,n,t,o,ce]),q=io(()=>{es(n,r);let $=r.find(de=>de.selector===n);if($)for(let de of $.changes)o({type:"CLEAR_STYLE",payload:{selector:n,property:de.property}});E.current.clear()},[n,r,o]),Ee=io($=>{let de=r.find(me=>me.selector===n);de!=null&&de.changes.find(me=>me.property===$)&&e instanceof HTMLElement&&(e.style.removeProperty($),o({type:"CLEAR_STYLE",payload:{selector:n,property:$}}),E.current.delete($))},[e,n,r,o]),De=io(()=>{let $=_.split(";").map(de=>de.trim()).filter(de=>de);for(let de of $){let Te=de.indexOf(":");if(Te>0){let me=de.slice(0,Te).trim(),N=de.slice(Te+1).trim();me&&N&&Q(me,N)}}ie("")},[_,Q]),pe=io($=>{var de;return(de=ge==null?void 0:ge.changes.some(Te=>Te.property===$))!=null?de:!1},[ge]),Pe=$=>{var ye;let de=B($.property),Te=pe($.property),me=!Te&&hp($.property,de),N={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};if(me&&$.type!=="backdrop-filter")return Ce(mo,{modified:!1,children:Ce("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:re=>Q($.property,re.target.value),style:h(f({},N),{color:"#999"})})});switch($.type){case"color":{let re=Br(e,de),we=de.includes("var(")?null:Dr(re,oe);return Ce(Ss,{value:de,resolvedValue:re,colorVariables:oe,matchingVariable:we,onChange:We=>Q($.property,We),accentColor:a,modified:Te,panelContentRef:c,isDropdownOpen:v===$.property,onDropdownChange:We=>R(We?$.property:null)})}case"number":{if(!!ci[$.property])return Ce(mo,{modified:Te,children:Ce(Qn,{property:$.property,value:de,onChange:We=>Q($.property,We),isModified:Te,min:$.min,max:$.max,step:$.step||1,style:h(f({},N),{paddingRight:32}),unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999"},preferredUnit:G,onUnitCycle:A})});let{num:we}=Co(de);return Ce(mo,{modified:Te,children:Ce("input",{type:"number",value:we,min:$.min,max:$.max,step:$.step||1,onChange:We=>Q($.property,We.target.value),style:N})})}case"select":return Ce(mo,{modified:Te,children:Ot("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[Ce("select",{value:de,onChange:re=>Q($.property,re.target.value),style:h(f({},N),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(ye=$.options)==null?void 0:ye.map(re=>Ce("option",{value:re,children:re},re))}),Ce("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:Ce(ws,{size:12})})]})});case"spacing":return Ce(mo,{modified:Te,children:Ce("input",{type:"text",value:de,onChange:re=>Q($.property,re.target.value),placeholder:"e.g., 10px or 10px 20px",style:N})});case"backdrop-filter":return Ce(Bl,{value:de,onChange:re=>Q($.property,re),accentColor:a,modified:Te,panelContentRef:c});default:return Ce(mo,{modified:Te,children:Ce("input",{type:"text",value:de,onChange:re=>Q($.property,re.target.value),style:N})})}},Re=(tt=ge==null?void 0:ge.changes.length)!=null?tt:0,Me=(gn=ge==null?void 0:ge.captured)!=null?gn:!1,et=h(f({position:"fixed",top:Y.current.top,left:Y.current.left,width:280,maxHeight:Y.current.maxHeight,backgroundColor:"rgba(255, 255, 255, 0.85)",backdropFilter:"blur(32px)",WebkitBackdropFilter:"blur(32px)"},wo),{zIndex:1e4,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,overflow:"hidden",display:"flex",flexDirection:"column",opacity:p?1:0,transition:"opacity 150ms ease"}),Ve={display:"flex",alignItems:"center",justifyContent:"space-between",margin:"3px 3px 0",padding:"8px 7px 8px 12px",borderBottom:"1px solid rgba(0,0,0,0.1)",backgroundColor:"#f8fafc",cursor:k.current?"grabbing":"grab"},Tt={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 12px 6px",userSelect:"none",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:600,color:"#475569"},Mt={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},zt={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return Ce("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:Y.current.top+ee.current.y,left:Y.current.left+ee.current.x,zIndex:1e4,pointerEvents:"none"},children:Ot("div",{ref:d,"data-devtools":"panel",style:h(f({},et),{position:"relative",top:0,left:0,zIndex:0,pointerEvents:"auto"}),onMouseEnter:()=>s==null?void 0:s("element"),onMouseLeave:()=>s==null?void 0:s(null),children:[Ot("div",{style:Ve,onMouseDown:X,children:[Ot("div",{style:{display:"flex",alignItems:"center",gap:8,overflow:"hidden"},children:[Ce("span",{style:{fontWeight:600,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t.tagName}),Re>0&&Ce("span",{style:{backgroundColor:Me?"#999999":a,color:"#fff",fontSize:9,padding:"1px 4px",borderRadius:2},children:Re})]}),Ot("div",{style:{display:"flex",gap:4},children:[Re>0&&Ce("button",{type:"button",onClick:q,title:"Reset all changes",style:{display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,border:"none",background:"none",cursor:"pointer",color:"#64748b",borderRadius:2},children:Ce(fp,{size:14})}),Ce("button",{type:"button",onClick:i,title:"Close",style:{display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,border:"none",background:"none",cursor:"pointer",color:"#64748b",borderRadius:2},children:Ce(mp,{size:14})})]})]}),Ot("div",{ref:c,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[Ce("div",{style:{opacity:v?.3:1,transition:"opacity 150ms ease"},children:Ce(Hl,{element:e,getValue:B,getOriginalValue:ce,handleChange:Q,isModified:pe,onResetProperty:Ee,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:Tt,activeDropdown:g,onDropdownChange:b,panelContentRef:c,accentColor:a,onFieldHover:s,preferredUnit:G,onUnitCycle:A})}),Ce("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:Ce(Wl,{element:e,getValue:B,handleChange:Q,isModified:pe,onResetProperty:Ee,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:Tt,accentColor:a,colorVariables:oe,activeColorDropdown:v,onColorDropdownChange:R,panelContentRef:c,preferredUnit:G,onUnitCycle:A})}),Gl.map(($,de)=>{let Te=de===Gl.length-1,me=v&&$.properties.some(ye=>ye.property===v);return Ot("div",{style:{borderBottom:Te?"none":"1px solid rgba(0,0,0,0.08)",opacity:C&&!me?.3:1,transition:"opacity 150ms ease"},children:[Ce("div",{style:Tt,children:Ce("span",{children:$.name})}),Ce("div",{style:{padding:"4px 0"},children:$.properties.map(ye=>{let re=pe(ye.property),we=me&&ye.property!==v;return Ot("div",{style:h(f({},Mt),{opacity:we?.3:1,transition:"opacity 150ms ease"}),children:[Ce("span",{onClick:re?()=>Ee(ye.property):void 0,title:re?"Click to reset":void 0,style:h(f({},zt),{color:re?a:"#64748b",fontWeight:re?600:400,cursor:re?"pointer":"default"}),children:ye.label}),Ce("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:Pe(ye)})]},ye.property)})})]},$.name)}),Ot("div",{style:{opacity:C?.3:1,transition:"opacity 150ms ease"},children:[Ce("div",{style:Tt,children:Ce("span",{children:"Raw CSS"})}),Ot("div",{style:{padding:"8px 12px"},children:[Ce("textarea",{value:_,onChange:$=>ie($.target.value),placeholder:"property: value; ...",style:{width:"100%",height:60,padding:8,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"1px solid rgba(0,0,0,0.1)",borderRadius:2,resize:"vertical",outline:"none"}}),_.trim()&&Ce("button",{type:"button",onClick:De,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:a,color:"#fff",cursor:"pointer",opacity:_.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as bp,useLayoutEffect as xp,useState as vp}from"react";import{Fragment as Ep,jsx as Go,jsxs as Cp}from"react/jsx-runtime";var Cs=["flex-start","center","flex-end"],Es=["flex-start","center","flex-end"];function Sp(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function wp(e){return e==="normal"||e==="stretch"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function Jl(e){let t=Array.from(e.children);if(t.length===0)return null;let n=1/0,r=1/0,o=-1/0,i=-1/0;for(let s of t){let a=s.getBoundingClientRect();a.width===0&&a.height===0||(a.top<n&&(n=a.top),a.left<r&&(r=a.left),a.bottom>o&&(o=a.bottom),a.right>i&&(i=a.right))}return n===1/0?null:new DOMRect(r,n,i-r,o-n)}function Ul({element:e,modifier:t,accentColor:n,refreshKey:r=0}){let[o,i]=vp(null);if(bp(()=>{if(!e){i(null);return}let v=()=>i(Jl(e));return v(),window.addEventListener("scroll",v,{passive:!0}),window.addEventListener("resize",v,{passive:!0}),()=>{window.removeEventListener("scroll",v),window.removeEventListener("resize",v)}},[e]),xp(()=>{e&&i(Jl(e))},[e,r]),!o)return null;let s=o,a=window.getComputedStyle(e),l=a.display;if(l!=="flex"&&l!=="inline-flex")return null;let d=a.flexDirection,c=d==="column"||d==="column-reverse"?"vertical":"horizontal",p=c==="horizontal"?"vertical":"horizontal",u=[];if(t==="shift"){let v=Sp(a.justifyContent);if(v){let R=Cs.indexOf(v);c==="horizontal"?(R>0&&u.push("left"),R<Cs.length-1&&u.push("right")):(R>0&&u.push("up"),R<Cs.length-1&&u.push("down"))}}else{let v=wp(a.alignItems);if(v){let R=Es.indexOf(v);p==="horizontal"?(R>0&&u.push("left"),R<Es.length-1&&u.push("right")):(R>0&&u.push("up"),R<Es.length-1&&u.push("down"))}}if(u.length===0)return null;let g=14,b=7;return Go(Ep,{children:u.map(v=>{let R,C;switch(v){case"right":R=s.right+g,C=s.top+s.height/2;break;case"left":R=s.left-g,C=s.top+s.height/2;break;case"down":R=s.left+s.width/2,C=s.bottom+g;break;case"up":R=s.left+s.width/2,C=s.top-g;break}let G=v==="right"?0:v==="left"?180:v==="down"?90:-90,L={position:"fixed",left:R-b,top:C-b,width:b*2,height:b*2,pointerEvents:"none",zIndex:9997};return Go("div",{"data-devtools":"swipe-hint",style:L,children:Go("svg",{width:b*2,height:b*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:Cp("g",{transform:`rotate(${G})`,children:[Go("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),Go("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),Go("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),Go("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},v)})})}import{useEffect as kp,useLayoutEffect as Tp,useState as Mp}from"react";import{jsx as ks,jsxs as Ts}from"react/jsx-runtime";function Ip(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function Vl({element:e,fontSize:t,lineHeight:n,accentColor:r,hoveredProperty:o,draggingProperty:i,cursorViewport:s}){let[a,l]=Mp(null);if(kp(()=>{if(!e){l(null);return}let C=()=>{l(ur(e))};return C(),window.addEventListener("scroll",C,{passive:!0}),window.addEventListener("resize",C,{passive:!0}),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}},[e]),Tp(()=>{e&&l(ur(e))},[e,t,n]),!a)return null;let d=a.width,c=a.height,p=Ip(r,.2),u=i!=null?i:o,g=8,b=2,v={position:"fixed",top:a.top,left:a.left,width:d,height:c,pointerEvents:"none",zIndex:9996,overflow:"visible"},R=C=>C==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return Ts("div",{"data-devtools":"text-handles",style:v,children:[Ts("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${c}`,children:[ks("rect",{x:"0.5",y:"0.5",width:Math.max(0,d-1),height:Math.max(0,c-1),fill:"none",stroke:p,strokeWidth:"1"}),(u==="font-size"||!u)&&ks("rect",{x:d-b/2,y:c/2-g/2,width:b,height:g,fill:r,stroke:"#ffffff",strokeWidth:u==="font-size"?4:2,paintOrder:"stroke"}),(u==="line-height"||!u)&&ks("rect",{x:d/2-g/2,y:c-b/2,width:g,height:b,fill:r,stroke:"#ffffff",strokeWidth:u==="line-height"?4:2,paintOrder:"stroke"})]}),s&&u&&(()=>{let C=u==="font-size"?"Aa":"Lh",G=R(u);return Ts("div",{style:{position:"fixed",left:s.x+8,top:s.y-28,background:r,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:[C," ",G]})})()]})}import{Fragment as xr,jsx as gt,jsxs as br}from"react/jsx-runtime";var Xl=8,Ms=[0,1,2,4,8,12,16,20,24,28,32],Is="devtools-active-text";function Kl(e,t,n=0,r,o){let i=e.left+window.scrollX+4,s=t==="top-left"?e.top+window.scrollY-Yn-n*Yn+4:e.bottom+window.scrollY+4-1+n*Yn,a=window.scrollY+4,l=window.scrollY+window.innerHeight-Yn-4,d=90,c=!1;if(r&&o!==void 0){let p=r.getBoundingClientRect();if(e.left+4+o+4+d>p.left){let g=window.scrollY+p.top-Yn-4;g<l&&(l=g,c=!0)}}return s<a?s=e.top+window.scrollY+4:s>l&&(s=c?l:Math.max(e.top+window.scrollY+4,l)),{x:i,y:s}}function ql({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:r,activeAnnotationIds:o,queuePositionMap:i,inFlightStyleSelectors:s,inFlightSelectorColors:a,onAttachImages:l,onReply:d,onViewThread:c,onCloseThread:p,onModelComponentsAdd:u,onModelComponentFocus:g,onModelComponentHover:b,modelComponentNames:v,modelPanelHoveredComponent:R,modelSpacingTokenHover:C,highlightedAnnotationIds:G,focusedThreadAnnotationId:L,externalCanvasRef:A,toolbarRef:E}){var Qs,ea,ta,na,oa,ra,ia,sa,aa;let{canvasRef:_,redrawAll:ie,resizeCanvas:oe}=Za(),Y=nn(m=>{_.current=m,A&&(A.current=m)},[A,_]),K=Yt(!1);yn(()=>{let m=_.current;if(!m)return;let y=()=>{K.current&&(K.current=!1,m.style.pointerEvents="")},Z=M=>{M.button===0&&K.current&&y()};return window.addEventListener("mousedown",Z),()=>window.removeEventListener("mousedown",Z)},[_]);let[H,ee]=bt(!1),[k,Ae]=bt(()=>{if(typeof window=="undefined")return null;try{let m=localStorage.getItem(Is);return m?JSON.parse(m):null}catch(m){return null}}),[X,ge]=bt(null),[B,ce]=bt(null),[Q,q]=bt(null),Ee=Yt(null),De=Yt(null),pe=Yt({x:0,y:0}),Pe=Yt([]),Re=Yt(0),[Me,et]=bt(null),[Ve,Tt]=bt(new Map),Mt=Yt(0),zt=Yt(null),[tt,gn]=bt(null),[$,de]=bt(null),[Te,me]=bt(null),[N,ye]=bt(null),re=Yt({isDragging:!1,side:null,startX:0,startY:0,original:{top:0,right:0,bottom:0,left:0},element:null,elementInfo:null,selector:null,durableSelector:null}),[we,We]=bt(null),[Ge,dt]=bt(null),[xt,vt]=bt(null),[Oe,ke]=bt(null),ht=Yt({x:0,y:0}),[mn,Wn]=bt({x:0,y:0}),hn=Yt({isDragging:!1,hasMoved:!1,axis:null,startX:0,startY:0,originalRow:0,originalColumn:0,element:null,elementInfo:null,selector:null,durableSelector:null,isAuto:!1,originalJustifyContent:"",visualGap:0}),[Rt,oo]=bt(null),[dn,le]=bt(null),[Ie,Ue]=bt(null),[on,Qt]=bt(!1),[An,bn]=bt(0),[rn,Pn]=bt(null),xn=Yt({isDragging:!1,corner:null,startY:0,original:{"top-left":0,"top-right":0,"bottom-right":0,"bottom-left":0},maxRadius:0,element:null,elementInfo:null,selector:null,durableSelector:null}),[sn,Mo]=bt(null),[Cn,Ko]=bt(null),[Jt,vn]=bt(null),Vn=Yt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[Ht,Ft]=bt(null),[On,Dt]=bt(null),[at,_t]=bt(null),Wt=Qa(),qo=Yt(a);qo.current=a;let co=nn(m=>{let y=qo.current;if(!y||y.size===0)return!1;for(let Z of y.keys())try{if(m.matches(Z))return!0}catch(M){}return!1},[]),kr=Yt(e);kr.current=e;let uo=Yt(k);uo.current=k;let po=Yt([]),Zo=Yt(n);Zo.current=n;let[kt,En]=bt(null),T=e.selectedAnnotationIds;po.current=T;let z=nn((m,y=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:m,addToSelection:y}})},[t]),te=nn(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[he,se]=bt(null),[ve,Fe]=bt({x:window.scrollX,y:window.scrollY});yn(()=>(oe(),window.addEventListener("resize",oe),()=>window.removeEventListener("resize",oe)),[oe]),yn(()=>{let m=()=>{Fe({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",m,{passive:!0}),()=>window.removeEventListener("scroll",m)},[]),yn(()=>{k?localStorage.setItem(Is,JSON.stringify(k)):localStorage.removeItem(Is)},[k]),el(k,Ae,X,e.annotations,t);let $e=Yt(Me);$e.current=Me,yn(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let m=y=>{if(!y.altKey||!$e.current)return;y.preventDefault();let Z=y.deltaY>0?-1:1;Mt.current=Math.max(0,Mt.current+Z);let M=zt.current;if(M){let I=Qr(M,Mt.current);et(I)}};return window.addEventListener("wheel",m,{passive:!1}),()=>window.removeEventListener("wheel",m)},[e.activeTool,e.isAnnotating]),yn(()=>{e.activeTool!=="model"&&(et(null),Tt(new Map),Mt.current=0,zt.current=null)},[e.activeTool]),yn(()=>{var Z;let m=(Z=Me==null?void 0:Me.name)!=null?Z:null,y=m&&(v!=null&&v.has(m))?m:null;b==null||b(y)},[Me,v,b]);let[He,Lt]=bt(null);yn(()=>{var Z;if(!R){Lt(null);return}let m=lr(R.name),y=R.instanceIndex;Lt((Z=m[y%m.length])!=null?Z:null)},[R]);let[x,P]=bt([]);yn(()=>{var m,y;if(!C){P([]);return}(y=(m=C.token)==null?void 0:m.bindings)!=null&&y.length?P(Vi(C.token)):P(Ji(C.px))},[C]);let ae=Yt(null),J=Yt(null);ae.current=Rt,J.current=dn,yn(()=>{let m=["flex-start","center","flex-end"],y=["flex-start","center","flex-end"],M=null,I=!1,W=null,fe=null,F=(be,_e)=>{let it=Fo(be,_e);for(;it&&it!==document.documentElement;){let wt=window.getComputedStyle(it).display;if(wt==="flex"||wt==="inline-flex")return it;it=it.parentElement}return null},ne=be=>{let _e=window.getComputedStyle(be).flexDirection;return _e==="column"||_e==="column-reverse"?"vertical":"horizontal"},S=be=>{let _e=be.getAttribute("data-pm");return _e||(_e=Math.random().toString(36).substring(2,8),be.setAttribute("data-pm",_e)),{selector:`[data-pm="${_e}"]`,durableSelector:Nn(be)}},w=()=>{I=!0,M&&clearTimeout(M),M=setTimeout(()=>{I=!1,M=null},300)},U=(be,_e,lt)=>{let it=ne(be);if(_e===it){let qe=window.getComputedStyle(be).justifyContent,Pt=qe==="normal"||qe==="flex-start"||qe==="start"?"flex-start":qe==="flex-end"||qe==="end"?"flex-end":qe==="center"?"center":null;if(!Pt)return;let an=m.indexOf(Pt)+lt;if(an<0||an>=m.length)return;let fo=m[an],{selector:Lo,durableSelector:Li}=S(be);Qe(be,"justify-content",fo),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Lo,durableSelector:Li,element:Rn(be),changes:[{property:"justify-content",original:qe,modified:fo}]}})}else{let qe=window.getComputedStyle(be).flexDirection,Pt=it==="horizontal"?"column":"row",{selector:Kn,durableSelector:an}=S(be);Qe(be,"flex-direction",Pt),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Kn,durableSelector:an,element:Rn(be),changes:[{property:"flex-direction",original:qe,modified:Pt}]}})}bn(wt=>wt+1)},O=(be,_e,lt)=>{let wt=ne(be)==="horizontal"?"vertical":"horizontal";if(_e!==wt)return;let Pt=window.getComputedStyle(be).alignItems,Kn=Pt==="normal"||Pt==="stretch"||Pt==="flex-start"||Pt==="start"?"flex-start":Pt==="flex-end"||Pt==="end"?"flex-end":Pt==="center"?"center":null;if(!Kn)return;let fo=y.indexOf(Kn)+lt;if(fo<0||fo>=y.length)return;let Lo=y[fo],{selector:Li,durableSelector:jc}=S(be);Qe(be,"align-items",Lo),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Li,durableSelector:jc,element:Rn(be),changes:[{property:"align-items",original:Pt,modified:Lo}]}}),bn(Gc=>Gc+1)},D=20,j=null,V=null,Se=0,ze=(be,_e,lt)=>{let it=F(_e,lt);Pn(it?{modifier:be,target:it}:null)},Ze=be=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(be.key==="Shift"&&!be.altKey){let _e=ht.current;ze("shift",_e.x,_e.y)}else if(be.key==="Alt"&&!be.shiftKey){let _e=ht.current;ze("alt",_e.x,_e.y)}}},ot=be=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let _e=be.shiftKey&&!be.altKey,lt=be.altKey&&!be.shiftKey;if(!_e&&!lt||be.buttons!==0){j=null,V=null,Se=0,W=null,fe=null,Pn(null);return}if(W===null&&(W=be.clientX,fe=be.clientY,ze(_e?"shift":"alt",be.clientX,be.clientY)),I)return;j===null&&(j=be.clientX,V=be.clientY,Se=0);let it=be.clientX-j,wt=be.clientY-V,qe=Math.abs(it)>=Math.abs(wt)?it:wt;if(Math.abs(qe)>3){let Lo=qe>0?1:-1;if(Se!==0&&Lo!==Se){j=be.clientX,V=be.clientY,Se=0;return}Se=Lo}if(Math.abs(it)<D&&Math.abs(wt)<D)return;let Pt=F(W,fe);if(!Pt)return;let Kn=Math.abs(it)>=Math.abs(wt)?"horizontal":"vertical",fo=(Kn==="horizontal"?it:wt)>0?1:-1;j=null,V=null,Se=0,_e?U(Pt,Kn,fo):O(Pt,Kn,fo),w()},Nt=be=>{(be.key==="Shift"||be.key==="Alt")&&(W=null,fe=null,j=null,V=null,Se=0,Pn(null))},rt=()=>{Pn(null),j=null,V=null,Se=0};return window.addEventListener("keydown",Ze),window.addEventListener("mousemove",ot),window.addEventListener("mousedown",rt),window.addEventListener("keyup",Nt),()=>{window.removeEventListener("keydown",Ze),window.removeEventListener("mousemove",ot),window.removeEventListener("mousedown",rt),window.removeEventListener("keyup",Nt),M&&clearTimeout(M)}},[e.activeTool,e.isAnnotating,t]),yn(()=>{let m=y=>{var W,fe,F,ne;if(y.key==="Escape"){if(uo.current)return;if(e.activeTool==="model"&&Ve.size>0){y.preventDefault(),Tt(new Map);return}if(po.current.length>0){y.preventDefault(),te();return}}if(y.key==="Enter"&&e.activeTool==="model"&&Ve.size>0&&u){y.preventDefault();let S=[...Ve.keys()].filter(w=>!(v!=null&&v.has(w)));S.length>0&&u(S),Tt(new Map);return}if((y.metaKey||y.ctrlKey)&&y.key==="v"&&Pe.current.length>0&&!uo.current){y.preventDefault(),Re.current++;let S=Re.current*20,U=((W=Pe.current[0])==null?void 0:W.groupId)?Math.random().toString(36).substring(2,9):void 0,O=Pe.current.map(j=>h(f({},j),{id:Math.random().toString(36).substring(2,9),groupId:j.groupId?U:void 0,timestamp:Date.now(),points:j.points.map(V=>({x:V.x+S,y:V.y+S}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:O}});let D=O.find(j=>j.type!=="text")||O[0];D&&z(D.id);return}let Z=po.current;if(Z.length===0||uo.current)return;let M=(F=(fe=y.composedPath)==null?void 0:fe.call(y)[0])!=null?F:y.target,I=M==null?void 0:M.tagName;if(!(I==="INPUT"||I==="TEXTAREA"||M!=null&&M.isContentEditable)&&(y.key==="Delete"||y.key==="Backspace")){if(y.preventDefault(),p){let S=kr.current.annotations;for(let w of Z){let U=S.find(D=>D.id===w);if(!U)continue;let O=U.threadId||U.groupId&&((ne=S.find(D=>D.groupId===U.groupId&&D.threadId))==null?void 0:ne.threadId);O&&p(O)}}for(let S of Z)t({type:"DELETE_ANNOTATION",payload:{id:S}});te()}};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[t,te,z,e.activeTool,Ve,v,u,p]);let Le=rr(),Be=hi(()=>e.annotations.filter(m=>!m.pathname||m.pathname===Le),[e.annotations,Le]),Xe=hi(()=>li(e.annotations),[e.annotations]),Ye=hi(()=>{let m=new Map,y=new Set,Z=1,M=[...e.annotations].sort((I,W)=>I.timestamp-W.timestamp);for(let I of M)if(!Xe.has(I))if(I.groupId){if(!y.has(I.groupId)){y.add(I.groupId);let W=e.annotations.filter(fe=>fe.groupId===I.groupId);for(let fe of W)m.set(fe.id,Z);Z++}}else m.set(I.id,Z),Z++;return m},[e.annotations,Xe]),mt=hi(()=>{if(T.length===0)return null;let m=new Map;for(let y of T){let Z=e.annotations.find(I=>I.id===y);if(!Z)continue;let M=Z.groupId?e.annotations.filter(I=>I.groupId===Z.groupId):[Z];for(let I of M)if(I.linkedSelector&&!(a!=null&&a.has(I.linkedSelector))){let W=I.color||e.activeColor;m.set(I.linkedSelector,W)}}return m.size>0?m:null},[T,e.annotations,e.activeColor,a]);yn(()=>{let m=Be.filter(y=>!(Xe.has(y)||k&&!k.isNew&&y.id===k.id));ie(m,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,T,Xl,ve.x,ve.y,Ye,G)},[Be,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,ie,k,T,ve,Ye,Xe,G]),yn(()=>{if(B){let m=Math.random().toString(36).substring(2,9);Ae({id:m,point:B.point,text:"",fontSize:12,isNew:!0,groupId:B.groupId}),ce(null)}},[B]),yn(()=>{Q&&(Ae({id:Math.random().toString(36).substring(2,9),point:Q.point,text:"",fontSize:12,isNew:!0,linkedSelector:Q.linkedSelector,linkedAnchor:Q.linkedAnchor,elements:Q.elements}),q(null))},[Q]);let nt=Yt(null),ut=(Qs=k==null?void 0:k.id)!=null?Qs:null;yn(()=>{ut&&Ee.current?requestAnimationFrame(()=>{var Z;let m=Ee.current;if(!m||(m.focus(),De.current===ut))return;De.current=ut;let y=uo.current;if(y){if(nt.current!==null){let M=Math.min(nt.current,m.value.length);m.setSelectionRange(M,M);return}if(!y.isNew&&y.clickPoint){let M=_.current;if(!M)return;let I=M.getContext("2d");if(!I)return;I.font=`${y.fontSize}px ${Vt}`;let W=y.fontSize*1.4,fe=y.text.split(`
|
|
4
|
+
`),F=y.clickPoint.y-y.point.y,ne=Math.max(0,Math.min(fe.length-1,Math.floor(F/W))),S=y.clickPoint.x-y.point.x,w=fe[ne]||"",U=0;for(let D=0;D<=w.length;D++){let j=I.measureText(w.substring(0,D)).width;if(j>S){let V=D>0?I.measureText(w.substring(0,D-1)).width:0;U=S-V<j-S?D-1:D;break}U=D}let O=U;for(let D=0;D<ne;D++)O+=(((Z=fe[D])==null?void 0:Z.length)||0)+1;m.setSelectionRange(O,O)}}}):(De.current=null,nt.current=null)},[ut,_]);let St=nn(m=>{let y=_.current;if(!y)return{x:0,y:0};let Z=y.getBoundingClientRect(),M,I;if("touches"in m&&m.touches[0])M=m.touches[0].clientX,I=m.touches[0].clientY;else if("clientX"in m)M=m.clientX,I=m.clientY;else return{x:0,y:0};return{x:M-Z.left+window.scrollX,y:I-Z.top+window.scrollY}},[_]),pt=nn((m,y,Z,M)=>{let I=Z.x-y.x,W=Z.y-y.y,fe=I*I+W*W;if(fe===0)return Math.sqrt((m.x-y.x)**2+(m.y-y.y)**2)<=M;let F=Math.max(0,Math.min(1,((m.x-y.x)*I+(m.y-y.y)*W)/fe)),ne=y.x+F*I,S=y.y+F*W;return Math.sqrt((m.x-ne)**2+(m.y-S)**2)<=M},[]),jt=nn(m=>{for(let Z=Be.length-1;Z>=0;Z--){let M=Be[Z];if(!M||Xe.has(M))continue;let I=(M.strokeWidth||3)+4;switch(M.type){case"text":{if(!M.points[0]||!M.text)continue;let W=M.points[0],fe=M.fontSize||12,F=_.current;if(F){let ne=F.getContext("2d");if(ne){ne.font=`${fe}px ${Vt}`;let S=M.text.replace(/\n/g," "),w=W.x-ve.x,U=ir(w),O=sr(ne,S,U),D=ne.measureText(O).width,j=fe*1.4;if(m.x>=W.x-4-4&&m.x<=W.x+D+4+4&&m.y>=W.y-4-4&&m.y<=W.y+j+4+4)return M}}break}case"rectangle":{if(M.points.length<2)continue;let W=M.points[0],fe=M.points[M.points.length-1],F=Math.min(W.x,fe.x),ne=Math.max(W.x,fe.x),S=Math.min(W.y,fe.y),w=Math.max(W.y,fe.y),U=pt(m,{x:F,y:S},{x:ne,y:S},I),O=pt(m,{x:F,y:w},{x:ne,y:w},I),D=pt(m,{x:F,y:S},{x:F,y:w},I),j=pt(m,{x:ne,y:S},{x:ne,y:w},I);if(U||O||D||j)return M;break}case"circle":{if(M.points.length<2)continue;let W=M.points[0],fe=M.points[M.points.length-1],F=(W.x+fe.x)/2,ne=(W.y+fe.y)/2,S=Math.abs(fe.x-W.x)/2,w=Math.abs(fe.y-W.y)/2,U=m.x-F,O=m.y-ne,D=Math.sqrt((U/S)**2+(O/w)**2);if(Math.abs(D-1)*Math.max(S,w)<=I)return M;break}case"line":{if(M.points.length<2)continue;let W=M.points[0],fe=M.points[M.points.length-1];if(pt(m,W,fe,I))return M;break}case"freehand":{if(M.points.length<2)continue;for(let W=0;W<M.points.length-1;W++){let fe=M.points[W],F=M.points[W+1];if(pt(m,fe,F,I))return M}break}}}return null},[Be,_,pt,Xe,ve.x]),Xn=nn(m=>{let y=jt(m);return(y==null?void 0:y.type)==="text"?y:null},[jt]),kn=nn(m=>{if(T.length===0)return null;let y=Xl/2+4;for(let Z of T){let M=e.annotations.find(I=>I.id===Z);if(!(!M||M.points.length<2)){if(M.type==="line"){let I=M.points[0],W=M.points[M.points.length-1];if(Math.sqrt((m.x-I.x)**2+(m.y-I.y)**2)<=y)return{handle:"start",annotationId:Z};if(Math.sqrt((m.x-W.x)**2+(m.y-W.y)**2)<=y)return{handle:"end",annotationId:Z};continue}if(M.type==="circle"){let I=M.points[0],W=M.points[M.points.length-1],fe=Math.min(I.x,W.x),F=Math.max(I.x,W.x),ne=Math.min(I.y,W.y),S=Math.max(I.y,W.y),w=(fe+F)/2,U=(ne+S)/2,O=[{handle:"top",x:w,y:ne},{handle:"bottom",x:w,y:S},{handle:"left",x:fe,y:U},{handle:"right",x:F,y:U}];for(let{handle:D,x:j,y:V}of O)if(Math.sqrt((m.x-j)**2+(m.y-V)**2)<=y)return{handle:D,annotationId:Z};continue}if(M.type==="rectangle"||M.type==="freehand"){let I=M.points[0],W=M.points[M.points.length-1],fe,F,ne,S;M.type==="freehand"?(fe=Math.min(...M.points.map(U=>U.x)),F=Math.max(...M.points.map(U=>U.x)),ne=Math.min(...M.points.map(U=>U.y)),S=Math.max(...M.points.map(U=>U.y))):(fe=Math.min(I.x,W.x),F=Math.max(I.x,W.x),ne=Math.min(I.y,W.y),S=Math.max(I.y,W.y));let w=[{corner:"topLeft",x:fe,y:ne},{corner:"topRight",x:F,y:ne},{corner:"bottomLeft",x:fe,y:S},{corner:"bottomRight",x:F,y:S}];for(let{corner:U,x:O,y:D}of w)if(Math.sqrt((m.x-O)**2+(m.y-D)**2)<=y)return{handle:U,annotationId:Z}}}}return null},[T,e.annotations]);yn(()=>{let m=y=>{if(pe.current={x:y.clientX+window.scrollX,y:y.clientY+window.scrollY},!k){let Z=Xn(pe.current);ge((Z==null?void 0:Z.id)||null)}};return window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m)},[k,Xn]);let Gt=nn(()=>{var y;if(!k)return;let m=((y=k.images)==null?void 0:y.length)||0;if(k.text.trim()||m>0)if(k.isNew){let Z=Kr();t({type:"ADD_TEXT",payload:f({point:k.point,text:k.text||(m>0?`[${m} image${m>1?"s":""}]`:""),fontSize:k.fontSize,id:Z,groupId:k.groupId,linkedSelector:k.linkedSelector,linkedAnchor:k.linkedAnchor,elements:k.elements},m>0?{imageCount:m}:{})}),m>0&&k.images&&l&&l(Z,k.images)}else t({type:"UPDATE_TEXT",payload:f({id:k.id,text:k.text||(m>0?`[${m} image${m>1?"s":""}]`:"")},m>0?{imageCount:m}:{})}),m>0&&k.images&&l&&l(k.id,k.images);else k.isNew||t({type:"DELETE_ANNOTATION",payload:{id:k.id}});Ae(null)},[k,t,l]),ft=nn(m=>{for(let y=0;y<Ms.length-1;y++){let Z=Ms[y],M=Ms[y+1];if(m<=(Z+M)/2)return Z;if(m<M)return M}return Math.round(m/8)*8},[]),Sn=nn((m,y,Z,M)=>{let I=Z.top+Math.max(M.top,4),W=Z.bottom-Math.max(M.bottom,4),fe=Z.left+Math.max(M.left,4),F=Z.right-Math.max(M.right,4);if(m<Z.left||m>Z.right||y<Z.top||y>Z.bottom)return null;let ne=y<I,S=y>W,w=m<fe,U=m>F;return ne&&w?M.top>=M.left?"top":"left":ne&&U?M.top>=M.right?"top":"right":S&&w?M.bottom>=M.left?"bottom":"left":S&&U?M.bottom>=M.right?"bottom":"right":ne?"top":S?"bottom":w?"left":U?"right":null},[]),Ke=nn(m=>{var W,fe;if(!e.isAnnotating)return;if(e.inspectedElement&&e.activeTool==="hand"&&!("button"in m&&m.button===2)){m.preventDefault(),m.stopPropagation(),t({type:"SELECT_ELEMENT",payload:null});return}let y=St(m),Z="shiftKey"in m&&m.shiftKey;if(e.activeTool==="inspector"){if("button"in m&&m.button===2)return;if(tt&&!co(tt)){let F=e.annotations.find(Ze=>{if(!Ze.linkedSelector||!Ze.threadId)return!1;try{return tt.matches(Ze.linkedSelector)}catch(ot){return!1}});if(F!=null&&F.threadId&&c){c(F.threadId),requestAnimationFrame(()=>{var Nt;let Ze=document.querySelector("[data-popmelt-shadow-host]"),ot=(Nt=Ze==null?void 0:Ze.shadowRoot)==null?void 0:Nt.querySelector("[data-popmelt-reply]");ot==null||ot.focus()});return}let ne=Rn(tt),S=Nn(tt),w=tt.getBoundingClientRect(),U=tt.getAttribute("data-pm");U||(U=Math.random().toString(36).substring(2,8),tt.setAttribute("data-pm",U));let O=`[data-pm="${U}"]`,D=e.styleModifications.some(Ze=>{try{return tt.matches(Ze.selector)}catch(ot){return!1}}),j=e.annotations.filter(Ze=>{if(!Ze.linkedSelector)return!1;try{return tt.matches(Ze.linkedSelector)}catch(ot){return!1}}).length,V=(D?1:0)+j,Se=w.top>=Yn*(1+V)?"top-left":"bottom-left",ze=Kl(w,Se,V,E==null?void 0:E.current);q({point:ze,linkedSelector:O,linkedAnchor:Se,elements:[h(f({},ne),{selector:S})]})}return}if(e.activeTool==="model"){if("button"in m&&m.button===2)return;if(Me){let F=Me.name;if(v!=null&&v.has(F)){g==null||g(F);return}"shiftKey"in m&&m.shiftKey?Tt(S=>{let w=new Map(S);return w.has(F)?w.delete(F):w.set(F,Me),w}):Ve.size===1&&Ve.has(F)?(u&&u([F]),Tt(new Map)):Tt(new Map([[F,Me]]))}return}if(e.activeTool==="hand"&&Rt&&dn){let F=Rt,ne=F.getAttribute("data-pm");ne||(ne=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",ne));let S=Nn(F),w=`[data-pm="${ne}"]`,U=Rn(F),O=Pr(F),D=y.x-window.scrollX,j=y.y-window.scrollY,V=on,Se=window.getComputedStyle(F).justifyContent,ze=0;if(V){let ot=$o(F).find(Nt=>Nt.axis===dn);ze=ot?dn==="column"?ot.w:ot.h:0}Qe(F,"transition","none"),hn.current={isDragging:!0,hasMoved:!1,axis:dn,startX:D,startY:j,originalRow:V?ze:O.row,originalColumn:V?ze:O.column,element:F,elementInfo:h(f({},U),{selector:w}),selector:w,durableSelector:S,isAuto:V,originalJustifyContent:Se,visualGap:ze},Ue({axis:dn,row:V?ze:O.row,column:V?ze:O.column});return}if(e.activeTool==="hand"&&Ht&&On){let F=Ht,ne=F.getAttribute("data-pm");ne||(ne=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",ne));let S=`[data-pm="${ne}"]`,w=Rn(F),{fontSize:U,lineHeight:O}=Or(F),D=U>0?O/U:1.2,j=y.x-window.scrollX,V=y.y-window.scrollY;Qe(F,"transition","none");let Se=Nn(F);Vn.current={isDragging:!0,property:On,startX:j,startY:V,originalFontSize:U,originalLineHeight:O,originalRatio:D,element:F,elementInfo:h(f({},w),{selector:S}),selector:S,durableSelector:Se},_t({property:On,fontSize:U,lineHeight:O});return}if(e.activeTool==="hand"&&sn&&Cn){let F=sn,ne=F.getAttribute("data-pm");ne||(ne=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",ne));let S=`[data-pm="${ne}"]`,w=Nn(F),U=Rn(F),O=zo(F),D=F.getBoundingClientRect(),j=Math.floor(D.height/2),V=y.y-window.scrollY;Qe(F,"transition","none"),xn.current={isDragging:!0,corner:Cn,startY:V,original:O,maxRadius:j,element:F,elementInfo:h(f({},U),{selector:S}),selector:S,durableSelector:w},vn({corner:Cn,radius:f({},O)});return}if(e.activeTool==="hand"&&we&&Ge){let F=we,ne=F.getAttribute("data-pm");ne||(ne=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",ne));let S=`[data-pm="${ne}"]`,w=Nn(F),U=Rn(F),O=dr(F),D=y.x-window.scrollX,j=y.y-window.scrollY;Qe(F,"transition","none"),re.current={isDragging:!0,side:Ge,startX:D,startY:j,original:O,element:F,elementInfo:h(f({},U),{selector:S}),selector:S,durableSelector:w},ke({side:Ge,padding:f({},O)});return}let M=kn(y);if(M){let F=e.annotations.find(ne=>ne.id===M.annotationId);if(F&&F.type!=="text"&&((W=F.status)!=null?W:"pending")==="pending"){se({annotationId:M.annotationId,handle:M.handle,startPoint:y,originalPoints:[...F.points],hasMoved:!1});return}}let I=jt(y);if(I&&I.points[0]){if(k&&Gt(),I.type!=="text"?(z(I.id,Z),I.color&&t({type:"SET_COLOR",payload:I.color})):Z||te(),c){let F=I.threadId||(I.groupId?(fe=e.annotations.find(ne=>ne.groupId===I.groupId&&ne.threadId))==null?void 0:fe.threadId:void 0);F&&c(F)}En({annotation:I,startPoint:y,hasMoved:!1});return}if(Z||te(),e.activeTool==="text"){k&&Gt();let F=Math.random().toString(36).substring(2,9);Ae({id:F,point:y,text:"",fontSize:12,isNew:!0});return}ee(!0),t({type:"START_PATH",payload:y})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,k,T,tt,we,Ge,sn,Cn,Rt,dn,on,Ht,On,Me,Ve,v,u,g,c,St,jt,kn,t,z,te,Gt]),At=nn(m=>{var Z,M;let y=St(m);if(e.activeTool==="inspector"&&e.isAnnotating){let I=y.x-window.scrollX,W=y.y-window.scrollY,fe=Fo(I,W),F=fe&&co(fe)?null:fe;F!==tt&&(gn(F),de(F?Rn(F):null));return}if(e.activeTool==="model"&&e.isAnnotating){let I=y.x-window.scrollX,W=y.y-window.scrollY,fe=Fo(I,W);if(fe!==zt.current&&(zt.current=fe,Mt.current=0),fe){let F=Qr(fe,Mt.current);et(F)}else et(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let I=y.x-window.scrollX,W=y.y-window.scrollY;ht.current={x:I,y:W},Wn({x:I,y:W});let fe=Wt.current.cmd,F=Wt.current.shift;if(hn.current.isDragging){let S=hn.current,w=S.element;if(!w)return;if(!S.hasMoved){let j=Math.abs(I-S.startX),V=Math.abs(W-S.startY);if(j<=2&&V<=2)return;S.hasMoved=!0,S.isAuto&&(Qe(w,"justify-content","normal"),Qe(w,"row-gap",`${S.visualGap}px`),Qe(w,"column-gap",`${S.visualGap}px`),Qt(!1))}let U=S.axis,O=S.originalRow,D=S.originalColumn;if(U==="column"){let j=I-S.startX;D=S.originalColumn+j,fe||(O=S.originalRow+j)}else{let j=W-S.startY;O=S.originalRow+j,fe||(D=S.originalColumn+j)}O=Math.max(0,O),D=Math.max(0,D),F&&(O=ft(O),D=ft(D)),O=Math.round(O),D=Math.round(D),Qe(w,"row-gap",`${O}px`),Qe(w,"column-gap",`${D}px`),Ue({axis:U,row:O,column:D});return}if(xn.current.isDragging){let S=xn.current,w=S.element;if(!w)return;let U=W-S.startY,O=S.corner,D=S.original,j=f({},D);if(fe){let V=D[O]+U;V=Math.max(0,Math.min(S.maxRadius,V)),F&&(V=ft(V)),V=Math.round(V),j[O]=V}else{let V=D[O]+U;V=Math.max(0,Math.min(S.maxRadius,V)),F&&(V=ft(V)),V=Math.round(V),j={"top-left":V,"top-right":V,"bottom-right":V,"bottom-left":V}}Qe(w,"border-top-left-radius",`${j["top-left"]}px`),Qe(w,"border-top-right-radius",`${j["top-right"]}px`),Qe(w,"border-bottom-right-radius",`${j["bottom-right"]}px`),Qe(w,"border-bottom-left-radius",`${j["bottom-left"]}px`),vn({corner:O,radius:j});return}if(Vn.current.isDragging){let S=Vn.current,w=S.element;if(!w)return;let U=S.property,O=S.originalFontSize,D=S.originalLineHeight,j=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(U==="font-size"){let Se=I-S.startX;O=S.originalFontSize+Se,O=Math.max(1,O)}else{let Se=W-S.startY;D=S.originalLineHeight+Se,D=Math.max(O,D)}if(F)if(U==="font-size"){let Se=j[0],ze=Math.abs(O-Se);for(let Ze of j){let ot=Math.abs(O-Ze);ot<ze&&(Se=Ze,ze=ot)}O=Se}else{let Se=O>0?D/O:1.2,ze=Math.round(Se*2)/2;D=O*Math.max(1,ze)}O=Math.round(O),D=Math.round(D*10)/10,Qe(w,"font-size",`${O}px`);let V=O>0?Math.round(D/O*1e3)/1e3:1.2;Qe(w,"line-height",`${V}`),_t({property:U,fontSize:O,lineHeight:D});return}if(re.current.isDragging){let S=re.current,w=S.element;if(!w)return;let U=S.side,O=S.original,D=O.top,j=O.right,V=O.bottom,Se=O.left;if(U==="top"){let ze=S.startY-W;D=O.top+ze,fe||(V=O.bottom+ze)}else if(U==="bottom"){let ze=W-S.startY;V=O.bottom+ze,fe||(D=O.top+ze)}else if(U==="left"){let ze=S.startX-I;Se=O.left+ze,fe||(j=O.right+ze)}else if(U==="right"){let ze=I-S.startX;j=O.right+ze,fe||(Se=O.left+ze)}D=Math.max(0,D),j=Math.max(0,j),V=Math.max(0,V),Se=Math.max(0,Se),F&&(D=ft(D),j=ft(j),V=ft(V),Se=ft(Se)),D=Math.round(D),j=Math.round(j),V=Math.round(V),Se=Math.round(Se),Qe(w,"padding",`${D}px ${j}px ${V}px ${Se}px`),ke({side:U,padding:{top:D,right:j,bottom:V,left:Se}});return}let ne=Fo(I,W);for(;ne&&ne.tagName==="A";)ne=ne.parentElement;{let w=[];ne&&w.push(ne),sn&&sn!==ne&&w.push(sn);let U=null,O=16,D=null;for(let j of w){let V=j.getBoundingClientRect(),Se=zo(j),ze=[["top-left",V.left,V.top+Se["top-left"]],["top-right",V.right,V.top+Se["top-right"]],["bottom-right",V.right,V.bottom-Se["bottom-right"]],["bottom-left",V.left,V.bottom-Se["bottom-left"]]];for(let[Ze,ot,Nt]of ze){let rt=Math.hypot(I-ot,W-Nt);rt<O&&(O=rt,U=Ze,D=j)}}if(U&&D){Mo(D),Ko(U),we&&We(null),Ge&&dt(null),Rt&&oo(null),dn&&le(null),Qt(!1),Ht&&Ft(null),On&&Dt(null);return}}sn&&Mo(null),Cn&&Ko(null);{let S=[];ne&&ni(ne)&&S.push(ne);let w=(Z=ne==null?void 0:ne.parentElement)!=null?Z:null;for(;w&&w!==document.body&&S.length<3;)ni(w)&&S.push(w),w=w.parentElement;for(let U of S){let D=$o(U).find(j=>I>=j.x&&I<=j.x+j.w&&W>=j.y&&W<=j.y+j.h);if(D){oo(U),le(D.axis),Qt(qi(U,D.axis)),we&&We(null),Ge&&dt(null),Ht&&Ft(null),On&&Dt(null);return}}}Rt&&oo(null),dn&&le(null),Qt(!1);{let w=[];ne&&w.push(ne),Ht&&Ht!==ne&&w.push(Ht);let U=null,O=1/0,D=null;for(let j of w){if(!Zi(j))continue;let V=ur(j);if(!V)continue;let Se=I>=V.left&&I<=V.right&&W>=V.top&&W<=V.bottom,ze=[["font-size",V.right,V.top+V.height/2],["line-height",V.left+V.width/2,V.bottom]];for(let[Ze,ot,Nt]of ze){let rt=Math.hypot(I-ot,W-Nt);(Se||rt<12)&&rt<O&&(O=rt,U=Ze,D=j)}}U&&D?(Ft(D),Dt(U)):(Ht&&Ft(null),On&&Dt(null))}if(ne!==we&&We(ne),ne){let S=dr(ne),w=ne.getBoundingClientRect(),U=Sn(I,W,w,S);dt(U)}else dt(null);return}if(he){let{handle:I,originalPoints:W,hasMoved:fe}=he,F=e.annotations.find(O=>O.id===he.annotationId);if(!F)return;let ne="metaKey"in m,S=ne&&(m.metaKey||m.ctrlKey),w=ne&&m.shiftKey,U;if(F.type==="line"){let O=W[0],D=W[W.length-1];I==="start"?U=[y,D]:U=[O,y]}else if(F.type==="freehand"){let O=Math.min(...W.map(qe=>qe.x)),D=Math.max(...W.map(qe=>qe.x)),j=Math.min(...W.map(qe=>qe.y)),V=Math.max(...W.map(qe=>qe.y)),Se=(O+D)/2,ze=(j+V)/2,Ze=D-O||1,ot=V-j||1,Nt=Ze/ot,rt=O,be=D,_e=j,lt=V;switch(I){case"topLeft":rt=y.x,_e=y.y;break;case"topRight":be=y.x,_e=y.y;break;case"bottomLeft":rt=y.x,lt=y.y;break;case"bottomRight":be=y.x,lt=y.y;break}if(S)switch(I){case"topLeft":be=D+(O-rt),lt=V+(j-_e);break;case"topRight":rt=O-(be-D),lt=V+(j-_e);break;case"bottomLeft":be=D+(O-rt),_e=j-(lt-V);break;case"bottomRight":rt=O-(be-D),_e=j-(lt-V);break}if(w){let qe=be-rt,Pt=lt-_e;if(Math.abs(qe/Pt)>Nt){let an=Math.abs(Pt)*Nt*Math.sign(qe);I==="topLeft"||I==="bottomLeft"?rt=be-an:be=rt+an}else{let an=Math.abs(qe)/Nt*Math.sign(Pt);I==="topLeft"||I==="topRight"?_e=lt-an:lt=_e+an}}let it=be-rt||1,wt=lt-_e||1;U=W.map(qe=>({x:rt+(qe.x-O)/Ze*it,y:_e+(qe.y-j)/ot*wt}))}else if(F.type==="circle"){let O=W[0],D=W[W.length-1],j=Math.min(O.x,D.x),V=Math.max(O.x,D.x),Se=Math.min(O.y,D.y),ze=Math.max(O.y,D.y),Ze=(j+V)/2,ot=(Se+ze)/2,Nt=V-j,rt=ze-Se,be=j,_e=V,lt=Se,it=ze;switch(I){case"top":if(lt=y.y,S&&(it=ot+(ot-y.y)),w){let qe=(it-lt)*(Nt/rt)/2;be=Ze-qe,_e=Ze+qe}break;case"bottom":if(it=y.y,S&&(lt=ot-(y.y-ot)),w){let qe=(it-lt)*(Nt/rt)/2;be=Ze-qe,_e=Ze+qe}break;case"left":if(be=y.x,S&&(_e=Ze+(Ze-y.x)),w){let qe=(_e-be)*(rt/Nt)/2;lt=ot-qe,it=ot+qe}break;case"right":if(_e=y.x,S&&(be=Ze-(y.x-Ze)),w){let qe=(_e-be)*(rt/Nt)/2;lt=ot-qe,it=ot+qe}break}U=[{x:be,y:lt},{x:_e,y:it}]}else{let O=W[0],D=W[W.length-1],j=Math.min(O.x,D.x),V=Math.max(O.x,D.x),Se=Math.min(O.y,D.y),ze=Math.max(O.y,D.y),Ze=(j+V)/2,ot=(Se+ze)/2,Nt=V-j||1,rt=ze-Se||1,be=Nt/rt,_e=j,lt=V,it=Se,wt=ze;switch(I){case"topLeft":_e=y.x,it=y.y;break;case"topRight":lt=y.x,it=y.y;break;case"bottomLeft":_e=y.x,wt=y.y;break;case"bottomRight":lt=y.x,wt=y.y;break}if(S)switch(I){case"topLeft":lt=V+(j-_e),wt=ze+(Se-it);break;case"topRight":_e=j-(lt-V),wt=ze+(Se-it);break;case"bottomLeft":lt=V+(j-_e),it=Se-(wt-ze);break;case"bottomRight":_e=j-(lt-V),it=Se-(wt-ze);break}if(w){let qe=lt-_e,Pt=wt-it;if(Math.abs(qe/Pt)>be){let an=Math.abs(Pt)*be*Math.sign(qe);I==="topLeft"||I==="bottomLeft"?_e=lt-an:lt=_e+an}else{let an=Math.abs(qe)/be*Math.sign(Pt);I==="topLeft"||I==="topRight"?it=wt-an:wt=it+an}}U=[{x:_e,y:it},{x:lt,y:wt}]}t({type:"RESIZE_ANNOTATION",payload:{id:he.annotationId,points:U,saveUndo:!fe}}),fe||se(h(f({},he),{hasMoved:!0}));return}if(kt&&((M=kt.annotation.status)!=null?M:"pending")==="pending"){let I=y.x-kt.startPoint.x,W=y.y-kt.startPoint.y;if((Math.abs(I)>2||Math.abs(W)>2)&&!kt.hasMoved)En(h(f({},kt),{hasMoved:!0,startPoint:y})),t({type:"MOVE_ANNOTATION",payload:{id:kt.annotation.id,delta:{x:I,y:W},saveUndo:!0}});else if(kt.hasMoved){let F=y.x-kt.startPoint.x,ne=y.y-kt.startPoint.y;En(h(f({},kt),{startPoint:y})),t({type:"MOVE_ANNOTATION",payload:{id:kt.annotation.id,delta:{x:F,y:ne}}})}return}!H||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:y})},[H,e.isAnnotating,e.activeTool,kt,he,tt,we,Ge,sn,Cn,Rt,dn,Ht,On,St,t,ft,Sn]),Ut=nn(m=>{var M,I,W,fe,F,ne;if(Vn.current.isDragging){let S=Vn.current,w=S.element;if(w&&S.selector&&S.elementInfo&&at){w instanceof HTMLElement&&(w.style.removeProperty("font-size"),w.style.removeProperty("line-height"),w.style.removeProperty("transition"));let U=[];if(S.originalFontSize!==at.fontSize&&(Qe(w,"font-size",`${at.fontSize}px`),U.push({property:"font-size",original:`${S.originalFontSize}px`,modified:`${at.fontSize}px`})),S.originalLineHeight!==at.lineHeight){let O=S.originalFontSize>0?Math.round(S.originalLineHeight/S.originalFontSize*1e3)/1e3:1.2,D=at.fontSize>0?Math.round(at.lineHeight/at.fontSize*1e3)/1e3:1.2;Qe(w,"line-height",`${D}`),U.push({property:"line-height",original:`${O}`,modified:`${D}`})}U.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:S.selector,durableSelector:(M=S.durableSelector)!=null?M:void 0,element:S.elementInfo,changes:U}})}Vn.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},_t(null);return}if(hn.current.isDragging){let S=hn.current,w=S.element,U="button"in m&&m.button===2;if(!S.hasMoved&&!U&&w&&S.selector&&S.elementInfo){w instanceof HTMLElement&&w.style.removeProperty("transition");let O=["space-between","space-around","stretch","normal"],D=S.originalJustifyContent||"normal",j=O.indexOf(D),V=O[(j+1)%O.length],Se=[];V==="normal"?(Qe(w,"justify-content","normal"),Se.push({property:"justify-content",original:S.originalJustifyContent,modified:"normal"})):V==="stretch"?(Qe(w,"justify-content",V),Qe(w,"row-gap","8px"),Qe(w,"column-gap","8px"),Se.push({property:"justify-content",original:S.originalJustifyContent||"normal",modified:V}),S.originalRow!==8&&Se.push({property:"row-gap",original:`${S.originalRow}px`,modified:"8px"}),S.originalColumn!==8&&Se.push({property:"column-gap",original:`${S.originalColumn}px`,modified:"8px"})):(w instanceof HTMLElement&&(w.style.removeProperty("row-gap"),w.style.removeProperty("column-gap")),Qe(w,"justify-content",V),Se.push({property:"justify-content",original:S.originalJustifyContent||"normal",modified:V}),S.originalRow>0&&Se.push({property:"row-gap",original:`${S.originalRow}px`,modified:"0px"}),S.originalColumn>0&&Se.push({property:"column-gap",original:`${S.originalColumn}px`,modified:"0px"})),Se.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:S.selector,durableSelector:(I=S.durableSelector)!=null?I:void 0,element:S.elementInfo,changes:Se}})}else if(S.hasMoved&&w&&S.selector&&S.elementInfo&&Ie){w instanceof HTMLElement&&(w.style.removeProperty("row-gap"),w.style.removeProperty("column-gap"),w.style.removeProperty("transition"));let O=[];S.isAuto?(w instanceof HTMLElement&&w.style.removeProperty("justify-content"),Qe(w,"justify-content","normal"),Qe(w,"row-gap",`${Ie.row}px`),Qe(w,"column-gap",`${Ie.column}px`),O.push({property:"justify-content",original:S.originalJustifyContent,modified:"normal"}),O.push({property:"row-gap",original:"0px",modified:`${Ie.row}px`}),O.push({property:"column-gap",original:"0px",modified:`${Ie.column}px`})):(S.originalRow!==Ie.row&&(Qe(w,"row-gap",`${Ie.row}px`),O.push({property:"row-gap",original:`${S.originalRow}px`,modified:`${Ie.row}px`})),S.originalColumn!==Ie.column&&(Qe(w,"column-gap",`${Ie.column}px`),O.push({property:"column-gap",original:`${S.originalColumn}px`,modified:`${Ie.column}px`}))),O.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:S.selector,durableSelector:(W=S.durableSelector)!=null?W:void 0,element:S.elementInfo,changes:O}})}hn.current={isDragging:!1,hasMoved:!1,axis:null,startX:0,startY:0,originalRow:0,originalColumn:0,element:null,elementInfo:null,selector:null,durableSelector:null,isAuto:!1,originalJustifyContent:"",visualGap:0},Ue(null);return}if(xn.current.isDragging){let S=xn.current,w=S.element;if(w&&S.selector&&S.elementInfo&&Jt){w instanceof HTMLElement&&(w.style.removeProperty("border-top-left-radius"),w.style.removeProperty("border-top-right-radius"),w.style.removeProperty("border-bottom-right-radius"),w.style.removeProperty("border-bottom-left-radius"),w.style.removeProperty("transition"));let U=["top-left","top-right","bottom-right","bottom-left"],O={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},D=[];for(let j of U)S.original[j]!==Jt.radius[j]&&(Qe(w,O[j],`${Jt.radius[j]}px`),D.push({property:O[j],original:`${S.original[j]}px`,modified:`${Jt.radius[j]}px`}));D.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:S.selector,durableSelector:(fe=S.durableSelector)!=null?fe:void 0,element:S.elementInfo,changes:D}})}xn.current={isDragging:!1,corner:null,startY:0,original:{"top-left":0,"top-right":0,"bottom-right":0,"bottom-left":0},maxRadius:0,element:null,elementInfo:null,selector:null,durableSelector:null},vn(null);return}if(re.current.isDragging){let S=re.current,w=S.element,U=S.selector,O=S.elementInfo;if(w&&U&&O&&Oe){let D=S.original,j=Oe.padding;w instanceof HTMLElement&&(w.style.removeProperty("padding"),w.style.removeProperty("transition"));let V=[],Se=[{prop:"padding-top",origVal:D.top,newVal:j.top},{prop:"padding-right",origVal:D.right,newVal:j.right},{prop:"padding-bottom",origVal:D.bottom,newVal:j.bottom},{prop:"padding-left",origVal:D.left,newVal:j.left}];for(let{prop:ze,origVal:Ze,newVal:ot}of Se)Ze!==ot&&(Qe(w,ze,`${ot}px`),V.push({property:ze,original:`${Ze}px`,modified:`${ot}px`}));V.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:U,durableSelector:(F=S.durableSelector)!=null?F:void 0,element:O,changes:V}})}re.current={isDragging:!1,side:null,startX:0,startY:0,original:{top:0,right:0,bottom:0,left:0},element:null,elementInfo:null,selector:null,durableSelector:null},ke(null);return}if(he){se(null);return}if(kt){if(!kt.hasMoved&&kt.annotation.type==="text"&&((ne=kt.annotation.status)!=null?ne:"pending")==="pending"){let S=St(m);Ae({id:kt.annotation.id,point:kt.annotation.points[0],text:kt.annotation.text||"",fontSize:kt.annotation.fontSize||12,isNew:!1,clickPoint:S,groupId:kt.annotation.groupId})}En(null);return}if(!H)return;let y=5;if(e.currentPath.length>=2){let S=e.currentPath[0],w=e.currentPath[e.currentPath.length-1],U=Math.abs(w.x-S.x),O=Math.abs(w.y-S.y);if((e.activeTool==="line"?Math.sqrt(U*U+O*O)<y:U<y&&O<y)&&["rectangle","circle","line"].includes(e.activeTool)){ee(!1),t({type:"CANCEL_PATH"});return}}let Z=Yi(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let S=e.currentPath[0],w=e.currentPath[e.currentPath.length-1],U=Math.min(S.x,w.x),O=Math.max(S.y,w.y),D=e.strokeWidth/2,j=Math.random().toString(36).substring(2,9);ce({point:{x:U-D+4,y:O+D+4},groupId:j}),ee(!1),t({type:"FINISH_PATH",payload:{groupId:j,elements:Z}});return}ee(!1),t({type:"FINISH_PATH",payload:{elements:Z}})},[H,kt,he,Oe,Jt,Ie,at,St,t,e.activeTool,e.currentPath,e.strokeWidth]),Tn=nn(m=>{let y=m.target.value;nt.current=m.target.selectionStart,Ae(Z=>Z&&h(f({},Z),{text:y}))},[]),Io=nn(m=>{m.key==="Escape"?Ae(null):m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),Gt())},[Gt]),Ro=nn(m=>{if(!k)return;let y=m.clipboardData.items,Z=[];for(let M=0;M<y.length;M++){let I=y[M];if(I.type.startsWith("image/")){let W=I.getAsFile();W&&Z.push(W)}}Z.length>0&&(m.preventDefault(),Ae(M=>M?h(f({},M),{images:[...M.images||[],...Z]}):null))},[k]),jn=nn(m=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){m.preventDefault();let Z=we||Rt||sn||Ht;if(Z&&!co(Z)){let M=Rn(Z),I=Nn(Z);t({type:"SELECT_ELEMENT",payload:{el:Z,info:h(f({},M),{selector:I})}})}return}m.preventDefault();let y=_.current;y&&(K.current=!0,y.style.pointerEvents="none",setTimeout(()=>{K.current&&(K.current=!1,y.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,we,Rt,sn,Ht,t,co,_]);yn(()=>{let m=Be.filter(fe=>fe.linkedSelector);if(m.length===0)return;let y=null,Z=document.createElement("canvas").getContext("2d"),M=()=>{var F,ne,S;let fe=[];for(let w of m){let U=document.querySelector(w.linkedSelector);if(!U&&((ne=(F=w.elements)==null?void 0:F[0])!=null&&ne.selector)&&w.linkedSelector.startsWith("[data-pm=")){try{U=document.querySelector(w.elements[0].selector)}catch(rt){}if(U){let rt=(S=w.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:S[1];rt&&U.setAttribute("data-pm",rt)}}if(!U)continue;let O=U.getBoundingClientRect(),D=e.styleModifications.some(rt=>{try{return U.matches(rt.selector)}catch(be){return!1}}),j=m.filter(rt=>rt.id!==w.id&&rt.timestamp<w.timestamp&&rt.linkedSelector===w.linkedSelector).length,V=(D?1:0)+j,Se;if(w.text&&Z){let rt=w.fontSize||12;Z.font=`${rt}px ${Vt}`,Se=Math.max(...w.text.split(`
|
|
5
|
+
`).map(be=>Z.measureText(be).width))}let ze=O.top>=Yn*(1+V)?"top-left":"bottom-left",Ze=Kl(O,ze,V,E==null?void 0:E.current,Se),ot=w.points[0],Nt=ze!==w.linkedAnchor;ot&&(Nt||Math.abs(Ze.x-ot.x)>1||Math.abs(Ze.y-ot.y)>1)&&fe.push({id:w.id,point:Ze,linkedAnchor:Nt?ze:void 0})}fe.length>0&&t({type:"UPDATE_LINKED_POSITIONS",payload:{updates:fe}})},I=()=>{y&&cancelAnimationFrame(y),y=requestAnimationFrame(M)};M(),window.addEventListener("scroll",I,!0),window.addEventListener("resize",I,!0),window.addEventListener("load",I),document.fonts.ready.then(I);let W=new MutationObserver(I);return W.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",I,!0),window.removeEventListener("resize",I,!0),window.removeEventListener("load",I),W.disconnect(),y&&cancelAnimationFrame(y)}},[Be,t]);let qs=()=>{var m,y,Z;if(!e.isAnnotating)return"default";if(he){let{handle:M}=he;return M==="start"||M==="end"?"move":M==="top"||M==="bottom"?"ns-resize":M==="left"||M==="right"?"ew-resize":M==="topLeft"||M==="bottomRight"?"nwse-resize":"nesw-resize"}if(e.activeTool==="text")return"text";if(e.activeTool==="hand"){let M=(m=Ie==null?void 0:Ie.axis)!=null?m:dn;if(M==="row")return"ns-resize";if(M==="column")return"ew-resize";if(Jt||Cn)return"ns-resize";let I=(y=at==null?void 0:at.property)!=null?y:On;if(I==="font-size")return"ew-resize";if(I==="line-height")return"ns-resize";let W=(Z=Oe==null?void 0:Oe.side)!=null?Z:Ge;return W==="top"||W==="bottom"?"ns-resize":W==="left"||W==="right"?"ew-resize":"default"}return"crosshair"},Ii={position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9998,pointerEvents:e.isAnnotating?"auto":"none",visibility:e.isAnnotating?"visible":"hidden",cursor:qs()},Tr=nn(()=>{let m=_.current;if(!m||!k)return{width:100,height:12*1.4,isWrapped:!1};let y=m.getContext("2d");if(!y)return{width:100,height:k.fontSize*1.4,isWrapped:!1};y.font=`${k.fontSize}px ${Vt}`;let M=y.measureText("Type here...").width,I=k.text.split(`
|
|
6
|
+
`),W=I.length>0?Math.max(M,...I.map(w=>y.measureText(w||" ").width)):M,fe=k.point.x-ve.x,F=ir(fe);if(W>F){let w=Xa(y,I,F),U=Math.min(F,Math.max(M,...w.map(D=>y.measureText(D).width))),O=Math.max(1,w.length)*k.fontSize*1.4;return{width:U,height:O,isWrapped:!0}}let S=Math.max(1,I.length)*k.fontSize*1.4;return{width:W,height:S,isWrapped:!1}},[k,_,ve.x])(),$c=k?Math.max(1,k.text.split(`
|
|
7
|
+
`).length)*k.fontSize*1.4+8:0,Zs=Tr.height+8,zc=Tr.isWrapped?Zs-$c:0,Wc=k?{position:"fixed",left:k.point.x-4-ve.x,top:k.point.y-4-ve.y-zc,zIndex:9999,width:Tr.width+8,height:Zs,padding:4,fontSize:k.fontSize,fontFamily:Vt,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:Tr.isWrapped?"pre-wrap":"pre",wordBreak:Tr.isWrapped?"break-word":void 0}:{};return br(xr,{children:[gt("canvas",{ref:Y,id:"devtools-canvas",style:Ii,onMouseDown:Ke,onMouseMove:At,onMouseUp:m=>Ut(m),onMouseLeave:m=>{Ut(m),gn(null),de(null)},onTouchStart:Ke,onTouchMove:At,onTouchEnd:m=>Ut(m),onContextMenu:jn}),k&&br(xr,{children:[gt("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),gt("textarea",{id:"devtools-text-input",ref:Ee,value:k.text,onChange:Tn,onKeyDown:Io,onPaste:Ro,onBlur:Gt,placeholder:"Type here...",style:Wc}),k.images&&k.images.length>0&&br("div",{"data-devtools":!0,style:{position:"fixed",left:k.point.x-4-ve.x,top:k.point.y-4-ve.y-20,zIndex:1e4,fontSize:11,fontFamily:"system-ui, sans-serif",color:"#fff",backgroundColor:"rgba(0,0,0,0.7)",padding:"2px 6px",borderRadius:3,whiteSpace:"nowrap"},children:[k.images.length," image",k.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&>(Ml,{styleModifications:e.styleModifications,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(Be.map(m=>m.groupId||m.id)).size,dispatch:t,inFlightSelectors:s,toolbarRef:E,onHoverSelector:ye}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&>(Rl,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&>(hl,{annotations:Be,supersededAnnotations:Xe,inFlightIds:r,activeIds:o,queuePositions:i,scrollX:ve.x,scrollY:ve.y,annotationGroupMap:Ye,onViewThread:c,onSelectAnnotation:z,onHoverAnnotation:me,canvasRef:_}),e.isAnnotating&&d&>(yl,{annotations:Be,supersededAnnotations:Xe,scrollX:ve.x,scrollY:ve.y,onReply:d,annotationGroupMap:Ye,canvasRef:_,onHoverAnnotation:me}),e.isAnnotating&&a&&a.size>0&>(ns,{inFlightSelectorColors:a}),e.isAnnotating&&mt&>(ns,{inFlightSelectorColors:mt,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(Ie?hn.current.element:Rt)&>(ls,{element:Ie?hn.current.element:Rt,gap:Ie?{row:Ie.row,column:Ie.column}:Pr(Rt),accentColor:e.activeColor,hoveredAxis:dn,draggingAxis:(ea=Ie==null?void 0:Ie.axis)!=null?ea:null,cursorViewport:mn,isAutoGap:on,refreshKey:An}),e.activeTool==="hand"&&e.isAnnotating&&rn&>(Ul,{element:rn.target,modifier:rn.modifier,accentColor:e.activeColor,refreshKey:An}),e.activeTool==="hand"&&e.isAnnotating&&!rn&&(Jt?xn.current.element:sn)&>(wl,{element:Jt?xn.current.element:sn,radius:(ta=Jt==null?void 0:Jt.radius)!=null?ta:zo(sn),accentColor:e.activeColor,hoveredCorner:Cn,draggingCorner:(na=Jt==null?void 0:Jt.corner)!=null?na:null,cursorViewport:mn}),e.activeTool==="hand"&&e.isAnnotating&&!rn&&(at?Vn.current.element:Ht)&>(Vl,{element:at?Vn.current.element:Ht,fontSize:(oa=at==null?void 0:at.fontSize)!=null?oa:Or(Ht).fontSize,lineHeight:(ra=at==null?void 0:at.lineHeight)!=null?ra:Or(Ht).lineHeight,accentColor:e.activeColor,hoveredProperty:On,draggingProperty:(ia=at==null?void 0:at.property)!=null?ia:null,cursorViewport:mn}),e.activeTool==="hand"&&e.isAnnotating&&!rn&&(Oe?re.current.element:we)&>(gs,{element:Oe?re.current.element:we,padding:(sa=Oe==null?void 0:Oe.padding)!=null?sa:dr(we),accentColor:e.activeColor,hoveredSide:Ge,draggingSide:(aa=Oe==null?void 0:Oe.side)!=null?aa:null,cursorViewport:mn,refreshKey:at?at.fontSize+at.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&>(xr,{children:tt&&!e.inspectedElement&&(()=>{let m=(k==null?void 0:k.linkedSelector)||(Q==null?void 0:Q.linkedSelector);if(m)try{if(tt.matches(m))return null}catch(Z){}let y=!!Q||!!(k!=null&&k.linkedSelector)||Be.some(Z=>{if(!Z.linkedSelector)return!1;try{return tt.matches(Z.linkedSelector)}catch(M){return!1}});return gt(ro,{element:tt,isSelected:!1,elementInfo:$,color:e.activeColor,hideTooltip:y})})()}),((k==null?void 0:k.linkedSelector)||(Q==null?void 0:Q.linkedSelector))&&(()=>{let m=(k==null?void 0:k.linkedSelector)||(Q==null?void 0:Q.linkedSelector);if(!m)return null;let y=null;try{y=document.querySelector(m)}catch(Z){}return y?gt(ro,{element:y,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),L&&(()=>{let m=e.annotations.find(M=>M.id===L);if(!(m!=null&&m.linkedSelector))return null;let y=null;try{y=document.querySelector(m.linkedSelector)}catch(M){}if(!y)return null;let Z=!!(r&&r.has(m.id));return gt(ro,{element:y,isSelected:!Z,color:m.color,hideTooltip:!0})})(),Te&&(()=>{let m=e.annotations.find(I=>I.id===Te);if(!(m!=null&&m.linkedSelector))return null;let y=null;try{y=document.querySelector(m.linkedSelector)}catch(I){}if(!y)return null;let Z=m.groupId?e.annotations.filter(I=>I.groupId===m.groupId):[m],M=!!(r&&Z.some(I=>r.has(I.id)));return gt(ro,{element:y,isSelected:!M,color:m.color,hideTooltip:!0})})(),N&&(()=>{let m=null;try{m=document.querySelector(N)}catch(Z){}if(!m)return null;let y=!!(s&&s.has(N));return gt(ro,{element:m,isSelected:!y,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&Ve.size>0&&[...Ve.entries()].map(([m,y])=>gt(ro,{element:y.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:y.rootElement.tagName.toLowerCase(),reactComponent:m},color:"#8b5cf6"},m)),e.activeTool==="model"&&e.isAnnotating&&He&>(ro,{element:He.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:He.rootElement.tagName.toLowerCase(),reactComponent:He.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&x.length>0&&x.map((m,y)=>gt("div",{style:{position:"absolute",left:m.x,top:m.y,width:m.width,height:m.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:m.direction==="vertical"?br(xr,{children:[gt("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),gt("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),gt("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),gt("div",{style:{position:"absolute",left:"calc(50% + 6px)",top:m.height<16?-6:"50%",transform:m.height<16?"none":"translateY(-50%)",fontSize:11,fontWeight:600,color:"#fff",backgroundColor:"#FF0000",padding:"2px 4px",whiteSpace:"nowrap",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1},children:Math.round(m.height)})]}):br(xr,{children:[gt("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),gt("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),gt("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),gt("div",{style:{position:"absolute",left:m.width<30?0:"50%",top:(m.width<30,void 0),bottom:"calc(50% + 4px)",transform:m.width<30?"none":"translateX(-50%)",fontSize:11,fontWeight:600,color:"#fff",backgroundColor:"#FF0000",padding:"2px 4px",whiteSpace:"nowrap",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1},children:Math.round(m.width)})]})},y)),e.activeTool==="model"&&e.isAnnotating&&Me&>(ro,{element:Me.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:Me.rootElement.tagName.toLowerCase(),reactComponent:Me.name},color:v!=null&&v.has(Me.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&br(xr,{children:[xt&&xt!=="padding"&&xt!=="gap"&&(()=>{var F;let m=new Set(Be.map(ne=>ne.groupId||ne.id)).size,y=e.inspectedElement.info.selector,Z=e.styleModifications.findIndex(ne=>ne.selector===y),M=Z>=0?m+Z+1:m+e.styleModifications.length+1,I=e.styleModifications.find(ne=>ne.selector===y),W=(F=I==null?void 0:I.changes.length)!=null?F:0,fe=!!(I!=null&&I.captured);return gt(ro,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:fe?"#999999":e.activeColor,annotationNumber:M,changeCount:W})})(),xt==="padding"&>(gs,{element:e.inspectedElement.el,padding:dr(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),xt==="gap"&>(ls,{element:e.inspectedElement.el,gap:Pr(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),gt(Yl,{element:e.inspectedElement.el,elementInfo:e.inspectedElement.info,selector:e.inspectedElement.info.selector,styleModifications:e.styleModifications,dispatch:t,onClose:()=>t({type:"SELECT_ELEMENT",payload:null}),onHover:vt,accentColor:e.activeColor,toolbarRef:E})]})]})}import{useCallback as zn,useEffect as cn,useMemo as Fr,useRef as Bt,useState as Uo}from"react";import{Circle as Ef,Component as kf,Hand as Tf,MessageCircle as Mf,Pen as If,Slash as Rf,Square as Lf,Trash2 as Af,Type as Pf}from"lucide-react";import{useEffect as Zl,useRef as Ql}from"react";function ec(e,t,n,r,o){let i=Ql(0),s=Ql(t.annotations);Zl(()=>{if(!n.current||!e)return;s.current=t.annotations;let a=t.annotations.length;a>0&&(a>=i.current||!r)&&(localStorage.setItem(o.annotations,JSON.stringify(t.annotations)),i.current=a)},[t.annotations,e,r,n,o]),Zl(()=>{n.current&&(localStorage.setItem(o.expanded,String(e)),e&&(localStorage.setItem(o.styleMods,JSON.stringify(t.styleModifications)),localStorage.setItem(o.spacingChanges,JSON.stringify(t.spacingTokenChanges)),localStorage.setItem(o.tool,t.activeTool),localStorage.setItem(o.color,t.activeColor),localStorage.setItem(o.stroke,String(t.strokeWidth)),t.inspectedElement?localStorage.setItem(o.inspected,JSON.stringify({selector:t.inspectedElement.info.selector,info:t.inspectedElement.info})):localStorage.removeItem(o.inspected)))},[e,t.styleModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,n,o])}import{Component as Jp,createElement as Up,useCallback as Si,useEffect as Eo,useRef as Yo,useState as $n}from"react";import{Link2 as Vp}from"lucide-react";var Rp={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},Lp=/^#[0-9a-fA-F]{3,8}$/,Ap=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,Pp=new Set(["transparent","currentcolor","inherit","white","black","red","green","blue","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]);function nc(e){let t=e.trim().toLowerCase();return Lp.test(t)||Ap.test(t)||Pp.has(t)}var Op=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Rs(e){return Op.test(e.trim())}var tc=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function Bp(e){let t=e.trim().toLowerCase();return!!(tc.has(t)||t.includes(",")&&t.split(",").some(n=>tc.has(n.trim().replace(/['"]/g,""))))}function Dp(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(nc(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var _p=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,Np=/^--(font-family|font|ff|family)/i,Hp=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,Fp=/^--(space|gap|padding|margin|inset)/i,$p=/^--(radius|rounded|br|border-radius)/i,zp=/^--(shadow|elevation|drop-shadow)/i;function oc(e,t){let n=e.toLowerCase();return zp.test(n)?"shadows":$p.test(n)?"radii":Np.test(n)?"fonts":Hp.test(n)&&Rs(t)?"typeScale":_p.test(n)||nc(t)?"colors":Bp(t)?"fonts":Dp(t)?"shadows":Fp.test(n)&&Rs(t)||Rs(t)?"spacing":"other"}function rc(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){rc(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Wp(o.style,t,n,r)}}}var ic=/var\((--[^,)]+)/;function Wp(e,t,n,r){for(let o=0;o<e.length;o++){let i=e[o];if(!(i!=null&&i.startsWith("--"))||n.has(i))continue;n.add(i);let s=t.getPropertyValue(i).trim();if(!s)continue;let a=oc(i,s);r[a].push([i,s]);let d=e.getPropertyValue(i).trim().match(ic);d&&(r.references[i]=d[1])}}function yi(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function xi(e){let t=e.trim().toLowerCase(),n=t.match(/oklch\(\s*([\d.]+%?)/);if(n){let i=n[1];return i.endsWith("%")?parseFloat(i)/100:parseFloat(i)}let r=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(r){let[i,s,a]=[parseInt(r[1],10),parseInt(r[2],10),parseInt(r[3],10)];return(.2126*i+.7152*s+.0722*a)/255}let o=t.match(/hsla?\(\s*[\d.]+[,\s]+[\d.]+%?[,\s]+([\d.]+)%?/);if(o)return parseFloat(o[1])/100;if(t.startsWith("#")){let i=t.slice(1);(i.length===3||i.length===4)&&(i=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]);let s=parseInt(i.slice(0,2),16),a=parseInt(i.slice(2,4),16),l=parseInt(i.slice(4,6),16);if(!isNaN(s))return(.2126*s+.7152*a+.0722*l)/255}return null}function sc(e){return e==="colors"?(t,n)=>{let r=xi(t[1]),o=xi(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let r=yi(t[1]),o=yi(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let r=yi(t[1]),o=yi(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:(t,n)=>t[0].localeCompare(n[0])}function jp(e){let t=e.replace(/^--/,"");t=t.replace(/^(?:color|clr)-/,"");let n=t.split("-");return n.length>1&&/^\d+$/.test(n[n.length-1])&&n.pop(),n.join("-")}function ac(e){let t=new Map;for(let o of e){let i=jp(o[0]),s=t.get(i);s||(s=[],t.set(i,s)),s.push(o)}let n=sc("colors");for(let o of t.values())o.sort(n);let r=[...t.entries()];return r.sort((o,i)=>{var l,d;let s=(l=xi(o[1][0][1]))!=null?l:0,a=(d=xi(i[1][0][1]))!=null?d:0;return s-a}),r}var Gp=["colors","fonts","typeScale","spacing","radii","shadows","other"],bi=null,Yp=5e3;function lc(){if(typeof document=="undefined")return Rp;if(bi&&Date.now()-bi.timestamp<Yp)return bi.tokens;let e={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},t=new Set,n=getComputedStyle(document.documentElement);try{for(let o of document.styleSheets)try{rc(o.cssRules||o.rules,n,t,e)}catch(i){}}catch(o){}let r=document.documentElement.style;for(let o=0;o<r.length;o++){let i=r[o];if(!(i!=null&&i.startsWith("--"))||t.has(i))continue;t.add(i);let s=n.getPropertyValue(i).trim();if(!s)continue;let a=oc(i,s);e[a].push([i,s]);let d=r.getPropertyValue(i).trim().match(ic);d&&(e.references[i]=d[1])}for(let o of Gp)e[o].sort(sc(o));return bi={tokens:e,timestamp:Date.now()},e}import{Fragment as Jo,jsx as je,jsxs as Xt}from"react/jsx-runtime";var cc="popmelt-library-tab",Xp=/^#[0-9a-fA-F]{3,8}$/,Kp=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,qp=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),Zp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function uc(e){let t=e.trim();return Xp.test(t)||Kp.test(t)||qp.has(t.toLowerCase())}function Qp(e){return Zp.test(e.trim())}function ef(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function pc(e,t=""){if(e==null)return[];if(typeof e!="object")return[[t,String(e)]];if(Array.isArray(e))return[[t,e.map(String).join(", ")]];let n=[];for(let[r,o]of Object.entries(e)){let i=t?`${t}.${r}`:r;if(o!==null&&typeof o=="object"&&!Array.isArray(o)){let s=o;typeof s.value=="string"?n.push([i,s.value]):n.push(...pc(o,i))}else n.push([i,Array.isArray(o)?o.map(String).join(", "):String(o!=null?o:"")])}return n}function tf(e){return e.length===0?"generic":e.filter(([,r])=>uc(r)).length>e.length/2?"colors":e.filter(([,r])=>Qp(r)).length>e.length/2?"spacing":"generic"}var nf=h(f({width:300,backgroundColor:"#eaeaea"},wo),{boxSizing:"content-box",zIndex:10001,display:"flex",flexDirection:"column",overflow:"hidden",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:12,color:"#1f2937",padding:12,pointerEvents:"auto"}),fc={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},of=h(f({},fc),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function rf({varName:e,value:t,reference:n}){return je("div",{title:n?`${e} \u2192 ${n}
|
|
8
|
+
${t}`:`${e}: ${t}`,style:{width:28,height:28,backgroundColor:t,outline:"1px solid rgba(0,0,0,0.08)",outlineOffset:-1,position:"relative"},children:n&&je(Vp,{size:10,strokeWidth:2.5,style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",color:"white",filter:"drop-shadow(0 0 1px rgba(0,0,0,0.5))"}})})}function gc({entries:e,references:t}){let n=[],r=[];for(let i of e)uc(i[1])?n.push(i):r.push(i);let o=ac(n);return Xt(Jo,{children:[o.map(([i,s])=>Xt("div",{style:{marginBottom:4},children:[Xt("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[i,s.length>1?` (${s.length})`:""]}),je("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:s.map(([a,l])=>je(rf,{varName:a,value:l,reference:t[a]},a))})]},i)),r.length>0&&je(wi,{entries:r})]})}var vi=[0,1,2,4,8,12,16,20,24,28,32];function sf(e){if(e<=32){let t=vi[0],n=Math.abs(e-t);for(let r=1;r<vi.length;r++){let o=Math.abs(e-vi[r]);o<n&&(t=vi[r],n=o)}return t}return Math.round(e/8)*8}function af({label:e,value:t,px:n,tokenPath:r,rawToken:o,onHover:i,onModify:s,onDelete:a}){let[l,d]=$n(!1),[c,p]=$n(null),u=Yo(!1),g=Yo(0),b=Yo(0),v=Yo([]),R=c!==null?c:n,C=c!==null?`${c}px`:t,G=c!==null,L=Si(E=>{E.preventDefault(),u.current=!0,g.current=E.clientX,b.current=n;let _=ei(o);v.current=Ui(_);let ie=Y=>{let K=Y.clientX-g.current,H=Math.max(0,Math.round(b.current+K));Y.shiftKey&&(H=sf(H));for(let ee of v.current)ee.element.style.setProperty(ee.property,H+"px","important");p(H),i==null||i({name:e,px:H,token:_})},oe=()=>{window.removeEventListener("mousemove",ie),window.removeEventListener("mouseup",oe),document.body.style.cursor="",u.current=!1,p(Y=>{if(Y!==null&&Y!==n&&s){let K=ei(o),H=K.bindings&&K.bindings.length>0,ee;if(H){let ge=Xi(K.bindings,b.current,Y);ee=JSON.stringify(h(f({},K),{value:`${Y}px`,bindings:ge}))}else{let ge=al(v.current,b.current),B=ll(v.current);if(ge.length>0){let ce=Xi(ge,b.current,Y);ee=JSON.stringify({value:`${Y}px`,property:B,bindings:ce})}else ee=`${Y}px`}let k=typeof o=="string"?o:JSON.stringify(o),Ae=v.current.map(ge=>({selector:Nn(ge.element),property:ge.property})),X=dl(v.current,b.current,Y);s({tokenPath:r,originalValue:k,currentValue:ee,targets:Ae,originalPx:b.current,currentPx:Y},{id:Math.random().toString(36).substring(2,9),tokenPath:r,tokenName:e,originalPx:b.current,newPx:Y,affectedElements:X})}return Y})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",ie),window.addEventListener("mouseup",oe)},[n,e,r,o,i,s]),A=ei(o);return Xt("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,padding:"1px 0",cursor:"ew-resize",userSelect:"none"},onMouseEnter:()=>{u.current||(d(!0),i==null||i({name:e,px:R,token:A}))},onMouseLeave:()=>{u.current||(d(!1),i==null||i(null))},onMouseDown:L,children:[je("span",{style:{color:l||G?"#FF0000":"#9ca3af"},children:e}),Xt("span",{style:{display:"flex",alignItems:"center",gap:4},children:[je("span",{style:{color:l||G?"#FF0000":"#6b7280",fontWeight:600},children:C}),a&&l&&!G&&je("button",{type:"button",title:"Remove token",onMouseDown:E=>{E.stopPropagation();let _=typeof o=="string"?o:JSON.stringify(o);a(r,_)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:E=>{E.currentTarget.style.color="#FF0000"},onMouseLeave:E=>{E.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function lf({entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}){let s=[],a=[];for(let l of e){let d=ef(l[1]);d!==null?s.push([l[0],l[1],d]):a.push(l)}return Xt(Jo,{children:[s.length>0&&je("div",{style:{display:"flex",flexDirection:"column",gap:2},children:s.map(([l,d,c])=>{let p=l.split(".").pop(),u=n?cf(n,l):d,g=u&&typeof u=="object"&&"value"in u?u:d;return je(af,{label:p,value:d,px:c,tokenPath:`tokens.${t}.${l}`,rawToken:g,onHover:r,onModify:o,onDelete:i},l)})}),a.length>0&&je(wi,{entries:a})]})}function cf(e,t){let n=t.split("."),r=e;for(let o of n){if(r==null||typeof r!="object")return;r=r[o]}return r}function wi({entries:e}){return je("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>Xt("div",{style:{fontSize:11},children:[je("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),je("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function df({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:r,onModifyToken:o,onDeleteToken:i}){let s=tf(e);return s==="colors"?je(gc,{entries:e}):s==="spacing"?je(lf,{entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}):je(wi,{entries:e})}function uf(e){let t=e.toLowerCase(),n=null,r=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(i){return i.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),o=r.currentNode;for(;o=r.nextNode();){let i=o,s=Object.keys(i).find(l=>l.startsWith("__reactFiber$")||l.startsWith("__reactInternalInstance$"));if(!s)continue;let a=i[s];for(;a;){let l=a.type,d=typeof l=="function"||typeof l=="object"?(l==null?void 0:l.displayName)||(l==null?void 0:l.name):null;if(typeof d=="string"){let c=d.toLowerCase();if(c===t){let p=f({},a.memoizedProps);return delete p.ref,{type:l,props:p}}if(!n){if(c.length>=4&&t.includes(c)){let p=f({},a.memoizedProps);delete p.ref,n={type:l,props:p}}else if(t.length>=4&&c.includes(t)){let p=f({},a.memoizedProps);delete p.ref,n={type:l,props:p}}}}a=a.return}}return n}var Ls=class extends Jp{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(){this.props.onError()}render(){return this.state.hasError?null:this.props.children}},mc="popmelt-principles-collapsed";function pf(){try{let e=localStorage.getItem(mc);if(e)return new Set(JSON.parse(e))}catch(e){}return new Set}function ff(e){try{localStorage.setItem(mc,JSON.stringify([...e]))}catch(t){}}function gf({id:e,label:t,count:n,children:r,collapsed:o,onToggle:i}){return Xt("div",{style:{marginBottom:14},children:[Xt("div",{onClick:()=>i(e),style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:o?0:6,cursor:"pointer",display:"flex",alignItems:"center",gap:4,userSelect:"none"},children:[je("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:o?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,je("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!o&&r]})}var mf={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},dc=["colors","fonts","typeScale","spacing","radii","shadows","other"];function hf(){let[e,t]=$n(null),[n,r]=$n(pf);Eo(()=>{t(lc())},[]);let o=Si(s=>{r(a=>{let l=new Set(a);return l.has(s)?l.delete(s):l.add(s),ff(l),l})},[]);return e?dc.some(s=>e[s].length>0)?je(Jo,{children:dc.map(s=>{let a=e[s];return a.length===0?null:je(gf,{id:s,label:mf[s],count:a.length,collapsed:n.has(s),onToggle:o,children:s==="colors"?je(gc,{entries:a,references:e.references}):je(wi,{entries:a})},s)})}):je("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function yf({rules:e,onSynthesize:t,isSynthesizing:n}){if(!e||e.length===0)return je("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."});if(!e.some(i=>typeof i=="object"&&i!==null&&"scope"in i))return je(Jo,{children:e.map((i,s)=>Xt("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[Xt("span",{style:{color:"#9ca3af",flexShrink:0},children:[s+1,"."]}),je("span",{children:typeof i=="string"?i:i.text})]},s))});let o=new Map;for(let i of e)if(typeof i=="string")o.has("general")||o.set("general",[]),o.get("general").push({id:"",text:i});else{let s=i.scope||"general";o.has(s)||o.set(s,[]),o.get(s).push({id:i.id,text:i.text})}return Xt(Jo,{children:[t&&je("button",{type:"button",disabled:n,onClick:t,style:{width:"100%",border:"1px solid rgba(0,0,0,0.12)",background:n?"rgba(0,0,0,0.04)":"rgba(0,0,0,0.02)",cursor:n?"default":"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"5px 8px",marginBottom:10,color:n?"#9ca3af":"#6b7280"},children:n?"Synthesizing\u2026":"Synthesize"}),Array.from(o.entries()).map(([i,s])=>Xt("div",{style:{marginBottom:10},children:[je("div",{style:{fontWeight:700,fontSize:10,color:"#6b7280",letterSpacing:"0.05em",textTransform:"uppercase",marginBottom:4},children:i}),s.map((a,l)=>Xt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4,fontSize:11},children:[je("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2022"}),je("span",{children:a.text})]},a.id||l))]},i))]})}function bf({name:e,value:t,selected:n,highlighted:r,onRemove:o,onHover:i}){var Y;let[s,a]=$n(!1),[l,d]=$n(!1),c=Yo(null),p=Yo(0),[u,g]=$n(0),[b,v]=$n(0),R=pc(t),C=(Y=R.find(([K])=>K==="description"))==null?void 0:Y[1];Eo(()=>{if(!l&&!r){g(0),v(0),p.current=0;return}let K=lr(e);g(K.length)},[l,r,e]),Eo(()=>{n&&c.current&&c.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let G=n||r||l,L=n?"139,92,246":"34,197,94",A=n?"#8b5cf6":"#22c55e",E=G?`rgba(${L},0.06)`:void 0,_=G?`inset 0 0 0 1.5px rgba(${L},0.35)`:void 0,ie=r||l,oe=Si(()=>{let K=lr(e);if(K.length===0)return;let H=p.current%K.length;K[H].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),v(H),p.current=H+1,i==null||i({name:e,instanceIndex:H})},[e,i]);return Xt("div",{ref:c,onClick:oe,onMouseEnter:()=>{d(!0),i==null||i({name:e,instanceIndex:0})},onMouseLeave:()=>{d(!1),i==null||i(null)},style:{marginBottom:8,background:E,padding:6,boxShadow:_,cursor:"pointer"},children:[Xt("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[Xt("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[je("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:ie?A:"transparent",color:ie?"#fff":"#6b7280"},children:e}),ie&&u>1&&Xt("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[b+1,"/",u]})]}),o&&l&&je("button",{type:"button",title:"Remove from model",onClick:K=>{K.stopPropagation(),o(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:K=>{K.currentTarget.style.color="#FF0000"},onMouseLeave:K=>{K.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),C&&je("div",{style:{fontSize:11,color:ie?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:C}),s?je(df,{entries:R.filter(([K])=>K!=="description"),categoryKey:""}):je(xf,{name:e,onNotFound:()=>a(!0),entries:R})]})}function xf({name:e,onNotFound:t}){let[n,r]=$n(null),[o,i]=$n(!1);return Eo(()=>{let s=uf(e);s||t(),r(s),i(!0)},[e,t]),!o||!n?null:je(Ls,{onError:t,children:je("div",{"data-popmelt-panel":!0,onClick:s=>{s.preventDefault(),s.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center",contain:"layout paint",position:"relative",isolation:"isolate"},children:je("div",{style:{zoom:.5,pointerEvents:"none"},children:Up(n.type,n.props)})})})}function vf({components:e,selectedComponent:t,hoveredComponent:n,onRemove:r,onHover:o}){if(!e||Object.keys(e).length===0)return je("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),s=Gi(i),a=Object.entries(e).sort(([l],[d])=>{var c,p;return((c=s.get(l))!=null?c:1/0)-((p=s.get(d))!=null?p:1/0)});return je(Jo,{children:a.map(([l,d])=>je(bf,{name:l,value:d,selected:t===l,highlighted:n===l,onRemove:r,onHover:o},l))})}function hc({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:r,selectedComponent:o,hoveredComponent:i,onComponentHover:s,onSpacingTokenHover:a,onModifySpacingToken:l,onDeleteSpacingToken:d,onComponentAdded:c,onComponentRemoved:p,onSynthesizeRules:u,isSynthesizing:g,snapPosition:b="bottom-right"}){let[v,R]=$n(void 0),[C,G]=$n(!0),[L,A]=$n(()=>{try{let H=localStorage.getItem(cc);if(H==="patterns"||H==="principles"||H==="rules")return H}catch(H){}return"patterns"});Eo(()=>{er(e).then(H=>{R(H),G(!1)})},[e,t]),Eo(()=>{try{localStorage.setItem(cc,L)}catch(H){}},[L]),Eo(()=>{o&&(A("patterns"),er(e).then(H=>{H&&R(H)}))},[o,e]);let E=Si(H=>{R(ee=>{if(!(ee!=null&&ee.components))return ee;let X=ee.components,{[H]:k}=X,Ae=Gn(X,[bo(H)]);return h(f({},ee),{components:Ae})}),p==null||p(H)},[p]),_=v==null?void 0:v.components,ie=v==null?void 0:v.rules,oe=_&&Object.keys(_).length>0,Y=ie&&ie.length>0,K=Yo(null);return Eo(()=>{let H=K.current;if(!H)return;let ee=n,k=r;return ee&&H.addEventListener("mouseenter",ee),k&&H.addEventListener("mouseleave",k),()=>{ee&&H.removeEventListener("mouseenter",ee),k&&H.removeEventListener("mouseleave",k)}},[n,r]),Xt("div",{ref:K,style:f(f({},nf),Ga(b)),children:[Xt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[je("span",{children:"Model"}),je("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),je("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(H=>je("button",{type:"button",style:L===H?of:fc,onClick:()=>A(H),children:H.charAt(0).toUpperCase()+H.slice(1)},H))}),je("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:L==="principles"?je(hf,{}):C?je("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!v||!oe&&!Y?je("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):Xt(Jo,{children:[L==="patterns"&&je(vf,{components:_,selectedComponent:o,hoveredComponent:i,onRemove:E,onHover:s}),L==="rules"&&je(yf,{rules:ie,onSynthesize:u,isSynthesizing:g})]})})]})}import{jsx as vr}from"react/jsx-runtime";var Sf="M 233.959793 800.214905 L 468.644287 668.536987 L 472.590637 657.100647 L 468.644287 650.738403 L 457.208069 650.738403 L 417.986633 648.322144 L 283.892639 644.69812 L 167.597321 639.865845 L 54.926208 633.825623 L 26.577238 627.785339 L 3.3e-05 592.751709 L 2.73832 575.27533 L 26.577238 559.248352 L 60.724873 562.228149 L 136.187973 567.382629 L 249.422867 575.194763 L 331.570496 580.026978 L 453.261841 592.671082 L 472.590637 592.671082 L 475.328857 584.859009 L 468.724915 580.026978 L 463.570557 575.194763 L 346.389313 495.785217 L 219.543671 411.865906 L 153.100723 363.543762 L 117.181267 339.060425 L 99.060455 316.107361 L 91.248367 266.01355 L 123.865784 230.093994 L 167.677887 233.073853 L 178.872513 236.053772 L 223.248367 270.201477 L 318.040283 343.570496 L 441.825592 434.738342 L 459.946411 449.798706 L 467.194672 444.64447 L 468.080597 441.020203 L 459.946411 427.409485 L 392.617493 305.718323 L 320.778564 181.932983 L 288.80542 130.630859 L 280.348999 99.865845 C 277.369171 87.221436 275.194641 76.590698 275.194641 63.624268 L 312.322174 13.20813 L 332.8591 6.604126 L 382.389313 13.20813 L 403.248352 31.328979 L 434.013519 101.71814 L 483.865753 212.537048 L 561.181274 363.221497 L 583.812134 407.919434 L 595.892639 449.315491 L 600.40271 461.959839 L 608.214783 461.959839 L 608.214783 454.711609 L 614.577271 369.825623 L 626.335632 265.61084 L 637.771851 131.516846 L 641.718201 93.745117 L 660.402832 48.483276 L 697.530334 24.000122 L 726.52356 37.852417 L 750.362549 72 L 747.060486 94.067139 L 732.886047 186.201416 L 705.100708 330.52356 L 686.979919 427.167847 L 697.530334 427.167847 L 709.61084 415.087341 L 758.496704 350.174561 L 840.644348 247.490051 L 876.885925 206.738342 L 919.167847 161.71814 L 946.308838 140.29541 L 997.61084 140.29541 L 1035.38269 196.429626 L 1018.469849 254.416199 L 965.637634 321.422852 L 921.825562 378.201538 L 859.006714 462.765259 L 819.785278 530.41626 L 823.409424 535.812073 L 832.75177 534.92627 L 974.657776 504.724915 L 1051.328979 490.872559 L 1142.818848 475.167786 L 1184.214844 494.496582 L 1188.724854 514.147644 L 1172.456421 554.335693 L 1074.604126 578.496765 L 959.838989 601.449829 L 788.939636 641.879272 L 786.845764 643.409485 L 789.261841 646.389343 L 866.255127 653.637634 L 899.194702 655.409424 L 979.812134 655.409424 L 1129.932861 666.604187 L 1169.154419 692.537109 L 1192.671265 724.268677 L 1188.724854 748.429688 L 1128.322144 779.194641 L 1046.818848 759.865845 L 856.590759 714.604126 L 791.355774 698.335754 L 782.335693 698.335754 L 782.335693 703.731567 L 836.69812 756.885986 L 936.322205 846.845581 L 1061.073975 962.81897 L 1067.436279 991.490112 L 1051.409424 1014.120911 L 1034.496704 1011.704712 L 924.885986 929.234924 L 882.604126 892.107544 L 786.845764 811.48999 L 780.483276 811.48999 L 780.483276 819.946289 L 802.550415 852.241699 L 919.087341 1027.409424 L 925.127625 1081.127686 L 916.671204 1098.604126 L 886.469849 1109.154419 L 853.288696 1103.114136 L 785.073914 1007.355835 L 714.684631 899.516785 L 657.906067 802.872498 L 650.979858 806.81897 L 617.476624 1167.704834 L 601.771851 1186.147705 L 565.530212 1200 L 535.328857 1177.046997 L 519.302124 1139.919556 L 535.328857 1066.550537 L 554.657776 970.792053 L 570.362488 894.68457 L 584.536926 800.134277 L 592.993347 768.724976 L 592.429626 766.630859 L 585.503479 767.516968 L 514.22821 865.369263 L 405.825531 1011.865906 L 320.053711 1103.677979 L 299.516815 1111.812256 L 263.919525 1093.369263 L 267.221497 1060.429688 L 287.114136 1031.114136 L 405.825531 880.107361 L 477.422913 786.52356 L 523.651062 732.483276 L 523.328918 724.671265 L 520.590698 724.671265 L 205.288605 929.395935 L 149.154434 936.644409 L 124.993355 914.01355 L 127.973183 876.885986 L 139.409409 864.80542 L 234.201385 799.570435 L 233.879227 799.8927 Z",wf="M60.8734,57.2556v-14.9432c0-1.2586.4722-2.2029,1.5728-2.8314l30.0443-17.3023c4.0899-2.3593,8.9662-3.4599,13.9988-3.4599,18.8759,0,30.8307,14.6289,30.8307,30.2006,0,1.1007,0,2.3593-.158,3.6178l-31.1446-18.2467c-1.8872-1.1006-3.7754-1.1006-5.6629,0l-39.4812,22.9651ZM131.0276,115.4561v-35.7074c0-2.2028-.9446-3.7756-2.8318-4.8763l-39.481-22.9651,12.8982-7.3934c1.1007-.6285,2.0453-.6285,3.1458,0l30.0441,17.3024c8.6523,5.0341,14.4708,15.7296,14.4708,26.1107,0,11.9539-7.0769,22.965-18.2461,27.527v.0021ZM51.593,83.9964l-12.8982-7.5497c-1.1007-.6285-1.5728-1.5728-1.5728-2.8314v-34.6048c0-16.8303,12.8982-29.5722,30.3585-29.5722,6.607,0,12.7403,2.2029,17.9324,6.1349l-30.987,17.9324c-1.8871,1.1007-2.8314,2.6735-2.8314,4.8764v45.6159l-.0014-.0015ZM79.3562,100.0403l-18.4829-10.3811v-22.0209l18.4829-10.3811,18.4812,10.3811v22.0209l-18.4812,10.3811ZM91.2319,147.8591c-6.607,0-12.7403-2.2031-17.9324-6.1344l30.9866-17.9333c1.8872-1.1005,2.8318-2.6728,2.8318-4.8759v-45.616l13.0564,7.5498c1.1005.6285,1.5723,1.5728,1.5723,2.8314v34.6051c0,16.8297-13.0564,29.5723-30.5147,29.5723v.001ZM53.9522,112.7822l-30.0443-17.3024c-8.652-5.0343-14.471-15.7296-14.471-26.1107,0-12.1119,7.2356-22.9652,18.403-27.5272v35.8634c0,2.2028.9443,3.7756,2.8314,4.8763l39.3248,22.8068-12.8982,7.3938c-1.1007.6287-2.045.6287-3.1456,0ZM52.2229,138.5791c-17.7745,0-30.8306-13.3713-30.8306-29.8871,0-1.2585.1578-2.5169.3143-3.7754l30.987,17.9323c1.8871,1.1005,3.7757,1.1005,5.6628,0l39.4811-22.807v14.9435c0,1.2585-.4721,2.2021-1.5728,2.8308l-30.0443,17.3025c-4.0898,2.359-8.9662,3.4605-13.9989,3.4605h.0014ZM91.2319,157.296c19.0327,0,34.9188-13.5272,38.5383-31.4594,17.6164-4.562,28.9425-21.0779,28.9425-37.908,0-11.0112-4.719-21.7066-13.2133-29.4143.7867-3.3035,1.2595-6.607,1.2595-9.909,0-22.4929-18.2471-39.3247-39.3251-39.3247-4.2461,0-8.3363.6285-12.4262,2.045-7.0792-6.9213-16.8318-11.3254-27.5271-11.3254-19.0331,0-34.9191,13.5268-38.5384,31.4591C11.3255,36.0212,0,52.5373,0,69.3675c0,11.0112,4.7184,21.7065,13.2125,29.4142-.7865,3.3035-1.2586,6.6067-1.2586,9.9092,0,22.4923,18.2466,39.3241,39.3248,39.3241,4.2462,0,8.3362-.6277,12.426-2.0441,7.0776,6.921,16.8302,11.3251,27.5271,11.3251Z";function As({size:e=16,style:t}){return vr("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:vr("path",{d:Sf})})}function Ps({size:e=16,style:t}){return vr("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:vr("path",{d:wf})})}function Os({provider:e,size:t=16,style:n}){return e==="codex"?vr(Ps,{size:t,style:n}):vr(As,{size:t,style:n})}var Ci=[{id:"claude-opus-4-6",label:"Opus 4.6"},{id:"claude-sonnet-4-6",label:"Sonn 4.6"}],Ei=[{id:"gpt-5.4",label:"GPT 5.4"},{id:"gpt-5.3-codex",label:"Codex 5.3"},{id:"gpt-5.3-codex-spark",label:"Spark 5.3"}];var Cf=[...Ci,...Ei];function Bs(e,t){if(!e)return t==="codex"?"Codex":"Claude Code";let n=Cf.find(r=>r.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as bc}from"react/jsx-runtime";var yo={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function ko({children:e,active:t,siblingActive:n,disabled:r,onClick:o,title:i}){let s=()=>r?.4:n&&!t?.5:1,a={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:0,border:"none",cursor:r?"default":"pointer",transition:"background-color 150ms ease, color 150ms ease, transform 100ms ease, opacity 150ms ease",backgroundColor:t?yo.bgActive:"transparent",color:t?yo.iconActive:yo.iconDefault,opacity:s()};return bc("button",{type:"button",onClick:r?void 0:o,title:i,disabled:r,style:a,onMouseEnter:l=>{r||(l.currentTarget.style.opacity="1",t||(l.currentTarget.style.backgroundColor=yo.bgHover))},onMouseLeave:l=>{r||(l.currentTarget.style.opacity=String(s()),t||(l.currentTarget.style.backgroundColor="transparent"))},onMouseDown:l=>{r||(l.currentTarget.style.transform="scale(0.95)")},onMouseUp:l=>{r||(l.currentTarget.style.transform="scale(1)")},children:e})}function yc(){return bc("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as $r,jsx as xe,jsxs as Ct}from"react/jsx-runtime";var Vo=[{type:"rectangle",icon:Lf,label:"Rectangle",shortcut:"R"},{type:"circle",icon:Ef,label:"Oval",shortcut:"O"},{type:"line",icon:Rf,label:"Line",shortcut:"L"},{type:"freehand",icon:If,label:"Pen",shortcut:"P"}],Of=new Set(Vo.map(e=>e.type));function Bf(e,t,n,r,o,i,s,a){let l=(e-o)*(r-i)-(n-o)*(t-i),d=(e-s)*(i-a)-(o-s)*(t-a),c=(e-n)*(a-r)-(s-n)*(t-r),p=l<0||d<0||c<0,u=l>0||d>0||c>0;return!(p&&u)}function Df(e="bottom-right"){return Ya(e,window.innerWidth,window.innerHeight)}var _f=[{type:"text",icon:Pf,label:"Text",shortcut:"T"}],xc={inspector:{name:"Comment",desc:"Pin feedback to specific elements on the page.",usage:["Click any element to attach a comment","Type your note, then hand off to your AI","Your AI may ask clarifying questions","Replies get threaded"],keys:[{key:"C",desc:"Select tool"},{key:"Click",desc:"Pin comment to element"},{key:"Esc",desc:"Deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},hand:{name:"Handle",desc:"Quickly finetune layout and typescale.",usage:["Edges \u2192 padding","Between items \u2192 spacing","Corners \u2192 rounding","Right of text \u2192 font size","Below text \u2192 line height","Click a spacing handle to cycle distribution","Right-click \u2192 inspect element styles"],keys:[{key:"H",desc:"Select tool"},{key:"Shift",desc:"Snap to scale"},{key:"\u2325 + swipe",desc:"Cycle justify / flip direction"},{key:"\u21E7 + swipe",desc:"Cycle align-items"},{key:"Right-click",desc:"Inspect styles"},{key:"Esc",desc:"Deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},rectangle:{name:"Rectangle",desc:"Draw rectangular highlights to mark areas of interest.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"R",desc:"Rectangle"},{key:"O",desc:"Oval"},{key:"L",desc:"Line"},{key:"P",desc:"Pen"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},circle:{name:"Oval",desc:"Draw oval highlights to mark areas of interest.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"O",desc:"Oval"},{key:"R",desc:"Rectangle"},{key:"L",desc:"Line"},{key:"P",desc:"Pen"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},line:{name:"Line",desc:"Draw line annotations to point at or connect elements.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"L",desc:"Line"},{key:"R",desc:"Rectangle"},{key:"O",desc:"Oval"},{key:"P",desc:"Pen"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},freehand:{name:"Pen",desc:"Draw freehand paths to annotate freely.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"P",desc:"Pen"},{key:"R",desc:"Rectangle"},{key:"O",desc:"Oval"},{key:"L",desc:"Line"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},text:{name:"Text",desc:"Place text labels anywhere on the page.",usage:["Click to place, then start typing","Click away or press Enter to finish","Scroll while hovering a label to resize it"],keys:[{key:"T",desc:"Select tool"},{key:"Esc",desc:"Cancel text or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},model:{name:"Model",desc:"Promote components into the local design model.",usage:["Hover to highlight component boundaries","Scroll to walk up/down the component tree","Click to add to model.json","Green = already in model"],keys:[{key:"M",desc:"Select tool"},{key:"Scroll",desc:"Walk tree depth"},{key:"Click",desc:"Promote component"},{key:"Esc",desc:"Deselect"}]},counter:{name:"Annotations",desc:"Click to cycle, scroll to change color, long press to reset.",usage:[],keys:[{key:"Click",desc:"Cycle annotations"},{key:"Scroll",desc:"Change color"},{key:"Hold",desc:"Reset to red"}]},clear:{name:"Clear",desc:"Remove all annotations and style changes.",usage:[],keys:[{key:"\u2318 \u232B",desc:"Clear all"},{key:"\u232B",desc:"Delete selected annotation"},{key:"\u2318 Z",desc:"Undo"},{key:"\u2318 \u21E7 Z",desc:"Redo"}]},collapse:{name:"Popmelt",desc:`Comment and zhuzh, then hand off.
|
|
9
9
|
|
|
10
|
-
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},yf={position:"fixed",bottom:16,right:16,zIndex:9999,display:"flex",alignItems:"center",backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",cursor:"pointer",overflow:"visible",boxSizing:"content-box",transition:"all 0ms cubic-bezier(0.4, 0, 0.2, 1)"},Cs="devtools-toolbar-expanded",ks="devtools-annotations",Es="devtools-style-modifications",Ts="devtools-active-tool",Ka="devtools-active-color",qa="devtools-stroke-width",Za="devtools-inspected-element",Ms="devtools-spacing-changes",bf={expanded:Cs,annotations:ks,styleMods:Es,spacingChanges:Ms,tool:Ts,color:Ka,stroke:qa,inspected:Za};function Qa({state:e,dispatch:t,onScreenshot:n,onSendToClaude:r,hasActiveJobs:o,activeJobColor:i,onCrosshairHover:s,onClear:l,provider:a="claude",onProviderChange:d,availableProviders:c,modelIndex:u=0,modelCount:p=2,modelLabel:g="Opus 4.6",onModelChange:w,onViewThread:C,isThreadPanelOpen:R,mcpStatus:P,onInstallMcp:G,mcpJustInstalled:M,bridgeUrl:T,isBridgeConnected:x,modelSelectedComponent:N,modelCanvasHoveredComponent:W,onModelComponentHover:_,onSpacingTokenHover:H,onModifySpacingToken:V,onDeleteSpacingToken:k,modelRefreshKey:A,onModelComponentAdded:Q,onModelComponentRemoved:ie,onMouseEnter:pe,toolbarRef:be}){let[me,We]=lr(()=>typeof window=="undefined"?!1:localStorage.getItem(Cs)==="true"),[Ce,oe]=lr(0),_e=Ft(0),Ne=Ft(0),je=Ft(e.isAnnotating),Fe=Ft(!1),Ie=Ft(typeof window!="undefined"?localStorage.getItem(Ts):null),ct=Ft(typeof window!="undefined"?localStorage.getItem(Ka):null),wt=Ft(typeof window!="undefined"?localStorage.getItem(qa):null),[Pe,Tt]=lr(null),nt=Ft(!1),Lt=Ft(null),Mt=Ft(null),Oe=Ft(null),[h,z]=lr([]),te=Ft({x:0,y:0}),se=Ft(null),ke=Ft(null),ye=Ft(null),ae=Bn(()=>{se.current=null,ke.current=null,ye.current&&(clearTimeout(ye.current),ye.current=null)},[]),de=Bn(D=>{Mt.current&&(clearTimeout(Mt.current),Mt.current=null),nt.current?(se.current=D,ke.current=f({},te.current),ye.current&&clearTimeout(ye.current),ye.current=setTimeout(()=>{se.current&&(Tt(se.current),ae())},300)):(Lt.current&&clearTimeout(Lt.current),Lt.current=setTimeout(()=>{nt.current=!0,Tt(D),Lt.current=null},500))},[ae]),ue=Bn(()=>{ae(),Lt.current&&(clearTimeout(Lt.current),Lt.current=null),Mt.current=setTimeout(()=>{nt.current=!1,Tt(null)},150)},[ae]);yn(()=>{let D=Oe.current;if(!D)return;let X=()=>{ae(),Mt.current&&(clearTimeout(Mt.current),Mt.current=null)},re=()=>{Mt.current=setTimeout(()=>{nt.current=!1,Tt(null)},150)};return D.addEventListener("mouseenter",X),D.addEventListener("mouseleave",re),()=>{D.removeEventListener("mouseenter",X),D.removeEventListener("mouseleave",re)}},[Pe,ae]),yn(()=>{if(Pe!=="counter"||!T)return;let D=!1;return fetch(`${T}/threads/recent?limit=5`).then(X=>X.ok?X.json():[]).then(X=>{D||z(X)}).catch(()=>{}),()=>{D=!0}},[Pe,T]);let Ye=Bn(D=>{if(te.current={x:D.clientX,y:D.clientY},se.current&&ke.current){let X=ke.current,re=mf();gf(D.clientX,D.clientY,X.x,X.y,re.left,re.y,re.right,re.y)||(Tt(se.current),ae())}},[ae]),qe=Er(()=>{let D=(c!=null?c:[]).map(X=>X==="claude"?"Claude":X==="codex"?"Codex":X);return{name:"AI Model",desc:D.length>1?`${D.join(" and ")} are available.`:D.length===1?`Connected to ${D[0]}.`:"No AI providers detected.",usage:D.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:D.length>1?[{key:"Click",desc:"Switch"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]:[{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]}},[c]);Ra(me,e,Fe,!!o,bf),yn(()=>{let D=new URLSearchParams(window.location.search);if(!D.has("popmelt"))return;let X=document.createElement("style");X.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(X);let re=parseInt(D.get("popmelt")||"0",10)||0,we=()=>{We(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})};if(re>0){let K=setTimeout(we,re);return()=>clearTimeout(K)}we()},[]),yn(()=>{var re;if(localStorage.getItem(Cs)==="true"&&!e.isAnnotating){if(me||We(!0),t({type:"SET_TOOL",payload:Ie.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),ct.current&&t({type:"SET_COLOR",payload:ct.current}),wt.current){let v=parseFloat(wt.current);isNaN(v)||t({type:"SET_STROKE_WIDTH",payload:v})}let we=localStorage.getItem(ks);if(we)try{let v=JSON.parse(we);if(Array.isArray(v)&&v.length>0){for(let B of v)(B.status==="waiting_input"||B.status==="in_flight")&&(B.status=B.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:v}})}}catch(v){}let K=localStorage.getItem(Es);if(K)try{let v=JSON.parse(K);Array.isArray(v)&&v.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:v}),Gr(v))}catch(v){}let Ee=localStorage.getItem(Ms);if(Ee)try{let v=JSON.parse(Ee);Array.isArray(v)&&v.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:v})}catch(v){}let Te=localStorage.getItem(Za);if(Te)try{let{selector:v,info:B}=JSON.parse(Te);if(v){let ee=vn(v);if(ee){let le=B||y(f({},kn(ee)),{selector:v});t({type:"SELECT_ELEMENT",payload:{el:ee,info:le}})}}}catch(v){}let Le=sessionStorage.getItem("popmelt-pending-focus");if(Le){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:v}=JSON.parse(Le);if(v){let B=we?(re=JSON.parse(we))!=null?re:[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:v}});let ee=B.find(le=>le.id===v);if(ee){let Me=(ee.groupId?B.filter(ge=>ge.groupId===ee.groupId):[ee]).flatMap(ge=>ge.points);if(Me.length>0){let ge=Math.min(...Me.map(Ze=>Ze.x)),Ge=Math.max(...Me.map(Ze=>Ze.x)),Xe=Math.min(...Me.map(Ze=>Ze.y)),mt=Math.max(...Me.map(Ze=>Ze.y));window.scrollTo({left:(ge+Ge)/2-window.innerWidth/2,top:(Xe+mt)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch(v){}}}let X=sessionStorage.getItem("popmelt-pending-thread");if(X){sessionStorage.removeItem("popmelt-pending-thread");try{let{threadId:we,selector:K,preview:Ee}=JSON.parse(X);we&&requestAnimationFrame(()=>{if(K)try{let Te=document.querySelector(K);if(Te){let Le=Te.getBoundingClientRect(),v=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:v,point:{x:Le.left+Le.width,y:Le.top},text:Ee||"[thread]",linkedSelector:K,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[v],threadId:we}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[v],status:"resolved"}})}}catch(Te){}C&&C(we)})}catch(we){}}return Fe.current=!0,()=>{Fe.current=!1}},[]);let st=Ft(e.styleModifications);yn(()=>{let D=st.current,X=e.styleModifications;D!==X&&(Jr(D),Gr(X),st.current=X)},[e.styleModifications]),yn(()=>{let D=je.current;je.current=e.isAnnotating,D&&!e.isAnnotating&&me&&We(!1)},[e.isAnnotating,me]);let Pt=Ft(me);Pt.current=me,yn(()=>{let D=re=>{if(re.key==="Meta"||re.key==="Control"){let we=Date.now();if(we-_e.current<300){if(Ne.current++,Ne.current>=2){if(Pt.current)t({type:"SET_ANNOTATING",payload:!1}),We(!1);else{let Te=localStorage.getItem(Ts);t({type:"SET_TOOL",payload:Te||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),We(!0)}Ne.current=0}}else Ne.current=1;_e.current=we}else Ne.current=0},X=re=>{re.key!=="Meta"&&re.key!=="Control"&&(Ne.current=0)};return window.addEventListener("keydown",D),window.addEventListener("keyup",X),()=>{window.removeEventListener("keydown",D),window.removeEventListener("keyup",X)}},[t]);let Ct=Bn(D=>{ae(),t({type:"SET_TOOL",payload:D}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),nt.current=!1,Tt(null),Lt.current&&(clearTimeout(Lt.current),Lt.current=null),Mt.current&&(clearTimeout(Mt.current),Mt.current=null)},[t,e.isAnnotating,ae]),It=Bn(async()=>{window.focus(),await n()},[n]),Gt=Bn(async()=>{r&&await r()},[r]),Jt=Bn(()=>{t({type:"SET_ANNOTATING",payload:!1}),We(!1)},[t]),$t=Bn(()=>{Jr(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(D=>D.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(ks),localStorage.removeItem(Es),localStorage.removeItem(Ms),rn(null),l==null||l()},[t,e.styleModifications,l]),[on,Ot]=lr(()=>{if(ct.current){let D=ct.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(D!=null&&D[1])return parseFloat(D[1])}return 29}),bn=Ft(null),St=Ft(null),ne=Ft(!1),De=Bn(D=>{let X=D.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return X&&X[1]?parseFloat(X[1]):null},[]);yn(()=>{ne.current=!0;let D=`oklch(0.628 0.258 ${on})`;t({type:"SET_COLOR",payload:D}),requestAnimationFrame(()=>{ne.current=!1})},[on,t]),yn(()=>{if(ne.current)return;let D=De(e.activeColor);D!==null&&Math.abs(D-on)>.5&&Ot(D)},[e.activeColor,De,on]);let ot=e.annotations.length>0;yn(()=>{let D=St.current;if(!D||!ot)return;let X=re=>{re.preventDefault(),re.stopPropagation();let we=re.deltaY>0?-1:1,K=((on+we)%360+360)%360,Ee=`oklch(0.628 0.258 ${K})`;Ot(K),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:Ee}})};return D.addEventListener("wheel",X,{passive:!1}),()=>D.removeEventListener("wheel",X)},[ot,e.selectedAnnotationIds,e.lastSelectedId,on,t]);let Dn=Ft(!1),Tn=Ft(0);yn(()=>{let D=e.annotations.some(we=>!we.status||we.status==="pending"),X=Dn.current;Dn.current=D;let re=Tn.current===0&&e.annotations.length>0;if(Tn.current=e.annotations.length,(X&&!D||re&&!D)&&e.annotations.length>0){let we=e.annotations.map(K=>De(K.color)).filter(K=>K!==null);if(we.length>0){let K=0,Ee=-1;for(let Te=0;Te<360;Te++){let Le=Math.min(...we.map(v=>{let B=Math.abs(Te-v);return Math.min(B,360-B)}));Le>Ee&&(Ee=Le,K=Te)}Ot(K)}}},[e.annotations,De]);let Qt=Ft(!1),Mn=Bn(()=>{Qt.current=!1,bn.current=setTimeout(()=>{Qt.current=!0,Ot(29)},500)},[]),Sn=Bn(()=>{bn.current&&(clearTimeout(bn.current),bn.current=null)},[]);yn(()=>()=>{bn.current&&clearTimeout(bn.current),ye.current&&clearTimeout(ye.current)},[]);let Bt=jo(),ur=Er(()=>e.annotations.filter(D=>!D.pathname||D.pathname===Bt),[e.annotations,Bt]),fn=Er(()=>Kr(e.annotations),[e.annotations]),Nt=Er(()=>{let D=[],X=new Set,re=[...e.annotations].sort((we,K)=>we.timestamp-K.timestamp);for(let we of re)if(!fn.has(we))if(we.groupId){if(!X.has(we.groupId)){X.add(we.groupId);let K=e.annotations.filter(Le=>Le.groupId===we.groupId&&!fn.has(Le)),Ee=K.find(Le=>Le.type!=="text")||K[0],Te=Math.min(...K.map(Le=>Le.timestamp));D.push({id:Ee.id,pathname:we.pathname,annotations:K,timestamp:Te})}}else D.push({id:we.id,pathname:we.pathname,annotations:[we],timestamp:we.timestamp});return D},[e.annotations,fn]),Dt=Er(()=>Nt.filter(D=>!D.pathname||D.pathname===Bt),[Nt,Bt]),[yt,rn]=lr(null),_t=Nt.length+e.styleModifications.length;yn(()=>{(_t===0||yt!==null&&yt>=_t)&&rn(null)},[_t,yt]),yn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){rn(null);return}if(e.selectedAnnotationIds.length>0){let D=e.selectedAnnotationIds[0],X=Nt.findIndex(re=>re.id===D||re.annotations.some(we=>we.id===D));X>=0&&X!==yt&&rn(X)}},[e.selectedAnnotationIds,e.inspectedElement,Nt]);let Qn=Bn(()=>{var X;if(_t===0)return;let D;if(yt===null?D=0:yt+1>=_t?D=null:D=yt+1,rn(D),D===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(D<Nt.length){let re=Nt[D];if(!(!re.pathname||re.pathname===Bt)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:re.id,pathname:re.pathname})),window.location.href=re.pathname;return}t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:re.id}});let K=re.annotations.find(ge=>ge.type!=="text")||re.annotations[0];if(re.annotations.some(ge=>ge.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(K!=null&&K.type&&K.type!=="text"&&K.type!=="inspector"){t({type:"SET_TOOL",payload:K.type});let ge=No.findIndex(Ge=>Ge.type===K.type);ge>=0&&oe(ge)}if(K!=null&&K.color){t({type:"SET_COLOR",payload:K.color});let ge=De(K.color);ge!==null&&Ot(ge)}let Te=re.annotations.flatMap(ge=>ge.points);if(Te.length===0)return;let Le=Math.min(...Te.map(ge=>ge.x)),v=Math.max(...Te.map(ge=>ge.x)),B=Math.min(...Te.map(ge=>ge.y)),ee=Math.max(...Te.map(ge=>ge.y)),le=(Le+v)/2,Me=(B+ee)/2;if(window.scrollTo({left:le-window.innerWidth/2,top:Me-window.innerHeight/2,behavior:"smooth"}),R&&C){let ge=(X=re.annotations.find(Ge=>Ge.threadId))==null?void 0:X.threadId;ge&&C(ge)}}else{let re=D-Nt.length,we=e.styleModifications[re];if(!we)return;let K=vn(we.selector);if(!K)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:K,info:we.element}});let Ee=K.getBoundingClientRect(),Te=Ee.left+Ee.width/2+window.scrollX,Le=Ee.top+Ee.height/2+window.scrollY;window.scrollTo({left:Te-window.innerWidth/2,top:Le-window.innerHeight/2,behavior:"smooth"})}},[Nt,Bt,e.styleModifications,_t,yt,t,De,R,C]);yn(()=>{if(!me)return;let D=X=>{var Ee;let re=document.activeElement;for(;(Ee=re==null?void 0:re.shadowRoot)!=null&&Ee.activeElement;)re=re.shadowRoot.activeElement;if((re==null?void 0:re.tagName)==="INPUT"||(re==null?void 0:re.tagName)==="TEXTAREA"||re!=null&&re.isContentEditable)return;if((X.metaKey||X.ctrlKey)&&X.key==="Enter"){r&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(Te=>!Te.captured).length>0)&&(X.preventDefault(),Gt());return}if((X.metaKey||X.ctrlKey)&&(X.key==="c"||X.key==="C"||X.code==="KeyC")){let Te=window.getSelection();if(Te&&Te.toString().length>0)return;(e.annotations.length>0||e.styleModifications.length>0)&&(X.preventDefault(),window.focus(),It());return}if((X.metaKey||X.ctrlKey)&&(X.key==="Backspace"||X.key==="Delete")){X.preventDefault(),$t();return}if(X.metaKey||X.ctrlKey||X.altKey)return;let we={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(X.key.toLowerCase()==="m"){X.preventDefault(),Ct("model");return}let K=we[X.key.toLowerCase()];if(K){X.preventDefault();let Te=No.findIndex(Le=>Le.type===K);Te>=0&&oe(Te),Ct(K)}};return window.addEventListener("keydown",D),()=>window.removeEventListener("keydown",D)},[me,Ct,It,Gt,r,$t,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,Pe]);let wn=y(f({},yf),{borderRadius:0,padding:me?"0 8px":"0",width:me?"auto":48,height:48,gap:0,justifyContent:me?"flex-start":"center"}),lt=`<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='${o&&i?i:"rgb(0,0,0)"}' stroke-width='.75'/></svg>`,eo=Se("div",{style:f({position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(lt)}")`,backgroundSize:"5px 5px",WebkitMask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",WebkitMaskComposite:"xor",mask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",maskComposite:"exclude",pointerEvents:"none"},o&&{animation:"popmelt-border-march 0.8s linear infinite"})}),xo=x===!1?"rgba(239, 68, 68, 0.4)":o&&i?i:so.iconActive,vo=Ft(null);yn(()=>{if(!me)return;let D=vo.current;if(!D)return;let X=()=>{s==null||s(!0),de("collapse")},re=()=>{s==null||s(!1),ue()};return D.addEventListener("mouseenter",X),D.addEventListener("mouseleave",re),()=>{D.removeEventListener("mouseenter",X),D.removeEventListener("mouseleave",re)}},[me,o,s,de,ue]);let to=Ft(null);return yn(()=>{if(me)return;let D=to.current;if(!D)return;let X=D.querySelector("[data-popmelt-logo]"),re=()=>{D.style.opacity="1",!o&&X&&(X.style.fill="#000"),pe==null||pe()},we=()=>{D.style.opacity=o?"1":"0.5",!o&&X&&(X.style.fill="none")};return D.addEventListener("mouseenter",re),D.addEventListener("mouseleave",we),()=>{D.removeEventListener("mouseenter",re),D.removeEventListener("mouseleave",we)}},[me,o,pe]),me?Et(Tr,{children:[Se("style",{children:`
|
|
10
|
+
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},Nf={zIndex:9999,display:"flex",alignItems:"center",backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",cursor:"pointer",overflow:"visible",boxSizing:"content-box",transition:"none"},Ds="devtools-toolbar-expanded",_s="devtools-annotations",Ns="devtools-style-modifications",Hs="devtools-active-tool",vc="devtools-active-color",Sc="devtools-stroke-width",wc="devtools-inspected-element",Fs="devtools-spacing-changes",Hf={expanded:Ds,annotations:_s,styleMods:Ns,spacingChanges:Fs,tool:Hs,color:vc,stroke:Sc,inspected:wc};function Cc({state:e,dispatch:t,onScreenshot:n,onSendToClaude:r,hasActiveJobs:o,activeJobColor:i,onCrosshairHover:s,onClear:a,provider:l="claude",onProviderChange:d,availableProviders:c,modelIndex:p=0,modelCount:u=2,modelLabel:g="Opus 4.6",onModelChange:b,onViewThread:v,isThreadPanelOpen:R,mcpStatus:C,onInstallMcp:G,mcpJustInstalled:L,bridgeUrl:A,isBridgeConnected:E,modelSelectedComponent:_,modelCanvasHoveredComponent:ie,onModelComponentHover:oe,onSpacingTokenHover:Y,onModifySpacingToken:K,onDeleteSpacingToken:H,modelRefreshKey:ee,onModelComponentAdded:k,onModelComponentRemoved:Ae,onSynthesizeRules:X,isSynthesizing:ge,onMouseEnter:B,toolbarRef:ce,snapPosition:Q="bottom-right",onSnapPositionChange:q}){let[Ee,De]=Uo(()=>typeof window!="undefined"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});cn(()=>{let T=()=>De({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",T),()=>window.removeEventListener("resize",T)},[]);let[pe,Pe]=Uo(()=>typeof window=="undefined"?!1:localStorage.getItem(Ds)==="true"),[Re,Me]=Uo(0),et=Bt(0),Ve=Bt(0),Tt=Bt(e.isAnnotating),Mt=Bt(!1),zt=Bt(typeof window!="undefined"?localStorage.getItem(Hs):null),tt=Bt(typeof window!="undefined"?localStorage.getItem(vc):null),gn=Bt(typeof window!="undefined"?localStorage.getItem(Sc):null),[$,de]=Uo(null),Te=Bt(!1),me=Bt(null),N=Bt(null),ye=Bt(null),[re,we]=Uo([]),We=Bt({x:0,y:0}),Ge=Bt(null),dt=Bt(null),xt=Bt(null),vt=zn(()=>{Ge.current=null,dt.current=null,xt.current&&(clearTimeout(xt.current),xt.current=null)},[]),Oe=zn(T=>{N.current&&(clearTimeout(N.current),N.current=null),Te.current?(Ge.current=T,dt.current=f({},We.current),xt.current&&clearTimeout(xt.current),xt.current=setTimeout(()=>{Ge.current&&(de(Ge.current),vt())},300)):(me.current&&clearTimeout(me.current),me.current=setTimeout(()=>{Te.current=!0,de(T),me.current=null},500))},[vt]),ke=zn(()=>{vt(),me.current&&(clearTimeout(me.current),me.current=null),N.current=setTimeout(()=>{Te.current=!1,de(null)},150)},[vt]);cn(()=>{let T=ye.current;if(!T)return;let z=()=>{vt(),N.current&&(clearTimeout(N.current),N.current=null)},te=()=>{N.current=setTimeout(()=>{Te.current=!1,de(null)},150)};return T.addEventListener("mouseenter",z),T.addEventListener("mouseleave",te),()=>{T.removeEventListener("mouseenter",z),T.removeEventListener("mouseleave",te)}},[$,vt]),cn(()=>{if($!=="counter"||!A)return;let T=!1;return fetch(`${A}/threads/recent?limit=5`).then(z=>z.ok?z.json():[]).then(z=>{T||we(z)}).catch(()=>{}),()=>{T=!0}},[$,A]);let ht=zn(T=>{if(We.current={x:T.clientX,y:T.clientY},Ge.current&&dt.current){let z=dt.current,te=Df(Q);Bf(T.clientX,T.clientY,z.x,z.y,te.left,te.y,te.right,te.y)||(de(Ge.current),vt())}},[vt,Q]),mn=Fr(()=>{let T=(c!=null?c:[]).map(z=>z==="claude"?"Claude":z==="codex"?"Codex":z);return{name:"AI Model",desc:T.length>1?`${T.join(" and ")} are available.`:T.length===1?`Connected to ${T[0]}.`:"No AI providers detected.",usage:T.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:T.length>1?[{key:"Click",desc:"Switch"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]:[{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]}},[c]);ec(pe,e,Mt,!!o,Hf),cn(()=>{let T=new URLSearchParams(window.location.search);if(!T.has("popmelt"))return;let z=document.createElement("style");z.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(z);let te=parseInt(T.get("popmelt")||"0",10)||0,he=()=>{Pe(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})};if(te>0){let se=setTimeout(he,te);return()=>clearTimeout(se)}he()},[]),cn(()=>{var te;if(localStorage.getItem(Ds)==="true"&&!e.isAnnotating){if(pe||Pe(!0),t({type:"SET_TOOL",payload:zt.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),tt.current&&t({type:"SET_COLOR",payload:tt.current}),gn.current){let He=parseFloat(gn.current);isNaN(He)||t({type:"SET_STROKE_WIDTH",payload:He})}let he=localStorage.getItem(_s);if(he)try{let He=JSON.parse(he);if(Array.isArray(He)&&He.length>0){for(let Lt of He)(Lt.status==="waiting_input"||Lt.status==="in_flight")&&(Lt.status=Lt.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:He}})}}catch(He){}let se=localStorage.getItem(Ns);if(se)try{let He=JSON.parse(se);Array.isArray(He)&&He.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:He}),oi(He))}catch(He){}let ve=localStorage.getItem(Fs);if(ve)try{let He=JSON.parse(ve);Array.isArray(He)&&He.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:He})}catch(He){}let Fe=localStorage.getItem(wc);if(Fe)try{let{selector:He,info:Lt}=JSON.parse(Fe);if(He){let x=wn(He);if(x){let P=Lt||h(f({},Rn(x)),{selector:He});t({type:"SELECT_ELEMENT",payload:{el:x,info:P}})}}}catch(He){}let $e=sessionStorage.getItem("popmelt-pending-focus");if($e){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:He}=JSON.parse($e);if(He){let Lt=he?(te=JSON.parse(he))!=null?te:[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:He}});let x=Lt.find(P=>P.id===He);if(x){let ae=(x.groupId?Lt.filter(J=>J.groupId===x.groupId):[x]).flatMap(J=>J.points);if(ae.length>0){let J=Math.min(...ae.map(Ye=>Ye.x)),Le=Math.max(...ae.map(Ye=>Ye.x)),Be=Math.min(...ae.map(Ye=>Ye.y)),Xe=Math.max(...ae.map(Ye=>Ye.y));window.scrollTo({left:(J+Le)/2-window.innerWidth/2,top:(Be+Xe)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch(He){}}}let z=sessionStorage.getItem("popmelt-pending-thread");if(z){sessionStorage.removeItem("popmelt-pending-thread");try{let{threadId:he,selector:se,preview:ve}=JSON.parse(z);he&&requestAnimationFrame(()=>{if(se)try{let Fe=document.querySelector(se);if(Fe){let $e=Fe.getBoundingClientRect(),He=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:He,point:{x:$e.left+$e.width,y:$e.top},text:ve||"[thread]",linkedSelector:se,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[He],threadId:he}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[He],status:"resolved"}})}}catch(Fe){}v&&v(he)})}catch(he){}}return Mt.current=!0,()=>{Mt.current=!1}},[]);let Wn=Bt(e.styleModifications);cn(()=>{let T=Wn.current,z=e.styleModifications;T!==z&&(ri(T),oi(z),Wn.current=z)},[e.styleModifications]),cn(()=>{let T=Tt.current;Tt.current=e.isAnnotating,T&&!e.isAnnotating&&pe&&Pe(!1)},[e.isAnnotating,pe]);let hn=Bt(pe);hn.current=pe,cn(()=>{let T=te=>{if(te.key==="Meta"||te.key==="Control"){let he=Date.now();if(he-et.current<300){if(Ve.current++,Ve.current>=2){if(hn.current)t({type:"SET_ANNOTATING",payload:!1}),Pe(!1);else{let Fe=localStorage.getItem(Hs);t({type:"SET_TOOL",payload:Fe||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),Pe(!0)}Ve.current=0}}else Ve.current=1;et.current=he}else Ve.current=0},z=te=>{te.key!=="Meta"&&te.key!=="Control"&&(Ve.current=0)};return window.addEventListener("keydown",T),window.addEventListener("keyup",z),()=>{window.removeEventListener("keydown",T),window.removeEventListener("keyup",z)}},[t]);let Rt=zn(T=>{vt(),t({type:"SET_TOOL",payload:T}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),Te.current=!1,de(null),me.current&&(clearTimeout(me.current),me.current=null),N.current&&(clearTimeout(N.current),N.current=null)},[t,e.isAnnotating,vt]),oo=zn(async()=>{window.focus(),await n()},[n]),dn=zn(async()=>{r&&await r()},[r]),le=zn(()=>{t({type:"SET_ANNOTATING",payload:!1}),Pe(!1)},[t]),Ie=zn(()=>{ri(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(T=>T.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(_s),localStorage.removeItem(Ns),localStorage.removeItem(Fs),at(null),a==null||a()},[t,e.styleModifications,a]),[Ue,on]=Uo(()=>{if(tt.current){let T=tt.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(T!=null&&T[1])return parseFloat(T[1])}return 29}),Qt=Bt(null),An=Bt(null),bn=Bt(!1),rn=zn(T=>{let z=T.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return z&&z[1]?parseFloat(z[1]):null},[]);cn(()=>{bn.current=!0;let T=`oklch(0.628 0.258 ${Ue})`;t({type:"SET_COLOR",payload:T}),requestAnimationFrame(()=>{bn.current=!1})},[Ue,t]),cn(()=>{if(bn.current)return;let T=rn(e.activeColor);T!==null&&Math.abs(T-Ue)>.5&&on(T)},[e.activeColor,rn,Ue]);let Pn=Bt(null);cn(()=>{if(o&&i){let T=rn(i);T!==null&&Math.abs(T-Ue)>.5&&(Pn.current===null&&(Pn.current=Ue),on(T))}else Pn.current!==null&&(on(Pn.current),Pn.current=null)},[o,i,rn]);let xn=e.annotations.length>0;cn(()=>{let T=An.current;if(!T||!xn)return;let z=te=>{te.preventDefault(),te.stopPropagation();let he=te.deltaY>0?-1:1,se=((Ue+he)%360+360)%360,ve=`oklch(0.628 0.258 ${se})`;on(se),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:ve}})};return T.addEventListener("wheel",z,{passive:!1}),()=>T.removeEventListener("wheel",z)},[xn,e.selectedAnnotationIds,e.lastSelectedId,Ue,t]);let sn=Bt(!1),Mo=Bt(0);cn(()=>{let T=e.annotations.some(he=>!he.status||he.status==="pending"),z=sn.current;sn.current=T;let te=Mo.current===0&&e.annotations.length>0;if(Mo.current=e.annotations.length,(z&&!T||te&&!T)&&e.annotations.length>0){let he=e.annotations.map(se=>rn(se.color)).filter(se=>se!==null);if(he.length>0){let se=0,ve=-1;for(let Fe=0;Fe<360;Fe++){let $e=Math.min(...he.map(He=>{let Lt=Math.abs(Fe-He);return Math.min(Lt,360-Lt)}));$e>ve&&(ve=$e,se=Fe)}on(se)}}},[e.annotations,rn]);let Cn=Bt(!1),Ko=zn(()=>{Cn.current=!1,Qt.current=setTimeout(()=>{Cn.current=!0,on(29)},500)},[]),Jt=zn(()=>{Qt.current&&(clearTimeout(Qt.current),Qt.current=null)},[]);cn(()=>()=>{Qt.current&&clearTimeout(Qt.current),xt.current&&clearTimeout(xt.current)},[]);let vn=rr(),Vn=Fr(()=>e.annotations.filter(T=>!T.pathname||T.pathname===vn),[e.annotations,vn]),Ht=Fr(()=>li(e.annotations),[e.annotations]),Ft=Fr(()=>{let T=[],z=new Set,te=[...e.annotations].sort((he,se)=>he.timestamp-se.timestamp);for(let he of te)if(!Ht.has(he))if(he.groupId){if(!z.has(he.groupId)){z.add(he.groupId);let se=e.annotations.filter($e=>$e.groupId===he.groupId&&!Ht.has($e)),ve=se.find($e=>$e.type!=="text")||se[0],Fe=Math.min(...se.map($e=>$e.timestamp));T.push({id:ve.id,pathname:he.pathname,annotations:se,timestamp:Fe})}}else T.push({id:he.id,pathname:he.pathname,annotations:[he],timestamp:he.timestamp});return T},[e.annotations,Ht]),On=Fr(()=>Ft.filter(T=>!T.pathname||T.pathname===vn),[Ft,vn]),[Dt,at]=Uo(null),_t=Ft.length+e.styleModifications.length;cn(()=>{(_t===0||Dt!==null&&Dt>=_t)&&at(null)},[_t,Dt]),cn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){at(null);return}if(e.selectedAnnotationIds.length>0){let T=e.selectedAnnotationIds[0],z=Ft.findIndex(te=>te.id===T||te.annotations.some(he=>he.id===T));z>=0&&z!==Dt&&at(z)}},[e.selectedAnnotationIds,e.inspectedElement,Ft]);let Wt=zn(()=>{var z;if(_t===0)return;let T;if(Dt===null?T=0:Dt+1>=_t?T=null:T=Dt+1,at(T),T===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(T<Ft.length){let te=Ft[T];if(!(!te.pathname||te.pathname===vn)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:te.id,pathname:te.pathname})),window.location.href=te.pathname;return}t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:te.id}});let se=te.annotations.find(J=>J.type!=="text")||te.annotations[0];if(te.annotations.some(J=>J.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(se!=null&&se.type&&se.type!=="text"&&se.type!=="inspector"){t({type:"SET_TOOL",payload:se.type});let J=Vo.findIndex(Le=>Le.type===se.type);J>=0&&Me(J)}if(se!=null&&se.color){t({type:"SET_COLOR",payload:se.color});let J=rn(se.color);J!==null&&on(J)}let Fe=te.annotations.flatMap(J=>J.points);if(Fe.length===0)return;let $e=Math.min(...Fe.map(J=>J.x)),He=Math.max(...Fe.map(J=>J.x)),Lt=Math.min(...Fe.map(J=>J.y)),x=Math.max(...Fe.map(J=>J.y)),P=($e+He)/2,ae=(Lt+x)/2;if(window.scrollTo({left:P-window.innerWidth/2,top:ae-window.innerHeight/2,behavior:"smooth"}),R&&v){let J=(z=te.annotations.find(Le=>Le.threadId))==null?void 0:z.threadId;J&&v(J)}}else{let te=T-Ft.length,he=e.styleModifications[te];if(!he)return;let se=wn(he.selector);if(!se)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:se,info:he.element}});let ve=se.getBoundingClientRect(),Fe=ve.left+ve.width/2+window.scrollX,$e=ve.top+ve.height/2+window.scrollY;window.scrollTo({left:Fe-window.innerWidth/2,top:$e-window.innerHeight/2,behavior:"smooth"})}},[Ft,vn,e.styleModifications,_t,Dt,t,rn,R,v]);cn(()=>{if(!pe)return;let T=z=>{var ve;let te=document.activeElement;for(;(ve=te==null?void 0:te.shadowRoot)!=null&&ve.activeElement;)te=te.shadowRoot.activeElement;if((te==null?void 0:te.tagName)==="INPUT"||(te==null?void 0:te.tagName)==="TEXTAREA"||te!=null&&te.isContentEditable)return;if((z.metaKey||z.ctrlKey)&&z.key==="Enter"){r&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(Fe=>!Fe.captured).length>0)&&(z.preventDefault(),dn());return}if((z.metaKey||z.ctrlKey)&&(z.key==="c"||z.key==="C"||z.code==="KeyC")){let Fe=window.getSelection();if(Fe&&Fe.toString().length>0)return;(e.annotations.length>0||e.styleModifications.length>0)&&(z.preventDefault(),window.focus(),oo());return}if((z.metaKey||z.ctrlKey)&&(z.key==="Backspace"||z.key==="Delete")){z.preventDefault(),Ie();return}if(z.metaKey||z.ctrlKey||z.altKey)return;let he={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(z.key.toLowerCase()==="m"){z.preventDefault(),Rt("model");return}let se=he[z.key.toLowerCase()];if(se){z.preventDefault();let Fe=Vo.findIndex($e=>$e.type===se);Fe>=0&&Me(Fe),Rt(se)}};return window.addEventListener("keydown",T),()=>window.removeEventListener("keydown",T)},[pe,Rt,oo,dn,r,Ie,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,$]);let qo=za(Q,Ee.w,Ee.h),co=h(f(f({},Nf),qo),{borderRadius:0,padding:pe?"0 8px":"0",width:pe?"auto":48,height:48,gap:0,justifyContent:pe?"flex-start":"center"}),uo=`<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='${o&&i?i:"rgb(0,0,0)"}' stroke-width='.75'/></svg>`,po=xe("div",{style:f({position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(uo)}")`,backgroundSize:"5px 5px",WebkitMask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",WebkitMaskComposite:"xor",mask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",maskComposite:"exclude",pointerEvents:"none"},o&&{animation:"popmelt-border-march 0.8s linear infinite"})}),Zo=E===!1?"rgba(239, 68, 68, 0.4)":o&&i?i:yo.iconActive,kt=Bt(null);cn(()=>{if(!pe)return;let T=kt.current;if(!T)return;let z=()=>{s==null||s(!0),Oe("collapse")},te=()=>{s==null||s(!1),ke()};return T.addEventListener("mouseenter",z),T.addEventListener("mouseleave",te),()=>{T.removeEventListener("mouseenter",z),T.removeEventListener("mouseleave",te)}},[pe,o,s,Oe,ke]);let En=Bt(null);return cn(()=>{if(pe)return;let T=En.current;if(!T)return;let z=T.querySelector("[data-popmelt-logo]"),te=()=>{T.style.opacity="1",!o&&z&&(z.style.fill="#000"),B==null||B()},he=()=>{T.style.opacity=o?"1":"0.5",!o&&z&&(z.style.fill="none")};return T.addEventListener("mouseenter",te),T.addEventListener("mouseleave",he),()=>{T.removeEventListener("mouseenter",te),T.removeEventListener("mouseleave",he)}},[pe,o,B]),pe?Ct($r,{children:[xe("style",{children:`
|
|
11
11
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
12
12
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
13
|
-
`}),
|
|
13
|
+
`}),xe("div",{id:"devtools-scrim",style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.06)",zIndex:9997,pointerEvents:"none"}}),!R&&($==="model"||e.activeTool==="model")&&xe(hc,{bridgeUrl:A,selectedComponent:_,hoveredComponent:ie,onComponentHover:oe,onSpacingTokenHover:Y,onModifySpacingToken:K,onDeleteSpacingToken:H,modelRefreshKey:ee,onComponentAdded:k,onComponentRemoved:Ae,onSynthesizeRules:X,isSynthesizing:ge,snapPosition:Q,onMouseEnter:()=>{vt(),N.current&&(clearTimeout(N.current),N.current=null)},onMouseLeave:e.activeTool==="model"?void 0:ke}),$&&$!=="model"&&($==="provider"||xc[$])&&(()=>{let T=$==="provider"?mn:xc[$];return Ct("div",{ref:ye,style:f(h(f(h(f({},Wa(Q,Ee.w,Ee.h)),{width:300,backgroundColor:"#eaeaea"}),wo),{boxSizing:"content-box",zIndex:10001,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:12,color:"#1f2937",padding:12}),$!=="collapse"&&$!=="counter"?{pointerEvents:"none"}:{}),children:[$==="collapse"&&xe("div",{title:"Restart bridge",onClick:()=>{xa(A)},style:{marginBottom:10,cursor:"pointer",width:"fit-content"},children:xe("svg",{width:"48",height:"48",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:xe("path",{d:"M11.1406 31.2559C11.2407 31.3875 11.351 31.5132 11.4697 31.6338L3.10449 40H2.39746L11.1406 31.2559ZM8.05371 40H7.34668L14.5498 32.7959C14.8554 32.7706 15.1541 32.7063 15.4414 32.6113L8.05371 40ZM18.2197 34.0762C18.3788 34.1569 18.5445 34.2272 18.7168 34.2861L13.0039 40H12.2969L18.2197 34.0762ZM17.9531 40H17.2461L26.1338 31.1113C26.438 31.0829 26.7427 31.0148 27.0439 30.9082L17.9531 40ZM40 22.9023L22.9033 40H22.1963L40 22.1953V22.9023ZM40 27.8525L27.8525 40H27.1455L40 27.1455V27.8525ZM40 32.8027L32.8027 40H32.0957L40 32.0957V32.8027ZM40 37.752L37.752 40H37.0449L40 37.0449V37.752ZM9.06543 28.3809C9.25255 28.4332 9.45183 28.4715 9.66504 28.4883L0 38.1543V37.4473L9.06543 28.3809ZM6.59375 25.9023C6.65822 26.0626 6.73171 26.2263 6.81445 26.3896L0 33.2041V32.4971L6.59375 25.9023ZM20.25 8.00293H20.249C21.5098 8.0286 22.7219 8.25094 23.8584 8.63672L23.8604 8.63574C23.8961 8.64787 23.9312 8.66145 23.9668 8.67383C24.0611 8.70686 24.1548 8.74106 24.248 8.77637C24.2915 8.79273 24.3357 8.80727 24.3789 8.82422L24.376 8.82617C27.6145 10.0955 30.1646 12.7301 31.3213 16.0234L31.3232 16.0225C31.3327 16.0493 31.3404 16.0766 31.3496 16.1035C31.7691 17.3256 32 18.6356 32 20C32 20.8726 31.9366 21.6706 31.7598 22.4902L31.7197 22.6328C31.6412 23.0066 31.5136 23.6108 31.3408 24.2217L31.3398 24.2246C31.2967 24.377 31.251 24.5299 31.2021 24.6797C30.9215 25.5403 30.5473 26.2998 30.0879 26.2998C29.7613 26.2996 29.5995 25.9674 29.4316 25.6221C29.2501 25.2487 29.0614 24.8605 28.6484 24.8604C27.8532 24.8604 27.2081 25.5046 27.208 26.2998V27.0771C27.2079 27.6079 26.9661 28.112 26.5205 28.4004C25.9146 28.7925 25.2357 28.6462 24.7959 28.2061L24.7949 28.208C24.7897 28.2028 24.7854 28.1967 24.7803 28.1914C24.7654 28.1761 24.7507 28.1606 24.7363 28.1445C24.7105 28.1156 24.6858 28.0857 24.6621 28.0547C24.6461 28.0339 24.6302 28.013 24.6152 27.9912C24.5931 27.9591 24.5726 27.9257 24.5527 27.8916C24.5392 27.8685 24.5261 27.8452 24.5137 27.8213C24.5093 27.8128 24.5043 27.8045 24.5 27.7959L24.501 27.7939C24.3932 27.5763 24.3282 27.3276 24.3281 27.0576V26.2998C24.328 25.5993 23.8278 25.0158 23.165 24.8867V24.8877C23.0752 24.8702 22.9826 24.8604 22.8877 24.8604C22.8446 24.8604 22.8019 24.8624 22.7598 24.8662C22.0247 24.9312 21.4483 25.5479 21.4482 26.2998C21.4482 26.9127 21.4608 27.5305 21.4736 28.1494L21.4951 29.3135C21.5 29.7013 21.5015 30.089 21.4971 30.4756C21.4874 31.3103 20.8426 32 20.0078 32C19.1732 31.9998 18.5292 31.3102 18.5195 30.4756C18.5159 30.1613 18.5176 29.8464 18.5205 29.5312V29.5322C18.5212 29.4593 18.5206 29.3864 18.5215 29.3135L18.5303 28.8154V28.8145C18.5343 28.5927 18.5384 28.371 18.543 28.1494C18.5558 27.5305 18.5684 28.1129 18.5684 27.5C18.5684 26.7047 17.9232 26.0596 17.1279 26.0596C16.907 26.0596 16.6978 26.1103 16.5107 26.1992C16.2161 26.3393 15.9767 26.5769 15.834 26.8701C15.8269 26.8846 15.8201 26.8993 15.8135 26.9141C15.7821 26.9845 15.7562 27.0579 15.7363 27.1338C15.7243 27.1798 15.7155 27.2267 15.708 27.2744C15.7012 27.3175 15.6953 27.361 15.6924 27.4053C15.6903 27.4366 15.6885 27.4681 15.6885 27.5V28.7383C15.6883 29.9234 14.4911 30.7248 13.4961 30.0811C13.0505 29.7926 12.8086 29.2886 12.8086 28.7578V26.2998C12.8086 25.9737 12.6984 25.674 12.5156 25.4326C12.4437 25.3381 12.3612 25.2521 12.2686 25.1777V25.1768C12.0219 24.9788 11.709 24.8604 11.3682 24.8604C10.9892 24.8604 10.8622 24.8872 10.7295 25.2295C10.5837 25.6055 10.4302 26 9.92773 26C9.33081 25.9996 8.95963 25.2403 8.71484 24.3799C8.5591 23.8325 8.45907 23.571 8.3623 23.0107C8.3501 22.9401 8.33284 22.8403 8.31738 22.7529C8.12812 21.9466 8.02043 21.1089 8.00293 20.249V20.25L8 20C8 19.8617 8.00317 19.724 8.00781 19.5869C8.00837 19.5703 8.00816 19.5537 8.00879 19.5371L8.00977 19.5352C8.0998 17.1716 8.87444 14.9844 10.1396 13.1631C10.1488 13.1499 10.1587 13.1372 10.168 13.124C12.255 10.1453 15.6582 8.15745 19.5352 8.00977L19.5371 8.00879C19.5537 8.00816 19.5703 8.00837 19.5869 8.00781C19.724 8.00317 19.8617 8 20 8L20.25 8.00293ZM5.72266 22.5303L0 28.2539V27.5469L5.62793 21.918C5.6553 22.1234 5.6868 22.3275 5.72266 22.5303ZM16.2637 26.8398L16.2617 26.8408C16.2784 26.8013 16.2954 26.7627 16.3135 26.7256C16.3203 26.7116 16.3275 26.6982 16.334 26.6855C16.3125 26.7277 16.289 26.7808 16.2637 26.8398ZM40 17.9531L33.9854 23.9668C34.051 23.6832 34.1043 23.4321 34.1445 23.2412L34.1641 23.1748L34.1865 23.0967L34.1963 23.0488L40 17.2461V17.9531ZM5.87012 16.7266C5.80321 17.0165 5.74649 17.3101 5.69727 17.6064L0 23.3047V22.5977L5.87012 16.7266ZM40 13.0039L34.4297 18.5732C34.409 18.3615 34.3832 18.1513 34.3535 17.9424L40 12.2969V13.0039ZM0 18.3555V17.6484L17.6484 0H18.3555L0 18.3555ZM40 8.05371L33.458 14.5947C33.3909 14.4277 33.3202 14.2625 33.2471 14.0986L40 7.34668V8.05371ZM0 13.4053V12.6982L12.6992 0H13.4062L0 13.4053ZM40 3.10352L31.6865 11.416C31.5868 11.2805 31.4851 11.1465 31.3809 11.0146L40 2.39648V3.10352ZM29.2881 8.86523C29.1595 8.75783 29.0288 8.65278 28.8965 8.5498L37.4473 0H38.1543L29.2881 8.86523ZM0 8.45508V7.74805L7.74805 0H8.45508L0 8.45508ZM26.2783 6.92578C26.1183 6.84878 25.9562 6.77534 25.793 6.7041L32.498 0H33.2051L26.2783 6.92578ZM17.6064 5.69727C17.3101 5.74649 17.0165 5.80321 16.7266 5.87012L22.5977 0H23.3047L17.6064 5.69727ZM22.5322 5.7207C22.3295 5.685 22.1254 5.65316 21.9199 5.62598L27.5469 0H28.2539L22.5322 5.7207ZM0 3.50586V2.79883L2.79883 0H3.50586L0 3.50586Z",fill:"currentColor"})})}),Ct("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[xe("span",{children:T.name}),T.keys[0]&&xe("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:T.keys[0].key})]}),xe("div",{style:{color:"#6b7280",lineHeight:1.5,marginBottom:$==="collapse"?0:10},children:T.desc.split(`
|
|
14
14
|
|
|
15
|
-
`).map((X,re)=>Se("p",{style:{margin:0,marginTop:re>0?8:0},children:X},re))}),D.usage.map((X,re)=>Et("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[Se("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),Se("span",{children:X})]},re)),Pe==="collapse"&&P&&Object.keys(P).length>0&&(()=>{let X=Object.entries(P).filter(([,K])=>K.found&&!K.disabled).map(([K])=>K.charAt(0).toUpperCase()+K.slice(1)),re=Object.entries(P).filter(([,K])=>!K.found).map(([K])=>K);if(X.length===0&&re.length===0)return null;let we=re.map(K=>K.charAt(0).toUpperCase()+K.slice(1));return Et("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[Se("span",{style:{width:6,height:6,borderRadius:"50%",backgroundColor:X.length>0?"#22c55e":"rgba(0,0,0,0.2)",flexShrink:0}}),X.length>0?Et("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[Et("span",{children:["Registry available in ",X.join(", "),M&&" \u2014 restart CLI to activate"]}),re.length>0&&G&&!M&&Et("button",{type:"button",onClick:K=>{K.stopPropagation(),G()},style:{border:"none",background:"transparent",color:"#3b82f6",fontSize:10,fontWeight:500,fontFamily:"inherit",padding:0,cursor:"pointer",pointerEvents:"auto",textDecoration:"underline",textUnderlineOffset:2},children:["+ ",we.join(", ")]})]}):re.length>0&&G?Et("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[Se("span",{children:"Connect Popmelt MCP"}),Se("button",{type:"button",onClick:K=>{K.stopPropagation(),G()},style:{border:"none",background:"#1f2937",color:"#fff",fontSize:10,fontWeight:600,fontFamily:"inherit",padding:"2px 8px",cursor:"pointer",pointerEvents:"auto"},children:"Connect"})]}):null]})})(),D.keys.length>1&&Se("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:D.keys.slice(1).map((X,re)=>Et("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:X.accent?"#fff":"#6b7280"},children:[Se("code",{style:{fontSize:10,backgroundColor:X.accent?e.activeColor:"rgba(0,0,0,0.06)",color:X.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:X.key}),Se("span",{style:{color:X.accent?e.activeColor:void 0,fontWeight:X.accent?600:void 0},children:X.desc})]},re))}),Pe==="counter"&&Nt.length>0&&(()=>{let X=Se("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:Se("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Active"})}),re=new Map;for(let Ee of Nt){let Te=Ee.pathname||Bt;re.has(Te)||re.set(Te,[]),re.get(Te).push(Ee)}let we=[...re.entries()],K=we.length>1;return Et("div",{children:[X,Se("div",{style:{maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:we.map(([Ee,Te])=>Se("div",{style:{marginBottom:K?4:0},children:Te.map(Le=>{var Ge,Xe,mt,Ze;let v=Le.annotations.find(rt=>rt.type==="text"&&rt.text),B=(v==null?void 0:v.text)||`[${(Xe=(Ge=Le.annotations[0])==null?void 0:Ge.type)!=null?Xe:"annotation"}]`,ee=e.selectedAnnotationIds.includes(Le.id),le=Nt.indexOf(Le),Me=le+1,ge=(Ze=(mt=Le.annotations[0])==null?void 0:mt.color)!=null?Ze:e.activeColor;return Et("div",{onClick:()=>{var dt;if(!(!Le.pathname||Le.pathname===Bt)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:Le.id,pathname:Le.pathname})),window.location.href=Le.pathname;return}if(rn(le),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:Le.id}}),C){let ut=(dt=Le.annotations.find(ht=>ht.threadId))==null?void 0:dt.threadId;ut&&C(ut)}nt.current=!1,Tt(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:rt=>{let dt=rt.currentTarget.querySelector("[data-route-badge]");dt&&(dt.style.backgroundColor=ge,dt.style.color="#fff")},onMouseLeave:rt=>{if(ee)return;let dt=rt.currentTarget.querySelector("[data-route-badge]");dt&&(dt.style.backgroundColor="rgba(0,0,0,0.06)",dt.style.color="#6b7280")},children:[Et("code",{"data-route-badge":!0,style:{fontSize:10,color:ee?"#fff":"#6b7280",backgroundColor:ee?ge:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[Me,". ",K?Ee:""]}),Se("span",{style:{fontSize:11,color:ee?"#1f2937":"#6b7280",fontWeight:ee?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:B})]},Le.id)})},Ee))})]})})(),Pe==="counter"&&(()=>{let X=new Set(Nt.flatMap(K=>K.annotations.map(Ee=>Ee.threadId).filter(Boolean))),re=h.filter(K=>!X.has(K.id));if(re.length===0)return null;let we=K=>{let Ee=Math.floor((Date.now()-K)/1e3);if(Ee<60)return"now";let Te=Math.floor(Ee/60);if(Te<60)return`${Te}m`;let Le=Math.floor(Te/60);return Le<24?`${Le}h`:`${Math.floor(Le/24)}d`};return Et("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:[Se("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Recent"}),re.map(K=>Et("div",{onClick:()=>{let Ee=K.elementIdentifiers[0];if(Ee){let Te=Ee.indexOf(":"),Le=Te>0&&Ee[0]==="/",v=Le?Ee.slice(0,Te):void 0,B=Le?Ee.slice(Te+1):Ee;if(!(!v||v===Bt)){sessionStorage.setItem("popmelt-pending-thread",JSON.stringify({threadId:K.id,selector:B,preview:K.preview})),window.location.href=v;return}try{let le=document.querySelector(B);if(le){let Me=le.getBoundingClientRect(),ge=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:ge,point:{x:Me.left+Me.width,y:Me.top},text:K.preview,linkedSelector:B,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[ge],threadId:K.id}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[ge],status:"resolved"}})}}catch(le){}}C&&C(K.id),nt.current=!1,Tt(null)},style:{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:8,padding:"2px 0",cursor:"pointer",color:"#6b7280",fontSize:11},onMouseEnter:Ee=>{Ee.currentTarget.style.color="#1f2937"},onMouseLeave:Ee=>{Ee.currentTarget.style.color="#6b7280"},children:[Se("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:K.preview}),Se("span",{style:{flexShrink:0,fontSize:10,color:"#9ca3af"},children:we(K.createdAt)})]},K.id))]})})()]})})(),Et("div",{ref:D=>{be&&(be.current=D)},id:"devtools-toolbar",style:wn,onMouseEnter:pe,onMouseMove:Ye,children:[eo,Et("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[Se("span",{onMouseEnter:()=>de("inspector"),onMouseLeave:ue,children:Se(yo,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>Ct("inspector"),children:Se(lf,{size:20,strokeWidth:1.5})})}),Se("span",{onMouseEnter:()=>de("hand"),onMouseLeave:ue,children:Se(yo,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>Ct("hand"),children:Et("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[Se(sf,{size:20,strokeWidth:1.5}),e.styleModifications.filter(D=>!D.captured).length>0&&Se("div",{style:{position:"absolute",top:-7,right:-9,minWidth:14,height:14,borderRadius:0,backgroundColor:e.activeColor,color:"#fff",fontSize:9,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 2px",lineHeight:1},children:e.styleModifications.filter(D=>!D.captured).length})]})})}),(()=>{let D=No[Ce],X=D.icon,re=e.isAnnotating&&ff.has(e.activeTool);return Se("span",{onMouseEnter:()=>de(D.type),onMouseLeave:ue,children:Et("div",{style:{display:"flex",alignItems:"center",gap:0},children:[Se(yo,{active:re,siblingActive:e.isAnnotating,onClick:()=>Ct(D.type),children:Se(X,{size:20,strokeWidth:1.5})}),Se("button",{type:"button",onClick:()=>{let we=(Ce+1)%No.length;oe(we),Ct(No[we].type)},title:"Cycle shape tool",style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2,width:12,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 2px",opacity:e.isAnnotating&&!re?.5:1,transition:"opacity 150ms ease"},children:No.map((we,K)=>Se("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:K===Ce?so.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},K))})]})})})(),hf.map(({type:D,icon:X,label:re,shortcut:we})=>Se("span",{onMouseEnter:()=>de(D),onMouseLeave:ue,children:Se(yo,{active:e.isAnnotating&&e.activeTool===D,siblingActive:e.isAnnotating,onClick:()=>Ct(D),children:Se(X,{size:20,strokeWidth:1.5})})},D)),Se("span",{onMouseEnter:()=>de("model"),onMouseLeave:ue,children:Se(yo,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>Ct("model"),children:Se(rf,{size:17,strokeWidth:1.5})})})]}),Se(Ua,{}),Et("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(Nt.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(D=>!D.captured).length>0)&&(()=>{var K;let D=yt!==null&&yt<Nt.length?Nt[yt]:null,X=e.annotations.length>0&&e.annotations.every(Ee=>Ee.status&&Ee.status!=="pending"),re=yt!==null?(K=D==null?void 0:D.annotations.some(Ee=>Ee.status&&Ee.status!=="pending"))!=null?K:!1:X,we=`oklch(0.628 0.258 ${on})`;return Se("span",{onMouseEnter:()=>de("counter"),onMouseLeave:ue,children:Se("button",{ref:St,type:"button",onClick:()=>{if(Qt.current){Qt.current=!1;return}Qn()},onMouseDown:Mn,onMouseUp:Sn,onMouseLeave:Sn,title:"",style:{display:"flex",alignItems:"center",justifyContent:"center",gap:4,minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:re&&yt===null?"#999999":we,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let Ee=Nt.length+e.styleModifications.length+e.spacingTokenChanges.filter(Le=>!Le.captured).length;if(yt!==null)return Et(Tr,{children:[yt+1,Et("span",{style:{opacity:.4,display:"flex",gap:4},children:[Se("span",{children:"/"}),Se("span",{children:Ee})]})]});let Te=Dt.length+e.styleModifications.length+e.spacingTokenChanges.filter(Le=>!Le.captured).length;return Ee>Te?Et(Tr,{children:[Te,Et("span",{style:{opacity:.4,display:"flex",gap:4},children:[Se("span",{children:"/"}),Se("span",{children:Ee})]})]}):Ee})()})})})(),(e.annotations.length>0||e.styleModifications.length>0)&&Se("span",{onMouseEnter:()=>de("clear"),onMouseLeave:ue,children:Se(yo,{siblingActive:e.isAnnotating,onClick:$t,title:"Clear all (\u2318\u232B)",children:Se(uf,{size:17,strokeWidth:1.5})})}),d&&Et(Tr,{children:[Se("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),Se("span",{onMouseEnter:()=>de("provider"),onMouseLeave:ue,style:{display:"contents"},children:Et("div",{style:{display:"flex",alignItems:"center",gap:0},children:[Se(yo,{onClick:()=>d(a==="claude"?"codex":"claude"),children:a==="claude"?Se(xs,{}):Se(vs,{})}),Et("button",{type:"button",onClick:()=>{let D=(u+1)%p;w==null||w(D)},style:{display:"flex",alignItems:"center",gap:6,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 4px 0 0",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:10,fontWeight:500,color:so.iconDefault,whiteSpace:"nowrap"},children:[Se("span",{children:g}),Se("span",{style:{display:"flex",flexDirection:"column",gap:2},children:Array.from({length:p},(D,X)=>Se("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:X===u?so.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},X))})]})]})})]}),Se("div",{ref:vo,style:{display:"inline-flex",cursor:"pointer"},children:Se("button",{type:"button",onClick:Jt,title:"Collapse (\u2318\u2318)",style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,border:"none",background:"none",padding:0,cursor:"inherit"},children:Se("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:xo,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:Se("path",{d:"M20.25 8.00293H20.249C21.5098 8.0286 22.7219 8.25094 23.8584 8.63672L23.8604 8.63574C23.8961 8.64787 23.9312 8.66145 23.9668 8.67383C24.0611 8.70686 24.1548 8.74106 24.248 8.77637C24.2915 8.79273 24.3357 8.80727 24.3789 8.82422L24.376 8.82617C27.6145 10.0955 30.1646 12.7301 31.3213 16.0234L31.3232 16.0225C31.3327 16.0493 31.3404 16.0766 31.3496 16.1035C31.7691 17.3256 32 18.6356 32 20C32 20.8726 31.9366 21.6706 31.7598 22.4902L31.7197 22.6328C31.6412 23.0066 31.5136 23.6108 31.3408 24.2217L31.3398 24.2246C31.2967 24.377 31.251 24.5299 31.2021 24.6797C30.9215 25.5403 30.5473 26.2998 30.0879 26.2998C29.7613 26.2996 29.5995 25.9674 29.4316 25.6221C29.2501 25.2487 29.0614 24.8605 28.6484 24.8604C27.8532 24.8604 27.2081 25.5046 27.208 26.2998V27.0771C27.2079 27.6079 26.9661 28.112 26.5205 28.4004C25.9146 28.7925 25.2357 28.6462 24.7959 28.2061L24.7949 28.208C24.7897 28.2028 24.7854 28.1967 24.7803 28.1914C24.7654 28.1761 24.7507 28.1606 24.7363 28.1445C24.7105 28.1156 24.6858 28.0857 24.6621 28.0547C24.6461 28.0339 24.6302 28.013 24.6152 27.9912C24.5931 27.9591 24.5726 27.9257 24.5527 27.8916C24.5392 27.8685 24.5261 27.8452 24.5137 27.8213C24.5093 27.8128 24.5043 27.8045 24.5 27.7959L24.501 27.7939C24.3932 27.5763 24.3282 27.3276 24.3281 27.0576V26.2998C24.328 25.5993 23.8278 25.0158 23.165 24.8867V24.8877C23.0752 24.8702 22.9826 24.8604 22.8877 24.8604C22.8446 24.8604 22.8019 24.8624 22.7598 24.8662C22.0247 24.9312 21.4483 25.5479 21.4482 26.2998C21.4482 26.9127 21.4608 27.5305 21.4736 28.1494L21.4951 29.3135C21.5 29.7013 21.5015 30.089 21.4971 30.4756C21.4874 31.3103 20.8426 32 20.0078 32C19.1732 31.9998 18.5292 31.3102 18.5195 30.4756C18.5159 30.1613 18.5176 29.8464 18.5205 29.5312V29.5322C18.5212 29.4593 18.5206 29.3864 18.5215 29.3135L18.5303 28.8154V28.8145C18.5343 28.5927 18.5384 28.371 18.543 28.1494C18.5558 27.5305 18.5684 28.1129 18.5684 27.5C18.5684 26.7047 17.9232 26.0596 17.1279 26.0596C16.907 26.0596 16.6978 26.1103 16.5107 26.1992C16.2161 26.3393 15.9767 26.5769 15.834 26.8701C15.8269 26.8846 15.8201 26.8993 15.8135 26.9141C15.7821 26.9845 15.7562 27.0579 15.7363 27.1338C15.7243 27.1798 15.7155 27.2267 15.708 27.2744C15.7012 27.3175 15.6953 27.361 15.6924 27.4053C15.6903 27.4366 15.6885 27.4681 15.6885 27.5V28.7383C15.6883 29.9234 14.4911 30.7248 13.4961 30.0811C13.0505 29.7926 12.8086 29.2886 12.8086 28.7578V26.2998C12.8086 25.9737 12.6984 25.674 12.5156 25.4326C12.4437 25.3381 12.3612 25.2521 12.2686 25.1777V25.1768C12.0219 24.9788 11.709 24.8604 11.3682 24.8604C10.9892 24.8604 10.8622 24.8872 10.7295 25.2295C10.5837 25.6055 10.4302 26 9.92773 26C9.33081 25.9996 8.95963 25.2403 8.71484 24.3799C8.5591 23.8325 8.45907 23.571 8.3623 23.0107C8.3501 22.9401 8.33284 22.8403 8.31738 22.7529C8.12812 21.9466 8.02043 21.1089 8.00293 20.249V20.25L8 20C8 19.8617 8.00317 19.724 8.00781 19.5869C8.00837 19.5703 8.00816 19.5537 8.00879 19.5371L8.00977 19.5352C8.0998 17.1716 8.87444 14.9844 10.1396 13.1631C10.1488 13.1499 10.1587 13.1372 10.168 13.124C12.255 10.1453 15.6582 8.15745 19.5352 8.00977L19.5371 8.00879C19.5537 8.00816 19.5703 8.00837 19.5869 8.00781C19.724 8.00317 19.8617 8 20 8L20.25 8.00293Z"})})})})]})]})]}):Et(Tr,{children:[Se("style",{children:`
|
|
15
|
+
`).map((z,te)=>xe("p",{style:{margin:0,marginTop:te>0?8:0},children:z},te))}),T.usage.map((z,te)=>Ct("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[xe("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),xe("span",{children:z})]},te)),$==="collapse"&&q&&Ct("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8},children:[xe("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:6,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Position"}),xe("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:3,width:"fit-content"},children:Ja.map(z=>{let te=z===Q;return xe("button",{type:"button",onClick:()=>{de(null),Te.current=!1,vt(),q(z)},title:z,style:{width:24,height:16,border:"none",cursor:"pointer",padding:0,backgroundColor:te?"#1f2937":"rgba(0,0,0,0.08)",transition:"background-color 100ms ease"},onMouseEnter:he=>{te||(he.currentTarget.style.backgroundColor="rgba(0,0,0,0.15)")},onMouseLeave:he=>{te||(he.currentTarget.style.backgroundColor="rgba(0,0,0,0.08)")}},z)})})]}),$==="collapse"&&C&&Object.keys(C).length>0&&(()=>{let z=Object.entries(C).filter(([,se])=>se.found&&!se.disabled).map(([se])=>se.charAt(0).toUpperCase()+se.slice(1)),te=Object.entries(C).filter(([,se])=>!se.found).map(([se])=>se);if(z.length===0&&te.length===0)return null;let he=te.map(se=>se.charAt(0).toUpperCase()+se.slice(1));return Ct("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[xe("span",{style:{width:6,height:6,borderRadius:"50%",backgroundColor:z.length>0?"#22c55e":"rgba(0,0,0,0.2)",flexShrink:0}}),z.length>0?Ct("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[Ct("span",{children:["Registry available in ",z.join(", "),L&&" \u2014 restart CLI to activate"]}),te.length>0&&G&&!L&&Ct("button",{type:"button",onClick:se=>{se.stopPropagation(),G()},style:{border:"none",background:"transparent",color:"#3b82f6",fontSize:10,fontWeight:500,fontFamily:"inherit",padding:0,cursor:"pointer",pointerEvents:"auto",textDecoration:"underline",textUnderlineOffset:2},children:["+ ",he.join(", ")]})]}):te.length>0&&G?Ct("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[xe("span",{children:"Connect Popmelt MCP"}),xe("button",{type:"button",onClick:se=>{se.stopPropagation(),G()},style:{border:"none",background:"#1f2937",color:"#fff",fontSize:10,fontWeight:600,fontFamily:"inherit",padding:"2px 8px",cursor:"pointer",pointerEvents:"auto"},children:"Connect"})]}):null]})})(),T.keys.length>1&&xe("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:T.keys.slice(1).map((z,te)=>Ct("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:z.accent?"#fff":"#6b7280"},children:[xe("code",{style:{fontSize:10,backgroundColor:z.accent?e.activeColor:"rgba(0,0,0,0.06)",color:z.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:z.key}),xe("span",{style:{color:z.accent?e.activeColor:void 0,fontWeight:z.accent?600:void 0},children:z.desc})]},te))}),$==="counter"&&Ft.length>0&&(()=>{let z=xe("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:xe("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Active"})}),te=new Map;for(let ve of Ft){let Fe=ve.pathname||vn;te.has(Fe)||te.set(Fe,[]),te.get(Fe).push(ve)}let he=[...te.entries()],se=he.length>1;return Ct("div",{children:[z,xe("div",{style:{maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:he.map(([ve,Fe])=>xe("div",{style:{marginBottom:se?4:0},children:Fe.map($e=>{var Le,Be,Xe,Ye;let He=$e.annotations.find(mt=>mt.type==="text"&&mt.text),Lt=(He==null?void 0:He.text)||`[${(Be=(Le=$e.annotations[0])==null?void 0:Le.type)!=null?Be:"annotation"}]`,x=e.selectedAnnotationIds.includes($e.id),P=Ft.indexOf($e),ae=P+1,J=(Ye=(Xe=$e.annotations[0])==null?void 0:Xe.color)!=null?Ye:e.activeColor;return Ct("div",{onClick:()=>{var nt;if(!(!$e.pathname||$e.pathname===vn)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:$e.id,pathname:$e.pathname})),window.location.href=$e.pathname;return}if(at(P),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:$e.id}}),v){let ut=(nt=$e.annotations.find(St=>St.threadId))==null?void 0:nt.threadId;ut&&v(ut)}Te.current=!1,de(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:mt=>{let nt=mt.currentTarget.querySelector("[data-route-badge]");nt&&(nt.style.backgroundColor=J,nt.style.color="#fff")},onMouseLeave:mt=>{if(x)return;let nt=mt.currentTarget.querySelector("[data-route-badge]");nt&&(nt.style.backgroundColor="rgba(0,0,0,0.06)",nt.style.color="#6b7280")},children:[Ct("code",{"data-route-badge":!0,style:{fontSize:10,color:x?"#fff":"#6b7280",backgroundColor:x?J:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[ae,". ",se?ve:""]}),xe("span",{style:{fontSize:11,color:x?"#1f2937":"#6b7280",fontWeight:x?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Lt})]},$e.id)})},ve))})]})})(),$==="counter"&&(()=>{let z=new Set(Ft.flatMap(se=>se.annotations.map(ve=>ve.threadId).filter(Boolean))),te=re.filter(se=>!z.has(se.id));if(te.length===0)return null;let he=se=>{let ve=Math.floor((Date.now()-se)/1e3);if(ve<60)return"now";let Fe=Math.floor(ve/60);if(Fe<60)return`${Fe}m`;let $e=Math.floor(Fe/60);return $e<24?`${$e}h`:`${Math.floor($e/24)}d`};return Ct("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:[xe("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Recent"}),te.map(se=>Ct("div",{onClick:()=>{let ve=se.elementIdentifiers[0];if(ve){let Fe=ve.indexOf(":"),$e=Fe>0&&ve[0]==="/",He=$e?ve.slice(0,Fe):void 0,Lt=$e?ve.slice(Fe+1):ve;if(!(!He||He===vn)){sessionStorage.setItem("popmelt-pending-thread",JSON.stringify({threadId:se.id,selector:Lt,preview:se.preview})),window.location.href=He;return}try{let P=document.querySelector(Lt);if(P){let ae=P.getBoundingClientRect(),J=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:J,point:{x:ae.left+ae.width,y:ae.top},text:se.preview,linkedSelector:Lt,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[J],threadId:se.id}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[J],status:"resolved"}})}}catch(P){}}v&&v(se.id),Te.current=!1,de(null)},style:{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:8,padding:"2px 0",cursor:"pointer",color:"#6b7280",fontSize:11},onMouseEnter:ve=>{ve.currentTarget.style.color="#1f2937"},onMouseLeave:ve=>{ve.currentTarget.style.color="#6b7280"},children:[xe("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:se.preview}),xe("span",{style:{flexShrink:0,fontSize:10,color:"#9ca3af"},children:he(se.createdAt)})]},se.id))]})})()]})})(),Ct("div",{ref:T=>{ce&&(ce.current=T)},id:"devtools-toolbar",style:co,onMouseEnter:B,onMouseMove:ht,children:[po,Ct("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[xe("span",{onMouseEnter:()=>Oe("inspector"),onMouseLeave:ke,children:xe(ko,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>Rt("inspector"),children:xe(Mf,{size:20,strokeWidth:1.5})})}),xe("span",{onMouseEnter:()=>Oe("hand"),onMouseLeave:ke,children:xe(ko,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>Rt("hand"),children:Ct("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[xe(Tf,{size:20,strokeWidth:1.5}),e.styleModifications.filter(T=>!T.captured).length>0&&xe("div",{style:{position:"absolute",top:-7,right:-9,minWidth:14,height:14,borderRadius:0,backgroundColor:e.activeColor,color:"#fff",fontSize:9,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 2px",lineHeight:1},children:e.styleModifications.filter(T=>!T.captured).length})]})})}),(()=>{let T=Vo[Re],z=T.icon,te=e.isAnnotating&&Of.has(e.activeTool);return xe("span",{onMouseEnter:()=>Oe(T.type),onMouseLeave:ke,children:Ct("div",{style:{display:"flex",alignItems:"center",gap:0},children:[xe(ko,{active:te,siblingActive:e.isAnnotating,onClick:()=>Rt(T.type),children:xe(z,{size:20,strokeWidth:1.5})}),xe("button",{type:"button",onClick:()=>{let he=(Re+1)%Vo.length;Me(he),Rt(Vo[he].type)},title:"Cycle shape tool",style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2,width:12,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 2px",opacity:e.isAnnotating&&!te?.5:1,transition:"opacity 150ms ease"},children:Vo.map((he,se)=>xe("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:se===Re?yo.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},se))})]})})})(),_f.map(({type:T,icon:z,label:te,shortcut:he})=>xe("span",{onMouseEnter:()=>Oe(T),onMouseLeave:ke,children:xe(ko,{active:e.isAnnotating&&e.activeTool===T,siblingActive:e.isAnnotating,onClick:()=>Rt(T),children:xe(z,{size:20,strokeWidth:1.5})})},T)),xe("span",{onMouseEnter:()=>Oe("model"),onMouseLeave:ke,children:xe(ko,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>Rt("model"),children:xe(kf,{size:17,strokeWidth:1.5})})})]}),xe(yc,{}),Ct("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(Ft.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(T=>!T.captured).length>0)&&(()=>{var se;let T=Dt!==null&&Dt<Ft.length?Ft[Dt]:null,z=e.annotations.length>0&&e.annotations.every(ve=>ve.status&&ve.status!=="pending"),te=Dt!==null?(se=T==null?void 0:T.annotations.some(ve=>ve.status&&ve.status!=="pending"))!=null?se:!1:z,he=`oklch(0.628 0.258 ${Ue})`;return xe("span",{onMouseEnter:()=>Oe("counter"),onMouseLeave:ke,children:xe("button",{ref:An,type:"button",onClick:()=>{if(Cn.current){Cn.current=!1;return}Wt()},onMouseDown:Ko,onMouseUp:Jt,onMouseLeave:Jt,title:"",style:{display:"flex",alignItems:"center",justifyContent:"center",gap:4,minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:te&&Dt===null?"#999999":he,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let ve=Ft.length+e.styleModifications.length+e.spacingTokenChanges.filter($e=>!$e.captured).length;if(Dt!==null)return Ct($r,{children:[Dt+1,Ct("span",{style:{opacity:.4,display:"flex",gap:4},children:[xe("span",{children:"/"}),xe("span",{children:ve})]})]});let Fe=On.length+e.styleModifications.length+e.spacingTokenChanges.filter($e=>!$e.captured).length;return ve>Fe?Ct($r,{children:[Fe,Ct("span",{style:{opacity:.4,display:"flex",gap:4},children:[xe("span",{children:"/"}),xe("span",{children:ve})]})]}):ve})()})})})(),(e.annotations.length>0||e.styleModifications.length>0)&&xe("span",{onMouseEnter:()=>Oe("clear"),onMouseLeave:ke,children:xe(ko,{siblingActive:e.isAnnotating,onClick:Ie,title:"Clear all (\u2318\u232B)",children:xe(Af,{size:17,strokeWidth:1.5})})}),d&&Ct($r,{children:[xe("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),xe("span",{onMouseEnter:()=>Oe("provider"),onMouseLeave:ke,style:{display:"contents"},children:Ct("div",{style:{display:"flex",alignItems:"center",gap:0},children:[xe(ko,{onClick:()=>d(l==="claude"?"codex":"claude"),children:l==="claude"?xe(As,{}):xe(Ps,{})}),Ct("button",{type:"button",onClick:()=>{let T=(p+1)%u;b==null||b(T)},style:{display:"flex",alignItems:"center",gap:6,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 4px 0 0",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:10,fontWeight:500,color:yo.iconDefault,whiteSpace:"nowrap"},children:[xe("span",{children:g}),xe("span",{style:{display:"flex",flexDirection:"column",gap:2},children:Array.from({length:u},(T,z)=>xe("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:z===p?yo.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},z))})]})]})})]}),xe("div",{ref:kt,style:{display:"inline-flex",cursor:"pointer"},children:xe("button",{type:"button",onClick:le,title:"Collapse (\u2318\u2318)",style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,border:"none",background:"none",padding:0,cursor:"inherit"},children:xe("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:Zo,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:xe("path",{d:"M20.25 8.00293H20.249C21.5098 8.0286 22.7219 8.25094 23.8584 8.63672L23.8604 8.63574C23.8961 8.64787 23.9312 8.66145 23.9668 8.67383C24.0611 8.70686 24.1548 8.74106 24.248 8.77637C24.2915 8.79273 24.3357 8.80727 24.3789 8.82422L24.376 8.82617C27.6145 10.0955 30.1646 12.7301 31.3213 16.0234L31.3232 16.0225C31.3327 16.0493 31.3404 16.0766 31.3496 16.1035C31.7691 17.3256 32 18.6356 32 20C32 20.8726 31.9366 21.6706 31.7598 22.4902L31.7197 22.6328C31.6412 23.0066 31.5136 23.6108 31.3408 24.2217L31.3398 24.2246C31.2967 24.377 31.251 24.5299 31.2021 24.6797C30.9215 25.5403 30.5473 26.2998 30.0879 26.2998C29.7613 26.2996 29.5995 25.9674 29.4316 25.6221C29.2501 25.2487 29.0614 24.8605 28.6484 24.8604C27.8532 24.8604 27.2081 25.5046 27.208 26.2998V27.0771C27.2079 27.6079 26.9661 28.112 26.5205 28.4004C25.9146 28.7925 25.2357 28.6462 24.7959 28.2061L24.7949 28.208C24.7897 28.2028 24.7854 28.1967 24.7803 28.1914C24.7654 28.1761 24.7507 28.1606 24.7363 28.1445C24.7105 28.1156 24.6858 28.0857 24.6621 28.0547C24.6461 28.0339 24.6302 28.013 24.6152 27.9912C24.5931 27.9591 24.5726 27.9257 24.5527 27.8916C24.5392 27.8685 24.5261 27.8452 24.5137 27.8213C24.5093 27.8128 24.5043 27.8045 24.5 27.7959L24.501 27.7939C24.3932 27.5763 24.3282 27.3276 24.3281 27.0576V26.2998C24.328 25.5993 23.8278 25.0158 23.165 24.8867V24.8877C23.0752 24.8702 22.9826 24.8604 22.8877 24.8604C22.8446 24.8604 22.8019 24.8624 22.7598 24.8662C22.0247 24.9312 21.4483 25.5479 21.4482 26.2998C21.4482 26.9127 21.4608 27.5305 21.4736 28.1494L21.4951 29.3135C21.5 29.7013 21.5015 30.089 21.4971 30.4756C21.4874 31.3103 20.8426 32 20.0078 32C19.1732 31.9998 18.5292 31.3102 18.5195 30.4756C18.5159 30.1613 18.5176 29.8464 18.5205 29.5312V29.5322C18.5212 29.4593 18.5206 29.3864 18.5215 29.3135L18.5303 28.8154V28.8145C18.5343 28.5927 18.5384 28.371 18.543 28.1494C18.5558 27.5305 18.5684 28.1129 18.5684 27.5C18.5684 26.7047 17.9232 26.0596 17.1279 26.0596C16.907 26.0596 16.6978 26.1103 16.5107 26.1992C16.2161 26.3393 15.9767 26.5769 15.834 26.8701C15.8269 26.8846 15.8201 26.8993 15.8135 26.9141C15.7821 26.9845 15.7562 27.0579 15.7363 27.1338C15.7243 27.1798 15.7155 27.2267 15.708 27.2744C15.7012 27.3175 15.6953 27.361 15.6924 27.4053C15.6903 27.4366 15.6885 27.4681 15.6885 27.5V28.7383C15.6883 29.9234 14.4911 30.7248 13.4961 30.0811C13.0505 29.7926 12.8086 29.2886 12.8086 28.7578V26.2998C12.8086 25.9737 12.6984 25.674 12.5156 25.4326C12.4437 25.3381 12.3612 25.2521 12.2686 25.1777V25.1768C12.0219 24.9788 11.709 24.8604 11.3682 24.8604C10.9892 24.8604 10.8622 24.8872 10.7295 25.2295C10.5837 25.6055 10.4302 26 9.92773 26C9.33081 25.9996 8.95963 25.2403 8.71484 24.3799C8.5591 23.8325 8.45907 23.571 8.3623 23.0107C8.3501 22.9401 8.33284 22.8403 8.31738 22.7529C8.12812 21.9466 8.02043 21.1089 8.00293 20.249V20.25L8 20C8 19.8617 8.00317 19.724 8.00781 19.5869C8.00837 19.5703 8.00816 19.5537 8.00879 19.5371L8.00977 19.5352C8.0998 17.1716 8.87444 14.9844 10.1396 13.1631C10.1488 13.1499 10.1587 13.1372 10.168 13.124C12.255 10.1453 15.6582 8.15745 19.5352 8.00977L19.5371 8.00879C19.5537 8.00816 19.5703 8.00837 19.5869 8.00781C19.724 8.00317 19.8617 8 20 8L20.25 8.00293Z"})})})})]})]})]}):Ct($r,{children:[xe("style",{children:`
|
|
16
16
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
17
|
-
`}),
|
|
18
|
-
`)[0].trim();return
|
|
17
|
+
`}),Ct("div",{ref:T=>{En.current=T,ce&&(ce.current=T)},id:"devtools-toolbar",style:h(f({},co),{overflow:"visible",opacity:o?1:.5}),children:[po,xe("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,border:"none",background:"none",cursor:"pointer",padding:0},onClick:()=>{Pe(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})},onMouseEnter:()=>s==null?void 0:s(!0),onMouseLeave:()=>s==null?void 0:s(!1),title:"Open annotation toolbar (\u2318\u2318)",children:xe("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:"none",stroke:Zo,strokeWidth:"1",strokeLinejoin:"round",xmlns:"http://www.w3.org/2000/svg",children:xe("path",{d:"M20.25 8.00293H20.249C21.5098 8.0286 22.7219 8.25094 23.8584 8.63672L23.8604 8.63574C23.8961 8.64787 23.9312 8.66145 23.9668 8.67383C24.0611 8.70686 24.1548 8.74106 24.248 8.77637C24.2915 8.79273 24.3357 8.80727 24.3789 8.82422L24.376 8.82617C27.6145 10.0955 30.1646 12.7301 31.3213 16.0234L31.3232 16.0225C31.3327 16.0493 31.3404 16.0766 31.3496 16.1035C31.7691 17.3256 32 18.6356 32 20C32 20.8726 31.9366 21.6706 31.7598 22.4902L31.7197 22.6328C31.6412 23.0066 31.5136 23.6108 31.3408 24.2217L31.3398 24.2246C31.2967 24.377 31.251 24.5299 31.2021 24.6797C30.9215 25.5403 30.5473 26.2998 30.0879 26.2998C29.7613 26.2996 29.5995 25.9674 29.4316 25.6221C29.2501 25.2487 29.0614 24.8605 28.6484 24.8604C27.8532 24.8604 27.2081 25.5046 27.208 26.2998V27.0771C27.2079 27.6079 26.9661 28.112 26.5205 28.4004C25.9146 28.7925 25.2357 28.6462 24.7959 28.2061L24.7949 28.208C24.7897 28.2028 24.7854 28.1967 24.7803 28.1914C24.7654 28.1761 24.7507 28.1606 24.7363 28.1445C24.7105 28.1156 24.6858 28.0857 24.6621 28.0547C24.6461 28.0339 24.6302 28.013 24.6152 27.9912C24.5931 27.9591 24.5726 27.9257 24.5527 27.8916C24.5392 27.8685 24.5261 27.8452 24.5137 27.8213C24.5093 27.8128 24.5043 27.8045 24.5 27.7959L24.501 27.7939C24.3932 27.5763 24.3282 27.3276 24.3281 27.0576V26.2998C24.328 25.5993 23.8278 25.0158 23.165 24.8867V24.8877C23.0752 24.8702 22.9826 24.8604 22.8877 24.8604C22.8446 24.8604 22.8019 24.8624 22.7598 24.8662C22.0247 24.9312 21.4483 25.5479 21.4482 26.2998C21.4482 26.9127 21.4608 27.5305 21.4736 28.1494L21.4951 29.3135C21.5 29.7013 21.5015 30.089 21.4971 30.4756C21.4874 31.3103 20.8426 32 20.0078 32C19.1732 31.9998 18.5292 31.3102 18.5195 30.4756C18.5159 30.1613 18.5176 29.8464 18.5205 29.5312V29.5322C18.5212 29.4593 18.5206 29.3864 18.5215 29.3135L18.5303 28.8154V28.8145C18.5343 28.5927 18.5384 28.371 18.543 28.1494C18.5558 27.5305 18.5684 28.1129 18.5684 27.5C18.5684 26.7047 17.9232 26.0596 17.1279 26.0596C16.907 26.0596 16.6978 26.1103 16.5107 26.1992C16.2161 26.3393 15.9767 26.5769 15.834 26.8701C15.8269 26.8846 15.8201 26.8993 15.8135 26.9141C15.7821 26.9845 15.7562 27.0579 15.7363 27.1338C15.7243 27.1798 15.7155 27.2267 15.708 27.2744C15.7012 27.3175 15.6953 27.361 15.6924 27.4053C15.6903 27.4366 15.6885 27.4681 15.6885 27.5V28.7383C15.6883 29.9234 14.4911 30.7248 13.4961 30.0811C13.0505 29.7926 12.8086 29.2886 12.8086 28.7578V26.2998C12.8086 25.9737 12.6984 25.674 12.5156 25.4326C12.4437 25.3381 12.3612 25.2521 12.2686 25.1777V25.1768C12.0219 24.9788 11.709 24.8604 11.3682 24.8604C10.9892 24.8604 10.8622 24.8872 10.7295 25.2295C10.5837 25.6055 10.4302 26 9.92773 26C9.33081 25.9996 8.95963 25.2403 8.71484 24.3799C8.5591 23.8325 8.45907 23.571 8.3623 23.0107C8.3501 22.9401 8.33284 22.8403 8.31738 22.7529C8.12812 21.9466 8.02043 21.1089 8.00293 20.249V20.25L8 20C8 19.8617 8.00317 19.724 8.00781 19.5869C8.00837 19.5703 8.00816 19.5537 8.00879 19.5371L8.00977 19.5352C8.0998 17.1716 8.87444 14.9844 10.1396 13.1631C10.1488 13.1499 10.1587 13.1372 10.168 13.124C12.255 10.1453 15.6582 8.15745 19.5352 8.00977L19.5371 8.00879C19.5537 8.00816 19.5703 8.00837 19.5869 8.00781C19.724 8.00317 19.8617 8 20 8L20.25 8.00293Z"})})})]})]})}import{useCallback as Ff,useEffect as to,useRef as zr,useState as ki}from"react";import{Fragment as kc,jsx as It,jsxs as Sr}from"react/jsx-runtime";var $f=24,zf=6,Wf=$f-zf,jf=8,Ec=h(f({display:"flex",alignItems:"center",gap:3,padding:0,backgroundColor:"#eaeaea"},wo),{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,whiteSpace:"nowrap",transition:"transform 200ms ease, opacity 200ms ease"});function Gf(e){var a;let t=e.filter(l=>l.type==="tool_use");if(t.length===0)return"Starting\u2026";let n=t[t.length-1],r=String(n.data.tool||""),o=n.data.file?String(n.data.file):null,i=o?(a=o.split("/").pop())!=null?a:o:null,s=n.data.content?String(n.data.content):null;switch(r){case"Read":return i?`Reading ${i}`:"Reading file";case"Edit":return i?`Editing ${i}`:"Editing file";case"Write":return i?`Writing ${i}`:"Writing file";case"Bash":{if(!s)return"Running command";let l=s.split(`
|
|
18
|
+
`)[0].trim();return l.length<=40?l:l.slice(0,37)+"\u2026"}case"Glob":return"Searching files";case"Grep":return"Searching code";default:return r?`Using ${r}`:"Working\u2026"}}function Yf(e){let t=e.replace(/^Error:\s*/i,"");return t.length>40?t.slice(0,37)+"...":t}function Jf(e,t){if(e.some(i=>i.type==="question"&&i.data.jobId===t))return"Has a question";let r=new Set(["Edit","Write"]);return e.some(i=>i.type==="tool_use"&&i.data.jobId===t&&r.has(String(i.data.tool||"")))?"Applied changes":"Replied"}function Uf({color:e}){let[t,n]=ki(0);return to(()=>{let r=setInterval(()=>{n(o=>(o+1)%2)},250);return()=>clearInterval(r)},[]),It("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?Sr(kc,{children:[It("circle",{cx:"7",cy:"7",r:"2"}),It("circle",{cx:"17",cy:"7",r:"2"}),It("circle",{cx:"7",cy:"17",r:"2"}),It("circle",{cx:"17",cy:"17",r:"2"})]}):Sr(kc,{children:[It("circle",{cx:"12",cy:"6",r:"2"}),It("circle",{cx:"6",cy:"12",r:"2"}),It("circle",{cx:"18",cy:"12",r:"2"}),It("circle",{cx:"12",cy:"18",r:"2"})]})})}function Vf({color:e}){return It("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:e,opacity:.6}})}function Xf({color:e}){return It("span",{style:{color:e,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function Kf(){return It("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function qf({onCancel:e}){let t=zr(null);return to(()=>{let n=t.current;if(!n)return;let r=s=>{s.stopPropagation(),e()},o=()=>{n.style.opacity="0.5"},i=()=>{n.style.opacity="0.7"};return n.addEventListener("click",r),n.addEventListener("mouseenter",o),n.addEventListener("mouseleave",i),()=>{n.removeEventListener("click",r),n.removeEventListener("mouseenter",o),n.removeEventListener("mouseleave",i)}},[e]),It("button",{ref:t,style:{background:"none",border:"none",cursor:"pointer",color:"#ffffff",opacity:.7,fontSize:14,padding:"0 2px",lineHeight:1},title:"Cancel",children:"\xD7"})}function Zf({onDismiss:e}){let t=zr(null);return to(()=>{let n=t.current;if(!n)return;let r=s=>{s.stopPropagation(),e()},o=()=>{n.style.opacity="0.5"},i=()=>{n.style.opacity="0.7"};return n.addEventListener("click",r),n.addEventListener("mouseenter",o),n.addEventListener("mouseleave",i),()=>{n.removeEventListener("click",r),n.removeEventListener("mouseenter",o),n.removeEventListener("mouseleave",i)}},[e]),It("button",{ref:t,style:{background:"none",border:"none",cursor:"pointer",color:"#ffffff",opacity:.7,fontSize:14,padding:"0 2px",lineHeight:1},title:"Dismiss",children:"\xD7"})}function Tc({bridge:e,inFlightJobs:t,isVisible:n,onHover:r,clearSignal:o,onViewThread:i,onClickJob:s,onCancel:a,onHoverJob:l,isConnected:d,dismissedThreadIds:c,snapPosition:p="bottom-right"}){let[u,g]=ki([]),[b,v]=ki(!1),[R,C]=ki(()=>typeof window!="undefined"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});to(()=>{let B=()=>C({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",B),()=>window.removeEventListener("resize",B)},[]);let G=ja(p,R.w,R.h);to(()=>{o>0&&g([])},[o]),to(()=>{!c||c.size===0||g(B=>{let ce=B.filter(Q=>!Q.threadId||!c.has(Q.threadId));return ce.length===B.length?B:ce})},[c]),to(()=>{g(B=>{var Re;let ce=new Set(B.map(Me=>Me.jobId)),Q=!1,q=B.map(Me=>{let et=t[Me.jobId];return et&&(!Me.threadId||Me.color==="#888")?(Q=!0,h(f({},Me),{threadId:Me.threadId||et.threadId,color:Me.color==="#888"?et.color:Me.color})):Me});for(let[Me,et]of Object.entries(t))ce.has(Me)||(q.push({jobId:Me,color:et.color,status:"queued",threadId:et.threadId}),Q=!0);let Ee=new Set(Object.keys(t)),De=new Set(e.activeJobIds),pe=q.filter(Me=>Me.status!=="queued"?!0:Ee.has(Me.jobId)||De.has(Me.jobId));pe.length!==q.length&&(Q=!0);let Pe=new Set(pe.map(Me=>Me.jobId));for(let Me of e.activeJobIds)if(!Pe.has(Me)){let et=e.events.find(Ve=>Ve.type==="job_started"&&Ve.data.jobId===Me);pe.push({jobId:Me,color:"#888",status:"working",threadId:(Re=et==null?void 0:et.data)==null?void 0:Re.threadId}),Q=!0}return Q?pe:B})},[t,e.activeJobIds]),to(()=>{if(e.activeJobIds.length===0)return;let B=new Set(e.activeJobIds);g(ce=>ce.map(Q=>B.has(Q.jobId)&&Q.status!=="done"&&Q.status!=="error"?h(f({},Q),{status:"working"}):Q))},[e.activeJobIds]);let L=zr(null);to(()=>{let B=e.lastCompletedJobId;if(!B||B===L.current)return;L.current=B;let ce=e.events.find(Pe=>Pe.type==="error"&&(Pe.data.jobId===B||e.status==="error")),Q=!!ce,q=Q?void 0:Jf(e.events,B),Ee=ce?String(ce.data.message||""):void 0,De=ce?!!ce.data.cancelled:void 0,pe=ce==null?void 0:ce.data.threadId;g(Pe=>Pe.map(Re=>Re.jobId===B?h(f({},Re),{status:Q?"error":"done",doneLabel:q,errorMessage:Ee,cancelled:De,threadId:Re.threadId||pe}):Re))},[e.lastCompletedJobId,e.events,e.status]);let A=n&&(u.length>0||d===!1),E=zr(null);to(()=>{if(!A)return;let B=E.current;if(!B)return;let ce=()=>{v(!0),r(!0)},Q=()=>{v(!1),r(!1),l==null||l(null)};return B.addEventListener("mouseenter",ce),B.addEventListener("mouseleave",Q),()=>{B.removeEventListener("mouseenter",ce),B.removeEventListener("mouseleave",Q)}},[A,r,l]);let _=zr(new Map),ie=Ff((B,ce)=>{ce?_.current.set(B,ce):_.current.delete(B)},[]);if(to(()=>{if(!A)return;let B=[];for(let ce of u){let Q=_.current.get(ce.jobId);if(Q){if(s){let q=ce.jobId,Ee=()=>s(q);Q.addEventListener("click",Ee),B.push(()=>Q.removeEventListener("click",Ee))}if(l){let q=ce.jobId,Ee=()=>l(q),De=()=>l(null);Q.addEventListener("mouseenter",Ee),Q.addEventListener("mouseleave",De),B.push(()=>{Q.removeEventListener("mouseenter",Ee),Q.removeEventListener("mouseleave",De)})}}}return()=>B.forEach(ce=>ce())},[A,u,s,l]),!A)return null;let oe={working:3,queued:2,error:1,done:0},Y=[],K=new Map;for(let B of u){if(!B.threadId){Y.push(B);continue}let ce=K.get(B.threadId);(!ce||oe[B.status]>oe[ce.status]||oe[B.status]===oe[ce.status])&&K.set(B.threadId,B)}for(let B of K.values())Y.push(B);let H=Y.filter(B=>B.status==="queued"),ee=new Map;H.forEach((B,ce)=>{ee.set(B.jobId,`(${ce+1}/${H.length})`)});let k=!b&&Y.length>1,Ae=No(p),X=Ho(p),ge=Ae?Y:[...Y].reverse();return Sr("div",{ref:E,style:G,"data-devtools":!0,children:[It("style",{children:"@keyframes popmelt-badge-march { to { background-position: 0 -5px; } }"}),ge.map((B,ce)=>{var De;let Q=ce===Y.length-1,q=Y.length-1-ce,Ee=B.status==="working"?Gf(e.events.filter(pe=>pe.data.jobId===B.jobId)):B.status==="queued"?`Queued ${(De=ee.get(B.jobId))!=null?De:""}`:B.status==="done"?B.doneLabel||"Done":B.cancelled?"Cancelled":B.errorMessage?Yf(B.errorMessage):"Error";return It("div",{style:{position:"relative",zIndex:Y.length-ce,marginBottom:k?Q?0:-Wf:Q?0:jf,transform:k?`scale(${Math.max(.94,1-q*.02)})`:"scale(1)",opacity:1,transformOrigin:`${Ae?"top":"bottom"} ${X?"right":"left"}`,transition:"margin-bottom 250ms ease, transform 250ms ease, opacity 250ms ease"},children:Sr("div",{ref:pe=>ie(B.jobId,pe),style:f(h(f({},Ec),{position:"relative",overflow:"visible",cursor:s?"pointer":void 0}),B.status==="working"&&{borderImage:"none",borderColor:"transparent"}),title:B.errorMessage||void 0,children:[B.status==="working"&&(()=>{let pe=`<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='${B.color}' stroke-width='.75'/></svg>`;return It("div",{style:{position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(pe)}")`,backgroundSize:"5px 5px",WebkitMask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",WebkitMaskComposite:"xor",mask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",maskComposite:"exclude",pointerEvents:"none",animation:"popmelt-badge-march 0.8s linear infinite"}})})(),Sr("div",{style:{display:"flex",alignItems:"center",gap:3,padding:"3px 5px 3px 8px",margin:3,backgroundColor:B.status==="error"?"#ef4444":B.color,color:"#ffffff"},children:[B.status==="working"&&It(Uf,{color:"#ffffff"}),B.status==="queued"&&It(Vf,{color:"#ffffff"}),B.status==="done"&&It(Xf,{color:"#ffffff"}),B.status==="error"&&It(Kf,{}),It("span",{style:{opacity:B.status==="queued"?.6:1,maxWidth:160,overflow:"hidden",textOverflow:"ellipsis"},children:Ee}),B.status==="working"&&a&&It(qf,{onCancel:()=>a(B.jobId)}),(B.status==="done"||B.status==="error")&&It(Zf,{onDismiss:()=>g(pe=>pe.filter(Pe=>B.threadId?Pe.threadId!==B.threadId:Pe.jobId!==B.jobId))})]})]})},B.jobId)}),d===!1&&u.length>0&&It("div",{style:Ec,children:Sr("div",{style:{display:"flex",alignItems:"center",gap:3,padding:"3px 5px 3px 8px",margin:3,backgroundColor:"#f59e0b",color:"#ffffff"},children:[It("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ffffff",opacity:.6}}),It("span",{children:"Reconnecting\u2026"})]})})]})}import{Fragment as tg,jsx as eg,jsxs as ng}from"react/jsx-runtime";var Qf=`
|
|
19
19
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
20
20
|
:host {
|
|
21
21
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
@@ -44,9 +44,9 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
44
44
|
color: initial;
|
|
45
45
|
-webkit-font-smoothing: auto;
|
|
46
46
|
}
|
|
47
|
-
`;function
|
|
48
|
-
`),n=[],r=0;for(;r<t.length;){let i=t[r];if(i.trimStart().startsWith("```")){let d=[];for(r++;r<t.length&&!t[r].trimStart().startsWith("```");)d.push(t[r]),r++;r++,n.push(
|
|
49
|
-
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(i)){n.push(
|
|
47
|
+
`;function Mc({children:e}){return ng(tg,{children:[eg("style",{children:Qf}),e]})}import{useEffect as og,useLayoutEffect as rg,useRef as ig,useState as Ic}from"react";import{createPortal as sg}from"react-dom";import{Fragment as dg,jsx as cg,jsxs as ug}from"react/jsx-runtime";function ag(e){return e.tagName==="STYLE"||e.tagName==="LINK"&&e.rel==="stylesheet"}function lg(e){let t=new Map,n=e.firstChild;function r(s){if(t.has(s)||s.hasAttribute("data-pm-mirror"))return;let a=s.cloneNode(!0);a.setAttribute("data-pm-mirror",""),e.insertBefore(a,n),t.set(s,a)}function o(s){let a=t.get(s);a&&(a.remove(),t.delete(s))}for(let s of document.querySelectorAll('link[rel="stylesheet"], style'))s.getRootNode()===document&&r(s);try{document.adoptedStyleSheets.length>0&&(e.adoptedStyleSheets=[...document.adoptedStyleSheets,...e.adoptedStyleSheets])}catch(s){}let i=new MutationObserver(s=>{for(let a of s)if(a.type==="childList"){for(let l of a.addedNodes)l instanceof Element&&ag(l)&&r(l);for(let l of a.removedNodes)l instanceof Element&&o(l)}});return i.observe(document.head,{childList:!0}),document.body&&i.observe(document.body,{childList:!0}),()=>{i.disconnect();for(let s of t.values())s.remove();t.clear()}}function Rc({children:e}){let t=ig(null),[n,r]=Ic(null),[o,i]=Ic(null);return rg(()=>{let s=t.current;if(!s||s.shadowRoot)return;let a=s.attachShadow({mode:"open"}),l=document.createElement("div");l.setAttribute("data-popmelt-root",""),a.appendChild(l),r(a),i(l)},[]),og(()=>{if(n)return lg(n)},[n]),ug(dg,{children:[cg("div",{ref:t,"data-popmelt-shadow-host":!0,style:{position:"absolute",width:0,height:0,overflow:"visible",zIndex:1e4}}),o&&sg(e,o)]})}import{memo as bg,useCallback as wr,useEffect as ao,useMemo as Lc,useRef as no,useState as Un}from"react";import{jsx as Je,jsxs as Xo}from"react/jsx-runtime";var zs="ui-monospace, SFMono-Regular, Menlo, monospace",pg=0;function fg({size:e=11}){let t=++pg,n=`pm-vs-m${t}`,r=`pm-vs-f0-${t}`,o=`pm-vs-f1-${t}`,i=`pm-vs-g${t}`;return Xo("svg",{width:e,height:e,viewBox:"0 0 100 100",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{display:"inline",verticalAlign:"middle",marginLeft:3,flexShrink:0},children:[Je("mask",{id:n,maskType:"alpha",maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"100",height:"100",children:Je("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z",fill:"white"})}),Xo("g",{mask:`url(#${n})`,children:[Je("path",{d:"M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z",fill:"#0065A9"}),Je("g",{filter:`url(#${r})`,children:Je("path",{d:"M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z",fill:"#007ACC"})}),Je("g",{filter:`url(#${o})`,children:Je("path",{d:"M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z",fill:"#1F9CF0"})}),Je("g",{style:{mixBlendMode:"overlay"},opacity:"0.25",children:Je("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z",fill:`url(#${i})`})})]}),Xo("defs",{children:[Xo("filter",{id:r,x:"-8.39411",y:"15.8291",width:"116.727",height:"92.2456",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[Je("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),Je("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),Je("feOffset",{}),Je("feGaussianBlur",{stdDeviation:"4.16667"}),Je("feColorMatrix",{type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"}),Je("feBlend",{mode:"overlay",in2:"BackgroundImageFix",result:"effect1_dropShadow"}),Je("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"})]}),Xo("filter",{id:o,x:"60.4167",y:"-8.07558",width:"47.9167",height:"116.151",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[Je("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),Je("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),Je("feOffset",{}),Je("feGaussianBlur",{stdDeviation:"4.16667"}),Je("feColorMatrix",{type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"}),Je("feBlend",{mode:"overlay",in2:"BackgroundImageFix",result:"effect1_dropShadow"}),Je("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"})]}),Xo("linearGradient",{id:i,x1:"49.9392",y1:"0.257812",x2:"49.9392",y2:"99.7423",gradientUnits:"userSpaceOnUse",children:[Je("stop",{stopColor:"white"}),Je("stop",{offset:"1",stopColor:"white",stopOpacity:"0"})]})]})]})}var gg=/^#[0-9a-fA-F]{3,8}$/,mg=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,hg=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]);function yg(e){let t=e.trim();return gg.test(t)||mg.test(t)||hg.has(t.toLowerCase())}function $s(e,t){return Je("span",{style:{display:"inline-block",width:10,height:10,backgroundColor:e,border:"1px solid rgba(0,0,0,0.15)",borderRadius:2,verticalAlign:"middle",marginRight:3}},t)}function Wr(e){let t=[],n=/(`[^`]+`)|(\*\*\*(.+?)\*\*\*)|(\*\*(.+?)\*\*)|(\*(.+?)\*)|(_([^_]+?)_)|(\[([^\]]+)\]\(([^)]+)\))|(#[0-9a-fA-F]{3,8})(?![0-9a-fA-F])|((?:rgba?|hsla?|oklch)\([^)]+\))/g,r=0,o;for(;(o=n.exec(e))!==null;){if(o.index>r&&t.push(e.slice(r,o.index)),o[1]){let i=o[1].slice(1,-1);yg(i)&&t.push($s(i,`sw-${o.index}`)),t.push(Je("code",{style:{fontFamily:zs,fontSize:"0.9em",backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",borderRadius:2},children:i},o.index))}else if(o[3]!==void 0)t.push(Je("strong",{children:Je("em",{children:o[3]})},o.index));else if(o[5]!==void 0)t.push(Je("strong",{children:o[5]},o.index));else if(o[7]!==void 0)t.push(Je("em",{children:o[7]},o.index));else if(o[9]!==void 0)t.push(Je("em",{children:o[9]},o.index));else if(o[11]!==void 0&&o[12]!==void 0){let i=o[12],s=!/^https?:\/\/|^mailto:/i.test(i),a=s?`vscode://file/${i}`:i;s?t.push(Xo("a",{href:a,target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline",whiteSpace:"nowrap",backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",borderRadius:2,fontFamily:zs,fontSize:"0.9em"},children:[o[11],Je(fg,{})]},o.index)):t.push(Je("a",{href:a,target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline"},children:o[11]},o.index))}else o[13]!==void 0?(t.push($s(o[13],`sw-${o.index}`)),t.push(o[13])):o[14]!==void 0&&(t.push($s(o[14],`sw-${o.index}`)),t.push(o[14]));r=o.index+o[0].length}return r<e.length&&t.push(e.slice(r)),t}function so(e){var o;let t=e.split(`
|
|
48
|
+
`),n=[],r=0;for(;r<t.length;){let i=t[r];if(i.trimStart().startsWith("```")){let d=[];for(r++;r<t.length&&!t[r].trimStart().startsWith("```");)d.push(t[r]),r++;r++,n.push(Je("pre",{style:{fontFamily:zs,fontSize:"0.9em",lineHeight:1.4,backgroundColor:"rgba(0,0,0,0.04)",padding:"6px 8px",margin:"4px 0",overflowX:"auto",whiteSpace:"pre"},children:d.join(`
|
|
49
|
+
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(i)){n.push(Je("hr",{style:{border:"none",borderTop:"1px solid rgba(0,0,0,0.1)",margin:"6px 0"}},n.length)),r++;continue}let s=i.match(/^(#{1,4})\s+(.+)/);if(s){let d=s[1].length,c={1:16,2:14,3:13,4:12};n.push(Je("div",{style:{fontWeight:700,fontSize:(o=c[d])!=null?o:12,margin:"8px 0 2px"},children:Wr(s[2])},n.length)),r++;continue}if(i.trimStart().startsWith("|")&&i.trimEnd().endsWith("|")){let d=[];for(;r<t.length&&t[r].trimStart().startsWith("|")&&t[r].trimEnd().endsWith("|");)d.push(t[r]),r++;let c=C=>/^\|[\s\-:|]+\|$/.test(C),p=d.filter(C=>!c(C)),u=C=>C.split("|").slice(1,-1).map(G=>G.trim()),g=C=>/^\*\*.+\*\*$/.test(C)||/^__.+__$/.test(C),b=p.map(u),v=b.length>1&&b.slice(1).every(C=>C[0]&&g(C[0])),R=b.length>0&&b[0].every(C=>g(C));n.push(Je("div",{style:{overflowX:"auto",margin:"4px 0",paddingBottom:4},children:Je("table",{style:{borderCollapse:"separate",borderSpacing:0,fontSize:"0.95em",width:"max-content",minWidth:"100%"},children:Je("tbody",{children:p.map((C,G)=>Je("tr",{children:u(C).map((L,A)=>Je(G===0?"th":"td",{style:f({border:"1px solid rgba(0,0,0,0.1)",padding:"3px 6px",textAlign:"left",fontWeight:G===0?600:400,minWidth:60,whiteSpace:"nowrap"},A===0&&v||G===0&&R?h(f(f({position:"sticky"},A===0&&v?{left:0}:{}),G===0&&R?{top:0}:{}),{background:"#fff",zIndex:A===0&&v&&G===0&&R?2:1}):{}),children:Wr(L)},A))},G))})})},n.length));continue}if(i.match(/^(\s*)([-*])\s+(.+)/)){let d=[];for(;r<t.length;){let c=t[r].match(/^\s*[-*]\s+(.+)/);if(c)d.push(c[1]),r++;else if(d.length>0&&t[r].match(/^\s+\S/)&&!t[r].match(/^\s*\d+\.\s/)&&!t[r].match(/^\s*[-*]\s+/))d[d.length-1]+=" "+t[r].trim(),r++;else break}n.push(Je("ul",{style:{margin:0,paddingLeft:20,listStyleType:"disc",display:"flex",flexDirection:"column",gap:8},children:d.map((c,p)=>Je("li",{children:Wr(c)},p))},n.length));continue}if(i.match(/^(\s*)\d+\.\s+(.+)/)){let d=[];for(;r<t.length;){let c=t[r].match(/^\s*\d+\.\s+(.+)/);if(c)d.push(c[1]),r++;else if(d.length>0&&t[r].match(/^\s+\S/)&&!t[r].match(/^\s*\d+\.\s/)&&!t[r].match(/^\s*[-*]\s+/))d[d.length-1]+=" "+t[r].trim(),r++;else break}n.push(Je("ol",{style:{margin:0,paddingLeft:20,listStyleType:"decimal",display:"flex",flexDirection:"column",gap:8},children:d.map((c,p)=>Je("li",{children:Wr(c)},p))},n.length));continue}if(i.trim()===""){r++;continue}n.push(Je("div",{children:Wr(i)},n.length)),r++}return Je("div",{style:{display:"flex",flexDirection:"column",gap:8},children:n})}import{Fragment as To,jsx as ue,jsxs as ct}from"react/jsx-runtime";var Oc=400,Ln=16,Bc=3,xg=3,Dc=4,vg=8,Ws="devtools-thread-panel-position",Cr=Oc+2*Bc+2*Dc,Sg=Cr+2*xg;function js(){return{top:Ln,left:window.innerWidth-Cr-Ln}}function Ac(e,t,n){let r=n==null?void 0:n.getBoundingClientRect(),o=2*Bc+2*Dc,i=window.innerHeight-Ln-o;return r&&t+Sg>r.left&&(i=r.top-vg-o),Math.max(200,i-Math.max(0,e))}var wg={width:Oc,backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",display:"flex",flexDirection:"column",overflow:"visible",padding:4,fontFamily:Vt,fontSize:12,color:"#1f2937",pointerEvents:"auto"},Cg={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 5px 4px 10px",margin:0,fontWeight:600,fontSize:12,overflow:"hidden"},Eg={flex:1,overflowY:"auto",padding:0,scrollbarWidth:"none"},kg=`
|
|
50
50
|
[data-devtools="thread-panel-messages"]:hover {
|
|
51
51
|
scrollbar-width: thin !important;
|
|
52
52
|
}
|
|
@@ -60,11 +60,11 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
60
60
|
background: rgba(0,0,0,0.15);
|
|
61
61
|
border-radius: 3px;
|
|
62
62
|
}
|
|
63
|
-
`,
|
|
64
|
-
`)[0].trim();return t.length<=60?t:t.slice(0,57)+"\u2026"}var
|
|
65
|
-
|
|
63
|
+
`,Tg={borderTop:"1px solid rgba(0, 0, 0, 0.12)",display:"flex",alignItems:"center",gap:4,padding:"0 8px 0 10px"};function Ys(e){return e.replace(/<resolution>[\s\S]*?<\/resolution>/g,"").replace(/<question>[\s\S]*?<\/question>/g,"").replace(/<plan>[\s\S]*?<\/plan>/g,"").replace(/<review>[\s\S]*?<\/review>/g,"").replace(/<novel>[\s\S]*?<\/novel>/g,"").trim()}function Mg(e){let t=e.match(/<novel>\s*([\s\S]*?)\s*<\/novel>/);if(!(t!=null&&t[1]))return[];try{let n=JSON.parse(t[1]);return Array.isArray(n)?n.filter(r=>{if(typeof r!="object"||r===null)return!1;let o=r;return typeof o.category=="string"&&typeof o.element=="string"&&typeof o.decision=="string"&&typeof o.reason=="string"}):[]}catch(n){return[]}}function Pc(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}var Gs=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Ig=3e3,Rg=250;function Lg({color:e}){let[t,n]=Un(0),[r,o]=Un(()=>Math.floor(Math.random()*Gs.length));return ao(()=>{let i=setInterval(()=>n(a=>(a+1)%2),Rg),s=setInterval(()=>o(a=>(a+1)%Gs.length),Ig);return()=>{clearInterval(i),clearInterval(s)}},[]),ct("span",{style:{display:"inline-flex",alignItems:"center",gap:4},children:[ue("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?ct(To,{children:[ue("circle",{cx:"7",cy:"7",r:"2"}),ue("circle",{cx:"17",cy:"7",r:"2"}),ue("circle",{cx:"7",cy:"17",r:"2"}),ue("circle",{cx:"17",cy:"17",r:"2"})]}):ct(To,{children:[ue("circle",{cx:"12",cy:"6",r:"2"}),ue("circle",{cx:"6",cy:"12",r:"2"}),ue("circle",{cx:"18",cy:"12",r:"2"}),ue("circle",{cx:"12",cy:"18",r:"2"})]})}),ue("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:Gs[r]})]})}var Mi=32,Ti={width:Mi,height:Mi,objectFit:"cover",cursor:"pointer",border:"1px solid rgba(0,0,0,0.1)"};function Ag(e){let t=/^`(\/[^`]*)`$/gm,n=[...e.matchAll(t)];if(n.length===0)return null;let r=[];for(let o=0;o<n.length;o++){let i=n[o],s=i[1],a=i.index+i[0].length,l=o+1<n.length?n[o+1].index:e.length,d=e.slice(a,l).trim();r.push({route:s,text:d})}return r}function Pg(e,t){let n=[];if(e.replyImageUrls)for(let r of e.replyImageUrls){let o=r.startsWith("blob:")||r.startsWith("http")?r:`${t}${r}`;n.push({url:o,label:"pasted image"})}return n}function Og(e,t){let n=[];if(e.imageUrls)for(let[,r]of Object.entries(e.imageUrls))for(let o of r)n.push({url:`${t}${o}`,label:"pasted image"});return n}function Bg({src:e,onClose:t}){return ao(()=>{let n=r=>{r.key==="Escape"&&(r.stopPropagation(),t())};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[t]),ue("div",{onClick:t,style:{position:"fixed",inset:0,zIndex:1e5,backgroundColor:"rgba(0,0,0,0.8)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"zoom-out"},children:ue("img",{src:e,onClick:n=>n.stopPropagation(),style:{maxWidth:"90vw",maxHeight:"90vh",objectFit:"contain",cursor:"default",boxShadow:"0 4px 24px rgba(0,0,0,0.4)"}})})}function Dg(e){var i;let t=String(e.data.tool||""),n=e.data.file?String(e.data.file):null,r=n?(i=n.split("/").pop())!=null?i:n:null,o=e.data.content?String(e.data.content):null;switch(t){case"Read":return r?`Reading ${r}`:"Reading file";case"Edit":return r?`Editing ${r}`:"Editing file";case"Write":return r?`Writing ${r}`:"Writing file";case"Bash":return o?_g(o):"Running command";case"Glob":return"Searching files";case"Grep":return"Searching code";case"WebFetch":return"Fetching page";case"WebSearch":return"Searching web";default:return t?`Using ${t}`:null}}function _g(e){let t=e.split(`
|
|
64
|
+
`)[0].trim();return t.length<=60?t:t.slice(0,57)+"\u2026"}var Ng=new Set(["Read","Glob","Grep","WebFetch","WebSearch"]),Hg=new Set(["Edit","Write","Bash"]);function Fg(e){let t=0,n=!1;for(let r of e){if(r.type!=="tool_use")continue;let o=String(r.data.tool||"");Hg.has(o)?n=!0:Ng.has(o)&&t++}return!n&&t>=3?"researching":n?"applying changes":null}function $g(e){var n;let t=[];for(let r of e)if(r.type==="tool_use"){let o=Dg(r),i=String(r.data.tool||""),s=r.data.file?String(r.data.file):null,a=r.data.content?String(r.data.content):null,l=(n=s!=null?s:a)!=null?n:void 0;if(o){let d=t[t.length-1];d&&d.kind==="tool_group"&&d.tool===i?d.items.push({label:o,detail:l}):t.push({kind:"tool_group",tool:i,items:[{label:o,detail:l}]})}if(a&&s){let d=s.includes(".")?`.${s.split(".").pop().toLowerCase()}`:"",c=s.includes(".claude/plans/");t.push({kind:"file_content",file:s,content:a,ext:d,isPlan:c})}}else if(r.type==="delta"){let o=String(r.data.text||"");if(!o)continue;let i=t[t.length-1];i&&i.kind==="text"?i.text+=o:t.push({kind:"text",text:o})}else if(r.type==="thinking"){let o=String(r.data.text||"");if(!o)continue;let i=t[t.length-1];i&&i.kind==="thinking"?i.text+=o:t.push({kind:"thinking",text:o})}return t}function zg({file:e,content:t,ext:n,isPlan:r,onAccept:o}){var d;let[i,s]=Un(r),a=(d=e.split("/").pop())!=null?d:e;return ct("div",{style:{margin:"4px 0 4px 12px",border:"1px solid rgba(0,0,0,0.08)",backgroundColor:"rgba(255,255,255,0.6)",fontSize:11},children:[ct("div",{onClick:()=>s(c=>!c),style:{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",cursor:"pointer",userSelect:"none",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",color:"#374151"},children:[ue("span",{style:{fontSize:9,color:"#9ca3af"},children:i?"\u25BC":"\u25B6"}),ue("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:a}),r&&ue("span",{style:{fontSize:9,color:"#6366f1",fontFamily:"inherit"},children:"plan"})]}),i&&ct(To,{children:[ue("div",{style:{maxHeight:300,overflowY:"auto",padding:"6px 10px",borderTop:"1px solid rgba(0,0,0,0.06)",lineHeight:1.5,wordBreak:"break-word"},children:n===".md"?so(t):ue("pre",{style:{margin:0,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,whiteSpace:"pre-wrap"},children:t})}),r&&o&&ue("div",{style:{padding:"4px 8px",borderTop:"1px solid rgba(0,0,0,0.06)",display:"flex",justifyContent:"flex-end"},children:ue("button",{onClick:c=>{c.stopPropagation(),o()},style:{background:"#111",color:"#fff",border:"none",padding:"4px 12px",fontSize:11,cursor:"pointer",fontFamily:"inherit"},children:"Accept"})})]})]})}function Wg(e){let t=[];for(let n of e){let r=t[t.length-1];r&&r.val===n?r.count++:t.push({val:n,count:1})}return t.map(n=>n.count>1?`${n.val} (x${n.count})`:n.val)}function jg(e,t){switch(e){case"Bash":{let n=t.map(r=>(r.label||"").split(/\s/)[0]).filter(Boolean);return`Used Bash: ${Wg(n).join(", ")}`}case"Read":return`Read: ${t.map(n=>n.label.replace(/^Reading /,"")).join(", ")}`;case"Edit":return`Edited: ${t.map(n=>n.label.replace(/^Editing /,"")).join(", ")}`;case"Write":return`Wrote: ${t.map(n=>n.label.replace(/^Writing /,"")).join(", ")}`;case"Grep":return t.length===1?"Searched code":`Searched code (${t.length})`;case"Glob":return t.length===1?"Searched files":`Searched files (${t.length})`;default:return`Used ${e}: ${t.map(n=>n.label).join(", ")}`}}var Gg={fontSize:11,color:"#9ca3af",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",lineHeight:1.6};function Yg({label:e}){let t=e.indexOf(" ");return t===-1?ue(To,{children:e}):ct(To,{children:[ue("b",{children:e.slice(0,t)}),e.slice(t)]})}function _c({tool:e,items:t}){let[n,r]=Un(!1),o=t.length>1;return ct("div",{style:Gg,children:[ct("div",{onClick:o?()=>r(i=>!i):void 0,style:{cursor:o?"pointer":"default",userSelect:"none",color:"#9ca3af"},children:[o&&ue("span",{style:{fontSize:13,marginRight:4},children:n?"\u25BE":"\u25B8"}),jg(e,t)]}),n&&ue("div",{style:{marginLeft:17},children:t.map((i,s)=>{var a;return ue("div",{children:ue(Yg,{label:(a=i.detail)!=null?a:i.label})},s)})})]})}var Jg=bg(function({msg:t,index:n,bridgeUrl:r,accentColor:o,onLightbox:i}){let s=t.role==="human";if(t.cancelled||t.error)return ct("div",{"data-msg":!0,style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:[ct("div",{style:{display:"flex",alignItems:"center",gap:4},children:[ue("span",{style:{fontSize:11,color:t.error?"#dc2626":"#9ca3af",fontStyle:"italic"},children:t.error?"Error":"Cancelled"}),ue("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Pc(t.timestamp)})]}),t.error&&ue("div",{style:{fontSize:12,color:"#6b7280",lineHeight:1.4},children:t.error})]},`${t.jobId}-${n}`);let a=s?t.replyToQuestion||t.feedbackSummary||"(annotation)":Ys(t.responseText||""),l=s?void 0:t.question,d=!s&&t.resolutions&&t.resolutions.length>0,c=!s&&t.segments&&t.segments.length>0,p=!s&&!c&&t.toolsUsed&&t.toolsUsed.length>0;return!a&&!l&&!d&&!c?null:ct("div",{"data-msg":!0,style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:[ct("div",{style:{display:"flex",alignItems:"center",gap:4},children:[!s&&ue(Os,{provider:t.provider,size:11,style:{color:"#6b7280"}}),ue("span",{style:{fontWeight:600,fontSize:11,color:s?o:"#6b7280"},children:s?"You":Bs(t.model,t.provider)}),ue("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Pc(t.timestamp)})]}),s&&!t.replyToQuestion&&(()=>{let u=a?Ag(a):null;if(u&&t.screenshotUrls)return ue("div",{style:{display:"flex",flexDirection:"column",gap:4},children:u.map((b,v)=>{var G;let R=(G=t.screenshotUrls)==null?void 0:G[b.route],C=R?`${r}${R}`:null;return ct("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[C?ue("img",{src:C,title:b.route,style:h(f({},Ti),{flexShrink:0,marginTop:1}),onClick:()=>i(C)}):ue("div",{style:{width:Mi,height:Mi,flexShrink:0}}),ct("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:[ue("code",{style:{fontSize:10,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px"},children:b.route}),b.text&&ue("div",{style:{marginTop:2},children:so(b.text)})]})]},v)})});let g=t.screenshotUrl?`${r}${t.screenshotUrl}`:null;return g&&a?ct("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[ue("img",{src:g,title:"screenshot",style:h(f({},Ti),{flexShrink:0,marginTop:1}),onClick:()=>i(g)}),ue("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:a.includes(`
|
|
65
|
+
`)?so(a):a})]}):a?ue("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:a.includes(`
|
|
66
|
+
`)?so(a):a}):null})(),s&&t.replyToQuestion&&a&&ue("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:a.includes(`
|
|
67
|
+
`)?so(a):a}),!s&&c&&t.segments.map((u,g)=>{if(u.kind==="tool_group")return ue(_c,{tool:u.tool,items:u.items},g);let b=Ys(u.text);return b?ue("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:so(b)},g):null}),!s&&!c&&a&&ue("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:so(a)}),s&&t.replyToQuestion&&(()=>{let u=Pg(t,r);return u.length===0?null:ue("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:u.map((g,b)=>ue("img",{src:g.url,title:g.label,style:Ti,onClick:()=>i(g.url)},b))})})(),s&&!t.replyToQuestion&&(()=>{let u=Og(t,r);return u.length===0?null:ue("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:u.map((g,b)=>ue("img",{src:g.url,title:g.label,style:Ti,onClick:()=>i(g.url)},b))})})(),l&&ue("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:so(l)}),(p||d)&&ct("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151"},children:[p&&ue("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:t.toolsUsed.map((u,g)=>ue("div",{children:u},g))}),d&&t.resolutions.map((u,g)=>{var v;let b=(v=u.finalScope)!=null?v:u.inferredScope;return ct("div",{style:{marginTop:p?4:0},children:[ue("span",{style:{color:u.status==="resolved"?"#10b981":"#f59e0b"},children:u.status==="resolved"?"Done":"Needs review"}),u.summary?` \u2014 ${u.summary}`:""]},g)})]}),!s&&t.responseText&&(()=>{let u=Mg(t.responseText);return u.length===0?null:ue("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151",marginTop:2},children:u.map((g,b)=>ct("div",{style:{marginTop:b>0?6:0},children:[ue("span",{style:{display:"inline-block",backgroundColor:"#8b5cf6",color:"#fff",fontSize:9,fontWeight:600,textTransform:"uppercase",padding:"1px 5px",borderRadius:3,marginRight:6,verticalAlign:"middle"},children:g.category}),ue("strong",{children:g.element})," \u2014 ",g.decision,ue("div",{style:{color:"#9ca3af",fontStyle:"italic",marginTop:1},children:g.reason})]},b))})})()]},`${t.jobId}-${n}`)});function Nc({threadId:e,bridgeUrl:t,accentColor:n,isStreaming:r,isQueued:o,queuePosition:i,streamingEvents:s,onClose:a,onReply:l,onCancel:d,lastError:c,onMouseEnter:p,toolbarRef:u,currentModel:g,currentProvider:b,annotationNumber:v,annotationText:R}){let[C,G]=Un([]),[L,A]=Un(!0),[E,_]=Un(""),[ie,oe]=Un([]),Y=no(!1),K=no(null),[H,ee]=Un(!0),[k,Ae]=Un(0),[X,ge]=Un(null),B=wr(N=>ge(N),[]),ce=no(null),Q=wr((N,ye)=>{let re=N&&ye.trim();ce.current&&(ce.current.style.opacity=re?"0.65":"1"),K.current&&(K.current.style.borderTop=`1px solid ${re?n:"rgba(0,0,0,0.12)"}`)},[n]),q=no(null),Ee=no(null),De=no(r),pe=no(js()),Pe=no({x:0,y:0}),Re=no(!1),Me=no({x:0,y:0,offsetX:0,offsetY:0}),et=no(!0),[,Ve]=Un(0);ao(()=>{try{let N=localStorage.getItem(Ws);if(N){let ye=JSON.parse(N);if(typeof ye.top=="number"&&typeof ye.left=="number"){let re=window.innerWidth-Cr-Ln,we={top:Math.max(Ln,Math.min(ye.top,window.innerHeight-Ln-200)),left:Math.max(Ln,Math.min(ye.left,re))};et.current=we.left>=re-2,pe.current=we,Ve(We=>We+1)}}}catch(N){}},[]),ao(()=>{let N=()=>{if(et.current)pe.current=js();else{let ye=pe.current,re=window.innerWidth-Cr-Ln;pe.current={top:Math.max(Ln,Math.min(ye.top,window.innerHeight-Ln-200)),left:Math.max(Ln,Math.min(ye.left,re))}}Ve(ye=>ye+1)};return window.addEventListener("resize",N,{passive:!0}),()=>window.removeEventListener("resize",N)},[]),ao(()=>{let N=Ee.current;if(!N)return;let ye=Ge=>{Ge.button!==0||Ge.target.closest("button")||(Ge.preventDefault(),Ge.stopPropagation(),Re.current=!0,Me.current={x:Ge.clientX,y:Ge.clientY,offsetX:Pe.current.x,offsetY:Pe.current.y})},re=Ge=>{if(!Re.current)return;let dt=Me.current,xt=dt.offsetX+(Ge.clientX-dt.x),vt=dt.offsetY+(Ge.clientY-dt.y),Oe=Math.max(Ln,Math.min(window.innerWidth-Cr-Ln,pe.current.left+xt)),ke=Math.max(Ln,pe.current.top+vt);Pe.current={x:Oe-pe.current.left,y:ke-pe.current.top};let ht=q.current;ht&&(ht.style.top=`${ke}px`,ht.style.left=`${Oe}px`,ht.style.height=`${Ac(ke,Oe,u==null?void 0:u.current)}px`)},we=()=>{if(!Re.current)return;let Ge=pe.current.top+Pe.current.y,dt=pe.current.left+Pe.current.x;pe.current={top:Ge,left:dt},Pe.current={x:0,y:0};let xt=window.innerWidth-Cr-Ln;et.current=dt>=xt-2;try{localStorage.setItem(Ws,JSON.stringify({top:Ge,left:dt}))}catch(vt){}Re.current=!1},We=()=>{pe.current=js(),Pe.current={x:0,y:0},et.current=!0;try{localStorage.removeItem(Ws)}catch(Ge){}Ve(Ge=>Ge+1)};return N.addEventListener("mousedown",ye),window.addEventListener("mousemove",re),window.addEventListener("mouseup",we),N.addEventListener("dblclick",We),()=>{N.removeEventListener("mousedown",ye),window.removeEventListener("mousemove",re),window.removeEventListener("mouseup",we),N.removeEventListener("dblclick",We)}},[]);let Tt=wr(()=>{fetch(`${t}/thread/${e}`).then(N=>N.json()).then(N=>{var ye;G((ye=N.messages)!=null?ye:[]),A(!1)}).catch(()=>A(!1))},[t,e]);ao(()=>{A(!0),Tt()},[Tt]),ao(()=>{De.current&&!r&&Tt(),De.current=r},[r]);let Mt=Lc(()=>s?$g(s):[],[s]),zt=Lc(()=>s?Fg(s):null,[s]);ao(()=>{let N=ce.current;if(!N)return;let ye=()=>{ee(N.scrollHeight-N.scrollTop-N.clientHeight<40);let we=N.scrollTop+N.clientHeight,We=N.querySelectorAll("[data-msg]"),Ge=0;for(let dt=0;dt<We.length;dt++){let xt=We[dt];xt.offsetTop+xt.offsetHeight>we+20&&Ge++}Ae(Ge)};return N.addEventListener("scroll",ye,{passive:!0}),()=>N.removeEventListener("scroll",ye)},[]),ao(()=>{H&&ce.current&&(ce.current.scrollTop=ce.current.scrollHeight)},[C,Mt.length,r,H]),ao(()=>{let N=ye=>{ye.key==="Escape"&&(ye.stopPropagation(),a())};return document.addEventListener("keydown",N),()=>document.removeEventListener("keydown",N)},[a]);let tt=wr(()=>{if(!E.trim()||!l)return;let N=E.trim(),ye=ie.length>0?ie:void 0,re=ye?ye.map(we=>URL.createObjectURL(we)):void 0;G(we=>[...we,f({role:"human",timestamp:Date.now(),jobId:"pending",replyToQuestion:N},re?{replyImageUrls:re}:{})]),l(e,N,ye),_(""),oe([])},[E,ie,e,l]),gn=wr(N=>{let ye=N.clipboardData.items,re=[];for(let we=0;we<ye.length;we++){let We=ye[we];if(We.type.startsWith("image/")){let Ge=We.getAsFile();Ge&&re.push(Ge)}}re.length>0&&(N.preventDefault(),oe(we=>[...we,...re]))},[]),$=wr(N=>{N.key==="Enter"&&(N.metaKey||N.ctrlKey)&&(N.preventDefault(),tt())},[tt]),de=pe.current.top+Pe.current.y,Te=pe.current.left+Pe.current.x,me=Ac(de,Te,u==null?void 0:u.current);return ct(To,{children:[ue("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:N=>{N.target===N.currentTarget&&a()},style:{position:"fixed",inset:0,zIndex:9999}}),ct("div",{ref:q,style:h(f({},wg),{height:me,position:"fixed",top:de,left:Te,zIndex:1e4}),"data-devtools":"thread-panel",onMouseEnter:p,children:[(()=>{let ye=`<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='${r?n:"rgb(0,0,0)"}' stroke-width='.75'/></svg>`,re=`url("data:image/svg+xml,${encodeURIComponent(ye)}")`;return ct(To,{children:[ue("style",{children:`@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
68
|
+
[data-popmelt-reply]::placeholder { opacity: 0.35; }`}),ue("div",{style:f({position:"absolute",inset:-3,padding:5,backgroundImage:re,backgroundSize:"5px 5px",WebkitMask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",WebkitMaskComposite:"xor",mask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",maskComposite:"exclude",pointerEvents:"none"},r&&{animation:"popmelt-border-march 0.8s linear infinite"})})]})})(),ct("div",{style:{display:"flex",flexDirection:"column",overflow:"hidden",flex:1,minHeight:0},children:[ct("div",{ref:Ee,style:h(f({},Cg),{backgroundColor:n,color:"#ffffff",cursor:"grab",userSelect:"none",WebkitUserSelect:"none"}),children:[ct("span",{style:{display:"flex",alignItems:"center",gap:3,minWidth:0},children:[ue("span",{style:{flexShrink:0},children:v?`${v}.`:"Conversation"}),R&&ue("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:R})]}),ue("button",{onClick:a,style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1},children:"\xD7"})]}),ue("style",{dangerouslySetInnerHTML:{__html:kg+`
|
|
66
69
|
[data-devtools="thread-panel"] ::selection { background: color-mix(in srgb, ${n} 15%, transparent); }
|
|
67
|
-
`}}),ft("div",{ref:pe,style:y(f({},rg),{opacity:W&&M.trim()?.65:1,transition:"opacity 150ms ease"}),"data-devtools":"thread-panel-messages",children:[P&&fe("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!P&&C.length===0&&!r&&fe("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),C.map((h,z)=>{let te=h.role==="human";if(h.cancelled||h.error)return ft("div",{"data-msg":!0,style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:[ft("div",{style:{display:"flex",alignItems:"center",gap:4},children:[fe("span",{style:{fontSize:11,color:h.error?"#dc2626":"#9ca3af",fontStyle:"italic"},children:h.error?"Error":"Cancelled"}),fe("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:lc(h.timestamp)})]}),h.error&&fe("div",{style:{fontSize:12,color:"#6b7280",lineHeight:1.4},children:h.error})]},`${h.jobId}-${z}`);let se=te?h.replyToQuestion||h.feedbackSummary||"(annotation)":Os(h.responseText||""),ke=te?void 0:h.question,ye=!te&&h.resolutions&&h.resolutions.length>0,ae=!te&&h.segments&&h.segments.length>0,de=!te&&!ae&&h.toolsUsed&&h.toolsUsed.length>0;return!se&&!ke&&!ye&&!ae?null:ft("div",{"data-msg":!0,style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:[ft("div",{style:{display:"flex",alignItems:"center",gap:4},children:[!te&&fe(Ss,{provider:h.provider,size:11,style:{color:"#6b7280"}}),fe("span",{style:{fontWeight:600,fontSize:11,color:te?n:"#6b7280"},children:te?"You":ws(h.model,h.provider)}),fe("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:lc(h.timestamp)})]}),te&&!h.replyToQuestion&&(()=>{let ue=se?dg(se):null;if(ue&&h.screenshotUrls)return fe("div",{style:{display:"flex",flexDirection:"column",gap:4},children:ue.map((qe,st)=>{var It;let Pt=(It=h.screenshotUrls)==null?void 0:It[qe.route],Ct=Pt?`${t}${Pt}`:null;return ft("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[Ct?fe("img",{src:Ct,title:qe.route,style:y(f({},gi),{flexShrink:0,marginTop:1}),onClick:()=>ie(Ct)}):fe("div",{style:{width:mi,height:mi,flexShrink:0}}),ft("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:[fe("code",{style:{fontSize:10,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px"},children:qe.route}),qe.text&&fe("div",{style:{marginTop:2},children:qn(qe.text)})]})]},st)})});let Ye=h.screenshotUrl?`${t}${h.screenshotUrl}`:null;return Ye&&se?ft("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[fe("img",{src:Ye,title:"screenshot",style:y(f({},gi),{flexShrink:0,marginTop:1}),onClick:()=>ie(Ye)}),fe("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:se.includes(`
|
|
68
|
-
`)?qn(se):se})]}):se?fe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:se.includes(`
|
|
69
|
-
`)?qn(se):se}):null})(),te&&h.replyToQuestion&&se&&fe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:se.includes(`
|
|
70
|
-
`)?qn(se):se}),!te&&ae&&h.segments.map((ue,Ye)=>{if(ue.kind==="tool_group")return fe(ac,{tool:ue.tool,items:ue.items},Ye);let qe=Os(ue.text);return qe?fe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:qn(qe)},Ye):null}),!te&&!ae&&se&&fe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:qn(se)}),te&&h.replyToQuestion&&(()=>{let ue=ug(h,t);return ue.length===0?null:fe("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:ue.map((Ye,qe)=>fe("img",{src:Ye.url,title:Ye.label,style:gi,onClick:()=>ie(Ye.url)},qe))})})(),te&&!h.replyToQuestion&&(()=>{let ue=pg(h,t);return ue.length===0?null:fe("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:ue.map((Ye,qe)=>fe("img",{src:Ye.url,title:Ye.label,style:gi,onClick:()=>ie(Ye.url)},qe))})})(),ke&&fe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:qn(ke)}),(de||ye)&&ft("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151"},children:[de&&fe("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:h.toolsUsed.map((ue,Ye)=>fe("div",{children:ue},Ye))}),ye&&h.resolutions.map((ue,Ye)=>{var Pt;let qe=(Pt=ue.finalScope)!=null?Pt:ue.inferredScope,st=qe?`${qe.breadth} \xB7 ${qe.target}`:null;return ft("div",{style:{marginTop:de?4:0},children:[fe("span",{style:{color:ue.status==="resolved"?"#10b981":"#f59e0b"},children:ue.status==="resolved"?"Done":"Needs review"}),ue.summary?` \u2014 ${ue.summary}`:""]},Ye)})]})]},`${h.jobId}-${z}`)}),r&&ft("div",{style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:[ft("div",{style:{display:"flex",alignItems:"center",gap:4},children:[fe(Ss,{provider:p,size:11,style:{color:"#6b7280"}}),fe("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:ws(u,p)})]}),ct.map((h,z)=>{if(h.kind==="tool_group")return fe(ac,{tool:h.tool,items:h.items},z);if(h.kind==="file_content")return fe(vg,{file:h.file,content:h.content,ext:h.ext,isPlan:h.isPlan,onAccept:h.isPlan&&s?()=>s(e,"Looks good, please proceed with implementation."):void 0},z);if(h.kind==="thinking")return fe("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:h.text},z);let te=Os(h.text);return te?fe("div",{style:{paddingLeft:12,lineHeight:1.5,wordBreak:"break-word"},children:qn(te)},z):null}),ft("div",{style:{display:"flex",alignItems:"center",gap:6},children:[fe(cg,{color:n}),l&&fe("button",{onClick:l,style:{background:"none",border:"1px solid rgba(0,0,0,0.1)",color:"#6b7280",fontSize:10,padding:"2px 8px",cursor:"pointer",fontFamily:"inherit",marginLeft:"auto"},children:"Cancel"})]})]}),!H&&C.length>0&&fe("div",{style:{position:"sticky",bottom:5,display:"flex",justifyContent:"flex-end",paddingRight:3,pointerEvents:"none"},children:fe("button",{onClick:()=>{pe.current&&pe.current.scrollTo({top:pe.current.scrollHeight,behavior:"smooth"})},style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:4,fontSize:10,fontFamily:Ut,color:"transparent",backgroundColor:"#eaeaea",backgroundImage:`url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='rgb(0,0,0)' stroke-width='.75'/></svg>")}")`,backgroundSize:"5px 5px",border:"none",borderRadius:0,cursor:"pointer",pointerEvents:"auto",userSelect:"none"},children:ft("span",{style:{position:"relative",backgroundColor:"#eaeaea",padding:"0 6px",color:"#374151",fontFamily:Ut,lineHeight:1.4},children:[k," message",k!==1?"s":""," \u2193"]})})})]}),!r&&a&&ft("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[fe("span",{style:{fontWeight:600},children:"Error: "}),a]}),s&&ft("div",{style:{flexShrink:0,position:"relative"},children:[x.length>0&&fe("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:x.map((h,z)=>ft("span",{onClick:()=>N(te=>te.filter((se,ke)=>ke!==z)),onMouseEnter:te=>{let se=te.currentTarget.querySelector("[data-chip-x]");se&&(se.style.color="#fff")},onMouseLeave:te=>{let se=te.currentTarget.querySelector("[data-chip-x]");se&&(se.style.color="rgba(255,255,255,0.4)")},style:{display:"inline-flex",alignItems:"center",gap:4,fontSize:10,color:"#fff",backgroundColor:n,backdropFilter:"blur(4px)",padding:"2px 6px 2px 6px",cursor:"pointer"},children:["image ",z+1,fe("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"rgba(255,255,255,0.4)"},children:"\xD7"})]},z))}),ft("div",{style:y(f({},sg),{borderTop:`1px solid ${W&&M.trim()?n:"rgba(0,0,0,0.12)"}`}),children:[fe("input",{"data-popmelt-reply":!0,autoFocus:!0,value:M,onChange:h=>T(h.target.value),onFocus:()=>_(!0),onBlur:()=>_(!1),onKeyDown:nt,onPaste:Tt,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:Ut,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),fe("button",{onClick:Pe,disabled:!M.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:M.trim()?"pointer":"default",color:M.trim()?n:"rgba(0,0,0,0.2)",flexShrink:0},children:ft("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[fe("path",{d:"M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z"}),fe("path",{d:"M6 12h16"})]})})]})]})]})]}),Q&&fe(fg,{src:Q,onClose:()=>ie(null)})]})}import{jsx as dr,jsxs as gc}from"react/jsx-runtime";var Hs=Eg(null),Ns="devtools-provider",Ds="devtools-model",_s="devtools-open-thread-id";async function fc(e,t){t?await t(e):(window.history.pushState(window.history.state,"",e),window.dispatchEvent(new PopStateEvent("popstate",{state:window.history.state}))),await new Promise(n=>{requestAnimationFrame(()=>requestAnimationFrame(()=>{setTimeout(n,600)}))})}var Mg={0:0,1:1},Ig={0:0,1:1,2:1};function Lg(e,t,n){var o,i;let r=t==="codex"?pi:ui;return e==="claude"&&t==="codex"?(o=Mg[n])!=null?o:Math.min(n,r.length-1):e==="codex"&&t==="claude"&&(i=Ig[n])!=null?i:Math.min(n,r.length-1)}function Rg({children:e,enabled:t=process.env.NODE_ENV==="development",bridgeUrl:n=typeof window!="undefined"?(o=>(o=window.__POPMELT_BRIDGE_URL__)!=null?o:"http://localhost:1111")():"http://localhost:1111",navigate:r}){var X,re,we,K,Ee,Te,Le;let[i,s]=wl(),l=vl(n,t),a=Vt(null),d=Vt(null),c=(X=bl())!=null?X:n,u=Vt(new Map),p=Vt(new Map),g=Vt(!1),w=jo(),[C,R]=pn(()=>typeof window=="undefined"?"claude":localStorage.getItem(Ns)||"claude"),[P,G]=pn(()=>{if(typeof window=="undefined")return 0;let v=localStorage.getItem(Ds);return v&&parseInt(v,10)||0}),[M,T]=pn([]),[x,N]=pn({}),[W,_]=pn(!1);Yt(()=>{l.isConnected&&Qs(c).then(v=>{if(!v)return;let B=Object.entries(v.providers).filter(([,Me])=>Me.available).map(([Me])=>Me);B.length>0&&T(B);let ee={};for(let[Me,ge]of Object.entries(v.providers))ge.mcp&&(ee[Me]=ge.mcp);N(ee),Object.values(ee).every(Me=>Me.found)&&_(!1)})},[l.isConnected,l.capabilitiesVersion,c]),Yt(()=>{if(M.length>0&&!M.includes(C)){let v=M[0];R(v),localStorage.setItem(Ns,v)}},[M,C]);let H=C==="codex"?pi:ui,V=(re=H[P])!=null?re:H[0],k=nn(v=>{let B=C;R(v),localStorage.setItem(Ns,v);let ee=Lg(B,v,P);G(ee),localStorage.setItem(Ds,String(ee))},[C,P]),A=nn(v=>{G(v),localStorage.setItem(Ds,String(v))},[]),Q=nn(async()=>{let v=await nl(c);if(!v)return;let B={};for(let[ee,le]of Object.entries(v.capabilities.providers))le.mcp&&(B[ee]=le.mcp);N(B),v.results.some(ee=>ee.installed)&&_(!0)},[c]),[ie,pe]=pn(new Set),[be,me]=pn(null),[We,Ce]=pn(null),[oe,_e]=pn(null),[Ne,je]=pn(null);Yt(()=>{l.isConnected&&Fo(c).then(v=>{v!=null&&v.components&&pe(new Set(Object.keys(v.components)))})},[l.isConnected,c]);let Fe=nn(async v=>{let B=[];for(let ee of v)try{(await ol(ee,c)).added&&B.push(ee)}catch(le){console.error("[Popmelt] Failed to add component to model:",ee,le)}B.length>0&&(pe(ee=>{let le=new Set(ee);for(let Me of B)le.add(Me);return le}),me(B[B.length-1]))},[c]),Ie=nn(v=>{me(v)},[]),ct=nn(()=>{Fo(c).then(v=>{v!=null&&v.components&&pe(new Set(Object.keys(v.components)))})},[c]),wt=nn(async v=>{try{(await rl(v,c)).removed&&pe(ee=>{let le=new Set(ee);return le.delete(v),le})}catch(B){console.error("[Popmelt] Failed to remove component from model:",B)}},[c]),Pe=nn((v,B)=>{s({type:"MODIFY_SPACING_TOKEN",payload:v}),s({type:"ADD_SPACING_TOKEN_CHANGE",payload:B})},[s]),Tt=nn((v,B)=>{s({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:v,originalValue:B}})},[s]),[nt,Lt]=pn(0),Mt=Vt([]);Yt(()=>{let v=Mt.current,B=i.spacingTokenMods;Mt.current=B;let ee=new Map(v.map(ge=>[ge.tokenPath,ge])),le=new Map(B.map(ge=>[ge.tokenPath,ge])),Me=!1;for(let[ge,Ge]of le){let Xe=ee.get(ge);if(!(Xe&&Xe.currentValue===Ge.currentValue)){Me=!0,Ge.currentValue==="__deleted__"?il(ge,c).catch(mt=>console.error("[Popmelt] Failed to sync token delete:",mt)):xi(ge,Ge.currentValue,c).catch(mt=>console.error("[Popmelt] Failed to sync token update:",mt));for(let mt of Ge.targets){let Ze=document.querySelector(mt.selector);if(Ze)if(Ge.currentValue==="__deleted__")Ze.style.removeProperty(mt.property);else{let rt=Ge.currentPx;rt>0&&Ze.style.setProperty(mt.property,`${rt}px`,"important")}}}}for(let[ge,Ge]of ee)if(!le.has(ge)){Me=!0,xi(ge,Ge.originalValue,c).catch(Xe=>console.error("[Popmelt] Failed to restore token on undo:",Xe));for(let Xe of Ge.targets){let mt=document.querySelector(Xe.selector);mt&&mt.style.removeProperty(Xe.property)}}Me&&Lt(ge=>ge+1)},[i.spacingTokenMods,c]);let[Oe,h]=pn(()=>typeof window=="undefined"?null:localStorage.getItem(_s)||null),z=Vt(null),[te,se]=pn(new Set),[ke,ye]=pn(null);Yt(()=>{Oe?localStorage.setItem(_s,Oe):localStorage.removeItem(_s)},[Oe]);let ae="popmelt-in-flight-jobs",[de,ue]=pn(()=>{try{let v=localStorage.getItem(ae);return v?JSON.parse(v):{}}catch(v){return{}}});Yt(()=>{try{Object.keys(de).length>0?localStorage.setItem(ae,JSON.stringify(de)):localStorage.removeItem(ae)}catch(v){}},[de]),Yt(()=>{let v=B=>{if(B.key===ae)try{let ee=B.newValue?JSON.parse(B.newValue):{};ue(ee)}catch(ee){}};return window.addEventListener("storage",v),()=>window.removeEventListener("storage",v)},[]);let Ye=Vt(new Map),qe=Vt(new Map);Yt(()=>{for(let[v,B]of Object.entries(de))B.annotationIds.length>0&&Ye.current.set(v,B.annotationIds),B.threadId&&qe.current.set(v,B.threadId)},[de]);let st=Vt(!1);Yt(()=>{if(st.current||i.annotations.length===0)return;st.current=!0;let v=new Set;for(let ee of Object.values(de))for(let le of ee.annotationIds)v.add(le);let B=i.annotations.filter(ee=>v.has(ee.id)?!1:!!(ee.status==="in_flight"||(ee.status==="pending"||!ee.status)&&(ee.captured||ee.threadId))).map(ee=>ee.id);B.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:B,status:"dismissed"}})},[i.annotations,de,s]);let Pt=cr(()=>{let v=new Set;for(let B of Object.values(de))for(let ee of B.annotationIds)v.add(ee);return v},[de]),Ct=cr(()=>{let v=new Set;for(let B of Object.values(de))for(let ee of B.styleSelectors)v.add(ee);return v},[de]),It=cr(()=>{let v=new Map;for(let B of Object.values(de)){for(let ee of B.styleSelectors)v.set(ee,B.color);for(let ee of B.annotationIds){let le=i.annotations.find(Me=>Me.id===ee);if(le&&(le.linkedSelector&&v.set(le.linkedSelector,B.color),le.groupId))for(let Me of i.annotations)Me.groupId===le.groupId&&Me.linkedSelector&&v.set(Me.linkedSelector,B.color)}}return v},[de,i.annotations]),Gt=Vt(i.annotations);Gt.current=i.annotations;let Jt=Vt(i.styleModifications);Jt.current=i.styleModifications;let $t=Vt(de);$t.current=de,Yt(()=>{let v=null,B=()=>{var Xe,mt;if(Object.keys($t.current).length>0)return;let le=Gt.current,Me=Jt.current,ge=[],Ge=[];for(let Ze of le){if(!Ze.linkedSelector||!Ze.linkedSelector.startsWith("[data-pm=")||Ze.pathname||Ze.captured||Ze.status&&Ze.status!=="pending")continue;let rt=document.querySelector(Ze.linkedSelector);!rt&&((mt=(Xe=Ze.elements)==null?void 0:Xe[0])!=null&&mt.selector)&&(rt=document.querySelector(Ze.elements[0].selector)),rt||ge.push(Ze.linkedSelector)}for(let Ze of Me)document.querySelector(Ze.selector)||Ge.push(Ze.selector);(ge.length>0||Ge.length>0)&&s({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:ge,styleSelectors:Ge}})},ee=new MutationObserver(le=>{le.some(Me=>Me.removedNodes.length>0)&&(v&&clearTimeout(v),v=setTimeout(B,3e3))});return ee.observe(document.body,{childList:!0,subtree:!0}),()=>{ee.disconnect(),v&&clearTimeout(v)}},[s]);let on=Vt(typeof window!="undefined"?window.location.pathname:"/");Yt(()=>{let v=le=>{if(g.current)return;let Me=window.location.pathname;if(le===Me)return;let ge=Gt.current.filter(Xe=>{var mt;return Xe.pathname===le&&((mt=Xe.status)!=null?mt:"pending")==="pending"});if(console.log(`[Popmelt] Navigation from ${le} \u2192 ${Me}, ${ge.length} pending annotations on departing page`),ge.length===0)return;let Ge=a.current;if(!Ge){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if(gr(document.body,Ge,ge).then(Xe=>mr(Xe)).then(Xe=>{Xe?(p.current.set(le,Xe),console.log(`[Popmelt] Cached screenshot for ${le} (${(Xe.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${le}`)}).catch(Xe=>{console.warn("[Popmelt] Capture-on-leave failed:",Xe)}),p.current.size>20){let Xe=[...p.current.entries()];p.current=new Map(Xe.slice(-10))}},B=le=>{var ge;let Me=(ge=le.detail)==null?void 0:ge.prevPath;Me&&(v(Me),on.current=window.location.pathname)},ee=()=>{let le=on.current;v(le),on.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",B),window.addEventListener("popstate",ee),()=>{window.removeEventListener("popmelt:locationchange",B),window.removeEventListener("popstate",ee)}},[]),Yt(()=>{l.lastCompletedJobId&&l.lastCompletedJobId in de&&ue(v=>{var le;let Me=v,{[le=l.lastCompletedJobId]:B}=Me;return Hn(Me,[co(le)])})},[l.lastCompletedJobId]);let Ot=Vt(new Set),bn=Vt(!1);Yt(()=>{if(!l.isConnected){bn.current=!1;return}bn.current||(bn.current=!0,Ho(c).then(async v=>{var Ge,Xe,mt,Ze;if(!v)return;let B=(Ge=v.activeJobs)!=null?Ge:[],ee=(Xe=v.recentJobs)!=null?Xe:[],le=new Set(B.map(rt=>rt.id)),Me=JSON.parse(localStorage.getItem(ae)||"{}"),ge=new Set;for(let rt of Object.values(Me))if(rt.annotationIds)for(let dt of rt.annotationIds)ge.add(dt);ue(rt=>{var gn,mn,sn;let dt=f({},rt),ut=Date.now();for(let bt of Object.keys(dt)){if(bt.startsWith("_pending_")){let ln=parseInt(bt.replace(/^_pending_(?:reply_)?/,""),10);!isNaN(ln)&&ut-ln>3e4&&delete dt[bt];continue}le.has(bt)||delete dt[bt]}for(let bt of B)!dt[bt.id]&&((gn=bt.annotationIds)!=null&&gn.length||bt.threadId)&&(dt[bt.id]={annotationIds:(mn=bt.annotationIds)!=null?mn:[],styleSelectors:[],color:(sn=bt.color)!=null?sn:"#888",threadId:bt.threadId});let ht=new Set;for(let bt of ee)if(bt.annotationIds)for(let ln of bt.annotationIds)ht.add(ln);for(let bt of Object.keys(dt)){if(!bt.startsWith("_pending_"))continue;let ln=dt[bt];ln&&ln.annotationIds.some(He=>ht.has(He))&&delete dt[bt]}return dt});for(let rt of ee)if(rt.status==="done"&&(mt=rt.annotationIds)!=null&&mt.length&&rt.annotationIds.some(dt=>ge.has(dt))&&!Ot.current.has(rt.id))try{let dt=await Pr(c,rt.id);if(!dt)continue;let ut=dt.events.find(ht=>ht.type==="done");ut&&Array.isArray(ut.resolutions)&&(Ot.current.add(rt.id),s({type:"APPLY_RESOLUTIONS",payload:{resolutions:ut.resolutions,threadId:(Ze=ut.threadId)!=null?Ze:void 0}}))}catch(dt){}}))},[l.isConnected,c,s]),Yt(()=>{let v=l.events.filter(B=>B.type==="done"&&B.data.resolutions);for(let B of v){let ee=B.data.jobId;Ot.current.has(ee)||(Ot.current.add(ee),Array.isArray(B.data.resolutions)&&s({type:"APPLY_RESOLUTIONS",payload:{resolutions:B.data.resolutions,threadId:B.data.threadId}}))}},[l.events,s]);let St=Vt(new Set);Yt(()=>{let v=l.events.filter(B=>B.type==="error"&&B.data.cancelled);for(let B of v){let ee=B.data.jobId;if(!ee||St.current.has(ee))continue;St.current.add(ee);let le=de[ee];le&&le.annotationIds.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:le.annotationIds,status:"dismissed"}})}},[l.events,de,s]);let ne=Vt(0);Yt(()=>{let v=l.incrementalResolutions;if(v.length<=ne.current)return;let B=v.slice(ne.current);ne.current=v.length,s({type:"APPLY_RESOLUTIONS",payload:{resolutions:B}})},[l.incrementalResolutions,s]),Yt(()=>{l.incrementalResolutions.length===0&&(ne.current=0)},[l.incrementalResolutions.length]);let De=nn(async()=>{let v=a.current;if(!v)return!1;let B=await gr(document.body,v,i.annotations);if(B.length===0)return!1;let ee=await kl(B,i.annotations,i.styleModifications);return ee&&s({type:"MARK_CAPTURED"}),ee},[i.annotations,i.styleModifications,s]),ot=nn((v,B)=>{let ee=u.current.get(v)||[];u.current.set(v,[...ee,...B])},[]),Dn=nn(async()=>{var ln;let v=a.current;if(!v)return!1;let B=i.annotations.filter(He=>{var xt;return((xt=He.status)!=null?xt:"pending")==="pending"}),ee=i.spacingTokenChanges.filter(He=>!He.captured);if(B.length===0&&i.styleModifications.filter(He=>!He.captured).length===0&&ee.length===0)return!1;let le=new Map;for(let He of B){let xt=He.pathname||w;le.has(xt)||le.set(xt,[]),le.get(xt).push(He)}let Me=new Map,ge=[...le.keys()].filter(He=>He!==w);if(ge.length>0){let He=w,xt={x:window.scrollX,y:window.scrollY};g.current=!0;for(let Wt of ge)try{console.log(`[Popmelt] Navigating to ${Wt} for screenshot capture`),await fc(Wt,r),window.location.pathname!==Wt&&console.warn(`[Popmelt] Navigation to ${Wt} did not take effect (at ${window.location.pathname})`);let xn=le.get(Wt)||[],ao=await gr(document.body,v,xn),_n=await mr(ao);_n&&(Me.set(Wt,_n),console.log(`[Popmelt] Captured ${Wt} (${(_n.size/1024).toFixed(0)}KB)`))}catch(xn){console.warn(`[Popmelt] Failed to capture ${Wt}:`,xn)}await fc(He,r),window.scrollTo(xt.x,xt.y),g.current=!1}let Ge=B.filter(He=>(He.pathname||w)===w),Xe=await gr(document.body,v,Ge.length>0?i.annotations:[]);if(Xe.length>0){let He=await mr(Xe);He&&Me.set(w,He)}if(Me.size===0)return!1;let mt=ki(B,i.styleModifications,void 0,ee.length>0?ee:void 0),Ze=JSON.stringify(mt),rt=new Map;for(let He of B){let xt=u.current.get(He.id);if(xt&&xt.length>0&&rt.set(He.id,xt),He.groupId){for(let Wt of B)if(Wt.groupId===He.groupId&&Wt.id!==He.id){let xn=u.current.get(Wt.id);xn&&xn.length>0&&rt.set(Wt.id,xn)}}}let dt=le.size>1;console.log(`[Popmelt] Submit: ${le.size} page(s), ${Me.size} screenshot(s), pages: [${[...le.keys()].join(", ")}], cached: [${[...p.current.keys()].join(", ")}]`);let ut=dt?Me:(ln=Me.get(w))!=null?ln:Me,ht=B.map(He=>He.id),gn=i.styleModifications.filter(He=>!He.captured).map(He=>He.selector),mn=Ci(i.activeColor),sn=`_pending_${Date.now()}`,bt={annotationIds:ht,styleSelectors:gn,color:i.activeColor,threadId:void 0};try{let He=JSON.parse(localStorage.getItem(ae)||"{}");He[sn]=bt,localStorage.setItem(ae,JSON.stringify(He))}catch(He){}ue(He=>y(f({},He),{[sn]:bt}));try{let{jobId:He,threadId:xt}=await tl(ut,Ze,c,mn,C,V.id,rt.size>0?rt:void 0,wi());for(let Xt of rt.keys())u.current.delete(Xt);for(let Xt of le.keys())p.current.delete(Xt);let Wt=y(f({},bt),{threadId:xt});try{let Xt=JSON.parse(localStorage.getItem(ae)||"{}");delete Xt[sn],Xt[He]=Wt,localStorage.setItem(ae,JSON.stringify(Xt))}catch(Xt){}ue(Xt=>{let pr=Xt,{[sn]:hi}=pr,Rr=Hn(pr,[co(sn)]);return y(f({},Rr),{[He]:Wt})}),s({type:"MARK_CAPTURED"}),xt&&ht.length>0&&s({type:"SET_ANNOTATION_THREAD",payload:{ids:ht,threadId:xt}});let xn=i.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),_n=((xn!=null&&xn[1]?parseFloat(xn[1]):29)+60)%360;return s({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${_n})`}),!0}catch(He){try{let xt=JSON.parse(localStorage.getItem(ae)||"{}");delete xt[sn],localStorage.setItem(ae,JSON.stringify(xt))}catch(xt){}return ue(xt=>{let ao=xt,{[sn]:Wt}=ao;return Hn(ao,[co(sn)])}),console.error("[Pare] Failed to send to bridge:",He),!1}},[i.annotations,i.styleModifications,i.spacingTokenChanges,i.activeColor,s,c,C,V.id,w,r]),Tn=nn(async(v,B,ee)=>{var mt,Ze,rt,dt;let le=(dt=(rt=(mt=Object.values($t.current).find(ut=>ut.threadId===v))==null?void 0:mt.color)!=null?rt:(Ze=i.annotations.find(ut=>ut.threadId===v))==null?void 0:Ze.color)!=null?dt:i.activeColor,Me=i.annotations.filter(ut=>ut.threadId===v&&(ut.status==="waiting_input"||ut.status==="resolved"||ut.status==="needs_review")),ge=Me.map(ut=>ut.id),Ge=`_pending_reply_${Date.now()}`,Xe={annotationIds:ge,styleSelectors:[],color:le,threadId:v};try{let ut=JSON.parse(localStorage.getItem(ae)||"{}");ut[Ge]=Xe,localStorage.setItem(ae,JSON.stringify(ut))}catch(ut){}ue(ut=>y(f({},ut),{[Ge]:Xe}));try{let ut=Ci(i.activeColor),{jobId:ht}=await sl(v,B,c,ut,C,V.id,ee,wi()),gn=f({},Xe);try{let mn=JSON.parse(localStorage.getItem(ae)||"{}");delete mn[Ge],mn[ht]=gn,localStorage.setItem(ae,JSON.stringify(mn))}catch(mn){}ue(mn=>{let ln=mn,{[Ge]:sn}=ln,bt=Hn(ln,[co(Ge)]);return y(f({},bt),{[ht]:gn})}),Me.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:ge,status:"in_flight"}}),l.dismissQuestion(v)}catch(ut){try{let ht=JSON.parse(localStorage.getItem(ae)||"{}");delete ht[Ge],localStorage.setItem(ae,JSON.stringify(ht))}catch(ht){}ue(ht=>{let sn=ht,{[Ge]:gn}=sn;return Hn(sn,[co(Ge)])}),console.error("[Pare] Failed to send reply:",ut)}},[i.activeColor,i.annotations,c,l.dismissQuestion,s,C,V.id]),Qt=Vt(new Set);Yt(()=>{for(let v of l.pendingQuestions){if(Qt.current.has(v.jobId))continue;Qt.current.add(v.jobId);let B=v.annotationIds&&v.annotationIds.length>0?v.annotationIds:void 0;!B&&v.threadId&&(B=i.annotations.filter(ee=>ee.threadId===v.threadId).map(ee=>ee.id)),B&&B.length>0&&s({type:"SET_ANNOTATION_QUESTION",payload:{ids:B,question:v.question,threadId:v.threadId}})}},[l.pendingQuestions,s,i.annotations]);let Mn=cr(()=>{if(l.activeJobId&&l.activeJobId in de)return de[l.activeJobId].color;let v=Object.values(de);return v.length>0?v[v.length-1].color:void 0},[l.activeJobId,de]),Sn=nn(v=>{h(v)},[]),Bt=nn(v=>{var le;let B=de[v],ee=(B==null?void 0:B.threadId)||qe.current.get(v);ee&&(z.current=(le=B==null?void 0:B.color)!=null?le:null,h(ee))},[de]),ur=nn(v=>{if(!v){ye(null);return}let B=Ye.current.get(v);B&&B.length>0?ye(new Set(B)):ye(null)},[]),fn=nn(async v=>{try{let B=v?`${c}/cancel?jobId=${v}`:`${c}/cancel`;await fetch(B,{method:"POST"})}catch(B){}},[c]);Yt(()=>{i.activeTool==="model"&&Oe&&h(null)},[i.activeTool]);let Nt=Vt(null);Yt(()=>{i.isAnnotating?Nt.current&&(h(Nt.current),Nt.current=null):Oe&&(Nt.current=Oe,h(null))},[i.isAnnotating]);let Dt=cr(()=>{if(!Oe)return null;for(let[v,B]of Object.entries(de))if(B.threadId===Oe)return v;for(let[v,B]of Object.entries(l.activeJobThreads))if(B===Oe)return v;return null},[Oe,de,l.activeJobThreads]),yt=Oe?i.annotations.find(v=>v.threadId===Oe):void 0,rn=yt?i.annotations.indexOf(yt)+1:void 0,[_t,Qn]=pn(!1),[wn,bo]=pn(0),lt=Vt(null),eo=nn(v=>{v?(lt.current&&(clearTimeout(lt.current),lt.current=null),Qn(!0)):lt.current=setTimeout(()=>{Qn(!1),lt.current=null},150)},[]),xo=nn(()=>{bo(v=>v+1),l.clearEvents(),h(null),se(new Set),fn()},[l.clearEvents,fn]);Yt(()=>()=>{lt.current&&clearTimeout(lt.current)},[]);let[vo,to]=pn(!1);Yt(()=>{to(!0)},[]);let D=cr(()=>({isEnabled:t}),[t]);return!t||!vo?dr(Hs.Provider,{value:D,children:e}):gc(Hs.Provider,{value:D,children:[e,dr(Ma,{state:i,dispatch:s,onScreenshot:De,inFlightAnnotationIds:Pt,inFlightStyleSelectors:Ct,inFlightSelectorColors:It,onAttachImages:ot,onReply:l.isConnected?Tn:void 0,onViewThread:l.isConnected?Sn:void 0,onCloseThread:v=>{h(null),v&&se(B=>new Set(B).add(v))},onModelComponentsAdd:l.isConnected?Fe:void 0,onModelComponentFocus:l.isConnected?Ie:void 0,onModelComponentHover:Ce,modelComponentNames:ie,modelPanelHoveredComponent:oe,modelSpacingTokenHover:Ne,highlightedAnnotationIds:ke,focusedThreadAnnotationId:yt==null?void 0:yt.id,externalCanvasRef:a,toolbarRef:d}),dr(ic,{children:gc(oc,{children:[dr(Qa,{state:i,dispatch:s,onScreenshot:De,onSendToClaude:l.isConnected?Dn:void 0,hasActiveJobs:Object.keys(de).length>0||l.activeJobIds.length>0,activeJobColor:Mn,onCrosshairHover:eo,onClear:xo,provider:C,onProviderChange:l.isConnected&&M.length>1?k:void 0,availableProviders:M,modelIndex:P,modelCount:H.length,modelLabel:V.label,onModelChange:l.isConnected?A:void 0,onViewThread:l.isConnected?Sn:void 0,isThreadPanelOpen:Oe!==null,mcpStatus:x,onInstallMcp:l.isConnected?Q:void 0,mcpJustInstalled:W,bridgeUrl:c,isBridgeConnected:l.isConnected,modelSelectedComponent:be,modelCanvasHoveredComponent:We,onModelComponentHover:_e,onSpacingTokenHover:je,onModifySpacingToken:l.isConnected?Pe:void 0,onDeleteSpacingToken:l.isConnected?Tt:void 0,modelRefreshKey:nt,onModelComponentAdded:ct,onModelComponentRemoved:wt,toolbarRef:d}),Oe&&l.isConnected&&dr(pc,{threadId:Oe,bridgeUrl:c,accentColor:(K=(we=yt==null?void 0:yt.color)!=null?we:z.current)!=null?K:i.activeColor,isStreaming:Dt!==null,streamingEvents:Dt?l.events.filter(v=>v.data.jobId===Dt):[],onClose:()=>h(null),onReply:Tn,onCancel:Dt?()=>fn(Dt):void 0,lastError:(Le=(Ee=l.lastErrorByJob)==null?void 0:Ee[Dt!=null?Dt:""])!=null?Le:l.lastCompletedJobId&&qe.current.get(l.lastCompletedJobId)===Oe?(Te=l.lastErrorByJob)==null?void 0:Te[l.lastCompletedJobId]:void 0,toolbarRef:d,currentModel:V.id,currentProvider:C,annotationNumber:rn,annotationText:yt==null?void 0:yt.text}),dr(nc,{bridge:l,bridgeUrl:c,inFlightJobs:de,isVisible:_t||l.lastResponseText!==null||l.activeJobIds.length>0,onHover:eo,clearSignal:wn,onReply:Tn,onViewThread:Sn,onClickJob:Bt,onCancel:fn,onHoverJob:ur,isConnected:l.isConnected,dismissedThreadIds:te})]})})]})}function Ag(){let e=Tg(Hs);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{Rg as PopmeltProvider,Ag as usePopmelt};
|
|
70
|
+
`}}),ct("div",{ref:ce,style:h(f({},Eg),{transition:"opacity 150ms ease"}),"data-devtools":"thread-panel-messages",children:[L&&ue("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!L&&C.length===0&&!r&&ue("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),C.map((N,ye)=>ue(Jg,{msg:N,index:ye,bridgeUrl:t,accentColor:n,onLightbox:B},`${N.jobId}-${ye}`)),r&&ue("div",{style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:o?ct("div",{style:{display:"flex",alignItems:"center",gap:6},children:[ct("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:n,style:{verticalAlign:"middle",flexShrink:0,opacity:.5},children:[ue("circle",{cx:"12",cy:"6",r:"2"}),ue("circle",{cx:"6",cy:"12",r:"2"}),ue("circle",{cx:"18",cy:"12",r:"2"}),ue("circle",{cx:"12",cy:"18",r:"2"})]}),ct("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:["queued",i?` ${i}`:""]})]}):ct(To,{children:[ct("div",{style:{display:"flex",alignItems:"center",gap:4},children:[ue(Os,{provider:b,size:11,style:{color:"#6b7280"}}),ue("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:Bs(g,b)})]}),Mt.map((N,ye)=>{if(N.kind==="tool_group")return ue(_c,{tool:N.tool,items:N.items},ye);if(N.kind==="file_content")return ue(zg,{file:N.file,content:N.content,ext:N.ext,isPlan:N.isPlan,onAccept:N.isPlan&&l?()=>l(e,"Looks good, please proceed with implementation."):void 0},ye);if(N.kind==="thinking")return ue("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:N.text},ye);let re=Ys(N.text);return re?ue("div",{style:{paddingLeft:12,lineHeight:1.5,wordBreak:"break-word"},children:so(re)},ye):null}),ct("div",{style:{display:"flex",alignItems:"center",gap:6},children:[ue(Lg,{color:n}),d&&ue("button",{onClick:d,style:{background:"none",border:"1px solid rgba(0,0,0,0.1)",color:"#6b7280",fontSize:10,padding:"2px 8px",cursor:"pointer",fontFamily:"inherit",marginLeft:"auto"},children:"Cancel"})]})]})}),!H&&C.length>0&&ue("div",{style:{position:"sticky",bottom:5,display:"flex",justifyContent:"flex-end",paddingRight:3,pointerEvents:"none"},children:ue("button",{onClick:()=>{ce.current&&ce.current.scrollTo({top:ce.current.scrollHeight,behavior:"smooth"})},style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:4,fontSize:10,fontFamily:Vt,color:"transparent",backgroundColor:"#eaeaea",backgroundImage:`url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='rgb(0,0,0)' stroke-width='.75'/></svg>")}")`,backgroundSize:"5px 5px",border:"none",borderRadius:0,cursor:"pointer",pointerEvents:"auto",userSelect:"none"},children:ct("span",{style:{position:"relative",backgroundColor:"#eaeaea",padding:"0 6px",color:"#374151",fontFamily:Vt,lineHeight:1.4},children:[k," message",k!==1?"s":""," \u2193"]})})})]}),!r&&c&&ct("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[ue("span",{style:{fontWeight:600},children:"Error: "}),c]}),l&&ct("div",{style:{flexShrink:0,position:"relative"},children:[ie.length>0&&ue("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:ie.map((N,ye)=>ct("span",{onClick:()=>oe(re=>re.filter((we,We)=>We!==ye)),onMouseEnter:re=>{let we=re.currentTarget.querySelector("[data-chip-x]");we&&(we.style.color="#fff")},onMouseLeave:re=>{let we=re.currentTarget.querySelector("[data-chip-x]");we&&(we.style.color="rgba(255,255,255,0.4)")},style:{display:"inline-flex",alignItems:"center",gap:4,fontSize:10,color:"#fff",backgroundColor:n,backdropFilter:"blur(4px)",padding:"2px 6px 2px 6px",cursor:"pointer"},children:["image ",ye+1,ue("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"rgba(255,255,255,0.4)"},children:"\xD7"})]},ye))}),ct("div",{ref:K,style:h(f({},Tg),{borderTop:"1px solid rgba(0,0,0,0.12)"}),children:[ue("input",{"data-popmelt-reply":!0,autoFocus:!0,value:E,onChange:N=>{_(N.target.value),Q(Y.current,N.target.value)},onFocus:()=>{Y.current=!0,Q(!0,E)},onBlur:()=>{Y.current=!1,Q(!1,E)},onKeyDown:$,onPaste:gn,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:Vt,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),ue("button",{onClick:tt,disabled:!E.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:E.trim()?"pointer":"default",color:E.trim()?n:"rgba(0,0,0,0.2)",flexShrink:0},children:ct("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[ue("path",{d:"M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z"}),ue("path",{d:"M6 12h16"})]})})]})]})]})]}),X&&ue(Bg,{src:X,onClose:()=>ge(null)})]})}import{jsx as Er,jsxs as Fc}from"react/jsx-runtime";var Xg=[],Ks=Ug(null),Js="devtools-provider",Us="devtools-model",Vs="devtools-open-thread-id",Xs="popmelt-synthesize-thread";async function Hc(e,t){t?await t(e):(window.history.pushState(window.history.state,"",e),window.dispatchEvent(new PopStateEvent("popstate",{state:window.history.state}))),await new Promise(n=>{requestAnimationFrame(()=>requestAnimationFrame(()=>{setTimeout(n,600)}))})}var Kg={0:0,1:1},qg={0:0,1:1,2:1};function Zg(e,t,n){var o,i;let r=t==="codex"?Ei:Ci;return e==="claude"&&t==="codex"?(o=Kg[n])!=null?o:Math.min(n,r.length-1):e==="codex"&&t==="claude"&&(i=qg[n])!=null?i:Math.min(n,r.length-1)}function Qg({children:e,enabled:t=process.env.NODE_ENV==="development",bridgeUrl:n=typeof window!="undefined"?(o=>(o=window.__POPMELT_BRIDGE_URL__)!=null?o:"http://localhost:1111")():"http://localhost:1111",navigate:r}){var ve,Fe,$e,He,Lt;let[i,s]=Na(),a=Da(n,t),l=qt(null),d=qt(null),c=(ve=Oa())!=null?ve:n,p=qt(new Map),u=qt(new Map),g=qt(!1),b=rr(),[v,R]=Zt(()=>typeof window=="undefined"?"claude":localStorage.getItem(Js)||"claude"),[C,G]=Zt(()=>{if(typeof window=="undefined")return 0;let x=localStorage.getItem(Us);return x&&parseInt(x,10)||0}),[L,A]=Zt([]),[E,_]=Zt({}),[ie,oe]=Zt(!1);$t(()=>{a.isConnected&&pa(c).then(x=>{if(!x)return;let P=Object.entries(x.providers).filter(([,Le])=>Le.available).map(([Le])=>Le);P.length>0&&A(P);let ae={};for(let[Le,Be]of Object.entries(x.providers))Be.mcp&&(ae[Le]=Be.mcp);_(ae),Object.values(ae).every(Le=>Le.found)&&oe(!1)})},[a.isConnected,a.capabilitiesVersion,c]),$t(()=>{if(L.length>0&&!L.includes(v)){let x=L[0];R(x),localStorage.setItem(Js,x)}},[L,v]);let Y=v==="codex"?Ei:Ci,K=(Fe=Y[C])!=null?Fe:Y[0],H=Kt(x=>{let P=v;R(x),localStorage.setItem(Js,x);let ae=Zg(P,x,C);G(ae),localStorage.setItem(Us,String(ae))},[v,C]),ee=Kt(x=>{G(x),localStorage.setItem(Us,String(x))},[]),k=Kt(async()=>{let x=await ma(c);if(!x)return;let P={};for(let[ae,J]of Object.entries(x.capabilities.providers))J.mcp&&(P[ae]=J.mcp);_(P),x.results.some(ae=>ae.installed)&&oe(!0)},[c]),[Ae,X]=Zt(new Set),[ge,B]=Zt(null),[ce,Q]=Zt(null),[q,Ee]=Zt(null),[De,pe]=Zt(null);$t(()=>{a.isConnected&&er(c).then(x=>{x!=null&&x.components&&X(new Set(Object.keys(x.components)))})},[a.isConnected,c]);let Pe=Kt(async x=>{let P=[];for(let ae of x)try{(await ha(ae,c)).added&&P.push(ae)}catch(J){console.error("[Popmelt] Failed to add component to model:",ae,J)}P.length>0&&(X(ae=>{let J=new Set(ae);for(let Le of P)J.add(Le);return J}),B(P[P.length-1]))},[c]),Re=Kt(x=>{B(x)},[]),Me=Kt(()=>{er(c).then(x=>{x!=null&&x.components&&X(new Set(Object.keys(x.components)))})},[c]),et=Kt(async x=>{try{(await ya(x,c)).removed&&X(ae=>{let J=new Set(ae);return J.delete(x),J})}catch(P){console.error("[Popmelt] Failed to remove component from model:",P)}},[c]),Ve=Kt((x,P)=>{s({type:"MODIFY_SPACING_TOKEN",payload:x}),s({type:"ADD_SPACING_TOKEN_CHANGE",payload:P})},[s]),Tt=Kt((x,P)=>{s({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:x,originalValue:P}})},[s]),[Mt,zt]=Zt(null),[tt,gn]=Zt(()=>typeof window=="undefined"?null:localStorage.getItem(Xs)||null);$t(()=>{tt?localStorage.setItem(Xs,tt):localStorage.removeItem(Xs)},[tt]);let[$,de]=Zt(0),Te=qt([]);$t(()=>{let x=Te.current,P=i.spacingTokenMods;Te.current=P;let ae=new Map(x.map(Be=>[Be.tokenPath,Be])),J=new Map(P.map(Be=>[Be.tokenPath,Be])),Le=!1;for(let[Be,Xe]of J){let Ye=ae.get(Be);if(!(Ye&&Ye.currentValue===Xe.currentValue)){Le=!0,Xe.currentValue==="__deleted__"?ba(Be,c).catch(mt=>console.error("[Popmelt] Failed to sync token delete:",mt)):Ai(Be,Xe.currentValue,c).catch(mt=>console.error("[Popmelt] Failed to sync token update:",mt));for(let mt of Xe.targets){let nt=document.querySelector(mt.selector);if(nt)if(Xe.currentValue==="__deleted__")nt.style.removeProperty(mt.property);else{let ut=Xe.currentPx;ut>0&&nt.style.setProperty(mt.property,`${ut}px`,"important")}}}}for(let[Be,Xe]of ae)if(!J.has(Be)){Le=!0,Ai(Be,Xe.originalValue,c).catch(Ye=>console.error("[Popmelt] Failed to restore token on undo:",Ye));for(let Ye of Xe.targets){let mt=document.querySelector(Ye.selector);mt&&mt.style.removeProperty(Ye.property)}}Le&&de(Be=>Be+1)},[i.spacingTokenMods,c]);let[me,N]=Zt(()=>Fa()),ye=Kt(x=>{N(x),$a(x)},[]),[re,we]=Zt(()=>typeof window=="undefined"?null:localStorage.getItem(Vs)||null),We=qt(null),[Ge,dt]=Zt(new Set),[xt,vt]=Zt(null);$t(()=>{re?localStorage.setItem(Vs,re):localStorage.removeItem(Vs)},[re]);let Oe="popmelt-in-flight-jobs",[ke,ht]=Zt(()=>{try{let x=localStorage.getItem(Oe);return x?JSON.parse(x):{}}catch(x){return{}}});$t(()=>{try{Object.keys(ke).length>0?localStorage.setItem(Oe,JSON.stringify(ke)):localStorage.removeItem(Oe)}catch(x){}},[ke]),$t(()=>{let x=P=>{if(P.key===Oe)try{let ae=P.newValue?JSON.parse(P.newValue):{};ht(ae)}catch(ae){}};return window.addEventListener("storage",x),()=>window.removeEventListener("storage",x)},[]);let mn=qt(new Map),Wn=qt(new Map);$t(()=>{for(let[x,P]of Object.entries(ke))P.annotationIds.length>0&&mn.current.set(x,P.annotationIds),P.threadId&&Wn.current.set(x,P.threadId)},[ke]);let hn=qt("");$t(()=>{if(i.annotations.length===0)return;let x=Object.keys(ke).sort().join(",");if(x===hn.current)return;hn.current=x;let P=new Set;for(let J of Object.values(ke))for(let Le of J.annotationIds)P.add(Le);let ae=i.annotations.filter(J=>P.has(J.id)?!1:!!(J.status==="in_flight"||(J.status==="pending"||!J.status)&&(J.captured||J.threadId))).map(J=>J.id);ae.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:ae,status:"dismissed"}})},[i.annotations,ke,s]);let Rt=lo(()=>{let x=new Set;for(let P of Object.values(ke))for(let ae of P.annotationIds)x.add(ae);return x},[ke]),oo=lo(()=>{let x=new Set(a.activeJobIds),P=new Set;for(let[ae,J]of Object.entries(ke))if(x.has(ae))for(let Le of J.annotationIds)P.add(Le);return P},[ke,a.activeJobIds]),dn=lo(()=>{let x=new Set(a.activeJobIds),P=Object.entries(ke).filter(([Le])=>!x.has(Le)),ae=P.length,J=new Map;return P.forEach(([,Le],Be)=>{let Xe=`(${Be+1}/${ae})`;for(let Ye of Le.annotationIds)J.set(Ye,Xe)}),J},[ke,a.activeJobIds]),le=lo(()=>{let x=new Set;for(let P of Object.values(ke))for(let ae of P.styleSelectors)x.add(ae);return x},[ke]),Ie=lo(()=>{let x=new Map;for(let P of Object.values(ke)){for(let ae of P.styleSelectors)x.set(ae,P.color);for(let ae of P.annotationIds){let J=i.annotations.find(Le=>Le.id===ae);if(J&&(J.linkedSelector&&x.set(J.linkedSelector,P.color),J.groupId))for(let Le of i.annotations)Le.groupId===J.groupId&&Le.linkedSelector&&x.set(Le.linkedSelector,P.color)}}return x},[ke,i.annotations]),Ue=qt(i.annotations);Ue.current=i.annotations;let on=qt(i.styleModifications);on.current=i.styleModifications;let Qt=qt(ke);Qt.current=ke,$t(()=>{let x=null,P=()=>{var Ye,mt;if(Object.keys(Qt.current).length>0)return;let J=Ue.current,Le=on.current,Be=[],Xe=[];for(let nt of J){if(!nt.linkedSelector||!nt.linkedSelector.startsWith("[data-pm=")||nt.pathname||nt.captured||nt.status&&nt.status!=="pending")continue;let ut=document.querySelector(nt.linkedSelector);!ut&&((mt=(Ye=nt.elements)==null?void 0:Ye[0])!=null&&mt.selector)&&(ut=document.querySelector(nt.elements[0].selector)),ut||Be.push(nt.linkedSelector)}for(let nt of Le)document.querySelector(nt.selector)||Xe.push(nt.selector);(Be.length>0||Xe.length>0)&&s({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:Be,styleSelectors:Xe}})},ae=new MutationObserver(J=>{J.some(Le=>Le.removedNodes.length>0)&&(x&&clearTimeout(x),x=setTimeout(P,3e3))});return ae.observe(document.body,{childList:!0,subtree:!0}),()=>{ae.disconnect(),x&&clearTimeout(x)}},[s]);let An=qt(typeof window!="undefined"?window.location.pathname:"/");$t(()=>{let x=J=>{if(g.current)return;let Le=window.location.pathname;if(J===Le)return;let Be=Ue.current.filter(Ye=>{var mt;return Ye.pathname===J&&((mt=Ye.status)!=null?mt:"pending")==="pending"});if(console.log(`[Popmelt] Navigation from ${J} \u2192 ${Le}, ${Be.length} pending annotations on departing page`),Be.length===0)return;let Xe=l.current;if(!Xe){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if(Ir(document.body,Xe,Be,{dpr:1}).then(Ye=>Rr(Ye)).then(Ye=>{Ye?(u.current.set(J,Ye),console.log(`[Popmelt] Cached screenshot for ${J} (${(Ye.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${J}`)}).catch(Ye=>{console.warn("[Popmelt] Capture-on-leave failed:",Ye)}),u.current.size>20){let Ye=[...u.current.entries()];u.current=new Map(Ye.slice(-10))}},P=J=>{var Be;let Le=(Be=J.detail)==null?void 0:Be.prevPath;Le&&(x(Le),An.current=window.location.pathname)},ae=()=>{let J=An.current;x(J),An.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",P),window.addEventListener("popstate",ae),()=>{window.removeEventListener("popmelt:locationchange",P),window.removeEventListener("popstate",ae)}},[]),$t(()=>{a.lastCompletedJobId&&a.lastCompletedJobId in ke&&ht(x=>{var J;let Le=x,{[J=a.lastCompletedJobId]:P}=Le;return Gn(Le,[bo(J)])}),a.lastCompletedJobId&&a.lastCompletedJobId===Mt&&(de(x=>x+1),zt(null))},[a.lastCompletedJobId,Mt]);let bn=qt(new Set),rn=qt(!1);$t(()=>{if(!a.isConnected){rn.current=!1;return}rn.current||(rn.current=!0,Qo(c).then(async x=>{var Xe,Ye,mt,nt;if(!x)return;let P=(Xe=x.activeJobs)!=null?Xe:[],ae=(Ye=x.recentJobs)!=null?Ye:[],J=new Set(P.map(ut=>ut.id)),Le=JSON.parse(localStorage.getItem(Oe)||"{}"),Be=new Set;for(let ut of Object.values(Le))if(ut.annotationIds)for(let St of ut.annotationIds)Be.add(St);ht(ut=>{var Xn,kn,Gt;let St=f({},ut),pt=Date.now();for(let ft of Object.keys(St)){if(ft.startsWith("_pending_")){let Sn=parseInt(ft.replace(/^_pending_(?:reply_)?/,""),10);!isNaN(Sn)&&pt-Sn>3e4&&delete St[ft];continue}J.has(ft)||delete St[ft]}for(let ft of P)!St[ft.id]&&((Xn=ft.annotationIds)!=null&&Xn.length||ft.threadId)&&(St[ft.id]={annotationIds:(kn=ft.annotationIds)!=null?kn:[],styleSelectors:[],color:(Gt=ft.color)!=null?Gt:"#888",threadId:ft.threadId});let jt=new Set;for(let ft of ae)if(ft.annotationIds)for(let Sn of ft.annotationIds)jt.add(Sn);for(let ft of Object.keys(St)){if(!ft.startsWith("_pending_"))continue;let Sn=St[ft];Sn&&Sn.annotationIds.some(Ke=>jt.has(Ke))&&delete St[ft]}return St});for(let ut of ae)if(ut.status==="done"&&(mt=ut.annotationIds)!=null&&mt.length&&ut.annotationIds.some(St=>Be.has(St))&&!bn.current.has(ut.id))try{let St=await Gr(c,ut.id);if(!St)continue;let pt=St.events.find(jt=>jt.type==="done");pt&&Array.isArray(pt.resolutions)&&(bn.current.add(ut.id),s({type:"APPLY_RESOLUTIONS",payload:{resolutions:pt.resolutions,threadId:(nt=pt.threadId)!=null?nt:void 0}}))}catch(St){}}))},[a.isConnected,c,s]),$t(()=>{let x=a.events.filter(P=>P.type==="done"&&P.data.resolutions);for(let P of x){let ae=P.data.jobId;bn.current.has(ae)||(bn.current.add(ae),Array.isArray(P.data.resolutions)&&s({type:"APPLY_RESOLUTIONS",payload:{resolutions:P.data.resolutions,threadId:P.data.threadId}}))}},[a.events,s]);let Pn=qt(new Set);$t(()=>{let x=a.events.filter(P=>P.type==="error"&&P.data.cancelled);for(let P of x){let ae=P.data.jobId;if(!ae||Pn.current.has(ae))continue;Pn.current.add(ae);let J=ke[ae];J&&J.annotationIds.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:J.annotationIds,status:"dismissed"}})}},[a.events,ke,s]);let xn=qt(0);$t(()=>{let x=a.incrementalResolutions;if(x.length<=xn.current)return;let P=x.slice(xn.current);xn.current=x.length,s({type:"APPLY_RESOLUTIONS",payload:{resolutions:P}})},[a.incrementalResolutions,s]),$t(()=>{a.incrementalResolutions.length===0&&(xn.current=0)},[a.incrementalResolutions.length]);let sn=Kt(async()=>{let x=l.current;if(!x)return!1;let P=await Ir(document.body,x,i.annotations);if(P.length===0)return!1;let ae=await Va(P,i.annotations,i.styleModifications);return ae&&s({type:"MARK_CAPTURED"}),ae},[i.annotations,i.styleModifications,s]),Mo=Kt((x,P)=>{let ae=p.current.get(x)||[];p.current.set(x,[...ae,...P])},[]),Cn=Kt(async()=>{var Sn;let x=l.current;if(!x)return!1;let P=i.annotations.filter(Ke=>{var At;return((At=Ke.status)!=null?At:"pending")==="pending"}),ae=i.spacingTokenChanges.filter(Ke=>!Ke.captured);if(P.length===0&&i.styleModifications.filter(Ke=>!Ke.captured).length===0&&ae.length===0)return!1;let J=new Map;for(let Ke of P){let At=Ke.pathname||b;J.has(At)||J.set(At,[]),J.get(At).push(Ke)}let Le=new Map,Be=[...J.keys()].filter(Ke=>Ke!==b);if(Be.length>0){let Ke=b,At={x:window.scrollX,y:window.scrollY};g.current=!0;for(let Ut of Be)try{console.log(`[Popmelt] Navigating to ${Ut} for screenshot capture`),await Hc(Ut,r),window.location.pathname!==Ut&&console.warn(`[Popmelt] Navigation to ${Ut} did not take effect (at ${window.location.pathname})`);let Tn=J.get(Ut)||[],Io=await Ir(document.body,x,Tn,{dpr:1}),Ro=await Rr(Io);Ro&&(Le.set(Ut,Ro),console.log(`[Popmelt] Captured ${Ut} (${(Ro.size/1024).toFixed(0)}KB)`))}catch(Tn){console.warn(`[Popmelt] Failed to capture ${Ut}:`,Tn)}await Hc(Ke,r),window.scrollTo(At.x,At.y),g.current=!1}let Xe=P.filter(Ke=>(Ke.pathname||b)===b),Ye=await Ir(document.body,x,Xe.length>0?i.annotations:[],{dpr:1});if(Ye.length>0){let Ke=await Rr(Ye);Ke&&Le.set(b,Ke)}if(Le.size===0)return!1;let mt=_i(P,i.styleModifications,void 0,ae.length>0?ae:void 0),nt=JSON.stringify(mt),ut=new Map;for(let Ke of P){let At=p.current.get(Ke.id);if(At&&At.length>0&&ut.set(Ke.id,At),Ke.groupId){for(let Ut of P)if(Ut.groupId===Ke.groupId&&Ut.id!==Ke.id){let Tn=p.current.get(Ut.id);Tn&&Tn.length>0&&ut.set(Ut.id,Tn)}}}let St=J.size>1;console.log(`[Popmelt] Submit: ${J.size} page(s), ${Le.size} screenshot(s), pages: [${[...J.keys()].join(", ")}], cached: [${[...u.current.keys()].join(", ")}]`);let pt=St?Le:(Sn=Le.get(b))!=null?Sn:Le,jt=P.map(Ke=>Ke.id),Xn=i.styleModifications.filter(Ke=>!Ke.captured).map(Ke=>Ke.selector),kn=Di(i.activeColor),Gt=`_pending_${Date.now()}`,ft={annotationIds:jt,styleSelectors:Xn,color:i.activeColor,threadId:void 0};try{let Ke=JSON.parse(localStorage.getItem(Oe)||"{}");Ke[Gt]=ft,localStorage.setItem(Oe,JSON.stringify(Ke))}catch(Ke){}ht(Ke=>h(f({},Ke),{[Gt]:ft}));try{let{jobId:Ke,threadId:At}=await ga(pt,nt,c,kn,v,K.id,ut.size>0?ut:void 0,Bi());for(let jn of ut.keys())p.current.delete(jn);for(let jn of J.keys())u.current.delete(jn);let Ut=h(f({},ft),{threadId:At});try{let jn=JSON.parse(localStorage.getItem(Oe)||"{}");delete jn[Gt],jn[Ke]=Ut,localStorage.setItem(Oe,JSON.stringify(jn))}catch(jn){}ht(jn=>{let Ri=jn,{[Gt]:qs}=Ri,Ii=Gn(Ri,[bo(Gt)]);return h(f({},Ii),{[Ke]:Ut})}),s({type:"MARK_CAPTURED"}),At&&jt.length>0&&s({type:"SET_ANNOTATION_THREAD",payload:{ids:jt,threadId:At}});let Tn=i.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),Ro=((Tn!=null&&Tn[1]?parseFloat(Tn[1]):29)+60)%360;return s({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${Ro})`}),!0}catch(Ke){try{let At=JSON.parse(localStorage.getItem(Oe)||"{}");delete At[Gt],localStorage.setItem(Oe,JSON.stringify(At))}catch(At){}return ht(At=>{let Io=At,{[Gt]:Ut}=Io;return Gn(Io,[bo(Gt)])}),console.error("[Pare] Failed to send to bridge:",Ke),!1}},[i.annotations,i.styleModifications,i.spacingTokenChanges,i.activeColor,s,c,v,K.id,b,r]),Ko=Kt(async()=>{if(tt){we(tt);return}try{let{jobId:x,threadId:P}=await va(c,v,K.id);zt(x),gn(P);let ae={annotationIds:[],styleSelectors:[],color:"#6b7280",threadId:P};ht(J=>h(f({},J),{[x]:ae})),we(P)}catch(x){console.error("[Popmelt] Failed to start synthesize:",x)}},[c,v,K.id,tt]),Jt=Kt(async(x,P,ae)=>{var mt,nt,ut,St;let J=(St=(ut=(mt=Object.values(Qt.current).find(pt=>pt.threadId===x))==null?void 0:mt.color)!=null?ut:(nt=i.annotations.find(pt=>pt.threadId===x))==null?void 0:nt.color)!=null?St:i.activeColor,Le=i.annotations.filter(pt=>pt.threadId===x&&(pt.status==="waiting_input"||pt.status==="resolved"||pt.status==="needs_review")),Be=Le.map(pt=>pt.id),Xe=`_pending_reply_${Date.now()}`,Ye={annotationIds:Be,styleSelectors:[],color:J,threadId:x};try{let pt=JSON.parse(localStorage.getItem(Oe)||"{}");pt[Xe]=Ye,localStorage.setItem(Oe,JSON.stringify(pt))}catch(pt){}ht(pt=>h(f({},pt),{[Xe]:Ye}));try{let pt=Di(i.activeColor),{jobId:jt}=await Sa(x,P,c,pt,v,K.id,ae,Bi()),Xn=f({},Ye);try{let kn=JSON.parse(localStorage.getItem(Oe)||"{}");delete kn[Xe],kn[jt]=Xn,localStorage.setItem(Oe,JSON.stringify(kn))}catch(kn){}ht(kn=>{let Sn=kn,{[Xe]:Gt}=Sn,ft=Gn(Sn,[bo(Xe)]);return h(f({},ft),{[jt]:Xn})}),Le.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:Be,status:"in_flight"}}),a.dismissQuestion(x)}catch(pt){try{let jt=JSON.parse(localStorage.getItem(Oe)||"{}");delete jt[Xe],localStorage.setItem(Oe,JSON.stringify(jt))}catch(jt){}ht(jt=>{let Gt=jt,{[Xe]:Xn}=Gt;return Gn(Gt,[bo(Xe)])}),console.error("[Pare] Failed to send reply:",pt)}},[i.activeColor,i.annotations,c,a.dismissQuestion,s,v,K.id]),vn=qt(new Set);$t(()=>{for(let x of a.pendingQuestions){if(vn.current.has(x.jobId))continue;vn.current.add(x.jobId);let P=x.annotationIds&&x.annotationIds.length>0?x.annotationIds:void 0;!P&&x.threadId&&(P=i.annotations.filter(ae=>ae.threadId===x.threadId).map(ae=>ae.id)),P&&P.length>0&&s({type:"SET_ANNOTATION_QUESTION",payload:{ids:P,question:x.question,threadId:x.threadId}})}},[a.pendingQuestions,s,i.annotations]);let Vn=lo(()=>{if(a.activeJobId&&a.activeJobId in ke)return ke[a.activeJobId].color;let x=Object.values(ke);return x.length>0?x[x.length-1].color:void 0},[a.activeJobId,ke]),Ht=Kt(x=>{we(x)},[]),Ft=Kt(x=>{var J;let P=ke[x],ae=(P==null?void 0:P.threadId)||Wn.current.get(x);ae&&(We.current=(J=P==null?void 0:P.color)!=null?J:null,we(ae))},[ke]),On=Kt(x=>{if(!x){vt(null);return}let P=mn.current.get(x);P&&P.length>0?vt(new Set(P)):vt(null)},[]),Dt=Kt(async x=>{try{let P=x?`${c}/cancel?jobId=${x}`:`${c}/cancel`;await fetch(P,{method:"POST"})}catch(P){}},[c]);$t(()=>{i.activeTool==="model"&&re&&re!==tt&&we(null)},[i.activeTool]);let at=qt(null);$t(()=>{i.isAnnotating?at.current&&(we(at.current),at.current=null):re&&(at.current=re,we(null))},[i.isAnnotating]);let _t=lo(()=>{if(!re)return null;for(let[x,P]of Object.entries(ke))if(P.threadId===re)return x;for(let[x,P]of Object.entries(a.activeJobThreads))if(P===re)return x;return null},[re,ke,a.activeJobThreads]),Wt=re?i.annotations.find(x=>x.threadId===re):void 0,qo=lo(()=>_t?a.events.filter(x=>x.data.jobId===_t):Xg,[_t,a.events.length]),co=lo(()=>{var x,P;return(P=(x=Wt==null?void 0:Wt.color)!=null?x:We.current)!=null?P:i.activeColor},[Wt==null?void 0:Wt.color,i.activeColor]),kr=Wt?i.annotations.indexOf(Wt)+1:void 0;$t(()=>{var P;let x=(P=Wt==null?void 0:Wt.color)!=null?P:We.current;re&&x&&s({type:"SET_COLOR",payload:x})},[re]);let[uo,po]=Zt(!1),[Zo,kt]=Zt(0),En=qt(null),T=Kt(x=>{x?(En.current&&(clearTimeout(En.current),En.current=null),po(!0)):En.current=setTimeout(()=>{po(!1),En.current=null},150)},[]),z=Kt(()=>{kt(x=>x+1),a.clearEvents(),we(null),dt(new Set),Dt()},[a.clearEvents,Dt]);$t(()=>()=>{En.current&&clearTimeout(En.current)},[]);let[te,he]=Zt(!1);$t(()=>{he(!0)},[]);let se=lo(()=>({isEnabled:t}),[t]);return!t||!te?Er(Ks.Provider,{value:se,children:e}):Fc(Ks.Provider,{value:se,children:[e,Er(ql,{state:i,dispatch:s,onScreenshot:sn,inFlightAnnotationIds:Rt,activeAnnotationIds:oo,queuePositionMap:dn,inFlightStyleSelectors:le,inFlightSelectorColors:Ie,onAttachImages:Mo,onReply:a.isConnected?Jt:void 0,onViewThread:a.isConnected?Ht:void 0,onCloseThread:x=>{we(null),x&&dt(P=>new Set(P).add(x))},onModelComponentsAdd:a.isConnected?Pe:void 0,onModelComponentFocus:a.isConnected?Re:void 0,onModelComponentHover:Q,modelComponentNames:Ae,modelPanelHoveredComponent:q,modelSpacingTokenHover:De,highlightedAnnotationIds:xt,focusedThreadAnnotationId:Wt==null?void 0:Wt.id,externalCanvasRef:l,toolbarRef:d}),Er(Rc,{children:Fc(Mc,{children:[Er(Cc,{state:i,dispatch:s,onScreenshot:sn,onSendToClaude:a.isConnected?Cn:void 0,hasActiveJobs:Object.keys(ke).length>0||a.activeJobIds.length>0,activeJobColor:Vn,onCrosshairHover:T,onClear:z,provider:v,onProviderChange:a.isConnected&&L.length>1?H:void 0,availableProviders:L,modelIndex:C,modelCount:Y.length,modelLabel:K.label,onModelChange:a.isConnected?ee:void 0,onViewThread:a.isConnected?Ht:void 0,isThreadPanelOpen:re!==null&&re!==tt,mcpStatus:E,onInstallMcp:a.isConnected?k:void 0,mcpJustInstalled:ie,bridgeUrl:c,isBridgeConnected:a.isConnected,modelSelectedComponent:ge,modelCanvasHoveredComponent:ce,onModelComponentHover:Ee,onSpacingTokenHover:pe,onModifySpacingToken:a.isConnected?Ve:void 0,onDeleteSpacingToken:a.isConnected?Tt:void 0,modelRefreshKey:$,onModelComponentAdded:Me,onModelComponentRemoved:et,onSynthesizeRules:a.isConnected?Ko:void 0,isSynthesizing:Mt!==null,toolbarRef:d,snapPosition:me,onSnapPositionChange:ye}),re&&Er(Nc,{threadId:re,bridgeUrl:c,accentColor:co,isStreaming:_t!==null,isQueued:_t!==null&&!a.activeJobIds.includes(_t),queuePosition:_t&&!a.activeJobIds.includes(_t)?(()=>{let x=new Set(a.activeJobIds),P=Object.keys(ke).filter(J=>!x.has(J)),ae=P.indexOf(_t);return ae>=0?`(${ae+1}/${P.length})`:void 0})():void 0,streamingEvents:qo,onClose:()=>we(null),onReply:Jt,onCancel:_t?()=>Dt(_t):void 0,lastError:(Lt=($e=a.lastErrorByJob)==null?void 0:$e[_t!=null?_t:""])!=null?Lt:a.lastCompletedJobId&&Wn.current.get(a.lastCompletedJobId)===re?(He=a.lastErrorByJob)==null?void 0:He[a.lastCompletedJobId]:void 0,toolbarRef:d,currentModel:K.id,currentProvider:v,annotationNumber:kr,annotationText:Wt==null?void 0:Wt.text}),Er(Tc,{bridge:a,bridgeUrl:c,inFlightJobs:ke,isVisible:uo||a.lastResponseText!==null||a.activeJobIds.length>0,onHover:T,clearSignal:Zo,onReply:Jt,onViewThread:Ht,onClickJob:Ft,onCancel:Dt,onHoverJob:On,isConnected:a.isConnected,dismissedThreadIds:Ge,snapPosition:me})]})})]})}function em(){let e=Vg(Ks);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{Qg as PopmeltProvider,em as usePopmelt};
|