@popmelt.com/core 0.6.1 → 0.6.3
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/README.md +23 -23
- package/dist/cli.mjs +21 -20
- package/dist/index.mjs +30 -20
- package/dist/plugin-astro.mjs +1 -1
- package/dist/plugin-vite.mjs +1 -1
- package/dist/server-56YLMPXH.mjs +131 -0
- package/dist/server.mjs +21 -20
- package/package.json +2 -2
- package/dist/server-RSWDAN3X.mjs +0 -130
package/dist/index.mjs
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var Cc=Object.defineProperty,Ec=Object.defineProperties;var kc=Object.getOwnPropertyDescriptors;var Er=Object.getOwnPropertySymbols;var js=Object.prototype.hasOwnProperty,Gs=Object.prototype.propertyIsEnumerable;var Ys=(e,t,n)=>t in e?Cc(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))js.call(t,n)&&Ys(e,n,t[n]);if(Er)for(var n of Er(t))Gs.call(t,n)&&Ys(e,n,t[n]);return e},b=(e,t)=>Ec(e,kc(t));var kr=e=>typeof e=="symbol"?e:e+"",no=(e,t)=>{var n={};for(var r in e)js.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&Er)for(var r of Er(e))t.indexOf(r)<0&&Gs.call(e,r)&&(n[r]=e[r]);return n};import{createContext as mg,useCallback as on,useContext as hg,useEffect as Ft,useMemo as er,useRef as _t,useState as cn}from"react";import{useCallback as nl,useEffect as Tc,useSyncExternalStore as Mc}from"react";var Nn="http://localhost:1111";function On(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,b(f({},t),{signal:r.signal})).finally(()=>clearTimeout(o))}async function Us(e=Nn){try{let t=await On(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch(t){return null}}async function Ao(e=Nn){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 Vs(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 Js(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 Vs(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 Vs(p).then(u=>u?{status:u,port:p}: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 Xs(e=Nn,t,n=-1){try{let r=await On(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return r.ok?await r.json():null}catch(r){return null}}async function Ks(e,t,n=Nn,r,o,i,s,l){let a=new FormData;if(e instanceof Map){let c=!0;for(let[p,u]of e){let g=encodeURIComponent(p);a.append(`screenshot-${g}`,u,`screenshot-${g}.png`),c&&(a.append("screenshot",u,"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,p]of s)for(let u=0;u<p.length;u++)a.append(`image-${c}-${u}`,p[u],`image-${c}-${u}.png`);let d=await On(`${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 qs(e=Nn,t){try{let n=await On(`${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 Zs(e,t=Nn){let n=await On(`${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 Qs(e,t=Nn){let n=await On(`${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 pi(e,t,n=Nn){let r=await On(`${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 el(e,t=Nn){let n=await On(`${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 Po(e=Nn){var t;try{let n=await On(`${e}/model`,{},5e3);return n.ok&&(t=(await n.json()).model)!=null?t:null}catch(n){return null}}async function tl(e,t,n=Nn,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 p=0;p<s.length;p++)d.append(`image-reply-${p}`,s[p],`reply-image-${p}.png`);a=await On(`${n}/reply`,{method:"POST",body:d},3e4)}else a=await On(`${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 Rr={};var bo=typeof Rr!="undefined"?Rr.hot:void 0,il,sl,gi=(sl=(il=bo==null?void 0:bo.data)==null?void 0:il.sourceId)!=null?sl:typeof crypto!="undefined"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2);bo!=null&&bo.data&&(bo.data.sourceId=gi);function mi(){return gi}var xo=typeof Rr!="undefined"?Rr.hot:void 0,Qt=xo==null?void 0:xo.data,Ic={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},ll,or=(ll=Qt==null?void 0:Qt.store)!=null?ll:f({},Ic),al,Tr=(al=Qt==null?void 0:Qt.listeners)!=null?al:new Set,cl,ho=(cl=Qt==null?void 0:Qt.activeEs)!=null?cl:null,dl,fi=(dl=Qt==null?void 0:Qt.activeBridgeUrl)!=null?dl:null,go=null,ul,Mr=(ul=Qt==null?void 0:Qt.connectionGeneration)!=null?ul:0;xo!=null&&xo.data&&Object.defineProperties(xo.data,{store:{get:()=>or,configurable:!0},listeners:{get:()=>Tr,configurable:!0},activeEs:{get:()=>ho,configurable:!0},activeBridgeUrl:{get:()=>fi,configurable:!0},connectionGeneration:{get:()=>Mr,configurable:!0},discoveredBridgeUrl:{get:()=>yo,configurable:!0}});var Ir=new Set,No=new Map,Oo={};function mo(e,t){var r;if(!e)return!1;if(Ir.has(e)){let o=No.get(e);return o||(o=[],No.set(e,o)),o.push({type:(r=t.type)!=null?r:"",data:t}),!0}let n=Oo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function Rc(e,t,n){let r=()=>n!==Mr;for(let o of t){if(r())return;Ir.add(o),No.set(o,[])}await Promise.all(t.map(async o=>{var i;try{let s=await Xs(e,o);if(r())return;let l=(i=No.get(o))!=null?i:[];if(s){Zt(a=>{let d=b(f({},a.jobResponses),{[o]:s.accumulated.response}),c=b(f({},a.jobThinking),{[o]:s.accumulated.thinking}),p=[...a.events];for(let u of s.events)p.push({type:u.type,data:u,timestamp:Date.now()});return b(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:p})}),Oo[o]=s.currentSeq;for(let a of l)typeof a.data.seq=="number"&&a.data.seq<=s.currentSeq||ol(a.type,a.data,o)}else for(let a of l)ol(a.type,a.data,o)}finally{Ir.delete(o),No.delete(o)}}))}function ol(e,t,n){if(e==="delta"){let r=t.text||"";Zt(o=>b(f({},o),{jobResponses:b(f({},o.jobResponses),{[n]:(o.jobResponses[n]||"")+r}),currentResponse:n===o.activeJobId?o.currentResponse+r:o.currentResponse,events:[...o.events,{type:"delta",data:t,timestamp:Date.now()}]}))}else if(e==="thinking"){let r=t.text||"";Zt(o=>b(f({},o),{jobThinking:b(f({},o.jobThinking),{[n]:(o.jobThinking[n]||"")+r}),currentThinking:n===o.activeJobId?o.currentThinking+r:o.currentThinking,events:[...o.events,{type:"thinking",data:t,timestamp:Date.now()}]}))}else Zt(r=>b(f({},r),{events:[...r.events,{type:e,data:t,timestamp:Date.now()}]}))}var pl,yo=(pl=Qt==null?void 0:Qt.discoveredBridgeUrl)!=null?pl:null,Bo=null;async function Lc(e){return e&&e!=="http://localhost:1111"?(yo=e,e):yo||Bo||(Bo=Js(e).then(n=>{var r;return yo=(r=n==null?void 0:n.url)!=null?r:null,Bo=null,yo}).catch(()=>(Bo=null,null)),Bo)}function fl(){return yo}function rl(){return or}function Ac(e){return Tr.add(e),()=>{Tr.delete(e)}}function Zt(e){or=e(or);for(let t of Tr)t()}function gl(e){if(ho&&ho.readyState!==EventSource.CLOSED&&fi===e)return;ho&&(ho.close(),ho=null),go&&(clearTimeout(go),go=null),fi=e;let t=++Mr,n=new EventSource(`${e}/events?sourceId=${gi}`);ho=n;let r=()=>t!==Mr;n.addEventListener("connected",()=>{r()||Ao(e).then(o=>{var c,p;if(r())return;let i=(c=o==null?void 0:o.activeJobs)!=null?c:o!=null&&o.activeJob?[o.activeJob]:[],s=new Set(i.map(u=>u.id)),l=(p=o==null?void 0:o.recentJobs)!=null?p:[],a=new Map(l.map(u=>[u.id,u])),d=i.length>0;if(Zt(u=>{let g=f({},u.lastErrorByJob),E=u.activeJobIds.filter(I=>!s.has(I));for(let I of E){let A=a.get(I);(A==null?void 0:A.status)==="error"&&A.error&&(g[I]=A.error)}let w=u.activeJobIds.filter(I=>s.has(I));for(let I of s)w.includes(I)||w.push(I);return b(f({},u),{isConnected:!0,status:d?"streaming":E.length>0||u.status==="disconnected"?"idle":u.status,activeJobId:d?i[i.length-1].id:w.length>0?w[w.length-1]:null,activeJobIds:w,lastErrorByJob:g,lastCompletedJobId:E.length>0?E[E.length-1]:u.lastCompletedJobId})}),d){let u=Array.from(s);Rc(e,u,t).catch(()=>{})}})}),n.addEventListener("job_started",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;mo(s,i)||Zt(l=>{var a,d,c,p;return b(f({},l),{status:"streaming",activeJobId:s,activeJobIds:l.activeJobIds.includes(s)?l.activeJobIds:[...l.activeJobIds,s],jobResponses:b(f({},l.jobResponses),{[s]:(a=l.jobResponses[s])!=null?a:""}),jobThinking:b(f({},l.jobThinking),{[s]:(d=l.jobThinking[s])!=null?d:""}),currentResponse:(c=l.jobResponses[s])!=null?c:"",currentThinking:(p=l.jobThinking[s])!=null?p:"",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(mo(s,i))return;let l=i.text||"";Zt(a=>b(f({},a),{jobResponses:s?b(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(mo(s,i))return;let l=i.text||"";Zt(a=>b(f({},a),{jobThinking:s?b(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;mo(s,i)||Zt(l=>b(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;mo(s,i)||(s&&delete Oo[s],Zt(l=>{var g;let a=s?l.activeJobIds.filter(E=>E!==s):l.activeJobIds,d=f({},l.jobResponses),c=f({},l.jobThinking),p=s?d[s]:void 0;s&&(delete d[s],delete c[s]);let u=s===l.activeJobId?a.length>0?a[a.length-1]:null:l.activeJobId;return b(f(b(f({},l),{activeJobIds:a,activeJobId:u,jobResponses:d,jobThinking:c,lastCompletedJobId:s!=null?s:l.activeJobId,lastResponseText:p||l.currentResponse||i.responseText||null,lastThreadId:(g=i.threadId)!=null?g:null}),s===l.activeJobId?{currentResponse:u&&d[u]||"",currentThinking:u&&c[u]||""}:{}),{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;mo(s,i)||Zt(l=>b(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()||Zt(o=>b(f({},o),{capabilitiesVersion:o.capabilitiesVersion+1}))}),n.addEventListener("queue_drained",()=>{if(!r()){for(let o of Object.keys(Oo))delete Oo[o];Ir.clear(),No.clear(),Zt(o=>b(f({},o),{status:o.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}}),n.addEventListener("error",o=>{var i,s;if(!r()){if(n.readyState===EventSource.CLOSED)Zt(l=>b(f({},l),{isConnected:!1,status:"disconnected"})),go&&(clearTimeout(go),go=null),go=setTimeout(()=>{Ao(e).then(l=>{l&&gl(e)})},5e3);else if(o instanceof MessageEvent){let l=JSON.parse(o.data),a=(i=l.jobId)!=null?i:null;if(mo(a!=null?a:void 0,l))return;a&&delete Oo[a];let d=(s=l.message)!=null?s:"";Zt(c=>{let p=a?c.activeJobIds.filter(g=>g!==a):c.activeJobIds,u=p.length>0?c.status:"error";return b(f({},c),{status:u,activeJobIds:p,lastCompletedJobId:a!=null?a:c.activeJobId,lastErrorByJob:a&&d?b(f({},c.lastErrorByJob),{[a]:d}):c.lastErrorByJob,events:[...c.events,{type:"error",data:l,timestamp:Date.now()}]})})}}}),n.onerror=()=>{r()||n.readyState===EventSource.CLOSED&&Zt(o=>b(f({},o),{isConnected:!1,status:"disconnected"}))}}function ml(e="http://localhost:1111"){let t=Mc(Ac,rl,rl);Tc(()=>{Lc(e).then(o=>{o&&Ao(o).then(i=>{i&&gl(o)})})},[e]);let n=nl(()=>{Zt(()=>b(f({},or),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),r=nl(o=>{Zt(i=>b(f({},i),{pendingQuestions:i.pendingQuestions.filter(s=>s.threadId!==o)}))},[]);return b(f({},t),{clearEvents:n,dismissQuestion:r})}import{useEffect as Pc,useReducer as Bc}from"react";var Oc={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 Lr(){return Math.random().toString(36).substring(2,9)}function hl(e){return e.status?e:e.captured?b(f({},e),{status:"in_flight"}):b(f({},e),{status:"pending"})}function hn(e){return b(f({},e),{undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]})}function Nc(e,t){return b(f({},e),{isAnnotating:t})}function Dc(e,t){return b(f({},e),{activeTool:t,inspectedElement:null})}function Hc(e,t){return b(f({},e),{activeColor:t})}function Fc(e,t){return b(f({},e),{strokeWidth:t})}function _c(e,t){return b(f({},e),{currentPath:[t]})}function zc(e,t){return b(f({},e),{currentPath:[...e.currentPath,t]})}function $c(e){return b(f({},e),{currentPath:[]})}function Wc(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return b(f({},e),{currentPath:[]});let n={id:Lr(),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=hn(e);return b(f({},r),{annotations:[...e.annotations,n],currentPath:[]})}function Yc(e,t){var o;let n=f({id:(o=t.id)!=null?o:Lr(),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:hn(e);return b(f({},r),{annotations:[...e.annotations,n]})}function jc(e,t){let n=hn(e);return b(f({},n),{annotations:e.annotations.map(r=>r.id===t.id?f(b(f({},r),{text:t.text}),t.imageCount!=null?{imageCount:t.imageCount}:{}):r)})}function Gc(e,t){return b(f({},e),{annotations:e.annotations.map(n=>n.id===t.id?b(f({},n),{fontSize:Math.max(12,Math.min(72,t.fontSize))}):n)})}function Vc(e,t){let n=hn(e),r=e.annotations.find(i=>i.id===t.id),o=r==null?void 0:r.groupId;return b(f({},n),{annotations:e.annotations.filter(i=>i.id!==t.id&&!(o&&i.groupId===o))})}function Uc(e,t){let n=t.saveUndo?hn(e):e,r=e.annotations.find(i=>i.id===t.id),o=r==null?void 0:r.groupId;return b(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 b(f({},i),{points:i.points.map(d=>({x:d.x+l,y:d.y+a}))})})})}function Jc(e,t){let n=t.saveUndo?hn(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],p=Math.min(d.x,c.x),u=Math.max(d.y,c.y);o=l-p,i=a-u}return b(f({},n),{annotations:e.annotations.map(s=>s.id===t.id?b(f({},s),{points:t.points}):r.groupId&&s.groupId===r.groupId&&s.type==="text"?b(f({},s),{points:s.points.map(l=>({x:l.x+o,y:l.y+i}))}):s)})}function Xc(e,t){let n=hn(e);return b(f({},n),{annotations:[...e.annotations,...t.annotations.map(hl)]})}function Kc(e,t){let n=new Set,r=[];for(let o of t.annotations)n.has(o.id)||(n.add(o.id),r.push(hl(o)));return b(f({},e),{annotations:r})}function qc(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return b(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 Zc(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return b(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 Qc(e,t){let{id:n,addToSelection:r}=t;if(n===null)return b(f({},e),{selectedAnnotationIds:[],lastSelectedId:null});if(r)if(e.selectedAnnotationIds.includes(n)){let i=e.selectedAnnotationIds.filter(s=>s!==n);return b(f({},e),{selectedAnnotationIds:i,lastSelectedId:i.length>0?i[i.length-1]:null})}else return b(f({},e),{selectedAnnotationIds:[...e.selectedAnnotationIds,n],lastSelectedId:n});return b(f({},e),{selectedAnnotationIds:[n],lastSelectedId:n})}function ed(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 b(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:b(f({},r),{color:t.color})})})}function td(e){return b(f({},e),{annotations:e.annotations.map(t=>b(f({},t),{captured:!0,status:t.status==="pending"||!t.status?"in_flight":t.status})),styleModifications:e.styleModifications.map(t=>b(f({},t),{captured:!0})),spacingTokenChanges:e.spacingTokenChanges.map(t=>b(f({},t),{captured:!0}))})}function nd(e){return b(f({},e),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function od(e,t){return b(f({},e),{inspectedElement:t})}function rd(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=hn(e),E=g.styleModifications.map((w,I)=>I===l?b(f({},w),{changes:[{property:o,original:i,modified:s}],captured:!1}):w);return b(f({},g),{styleModifications:E})}let d=a.changes.findIndex(g=>g.property===o),c,p=e;if(d>=0){let g=a.changes[d];s===g.original?c=a.changes.filter((E,w)=>w!==d):c=a.changes.map((E,w)=>w===d?b(f({},E),{modified:s}):E)}else{if(i===s)return e;p=hn(e),c=[...a.changes,{property:o,original:i,modified:s}]}if(c.length===0)return b(f({},p),{styleModifications:p.styleModifications.filter((g,E)=>E!==l)});let u=p.styleModifications.map((g,E)=>E===l?b(f({},g),{changes:c}):g);return b(f({},p),{styleModifications:u})}else{let a=hn(e),d={selector:n,element:r,changes:[{property:o,original:i,modified:s}]};return b(f({},a),{styleModifications:[...a.styleModifications,d]})}}function id(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=hn(e),a=l.styleModifications.findIndex(d=>d.selector===n);if(a>=0){let d=l.styleModifications[a],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,E)=>E!==u):c=c.map((g,E)=>E===u?b(f({},g),{modified:p.modified}):g):c.push(p)}return c.length===0?b(f({},l),{styleModifications:l.styleModifications.filter((p,u)=>u!==a)}):b(f({},l),{styleModifications:l.styleModifications.map((p,u)=>u===a?b(f({},p),{changes:c,captured:!1}):p)})}else return b(f({},l),{styleModifications:[...l.styleModifications,{selector:n,durableSelector:r,element:o,changes:s}]})}function sd(e,t){let{selector:n,property:r}=t,o=hn(e),i=o.styleModifications.map(s=>s.selector!==n?s:b(f({},s),{changes:s.changes.filter(l=>l.property!==r)})).filter(s=>s.changes.length>0);return b(f({},o),{styleModifications:i})}function ld(e){if(e.styleModifications.length===0)return b(f({},e),{inspectedElement:null});let t=hn(e);return b(f({},t),{styleModifications:[],inspectedElement:null})}function ad(e,t){return b(f({},e),{styleModifications:t})}function cd(e,t){let{updates:n}=t,r=new Map(n.map(o=>[o.id,o]));return b(f({},e),{annotations:e.annotations.map(o=>{let i=r.get(o.id);return i?f(b(f({},o),{points:[i.point,...o.points.slice(1)]}),i.linkedAnchor?{linkedAnchor:i.linkedAnchor}:{}):o})})}function dd(e,t){let n=new Set(t.ids);return b(f({},e),{annotations:e.annotations.map(r=>n.has(r.id)?b(f({},r),{status:t.status}):r)})}function ud(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 b(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)||o.groupId&&r.has(o.groupId)?b(f({},o),{threadId:t.threadId}):o)})}function pd(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 b(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)||o.groupId&&r.has(o.groupId)?b(f({},o),{status:"waiting_input",question:t.question,threadId:t.threadId}):o)})}function fd(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 b(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?b(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 gd(e,t){let{linkedSelectors:n,styleSelectors:r}=t,o=new Set(n),i=new Set(r),s=new Set,l=new Set;for(let u of e.annotations)u.linkedSelector&&o.has(u.linkedSelector)&&(s.add(u.id),u.groupId&&l.add(u.groupId));for(let u of e.annotations)u.groupId&&l.has(u.groupId)&&s.add(u.id);let a=e.annotations.filter(u=>!s.has(u.id)),d=e.styleModifications.filter(u=>!i.has(u.selector));if(a.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 b(f({},e),{annotations:a,styleModifications:d,selectedAnnotationIds:c,lastSelectedId:c.length>0?c[c.length-1]:null,inspectedElement:p})}function md(e,t){let n=e.spacingTokenChanges.findIndex(r=>r.tokenPath===t.tokenPath);return n>=0?b(f({},e),{spacingTokenChanges:e.spacingTokenChanges.map((r,o)=>o===n?t:r)}):b(f({},e),{spacingTokenChanges:[...e.spacingTokenChanges,t]})}function hd(e,t){return b(f({},e),{spacingTokenChanges:t})}function yd(e,t){let n=hn(e),r=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),o;if(r>=0){let i=e.spacingTokenMods[r],s=b(f({},t),{originalValue:i.originalValue,originalPx:i.originalPx});o=e.spacingTokenMods.map((l,a)=>a===r?s:l)}else o=[...e.spacingTokenMods,t];return b(f({},n),{spacingTokenMods:o})}function bd(e,t){let n=hn(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],b(f({},n),{spacingTokenMods:l})}var xd={SET_ANNOTATING:Nc,SET_TOOL:Dc,SET_COLOR:Hc,SET_STROKE_WIDTH:Fc,START_PATH:_c,CONTINUE_PATH:zc,CANCEL_PATH:$c,FINISH_PATH:Wc,ADD_TEXT:Yc,UPDATE_TEXT:jc,UPDATE_TEXT_SIZE:Gc,DELETE_ANNOTATION:Vc,MOVE_ANNOTATION:Uc,RESIZE_ANNOTATION:Jc,PASTE_ANNOTATIONS:Xc,RESTORE_ANNOTATIONS:Kc,UNDO:qc,REDO:Zc,SELECT_ANNOTATION:Qc,UPDATE_ANNOTATION_COLOR:ed,MARK_CAPTURED:td,CLEAR:nd,SELECT_ELEMENT:od,MODIFY_STYLE:rd,MODIFY_STYLES_BATCH:id,CLEAR_STYLE:sd,CLEAR_ALL_STYLES:ld,RESTORE_STYLE_MODIFICATIONS:ad,UPDATE_LINKED_POSITIONS:cd,CLEANUP_ORPHANED:gd,SET_ANNOTATION_STATUS:dd,SET_ANNOTATION_THREAD:ud,SET_ANNOTATION_QUESTION:pd,APPLY_RESOLUTIONS:fd,ADD_SPACING_TOKEN_CHANGE:md,RESTORE_SPACING_TOKEN_CHANGES:hd,MODIFY_SPACING_TOKEN:yd,DELETE_SPACING_TOKEN:bd};function vd(e,t){let n=xd[t.type];return n?n(e,t.payload):e}function yl(){let[e,t]=Bc(vd,Oc);return Pc(()=>{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 Sd}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 wd(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function Cd(){return window.location.pathname}function Do(){return Sd(wd,Cd,()=>"/")}import{domToCanvas as Ed}from"modern-screenshot";function hi(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function yi(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(p=>p.type!=="text"),c=a.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(b(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 l of i)s.push(f(b(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 kd(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 Td(e,t){if(e.length===0)return[];let n=e.map(c=>({annotation:c,bounds:kd(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,l=Math.max(0,r-s),a=[],d=l;for(let{annotation:c,bounds:p}of n){let u=p.maxY+s;if(u-l<=t)a.push(c),d=Math.max(d,u);else{if(a.length>0){let g=(l+d)/2,E=Math.max(0,g-t/2);i.push({top:E,bottom:E+t,annotations:a})}l=Math.max(0,p.minY-s),a=[c],d=p.maxY+s}}if(a.length>0){let c=(l+d)/2,p=Math.max(0,c-t/2);i.push({top:p,bottom:p+t,annotations:a})}return i}function Md(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 Id(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),p=Math.abs(a.x-l.x),u=Math.abs(a.y-l.y);e.strokeRect(d,c,p,u);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,p=Math.abs(a.x-l.x)/2,u=Math.abs(a.y-l.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 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
|
-
`),p=a*1.2,u=4,g=0;for(let E of c)g=Math.max(g,e.measureText(E).width);e.fillRect(l.x-u,l.y-u,g+u*2,c.length*p+u*2),e.fillStyle="#ffffff",c.forEach((E,w)=>{e.fillText(E,l.x,l.y+a+w*p)});break}}}e.restore()}async function rr(e,t,n=[]){try{let r=window.devicePixelRatio||1,o=window.innerWidth,i=window.innerHeight,s=n.filter(c=>{var p;return((p=c.status)!=null?p:"pending")==="pending"});console.log("[Screenshot] Starting capture with",s.length,"active annotations (filtered",n.length-s.length,"captured)");let l=Md(s),a=Td(s,i);if(a.length===0){let c=await bl(e,[],window.scrollY,o,i,r,l);return c?[c]:[]}let d=[];for(let c=0;c<a.length;c++){let p=a[c],u=await bl(e,p.annotations,p.top,o,i,r,l);u?d.push(u):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 bl(e,t,n,r,o,i,s){try{let l=await Ed(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),Id(d,t,n,i,s),new Promise(c=>{a.toBlob(p=>c(p),"image/png")})):null}catch(l){return console.error("Region capture failed:",l),null}}async function ir(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 xl(e,t,n){try{let r=Array.isArray(e)?e:[e];if(r.length===0)return!1;let o=await ir(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=yi(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 jt,useEffect as an,useMemo as Kr,useRef as Bt,useState as dt}from"react";import{useCallback as _o,useRef as Ld}from"react";function bi(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 xi(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 vi(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 Si(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 Jt='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function Rd(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 Ho(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function vl(e,t,n){let r=[];for(let o of t)r.push(...Rd(e,o,n));return r}function Fo(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 Sl(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 ${Jt}`,e.textBaseline="middle";let c=s!==void 0?Math.min(400,Math.max(60,window.innerWidth-s-16)):400,p=Fo(e,d,c),u=e.measureText(p).width;e.fillStyle=r,e.fillRect(t.x-4,t.y-4,u+8,l+8),e.fillStyle="#ffffff",e.fillText(p,t.x,t.y+l/2)}var wl=11,wi=4,Ad=`600 ${wl}px system-ui, -apple-system, sans-serif`;function Ci(e,t,n){return e.map(r=>({x:r.x-t,y:r.y-n}))}function Pd(e,t,n,r,o,i){let s=String(r);e.font=Ad;let a=e.measureText(s).width+wi*2,d=wl+wi*2,c=t-a/2,p=n+i/2+2;e.fillStyle=o,e.fillRect(c,p,a,d),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(s,c+wi,p+d/2)}function Bd(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 Cl(){let e=Ld(null),t=_o(()=>{let l=e.current;if(!l)return;let a=l.getContext("2d");a&&a.clearRect(0,0,l.width,l.height)},[]),n=_o((l,a,d)=>{var E;let c=e.current;if(!c)return;let p=c.getContext("2d");if(!p)return;let g=((E=l.status)!=null?E:l.captured?"in_flight":"pending")==="pending"||d?l.color:"#999999";switch(l.type){case"freehand":xi(p,l.points,g,l.strokeWidth);break;case"line":vi(p,l.points,g,l.strokeWidth);break;case"rectangle":Si(p,l.points,g,l.strokeWidth);break;case"circle":bi(p,l.points,g,l.strokeWidth);break;case"text":l.text&&l.points[0]&&Sl(p,l.points[0],l.text,g,l.fontSize,a,l.points[0].x);break}},[]),r=_o((l,a,d,c)=>{let p=e.current;if(!p||l.length<2)return;let u=p.getContext("2d");if(u)switch(a){case"freehand":xi(u,l,d,c);break;case"line":vi(u,l,d,c);break;case"rectangle":Si(u,l,d,c);break;case"circle":bi(u,l,d,c);break}},[]),o=_o((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 p=l.points[0],u=l.points[l.points.length-1];[p,u].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 p=l.points[0],u=l.points[l.points.length-1],g=Math.min(p.x,u.x),E=Math.max(p.x,u.x),w=Math.min(p.y,u.y),I=Math.max(p.y,u.y),A=(g+E)/2,U=(w+I)/2;[{x:A,y:w},{x:A,y:I},{x:g,y:U},{x:E,y:U}].forEach(y=>{c.beginPath(),c.rect(y.x-a/2,y.y-a/2,a,a),c.fill(),c.stroke()});return}if(l.type==="rectangle"||l.type==="freehand"){let p,u,g,E;if(l.type==="freehand")p=Math.min(...l.points.map(I=>I.x)),u=Math.max(...l.points.map(I=>I.x)),g=Math.min(...l.points.map(I=>I.y)),E=Math.max(...l.points.map(I=>I.y));else{let I=l.points[0],A=l.points[l.points.length-1];p=Math.min(I.x,A.x),u=Math.max(I.x,A.x),g=Math.min(I.y,A.y),E=Math.max(I.y,A.y)}[{x:p,y:g},{x:u,y:g},{x:p,y:E},{x:u,y:E}].forEach(I=>{c.beginPath(),c.rect(I.x-a/2,I.y-a/2,a,a),c.fill(),c.stroke()})}}},[]),i=_o((l,a,d,c,p,u,g,E=0,w=0,I,A)=>{var U;if(t(),l.forEach(B=>{var Z;let y=b(f({},B),{points:Ci(B.points,E,w)}),v=I==null?void 0:I.get(B.id),O=(Z=A==null?void 0:A.has(B.id))!=null?Z:!1;n(y,v,O)}),a.length>0){let B=Ci(a,E,w);r(B,d,c,p)}if(u&&u.length>0&&g){let B=e.current,y=B==null?void 0:B.getContext("2d");for(let v of u){let O=l.find(Z=>Z.id===v);if(O){let Z=b(f({},O),{points:Ci(O.points,E,w)});if(o(Z,g),y&&O.type!=="text"&&I&&!(O.groupId&&l.some(R=>R.groupId===O.groupId&&R.type==="text"))){let R=I.get(O.id);if(R!==void 0){let $=Bd(Z,g);if($){let L=((U=O.status)!=null?U:O.captured?"in_flight":"pending")==="pending"?O.color:"#999999";Pd(y,$.x,$.y,R,L,g)}}}}}}},[t,n,r,o]),s=_o(()=>{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 Od,useRef as Nd}from"react";function El(){let e=Nd({shift:!1,cmd:!1});return Od(()=>{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 Dd}from"react";function kl(e,t,n,r,o){Dd(()=>{let i=s=>{if(e){if(e.linkedSelector)return;s.preventDefault(),s.stopPropagation();let a=s.deltaY>0?-2:2;t(d=>d?b(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 _l,useEffect as $r,useRef as zl,useState as pr}from"react";function Ar(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 Ei(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 Pr(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 wn(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 pn(e){try{return document.querySelector(e)}catch(t){return null}}function Br(e,t=0){var a;let n=Ei(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=Pr(s.fiber))!=null?a:e;return{name:s.name,path:r,depthIndex:i,rootElement:l}}function Ml(e,t){var i,s;let n=Ei(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=Pr(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=Pr(n[o].fiber))!=null?s:e;return{name:t,path:n.map(a=>a.name),depthIndex:o,rootElement:l}}return null}function zo(e){let t=$o(),n=[],r=new Set,o=t.currentNode;for(;o=t.nextNode();){let i=Ml(o,e);i&&!r.has(i.rootElement)&&(r.add(i.rootElement),n.push(i))}return n}function ki(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),r=$o(),o=new Set,i=r.currentNode;for(;(i=r.nextNode())&&n.size>0;)for(let s of n){let l=Ml(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 $o(){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 yn(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=Il(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=Ar(e);o&&(t.reactComponent=o.name);let i=Hd(e);return i&&(t.context=i),t}function Il(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function vo(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 Hd(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 l=s.x-r,a=s.y-o;if(l<0||a<0||l>window.innerWidth||a>window.innerHeight)continue;let d=vo(l,a);d&&!t.has(d)&&(t.add(d),n.push(yn(d)))}return n.slice(0,3)}function Ti(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 Yt(e,t){return e.style.getPropertyValue(t)!==""}function Fd(e,t=30){if(e<=0)return[];let n=[],r=$o(),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);!Yt(s,"padding-top")&&Math.abs((parseFloat(a.paddingTop)||0)-e)<o&&n.push({element:s,property:"padding-top"}),!Yt(s,"padding-bottom")&&Math.abs((parseFloat(a.paddingBottom)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-bottom"}),!Yt(s,"padding-left")&&Math.abs((parseFloat(a.paddingLeft)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-left"}),!Yt(s,"padding-right")&&Math.abs((parseFloat(a.paddingRight)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-right"}),!Yt(s,"margin-top")&&Math.abs((parseFloat(a.marginTop)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-top"}),!Yt(s,"margin-bottom")&&Math.abs((parseFloat(a.marginBottom)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-bottom"}),!Yt(s,"margin-left")&&Math.abs((parseFloat(a.marginLeft)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-left"}),!Yt(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=Yt(s,"gap"),p=parseFloat(a.gap)||0,u=parseFloat(a.rowGap)||0,g=parseFloat(a.columnGap)||0;!c&&Math.abs(p-e)<o?n.push({element:s,property:"gap"}):!Yt(s,"row-gap")&&Math.abs(u-e)<o?n.push({element:s,property:"row-gap"}):!Yt(s,"column-gap")&&Math.abs(g-e)<o&&n.push({element:s,property:"column-gap"})}}return n}function Mi(e,t=30){if(e<=0)return[];let n=[],r=$o(),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,p=parseFloat(a.borderBottomWidth)||0,u=parseFloat(a.borderLeftWidth)||0,g=s.clientWidth,E=s.clientHeight,w=parseFloat(a.paddingTop)||0;!Yt(s,"padding-top")&&Math.abs(w-e)<o&&n.push({x:l.left+u,y:l.top+d,width:g,height:e,direction:"vertical",property:"padding-top"});let I=parseFloat(a.paddingBottom)||0;!Yt(s,"padding-bottom")&&Math.abs(I-e)<o&&n.length<t&&n.push({x:l.left+u,y:l.top+d+E-e,width:g,height:e,direction:"vertical",property:"padding-bottom"});let A=parseFloat(a.paddingLeft)||0;!Yt(s,"padding-left")&&Math.abs(A-e)<o&&n.length<t&&n.push({x:l.left+u,y:l.top+d,width:e,height:E,direction:"horizontal",property:"padding-left"});let U=parseFloat(a.paddingRight)||0;!Yt(s,"padding-right")&&Math.abs(U-e)<o&&n.length<t&&n.push({x:l.left+u+g-e,y:l.top+d,width:e,height:E,direction:"horizontal",property:"padding-right"});let B=parseFloat(a.marginTop)||0;!Yt(s,"margin-top")&&Math.abs(B-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 y=parseFloat(a.marginBottom)||0;!Yt(s,"margin-bottom")&&Math.abs(y-e)<o&&n.length<t&&n.push({x:l.left,y:l.bottom,width:l.width,height:e,direction:"vertical",property:"margin-bottom"});let v=parseFloat(a.marginLeft)||0;!Yt(s,"margin-left")&&Math.abs(v-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 O=parseFloat(a.marginRight)||0;!Yt(s,"margin-right")&&Math.abs(O-e)<o&&n.length<t&&n.push({x:l.right,y:l.top,width:e,height:l.height,direction:"horizontal",property:"margin-right"});let Z=a.display;if((Z.includes("flex")||Z.includes("grid"))&&n.length<t&&!Yt(s,"gap")){let R=Array.from(s.children).filter($=>{let C=getComputedStyle($);return C.display!=="none"&&C.position!=="absolute"&&C.position!=="fixed"});if(R.length>=2)for(let $=0;$<R.length-1&&n.length<t;$++){let C=R[$].getBoundingClientRect(),L=R[$+1].getBoundingClientRect(),X=L.top-C.bottom;Math.abs(X-e)<o&&X>.5&&n.push({x:Math.min(C.left,L.left),y:C.bottom,width:Math.max(C.right,L.right)-Math.min(C.left,L.left),height:X,direction:"vertical",property:"gap"});let ge=L.left-C.right;Math.abs(ge-e)<o&&ge>.5&&n.push({x:C.right,y:Math.min(C.top,L.top),width:ge,height:Math.max(C.bottom,L.bottom)-Math.min(C.top,L.top),direction:"horizontal",property:"gap"})}}}return n}function Or(e){return typeof e=="string"?{value:e}:e}var Al={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 Ll(e,t){let n=Al[t];return n?n.includes(e):!1}function _d(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 zd(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 Ii(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let o=[],i=$o(),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(!_d(d,c))continue;let p=zd(c);if(p&&!(e.property&&!Ll(p,e.property))){o.push({element:l,property:p});break}}}return o}let r=Fd(n,t*2);return e.property?r.filter(o=>Ll(o.property,e.property)).slice(0,t):r.slice(0,t)}function Ri(e,t=30){let n=Ii(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,p=i.clientWidth,u=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:p,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+u-g,width:p,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:u,direction:"horizontal",property:o.property});break}case"padding-right":{let g=parseFloat(l.paddingRight)||0;r.push({x:s.left+c+p-g,y:s.top+a,width:g,height:u,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(E=>{let w=getComputedStyle(E);return w.display!=="none"&&w.position!=="absolute"&&w.position!=="fixed"});for(let E=0;E<g.length-1&&r.length<t;E++){let w=g[E].getBoundingClientRect(),I=g[E+1].getBoundingClientRect(),A=I.top-w.bottom;A>.5&&r.push({x:Math.min(w.left,I.left),y:w.bottom,width:Math.max(w.right,I.right)-Math.min(w.left,I.left),height:A,direction:"vertical",property:"gap"});let U=I.left-w.right;U>.5&&r.push({x:w.right,y:Math.min(w.top,I.top),width:U,height:Math.max(w.bottom,I.bottom)-Math.min(w.top,I.top),direction:"horizontal",property:"gap"})}break}}}return r}function Pl(e,t){let n=new Set,r=sr(t);for(let o of e){let i=Ol[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(":"),p=c>=0?d.slice(c+1):d;if(p===a){n.add(p);break}}}}return[...n]}function Bl(e){let t=new Set;for(let n of e)for(let[r,o]of Object.entries(Al))if(o.includes(n.property)){t.add(r);break}if(t.size===1)return[...t][0]}function Li(e,t,n){if(t===n)return e;let r=sr(t),o=sr(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 $d={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 sr(e){var t;return(t=$d[e])!=null?t:`[${e}px]`}var Ol={"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 Wd(e,t,n,r){let o=Ol[t];if(!o)return null;let i=sr(n);for(let s of o){let l=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+s+"-(?:"+Yd(i)+"|\\["+n+"px\\]))(?:\\s|$)"),a=e.match(l);if(a!=null&&a[1]){let d=sr(r),c=a[1].lastIndexOf(":"),p=c>=0?a[1].slice(0,c+1):"";return{matched:a[1],suggested:`${p}${s}-${d}`}}}return null}function Yd(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function Nl(e,t,n){let r=new Set,o=[];for(let i of e){let s=wn(i.element),l=`${s}::${i.property}`;if(r.has(l))continue;r.add(l);let a=Ar(i.element),d=i.element.className||"",c=Wd(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 lr(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function Ai(e,t){if(e instanceof HTMLElement){let r=e.style.getPropertyValue(t);if(r)return r}let n=jd(e,t);return n&&n.includes("var(")?n:lr(e,t)}function jd(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 Nr(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 Dr(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function ar(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function Gd(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 So(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 p=(d.bottom+c.top)/2;n.push({axis:"row",x:r.left,y:p-l/2,w:r.width,h:l})}else{let p=(d.right+c.left)/2;n.push({axis:"column",x:p-l/2,y:r.top,w:l,h:r.height})}}return Gd(n)}function Pi(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 Wo(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 wo(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 Bi(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function Yo(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 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 cr(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 Ge(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function Oi(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function Hr(e){var t;for(let n of e){let r=pn(n.selector);if(!r&&n.durableSelector&&(r=pn(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)Ge(r,o.property,o.modified)}}function Ni(e,t){let n=pn(e);if(!n)return;let r=t.find(o=>o.selector===e);if(r)for(let o of r.changes)Oi(n,o.property,o.original)}function Fr(e){for(let t of e){let n=pn(t.selector);if(n)for(let r of t.changes)Oi(n,r.property,r.original)}}function Hl(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){Hl(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Vd(o.style,t,n,r)}}}function Vd(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 _r=null,Ud=5e3;function Di(){if(_r&&Date.now()-_r.timestamp<Ud)return _r.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{Hl(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();Fl(l)&&e.push({name:s,value:l,usage:`var(${s})`})}}let o=e.sort((i,s)=>i.name.localeCompare(s.name));return _r={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 dr(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 ur(e,t){if(!e)return null;let n=Dl(e);if(!n)return null;for(let r of t){let o=Dl(r.value);if(o&&n===o)return r}return null}function Dl(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 Co,jsx as at,jsxs as zn}from"react/jsx-runtime";var Ln=22,oo=12,Jd=3,Xd=250,zr=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Kd=3e3;function qd(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=no(l,["left","top","avoidBottom","style","children"]);let a=e+oo,d=t+oo,c=n!==void 0?`${n}px`:"100vh";return at("div",b(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:e,top:t,padding:oo},r),children:at("div",{style:{transform:`translate(min(0px, calc(100vw - ${a}px - 100%)), min(0px, calc(${c} - ${d}px - 100%)))`},children:o})}))}function $l({annotations:e,supersededAnnotations:t,inFlightIds:n,scrollX:r,scrollY:o,annotationGroupMap:i,onViewThread:s,onSelectAnnotation:l,onHoverAnnotation:a,canvasRef:d}){var v,O,Z,N,R,$,C;let[c,p]=pr(0),[u,g]=pr(()=>Math.floor(Math.random()*zr.length)),E=!!(n&&n.size>0);$r(()=>{if(!E)return;let L=setInterval(()=>{p(ge=>(ge+1)%Jd)},Xd),X=setInterval(()=>{g(ge=>(ge+1)%zr.length)},Kd);return()=>{clearInterval(L),clearInterval(X)}},[E]);let w=[];for(let L of e){if(L.type!=="text"||!L.text||!L.points[0]||t.has(L))continue;let X=L.groupId?e.filter(Be=>Be.groupId===L.groupId):[L],ge=!!(n&&(n.has(L.id)||X.some(Be=>n.has(Be.id)))),ve=(v=L.status)!=null?v:"pending",ye=X.some(Be=>Be.status==="resolved"||Be.status==="needs_review"),ae=X.some(Be=>Be.threadId);if(!ge&&ve!=="resolved"&&ve!=="needs_review"&&!ye&&!ae)continue;let ze=L.threadId||((O=X.find(Be=>Be.threadId))==null?void 0:O.threadId),Me=ve==="needs_review"||X.some(Be=>Be.status==="needs_review"),ne=X.reduce((Be,De)=>{var z;return Be+((z=De.replyCount)!=null?z:0)},0),He=L.points[0],Ne=L.fontSize||12,Ve=Ne*1.4,$e=i.get(L.id),Ie=L.text.replace(/\n/g," "),st=$e!==void 0?$e+". "+Ie:Ie,ct=(N=(Z=d==null?void 0:d.current)==null?void 0:Z.getContext("2d"))!=null?N:document.createElement("canvas").getContext("2d");if(!ct)continue;ct.font=`${Ne}px ${Jt}`;let _=He.x-r,xe=Ho(_),ce=Fo(ct,st,xe),Se=ct.measureText(ce).width;w.push({id:L.id,threadId:ze,linkedSelector:L.linkedSelector||((R=X.find(Be=>Be.linkedSelector))==null?void 0:R.linkedSelector),x:He.x+Se+4,y:He.y-4,size:Ve+8,color:L.color,isInFlight:ge,isNeedsReview:Me,replyCount:ne})}if(w.length===0)return null;let I=2,A=(C=($=d==null?void 0:d.current)==null?void 0:$.getContext("2d"))!=null?C:document.createElement("canvas").getContext("2d"),U=w.map(L=>{var ae;let X;L.isInFlight?X=(ae=zr[u])!=null?ae:"thinking":L.replyCount>0?X=`${L.replyCount} ${L.replyCount===1?"reply":"replies"}`:L.threadId?X="1 reply":X="Cancelled";let ge=11,ve=4,ye=X.length*7.2;return A&&(A.font=`12px ${Jt}`,ye=A.measureText(X).width),4+ge+ve+ye+4}),B=typeof window!="undefined"?window.innerHeight:9999,y=[];for(let L=0;L<w.length;L++){let X=w[L].y-o,ge=Math.min(X,B-Ln),ve=ge+Ln,ae=w[L].x-r;for(let ze=0;ze<L;ze++){let Me=w[ze].y-o,ne=Math.min(Me,B-Ln),He=ne+Ln;if(!(ge<He&&ve>ne))continue;let Ve=y[ze]+U[ze];ae<Ve+I&&(ae=Ve+I)}y.push(ae)}return at(Co,{children:w.map((L,X)=>{let ge=!!L.threadId;return at(qd,{left:y[X]-oo,top:L.y-o-oo,onMouseDown:ge?ve=>ve.stopPropagation():void 0,onClick:ge?ve=>{if(ve.stopPropagation(),l==null||l(L.id),s==null||s(L.threadId),L.linkedSelector)try{let ye=document.querySelector(L.linkedSelector);if(ye){let ae=ye.getBoundingClientRect();(ae.bottom<0||ae.top>window.innerHeight)&&ye.scrollIntoView({behavior:"smooth",block:"center"})}}catch(ye){}}:void 0,onMouseEnter:a?()=>a(L.id):void 0,onMouseLeave:a?()=>a(null):void 0,style:{pointerEvents:ge?"auto":"none",cursor:ge?"pointer":void 0,zIndex:9999},children:at("div",{"data-devtools":"annotation-badge",style:{height:L.size,display:"flex",alignItems:"center",backgroundColor:L.color,fontFamily:Jt,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:L.isInFlight?zn(Co,{children:[at("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:c===1?zn(Co,{children:[at("circle",{cx:"7",cy:"7",r:"2"}),at("circle",{cx:"17",cy:"7",r:"2"}),at("circle",{cx:"7",cy:"17",r:"2"}),at("circle",{cx:"17",cy:"17",r:"2"})]}):zn(Co,{children:[at("circle",{cx:"12",cy:"6",r:"2"}),at("circle",{cx:"6",cy:"12",r:"2"}),at("circle",{cx:"18",cy:"12",r:"2"}),at("circle",{cx:"12",cy:"18",r:"2"})]})}),at("span",{style:{opacity:.7},children:zr[u]})]}):zn(Co,{children:[L.isNeedsReview?at("span",{style:{fontWeight:700},children:"?"}):at("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:at("polyline",{points:"4 12 10 18 20 6"})}),at("span",{style:{opacity:.7},children:L.replyCount>0?`${L.replyCount} ${L.replyCount===1?"reply":"replies"}`:L.threadId?"1 reply":"Cancelled"})]})})},L.id)})})}function Hi({inFlightSelectorColors:e,animated:t=!0}){let[n,r]=pr([]);return $r(()=>{if(e.size===0){r([]);return}let o=null,i=()=>{let a=[];for(let[d,c]of e){let p=pn(d);if(!p)continue;let u=p.getBoundingClientRect();a.push({selector:d,top:u.top,left:u.left,width:u.width,height:u.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:zn(Co,{children:[t&&at("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(o=>at("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:at("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:at("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 Wl({annotations:e,supersededAnnotations:t,scrollX:n,scrollY:r,onReply:o,annotationGroupMap:i,canvasRef:s,onHoverAnnotation:l}){let a=e.filter(p=>t.has(p)?!1:p.status==="waiting_input"&&p.question&&p.threadId);if(a.length===0)return null;let d=new Set,c=[];for(let p of a){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],E=u.fontSize||12,w=E*1.4,I=i.get(u.id),A=u.text.replace(/\n/g," "),U=I!==void 0?I+". "+A:A,y=document.createElement("canvas").getContext("2d");if(!y)continue;y.font=`${E}px ${Jt}`;let v=g.x-n,O=Ho(v),Z=Fo(y,U,O),N=y.measureText(Z).width;c.push({annotation:p,x:g.x+N+4,y:g.y-4,size:w+8})}}return c.length===0?null:at(Co,{children:c.map(({annotation:p,x:u,y:g,size:E})=>at(Zd,{annotation:p,x:u-n,y:g-r,size:E,onReply:o,onHoverAnnotation:l},`question-${p.threadId}`))})}function Zd({annotation:e,x:t,y:n,size:r,onReply:o,onHoverAnnotation:i}){let[s,l]=pr(!1),[a,d]=pr(""),c=zl(null),p=zl(null);$r(()=>{s&&c.current&&c.current.focus()},[s]),$r(()=>{if(!s)return;let I=U=>{p.current&&!U.composedPath().includes(p.current)&&l(!1)},A=U=>{U.key==="Escape"&&l(!1)};return document.addEventListener("mousedown",I),document.addEventListener("keydown",A),()=>{document.removeEventListener("mousedown",I),document.removeEventListener("keydown",A)}},[s]);let u=_l(()=>{!a.trim()||!e.threadId||(o(e.threadId,a.trim()),d(""),l(!1))},[a,e.threadId,o]),g=_l(I=>{I.key==="Enter"&&(I.metaKey||I.ctrlKey)&&(I.preventDefault(),u())},[u]),E=s?t:t-oo,w=s?n:n-oo;return zn("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, ${E}px)`,top:`max(0px, ${w}px)`,padding:s?0:oo,transform:`translate(min(0px, calc(100vw - max(0px, ${E}px) - 100%)), min(0px, calc(100vh - max(0px, ${w}px) - 100%)))`,zIndex:s?10002:9999,pointerEvents:"auto",cursor:s?void 0:"pointer"},children:[!s&&zn("div",{onClick:()=>l(!0),style:{height:r,display:"flex",alignItems:"center",backgroundColor:e.color,padding:`0 ${4}px`,gap:4,fontFamily:Jt,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[zn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",children:[at("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),at("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),at("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),at("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]}),at("span",{style:{opacity:.7},children:"reply?"})]}),s&&zn("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#eaeaea",fontFamily:Jt,fontSize:12,color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)"},children:[at("div",{style:{padding:`${6}px ${8}px`,lineHeight:1.4},children:e.question}),zn("div",{style:{padding:`0 ${4}px ${4}px`},children:[at("textarea",{ref:c,value:a,onChange:I=>d(I.target.value),onKeyDown:g,placeholder:"Type your reply...",style:{width:"100%",minHeight:40,padding:4,fontSize:12,fontFamily:Jt,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"}}),at("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:4},children:at("button",{onClick:u,disabled:!a.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:Jt,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 Wr(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 Yl,useLayoutEffect as Qd,useState as jl}from"react";import{jsx as Fi,jsxs as Vl}from"react/jsx-runtime";function eu(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 Gl=["top-left","top-right","bottom-right","bottom-left"];function Ul({element:e,radius:t,accentColor:n,hoveredCorner:r,draggingCorner:o,cursorViewport:i}){let[s,l]=jl(null),[a,d]=jl(!1);if(Yl(()=>{let A=y=>{(y.key==="Meta"||y.key==="Control")&&d(!0)},U=y=>{(y.key==="Meta"||y.key==="Control")&&d(!1)},B=()=>d(!1);return window.addEventListener("keydown",A,!0),window.addEventListener("keyup",U,!0),window.addEventListener("blur",B),()=>{window.removeEventListener("keydown",A,!0),window.removeEventListener("keyup",U,!0),window.removeEventListener("blur",B)}},[]),Yl(()=>{if(!e){l(null);return}let A=()=>{l(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]),Qd(()=>{e&&l(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=eu(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"]}},E=new Set,w=o!=null?o:r;if(w)if(a)E.add(w);else for(let A of Gl)E.add(A);let I={position:"fixed",top:s.top,left:s.left,width:c,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"};return Vl("div",{"data-devtools":"border-radius-handles",style:I,children:[Vl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${p}`,children:[Fi("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"}),Gl.map(A=>{let U=g[A],B=E.has(A);return Fi("circle",{cx:U.x,cy:U.y,r:A===(o!=null?o:r)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:A===(o!=null?o:r)?4:2,paintOrder:"stroke"},A)})]}),i&&w&&(()=>{let A=Math.round(t[w]);return Fi("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:A})})()]})}import{useEffect as tu,useState as nu}from"react";function jo(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 ou,jsx as _i,jsxs as fr}from"react/jsx-runtime";function $n({element:e,isSelected:t=!1,elementInfo:n,color:r="#3b82f6",annotationNumber:o,changeCount:i,hideTooltip:s=!1}){let[l,a]=nu(null);if(tu(()=>{if(!e){a(null);return}let v=()=>{let O=e.getBoundingClientRect();a(O)};return v(),window.addEventListener("scroll",v,{passive:!0}),window.addEventListener("resize",v,{passive:!0}),()=>{window.removeEventListener("scroll",v),window.removeEventListener("resize",v)}},[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:jo(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,E=g?`<${g}> ${c}${p}${u}`:`${c}${p}${u}`,w=22,I=l.height>=window.innerHeight,A=I?0:l.top>=w?l.top-w:l.bottom,U=I?{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:A,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},y=!s&&fr("div",{"data-devtools":"tooltip",style:U,children:[o!==void 0&&fr("span",{children:[o,"."]}),_i("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:E}),i!==void 0&&i>0&&fr("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return fr(ou,{children:[fr("div",{"data-devtools":"highlight",style:d,children:[_i("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:_i("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"}))}),I&&y]}),!I&&y]})}import{useEffect as Jl,useLayoutEffect as ru,useState as zi}from"react";import{jsx as Un,jsxs as Wi}from"react/jsx-runtime";function $i(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 Yi({element:e,gap:t,accentColor:n,hoveredAxis:r,draggingAxis:o,cursorViewport:i,isAutoGap:s=!1,refreshKey:l=0}){let[a,d]=zi(null),[c,p]=zi([]),[u,g]=zi(!1);if(Jl(()=>{let N=C=>{(C.key==="Meta"||C.key==="Control")&&g(!0)},R=C=>{(C.key==="Meta"||C.key==="Control")&&g(!1)},$=()=>g(!1);return window.addEventListener("keydown",N,!0),window.addEventListener("keyup",R,!0),window.addEventListener("blur",$),()=>{window.removeEventListener("keydown",N,!0),window.removeEventListener("keyup",R,!0),window.removeEventListener("blur",$)}},[]),Jl(()=>{if(!e){d(null),p([]);return}let N=()=>{d(e.getBoundingClientRect()),p(So(e))};return N(),window.addEventListener("scroll",N,{passive:!0}),window.addEventListener("resize",N,{passive:!0}),()=>{window.removeEventListener("scroll",N),window.removeEventListener("resize",N)}},[e]),ru(()=>{e&&(d(e.getBoundingClientRect()),p(So(e)))},[e,t.row,t.column,l]),!a||c.length===0)return null;let E=a.width,w=a.height,I="pm-gap-stripe-pattern",A=$i(n,.25),U=$i(n,.1),B=$i(n,.2),y=8,v=2,O={position:"fixed",top:a.top,left:a.left,width:E,height:w,pointerEvents:"none",zIndex:9996,overflow:"visible"},Z=o!=null?o:r;return Wi("div",{"data-devtools":"gap-handles",style:O,children:[Wi("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${E} ${w}`,children:[Un("defs",{children:Un("pattern",{id:I,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Un("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:A,strokeWidth:"1.5"})})}),Un("rect",{x:"0.5",y:"0.5",width:Math.max(0,E-1),height:Math.max(0,w-1),fill:"none",stroke:B,strokeWidth:"1"}),c.map((N,R)=>{let $=N.x-a.left,C=N.y-a.top,L=N.w,X=N.h,ge=u?N.axis===Z:!0;return(N.axis==="row"?t.row:t.column)===0?null:Wi("g",{opacity:ge?1:.6,children:[Un("rect",{x:$,y:C,width:L,height:X,fill:U}),Un("rect",{x:$,y:C,width:L,height:X,fill:`url(#${I})`})]},R)}),Z&&(()=>{let N=c.filter(He=>He.axis===Z);if(N.length===0)return null;let R=N[0];if(i&&N.length>1){let He=1/0;for(let Ne of N){let Ve=Ne.x+Ne.w/2,$e=Ne.y+Ne.h/2,Ie=Math.abs(i.x-Ve)+Math.abs(i.y-$e);Ie<He&&(He=Ie,R=Ne)}}let $=R.x-a.left,C=R.y-a.top,L=R.w,X=R.h,ge=$+L/2,ve=C+X/2;if(s)return Un("circle",{cx:ge,cy:ve,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let ye=Z==="column",ae=ye?v:y,ze=ye?y:v,Me=ge-ae/2,ne=ve-ze/2;return Un("rect",{x:Me,y:ne,width:ae,height:ze,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&Z&&(()=>{let N=s?"auto":String(Math.round(Z==="row"?t.row:t.column));return Un("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:N})})()]})}import{useCallback as cu,useEffect as du,useState as uu}from"react";import{useEffect as iu,useState as Xl}from"react";var su=3,lu=250,ji=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],au=3e3;function Kl(e){let[t,n]=Xl(0),[r,o]=Xl(()=>Math.floor(Math.random()*ji.length));return iu(()=>{if(!e)return;let i=setInterval(()=>n(l=>(l+1)%su),lu),s=setInterval(()=>o(l=>(l+1)%ji.length),au);return()=>{clearInterval(i),clearInterval(s)}},[e]),{charIndex:t,word:ji[r]}}import{Fragment as Gi,jsx as Cn,jsxs as Go}from"react/jsx-runtime";function pu(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 ql=22,Vi=12;function fu(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=no(l,["left","top","avoidBottom","style","children"]);let a=n!==void 0?`${n}px`:"100vh";return Cn("div",b(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:Vi,transform:`translate(min(0px, calc(100vw - max(0px, ${e}px) - 100%)), min(0px, calc(${a} - max(0px, ${t}px) - 100%)))`},r),children:o}))}function Zl({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:r,dispatch:o,inFlightSelectors:i,toolbarRef:s,onHoverSelector:l}){var U;let[a,d]=uu([]),c=i&&i.size>0,{charIndex:p,word:u}=Kl(!!c);du(()=>{if(t){d([]);return}let B=null,y=()=>{let Z=[];e.forEach((N,R)=>{let $=pn(N.selector);if(!$)return;let C=$.getBoundingClientRect();Z.push({selector:N.selector,modIndex:R,top:C.top>=ql?C.top-ql:C.bottom,left:C.left,label:pu(N),changeCount:N.changes.length,annotationNumber:r+R+1})}),d(Z)},v=()=>{B&&cancelAnimationFrame(B),B=requestAnimationFrame(y)};y(),window.addEventListener("scroll",v,!0),window.addEventListener("resize",v,!0);let O=new MutationObserver(v);return O.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",v),document.fonts.ready.then(v),()=>{window.removeEventListener("scroll",v,!0),window.removeEventListener("resize",v,!0),window.removeEventListener("load",v),O.disconnect(),B&&cancelAnimationFrame(B)}},[e,t,r]);let g=cu(B=>{let y=e[B];if(!y)return;let v=pn(y.selector);v&&(o({type:"SELECT_ANNOTATION",payload:{id:null}}),o({type:"SET_TOOL",payload:"inspector"}),o({type:"SELECT_ELEMENT",payload:{el:v,info:y.element}}))},[e,o]);if(a.length===0)return null;let E=(U=s==null?void 0:s.current)==null?void 0:U.getBoundingClientRect(),w=E?E.top-8:void 0,I={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},A={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return Cn(Gi,{children:a.map(B=>{let y=i==null?void 0:i.has(B.selector);return Cn(fu,{left:B.left-Vi,top:B.top-Vi,avoidBottom:w,onClick:()=>g(B.modIndex),onMouseEnter:l?()=>l(B.selector):void 0,onMouseLeave:l?()=>l(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:Go("div",{"data-devtools":"badge",style:b(f({},I),{backgroundColor:y?"#999999":n}),children:[Go("span",{children:[B.annotationNumber,"."]}),Cn("span",{style:A,children:B.label}),Go("span",{style:{opacity:.8},children:["(",B.changeCount," ",B.changeCount===1?"change":"changes",")"]}),y&&Go("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[Cn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:p===1?Go(Gi,{children:[Cn("circle",{cx:"7",cy:"7",r:"2"}),Cn("circle",{cx:"17",cy:"7",r:"2"}),Cn("circle",{cx:"7",cy:"17",r:"2"}),Cn("circle",{cx:"17",cy:"17",r:"2"})]}):Go(Gi,{children:[Cn("circle",{cx:"12",cy:"6",r:"2"}),Cn("circle",{cx:"6",cy:"12",r:"2"}),Cn("circle",{cx:"18",cy:"12",r:"2"}),Cn("circle",{cx:"12",cy:"18",r:"2"})]})}),u]})]})},B.selector)})})}import{useEffect as gu,useState as mu}from"react";import{Fragment as yu,jsx as Ql}from"react/jsx-runtime";function hu(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 ea({styleModifications:e,accentColor:t}){let[n,r]=mu([]);if(gu(()=>{let i=null,s=()=>{let d=[];for(let c of e){let p=pn(c.selector);if(!p)continue;let u=p.getBoundingClientRect();if(u.width===0&&u.height===0)continue;let g=wo(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)},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=hu(t,.2);return Ql(yu,{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 Ql("div",{"data-devtools":"mod-border",style:s},i.selector)})})}import{useEffect as ta,useLayoutEffect as bu,useState as na}from"react";import{jsx as ro,jsxs as Ji}from"react/jsx-runtime";function Ui(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 xu={top:"bottom",bottom:"top",left:"right",right:"left"};function Xi({element:e,padding:t,accentColor:n,hoveredSide:r,draggingSide:o,cursorViewport:i,refreshKey:s}){let[l,a]=na(null),[d,c]=na(!1);if(ta(()=>{let L=ve=>{(ve.key==="Meta"||ve.key==="Control")&&c(!0)},X=ve=>{(ve.key==="Meta"||ve.key==="Control")&&c(!1)},ge=()=>c(!1);return window.addEventListener("keydown",L,!0),window.addEventListener("keyup",X,!0),window.addEventListener("blur",ge),()=>{window.removeEventListener("keydown",L,!0),window.removeEventListener("keyup",X,!0),window.removeEventListener("blur",ge)}},[]),ta(()=>{if(!e){a(null);return}let L=()=>{a(e.getBoundingClientRect())};return L(),window.addEventListener("scroll",L,{passive:!0}),window.addEventListener("resize",L,{passive:!0}),()=>{window.removeEventListener("scroll",L),window.removeEventListener("resize",L)}},[e]),bu(()=>{e&&a(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,s]),!l)return null;let p=l.width,u=l.height,{top:g,right:E,bottom:w,left:I}=t,A="pm-stripe-pattern",U=Ui(n,.25),B=Ui(n,.1),y=Ui(n,.2),v=8,O=2,Z={position:"fixed",top:l.top,left:l.left,width:p,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"},N=["top","right","bottom","left"],R={top:`0,0 ${p},0 ${p-E},${g} ${I},${g}`,right:`${p},0 ${p},${u} ${p-E},${u-w} ${p-E},${g}`,bottom:`0,${u} ${I},${u-w} ${p-E},${u-w} ${p},${u}`,left:`0,0 ${I},${g} ${I},${u-w} 0,${u}`},$={top:{x:p/2-v/2,y:g/2-O/2,w:v,h:O},bottom:{x:p/2-v/2,y:u-w/2-O/2,w:v,h:O},left:{x:I/2-O/2,y:u/2-v/2,w:O,h:v},right:{x:p-E/2-O/2,y:u/2-v/2,w:O,h:v}},C=new Set;return o?C.add(o):r&&(C.add(r),d||C.add(xu[r])),Ji("div",{"data-devtools":"padding-handles",style:Z,children:[Ji("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${p} ${u}`,children:[ro("defs",{children:ro("pattern",{id:A,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:ro("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:U,strokeWidth:"1.5"})})}),ro("rect",{x:"0.5",y:"0.5",width:Math.max(0,p-1),height:Math.max(0,u-1),fill:"none",stroke:y,strokeWidth:"1"}),N.map(L=>{if(t[L]<=0)return null;let ge=C.has(L);return Ji("g",{opacity:ge?1:.6,children:[ro("polygon",{points:R[L],fill:B}),ro("polygon",{points:R[L],fill:`url(#${A})`})]},L)}),N.map(L=>{let X=$[L],ge=C.has(L);return ro("rect",{x:X.x,y:X.y,width:X.w,height:X.h,fill:n,stroke:"#ffffff",strokeWidth:ge?4:2,paintOrder:"stroke"},`handle-${L}`)})]}),i&&(r||o)&&(()=>{let L=o!=null?o:r,X=Math.round(t[L]);return ro("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:X})})()]})}import{useCallback as Wn,useEffect as An,useMemo as Xr,useRef as vn,useState as tn}from"react";import{Check as Jr,ChevronDown as os,MoveHorizontal as ga,RotateCcw as ju,Shrink as Gu,X as Vu}from"lucide-react";var vu="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",io={borderWidth:3,borderStyle:"solid",borderImage:`url("${vu}") 4 / 1.9 / 0 round`};var Yr={"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 Vo(e){var t,n;return(n=(t=Yr[e])==null?void 0:t[0])!=null?n:"px"}function so(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function jr(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}=so(n);return`${s}${l||Vo(t)}`}return`${s}${Vo(t)}`}return o}function Ki(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 Su,useEffect as wu,useRef as oa,useState as Cu}from"react";import{Plus as ra,X as Eu}from"lucide-react";import{jsx as xn,jsxs as Eo}from"react/jsx-runtime";var Gr=[{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 ku(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 qi(e){return e.length===0?"none":e.map(t=>{var o;let n=Gr.find(i=>i.name===t.name),r=(o=n==null?void 0:n.unit)!=null?o:"";return`${t.name}(${t.value}${r})`}).join(" ")}function ia({value:e,onChange:t,accentColor:n,modified:r,panelContentRef:o}){let i=ku(e),[s,l]=Cu(!1),a=oa(null),d=oa(null);wu(()=>{if(!s)return;let B=y=>{a.current&&!y.composedPath().includes(a.current)&&l(!1)};return document.addEventListener("mousedown",B,!0),()=>document.removeEventListener("mousedown",B,!0)},[s]);let c=Gr.filter(B=>!i.some(y=>y.name===B.name)),p=B=>{let y=[...i,{name:B.name,value:B.defaultValue}];t(qi(y)),l(!1)},u=B=>{let y=i.filter((v,O)=>O!==B);t(qi(y))},g=(B,y)=>{let v=i.map((O,Z)=>Z===B?b(f({},O),{value:y}):O);t(qi(v))},E={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},w=Su(B=>{var C;if(!d.current)return{position:"fixed",top:0,left:0};let y=d.current.getBoundingClientRect(),v=d.current.closest('[data-devtools="panel"]'),O=v?v.getBoundingClientRect():{top:0,left:0,bottom:9999},Z=(C=o==null?void 0:o.current)==null?void 0:C.getBoundingClientRect(),N=B*24+8,$=O.bottom-y.bottom<N;return b(f({position:"fixed"},$?{bottom:O.bottom-y.top+2-O.top}:{top:y.bottom+2-O.top}),{left:Z?Z.left+4-O.left:y.left-O.left,width:Z?Z.width-8:140,zIndex:10001})},[o]),I={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)"},A={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"},U=B=>xn("div",{ref:a,style:f(f({},w(B.length)),I),children:B.map(y=>xn("button",{type:"button",onClick:()=>p(y),style:A,onMouseEnter:v=>{v.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:v=>{v.currentTarget.style.backgroundColor="transparent"},children:y.label},y.name))});return i.length===0?Eo("div",{children:[Eo("div",{style:{display:"flex",alignItems:"center",gap:4},children:[xn(Jn,{modified:!1,children:xn("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:b(f({},E),{color:"#999",cursor:"default"})})}),xn("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:xn(ra,{size:12})})]}),s&&U(Gr)]}):Eo("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((B,y)=>{let v=Gr.find(O=>O.name===B.name);return v?Eo("div",{style:{display:"flex",alignItems:"center",gap:4},children:[xn("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:v.label}),xn(Jn,{modified:r,children:Eo("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[xn("input",{type:"range",min:v.min,max:v.max,step:v.step,value:B.value,onChange:O=>g(y,parseFloat(O.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(B.value-v.min)/(v.max-v.min)*100}%, rgba(0,0,0,0.1) ${(B.value-v.min)/(v.max-v.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),xn("input",{type:"number",min:v.min,max:v.max,step:v.step,value:v.unit==="px"||v.unit==="deg"?Math.round(B.value):Math.round(B.value*100)/100,onChange:O=>g(y,parseFloat(O.target.value)||0),style:b(f({},E),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),v.unit&&xn("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:v.unit})]})}),xn("button",{type:"button",onClick:()=>u(y),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:xn(Eu,{size:10})})]},B.name):null}),c.length>0&&Eo("div",{children:[Eo("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:[xn(ra,{size:10}),"Add filter"]}),s&&U(c)]})]})}import{useCallback as Jo,useEffect as Ru,useRef as Vr,useState as sa}from"react";import{AlignHorizontalSpaceAround as Lu,AlignVerticalSpaceAround as Au,Columns3 as Pu,Grid2x2 as Bu,RectangleHorizontal as Ou,Rows3 as Nu,UnfoldHorizontal as la,UnfoldVertical as aa}from"lucide-react";import{useCallback as Tu,useEffect as Mu,useRef as gr}from"react";import{jsx as Iu}from"react/jsx-runtime";var Zi=[0,1,2,4,8,12,16,20,24,28,32];function Uo({value:e,onChange:t,onPreview:n,onScrubEnd:r,onReset:o,isModified:i,accentColor:s,defaultUnit:l="rem",snapSteps:a,color:d,style:c,children:p}){let u=gr(null),g=gr(null),E=gr(o),w=gr(i),I=gr(!1);E.current=o,w.current=i,Mu(()=>{let U=y=>{let v=g.current;if(!v)return;v.hasMoved=!0,I.current=y.shiftKey;let O=v.unit==="rem"||v.unit==="em"?.1:1;v.accum+=y.movementX*O;let Z=Math.max(0,Math.round((v.startValue+v.accum)*10)/10);if(y.shiftKey&&a){let N=v.unit==="rem"||v.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,R=v.unit==="rem"||v.unit==="em"?Z*N:Z,$=a[a.length-1];for(let C=0;C<a.length-1;C++){let L=a[C],X=a[C+1];if(R<=(L+X)/2){$=L;break}if(R<X){$=X;break}}R>a[a.length-1]&&($=Math.round(R/8)*8),Z=v.unit==="rem"||v.unit==="em"?Math.round($/N*1e3)/1e3:$}n==null||n(`${Z}${v.unit}`)},B=()=>{let y=g.current;if(!y)return;let v=Math.max(0,Math.round((y.startValue+y.accum)*10)/10);if(I.current&&a){let Z=y.unit==="rem"||y.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,N=y.unit==="rem"||y.unit==="em"?v*Z:v,R=a[a.length-1];for(let $=0;$<a.length-1;$++){let C=a[$],L=a[$+1];if(N<=(C+L)/2){R=C;break}if(N<L){R=L;break}}N>a[a.length-1]&&(R=Math.round(N/8)*8),v=y.unit==="rem"||y.unit==="em"?Math.round(R/Z*1e3)/1e3:R}let O=y.hasMoved&&v!==y.startValue;g.current=null,document.exitPointerLock(),O?t(`${v}${y.unit}`):y.hasMoved?n==null||n(`${y.startValue}${y.unit}`):w.current&&E.current&&E.current(),r==null||r()};return document.addEventListener("mousemove",U),document.addEventListener("mouseup",B),()=>{document.removeEventListener("mousemove",U),document.removeEventListener("mouseup",B)}},[t,n,r]);let A=Tu(U=>{var v;if(U.button!==0)return;U.preventDefault();let B=so(e),y=B.unit&&B.unit!=="px"?B.unit:l;g.current={startValue:B.num,unit:y,accum:0,hasMoved:!1},(v=u.current)==null||v.requestPointerLock()},[e,l]);return Iu("span",{ref:u,onMouseDown:A,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 Qi,jsx as Ae,jsxs as Xt}from"react/jsx-runtime";function Du({gridCols:e,gridRows:t,gridModified:n,accentColor:r,onColsChange:o,onRowsChange:i}){return Ae(En,{style:{width:100},children:Xt("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:b(f({},en),{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:b(f({},en),{width:32,textAlign:"center",padding:2})})]})})}function ca({element:e,getValue:t,getOriginalValue:n,handleChange:r,isModified:o,onResetProperty:i,isCollapsed:s,onToggle:l,sectionHeaderStyle:a,activeDropdown:d,onDropdownChange:c,panelContentRef:p,accentColor:u,onFieldHover:g,preferredUnit:E,onUnitCycle:w}){let I=c,A=t("display"),U=t("flex-direction"),B=da(A,U),y=A==="flex"||A==="inline-flex",v=A==="grid",O=y||v,Z=t("width"),N=t("height"),R=o("width")?Z:Nr(e,"width"),$=o("height")?N:Nr(e,"height"),C=es(Z,R),L=es(N,$),X=t("min-width"),ge=t("max-width"),ve=t("min-height"),ye=t("max-height"),ae=Xo(t("padding")),ze=t("gap"),Me=t("row-gap"),ne=t("column-gap"),He=t("grid-template-columns"),Ne=t("grid-template-rows"),Ve=t("overflow"),$e=He.split(/\s+/).filter(Q=>Q&&Q!=="none").length||1,Ie=Ne.split(/\s+/).filter(Q=>Q&&Q!=="none").length||1,[st,ct]=sa(!1),_=d!==null,xe=_||st,ce=_?.3:st?.65:1,Se=({mode:Q,icon:Fe,active:tt})=>Ae("button",{type:"button",onClick:()=>ua(Q,r),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:tt?jo(u,.15):"transparent",color:tt?u:"#64748b",cursor:"pointer",fontSize:14},children:Fe}),Be=(Q,Fe,tt)=>{tt==="fixed"?r(Q,Fe):r(Q,Ur(tt,Fe))},De=Q=>{let Fe=Xo(t("padding")),tt=Q||"0";r("padding",`${Fe.top} ${tt} ${Fe.bottom} ${tt}`)},z=Q=>{let Fe=Xo(t("padding")),tt=Q||"0";r("padding",`${tt} ${Fe.right} ${tt} ${Fe.left}`)},[re,se]=sa({}),be=Jo((Q,Fe)=>tt=>{Fe(tt),se(In=>b(f({},In),{[Q]:tt}))},[]),pe=Jo(Q=>{se(Fe=>{let tt=f({},Fe);return delete tt[Q],tt})},[]),ke=Jo(Q=>{let Fe=Xo(t("padding"));Ge(e,"padding",`${Fe.top} ${Q} ${Fe.bottom} ${Q}`)},[e,t]),oe=Jo(Q=>{let Fe=Xo(t("padding"));Ge(e,"padding",`${Q} ${Fe.right} ${Q} ${Fe.left}`)},[e,t]),We=Jo(Q=>Fe=>{Ge(e,Q,Fe)},[e]),Xe=U==="column"||U==="column-reverse",At=Q=>Q==="center"?1:Q==="flex-end"||Q==="end"?2:0,Gt=At(t("justify-content")),it=At(t("align-items")),Vt=Xe?it:Gt,Kt=Xe?Gt:it,St=Vr(null),Ot=Vr({x:0,y:0}),bt=Vr({col:Vt,row:Kt});bt.current={col:Vt,row:Kt};let Et=Jo((Q,Fe)=>{let tt=["flex-start","center","flex-end"];Xe?(r("justify-content",tt[Fe]),r("align-items",tt[Q])):(r("justify-content",tt[Q]),r("align-items",tt[Fe]))},[Xe,r]),rn=Vr(Et);rn.current=Et,Ru(()=>{let Fe=tt=>{let In=St.current;if(!In||!tt.composedPath().includes(In))return;tt.preventDefault(),tt.stopPropagation(),Ot.current.x+=tt.deltaX,Ot.current.y+=tt.deltaY;let{col:$t,row:fn}=bt.current,dn=!1;Math.abs(Ot.current.x)>=30&&($t=Math.max(0,Math.min(2,$t+(Ot.current.x>0?1:-1))),Ot.current.x=0,Ot.current.y=0,dn=!0),!dn&&Math.abs(Ot.current.y)>=30&&(fn=Math.max(0,Math.min(2,fn+(Ot.current.y>0?1:-1))),Ot.current.x=0,Ot.current.y=0,dn=!0),dn&&($t!==bt.current.col||fn!==bt.current.row)&&rn.current($t,fn)};return document.addEventListener("wheel",Fe,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",Fe,{capture:!0})},[]);let zt=()=>Ae("div",{ref:St,onMouseEnter:()=>{ct(!0),p.current&&(p.current.style.overflowY="hidden")},onMouseLeave:()=>{ct(!1),p.current&&(p.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:Fn,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(Q=>[0,1,2].map(Fe=>Ae("button",{type:"button",onClick:()=>Et(Fe,Q),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:Fe===Vt&&Q===Kt?Ae("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:Fe===0?Xt(Qi,{children:[Ae("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Ae("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Ae("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]}):Fe===1?Xt(Qi,{children:[Ae("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Ae("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Ae("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]}):Xt(Qi,{children:[Ae("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Ae("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Ae("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]})}):Ae("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${Q}-${Fe}`)))}),Mn=o("grid-template-columns")||o("grid-template-rows");return Xt("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Ae("div",{style:a,children:Ae("span",{children:O?"Auto layout":"Layout"})}),Xt("div",{style:{padding:"8px 12px"},children:[Xt("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:Fn,borderRadius:2,padding:2,opacity:ce,transition:"opacity 150ms ease"},children:[Ae(Se,{mode:"block",icon:Ae(Ou,{size:16}),active:B==="block"}),Ae(Se,{mode:"flex-col",icon:Ae(Nu,{size:16}),active:B==="flex-col"}),Ae(Se,{mode:"flex-row",icon:Ae(Pu,{size:16}),active:B==="flex-row"}),Ae(Se,{mode:"grid",icon:Ae(Bu,{size:16}),active:B==="grid"})]}),Xt("div",{style:{display:"flex",gap:4,marginBottom:8},children:[Ae(ts,{label:"W",property:"width",cssValue:C==="fixed"?Z:`${Math.round(e.getBoundingClientRect().width)}px`,mode:C,onValueChange:Q=>r("width",Q),onModeChange:Q=>{if(Q==="fixed"){let Fe=e.getBoundingClientRect();r("width",`${Math.round(Fe.width)}px`)}else r("width",Ur(Q,Z))},modified:o("width"),dimmed:_&&d!=="width",dropdownOpen:d==="width",onDropdownChange:Q=>I(Q?"width":null),panelContentRef:p,accentColor:u,onReset:()=>i("width"),minValue:X!=="none"&&X!=="0px"&&X!=="auto"?X:"",maxValue:ge!=="none"&&ge!=="auto"?ge:"",onMinChange:Q=>r("min-width",Q||"0"),onMaxChange:Q=>r("max-width",Q||"none"),onMinReset:()=>i("min-width"),onMaxReset:()=>i("max-width"),minModified:o("min-width"),maxModified:o("max-width")}),Ae(ts,{label:"H",property:"height",cssValue:L==="fixed"?N:`${Math.round(e.getBoundingClientRect().height)}px`,mode:L,onValueChange:Q=>r("height",Q),onModeChange:Q=>{if(Q==="fixed"){let Fe=e.getBoundingClientRect();r("height",`${Math.round(Fe.height)}px`)}else r("height",Ur(Q,N))},modified:o("height"),dimmed:_&&d!=="height",dropdownOpen:d==="height",onDropdownChange:Q=>I(Q?"height":null),panelContentRef:p,minValue:ve!=="none"&&ve!=="0px"&&ve!=="auto"?ve:"",maxValue:ye!=="none"&&ye!=="auto"?ye:"",onMinChange:Q=>r("min-height",Q||"0"),onMaxChange:Q=>r("max-height",Q||"none"),onMinReset:()=>i("min-height"),onMaxReset:()=>i("max-height"),minModified:o("min-height"),maxModified:o("max-height"),accentColor:u,onReset:()=>i("height")})]}),y&&Xt("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:_?.3:1,transition:"opacity 150ms ease"},children:zt()}),Xt("div",{style:{flex:1,opacity:ce,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")?u:"#999",fontWeight:o("gap")?600:400,marginBottom:2,cursor:o("gap")?"pointer":"default"},children:"Gap"}),Ae(En,{dimmed:_,children:Xt("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Uo,{value:ze,onChange:Q=>{pe("gap"),r("gap",Q)},onPreview:be("gap",We("gap")),onScrubEnd:()=>pe("gap"),onReset:()=>i("gap"),isModified:o("gap"),accentColor:u,defaultUnit:E,children:U==="column"||U==="column-reverse"?Ae(aa,{size:12,strokeWidth:o("gap")?2.5:1.5}):Ae(la,{size:12,strokeWidth:o("gap")?2.5:1.5})}),Ae(Hn,{property:"gap",value:re.gap||ze,onChange:Q=>r("gap",Q),isModified:o("gap")||"gap"in re,style:b(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:E,onUnitCycle:w})]})})]})]}),v&&Xt("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:ce,transition:"opacity 150ms ease"},children:[Ae(Du,{gridCols:$e,gridRows:Ie,gridModified:Mn,accentColor:u,onColsChange:Q=>r("grid-template-columns",`repeat(${Q}, 1fr)`),onRowsChange:Q=>r("grid-template-rows",`repeat(${Q}, 1fr)`)}),Xt("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[Ae(En,{dimmed:_,children:Xt("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Uo,{value:ne||ze,onChange:Q=>{pe("column-gap"),r("column-gap",Q)},onPreview:be("column-gap",We("column-gap")),onScrubEnd:()=>pe("column-gap"),onReset:()=>i("column-gap"),isModified:o("column-gap"),accentColor:u,defaultUnit:E,children:Ae(la,{size:12,strokeWidth:o("column-gap")?2.5:1.5})}),Ae(Hn,{property:"column-gap",value:re["column-gap"]||ne||ze,onChange:Q=>r("column-gap",Q),isModified:o("column-gap")||"column-gap"in re,placeholder:"col",style:b(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:E,onUnitCycle:w})]})}),Ae(En,{dimmed:_,children:Xt("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Uo,{value:Me||ze,onChange:Q=>{pe("row-gap"),r("row-gap",Q)},onPreview:be("row-gap",We("row-gap")),onScrubEnd:()=>pe("row-gap"),onReset:()=>i("row-gap"),isModified:o("row-gap"),accentColor:u,defaultUnit:E,children:Ae(aa,{size:12,strokeWidth:o("row-gap")?2.5:1.5})}),Ae(Hn,{property:"row-gap",value:re["row-gap"]||Me||ze,onChange:Q=>r("row-gap",Q),isModified:o("row-gap")||"row-gap"in re,placeholder:"row",style:b(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:E,onUnitCycle:w})]})})]})]}),O&&Xt("div",{onMouseEnter:()=>g==null?void 0:g("padding"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:ce,transition:"opacity 150ms ease"},children:[Ae(En,{style:{flex:1},dimmed:_,children:Xt("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Uo,{value:ae.left,onChange:Q=>{pe("padding-h"),De(Q)},onPreview:be("padding-h",ke),onScrubEnd:()=>pe("padding-h"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:u,defaultUnit:E,snapSteps:Zi,children:Ae(Lu,{size:12,strokeWidth:o("padding")?2.5:1.5})}),Ae(Hn,{property:"padding",value:re["padding-h"]||ae.left,onChange:Q=>De(Q),isModified:o("padding")||"padding-h"in re,placeholder:"H pad",style:b(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:E,onUnitCycle:w})]})}),Ae(En,{style:{flex:1},dimmed:_,children:Xt("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Uo,{value:ae.top,onChange:Q=>{pe("padding-v"),z(Q)},onPreview:be("padding-v",oe),onScrubEnd:()=>pe("padding-v"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:u,defaultUnit:E,snapSteps:Zi,children:Ae(Au,{size:12,strokeWidth:o("padding")?2.5:1.5})}),Ae(Hn,{property:"padding",value:re["padding-v"]||ae.top,onChange:Q=>z(Q),isModified:o("padding")||"padding-v"in re,placeholder:"V pad",style:b(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:E,onUnitCycle:w})]})})]}),Xt("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:ce,transition:"opacity 150ms ease"},children:[Ae("input",{type:"checkbox",checked:Ve==="hidden",onChange:Q=>r("overflow",Q.target.checked?"hidden":"visible"),style:{margin:0,accentColor:u}}),"Clip content"]})]})]})}import{AlignCenter as Hu,AlignJustify as Fu,AlignLeft as _u,AlignRight as zu,Baseline as $u,ChevronDown as Wu,WholeWord as Yu}from"lucide-react";import{jsx as yt,jsxs as Xn}from"react/jsx-runtime";var pa={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function fa({element:e,getValue:t,handleChange:n,isModified:r,onResetProperty:o,isCollapsed:i,onToggle:s,sectionHeaderStyle:l,accentColor:a,colorVariables:d,activeColorDropdown:c,onColorDropdownChange:p,panelContentRef:u,preferredUnit:g,onUnitCycle:E}){var L;let w=t("font-family"),I=t("font-size"),A=t("font-weight"),U=t("line-height"),B=t("letter-spacing"),y=t("text-align"),v=t("color"),O=String(A),Z=pa[O]||O,N=dr(e,v),R=v.includes("var(")?null:ur(N,d),$=({align:X,icon:ge})=>{let ve=y===X;return yt("button",{type:"button",onClick:()=>n("text-align",X),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:ve?jo(a,.15):"transparent",color:ve?a:"#64748b",cursor:"pointer"},children:ge})},C=((L=w.split(",")[0])==null?void 0:L.trim().replace(/^["']|["']$/g,""))||"System";return Xn("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[yt("div",{style:l,children:yt("span",{children:"Typography"})}),Xn("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[yt(En,{children:Xn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[yt("input",{type:"text",value:w,onChange:X=>n("font-family",X.target.value),style:b(f({},en),{flex:1,minWidth:0,padding:0,fontWeight:r("font-family")?600:400,color:r("font-family")?a:"inherit"}),title:w}),yt(Wu,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),Xn("div",{style:{display:"flex",gap:4},children:[yt(En,{style:{flex:1},children:yt("select",{value:O,onChange:X=>n("font-weight",X.target.value),style:b(f({},en),{padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:r("font-weight")?600:400,color:r("font-weight")?a:"inherit"}),children:Object.entries(pa).map(([X,ge])=>yt("option",{value:X,children:ge},X))})}),yt(En,{style:{flex:1},children:yt("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:yt(Hn,{property:"font-size",value:I,onChange:X=>n("font-size",X),isModified:r("font-size"),min:1,max:999,style:b(f({},en),{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:E})})})]}),Xn("div",{style:{display:"flex",gap:4},children:[yt(En,{style:{flex:1},children:Xn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[yt($u,{size:12,style:{color:r("line-height")?a:"#999",flexShrink:0}}),yt(Hn,{property:"line-height",value:U,onChange:X=>n("line-height",X),isModified:r("line-height"),step:.1,min:0,placeholder:"Auto",style:b(f({},en),{flex:1,minWidth:0,padding:0,fontWeight:r("line-height")?600:400,color:r("line-height")?a:"inherit"}),showUnit:!1})]})}),yt(En,{style:{flex:1},children:Xn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[yt(Yu,{size:12,style:{color:r("letter-spacing")?a:"#999",flexShrink:0}}),yt(Hn,{property:"letter-spacing",value:B,onChange:X=>n("letter-spacing",X),isModified:r("letter-spacing"),step:.1,placeholder:"\u2014",style:b(f({},en),{flex:1,minWidth:0,padding:0,fontWeight:r("letter-spacing")?600:400,color:r("letter-spacing")?a:"inherit"}),showUnit:!1})]})})]}),Xn("div",{style:{display:"flex",gap:2,backgroundColor:Fn,borderRadius:2,padding:2},children:[yt($,{align:"left",icon:yt(_u,{size:14})}),yt($,{align:"center",icon:yt(Hu,{size:14})}),yt($,{align:"right",icon:yt(zu,{size:14})}),yt($,{align:"justify",icon:yt(Fu,{size:14})})]}),Xn("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[yt("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"}),yt("div",{style:{flex:1,minWidth:0},children:yt(ns,{value:v,resolvedValue:N,colorVariables:d,matchingVariable:R,onChange:X=>n("color",X),accentColor:a,modified:r("color"),panelContentRef:u,isDropdownOpen:c==="color",onDropdownChange:X=>p(X?"color":null)})})]})]})]})}import{Fragment as Ju,jsx as me,jsxs as Ct}from"react/jsx-runtime";var ma=[{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 Uu(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 es(e,t){return!t||e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":"fixed"}function Ur(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=so(t);if(typeof n.num=="number"&&!isNaN(n.num)){let r=n.unit==="%"?"px":n.unit||"px";return`${n.num}${r}`}return"auto"}}}function Xo(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 da(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function ua(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 Fn="rgba(0, 0, 0, 0.04)",en={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 ts({label:e,property:t,cssValue:n,mode:r,onValueChange:o,onModeChange:i,modified:s,dimmed:l,dropdownOpen:a,onDropdownChange:d,panelContentRef:c,accentColor:p="#3b82f6",onReset:u,minValue:g,maxValue:E,onMinChange:w,onMaxChange:I,onMinReset:A,onMaxReset:U,minModified:B,maxModified:y}){let v=so(n),O=s?v.unit||Vo(t):Vo(t),Z=!s&&v.unit&&v.unit!==O?Ki(v.num,O):v.num,[N,R]=tn(!1),[$,C]=tn(String(Z)),[L,X]=tn(!1),ge=vn(null),ve=vn(null),ye=vn(null),ae=vn(!1);An(()=>{N||C(String(Z))},[Z,N]),An(()=>{if(!a)return;let Ie=ct=>{ve.current&&!ct.composedPath().includes(ve.current)&&ye.current&&!ct.composedPath().includes(ye.current)&&(d==null||d(!1))},st=ct=>{ct.key==="Escape"&&(d==null||d(!1))};return document.addEventListener("mousedown",Ie),document.addEventListener("keydown",st),()=>{document.removeEventListener("mousedown",Ie),document.removeEventListener("keydown",st)}},[a,d]),An(()=>{N&&ge.current&&(ge.current.focus(),ge.current.select())},[N]);let ze=()=>{let Ie=jr($,t,n,s);o(Ie||`${Math.max(0,parseFloat($)||0)}${O}`),R(!1)},Me=()=>{if(ae.current){ae.current=!1;return}ze()},ne=Ie=>{if(Ie.key==="Enter"){ze();return}if(Ie.key==="Escape"){ae.current=!0,C(String(Z)),R(!1);return}if(Ie.key==="ArrowUp"||Ie.key==="ArrowDown"){Ie.preventDefault();let st=Ie.key==="ArrowUp"?1:-1,ct=Ie.shiftKey?8:Ie.altKey?.1:1,_=parseFloat($)||0,xe=Math.round(Math.max(0,_+st*ct)*1e3)/1e3;C(String(xe)),o(`${xe}${O}`)}},He={fixed:"Fixed",hug:"Hug",fill:"Fill"},Ne={fixed:me(ga,{size:12}),hug:me(Gu,{size:12}),fill:me(ga,{size:12})},Ve=()=>{d==null||d(!a)},$e=()=>{if(!ye.current||!(c!=null&&c.current))return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let Ie=ye.current.getBoundingClientRect(),st=c.current.getBoundingClientRect(),ct=c.current.closest('[data-devtools="panel"]'),_=ct?ct.getBoundingClientRect():{top:0,left:0};return{position:"fixed",top:Ie.bottom+4-_.top,left:st.left+4-_.left,width:st.width-8}};return Ct("div",{ref:ye,onMouseEnter:()=>X(!0),onMouseLeave:()=>X(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:N?p:L?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Fn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:l?.3:1},children:[me("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"?N?me("input",{ref:ge,type:"text",inputMode:"numeric",value:$,onChange:Ie=>C(Ie.target.value),onKeyDown:ne,onBlur:Me,style:b(f({},en),{flex:1,minWidth:0,padding:"4px 2px"})}):me("span",{onClick:()=>R(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:Z}):me("span",{style:{flex:1}}),Ct("button",{type:"button",onClick:Ve,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:[He[r],me(os,{size:12})]}),a&&Ct("div",{ref:ve,style:b(f({},$e()),{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:[Ct("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,Ct("span",{children:["Fixed ",t," (",n,")"]}),r==="fixed"&&me(Jr,{size:14,style:{marginLeft:"auto"}})]}),Ct("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,me("span",{children:"Hug contents"}),r==="hug"&&me(Jr,{size:14,style:{marginLeft:"auto"}})]}),Ct("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,me("span",{children:"Fill container"}),r==="fill"&&me(Jr,{size:14,style:{marginLeft:"auto"}})]}),me("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),Ct("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[Ct("div",{style:{display:"flex",alignItems:"center",backgroundColor:Fn,borderRadius:2,padding:"4px 8px"},children:[me("span",{onClick:B?Ie=>{Ie.stopPropagation(),A==null||A()}:void 0,title:B?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:B?p:"#999",fontWeight:B?600:400,marginRight:8,flexShrink:0,cursor:B?"pointer":"default"},children:"Min"}),me("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:Ie=>w==null?void 0:w(Ie.target.value),onClick:Ie=>Ie.stopPropagation(),style:b(f({},en),{flex:1,minWidth:0,padding:0,textAlign:"right",color:B?p:"inherit",fontWeight:B?600:400})})]}),Ct("div",{style:{display:"flex",alignItems:"center",backgroundColor:Fn,borderRadius:2,padding:"4px 8px"},children:[me("span",{onClick:y?Ie=>{Ie.stopPropagation(),U==null||U()}:void 0,title:y?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:y?p:"#999",fontWeight:y?600:400,marginRight:8,flexShrink:0,cursor:y?"pointer":"default"},children:"Max"}),me("input",{type:"text",value:E||"",placeholder:"\u2014",onChange:Ie=>I==null?void 0:I(Ie.target.value),onClick:Ie=>Ie.stopPropagation(),style:b(f({},en),{flex:1,minWidth:0,padding:0,textAlign:"right",color:y?p:"inherit",fontWeight:y?600:400})})]})]})]})]})}function En({children:e,style:t,dimmed:n}){let[r,o]=tn(!1);return me("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:Fn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:n?.3:1},t),children:e})}function Jn({children:e}){let[t,n]=tn(!1);return me("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:Fn,transition:"border-color 100ms ease"},children:e})}function Hn({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:p,onUnitCycle:u}){let g=so(t),E=Vo(e),w=Yr[e],A=p&&w&&w.includes(p)?p:E,U=r&&g.unit||A,B=!r&&g.unit&&g.unit!==U?Ki(g.num,U):g.num,[y,v]=tn(!1),[O,Z]=tn(""),N=Me=>{v(!0),Z(String(B||"")),requestAnimationFrame(()=>Me.target.select())},R=()=>{if(v(!1),O.trim()){let Me=jr(O,e,t,r);Me&&n(Me)}},$=Me=>{let ne=Me.target.value;Z(ne);let He=ne.trim(),Ne=He.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),Ve=He.match(/^(-?[\d.]+)$/);if(Ne){let $e=parseFloat(Ne[1]);isNaN($e)||n(`${$e}${Ne[2].toLowerCase()}`)}else if(Ve){let $e=parseFloat(Ve[1]);isNaN($e)||n(`${$e}${U}`)}},C=Me=>{if(Me.key==="Enter"){if(O.trim()){let ne=jr(O,e,t,r);ne&&n(ne)}Me.target.blur();return}if(Me.key==="ArrowUp"||Me.key==="ArrowDown"){Me.preventDefault();let ne=Me.shiftKey?10:Me.altKey?.1:1,He=(Me.key==="ArrowUp"?1:-1)*o*ne,Ne=parseFloat(O)||B||0,Ve=Math.round((Ne+He)*1e3)/1e3;i!==void 0&&(Ve=Math.max(i,Ve)),s!==void 0&&(Ve=Math.min(s,Ve)),Z(String(Ve)),n(`${Ve}${U}`)}},L=/^-?[\d.]/.test(t.trim()),X=y?O:L?String(B):"",ve=y&&/\s*(rem|em|px|%)\s*$/i.test(O)?"":U,ye=u&&(ve==="rem"||ve==="px"),ae={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},ze=b(f({},c!=null?c:ae),{pointerEvents:"auto",cursor:"pointer"});return Ct(Ju,{children:[me("input",{type:"text",inputMode:"decimal",value:X,onFocus:N,onBlur:R,onChange:$,onKeyDown:C,placeholder:a,style:l}),d&&ve&&me("span",{style:ye?ze:c!=null?c:ae,onClick:ye?u:void 0,title:ye?"Click to switch units":void 0,children:ve})]})}function ns({value:e,resolvedValue:t,colorVariables:n,matchingVariable:r,onChange:o,accentColor:i="#3b82f6",modified:s,panelContentRef:l,isDropdownOpen:a,onDropdownChange:d}){let[c,p]=tn(!1),u=!e.includes("var(")&&r?r.usage:e,[g,E]=tn(u),[w,I]=tn(!1),[A,U]=tn(!1),[B,y]=tn(!1),v=vn(null),O=vn(null),Z=vn(null),N=a!==void 0?a:w,R=d||I,$=Wn(()=>{if(!Z.current)return{position:"fixed",top:0,left:0,width:200};let ne=Z.current.getBoundingClientRect(),He=Z.current.closest('[data-devtools="panel"]'),Ne=He?He.getBoundingClientRect():{top:0,left:0};if(l!=null&&l.current){let Ve=l.current.getBoundingClientRect();return{position:"fixed",top:ne.bottom+4-Ne.top,left:Ve.left+4-Ne.left,width:Ve.width-8}}return{position:"fixed",top:ne.bottom+4-Ne.top,left:ne.left-Ne.left,width:ne.width}},[l]);An(()=>{if(!c){let ne=!e.includes("var(")&&r?r.usage:e;E(ne)}},[e,c,r]),An(()=>{if(!N&&!A)return;let ne=Ne=>{Z.current&&!Ne.composedPath().includes(Z.current)&&(R(!1),U(!1))},He=Ne=>{Ne.key==="Escape"&&(R(!1),U(!1))};return document.addEventListener("mousedown",ne),document.addEventListener("keydown",He),()=>{document.removeEventListener("mousedown",ne),document.removeEventListener("keydown",He)}},[N,A]),An(()=>{c&&v.current&&(v.current.focus(),v.current.select())},[c]);let C=Xr(()=>{if(!g||g.startsWith("#")||g.startsWith("rgb")||g.startsWith("hsl")||g.startsWith("oklch"))return[];let ne=g.toLowerCase();return n.filter(He=>He.name.toLowerCase().includes(ne)||He.usage.toLowerCase().includes(ne)).slice(0,8)},[g,n]),L=()=>{o(g),p(!1),U(!1)},X=ne=>{E(ne),ne.includes("var")||ne.includes("--")||ne.length>0&&!ne.startsWith("#")?U(!0):U(!1)},ge=ne=>{E(ne.usage),o(ne.usage),R(!1),U(!1),p(!1)},ve=()=>{setTimeout(()=>{!N&&!A&&L()},150)},ye=ne=>{ne.key==="Enter"?L():ne.key==="Escape"&&(E(e),p(!1),U(!1))},ae=Xr(()=>{let ne=t.trim().toLowerCase();if(ne.startsWith("#"))return ne.length===4?`#${ne[1]}${ne[1]}${ne[2]}${ne[2]}${ne[3]}${ne[3]}`:ne.slice(0,7);let He=ne.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(He){let Ve=parseInt(He[1],10).toString(16).padStart(2,"0"),$e=parseInt(He[2],10).toString(16).padStart(2,"0"),Ie=parseInt(He[3],10).toString(16).padStart(2,"0");return`#${Ve}${$e}${Ie}`}let Ne=ne.match(/oklch\(\s*([\d.]+)/);if(Ne){let Ve=Math.max(0,Math.min(1,parseFloat(Ne[1]))),$e=Math.round(Ve*255).toString(16).padStart(2,"0");return`#${$e}${$e}${$e}`}return"#000000"},[t]),ze=ne=>{let He=ne.target.value;E(He),o(He)},Me=e.includes("var(");return Ct("div",{ref:Z,onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:c?i:B?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Fn,transition:"border-color 100ms ease",overflow:"hidden"},children:[Ct("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[Ct("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[me("input",{type:"color",value:ae,onChange:ze,style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),me("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),c?me("input",{ref:v,type:"text",value:g,onChange:ne=>X(ne.target.value),onKeyDown:ye,onBlur:ve,style:b(f({},en),{flex:1,minWidth:0})}):me("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&&me("button",{type:"button",onClick:()=>R(!N),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:me(os,{size:12})})]}),A&&C.length>0&&me("div",{style:b(f({},$()),{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:C.map(ne=>Ct("button",{type:"button",onClick:()=>ge(ne),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:[me("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:ne.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),me("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:ne.name})]},ne.name))}),N&&me("div",{ref:O,style:b(f({},$()),{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(ne=>Ct("button",{type:"button",onClick:()=>ge(ne),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:u===ne.usage||e===ne.usage?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:u===ne.usage||e===ne.usage?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[me("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:ne.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),me("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:ne.name}),(u===ne.usage||e===ne.usage)&&me(Jr,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},ne.name))})]})}function ha({element:e,elementInfo:t,selector:n,styleModifications:r,dispatch:o,onClose:i,onHover:s,accentColor:l="#3b82f6",toolbarRef:a}){var Be,De;let d=vn(null),c=vn(null),[p,u]=tn(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch(z){return!1}});An(()=>{if(p)return;let z=setTimeout(()=>u(!0),50);return()=>clearTimeout(z)},[p]);let[g,E]=tn(null),[w,I]=tn(null),A=g!==null||w!==null,[U,B]=tn("rem"),y=Wn(()=>{B(z=>z==="rem"?"px":"rem")},[]),v=vn(new Map),[O,Z]=tn(""),N=Xr(()=>Di(),[]);An(()=>{let z=re=>{var be;if(re.key!=="Escape")return;let se=document.activeElement;se&&((be=d.current)!=null&&be.contains(se))||i()};return window.addEventListener("keydown",z),()=>window.removeEventListener("keydown",z)},[i]);let R=vn({top:0,left:0,maxHeight:400}),[,$]=tn(0),C="devtools-panel-position",L=vn({x:0,y:0}),X=vn(null),ge=vn(!1);An(()=>{try{let z=localStorage.getItem(C);if(z){let re=JSON.parse(z);typeof re.top=="number"&&typeof re.left=="number"&&(ge.current=!0,R.current=b(f({},R.current),{top:re.top,left:re.left}))}}catch(z){}},[]),An(()=>{let z=se=>{var bt;let be=X.current;if(!be)return;let pe=be.startOffsetX+(se.clientX-be.startX),ke=be.startOffsetY+(se.clientY-be.startY),oe=280,We=16,Xe=Math.max(We,Math.min(window.innerWidth-oe-We,R.current.left+pe)),At=Math.max(We,R.current.top+ke);L.current={x:Xe-R.current.left,y:At-R.current.top};let Gt=d.current,it=Gt==null?void 0:Gt.parentElement;if(!it)return;it.style.top=`${At}px`,it.style.left=`${Xe}px`;let Vt=(bt=a==null?void 0:a.current)==null?void 0:bt.getBoundingClientRect(),Kt=window.innerHeight-16;Vt&&Xe+oe>Vt.left&&(Kt=Vt.top-8);let St=Math.max(0,At),Ot=Math.max(200,Kt-St);Gt&&(Gt.style.maxHeight=`${Ot}px`)},re=()=>{if(!X.current)return;let se=R.current.top+L.current.y,be=R.current.left+L.current.x;R.current=b(f({},R.current),{top:se,left:be}),L.current={x:0,y:0},ge.current=!0;try{localStorage.setItem(C,JSON.stringify({top:se,left:be}))}catch(pe){}X.current=null};return window.addEventListener("mousemove",z),window.addEventListener("mouseup",re),()=>{window.removeEventListener("mousemove",z),window.removeEventListener("mouseup",re)}},[]);let ve=Wn(z=>{z.button!==0||z.target.closest("button")||(z.preventDefault(),X.current={startX:z.clientX,startY:z.clientY,startOffsetX:L.current.x,startOffsetY:L.current.y})},[]);An(()=>{L.current={x:0,y:0};let z=(be=!1)=>{var Kt;let pe=d.current,ke=280,oe=8,We,Xe;if(ge.current)We=R.current.top,Xe=R.current.left;else{let St=e.getBoundingClientRect();Xe=St.right+oe,We=St.top,Xe+ke>window.innerWidth-oe&&(Xe=St.left-ke-oe),Xe<oe&&(Xe=Math.max(oe,(window.innerWidth-ke)/2))}let At=(Kt=a==null?void 0:a.current)==null?void 0:Kt.getBoundingClientRect(),Gt=window.innerHeight-16;At&&Xe+ke>At.left&&(Gt=At.top-oe);let it=Math.max(0,We),Vt=Math.max(200,Gt-it);if(R.current={top:We,left:Xe,maxHeight:Vt},be&&pe){let St=pe.parentElement;St&&!ge.current&&(St.style.top=`${We+L.current.y}px`,St.style.left=`${Xe+L.current.x}px`),pe.style.maxHeight=`${Vt}px`}else $(St=>St+1)};z(!1);let re=()=>z(!0),se=()=>z(!1);return window.addEventListener("scroll",re,{passive:!0}),window.addEventListener("resize",se,{passive:!0}),()=>{window.removeEventListener("scroll",re),window.removeEventListener("resize",se)}},[e]),An(()=>{let z=d.current;if(!z)return;let re=se=>{let be=c.current;if(!be){se.preventDefault();return}let{scrollTop:pe,scrollHeight:ke,clientHeight:oe}=be,We=pe<=0&&se.deltaY<0,Xe=pe+oe>=ke&&se.deltaY>0;(We||Xe)&&se.preventDefault()};return z.addEventListener("wheel",re,{passive:!1}),()=>z.removeEventListener("wheel",re)},[]);let ye=Xr(()=>r.find(z=>z.selector===n),[r,n]),ae=Wn(z=>{let re=ye==null?void 0:ye.changes.find(se=>se.property===z);if(re)return re.modified;if(z.includes("color")){let se=Ai(e,z);if(se&&se.includes("var("))return se}return lr(e,z)},[e,ye]),ze=Wn(z=>{if(v.current.has(z))return v.current.get(z);let re=ye==null?void 0:ye.changes.find(be=>be.property===z);if(re)return re.original;let se=lr(e,z);return v.current.set(z,se),se},[e,ye]),Me=Wn((z,re)=>{let se=ze(z);Ge(e,z,re),z==="backdrop-filter"&&Ge(e,"-webkit-backdrop-filter",re),o({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:z,original:se,modified:re}})},[e,n,t,o,ze]),ne=Wn(()=>{Ni(n,r);let z=r.find(re=>re.selector===n);if(z)for(let re of z.changes)o({type:"CLEAR_STYLE",payload:{selector:n,property:re.property}});v.current.clear()},[n,r,o]),He=Wn(z=>{let re=r.find(be=>be.selector===n);re!=null&&re.changes.find(be=>be.property===z)&&e instanceof HTMLElement&&(e.style.removeProperty(z),o({type:"CLEAR_STYLE",payload:{selector:n,property:z}}),v.current.delete(z))},[e,n,r,o]),Ne=Wn(()=>{let z=O.split(";").map(re=>re.trim()).filter(re=>re);for(let re of z){let se=re.indexOf(":");if(se>0){let be=re.slice(0,se).trim(),pe=re.slice(se+1).trim();be&&pe&&Me(be,pe)}}Z("")},[O,Me]),Ve=Wn(z=>{var re;return(re=ye==null?void 0:ye.changes.some(se=>se.property===z))!=null?re:!1},[ye]),$e=z=>{var ke;let re=ae(z.property),se=Ve(z.property),be=!se&&Uu(z.property,re),pe={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(be&&z.type!=="backdrop-filter")return me(Jn,{modified:!1,children:me("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:oe=>Me(z.property,oe.target.value),style:b(f({},pe),{color:"#999"})})});switch(z.type){case"color":{let oe=dr(e,re),We=re.includes("var(")?null:ur(oe,N);return me(ns,{value:re,resolvedValue:oe,colorVariables:N,matchingVariable:We,onChange:Xe=>Me(z.property,Xe),accentColor:l,modified:se,panelContentRef:c,isDropdownOpen:w===z.property,onDropdownChange:Xe=>I(Xe?z.property:null)})}case"number":{if(!!Yr[z.property])return me(Jn,{modified:se,children:me(Hn,{property:z.property,value:re,onChange:Xe=>Me(z.property,Xe),isModified:se,min:z.min,max:z.max,step:z.step||1,style:b(f({},pe),{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:U,onUnitCycle:y})});let{num:We}=so(re);return me(Jn,{modified:se,children:me("input",{type:"number",value:We,min:z.min,max:z.max,step:z.step||1,onChange:Xe=>Me(z.property,Xe.target.value),style:pe})})}case"select":return me(Jn,{modified:se,children:Ct("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[me("select",{value:re,onChange:oe=>Me(z.property,oe.target.value),style:b(f({},pe),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(ke=z.options)==null?void 0:ke.map(oe=>me("option",{value:oe,children:oe},oe))}),me("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:me(os,{size:12})})]})});case"spacing":return me(Jn,{modified:se,children:me("input",{type:"text",value:re,onChange:oe=>Me(z.property,oe.target.value),placeholder:"e.g., 10px or 10px 20px",style:pe})});case"backdrop-filter":return me(ia,{value:re,onChange:oe=>Me(z.property,oe),accentColor:l,modified:se,panelContentRef:c});default:return me(Jn,{modified:se,children:me("input",{type:"text",value:re,onChange:oe=>Me(z.property,oe.target.value),style:pe})})}},Ie=(Be=ye==null?void 0:ye.changes.length)!=null?Be:0,st=(De=ye==null?void 0:ye.captured)!=null?De:!1,ct=b(f({position:"fixed",top:R.current.top,left:R.current.left,width:280,maxHeight:R.current.maxHeight,backgroundColor:"rgba(255, 255, 255, 0.85)",backdropFilter:"blur(32px)",WebkitBackdropFilter:"blur(32px)"},io),{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"}),_={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:X.current?"grabbing":"grab"},xe={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"},ce={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},Se={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return me("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:R.current.top+L.current.y,left:R.current.left+L.current.x,zIndex:1e4,pointerEvents:"none"},children:Ct("div",{ref:d,"data-devtools":"panel",style:b(f({},ct),{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:[Ct("div",{style:_,onMouseDown:ve,children:[Ct("div",{style:{display:"flex",alignItems:"center",gap:8,overflow:"hidden"},children:[me("span",{style:{fontWeight:600,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t.tagName}),Ie>0&&me("span",{style:{backgroundColor:st?"#999999":l,color:"#fff",fontSize:9,padding:"1px 4px",borderRadius:2},children:Ie})]}),Ct("div",{style:{display:"flex",gap:4},children:[Ie>0&&me("button",{type:"button",onClick:ne,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:me(ju,{size:14})}),me("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:me(Vu,{size:14})})]})]}),Ct("div",{ref:c,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[me("div",{style:{opacity:w?.3:1,transition:"opacity 150ms ease"},children:me(ca,{element:e,getValue:ae,getOriginalValue:ze,handleChange:Me,isModified:Ve,onResetProperty:He,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:xe,activeDropdown:g,onDropdownChange:E,panelContentRef:c,accentColor:l,onFieldHover:s,preferredUnit:U,onUnitCycle:y})}),me("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:me(fa,{element:e,getValue:ae,handleChange:Me,isModified:Ve,onResetProperty:He,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:xe,accentColor:l,colorVariables:N,activeColorDropdown:w,onColorDropdownChange:I,panelContentRef:c,preferredUnit:U,onUnitCycle:y})}),ma.map((z,re)=>{let se=re===ma.length-1,be=w&&z.properties.some(ke=>ke.property===w);return Ct("div",{style:{borderBottom:se?"none":"1px solid rgba(0,0,0,0.08)",opacity:A&&!be?.3:1,transition:"opacity 150ms ease"},children:[me("div",{style:xe,children:me("span",{children:z.name})}),me("div",{style:{padding:"4px 0"},children:z.properties.map(ke=>{let oe=Ve(ke.property),We=be&&ke.property!==w;return Ct("div",{style:b(f({},ce),{opacity:We?.3:1,transition:"opacity 150ms ease"}),children:[me("span",{onClick:oe?()=>He(ke.property):void 0,title:oe?"Click to reset":void 0,style:b(f({},Se),{color:oe?l:"#64748b",fontWeight:oe?600:400,cursor:oe?"pointer":"default"}),children:ke.label}),me("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:$e(ke)})]},ke.property)})})]},z.name)}),Ct("div",{style:{opacity:A?.3:1,transition:"opacity 150ms ease"},children:[me("div",{style:xe,children:me("span",{children:"Raw CSS"})}),Ct("div",{style:{padding:"8px 12px"},children:[me("textarea",{value:O,onChange:z=>Z(z.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"}}),O.trim()&&me("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:O.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as Xu,useLayoutEffect as Ku,useState as qu}from"react";import{Fragment as tp,jsx as ko,jsxs as ep}from"react/jsx-runtime";var rs=["flex-start","center","flex-end"],is=["flex-start","center","flex-end"];function Zu(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function Qu(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 ya(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 ba({element:e,modifier:t,accentColor:n,refreshKey:r=0}){let[o,i]=qu(null);if(Xu(()=>{if(!e){i(null);return}let w=()=>i(ya(e));return w(),window.addEventListener("scroll",w,{passive:!0}),window.addEventListener("resize",w,{passive:!0}),()=>{window.removeEventListener("scroll",w),window.removeEventListener("resize",w)}},[e]),Ku(()=>{e&&i(ya(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",p=c==="horizontal"?"vertical":"horizontal",u=[];if(t==="shift"){let w=Zu(l.justifyContent);if(w){let I=rs.indexOf(w);c==="horizontal"?(I>0&&u.push("left"),I<rs.length-1&&u.push("right")):(I>0&&u.push("up"),I<rs.length-1&&u.push("down"))}}else{let w=Qu(l.alignItems);if(w){let I=is.indexOf(w);p==="horizontal"?(I>0&&u.push("left"),I<is.length-1&&u.push("right")):(I>0&&u.push("up"),I<is.length-1&&u.push("down"))}}if(u.length===0)return null;let g=14,E=7;return ko(tp,{children:u.map(w=>{let I,A;switch(w){case"right":I=s.right+g,A=s.top+s.height/2;break;case"left":I=s.left-g,A=s.top+s.height/2;break;case"down":I=s.left+s.width/2,A=s.bottom+g;break;case"up":I=s.left+s.width/2,A=s.top-g;break}let U=w==="right"?0:w==="left"?180:w==="down"?90:-90,B={position:"fixed",left:I-E,top:A-E,width:E*2,height:E*2,pointerEvents:"none",zIndex:9997};return ko("div",{"data-devtools":"swipe-hint",style:B,children:ko("svg",{width:E*2,height:E*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:ep("g",{transform:`rotate(${U})`,children:[ko("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),ko("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),ko("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),ko("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},w)})})}import{useEffect as np,useLayoutEffect as op,useState as rp}from"react";import{jsx as ss,jsxs as ls}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 xa({element:e,fontSize:t,lineHeight:n,accentColor:r,hoveredProperty:o,draggingProperty:i,cursorViewport:s}){let[l,a]=rp(null);if(np(()=>{if(!e){a(null);return}let A=()=>{a(Yo(e))};return A(),window.addEventListener("scroll",A,{passive:!0}),window.addEventListener("resize",A,{passive:!0}),()=>{window.removeEventListener("scroll",A),window.removeEventListener("resize",A)}},[e]),op(()=>{e&&a(Yo(e))},[e,t,n]),!l)return null;let d=l.width,c=l.height,p=ip(r,.2),u=i!=null?i:o,g=8,E=2,w={position:"fixed",top:l.top,left:l.left,width:d,height:c,pointerEvents:"none",zIndex:9996,overflow:"visible"},I=A=>A==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return ls("div",{"data-devtools":"text-handles",style:w,children:[ls("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${c}`,children:[ss("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)&&ss("rect",{x:d-E/2,y:c/2-g/2,width:E,height:g,fill:r,stroke:"#ffffff",strokeWidth:u==="font-size"?4:2,paintOrder:"stroke"}),(u==="line-height"||!u)&&ss("rect",{x:d/2-g/2,y:c-E/2,width:g,height:E,fill:r,stroke:"#ffffff",strokeWidth:u==="line-height"?4:2,paintOrder:"stroke"})]}),s&&u&&(()=>{let A=u==="font-size"?"Aa":"Lh",U=I(u);return ls("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:[A," ",U]})})()]})}import{Fragment as qo,jsx as rt,jsxs as Ko}from"react/jsx-runtime";var va=8,as=[0,1,2,4,8,12,16,20,24,28,32],cs="devtools-active-text";function Sa(e,t,n=0,r,o){let i=e.left+window.scrollX+4,s=t==="top-left"?e.top+window.scrollY-Ln-n*Ln+4:e.bottom+window.scrollY+4-1+n*Ln,l=window.scrollY+4,a=window.scrollY+window.innerHeight-Ln-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-Ln-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 wa({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:r,inFlightStyleSelectors:o,inFlightSelectorColors:i,onAttachImages:s,onReply:l,onViewThread:a,onCloseThread:d,onModelComponentsAdd:c,onModelComponentFocus:p,onModelComponentHover:u,modelComponentNames:g,modelPanelHoveredComponent:E,modelSpacingTokenHover:w,highlightedAnnotationIds:I,focusedThreadAnnotationId:A,externalCanvasRef:U,toolbarRef:B}){var Os,Ns,Ds,Hs,Fs,_s,zs,$s,Ws;let{canvasRef:y,redrawAll:v,resizeCanvas:O}=Cl(),Z=jt(m=>{y.current=m,U&&(U.current=m)},[U,y]),N=Bt(!1);an(()=>{let m=y.current;if(!m)return;let h=()=>{N.current&&(N.current=!1,m.style.pointerEvents="")},J=T=>{T.button===0&&N.current&&h()};return window.addEventListener("mousedown",J),()=>window.removeEventListener("mousedown",J)},[y]);let[R,$]=dt(!1),[C,L]=dt(()=>{if(typeof window=="undefined")return null;try{let m=localStorage.getItem(cs);return m?JSON.parse(m):null}catch(m){return null}}),[X,ge]=dt(null),[ve,ye]=dt(null),[ae,ze]=dt(null),Me=Bt(null),ne=Bt(null),He=Bt({x:0,y:0}),Ne=Bt([]),Ve=Bt(0),[$e,Ie]=dt(null),[st,ct]=dt(new Map),_=Bt(0),xe=Bt(null),[ce,Se]=dt(null),[Be,De]=dt(null),[z,re]=dt(null),[se,be]=dt(null),pe=Bt({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,oe]=dt(null),[We,Xe]=dt(null),[At,Gt]=dt(null),[it,Vt]=dt(null),Kt=Bt({x:0,y:0}),[St,Ot]=dt({x:0,y:0}),bt=Bt({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}),[Et,rn]=dt(null),[zt,Mn]=dt(null),[lt,Q]=dt(null),[Fe,tt]=dt(!1),[In,$t]=dt(0),[fn,dn]=dt(null),gt=Bt({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,Pt]=dt(null),[Nt,qt]=dt(null),[xt,Qn]=dt(null),Pn=Bt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[Dt,jn]=dt(null),[gn,mn]=dt(null),[ut,D]=dt(null),K=El(),te=Bt(i);te.current=i;let Re=jt(m=>{let h=te.current;if(!h||h.size===0)return!1;for(let J of h.keys())try{if(m.matches(J))return!0}catch(T){}return!1},[]),he=Bt(e);he.current=e;let Ue=Bt(C);Ue.current=C;let Je=Bt([]),Le=Bt(n);Le.current=n;let[S,j]=dt(null),ee=e.selectedAnnotationIds;Je.current=ee;let de=jt((m,h=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:m,addToSelection:h}})},[t]),we=jt(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[le,ot]=dt(null),[Pe,et]=dt({x:window.scrollX,y:window.scrollY});an(()=>(O(),window.addEventListener("resize",O),()=>window.removeEventListener("resize",O)),[O]),an(()=>{let m=()=>{et({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",m,{passive:!0}),()=>window.removeEventListener("scroll",m)},[]),an(()=>{C?localStorage.setItem(cs,JSON.stringify(C)):localStorage.removeItem(cs)},[C]),kl(C,L,X,e.annotations,t);let pt=Bt($e);pt.current=$e,an(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let m=h=>{if(!h.altKey||!pt.current)return;h.preventDefault();let J=h.deltaY>0?-1:1;_.current=Math.max(0,_.current+J);let T=xe.current;if(T){let M=Br(T,_.current);Ie(M)}};return window.addEventListener("wheel",m,{passive:!1}),()=>window.removeEventListener("wheel",m)},[e.activeTool,e.isAnnotating]),an(()=>{e.activeTool!=="model"&&(Ie(null),ct(new Map),_.current=0,xe.current=null)},[e.activeTool]),an(()=>{var J;let m=(J=$e==null?void 0:$e.name)!=null?J:null,h=m&&(g!=null&&g.has(m))?m:null;u==null||u(h)},[$e,g,u]);let[mt,Ht]=dt(null);an(()=>{var J;if(!E){Ht(null);return}let m=zo(E.name),h=E.instanceIndex;Ht((J=m[h%m.length])!=null?J:null)},[E]);let[eo,to]=dt([]);an(()=>{var m,h;if(!w){to([]);return}(h=(m=w.token)==null?void 0:m.bindings)!=null&&h.length?to(Ri(w.token)):to(Mi(w.px))},[w]);let ht=Bt(null),ln=Bt(null);ht.current=Et,ln.current=zt,an(()=>{let m=["flex-start","center","flex-end"],h=["flex-start","center","flex-end"],T=null,M=!1,W=null,ie=null,F=(ue,Te)=>{let Ze=vo(ue,Te);for(;Ze&&Ze!==document.documentElement;){let ft=window.getComputedStyle(Ze).display;if(ft==="flex"||ft==="inline-flex")return Ze;Ze=Ze.parentElement}return null},q=ue=>{let Te=window.getComputedStyle(ue).flexDirection;return Te==="column"||Te==="column-reverse"?"vertical":"horizontal"},x=ue=>{let Te=ue.getAttribute("data-pm");return Te||(Te=Math.random().toString(36).substring(2,8),ue.setAttribute("data-pm",Te)),{selector:`[data-pm="${Te}"]`,durableSelector:wn(ue)}},k=()=>{M=!0,T&&clearTimeout(T),T=setTimeout(()=>{M=!1,T=null},300)},G=(ue,Te,nt)=>{let Ze=q(ue);if(Te===Ze){let Ye=window.getComputedStyle(ue).justifyContent,wt=Ye==="normal"||Ye==="flex-start"||Ye==="start"?"flex-start":Ye==="flex-end"||Ye==="end"?"flex-end":Ye==="center"?"center":null;if(!wt)return;let Ut=m.indexOf(wt)+nt;if(Ut<0||Ut>=m.length)return;let Vn=m[Ut],{selector:fo,durableSelector:ui}=x(ue);Ge(ue,"justify-content",Vn),t({type:"MODIFY_STYLES_BATCH",payload:{selector:fo,durableSelector:ui,element:yn(ue),changes:[{property:"justify-content",original:Ye,modified:Vn}]}})}else{let Ye=window.getComputedStyle(ue).flexDirection,wt=Ze==="horizontal"?"column":"row",{selector:Bn,durableSelector:Ut}=x(ue);Ge(ue,"flex-direction",wt),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Bn,durableSelector:Ut,element:yn(ue),changes:[{property:"flex-direction",original:Ye,modified:wt}]}})}$t(ft=>ft+1)},P=(ue,Te,nt)=>{let ft=q(ue)==="horizontal"?"vertical":"horizontal";if(Te!==ft)return;let wt=window.getComputedStyle(ue).alignItems,Bn=wt==="normal"||wt==="stretch"||wt==="flex-start"||wt==="start"?"flex-start":wt==="flex-end"||wt==="end"?"flex-end":wt==="center"?"center":null;if(!Bn)return;let Vn=h.indexOf(Bn)+nt;if(Vn<0||Vn>=h.length)return;let fo=h[Vn],{selector:ui,durableSelector:Sc}=x(ue);Ge(ue,"align-items",fo),t({type:"MODIFY_STYLES_BATCH",payload:{selector:ui,durableSelector:Sc,element:yn(ue),changes:[{property:"align-items",original:wt,modified:fo}]}}),$t(wc=>wc+1)},H=20,Y=null,V=null,fe=0,Oe=(ue,Te,nt)=>{let Ze=F(Te,nt);dn(Ze?{modifier:ue,target:Ze}:null)},je=ue=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(ue.key==="Shift"&&!ue.altKey){let Te=Kt.current;Oe("shift",Te.x,Te.y)}else if(ue.key==="Alt"&&!ue.shiftKey){let Te=Kt.current;Oe("alt",Te.x,Te.y)}}},Ke=ue=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let Te=ue.shiftKey&&!ue.altKey,nt=ue.altKey&&!ue.shiftKey;if(!Te&&!nt||ue.buttons!==0){Y=null,V=null,fe=0,W=null,ie=null,dn(null);return}if(W===null&&(W=ue.clientX,ie=ue.clientY,Oe(Te?"shift":"alt",ue.clientX,ue.clientY)),M)return;Y===null&&(Y=ue.clientX,V=ue.clientY,fe=0);let Ze=ue.clientX-Y,ft=ue.clientY-V,Ye=Math.abs(Ze)>=Math.abs(ft)?Ze:ft;if(Math.abs(Ye)>3){let fo=Ye>0?1:-1;if(fe!==0&&fo!==fe){Y=ue.clientX,V=ue.clientY,fe=0;return}fe=fo}if(Math.abs(Ze)<H&&Math.abs(ft)<H)return;let wt=F(W,ie);if(!wt)return;let Bn=Math.abs(Ze)>=Math.abs(ft)?"horizontal":"vertical",Vn=(Bn==="horizontal"?Ze:ft)>0?1:-1;Y=null,V=null,fe=0,Te?G(wt,Bn,Vn):P(wt,Bn,Vn),k()},kt=ue=>{(ue.key==="Shift"||ue.key==="Alt")&&(W=null,ie=null,Y=null,V=null,fe=0,dn(null))},qe=()=>{dn(null),Y=null,V=null,fe=0};return window.addEventListener("keydown",je),window.addEventListener("mousemove",Ke),window.addEventListener("mousedown",qe),window.addEventListener("keyup",kt),()=>{window.removeEventListener("keydown",je),window.removeEventListener("mousemove",Ke),window.removeEventListener("mousedown",qe),window.removeEventListener("keyup",kt),T&&clearTimeout(T)}},[e.activeTool,e.isAnnotating,t]),an(()=>{let m=h=>{var W,ie,F,q;if(h.key==="Escape"){if(Ue.current)return;if(e.activeTool==="model"&&st.size>0){h.preventDefault(),ct(new Map);return}if(Je.current.length>0){h.preventDefault(),we();return}}if(h.key==="Enter"&&e.activeTool==="model"&&st.size>0&&c){h.preventDefault();let x=[...st.keys()].filter(k=>!(g!=null&&g.has(k)));x.length>0&&c(x),ct(new Map);return}if((h.metaKey||h.ctrlKey)&&h.key==="v"&&Ne.current.length>0&&!Ue.current){h.preventDefault(),Ve.current++;let x=Ve.current*20,G=((W=Ne.current[0])==null?void 0:W.groupId)?Math.random().toString(36).substring(2,9):void 0,P=Ne.current.map(Y=>b(f({},Y),{id:Math.random().toString(36).substring(2,9),groupId:Y.groupId?G:void 0,timestamp:Date.now(),points:Y.points.map(V=>({x:V.x+x,y:V.y+x}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:P}});let H=P.find(Y=>Y.type!=="text")||P[0];H&&de(H.id);return}let J=Je.current;if(J.length===0||Ue.current)return;let T=(F=(ie=h.composedPath)==null?void 0:ie.call(h)[0])!=null?F:h.target,M=T==null?void 0:T.tagName;if(!(M==="INPUT"||M==="TEXTAREA"||T!=null&&T.isContentEditable)&&(h.key==="Delete"||h.key==="Backspace")){if(h.preventDefault(),d){let x=he.current.annotations;for(let k of J){let G=x.find(H=>H.id===k);if(!G)continue;let P=G.threadId||G.groupId&&((q=x.find(H=>H.groupId===G.groupId&&H.threadId))==null?void 0:q.threadId);P&&d(P)}}for(let x of J)t({type:"DELETE_ANNOTATION",payload:{id:x}});we()}};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[t,we,de,e.activeTool,st,g,c,d]);let Wt=Do(),Tt=Kr(()=>e.annotations.filter(m=>!m.pathname||m.pathname===Wt),[e.annotations,Wt]),Rn=Kr(()=>Wr(e.annotations),[e.annotations]),Sn=Kr(()=>{let m=new Map,h=new Set,J=1,T=[...e.annotations].sort((M,W)=>M.timestamp-W.timestamp);for(let M of T)if(!Rn.has(M))if(M.groupId){if(!h.has(M.groupId)){h.add(M.groupId);let W=e.annotations.filter(ie=>ie.groupId===M.groupId);for(let ie of W)m.set(ie.id,J);J++}}else m.set(M.id,J),J++;return m},[e.annotations,Rn]),ci=Kr(()=>{if(ee.length===0)return null;let m=new Map;for(let h of ee){let J=e.annotations.find(M=>M.id===h);if(!J)continue;let T=J.groupId?e.annotations.filter(M=>M.groupId===J.groupId):[J];for(let M of T)if(M.linkedSelector&&!(i!=null&&i.has(M.linkedSelector))){let W=M.color||e.activeColor;m.set(M.linkedSelector,W)}}return m.size>0?m:null},[ee,e.annotations,e.activeColor,i]);an(()=>{let m=Tt.filter(h=>!(Rn.has(h)||C&&!C.isNew&&h.id===C.id));v(m,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,ee,va,Pe.x,Pe.y,Sn,I)},[Tt,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,v,C,ee,Pe,Sn,Rn,I]),an(()=>{if(ve){let m=Math.random().toString(36).substring(2,9);L({id:m,point:ve.point,text:"",fontSize:12,isNew:!0,groupId:ve.groupId}),ye(null)}},[ve]),an(()=>{ae&&(L({id:Math.random().toString(36).substring(2,9),point:ae.point,text:"",fontSize:12,isNew:!0,linkedSelector:ae.linkedSelector,linkedAnchor:ae.linkedAnchor,elements:ae.elements}),ze(null))},[ae]);let Io=Bt(null),un=(Os=C==null?void 0:C.id)!=null?Os:null;an(()=>{un&&Me.current?requestAnimationFrame(()=>{var J;let m=Me.current;if(!m||(m.focus(),ne.current===un))return;ne.current=un;let h=Ue.current;if(h){if(Io.current!==null){let T=Math.min(Io.current,m.value.length);m.setSelectionRange(T,T);return}if(!h.isNew&&h.clickPoint){let T=y.current;if(!T)return;let M=T.getContext("2d");if(!M)return;M.font=`${h.fontSize}px ${Jt}`;let W=h.fontSize*1.4,ie=h.text.split(`
|
|
4
|
-
`),F=h.clickPoint.y-h.point.y,q=Math.max(0,Math.min(ie.length-1,Math.floor(F/W))),x=h.clickPoint.x-h.point.x,k=ie[q]||"",G=0;for(let H=0;H<=k.length;H++){let Y=M.measureText(k.substring(0,H)).width;if(Y>x){let V=H>0?M.measureText(k.substring(0,H-1)).width:0;G=x-V<Y-x?H-1:H;break}G=H}let P=G;for(let H=0;H<q;H++)P+=(((J=ie[H])==null?void 0:J.length)||0)+1;m.setSelectionRange(P,P)}}}):(ne.current=null,Io.current=null)},[un,y]);let Ro=jt(m=>{let h=y.current;if(!h)return{x:0,y:0};let J=h.getBoundingClientRect(),T,M;if("touches"in m&&m.touches[0])T=m.touches[0].clientX,M=m.touches[0].clientY;else if("clientX"in m)T=m.clientX,M=m.clientY;else return{x:0,y:0};return{x:T-J.left+window.scrollX,y:M-J.top+window.scrollY}},[y]),po=jt((m,h,J,T)=>{let M=J.x-h.x,W=J.y-h.y,ie=M*M+W*W;if(ie===0)return Math.sqrt((m.x-h.x)**2+(m.y-h.y)**2)<=T;let F=Math.max(0,Math.min(1,((m.x-h.x)*M+(m.y-h.y)*W)/ie)),q=h.x+F*M,x=h.y+F*W;return Math.sqrt((m.x-q)**2+(m.y-x)**2)<=T},[]),Cr=jt(m=>{for(let J=Tt.length-1;J>=0;J--){let T=Tt[J];if(!T||Rn.has(T))continue;let M=(T.strokeWidth||3)+4;switch(T.type){case"text":{if(!T.points[0]||!T.text)continue;let W=T.points[0],ie=T.fontSize||12,F=y.current;if(F){let q=F.getContext("2d");if(q){q.font=`${ie}px ${Jt}`;let x=T.text.replace(/\n/g," "),k=W.x-Pe.x,G=Ho(k),P=Fo(q,x,G),H=q.measureText(P).width,Y=ie*1.4;if(m.x>=W.x-4-4&&m.x<=W.x+H+4+4&&m.y>=W.y-4-4&&m.y<=W.y+Y+4+4)return T}}break}case"rectangle":{if(T.points.length<2)continue;let W=T.points[0],ie=T.points[T.points.length-1],F=Math.min(W.x,ie.x),q=Math.max(W.x,ie.x),x=Math.min(W.y,ie.y),k=Math.max(W.y,ie.y),G=po(m,{x:F,y:x},{x:q,y:x},M),P=po(m,{x:F,y:k},{x:q,y:k},M),H=po(m,{x:F,y:x},{x:F,y:k},M),Y=po(m,{x:q,y:x},{x:q,y:k},M);if(G||P||H||Y)return T;break}case"circle":{if(T.points.length<2)continue;let W=T.points[0],ie=T.points[T.points.length-1],F=(W.x+ie.x)/2,q=(W.y+ie.y)/2,x=Math.abs(ie.x-W.x)/2,k=Math.abs(ie.y-W.y)/2,G=m.x-F,P=m.y-q,H=Math.sqrt((G/x)**2+(P/k)**2);if(Math.abs(H-1)*Math.max(x,k)<=M)return T;break}case"line":{if(T.points.length<2)continue;let W=T.points[0],ie=T.points[T.points.length-1];if(po(m,W,ie,M))return T;break}case"freehand":{if(T.points.length<2)continue;for(let W=0;W<T.points.length-1;W++){let ie=T.points[W],F=T.points[W+1];if(po(m,ie,F,M))return T}break}}}return null},[Tt,y,po,Rn,Pe.x]),Is=jt(m=>{let h=Cr(m);return(h==null?void 0:h.type)==="text"?h:null},[Cr]),Rs=jt(m=>{if(ee.length===0)return null;let h=va/2+4;for(let J of ee){let T=e.annotations.find(M=>M.id===J);if(!(!T||T.points.length<2)){if(T.type==="line"){let M=T.points[0],W=T.points[T.points.length-1];if(Math.sqrt((m.x-M.x)**2+(m.y-M.y)**2)<=h)return{handle:"start",annotationId:J};if(Math.sqrt((m.x-W.x)**2+(m.y-W.y)**2)<=h)return{handle:"end",annotationId:J};continue}if(T.type==="circle"){let M=T.points[0],W=T.points[T.points.length-1],ie=Math.min(M.x,W.x),F=Math.max(M.x,W.x),q=Math.min(M.y,W.y),x=Math.max(M.y,W.y),k=(ie+F)/2,G=(q+x)/2,P=[{handle:"top",x:k,y:q},{handle:"bottom",x:k,y:x},{handle:"left",x:ie,y:G},{handle:"right",x:F,y:G}];for(let{handle:H,x:Y,y:V}of P)if(Math.sqrt((m.x-Y)**2+(m.y-V)**2)<=h)return{handle:H,annotationId:J};continue}if(T.type==="rectangle"||T.type==="freehand"){let M=T.points[0],W=T.points[T.points.length-1],ie,F,q,x;T.type==="freehand"?(ie=Math.min(...T.points.map(G=>G.x)),F=Math.max(...T.points.map(G=>G.x)),q=Math.min(...T.points.map(G=>G.y)),x=Math.max(...T.points.map(G=>G.y))):(ie=Math.min(M.x,W.x),F=Math.max(M.x,W.x),q=Math.min(M.y,W.y),x=Math.max(M.y,W.y));let k=[{corner:"topLeft",x:ie,y:q},{corner:"topRight",x:F,y:q},{corner:"bottomLeft",x:ie,y:x},{corner:"bottomRight",x:F,y:x}];for(let{corner:G,x:P,y:H}of k)if(Math.sqrt((m.x-P)**2+(m.y-H)**2)<=h)return{handle:G,annotationId:J}}}}return null},[ee,e.annotations]);an(()=>{let m=h=>{if(He.current={x:h.clientX+window.scrollX,y:h.clientY+window.scrollY},!C){let J=Is(He.current);ge((J==null?void 0:J.id)||null)}};return window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m)},[C,Is]);let Lo=jt(()=>{var h;if(!C)return;let m=((h=C.images)==null?void 0:h.length)||0;if(C.text.trim()||m>0)if(C.isNew){let J=Lr();t({type:"ADD_TEXT",payload:f({point:C.point,text:C.text||(m>0?`[${m} image${m>1?"s":""}]`:""),fontSize:C.fontSize,id:J,groupId:C.groupId,linkedSelector:C.linkedSelector,linkedAnchor:C.linkedAnchor,elements:C.elements},m>0?{imageCount:m}:{})}),m>0&&C.images&&s&&s(J,C.images)}else t({type:"UPDATE_TEXT",payload:f({id:C.id,text:C.text||(m>0?`[${m} image${m>1?"s":""}]`:"")},m>0?{imageCount:m}:{})}),m>0&&C.images&&s&&s(C.id,C.images);else C.isNew||t({type:"DELETE_ANNOTATION",payload:{id:C.id}});L(null)},[C,t,s]),Gn=jt(m=>{for(let h=0;h<as.length-1;h++){let J=as[h],T=as[h+1];if(m<=(J+T)/2)return J;if(m<T)return T}return Math.round(m/8)*8},[]),Ls=jt((m,h,J,T)=>{let M=J.top+Math.max(T.top,4),W=J.bottom-Math.max(T.bottom,4),ie=J.left+Math.max(T.left,4),F=J.right-Math.max(T.right,4);if(m<J.left||m>J.right||h<J.top||h>J.bottom)return null;let q=h<M,x=h>W,k=m<ie,G=m>F;return q&&k?T.top>=T.left?"top":"left":q&&G?T.top>=T.right?"top":"right":x&&k?T.bottom>=T.left?"bottom":"left":x&&G?T.bottom>=T.right?"bottom":"right":q?"top":x?"bottom":k?"left":G?"right":null},[]),As=jt(m=>{var W,ie;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 h=Ro(m),J="shiftKey"in m&&m.shiftKey;if(e.activeTool==="inspector"){if("button"in m&&m.button===2)return;if(ce&&!Re(ce)){let F=e.annotations.find(je=>{if(!je.linkedSelector||!je.threadId)return!1;try{return ce.matches(je.linkedSelector)}catch(Ke){return!1}});if(F!=null&&F.threadId&&a){a(F.threadId),requestAnimationFrame(()=>{var kt;let je=document.querySelector("[data-popmelt-shadow-host]"),Ke=(kt=je==null?void 0:je.shadowRoot)==null?void 0:kt.querySelector("[data-popmelt-reply]");Ke==null||Ke.focus()});return}let q=yn(ce),x=wn(ce),k=ce.getBoundingClientRect(),G=ce.getAttribute("data-pm");G||(G=Math.random().toString(36).substring(2,8),ce.setAttribute("data-pm",G));let P=`[data-pm="${G}"]`,H=e.styleModifications.some(je=>{try{return ce.matches(je.selector)}catch(Ke){return!1}}),Y=e.annotations.filter(je=>{if(!je.linkedSelector)return!1;try{return ce.matches(je.linkedSelector)}catch(Ke){return!1}}).length,V=(H?1:0)+Y,fe=k.top>=Ln*(1+V)?"top-left":"bottom-left",Oe=Sa(k,fe,V,B==null?void 0:B.current);ze({point:Oe,linkedSelector:P,linkedAnchor:fe,elements:[b(f({},q),{selector:x})]})}return}if(e.activeTool==="model"){if("button"in m&&m.button===2)return;if($e){let F=$e.name;if(g!=null&&g.has(F)){p==null||p(F);return}"shiftKey"in m&&m.shiftKey?ct(x=>{let k=new Map(x);return k.has(F)?k.delete(F):k.set(F,$e),k}):st.size===1&&st.has(F)?(c&&c([F]),ct(new Map)):ct(new Map([[F,$e]]))}return}if(e.activeTool==="hand"&&Et&&zt){let F=Et,q=F.getAttribute("data-pm");q||(q=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",q));let x=wn(F),k=`[data-pm="${q}"]`,G=yn(F),P=ar(F),H=h.x-window.scrollX,Y=h.y-window.scrollY,V=Fe,fe=window.getComputedStyle(F).justifyContent,Oe=0;if(V){let Ke=So(F).find(kt=>kt.axis===zt);Oe=Ke?zt==="column"?Ke.w:Ke.h:0}Ge(F,"transition","none"),bt.current={isDragging:!0,hasMoved:!1,axis:zt,startX:H,startY:Y,originalRow:V?Oe:P.row,originalColumn:V?Oe:P.column,element:F,elementInfo:b(f({},G),{selector:k}),selector:k,durableSelector:x,isAuto:V,originalJustifyContent:fe,visualGap:Oe},Q({axis:zt,row:V?Oe:P.row,column:V?Oe:P.column});return}if(e.activeTool==="hand"&&Dt&&gn){let F=Dt,q=F.getAttribute("data-pm");q||(q=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",q));let x=`[data-pm="${q}"]`,k=yn(F),{fontSize:G,lineHeight:P}=cr(F),H=G>0?P/G:1.2,Y=h.x-window.scrollX,V=h.y-window.scrollY;Ge(F,"transition","none");let fe=wn(F);Pn.current={isDragging:!0,property:gn,startX:Y,startY:V,originalFontSize:G,originalLineHeight:P,originalRatio:H,element:F,elementInfo:b(f({},k),{selector:x}),selector:x,durableSelector:fe},D({property:gn,fontSize:G,lineHeight:P});return}if(e.activeTool==="hand"&&sn&&Nt){let F=sn,q=F.getAttribute("data-pm");q||(q=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",q));let x=`[data-pm="${q}"]`,k=wn(F),G=yn(F),P=wo(F),H=F.getBoundingClientRect(),Y=Math.floor(H.height/2),V=h.y-window.scrollY;Ge(F,"transition","none"),gt.current={isDragging:!0,corner:Nt,startY:V,original:P,maxRadius:Y,element:F,elementInfo:b(f({},G),{selector:x}),selector:x,durableSelector:k},Qn({corner:Nt,radius:f({},P)});return}if(e.activeTool==="hand"&&ke&&We){let F=ke,q=F.getAttribute("data-pm");q||(q=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",q));let x=`[data-pm="${q}"]`,k=wn(F),G=yn(F),P=Wo(F),H=h.x-window.scrollX,Y=h.y-window.scrollY;Ge(F,"transition","none"),pe.current={isDragging:!0,side:We,startX:H,startY:Y,original:P,element:F,elementInfo:b(f({},G),{selector:x}),selector:x,durableSelector:k},Vt({side:We,padding:f({},P)});return}let T=Rs(h);if(T){let F=e.annotations.find(q=>q.id===T.annotationId);if(F&&F.type!=="text"&&((W=F.status)!=null?W:"pending")==="pending"){ot({annotationId:T.annotationId,handle:T.handle,startPoint:h,originalPoints:[...F.points],hasMoved:!1});return}}let M=Cr(h);if(M&&M.points[0]){if(C&&Lo(),M.type!=="text"?(de(M.id,J),M.color&&t({type:"SET_COLOR",payload:M.color})):J||we(),a){let F=M.threadId||(M.groupId?(ie=e.annotations.find(q=>q.groupId===M.groupId&&q.threadId))==null?void 0:ie.threadId:void 0);F&&a(F)}j({annotation:M,startPoint:h,hasMoved:!1});return}if(J||we(),e.activeTool==="text"){C&&Lo();let F=Math.random().toString(36).substring(2,9);L({id:F,point:h,text:"",fontSize:12,isNew:!0});return}$(!0),t({type:"START_PATH",payload:h})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,C,ee,ce,ke,We,sn,Nt,Et,zt,Fe,Dt,gn,$e,st,g,c,p,a,Ro,Cr,Rs,t,de,we,Lo]),Ps=jt(m=>{var J,T;let h=Ro(m);if(e.activeTool==="inspector"&&e.isAnnotating){let M=h.x-window.scrollX,W=h.y-window.scrollY,ie=vo(M,W),F=ie&&Re(ie)?null:ie;F!==ce&&(Se(F),De(F?yn(F):null));return}if(e.activeTool==="model"&&e.isAnnotating){let M=h.x-window.scrollX,W=h.y-window.scrollY,ie=vo(M,W);if(ie!==xe.current&&(xe.current=ie,_.current=0),ie){let F=Br(ie,_.current);Ie(F)}else Ie(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let M=h.x-window.scrollX,W=h.y-window.scrollY;Kt.current={x:M,y:W},Ot({x:M,y:W});let ie=K.current.cmd,F=K.current.shift;if(bt.current.isDragging){let x=bt.current,k=x.element;if(!k)return;if(!x.hasMoved){let Y=Math.abs(M-x.startX),V=Math.abs(W-x.startY);if(Y<=2&&V<=2)return;x.hasMoved=!0,x.isAuto&&(Ge(k,"justify-content","normal"),Ge(k,"row-gap",`${x.visualGap}px`),Ge(k,"column-gap",`${x.visualGap}px`),tt(!1))}let G=x.axis,P=x.originalRow,H=x.originalColumn;if(G==="column"){let Y=M-x.startX;H=x.originalColumn+Y,ie||(P=x.originalRow+Y)}else{let Y=W-x.startY;P=x.originalRow+Y,ie||(H=x.originalColumn+Y)}P=Math.max(0,P),H=Math.max(0,H),F&&(P=Gn(P),H=Gn(H)),P=Math.round(P),H=Math.round(H),Ge(k,"row-gap",`${P}px`),Ge(k,"column-gap",`${H}px`),Q({axis:G,row:P,column:H});return}if(gt.current.isDragging){let x=gt.current,k=x.element;if(!k)return;let G=W-x.startY,P=x.corner,H=x.original,Y=f({},H);if(ie){let V=H[P]+G;V=Math.max(0,Math.min(x.maxRadius,V)),F&&(V=Gn(V)),V=Math.round(V),Y[P]=V}else{let V=H[P]+G;V=Math.max(0,Math.min(x.maxRadius,V)),F&&(V=Gn(V)),V=Math.round(V),Y={"top-left":V,"top-right":V,"bottom-right":V,"bottom-left":V}}Ge(k,"border-top-left-radius",`${Y["top-left"]}px`),Ge(k,"border-top-right-radius",`${Y["top-right"]}px`),Ge(k,"border-bottom-right-radius",`${Y["bottom-right"]}px`),Ge(k,"border-bottom-left-radius",`${Y["bottom-left"]}px`),Qn({corner:P,radius:Y});return}if(Pn.current.isDragging){let x=Pn.current,k=x.element;if(!k)return;let G=x.property,P=x.originalFontSize,H=x.originalLineHeight,Y=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(G==="font-size"){let fe=M-x.startX;P=x.originalFontSize+fe,P=Math.max(1,P)}else{let fe=W-x.startY;H=x.originalLineHeight+fe,H=Math.max(P,H)}if(F)if(G==="font-size"){let fe=Y[0],Oe=Math.abs(P-fe);for(let je of Y){let Ke=Math.abs(P-je);Ke<Oe&&(fe=je,Oe=Ke)}P=fe}else{let fe=P>0?H/P:1.2,Oe=Math.round(fe*2)/2;H=P*Math.max(1,Oe)}P=Math.round(P),H=Math.round(H*10)/10,Ge(k,"font-size",`${P}px`);let V=P>0?Math.round(H/P*1e3)/1e3:1.2;Ge(k,"line-height",`${V}`),D({property:G,fontSize:P,lineHeight:H});return}if(pe.current.isDragging){let x=pe.current,k=x.element;if(!k)return;let G=x.side,P=x.original,H=P.top,Y=P.right,V=P.bottom,fe=P.left;if(G==="top"){let Oe=x.startY-W;H=P.top+Oe,ie||(V=P.bottom+Oe)}else if(G==="bottom"){let Oe=W-x.startY;V=P.bottom+Oe,ie||(H=P.top+Oe)}else if(G==="left"){let Oe=x.startX-M;fe=P.left+Oe,ie||(Y=P.right+Oe)}else if(G==="right"){let Oe=M-x.startX;Y=P.right+Oe,ie||(fe=P.left+Oe)}H=Math.max(0,H),Y=Math.max(0,Y),V=Math.max(0,V),fe=Math.max(0,fe),F&&(H=Gn(H),Y=Gn(Y),V=Gn(V),fe=Gn(fe)),H=Math.round(H),Y=Math.round(Y),V=Math.round(V),fe=Math.round(fe),Ge(k,"padding",`${H}px ${Y}px ${V}px ${fe}px`),Vt({side:G,padding:{top:H,right:Y,bottom:V,left:fe}});return}let q=vo(M,W);for(;q&&q.tagName==="A";)q=q.parentElement;{let k=[];q&&k.push(q),sn&&sn!==q&&k.push(sn);let G=null,P=16,H=null;for(let Y of k){let V=Y.getBoundingClientRect(),fe=wo(Y),Oe=[["top-left",V.left,V.top+fe["top-left"]],["top-right",V.right,V.top+fe["top-right"]],["bottom-right",V.right,V.bottom-fe["bottom-right"]],["bottom-left",V.left,V.bottom-fe["bottom-left"]]];for(let[je,Ke,kt]of Oe){let qe=Math.hypot(M-Ke,W-kt);qe<P&&(P=qe,G=je,H=Y)}}if(G&&H){Pt(H),qt(G),ke&&oe(null),We&&Xe(null),Et&&rn(null),zt&&Mn(null),tt(!1),Dt&&jn(null),gn&&mn(null);return}}sn&&Pt(null),Nt&&qt(null);{let x=[];q&&Dr(q)&&x.push(q);let k=(J=q==null?void 0:q.parentElement)!=null?J:null;for(;k&&k!==document.body&&x.length<3;)Dr(k)&&x.push(k),k=k.parentElement;for(let G of x){let H=So(G).find(Y=>M>=Y.x&&M<=Y.x+Y.w&&W>=Y.y&&W<=Y.y+Y.h);if(H){rn(G),Mn(H.axis),tt(Pi(G,H.axis)),ke&&oe(null),We&&Xe(null),Dt&&jn(null),gn&&mn(null);return}}}Et&&rn(null),zt&&Mn(null),tt(!1);{let k=[];q&&k.push(q),Dt&&Dt!==q&&k.push(Dt);let G=null,P=1/0,H=null;for(let Y of k){if(!Bi(Y))continue;let V=Yo(Y);if(!V)continue;let fe=M>=V.left&&M<=V.right&&W>=V.top&&W<=V.bottom,Oe=[["font-size",V.right,V.top+V.height/2],["line-height",V.left+V.width/2,V.bottom]];for(let[je,Ke,kt]of Oe){let qe=Math.hypot(M-Ke,W-kt);(fe||qe<12)&&qe<P&&(P=qe,G=je,H=Y)}}G&&H?(jn(H),mn(G)):(Dt&&jn(null),gn&&mn(null))}if(q!==ke&&oe(q),q){let x=Wo(q),k=q.getBoundingClientRect(),G=Ls(M,W,k,x);Xe(G)}else Xe(null);return}if(le){let{handle:M,originalPoints:W,hasMoved:ie}=le,F=e.annotations.find(P=>P.id===le.annotationId);if(!F)return;let q="metaKey"in m,x=q&&(m.metaKey||m.ctrlKey),k=q&&m.shiftKey,G;if(F.type==="line"){let P=W[0],H=W[W.length-1];M==="start"?G=[h,H]:G=[P,h]}else if(F.type==="freehand"){let P=Math.min(...W.map(Ye=>Ye.x)),H=Math.max(...W.map(Ye=>Ye.x)),Y=Math.min(...W.map(Ye=>Ye.y)),V=Math.max(...W.map(Ye=>Ye.y)),fe=(P+H)/2,Oe=(Y+V)/2,je=H-P||1,Ke=V-Y||1,kt=je/Ke,qe=P,ue=H,Te=Y,nt=V;switch(M){case"topLeft":qe=h.x,Te=h.y;break;case"topRight":ue=h.x,Te=h.y;break;case"bottomLeft":qe=h.x,nt=h.y;break;case"bottomRight":ue=h.x,nt=h.y;break}if(x)switch(M){case"topLeft":ue=H+(P-qe),nt=V+(Y-Te);break;case"topRight":qe=P-(ue-H),nt=V+(Y-Te);break;case"bottomLeft":ue=H+(P-qe),Te=Y-(nt-V);break;case"bottomRight":qe=P-(ue-H),Te=Y-(nt-V);break}if(k){let Ye=ue-qe,wt=nt-Te;if(Math.abs(Ye/wt)>kt){let Ut=Math.abs(wt)*kt*Math.sign(Ye);M==="topLeft"||M==="bottomLeft"?qe=ue-Ut:ue=qe+Ut}else{let Ut=Math.abs(Ye)/kt*Math.sign(wt);M==="topLeft"||M==="topRight"?Te=nt-Ut:nt=Te+Ut}}let Ze=ue-qe||1,ft=nt-Te||1;G=W.map(Ye=>({x:qe+(Ye.x-P)/je*Ze,y:Te+(Ye.y-Y)/Ke*ft}))}else if(F.type==="circle"){let P=W[0],H=W[W.length-1],Y=Math.min(P.x,H.x),V=Math.max(P.x,H.x),fe=Math.min(P.y,H.y),Oe=Math.max(P.y,H.y),je=(Y+V)/2,Ke=(fe+Oe)/2,kt=V-Y,qe=Oe-fe,ue=Y,Te=V,nt=fe,Ze=Oe;switch(M){case"top":if(nt=h.y,x&&(Ze=Ke+(Ke-h.y)),k){let Ye=(Ze-nt)*(kt/qe)/2;ue=je-Ye,Te=je+Ye}break;case"bottom":if(Ze=h.y,x&&(nt=Ke-(h.y-Ke)),k){let Ye=(Ze-nt)*(kt/qe)/2;ue=je-Ye,Te=je+Ye}break;case"left":if(ue=h.x,x&&(Te=je+(je-h.x)),k){let Ye=(Te-ue)*(qe/kt)/2;nt=Ke-Ye,Ze=Ke+Ye}break;case"right":if(Te=h.x,x&&(ue=je-(h.x-je)),k){let Ye=(Te-ue)*(qe/kt)/2;nt=Ke-Ye,Ze=Ke+Ye}break}G=[{x:ue,y:nt},{x:Te,y:Ze}]}else{let P=W[0],H=W[W.length-1],Y=Math.min(P.x,H.x),V=Math.max(P.x,H.x),fe=Math.min(P.y,H.y),Oe=Math.max(P.y,H.y),je=(Y+V)/2,Ke=(fe+Oe)/2,kt=V-Y||1,qe=Oe-fe||1,ue=kt/qe,Te=Y,nt=V,Ze=fe,ft=Oe;switch(M){case"topLeft":Te=h.x,Ze=h.y;break;case"topRight":nt=h.x,Ze=h.y;break;case"bottomLeft":Te=h.x,ft=h.y;break;case"bottomRight":nt=h.x,ft=h.y;break}if(x)switch(M){case"topLeft":nt=V+(Y-Te),ft=Oe+(fe-Ze);break;case"topRight":Te=Y-(nt-V),ft=Oe+(fe-Ze);break;case"bottomLeft":nt=V+(Y-Te),Ze=fe-(ft-Oe);break;case"bottomRight":Te=Y-(nt-V),Ze=fe-(ft-Oe);break}if(k){let Ye=nt-Te,wt=ft-Ze;if(Math.abs(Ye/wt)>ue){let Ut=Math.abs(wt)*ue*Math.sign(Ye);M==="topLeft"||M==="bottomLeft"?Te=nt-Ut:nt=Te+Ut}else{let Ut=Math.abs(Ye)/ue*Math.sign(wt);M==="topLeft"||M==="topRight"?Ze=ft-Ut:ft=Ze+Ut}}G=[{x:Te,y:Ze},{x:nt,y:ft}]}t({type:"RESIZE_ANNOTATION",payload:{id:le.annotationId,points:G,saveUndo:!ie}}),ie||ot(b(f({},le),{hasMoved:!0}));return}if(S&&((T=S.annotation.status)!=null?T:"pending")==="pending"){let M=h.x-S.startPoint.x,W=h.y-S.startPoint.y;if((Math.abs(M)>2||Math.abs(W)>2)&&!S.hasMoved)j(b(f({},S),{hasMoved:!0,startPoint:h})),t({type:"MOVE_ANNOTATION",payload:{id:S.annotation.id,delta:{x:M,y:W},saveUndo:!0}});else if(S.hasMoved){let F=h.x-S.startPoint.x,q=h.y-S.startPoint.y;j(b(f({},S),{startPoint:h})),t({type:"MOVE_ANNOTATION",payload:{id:S.annotation.id,delta:{x:F,y:q}}})}return}!R||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:h})},[R,e.isAnnotating,e.activeTool,S,le,ce,ke,We,sn,Nt,Et,zt,Dt,gn,Ro,t,Gn,Ls]),di=jt(m=>{var T,M,W,ie,F,q;if(Pn.current.isDragging){let x=Pn.current,k=x.element;if(k&&x.selector&&x.elementInfo&&ut){k instanceof HTMLElement&&(k.style.removeProperty("font-size"),k.style.removeProperty("line-height"),k.style.removeProperty("transition"));let G=[];if(x.originalFontSize!==ut.fontSize&&(Ge(k,"font-size",`${ut.fontSize}px`),G.push({property:"font-size",original:`${x.originalFontSize}px`,modified:`${ut.fontSize}px`})),x.originalLineHeight!==ut.lineHeight){let P=x.originalFontSize>0?Math.round(x.originalLineHeight/x.originalFontSize*1e3)/1e3:1.2,H=ut.fontSize>0?Math.round(ut.lineHeight/ut.fontSize*1e3)/1e3:1.2;Ge(k,"line-height",`${H}`),G.push({property:"line-height",original:`${P}`,modified:`${H}`})}G.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(T=x.durableSelector)!=null?T:void 0,element:x.elementInfo,changes:G}})}Pn.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},D(null);return}if(bt.current.isDragging){let x=bt.current,k=x.element,G="button"in m&&m.button===2;if(!x.hasMoved&&!G&&k&&x.selector&&x.elementInfo){k instanceof HTMLElement&&k.style.removeProperty("transition");let P=["space-between","space-around","stretch","normal"],H=x.originalJustifyContent||"normal",Y=P.indexOf(H),V=P[(Y+1)%P.length],fe=[];V==="normal"?(Ge(k,"justify-content","normal"),fe.push({property:"justify-content",original:x.originalJustifyContent,modified:"normal"})):V==="stretch"?(Ge(k,"justify-content",V),Ge(k,"row-gap","8px"),Ge(k,"column-gap","8px"),fe.push({property:"justify-content",original:x.originalJustifyContent||"normal",modified:V}),x.originalRow!==8&&fe.push({property:"row-gap",original:`${x.originalRow}px`,modified:"8px"}),x.originalColumn!==8&&fe.push({property:"column-gap",original:`${x.originalColumn}px`,modified:"8px"})):(k instanceof HTMLElement&&(k.style.removeProperty("row-gap"),k.style.removeProperty("column-gap")),Ge(k,"justify-content",V),fe.push({property:"justify-content",original:x.originalJustifyContent||"normal",modified:V}),x.originalRow>0&&fe.push({property:"row-gap",original:`${x.originalRow}px`,modified:"0px"}),x.originalColumn>0&&fe.push({property:"column-gap",original:`${x.originalColumn}px`,modified:"0px"})),fe.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(M=x.durableSelector)!=null?M:void 0,element:x.elementInfo,changes:fe}})}else if(x.hasMoved&&k&&x.selector&&x.elementInfo&<){k instanceof HTMLElement&&(k.style.removeProperty("row-gap"),k.style.removeProperty("column-gap"),k.style.removeProperty("transition"));let P=[];x.isAuto?(k instanceof HTMLElement&&k.style.removeProperty("justify-content"),Ge(k,"justify-content","normal"),Ge(k,"row-gap",`${lt.row}px`),Ge(k,"column-gap",`${lt.column}px`),P.push({property:"justify-content",original:x.originalJustifyContent,modified:"normal"}),P.push({property:"row-gap",original:"0px",modified:`${lt.row}px`}),P.push({property:"column-gap",original:"0px",modified:`${lt.column}px`})):(x.originalRow!==lt.row&&(Ge(k,"row-gap",`${lt.row}px`),P.push({property:"row-gap",original:`${x.originalRow}px`,modified:`${lt.row}px`})),x.originalColumn!==lt.column&&(Ge(k,"column-gap",`${lt.column}px`),P.push({property:"column-gap",original:`${x.originalColumn}px`,modified:`${lt.column}px`}))),P.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(W=x.durableSelector)!=null?W:void 0,element:x.elementInfo,changes:P}})}bt.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},Q(null);return}if(gt.current.isDragging){let x=gt.current,k=x.element;if(k&&x.selector&&x.elementInfo&&xt){k instanceof HTMLElement&&(k.style.removeProperty("border-top-left-radius"),k.style.removeProperty("border-top-right-radius"),k.style.removeProperty("border-bottom-right-radius"),k.style.removeProperty("border-bottom-left-radius"),k.style.removeProperty("transition"));let G=["top-left","top-right","bottom-right","bottom-left"],P={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},H=[];for(let Y of G)x.original[Y]!==xt.radius[Y]&&(Ge(k,P[Y],`${xt.radius[Y]}px`),H.push({property:P[Y],original:`${x.original[Y]}px`,modified:`${xt.radius[Y]}px`}));H.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(ie=x.durableSelector)!=null?ie:void 0,element:x.elementInfo,changes:H}})}gt.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},Qn(null);return}if(pe.current.isDragging){let x=pe.current,k=x.element,G=x.selector,P=x.elementInfo;if(k&&G&&P&&it){let H=x.original,Y=it.padding;k instanceof HTMLElement&&(k.style.removeProperty("padding"),k.style.removeProperty("transition"));let V=[],fe=[{prop:"padding-top",origVal:H.top,newVal:Y.top},{prop:"padding-right",origVal:H.right,newVal:Y.right},{prop:"padding-bottom",origVal:H.bottom,newVal:Y.bottom},{prop:"padding-left",origVal:H.left,newVal:Y.left}];for(let{prop:Oe,origVal:je,newVal:Ke}of fe)je!==Ke&&(Ge(k,Oe,`${Ke}px`),V.push({property:Oe,original:`${je}px`,modified:`${Ke}px`}));V.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:G,durableSelector:(F=x.durableSelector)!=null?F:void 0,element:P,changes:V}})}pe.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},Vt(null);return}if(le){ot(null);return}if(S){if(!S.hasMoved&&S.annotation.type==="text"&&((q=S.annotation.status)!=null?q:"pending")==="pending"){let x=Ro(m);L({id:S.annotation.id,point:S.annotation.points[0],text:S.annotation.text||"",fontSize:S.annotation.fontSize||12,isNew:!1,clickPoint:x,groupId:S.annotation.groupId})}j(null);return}if(!R)return;let h=5;if(e.currentPath.length>=2){let x=e.currentPath[0],k=e.currentPath[e.currentPath.length-1],G=Math.abs(k.x-x.x),P=Math.abs(k.y-x.y);if((e.activeTool==="line"?Math.sqrt(G*G+P*P)<h:G<h&&P<h)&&["rectangle","circle","line"].includes(e.activeTool)){$(!1),t({type:"CANCEL_PATH"});return}}let J=Ti(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let x=e.currentPath[0],k=e.currentPath[e.currentPath.length-1],G=Math.min(x.x,k.x),P=Math.max(x.y,k.y),H=e.strokeWidth/2,Y=Math.random().toString(36).substring(2,9);ye({point:{x:G-H+4,y:P+H+4},groupId:Y}),$(!1),t({type:"FINISH_PATH",payload:{groupId:Y,elements:J}});return}$(!1),t({type:"FINISH_PATH",payload:{elements:J}})},[R,S,le,it,xt,lt,ut,Ro,t,e.activeTool,e.currentPath,e.strokeWidth]),pc=jt(m=>{let h=m.target.value;Io.current=m.target.selectionStart,L(J=>J&&b(f({},J),{text:h}))},[]),fc=jt(m=>{m.key==="Escape"?L(null):m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),Lo())},[Lo]),gc=jt(m=>{if(!C)return;let h=m.clipboardData.items,J=[];for(let T=0;T<h.length;T++){let M=h[T];if(M.type.startsWith("image/")){let W=M.getAsFile();W&&J.push(W)}}J.length>0&&(m.preventDefault(),L(T=>T?b(f({},T),{images:[...T.images||[],...J]}):null))},[C]),mc=jt(m=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){m.preventDefault();let J=ke||Et||sn||Dt;if(J&&!Re(J)){let T=yn(J),M=wn(J);t({type:"SELECT_ELEMENT",payload:{el:J,info:b(f({},T),{selector:M})}})}return}m.preventDefault();let h=y.current;h&&(N.current=!0,h.style.pointerEvents="none",setTimeout(()=>{N.current&&(N.current=!1,h.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,ke,Et,sn,Dt,t,Re,y]);an(()=>{let m=Tt.filter(ie=>ie.linkedSelector);if(m.length===0)return;let h=null,J=document.createElement("canvas").getContext("2d"),T=()=>{var F,q,x;let ie=[];for(let k of m){let G=document.querySelector(k.linkedSelector);if(!G&&((q=(F=k.elements)==null?void 0:F[0])!=null&&q.selector)&&k.linkedSelector.startsWith("[data-pm=")){try{G=document.querySelector(k.elements[0].selector)}catch(qe){}if(G){let qe=(x=k.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:x[1];qe&&G.setAttribute("data-pm",qe)}}if(!G)continue;let P=G.getBoundingClientRect(),H=e.styleModifications.some(qe=>{try{return G.matches(qe.selector)}catch(ue){return!1}}),Y=m.filter(qe=>qe.id!==k.id&&qe.timestamp<k.timestamp&&qe.linkedSelector===k.linkedSelector).length,V=(H?1:0)+Y,fe;if(k.text&&J){let qe=k.fontSize||12;J.font=`${qe}px ${Jt}`,fe=Math.max(...k.text.split(`
|
|
5
|
-
`).map(ue=>
|
|
6
|
-
`),
|
|
7
|
-
`).length)*C.fontSize*1.4+8:0,Bs=nr.height+8,xc=nr.isWrapped?Bs-bc:0,vc=C?{position:"fixed",left:C.point.x-4-Pe.x,top:C.point.y-4-Pe.y-xc,zIndex:9999,width:nr.width+8,height:Bs,padding:4,fontSize:C.fontSize,fontFamily:Jt,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:nr.isWrapped?"pre-wrap":"pre",wordBreak:nr.isWrapped?"break-word":void 0}:{};return Ko(qo,{children:[rt("canvas",{ref:Z,id:"devtools-canvas",style:yc,onMouseDown:As,onMouseMove:Ps,onMouseUp:m=>di(m),onMouseLeave:m=>{di(m),Se(null),De(null)},onTouchStart:As,onTouchMove:Ps,onTouchEnd:m=>di(m),onContextMenu:mc}),C&&Ko(qo,{children:[rt("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),rt("textarea",{id:"devtools-text-input",ref:Me,value:C.text,onChange:pc,onKeyDown:fc,onPaste:gc,onBlur:Lo,placeholder:"Type here...",style:vc}),C.images&&C.images.length>0&&Ko("div",{"data-devtools":!0,style:{position:"fixed",left:C.point.x-4-Pe.x,top:C.point.y-4-Pe.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:[C.images.length," image",C.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&&rt(Zl,{styleModifications:e.styleModifications,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(Tt.map(m=>m.groupId||m.id)).size,dispatch:t,inFlightSelectors:o,toolbarRef:B,onHoverSelector:be}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&&rt(ea,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&&rt($l,{annotations:Tt,supersededAnnotations:Rn,inFlightIds:r,scrollX:Pe.x,scrollY:Pe.y,annotationGroupMap:Sn,onViewThread:a,onSelectAnnotation:de,onHoverAnnotation:re,canvasRef:y}),e.isAnnotating&&l&&rt(Wl,{annotations:Tt,supersededAnnotations:Rn,scrollX:Pe.x,scrollY:Pe.y,onReply:l,annotationGroupMap:Sn,canvasRef:y,onHoverAnnotation:re}),e.isAnnotating&&i&&i.size>0&&rt(Hi,{inFlightSelectorColors:i}),e.isAnnotating&&ci&&rt(Hi,{inFlightSelectorColors:ci,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(lt?bt.current.element:Et)&&rt(Yi,{element:lt?bt.current.element:Et,gap:lt?{row:lt.row,column:lt.column}:ar(Et),accentColor:e.activeColor,hoveredAxis:zt,draggingAxis:(Ns=lt==null?void 0:lt.axis)!=null?Ns:null,cursorViewport:St,isAutoGap:Fe,refreshKey:In}),e.activeTool==="hand"&&e.isAnnotating&&fn&&rt(ba,{element:fn.target,modifier:fn.modifier,accentColor:e.activeColor,refreshKey:In}),e.activeTool==="hand"&&e.isAnnotating&&!fn&&(xt?gt.current.element:sn)&&rt(Ul,{element:xt?gt.current.element:sn,radius:(Ds=xt==null?void 0:xt.radius)!=null?Ds:wo(sn),accentColor:e.activeColor,hoveredCorner:Nt,draggingCorner:(Hs=xt==null?void 0:xt.corner)!=null?Hs:null,cursorViewport:St}),e.activeTool==="hand"&&e.isAnnotating&&!fn&&(ut?Pn.current.element:Dt)&&rt(xa,{element:ut?Pn.current.element:Dt,fontSize:(Fs=ut==null?void 0:ut.fontSize)!=null?Fs:cr(Dt).fontSize,lineHeight:(_s=ut==null?void 0:ut.lineHeight)!=null?_s:cr(Dt).lineHeight,accentColor:e.activeColor,hoveredProperty:gn,draggingProperty:(zs=ut==null?void 0:ut.property)!=null?zs:null,cursorViewport:St}),e.activeTool==="hand"&&e.isAnnotating&&!fn&&(it?pe.current.element:ke)&&rt(Xi,{element:it?pe.current.element:ke,padding:($s=it==null?void 0:it.padding)!=null?$s:Wo(ke),accentColor:e.activeColor,hoveredSide:We,draggingSide:(Ws=it==null?void 0:it.side)!=null?Ws:null,cursorViewport:St,refreshKey:ut?ut.fontSize+ut.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&rt(qo,{children:ce&&!e.inspectedElement&&(()=>{let m=(C==null?void 0:C.linkedSelector)||(ae==null?void 0:ae.linkedSelector);if(m)try{if(ce.matches(m))return null}catch(J){}let h=!!ae||!!(C!=null&&C.linkedSelector)||Tt.some(J=>{if(!J.linkedSelector)return!1;try{return ce.matches(J.linkedSelector)}catch(T){return!1}});return rt($n,{element:ce,isSelected:!1,elementInfo:Be,color:e.activeColor,hideTooltip:h})})()}),((C==null?void 0:C.linkedSelector)||(ae==null?void 0:ae.linkedSelector))&&(()=>{let m=(C==null?void 0:C.linkedSelector)||(ae==null?void 0:ae.linkedSelector);if(!m)return null;let h=null;try{h=document.querySelector(m)}catch(J){}return h?rt($n,{element:h,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),A&&(()=>{let m=e.annotations.find(T=>T.id===A);if(!(m!=null&&m.linkedSelector))return null;let h=null;try{h=document.querySelector(m.linkedSelector)}catch(T){}if(!h)return null;let J=!!(r&&r.has(m.id));return rt($n,{element:h,isSelected:!J,color:m.color,hideTooltip:!0})})(),z&&(()=>{let m=e.annotations.find(M=>M.id===z);if(!(m!=null&&m.linkedSelector))return null;let h=null;try{h=document.querySelector(m.linkedSelector)}catch(M){}if(!h)return null;let J=m.groupId?e.annotations.filter(M=>M.groupId===m.groupId):[m],T=!!(r&&J.some(M=>r.has(M.id)));return rt($n,{element:h,isSelected:!T,color:m.color,hideTooltip:!0})})(),se&&(()=>{let m=null;try{m=document.querySelector(se)}catch(J){}if(!m)return null;let h=!!(o&&o.has(se));return rt($n,{element:m,isSelected:!h,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&st.size>0&&[...st.entries()].map(([m,h])=>rt($n,{element:h.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:h.rootElement.tagName.toLowerCase(),reactComponent:m},color:"#8b5cf6"},m)),e.activeTool==="model"&&e.isAnnotating&&mt&&rt($n,{element:mt.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:mt.rootElement.tagName.toLowerCase(),reactComponent:mt.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&eo.length>0&&eo.map((m,h)=>rt("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"?Ko(qo,{children:[rt("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),rt("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),rt("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),rt("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)})]}):Ko(qo,{children:[rt("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),rt("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),rt("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),rt("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)})]})},h)),e.activeTool==="model"&&e.isAnnotating&&$e&&rt($n,{element:$e.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:$e.rootElement.tagName.toLowerCase(),reactComponent:$e.name},color:g!=null&&g.has($e.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&Ko(qo,{children:[At&&At!=="padding"&&At!=="gap"&&(()=>{var F;let m=new Set(Tt.map(q=>q.groupId||q.id)).size,h=e.inspectedElement.info.selector,J=e.styleModifications.findIndex(q=>q.selector===h),T=J>=0?m+J+1:m+e.styleModifications.length+1,M=e.styleModifications.find(q=>q.selector===h),W=(F=M==null?void 0:M.changes.length)!=null?F:0,ie=!!(M!=null&&M.captured);return rt($n,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:ie?"#999999":e.activeColor,annotationNumber:T,changeCount:W})})(),At==="padding"&&rt(Xi,{element:e.inspectedElement.el,padding:Wo(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),At==="gap"&&rt(Yi,{element:e.inspectedElement.el,gap:ar(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),rt(ha,{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:Gt,accentColor:e.activeColor,toolbarRef:B})]})]})}import{useCallback as Tn,useEffect as bn,useMemo as yr,useRef as Rt,useState as br}from"react";import{Circle as ef,Component as tf,Hand as nf,MessageCircle as of,Pen as rf,Slash as sf,Square as lf,Trash2 as af,Type as cf}from"lucide-react";import{useEffect as Ca,useRef as Ea}from"react";function ka(e,t,n,r,o){let i=Ea(0),s=Ea(t.annotations);Ca(()=>{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]),Ca(()=>{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 Cp,createElement as Ep,useCallback as ti,useEffect as lo,useRef as To,useState as kn}from"react";import{Link2 as kp}from"lucide-react";var sp={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},lp=/^#[0-9a-fA-F]{3,8}$/,ap=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,cp=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 Ma(e){let t=e.trim().toLowerCase();return lp.test(t)||ap.test(t)||cp.has(t)}var dp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function ds(e){return dp.test(e.trim())}var Ta=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function up(e){let t=e.trim().toLowerCase();return!!(Ta.has(t)||t.includes(",")&&t.split(",").some(n=>Ta.has(n.trim().replace(/['"]/g,""))))}function pp(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(Ma(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var fp=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,gp=/^--(font-family|font|ff|family)/i,mp=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,hp=/^--(space|gap|padding|margin|inset)/i,yp=/^--(radius|rounded|br|border-radius)/i,bp=/^--(shadow|elevation|drop-shadow)/i;function Ia(e,t){let n=e.toLowerCase();return bp.test(n)?"shadows":yp.test(n)?"radii":gp.test(n)?"fonts":mp.test(n)&&ds(t)?"typeScale":fp.test(n)||Ma(t)?"colors":up(t)?"fonts":pp(t)?"shadows":hp.test(n)&&ds(t)||ds(t)?"spacing":"other"}function Ra(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){Ra(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&xp(o.style,t,n,r)}}}var La=/var\((--[^,)]+)/;function xp(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=Ia(i,s);r[l].push([i,s]);let d=e.getPropertyValue(i).trim().match(La);d&&(r.references[i]=d[1])}}function qr(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function Qr(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 Aa(e){return e==="colors"?(t,n)=>{let r=Qr(t[1]),o=Qr(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let r=qr(t[1]),o=qr(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let r=qr(t[1]),o=qr(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:(t,n)=>t[0].localeCompare(n[0])}function vp(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 Pa(e){let t=new Map;for(let o of e){let i=vp(o[0]),s=t.get(i);s||(s=[],t.set(i,s)),s.push(o)}let n=Aa("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=Qr(o[1][0][1]))!=null?a:0,l=(d=Qr(i[1][0][1]))!=null?d:0;return s-l}),r}var Sp=["colors","fonts","typeScale","spacing","radii","shadows","other"],Zr=null,wp=5e3;function Ba(){if(typeof document=="undefined")return sp;if(Zr&&Date.now()-Zr.timestamp<wp)return Zr.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{Ra(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=Ia(i,s);e[l].push([i,s]);let d=r.getPropertyValue(i).trim().match(La);d&&(e.references[i]=d[1])}for(let o of Sp)e[o].sort(Aa(o));return Zr={tokens:e,timestamp:Date.now()},e}import{Fragment as Zo,jsx as _e,jsxs as nn}from"react/jsx-runtime";var Oa="popmelt-library-tab",Tp=/^#[0-9a-fA-F]{3,8}$/,Mp=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,Ip=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),Rp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Da(e){let t=e.trim();return Tp.test(t)||Mp.test(t)||Ip.has(t.toLowerCase())}function Lp(e){return Rp.test(e.trim())}function Ap(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function Ha(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(...Ha(o,i))}else n.push([i,Array.isArray(o)?o.map(String).join(", "):String(o!=null?o:"")])}return n}function Pp(e){return e.length===0?"generic":e.filter(([,r])=>Da(r)).length>e.length/2?"colors":e.filter(([,r])=>Lp(r)).length>e.length/2?"spacing":"generic"}var Bp=b(f({position:"fixed",top:16,right:16,bottom:80,width:300,backgroundColor:"#eaeaea"},io),{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"}),Fa={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},Op=b(f({},Fa),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function Np({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(kp,{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 _a({entries:e,references:t}){let n=[],r=[];for(let i of e)Da(i[1])?n.push(i):r.push(i);let o=Pa(n);return nn(Zo,{children:[o.map(([i,s])=>nn("div",{style:{marginBottom:4},children:[nn("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(Np,{varName:l,value:a,reference:t[l]},l))})]},i)),r.length>0&&_e(ni,{entries:r})]})}var ei=[0,1,2,4,8,12,16,20,24,28,32];function Dp(e){if(e<=32){let t=ei[0],n=Math.abs(e-t);for(let r=1;r<ei.length;r++){let o=Math.abs(e-ei[r]);o<n&&(t=ei[r],n=o)}return t}return Math.round(e/8)*8}function Hp({label:e,value:t,px:n,tokenPath:r,rawToken:o,onHover:i,onModify:s,onDelete:l}){let[a,d]=kn(!1),[c,p]=kn(null),u=To(!1),g=To(0),E=To(0),w=To([]),I=c!==null?c:n,A=c!==null?`${c}px`:t,U=c!==null,B=ti(v=>{v.preventDefault(),u.current=!0,g.current=v.clientX,E.current=n;let O=Or(o);w.current=Ii(O);let Z=R=>{let $=R.clientX-g.current,C=Math.max(0,Math.round(E.current+$));R.shiftKey&&(C=Dp(C));for(let L of w.current)L.element.style.setProperty(L.property,C+"px","important");p(C),i==null||i({name:e,px:C,token:O})},N=()=>{window.removeEventListener("mousemove",Z),window.removeEventListener("mouseup",N),document.body.style.cursor="",u.current=!1,p(R=>{if(R!==null&&R!==n&&s){let $=Or(o),C=$.bindings&&$.bindings.length>0,L;if(C){let ye=Li($.bindings,E.current,R);L=JSON.stringify(b(f({},$),{value:`${R}px`,bindings:ye}))}else{let ye=Pl(w.current,E.current),ae=Bl(w.current);if(ye.length>0){let ze=Li(ye,E.current,R);L=JSON.stringify({value:`${R}px`,property:ae,bindings:ze})}else L=`${R}px`}let X=typeof o=="string"?o:JSON.stringify(o),ge=w.current.map(ye=>({selector:wn(ye.element),property:ye.property})),ve=Nl(w.current,E.current,R);s({tokenPath:r,originalValue:X,currentValue:L,targets:ge,originalPx:E.current,currentPx:R},{id:Math.random().toString(36).substring(2,9),tokenPath:r,tokenName:e,originalPx:E.current,newPx:R,affectedElements:ve})}return R})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",Z),window.addEventListener("mouseup",N)},[n,e,r,o,i,s]),y=Or(o);return nn("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:I,token:y}))},onMouseLeave:()=>{u.current||(d(!1),i==null||i(null))},onMouseDown:B,children:[_e("span",{style:{color:a||U?"#FF0000":"#9ca3af"},children:e}),nn("span",{style:{display:"flex",alignItems:"center",gap:4},children:[_e("span",{style:{color:a||U?"#FF0000":"#6b7280",fontWeight:600},children:A}),l&&a&&!U&&_e("button",{type:"button",title:"Remove token",onMouseDown:v=>{v.stopPropagation();let O=typeof o=="string"?o:JSON.stringify(o);l(r,O)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:v=>{v.currentTarget.style.color="#FF0000"},onMouseLeave:v=>{v.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function Fp({entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}){let s=[],l=[];for(let a of e){let d=Ap(a[1]);d!==null?s.push([a[0],a[1],d]):l.push(a)}return nn(Zo,{children:[s.length>0&&_e("div",{style:{display:"flex",flexDirection:"column",gap:2},children:s.map(([a,d,c])=>{let p=a.split(".").pop(),u=n?_p(n,a):d,g=u&&typeof u=="object"&&"value"in u?u:d;return _e(Hp,{label:p,value:d,px:c,tokenPath:`tokens.${t}.${a}`,rawToken:g,onHover:r,onModify:o,onDelete:i},a)})}),l.length>0&&_e(ni,{entries:l})]})}function _p(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 ni({entries:e}){return _e("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>nn("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 zp({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:r,onModifyToken:o,onDeleteToken:i}){let s=Pp(e);return s==="colors"?_e(_a,{entries:e}):s==="spacing"?_e(Fp,{entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}):_e(ni,{entries:e})}function $p(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 p=f({},l.memoizedProps);return delete p.ref,{type:a,props:p}}if(!n){if(c.length>=4&&t.includes(c)){let p=f({},l.memoizedProps);delete p.ref,n={type:a,props:p}}else if(t.length>=4&&c.includes(t)){let p=f({},l.memoizedProps);delete p.ref,n={type:a,props:p}}}}l=l.return}}return n}var us=class extends Cp{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}},za="popmelt-principles-collapsed";function Wp(){try{let e=localStorage.getItem(za);if(e)return new Set(JSON.parse(e))}catch(e){}return new Set}function Yp(e){try{localStorage.setItem(za,JSON.stringify([...e]))}catch(t){}}function jp({id:e,label:t,count:n,children:r,collapsed:o,onToggle:i}){return nn("div",{style:{marginBottom:14},children:[nn("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 Gp={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},Na=["colors","fonts","typeScale","spacing","radii","shadows","other"];function Vp(){let[e,t]=kn(null),[n,r]=kn(Wp);lo(()=>{t(Ba())},[]);let o=ti(s=>{r(l=>{let a=new Set(l);return a.has(s)?a.delete(s):a.add(s),Yp(a),a})},[]);return e?Na.some(s=>e[s].length>0)?_e(Zo,{children:Na.map(s=>{let l=e[s];return l.length===0?null:_e(jp,{id:s,label:Gp[s],count:l.length,collapsed:n.has(s),onToggle:o,children:s==="colors"?_e(_a,{entries:l,references:e.references}):_e(ni,{entries:l})},s)})}):_e("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function Up({rules:e}){return!e||e.length===0?_e("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."}):_e(Zo,{children:e.map((t,n)=>nn("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[nn("span",{style:{color:"#9ca3af",flexShrink:0},children:[n+1,"."]}),_e("span",{children:t})]},n))})}function Jp({name:e,value:t,selected:n,highlighted:r,onRemove:o,onHover:i}){var R;let[s,l]=kn(!1),[a,d]=kn(!1),c=To(null),p=To(0),[u,g]=kn(0),[E,w]=kn(0),I=Ha(t),A=(R=I.find(([$])=>$==="description"))==null?void 0:R[1];lo(()=>{if(!a&&!r){g(0),w(0),p.current=0;return}let $=zo(e);g($.length)},[a,r,e]),lo(()=>{n&&c.current&&c.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let U=n||r||a,B=n?"139,92,246":"34,197,94",y=n?"#8b5cf6":"#22c55e",v=U?`rgba(${B},0.06)`:void 0,O=U?`inset 0 0 0 1.5px rgba(${B},0.35)`:void 0,Z=r||a,N=ti(()=>{let $=zo(e);if($.length===0)return;let C=p.current%$.length;$[C].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),w(C),p.current=C+1,i==null||i({name:e,instanceIndex:C})},[e,i]);return nn("div",{ref:c,onClick:N,onMouseEnter:()=>{d(!0),i==null||i({name:e,instanceIndex:0})},onMouseLeave:()=>{d(!1),i==null||i(null)},style:{marginBottom:8,background:v,padding:6,boxShadow:O,cursor:"pointer"},children:[nn("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[nn("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:Z?y:"transparent",color:Z?"#fff":"#6b7280"},children:e}),Z&&u>1&&nn("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[E+1,"/",u]})]}),o&&a&&_e("button",{type:"button",title:"Remove from model",onClick:$=>{$.stopPropagation(),o(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:$=>{$.currentTarget.style.color="#FF0000"},onMouseLeave:$=>{$.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),A&&_e("div",{style:{fontSize:11,color:Z?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:A}),s?_e(zp,{entries:I.filter(([$])=>$!=="description"),categoryKey:""}):_e(Xp,{name:e,onNotFound:()=>l(!0),entries:I})]})}function Xp({name:e,onNotFound:t}){let[n,r]=kn(null),[o,i]=kn(!1);return lo(()=>{let s=$p(e);s||t(),r(s),i(!0)},[e,t]),!o||!n?null:_e(us,{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:Ep(n.type,n.props)})})})}function Kp({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=ki(i),l=Object.entries(e).sort(([a],[d])=>{var c,p;return((c=s.get(a))!=null?c:1/0)-((p=s.get(d))!=null?p:1/0)});return _e(Zo,{children:l.map(([a,d])=>_e(Jp,{name:a,value:d,selected:t===a,highlighted:n===a,onRemove:r,onHover:o},a))})}function $a({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:r,selectedComponent:o,hoveredComponent:i,onComponentHover:s,onSpacingTokenHover:l,onModifySpacingToken:a,onDeleteSpacingToken:d,onComponentAdded:c,onComponentRemoved:p}){let[u,g]=kn(void 0),[E,w]=kn(!0),[I,A]=kn(()=>{try{let N=localStorage.getItem(Oa);if(N==="patterns"||N==="principles"||N==="rules")return N}catch(N){}return"patterns"});lo(()=>{Po(e).then(N=>{g(N),w(!1)})},[e,t]),lo(()=>{try{localStorage.setItem(Oa,I)}catch(N){}},[I]),lo(()=>{o&&(A("patterns"),Po(e).then(N=>{N&&g(N)}))},[o,e]);let U=ti(N=>{g(R=>{if(!(R!=null&&R.components))return R;let L=R.components,{[N]:$}=L,C=no(L,[kr(N)]);return b(f({},R),{components:C})}),p==null||p(N)},[p]),B=u==null?void 0:u.components,y=u==null?void 0:u.rules,v=B&&Object.keys(B).length>0,O=y&&y.length>0,Z=To(null);return lo(()=>{let N=Z.current;if(!N)return;let R=n,$=r;return R&&N.addEventListener("mouseenter",R),$&&N.addEventListener("mouseleave",$),()=>{R&&N.removeEventListener("mouseenter",R),$&&N.removeEventListener("mouseleave",$)}},[n,r]),nn("div",{ref:Z,style:Bp,children:[nn("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(N=>_e("button",{type:"button",style:I===N?Op:Fa,onClick:()=>A(N),children:N.charAt(0).toUpperCase()+N.slice(1)},N))}),_e("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:I==="principles"?_e(Vp,{}):E?_e("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!u||!v&&!O?_e("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):nn(Zo,{children:[I==="patterns"&&_e(Kp,{components:B,selectedComponent:o,hoveredComponent:i,onRemove:U,onHover:s}),I==="rules"&&_e(Up,{rules:y})]})})]})}import{jsx as Qo}from"react/jsx-runtime";var qp="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",Zp="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 ps({size:e=16,style:t}){return Qo("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:Qo("path",{d:qp})})}function fs({size:e=16,style:t}){return Qo("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:Qo("path",{d:Zp})})}function gs({provider:e,size:t=16,style:n}){return e==="codex"?Qo(fs,{size:t,style:n}):Qo(ps,{size:t,style:n})}var mr=[{id:"claude-opus-4-6",label:"Opus 4.6"},{id:"claude-sonnet-4-6",label:"Sonn 4.6"}],hr=[{id:"gpt-5.3-codex",label:"Codex 5.3"},{id:"gpt-5.3-codex-spark",label:"Spark 5.3"},{id:"gpt-5.1-codex-mini",label:"Mini 5.1"}];var Qp=[...mr,...hr];function ms(e,t){if(!e)return t==="codex"?"Codex":"Claude Code";let n=Qp.find(r=>r.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as Ya}from"react/jsx-runtime";var Kn={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function ao({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?Kn.bgActive:"transparent",color:t?Kn.iconActive:Kn.iconDefault,opacity:s()};return Ya("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=Kn.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 Wa(){return Ya("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as xr,jsx as Ce,jsxs as Mt}from"react/jsx-runtime";var Mo=[{type:"rectangle",icon:lf,label:"Rectangle",shortcut:"R"},{type:"circle",icon:ef,label:"Oval",shortcut:"O"},{type:"line",icon:sf,label:"Line",shortcut:"L"},{type:"freehand",icon:rf,label:"Pen",shortcut:"P"}],df=new Set(Mo.map(e=>e.type));function uf(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),p=a<0||d<0||c<0,u=a>0||d>0||c>0;return!(p&&u)}function pf(){let e=window.innerWidth-16,t=e-326,n=window.innerHeight-80;return{left:t,right:e,y:n}}var ff=[{type:"text",icon:cf,label:"Text",shortcut:"T"}],ja={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 Ec=Object.defineProperty,kc=Object.defineProperties;var Tc=Object.getOwnPropertyDescriptors;var Rr=Object.getOwnPropertySymbols;var Vs=Object.prototype.hasOwnProperty,Us=Object.prototype.propertyIsEnumerable;var Gs=(e,t,n)=>t in e?Ec(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))Vs.call(t,n)&&Gs(e,n,t[n]);if(Rr)for(var n of Rr(t))Us.call(t,n)&&Gs(e,n,t[n]);return e},h=(e,t)=>kc(e,Tc(t));var go=e=>typeof e=="symbol"?e:e+"",zn=(e,t)=>{var n={};for(var r in e)Vs.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&Rr)for(var r of Rr(e))t.indexOf(r)<0&&Us.call(e,r)&&(n[r]=e[r]);return n};import{createContext as yg,useCallback as rn,useContext as bg,useEffect as Yt,useMemo as sr,useRef as Jt,useState as fn}from"react";import{useCallback as rl,useEffect as Mc,useSyncExternalStore as Ic}from"react";var Gn="http://localhost:1111";function Jn(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 Ks(e=Gn){try{let t=await Jn(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch(t){return null}}async function Ho(e=Gn){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 Xs(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 qs(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 Xs(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 Xs(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 Lr(e=Gn,t,n=-1){try{let r=await Jn(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return r.ok?await r.json():null}catch(r){return null}}async function Zs(e,t,n=Gn,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 Jn(`${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 Qs(e=Gn,t){try{let n=await Jn(`${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 el(e,t=Gn){let n=await Jn(`${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 tl(e,t=Gn){let n=await Jn(`${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=Gn){let r=await Jn(`${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 nl(e,t=Gn){let n=await Jn(`${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=Gn){var t;try{let n=await Jn(`${e}/model`,{},5e3);return n.ok&&(t=(await n.json()).model)!=null?t:null}catch(n){return null}}async function ol(e,t,n=Gn,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 Jn(`${n}/reply`,{method:"POST",body:d},3e4)}else a=await Jn(`${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 Br={};var Mo=typeof Br!="undefined"?Br.hot:void 0,sl,ll,al,Nr=(al=(ll=(sl=Mo==null?void 0:Mo.data)==null?void 0:sl.sourceId)!=null?ll:typeof localStorage!="undefined"&&localStorage.getItem("popmelt-source-id"))!=null?al:typeof crypto!="undefined"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2);Mo!=null&&Mo.data&&(Mo.data.sourceId=Nr);try{typeof localStorage!="undefined"&&localStorage.setItem("popmelt-source-id",Nr)}catch(e){}function wi(){return Nr}var Io=typeof Br!="undefined"?Br.hot:void 0,cn=Io==null?void 0:Io.data,Rc={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},cl,$o=(cl=cn==null?void 0:cn.store)!=null?cl:f({},Rc),dl,Ar=(dl=cn==null?void 0:cn.listeners)!=null?dl:new Set,ul,ko=(ul=cn==null?void 0:cn.activeEs)!=null?ul:null,pl,Si=(pl=cn==null?void 0:cn.activeBridgeUrl)!=null?pl:null,Co=null,fl,Pr=(fl=cn==null?void 0:cn.connectionGeneration)!=null?fl:0;Io!=null&&Io.data&&Object.defineProperties(Io.data,{store:{get:()=>$o,configurable:!0},listeners:{get:()=>Ar,configurable:!0},activeEs:{get:()=>ko,configurable:!0},activeBridgeUrl:{get:()=>Si,configurable:!0},connectionGeneration:{get:()=>Pr,configurable:!0},discoveredBridgeUrl:{get:()=>To,configurable:!0}});var Or=new Set,zo=new Map,mo={};function Eo(e,t){var r;if(!e)return!1;if(Or.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=mo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function Lc(e,t,n){let r=()=>n!==Pr;for(let o of t){if(r())return;Or.add(o),zo.set(o,[])}await Promise.all(t.map(async o=>{var i;try{let s=await Lr(e,o);if(r())return;let l=(i=zo.get(o))!=null?i:[];if(s){if(Kt(a=>{let d=h(f({},a.jobResponses),{[o]:s.accumulated.response}),c=h(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 h(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})}),mo[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{Or.delete(o),zo.delete(o)}}))}function vi(e,t,n){var r;if(e==="delta"){let o=t.text||"";Kt(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||"";Kt(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 mo[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 h(f(h(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 mo[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 h(f({},i),{status:l,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 Kt(o=>h(f({},o),{events:[...o.events,{type:e,data:t,timestamp:Date.now()}]}))}var gl,To=(gl=cn==null?void 0:cn.discoveredBridgeUrl)!=null?gl:null,_o=null;async function Ac(e){return e&&e!=="http://localhost:1111"?(To=e,e):To||_o||(_o=qs(e).then(n=>{var r;return To=(r=n==null?void 0:n.url)!=null?r:null,_o=null,To}).catch(()=>(_o=null,null)),_o)}function ml(){return To}function il(){return $o}function Pc(e){return Ar.add(e),()=>{Ar.delete(e)}}function Kt(e){$o=e($o);for(let t of Ar)t()}function hl(e){if(ko&&ko.readyState!==EventSource.CLOSED&&Si===e)return;ko&&(ko.close(),ko=null),Co&&(clearTimeout(Co),Co=null),Si=e;let t=++Pr,n=new EventSource(`${e}/events?sourceId=${Nr}`);ko=n;let r=()=>t!==Pr;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(S=>S.id)),l=(g=o==null?void 0:o.recentJobs)!=null?g:[],a=new Map(l.map(S=>[S.id,S])),d=i.length>0;Kt(S=>{let w=f({},S.lastErrorByJob),L=S.activeJobIds.filter(k=>!s.has(k));for(let k of L){let T=a.get(k);(T==null?void 0:T.status)==="error"&&T.error&&(w[k]=T.error)}let P=S.activeJobIds.filter(k=>s.has(k));for(let k of s)P.includes(k)||P.push(k);let G={};for(let k of i)k.threadId&&(G[k.id]=k.threadId);return h(f({},S),{isConnected:!0,status:d?"streaming":L.length>0||S.status==="disconnected"?"idle":S.status,activeJobId:d?i[i.length-1].id:P.length>0?P[P.length-1]:null,activeJobIds:P,activeJobThreads:G,lastErrorByJob:w,lastCompletedJobId:L.length>0?L[L.length-1]:S.lastCompletedJobId})});let c=$o.activeJobIds.filter(S=>!s.has(S)),u=[...Array.from(s),...c];u.length>0&&Lc(e,u,t).catch(()=>{})})}),n.addEventListener("job_started",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;if(Eo(s,i))return;let l=i.threadId;Kt(a=>{var d,c,u,p;return h(f({},a),{status:"streaming",activeJobId:s,activeJobIds:a.activeJobIds.includes(s)?a.activeJobIds:[...a.activeJobIds,s],activeJobThreads:l?h(f({},a.activeJobThreads),{[s]:l}):a.activeJobThreads,jobResponses:h(f({},a.jobResponses),{[s]:(d=a.jobResponses[s])!=null?d:""}),jobThinking:h(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(Eo(s,i))return;let l=i.text||"";Kt(a=>h(f({},a),{jobResponses:s?h(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(Eo(s,i))return;let l=i.text||"";Kt(a=>h(f({},a),{jobThinking:s?h(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;Eo(s,i)||Kt(l=>h(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;Eo(s,i)||(s&&delete mo[s],Kt(l=>{var S;let a=s?l.activeJobIds.filter(w=>w!==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 h(f(h(f({},l),{activeJobIds:a,activeJobId:g,jobResponses:d,jobThinking:c,lastCompletedJobId:s!=null?s:l.activeJobId,lastResponseText:p||l.currentResponse||i.responseText||null,lastThreadId:(S=i.threadId)!=null?S: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;Eo(s,i)||Kt(l=>h(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=>h(f({},o),{capabilitiesVersion:o.capabilitiesVersion+1}))}),n.addEventListener("queue_drained",()=>{if(!r()){for(let o of Object.keys(mo))delete mo[o];Or.clear(),zo.clear(),Kt(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)Kt(l=>h(f({},l),{isConnected:!1,status:"disconnected"})),Co&&(clearTimeout(Co),Co=null),Co=setTimeout(()=>{Ho(e).then(l=>{l&&hl(e)})},5e3);else if(o instanceof MessageEvent){let l=JSON.parse(o.data),a=(i=l.jobId)!=null?i:null;if(Eo(a!=null?a:void 0,l))return;a&&delete mo[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 h(f({},c),{status:p,activeJobIds:u,lastCompletedJobId:a!=null?a:c.activeJobId,lastErrorByJob:a&&d?h(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=>h(f({},o),{isConnected:!1,status:"disconnected"}))}}function yl(e="http://localhost:1111",t=!0){let n=Ic(Pc,il,il);Mc(()=>{t&&Ac(e).then(i=>{i&&Ho(i).then(s=>{s&&hl(i)})})},[e,t]);let r=rl(()=>{Kt(()=>h(f({},$o),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),o=rl(i=>{Kt(s=>h(f({},s),{pendingQuestions:s.pendingQuestions.filter(l=>l.threadId!==i)}))},[]);return h(f({},n),{clearEvents:r,dismissQuestion:o})}import{useEffect as Oc,useReducer as Bc}from"react";var Nc={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 Dr(){return Math.random().toString(36).substring(2,9)}function bl(e){return e.status?e:e.captured?h(f({},e),{status:"in_flight"}):h(f({},e),{status:"pending"})}function kn(e){return h(f({},e),{undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]})}function Dc(e,t){return h(f({},e),{isAnnotating:t})}function Hc(e,t){return h(f({},e),{activeTool:t,inspectedElement:null})}function Fc(e,t){return h(f({},e),{activeColor:t})}function _c(e,t){return h(f({},e),{strokeWidth:t})}function zc(e,t){return h(f({},e),{currentPath:[t]})}function $c(e,t){return h(f({},e),{currentPath:[...e.currentPath,t]})}function Wc(e){return h(f({},e),{currentPath:[]})}function Yc(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return h(f({},e),{currentPath:[]});let n={id:Dr(),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=kn(e);return h(f({},r),{annotations:[...e.annotations,n],currentPath:[]})}function jc(e,t){var o;let n=f({id:(o=t.id)!=null?o:Dr(),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:kn(e);return h(f({},r),{annotations:[...e.annotations,n]})}function Jc(e,t){let n=kn(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 Gc(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 Vc(e,t){let n=kn(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 Uc(e,t){let n=t.saveUndo?kn(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 l=t.delta.x,a=t.delta.y;return h(f({},i),{points:i.points.map(d=>({x:d.x+l,y:d.y+a}))})})})}function Xc(e,t){let n=t.saveUndo?kn(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 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(l=>({x:l.x+o,y:l.y+i}))}):s)})}function Kc(e,t){let n=kn(e);return h(f({},n),{annotations:[...e.annotations,...t.annotations.map(bl)]})}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(bl(o)));return h(f({},e),{annotations:r})}function Zc(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 Qc(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 ed(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 td(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 nd(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 od(e){return h(f({},e),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function rd(e,t){return h(f({},e),{inspectedElement:t})}function id(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=kn(e),S=g.styleModifications.map((w,L)=>L===l?h(f({},w),{changes:[{property:o,original:i,modified:s}],captured:!1}):w);return h(f({},g),{styleModifications:S})}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((S,w)=>w!==d):c=a.changes.map((S,w)=>w===d?h(f({},S),{modified:s}):S)}else{if(i===s)return e;u=kn(e),c=[...a.changes,{property:o,original:i,modified:s}]}if(c.length===0)return h(f({},u),{styleModifications:u.styleModifications.filter((g,S)=>S!==l)});let p=u.styleModifications.map((g,S)=>S===l?h(f({},g),{changes:c}):g);return h(f({},u),{styleModifications:p})}else{let a=kn(e),d={selector:n,element:r,changes:[{property:o,original:i,modified:s}]};return h(f({},a),{styleModifications:[...a.styleModifications,d]})}}function sd(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=kn(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,S)=>S!==p):c=c.map((g,S)=>S===p?h(f({},g),{modified:u.modified}):g):c.push(u)}return c.length===0?h(f({},l),{styleModifications:l.styleModifications.filter((u,p)=>p!==a)}):h(f({},l),{styleModifications:l.styleModifications.map((u,p)=>p===a?h(f({},u),{changes:c,captured:!1}):u)})}else return h(f({},l),{styleModifications:[...l.styleModifications,{selector:n,durableSelector:r,element:o,changes:s}]})}function ld(e,t){let{selector:n,property:r}=t,o=kn(e),i=o.styleModifications.map(s=>s.selector!==n?s:h(f({},s),{changes:s.changes.filter(l=>l.property!==r)})).filter(s=>s.changes.length>0);return h(f({},o),{styleModifications:i})}function ad(e){if(e.styleModifications.length===0)return h(f({},e),{inspectedElement:null});let t=kn(e);return h(f({},t),{styleModifications:[],inspectedElement:null})}function cd(e,t){return h(f({},e),{styleModifications:t})}function dd(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 ud(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 pd(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 fd(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 gd(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,l,a;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:(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 md(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 h(f({},e),{annotations:a,styleModifications:d,selectedAnnotationIds:c,lastSelectedId:c.length>0?c[c.length-1]:null,inspectedElement:u})}function hd(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 yd(e,t){return h(f({},e),{spacingTokenChanges:t})}function bd(e,t){let n=kn(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((l,a)=>a===r?s:l)}else o=[...e.spacingTokenMods,t];return h(f({},n),{spacingTokenMods:o})}function xd(e,t){let n=kn(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],h(f({},n),{spacingTokenMods:l})}var vd={SET_ANNOTATING:Dc,SET_TOOL:Hc,SET_COLOR:Fc,SET_STROKE_WIDTH:_c,START_PATH:zc,CONTINUE_PATH:$c,CANCEL_PATH:Wc,FINISH_PATH:Yc,ADD_TEXT:jc,UPDATE_TEXT:Jc,UPDATE_TEXT_SIZE:Gc,DELETE_ANNOTATION:Vc,MOVE_ANNOTATION:Uc,RESIZE_ANNOTATION:Xc,PASTE_ANNOTATIONS:Kc,RESTORE_ANNOTATIONS:qc,UNDO:Zc,REDO:Qc,SELECT_ANNOTATION:ed,UPDATE_ANNOTATION_COLOR:td,MARK_CAPTURED:nd,CLEAR:od,SELECT_ELEMENT:rd,MODIFY_STYLE:id,MODIFY_STYLES_BATCH:sd,CLEAR_STYLE:ld,CLEAR_ALL_STYLES:ad,RESTORE_STYLE_MODIFICATIONS:cd,UPDATE_LINKED_POSITIONS:dd,CLEANUP_ORPHANED:md,SET_ANNOTATION_STATUS:ud,SET_ANNOTATION_THREAD:pd,SET_ANNOTATION_QUESTION:fd,APPLY_RESOLUTIONS:gd,ADD_SPACING_TOKEN_CHANGE:hd,RESTORE_SPACING_TOKEN_CHANGES:yd,MODIFY_SPACING_TOKEN:bd,DELETE_SPACING_TOKEN:xd};function Sd(e,t){let n=vd[t.type];return n?n(e,t.payload):e}function xl(){let[e,t]=Bc(Sd,Nc);return Oc(()=>{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 wd}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 Cd(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function Ed(){return window.location.pathname}function Wo(){return wd(Cd,Ed,()=>"/")}import{domToCanvas as kd}from"modern-screenshot";function Ci(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function Ei(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(h(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(h(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 Td(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 Md(e,t){if(e.length===0)return[];let n=e.map(c=>({annotation:c,bounds:Td(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,S=Math.max(0,g-t/2);i.push({top:S,bottom:S+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 Id(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 Rd(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 S of c)g=Math.max(g,e.measureText(S).width);e.fillRect(l.x-p,l.y-p,g+p*2,c.length*u+p*2),e.fillStyle="#ffffff",c.forEach((S,w)=>{e.fillText(S,l.x,l.y+a+w*u)});break}}}e.restore()}async function dr(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=Id(s),a=Md(s,i);if(a.length===0){let c=await vl(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 vl(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 vl(e,t,n,r,o,i,s){try{let l=await kd(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),Rd(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 ur(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 Sl(e,t,n){try{let r=Array.isArray(e)?e:[e];if(r.length===0)return!1;let o=await ur(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=Ei(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 bn,useMemo as ni,useRef as Wt,useState as pt}from"react";import{useCallback as Jo,useRef as Ad}from"react";function ki(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 nn='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function Ld(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 wl(e,t,n){let r=[];for(let o of t)r.push(...Ld(e,o,n));return r}function jo(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 Cl(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 ${nn}`,e.textBaseline="middle";let c=s!==void 0?Math.min(400,Math.max(60,window.innerWidth-s-16)):400,u=jo(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 El=11,Ri=4,Pd=`600 ${El}px system-ui, -apple-system, sans-serif`;function Li(e,t,n){return e.map(r=>({x:r.x-t,y:r.y-n}))}function Od(e,t,n,r,o,i){let s=String(r);e.font=Pd;let a=e.measureText(s).width+Ri*2,d=El+Ri*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+Ri,u+d/2)}function Bd(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 kl(){let e=Ad(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 S;let c=e.current;if(!c)return;let u=c.getContext("2d");if(!u)return;let g=((S=l.status)!=null?S: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":ki(u,l.points,g,l.strokeWidth);break;case"text":l.text&&l.points[0]&&Cl(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":ki(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),S=Math.max(u.x,p.x),w=Math.min(u.y,p.y),L=Math.max(u.y,p.y),P=(g+S)/2,G=(w+L)/2;[{x:P,y:w},{x:P,y:L},{x:g,y:G},{x:S,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,S;if(l.type==="freehand")u=Math.min(...l.points.map(L=>L.x)),p=Math.max(...l.points.map(L=>L.x)),g=Math.min(...l.points.map(L=>L.y)),S=Math.max(...l.points.map(L=>L.y));else{let L=l.points[0],P=l.points[l.points.length-1];u=Math.min(L.x,P.x),p=Math.max(L.x,P.x),g=Math.min(L.y,P.y),S=Math.max(L.y,P.y)}[{x:u,y:g},{x:p,y:g},{x:u,y:S},{x:p,y:S}].forEach(L=>{c.beginPath(),c.rect(L.x-a/2,L.y-a/2,a,a),c.fill(),c.stroke()})}}},[]),i=Jo((l,a,d,c,u,p,g,S=0,w=0,L,P)=>{var G;if(t(),l.forEach(k=>{var J;let T=h(f({},k),{points:Li(k.points,S,w)}),b=L==null?void 0:L.get(k.id),B=(J=P==null?void 0:P.has(k.id))!=null?J:!1;n(T,b,B)}),a.length>0){let k=Li(a,S,w);r(k,d,c,u)}if(p&&p.length>0&&g){let k=e.current,T=k==null?void 0:k.getContext("2d");for(let b of p){let B=l.find(J=>J.id===b);if(B){let J=h(f({},B),{points:Li(B.points,S,w)});if(o(J,g),T&&B.type!=="text"&&L&&!(B.groupId&&l.some(D=>D.groupId===B.groupId&&D.type==="text"))){let D=L.get(B.id);if(D!==void 0){let F=Bd(J,g);if(F){let M=((G=B.status)!=null?G:B.captured?"in_flight":"pending")==="pending"?B.color:"#999999";Od(T,F.x,F.y,D,M,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 Nd,useRef as Dd}from"react";function Tl(){let e=Dd({shift:!1,cmd:!1});return Nd(()=>{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 Hd}from"react";function Ml(e,t,n,r,o){Hd(()=>{let i=s=>{if(e){if(e.linkedSelector)return;s.preventDefault(),s.stopPropagation();let a=s.deltaY>0?-2:2;t(d=>d?h(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 $l,useEffect as Vr,useRef as Wl,useState as br}from"react";function Hr(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 Fr(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 Il(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 Pn(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 Sn(e){try{return document.querySelector(e)}catch(t){return null}}function _r(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=Fr(s.fiber))!=null?a:e;return{name:s.name,path:r,depthIndex:i,rootElement:l}}function Rl(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=Fr(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=Fr(n[o].fiber))!=null?s:e;return{name:t,path:n.map(a=>a.name),depthIndex:o,rootElement:l}}return null}function Go(e){let t=Vo(),n=[],r=new Set,o=t.currentNode;for(;o=t.nextNode();){let i=Rl(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=Rl(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 Tn(e){let t={selector:Il(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=Ll(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=Hr(e);o&&(t.reactComponent=o.name);let i=Fd(e);return i&&(t.context=i),t}function Ll(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function Ro(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 Fd(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 Al(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=Ro(l,a);d&&!t.has(d)&&(t.add(d),n.push(Tn(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 Al({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 _d(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,S=s.clientHeight,w=parseFloat(a.paddingTop)||0;!qt(s,"padding-top")&&Math.abs(w-e)<o&&n.push({x:l.left+p,y:l.top+d,width:g,height:e,direction:"vertical",property:"padding-top"});let L=parseFloat(a.paddingBottom)||0;!qt(s,"padding-bottom")&&Math.abs(L-e)<o&&n.length<t&&n.push({x:l.left+p,y:l.top+d+S-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:S,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:S,direction:"horizontal",property:"padding-right"});let k=parseFloat(a.marginTop)||0;!qt(s,"margin-top")&&Math.abs(k-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 b=parseFloat(a.marginLeft)||0;!qt(s,"margin-left")&&Math.abs(b-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 B=parseFloat(a.marginRight)||0;!qt(s,"margin-right")&&Math.abs(B-e)<o&&n.length<t&&n.push({x:l.right,y:l.top,width:e,height:l.height,direction:"horizontal",property:"margin-right"});let J=a.display;if((J.includes("flex")||J.includes("grid"))&&n.length<t&&!qt(s,"gap")){let D=Array.from(s.children).filter(F=>{let v=getComputedStyle(F);return v.display!=="none"&&v.position!=="absolute"&&v.position!=="fixed"});if(D.length>=2)for(let F=0;F<D.length-1&&n.length<t;F++){let v=D[F].getBoundingClientRect(),M=D[F+1].getBoundingClientRect(),X=M.top-v.bottom;Math.abs(X-e)<o&&X>.5&&n.push({x:Math.min(v.left,M.left),y:v.bottom,width:Math.max(v.right,M.right)-Math.min(v.left,M.left),height:X,direction:"vertical",property:"gap"});let pe=M.left-v.right;Math.abs(pe-e)<o&&pe>.5&&n.push({x:v.right,y:Math.min(v.top,M.top),width:pe,height:Math.max(v.bottom,M.bottom)-Math.min(v.top,M.top),direction:"horizontal",property:"gap"})}}}return n}function zr(e){return typeof e=="string"?{value:e}:e}var Ol={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 Pl(e,t){let n=Ol[t];return n?n.includes(e):!1}function zd(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 $d(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(!zd(d,c))continue;let u=$d(c);if(u&&!(e.property&&!Pl(u,e.property))){o.push({element:l,property:u});break}}}return o}let r=_d(n,t*2);return e.property?r.filter(o=>Pl(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(S=>{let w=getComputedStyle(S);return w.display!=="none"&&w.position!=="absolute"&&w.position!=="fixed"});for(let S=0;S<g.length-1&&r.length<t;S++){let w=g[S].getBoundingClientRect(),L=g[S+1].getBoundingClientRect(),P=L.top-w.bottom;P>.5&&r.push({x:Math.min(w.left,L.left),y:w.bottom,width:Math.max(w.right,L.right)-Math.min(w.left,L.left),height:P,direction:"vertical",property:"gap"});let G=L.left-w.right;G>.5&&r.push({x:w.right,y:Math.min(w.top,L.top),width:G,height:Math.max(w.bottom,L.bottom)-Math.min(w.top,L.top),direction:"horizontal",property:"gap"})}break}}}return r}function Bl(e,t){let n=new Set,r=pr(t);for(let o of e){let i=Dl[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 Nl(e){let t=new Set;for(let n of e)for(let[r,o]of Object.entries(Ol))if(o.includes(n.property)){t.add(r);break}if(t.size===1)return[...t][0]}function Hi(e,t,n){if(t===n)return e;let r=pr(t),o=pr(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 Wd={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 pr(e){var t;return(t=Wd[e])!=null?t:`[${e}px]`}var Dl={"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 Yd(e,t,n,r){let o=Dl[t];if(!o)return null;let i=pr(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=pr(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 Hl(e,t,n){let r=new Set,o=[];for(let i of e){let s=Pn(i.element),l=`${s}::${i.property}`;if(r.has(l))continue;r.add(l);let a=Hr(i.element),d=i.element.className||"",c=Yd(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 fr(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function Fi(e,t){if(e instanceof HTMLElement){let r=e.style.getPropertyValue(t);if(r)return r}let n=Jd(e,t);return n&&n.includes("var(")?n:fr(e,t)}function Jd(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 $r(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 Wr(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function gr(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function Gd(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 Gd(n)}function _i(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 Uo(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 Ao(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 Xo(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 mr(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 $i(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function Yr(e){var t;for(let n of e){let r=Sn(n.selector);if(!r&&n.durableSelector&&(r=Sn(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=Sn(e);if(!n)return;let r=t.find(o=>o.selector===e);if(r)for(let o of r.changes)$i(n,o.property,o.original)}function jr(e){for(let t of e){let n=Sn(t.selector);if(n)for(let r of t.changes)$i(n,r.property,r.original)}}function _l(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){_l(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Vd(o.style,t,n,r)}}}function Vd(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();zl(s)&&r.push({name:i,value:s,usage:`var(${i})`})}}}var Jr=null,Ud=5e3;function Yi(){if(Jr&&Date.now()-Jr.timestamp<Ud)return Jr.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{_l(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();zl(l)&&e.push({name:s,value:l,usage:`var(${s})`})}}let o=e.sort((i,s)=>i.name.localeCompare(s.name));return Jr={variables:o,timestamp:Date.now()},o}function zl(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 hr(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 yr(e,t){if(!e)return null;let n=Fl(e);if(!n)return null;for(let r of t){let o=Fl(r.value);if(o&&n===o)return r}return null}function Fl(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 Po,jsx as dt,jsxs as Zn}from"react/jsx-runtime";var $n=22,ho=12,Xd=3,Kd=250,Gr=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],qd=3e3;function Zd(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=zn(l,["left","top","avoidBottom","style","children"]);let a=e+ho,d=t+ho,c=n!==void 0?`${n}px`:"100vh";return dt("div",h(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:e,top:t,padding:ho},r),children:dt("div",{style:{transform:`translate(min(0px, calc(100vw - ${a}px - 100%)), min(0px, calc(${c} - ${d}px - 100%)))`},children:o})}))}function Yl({annotations:e,supersededAnnotations:t,inFlightIds:n,scrollX:r,scrollY:o,annotationGroupMap:i,onViewThread:s,onSelectAnnotation:l,onHoverAnnotation:a,canvasRef:d}){var b,B,J,N,D,F,v;let[c,u]=br(0),[p,g]=br(()=>Math.floor(Math.random()*Gr.length)),S=!!(n&&n.size>0);Vr(()=>{if(!S)return;let M=setInterval(()=>{u(pe=>(pe+1)%Xd)},Kd),X=setInterval(()=>{g(pe=>(pe+1)%Gr.length)},qd);return()=>{clearInterval(M),clearInterval(X)}},[S]);let w=[];for(let M of e){if(M.type!=="text"||!M.text||!M.points[0]||t.has(M))continue;let X=M.groupId?e.filter(de=>de.groupId===M.groupId):[M],pe=(b=M.status)!=null?b:"pending",we=X.reduce((de,$)=>{var oe;return de+((oe=$.replyCount)!=null?oe:0)},0),ye=de=>de==="resolved"&&we===0,le=!!(n&&(n.has(M.id)||X.some(de=>n.has(de.id))))||M.status==="in_flight"||X.some(de=>de.status==="in_flight")||ye(M.status)||X.some(de=>ye(de.status)),ze=X.some(de=>{var $;return de.status==="resolved"&&(($=de.replyCount)!=null?$:0)>0||de.status==="needs_review"}),Ie=X.some(de=>de.threadId);if(!le&&pe!=="resolved"&&pe!=="needs_review"&&!ze&&!Ie)continue;let te=M.threadId||((B=X.find(de=>de.threadId))==null?void 0:B.threadId),De=pe==="needs_review"||X.some(de=>de.status==="needs_review"),Oe=M.points[0],je=M.fontSize||12,We=je*1.4,Re=i.get(M.id),at=M.text.replace(/\n/g," "),yt=Re!==void 0?Re+". "+at:at,z=(N=(J=d==null?void 0:d.current)==null?void 0:J.getContext("2d"))!=null?N:document.createElement("canvas").getContext("2d");if(!z)continue;z.font=`${je}px ${nn}`;let ve=Oe.x-r,ce=Yo(ve),Ce=jo(z,yt,ce),tt=z.measureText(Ce).width;w.push({id:M.id,threadId:te,linkedSelector:M.linkedSelector||((D=X.find(de=>de.linkedSelector))==null?void 0:D.linkedSelector),x:Oe.x+tt+4,y:Oe.y-4,size:We+8,color:M.color,isInFlight:le,isNeedsReview:De,replyCount:we})}if(w.length===0)return null;let L=2,P=(v=(F=d==null?void 0:d.current)==null?void 0:F.getContext("2d"))!=null?v:document.createElement("canvas").getContext("2d"),G=w.map(M=>{var le;let X;M.isInFlight?X=(le=Gr[p])!=null?le:"thinking":M.replyCount>0?X=`${M.replyCount} ${M.replyCount===1?"reply":"replies"}`:X="Cancelled";let pe=11,we=4,ye=X.length*7.2;return P&&(P.font=`12px ${nn}`,ye=P.measureText(X).width),4+pe+we+ye+4}),k=typeof window!="undefined"?window.innerHeight:9999,T=[];for(let M=0;M<w.length;M++){let X=w[M].y-o,pe=Math.min(X,k-$n),we=pe+$n,le=w[M].x-r;for(let ze=0;ze<M;ze++){let Ie=w[ze].y-o,te=Math.min(Ie,k-$n),De=te+$n;if(!(pe<De&&we>te))continue;let je=T[ze]+G[ze];le<je+L&&(le=je+L)}T.push(le)}return dt(Po,{children:w.map((M,X)=>{let pe=!!M.threadId;return dt(Zd,{left:T[X]-ho,top:M.y-o-ho,onMouseDown:pe?we=>we.stopPropagation():void 0,onClick:pe?we=>{if(we.stopPropagation(),l==null||l(M.id),s==null||s(M.threadId),M.linkedSelector)try{let ye=document.querySelector(M.linkedSelector);if(ye){let le=ye.getBoundingClientRect();(le.bottom<0||le.top>window.innerHeight)&&ye.scrollIntoView({behavior:"smooth",block:"center"})}}catch(ye){}}:void 0,onMouseEnter:a?()=>a(M.id):void 0,onMouseLeave:a?()=>a(null):void 0,style:{pointerEvents:pe?"auto":"none",cursor:pe?"pointer":void 0,zIndex:9999},children:dt("div",{"data-devtools":"annotation-badge",style:{height:M.size,display:"flex",alignItems:"center",backgroundColor:M.color,fontFamily:nn,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:M.isInFlight?Zn(Po,{children:[dt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:c===1?Zn(Po,{children:[dt("circle",{cx:"7",cy:"7",r:"2"}),dt("circle",{cx:"17",cy:"7",r:"2"}),dt("circle",{cx:"7",cy:"17",r:"2"}),dt("circle",{cx:"17",cy:"17",r:"2"})]}):Zn(Po,{children:[dt("circle",{cx:"12",cy:"6",r:"2"}),dt("circle",{cx:"6",cy:"12",r:"2"}),dt("circle",{cx:"18",cy:"12",r:"2"}),dt("circle",{cx:"12",cy:"18",r:"2"})]})}),dt("span",{style:{opacity:.7},children:Gr[p]})]}):Zn(Po,{children:[M.isNeedsReview?dt("span",{style:{fontWeight:700},children:"?"}):dt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:dt("polyline",{points:"4 12 10 18 20 6"})}),dt("span",{style:{opacity:.7},children:M.replyCount>0?`${M.replyCount} ${M.replyCount===1?"reply":"replies"}`:"Cancelled"})]})})},M.id)})})}function ji({inFlightSelectorColors:e,animated:t=!0}){let[n,r]=br([]);return Vr(()=>{if(e.size===0){r([]);return}let o=null,i=()=>{let a=[];for(let[d,c]of e){let u=Sn(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:Zn(Po,{children:[t&&dt("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(o=>dt("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:dt("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:dt("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 jl({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],S=p.fontSize||12,w=S*1.4,L=i.get(p.id),P=p.text.replace(/\n/g," "),G=L!==void 0?L+". "+P:P,T=document.createElement("canvas").getContext("2d");if(!T)continue;T.font=`${S}px ${nn}`;let b=g.x-n,B=Yo(b),J=jo(T,G,B),N=T.measureText(J).width;c.push({annotation:u,x:g.x+N+4,y:g.y-4,size:w+8})}}return c.length===0?null:dt(Po,{children:c.map(({annotation:u,x:p,y:g,size:S})=>dt(Qd,{annotation:u,x:p-n,y:g-r,size:S,onReply:o,onHoverAnnotation:l},`question-${u.threadId}`))})}function Qd({annotation:e,x:t,y:n,size:r,onReply:o,onHoverAnnotation:i}){let[s,l]=br(!1),[a,d]=br(""),c=Wl(null),u=Wl(null);Vr(()=>{s&&c.current&&c.current.focus()},[s]),Vr(()=>{if(!s)return;let L=G=>{u.current&&!G.composedPath().includes(u.current)&&l(!1)},P=G=>{G.key==="Escape"&&l(!1)};return document.addEventListener("mousedown",L),document.addEventListener("keydown",P),()=>{document.removeEventListener("mousedown",L),document.removeEventListener("keydown",P)}},[s]);let p=$l(()=>{!a.trim()||!e.threadId||(o(e.threadId,a.trim()),d(""),l(!1))},[a,e.threadId,o]),g=$l(L=>{L.key==="Enter"&&(L.metaKey||L.ctrlKey)&&(L.preventDefault(),p())},[p]),S=s?t:t-ho,w=s?n:n-ho;return Zn("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, ${S}px)`,top:`max(0px, ${w}px)`,padding:s?0:ho,transform:`translate(min(0px, calc(100vw - max(0px, ${S}px) - 100%)), min(0px, calc(100vh - max(0px, ${w}px) - 100%)))`,zIndex:s?10002:9999,pointerEvents:"auto",cursor:s?void 0:"pointer"},children:[!s&&Zn("div",{onClick:()=>l(!0),style:{height:r,display:"flex",alignItems:"center",backgroundColor:e.color,padding:`0 ${4}px`,gap:4,fontFamily:nn,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[Zn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",children:[dt("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),dt("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),dt("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),dt("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]}),dt("span",{style:{opacity:.7},children:"reply?"})]}),s&&Zn("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#eaeaea",fontFamily:nn,fontSize:12,color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)"},children:[dt("div",{style:{padding:`${6}px ${8}px`,lineHeight:1.4},children:e.question}),Zn("div",{style:{padding:`0 ${4}px ${4}px`},children:[dt("textarea",{ref:c,value:a,onChange:L=>d(L.target.value),onKeyDown:g,placeholder:"Type your reply...",style:{width:"100%",minHeight:40,padding:4,fontSize:12,fontFamily:nn,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"}}),dt("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:4},children:dt("button",{onClick:p,disabled:!a.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:nn,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 Ur(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 Jl,useLayoutEffect as eu,useState as Gl}from"react";import{jsx as Ji,jsxs as Ul}from"react/jsx-runtime";function tu(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 Xl({element:e,radius:t,accentColor:n,hoveredCorner:r,draggingCorner:o,cursorViewport:i}){let[s,l]=Gl(null),[a,d]=Gl(!1);if(Jl(()=>{let P=T=>{(T.key==="Meta"||T.key==="Control")&&d(!0)},G=T=>{(T.key==="Meta"||T.key==="Control")&&d(!1)},k=()=>d(!1);return window.addEventListener("keydown",P,!0),window.addEventListener("keyup",G,!0),window.addEventListener("blur",k),()=>{window.removeEventListener("keydown",P,!0),window.removeEventListener("keyup",G,!0),window.removeEventListener("blur",k)}},[]),Jl(()=>{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]),eu(()=>{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=tu(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"]}},S=new Set,w=o!=null?o:r;if(w)if(a)S.add(w);else for(let P of Vl)S.add(P);let L={position:"fixed",top:s.top,left:s.left,width:c,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"};return Ul("div",{"data-devtools":"border-radius-handles",style:L,children:[Ul("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${u}`,children:[Ji("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"}),Vl.map(P=>{let G=g[P],k=S.has(P);return Ji("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&&w&&(()=>{let P=Math.round(t[w]);return Ji("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 nu,useState as ou}from"react";function Ko(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 ru,jsx as Gi,jsxs as xr}from"react/jsx-runtime";function Qn({element:e,isSelected:t=!1,elementInfo:n,color:r="#3b82f6",annotationNumber:o,changeCount:i,hideTooltip:s=!1}){let[l,a]=ou(null);if(nu(()=>{if(!e){a(null);return}let b=()=>{let B=e.getBoundingClientRect();a(B)};return b(),window.addEventListener("scroll",b,{passive:!0}),window.addEventListener("resize",b,{passive:!0}),()=>{window.removeEventListener("scroll",b),window.removeEventListener("resize",b)}},[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:Ko(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,S=g?`<${g}> ${c}${u}${p}`:`${c}${u}${p}`,w=22,L=l.height>=window.innerHeight,P=L?0:l.top>=w?l.top-w:l.bottom,G=L?{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&&xr("div",{"data-devtools":"tooltip",style:G,children:[o!==void 0&&xr("span",{children:[o,"."]}),Gi("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:S}),i!==void 0&&i>0&&xr("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return xr(ru,{children:[xr("div",{"data-devtools":"highlight",style:d,children:[Gi("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:Gi("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"}))}),L&&T]}),!L&&T]})}import{useEffect as Kl,useLayoutEffect as iu,useState as Vi}from"react";import{jsx as ro,jsxs as Xi}from"react/jsx-runtime";function Ui(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]=Vi(null),[c,u]=Vi([]),[p,g]=Vi(!1);if(Kl(()=>{let N=v=>{(v.key==="Meta"||v.key==="Control")&&g(!0)},D=v=>{(v.key==="Meta"||v.key==="Control")&&g(!1)},F=()=>g(!1);return window.addEventListener("keydown",N,!0),window.addEventListener("keyup",D,!0),window.addEventListener("blur",F),()=>{window.removeEventListener("keydown",N,!0),window.removeEventListener("keyup",D,!0),window.removeEventListener("blur",F)}},[]),Kl(()=>{if(!e){d(null),u([]);return}let N=()=>{d(e.getBoundingClientRect()),u(Lo(e))};return N(),window.addEventListener("scroll",N,{passive:!0}),window.addEventListener("resize",N,{passive:!0}),()=>{window.removeEventListener("scroll",N),window.removeEventListener("resize",N)}},[e]),iu(()=>{e&&(d(e.getBoundingClientRect()),u(Lo(e)))},[e,t.row,t.column,l]),!a||c.length===0)return null;let S=a.width,w=a.height,L="pm-gap-stripe-pattern",P=Ui(n,.25),G=Ui(n,.1),k=Ui(n,.2),T=8,b=2,B={position:"fixed",top:a.top,left:a.left,width:S,height:w,pointerEvents:"none",zIndex:9996,overflow:"visible"},J=o!=null?o:r;return Xi("div",{"data-devtools":"gap-handles",style:B,children:[Xi("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${S} ${w}`,children:[ro("defs",{children:ro("pattern",{id:L,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:ro("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:P,strokeWidth:"1.5"})})}),ro("rect",{x:"0.5",y:"0.5",width:Math.max(0,S-1),height:Math.max(0,w-1),fill:"none",stroke:k,strokeWidth:"1"}),c.map((N,D)=>{let F=N.x-a.left,v=N.y-a.top,M=N.w,X=N.h,pe=p?N.axis===J:!0;return(N.axis==="row"?t.row:t.column)===0?null:Xi("g",{opacity:pe?1:.6,children:[ro("rect",{x:F,y:v,width:M,height:X,fill:G}),ro("rect",{x:F,y:v,width:M,height:X,fill:`url(#${L})`})]},D)}),J&&(()=>{let N=c.filter(De=>De.axis===J);if(N.length===0)return null;let D=N[0];if(i&&N.length>1){let De=1/0;for(let Oe of N){let je=Oe.x+Oe.w/2,We=Oe.y+Oe.h/2,Re=Math.abs(i.x-je)+Math.abs(i.y-We);Re<De&&(De=Re,D=Oe)}}let F=D.x-a.left,v=D.y-a.top,M=D.w,X=D.h,pe=F+M/2,we=v+X/2;if(s)return ro("circle",{cx:pe,cy:we,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let ye=J==="column",le=ye?b:T,ze=ye?T:b,Ie=pe-le/2,te=we-ze/2;return ro("rect",{x:Ie,y:te,width:le,height:ze,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&J&&(()=>{let N=s?"auto":String(Math.round(J==="row"?t.row:t.column));return ro("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:N})})()]})}import{useCallback as du,useEffect as uu,useState as pu}from"react";import{useEffect as su,useState as ql}from"react";var lu=3,au=250,qi=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],cu=3e3;function Zl(e){let[t,n]=ql(0),[r,o]=ql(()=>Math.floor(Math.random()*qi.length));return su(()=>{if(!e)return;let i=setInterval(()=>n(l=>(l+1)%lu),au),s=setInterval(()=>o(l=>(l+1)%qi.length),cu);return()=>{clearInterval(i),clearInterval(s)}},[e]),{charIndex:t,word:qi[r]}}import{Fragment as Zi,jsx as On,jsxs as qo}from"react/jsx-runtime";function fu(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 Ql=22,Qi=12;function gu(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=zn(l,["left","top","avoidBottom","style","children"]);let a=n!==void 0?`${n}px`:"100vh";return On("div",h(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 ea({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:r,dispatch:o,inFlightSelectors:i,toolbarRef:s,onHoverSelector:l}){var G;let[a,d]=pu([]),c=i&&i.size>0,{charIndex:u,word:p}=Zl(!!c);uu(()=>{if(t){d([]);return}let k=null,T=()=>{let J=[];e.forEach((N,D)=>{let F=Sn(N.selector);if(!F)return;let v=F.getBoundingClientRect();J.push({selector:N.selector,modIndex:D,top:v.top>=Ql?v.top-Ql:v.bottom,left:v.left,label:fu(N),changeCount:N.changes.length,annotationNumber:r+D+1})}),d(J)},b=()=>{k&&cancelAnimationFrame(k),k=requestAnimationFrame(T)};T(),window.addEventListener("scroll",b,!0),window.addEventListener("resize",b,!0);let B=new MutationObserver(b);return B.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",b),document.fonts.ready.then(b),()=>{window.removeEventListener("scroll",b,!0),window.removeEventListener("resize",b,!0),window.removeEventListener("load",b),B.disconnect(),k&&cancelAnimationFrame(k)}},[e,t,r]);let g=du(k=>{let T=e[k];if(!T)return;let b=Sn(T.selector);b&&(o({type:"SELECT_ANNOTATION",payload:{id:null}}),o({type:"SET_TOOL",payload:"inspector"}),o({type:"SELECT_ELEMENT",payload:{el:b,info:T.element}}))},[e,o]);if(a.length===0)return null;let S=(G=s==null?void 0:s.current)==null?void 0:G.getBoundingClientRect(),w=S?S.top-8:void 0,L={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 On(Zi,{children:a.map(k=>{let T=i==null?void 0:i.has(k.selector);return On(gu,{left:k.left-Qi,top:k.top-Qi,avoidBottom:w,onClick:()=>g(k.modIndex),onMouseEnter:l?()=>l(k.selector):void 0,onMouseLeave:l?()=>l(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:qo("div",{"data-devtools":"badge",style:h(f({},L),{backgroundColor:T?"#999999":n}),children:[qo("span",{children:[k.annotationNumber,"."]}),On("span",{style:P,children:k.label}),qo("span",{style:{opacity:.8},children:["(",k.changeCount," ",k.changeCount===1?"change":"changes",")"]}),T&&qo("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[On("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:u===1?qo(Zi,{children:[On("circle",{cx:"7",cy:"7",r:"2"}),On("circle",{cx:"17",cy:"7",r:"2"}),On("circle",{cx:"7",cy:"17",r:"2"}),On("circle",{cx:"17",cy:"17",r:"2"})]}):qo(Zi,{children:[On("circle",{cx:"12",cy:"6",r:"2"}),On("circle",{cx:"6",cy:"12",r:"2"}),On("circle",{cx:"18",cy:"12",r:"2"}),On("circle",{cx:"12",cy:"18",r:"2"})]})}),p]})]})},k.selector)})})}import{useEffect as mu,useState as hu}from"react";import{Fragment as bu,jsx as ta}from"react/jsx-runtime";function yu(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 na({styleModifications:e,accentColor:t}){let[n,r]=hu([]);if(mu(()=>{let i=null,s=()=>{let d=[];for(let c of e){let u=Sn(c.selector);if(!u)continue;let p=u.getBoundingClientRect();if(p.width===0&&p.height===0)continue;let g=Ao(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=yu(t,.2);return ta(bu,{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 ta("div",{"data-devtools":"mod-border",style:s},i.selector)})})}import{useEffect as oa,useLayoutEffect as xu,useState as ra}from"react";import{jsx as yo,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 vu={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]=ra(null),[d,c]=ra(!1);if(oa(()=>{let M=we=>{(we.key==="Meta"||we.key==="Control")&&c(!0)},X=we=>{(we.key==="Meta"||we.key==="Control")&&c(!1)},pe=()=>c(!1);return window.addEventListener("keydown",M,!0),window.addEventListener("keyup",X,!0),window.addEventListener("blur",pe),()=>{window.removeEventListener("keydown",M,!0),window.removeEventListener("keyup",X,!0),window.removeEventListener("blur",pe)}},[]),oa(()=>{if(!e){a(null);return}let M=()=>{a(e.getBoundingClientRect())};return M(),window.addEventListener("scroll",M,{passive:!0}),window.addEventListener("resize",M,{passive:!0}),()=>{window.removeEventListener("scroll",M),window.removeEventListener("resize",M)}},[e]),xu(()=>{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:S,bottom:w,left:L}=t,P="pm-stripe-pattern",G=es(n,.25),k=es(n,.1),T=es(n,.2),b=8,B=2,J={position:"fixed",top:l.top,left:l.left,width:u,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"},N=["top","right","bottom","left"],D={top:`0,0 ${u},0 ${u-S},${g} ${L},${g}`,right:`${u},0 ${u},${p} ${u-S},${p-w} ${u-S},${g}`,bottom:`0,${p} ${L},${p-w} ${u-S},${p-w} ${u},${p}`,left:`0,0 ${L},${g} ${L},${p-w} 0,${p}`},F={top:{x:u/2-b/2,y:g/2-B/2,w:b,h:B},bottom:{x:u/2-b/2,y:p-w/2-B/2,w:b,h:B},left:{x:L/2-B/2,y:p/2-b/2,w:B,h:b},right:{x:u-S/2-B/2,y:p/2-b/2,w:B,h:b}},v=new Set;return o?v.add(o):r&&(v.add(r),d||v.add(vu[r])),ts("div",{"data-devtools":"padding-handles",style:J,children:[ts("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${u} ${p}`,children:[yo("defs",{children:yo("pattern",{id:P,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:yo("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:G,strokeWidth:"1.5"})})}),yo("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"}),N.map(M=>{if(t[M]<=0)return null;let pe=v.has(M);return ts("g",{opacity:pe?1:.6,children:[yo("polygon",{points:D[M],fill:k}),yo("polygon",{points:D[M],fill:`url(#${P})`})]},M)}),N.map(M=>{let X=F[M],pe=v.has(M);return yo("rect",{x:X.x,y:X.y,width:X.w,height:X.h,fill:n,stroke:"#ffffff",strokeWidth:pe?4:2,paintOrder:"stroke"},`handle-${M}`)})]}),i&&(r||o)&&(()=>{let M=o!=null?o:r,X=Math.round(t[M]);return yo("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:X})})()]})}import{useCallback as eo,useEffect as Wn,useMemo as ti,useRef as Ln,useState as un}from"react";import{Check as ei,ChevronDown as ds,MoveHorizontal as ha,RotateCcw as Ju,Shrink as Gu,X as Vu}from"lucide-react";var Su="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",bo={borderWidth:3,borderStyle:"solid",borderImage:`url("${Su}") 4 / 1.9 / 0 round`};var Xr={"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 Zo(e){var t,n;return(n=(t=Xr[e])==null?void 0:t[0])!=null?n:"px"}function xo(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function Kr(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}=xo(n);return`${s}${l||Zo(t)}`}return`${s}${Zo(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 wu,useEffect as Cu,useRef as ia,useState as Eu}from"react";import{Plus as sa,X as ku}from"lucide-react";import{jsx as Rn,jsxs as Oo}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 Tu(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 la({value:e,onChange:t,accentColor:n,modified:r,panelContentRef:o}){let i=Tu(e),[s,l]=Eu(!1),a=ia(null),d=ia(null);Cu(()=>{if(!s)return;let k=T=>{a.current&&!T.composedPath().includes(a.current)&&l(!1)};return document.addEventListener("mousedown",k,!0),()=>document.removeEventListener("mousedown",k,!0)},[s]);let c=qr.filter(k=>!i.some(T=>T.name===k.name)),u=k=>{let T=[...i,{name:k.name,value:k.defaultValue}];t(rs(T)),l(!1)},p=k=>{let T=i.filter((b,B)=>B!==k);t(rs(T))},g=(k,T)=>{let b=i.map((B,J)=>J===k?h(f({},B),{value:T}):B);t(rs(b))},S={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},w=wu(k=>{var v;if(!d.current)return{position:"fixed",top:0,left:0};let T=d.current.getBoundingClientRect(),b=d.current.closest('[data-devtools="panel"]'),B=b?b.getBoundingClientRect():{top:0,left:0,bottom:9999},J=(v=o==null?void 0:o.current)==null?void 0:v.getBoundingClientRect(),N=k*24+8,F=B.bottom-T.bottom<N;return h(f({position:"fixed"},F?{bottom:B.bottom-T.top+2-B.top}:{top:T.bottom+2-B.top}),{left:J?J.left+4-B.left:T.left-B.left,width:J?J.width-8:140,zIndex:10001})},[o]),L={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=k=>Rn("div",{ref:a,style:f(f({},w(k.length)),L),children:k.map(T=>Rn("button",{type:"button",onClick:()=>u(T),style:P,onMouseEnter:b=>{b.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:b=>{b.currentTarget.style.backgroundColor="transparent"},children:T.label},T.name))});return i.length===0?Oo("div",{children:[Oo("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Rn(io,{modified:!1,children:Rn("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:h(f({},S),{color:"#999",cursor:"default"})})}),Rn("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:Rn(sa,{size:12})})]}),s&&G(qr)]}):Oo("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((k,T)=>{let b=qr.find(B=>B.name===k.name);return b?Oo("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Rn("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:b.label}),Rn(io,{modified:r,children:Oo("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[Rn("input",{type:"range",min:b.min,max:b.max,step:b.step,value:k.value,onChange:B=>g(T,parseFloat(B.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(k.value-b.min)/(b.max-b.min)*100}%, rgba(0,0,0,0.1) ${(k.value-b.min)/(b.max-b.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),Rn("input",{type:"number",min:b.min,max:b.max,step:b.step,value:b.unit==="px"||b.unit==="deg"?Math.round(k.value):Math.round(k.value*100)/100,onChange:B=>g(T,parseFloat(B.target.value)||0),style:h(f({},S),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),b.unit&&Rn("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:b.unit})]})}),Rn("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:Rn(ku,{size:10})})]},k.name):null}),c.length>0&&Oo("div",{children:[Oo("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:[Rn(sa,{size:10}),"Add filter"]}),s&&G(c)]})]})}import{useCallback as er,useEffect as Lu,useRef as Zr,useState as aa}from"react";import{AlignHorizontalSpaceAround as Au,AlignVerticalSpaceAround as Pu,Columns3 as Ou,Grid2x2 as Bu,RectangleHorizontal as Nu,Rows3 as Du,UnfoldHorizontal as ca,UnfoldVertical as da}from"lucide-react";import{useCallback as Mu,useEffect as Iu,useRef as vr}from"react";import{jsx as Ru}from"react/jsx-runtime";var is=[0,1,2,4,8,12,16,20,24,28,32];function Qo({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=vr(null),g=vr(null),S=vr(o),w=vr(i),L=vr(!1);S.current=o,w.current=i,Iu(()=>{let G=T=>{let b=g.current;if(!b)return;b.hasMoved=!0,L.current=T.shiftKey;let B=b.unit==="rem"||b.unit==="em"?.1:1;b.accum+=T.movementX*B;let J=Math.max(0,Math.round((b.startValue+b.accum)*10)/10);if(T.shiftKey&&a){let N=b.unit==="rem"||b.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,D=b.unit==="rem"||b.unit==="em"?J*N:J,F=a[a.length-1];for(let v=0;v<a.length-1;v++){let M=a[v],X=a[v+1];if(D<=(M+X)/2){F=M;break}if(D<X){F=X;break}}D>a[a.length-1]&&(F=Math.round(D/8)*8),J=b.unit==="rem"||b.unit==="em"?Math.round(F/N*1e3)/1e3:F}n==null||n(`${J}${b.unit}`)},k=()=>{let T=g.current;if(!T)return;let b=Math.max(0,Math.round((T.startValue+T.accum)*10)/10);if(L.current&&a){let J=T.unit==="rem"||T.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,N=T.unit==="rem"||T.unit==="em"?b*J:b,D=a[a.length-1];for(let F=0;F<a.length-1;F++){let v=a[F],M=a[F+1];if(N<=(v+M)/2){D=v;break}if(N<M){D=M;break}}N>a[a.length-1]&&(D=Math.round(N/8)*8),b=T.unit==="rem"||T.unit==="em"?Math.round(D/J*1e3)/1e3:D}let B=T.hasMoved&&b!==T.startValue;g.current=null,document.exitPointerLock(),B?t(`${b}${T.unit}`):T.hasMoved?n==null||n(`${T.startValue}${T.unit}`):w.current&&S.current&&S.current(),r==null||r()};return document.addEventListener("mousemove",G),document.addEventListener("mouseup",k),()=>{document.removeEventListener("mousemove",G),document.removeEventListener("mouseup",k)}},[t,n,r]);let P=Mu(G=>{var b;if(G.button!==0)return;G.preventDefault();let k=xo(e),T=k.unit&&k.unit!=="px"?k.unit:l;g.current={startValue:k.num,unit:T,accum:0,hasMoved:!1},(b=p.current)==null||b.requestPointerLock()},[e,l]);return Ru("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 on}from"react/jsx-runtime";function Hu({gridCols:e,gridRows:t,gridModified:n,accentColor:r,onColsChange:o,onRowsChange:i}){return Ae(Bn,{style:{width:100},children:on("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:h(f({},dn),{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:h(f({},dn),{width:32,textAlign:"center",padding:2})})]})})}function ua({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:S,onUnitCycle:w}){let L=c,P=t("display"),G=t("flex-direction"),k=pa(P,G),T=P==="flex"||P==="inline-flex",b=P==="grid",B=T||b,J=t("width"),N=t("height"),D=o("width")?J:$r(e,"width"),F=o("height")?N:$r(e,"height"),v=ls(J,D),M=ls(N,F),X=t("min-width"),pe=t("max-width"),we=t("min-height"),ye=t("max-height"),le=tr(t("padding")),ze=t("gap"),Ie=t("row-gap"),te=t("column-gap"),De=t("grid-template-columns"),Oe=t("grid-template-rows"),je=t("overflow"),We=De.split(/\s+/).filter(Q=>Q&&Q!=="none").length||1,Re=Oe.split(/\s+/).filter(Q=>Q&&Q!=="none").length||1,[at,yt]=aa(!1),z=d!==null,ve=z||at,ce=z?.3:at?.65:1,Ce=({mode:Q,icon:Ne,active:nt})=>Ae("button",{type:"button",onClick:()=>fa(Q,r),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:nt?Ko(p,.15):"transparent",color:nt?p:"#64748b",cursor:"pointer",fontSize:14},children:Ne}),tt=(Q,Ne,nt)=>{nt==="fixed"?r(Q,Ne):r(Q,Qr(nt,Ne))},de=Q=>{let Ne=tr(t("padding")),nt=Q||"0";r("padding",`${Ne.top} ${nt} ${Ne.bottom} ${nt}`)},$=Q=>{let Ne=tr(t("padding")),nt=Q||"0";r("padding",`${nt} ${Ne.right} ${nt} ${Ne.left}`)},[oe,se]=aa({}),be=er((Q,Ne)=>nt=>{Ne(nt),se(Hn=>h(f({},Hn),{[Q]:nt}))},[]),ge=er(Q=>{se(Ne=>{let nt=f({},Ne);return delete nt[Q],nt})},[]),ke=er(Q=>{let Ne=tr(t("padding"));Ve(e,"padding",`${Ne.top} ${Q} ${Ne.bottom} ${Q}`)},[e,t]),ae=er(Q=>{let Ne=tr(t("padding"));Ve(e,"padding",`${Q} ${Ne.right} ${Q} ${Ne.left}`)},[e,t]),Se=er(Q=>Ne=>{Ve(e,Q,Ne)},[e]),He=G==="column"||G==="column-reverse",Ft=Q=>Q==="center"?1:Q==="flex-end"||Q==="end"?2:0,Gt=Ft(t("justify-content")),it=Ft(t("align-items")),Qt=He?it:Gt,sn=He?Gt:it,Lt=Zr(null),_t=Zr({x:0,y:0}),Ct=Zr({col:Qt,row:sn});Ct.current={col:Qt,row:sn};let Mt=er((Q,Ne)=>{let nt=["flex-start","center","flex-end"];He?(r("justify-content",nt[Ne]),r("align-items",nt[Q])):(r("justify-content",nt[Q]),r("align-items",nt[Ne]))},[He,r]),gn=Zr(Mt);gn.current=Mt,Lu(()=>{let Ne=nt=>{let Hn=Lt.current;if(!Hn||!nt.composedPath().includes(Hn))return;nt.preventDefault(),nt.stopPropagation(),_t.current.x+=nt.deltaX,_t.current.y+=nt.deltaY;let{col:Vt,row:wn}=Ct.current,xn=!1;Math.abs(_t.current.x)>=30&&(Vt=Math.max(0,Math.min(2,Vt+(_t.current.x>0?1:-1))),_t.current.x=0,_t.current.y=0,xn=!0),!xn&&Math.abs(_t.current.y)>=30&&(wn=Math.max(0,Math.min(2,wn+(_t.current.y>0?1:-1))),_t.current.x=0,_t.current.y=0,xn=!0),xn&&(Vt!==Ct.current.col||wn!==Ct.current.row)&&gn.current(Vt,wn)};return document.addEventListener("wheel",Ne,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",Ne,{capture:!0})},[]);let zt=()=>Ae("div",{ref:Lt,onMouseEnter:()=>{yt(!0),u.current&&(u.current.style.overflowY="hidden")},onMouseLeave:()=>{yt(!1),u.current&&(u.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:Xn,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(Q=>[0,1,2].map(Ne=>Ae("button",{type:"button",onClick:()=>Mt(Ne,Q),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:Ne===Qt&&Q===sn?Ae("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:Ne===0?on(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})]}):Ne===1?on(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})]}):on(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"}})},`${Q}-${Ne}`)))}),An=o("grid-template-columns")||o("grid-template-rows");return on("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Ae("div",{style:a,children:Ae("span",{children:B?"Auto layout":"Layout"})}),on("div",{style:{padding:"8px 12px"},children:[on("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:Xn,borderRadius:2,padding:2,opacity:ce,transition:"opacity 150ms ease"},children:[Ae(Ce,{mode:"block",icon:Ae(Nu,{size:16}),active:k==="block"}),Ae(Ce,{mode:"flex-col",icon:Ae(Du,{size:16}),active:k==="flex-col"}),Ae(Ce,{mode:"flex-row",icon:Ae(Ou,{size:16}),active:k==="flex-row"}),Ae(Ce,{mode:"grid",icon:Ae(Bu,{size:16}),active:k==="grid"})]}),on("div",{style:{display:"flex",gap:4,marginBottom:8},children:[Ae(as,{label:"W",property:"width",cssValue:v==="fixed"?J:`${Math.round(e.getBoundingClientRect().width)}px`,mode:v,onValueChange:Q=>r("width",Q),onModeChange:Q=>{if(Q==="fixed"){let Ne=e.getBoundingClientRect();r("width",`${Math.round(Ne.width)}px`)}else r("width",Qr(Q,J))},modified:o("width"),dimmed:z&&d!=="width",dropdownOpen:d==="width",onDropdownChange:Q=>L(Q?"width":null),panelContentRef:u,accentColor:p,onReset:()=>i("width"),minValue:X!=="none"&&X!=="0px"&&X!=="auto"?X:"",maxValue:pe!=="none"&&pe!=="auto"?pe:"",onMinChange:Q=>r("min-width",Q||"0"),onMaxChange:Q=>r("max-width",Q||"none"),onMinReset:()=>i("min-width"),onMaxReset:()=>i("max-width"),minModified:o("min-width"),maxModified:o("max-width")}),Ae(as,{label:"H",property:"height",cssValue:M==="fixed"?N:`${Math.round(e.getBoundingClientRect().height)}px`,mode:M,onValueChange:Q=>r("height",Q),onModeChange:Q=>{if(Q==="fixed"){let Ne=e.getBoundingClientRect();r("height",`${Math.round(Ne.height)}px`)}else r("height",Qr(Q,N))},modified:o("height"),dimmed:z&&d!=="height",dropdownOpen:d==="height",onDropdownChange:Q=>L(Q?"height":null),panelContentRef:u,minValue:we!=="none"&&we!=="0px"&&we!=="auto"?we:"",maxValue:ye!=="none"&&ye!=="auto"?ye:"",onMinChange:Q=>r("min-height",Q||"0"),onMaxChange:Q=>r("max-height",Q||"none"),onMinReset:()=>i("min-height"),onMaxReset:()=>i("max-height"),minModified:o("min-height"),maxModified:o("max-height"),accentColor:p,onReset:()=>i("height")})]}),T&&on("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:z?.3:1,transition:"opacity 150ms ease"},children:zt()}),on("div",{style:{flex:1,opacity:ce,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(Bn,{dimmed:z,children:on("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Qo,{value:ze,onChange:Q=>{ge("gap"),r("gap",Q)},onPreview:be("gap",Se("gap")),onScrubEnd:()=>ge("gap"),onReset:()=>i("gap"),isModified:o("gap"),accentColor:p,defaultUnit:S,children:G==="column"||G==="column-reverse"?Ae(da,{size:12,strokeWidth:o("gap")?2.5:1.5}):Ae(ca,{size:12,strokeWidth:o("gap")?2.5:1.5})}),Ae(Un,{property:"gap",value:oe.gap||ze,onChange:Q=>r("gap",Q),isModified:o("gap")||"gap"in oe,style:h(f({},dn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:S,onUnitCycle:w})]})})]})]}),b&&on("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:ce,transition:"opacity 150ms ease"},children:[Ae(Hu,{gridCols:We,gridRows:Re,gridModified:An,accentColor:p,onColsChange:Q=>r("grid-template-columns",`repeat(${Q}, 1fr)`),onRowsChange:Q=>r("grid-template-rows",`repeat(${Q}, 1fr)`)}),on("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[Ae(Bn,{dimmed:z,children:on("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Qo,{value:te||ze,onChange:Q=>{ge("column-gap"),r("column-gap",Q)},onPreview:be("column-gap",Se("column-gap")),onScrubEnd:()=>ge("column-gap"),onReset:()=>i("column-gap"),isModified:o("column-gap"),accentColor:p,defaultUnit:S,children:Ae(ca,{size:12,strokeWidth:o("column-gap")?2.5:1.5})}),Ae(Un,{property:"column-gap",value:oe["column-gap"]||te||ze,onChange:Q=>r("column-gap",Q),isModified:o("column-gap")||"column-gap"in oe,placeholder:"col",style:h(f({},dn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:S,onUnitCycle:w})]})}),Ae(Bn,{dimmed:z,children:on("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Qo,{value:Ie||ze,onChange:Q=>{ge("row-gap"),r("row-gap",Q)},onPreview:be("row-gap",Se("row-gap")),onScrubEnd:()=>ge("row-gap"),onReset:()=>i("row-gap"),isModified:o("row-gap"),accentColor:p,defaultUnit:S,children:Ae(da,{size:12,strokeWidth:o("row-gap")?2.5:1.5})}),Ae(Un,{property:"row-gap",value:oe["row-gap"]||Ie||ze,onChange:Q=>r("row-gap",Q),isModified:o("row-gap")||"row-gap"in oe,placeholder:"row",style:h(f({},dn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:S,onUnitCycle:w})]})})]})]}),B&&on("div",{onMouseEnter:()=>g==null?void 0:g("padding"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:ce,transition:"opacity 150ms ease"},children:[Ae(Bn,{style:{flex:1},dimmed:z,children:on("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Qo,{value:le.left,onChange:Q=>{ge("padding-h"),de(Q)},onPreview:be("padding-h",ke),onScrubEnd:()=>ge("padding-h"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:p,defaultUnit:S,snapSteps:is,children:Ae(Au,{size:12,strokeWidth:o("padding")?2.5:1.5})}),Ae(Un,{property:"padding",value:oe["padding-h"]||le.left,onChange:Q=>de(Q),isModified:o("padding")||"padding-h"in oe,placeholder:"H pad",style:h(f({},dn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:S,onUnitCycle:w})]})}),Ae(Bn,{style:{flex:1},dimmed:z,children:on("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Qo,{value:le.top,onChange:Q=>{ge("padding-v"),$(Q)},onPreview:be("padding-v",ae),onScrubEnd:()=>ge("padding-v"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:p,defaultUnit:S,snapSteps:is,children:Ae(Pu,{size:12,strokeWidth:o("padding")?2.5:1.5})}),Ae(Un,{property:"padding",value:oe["padding-v"]||le.top,onChange:Q=>$(Q),isModified:o("padding")||"padding-v"in oe,placeholder:"V pad",style:h(f({},dn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:S,onUnitCycle:w})]})})]}),on("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:ce,transition:"opacity 150ms ease"},children:[Ae("input",{type:"checkbox",checked:je==="hidden",onChange:Q=>r("overflow",Q.target.checked?"hidden":"visible"),style:{margin:0,accentColor:p}}),"Clip content"]})]})]})}import{AlignCenter as Fu,AlignJustify as _u,AlignLeft as zu,AlignRight as $u,Baseline as Wu,ChevronDown as Yu,WholeWord as ju}from"lucide-react";import{jsx as wt,jsxs as so}from"react/jsx-runtime";var ga={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function ma({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:S}){var M;let w=t("font-family"),L=t("font-size"),P=t("font-weight"),G=t("line-height"),k=t("letter-spacing"),T=t("text-align"),b=t("color"),B=String(P),J=ga[B]||B,N=hr(e,b),D=b.includes("var(")?null:yr(N,d),F=({align:X,icon:pe})=>{let we=T===X;return wt("button",{type:"button",onClick:()=>n("text-align",X),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:we?Ko(a,.15):"transparent",color:we?a:"#64748b",cursor:"pointer"},children:pe})},v=((M=w.split(",")[0])==null?void 0:M.trim().replace(/^["']|["']$/g,""))||"System";return so("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[wt("div",{style:l,children:wt("span",{children:"Typography"})}),so("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[wt(Bn,{children:so("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[wt("input",{type:"text",value:w,onChange:X=>n("font-family",X.target.value),style:h(f({},dn),{flex:1,minWidth:0,padding:0,fontWeight:r("font-family")?600:400,color:r("font-family")?a:"inherit"}),title:w}),wt(Yu,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),so("div",{style:{display:"flex",gap:4},children:[wt(Bn,{style:{flex:1},children:wt("select",{value:B,onChange:X=>n("font-weight",X.target.value),style:h(f({},dn),{padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:r("font-weight")?600:400,color:r("font-weight")?a:"inherit"}),children:Object.entries(ga).map(([X,pe])=>wt("option",{value:X,children:pe},X))})}),wt(Bn,{style:{flex:1},children:wt("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:wt(Un,{property:"font-size",value:L,onChange:X=>n("font-size",X),isModified:r("font-size"),min:1,max:999,style:h(f({},dn),{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:S})})})]}),so("div",{style:{display:"flex",gap:4},children:[wt(Bn,{style:{flex:1},children:so("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[wt(Wu,{size:12,style:{color:r("line-height")?a:"#999",flexShrink:0}}),wt(Un,{property:"line-height",value:G,onChange:X=>n("line-height",X),isModified:r("line-height"),step:.1,min:0,placeholder:"Auto",style:h(f({},dn),{flex:1,minWidth:0,padding:0,fontWeight:r("line-height")?600:400,color:r("line-height")?a:"inherit"}),showUnit:!1})]})}),wt(Bn,{style:{flex:1},children:so("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[wt(ju,{size:12,style:{color:r("letter-spacing")?a:"#999",flexShrink:0}}),wt(Un,{property:"letter-spacing",value:k,onChange:X=>n("letter-spacing",X),isModified:r("letter-spacing"),step:.1,placeholder:"\u2014",style:h(f({},dn),{flex:1,minWidth:0,padding:0,fontWeight:r("letter-spacing")?600:400,color:r("letter-spacing")?a:"inherit"}),showUnit:!1})]})})]}),so("div",{style:{display:"flex",gap:2,backgroundColor:Xn,borderRadius:2,padding:2},children:[wt(F,{align:"left",icon:wt(zu,{size:14})}),wt(F,{align:"center",icon:wt(Fu,{size:14})}),wt(F,{align:"right",icon:wt($u,{size:14})}),wt(F,{align:"justify",icon:wt(_u,{size:14})})]}),so("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[wt("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"}),wt("div",{style:{flex:1,minWidth:0},children:wt(cs,{value:b,resolvedValue:N,colorVariables:d,matchingVariable:D,onChange:X=>n("color",X),accentColor:a,modified:r("color"),panelContentRef:p,isDropdownOpen:c==="color",onDropdownChange:X=>u(X?"color":null)})})]})]})]})}import{Fragment as Xu,jsx as me,jsxs as Tt}from"react/jsx-runtime";var ya=[{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 Uu(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 Qr(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=xo(t);if(typeof n.num=="number"&&!isNaN(n.num)){let r=n.unit==="%"?"px":n.unit||"px";return`${n.num}${r}`}return"auto"}}}function tr(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 pa(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function fa(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 Xn="rgba(0, 0, 0, 0.04)",dn={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:S,onMinChange:w,onMaxChange:L,onMinReset:P,onMaxReset:G,minModified:k,maxModified:T}){let b=xo(n),B=s?b.unit||Zo(t):Zo(t),J=!s&&b.unit&&b.unit!==B?os(b.num,B):b.num,[N,D]=un(!1),[F,v]=un(String(J)),[M,X]=un(!1),pe=Ln(null),we=Ln(null),ye=Ln(null),le=Ln(!1);Wn(()=>{N||v(String(J))},[J,N]),Wn(()=>{if(!a)return;let Re=yt=>{we.current&&!yt.composedPath().includes(we.current)&&ye.current&&!yt.composedPath().includes(ye.current)&&(d==null||d(!1))},at=yt=>{yt.key==="Escape"&&(d==null||d(!1))};return document.addEventListener("mousedown",Re),document.addEventListener("keydown",at),()=>{document.removeEventListener("mousedown",Re),document.removeEventListener("keydown",at)}},[a,d]),Wn(()=>{N&&pe.current&&(pe.current.focus(),pe.current.select())},[N]);let ze=()=>{let Re=Kr(F,t,n,s);o(Re||`${Math.max(0,parseFloat(F)||0)}${B}`),D(!1)},Ie=()=>{if(le.current){le.current=!1;return}ze()},te=Re=>{if(Re.key==="Enter"){ze();return}if(Re.key==="Escape"){le.current=!0,v(String(J)),D(!1);return}if(Re.key==="ArrowUp"||Re.key==="ArrowDown"){Re.preventDefault();let at=Re.key==="ArrowUp"?1:-1,yt=Re.shiftKey?8:Re.altKey?.1:1,z=parseFloat(F)||0,ve=Math.round(Math.max(0,z+at*yt)*1e3)/1e3;v(String(ve)),o(`${ve}${B}`)}},De={fixed:"Fixed",hug:"Hug",fill:"Fill"},Oe={fixed:me(ha,{size:12}),hug:me(Gu,{size:12}),fill:me(ha,{size:12})},je=()=>{d==null||d(!a)},We=()=>{if(!ye.current||!(c!=null&&c.current))return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let Re=ye.current.getBoundingClientRect(),at=c.current.getBoundingClientRect(),yt=c.current.closest('[data-devtools="panel"]'),z=yt?yt.getBoundingClientRect():{top:0,left:0};return{position:"fixed",top:Re.bottom+4-z.top,left:at.left+4-z.left,width:at.width-8}};return Tt("div",{ref:ye,onMouseEnter:()=>X(!0),onMouseLeave:()=>X(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:N?u:M?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Xn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:l?.3:1},children:[me("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"?N?me("input",{ref:pe,type:"text",inputMode:"numeric",value:F,onChange:Re=>v(Re.target.value),onKeyDown:te,onBlur:Ie,style:h(f({},dn),{flex:1,minWidth:0,padding:"4px 2px"})}):me("span",{onClick:()=>D(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:J}):me("span",{style:{flex:1}}),Tt("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:[De[r],me(ds,{size:12})]}),a&&Tt("div",{ref:we,style:h(f({},We()),{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:[Tt("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:[Oe.fixed,Tt("span",{children:["Fixed ",t," (",n,")"]}),r==="fixed"&&me(ei,{size:14,style:{marginLeft:"auto"}})]}),Tt("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:[Oe.hug,me("span",{children:"Hug contents"}),r==="hug"&&me(ei,{size:14,style:{marginLeft:"auto"}})]}),Tt("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:[Oe.fill,me("span",{children:"Fill container"}),r==="fill"&&me(ei,{size:14,style:{marginLeft:"auto"}})]}),me("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),Tt("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[Tt("div",{style:{display:"flex",alignItems:"center",backgroundColor:Xn,borderRadius:2,padding:"4px 8px"},children:[me("span",{onClick:k?Re=>{Re.stopPropagation(),P==null||P()}:void 0,title:k?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:k?u:"#999",fontWeight:k?600:400,marginRight:8,flexShrink:0,cursor:k?"pointer":"default"},children:"Min"}),me("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:Re=>w==null?void 0:w(Re.target.value),onClick:Re=>Re.stopPropagation(),style:h(f({},dn),{flex:1,minWidth:0,padding:0,textAlign:"right",color:k?u:"inherit",fontWeight:k?600:400})})]}),Tt("div",{style:{display:"flex",alignItems:"center",backgroundColor:Xn,borderRadius:2,padding:"4px 8px"},children:[me("span",{onClick:T?Re=>{Re.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"}),me("input",{type:"text",value:S||"",placeholder:"\u2014",onChange:Re=>L==null?void 0:L(Re.target.value),onClick:Re=>Re.stopPropagation(),style:h(f({},dn),{flex:1,minWidth:0,padding:0,textAlign:"right",color:T?u:"inherit",fontWeight:T?600:400})})]})]})]})]})}function Bn({children:e,style:t,dimmed:n}){let[r,o]=un(!1);return me("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:Xn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:n?.3:1},t),children:e})}function io({children:e}){let[t,n]=un(!1);return me("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:Xn,transition:"border-color 100ms ease"},children:e})}function Un({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=xo(t),S=Zo(e),w=Xr[e],P=u&&w&&w.includes(u)?u:S,G=r&&g.unit||P,k=!r&&g.unit&&g.unit!==G?os(g.num,G):g.num,[T,b]=un(!1),[B,J]=un(""),N=Ie=>{b(!0),J(String(k||"")),requestAnimationFrame(()=>Ie.target.select())},D=()=>{if(b(!1),B.trim()){let Ie=Kr(B,e,t,r);Ie&&n(Ie)}},F=Ie=>{let te=Ie.target.value;J(te);let De=te.trim(),Oe=De.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),je=De.match(/^(-?[\d.]+)$/);if(Oe){let We=parseFloat(Oe[1]);isNaN(We)||n(`${We}${Oe[2].toLowerCase()}`)}else if(je){let We=parseFloat(je[1]);isNaN(We)||n(`${We}${G}`)}},v=Ie=>{if(Ie.key==="Enter"){if(B.trim()){let te=Kr(B,e,t,r);te&&n(te)}Ie.target.blur();return}if(Ie.key==="ArrowUp"||Ie.key==="ArrowDown"){Ie.preventDefault();let te=Ie.shiftKey?10:Ie.altKey?.1:1,De=(Ie.key==="ArrowUp"?1:-1)*o*te,Oe=parseFloat(B)||k||0,je=Math.round((Oe+De)*1e3)/1e3;i!==void 0&&(je=Math.max(i,je)),s!==void 0&&(je=Math.min(s,je)),J(String(je)),n(`${je}${G}`)}},M=/^-?[\d.]/.test(t.trim()),X=T?B:M?String(k):"",we=T&&/\s*(rem|em|px|%)\s*$/i.test(B)?"":G,ye=p&&(we==="rem"||we==="px"),le={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},ze=h(f({},c!=null?c:le),{pointerEvents:"auto",cursor:"pointer"});return Tt(Xu,{children:[me("input",{type:"text",inputMode:"decimal",value:X,onFocus:N,onBlur:D,onChange:F,onKeyDown:v,placeholder:a,style:l}),d&&we&&me("span",{style:ye?ze:c!=null?c:le,onClick:ye?p:void 0,title:ye?"Click to switch units":void 0,children:we})]})}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]=un(!1),p=!e.includes("var(")&&r?r.usage:e,[g,S]=un(p),[w,L]=un(!1),[P,G]=un(!1),[k,T]=un(!1),b=Ln(null),B=Ln(null),J=Ln(null),N=a!==void 0?a:w,D=d||L,F=eo(()=>{if(!J.current)return{position:"fixed",top:0,left:0,width:200};let te=J.current.getBoundingClientRect(),De=J.current.closest('[data-devtools="panel"]'),Oe=De?De.getBoundingClientRect():{top:0,left:0};if(l!=null&&l.current){let je=l.current.getBoundingClientRect();return{position:"fixed",top:te.bottom+4-Oe.top,left:je.left+4-Oe.left,width:je.width-8}}return{position:"fixed",top:te.bottom+4-Oe.top,left:te.left-Oe.left,width:te.width}},[l]);Wn(()=>{if(!c){let te=!e.includes("var(")&&r?r.usage:e;S(te)}},[e,c,r]),Wn(()=>{if(!N&&!P)return;let te=Oe=>{J.current&&!Oe.composedPath().includes(J.current)&&(D(!1),G(!1))},De=Oe=>{Oe.key==="Escape"&&(D(!1),G(!1))};return document.addEventListener("mousedown",te),document.addEventListener("keydown",De),()=>{document.removeEventListener("mousedown",te),document.removeEventListener("keydown",De)}},[N,P]),Wn(()=>{c&&b.current&&(b.current.focus(),b.current.select())},[c]);let v=ti(()=>{if(!g||g.startsWith("#")||g.startsWith("rgb")||g.startsWith("hsl")||g.startsWith("oklch"))return[];let te=g.toLowerCase();return n.filter(De=>De.name.toLowerCase().includes(te)||De.usage.toLowerCase().includes(te)).slice(0,8)},[g,n]),M=()=>{o(g),u(!1),G(!1)},X=te=>{S(te),te.includes("var")||te.includes("--")||te.length>0&&!te.startsWith("#")?G(!0):G(!1)},pe=te=>{S(te.usage),o(te.usage),D(!1),G(!1),u(!1)},we=()=>{setTimeout(()=>{!N&&!P&&M()},150)},ye=te=>{te.key==="Enter"?M():te.key==="Escape"&&(S(e),u(!1),G(!1))},le=ti(()=>{let te=t.trim().toLowerCase();if(te.startsWith("#"))return te.length===4?`#${te[1]}${te[1]}${te[2]}${te[2]}${te[3]}${te[3]}`:te.slice(0,7);let De=te.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(De){let je=parseInt(De[1],10).toString(16).padStart(2,"0"),We=parseInt(De[2],10).toString(16).padStart(2,"0"),Re=parseInt(De[3],10).toString(16).padStart(2,"0");return`#${je}${We}${Re}`}let Oe=te.match(/oklch\(\s*([\d.]+)/);if(Oe){let je=Math.max(0,Math.min(1,parseFloat(Oe[1]))),We=Math.round(je*255).toString(16).padStart(2,"0");return`#${We}${We}${We}`}return"#000000"},[t]),ze=te=>{let De=te.target.value;S(De),o(De)},Ie=e.includes("var(");return Tt("div",{ref:J,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:c?i:k?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Xn,transition:"border-color 100ms ease",overflow:"hidden"},children:[Tt("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[Tt("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[me("input",{type:"color",value:le,onChange:ze,style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),me("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),c?me("input",{ref:b,type:"text",value:g,onChange:te=>X(te.target.value),onKeyDown:ye,onBlur:we,style:h(f({},dn),{flex:1,minWidth:0})}):me("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&&me("button",{type:"button",onClick:()=>D(!N),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:me(ds,{size:12})})]}),P&&v.length>0&&me("div",{style:h(f({},F()),{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:v.map(te=>Tt("button",{type:"button",onClick:()=>pe(te),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:[me("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:te.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),me("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:te.name})]},te.name))}),N&&me("div",{ref:B,style:h(f({},F()),{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(te=>Tt("button",{type:"button",onClick:()=>pe(te),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:p===te.usage||e===te.usage?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:p===te.usage||e===te.usage?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[me("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:te.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),me("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:te.name}),(p===te.usage||e===te.usage)&&me(ei,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},te.name))})]})}function ba({element:e,elementInfo:t,selector:n,styleModifications:r,dispatch:o,onClose:i,onHover:s,accentColor:l="#3b82f6",toolbarRef:a}){var tt,de;let d=Ln(null),c=Ln(null),[u,p]=un(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch($){return!1}});Wn(()=>{if(u)return;let $=setTimeout(()=>p(!0),50);return()=>clearTimeout($)},[u]);let[g,S]=un(null),[w,L]=un(null),P=g!==null||w!==null,[G,k]=un("rem"),T=eo(()=>{k($=>$==="rem"?"px":"rem")},[]),b=Ln(new Map),[B,J]=un(""),N=ti(()=>Yi(),[]);Wn(()=>{let $=oe=>{var be;if(oe.key!=="Escape")return;let se=document.activeElement;se&&((be=d.current)!=null&&be.contains(se))||i()};return window.addEventListener("keydown",$),()=>window.removeEventListener("keydown",$)},[i]);let D=Ln({top:0,left:0,maxHeight:400}),[,F]=un(0),v="devtools-panel-position",M=Ln({x:0,y:0}),X=Ln(null),pe=Ln(!1);Wn(()=>{try{let $=localStorage.getItem(v);if($){let oe=JSON.parse($);typeof oe.top=="number"&&typeof oe.left=="number"&&(pe.current=!0,D.current=h(f({},D.current),{top:oe.top,left:oe.left}))}}catch($){}},[]),Wn(()=>{let $=se=>{var Ct;let be=X.current;if(!be)return;let ge=be.startOffsetX+(se.clientX-be.startX),ke=be.startOffsetY+(se.clientY-be.startY),ae=280,Se=16,He=Math.max(Se,Math.min(window.innerWidth-ae-Se,D.current.left+ge)),Ft=Math.max(Se,D.current.top+ke);M.current={x:He-D.current.left,y:Ft-D.current.top};let Gt=d.current,it=Gt==null?void 0:Gt.parentElement;if(!it)return;it.style.top=`${Ft}px`,it.style.left=`${He}px`;let Qt=(Ct=a==null?void 0:a.current)==null?void 0:Ct.getBoundingClientRect(),sn=window.innerHeight-16;Qt&&He+ae>Qt.left&&(sn=Qt.top-8);let Lt=Math.max(0,Ft),_t=Math.max(200,sn-Lt);Gt&&(Gt.style.maxHeight=`${_t}px`)},oe=()=>{if(!X.current)return;let se=D.current.top+M.current.y,be=D.current.left+M.current.x;D.current=h(f({},D.current),{top:se,left:be}),M.current={x:0,y:0},pe.current=!0;try{localStorage.setItem(v,JSON.stringify({top:se,left:be}))}catch(ge){}X.current=null};return window.addEventListener("mousemove",$),window.addEventListener("mouseup",oe),()=>{window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",oe)}},[]);let we=eo($=>{$.button!==0||$.target.closest("button")||($.preventDefault(),X.current={startX:$.clientX,startY:$.clientY,startOffsetX:M.current.x,startOffsetY:M.current.y})},[]);Wn(()=>{M.current={x:0,y:0};let $=(be=!1)=>{var sn;let ge=d.current,ke=280,ae=8,Se,He;if(pe.current)Se=D.current.top,He=D.current.left;else{let Lt=e.getBoundingClientRect();He=Lt.right+ae,Se=Lt.top,He+ke>window.innerWidth-ae&&(He=Lt.left-ke-ae),He<ae&&(He=Math.max(ae,(window.innerWidth-ke)/2))}let Ft=(sn=a==null?void 0:a.current)==null?void 0:sn.getBoundingClientRect(),Gt=window.innerHeight-16;Ft&&He+ke>Ft.left&&(Gt=Ft.top-ae);let it=Math.max(0,Se),Qt=Math.max(200,Gt-it);if(D.current={top:Se,left:He,maxHeight:Qt},be&&ge){let Lt=ge.parentElement;Lt&&!pe.current&&(Lt.style.top=`${Se+M.current.y}px`,Lt.style.left=`${He+M.current.x}px`),ge.style.maxHeight=`${Qt}px`}else F(Lt=>Lt+1)};$(!1);let oe=()=>$(!0),se=()=>$(!1);return window.addEventListener("scroll",oe,{passive:!0}),window.addEventListener("resize",se,{passive:!0}),()=>{window.removeEventListener("scroll",oe),window.removeEventListener("resize",se)}},[e]),Wn(()=>{let $=d.current;if(!$)return;let oe=se=>{let be=c.current;if(!be){se.preventDefault();return}let{scrollTop:ge,scrollHeight:ke,clientHeight:ae}=be,Se=ge<=0&&se.deltaY<0,He=ge+ae>=ke&&se.deltaY>0;(Se||He)&&se.preventDefault()};return $.addEventListener("wheel",oe,{passive:!1}),()=>$.removeEventListener("wheel",oe)},[]);let ye=ti(()=>r.find($=>$.selector===n),[r,n]),le=eo($=>{let oe=ye==null?void 0:ye.changes.find(se=>se.property===$);if(oe)return oe.modified;if($.includes("color")){let se=Fi(e,$);if(se&&se.includes("var("))return se}return fr(e,$)},[e,ye]),ze=eo($=>{if(b.current.has($))return b.current.get($);let oe=ye==null?void 0:ye.changes.find(be=>be.property===$);if(oe)return oe.original;let se=fr(e,$);return b.current.set($,se),se},[e,ye]),Ie=eo(($,oe)=>{let se=ze($);Ve(e,$,oe),$==="backdrop-filter"&&Ve(e,"-webkit-backdrop-filter",oe),o({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:$,original:se,modified:oe}})},[e,n,t,o,ze]),te=eo(()=>{Wi(n,r);let $=r.find(oe=>oe.selector===n);if($)for(let oe of $.changes)o({type:"CLEAR_STYLE",payload:{selector:n,property:oe.property}});b.current.clear()},[n,r,o]),De=eo($=>{let oe=r.find(be=>be.selector===n);oe!=null&&oe.changes.find(be=>be.property===$)&&e instanceof HTMLElement&&(e.style.removeProperty($),o({type:"CLEAR_STYLE",payload:{selector:n,property:$}}),b.current.delete($))},[e,n,r,o]),Oe=eo(()=>{let $=B.split(";").map(oe=>oe.trim()).filter(oe=>oe);for(let oe of $){let se=oe.indexOf(":");if(se>0){let be=oe.slice(0,se).trim(),ge=oe.slice(se+1).trim();be&&ge&&Ie(be,ge)}}J("")},[B,Ie]),je=eo($=>{var oe;return(oe=ye==null?void 0:ye.changes.some(se=>se.property===$))!=null?oe:!1},[ye]),We=$=>{var ke;let oe=le($.property),se=je($.property),be=!se&&Uu($.property,oe),ge={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(be&&$.type!=="backdrop-filter")return me(io,{modified:!1,children:me("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:ae=>Ie($.property,ae.target.value),style:h(f({},ge),{color:"#999"})})});switch($.type){case"color":{let ae=hr(e,oe),Se=oe.includes("var(")?null:yr(ae,N);return me(cs,{value:oe,resolvedValue:ae,colorVariables:N,matchingVariable:Se,onChange:He=>Ie($.property,He),accentColor:l,modified:se,panelContentRef:c,isDropdownOpen:w===$.property,onDropdownChange:He=>L(He?$.property:null)})}case"number":{if(!!Xr[$.property])return me(io,{modified:se,children:me(Un,{property:$.property,value:oe,onChange:He=>Ie($.property,He),isModified:se,min:$.min,max:$.max,step:$.step||1,style:h(f({},ge),{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:Se}=xo(oe);return me(io,{modified:se,children:me("input",{type:"number",value:Se,min:$.min,max:$.max,step:$.step||1,onChange:He=>Ie($.property,He.target.value),style:ge})})}case"select":return me(io,{modified:se,children:Tt("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[me("select",{value:oe,onChange:ae=>Ie($.property,ae.target.value),style:h(f({},ge),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(ke=$.options)==null?void 0:ke.map(ae=>me("option",{value:ae,children:ae},ae))}),me("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:me(ds,{size:12})})]})});case"spacing":return me(io,{modified:se,children:me("input",{type:"text",value:oe,onChange:ae=>Ie($.property,ae.target.value),placeholder:"e.g., 10px or 10px 20px",style:ge})});case"backdrop-filter":return me(la,{value:oe,onChange:ae=>Ie($.property,ae),accentColor:l,modified:se,panelContentRef:c});default:return me(io,{modified:se,children:me("input",{type:"text",value:oe,onChange:ae=>Ie($.property,ae.target.value),style:ge})})}},Re=(tt=ye==null?void 0:ye.changes.length)!=null?tt:0,at=(de=ye==null?void 0:ye.captured)!=null?de:!1,yt=h(f({position:"fixed",top:D.current.top,left:D.current.left,width:280,maxHeight:D.current.maxHeight,backgroundColor:"rgba(255, 255, 255, 0.85)",backdropFilter:"blur(32px)",WebkitBackdropFilter:"blur(32px)"},bo),{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"}),z={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:X.current?"grabbing":"grab"},ve={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"},ce={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},Ce={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return me("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:D.current.top+M.current.y,left:D.current.left+M.current.x,zIndex:1e4,pointerEvents:"none"},children:Tt("div",{ref:d,"data-devtools":"panel",style:h(f({},yt),{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:[Tt("div",{style:z,onMouseDown:we,children:[Tt("div",{style:{display:"flex",alignItems:"center",gap:8,overflow:"hidden"},children:[me("span",{style:{fontWeight:600,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t.tagName}),Re>0&&me("span",{style:{backgroundColor:at?"#999999":l,color:"#fff",fontSize:9,padding:"1px 4px",borderRadius:2},children:Re})]}),Tt("div",{style:{display:"flex",gap:4},children:[Re>0&&me("button",{type:"button",onClick:te,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:me(Ju,{size:14})}),me("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:me(Vu,{size:14})})]})]}),Tt("div",{ref:c,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[me("div",{style:{opacity:w?.3:1,transition:"opacity 150ms ease"},children:me(ua,{element:e,getValue:le,getOriginalValue:ze,handleChange:Ie,isModified:je,onResetProperty:De,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:ve,activeDropdown:g,onDropdownChange:S,panelContentRef:c,accentColor:l,onFieldHover:s,preferredUnit:G,onUnitCycle:T})}),me("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:me(ma,{element:e,getValue:le,handleChange:Ie,isModified:je,onResetProperty:De,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:ve,accentColor:l,colorVariables:N,activeColorDropdown:w,onColorDropdownChange:L,panelContentRef:c,preferredUnit:G,onUnitCycle:T})}),ya.map(($,oe)=>{let se=oe===ya.length-1,be=w&&$.properties.some(ke=>ke.property===w);return Tt("div",{style:{borderBottom:se?"none":"1px solid rgba(0,0,0,0.08)",opacity:P&&!be?.3:1,transition:"opacity 150ms ease"},children:[me("div",{style:ve,children:me("span",{children:$.name})}),me("div",{style:{padding:"4px 0"},children:$.properties.map(ke=>{let ae=je(ke.property),Se=be&&ke.property!==w;return Tt("div",{style:h(f({},ce),{opacity:Se?.3:1,transition:"opacity 150ms ease"}),children:[me("span",{onClick:ae?()=>De(ke.property):void 0,title:ae?"Click to reset":void 0,style:h(f({},Ce),{color:ae?l:"#64748b",fontWeight:ae?600:400,cursor:ae?"pointer":"default"}),children:ke.label}),me("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:We(ke)})]},ke.property)})})]},$.name)}),Tt("div",{style:{opacity:P?.3:1,transition:"opacity 150ms ease"},children:[me("div",{style:ve,children:me("span",{children:"Raw CSS"})}),Tt("div",{style:{padding:"8px 12px"},children:[me("textarea",{value:B,onChange:$=>J($.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"}}),B.trim()&&me("button",{type:"button",onClick:Oe,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:l,color:"#fff",cursor:"pointer",opacity:B.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as Ku,useLayoutEffect as qu,useState as Zu}from"react";import{Fragment as np,jsx as Bo,jsxs as tp}from"react/jsx-runtime";var us=["flex-start","center","flex-end"],ps=["flex-start","center","flex-end"];function Qu(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function ep(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 xa(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 va({element:e,modifier:t,accentColor:n,refreshKey:r=0}){let[o,i]=Zu(null);if(Ku(()=>{if(!e){i(null);return}let w=()=>i(xa(e));return w(),window.addEventListener("scroll",w,{passive:!0}),window.addEventListener("resize",w,{passive:!0}),()=>{window.removeEventListener("scroll",w),window.removeEventListener("resize",w)}},[e]),qu(()=>{e&&i(xa(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 w=Qu(l.justifyContent);if(w){let L=us.indexOf(w);c==="horizontal"?(L>0&&p.push("left"),L<us.length-1&&p.push("right")):(L>0&&p.push("up"),L<us.length-1&&p.push("down"))}}else{let w=ep(l.alignItems);if(w){let L=ps.indexOf(w);u==="horizontal"?(L>0&&p.push("left"),L<ps.length-1&&p.push("right")):(L>0&&p.push("up"),L<ps.length-1&&p.push("down"))}}if(p.length===0)return null;let g=14,S=7;return Bo(np,{children:p.map(w=>{let L,P;switch(w){case"right":L=s.right+g,P=s.top+s.height/2;break;case"left":L=s.left-g,P=s.top+s.height/2;break;case"down":L=s.left+s.width/2,P=s.bottom+g;break;case"up":L=s.left+s.width/2,P=s.top-g;break}let G=w==="right"?0:w==="left"?180:w==="down"?90:-90,k={position:"fixed",left:L-S,top:P-S,width:S*2,height:S*2,pointerEvents:"none",zIndex:9997};return Bo("div",{"data-devtools":"swipe-hint",style:k,children:Bo("svg",{width:S*2,height:S*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:tp("g",{transform:`rotate(${G})`,children:[Bo("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),Bo("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),Bo("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),Bo("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},w)})})}import{useEffect as op,useLayoutEffect as rp,useState as ip}from"react";import{jsx as fs,jsxs as gs}from"react/jsx-runtime";function sp(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 Sa({element:e,fontSize:t,lineHeight:n,accentColor:r,hoveredProperty:o,draggingProperty:i,cursorViewport:s}){let[l,a]=ip(null);if(op(()=>{if(!e){a(null);return}let P=()=>{a(Xo(e))};return P(),window.addEventListener("scroll",P,{passive:!0}),window.addEventListener("resize",P,{passive:!0}),()=>{window.removeEventListener("scroll",P),window.removeEventListener("resize",P)}},[e]),rp(()=>{e&&a(Xo(e))},[e,t,n]),!l)return null;let d=l.width,c=l.height,u=sp(r,.2),p=i!=null?i:o,g=8,S=2,w={position:"fixed",top:l.top,left:l.left,width:d,height:c,pointerEvents:"none",zIndex:9996,overflow:"visible"},L=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:w,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-S/2,y:c/2-g/2,width:S,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-S/2,width:g,height:S,fill:r,stroke:"#ffffff",strokeWidth:p==="line-height"?4:2,paintOrder:"stroke"})]}),s&&p&&(()=>{let P=p==="font-size"?"Aa":"Lh",G=L(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 or,jsx as lt,jsxs as nr}from"react/jsx-runtime";var wa=8,ms=[0,1,2,4,8,12,16,20,24,28,32],hs="devtools-active-text";function Ca(e,t,n=0,r,o){let i=e.left+window.scrollX+4,s=t==="top-left"?e.top+window.scrollY-$n-n*$n+4:e.bottom+window.scrollY+4-1+n*$n,l=window.scrollY+4,a=window.scrollY+window.innerHeight-$n-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-$n-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 Ea({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:S,modelSpacingTokenHover:w,highlightedAnnotationIds:L,focusedThreadAnnotationId:P,externalCanvasRef:G,toolbarRef:k}){var Hs,Fs,_s,zs,$s,Ws,Ys,js,Js;let{canvasRef:T,redrawAll:b,resizeCanvas:B}=kl(),J=Zt(m=>{T.current=m,G&&(G.current=m)},[G,T]),N=Wt(!1);bn(()=>{let m=T.current;if(!m)return;let y=()=>{N.current&&(N.current=!1,m.style.pointerEvents="")},K=I=>{I.button===0&&N.current&&y()};return window.addEventListener("mousedown",K),()=>window.removeEventListener("mousedown",K)},[T]);let[D,F]=pt(!1),[v,M]=pt(()=>{if(typeof window=="undefined")return null;try{let m=localStorage.getItem(hs);return m?JSON.parse(m):null}catch(m){return null}}),[X,pe]=pt(null),[we,ye]=pt(null),[le,ze]=pt(null),Ie=Wt(null),te=Wt(null),De=Wt({x:0,y:0}),Oe=Wt([]),je=Wt(0),[We,Re]=pt(null),[at,yt]=pt(new Map),z=Wt(0),ve=Wt(null),[ce,Ce]=pt(null),[tt,de]=pt(null),[$,oe]=pt(null),[se,be]=pt(null),ge=Wt({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,ae]=pt(null),[Se,He]=pt(null),[Ft,Gt]=pt(null),[it,Qt]=pt(null),sn=Wt({x:0,y:0}),[Lt,_t]=pt({x:0,y:0}),Ct=Wt({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}),[Mt,gn]=pt(null),[zt,An]=pt(null),[ft,Q]=pt(null),[Ne,nt]=pt(!1),[Hn,Vt]=pt(0),[wn,xn]=pt(null),vt=Wt({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}),[mn,en]=pt(null),[jt,In]=pt(null),[It,ln]=pt(null),Yn=Wt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[Ut,qn]=pt(null),[Cn,no]=pt(null),[rt,H]=pt(null),q=Tl(),ne=Wt(i);ne.current=i;let Pe=Zt(m=>{let y=ne.current;if(!y||y.size===0)return!1;for(let K of y.keys())try{if(m.matches(K))return!0}catch(I){}return!1},[]),he=Wt(e);he.current=e;let Ue=Wt(v);Ue.current=v;let Xe=Wt([]),Le=Wt(n);Le.current=n;let[qe,At]=pt(null),Bt=e.selectedAnnotationIds;Xe.current=Bt;let an=Zt((m,y=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:m,addToSelection:y}})},[t]),C=Zt(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[A,ee]=pt(null),[ie,Te]=pt({x:window.scrollX,y:window.scrollY});bn(()=>(B(),window.addEventListener("resize",B),()=>window.removeEventListener("resize",B)),[B]),bn(()=>{let m=()=>{Te({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",m,{passive:!0}),()=>window.removeEventListener("scroll",m)},[]),bn(()=>{v?localStorage.setItem(hs,JSON.stringify(v)):localStorage.removeItem(hs)},[v]),Ml(v,M,X,e.annotations,t);let Fe=Wt(We);Fe.current=We,bn(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let m=y=>{if(!y.altKey||!Fe.current)return;y.preventDefault();let K=y.deltaY>0?-1:1;z.current=Math.max(0,z.current+K);let I=ve.current;if(I){let R=_r(I,z.current);Re(R)}};return window.addEventListener("wheel",m,{passive:!1}),()=>window.removeEventListener("wheel",m)},[e.activeTool,e.isAnnotating]),bn(()=>{e.activeTool!=="model"&&(Re(null),yt(new Map),z.current=0,ve.current=null)},[e.activeTool]),bn(()=>{var K;let m=(K=We==null?void 0:We.name)!=null?K:null,y=m&&(g!=null&&g.has(m))?m:null;p==null||p(y)},[We,g,p]);let[Je,st]=pt(null);bn(()=>{var K;if(!S){st(null);return}let m=Go(S.name),y=S.instanceIndex;st((K=m[y%m.length])!=null?K:null)},[S]);let[Et,St]=pt([]);bn(()=>{var m,y;if(!w){St([]);return}(y=(m=w.token)==null?void 0:m.bindings)!=null&&y.length?St(Di(w.token)):St(Bi(w.px))},[w]);let gt=Wt(null),Nt=Wt(null);gt.current=Mt,Nt.current=zt,bn(()=>{let m=["flex-start","center","flex-end"],y=["flex-start","center","flex-end"],I=null,R=!1,Y=null,re=null,W=(ue,Me)=>{let Qe=Ro(ue,Me);for(;Qe&&Qe!==document.documentElement;){let ht=window.getComputedStyle(Qe).display;if(ht==="flex"||ht==="inline-flex")return Qe;Qe=Qe.parentElement}return null},Z=ue=>{let Me=window.getComputedStyle(ue).flexDirection;return Me==="column"||Me==="column-reverse"?"vertical":"horizontal"},x=ue=>{let Me=ue.getAttribute("data-pm");return Me||(Me=Math.random().toString(36).substring(2,8),ue.setAttribute("data-pm",Me)),{selector:`[data-pm="${Me}"]`,durableSelector:Pn(ue)}},E=()=>{R=!0,I&&clearTimeout(I),I=setTimeout(()=>{R=!1,I=null},300)},V=(ue,Me,ot)=>{let Qe=Z(ue);if(Me===Qe){let Ye=window.getComputedStyle(ue).justifyContent,kt=Ye==="normal"||Ye==="flex-start"||Ye==="start"?"flex-start":Ye==="flex-end"||Ye==="end"?"flex-end":Ye==="center"?"center":null;if(!kt)return;let tn=m.indexOf(kt)+ot;if(tn<0||tn>=m.length)return;let oo=m[tn],{selector:wo,durableSelector:bi}=x(ue);Ve(ue,"justify-content",oo),t({type:"MODIFY_STYLES_BATCH",payload:{selector:wo,durableSelector:bi,element:Tn(ue),changes:[{property:"justify-content",original:Ye,modified:oo}]}})}else{let Ye=window.getComputedStyle(ue).flexDirection,kt=Qe==="horizontal"?"column":"row",{selector:jn,durableSelector:tn}=x(ue);Ve(ue,"flex-direction",kt),t({type:"MODIFY_STYLES_BATCH",payload:{selector:jn,durableSelector:tn,element:Tn(ue),changes:[{property:"flex-direction",original:Ye,modified:kt}]}})}Vt(ht=>ht+1)},O=(ue,Me,ot)=>{let ht=Z(ue)==="horizontal"?"vertical":"horizontal";if(Me!==ht)return;let kt=window.getComputedStyle(ue).alignItems,jn=kt==="normal"||kt==="stretch"||kt==="flex-start"||kt==="start"?"flex-start":kt==="flex-end"||kt==="end"?"flex-end":kt==="center"?"center":null;if(!jn)return;let oo=y.indexOf(jn)+ot;if(oo<0||oo>=y.length)return;let wo=y[oo],{selector:bi,durableSelector:wc}=x(ue);Ve(ue,"align-items",wo),t({type:"MODIFY_STYLES_BATCH",payload:{selector:bi,durableSelector:wc,element:Tn(ue),changes:[{property:"align-items",original:kt,modified:wo}]}}),Vt(Cc=>Cc+1)},_=20,j=null,U=null,fe=0,Be=(ue,Me,ot)=>{let Qe=W(Me,ot);xn(Qe?{modifier:ue,target:Qe}:null)},Ge=ue=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(ue.key==="Shift"&&!ue.altKey){let Me=sn.current;Be("shift",Me.x,Me.y)}else if(ue.key==="Alt"&&!ue.shiftKey){let Me=sn.current;Be("alt",Me.x,Me.y)}}},Ke=ue=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let Me=ue.shiftKey&&!ue.altKey,ot=ue.altKey&&!ue.shiftKey;if(!Me&&!ot||ue.buttons!==0){j=null,U=null,fe=0,Y=null,re=null,xn(null);return}if(Y===null&&(Y=ue.clientX,re=ue.clientY,Be(Me?"shift":"alt",ue.clientX,ue.clientY)),R)return;j===null&&(j=ue.clientX,U=ue.clientY,fe=0);let Qe=ue.clientX-j,ht=ue.clientY-U,Ye=Math.abs(Qe)>=Math.abs(ht)?Qe:ht;if(Math.abs(Ye)>3){let wo=Ye>0?1:-1;if(fe!==0&&wo!==fe){j=ue.clientX,U=ue.clientY,fe=0;return}fe=wo}if(Math.abs(Qe)<_&&Math.abs(ht)<_)return;let kt=W(Y,re);if(!kt)return;let jn=Math.abs(Qe)>=Math.abs(ht)?"horizontal":"vertical",oo=(jn==="horizontal"?Qe:ht)>0?1:-1;j=null,U=null,fe=0,Me?V(kt,jn,oo):O(kt,jn,oo),E()},Rt=ue=>{(ue.key==="Shift"||ue.key==="Alt")&&(Y=null,re=null,j=null,U=null,fe=0,xn(null))},Ze=()=>{xn(null),j=null,U=null,fe=0};return window.addEventListener("keydown",Ge),window.addEventListener("mousemove",Ke),window.addEventListener("mousedown",Ze),window.addEventListener("keyup",Rt),()=>{window.removeEventListener("keydown",Ge),window.removeEventListener("mousemove",Ke),window.removeEventListener("mousedown",Ze),window.removeEventListener("keyup",Rt),I&&clearTimeout(I)}},[e.activeTool,e.isAnnotating,t]),bn(()=>{let m=y=>{var Y,re,W,Z;if(y.key==="Escape"){if(Ue.current)return;if(e.activeTool==="model"&&at.size>0){y.preventDefault(),yt(new Map);return}if(Xe.current.length>0){y.preventDefault(),C();return}}if(y.key==="Enter"&&e.activeTool==="model"&&at.size>0&&c){y.preventDefault();let x=[...at.keys()].filter(E=>!(g!=null&&g.has(E)));x.length>0&&c(x),yt(new Map);return}if((y.metaKey||y.ctrlKey)&&y.key==="v"&&Oe.current.length>0&&!Ue.current){y.preventDefault(),je.current++;let x=je.current*20,V=((Y=Oe.current[0])==null?void 0:Y.groupId)?Math.random().toString(36).substring(2,9):void 0,O=Oe.current.map(j=>h(f({},j),{id:Math.random().toString(36).substring(2,9),groupId:j.groupId?V:void 0,timestamp:Date.now(),points:j.points.map(U=>({x:U.x+x,y:U.y+x}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:O}});let _=O.find(j=>j.type!=="text")||O[0];_&&an(_.id);return}let K=Xe.current;if(K.length===0||Ue.current)return;let I=(W=(re=y.composedPath)==null?void 0:re.call(y)[0])!=null?W:y.target,R=I==null?void 0:I.tagName;if(!(R==="INPUT"||R==="TEXTAREA"||I!=null&&I.isContentEditable)&&(y.key==="Delete"||y.key==="Backspace")){if(y.preventDefault(),d){let x=he.current.annotations;for(let E of K){let V=x.find(_=>_.id===E);if(!V)continue;let O=V.threadId||V.groupId&&((Z=x.find(_=>_.groupId===V.groupId&&_.threadId))==null?void 0:Z.threadId);O&&d(O)}}for(let x of K)t({type:"DELETE_ANNOTATION",payload:{id:x}});C()}};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[t,C,an,e.activeTool,at,g,c,d]);let ut=Wo(),bt=ni(()=>e.annotations.filter(m=>!m.pathname||m.pathname===ut),[e.annotations,ut]),hn=ni(()=>Ur(e.annotations),[e.annotations]),yn=ni(()=>{let m=new Map,y=new Set,K=1,I=[...e.annotations].sort((R,Y)=>R.timestamp-Y.timestamp);for(let R of I)if(!hn.has(R))if(R.groupId){if(!y.has(R.groupId)){y.add(R.groupId);let Y=e.annotations.filter(re=>re.groupId===R.groupId);for(let re of Y)m.set(re.id,K);K++}}else m.set(R.id,K),K++;return m},[e.annotations,hn]),ct=ni(()=>{if(Bt.length===0)return null;let m=new Map;for(let y of Bt){let K=e.annotations.find(R=>R.id===y);if(!K)continue;let I=K.groupId?e.annotations.filter(R=>R.groupId===K.groupId):[K];for(let R of I)if(R.linkedSelector&&!(i!=null&&i.has(R.linkedSelector))){let Y=R.color||e.activeColor;m.set(R.linkedSelector,Y)}}return m.size>0?m:null},[Bt,e.annotations,e.activeColor,i]);bn(()=>{let m=bt.filter(y=>!(hn.has(y)||v&&!v.isNew&&y.id===v.id));b(m,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,Bt,wa,ie.x,ie.y,yn,L)},[bt,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,b,v,Bt,ie,yn,hn,L]),bn(()=>{if(we){let m=Math.random().toString(36).substring(2,9);M({id:m,point:we.point,text:"",fontSize:12,isNew:!0,groupId:we.groupId}),ye(null)}},[we]),bn(()=>{le&&(M({id:Math.random().toString(36).substring(2,9),point:le.point,text:"",fontSize:12,isNew:!0,linkedSelector:le.linkedSelector,linkedAnchor:le.linkedAnchor,elements:le.elements}),ze(null))},[le]);let En=Wt(null),Fn=(Hs=v==null?void 0:v.id)!=null?Hs:null;bn(()=>{Fn&&Ie.current?requestAnimationFrame(()=>{var K;let m=Ie.current;if(!m||(m.focus(),te.current===Fn))return;te.current=Fn;let y=Ue.current;if(y){if(En.current!==null){let I=Math.min(En.current,m.value.length);m.setSelectionRange(I,I);return}if(!y.isNew&&y.clickPoint){let I=T.current;if(!I)return;let R=I.getContext("2d");if(!R)return;R.font=`${y.fontSize}px ${nn}`;let Y=y.fontSize*1.4,re=y.text.split(`
|
|
4
|
+
`),W=y.clickPoint.y-y.point.y,Z=Math.max(0,Math.min(re.length-1,Math.floor(W/Y))),x=y.clickPoint.x-y.point.x,E=re[Z]||"",V=0;for(let _=0;_<=E.length;_++){let j=R.measureText(E.substring(0,_)).width;if(j>x){let U=_>0?R.measureText(E.substring(0,_-1)).width:0;V=x-U<j-x?_-1:_;break}V=_}let O=V;for(let _=0;_<Z;_++)O+=(((K=re[_])==null?void 0:K.length)||0)+1;m.setSelectionRange(O,O)}}}):(te.current=null,En.current=null)},[Fn,T]);let $e=Zt(m=>{let y=T.current;if(!y)return{x:0,y:0};let K=y.getBoundingClientRect(),I,R;if("touches"in m&&m.touches[0])I=m.touches[0].clientX,R=m.touches[0].clientY;else if("clientX"in m)I=m.clientX,R=m.clientY;else return{x:0,y:0};return{x:I-K.left+window.scrollX,y:R-K.top+window.scrollY}},[T]),mt=Zt((m,y,K,I)=>{let R=K.x-y.x,Y=K.y-y.y,re=R*R+Y*Y;if(re===0)return Math.sqrt((m.x-y.x)**2+(m.y-y.y)**2)<=I;let W=Math.max(0,Math.min(1,((m.x-y.x)*R+(m.y-y.y)*Y)/re)),Z=y.x+W*R,x=y.y+W*Y;return Math.sqrt((m.x-Z)**2+(m.y-x)**2)<=I},[]),$t=Zt(m=>{for(let K=bt.length-1;K>=0;K--){let I=bt[K];if(!I||hn.has(I))continue;let R=(I.strokeWidth||3)+4;switch(I.type){case"text":{if(!I.points[0]||!I.text)continue;let Y=I.points[0],re=I.fontSize||12,W=T.current;if(W){let Z=W.getContext("2d");if(Z){Z.font=`${re}px ${nn}`;let x=I.text.replace(/\n/g," "),E=Y.x-ie.x,V=Yo(E),O=jo(Z,x,V),_=Z.measureText(O).width,j=re*1.4;if(m.x>=Y.x-4-4&&m.x<=Y.x+_+4+4&&m.y>=Y.y-4-4&&m.y<=Y.y+j+4+4)return I}}break}case"rectangle":{if(I.points.length<2)continue;let Y=I.points[0],re=I.points[I.points.length-1],W=Math.min(Y.x,re.x),Z=Math.max(Y.x,re.x),x=Math.min(Y.y,re.y),E=Math.max(Y.y,re.y),V=mt(m,{x:W,y:x},{x:Z,y:x},R),O=mt(m,{x:W,y:E},{x:Z,y:E},R),_=mt(m,{x:W,y:x},{x:W,y:E},R),j=mt(m,{x:Z,y:x},{x:Z,y:E},R);if(V||O||_||j)return I;break}case"circle":{if(I.points.length<2)continue;let Y=I.points[0],re=I.points[I.points.length-1],W=(Y.x+re.x)/2,Z=(Y.y+re.y)/2,x=Math.abs(re.x-Y.x)/2,E=Math.abs(re.y-Y.y)/2,V=m.x-W,O=m.y-Z,_=Math.sqrt((V/x)**2+(O/E)**2);if(Math.abs(_-1)*Math.max(x,E)<=R)return I;break}case"line":{if(I.points.length<2)continue;let Y=I.points[0],re=I.points[I.points.length-1];if(mt(m,Y,re,R))return I;break}case"freehand":{if(I.points.length<2)continue;for(let Y=0;Y<I.points.length-1;Y++){let re=I.points[Y],W=I.points[Y+1];if(mt(m,re,W,R))return I}break}}}return null},[bt,T,mt,hn,ie.x]),vn=Zt(m=>{let y=$t(m);return(y==null?void 0:y.type)==="text"?y:null},[$t]),fo=Zt(m=>{if(Bt.length===0)return null;let y=wa/2+4;for(let K of Bt){let I=e.annotations.find(R=>R.id===K);if(!(!I||I.points.length<2)){if(I.type==="line"){let R=I.points[0],Y=I.points[I.points.length-1];if(Math.sqrt((m.x-R.x)**2+(m.y-R.y)**2)<=y)return{handle:"start",annotationId:K};if(Math.sqrt((m.x-Y.x)**2+(m.y-Y.y)**2)<=y)return{handle:"end",annotationId:K};continue}if(I.type==="circle"){let R=I.points[0],Y=I.points[I.points.length-1],re=Math.min(R.x,Y.x),W=Math.max(R.x,Y.x),Z=Math.min(R.y,Y.y),x=Math.max(R.y,Y.y),E=(re+W)/2,V=(Z+x)/2,O=[{handle:"top",x:E,y:Z},{handle:"bottom",x:E,y:x},{handle:"left",x:re,y:V},{handle:"right",x:W,y:V}];for(let{handle:_,x:j,y:U}of O)if(Math.sqrt((m.x-j)**2+(m.y-U)**2)<=y)return{handle:_,annotationId:K};continue}if(I.type==="rectangle"||I.type==="freehand"){let R=I.points[0],Y=I.points[I.points.length-1],re,W,Z,x;I.type==="freehand"?(re=Math.min(...I.points.map(V=>V.x)),W=Math.max(...I.points.map(V=>V.x)),Z=Math.min(...I.points.map(V=>V.y)),x=Math.max(...I.points.map(V=>V.y))):(re=Math.min(R.x,Y.x),W=Math.max(R.x,Y.x),Z=Math.min(R.y,Y.y),x=Math.max(R.y,Y.y));let E=[{corner:"topLeft",x:re,y:Z},{corner:"topRight",x:W,y:Z},{corner:"bottomLeft",x:re,y:x},{corner:"bottomRight",x:W,y:x}];for(let{corner:V,x:O,y:_}of E)if(Math.sqrt((m.x-O)**2+(m.y-_)**2)<=y)return{handle:V,annotationId:K}}}}return null},[Bt,e.annotations]);bn(()=>{let m=y=>{if(De.current={x:y.clientX+window.scrollX,y:y.clientY+window.scrollY},!v){let K=vn(De.current);pe((K==null?void 0:K.id)||null)}};return window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m)},[v,vn]);let _n=Zt(()=>{var y;if(!v)return;let m=((y=v.images)==null?void 0:y.length)||0;if(v.text.trim()||m>0)if(v.isNew){let K=Dr();t({type:"ADD_TEXT",payload:f({point:v.point,text:v.text||(m>0?`[${m} image${m>1?"s":""}]`:""),fontSize:v.fontSize,id:K,groupId:v.groupId,linkedSelector:v.linkedSelector,linkedAnchor:v.linkedAnchor,elements:v.elements},m>0?{imageCount:m}:{})}),m>0&&v.images&&s&&s(K,v.images)}else t({type:"UPDATE_TEXT",payload:f({id:v.id,text:v.text||(m>0?`[${m} image${m>1?"s":""}]`:"")},m>0?{imageCount:m}:{})}),m>0&&v.images&&s&&s(v.id,v.images);else v.isNew||t({type:"DELETE_ANNOTATION",payload:{id:v.id}});M(null)},[v,t,s]),Xt=Zt(m=>{for(let y=0;y<ms.length-1;y++){let K=ms[y],I=ms[y+1];if(m<=(K+I)/2)return K;if(m<I)return I}return Math.round(m/8)*8},[]),hi=Zt((m,y,K,I)=>{let R=K.top+Math.max(I.top,4),Y=K.bottom-Math.max(I.bottom,4),re=K.left+Math.max(I.left,4),W=K.right-Math.max(I.right,4);if(m<K.left||m>K.right||y<K.top||y>K.bottom)return null;let Z=y<R,x=y>Y,E=m<re,V=m>W;return Z&&E?I.top>=I.left?"top":"left":Z&&V?I.top>=I.right?"top":"right":x&&E?I.bottom>=I.left?"bottom":"left":x&&V?I.bottom>=I.right?"bottom":"right":Z?"top":x?"bottom":E?"left":V?"right":null},[]),Ir=Zt(m=>{var Y,re;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=$e(m),K="shiftKey"in m&&m.shiftKey;if(e.activeTool==="inspector"){if("button"in m&&m.button===2)return;if(ce&&!Pe(ce)){let W=e.annotations.find(Ge=>{if(!Ge.linkedSelector||!Ge.threadId)return!1;try{return ce.matches(Ge.linkedSelector)}catch(Ke){return!1}});if(W!=null&&W.threadId&&a){a(W.threadId),requestAnimationFrame(()=>{var Rt;let Ge=document.querySelector("[data-popmelt-shadow-host]"),Ke=(Rt=Ge==null?void 0:Ge.shadowRoot)==null?void 0:Rt.querySelector("[data-popmelt-reply]");Ke==null||Ke.focus()});return}let Z=Tn(ce),x=Pn(ce),E=ce.getBoundingClientRect(),V=ce.getAttribute("data-pm");V||(V=Math.random().toString(36).substring(2,8),ce.setAttribute("data-pm",V));let O=`[data-pm="${V}"]`,_=e.styleModifications.some(Ge=>{try{return ce.matches(Ge.selector)}catch(Ke){return!1}}),j=e.annotations.filter(Ge=>{if(!Ge.linkedSelector)return!1;try{return ce.matches(Ge.linkedSelector)}catch(Ke){return!1}}).length,U=(_?1:0)+j,fe=E.top>=$n*(1+U)?"top-left":"bottom-left",Be=Ca(E,fe,U,k==null?void 0:k.current);ze({point:Be,linkedSelector:O,linkedAnchor:fe,elements:[h(f({},Z),{selector:x})]})}return}if(e.activeTool==="model"){if("button"in m&&m.button===2)return;if(We){let W=We.name;if(g!=null&&g.has(W)){u==null||u(W);return}"shiftKey"in m&&m.shiftKey?yt(x=>{let E=new Map(x);return E.has(W)?E.delete(W):E.set(W,We),E}):at.size===1&&at.has(W)?(c&&c([W]),yt(new Map)):yt(new Map([[W,We]]))}return}if(e.activeTool==="hand"&&Mt&&zt){let W=Mt,Z=W.getAttribute("data-pm");Z||(Z=Math.random().toString(36).substring(2,8),W.setAttribute("data-pm",Z));let x=Pn(W),E=`[data-pm="${Z}"]`,V=Tn(W),O=gr(W),_=y.x-window.scrollX,j=y.y-window.scrollY,U=Ne,fe=window.getComputedStyle(W).justifyContent,Be=0;if(U){let Ke=Lo(W).find(Rt=>Rt.axis===zt);Be=Ke?zt==="column"?Ke.w:Ke.h:0}Ve(W,"transition","none"),Ct.current={isDragging:!0,hasMoved:!1,axis:zt,startX:_,startY:j,originalRow:U?Be:O.row,originalColumn:U?Be:O.column,element:W,elementInfo:h(f({},V),{selector:E}),selector:E,durableSelector:x,isAuto:U,originalJustifyContent:fe,visualGap:Be},Q({axis:zt,row:U?Be:O.row,column:U?Be:O.column});return}if(e.activeTool==="hand"&&Ut&&Cn){let W=Ut,Z=W.getAttribute("data-pm");Z||(Z=Math.random().toString(36).substring(2,8),W.setAttribute("data-pm",Z));let x=`[data-pm="${Z}"]`,E=Tn(W),{fontSize:V,lineHeight:O}=mr(W),_=V>0?O/V:1.2,j=y.x-window.scrollX,U=y.y-window.scrollY;Ve(W,"transition","none");let fe=Pn(W);Yn.current={isDragging:!0,property:Cn,startX:j,startY:U,originalFontSize:V,originalLineHeight:O,originalRatio:_,element:W,elementInfo:h(f({},E),{selector:x}),selector:x,durableSelector:fe},H({property:Cn,fontSize:V,lineHeight:O});return}if(e.activeTool==="hand"&&mn&&jt){let W=mn,Z=W.getAttribute("data-pm");Z||(Z=Math.random().toString(36).substring(2,8),W.setAttribute("data-pm",Z));let x=`[data-pm="${Z}"]`,E=Pn(W),V=Tn(W),O=Ao(W),_=W.getBoundingClientRect(),j=Math.floor(_.height/2),U=y.y-window.scrollY;Ve(W,"transition","none"),vt.current={isDragging:!0,corner:jt,startY:U,original:O,maxRadius:j,element:W,elementInfo:h(f({},V),{selector:x}),selector:x,durableSelector:E},ln({corner:jt,radius:f({},O)});return}if(e.activeTool==="hand"&&ke&&Se){let W=ke,Z=W.getAttribute("data-pm");Z||(Z=Math.random().toString(36).substring(2,8),W.setAttribute("data-pm",Z));let x=`[data-pm="${Z}"]`,E=Pn(W),V=Tn(W),O=Uo(W),_=y.x-window.scrollX,j=y.y-window.scrollY;Ve(W,"transition","none"),ge.current={isDragging:!0,side:Se,startX:_,startY:j,original:O,element:W,elementInfo:h(f({},V),{selector:x}),selector:x,durableSelector:E},Qt({side:Se,padding:f({},O)});return}let I=fo(y);if(I){let W=e.annotations.find(Z=>Z.id===I.annotationId);if(W&&W.type!=="text"&&((Y=W.status)!=null?Y:"pending")==="pending"){ee({annotationId:I.annotationId,handle:I.handle,startPoint:y,originalPoints:[...W.points],hasMoved:!1});return}}let R=$t(y);if(R&&R.points[0]){if(v&&_n(),R.type!=="text"?(an(R.id,K),R.color&&t({type:"SET_COLOR",payload:R.color})):K||C(),a){let W=R.threadId||(R.groupId?(re=e.annotations.find(Z=>Z.groupId===R.groupId&&Z.threadId))==null?void 0:re.threadId:void 0);W&&a(W)}At({annotation:R,startPoint:y,hasMoved:!1});return}if(K||C(),e.activeTool==="text"){v&&_n();let W=Math.random().toString(36).substring(2,9);M({id:W,point:y,text:"",fontSize:12,isNew:!0});return}F(!0),t({type:"START_PATH",payload:y})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,v,Bt,ce,ke,Se,mn,jt,Mt,zt,Ne,Ut,Cn,We,at,g,c,u,a,$e,$t,fo,t,an,C,_n]),ar=Zt(m=>{var K,I;let y=$e(m);if(e.activeTool==="inspector"&&e.isAnnotating){let R=y.x-window.scrollX,Y=y.y-window.scrollY,re=Ro(R,Y),W=re&&Pe(re)?null:re;W!==ce&&(Ce(W),de(W?Tn(W):null));return}if(e.activeTool==="model"&&e.isAnnotating){let R=y.x-window.scrollX,Y=y.y-window.scrollY,re=Ro(R,Y);if(re!==ve.current&&(ve.current=re,z.current=0),re){let W=_r(re,z.current);Re(W)}else Re(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let R=y.x-window.scrollX,Y=y.y-window.scrollY;sn.current={x:R,y:Y},_t({x:R,y:Y});let re=q.current.cmd,W=q.current.shift;if(Ct.current.isDragging){let x=Ct.current,E=x.element;if(!E)return;if(!x.hasMoved){let j=Math.abs(R-x.startX),U=Math.abs(Y-x.startY);if(j<=2&&U<=2)return;x.hasMoved=!0,x.isAuto&&(Ve(E,"justify-content","normal"),Ve(E,"row-gap",`${x.visualGap}px`),Ve(E,"column-gap",`${x.visualGap}px`),nt(!1))}let V=x.axis,O=x.originalRow,_=x.originalColumn;if(V==="column"){let j=R-x.startX;_=x.originalColumn+j,re||(O=x.originalRow+j)}else{let j=Y-x.startY;O=x.originalRow+j,re||(_=x.originalColumn+j)}O=Math.max(0,O),_=Math.max(0,_),W&&(O=Xt(O),_=Xt(_)),O=Math.round(O),_=Math.round(_),Ve(E,"row-gap",`${O}px`),Ve(E,"column-gap",`${_}px`),Q({axis:V,row:O,column:_});return}if(vt.current.isDragging){let x=vt.current,E=x.element;if(!E)return;let V=Y-x.startY,O=x.corner,_=x.original,j=f({},_);if(re){let U=_[O]+V;U=Math.max(0,Math.min(x.maxRadius,U)),W&&(U=Xt(U)),U=Math.round(U),j[O]=U}else{let U=_[O]+V;U=Math.max(0,Math.min(x.maxRadius,U)),W&&(U=Xt(U)),U=Math.round(U),j={"top-left":U,"top-right":U,"bottom-right":U,"bottom-left":U}}Ve(E,"border-top-left-radius",`${j["top-left"]}px`),Ve(E,"border-top-right-radius",`${j["top-right"]}px`),Ve(E,"border-bottom-right-radius",`${j["bottom-right"]}px`),Ve(E,"border-bottom-left-radius",`${j["bottom-left"]}px`),ln({corner:O,radius:j});return}if(Yn.current.isDragging){let x=Yn.current,E=x.element;if(!E)return;let V=x.property,O=x.originalFontSize,_=x.originalLineHeight,j=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(V==="font-size"){let fe=R-x.startX;O=x.originalFontSize+fe,O=Math.max(1,O)}else{let fe=Y-x.startY;_=x.originalLineHeight+fe,_=Math.max(O,_)}if(W)if(V==="font-size"){let fe=j[0],Be=Math.abs(O-fe);for(let Ge of j){let Ke=Math.abs(O-Ge);Ke<Be&&(fe=Ge,Be=Ke)}O=fe}else{let fe=O>0?_/O:1.2,Be=Math.round(fe*2)/2;_=O*Math.max(1,Be)}O=Math.round(O),_=Math.round(_*10)/10,Ve(E,"font-size",`${O}px`);let U=O>0?Math.round(_/O*1e3)/1e3:1.2;Ve(E,"line-height",`${U}`),H({property:V,fontSize:O,lineHeight:_});return}if(ge.current.isDragging){let x=ge.current,E=x.element;if(!E)return;let V=x.side,O=x.original,_=O.top,j=O.right,U=O.bottom,fe=O.left;if(V==="top"){let Be=x.startY-Y;_=O.top+Be,re||(U=O.bottom+Be)}else if(V==="bottom"){let Be=Y-x.startY;U=O.bottom+Be,re||(_=O.top+Be)}else if(V==="left"){let Be=x.startX-R;fe=O.left+Be,re||(j=O.right+Be)}else if(V==="right"){let Be=R-x.startX;j=O.right+Be,re||(fe=O.left+Be)}_=Math.max(0,_),j=Math.max(0,j),U=Math.max(0,U),fe=Math.max(0,fe),W&&(_=Xt(_),j=Xt(j),U=Xt(U),fe=Xt(fe)),_=Math.round(_),j=Math.round(j),U=Math.round(U),fe=Math.round(fe),Ve(E,"padding",`${_}px ${j}px ${U}px ${fe}px`),Qt({side:V,padding:{top:_,right:j,bottom:U,left:fe}});return}let Z=Ro(R,Y);for(;Z&&Z.tagName==="A";)Z=Z.parentElement;{let E=[];Z&&E.push(Z),mn&&mn!==Z&&E.push(mn);let V=null,O=16,_=null;for(let j of E){let U=j.getBoundingClientRect(),fe=Ao(j),Be=[["top-left",U.left,U.top+fe["top-left"]],["top-right",U.right,U.top+fe["top-right"]],["bottom-right",U.right,U.bottom-fe["bottom-right"]],["bottom-left",U.left,U.bottom-fe["bottom-left"]]];for(let[Ge,Ke,Rt]of Be){let Ze=Math.hypot(R-Ke,Y-Rt);Ze<O&&(O=Ze,V=Ge,_=j)}}if(V&&_){en(_),In(V),ke&&ae(null),Se&&He(null),Mt&&gn(null),zt&&An(null),nt(!1),Ut&&qn(null),Cn&&no(null);return}}mn&&en(null),jt&&In(null);{let x=[];Z&&Wr(Z)&&x.push(Z);let E=(K=Z==null?void 0:Z.parentElement)!=null?K:null;for(;E&&E!==document.body&&x.length<3;)Wr(E)&&x.push(E),E=E.parentElement;for(let V of x){let _=Lo(V).find(j=>R>=j.x&&R<=j.x+j.w&&Y>=j.y&&Y<=j.y+j.h);if(_){gn(V),An(_.axis),nt(_i(V,_.axis)),ke&&ae(null),Se&&He(null),Ut&&qn(null),Cn&&no(null);return}}}Mt&&gn(null),zt&&An(null),nt(!1);{let E=[];Z&&E.push(Z),Ut&&Ut!==Z&&E.push(Ut);let V=null,O=1/0,_=null;for(let j of E){if(!zi(j))continue;let U=Xo(j);if(!U)continue;let fe=R>=U.left&&R<=U.right&&Y>=U.top&&Y<=U.bottom,Be=[["font-size",U.right,U.top+U.height/2],["line-height",U.left+U.width/2,U.bottom]];for(let[Ge,Ke,Rt]of Be){let Ze=Math.hypot(R-Ke,Y-Rt);(fe||Ze<12)&&Ze<O&&(O=Ze,V=Ge,_=j)}}V&&_?(qn(_),no(V)):(Ut&&qn(null),Cn&&no(null))}if(Z!==ke&&ae(Z),Z){let x=Uo(Z),E=Z.getBoundingClientRect(),V=hi(R,Y,E,x);He(V)}else He(null);return}if(A){let{handle:R,originalPoints:Y,hasMoved:re}=A,W=e.annotations.find(O=>O.id===A.annotationId);if(!W)return;let Z="metaKey"in m,x=Z&&(m.metaKey||m.ctrlKey),E=Z&&m.shiftKey,V;if(W.type==="line"){let O=Y[0],_=Y[Y.length-1];R==="start"?V=[y,_]:V=[O,y]}else if(W.type==="freehand"){let O=Math.min(...Y.map(Ye=>Ye.x)),_=Math.max(...Y.map(Ye=>Ye.x)),j=Math.min(...Y.map(Ye=>Ye.y)),U=Math.max(...Y.map(Ye=>Ye.y)),fe=(O+_)/2,Be=(j+U)/2,Ge=_-O||1,Ke=U-j||1,Rt=Ge/Ke,Ze=O,ue=_,Me=j,ot=U;switch(R){case"topLeft":Ze=y.x,Me=y.y;break;case"topRight":ue=y.x,Me=y.y;break;case"bottomLeft":Ze=y.x,ot=y.y;break;case"bottomRight":ue=y.x,ot=y.y;break}if(x)switch(R){case"topLeft":ue=_+(O-Ze),ot=U+(j-Me);break;case"topRight":Ze=O-(ue-_),ot=U+(j-Me);break;case"bottomLeft":ue=_+(O-Ze),Me=j-(ot-U);break;case"bottomRight":Ze=O-(ue-_),Me=j-(ot-U);break}if(E){let Ye=ue-Ze,kt=ot-Me;if(Math.abs(Ye/kt)>Rt){let tn=Math.abs(kt)*Rt*Math.sign(Ye);R==="topLeft"||R==="bottomLeft"?Ze=ue-tn:ue=Ze+tn}else{let tn=Math.abs(Ye)/Rt*Math.sign(kt);R==="topLeft"||R==="topRight"?Me=ot-tn:ot=Me+tn}}let Qe=ue-Ze||1,ht=ot-Me||1;V=Y.map(Ye=>({x:Ze+(Ye.x-O)/Ge*Qe,y:Me+(Ye.y-j)/Ke*ht}))}else if(W.type==="circle"){let O=Y[0],_=Y[Y.length-1],j=Math.min(O.x,_.x),U=Math.max(O.x,_.x),fe=Math.min(O.y,_.y),Be=Math.max(O.y,_.y),Ge=(j+U)/2,Ke=(fe+Be)/2,Rt=U-j,Ze=Be-fe,ue=j,Me=U,ot=fe,Qe=Be;switch(R){case"top":if(ot=y.y,x&&(Qe=Ke+(Ke-y.y)),E){let Ye=(Qe-ot)*(Rt/Ze)/2;ue=Ge-Ye,Me=Ge+Ye}break;case"bottom":if(Qe=y.y,x&&(ot=Ke-(y.y-Ke)),E){let Ye=(Qe-ot)*(Rt/Ze)/2;ue=Ge-Ye,Me=Ge+Ye}break;case"left":if(ue=y.x,x&&(Me=Ge+(Ge-y.x)),E){let Ye=(Me-ue)*(Ze/Rt)/2;ot=Ke-Ye,Qe=Ke+Ye}break;case"right":if(Me=y.x,x&&(ue=Ge-(y.x-Ge)),E){let Ye=(Me-ue)*(Ze/Rt)/2;ot=Ke-Ye,Qe=Ke+Ye}break}V=[{x:ue,y:ot},{x:Me,y:Qe}]}else{let O=Y[0],_=Y[Y.length-1],j=Math.min(O.x,_.x),U=Math.max(O.x,_.x),fe=Math.min(O.y,_.y),Be=Math.max(O.y,_.y),Ge=(j+U)/2,Ke=(fe+Be)/2,Rt=U-j||1,Ze=Be-fe||1,ue=Rt/Ze,Me=j,ot=U,Qe=fe,ht=Be;switch(R){case"topLeft":Me=y.x,Qe=y.y;break;case"topRight":ot=y.x,Qe=y.y;break;case"bottomLeft":Me=y.x,ht=y.y;break;case"bottomRight":ot=y.x,ht=y.y;break}if(x)switch(R){case"topLeft":ot=U+(j-Me),ht=Be+(fe-Qe);break;case"topRight":Me=j-(ot-U),ht=Be+(fe-Qe);break;case"bottomLeft":ot=U+(j-Me),Qe=fe-(ht-Be);break;case"bottomRight":Me=j-(ot-U),Qe=fe-(ht-Be);break}if(E){let Ye=ot-Me,kt=ht-Qe;if(Math.abs(Ye/kt)>ue){let tn=Math.abs(kt)*ue*Math.sign(Ye);R==="topLeft"||R==="bottomLeft"?Me=ot-tn:ot=Me+tn}else{let tn=Math.abs(Ye)/ue*Math.sign(kt);R==="topLeft"||R==="topRight"?Qe=ht-tn:ht=Qe+tn}}V=[{x:Me,y:Qe},{x:ot,y:ht}]}t({type:"RESIZE_ANNOTATION",payload:{id:A.annotationId,points:V,saveUndo:!re}}),re||ee(h(f({},A),{hasMoved:!0}));return}if(qe&&((I=qe.annotation.status)!=null?I:"pending")==="pending"){let R=y.x-qe.startPoint.x,Y=y.y-qe.startPoint.y;if((Math.abs(R)>2||Math.abs(Y)>2)&&!qe.hasMoved)At(h(f({},qe),{hasMoved:!0,startPoint:y})),t({type:"MOVE_ANNOTATION",payload:{id:qe.annotation.id,delta:{x:R,y:Y},saveUndo:!0}});else if(qe.hasMoved){let W=y.x-qe.startPoint.x,Z=y.y-qe.startPoint.y;At(h(f({},qe),{startPoint:y})),t({type:"MOVE_ANNOTATION",payload:{id:qe.annotation.id,delta:{x:W,y:Z}}})}return}!D||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:y})},[D,e.isAnnotating,e.activeTool,qe,A,ce,ke,Se,mn,jt,Mt,zt,Ut,Cn,$e,t,Xt,hi]),yi=Zt(m=>{var I,R,Y,re,W,Z;if(Yn.current.isDragging){let x=Yn.current,E=x.element;if(E&&x.selector&&x.elementInfo&&rt){E instanceof HTMLElement&&(E.style.removeProperty("font-size"),E.style.removeProperty("line-height"),E.style.removeProperty("transition"));let V=[];if(x.originalFontSize!==rt.fontSize&&(Ve(E,"font-size",`${rt.fontSize}px`),V.push({property:"font-size",original:`${x.originalFontSize}px`,modified:`${rt.fontSize}px`})),x.originalLineHeight!==rt.lineHeight){let O=x.originalFontSize>0?Math.round(x.originalLineHeight/x.originalFontSize*1e3)/1e3:1.2,_=rt.fontSize>0?Math.round(rt.lineHeight/rt.fontSize*1e3)/1e3:1.2;Ve(E,"line-height",`${_}`),V.push({property:"line-height",original:`${O}`,modified:`${_}`})}V.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(I=x.durableSelector)!=null?I:void 0,element:x.elementInfo,changes:V}})}Yn.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},H(null);return}if(Ct.current.isDragging){let x=Ct.current,E=x.element,V="button"in m&&m.button===2;if(!x.hasMoved&&!V&&E&&x.selector&&x.elementInfo){E instanceof HTMLElement&&E.style.removeProperty("transition");let O=["space-between","space-around","stretch","normal"],_=x.originalJustifyContent||"normal",j=O.indexOf(_),U=O[(j+1)%O.length],fe=[];U==="normal"?(Ve(E,"justify-content","normal"),fe.push({property:"justify-content",original:x.originalJustifyContent,modified:"normal"})):U==="stretch"?(Ve(E,"justify-content",U),Ve(E,"row-gap","8px"),Ve(E,"column-gap","8px"),fe.push({property:"justify-content",original:x.originalJustifyContent||"normal",modified:U}),x.originalRow!==8&&fe.push({property:"row-gap",original:`${x.originalRow}px`,modified:"8px"}),x.originalColumn!==8&&fe.push({property:"column-gap",original:`${x.originalColumn}px`,modified:"8px"})):(E instanceof HTMLElement&&(E.style.removeProperty("row-gap"),E.style.removeProperty("column-gap")),Ve(E,"justify-content",U),fe.push({property:"justify-content",original:x.originalJustifyContent||"normal",modified:U}),x.originalRow>0&&fe.push({property:"row-gap",original:`${x.originalRow}px`,modified:"0px"}),x.originalColumn>0&&fe.push({property:"column-gap",original:`${x.originalColumn}px`,modified:"0px"})),fe.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(R=x.durableSelector)!=null?R:void 0,element:x.elementInfo,changes:fe}})}else if(x.hasMoved&&E&&x.selector&&x.elementInfo&&ft){E instanceof HTMLElement&&(E.style.removeProperty("row-gap"),E.style.removeProperty("column-gap"),E.style.removeProperty("transition"));let O=[];x.isAuto?(E instanceof HTMLElement&&E.style.removeProperty("justify-content"),Ve(E,"justify-content","normal"),Ve(E,"row-gap",`${ft.row}px`),Ve(E,"column-gap",`${ft.column}px`),O.push({property:"justify-content",original:x.originalJustifyContent,modified:"normal"}),O.push({property:"row-gap",original:"0px",modified:`${ft.row}px`}),O.push({property:"column-gap",original:"0px",modified:`${ft.column}px`})):(x.originalRow!==ft.row&&(Ve(E,"row-gap",`${ft.row}px`),O.push({property:"row-gap",original:`${x.originalRow}px`,modified:`${ft.row}px`})),x.originalColumn!==ft.column&&(Ve(E,"column-gap",`${ft.column}px`),O.push({property:"column-gap",original:`${x.originalColumn}px`,modified:`${ft.column}px`}))),O.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(Y=x.durableSelector)!=null?Y:void 0,element:x.elementInfo,changes:O}})}Ct.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},Q(null);return}if(vt.current.isDragging){let x=vt.current,E=x.element;if(E&&x.selector&&x.elementInfo&&It){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 V=["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"},_=[];for(let j of V)x.original[j]!==It.radius[j]&&(Ve(E,O[j],`${It.radius[j]}px`),_.push({property:O[j],original:`${x.original[j]}px`,modified:`${It.radius[j]}px`}));_.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(re=x.durableSelector)!=null?re:void 0,element:x.elementInfo,changes:_}})}vt.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},ln(null);return}if(ge.current.isDragging){let x=ge.current,E=x.element,V=x.selector,O=x.elementInfo;if(E&&V&&O&&it){let _=x.original,j=it.padding;E instanceof HTMLElement&&(E.style.removeProperty("padding"),E.style.removeProperty("transition"));let U=[],fe=[{prop:"padding-top",origVal:_.top,newVal:j.top},{prop:"padding-right",origVal:_.right,newVal:j.right},{prop:"padding-bottom",origVal:_.bottom,newVal:j.bottom},{prop:"padding-left",origVal:_.left,newVal:j.left}];for(let{prop:Be,origVal:Ge,newVal:Ke}of fe)Ge!==Ke&&(Ve(E,Be,`${Ke}px`),U.push({property:Be,original:`${Ge}px`,modified:`${Ke}px`}));U.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:V,durableSelector:(W=x.durableSelector)!=null?W:void 0,element:O,changes:U}})}ge.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},Qt(null);return}if(A){ee(null);return}if(qe){if(!qe.hasMoved&&qe.annotation.type==="text"&&((Z=qe.annotation.status)!=null?Z:"pending")==="pending"){let x=$e(m);M({id:qe.annotation.id,point:qe.annotation.points[0],text:qe.annotation.text||"",fontSize:qe.annotation.fontSize||12,isNew:!1,clickPoint:x,groupId:qe.annotation.groupId})}At(null);return}if(!D)return;let y=5;if(e.currentPath.length>=2){let x=e.currentPath[0],E=e.currentPath[e.currentPath.length-1],V=Math.abs(E.x-x.x),O=Math.abs(E.y-x.y);if((e.activeTool==="line"?Math.sqrt(V*V+O*O)<y:V<y&&O<y)&&["rectangle","circle","line"].includes(e.activeTool)){F(!1),t({type:"CANCEL_PATH"});return}}let K=Oi(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let x=e.currentPath[0],E=e.currentPath[e.currentPath.length-1],V=Math.min(x.x,E.x),O=Math.max(x.y,E.y),_=e.strokeWidth/2,j=Math.random().toString(36).substring(2,9);ye({point:{x:V-_+4,y:O+_+4},groupId:j}),F(!1),t({type:"FINISH_PATH",payload:{groupId:j,elements:K}});return}F(!1),t({type:"FINISH_PATH",payload:{elements:K}})},[D,qe,A,it,It,ft,rt,$e,t,e.activeTool,e.currentPath,e.strokeWidth]),fc=Zt(m=>{let y=m.target.value;En.current=m.target.selectionStart,M(K=>K&&h(f({},K),{text:y}))},[]),gc=Zt(m=>{m.key==="Escape"?M(null):m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),_n())},[_n]),mc=Zt(m=>{if(!v)return;let y=m.clipboardData.items,K=[];for(let I=0;I<y.length;I++){let R=y[I];if(R.type.startsWith("image/")){let Y=R.getAsFile();Y&&K.push(Y)}}K.length>0&&(m.preventDefault(),M(I=>I?h(f({},I),{images:[...I.images||[],...K]}):null))},[v]),hc=Zt(m=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){m.preventDefault();let K=ke||Mt||mn||Ut;if(K&&!Pe(K)){let I=Tn(K),R=Pn(K);t({type:"SELECT_ELEMENT",payload:{el:K,info:h(f({},I),{selector:R})}})}return}m.preventDefault();let y=T.current;y&&(N.current=!0,y.style.pointerEvents="none",setTimeout(()=>{N.current&&(N.current=!1,y.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,ke,Mt,mn,Ut,t,Pe,T]);bn(()=>{let m=bt.filter(re=>re.linkedSelector);if(m.length===0)return;let y=null,K=document.createElement("canvas").getContext("2d"),I=()=>{var W,Z,x;let re=[];for(let E of m){let V=document.querySelector(E.linkedSelector);if(!V&&((Z=(W=E.elements)==null?void 0:W[0])!=null&&Z.selector)&&E.linkedSelector.startsWith("[data-pm=")){try{V=document.querySelector(E.elements[0].selector)}catch(Ze){}if(V){let Ze=(x=E.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:x[1];Ze&&V.setAttribute("data-pm",Ze)}}if(!V)continue;let O=V.getBoundingClientRect(),_=e.styleModifications.some(Ze=>{try{return V.matches(Ze.selector)}catch(ue){return!1}}),j=m.filter(Ze=>Ze.id!==E.id&&Ze.timestamp<E.timestamp&&Ze.linkedSelector===E.linkedSelector).length,U=(_?1:0)+j,fe;if(E.text&&K){let Ze=E.fontSize||12;K.font=`${Ze}px ${nn}`,fe=Math.max(...E.text.split(`
|
|
5
|
+
`).map(ue=>K.measureText(ue).width))}let Be=O.top>=$n*(1+U)?"top-left":"bottom-left",Ge=Ca(O,Be,U,k==null?void 0:k.current,fe),Ke=E.points[0],Rt=Be!==E.linkedAnchor;Ke&&(Rt||Math.abs(Ge.x-Ke.x)>1||Math.abs(Ge.y-Ke.y)>1)&&re.push({id:E.id,point:Ge,linkedAnchor:Rt?Be:void 0})}re.length>0&&t({type:"UPDATE_LINKED_POSITIONS",payload:{updates:re}})},R=()=>{y&&cancelAnimationFrame(y),y=requestAnimationFrame(I)};I(),window.addEventListener("scroll",R,!0),window.addEventListener("resize",R,!0),window.addEventListener("load",R),document.fonts.ready.then(R);let Y=new MutationObserver(R);return Y.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",R,!0),window.removeEventListener("resize",R,!0),window.removeEventListener("load",R),Y.disconnect(),y&&cancelAnimationFrame(y)}},[bt,t]);let yc=()=>{var m,y,K;if(!e.isAnnotating)return"default";if(A){let{handle:I}=A;return I==="start"||I==="end"?"move":I==="top"||I==="bottom"?"ns-resize":I==="left"||I==="right"?"ew-resize":I==="topLeft"||I==="bottomRight"?"nwse-resize":"nesw-resize"}if(e.activeTool==="text")return"text";if(e.activeTool==="hand"){let I=(m=ft==null?void 0:ft.axis)!=null?m:zt;if(I==="row")return"ns-resize";if(I==="column")return"ew-resize";if(It||jt)return"ns-resize";let R=(y=rt==null?void 0:rt.property)!=null?y:Cn;if(R==="font-size")return"ew-resize";if(R==="line-height")return"ns-resize";let Y=(K=it==null?void 0:it.side)!=null?K:Se;return Y==="top"||Y==="bottom"?"ns-resize":Y==="left"||Y==="right"?"ew-resize":"default"}return"crosshair"},bc={position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9998,pointerEvents:e.isAnnotating?"auto":"none",visibility:e.isAnnotating?"visible":"hidden",cursor:yc()},cr=Zt(()=>{let m=T.current;if(!m||!v)return{width:100,height:12*1.4,isWrapped:!1};let y=m.getContext("2d");if(!y)return{width:100,height:v.fontSize*1.4,isWrapped:!1};y.font=`${v.fontSize}px ${nn}`;let I=y.measureText("Type here...").width,R=v.text.split(`
|
|
6
|
+
`),Y=R.length>0?Math.max(I,...R.map(E=>y.measureText(E||" ").width)):I,re=v.point.x-ie.x,W=Yo(re);if(Y>W){let E=wl(y,R,W),V=Math.min(W,Math.max(I,...E.map(_=>y.measureText(_).width))),O=Math.max(1,E.length)*v.fontSize*1.4;return{width:V,height:O,isWrapped:!0}}let x=Math.max(1,R.length)*v.fontSize*1.4;return{width:Y,height:x,isWrapped:!1}},[v,T,ie.x])(),xc=v?Math.max(1,v.text.split(`
|
|
7
|
+
`).length)*v.fontSize*1.4+8:0,Ds=cr.height+8,vc=cr.isWrapped?Ds-xc:0,Sc=v?{position:"fixed",left:v.point.x-4-ie.x,top:v.point.y-4-ie.y-vc,zIndex:9999,width:cr.width+8,height:Ds,padding:4,fontSize:v.fontSize,fontFamily:nn,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:cr.isWrapped?"pre-wrap":"pre",wordBreak:cr.isWrapped?"break-word":void 0}:{};return nr(or,{children:[lt("canvas",{ref:J,id:"devtools-canvas",style:bc,onMouseDown:Ir,onMouseMove:ar,onMouseUp:m=>yi(m),onMouseLeave:m=>{yi(m),Ce(null),de(null)},onTouchStart:Ir,onTouchMove:ar,onTouchEnd:m=>yi(m),onContextMenu:hc}),v&&nr(or,{children:[lt("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),lt("textarea",{id:"devtools-text-input",ref:Ie,value:v.text,onChange:fc,onKeyDown:gc,onPaste:mc,onBlur:_n,placeholder:"Type here...",style:Sc}),v.images&&v.images.length>0&&nr("div",{"data-devtools":!0,style:{position:"fixed",left:v.point.x-4-ie.x,top:v.point.y-4-ie.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:[v.images.length," image",v.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&<(ea,{styleModifications:e.styleModifications,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(bt.map(m=>m.groupId||m.id)).size,dispatch:t,inFlightSelectors:o,toolbarRef:k,onHoverSelector:be}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&<(na,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&<(Yl,{annotations:bt,supersededAnnotations:hn,inFlightIds:r,scrollX:ie.x,scrollY:ie.y,annotationGroupMap:yn,onViewThread:a,onSelectAnnotation:an,onHoverAnnotation:oe,canvasRef:T}),e.isAnnotating&&l&<(jl,{annotations:bt,supersededAnnotations:hn,scrollX:ie.x,scrollY:ie.y,onReply:l,annotationGroupMap:yn,canvasRef:T,onHoverAnnotation:oe}),e.isAnnotating&&i&&i.size>0&<(ji,{inFlightSelectorColors:i}),e.isAnnotating&&ct&<(ji,{inFlightSelectorColors:ct,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(ft?Ct.current.element:Mt)&<(Ki,{element:ft?Ct.current.element:Mt,gap:ft?{row:ft.row,column:ft.column}:gr(Mt),accentColor:e.activeColor,hoveredAxis:zt,draggingAxis:(Fs=ft==null?void 0:ft.axis)!=null?Fs:null,cursorViewport:Lt,isAutoGap:Ne,refreshKey:Hn}),e.activeTool==="hand"&&e.isAnnotating&&wn&<(va,{element:wn.target,modifier:wn.modifier,accentColor:e.activeColor,refreshKey:Hn}),e.activeTool==="hand"&&e.isAnnotating&&!wn&&(It?vt.current.element:mn)&<(Xl,{element:It?vt.current.element:mn,radius:(_s=It==null?void 0:It.radius)!=null?_s:Ao(mn),accentColor:e.activeColor,hoveredCorner:jt,draggingCorner:(zs=It==null?void 0:It.corner)!=null?zs:null,cursorViewport:Lt}),e.activeTool==="hand"&&e.isAnnotating&&!wn&&(rt?Yn.current.element:Ut)&<(Sa,{element:rt?Yn.current.element:Ut,fontSize:($s=rt==null?void 0:rt.fontSize)!=null?$s:mr(Ut).fontSize,lineHeight:(Ws=rt==null?void 0:rt.lineHeight)!=null?Ws:mr(Ut).lineHeight,accentColor:e.activeColor,hoveredProperty:Cn,draggingProperty:(Ys=rt==null?void 0:rt.property)!=null?Ys:null,cursorViewport:Lt}),e.activeTool==="hand"&&e.isAnnotating&&!wn&&(it?ge.current.element:ke)&<(ns,{element:it?ge.current.element:ke,padding:(js=it==null?void 0:it.padding)!=null?js:Uo(ke),accentColor:e.activeColor,hoveredSide:Se,draggingSide:(Js=it==null?void 0:it.side)!=null?Js:null,cursorViewport:Lt,refreshKey:rt?rt.fontSize+rt.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&<(or,{children:ce&&!e.inspectedElement&&(()=>{let m=(v==null?void 0:v.linkedSelector)||(le==null?void 0:le.linkedSelector);if(m)try{if(ce.matches(m))return null}catch(K){}let y=!!le||!!(v!=null&&v.linkedSelector)||bt.some(K=>{if(!K.linkedSelector)return!1;try{return ce.matches(K.linkedSelector)}catch(I){return!1}});return lt(Qn,{element:ce,isSelected:!1,elementInfo:tt,color:e.activeColor,hideTooltip:y})})()}),((v==null?void 0:v.linkedSelector)||(le==null?void 0:le.linkedSelector))&&(()=>{let m=(v==null?void 0:v.linkedSelector)||(le==null?void 0:le.linkedSelector);if(!m)return null;let y=null;try{y=document.querySelector(m)}catch(K){}return y?lt(Qn,{element:y,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 y=null;try{y=document.querySelector(m.linkedSelector)}catch(I){}if(!y)return null;let K=!!(r&&r.has(m.id));return lt(Qn,{element:y,isSelected:!K,color:m.color,hideTooltip:!0})})(),$&&(()=>{let m=e.annotations.find(R=>R.id===$);if(!(m!=null&&m.linkedSelector))return null;let y=null;try{y=document.querySelector(m.linkedSelector)}catch(R){}if(!y)return null;let K=m.groupId?e.annotations.filter(R=>R.groupId===m.groupId):[m],I=!!(r&&K.some(R=>r.has(R.id)));return lt(Qn,{element:y,isSelected:!I,color:m.color,hideTooltip:!0})})(),se&&(()=>{let m=null;try{m=document.querySelector(se)}catch(K){}if(!m)return null;let y=!!(o&&o.has(se));return lt(Qn,{element:m,isSelected:!y,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&at.size>0&&[...at.entries()].map(([m,y])=>lt(Qn,{element:y.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:y.rootElement.tagName.toLowerCase(),reactComponent:m},color:"#8b5cf6"},m)),e.activeTool==="model"&&e.isAnnotating&&Je&<(Qn,{element:Je.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:Je.rootElement.tagName.toLowerCase(),reactComponent:Je.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&Et.length>0&&Et.map((m,y)=>lt("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"?nr(or,{children:[lt("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),lt("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),lt("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),lt("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)})]}):nr(or,{children:[lt("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),lt("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),lt("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),lt("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&&We&<(Qn,{element:We.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:We.rootElement.tagName.toLowerCase(),reactComponent:We.name},color:g!=null&&g.has(We.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&nr(or,{children:[Ft&&Ft!=="padding"&&Ft!=="gap"&&(()=>{var W;let m=new Set(bt.map(Z=>Z.groupId||Z.id)).size,y=e.inspectedElement.info.selector,K=e.styleModifications.findIndex(Z=>Z.selector===y),I=K>=0?m+K+1:m+e.styleModifications.length+1,R=e.styleModifications.find(Z=>Z.selector===y),Y=(W=R==null?void 0:R.changes.length)!=null?W:0,re=!!(R!=null&&R.captured);return lt(Qn,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:re?"#999999":e.activeColor,annotationNumber:I,changeCount:Y})})(),Ft==="padding"&<(ns,{element:e.inspectedElement.el,padding:Uo(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),Ft==="gap"&<(Ki,{element:e.inspectedElement.el,gap:gr(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),lt(ba,{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:Gt,accentColor:e.activeColor,toolbarRef:k})]})]})}import{useCallback as Dn,useEffect as Mn,useMemo as Sr,useRef as Dt,useState as wr}from"react";import{Circle as tf,Component as nf,Hand as of,MessageCircle as rf,Pen as sf,Slash as lf,Square as af,Trash2 as cf,Type as df}from"lucide-react";import{useEffect as ka,useRef as Ta}from"react";function Ma(e,t,n,r,o){let i=Ta(0),s=Ta(t.annotations);ka(()=>{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]),ka(()=>{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 Ep,createElement as kp,useCallback as li,useEffect as vo,useRef as No,useState as Nn}from"react";import{Link2 as Tp}from"lucide-react";var lp={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},ap=/^#[0-9a-fA-F]{3,8}$/,cp=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,dp=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 Ra(e){let t=e.trim().toLowerCase();return ap.test(t)||cp.test(t)||dp.has(t)}var up=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function ys(e){return up.test(e.trim())}var Ia=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function pp(e){let t=e.trim().toLowerCase();return!!(Ia.has(t)||t.includes(",")&&t.split(",").some(n=>Ia.has(n.trim().replace(/['"]/g,""))))}function fp(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(Ra(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var gp=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,mp=/^--(font-family|font|ff|family)/i,hp=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,yp=/^--(space|gap|padding|margin|inset)/i,bp=/^--(radius|rounded|br|border-radius)/i,xp=/^--(shadow|elevation|drop-shadow)/i;function La(e,t){let n=e.toLowerCase();return xp.test(n)?"shadows":bp.test(n)?"radii":mp.test(n)?"fonts":hp.test(n)&&ys(t)?"typeScale":gp.test(n)||Ra(t)?"colors":pp(t)?"fonts":fp(t)?"shadows":yp.test(n)&&ys(t)||ys(t)?"spacing":"other"}function Aa(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){Aa(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&vp(o.style,t,n,r)}}}var Pa=/var\((--[^,)]+)/;function vp(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=La(i,s);r[l].push([i,s]);let d=e.getPropertyValue(i).trim().match(Pa);d&&(r.references[i]=d[1])}}function oi(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function ii(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 Oa(e){return e==="colors"?(t,n)=>{let r=ii(t[1]),o=ii(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let r=oi(t[1]),o=oi(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let r=oi(t[1]),o=oi(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:(t,n)=>t[0].localeCompare(n[0])}function Sp(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 Ba(e){let t=new Map;for(let o of e){let i=Sp(o[0]),s=t.get(i);s||(s=[],t.set(i,s)),s.push(o)}let n=Oa("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=ii(o[1][0][1]))!=null?a:0,l=(d=ii(i[1][0][1]))!=null?d:0;return s-l}),r}var wp=["colors","fonts","typeScale","spacing","radii","shadows","other"],ri=null,Cp=5e3;function Na(){if(typeof document=="undefined")return lp;if(ri&&Date.now()-ri.timestamp<Cp)return ri.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{Aa(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=La(i,s);e[l].push([i,s]);let d=r.getPropertyValue(i).trim().match(Pa);d&&(e.references[i]=d[1])}for(let o of wp)e[o].sort(Oa(o));return ri={tokens:e,timestamp:Date.now()},e}import{Fragment as rr,jsx as _e,jsxs as pn}from"react/jsx-runtime";var Da="popmelt-library-tab",Mp=/^#[0-9a-fA-F]{3,8}$/,Ip=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,Rp=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),Lp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Fa(e){let t=e.trim();return Mp.test(t)||Ip.test(t)||Rp.has(t.toLowerCase())}function Ap(e){return Lp.test(e.trim())}function Pp(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function _a(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(..._a(o,i))}else n.push([i,Array.isArray(o)?o.map(String).join(", "):String(o!=null?o:"")])}return n}function Op(e){return e.length===0?"generic":e.filter(([,r])=>Fa(r)).length>e.length/2?"colors":e.filter(([,r])=>Ap(r)).length>e.length/2?"spacing":"generic"}var Bp=h(f({position:"fixed",top:16,right:16,bottom:80,width:300,backgroundColor:"#eaeaea"},bo),{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"}),za={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},Np=h(f({},za),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function Dp({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(Tp,{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 $a({entries:e,references:t}){let n=[],r=[];for(let i of e)Fa(i[1])?n.push(i):r.push(i);let o=Ba(n);return pn(rr,{children:[o.map(([i,s])=>pn("div",{style:{marginBottom:4},children:[pn("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(Dp,{varName:l,value:a,reference:t[l]},l))})]},i)),r.length>0&&_e(ai,{entries:r})]})}var si=[0,1,2,4,8,12,16,20,24,28,32];function Hp(e){if(e<=32){let t=si[0],n=Math.abs(e-t);for(let r=1;r<si.length;r++){let o=Math.abs(e-si[r]);o<n&&(t=si[r],n=o)}return t}return Math.round(e/8)*8}function Fp({label:e,value:t,px:n,tokenPath:r,rawToken:o,onHover:i,onModify:s,onDelete:l}){let[a,d]=Nn(!1),[c,u]=Nn(null),p=No(!1),g=No(0),S=No(0),w=No([]),L=c!==null?c:n,P=c!==null?`${c}px`:t,G=c!==null,k=li(b=>{b.preventDefault(),p.current=!0,g.current=b.clientX,S.current=n;let B=zr(o);w.current=Ni(B);let J=D=>{let F=D.clientX-g.current,v=Math.max(0,Math.round(S.current+F));D.shiftKey&&(v=Hp(v));for(let M of w.current)M.element.style.setProperty(M.property,v+"px","important");u(v),i==null||i({name:e,px:v,token:B})},N=()=>{window.removeEventListener("mousemove",J),window.removeEventListener("mouseup",N),document.body.style.cursor="",p.current=!1,u(D=>{if(D!==null&&D!==n&&s){let F=zr(o),v=F.bindings&&F.bindings.length>0,M;if(v){let ye=Hi(F.bindings,S.current,D);M=JSON.stringify(h(f({},F),{value:`${D}px`,bindings:ye}))}else{let ye=Bl(w.current,S.current),le=Nl(w.current);if(ye.length>0){let ze=Hi(ye,S.current,D);M=JSON.stringify({value:`${D}px`,property:le,bindings:ze})}else M=`${D}px`}let X=typeof o=="string"?o:JSON.stringify(o),pe=w.current.map(ye=>({selector:Pn(ye.element),property:ye.property})),we=Hl(w.current,S.current,D);s({tokenPath:r,originalValue:X,currentValue:M,targets:pe,originalPx:S.current,currentPx:D},{id:Math.random().toString(36).substring(2,9),tokenPath:r,tokenName:e,originalPx:S.current,newPx:D,affectedElements:we})}return D})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",J),window.addEventListener("mouseup",N)},[n,e,r,o,i,s]),T=zr(o);return pn("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:L,token:T}))},onMouseLeave:()=>{p.current||(d(!1),i==null||i(null))},onMouseDown:k,children:[_e("span",{style:{color:a||G?"#FF0000":"#9ca3af"},children:e}),pn("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:b=>{b.stopPropagation();let B=typeof o=="string"?o:JSON.stringify(o);l(r,B)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:b=>{b.currentTarget.style.color="#FF0000"},onMouseLeave:b=>{b.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function _p({entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}){let s=[],l=[];for(let a of e){let d=Pp(a[1]);d!==null?s.push([a[0],a[1],d]):l.push(a)}return pn(rr,{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?zp(n,a):d,g=p&&typeof p=="object"&&"value"in p?p:d;return _e(Fp,{label:u,value:d,px:c,tokenPath:`tokens.${t}.${a}`,rawToken:g,onHover:r,onModify:o,onDelete:i},a)})}),l.length>0&&_e(ai,{entries:l})]})}function zp(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 ai({entries:e}){return _e("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>pn("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 $p({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:r,onModifyToken:o,onDeleteToken:i}){let s=Op(e);return s==="colors"?_e($a,{entries:e}):s==="spacing"?_e(_p,{entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}):_e(ai,{entries:e})}function Wp(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 Ep{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}},Wa="popmelt-principles-collapsed";function Yp(){try{let e=localStorage.getItem(Wa);if(e)return new Set(JSON.parse(e))}catch(e){}return new Set}function jp(e){try{localStorage.setItem(Wa,JSON.stringify([...e]))}catch(t){}}function Jp({id:e,label:t,count:n,children:r,collapsed:o,onToggle:i}){return pn("div",{style:{marginBottom:14},children:[pn("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 Gp={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},Ha=["colors","fonts","typeScale","spacing","radii","shadows","other"];function Vp(){let[e,t]=Nn(null),[n,r]=Nn(Yp);vo(()=>{t(Na())},[]);let o=li(s=>{r(l=>{let a=new Set(l);return a.has(s)?a.delete(s):a.add(s),jp(a),a})},[]);return e?Ha.some(s=>e[s].length>0)?_e(rr,{children:Ha.map(s=>{let l=e[s];return l.length===0?null:_e(Jp,{id:s,label:Gp[s],count:l.length,collapsed:n.has(s),onToggle:o,children:s==="colors"?_e($a,{entries:l,references:e.references}):_e(ai,{entries:l})},s)})}):_e("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function Up({rules:e}){return!e||e.length===0?_e("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."}):_e(rr,{children:e.map((t,n)=>pn("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[pn("span",{style:{color:"#9ca3af",flexShrink:0},children:[n+1,"."]}),_e("span",{children:t})]},n))})}function Xp({name:e,value:t,selected:n,highlighted:r,onRemove:o,onHover:i}){var D;let[s,l]=Nn(!1),[a,d]=Nn(!1),c=No(null),u=No(0),[p,g]=Nn(0),[S,w]=Nn(0),L=_a(t),P=(D=L.find(([F])=>F==="description"))==null?void 0:D[1];vo(()=>{if(!a&&!r){g(0),w(0),u.current=0;return}let F=Go(e);g(F.length)},[a,r,e]),vo(()=>{n&&c.current&&c.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let G=n||r||a,k=n?"139,92,246":"34,197,94",T=n?"#8b5cf6":"#22c55e",b=G?`rgba(${k},0.06)`:void 0,B=G?`inset 0 0 0 1.5px rgba(${k},0.35)`:void 0,J=r||a,N=li(()=>{let F=Go(e);if(F.length===0)return;let v=u.current%F.length;F[v].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),w(v),u.current=v+1,i==null||i({name:e,instanceIndex:v})},[e,i]);return pn("div",{ref:c,onClick:N,onMouseEnter:()=>{d(!0),i==null||i({name:e,instanceIndex:0})},onMouseLeave:()=>{d(!1),i==null||i(null)},style:{marginBottom:8,background:b,padding:6,boxShadow:B,cursor:"pointer"},children:[pn("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[pn("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:J?T:"transparent",color:J?"#fff":"#6b7280"},children:e}),J&&p>1&&pn("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[S+1,"/",p]})]}),o&&a&&_e("button",{type:"button",title:"Remove from model",onClick:F=>{F.stopPropagation(),o(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:F=>{F.currentTarget.style.color="#FF0000"},onMouseLeave:F=>{F.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),P&&_e("div",{style:{fontSize:11,color:J?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:P}),s?_e($p,{entries:L.filter(([F])=>F!=="description"),categoryKey:""}):_e(Kp,{name:e,onNotFound:()=>l(!0),entries:L})]})}function Kp({name:e,onNotFound:t}){let[n,r]=Nn(null),[o,i]=Nn(!1);return vo(()=>{let s=Wp(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:kp(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(rr,{children:l.map(([a,d])=>_e(Xp,{name:a,value:d,selected:t===a,highlighted:n===a,onRemove:r,onHover:o},a))})}function Ya({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]=Nn(void 0),[S,w]=Nn(!0),[L,P]=Nn(()=>{try{let N=localStorage.getItem(Da);if(N==="patterns"||N==="principles"||N==="rules")return N}catch(N){}return"patterns"});vo(()=>{Fo(e).then(N=>{g(N),w(!1)})},[e,t]),vo(()=>{try{localStorage.setItem(Da,L)}catch(N){}},[L]),vo(()=>{o&&(P("patterns"),Fo(e).then(N=>{N&&g(N)}))},[o,e]);let G=li(N=>{g(D=>{if(!(D!=null&&D.components))return D;let M=D.components,{[N]:F}=M,v=zn(M,[go(N)]);return h(f({},D),{components:v})}),u==null||u(N)},[u]),k=p==null?void 0:p.components,T=p==null?void 0:p.rules,b=k&&Object.keys(k).length>0,B=T&&T.length>0,J=No(null);return vo(()=>{let N=J.current;if(!N)return;let D=n,F=r;return D&&N.addEventListener("mouseenter",D),F&&N.addEventListener("mouseleave",F),()=>{D&&N.removeEventListener("mouseenter",D),F&&N.removeEventListener("mouseleave",F)}},[n,r]),pn("div",{ref:J,style:Bp,children:[pn("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(N=>_e("button",{type:"button",style:L===N?Np:za,onClick:()=>P(N),children:N.charAt(0).toUpperCase()+N.slice(1)},N))}),_e("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:L==="principles"?_e(Vp,{}):S?_e("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!p||!b&&!B?_e("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):pn(rr,{children:[L==="patterns"&&_e(qp,{components:k,selectedComponent:o,hoveredComponent:i,onRemove:G,onHover:s}),L==="rules"&&_e(Up,{rules:T})]})})]})}import{jsx as ir}from"react/jsx-runtime";var Zp="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",Qp="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 ir("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:ir("path",{d:Zp})})}function vs({size:e=16,style:t}){return ir("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:ir("path",{d:Qp})})}function Ss({provider:e,size:t=16,style:n}){return e==="codex"?ir(vs,{size:t,style:n}):ir(xs,{size:t,style:n})}var ci=[{id:"claude-opus-4-6",label:"Opus 4.6"},{id:"claude-sonnet-4-6",label:"Sonn 4.6"}],di=[{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 ef=[...ci,...di];function ws(e,t){if(!e)return t==="codex"?"Codex":"Claude Code";let n=ef.find(r=>r.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as Ja}from"react/jsx-runtime";var lo={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function So({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?lo.bgActive:"transparent",color:t?lo.iconActive:lo.iconDefault,opacity:s()};return Ja("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=lo.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 ja(){return Ja("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as Cr,jsx as Ee,jsxs as Pt}from"react/jsx-runtime";var Do=[{type:"rectangle",icon:af,label:"Rectangle",shortcut:"R"},{type:"circle",icon:tf,label:"Oval",shortcut:"O"},{type:"line",icon:lf,label:"Line",shortcut:"L"},{type:"freehand",icon:sf,label:"Pen",shortcut:"P"}],uf=new Set(Do.map(e=>e.type));function pf(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 ff(){let e=window.innerWidth-16,t=e-326,n=window.innerHeight-80;return{left:t,right:e,y:n}}var gf=[{type:"text",icon:df,label:"Text",shortcut:"T"}],Ga={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"}]}},gf={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)"},hs="devtools-toolbar-expanded",ys="devtools-annotations",bs="devtools-style-modifications",xs="devtools-active-tool",Ga="devtools-active-color",Va="devtools-stroke-width",Ua="devtools-inspected-element",vs="devtools-spacing-changes",mf={expanded:hs,annotations:ys,styleMods:bs,spacingChanges:vs,tool:xs,color:Ga,stroke:Va,inspected:Ua};function Ja({state:e,dispatch:t,onScreenshot:n,onSendToClaude:r,hasActiveJobs:o,activeJobColor:i,onCrosshairHover:s,onClear:l,provider:a="claude",onProviderChange:d,availableProviders:c,modelIndex:p=0,modelCount:u=2,modelLabel:g="Opus 4.6",onModelChange:E,onViewThread:w,isThreadPanelOpen:I,mcpStatus:A,onInstallMcp:U,mcpJustInstalled:B,bridgeUrl:y,isBridgeConnected:v,modelSelectedComponent:O,modelCanvasHoveredComponent:Z,onModelComponentHover:N,onSpacingTokenHover:R,onModifySpacingToken:$,onDeleteSpacingToken:C,modelRefreshKey:L,onModelComponentAdded:X,onModelComponentRemoved:ge,onMouseEnter:ve,toolbarRef:ye}){let[ae,ze]=br(()=>typeof window=="undefined"?!1:localStorage.getItem(hs)==="true"),[Me,ne]=br(0),He=Rt(0),Ne=Rt(0),Ve=Rt(e.isAnnotating),$e=Rt(!1),Ie=Rt(typeof window!="undefined"?localStorage.getItem(xs):null),st=Rt(typeof window!="undefined"?localStorage.getItem(Ga):null),ct=Rt(typeof window!="undefined"?localStorage.getItem(Va):null),[_,xe]=br(null),ce=Rt(!1),Se=Rt(null),Be=Rt(null),De=Rt(null),z=Rt({x:0,y:0}),re=Rt(null),se=Rt(null),be=Rt(null),pe=Tn(()=>{re.current=null,se.current=null,be.current&&(clearTimeout(be.current),be.current=null)},[]),ke=Tn(D=>{Be.current&&(clearTimeout(Be.current),Be.current=null),ce.current?(re.current=D,se.current=f({},z.current),be.current&&clearTimeout(be.current),be.current=setTimeout(()=>{re.current&&(xe(re.current),pe())},300)):(Se.current&&clearTimeout(Se.current),Se.current=setTimeout(()=>{ce.current=!0,xe(D),Se.current=null},500))},[pe]),oe=Tn(()=>{pe(),Se.current&&(clearTimeout(Se.current),Se.current=null),Be.current=setTimeout(()=>{ce.current=!1,xe(null)},150)},[pe]);bn(()=>{let D=De.current;if(!D)return;let K=()=>{pe(),Be.current&&(clearTimeout(Be.current),Be.current=null)},te=()=>{Be.current=setTimeout(()=>{ce.current=!1,xe(null)},150)};return D.addEventListener("mouseenter",K),D.addEventListener("mouseleave",te),()=>{D.removeEventListener("mouseenter",K),D.removeEventListener("mouseleave",te)}},[_,pe]);let We=Tn(D=>{if(z.current={x:D.clientX,y:D.clientY},re.current&&se.current){let K=se.current,te=pf();uf(D.clientX,D.clientY,K.x,K.y,te.left,te.y,te.right,te.y)||(xe(re.current),pe())}},[pe]),Xe=yr(()=>{let D=(c!=null?c:[]).map(K=>K==="claude"?"Claude":K==="codex"?"Codex":K);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]);ka(ae,e,$e,!!o,mf),bn(()=>{let D=new URLSearchParams(window.location.search);if(!D.has("popmelt"))return;let K=document.createElement("style");K.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(K);let te=parseInt(D.get("popmelt")||"0",10)||0,Re=()=>{ze(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})};if(te>0){let he=setTimeout(Re,te);return()=>clearTimeout(he)}Re()},[]),bn(()=>{var K;if(localStorage.getItem(hs)==="true"&&!e.isAnnotating){if(ae||ze(!0),t({type:"SET_TOOL",payload:Ie.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),st.current&&t({type:"SET_COLOR",payload:st.current}),ct.current){let Le=parseFloat(ct.current);isNaN(Le)||t({type:"SET_STROKE_WIDTH",payload:Le})}let te=localStorage.getItem(ys);if(te)try{let Le=JSON.parse(te);if(Array.isArray(Le)&&Le.length>0){for(let S of Le)(S.status==="waiting_input"||S.status==="in_flight")&&(S.status=S.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:Le}})}}catch(Le){}let Re=localStorage.getItem(bs);if(Re)try{let Le=JSON.parse(Re);Array.isArray(Le)&&Le.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:Le}),Hr(Le))}catch(Le){}let he=localStorage.getItem(vs);if(he)try{let Le=JSON.parse(he);Array.isArray(Le)&&Le.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:Le})}catch(Le){}let Ue=localStorage.getItem(Ua);if(Ue)try{let{selector:Le,info:S}=JSON.parse(Ue);if(Le){let j=pn(Le);if(j){let ee=S||b(f({},yn(j)),{selector:Le});t({type:"SELECT_ELEMENT",payload:{el:j,info:ee}})}}}catch(Le){}let Je=sessionStorage.getItem("popmelt-pending-focus");if(Je){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:Le}=JSON.parse(Je);if(Le){let S=te?(K=JSON.parse(te))!=null?K:[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:Le}});let j=S.find(ee=>ee.id===Le);if(j){let de=(j.groupId?S.filter(we=>we.groupId===j.groupId):[j]).flatMap(we=>we.points);if(de.length>0){let we=Math.min(...de.map(et=>et.x)),le=Math.max(...de.map(et=>et.x)),ot=Math.min(...de.map(et=>et.y)),Pe=Math.max(...de.map(et=>et.y));window.scrollTo({left:(we+le)/2-window.innerWidth/2,top:(ot+Pe)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch(Le){}}}return $e.current=!0,()=>{$e.current=!1}},[]);let At=Rt(e.styleModifications);bn(()=>{let D=At.current,K=e.styleModifications;D!==K&&(Fr(D),Hr(K),At.current=K)},[e.styleModifications]),bn(()=>{let D=Ve.current;Ve.current=e.isAnnotating,D&&!e.isAnnotating&&ae&&ze(!1)},[e.isAnnotating,ae]);let Gt=Rt(ae);Gt.current=ae,bn(()=>{let D=te=>{if(te.key==="Meta"||te.key==="Control"){let Re=Date.now();if(Re-He.current<300){if(Ne.current++,Ne.current>=2){if(Gt.current)t({type:"SET_ANNOTATING",payload:!1}),ze(!1);else{let Je=localStorage.getItem(xs);t({type:"SET_TOOL",payload:Je||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),ze(!0)}Ne.current=0}}else Ne.current=1;He.current=Re}else Ne.current=0},K=te=>{te.key!=="Meta"&&te.key!=="Control"&&(Ne.current=0)};return window.addEventListener("keydown",D),window.addEventListener("keyup",K),()=>{window.removeEventListener("keydown",D),window.removeEventListener("keyup",K)}},[t]);let it=Tn(D=>{pe(),t({type:"SET_TOOL",payload:D}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),ce.current=!1,xe(null),Se.current&&(clearTimeout(Se.current),Se.current=null),Be.current&&(clearTimeout(Be.current),Be.current=null)},[t,e.isAnnotating,pe]),Vt=Tn(async()=>{window.focus(),await n()},[n]),Kt=Tn(async()=>{r&&await r()},[r]),St=Tn(()=>{t({type:"SET_ANNOTATING",payload:!1}),ze(!1)},[t]),Ot=Tn(()=>{Fr(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(D=>D.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(ys),localStorage.removeItem(bs),localStorage.removeItem(vs),Nt(null),l==null||l()},[t,e.styleModifications,l]),[bt,Et]=br(()=>{if(st.current){let D=st.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(D!=null&&D[1])return parseFloat(D[1])}return 29}),rn=Rt(null),zt=Rt(null),Mn=Rt(!1),lt=Tn(D=>{let K=D.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return K&&K[1]?parseFloat(K[1]):null},[]);bn(()=>{Mn.current=!0;let D=`oklch(0.628 0.258 ${bt})`;t({type:"SET_COLOR",payload:D}),requestAnimationFrame(()=>{Mn.current=!1})},[bt,t]),bn(()=>{if(Mn.current)return;let D=lt(e.activeColor);D!==null&&Math.abs(D-bt)>.5&&Et(D)},[e.activeColor,lt,bt]);let Q=e.annotations.length>0;bn(()=>{let D=zt.current;if(!D||!Q)return;let K=te=>{te.preventDefault(),te.stopPropagation();let Re=te.deltaY>0?-1:1,he=((bt+Re)%360+360)%360,Ue=`oklch(0.628 0.258 ${he})`;Et(he),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:Ue}})};return D.addEventListener("wheel",K,{passive:!1}),()=>D.removeEventListener("wheel",K)},[Q,e.selectedAnnotationIds,e.lastSelectedId,bt,t]);let Fe=Rt(!1),tt=Tn(()=>{Fe.current=!1,rn.current=setTimeout(()=>{Fe.current=!0,Et(29)},500)},[]),In=Tn(()=>{rn.current&&(clearTimeout(rn.current),rn.current=null)},[]);bn(()=>()=>{rn.current&&clearTimeout(rn.current),be.current&&clearTimeout(be.current)},[]);let $t=Do(),fn=yr(()=>e.annotations.filter(D=>!D.pathname||D.pathname===$t),[e.annotations,$t]),dn=yr(()=>Wr(e.annotations),[e.annotations]),gt=yr(()=>{let D=[],K=new Set,te=[...e.annotations].sort((Re,he)=>Re.timestamp-he.timestamp);for(let Re of te)if(!dn.has(Re))if(Re.groupId){if(!K.has(Re.groupId)){K.add(Re.groupId);let he=e.annotations.filter(Le=>Le.groupId===Re.groupId&&!dn.has(Le)),Ue=he.find(Le=>Le.type!=="text")||he[0],Je=Math.min(...he.map(Le=>Le.timestamp));D.push({id:Ue.id,pathname:Re.pathname,annotations:he,timestamp:Je})}}else D.push({id:Re.id,pathname:Re.pathname,annotations:[Re],timestamp:Re.timestamp});return D},[e.annotations,dn]),sn=yr(()=>gt.filter(D=>!D.pathname||D.pathname===$t),[gt,$t]),[Pt,Nt]=br(null),qt=gt.length+e.styleModifications.length;bn(()=>{(qt===0||Pt!==null&&Pt>=qt)&&Nt(null)},[qt,Pt]),bn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){Nt(null);return}if(e.selectedAnnotationIds.length>0){let D=e.selectedAnnotationIds[0],K=gt.findIndex(te=>te.id===D||te.annotations.some(Re=>Re.id===D));K>=0&&K!==Pt&&Nt(K)}},[e.selectedAnnotationIds,e.inspectedElement,gt]);let xt=Tn(()=>{var K;if(qt===0)return;let D;if(Pt===null?D=0:Pt+1>=qt?D=null:D=Pt+1,Nt(D),D===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(D<gt.length){let te=gt[D];if(!(!te.pathname||te.pathname===$t)){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 he=te.annotations.find(le=>le.type!=="text")||te.annotations[0];if(te.annotations.some(le=>le.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(he!=null&&he.type&&he.type!=="text"&&he.type!=="inspector"){t({type:"SET_TOOL",payload:he.type});let le=Mo.findIndex(ot=>ot.type===he.type);le>=0&&ne(le)}if(he!=null&&he.color){t({type:"SET_COLOR",payload:he.color});let le=lt(he.color);le!==null&&Et(le)}let Je=te.annotations.flatMap(le=>le.points);if(Je.length===0)return;let Le=Math.min(...Je.map(le=>le.x)),S=Math.max(...Je.map(le=>le.x)),j=Math.min(...Je.map(le=>le.y)),ee=Math.max(...Je.map(le=>le.y)),de=(Le+S)/2,we=(j+ee)/2;if(window.scrollTo({left:de-window.innerWidth/2,top:we-window.innerHeight/2,behavior:"smooth"}),I&&w){let le=(K=te.annotations.find(ot=>ot.threadId))==null?void 0:K.threadId;le&&w(le)}}else{let te=D-gt.length,Re=e.styleModifications[te];if(!Re)return;let he=pn(Re.selector);if(!he)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:he,info:Re.element}});let Ue=he.getBoundingClientRect(),Je=Ue.left+Ue.width/2+window.scrollX,Le=Ue.top+Ue.height/2+window.scrollY;window.scrollTo({left:Je-window.innerWidth/2,top:Le-window.innerHeight/2,behavior:"smooth"})}},[gt,$t,e.styleModifications,qt,Pt,t,lt,I,w]);bn(()=>{if(!ae)return;let D=K=>{var Ue;let te=document.activeElement;for(;(Ue=te==null?void 0:te.shadowRoot)!=null&&Ue.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((K.metaKey||K.ctrlKey)&&K.key==="Enter"){r&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(Je=>!Je.captured).length>0)&&(K.preventDefault(),Kt());return}if((K.metaKey||K.ctrlKey)&&(K.key==="c"||K.key==="C"||K.code==="KeyC")){(e.annotations.length>0||e.styleModifications.length>0)&&(K.preventDefault(),window.focus(),Vt());return}if((K.metaKey||K.ctrlKey)&&(K.key==="Backspace"||K.key==="Delete")){K.preventDefault(),Ot();return}if(K.metaKey||K.ctrlKey||K.altKey)return;let Re={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(K.key.toLowerCase()==="m"){K.preventDefault(),it("model");return}let he=Re[K.key.toLowerCase()];if(he){K.preventDefault();let Je=Mo.findIndex(Le=>Le.type===he);Je>=0&&ne(Je),it(he)}};return window.addEventListener("keydown",D),()=>window.removeEventListener("keydown",D)},[ae,it,Vt,Kt,r,Ot,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,_]);let Qn=b(f({},gf),{borderRadius:0,padding:ae?"0 8px":"0",width:ae?"auto":48,height:48,gap:0,justifyContent:ae?"flex-start":"center"}),Dt=`<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>`,jn=Ce("div",{style:f({position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(Dt)}")`,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"})}),gn=v===!1?"rgba(239, 68, 68, 0.4)":o&&i?i:Kn.iconActive,mn=Rt(null);bn(()=>{if(!ae)return;let D=mn.current;if(!D)return;let K=()=>{s==null||s(!0),ke("collapse")},te=()=>{s==null||s(!1),oe()};return D.addEventListener("mouseenter",K),D.addEventListener("mouseleave",te),()=>{D.removeEventListener("mouseenter",K),D.removeEventListener("mouseleave",te)}},[ae,o,s,ke,oe]);let ut=Rt(null);return bn(()=>{if(ae)return;let D=ut.current;if(!D)return;let K=D.querySelector("[data-popmelt-logo]"),te=()=>{D.style.opacity="1",!o&&K&&(K.style.fill="#000"),ve==null||ve()},Re=()=>{D.style.opacity=o?"1":"0.5",!o&&K&&(K.style.fill="none")};return D.addEventListener("mouseenter",te),D.addEventListener("mouseleave",Re),()=>{D.removeEventListener("mouseenter",te),D.removeEventListener("mouseleave",Re)}},[ae,o,ve]),ae?Mt(xr,{children:[Ce("style",{children:`
|
|
10
|
+
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},mf={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",Es="devtools-annotations",ks="devtools-style-modifications",Ts="devtools-active-tool",Va="devtools-active-color",Ua="devtools-stroke-width",Xa="devtools-inspected-element",Ms="devtools-spacing-changes",hf={expanded:Cs,annotations:Es,styleMods:ks,spacingChanges:Ms,tool:Ts,color:Va,stroke:Ua,inspected:Xa};function Ka({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:S,onViewThread:w,isThreadPanelOpen:L,mcpStatus:P,onInstallMcp:G,mcpJustInstalled:k,bridgeUrl:T,isBridgeConnected:b,modelSelectedComponent:B,modelCanvasHoveredComponent:J,onModelComponentHover:N,onSpacingTokenHover:D,onModifySpacingToken:F,onDeleteSpacingToken:v,modelRefreshKey:M,onModelComponentAdded:X,onModelComponentRemoved:pe,onMouseEnter:we,toolbarRef:ye}){let[le,ze]=wr(()=>typeof window=="undefined"?!1:localStorage.getItem(Cs)==="true"),[Ie,te]=wr(0),De=Dt(0),Oe=Dt(0),je=Dt(e.isAnnotating),We=Dt(!1),Re=Dt(typeof window!="undefined"?localStorage.getItem(Ts):null),at=Dt(typeof window!="undefined"?localStorage.getItem(Va):null),yt=Dt(typeof window!="undefined"?localStorage.getItem(Ua):null),[z,ve]=wr(null),ce=Dt(!1),Ce=Dt(null),tt=Dt(null),de=Dt(null),$=Dt({x:0,y:0}),oe=Dt(null),se=Dt(null),be=Dt(null),ge=Dn(()=>{oe.current=null,se.current=null,be.current&&(clearTimeout(be.current),be.current=null)},[]),ke=Dn(H=>{tt.current&&(clearTimeout(tt.current),tt.current=null),ce.current?(oe.current=H,se.current=f({},$.current),be.current&&clearTimeout(be.current),be.current=setTimeout(()=>{oe.current&&(ve(oe.current),ge())},300)):(Ce.current&&clearTimeout(Ce.current),Ce.current=setTimeout(()=>{ce.current=!0,ve(H),Ce.current=null},500))},[ge]),ae=Dn(()=>{ge(),Ce.current&&(clearTimeout(Ce.current),Ce.current=null),tt.current=setTimeout(()=>{ce.current=!1,ve(null)},150)},[ge]);Mn(()=>{let H=de.current;if(!H)return;let q=()=>{ge(),tt.current&&(clearTimeout(tt.current),tt.current=null)},ne=()=>{tt.current=setTimeout(()=>{ce.current=!1,ve(null)},150)};return H.addEventListener("mouseenter",q),H.addEventListener("mouseleave",ne),()=>{H.removeEventListener("mouseenter",q),H.removeEventListener("mouseleave",ne)}},[z,ge]);let Se=Dn(H=>{if($.current={x:H.clientX,y:H.clientY},oe.current&&se.current){let q=se.current,ne=ff();pf(H.clientX,H.clientY,q.x,q.y,ne.left,ne.y,ne.right,ne.y)||(ve(oe.current),ge())}},[ge]),He=Sr(()=>{let H=(c!=null?c:[]).map(q=>q==="claude"?"Claude":q==="codex"?"Codex":q);return{name:"AI Model",desc:H.length>1?`${H.join(" and ")} are available.`:H.length===1?`Connected to ${H[0]}.`:"No AI providers detected.",usage:H.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:H.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]);Ma(le,e,We,!!o,hf),Mn(()=>{let H=new URLSearchParams(window.location.search);if(!H.has("popmelt"))return;let q=document.createElement("style");q.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(q);let ne=parseInt(H.get("popmelt")||"0",10)||0,Pe=()=>{ze(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})};if(ne>0){let he=setTimeout(Pe,ne);return()=>clearTimeout(he)}Pe()},[]),Mn(()=>{var q;if(localStorage.getItem(Cs)==="true"&&!e.isAnnotating){if(le||ze(!0),t({type:"SET_TOOL",payload:Re.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),at.current&&t({type:"SET_COLOR",payload:at.current}),yt.current){let Le=parseFloat(yt.current);isNaN(Le)||t({type:"SET_STROKE_WIDTH",payload:Le})}let ne=localStorage.getItem(Es);if(ne)try{let Le=JSON.parse(ne);if(Array.isArray(Le)&&Le.length>0){for(let qe of Le)(qe.status==="waiting_input"||qe.status==="in_flight")&&(qe.status=qe.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:Le}})}}catch(Le){}let Pe=localStorage.getItem(ks);if(Pe)try{let Le=JSON.parse(Pe);Array.isArray(Le)&&Le.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:Le}),Yr(Le))}catch(Le){}let he=localStorage.getItem(Ms);if(he)try{let Le=JSON.parse(he);Array.isArray(Le)&&Le.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:Le})}catch(Le){}let Ue=localStorage.getItem(Xa);if(Ue)try{let{selector:Le,info:qe}=JSON.parse(Ue);if(Le){let At=Sn(Le);if(At){let Bt=qe||h(f({},Tn(At)),{selector:Le});t({type:"SELECT_ELEMENT",payload:{el:At,info:Bt}})}}}catch(Le){}let Xe=sessionStorage.getItem("popmelt-pending-focus");if(Xe){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:Le}=JSON.parse(Xe);if(Le){let qe=ne?(q=JSON.parse(ne))!=null?q:[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:Le}});let At=qe.find(Bt=>Bt.id===Le);if(At){let an=(At.groupId?qe.filter(C=>C.groupId===At.groupId):[At]).flatMap(C=>C.points);if(an.length>0){let C=Math.min(...an.map(Te=>Te.x)),A=Math.max(...an.map(Te=>Te.x)),ee=Math.min(...an.map(Te=>Te.y)),ie=Math.max(...an.map(Te=>Te.y));window.scrollTo({left:(C+A)/2-window.innerWidth/2,top:(ee+ie)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch(Le){}}}return We.current=!0,()=>{We.current=!1}},[]);let Ft=Dt(e.styleModifications);Mn(()=>{let H=Ft.current,q=e.styleModifications;H!==q&&(jr(H),Yr(q),Ft.current=q)},[e.styleModifications]),Mn(()=>{let H=je.current;je.current=e.isAnnotating,H&&!e.isAnnotating&&le&&ze(!1)},[e.isAnnotating,le]);let Gt=Dt(le);Gt.current=le,Mn(()=>{let H=ne=>{if(ne.key==="Meta"||ne.key==="Control"){let Pe=Date.now();if(Pe-De.current<300){if(Oe.current++,Oe.current>=2){if(Gt.current)t({type:"SET_ANNOTATING",payload:!1}),ze(!1);else{let Xe=localStorage.getItem(Ts);t({type:"SET_TOOL",payload:Xe||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),ze(!0)}Oe.current=0}}else Oe.current=1;De.current=Pe}else Oe.current=0},q=ne=>{ne.key!=="Meta"&&ne.key!=="Control"&&(Oe.current=0)};return window.addEventListener("keydown",H),window.addEventListener("keyup",q),()=>{window.removeEventListener("keydown",H),window.removeEventListener("keyup",q)}},[t]);let it=Dn(H=>{ge(),t({type:"SET_TOOL",payload:H}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),ce.current=!1,ve(null),Ce.current&&(clearTimeout(Ce.current),Ce.current=null),tt.current&&(clearTimeout(tt.current),tt.current=null)},[t,e.isAnnotating,ge]),Qt=Dn(async()=>{window.focus(),await n()},[n]),sn=Dn(async()=>{r&&await r()},[r]),Lt=Dn(()=>{t({type:"SET_ANNOTATING",payload:!1}),ze(!1)},[t]),_t=Dn(()=>{jr(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(H=>H.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(Es),localStorage.removeItem(ks),localStorage.removeItem(Ms),jt(null),l==null||l()},[t,e.styleModifications,l]),[Ct,Mt]=wr(()=>{if(at.current){let H=at.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(H!=null&&H[1])return parseFloat(H[1])}return 29}),gn=Dt(null),zt=Dt(null),An=Dt(!1),ft=Dn(H=>{let q=H.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return q&&q[1]?parseFloat(q[1]):null},[]);Mn(()=>{An.current=!0;let H=`oklch(0.628 0.258 ${Ct})`;t({type:"SET_COLOR",payload:H}),requestAnimationFrame(()=>{An.current=!1})},[Ct,t]),Mn(()=>{if(An.current)return;let H=ft(e.activeColor);H!==null&&Math.abs(H-Ct)>.5&&Mt(H)},[e.activeColor,ft,Ct]);let Q=e.annotations.length>0;Mn(()=>{let H=zt.current;if(!H||!Q)return;let q=ne=>{ne.preventDefault(),ne.stopPropagation();let Pe=ne.deltaY>0?-1:1,he=((Ct+Pe)%360+360)%360,Ue=`oklch(0.628 0.258 ${he})`;Mt(he),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:Ue}})};return H.addEventListener("wheel",q,{passive:!1}),()=>H.removeEventListener("wheel",q)},[Q,e.selectedAnnotationIds,e.lastSelectedId,Ct,t]);let Ne=Dt(!1),nt=Dn(()=>{Ne.current=!1,gn.current=setTimeout(()=>{Ne.current=!0,Mt(29)},500)},[]),Hn=Dn(()=>{gn.current&&(clearTimeout(gn.current),gn.current=null)},[]);Mn(()=>()=>{gn.current&&clearTimeout(gn.current),be.current&&clearTimeout(be.current)},[]);let Vt=Wo(),wn=Sr(()=>e.annotations.filter(H=>!H.pathname||H.pathname===Vt),[e.annotations,Vt]),xn=Sr(()=>Ur(e.annotations),[e.annotations]),vt=Sr(()=>{let H=[],q=new Set,ne=[...e.annotations].sort((Pe,he)=>Pe.timestamp-he.timestamp);for(let Pe of ne)if(!xn.has(Pe))if(Pe.groupId){if(!q.has(Pe.groupId)){q.add(Pe.groupId);let he=e.annotations.filter(Le=>Le.groupId===Pe.groupId&&!xn.has(Le)),Ue=he.find(Le=>Le.type!=="text")||he[0],Xe=Math.min(...he.map(Le=>Le.timestamp));H.push({id:Ue.id,pathname:Pe.pathname,annotations:he,timestamp:Xe})}}else H.push({id:Pe.id,pathname:Pe.pathname,annotations:[Pe],timestamp:Pe.timestamp});return H},[e.annotations,xn]),mn=Sr(()=>vt.filter(H=>!H.pathname||H.pathname===Vt),[vt,Vt]),[en,jt]=wr(null),In=vt.length+e.styleModifications.length;Mn(()=>{(In===0||en!==null&&en>=In)&&jt(null)},[In,en]),Mn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){jt(null);return}if(e.selectedAnnotationIds.length>0){let H=e.selectedAnnotationIds[0],q=vt.findIndex(ne=>ne.id===H||ne.annotations.some(Pe=>Pe.id===H));q>=0&&q!==en&&jt(q)}},[e.selectedAnnotationIds,e.inspectedElement,vt]);let It=Dn(()=>{var q;if(In===0)return;let H;if(en===null?H=0:en+1>=In?H=null:H=en+1,jt(H),H===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(H<vt.length){let ne=vt[H];if(!(!ne.pathname||ne.pathname===Vt)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:ne.id,pathname:ne.pathname})),window.location.href=ne.pathname;return}t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:ne.id}});let he=ne.annotations.find(A=>A.type!=="text")||ne.annotations[0];if(ne.annotations.some(A=>A.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(he!=null&&he.type&&he.type!=="text"&&he.type!=="inspector"){t({type:"SET_TOOL",payload:he.type});let A=Do.findIndex(ee=>ee.type===he.type);A>=0&&te(A)}if(he!=null&&he.color){t({type:"SET_COLOR",payload:he.color});let A=ft(he.color);A!==null&&Mt(A)}let Xe=ne.annotations.flatMap(A=>A.points);if(Xe.length===0)return;let Le=Math.min(...Xe.map(A=>A.x)),qe=Math.max(...Xe.map(A=>A.x)),At=Math.min(...Xe.map(A=>A.y)),Bt=Math.max(...Xe.map(A=>A.y)),an=(Le+qe)/2,C=(At+Bt)/2;if(window.scrollTo({left:an-window.innerWidth/2,top:C-window.innerHeight/2,behavior:"smooth"}),L&&w){let A=(q=ne.annotations.find(ee=>ee.threadId))==null?void 0:q.threadId;A&&w(A)}}else{let ne=H-vt.length,Pe=e.styleModifications[ne];if(!Pe)return;let he=Sn(Pe.selector);if(!he)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:he,info:Pe.element}});let Ue=he.getBoundingClientRect(),Xe=Ue.left+Ue.width/2+window.scrollX,Le=Ue.top+Ue.height/2+window.scrollY;window.scrollTo({left:Xe-window.innerWidth/2,top:Le-window.innerHeight/2,behavior:"smooth"})}},[vt,Vt,e.styleModifications,In,en,t,ft,L,w]);Mn(()=>{if(!le)return;let H=q=>{var Ue;let ne=document.activeElement;for(;(Ue=ne==null?void 0:ne.shadowRoot)!=null&&Ue.activeElement;)ne=ne.shadowRoot.activeElement;if((ne==null?void 0:ne.tagName)==="INPUT"||(ne==null?void 0:ne.tagName)==="TEXTAREA"||ne!=null&&ne.isContentEditable)return;if((q.metaKey||q.ctrlKey)&&q.key==="Enter"){r&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(Xe=>!Xe.captured).length>0)&&(q.preventDefault(),sn());return}if((q.metaKey||q.ctrlKey)&&(q.key==="c"||q.key==="C"||q.code==="KeyC")){(e.annotations.length>0||e.styleModifications.length>0)&&(q.preventDefault(),window.focus(),Qt());return}if((q.metaKey||q.ctrlKey)&&(q.key==="Backspace"||q.key==="Delete")){q.preventDefault(),_t();return}if(q.metaKey||q.ctrlKey||q.altKey)return;let Pe={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(q.key.toLowerCase()==="m"){q.preventDefault(),it("model");return}let he=Pe[q.key.toLowerCase()];if(he){q.preventDefault();let Xe=Do.findIndex(Le=>Le.type===he);Xe>=0&&te(Xe),it(he)}};return window.addEventListener("keydown",H),()=>window.removeEventListener("keydown",H)},[le,it,Qt,sn,r,_t,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,z]);let ln=h(f({},mf),{borderRadius:0,padding:le?"0 8px":"0",width:le?"auto":48,height:48,gap:0,justifyContent:le?"flex-start":"center"}),Ut=`<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>`,qn=Ee("div",{style:f({position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(Ut)}")`,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"})}),Cn=b===!1?"rgba(239, 68, 68, 0.4)":o&&i?i:lo.iconActive,no=Dt(null);Mn(()=>{if(!le)return;let H=no.current;if(!H)return;let q=()=>{s==null||s(!0),ke("collapse")},ne=()=>{s==null||s(!1),ae()};return H.addEventListener("mouseenter",q),H.addEventListener("mouseleave",ne),()=>{H.removeEventListener("mouseenter",q),H.removeEventListener("mouseleave",ne)}},[le,o,s,ke,ae]);let rt=Dt(null);return Mn(()=>{if(le)return;let H=rt.current;if(!H)return;let q=H.querySelector("[data-popmelt-logo]"),ne=()=>{H.style.opacity="1",!o&&q&&(q.style.fill="#000"),we==null||we()},Pe=()=>{H.style.opacity=o?"1":"0.5",!o&&q&&(q.style.fill="none")};return H.addEventListener("mouseenter",ne),H.addEventListener("mouseleave",Pe),()=>{H.removeEventListener("mouseenter",ne),H.removeEventListener("mouseleave",Pe)}},[le,o,we]),le?Pt(Cr,{children:[Ee("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
|
+
`}),Ee("div",{id:"devtools-scrim",style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.06)",zIndex:9997,pointerEvents:"none"}}),!L&&(z==="model"||e.activeTool==="model")&&Ee(Ya,{bridgeUrl:T,selectedComponent:B,hoveredComponent:J,onComponentHover:N,onSpacingTokenHover:D,onModifySpacingToken:F,onDeleteSpacingToken:v,modelRefreshKey:M,onComponentAdded:X,onComponentRemoved:pe,onMouseEnter:()=>{ge(),tt.current&&(clearTimeout(tt.current),tt.current=null)},onMouseLeave:e.activeTool==="model"?void 0:ae}),z&&z!=="model"&&(z==="provider"||Ga[z])&&(()=>{let H=z==="provider"?He:Ga[z];return Pt("div",{ref:de,style:f(h(f({position:"fixed",bottom:80,right:16,width:300,backgroundColor:"#eaeaea"},bo),{boxSizing:"content-box",zIndex:10001,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:12,color:"#1f2937",padding:12}),z!=="collapse"&&z!=="counter"?{pointerEvents:"none"}:{}),children:[z==="collapse"&&Ee("div",{style:{marginBottom:10},children:Ee("svg",{width:"48",height:"48",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:Ee("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"})})}),Pt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[Ee("span",{children:H.name}),H.keys[0]&&Ee("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:H.keys[0].key})]}),Ee("div",{style:{color:"#6b7280",lineHeight:1.5,marginBottom:z==="collapse"?0:10},children:H.desc.split(`
|
|
14
14
|
|
|
15
|
-
`).map((K,te)=>Ce("p",{style:{margin:0,marginTop:te>0?8:0},children:K},te))}),D.usage.map((K,te)=>Mt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[Ce("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),Ce("span",{children:K})]},te)),_==="collapse"&&A&&Object.keys(A).length>0&&(()=>{let K=Object.entries(A).filter(([,he])=>he.found&&!he.disabled).map(([he])=>he.charAt(0).toUpperCase()+he.slice(1)),te=Object.entries(A).filter(([,he])=>!he.found).map(([he])=>he);if(K.length===0&&te.length===0)return null;let Re=te.map(he=>he.charAt(0).toUpperCase()+he.slice(1));return Mt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[Ce("span",{style:{width:6,height:6,borderRadius:"50%",backgroundColor:K.length>0?"#22c55e":"rgba(0,0,0,0.2)",flexShrink:0}}),K.length>0?Mt("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[Mt("span",{children:["Registry available in ",K.join(", "),B&&" \u2014 restart CLI to activate"]}),te.length>0&&U&&!B&&Mt("button",{type:"button",onClick:he=>{he.stopPropagation(),U()},style:{border:"none",background:"transparent",color:"#3b82f6",fontSize:10,fontWeight:500,fontFamily:"inherit",padding:0,cursor:"pointer",pointerEvents:"auto",textDecoration:"underline",textUnderlineOffset:2},children:["+ ",Re.join(", ")]})]}):te.length>0&&U?Mt("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[Ce("span",{children:"Connect Popmelt MCP"}),Ce("button",{type:"button",onClick:he=>{he.stopPropagation(),U()},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&&Ce("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((K,te)=>Mt("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:K.accent?"#fff":"#6b7280"},children:[Ce("code",{style:{fontSize:10,backgroundColor:K.accent?e.activeColor:"rgba(0,0,0,0.06)",color:K.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:K.key}),Ce("span",{style:{color:K.accent?e.activeColor:void 0,fontWeight:K.accent?600:void 0},children:K.desc})]},te))}),_==="counter"&>.length>0&&(()=>{let K=new Map;for(let he of gt){let Ue=he.pathname||$t;K.has(Ue)||K.set(Ue,[]),K.get(Ue).push(he)}let te=[...K.entries()],Re=te.length>1;return Ce("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:te.map(([he,Ue])=>Ce("div",{style:{marginBottom:Re?4:0},children:Ue.map(Je=>{var le,ot,Pe,et;let Le=Je.annotations.find(pt=>pt.type==="text"&&pt.text),S=(Le==null?void 0:Le.text)||`[${(ot=(le=Je.annotations[0])==null?void 0:le.type)!=null?ot:"annotation"}]`,j=e.selectedAnnotationIds.includes(Je.id),ee=gt.indexOf(Je),de=ee+1,we=(et=(Pe=Je.annotations[0])==null?void 0:Pe.color)!=null?et:e.activeColor;return Mt("div",{onClick:()=>{if(!(!Je.pathname||Je.pathname===$t)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:Je.id,pathname:Je.pathname})),window.location.href=Je.pathname;return}Nt(ee),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:Je.id}}),ce.current=!1,xe(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:pt=>{let mt=pt.currentTarget.querySelector("[data-route-badge]");mt&&(mt.style.backgroundColor=we,mt.style.color="#fff")},onMouseLeave:pt=>{if(j)return;let mt=pt.currentTarget.querySelector("[data-route-badge]");mt&&(mt.style.backgroundColor="rgba(0,0,0,0.06)",mt.style.color="#6b7280")},children:[Mt("code",{"data-route-badge":!0,style:{fontSize:10,color:j?"#fff":"#6b7280",backgroundColor:j?we:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[de,". ",Re?he:""]}),Ce("span",{style:{fontSize:11,color:j?"#1f2937":"#6b7280",fontWeight:j?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:S})]},Je.id)})},he))})})()]})})(),Mt("div",{ref:D=>{ye&&(ye.current=D)},id:"devtools-toolbar",style:Qn,onMouseEnter:ve,onMouseMove:We,children:[jn,Mt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[Ce("span",{onMouseEnter:()=>ke("inspector"),onMouseLeave:oe,children:Ce(ao,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>it("inspector"),children:Ce(of,{size:20,strokeWidth:1.5})})}),Ce("span",{onMouseEnter:()=>ke("hand"),onMouseLeave:oe,children:Ce(ao,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>it("hand"),children:Mt("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[Ce(nf,{size:20,strokeWidth:1.5}),e.styleModifications.filter(D=>!D.captured).length>0&&Ce("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=Mo[Me],K=D.icon,te=e.isAnnotating&&df.has(e.activeTool);return Ce("span",{onMouseEnter:()=>ke(D.type),onMouseLeave:oe,children:Mt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[Ce(ao,{active:te,siblingActive:e.isAnnotating,onClick:()=>it(D.type),children:Ce(K,{size:20,strokeWidth:1.5})}),Ce("button",{type:"button",onClick:()=>{let Re=(Me+1)%Mo.length;ne(Re),it(Mo[Re].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:Mo.map((Re,he)=>Ce("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:he===Me?Kn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},he))})]})})})(),ff.map(({type:D,icon:K,label:te,shortcut:Re})=>Ce("span",{onMouseEnter:()=>ke(D),onMouseLeave:oe,children:Ce(ao,{active:e.isAnnotating&&e.activeTool===D,siblingActive:e.isAnnotating,onClick:()=>it(D),children:Ce(K,{size:20,strokeWidth:1.5})})},D)),Ce("span",{onMouseEnter:()=>ke("model"),onMouseLeave:oe,children:Ce(ao,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>it("model"),children:Ce(tf,{size:17,strokeWidth:1.5})})})]}),Ce(Wa,{}),Mt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(gt.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(D=>!D.captured).length>0)&&(()=>{var he;let D=Pt!==null&&Pt<gt.length?gt[Pt]:null,K=e.annotations.length>0&&e.annotations.every(Ue=>Ue.status&&Ue.status!=="pending"),te=Pt!==null?(he=D==null?void 0:D.annotations.some(Ue=>Ue.status&&Ue.status!=="pending"))!=null?he:!1:K,Re=`oklch(0.628 0.258 ${bt})`;return Ce("span",{onMouseEnter:()=>ke("counter"),onMouseLeave:oe,children:Ce("button",{ref:zt,type:"button",onClick:()=>{if(Fe.current){Fe.current=!1;return}xt()},onMouseDown:tt,onMouseUp:In,onMouseLeave:In,title:"Cycle through annotations \u2022 Scroll to change color \u2022 Long press to reset",style:{display:"flex",alignItems:"center",justifyContent:"center",minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:te?"#999999":Re,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let Ue=gt.length+e.styleModifications.length+e.spacingTokenChanges.filter(Le=>!Le.captured).length;if(Pt!==null)return Mt(xr,{children:[Pt+1,Ce("span",{style:{opacity:.4},children:` / ${Ue}`})]});let Je=sn.length+e.styleModifications.length+e.spacingTokenChanges.filter(Le=>!Le.captured).length;return Ue>Je?Mt(xr,{children:[Je,Ce("span",{style:{opacity:.4},children:` / ${Ue}`})]}):Ue})()})})})(),(e.annotations.length>0||e.styleModifications.length>0)&&Ce("span",{onMouseEnter:()=>ke("clear"),onMouseLeave:oe,children:Ce(ao,{siblingActive:e.isAnnotating,onClick:Ot,title:"Clear all (\u2318\u232B)",children:Ce(af,{size:17,strokeWidth:1.5})})}),d&&Mt(xr,{children:[Ce("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),Ce("span",{onMouseEnter:()=>ke("provider"),onMouseLeave:oe,style:{display:"contents"},children:Mt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[Ce(ao,{onClick:()=>d(a==="claude"?"codex":"claude"),children:a==="claude"?Ce(ps,{}):Ce(fs,{})}),Mt("button",{type:"button",onClick:()=>{let D=(p+1)%u;E==null||E(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:Kn.iconDefault,whiteSpace:"nowrap"},children:[Ce("span",{children:g}),Ce("span",{style:{display:"flex",flexDirection:"column",gap:2},children:Array.from({length:u},(D,K)=>Ce("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:K===p?Kn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},K))})]})]})})]}),Ce("div",{ref:mn,style:{display:"inline-flex",cursor:"pointer"},children:Ce("button",{type:"button",onClick:St,title:"Collapse (\u2318\u2318)",style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,border:"none",background:"none",padding:0,cursor:"inherit"},children:Ce("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:gn,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:Ce("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"})})})})]})]})]}):Mt(xr,{children:[Ce("style",{children:`
|
|
15
|
+
`).map((q,ne)=>Ee("p",{style:{margin:0,marginTop:ne>0?8:0},children:q},ne))}),H.usage.map((q,ne)=>Pt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[Ee("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),Ee("span",{children:q})]},ne)),z==="collapse"&&P&&Object.keys(P).length>0&&(()=>{let q=Object.entries(P).filter(([,he])=>he.found&&!he.disabled).map(([he])=>he.charAt(0).toUpperCase()+he.slice(1)),ne=Object.entries(P).filter(([,he])=>!he.found).map(([he])=>he);if(q.length===0&&ne.length===0)return null;let Pe=ne.map(he=>he.charAt(0).toUpperCase()+he.slice(1));return Pt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[Ee("span",{style:{width:6,height:6,borderRadius:"50%",backgroundColor:q.length>0?"#22c55e":"rgba(0,0,0,0.2)",flexShrink:0}}),q.length>0?Pt("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[Pt("span",{children:["Registry available in ",q.join(", "),k&&" \u2014 restart CLI to activate"]}),ne.length>0&&G&&!k&&Pt("button",{type:"button",onClick:he=>{he.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:["+ ",Pe.join(", ")]})]}):ne.length>0&&G?Pt("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[Ee("span",{children:"Connect Popmelt MCP"}),Ee("button",{type:"button",onClick:he=>{he.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]})})(),H.keys.length>1&&Ee("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:H.keys.slice(1).map((q,ne)=>Pt("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:q.accent?"#fff":"#6b7280"},children:[Ee("code",{style:{fontSize:10,backgroundColor:q.accent?e.activeColor:"rgba(0,0,0,0.06)",color:q.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:q.key}),Ee("span",{style:{color:q.accent?e.activeColor:void 0,fontWeight:q.accent?600:void 0},children:q.desc})]},ne))}),z==="counter"&&vt.length>0&&(()=>{let q=new Map;for(let he of vt){let Ue=he.pathname||Vt;q.has(Ue)||q.set(Ue,[]),q.get(Ue).push(he)}let ne=[...q.entries()],Pe=ne.length>1;return Ee("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:ne.map(([he,Ue])=>Ee("div",{style:{marginBottom:Pe?4:0},children:Ue.map(Xe=>{var A,ee,ie,Te;let Le=Xe.annotations.find(Fe=>Fe.type==="text"&&Fe.text),qe=(Le==null?void 0:Le.text)||`[${(ee=(A=Xe.annotations[0])==null?void 0:A.type)!=null?ee:"annotation"}]`,At=e.selectedAnnotationIds.includes(Xe.id),Bt=vt.indexOf(Xe),an=Bt+1,C=(Te=(ie=Xe.annotations[0])==null?void 0:ie.color)!=null?Te:e.activeColor;return Pt("div",{onClick:()=>{if(!(!Xe.pathname||Xe.pathname===Vt)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:Xe.id,pathname:Xe.pathname})),window.location.href=Xe.pathname;return}jt(Bt),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:Xe.id}}),ce.current=!1,ve(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:Fe=>{let Je=Fe.currentTarget.querySelector("[data-route-badge]");Je&&(Je.style.backgroundColor=C,Je.style.color="#fff")},onMouseLeave:Fe=>{if(At)return;let Je=Fe.currentTarget.querySelector("[data-route-badge]");Je&&(Je.style.backgroundColor="rgba(0,0,0,0.06)",Je.style.color="#6b7280")},children:[Pt("code",{"data-route-badge":!0,style:{fontSize:10,color:At?"#fff":"#6b7280",backgroundColor:At?C:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[an,". ",Pe?he:""]}),Ee("span",{style:{fontSize:11,color:At?"#1f2937":"#6b7280",fontWeight:At?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:qe})]},Xe.id)})},he))})})()]})})(),Pt("div",{ref:H=>{ye&&(ye.current=H)},id:"devtools-toolbar",style:ln,onMouseEnter:we,onMouseMove:Se,children:[qn,Pt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[Ee("span",{onMouseEnter:()=>ke("inspector"),onMouseLeave:ae,children:Ee(So,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>it("inspector"),children:Ee(rf,{size:20,strokeWidth:1.5})})}),Ee("span",{onMouseEnter:()=>ke("hand"),onMouseLeave:ae,children:Ee(So,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>it("hand"),children:Pt("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[Ee(of,{size:20,strokeWidth:1.5}),e.styleModifications.filter(H=>!H.captured).length>0&&Ee("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(H=>!H.captured).length})]})})}),(()=>{let H=Do[Ie],q=H.icon,ne=e.isAnnotating&&uf.has(e.activeTool);return Ee("span",{onMouseEnter:()=>ke(H.type),onMouseLeave:ae,children:Pt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[Ee(So,{active:ne,siblingActive:e.isAnnotating,onClick:()=>it(H.type),children:Ee(q,{size:20,strokeWidth:1.5})}),Ee("button",{type:"button",onClick:()=>{let Pe=(Ie+1)%Do.length;te(Pe),it(Do[Pe].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&&!ne?.5:1,transition:"opacity 150ms ease"},children:Do.map((Pe,he)=>Ee("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:he===Ie?lo.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},he))})]})})})(),gf.map(({type:H,icon:q,label:ne,shortcut:Pe})=>Ee("span",{onMouseEnter:()=>ke(H),onMouseLeave:ae,children:Ee(So,{active:e.isAnnotating&&e.activeTool===H,siblingActive:e.isAnnotating,onClick:()=>it(H),children:Ee(q,{size:20,strokeWidth:1.5})})},H)),Ee("span",{onMouseEnter:()=>ke("model"),onMouseLeave:ae,children:Ee(So,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>it("model"),children:Ee(nf,{size:17,strokeWidth:1.5})})})]}),Ee(ja,{}),Pt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(vt.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(H=>!H.captured).length>0)&&(()=>{var he;let H=en!==null&&en<vt.length?vt[en]:null,q=e.annotations.length>0&&e.annotations.every(Ue=>Ue.status&&Ue.status!=="pending"),ne=en!==null?(he=H==null?void 0:H.annotations.some(Ue=>Ue.status&&Ue.status!=="pending"))!=null?he:!1:q,Pe=`oklch(0.628 0.258 ${Ct})`;return Ee("span",{onMouseEnter:()=>ke("counter"),onMouseLeave:ae,children:Ee("button",{ref:zt,type:"button",onClick:()=>{if(Ne.current){Ne.current=!1;return}It()},onMouseDown:nt,onMouseUp:Hn,onMouseLeave:Hn,title:"Cycle through annotations \u2022 Scroll to change color \u2022 Long press to reset",style:{display:"flex",alignItems:"center",justifyContent:"center",minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:ne?"#999999":Pe,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let Ue=vt.length+e.styleModifications.length+e.spacingTokenChanges.filter(Le=>!Le.captured).length;if(en!==null)return Pt(Cr,{children:[en+1,Ee("span",{style:{opacity:.4},children:` / ${Ue}`})]});let Xe=mn.length+e.styleModifications.length+e.spacingTokenChanges.filter(Le=>!Le.captured).length;return Ue>Xe?Pt(Cr,{children:[Xe,Ee("span",{style:{opacity:.4},children:` / ${Ue}`})]}):Ue})()})})})(),(e.annotations.length>0||e.styleModifications.length>0)&&Ee("span",{onMouseEnter:()=>ke("clear"),onMouseLeave:ae,children:Ee(So,{siblingActive:e.isAnnotating,onClick:_t,title:"Clear all (\u2318\u232B)",children:Ee(cf,{size:17,strokeWidth:1.5})})}),d&&Pt(Cr,{children:[Ee("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),Ee("span",{onMouseEnter:()=>ke("provider"),onMouseLeave:ae,style:{display:"contents"},children:Pt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[Ee(So,{onClick:()=>d(a==="claude"?"codex":"claude"),children:a==="claude"?Ee(xs,{}):Ee(vs,{})}),Pt("button",{type:"button",onClick:()=>{let H=(u+1)%p;S==null||S(H)},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:lo.iconDefault,whiteSpace:"nowrap"},children:[Ee("span",{children:g}),Ee("span",{style:{display:"flex",flexDirection:"column",gap:2},children:Array.from({length:p},(H,q)=>Ee("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:q===u?lo.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},q))})]})]})})]}),Ee("div",{ref:no,style:{display:"inline-flex",cursor:"pointer"},children:Ee("button",{type:"button",onClick:Lt,title:"Collapse (\u2318\u2318)",style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,border:"none",background:"none",padding:0,cursor:"inherit"},children:Ee("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:Cn,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:Ee("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"})})})})]})]})]}):Pt(Cr,{children:[Ee("style",{children:`
|
|
16
16
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
17
|
-
`}),Mt("div",{ref:D=>{ut.current=D,ye&&(ye.current=D)},id:"devtools-toolbar",style:b(f({},Qn),{overflow:"visible",opacity:o?1:.5,transition:"opacity 150ms ease"}),children:[jn,Ce("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,border:"none",background:"none",cursor:"pointer",padding:0},onClick:()=>{ze(!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:Ce("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:"none",stroke:gn,strokeWidth:"1",strokeLinejoin:"round",xmlns:"http://www.w3.org/2000/svg",children:Ce("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 hf,useEffect as Yn,useRef as vr,useState as Ss}from"react";import{Fragment as Ka,jsx as It,jsxs as Sr}from"react/jsx-runtime";var yf={position:"fixed",bottom:86,right:16,zIndex:9999,display:"flex",flexDirection:"column",alignItems:"flex-end"},bf=24,xf=6,vf=bf-xf,Sf=8,Xa=b(f({display:"flex",alignItems:"center",gap:6,padding:"4px 10px",backgroundColor:"rgba(255, 255, 255, 0.85)"},io),{backdropFilter:"blur(32px)",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,color:"#1f2937",whiteSpace:"nowrap",transition:"transform 200ms ease, opacity 200ms ease"});function wf(e){var s;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?(s=o.split("/").pop())!=null?s:o: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":return"Running command";case"Glob":return"Searching files";case"Grep":return"Searching code";default:return r?`Using ${r}`:"Working\u2026"}}function Cf(e){let t=e.replace(/^Error:\s*/i,"");return t.length>40?t.slice(0,37)+"...":t}function Ef(e,t){if(e.some(o=>o.type==="question"&&o.data.jobId===t))return"Has a question";let r=e.find(o=>o.type==="done"&&o.data.jobId===t);if(r){let o=r.data.resolutions;if(Array.isArray(o)&&o.length>0)return"Applied changes"}return"Replied"}function kf({color:e}){let[t,n]=Ss(0);return Yn(()=>{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(Ka,{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(Ka,{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 Tf({color:e}){return It("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:e,opacity:.6}})}function Mf({color:e}){return It("span",{style:{color:e,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function If(){return It("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function Rf({onCancel:e}){let t=vr(null);return Yn(()=>{let n=t.current;if(!n)return;let r=o=>{o.stopPropagation(),e()};return n.addEventListener("click",r),()=>n.removeEventListener("click",r)},[e]),It("button",{ref:t,style:{background:"none",border:"none",cursor:"pointer",color:"#9ca3af",fontSize:14,padding:"0 4px",lineHeight:1},title:"Cancel",children:"\xD7"})}function Lf({onDismiss:e}){let t=vr(null);return Yn(()=>{let n=t.current;if(!n)return;let r=o=>{o.stopPropagation(),e()};return n.addEventListener("click",r),()=>n.removeEventListener("click",r)},[e]),It("button",{ref:t,style:{background:"none",border:"none",cursor:"pointer",color:"#9ca3af",fontSize:14,padding:"0 4px",lineHeight:1},title:"Dismiss",children:"\xD7"})}function qa({bridge:e,inFlightJobs:t,isVisible:n,onHover:r,clearSignal:o,onViewThread:i,onCancel:s,onHoverJob:l,isConnected:a,dismissedThreadIds:d}){let[c,p]=Ss([]),[u,g]=Ss(!1);Yn(()=>{o>0&&p([])},[o]),Yn(()=>{!d||d.size===0||p(y=>{let v=y.filter(O=>!O.threadId||!d.has(O.threadId));return v.length===y.length?y:v})},[d]),Yn(()=>{p(y=>{var N;let v=new Set(y.map(R=>R.jobId)),O=!1,Z=y.map(R=>{let $=t[R.jobId];return $&&(!R.threadId||R.color==="#888")?(O=!0,b(f({},R),{threadId:R.threadId||$.threadId,color:R.color==="#888"?$.color:R.color})):R});for(let[R,$]of Object.entries(t))v.has(R)||(Z.push({jobId:R,color:$.color,status:"queued",threadId:$.threadId}),O=!0);for(let R of e.activeJobIds)if(!v.has(R)&&!Z.some($=>$.jobId===R)){let $=e.events.find(C=>C.type==="job_started"&&C.data.jobId===R);Z.push({jobId:R,color:"#888",status:"working",threadId:(N=$==null?void 0:$.data)==null?void 0:N.threadId}),O=!0}return O?Z:y})},[t,e.activeJobIds]),Yn(()=>{if(e.activeJobIds.length===0)return;let y=new Set(e.activeJobIds);p(v=>v.map(O=>y.has(O.jobId)&&O.status!=="done"&&O.status!=="error"?b(f({},O),{status:"working"}):O))},[e.activeJobIds]);let E=vr(null);Yn(()=>{let y=e.lastCompletedJobId;if(!y||y===E.current)return;E.current=y;let v=e.events.find(C=>C.type==="error"&&(C.data.jobId===y||e.status==="error")),O=!!v,Z=O?void 0:Ef(e.events,y),N=v?String(v.data.message||""):void 0,R=v?!!v.data.cancelled:void 0,$=v==null?void 0:v.data.threadId;p(C=>C.map(L=>L.jobId===y?b(f({},L),{status:O?"error":"done",doneLabel:Z,errorMessage:N,cancelled:R,threadId:L.threadId||$}):L))},[e.lastCompletedJobId,e.events,e.status]);let w=n&&(c.length>0||a===!1),I=vr(null);Yn(()=>{if(!w)return;let y=I.current;if(!y)return;let v=()=>{g(!0),r(!0)},O=()=>{g(!1),r(!1),l==null||l(null)};return y.addEventListener("mouseenter",v),y.addEventListener("mouseleave",O),()=>{y.removeEventListener("mouseenter",v),y.removeEventListener("mouseleave",O)}},[w,r,l]);let A=vr(new Map),U=hf((y,v)=>{v?A.current.set(y,v):A.current.delete(y)},[]);if(Yn(()=>{if(!w)return;let y=[];for(let v of c){let O=A.current.get(v.jobId);if(O){if(v.threadId&&i){let Z=v.threadId,N=()=>i(Z);O.addEventListener("click",N),y.push(()=>O.removeEventListener("click",N))}if(l){let Z=v.jobId,N=()=>l(Z),R=()=>l(null);O.addEventListener("mouseenter",N),O.addEventListener("mouseleave",R),y.push(()=>{O.removeEventListener("mouseenter",N),O.removeEventListener("mouseleave",R)})}}}return()=>y.forEach(v=>v())},[w,c,i,l]),!w)return null;let B=!u&&c.length>1;return Sr("div",{ref:I,style:yf,"data-devtools":!0,children:[[...c].reverse().map((y,v)=>{let O=v===c.length-1,Z=c.length-1-v,N=y.status==="working"?wf(e.events.filter(R=>R.data.jobId===y.jobId)):y.status==="queued"?"Queued":y.status==="done"?y.doneLabel||"Done":y.cancelled?"Cancelled":y.errorMessage?Cf(y.errorMessage):"Error";return It("div",{style:{position:"relative",zIndex:v,marginBottom:B?O?0:-vf:O?0:Sf,transform:B?`scale(${Math.max(.94,1-Z*.02)})`:"scale(1)",opacity:B?Math.max(.5,1-Z*.15):1,transformOrigin:"bottom right",transition:"margin-bottom 250ms ease, transform 250ms ease, opacity 250ms ease"},children:Sr("div",{ref:R=>U(y.jobId,R),style:b(f({},Xa),{cursor:y.threadId&&i?"pointer":void 0}),title:y.errorMessage||void 0,children:[y.status==="working"&&It(kf,{color:y.color}),y.status==="queued"&&It(Tf,{color:y.color}),y.status==="done"&&It(Mf,{color:y.color}),y.status==="error"&&It(If,{}),It("span",{style:{color:y.status==="queued"?"#9ca3af":"#1f2937",maxWidth:160,overflow:"hidden",textOverflow:"ellipsis"},children:N}),y.status==="working"&&s&&It(Rf,{onCancel:()=>s(y.jobId)}),(y.status==="done"||y.status==="error")&&It(Lf,{onDismiss:()=>p(R=>R.filter($=>$.jobId!==y.jobId))})]})},y.jobId)}),a===!1&&c.length>0&&Sr("div",{style:b(f({},Xa),{color:"#9ca3af"}),children:[It("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#f59e0b"}}),It("span",{children:"Reconnecting\u2026"})]})]})}import{Fragment as Bf,jsx as Pf,jsxs as Of}from"react/jsx-runtime";var Af=`
|
|
17
|
+
`}),Pt("div",{ref:H=>{rt.current=H,ye&&(ye.current=H)},id:"devtools-toolbar",style:h(f({},ln),{overflow:"visible",opacity:o?1:.5,transition:"opacity 150ms ease"}),children:[qn,Ee("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,border:"none",background:"none",cursor:"pointer",padding:0},onClick:()=>{ze(!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:Ee("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:"none",stroke:Cn,strokeWidth:"1",strokeLinejoin:"round",xmlns:"http://www.w3.org/2000/svg",children:Ee("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 yf,useEffect as to,useRef as Er,useState as Is}from"react";import{Fragment as Za,jsx as Ot,jsxs as kr}from"react/jsx-runtime";var bf={position:"fixed",bottom:86,right:16,zIndex:9999,display:"flex",flexDirection:"column",alignItems:"flex-end"},xf=24,vf=6,Sf=xf-vf,wf=8,qa=h(f({display:"flex",alignItems:"center",gap:6,padding:"4px 10px",backgroundColor:"rgba(255, 255, 255, 0.85)"},bo),{backdropFilter:"blur(32px)",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,color:"#1f2937",whiteSpace:"nowrap",transition:"transform 200ms ease, opacity 200ms ease"});function Cf(e){var s;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?(s=o.split("/").pop())!=null?s:o: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":return"Running command";case"Glob":return"Searching files";case"Grep":return"Searching code";default:return r?`Using ${r}`:"Working\u2026"}}function Ef(e){let t=e.replace(/^Error:\s*/i,"");return t.length>40?t.slice(0,37)+"...":t}function kf(e,t){if(e.some(o=>o.type==="question"&&o.data.jobId===t))return"Has a question";let r=e.find(o=>o.type==="done"&&o.data.jobId===t);if(r){let o=r.data.resolutions;if(Array.isArray(o)&&o.length>0)return"Applied changes"}return"Replied"}function Tf({color:e}){let[t,n]=Is(0);return to(()=>{let r=setInterval(()=>{n(o=>(o+1)%2)},250);return()=>clearInterval(r)},[]),Ot("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?kr(Za,{children:[Ot("circle",{cx:"7",cy:"7",r:"2"}),Ot("circle",{cx:"17",cy:"7",r:"2"}),Ot("circle",{cx:"7",cy:"17",r:"2"}),Ot("circle",{cx:"17",cy:"17",r:"2"})]}):kr(Za,{children:[Ot("circle",{cx:"12",cy:"6",r:"2"}),Ot("circle",{cx:"6",cy:"12",r:"2"}),Ot("circle",{cx:"18",cy:"12",r:"2"}),Ot("circle",{cx:"12",cy:"18",r:"2"})]})})}function Mf({color:e}){return Ot("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:e,opacity:.6}})}function If({color:e}){return Ot("span",{style:{color:e,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function Rf(){return Ot("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function Lf({onCancel:e}){let t=Er(null);return to(()=>{let n=t.current;if(!n)return;let r=o=>{o.stopPropagation(),e()};return n.addEventListener("click",r),()=>n.removeEventListener("click",r)},[e]),Ot("button",{ref:t,style:{background:"none",border:"none",cursor:"pointer",color:"#9ca3af",fontSize:14,padding:"0 4px",lineHeight:1},title:"Cancel",children:"\xD7"})}function Af({onDismiss:e}){let t=Er(null);return to(()=>{let n=t.current;if(!n)return;let r=o=>{o.stopPropagation(),e()};return n.addEventListener("click",r),()=>n.removeEventListener("click",r)},[e]),Ot("button",{ref:t,style:{background:"none",border:"none",cursor:"pointer",color:"#9ca3af",fontSize:14,padding:"0 4px",lineHeight:1},title:"Dismiss",children:"\xD7"})}function Qa({bridge:e,inFlightJobs:t,isVisible:n,onHover:r,clearSignal:o,onViewThread:i,onClickJob:s,onCancel:l,onHoverJob:a,isConnected:d,dismissedThreadIds:c}){let[u,p]=Is([]),[g,S]=Is(!1);to(()=>{o>0&&p([])},[o]),to(()=>{!c||c.size===0||p(b=>{let B=b.filter(J=>!J.threadId||!c.has(J.threadId));return B.length===b.length?b:B})},[c]),to(()=>{p(b=>{var D;let B=new Set(b.map(F=>F.jobId)),J=!1,N=b.map(F=>{let v=t[F.jobId];return v&&(!F.threadId||F.color==="#888")?(J=!0,h(f({},F),{threadId:F.threadId||v.threadId,color:F.color==="#888"?v.color:F.color})):F});for(let[F,v]of Object.entries(t))B.has(F)||(N.push({jobId:F,color:v.color,status:"queued",threadId:v.threadId}),J=!0);for(let F of e.activeJobIds)if(!B.has(F)&&!N.some(v=>v.jobId===F)){let v=e.events.find(M=>M.type==="job_started"&&M.data.jobId===F);N.push({jobId:F,color:"#888",status:"working",threadId:(D=v==null?void 0:v.data)==null?void 0:D.threadId}),J=!0}return J?N:b})},[t,e.activeJobIds]),to(()=>{if(e.activeJobIds.length===0)return;let b=new Set(e.activeJobIds);p(B=>B.map(J=>b.has(J.jobId)&&J.status!=="done"&&J.status!=="error"?h(f({},J),{status:"working"}):J))},[e.activeJobIds]);let w=Er(null);to(()=>{let b=e.lastCompletedJobId;if(!b||b===w.current)return;w.current=b;let B=e.events.find(M=>M.type==="error"&&(M.data.jobId===b||e.status==="error")),J=!!B,N=J?void 0:kf(e.events,b),D=B?String(B.data.message||""):void 0,F=B?!!B.data.cancelled:void 0,v=B==null?void 0:B.data.threadId;p(M=>M.map(X=>X.jobId===b?h(f({},X),{status:J?"error":"done",doneLabel:N,errorMessage:D,cancelled:F,threadId:X.threadId||v}):X))},[e.lastCompletedJobId,e.events,e.status]);let L=n&&(u.length>0||d===!1),P=Er(null);to(()=>{if(!L)return;let b=P.current;if(!b)return;let B=()=>{S(!0),r(!0)},J=()=>{S(!1),r(!1),a==null||a(null)};return b.addEventListener("mouseenter",B),b.addEventListener("mouseleave",J),()=>{b.removeEventListener("mouseenter",B),b.removeEventListener("mouseleave",J)}},[L,r,a]);let G=Er(new Map),k=yf((b,B)=>{B?G.current.set(b,B):G.current.delete(b)},[]);if(to(()=>{if(!L)return;let b=[];for(let B of u){let J=G.current.get(B.jobId);if(J){if(s){let N=B.jobId,D=()=>s(N);J.addEventListener("click",D),b.push(()=>J.removeEventListener("click",D))}if(a){let N=B.jobId,D=()=>a(N),F=()=>a(null);J.addEventListener("mouseenter",D),J.addEventListener("mouseleave",F),b.push(()=>{J.removeEventListener("mouseenter",D),J.removeEventListener("mouseleave",F)})}}}return()=>b.forEach(B=>B())},[L,u,s,a]),!L)return null;let T=!g&&u.length>1;return kr("div",{ref:P,style:bf,"data-devtools":!0,children:[[...u].reverse().map((b,B)=>{let J=B===u.length-1,N=u.length-1-B,D=b.status==="working"?Cf(e.events.filter(F=>F.data.jobId===b.jobId)):b.status==="queued"?"Queued":b.status==="done"?b.doneLabel||"Done":b.cancelled?"Cancelled":b.errorMessage?Ef(b.errorMessage):"Error";return Ot("div",{style:{position:"relative",zIndex:B,marginBottom:T?J?0:-Sf:J?0:wf,transform:T?`scale(${Math.max(.94,1-N*.02)})`:"scale(1)",opacity:T?Math.max(.5,1-N*.15):1,transformOrigin:"bottom right",transition:"margin-bottom 250ms ease, transform 250ms ease, opacity 250ms ease"},children:kr("div",{ref:F=>k(b.jobId,F),style:h(f({},qa),{cursor:s?"pointer":void 0}),title:b.errorMessage||void 0,children:[b.status==="working"&&Ot(Tf,{color:b.color}),b.status==="queued"&&Ot(Mf,{color:b.color}),b.status==="done"&&Ot(If,{color:b.color}),b.status==="error"&&Ot(Rf,{}),Ot("span",{style:{color:b.status==="queued"?"#9ca3af":"#1f2937",maxWidth:160,overflow:"hidden",textOverflow:"ellipsis"},children:D}),b.status==="working"&&l&&Ot(Lf,{onCancel:()=>l(b.jobId)}),(b.status==="done"||b.status==="error")&&Ot(Af,{onDismiss:()=>p(F=>F.filter(v=>v.jobId!==b.jobId))})]})},b.jobId)}),d===!1&&u.length>0&&kr("div",{style:h(f({},qa),{color:"#9ca3af"}),children:[Ot("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#f59e0b"}}),Ot("span",{children:"Reconnecting\u2026"})]})]})}import{Fragment as Bf,jsx as Of,jsxs as Nf}from"react/jsx-runtime";var Pf=`
|
|
18
18
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
19
19
|
:host {
|
|
20
20
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
@@ -23,16 +23,26 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
23
23
|
line-height: 1.5;
|
|
24
24
|
-webkit-font-smoothing: antialiased;
|
|
25
25
|
}
|
|
26
|
-
/*
|
|
26
|
+
/* Direct reset for all Popmelt chrome elements.
|
|
27
|
+
Beats broad selectors from mirrored host stylesheets (e.g. div, span, *).
|
|
28
|
+
Inline styles on individual elements still win (higher specificity). */
|
|
29
|
+
:host *:not([data-popmelt-panel]):not([data-popmelt-panel] *) {
|
|
30
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
31
|
+
font-size: 12px;
|
|
32
|
+
color: #1f2937;
|
|
33
|
+
line-height: 1.5;
|
|
34
|
+
-webkit-font-smoothing: antialiased;
|
|
35
|
+
}
|
|
36
|
+
/* Break font inheritance for component previews \u2014 let mirrored host
|
|
27
37
|
page styles (Tailwind, globals) apply instead of Popmelt's monospace. */
|
|
28
38
|
[data-popmelt-panel] {
|
|
29
39
|
font: 16px / 1.5 system-ui, -apple-system, sans-serif;
|
|
30
40
|
color: initial;
|
|
31
41
|
-webkit-font-smoothing: auto;
|
|
32
42
|
}
|
|
33
|
-
`;function
|
|
34
|
-
`),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(
|
|
35
|
-
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(i)){n.push(
|
|
43
|
+
`;function ec({children:e}){return Nf(Bf,{children:[Of("style",{children:Pf}),e]})}import{useEffect as Df,useLayoutEffect as Hf,useRef as Ff,useState as tc}from"react";import{createPortal as _f}from"react-dom";import{Fragment as Yf,jsx as Wf,jsxs as jf}from"react/jsx-runtime";function zf(e){return e.tagName==="STYLE"||e.tagName==="LINK"&&e.rel==="stylesheet"}function $f(e){let t=new Map,n=e.firstChild;function r(s){if(t.has(s)||s.hasAttribute("data-pm-mirror"))return;let l=s.cloneNode(!0);l.setAttribute("data-pm-mirror",""),e.insertBefore(l,n),t.set(s,l)}function o(s){let l=t.get(s);l&&(l.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 l of s)if(l.type==="childList"){for(let a of l.addedNodes)a instanceof Element&&zf(a)&&r(a);for(let a of l.removedNodes)a instanceof Element&&o(a)}});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 nc({children:e}){let t=Ff(null),[n,r]=tc(null),[o,i]=tc(null);return Hf(()=>{let s=t.current;if(!s||s.shadowRoot)return;let l=s.attachShadow({mode:"open"}),a=document.createElement("div");a.setAttribute("data-popmelt-root",""),l.appendChild(a),r(l),i(a)},[]),Df(()=>{if(n)return $f(n)},[n]),jf(Yf,{children:[Wf("div",{ref:t,"data-popmelt-shadow-host":!0,style:{position:"absolute",width:0,height:0,overflow:"visible",zIndex:1e4}}),o&&_f(e,o)]})}import{useCallback as ui,useEffect as uo,useRef as co,useState as po}from"react";import{Fragment as Xf,jsx as Ht}from"react/jsx-runtime";var oc="ui-monospace, SFMono-Regular, Menlo, monospace",Jf=/^#[0-9a-fA-F]{3,8}$/,Gf=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,Vf=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 Uf(e){let t=e.trim();return Jf.test(t)||Gf.test(t)||Vf.has(t.toLowerCase())}function Rs(e,t){return Ht("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 Tr(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);Uf(i)&&t.push(Rs(i,`sw-${o.index}`)),t.push(Ht("code",{style:{fontFamily:oc,fontSize:"0.9em",backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",borderRadius:2},children:i},o.index))}else o[3]!==void 0?t.push(Ht("strong",{children:Ht("em",{children:o[3]})},o.index)):o[5]!==void 0?t.push(Ht("strong",{children:o[5]},o.index)):o[7]!==void 0?t.push(Ht("em",{children:o[7]},o.index)):o[9]!==void 0?t.push(Ht("em",{children:o[9]},o.index)):o[11]!==void 0&&o[12]!==void 0?t.push(Ht("a",{href:o[12],target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline"},children:o[11]},o.index)):o[13]!==void 0?(t.push(Rs(o[13],`sw-${o.index}`)),t.push(o[13])):o[14]!==void 0&&(t.push(Rs(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 ao(e){var o;let t=e.split(`
|
|
44
|
+
`),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(Ht("pre",{style:{fontFamily:oc,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(`
|
|
45
|
+
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(i)){n.push(Ht("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(Ht("div",{style:{fontWeight:700,fontSize:(o=c[d])!=null?o:12,margin:"8px 0 2px"},children:Tr(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=P=>/^\|[\s\-:|]+\|$/.test(P),u=d.filter(P=>!c(P)),p=P=>P.split("|").slice(1,-1).map(G=>G.trim()),g=P=>/^\*\*.+\*\*$/.test(P)||/^__.+__$/.test(P),S=u.map(p),w=S.length>1&&S.slice(1).every(P=>P[0]&&g(P[0])),L=S.length>0&&S[0].every(P=>g(P));n.push(Ht("div",{style:{overflowX:"auto",margin:"4px 0",paddingBottom:4},children:Ht("table",{style:{borderCollapse:"separate",borderSpacing:0,fontSize:"0.95em",width:"max-content",minWidth:"100%"},children:Ht("tbody",{children:u.map((P,G)=>Ht("tr",{children:p(P).map((k,T)=>Ht(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"},T===0&&w||G===0&&L?h(f(f({position:"sticky"},T===0&&w?{left:0}:{}),G===0&&L?{top:0}:{}),{background:"#fff",zIndex:T===0&&w&&G===0&&L?2:1}):{}),children:Tr(k)},T))},G))})})},n.length));continue}if(i.match(/^(\s*)([-*])\s+(.+)/)){let d=[];for(;r<t.length&&/^\s*[-*]\s+/.test(t[r]);){let c=t[r].match(/^\s*[-*]\s+(.+)/);c&&d.push(Ht("li",{children:Tr(c[1])},d.length)),r++}n.push(Ht("ul",{style:{margin:"2px 0",paddingLeft:20},children:d},n.length));continue}if(i.match(/^(\s*)\d+\.\s+(.+)/)){let d=[];for(;r<t.length&&/^\s*\d+\.\s+/.test(t[r]);){let c=t[r].match(/^\s*\d+\.\s+(.+)/);c&&d.push(Ht("li",{children:Tr(c[1])},d.length)),r++}n.push(Ht("ol",{style:{margin:"2px 0",paddingLeft:20},children:d},n.length));continue}if(i.trim()===""){n.push(Ht("div",{style:{height:4}},n.length)),r++;continue}n.push(Ht("div",{style:{margin:"2px 0"},children:Tr(i)},n.length)),r++}return Ht(Xf,{children:n})}import{Fragment as Mr,jsx as xe,jsxs as xt}from"react/jsx-runtime";var lc=400,Kn=16,ac=3,Kf=3,cc=4,qf=8,Ls="devtools-thread-panel-position",gi=lc+2*ac+2*cc,Zf=gi+2*Kf;function pi(){return{top:Kn,left:window.innerWidth-gi-Kn}}function rc(e,t,n){let r=n==null?void 0:n.getBoundingClientRect(),o=2*ac+2*cc,i=window.innerHeight-Kn-o;return r&&t+Zf>r.left&&(i=r.top-qf-o),Math.max(200,i-Math.max(0,e))}var Qf={width:lc,backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",display:"flex",flexDirection:"column",overflow:"visible",padding:4,fontFamily:nn,fontSize:12,color:"#1f2937",pointerEvents:"auto"},eg={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 5px 4px 10px",margin:0,fontWeight:600,fontSize:12,overflow:"hidden"},tg={flex:1,overflowY:"auto",padding:"8px 0",scrollbarWidth:"none"},ng=`
|
|
36
46
|
[data-devtools="thread-panel-messages"]:hover {
|
|
37
47
|
scrollbar-width: thin !important;
|
|
38
48
|
}
|
|
@@ -46,8 +56,8 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
46
56
|
background: rgba(0,0,0,0.15);
|
|
47
57
|
border-radius: 3px;
|
|
48
58
|
}
|
|
49
|
-
`,
|
|
50
|
-
[data-popmelt-reply]::placeholder { opacity: 0.35; }`}),
|
|
51
|
-
`)?
|
|
52
|
-
`)?
|
|
53
|
-
`)?co(Se):Se}),!ce&&Se&&Ee("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:co(Se)}),ce&&_.replyToQuestion&&(()=>{let se=lg(_,t);return se.length===0?null:Ee("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:se.map((be,pe)=>Ee("img",{src:be.url,title:be.label,style:ii,onClick:()=>N(be.url)},pe))})})(),ce&&!_.replyToQuestion&&(()=>{let se=ag(_,t);return se.length===0?null:Ee("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:se.map((be,pe)=>Ee("img",{src:be.url,title:be.label,style:ii,onClick:()=>N(be.url)},pe))})})(),Be&&Ee("div",{style:{marginTop:Se?4:0,lineHeight:1.5,wordBreak:"break-word"},children:co(Be)}),(z||De)&&vt("div",{style:{marginTop:Se||Be?6:0,padding:"4px 8px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#6b7280"},children:[z&&Ee("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:_.toolsUsed.map((se,be)=>Ee("div",{children:se},be))}),De&&_.resolutions.map((se,be)=>{var oe;let pe=(oe=se.finalScope)!=null?oe:se.inferredScope,ke=pe?`${pe.breadth} \xB7 ${pe.target}`:null;return vt("div",{style:{marginTop:z?4:0},children:[Ee("span",{style:{color:se.status==="resolved"?"#10b981":"#f59e0b"},children:se.status==="resolved"?"Done":"Needs review"}),ke&&Ee("span",{style:{marginLeft:6,padding:"1px 5px",backgroundColor:"rgba(0, 0, 0, 0.06)",fontSize:10,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace"},children:ke}),se.summary?` \u2014 ${se.summary}`:""]},be)})]})]},`${_.jobId}-${xe}`)}),r&&vt("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)"},children:[vt("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[Ee(gs,{provider:u,size:11,style:{color:"#6b7280"}}),Ee("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:ms(p,u)}),He&&Ee("span",{style:{fontSize:10,color:"#b0b7c3",fontStyle:"italic"},children:He}),vt("span",{style:{marginLeft:"auto",display:"flex",alignItems:"center",gap:6},children:[Ee(ig,{color:n}),l&&Ee("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"},children:"Cancel"})]})]}),ne.map((_,xe)=>{if(_.kind==="tool")return Ee("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",lineHeight:1.6},children:_.label},xe);if(_.kind==="thinking")return Ee("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:_.text},xe);let ce=oc(_.text);return ce?Ee("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,lineHeight:1.5,wordBreak:"break-word"},children:co(ce)},xe):null})]})]}),!r&&a&&vt("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",borderBottom:"1px solid rgba(0,0,0,0.04)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[Ee("span",{style:{fontWeight:600},children:"Error: "}),a]}),s&&vt("div",{style:{flexShrink:0,position:"relative"},children:[v.length>0&&Ee("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:v.map((_,xe)=>vt("span",{onClick:()=>O(ce=>ce.filter((Se,Be)=>Be!==xe)),onMouseEnter:ce=>{let Se=ce.currentTarget.querySelector("[data-chip-x]");Se&&(Se.style.color="#ef4444")},onMouseLeave:ce=>{let Se=ce.currentTarget.querySelector("[data-chip-x]");Se&&(Se.style.color="#9ca3af")},style:{display:"inline-flex",alignItems:"center",gap:5,fontSize:10,color:"#fff",backgroundColor:"rgba(0,0,0,1)",backdropFilter:"blur(4px)",padding:"2px 5px 2px 8px",cursor:"pointer"},children:["image ",xe+1,Ee("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"#9ca3af"},children:"\xD7"})]},xe))}),vt("div",{style:ng,children:[Ee("input",{"data-popmelt-reply":!0,value:B,onChange:_=>y(_.target.value),onKeyDown:$e,onPaste:Ve,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:Jt,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),Ee("button",{onClick:Ne,disabled:!B.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:B.trim()?"pointer":"default",color:B.trim()?"#1f2937":"rgba(0,0,0,0.2)",flexShrink:0},children:vt("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[Ee("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"}),Ee("path",{d:"M6 12h16"})]})})]})]})]})]}),Z&&Ee(cg,{src:Z,onClose:()=>N(null)})]})}import{Fragment as vg,jsx as tr,jsxs as dc}from"react/jsx-runtime";var uc=mg(null),ks="devtools-provider",Ts="devtools-model",Ms="devtools-open-thread-id";async function cc(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)}))})}function yg(e,t,n){let r=e==="codex"?hr:mr;return Math.min(n,(t==="codex"?hr:mr).length-1)}function bg({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 te,Re,he,Ue,Je,Le;let[i,s]=yl(),l=ml(n),a=_t(null),d=_t(null),c=(te=fl())!=null?te:n,p=_t(new Map),u=_t(new Map),g=_t(!1),E=Do(),[w,I]=cn(()=>typeof window=="undefined"?"claude":localStorage.getItem(ks)||"claude"),[A,U]=cn(()=>{if(typeof window=="undefined")return 0;let S=localStorage.getItem(Ts);return S&&parseInt(S,10)||0}),[B,y]=cn([]),[v,O]=cn({}),[Z,N]=cn(!1);Ft(()=>{l.isConnected&&Us(c).then(S=>{if(!S)return;let j=Object.entries(S.providers).filter(([,we])=>we.available).map(([we])=>we);j.length>0&&y(j);let ee={};for(let[we,le]of Object.entries(S.providers))le.mcp&&(ee[we]=le.mcp);O(ee),Object.values(ee).every(we=>we.found)&&N(!1)})},[l.isConnected,l.capabilitiesVersion,c]),Ft(()=>{if(B.length>0&&!B.includes(w)){let S=B[0];I(S),localStorage.setItem(ks,S)}},[B,w]);let R=w==="codex"?hr:mr,$=(Re=R[A])!=null?Re:R[0],C=on(S=>{let j=w;I(S),localStorage.setItem(ks,S);let ee=yg(j,S,A);U(ee),localStorage.setItem(Ts,String(ee))},[w,A]),L=on(S=>{U(S),localStorage.setItem(Ts,String(S))},[]),X=on(async()=>{let S=await qs(c);if(!S)return;let j={};for(let[ee,de]of Object.entries(S.capabilities.providers))de.mcp&&(j[ee]=de.mcp);O(j),S.results.some(ee=>ee.installed)&&N(!0)},[c]),[ge,ve]=cn(new Set),[ye,ae]=cn(null),[ze,Me]=cn(null),[ne,He]=cn(null),[Ne,Ve]=cn(null);Ft(()=>{l.isConnected&&Po(c).then(S=>{S!=null&&S.components&&ve(new Set(Object.keys(S.components)))})},[l.isConnected,c]);let $e=on(async S=>{let j=[];for(let ee of S)try{(await Zs(ee,c)).added&&j.push(ee)}catch(de){console.error("[Popmelt] Failed to add component to model:",ee,de)}j.length>0&&(ve(ee=>{let de=new Set(ee);for(let we of j)de.add(we);return de}),ae(j[j.length-1]))},[c]),Ie=on(S=>{ae(S)},[]),st=on(()=>{Po(c).then(S=>{S!=null&&S.components&&ve(new Set(Object.keys(S.components)))})},[c]),ct=on(async S=>{try{(await Qs(S,c)).removed&&ve(ee=>{let de=new Set(ee);return de.delete(S),de})}catch(j){console.error("[Popmelt] Failed to remove component from model:",j)}},[c]),_=on((S,j)=>{s({type:"MODIFY_SPACING_TOKEN",payload:S}),s({type:"ADD_SPACING_TOKEN_CHANGE",payload:j})},[s]),xe=on((S,j)=>{s({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:S,originalValue:j}})},[s]),[ce,Se]=cn(0),Be=_t([]);Ft(()=>{let S=Be.current,j=i.spacingTokenMods;Be.current=j;let ee=new Map(S.map(le=>[le.tokenPath,le])),de=new Map(j.map(le=>[le.tokenPath,le])),we=!1;for(let[le,ot]of de){let Pe=ee.get(le);if(!(Pe&&Pe.currentValue===ot.currentValue)){we=!0,ot.currentValue==="__deleted__"?el(le,c).catch(et=>console.error("[Popmelt] Failed to sync token delete:",et)):pi(le,ot.currentValue,c).catch(et=>console.error("[Popmelt] Failed to sync token update:",et));for(let et of ot.targets){let pt=document.querySelector(et.selector);if(pt)if(ot.currentValue==="__deleted__")pt.style.removeProperty(et.property);else{let mt=ot.currentPx;mt>0&&pt.style.setProperty(et.property,`${mt}px`,"important")}}}}for(let[le,ot]of ee)if(!de.has(le)){we=!0,pi(le,ot.originalValue,c).catch(Pe=>console.error("[Popmelt] Failed to restore token on undo:",Pe));for(let Pe of ot.targets){let et=document.querySelector(Pe.selector);et&&et.style.removeProperty(Pe.property)}}we&&Se(le=>le+1)},[i.spacingTokenMods,c]);let[De,z]=cn(()=>typeof window=="undefined"?null:localStorage.getItem(Ms)||null),[re,se]=cn(new Set),[be,pe]=cn(null);Ft(()=>{De?localStorage.setItem(Ms,De):localStorage.removeItem(Ms)},[De]);let ke="popmelt-in-flight-jobs",[oe,We]=cn(()=>{try{let S=sessionStorage.getItem(ke);return S?JSON.parse(S):{}}catch(S){return{}}});Ft(()=>{try{Object.keys(oe).length>0?sessionStorage.setItem(ke,JSON.stringify(oe)):sessionStorage.removeItem(ke)}catch(S){}},[oe]);let Xe=_t(new Map),At=_t(new Map);Ft(()=>{for(let[S,j]of Object.entries(oe))j.annotationIds.length>0&&Xe.current.set(S,j.annotationIds),j.threadId&&At.current.set(S,j.threadId)},[oe]);let Gt=_t(!1);Ft(()=>{if(Gt.current||i.annotations.length===0)return;Gt.current=!0;let S=new Set;for(let ee of Object.values(oe))for(let de of ee.annotationIds)S.add(de);let j=i.annotations.filter(ee=>S.has(ee.id)?!1:!!(ee.status==="in_flight"||(ee.status==="pending"||!ee.status)&&(ee.captured||ee.threadId))).map(ee=>ee.id);j.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:j,status:"dismissed"}})},[i.annotations,oe,s]);let it=er(()=>{let S=new Set;for(let j of Object.values(oe))for(let ee of j.annotationIds)S.add(ee);return S},[oe]),Vt=er(()=>{let S=new Set;for(let j of Object.values(oe))for(let ee of j.styleSelectors)S.add(ee);return S},[oe]),Kt=er(()=>{let S=new Map;for(let j of Object.values(oe)){for(let ee of j.styleSelectors)S.set(ee,j.color);for(let ee of j.annotationIds){let de=i.annotations.find(we=>we.id===ee);if(de&&(de.linkedSelector&&S.set(de.linkedSelector,j.color),de.groupId))for(let we of i.annotations)we.groupId===de.groupId&&we.linkedSelector&&S.set(we.linkedSelector,j.color)}}return S},[oe,i.annotations]),St=_t(i.annotations);St.current=i.annotations;let Ot=_t(i.styleModifications);Ot.current=i.styleModifications;let bt=_t(oe);bt.current=oe,Ft(()=>{let S=null,j=()=>{var Pe,et;if(Object.keys(bt.current).length>0)return;let de=St.current,we=Ot.current,le=[],ot=[];for(let pt of de){if(!pt.linkedSelector||!pt.linkedSelector.startsWith("[data-pm=")||pt.pathname||pt.captured||pt.status&&pt.status!=="pending")continue;let mt=document.querySelector(pt.linkedSelector);!mt&&((et=(Pe=pt.elements)==null?void 0:Pe[0])!=null&&et.selector)&&(mt=document.querySelector(pt.elements[0].selector)),mt||le.push(pt.linkedSelector)}for(let pt of we)document.querySelector(pt.selector)||ot.push(pt.selector);(le.length>0||ot.length>0)&&s({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:le,styleSelectors:ot}})},ee=new MutationObserver(de=>{de.some(we=>we.removedNodes.length>0)&&(S&&clearTimeout(S),S=setTimeout(j,3e3))});return ee.observe(document.body,{childList:!0,subtree:!0}),()=>{ee.disconnect(),S&&clearTimeout(S)}},[s]);let Et=_t(typeof window!="undefined"?window.location.pathname:"/");Ft(()=>{let S=de=>{if(g.current)return;let we=window.location.pathname;if(de===we)return;let le=St.current.filter(Pe=>{var et;return Pe.pathname===de&&((et=Pe.status)!=null?et:"pending")==="pending"});if(console.log(`[Popmelt] Navigation from ${de} \u2192 ${we}, ${le.length} pending annotations on departing page`),le.length===0)return;let ot=a.current;if(!ot){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if(rr(document.body,ot,le).then(Pe=>ir(Pe)).then(Pe=>{Pe?(u.current.set(de,Pe),console.log(`[Popmelt] Cached screenshot for ${de} (${(Pe.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${de}`)}).catch(Pe=>{console.warn("[Popmelt] Capture-on-leave failed:",Pe)}),u.current.size>20){let Pe=[...u.current.entries()];u.current=new Map(Pe.slice(-10))}},j=de=>{var le;let we=(le=de.detail)==null?void 0:le.prevPath;we&&(S(we),Et.current=window.location.pathname)},ee=()=>{let de=Et.current;S(de),Et.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",j),window.addEventListener("popstate",ee),()=>{window.removeEventListener("popmelt:locationchange",j),window.removeEventListener("popstate",ee)}},[]),Ft(()=>{l.lastCompletedJobId&&l.lastCompletedJobId in oe&&We(S=>{var de;let we=S,{[de=l.lastCompletedJobId]:j}=we;return no(we,[kr(de)])})},[l.lastCompletedJobId]);let rn=_t(!1);Ft(()=>{if(!l.isConnected){rn.current=!1;return}if(rn.current||(rn.current=!0,Object.keys(oe).length===0))return;let j=setTimeout(()=>{Ao(c).then(ee=>{var we;if(!ee)return;let de=new Set(((we=ee.activeJobs)!=null?we:[]).map(le=>le.id));We(le=>{let ot=Object.keys(le).filter(et=>!de.has(et));if(ot.length===0)return le;let Pe=f({},le);for(let et of ot)delete Pe[et];return Pe})})},500);return()=>clearTimeout(j)},[l.isConnected,c]);let zt=_t(new Set);Ft(()=>{let S=l.events.filter(j=>j.type==="done"&&j.data.resolutions);for(let j of S){let ee=j.data.jobId;zt.current.has(ee)||(zt.current.add(ee),Array.isArray(j.data.resolutions)&&s({type:"APPLY_RESOLUTIONS",payload:{resolutions:j.data.resolutions,threadId:j.data.threadId}}))}},[l.events,s]);let Mn=_t(new Set);Ft(()=>{let S=l.events.filter(j=>j.type==="error"&&j.data.cancelled);for(let j of S){let ee=j.data.jobId;if(!ee||Mn.current.has(ee))continue;Mn.current.add(ee);let de=oe[ee];de&&de.annotationIds.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:de.annotationIds,status:"dismissed"}})}},[l.events,oe,s]);let lt=_t(0);Ft(()=>{let S=l.incrementalResolutions;if(S.length<=lt.current)return;let j=S.slice(lt.current);lt.current=S.length,s({type:"APPLY_RESOLUTIONS",payload:{resolutions:j}})},[l.incrementalResolutions,s]),Ft(()=>{l.incrementalResolutions.length===0&&(lt.current=0)},[l.incrementalResolutions.length]);let Q=_t(l.status);Ft(()=>{let S=Q.current;Q.current=l.status,S==="disconnected"&&l.status==="idle"&&We({})},[l.status]);let Fe=on(async()=>{let S=a.current;if(!S)return!1;let j=await rr(document.body,S,i.annotations);if(j.length===0)return!1;let ee=await xl(j,i.annotations,i.styleModifications);return ee&&s({type:"MARK_CAPTURED"}),ee},[i.annotations,i.styleModifications,s]),tt=on((S,j)=>{let ee=p.current.get(S)||[];p.current.set(S,[...ee,...j])},[]),In=on(async()=>{var to;let S=a.current;if(!S)return!1;let j=i.annotations.filter(ht=>{var ln;return((ln=ht.status)!=null?ln:"pending")==="pending"}),ee=i.spacingTokenChanges.filter(ht=>!ht.captured);if(j.length===0&&i.styleModifications.filter(ht=>!ht.captured).length===0&&ee.length===0)return!1;let de=new Map;for(let ht of j){let ln=ht.pathname||E;de.has(ln)||de.set(ln,[]),de.get(ln).push(ht)}let we=new Map,le=[...de.keys()].filter(ht=>ht!==E);if(le.length>0){let ht=E,ln={x:window.scrollX,y:window.scrollY};g.current=!0;for(let Wt of le)try{console.log(`[Popmelt] Navigating to ${Wt} for screenshot capture`),await cc(Wt,r),window.location.pathname!==Wt&&console.warn(`[Popmelt] Navigation to ${Wt} did not take effect (at ${window.location.pathname})`);let Tt=de.get(Wt)||[],Rn=await rr(document.body,S,Tt),Sn=await ir(Rn);Sn&&(we.set(Wt,Sn),console.log(`[Popmelt] Captured ${Wt} (${(Sn.size/1024).toFixed(0)}KB)`))}catch(Tt){console.warn(`[Popmelt] Failed to capture ${Wt}:`,Tt)}await cc(ht,r),window.scrollTo(ln.x,ln.y),g.current=!1}let ot=j.filter(ht=>(ht.pathname||E)===E),Pe=await rr(document.body,S,ot.length>0?i.annotations:[]);if(Pe.length>0){let ht=await ir(Pe);ht&&we.set(E,ht)}if(we.size===0)return!1;let et=yi(j,i.styleModifications,void 0,ee.length>0?ee:void 0),pt=JSON.stringify(et),mt=new Map;for(let ht of j){let ln=p.current.get(ht.id);if(ln&&ln.length>0&&mt.set(ht.id,ln),ht.groupId){for(let Wt of j)if(Wt.groupId===ht.groupId&&Wt.id!==ht.id){let Tt=p.current.get(Wt.id);Tt&&Tt.length>0&&mt.set(Wt.id,Tt)}}}let Ht=de.size>1;console.log(`[Popmelt] Submit: ${de.size} page(s), ${we.size} screenshot(s), pages: [${[...de.keys()].join(", ")}], cached: [${[...u.current.keys()].join(", ")}]`);let eo=Ht?we:(to=we.get(E))!=null?to:we;try{let ht=hi(i.activeColor),{jobId:ln,threadId:Wt}=await Ks(eo,pt,c,ht,w,$.id,mt.size>0?mt:void 0,mi());for(let un of mt.keys())p.current.delete(un);for(let un of de.keys())u.current.delete(un);let Tt=j.map(un=>un.id),Rn=i.styleModifications.filter(un=>!un.captured).map(un=>un.selector);We(un=>b(f({},un),{[ln]:{annotationIds:Tt,styleSelectors:Rn,color:i.activeColor,threadId:Wt}})),s({type:"MARK_CAPTURED"}),Wt&&Tt.length>0&&s({type:"SET_ANNOTATION_THREAD",payload:{ids:Tt,threadId:Wt}});let Sn=i.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),Io=((Sn!=null&&Sn[1]?parseFloat(Sn[1]):29)+60)%360;return s({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${Io})`}),!0}catch(ht){return console.error("[Pare] Failed to send to bridge:",ht),!1}},[i.annotations,i.styleModifications,i.spacingTokenChanges,i.activeColor,s,c,w,$.id,E,r]),$t=on(async(S,j,ee)=>{var de,we,le,ot;try{let Pe=hi(i.activeColor),{jobId:et}=await tl(S,j,c,Pe,w,$.id,ee,mi()),pt=(ot=(le=(de=Object.values(bt.current).find(Ht=>Ht.threadId===S))==null?void 0:de.color)!=null?le:(we=i.annotations.find(Ht=>Ht.threadId===S))==null?void 0:we.color)!=null?ot:i.activeColor;We(Ht=>b(f({},Ht),{[et]:{annotationIds:[],styleSelectors:[],color:pt,threadId:S}}));let mt=i.annotations.filter(Ht=>Ht.threadId===S&&(Ht.status==="waiting_input"||Ht.status==="resolved"||Ht.status==="needs_review"));mt.length>0&&(s({type:"SET_ANNOTATION_STATUS",payload:{ids:mt.map(Ht=>Ht.id),status:"in_flight"}}),We(Ht=>{let eo=Ht[et];return eo?b(f({},Ht),{[et]:b(f({},eo),{annotationIds:[...eo.annotationIds,...mt.map(to=>to.id)]})}):Ht})),l.dismissQuestion(S)}catch(Pe){console.error("[Pare] Failed to send reply:",Pe)}},[i.activeColor,i.annotations,c,l.dismissQuestion,s,w,$.id]),fn=_t(new Set);Ft(()=>{for(let S of l.pendingQuestions){if(fn.current.has(S.jobId))continue;fn.current.add(S.jobId);let j=S.annotationIds&&S.annotationIds.length>0?S.annotationIds:void 0;!j&&S.threadId&&(j=i.annotations.filter(ee=>ee.threadId===S.threadId).map(ee=>ee.id)),j&&j.length>0&&s({type:"SET_ANNOTATION_QUESTION",payload:{ids:j,question:S.question,threadId:S.threadId}})}},[l.pendingQuestions,s,i.annotations]);let dn=er(()=>{if(l.activeJobId&&l.activeJobId in oe)return oe[l.activeJobId].color;let S=Object.values(oe);return S.length>0?S[S.length-1].color:void 0},[l.activeJobId,oe]),gt=on(S=>{z(S)},[]),sn=on(S=>{if(!S){pe(null);return}let j=Xe.current.get(S);j&&j.length>0?pe(new Set(j)):pe(null)},[]),Pt=on(async S=>{try{let j=S?`${c}/cancel?jobId=${S}`:`${c}/cancel`;await fetch(j,{method:"POST"})}catch(j){}},[c]);Ft(()=>{i.activeTool==="model"&&De&&z(null)},[i.activeTool]);let Nt=_t(null);Ft(()=>{i.isAnnotating?Nt.current&&(z(Nt.current),Nt.current=null):De&&(Nt.current=De,z(null))},[i.isAnnotating]);let qt=er(()=>{if(!De)return null;for(let[S,j]of Object.entries(oe))if(j.threadId===De)return S;return null},[De,oe]),xt=De?i.annotations.find(S=>S.threadId===De):void 0,Qn=xt?i.annotations.indexOf(xt)+1:void 0,[Pn,Dt]=cn(!1),[jn,gn]=cn(0),mn=_t(null),ut=on(S=>{S?(mn.current&&(clearTimeout(mn.current),mn.current=null),Dt(!0)):mn.current=setTimeout(()=>{Dt(!1),mn.current=null},150)},[]),D=on(()=>{gn(S=>S+1),l.clearEvents(),z(null),se(new Set),Pt()},[l.clearEvents,Pt]);Ft(()=>()=>{mn.current&&clearTimeout(mn.current)},[]);let K=er(()=>({isEnabled:t}),[t]);return t?dc(uc.Provider,{value:K,children:[e,tr(wa,{state:i,dispatch:s,onScreenshot:Fe,inFlightAnnotationIds:it,inFlightStyleSelectors:Vt,inFlightSelectorColors:Kt,onAttachImages:tt,onReply:l.isConnected?$t:void 0,onViewThread:l.isConnected?gt:void 0,onCloseThread:S=>{z(null),S&&se(j=>new Set(j).add(S))},onModelComponentsAdd:l.isConnected?$e:void 0,onModelComponentFocus:l.isConnected?Ie:void 0,onModelComponentHover:Me,modelComponentNames:ge,modelPanelHoveredComponent:ne,modelSpacingTokenHover:Ne,highlightedAnnotationIds:be,focusedThreadAnnotationId:xt==null?void 0:xt.id,externalCanvasRef:a,toolbarRef:d}),tr(ec,{children:dc(Za,{children:[tr(Ja,{state:i,dispatch:s,onScreenshot:Fe,onSendToClaude:l.isConnected?In:void 0,hasActiveJobs:Object.keys(oe).length>0||l.activeJobIds.length>0,activeJobColor:dn,onCrosshairHover:ut,onClear:D,provider:w,onProviderChange:l.isConnected&&B.length>1?C:void 0,availableProviders:B,modelIndex:A,modelCount:R.length,modelLabel:$.label,onModelChange:l.isConnected?L:void 0,onViewThread:l.isConnected?gt:void 0,isThreadPanelOpen:De!==null,mcpStatus:v,onInstallMcp:l.isConnected?X:void 0,mcpJustInstalled:Z,bridgeUrl:c,isBridgeConnected:l.isConnected,modelSelectedComponent:ye,modelCanvasHoveredComponent:ze,onModelComponentHover:He,onSpacingTokenHover:Ve,onModifySpacingToken:l.isConnected?_:void 0,onDeleteSpacingToken:l.isConnected?xe:void 0,modelRefreshKey:ce,onModelComponentAdded:st,onModelComponentRemoved:ct,toolbarRef:d}),De&&l.isConnected&&tr(ac,{threadId:De,bridgeUrl:c,accentColor:(he=xt==null?void 0:xt.color)!=null?he:i.activeColor,isStreaming:qt!==null,streamingEvents:qt?l.events.filter(S=>S.data.jobId===qt):[],onClose:()=>z(null),onReply:$t,onCancel:qt?()=>Pt(qt):void 0,lastError:(Le=(Ue=l.lastErrorByJob)==null?void 0:Ue[qt!=null?qt:""])!=null?Le:l.lastCompletedJobId&&At.current.get(l.lastCompletedJobId)===De?(Je=l.lastErrorByJob)==null?void 0:Je[l.lastCompletedJobId]:void 0,toolbarRef:d,currentModel:$.id,currentProvider:w,annotationNumber:Qn,annotationText:xt==null?void 0:xt.text}),tr(qa,{bridge:l,bridgeUrl:c,inFlightJobs:oe,isVisible:Pn||l.lastResponseText!==null||l.activeJobIds.length>0,onHover:ut,clearSignal:jn,onReply:$t,onViewThread:gt,onCancel:Pt,onHoverJob:sn,isConnected:l.isConnected,dismissedThreadIds:re})]})})]}):tr(vg,{children:e})}function xg(){let e=hg(uc);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{bg as PopmeltProvider,xg as usePopmelt};
|
|
59
|
+
`,og={borderTop:"1px solid rgba(0, 0, 0, 0.12)",display:"flex",alignItems:"center",gap:4,padding:"0 8px 0 10px"};function ic(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,"").trim()}function sc(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}var As=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],rg=3e3,ig=250;function sg({color:e}){let[t,n]=po(0),[r,o]=po(()=>Math.floor(Math.random()*As.length));return uo(()=>{let i=setInterval(()=>n(l=>(l+1)%2),ig),s=setInterval(()=>o(l=>(l+1)%As.length),rg);return()=>{clearInterval(i),clearInterval(s)}},[]),xt("span",{style:{display:"inline-flex",alignItems:"center",gap:4},children:[xe("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?xt(Mr,{children:[xe("circle",{cx:"7",cy:"7",r:"2"}),xe("circle",{cx:"17",cy:"7",r:"2"}),xe("circle",{cx:"7",cy:"17",r:"2"}),xe("circle",{cx:"17",cy:"17",r:"2"})]}):xt(Mr,{children:[xe("circle",{cx:"12",cy:"6",r:"2"}),xe("circle",{cx:"6",cy:"12",r:"2"}),xe("circle",{cx:"18",cy:"12",r:"2"}),xe("circle",{cx:"12",cy:"18",r:"2"})]})}),xe("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:As[r]})]})}var mi=32,fi={width:mi,height:mi,objectFit:"cover",cursor:"pointer",border:"1px solid rgba(0,0,0,0.1)"};function lg(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],l=i.index+i[0].length,a=o+1<n.length?n[o+1].index:e.length,d=e.slice(l,a).trim();r.push({route:s,text:d})}return r}function ag(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 cg(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 dg({src:e,onClose:t}){return uo(()=>{let n=r=>{r.key==="Escape"&&(r.stopPropagation(),t())};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[t]),xe("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:xe("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 ug(e){var o;let t=String(e.data.tool||""),n=e.data.file?String(e.data.file):null,r=n?(o=n.split("/").pop())!=null?o:n: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"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}}var pg=new Set(["Read","Glob","Grep","WebFetch","WebSearch"]),fg=new Set(["Edit","Write","Bash"]);function gg(e){let t=0,n=!1;for(let r of e){if(r.type!=="tool_use")continue;let o=String(r.data.tool||"");fg.has(o)?n=!0:pg.has(o)&&t++}return!n&&t>=3?"researching":n?"applying changes":null}function mg(e){let t=[];for(let n of e)if(n.type==="tool_use"){let r=ug(n);r&&t.push({kind:"tool",label:r});let o=n.data.content?String(n.data.content):null,i=n.data.file?String(n.data.file):null;if(o&&i){let s=i.includes(".")?`.${i.split(".").pop().toLowerCase()}`:"",l=i.includes(".claude/plans/");t.push({kind:"file_content",file:i,content:o,ext:s,isPlan:l})}}else if(n.type==="delta"){let r=String(n.data.text||"");if(!r)continue;let o=t[t.length-1];o&&o.kind==="text"?o.text+=r:t.push({kind:"text",text:r})}else if(n.type==="thinking"){let r=String(n.data.text||"");if(!r)continue;let o=t[t.length-1];o&&o.kind==="thinking"?o.text+=r:t.push({kind:"thinking",text:r})}return t}function hg({file:e,content:t,ext:n,isPlan:r,onAccept:o}){var d;let[i,s]=po(r),l=(d=e.split("/").pop())!=null?d:e;return xt("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:[xt("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:[xe("span",{style:{fontSize:9,color:"#9ca3af"},children:i?"\u25BC":"\u25B6"}),xe("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:l}),r&&xe("span",{style:{fontSize:9,color:"#6366f1",fontFamily:"inherit"},children:"plan"})]}),i&&xt(Mr,{children:[xe("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"?ao(t):xe("pre",{style:{margin:0,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,whiteSpace:"pre-wrap"},children:t})}),r&&o&&xe("div",{style:{padding:"4px 8px",borderTop:"1px solid rgba(0,0,0,0.06)",display:"flex",justifyContent:"flex-end"},children:xe("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 dc({threadId:e,bridgeUrl:t,accentColor:n,isStreaming:r,streamingEvents:o,onClose:i,onReply:s,onCancel:l,lastError:a,onMouseEnter:d,toolbarRef:c,currentModel:u,currentProvider:p,annotationNumber:g,annotationText:S}){let[w,L]=po([]),[P,G]=po(!0),[k,T]=po(""),[b,B]=po([]),[J,N]=po(null),D=co(null),F=co(null),v=co(null),M=co(r),X=co(pi()),pe=co({x:0,y:0}),we=co(!1),ye=co({x:0,y:0,offsetX:0,offsetY:0}),le=co(!1),[,ze]=po(0);uo(()=>{try{let z=localStorage.getItem(Ls);if(z){let ve=JSON.parse(z);typeof ve.top=="number"&&typeof ve.left=="number"&&(le.current=!0,X.current={top:ve.top,left:ve.left},ze(ce=>ce+1))}}catch(z){}},[]),uo(()=>{let z=()=>{if(!le.current)X.current=pi();else{let ve=X.current,ce=window.innerWidth-gi-Kn;ve.top===Kn&&ve.left>=ce?X.current=pi():X.current={top:Math.max(Kn,Math.min(ve.top,window.innerHeight-Kn-200)),left:Math.max(Kn,Math.min(ve.left,ce))}}ze(ve=>ve+1)};return window.addEventListener("resize",z,{passive:!0}),()=>window.removeEventListener("resize",z)},[]),uo(()=>{let z=v.current;if(!z)return;let ve=de=>{de.button!==0||de.target.closest("button")||(de.preventDefault(),de.stopPropagation(),we.current=!0,ye.current={x:de.clientX,y:de.clientY,offsetX:pe.current.x,offsetY:pe.current.y})},ce=de=>{if(!we.current)return;let $=ye.current,oe=$.offsetX+(de.clientX-$.x),se=$.offsetY+(de.clientY-$.y),be=Math.max(Kn,Math.min(window.innerWidth-gi-Kn,X.current.left+oe)),ge=Math.max(Kn,X.current.top+se);pe.current={x:be-X.current.left,y:ge-X.current.top};let ke=F.current;ke&&(ke.style.top=`${ge}px`,ke.style.left=`${be}px`,ke.style.height=`${rc(ge,be,c==null?void 0:c.current)}px`)},Ce=()=>{if(!we.current)return;let de=X.current.top+pe.current.y,$=X.current.left+pe.current.x;X.current={top:de,left:$},pe.current={x:0,y:0},le.current=!0;try{localStorage.setItem(Ls,JSON.stringify({top:de,left:$}))}catch(oe){}we.current=!1},tt=()=>{X.current=pi(),pe.current={x:0,y:0},le.current=!1;try{localStorage.removeItem(Ls)}catch(de){}ze(de=>de+1)};return z.addEventListener("mousedown",ve),window.addEventListener("mousemove",ce),window.addEventListener("mouseup",Ce),z.addEventListener("dblclick",tt),()=>{z.removeEventListener("mousedown",ve),window.removeEventListener("mousemove",ce),window.removeEventListener("mouseup",Ce),z.removeEventListener("dblclick",tt)}},[]);let Ie=ui(()=>{fetch(`${t}/thread/${e}`).then(z=>z.json()).then(z=>{var ve;L((ve=z.messages)!=null?ve:[]),G(!1)}).catch(()=>G(!1))},[t,e]);uo(()=>{G(!0),Ie()},[Ie]),uo(()=>{M.current&&!r&&Ie(),M.current=r},[r,Ie]);let te=o?mg(o):[],De=o?gg(o):null;uo(()=>{D.current&&(D.current.scrollTop=D.current.scrollHeight)},[w,te.length,r]),uo(()=>{let z=ve=>{ve.key==="Escape"&&(ve.stopPropagation(),i())};return document.addEventListener("keydown",z),()=>document.removeEventListener("keydown",z)},[i]);let Oe=ui(()=>{if(!k.trim()||!s)return;let z=k.trim(),ve=b.length>0?b:void 0,ce=ve?ve.map(Ce=>URL.createObjectURL(Ce)):void 0;L(Ce=>[...Ce,f({role:"human",timestamp:Date.now(),jobId:"pending",replyToQuestion:z},ce?{replyImageUrls:ce}:{})]),s(e,z,ve),T(""),B([])},[k,b,e,s]),je=ui(z=>{let ve=z.clipboardData.items,ce=[];for(let Ce=0;Ce<ve.length;Ce++){let tt=ve[Ce];if(tt.type.startsWith("image/")){let de=tt.getAsFile();de&&ce.push(de)}}ce.length>0&&(z.preventDefault(),B(Ce=>[...Ce,...ce]))},[]),We=ui(z=>{z.key==="Enter"&&(z.metaKey||z.ctrlKey)&&(z.preventDefault(),Oe())},[Oe]),Re=X.current.top+pe.current.y,at=X.current.left+pe.current.x,yt=rc(Re,at,c==null?void 0:c.current);return xt(Mr,{children:[xe("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:z=>{z.target===z.currentTarget&&i()},style:{position:"fixed",inset:0,zIndex:9999}}),xt("div",{ref:F,style:h(f({},Qf),{height:yt,position:"fixed",top:Re,left:at,zIndex:1e4}),"data-devtools":"thread-panel",onMouseEnter:d,children:[(()=>{let ve=`<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>`,ce=`url("data:image/svg+xml,${encodeURIComponent(ve)}")`;return xt(Mr,{children:[xe("style",{children:`@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
60
|
+
[data-popmelt-reply]::placeholder { opacity: 0.35; }`}),xe("div",{style:f({position:"absolute",inset:-3,padding:5,backgroundImage:ce,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"})})]})})(),xt("div",{style:{display:"flex",flexDirection:"column",overflow:"hidden",flex:1,minHeight:0},children:[xt("div",{ref:v,style:h(f({},eg),{backgroundColor:n,color:"#ffffff",cursor:"grab",userSelect:"none",WebkitUserSelect:"none"}),children:[xt("span",{style:{display:"flex",alignItems:"center",gap:6,minWidth:0},children:[xe("span",{style:{flexShrink:0},children:g?`${g}.`:"Conversation"}),S&&xe("span",{style:{opacity:.7,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:S})]}),xe("button",{onClick:i,style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1},children:"\xD7"})]}),xe("style",{dangerouslySetInnerHTML:{__html:ng}}),xt("div",{ref:D,style:tg,"data-devtools":"thread-panel-messages",children:[P&&xe("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!P&&w.length===0&&!r&&xe("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),w.map((z,ve)=>{let ce=z.role==="human";if(z.cancelled||z.error)return xt("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)",opacity:ve===w.length-1?1:.5},children:[xt("div",{style:{display:"flex",alignItems:"center",gap:4},children:[xe("span",{style:{fontSize:11,color:z.error?"#dc2626":"#9ca3af",fontStyle:"italic"},children:z.error?"Error":"Cancelled"}),xe("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:sc(z.timestamp)})]}),z.error&&xe("div",{style:{fontSize:12,color:"#6b7280",marginTop:4,lineHeight:1.4},children:z.error})]},`${z.jobId}-${ve}`);let Ce=ce?z.replyToQuestion||z.feedbackSummary||"(annotation)":ic(z.responseText||""),tt=ce?void 0:z.question,de=!ce&&z.resolutions&&z.resolutions.length>0,$=!ce&&z.toolsUsed&&z.toolsUsed.length>0;if(!Ce&&!tt&&!de)return null;let oe=ve===w.length-1;return xt("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)",opacity:oe?1:.5},children:[xt("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[!ce&&xe(Ss,{provider:z.provider,size:11,style:{color:"#6b7280"}}),xe("span",{style:{fontWeight:600,fontSize:11,color:ce?n:"#6b7280"},children:ce?"You":ws(z.model,z.provider)}),xe("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:sc(z.timestamp)})]}),ce&&!z.replyToQuestion&&(()=>{let se=Ce?lg(Ce):null;if(se&&z.screenshotUrls)return xe("div",{style:{display:"flex",flexDirection:"column",gap:4},children:se.map((ge,ke)=>{var He;let ae=(He=z.screenshotUrls)==null?void 0:He[ge.route],Se=ae?`${t}${ae}`:null;return xt("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[Se?xe("img",{src:Se,title:ge.route,style:h(f({},fi),{flexShrink:0,marginTop:1}),onClick:()=>N(Se)}):xe("div",{style:{width:mi,height:mi,flexShrink:0}}),xt("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:[xe("code",{style:{fontSize:10,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px"},children:ge.route}),ge.text&&xe("div",{style:{marginTop:2},children:ao(ge.text)})]})]},ke)})});let be=z.screenshotUrl?`${t}${z.screenshotUrl}`:null;return be&&Ce?xt("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[xe("img",{src:be,title:"screenshot",style:h(f({},fi),{flexShrink:0,marginTop:1}),onClick:()=>N(be)}),xe("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:Ce.includes(`
|
|
61
|
+
`)?ao(Ce):Ce})]}):Ce?xe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:Ce.includes(`
|
|
62
|
+
`)?ao(Ce):Ce}):null})(),ce&&z.replyToQuestion&&Ce&&xe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:Ce.includes(`
|
|
63
|
+
`)?ao(Ce):Ce}),!ce&&Ce&&xe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:ao(Ce)}),ce&&z.replyToQuestion&&(()=>{let se=ag(z,t);return se.length===0?null:xe("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:se.map((be,ge)=>xe("img",{src:be.url,title:be.label,style:fi,onClick:()=>N(be.url)},ge))})})(),ce&&!z.replyToQuestion&&(()=>{let se=cg(z,t);return se.length===0?null:xe("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:se.map((be,ge)=>xe("img",{src:be.url,title:be.label,style:fi,onClick:()=>N(be.url)},ge))})})(),tt&&xe("div",{style:{marginTop:Ce?4:0,lineHeight:1.5,wordBreak:"break-word"},children:ao(tt)}),($||de)&&xt("div",{style:{marginTop:Ce||tt?6:0,padding:"4px 8px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#6b7280"},children:[$&&xe("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:z.toolsUsed.map((se,be)=>xe("div",{children:se},be))}),de&&z.resolutions.map((se,be)=>{var ae;let ge=(ae=se.finalScope)!=null?ae:se.inferredScope,ke=ge?`${ge.breadth} \xB7 ${ge.target}`:null;return xt("div",{style:{marginTop:$?4:0},children:[xe("span",{style:{color:se.status==="resolved"?"#10b981":"#f59e0b"},children:se.status==="resolved"?"Done":"Needs review"}),ke&&xe("span",{style:{marginLeft:6,padding:"1px 5px",backgroundColor:"rgba(0, 0, 0, 0.06)",fontSize:10,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace"},children:ke}),se.summary?` \u2014 ${se.summary}`:""]},be)})]})]},`${z.jobId}-${ve}`)}),r&&xt("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)"},children:[xt("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[xe(Ss,{provider:p,size:11,style:{color:"#6b7280"}}),xe("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:ws(u,p)}),De&&xe("span",{style:{fontSize:10,color:"#b0b7c3",fontStyle:"italic"},children:De}),xt("span",{style:{marginLeft:"auto",display:"flex",alignItems:"center",gap:6},children:[xe(sg,{color:n}),l&&xe("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"},children:"Cancel"})]})]}),te.map((z,ve)=>{if(z.kind==="tool")return xe("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",lineHeight:1.6},children:z.label},ve);if(z.kind==="file_content")return xe(hg,{file:z.file,content:z.content,ext:z.ext,isPlan:z.isPlan,onAccept:z.isPlan&&s?()=>s(e,"Looks good, please proceed with implementation."):void 0},ve);if(z.kind==="thinking")return xe("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:z.text},ve);let ce=ic(z.text);return ce?xe("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,lineHeight:1.5,wordBreak:"break-word"},children:ao(ce)},ve):null})]})]}),!r&&a&&xt("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",borderBottom:"1px solid rgba(0,0,0,0.04)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[xe("span",{style:{fontWeight:600},children:"Error: "}),a]}),s&&xt("div",{style:{flexShrink:0,position:"relative"},children:[b.length>0&&xe("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:b.map((z,ve)=>xt("span",{onClick:()=>B(ce=>ce.filter((Ce,tt)=>tt!==ve)),onMouseEnter:ce=>{let Ce=ce.currentTarget.querySelector("[data-chip-x]");Ce&&(Ce.style.color="#ef4444")},onMouseLeave:ce=>{let Ce=ce.currentTarget.querySelector("[data-chip-x]");Ce&&(Ce.style.color="#9ca3af")},style:{display:"inline-flex",alignItems:"center",gap:5,fontSize:10,color:"#fff",backgroundColor:"rgba(0,0,0,1)",backdropFilter:"blur(4px)",padding:"2px 5px 2px 8px",cursor:"pointer"},children:["image ",ve+1,xe("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"#9ca3af"},children:"\xD7"})]},ve))}),xt("div",{style:og,children:[xe("input",{"data-popmelt-reply":!0,value:k,onChange:z=>T(z.target.value),onKeyDown:We,onPaste:je,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:nn,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),xe("button",{onClick:Oe,disabled:!k.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:k.trim()?"pointer":"default",color:k.trim()?"#1f2937":"rgba(0,0,0,0.2)",flexShrink:0},children:xt("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[xe("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"}),xe("path",{d:"M6 12h16"})]})})]})]})]})]}),J&&xe(dg,{src:J,onClose:()=>N(null)})]})}import{jsx as lr,jsxs as pc}from"react/jsx-runtime";var Ns=yg(null),Ps="devtools-provider",Os="devtools-model",Bs="devtools-open-thread-id";async function uc(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 xg={0:0,1:1},vg={0:0,1:1,2:1};function Sg(e,t,n){var o,i;let r=t==="codex"?di:ci;return e==="claude"&&t==="codex"?(o=xg[n])!=null?o:Math.min(n,r.length-1):e==="codex"&&t==="claude"&&(i=vg[n])!=null?i:Math.min(n,r.length-1)}function wg({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 Ue,Xe,Le,qe,At,Bt,an;let[i,s]=xl(),l=yl(n,t),a=Jt(null),d=Jt(null),c=(Ue=ml())!=null?Ue:n,u=Jt(new Map),p=Jt(new Map),g=Jt(!1),S=Wo(),[w,L]=fn(()=>typeof window=="undefined"?"claude":localStorage.getItem(Ps)||"claude"),[P,G]=fn(()=>{if(typeof window=="undefined")return 0;let C=localStorage.getItem(Os);return C&&parseInt(C,10)||0}),[k,T]=fn([]),[b,B]=fn({}),[J,N]=fn(!1);Yt(()=>{l.isConnected&&Ks(c).then(C=>{if(!C)return;let A=Object.entries(C.providers).filter(([,Te])=>Te.available).map(([Te])=>Te);A.length>0&&T(A);let ee={};for(let[Te,Fe]of Object.entries(C.providers))Fe.mcp&&(ee[Te]=Fe.mcp);B(ee),Object.values(ee).every(Te=>Te.found)&&N(!1)})},[l.isConnected,l.capabilitiesVersion,c]),Yt(()=>{if(k.length>0&&!k.includes(w)){let C=k[0];L(C),localStorage.setItem(Ps,C)}},[k,w]);let D=w==="codex"?di:ci,F=(Xe=D[P])!=null?Xe:D[0],v=rn(C=>{let A=w;L(C),localStorage.setItem(Ps,C);let ee=Sg(A,C,P);G(ee),localStorage.setItem(Os,String(ee))},[w,P]),M=rn(C=>{G(C),localStorage.setItem(Os,String(C))},[]),X=rn(async()=>{let C=await Qs(c);if(!C)return;let A={};for(let[ee,ie]of Object.entries(C.capabilities.providers))ie.mcp&&(A[ee]=ie.mcp);B(A),C.results.some(ee=>ee.installed)&&N(!0)},[c]),[pe,we]=fn(new Set),[ye,le]=fn(null),[ze,Ie]=fn(null),[te,De]=fn(null),[Oe,je]=fn(null);Yt(()=>{l.isConnected&&Fo(c).then(C=>{C!=null&&C.components&&we(new Set(Object.keys(C.components)))})},[l.isConnected,c]);let We=rn(async C=>{let A=[];for(let ee of C)try{(await el(ee,c)).added&&A.push(ee)}catch(ie){console.error("[Popmelt] Failed to add component to model:",ee,ie)}A.length>0&&(we(ee=>{let ie=new Set(ee);for(let Te of A)ie.add(Te);return ie}),le(A[A.length-1]))},[c]),Re=rn(C=>{le(C)},[]),at=rn(()=>{Fo(c).then(C=>{C!=null&&C.components&&we(new Set(Object.keys(C.components)))})},[c]),yt=rn(async C=>{try{(await tl(C,c)).removed&&we(ee=>{let ie=new Set(ee);return ie.delete(C),ie})}catch(A){console.error("[Popmelt] Failed to remove component from model:",A)}},[c]),z=rn((C,A)=>{s({type:"MODIFY_SPACING_TOKEN",payload:C}),s({type:"ADD_SPACING_TOKEN_CHANGE",payload:A})},[s]),ve=rn((C,A)=>{s({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:C,originalValue:A}})},[s]),[ce,Ce]=fn(0),tt=Jt([]);Yt(()=>{let C=tt.current,A=i.spacingTokenMods;tt.current=A;let ee=new Map(C.map(Fe=>[Fe.tokenPath,Fe])),ie=new Map(A.map(Fe=>[Fe.tokenPath,Fe])),Te=!1;for(let[Fe,Je]of ie){let st=ee.get(Fe);if(!(st&&st.currentValue===Je.currentValue)){Te=!0,Je.currentValue==="__deleted__"?nl(Fe,c).catch(Et=>console.error("[Popmelt] Failed to sync token delete:",Et)):xi(Fe,Je.currentValue,c).catch(Et=>console.error("[Popmelt] Failed to sync token update:",Et));for(let Et of Je.targets){let St=document.querySelector(Et.selector);if(St)if(Je.currentValue==="__deleted__")St.style.removeProperty(Et.property);else{let gt=Je.currentPx;gt>0&&St.style.setProperty(Et.property,`${gt}px`,"important")}}}}for(let[Fe,Je]of ee)if(!ie.has(Fe)){Te=!0,xi(Fe,Je.originalValue,c).catch(st=>console.error("[Popmelt] Failed to restore token on undo:",st));for(let st of Je.targets){let Et=document.querySelector(st.selector);Et&&Et.style.removeProperty(st.property)}}Te&&Ce(Fe=>Fe+1)},[i.spacingTokenMods,c]);let[de,$]=fn(()=>typeof window=="undefined"?null:localStorage.getItem(Bs)||null),oe=Jt(null),[se,be]=fn(new Set),[ge,ke]=fn(null);Yt(()=>{de?localStorage.setItem(Bs,de):localStorage.removeItem(Bs)},[de]);let ae="popmelt-in-flight-jobs",[Se,He]=fn(()=>{try{let C=localStorage.getItem(ae);return C?JSON.parse(C):{}}catch(C){return{}}});Yt(()=>{try{Object.keys(Se).length>0?localStorage.setItem(ae,JSON.stringify(Se)):localStorage.removeItem(ae)}catch(C){}},[Se]),Yt(()=>{let C=A=>{if(A.key===ae)try{let ee=A.newValue?JSON.parse(A.newValue):{};He(ee)}catch(ee){}};return window.addEventListener("storage",C),()=>window.removeEventListener("storage",C)},[]);let Ft=Jt(new Map),Gt=Jt(new Map);Yt(()=>{for(let[C,A]of Object.entries(Se))A.annotationIds.length>0&&Ft.current.set(C,A.annotationIds),A.threadId&&Gt.current.set(C,A.threadId)},[Se]);let it=Jt(!1);Yt(()=>{if(it.current||i.annotations.length===0)return;it.current=!0;let C=new Set;for(let ee of Object.values(Se))for(let ie of ee.annotationIds)C.add(ie);let A=i.annotations.filter(ee=>C.has(ee.id)?!1:!!(ee.status==="in_flight"||(ee.status==="pending"||!ee.status)&&(ee.captured||ee.threadId))).map(ee=>ee.id);A.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:A,status:"dismissed"}})},[i.annotations,Se,s]);let Qt=sr(()=>{let C=new Set;for(let A of Object.values(Se))for(let ee of A.annotationIds)C.add(ee);return C},[Se]),sn=sr(()=>{let C=new Set;for(let A of Object.values(Se))for(let ee of A.styleSelectors)C.add(ee);return C},[Se]),Lt=sr(()=>{let C=new Map;for(let A of Object.values(Se)){for(let ee of A.styleSelectors)C.set(ee,A.color);for(let ee of A.annotationIds){let ie=i.annotations.find(Te=>Te.id===ee);if(ie&&(ie.linkedSelector&&C.set(ie.linkedSelector,A.color),ie.groupId))for(let Te of i.annotations)Te.groupId===ie.groupId&&Te.linkedSelector&&C.set(Te.linkedSelector,A.color)}}return C},[Se,i.annotations]),_t=Jt(i.annotations);_t.current=i.annotations;let Ct=Jt(i.styleModifications);Ct.current=i.styleModifications;let Mt=Jt(Se);Mt.current=Se,Yt(()=>{let C=null,A=()=>{var st,Et;if(Object.keys(Mt.current).length>0)return;let ie=_t.current,Te=Ct.current,Fe=[],Je=[];for(let St of ie){if(!St.linkedSelector||!St.linkedSelector.startsWith("[data-pm=")||St.pathname||St.captured||St.status&&St.status!=="pending")continue;let gt=document.querySelector(St.linkedSelector);!gt&&((Et=(st=St.elements)==null?void 0:st[0])!=null&&Et.selector)&&(gt=document.querySelector(St.elements[0].selector)),gt||Fe.push(St.linkedSelector)}for(let St of Te)document.querySelector(St.selector)||Je.push(St.selector);(Fe.length>0||Je.length>0)&&s({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:Fe,styleSelectors:Je}})},ee=new MutationObserver(ie=>{ie.some(Te=>Te.removedNodes.length>0)&&(C&&clearTimeout(C),C=setTimeout(A,3e3))});return ee.observe(document.body,{childList:!0,subtree:!0}),()=>{ee.disconnect(),C&&clearTimeout(C)}},[s]);let gn=Jt(typeof window!="undefined"?window.location.pathname:"/");Yt(()=>{let C=ie=>{if(g.current)return;let Te=window.location.pathname;if(ie===Te)return;let Fe=_t.current.filter(st=>{var Et;return st.pathname===ie&&((Et=st.status)!=null?Et:"pending")==="pending"});if(console.log(`[Popmelt] Navigation from ${ie} \u2192 ${Te}, ${Fe.length} pending annotations on departing page`),Fe.length===0)return;let Je=a.current;if(!Je){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if(dr(document.body,Je,Fe).then(st=>ur(st)).then(st=>{st?(p.current.set(ie,st),console.log(`[Popmelt] Cached screenshot for ${ie} (${(st.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${ie}`)}).catch(st=>{console.warn("[Popmelt] Capture-on-leave failed:",st)}),p.current.size>20){let st=[...p.current.entries()];p.current=new Map(st.slice(-10))}},A=ie=>{var Fe;let Te=(Fe=ie.detail)==null?void 0:Fe.prevPath;Te&&(C(Te),gn.current=window.location.pathname)},ee=()=>{let ie=gn.current;C(ie),gn.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",A),window.addEventListener("popstate",ee),()=>{window.removeEventListener("popmelt:locationchange",A),window.removeEventListener("popstate",ee)}},[]),Yt(()=>{l.lastCompletedJobId&&l.lastCompletedJobId in Se&&He(C=>{var ie;let Te=C,{[ie=l.lastCompletedJobId]:A}=Te;return zn(Te,[go(ie)])})},[l.lastCompletedJobId]);let zt=Jt(new Set),An=Jt(!1);Yt(()=>{if(!l.isConnected){An.current=!1;return}An.current||(An.current=!0,Ho(c).then(async C=>{var Je,st,Et,St;if(!C)return;let A=(Je=C.activeJobs)!=null?Je:[],ee=(st=C.recentJobs)!=null?st:[],ie=new Set(A.map(gt=>gt.id)),Te=JSON.parse(localStorage.getItem(ae)||"{}"),Fe=new Set;for(let gt of Object.values(Te))if(gt.annotationIds)for(let Nt of gt.annotationIds)Fe.add(Nt);He(gt=>{var bt,hn,yn;let Nt=f({},gt);for(let ct of Object.keys(Nt))ct.startsWith("_pending_")||ie.has(ct)||delete Nt[ct];for(let ct of A)!Nt[ct.id]&&((bt=ct.annotationIds)!=null&&bt.length||ct.threadId)&&(Nt[ct.id]={annotationIds:(hn=ct.annotationIds)!=null?hn:[],styleSelectors:[],color:(yn=ct.color)!=null?yn:"#888",threadId:ct.threadId});let ut=new Set;for(let ct of ee)if(ct.annotationIds)for(let En of ct.annotationIds)ut.add(En);for(let ct of Object.keys(Nt)){if(!ct.startsWith("_pending_"))continue;let En=Nt[ct];En&&En.annotationIds.some(Fn=>ut.has(Fn))&&delete Nt[ct]}return Nt});for(let gt of ee)if(gt.status==="done"&&(Et=gt.annotationIds)!=null&&Et.length&>.annotationIds.some(Nt=>Fe.has(Nt))&&!zt.current.has(gt.id))try{let Nt=await Lr(c,gt.id);if(!Nt)continue;let ut=Nt.events.find(bt=>bt.type==="done");ut&&Array.isArray(ut.resolutions)&&(zt.current.add(gt.id),s({type:"APPLY_RESOLUTIONS",payload:{resolutions:ut.resolutions,threadId:(St=ut.threadId)!=null?St:void 0}}))}catch(Nt){}}))},[l.isConnected,c,s]),Yt(()=>{let C=l.events.filter(A=>A.type==="done"&&A.data.resolutions);for(let A of C){let ee=A.data.jobId;zt.current.has(ee)||(zt.current.add(ee),Array.isArray(A.data.resolutions)&&s({type:"APPLY_RESOLUTIONS",payload:{resolutions:A.data.resolutions,threadId:A.data.threadId}}))}},[l.events,s]);let ft=Jt(new Set);Yt(()=>{let C=l.events.filter(A=>A.type==="error"&&A.data.cancelled);for(let A of C){let ee=A.data.jobId;if(!ee||ft.current.has(ee))continue;ft.current.add(ee);let ie=Se[ee];ie&&ie.annotationIds.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:ie.annotationIds,status:"dismissed"}})}},[l.events,Se,s]);let Q=Jt(0);Yt(()=>{let C=l.incrementalResolutions;if(C.length<=Q.current)return;let A=C.slice(Q.current);Q.current=C.length,s({type:"APPLY_RESOLUTIONS",payload:{resolutions:A}})},[l.incrementalResolutions,s]),Yt(()=>{l.incrementalResolutions.length===0&&(Q.current=0)},[l.incrementalResolutions.length]);let Ne=rn(async()=>{let C=a.current;if(!C)return!1;let A=await dr(document.body,C,i.annotations);if(A.length===0)return!1;let ee=await Sl(A,i.annotations,i.styleModifications);return ee&&s({type:"MARK_CAPTURED"}),ee},[i.annotations,i.styleModifications,s]),nt=rn((C,A)=>{let ee=u.current.get(C)||[];u.current.set(C,[...ee,...A])},[]),Hn=rn(async()=>{var Fn;let C=a.current;if(!C)return!1;let A=i.annotations.filter($e=>{var mt;return((mt=$e.status)!=null?mt:"pending")==="pending"}),ee=i.spacingTokenChanges.filter($e=>!$e.captured);if(A.length===0&&i.styleModifications.filter($e=>!$e.captured).length===0&&ee.length===0)return!1;let ie=new Map;for(let $e of A){let mt=$e.pathname||S;ie.has(mt)||ie.set(mt,[]),ie.get(mt).push($e)}let Te=new Map,Fe=[...ie.keys()].filter($e=>$e!==S);if(Fe.length>0){let $e=S,mt={x:window.scrollX,y:window.scrollY};g.current=!0;for(let $t of Fe)try{console.log(`[Popmelt] Navigating to ${$t} for screenshot capture`),await uc($t,r),window.location.pathname!==$t&&console.warn(`[Popmelt] Navigation to ${$t} did not take effect (at ${window.location.pathname})`);let vn=ie.get($t)||[],fo=await dr(document.body,C,vn),_n=await ur(fo);_n&&(Te.set($t,_n),console.log(`[Popmelt] Captured ${$t} (${(_n.size/1024).toFixed(0)}KB)`))}catch(vn){console.warn(`[Popmelt] Failed to capture ${$t}:`,vn)}await uc($e,r),window.scrollTo(mt.x,mt.y),g.current=!1}let Je=A.filter($e=>($e.pathname||S)===S),st=await dr(document.body,C,Je.length>0?i.annotations:[]);if(st.length>0){let $e=await ur(st);$e&&Te.set(S,$e)}if(Te.size===0)return!1;let Et=Ei(A,i.styleModifications,void 0,ee.length>0?ee:void 0),St=JSON.stringify(Et),gt=new Map;for(let $e of A){let mt=u.current.get($e.id);if(mt&&mt.length>0&>.set($e.id,mt),$e.groupId){for(let $t of A)if($t.groupId===$e.groupId&&$t.id!==$e.id){let vn=u.current.get($t.id);vn&&vn.length>0&>.set($t.id,vn)}}}let Nt=ie.size>1;console.log(`[Popmelt] Submit: ${ie.size} page(s), ${Te.size} screenshot(s), pages: [${[...ie.keys()].join(", ")}], cached: [${[...p.current.keys()].join(", ")}]`);let ut=Nt?Te:(Fn=Te.get(S))!=null?Fn:Te,bt=A.map($e=>$e.id),hn=i.styleModifications.filter($e=>!$e.captured).map($e=>$e.selector),yn=Ci(i.activeColor),ct=`_pending_${Date.now()}`,En={annotationIds:bt,styleSelectors:hn,color:i.activeColor,threadId:void 0};try{let $e=JSON.parse(localStorage.getItem(ae)||"{}");$e[ct]=En,localStorage.setItem(ae,JSON.stringify($e))}catch($e){}He($e=>h(f({},$e),{[ct]:En}));try{let{jobId:$e,threadId:mt}=await Zs(ut,St,c,yn,w,F.id,gt.size>0?gt:void 0,wi());for(let Xt of gt.keys())u.current.delete(Xt);for(let Xt of ie.keys())p.current.delete(Xt);let $t=h(f({},En),{threadId:mt});try{let Xt=JSON.parse(localStorage.getItem(ae)||"{}");delete Xt[ct],Xt[$e]=$t,localStorage.setItem(ae,JSON.stringify(Xt))}catch(Xt){}He(Xt=>{let ar=Xt,{[ct]:hi}=ar,Ir=zn(ar,[go(ct)]);return h(f({},Ir),{[$e]:$t})}),s({type:"MARK_CAPTURED"}),mt&&bt.length>0&&s({type:"SET_ANNOTATION_THREAD",payload:{ids:bt,threadId:mt}});let vn=i.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),_n=((vn!=null&&vn[1]?parseFloat(vn[1]):29)+60)%360;return s({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${_n})`}),!0}catch($e){try{let mt=JSON.parse(localStorage.getItem(ae)||"{}");delete mt[ct],localStorage.setItem(ae,JSON.stringify(mt))}catch(mt){}return He(mt=>{let fo=mt,{[ct]:$t}=fo;return zn(fo,[go(ct)])}),console.error("[Pare] Failed to send to bridge:",$e),!1}},[i.annotations,i.styleModifications,i.spacingTokenChanges,i.activeColor,s,c,w,F.id,S,r]),Vt=rn(async(C,A,ee)=>{var Et,St,gt,Nt;let ie=(Nt=(gt=(Et=Object.values(Mt.current).find(ut=>ut.threadId===C))==null?void 0:Et.color)!=null?gt:(St=i.annotations.find(ut=>ut.threadId===C))==null?void 0:St.color)!=null?Nt:i.activeColor,Te=i.annotations.filter(ut=>ut.threadId===C&&(ut.status==="waiting_input"||ut.status==="resolved"||ut.status==="needs_review")),Fe=Te.map(ut=>ut.id),Je=`_pending_reply_${Date.now()}`,st={annotationIds:Fe,styleSelectors:[],color:ie,threadId:C};try{let ut=JSON.parse(localStorage.getItem(ae)||"{}");ut[Je]=st,localStorage.setItem(ae,JSON.stringify(ut))}catch(ut){}He(ut=>h(f({},ut),{[Je]:st}));try{let ut=Ci(i.activeColor),{jobId:bt}=await ol(C,A,c,ut,w,F.id,ee,wi()),hn=f({},st);try{let yn=JSON.parse(localStorage.getItem(ae)||"{}");delete yn[Je],yn[bt]=hn,localStorage.setItem(ae,JSON.stringify(yn))}catch(yn){}He(yn=>{let Fn=yn,{[Je]:ct}=Fn,En=zn(Fn,[go(Je)]);return h(f({},En),{[bt]:hn})}),Te.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:Fe,status:"in_flight"}}),l.dismissQuestion(C)}catch(ut){try{let bt=JSON.parse(localStorage.getItem(ae)||"{}");delete bt[Je],localStorage.setItem(ae,JSON.stringify(bt))}catch(bt){}He(bt=>{let ct=bt,{[Je]:hn}=ct;return zn(ct,[go(Je)])}),console.error("[Pare] Failed to send reply:",ut)}},[i.activeColor,i.annotations,c,l.dismissQuestion,s,w,F.id]),wn=Jt(new Set);Yt(()=>{for(let C of l.pendingQuestions){if(wn.current.has(C.jobId))continue;wn.current.add(C.jobId);let A=C.annotationIds&&C.annotationIds.length>0?C.annotationIds:void 0;!A&&C.threadId&&(A=i.annotations.filter(ee=>ee.threadId===C.threadId).map(ee=>ee.id)),A&&A.length>0&&s({type:"SET_ANNOTATION_QUESTION",payload:{ids:A,question:C.question,threadId:C.threadId}})}},[l.pendingQuestions,s,i.annotations]);let xn=sr(()=>{if(l.activeJobId&&l.activeJobId in Se)return Se[l.activeJobId].color;let C=Object.values(Se);return C.length>0?C[C.length-1].color:void 0},[l.activeJobId,Se]),vt=rn(C=>{$(C)},[]),mn=rn(C=>{var ie;let A=Se[C],ee=(A==null?void 0:A.threadId)||Gt.current.get(C);ee&&(oe.current=(ie=A==null?void 0:A.color)!=null?ie:null,$(ee))},[Se]),en=rn(C=>{if(!C){ke(null);return}let A=Ft.current.get(C);A&&A.length>0?ke(new Set(A)):ke(null)},[]),jt=rn(async C=>{try{let A=C?`${c}/cancel?jobId=${C}`:`${c}/cancel`;await fetch(A,{method:"POST"})}catch(A){}},[c]);Yt(()=>{i.activeTool==="model"&&de&&$(null)},[i.activeTool]);let In=Jt(null);Yt(()=>{i.isAnnotating?In.current&&($(In.current),In.current=null):de&&(In.current=de,$(null))},[i.isAnnotating]);let It=sr(()=>{if(!de)return null;for(let[C,A]of Object.entries(Se))if(A.threadId===de)return C;for(let[C,A]of Object.entries(l.activeJobThreads))if(A===de)return C;return null},[de,Se,l.activeJobThreads]),ln=de?i.annotations.find(C=>C.threadId===de):void 0,Yn=ln?i.annotations.indexOf(ln)+1:void 0,[Ut,qn]=fn(!1),[Cn,no]=fn(0),rt=Jt(null),H=rn(C=>{C?(rt.current&&(clearTimeout(rt.current),rt.current=null),qn(!0)):rt.current=setTimeout(()=>{qn(!1),rt.current=null},150)},[]),q=rn(()=>{no(C=>C+1),l.clearEvents(),$(null),be(new Set),jt()},[l.clearEvents,jt]);Yt(()=>()=>{rt.current&&clearTimeout(rt.current)},[]);let[ne,Pe]=fn(!1);Yt(()=>{Pe(!0)},[]);let he=sr(()=>({isEnabled:t}),[t]);return!t||!ne?lr(Ns.Provider,{value:he,children:e}):pc(Ns.Provider,{value:he,children:[e,lr(Ea,{state:i,dispatch:s,onScreenshot:Ne,inFlightAnnotationIds:Qt,inFlightStyleSelectors:sn,inFlightSelectorColors:Lt,onAttachImages:nt,onReply:l.isConnected?Vt:void 0,onViewThread:l.isConnected?vt:void 0,onCloseThread:C=>{$(null),C&&be(A=>new Set(A).add(C))},onModelComponentsAdd:l.isConnected?We:void 0,onModelComponentFocus:l.isConnected?Re:void 0,onModelComponentHover:Ie,modelComponentNames:pe,modelPanelHoveredComponent:te,modelSpacingTokenHover:Oe,highlightedAnnotationIds:ge,focusedThreadAnnotationId:ln==null?void 0:ln.id,externalCanvasRef:a,toolbarRef:d}),lr(nc,{children:pc(ec,{children:[lr(Ka,{state:i,dispatch:s,onScreenshot:Ne,onSendToClaude:l.isConnected?Hn:void 0,hasActiveJobs:Object.keys(Se).length>0||l.activeJobIds.length>0,activeJobColor:xn,onCrosshairHover:H,onClear:q,provider:w,onProviderChange:l.isConnected&&k.length>1?v:void 0,availableProviders:k,modelIndex:P,modelCount:D.length,modelLabel:F.label,onModelChange:l.isConnected?M:void 0,onViewThread:l.isConnected?vt:void 0,isThreadPanelOpen:de!==null,mcpStatus:b,onInstallMcp:l.isConnected?X:void 0,mcpJustInstalled:J,bridgeUrl:c,isBridgeConnected:l.isConnected,modelSelectedComponent:ye,modelCanvasHoveredComponent:ze,onModelComponentHover:De,onSpacingTokenHover:je,onModifySpacingToken:l.isConnected?z:void 0,onDeleteSpacingToken:l.isConnected?ve:void 0,modelRefreshKey:ce,onModelComponentAdded:at,onModelComponentRemoved:yt,toolbarRef:d}),de&&l.isConnected&&lr(dc,{threadId:de,bridgeUrl:c,accentColor:(qe=(Le=ln==null?void 0:ln.color)!=null?Le:oe.current)!=null?qe:i.activeColor,isStreaming:It!==null,streamingEvents:It?l.events.filter(C=>C.data.jobId===It):[],onClose:()=>$(null),onReply:Vt,onCancel:It?()=>jt(It):void 0,lastError:(an=(At=l.lastErrorByJob)==null?void 0:At[It!=null?It:""])!=null?an:l.lastCompletedJobId&&Gt.current.get(l.lastCompletedJobId)===de?(Bt=l.lastErrorByJob)==null?void 0:Bt[l.lastCompletedJobId]:void 0,toolbarRef:d,currentModel:F.id,currentProvider:w,annotationNumber:Yn,annotationText:ln==null?void 0:ln.text}),lr(Qa,{bridge:l,bridgeUrl:c,inFlightJobs:Se,isVisible:Ut||l.lastResponseText!==null||l.activeJobIds.length>0,onHover:H,clearSignal:Cn,onReply:Vt,onViewThread:vt,onClickJob:mn,onCancel:jt,onHoverJob:en,isConnected:l.isConnected,dismissedThreadIds:se})]})})]})}function Cg(){let e=bg(Ns);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{wg as PopmeltProvider,Cg as usePopmelt};
|