@popmelt.com/core 0.7.2 → 0.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bridge-entry.mjs +37 -37
- package/dist/cli.mjs +37 -37
- package/dist/index.mjs +27 -23
- package/dist/plugin-astro.mjs +1 -1
- package/dist/plugin-vite.mjs +1 -1
- package/dist/{server-5N4EEKMZ.mjs → server-X7YF2NX2.mjs} +40 -40
- package/dist/server.mjs +40 -40
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var md=Object.defineProperty,hd=Object.defineProperties;var yd=Object.getOwnPropertyDescriptors;var fi=Object.getOwnPropertySymbols;var Ta=Object.prototype.hasOwnProperty,Ma=Object.prototype.propertyIsEnumerable;var ka=(e,t,n)=>t in e?md(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))Ta.call(t,n)&&ka(e,n,t[n]);if(fi)for(var n of fi(t))Ma.call(t,n)&&ka(e,n,t[n]);return e},y=(e,t)=>hd(e,yd(t));var uo=e=>typeof e=="symbol"?e:e+"",Dn=(e,t)=>{var n={};for(var o in e)Ta.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(e!=null&&fi)for(var o of fi(e))t.indexOf(o)<0&&Ma.call(e,o)&&(n[o]=e[o]);return n};import{createContext as Km,useCallback as $t,useContext as Xm,useEffect as Pt,useMemo as vo,useRef as on,useState as Et}from"react";import{useCallback as Wa,useEffect as xd,useSyncExternalStore as Sd}from"react";var Sn="http://localhost:1111";function Rn(e,t={},n=15e3){let o=new AbortController;t.signal&&t.signal.addEventListener("abort",()=>o.abort());let r=setTimeout(()=>o.abort(),n);return fetch(e,y(f({},t),{signal:o.signal})).finally(()=>clearTimeout(r))}async function Ra(e=Sn){try{let t=await Rn(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch(t){return null}}async function _o(e=Sn){try{let t=new AbortController,n=setTimeout(()=>t.abort(),2e3),o=await fetch(`${e}/status`,{signal:t.signal});return clearTimeout(n),o.ok?await o.json():null}catch(t){return null}}async function Ia(e){try{let t=new AbortController,n=setTimeout(()=>t.abort(),500),o=await fetch(`http://localhost:${e}/status`,{signal:t.signal});return clearTimeout(n),o.ok?await o.json():null}catch(t){return null}}async function bd(e){return _o(e)}async function La(e,t){if(e&&e!=="http://localhost:1111")try{let c=new URL(e),u=await bd(e);if(!u&&!t)return null;if(!(!u&&t)){if(!(u&&t&&u.projectId!==t)){if(u)return{url:e,port:parseInt(c.port,10)||1111,projectId:u.projectId}}}}catch(c){if(!t)return null}let s=typeof window!="undefined"?window.location.origin:null,i=await Ia(1111);if(i){if(t&&i.projectId===t)return{url:"http://localhost:1111",port:1111,projectId:i.projectId};if(i.devOrigin&&s&&i.devOrigin===s)return{url:"http://localhost:1111",port:1111,projectId:i.projectId}}let l=Array.from({length:8},(c,u)=>{let p=1112+u;return Ia(p).then(g=>g?{status:g,port:p}:null)}),a=(await Promise.all(l)).filter(c=>c!==null),d=[];i&&d.push({port:1111,devOrigin:i.devOrigin,projectId:i.projectId});for(let c of a)d.push({port:c.port,devOrigin:c.status.devOrigin,projectId:c.status.projectId});if(t){let c=d.find(u=>u.projectId===t);if(c)return{url:`http://localhost:${c.port}`,port:c.port,projectId:c.projectId}}if(s){let c=d.find(u=>u.devOrigin===s);if(c)return{url:`http://localhost:${c.port}`,port:c.port,projectId:c.projectId}}return d.length===1?{url:`http://localhost:${d[0].port}`,port:d[0].port,projectId:d[0].projectId}:null}async function gi(e=Sn,t,n=-1){try{let o=await Rn(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return o.ok?await o.json():null}catch(o){return null}}async function Aa(e,t,n=Sn,o,r,s,i,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}.webp`),c&&(a.append("screenshot",p,"screenshot.webp"),c=!1)}c&&a.append("screenshot",new Blob([],{type:"image/webp"}),"screenshot.webp")}else a.append("screenshot",e,"screenshot.webp");if(a.append("feedback",t),o&&a.append("color",o),r&&a.append("provider",r),s&&a.append("model",s),l&&a.append("sourceId",l),i)for(let[c,u]of i)for(let p=0;p<u.length;p++)a.append(`image-${c}-${p}`,u[p],`image-${c}-${p}.webp`);let d=await Rn(`${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 Pa(e,t=Sn){let n=await Rn(`${t}/model/component`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})},1e4);if(!n.ok){let o=await n.text();throw new Error(`Bridge returned ${n.status}: ${o}`)}return n.json()}async function Oa(e,t=Sn){let n=await Rn(`${t}/model/component`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})},1e4);if(!n.ok){let o=await n.text();throw new Error(`Bridge returned ${n.status}: ${o}`)}return n.json()}async function ls(e,t,n=Sn){let o=await Rn(`${n}/model/token`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e,value:t})},1e4);if(!o.ok){let r=await o.text();throw new Error(`Bridge returned ${o.status}: ${r}`)}return o.json()}async function Ba(e,t=Sn){let n=await Rn(`${t}/model/token`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e})},1e4);if(!n.ok){let o=await n.text();throw new Error(`Bridge returned ${n.status}: ${o}`)}return n.json()}async function Tr(e=Sn){var t;try{let n=await Rn(`${e}/model`,{},5e3);return n.ok&&(t=(await n.json()).model)!=null?t:null}catch(n){return null}}async function Da(e=Sn){let t=await Rn(`${e}/evals`,{},5e3);return t.ok?t.json():{version:1,updatedAt:0,cases:[]}}async function mi(e,t,n=Sn){var s;let o=await Rn(`${n}/evals/${encodeURIComponent(e)}`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)},5e3);return o.ok&&(s=(await o.json()).eval)!=null?s:null}function _a(e,t,n=Sn){return mi(e,{status:t},n)}async function Ha(e,t,n,o=Sn,r,s,i){let l=new FormData;l.append("screenshot",t,"eval-run.webp"),l.append("feedback",JSON.stringify(n)),r&&l.append("provider",r),s&&l.append("model",s),i&&l.append("sourceId",i);let a=await Rn(`${o}/evals/${encodeURIComponent(e)}/run`,{method:"POST",body:l},3e4);if(!a.ok){let d=await a.text();throw new Error(`Bridge returned ${a.status}: ${d}`)}return a.json()}function vd(e){return new Promise(t=>setTimeout(t,e))}async function cs(e=Sn,t,n=15e3){let o=Date.now();try{let i=await Rn(`${e}/restart`,{method:"POST"},5e3);if(!i.ok){let l=await i.text().catch(()=>"");return{ok:!1,error:l?`Bridge restart returned ${i.status}: ${l}`:`Bridge restart returned ${i.status}`,elapsedMs:Date.now()-o}}}catch(i){return{ok:!1,error:i instanceof Error?i.message:"Bridge restart request failed",elapsedMs:Date.now()-o}}let r=null;for(;Date.now()-o<n;)if(await vd(350),r=await _o(e),!!(r!=null&&r.ok)&&!(t&&r.version!==t))return{ok:!0,status:r,elapsedMs:Date.now()-o};return{ok:!1,error:`Bridge did not come back${t?` with version ${t}`:""} within ${Math.round(n/1e3)}s`,status:r,elapsedMs:Date.now()-o}}async function Na(e=Sn){return(await cs(e)).ok}async function za(e=Sn,t,n){let o=await Rn(`${e}/model/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n})},1e4);if(!o.ok){let r=await o.text();throw new Error(`Bridge returned ${o.status}: ${r}`)}return o.json()}async function Fa(e=Sn,t,n){let o=await Rn(`${e}/evals/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n})},1e4);if(!o.ok){let r=await o.text();throw new Error(`Bridge returned ${o.status}: ${r}`)}return o.json()}async function $a(e,t,n=Sn,o,r,s,i,l){let a;if(i&&i.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:o,provider:r,model:s,sourceId:l}));for(let u=0;u<i.length;u++)d.append(`image-reply-${u}`,i[u],`reply-image-${u}.webp`);a=await Rn(`${n}/reply`,{method:"POST",body:d},3e4)}else a=await Rn(`${n}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:s,sourceId:l})},3e4);if(!a.ok){let d=await a.text();throw new Error(`Bridge returned ${a.status}: ${d}`)}return a.json()}var xi={};var sr=typeof xi!="undefined"?xi.hot:void 0,Ga,Ya,Ja,Si=(Ja=(Ya=(Ga=sr==null?void 0:sr.data)==null?void 0:Ga.sourceId)!=null?Ya:typeof localStorage!="undefined"&&localStorage.getItem("popmelt-source-id"))!=null?Ja:typeof crypto!="undefined"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2);sr!=null&&sr.data&&(sr.data.sourceId=Si);try{typeof localStorage!="undefined"&&localStorage.setItem("popmelt-source-id",Si)}catch(e){}function wi(){return Si}var ar=typeof xi!="undefined"?xi.hot:void 0,tn=ar==null?void 0:ar.data,wd={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},Va,Lr=(Va=tn==null?void 0:tn.store)!=null?Va:f({},wd),Ua,yi=(Ua=tn==null?void 0:tn.listeners)!=null?Ua:new Set,Ka,rr=(Ka=tn==null?void 0:tn.activeEs)!=null?Ka:null,Xa,us=(Xa=tn==null?void 0:tn.activeBridgeUrl)!=null?Xa:null,nr=null,qa,bi=(qa=tn==null?void 0:tn.connectionGeneration)!=null?qa:0;ar!=null&&ar.data&&Object.defineProperties(ar.data,{store:{get:()=>Lr,configurable:!0},listeners:{get:()=>yi,configurable:!0},activeEs:{get:()=>rr,configurable:!0},activeBridgeUrl:{get:()=>us,configurable:!0},connectionGeneration:{get:()=>bi,configurable:!0},discoveredBridgeUrl:{get:()=>ir,configurable:!0},discoveredBridgeProjectId:{get:()=>Ir,configurable:!0}});var vi=new Set,Rr=new Map,Jo={};function or(e,t){var o;if(!e)return!1;if(vi.has(e)){let r=Rr.get(e);return r||(r=[],Rr.set(e,r)),r.push({type:(o=t.type)!=null?o:"",data:t}),!0}let n=Jo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function Cd(e,t,n){let o=()=>n!==bi;for(let r of t){if(o())return;vi.add(r),Rr.set(r,[])}await Promise.all(t.map(async r=>{var s;try{let i=await gi(e,r);if(o())return;let l=(s=Rr.get(r))!=null?s:[];if(i){if(cn(a=>{let d=y(f({},a.jobResponses),{[r]:i.accumulated.response}),c=y(f({},a.jobThinking),{[r]:i.accumulated.thinking}),u=[...a.events];for(let p of i.events)p.type==="done"||p.type==="error"||u.push({type:p.type,data:p,timestamp:Date.now()});return y(f({},a),{jobResponses:d,jobThinking:c,currentResponse:r===a.activeJobId?i.accumulated.response:a.currentResponse,currentThinking:r===a.activeJobId?i.accumulated.thinking:a.currentThinking,events:u})}),Jo[r]=i.currentSeq,!i.jobActive){let a=i.events.find(d=>d.type==="done"||d.type==="error");a&&ds(a.type,a,r)}for(let a of l)typeof a.data.seq=="number"&&a.data.seq<=i.currentSeq||ds(a.type,a.data,r)}else for(let a of l)ds(a.type,a.data,r)}finally{vi.delete(r),Rr.delete(r)}}))}function ds(e,t,n){var o;if(e==="delta"){let r=t.text||"";cn(s=>y(f({},s),{jobResponses:y(f({},s.jobResponses),{[n]:(s.jobResponses[n]||"")+r}),currentResponse:n===s.activeJobId?s.currentResponse+r:s.currentResponse,events:[...s.events,{type:"delta",data:t,timestamp:Date.now()}]}))}else if(e==="thinking"){let r=t.text||"";cn(s=>y(f({},s),{jobThinking:y(f({},s.jobThinking),{[n]:(s.jobThinking[n]||"")+r}),currentThinking:n===s.activeJobId?s.currentThinking+r:s.currentThinking,events:[...s.events,{type:"thinking",data:t,timestamp:Date.now()}]}))}else if(e==="done")delete Jo[n],cn(r=>{var c;let s=r.activeJobIds.filter(u=>u!==n),i=f({},r.jobResponses),l=f({},r.jobThinking),a=i[n];delete i[n],delete l[n];let d=n===r.activeJobId?s.length>0?s[s.length-1]:null:r.activeJobId;return y(f(y(f({},r),{activeJobIds:s,activeJobId:d,jobResponses:i,jobThinking:l,lastCompletedJobId:n,lastResponseText:a||r.currentResponse||t.responseText||null,lastThreadId:(c=t.threadId)!=null?c:null}),n===r.activeJobId?{currentResponse:d&&i[d]||"",currentThinking:d&&l[d]||""}:{}),{events:[...r.events,{type:"done",data:t,timestamp:Date.now()}]})});else if(e==="error"){delete Jo[n];let r=(o=t.message)!=null?o:"";cn(s=>{let i=s.activeJobIds.filter(a=>a!==n),l=i.length>0?s.status:"error";return y(f({},s),{status:l,activeJobIds:i,lastCompletedJobId:n,lastErrorByJob:r?y(f({},s.lastErrorByJob),{[n]:r}):s.lastErrorByJob,events:[...s.events,{type:"error",data:t,timestamp:Date.now()}]})})}else cn(r=>y(f({},r),{events:[...r.events,{type:e,data:t,timestamp:Date.now()}]}))}var Za,ir=(Za=tn==null?void 0:tn.discoveredBridgeUrl)!=null?Za:null,Qa,Ir=(Qa=tn==null?void 0:tn.discoveredBridgeProjectId)!=null?Qa:null,Mr=null,hi=null;async function Ed(e,t){return ir&&(!t||Ir===t)?ir:(t&&Ir&&Ir!==t&&(ir=null,Ir=null),Mr&&hi===(t!=null?t:null)||(hi=t!=null?t:null,Mr=La(e,t).then(n=>{var o,r,s;return ir=(o=n==null?void 0:n.url)!=null?o:null,Ir=(s=(r=n==null?void 0:n.projectId)!=null?r:t)!=null?s:null,Mr=null,hi=null,ir}).catch(()=>(Mr=null,hi=null,null))),Mr)}function el(){return ir}function ja(){return Lr}function kd(e){return yi.add(e),()=>{yi.delete(e)}}function cn(e){Lr=e(Lr);for(let t of yi)t()}function tl(e){if(rr&&rr.readyState!==EventSource.CLOSED&&us===e)return;rr&&(rr.close(),rr=null),nr&&(clearTimeout(nr),nr=null),us=e;let t=++bi,n=new EventSource(`${e}/events?sourceId=${Si}`);rr=n;let o=()=>t!==bi;n.addEventListener("connected",()=>{o()||_o(e).then(r=>{var p,g;if(o())return;let s=(p=r==null?void 0:r.activeJobs)!=null?p:r!=null&&r.activeJob?[r.activeJob]:[],i=new Set(s.map(v=>v.id)),l=(g=r==null?void 0:r.recentJobs)!=null?g:[],a=new Map(l.map(v=>[v.id,v])),d=s.length>0;cn(v=>{let x=f({},v.lastErrorByJob),w=v.activeJobIds.filter(H=>!i.has(H));for(let H of w){let O=a.get(H);(O==null?void 0:O.status)==="error"&&O.error&&(x[H]=O.error)}let I=v.activeJobIds.filter(H=>i.has(H));for(let H of i)I.includes(H)||I.push(H);let N={};for(let H of s)H.threadId&&(N[H.id]=H.threadId);return y(f({},v),{isConnected:!0,status:d?"streaming":w.length>0||v.status==="disconnected"?"idle":v.status,activeJobId:d?s[s.length-1].id:I.length>0?I[I.length-1]:null,activeJobIds:I,activeJobThreads:N,lastErrorByJob:x,lastCompletedJobId:w.length>0?w[w.length-1]:v.lastCompletedJobId})});let c=Lr.activeJobIds.filter(v=>!i.has(v)),u=[...Array.from(i),...c];u.length>0&&Cd(e,u,t).catch(()=>{})})}),n.addEventListener("job_started",r=>{if(o())return;let s=JSON.parse(r.data),i=s.jobId;if(or(i,s))return;let l=s.threadId;cn(a=>{var d,c,u,p;return y(f({},a),{status:"streaming",activeJobId:i,activeJobIds:a.activeJobIds.includes(i)?a.activeJobIds:[...a.activeJobIds,i],activeJobThreads:l?y(f({},a.activeJobThreads),{[i]:l}):a.activeJobThreads,jobResponses:y(f({},a.jobResponses),{[i]:(d=a.jobResponses[i])!=null?d:""}),jobThinking:y(f({},a.jobThinking),{[i]:(c=a.jobThinking[i])!=null?c:""}),currentResponse:(u=a.jobResponses[i])!=null?u:"",currentThinking:(p=a.jobThinking[i])!=null?p:"",lastResponseText:null,lastThreadId:null,events:[...a.events,{type:"job_started",data:s,timestamp:Date.now()}]})})}),n.addEventListener("delta",r=>{if(o())return;let s=JSON.parse(r.data),i=s.jobId;if(or(i,s))return;let l=s.text||"";cn(a=>y(f({},a),{jobResponses:i?y(f({},a.jobResponses),{[i]:(a.jobResponses[i]||"")+l}):a.jobResponses,currentResponse:!i||i===a.activeJobId?a.currentResponse+l:a.currentResponse,events:[...a.events,{type:"delta",data:s,timestamp:Date.now()}]}))}),n.addEventListener("thinking",r=>{if(o())return;let s=JSON.parse(r.data),i=s.jobId;if(or(i,s))return;let l=s.text||"";cn(a=>y(f({},a),{jobThinking:i?y(f({},a.jobThinking),{[i]:(a.jobThinking[i]||"")+l}):a.jobThinking,currentThinking:!i||i===a.activeJobId?a.currentThinking+l:a.currentThinking,events:[...a.events,{type:"thinking",data:s,timestamp:Date.now()}]}))}),n.addEventListener("tool_use",r=>{if(o())return;let s=JSON.parse(r.data),i=s.jobId;or(i,s)||cn(l=>y(f({},l),{events:[...l.events,{type:"tool_use",data:s,timestamp:Date.now()}]}))}),n.addEventListener("done",r=>{if(o())return;let s=JSON.parse(r.data),i=s.jobId;or(i,s)||(i&&delete Jo[i],cn(l=>{var v;let a=i?l.activeJobIds.filter(x=>x!==i):l.activeJobIds,d=f({},l.jobResponses),c=f({},l.jobThinking),u=f({},l.activeJobThreads),p=i?d[i]:void 0;i&&(delete d[i],delete c[i],delete u[i]);let g=i===l.activeJobId?a.length>0?a[a.length-1]:null:l.activeJobId;return y(f(y(f({},l),{activeJobIds:a,activeJobId:g,jobResponses:d,jobThinking:c,lastCompletedJobId:i!=null?i:l.activeJobId,lastResponseText:p||l.currentResponse||s.responseText||null,lastThreadId:(v=s.threadId)!=null?v:null}),i===l.activeJobId?{currentResponse:g&&d[g]||"",currentThinking:g&&c[g]||""}:{}),{events:[...l.events,{type:"done",data:s,timestamp:Date.now()}]})}))}),n.addEventListener("question",r=>{if(o())return;let s=JSON.parse(r.data),i=s.jobId;or(i,s)||cn(l=>y(f({},l),{pendingQuestions:[...l.pendingQuestions,{jobId:s.jobId,threadId:s.threadId,question:s.question,annotationIds:s.annotationIds,timestamp:Date.now()}],events:[...l.events,{type:"question",data:s,timestamp:Date.now()}]}))}),n.addEventListener("capabilities_changed",()=>{o()||cn(r=>y(f({},r),{capabilitiesVersion:r.capabilitiesVersion+1}))}),n.addEventListener("queue_drained",()=>{if(!o()){for(let r of Object.keys(Jo))delete Jo[r];vi.clear(),Rr.clear(),cn(r=>y(f({},r),{status:r.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}}),n.addEventListener("error",r=>{var s,i;if(!o()){if(n.readyState===EventSource.CLOSED)cn(l=>y(f({},l),{isConnected:!1,status:"disconnected"})),nr&&(clearTimeout(nr),nr=null),nr=setTimeout(()=>{_o(e).then(l=>{l&&tl(e)})},5e3);else if(r instanceof MessageEvent){let l=JSON.parse(r.data),a=(s=l.jobId)!=null?s:null;if(or(a!=null?a:void 0,l))return;a&&delete Jo[a];let d=(i=l.message)!=null?i:"";cn(c=>{let u=a?c.activeJobIds.filter(g=>g!==a):c.activeJobIds,p=u.length>0?c.status:"error";return y(f({},c),{status:p,activeJobIds:u,lastCompletedJobId:a!=null?a:c.activeJobId,lastErrorByJob:a&&d?y(f({},c.lastErrorByJob),{[a]:d}):c.lastErrorByJob,events:[...c.events,{type:"error",data:l,timestamp:Date.now()}]})})}}}),n.onerror=()=>{o()||n.readyState===EventSource.CLOSED&&cn(r=>y(f({},r),{isConnected:!1,status:"disconnected"}))}}function nl(e="http://localhost:1111",t=!0,n){let o=Sd(kd,ja,ja);xd(()=>{t&&Ed(e,n).then(i=>{i&&_o(i).then(l=>{l&&tl(i)})})},[e,t,n]);let r=Wa(()=>{cn(()=>y(f({},Lr),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),s=Wa(i=>{cn(l=>y(f({},l),{pendingQuestions:l.pendingQuestions.filter(a=>a.threadId!==i)}))},[]);return y(f({},o),{clearEvents:r,dismissQuestion:s})}import{useEffect as Td,useReducer as Md}from"react";var Id={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 Ci(){return Math.random().toString(36).substring(2,9)}function ol(e){return e.status?e:e.captured?y(f({},e),{status:"in_flight"}):y(f({},e),{status:"pending"})}function _n(e){return y(f({},e),{undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]})}function Rd(e,t){return y(f({},e),{isAnnotating:t})}function Ld(e,t){return y(f({},e),{activeTool:t,inspectedElement:null})}function Ad(e,t){return y(f({},e),{activeColor:t})}function Pd(e,t){return y(f({},e),{strokeWidth:t})}function Od(e,t){return y(f({},e),{currentPath:[t]})}function Bd(e,t){return y(f({},e),{currentPath:[...e.currentPath,t]})}function Dd(e){return y(f({},e),{currentPath:[]})}function _d(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return y(f({},e),{currentPath:[]});let n={id:Ci(),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},o=_n(e);return y(f({},o),{annotations:[...e.annotations,n],currentPath:[]})}function Hd(e,t){var r;let n=f({id:(r=t.id)!=null?r:Ci(),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}:{}),o=t.groupId?e:_n(e);return y(f({},o),{annotations:[...e.annotations,n]})}function Nd(e,t){let n=_n(e);return y(f({},n),{annotations:e.annotations.map(o=>o.id===t.id?f(y(f({},o),{text:t.text}),t.imageCount!=null?{imageCount:t.imageCount}:{}):o)})}function zd(e,t){return y(f({},e),{annotations:e.annotations.map(n=>n.id===t.id?y(f({},n),{fontSize:Math.max(12,Math.min(72,t.fontSize))}):n)})}function Fd(e,t){let n=_n(e),o=e.annotations.find(s=>s.id===t.id),r=o==null?void 0:o.groupId;return y(f({},n),{annotations:e.annotations.filter(s=>s.id!==t.id&&!(r&&s.groupId===r))})}function $d(e,t){let n=t.saveUndo?_n(e):e,o=e.annotations.find(s=>s.id===t.id),r=o==null?void 0:o.groupId;return y(f({},n),{annotations:e.annotations.map(s=>{if(!(s.id===t.id||r&&s.groupId===r))return s;let l=t.delta.x,a=t.delta.y;return y(f({},s),{points:s.points.map(d=>({x:d.x+l,y:d.y+a}))})})})}function Wd(e,t){let n=t.saveUndo?_n(e):e,o=e.annotations.find(i=>i.id===t.id);if(!o||o.type==="text"||o.points.length<2)return e;let r=0,s=0;if(o.type==="rectangle"&&o.groupId){let i=t.points,l=Math.min(i[0].x,i[1].x),a=Math.max(i[0].y,i[1].y),d=o.points[0],c=o.points[o.points.length-1],u=Math.min(d.x,c.x),p=Math.max(d.y,c.y);r=l-u,s=a-p}return y(f({},n),{annotations:e.annotations.map(i=>i.id===t.id?y(f({},i),{points:t.points}):o.groupId&&i.groupId===o.groupId&&i.type==="text"?y(f({},i),{points:i.points.map(l=>({x:l.x+r,y:l.y+s}))}):i)})}function jd(e,t){let n=_n(e);return y(f({},n),{annotations:[...e.annotations,...t.annotations.map(ol)]})}function Gd(e,t){let n=new Set,o=[];for(let r of t.annotations)n.has(r.id)||(n.add(r.id),o.push(ol(r)));return y(f({},e),{annotations:o})}function Yd(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return y(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],undoStack:e.undoStack.slice(0,-1),redoStack:[...e.redoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function Jd(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return y(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],redoStack:e.redoStack.slice(0,-1),undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function Vd(e,t){let{id:n,addToSelection:o}=t;if(n===null)return y(f({},e),{selectedAnnotationIds:[],lastSelectedId:null});if(o)if(e.selectedAnnotationIds.includes(n)){let s=e.selectedAnnotationIds.filter(i=>i!==n);return y(f({},e),{selectedAnnotationIds:s,lastSelectedId:s.length>0?s[s.length-1]:null})}else return y(f({},e),{selectedAnnotationIds:[...e.selectedAnnotationIds,n],lastSelectedId:n});return y(f({},e),{selectedAnnotationIds:[n],lastSelectedId:n})}function Ud(e,t){let n=new Set;for(let o of e.selectedAnnotationIds){let r=e.annotations.find(s=>s.id===o);r!=null&&r.groupId&&n.add(r.groupId)}return y(f({},e),{annotations:e.annotations.map(o=>{let r=e.selectedAnnotationIds.includes(o.id),s=o.groupId&&n.has(o.groupId);return!r&&!s?o:y(f({},o),{color:t.color})})})}function Kd(e){return y(f({},e),{annotations:e.annotations.map(t=>y(f({},t),{captured:!0,status:t.status==="pending"||!t.status?"in_flight":t.status})),styleModifications:e.styleModifications.map(t=>y(f({},t),{captured:!0})),spacingTokenChanges:e.spacingTokenChanges.map(t=>y(f({},t),{captured:!0}))})}function Xd(e){return y(f({},e),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function qd(e,t){return y(f({},e),{inspectedElement:t})}function Zd(e,t){let{selector:n,element:o,property:r,original:s,modified:i}=t,l=e.styleModifications.findIndex(a=>a.selector===n);if(s===i&&l<0)return e;if(l>=0){let a=e.styleModifications[l];if(a.captured){let g=_n(e),v=g.styleModifications.map((x,w)=>w===l?y(f({},x),{changes:[{property:r,original:s,modified:i}],captured:!1}):x);return y(f({},g),{styleModifications:v})}let d=a.changes.findIndex(g=>g.property===r),c,u=e;if(d>=0){let g=a.changes[d];i===g.original?c=a.changes.filter((v,x)=>x!==d):c=a.changes.map((v,x)=>x===d?y(f({},v),{modified:i}):v)}else{if(s===i)return e;u=_n(e),c=[...a.changes,{property:r,original:s,modified:i}]}if(c.length===0)return y(f({},u),{styleModifications:u.styleModifications.filter((g,v)=>v!==l)});let p=u.styleModifications.map((g,v)=>v===l?y(f({},g),{changes:c}):g);return y(f({},u),{styleModifications:p})}else{let a=_n(e),d={selector:n,element:o,changes:[{property:r,original:s,modified:i}]};return y(f({},a),{styleModifications:[...a.styleModifications,d]})}}function Qd(e,t){let{selector:n,durableSelector:o,element:r,changes:s}=t,i=s.filter(d=>d.original!==d.modified);if(i.length===0)return e;let l=_n(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 i){let p=c.findIndex(g=>g.property===u.property);p>=0?u.modified===c[p].original?c=c.filter((g,v)=>v!==p):c=c.map((g,v)=>v===p?y(f({},g),{modified:u.modified}):g):c.push(u)}return c.length===0?y(f({},l),{styleModifications:l.styleModifications.filter((u,p)=>p!==a)}):y(f({},l),{styleModifications:l.styleModifications.map((u,p)=>p===a?y(f({},u),{changes:c,captured:!1}):u)})}else return y(f({},l),{styleModifications:[...l.styleModifications,{selector:n,durableSelector:o,element:r,changes:i}]})}function eu(e,t){let{selector:n,property:o}=t,r=_n(e),s=r.styleModifications.map(i=>i.selector!==n?i:y(f({},i),{changes:i.changes.filter(l=>l.property!==o)})).filter(i=>i.changes.length>0);return y(f({},r),{styleModifications:s})}function tu(e){if(e.styleModifications.length===0)return y(f({},e),{inspectedElement:null});let t=_n(e);return y(f({},t),{styleModifications:[],inspectedElement:null})}function nu(e,t){return y(f({},e),{styleModifications:t})}function ou(e,t){let{updates:n}=t,o=new Map(n.map(r=>[r.id,r]));return y(f({},e),{annotations:e.annotations.map(r=>{let s=o.get(r.id);return s?f(y(f({},r),{points:[s.point,...r.points.slice(1)]}),s.linkedAnchor?{linkedAnchor:s.linkedAnchor}:{}):r})})}function ru(e,t){let n=new Set(t.ids);return y(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)?y(f({},o),{status:t.status}):o)})}function iu(e,t){let n=new Set(t.ids),o=new Set;for(let r of e.annotations)n.has(r.id)&&r.groupId&&o.add(r.groupId);return y(f({},e),{annotations:e.annotations.map(r=>n.has(r.id)||r.groupId&&o.has(r.groupId)?y(f({},r),{threadId:t.threadId}):r)})}function su(e,t){let n=new Set(t.ids),o=new Set;for(let r of e.annotations)n.has(r.id)&&r.groupId&&o.add(r.groupId);return y(f({},e),{annotations:e.annotations.map(r=>n.has(r.id)||r.groupId&&o.has(r.groupId)?y(f({},r),{status:"waiting_input",question:t.question,threadId:t.threadId}):r)})}function au(e,t){let n=new Map(t.resolutions.map(r=>[r.annotationId,r])),o=new Map;for(let r of e.annotations){let s=n.get(r.id);s&&r.groupId&&o.set(r.groupId,s)}return y(f({},e),{annotations:e.annotations.map(r=>{var i,l,a;let s=n.get(r.id)||(r.groupId?o.get(r.groupId):void 0);return s?y(f({},r),{status:s.status,resolutionSummary:s.summary,scope:(l=(i=s.finalScope)!=null?i:s.inferredScope)!=null?l:null,replyCount:((a=r.replyCount)!=null?a:0)+1,question:void 0,threadId:r.threadId||t.threadId}):r})})}function lu(e,t){let{linkedSelectors:n,styleSelectors:o}=t,r=new Set(n),s=new Set(o),i=new Set,l=new Set;for(let p of e.annotations)p.linkedSelector&&r.has(p.linkedSelector)&&(i.add(p.id),p.groupId&&l.add(p.groupId));for(let p of e.annotations)p.groupId&&l.has(p.groupId)&&i.add(p.id);let a=e.annotations.filter(p=>!i.has(p.id)),d=e.styleModifications.filter(p=>!s.has(p.selector));if(a.length===e.annotations.length&&d.length===e.styleModifications.length)return e;let c=e.selectedAnnotationIds.filter(p=>!i.has(p)),u=e.inspectedElement&&s.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return y(f({},e),{annotations:a,styleModifications:d,selectedAnnotationIds:c,lastSelectedId:c.length>0?c[c.length-1]:null,inspectedElement:u})}function cu(e,t){let n=e.spacingTokenChanges.findIndex(o=>o.tokenPath===t.tokenPath);return n>=0?y(f({},e),{spacingTokenChanges:e.spacingTokenChanges.map((o,r)=>r===n?t:o)}):y(f({},e),{spacingTokenChanges:[...e.spacingTokenChanges,t]})}function du(e,t){return y(f({},e),{spacingTokenChanges:t})}function uu(e,t){let n=_n(e),o=e.spacingTokenMods.findIndex(s=>s.tokenPath===t.tokenPath),r;if(o>=0){let s=e.spacingTokenMods[o],i=y(f({},t),{originalValue:s.originalValue,originalPx:s.originalPx});r=e.spacingTokenMods.map((l,a)=>a===o?i:l)}else r=[...e.spacingTokenMods,t];return y(f({},n),{spacingTokenMods:r})}function pu(e,t){let n=_n(e),o=e.spacingTokenMods.findIndex(a=>a.tokenPath===t.tokenPath),r=o>=0?e.spacingTokenMods[o].originalValue:t.originalValue,s=o>=0?e.spacingTokenMods[o].originalPx:parseFloat(t.originalValue)||0,i={tokenPath:t.tokenPath,originalValue:r,currentValue:"__deleted__",targets:o>=0?e.spacingTokenMods[o].targets:[],originalPx:s,currentPx:0},l;return o>=0?l=e.spacingTokenMods.map((a,d)=>d===o?i:a):l=[...e.spacingTokenMods,i],y(f({},n),{spacingTokenMods:l})}var fu={SET_ANNOTATING:Rd,SET_TOOL:Ld,SET_COLOR:Ad,SET_STROKE_WIDTH:Pd,START_PATH:Od,CONTINUE_PATH:Bd,CANCEL_PATH:Dd,FINISH_PATH:_d,ADD_TEXT:Hd,UPDATE_TEXT:Nd,UPDATE_TEXT_SIZE:zd,DELETE_ANNOTATION:Fd,MOVE_ANNOTATION:$d,RESIZE_ANNOTATION:Wd,PASTE_ANNOTATIONS:jd,RESTORE_ANNOTATIONS:Gd,UNDO:Yd,REDO:Jd,SELECT_ANNOTATION:Vd,UPDATE_ANNOTATION_COLOR:Ud,MARK_CAPTURED:Kd,CLEAR:Xd,SELECT_ELEMENT:qd,MODIFY_STYLE:Zd,MODIFY_STYLES_BATCH:Qd,CLEAR_STYLE:eu,CLEAR_ALL_STYLES:tu,RESTORE_STYLE_MODIFICATIONS:nu,UPDATE_LINKED_POSITIONS:ou,CLEANUP_ORPHANED:lu,SET_ANNOTATION_STATUS:ru,SET_ANNOTATION_THREAD:iu,SET_ANNOTATION_QUESTION:su,APPLY_RESOLUTIONS:au,ADD_SPACING_TOKEN_CHANGE:cu,RESTORE_SPACING_TOKEN_CHANGES:du,MODIFY_SPACING_TOKEN:uu,DELETE_SPACING_TOKEN:pu};function gu(e,t){let n=fu[t.type];return n?n(e,t.payload):e}function rl(){let[e,t]=Md(gu,Id);return Td(()=>{let n=o=>{(o.metaKey||o.ctrlKey)&&o.key==="z"&&(o.preventDefault(),o.shiftKey?t({type:"REDO"}):t({type:"UNDO"}))};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[]),[e,t]}import{useSyncExternalStore as mu}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 o=window.location.pathname;t.apply(this,n),window.dispatchEvent(new CustomEvent("popmelt:locationchange",{detail:{prevPath:o}}))}}}function hu(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function yu(){return window.location.pathname}function Ar(){return mu(hu,yu,()=>"/")}var il="popmelt-toolbar-snap-position";function lr(e){return e.startsWith("top-")}function cr(e){return e.endsWith("-right")}function Zr(e){return e.endsWith("-center")}function sl(){try{let e=localStorage.getItem(il);if(e&&bu(e))return e}catch(e){}return"bottom-right"}function al(e){try{localStorage.setItem(il,e)}catch(t){}}function bu(e){return["bottom-right","bottom-center","bottom-left","top-right","top-center","top-left"].includes(e)}function ll(e,t,n){let o=lr(e)?16:n-16-54;return Zr(e)?{position:"fixed",top:o,left:t/2,transform:"translateX(-50%)"}:cr(e)?{position:"fixed",top:o,right:16,left:"auto"}:{position:"fixed",top:o,left:16,right:"auto"}}function cl(e,t,n){let r=lr(e)?{top:82}:{bottom:82},s;return Zr(e)?s={left:t/2,transform:"translateX(-50%)"}:cr(e)?s={right:16}:s={left:16},f(f({position:"fixed"},r),s)}function dl(e,t,n){let o=lr(e),r=o?{top:78}:{bottom:78},s,i;return Zr(e)?(s={left:"50%",transform:"translateX(-50%)"},i="center"):cr(e)?(s={right:16},i="flex-end"):(s={left:16},i="flex-start"),y(f(f({position:"fixed"},r),s),{zIndex:9999,display:"flex",flexDirection:"column",alignItems:i})}function Ei(e){let t=lr(e),n=cr(e)||Zr(e);return{position:"fixed",top:t&&n?82:16,right:16,bottom:!t&&n?82:16}}function ul(e,t,n){let r=lr(e),s,i;cr(e)||Zr(e)?(s=t-16,i=s-326):(i=16,s=i+326);let l=r?82:n-16-54-12;return{left:i,right:s,y:l}}var pl=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"];import{domToCanvas as vu}from"modern-screenshot";function ps(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function fs(e,t=[],n,o){let r=new Map,s=[];for(let l of e)if(l.groupId){let a=r.get(l.groupId)||[];a.push(l),r.set(l.groupId,a)}else s.push(l);let i=[];for(let[l,a]of r){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);i.push(f(y(f(f({id:d.id,type:d.type,instruction:c==null?void 0:c.text},u?{linkedSelector:u}:{}),g?{pathname:g}:{}),{elements:d.elements||[]}),p?{imageCount:p}:{}))}}for(let l of s)i.push(f(y(f(f({id:l.id,type:l.type,instruction:l.type==="text"?l.text:void 0},l.linkedSelector?{linkedSelector:l.linkedSelector}:{}),l.pathname?{pathname:l.pathname}:{}),{elements:l.elements||[]}),l.imageCount?{imageCount:l.imageCount}:{}));return f(f({timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:i,styleModifications:t},n?{inspectedElement:n}:{}),o&&o.length>0?{spacingTokenChanges:o}:{})}function xu(e){if(!e.points||e.points.length===0)return null;let t=e.points.map(o=>o.x),n=e.points.map(o=>o.y);return{minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)}}function Su(e,t){if(e.length===0)return[];let n=e.map(c=>({annotation:c,bounds:xu(c)})).filter(c=>c.bounds!==null);if(n.length===0)return[];n.sort((c,u)=>c.bounds.minY-u.bounds.minY);let o=Math.min(...n.map(c=>c.bounds.minY)),r=Math.max(...n.map(c=>c.bounds.maxY));if(r-o<=t){let c=(o+r)/2,u=Math.max(0,c-t/2);return[{top:u,bottom:u+t,annotations:e}]}let s=[],i=50,l=Math.max(0,o-i),a=[],d=l;for(let{annotation:c,bounds:u}of n){let p=u.maxY+i;if(p-l<=t)a.push(c),d=Math.max(d,p);else{if(a.length>0){let g=(l+d)/2,v=Math.max(0,g-t/2);s.push({top:v,bottom:v+t,annotations:a})}l=Math.max(0,u.minY-i),a=[c],d=u.maxY+i}}if(a.length>0){let c=(l+d)/2,u=Math.max(0,c-t/2);s.push({top:u,bottom:u+t,annotations:a})}return s}function wu(e){let t=new Map;for(let n of e)if(n.linkedSelector)try{let o=document.querySelector(n.linkedSelector);if(o){let r=o.getBoundingClientRect();t.set(n.id,{x:r.left+window.scrollX,y:r.top+window.scrollY,width:r.width,height:r.height})}}catch(o){}return t}function Cu(e,t,n,o,r){if(e.save(),e.scale(o,o),r)for(let s of t){let i=r.get(s.id);if(!i)continue;let l=i.y-n;e.fillStyle=s.color,e.globalAlpha=.05,e.fillRect(i.x,l,i.width,i.height),e.globalAlpha=1,e.strokeStyle=s.color,e.lineWidth=1,e.setLineDash([2,4]),e.strokeRect(i.x,l,i.width,i.height),e.setLineDash([])}for(let s of t){let i=s.points.map(l=>({x:l.x,y:l.y-n}));switch(e.strokeStyle=s.color,e.fillStyle=s.color,e.lineWidth=s.strokeWidth,e.lineCap="round",e.lineJoin="round",s.type){case"freehand":if(i.length<2)break;e.beginPath(),e.moveTo(i[0].x,i[0].y);for(let l=1;l<i.length;l++)e.lineTo(i[l].x,i[l].y);e.stroke();break;case"line":if(i.length<2)break;e.beginPath(),e.moveTo(i[0].x,i[0].y),e.lineTo(i[i.length-1].x,i[i.length-1].y),e.stroke();break;case"rectangle":{if(i.length<2)break;let l=i[0],a=i[i.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(i.length<2)break;let l=i[0],a=i[i.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(!s.text||i.length<1)break;let l=i[0],a=s.fontSize||16;e.font=`${a}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=s.color;let c=(s.imageCount&&s.imageCount>0?`[${s.imageCount} image${s.imageCount>1?"s":""}] ${s.text}`:s.text).split(`
|
|
3
|
-
`),u=a*1.2,p=4,g=0;for(let v of c)g=Math.max(g,e.measureText(v).width);e.fillRect(l.x-p,l.y-p,g+p*2,c.length*u+p*2),e.fillStyle="#ffffff",c.forEach((v,x)=>{e.fillText(v,l.x,l.y+a+x*u)});break}}}e.restore()}async function Pr(e,t,n=[],o){var r;try{let s=(r=o==null?void 0:o.dpr)!=null?r:window.devicePixelRatio||1,i=window.innerWidth,l=window.innerHeight,a=n.filter(p=>{var g;return((g=p.status)!=null?g:"pending")==="pending"});console.log("[Screenshot] Starting capture with",a.length,"active annotations (filtered",n.length-a.length,"captured)");let d=wu(a),c=Su(a,l);if(c.length===0){let p=await fl(e,[],window.scrollY,i,l,s,d);return p?[p]:[]}let u=[];for(let p=0;p<c.length;p++){let g=c[p],v=await fl(e,g.annotations,g.top,i,l,s,d);v?u.push(v):console.warn(`[Screenshot] Region ${p+1} failed to capture`)}return console.log("[Screenshot] Capture complete"),u}catch(s){return console.error("[Screenshot] Capture failed:",s),[]}}async function fl(e,t,n,o,r,s,i){try{let l=getComputedStyle(document.documentElement).backgroundColor,d=await vu(e,{filter:p=>!(p instanceof HTMLElement&&(p.id==="devtools-canvas"||p.id==="devtools-toolbar"||p.id==="devtools-scrim"||p.dataset.devtools!==void 0)),scale:s,backgroundColor:l&&l!=="rgba(0, 0, 0, 0)"&&l!=="transparent"?l:"#ffffff",width:o,height:r,style:{transform:`translate(${-window.scrollX}px, ${-n}px)`}}),c=document.createElement("canvas");c.width=o*s,c.height=r*s;let u=c.getContext("2d");return u?(u.drawImage(d,0,0,o*s,r*s,0,0,o*s,r*s),Cu(u,t,n,s,i),new Promise(p=>{c.toBlob(g=>p(g),"image/webp",.8)})):null}catch(l){return console.error("Region capture failed:",l),null}}async function Qr(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,o=t.reduce((l,a)=>l+a.height,0),r=document.createElement("canvas");r.width=n,r.height=o;let s=r.getContext("2d");if(!s)return null;let i=0;for(let l of t)s.drawImage(l,0,i),i+=l.height,URL.revokeObjectURL(l.src);return new Promise(l=>{r.toBlob(a=>l(a),"image/webp",.8)})}async function gl(e,t,n){try{let o=Array.isArray(e)?e:[e];if(o.length===0)return!1;let r=await Qr(o);if(!r)return!1;let s=r;if(r.type!=="image/png"){let d=new Image,c=URL.createObjectURL(r);await new Promise(p=>{d.onload=()=>p(),d.src=c}),URL.revokeObjectURL(c);let u=document.createElement("canvas");u.width=d.naturalWidth,u.height=d.naturalHeight,u.getContext("2d").drawImage(d,0,0),s=await new Promise(p=>u.toBlob(g=>p(g),"image/png"))}let i={"image/png":s},l=t&&t.length>0,a=n&&n.length>0;if(l||a){let d=t?t.filter(c=>{var u;return((u=c.status)!=null?u:"pending")==="pending"}):[];if(d.length>0||a){let c=fs(d,n||[]),u=new Blob([JSON.stringify(c,null,2)],{type:"text/plain"});i["text/plain"]=u}}return await navigator.clipboard.write([new ClipboardItem(i)]),!0}catch(o){return console.warn("Clipboard write failed:",o),!1}}var ki="0.7.2";import{useCallback as un,useEffect as kn,useMemo as Vi,useRef as Qt,useState as bt}from"react";import{useCallback as Dr,useRef as ku}from"react";function gs(e,t,n,o){if(t.length<2)return;let r=t[0],s=t[t.length-1];if(!r||!s)return;let i=(r.x+s.x)/2,l=(r.y+s.y)/2,a=Math.abs(s.x-r.x)/2,d=Math.abs(s.y-r.y)/2;e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.ellipse(i,l,a,d,0,0,Math.PI*2),e.stroke()}function ms(e,t,n,o){if(t.length<2)return;let r=t[0],s=t[t.length-1];if(!(!r||!s)){e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.moveTo(r.x,r.y);for(let i=1;i<t.length-1;i++){let l=t[i],a=t[i+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(s.x,s.y),e.stroke()}}function hs(e,t,n,o){if(t.length<2)return;let r=t[0],s=t[t.length-1];!r||!s||(e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.moveTo(r.x,r.y),e.lineTo(s.x,s.y),e.stroke())}function ys(e,t,n,o){if(t.length<2)return;let r=t[0],s=t[t.length-1];if(!r||!s)return;let i=Math.min(r.x,s.x),l=Math.min(r.y,s.y),a=Math.abs(s.x-r.x),d=Math.abs(s.y-r.y);e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.strokeRect(i,l,a,d)}var Zt='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function Eu(e,t,n){if(!t||e.measureText(t).width<=n)return[t];let o=t.split(/\s+/),r=[],s="";for(let i of o){let l=s?s+" "+i:i;s&&e.measureText(l).width>n?(r.push(s),s=i):s=l}return s&&r.push(s),r.length>0?r:[t]}function Or(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function ml(e,t,n){let o=[];for(let r of t)o.push(...Eu(e,r,n));return o}function Br(e,t,n){if(e.measureText(t).width<=n)return t;let o="\u2026";for(let r=t.length-1;r>0;r--){let s=t.slice(0,r)+o;if(e.measureText(s).width<=n)return s}return o}function hl(e,t,n,o,r=12,s,i){if(!n)return;let l=r*1.4,a=n.replace(/\n/g," "),d=s!==void 0?s+". "+a:a;e.font=`${r}px ${Zt}`,e.textBaseline="middle";let c=i!==void 0?Math.min(400,Math.max(60,window.innerWidth-i-16)):400,u=Br(e,d,c),p=e.measureText(u).width;e.fillStyle=o,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 yl=11,bs=4,Tu=`600 ${yl}px system-ui, -apple-system, sans-serif`;function vs(e,t,n){return e.map(o=>({x:o.x-t,y:o.y-n}))}function Mu(e,t,n,o,r,s){let i=String(o);e.font=Tu;let a=e.measureText(i).width+bs*2,d=yl+bs*2,c=t-a/2,u=n+s/2+2;e.fillStyle=r,e.fillRect(c,u,a,d),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(i,c+bs,u+d/2)}function Iu(e,t){if(e.points.length<2&&e.type!=="text")return null;switch(e.type){case"rectangle":case"freehand":{let n,o;if(e.type==="freehand")n=Math.min(...e.points.map(r=>r.x)),o=Math.max(...e.points.map(r=>r.y));else{let r=e.points[0],s=e.points[e.points.length-1];n=Math.min(r.x,s.x),o=Math.max(r.y,s.y)}return{x:n,y:o}}case"circle":{let n=e.points[0],o=e.points[e.points.length-1],r=Math.min(n.x,o.x),s=(Math.min(n.y,o.y)+Math.max(n.y,o.y))/2;return{x:r,y:s}}case"line":{let n=e.points[0],o=e.points[e.points.length-1],r=n.y>o.y?n:o;return{x:r.x,y:r.y}}default:return null}}function bl(){let e=ku(null),t=Dr(()=>{let l=e.current;if(!l)return;let a=l.getContext("2d");a&&a.clearRect(0,0,l.width,l.height)},[]),n=Dr((l,a,d)=>{var v;let c=e.current;if(!c)return;let u=c.getContext("2d");if(!u)return;let g=((v=l.status)!=null?v:l.captured?"in_flight":"pending")==="pending"||d?l.color:"#999999";switch(l.type){case"freehand":ms(u,l.points,g,l.strokeWidth);break;case"line":hs(u,l.points,g,l.strokeWidth);break;case"rectangle":ys(u,l.points,g,l.strokeWidth);break;case"circle":gs(u,l.points,g,l.strokeWidth);break;case"text":l.text&&l.points[0]&&hl(u,l.points[0],l.text,g,l.fontSize,a,l.points[0].x);break}},[]),o=Dr((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":ms(p,l,d,c);break;case"line":hs(p,l,d,c);break;case"rectangle":ys(p,l,d,c);break;case"circle":gs(p,l,d,c);break}},[]),r=Dr((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),v=Math.max(u.x,p.x),x=Math.min(u.y,p.y),w=Math.max(u.y,p.y),I=(g+v)/2,N=(x+w)/2;[{x:I,y:x},{x:I,y:w},{x:g,y:N},{x:v,y:N}].forEach(O=>{c.beginPath(),c.rect(O.x-a/2,O.y-a/2,a,a),c.fill(),c.stroke()});return}if(l.type==="rectangle"||l.type==="freehand"){let u,p,g,v;if(l.type==="freehand")u=Math.min(...l.points.map(w=>w.x)),p=Math.max(...l.points.map(w=>w.x)),g=Math.min(...l.points.map(w=>w.y)),v=Math.max(...l.points.map(w=>w.y));else{let w=l.points[0],I=l.points[l.points.length-1];u=Math.min(w.x,I.x),p=Math.max(w.x,I.x),g=Math.min(w.y,I.y),v=Math.max(w.y,I.y)}[{x:u,y:g},{x:p,y:g},{x:u,y:v},{x:p,y:v}].forEach(w=>{c.beginPath(),c.rect(w.x-a/2,w.y-a/2,a,a),c.fill(),c.stroke()})}}},[]),s=Dr((l,a,d,c,u,p,g,v=0,x=0,w,I)=>{var N;if(t(),l.forEach(H=>{var re;let O=y(f({},H),{points:vs(H.points,v,x)}),L=w==null?void 0:w.get(H.id),Y=(re=I==null?void 0:I.has(H.id))!=null?re:!1;n(O,L,Y)}),a.length>0){let H=vs(a,v,x);o(H,d,c,u)}if(p&&p.length>0&&g){let H=e.current,O=H==null?void 0:H.getContext("2d");for(let L of p){let Y=l.find(re=>re.id===L);if(Y){let re=y(f({},Y),{points:vs(Y.points,v,x)});if(r(re,g),O&&Y.type!=="text"&&w&&!(Y.groupId&&l.some(_=>_.groupId===Y.groupId&&_.type==="text"))){let _=w.get(Y.id);if(_!==void 0){let B=Iu(re,g);if(B){let A=((N=Y.status)!=null?N:Y.captured?"in_flight":"pending")==="pending"?Y.color:"#999999";Mu(O,B.x,B.y,_,A,g)}}}}}}},[t,n,o,r]),i=Dr(()=>{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:o,redrawAll:s,resizeCanvas:i}}import{useEffect as Ru,useRef as Lu}from"react";function vl(){let e=Lu({shift:!1,cmd:!1});return Ru(()=>{let t=r=>{r.key==="Shift"&&(e.current.shift=!0),(r.key==="Meta"||r.key==="Control")&&(e.current.cmd=!0)},n=r=>{r.key==="Shift"&&(e.current.shift=!1),(r.key==="Meta"||r.key==="Control")&&(e.current.cmd=!1)},o=()=>{e.current={shift:!1,cmd:!1}};return window.addEventListener("keydown",t,!0),window.addEventListener("keyup",n,!0),window.addEventListener("blur",o),()=>{window.removeEventListener("keydown",t,!0),window.removeEventListener("keyup",n,!0),window.removeEventListener("blur",o)}},[]),e}import{useEffect as Au}from"react";function xl(e,t,n,o,r){Au(()=>{let s=i=>{if(e){if(e.linkedSelector)return;i.preventDefault(),i.stopPropagation();let a=i.deltaY>0?-2:2;t(d=>d?y(f({},d),{fontSize:Math.max(12,Math.min(72,d.fontSize+a))}):null);return}if(!n)return;i.preventDefault();let l=o.find(a=>a.id===n);if(l&&l.type==="text"&&!l.linkedSelector){let a=l.fontSize||12,d=i.deltaY>0?-2:2;r({type:"UPDATE_TEXT_SIZE",payload:{id:n,fontSize:a+d}})}};return window.addEventListener("wheel",s,{passive:!1}),()=>{window.removeEventListener("wheel",s)}},[n,e,o,r,t])}import{useCallback as Dl,useEffect as Hi,useRef as _l,useState as oi}from"react";function Ti(e){let t=Object.keys(e).find(r=>r.startsWith("__reactFiber$")||r.startsWith("__reactInternalInstance$"));if(!t)return null;let n=e[t],o=[];for(;n;){let r=n.type,s=(r==null?void 0:r.displayName)||(r==null?void 0:r.name);s&&typeof s=="string"&&/^[A-Z]/.test(s)&&!s.startsWith("_")&&s!=="Fragment"&&o.unshift(s),n=n.return}return o.length>0?{name:o[o.length-1],path:o}:null}function xs(e){let t=Object.keys(e).find(r=>r.startsWith("__reactFiber$")||r.startsWith("__reactInternalInstance$"));if(!t)return[];let n=e[t],o=[];for(;n;){let r=n.type,s=typeof r=="function"||typeof r=="object"?(r==null?void 0:r.displayName)||(r==null?void 0:r.name):null;s&&typeof s=="string"&&/^[A-Z]/.test(s)&&!s.startsWith("_")&&s!=="Fragment"&&o.push({name:s,fiber:n}),n=n.return}return o.reverse(),o}function Mi(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 Sl(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 Jn(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 o=n.tagName.toLowerCase();if(n.id&&!n.id.startsWith("radix-")&&!n.id.startsWith(":")){t.unshift(`#${CSS.escape(n.id)}`);break}let r=Array.from(n.classList).filter(i=>!i.startsWith("_")&&i.length<30).slice(0,2);r.length>0&&(o+="."+r.map(i=>CSS.escape(i)).join("."));let s=n.parentElement;if(s){let i=Array.from(s.children).filter(l=>l.tagName===n.tagName);if(i.length>1){let l=i.indexOf(n)+1;o+=`:nth-of-type(${l})`}}t.unshift(o),n=s}return t.join(" > ")}function Hn(e){try{return document.querySelector(e)}catch(t){return null}}function Ii(e,t=0){var a;let n=xs(e);if(n.length===0)return null;let o=n.map(d=>d.name),r=n.length-1,s=Math.max(0,Math.min(n.length-1,r-t)),i=n[s],l=(a=Mi(i.fiber))!=null?a:e;return{name:i.name,path:o,depthIndex:s,rootElement:l}}function wl(e,t){var s,i;let n=xs(e),o=t.toLowerCase(),r=-1;for(let l=n.length-1;l>=0;l--){let a=n[l].name;if(a===t){let d=(s=Mi(n[l].fiber))!=null?s:e;return{name:t,path:n.map(c=>c.name),depthIndex:l,rootElement:d}}if(r===-1){let d=a.toLowerCase();(d.length>=4&&o.includes(d)||o.length>=4&&d.includes(o))&&(r=l)}}if(r>=0){let l=(i=Mi(n[r].fiber))!=null?i:e;return{name:t,path:n.map(a=>a.name),depthIndex:r,rootElement:l}}return null}function _r(e){let t=Hr(),n=[],o=new Set,r=t.currentNode;for(;r=t.nextNode();){let s=wl(r,e);s&&!o.has(s.rootElement)&&(o.add(s.rootElement),n.push(s))}return n}function Ss(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),o=Hr(),r=new Set,s=o.currentNode;for(;(s=o.nextNode())&&n.size>0;)for(let i of n){let l=wl(s,i);if(!l||r.has(l.rootElement))continue;r.add(l.rootElement);let a=l.rootElement.getBoundingClientRect();t.set(i,a.top+window.scrollY),n.delete(i);break}for(let i of n)t.set(i,1/0);return t}function Hr(){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 Nn(e){let t={selector:Sl(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=Cl(e);n&&n.length>0&&n.length<200&&(t.textContent=n);let o={};for(let i of e.attributes)i.name.startsWith("data-")&&(o[i.name]=i.value);Object.keys(o).length>0&&(t.dataAttributes=o);let r=Ti(e);r&&(t.reactComponent=r.name);let s=Pu(e);return s&&(t.context=s),t}function Cl(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function dr(e,t){let n=document.elementsFromPoint(e,t);for(let o of n)if(o instanceof HTMLElement&&!(o.id==="devtools-canvas"||o.id==="devtools-toolbar"||o.id==="devtools-scrim")&&!o.closest("#devtools-toolbar")&&!(o.dataset.devtools||o.closest("[data-devtools]"))&&!["html","body"].includes(o.tagName.toLowerCase()))return o;return null}function Pu(e){let t=e.parentElement,n=["section","article","nav","aside","header","footer","main"];for(;t&&t!==document.body;){let o=t.tagName.toLowerCase();if(n.includes(o)&&t.id)return`${o}#${t.id}`;if(t.id&&!t.id.startsWith("radix-")&&!t.id.startsWith(":"))return`${o}#${t.id}`;t=t.parentElement}return null}function El(e){let t=new Set,n=[],o=window.scrollX,r=window.scrollY,s=[{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 i of s){let l=i.x-o,a=i.y-r;if(l<0||a<0||l>window.innerWidth||a>window.innerHeight)continue;let d=dr(l,a);d&&!t.has(d)&&(t.add(d),n.push(Nn(d)))}return n.slice(0,3)}function ws(e){if(e.length===0)return[];let t=e.map(o=>o.x),n=e.map(o=>o.y);return El({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function dn(e,t){return e.style.getPropertyValue(t)!==""}function Ou(e,t=30){if(e<=0)return[];let n=[],o=Hr(),r=.5,s=o.currentNode;for(;(s=o.nextNode())&&n.length<t;){let i=s,l=i.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(i);!dn(i,"padding-top")&&Math.abs((parseFloat(a.paddingTop)||0)-e)<r&&n.push({element:i,property:"padding-top"}),!dn(i,"padding-bottom")&&Math.abs((parseFloat(a.paddingBottom)||0)-e)<r&&n.length<t&&n.push({element:i,property:"padding-bottom"}),!dn(i,"padding-left")&&Math.abs((parseFloat(a.paddingLeft)||0)-e)<r&&n.length<t&&n.push({element:i,property:"padding-left"}),!dn(i,"padding-right")&&Math.abs((parseFloat(a.paddingRight)||0)-e)<r&&n.length<t&&n.push({element:i,property:"padding-right"}),!dn(i,"margin-top")&&Math.abs((parseFloat(a.marginTop)||0)-e)<r&&n.length<t&&n.push({element:i,property:"margin-top"}),!dn(i,"margin-bottom")&&Math.abs((parseFloat(a.marginBottom)||0)-e)<r&&n.length<t&&n.push({element:i,property:"margin-bottom"}),!dn(i,"margin-left")&&Math.abs((parseFloat(a.marginLeft)||0)-e)<r&&n.length<t&&n.push({element:i,property:"margin-left"}),!dn(i,"margin-right")&&Math.abs((parseFloat(a.marginRight)||0)-e)<r&&n.length<t&&n.push({element:i,property:"margin-right"});let d=a.display;if((d.includes("flex")||d.includes("grid"))&&n.length<t){let c=dn(i,"gap"),u=parseFloat(a.gap)||0,p=parseFloat(a.rowGap)||0,g=parseFloat(a.columnGap)||0;!c&&Math.abs(u-e)<r?n.push({element:i,property:"gap"}):!dn(i,"row-gap")&&Math.abs(p-e)<r?n.push({element:i,property:"row-gap"}):!dn(i,"column-gap")&&Math.abs(g-e)<r&&n.push({element:i,property:"column-gap"})}}return n}function Cs(e,t=30){if(e<=0)return[];let n=[],o=Hr(),r=.5,s=o.currentNode;for(;(s=o.nextNode())&&n.length<t;){let i=s,l=i.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(i),d=parseFloat(a.borderTopWidth)||0,c=parseFloat(a.borderRightWidth)||0,u=parseFloat(a.borderBottomWidth)||0,p=parseFloat(a.borderLeftWidth)||0,g=i.clientWidth,v=i.clientHeight,x=parseFloat(a.paddingTop)||0;!dn(i,"padding-top")&&Math.abs(x-e)<r&&n.push({x:l.left+p,y:l.top+d,width:g,height:e,direction:"vertical",property:"padding-top"});let w=parseFloat(a.paddingBottom)||0;!dn(i,"padding-bottom")&&Math.abs(w-e)<r&&n.length<t&&n.push({x:l.left+p,y:l.top+d+v-e,width:g,height:e,direction:"vertical",property:"padding-bottom"});let I=parseFloat(a.paddingLeft)||0;!dn(i,"padding-left")&&Math.abs(I-e)<r&&n.length<t&&n.push({x:l.left+p,y:l.top+d,width:e,height:v,direction:"horizontal",property:"padding-left"});let N=parseFloat(a.paddingRight)||0;!dn(i,"padding-right")&&Math.abs(N-e)<r&&n.length<t&&n.push({x:l.left+p+g-e,y:l.top+d,width:e,height:v,direction:"horizontal",property:"padding-right"});let H=parseFloat(a.marginTop)||0;!dn(i,"margin-top")&&Math.abs(H-e)<r&&n.length<t&&n.push({x:l.left,y:l.top-e,width:l.width,height:e,direction:"vertical",property:"margin-top"});let O=parseFloat(a.marginBottom)||0;!dn(i,"margin-bottom")&&Math.abs(O-e)<r&&n.length<t&&n.push({x:l.left,y:l.bottom,width:l.width,height:e,direction:"vertical",property:"margin-bottom"});let L=parseFloat(a.marginLeft)||0;!dn(i,"margin-left")&&Math.abs(L-e)<r&&n.length<t&&n.push({x:l.left-e,y:l.top,width:e,height:l.height,direction:"horizontal",property:"margin-left"});let Y=parseFloat(a.marginRight)||0;!dn(i,"margin-right")&&Math.abs(Y-e)<r&&n.length<t&&n.push({x:l.right,y:l.top,width:e,height:l.height,direction:"horizontal",property:"margin-right"});let re=a.display;if((re.includes("flex")||re.includes("grid"))&&n.length<t&&!dn(i,"gap")){let _=Array.from(i.children).filter(B=>{let h=getComputedStyle(B);return h.display!=="none"&&h.position!=="absolute"&&h.position!=="fixed"});if(_.length>=2)for(let B=0;B<_.length-1&&n.length<t;B++){let h=_[B].getBoundingClientRect(),A=_[B+1].getBoundingClientRect(),k=A.top-h.bottom;Math.abs(k-e)<r&&k>.5&&n.push({x:Math.min(h.left,A.left),y:h.bottom,width:Math.max(h.right,A.right)-Math.min(h.left,A.left),height:k,direction:"vertical",property:"gap"});let be=A.left-h.right;Math.abs(be-e)<r&&be>.5&&n.push({x:h.right,y:Math.min(h.top,A.top),width:be,height:Math.max(h.bottom,A.bottom)-Math.min(h.top,A.top),direction:"horizontal",property:"gap"})}}}return n}function Ri(e){return typeof e=="string"?{value:e}:e}var Tl={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 kl(e,t){let n=Tl[t];return n?n.includes(e):!1}function Bu(e,t){let n=e.split(/\s+/);for(let o of n){if(o===t)return!0;let r=o.lastIndexOf(":");if(r>=0&&o.slice(r+1)===t)return!0}return!1}function Du(e){var l,a;let t=e.lastIndexOf(":"),n=t>=0?e.slice(t+1):e,o=n.indexOf("-");if(o<0)return null;let r=n.slice(0,o),s={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"},i=n.slice(0,n.indexOf("-",o+1)>0?n.indexOf("-",o+1):o);return(a=(l=s[i])!=null?l:s[r])!=null?a:null}function Es(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let r=[],s=Hr(),i=s.currentNode;for(;(i=s.nextNode())&&r.length<t;){let l=i,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(!Bu(d,c))continue;let u=Du(c);if(u&&!(e.property&&!kl(u,e.property))){r.push({element:l,property:u});break}}}return r}let o=Ou(n,t*2);return e.property?o.filter(r=>kl(r.property,e.property)).slice(0,t):o.slice(0,t)}function ks(e,t=30){let n=Es(e,t),o=[];for(let r of n){let s=r.element,i=s.getBoundingClientRect(),l=getComputedStyle(s),a=parseFloat(l.borderTopWidth)||0,d=parseFloat(l.borderRightWidth)||0,c=parseFloat(l.borderLeftWidth)||0,u=s.clientWidth,p=s.clientHeight;switch(r.property){case"padding-top":{let g=parseFloat(l.paddingTop)||0;o.push({x:i.left+c,y:i.top+a,width:u,height:g,direction:"vertical",property:r.property});break}case"padding-bottom":{let g=parseFloat(l.paddingBottom)||0;o.push({x:i.left+c,y:i.top+a+p-g,width:u,height:g,direction:"vertical",property:r.property});break}case"padding-left":{let g=parseFloat(l.paddingLeft)||0;o.push({x:i.left+c,y:i.top+a,width:g,height:p,direction:"horizontal",property:r.property});break}case"padding-right":{let g=parseFloat(l.paddingRight)||0;o.push({x:i.left+c+u-g,y:i.top+a,width:g,height:p,direction:"horizontal",property:r.property});break}case"margin-top":{let g=parseFloat(l.marginTop)||0;o.push({x:i.left,y:i.top-g,width:i.width,height:g,direction:"vertical",property:r.property});break}case"margin-bottom":{let g=parseFloat(l.marginBottom)||0;o.push({x:i.left,y:i.bottom,width:i.width,height:g,direction:"vertical",property:r.property});break}case"margin-left":{let g=parseFloat(l.marginLeft)||0;o.push({x:i.left-g,y:i.top,width:g,height:i.height,direction:"horizontal",property:r.property});break}case"margin-right":{let g=parseFloat(l.marginRight)||0;o.push({x:i.right,y:i.top,width:g,height:i.height,direction:"horizontal",property:r.property});break}case"gap":case"row-gap":case"column-gap":{let g=Array.from(s.children).filter(v=>{let x=getComputedStyle(v);return x.display!=="none"&&x.position!=="absolute"&&x.position!=="fixed"});for(let v=0;v<g.length-1&&o.length<t;v++){let x=g[v].getBoundingClientRect(),w=g[v+1].getBoundingClientRect(),I=w.top-x.bottom;I>.5&&o.push({x:Math.min(x.left,w.left),y:x.bottom,width:Math.max(x.right,w.right)-Math.min(x.left,w.left),height:I,direction:"vertical",property:"gap"});let N=w.left-x.right;N>.5&&o.push({x:x.right,y:Math.min(x.top,w.top),width:N,height:Math.max(x.bottom,w.bottom)-Math.min(x.top,w.top),direction:"horizontal",property:"gap"})}break}}}return o}function Ml(e,t){let n=new Set,o=ei(t);for(let r of e){let s=Rl[r.property];if(!s)continue;let i=r.element.className;if(typeof i=="string")for(let l of s){let a=`${l}-${o}`;for(let d of i.split(/\s+/)){let c=d.lastIndexOf(":"),u=c>=0?d.slice(c+1):d;if(u===a){n.add(u);break}}}}return[...n]}function Il(e){let t=new Set;for(let n of e)for(let[o,r]of Object.entries(Tl))if(r.includes(n.property)){t.add(o);break}if(t.size===1)return[...t][0]}function Ts(e,t,n){if(t===n)return e;let o=ei(t),r=ei(n);return e.map(s=>{let i=s.lastIndexOf("-");if(i<0)return s;let l=s.slice(0,i),a=s.slice(i+1);return a===o||a===`[${t}px]`?`${l}-${r}`:s})}var _u={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 ei(e){var t;return(t=_u[e])!=null?t:`[${e}px]`}var Rl={"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 Hu(e,t,n,o){let r=Rl[t];if(!r)return null;let s=ei(n);for(let i of r){let l=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+i+"-(?:"+Nu(s)+"|\\["+n+"px\\]))(?:\\s|$)"),a=e.match(l);if(a!=null&&a[1]){let d=ei(o),c=a[1].lastIndexOf(":"),u=c>=0?a[1].slice(0,c+1):"";return{matched:a[1],suggested:`${u}${i}-${d}`}}}return null}function Nu(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function Ll(e,t,n){let o=new Set,r=[];for(let s of e){let i=Jn(s.element),l=`${i}::${s.property}`;if(o.has(l))continue;o.add(l);let a=Ti(s.element),d=s.element.className||"",c=Hu(d,s.property,t,n);r.push({selector:i,reactComponent:a==null?void 0:a.name,className:d,property:s.property,matchedClass:c==null?void 0:c.matched,suggestedClass:c==null?void 0:c.suggested})}return r}function Li(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function Ai(e,t){if(e instanceof HTMLElement){let o=e.style.getPropertyValue(t);if(o)return o}let n=t.replace(/-([a-z])/g,(o,r)=>r.toUpperCase());try{for(let o of document.styleSheets)try{let r=o.cssRules||o.rules;for(let s of r)if(s instanceof CSSStyleRule&&e.matches(s.selectorText)){let i=s.style.getPropertyValue(t);if(i)return i;let l=s.style[n];if(l)return l}}catch(r){}}catch(o){}return null}function Pi(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function ur(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function zu(e){let t=[];for(let n of e){let o=t.find(r=>r.axis!==n.axis?!1:n.axis==="row"?Math.abs(r.y-n.y)<2&&Math.abs(r.h-n.h)<2:Math.abs(r.x-n.x)<2&&Math.abs(r.w-n.w)<2);if(o)if(n.axis==="row"){let r=Math.min(o.x,n.x),s=Math.max(o.x+o.w,n.x+n.w);o.x=r,o.w=s-r}else{let r=Math.min(o.y,n.y),s=Math.max(o.y+o.h,n.y+n.h);o.y=r,o.h=s-r}else t.push(f({},n))}return t}function Ho(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=[],o=e.getBoundingClientRect(),s=window.getComputedStyle(e).flexDirection,i=s==="column"||s==="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:o.top,w:c.left-d.right,h:o.height}),c.top>d.bottom+.5&&n.push({axis:"row",x:o.left,y:d.bottom,w:o.width,h:c.top-d.bottom}),!(c.left>d.right+.5)&&!(c.top>d.bottom+.5))if(i){let u=(d.bottom+c.top)/2;n.push({axis:"row",x:o.left,y:u-l/2,w:o.width,h:l})}else{let u=(d.right+c.left)/2;n.push({axis:"column",x:u-l/2,y:o.top,w:l,h:o.height})}}return zu(n)}function Ms(e,t){let n=window.getComputedStyle(e),o=n.display;if(o!=="flex"&&o!=="inline-flex")return!1;let r=n.justifyContent;if(r!=="space-between"&&r!=="space-around"&&r!=="space-evenly"&&r!=="stretch")return!1;let s=n.flexDirection;return!(t!==(s==="column"||s==="column-reverse"?"row":"column")||parseFloat(t==="row"?n.rowGap:n.columnGap)>0)}function Nr(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 pr(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 Is(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function zr(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 o=t.getBoundingClientRect(),r=window.getComputedStyle(e),s=parseFloat(r.fontSize)||16,i=parseFloat(r.lineHeight);isNaN(i)&&(i=s*1.2);let l=Math.max(1,t.getClientRects().length),a=Math.max(o.height,l*i),d=(a-o.height)/2;return new DOMRect(o.x,o.y-d,o.width,a)}function ti(e){let t=window.getComputedStyle(e),n=parseFloat(t.fontSize)||16,o=parseFloat(t.lineHeight);return isNaN(o)&&(o=n*1.2),{fontSize:n,lineHeight:o}}function Xe(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function Al(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function Oi(e){var t;for(let n of e){let o=Hn(n.selector);if(!o&&n.durableSelector&&(o=Hn(n.durableSelector),o)){let r=(t=n.selector.match(/\[data-pm="([^"]+)"\]/))==null?void 0:t[1];r&&o.setAttribute("data-pm",r)}if(o)for(let r of n.changes)Xe(o,r.property,r.modified)}}function Bi(e){for(let t of e){let n=Hn(t.selector);if(n)for(let o of t.changes)Al(n,o.property,o.original)}}function Ol(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){Ol(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let s=r.selectorText.toLowerCase();(s===":root"||s==="html"||s==="*"||s.includes(":root"))&&Fu(r.style,t,n,o)}}}function Fu(e,t,n,o){for(let r=0;r<e.length;r++){let s=e[r];if(s!=null&&s.startsWith("--")){if(n.has(s))continue;n.add(s);let i=t.getPropertyValue(s).trim();Bl(i)&&o.push({name:s,value:i,usage:`var(${s})`})}}}var Di=null,$u=5e3;function Rs(){if(Di&&Date.now()-Di.timestamp<$u)return Di.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let s of document.styleSheets)try{Ol(s.cssRules||s.rules,n,t,e)}catch(i){}}catch(s){}let o=document.documentElement.style;for(let s=0;s<o.length;s++){let i=o[s];if(i!=null&&i.startsWith("--")&&!t.has(i)){t.add(i);let l=n.getPropertyValue(i).trim();Bl(l)&&e.push({name:i,value:l,usage:`var(${i})`})}}let r=e.sort((s,i)=>s.name.localeCompare(i.name));return Di={variables:r,timestamp:Date.now()},r}function Bl(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 Fr(e,t){let n=t.match(/var\((--[^,)]+)(?:,\s*([^)]+))?\)/);if(n){let o=n[1],r=n[2];return getComputedStyle(document.documentElement).getPropertyValue(o).trim()||r||t}return t}function ni(e,t){if(!e)return null;let n=Pl(e);if(!n)return null;for(let o of t){let r=Pl(o.value);if(r&&n===r)return o}return null}function Pl(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 o=n[1].endsWith("%")?parseFloat(n[1])/100:parseFloat(n[1]),r=n[2].endsWith("%")?parseFloat(n[2])/100:parseFloat(n[2]),s=parseFloat(n[3]);o=Math.round(o*100)/100,r=Math.round(r*1e3)/1e3;let i=Math.round(s);return`oklch(${o} ${r} ${i})`}}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 fr,jsx as mt,jsxs as po}from"react/jsx-runtime";var eo=22,Vo=12,Wu=3,ju=250,_i=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Gu=3e3;function Yu(i){var l=i,{left:e,top:t,avoidBottom:n,style:o,children:r}=l,s=Dn(l,["left","top","avoidBottom","style","children"]);let a=e+Vo,d=t+Vo,c=n!==void 0?`${n}px`:"100vh";return mt("div",y(f({"data-devtools":"badge-hit-area"},s),{style:f({position:"fixed",left:e,top:t,padding:Vo},o),children:mt("div",{style:{transform:`translate(min(0px, calc(100vw - ${a}px - 100%)), min(0px, calc(${c} - ${d}px - 100%)))`},children:r})}))}function Hl({annotations:e,supersededAnnotations:t,inFlightIds:n,activeIds:o,queuePositions:r,scrollX:s,scrollY:i,annotationGroupMap:l,onViewThread:a,onSelectAnnotation:d,onHoverAnnotation:c,canvasRef:u}){var Z,_,B,h,A,k,be;let[p,g]=oi(0),[v,x]=oi(()=>Math.floor(Math.random()*_i.length)),w=!!(n&&n.size>0);Hi(()=>{if(!w)return;let K=setInterval(()=>{g(F=>(F+1)%Wu)},ju),de=setInterval(()=>{x(F=>(F+1)%_i.length)},Gu);return()=>{clearInterval(K),clearInterval(de)}},[w]);let I=[];for(let K of e){if(K.type!=="text"||!K.text||!K.points[0]||t.has(K))continue;let de=K.groupId?e.filter(ye=>ye.groupId===K.groupId):[K],F=(Z=K.status)!=null?Z:"pending",me=de.reduce((ye,ct)=>{var Ge;return ye+((Ge=ct.replyCount)!=null?Ge:0)},0),R=ye=>ye==="resolved"&&me===0,ie=!!(n&&(n.has(K.id)||de.some(ye=>n.has(ye.id))))||K.status==="in_flight"||de.some(ye=>ye.status==="in_flight")||R(K.status)||de.some(ye=>R(ye.status)),Se=de.some(ye=>{var ct;return ye.status==="resolved"&&((ct=ye.replyCount)!=null?ct:0)>0||ye.status==="needs_review"}),Pe=de.some(ye=>ye.threadId);if(!ie&&F!=="resolved"&&F!=="needs_review"&&!Se&&!Pe)continue;let _e=K.threadId||((_=de.find(ye=>ye.threadId))==null?void 0:_.threadId),Ze=F==="needs_review"||de.some(ye=>ye.status==="needs_review"),Oe=K.points[0],he=K.fontSize||12,Fe=he*1.4,rt=l.get(K.id),ht=K.text.replace(/\n/g," "),Jt=rt!==void 0?rt+". "+ht:ht,Q=(h=(B=u==null?void 0:u.current)==null?void 0:B.getContext("2d"))!=null?h:document.createElement("canvas").getContext("2d");if(!Q)continue;Q.font=`${he}px ${Zt}`;let ne=Oe.x-s,Te=Or(ne),$e=Br(Q,Jt,Te),pt=Q.measureText($e).width,Je=ie&&!!o&&!o.has(K.id)&&!de.some(ye=>o.has(ye.id));I.push({id:K.id,threadId:_e,linkedSelector:K.linkedSelector||((A=de.find(ye=>ye.linkedSelector))==null?void 0:A.linkedSelector),x:Oe.x+pt+4,y:Oe.y-4,size:Fe+8,color:K.color,isInFlight:ie,isQueued:Je,queuePosition:void 0,isNeedsReview:Ze,replyCount:me})}let N=I.filter(K=>K.isQueued);if(N.length>0&&N.forEach((K,de)=>{var F;K.queuePosition=(F=r==null?void 0:r.get(K.id))!=null?F:`(${de+1}/${N.length})`}),I.length===0)return null;let H=2,O=(be=(k=u==null?void 0:u.current)==null?void 0:k.getContext("2d"))!=null?be:document.createElement("canvas").getContext("2d"),L=I.map(K=>{var Se;let de;K.isQueued?de=K.queuePosition?`queued ${K.queuePosition}`:"queued":K.isInFlight?de=(Se=_i[v])!=null?Se:"thinking":K.replyCount>0?de=`${K.replyCount} ${K.replyCount===1?"reply":"replies"}`:de="Cancelled";let F=!K.isQueued,me=F?11:0,R=F?4:0,ie=de.length*7.2;return O&&(O.font=`12px ${Zt}`,ie=O.measureText(de).width),4+me+R+ie+4}),Y=typeof window!="undefined"?window.innerHeight:9999,re=[];for(let K=0;K<I.length;K++){let de=I[K].y-i,F=Math.min(de,Y-eo),me=F+eo,ie=I[K].x-s;for(let Se=0;Se<K;Se++){let Pe=I[Se].y-i,_e=Math.min(Pe,Y-eo),Ze=_e+eo;if(!(F<Ze&&me>_e))continue;let he=re[Se]+L[Se];ie<he+H&&(ie=he+H)}re.push(ie)}return mt(fr,{children:I.map((K,de)=>{let F=!!K.threadId;return mt(Yu,{left:re[de]-Vo,top:K.y-i-Vo,onMouseDown:F?me=>me.stopPropagation():void 0,onClick:F?me=>{if(me.stopPropagation(),d==null||d(K.id),a==null||a(K.threadId),K.linkedSelector)try{let R=document.querySelector(K.linkedSelector);if(R){let ie=R.getBoundingClientRect();(ie.bottom<0||ie.top>window.innerHeight)&&R.scrollIntoView({behavior:"smooth",block:"center"})}}catch(R){}}:void 0,onMouseEnter:c?()=>c(K.id):void 0,onMouseLeave:c?()=>c(null):void 0,style:{pointerEvents:F?"auto":"none",cursor:F?"pointer":void 0,zIndex:9999},children:mt("div",{"data-devtools":"annotation-badge",style:{height:K.size,display:"flex",alignItems:"center",backgroundColor:K.color,fontFamily:Zt,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:K.isQueued?po("span",{style:{opacity:.5,color:"inherit"},children:["queued",K.queuePosition?` ${K.queuePosition}`:""]}):K.isInFlight?po(fr,{children:[mt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:p===1?po(fr,{children:[mt("circle",{cx:"7",cy:"7",r:"2"}),mt("circle",{cx:"17",cy:"7",r:"2"}),mt("circle",{cx:"7",cy:"17",r:"2"}),mt("circle",{cx:"17",cy:"17",r:"2"})]}):po(fr,{children:[mt("circle",{cx:"12",cy:"6",r:"2"}),mt("circle",{cx:"6",cy:"12",r:"2"}),mt("circle",{cx:"18",cy:"12",r:"2"}),mt("circle",{cx:"12",cy:"18",r:"2"})]})}),mt("span",{style:{opacity:.7,color:"inherit"},children:_i[v]})]}):po(fr,{children:[K.isNeedsReview?mt("span",{style:{fontWeight:700,color:"inherit"},children:"?"}):mt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:mt("polyline",{points:"4 12 10 18 20 6"})}),mt("span",{style:{opacity:.7,color:"inherit"},children:K.replyCount>0?`${K.replyCount} ${K.replyCount===1?"reply":"replies"}`:"Cancelled"})]})})},K.id)})})}function Ls({inFlightSelectorColors:e,animated:t=!0}){let[n,o]=oi([]);return Hi(()=>{if(e.size===0){o([]);return}let r=null,s=()=>{let a=[];for(let[d,c]of e){let u=Hn(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})}o(a)},i=()=>{r&&cancelAnimationFrame(r),r=requestAnimationFrame(s)};s(),window.addEventListener("scroll",i,!0),window.addEventListener("resize",i,!0);let l=new MutationObserver(i);return l.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",i,!0),window.removeEventListener("resize",i,!0),l.disconnect(),r&&cancelAnimationFrame(r)}},[e]),n.length===0?null:po(fr,{children:[t&&mt("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(r=>mt("div",{"data-devtools":"marching-ants",style:{position:"fixed",top:r.top,left:r.left,width:r.width,height:r.height,pointerEvents:"none",zIndex:9995,overflow:"visible"},children:mt("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:mt("rect",{x:"0.5",y:"0.5",width:Math.max(0,r.width-1),height:Math.max(0,r.height-1),fill:"none",stroke:r.color,strokeWidth:"1",strokeDasharray:"2 4",style:t?{animation:"popmelt-march 0.5s steps(2) infinite"}:void 0})})},r.selector))]})}function Nl({annotations:e,supersededAnnotations:t,scrollX:n,scrollY:o,onReply:r,annotationGroupMap:s,canvasRef:i,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],v=p.fontSize||12,x=v*1.4,w=s.get(p.id),I=p.text.replace(/\n/g," "),N=w!==void 0?w+". "+I:I,O=document.createElement("canvas").getContext("2d");if(!O)continue;O.font=`${v}px ${Zt}`;let L=g.x-n,Y=Or(L),re=Br(O,N,Y),Z=O.measureText(re).width;c.push({annotation:u,x:g.x+Z+4,y:g.y-4,size:x+8})}}return c.length===0?null:mt(fr,{children:c.map(({annotation:u,x:p,y:g,size:v})=>mt(Ju,{annotation:u,x:p-n,y:g-o,size:v,onReply:r,onHoverAnnotation:l},`question-${u.threadId}`))})}function Ju({annotation:e,x:t,y:n,size:o,onReply:r,onHoverAnnotation:s}){let[i,l]=oi(!1),[a,d]=oi(""),c=_l(null),u=_l(null);Hi(()=>{i&&c.current&&c.current.focus()},[i]),Hi(()=>{if(!i)return;let w=N=>{u.current&&!N.composedPath().includes(u.current)&&l(!1)},I=N=>{N.key==="Escape"&&l(!1)};return document.addEventListener("mousedown",w),document.addEventListener("keydown",I),()=>{document.removeEventListener("mousedown",w),document.removeEventListener("keydown",I)}},[i]);let p=Dl(()=>{!a.trim()||!e.threadId||(r(e.threadId,a.trim()),d(""),l(!1))},[a,e.threadId,r]),g=Dl(w=>{w.key==="Enter"&&(w.metaKey||w.ctrlKey)&&(w.preventDefault(),p())},[p]),v=i?t:t-Vo,x=i?n:n-Vo;return po("div",{ref:u,"data-devtools":"question-badge",onMouseEnter:s?()=>s(e.id):void 0,onMouseLeave:s?()=>s(null):void 0,style:{position:"fixed",left:`max(0px, ${v}px)`,top:`max(0px, ${x}px)`,padding:i?0:Vo,transform:`translate(min(0px, calc(100vw - max(0px, ${v}px) - 100%)), min(0px, calc(100vh - max(0px, ${x}px) - 100%)))`,zIndex:i?10002:9999,pointerEvents:"auto",cursor:i?void 0:"pointer"},children:[!i&&po("div",{onClick:()=>l(!0),style:{height:o,display:"flex",alignItems:"center",backgroundColor:e.color,padding:`0 ${4}px`,gap:4,fontFamily:Zt,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[po("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",children:[mt("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),mt("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),mt("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),mt("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]}),mt("span",{style:{opacity:.7},children:"reply?"})]}),i&&po("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#eaeaea",fontFamily:Zt,fontSize:12,color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)"},children:[mt("div",{style:{padding:`${6}px ${8}px`,lineHeight:1.4},children:e.question}),po("div",{style:{padding:`0 ${4}px ${4}px`},children:[mt("textarea",{ref:c,value:a,onChange:w=>d(w.target.value),onKeyDown:g,placeholder:"Type your reply...",style:{width:"100%",minHeight:40,padding:4,fontSize:12,fontFamily:Zt,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"}}),mt("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:4},children:mt("button",{onClick:p,disabled:!a.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:Zt,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 Ni(e){var s;let t=new Set,n=new Map;for(let i of e){if(!i.linkedSelector)continue;let l=n.get(i.linkedSelector)||[];l.push(i),n.set(i.linkedSelector,l)}let o=new Set,r=new Set;for(let i of n.values()){if(i.length<=1){(s=i[0])!=null&&s.groupId&&r.add(i[0].groupId);continue}i.sort((a,d)=>d.timestamp-a.timestamp);let l=i[0];l.groupId&&r.add(l.groupId);for(let a=1;a<i.length;a++){let d=i[a];t.add(d),d.groupId&&o.add(d.groupId)}}for(let i of e)i.groupId&&o.has(i.groupId)&&!r.has(i.groupId)&&t.add(i);return t}import{useEffect as zl,useLayoutEffect as Vu,useState as Fl}from"react";import{jsx as As,jsxs as Wl}from"react/jsx-runtime";function Uu(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 $l=["top-left","top-right","bottom-right","bottom-left"];function jl({element:e,radius:t,accentColor:n,hoveredCorner:o,draggingCorner:r,cursorViewport:s}){let[i,l]=Fl(null),[a,d]=Fl(!1);if(zl(()=>{let I=O=>{(O.key==="Meta"||O.key==="Control")&&d(!0)},N=O=>{(O.key==="Meta"||O.key==="Control")&&d(!1)},H=()=>d(!1);return window.addEventListener("keydown",I,!0),window.addEventListener("keyup",N,!0),window.addEventListener("blur",H),()=>{window.removeEventListener("keydown",I,!0),window.removeEventListener("keyup",N,!0),window.removeEventListener("blur",H)}},[]),zl(()=>{if(!e){l(null);return}let I=()=>{l(e.getBoundingClientRect())};return I(),window.addEventListener("scroll",I,{passive:!0}),window.addEventListener("resize",I,{passive:!0}),()=>{window.removeEventListener("scroll",I),window.removeEventListener("resize",I)}},[e]),Vu(()=>{e&&l(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!i)return null;let c=i.width,u=i.height,p=Uu(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"]}},v=new Set,x=r!=null?r:o;if(x)if(a)v.add(x);else for(let I of $l)v.add(I);let w={position:"fixed",top:i.top,left:i.left,width:c,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"};return Wl("div",{"data-devtools":"border-radius-handles",style:w,children:[Wl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${u}`,children:[As("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"}),$l.map(I=>{let N=g[I],H=v.has(I);return As("circle",{cx:N.x,cy:N.y,r:I===(r!=null?r:o)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:I===(r!=null?r:o)?4:2,paintOrder:"stroke"},I)})]}),s&&x&&(()=>{let I=Math.round(t[x]);return As("div",{style:{position:"fixed",left:s.x+8,top:s.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:I})})()]})}import{useEffect as Ku,useState as Xu}from"react";function gr(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);if(n)return`oklch(${n[1]} / ${t})`;let o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(o){let r=parseInt(o[1],16),s=parseInt(o[2],16),i=parseInt(o[3],16);return`rgba(${r}, ${s}, ${i}, ${t})`}return`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}import{Fragment as qu,jsx as Ps,jsxs as ri}from"react/jsx-runtime";function Co({element:e,isSelected:t=!1,elementInfo:n,color:o="#3b82f6",annotationNumber:r,changeCount:s,hideTooltip:i=!1}){let[l,a]=Xu(null);if(Ku(()=>{if(!e){a(null);return}let L=()=>{let Y=e.getBoundingClientRect();a(Y)};return L(),window.addEventListener("scroll",L,{passive:!0}),window.addEventListener("resize",L,{passive:!0}),()=>{window.removeEventListener("scroll",L),window.removeEventListener("resize",L)}},[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:gr(o,.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,v=g?`<${g}> ${c}${u}${p}`:`${c}${u}${p}`,x=22,w=l.height>=window.innerHeight,I=w?0:l.top>=x?l.top-x:l.bottom,N=w?{position:"absolute",top:8,left:8,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:o,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:I,left:l.left,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:o,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400},O=!i&&ri("div",{"data-devtools":"tooltip",style:N,children:[r!==void 0&&ri("span",{children:[r,"."]}),Ps("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:v}),s!==void 0&&s>0&&ri("span",{style:{opacity:.8},children:["(",s," ",s===1?"change":"changes",")"]})]});return ri(qu,{children:[ri("div",{"data-devtools":"highlight",style:d,children:[Ps("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:Ps("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:o,strokeWidth:"1"},!t&&{strokeDasharray:"2 4"}))}),w&&O]}),!w&&O]})}import{useEffect as Gl,useLayoutEffect as Zu,useState as Os}from"react";import{jsx as No,jsxs as Ds}from"react/jsx-runtime";function Bs(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 _s({element:e,gap:t,accentColor:n,hoveredAxis:o,draggingAxis:r,cursorViewport:s,isAutoGap:i=!1,refreshKey:l=0}){let[a,d]=Os(null),[c,u]=Os([]),[p,g]=Os(!1);if(Gl(()=>{let Z=h=>{(h.key==="Meta"||h.key==="Control")&&g(!0)},_=h=>{(h.key==="Meta"||h.key==="Control")&&g(!1)},B=()=>g(!1);return window.addEventListener("keydown",Z,!0),window.addEventListener("keyup",_,!0),window.addEventListener("blur",B),()=>{window.removeEventListener("keydown",Z,!0),window.removeEventListener("keyup",_,!0),window.removeEventListener("blur",B)}},[]),Gl(()=>{if(!e){d(null),u([]);return}let Z=()=>{d(e.getBoundingClientRect()),u(Ho(e))};return Z(),window.addEventListener("scroll",Z,{passive:!0}),window.addEventListener("resize",Z,{passive:!0}),()=>{window.removeEventListener("scroll",Z),window.removeEventListener("resize",Z)}},[e]),Zu(()=>{e&&(d(e.getBoundingClientRect()),u(Ho(e)))},[e,t.row,t.column,l]),!a||c.length===0)return null;let v=a.width,x=a.height,w="pm-gap-stripe-pattern",I=Bs(n,.25),N=Bs(n,.1),H=Bs(n,.2),O=8,L=2,Y={position:"fixed",top:a.top,left:a.left,width:v,height:x,pointerEvents:"none",zIndex:9996,overflow:"visible"},re=r!=null?r:o;return Ds("div",{"data-devtools":"gap-handles",style:Y,children:[Ds("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${v} ${x}`,children:[No("defs",{children:No("pattern",{id:w,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:No("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:I,strokeWidth:"1.5"})})}),No("rect",{x:"0.5",y:"0.5",width:Math.max(0,v-1),height:Math.max(0,x-1),fill:"none",stroke:H,strokeWidth:"1"}),c.map((Z,_)=>{let B=Z.x-a.left,h=Z.y-a.top,A=Z.w,k=Z.h,be=p?Z.axis===re:!0;return(Z.axis==="row"?t.row:t.column)===0?null:Ds("g",{opacity:be?1:.6,children:[No("rect",{x:B,y:h,width:A,height:k,fill:N}),No("rect",{x:B,y:h,width:A,height:k,fill:`url(#${w})`})]},_)}),re&&(()=>{let Z=c.filter(Se=>Se.axis===re);if(Z.length===0)return null;let _=Z[0];if(s&&Z.length>1){let Se=1/0;for(let Pe of Z){let _e=Pe.x+Pe.w/2,Ze=Pe.y+Pe.h/2,Oe=Math.abs(s.x-_e)+Math.abs(s.y-Ze);Oe<Se&&(Se=Oe,_=Pe)}}let B=_.x-a.left,h=_.y-a.top,A=_.w,k=_.h,be=B+A/2,K=h+k/2;if(i)return No("circle",{cx:be,cy:K,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let de=re==="column",F=de?L:O,me=de?O:L,R=be-F/2,ie=K-me/2;return No("rect",{x:R,y:ie,width:F,height:me,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),s&&re&&(()=>{let Z=i?"auto":String(Math.round(re==="row"?t.row:t.column));return No("div",{style:{position:"fixed",left:s.x+8,top:s.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:Z})})()]})}import{useCallback as op,useEffect as rp,useState as ip}from"react";import{useEffect as Qu,useState as Yl}from"react";var ep=3,tp=250,Hs=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],np=3e3;function Jl(e){let[t,n]=Yl(0),[o,r]=Yl(()=>Math.floor(Math.random()*Hs.length));return Qu(()=>{if(!e)return;let s=setInterval(()=>n(l=>(l+1)%ep),tp),i=setInterval(()=>r(l=>(l+1)%Hs.length),np);return()=>{clearInterval(s),clearInterval(i)}},[e]),{charIndex:t,word:Hs[o]}}import{Fragment as Ns,jsx as Vn,jsxs as $r}from"react/jsx-runtime";function sp(e){let{element:t}=e,n=t.tagName,o=t.id?`#${t.id}`:"",r=t.className?"."+t.className.split(" ").slice(0,2).join("."):"",s=t.reactComponent;return s?`<${s}> ${n}${o}${r}`:`${n}${o}${r}`}var Vl=22,zs=12;function ap(i){var l=i,{left:e,top:t,avoidBottom:n,style:o,children:r}=l,s=Dn(l,["left","top","avoidBottom","style","children"]);let a=n!==void 0?`${n}px`:"100vh";return Vn("div",y(f({"data-devtools":"badge-hit-area"},s),{style:f({position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:zs,transform:`translate(min(0px, calc(100vw - max(0px, ${e}px) - 100%)), min(0px, calc(${a} - max(0px, ${t}px) - 100%)))`},o),children:r}))}function Ul({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:o,dispatch:r,inFlightSelectors:s,toolbarRef:i,onHoverSelector:l}){var N;let[a,d]=ip([]),c=s&&s.size>0,{charIndex:u,word:p}=Jl(!!c);rp(()=>{if(t){d([]);return}let H=null,O=()=>{let re=[];e.forEach((Z,_)=>{let B=Hn(Z.selector);if(!B)return;let h=B.getBoundingClientRect();re.push({selector:Z.selector,modIndex:_,top:h.top>=Vl?h.top-Vl:h.bottom,left:h.left,label:sp(Z),changeCount:Z.changes.length,annotationNumber:o+_+1})}),d(re)},L=()=>{H&&cancelAnimationFrame(H),H=requestAnimationFrame(O)};O(),window.addEventListener("scroll",L,!0),window.addEventListener("resize",L,!0);let Y=new MutationObserver(L);return Y.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",L),document.fonts.ready.then(L),()=>{window.removeEventListener("scroll",L,!0),window.removeEventListener("resize",L,!0),window.removeEventListener("load",L),Y.disconnect(),H&&cancelAnimationFrame(H)}},[e,t,o]);let g=op(H=>{let O=e[H];if(!O)return;let L=Hn(O.selector);L&&(r({type:"SELECT_ANNOTATION",payload:{id:null}}),r({type:"SET_TOOL",payload:"inspector"}),r({type:"SELECT_ELEMENT",payload:{el:L,info:O.element}}))},[e,r]);if(a.length===0)return null;let v=(N=i==null?void 0:i.current)==null?void 0:N.getBoundingClientRect(),x=v?v.top-8:void 0,w={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},I={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return Vn(Ns,{children:a.map(H=>{let O=s==null?void 0:s.has(H.selector);return Vn(ap,{left:H.left-zs,top:H.top-zs,avoidBottom:x,onClick:()=>g(H.modIndex),onMouseEnter:l?()=>l(H.selector):void 0,onMouseLeave:l?()=>l(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:$r("div",{"data-devtools":"badge",style:y(f({},w),{backgroundColor:O?"#999999":n}),children:[$r("span",{children:[H.annotationNumber,"."]}),Vn("span",{style:I,children:H.label}),$r("span",{style:{opacity:.8},children:["(",H.changeCount," ",H.changeCount===1?"change":"changes",")"]}),O&&$r("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[Vn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:u===1?$r(Ns,{children:[Vn("circle",{cx:"7",cy:"7",r:"2"}),Vn("circle",{cx:"17",cy:"7",r:"2"}),Vn("circle",{cx:"7",cy:"17",r:"2"}),Vn("circle",{cx:"17",cy:"17",r:"2"})]}):$r(Ns,{children:[Vn("circle",{cx:"12",cy:"6",r:"2"}),Vn("circle",{cx:"6",cy:"12",r:"2"}),Vn("circle",{cx:"18",cy:"12",r:"2"}),Vn("circle",{cx:"12",cy:"18",r:"2"})]})}),p]})]})},H.selector)})})}import{useEffect as lp,useState as cp}from"react";import{Fragment as up,jsx as Kl}from"react/jsx-runtime";function dp(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 Xl({styleModifications:e,accentColor:t}){let[n,o]=cp([]);if(lp(()=>{let s=null,i=()=>{let d=[];for(let c of e){let u=Hn(c.selector);if(!u)continue;let p=u.getBoundingClientRect();if(p.width===0&&p.height===0)continue;let g=pr(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`})}o(d)},l=()=>{s&&cancelAnimationFrame(s),s=requestAnimationFrame(i)};i(),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(),s&&cancelAnimationFrame(s)}},[e]),n.length===0)return null;let r=dp(t,.2);return Kl(up,{children:n.map(s=>{let i={position:"fixed",top:s.top,left:s.left,width:s.width,height:s.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${r}`,borderRadius:s.borderRadius,boxSizing:"border-box"};return Kl("div",{"data-devtools":"mod-border",style:i},s.selector)})})}import{useEffect as ql,useLayoutEffect as pp,useState as Zl}from"react";import{jsx as Uo,jsxs as $s}from"react/jsx-runtime";function Fs(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 fp={top:"bottom",bottom:"top",left:"right",right:"left"};function Ws({element:e,padding:t,accentColor:n,hoveredSide:o,draggingSide:r,cursorViewport:s,refreshKey:i}){let[l,a]=Zl(null),[d,c]=Zl(!1);if(ql(()=>{let A=K=>{(K.key==="Meta"||K.key==="Control")&&c(!0)},k=K=>{(K.key==="Meta"||K.key==="Control")&&c(!1)},be=()=>c(!1);return window.addEventListener("keydown",A,!0),window.addEventListener("keyup",k,!0),window.addEventListener("blur",be),()=>{window.removeEventListener("keydown",A,!0),window.removeEventListener("keyup",k,!0),window.removeEventListener("blur",be)}},[]),ql(()=>{if(!e){a(null);return}let A=()=>{a(e.getBoundingClientRect())};return A(),window.addEventListener("scroll",A,{passive:!0}),window.addEventListener("resize",A,{passive:!0}),()=>{window.removeEventListener("scroll",A),window.removeEventListener("resize",A)}},[e]),pp(()=>{e&&a(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,i]),!l)return null;let u=l.width,p=l.height,{top:g,right:v,bottom:x,left:w}=t,I="pm-stripe-pattern",N=Fs(n,.25),H=Fs(n,.1),O=Fs(n,.2),L=8,Y=2,re={position:"fixed",top:l.top,left:l.left,width:u,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"},Z=["top","right","bottom","left"],_={top:`0,0 ${u},0 ${u-v},${g} ${w},${g}`,right:`${u},0 ${u},${p} ${u-v},${p-x} ${u-v},${g}`,bottom:`0,${p} ${w},${p-x} ${u-v},${p-x} ${u},${p}`,left:`0,0 ${w},${g} ${w},${p-x} 0,${p}`},B={top:{x:u/2-L/2,y:g/2-Y/2,w:L,h:Y},bottom:{x:u/2-L/2,y:p-x/2-Y/2,w:L,h:Y},left:{x:w/2-Y/2,y:p/2-L/2,w:Y,h:L},right:{x:u-v/2-Y/2,y:p/2-L/2,w:Y,h:L}},h=new Set;return r?h.add(r):o&&(h.add(o),d||h.add(fp[o])),$s("div",{"data-devtools":"padding-handles",style:re,children:[$s("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${u} ${p}`,children:[Uo("defs",{children:Uo("pattern",{id:I,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Uo("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:N,strokeWidth:"1.5"})})}),Uo("rect",{x:"0.5",y:"0.5",width:Math.max(0,u-1),height:Math.max(0,p-1),fill:"none",stroke:O,strokeWidth:"1"}),Z.map(A=>{if(t[A]<=0)return null;let be=h.has(A);return $s("g",{opacity:be?1:.6,children:[Uo("polygon",{points:_[A],fill:H}),Uo("polygon",{points:_[A],fill:`url(#${I})`})]},A)}),Z.map(A=>{let k=B[A],be=h.has(A);return Uo("rect",{x:k.x,y:k.y,width:k.w,height:k.h,fill:n,stroke:"#ffffff",strokeWidth:be?4:2,paintOrder:"stroke"},`handle-${A}`)})]}),s&&(o||r)&&(()=>{let A=r!=null?r:o,k=Math.round(t[A]);return Uo("div",{style:{position:"fixed",left:s.x+8,top:s.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:k})})()]})}import{useCallback as Eo,useEffect as no,useMemo as Ji,useRef as jn,useState as Cn}from"react";import{Check as Yi,ChevronDown as Xs,MoveHorizontal as dc,Shrink as Np}from"lucide-react";var gp="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",Ko={borderWidth:3,borderStyle:"solid",borderImage:`url("${gp}") 4 / 1.9 / 0 round`};function zi({color:e="rgb(0,0,0)",animated:t=!1}={}){let n=`<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='${e}' stroke-width='.75'/></svg>`;return f({position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(n)}")`,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"},t?{animation:"popmelt-border-march 0.8s linear infinite"}:{})}var Fi={"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 Wr(e){var t,n;return(n=(t=Fi[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 $i(e,t,n,o){let r=e.trim();if(!r)return"";let s=r.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i);if(s)return`${parseFloat(s[1])}${s[2].toLowerCase()}`;let i=parseFloat(r);if(!isNaN(i)){if(o){let{unit:l}=Xo(n);return`${i}${l||Wr(t)}`}return`${i}${Wr(t)}`}return r}function js(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 mp,useEffect as hp,useRef as Ql,useState as yp}from"react";import{Plus as ec,X as bp}from"lucide-react";import{jsx as Wn,jsxs as mr}from"react/jsx-runtime";var Wi=[{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 vp(e){if(!e||e==="none")return[];let t=[],n=/([\w-]+)\(([^)]+)\)/g,o;for(;(o=n.exec(e))!==null;){let r=o[1],s=o[2],i=parseFloat(s);isNaN(i)||t.push({name:r,value:i})}return t}function Gs(e){return e.length===0?"none":e.map(t=>{var r;let n=Wi.find(s=>s.name===t.name),o=(r=n==null?void 0:n.unit)!=null?r:"";return`${t.name}(${t.value}${o})`}).join(" ")}function tc({value:e,onChange:t,accentColor:n,modified:o,panelContentRef:r}){let s=vp(e),[i,l]=yp(!1),a=Ql(null),d=Ql(null);hp(()=>{if(!i)return;let H=O=>{a.current&&!O.composedPath().includes(a.current)&&l(!1)};return document.addEventListener("mousedown",H,!0),()=>document.removeEventListener("mousedown",H,!0)},[i]);let c=Wi.filter(H=>!s.some(O=>O.name===H.name)),u=H=>{let O=[...s,{name:H.name,value:H.defaultValue}];t(Gs(O)),l(!1)},p=H=>{let O=s.filter((L,Y)=>Y!==H);t(Gs(O))},g=(H,O)=>{let L=s.map((Y,re)=>re===H?y(f({},Y),{value:O}):Y);t(Gs(L))},v={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},x=mp(H=>{var _;if(!d.current)return{position:"fixed",top:0,left:0};let O=d.current.getBoundingClientRect(),L=(_=r==null?void 0:r.current)==null?void 0:_.getBoundingClientRect(),Y=H*24+8,Z=window.innerHeight-O.bottom<Y;return y(f({position:"fixed"},Z?{bottom:window.innerHeight-O.top+2}:{top:O.bottom+2}),{left:L?L.left+4:O.left,width:L?L.width-8:140,zIndex:10001})},[r]),w={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)"},I={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"},N=H=>Wn("div",{ref:a,style:f(f({},x(H.length)),w),children:H.map(O=>Wn("button",{type:"button",onClick:()=>u(O),style:I,onMouseEnter:L=>{L.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:L=>{L.currentTarget.style.backgroundColor="transparent"},children:O.label},O.name))});return s.length===0?mr("div",{children:[mr("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Wn(zo,{modified:!1,children:Wn("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:y(f({},v),{color:"#999",cursor:"default"})})}),Wn("button",{ref:d,type:"button",onClick:()=>l(!i),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:Wn(ec,{size:12})})]}),i&&N(Wi)]}):mr("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[s.map((H,O)=>{let L=Wi.find(Y=>Y.name===H.name);return L?mr("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Wn("span",{style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:o?n:"#94a3b8",fontWeight:o?600:400,width:56,flexShrink:0,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:L.label}),Wn(zo,{modified:o,children:mr("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[Wn("input",{type:"range",min:L.min,max:L.max,step:L.step,value:H.value,onChange:Y=>g(O,parseFloat(Y.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(H.value-L.min)/(L.max-L.min)*100}%, rgba(0,0,0,0.1) ${(H.value-L.min)/(L.max-L.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),Wn("input",{type:"number",min:L.min,max:L.max,step:L.step,value:L.unit==="px"||L.unit==="deg"?Math.round(H.value):Math.round(H.value*100)/100,onChange:Y=>g(O,parseFloat(Y.target.value)||0),style:y(f({},v),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),L.unit&&Wn("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:L.unit})]})}),Wn("button",{type:"button",onClick:()=>p(O),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:Wn(bp,{size:10})})]},H.name):null}),c.length>0&&mr("div",{children:[mr("button",{ref:d,type:"button",onClick:()=>l(!i),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:[Wn(ec,{size:10}),"Add filter"]}),i&&N(c)]})]})}import{useCallback as go,useEffect as Cp,useRef as ji,useState as nc}from"react";import{AlignHorizontalSpaceAround as Ep,AlignVerticalSpaceAround as kp,Columns3 as Tp,Grid2x2 as Mp,RectangleHorizontal as Ip,Rows3 as Rp,UnfoldHorizontal as oc,UnfoldVertical as rc}from"lucide-react";import{useCallback as xp,useEffect as Sp,useRef as ii}from"react";import{jsx as wp}from"react/jsx-runtime";var Ys=[0,1,2,4,8,12,16,20,24,28,32];function jr({value:e,onChange:t,onPreview:n,onScrubEnd:o,onReset:r,isModified:s,accentColor:i,defaultUnit:l="rem",snapSteps:a,color:d,style:c,children:u}){let p=ii(null),g=ii(null),v=ii(r),x=ii(s),w=ii(!1);v.current=r,x.current=s,Sp(()=>{let N=O=>{let L=g.current;if(!L)return;L.hasMoved=!0,w.current=O.shiftKey;let Y=L.unit==="rem"||L.unit==="em"?.1:1;L.accum+=O.movementX*Y;let re=Math.max(0,Math.round((L.startValue+L.accum)*10)/10);if(O.shiftKey&&a){let Z=L.unit==="rem"||L.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,_=L.unit==="rem"||L.unit==="em"?re*Z:re,B=a[a.length-1];for(let h=0;h<a.length-1;h++){let A=a[h],k=a[h+1];if(_<=(A+k)/2){B=A;break}if(_<k){B=k;break}}_>a[a.length-1]&&(B=Math.round(_/8)*8),re=L.unit==="rem"||L.unit==="em"?Math.round(B/Z*1e3)/1e3:B}n==null||n(`${re}${L.unit}`)},H=()=>{let O=g.current;if(!O)return;let L=Math.max(0,Math.round((O.startValue+O.accum)*10)/10);if(w.current&&a){let re=O.unit==="rem"||O.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,Z=O.unit==="rem"||O.unit==="em"?L*re:L,_=a[a.length-1];for(let B=0;B<a.length-1;B++){let h=a[B],A=a[B+1];if(Z<=(h+A)/2){_=h;break}if(Z<A){_=A;break}}Z>a[a.length-1]&&(_=Math.round(Z/8)*8),L=O.unit==="rem"||O.unit==="em"?Math.round(_/re*1e3)/1e3:_}let Y=O.hasMoved&&L!==O.startValue;g.current=null,document.exitPointerLock(),Y?t(`${L}${O.unit}`):O.hasMoved?n==null||n(`${O.startValue}${O.unit}`):x.current&&v.current&&v.current(),o==null||o()};return document.addEventListener("mousemove",N),document.addEventListener("mouseup",H),()=>{document.removeEventListener("mousemove",N),document.removeEventListener("mouseup",H)}},[t,n,o]);let I=xp(N=>{var L;if(N.button!==0)return;N.preventDefault();let H=Xo(e),O=H.unit&&H.unit!=="px"?H.unit:l;g.current={startValue:H.num,unit:O,accum:0,hasMoved:!1},(L=p.current)==null||L.requestPointerLock()},[e,l]);return wp("span",{ref:p,onMouseDown:I,title:s?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:f({color:s?i||"#3b82f6":d||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize"},c),children:u})}import{Fragment as Js,jsx as De,jsxs as gn}from"react/jsx-runtime";function Lp({gridCols:e,gridRows:t,gridModified:n,accentColor:o,onColsChange:r,onRowsChange:s}){return De(Un,{style:{width:100},children:gn("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"8px 4px"},children:[De("input",{type:"number",min:1,max:12,value:e,onChange:i=>r(parseInt(i.target.value)||1),style:y(f({},wn),{width:32,textAlign:"center",padding:2})}),De("span",{style:{fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:n?o:"#999",fontWeight:n?600:400,fontSize:11,margin:"0 4px"},children:"\xD7"}),De("input",{type:"number",min:1,max:12,value:t,onChange:i=>s(parseInt(i.target.value)||1),style:y(f({},wn),{width:32,textAlign:"center",padding:2})})]})})}function ic({element:e,getValue:t,getOriginalValue:n,handleChange:o,isModified:r,onResetProperty:s,isCollapsed:i,onToggle:l,sectionHeaderStyle:a,activeDropdown:d,onDropdownChange:c,panelContentRef:u,accentColor:p,onFieldHover:g,preferredUnit:v,onUnitCycle:x}){let w=c,I=t("display"),N=t("flex-direction"),H=sc(I,N),O=I==="flex"||I==="inline-flex",L=I==="grid",Y=O||L,re=N==="column"||N==="column-reverse",Z=t("width"),_=t("height"),B=r("width")?Z:Ai(e,"width"),h=r("height")?_:Ai(e,"height"),A=Vs(Z,B),k=Vs(_,h),be=t("min-width"),K=t("max-width"),de=t("min-height"),F=t("max-height"),me=Gr(t("padding")),R=t("gap"),ie=t("row-gap"),Se=t("column-gap"),Pe=t("grid-template-columns"),_e=t("grid-template-rows"),Ze=t("overflow"),Oe=Pe.split(/\s+/).filter(W=>W&&W!=="none").length||1,he=_e.split(/\s+/).filter(W=>W&&W!=="none").length||1,[Fe,rt]=nc(!1),ht=d!==null,Jt=ht||Fe,Q=ht?.3:Fe?.65:1,ne=({mode:W,icon:fe,active:Le})=>De("button",{type:"button",onClick:()=>ac(W,o),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:Le?gr(p,.15):"transparent",color:Le?p:"#64748b",cursor:"pointer",fontSize:14},children:fe}),Te=(W,fe,Le)=>{Le==="fixed"?o(W,fe):o(W,Gi(Le,fe))},$e=W=>{let fe=Gr(t("padding")),Le=W||"0";o("padding",`${fe.top} ${Le} ${fe.bottom} ${Le}`)},pt=W=>{let fe=Gr(t("padding")),Le=W||"0";o("padding",`${Le} ${fe.right} ${Le} ${fe.left}`)},[Je,ye]=nc({}),ct=go((W,fe)=>Le=>{fe(Le),ye(Gt=>y(f({},Gt),{[W]:Le}))},[]),Ge=go(W=>{ye(fe=>{let Le=f({},fe);return delete Le[W],Le})},[]),_t=go(W=>{let fe=Gr(t("padding"));Xe(e,"padding",`${fe.top} ${W} ${fe.bottom} ${W}`)},[e,t]),dt=go(W=>{let fe=Gr(t("padding"));Xe(e,"padding",`${W} ${fe.right} ${W} ${fe.left}`)},[e,t]),pe=go(W=>fe=>{Xe(e,W,fe)},[e]),se=re?"row":"column",Ce=se==="row"?"row-gap":"column-gap",Re=Ce==="row-gap"?ie||R:Se||R,it=r(Ce)||r("gap"),Me=go(()=>{let fe=Ho(e).find(Gt=>Gt.axis===se);if(fe)return se==="row"?fe.h:fe.w;let Le=ur(e);return se==="row"?Le.row:Le.column},[e,se]),en=go(()=>{let W=t("justify-content");return W==="space-between"?"between":W==="space-around"||W==="space-evenly"?"around":"fixed"},[t])(),pn=go((W,fe)=>{if(W==="fixed"){let Le=Math.max(0,Math.round(Me()*1e3)/1e3),Gt=fe||(Le>0?`${Le}px`:"8px");o("justify-content","normal"),o(Ce,Gt);return}o("justify-content",W==="between"?"space-between":"space-around"),o(Ce,"0px")},[Ce,Me,o]),zn=go(W=>{if(en!=="fixed"){pn("fixed",W);return}o(Ce,W)},[pn,en,Ce,o]),jt=go(W=>{Xe(e,"justify-content","normal"),Xe(e,Ce,W)},[e,Ce]),Ot=W=>W==="center"?1:W==="flex-end"||W==="end"?2:0,hn=Ot(t("justify-content")),vt=Ot(t("align-items")),Vt=re?vt:hn,Qe=re?hn:vt,xo=ji(null),Ke=ji({x:0,y:0}),Tt=ji({col:Vt,row:Qe});Tt.current={col:Vt,row:Qe};let Gn=go((W,fe)=>{let Le=["flex-start","center","flex-end"];re?(o("justify-content",Le[fe]),o("align-items",Le[W])):(o("justify-content",Le[W]),o("align-items",Le[fe]))},[re,o]),So=ji(Gn);So.current=Gn,Cp(()=>{let fe=Le=>{let Gt=xo.current;if(!Gt||!Le.composedPath().includes(Gt))return;Le.preventDefault(),Le.stopPropagation(),Ke.current.x+=Le.deltaX,Ke.current.y+=Le.deltaY;let{col:St,row:yn}=Tt.current,bn=!1;Math.abs(Ke.current.x)>=30&&(St=Math.max(0,Math.min(2,St+(Ke.current.x>0?1:-1))),Ke.current.x=0,Ke.current.y=0,bn=!0),!bn&&Math.abs(Ke.current.y)>=30&&(yn=Math.max(0,Math.min(2,yn+(Ke.current.y>0?1:-1))),Ke.current.x=0,Ke.current.y=0,bn=!0),bn&&(St!==Tt.current.col||yn!==Tt.current.row)&&So.current(St,yn)};return document.addEventListener("wheel",fe,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",fe,{capture:!0})},[]);let Fn=()=>De("div",{ref:xo,onMouseEnter:()=>{rt(!0),u.current&&(u.current.style.overflowY="hidden")},onMouseLeave:()=>{rt(!1),u.current&&(u.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:to,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(W=>[0,1,2].map(fe=>De("button",{type:"button",onClick:()=>Gn(fe,W),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:fe===Vt&&W===Qe?De("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:fe===0?gn(Js,{children:[De("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),De("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),De("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):fe===1?gn(Js,{children:[De("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),De("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),De("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):gn(Js,{children:[De("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),De("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),De("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]})}):De("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${W}-${fe}`)))}),rn=r("grid-template-columns")||r("grid-template-rows");return gn("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[De("div",{style:a,children:De("span",{children:Y?"Auto layout":"Layout"})}),gn("div",{style:{padding:"8px 12px"},children:[gn("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:to,borderRadius:2,padding:2,opacity:Q,transition:"opacity 150ms ease"},children:[De(ne,{mode:"block",icon:De(Ip,{size:16}),active:H==="block"}),De(ne,{mode:"flex-col",icon:De(Rp,{size:16}),active:H==="flex-col"}),De(ne,{mode:"flex-row",icon:De(Tp,{size:16}),active:H==="flex-row"}),De(ne,{mode:"grid",icon:De(Mp,{size:16}),active:H==="grid"})]}),gn("div",{style:{display:"flex",gap:4,marginBottom:8},children:[De(Us,{label:"W",property:"width",cssValue:A==="fixed"?Z:`${Math.round(e.getBoundingClientRect().width)}px`,mode:A,onValueChange:W=>o("width",W),onModeChange:W=>{if(W==="fixed"){let fe=e.getBoundingClientRect();o("width",`${Math.round(fe.width)}px`)}else o("width",Gi(W,Z))},modified:r("width"),dimmed:ht&&d!=="width",dropdownOpen:d==="width",onDropdownChange:W=>w(W?"width":null),panelContentRef:u,accentColor:p,onReset:()=>s("width"),minValue:be!=="none"&&be!=="0px"&&be!=="auto"?be:"",maxValue:K!=="none"&&K!=="auto"?K:"",onMinChange:W=>o("min-width",W||"0"),onMaxChange:W=>o("max-width",W||"none"),onMinReset:()=>s("min-width"),onMaxReset:()=>s("max-width"),minModified:r("min-width"),maxModified:r("max-width")}),De(Us,{label:"H",property:"height",cssValue:k==="fixed"?_:`${Math.round(e.getBoundingClientRect().height)}px`,mode:k,onValueChange:W=>o("height",W),onModeChange:W=>{if(W==="fixed"){let fe=e.getBoundingClientRect();o("height",`${Math.round(fe.height)}px`)}else o("height",Gi(W,_))},modified:r("height"),dimmed:ht&&d!=="height",dropdownOpen:d==="height",onDropdownChange:W=>w(W?"height":null),panelContentRef:u,minValue:de!=="none"&&de!=="0px"&&de!=="auto"?de:"",maxValue:F!=="none"&&F!=="auto"?F:"",onMinChange:W=>o("min-height",W||"0"),onMaxChange:W=>o("max-height",W||"none"),onMinReset:()=>s("min-height"),onMaxReset:()=>s("max-height"),minModified:r("min-height"),maxModified:r("max-height"),accentColor:p,onReset:()=>s("height")})]}),O&&gn("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8},children:[De("div",{style:{opacity:ht?.3:1,transition:"opacity 150ms ease"},children:Fn()}),gn("div",{style:{flex:1,opacity:Q,transition:"opacity 150ms ease"},children:[De("div",{onClick:it?()=>{s(Ce),s("gap")}:void 0,title:it?"Click to reset":void 0,style:{fontSize:9,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:it?p:"#999",fontWeight:it?600:400,marginBottom:2,cursor:it?"pointer":"default"},children:"Gap"}),De("div",{style:{display:"flex",gap:2,marginBottom:4,backgroundColor:to,borderRadius:2,padding:2},children:["fixed","between","around"].map(W=>{let fe=en===W;return De("button",{type:"button",onClick:()=>pn(W),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"4px 6px",border:"none",borderRadius:2,backgroundColor:fe?gr(p,.15):"transparent",color:fe?p:"#64748b",cursor:"pointer",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:fe?600:400,textTransform:"capitalize"},children:W},W)})}),De(Un,{dimmed:ht,children:gn("div",{style:{display:"flex",alignItems:"center"},children:[De(jr,{value:Re,onChange:W=>{Ge("gap"),zn(W)},onPreview:ct("gap",jt),onScrubEnd:()=>Ge("gap"),onReset:()=>{s(Ce),s("gap")},isModified:it,accentColor:p,defaultUnit:v,children:N==="column"||N==="column-reverse"?De(rc,{size:12,strokeWidth:it?2.5:1.5}):De(oc,{size:12,strokeWidth:it?2.5:1.5})}),De(mo,{property:Ce,value:Je.gap||(en==="fixed"?Re:`${Math.max(0,Math.round(Me()*1e3)/1e3)}px`),onChange:W=>zn(W),isModified:it||"gap"in Je,style:y(f({},wn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:x})]})})]})]}),L&&gn("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:Q,transition:"opacity 150ms ease"},children:[De(Lp,{gridCols:Oe,gridRows:he,gridModified:rn,accentColor:p,onColsChange:W=>o("grid-template-columns",`repeat(${W}, 1fr)`),onRowsChange:W=>o("grid-template-rows",`repeat(${W}, 1fr)`)}),gn("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[De(Un,{dimmed:ht,children:gn("div",{style:{display:"flex",alignItems:"center"},children:[De(jr,{value:Se||R,onChange:W=>{Ge("column-gap"),o("column-gap",W)},onPreview:ct("column-gap",pe("column-gap")),onScrubEnd:()=>Ge("column-gap"),onReset:()=>s("column-gap"),isModified:r("column-gap"),accentColor:p,defaultUnit:v,children:De(oc,{size:12,strokeWidth:r("column-gap")?2.5:1.5})}),De(mo,{property:"column-gap",value:Je["column-gap"]||Se||R,onChange:W=>o("column-gap",W),isModified:r("column-gap")||"column-gap"in Je,placeholder:"col",style:y(f({},wn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:x})]})}),De(Un,{dimmed:ht,children:gn("div",{style:{display:"flex",alignItems:"center"},children:[De(jr,{value:ie||R,onChange:W=>{Ge("row-gap"),o("row-gap",W)},onPreview:ct("row-gap",pe("row-gap")),onScrubEnd:()=>Ge("row-gap"),onReset:()=>s("row-gap"),isModified:r("row-gap"),accentColor:p,defaultUnit:v,children:De(rc,{size:12,strokeWidth:r("row-gap")?2.5:1.5})}),De(mo,{property:"row-gap",value:Je["row-gap"]||ie||R,onChange:W=>o("row-gap",W),isModified:r("row-gap")||"row-gap"in Je,placeholder:"row",style:y(f({},wn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:x})]})})]})]}),Y&&gn("div",{onMouseEnter:()=>g==null?void 0:g("padding"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:Q,transition:"opacity 150ms ease"},children:[De(Un,{style:{flex:1},dimmed:ht,children:gn("div",{style:{display:"flex",alignItems:"center"},children:[De(jr,{value:me.left,onChange:W=>{Ge("padding-h"),$e(W)},onPreview:ct("padding-h",_t),onScrubEnd:()=>Ge("padding-h"),onReset:()=>s("padding"),isModified:r("padding"),accentColor:p,defaultUnit:v,snapSteps:Ys,children:De(Ep,{size:12,strokeWidth:r("padding")?2.5:1.5})}),De(mo,{property:"padding",value:Je["padding-h"]||me.left,onChange:W=>$e(W),isModified:r("padding")||"padding-h"in Je,placeholder:"H pad",style:y(f({},wn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:x})]})}),De(Un,{style:{flex:1},dimmed:ht,children:gn("div",{style:{display:"flex",alignItems:"center"},children:[De(jr,{value:me.top,onChange:W=>{Ge("padding-v"),pt(W)},onPreview:ct("padding-v",dt),onScrubEnd:()=>Ge("padding-v"),onReset:()=>s("padding"),isModified:r("padding"),accentColor:p,defaultUnit:v,snapSteps:Ys,children:De(kp,{size:12,strokeWidth:r("padding")?2.5:1.5})}),De(mo,{property:"padding",value:Je["padding-v"]||me.top,onChange:W=>pt(W),isModified:r("padding")||"padding-v"in Je,placeholder:"V pad",style:y(f({},wn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:x})]})})]}),gn("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:Q,transition:"opacity 150ms ease"},children:[De("input",{type:"checkbox",checked:Ze==="hidden",onChange:W=>o("overflow",W.target.checked?"hidden":"visible"),style:{margin:0,accentColor:p}}),"Clip content"]})]})]})}import{AlignCenter as Ap,AlignJustify as Pp,AlignLeft as Op,AlignRight as Bp,Baseline as Dp,ChevronDown as _p,WholeWord as Hp}from"lucide-react";import{jsx as kt,jsxs as Fo}from"react/jsx-runtime";var lc={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function cc({element:e,getValue:t,handleChange:n,isModified:o,onResetProperty:r,isCollapsed:s,onToggle:i,sectionHeaderStyle:l,accentColor:a,colorVariables:d,activeColorDropdown:c,onColorDropdownChange:u,panelContentRef:p,preferredUnit:g,onUnitCycle:v}){var A;let x=t("font-family"),w=t("font-size"),I=t("font-weight"),N=t("line-height"),H=t("letter-spacing"),O=t("text-align"),L=t("color"),Y=String(I),re=lc[Y]||Y,Z=Fr(e,L),_=L.includes("var(")?null:ni(Z,d),B=({align:k,icon:be})=>{let K=O===k;return kt("button",{type:"button",onClick:()=>n("text-align",k),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:K?gr(a,.15):"transparent",color:K?a:"#64748b",cursor:"pointer"},children:be})},h=((A=x.split(",")[0])==null?void 0:A.trim().replace(/^["']|["']$/g,""))||"System";return Fo("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[kt("div",{style:l,children:kt("span",{children:"Typography"})}),Fo("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[kt(Un,{children:Fo("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[kt("input",{type:"text",value:x,onChange:k=>n("font-family",k.target.value),style:y(f({},wn),{flex:1,minWidth:0,padding:0,fontWeight:o("font-family")?600:400,color:o("font-family")?a:"inherit"}),title:x}),kt(_p,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),Fo("div",{style:{display:"flex",gap:4},children:[kt(Un,{style:{flex:1},children:kt("select",{value:Y,onChange:k=>n("font-weight",k.target.value),style:y(f({},wn),{padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:o("font-weight")?600:400,color:o("font-weight")?a:"inherit"}),children:Object.entries(lc).map(([k,be])=>kt("option",{value:k,children:be},k))})}),kt(Un,{style:{flex:1},children:kt("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:kt(mo,{property:"font-size",value:w,onChange:k=>n("font-size",k),isModified:o("font-size"),min:1,max:999,style:y(f({},wn),{padding:"6px 8px",paddingRight:24,fontWeight:o("font-size")?600:400,color:o("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:v})})})]}),Fo("div",{style:{display:"flex",gap:4},children:[kt(Un,{style:{flex:1},children:Fo("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[kt(Dp,{size:12,style:{color:o("line-height")?a:"#999",flexShrink:0}}),kt(mo,{property:"line-height",value:N,onChange:k=>n("line-height",k),isModified:o("line-height"),step:.1,min:0,placeholder:"Auto",style:y(f({},wn),{flex:1,minWidth:0,padding:0,fontWeight:o("line-height")?600:400,color:o("line-height")?a:"inherit"}),showUnit:!1})]})}),kt(Un,{style:{flex:1},children:Fo("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[kt(Hp,{size:12,style:{color:o("letter-spacing")?a:"#999",flexShrink:0}}),kt(mo,{property:"letter-spacing",value:H,onChange:k=>n("letter-spacing",k),isModified:o("letter-spacing"),step:.1,placeholder:"\u2014",style:y(f({},wn),{flex:1,minWidth:0,padding:0,fontWeight:o("letter-spacing")?600:400,color:o("letter-spacing")?a:"inherit"}),showUnit:!1})]})})]}),Fo("div",{style:{display:"flex",gap:2,backgroundColor:to,borderRadius:2,padding:2},children:[kt(B,{align:"left",icon:kt(Op,{size:14})}),kt(B,{align:"center",icon:kt(Ap,{size:14})}),kt(B,{align:"right",icon:kt(Bp,{size:14})}),kt(B,{align:"justify",icon:kt(Pp,{size:14})})]}),Fo("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[kt("span",{onClick:o("color")?()=>r("color"):void 0,title:o("color")?"Click to reset":void 0,style:{fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:o("color")?a:"#64748b",fontWeight:o("color")?600:400,cursor:o("color")?"pointer":"default",width:40,flexShrink:0},children:"Color"}),kt("div",{style:{flex:1,minWidth:0},children:kt(Ks,{value:L,resolvedValue:Z,colorVariables:d,matchingVariable:_,onChange:k=>n("color",k),accentColor:a,modified:o("color"),panelContentRef:p,isDropdownOpen:c==="color",onDropdownChange:k=>u(k?"color":null)})})]})]})]})}import{Fragment as Fp,jsx as Ee,jsxs as Yt}from"react/jsx-runtime";var uc=[{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 zp(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 Vs(e,t){return!t||e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":"fixed"}function Gi(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 o=n.unit==="%"?"px":n.unit||"px";return`${n.num}${o}`}return"auto"}}}function Gr(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 sc(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function ac(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 to="rgba(0, 0, 0, 0.04)",wn={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 Us({label:e,property:t,cssValue:n,mode:o,onValueChange:r,onModeChange:s,modified:i,dimmed:l,dropdownOpen:a,onDropdownChange:d,panelContentRef:c,accentColor:u="#3b82f6",onReset:p,minValue:g,maxValue:v,onMinChange:x,onMaxChange:w,onMinReset:I,onMaxReset:N,minModified:H,maxModified:O}){let L=Xo(n),Y=i?L.unit||Wr(t):Wr(t),re=!i&&L.unit&&L.unit!==Y?js(L.num,Y):L.num,[Z,_]=Cn(!1),[B,h]=Cn(String(re)),[A,k]=Cn(!1),be=jn(null),K=jn(null),de=jn(null),F=jn(!1);no(()=>{Z||h(String(re))},[re,Z]),no(()=>{if(!a)return;let Oe=Fe=>{K.current&&!Fe.composedPath().includes(K.current)&&de.current&&!Fe.composedPath().includes(de.current)&&(d==null||d(!1))},he=Fe=>{Fe.key==="Escape"&&(d==null||d(!1))};return document.addEventListener("mousedown",Oe),document.addEventListener("keydown",he),()=>{document.removeEventListener("mousedown",Oe),document.removeEventListener("keydown",he)}},[a,d]),no(()=>{Z&&be.current&&(be.current.focus(),be.current.select())},[Z]);let me=()=>{let Oe=$i(B,t,n,i);r(Oe||`${Math.max(0,parseFloat(B)||0)}${Y}`),_(!1)},R=()=>{if(F.current){F.current=!1;return}me()},ie=Oe=>{if(Oe.key==="Enter"){me();return}if(Oe.key==="Escape"){F.current=!0,h(String(re)),_(!1);return}if(Oe.key==="ArrowUp"||Oe.key==="ArrowDown"){Oe.preventDefault();let he=Oe.key==="ArrowUp"?1:-1,Fe=Oe.shiftKey?8:Oe.altKey?.1:1,rt=parseFloat(B)||0,ht=Math.round(Math.max(0,rt+he*Fe)*1e3)/1e3;h(String(ht)),r(`${ht}${Y}`)}},Se={fixed:"Fixed",hug:"Hug",fill:"Fill"},Pe={fixed:Ee(dc,{size:12}),hug:Ee(Np,{size:12}),fill:Ee(dc,{size:12})},_e=()=>{d==null||d(!a)},Ze=()=>{if(!de.current||!(c!=null&&c.current))return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let Oe=de.current.getBoundingClientRect(),he=c.current.getBoundingClientRect();return{position:"fixed",top:Oe.bottom+4,left:he.left+4,width:he.width-8}};return Yt("div",{ref:de,onMouseEnter:()=>k(!0),onMouseLeave:()=>k(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:Z?u:A?"rgba(0,0,0,0.15)":"transparent",backgroundColor:to,transition:"border-color 100ms ease, opacity 150ms ease",opacity:l?.3:1},children:[Ee("span",{onClick:i&&p?p:void 0,title:i?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:i?u:"#999",fontWeight:i?600:400,padding:"0 8px",flexShrink:0,cursor:i?"pointer":"default"},children:e}),o==="fixed"?Z?Ee("input",{ref:be,type:"text",inputMode:"numeric",value:B,onChange:Oe=>h(Oe.target.value),onKeyDown:ie,onBlur:R,style:y(f({},wn),{flex:1,minWidth:0,padding:"4px 2px"})}):Ee("span",{onClick:()=>_(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:re}):Ee("span",{style:{flex:1}}),Yt("button",{type:"button",onClick:_e,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:[Se[o],Ee(Xs,{size:12})]}),a&&Yt("div",{ref:K,style:y(f({},Ze()),{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:[Yt("button",{type:"button",onClick:()=>{s("fixed"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="fixed"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="fixed"?600:400,cursor:"pointer",textAlign:"left"},children:[Pe.fixed,Yt("span",{children:["Fixed ",t," (",n,")"]}),o==="fixed"&&Ee(Yi,{size:14,style:{marginLeft:"auto"}})]}),Yt("button",{type:"button",onClick:()=>{s("hug"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="hug"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="hug"?600:400,cursor:"pointer",textAlign:"left"},children:[Pe.hug,Ee("span",{children:"Hug contents"}),o==="hug"&&Ee(Yi,{size:14,style:{marginLeft:"auto"}})]}),Yt("button",{type:"button",onClick:()=>{s("fill"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="fill"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="fill"?600:400,cursor:"pointer",textAlign:"left"},children:[Pe.fill,Ee("span",{children:"Fill container"}),o==="fill"&&Ee(Yi,{size:14,style:{marginLeft:"auto"}})]}),Ee("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),Yt("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[Yt("div",{style:{display:"flex",alignItems:"center",backgroundColor:to,borderRadius:2,padding:"4px 8px"},children:[Ee("span",{onClick:H?Oe=>{Oe.stopPropagation(),I==null||I()}:void 0,title:H?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:H?u:"#999",fontWeight:H?600:400,marginRight:8,flexShrink:0,cursor:H?"pointer":"default"},children:"Min"}),Ee("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:Oe=>x==null?void 0:x(Oe.target.value),onClick:Oe=>Oe.stopPropagation(),style:y(f({},wn),{flex:1,minWidth:0,padding:0,textAlign:"right",color:H?u:"inherit",fontWeight:H?600:400})})]}),Yt("div",{style:{display:"flex",alignItems:"center",backgroundColor:to,borderRadius:2,padding:"4px 8px"},children:[Ee("span",{onClick:O?Oe=>{Oe.stopPropagation(),N==null||N()}:void 0,title:O?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:O?u:"#999",fontWeight:O?600:400,marginRight:8,flexShrink:0,cursor:O?"pointer":"default"},children:"Max"}),Ee("input",{type:"text",value:v||"",placeholder:"\u2014",onChange:Oe=>w==null?void 0:w(Oe.target.value),onClick:Oe=>Oe.stopPropagation(),style:y(f({},wn),{flex:1,minWidth:0,padding:0,textAlign:"right",color:O?u:"inherit",fontWeight:O?600:400})})]})]})]})]})}function Un({children:e,style:t,dimmed:n}){let[o,r]=Cn(!1);return Ee("div",{onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),style:f({position:"relative",borderRadius:2,border:"1px solid",borderColor:o?"rgba(0,0,0,0.15)":"transparent",backgroundColor:to,transition:"border-color 100ms ease, opacity 150ms ease",opacity:n?.3:1},t),children:e})}function zo({children:e}){let[t,n]=Cn(!1);return Ee("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:to,transition:"border-color 100ms ease"},children:e})}function mo({property:e,value:t,onChange:n,isModified:o=!1,step:r=1,min:s,max:i,style:l,placeholder:a,showUnit:d=!0,unitStyle:c,preferredUnit:u,onUnitCycle:p}){let g=Xo(t),v=Wr(e),x=Fi[e],I=u&&x&&x.includes(u)?u:v,N=o&&g.unit||I,H=!o&&g.unit&&g.unit!==N?js(g.num,N):g.num,[O,L]=Cn(!1),[Y,re]=Cn(""),Z=R=>{L(!0),re(String(H||"")),requestAnimationFrame(()=>R.target.select())},_=()=>{if(L(!1),Y.trim()){let R=$i(Y,e,t,o);R&&n(R)}},B=R=>{let ie=R.target.value;re(ie);let Se=ie.trim(),Pe=Se.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),_e=Se.match(/^(-?[\d.]+)$/);if(Pe){let Ze=parseFloat(Pe[1]);isNaN(Ze)||n(`${Ze}${Pe[2].toLowerCase()}`)}else if(_e){let Ze=parseFloat(_e[1]);isNaN(Ze)||n(`${Ze}${N}`)}},h=R=>{if(R.key==="Enter"){if(Y.trim()){let ie=$i(Y,e,t,o);ie&&n(ie)}R.target.blur();return}if(R.key==="ArrowUp"||R.key==="ArrowDown"){R.preventDefault();let ie=R.shiftKey?10:R.altKey?.1:1,Se=(R.key==="ArrowUp"?1:-1)*r*ie,Pe=parseFloat(Y)||H||0,_e=Math.round((Pe+Se)*1e3)/1e3;s!==void 0&&(_e=Math.max(s,_e)),i!==void 0&&(_e=Math.min(i,_e)),re(String(_e)),n(`${_e}${N}`)}},A=/^-?[\d.]/.test(t.trim()),k=O?Y:A?String(H):"",K=O&&/\s*(rem|em|px|%)\s*$/i.test(Y)?"":N,de=p&&(K==="rem"||K==="px"),F={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},me=y(f({},c!=null?c:F),{pointerEvents:"auto",cursor:"pointer"});return Yt(Fp,{children:[Ee("input",{type:"text",inputMode:"decimal",value:k,onFocus:Z,onBlur:_,onChange:B,onKeyDown:h,placeholder:a,style:l}),d&&K&&Ee("span",{style:de?me:c!=null?c:F,onClick:de?p:void 0,title:de?"Click to switch units":void 0,children:K})]})}function Ks({value:e,resolvedValue:t,colorVariables:n,matchingVariable:o,onChange:r,accentColor:s="#3b82f6",modified:i,panelContentRef:l,isDropdownOpen:a,onDropdownChange:d}){let[c,u]=Cn(!1),p=e,[g,v]=Cn(p),[x,w]=Cn(!1),[I,N]=Cn(!1),[H,O]=Cn(!1),L=jn(null),Y=jn(null),re=jn(null),Z=a!==void 0?a:x,_=d||w,B=Eo(()=>{if(!re.current)return{position:"fixed",top:0,left:0,width:200};let R=re.current.getBoundingClientRect();if(l!=null&&l.current){let ie=l.current.getBoundingClientRect();return{position:"fixed",top:R.bottom+4,left:ie.left+4,width:ie.width-8}}return{position:"fixed",top:R.bottom+4,left:R.left,width:R.width}},[l]);no(()=>{c||v(e)},[e,c]),no(()=>{if(!Z&&!I)return;let R=Se=>{re.current&&!Se.composedPath().includes(re.current)&&(_(!1),N(!1))},ie=Se=>{Se.key==="Escape"&&(_(!1),N(!1))};return document.addEventListener("mousedown",R),document.addEventListener("keydown",ie),()=>{document.removeEventListener("mousedown",R),document.removeEventListener("keydown",ie)}},[Z,I]),no(()=>{c&&L.current&&(L.current.focus(),L.current.select())},[c]);let h=Ji(()=>{if(!g||g.startsWith("#")||g.startsWith("rgb")||g.startsWith("hsl")||g.startsWith("oklch"))return[];let R=g.toLowerCase();return n.filter(ie=>ie.name.toLowerCase().includes(R)||ie.usage.toLowerCase().includes(R)).slice(0,8)},[g,n]),A=()=>{r(g),u(!1),N(!1)},k=R=>{v(R),R.includes("var")||R.includes("--")||R.length>0&&!R.startsWith("#")?N(!0):N(!1)},be=R=>{v(R.value),r(R.value),_(!1),N(!1),u(!1)},K=()=>{setTimeout(()=>{!Z&&!I&&A()},150)},de=R=>{R.key==="Enter"?A():R.key==="Escape"&&(v(e),u(!1),N(!1))},F=Ji(()=>{let R=t.trim().toLowerCase();if(R.startsWith("#"))return R.length===4?`#${R[1]}${R[1]}${R[2]}${R[2]}${R[3]}${R[3]}`:R.slice(0,7);let ie=R.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(ie){let Pe=parseInt(ie[1],10).toString(16).padStart(2,"0"),_e=parseInt(ie[2],10).toString(16).padStart(2,"0"),Ze=parseInt(ie[3],10).toString(16).padStart(2,"0");return`#${Pe}${_e}${Ze}`}let Se=R.match(/oklch\(\s*([\d.]+)/);if(Se){let Pe=Math.max(0,Math.min(1,parseFloat(Se[1]))),_e=Math.round(Pe*255).toString(16).padStart(2,"0");return`#${_e}${_e}${_e}`}return"#000000"},[t]);return Yt("div",{ref:re,onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:c?s:H?"rgba(0,0,0,0.15)":"transparent",backgroundColor:to,transition:"border-color 100ms ease",overflow:"hidden"},children:[Yt("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[Yt("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[Ee("input",{type:"color",value:F,onChange:R=>{let ie=R.target.value;v(ie),r(ie)},style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),Ee("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),c?Ee("input",{ref:L,type:"text",value:g,onChange:R=>k(R.target.value),onKeyDown:de,onBlur:K,style:y(f({},wn),{flex:1,minWidth:0})}):Ee("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:i?s:"inherit"},title:p,children:p}),n.length>0&&Ee("button",{type:"button",onClick:()=>_(!Z),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:Ee(Xs,{size:12})})]}),I&&h.length>0&&Ee("div",{style:y(f({},B()),{backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,maxHeight:200,overflowY:"auto",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'}),children:h.map(R=>Yt("button",{type:"button",onClick:()=>be(R),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:[Ee("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:R.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),Ee("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:R.name})]},R.name))}),Z&&Ee("div",{ref:Y,style:y(f({},B()),{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(R=>Yt("button",{type:"button",onClick:()=>be(R),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:(o==null?void 0:o.usage)===R.usage||e===R.value?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:(o==null?void 0:o.usage)===R.usage||e===R.value?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[Ee("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:R.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),Ee("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:R.name}),((o==null?void 0:o.usage)===R.usage||e===R.value)&&Ee(Yi,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},R.name))})]})}function pc({element:e,elementInfo:t,selector:n,styleModifications:o,dispatch:r,onClose:s,onHover:i,accentColor:l="#3b82f6",toolbarRef:a}){let d=jn(null),c=jn(null),[u,p]=Cn(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch(Q){return!1}});no(()=>{if(u)return;let Q=setTimeout(()=>p(!0),50);return()=>clearTimeout(Q)},[u]);let[g,v]=Cn(null),[x,w]=Cn(null),I=g!==null||x!==null,[N,H]=Cn("rem"),O=Eo(()=>{H(Q=>Q==="rem"?"px":"rem")},[]),L=jn(new Map),[Y,re]=Cn(""),Z=Ji(()=>Rs(),[]);no(()=>{let Q=ne=>{var $e;if(ne.key!=="Escape")return;let Te=document.activeElement;Te&&(($e=d.current)!=null&&$e.contains(Te))||s()};return window.addEventListener("keydown",Q),()=>window.removeEventListener("keydown",Q)},[s]);let _=jn({top:0,left:0,maxHeight:400}),[,B]=Cn(0),h="devtools-panel-position",A=jn({x:0,y:0}),k=jn(null),be=jn(!1);no(()=>{try{let Q=localStorage.getItem(h);if(Q){let ne=JSON.parse(Q);typeof ne.top=="number"&&typeof ne.left=="number"&&(be.current=!0,_.current=y(f({},_.current),{top:ne.top,left:ne.left}))}}catch(Q){}},[]),no(()=>{let Q=Te=>{var Me;let $e=k.current;if(!$e)return;let pt=$e.startOffsetX+(Te.clientX-$e.startX),Je=$e.startOffsetY+(Te.clientY-$e.startY),ye=280,ct=16,Ge=Math.max(ct,Math.min(window.innerWidth-ye-ct,_.current.left+pt)),_t=Math.max(ct,_.current.top+Je);A.current={x:Ge-_.current.left,y:_t-_.current.top};let dt=d.current,pe=dt==null?void 0:dt.parentElement;if(!pe)return;pe.style.top=`${_t}px`,pe.style.left=`${Ge}px`;let se=(Me=a==null?void 0:a.current)==null?void 0:Me.getBoundingClientRect(),Ce=window.innerHeight-16;se&&Ge+ye>se.left&&(Ce=se.top-8);let Re=Math.max(0,_t),it=Math.max(200,Ce-Re);dt&&(dt.style.maxHeight=`${it}px`)},ne=()=>{if(!k.current)return;let Te=_.current.top+A.current.y,$e=_.current.left+A.current.x;_.current=y(f({},_.current),{top:Te,left:$e}),A.current={x:0,y:0},be.current=!0;try{localStorage.setItem(h,JSON.stringify({top:Te,left:$e}))}catch(pt){}k.current=null};return window.addEventListener("mousemove",Q),window.addEventListener("mouseup",ne),()=>{window.removeEventListener("mousemove",Q),window.removeEventListener("mouseup",ne)}},[]);let K=Eo(Q=>{Q.button!==0||Q.target.closest("button")||(Q.preventDefault(),k.current={startX:Q.clientX,startY:Q.clientY,startOffsetX:A.current.x,startOffsetY:A.current.y})},[]);no(()=>{A.current={x:0,y:0};let Q=($e=!1)=>{var Ce;let pt=d.current,Je=280,ye=8,ct,Ge;if(be.current)ct=_.current.top,Ge=_.current.left;else{let Re=e.getBoundingClientRect();Ge=Re.right+ye,ct=Re.top,Ge+Je>window.innerWidth-ye&&(Ge=Re.left-Je-ye),Ge<ye&&(Ge=Math.max(ye,(window.innerWidth-Je)/2))}let _t=(Ce=a==null?void 0:a.current)==null?void 0:Ce.getBoundingClientRect(),dt=window.innerHeight-16;_t&&Ge+Je>_t.left&&(dt=_t.top-ye);let pe=Math.max(0,ct),se=Math.max(200,dt-pe);if(_.current={top:ct,left:Ge,maxHeight:se},$e&&pt){let Re=pt.parentElement;Re&&!be.current&&(Re.style.top=`${ct+A.current.y}px`,Re.style.left=`${Ge+A.current.x}px`),pt.style.maxHeight=`${se}px`}else B(Re=>Re+1)};Q(!1);let ne=()=>Q(!0),Te=()=>Q(!1);return window.addEventListener("scroll",ne,{passive:!0}),window.addEventListener("resize",Te,{passive:!0}),()=>{window.removeEventListener("scroll",ne),window.removeEventListener("resize",Te)}},[e]),no(()=>{let Q=d.current;if(!Q)return;let ne=Te=>{let $e=c.current;if(!$e){Te.preventDefault();return}let{scrollTop:pt,scrollHeight:Je,clientHeight:ye}=$e,ct=pt<=0&&Te.deltaY<0,Ge=pt+ye>=Je&&Te.deltaY>0;(ct||Ge)&&Te.preventDefault()};return Q.addEventListener("wheel",ne,{passive:!1}),()=>Q.removeEventListener("wheel",ne)},[]);let de=Ji(()=>o.find(Q=>Q.selector===n),[o,n]),F=Eo(Q=>{let ne=de==null?void 0:de.changes.find(Te=>Te.property===Q);return ne?ne.modified:Li(e,Q)},[e,de]),me=Eo((Q,ne)=>{if(!Q.includes("color"))return ne;let Te=ne.trim(),$e=Z.find(Je=>Je.usage===Te||Je.name===Te),pt=($e==null?void 0:$e.value)||Te;return Fr(e,pt)},[Z,e]),R=Eo(Q=>{if(L.current.has(Q))return L.current.get(Q);let ne=de==null?void 0:de.changes.find($e=>$e.property===Q);if(ne)return ne.original;let Te=Li(e,Q);return L.current.set(Q,Te),Te},[e,de]),ie=Eo((Q,ne)=>{let Te=R(Q),$e=me(Q,ne);Xe(e,Q,$e),Q==="backdrop-filter"&&Xe(e,"-webkit-backdrop-filter",$e),r({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:Q,original:Te,modified:$e}})},[e,n,t,r,me,R]),Se=Eo(Q=>{let ne=o.find($e=>$e.selector===n);ne!=null&&ne.changes.find($e=>$e.property===Q)&&e instanceof HTMLElement&&(e.style.removeProperty(Q),r({type:"CLEAR_STYLE",payload:{selector:n,property:Q}}),L.current.delete(Q))},[e,n,o,r]),Pe=Eo(()=>{let Q=Y.split(";").map(ne=>ne.trim()).filter(ne=>ne);for(let ne of Q){let Te=ne.indexOf(":");if(Te>0){let $e=ne.slice(0,Te).trim(),pt=ne.slice(Te+1).trim();$e&&pt&&ie($e,pt)}}re("")},[Y,ie]),_e=Eo(Q=>{var ne;return(ne=de==null?void 0:de.changes.some(Te=>Te.property===Q))!=null?ne:!1},[de]),Ze=Q=>{var Je;let ne=F(Q.property),Te=_e(Q.property),$e=!Te&&zp(Q.property,ne),pt={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($e&&Q.type!=="backdrop-filter")return Ee(zo,{modified:!1,children:Ee("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:ye=>ie(Q.property,ye.target.value),style:y(f({},pt),{color:"#999"})})});switch(Q.type){case"color":{let ye=Fr(e,ne),ct=ne.includes("var(")?null:ni(ye,Z);return Ee(Ks,{value:ne,resolvedValue:ye,colorVariables:Z,matchingVariable:ct,onChange:Ge=>ie(Q.property,Ge),accentColor:l,modified:Te,panelContentRef:c,isDropdownOpen:x===Q.property,onDropdownChange:Ge=>w(Ge?Q.property:null)})}case"number":{if(!!Fi[Q.property])return Ee(zo,{modified:Te,children:Ee(mo,{property:Q.property,value:ne,onChange:Ge=>ie(Q.property,Ge),isModified:Te,min:Q.min,max:Q.max,step:Q.step||1,style:y(f({},pt),{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:N,onUnitCycle:O})});let{num:ct}=Xo(ne);return Ee(zo,{modified:Te,children:Ee("input",{type:"number",value:ct,min:Q.min,max:Q.max,step:Q.step||1,onChange:Ge=>ie(Q.property,Ge.target.value),style:pt})})}case"select":return Ee(zo,{modified:Te,children:Yt("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[Ee("select",{value:ne,onChange:ye=>ie(Q.property,ye.target.value),style:y(f({},pt),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(Je=Q.options)==null?void 0:Je.map(ye=>Ee("option",{value:ye,children:ye},ye))}),Ee("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:Ee(Xs,{size:12})})]})});case"spacing":return Ee(zo,{modified:Te,children:Ee("input",{type:"text",value:ne,onChange:ye=>ie(Q.property,ye.target.value),placeholder:"e.g., 10px or 10px 20px",style:pt})});case"backdrop-filter":return Ee(tc,{value:ne,onChange:ye=>ie(Q.property,ye),accentColor:l,modified:Te,panelContentRef:c});default:return Ee(zo,{modified:Te,children:Ee("input",{type:"text",value:ne,onChange:ye=>ie(Q.property,ye.target.value),style:pt})})}},Oe=t.reactComponent||t.tagName,he={position:"fixed",top:_.current.top,left:_.current.left,width:280,maxHeight:_.current.maxHeight,backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",zIndex:10002,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,overflow:"visible",display:"flex",flexDirection:"column",opacity:u?1:0,transition:"opacity 150ms ease"},Fe={display:"flex",alignItems:"center",justifyContent:"space-between",margin:4,padding:"4px 5px 4px 10px",backgroundColor:l,color:"#ffffff",cursor:k.current?"grabbing":"grab",userSelect:"none",WebkitUserSelect:"none"},rt={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"},ht={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},Jt={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return Ee("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:_.current.top+A.current.y,left:_.current.left+A.current.x,zIndex:10002,pointerEvents:"none"},children:Yt("div",{ref:d,"data-devtools":"panel",style:y(f({},he),{position:"relative",top:0,left:0,zIndex:0,pointerEvents:"auto"}),onMouseEnter:()=>i==null?void 0:i("element"),onMouseLeave:()=>i==null?void 0:i(null),children:[Ee("div",{"aria-hidden":"true",style:zi()}),Yt("div",{style:Fe,onMouseDown:K,children:[Ee("div",{style:{display:"flex",alignItems:"center",gap:3,overflow:"hidden",minWidth:0},children:Ee("span",{style:{fontWeight:600,fontSize:12,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Oe})}),Ee("button",{type:"button",onClick:s,title:"Close",style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1,flexShrink:0},children:"\xD7"})]}),Yt("div",{ref:c,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[Ee("div",{style:{opacity:x?.3:1,transition:"opacity 150ms ease"},children:Ee(ic,{element:e,getValue:F,getOriginalValue:R,handleChange:ie,isModified:_e,onResetProperty:Se,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:rt,activeDropdown:g,onDropdownChange:v,panelContentRef:c,accentColor:l,onFieldHover:i,preferredUnit:N,onUnitCycle:O})}),Ee("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:Ee(cc,{element:e,getValue:F,handleChange:ie,isModified:_e,onResetProperty:Se,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:rt,accentColor:l,colorVariables:Z,activeColorDropdown:x,onColorDropdownChange:w,panelContentRef:c,preferredUnit:N,onUnitCycle:O})}),uc.map((Q,ne)=>{let Te=ne===uc.length-1,$e=x&&Q.properties.some(Je=>Je.property===x);return Yt("div",{style:{borderBottom:Te?"none":"1px solid rgba(0,0,0,0.08)",opacity:I&&!$e?.3:1,transition:"opacity 150ms ease"},children:[Ee("div",{style:rt,children:Ee("span",{children:Q.name})}),Ee("div",{style:{padding:"4px 0"},children:Q.properties.map(Je=>{let ye=_e(Je.property),ct=$e&&Je.property!==x;return Yt("div",{style:y(f({},ht),{opacity:ct?.3:1,transition:"opacity 150ms ease"}),children:[Ee("span",{onClick:ye?()=>Se(Je.property):void 0,title:ye?"Click to reset":void 0,style:y(f({},Jt),{color:ye?l:"#64748b",fontWeight:ye?600:400,cursor:ye?"pointer":"default"}),children:Je.label}),Ee("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:Ze(Je)})]},Je.property)})})]},Q.name)}),Yt("div",{style:{opacity:I?.3:1,transition:"opacity 150ms ease"},children:[Ee("div",{style:rt,children:Ee("span",{children:"Raw CSS"})}),Yt("div",{style:{padding:"8px 12px"},children:[Ee("textarea",{value:Y,onChange:Q=>re(Q.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"}}),Y.trim()&&Ee("button",{type:"button",onClick:Pe,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:l,color:"#fff",cursor:"pointer",opacity:Y.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as $p,useLayoutEffect as Wp,useState as jp}from"react";import{Fragment as Vp,jsx as hr,jsxs as Jp}from"react/jsx-runtime";var qs=["flex-start","center","flex-end"],Zs=["flex-start","center","flex-end"];function Gp(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function Yp(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 fc(e){let t=Array.from(e.children);if(t.length===0)return null;let n=1/0,o=1/0,r=-1/0,s=-1/0;for(let i of t){let l=i.getBoundingClientRect();l.width===0&&l.height===0||(l.top<n&&(n=l.top),l.left<o&&(o=l.left),l.bottom>r&&(r=l.bottom),l.right>s&&(s=l.right))}return n===1/0?null:new DOMRect(o,n,s-o,r-n)}function gc({element:e,modifier:t,accentColor:n,refreshKey:o=0}){let[r,s]=jp(null);if($p(()=>{if(!e){s(null);return}let x=()=>s(fc(e));return x(),window.addEventListener("scroll",x,{passive:!0}),window.addEventListener("resize",x,{passive:!0}),()=>{window.removeEventListener("scroll",x),window.removeEventListener("resize",x)}},[e]),Wp(()=>{e&&s(fc(e))},[e,o]),!r)return null;let i=r,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 x=Gp(l.justifyContent);if(x){let w=qs.indexOf(x);c==="horizontal"?(w>0&&p.push("left"),w<qs.length-1&&p.push("right")):(w>0&&p.push("up"),w<qs.length-1&&p.push("down"))}}else{let x=Yp(l.alignItems);if(x){let w=Zs.indexOf(x);u==="horizontal"?(w>0&&p.push("left"),w<Zs.length-1&&p.push("right")):(w>0&&p.push("up"),w<Zs.length-1&&p.push("down"))}}if(p.length===0)return null;let g=14,v=7;return hr(Vp,{children:p.map(x=>{let w,I;switch(x){case"right":w=i.right+g,I=i.top+i.height/2;break;case"left":w=i.left-g,I=i.top+i.height/2;break;case"down":w=i.left+i.width/2,I=i.bottom+g;break;case"up":w=i.left+i.width/2,I=i.top-g;break}let N=x==="right"?0:x==="left"?180:x==="down"?90:-90,H={position:"fixed",left:w-v,top:I-v,width:v*2,height:v*2,pointerEvents:"none",zIndex:9997};return hr("div",{"data-devtools":"swipe-hint",style:H,children:hr("svg",{width:v*2,height:v*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:Jp("g",{transform:`rotate(${N})`,children:[hr("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),hr("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),hr("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),hr("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},x)})})}import{useEffect as Up,useLayoutEffect as Kp,useState as Xp}from"react";import{jsx as Qs,jsxs as ea}from"react/jsx-runtime";function qp(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 mc({element:e,fontSize:t,lineHeight:n,accentColor:o,hoveredProperty:r,draggingProperty:s,cursorViewport:i}){let[l,a]=Xp(null);if(Up(()=>{if(!e){a(null);return}let I=()=>{a(zr(e))};return I(),window.addEventListener("scroll",I,{passive:!0}),window.addEventListener("resize",I,{passive:!0}),()=>{window.removeEventListener("scroll",I),window.removeEventListener("resize",I)}},[e]),Kp(()=>{e&&a(zr(e))},[e,t,n]),!l)return null;let d=l.width,c=l.height,u=qp(o,.2),p=s!=null?s:r,g=8,v=2,x={position:"fixed",top:l.top,left:l.left,width:d,height:c,pointerEvents:"none",zIndex:9996,overflow:"visible"},w=I=>I==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return ea("div",{"data-devtools":"text-handles",style:x,children:[ea("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${c}`,children:[Qs("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)&&Qs("rect",{x:d-v/2,y:c/2-g/2,width:v,height:g,fill:o,stroke:"#ffffff",strokeWidth:p==="font-size"?4:2,paintOrder:"stroke"}),(p==="line-height"||!p)&&Qs("rect",{x:d/2-g/2,y:c-v/2,width:g,height:v,fill:o,stroke:"#ffffff",strokeWidth:p==="line-height"?4:2,paintOrder:"stroke"})]}),i&&p&&(()=>{let I=p==="font-size"?"Aa":"Lh",N=w(p);return ea("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:o,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:[I," ",N]})})()]})}import{Fragment as Jr,jsx as ft,jsxs as Yr}from"react/jsx-runtime";var hc=8,ta=[0,1,2,4,8,12,16,20,24,28,32],na="devtools-active-text";function yc(e,t,n=0,o,r){let s=e.left+window.scrollX+4,i=t==="top-left"?e.top+window.scrollY-eo-n*eo+4:e.bottom+window.scrollY+4-1+n*eo,l=window.scrollY+4,a=window.scrollY+window.innerHeight-eo-4,d=90,c=!1;if(o&&r!==void 0){let u=o.getBoundingClientRect();if(e.left+4+r+4+d>u.left){let g=window.scrollY+u.top-eo-4;g<a&&(a=g,c=!0)}}return i<l?i=e.top+window.scrollY+4:i>a&&(i=c?a:Math.max(e.top+window.scrollY+4,a)),{x:s,y:i}}function bc({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:o,activeAnnotationIds:r,queuePositionMap:s,inFlightStyleSelectors:i,inFlightSelectorColors:l,onAttachImages:a,onReply:d,onViewThread:c,onCloseThread:u,onModelComponentsAdd:p,onModelComponentFocus:g,onModelComponentHover:v,modelComponentNames:x,modelPanelHoveredComponent:w,modelSpacingTokenHover:I,highlightedAnnotationIds:N,focusedThreadAnnotationId:H,externalCanvasRef:O,toolbarRef:L}){var et,Ue,Rt,Ct,gt,zt,xt,ln,lo;let{canvasRef:Y,redrawAll:re,resizeCanvas:Z}=bl(),_=un(m=>{Y.current=m,O&&(O.current=m)},[O,Y]),B=Qt(!1);kn(()=>{let m=Y.current;if(!m)return;let b=()=>{B.current&&(B.current=!1,m.style.pointerEvents="")},G=M=>{M.button===0&&B.current&&b()};return window.addEventListener("mousedown",G),()=>window.removeEventListener("mousedown",G)},[Y]);let[h,A]=bt(!1),[k,be]=bt(()=>{if(typeof window=="undefined")return null;try{let m=localStorage.getItem(na);return m?JSON.parse(m):null}catch(m){return null}}),[K,de]=bt(null),[F,me]=bt(null),[R,ie]=bt(null),Se=Qt(null),Pe=Qt(null),_e=Qt({x:0,y:0}),Ze=Qt([]),Oe=Qt(0),[he,Fe]=bt(null),[rt,ht]=bt(new Map),Jt=Qt(0),Q=Qt(null),[ne,Te]=bt(null),[$e,pt]=bt(null),[Je,ye]=bt(null),[ct,Ge]=bt(null),_t=Qt({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}),[dt,pe]=bt(null),[se,Ce]=bt(null),[Re,it]=bt(null),[Me,Wt]=bt(null),en=Qt({x:0,y:0}),[pn,zn]=bt({x:0,y:0}),jt=Qt({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}),[Ot,hn]=bt(null),[vt,Vt]=bt(null),[Qe,xo]=bt(null),[Ke,Tt]=bt(!1),[Gn,So]=bt(0),[Fn,rn]=bt(null),Tn=Qt({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}),[W,fe]=bt(null),[Le,Gt]=bt(null),[St,yn]=bt(null),bn=Qt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[Ut,Pn]=bt(null),[vn,Io]=bt(null),[yt,Ro]=bt(null),io=vl(),jo=Qt(l);jo.current=l;let qn=un(m=>{let b=jo.current;if(!b||b.size===0)return!1;for(let G of b.keys())try{if(m.matches(G))return!0}catch(M){}return!1},[]),Mn=Qt(e);Mn.current=e;let Lo=Qt(k);Lo.current=k;let Zn=Qt([]),Kt=Qt(n);Kt.current=n;let[Bt,Xt]=bt(null),sn=e.selectedAnnotationIds;Zn.current=sn;let $n=un((m,b=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:m,addToSelection:b}})},[t]),wo=un(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[In,Ao]=bt(null),[an,Go]=bt({x:window.scrollX,y:window.scrollY});kn(()=>(Z(),window.addEventListener("resize",Z),()=>window.removeEventListener("resize",Z)),[Z]),kn(()=>{let m=()=>{Go({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",m,{passive:!0}),()=>window.removeEventListener("scroll",m)},[]),kn(()=>{k?localStorage.setItem(na,JSON.stringify(k)):localStorage.removeItem(na)},[k]),xl(k,be,K,e.annotations,t);let Po=Qt(he);Po.current=he,kn(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let m=b=>{if(!b.altKey||!Po.current)return;b.preventDefault();let G=b.deltaY>0?-1:1;Jt.current=Math.max(0,Jt.current+G);let M=Q.current;if(M){let C=Ii(M,Jt.current);Fe(C)}};return window.addEventListener("wheel",m,{passive:!1}),()=>window.removeEventListener("wheel",m)},[e.activeTool,e.isAnnotating]),kn(()=>{e.activeTool!=="model"&&(Fe(null),ht(new Map),Jt.current=0,Q.current=null)},[e.activeTool]),kn(()=>{var G;let m=(G=he==null?void 0:he.name)!=null?G:null,b=m&&(x!=null&&x.has(m))?m:null;v==null||v(b)},[he,x,v]);let[so,Er]=bt(null);kn(()=>{var G;if(!w){Er(null);return}let m=_r(w.name),b=w.instanceIndex;Er((G=m[b%m.length])!=null?G:null)},[w]);let[ao,Qo]=bt([]);kn(()=>{var m,b;if(!I){Qo([]);return}(b=(m=I.token)==null?void 0:m.bindings)!=null&&b.length?Qo(ks(I.token)):Qo(Cs(I.px))},[I]);let Yo=Qt(null),On=Qt(null);Yo.current=Ot,On.current=vt,kn(()=>{let m=["flex-start","center","flex-end"],b=["flex-start","center","flex-end"],M=null,C=!1,$=null,oe=null,j=(xe,ze)=>{let at=dr(xe,ze);for(;at&&at!==document.documentElement;){let wt=window.getComputedStyle(at).display;if(wt==="flex"||wt==="inline-flex")return at;at=at.parentElement}return null},te=xe=>{let ze=window.getComputedStyle(xe).flexDirection;return ze==="column"||ze==="column-reverse"?"vertical":"horizontal"},E=xe=>{let ze=xe.getAttribute("data-pm");return ze||(ze=Math.random().toString(36).substring(2,8),xe.setAttribute("data-pm",ze)),{selector:`[data-pm="${ze}"]`,durableSelector:Jn(xe)}},T=()=>{C=!0,M&&clearTimeout(M),M=setTimeout(()=>{C=!1,M=null},300)},X=(xe,ze,ut)=>{let at=te(xe);if(ze===at){let qe=window.getComputedStyle(xe).justifyContent,Ht=qe==="normal"||qe==="flex-start"||qe==="start"?"flex-start":qe==="flex-end"||qe==="end"?"flex-end":qe==="center"?"center":null;if(!Ht)return;let fn=m.indexOf(Ht)+ut;if(fn<0||fn>=m.length)return;let Do=m[fn],{selector:tr,durableSelector:as}=E(xe);Xe(xe,"justify-content",Do),t({type:"MODIFY_STYLES_BATCH",payload:{selector:tr,durableSelector:as,element:Nn(xe),changes:[{property:"justify-content",original:qe,modified:Do}]}})}else{let qe=window.getComputedStyle(xe).flexDirection,Ht=at==="horizontal"?"column":"row",{selector:co,durableSelector:fn}=E(xe);Xe(xe,"flex-direction",Ht),t({type:"MODIFY_STYLES_BATCH",payload:{selector:co,durableSelector:fn,element:Nn(xe),changes:[{property:"flex-direction",original:qe,modified:Ht}]}})}So(wt=>wt+1)},z=(xe,ze,ut)=>{let wt=te(xe)==="horizontal"?"vertical":"horizontal";if(ze!==wt)return;let Ht=window.getComputedStyle(xe).alignItems,co=Ht==="normal"||Ht==="stretch"||Ht==="flex-start"||Ht==="start"?"flex-start":Ht==="flex-end"||Ht==="end"?"flex-end":Ht==="center"?"center":null;if(!co)return;let Do=b.indexOf(co)+ut;if(Do<0||Do>=b.length)return;let tr=b[Do],{selector:as,durableSelector:fd}=E(xe);Xe(xe,"align-items",tr),t({type:"MODIFY_STYLES_BATCH",payload:{selector:as,durableSelector:fd,element:Nn(xe),changes:[{property:"align-items",original:Ht,modified:tr}]}}),So(gd=>gd+1)},J=20,U=null,q=null,we=0,We=(xe,ze,ut)=>{let at=j(ze,ut);rn(at?{modifier:xe,target:at}:null)},tt=xe=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(xe.key==="Shift"&&!xe.altKey){let ze=en.current;We("shift",ze.x,ze.y)}else if(xe.key==="Alt"&&!xe.shiftKey){let ze=en.current;We("alt",ze.x,ze.y)}}},ot=xe=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let ze=xe.shiftKey&&!xe.altKey,ut=xe.altKey&&!xe.shiftKey;if(!ze&&!ut||xe.buttons!==0){U=null,q=null,we=0,$=null,oe=null,rn(null);return}if($===null&&($=xe.clientX,oe=xe.clientY,We(ze?"shift":"alt",xe.clientX,xe.clientY)),C)return;U===null&&(U=xe.clientX,q=xe.clientY,we=0);let at=xe.clientX-U,wt=xe.clientY-q,qe=Math.abs(at)>=Math.abs(wt)?at:wt;if(Math.abs(qe)>3){let tr=qe>0?1:-1;if(we!==0&&tr!==we){U=xe.clientX,q=xe.clientY,we=0;return}we=tr}if(Math.abs(at)<J&&Math.abs(wt)<J)return;let Ht=j($,oe);if(!Ht)return;let co=Math.abs(at)>=Math.abs(wt)?"horizontal":"vertical",Do=(co==="horizontal"?at:wt)>0?1:-1;U=null,q=null,we=0,ze?X(Ht,co,Do):z(Ht,co,Do),T()},Ft=xe=>{(xe.key==="Shift"||xe.key==="Alt")&&($=null,oe=null,U=null,q=null,we=0,rn(null))},st=()=>{rn(null),U=null,q=null,we=0};return window.addEventListener("keydown",tt),window.addEventListener("mousemove",ot),window.addEventListener("mousedown",st),window.addEventListener("keyup",Ft),()=>{window.removeEventListener("keydown",tt),window.removeEventListener("mousemove",ot),window.removeEventListener("mousedown",st),window.removeEventListener("keyup",Ft),M&&clearTimeout(M)}},[e.activeTool,e.isAnnotating,t]),kn(()=>{let m=b=>{var $,oe,j,te;if(b.key==="Escape"){if(Lo.current)return;if(e.activeTool==="model"&&rt.size>0){b.preventDefault(),ht(new Map);return}if(Zn.current.length>0){b.preventDefault(),wo();return}}if(b.key==="Enter"&&e.activeTool==="model"&&rt.size>0&&p){b.preventDefault();let E=[...rt.keys()].filter(T=>!(x!=null&&x.has(T)));E.length>0&&p(E),ht(new Map);return}if((b.metaKey||b.ctrlKey)&&b.key==="v"&&Ze.current.length>0&&!Lo.current){b.preventDefault(),Oe.current++;let E=Oe.current*20,X=(($=Ze.current[0])==null?void 0:$.groupId)?Math.random().toString(36).substring(2,9):void 0,z=Ze.current.map(U=>y(f({},U),{id:Math.random().toString(36).substring(2,9),groupId:U.groupId?X:void 0,timestamp:Date.now(),points:U.points.map(q=>({x:q.x+E,y:q.y+E}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:z}});let J=z.find(U=>U.type!=="text")||z[0];J&&$n(J.id);return}let G=Zn.current;if(G.length===0||Lo.current)return;let M=(j=(oe=b.composedPath)==null?void 0:oe.call(b)[0])!=null?j:b.target,C=M==null?void 0:M.tagName;if(!(C==="INPUT"||C==="TEXTAREA"||M!=null&&M.isContentEditable)&&(b.key==="Delete"||b.key==="Backspace")){if(b.preventDefault(),u){let E=Mn.current.annotations;for(let T of G){let X=E.find(J=>J.id===T);if(!X)continue;let z=X.threadId||X.groupId&&((te=E.find(J=>J.groupId===X.groupId&&J.threadId))==null?void 0:te.threadId);z&&u(z)}}for(let E of G)t({type:"DELETE_ANNOTATION",payload:{id:E}});wo()}};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[t,wo,$n,e.activeTool,rt,x,p,u]);let D=Ar(),V=Vi(()=>e.annotations.filter(m=>!m.pathname||m.pathname===D),[e.annotations,D]),ee=Vi(()=>Ni(e.annotations),[e.annotations]),ge=Vi(()=>{let m=new Map,b=new Set,G=1,M=[...e.annotations].sort((C,$)=>C.timestamp-$.timestamp);for(let C of M)if(!ee.has(C))if(C.groupId){if(!b.has(C.groupId)){b.add(C.groupId);let $=e.annotations.filter(oe=>oe.groupId===C.groupId);for(let oe of $)m.set(oe.id,G);G++}}else m.set(C.id,G),G++;return m},[e.annotations,ee]),ae=Vi(()=>{if(sn.length===0)return null;let m=new Map;for(let b of sn){let G=e.annotations.find(C=>C.id===b);if(!G)continue;let M=G.groupId?e.annotations.filter(C=>C.groupId===G.groupId):[G];for(let C of M)if(C.linkedSelector&&!(l!=null&&l.has(C.linkedSelector))){let $=C.color||e.activeColor;m.set(C.linkedSelector,$)}}return m.size>0?m:null},[sn,e.annotations,e.activeColor,l]);kn(()=>{let m=V.filter(b=>!(ee.has(b)||k&&!k.isNew&&b.id===k.id));re(m,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,sn,hc,an.x,an.y,ge,N)},[V,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,re,k,sn,an,ge,ee,N]),kn(()=>{if(F){let m=Math.random().toString(36).substring(2,9);be({id:m,point:F.point,text:"",fontSize:12,isNew:!0,groupId:F.groupId}),me(null)}},[F]),kn(()=>{R&&(be({id:Math.random().toString(36).substring(2,9),point:R.point,text:"",fontSize:12,isNew:!0,linkedSelector:R.linkedSelector,linkedAnchor:R.linkedAnchor,elements:R.elements}),ie(null))},[R]);let Ie=Qt(null),ke=(et=k==null?void 0:k.id)!=null?et:null;kn(()=>{ke&&Se.current?requestAnimationFrame(()=>{var G;let m=Se.current;if(!m||(m.focus(),Pe.current===ke))return;Pe.current=ke;let b=Lo.current;if(b){if(Ie.current!==null){let M=Math.min(Ie.current,m.value.length);m.setSelectionRange(M,M);return}if(!b.isNew&&b.clickPoint){let M=Y.current;if(!M)return;let C=M.getContext("2d");if(!C)return;C.font=`${b.fontSize}px ${Zt}`;let $=b.fontSize*1.4,oe=b.text.split(`
|
|
4
|
-
`),j=b.clickPoint.y-b.point.y,te=Math.max(0,Math.min(oe.length-1,Math.floor(j/$))),E=b.clickPoint.x-b.point.x,T=oe[te]||"",X=0;for(let J=0;J<=T.length;J++){let U=C.measureText(T.substring(0,J)).width;if(U>E){let q=J>0?C.measureText(T.substring(0,J-1)).width:0;X=E-q<U-E?J-1:J;break}X=J}let z=X;for(let J=0;J<te;J++)z+=(((G=oe[J])==null?void 0:G.length)||0)+1;m.setSelectionRange(z,z)}}}):(Pe.current=null,Ie.current=null)},[ke,Y]);let He=un(m=>{let b=Y.current;if(!b)return{x:0,y:0};let G=b.getBoundingClientRect(),M,C;if("touches"in m&&m.touches[0])M=m.touches[0].clientX,C=m.touches[0].clientY;else if("clientX"in m)M=m.clientX,C=m.clientY;else return{x:0,y:0};return{x:M-G.left+window.scrollX,y:C-G.top+window.scrollY}},[Y]),Ne=un((m,b,G,M)=>{let C=G.x-b.x,$=G.y-b.y,oe=C*C+$*$;if(oe===0)return Math.sqrt((m.x-b.x)**2+(m.y-b.y)**2)<=M;let j=Math.max(0,Math.min(1,((m.x-b.x)*C+(m.y-b.y)*$)/oe)),te=b.x+j*C,E=b.y+j*$;return Math.sqrt((m.x-te)**2+(m.y-E)**2)<=M},[]),Mt=un(m=>{for(let G=V.length-1;G>=0;G--){let M=V[G];if(!M||ee.has(M))continue;let C=(M.strokeWidth||3)+4;switch(M.type){case"text":{if(!M.points[0]||!M.text)continue;let $=M.points[0],oe=M.fontSize||12,j=Y.current;if(j){let te=j.getContext("2d");if(te){te.font=`${oe}px ${Zt}`;let E=M.text.replace(/\n/g," "),T=$.x-an.x,X=Or(T),z=Br(te,E,X),J=te.measureText(z).width,U=oe*1.4;if(m.x>=$.x-4-4&&m.x<=$.x+J+4+4&&m.y>=$.y-4-4&&m.y<=$.y+U+4+4)return M}}break}case"rectangle":{if(M.points.length<2)continue;let $=M.points[0],oe=M.points[M.points.length-1],j=Math.min($.x,oe.x),te=Math.max($.x,oe.x),E=Math.min($.y,oe.y),T=Math.max($.y,oe.y),X=Ne(m,{x:j,y:E},{x:te,y:E},C),z=Ne(m,{x:j,y:T},{x:te,y:T},C),J=Ne(m,{x:j,y:E},{x:j,y:T},C),U=Ne(m,{x:te,y:E},{x:te,y:T},C);if(X||z||J||U)return M;break}case"circle":{if(M.points.length<2)continue;let $=M.points[0],oe=M.points[M.points.length-1],j=($.x+oe.x)/2,te=($.y+oe.y)/2,E=Math.abs(oe.x-$.x)/2,T=Math.abs(oe.y-$.y)/2,X=m.x-j,z=m.y-te,J=Math.sqrt((X/E)**2+(z/T)**2);if(Math.abs(J-1)*Math.max(E,T)<=C)return M;break}case"line":{if(M.points.length<2)continue;let $=M.points[0],oe=M.points[M.points.length-1];if(Ne(m,$,oe,C))return M;break}case"freehand":{if(M.points.length<2)continue;for(let $=0;$<M.points.length-1;$++){let oe=M.points[$],j=M.points[$+1];if(Ne(m,oe,j,C))return M}break}}}return null},[V,Y,Ne,ee,an.x]),qt=un(m=>{let b=Mt(m);return(b==null?void 0:b.type)==="text"?b:null},[Mt]),xn=un(m=>{if(sn.length===0)return null;let b=hc/2+4;for(let G of sn){let M=e.annotations.find(C=>C.id===G);if(!(!M||M.points.length<2)){if(M.type==="line"){let C=M.points[0],$=M.points[M.points.length-1];if(Math.sqrt((m.x-C.x)**2+(m.y-C.y)**2)<=b)return{handle:"start",annotationId:G};if(Math.sqrt((m.x-$.x)**2+(m.y-$.y)**2)<=b)return{handle:"end",annotationId:G};continue}if(M.type==="circle"){let C=M.points[0],$=M.points[M.points.length-1],oe=Math.min(C.x,$.x),j=Math.max(C.x,$.x),te=Math.min(C.y,$.y),E=Math.max(C.y,$.y),T=(oe+j)/2,X=(te+E)/2,z=[{handle:"top",x:T,y:te},{handle:"bottom",x:T,y:E},{handle:"left",x:oe,y:X},{handle:"right",x:j,y:X}];for(let{handle:J,x:U,y:q}of z)if(Math.sqrt((m.x-U)**2+(m.y-q)**2)<=b)return{handle:J,annotationId:G};continue}if(M.type==="rectangle"||M.type==="freehand"){let C=M.points[0],$=M.points[M.points.length-1],oe,j,te,E;M.type==="freehand"?(oe=Math.min(...M.points.map(X=>X.x)),j=Math.max(...M.points.map(X=>X.x)),te=Math.min(...M.points.map(X=>X.y)),E=Math.max(...M.points.map(X=>X.y))):(oe=Math.min(C.x,$.x),j=Math.max(C.x,$.x),te=Math.min(C.y,$.y),E=Math.max(C.y,$.y));let T=[{corner:"topLeft",x:oe,y:te},{corner:"topRight",x:j,y:te},{corner:"bottomLeft",x:oe,y:E},{corner:"bottomRight",x:j,y:E}];for(let{corner:X,x:z,y:J}of T)if(Math.sqrt((m.x-z)**2+(m.y-J)**2)<=b)return{handle:X,annotationId:G}}}}return null},[sn,e.annotations]);kn(()=>{let m=b=>{if(_e.current={x:b.clientX+window.scrollX,y:b.clientY+window.scrollY},!k){let G=qt(_e.current);de((G==null?void 0:G.id)||null)}};return window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m)},[k,qt]);let It=un(()=>{var b;if(!k)return;let m=((b=k.images)==null?void 0:b.length)||0;if(k.text.trim()||m>0)if(k.isNew){let G=Ci();t({type:"ADD_TEXT",payload:f({point:k.point,text:k.text||(m>0?`[${m} image${m>1?"s":""}]`:""),fontSize:k.fontSize,id:G,groupId:k.groupId,linkedSelector:k.linkedSelector,linkedAnchor:k.linkedAnchor,elements:k.elements},m>0?{imageCount:m}:{})}),m>0&&k.images&&a&&a(G,k.images)}else t({type:"UPDATE_TEXT",payload:f({id:k.id,text:k.text||(m>0?`[${m} image${m>1?"s":""}]`:"")},m>0?{imageCount:m}:{})}),m>0&&k.images&&a&&a(k.id,k.images);else k.isNew||t({type:"DELETE_ANNOTATION",payload:{id:k.id}});be(null)},[k,t,a]),Ve=un(m=>{for(let b=0;b<ta.length-1;b++){let G=ta[b],M=ta[b+1];if(m<=(G+M)/2)return G;if(m<M)return M}return Math.round(m/8)*8},[]),Yn=un((m,b,G,M)=>{let C=G.top+Math.max(M.top,4),$=G.bottom-Math.max(M.bottom,4),oe=G.left+Math.max(M.left,4),j=G.right-Math.max(M.right,4);if(m<G.left||m>G.right||b<G.top||b>G.bottom)return null;let te=b<C,E=b>$,T=m<oe,X=m>j;return te&&T?M.top>=M.left?"top":"left":te&&X?M.top>=M.right?"top":"right":E&&T?M.bottom>=M.left?"bottom":"left":E&&X?M.bottom>=M.right?"bottom":"right":te?"top":E?"bottom":T?"left":X?"right":null},[]),Oo=un(m=>{var $,oe;if(!e.isAnnotating)return;if(e.inspectedElement&&e.activeTool==="hand"&&!("button"in m&&m.button===2)){m.preventDefault(),m.stopPropagation(),t({type:"SELECT_ELEMENT",payload:null});return}let b=He(m),G="shiftKey"in m&&m.shiftKey;if(e.activeTool==="inspector"){if("button"in m&&m.button===2)return;if(ne&&!qn(ne)){let j=e.annotations.find(tt=>{if(!tt.linkedSelector||!tt.threadId)return!1;try{return ne.matches(tt.linkedSelector)}catch(ot){return!1}});if(j!=null&&j.threadId&&c){c(j.threadId),requestAnimationFrame(()=>{var Ft;let tt=document.querySelector("[data-popmelt-shadow-host]"),ot=(Ft=tt==null?void 0:tt.shadowRoot)==null?void 0:Ft.querySelector("[data-popmelt-reply]");ot==null||ot.focus()});return}let te=Nn(ne),E=Jn(ne),T=ne.getBoundingClientRect(),X=ne.getAttribute("data-pm");X||(X=Math.random().toString(36).substring(2,8),ne.setAttribute("data-pm",X));let z=`[data-pm="${X}"]`,J=e.styleModifications.some(tt=>{try{return ne.matches(tt.selector)}catch(ot){return!1}}),U=e.annotations.filter(tt=>{if(!tt.linkedSelector)return!1;try{return ne.matches(tt.linkedSelector)}catch(ot){return!1}}).length,q=(J?1:0)+U,we=T.top>=eo*(1+q)?"top-left":"bottom-left",We=yc(T,we,q,L==null?void 0:L.current);ie({point:We,linkedSelector:z,linkedAnchor:we,elements:[y(f({},te),{selector:E})]})}return}if(e.activeTool==="model"){if("button"in m&&m.button===2)return;if(he){let j=he.name;if(x!=null&&x.has(j)){g==null||g(j);return}"shiftKey"in m&&m.shiftKey?ht(E=>{let T=new Map(E);return T.has(j)?T.delete(j):T.set(j,he),T}):rt.size===1&&rt.has(j)?(p&&p([j]),ht(new Map)):ht(new Map([[j,he]]))}return}if(e.activeTool==="hand"&&Ot&&vt){let j=Ot,te=j.getAttribute("data-pm");te||(te=Math.random().toString(36).substring(2,8),j.setAttribute("data-pm",te));let E=Jn(j),T=`[data-pm="${te}"]`,X=Nn(j),z=ur(j),J=b.x-window.scrollX,U=b.y-window.scrollY,q=Ke,we=window.getComputedStyle(j).justifyContent,We=0;if(q){let ot=Ho(j).find(Ft=>Ft.axis===vt);We=ot?vt==="column"?ot.w:ot.h:0}Xe(j,"transition","none"),jt.current={isDragging:!0,hasMoved:!1,axis:vt,startX:J,startY:U,originalRow:q?We:z.row,originalColumn:q?We:z.column,element:j,elementInfo:y(f({},X),{selector:T}),selector:T,durableSelector:E,isAuto:q,originalJustifyContent:we,visualGap:We},xo({axis:vt,row:q?We:z.row,column:q?We:z.column});return}if(e.activeTool==="hand"&&Ut&&vn){let j=Ut,te=j.getAttribute("data-pm");te||(te=Math.random().toString(36).substring(2,8),j.setAttribute("data-pm",te));let E=`[data-pm="${te}"]`,T=Nn(j),{fontSize:X,lineHeight:z}=ti(j),J=X>0?z/X:1.2,U=b.x-window.scrollX,q=b.y-window.scrollY;Xe(j,"transition","none");let we=Jn(j);bn.current={isDragging:!0,property:vn,startX:U,startY:q,originalFontSize:X,originalLineHeight:z,originalRatio:J,element:j,elementInfo:y(f({},T),{selector:E}),selector:E,durableSelector:we},Ro({property:vn,fontSize:X,lineHeight:z});return}if(e.activeTool==="hand"&&W&&Le){let j=W,te=j.getAttribute("data-pm");te||(te=Math.random().toString(36).substring(2,8),j.setAttribute("data-pm",te));let E=`[data-pm="${te}"]`,T=Jn(j),X=Nn(j),z=pr(j),J=j.getBoundingClientRect(),U=Math.floor(J.height/2),q=b.y-window.scrollY;Xe(j,"transition","none"),Tn.current={isDragging:!0,corner:Le,startY:q,original:z,maxRadius:U,element:j,elementInfo:y(f({},X),{selector:E}),selector:E,durableSelector:T},yn({corner:Le,radius:f({},z)});return}if(e.activeTool==="hand"&&dt&&se){let j=dt,te=j.getAttribute("data-pm");te||(te=Math.random().toString(36).substring(2,8),j.setAttribute("data-pm",te));let E=`[data-pm="${te}"]`,T=Jn(j),X=Nn(j),z=Nr(j),J=b.x-window.scrollX,U=b.y-window.scrollY;Xe(j,"transition","none"),_t.current={isDragging:!0,side:se,startX:J,startY:U,original:z,element:j,elementInfo:y(f({},X),{selector:E}),selector:E,durableSelector:T},Wt({side:se,padding:f({},z)});return}let M=xn(b);if(M){let j=e.annotations.find(te=>te.id===M.annotationId);if(j&&j.type!=="text"&&(($=j.status)!=null?$:"pending")==="pending"){Ao({annotationId:M.annotationId,handle:M.handle,startPoint:b,originalPoints:[...j.points],hasMoved:!1});return}}let C=Mt(b);if(C&&C.points[0]){if(k&&It(),C.type!=="text"?($n(C.id,G),C.color&&t({type:"SET_COLOR",payload:C.color})):G||wo(),c){let j=C.threadId||(C.groupId?(oe=e.annotations.find(te=>te.groupId===C.groupId&&te.threadId))==null?void 0:oe.threadId:void 0);j&&c(j)}Xt({annotation:C,startPoint:b,hasMoved:!1});return}if(G||wo(),e.activeTool==="text"){k&&It();let j=Math.random().toString(36).substring(2,9);be({id:j,point:b,text:"",fontSize:12,isNew:!0});return}A(!0),t({type:"START_PATH",payload:b})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,k,sn,ne,dt,se,W,Le,Ot,vt,Ke,Ut,vn,he,rt,x,p,g,c,He,Mt,xn,t,$n,wo,It]),Bo=un(m=>{var G,M;let b=He(m);if(e.activeTool==="inspector"&&e.isAnnotating){let C=b.x-window.scrollX,$=b.y-window.scrollY,oe=dr(C,$),j=oe&&qn(oe)?null:oe;j!==ne&&(Te(j),pt(j?Nn(j):null));return}if(e.activeTool==="model"&&e.isAnnotating){let C=b.x-window.scrollX,$=b.y-window.scrollY,oe=dr(C,$);if(oe!==Q.current&&(Q.current=oe,Jt.current=0),oe){let j=Ii(oe,Jt.current);Fe(j)}else Fe(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let C=b.x-window.scrollX,$=b.y-window.scrollY;en.current={x:C,y:$},zn({x:C,y:$});let oe=io.current.cmd,j=io.current.shift;if(jt.current.isDragging){let E=jt.current,T=E.element;if(!T)return;if(!E.hasMoved){let U=Math.abs(C-E.startX),q=Math.abs($-E.startY);if(U<=2&&q<=2)return;E.hasMoved=!0,E.isAuto&&(Xe(T,"justify-content","normal"),Xe(T,"row-gap",`${E.visualGap}px`),Xe(T,"column-gap",`${E.visualGap}px`),Tt(!1))}let X=E.axis,z=E.originalRow,J=E.originalColumn;if(X==="column"){let U=C-E.startX;J=E.originalColumn+U,oe||(z=E.originalRow+U)}else{let U=$-E.startY;z=E.originalRow+U,oe||(J=E.originalColumn+U)}z=Math.max(0,z),J=Math.max(0,J),j&&(z=Ve(z),J=Ve(J)),z=Math.round(z),J=Math.round(J),Xe(T,"row-gap",`${z}px`),Xe(T,"column-gap",`${J}px`),xo({axis:X,row:z,column:J});return}if(Tn.current.isDragging){let E=Tn.current,T=E.element;if(!T)return;let X=$-E.startY,z=E.corner,J=E.original,U=f({},J);if(oe){let q=J[z]+X;q=Math.max(0,Math.min(E.maxRadius,q)),j&&(q=Ve(q)),q=Math.round(q),U[z]=q}else{let q=J[z]+X;q=Math.max(0,Math.min(E.maxRadius,q)),j&&(q=Ve(q)),q=Math.round(q),U={"top-left":q,"top-right":q,"bottom-right":q,"bottom-left":q}}Xe(T,"border-top-left-radius",`${U["top-left"]}px`),Xe(T,"border-top-right-radius",`${U["top-right"]}px`),Xe(T,"border-bottom-right-radius",`${U["bottom-right"]}px`),Xe(T,"border-bottom-left-radius",`${U["bottom-left"]}px`),yn({corner:z,radius:U});return}if(bn.current.isDragging){let E=bn.current,T=E.element;if(!T)return;let X=E.property,z=E.originalFontSize,J=E.originalLineHeight,U=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(X==="font-size"){let we=C-E.startX;z=E.originalFontSize+we,z=Math.max(1,z)}else{let we=$-E.startY;J=E.originalLineHeight+we,J=Math.max(z,J)}if(j)if(X==="font-size"){let we=U[0],We=Math.abs(z-we);for(let tt of U){let ot=Math.abs(z-tt);ot<We&&(we=tt,We=ot)}z=we}else{let we=z>0?J/z:1.2,We=Math.round(we*2)/2;J=z*Math.max(1,We)}z=Math.round(z),J=Math.round(J*10)/10,Xe(T,"font-size",`${z}px`);let q=z>0?Math.round(J/z*1e3)/1e3:1.2;Xe(T,"line-height",`${q}`),Ro({property:X,fontSize:z,lineHeight:J});return}if(_t.current.isDragging){let E=_t.current,T=E.element;if(!T)return;let X=E.side,z=E.original,J=z.top,U=z.right,q=z.bottom,we=z.left;if(X==="top"){let We=E.startY-$;J=z.top+We,oe||(q=z.bottom+We)}else if(X==="bottom"){let We=$-E.startY;q=z.bottom+We,oe||(J=z.top+We)}else if(X==="left"){let We=E.startX-C;we=z.left+We,oe||(U=z.right+We)}else if(X==="right"){let We=C-E.startX;U=z.right+We,oe||(we=z.left+We)}J=Math.max(0,J),U=Math.max(0,U),q=Math.max(0,q),we=Math.max(0,we),j&&(J=Ve(J),U=Ve(U),q=Ve(q),we=Ve(we)),J=Math.round(J),U=Math.round(U),q=Math.round(q),we=Math.round(we),Xe(T,"padding",`${J}px ${U}px ${q}px ${we}px`),Wt({side:X,padding:{top:J,right:U,bottom:q,left:we}});return}let te=dr(C,$);for(;te&&te.tagName==="A";)te=te.parentElement;{let T=[];te&&T.push(te),W&&W!==te&&T.push(W);let X=null,z=16,J=null;for(let U of T){let q=U.getBoundingClientRect(),we=pr(U),We=[["top-left",q.left,q.top+we["top-left"]],["top-right",q.right,q.top+we["top-right"]],["bottom-right",q.right,q.bottom-we["bottom-right"]],["bottom-left",q.left,q.bottom-we["bottom-left"]]];for(let[tt,ot,Ft]of We){let st=Math.hypot(C-ot,$-Ft);st<z&&(z=st,X=tt,J=U)}}if(X&&J){fe(J),Gt(X),dt&&pe(null),se&&Ce(null),Ot&&hn(null),vt&&Vt(null),Tt(!1),Ut&&Pn(null),vn&&Io(null);return}}W&&fe(null),Le&&Gt(null);{let E=[];te&&Pi(te)&&E.push(te);let T=(G=te==null?void 0:te.parentElement)!=null?G:null;for(;T&&T!==document.body&&E.length<3;)Pi(T)&&E.push(T),T=T.parentElement;for(let X of E){let J=Ho(X).find(U=>C>=U.x&&C<=U.x+U.w&&$>=U.y&&$<=U.y+U.h);if(J){hn(X),Vt(J.axis),Tt(Ms(X,J.axis)),dt&&pe(null),se&&Ce(null),Ut&&Pn(null),vn&&Io(null);return}}}Ot&&hn(null),vt&&Vt(null),Tt(!1);{let T=[];te&&T.push(te),Ut&&Ut!==te&&T.push(Ut);let X=null,z=1/0,J=null;for(let U of T){if(!Is(U))continue;let q=zr(U);if(!q)continue;let we=C>=q.left&&C<=q.right&&$>=q.top&&$<=q.bottom,We=[["font-size",q.right,q.top+q.height/2],["line-height",q.left+q.width/2,q.bottom]];for(let[tt,ot,Ft]of We){let st=Math.hypot(C-ot,$-Ft);(we||st<12)&&st<z&&(z=st,X=tt,J=U)}}X&&J?(Pn(J),Io(X)):(Ut&&Pn(null),vn&&Io(null))}if(te!==dt&&pe(te),te){let E=Nr(te),T=te.getBoundingClientRect(),X=Yn(C,$,T,E);Ce(X)}else Ce(null);return}if(In){let{handle:C,originalPoints:$,hasMoved:oe}=In,j=e.annotations.find(z=>z.id===In.annotationId);if(!j)return;let te="metaKey"in m,E=te&&(m.metaKey||m.ctrlKey),T=te&&m.shiftKey,X;if(j.type==="line"){let z=$[0],J=$[$.length-1];C==="start"?X=[b,J]:X=[z,b]}else if(j.type==="freehand"){let z=Math.min(...$.map(qe=>qe.x)),J=Math.max(...$.map(qe=>qe.x)),U=Math.min(...$.map(qe=>qe.y)),q=Math.max(...$.map(qe=>qe.y)),we=(z+J)/2,We=(U+q)/2,tt=J-z||1,ot=q-U||1,Ft=tt/ot,st=z,xe=J,ze=U,ut=q;switch(C){case"topLeft":st=b.x,ze=b.y;break;case"topRight":xe=b.x,ze=b.y;break;case"bottomLeft":st=b.x,ut=b.y;break;case"bottomRight":xe=b.x,ut=b.y;break}if(E)switch(C){case"topLeft":xe=J+(z-st),ut=q+(U-ze);break;case"topRight":st=z-(xe-J),ut=q+(U-ze);break;case"bottomLeft":xe=J+(z-st),ze=U-(ut-q);break;case"bottomRight":st=z-(xe-J),ze=U-(ut-q);break}if(T){let qe=xe-st,Ht=ut-ze;if(Math.abs(qe/Ht)>Ft){let fn=Math.abs(Ht)*Ft*Math.sign(qe);C==="topLeft"||C==="bottomLeft"?st=xe-fn:xe=st+fn}else{let fn=Math.abs(qe)/Ft*Math.sign(Ht);C==="topLeft"||C==="topRight"?ze=ut-fn:ut=ze+fn}}let at=xe-st||1,wt=ut-ze||1;X=$.map(qe=>({x:st+(qe.x-z)/tt*at,y:ze+(qe.y-U)/ot*wt}))}else if(j.type==="circle"){let z=$[0],J=$[$.length-1],U=Math.min(z.x,J.x),q=Math.max(z.x,J.x),we=Math.min(z.y,J.y),We=Math.max(z.y,J.y),tt=(U+q)/2,ot=(we+We)/2,Ft=q-U,st=We-we,xe=U,ze=q,ut=we,at=We;switch(C){case"top":if(ut=b.y,E&&(at=ot+(ot-b.y)),T){let qe=(at-ut)*(Ft/st)/2;xe=tt-qe,ze=tt+qe}break;case"bottom":if(at=b.y,E&&(ut=ot-(b.y-ot)),T){let qe=(at-ut)*(Ft/st)/2;xe=tt-qe,ze=tt+qe}break;case"left":if(xe=b.x,E&&(ze=tt+(tt-b.x)),T){let qe=(ze-xe)*(st/Ft)/2;ut=ot-qe,at=ot+qe}break;case"right":if(ze=b.x,E&&(xe=tt-(b.x-tt)),T){let qe=(ze-xe)*(st/Ft)/2;ut=ot-qe,at=ot+qe}break}X=[{x:xe,y:ut},{x:ze,y:at}]}else{let z=$[0],J=$[$.length-1],U=Math.min(z.x,J.x),q=Math.max(z.x,J.x),we=Math.min(z.y,J.y),We=Math.max(z.y,J.y),tt=(U+q)/2,ot=(we+We)/2,Ft=q-U||1,st=We-we||1,xe=Ft/st,ze=U,ut=q,at=we,wt=We;switch(C){case"topLeft":ze=b.x,at=b.y;break;case"topRight":ut=b.x,at=b.y;break;case"bottomLeft":ze=b.x,wt=b.y;break;case"bottomRight":ut=b.x,wt=b.y;break}if(E)switch(C){case"topLeft":ut=q+(U-ze),wt=We+(we-at);break;case"topRight":ze=U-(ut-q),wt=We+(we-at);break;case"bottomLeft":ut=q+(U-ze),at=we-(wt-We);break;case"bottomRight":ze=U-(ut-q),at=we-(wt-We);break}if(T){let qe=ut-ze,Ht=wt-at;if(Math.abs(qe/Ht)>xe){let fn=Math.abs(Ht)*xe*Math.sign(qe);C==="topLeft"||C==="bottomLeft"?ze=ut-fn:ut=ze+fn}else{let fn=Math.abs(qe)/xe*Math.sign(Ht);C==="topLeft"||C==="topRight"?at=wt-fn:wt=at+fn}}X=[{x:ze,y:at},{x:ut,y:wt}]}t({type:"RESIZE_ANNOTATION",payload:{id:In.annotationId,points:X,saveUndo:!oe}}),oe||Ao(y(f({},In),{hasMoved:!0}));return}if(Bt&&((M=Bt.annotation.status)!=null?M:"pending")==="pending"){let C=b.x-Bt.startPoint.x,$=b.y-Bt.startPoint.y;if((Math.abs(C)>2||Math.abs($)>2)&&!Bt.hasMoved)Xt(y(f({},Bt),{hasMoved:!0,startPoint:b})),t({type:"MOVE_ANNOTATION",payload:{id:Bt.annotation.id,delta:{x:C,y:$},saveUndo:!0}});else if(Bt.hasMoved){let j=b.x-Bt.startPoint.x,te=b.y-Bt.startPoint.y;Xt(y(f({},Bt),{startPoint:b})),t({type:"MOVE_ANNOTATION",payload:{id:Bt.annotation.id,delta:{x:j,y:te}}})}return}!h||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:b})},[h,e.isAnnotating,e.activeTool,Bt,In,ne,dt,se,W,Le,Ot,vt,Ut,vn,He,t,Ve,Yn]),En=un(m=>{var M,C,$,oe,j,te;if(bn.current.isDragging){let E=bn.current,T=E.element;if(T&&E.selector&&E.elementInfo&&yt){T instanceof HTMLElement&&(T.style.removeProperty("font-size"),T.style.removeProperty("line-height"),T.style.removeProperty("transition"));let X=[];if(E.originalFontSize!==yt.fontSize&&(Xe(T,"font-size",`${yt.fontSize}px`),X.push({property:"font-size",original:`${E.originalFontSize}px`,modified:`${yt.fontSize}px`})),E.originalLineHeight!==yt.lineHeight){let z=E.originalFontSize>0?Math.round(E.originalLineHeight/E.originalFontSize*1e3)/1e3:1.2,J=yt.fontSize>0?Math.round(yt.lineHeight/yt.fontSize*1e3)/1e3:1.2;Xe(T,"line-height",`${J}`),X.push({property:"line-height",original:`${z}`,modified:`${J}`})}X.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:E.selector,durableSelector:(M=E.durableSelector)!=null?M:void 0,element:E.elementInfo,changes:X}})}bn.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},Ro(null);return}if(jt.current.isDragging){let E=jt.current,T=E.element,X="button"in m&&m.button===2;if(!E.hasMoved&&!X&&T&&E.selector&&E.elementInfo){T instanceof HTMLElement&&T.style.removeProperty("transition");let z=["space-between","space-around","stretch","normal"],J=E.originalJustifyContent||"normal",U=z.indexOf(J),q=z[(U+1)%z.length],we=[];q==="normal"?(Xe(T,"justify-content","normal"),we.push({property:"justify-content",original:E.originalJustifyContent,modified:"normal"})):q==="stretch"?(Xe(T,"justify-content",q),Xe(T,"row-gap","8px"),Xe(T,"column-gap","8px"),we.push({property:"justify-content",original:E.originalJustifyContent||"normal",modified:q}),E.originalRow!==8&&we.push({property:"row-gap",original:`${E.originalRow}px`,modified:"8px"}),E.originalColumn!==8&&we.push({property:"column-gap",original:`${E.originalColumn}px`,modified:"8px"})):(T instanceof HTMLElement&&(T.style.removeProperty("row-gap"),T.style.removeProperty("column-gap")),Xe(T,"justify-content",q),we.push({property:"justify-content",original:E.originalJustifyContent||"normal",modified:q}),E.originalRow>0&&we.push({property:"row-gap",original:`${E.originalRow}px`,modified:"0px"}),E.originalColumn>0&&we.push({property:"column-gap",original:`${E.originalColumn}px`,modified:"0px"})),we.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:E.selector,durableSelector:(C=E.durableSelector)!=null?C:void 0,element:E.elementInfo,changes:we}})}else if(E.hasMoved&&T&&E.selector&&E.elementInfo&&Qe){T instanceof HTMLElement&&(T.style.removeProperty("row-gap"),T.style.removeProperty("column-gap"),T.style.removeProperty("transition"));let z=[];E.isAuto?(T instanceof HTMLElement&&T.style.removeProperty("justify-content"),Xe(T,"justify-content","normal"),Xe(T,"row-gap",`${Qe.row}px`),Xe(T,"column-gap",`${Qe.column}px`),z.push({property:"justify-content",original:E.originalJustifyContent,modified:"normal"}),z.push({property:"row-gap",original:"0px",modified:`${Qe.row}px`}),z.push({property:"column-gap",original:"0px",modified:`${Qe.column}px`})):(E.originalRow!==Qe.row&&(Xe(T,"row-gap",`${Qe.row}px`),z.push({property:"row-gap",original:`${E.originalRow}px`,modified:`${Qe.row}px`})),E.originalColumn!==Qe.column&&(Xe(T,"column-gap",`${Qe.column}px`),z.push({property:"column-gap",original:`${E.originalColumn}px`,modified:`${Qe.column}px`}))),z.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:E.selector,durableSelector:($=E.durableSelector)!=null?$:void 0,element:E.elementInfo,changes:z}})}jt.current={isDragging:!1,hasMoved:!1,axis:null,startX:0,startY:0,originalRow:0,originalColumn:0,element:null,elementInfo:null,selector:null,durableSelector:null,isAuto:!1,originalJustifyContent:"",visualGap:0},xo(null);return}if(Tn.current.isDragging){let E=Tn.current,T=E.element;if(T&&E.selector&&E.elementInfo&&St){T instanceof HTMLElement&&(T.style.removeProperty("border-top-left-radius"),T.style.removeProperty("border-top-right-radius"),T.style.removeProperty("border-bottom-right-radius"),T.style.removeProperty("border-bottom-left-radius"),T.style.removeProperty("transition"));let X=["top-left","top-right","bottom-right","bottom-left"],z={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},J=[];for(let U of X)E.original[U]!==St.radius[U]&&(Xe(T,z[U],`${St.radius[U]}px`),J.push({property:z[U],original:`${E.original[U]}px`,modified:`${St.radius[U]}px`}));J.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:E.selector,durableSelector:(oe=E.durableSelector)!=null?oe:void 0,element:E.elementInfo,changes:J}})}Tn.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},yn(null);return}if(_t.current.isDragging){let E=_t.current,T=E.element,X=E.selector,z=E.elementInfo;if(T&&X&&z&&Me){let J=E.original,U=Me.padding;T instanceof HTMLElement&&(T.style.removeProperty("padding"),T.style.removeProperty("transition"));let q=[],we=[{prop:"padding-top",origVal:J.top,newVal:U.top},{prop:"padding-right",origVal:J.right,newVal:U.right},{prop:"padding-bottom",origVal:J.bottom,newVal:U.bottom},{prop:"padding-left",origVal:J.left,newVal:U.left}];for(let{prop:We,origVal:tt,newVal:ot}of we)tt!==ot&&(Xe(T,We,`${ot}px`),q.push({property:We,original:`${tt}px`,modified:`${ot}px`}));q.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:X,durableSelector:(j=E.durableSelector)!=null?j:void 0,element:z,changes:q}})}_t.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},Wt(null);return}if(In){Ao(null);return}if(Bt){if(!Bt.hasMoved&&Bt.annotation.type==="text"&&((te=Bt.annotation.status)!=null?te:"pending")==="pending"){let E=He(m);be({id:Bt.annotation.id,point:Bt.annotation.points[0],text:Bt.annotation.text||"",fontSize:Bt.annotation.fontSize||12,isNew:!1,clickPoint:E,groupId:Bt.annotation.groupId})}Xt(null);return}if(!h)return;let b=5;if(e.currentPath.length>=2){let E=e.currentPath[0],T=e.currentPath[e.currentPath.length-1],X=Math.abs(T.x-E.x),z=Math.abs(T.y-E.y);if((e.activeTool==="line"?Math.sqrt(X*X+z*z)<b:X<b&&z<b)&&["rectangle","circle","line"].includes(e.activeTool)){A(!1),t({type:"CANCEL_PATH"});return}}let G=ws(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let E=e.currentPath[0],T=e.currentPath[e.currentPath.length-1],X=Math.min(E.x,T.x),z=Math.max(E.y,T.y),J=e.strokeWidth/2,U=Math.random().toString(36).substring(2,9);me({point:{x:X-J+4,y:z+J+4},groupId:U}),A(!1),t({type:"FINISH_PATH",payload:{groupId:U,elements:G}});return}A(!1),t({type:"FINISH_PATH",payload:{elements:G}})},[h,Bt,In,Me,St,Qe,yt,He,t,e.activeTool,e.currentPath,e.strokeWidth]),Qn=un(m=>{let b=m.target.value;Ie.current=m.target.selectionStart,be(G=>G&&y(f({},G),{text:b}))},[]),Bn=un(m=>{m.key==="Escape"?be(null):m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),It())},[It]),er=un(m=>{if(!k)return;let b=m.clipboardData.items,G=[];for(let M=0;M<b.length;M++){let C=b[M];if(C.type.startsWith("image/")){let $=C.getAsFile();$&&G.push($)}}G.length>0&&(m.preventDefault(),be(M=>M?y(f({},M),{images:[...M.images||[],...G]}):null))},[k]),kr=un(m=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){m.preventDefault();let G=dt||Ot||W||Ut;if(G&&!qn(G)){let M=Nn(G),C=Jn(G);t({type:"SELECT_ELEMENT",payload:{el:G,info:y(f({},M),{selector:C})}})}return}m.preventDefault();let b=Y.current;b&&(B.current=!0,b.style.pointerEvents="none",setTimeout(()=>{B.current&&(B.current=!1,b.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,dt,Ot,W,Ut,t,qn,Y]);kn(()=>{let m=V.filter(oe=>oe.linkedSelector);if(m.length===0)return;let b=null,G=document.createElement("canvas").getContext("2d"),M=()=>{var j,te,E;let oe=[];for(let T of m){let X=document.querySelector(T.linkedSelector);if(!X&&((te=(j=T.elements)==null?void 0:j[0])!=null&&te.selector)&&T.linkedSelector.startsWith("[data-pm=")){try{X=document.querySelector(T.elements[0].selector)}catch(st){}if(X){let st=(E=T.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:E[1];st&&X.setAttribute("data-pm",st)}}if(!X)continue;let z=X.getBoundingClientRect(),J=e.styleModifications.some(st=>{try{return X.matches(st.selector)}catch(xe){return!1}}),U=m.filter(st=>st.id!==T.id&&st.timestamp<T.timestamp&&st.linkedSelector===T.linkedSelector).length,q=(J?1:0)+U,we;if(T.text&&G){let st=T.fontSize||12;G.font=`${st}px ${Zt}`,we=Math.max(...T.text.split(`
|
|
5
|
-
`).map(
|
|
6
|
-
`)
|
|
7
|
-
`).length)*k.fontSize*1.4+8:0,ue=P.height+8,Ae=P.isWrapped?ue-le:0,Be=k?{position:"fixed",left:k.point.x-4-an.x,top:k.point.y-4-an.y-Ae,zIndex:9999,width:P.width+8,height:ue,padding:4,fontSize:k.fontSize,fontFamily:Zt,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:P.isWrapped?"pre-wrap":"pre",wordBreak:P.isWrapped?"break-word":void 0}:{};return Yr(Jr,{children:[ft("canvas",{ref:_,id:"devtools-canvas",style:pi,onMouseDown:Oo,onMouseMove:Bo,onMouseUp:m=>En(m),onMouseLeave:m=>{En(m),Te(null),pt(null)},onTouchStart:Oo,onTouchMove:Bo,onTouchEnd:m=>En(m),onContextMenu:kr}),k&&Yr(Jr,{children:[ft("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),ft("textarea",{id:"devtools-text-input",ref:Se,value:k.text,onChange:Qn,onKeyDown:Bn,onPaste:er,onBlur:It,placeholder:"Type here...",style:Be}),k.images&&k.images.length>0&&Yr("div",{"data-devtools":!0,style:{position:"fixed",left:k.point.x-4-an.x,top:k.point.y-4-an.y-20,zIndex:1e4,fontSize:11,fontFamily:"system-ui, sans-serif",color:"#fff",backgroundColor:"rgba(0,0,0,0.7)",padding:"2px 6px",borderRadius:3,whiteSpace:"nowrap"},children:[k.images.length," image",k.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&&ft(Ul,{styleModifications:e.styleModifications,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(V.map(m=>m.groupId||m.id)).size,dispatch:t,inFlightSelectors:i,toolbarRef:L,onHoverSelector:Ge}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&&ft(Xl,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&&ft(Hl,{annotations:V,supersededAnnotations:ee,inFlightIds:o,activeIds:r,queuePositions:s,scrollX:an.x,scrollY:an.y,annotationGroupMap:ge,onViewThread:c,onSelectAnnotation:$n,onHoverAnnotation:ye,canvasRef:Y}),e.isAnnotating&&d&&ft(Nl,{annotations:V,supersededAnnotations:ee,scrollX:an.x,scrollY:an.y,onReply:d,annotationGroupMap:ge,canvasRef:Y,onHoverAnnotation:ye}),e.isAnnotating&&l&&l.size>0&&ft(Ls,{inFlightSelectorColors:l}),e.isAnnotating&&ae&&ft(Ls,{inFlightSelectorColors:ae,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(Qe?jt.current.element:Ot)&&ft(_s,{element:Qe?jt.current.element:Ot,gap:Qe?{row:Qe.row,column:Qe.column}:ur(Ot),accentColor:e.activeColor,hoveredAxis:vt,draggingAxis:(Ue=Qe==null?void 0:Qe.axis)!=null?Ue:null,cursorViewport:pn,isAutoGap:Ke,refreshKey:Gn}),e.activeTool==="hand"&&e.isAnnotating&&Fn&&ft(gc,{element:Fn.target,modifier:Fn.modifier,accentColor:e.activeColor,refreshKey:Gn}),e.activeTool==="hand"&&e.isAnnotating&&!Fn&&(St?Tn.current.element:W)&&ft(jl,{element:St?Tn.current.element:W,radius:(Rt=St==null?void 0:St.radius)!=null?Rt:pr(W),accentColor:e.activeColor,hoveredCorner:Le,draggingCorner:(Ct=St==null?void 0:St.corner)!=null?Ct:null,cursorViewport:pn}),e.activeTool==="hand"&&e.isAnnotating&&!Fn&&(yt?bn.current.element:Ut)&&ft(mc,{element:yt?bn.current.element:Ut,fontSize:(gt=yt==null?void 0:yt.fontSize)!=null?gt:ti(Ut).fontSize,lineHeight:(zt=yt==null?void 0:yt.lineHeight)!=null?zt:ti(Ut).lineHeight,accentColor:e.activeColor,hoveredProperty:vn,draggingProperty:(xt=yt==null?void 0:yt.property)!=null?xt:null,cursorViewport:pn}),e.activeTool==="hand"&&e.isAnnotating&&!Fn&&(Me?_t.current.element:dt)&&ft(Ws,{element:Me?_t.current.element:dt,padding:(ln=Me==null?void 0:Me.padding)!=null?ln:Nr(dt),accentColor:e.activeColor,hoveredSide:se,draggingSide:(lo=Me==null?void 0:Me.side)!=null?lo:null,cursorViewport:pn,refreshKey:yt?yt.fontSize+yt.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&ft(Jr,{children:ne&&!e.inspectedElement&&(()=>{let m=(k==null?void 0:k.linkedSelector)||(R==null?void 0:R.linkedSelector);if(m)try{if(ne.matches(m))return null}catch(G){}let b=!!R||!!(k!=null&&k.linkedSelector)||V.some(G=>{if(!G.linkedSelector)return!1;try{return ne.matches(G.linkedSelector)}catch(M){return!1}});return ft(Co,{element:ne,isSelected:!1,elementInfo:$e,color:e.activeColor,hideTooltip:b})})()}),((k==null?void 0:k.linkedSelector)||(R==null?void 0:R.linkedSelector))&&(()=>{let m=(k==null?void 0:k.linkedSelector)||(R==null?void 0:R.linkedSelector);if(!m)return null;let b=null;try{b=document.querySelector(m)}catch(G){}return b?ft(Co,{element:b,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),H&&(()=>{let m=e.annotations.find(M=>M.id===H);if(!(m!=null&&m.linkedSelector))return null;let b=null;try{b=document.querySelector(m.linkedSelector)}catch(M){}if(!b)return null;let G=!!(o&&o.has(m.id));return ft(Co,{element:b,isSelected:!G,color:m.color,hideTooltip:!0})})(),Je&&(()=>{let m=e.annotations.find(C=>C.id===Je);if(!(m!=null&&m.linkedSelector))return null;let b=null;try{b=document.querySelector(m.linkedSelector)}catch(C){}if(!b)return null;let G=m.groupId?e.annotations.filter(C=>C.groupId===m.groupId):[m],M=!!(o&&G.some(C=>o.has(C.id)));return ft(Co,{element:b,isSelected:!M,color:m.color,hideTooltip:!0})})(),ct&&(()=>{let m=null;try{m=document.querySelector(ct)}catch(G){}if(!m)return null;let b=!!(i&&i.has(ct));return ft(Co,{element:m,isSelected:!b,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&rt.size>0&&[...rt.entries()].map(([m,b])=>ft(Co,{element:b.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:b.rootElement.tagName.toLowerCase(),reactComponent:m},color:"#8b5cf6"},m)),e.activeTool==="model"&&e.isAnnotating&&so&&ft(Co,{element:so.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:so.rootElement.tagName.toLowerCase(),reactComponent:so.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&ao.length>0&&ao.map((m,b)=>ft("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"?Yr(Jr,{children:[ft("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),ft("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),ft("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),ft("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)})]}):Yr(Jr,{children:[ft("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),ft("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),ft("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),ft("div",{style:{position:"absolute",left:m.width<30?0:"50%",top:(m.width<30,void 0),bottom:"calc(50% + 4px)",transform:m.width<30?"none":"translateX(-50%)",fontSize:11,fontWeight:600,color:"#fff",backgroundColor:"#FF0000",padding:"2px 4px",whiteSpace:"nowrap",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1},children:Math.round(m.width)})]})},b)),e.activeTool==="model"&&e.isAnnotating&&he&&ft(Co,{element:he.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:he.rootElement.tagName.toLowerCase(),reactComponent:he.name},color:x!=null&&x.has(he.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&Yr(Jr,{children:[Re&&Re!=="padding"&&Re!=="gap"&&(()=>{var j;let m=new Set(V.map(te=>te.groupId||te.id)).size,b=e.inspectedElement.info.selector,G=e.styleModifications.findIndex(te=>te.selector===b),M=G>=0?m+G+1:m+e.styleModifications.length+1,C=e.styleModifications.find(te=>te.selector===b),$=(j=C==null?void 0:C.changes.length)!=null?j:0,oe=!!(C!=null&&C.captured);return ft(Co,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:oe?"#999999":e.activeColor,annotationNumber:M,changeCount:$})})(),Re==="padding"&&ft(Ws,{element:e.inspectedElement.el,padding:Nr(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),Re==="gap"&&ft(_s,{element:e.inspectedElement.el,gap:ur(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),ft(pc,{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:it,accentColor:e.activeColor,toolbarRef:L})]})]})}import{useCallback as Xn,useEffect as mn,useMemo as xr,useRef as Nt,useState as Sr}from"react";import{Check as bg,Circle as vg,Component as xg,Fingerprint as Sg,Hand as wg,MessageCircle as Cg,Pen as Eg,RefreshCw as kg,Slash as Tg,Square as Mg,Trash2 as Ig,Type as Rg}from"lucide-react";import{useEffect as vc,useRef as xc}from"react";function Sc(e,t,n,o,r){let s=xc(0),i=xc(t.annotations);vc(()=>{if(!n.current||!e)return;i.current=t.annotations;let l=t.annotations.length;l>0&&(l>=s.current||!o)&&(localStorage.setItem(r.annotations,JSON.stringify(t.annotations)),s.current=l)},[t.annotations,e,o,n,r]),vc(()=>{n.current&&(localStorage.setItem(r.expanded,String(e)),e&&(localStorage.setItem(r.styleMods,JSON.stringify(t.styleModifications)),localStorage.setItem(r.spacingChanges,JSON.stringify(t.spacingTokenChanges)),localStorage.setItem(r.tool,t.activeTool),localStorage.setItem(r.color,t.activeColor),localStorage.setItem(r.stroke,String(t.strokeWidth)),t.inspectedElement?localStorage.setItem(r.inspected,JSON.stringify({selector:t.inspectedElement.info.selector,info:t.inspectedElement.info})):localStorage.removeItem(r.inspected)))},[e,t.styleModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,n,r])}import{useCallback as Ln,useEffect as yr,useMemo as oa,useRef as si,useState as ko}from"react";import{Fragment as vf,jsx as Lt,jsxs as ho}from"react/jsx-runtime";var Zp=y(f({width:340,backgroundColor:"#eaeaea"},Ko),{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"}),Qp=(e,t)=>({width:"100%",border:"1px solid rgba(0,0,0,0.12)",background:t?"rgba(0,0,0,0.04)":"rgba(0,0,0,0.02)",cursor:e?"default":"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"5px 8px",color:e?"#9ca3af":"#6b7280"}),ef=e=>({border:0,background:"transparent",color:e?"#111827":"#6b7280",cursor:"pointer",fontFamily:"inherit",fontSize:10,fontWeight:700,padding:0,textTransform:"uppercase"}),ra={border:"1px solid rgba(0,0,0,0.12)",background:"rgba(0,0,0,0.02)",cursor:"pointer",fontFamily:"inherit",fontSize:10,fontWeight:650,color:"#6b7280",padding:"6px 8px",flex:1},Ui=y(f({},ra),{borderColor:"#111827",background:"#111827",color:"#ffffff"}),tf=y(f({},Ui),{cursor:"default",opacity:.55}),ia={display:"block",width:"100%",border:0,background:"transparent",boxSizing:"border-box",color:"inherit",cursor:"text",font:"inherit",lineHeight:1.25,margin:0,padding:0,textAlign:"left"},nf=y(f({},ia),{appearance:"none",resize:"none",overflow:"hidden",outline:"none"}),kc=y(f({},ia),{fontWeight:700,fontSize:11,lineHeight:1.35}),of=y(f({},kc),{appearance:"none",resize:"none",overflow:"hidden",outline:"none"}),wc={display:"grid",gridTemplateColumns:"12px minmax(0, 1fr)",columnGap:4,alignItems:"start",marginBottom:5},rf={pass:"#2f855a",fail:"#c53030",needs_review:"#6b7280"},sf={pass:"\u2611",fail:"\u2612",needs_review:"\u25A1"},af=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"Eval",lf=[{id:"pending",label:"Pending"},{id:"approved",label:"Approved"},{id:"rejected",label:"Rejected"}],Cc="popmelt-eval-active-status",cf=e=>e==="pending"||e==="approved"||e==="rejected";function Tc({bridgeUrl:e,refreshKey:t,onMouseEnter:n,onMouseLeave:o,onSynthesize:r,isSynthesizing:s,onRunEval:i,onViewRunThread:l,runningEvalIds:a=[],snapPosition:d="bottom-right"}){let c=si(null),u=s||!r,[p,g]=ko({version:1,updatedAt:0,cases:[]}),[v,x]=ko(!0),[w,I]=ko(()=>{if(typeof window=="undefined")return"pending";try{let _=window.localStorage.getItem(Cc);return cf(_)?_:"pending"}catch(_){return"pending"}});yr(()=>{let _=c.current;if(!_)return;let B=n,h=o;return B&&_.addEventListener("mouseenter",B),h&&_.addEventListener("mouseleave",h),()=>{B&&_.removeEventListener("mouseenter",B),h&&_.removeEventListener("mouseleave",h)}},[n,o]);let N=Ln(()=>{e&&(x(!0),Da(e).then(_=>{g(_),x(!1)}).catch(()=>x(!1)))},[e]);yr(()=>{N()},[N,t]),yr(()=>{try{window.localStorage.setItem(Cc,w)}catch(_){}},[w]);let H=Ln((_,B)=>{e&&(g(h=>y(f({},h),{cases:h.cases.map(A=>A.id===_?y(f({},A),{status:B}):A)})),_a(_,B,e).then(h=>{h||N()}).catch(N))},[e,N]),O=Ln((_,B)=>{if(!e)return;let h=B.map(A=>A.trim()).filter(Boolean);h.length!==0&&(g(A=>y(f({},A),{cases:A.cases.map(k=>k.id===_?y(f({},k),{assertions:h}):k)})),mi(_,{assertions:h},e).then(A=>{A||N()}).catch(N))},[e,N]),L=Ln((_,B)=>{if(!e)return;let h=B.trim();h&&(g(A=>y(f({},A),{cases:A.cases.map(k=>k.id===_?y(f({},k),{title:h}):k)})),mi(_,{title:h},e).then(A=>{A||N()}).catch(N))},[e,N]),Y=oa(()=>{let _=p.cases.filter(A=>A.status==="pending"),B=p.cases.filter(A=>A.status==="approved"),h=p.cases.filter(A=>A.status==="rejected");return{pending:_,approved:B,rejected:h}},[p.cases]),re=Y[w],Z=oa(()=>{var h;let _=new Map,B=[...(h=p.runs)!=null?h:[]].sort((A,k)=>k.completedAt-A.completedAt);for(let A of B)_.has(A.evalId)||_.set(A.evalId,A);return _},[p.runs]);return ho("div",{ref:c,style:f(f({},Zp),Ei(d)),children:[ho("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[Lt("span",{children:"Evals"}),Lt("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"E"})]}),Lt("button",{type:"button",disabled:u,onClick:r,style:Qp(u,s),children:s?"Synthesizing...":"Synthesize"}),Lt("div",{style:{display:"flex",gap:12,marginTop:8},children:lf.map(_=>Lt(ff,{active:w===_.id,label:`${_.label} ${Y[_.id].length}`,onClick:()=>I(_.id)},_.id))}),Lt("div",{style:{marginTop:10,flex:1,minHeight:0,overflowY:"auto",display:"flex",flexDirection:"column",gap:10},children:v?Lt("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):p.cases.length===0?Lt("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.5},children:"No inferred evals yet."}):re.length===0?ho("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.5},children:["No ",w," evals."]}):Lt(df,{cases:re,latestRunsByEvalId:Z,runningEvalIds:a,onStatus:H,onRun:i,onViewRunThread:l,onTitleChange:L,onAssertionsChange:O})})]})}function df({cases:e,latestRunsByEvalId:t,runningEvalIds:n,onStatus:o,onRun:r,onViewRunThread:s,onTitleChange:i,onAssertionsChange:l}){return Lt("div",{style:{display:"flex",flexDirection:"column",gap:6},children:e.map(a=>{let d=new Set([...a.sourceDecisionIds,...a.sourceThreadIds]).size,c=d>0?`, ${d} ${d===1?"mention":"mentions"}`:"",u=t.get(a.id),p=n.includes(a.id);return ho("div",{style:{border:"1px solid rgba(0,0,0,0.08)",background:"rgba(255,255,255,0.35)",padding:8},children:[ho("div",{children:[Lt(gf,{value:a.title,onCommit:g=>i(a.id,g)}),ho("div",{style:{color:"#9ca3af",fontSize:10,marginTop:2},children:[af(a.category),c]})]}),Lt("div",{style:{marginTop:6,color:"#374151",fontSize:11,lineHeight:1.25},children:Lt(bf,{assertions:a.assertions,latestRun:u,onChange:g=>l(a.id,g)})}),Lt(pf,{item:a,latestRun:u,isRunning:p,onStatus:o,onRun:r,onViewRunThread:s})]},a.id)})})}function uf(e){let t=e.assertionResults.length;if(t===0)return e.status==="pass"?"Pass":"Review";let n=e.assertionResults.reduce((r,s)=>(r[s.status]+=1,r),{pass:0,fail:0,needs_review:0}),o=n.fail+n.needs_review;return o===0?`${n.pass||t} Pass`:`Review ${o||t}`}function pf({item:e,latestRun:t,isRunning:n,onStatus:o,onRun:r,onViewRunThread:s}){if(e.status==="pending")return ho("div",{style:{display:"flex",gap:6,marginTop:8},children:[Lt("button",{type:"button",style:ra,onClick:()=>o(e.id,"rejected"),children:"Reject"}),Lt("button",{type:"button",style:Ui,onClick:()=>o(e.id,"approved"),children:"Accept"})]});if(e.status==="approved"){let i=n||!r;return ho("div",{style:{display:"flex",gap:6,marginTop:8},children:[(t==null?void 0:t.threadId)&&s&&Lt("button",{type:"button",style:ra,onClick:()=>s(t.threadId),children:uf(t)}),Lt("button",{type:"button",disabled:i,style:i?tf:Ui,onClick:()=>r==null?void 0:r(e),children:n?"Running...":"Run"})]})}return Lt("div",{style:{display:"flex",gap:6,marginTop:8},children:Lt("button",{type:"button",style:Ui,onClick:()=>o(e.id,"approved"),children:"Approve"})})}function ff({active:e,label:t,onClick:n}){let[o,r]=ko(!1);return Lt("button",{type:"button",style:ef(e||o),onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),onClick:n,children:t})}function gf({value:e,onCommit:t}){let[n,o]=ko(!1),[r,s]=ko(e),i=si(null);yr(()=>{n||s(e)},[n,e]),yr(()=>{if(!n)return;let c=i.current;c&&(c.focus(),c.select(),c.style.height="auto",c.style.height=`${c.scrollHeight}px`)},[n]);let l=Ln(()=>{let c=r.trim();o(!1),c&&c!==e?t(c):s(e)},[r,t,e]),a=Ln(()=>{s(e),o(!1)},[e]),d=Ln(c=>{c.key==="Enter"?(c.preventDefault(),l()):c.key==="Escape"&&(c.preventDefault(),a())},[a,l]);return n?Lt("textarea",{ref:i,rows:1,value:r,onChange:c=>{s(c.target.value),c.currentTarget.style.height="auto",c.currentTarget.style.height=`${c.currentTarget.scrollHeight}px`},onBlur:l,onKeyDown:d,style:of}):Lt("button",{type:"button",onClick:()=>o(!0),style:kc,children:e})}function mf(e){return e.map(t=>t.trim()).filter(Boolean)}function hf(e,t){return e.length===t.length&&e.every((n,o)=>n===t[o])}function Ec(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}function yf(e){var d;let t=window.getComputedStyle(e),n=Number.parseFloat(t.lineHeight)||Number.parseFloat(t.fontSize)*1.2||16,o=document.createElement("div"),r=document.createElement("span"),s=document.createElement("span");o.style.position="fixed",o.style.visibility="hidden",o.style.pointerEvents="none",o.style.left="-9999px",o.style.top="0",o.style.width=`${e.clientWidth}px`,o.style.boxSizing=t.boxSizing,o.style.font=t.font,o.style.letterSpacing=t.letterSpacing,o.style.lineHeight=t.lineHeight,o.style.padding=t.padding,o.style.border=t.border,o.style.whiteSpace="pre-wrap",o.style.overflowWrap="break-word",o.style.wordBreak=t.wordBreak;let i=(d=e.selectionStart)!=null?d:0;o.textContent=e.value.slice(0,i),r.textContent="\u200B",o.appendChild(r),o.appendChild(document.createTextNode(e.value.slice(i)||"\u200B")),s.textContent="\u200B",o.appendChild(s),document.body.appendChild(o);let l=Math.max(0,Math.round(r.offsetTop/n)),a=Math.max(0,Math.round(s.offsetTop/n));return o.remove(),{lineIndex:l,lastLineIndex:a}}function bf({assertions:e,latestRun:t,onChange:n}){let[o,r]=ko(null),[s,i]=ko(e),[l,a]=ko(null),[d,c]=ko(0),u=si([]),p=si(null),g=si(!1),v=o!==null,x=v?s.length+1:s.length,w=oa(()=>{var h;let B=new Map;for(let A of(h=t==null?void 0:t.assertionResults)!=null?h:[])B.set(A.assertion.trim(),A);return B},[t]);yr(()=>{v||i(e)},[e,v]),yr(()=>{if(l===null)return;let B=requestAnimationFrame(()=>{let h=u.current[l];if(h){if(h.focus(),p.current==="select"&&h.value)h.select();else if(p.current==="start")h.setSelectionRange(0,0);else if(p.current==="end"){let A=h.value.length;h.setSelectionRange(A,A)}p.current=null,Ec(h)}});return()=>cancelAnimationFrame(B)},[l,d,x]);let I=Ln((B,h=null)=>{p.current=h,r(B),a(B),c(A=>A+1)},[]),N=Ln(B=>{let h=mf(B);return h.length===0?(i(e),e):(i(h),hf(h,e)||n(h),h)},[e,n]),H=Ln(B=>{I(B,"select")},[I]),O=Ln((B,h)=>{i(A=>{let k=[...A];if(B>=k.length){if(h.length===0)return k;k.push(h)}else k[B]=h;return k})},[]),L=Ln((B,h)=>{var F,me;let A=[...s],be=(B<A.length&&(F=A[B])!=null?F:"").trim();if(B>=A.length){let R=h!=null&&h.focusPlaceholder?A.length:h==null?void 0:h.focusIndex;R!==void 0?I(R,h==null?void 0:h.focusMode):(r(null),a(null));return}if(!be){if(h!=null&&h.deleteEmpty){A.splice(B,1);let R=N(A),ie=h.focusPlaceholder?R.length:h.focusIndex;if(ie!==void 0){let Se=Math.min(ie,R.length);I(Se)}else r(null),a(null)}else A[B]=(me=e[B])!=null?me:"",i(A),(h==null?void 0:h.focusIndex)!==void 0?I(h.focusIndex,h.focusMode):(r(null),a(null));return}A[B]=be;let K=N(A),de=h!=null&&h.focusPlaceholder?K.length:h==null?void 0:h.focusIndex;if(de!==void 0){let R=Math.min(de,K.length);I(R,h==null?void 0:h.focusMode)}else r(null),a(null)},[e,s,N,I]),Y=Ln(()=>{i(e),r(null),a(null)},[e]),re=Ln((B,h)=>{let A=h.currentTarget.value,k=h.currentTarget.selectionStart,be=h.currentTarget.selectionEnd,K=k===be;if((h.key==="ArrowUp"||h.key==="ArrowDown")&&K){let{lineIndex:de,lastLineIndex:F}=yf(h.currentTarget);if(h.key==="ArrowUp"&&de===0&&B>0){h.preventDefault(),g.current=!0,L(B,{focusIndex:B-1,focusMode:"end",deleteEmpty:!1});return}if(h.key==="ArrowDown"&&de===F&&B<x-1){h.preventDefault(),g.current=!0,L(B,{focusIndex:B+1,focusMode:"start",deleteEmpty:!1});return}}if(h.key==="Backspace"&&A.length===0){h.preventDefault(),g.current=!0;let de=[...s],F=B-1;if(B<de.length){de.splice(B,1);let me=N(de);if(F>=0){let R=Math.min(F,me.length-1);I(R,"end")}else r(null),a(null)}else F>=0&&I(F,"end");return}h.key==="Enter"?(h.preventDefault(),L(B,{focusPlaceholder:h.metaKey||h.ctrlKey,deleteEmpty:!0})):h.key==="Escape"&&(h.preventDefault(),Y())},[Y,L,s,N,I,x]),Z=Ln((B,h)=>{if(g.current){g.current=!1;return}let A=u.current.findIndex(k=>k===h.relatedTarget);L(B,{deleteEmpty:!1,focusIndex:A>=0?A:void 0})},[L]),_=Ln((B,h)=>{h.preventDefault(),o!==null?(g.current=!0,L(o,{focusIndex:B,focusMode:"select",deleteEmpty:!1})):I(B,"select")},[L,o,I]);return ho(vf,{children:[Lt("style",{children:`
|
|
2
|
+
import{createContext as Cm,useCallback as Bt,useContext as Em,useEffect as Tt,useMemo as co,useRef as en,useState as St}from"react";import{useCallback as ka,useEffect as Yc,useSyncExternalStore as Vc}from"react";var fn="http://localhost:1111";function Wc(){return typeof window<"u"?window.__POPMELT_PROJECT_ID__??null:null}function jc(e={}){let t=Wc();if(!t)return e;let n=new Headers(e.headers);return n.set("X-Popmelt-Project-Id",t),{...e,headers:n}}function ko(e,t={}){return fetch(e,jc(t))}function xn(e,t={},n=15e3){let o=new AbortController;t.signal&&t.signal.addEventListener("abort",()=>o.abort());let r=setTimeout(()=>o.abort(),n);return ko(e,{...t,signal:o.signal}).finally(()=>clearTimeout(r))}async function pa(e=fn){try{let t=await xn(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch{return null}}async function To(e=fn){try{let t=new AbortController,n=setTimeout(()=>t.abort(),2e3),o=await ko(`${e}/status`,{signal:t.signal});return clearTimeout(n),o.ok?await o.json():null}catch{return null}}async function ua(e){try{let t=new AbortController,n=setTimeout(()=>t.abort(),500),o=await ko(`http://localhost:${e}/status`,{signal:t.signal});return clearTimeout(n),o.ok?await o.json():null}catch{return null}}async function Gc(e){return To(e)}async function fa(e,t){if(e&&e!=="http://localhost:1111")try{let c=new URL(e),u=await Gc(e);if(!u&&!t)return null;if(!(!u&&t)){if(!(u&&t&&u.projectId!==t)){if(u?.projectId&&!t)return null;if(u)return{url:e,port:parseInt(c.port,10)||1111,projectId:u.projectId}}}}catch{if(!t)return null}let i=typeof window<"u"?window.location.origin:null,a=await ua(1111);if(a){if(t&&a.projectId===t)return{url:"http://localhost:1111",port:1111,projectId:a.projectId};if(a.devOrigin&&i&&a.devOrigin===i&&(t||!a.projectId))return{url:"http://localhost:1111",port:1111,projectId:a.projectId}}let s=Array.from({length:8},(c,u)=>{let p=1112+u;return ua(p).then(f=>f?{status:f,port:p}:null)}),l=(await Promise.all(s)).filter(c=>c!==null),d=[];a&&d.push({port:1111,devOrigin:a.devOrigin,projectId:a.projectId});for(let c of l)d.push({port:c.port,devOrigin:c.status.devOrigin,projectId:c.status.projectId});if(t){let c=d.find(u=>u.projectId===t);if(c)return{url:`http://localhost:${c.port}`,port:c.port,projectId:c.projectId}}if(i){let c=d.find(u=>u.devOrigin===i&&(t||!u.projectId));if(c)return{url:`http://localhost:${c.port}`,port:c.port,projectId:c.projectId}}return d.length===1&&!d[0].projectId?{url:`http://localhost:${d[0].port}`,port:d[0].port,projectId:d[0].projectId}:null}async function Qr(e=fn,t,n=-1){try{let o=await xn(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return o.ok?await o.json():null}catch{return null}}async function ga(e,t,n=fn,o,r,i,a,s){let l=new FormData;if(e instanceof Map){let c=!0;for(let[u,p]of e){let f=encodeURIComponent(u);l.append(`screenshot-${f}`,p,`screenshot-${f}.webp`),c&&(l.append("screenshot",p,"screenshot.webp"),c=!1)}c&&l.append("screenshot",new Blob([],{type:"image/webp"}),"screenshot.webp")}else l.append("screenshot",e,"screenshot.webp");if(l.append("feedback",t),o&&l.append("color",o),r&&l.append("provider",r),i&&l.append("model",i),s&&l.append("sourceId",s),a)for(let[c,u]of a)for(let p=0;p<u.length;p++)l.append(`image-${c}-${p}`,u[p],`image-${c}-${p}.webp`);let d=await xn(`${n}/send`,{method:"POST",body:l},3e4);if(!d.ok){let c=await d.text();throw new Error(`Bridge returned ${d.status}: ${c}`)}return d.json()}async function ma(e,t=fn){let n=await xn(`${t}/model/component`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})},1e4);if(!n.ok){let o=await n.text();throw new Error(`Bridge returned ${n.status}: ${o}`)}return n.json()}async function ha(e,t=fn){let n=await xn(`${t}/model/component`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})},1e4);if(!n.ok){let o=await n.text();throw new Error(`Bridge returned ${n.status}: ${o}`)}return n.json()}async function Vi(e,t,n=fn){let o=await xn(`${n}/model/token`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e,value:t})},1e4);if(!o.ok){let r=await o.text();throw new Error(`Bridge returned ${o.status}: ${r}`)}return o.json()}async function ya(e,t=fn){let n=await xn(`${t}/model/token`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e})},1e4);if(!n.ok){let o=await n.text();throw new Error(`Bridge returned ${n.status}: ${o}`)}return n.json()}async function mr(e=fn){try{let t=await xn(`${e}/model`,{},5e3);return t.ok?(await t.json()).model??null:null}catch{return null}}async function ba(e=fn){let t=await xn(`${e}/evals`,{},5e3);return t.ok?t.json():{version:1,updatedAt:0,cases:[]}}async function ei(e,t,n=fn){let o=await xn(`${n}/evals/${encodeURIComponent(e)}`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)},5e3);return o.ok?(await o.json()).eval??null:null}function va(e,t,n=fn){return ei(e,{status:t},n)}async function xa(e,t,n,o=fn,r,i,a){let s=new FormData;s.append("screenshot",t,"eval-run.webp"),s.append("feedback",JSON.stringify(n)),r&&s.append("provider",r),i&&s.append("model",i),a&&s.append("sourceId",a);let l=await xn(`${o}/evals/${encodeURIComponent(e)}/run`,{method:"POST",body:s},3e4);if(!l.ok){let d=await l.text();throw new Error(`Bridge returned ${l.status}: ${d}`)}return l.json()}function Jc(e){return new Promise(t=>setTimeout(t,e))}async function Ui(e=fn,t,n=15e3){let o=Date.now();try{let a=await xn(`${e}/restart`,{method:"POST"},5e3);if(!a.ok){let s=await a.text().catch(()=>"");return{ok:!1,error:s?`Bridge restart returned ${a.status}: ${s}`:`Bridge restart returned ${a.status}`,elapsedMs:Date.now()-o}}}catch(a){return{ok:!1,error:a instanceof Error?a.message:"Bridge restart request failed",elapsedMs:Date.now()-o}}let r=null;for(;Date.now()-o<n;)if(await Jc(350),r=await To(e),!!r?.ok&&!(t&&r.version!==t))return{ok:!0,status:r,elapsedMs:Date.now()-o};return{ok:!1,error:`Bridge did not come back${t?` with version ${t}`:""} within ${Math.round(n/1e3)}s`,status:r,elapsedMs:Date.now()-o}}async function Sa(e=fn){return(await Ui(e)).ok}async function wa(e=fn,t,n){let o=await xn(`${e}/model/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n})},1e4);if(!o.ok){let r=await o.text();throw new Error(`Bridge returned ${o.status}: ${r}`)}return o.json()}async function Ca(e=fn,t,n){let o=await xn(`${e}/evals/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n})},1e4);if(!o.ok){let r=await o.text();throw new Error(`Bridge returned ${o.status}: ${r}`)}return o.json()}async function Ea(e,t,n=fn,o,r,i,a,s){let l;if(a&&a.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:o,provider:r,model:i,sourceId:s}));for(let u=0;u<a.length;u++)d.append(`image-reply-${u}`,a[u],`reply-image-${u}.webp`);l=await xn(`${n}/reply`,{method:"POST",body:d},3e4)}else l=await xn(`${n}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:s})},3e4);if(!l.ok){let d=await l.text();throw new Error(`Bridge returned ${l.status}: ${d}`)}return l.json()}var Xi=typeof import.meta<"u"?import.meta.hot:void 0,ii=Xi?.data?.sourceId??(typeof localStorage<"u"&&localStorage.getItem("popmelt-source-id"))??(typeof crypto<"u"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2));Xi?.data&&(Xi.data.sourceId=ii);try{typeof localStorage<"u"&&localStorage.setItem("popmelt-source-id",ii)}catch{}function si(){return ii}var qi=typeof import.meta<"u"?import.meta.hot:void 0,Ko=qi?.data,Uc={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},br=Ko?.store??{...Uc},ni=Ko?.listeners??new Set,Uo=Ko?.activeEs??null,Zi=Ko?.activeBridgeUrl??null,Yo=null,oi=Ko?.connectionGeneration??0;qi?.data&&Object.defineProperties(qi.data,{store:{get:()=>br,configurable:!0},listeners:{get:()=>ni,configurable:!0},activeEs:{get:()=>Uo,configurable:!0},activeBridgeUrl:{get:()=>Zi,configurable:!0},connectionGeneration:{get:()=>oi,configurable:!0},discoveredBridgeUrl:{get:()=>Ho,configurable:!0},discoveredBridgeProjectId:{get:()=>Mo,configurable:!0}});var ri=new Set,yr=new Map,_o={};function Vo(e,t){if(!e)return!1;if(ri.has(e)){let o=yr.get(e);return o||(o=[],yr.set(e,o)),o.push({type:t.type??"",data:t}),!0}let n=_o[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function Kc(e,t,n){let o=()=>n!==oi;for(let r of t){if(o())return;ri.add(r),yr.set(r,[])}await Promise.all(t.map(async r=>{try{let i=await Qr(e,r);if(o())return;let a=yr.get(r)??[];if(i){if(on(s=>{let l={...s.jobResponses,[r]:i.accumulated.response},d={...s.jobThinking,[r]:i.accumulated.thinking},c=[...s.events];for(let u of i.events)u.type==="done"||u.type==="error"||c.push({type:u.type,data:u,timestamp:Date.now()});return{...s,jobResponses:l,jobThinking:d,currentResponse:r===s.activeJobId?i.accumulated.response:s.currentResponse,currentThinking:r===s.activeJobId?i.accumulated.thinking:s.currentThinking,events:c}}),_o[r]=i.currentSeq,!i.jobActive){let s=i.events.find(l=>l.type==="done"||l.type==="error");s&&Ki(s.type,s,r)}for(let s of a)typeof s.data.seq=="number"&&s.data.seq<=i.currentSeq||Ki(s.type,s.data,r)}else for(let s of a)Ki(s.type,s.data,r)}finally{ri.delete(r),yr.delete(r)}}))}function Ki(e,t,n){if(e==="delta"){let o=t.text||"";on(r=>({...r,jobResponses:{...r.jobResponses,[n]:(r.jobResponses[n]||"")+o},currentResponse:n===r.activeJobId?r.currentResponse+o:r.currentResponse,events:[...r.events,{type:"delta",data:t,timestamp:Date.now()}]}))}else if(e==="thinking"){let o=t.text||"";on(r=>({...r,jobThinking:{...r.jobThinking,[n]:(r.jobThinking[n]||"")+o},currentThinking:n===r.activeJobId?r.currentThinking+o:r.currentThinking,events:[...r.events,{type:"thinking",data:t,timestamp:Date.now()}]}))}else if(e==="done")delete _o[n],on(o=>{let r=o.activeJobIds.filter(d=>d!==n),i={...o.jobResponses},a={...o.jobThinking},s=i[n];delete i[n],delete a[n];let l=n===o.activeJobId?r.length>0?r[r.length-1]:null:o.activeJobId;return{...o,activeJobIds:r,activeJobId:l,jobResponses:i,jobThinking:a,lastCompletedJobId:n,lastResponseText:s||o.currentResponse||t.responseText||null,lastThreadId:t.threadId??null,...n===o.activeJobId?{currentResponse:l&&i[l]||"",currentThinking:l&&a[l]||""}:{},events:[...o.events,{type:"done",data:t,timestamp:Date.now()}]}});else if(e==="error"){delete _o[n];let o=t.message??"";on(r=>{let i=r.activeJobIds.filter(s=>s!==n),a=i.length>0?r.status:"error";return{...r,status:a,activeJobIds:i,lastCompletedJobId:n,lastErrorByJob:o?{...r.lastErrorByJob,[n]:o}:r.lastErrorByJob,events:[...r.events,{type:"error",data:t,timestamp:Date.now()}]}})}else on(o=>({...o,events:[...o.events,{type:e,data:t,timestamp:Date.now()}]}))}var Ho=Ko?.discoveredBridgeUrl??null,Mo=Ko?.discoveredBridgeProjectId??null,hr=null,ti=null;async function Xc(e,t){return Ho&&(t?Mo===t:!Mo)?Ho:(!t&&Mo&&(Ho=null,Mo=null),t&&Mo&&Mo!==t&&(Ho=null,Mo=null),hr&&ti===(t??null)||(ti=t??null,hr=fa(e,t).then(n=>(Ho=n?.url??null,Mo=n?.projectId??t??null,hr=null,ti=null,Ho)).catch(()=>(hr=null,ti=null,null))),hr)}function Ma(){return Ho}function Ta(){return br}function qc(e){return ni.add(e),()=>{ni.delete(e)}}function on(e){br=e(br);for(let t of ni)t()}function Zc(){return typeof window<"u"?window.__POPMELT_PROJECT_ID__??null:null}function Ia(e){if(Uo&&Uo.readyState!==EventSource.CLOSED&&Zi===e)return;Uo&&(Uo.close(),Uo=null),Yo&&(clearTimeout(Yo),Yo=null),Zi=e;let t=++oi,n=new URLSearchParams({sourceId:ii}),o=Zc();o&&n.set("projectId",o);let r=new EventSource(`${e}/events?${n.toString()}`);Uo=r;let i=()=>t!==oi;r.addEventListener("connected",()=>{i()||To(e).then(a=>{if(i())return;let s=a?.activeJobs??(a?.activeJob?[a.activeJob]:[]),l=new Set(s.map(v=>v.id)),d=a?.recentJobs??[],c=new Map(d.map(v=>[v.id,v])),u=s.length>0;on(v=>{let b={...v.lastErrorByJob},I=v.activeJobIds.filter(F=>!l.has(F));for(let F of I){let _=c.get(F);_?.status==="error"&&_.error&&(b[F]=_.error)}let D=v.activeJobIds.filter(F=>l.has(F));for(let F of l)D.includes(F)||D.push(F);let A={};for(let F of s)F.threadId&&(A[F.id]=F.threadId);return{...v,isConnected:!0,status:u?"streaming":I.length>0||v.status==="disconnected"?"idle":v.status,activeJobId:u?s[s.length-1].id:D.length>0?D[D.length-1]:null,activeJobIds:D,activeJobThreads:A,lastErrorByJob:b,lastCompletedJobId:I.length>0?I[I.length-1]:v.lastCompletedJobId}});let p=br.activeJobIds.filter(v=>!l.has(v)),f=[...Array.from(l),...p];f.length>0&&Kc(e,f,t).catch(()=>{})})}),r.addEventListener("job_started",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;if(Vo(l,s))return;let d=s.threadId;on(c=>({...c,status:"streaming",activeJobId:l,activeJobIds:c.activeJobIds.includes(l)?c.activeJobIds:[...c.activeJobIds,l],activeJobThreads:d?{...c.activeJobThreads,[l]:d}:c.activeJobThreads,jobResponses:{...c.jobResponses,[l]:c.jobResponses[l]??""},jobThinking:{...c.jobThinking,[l]:c.jobThinking[l]??""},currentResponse:c.jobResponses[l]??"",currentThinking:c.jobThinking[l]??"",lastResponseText:null,lastThreadId:null,events:[...c.events,{type:"job_started",data:s,timestamp:Date.now()}]}))}),r.addEventListener("delta",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;if(Vo(l,s))return;let d=s.text||"";on(c=>({...c,jobResponses:l?{...c.jobResponses,[l]:(c.jobResponses[l]||"")+d}:c.jobResponses,currentResponse:!l||l===c.activeJobId?c.currentResponse+d:c.currentResponse,events:[...c.events,{type:"delta",data:s,timestamp:Date.now()}]}))}),r.addEventListener("thinking",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;if(Vo(l,s))return;let d=s.text||"";on(c=>({...c,jobThinking:l?{...c.jobThinking,[l]:(c.jobThinking[l]||"")+d}:c.jobThinking,currentThinking:!l||l===c.activeJobId?c.currentThinking+d:c.currentThinking,events:[...c.events,{type:"thinking",data:s,timestamp:Date.now()}]}))}),r.addEventListener("tool_use",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;Vo(l,s)||on(d=>({...d,events:[...d.events,{type:"tool_use",data:s,timestamp:Date.now()}]}))}),r.addEventListener("done",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;Vo(l,s)||(l&&delete _o[l],on(d=>{let c=l?d.activeJobIds.filter(I=>I!==l):d.activeJobIds,u={...d.jobResponses},p={...d.jobThinking},f={...d.activeJobThreads},v=l?u[l]:void 0;l&&(delete u[l],delete p[l],delete f[l]);let b=l===d.activeJobId?c.length>0?c[c.length-1]:null:d.activeJobId;return{...d,activeJobIds:c,activeJobId:b,jobResponses:u,jobThinking:p,lastCompletedJobId:l??d.activeJobId,lastResponseText:v||d.currentResponse||s.responseText||null,lastThreadId:s.threadId??null,...l===d.activeJobId?{currentResponse:b&&u[b]||"",currentThinking:b&&p[b]||""}:{},events:[...d.events,{type:"done",data:s,timestamp:Date.now()}]}}))}),r.addEventListener("question",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;Vo(l,s)||on(d=>({...d,pendingQuestions:[...d.pendingQuestions,{jobId:s.jobId,threadId:s.threadId,question:s.question,annotationIds:s.annotationIds,timestamp:Date.now()}],events:[...d.events,{type:"question",data:s,timestamp:Date.now()}]}))}),r.addEventListener("capabilities_changed",()=>{i()||on(a=>({...a,capabilitiesVersion:a.capabilitiesVersion+1}))}),r.addEventListener("queue_drained",()=>{if(!i()){for(let a of Object.keys(_o))delete _o[a];ri.clear(),yr.clear(),on(a=>({...a,status:a.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}}),r.addEventListener("error",a=>{if(!i()){if(r.readyState===EventSource.CLOSED)on(s=>({...s,isConnected:!1,status:"disconnected"})),Yo&&(clearTimeout(Yo),Yo=null),Yo=setTimeout(()=>{To(e).then(s=>{s&&Ia(e)})},5e3);else if(a instanceof MessageEvent){let s=JSON.parse(a.data),l=s.jobId??null;if(Vo(l??void 0,s))return;l&&delete _o[l];let d=s.message??"";on(c=>{let u=l?c.activeJobIds.filter(f=>f!==l):c.activeJobIds,p=u.length>0?c.status:"error";return{...c,status:p,activeJobIds:u,lastCompletedJobId:l??c.activeJobId,lastErrorByJob:l&&d?{...c.lastErrorByJob,[l]:d}:c.lastErrorByJob,events:[...c.events,{type:"error",data:s,timestamp:Date.now()}]}})}}}),r.onerror=()=>{i()||r.readyState===EventSource.CLOSED&&on(a=>({...a,isConnected:!1,status:"disconnected"}))}}function Ra(e="http://localhost:1111",t=!0,n){let o=Vc(qc,Ta,Ta);Yc(()=>{t&&Xc(e,n).then(a=>{a&&To(a).then(s=>{s&&Ia(a)})})},[e,t,n]);let r=ka(()=>{on(()=>({...br,events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),i=ka(a=>{on(s=>({...s,pendingQuestions:s.pendingQuestions.filter(l=>l.threadId!==a)}))},[]);return{...o,clearEvents:r,dismissQuestion:i}}import{useEffect as Qc,useReducer as ed}from"react";var td={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 ai(){return Math.random().toString(36).substring(2,9)}function La(e){return e.status?e:e.captured?{...e,status:"in_flight"}:{...e,status:"pending"}}function Ln(e){return{...e,undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]}}function nd(e,t){return{...e,isAnnotating:t}}function od(e,t){return{...e,activeTool:t,inspectedElement:null}}function rd(e,t){return{...e,activeColor:t}}function id(e,t){return{...e,strokeWidth:t}}function sd(e,t){return{...e,currentPath:[t]}}function ad(e,t){return{...e,currentPath:[...e.currentPath,t]}}function ld(e){return{...e,currentPath:[]}}function cd(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return{...e,currentPath:[]};let n={id:ai(),type:e.activeTool,points:e.currentPath,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window<"u"?window.location.pathname:"/",groupId:t?.groupId,elements:t?.elements};return{...Ln(e),annotations:[...e.annotations,n],currentPath:[]}}function dd(e,t){let n={id:t.id??ai(),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<"u"?window.location.pathname:"/",groupId:t.groupId,linkedSelector:t.linkedSelector,linkedAnchor:t.linkedAnchor,elements:t.elements,...t.imageCount?{imageCount:t.imageCount}:{}};return{...t.groupId?e:Ln(e),annotations:[...e.annotations,n]}}function ud(e,t){return{...Ln(e),annotations:e.annotations.map(o=>o.id===t.id?{...o,text:t.text,...t.imageCount!=null?{imageCount:t.imageCount}:{}}:o)}}function pd(e,t){return{...e,annotations:e.annotations.map(n=>n.id===t.id?{...n,fontSize:Math.max(12,Math.min(72,t.fontSize))}:n)}}function fd(e,t){let n=Ln(e),r=e.annotations.find(i=>i.id===t.id)?.groupId;return{...n,annotations:e.annotations.filter(i=>i.id!==t.id&&!(r&&i.groupId===r))}}function gd(e,t){let n=t.saveUndo?Ln(e):e,r=e.annotations.find(i=>i.id===t.id)?.groupId;return{...n,annotations:e.annotations.map(i=>{if(!(i.id===t.id||r&&i.groupId===r))return i;let s=t.delta.x,l=t.delta.y;return{...i,points:i.points.map(d=>({x:d.x+s,y:d.y+l}))}})}}function md(e,t){let n=t.saveUndo?Ln(e):e,o=e.annotations.find(a=>a.id===t.id);if(!o||o.type==="text"||o.points.length<2)return e;let r=0,i=0;if(o.type==="rectangle"&&o.groupId){let a=t.points,s=Math.min(a[0].x,a[1].x),l=Math.max(a[0].y,a[1].y),d=o.points[0],c=o.points[o.points.length-1],u=Math.min(d.x,c.x),p=Math.max(d.y,c.y);r=s-u,i=l-p}return{...n,annotations:e.annotations.map(a=>a.id===t.id?{...a,points:t.points}:o.groupId&&a.groupId===o.groupId&&a.type==="text"?{...a,points:a.points.map(s=>({x:s.x+r,y:s.y+i}))}:a)}}function hd(e,t){return{...Ln(e),annotations:[...e.annotations,...t.annotations.map(La)]}}function yd(e,t){let n=new Set,o=[];for(let r of t.annotations)n.has(r.id)||(n.add(r.id),o.push(La(r)));return{...e,annotations:o}}function bd(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return{...e,annotations:t?.annotations||[],styleModifications:t?.styleModifications||[],spacingTokenMods:t?.spacingTokenMods||[],undoStack:e.undoStack.slice(0,-1),redoStack:[...e.redoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]}}function vd(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return{...e,annotations:t?.annotations||[],styleModifications:t?.styleModifications||[],spacingTokenMods:t?.spacingTokenMods||[],redoStack:e.redoStack.slice(0,-1),undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]}}function xd(e,t){let{id:n,addToSelection:o}=t;if(n===null)return{...e,selectedAnnotationIds:[],lastSelectedId:null};if(o)if(e.selectedAnnotationIds.includes(n)){let i=e.selectedAnnotationIds.filter(a=>a!==n);return{...e,selectedAnnotationIds:i,lastSelectedId:i.length>0?i[i.length-1]:null}}else return{...e,selectedAnnotationIds:[...e.selectedAnnotationIds,n],lastSelectedId:n};return{...e,selectedAnnotationIds:[n],lastSelectedId:n}}function Sd(e,t){let n=new Set;for(let o of e.selectedAnnotationIds){let r=e.annotations.find(i=>i.id===o);r?.groupId&&n.add(r.groupId)}return{...e,annotations:e.annotations.map(o=>{let r=e.selectedAnnotationIds.includes(o.id),i=o.groupId&&n.has(o.groupId);return!r&&!i?o:{...o,color:t.color}})}}function wd(e){return{...e,annotations:e.annotations.map(t=>({...t,captured:!0,status:t.status==="pending"||!t.status?"in_flight":t.status})),styleModifications:e.styleModifications.map(t=>({...t,captured:!0})),spacingTokenChanges:e.spacingTokenChanges.map(t=>({...t,captured:!0}))}}function Cd(e){return{...e,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]}}function Ed(e,t){return{...e,inspectedElement:t}}function kd(e,t){let{selector:n,element:o,property:r,original:i,modified:a}=t,s=e.styleModifications.findIndex(l=>l.selector===n);if(i===a&&s<0)return e;if(s>=0){let l=e.styleModifications[s];if(l.captured){let f=Ln(e),v=f.styleModifications.map((b,I)=>I===s?{...b,changes:[{property:r,original:i,modified:a}],captured:!1}:b);return{...f,styleModifications:v}}let d=l.changes.findIndex(f=>f.property===r),c,u=e;if(d>=0){let f=l.changes[d];a===f.original?c=l.changes.filter((v,b)=>b!==d):c=l.changes.map((v,b)=>b===d?{...v,modified:a}:v)}else{if(i===a)return e;u=Ln(e),c=[...l.changes,{property:r,original:i,modified:a}]}if(c.length===0)return{...u,styleModifications:u.styleModifications.filter((f,v)=>v!==s)};let p=u.styleModifications.map((f,v)=>v===s?{...f,changes:c}:f);return{...u,styleModifications:p}}else{let l=Ln(e),d={selector:n,element:o,changes:[{property:r,original:i,modified:a}]};return{...l,styleModifications:[...l.styleModifications,d]}}}function Td(e,t){let{selector:n,durableSelector:o,element:r,changes:i}=t,a=i.filter(d=>d.original!==d.modified);if(a.length===0)return e;let s=Ln(e),l=s.styleModifications.findIndex(d=>d.selector===n);if(l>=0){let d=s.styleModifications[l],c=d.captured?[]:[...d.changes];for(let u of a){let p=c.findIndex(f=>f.property===u.property);p>=0?u.modified===c[p].original?c=c.filter((f,v)=>v!==p):c=c.map((f,v)=>v===p?{...f,modified:u.modified}:f):c.push(u)}return c.length===0?{...s,styleModifications:s.styleModifications.filter((u,p)=>p!==l)}:{...s,styleModifications:s.styleModifications.map((u,p)=>p===l?{...u,changes:c,captured:!1}:u)}}else return{...s,styleModifications:[...s.styleModifications,{selector:n,durableSelector:o,element:r,changes:a}]}}function Md(e,t){let{selector:n,property:o}=t,r=Ln(e),i=r.styleModifications.map(a=>a.selector!==n?a:{...a,changes:a.changes.filter(s=>s.property!==o)}).filter(a=>a.changes.length>0);return{...r,styleModifications:i}}function Id(e){return e.styleModifications.length===0?{...e,inspectedElement:null}:{...Ln(e),styleModifications:[],inspectedElement:null}}function Rd(e,t){return{...e,styleModifications:t}}function Ld(e,t){let{updates:n}=t,o=new Map(n.map(r=>[r.id,r]));return{...e,annotations:e.annotations.map(r=>{let i=o.get(r.id);return i?{...r,points:[i.point,...r.points.slice(1)],...i.linkedAnchor?{linkedAnchor:i.linkedAnchor}:{}}:r})}}function Ad(e,t){let n=new Set(t.ids);return{...e,annotations:e.annotations.map(o=>n.has(o.id)?{...o,status:t.status}:o)}}function Pd(e,t){let n=new Set(t.ids),o=new Set;for(let r of e.annotations)n.has(r.id)&&r.groupId&&o.add(r.groupId);return{...e,annotations:e.annotations.map(r=>n.has(r.id)||r.groupId&&o.has(r.groupId)?{...r,threadId:t.threadId}:r)}}function Dd(e,t){let n=new Set(t.ids),o=new Set;for(let r of e.annotations)n.has(r.id)&&r.groupId&&o.add(r.groupId);return{...e,annotations:e.annotations.map(r=>n.has(r.id)||r.groupId&&o.has(r.groupId)?{...r,status:"waiting_input",question:t.question,threadId:t.threadId}:r)}}function Od(e,t){let n=new Map(t.resolutions.map(r=>[r.annotationId,r])),o=new Map;for(let r of e.annotations){let i=n.get(r.id);i&&r.groupId&&o.set(r.groupId,i)}return{...e,annotations:e.annotations.map(r=>{let i=n.get(r.id)||(r.groupId?o.get(r.groupId):void 0);return i?{...r,status:i.status,resolutionSummary:i.summary,scope:i.finalScope??i.inferredScope??null,replyCount:(r.replyCount??0)+1,question:void 0,threadId:r.threadId||t.threadId}:r})}}function Bd(e,t){let{linkedSelectors:n,styleSelectors:o}=t,r=new Set(n),i=new Set(o),a=new Set,s=new Set;for(let p of e.annotations)p.linkedSelector&&r.has(p.linkedSelector)&&(a.add(p.id),p.groupId&&s.add(p.groupId));for(let p of e.annotations)p.groupId&&s.has(p.groupId)&&a.add(p.id);let l=e.annotations.filter(p=>!a.has(p.id)),d=e.styleModifications.filter(p=>!i.has(p.selector));if(l.length===e.annotations.length&&d.length===e.styleModifications.length)return e;let c=e.selectedAnnotationIds.filter(p=>!a.has(p)),u=e.inspectedElement&&i.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return{...e,annotations:l,styleModifications:d,selectedAnnotationIds:c,lastSelectedId:c.length>0?c[c.length-1]:null,inspectedElement:u}}function Hd(e,t){let n=e.spacingTokenChanges.findIndex(o=>o.tokenPath===t.tokenPath);return n>=0?{...e,spacingTokenChanges:e.spacingTokenChanges.map((o,r)=>r===n?t:o)}:{...e,spacingTokenChanges:[...e.spacingTokenChanges,t]}}function _d(e,t){return{...e,spacingTokenChanges:t}}function Nd(e,t){let n=Ln(e),o=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),r;if(o>=0){let i=e.spacingTokenMods[o],a={...t,originalValue:i.originalValue,originalPx:i.originalPx};r=e.spacingTokenMods.map((s,l)=>l===o?a:s)}else r=[...e.spacingTokenMods,t];return{...n,spacingTokenMods:r}}function Fd(e,t){let n=Ln(e),o=e.spacingTokenMods.findIndex(l=>l.tokenPath===t.tokenPath),r=o>=0?e.spacingTokenMods[o].originalValue:t.originalValue,i=o>=0?e.spacingTokenMods[o].originalPx:parseFloat(t.originalValue)||0,a={tokenPath:t.tokenPath,originalValue:r,currentValue:"__deleted__",targets:o>=0?e.spacingTokenMods[o].targets:[],originalPx:i,currentPx:0},s;return o>=0?s=e.spacingTokenMods.map((l,d)=>d===o?a:l):s=[...e.spacingTokenMods,a],{...n,spacingTokenMods:s}}var zd={SET_ANNOTATING:nd,SET_TOOL:od,SET_COLOR:rd,SET_STROKE_WIDTH:id,START_PATH:sd,CONTINUE_PATH:ad,CANCEL_PATH:ld,FINISH_PATH:cd,ADD_TEXT:dd,UPDATE_TEXT:ud,UPDATE_TEXT_SIZE:pd,DELETE_ANNOTATION:fd,MOVE_ANNOTATION:gd,RESIZE_ANNOTATION:md,PASTE_ANNOTATIONS:hd,RESTORE_ANNOTATIONS:yd,UNDO:bd,REDO:vd,SELECT_ANNOTATION:xd,UPDATE_ANNOTATION_COLOR:Sd,MARK_CAPTURED:wd,CLEAR:Cd,SELECT_ELEMENT:Ed,MODIFY_STYLE:kd,MODIFY_STYLES_BATCH:Td,CLEAR_STYLE:Md,CLEAR_ALL_STYLES:Id,RESTORE_STYLE_MODIFICATIONS:Rd,UPDATE_LINKED_POSITIONS:Ld,CLEANUP_ORPHANED:Bd,SET_ANNOTATION_STATUS:Ad,SET_ANNOTATION_THREAD:Pd,SET_ANNOTATION_QUESTION:Dd,APPLY_RESOLUTIONS:Od,ADD_SPACING_TOKEN_CHANGE:Hd,RESTORE_SPACING_TOKEN_CHANGES:_d,MODIFY_SPACING_TOKEN:Nd,DELETE_SPACING_TOKEN:Fd};function $d(e,t){let n=zd[t.type];return n?n(e,t.payload):e}function Aa(){let[e,t]=ed($d,td);return Qc(()=>{let n=o=>{(o.metaKey||o.ctrlKey)&&o.key==="z"&&(o.preventDefault(),o.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<"u"&&!window.__popmeltPathPatch){window.__popmeltPathPatch=!0;for(let e of["pushState","replaceState"]){let t=History.prototype[e];History.prototype[e]=function(...n){let o=window.location.pathname;t.apply(this,n),window.dispatchEvent(new CustomEvent("popmelt:locationchange",{detail:{prevPath:o}}))}}}function jd(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function Gd(){return window.location.pathname}function vr(){return Wd(jd,Gd,()=>"/")}var Pa="popmelt-toolbar-snap-position";function Xo(e){return e.startsWith("top-")}function qo(e){return e.endsWith("-right")}function zr(e){return e.endsWith("-center")}function Da(){try{let e=localStorage.getItem(Pa);if(e&&Jd(e))return e}catch{}return"bottom-right"}function Oa(e){try{localStorage.setItem(Pa,e)}catch{}}function Jd(e){return["bottom-right","bottom-center","bottom-left","top-right","top-center","top-left"].includes(e)}function Ba(e,t,n){let o=Xo(e)?16:n-16-54;return zr(e)?{position:"fixed",top:o,left:t/2,transform:"translateX(-50%)"}:qo(e)?{position:"fixed",top:o,right:16,left:"auto"}:{position:"fixed",top:o,left:16,right:"auto"}}function Ha(e,t,n){let r=Xo(e)?{top:82}:{bottom:82},i;return zr(e)?i={left:t/2,transform:"translateX(-50%)"}:qo(e)?i={right:16}:i={left:16},{position:"fixed",...r,...i}}function _a(e,t,n){let o=Xo(e),r=o?{top:78}:{bottom:78},i,a;return zr(e)?(i={left:"50%",transform:"translateX(-50%)"},a="center"):qo(e)?(i={right:16},a="flex-end"):(i={left:16},a="flex-start"),{position:"fixed",...r,...i,zIndex:9999,display:"flex",flexDirection:"column",alignItems:a}}function li(e){let t=Xo(e),n=qo(e)||zr(e);return{position:"fixed",top:t&&n?82:16,right:16,bottom:!t&&n?82:16}}function Na(e,t,n){let r=Xo(e),i,a;qo(e)||zr(e)?(i=t-16,a=i-326):(a=16,i=a+326);let s=r?82:n-16-54-12;return{left:a,right:i,y:s}}var Fa=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"];import{domToCanvas as Yd}from"modern-screenshot";function Qi(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function es(e,t=[],n,o){let r=new Map,i=[];for(let s of e)if(s.groupId){let l=r.get(s.groupId)||[];l.push(s),r.set(s.groupId,l)}else i.push(s);let a=[];for(let[s,l]of r){let d=l.find(u=>u.type!=="text"),c=l.find(u=>u.type==="text");if(d){let u=d.linkedSelector||c?.linkedSelector,p=c?.imageCount||d.imageCount,f=d.pathname||c?.pathname;a.push({id:d.id,type:d.type,instruction:c?.text,...u?{linkedSelector:u}:{},...f?{pathname:f}:{},elements:d.elements||[],...p?{imageCount:p}:{}})}}for(let s of i)a.push({id:s.id,type:s.type,instruction:s.type==="text"?s.text:void 0,...s.linkedSelector?{linkedSelector:s.linkedSelector}:{},...s.pathname?{pathname:s.pathname}:{},elements:s.elements||[],...s.imageCount?{imageCount:s.imageCount}:{}});return{timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:a,styleModifications:t,...n?{inspectedElement:n}:{},...o&&o.length>0?{spacingTokenChanges:o}:{}}}function Vd(e){if(!e.points||e.points.length===0)return null;let t=e.points.map(o=>o.x),n=e.points.map(o=>o.y);return{minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)}}function Ud(e,t){if(e.length===0)return[];let n=e.map(c=>({annotation:c,bounds:Vd(c)})).filter(c=>c.bounds!==null);if(n.length===0)return[];n.sort((c,u)=>c.bounds.minY-u.bounds.minY);let o=Math.min(...n.map(c=>c.bounds.minY)),r=Math.max(...n.map(c=>c.bounds.maxY));if(r-o<=t){let c=(o+r)/2,u=Math.max(0,c-t/2);return[{top:u,bottom:u+t,annotations:e}]}let i=[],a=50,s=Math.max(0,o-a),l=[],d=s;for(let{annotation:c,bounds:u}of n){let p=u.maxY+a;if(p-s<=t)l.push(c),d=Math.max(d,p);else{if(l.length>0){let f=(s+d)/2,v=Math.max(0,f-t/2);i.push({top:v,bottom:v+t,annotations:l})}s=Math.max(0,u.minY-a),l=[c],d=u.maxY+a}}if(l.length>0){let c=(s+d)/2,u=Math.max(0,c-t/2);i.push({top:u,bottom:u+t,annotations:l})}return i}function Kd(e){let t=new Map;for(let n of e)if(n.linkedSelector)try{let o=document.querySelector(n.linkedSelector);if(o){let r=o.getBoundingClientRect();t.set(n.id,{x:r.left+window.scrollX,y:r.top+window.scrollY,width:r.width,height:r.height})}}catch{}return t}function Xd(e,t,n,o,r){if(e.save(),e.scale(o,o),r)for(let i of t){let a=r.get(i.id);if(!a)continue;let s=a.y-n;e.fillStyle=i.color,e.globalAlpha=.05,e.fillRect(a.x,s,a.width,a.height),e.globalAlpha=1,e.strokeStyle=i.color,e.lineWidth=1,e.setLineDash([2,4]),e.strokeRect(a.x,s,a.width,a.height),e.setLineDash([])}for(let i of t){let a=i.points.map(s=>({x:s.x,y:s.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(a.length<2)break;e.beginPath(),e.moveTo(a[0].x,a[0].y);for(let s=1;s<a.length;s++)e.lineTo(a[s].x,a[s].y);e.stroke();break;case"line":if(a.length<2)break;e.beginPath(),e.moveTo(a[0].x,a[0].y),e.lineTo(a[a.length-1].x,a[a.length-1].y),e.stroke();break;case"rectangle":{if(a.length<2)break;let s=a[0],l=a[a.length-1],d=Math.min(s.x,l.x),c=Math.min(s.y,l.y),u=Math.abs(l.x-s.x),p=Math.abs(l.y-s.y);e.strokeRect(d,c,u,p);break}case"circle":{if(a.length<2)break;let s=a[0],l=a[a.length-1],d=(s.x+l.x)/2,c=(s.y+l.y)/2,u=Math.abs(l.x-s.x)/2,p=Math.abs(l.y-s.y)/2;e.beginPath(),e.ellipse(d,c,u,p,0,0,Math.PI*2),e.stroke();break}case"text":{if(!i.text||a.length<1)break;let s=a[0],l=i.fontSize||16;e.font=`${l}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=i.color;let c=(i.imageCount&&i.imageCount>0?`[${i.imageCount} image${i.imageCount>1?"s":""}] ${i.text}`:i.text).split(`
|
|
3
|
+
`),u=l*1.2,p=4,f=0;for(let v of c)f=Math.max(f,e.measureText(v).width);e.fillRect(s.x-p,s.y-p,f+p*2,c.length*u+p*2),e.fillStyle="#ffffff",c.forEach((v,b)=>{e.fillText(v,s.x,s.y+l+b*u)});break}}}e.restore()}async function xr(e,t,n=[],o){try{let r=o?.dpr??(window.devicePixelRatio||1),i=window.innerWidth,a=window.innerHeight,s=n.filter(u=>(u.status??"pending")==="pending");console.log("[Screenshot] Starting capture with",s.length,"active annotations (filtered",n.length-s.length,"captured)");let l=Kd(s),d=Ud(s,a);if(d.length===0){let u=await za(e,[],window.scrollY,i,a,r,l);return u?[u]:[]}let c=[];for(let u=0;u<d.length;u++){let p=d[u],f=await za(e,p.annotations,p.top,i,a,r,l);f?c.push(f):console.warn(`[Screenshot] Region ${u+1} failed to capture`)}return console.log("[Screenshot] Capture complete"),c}catch(r){return console.error("[Screenshot] Capture failed:",r),[]}}async function za(e,t,n,o,r,i,a){try{let s=getComputedStyle(document.documentElement).backgroundColor,d=await Yd(e,{filter:p=>!(p instanceof HTMLElement&&(p.id==="devtools-canvas"||p.id==="devtools-toolbar"||p.id==="devtools-scrim"||p.dataset.devtools!==void 0)),scale:i,backgroundColor:s&&s!=="rgba(0, 0, 0, 0)"&&s!=="transparent"?s:"#ffffff",width:o,height:r,style:{transform:`translate(${-window.scrollX}px, ${-n}px)`}}),c=document.createElement("canvas");c.width=o*i,c.height=r*i;let u=c.getContext("2d");return u?(u.drawImage(d,0,0,o*i,r*i,0,0,o*i,r*i),Xd(u,t,n,i,a),new Promise(p=>{c.toBlob(f=>p(f),"image/webp",.8)})):null}catch(s){return console.error("Region capture failed:",s),null}}async function $r(e){if(e.length===0)return null;if(e.length===1)return e[0];let t=await Promise.all(e.map(s=>new Promise((l,d)=>{let c=new Image;c.onload=()=>l(c),c.onerror=d,c.src=URL.createObjectURL(s)}))),n=t[0].width,o=t.reduce((s,l)=>s+l.height,0),r=document.createElement("canvas");r.width=n,r.height=o;let i=r.getContext("2d");if(!i)return null;let a=0;for(let s of t)i.drawImage(s,0,a),a+=s.height,URL.revokeObjectURL(s.src);return new Promise(s=>{r.toBlob(l=>s(l),"image/webp",.8)})}async function $a(e,t,n){try{let o=Array.isArray(e)?e:[e];if(o.length===0)return!1;let r=await $r(o);if(!r)return!1;let i=r;if(r.type!=="image/png"){let d=new Image,c=URL.createObjectURL(r);await new Promise(p=>{d.onload=()=>p(),d.src=c}),URL.revokeObjectURL(c);let u=document.createElement("canvas");u.width=d.naturalWidth,u.height=d.naturalHeight,u.getContext("2d").drawImage(d,0,0),i=await new Promise(p=>u.toBlob(f=>p(f),"image/png"))}let a={"image/png":i},s=t&&t.length>0,l=n&&n.length>0;if(s||l){let d=t?t.filter(c=>(c.status??"pending")==="pending"):[];if(d.length>0||l){let c=es(d,n||[]),u=new Blob([JSON.stringify(c,null,2)],{type:"text/plain"});a["text/plain"]=u}}return await navigator.clipboard.write([new ClipboardItem(a)]),!0}catch(o){return console.warn("Clipboard write failed:",o),!1}}var ci="0.7.4";import{useCallback as sn,useEffect as bn,useMemo as Ai,useRef as Xt,useState as dt}from"react";import{useCallback as Cr,useRef as Zd}from"react";function ts(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let a=(r.x+i.x)/2,s=(r.y+i.y)/2,l=Math.abs(i.x-r.x)/2,d=Math.abs(i.y-r.y)/2;e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.ellipse(a,s,l,d,0,0,Math.PI*2),e.stroke()}function ns(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!(!r||!i)){e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.moveTo(r.x,r.y);for(let a=1;a<t.length-1;a++){let s=t[a],l=t[a+1];if(!s||!l)continue;let d=(s.x+l.x)/2,c=(s.y+l.y)/2;e.quadraticCurveTo(s.x,s.y,d,c)}e.lineTo(i.x,i.y),e.stroke()}}function os(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];!r||!i||(e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.moveTo(r.x,r.y),e.lineTo(i.x,i.y),e.stroke())}function rs(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let a=Math.min(r.x,i.x),s=Math.min(r.y,i.y),l=Math.abs(i.x-r.x),d=Math.abs(i.y-r.y);e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.strokeRect(a,s,l,d)}var Kt='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function qd(e,t,n){if(!t||e.measureText(t).width<=n)return[t];let o=t.split(/\s+/),r=[],i="";for(let a of o){let s=i?i+" "+a:a;i&&e.measureText(s).width>n?(r.push(i),i=a):i=s}return i&&r.push(i),r.length>0?r:[t]}function Sr(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function Wa(e,t,n){let o=[];for(let r of t)o.push(...qd(e,r,n));return o}function wr(e,t,n){if(e.measureText(t).width<=n)return t;let o="\u2026";for(let r=t.length-1;r>0;r--){let i=t.slice(0,r)+o;if(e.measureText(i).width<=n)return i}return o}function ja(e,t,n,o,r=12,i,a){if(!n)return;let s=r*1.4,l=n.replace(/\n/g," "),d=i!==void 0?i+". "+l:l;e.font=`${r}px ${Kt}`,e.textBaseline="middle";let c=a!==void 0?Math.min(400,Math.max(60,window.innerWidth-a-16)):400,u=wr(e,d,c),p=e.measureText(u).width;e.fillStyle=o,e.fillRect(t.x-4,t.y-4,p+8,s+8),e.fillStyle="#ffffff",e.fillText(u,t.x,t.y+s/2)}var Ga=11,is=4,Qd=`600 ${Ga}px system-ui, -apple-system, sans-serif`;function ss(e,t,n){return e.map(o=>({x:o.x-t,y:o.y-n}))}function eu(e,t,n,o,r,i){let a=String(o);e.font=Qd;let l=e.measureText(a).width+is*2,d=Ga+is*2,c=t-l/2,u=n+i/2+2;e.fillStyle=r,e.fillRect(c,u,l,d),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(a,c+is,u+d/2)}function tu(e,t){if(e.points.length<2&&e.type!=="text")return null;switch(e.type){case"rectangle":case"freehand":{let n,o;if(e.type==="freehand")n=Math.min(...e.points.map(r=>r.x)),o=Math.max(...e.points.map(r=>r.y));else{let r=e.points[0],i=e.points[e.points.length-1];n=Math.min(r.x,i.x),o=Math.max(r.y,i.y)}return{x:n,y:o}}case"circle":{let n=e.points[0],o=e.points[e.points.length-1],r=Math.min(n.x,o.x),i=(Math.min(n.y,o.y)+Math.max(n.y,o.y))/2;return{x:r,y:i}}case"line":{let n=e.points[0],o=e.points[e.points.length-1],r=n.y>o.y?n:o;return{x:r.x,y:r.y}}default:return null}}function Ja(){let e=Zd(null),t=Cr(()=>{let s=e.current;if(!s)return;let l=s.getContext("2d");l&&l.clearRect(0,0,s.width,s.height)},[]),n=Cr((s,l,d)=>{let c=e.current;if(!c)return;let u=c.getContext("2d");if(!u)return;let f=(s.status??(s.captured?"in_flight":"pending"))==="pending"||d?s.color:"#999999";switch(s.type){case"freehand":ns(u,s.points,f,s.strokeWidth);break;case"line":os(u,s.points,f,s.strokeWidth);break;case"rectangle":rs(u,s.points,f,s.strokeWidth);break;case"circle":ts(u,s.points,f,s.strokeWidth);break;case"text":s.text&&s.points[0]&&ja(u,s.points[0],s.text,f,s.fontSize,l,s.points[0].x);break}},[]),o=Cr((s,l,d,c)=>{let u=e.current;if(!u||s.length<2)return;let p=u.getContext("2d");if(p)switch(l){case"freehand":ns(p,s,d,c);break;case"line":os(p,s,d,c);break;case"rectangle":rs(p,s,d,c);break;case"circle":ts(p,s,d,c);break}},[]),r=Cr((s,l)=>{let d=e.current;if(!d||s.points.length<2)return;let c=d.getContext("2d");if(c){if(c.fillStyle="#ffffff",c.strokeStyle=s.color,c.lineWidth=1.5,s.type==="line"){let u=s.points[0],p=s.points[s.points.length-1];[u,p].forEach(f=>{c.beginPath(),c.arc(f.x,f.y,l/2,0,Math.PI*2),c.fill(),c.stroke()});return}if(s.type==="circle"){let u=s.points[0],p=s.points[s.points.length-1],f=Math.min(u.x,p.x),v=Math.max(u.x,p.x),b=Math.min(u.y,p.y),I=Math.max(u.y,p.y),D=(f+v)/2,A=(b+I)/2;[{x:D,y:b},{x:D,y:I},{x:f,y:A},{x:v,y:A}].forEach(_=>{c.beginPath(),c.rect(_.x-l/2,_.y-l/2,l,l),c.fill(),c.stroke()});return}if(s.type==="rectangle"||s.type==="freehand"){let u,p,f,v;if(s.type==="freehand")u=Math.min(...s.points.map(I=>I.x)),p=Math.max(...s.points.map(I=>I.x)),f=Math.min(...s.points.map(I=>I.y)),v=Math.max(...s.points.map(I=>I.y));else{let I=s.points[0],D=s.points[s.points.length-1];u=Math.min(I.x,D.x),p=Math.max(I.x,D.x),f=Math.min(I.y,D.y),v=Math.max(I.y,D.y)}[{x:u,y:f},{x:p,y:f},{x:u,y:v},{x:p,y:v}].forEach(I=>{c.beginPath(),c.rect(I.x-l/2,I.y-l/2,l,l),c.fill(),c.stroke()})}}},[]),i=Cr((s,l,d,c,u,p,f,v=0,b=0,I,D)=>{if(t(),s.forEach(A=>{let F={...A,points:ss(A.points,v,b)},_=I?.get(A.id),R=D?.has(A.id)??!1;n(F,_,R)}),l.length>0){let A=ss(l,v,b);o(A,d,c,u)}if(p&&p.length>0&&f){let F=e.current?.getContext("2d");for(let _ of p){let R=s.find(Y=>Y.id===_);if(R){let Y={...R,points:ss(R.points,v,b)};if(r(Y,f),F&&R.type!=="text"&&I&&!(R.groupId&&s.some(k=>k.groupId===R.groupId&&k.type==="text"))){let k=I.get(R.id);if(k!==void 0){let w=tu(Y,f);if(w){let h=(R.status??(R.captured?"in_flight":"pending"))==="pending"?R.color:"#999999";eu(F,w.x,w.y,k,h,f)}}}}}}},[t,n,o,r]),a=Cr(()=>{let s=e.current;if(!s)return;let l=window.devicePixelRatio||1;s.width=window.innerWidth*l,s.height=window.innerHeight*l;let d=s.getContext("2d");d&&d.scale(l,l)},[]);return{canvasRef:e,clearCanvas:t,drawAnnotation:n,drawCurrentPath:o,redrawAll:i,resizeCanvas:a}}import{useEffect as nu,useRef as ou}from"react";function Ya(){let e=ou({shift:!1,cmd:!1});return nu(()=>{let t=r=>{r.key==="Shift"&&(e.current.shift=!0),(r.key==="Meta"||r.key==="Control")&&(e.current.cmd=!0)},n=r=>{r.key==="Shift"&&(e.current.shift=!1),(r.key==="Meta"||r.key==="Control")&&(e.current.cmd=!1)},o=()=>{e.current={shift:!1,cmd:!1}};return window.addEventListener("keydown",t,!0),window.addEventListener("keyup",n,!0),window.addEventListener("blur",o),()=>{window.removeEventListener("keydown",t,!0),window.removeEventListener("keyup",n,!0),window.removeEventListener("blur",o)}},[]),e}import{useEffect as ru}from"react";function Va(e,t,n,o,r){ru(()=>{let i=a=>{if(e){if(e.linkedSelector)return;a.preventDefault(),a.stopPropagation();let l=a.deltaY>0?-2:2;t(d=>d?{...d,fontSize:Math.max(12,Math.min(72,d.fontSize+l))}:null);return}if(!n)return;a.preventDefault();let s=o.find(l=>l.id===n);if(s&&s.type==="text"&&!s.linkedSelector){let l=s.fontSize||12,d=a.deltaY>0?-2:2;r({type:"UPDATE_TEXT_SIZE",payload:{id:n,fontSize:l+d}})}};return window.addEventListener("wheel",i,{passive:!1}),()=>{window.removeEventListener("wheel",i)}},[n,e,o,r,t])}import{useCallback as ll,useEffect as Si,useRef as cl,useState as Jr}from"react";function di(e){let t=Object.keys(e).find(r=>r.startsWith("__reactFiber$")||r.startsWith("__reactInternalInstance$"));if(!t)return null;let n=e[t],o=[];for(;n;){let r=n.type,i=r?.displayName||r?.name;i&&typeof i=="string"&&/^[A-Z]/.test(i)&&!i.startsWith("_")&&i!=="Fragment"&&o.unshift(i),n=n.return}return o.length>0?{name:o[o.length-1],path:o}:null}function as(e){let t=Object.keys(e).find(r=>r.startsWith("__reactFiber$")||r.startsWith("__reactInternalInstance$"));if(!t)return[];let n=e[t],o=[];for(;n;){let r=n.type,i=typeof r=="function"||typeof r=="object"?r?.displayName||r?.name:null;i&&typeof i=="string"&&/^[A-Z]/.test(i)&&!i.startsWith("_")&&i!=="Fragment"&&o.push({name:i,fiber:n}),n=n.return}return o.reverse(),o}function ui(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 Ua(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 Fn(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 o=n.tagName.toLowerCase();if(n.id&&!n.id.startsWith("radix-")&&!n.id.startsWith(":")){t.unshift(`#${CSS.escape(n.id)}`);break}let r=Array.from(n.classList).filter(a=>!a.startsWith("_")&&a.length<30).slice(0,2);r.length>0&&(o+="."+r.map(a=>CSS.escape(a)).join("."));let i=n.parentElement;if(i){let a=Array.from(i.children).filter(s=>s.tagName===n.tagName);if(a.length>1){let s=a.indexOf(n)+1;o+=`:nth-of-type(${s})`}}t.unshift(o),n=i}return t.join(" > ")}function An(e){try{return document.querySelector(e)}catch{return null}}function pi(e,t=0){let n=as(e);if(n.length===0)return null;let o=n.map(l=>l.name),r=n.length-1,i=Math.max(0,Math.min(n.length-1,r-t)),a=n[i],s=ui(a.fiber)??e;return{name:a.name,path:o,depthIndex:i,rootElement:s}}function Ka(e,t){let n=as(e),o=t.toLowerCase(),r=-1;for(let i=n.length-1;i>=0;i--){let a=n[i].name;if(a===t){let s=ui(n[i].fiber)??e;return{name:t,path:n.map(l=>l.name),depthIndex:i,rootElement:s}}if(r===-1){let s=a.toLowerCase();(s.length>=4&&o.includes(s)||o.length>=4&&s.includes(o))&&(r=i)}}if(r>=0){let i=ui(n[r].fiber)??e;return{name:t,path:n.map(a=>a.name),depthIndex:r,rootElement:i}}return null}function Er(e){let t=kr(),n=[],o=new Set,r=t.currentNode;for(;r=t.nextNode();){let i=Ka(r,e);i&&!o.has(i.rootElement)&&(o.add(i.rootElement),n.push(i))}return n}function ls(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),o=kr(),r=new Set,i=o.currentNode;for(;(i=o.nextNode())&&n.size>0;)for(let a of n){let s=Ka(i,a);if(!s||r.has(s.rootElement))continue;r.add(s.rootElement);let l=s.rootElement.getBoundingClientRect();t.set(a,l.top+window.scrollY),n.delete(a);break}for(let a of n)t.set(a,1/0);return t}function kr(){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 Pn(e){let t={selector:Ua(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=Xa(e);n&&n.length>0&&n.length<200&&(t.textContent=n);let o={};for(let a of e.attributes)a.name.startsWith("data-")&&(o[a.name]=a.value);Object.keys(o).length>0&&(t.dataAttributes=o);let r=di(e);r&&(t.reactComponent=r.name);let i=iu(e);return i&&(t.context=i),t}function Xa(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function Zo(e,t){let n=document.elementsFromPoint(e,t);for(let o of n)if(o instanceof HTMLElement&&!(o.id==="devtools-canvas"||o.id==="devtools-toolbar"||o.id==="devtools-scrim")&&!o.closest("#devtools-toolbar")&&!(o.dataset.devtools||o.closest("[data-devtools]"))&&!["html","body"].includes(o.tagName.toLowerCase()))return o;return null}function iu(e){let t=e.parentElement,n=["section","article","nav","aside","header","footer","main"];for(;t&&t!==document.body;){let o=t.tagName.toLowerCase();if(n.includes(o)&&t.id)return`${o}#${t.id}`;if(t.id&&!t.id.startsWith("radix-")&&!t.id.startsWith(":"))return`${o}#${t.id}`;t=t.parentElement}return null}function qa(e){let t=new Set,n=[],o=window.scrollX,r=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 a of i){let s=a.x-o,l=a.y-r;if(s<0||l<0||s>window.innerWidth||l>window.innerHeight)continue;let d=Zo(s,l);d&&!t.has(d)&&(t.add(d),n.push(Pn(d)))}return n.slice(0,3)}function cs(e){if(e.length===0)return[];let t=e.map(o=>o.x),n=e.map(o=>o.y);return qa({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function rn(e,t){return e.style.getPropertyValue(t)!==""}function su(e,t=30){if(e<=0)return[];let n=[],o=kr(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let a=i,s=a.getBoundingClientRect();if(s.bottom<-50||s.top>window.innerHeight+50||s.right<-50||s.left>window.innerWidth+50||s.width<1||s.height<1)continue;let l=getComputedStyle(a);!rn(a,"padding-top")&&Math.abs((parseFloat(l.paddingTop)||0)-e)<r&&n.push({element:a,property:"padding-top"}),!rn(a,"padding-bottom")&&Math.abs((parseFloat(l.paddingBottom)||0)-e)<r&&n.length<t&&n.push({element:a,property:"padding-bottom"}),!rn(a,"padding-left")&&Math.abs((parseFloat(l.paddingLeft)||0)-e)<r&&n.length<t&&n.push({element:a,property:"padding-left"}),!rn(a,"padding-right")&&Math.abs((parseFloat(l.paddingRight)||0)-e)<r&&n.length<t&&n.push({element:a,property:"padding-right"}),!rn(a,"margin-top")&&Math.abs((parseFloat(l.marginTop)||0)-e)<r&&n.length<t&&n.push({element:a,property:"margin-top"}),!rn(a,"margin-bottom")&&Math.abs((parseFloat(l.marginBottom)||0)-e)<r&&n.length<t&&n.push({element:a,property:"margin-bottom"}),!rn(a,"margin-left")&&Math.abs((parseFloat(l.marginLeft)||0)-e)<r&&n.length<t&&n.push({element:a,property:"margin-left"}),!rn(a,"margin-right")&&Math.abs((parseFloat(l.marginRight)||0)-e)<r&&n.length<t&&n.push({element:a,property:"margin-right"});let d=l.display;if((d.includes("flex")||d.includes("grid"))&&n.length<t){let c=rn(a,"gap"),u=parseFloat(l.gap)||0,p=parseFloat(l.rowGap)||0,f=parseFloat(l.columnGap)||0;!c&&Math.abs(u-e)<r?n.push({element:a,property:"gap"}):!rn(a,"row-gap")&&Math.abs(p-e)<r?n.push({element:a,property:"row-gap"}):!rn(a,"column-gap")&&Math.abs(f-e)<r&&n.push({element:a,property:"column-gap"})}}return n}function ds(e,t=30){if(e<=0)return[];let n=[],o=kr(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let a=i,s=a.getBoundingClientRect();if(s.bottom<-50||s.top>window.innerHeight+50||s.right<-50||s.left>window.innerWidth+50||s.width<1||s.height<1)continue;let l=getComputedStyle(a),d=parseFloat(l.borderTopWidth)||0,c=parseFloat(l.borderRightWidth)||0,u=parseFloat(l.borderBottomWidth)||0,p=parseFloat(l.borderLeftWidth)||0,f=a.clientWidth,v=a.clientHeight,b=parseFloat(l.paddingTop)||0;!rn(a,"padding-top")&&Math.abs(b-e)<r&&n.push({x:s.left+p,y:s.top+d,width:f,height:e,direction:"vertical",property:"padding-top"});let I=parseFloat(l.paddingBottom)||0;!rn(a,"padding-bottom")&&Math.abs(I-e)<r&&n.length<t&&n.push({x:s.left+p,y:s.top+d+v-e,width:f,height:e,direction:"vertical",property:"padding-bottom"});let D=parseFloat(l.paddingLeft)||0;!rn(a,"padding-left")&&Math.abs(D-e)<r&&n.length<t&&n.push({x:s.left+p,y:s.top+d,width:e,height:v,direction:"horizontal",property:"padding-left"});let A=parseFloat(l.paddingRight)||0;!rn(a,"padding-right")&&Math.abs(A-e)<r&&n.length<t&&n.push({x:s.left+p+f-e,y:s.top+d,width:e,height:v,direction:"horizontal",property:"padding-right"});let F=parseFloat(l.marginTop)||0;!rn(a,"margin-top")&&Math.abs(F-e)<r&&n.length<t&&n.push({x:s.left,y:s.top-e,width:s.width,height:e,direction:"vertical",property:"margin-top"});let _=parseFloat(l.marginBottom)||0;!rn(a,"margin-bottom")&&Math.abs(_-e)<r&&n.length<t&&n.push({x:s.left,y:s.bottom,width:s.width,height:e,direction:"vertical",property:"margin-bottom"});let R=parseFloat(l.marginLeft)||0;!rn(a,"margin-left")&&Math.abs(R-e)<r&&n.length<t&&n.push({x:s.left-e,y:s.top,width:e,height:s.height,direction:"horizontal",property:"margin-left"});let Y=parseFloat(l.marginRight)||0;!rn(a,"margin-right")&&Math.abs(Y-e)<r&&n.length<t&&n.push({x:s.right,y:s.top,width:e,height:s.height,direction:"horizontal",property:"margin-right"});let ee=l.display;if((ee.includes("flex")||ee.includes("grid"))&&n.length<t&&!rn(a,"gap")){let w=Array.from(a.children).filter(L=>{let h=getComputedStyle(L);return h.display!=="none"&&h.position!=="absolute"&&h.position!=="fixed"});if(w.length>=2)for(let L=0;L<w.length-1&&n.length<t;L++){let h=w[L].getBoundingClientRect(),C=w[L+1].getBoundingClientRect(),M=C.top-h.bottom;Math.abs(M-e)<r&&M>.5&&n.push({x:Math.min(h.left,C.left),y:h.bottom,width:Math.max(h.right,C.right)-Math.min(h.left,C.left),height:M,direction:"vertical",property:"gap"});let ae=C.left-h.right;Math.abs(ae-e)<r&&ae>.5&&n.push({x:h.right,y:Math.min(h.top,C.top),width:ae,height:Math.max(h.bottom,C.bottom)-Math.min(h.top,C.top),direction:"horizontal",property:"gap"})}}}return n}function fi(e){return typeof e=="string"?{value:e}:e}var Qa={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 Za(e,t){let n=Qa[t];return n?n.includes(e):!1}function au(e,t){let n=e.split(/\s+/);for(let o of n){if(o===t)return!0;let r=o.lastIndexOf(":");if(r>=0&&o.slice(r+1)===t)return!0}return!1}function lu(e){let t=e.lastIndexOf(":"),n=t>=0?e.slice(t+1):e,o=n.indexOf("-");if(o<0)return null;let r=n.slice(0,o),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"},a=n.slice(0,n.indexOf("-",o+1)>0?n.indexOf("-",o+1):o);return i[a]??i[r]??null}function us(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let r=[],i=kr(),a=i.currentNode;for(;(a=i.nextNode())&&r.length<t;){let s=a,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 d=s.className;if(typeof d=="string")for(let c of e.bindings){if(!au(d,c))continue;let u=lu(c);if(u&&!(e.property&&!Za(u,e.property))){r.push({element:s,property:u});break}}}return r}let o=su(n,t*2);return e.property?o.filter(r=>Za(r.property,e.property)).slice(0,t):o.slice(0,t)}function ps(e,t=30){let n=us(e,t),o=[];for(let r of n){let i=r.element,a=i.getBoundingClientRect(),s=getComputedStyle(i),l=parseFloat(s.borderTopWidth)||0,d=parseFloat(s.borderRightWidth)||0,c=parseFloat(s.borderLeftWidth)||0,u=i.clientWidth,p=i.clientHeight;switch(r.property){case"padding-top":{let f=parseFloat(s.paddingTop)||0;o.push({x:a.left+c,y:a.top+l,width:u,height:f,direction:"vertical",property:r.property});break}case"padding-bottom":{let f=parseFloat(s.paddingBottom)||0;o.push({x:a.left+c,y:a.top+l+p-f,width:u,height:f,direction:"vertical",property:r.property});break}case"padding-left":{let f=parseFloat(s.paddingLeft)||0;o.push({x:a.left+c,y:a.top+l,width:f,height:p,direction:"horizontal",property:r.property});break}case"padding-right":{let f=parseFloat(s.paddingRight)||0;o.push({x:a.left+c+u-f,y:a.top+l,width:f,height:p,direction:"horizontal",property:r.property});break}case"margin-top":{let f=parseFloat(s.marginTop)||0;o.push({x:a.left,y:a.top-f,width:a.width,height:f,direction:"vertical",property:r.property});break}case"margin-bottom":{let f=parseFloat(s.marginBottom)||0;o.push({x:a.left,y:a.bottom,width:a.width,height:f,direction:"vertical",property:r.property});break}case"margin-left":{let f=parseFloat(s.marginLeft)||0;o.push({x:a.left-f,y:a.top,width:f,height:a.height,direction:"horizontal",property:r.property});break}case"margin-right":{let f=parseFloat(s.marginRight)||0;o.push({x:a.right,y:a.top,width:f,height:a.height,direction:"horizontal",property:r.property});break}case"gap":case"row-gap":case"column-gap":{let f=Array.from(i.children).filter(v=>{let b=getComputedStyle(v);return b.display!=="none"&&b.position!=="absolute"&&b.position!=="fixed"});for(let v=0;v<f.length-1&&o.length<t;v++){let b=f[v].getBoundingClientRect(),I=f[v+1].getBoundingClientRect(),D=I.top-b.bottom;D>.5&&o.push({x:Math.min(b.left,I.left),y:b.bottom,width:Math.max(b.right,I.right)-Math.min(b.left,I.left),height:D,direction:"vertical",property:"gap"});let A=I.left-b.right;A>.5&&o.push({x:b.right,y:Math.min(b.top,I.top),width:A,height:Math.max(b.bottom,I.bottom)-Math.min(b.top,I.top),direction:"horizontal",property:"gap"})}break}}}return o}function el(e,t){let n=new Set,o=Wr(t);for(let r of e){let i=nl[r.property];if(!i)continue;let a=r.element.className;if(typeof a=="string")for(let s of i){let l=`${s}-${o}`;for(let d of a.split(/\s+/)){let c=d.lastIndexOf(":"),u=c>=0?d.slice(c+1):d;if(u===l){n.add(u);break}}}}return[...n]}function tl(e){let t=new Set;for(let n of e)for(let[o,r]of Object.entries(Qa))if(r.includes(n.property)){t.add(o);break}if(t.size===1)return[...t][0]}function fs(e,t,n){if(t===n)return e;let o=Wr(t),r=Wr(n);return e.map(i=>{let a=i.lastIndexOf("-");if(a<0)return i;let s=i.slice(0,a),l=i.slice(a+1);return l===o||l===`[${t}px]`?`${s}-${r}`:i})}var cu={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 Wr(e){return cu[e]??`[${e}px]`}var nl={"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 du(e,t,n,o){let r=nl[t];if(!r)return null;let i=Wr(n);for(let a of r){let s=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+a+"-(?:"+uu(i)+"|\\["+n+"px\\]))(?:\\s|$)"),l=e.match(s);if(l?.[1]){let d=Wr(o),c=l[1].lastIndexOf(":"),u=c>=0?l[1].slice(0,c+1):"";return{matched:l[1],suggested:`${u}${a}-${d}`}}}return null}function uu(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function ol(e,t,n){let o=new Set,r=[];for(let i of e){let a=Fn(i.element),s=`${a}::${i.property}`;if(o.has(s))continue;o.add(s);let l=di(i.element),d=i.element.className||"",c=du(d,i.property,t,n);r.push({selector:a,reactComponent:l?.name,className:d,property:i.property,matchedClass:c?.matched,suggestedClass:c?.suggested})}return r}function gi(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function mi(e,t){if(e instanceof HTMLElement){let o=e.style.getPropertyValue(t);if(o)return o}let n=t.replace(/-([a-z])/g,(o,r)=>r.toUpperCase());try{for(let o of document.styleSheets)try{let r=o.cssRules||o.rules;for(let i of r)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let a=i.style.getPropertyValue(t);if(a)return a;let s=i.style[n];if(s)return s}}catch{}}catch{}return null}function hi(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function Qo(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function pu(e){let t=[];for(let n of e){let o=t.find(r=>r.axis!==n.axis?!1:n.axis==="row"?Math.abs(r.y-n.y)<2&&Math.abs(r.h-n.h)<2:Math.abs(r.x-n.x)<2&&Math.abs(r.w-n.w)<2);if(o)if(n.axis==="row"){let r=Math.min(o.x,n.x),i=Math.max(o.x+o.w,n.x+n.w);o.x=r,o.w=i-r}else{let r=Math.min(o.y,n.y),i=Math.max(o.y+o.h,n.y+n.h);o.y=r,o.h=i-r}else t.push({...n})}return t}function Io(e){let t=Array.from(e.children).filter(l=>{if(!(l instanceof HTMLElement))return!1;let d=window.getComputedStyle(l);return d.display!=="none"&&d.position!=="absolute"&&d.position!=="fixed"});if(t.length<2)return[];let n=[],o=e.getBoundingClientRect(),i=window.getComputedStyle(e).flexDirection,a=i==="column"||i==="column-reverse",s=6;for(let l=0;l<t.length-1;l++){let d=t[l].getBoundingClientRect(),c=t[l+1].getBoundingClientRect();if(c.left>d.right+.5&&n.push({axis:"column",x:d.right,y:o.top,w:c.left-d.right,h:o.height}),c.top>d.bottom+.5&&n.push({axis:"row",x:o.left,y:d.bottom,w:o.width,h:c.top-d.bottom}),!(c.left>d.right+.5)&&!(c.top>d.bottom+.5))if(a){let u=(d.bottom+c.top)/2;n.push({axis:"row",x:o.left,y:u-s/2,w:o.width,h:s})}else{let u=(d.right+c.left)/2;n.push({axis:"column",x:u-s/2,y:o.top,w:s,h:o.height})}}return pu(n)}function gs(e,t){let n=window.getComputedStyle(e),o=n.display;if(o!=="flex"&&o!=="inline-flex")return!1;let r=n.justifyContent;if(r!=="space-between"&&r!=="space-around"&&r!=="space-evenly"&&r!=="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 Tr(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 er(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 ms(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function Mr(e){let t=document.createRange(),n=!1;for(let c of e.childNodes)c.nodeType===Node.TEXT_NODE&&(c.textContent||"").trim().length>0&&(n||(t.setStart(c,0),n=!0),t.setEnd(c,c.textContent?.length??0));if(!n)return null;let o=t.getBoundingClientRect(),r=window.getComputedStyle(e),i=parseFloat(r.fontSize)||16,a=parseFloat(r.lineHeight);isNaN(a)&&(a=i*1.2);let s=Math.max(1,t.getClientRects().length),l=Math.max(o.height,s*a),d=(l-o.height)/2;return new DOMRect(o.x,o.y-d,o.width,l)}function jr(e){let t=window.getComputedStyle(e),n=parseFloat(t.fontSize)||16,o=parseFloat(t.lineHeight);return isNaN(o)&&(o=n*1.2),{fontSize:n,lineHeight:o}}function Ye(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function rl(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function yi(e){for(let t of e){let n=An(t.selector);if(!n&&t.durableSelector&&(n=An(t.durableSelector),n)){let o=t.selector.match(/\[data-pm="([^"]+)"\]/)?.[1];o&&n.setAttribute("data-pm",o)}if(n)for(let o of t.changes)Ye(n,o.property,o.modified)}}function bi(e){for(let t of e){let n=An(t.selector);if(n)for(let o of t.changes)rl(n,o.property,o.original)}}function sl(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){sl(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&fu(r.style,t,n,o)}}}function fu(e,t,n,o){for(let r=0;r<e.length;r++){let i=e[r];if(i?.startsWith("--")){if(n.has(i))continue;n.add(i);let a=t.getPropertyValue(i).trim();al(a)&&o.push({name:i,value:a,usage:`var(${i})`})}}}var vi=null,gu=5e3;function hs(){if(vi&&Date.now()-vi.timestamp<gu)return vi.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{sl(i.cssRules||i.rules,n,t,e)}catch{}}catch{}let o=document.documentElement.style;for(let i=0;i<o.length;i++){let a=o[i];if(a?.startsWith("--")&&!t.has(a)){t.add(a);let s=n.getPropertyValue(a).trim();al(s)&&e.push({name:a,value:s,usage:`var(${a})`})}}let r=e.sort((i,a)=>i.name.localeCompare(a.name));return vi={variables:r,timestamp:Date.now()},r}function al(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 Ir(e,t){let n=t.match(/var\((--[^,)]+)(?:,\s*([^)]+))?\)/);if(n){let o=n[1],r=n[2];return getComputedStyle(document.documentElement).getPropertyValue(o).trim()||r||t}return t}function Gr(e,t){if(!e)return null;let n=il(e);if(!n)return null;for(let o of t){let r=il(o.value);if(r&&n===r)return o}return null}function il(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 o=n[1].endsWith("%")?parseFloat(n[1])/100:parseFloat(n[1]),r=n[2].endsWith("%")?parseFloat(n[2])/100:parseFloat(n[2]),i=parseFloat(n[3]);o=Math.round(o*100)/100,r=Math.round(r*1e3)/1e3;let a=Math.round(i);return`oklch(${o} ${r} ${a})`}}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 tr,jsx as at,jsxs as no}from"react/jsx-runtime";var Jn=22,No=12,mu=3,hu=250,xi=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],yu=3e3;function bu({left:e,top:t,avoidBottom:n,style:o,children:r,...i}){let a=e+No,s=t+No,l=n!==void 0?`${n}px`:"100vh";return at("div",{"data-devtools":"badge-hit-area",...i,style:{position:"fixed",left:e,top:t,padding:No,...o},children:at("div",{style:{transform:`translate(min(0px, calc(100vw - ${a}px - 100%)), min(0px, calc(${l} - ${s}px - 100%)))`},children:r})})}function dl({annotations:e,supersededAnnotations:t,inFlightIds:n,activeIds:o,queuePositions:r,scrollX:i,scrollY:a,annotationGroupMap:s,onViewThread:l,onSelectAnnotation:d,onHoverAnnotation:c,canvasRef:u}){let[p,f]=Jr(0),[v,b]=Jr(()=>Math.floor(Math.random()*xi.length)),I=!!(n&&n.size>0);Si(()=>{if(!I)return;let k=setInterval(()=>{f(L=>(L+1)%mu)},hu),w=setInterval(()=>{b(L=>(L+1)%xi.length)},yu);return()=>{clearInterval(k),clearInterval(w)}},[I]);let D=[];for(let k of e){if(k.type!=="text"||!k.text||!k.points[0]||t.has(k))continue;let w=k.groupId?e.filter($e=>$e.groupId===k.groupId):[k],L=k.status??"pending",h=w.reduce(($e,X)=>$e+(X.replyCount??0),0),C=$e=>$e==="resolved"&&h===0,M=!!(n&&(n.has(k.id)||w.some($e=>n.has($e.id))))||k.status==="in_flight"||w.some($e=>$e.status==="in_flight")||C(k.status)||w.some($e=>C($e.status)),ae=w.some($e=>$e.status==="resolved"&&($e.replyCount??0)>0||$e.status==="needs_review"),Fe=w.some($e=>$e.threadId);if(!M&&L!=="resolved"&&L!=="needs_review"&&!ae&&!Fe)continue;let me=k.threadId||w.find($e=>$e.threadId)?.threadId,G=L==="needs_review"||w.some($e=>$e.status==="needs_review"),se=k.points[0],P=k.fontSize||12,fe=P*1.4,ge=s.get(k.id),Le=k.text.replace(/\n/g," "),Pe=ge!==void 0?ge+". "+Le:Le,Qe=u?.current?.getContext("2d")??document.createElement("canvas").getContext("2d");if(!Qe)continue;Qe.font=`${P}px ${Kt}`;let ce=se.x-i,Ce=Sr(ce),ze=wr(Qe,Pe,Ce),rt=Qe.measureText(ze).width,ut=M&&!!o&&!o.has(k.id)&&!w.some($e=>o.has($e.id));D.push({id:k.id,threadId:me,linkedSelector:k.linkedSelector||w.find($e=>$e.linkedSelector)?.linkedSelector,x:se.x+rt+4,y:se.y-4,size:fe+8,color:k.color,isInFlight:M,isQueued:ut,queuePosition:void 0,isNeedsReview:G,replyCount:h})}let A=D.filter(k=>k.isQueued);if(A.length>0&&A.forEach((k,w)=>{k.queuePosition=r?.get(k.id)??`(${w+1}/${A.length})`}),D.length===0)return null;let F=2,_=u?.current?.getContext("2d")??document.createElement("canvas").getContext("2d"),R=D.map(k=>{let w;k.isQueued?w=k.queuePosition?`queued ${k.queuePosition}`:"queued":k.isInFlight?w=xi[v]??"thinking":k.replyCount>0?w=`${k.replyCount} ${k.replyCount===1?"reply":"replies"}`:w="Cancelled";let L=!k.isQueued,h=L?11:0,C=L?4:0,M=w.length*7.2;return _&&(_.font=`12px ${Kt}`,M=_.measureText(w).width),4+h+C+M+4}),Y=typeof window<"u"?window.innerHeight:9999,ee=[];for(let k=0;k<D.length;k++){let w=D[k].y-a,L=Math.min(w,Y-Jn),h=L+Jn,M=D[k].x-i;for(let ae=0;ae<k;ae++){let Fe=D[ae].y-a,me=Math.min(Fe,Y-Jn),G=me+Jn;if(!(L<G&&h>me))continue;let P=ee[ae]+R[ae];M<P+F&&(M=P+F)}ee.push(M)}return at(tr,{children:D.map((k,w)=>{let L=!!k.threadId;return at(bu,{left:ee[w]-No,top:k.y-a-No,onMouseDown:L?h=>h.stopPropagation():void 0,onClick:L?h=>{if(h.stopPropagation(),d?.(k.id),l?.(k.threadId),k.linkedSelector)try{let C=document.querySelector(k.linkedSelector);if(C){let M=C.getBoundingClientRect();(M.bottom<0||M.top>window.innerHeight)&&C.scrollIntoView({behavior:"smooth",block:"center"})}}catch{}}:void 0,onMouseEnter:c?()=>c(k.id):void 0,onMouseLeave:c?()=>c(null):void 0,style:{pointerEvents:L?"auto":"none",cursor:L?"pointer":void 0,zIndex:9999},children:at("div",{"data-devtools":"annotation-badge",style:{height:k.size,display:"flex",alignItems:"center",backgroundColor:k.color,fontFamily:Kt,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:k.isQueued?no("span",{style:{opacity:.5,color:"inherit"},children:["queued",k.queuePosition?` ${k.queuePosition}`:""]}):k.isInFlight?no(tr,{children:[at("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:p===1?no(tr,{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"})]}):no(tr,{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,color:"inherit"},children:xi[v]})]}):no(tr,{children:[k.isNeedsReview?at("span",{style:{fontWeight:700,color:"inherit"},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,color:"inherit"},children:k.replyCount>0?`${k.replyCount} ${k.replyCount===1?"reply":"replies"}`:"Cancelled"})]})})},k.id)})})}function ys({inFlightSelectorColors:e,animated:t=!0}){let[n,o]=Jr([]);return Si(()=>{if(e.size===0){o([]);return}let r=null,i=()=>{let l=[];for(let[d,c]of e){let u=An(d);if(!u)continue;let p=u.getBoundingClientRect();l.push({selector:d,top:p.top,left:p.left,width:p.width,height:p.height,color:c})}o(l)},a=()=>{r&&cancelAnimationFrame(r),r=requestAnimationFrame(i)};i(),window.addEventListener("scroll",a,!0),window.addEventListener("resize",a,!0);let s=new MutationObserver(a);return s.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",a,!0),window.removeEventListener("resize",a,!0),s.disconnect(),r&&cancelAnimationFrame(r)}},[e]),n.length===0?null:no(tr,{children:[t&&at("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(r=>at("div",{"data-devtools":"marching-ants",style:{position:"fixed",top:r.top,left:r.left,width:r.width,height:r.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,r.width-1),height:Math.max(0,r.height-1),fill:"none",stroke:r.color,strokeWidth:"1",strokeDasharray:"2 4",style:t?{animation:"popmelt-march 0.5s steps(2) infinite"}:void 0})})},r.selector))]})}function ul({annotations:e,supersededAnnotations:t,scrollX:n,scrollY:o,onReply:r,annotationGroupMap:i,canvasRef:a,onHoverAnnotation:s}){let l=e.filter(u=>t.has(u)?!1:u.status==="waiting_input"&&u.question&&u.threadId);if(l.length===0)return null;let d=new Set,c=[];for(let u of l){if(!u.threadId||d.has(u.threadId))continue;d.add(u.threadId);let p=u.type==="text"?u:e.find(f=>f.groupId&&f.groupId===u.groupId&&f.type==="text")||u;if(p.type==="text"&&p.text&&p.points[0]){let f=p.points[0],v=p.fontSize||12,b=v*1.4,I=i.get(p.id),D=p.text.replace(/\n/g," "),A=I!==void 0?I+". "+D:D,_=document.createElement("canvas").getContext("2d");if(!_)continue;_.font=`${v}px ${Kt}`;let R=f.x-n,Y=Sr(R),ee=wr(_,A,Y),k=_.measureText(ee).width;c.push({annotation:u,x:f.x+k+4,y:f.y-4,size:b+8})}}return c.length===0?null:at(tr,{children:c.map(({annotation:u,x:p,y:f,size:v})=>at(vu,{annotation:u,x:p-n,y:f-o,size:v,onReply:r,onHoverAnnotation:s},`question-${u.threadId}`))})}function vu({annotation:e,x:t,y:n,size:o,onReply:r,onHoverAnnotation:i}){let[a,s]=Jr(!1),[l,d]=Jr(""),c=cl(null),u=cl(null);Si(()=>{a&&c.current&&c.current.focus()},[a]),Si(()=>{if(!a)return;let I=A=>{u.current&&!A.composedPath().includes(u.current)&&s(!1)},D=A=>{A.key==="Escape"&&s(!1)};return document.addEventListener("mousedown",I),document.addEventListener("keydown",D),()=>{document.removeEventListener("mousedown",I),document.removeEventListener("keydown",D)}},[a]);let p=ll(()=>{!l.trim()||!e.threadId||(r(e.threadId,l.trim()),d(""),s(!1))},[l,e.threadId,r]),f=ll(I=>{I.key==="Enter"&&(I.metaKey||I.ctrlKey)&&(I.preventDefault(),p())},[p]),v=a?t:t-No,b=a?n:n-No;return no("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, ${v}px)`,top:`max(0px, ${b}px)`,padding:a?0:No,transform:`translate(min(0px, calc(100vw - max(0px, ${v}px) - 100%)), min(0px, calc(100vh - max(0px, ${b}px) - 100%)))`,zIndex:a?10002:9999,pointerEvents:"auto",cursor:a?void 0:"pointer"},children:[!a&&no("div",{onClick:()=>s(!0),style:{height:o,display:"flex",alignItems:"center",backgroundColor:e.color,padding:`0 ${4}px`,gap:4,fontFamily:Kt,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[no("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?"})]}),a&&no("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#eaeaea",fontFamily:Kt,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}),no("div",{style:{padding:`0 ${4}px ${4}px`},children:[at("textarea",{ref:c,value:l,onChange:I=>d(I.target.value),onKeyDown:f,placeholder:"Type your reply...",style:{width:"100%",minHeight:40,padding:4,fontSize:12,fontFamily:Kt,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:p,disabled:!l.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:Kt,fontWeight:600,backgroundColor:l.trim()?e.color:"rgba(0,0,0,0.1)",color:l.trim()?"#ffffff":"rgba(0,0,0,0.3)",border:"none",cursor:l.trim()?"pointer":"default"},children:"Send \u2318\u23CE"})})]})]})]})}function wi(e){let t=new Set,n=new Map;for(let i of e){if(!i.linkedSelector)continue;let a=n.get(i.linkedSelector)||[];a.push(i),n.set(i.linkedSelector,a)}let o=new Set,r=new Set;for(let i of n.values()){if(i.length<=1){i[0]?.groupId&&r.add(i[0].groupId);continue}i.sort((s,l)=>l.timestamp-s.timestamp);let a=i[0];a.groupId&&r.add(a.groupId);for(let s=1;s<i.length;s++){let l=i[s];t.add(l),l.groupId&&o.add(l.groupId)}}for(let i of e)i.groupId&&o.has(i.groupId)&&!r.has(i.groupId)&&t.add(i);return t}import{useEffect as pl,useLayoutEffect as xu,useState as fl}from"react";import{jsx as bs,jsxs as ml}from"react/jsx-runtime";function Su(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 hl({element:e,radius:t,accentColor:n,hoveredCorner:o,draggingCorner:r,cursorViewport:i}){let[a,s]=fl(null),[l,d]=fl(!1);if(pl(()=>{let D=_=>{(_.key==="Meta"||_.key==="Control")&&d(!0)},A=_=>{(_.key==="Meta"||_.key==="Control")&&d(!1)},F=()=>d(!1);return window.addEventListener("keydown",D,!0),window.addEventListener("keyup",A,!0),window.addEventListener("blur",F),()=>{window.removeEventListener("keydown",D,!0),window.removeEventListener("keyup",A,!0),window.removeEventListener("blur",F)}},[]),pl(()=>{if(!e){s(null);return}let D=()=>{s(e.getBoundingClientRect())};return D(),window.addEventListener("scroll",D,{passive:!0}),window.addEventListener("resize",D,{passive:!0}),()=>{window.removeEventListener("scroll",D),window.removeEventListener("resize",D)}},[e]),xu(()=>{e&&s(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!a)return null;let c=a.width,u=a.height,p=Su(n,.2),f={"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"]}},v=new Set,b=r??o;if(b)if(l)v.add(b);else for(let D of gl)v.add(D);let I={position:"fixed",top:a.top,left:a.left,width:c,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"};return ml("div",{"data-devtools":"border-radius-handles",style:I,children:[ml("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${u}`,children:[bs("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"}),gl.map(D=>{let A=f[D],F=v.has(D);return bs("circle",{cx:A.x,cy:A.y,r:D===(r??o)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:D===(r??o)?4:2,paintOrder:"stroke"},D)})]}),i&&b&&(()=>{let D=Math.round(t[b]);return bs("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:D})})()]})}import{useEffect as wu,useState as Cu}from"react";function nr(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);if(n)return`oklch(${n[1]} / ${t})`;let o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(o){let r=parseInt(o[1],16),i=parseInt(o[2],16),a=parseInt(o[3],16);return`rgba(${r}, ${i}, ${a}, ${t})`}return`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}import{Fragment as Eu,jsx as vs,jsxs as Yr}from"react/jsx-runtime";function go({element:e,isSelected:t=!1,elementInfo:n,color:o="#3b82f6",annotationNumber:r,changeCount:i,hideTooltip:a=!1}){let[s,l]=Cu(null);if(wu(()=>{if(!e){l(null);return}let R=()=>{let Y=e.getBoundingClientRect();l(Y)};return R(),window.addEventListener("scroll",R,{passive:!0}),window.addEventListener("resize",R,{passive:!0}),()=>{window.removeEventListener("scroll",R),window.removeEventListener("resize",R)}},[e]),!s||!e)return null;let d={position:"fixed",top:s.top,left:s.left,width:s.width,height:s.height,pointerEvents:"none",zIndex:9996,backgroundColor:nr(o,.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("."):"",f=n?.reactComponent,v=f?`<${f}> ${c}${u}${p}`:`${c}${u}${p}`,b=22,I=s.height>=window.innerHeight,D=I?0:s.top>=b?s.top-b:s.bottom,A=I?{position:"absolute",top:8,left:8,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:o,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:D,left:s.left,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:o,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400},_=!a&&Yr("div",{"data-devtools":"tooltip",style:A,children:[r!==void 0&&Yr("span",{children:[r,"."]}),vs("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:v}),i!==void 0&&i>0&&Yr("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return Yr(Eu,{children:[Yr("div",{"data-devtools":"highlight",style:d,children:[vs("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:vs("rect",{x:"0.5",y:"0.5",width:Math.max(0,s.width-1),height:Math.max(0,s.height-1),fill:"none",stroke:o,strokeWidth:"1",...!t&&{strokeDasharray:"2 4"}})}),I&&_]}),!I&&_]})}import{useEffect as yl,useLayoutEffect as ku,useState as xs}from"react";import{jsx as Ro,jsxs as ws}from"react/jsx-runtime";function Ss(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function Cs({element:e,gap:t,accentColor:n,hoveredAxis:o,draggingAxis:r,cursorViewport:i,isAutoGap:a=!1,refreshKey:s=0}){let[l,d]=xs(null),[c,u]=xs([]),[p,f]=xs(!1);if(yl(()=>{let k=h=>{(h.key==="Meta"||h.key==="Control")&&f(!0)},w=h=>{(h.key==="Meta"||h.key==="Control")&&f(!1)},L=()=>f(!1);return window.addEventListener("keydown",k,!0),window.addEventListener("keyup",w,!0),window.addEventListener("blur",L),()=>{window.removeEventListener("keydown",k,!0),window.removeEventListener("keyup",w,!0),window.removeEventListener("blur",L)}},[]),yl(()=>{if(!e){d(null),u([]);return}let k=()=>{d(e.getBoundingClientRect()),u(Io(e))};return k(),window.addEventListener("scroll",k,{passive:!0}),window.addEventListener("resize",k,{passive:!0}),()=>{window.removeEventListener("scroll",k),window.removeEventListener("resize",k)}},[e]),ku(()=>{e&&(d(e.getBoundingClientRect()),u(Io(e)))},[e,t.row,t.column,s]),!l||c.length===0)return null;let v=l.width,b=l.height,I="pm-gap-stripe-pattern",D=Ss(n,.25),A=Ss(n,.1),F=Ss(n,.2),_=8,R=2,Y={position:"fixed",top:l.top,left:l.left,width:v,height:b,pointerEvents:"none",zIndex:9996,overflow:"visible"},ee=r??o;return ws("div",{"data-devtools":"gap-handles",style:Y,children:[ws("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${v} ${b}`,children:[Ro("defs",{children:Ro("pattern",{id:I,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Ro("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:D,strokeWidth:"1.5"})})}),Ro("rect",{x:"0.5",y:"0.5",width:Math.max(0,v-1),height:Math.max(0,b-1),fill:"none",stroke:F,strokeWidth:"1"}),c.map((k,w)=>{let L=k.x-l.left,h=k.y-l.top,C=k.w,M=k.h,ae=p?k.axis===ee:!0;return(k.axis==="row"?t.row:t.column)===0?null:ws("g",{opacity:ae?1:.6,children:[Ro("rect",{x:L,y:h,width:C,height:M,fill:A}),Ro("rect",{x:L,y:h,width:C,height:M,fill:`url(#${I})`})]},w)}),ee&&(()=>{let k=c.filter(ge=>ge.axis===ee);if(k.length===0)return null;let w=k[0];if(i&&k.length>1){let ge=1/0;for(let Le of k){let Pe=Le.x+Le.w/2,Qe=Le.y+Le.h/2,ce=Math.abs(i.x-Pe)+Math.abs(i.y-Qe);ce<ge&&(ge=ce,w=Le)}}let L=w.x-l.left,h=w.y-l.top,C=w.w,M=w.h,ae=L+C/2,Fe=h+M/2;if(a)return Ro("circle",{cx:ae,cy:Fe,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let me=ee==="column",G=me?R:_,se=me?_:R,P=ae-G/2,fe=Fe-se/2;return Ro("rect",{x:P,y:fe,width:G,height:se,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&ee&&(()=>{let k=a?"auto":String(Math.round(ee==="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:k})})()]})}import{useCallback as Lu,useEffect as Au,useState as Pu}from"react";import{useEffect as Tu,useState as bl}from"react";var Mu=3,Iu=250,Es=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Ru=3e3;function vl(e){let[t,n]=bl(0),[o,r]=bl(()=>Math.floor(Math.random()*Es.length));return Tu(()=>{if(!e)return;let i=setInterval(()=>n(s=>(s+1)%Mu),Iu),a=setInterval(()=>r(s=>(s+1)%Es.length),Ru);return()=>{clearInterval(i),clearInterval(a)}},[e]),{charIndex:t,word:Es[o]}}import{Fragment as ks,jsx as zn,jsxs as Rr}from"react/jsx-runtime";function Du(e){let{element:t}=e,n=t.tagName,o=t.id?`#${t.id}`:"",r=t.className?"."+t.className.split(" ").slice(0,2).join("."):"",i=t.reactComponent;return i?`<${i}> ${n}${o}${r}`:`${n}${o}${r}`}var xl=22,Ts=12;function Ou({left:e,top:t,avoidBottom:n,style:o,children:r,...i}){let a=n!==void 0?`${n}px`:"100vh";return zn("div",{"data-devtools":"badge-hit-area",...i,style:{position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:Ts,transform:`translate(min(0px, calc(100vw - max(0px, ${e}px) - 100%)), min(0px, calc(${a} - max(0px, ${t}px) - 100%)))`,...o},children:r})}function Sl({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:o,dispatch:r,inFlightSelectors:i,toolbarRef:a,onHoverSelector:s}){let[l,d]=Pu([]),c=i&&i.size>0,{charIndex:u,word:p}=vl(!!c);Au(()=>{if(t){d([]);return}let A=null,F=()=>{let Y=[];e.forEach((ee,k)=>{let w=An(ee.selector);if(!w)return;let L=w.getBoundingClientRect();Y.push({selector:ee.selector,modIndex:k,top:L.top>=xl?L.top-xl:L.bottom,left:L.left,label:Du(ee),changeCount:ee.changes.length,annotationNumber:o+k+1})}),d(Y)},_=()=>{A&&cancelAnimationFrame(A),A=requestAnimationFrame(F)};F(),window.addEventListener("scroll",_,!0),window.addEventListener("resize",_,!0);let R=new MutationObserver(_);return R.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",_),document.fonts.ready.then(_),()=>{window.removeEventListener("scroll",_,!0),window.removeEventListener("resize",_,!0),window.removeEventListener("load",_),R.disconnect(),A&&cancelAnimationFrame(A)}},[e,t,o]);let f=Lu(A=>{let F=e[A];if(!F)return;let _=An(F.selector);_&&(r({type:"SELECT_ANNOTATION",payload:{id:null}}),r({type:"SET_TOOL",payload:"inspector"}),r({type:"SELECT_ELEMENT",payload:{el:_,info:F.element}}))},[e,r]);if(l.length===0)return null;let v=a?.current?.getBoundingClientRect(),b=v?v.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},D={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return zn(ks,{children:l.map(A=>{let F=i?.has(A.selector);return zn(Ou,{left:A.left-Ts,top:A.top-Ts,avoidBottom:b,onClick:()=>f(A.modIndex),onMouseEnter:s?()=>s(A.selector):void 0,onMouseLeave:s?()=>s(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:Rr("div",{"data-devtools":"badge",style:{...I,backgroundColor:F?"#999999":n},children:[Rr("span",{children:[A.annotationNumber,"."]}),zn("span",{style:D,children:A.label}),Rr("span",{style:{opacity:.8},children:["(",A.changeCount," ",A.changeCount===1?"change":"changes",")"]}),F&&Rr("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[zn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:u===1?Rr(ks,{children:[zn("circle",{cx:"7",cy:"7",r:"2"}),zn("circle",{cx:"17",cy:"7",r:"2"}),zn("circle",{cx:"7",cy:"17",r:"2"}),zn("circle",{cx:"17",cy:"17",r:"2"})]}):Rr(ks,{children:[zn("circle",{cx:"12",cy:"6",r:"2"}),zn("circle",{cx:"6",cy:"12",r:"2"}),zn("circle",{cx:"18",cy:"12",r:"2"}),zn("circle",{cx:"12",cy:"18",r:"2"})]})}),p]})]})},A.selector)})})}import{useEffect as Bu,useState as Hu}from"react";import{Fragment as Nu,jsx as wl}from"react/jsx-runtime";function _u(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 Cl({styleModifications:e,accentColor:t}){let[n,o]=Hu([]);if(Bu(()=>{let i=null,a=()=>{let d=[];for(let c of e){let u=An(c.selector);if(!u)continue;let p=u.getBoundingClientRect();if(p.width===0&&p.height===0)continue;let f=er(u);d.push({selector:c.selector,top:p.top,left:p.left,width:p.width,height:p.height,borderRadius:`${f["top-left"]}px ${f["top-right"]}px ${f["bottom-right"]}px ${f["bottom-left"]}px`})}o(d)},s=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(a)};a(),window.addEventListener("scroll",s,{passive:!0}),window.addEventListener("resize",s,{passive:!0});let l=new MutationObserver(s);return l.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s),window.removeEventListener("resize",s),l.disconnect(),i&&cancelAnimationFrame(i)}},[e]),n.length===0)return null;let r=_u(t,.2);return wl(Nu,{children:n.map(i=>{let a={position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${r}`,borderRadius:i.borderRadius,boxSizing:"border-box"};return wl("div",{"data-devtools":"mod-border",style:a},i.selector)})})}import{useEffect as El,useLayoutEffect as Fu,useState as kl}from"react";import{jsx as Fo,jsxs as Is}from"react/jsx-runtime";function Ms(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 zu={top:"bottom",bottom:"top",left:"right",right:"left"};function Rs({element:e,padding:t,accentColor:n,hoveredSide:o,draggingSide:r,cursorViewport:i,refreshKey:a}){let[s,l]=kl(null),[d,c]=kl(!1);if(El(()=>{let C=Fe=>{(Fe.key==="Meta"||Fe.key==="Control")&&c(!0)},M=Fe=>{(Fe.key==="Meta"||Fe.key==="Control")&&c(!1)},ae=()=>c(!1);return window.addEventListener("keydown",C,!0),window.addEventListener("keyup",M,!0),window.addEventListener("blur",ae),()=>{window.removeEventListener("keydown",C,!0),window.removeEventListener("keyup",M,!0),window.removeEventListener("blur",ae)}},[]),El(()=>{if(!e){l(null);return}let C=()=>{l(e.getBoundingClientRect())};return C(),window.addEventListener("scroll",C,{passive:!0}),window.addEventListener("resize",C,{passive:!0}),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}},[e]),Fu(()=>{e&&l(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,a]),!s)return null;let u=s.width,p=s.height,{top:f,right:v,bottom:b,left:I}=t,D="pm-stripe-pattern",A=Ms(n,.25),F=Ms(n,.1),_=Ms(n,.2),R=8,Y=2,ee={position:"fixed",top:s.top,left:s.left,width:u,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"},k=["top","right","bottom","left"],w={top:`0,0 ${u},0 ${u-v},${f} ${I},${f}`,right:`${u},0 ${u},${p} ${u-v},${p-b} ${u-v},${f}`,bottom:`0,${p} ${I},${p-b} ${u-v},${p-b} ${u},${p}`,left:`0,0 ${I},${f} ${I},${p-b} 0,${p}`},L={top:{x:u/2-R/2,y:f/2-Y/2,w:R,h:Y},bottom:{x:u/2-R/2,y:p-b/2-Y/2,w:R,h:Y},left:{x:I/2-Y/2,y:p/2-R/2,w:Y,h:R},right:{x:u-v/2-Y/2,y:p/2-R/2,w:Y,h:R}},h=new Set;return r?h.add(r):o&&(h.add(o),d||h.add(zu[o])),Is("div",{"data-devtools":"padding-handles",style:ee,children:[Is("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${u} ${p}`,children:[Fo("defs",{children:Fo("pattern",{id:D,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Fo("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:A,strokeWidth:"1.5"})})}),Fo("rect",{x:"0.5",y:"0.5",width:Math.max(0,u-1),height:Math.max(0,p-1),fill:"none",stroke:_,strokeWidth:"1"}),k.map(C=>{if(t[C]<=0)return null;let ae=h.has(C);return Is("g",{opacity:ae?1:.6,children:[Fo("polygon",{points:w[C],fill:F}),Fo("polygon",{points:w[C],fill:`url(#${D})`})]},C)}),k.map(C=>{let M=L[C],ae=h.has(C);return Fo("rect",{x:M.x,y:M.y,width:M.w,height:M.h,fill:n,stroke:"#ffffff",strokeWidth:ae?4:2,paintOrder:"stroke"},`handle-${C}`)})]}),i&&(o||r)&&(()=>{let M=Math.round(t[r??o]);return Fo("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:M})})()]})}import{useCallback as mo,useEffect as Vn,useMemo as Li,useRef as _n,useState as mn}from"react";import{Check as Ri,ChevronDown as _s,MoveHorizontal as _l,Shrink as up}from"lucide-react";var $u="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",zo={borderWidth:3,borderStyle:"solid",borderImage:`url("${$u}") 4 / 1.9 / 0 round`};function Ci({color:e="rgb(0,0,0)",animated:t=!1}={}){let n=`<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='${e}' stroke-width='.75'/></svg>`;return{position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(n)}")`,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",...t?{animation:"popmelt-border-march 0.8s linear infinite"}:{}}}var Ei={"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 Lr(e){return Ei[e]?.[0]??"px"}function $o(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function ki(e,t,n,o){let r=e.trim();if(!r)return"";let i=r.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i);if(i)return`${parseFloat(i[1])}${i[2].toLowerCase()}`;let a=parseFloat(r);if(!isNaN(a)){if(o){let{unit:s}=$o(n);return`${a}${s||Lr(t)}`}return`${a}${Lr(t)}`}return r}function Ls(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 ju,useRef as Tl,useState as Gu}from"react";import{Plus as Ml,X as Ju}from"lucide-react";import{jsx as Hn,jsxs as or}from"react/jsx-runtime";var Ti=[{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 Yu(e){if(!e||e==="none")return[];let t=[],n=/([\w-]+)\(([^)]+)\)/g,o;for(;(o=n.exec(e))!==null;){let r=o[1],i=o[2],a=parseFloat(i);isNaN(a)||t.push({name:r,value:a})}return t}function As(e){return e.length===0?"none":e.map(t=>{let o=Ti.find(r=>r.name===t.name)?.unit??"";return`${t.name}(${t.value}${o})`}).join(" ")}function Il({value:e,onChange:t,accentColor:n,modified:o,panelContentRef:r}){let i=Yu(e),[a,s]=Gu(!1),l=Tl(null),d=Tl(null);ju(()=>{if(!a)return;let F=_=>{l.current&&!_.composedPath().includes(l.current)&&s(!1)};return document.addEventListener("mousedown",F,!0),()=>document.removeEventListener("mousedown",F,!0)},[a]);let c=Ti.filter(F=>!i.some(_=>_.name===F.name)),u=F=>{let _=[...i,{name:F.name,value:F.defaultValue}];t(As(_)),s(!1)},p=F=>{let _=i.filter((R,Y)=>Y!==F);t(As(_))},f=(F,_)=>{let R=i.map((Y,ee)=>ee===F?{...Y,value:_}:Y);t(As(R))},v={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},b=Wu(F=>{if(!d.current)return{position:"fixed",top:0,left:0};let _=d.current.getBoundingClientRect(),R=r?.current?.getBoundingClientRect(),Y=F*24+8;return{position:"fixed",...window.innerHeight-_.bottom<Y?{bottom:window.innerHeight-_.top+2}:{top:_.bottom+2},left:R?R.left+4:_.left,width:R?R.width-8:140,zIndex:10001}},[r]),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)"},D={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"},A=F=>Hn("div",{ref:l,style:{...b(F.length),...I},children:F.map(_=>Hn("button",{type:"button",onClick:()=>u(_),style:D,onMouseEnter:R=>{R.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:R=>{R.currentTarget.style.backgroundColor="transparent"},children:_.label},_.name))});return i.length===0?or("div",{children:[or("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Hn(Lo,{modified:!1,children:Hn("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:{...v,color:"#999",cursor:"default"}})}),Hn("button",{ref:d,type:"button",onClick:()=>s(!a),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:Hn(Ml,{size:12})})]}),a&&A(Ti)]}):or("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((F,_)=>{let R=Ti.find(Y=>Y.name===F.name);return R?or("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Hn("span",{style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:o?n:"#94a3b8",fontWeight:o?600:400,width:56,flexShrink:0,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:R.label}),Hn(Lo,{modified:o,children:or("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[Hn("input",{type:"range",min:R.min,max:R.max,step:R.step,value:F.value,onChange:Y=>f(_,parseFloat(Y.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(F.value-R.min)/(R.max-R.min)*100}%, rgba(0,0,0,0.1) ${(F.value-R.min)/(R.max-R.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),Hn("input",{type:"number",min:R.min,max:R.max,step:R.step,value:R.unit==="px"||R.unit==="deg"?Math.round(F.value):Math.round(F.value*100)/100,onChange:Y=>f(_,parseFloat(Y.target.value)||0),style:{...v,width:44,padding:"2px 4px",textAlign:"right",flexShrink:0}}),R.unit&&Hn("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:R.unit})]})}),Hn("button",{type:"button",onClick:()=>p(_),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:Hn(Ju,{size:10})})]},F.name):null}),c.length>0&&or("div",{children:[or("button",{ref:d,type:"button",onClick:()=>s(!a),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:[Hn(Ml,{size:10}),"Add filter"]}),a&&A(c)]})]})}import{useCallback as ro,useEffect as Xu,useRef as Mi,useState as Rl}from"react";import{AlignHorizontalSpaceAround as qu,AlignVerticalSpaceAround as Zu,Columns3 as Qu,Grid2x2 as ep,RectangleHorizontal as tp,Rows3 as np,UnfoldHorizontal as Ll,UnfoldVertical as Al}from"lucide-react";import{useCallback as Vu,useEffect as Uu,useRef as Vr}from"react";import{jsx as Ku}from"react/jsx-runtime";var Ps=[0,1,2,4,8,12,16,20,24,28,32];function Ar({value:e,onChange:t,onPreview:n,onScrubEnd:o,onReset:r,isModified:i,accentColor:a,defaultUnit:s="rem",snapSteps:l,color:d,style:c,children:u}){let p=Vr(null),f=Vr(null),v=Vr(r),b=Vr(i),I=Vr(!1);v.current=r,b.current=i,Uu(()=>{let A=_=>{let R=f.current;if(!R)return;R.hasMoved=!0,I.current=_.shiftKey;let Y=R.unit==="rem"||R.unit==="em"?.1:1;R.accum+=_.movementX*Y;let ee=Math.max(0,Math.round((R.startValue+R.accum)*10)/10);if(_.shiftKey&&l){let k=R.unit==="rem"||R.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,w=R.unit==="rem"||R.unit==="em"?ee*k:ee,L=l[l.length-1];for(let h=0;h<l.length-1;h++){let C=l[h],M=l[h+1];if(w<=(C+M)/2){L=C;break}if(w<M){L=M;break}}w>l[l.length-1]&&(L=Math.round(w/8)*8),ee=R.unit==="rem"||R.unit==="em"?Math.round(L/k*1e3)/1e3:L}n?.(`${ee}${R.unit}`)},F=()=>{let _=f.current;if(!_)return;let R=Math.max(0,Math.round((_.startValue+_.accum)*10)/10);if(I.current&&l){let ee=_.unit==="rem"||_.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,k=_.unit==="rem"||_.unit==="em"?R*ee:R,w=l[l.length-1];for(let L=0;L<l.length-1;L++){let h=l[L],C=l[L+1];if(k<=(h+C)/2){w=h;break}if(k<C){w=C;break}}k>l[l.length-1]&&(w=Math.round(k/8)*8),R=_.unit==="rem"||_.unit==="em"?Math.round(w/ee*1e3)/1e3:w}let Y=_.hasMoved&&R!==_.startValue;f.current=null,document.exitPointerLock(),Y?t(`${R}${_.unit}`):_.hasMoved?n?.(`${_.startValue}${_.unit}`):b.current&&v.current&&v.current(),o?.()};return document.addEventListener("mousemove",A),document.addEventListener("mouseup",F),()=>{document.removeEventListener("mousemove",A),document.removeEventListener("mouseup",F)}},[t,n,o]);let D=Vu(A=>{if(A.button!==0)return;A.preventDefault();let F=$o(e),_=F.unit&&F.unit!=="px"?F.unit:s;f.current={startValue:F.num,unit:_,accum:0,hasMoved:!1},p.current?.requestPointerLock()},[e,s]);return Ku("span",{ref:p,onMouseDown:D,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:{color:i?a||"#3b82f6":d||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize",...c},children:u})}import{Fragment as Ds,jsx as Te,jsxs as an}from"react/jsx-runtime";function op({gridCols:e,gridRows:t,gridModified:n,accentColor:o,onColsChange:r,onRowsChange:i}){return Te($n,{style:{width:100},children:an("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"8px 4px"},children:[Te("input",{type:"number",min:1,max:12,value:e,onChange:a=>r(parseInt(a.target.value)||1),style:{...gn,width:32,textAlign:"center",padding:2}}),Te("span",{style:{fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:n?o:"#999",fontWeight:n?600:400,fontSize:11,margin:"0 4px"},children:"\xD7"}),Te("input",{type:"number",min:1,max:12,value:t,onChange:a=>i(parseInt(a.target.value)||1),style:{...gn,width:32,textAlign:"center",padding:2}})]})})}function Pl({element:e,getValue:t,getOriginalValue:n,handleChange:o,isModified:r,onResetProperty:i,isCollapsed:a,onToggle:s,sectionHeaderStyle:l,activeDropdown:d,onDropdownChange:c,panelContentRef:u,accentColor:p,onFieldHover:f,preferredUnit:v,onUnitCycle:b}){let I=c,D=t("display"),A=t("flex-direction"),F=Dl(D,A),_=D==="flex"||D==="inline-flex",R=D==="grid",Y=_||R,ee=A==="column"||A==="column-reverse",k=t("width"),w=t("height"),L=r("width")?k:mi(e,"width"),h=r("height")?w:mi(e,"height"),C=Os(k,L),M=Os(w,h),ae=t("min-width"),Fe=t("max-width"),me=t("min-height"),G=t("max-height"),se=Pr(t("padding")),P=t("gap"),fe=t("row-gap"),ge=t("column-gap"),Le=t("grid-template-columns"),Pe=t("grid-template-rows"),Qe=t("overflow"),ce=Le.split(/\s+/).filter(O=>O&&O!=="none").length||1,Ce=Pe.split(/\s+/).filter(O=>O&&O!=="none").length||1,[ze,rt]=Rl(!1),ut=d!==null,$e=ut||ze,X=ut?.3:ze?.65:1,Q=({mode:O,icon:ve,active:De})=>Te("button",{type:"button",onClick:()=>Ol(O,o),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:De?nr(p,.15):"transparent",color:De?p:"#64748b",cursor:"pointer",fontSize:14},children:ve}),we=(O,ve,De)=>{De==="fixed"?o(O,ve):o(O,Ii(De,ve))},je=O=>{let ve=Pr(t("padding")),De=O||"0";o("padding",`${ve.top} ${De} ${ve.bottom} ${De}`)},st=O=>{let ve=Pr(t("padding")),De=O||"0";o("padding",`${De} ${ve.right} ${De} ${ve.left}`)},[Ee,et]=Rl({}),Ke=ro((O,ve)=>De=>{ve(De),et(Pt=>({...Pt,[O]:De}))},[]),tt=ro(O=>{et(ve=>{let De={...ve};return delete De[O],De})},[]),pt=ro(O=>{let ve=Pr(t("padding"));Ye(e,"padding",`${ve.top} ${O} ${ve.bottom} ${O}`)},[e,t]),mt=ro(O=>{let ve=Pr(t("padding"));Ye(e,"padding",`${O} ${ve.right} ${O} ${ve.left}`)},[e,t]),te=ro(O=>ve=>{Ye(e,O,ve)},[e]),ne=ee?"row":"column",de=ne==="row"?"row-gap":"column-gap",We=de==="row-gap"?fe||P:ge||P,qe=r(de)||r("gap"),Re=ro(()=>{let ve=Io(e).find(Pt=>Pt.axis===ne);if(ve)return ne==="row"?ve.h:ve.w;let De=Qo(e);return ne==="row"?De.row:De.column},[e,ne]),$t=ro(()=>{let O=t("justify-content");return O==="space-between"?"between":O==="space-around"||O==="space-evenly"?"around":"fixed"},[t])(),Cn=ro((O,ve)=>{if(O==="fixed"){let De=Math.max(0,Math.round(Re()*1e3)/1e3),Pt=ve||(De>0?`${De}px`:"8px");o("justify-content","normal"),o(de,Pt);return}o("justify-content",O==="between"?"space-between":"space-around"),o(de,"0px")},[de,Re,o]),Dn=ro(O=>{if($t!=="fixed"){Cn("fixed",O);return}o(de,O)},[Cn,$t,de,o]),Wt=ro(O=>{Ye(e,"justify-content","normal"),Ye(e,de,O)},[e,de]),Ct=O=>O==="center"?1:O==="flex-end"||O==="end"?2:0,cn=Ct(t("justify-content")),ft=Ct(t("align-items")),qt=ee?ft:cn,Ze=ee?cn:ft,nt=Mi(null),lt=Mi({x:0,y:0}),vn=Mi({col:qt,row:Ze});vn.current={col:qt,row:Ze};let uo=ro((O,ve)=>{let De=["flex-start","center","flex-end"];ee?(o("justify-content",De[ve]),o("align-items",De[O])):(o("justify-content",De[O]),o("align-items",De[ve]))},[ee,o]),Xn=Mi(uo);Xn.current=uo,Xu(()=>{let ve=De=>{let Pt=nt.current;if(!Pt||!De.composedPath().includes(Pt))return;De.preventDefault(),De.stopPropagation(),lt.current.x+=De.deltaX,lt.current.y+=De.deltaY;let{col:Rt,row:hn}=vn.current,dn=!1;Math.abs(lt.current.x)>=30&&(Rt=Math.max(0,Math.min(2,Rt+(lt.current.x>0?1:-1))),lt.current.x=0,lt.current.y=0,dn=!0),!dn&&Math.abs(lt.current.y)>=30&&(hn=Math.max(0,Math.min(2,hn+(lt.current.y>0?1:-1))),lt.current.x=0,lt.current.y=0,dn=!0),dn&&(Rt!==vn.current.col||hn!==vn.current.row)&&Xn.current(Rt,hn)};return document.addEventListener("wheel",ve,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",ve,{capture:!0})},[]);let Nn=()=>Te("div",{ref:nt,onMouseEnter:()=>{rt(!0),u.current&&(u.current.style.overflowY="hidden")},onMouseLeave:()=>{rt(!1),u.current&&(u.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:Yn,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(O=>[0,1,2].map(ve=>Te("button",{type:"button",onClick:()=>uo(ve,O),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:ve===qt&&O===Ze?Te("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:ve===0?an(Ds,{children:[Te("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),Te("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),Te("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):ve===1?an(Ds,{children:[Te("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),Te("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),Te("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):an(Ds,{children:[Te("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),Te("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),Te("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]})}):Te("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${O}-${ve}`)))}),Gt=r("grid-template-columns")||r("grid-template-rows");return an("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Te("div",{style:l,children:Te("span",{children:Y?"Auto layout":"Layout"})}),an("div",{style:{padding:"8px 12px"},children:[an("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:Yn,borderRadius:2,padding:2,opacity:X,transition:"opacity 150ms ease"},children:[Te(Q,{mode:"block",icon:Te(tp,{size:16}),active:F==="block"}),Te(Q,{mode:"flex-col",icon:Te(np,{size:16}),active:F==="flex-col"}),Te(Q,{mode:"flex-row",icon:Te(Qu,{size:16}),active:F==="flex-row"}),Te(Q,{mode:"grid",icon:Te(ep,{size:16}),active:F==="grid"})]}),an("div",{style:{display:"flex",gap:4,marginBottom:8},children:[Te(Bs,{label:"W",property:"width",cssValue:C==="fixed"?k:`${Math.round(e.getBoundingClientRect().width)}px`,mode:C,onValueChange:O=>o("width",O),onModeChange:O=>{if(O==="fixed"){let ve=e.getBoundingClientRect();o("width",`${Math.round(ve.width)}px`)}else o("width",Ii(O,k))},modified:r("width"),dimmed:ut&&d!=="width",dropdownOpen:d==="width",onDropdownChange:O=>I(O?"width":null),panelContentRef:u,accentColor:p,onReset:()=>i("width"),minValue:ae!=="none"&&ae!=="0px"&&ae!=="auto"?ae:"",maxValue:Fe!=="none"&&Fe!=="auto"?Fe:"",onMinChange:O=>o("min-width",O||"0"),onMaxChange:O=>o("max-width",O||"none"),onMinReset:()=>i("min-width"),onMaxReset:()=>i("max-width"),minModified:r("min-width"),maxModified:r("max-width")}),Te(Bs,{label:"H",property:"height",cssValue:M==="fixed"?w:`${Math.round(e.getBoundingClientRect().height)}px`,mode:M,onValueChange:O=>o("height",O),onModeChange:O=>{if(O==="fixed"){let ve=e.getBoundingClientRect();o("height",`${Math.round(ve.height)}px`)}else o("height",Ii(O,w))},modified:r("height"),dimmed:ut&&d!=="height",dropdownOpen:d==="height",onDropdownChange:O=>I(O?"height":null),panelContentRef:u,minValue:me!=="none"&&me!=="0px"&&me!=="auto"?me:"",maxValue:G!=="none"&&G!=="auto"?G:"",onMinChange:O=>o("min-height",O||"0"),onMaxChange:O=>o("max-height",O||"none"),onMinReset:()=>i("min-height"),onMaxReset:()=>i("max-height"),minModified:r("min-height"),maxModified:r("max-height"),accentColor:p,onReset:()=>i("height")})]}),_&&an("div",{onMouseEnter:()=>f?.("gap"),onMouseLeave:()=>f?.("element"),style:{display:"flex",gap:8,marginBottom:8},children:[Te("div",{style:{opacity:ut?.3:1,transition:"opacity 150ms ease"},children:Nn()}),an("div",{style:{flex:1,opacity:X,transition:"opacity 150ms ease"},children:[Te("div",{onClick:qe?()=>{i(de),i("gap")}:void 0,title:qe?"Click to reset":void 0,style:{fontSize:9,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:qe?p:"#999",fontWeight:qe?600:400,marginBottom:2,cursor:qe?"pointer":"default"},children:"Gap"}),Te("div",{style:{display:"flex",gap:2,marginBottom:4,backgroundColor:Yn,borderRadius:2,padding:2},children:["fixed","between","around"].map(O=>{let ve=$t===O;return Te("button",{type:"button",onClick:()=>Cn(O),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"4px 6px",border:"none",borderRadius:2,backgroundColor:ve?nr(p,.15):"transparent",color:ve?p:"#64748b",cursor:"pointer",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:ve?600:400,textTransform:"capitalize"},children:O},O)})}),Te($n,{dimmed:ut,children:an("div",{style:{display:"flex",alignItems:"center"},children:[Te(Ar,{value:We,onChange:O=>{tt("gap"),Dn(O)},onPreview:Ke("gap",Wt),onScrubEnd:()=>tt("gap"),onReset:()=>{i(de),i("gap")},isModified:qe,accentColor:p,defaultUnit:v,children:A==="column"||A==="column-reverse"?Te(Al,{size:12,strokeWidth:qe?2.5:1.5}):Te(Ll,{size:12,strokeWidth:qe?2.5:1.5})}),Te(io,{property:de,value:Ee.gap||($t==="fixed"?We:`${Math.max(0,Math.round(Re()*1e3)/1e3)}px`),onChange:O=>Dn(O),isModified:qe||"gap"in Ee,style:{...gn,flex:1,minWidth:0},unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:b})]})})]})]}),R&&an("div",{onMouseEnter:()=>f?.("gap"),onMouseLeave:()=>f?.("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:X,transition:"opacity 150ms ease"},children:[Te(op,{gridCols:ce,gridRows:Ce,gridModified:Gt,accentColor:p,onColsChange:O=>o("grid-template-columns",`repeat(${O}, 1fr)`),onRowsChange:O=>o("grid-template-rows",`repeat(${O}, 1fr)`)}),an("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[Te($n,{dimmed:ut,children:an("div",{style:{display:"flex",alignItems:"center"},children:[Te(Ar,{value:ge||P,onChange:O=>{tt("column-gap"),o("column-gap",O)},onPreview:Ke("column-gap",te("column-gap")),onScrubEnd:()=>tt("column-gap"),onReset:()=>i("column-gap"),isModified:r("column-gap"),accentColor:p,defaultUnit:v,children:Te(Ll,{size:12,strokeWidth:r("column-gap")?2.5:1.5})}),Te(io,{property:"column-gap",value:Ee["column-gap"]||ge||P,onChange:O=>o("column-gap",O),isModified:r("column-gap")||"column-gap"in Ee,placeholder:"col",style:{...gn,flex:1,minWidth:0},unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:b})]})}),Te($n,{dimmed:ut,children:an("div",{style:{display:"flex",alignItems:"center"},children:[Te(Ar,{value:fe||P,onChange:O=>{tt("row-gap"),o("row-gap",O)},onPreview:Ke("row-gap",te("row-gap")),onScrubEnd:()=>tt("row-gap"),onReset:()=>i("row-gap"),isModified:r("row-gap"),accentColor:p,defaultUnit:v,children:Te(Al,{size:12,strokeWidth:r("row-gap")?2.5:1.5})}),Te(io,{property:"row-gap",value:Ee["row-gap"]||fe||P,onChange:O=>o("row-gap",O),isModified:r("row-gap")||"row-gap"in Ee,placeholder:"row",style:{...gn,flex:1,minWidth:0},unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:b})]})})]})]}),Y&&an("div",{onMouseEnter:()=>f?.("padding"),onMouseLeave:()=>f?.("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:X,transition:"opacity 150ms ease"},children:[Te($n,{style:{flex:1},dimmed:ut,children:an("div",{style:{display:"flex",alignItems:"center"},children:[Te(Ar,{value:se.left,onChange:O=>{tt("padding-h"),je(O)},onPreview:Ke("padding-h",pt),onScrubEnd:()=>tt("padding-h"),onReset:()=>i("padding"),isModified:r("padding"),accentColor:p,defaultUnit:v,snapSteps:Ps,children:Te(qu,{size:12,strokeWidth:r("padding")?2.5:1.5})}),Te(io,{property:"padding",value:Ee["padding-h"]||se.left,onChange:O=>je(O),isModified:r("padding")||"padding-h"in Ee,placeholder:"H pad",style:{...gn,flex:1,minWidth:0},unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:b})]})}),Te($n,{style:{flex:1},dimmed:ut,children:an("div",{style:{display:"flex",alignItems:"center"},children:[Te(Ar,{value:se.top,onChange:O=>{tt("padding-v"),st(O)},onPreview:Ke("padding-v",mt),onScrubEnd:()=>tt("padding-v"),onReset:()=>i("padding"),isModified:r("padding"),accentColor:p,defaultUnit:v,snapSteps:Ps,children:Te(Zu,{size:12,strokeWidth:r("padding")?2.5:1.5})}),Te(io,{property:"padding",value:Ee["padding-v"]||se.top,onChange:O=>st(O),isModified:r("padding")||"padding-v"in Ee,placeholder:"V pad",style:{...gn,flex:1,minWidth:0},unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:b})]})})]}),an("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:X,transition:"opacity 150ms ease"},children:[Te("input",{type:"checkbox",checked:Qe==="hidden",onChange:O=>o("overflow",O.target.checked?"hidden":"visible"),style:{margin:0,accentColor:p}}),"Clip content"]})]})]})}import{AlignCenter as rp,AlignJustify as ip,AlignLeft as sp,AlignRight as ap,Baseline as lp,ChevronDown as cp,WholeWord as dp}from"lucide-react";import{jsx as wt,jsxs as Ao}from"react/jsx-runtime";var Bl={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function Hl({element:e,getValue:t,handleChange:n,isModified:o,onResetProperty:r,isCollapsed:i,onToggle:a,sectionHeaderStyle:s,accentColor:l,colorVariables:d,activeColorDropdown:c,onColorDropdownChange:u,panelContentRef:p,preferredUnit:f,onUnitCycle:v}){let b=t("font-family"),I=t("font-size"),D=t("font-weight"),A=t("line-height"),F=t("letter-spacing"),_=t("text-align"),R=t("color"),Y=String(D),ee=Bl[Y]||Y,k=Ir(e,R),w=R.includes("var(")?null:Gr(k,d),L=({align:C,icon:M})=>{let ae=_===C;return wt("button",{type:"button",onClick:()=>n("text-align",C),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:ae?nr(l,.15):"transparent",color:ae?l:"#64748b",cursor:"pointer"},children:M})},h=b.split(",")[0]?.trim().replace(/^["']|["']$/g,"")||"System";return Ao("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[wt("div",{style:s,children:wt("span",{children:"Typography"})}),Ao("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[wt($n,{children:Ao("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[wt("input",{type:"text",value:b,onChange:C=>n("font-family",C.target.value),style:{...gn,flex:1,minWidth:0,padding:0,fontWeight:o("font-family")?600:400,color:o("font-family")?l:"inherit"},title:b}),wt(cp,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),Ao("div",{style:{display:"flex",gap:4},children:[wt($n,{style:{flex:1},children:wt("select",{value:Y,onChange:C=>n("font-weight",C.target.value),style:{...gn,padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:o("font-weight")?600:400,color:o("font-weight")?l:"inherit"},children:Object.entries(Bl).map(([C,M])=>wt("option",{value:C,children:M},C))})}),wt($n,{style:{flex:1},children:wt("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:wt(io,{property:"font-size",value:I,onChange:C=>n("font-size",C),isModified:o("font-size"),min:1,max:999,style:{...gn,padding:"6px 8px",paddingRight:24,fontWeight:o("font-size")?600:400,color:o("font-size")?l:"inherit"},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999"},preferredUnit:f,onUnitCycle:v})})})]}),Ao("div",{style:{display:"flex",gap:4},children:[wt($n,{style:{flex:1},children:Ao("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[wt(lp,{size:12,style:{color:o("line-height")?l:"#999",flexShrink:0}}),wt(io,{property:"line-height",value:A,onChange:C=>n("line-height",C),isModified:o("line-height"),step:.1,min:0,placeholder:"Auto",style:{...gn,flex:1,minWidth:0,padding:0,fontWeight:o("line-height")?600:400,color:o("line-height")?l:"inherit"},showUnit:!1})]})}),wt($n,{style:{flex:1},children:Ao("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[wt(dp,{size:12,style:{color:o("letter-spacing")?l:"#999",flexShrink:0}}),wt(io,{property:"letter-spacing",value:F,onChange:C=>n("letter-spacing",C),isModified:o("letter-spacing"),step:.1,placeholder:"\u2014",style:{...gn,flex:1,minWidth:0,padding:0,fontWeight:o("letter-spacing")?600:400,color:o("letter-spacing")?l:"inherit"},showUnit:!1})]})})]}),Ao("div",{style:{display:"flex",gap:2,backgroundColor:Yn,borderRadius:2,padding:2},children:[wt(L,{align:"left",icon:wt(sp,{size:14})}),wt(L,{align:"center",icon:wt(rp,{size:14})}),wt(L,{align:"right",icon:wt(ap,{size:14})}),wt(L,{align:"justify",icon:wt(ip,{size:14})})]}),Ao("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[wt("span",{onClick:o("color")?()=>r("color"):void 0,title:o("color")?"Click to reset":void 0,style:{fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:o("color")?l:"#64748b",fontWeight:o("color")?600:400,cursor:o("color")?"pointer":"default",width:40,flexShrink:0},children:"Color"}),wt("div",{style:{flex:1,minWidth:0},children:wt(Hs,{value:R,resolvedValue:k,colorVariables:d,matchingVariable:w,onChange:C=>n("color",C),accentColor:l,modified:o("color"),panelContentRef:p,isDropdownOpen:c==="color",onDropdownChange:C=>u(C?"color":null)})})]})]})]})}import{Fragment as fp,jsx as ye,jsxs as zt}from"react/jsx-runtime";var Nl=[{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 pp(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 Os(e,t){return!t||e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":"fixed"}function Ii(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=$o(t);if(typeof n.num=="number"&&!isNaN(n.num)){let o=n.unit==="%"?"px":n.unit||"px";return`${n.num}${o}`}return"auto"}}}function Pr(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 Dl(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function Ol(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 Yn="rgba(0, 0, 0, 0.04)",gn={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 Bs({label:e,property:t,cssValue:n,mode:o,onValueChange:r,onModeChange:i,modified:a,dimmed:s,dropdownOpen:l,onDropdownChange:d,panelContentRef:c,accentColor:u="#3b82f6",onReset:p,minValue:f,maxValue:v,onMinChange:b,onMaxChange:I,onMinReset:D,onMaxReset:A,minModified:F,maxModified:_}){let R=$o(n),Y=a?R.unit||Lr(t):Lr(t),ee=!a&&R.unit&&R.unit!==Y?Ls(R.num,Y):R.num,[k,w]=mn(!1),[L,h]=mn(String(ee)),[C,M]=mn(!1),ae=_n(null),Fe=_n(null),me=_n(null),G=_n(!1);Vn(()=>{k||h(String(ee))},[ee,k]),Vn(()=>{if(!l)return;let ce=ze=>{Fe.current&&!ze.composedPath().includes(Fe.current)&&me.current&&!ze.composedPath().includes(me.current)&&d?.(!1)},Ce=ze=>{ze.key==="Escape"&&d?.(!1)};return document.addEventListener("mousedown",ce),document.addEventListener("keydown",Ce),()=>{document.removeEventListener("mousedown",ce),document.removeEventListener("keydown",Ce)}},[l,d]),Vn(()=>{k&&ae.current&&(ae.current.focus(),ae.current.select())},[k]);let se=()=>{let ce=ki(L,t,n,a);r(ce||`${Math.max(0,parseFloat(L)||0)}${Y}`),w(!1)},P=()=>{if(G.current){G.current=!1;return}se()},fe=ce=>{if(ce.key==="Enter"){se();return}if(ce.key==="Escape"){G.current=!0,h(String(ee)),w(!1);return}if(ce.key==="ArrowUp"||ce.key==="ArrowDown"){ce.preventDefault();let Ce=ce.key==="ArrowUp"?1:-1,ze=ce.shiftKey?8:ce.altKey?.1:1,rt=parseFloat(L)||0,ut=Math.round(Math.max(0,rt+Ce*ze)*1e3)/1e3;h(String(ut)),r(`${ut}${Y}`)}},ge={fixed:"Fixed",hug:"Hug",fill:"Fill"},Le={fixed:ye(_l,{size:12}),hug:ye(up,{size:12}),fill:ye(_l,{size:12})},Pe=()=>{d?.(!l)},Qe=()=>{if(!me.current||!c?.current)return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let ce=me.current.getBoundingClientRect(),Ce=c.current.getBoundingClientRect();return{position:"fixed",top:ce.bottom+4,left:Ce.left+4,width:Ce.width-8}};return zt("div",{ref:me,onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:k?u:C?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Yn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:s?.3:1},children:[ye("span",{onClick:a&&p?p:void 0,title:a?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:a?u:"#999",fontWeight:a?600:400,padding:"0 8px",flexShrink:0,cursor:a?"pointer":"default"},children:e}),o==="fixed"?k?ye("input",{ref:ae,type:"text",inputMode:"numeric",value:L,onChange:ce=>h(ce.target.value),onKeyDown:fe,onBlur:P,style:{...gn,flex:1,minWidth:0,padding:"4px 2px"}}):ye("span",{onClick:()=>w(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:ee}):ye("span",{style:{flex:1}}),zt("button",{type:"button",onClick:Pe,style:{display:"flex",alignItems:"center",gap:2,padding:"4px 8px",border:"none",outline:"none",backgroundColor:"transparent",color:"#999",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"pointer",flexShrink:0},children:[ge[o],ye(_s,{size:12})]}),l&&zt("div",{ref:Fe,style:{...Qe(),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:[zt("button",{type:"button",onClick:()=>{i("fixed"),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="fixed"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="fixed"?600:400,cursor:"pointer",textAlign:"left"},children:[Le.fixed,zt("span",{children:["Fixed ",t," (",n,")"]}),o==="fixed"&&ye(Ri,{size:14,style:{marginLeft:"auto"}})]}),zt("button",{type:"button",onClick:()=>{i("hug"),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="hug"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="hug"?600:400,cursor:"pointer",textAlign:"left"},children:[Le.hug,ye("span",{children:"Hug contents"}),o==="hug"&&ye(Ri,{size:14,style:{marginLeft:"auto"}})]}),zt("button",{type:"button",onClick:()=>{i("fill"),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="fill"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="fill"?600:400,cursor:"pointer",textAlign:"left"},children:[Le.fill,ye("span",{children:"Fill container"}),o==="fill"&&ye(Ri,{size:14,style:{marginLeft:"auto"}})]}),ye("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),zt("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[zt("div",{style:{display:"flex",alignItems:"center",backgroundColor:Yn,borderRadius:2,padding:"4px 8px"},children:[ye("span",{onClick:F?ce=>{ce.stopPropagation(),D?.()}:void 0,title:F?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:F?u:"#999",fontWeight:F?600:400,marginRight:8,flexShrink:0,cursor:F?"pointer":"default"},children:"Min"}),ye("input",{type:"text",value:f||"",placeholder:"\u2014",onChange:ce=>b?.(ce.target.value),onClick:ce=>ce.stopPropagation(),style:{...gn,flex:1,minWidth:0,padding:0,textAlign:"right",color:F?u:"inherit",fontWeight:F?600:400}})]}),zt("div",{style:{display:"flex",alignItems:"center",backgroundColor:Yn,borderRadius:2,padding:"4px 8px"},children:[ye("span",{onClick:_?ce=>{ce.stopPropagation(),A?.()}:void 0,title:_?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:_?u:"#999",fontWeight:_?600:400,marginRight:8,flexShrink:0,cursor:_?"pointer":"default"},children:"Max"}),ye("input",{type:"text",value:v||"",placeholder:"\u2014",onChange:ce=>I?.(ce.target.value),onClick:ce=>ce.stopPropagation(),style:{...gn,flex:1,minWidth:0,padding:0,textAlign:"right",color:_?u:"inherit",fontWeight:_?600:400}})]})]})]})]})}function $n({children:e,style:t,dimmed:n}){let[o,r]=mn(!1);return ye("div",{onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:o?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Yn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:n?.3:1,...t},children:e})}function Lo({children:e}){let[t,n]=mn(!1);return ye("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:Yn,transition:"border-color 100ms ease"},children:e})}function io({property:e,value:t,onChange:n,isModified:o=!1,step:r=1,min:i,max:a,style:s,placeholder:l,showUnit:d=!0,unitStyle:c,preferredUnit:u,onUnitCycle:p}){let f=$o(t),v=Lr(e),b=Ei[e],D=u&&b&&b.includes(u)?u:v,A=o&&f.unit||D,F=!o&&f.unit&&f.unit!==A?Ls(f.num,A):f.num,[_,R]=mn(!1),[Y,ee]=mn(""),k=P=>{R(!0),ee(String(F||"")),requestAnimationFrame(()=>P.target.select())},w=()=>{if(R(!1),Y.trim()){let P=ki(Y,e,t,o);P&&n(P)}},L=P=>{let fe=P.target.value;ee(fe);let ge=fe.trim(),Le=ge.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),Pe=ge.match(/^(-?[\d.]+)$/);if(Le){let Qe=parseFloat(Le[1]);isNaN(Qe)||n(`${Qe}${Le[2].toLowerCase()}`)}else if(Pe){let Qe=parseFloat(Pe[1]);isNaN(Qe)||n(`${Qe}${A}`)}},h=P=>{if(P.key==="Enter"){if(Y.trim()){let fe=ki(Y,e,t,o);fe&&n(fe)}P.target.blur();return}if(P.key==="ArrowUp"||P.key==="ArrowDown"){P.preventDefault();let fe=P.shiftKey?10:P.altKey?.1:1,ge=(P.key==="ArrowUp"?1:-1)*r*fe,Le=parseFloat(Y)||F||0,Pe=Math.round((Le+ge)*1e3)/1e3;i!==void 0&&(Pe=Math.max(i,Pe)),a!==void 0&&(Pe=Math.min(a,Pe)),ee(String(Pe)),n(`${Pe}${A}`)}},C=/^-?[\d.]/.test(t.trim()),M=_?Y:C?String(F):"",Fe=_&&/\s*(rem|em|px|%)\s*$/i.test(Y)?"":A,me=p&&(Fe==="rem"||Fe==="px"),G={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},se={...c??G,pointerEvents:"auto",cursor:"pointer"};return zt(fp,{children:[ye("input",{type:"text",inputMode:"decimal",value:M,onFocus:k,onBlur:w,onChange:L,onKeyDown:h,placeholder:l,style:s}),d&&Fe&&ye("span",{style:me?se:c??G,onClick:me?p:void 0,title:me?"Click to switch units":void 0,children:Fe})]})}function Hs({value:e,resolvedValue:t,colorVariables:n,matchingVariable:o,onChange:r,accentColor:i="#3b82f6",modified:a,panelContentRef:s,isDropdownOpen:l,onDropdownChange:d}){let[c,u]=mn(!1),p=e,[f,v]=mn(p),[b,I]=mn(!1),[D,A]=mn(!1),[F,_]=mn(!1),R=_n(null),Y=_n(null),ee=_n(null),k=l!==void 0?l:b,w=d||I,L=mo(()=>{if(!ee.current)return{position:"fixed",top:0,left:0,width:200};let P=ee.current.getBoundingClientRect();if(s?.current){let fe=s.current.getBoundingClientRect();return{position:"fixed",top:P.bottom+4,left:fe.left+4,width:fe.width-8}}return{position:"fixed",top:P.bottom+4,left:P.left,width:P.width}},[s]);Vn(()=>{c||v(e)},[e,c]),Vn(()=>{if(!k&&!D)return;let P=ge=>{ee.current&&!ge.composedPath().includes(ee.current)&&(w(!1),A(!1))},fe=ge=>{ge.key==="Escape"&&(w(!1),A(!1))};return document.addEventListener("mousedown",P),document.addEventListener("keydown",fe),()=>{document.removeEventListener("mousedown",P),document.removeEventListener("keydown",fe)}},[k,D]),Vn(()=>{c&&R.current&&(R.current.focus(),R.current.select())},[c]);let h=Li(()=>{if(!f||f.startsWith("#")||f.startsWith("rgb")||f.startsWith("hsl")||f.startsWith("oklch"))return[];let P=f.toLowerCase();return n.filter(fe=>fe.name.toLowerCase().includes(P)||fe.usage.toLowerCase().includes(P)).slice(0,8)},[f,n]),C=()=>{r(f),u(!1),A(!1)},M=P=>{v(P),P.includes("var")||P.includes("--")||P.length>0&&!P.startsWith("#")?A(!0):A(!1)},ae=P=>{v(P.value),r(P.value),w(!1),A(!1),u(!1)},Fe=()=>{setTimeout(()=>{!k&&!D&&C()},150)},me=P=>{P.key==="Enter"?C():P.key==="Escape"&&(v(e),u(!1),A(!1))},G=Li(()=>{let P=t.trim().toLowerCase();if(P.startsWith("#"))return P.length===4?`#${P[1]}${P[1]}${P[2]}${P[2]}${P[3]}${P[3]}`:P.slice(0,7);let fe=P.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(fe){let Le=parseInt(fe[1],10).toString(16).padStart(2,"0"),Pe=parseInt(fe[2],10).toString(16).padStart(2,"0"),Qe=parseInt(fe[3],10).toString(16).padStart(2,"0");return`#${Le}${Pe}${Qe}`}let ge=P.match(/oklch\(\s*([\d.]+)/);if(ge){let Le=Math.max(0,Math.min(1,parseFloat(ge[1]))),Pe=Math.round(Le*255).toString(16).padStart(2,"0");return`#${Pe}${Pe}${Pe}`}return"#000000"},[t]);return zt("div",{ref:ee,onMouseEnter:()=>_(!0),onMouseLeave:()=>_(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:c?i:F?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Yn,transition:"border-color 100ms ease",overflow:"hidden"},children:[zt("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[zt("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[ye("input",{type:"color",value:G,onChange:P=>{let fe=P.target.value;v(fe),r(fe)},style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),ye("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),c?ye("input",{ref:R,type:"text",value:f,onChange:P=>M(P.target.value),onKeyDown:me,onBlur:Fe,style:{...gn,flex:1,minWidth:0}}):ye("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:a?i:"inherit"},title:p,children:p}),n.length>0&&ye("button",{type:"button",onClick:()=>w(!k),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:ye(_s,{size:12})})]}),D&&h.length>0&&ye("div",{style:{...L(),backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,maxHeight:200,overflowY:"auto",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:h.map(P=>zt("button",{type:"button",onClick:()=>ae(P),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:[ye("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:P.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),ye("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:P.name})]},P.name))}),k&&ye("div",{ref:Y,style:{...L(),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(P=>zt("button",{type:"button",onClick:()=>ae(P),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:o?.usage===P.usage||e===P.value?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o?.usage===P.usage||e===P.value?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[ye("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:P.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),ye("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:P.name}),(o?.usage===P.usage||e===P.value)&&ye(Ri,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},P.name))})]})}function Fl({element:e,elementInfo:t,selector:n,styleModifications:o,dispatch:r,onClose:i,onHover:a,accentColor:s="#3b82f6",toolbarRef:l}){let d=_n(null),c=_n(null),[u,p]=mn(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch{return!1}});Vn(()=>{if(u)return;let X=setTimeout(()=>p(!0),50);return()=>clearTimeout(X)},[u]);let[f,v]=mn(null),[b,I]=mn(null),D=f!==null||b!==null,[A,F]=mn("rem"),_=mo(()=>{F(X=>X==="rem"?"px":"rem")},[]),R=_n(new Map),[Y,ee]=mn(""),k=Li(()=>hs(),[]);Vn(()=>{let X=Q=>{if(Q.key!=="Escape")return;let we=document.activeElement;we&&d.current?.contains(we)||i()};return window.addEventListener("keydown",X),()=>window.removeEventListener("keydown",X)},[i]);let w=_n({top:0,left:0,maxHeight:400}),[,L]=mn(0),h="devtools-panel-position",C=_n({x:0,y:0}),M=_n(null),ae=_n(!1);Vn(()=>{try{let X=localStorage.getItem(h);if(X){let Q=JSON.parse(X);typeof Q.top=="number"&&typeof Q.left=="number"&&(ae.current=!0,w.current={...w.current,top:Q.top,left:Q.left})}}catch{}},[]),Vn(()=>{let X=we=>{let je=M.current;if(!je)return;let st=je.startOffsetX+(we.clientX-je.startX),Ee=je.startOffsetY+(we.clientY-je.startY),et=280,Ke=16,tt=Math.max(Ke,Math.min(window.innerWidth-et-Ke,w.current.left+st)),pt=Math.max(Ke,w.current.top+Ee);C.current={x:tt-w.current.left,y:pt-w.current.top};let mt=d.current,te=mt?.parentElement;if(!te)return;te.style.top=`${pt}px`,te.style.left=`${tt}px`;let ne=l?.current?.getBoundingClientRect(),de=window.innerHeight-16;ne&&tt+et>ne.left&&(de=ne.top-8);let We=Math.max(0,pt),qe=Math.max(200,de-We);mt&&(mt.style.maxHeight=`${qe}px`)},Q=()=>{if(!M.current)return;let we=w.current.top+C.current.y,je=w.current.left+C.current.x;w.current={...w.current,top:we,left:je},C.current={x:0,y:0},ae.current=!0;try{localStorage.setItem(h,JSON.stringify({top:we,left:je}))}catch{}M.current=null};return window.addEventListener("mousemove",X),window.addEventListener("mouseup",Q),()=>{window.removeEventListener("mousemove",X),window.removeEventListener("mouseup",Q)}},[]);let Fe=mo(X=>{X.button!==0||X.target.closest("button")||(X.preventDefault(),M.current={startX:X.clientX,startY:X.clientY,startOffsetX:C.current.x,startOffsetY:C.current.y})},[]);Vn(()=>{C.current={x:0,y:0};let X=(je=!1)=>{let st=d.current,Ee=280,et=8,Ke,tt;if(ae.current)Ke=w.current.top,tt=w.current.left;else{let de=e.getBoundingClientRect();tt=de.right+et,Ke=de.top,tt+Ee>window.innerWidth-et&&(tt=de.left-Ee-et),tt<et&&(tt=Math.max(et,(window.innerWidth-Ee)/2))}let pt=l?.current?.getBoundingClientRect(),mt=window.innerHeight-16;pt&&tt+Ee>pt.left&&(mt=pt.top-et);let te=Math.max(0,Ke),ne=Math.max(200,mt-te);if(w.current={top:Ke,left:tt,maxHeight:ne},je&&st){let de=st.parentElement;de&&!ae.current&&(de.style.top=`${Ke+C.current.y}px`,de.style.left=`${tt+C.current.x}px`),st.style.maxHeight=`${ne}px`}else L(de=>de+1)};X(!1);let Q=()=>X(!0),we=()=>X(!1);return window.addEventListener("scroll",Q,{passive:!0}),window.addEventListener("resize",we,{passive:!0}),()=>{window.removeEventListener("scroll",Q),window.removeEventListener("resize",we)}},[e]),Vn(()=>{let X=d.current;if(!X)return;let Q=we=>{let je=c.current;if(!je){we.preventDefault();return}let{scrollTop:st,scrollHeight:Ee,clientHeight:et}=je,Ke=st<=0&&we.deltaY<0,tt=st+et>=Ee&&we.deltaY>0;(Ke||tt)&&we.preventDefault()};return X.addEventListener("wheel",Q,{passive:!1}),()=>X.removeEventListener("wheel",Q)},[]);let me=Li(()=>o.find(X=>X.selector===n),[o,n]),G=mo(X=>{let Q=me?.changes.find(we=>we.property===X);return Q?Q.modified:gi(e,X)},[e,me]),se=mo((X,Q)=>{if(!X.includes("color"))return Q;let we=Q.trim(),st=k.find(Ee=>Ee.usage===we||Ee.name===we)?.value||we;return Ir(e,st)},[k,e]),P=mo(X=>{if(R.current.has(X))return R.current.get(X);let Q=me?.changes.find(je=>je.property===X);if(Q)return Q.original;let we=gi(e,X);return R.current.set(X,we),we},[e,me]),fe=mo((X,Q)=>{let we=P(X),je=se(X,Q);Ye(e,X,je),X==="backdrop-filter"&&Ye(e,"-webkit-backdrop-filter",je),r({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:X,original:we,modified:je}})},[e,n,t,r,se,P]),ge=mo(X=>{o.find(je=>je.selector===n)?.changes.find(je=>je.property===X)&&e instanceof HTMLElement&&(e.style.removeProperty(X),r({type:"CLEAR_STYLE",payload:{selector:n,property:X}}),R.current.delete(X))},[e,n,o,r]),Le=mo(()=>{let X=Y.split(";").map(Q=>Q.trim()).filter(Q=>Q);for(let Q of X){let we=Q.indexOf(":");if(we>0){let je=Q.slice(0,we).trim(),st=Q.slice(we+1).trim();je&&st&&fe(je,st)}}ee("")},[Y,fe]),Pe=mo(X=>me?.changes.some(Q=>Q.property===X)??!1,[me]),Qe=X=>{let Q=G(X.property),we=Pe(X.property),je=!we&&pp(X.property,Q),st={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(je&&X.type!=="backdrop-filter")return ye(Lo,{modified:!1,children:ye("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:Ee=>fe(X.property,Ee.target.value),style:{...st,color:"#999"}})});switch(X.type){case"color":{let Ee=Ir(e,Q),et=Q.includes("var(")?null:Gr(Ee,k);return ye(Hs,{value:Q,resolvedValue:Ee,colorVariables:k,matchingVariable:et,onChange:Ke=>fe(X.property,Ke),accentColor:s,modified:we,panelContentRef:c,isDropdownOpen:b===X.property,onDropdownChange:Ke=>I(Ke?X.property:null)})}case"number":{if(!!Ei[X.property])return ye(Lo,{modified:we,children:ye(io,{property:X.property,value:Q,onChange:Ke=>fe(X.property,Ke),isModified:we,min:X.min,max:X.max,step:X.step||1,style:{...st,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:A,onUnitCycle:_})});let{num:et}=$o(Q);return ye(Lo,{modified:we,children:ye("input",{type:"number",value:et,min:X.min,max:X.max,step:X.step||1,onChange:Ke=>fe(X.property,Ke.target.value),style:st})})}case"select":return ye(Lo,{modified:we,children:zt("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[ye("select",{value:Q,onChange:Ee=>fe(X.property,Ee.target.value),style:{...st,cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"},children:X.options?.map(Ee=>ye("option",{value:Ee,children:Ee},Ee))}),ye("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:ye(_s,{size:12})})]})});case"spacing":return ye(Lo,{modified:we,children:ye("input",{type:"text",value:Q,onChange:Ee=>fe(X.property,Ee.target.value),placeholder:"e.g., 10px or 10px 20px",style:st})});case"backdrop-filter":return ye(Il,{value:Q,onChange:Ee=>fe(X.property,Ee),accentColor:s,modified:we,panelContentRef:c});default:return ye(Lo,{modified:we,children:ye("input",{type:"text",value:Q,onChange:Ee=>fe(X.property,Ee.target.value),style:st})})}},ce=t.reactComponent||t.tagName,Ce={position:"fixed",top:w.current.top,left:w.current.left,width:280,maxHeight:w.current.maxHeight,backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",zIndex:10002,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,overflow:"visible",display:"flex",flexDirection:"column",opacity:u?1:0,transition:"opacity 150ms ease"},ze={display:"flex",alignItems:"center",justifyContent:"space-between",margin:4,padding:"4px 5px 4px 10px",backgroundColor:s,color:"#ffffff",cursor:M.current?"grabbing":"grab",userSelect:"none",WebkitUserSelect:"none"},rt={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"},ut={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},$e={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return ye("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:w.current.top+C.current.y,left:w.current.left+C.current.x,zIndex:10002,pointerEvents:"none"},children:zt("div",{ref:d,"data-devtools":"panel",style:{...Ce,position:"relative",top:0,left:0,zIndex:0,pointerEvents:"auto"},onMouseEnter:()=>a?.("element"),onMouseLeave:()=>a?.(null),children:[ye("div",{"aria-hidden":"true",style:Ci()}),zt("div",{style:ze,onMouseDown:Fe,children:[ye("div",{style:{display:"flex",alignItems:"center",gap:3,overflow:"hidden",minWidth:0},children:ye("span",{style:{fontWeight:600,fontSize:12,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:ce})}),ye("button",{type:"button",onClick:i,title:"Close",style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1,flexShrink:0},children:"\xD7"})]}),zt("div",{ref:c,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[ye("div",{style:{opacity:b?.3:1,transition:"opacity 150ms ease"},children:ye(Pl,{element:e,getValue:G,getOriginalValue:P,handleChange:fe,isModified:Pe,onResetProperty:ge,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:rt,activeDropdown:f,onDropdownChange:v,panelContentRef:c,accentColor:s,onFieldHover:a,preferredUnit:A,onUnitCycle:_})}),ye("div",{style:{opacity:f?.3:1,transition:"opacity 150ms ease"},children:ye(Hl,{element:e,getValue:G,handleChange:fe,isModified:Pe,onResetProperty:ge,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:rt,accentColor:s,colorVariables:k,activeColorDropdown:b,onColorDropdownChange:I,panelContentRef:c,preferredUnit:A,onUnitCycle:_})}),Nl.map((X,Q)=>{let we=Q===Nl.length-1,je=b&&X.properties.some(Ee=>Ee.property===b);return zt("div",{style:{borderBottom:we?"none":"1px solid rgba(0,0,0,0.08)",opacity:D&&!je?.3:1,transition:"opacity 150ms ease"},children:[ye("div",{style:rt,children:ye("span",{children:X.name})}),ye("div",{style:{padding:"4px 0"},children:X.properties.map(Ee=>{let et=Pe(Ee.property),Ke=je&&Ee.property!==b;return zt("div",{style:{...ut,opacity:Ke?.3:1,transition:"opacity 150ms ease"},children:[ye("span",{onClick:et?()=>ge(Ee.property):void 0,title:et?"Click to reset":void 0,style:{...$e,color:et?s:"#64748b",fontWeight:et?600:400,cursor:et?"pointer":"default"},children:Ee.label}),ye("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:Qe(Ee)})]},Ee.property)})})]},X.name)}),zt("div",{style:{opacity:D?.3:1,transition:"opacity 150ms ease"},children:[ye("div",{style:rt,children:ye("span",{children:"Raw CSS"})}),zt("div",{style:{padding:"8px 12px"},children:[ye("textarea",{value:Y,onChange:X=>ee(X.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"}}),Y.trim()&&ye("button",{type:"button",onClick:Le,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:s,color:"#fff",cursor:"pointer",opacity:Y.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as gp,useLayoutEffect as mp,useState as hp}from"react";import{Fragment as xp,jsx as rr,jsxs as vp}from"react/jsx-runtime";var Ns=["flex-start","center","flex-end"],Fs=["flex-start","center","flex-end"];function yp(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function bp(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 zl(e){let t=Array.from(e.children);if(t.length===0)return null;let n=1/0,o=1/0,r=-1/0,i=-1/0;for(let a of t){let s=a.getBoundingClientRect();s.width===0&&s.height===0||(s.top<n&&(n=s.top),s.left<o&&(o=s.left),s.bottom>r&&(r=s.bottom),s.right>i&&(i=s.right))}return n===1/0?null:new DOMRect(o,n,i-o,r-n)}function $l({element:e,modifier:t,accentColor:n,refreshKey:o=0}){let[r,i]=hp(null);if(gp(()=>{if(!e){i(null);return}let b=()=>i(zl(e));return b(),window.addEventListener("scroll",b,{passive:!0}),window.addEventListener("resize",b,{passive:!0}),()=>{window.removeEventListener("scroll",b),window.removeEventListener("resize",b)}},[e]),mp(()=>{e&&i(zl(e))},[e,o]),!r)return null;let a=r,s=window.getComputedStyle(e),l=s.display;if(l!=="flex"&&l!=="inline-flex")return null;let d=s.flexDirection,c=d==="column"||d==="column-reverse"?"vertical":"horizontal",u=c==="horizontal"?"vertical":"horizontal",p=[];if(t==="shift"){let b=yp(s.justifyContent);if(b){let I=Ns.indexOf(b);c==="horizontal"?(I>0&&p.push("left"),I<Ns.length-1&&p.push("right")):(I>0&&p.push("up"),I<Ns.length-1&&p.push("down"))}}else{let b=bp(s.alignItems);if(b){let I=Fs.indexOf(b);u==="horizontal"?(I>0&&p.push("left"),I<Fs.length-1&&p.push("right")):(I>0&&p.push("up"),I<Fs.length-1&&p.push("down"))}}if(p.length===0)return null;let f=14,v=7;return rr(xp,{children:p.map(b=>{let I,D;switch(b){case"right":I=a.right+f,D=a.top+a.height/2;break;case"left":I=a.left-f,D=a.top+a.height/2;break;case"down":I=a.left+a.width/2,D=a.bottom+f;break;case"up":I=a.left+a.width/2,D=a.top-f;break}let A=b==="right"?0:b==="left"?180:b==="down"?90:-90,F={position:"fixed",left:I-v,top:D-v,width:v*2,height:v*2,pointerEvents:"none",zIndex:9997};return rr("div",{"data-devtools":"swipe-hint",style:F,children:rr("svg",{width:v*2,height:v*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:vp("g",{transform:`rotate(${A})`,children:[rr("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),rr("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),rr("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),rr("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},b)})})}import{useEffect as Sp,useLayoutEffect as wp,useState as Cp}from"react";import{jsx as zs,jsxs as $s}from"react/jsx-runtime";function Ep(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 Wl({element:e,fontSize:t,lineHeight:n,accentColor:o,hoveredProperty:r,draggingProperty:i,cursorViewport:a}){let[s,l]=Cp(null);if(Sp(()=>{if(!e){l(null);return}let D=()=>{l(Mr(e))};return D(),window.addEventListener("scroll",D,{passive:!0}),window.addEventListener("resize",D,{passive:!0}),()=>{window.removeEventListener("scroll",D),window.removeEventListener("resize",D)}},[e]),wp(()=>{e&&l(Mr(e))},[e,t,n]),!s)return null;let d=s.width,c=s.height,u=Ep(o,.2),p=i??r,f=8,v=2,b={position:"fixed",top:s.top,left:s.left,width:d,height:c,pointerEvents:"none",zIndex:9996,overflow:"visible"},I=D=>D==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return $s("div",{"data-devtools":"text-handles",style:b,children:[$s("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${c}`,children:[zs("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)&&zs("rect",{x:d-v/2,y:c/2-f/2,width:v,height:f,fill:o,stroke:"#ffffff",strokeWidth:p==="font-size"?4:2,paintOrder:"stroke"}),(p==="line-height"||!p)&&zs("rect",{x:d/2-f/2,y:c-v/2,width:f,height:v,fill:o,stroke:"#ffffff",strokeWidth:p==="line-height"?4:2,paintOrder:"stroke"})]}),a&&p&&(()=>{let D=p==="font-size"?"Aa":"Lh",A=I(p);return $s("div",{style:{position:"fixed",left:a.x+8,top:a.y-28,background:o,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:[D," ",A]})})()]})}import{Fragment as Or,jsx as it,jsxs as Dr}from"react/jsx-runtime";var jl=8,Ws=[0,1,2,4,8,12,16,20,24,28,32],js="devtools-active-text";function Gl(e,t,n=0,o,r){let i=e.left+window.scrollX+4,a=t==="top-left"?e.top+window.scrollY-Jn-n*Jn+4:e.bottom+window.scrollY+4-1+n*Jn,s=window.scrollY+4,l=window.scrollY+window.innerHeight-Jn-4,d=90,c=!1;if(o&&r!==void 0){let u=o.getBoundingClientRect();if(e.left+4+r+4+d>u.left){let f=window.scrollY+u.top-Jn-4;f<l&&(l=f,c=!0)}}return a<s?a=e.top+window.scrollY+4:a>l&&(a=c?l:Math.max(e.top+window.scrollY+4,l)),{x:i,y:a}}function Jl({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:o,activeAnnotationIds:r,queuePositionMap:i,inFlightStyleSelectors:a,inFlightSelectorColors:s,onAttachImages:l,onReply:d,onViewThread:c,onCloseThread:u,onModelComponentsAdd:p,onModelComponentFocus:f,onModelComponentHover:v,modelComponentNames:b,modelPanelHoveredComponent:I,modelSpacingTokenHover:D,highlightedAnnotationIds:A,focusedThreadAnnotationId:F,externalCanvasRef:_,toolbarRef:R}){let{canvasRef:Y,redrawAll:ee,resizeCanvas:k}=Ja(),w=sn(m=>{Y.current=m,_&&(_.current=m)},[_,Y]),L=Xt(!1);bn(()=>{let m=Y.current;if(!m)return;let S=()=>{L.current&&(L.current=!1,m.style.pointerEvents="")},j=g=>{g.button===0&&L.current&&S()};return window.addEventListener("mousedown",j),()=>window.removeEventListener("mousedown",j)},[Y]);let[h,C]=dt(!1),[M,ae]=dt(()=>{if(typeof window>"u")return null;try{let m=localStorage.getItem(js);return m?JSON.parse(m):null}catch{return null}}),[Fe,me]=dt(null),[G,se]=dt(null),[P,fe]=dt(null),ge=Xt(null),Le=Xt(null),Pe=Xt({x:0,y:0}),Qe=Xt([]),ce=Xt(0),[Ce,ze]=dt(null),[rt,ut]=dt(new Map),$e=Xt(0),X=Xt(null),[Q,we]=dt(null),[je,st]=dt(null),[Ee,et]=dt(null),[Ke,tt]=dt(null),pt=Xt({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}),[mt,te]=dt(null),[ne,de]=dt(null),[We,qe]=dt(null),[Re,Ht]=dt(null),$t=Xt({x:0,y:0}),[Cn,Dn]=dt({x:0,y:0}),Wt=Xt({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}),[Ct,cn]=dt(null),[ft,qt]=dt(null),[Ze,nt]=dt(null),[lt,vn]=dt(!1),[uo,Xn]=dt(0),[Nn,Gt]=dt(null),ht=Xt({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}),[O,ve]=dt(null),[De,Pt]=dt(null),[Rt,hn]=dt(null),dn=Xt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[Jt,En]=dt(null),[un,qn]=dt(null),[_t,po]=dt(null),Zn=Ya(),vo=Xt(s);vo.current=s;let Qn=sn(m=>{let S=vo.current;if(!S||S.size===0)return!1;for(let j of S.keys())try{if(m.matches(j))return!0}catch{}return!1},[]),kn=Xt(e);kn.current=e;let eo=Xt(M);eo.current=M;let fo=Xt([]),Zt=Xt(n);Zt.current=n;let[Mt,Yt]=dt(null),tn=e.selectedAnnotationIds;fo.current=tn;let On=sn((m,S=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:m,addToSelection:S}})},[t]),Gn=sn(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[Tn,Oo]=dt(null),[Vt,pr]=dt({x:window.scrollX,y:window.scrollY});bn(()=>(k(),window.addEventListener("resize",k),()=>window.removeEventListener("resize",k)),[k]),bn(()=>{let m=()=>{pr({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",m,{passive:!0}),()=>window.removeEventListener("scroll",m)},[]),bn(()=>{M?localStorage.setItem(js,JSON.stringify(M)):localStorage.removeItem(js)},[M]),Va(M,ae,Fe,e.annotations,t);let xo=Xt(Ce);xo.current=Ce,bn(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let m=S=>{if(!S.altKey||!xo.current)return;S.preventDefault();let j=S.deltaY>0?-1:1;$e.current=Math.max(0,$e.current+j);let g=X.current;if(g){let E=pi(g,$e.current);ze(E)}};return window.addEventListener("wheel",m,{passive:!1}),()=>window.removeEventListener("wheel",m)},[e.activeTool,e.isAnnotating]),bn(()=>{e.activeTool!=="model"&&(ze(null),ut(new Map),$e.current=0,X.current=null)},[e.activeTool]),bn(()=>{let m=Ce?.name??null,S=m&&b?.has(m)?m:null;v?.(S)},[Ce,b,v]);let[to,So]=dt(null);bn(()=>{if(!I){So(null);return}let m=Er(I.name),S=I.instanceIndex;So(m[S%m.length]??null)},[I]);let[fr,wo]=dt([]);bn(()=>{if(!D){wo([]);return}D.token?.bindings?.length?wo(ps(D.token)):wo(ds(D.px))},[D]);let Mn=Xt(null),Bo=Xt(null);Mn.current=Ct,Bo.current=ft,bn(()=>{let m=["flex-start","center","flex-end"],S=["flex-start","center","flex-end"],g=null,E=!1,y=null,B=null,T=(le,Ge)=>{let Be=Zo(le,Ge);for(;Be&&Be!==document.documentElement;){let Ut=window.getComputedStyle(Be).display;if(Ut==="flex"||Ut==="inline-flex")return Be;Be=Be.parentElement}return null},$=le=>{let Ge=window.getComputedStyle(le).flexDirection;return Ge==="column"||Ge==="column-reverse"?"vertical":"horizontal"},U=le=>{let Ge=le.getAttribute("data-pm");return Ge||(Ge=Math.random().toString(36).substring(2,8),le.setAttribute("data-pm",Ge)),{selector:`[data-pm="${Ge}"]`,durableSelector:Fn(le)}},N=()=>{E=!0,g&&clearTimeout(g),g=setTimeout(()=>{E=!1,g=null},300)},J=(le,Ge,Ot)=>{let Be=$(le);if(Ge===Be){let Rn=window.getComputedStyle(le).justifyContent,xt=Rn==="normal"||Rn==="flex-start"||Rn==="start"?"flex-start":Rn==="flex-end"||Rn==="end"?"flex-end":Rn==="center"?"center":null;if(!xt)return;let Go=m.indexOf(xt)+Ot;if(Go<0||Go>=m.length)return;let Eo=m[Go],{selector:Jo,durableSelector:Yi}=U(le);Ye(le,"justify-content",Eo),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Jo,durableSelector:Yi,element:Pn(le),changes:[{property:"justify-content",original:Rn,modified:Eo}]}})}else{let Rn=window.getComputedStyle(le).flexDirection,xt=Be==="horizontal"?"column":"row",{selector:Co,durableSelector:Go}=U(le);Ye(le,"flex-direction",xt),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Co,durableSelector:Go,element:Pn(le),changes:[{property:"flex-direction",original:Rn,modified:xt}]}})}Xn(Ut=>Ut+1)},K=(le,Ge,Ot)=>{let Ut=$(le)==="horizontal"?"vertical":"horizontal";if(Ge!==Ut)return;let xt=window.getComputedStyle(le).alignItems,Co=xt==="normal"||xt==="stretch"||xt==="flex-start"||xt==="start"?"flex-start":xt==="flex-end"||xt==="end"?"flex-end":xt==="center"?"center":null;if(!Co)return;let Eo=S.indexOf(Co)+Ot;if(Eo<0||Eo>=S.length)return;let Jo=S[Eo],{selector:Yi,durableSelector:zc}=U(le);Ye(le,"align-items",Jo),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Yi,durableSelector:zc,element:Pn(le),changes:[{property:"align-items",original:xt,modified:Jo}]}}),Xn($c=>$c+1)},V=20,be=null,Ie=null,Je=0,gt=(le,Ge,Ot)=>{let Be=T(Ge,Ot);Gt(Be?{modifier:le,target:Be}:null)},bt=le=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(le.key==="Shift"&&!le.altKey){let Ge=$t.current;gt("shift",Ge.x,Ge.y)}else if(le.key==="Alt"&&!le.shiftKey){let Ge=$t.current;gt("alt",Ge.x,Ge.y)}}},vt=le=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let Ge=le.shiftKey&&!le.altKey,Ot=le.altKey&&!le.shiftKey;if(!Ge&&!Ot||le.buttons!==0){be=null,Ie=null,Je=0,y=null,B=null,Gt(null);return}if(y===null&&(y=le.clientX,B=le.clientY,gt(Ge?"shift":"alt",le.clientX,le.clientY)),E)return;be===null&&(be=le.clientX,Ie=le.clientY,Je=0);let Be=le.clientX-be,Ut=le.clientY-Ie,Rn=Math.abs(Be)>=Math.abs(Ut)?Be:Ut;if(Math.abs(Rn)>3){let Jo=Rn>0?1:-1;if(Je!==0&&Jo!==Je){be=le.clientX,Ie=le.clientY,Je=0;return}Je=Jo}if(Math.abs(Be)<V&&Math.abs(Ut)<V)return;let xt=T(y,B);if(!xt)return;let Co=Math.abs(Be)>=Math.abs(Ut)?"horizontal":"vertical",Eo=(Co==="horizontal"?Be:Ut)>0?1:-1;be=null,Ie=null,Je=0,Ge?J(xt,Co,Eo):K(xt,Co,Eo),N()},Dt=le=>{(le.key==="Shift"||le.key==="Alt")&&(y=null,B=null,be=null,Ie=null,Je=0,Gt(null))},ct=()=>{Gt(null),be=null,Ie=null,Je=0};return window.addEventListener("keydown",bt),window.addEventListener("mousemove",vt),window.addEventListener("mousedown",ct),window.addEventListener("keyup",Dt),()=>{window.removeEventListener("keydown",bt),window.removeEventListener("mousemove",vt),window.removeEventListener("mousedown",ct),window.removeEventListener("keyup",Dt),g&&clearTimeout(g)}},[e.activeTool,e.isAnnotating,t]),bn(()=>{let m=S=>{if(S.key==="Escape"){if(eo.current)return;if(e.activeTool==="model"&&rt.size>0){S.preventDefault(),ut(new Map);return}if(fo.current.length>0){S.preventDefault(),Gn();return}}if(S.key==="Enter"&&e.activeTool==="model"&&rt.size>0&&p){S.preventDefault();let y=[...rt.keys()].filter(B=>!b?.has(B));y.length>0&&p(y),ut(new Map);return}if((S.metaKey||S.ctrlKey)&&S.key==="v"&&Qe.current.length>0&&!eo.current){S.preventDefault(),ce.current++;let y=ce.current*20,T=Qe.current[0]?.groupId?Math.random().toString(36).substring(2,9):void 0,$=Qe.current.map(N=>({...N,id:Math.random().toString(36).substring(2,9),groupId:N.groupId?T:void 0,timestamp:Date.now(),points:N.points.map(J=>({x:J.x+y,y:J.y+y}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:$}});let U=$.find(N=>N.type!=="text")||$[0];U&&On(U.id);return}let j=fo.current;if(j.length===0||eo.current)return;let g=S.composedPath?.()[0]??S.target,E=g?.tagName;if(!(E==="INPUT"||E==="TEXTAREA"||g?.isContentEditable)&&(S.key==="Delete"||S.key==="Backspace")){if(S.preventDefault(),u){let y=kn.current.annotations;for(let B of j){let T=y.find(U=>U.id===B);if(!T)continue;let $=T.threadId||T.groupId&&y.find(U=>U.groupId===T.groupId&&U.threadId)?.threadId;$&&u($)}}for(let y of j)t({type:"DELETE_ANNOTATION",payload:{id:y}});Gn()}};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[t,Gn,On,e.activeTool,rt,b,p,u]);let H=vr(),z=Ai(()=>e.annotations.filter(m=>!m.pathname||m.pathname===H),[e.annotations,H]),q=Ai(()=>wi(e.annotations),[e.annotations]),oe=Ai(()=>{let m=new Map,S=new Set,j=1,g=[...e.annotations].sort((E,y)=>E.timestamp-y.timestamp);for(let E of g)if(!q.has(E))if(E.groupId){if(!S.has(E.groupId)){S.add(E.groupId);let y=e.annotations.filter(B=>B.groupId===E.groupId);for(let B of y)m.set(B.id,j);j++}}else m.set(E.id,j),j++;return m},[e.annotations,q]),pe=Ai(()=>{if(tn.length===0)return null;let m=new Map;for(let S of tn){let j=e.annotations.find(E=>E.id===S);if(!j)continue;let g=j.groupId?e.annotations.filter(E=>E.groupId===j.groupId):[j];for(let E of g)if(E.linkedSelector&&!s?.has(E.linkedSelector)){let y=E.color||e.activeColor;m.set(E.linkedSelector,y)}}return m.size>0?m:null},[tn,e.annotations,e.activeColor,s]);bn(()=>{let m=z.filter(S=>!(q.has(S)||M&&!M.isNew&&S.id===M.id));ee(m,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,tn,jl,Vt.x,Vt.y,oe,A)},[z,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,ee,M,tn,Vt,oe,q,A]),bn(()=>{if(G){let m=Math.random().toString(36).substring(2,9);ae({id:m,point:G.point,text:"",fontSize:12,isNew:!0,groupId:G.groupId}),se(null)}},[G]),bn(()=>{P&&(ae({id:Math.random().toString(36).substring(2,9),point:P.point,text:"",fontSize:12,isNew:!0,linkedSelector:P.linkedSelector,linkedAnchor:P.linkedAnchor,elements:P.elements}),fe(null))},[P]);let Se=Xt(null),ke=M?.id??null;bn(()=>{ke&&ge.current?requestAnimationFrame(()=>{let m=ge.current;if(!m||(m.focus(),Le.current===ke))return;Le.current=ke;let S=eo.current;if(S){if(Se.current!==null){let j=Math.min(Se.current,m.value.length);m.setSelectionRange(j,j);return}if(!S.isNew&&S.clickPoint){let j=Y.current;if(!j)return;let g=j.getContext("2d");if(!g)return;g.font=`${S.fontSize}px ${Kt}`;let E=S.fontSize*1.4,y=S.text.split(`
|
|
4
|
+
`),B=S.clickPoint.y-S.point.y,T=Math.max(0,Math.min(y.length-1,Math.floor(B/E))),$=S.clickPoint.x-S.point.x,U=y[T]||"",N=0;for(let K=0;K<=U.length;K++){let V=g.measureText(U.substring(0,K)).width;if(V>$){let be=K>0?g.measureText(U.substring(0,K-1)).width:0;N=$-be<V-$?K-1:K;break}N=K}let J=N;for(let K=0;K<T;K++)J+=(y[K]?.length||0)+1;m.setSelectionRange(J,J)}}}):(Le.current=null,Se.current=null)},[ke,Y]);let he=sn(m=>{let S=Y.current;if(!S)return{x:0,y:0};let j=S.getBoundingClientRect(),g,E;if("touches"in m&&m.touches[0])g=m.touches[0].clientX,E=m.touches[0].clientY;else if("clientX"in m)g=m.clientX,E=m.clientY;else return{x:0,y:0};return{x:g-j.left+window.scrollX,y:E-j.top+window.scrollY}},[Y]),yt=sn((m,S,j,g)=>{let E=j.x-S.x,y=j.y-S.y,B=E*E+y*y;if(B===0)return Math.sqrt((m.x-S.x)**2+(m.y-S.y)**2)<=g;let T=Math.max(0,Math.min(1,((m.x-S.x)*E+(m.y-S.y)*y)/B)),$=S.x+T*E,U=S.y+T*y;return Math.sqrt((m.x-$)**2+(m.y-U)**2)<=g},[]),Lt=sn(m=>{for(let j=z.length-1;j>=0;j--){let g=z[j];if(!g||q.has(g))continue;let E=(g.strokeWidth||3)+4;switch(g.type){case"text":{if(!g.points[0]||!g.text)continue;let y=g.points[0],B=g.fontSize||12,T=Y.current;if(T){let $=T.getContext("2d");if($){$.font=`${B}px ${Kt}`;let U=g.text.replace(/\n/g," "),N=y.x-Vt.x,J=Sr(N),K=wr($,U,J),V=$.measureText(K).width,be=B*1.4;if(m.x>=y.x-4-4&&m.x<=y.x+V+4+4&&m.y>=y.y-4-4&&m.y<=y.y+be+4+4)return g}}break}case"rectangle":{if(g.points.length<2)continue;let y=g.points[0],B=g.points[g.points.length-1],T=Math.min(y.x,B.x),$=Math.max(y.x,B.x),U=Math.min(y.y,B.y),N=Math.max(y.y,B.y),J=yt(m,{x:T,y:U},{x:$,y:U},E),K=yt(m,{x:T,y:N},{x:$,y:N},E),V=yt(m,{x:T,y:U},{x:T,y:N},E),be=yt(m,{x:$,y:U},{x:$,y:N},E);if(J||K||V||be)return g;break}case"circle":{if(g.points.length<2)continue;let y=g.points[0],B=g.points[g.points.length-1],T=(y.x+B.x)/2,$=(y.y+B.y)/2,U=Math.abs(B.x-y.x)/2,N=Math.abs(B.y-y.y)/2,J=m.x-T,K=m.y-$,V=Math.sqrt((J/U)**2+(K/N)**2);if(Math.abs(V-1)*Math.max(U,N)<=E)return g;break}case"line":{if(g.points.length<2)continue;let y=g.points[0],B=g.points[g.points.length-1];if(yt(m,y,B,E))return g;break}case"freehand":{if(g.points.length<2)continue;for(let y=0;y<g.points.length-1;y++){let B=g.points[y],T=g.points[y+1];if(yt(m,B,T,E))return g}break}}}return null},[z,Y,yt,q,Vt.x]),pn=sn(m=>{let S=Lt(m);return S?.type==="text"?S:null},[Lt]),Nt=sn(m=>{if(tn.length===0)return null;let S=jl/2+4;for(let j of tn){let g=e.annotations.find(E=>E.id===j);if(!(!g||g.points.length<2)){if(g.type==="line"){let E=g.points[0],y=g.points[g.points.length-1];if(Math.sqrt((m.x-E.x)**2+(m.y-E.y)**2)<=S)return{handle:"start",annotationId:j};if(Math.sqrt((m.x-y.x)**2+(m.y-y.y)**2)<=S)return{handle:"end",annotationId:j};continue}if(g.type==="circle"){let E=g.points[0],y=g.points[g.points.length-1],B=Math.min(E.x,y.x),T=Math.max(E.x,y.x),$=Math.min(E.y,y.y),U=Math.max(E.y,y.y),N=(B+T)/2,J=($+U)/2,K=[{handle:"top",x:N,y:$},{handle:"bottom",x:N,y:U},{handle:"left",x:B,y:J},{handle:"right",x:T,y:J}];for(let{handle:V,x:be,y:Ie}of K)if(Math.sqrt((m.x-be)**2+(m.y-Ie)**2)<=S)return{handle:V,annotationId:j};continue}if(g.type==="rectangle"||g.type==="freehand"){let E=g.points[0],y=g.points[g.points.length-1],B,T,$,U;g.type==="freehand"?(B=Math.min(...g.points.map(J=>J.x)),T=Math.max(...g.points.map(J=>J.x)),$=Math.min(...g.points.map(J=>J.y)),U=Math.max(...g.points.map(J=>J.y))):(B=Math.min(E.x,y.x),T=Math.max(E.x,y.x),$=Math.min(E.y,y.y),U=Math.max(E.y,y.y));let N=[{corner:"topLeft",x:B,y:$},{corner:"topRight",x:T,y:$},{corner:"bottomLeft",x:B,y:U},{corner:"bottomRight",x:T,y:U}];for(let{corner:J,x:K,y:V}of N)if(Math.sqrt((m.x-K)**2+(m.y-V)**2)<=S)return{handle:J,annotationId:j}}}}return null},[tn,e.annotations]);bn(()=>{let m=S=>{if(Pe.current={x:S.clientX+window.scrollX,y:S.clientY+window.scrollY},!M){let j=pn(Pe.current);me(j?.id||null)}};return window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m)},[M,pn]);let Ve=sn(()=>{if(!M)return;let m=M.images?.length||0;if(M.text.trim()||m>0)if(M.isNew){let S=ai();t({type:"ADD_TEXT",payload:{point:M.point,text:M.text||(m>0?`[${m} image${m>1?"s":""}]`:""),fontSize:M.fontSize,id:S,groupId:M.groupId,linkedSelector:M.linkedSelector,linkedAnchor:M.linkedAnchor,elements:M.elements,...m>0?{imageCount:m}:{}}}),m>0&&M.images&&l&&l(S,M.images)}else t({type:"UPDATE_TEXT",payload:{id:M.id,text:M.text||(m>0?`[${m} image${m>1?"s":""}]`:""),...m>0?{imageCount:m}:{}}}),m>0&&M.images&&l&&l(M.id,M.images);else M.isNew||t({type:"DELETE_ANNOTATION",payload:{id:M.id}});ae(null)},[M,t,l]),Ft=sn(m=>{for(let S=0;S<Ws.length-1;S++){let j=Ws[S],g=Ws[S+1];if(m<=(j+g)/2)return j;if(m<g)return g}return Math.round(m/8)*8},[]),Bn=sn((m,S,j,g)=>{let E=j.top+Math.max(g.top,4),y=j.bottom-Math.max(g.bottom,4),B=j.left+Math.max(g.left,4),T=j.right-Math.max(g.right,4);if(m<j.left||m>j.right||S<j.top||S>j.bottom)return null;let $=S<E,U=S>y,N=m<B,J=m>T;return $&&N?g.top>=g.left?"top":"left":$&&J?g.top>=g.right?"top":"right":U&&N?g.bottom>=g.left?"bottom":"left":U&&J?g.bottom>=g.right?"bottom":"right":$?"top":U?"bottom":N?"left":J?"right":null},[]),yn=sn(m=>{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 S=he(m),j="shiftKey"in m&&m.shiftKey;if(e.activeTool==="inspector"){if("button"in m&&m.button===2)return;if(Q&&!Qn(Q)){let y=e.annotations.find(Je=>{if(!Je.linkedSelector||!Je.threadId)return!1;try{return Q.matches(Je.linkedSelector)}catch{return!1}});if(y?.threadId&&c){c(y.threadId),requestAnimationFrame(()=>{document.querySelector("[data-popmelt-shadow-host]")?.shadowRoot?.querySelector("[data-popmelt-reply]")?.focus()});return}let B=Pn(Q),T=Fn(Q),$=Q.getBoundingClientRect(),U=Q.getAttribute("data-pm");U||(U=Math.random().toString(36).substring(2,8),Q.setAttribute("data-pm",U));let N=`[data-pm="${U}"]`,J=e.styleModifications.some(Je=>{try{return Q.matches(Je.selector)}catch{return!1}}),K=e.annotations.filter(Je=>{if(!Je.linkedSelector)return!1;try{return Q.matches(Je.linkedSelector)}catch{return!1}}).length,V=(J?1:0)+K,be=$.top>=Jn*(1+V)?"top-left":"bottom-left",Ie=Gl($,be,V,R?.current);fe({point:Ie,linkedSelector:N,linkedAnchor:be,elements:[{...B,selector:T}]})}return}if(e.activeTool==="model"){if("button"in m&&m.button===2)return;if(Ce){let y=Ce.name;if(b?.has(y)){f?.(y);return}"shiftKey"in m&&m.shiftKey?ut(T=>{let $=new Map(T);return $.has(y)?$.delete(y):$.set(y,Ce),$}):rt.size===1&&rt.has(y)?(p&&p([y]),ut(new Map)):ut(new Map([[y,Ce]]))}return}if(e.activeTool==="hand"&&Ct&&ft){let y=Ct,B=y.getAttribute("data-pm");B||(B=Math.random().toString(36).substring(2,8),y.setAttribute("data-pm",B));let T=Fn(y),$=`[data-pm="${B}"]`,U=Pn(y),N=Qo(y),J=S.x-window.scrollX,K=S.y-window.scrollY,V=lt,be=window.getComputedStyle(y).justifyContent,Ie=0;if(V){let gt=Io(y).find(bt=>bt.axis===ft);Ie=gt?ft==="column"?gt.w:gt.h:0}Ye(y,"transition","none"),Wt.current={isDragging:!0,hasMoved:!1,axis:ft,startX:J,startY:K,originalRow:V?Ie:N.row,originalColumn:V?Ie:N.column,element:y,elementInfo:{...U,selector:$},selector:$,durableSelector:T,isAuto:V,originalJustifyContent:be,visualGap:Ie},nt({axis:ft,row:V?Ie:N.row,column:V?Ie:N.column});return}if(e.activeTool==="hand"&&Jt&&un){let y=Jt,B=y.getAttribute("data-pm");B||(B=Math.random().toString(36).substring(2,8),y.setAttribute("data-pm",B));let T=`[data-pm="${B}"]`,$=Pn(y),{fontSize:U,lineHeight:N}=jr(y),J=U>0?N/U:1.2,K=S.x-window.scrollX,V=S.y-window.scrollY;Ye(y,"transition","none");let be=Fn(y);dn.current={isDragging:!0,property:un,startX:K,startY:V,originalFontSize:U,originalLineHeight:N,originalRatio:J,element:y,elementInfo:{...$,selector:T},selector:T,durableSelector:be},po({property:un,fontSize:U,lineHeight:N});return}if(e.activeTool==="hand"&&O&&De){let y=O,B=y.getAttribute("data-pm");B||(B=Math.random().toString(36).substring(2,8),y.setAttribute("data-pm",B));let T=`[data-pm="${B}"]`,$=Fn(y),U=Pn(y),N=er(y),J=y.getBoundingClientRect(),K=Math.floor(J.height/2),V=S.y-window.scrollY;Ye(y,"transition","none"),ht.current={isDragging:!0,corner:De,startY:V,original:N,maxRadius:K,element:y,elementInfo:{...U,selector:T},selector:T,durableSelector:$},hn({corner:De,radius:{...N}});return}if(e.activeTool==="hand"&&mt&&ne){let y=mt,B=y.getAttribute("data-pm");B||(B=Math.random().toString(36).substring(2,8),y.setAttribute("data-pm",B));let T=`[data-pm="${B}"]`,$=Fn(y),U=Pn(y),N=Tr(y),J=S.x-window.scrollX,K=S.y-window.scrollY;Ye(y,"transition","none"),pt.current={isDragging:!0,side:ne,startX:J,startY:K,original:N,element:y,elementInfo:{...U,selector:T},selector:T,durableSelector:$},Ht({side:ne,padding:{...N}});return}let g=Nt(S);if(g){let y=e.annotations.find(B=>B.id===g.annotationId);if(y&&y.type!=="text"&&(y.status??"pending")==="pending"){Oo({annotationId:g.annotationId,handle:g.handle,startPoint:S,originalPoints:[...y.points],hasMoved:!1});return}}let E=Lt(S);if(E&&E.points[0]){if(M&&Ve(),E.type!=="text"?(On(E.id,j),E.color&&t({type:"SET_COLOR",payload:E.color})):j||Gn(),c){let y=E.threadId||(E.groupId?e.annotations.find(B=>B.groupId===E.groupId&&B.threadId)?.threadId:void 0);y&&c(y)}Yt({annotation:E,startPoint:S,hasMoved:!1});return}if(j||Gn(),e.activeTool==="text"){M&&Ve();let y=Math.random().toString(36).substring(2,9);ae({id:y,point:S,text:"",fontSize:12,isNew:!0});return}C(!0),t({type:"START_PATH",payload:S})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,M,tn,Q,mt,ne,O,De,Ct,ft,lt,Jt,un,Ce,rt,b,p,f,c,he,Lt,Nt,t,On,Gn,Ve]),In=sn(m=>{let S=he(m);if(e.activeTool==="inspector"&&e.isAnnotating){let j=S.x-window.scrollX,g=S.y-window.scrollY,E=Zo(j,g),y=E&&Qn(E)?null:E;y!==Q&&(we(y),st(y?Pn(y):null));return}if(e.activeTool==="model"&&e.isAnnotating){let j=S.x-window.scrollX,g=S.y-window.scrollY,E=Zo(j,g);if(E!==X.current&&(X.current=E,$e.current=0),E){let y=pi(E,$e.current);ze(y)}else ze(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let j=S.x-window.scrollX,g=S.y-window.scrollY;$t.current={x:j,y:g},Dn({x:j,y:g});let E=Zn.current.cmd,y=Zn.current.shift;if(Wt.current.isDragging){let T=Wt.current,$=T.element;if(!$)return;if(!T.hasMoved){let K=Math.abs(j-T.startX),V=Math.abs(g-T.startY);if(K<=2&&V<=2)return;T.hasMoved=!0,T.isAuto&&(Ye($,"justify-content","normal"),Ye($,"row-gap",`${T.visualGap}px`),Ye($,"column-gap",`${T.visualGap}px`),vn(!1))}let U=T.axis,N=T.originalRow,J=T.originalColumn;if(U==="column"){let K=j-T.startX;J=T.originalColumn+K,E||(N=T.originalRow+K)}else{let K=g-T.startY;N=T.originalRow+K,E||(J=T.originalColumn+K)}N=Math.max(0,N),J=Math.max(0,J),y&&(N=Ft(N),J=Ft(J)),N=Math.round(N),J=Math.round(J),Ye($,"row-gap",`${N}px`),Ye($,"column-gap",`${J}px`),nt({axis:U,row:N,column:J});return}if(ht.current.isDragging){let T=ht.current,$=T.element;if(!$)return;let U=g-T.startY,N=T.corner,J=T.original,K={...J};if(E){let V=J[N]+U;V=Math.max(0,Math.min(T.maxRadius,V)),y&&(V=Ft(V)),V=Math.round(V),K[N]=V}else{let V=J[N]+U;V=Math.max(0,Math.min(T.maxRadius,V)),y&&(V=Ft(V)),V=Math.round(V),K={"top-left":V,"top-right":V,"bottom-right":V,"bottom-left":V}}Ye($,"border-top-left-radius",`${K["top-left"]}px`),Ye($,"border-top-right-radius",`${K["top-right"]}px`),Ye($,"border-bottom-right-radius",`${K["bottom-right"]}px`),Ye($,"border-bottom-left-radius",`${K["bottom-left"]}px`),hn({corner:N,radius:K});return}if(dn.current.isDragging){let T=dn.current,$=T.element;if(!$)return;let U=T.property,N=T.originalFontSize,J=T.originalLineHeight,K=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(U==="font-size"){let be=j-T.startX;N=T.originalFontSize+be,N=Math.max(1,N)}else{let be=g-T.startY;J=T.originalLineHeight+be,J=Math.max(N,J)}if(y)if(U==="font-size"){let be=K[0],Ie=Math.abs(N-be);for(let Je of K){let gt=Math.abs(N-Je);gt<Ie&&(be=Je,Ie=gt)}N=be}else{let be=N>0?J/N:1.2,Ie=Math.round(be*2)/2;J=N*Math.max(1,Ie)}N=Math.round(N),J=Math.round(J*10)/10,Ye($,"font-size",`${N}px`);let V=N>0?Math.round(J/N*1e3)/1e3:1.2;Ye($,"line-height",`${V}`),po({property:U,fontSize:N,lineHeight:J});return}if(pt.current.isDragging){let T=pt.current,$=T.element;if(!$)return;let U=T.side,N=T.original,J=N.top,K=N.right,V=N.bottom,be=N.left;if(U==="top"){let Ie=T.startY-g;J=N.top+Ie,E||(V=N.bottom+Ie)}else if(U==="bottom"){let Ie=g-T.startY;V=N.bottom+Ie,E||(J=N.top+Ie)}else if(U==="left"){let Ie=T.startX-j;be=N.left+Ie,E||(K=N.right+Ie)}else if(U==="right"){let Ie=j-T.startX;K=N.right+Ie,E||(be=N.left+Ie)}J=Math.max(0,J),K=Math.max(0,K),V=Math.max(0,V),be=Math.max(0,be),y&&(J=Ft(J),K=Ft(K),V=Ft(V),be=Ft(be)),J=Math.round(J),K=Math.round(K),V=Math.round(V),be=Math.round(be),Ye($,"padding",`${J}px ${K}px ${V}px ${be}px`),Ht({side:U,padding:{top:J,right:K,bottom:V,left:be}});return}let B=Zo(j,g);for(;B&&B.tagName==="A";)B=B.parentElement;{let $=[];B&&$.push(B),O&&O!==B&&$.push(O);let U=null,N=16,J=null;for(let K of $){let V=K.getBoundingClientRect(),be=er(K),Ie=[["top-left",V.left,V.top+be["top-left"]],["top-right",V.right,V.top+be["top-right"]],["bottom-right",V.right,V.bottom-be["bottom-right"]],["bottom-left",V.left,V.bottom-be["bottom-left"]]];for(let[Je,gt,bt]of Ie){let vt=Math.hypot(j-gt,g-bt);vt<N&&(N=vt,U=Je,J=K)}}if(U&&J){ve(J),Pt(U),mt&&te(null),ne&&de(null),Ct&&cn(null),ft&&qt(null),vn(!1),Jt&&En(null),un&&qn(null);return}}O&&ve(null),De&&Pt(null);{let T=[];B&&hi(B)&&T.push(B);let $=B?.parentElement??null;for(;$&&$!==document.body&&T.length<3;)hi($)&&T.push($),$=$.parentElement;for(let U of T){let J=Io(U).find(K=>j>=K.x&&j<=K.x+K.w&&g>=K.y&&g<=K.y+K.h);if(J){cn(U),qt(J.axis),vn(gs(U,J.axis)),mt&&te(null),ne&&de(null),Jt&&En(null),un&&qn(null);return}}}Ct&&cn(null),ft&&qt(null),vn(!1);{let $=[];B&&$.push(B),Jt&&Jt!==B&&$.push(Jt);let U=null,N=1/0,J=null;for(let K of $){if(!ms(K))continue;let V=Mr(K);if(!V)continue;let be=j>=V.left&&j<=V.right&&g>=V.top&&g<=V.bottom,Ie=[["font-size",V.right,V.top+V.height/2],["line-height",V.left+V.width/2,V.bottom]];for(let[Je,gt,bt]of Ie){let vt=Math.hypot(j-gt,g-bt);(be||vt<12)&&vt<N&&(N=vt,U=Je,J=K)}}U&&J?(En(J),qn(U)):(Jt&&En(null),un&&qn(null))}if(B!==mt&&te(B),B){let T=Tr(B),$=B.getBoundingClientRect(),U=Bn(j,g,$,T);de(U)}else de(null);return}if(Tn){let{handle:j,originalPoints:g,hasMoved:E}=Tn,y=e.annotations.find(N=>N.id===Tn.annotationId);if(!y)return;let B="metaKey"in m,T=B&&(m.metaKey||m.ctrlKey),$=B&&m.shiftKey,U;if(y.type==="line"){let N=g[0],J=g[g.length-1];j==="start"?U=[S,J]:U=[N,S]}else if(y.type==="freehand"){let N=Math.min(...g.map(Be=>Be.x)),J=Math.max(...g.map(Be=>Be.x)),K=Math.min(...g.map(Be=>Be.y)),V=Math.max(...g.map(Be=>Be.y)),be=(N+J)/2,Ie=(K+V)/2,Je=J-N||1,gt=V-K||1,bt=Je/gt,vt=N,Dt=J,ct=K,le=V;switch(j){case"topLeft":vt=S.x,ct=S.y;break;case"topRight":Dt=S.x,ct=S.y;break;case"bottomLeft":vt=S.x,le=S.y;break;case"bottomRight":Dt=S.x,le=S.y;break}if(T)switch(j){case"topLeft":Dt=J+(N-vt),le=V+(K-ct);break;case"topRight":vt=N-(Dt-J),le=V+(K-ct);break;case"bottomLeft":Dt=J+(N-vt),ct=K-(le-V);break;case"bottomRight":vt=N-(Dt-J),ct=K-(le-V);break}if($){let Be=Dt-vt,Ut=le-ct;if(Math.abs(Be/Ut)>bt){let xt=Math.abs(Ut)*bt*Math.sign(Be);j==="topLeft"||j==="bottomLeft"?vt=Dt-xt:Dt=vt+xt}else{let xt=Math.abs(Be)/bt*Math.sign(Ut);j==="topLeft"||j==="topRight"?ct=le-xt:le=ct+xt}}let Ge=Dt-vt||1,Ot=le-ct||1;U=g.map(Be=>({x:vt+(Be.x-N)/Je*Ge,y:ct+(Be.y-K)/gt*Ot}))}else if(y.type==="circle"){let N=g[0],J=g[g.length-1],K=Math.min(N.x,J.x),V=Math.max(N.x,J.x),be=Math.min(N.y,J.y),Ie=Math.max(N.y,J.y),Je=(K+V)/2,gt=(be+Ie)/2,bt=V-K,vt=Ie-be,Dt=K,ct=V,le=be,Ge=Ie;switch(j){case"top":if(le=S.y,T&&(Ge=gt+(gt-S.y)),$){let Be=(Ge-le)*(bt/vt)/2;Dt=Je-Be,ct=Je+Be}break;case"bottom":if(Ge=S.y,T&&(le=gt-(S.y-gt)),$){let Be=(Ge-le)*(bt/vt)/2;Dt=Je-Be,ct=Je+Be}break;case"left":if(Dt=S.x,T&&(ct=Je+(Je-S.x)),$){let Be=(ct-Dt)*(vt/bt)/2;le=gt-Be,Ge=gt+Be}break;case"right":if(ct=S.x,T&&(Dt=Je-(S.x-Je)),$){let Be=(ct-Dt)*(vt/bt)/2;le=gt-Be,Ge=gt+Be}break}U=[{x:Dt,y:le},{x:ct,y:Ge}]}else{let N=g[0],J=g[g.length-1],K=Math.min(N.x,J.x),V=Math.max(N.x,J.x),be=Math.min(N.y,J.y),Ie=Math.max(N.y,J.y),Je=(K+V)/2,gt=(be+Ie)/2,bt=V-K||1,vt=Ie-be||1,Dt=bt/vt,ct=K,le=V,Ge=be,Ot=Ie;switch(j){case"topLeft":ct=S.x,Ge=S.y;break;case"topRight":le=S.x,Ge=S.y;break;case"bottomLeft":ct=S.x,Ot=S.y;break;case"bottomRight":le=S.x,Ot=S.y;break}if(T)switch(j){case"topLeft":le=V+(K-ct),Ot=Ie+(be-Ge);break;case"topRight":ct=K-(le-V),Ot=Ie+(be-Ge);break;case"bottomLeft":le=V+(K-ct),Ge=be-(Ot-Ie);break;case"bottomRight":ct=K-(le-V),Ge=be-(Ot-Ie);break}if($){let Be=le-ct,Ut=Ot-Ge;if(Math.abs(Be/Ut)>Dt){let xt=Math.abs(Ut)*Dt*Math.sign(Be);j==="topLeft"||j==="bottomLeft"?ct=le-xt:le=ct+xt}else{let xt=Math.abs(Be)/Dt*Math.sign(Ut);j==="topLeft"||j==="topRight"?Ge=Ot-xt:Ot=Ge+xt}}U=[{x:ct,y:Ge},{x:le,y:Ot}]}t({type:"RESIZE_ANNOTATION",payload:{id:Tn.annotationId,points:U,saveUndo:!E}}),E||Oo({...Tn,hasMoved:!0});return}if(Mt&&(Mt.annotation.status??"pending")==="pending"){let j=S.x-Mt.startPoint.x,g=S.y-Mt.startPoint.y;if((Math.abs(j)>2||Math.abs(g)>2)&&!Mt.hasMoved)Yt({...Mt,hasMoved:!0,startPoint:S}),t({type:"MOVE_ANNOTATION",payload:{id:Mt.annotation.id,delta:{x:j,y:g},saveUndo:!0}});else if(Mt.hasMoved){let y=S.x-Mt.startPoint.x,B=S.y-Mt.startPoint.y;Yt({...Mt,startPoint:S}),t({type:"MOVE_ANNOTATION",payload:{id:Mt.annotation.id,delta:{x:y,y:B}}})}return}!h||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:S})},[h,e.isAnnotating,e.activeTool,Mt,Tn,Q,mt,ne,O,De,Ct,ft,Jt,un,he,t,Ft,Bn]),x=sn(m=>{if(dn.current.isDragging){let g=dn.current,E=g.element;if(E&&g.selector&&g.elementInfo&&_t){E instanceof HTMLElement&&(E.style.removeProperty("font-size"),E.style.removeProperty("line-height"),E.style.removeProperty("transition"));let y=[];if(g.originalFontSize!==_t.fontSize&&(Ye(E,"font-size",`${_t.fontSize}px`),y.push({property:"font-size",original:`${g.originalFontSize}px`,modified:`${_t.fontSize}px`})),g.originalLineHeight!==_t.lineHeight){let B=g.originalFontSize>0?Math.round(g.originalLineHeight/g.originalFontSize*1e3)/1e3:1.2,T=_t.fontSize>0?Math.round(_t.lineHeight/_t.fontSize*1e3)/1e3:1.2;Ye(E,"line-height",`${T}`),y.push({property:"line-height",original:`${B}`,modified:`${T}`})}y.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:g.selector,durableSelector:g.durableSelector??void 0,element:g.elementInfo,changes:y}})}dn.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},po(null);return}if(Wt.current.isDragging){let g=Wt.current,E=g.element,y="button"in m&&m.button===2;if(!g.hasMoved&&!y&&E&&g.selector&&g.elementInfo){E instanceof HTMLElement&&E.style.removeProperty("transition");let B=["space-between","space-around","stretch","normal"],T=g.originalJustifyContent||"normal",$=B.indexOf(T),U=B[($+1)%B.length],N=[];U==="normal"?(Ye(E,"justify-content","normal"),N.push({property:"justify-content",original:g.originalJustifyContent,modified:"normal"})):U==="stretch"?(Ye(E,"justify-content",U),Ye(E,"row-gap","8px"),Ye(E,"column-gap","8px"),N.push({property:"justify-content",original:g.originalJustifyContent||"normal",modified:U}),g.originalRow!==8&&N.push({property:"row-gap",original:`${g.originalRow}px`,modified:"8px"}),g.originalColumn!==8&&N.push({property:"column-gap",original:`${g.originalColumn}px`,modified:"8px"})):(E instanceof HTMLElement&&(E.style.removeProperty("row-gap"),E.style.removeProperty("column-gap")),Ye(E,"justify-content",U),N.push({property:"justify-content",original:g.originalJustifyContent||"normal",modified:U}),g.originalRow>0&&N.push({property:"row-gap",original:`${g.originalRow}px`,modified:"0px"}),g.originalColumn>0&&N.push({property:"column-gap",original:`${g.originalColumn}px`,modified:"0px"})),N.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:g.selector,durableSelector:g.durableSelector??void 0,element:g.elementInfo,changes:N}})}else if(g.hasMoved&&E&&g.selector&&g.elementInfo&&Ze){E instanceof HTMLElement&&(E.style.removeProperty("row-gap"),E.style.removeProperty("column-gap"),E.style.removeProperty("transition"));let B=[];g.isAuto?(E instanceof HTMLElement&&E.style.removeProperty("justify-content"),Ye(E,"justify-content","normal"),Ye(E,"row-gap",`${Ze.row}px`),Ye(E,"column-gap",`${Ze.column}px`),B.push({property:"justify-content",original:g.originalJustifyContent,modified:"normal"}),B.push({property:"row-gap",original:"0px",modified:`${Ze.row}px`}),B.push({property:"column-gap",original:"0px",modified:`${Ze.column}px`})):(g.originalRow!==Ze.row&&(Ye(E,"row-gap",`${Ze.row}px`),B.push({property:"row-gap",original:`${g.originalRow}px`,modified:`${Ze.row}px`})),g.originalColumn!==Ze.column&&(Ye(E,"column-gap",`${Ze.column}px`),B.push({property:"column-gap",original:`${g.originalColumn}px`,modified:`${Ze.column}px`}))),B.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:g.selector,durableSelector:g.durableSelector??void 0,element:g.elementInfo,changes:B}})}Wt.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},nt(null);return}if(ht.current.isDragging){let g=ht.current,E=g.element;if(E&&g.selector&&g.elementInfo&&Rt){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 y=["top-left","top-right","bottom-right","bottom-left"],B={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},T=[];for(let $ of y)g.original[$]!==Rt.radius[$]&&(Ye(E,B[$],`${Rt.radius[$]}px`),T.push({property:B[$],original:`${g.original[$]}px`,modified:`${Rt.radius[$]}px`}));T.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:g.selector,durableSelector:g.durableSelector??void 0,element:g.elementInfo,changes:T}})}ht.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},hn(null);return}if(pt.current.isDragging){let g=pt.current,E=g.element,y=g.selector,B=g.elementInfo;if(E&&y&&B&&Re){let T=g.original,$=Re.padding;E instanceof HTMLElement&&(E.style.removeProperty("padding"),E.style.removeProperty("transition"));let U=[],N=[{prop:"padding-top",origVal:T.top,newVal:$.top},{prop:"padding-right",origVal:T.right,newVal:$.right},{prop:"padding-bottom",origVal:T.bottom,newVal:$.bottom},{prop:"padding-left",origVal:T.left,newVal:$.left}];for(let{prop:J,origVal:K,newVal:V}of N)K!==V&&(Ye(E,J,`${V}px`),U.push({property:J,original:`${K}px`,modified:`${V}px`}));U.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y,durableSelector:g.durableSelector??void 0,element:B,changes:U}})}pt.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},Ht(null);return}if(Tn){Oo(null);return}if(Mt){if(!Mt.hasMoved&&Mt.annotation.type==="text"&&(Mt.annotation.status??"pending")==="pending"){let g=he(m);ae({id:Mt.annotation.id,point:Mt.annotation.points[0],text:Mt.annotation.text||"",fontSize:Mt.annotation.fontSize||12,isNew:!1,clickPoint:g,groupId:Mt.annotation.groupId})}Yt(null);return}if(!h)return;let S=5;if(e.currentPath.length>=2){let g=e.currentPath[0],E=e.currentPath[e.currentPath.length-1],y=Math.abs(E.x-g.x),B=Math.abs(E.y-g.y);if((e.activeTool==="line"?Math.sqrt(y*y+B*B)<S:y<S&&B<S)&&["rectangle","circle","line"].includes(e.activeTool)){C(!1),t({type:"CANCEL_PATH"});return}}let j=cs(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let g=e.currentPath[0],E=e.currentPath[e.currentPath.length-1],y=Math.min(g.x,E.x),B=Math.max(g.y,E.y),T=e.strokeWidth/2,$=Math.random().toString(36).substring(2,9);se({point:{x:y-T+4,y:B+T+4},groupId:$}),C(!1),t({type:"FINISH_PATH",payload:{groupId:$,elements:j}});return}C(!1),t({type:"FINISH_PATH",payload:{elements:j}})},[h,Mt,Tn,Re,Rt,Ze,_t,he,t,e.activeTool,e.currentPath,e.strokeWidth]),W=sn(m=>{let S=m.target.value;Se.current=m.target.selectionStart,ae(j=>j&&{...j,text:S})},[]),re=sn(m=>{m.key==="Escape"?ae(null):m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),Ve())},[Ve]),ie=sn(m=>{if(!M)return;let S=m.clipboardData.items,j=[];for(let g=0;g<S.length;g++){let E=S[g];if(E.type.startsWith("image/")){let y=E.getAsFile();y&&j.push(y)}}j.length>0&&(m.preventDefault(),ae(g=>g?{...g,images:[...g.images||[],...j]}:null))},[M]),Me=sn(m=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){m.preventDefault();let j=mt||Ct||O||Jt;if(j&&!Qn(j)){let g=Pn(j),E=Fn(j);t({type:"SELECT_ELEMENT",payload:{el:j,info:{...g,selector:E}}})}return}m.preventDefault();let S=Y.current;S&&(L.current=!0,S.style.pointerEvents="none",setTimeout(()=>{L.current&&(L.current=!1,S.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,mt,Ct,O,Jt,t,Qn,Y]);bn(()=>{let m=z.filter(B=>B.linkedSelector);if(m.length===0)return;let S=null,j=document.createElement("canvas").getContext("2d"),g=()=>{let B=[];for(let T of m){let $=document.querySelector(T.linkedSelector);if(!$&&T.elements?.[0]?.selector&&T.linkedSelector.startsWith("[data-pm=")){try{$=document.querySelector(T.elements[0].selector)}catch{}if($){let bt=T.linkedSelector.match(/data-pm="([^"]+)"/)?.[1];bt&&$.setAttribute("data-pm",bt)}}if(!$)continue;let U=$.getBoundingClientRect(),N=e.styleModifications.some(bt=>{try{return $.matches(bt.selector)}catch{return!1}}),J=m.filter(bt=>bt.id!==T.id&&bt.timestamp<T.timestamp&&bt.linkedSelector===T.linkedSelector).length,K=(N?1:0)+J,V;if(T.text&&j){let bt=T.fontSize||12;j.font=`${bt}px ${Kt}`,V=Math.max(...T.text.split(`
|
|
5
|
+
`).map(vt=>j.measureText(vt).width))}let be=U.top>=Jn*(1+K)?"top-left":"bottom-left",Ie=Gl(U,be,K,R?.current,V),Je=T.points[0],gt=be!==T.linkedAnchor;Je&&(gt||Math.abs(Ie.x-Je.x)>1||Math.abs(Ie.y-Je.y)>1)&&B.push({id:T.id,point:Ie,linkedAnchor:gt?be:void 0})}B.length>0&&t({type:"UPDATE_LINKED_POSITIONS",payload:{updates:B}})},E=()=>{S&&cancelAnimationFrame(S),S=requestAnimationFrame(g)};g(),window.addEventListener("scroll",E,!0),window.addEventListener("resize",E,!0),window.addEventListener("load",E),document.fonts.ready.then(E);let y=new MutationObserver(E);return y.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",E,!0),window.removeEventListener("resize",E,!0),window.removeEventListener("load",E),y.disconnect(),S&&cancelAnimationFrame(S)}},[z,t]);let _e=()=>{if(!e.isAnnotating)return"default";if(Tn){let{handle:m}=Tn;return m==="start"||m==="end"?"move":m==="top"||m==="bottom"?"ns-resize":m==="left"||m==="right"?"ew-resize":m==="topLeft"||m==="bottomRight"?"nwse-resize":"nesw-resize"}if(e.activeTool==="text")return"text";if(e.activeTool==="hand"){let m=Ze?.axis??ft;if(m==="row")return"ns-resize";if(m==="column")return"ew-resize";if(Rt||De)return"ns-resize";let S=_t?.property??un;if(S==="font-size")return"ew-resize";if(S==="line-height")return"ns-resize";let j=Re?.side??ne;return j==="top"||j==="bottom"?"ns-resize":j==="left"||j==="right"?"ew-resize":"default"}return"crosshair"},Ne={position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9998,pointerEvents:e.isAnnotating?"auto":"none",visibility:e.isAnnotating?"visible":"hidden",cursor:_e()},Oe=sn(()=>{let m=Y.current;if(!m||!M)return{width:100,height:12*1.4,isWrapped:!1};let S=m.getContext("2d");if(!S)return{width:100,height:M.fontSize*1.4,isWrapped:!1};S.font=`${M.fontSize}px ${Kt}`;let g=S.measureText("Type here...").width,E=M.text.split(`
|
|
6
|
+
`),y=E.length>0?Math.max(g,...E.map(N=>S.measureText(N||" ").width)):g,B=M.point.x-Vt.x,T=Sr(B);if(y>T){let N=Wa(S,E,T),J=Math.min(T,Math.max(g,...N.map(V=>S.measureText(V).width))),K=Math.max(1,N.length)*M.fontSize*1.4;return{width:J,height:K,isWrapped:!0}}let U=Math.max(1,E.length)*M.fontSize*1.4;return{width:y,height:U,isWrapped:!1}},[M,Y,Vt.x])(),nn=M?Math.max(1,M.text.split(`
|
|
7
|
+
`).length)*M.fontSize*1.4+8:0,ot=Oe.height+8,jt=Oe.isWrapped?ot-nn:0,gr=M?{position:"fixed",left:M.point.x-4-Vt.x,top:M.point.y-4-Vt.y-jt,zIndex:9999,width:Oe.width+8,height:ot,padding:4,fontSize:M.fontSize,fontFamily:Kt,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:Oe.isWrapped?"pre-wrap":"pre",wordBreak:Oe.isWrapped?"break-word":void 0}:{};return Dr(Or,{children:[it("canvas",{ref:w,id:"devtools-canvas",style:Ne,onMouseDown:yn,onMouseMove:In,onMouseUp:m=>x(m),onMouseLeave:m=>{x(m),we(null),st(null)},onTouchStart:yn,onTouchMove:In,onTouchEnd:m=>x(m),onContextMenu:Me}),M&&Dr(Or,{children:[it("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),it("textarea",{id:"devtools-text-input",ref:ge,value:M.text,onChange:W,onKeyDown:re,onPaste:ie,onBlur:Ve,placeholder:"Type here...",style:gr}),M.images&&M.images.length>0&&Dr("div",{"data-devtools":!0,style:{position:"fixed",left:M.point.x-4-Vt.x,top:M.point.y-4-Vt.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:[M.images.length," image",M.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&&it(Sl,{styleModifications:e.styleModifications,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(z.map(m=>m.groupId||m.id)).size,dispatch:t,inFlightSelectors:a,toolbarRef:R,onHoverSelector:tt}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&&it(Cl,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&&it(dl,{annotations:z,supersededAnnotations:q,inFlightIds:o,activeIds:r,queuePositions:i,scrollX:Vt.x,scrollY:Vt.y,annotationGroupMap:oe,onViewThread:c,onSelectAnnotation:On,onHoverAnnotation:et,canvasRef:Y}),e.isAnnotating&&d&&it(ul,{annotations:z,supersededAnnotations:q,scrollX:Vt.x,scrollY:Vt.y,onReply:d,annotationGroupMap:oe,canvasRef:Y,onHoverAnnotation:et}),e.isAnnotating&&s&&s.size>0&&it(ys,{inFlightSelectorColors:s}),e.isAnnotating&&pe&&it(ys,{inFlightSelectorColors:pe,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(Ze?Wt.current.element:Ct)&&it(Cs,{element:Ze?Wt.current.element:Ct,gap:Ze?{row:Ze.row,column:Ze.column}:Qo(Ct),accentColor:e.activeColor,hoveredAxis:ft,draggingAxis:Ze?.axis??null,cursorViewport:Cn,isAutoGap:lt,refreshKey:uo}),e.activeTool==="hand"&&e.isAnnotating&&Nn&&it($l,{element:Nn.target,modifier:Nn.modifier,accentColor:e.activeColor,refreshKey:uo}),e.activeTool==="hand"&&e.isAnnotating&&!Nn&&(Rt?ht.current.element:O)&&it(hl,{element:Rt?ht.current.element:O,radius:Rt?.radius??er(O),accentColor:e.activeColor,hoveredCorner:De,draggingCorner:Rt?.corner??null,cursorViewport:Cn}),e.activeTool==="hand"&&e.isAnnotating&&!Nn&&(_t?dn.current.element:Jt)&&it(Wl,{element:_t?dn.current.element:Jt,fontSize:_t?.fontSize??jr(Jt).fontSize,lineHeight:_t?.lineHeight??jr(Jt).lineHeight,accentColor:e.activeColor,hoveredProperty:un,draggingProperty:_t?.property??null,cursorViewport:Cn}),e.activeTool==="hand"&&e.isAnnotating&&!Nn&&(Re?pt.current.element:mt)&&it(Rs,{element:Re?pt.current.element:mt,padding:Re?.padding??Tr(mt),accentColor:e.activeColor,hoveredSide:ne,draggingSide:Re?.side??null,cursorViewport:Cn,refreshKey:_t?_t.fontSize+_t.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&it(Or,{children:Q&&!e.inspectedElement&&(()=>{let m=M?.linkedSelector||P?.linkedSelector;if(m)try{if(Q.matches(m))return null}catch{}let S=!!P||!!M?.linkedSelector||z.some(j=>{if(!j.linkedSelector)return!1;try{return Q.matches(j.linkedSelector)}catch{return!1}});return it(go,{element:Q,isSelected:!1,elementInfo:je,color:e.activeColor,hideTooltip:S})})()}),(M?.linkedSelector||P?.linkedSelector)&&(()=>{let m=M?.linkedSelector||P?.linkedSelector;if(!m)return null;let S=null;try{S=document.querySelector(m)}catch{}return S?it(go,{element:S,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),F&&(()=>{let m=e.annotations.find(g=>g.id===F);if(!m?.linkedSelector)return null;let S=null;try{S=document.querySelector(m.linkedSelector)}catch{}if(!S)return null;let j=!!(o&&o.has(m.id));return it(go,{element:S,isSelected:!j,color:m.color,hideTooltip:!0})})(),Ee&&(()=>{let m=e.annotations.find(E=>E.id===Ee);if(!m?.linkedSelector)return null;let S=null;try{S=document.querySelector(m.linkedSelector)}catch{}if(!S)return null;let j=m.groupId?e.annotations.filter(E=>E.groupId===m.groupId):[m],g=!!(o&&j.some(E=>o.has(E.id)));return it(go,{element:S,isSelected:!g,color:m.color,hideTooltip:!0})})(),Ke&&(()=>{let m=null;try{m=document.querySelector(Ke)}catch{}if(!m)return null;let S=!!(a&&a.has(Ke));return it(go,{element:m,isSelected:!S,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&rt.size>0&&[...rt.entries()].map(([m,S])=>it(go,{element:S.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:S.rootElement.tagName.toLowerCase(),reactComponent:m},color:"#8b5cf6"},m)),e.activeTool==="model"&&e.isAnnotating&&to&&it(go,{element:to.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:to.rootElement.tagName.toLowerCase(),reactComponent:to.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&fr.length>0&&fr.map((m,S)=>it("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"?Dr(Or,{children:[it("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),it("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),it("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),it("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)})]}):Dr(Or,{children:[it("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),it("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),it("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),it("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)})]})},S)),e.activeTool==="model"&&e.isAnnotating&&Ce&&it(go,{element:Ce.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:Ce.rootElement.tagName.toLowerCase(),reactComponent:Ce.name},color:b?.has(Ce.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&Dr(Or,{children:[We&&We!=="padding"&&We!=="gap"&&(()=>{let m=new Set(z.map(T=>T.groupId||T.id)).size,S=e.inspectedElement.info.selector,j=e.styleModifications.findIndex(T=>T.selector===S),g=j>=0?m+j+1:m+e.styleModifications.length+1,E=e.styleModifications.find(T=>T.selector===S),y=E?.changes.length??0,B=!!E?.captured;return it(go,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:B?"#999999":e.activeColor,annotationNumber:g,changeCount:y})})(),We==="padding"&&it(Rs,{element:e.inspectedElement.el,padding:Tr(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),We==="gap"&&it(Cs,{element:e.inspectedElement.el,gap:Qo(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),it(Fl,{element:e.inspectedElement.el,elementInfo:e.inspectedElement.info,selector:e.inspectedElement.info.selector,styleModifications:e.styleModifications,dispatch:t,onClose:()=>t({type:"SELECT_ELEMENT",payload:null}),onHover:qe,accentColor:e.activeColor,toolbarRef:R})]})]})}import{useCallback as jn,useEffect as ln,useMemo as lr,useRef as At,useState as cr}from"react";import{Check as Jf,Circle as Yf,Component as Vf,Fingerprint as Uf,Hand as Kf,MessageCircle as Xf,Pen as qf,RefreshCw as Zf,Slash as Qf,Square as eg,Trash2 as tg,Type as ng}from"lucide-react";import{useEffect as Yl,useRef as Vl}from"react";function Ul(e,t,n,o,r){let i=Vl(0),a=Vl(t.annotations);Yl(()=>{if(!n.current||!e)return;a.current=t.annotations;let s=t.annotations.length;s>0&&(s>=i.current||!o)&&(localStorage.setItem(r.annotations,JSON.stringify(t.annotations)),i.current=s)},[t.annotations,e,o,n,r]),Yl(()=>{n.current&&(localStorage.setItem(r.expanded,String(e)),e&&(localStorage.setItem(r.styleMods,JSON.stringify(t.styleModifications)),localStorage.setItem(r.spacingChanges,JSON.stringify(t.spacingTokenChanges)),localStorage.setItem(r.tool,t.activeTool),localStorage.setItem(r.color,t.activeColor),localStorage.setItem(r.stroke,String(t.strokeWidth)),t.inspectedElement?localStorage.setItem(r.inspected,JSON.stringify({selector:t.inspectedElement.info.selector,info:t.inspectedElement.info})):localStorage.removeItem(r.inspected)))},[e,t.styleModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,n,r])}import{useCallback as Sn,useEffect as ir,useMemo as Gs,useRef as Ur,useState as ho}from"react";import{Fragment as Jp,jsx as Et,jsxs as so}from"react/jsx-runtime";var kp={width:340,backgroundColor:"#eaeaea",...zo,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"},Tp=(e,t)=>({width:"100%",border:"1px solid rgba(0,0,0,0.12)",background:t?"rgba(0,0,0,0.04)":"rgba(0,0,0,0.02)",cursor:e?"default":"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"5px 8px",color:e?"#9ca3af":"#6b7280"}),Mp=e=>({border:0,background:"transparent",color:e?"#111827":"#6b7280",cursor:"pointer",fontFamily:"inherit",fontSize:10,fontWeight:700,padding:0,textTransform:"uppercase"}),Js={border:"1px solid rgba(0,0,0,0.12)",background:"rgba(0,0,0,0.02)",cursor:"pointer",fontFamily:"inherit",fontSize:10,fontWeight:650,color:"#6b7280",padding:"6px 8px",flex:1},Pi={...Js,borderColor:"#111827",background:"#111827",color:"#ffffff"},Ip={...Pi,cursor:"default",opacity:.55},Ys={display:"block",width:"100%",border:0,background:"transparent",boxSizing:"border-box",color:"inherit",cursor:"text",font:"inherit",lineHeight:1.25,margin:0,padding:0,textAlign:"left"},Rp={...Ys,appearance:"none",resize:"none",overflow:"hidden",outline:"none"},Zl={...Ys,fontWeight:700,fontSize:11,lineHeight:1.35},Lp={...Zl,appearance:"none",resize:"none",overflow:"hidden",outline:"none"},Kl={display:"grid",gridTemplateColumns:"12px minmax(0, 1fr)",columnGap:4,alignItems:"start",marginBottom:5},Ap={pass:"#2f855a",fail:"#c53030",needs_review:"#6b7280"},Pp={pass:"\u2611",fail:"\u2612",needs_review:"\u25A1"},Dp=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"Eval",Op=[{id:"pending",label:"Pending"},{id:"approved",label:"Approved"},{id:"rejected",label:"Rejected"}],Xl="popmelt-eval-active-status",Bp=e=>e==="pending"||e==="approved"||e==="rejected";function Ql({bridgeUrl:e,refreshKey:t,onMouseEnter:n,onMouseLeave:o,onSynthesize:r,isSynthesizing:i,onRunEval:a,onViewRunThread:s,runningEvalIds:l=[],snapPosition:d="bottom-right"}){let c=Ur(null),u=i||!r,[p,f]=ho({version:1,updatedAt:0,cases:[]}),[v,b]=ho(!0),[I,D]=ho(()=>{if(typeof window>"u")return"pending";try{let w=window.localStorage.getItem(Xl);return Bp(w)?w:"pending"}catch{return"pending"}});ir(()=>{let w=c.current;if(!w)return;let L=n,h=o;return L&&w.addEventListener("mouseenter",L),h&&w.addEventListener("mouseleave",h),()=>{L&&w.removeEventListener("mouseenter",L),h&&w.removeEventListener("mouseleave",h)}},[n,o]);let A=Sn(()=>{e&&(b(!0),ba(e).then(w=>{f(w),b(!1)}).catch(()=>b(!1)))},[e]);ir(()=>{A()},[A,t]),ir(()=>{try{window.localStorage.setItem(Xl,I)}catch{}},[I]);let F=Sn((w,L)=>{e&&(f(h=>({...h,cases:h.cases.map(C=>C.id===w?{...C,status:L}:C)})),va(w,L,e).then(h=>{h||A()}).catch(A))},[e,A]),_=Sn((w,L)=>{if(!e)return;let h=L.map(C=>C.trim()).filter(Boolean);h.length!==0&&(f(C=>({...C,cases:C.cases.map(M=>M.id===w?{...M,assertions:h}:M)})),ei(w,{assertions:h},e).then(C=>{C||A()}).catch(A))},[e,A]),R=Sn((w,L)=>{if(!e)return;let h=L.trim();h&&(f(C=>({...C,cases:C.cases.map(M=>M.id===w?{...M,title:h}:M)})),ei(w,{title:h},e).then(C=>{C||A()}).catch(A))},[e,A]),Y=Gs(()=>{let w=p.cases.filter(C=>C.status==="pending"),L=p.cases.filter(C=>C.status==="approved"),h=p.cases.filter(C=>C.status==="rejected");return{pending:w,approved:L,rejected:h}},[p.cases]),ee=Y[I],k=Gs(()=>{let w=new Map,L=[...p.runs??[]].sort((h,C)=>C.completedAt-h.completedAt);for(let h of L)w.has(h.evalId)||w.set(h.evalId,h);return w},[p.runs]);return so("div",{ref:c,style:{...kp,...li(d)},children:[so("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[Et("span",{children:"Evals"}),Et("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"E"})]}),Et("button",{type:"button",disabled:u,onClick:r,style:Tp(u,i),children:i?"Synthesizing...":"Synthesize"}),Et("div",{style:{display:"flex",gap:12,marginTop:8},children:Op.map(w=>Et(Fp,{active:I===w.id,label:`${w.label} ${Y[w.id].length}`,onClick:()=>D(w.id)},w.id))}),Et("div",{style:{marginTop:10,flex:1,minHeight:0,overflowY:"auto",display:"flex",flexDirection:"column",gap:10},children:v?Et("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):p.cases.length===0?Et("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.5},children:"No inferred evals yet."}):ee.length===0?so("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.5},children:["No ",I," evals."]}):Et(Hp,{cases:ee,latestRunsByEvalId:k,runningEvalIds:l,onStatus:F,onRun:a,onViewRunThread:s,onTitleChange:R,onAssertionsChange:_})})]})}function Hp({cases:e,latestRunsByEvalId:t,runningEvalIds:n,onStatus:o,onRun:r,onViewRunThread:i,onTitleChange:a,onAssertionsChange:s}){return Et("div",{style:{display:"flex",flexDirection:"column",gap:6},children:e.map(l=>{let d=new Set([...l.sourceDecisionIds,...l.sourceThreadIds]).size,c=d>0?`, ${d} ${d===1?"mention":"mentions"}`:"",u=t.get(l.id),p=n.includes(l.id);return so("div",{style:{border:"1px solid rgba(0,0,0,0.08)",background:"rgba(255,255,255,0.35)",padding:8},children:[so("div",{children:[Et(zp,{value:l.title,onCommit:f=>a(l.id,f)}),so("div",{style:{color:"#9ca3af",fontSize:10,marginTop:2},children:[Dp(l.category),c]})]}),Et("div",{style:{marginTop:6,color:"#374151",fontSize:11,lineHeight:1.25},children:Et(Gp,{assertions:l.assertions,latestRun:u,onChange:f=>s(l.id,f)})}),Et(Np,{item:l,latestRun:u,isRunning:p,onStatus:o,onRun:r,onViewRunThread:i})]},l.id)})})}function _p(e){let t=e.assertionResults.length;if(t===0)return e.status==="pass"?"Pass":"Review";let n=e.assertionResults.reduce((r,i)=>(r[i.status]+=1,r),{pass:0,fail:0,needs_review:0}),o=n.fail+n.needs_review;return o===0?`${n.pass||t} Pass`:`Review ${o||t}`}function Np({item:e,latestRun:t,isRunning:n,onStatus:o,onRun:r,onViewRunThread:i}){if(e.status==="pending")return so("div",{style:{display:"flex",gap:6,marginTop:8},children:[Et("button",{type:"button",style:Js,onClick:()=>o(e.id,"rejected"),children:"Reject"}),Et("button",{type:"button",style:Pi,onClick:()=>o(e.id,"approved"),children:"Accept"})]});if(e.status==="approved"){let a=n||!r;return so("div",{style:{display:"flex",gap:6,marginTop:8},children:[t?.threadId&&i&&Et("button",{type:"button",style:Js,onClick:()=>i(t.threadId),children:_p(t)}),Et("button",{type:"button",disabled:a,style:a?Ip:Pi,onClick:()=>r?.(e),children:n?"Running...":"Run"})]})}return Et("div",{style:{display:"flex",gap:6,marginTop:8},children:Et("button",{type:"button",style:Pi,onClick:()=>o(e.id,"approved"),children:"Approve"})})}function Fp({active:e,label:t,onClick:n}){let[o,r]=ho(!1);return Et("button",{type:"button",style:Mp(e||o),onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),onClick:n,children:t})}function zp({value:e,onCommit:t}){let[n,o]=ho(!1),[r,i]=ho(e),a=Ur(null);ir(()=>{n||i(e)},[n,e]),ir(()=>{if(!n)return;let c=a.current;c&&(c.focus(),c.select(),c.style.height="auto",c.style.height=`${c.scrollHeight}px`)},[n]);let s=Sn(()=>{let c=r.trim();o(!1),c&&c!==e?t(c):i(e)},[r,t,e]),l=Sn(()=>{i(e),o(!1)},[e]),d=Sn(c=>{c.key==="Enter"?(c.preventDefault(),s()):c.key==="Escape"&&(c.preventDefault(),l())},[l,s]);return n?Et("textarea",{ref:a,rows:1,value:r,onChange:c=>{i(c.target.value),c.currentTarget.style.height="auto",c.currentTarget.style.height=`${c.currentTarget.scrollHeight}px`},onBlur:s,onKeyDown:d,style:Lp}):Et("button",{type:"button",onClick:()=>o(!0),style:Zl,children:e})}function $p(e){return e.map(t=>t.trim()).filter(Boolean)}function Wp(e,t){return e.length===t.length&&e.every((n,o)=>n===t[o])}function ql(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}function jp(e){let t=window.getComputedStyle(e),n=Number.parseFloat(t.lineHeight)||Number.parseFloat(t.fontSize)*1.2||16,o=document.createElement("div"),r=document.createElement("span"),i=document.createElement("span");o.style.position="fixed",o.style.visibility="hidden",o.style.pointerEvents="none",o.style.left="-9999px",o.style.top="0",o.style.width=`${e.clientWidth}px`,o.style.boxSizing=t.boxSizing,o.style.font=t.font,o.style.letterSpacing=t.letterSpacing,o.style.lineHeight=t.lineHeight,o.style.padding=t.padding,o.style.border=t.border,o.style.whiteSpace="pre-wrap",o.style.overflowWrap="break-word",o.style.wordBreak=t.wordBreak;let a=e.selectionStart??0;o.textContent=e.value.slice(0,a),r.textContent="\u200B",o.appendChild(r),o.appendChild(document.createTextNode(e.value.slice(a)||"\u200B")),i.textContent="\u200B",o.appendChild(i),document.body.appendChild(o);let s=Math.max(0,Math.round(r.offsetTop/n)),l=Math.max(0,Math.round(i.offsetTop/n));return o.remove(),{lineIndex:s,lastLineIndex:l}}function Gp({assertions:e,latestRun:t,onChange:n}){let[o,r]=ho(null),[i,a]=ho(e),[s,l]=ho(null),[d,c]=ho(0),u=Ur([]),p=Ur(null),f=Ur(!1),v=o!==null,b=v?i.length+1:i.length,I=Gs(()=>{let L=new Map;for(let h of t?.assertionResults??[])L.set(h.assertion.trim(),h);return L},[t]);ir(()=>{v||a(e)},[e,v]),ir(()=>{if(s===null)return;let L=requestAnimationFrame(()=>{let h=u.current[s];if(h){if(h.focus(),p.current==="select"&&h.value)h.select();else if(p.current==="start")h.setSelectionRange(0,0);else if(p.current==="end"){let C=h.value.length;h.setSelectionRange(C,C)}p.current=null,ql(h)}});return()=>cancelAnimationFrame(L)},[s,d,b]);let D=Sn((L,h=null)=>{p.current=h,r(L),l(L),c(C=>C+1)},[]),A=Sn(L=>{let h=$p(L);return h.length===0?(a(e),e):(a(h),Wp(h,e)||n(h),h)},[e,n]),F=Sn(L=>{D(L,"select")},[D]),_=Sn((L,h)=>{a(C=>{let M=[...C];if(L>=M.length){if(h.length===0)return M;M.push(h)}else M[L]=h;return M})},[]),R=Sn((L,h)=>{let C=[...i],ae=(L<C.length?C[L]??"":"").trim();if(L>=C.length){let G=h?.focusPlaceholder?C.length:h?.focusIndex;G!==void 0?D(G,h?.focusMode):(r(null),l(null));return}if(!ae){if(h?.deleteEmpty){C.splice(L,1);let G=A(C),se=h.focusPlaceholder?G.length:h.focusIndex;if(se!==void 0){let P=Math.min(se,G.length);D(P)}else r(null),l(null)}else C[L]=e[L]??"",a(C),h?.focusIndex!==void 0?D(h.focusIndex,h.focusMode):(r(null),l(null));return}C[L]=ae;let Fe=A(C),me=h?.focusPlaceholder?Fe.length:h?.focusIndex;if(me!==void 0){let G=Math.min(me,Fe.length);D(G,h?.focusMode)}else r(null),l(null)},[e,i,A,D]),Y=Sn(()=>{a(e),r(null),l(null)},[e]),ee=Sn((L,h)=>{let C=h.currentTarget.value,M=h.currentTarget.selectionStart,ae=h.currentTarget.selectionEnd,Fe=M===ae;if((h.key==="ArrowUp"||h.key==="ArrowDown")&&Fe){let{lineIndex:me,lastLineIndex:G}=jp(h.currentTarget);if(h.key==="ArrowUp"&&me===0&&L>0){h.preventDefault(),f.current=!0,R(L,{focusIndex:L-1,focusMode:"end",deleteEmpty:!1});return}if(h.key==="ArrowDown"&&me===G&&L<b-1){h.preventDefault(),f.current=!0,R(L,{focusIndex:L+1,focusMode:"start",deleteEmpty:!1});return}}if(h.key==="Backspace"&&C.length===0){h.preventDefault(),f.current=!0;let me=[...i],G=L-1;if(L<me.length){me.splice(L,1);let se=A(me);if(G>=0){let P=Math.min(G,se.length-1);D(P,"end")}else r(null),l(null)}else G>=0&&D(G,"end");return}h.key==="Enter"?(h.preventDefault(),R(L,{focusPlaceholder:h.metaKey||h.ctrlKey,deleteEmpty:!0})):h.key==="Escape"&&(h.preventDefault(),Y())},[Y,R,i,A,D,b]),k=Sn((L,h)=>{if(f.current){f.current=!1;return}let C=u.current.findIndex(M=>M===h.relatedTarget);R(L,{deleteEmpty:!1,focusIndex:C>=0?C:void 0})},[R]),w=Sn((L,h)=>{h.preventDefault(),o!==null?(f.current=!0,R(o,{focusIndex:L,focusMode:"select",deleteEmpty:!1})):D(L,"select")},[R,o,D]);return so(Jp,{children:[Et("style",{children:`
|
|
8
8
|
.popmelt-eval-assertion-input::placeholder {
|
|
9
9
|
color: #aaa;
|
|
10
10
|
opacity: 1;
|
|
11
11
|
}
|
|
12
|
-
`}),Array.from({length:
|
|
13
|
-
${t}`:`${e}: ${t}`,style:{width:28,height:28,backgroundColor:t,outline:"1px solid rgba(0,0,0,0.08)",outlineOffset:-1,position:"relative"},children:n&&je(zf,{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 Fc({entries:e,references:t}){let n=[],o=[];for(let s of e)Hc(s[1])?n.push(s):o.push(s);let r=Oc(n);return nn(vr,{children:[r.map(([s,i])=>nn("div",{style:{marginBottom:4},children:[nn("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[s,i.length>1?` (${i.length})`:""]}),je("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:i.map(([l,a])=>je(Kf,{varName:l,value:a,reference:t[l]},l))})]},s)),o.length>0&&je(es,{entries:o})]})}var Zi=[0,1,2,4,8,12,16,20,24,28,32];function Xf(e){if(e<=32){let t=Zi[0],n=Math.abs(e-t);for(let o=1;o<Zi.length;o++){let r=Math.abs(e-Zi[o]);r<n&&(t=Zi[o],n=r)}return t}return Math.round(e/8)*8}function qf({label:e,value:t,px:n,tokenPath:o,rawToken:r,onHover:s,onModify:i,onDelete:l}){let[a,d]=Kn(!1),[c,u]=Kn(null),p=br(!1),g=br(0),v=br(0),x=br([]),w=c!==null?c:n,I=c!==null?`${c}px`:t,N=c!==null,H=Qi(L=>{L.preventDefault(),p.current=!0,g.current=L.clientX,v.current=n;let Y=Ri(r);x.current=Es(Y);let re=_=>{let B=_.clientX-g.current,h=Math.max(0,Math.round(v.current+B));_.shiftKey&&(h=Xf(h));for(let A of x.current)A.element.style.setProperty(A.property,h+"px","important");u(h),s==null||s({name:e,px:h,token:Y})},Z=()=>{window.removeEventListener("mousemove",re),window.removeEventListener("mouseup",Z),document.body.style.cursor="",p.current=!1,u(_=>{if(_!==null&&_!==n&&i){let B=Ri(r),h=B.bindings&&B.bindings.length>0,A;if(h){let de=Ts(B.bindings,v.current,_);A=JSON.stringify(y(f({},B),{value:`${_}px`,bindings:de}))}else{let de=Ml(x.current,v.current),F=Il(x.current);if(de.length>0){let me=Ts(de,v.current,_);A=JSON.stringify({value:`${_}px`,property:F,bindings:me})}else A=`${_}px`}let k=typeof r=="string"?r:JSON.stringify(r),be=x.current.map(de=>({selector:Jn(de.element),property:de.property})),K=Ll(x.current,v.current,_);i({tokenPath:o,originalValue:k,currentValue:A,targets:be,originalPx:v.current,currentPx:_},{id:Math.random().toString(36).substring(2,9),tokenPath:o,tokenName:e,originalPx:v.current,newPx:_,affectedElements:K})}return _})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",re),window.addEventListener("mouseup",Z)},[n,e,o,r,s,i]),O=Ri(r);return nn("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,padding:"1px 0",cursor:"ew-resize",userSelect:"none"},onMouseEnter:()=>{p.current||(d(!0),s==null||s({name:e,px:w,token:O}))},onMouseLeave:()=>{p.current||(d(!1),s==null||s(null))},onMouseDown:H,children:[je("span",{style:{color:a||N?"#FF0000":"#9ca3af"},children:e}),nn("span",{style:{display:"flex",alignItems:"center",gap:4},children:[je("span",{style:{color:a||N?"#FF0000":"#6b7280",fontWeight:600},children:I}),l&&a&&!N&&je("button",{type:"button",title:"Remove token",onMouseDown:L=>{L.stopPropagation();let Y=typeof r=="string"?r:JSON.stringify(r);l(o,Y)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:L=>{L.currentTarget.style.color="#FF0000"},onMouseLeave:L=>{L.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function Zf({entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:s}){let i=[],l=[];for(let a of e){let d=Yf(a[1]);d!==null?i.push([a[0],a[1],d]):l.push(a)}return nn(vr,{children:[i.length>0&&je("div",{style:{display:"flex",flexDirection:"column",gap:2},children:i.map(([a,d,c])=>{let u=a.split(".").pop(),p=n?Qf(n,a):d,g=p&&typeof p=="object"&&"value"in p?p:d;return je(qf,{label:u,value:d,px:c,tokenPath:`tokens.${t}.${a}`,rawToken:g,onHover:o,onModify:r,onDelete:s},a)})}),l.length>0&&je(es,{entries:l})]})}function Qf(e,t){let n=t.split("."),o=e;for(let r of n){if(o==null||typeof o!="object")return;o=o[r]}return o}function es({entries:e}){return je("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>nn("div",{style:{fontSize:11},children:[je("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),je("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function eg({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:o,onModifyToken:r,onDeleteToken:s}){let i=Jf(e);return i==="colors"?je(Fc,{entries:e}):i==="spacing"?je(Zf,{entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:s}):je(es,{entries:e})}function tg(e){let t=e.toLowerCase(),n=null,o=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(s){return s.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),r=o.currentNode;for(;r=o.nextNode();){let s=r,i=Object.keys(s).find(a=>a.startsWith("__reactFiber$")||a.startsWith("__reactInternalInstance$"));if(!i)continue;let l=s[i];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 aa=class extends Hf{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}},$c="popmelt-principles-collapsed";function ng(){try{let e=localStorage.getItem($c);if(e)return new Set(JSON.parse(e))}catch(e){}return new Set}function og(e){try{localStorage.setItem($c,JSON.stringify([...e]))}catch(t){}}function rg({id:e,label:t,count:n,children:o,collapsed:r,onToggle:s}){return nn("div",{style:{marginBottom:14},children:[nn("div",{onClick:()=>s(e),style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:r?0:6,cursor:"pointer",display:"flex",alignItems:"center",gap:4,userSelect:"none"},children:[je("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:r?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,je("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!r&&o]})}var ig={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},_c=["colors","fonts","typeScale","spacing","radii","shadows","other"];function sg(){let[e,t]=Kn(null),[n,o]=Kn(ng);qo(()=>{t(Bc())},[]);let r=Qi(i=>{o(l=>{let a=new Set(l);return a.has(i)?a.delete(i):a.add(i),og(a),a})},[]);return e?_c.some(i=>e[i].length>0)?je(vr,{children:_c.map(i=>{let l=e[i];return l.length===0?null:je(rg,{id:i,label:ig[i],count:l.length,collapsed:n.has(i),onToggle:r,children:i==="colors"?je(Fc,{entries:l,references:e.references}):je(es,{entries:l})},i)})}):je("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function ag({rules:e,onSynthesize:t,isSynthesizing:n}){if(!e||e.length===0)return je("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."});if(!e.some(s=>typeof s=="object"&&s!==null&&"scope"in s))return je(vr,{children:e.map((s,i)=>nn("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[nn("span",{style:{color:"#9ca3af",flexShrink:0},children:[i+1,"."]}),je("span",{children:typeof s=="string"?s:s.text})]},i))});let r=new Map;for(let s of e)if(typeof s=="string")r.has("general")||r.set("general",[]),r.get("general").push({id:"",text:s});else{let i=s.scope||"general";r.has(i)||r.set(i,[]),r.get(i).push({id:s.id,text:s.text})}return nn(vr,{children:[t&&je("button",{type:"button",disabled:n,onClick:t,style:{width:"100%",border:"1px solid rgba(0,0,0,0.12)",background:n?"rgba(0,0,0,0.04)":"rgba(0,0,0,0.02)",cursor:n?"default":"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"5px 8px",marginBottom:10,color:n?"#9ca3af":"#6b7280"},children:n?"Synthesizing\u2026":"Synthesize"}),Array.from(r.entries()).map(([s,i])=>nn("div",{style:{marginBottom:10},children:[je("div",{style:{fontWeight:700,fontSize:10,color:"#6b7280",letterSpacing:"0.05em",textTransform:"uppercase",marginBottom:4},children:s}),i.map((l,a)=>nn("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4,fontSize:11},children:[je("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2022"}),je("span",{children:l.text})]},l.id||a))]},s))]})}function lg({name:e,value:t,selected:n,highlighted:o,onRemove:r,onHover:s}){var _;let[i,l]=Kn(!1),[a,d]=Kn(!1),c=br(null),u=br(0),[p,g]=Kn(0),[v,x]=Kn(0),w=Nc(t),I=(_=w.find(([B])=>B==="description"))==null?void 0:_[1];qo(()=>{if(!a&&!o){g(0),x(0),u.current=0;return}let B=_r(e);g(B.length)},[a,o,e]),qo(()=>{n&&c.current&&c.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let N=n||o||a,H=n?"139,92,246":"34,197,94",O=n?"#8b5cf6":"#22c55e",L=N?`rgba(${H},0.06)`:void 0,Y=N?`inset 0 0 0 1.5px rgba(${H},0.35)`:void 0,re=o||a,Z=Qi(()=>{let B=_r(e);if(B.length===0)return;let h=u.current%B.length;B[h].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),x(h),u.current=h+1,s==null||s({name:e,instanceIndex:h})},[e,s]);return nn("div",{ref:c,onClick:Z,onMouseEnter:()=>{d(!0),s==null||s({name:e,instanceIndex:0})},onMouseLeave:()=>{d(!1),s==null||s(null)},style:{marginBottom:8,background:L,padding:6,boxShadow:Y,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:[je("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:re?O:"transparent",color:re?"#fff":"#6b7280"},children:e}),re&&p>1&&nn("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[v+1,"/",p]})]}),r&&a&&je("button",{type:"button",title:"Remove from model",onClick:B=>{B.stopPropagation(),r(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:B=>{B.currentTarget.style.color="#FF0000"},onMouseLeave:B=>{B.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),I&&je("div",{style:{fontSize:11,color:re?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:I}),i?je(eg,{entries:w.filter(([B])=>B!=="description"),categoryKey:""}):je(cg,{name:e,onNotFound:()=>l(!0),entries:w})]})}function cg({name:e,onNotFound:t}){let[n,o]=Kn(null),[r,s]=Kn(!1);return qo(()=>{let i=tg(e);i||t(),o(i),s(!0)},[e,t]),!r||!n?null:je(aa,{onError:t,children:je("div",{"data-popmelt-panel":!0,onClick:i=>{i.preventDefault(),i.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center",contain:"layout paint",position:"relative",isolation:"isolate"},children:je("div",{style:{zoom:.5,pointerEvents:"none"},children:Nf(n.type,n.props)})})})}function dg({components:e,selectedComponent:t,hoveredComponent:n,onRemove:o,onHover:r}){if(!e||Object.keys(e).length===0)return je("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let s=new Set(Object.keys(e)),i=Ss(s),l=Object.entries(e).sort(([a],[d])=>{var c,u;return((c=i.get(a))!=null?c:1/0)-((u=i.get(d))!=null?u:1/0)});return je(vr,{children:l.map(([a,d])=>je(lg,{name:a,value:d,selected:t===a,highlighted:n===a,onRemove:o,onHover:r},a))})}function Wc({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:o,selectedComponent:r,hoveredComponent:s,onComponentHover:i,onSpacingTokenHover:l,onModifySpacingToken:a,onDeleteSpacingToken:d,onComponentAdded:c,onComponentRemoved:u,onSynthesizeRules:p,isSynthesizing:g,snapPosition:v="bottom-right"}){let[x,w]=Kn(void 0),[I,N]=Kn(!0),[H,O]=Kn(()=>{try{let h=localStorage.getItem(Dc);if(h==="patterns"||h==="principles"||h==="rules")return h}catch(h){}return"patterns"});qo(()=>{Tr(e).then(h=>{w(h),N(!1)})},[e,t]),qo(()=>{try{localStorage.setItem(Dc,H)}catch(h){}},[H]),qo(()=>{r&&(O("patterns"),Tr(e).then(h=>{h&&w(h)}))},[r,e]);let L=Qi(h=>{w(A=>{if(!(A!=null&&A.components))return A;let K=A.components,{[h]:k}=K,be=Dn(K,[uo(h)]);return y(f({},A),{components:be})}),u==null||u(h)},[u]),Y=x==null?void 0:x.components,re=x==null?void 0:x.rules,Z=Y&&Object.keys(Y).length>0,_=re&&re.length>0,B=br(null);return qo(()=>{let h=B.current;if(!h)return;let A=n,k=o;return A&&h.addEventListener("mouseenter",A),k&&h.addEventListener("mouseleave",k),()=>{A&&h.removeEventListener("mouseenter",A),k&&h.removeEventListener("mouseleave",k)}},[n,o]),nn("div",{ref:B,style:f(f({},Vf),Ei(v)),children:[nn("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[je("span",{children:"Model"}),je("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),je("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(h=>je("button",{type:"button",style:H===h?Uf:zc,onClick:()=>O(h),children:h.charAt(0).toUpperCase()+h.slice(1)},h))}),je("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:H==="principles"?je(sg,{}):I?je("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!x||!Z&&!_?je("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):nn(vr,{children:[H==="patterns"&&je(dg,{components:Y,selectedComponent:r,hoveredComponent:s,onRemove:L,onHover:i}),H==="rules"&&je(ag,{rules:re,onSynthesize:p,isSynthesizing:g})]})})]})}import{jsx as $o}from"react/jsx-runtime";var ug="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",pg="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",fg="M29.8768 25.3531C30.9809 25.3531 31.876 26.2481 31.876 27.3522V31.3505C31.876 32.4545 30.9809 33.3496 29.8768 33.3496C28.7727 33.3496 27.8777 32.4545 27.8777 31.3505V27.3522C27.8777 26.2481 28.7727 25.3531 29.8768 25.3531ZM19.8812 25.3531C20.9852 25.3531 21.8803 26.2481 21.8803 27.3522V31.3505C21.8803 32.4545 20.9852 33.3496 19.8812 33.3496C18.7771 33.3496 17.882 32.4545 17.882 31.3505V27.3522C17.882 26.2481 18.7771 25.3531 19.8812 25.3531ZM24.8601 40.8772C36.974 40.8772 46.9603 33.8278 48.6801 30.8403C48.8058 30.6218 48.8464 30.3723 48.8464 30.1202V24.8018C48.8464 24.5813 48.8124 24.3622 48.7308 24.1574C47.9871 22.2899 46.0394 19.5773 43.5257 18.8495C43.1925 17.994 42.6989 16.7433 42.2384 15.8201C42.3154 15.1138 42.3426 14.3853 42.3426 13.6492C42.3426 10.99 41.7789 8.65743 40.0805 6.92044C39.2872 6.10915 38.3028 5.48684 37.1355 5.01903C34.3398 2.74775 30.2723 0.837036 24.8169 0.837036C19.3616 0.837036 15.3805 2.74775 12.5847 5.01903C11.4174 5.48684 10.433 6.10915 9.63975 6.92044C7.9413 8.65743 7.37764 10.99 7.37764 13.6492C7.37764 14.3853 7.40477 15.1138 7.48186 15.8201C7.02133 16.7433 6.52774 17.994 6.19449 18.8495C3.68082 19.5773 1.73309 22.2899 0.989389 24.1574C0.907813 24.3622 0.873779 24.5813 0.873779 24.8018V30.1202C0.873779 30.3723 0.914376 30.6218 1.04014 30.8403C2.75994 33.8278 12.7462 40.8772 24.8601 40.8772ZM26.485 13.0046C26.4 12.3422 26.3595 11.749 26.3584 11.2191L26.3584 11.1772C26.361 9.63975 26.6971 8.63938 27.2339 8.02499C27.9156 7.2448 29.3246 6.64707 32.2941 6.96844C35.3026 7.29402 36.9842 8.04072 37.9376 9.01574C38.8606 9.95971 39.3455 11.372 39.3455 13.6492C39.3455 16.0687 38.9969 17.4982 38.2302 18.3678C37.5012 19.1946 36.0656 19.8674 32.9214 19.8674C30.5041 19.8674 29.1221 19.0812 28.2386 17.9939C27.2899 16.8264 26.7559 15.1161 26.485 13.0046ZM23.2353 13.0046C23.3203 12.3422 23.3607 11.749 23.3619 11.2191L23.3619 11.1772C23.3592 9.63974 23.0232 8.63937 22.4863 8.02498C21.8046 7.24479 20.3957 6.64707 17.4261 6.96843C14.4176 7.29402 12.736 8.04071 11.7826 9.01573C10.8596 9.9597 10.3747 11.372 10.3747 13.6492C10.3747 16.0687 10.7234 17.4982 11.49 18.3677C12.219 19.1946 13.6546 19.8674 16.7989 19.8674C19.2161 19.8674 20.5981 19.0812 21.4816 17.9939C22.4304 16.8264 22.9643 15.1161 23.2353 13.0046ZM25.2042 18.8676L25.0543 18.8676C24.8715 18.8678 24.6005 18.868 24.516 18.8676C24.3045 19.2218 24.0693 19.5618 23.8075 19.884C22.2697 21.7764 19.9741 22.8644 16.7988 22.8644C13.3524 22.8644 10.8266 22.1471 9.24196 20.3498C9.15187 20.2476 9.07125 20.1406 9.07125 20.1406L8.87613 20.3498V33.5049C11.7429 35.0628 17.8959 37.8586 24.8601 37.8586C31.8243 37.8586 37.9773 35.0628 40.8441 33.5049V20.3498L40.649 20.1406C40.649 20.1406 40.5829 20.231 40.4783 20.3498C38.8936 22.1471 36.3678 22.8644 32.9214 22.8644C29.7461 22.8644 27.4506 21.7764 25.9127 19.884C25.6509 19.5618 25.4157 19.2218 25.2042 18.8676Z";function gg({size:e=16,style:t}){return $o("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:$o("path",{d:ug})})}function mg({size:e=16,style:t}){return $o("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:$o("path",{d:pg})})}function hg({size:e=16,style:t}){return $o("svg",{width:e,height:e,viewBox:"0 0 49.7202 40.0402",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:$o("path",{d:fg,fillRule:"evenodd",clipRule:"evenodd"})})}function ai({provider:e,size:t=16,style:n}){return e==="codex"?$o(mg,{size:t,style:n}):e==="copilot"?$o(hg,{size:t,style:n}):$o(gg,{size:t,style:n})}var ts=[{id:"claude-opus-4-6",label:"Opus 4.6",source:"static"},{id:"claude-sonnet-4-6",label:"Sonn 4.6",source:"static"}],ns=[{id:"gpt-5.4",label:"GPT 5.4",source:"static"},{id:"gpt-5.3-codex",label:"Codex 5.3",source:"static"},{id:"gpt-5.3-codex-spark",label:"Spark 5.3",source:"static"}],la=[{id:"",label:"Default",source:"static"}];var yg=[...ts,...ns,...la];function ca(e,t){if(t==="copilot"&&!e)return"Copilot";if(!e)return t==="codex"?"Codex":"Claude Code";let n=yg.find(o=>o.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as Gc}from"react/jsx-runtime";var oo={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function Wo({children:e,active:t,siblingActive:n,disabled:o,onClick:r,title:s}){let i=()=>o?.4:n&&!t?.5:1,l={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:0,border:"none",cursor:o?"default":"pointer",transition:"background-color 150ms ease, color 150ms ease, transform 100ms ease, opacity 150ms ease",backgroundColor:t?oo.bgActive:"transparent",color:t?oo.iconActive:oo.iconDefault,opacity:i()};return Gc("button",{type:"button",onClick:o?void 0:r,title:s,disabled:o,style:l,onMouseEnter:a=>{o||(a.currentTarget.style.opacity="1",t||(a.currentTarget.style.backgroundColor=oo.bgHover))},onMouseLeave:a=>{o||(a.currentTarget.style.opacity=String(i()),t||(a.currentTarget.style.backgroundColor="transparent"))},onMouseDown:a=>{o||(a.currentTarget.style.transform="scale(0.95)")},onMouseUp:a=>{o||(a.currentTarget.style.transform="scale(1)")},children:e})}function jc(){return Gc("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as li,jsx as ve,jsxs as At}from"react/jsx-runtime";function Lg(e,t){if(e<=0)return[];if(e<=4)return Array.from({length:e},(r,s)=>({key:`model-${s}`,index:s,active:s===t}));let n=e-1,o=r=>({key:`model-${r}`,index:r,active:r===t});return t===0?[o(0),o(1),o(2),{key:"overflow-after",overflow:!0}]:t===1?[{key:"overflow-before",overflow:!0},o(1),o(2),{key:"overflow-after",overflow:!0}]:t===n-1?[{key:"overflow-before",overflow:!0},o(n-2),o(n-1),o(n)]:t===n?[{key:"overflow-before",overflow:!0},o(n-2),o(n-1),o(n)]:t%2===0?[{key:"overflow-before",overflow:!0},o(t-1),o(t),{key:"overflow-after",overflow:!0}]:[{key:"overflow-before",overflow:!0},o(t),o(t+1),{key:"overflow-after",overflow:!0}]}var wr=[{type:"rectangle",icon:Mg,label:"Rectangle",shortcut:"R"},{type:"circle",icon:vg,label:"Oval",shortcut:"O"},{type:"line",icon:Tg,label:"Line",shortcut:"L"},{type:"freehand",icon:Eg,label:"Pen",shortcut:"P"}],Ag=new Set(wr.map(e=>e.type));function Pg(e,t,n,o,r,s,i,l){let a=(e-r)*(o-s)-(n-r)*(t-s),d=(e-i)*(s-l)-(r-i)*(t-l),c=(e-n)*(l-o)-(i-n)*(t-o),u=a<0||d<0||c<0,p=a>0||d>0||c>0;return!(u&&p)}function Og(e="bottom-right"){return ul(e,window.innerWidth,window.innerHeight)}var Bg=[{type:"text",icon:Rg,label:"Text",shortcut:"T"}],Yc={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"}]},eval:{name:"Evals",desc:"Synthesize inferred evals from design history.",usage:["Infer evals from annotations","Reject, refine, or approve proposals"],keys:[{key:"E",desc:"Select tool"},{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.
|
|
12
|
+
`}),Array.from({length:b},(L,h)=>{let C=i[h]??"",M=v&&h>=i.length,ae=o===h||M,me=(M?void 0:I.get(C.trim()))?.status,G=me?Ap[me]:"#374151",se=me?Pp[me]:"\u25A1",P=me?{color:G}:{},fe=me?{color:G}:{};return ae?so("div",{style:Kl,children:[Et("span",{style:P,children:se}),Et("textarea",{className:"popmelt-eval-assertion-input",ref:ge=>{u.current[h]=ge},rows:1,value:C,placeholder:M?"cmd+enter to add new assertion":void 0,onFocus:()=>r(h),onChange:ge=>{_(h,ge.target.value),ql(ge.currentTarget)},onBlur:ge=>k(h,ge),onKeyDown:ge=>ee(h,ge),style:{...Rp,...fe}})]},`assertion-${h}`):so("div",{style:Kl,children:[Et("span",{style:P,children:se}),Et("button",{type:"button",onMouseDown:ge=>w(h,ge),onClick:()=>F(h),style:{...Ys,...fe},children:C})]},`assertion-${h}`)})]})}import{Component as df,createElement as uf,useCallback as _i,useEffect as Wo,useRef as sr,useState as Wn}from"react";import{Link2 as pf}from"lucide-react";var Yp={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},Vp=/^#[0-9a-fA-F]{3,8}$/,Up=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,Kp=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 tc(e){let t=e.trim().toLowerCase();return Vp.test(t)||Up.test(t)||Kp.has(t)}var Xp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Vs(e){return Xp.test(e.trim())}var ec=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function qp(e){let t=e.trim().toLowerCase();return!!(ec.has(t)||t.includes(",")&&t.split(",").some(n=>ec.has(n.trim().replace(/['"]/g,""))))}function Zp(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(tc(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var Qp=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,ef=/^--(font-family|font|ff|family)/i,tf=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,nf=/^--(space|gap|padding|margin|inset)/i,of=/^--(radius|rounded|br|border-radius)/i,rf=/^--(shadow|elevation|drop-shadow)/i;function nc(e,t){let n=e.toLowerCase();return rf.test(n)?"shadows":of.test(n)?"radii":ef.test(n)?"fonts":tf.test(n)&&Vs(t)?"typeScale":Qp.test(n)||tc(t)?"colors":qp(t)?"fonts":Zp(t)?"shadows":nf.test(n)&&Vs(t)||Vs(t)?"spacing":"other"}function oc(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){oc(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&sf(r.style,t,n,o)}}}var rc=/var\((--[^,)]+)/;function sf(e,t,n,o){for(let r=0;r<e.length;r++){let i=e[r];if(!i?.startsWith("--")||n.has(i))continue;n.add(i);let a=t.getPropertyValue(i).trim();if(!a)continue;let s=nc(i,a);o[s].push([i,a]);let d=e.getPropertyValue(i).trim().match(rc);d&&(o.references[i]=d[1])}}function Di(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function Bi(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 o=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(o){let[i,a,s]=[parseInt(o[1],10),parseInt(o[2],10),parseInt(o[3],10)];return(.2126*i+.7152*a+.0722*s)/255}let r=t.match(/hsla?\(\s*[\d.]+[,\s]+[\d.]+%?[,\s]+([\d.]+)%?/);if(r)return parseFloat(r[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 a=parseInt(i.slice(0,2),16),s=parseInt(i.slice(2,4),16),l=parseInt(i.slice(4,6),16);if(!isNaN(a))return(.2126*a+.7152*s+.0722*l)/255}return null}function ic(e){return e==="colors"?(t,n)=>{let o=Bi(t[1]),r=Bi(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let o=Di(t[1]),r=Di(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let o=Di(t[1]),r=Di(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:(t,n)=>t[0].localeCompare(n[0])}function af(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 sc(e){let t=new Map;for(let r of e){let i=af(r[0]),a=t.get(i);a||(a=[],t.set(i,a)),a.push(r)}let n=ic("colors");for(let r of t.values())r.sort(n);let o=[...t.entries()];return o.sort((r,i)=>{let a=Bi(r[1][0][1])??0,s=Bi(i[1][0][1])??0;return a-s}),o}var lf=["colors","fonts","typeScale","spacing","radii","shadows","other"],Oi=null,cf=5e3;function ac(){if(typeof document>"u")return Yp;if(Oi&&Date.now()-Oi.timestamp<cf)return Oi.tokens;let e={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},t=new Set,n=getComputedStyle(document.documentElement);try{for(let r of document.styleSheets)try{oc(r.cssRules||r.rules,n,t,e)}catch{}}catch{}let o=document.documentElement.style;for(let r=0;r<o.length;r++){let i=o[r];if(!i?.startsWith("--")||t.has(i))continue;t.add(i);let a=n.getPropertyValue(i).trim();if(!a)continue;let s=nc(i,a);e[s].push([i,a]);let d=o.getPropertyValue(i).trim().match(rc);d&&(e.references[i]=d[1])}for(let r of lf)e[r].sort(ic(r));return Oi={tokens:e,timestamp:Date.now()},e}import{Fragment as ar,jsx as Ae,jsxs as Qt}from"react/jsx-runtime";var lc="popmelt-library-tab",ff=/^#[0-9a-fA-F]{3,8}$/,gf=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,mf=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),hf=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function dc(e){let t=e.trim();return ff.test(t)||gf.test(t)||mf.has(t.toLowerCase())}function yf(e){return hf.test(e.trim())}function bf(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function uc(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[o,r]of Object.entries(e)){let i=t?`${t}.${o}`:o;if(r!==null&&typeof r=="object"&&!Array.isArray(r)){let a=r;typeof a.value=="string"?n.push([i,a.value]):n.push(...uc(r,i))}else n.push([i,Array.isArray(r)?r.map(String).join(", "):String(r??"")])}return n}function vf(e){return e.length===0?"generic":e.filter(([,o])=>dc(o)).length>e.length/2?"colors":e.filter(([,o])=>yf(o)).length>e.length/2?"spacing":"generic"}var xf={width:300,backgroundColor:"#eaeaea",...zo,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"},pc={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},Sf={...pc,color:"#1f2937",borderBottom:"1.5px solid #1f2937"};function wf({varName:e,value:t,reference:n}){return Ae("div",{title:n?`${e} \u2192 ${n}
|
|
13
|
+
${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&&Ae(pf,{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 fc({entries:e,references:t}){let n=[],o=[];for(let i of e)dc(i[1])?n.push(i):o.push(i);let r=sc(n);return Qt(ar,{children:[r.map(([i,a])=>Qt("div",{style:{marginBottom:4},children:[Qt("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[i,a.length>1?` (${a.length})`:""]}),Ae("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:a.map(([s,l])=>Ae(wf,{varName:s,value:l,reference:t[s]},s))})]},i)),o.length>0&&Ae(Ni,{entries:o})]})}var Hi=[0,1,2,4,8,12,16,20,24,28,32];function Cf(e){if(e<=32){let t=Hi[0],n=Math.abs(e-t);for(let o=1;o<Hi.length;o++){let r=Math.abs(e-Hi[o]);r<n&&(t=Hi[o],n=r)}return t}return Math.round(e/8)*8}function Ef({label:e,value:t,px:n,tokenPath:o,rawToken:r,onHover:i,onModify:a,onDelete:s}){let[l,d]=Wn(!1),[c,u]=Wn(null),p=sr(!1),f=sr(0),v=sr(0),b=sr([]),I=c!==null?c:n,D=c!==null?`${c}px`:t,A=c!==null,F=_i(R=>{R.preventDefault(),p.current=!0,f.current=R.clientX,v.current=n;let Y=fi(r);b.current=us(Y);let ee=w=>{let L=w.clientX-f.current,h=Math.max(0,Math.round(v.current+L));w.shiftKey&&(h=Cf(h));for(let C of b.current)C.element.style.setProperty(C.property,h+"px","important");u(h),i?.({name:e,px:h,token:Y})},k=()=>{window.removeEventListener("mousemove",ee),window.removeEventListener("mouseup",k),document.body.style.cursor="",p.current=!1,u(w=>{if(w!==null&&w!==n&&a){let L=fi(r),h=L.bindings&&L.bindings.length>0,C;if(h){let me=fs(L.bindings,v.current,w);C=JSON.stringify({...L,value:`${w}px`,bindings:me})}else{let me=el(b.current,v.current),G=tl(b.current);if(me.length>0){let se=fs(me,v.current,w);C=JSON.stringify({value:`${w}px`,property:G,bindings:se})}else C=`${w}px`}let M=typeof r=="string"?r:JSON.stringify(r),ae=b.current.map(me=>({selector:Fn(me.element),property:me.property})),Fe=ol(b.current,v.current,w);a({tokenPath:o,originalValue:M,currentValue:C,targets:ae,originalPx:v.current,currentPx:w},{id:Math.random().toString(36).substring(2,9),tokenPath:o,tokenName:e,originalPx:v.current,newPx:w,affectedElements:Fe})}return w})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",ee),window.addEventListener("mouseup",k)},[n,e,o,r,i,a]),_=fi(r);return Qt("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?.({name:e,px:I,token:_}))},onMouseLeave:()=>{p.current||(d(!1),i?.(null))},onMouseDown:F,children:[Ae("span",{style:{color:l||A?"#FF0000":"#9ca3af"},children:e}),Qt("span",{style:{display:"flex",alignItems:"center",gap:4},children:[Ae("span",{style:{color:l||A?"#FF0000":"#6b7280",fontWeight:600},children:D}),s&&l&&!A&&Ae("button",{type:"button",title:"Remove token",onMouseDown:R=>{R.stopPropagation();let Y=typeof r=="string"?r:JSON.stringify(r);s(o,Y)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:R=>{R.currentTarget.style.color="#FF0000"},onMouseLeave:R=>{R.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function kf({entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}){let a=[],s=[];for(let l of e){let d=bf(l[1]);d!==null?a.push([l[0],l[1],d]):s.push(l)}return Qt(ar,{children:[a.length>0&&Ae("div",{style:{display:"flex",flexDirection:"column",gap:2},children:a.map(([l,d,c])=>{let u=l.split(".").pop(),p=n?Tf(n,l):d,f=p&&typeof p=="object"&&"value"in p?p:d;return Ae(Ef,{label:u,value:d,px:c,tokenPath:`tokens.${t}.${l}`,rawToken:f,onHover:o,onModify:r,onDelete:i},l)})}),s.length>0&&Ae(Ni,{entries:s})]})}function Tf(e,t){let n=t.split("."),o=e;for(let r of n){if(o==null||typeof o!="object")return;o=o[r]}return o}function Ni({entries:e}){return Ae("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>Qt("div",{style:{fontSize:11},children:[Ae("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),Ae("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function Mf({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:o,onModifyToken:r,onDeleteToken:i}){let a=vf(e);return a==="colors"?Ae(fc,{entries:e}):a==="spacing"?Ae(kf,{entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}):Ae(Ni,{entries:e})}function If(e){let t=e.toLowerCase(),n=null,o=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}}),r=o.currentNode;for(;r=o.nextNode();){let i=r,a=Object.keys(i).find(l=>l.startsWith("__reactFiber$")||l.startsWith("__reactInternalInstance$"));if(!a)continue;let s=i[a];for(;s;){let l=s.type,d=typeof l=="function"||typeof l=="object"?l?.displayName||l?.name:null;if(typeof d=="string"){let c=d.toLowerCase();if(c===t){let u={...s.memoizedProps};return delete u.ref,{type:l,props:u}}if(!n){if(c.length>=4&&t.includes(c)){let u={...s.memoizedProps};delete u.ref,n={type:l,props:u}}else if(t.length>=4&&c.includes(t)){let u={...s.memoizedProps};delete u.ref,n={type:l,props:u}}}}s=s.return}}return n}var Us=class extends df{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}},gc="popmelt-principles-collapsed";function Rf(){try{let e=localStorage.getItem(gc);if(e)return new Set(JSON.parse(e))}catch{}return new Set}function Lf(e){try{localStorage.setItem(gc,JSON.stringify([...e]))}catch{}}function Af({id:e,label:t,count:n,children:o,collapsed:r,onToggle:i}){return Qt("div",{style:{marginBottom:14},children:[Qt("div",{onClick:()=>i(e),style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:r?0:6,cursor:"pointer",display:"flex",alignItems:"center",gap:4,userSelect:"none"},children:[Ae("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:r?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,Ae("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!r&&o]})}var Pf={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},cc=["colors","fonts","typeScale","spacing","radii","shadows","other"];function Df(){let[e,t]=Wn(null),[n,o]=Wn(Rf);Wo(()=>{t(ac())},[]);let r=_i(a=>{o(s=>{let l=new Set(s);return l.has(a)?l.delete(a):l.add(a),Lf(l),l})},[]);return e?cc.some(a=>e[a].length>0)?Ae(ar,{children:cc.map(a=>{let s=e[a];return s.length===0?null:Ae(Af,{id:a,label:Pf[a],count:s.length,collapsed:n.has(a),onToggle:r,children:a==="colors"?Ae(fc,{entries:s,references:e.references}):Ae(Ni,{entries:s})},a)})}):Ae("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function Of({rules:e,onSynthesize:t,isSynthesizing:n}){if(!e||e.length===0)return Ae("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."});if(!e.some(i=>typeof i=="object"&&i!==null&&"scope"in i))return Ae(ar,{children:e.map((i,a)=>Qt("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[Qt("span",{style:{color:"#9ca3af",flexShrink:0},children:[a+1,"."]}),Ae("span",{children:typeof i=="string"?i:i.text})]},a))});let r=new Map;for(let i of e)if(typeof i=="string")r.has("general")||r.set("general",[]),r.get("general").push({id:"",text:i});else{let a=i.scope||"general";r.has(a)||r.set(a,[]),r.get(a).push({id:i.id,text:i.text})}return Qt(ar,{children:[t&&Ae("button",{type:"button",disabled:n,onClick:t,style:{width:"100%",border:"1px solid rgba(0,0,0,0.12)",background:n?"rgba(0,0,0,0.04)":"rgba(0,0,0,0.02)",cursor:n?"default":"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"5px 8px",marginBottom:10,color:n?"#9ca3af":"#6b7280"},children:n?"Synthesizing\u2026":"Synthesize"}),Array.from(r.entries()).map(([i,a])=>Qt("div",{style:{marginBottom:10},children:[Ae("div",{style:{fontWeight:700,fontSize:10,color:"#6b7280",letterSpacing:"0.05em",textTransform:"uppercase",marginBottom:4},children:i}),a.map((s,l)=>Qt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4,fontSize:11},children:[Ae("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2022"}),Ae("span",{children:s.text})]},s.id||l))]},i))]})}function Bf({name:e,value:t,selected:n,highlighted:o,onRemove:r,onHover:i}){let[a,s]=Wn(!1),[l,d]=Wn(!1),c=sr(null),u=sr(0),[p,f]=Wn(0),[v,b]=Wn(0),I=uc(t),D=I.find(([w])=>w==="description")?.[1];Wo(()=>{if(!l&&!o){f(0),b(0),u.current=0;return}let w=Er(e);f(w.length)},[l,o,e]),Wo(()=>{n&&c.current&&c.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let A=n||o||l,F=n?"139,92,246":"34,197,94",_=n?"#8b5cf6":"#22c55e",R=A?`rgba(${F},0.06)`:void 0,Y=A?`inset 0 0 0 1.5px rgba(${F},0.35)`:void 0,ee=o||l,k=_i(()=>{let w=Er(e);if(w.length===0)return;let L=u.current%w.length;w[L].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),b(L),u.current=L+1,i?.({name:e,instanceIndex:L})},[e,i]);return Qt("div",{ref:c,onClick:k,onMouseEnter:()=>{d(!0),i?.({name:e,instanceIndex:0})},onMouseLeave:()=>{d(!1),i?.(null)},style:{marginBottom:8,background:R,padding:6,boxShadow:Y,cursor:"pointer"},children:[Qt("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[Qt("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[Ae("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:ee?_:"transparent",color:ee?"#fff":"#6b7280"},children:e}),ee&&p>1&&Qt("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[v+1,"/",p]})]}),r&&l&&Ae("button",{type:"button",title:"Remove from model",onClick:w=>{w.stopPropagation(),r(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:w=>{w.currentTarget.style.color="#FF0000"},onMouseLeave:w=>{w.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),D&&Ae("div",{style:{fontSize:11,color:ee?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:D}),a?Ae(Mf,{entries:I.filter(([w])=>w!=="description"),categoryKey:""}):Ae(Hf,{name:e,onNotFound:()=>s(!0),entries:I})]})}function Hf({name:e,onNotFound:t}){let[n,o]=Wn(null),[r,i]=Wn(!1);return Wo(()=>{let a=If(e);a||t(),o(a),i(!0)},[e,t]),!r||!n?null:Ae(Us,{onError:t,children:Ae("div",{"data-popmelt-panel":!0,onClick:a=>{a.preventDefault(),a.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:Ae("div",{style:{zoom:.5,pointerEvents:"none"},children:uf(n.type,n.props)})})})}function _f({components:e,selectedComponent:t,hoveredComponent:n,onRemove:o,onHover:r}){if(!e||Object.keys(e).length===0)return Ae("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),a=ls(i),s=Object.entries(e).sort(([l],[d])=>(a.get(l)??1/0)-(a.get(d)??1/0));return Ae(ar,{children:s.map(([l,d])=>Ae(Bf,{name:l,value:d,selected:t===l,highlighted:n===l,onRemove:o,onHover:r},l))})}function mc({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:o,selectedComponent:r,hoveredComponent:i,onComponentHover:a,onSpacingTokenHover:s,onModifySpacingToken:l,onDeleteSpacingToken:d,onComponentAdded:c,onComponentRemoved:u,onSynthesizeRules:p,isSynthesizing:f,snapPosition:v="bottom-right"}){let[b,I]=Wn(void 0),[D,A]=Wn(!0),[F,_]=Wn(()=>{try{let h=localStorage.getItem(lc);if(h==="patterns"||h==="principles"||h==="rules")return h}catch{}return"patterns"});Wo(()=>{mr(e).then(h=>{I(h),A(!1)})},[e,t]),Wo(()=>{try{localStorage.setItem(lc,F)}catch{}},[F]),Wo(()=>{r&&(_("patterns"),mr(e).then(h=>{h&&I(h)}))},[r,e]);let R=_i(h=>{I(C=>{if(!C?.components)return C;let{[h]:M,...ae}=C.components;return{...C,components:ae}}),u?.(h)},[u]),Y=b?.components,ee=b?.rules,k=Y&&Object.keys(Y).length>0,w=ee&&ee.length>0,L=sr(null);return Wo(()=>{let h=L.current;if(!h)return;let C=n,M=o;return C&&h.addEventListener("mouseenter",C),M&&h.addEventListener("mouseleave",M),()=>{C&&h.removeEventListener("mouseenter",C),M&&h.removeEventListener("mouseleave",M)}},[n,o]),Qt("div",{ref:L,style:{...xf,...li(v)},children:[Qt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[Ae("span",{children:"Model"}),Ae("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),Ae("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(h=>Ae("button",{type:"button",style:F===h?Sf:pc,onClick:()=>_(h),children:h.charAt(0).toUpperCase()+h.slice(1)},h))}),Ae("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:F==="principles"?Ae(Df,{}):D?Ae("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!b||!k&&!w?Ae("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):Qt(ar,{children:[F==="patterns"&&Ae(_f,{components:Y,selectedComponent:r,hoveredComponent:i,onRemove:R,onHover:a}),F==="rules"&&Ae(Of,{rules:ee,onSynthesize:p,isSynthesizing:f})]})})]})}import{jsx as Po}from"react/jsx-runtime";var Nf="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",Ff="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",zf="M29.8768 25.3531C30.9809 25.3531 31.876 26.2481 31.876 27.3522V31.3505C31.876 32.4545 30.9809 33.3496 29.8768 33.3496C28.7727 33.3496 27.8777 32.4545 27.8777 31.3505V27.3522C27.8777 26.2481 28.7727 25.3531 29.8768 25.3531ZM19.8812 25.3531C20.9852 25.3531 21.8803 26.2481 21.8803 27.3522V31.3505C21.8803 32.4545 20.9852 33.3496 19.8812 33.3496C18.7771 33.3496 17.882 32.4545 17.882 31.3505V27.3522C17.882 26.2481 18.7771 25.3531 19.8812 25.3531ZM24.8601 40.8772C36.974 40.8772 46.9603 33.8278 48.6801 30.8403C48.8058 30.6218 48.8464 30.3723 48.8464 30.1202V24.8018C48.8464 24.5813 48.8124 24.3622 48.7308 24.1574C47.9871 22.2899 46.0394 19.5773 43.5257 18.8495C43.1925 17.994 42.6989 16.7433 42.2384 15.8201C42.3154 15.1138 42.3426 14.3853 42.3426 13.6492C42.3426 10.99 41.7789 8.65743 40.0805 6.92044C39.2872 6.10915 38.3028 5.48684 37.1355 5.01903C34.3398 2.74775 30.2723 0.837036 24.8169 0.837036C19.3616 0.837036 15.3805 2.74775 12.5847 5.01903C11.4174 5.48684 10.433 6.10915 9.63975 6.92044C7.9413 8.65743 7.37764 10.99 7.37764 13.6492C7.37764 14.3853 7.40477 15.1138 7.48186 15.8201C7.02133 16.7433 6.52774 17.994 6.19449 18.8495C3.68082 19.5773 1.73309 22.2899 0.989389 24.1574C0.907813 24.3622 0.873779 24.5813 0.873779 24.8018V30.1202C0.873779 30.3723 0.914376 30.6218 1.04014 30.8403C2.75994 33.8278 12.7462 40.8772 24.8601 40.8772ZM26.485 13.0046C26.4 12.3422 26.3595 11.749 26.3584 11.2191L26.3584 11.1772C26.361 9.63975 26.6971 8.63938 27.2339 8.02499C27.9156 7.2448 29.3246 6.64707 32.2941 6.96844C35.3026 7.29402 36.9842 8.04072 37.9376 9.01574C38.8606 9.95971 39.3455 11.372 39.3455 13.6492C39.3455 16.0687 38.9969 17.4982 38.2302 18.3678C37.5012 19.1946 36.0656 19.8674 32.9214 19.8674C30.5041 19.8674 29.1221 19.0812 28.2386 17.9939C27.2899 16.8264 26.7559 15.1161 26.485 13.0046ZM23.2353 13.0046C23.3203 12.3422 23.3607 11.749 23.3619 11.2191L23.3619 11.1772C23.3592 9.63974 23.0232 8.63937 22.4863 8.02498C21.8046 7.24479 20.3957 6.64707 17.4261 6.96843C14.4176 7.29402 12.736 8.04071 11.7826 9.01573C10.8596 9.9597 10.3747 11.372 10.3747 13.6492C10.3747 16.0687 10.7234 17.4982 11.49 18.3677C12.219 19.1946 13.6546 19.8674 16.7989 19.8674C19.2161 19.8674 20.5981 19.0812 21.4816 17.9939C22.4304 16.8264 22.9643 15.1161 23.2353 13.0046ZM25.2042 18.8676L25.0543 18.8676C24.8715 18.8678 24.6005 18.868 24.516 18.8676C24.3045 19.2218 24.0693 19.5618 23.8075 19.884C22.2697 21.7764 19.9741 22.8644 16.7988 22.8644C13.3524 22.8644 10.8266 22.1471 9.24196 20.3498C9.15187 20.2476 9.07125 20.1406 9.07125 20.1406L8.87613 20.3498V33.5049C11.7429 35.0628 17.8959 37.8586 24.8601 37.8586C31.8243 37.8586 37.9773 35.0628 40.8441 33.5049V20.3498L40.649 20.1406C40.649 20.1406 40.5829 20.231 40.4783 20.3498C38.8936 22.1471 36.3678 22.8644 32.9214 22.8644C29.7461 22.8644 27.4506 21.7764 25.9127 19.884C25.6509 19.5618 25.4157 19.2218 25.2042 18.8676Z";function $f({size:e=16,style:t}){return Po("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:Po("path",{d:Nf})})}function Wf({size:e=16,style:t}){return Po("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:Po("path",{d:Ff})})}function jf({size:e=16,style:t}){return Po("svg",{width:e,height:e,viewBox:"0 0 49.7202 40.0402",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:Po("path",{d:zf,fillRule:"evenodd",clipRule:"evenodd"})})}function Kr({provider:e,size:t=16,style:n}){return e==="codex"?Po(Wf,{size:t,style:n}):e==="copilot"?Po(jf,{size:t,style:n}):Po($f,{size:t,style:n})}var Fi=[{id:"claude-opus-4-6",label:"Opus 4.6",source:"static"},{id:"claude-sonnet-4-6",label:"Sonn 4.6",source:"static"}],zi=[{id:"gpt-5.4",label:"GPT 5.4",source:"static"},{id:"gpt-5.3-codex",label:"Codex 5.3",source:"static"},{id:"gpt-5.3-codex-spark",label:"Spark 5.3",source:"static"}],Ks=[{id:"",label:"Default",source:"static"}];var Gf=[...Fi,...zi,...Ks];function Xs(e,t){if(t==="copilot"&&!e)return"Copilot";if(!e)return t==="codex"?"Codex":"Claude Code";let n=Gf.find(o=>o.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as yc}from"react/jsx-runtime";var Un={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function Do({children:e,active:t,siblingActive:n,disabled:o,onClick:r,title:i}){let a=()=>o?.4:n&&!t?.5:1,s={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:0,border:"none",cursor:o?"default":"pointer",transition:"background-color 150ms ease, color 150ms ease, transform 100ms ease, opacity 150ms ease",backgroundColor:t?Un.bgActive:"transparent",color:t?Un.iconActive:Un.iconDefault,opacity:a()};return yc("button",{type:"button",onClick:o?void 0:r,title:i,disabled:o,style:s,onMouseEnter:l=>{o||(l.currentTarget.style.opacity="1",t||(l.currentTarget.style.backgroundColor=Un.bgHover))},onMouseLeave:l=>{o||(l.currentTarget.style.opacity=String(a()),t||(l.currentTarget.style.backgroundColor="transparent"))},onMouseDown:l=>{o||(l.currentTarget.style.transform="scale(0.95)")},onMouseUp:l=>{o||(l.currentTarget.style.transform="scale(1)")},children:e})}function hc(){return yc("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as Xr,jsx as ue,jsxs as kt}from"react/jsx-runtime";function og(e,t){if(e<=0)return[];if(e<=4)return Array.from({length:e},(r,i)=>({key:`model-${i}`,index:i,active:i===t}));let n=e-1,o=r=>({key:`model-${r}`,index:r,active:r===t});return t===0?[o(0),o(1),o(2),{key:"overflow-after",overflow:!0}]:t===1?[{key:"overflow-before",overflow:!0},o(1),o(2),{key:"overflow-after",overflow:!0}]:t===n-1?[{key:"overflow-before",overflow:!0},o(n-2),o(n-1),o(n)]:t===n?[{key:"overflow-before",overflow:!0},o(n-2),o(n-1),o(n)]:t%2===0?[{key:"overflow-before",overflow:!0},o(t-1),o(t),{key:"overflow-after",overflow:!0}]:[{key:"overflow-before",overflow:!0},o(t),o(t+1),{key:"overflow-after",overflow:!0}]}var dr=[{type:"rectangle",icon:eg,label:"Rectangle",shortcut:"R"},{type:"circle",icon:Yf,label:"Oval",shortcut:"O"},{type:"line",icon:Qf,label:"Line",shortcut:"L"},{type:"freehand",icon:qf,label:"Pen",shortcut:"P"}],rg=new Set(dr.map(e=>e.type));function ig(e,t,n,o,r,i,a,s){let l=(e-r)*(o-i)-(n-r)*(t-i),d=(e-a)*(i-s)-(r-a)*(t-s),c=(e-n)*(s-o)-(a-n)*(t-o),u=l<0||d<0||c<0,p=l>0||d>0||c>0;return!(u&&p)}function sg(e="bottom-right"){return Na(e,window.innerWidth,window.innerHeight)}var ag=[{type:"text",icon:ng,label:"Text",shortcut:"T"}],bc={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"}]},eval:{name:"Evals",desc:"Synthesize inferred evals from design history.",usage:["Infer evals from annotations","Reject, refine, or approve proposals"],keys:[{key:"E",desc:"Select tool"},{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.
|
|
14
14
|
|
|
15
|
-
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},Dg={zIndex:9999,display:"flex",alignItems:"center",backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",cursor:"pointer",overflow:"visible",boxSizing:"content-box",transition:"none"},da="devtools-toolbar-expanded",ua="devtools-annotations",pa="devtools-style-modifications",fa="devtools-active-tool",Jc="devtools-active-color",Vc="devtools-stroke-width",Uc="devtools-inspected-element",ga="devtools-spacing-changes",_g={expanded:da,annotations:ua,styleMods:pa,spacingChanges:ga,tool:fa,color:Jc,stroke:Vc,inspected:Uc};function Kc({state:e,dispatch:t,onScreenshot:n,onSendToClaude:o,hasActiveJobs:r,activeJobColor:s,onCrosshairHover:i,onClear:l,provider:a="claude",onProviderChange:d,availableProviders:c,modelIndex:u=0,modelCount:p=2,modelLabel:g="Opus 4.6",onModelChange:v,onViewThread:x,isThreadPanelOpen:w,mcpStatus:I,bridgeUrl:N,isBridgeConnected:H,packageVersion:O,bridgeVersion:L,bridgeRestartState:Y="idle",bridgeRestartMessage:re,onBridgeRestart:Z,modelSelectedComponent:_,modelCanvasHoveredComponent:B,onModelComponentHover:h,onSpacingTokenHover:A,onModifySpacingToken:k,onDeleteSpacingToken:be,modelRefreshKey:K,evalRefreshKey:de,onModelComponentAdded:F,onModelComponentRemoved:me,onSynthesizeRules:R,isSynthesizing:ie,onSynthesizeEvals:Se,isSynthesizingEvals:Pe,onRunEval:_e,onViewEvalRunThread:Ze,runningEvalIds:Oe,onMouseEnter:he,toolbarRef:Fe,snapPosition:rt="bottom-right",onSnapPositionChange:ht}){let[Jt,Q]=Sr(()=>typeof window!="undefined"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});mn(()=>{let D=()=>Q({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",D),()=>window.removeEventListener("resize",D)},[]);let[ne,Te]=Sr(()=>typeof window=="undefined"?!1:localStorage.getItem(da)==="true"),[$e,pt]=Sr(0),Je=Nt(0),ye=Nt(0),ct=Nt(e.isAnnotating),Ge=Nt(!1),_t=Nt(typeof window!="undefined"?localStorage.getItem(fa):null),dt=Nt(typeof window!="undefined"?localStorage.getItem(Jc):null),pe=Nt(typeof window!="undefined"?localStorage.getItem(Vc):null),[se,Ce]=Sr(null),Re=Nt(!1),it=Nt(null),Me=Nt(null),Wt=Nt(null),[en,pn]=Sr([]),zn=Nt({x:0,y:0}),jt=Nt(null),Ot=Nt(null),hn=Nt(null),vt=Xn(()=>{jt.current=null,Ot.current=null,hn.current&&(clearTimeout(hn.current),hn.current=null)},[]),Vt=Xn(D=>{Me.current&&(clearTimeout(Me.current),Me.current=null),Re.current?(jt.current=D,Ot.current=f({},zn.current),hn.current&&clearTimeout(hn.current),hn.current=setTimeout(()=>{jt.current&&(Ce(jt.current),vt())},300)):(it.current&&clearTimeout(it.current),it.current=setTimeout(()=>{Re.current=!0,Ce(D),it.current=null},500))},[vt]),Qe=Xn(()=>{vt(),it.current&&(clearTimeout(it.current),it.current=null),Me.current=setTimeout(()=>{Re.current=!1,Ce(null)},150)},[vt]);mn(()=>{let D=Wt.current;if(!D)return;let V=()=>{vt(),Me.current&&(clearTimeout(Me.current),Me.current=null)},ee=()=>{Me.current=setTimeout(()=>{Re.current=!1,Ce(null)},150)};return D.addEventListener("mouseenter",V),D.addEventListener("mouseleave",ee),()=>{D.removeEventListener("mouseenter",V),D.removeEventListener("mouseleave",ee)}},[se,vt]),mn(()=>{if(se!=="counter"||!N)return;let D=!1;return fetch(`${N}/threads/recent?limit=5`).then(V=>V.ok?V.json():[]).then(V=>{D||pn(V)}).catch(()=>{}),()=>{D=!0}},[se,N]);let xo=Xn(D=>{if(zn.current={x:D.clientX,y:D.clientY},jt.current&&Ot.current){let V=Ot.current,ee=Og(rt);Pg(D.clientX,D.clientY,V.x,V.y,ee.left,ee.y,ee.right,ee.y)||(Ce(jt.current),vt())}},[vt,rt]),Ke=xr(()=>{let D=(c!=null?c:[]).map(V=>V==="claude"?"Claude":V==="codex"?"Codex":V==="copilot"?"Copilot":V);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]),Tt=xr(()=>{var ee;let D=c&&c.length>0?c:["claude","codex","copilot"],V=D.indexOf(a);return(ee=D[(V>=0?V+1:0)%D.length])!=null?ee:a},[c,a]),Gn=xr(()=>Lg(p,u),[p,u]);Sc(ne,e,Ge,!!r,_g),mn(()=>{let D=new URLSearchParams(window.location.search);if(!D.has("popmelt"))return;let V=document.createElement("style");V.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(V);let ee=parseInt(D.get("popmelt")||"0",10)||0,ge=()=>{Te(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})};if(ee>0){let ae=setTimeout(ge,ee);return()=>clearTimeout(ae)}ge()},[]),mn(()=>{var ee;if(localStorage.getItem(da)==="true"&&!e.isAnnotating){if(ne||Te(!0),t({type:"SET_TOOL",payload:_t.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),dt.current&&t({type:"SET_COLOR",payload:dt.current}),pe.current){let Ne=parseFloat(pe.current);isNaN(Ne)||t({type:"SET_STROKE_WIDTH",payload:Ne})}let ge=localStorage.getItem(ua);if(ge)try{let Ne=JSON.parse(ge);if(Array.isArray(Ne)&&Ne.length>0){for(let Mt of Ne)(Mt.status==="waiting_input"||Mt.status==="in_flight")&&(Mt.status=Mt.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:Ne}})}}catch(Ne){}let ae=localStorage.getItem(pa);if(ae)try{let Ne=JSON.parse(ae);Array.isArray(Ne)&&Ne.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:Ne}),Oi(Ne))}catch(Ne){}let Ie=localStorage.getItem(ga);if(Ie)try{let Ne=JSON.parse(Ie);Array.isArray(Ne)&&Ne.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:Ne})}catch(Ne){}let ke=localStorage.getItem(Uc);if(ke)try{let{selector:Ne,info:Mt}=JSON.parse(ke);if(Ne){let qt=Hn(Ne);if(qt){let xn=Mt||y(f({},Nn(qt)),{selector:Ne});t({type:"SELECT_ELEMENT",payload:{el:qt,info:xn}})}}}catch(Ne){}let He=sessionStorage.getItem("popmelt-pending-focus");if(He){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:Ne}=JSON.parse(He);if(Ne){let Mt=ge?(ee=JSON.parse(ge))!=null?ee:[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:Ne}});let qt=Mt.find(xn=>xn.id===Ne);if(qt){let It=(qt.groupId?Mt.filter(Ve=>Ve.groupId===qt.groupId):[qt]).flatMap(Ve=>Ve.points);if(It.length>0){let Ve=Math.min(...It.map(En=>En.x)),Yn=Math.max(...It.map(En=>En.x)),Oo=Math.min(...It.map(En=>En.y)),Bo=Math.max(...It.map(En=>En.y));window.scrollTo({left:(Ve+Yn)/2-window.innerWidth/2,top:(Oo+Bo)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch(Ne){}}}let V=sessionStorage.getItem("popmelt-pending-thread");if(V){sessionStorage.removeItem("popmelt-pending-thread");try{let{threadId:ge,selector:ae,preview:Ie}=JSON.parse(V);ge&&requestAnimationFrame(()=>{if(ae)try{let ke=document.querySelector(ae);if(ke){let He=ke.getBoundingClientRect(),Ne=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:Ne,point:{x:He.left+He.width,y:He.top},text:Ie||"[thread]",linkedSelector:ae,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[Ne],threadId:ge}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[Ne],status:"resolved"}})}}catch(ke){}x&&x(ge)})}catch(ge){}}return Ge.current=!0,()=>{Ge.current=!1}},[]);let So=Nt(e.styleModifications);mn(()=>{let D=So.current,V=e.styleModifications;D!==V&&(Bi(D),Oi(V),So.current=V)},[e.styleModifications]),mn(()=>{let D=ct.current;ct.current=e.isAnnotating,D&&!e.isAnnotating&&ne&&Te(!1)},[e.isAnnotating,ne]);let Fn=Nt(ne);Fn.current=ne,mn(()=>{let D=ee=>{if(ee.key==="Meta"||ee.key==="Control"){let ge=Date.now();if(ge-Je.current<300){if(ye.current++,ye.current>=2){if(Fn.current)t({type:"SET_ANNOTATING",payload:!1}),Te(!1);else{let ke=localStorage.getItem(fa);t({type:"SET_TOOL",payload:ke||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),Te(!0)}ye.current=0}}else ye.current=1;Je.current=ge}else ye.current=0},V=ee=>{ee.key!=="Meta"&&ee.key!=="Control"&&(ye.current=0)};return window.addEventListener("keydown",D),window.addEventListener("keyup",V),()=>{window.removeEventListener("keydown",D),window.removeEventListener("keyup",V)}},[t]);let rn=Xn(D=>{vt(),t({type:"SET_TOOL",payload:D}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),Re.current=!1,Ce(null),it.current&&(clearTimeout(it.current),it.current=null),Me.current&&(clearTimeout(Me.current),Me.current=null)},[t,e.isAnnotating,vt]),Tn=Xn(async()=>{window.focus(),await n()},[n]),W=Xn(async()=>{o&&await o()},[o]),fe=Xn(()=>{t({type:"SET_ANNOTATING",payload:!1}),Te(!1)},[t]),Le=Xn(()=>{Bi(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(D=>D.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(ua),localStorage.removeItem(pa),localStorage.removeItem(ga),sn(null),l==null||l()},[t,e.styleModifications,l]),[Gt,St]=Sr(()=>{if(dt.current){let D=dt.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(D!=null&&D[1])return parseFloat(D[1])}return 29}),yn=Nt(null),bn=Nt(null),Ut=Nt(!1),Pn=Xn(D=>{let V=D.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return V&&V[1]?parseFloat(V[1]):null},[]);mn(()=>{Ut.current=!0;let D=`oklch(0.628 0.258 ${Gt})`;t({type:"SET_COLOR",payload:D}),requestAnimationFrame(()=>{Ut.current=!1})},[Gt,t]),mn(()=>{if(Ut.current)return;let D=Pn(e.activeColor);D!==null&&Math.abs(D-Gt)>.5&&St(D)},[e.activeColor,Pn,Gt]);let vn=Nt(null);mn(()=>{if(r&&s){let D=Pn(s);D!==null&&Math.abs(D-Gt)>.5&&(vn.current===null&&(vn.current=Gt),St(D))}else vn.current!==null&&(St(vn.current),vn.current=null)},[r,s,Pn]);let Io=e.annotations.length>0;mn(()=>{let D=bn.current;if(!D||!Io)return;let V=ee=>{ee.preventDefault(),ee.stopPropagation();let ge=ee.deltaY>0?-1:1,ae=((Gt+ge)%360+360)%360,Ie=`oklch(0.628 0.258 ${ae})`;St(ae),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:Ie}})};return D.addEventListener("wheel",V,{passive:!1}),()=>D.removeEventListener("wheel",V)},[Io,e.selectedAnnotationIds,e.lastSelectedId,Gt,t]);let yt=Nt(!1),Ro=Nt(0);mn(()=>{let D=e.annotations.some(ge=>!ge.status||ge.status==="pending"),V=yt.current;yt.current=D;let ee=Ro.current===0&&e.annotations.length>0;if(Ro.current=e.annotations.length,(V&&!D||ee&&!D)&&e.annotations.length>0){let ge=e.annotations.map(ae=>Pn(ae.color)).filter(ae=>ae!==null);if(ge.length>0){let ae=0,Ie=-1;for(let ke=0;ke<360;ke++){let He=Math.min(...ge.map(Ne=>{let Mt=Math.abs(ke-Ne);return Math.min(Mt,360-Mt)}));He>Ie&&(Ie=He,ae=ke)}St(ae)}}},[e.annotations,Pn]);let io=Nt(!1),jo=Xn(()=>{io.current=!1,yn.current=setTimeout(()=>{io.current=!0,St(29)},500)},[]),qn=Xn(()=>{yn.current&&(clearTimeout(yn.current),yn.current=null)},[]);mn(()=>()=>{yn.current&&clearTimeout(yn.current),hn.current&&clearTimeout(hn.current)},[]);let Mn=Ar(),Lo=xr(()=>e.annotations.filter(D=>!D.pathname||D.pathname===Mn),[e.annotations,Mn]),Zn=xr(()=>Ni(e.annotations),[e.annotations]),Kt=xr(()=>{let D=[],V=new Set,ee=[...e.annotations].sort((ge,ae)=>ge.timestamp-ae.timestamp);for(let ge of ee)if(!Zn.has(ge))if(ge.groupId){if(!V.has(ge.groupId)){V.add(ge.groupId);let ae=e.annotations.filter(He=>He.groupId===ge.groupId&&!Zn.has(He)),Ie=ae.find(He=>He.type!=="text")||ae[0],ke=Math.min(...ae.map(He=>He.timestamp));D.push({id:Ie.id,pathname:ge.pathname,annotations:ae,timestamp:ke})}}else D.push({id:ge.id,pathname:ge.pathname,annotations:[ge],timestamp:ge.timestamp});return D},[e.annotations,Zn]),Bt=xr(()=>Kt.filter(D=>!D.pathname||D.pathname===Mn),[Kt,Mn]),[Xt,sn]=Sr(null),$n=Kt.length+e.styleModifications.length;mn(()=>{($n===0||Xt!==null&&Xt>=$n)&&sn(null)},[$n,Xt]),mn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){sn(null);return}if(e.selectedAnnotationIds.length>0){let D=e.selectedAnnotationIds[0],V=Kt.findIndex(ee=>ee.id===D||ee.annotations.some(ge=>ge.id===D));V>=0&&V!==Xt&&sn(V)}},[e.selectedAnnotationIds,e.inspectedElement,Kt]);let wo=Xn(()=>{var V;if($n===0)return;let D;if(Xt===null?D=0:Xt+1>=$n?D=null:D=Xt+1,sn(D),D===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(D<Kt.length){let ee=Kt[D];if(!(!ee.pathname||ee.pathname===Mn)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:ee.id,pathname:ee.pathname})),window.location.href=ee.pathname;return}t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:ee.id}});let ae=ee.annotations.find(Ve=>Ve.type!=="text")||ee.annotations[0];if(ee.annotations.some(Ve=>Ve.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(ae!=null&&ae.type&&ae.type!=="text"&&ae.type!=="inspector"){t({type:"SET_TOOL",payload:ae.type});let Ve=wr.findIndex(Yn=>Yn.type===ae.type);Ve>=0&&pt(Ve)}if(ae!=null&&ae.color){t({type:"SET_COLOR",payload:ae.color});let Ve=Pn(ae.color);Ve!==null&&St(Ve)}let ke=ee.annotations.flatMap(Ve=>Ve.points);if(ke.length===0)return;let He=Math.min(...ke.map(Ve=>Ve.x)),Ne=Math.max(...ke.map(Ve=>Ve.x)),Mt=Math.min(...ke.map(Ve=>Ve.y)),qt=Math.max(...ke.map(Ve=>Ve.y)),xn=(He+Ne)/2,It=(Mt+qt)/2;if(window.scrollTo({left:xn-window.innerWidth/2,top:It-window.innerHeight/2,behavior:"smooth"}),w&&x){let Ve=(V=ee.annotations.find(Yn=>Yn.threadId))==null?void 0:V.threadId;Ve&&x(Ve)}}else{let ee=D-Kt.length,ge=e.styleModifications[ee];if(!ge)return;let ae=Hn(ge.selector);if(!ae)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:ae,info:ge.element}});let Ie=ae.getBoundingClientRect(),ke=Ie.left+Ie.width/2+window.scrollX,He=Ie.top+Ie.height/2+window.scrollY;window.scrollTo({left:ke-window.innerWidth/2,top:He-window.innerHeight/2,behavior:"smooth"})}},[Kt,Mn,e.styleModifications,$n,Xt,t,Pn,w,x]);mn(()=>{if(!ne)return;let D=V=>{var Ie;let ee=document.activeElement;for(;(Ie=ee==null?void 0:ee.shadowRoot)!=null&&Ie.activeElement;)ee=ee.shadowRoot.activeElement;if((ee==null?void 0:ee.tagName)==="INPUT"||(ee==null?void 0:ee.tagName)==="TEXTAREA"||ee!=null&&ee.isContentEditable)return;if((V.metaKey||V.ctrlKey)&&V.key==="Enter"){o&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(ke=>!ke.captured).length>0)&&(V.preventDefault(),W());return}if((V.metaKey||V.ctrlKey)&&(V.key==="c"||V.key==="C"||V.code==="KeyC")){let ke=window.getSelection();if(ke&&ke.toString().length>0)return;(e.annotations.length>0||e.styleModifications.length>0)&&(V.preventDefault(),window.focus(),Tn());return}if((V.metaKey||V.ctrlKey)&&(V.key==="Backspace"||V.key==="Delete")){V.preventDefault(),Le();return}if(V.metaKey||V.ctrlKey||V.altKey)return;let ge={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand",e:"eval"};if(V.key.toLowerCase()==="m"){V.preventDefault(),rn("model");return}let ae=ge[V.key.toLowerCase()];if(ae){V.preventDefault();let ke=wr.findIndex(He=>He.type===ae);ke>=0&&pt(ke),rn(ae)}};return window.addEventListener("keydown",D),()=>window.removeEventListener("keydown",D)},[ne,rn,Tn,W,o,Le,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,se]);let In=ll(rt,Jt.w,Jt.h),Ao=y(f(f({},Dg),In),{borderRadius:0,padding:ne?"0 8px":"0",width:ne?"auto":48,height:48,gap:0,justifyContent:ne?"flex-start":"center"}),an=ve("div",{style:zi({color:r&&s?s:"rgb(0,0,0)",animated:!!r})}),Go=H===!1?"rgba(239, 68, 68, 0.4)":r&&s?s:oo.iconActive,Po=!!(O&&L&&O!==L),so=Y==="restarting"||!Z&&!N,Er=Y==="error"?"#dc2626":Y==="ok"?oo.iconDefault:Po?"#b45309":oo.iconDefault,ao=Y==="restarting"?"Restarting":Y==="error"?"Restart failed":Y==="ok"?"Restarted":Po?"Update bridge":null,Qo=re!=null?re:Po?`Bridge ${L} is older than package ${O}. Restart bridge.`:L?`Bridge ${L}. Restart bridge.`:"Restart bridge",Yo=Nt(null);mn(()=>{if(!ne)return;let D=Yo.current;if(!D)return;let V=()=>{i==null||i(!0),Vt("collapse")},ee=()=>{i==null||i(!1),Qe()};return D.addEventListener("mouseenter",V),D.addEventListener("mouseleave",ee),()=>{D.removeEventListener("mouseenter",V),D.removeEventListener("mouseleave",ee)}},[ne,r,i,Vt,Qe]);let On=Nt(null);return mn(()=>{if(ne)return;let D=On.current;if(!D)return;let V=D.querySelector("[data-popmelt-logo]"),ee=()=>{D.style.opacity="1",!r&&V&&(V.style.fill="#000"),he==null||he()},ge=()=>{D.style.opacity=r?"1":"0.5",!r&&V&&(V.style.fill="none")};return D.addEventListener("mouseenter",ee),D.addEventListener("mouseleave",ge),()=>{D.removeEventListener("mouseenter",ee),D.removeEventListener("mouseleave",ge)}},[ne,r,he]),ne?At(li,{children:[ve("style",{children:`
|
|
15
|
+
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},lg={zIndex:9999,display:"flex",alignItems:"center",backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",cursor:"pointer",overflow:"visible",boxSizing:"content-box",transition:"none"},qs="devtools-toolbar-expanded",Zs="devtools-annotations",Qs="devtools-style-modifications",ea="devtools-active-tool",vc="devtools-active-color",xc="devtools-stroke-width",Sc="devtools-inspected-element",ta="devtools-spacing-changes",cg={expanded:qs,annotations:Zs,styleMods:Qs,spacingChanges:ta,tool:ea,color:vc,stroke:xc,inspected:Sc};function wc({state:e,dispatch:t,onScreenshot:n,onSendToClaude:o,hasActiveJobs:r,activeJobColor:i,onCrosshairHover:a,onClear:s,provider:l="claude",onProviderChange:d,availableProviders:c,modelIndex:u=0,modelCount:p=2,modelLabel:f="Opus 4.6",onModelChange:v,onViewThread:b,isThreadPanelOpen:I,mcpStatus:D,bridgeUrl:A,isBridgeConnected:F,packageVersion:_,bridgeVersion:R,bridgeRestartState:Y="idle",bridgeRestartMessage:ee,onBridgeRestart:k,modelSelectedComponent:w,modelCanvasHoveredComponent:L,onModelComponentHover:h,onSpacingTokenHover:C,onModifySpacingToken:M,onDeleteSpacingToken:ae,modelRefreshKey:Fe,evalRefreshKey:me,onModelComponentAdded:G,onModelComponentRemoved:se,onSynthesizeRules:P,isSynthesizing:fe,onSynthesizeEvals:ge,isSynthesizingEvals:Le,onRunEval:Pe,onViewEvalRunThread:Qe,runningEvalIds:ce,onMouseEnter:Ce,toolbarRef:ze,snapPosition:rt="bottom-right",onSnapPositionChange:ut}){let[$e,X]=cr(()=>typeof window<"u"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});ln(()=>{let H=()=>X({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",H),()=>window.removeEventListener("resize",H)},[]);let[Q,we]=cr(()=>typeof window>"u"?!1:localStorage.getItem(qs)==="true"),[je,st]=cr(0),Ee=At(0),et=At(0),Ke=At(e.isAnnotating),tt=At(!1),pt=At(typeof window<"u"?localStorage.getItem(ea):null),mt=At(typeof window<"u"?localStorage.getItem(vc):null),te=At(typeof window<"u"?localStorage.getItem(xc):null),[ne,de]=cr(null),We=At(!1),qe=At(null),Re=At(null),Ht=At(null),[$t,Cn]=cr([]),Dn=At({x:0,y:0}),Wt=At(null),Ct=At(null),cn=At(null),ft=jn(()=>{Wt.current=null,Ct.current=null,cn.current&&(clearTimeout(cn.current),cn.current=null)},[]),qt=jn(H=>{Re.current&&(clearTimeout(Re.current),Re.current=null),We.current?(Wt.current=H,Ct.current={...Dn.current},cn.current&&clearTimeout(cn.current),cn.current=setTimeout(()=>{Wt.current&&(de(Wt.current),ft())},300)):(qe.current&&clearTimeout(qe.current),qe.current=setTimeout(()=>{We.current=!0,de(H),qe.current=null},500))},[ft]),Ze=jn(()=>{ft(),qe.current&&(clearTimeout(qe.current),qe.current=null),Re.current=setTimeout(()=>{We.current=!1,de(null)},150)},[ft]);ln(()=>{let H=Ht.current;if(!H)return;let z=()=>{ft(),Re.current&&(clearTimeout(Re.current),Re.current=null)},q=()=>{Re.current=setTimeout(()=>{We.current=!1,de(null)},150)};return H.addEventListener("mouseenter",z),H.addEventListener("mouseleave",q),()=>{H.removeEventListener("mouseenter",z),H.removeEventListener("mouseleave",q)}},[ne,ft]),ln(()=>{if(ne!=="counter"||!A)return;let H=!1;return ko(`${A}/threads/recent?limit=5`).then(z=>z.ok?z.json():[]).then(z=>{H||Cn(z)}).catch(()=>{}),()=>{H=!0}},[ne,A]);let nt=jn(H=>{if(Dn.current={x:H.clientX,y:H.clientY},Wt.current&&Ct.current){let z=Ct.current,q=sg(rt);ig(H.clientX,H.clientY,z.x,z.y,q.left,q.y,q.right,q.y)||(de(Wt.current),ft())}},[ft,rt]),lt=lr(()=>{let H=(c??[]).map(z=>z==="claude"?"Claude":z==="codex"?"Codex":z==="copilot"?"Copilot":z);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]),vn=lr(()=>{let H=c&&c.length>0?c:["claude","codex","copilot"],z=H.indexOf(l);return H[(z>=0?z+1:0)%H.length]??l},[c,l]),uo=lr(()=>og(p,u),[p,u]);Ul(Q,e,tt,!!r,cg),ln(()=>{let H=new URLSearchParams(window.location.search);if(!H.has("popmelt"))return;let z=document.createElement("style");z.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(z);let q=parseInt(H.get("popmelt")||"0",10)||0,oe=()=>{we(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})};if(q>0){let pe=setTimeout(oe,q);return()=>clearTimeout(pe)}oe()},[]),ln(()=>{if(localStorage.getItem(qs)==="true"&&!e.isAnnotating){if(Q||we(!0),t({type:"SET_TOOL",payload:pt.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),mt.current&&t({type:"SET_COLOR",payload:mt.current}),te.current){let he=parseFloat(te.current);isNaN(he)||t({type:"SET_STROKE_WIDTH",payload:he})}let q=localStorage.getItem(Zs);if(q)try{let he=JSON.parse(q);if(Array.isArray(he)&&he.length>0){for(let yt of he)(yt.status==="waiting_input"||yt.status==="in_flight")&&(yt.status=yt.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:he}})}}catch{}let oe=localStorage.getItem(Qs);if(oe)try{let he=JSON.parse(oe);Array.isArray(he)&&he.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:he}),yi(he))}catch{}let pe=localStorage.getItem(ta);if(pe)try{let he=JSON.parse(pe);Array.isArray(he)&&he.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:he})}catch{}let Se=localStorage.getItem(Sc);if(Se)try{let{selector:he,info:yt}=JSON.parse(Se);if(he){let Lt=An(he);if(Lt){let pn=yt||{...Pn(Lt),selector:he};t({type:"SELECT_ELEMENT",payload:{el:Lt,info:pn}})}}}catch{}let ke=sessionStorage.getItem("popmelt-pending-focus");if(ke){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:he}=JSON.parse(ke);if(he){let yt=q?JSON.parse(q)??[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:he}});let Lt=yt.find(pn=>pn.id===he);if(Lt){let Nt=(Lt.groupId?yt.filter(Ve=>Ve.groupId===Lt.groupId):[Lt]).flatMap(Ve=>Ve.points);if(Nt.length>0){let Ve=Math.min(...Nt.map(In=>In.x)),Ft=Math.max(...Nt.map(In=>In.x)),Bn=Math.min(...Nt.map(In=>In.y)),yn=Math.max(...Nt.map(In=>In.y));window.scrollTo({left:(Ve+Ft)/2-window.innerWidth/2,top:(Bn+yn)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch{}}}let z=sessionStorage.getItem("popmelt-pending-thread");if(z){sessionStorage.removeItem("popmelt-pending-thread");try{let{threadId:q,selector:oe,preview:pe}=JSON.parse(z);q&&requestAnimationFrame(()=>{if(oe)try{let Se=document.querySelector(oe);if(Se){let ke=Se.getBoundingClientRect(),he=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:he,point:{x:ke.left+ke.width,y:ke.top},text:pe||"[thread]",linkedSelector:oe,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[he],threadId:q}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[he],status:"resolved"}})}}catch{}b&&b(q)})}catch{}}return tt.current=!0,()=>{tt.current=!1}},[]);let Xn=At(e.styleModifications);ln(()=>{let H=Xn.current,z=e.styleModifications;H!==z&&(bi(H),yi(z),Xn.current=z)},[e.styleModifications]),ln(()=>{let H=Ke.current;Ke.current=e.isAnnotating,H&&!e.isAnnotating&&Q&&we(!1)},[e.isAnnotating,Q]);let Nn=At(Q);Nn.current=Q,ln(()=>{let H=q=>{if(q.key==="Meta"||q.key==="Control"){let oe=Date.now();if(oe-Ee.current<300){if(et.current++,et.current>=2){if(Nn.current)t({type:"SET_ANNOTATING",payload:!1}),we(!1);else{let ke=localStorage.getItem(ea);t({type:"SET_TOOL",payload:ke||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),we(!0)}et.current=0}}else et.current=1;Ee.current=oe}else et.current=0},z=q=>{q.key!=="Meta"&&q.key!=="Control"&&(et.current=0)};return window.addEventListener("keydown",H),window.addEventListener("keyup",z),()=>{window.removeEventListener("keydown",H),window.removeEventListener("keyup",z)}},[t]);let Gt=jn(H=>{ft(),t({type:"SET_TOOL",payload:H}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),We.current=!1,de(null),qe.current&&(clearTimeout(qe.current),qe.current=null),Re.current&&(clearTimeout(Re.current),Re.current=null)},[t,e.isAnnotating,ft]),ht=jn(async()=>{window.focus(),await n()},[n]),O=jn(async()=>{o&&await o()},[o]),ve=jn(()=>{t({type:"SET_ANNOTATING",payload:!1}),we(!1)},[t]),De=jn(()=>{bi(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(H=>H.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(Zs),localStorage.removeItem(Qs),localStorage.removeItem(ta),tn(null),s?.()},[t,e.styleModifications,s]),[Pt,Rt]=cr(()=>{if(mt.current){let H=mt.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(H?.[1])return parseFloat(H[1])}return 29}),hn=At(null),dn=At(null),Jt=At(!1),En=jn(H=>{let z=H.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return z&&z[1]?parseFloat(z[1]):null},[]);ln(()=>{Jt.current=!0;let H=`oklch(0.628 0.258 ${Pt})`;t({type:"SET_COLOR",payload:H}),requestAnimationFrame(()=>{Jt.current=!1})},[Pt,t]),ln(()=>{if(Jt.current)return;let H=En(e.activeColor);H!==null&&Math.abs(H-Pt)>.5&&Rt(H)},[e.activeColor,En,Pt]);let un=At(null);ln(()=>{if(r&&i){let H=En(i);H!==null&&Math.abs(H-Pt)>.5&&(un.current===null&&(un.current=Pt),Rt(H))}else un.current!==null&&(Rt(un.current),un.current=null)},[r,i,En]);let qn=e.annotations.length>0;ln(()=>{let H=dn.current;if(!H||!qn)return;let z=q=>{q.preventDefault(),q.stopPropagation();let oe=q.deltaY>0?-1:1,pe=((Pt+oe)%360+360)%360,Se=`oklch(0.628 0.258 ${pe})`;Rt(pe),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:Se}})};return H.addEventListener("wheel",z,{passive:!1}),()=>H.removeEventListener("wheel",z)},[qn,e.selectedAnnotationIds,e.lastSelectedId,Pt,t]);let _t=At(!1),po=At(0);ln(()=>{let H=e.annotations.some(oe=>!oe.status||oe.status==="pending"),z=_t.current;_t.current=H;let q=po.current===0&&e.annotations.length>0;if(po.current=e.annotations.length,(z&&!H||q&&!H)&&e.annotations.length>0){let oe=e.annotations.map(pe=>En(pe.color)).filter(pe=>pe!==null);if(oe.length>0){let pe=0,Se=-1;for(let ke=0;ke<360;ke++){let he=Math.min(...oe.map(yt=>{let Lt=Math.abs(ke-yt);return Math.min(Lt,360-Lt)}));he>Se&&(Se=he,pe=ke)}Rt(pe)}}},[e.annotations,En]);let Zn=At(!1),vo=jn(()=>{Zn.current=!1,hn.current=setTimeout(()=>{Zn.current=!0,Rt(29)},500)},[]),Qn=jn(()=>{hn.current&&(clearTimeout(hn.current),hn.current=null)},[]);ln(()=>()=>{hn.current&&clearTimeout(hn.current),cn.current&&clearTimeout(cn.current)},[]);let kn=vr(),eo=lr(()=>e.annotations.filter(H=>!H.pathname||H.pathname===kn),[e.annotations,kn]),fo=lr(()=>wi(e.annotations),[e.annotations]),Zt=lr(()=>{let H=[],z=new Set,q=[...e.annotations].sort((oe,pe)=>oe.timestamp-pe.timestamp);for(let oe of q)if(!fo.has(oe))if(oe.groupId){if(!z.has(oe.groupId)){z.add(oe.groupId);let pe=e.annotations.filter(he=>he.groupId===oe.groupId&&!fo.has(he)),Se=pe.find(he=>he.type!=="text")||pe[0],ke=Math.min(...pe.map(he=>he.timestamp));H.push({id:Se.id,pathname:oe.pathname,annotations:pe,timestamp:ke})}}else H.push({id:oe.id,pathname:oe.pathname,annotations:[oe],timestamp:oe.timestamp});return H},[e.annotations,fo]),Mt=lr(()=>Zt.filter(H=>!H.pathname||H.pathname===kn),[Zt,kn]),[Yt,tn]=cr(null),On=Zt.length+e.styleModifications.length;ln(()=>{(On===0||Yt!==null&&Yt>=On)&&tn(null)},[On,Yt]),ln(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){tn(null);return}if(e.selectedAnnotationIds.length>0){let H=e.selectedAnnotationIds[0],z=Zt.findIndex(q=>q.id===H||q.annotations.some(oe=>oe.id===H));z>=0&&z!==Yt&&tn(z)}},[e.selectedAnnotationIds,e.inspectedElement,Zt]);let Gn=jn(()=>{if(On===0)return;let H;if(Yt===null?H=0:Yt+1>=On?H=null:H=Yt+1,tn(H),H===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(H<Zt.length){let z=Zt[H];if(!(!z.pathname||z.pathname===kn)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:z.id,pathname:z.pathname})),window.location.href=z.pathname;return}t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:z.id}});let oe=z.annotations.find(Ve=>Ve.type!=="text")||z.annotations[0];if(z.annotations.some(Ve=>Ve.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(oe?.type&&oe.type!=="text"&&oe.type!=="inspector"){t({type:"SET_TOOL",payload:oe.type});let Ve=dr.findIndex(Ft=>Ft.type===oe.type);Ve>=0&&st(Ve)}if(oe?.color){t({type:"SET_COLOR",payload:oe.color});let Ve=En(oe.color);Ve!==null&&Rt(Ve)}let Se=z.annotations.flatMap(Ve=>Ve.points);if(Se.length===0)return;let ke=Math.min(...Se.map(Ve=>Ve.x)),he=Math.max(...Se.map(Ve=>Ve.x)),yt=Math.min(...Se.map(Ve=>Ve.y)),Lt=Math.max(...Se.map(Ve=>Ve.y)),pn=(ke+he)/2,Nt=(yt+Lt)/2;if(window.scrollTo({left:pn-window.innerWidth/2,top:Nt-window.innerHeight/2,behavior:"smooth"}),I&&b){let Ve=z.annotations.find(Ft=>Ft.threadId)?.threadId;Ve&&b(Ve)}}else{let z=H-Zt.length,q=e.styleModifications[z];if(!q)return;let oe=An(q.selector);if(!oe)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:oe,info:q.element}});let pe=oe.getBoundingClientRect(),Se=pe.left+pe.width/2+window.scrollX,ke=pe.top+pe.height/2+window.scrollY;window.scrollTo({left:Se-window.innerWidth/2,top:ke-window.innerHeight/2,behavior:"smooth"})}},[Zt,kn,e.styleModifications,On,Yt,t,En,I,b]);ln(()=>{if(!Q)return;let H=z=>{let q=document.activeElement;for(;q?.shadowRoot?.activeElement;)q=q.shadowRoot.activeElement;if(q?.tagName==="INPUT"||q?.tagName==="TEXTAREA"||q?.isContentEditable)return;if((z.metaKey||z.ctrlKey)&&z.key==="Enter"){o&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(Se=>!Se.captured).length>0)&&(z.preventDefault(),O());return}if((z.metaKey||z.ctrlKey)&&(z.key==="c"||z.key==="C"||z.code==="KeyC")){let Se=window.getSelection();if(Se&&Se.toString().length>0)return;(e.annotations.length>0||e.styleModifications.length>0)&&(z.preventDefault(),window.focus(),ht());return}if((z.metaKey||z.ctrlKey)&&(z.key==="Backspace"||z.key==="Delete")){z.preventDefault(),De();return}if(z.metaKey||z.ctrlKey||z.altKey)return;let oe={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand",e:"eval"};if(z.key.toLowerCase()==="m"){z.preventDefault(),Gt("model");return}let pe=oe[z.key.toLowerCase()];if(pe){z.preventDefault();let Se=dr.findIndex(ke=>ke.type===pe);Se>=0&&st(Se),Gt(pe)}};return window.addEventListener("keydown",H),()=>window.removeEventListener("keydown",H)},[Q,Gt,ht,O,o,De,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,ne]);let Tn=Ba(rt,$e.w,$e.h),Oo={...lg,...Tn,borderRadius:0,padding:Q?"0 8px":"0",width:Q?"auto":48,height:48,gap:0,justifyContent:Q?"flex-start":"center"},Vt=ue("div",{style:Ci({color:r&&i?i:"rgb(0,0,0)",animated:!!r})}),pr=F===!1?"rgba(239, 68, 68, 0.4)":r&&i?i:Un.iconActive,xo=!!(_&&R&&_!==R),to=Y==="restarting"||!k&&!A,So=Y==="error"?"#dc2626":Y==="ok"?Un.iconDefault:xo?"#b45309":Un.iconDefault,fr=Y==="restarting"?"Restarting":Y==="error"?"Restart failed":Y==="ok"?"Restarted":xo?"Update bridge":null,wo=ee??(xo?`Bridge ${R} is older than package ${_}. Restart bridge.`:R?`Bridge ${R}. Restart bridge.`:"Restart bridge"),Mn=At(null);ln(()=>{if(!Q)return;let H=Mn.current;if(!H)return;let z=()=>{a?.(!0),qt("collapse")},q=()=>{a?.(!1),Ze()};return H.addEventListener("mouseenter",z),H.addEventListener("mouseleave",q),()=>{H.removeEventListener("mouseenter",z),H.removeEventListener("mouseleave",q)}},[Q,r,a,qt,Ze]);let Bo=At(null);return ln(()=>{if(Q)return;let H=Bo.current;if(!H)return;let z=H.querySelector("[data-popmelt-logo]"),q=()=>{H.style.opacity="1",!r&&z&&(z.style.fill="#000"),Ce?.()},oe=()=>{H.style.opacity=r?"1":"0.5",!r&&z&&(z.style.fill="none")};return H.addEventListener("mouseenter",q),H.addEventListener("mouseleave",oe),()=>{H.removeEventListener("mouseenter",q),H.removeEventListener("mouseleave",oe)}},[Q,r,Ce]),Q?kt(Xr,{children:[ue("style",{children:`
|
|
16
16
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
17
17
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
18
|
-
`}),
|
|
18
|
+
`}),ue("div",{id:"devtools-scrim",style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.06)",zIndex:9997,pointerEvents:"none"}}),!I&&(ne==="eval"||e.activeTool==="eval")&&ue(Ql,{bridgeUrl:A,refreshKey:me,snapPosition:rt,onSynthesize:ge,isSynthesizing:Le,onRunEval:Pe,onViewRunThread:Qe,runningEvalIds:ce,onMouseEnter:()=>{ft(),Re.current&&(clearTimeout(Re.current),Re.current=null)},onMouseLeave:e.activeTool==="eval"?void 0:Ze}),!I&&(ne==="model"||e.activeTool==="model")&&ue(mc,{bridgeUrl:A,selectedComponent:w,hoveredComponent:L,onComponentHover:h,onSpacingTokenHover:C,onModifySpacingToken:M,onDeleteSpacingToken:ae,modelRefreshKey:Fe,onComponentAdded:G,onComponentRemoved:se,onSynthesizeRules:P,isSynthesizing:fe,snapPosition:rt,onMouseEnter:()=>{ft(),Re.current&&(clearTimeout(Re.current),Re.current=null)},onMouseLeave:e.activeTool==="model"?void 0:Ze}),ne&&ne!=="model"&&ne!=="eval"&&(ne==="provider"||bc[ne])&&(()=>{let H=ne==="provider"?lt:bc[ne];return kt("div",{ref:Ht,style:{...Ha(rt,$e.w,$e.h),width:300,backgroundColor:"#eaeaea",...zo,boxSizing:"content-box",zIndex:10001,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:12,color:"#1f2937",padding:12,...ne!=="collapse"&&ne!=="counter"?{pointerEvents:"none"}:{}},children:[ne==="collapse"&&ue("div",{style:{marginBottom:10,width:"fit-content",color:Un.iconDefault},children:ue("svg",{width:"48",height:"48",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:ue("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"})})}),kt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[ue("span",{children:H.name}),H.keys[0]&&ue("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:H.keys[0].key})]}),ue("div",{style:{color:"#6b7280",lineHeight:1.5,marginBottom:ne==="collapse"?0:10},children:H.desc.split(`
|
|
19
19
|
|
|
20
|
-
`).map((V,ee)=>ve("p",{style:{margin:0,marginTop:ee>0?8:0},children:V},ee))}),D.usage.map((V,ee)=>At("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[ve("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),ve("span",{children:V})]},ee)),se==="collapse"&&ht&&At("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8},children:[ve("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:6,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Position"}),ve("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:3,width:"fit-content"},children:pl.map(V=>{let ee=V===rt;return ve("button",{type:"button",onClick:()=>{Ce(null),Re.current=!1,vt(),ht(V)},title:V,style:{width:24,height:16,border:"none",cursor:"pointer",padding:0,backgroundColor:ee?"#1f2937":"rgba(0,0,0,0.08)",transition:"background-color 100ms ease"},onMouseEnter:ge=>{ee||(ge.currentTarget.style.backgroundColor="rgba(0,0,0,0.15)")},onMouseLeave:ge=>{ee||(ge.currentTarget.style.backgroundColor="rgba(0,0,0,0.08)")}},V)})})]}),se==="collapse"&&(()=>{let V=Object.entries(I!=null?I:{}),ee=V.filter(([,ke])=>ke.found&&!ke.disabled).map(([ke])=>ke.charAt(0).toUpperCase()+ke.slice(1)),ge=V.filter(([,ke])=>!ke.found).map(([ke])=>ke);if(!N&&!Z&&ee.length===0&&ge.length===0)return null;let ae=ge.map(ke=>ke.charAt(0).toUpperCase()+ke.slice(1)),Ie=[...ee,...ae];return At("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[(Z||N)&&ve("button",{type:"button",onClick:()=>{so||(Z?Z():Na(N))},disabled:so,title:Qo,"aria-label":ao!=null?ao:"Restart bridge",style:{display:"flex",alignItems:"center",justifyContent:"center",width:22,height:22,border:"none",borderRadius:0,backgroundColor:Po||Y!=="idle"?"rgba(0,0,0,0.07)":"rgba(0,0,0,0.04)",color:Er,cursor:so?"default":"pointer",padding:0,opacity:so?.55:1,flexShrink:0},children:Y==="ok"?ve(bg,{size:14,strokeWidth:1.8}):ve(kg,{size:13,strokeWidth:1.7,style:{animation:Y==="restarting"?"spin 0.8s linear infinite":void 0}})}),ee.length>0?At("span",{style:{color:"#6b7280"},children:["Available in ",Ie.join(", ")]}):ge.length>0?At("span",{style:{color:"#6b7280"},children:["Available in ",ae.join(", ")]}):null]})})(),D.keys.length>1&&ve("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((V,ee)=>At("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:V.accent?"#fff":"#6b7280"},children:[ve("code",{style:{fontSize:10,backgroundColor:V.accent?e.activeColor:"rgba(0,0,0,0.06)",color:V.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:V.key}),ve("span",{style:{color:V.accent?e.activeColor:void 0,fontWeight:V.accent?600:void 0},children:V.desc})]},ee))}),se==="counter"&&Kt.length>0&&(()=>{let V=ve("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:ve("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Active"})}),ee=new Map;for(let Ie of Kt){let ke=Ie.pathname||Mn;ee.has(ke)||ee.set(ke,[]),ee.get(ke).push(Ie)}let ge=[...ee.entries()],ae=ge.length>1;return At("div",{children:[V,ve("div",{style:{maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:ge.map(([Ie,ke])=>ve("div",{style:{marginBottom:ae?4:0},children:ke.map(He=>{var Yn,Oo,Bo,En;let Ne=He.annotations.find(Qn=>Qn.type==="text"&&Qn.text),Mt=(Ne==null?void 0:Ne.text)||`[${(Oo=(Yn=He.annotations[0])==null?void 0:Yn.type)!=null?Oo:"annotation"}]`,qt=e.selectedAnnotationIds.includes(He.id),xn=Kt.indexOf(He),It=xn+1,Ve=(En=(Bo=He.annotations[0])==null?void 0:Bo.color)!=null?En:e.activeColor;return At("div",{onClick:()=>{var Bn;if(!(!He.pathname||He.pathname===Mn)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:He.id,pathname:He.pathname})),window.location.href=He.pathname;return}if(sn(xn),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:He.id}}),x){let er=(Bn=He.annotations.find(kr=>kr.threadId))==null?void 0:Bn.threadId;er&&x(er)}Re.current=!1,Ce(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:Qn=>{let Bn=Qn.currentTarget.querySelector("[data-route-badge]");Bn&&(Bn.style.backgroundColor=Ve,Bn.style.color="#fff")},onMouseLeave:Qn=>{if(qt)return;let Bn=Qn.currentTarget.querySelector("[data-route-badge]");Bn&&(Bn.style.backgroundColor="rgba(0,0,0,0.06)",Bn.style.color="#6b7280")},children:[At("code",{"data-route-badge":!0,style:{fontSize:10,color:qt?"#fff":"#6b7280",backgroundColor:qt?Ve:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[It,". ",ae?Ie:""]}),ve("span",{style:{fontSize:11,color:qt?"#1f2937":"#6b7280",fontWeight:qt?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Mt})]},He.id)})},Ie))})]})})(),se==="counter"&&(()=>{let V=new Set(Kt.flatMap(ae=>ae.annotations.map(Ie=>Ie.threadId).filter(Boolean))),ee=en.filter(ae=>!V.has(ae.id));if(ee.length===0)return null;let ge=ae=>{let Ie=Math.floor((Date.now()-ae)/1e3);if(Ie<60)return"now";let ke=Math.floor(Ie/60);if(ke<60)return`${ke}m`;let He=Math.floor(ke/60);return He<24?`${He}h`:`${Math.floor(He/24)}d`};return At("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:[ve("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Recent"}),ee.map(ae=>At("div",{onClick:()=>{let Ie=ae.elementIdentifiers[0];if(Ie){let ke=Ie.indexOf(":"),He=ke>0&&Ie[0]==="/",Ne=He?Ie.slice(0,ke):void 0,Mt=He?Ie.slice(ke+1):Ie;if(!(!Ne||Ne===Mn)){sessionStorage.setItem("popmelt-pending-thread",JSON.stringify({threadId:ae.id,selector:Mt,preview:ae.preview})),window.location.href=Ne;return}try{let xn=document.querySelector(Mt);if(xn){let It=xn.getBoundingClientRect(),Ve=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:Ve,point:{x:It.left+It.width,y:It.top},text:ae.preview,linkedSelector:Mt,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[Ve],threadId:ae.id}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[Ve],status:"resolved"}})}}catch(xn){}}x&&x(ae.id),Re.current=!1,Ce(null)},style:{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:8,padding:"2px 0",cursor:"pointer",color:"#6b7280",fontSize:11},onMouseEnter:Ie=>{Ie.currentTarget.style.color="#1f2937"},onMouseLeave:Ie=>{Ie.currentTarget.style.color="#6b7280"},children:[ve("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:ae.preview}),ve("span",{style:{flexShrink:0,fontSize:10,color:"#9ca3af"},children:ge(ae.createdAt)})]},ae.id))]})})()]})})(),At("div",{ref:D=>{Fe&&(Fe.current=D)},id:"devtools-toolbar",style:Ao,onMouseEnter:he,onMouseMove:xo,children:[an,At("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[ve("span",{onMouseEnter:()=>Vt("inspector"),onMouseLeave:Qe,children:ve(Wo,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>rn("inspector"),children:ve(Cg,{size:20,strokeWidth:1.5})})}),ve("span",{onMouseEnter:()=>Vt("hand"),onMouseLeave:Qe,children:ve(Wo,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>rn("hand"),children:At("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[ve(wg,{size:20,strokeWidth:1.5}),e.styleModifications.filter(D=>!D.captured).length>0&&ve("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=wr[$e],V=D.icon,ee=e.isAnnotating&&Ag.has(e.activeTool);return ve("span",{onMouseEnter:()=>Vt(D.type),onMouseLeave:Qe,children:At("div",{style:{display:"flex",alignItems:"center",gap:0},children:[ve(Wo,{active:ee,siblingActive:e.isAnnotating,onClick:()=>rn(D.type),children:ve(V,{size:20,strokeWidth:1.5})}),ve("button",{type:"button",onClick:()=>{let ge=($e+1)%wr.length;pt(ge),rn(wr[ge].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&&!ee?.5:1,transition:"opacity 150ms ease"},children:wr.map((ge,ae)=>ve("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:ae===$e?oo.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},ae))})]})})})(),Bg.map(({type:D,icon:V,label:ee,shortcut:ge})=>ve("span",{onMouseEnter:()=>Vt(D),onMouseLeave:Qe,children:ve(Wo,{active:e.isAnnotating&&e.activeTool===D,siblingActive:e.isAnnotating,onClick:()=>rn(D),children:ve(V,{size:20,strokeWidth:1.5})})},D)),ve("span",{onMouseEnter:()=>Vt("eval"),onMouseLeave:Qe,children:ve(Wo,{active:e.isAnnotating&&e.activeTool==="eval",siblingActive:e.isAnnotating,onClick:()=>rn("eval"),children:ve(Sg,{size:18,strokeWidth:1.5})})}),ve("span",{onMouseEnter:()=>Vt("model"),onMouseLeave:Qe,children:ve(Wo,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>rn("model"),children:ve(xg,{size:17,strokeWidth:1.5})})})]}),ve(jc,{}),At("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(Kt.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(D=>!D.captured).length>0)&&(()=>{var ae;let D=Xt!==null&&Xt<Kt.length?Kt[Xt]:null,V=e.annotations.length>0&&e.annotations.every(Ie=>Ie.status&&Ie.status!=="pending"),ee=Xt!==null?(ae=D==null?void 0:D.annotations.some(Ie=>Ie.status&&Ie.status!=="pending"))!=null?ae:!1:V,ge=`oklch(0.628 0.258 ${Gt})`;return ve("span",{onMouseEnter:()=>Vt("counter"),onMouseLeave:Qe,children:ve("button",{ref:bn,type:"button",onClick:()=>{if(io.current){io.current=!1;return}wo()},onMouseDown:jo,onMouseUp:qn,onMouseLeave:qn,title:"",style:{display:"flex",alignItems:"center",justifyContent:"center",gap:4,minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:ee&&Xt===null?"#999999":ge,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let Ie=Kt.length+e.styleModifications.length+e.spacingTokenChanges.filter(He=>!He.captured).length;if(Xt!==null)return At(li,{children:[Xt+1,At("span",{style:{opacity:.4,display:"flex",gap:4},children:[ve("span",{children:"/"}),ve("span",{children:Ie})]})]});let ke=Bt.length+e.styleModifications.length+e.spacingTokenChanges.filter(He=>!He.captured).length;return Ie>ke?At(li,{children:[ke,At("span",{style:{opacity:.4,display:"flex",gap:4},children:[ve("span",{children:"/"}),ve("span",{children:Ie})]})]}):Ie})()})})})(),(e.annotations.length>0||e.styleModifications.length>0)&&ve("span",{onMouseEnter:()=>Vt("clear"),onMouseLeave:Qe,children:ve(Wo,{siblingActive:e.isAnnotating,onClick:Le,title:"Clear all (\u2318\u232B)",children:ve(Ig,{size:17,strokeWidth:1.5})})}),d&&At(li,{children:[ve("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),ve("span",{onMouseEnter:()=>Vt("provider"),onMouseLeave:Qe,style:{display:"contents"},children:At("div",{style:{display:"flex",alignItems:"center",gap:0},children:[ve(Wo,{onClick:()=>d(Tt),children:ve(ai,{provider:a})}),At("button",{type:"button",onClick:()=>{let D=(u+1)%p;v==null||v(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:oo.iconDefault,whiteSpace:"nowrap"},children:[ve("span",{children:g}),ve("span",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:2},children:Gn.map(D=>ve("div",{style:{width:D.overflow?2:3,height:D.overflow?2:3,borderRadius:"50%",backgroundColor:D.active?oo.iconDefault:"rgba(0,0,0,0.2)",opacity:D.overflow?.65:1,transition:"background-color 150ms ease, opacity 150ms ease"}},D.key))})]})]})})]}),ve("div",{ref:Yo,style:{display:"inline-flex",cursor:"pointer"},children:ve("button",{type:"button",onClick:fe,title:"Collapse (\u2318\u2318)",style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,border:"none",background:"none",padding:0,cursor:"inherit"},children:ve("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:Go,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:ve("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"})})})})]})]})]}):At(li,{children:[ve("style",{children:`
|
|
20
|
+
`).map((z,q)=>ue("p",{style:{margin:0,marginTop:q>0?8:0},children:z},q))}),H.usage.map((z,q)=>kt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[ue("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),ue("span",{children:z})]},q)),ne==="collapse"&&ut&&kt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8},children:[ue("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:6,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Position"}),ue("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:3,width:"fit-content"},children:Fa.map(z=>{let q=z===rt;return ue("button",{type:"button",onClick:()=>{de(null),We.current=!1,ft(),ut(z)},title:z,style:{width:24,height:16,border:"none",cursor:"pointer",padding:0,backgroundColor:q?"#1f2937":"rgba(0,0,0,0.08)",transition:"background-color 100ms ease"},onMouseEnter:oe=>{q||(oe.currentTarget.style.backgroundColor="rgba(0,0,0,0.15)")},onMouseLeave:oe=>{q||(oe.currentTarget.style.backgroundColor="rgba(0,0,0,0.08)")}},z)})})]}),ne==="collapse"&&(()=>{let z=Object.entries(D??{}),q=z.filter(([,ke])=>ke.found&&!ke.disabled).map(([ke])=>ke.charAt(0).toUpperCase()+ke.slice(1)),oe=z.filter(([,ke])=>!ke.found).map(([ke])=>ke);if(!A&&!k&&q.length===0&&oe.length===0)return null;let pe=oe.map(ke=>ke.charAt(0).toUpperCase()+ke.slice(1)),Se=[...q,...pe];return kt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[(k||A)&&ue("button",{type:"button",onClick:()=>{to||(k?k():Sa(A))},disabled:to,title:wo,"aria-label":fr??"Restart bridge",style:{display:"flex",alignItems:"center",justifyContent:"center",width:22,height:22,border:"none",borderRadius:0,backgroundColor:xo||Y!=="idle"?"rgba(0,0,0,0.07)":"rgba(0,0,0,0.04)",color:So,cursor:to?"default":"pointer",padding:0,opacity:to?.55:1,flexShrink:0},children:Y==="ok"?ue(Jf,{size:14,strokeWidth:1.8}):ue(Zf,{size:13,strokeWidth:1.7,style:{animation:Y==="restarting"?"spin 0.8s linear infinite":void 0}})}),q.length>0?kt("span",{style:{color:"#6b7280"},children:["Available in ",Se.join(", ")]}):oe.length>0?kt("span",{style:{color:"#6b7280"},children:["Available in ",pe.join(", ")]}):null]})})(),H.keys.length>1&&ue("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((z,q)=>kt("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:z.accent?"#fff":"#6b7280"},children:[ue("code",{style:{fontSize:10,backgroundColor:z.accent?e.activeColor:"rgba(0,0,0,0.06)",color:z.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:z.key}),ue("span",{style:{color:z.accent?e.activeColor:void 0,fontWeight:z.accent?600:void 0},children:z.desc})]},q))}),ne==="counter"&&Zt.length>0&&(()=>{let z=ue("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:ue("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Active"})}),q=new Map;for(let Se of Zt){let ke=Se.pathname||kn;q.has(ke)||q.set(ke,[]),q.get(ke).push(Se)}let oe=[...q.entries()],pe=oe.length>1;return kt("div",{children:[z,ue("div",{style:{maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:oe.map(([Se,ke])=>ue("div",{style:{marginBottom:pe?4:0},children:ke.map(he=>{let Lt=he.annotations.find(Bn=>Bn.type==="text"&&Bn.text)?.text||`[${he.annotations[0]?.type??"annotation"}]`,pn=e.selectedAnnotationIds.includes(he.id),Nt=Zt.indexOf(he),Ve=Nt+1,Ft=he.annotations[0]?.color??e.activeColor;return kt("div",{onClick:()=>{if(!(!he.pathname||he.pathname===kn)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:he.id,pathname:he.pathname})),window.location.href=he.pathname;return}if(tn(Nt),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:he.id}}),b){let yn=he.annotations.find(In=>In.threadId)?.threadId;yn&&b(yn)}We.current=!1,de(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:Bn=>{let yn=Bn.currentTarget.querySelector("[data-route-badge]");yn&&(yn.style.backgroundColor=Ft,yn.style.color="#fff")},onMouseLeave:Bn=>{if(pn)return;let yn=Bn.currentTarget.querySelector("[data-route-badge]");yn&&(yn.style.backgroundColor="rgba(0,0,0,0.06)",yn.style.color="#6b7280")},children:[kt("code",{"data-route-badge":!0,style:{fontSize:10,color:pn?"#fff":"#6b7280",backgroundColor:pn?Ft:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[Ve,". ",pe?Se:""]}),ue("span",{style:{fontSize:11,color:pn?"#1f2937":"#6b7280",fontWeight:pn?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Lt})]},he.id)})},Se))})]})})(),ne==="counter"&&(()=>{let z=new Set(Zt.flatMap(pe=>pe.annotations.map(Se=>Se.threadId).filter(Boolean))),q=$t.filter(pe=>!z.has(pe.id));if(q.length===0)return null;let oe=pe=>{let Se=Math.floor((Date.now()-pe)/1e3);if(Se<60)return"now";let ke=Math.floor(Se/60);if(ke<60)return`${ke}m`;let he=Math.floor(ke/60);return he<24?`${he}h`:`${Math.floor(he/24)}d`};return kt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:[ue("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Recent"}),q.map(pe=>kt("div",{onClick:()=>{let Se=pe.elementIdentifiers[0];if(Se){let ke=Se.indexOf(":"),he=ke>0&&Se[0]==="/",yt=he?Se.slice(0,ke):void 0,Lt=he?Se.slice(ke+1):Se;if(!(!yt||yt===kn)){sessionStorage.setItem("popmelt-pending-thread",JSON.stringify({threadId:pe.id,selector:Lt,preview:pe.preview})),window.location.href=yt;return}try{let Nt=document.querySelector(Lt);if(Nt){let Ve=Nt.getBoundingClientRect(),Ft=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:Ft,point:{x:Ve.left+Ve.width,y:Ve.top},text:pe.preview,linkedSelector:Lt,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[Ft],threadId:pe.id}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[Ft],status:"resolved"}})}}catch{}}b&&b(pe.id),We.current=!1,de(null)},style:{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:8,padding:"2px 0",cursor:"pointer",color:"#6b7280",fontSize:11},onMouseEnter:Se=>{Se.currentTarget.style.color="#1f2937"},onMouseLeave:Se=>{Se.currentTarget.style.color="#6b7280"},children:[ue("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:pe.preview}),ue("span",{style:{flexShrink:0,fontSize:10,color:"#9ca3af"},children:oe(pe.createdAt)})]},pe.id))]})})()]})})(),kt("div",{ref:H=>{ze&&(ze.current=H)},id:"devtools-toolbar",style:Oo,onMouseEnter:Ce,onMouseMove:nt,children:[Vt,kt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[ue("span",{onMouseEnter:()=>qt("inspector"),onMouseLeave:Ze,children:ue(Do,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>Gt("inspector"),children:ue(Xf,{size:20,strokeWidth:1.5})})}),ue("span",{onMouseEnter:()=>qt("hand"),onMouseLeave:Ze,children:ue(Do,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>Gt("hand"),children:kt("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[ue(Kf,{size:20,strokeWidth:1.5}),e.styleModifications.filter(H=>!H.captured).length>0&&ue("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=dr[je],z=H.icon,q=e.isAnnotating&&rg.has(e.activeTool);return ue("span",{onMouseEnter:()=>qt(H.type),onMouseLeave:Ze,children:kt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[ue(Do,{active:q,siblingActive:e.isAnnotating,onClick:()=>Gt(H.type),children:ue(z,{size:20,strokeWidth:1.5})}),ue("button",{type:"button",onClick:()=>{let oe=(je+1)%dr.length;st(oe),Gt(dr[oe].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&&!q?.5:1,transition:"opacity 150ms ease"},children:dr.map((oe,pe)=>ue("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:pe===je?Un.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},pe))})]})})})(),ag.map(({type:H,icon:z,label:q,shortcut:oe})=>ue("span",{onMouseEnter:()=>qt(H),onMouseLeave:Ze,children:ue(Do,{active:e.isAnnotating&&e.activeTool===H,siblingActive:e.isAnnotating,onClick:()=>Gt(H),children:ue(z,{size:20,strokeWidth:1.5})})},H)),ue("span",{onMouseEnter:()=>qt("eval"),onMouseLeave:Ze,children:ue(Do,{active:e.isAnnotating&&e.activeTool==="eval",siblingActive:e.isAnnotating,onClick:()=>Gt("eval"),children:ue(Uf,{size:18,strokeWidth:1.5})})}),ue("span",{onMouseEnter:()=>qt("model"),onMouseLeave:Ze,children:ue(Do,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>Gt("model"),children:ue(Vf,{size:17,strokeWidth:1.5})})})]}),ue(hc,{}),kt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(Zt.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(H=>!H.captured).length>0)&&(()=>{let H=Yt!==null&&Yt<Zt.length?Zt[Yt]:null,z=e.annotations.length>0&&e.annotations.every(pe=>pe.status&&pe.status!=="pending"),q=Yt!==null?H?.annotations.some(pe=>pe.status&&pe.status!=="pending")??!1:z,oe=`oklch(0.628 0.258 ${Pt})`;return ue("span",{onMouseEnter:()=>qt("counter"),onMouseLeave:Ze,children:ue("button",{ref:dn,type:"button",onClick:()=>{if(Zn.current){Zn.current=!1;return}Gn()},onMouseDown:vo,onMouseUp:Qn,onMouseLeave:Qn,title:"",style:{display:"flex",alignItems:"center",justifyContent:"center",gap:4,minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:q&&Yt===null?"#999999":oe,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let pe=Zt.length+e.styleModifications.length+e.spacingTokenChanges.filter(ke=>!ke.captured).length;if(Yt!==null)return kt(Xr,{children:[Yt+1,kt("span",{style:{opacity:.4,display:"flex",gap:4},children:[ue("span",{children:"/"}),ue("span",{children:pe})]})]});let Se=Mt.length+e.styleModifications.length+e.spacingTokenChanges.filter(ke=>!ke.captured).length;return pe>Se?kt(Xr,{children:[Se,kt("span",{style:{opacity:.4,display:"flex",gap:4},children:[ue("span",{children:"/"}),ue("span",{children:pe})]})]}):pe})()})})})(),(e.annotations.length>0||e.styleModifications.length>0)&&ue("span",{onMouseEnter:()=>qt("clear"),onMouseLeave:Ze,children:ue(Do,{siblingActive:e.isAnnotating,onClick:De,title:"Clear all (\u2318\u232B)",children:ue(tg,{size:17,strokeWidth:1.5})})}),d&&kt(Xr,{children:[ue("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),ue("span",{onMouseEnter:()=>qt("provider"),onMouseLeave:Ze,style:{display:"contents"},children:kt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[ue(Do,{onClick:()=>d(vn),children:ue(Kr,{provider:l})}),kt("button",{type:"button",onClick:()=>{let H=(u+1)%p;v?.(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:Un.iconDefault,whiteSpace:"nowrap"},children:[ue("span",{children:f}),ue("span",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:2},children:uo.map(H=>ue("div",{style:{width:H.overflow?2:3,height:H.overflow?2:3,borderRadius:"50%",backgroundColor:H.active?Un.iconDefault:"rgba(0,0,0,0.2)",opacity:H.overflow?.65:1,transition:"background-color 150ms ease, opacity 150ms ease"}},H.key))})]})]})})]}),ue("div",{ref:Mn,style:{display:"inline-flex",cursor:"pointer"},children:ue("button",{type:"button",onClick:ve,title:"Collapse (\u2318\u2318)",style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,border:"none",background:"none",padding:0,cursor:"inherit"},children:ue("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:pr,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:ue("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"})})})})]})]})]}):kt(Xr,{children:[ue("style",{children:`
|
|
21
21
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
22
|
-
`}),
|
|
23
|
-
`)[0].trim();return
|
|
22
|
+
`}),kt("div",{ref:H=>{Bo.current=H,ze&&(ze.current=H)},id:"devtools-toolbar",style:{...Oo,overflow:"visible",opacity:r?1:.5},children:[Vt,ue("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,border:"none",background:"none",cursor:"pointer",padding:0},onClick:()=>{we(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})},onMouseEnter:()=>a?.(!0),onMouseLeave:()=>a?.(!1),title:"Open annotation toolbar (\u2318\u2318)",children:ue("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:"none",stroke:pr,strokeWidth:"1",strokeLinejoin:"round",xmlns:"http://www.w3.org/2000/svg",children:ue("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 dg,useEffect as ao,useRef as qr,useState as $i}from"react";import{Fragment as kc,jsx as It,jsxs as Br}from"react/jsx-runtime";function Cc(e){return e.status==="done"||e.status==="error"}var ug=24,pg=6,fg=ug-pg,gg=8,Ec={display:"flex",alignItems:"center",gap:3,padding:0,backgroundColor:"#eaeaea",...zo,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,whiteSpace:"nowrap",transition:"transform 200ms ease, opacity 200ms ease"};function mg(e){let t=e.filter(s=>s.type==="tool_use");if(t.length===0)return"Starting\u2026";let n=t[t.length-1],o=String(n.data.tool||""),r=n.data.file?String(n.data.file):null,i=r?r.split("/").pop()??r:null,a=n.data.content?String(n.data.content):null;switch(o){case"Read":return i?`Reading ${i}`:"Reading file";case"Edit":return i?`Editing ${i}`:"Editing file";case"Write":return i?`Writing ${i}`:"Writing file";case"Bash":{if(!a)return"Running command";let s=a.split(`
|
|
23
|
+
`)[0].trim();return s.length<=40?s:s.slice(0,37)+"\u2026"}case"Glob":return"Searching files";case"Grep":return"Searching code";default:return o?`Using ${o}`:"Working\u2026"}}function hg(e){let t=e.replace(/^Error:\s*/i,"");return t.length>40?t.slice(0,37)+"...":t}function yg(e,t){if(e.some(i=>i.type==="question"&&i.data.jobId===t))return"Has a question";let o=new Set(["Edit","Write"]);return e.some(i=>i.type==="tool_use"&&i.data.jobId===t&&o.has(String(i.data.tool||"")))?"Applied changes":"Replied"}function bg({color:e}){let[t,n]=$i(0);return ao(()=>{let o=setInterval(()=>{n(r=>(r+1)%2)},250);return()=>clearInterval(o)},[]),It("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?Br(kc,{children:[It("circle",{cx:"7",cy:"7",r:"2"}),It("circle",{cx:"17",cy:"7",r:"2"}),It("circle",{cx:"7",cy:"17",r:"2"}),It("circle",{cx:"17",cy:"17",r:"2"})]}):Br(kc,{children:[It("circle",{cx:"12",cy:"6",r:"2"}),It("circle",{cx:"6",cy:"12",r:"2"}),It("circle",{cx:"18",cy:"12",r:"2"}),It("circle",{cx:"12",cy:"18",r:"2"})]})})}function vg({color:e}){return It("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:e,opacity:.6}})}function xg({color:e}){return It("span",{style:{color:e,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function Sg(){return It("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function wg({onCancel:e}){let t=qr(null);return ao(()=>{let n=t.current;if(!n)return;let o=a=>{a.stopPropagation(),e()},r=()=>{n.style.opacity="0.5"},i=()=>{n.style.opacity="0.7"};return n.addEventListener("click",o),n.addEventListener("mouseenter",r),n.addEventListener("mouseleave",i),()=>{n.removeEventListener("click",o),n.removeEventListener("mouseenter",r),n.removeEventListener("mouseleave",i)}},[e]),It("button",{ref:t,style:{background:"none",border:"none",cursor:"pointer",color:"#ffffff",opacity:.7,fontSize:14,padding:"0 2px",lineHeight:1},title:"Cancel",children:"\xD7"})}function Cg({onDismiss:e}){let t=qr(null);return ao(()=>{let n=t.current;if(!n)return;let o=a=>{a.stopPropagation(),e()},r=()=>{n.style.opacity="0.5"},i=()=>{n.style.opacity="0.7"};return n.addEventListener("click",o),n.addEventListener("mouseenter",r),n.addEventListener("mouseleave",i),()=>{n.removeEventListener("click",o),n.removeEventListener("mouseenter",r),n.removeEventListener("mouseleave",i)}},[e]),It("button",{ref:t,style:{background:"none",border:"none",cursor:"pointer",color:"#ffffff",opacity:.7,fontSize:14,padding:"0 2px",lineHeight:1},title:"Dismiss",children:"\xD7"})}function Tc({bridge:e,inFlightJobs:t,isVisible:n,onHover:o,clearSignal:r,onViewThread:i,onClickJob:a,onCancel:s,onHoverJob:l,isConnected:d,dismissedThreadIds:c,snapPosition:u="bottom-right"}){let[p,f]=$i([]),[v,b]=$i(!1),[I,D]=$i(()=>typeof window<"u"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});ao(()=>{let G=()=>D({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",G),()=>window.removeEventListener("resize",G)},[]);let A=_a(u,I.w,I.h);ao(()=>{r>0&&f([])},[r]),ao(()=>{!c||c.size===0||f(G=>{let se=G.filter(P=>!P.threadId||!c.has(P.threadId)||!Cc(P));return se.length===G.length?G:se})},[c]),ao(()=>{f(G=>{let se=new Set(G.map(ce=>ce.jobId)),P=!1,fe=G.map(ce=>{let Ce=t[ce.jobId];return Ce&&(!ce.threadId||ce.color==="#888")?(P=!0,{...ce,threadId:ce.threadId||Ce.threadId,color:ce.color==="#888"?Ce.color:ce.color}):ce});for(let[ce,Ce]of Object.entries(t))se.has(ce)||(fe.push({jobId:ce,color:Ce.color,status:"queued",threadId:Ce.threadId}),P=!0);let ge=new Set(Object.keys(t)),Le=new Set(e.activeJobIds),Pe=fe.filter(ce=>ce.status!=="queued"?!0:ge.has(ce.jobId)||Le.has(ce.jobId));Pe.length!==fe.length&&(P=!0);let Qe=new Set(Pe.map(ce=>ce.jobId));for(let ce of e.activeJobIds)if(!Qe.has(ce)){let Ce=e.events.find(ze=>ze.type==="job_started"&&ze.data.jobId===ce);Pe.push({jobId:ce,color:"#888",status:"working",threadId:Ce?.data?.threadId}),P=!0}return P?Pe:G})},[t,e.activeJobIds]),ao(()=>{if(e.activeJobIds.length===0)return;let G=new Set(e.activeJobIds);f(se=>se.map(P=>G.has(P.jobId)&&P.status!=="done"&&P.status!=="error"?{...P,status:"working"}:P))},[e.activeJobIds]);let F=qr(null);ao(()=>{let G=e.lastCompletedJobId;if(!G||G===F.current)return;F.current=G;let se=e.events.find(Qe=>Qe.type==="error"&&(Qe.data.jobId===G||e.status==="error")),P=!!se,fe=P?void 0:yg(e.events,G),ge=se?String(se.data.message||""):void 0,Le=se?!!se.data.cancelled:void 0,Pe=se?.data.threadId;f(Qe=>{let ce=Qe.map(ze=>ze.jobId===G?{...ze,status:P?"error":"done",doneLabel:fe,errorMessage:ge,cancelled:Le,threadId:ze.threadId||Pe}:ze);if(!c||c.size===0)return ce;let Ce=ce.filter(ze=>!ze.threadId||!c.has(ze.threadId)||!Cc(ze));return Ce.length===ce.length?ce:Ce})},[e.lastCompletedJobId,e.events,e.status,c]);let _=n&&(p.length>0||d===!1),R=qr(null);ao(()=>{if(!_)return;let G=R.current;if(!G)return;let se=()=>{b(!0),o(!0)},P=()=>{b(!1),o(!1),l?.(null)};return G.addEventListener("mouseenter",se),G.addEventListener("mouseleave",P),()=>{G.removeEventListener("mouseenter",se),G.removeEventListener("mouseleave",P)}},[_,o,l]);let Y=qr(new Map),ee=dg((G,se)=>{se?Y.current.set(G,se):Y.current.delete(G)},[]);if(ao(()=>{if(!_)return;let G=[];for(let se of p){let P=Y.current.get(se.jobId);if(P){if(a){let fe=se.jobId,ge=()=>a(fe);P.addEventListener("click",ge),G.push(()=>P.removeEventListener("click",ge))}if(l){let fe=se.jobId,ge=()=>l(fe),Le=()=>l(null);P.addEventListener("mouseenter",ge),P.addEventListener("mouseleave",Le),G.push(()=>{P.removeEventListener("mouseenter",ge),P.removeEventListener("mouseleave",Le)})}}}return()=>G.forEach(se=>se())},[_,p,a,l]),!_)return null;let k={working:3,queued:2,error:1,done:0},w=[],L=new Map;for(let G of p){if(!G.threadId){w.push(G);continue}let se=L.get(G.threadId);(!se||k[G.status]>k[se.status]||k[G.status]===k[se.status])&&L.set(G.threadId,G)}for(let G of L.values())w.push(G);let h=w.filter(G=>G.status==="queued"),C=new Map;h.forEach((G,se)=>{C.set(G.jobId,`(${se+1}/${h.length})`)});let M=!v&&w.length>1,ae=Xo(u),Fe=qo(u),me=ae?w:[...w].reverse();return Br("div",{ref:R,style:A,"data-devtools":!0,children:[It("style",{children:"@keyframes popmelt-badge-march { to { background-position: 0 -5px; } }"}),me.map((G,se)=>{let P=se===w.length-1,fe=w.length-1-se,ge=G.status==="working"?mg(e.events.filter(Le=>Le.data.jobId===G.jobId)):G.status==="queued"?`Queued ${C.get(G.jobId)??""}`:G.status==="done"?G.doneLabel||"Done":G.cancelled?"Cancelled":G.errorMessage?hg(G.errorMessage):"Error";return It("div",{style:{position:"relative",zIndex:w.length-se,marginBottom:M?P?0:-fg:P?0:gg,transform:M?`scale(${Math.max(.94,1-fe*.02)})`:"scale(1)",opacity:1,transformOrigin:`${ae?"top":"bottom"} ${Fe?"right":"left"}`,transition:"margin-bottom 250ms ease, transform 250ms ease, opacity 250ms ease"},children:Br("div",{ref:Le=>ee(G.jobId,Le),style:{...Ec,position:"relative",overflow:"visible",cursor:a?"pointer":void 0,...G.status==="working"&&{borderImage:"none",borderColor:"transparent"}},title:G.errorMessage||void 0,children:[G.status==="working"&&(()=>{let Le=`<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='${G.color}' stroke-width='.75'/></svg>`;return It("div",{style:{position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(Le)}")`,backgroundSize:"5px 5px",WebkitMask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",WebkitMaskComposite:"xor",mask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",maskComposite:"exclude",pointerEvents:"none",animation:"popmelt-badge-march 0.8s linear infinite"}})})(),Br("div",{style:{display:"flex",alignItems:"center",gap:3,padding:"3px 5px 3px 8px",margin:3,backgroundColor:G.status==="error"?"#ef4444":G.color,color:"#ffffff"},children:[G.status==="working"&&It(bg,{color:"#ffffff"}),G.status==="queued"&&It(vg,{color:"#ffffff"}),G.status==="done"&&It(xg,{color:"#ffffff"}),G.status==="error"&&It(Sg,{}),It("span",{style:{opacity:G.status==="queued"?.6:1,maxWidth:160,overflow:"hidden",textOverflow:"ellipsis"},children:ge}),G.status==="working"&&s&&It(wg,{onCancel:()=>s(G.jobId)}),(G.status==="done"||G.status==="error")&&It(Cg,{onDismiss:()=>f(Le=>Le.filter(Pe=>G.threadId?Pe.threadId!==G.threadId:Pe.jobId!==G.jobId))})]})]})},G.jobId)}),d===!1&&p.length>0&&It("div",{style:Ec,children:Br("div",{style:{display:"flex",alignItems:"center",gap:3,padding:"3px 5px 3px 8px",margin:3,backgroundColor:"#f59e0b",color:"#ffffff"},children:[It("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ffffff",opacity:.6}}),It("span",{children:"Reconnecting\u2026"})]})})]})}import{Fragment as Tg,jsx as kg,jsxs as Mg}from"react/jsx-runtime";var Eg=`
|
|
24
24
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
25
25
|
:host {
|
|
26
26
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
@@ -49,9 +49,9 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
49
49
|
color: initial;
|
|
50
50
|
-webkit-font-smoothing: auto;
|
|
51
51
|
}
|
|
52
|
-
`;function
|
|
53
|
-
`),n=[],o=0;for(;o<t.length;){let
|
|
54
|
-
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(
|
|
52
|
+
`;function Mc({children:e}){return Mg(Tg,{children:[kg("style",{children:Eg}),e]})}import{useEffect as Ig,useLayoutEffect as Rg,useRef as Lg,useState as Ic}from"react";import{createPortal as Ag}from"react-dom";import{Fragment as Bg,jsx as Og,jsxs as Hg}from"react/jsx-runtime";function Pg(e){return e.tagName==="STYLE"||e.tagName==="LINK"&&e.rel==="stylesheet"}function Dg(e){let t=new Map,n=e.firstChild;function o(a){if(t.has(a)||a.hasAttribute("data-pm-mirror"))return;let s=a.cloneNode(!0);s.setAttribute("data-pm-mirror",""),e.insertBefore(s,n),t.set(a,s)}function r(a){let s=t.get(a);s&&(s.remove(),t.delete(a))}for(let a of document.querySelectorAll('link[rel="stylesheet"], style'))a.getRootNode()===document&&o(a);try{document.adoptedStyleSheets.length>0&&(e.adoptedStyleSheets=[...document.adoptedStyleSheets,...e.adoptedStyleSheets])}catch{}let i=new MutationObserver(a=>{for(let s of a)if(s.type==="childList"){for(let l of s.addedNodes)l instanceof Element&&Pg(l)&&o(l);for(let l of s.removedNodes)l instanceof Element&&r(l)}});return i.observe(document.head,{childList:!0}),document.body&&i.observe(document.body,{childList:!0}),()=>{i.disconnect();for(let a of t.values())a.remove();t.clear()}}function Rc({children:e}){let t=Lg(null),[n,o]=Ic(null),[r,i]=Ic(null);return Rg(()=>{let a=t.current;if(!a||a.shadowRoot)return;let s=a.attachShadow({mode:"open"}),l=document.createElement("div");l.setAttribute("data-popmelt-root",""),s.appendChild(l),o(s),i(l)},[]),Ig(()=>{if(n)return Dg(n)},[n]),Hg(Bg,{children:[Og("div",{ref:t,"data-popmelt-shadow-host":!0,style:{position:"absolute",width:0,height:0,overflow:"visible",zIndex:1e4}}),r&&Ag(e,r)]})}import{memo as jg,useCallback as Hr,useEffect as bo,useMemo as Lc,useRef as lo,useState as Kn}from"react";import{jsx as He,jsxs as ur}from"react/jsx-runtime";var oa="ui-monospace, SFMono-Regular, Menlo, monospace",_g=0;function Ng({size:e=11}){let t=++_g,n=`pm-vs-m${t}`,o=`pm-vs-f0-${t}`,r=`pm-vs-f1-${t}`,i=`pm-vs-g${t}`;return ur("svg",{width:e,height:e,viewBox:"0 0 100 100",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{display:"inline",verticalAlign:"middle",marginLeft:3,flexShrink:0},children:[He("mask",{id:n,maskType:"alpha",maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"100",height:"100",children:He("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z",fill:"white"})}),ur("g",{mask:`url(#${n})`,children:[He("path",{d:"M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z",fill:"#0065A9"}),He("g",{filter:`url(#${o})`,children:He("path",{d:"M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z",fill:"#007ACC"})}),He("g",{filter:`url(#${r})`,children:He("path",{d:"M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z",fill:"#1F9CF0"})}),He("g",{style:{mixBlendMode:"overlay"},opacity:"0.25",children:He("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z",fill:`url(#${i})`})})]}),ur("defs",{children:[ur("filter",{id:o,x:"-8.39411",y:"15.8291",width:"116.727",height:"92.2456",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[He("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),He("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),He("feOffset",{}),He("feGaussianBlur",{stdDeviation:"4.16667"}),He("feColorMatrix",{type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"}),He("feBlend",{mode:"overlay",in2:"BackgroundImageFix",result:"effect1_dropShadow"}),He("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"})]}),ur("filter",{id:r,x:"60.4167",y:"-8.07558",width:"47.9167",height:"116.151",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[He("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),He("feColorMatrix",{in:"SourceAlpha",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),He("feOffset",{}),He("feGaussianBlur",{stdDeviation:"4.16667"}),He("feColorMatrix",{type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"}),He("feBlend",{mode:"overlay",in2:"BackgroundImageFix",result:"effect1_dropShadow"}),He("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"})]}),ur("linearGradient",{id:i,x1:"49.9392",y1:"0.257812",x2:"49.9392",y2:"99.7423",gradientUnits:"userSpaceOnUse",children:[He("stop",{stopColor:"white"}),He("stop",{offset:"1",stopColor:"white",stopOpacity:"0"})]})]})]})}var Fg=/^#[0-9a-fA-F]{3,8}$/,zg=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,$g=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 Wg(e){let t=e.trim();return Fg.test(t)||zg.test(t)||$g.has(t.toLowerCase())}function na(e,t){return He("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 Zr(e){let t=[],n=/(`[^`]+`)|(\*\*\*(.+?)\*\*\*)|(\*\*(.+?)\*\*)|(\*(.+?)\*)|(_([^_]+?)_)|(\[([^\]]+)\]\(([^)]+)\))|(#[0-9a-fA-F]{3,8})(?![0-9a-fA-F])|((?:rgba?|hsla?|oklch)\([^)]+\))/g,o=0,r;for(;(r=n.exec(e))!==null;){if(r.index>o&&t.push(e.slice(o,r.index)),r[1]){let i=r[1].slice(1,-1);Wg(i)&&t.push(na(i,`sw-${r.index}`)),t.push(He("code",{style:{fontFamily:oa,fontSize:"0.9em",backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",borderRadius:2},children:i},r.index))}else if(r[3]!==void 0)t.push(He("strong",{children:He("em",{children:r[3]})},r.index));else if(r[5]!==void 0)t.push(He("strong",{children:r[5]},r.index));else if(r[7]!==void 0)t.push(He("em",{children:r[7]},r.index));else if(r[9]!==void 0)t.push(He("em",{children:r[9]},r.index));else if(r[11]!==void 0&&r[12]!==void 0){let i=r[12],a=!/^https?:\/\/|^mailto:/i.test(i),s=a?`vscode://file/${i}`:i;a?t.push(ur("a",{href:s,target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline",whiteSpace:"nowrap",backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",borderRadius:2,fontFamily:oa,fontSize:"0.9em"},children:[r[11],He(Ng,{})]},r.index)):t.push(He("a",{href:s,target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline"},children:r[11]},r.index))}else r[13]!==void 0?(t.push(na(r[13],`sw-${r.index}`)),t.push(r[13])):r[14]!==void 0&&(t.push(na(r[14],`sw-${r.index}`)),t.push(r[14]));o=r.index+r[0].length}return o<e.length&&t.push(e.slice(o)),t}function yo(e){let t=e.split(`
|
|
53
|
+
`),n=[],o=0;for(;o<t.length;){let r=t[o];if(r.trimStart().startsWith("```")){let l=[];for(o++;o<t.length&&!t[o].trimStart().startsWith("```");)l.push(t[o]),o++;o++,n.push(He("pre",{style:{fontFamily:oa,fontSize:"0.9em",lineHeight:1.4,backgroundColor:"rgba(0,0,0,0.04)",padding:"6px 8px",margin:"4px 0",overflowX:"auto",whiteSpace:"pre"},children:l.join(`
|
|
54
|
+
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(r)){n.push(He("hr",{style:{border:"none",borderTop:"1px solid rgba(0,0,0,0.1)",margin:"6px 0"}},n.length)),o++;continue}let i=r.match(/^(#{1,4})\s+(.+)/);if(i){let l=i[1].length,d={1:16,2:14,3:13,4:12};n.push(He("div",{style:{fontWeight:700,fontSize:d[l]??12,margin:"8px 0 2px"},children:Zr(i[2])},n.length)),o++;continue}if(r.trimStart().startsWith("|")&&r.trimEnd().endsWith("|")){let l=[];for(;o<t.length&&t[o].trimStart().startsWith("|")&&t[o].trimEnd().endsWith("|");)l.push(t[o]),o++;let d=I=>/^\|[\s\-:|]+\|$/.test(I),c=l.filter(I=>!d(I)),u=I=>I.split("|").slice(1,-1).map(D=>D.trim()),p=I=>/^\*\*.+\*\*$/.test(I)||/^__.+__$/.test(I),f=c.map(u),v=f.length>1&&f.slice(1).every(I=>I[0]&&p(I[0])),b=f.length>0&&f[0].every(I=>p(I));n.push(He("div",{style:{overflowX:"auto",margin:"4px 0",paddingBottom:4},children:He("table",{style:{borderCollapse:"separate",borderSpacing:0,fontSize:"0.95em",width:"max-content",minWidth:"100%"},children:He("tbody",{children:c.map((I,D)=>He("tr",{children:u(I).map((A,F)=>He(D===0?"th":"td",{style:{border:"1px solid rgba(0,0,0,0.1)",padding:"3px 6px",textAlign:"left",fontWeight:D===0?600:400,minWidth:60,whiteSpace:"nowrap",...F===0&&v||D===0&&b?{position:"sticky",...F===0&&v?{left:0}:{},...D===0&&b?{top:0}:{},background:"#fff",zIndex:F===0&&v&&D===0&&b?2:1}:{}},children:Zr(A)},F))},D))})})},n.length));continue}if(r.match(/^(\s*)([-*])\s+(.+)/)){let l=[];for(;o<t.length;){let d=t[o].match(/^\s*[-*]\s+(.+)/);if(d)l.push(d[1]),o++;else if(l.length>0&&t[o].match(/^\s+\S/)&&!t[o].match(/^\s*\d+\.\s/)&&!t[o].match(/^\s*[-*]\s+/))l[l.length-1]+=" "+t[o].trim(),o++;else break}n.push(He("ul",{style:{margin:0,paddingLeft:20,listStyleType:"disc",display:"flex",flexDirection:"column",gap:8},children:l.map((d,c)=>He("li",{children:Zr(d)},c))},n.length));continue}let s=r.match(/^(\s*)(\d+)\.\s+(.+)/);if(s){let l=s[1].length,d=parseInt(s[2],10)||1,c=[],u=null;for(;o<t.length;){let p=t[o],f=p.match(/^(\s*)(\d+)\.\s+(.+)/);if(f&&f[1].length===l)u=[f[3]],c.push(u),o++;else if(u&&p.trim()==="")o++;else if(c.length>0&&t[o].match(/^\s+\S/)&&!t[o].match(/^\s*\d+\.\s/)&&!t[o].match(/^\s*[-*]\s+/))u.push(t[o].trim()),o++;else if(u&&/^(Eval|Checks|Sources|Rationale|Prompt|Assertions?|Reason|Why|Expected|Notes?):/i.test(p.trim()))u.push(p.trim()),o++;else if(u&&u.length>1&&p.trim()&&!p.match(/^(#{1,4})\s+/)&&!p.trimStart().startsWith("|")&&!p.match(/^\s*[-*]\s+/)&&!p.match(/^\s*\d+\.\s+/)&&!/^(\*\*)?[A-Z][A-Za-z /&-]{2,40}(\*\*)?$/.test(p.trim()))u.push(p.trim()),o++;else break}n.push(He("ol",{start:d,style:{margin:0,paddingLeft:20,listStyleType:"decimal",display:"flex",flexDirection:"column",gap:8},children:c.map((p,f)=>He("li",{children:He("div",{style:{display:"flex",flexDirection:"column",gap:6},children:p.map((v,b)=>He("div",{children:Zr(v)},b))})},f))},n.length));continue}if(r.trim()===""){o++;continue}n.push(He("div",{children:Zr(r)},n.length)),o++}return He("div",{style:{display:"flex",flexDirection:"column",gap:8},children:n})}import{Fragment as jo,jsx as Z,jsxs as Ue}from"react/jsx-runtime";var Dc=400,wn=16,Oc=3,Gg=3,Bc=4,Jg=8,Yg="devtools-thread-panel-position",_r=Dc+2*Oc+2*Bc,Vg=_r+2*Gg;function ra(e="right"){return{top:wn,left:e==="left"?wn:window.innerWidth-_r-wn}}function Ac(e,t,n){let o=n?.getBoundingClientRect(),r=2*Oc+2*Bc,i=window.innerHeight-wn-r;return o&&t+Vg>o.left&&(i=o.top-Jg-r),Math.max(200,i-Math.max(0,e))}var Ug={width:Dc,backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",display:"flex",flexDirection:"column",overflow:"visible",padding:4,fontFamily:Kt,fontSize:12,color:"#1f2937",pointerEvents:"auto"},Kg={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 5px 4px 10px",margin:0,fontWeight:600,fontSize:12,overflow:"hidden"},Xg={flex:1,overflowY:"auto",padding:0,scrollbarWidth:"none"},qg=`
|
|
55
55
|
[data-devtools="thread-panel-messages"]:hover {
|
|
56
56
|
scrollbar-width: thin !important;
|
|
57
57
|
}
|
|
@@ -65,11 +65,15 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
65
65
|
background: rgba(0,0,0,0.15);
|
|
66
66
|
border-radius: 3px;
|
|
67
67
|
}
|
|
68
|
-
`,
|
|
69
|
-
`)
|
|
70
|
-
`)
|
|
71
|
-
|
|
72
|
-
`)
|
|
73
|
-
[data
|
|
68
|
+
`,Zg={borderTop:"1px solid rgba(0, 0, 0, 0.12)",display:"flex",alignItems:"center",gap:4,padding:"0 8px 0 10px"};function ji(e){return e.replace(/<resolution>[\s\S]*?<\/resolution>/g,"").replace(/<question>[\s\S]*?<\/question>/g,"").replace(/<plan>[\s\S]*?<\/plan>/g,"").replace(/<review>[\s\S]*?<\/review>/g,"").replace(/<novel>[\s\S]*?<\/novel>/g,"").replace(/<eval_proposals>[\s\S]*?<\/eval_proposals>/g,"").replace(/<eval_run_result>[\s\S]*?<\/eval_run_result>/g,"").replace(/<evals>[\s\S]*?<\/evals>/g,"").trim()}function Qg(e){return e.split(`
|
|
69
|
+
`).filter(t=>!/^\s*[☑☒□]\s*(pass|fail|needs[_ ]review)\b/i.test(t)).join(`
|
|
70
|
+
`).replace(/\n{3,}/g,`
|
|
71
|
+
|
|
72
|
+
`).trim()}function em(e){let t=e.match(/<novel>\s*([\s\S]*?)\s*<\/novel>/);if(!t?.[1])return[];try{let n=JSON.parse(t[1]);return Array.isArray(n)?n.filter(o=>{if(typeof o!="object"||o===null)return!1;let r=o;return typeof r.category=="string"&&typeof r.element=="string"&&typeof r.decision=="string"&&typeof r.reason=="string"}):[]}catch{return[]}}function tm(e){let t=e.match(/<eval_run_result>\s*([\s\S]*?)\s*<\/eval_run_result>/);if(!t?.[1])return null;try{let n=JSON.parse(t[1]);if(!n||typeof n!="object")return null;let o=n,r=o.status,i=r==="pass"||r==="fail"||r==="needs_review"?r:"needs_review",s=(Array.isArray(o.assertionResults)?o.assertionResults:[]).flatMap(l=>{if(!l||typeof l!="object")return[];let d=l,c=typeof d.assertion=="string"?d.assertion.trim():"";if(!c)return[];let u=d.status;return[{assertion:c,status:u==="pass"||u==="fail"||u==="needs_review"?u:"needs_review",summary:typeof d.summary=="string"?d.summary.trim():""}]});return{title:typeof o.title=="string"?o.title.trim():void 0,status:i,summary:typeof o.summary=="string"?o.summary.trim():"",assertionResults:s}}catch{return null}}function nm(e){return e?{title:e.title,status:e.status,summary:e.summary,assertionResults:e.assertionResults.map(t=>({assertion:t.assertion,status:t.status,summary:t.summary}))}:null}function om({result:e}){let t=e.assertionResults;if(t.length===0)return null;let n=e.status==="pass"?"Pass":e.status==="fail"?"Fail":"Needs review",o=e.status==="pass"?"#047857":e.status==="fail"?"#b91c1c":"#6b7280";return Ue("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.35,color:"#374151"},children:[Ue("div",{style:{display:"flex",alignItems:"baseline",gap:6,marginBottom:7},children:[Z("span",{style:{fontWeight:700,color:"#111827"},children:e.title??"Eval result"}),Z("span",{style:{color:o,fontWeight:700,marginLeft:"auto"},children:n})]}),e.summary&&Z("div",{style:{color:"#6b7280",marginBottom:8},children:e.summary}),Z("div",{style:{display:"flex",flexDirection:"column",gap:6},children:t.map((r,i)=>{let a=r.status==="pass"?"\u2611":r.status==="fail"?"\u2612":"\u25A1",s=r.status==="pass"?"Pass":r.status==="fail"?"Fail":"Needs review",l=r.status==="pass"?"#047857":r.status==="fail"?"#b91c1c":"#6b7280",d=r.status==="needs_review"?"inherit":l;return Ue("div",{style:{display:"grid",gridTemplateColumns:"18px minmax(0, 1fr)",columnGap:5,alignItems:"start"},children:[Z("span",{style:{color:l,fontSize:15,lineHeight:1},children:a}),Ue("div",{style:{minWidth:0},children:[Z("div",{style:{color:d},children:r.assertion}),r.status==="needs_review"?Ue("div",{style:{marginTop:1,color:"#6b7280"},children:[Z("span",{style:{color:l,fontWeight:700},children:s}),r.summary?Ue("span",{children:[": ",r.summary]}):null]}):r.summary?Z("div",{style:{marginTop:1,color:"#6b7280"},children:r.summary}):null]})]},`${r.assertion}-${i}`)})})]})}function Pc(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}var ia=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],rm=3e3,im=250;function sm({color:e}){let[t,n]=Kn(0),[o,r]=Kn(()=>Math.floor(Math.random()*ia.length));return bo(()=>{let i=setInterval(()=>n(s=>(s+1)%2),im),a=setInterval(()=>r(s=>(s+1)%ia.length),rm);return()=>{clearInterval(i),clearInterval(a)}},[]),Ue("span",{style:{display:"inline-flex",alignItems:"center",gap:4},children:[Z("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?Ue(jo,{children:[Z("circle",{cx:"7",cy:"7",r:"2"}),Z("circle",{cx:"17",cy:"7",r:"2"}),Z("circle",{cx:"7",cy:"17",r:"2"}),Z("circle",{cx:"17",cy:"17",r:"2"})]}):Ue(jo,{children:[Z("circle",{cx:"12",cy:"6",r:"2"}),Z("circle",{cx:"6",cy:"12",r:"2"}),Z("circle",{cx:"18",cy:"12",r:"2"}),Z("circle",{cx:"12",cy:"18",r:"2"})]})}),Z("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:ia[o]})]})}var Gi=32,Wi={width:Gi,height:Gi,objectFit:"cover",cursor:"pointer",border:"1px solid rgba(0,0,0,0.1)"};function am(e){let t=/^`(\/[^`]*)`$/gm,n=[...e.matchAll(t)];if(n.length===0)return null;let o=[];for(let r=0;r<n.length;r++){let i=n[r],a=i[1],s=i.index+i[0].length,l=r+1<n.length?n[r+1].index:e.length,d=e.slice(s,l).trim();o.push({route:a,text:d})}return o}function lm(e,t){let n=[];if(e.replyImageUrls)for(let o of e.replyImageUrls){let r=o.startsWith("blob:")||o.startsWith("http")?o:`${t}${o}`;n.push({url:r,label:"pasted image"})}return n}function cm(e,t){let n=[];if(e.imageUrls)for(let[,o]of Object.entries(e.imageUrls))for(let r of o)n.push({url:`${t}${r}`,label:"pasted image"});return n}function dm({src:e,onClose:t}){return bo(()=>{let n=o=>{o.key==="Escape"&&(o.stopPropagation(),t())};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[t]),Z("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:Z("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 um(e){let t=String(e.data.tool||""),n=e.data.file?String(e.data.file):null,o=n?n.split("/").pop()??n:null,r=e.data.content?String(e.data.content):null;switch(t){case"Read":return o?`Reading ${o}`:"Reading file";case"Edit":return o?`Editing ${o}`:"Editing file";case"Write":return o?`Writing ${o}`:"Writing file";case"Bash":return r?pm(r):"Running command";case"Glob":return"Searching files";case"Grep":return"Searching code";case"WebFetch":return"Fetching page";case"WebSearch":return"Searching web";default:return t?`Using ${t}`:null}}function pm(e){let t=e.split(`
|
|
73
|
+
`)[0].trim();return t.length<=60?t:t.slice(0,57)+"\u2026"}var fm=new Set(["Read","Glob","Grep","WebFetch","WebSearch"]),gm=new Set(["Edit","Write","Bash"]);function mm(e){let t=0,n=!1;for(let o of e){if(o.type!=="tool_use")continue;let r=String(o.data.tool||"");gm.has(r)?n=!0:fm.has(r)&&t++}return!n&&t>=3?"researching":n?"applying changes":null}function hm(e){let t=[];for(let n of e)if(n.type==="tool_use"){let o=um(n),r=String(n.data.tool||""),i=n.data.file?String(n.data.file):null,a=n.data.content?String(n.data.content):null,s=i??a??void 0;if(o){let l=t[t.length-1];l&&l.kind==="tool_group"&&l.tool===r?l.items.push({label:o,detail:s}):t.push({kind:"tool_group",tool:r,items:[{label:o,detail:s}]})}if(a&&i){let l=i.includes(".")?`.${i.split(".").pop().toLowerCase()}`:"",d=i.includes(".claude/plans/");t.push({kind:"file_content",file:i,content:a,ext:l,isPlan:d})}}else if(n.type==="delta"){let o=String(n.data.text||"");if(!o)continue;let r=t[t.length-1];r&&r.kind==="text"?r.text+=o:t.push({kind:"text",text:o})}else if(n.type==="thinking"){let o=String(n.data.text||"");if(!o)continue;let r=t[t.length-1];r&&r.kind==="thinking"?r.text+=o:t.push({kind:"thinking",text:o})}return t}function ym({file:e,content:t,ext:n,isPlan:o,onAccept:r}){let[i,a]=Kn(o),s=e.split("/").pop()??e;return Ue("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:[Ue("div",{onClick:()=>a(d=>!d),style:{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",cursor:"pointer",userSelect:"none",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",color:"#374151"},children:[Z("span",{style:{fontSize:9,color:"#9ca3af"},children:i?"\u25BC":"\u25B6"}),Z("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:s}),o&&Z("span",{style:{fontSize:9,color:"#6366f1",fontFamily:"inherit"},children:"plan"})]}),i&&Ue(jo,{children:[Z("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"?yo(t):Z("pre",{style:{margin:0,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,whiteSpace:"pre-wrap"},children:t})}),o&&r&&Z("div",{style:{padding:"4px 8px",borderTop:"1px solid rgba(0,0,0,0.06)",display:"flex",justifyContent:"flex-end"},children:Z("button",{onClick:d=>{d.stopPropagation(),r()},style:{background:"#111",color:"#fff",border:"none",padding:"4px 12px",fontSize:11,cursor:"pointer",fontFamily:"inherit"},children:"Accept"})})]})]})}function bm(e){let t=[];for(let n of e){let o=t[t.length-1];o&&o.val===n?o.count++:t.push({val:n,count:1})}return t.map(n=>n.count>1?`${n.val} (x${n.count})`:n.val)}function vm(e,t){switch(e){case"Bash":{let n=t.map(o=>(o.label||"").split(/\s/)[0]).filter(Boolean);return`Used Bash: ${bm(n).join(", ")}`}case"Read":return`Read: ${t.map(n=>n.label.replace(/^Reading /,"")).join(", ")}`;case"Edit":return`Edited: ${t.map(n=>n.label.replace(/^Editing /,"")).join(", ")}`;case"Write":return`Wrote: ${t.map(n=>n.label.replace(/^Writing /,"")).join(", ")}`;case"Grep":return t.length===1?"Searched code":`Searched code (${t.length})`;case"Glob":return t.length===1?"Searched files":`Searched files (${t.length})`;default:return`Used ${e}: ${t.map(n=>n.label).join(", ")}`}}var xm={fontSize:11,color:"#9ca3af",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",lineHeight:1.6};function Sm({label:e}){let t=e.indexOf(" ");return t===-1?Z(jo,{children:e}):Ue(jo,{children:[Z("b",{children:e.slice(0,t)}),e.slice(t)]})}function Hc({tool:e,items:t}){let[n,o]=Kn(!1),r=t.length>1;return Ue("div",{style:xm,children:[Ue("div",{onClick:r?()=>o(i=>!i):void 0,style:{cursor:r?"pointer":"default",userSelect:"none",color:"#9ca3af"},children:[r&&Z("span",{style:{fontSize:13,marginRight:4},children:n?"\u25BE":"\u25B8"}),vm(e,t)]}),n&&Z("div",{style:{marginLeft:17},children:t.map((i,a)=>Z("div",{children:Z(Sm,{label:i.detail??i.label})},a))})]})}var wm=jg(function({msg:t,index:n,bridgeUrl:o,accentColor:r,onLightbox:i}){let a=t.role==="human";if(t.cancelled||t.error)return Ue("div",{"data-msg":!0,style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:[Ue("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Z("span",{style:{fontSize:11,color:t.error?"#dc2626":"#9ca3af",fontStyle:"italic"},children:t.error?"Error":"Cancelled"}),Z("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Pc(t.timestamp)})]}),t.error&&Z("div",{style:{fontSize:12,color:"#6b7280",lineHeight:1.4},children:t.error})]},`${t.jobId}-${n}`);let s=a?null:nm(t.evalRun)??(t.responseText?tm(t.responseText):null),l=a?t.replyToQuestion||t.feedbackSummary||"(annotation)":s?"":ji(t.responseText||""),d=a?void 0:t.question,c=!a&&t.resolutions&&t.resolutions.length>0,u=!a&&t.segments&&t.segments.length>0,p=!a&&!u&&t.toolsUsed&&t.toolsUsed.length>0;return!l&&!d&&!c&&!u&&!s?null:Ue("div",{"data-msg":!0,style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:[Ue("div",{style:{display:"flex",alignItems:"center",gap:4},children:[!a&&Z(Kr,{provider:t.provider,size:11,style:{color:"#6b7280"}}),Z("span",{style:{fontWeight:600,fontSize:11,color:a?r:"#6b7280"},children:a?"You":Xs(t.model,t.provider)}),Z("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Pc(t.timestamp)})]}),a&&!t.replyToQuestion&&(()=>{let f=l?am(l):null;if(f&&t.screenshotUrls)return Z("div",{style:{display:"flex",flexDirection:"column",gap:4},children:f.map((b,I)=>{let D=t.screenshotUrls?.[b.route],A=D?`${o}${D}`:null;return Ue("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[A?Z("img",{src:A,title:b.route,style:{...Wi,flexShrink:0,marginTop:1},onClick:()=>i(A)}):Z("div",{style:{width:Gi,height:Gi,flexShrink:0}}),Ue("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:[Z("code",{style:{fontSize:10,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px"},children:b.route}),b.text&&Z("div",{style:{marginTop:2},children:yo(b.text)})]})]},I)})});let v=t.screenshotUrl?`${o}${t.screenshotUrl}`:null;return v&&l?Ue("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[Z("img",{src:v,title:"screenshot",style:{...Wi,flexShrink:0,marginTop:1},onClick:()=>i(v)}),Z("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:l.includes(`
|
|
74
|
+
`)?yo(l):l})]}):l?Z("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:l.includes(`
|
|
75
|
+
`)?yo(l):l}):null})(),a&&t.replyToQuestion&&l&&Z("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:l.includes(`
|
|
76
|
+
`)?yo(l):l}),!a&&u&&t.segments.map((f,v)=>{if(f.kind==="tool_group")return Z(Hc,{tool:f.tool,items:f.items},v);let b=s?Qg(ji(f.text)):ji(f.text);return b?Z("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:yo(b)},v):null}),!a&&!u&&l&&Z("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:yo(l)}),!a&&s&&Z(om,{result:s}),a&&t.replyToQuestion&&(()=>{let f=lm(t,o);return f.length===0?null:Z("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:f.map((v,b)=>Z("img",{src:v.url,title:v.label,style:Wi,onClick:()=>i(v.url)},b))})})(),a&&!t.replyToQuestion&&(()=>{let f=cm(t,o);return f.length===0?null:Z("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:f.map((v,b)=>Z("img",{src:v.url,title:v.label,style:Wi,onClick:()=>i(v.url)},b))})})(),d&&Z("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:yo(d)}),(p||c)&&Ue("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151"},children:[p&&Z("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:t.toolsUsed.map((f,v)=>Z("div",{children:f},v))}),c&&t.resolutions.map((f,v)=>{let b=f.finalScope??f.inferredScope;return Ue("div",{style:{marginTop:p?4:0},children:[Z("span",{style:{color:f.status==="resolved"?"#10b981":"#f59e0b"},children:f.status==="resolved"?"Done":"Needs review"}),f.summary?` \u2014 ${f.summary}`:""]},v)})]}),!a&&t.responseText&&(()=>{let f=em(t.responseText);return f.length===0?null:Z("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151",marginTop:2},children:f.map((v,b)=>Ue("div",{style:{marginTop:b>0?6:0},children:[Z("span",{style:{display:"inline-block",backgroundColor:"#8b5cf6",color:"#fff",fontSize:9,fontWeight:600,textTransform:"uppercase",padding:"1px 5px",borderRadius:3,marginRight:6,verticalAlign:"middle"},children:v.category}),Z("strong",{children:v.element})," \u2014 ",v.decision,Z("div",{style:{color:"#9ca3af",fontStyle:"italic",marginTop:1},children:v.reason})]},b))})})()]},`${t.jobId}-${n}`)});function _c({threadId:e,bridgeUrl:t,accentColor:n,isStreaming:o,isQueued:r,queuePosition:i,streamingEvents:a,onClose:s,onReply:l,onCancel:d,lastError:c,onMouseEnter:u,toolbarRef:p,currentModel:f,currentProvider:v,annotationNumber:b,annotationText:I,onOpenEvals:D,preferredSide:A="right",modal:F=!0}){let[_,R]=Kn([]),[Y,ee]=Kn(!0),[k,w]=Kn(""),[L,h]=Kn([]),C=lo(!1),M=lo(null),[ae,Fe]=Kn(!0),[me,G]=Kn(0),[se,P]=Kn(null),fe=Hr(te=>P(te),[]),ge=lo(null),Le=Hr((te,ne)=>{let de=te&&ne.trim();ge.current&&(ge.current.style.opacity=de?"0.65":"1"),M.current&&(M.current.style.borderTop=`1px solid ${de?n:"rgba(0,0,0,0.12)"}`)},[n]),Pe=lo(null),Qe=lo(null),ce=lo(o),Ce=lo(ra(A)),ze=lo({x:0,y:0}),rt=lo(!1),ut=lo({x:0,y:0,offsetX:0,offsetY:0}),$e=lo(A==="right"),[,X]=Kn(0),Q=`${Yg}:${A}`;bo(()=>{try{let te=localStorage.getItem(Q);if(te){let ne=JSON.parse(te);if(typeof ne.top=="number"&&typeof ne.left=="number"){let de=window.innerWidth-_r-wn,We={top:Math.max(wn,Math.min(ne.top,window.innerHeight-wn-200)),left:Math.max(wn,Math.min(ne.left,de))};$e.current=We.left>=de-2,Ce.current=We,X(qe=>qe+1)}}}catch{}},[Q]),bo(()=>{let te=()=>{if($e.current)Ce.current=ra(A);else{let ne=Ce.current,de=window.innerWidth-_r-wn;Ce.current={top:Math.max(wn,Math.min(ne.top,window.innerHeight-wn-200)),left:Math.max(wn,Math.min(ne.left,de))}}X(ne=>ne+1)};return window.addEventListener("resize",te,{passive:!0}),()=>window.removeEventListener("resize",te)},[A]),bo(()=>{let te=Qe.current;if(!te)return;let ne=Re=>{Re.button!==0||Re.target.closest("button")||(Re.preventDefault(),Re.stopPropagation(),rt.current=!0,ut.current={x:Re.clientX,y:Re.clientY,offsetX:ze.current.x,offsetY:ze.current.y})},de=Re=>{if(!rt.current)return;let Ht=ut.current,$t=Ht.offsetX+(Re.clientX-Ht.x),Cn=Ht.offsetY+(Re.clientY-Ht.y),Dn=Math.max(wn,Math.min(window.innerWidth-_r-wn,Ce.current.left+$t)),Wt=Math.max(wn,Ce.current.top+Cn);ze.current={x:Dn-Ce.current.left,y:Wt-Ce.current.top};let Ct=Pe.current;Ct&&(Ct.style.top=`${Wt}px`,Ct.style.left=`${Dn}px`,Ct.style.height=`${Ac(Wt,Dn,p?.current)}px`)},We=()=>{if(!rt.current)return;let Re=Ce.current.top+ze.current.y,Ht=Ce.current.left+ze.current.x;Ce.current={top:Re,left:Ht},ze.current={x:0,y:0};let $t=window.innerWidth-_r-wn;$e.current=Ht>=$t-2;try{localStorage.setItem(Q,JSON.stringify({top:Re,left:Ht}))}catch{}rt.current=!1},qe=()=>{Ce.current=ra(A),ze.current={x:0,y:0},$e.current=A==="right";try{localStorage.removeItem(Q)}catch{}X(Re=>Re+1)};return te.addEventListener("mousedown",ne),window.addEventListener("mousemove",de),window.addEventListener("mouseup",We),te.addEventListener("dblclick",qe),()=>{te.removeEventListener("mousedown",ne),window.removeEventListener("mousemove",de),window.removeEventListener("mouseup",We),te.removeEventListener("dblclick",qe)}},[Q,A]);let we=Hr(()=>{ko(`${t}/thread/${e}`).then(te=>te.json()).then(te=>{R(te.messages??[]),ee(!1)}).catch(()=>ee(!1))},[t,e]);bo(()=>{ee(!0),we()},[we]),bo(()=>{ce.current&&!o&&we(),ce.current=o},[o]);let je=Lc(()=>a?hm(a):[],[a]),st=Lc(()=>a?mm(a):null,[a]);bo(()=>{let te=ge.current;if(!te)return;let ne=()=>{Fe(te.scrollHeight-te.scrollTop-te.clientHeight<40);let We=te.scrollTop+te.clientHeight,qe=te.querySelectorAll("[data-msg]"),Re=0;for(let Ht=0;Ht<qe.length;Ht++){let $t=qe[Ht];$t.offsetTop+$t.offsetHeight>We+20&&Re++}G(Re)};return te.addEventListener("scroll",ne,{passive:!0}),()=>te.removeEventListener("scroll",ne)},[]),bo(()=>{ae&&ge.current&&(ge.current.scrollTop=ge.current.scrollHeight)},[_,je.length,o,ae]),bo(()=>{let te=ne=>{ne.key==="Escape"&&(ne.stopPropagation(),s())};return document.addEventListener("keydown",te),()=>document.removeEventListener("keydown",te)},[s]);let Ee=Hr(()=>{if(!k.trim()||!l)return;let te=k.trim(),ne=L.length>0?L:void 0,de=ne?ne.map(We=>URL.createObjectURL(We)):void 0;R(We=>[...We,{role:"human",timestamp:Date.now(),jobId:"pending",replyToQuestion:te,...de?{replyImageUrls:de}:{}}]),l(e,te,ne),w(""),h([])},[k,L,e,l]),et=Hr(te=>{let ne=te.clipboardData.items,de=[];for(let We=0;We<ne.length;We++){let qe=ne[We];if(qe.type.startsWith("image/")){let Re=qe.getAsFile();Re&&de.push(Re)}}de.length>0&&(te.preventDefault(),h(We=>[...We,...de]))},[]),Ke=Hr(te=>{te.key==="Enter"&&(te.metaKey||te.ctrlKey)&&(te.preventDefault(),Ee())},[Ee]),tt=Ce.current.top+ze.current.y,pt=Ce.current.left+ze.current.x,mt=Ac(tt,pt,p?.current);return Ue(jo,{children:[F&&Z("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:te=>{te.target===te.currentTarget&&s()},style:{position:"fixed",inset:0,zIndex:9999}}),Ue("div",{ref:Pe,style:{...Ug,height:mt,position:"fixed",top:tt,left:pt,zIndex:1e4},"data-devtools":"thread-panel",onMouseEnter:u,children:[(()=>{let ne=`<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?n:"rgb(0,0,0)"}' stroke-width='.75'/></svg>`,de=`url("data:image/svg+xml,${encodeURIComponent(ne)}")`;return Ue(jo,{children:[Z("style",{children:`@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
77
|
+
[data-popmelt-reply]::placeholder { opacity: 0.35; }`}),Z("div",{style:{position:"absolute",inset:-3,padding:5,backgroundImage:de,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"}}})]})})(),Ue("div",{style:{display:"flex",flexDirection:"column",overflow:"hidden",flex:1,minHeight:0},children:[Ue("div",{ref:Qe,style:{...Kg,backgroundColor:n,color:"#ffffff",cursor:"grab",userSelect:"none",WebkitUserSelect:"none"},children:[Ue("span",{style:{display:"flex",alignItems:"center",gap:3,minWidth:0},children:[Z("span",{style:{flexShrink:0},children:b?`${b}.`:"Conversation"}),I&&Z("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:I})]}),Z("button",{onClick:s,style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1},children:"\xD7"})]}),Z("style",{dangerouslySetInnerHTML:{__html:qg+`
|
|
74
78
|
[data-devtools="thread-panel"] ::selection { background: color-mix(in srgb, ${n} 15%, transparent); }
|
|
75
|
-
`}}),nt("div",{ref:Se,style:y(f({},Cm),{transition:"opacity 150ms ease"}),"data-devtools":"thread-panel-messages",children:[Y&&ce("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!Y&&O.length===0&&!o&&ce("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),O.map((pe,se)=>ce(Um,{msg:pe,index:se,bridgeUrl:t,accentColor:n,onLightbox:ie},`${pe.jobId}-${se}`)),!o&&I&&O.some(pe=>{var se,Ce;return pe.role==="assistant"&&(((se=pe.responseText)==null?void 0:se.includes("<eval_proposals>"))||((Ce=pe.responseText)==null?void 0:Ce.includes("<evals>")))})&&ce("div",{style:{padding:"0 16px 12px"},children:ce("button",{type:"button",onClick:I,style:{width:"100%",border:"1px solid rgba(0,0,0,0.12)",background:"rgba(0,0,0,0.02)",color:"#6b7280",cursor:"pointer",fontFamily:Zt,fontSize:11,fontWeight:650,padding:"5px 8px"},children:"Review proposals"})}),o&&ce("div",{style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:r?nt("div",{style:{display:"flex",alignItems:"center",gap:6},children:[nt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:n,style:{verticalAlign:"middle",flexShrink:0,opacity:.5},children:[ce("circle",{cx:"12",cy:"6",r:"2"}),ce("circle",{cx:"6",cy:"12",r:"2"}),ce("circle",{cx:"18",cy:"12",r:"2"}),ce("circle",{cx:"12",cy:"18",r:"2"})]}),nt("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:["queued",s?` ${s}`:""]})]}):nt(Zo,{children:[nt("div",{style:{display:"flex",alignItems:"center",gap:4},children:[ce(ai,{provider:v,size:11,style:{color:"#6b7280"}}),ce("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:ca(g,v)})]}),$e.map((pe,se)=>{if(pe.kind==="tool_group")return ce(cd,{tool:pe.tool,items:pe.items},se);if(pe.kind==="file_content")return ce(jm,{file:pe.file,content:pe.content,ext:pe.ext,isPlan:pe.isPlan,onAccept:pe.isPlan&&a?()=>a(e,"Looks good, please proceed with implementation."):void 0},se);if(pe.kind==="thinking")return ce("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:pe.text},se);let Ce=va(pe.text);return Ce?ce("div",{style:{paddingLeft:12,lineHeight:1.5,wordBreak:"break-word"},children:To(Ce)},se):null}),nt("div",{style:{display:"flex",alignItems:"center",gap:6},children:[ce(Pm,{color:n}),d&&ce("button",{onClick:d,style:{background:"none",border:"1px solid rgba(0,0,0,0.1)",color:"#6b7280",fontSize:10,padding:"2px 8px",cursor:"pointer",fontFamily:"inherit",marginLeft:"auto"},children:"Cancel"})]})]})}),!be&&O.length>0&&ce("div",{style:{position:"sticky",bottom:5,display:"flex",justifyContent:"flex-end",paddingRight:3,pointerEvents:"none"},children:ce("button",{onClick:()=>{Se.current&&Se.current.scrollTo({top:Se.current.scrollHeight,behavior:"smooth"})},style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:4,fontSize:10,fontFamily:Zt,color:"transparent",backgroundColor:"#eaeaea",backgroundImage:`url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='rgb(0,0,0)' stroke-width='.75'/></svg>")}")`,backgroundSize:"5px 5px",border:"none",borderRadius:0,cursor:"pointer",pointerEvents:"auto",userSelect:"none"},children:nt("span",{style:{position:"relative",backgroundColor:"#eaeaea",padding:"0 6px",color:"#374151",fontFamily:Zt,lineHeight:1.4},children:[de," message",de!==1?"s":""," \u2193"]})})})]}),!o&&c&&nt("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[ce("span",{style:{fontWeight:600},children:"Error: "}),c]}),a&&nt("div",{style:{flexShrink:0,position:"relative"},children:[B.length>0&&ce("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:B.map((pe,se)=>nt("span",{onClick:()=>h(Ce=>Ce.filter((Re,it)=>it!==se)),onMouseEnter:Ce=>{let Re=Ce.currentTarget.querySelector("[data-chip-x]");Re&&(Re.style.color="#fff")},onMouseLeave:Ce=>{let Re=Ce.currentTarget.querySelector("[data-chip-x]");Re&&(Re.style.color="rgba(255,255,255,0.4)")},style:{display:"inline-flex",alignItems:"center",gap:4,fontSize:10,color:"#fff",backgroundColor:n,backdropFilter:"blur(4px)",padding:"2px 6px 2px 6px",cursor:"pointer"},children:["image ",se+1,ce("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"rgba(255,255,255,0.4)"},children:"\xD7"})]},se))}),nt("div",{ref:k,style:y(f({},km),{borderTop:"1px solid rgba(0,0,0,0.12)"}),children:[ce("input",{"data-popmelt-reply":!0,autoFocus:!0,value:Z,onChange:pe=>{_(pe.target.value),Pe(A.current,pe.target.value)},onFocus:()=>{A.current=!0,Pe(!0,Z)},onBlur:()=>{A.current=!1,Pe(!1,Z)},onKeyDown:ct,onPaste:ye,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:Zt,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),ce("button",{onClick:Je,disabled:!Z.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:Z.trim()?"pointer":"default",color:Z.trim()?n:"rgba(0,0,0,0.2)",flexShrink:0},children:nt("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[ce("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"}),ce("path",{d:"M6 12h16"})]})})]})]})]})]}),me&&ce(_m,{src:me,onClose:()=>R(null)})]})}import{jsx as qr,jsxs as pd}from"react/jsx-runtime";var qm=[],Ea=Km(null),xa="devtools-provider",ss="devtools-model",Sa="devtools-open-thread-id",wa="popmelt-synthesize-thread",Ca="popmelt-eval-synthesize-thread",Xr="#000000";async function ud(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 Zm={0:0,1:1},Qm={0:0,1:1,2:1};function eh(e,t,n){var r,s;if(t==="copilot")return 0;let o=t==="codex"?ns:ts;return e==="copilot"?0:e==="claude"&&t==="codex"?(r=Zm[n])!=null?r:Math.min(n,o.length-1):e==="codex"&&t==="claude"&&(s=Qm[n])!=null?s:Math.min(n,o.length-1)}function th({children:e,enabled:t=process.env.NODE_ENV==="development",bridgeUrl:n=typeof window!="undefined"?(r=>(r=window.__POPMELT_BRIDGE_URL__)!=null?r:"http://localhost:1111")():"http://localhost:1111",navigate:o}){var Qn,Bn,er,kr,ui,pi;let s=typeof window!="undefined"&&(Qn=window.__POPMELT_PROJECT_ID__)!=null?Qn:null,[i,l]=rl(),a=nl(n,t,s),d=on(null),c=on(null),u=(Bn=el())!=null?Bn:n,p=on(new Map),g=on(new Map),v=on(!1),x=Ar(),[w,I]=Et(()=>typeof window=="undefined"?"claude":localStorage.getItem(xa)||"claude"),[N,H]=Et(()=>{if(typeof window=="undefined")return 0;let S=localStorage.getItem(ss);return S&&parseInt(S,10)||0}),[O,L]=Et([]),[Y,re]=Et({}),[Z,_]=Et(0),[B,h]=Et({}),[A,k]=Et(null),[be,K]=Et("idle"),[de,F]=Et(null);Pt(()=>{a.isConnected&&Ra(u).then(S=>{if(!S)return;let P=Object.entries(S.providers).filter(([,Ae])=>Ae.available).map(([Ae])=>Ae);P.length>0&&L(P);let le={};for(let[Ae,Be]of Object.entries(S.providers))Be.models&&Be.models.length>0&&(le[Ae]=Be.models);re(le);let ue={};for(let[Ae,Be]of Object.entries(S.providers))Be.mcp&&(ue[Ae]=Be.mcp);h(ue)})},[a.isConnected,a.capabilitiesVersion,Z,u]),Pt(()=>{if(!a.isConnected){k(null);return}let S=!1;return _o(u).then(P=>{var le;S||k((le=P==null?void 0:P.version)!=null?le:null)}),()=>{S=!0}},[a.isConnected,a.capabilitiesVersion,Z,u]),Pt(()=>{if(be==="idle"||be==="restarting")return;let S=window.setTimeout(()=>{K("idle"),F(null)},be==="ok"?4e3:8e3);return()=>window.clearTimeout(S)},[be]),Pt(()=>{if(O.length>0&&!O.includes(w)){let S=O[0];I(S),localStorage.setItem(xa,S)}},[O,w]);let me=w==="codex"?[...ns]:w==="copilot"?[...la]:[...ts],R=Y[w]&&Y[w].length>0?Y[w]:me,ie=(er=R[N])!=null?er:R[0];Pt(()=>{N>=R.length&&(H(0),localStorage.setItem(ss,"0"))},[N,R.length]);let Se=$t(S=>{let P=w;I(S),localStorage.setItem(xa,S);let le=eh(P,S,N);H(le),localStorage.setItem(ss,String(le))},[w,N]),Pe=$t(S=>{H(S),localStorage.setItem(ss,String(S))},[]),[_e,Ze]=Et(new Set),[Oe,he]=Et(null),[Fe,rt]=Et(null),[ht,Jt]=Et(null),[Q,ne]=Et(null);Pt(()=>{a.isConnected&&Tr(u).then(S=>{S!=null&&S.components&&Ze(new Set(Object.keys(S.components)))})},[a.isConnected,u]);let Te=$t(async S=>{let P=[];for(let le of S)try{(await Pa(le,u)).added&&P.push(le)}catch(ue){console.error("[Popmelt] Failed to add component to model:",le,ue)}P.length>0&&(Ze(le=>{let ue=new Set(le);for(let Ae of P)ue.add(Ae);return ue}),he(P[P.length-1]))},[u]),$e=$t(S=>{he(S)},[]),pt=$t(()=>{Tr(u).then(S=>{S!=null&&S.components&&Ze(new Set(Object.keys(S.components)))})},[u]),Je=$t(async S=>{try{(await Oa(S,u)).removed&&Ze(le=>{let ue=new Set(le);return ue.delete(S),ue})}catch(P){console.error("[Popmelt] Failed to remove component from model:",P)}},[u]),ye=$t((S,P)=>{l({type:"MODIFY_SPACING_TOKEN",payload:S}),l({type:"ADD_SPACING_TOKEN_CHANGE",payload:P})},[l]),ct=$t((S,P)=>{l({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:S,originalValue:P}})},[l]),[Ge,_t]=Et(null),[dt,pe]=Et(()=>typeof window=="undefined"?null:localStorage.getItem(wa)||null),[se,Ce]=Et(null),[Re,it]=Et(()=>typeof window=="undefined"?null:localStorage.getItem(Ca)||null),[Me,Wt]=Et(0),[en,pn]=Et({}),[zn,jt]=Et(new Set);Pt(()=>{dt?localStorage.setItem(wa,dt):localStorage.removeItem(wa)},[dt]),Pt(()=>{Re?localStorage.setItem(Ca,Re):localStorage.removeItem(Ca)},[Re]);let[Ot,hn]=Et(0),vt=on([]);Pt(()=>{let S=vt.current,P=i.spacingTokenMods;vt.current=P;let le=new Map(S.map(Be=>[Be.tokenPath,Be])),ue=new Map(P.map(Be=>[Be.tokenPath,Be])),Ae=!1;for(let[Be,et]of ue){let Ue=le.get(Be);if(!(Ue&&Ue.currentValue===et.currentValue)){Ae=!0,et.currentValue==="__deleted__"?Ba(Be,u).catch(Rt=>console.error("[Popmelt] Failed to sync token delete:",Rt)):ls(Be,et.currentValue,u).catch(Rt=>console.error("[Popmelt] Failed to sync token update:",Rt));for(let Rt of et.targets){let Ct=document.querySelector(Rt.selector);if(Ct)if(et.currentValue==="__deleted__")Ct.style.removeProperty(Rt.property);else{let gt=et.currentPx;gt>0&&Ct.style.setProperty(Rt.property,`${gt}px`,"important")}}}}for(let[Be,et]of le)if(!ue.has(Be)){Ae=!0,ls(Be,et.originalValue,u).catch(Ue=>console.error("[Popmelt] Failed to restore token on undo:",Ue));for(let Ue of et.targets){let Rt=document.querySelector(Ue.selector);Rt&&Rt.style.removeProperty(Ue.property)}}Ae&&hn(Be=>Be+1)},[i.spacingTokenMods,u]);let[Vt,Qe]=Et(()=>sl()),xo=$t(S=>{Qe(S),al(S)},[]),[Ke,Tt]=Et(()=>typeof window=="undefined"?null:localStorage.getItem(Sa)||null),Gn=on(null),[So,Fn]=Et(new Set),[rn,Tn]=Et(null);Pt(()=>{Ke?localStorage.setItem(Sa,Ke):localStorage.removeItem(Sa)},[Ke]);let W="popmelt-in-flight-jobs",[fe,Le]=Et(()=>{try{let S=localStorage.getItem(W);return S?JSON.parse(S):{}}catch(S){return{}}});Pt(()=>{try{Object.keys(fe).length>0?localStorage.setItem(W,JSON.stringify(fe)):localStorage.removeItem(W)}catch(S){}},[fe]),Pt(()=>{let S=P=>{if(P.key===W)try{let le=P.newValue?JSON.parse(P.newValue):{};Le(le)}catch(le){}};return window.addEventListener("storage",S),()=>window.removeEventListener("storage",S)},[]);let Gt=on(new Map),St=on(new Map);Pt(()=>{for(let[S,P]of Object.entries(fe))P.annotationIds.length>0&&Gt.current.set(S,P.annotationIds),P.threadId&&St.current.set(S,P.threadId)},[fe]);let yn=on("");Pt(()=>{if(i.annotations.length===0)return;let S=Object.keys(fe).sort().join(",");if(S===yn.current)return;yn.current=S;let P=new Set;for(let ue of Object.values(fe))for(let Ae of ue.annotationIds)P.add(Ae);let le=i.annotations.filter(ue=>P.has(ue.id)?!1:!!(ue.status==="in_flight"||(ue.status==="pending"||!ue.status)&&(ue.captured||ue.threadId))).map(ue=>ue.id);le.length>0&&l({type:"SET_ANNOTATION_STATUS",payload:{ids:le,status:"dismissed"}})},[i.annotations,fe,l]);let bn=vo(()=>{let S=new Set;for(let P of Object.values(fe))for(let le of P.annotationIds)S.add(le);return S},[fe]),Ut=vo(()=>{let S=new Set(a.activeJobIds),P=new Set;for(let[le,ue]of Object.entries(fe))if(S.has(le))for(let Ae of ue.annotationIds)P.add(Ae);return P},[fe,a.activeJobIds]),Pn=vo(()=>{let S=new Set(a.activeJobIds),P=Object.entries(fe).filter(([Ae])=>!S.has(Ae)),le=P.length,ue=new Map;return P.forEach(([,Ae],Be)=>{let et=`(${Be+1}/${le})`;for(let Ue of Ae.annotationIds)ue.set(Ue,et)}),ue},[fe,a.activeJobIds]),vn=vo(()=>{let S=new Set;for(let P of Object.values(fe))for(let le of P.styleSelectors)S.add(le);return S},[fe]),Io=vo(()=>{let S=new Map;for(let P of Object.values(fe)){for(let le of P.styleSelectors)S.set(le,P.color);for(let le of P.annotationIds){let ue=i.annotations.find(Ae=>Ae.id===le);if(ue&&(ue.linkedSelector&&S.set(ue.linkedSelector,P.color),ue.groupId))for(let Ae of i.annotations)Ae.groupId===ue.groupId&&Ae.linkedSelector&&S.set(Ae.linkedSelector,P.color)}}return S},[fe,i.annotations]),yt=on(i.annotations);yt.current=i.annotations;let Ro=on(i.styleModifications);Ro.current=i.styleModifications;let io=on(fe);io.current=fe,Pt(()=>{let S=null,P=()=>{var Ue,Rt;if(Object.keys(io.current).length>0)return;let ue=yt.current,Ae=Ro.current,Be=[],et=[];for(let Ct of ue){if(!Ct.linkedSelector||!Ct.linkedSelector.startsWith("[data-pm=")||Ct.pathname||Ct.captured||Ct.status&&Ct.status!=="pending")continue;let gt=document.querySelector(Ct.linkedSelector);!gt&&((Rt=(Ue=Ct.elements)==null?void 0:Ue[0])!=null&&Rt.selector)&&(gt=document.querySelector(Ct.elements[0].selector)),gt||Be.push(Ct.linkedSelector)}for(let Ct of Ae)document.querySelector(Ct.selector)||et.push(Ct.selector);(Be.length>0||et.length>0)&&l({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:Be,styleSelectors:et}})},le=new MutationObserver(ue=>{ue.some(Ae=>Ae.removedNodes.length>0)&&(S&&clearTimeout(S),S=setTimeout(P,3e3))});return le.observe(document.body,{childList:!0,subtree:!0}),()=>{le.disconnect(),S&&clearTimeout(S)}},[l]);let jo=on(typeof window!="undefined"?window.location.pathname:"/");Pt(()=>{let S=ue=>{if(v.current)return;let Ae=window.location.pathname;if(ue===Ae)return;let Be=yt.current.filter(Ue=>{var Rt;return Ue.pathname===ue&&((Rt=Ue.status)!=null?Rt:"pending")==="pending"});if(console.log(`[Popmelt] Navigation from ${ue} \u2192 ${Ae}, ${Be.length} pending annotations on departing page`),Be.length===0)return;let et=d.current;if(!et){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if(Pr(document.body,et,Be,{dpr:1}).then(Ue=>Qr(Ue)).then(Ue=>{Ue?(g.current.set(ue,Ue),console.log(`[Popmelt] Cached screenshot for ${ue} (${(Ue.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${ue}`)}).catch(Ue=>{console.warn("[Popmelt] Capture-on-leave failed:",Ue)}),g.current.size>20){let Ue=[...g.current.entries()];g.current=new Map(Ue.slice(-10))}},P=ue=>{var Be;let Ae=(Be=ue.detail)==null?void 0:Be.prevPath;Ae&&(S(Ae),jo.current=window.location.pathname)},le=()=>{let ue=jo.current;S(ue),jo.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",P),window.addEventListener("popstate",le),()=>{window.removeEventListener("popmelt:locationchange",P),window.removeEventListener("popstate",le)}},[]),Pt(()=>{var S;if(a.lastCompletedJobId&&a.lastCompletedJobId in fe&&Le(P=>{var Ae;let Be=P,{[Ae=a.lastCompletedJobId]:le}=Be;return Dn(Be,[uo(Ae)])}),a.lastCompletedJobId&&a.lastCompletedJobId===Ge&&(hn(P=>P+1),_t(null)),a.lastCompletedJobId&&a.lastCompletedJobId===se&&(Wt(P=>P+1),Ce(null)),a.lastCompletedJobId){let P=(S=Object.entries(en).find(([,le])=>le===a.lastCompletedJobId))==null?void 0:S[0];P&&(pn(le=>{let Be=le,{[P]:ue}=Be;return Dn(Be,[uo(P)])}),Wt(le=>le+1))}},[a.lastCompletedJobId,Ge,se,en]);let qn=on(new Set),Mn=on(!1);Pt(()=>{if(!a.isConnected){Mn.current=!1;return}Mn.current||(Mn.current=!0,_o(u).then(async S=>{var et,Ue,Rt,Ct;if(!S)return;let P=(et=S.activeJobs)!=null?et:[],le=(Ue=S.recentJobs)!=null?Ue:[],ue=new Set(P.map(gt=>gt.id)),Ae=JSON.parse(localStorage.getItem(W)||"{}"),Be=new Set;for(let gt of Object.values(Ae))if(gt.annotationIds)for(let zt of gt.annotationIds)Be.add(zt);Le(gt=>{var lo,m,b;let zt=f({},gt),xt=Date.now();for(let G of Object.keys(zt)){if(G.startsWith("_pending_")){let M=parseInt(G.replace(/^_pending_(?:reply_)?/,""),10);!isNaN(M)&&xt-M>3e4&&delete zt[G];continue}ue.has(G)||delete zt[G]}for(let G of P)if(!zt[G.id]&&((lo=G.annotationIds)!=null&&lo.length||G.threadId)){let M=G.kind;zt[G.id]={annotationIds:(m=G.annotationIds)!=null?m:[],styleSelectors:[],color:M==="synthesize_evals"||M==="run_eval"?Xr:(b=G.color)!=null?b:"#888",threadId:G.threadId,kind:M}}let ln=new Set;for(let G of le)if(G.annotationIds)for(let M of G.annotationIds)ln.add(M);for(let G of Object.keys(zt)){if(!G.startsWith("_pending_"))continue;let M=zt[G];M&&M.annotationIds.some(C=>ln.has(C))&&delete zt[G]}return zt});for(let gt of le)if(gt.status==="done"&&(Rt=gt.annotationIds)!=null&&Rt.length&>.annotationIds.some(zt=>Be.has(zt))&&!qn.current.has(gt.id))try{let zt=await gi(u,gt.id);if(!zt)continue;let xt=zt.events.find(ln=>ln.type==="done");xt&&Array.isArray(xt.resolutions)&&(qn.current.add(gt.id),l({type:"APPLY_RESOLUTIONS",payload:{resolutions:xt.resolutions,threadId:(Ct=xt.threadId)!=null?Ct:void 0}}))}catch(zt){}}))},[a.isConnected,u,l]),Pt(()=>{let S=a.events.filter(P=>P.type==="done"&&P.data.resolutions);for(let P of S){let le=P.data.jobId;qn.current.has(le)||(qn.current.add(le),Array.isArray(P.data.resolutions)&&l({type:"APPLY_RESOLUTIONS",payload:{resolutions:P.data.resolutions,threadId:P.data.threadId}}))}},[a.events,l]);let Lo=on(new Set);Pt(()=>{let S=a.events.filter(P=>P.type==="error"&&P.data.cancelled);for(let P of S){let le=P.data.jobId;if(!le||Lo.current.has(le))continue;Lo.current.add(le);let ue=fe[le];ue&&ue.annotationIds.length>0&&l({type:"SET_ANNOTATION_STATUS",payload:{ids:ue.annotationIds,status:"dismissed"}})}},[a.events,fe,l]);let Zn=on(0);Pt(()=>{let S=a.incrementalResolutions;if(S.length<=Zn.current)return;let P=S.slice(Zn.current);Zn.current=S.length,l({type:"APPLY_RESOLUTIONS",payload:{resolutions:P}})},[a.incrementalResolutions,l]),Pt(()=>{a.incrementalResolutions.length===0&&(Zn.current=0)},[a.incrementalResolutions.length]);let Kt=$t(async()=>{let S=d.current;if(!S)return!1;let P=await Pr(document.body,S,i.annotations);if(P.length===0)return!1;let le=await gl(P,i.annotations,i.styleModifications);return le&&l({type:"MARK_CAPTURED"}),le},[i.annotations,i.styleModifications,l]),Bt=$t((S,P)=>{let le=p.current.get(S)||[];p.current.set(S,[...le,...P])},[]),Xt=$t(async()=>{var M;let S=d.current;if(!S)return!1;let P=i.annotations.filter(C=>{var $;return(($=C.status)!=null?$:"pending")==="pending"}),le=i.spacingTokenChanges.filter(C=>!C.captured);if(P.length===0&&i.styleModifications.filter(C=>!C.captured).length===0&&le.length===0)return!1;let ue=new Map;for(let C of P){let $=C.pathname||x;ue.has($)||ue.set($,[]),ue.get($).push(C)}let Ae=new Map,Be=[...ue.keys()].filter(C=>C!==x);if(Be.length>0){let C=x,$={x:window.scrollX,y:window.scrollY};v.current=!0;for(let oe of Be)try{console.log(`[Popmelt] Navigating to ${oe} for screenshot capture`),await ud(oe,o),window.location.pathname!==oe&&console.warn(`[Popmelt] Navigation to ${oe} did not take effect (at ${window.location.pathname})`);let j=ue.get(oe)||[],te=await Pr(document.body,S,j,{dpr:1}),E=await Qr(te);E&&(Ae.set(oe,E),console.log(`[Popmelt] Captured ${oe} (${(E.size/1024).toFixed(0)}KB)`))}catch(j){console.warn(`[Popmelt] Failed to capture ${oe}:`,j)}await ud(C,o),window.scrollTo($.x,$.y),v.current=!1}let et=P.filter(C=>(C.pathname||x)===x),Ue=await Pr(document.body,S,et.length>0?i.annotations:[],{dpr:1});if(Ue.length>0){let C=await Qr(Ue);C&&Ae.set(x,C)}if(Ae.size===0)return!1;let Rt=fs(P,i.styleModifications,void 0,le.length>0?le:void 0),Ct=JSON.stringify(Rt),gt=new Map;for(let C of P){let $=p.current.get(C.id);if($&&$.length>0&>.set(C.id,$),C.groupId){for(let oe of P)if(oe.groupId===C.groupId&&oe.id!==C.id){let j=p.current.get(oe.id);j&&j.length>0&>.set(oe.id,j)}}}let zt=ue.size>1;console.log(`[Popmelt] Submit: ${ue.size} page(s), ${Ae.size} screenshot(s), pages: [${[...ue.keys()].join(", ")}], cached: [${[...g.current.keys()].join(", ")}]`);let xt=zt?Ae:(M=Ae.get(x))!=null?M:Ae,ln=P.map(C=>C.id),lo=i.styleModifications.filter(C=>!C.captured).map(C=>C.selector),m=ps(i.activeColor),b=`_pending_${Date.now()}`,G={annotationIds:ln,styleSelectors:lo,color:i.activeColor,threadId:void 0};try{let C=JSON.parse(localStorage.getItem(W)||"{}");C[b]=G,localStorage.setItem(W,JSON.stringify(C))}catch(C){}Le(C=>y(f({},C),{[b]:G}));try{let{jobId:C,threadId:$}=await Aa(xt,Ct,u,m,w,ie.id,gt.size>0?gt:void 0,wi());for(let T of gt.keys())p.current.delete(T);for(let T of ue.keys())g.current.delete(T);let oe=y(f({},G),{threadId:$});try{let T=JSON.parse(localStorage.getItem(W)||"{}");delete T[b],T[C]=oe,localStorage.setItem(W,JSON.stringify(T))}catch(T){}Le(T=>{let J=T,{[b]:X}=J,z=Dn(J,[uo(b)]);return y(f({},z),{[C]:oe})}),l({type:"MARK_CAPTURED"}),$&&ln.length>0&&l({type:"SET_ANNOTATION_THREAD",payload:{ids:ln,threadId:$}});let j=i.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),E=((j!=null&&j[1]?parseFloat(j[1]):29)+60)%360;return l({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${E})`}),!0}catch(C){try{let $=JSON.parse(localStorage.getItem(W)||"{}");delete $[b],localStorage.setItem(W,JSON.stringify($))}catch($){}return Le($=>{let te=$,{[b]:oe}=te;return Dn(te,[uo(b)])}),console.error("[Pare] Failed to send to bridge:",C),!1}},[i.annotations,i.styleModifications,i.spacingTokenChanges,i.activeColor,l,u,w,ie.id,x,o]),sn=$t(async()=>{if(dt){Tt(dt);return}try{let{jobId:S,threadId:P}=await za(u,w,ie.id);_t(S),pe(P);let le={annotationIds:[],styleSelectors:[],color:"#6b7280",threadId:P,kind:"synthesize"};Le(ue=>y(f({},ue),{[S]:le})),Tt(P)}catch(S){console.error("[Popmelt] Failed to start synthesize:",S)}},[u,w,ie.id,dt]),$n=$t(async()=>{Ce(null),it(null),Tt(null);try{let{jobId:S,threadId:P}=await Fa(u,w,ie.id);Ce(S),it(P);let le={annotationIds:[],styleSelectors:[],color:Xr,threadId:P,kind:"synthesize_evals"};Le(ue=>y(f({},ue),{[S]:le})),Tt(P)}catch(S){console.error("[Popmelt] Failed to start eval synthesis:",S)}},[u,w,ie.id]),wo=$t(async S=>{let P=d.current;if(P){pn(le=>y(f({},le),{[S.id]:"_pending_"}));try{let ue=(await Pr(document.body,P,[],{dpr:1}))[0];if(!ue){pn(et=>{var Ct;let gt=et,{[Ct=S.id]:Ue}=gt;return Dn(gt,[uo(Ct)])});return}let{jobId:Ae,threadId:Be}=await Ha(S.id,ue,{url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollX:window.scrollX,scrollY:window.scrollY},u,w,ie.id,wi());if(pn(et=>y(f({},et),{[S.id]:Ae})),Be){jt(Ue=>new Set(Ue).add(Be));let et={annotationIds:[],styleSelectors:[],color:Xr,threadId:Be,kind:"run_eval"};Le(Ue=>y(f({},Ue),{[Ae]:et})),Tt(Be)}}catch(le){pn(ue=>{var et;let Ue=ue,{[et=S.id]:Ae}=Ue;return Dn(Ue,[uo(et)])}),console.error("[Popmelt] Failed to run eval:",le)}}},[u,w,ie.id]),In=$t(async(S,P,le)=>{var Rt,Ct,gt,zt;let ue=(zt=(gt=(Rt=Object.values(io.current).find(xt=>xt.threadId===S))==null?void 0:Rt.color)!=null?gt:(Ct=i.annotations.find(xt=>xt.threadId===S))==null?void 0:Ct.color)!=null?zt:i.activeColor,Ae=i.annotations.filter(xt=>xt.threadId===S&&(xt.status==="waiting_input"||xt.status==="resolved"||xt.status==="needs_review")),Be=Ae.map(xt=>xt.id),et=`_pending_reply_${Date.now()}`,Ue={annotationIds:Be,styleSelectors:[],color:ue,threadId:S};try{let xt=JSON.parse(localStorage.getItem(W)||"{}");xt[et]=Ue,localStorage.setItem(W,JSON.stringify(xt))}catch(xt){}Le(xt=>y(f({},xt),{[et]:Ue}));try{let xt=ps(i.activeColor),{jobId:ln}=await $a(S,P,u,xt,w,ie.id,le,wi()),lo=f({},Ue);try{let m=JSON.parse(localStorage.getItem(W)||"{}");delete m[et],m[ln]=lo,localStorage.setItem(W,JSON.stringify(m))}catch(m){}Le(m=>{let M=m,{[et]:b}=M,G=Dn(M,[uo(et)]);return y(f({},G),{[ln]:lo})}),Ae.length>0&&l({type:"SET_ANNOTATION_STATUS",payload:{ids:Be,status:"in_flight"}}),a.dismissQuestion(S)}catch(xt){try{let ln=JSON.parse(localStorage.getItem(W)||"{}");delete ln[et],localStorage.setItem(W,JSON.stringify(ln))}catch(ln){}Le(ln=>{let b=ln,{[et]:lo}=b;return Dn(b,[uo(et)])}),console.error("[Pare] Failed to send reply:",xt)}},[i.activeColor,i.annotations,u,a.dismissQuestion,l,w,ie.id]),Ao=on(new Set);Pt(()=>{for(let S of a.pendingQuestions){if(Ao.current.has(S.jobId))continue;Ao.current.add(S.jobId);let P=S.annotationIds&&S.annotationIds.length>0?S.annotationIds:void 0;!P&&S.threadId&&(P=i.annotations.filter(le=>le.threadId===S.threadId).map(le=>le.id)),P&&P.length>0&&l({type:"SET_ANNOTATION_QUESTION",payload:{ids:P,question:S.question,threadId:S.threadId}})}},[a.pendingQuestions,l,i.annotations]);let an=vo(()=>{if(a.activeJobId&&a.activeJobId in fe)return fe[a.activeJobId].color;let S=Object.values(fe);return S.length>0?S[S.length-1].color:void 0},[a.activeJobId,fe]),Go=$t(S=>{Tt(S)},[]),Po=$t(S=>{jt(P=>new Set(P).add(S)),Gn.current=Xr,Tt(S)},[]),so=$t(S=>{var ue;let P=fe[S],le=(P==null?void 0:P.threadId)||St.current.get(S);le&&(Gn.current=(P==null?void 0:P.kind)==="synthesize_evals"||(P==null?void 0:P.kind)==="run_eval"?Xr:(ue=P==null?void 0:P.color)!=null?ue:null,Tt(le))},[fe]),Er=$t(S=>{if(!S){Tn(null);return}let P=Gt.current.get(S);P&&P.length>0?Tn(new Set(P)):Tn(null)},[]),ao=$t(async S=>{try{let P=S?`${u}/cancel?jobId=${S}`:`${u}/cancel`;await fetch(P,{method:"POST"})}catch(P){}},[u]),Qo=$t(async()=>{var P,le,ue;K("restarting"),F("Restarting bridge");let S=await cs(u,ki,2e4);if(S.ok){k((P=S.status.version)!=null?P:ki),K("ok"),F(S.status.version?`Bridge restarted on ${S.status.version}`:"Bridge restarted"),_(Ae=>Ae+1);return}k((ue=(le=S.status)==null?void 0:le.version)!=null?ue:A),K("error"),F(S.error)},[A,u]),Yo=vo(()=>{if(!Ke)return null;for(let S of Object.values(fe))if(S.threadId===Ke&&S.kind)return S.kind;return Ke===dt?"synthesize":Ke===Re?"synthesize_evals":zn.has(Ke)?"run_eval":null},[Ke,fe,dt,Re,zn]),On=Yo==="synthesize_evals"||Yo==="run_eval",D=Yo==="synthesize";Pt(()=>{(i.activeTool==="model"&&Ke&&!D||i.activeTool==="eval"&&Ke&&!On)&&Tt(null)},[i.activeTool,Ke,D,On]);let V=$t(()=>{l({type:"SET_TOOL",payload:"eval"}),Wt(S=>S+1),Tt(null)},[l]),ee=on(null);Pt(()=>{i.isAnnotating?ee.current&&(Tt(ee.current),ee.current=null):Ke&&(ee.current=Ke,Tt(null))},[i.isAnnotating]);let ge=vo(()=>{if(!Ke)return null;for(let[S,P]of Object.entries(fe))if(P.threadId===Ke)return S;for(let[S,P]of Object.entries(a.activeJobThreads))if(P===Ke)return S;return null},[Ke,fe,a.activeJobThreads]),ae=Ke?i.annotations.find(S=>S.threadId===Ke):void 0,Ie=vo(()=>ge?a.events.filter(S=>S.data.jobId===ge):qm,[ge,a.events.length]),ke=vo(()=>{var S,P;return On?Xr:(P=(S=ae==null?void 0:ae.color)!=null?S:Gn.current)!=null?P:i.activeColor},[On,ae==null?void 0:ae.color,i.activeColor]),He=ae?i.annotations.indexOf(ae)+1:void 0;Pt(()=>{var P;if(On)return;let S=(P=ae==null?void 0:ae.color)!=null?P:Gn.current;Ke&&S&&l({type:"SET_COLOR",payload:S})},[Ke,On]);let[Ne,Mt]=Et(!1),[qt,xn]=Et(0),It=on(null),Ve=$t(S=>{S?(It.current&&(clearTimeout(It.current),It.current=null),Mt(!0)):It.current=setTimeout(()=>{Mt(!1),It.current=null},150)},[]),Yn=$t(()=>{xn(S=>S+1),a.clearEvents(),Tt(null),Fn(new Set),ao()},[a.clearEvents,ao]);Pt(()=>()=>{It.current&&clearTimeout(It.current)},[]);let[Oo,Bo]=Et(!1);Pt(()=>{Bo(!0)},[]);let En=vo(()=>({isEnabled:t}),[t]);return!t||!Oo?qr(Ea.Provider,{value:En,children:e}):pd(Ea.Provider,{value:En,children:[e,qr(bc,{state:i,dispatch:l,onScreenshot:Kt,inFlightAnnotationIds:bn,activeAnnotationIds:Ut,queuePositionMap:Pn,inFlightStyleSelectors:vn,inFlightSelectorColors:Io,onAttachImages:Bt,onReply:a.isConnected?In:void 0,onViewThread:a.isConnected?Go:void 0,onCloseThread:S=>{Tt(null),S&&Fn(P=>new Set(P).add(S))},onModelComponentsAdd:a.isConnected?Te:void 0,onModelComponentFocus:a.isConnected?$e:void 0,onModelComponentHover:rt,modelComponentNames:_e,modelPanelHoveredComponent:ht,modelSpacingTokenHover:Q,highlightedAnnotationIds:rn,focusedThreadAnnotationId:ae==null?void 0:ae.id,externalCanvasRef:d,toolbarRef:c}),qr(nd,{children:pd(ed,{children:[qr(Kc,{state:i,dispatch:l,onScreenshot:Kt,onSendToClaude:a.isConnected?Xt:void 0,hasActiveJobs:Object.keys(fe).length>0||a.activeJobIds.length>0,activeJobColor:an,onCrosshairHover:Ve,onClear:Yn,provider:w,onProviderChange:a.isConnected&&O.length>1?Se:void 0,availableProviders:O,modelIndex:N,modelCount:R.length,modelLabel:ie.label,onModelChange:a.isConnected?Pe:void 0,onViewThread:a.isConnected?Go:void 0,isThreadPanelOpen:Ke!==null&&!D&&!On,mcpStatus:B,bridgeUrl:u,isBridgeConnected:a.isConnected,packageVersion:ki,bridgeVersion:A,bridgeRestartState:be,bridgeRestartMessage:de,onBridgeRestart:Qo,modelSelectedComponent:Oe,modelCanvasHoveredComponent:Fe,onModelComponentHover:Jt,onSpacingTokenHover:ne,onModifySpacingToken:a.isConnected?ye:void 0,onDeleteSpacingToken:a.isConnected?ct:void 0,modelRefreshKey:Ot,onModelComponentAdded:pt,onModelComponentRemoved:Je,onSynthesizeRules:a.isConnected&&w!=="copilot"?sn:void 0,isSynthesizing:Ge!==null,onSynthesizeEvals:a.isConnected&&w!=="copilot"?$n:void 0,isSynthesizingEvals:se!==null,onRunEval:a.isConnected&&w!=="copilot"?wo:void 0,onViewEvalRunThread:Po,runningEvalIds:Object.keys(en),evalRefreshKey:Me,toolbarRef:c,snapPosition:Vt,onSnapPositionChange:xo}),Ke&&qr(dd,{threadId:Ke,bridgeUrl:u,accentColor:ke,isStreaming:ge!==null,isQueued:ge!==null&&!a.activeJobIds.includes(ge),queuePosition:ge&&!a.activeJobIds.includes(ge)?(()=>{let S=new Set(a.activeJobIds),P=Object.keys(fe).filter(ue=>!S.has(ue)),le=P.indexOf(ge);return le>=0?`(${le+1}/${P.length})`:void 0})():void 0,streamingEvents:Ie,onClose:()=>Tt(null),onReply:In,onCancel:ge?()=>ao(ge):void 0,lastError:(pi=(kr=a.lastErrorByJob)==null?void 0:kr[ge!=null?ge:""])!=null?pi:a.lastCompletedJobId&&St.current.get(a.lastCompletedJobId)===Ke?(ui=a.lastErrorByJob)==null?void 0:ui[a.lastCompletedJobId]:void 0,toolbarRef:c,currentModel:ie.id,currentProvider:w,annotationNumber:He,annotationText:ae==null?void 0:ae.text,onOpenEvals:Ke===Re?V:void 0,preferredSide:On?"left":"right",modal:!On},`${Ke}:${On?"eval":"default"}`),qr(Qc,{bridge:a,bridgeUrl:u,inFlightJobs:fe,isVisible:Ne||a.lastResponseText!==null||a.activeJobIds.length>0,onHover:Ve,clearSignal:qt,onReply:In,onViewThread:Go,onClickJob:so,onCancel:ao,onHoverJob:Er,isConnected:a.isConnected,dismissedThreadIds:So,snapPosition:Vt})]})})]})}function nh(){let e=Xm(Ea);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{th as PopmeltProvider,nh as usePopmelt};
|
|
79
|
+
`}}),Ue("div",{ref:ge,style:{...Xg,transition:"opacity 150ms ease"},"data-devtools":"thread-panel-messages",children:[Y&&Z("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!Y&&_.length===0&&!o&&Z("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),_.map((te,ne)=>Z(wm,{msg:te,index:ne,bridgeUrl:t,accentColor:n,onLightbox:fe},`${te.jobId}-${ne}`)),!o&&D&&_.some(te=>te.role==="assistant"&&(te.responseText?.includes("<eval_proposals>")||te.responseText?.includes("<evals>")))&&Z("div",{style:{padding:"0 16px 12px"},children:Z("button",{type:"button",onClick:D,style:{width:"100%",border:"1px solid rgba(0,0,0,0.12)",background:"rgba(0,0,0,0.02)",color:"#6b7280",cursor:"pointer",fontFamily:Kt,fontSize:11,fontWeight:650,padding:"5px 8px"},children:"Review proposals"})}),o&&Z("div",{style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:r?Ue("div",{style:{display:"flex",alignItems:"center",gap:6},children:[Ue("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:n,style:{verticalAlign:"middle",flexShrink:0,opacity:.5},children:[Z("circle",{cx:"12",cy:"6",r:"2"}),Z("circle",{cx:"6",cy:"12",r:"2"}),Z("circle",{cx:"18",cy:"12",r:"2"}),Z("circle",{cx:"12",cy:"18",r:"2"})]}),Ue("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:["queued",i?` ${i}`:""]})]}):Ue(jo,{children:[Ue("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Z(Kr,{provider:v,size:11,style:{color:"#6b7280"}}),Z("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:Xs(f,v)})]}),je.map((te,ne)=>{if(te.kind==="tool_group")return Z(Hc,{tool:te.tool,items:te.items},ne);if(te.kind==="file_content")return Z(ym,{file:te.file,content:te.content,ext:te.ext,isPlan:te.isPlan,onAccept:te.isPlan&&l?()=>l(e,"Looks good, please proceed with implementation."):void 0},ne);if(te.kind==="thinking")return Z("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:te.text},ne);let de=ji(te.text);return de?Z("div",{style:{paddingLeft:12,lineHeight:1.5,wordBreak:"break-word"},children:yo(de)},ne):null}),Ue("div",{style:{display:"flex",alignItems:"center",gap:6},children:[Z(sm,{color:n}),d&&Z("button",{onClick:d,style:{background:"none",border:"1px solid rgba(0,0,0,0.1)",color:"#6b7280",fontSize:10,padding:"2px 8px",cursor:"pointer",fontFamily:"inherit",marginLeft:"auto"},children:"Cancel"})]})]})}),!ae&&_.length>0&&Z("div",{style:{position:"sticky",bottom:5,display:"flex",justifyContent:"flex-end",paddingRight:3,pointerEvents:"none"},children:Z("button",{onClick:()=>{ge.current&&ge.current.scrollTo({top:ge.current.scrollHeight,behavior:"smooth"})},style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:4,fontSize:10,fontFamily:Kt,color:"transparent",backgroundColor:"#eaeaea",backgroundImage:`url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='rgb(0,0,0)' stroke-width='.75'/></svg>")}")`,backgroundSize:"5px 5px",border:"none",borderRadius:0,cursor:"pointer",pointerEvents:"auto",userSelect:"none"},children:Ue("span",{style:{position:"relative",backgroundColor:"#eaeaea",padding:"0 6px",color:"#374151",fontFamily:Kt,lineHeight:1.4},children:[me," message",me!==1?"s":""," \u2193"]})})})]}),!o&&c&&Ue("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[Z("span",{style:{fontWeight:600},children:"Error: "}),c]}),l&&Ue("div",{style:{flexShrink:0,position:"relative"},children:[L.length>0&&Z("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:L.map((te,ne)=>Ue("span",{onClick:()=>h(de=>de.filter((We,qe)=>qe!==ne)),onMouseEnter:de=>{let We=de.currentTarget.querySelector("[data-chip-x]");We&&(We.style.color="#fff")},onMouseLeave:de=>{let We=de.currentTarget.querySelector("[data-chip-x]");We&&(We.style.color="rgba(255,255,255,0.4)")},style:{display:"inline-flex",alignItems:"center",gap:4,fontSize:10,color:"#fff",backgroundColor:n,backdropFilter:"blur(4px)",padding:"2px 6px 2px 6px",cursor:"pointer"},children:["image ",ne+1,Z("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"rgba(255,255,255,0.4)"},children:"\xD7"})]},ne))}),Ue("div",{ref:M,style:{...Zg,borderTop:"1px solid rgba(0,0,0,0.12)"},children:[Z("input",{"data-popmelt-reply":!0,autoFocus:!0,value:k,onChange:te=>{w(te.target.value),Le(C.current,te.target.value)},onFocus:()=>{C.current=!0,Le(!0,k)},onBlur:()=>{C.current=!1,Le(!1,k)},onKeyDown:Ke,onPaste:et,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:Kt,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),Z("button",{onClick:Ee,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()?n:"rgba(0,0,0,0.2)",flexShrink:0},children:Ue("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[Z("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"}),Z("path",{d:"M6 12h16"})]})})]})]})]})]}),se&&Z(dm,{src:se,onClose:()=>P(null)})]})}import{jsx as Fr,jsxs as Fc}from"react/jsx-runtime";var km=[],da=Cm(null),sa="devtools-provider",Ji="devtools-model",aa="devtools-open-thread-id",la="popmelt-synthesize-thread",ca="popmelt-eval-synthesize-thread",Nr="#000000";async function Nc(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 Tm={0:0,1:1},Mm={0:0,1:1,2:1};function Im(e,t,n){if(t==="copilot")return 0;let o=t==="codex"?zi:Fi;return e==="copilot"?0:e==="claude"&&t==="codex"?Tm[n]??Math.min(n,o.length-1):e==="codex"&&t==="claude"?Mm[n]??Math.min(n,o.length-1):Math.min(n,o.length-1)}function Rm({children:e,enabled:t=process.env.NODE_ENV==="development",bridgeUrl:n=typeof window<"u"?window.__POPMELT_BRIDGE_URL__??"http://localhost:1111":"http://localhost:1111",navigate:o}){let r=typeof window<"u"?window.__POPMELT_PROJECT_ID__??null:null,[i,a]=Aa(),s=Ra(n,t,r),l=en(null),d=en(null),c=Ma()??n,u=en(new Map),p=en(new Map),f=en(!1),v=vr(),[b,I]=St(()=>typeof window>"u"?"claude":localStorage.getItem(sa)||"claude"),[D,A]=St(()=>{if(typeof window>"u")return 0;let x=localStorage.getItem(Ji);return x&&parseInt(x,10)||0}),[F,_]=St([]),[R,Y]=St({}),[ee,k]=St(0),[w,L]=St({}),[h,C]=St(null),[M,ae]=St("idle"),[Fe,me]=St(null);Tt(()=>{s.isConnected&&pa(c).then(x=>{if(!x)return;let W=Object.entries(x.providers).filter(([,Me])=>Me.available).map(([Me])=>Me);W.length>0&&_(W);let re={};for(let[Me,_e]of Object.entries(x.providers))_e.models&&_e.models.length>0&&(re[Me]=_e.models);Y(re);let ie={};for(let[Me,_e]of Object.entries(x.providers))_e.mcp&&(ie[Me]=_e.mcp);L(ie)})},[s.isConnected,s.capabilitiesVersion,ee,c]),Tt(()=>{if(!s.isConnected){C(null);return}let x=!1;return To(c).then(W=>{x||C(W?.version??null)}),()=>{x=!0}},[s.isConnected,s.capabilitiesVersion,ee,c]),Tt(()=>{if(M==="idle"||M==="restarting")return;let x=window.setTimeout(()=>{ae("idle"),me(null)},M==="ok"?4e3:8e3);return()=>window.clearTimeout(x)},[M]),Tt(()=>{if(F.length>0&&!F.includes(b)){let x=F[0];I(x),localStorage.setItem(sa,x)}},[F,b]);let G=b==="codex"?[...zi]:b==="copilot"?[...Ks]:[...Fi],se=R[b]&&R[b].length>0?R[b]:G,P=se[D]??se[0];Tt(()=>{D>=se.length&&(A(0),localStorage.setItem(Ji,"0"))},[D,se.length]);let fe=Bt(x=>{let W=b;I(x),localStorage.setItem(sa,x);let re=Im(W,x,D);A(re),localStorage.setItem(Ji,String(re))},[b,D]),ge=Bt(x=>{A(x),localStorage.setItem(Ji,String(x))},[]),[Le,Pe]=St(new Set),[Qe,ce]=St(null),[Ce,ze]=St(null),[rt,ut]=St(null),[$e,X]=St(null);Tt(()=>{s.isConnected&&mr(c).then(x=>{x?.components&&Pe(new Set(Object.keys(x.components)))})},[s.isConnected,c]);let Q=Bt(async x=>{let W=[];for(let re of x)try{(await ma(re,c)).added&&W.push(re)}catch(ie){console.error("[Popmelt] Failed to add component to model:",re,ie)}W.length>0&&(Pe(re=>{let ie=new Set(re);for(let Me of W)ie.add(Me);return ie}),ce(W[W.length-1]))},[c]),we=Bt(x=>{ce(x)},[]),je=Bt(()=>{mr(c).then(x=>{x?.components&&Pe(new Set(Object.keys(x.components)))})},[c]),st=Bt(async x=>{try{(await ha(x,c)).removed&&Pe(re=>{let ie=new Set(re);return ie.delete(x),ie})}catch(W){console.error("[Popmelt] Failed to remove component from model:",W)}},[c]),Ee=Bt((x,W)=>{a({type:"MODIFY_SPACING_TOKEN",payload:x}),a({type:"ADD_SPACING_TOKEN_CHANGE",payload:W})},[a]),et=Bt((x,W)=>{a({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:x,originalValue:W}})},[a]),[Ke,tt]=St(null),[pt,mt]=St(()=>typeof window>"u"?null:localStorage.getItem(la)||null),[te,ne]=St(null),[de,We]=St(()=>typeof window>"u"?null:localStorage.getItem(ca)||null),[qe,Re]=St(0),[Ht,$t]=St({}),[Cn,Dn]=St(new Set);Tt(()=>{pt?localStorage.setItem(la,pt):localStorage.removeItem(la)},[pt]),Tt(()=>{de?localStorage.setItem(ca,de):localStorage.removeItem(ca)},[de]);let[Wt,Ct]=St(0),cn=en([]);Tt(()=>{let x=cn.current,W=i.spacingTokenMods;cn.current=W;let re=new Map(x.map(_e=>[_e.tokenPath,_e])),ie=new Map(W.map(_e=>[_e.tokenPath,_e])),Me=!1;for(let[_e,Ne]of ie){let xe=re.get(_e);if(!(xe&&xe.currentValue===Ne.currentValue)){Me=!0,Ne.currentValue==="__deleted__"?ya(_e,c).catch(Oe=>console.error("[Popmelt] Failed to sync token delete:",Oe)):Vi(_e,Ne.currentValue,c).catch(Oe=>console.error("[Popmelt] Failed to sync token update:",Oe));for(let Oe of Ne.targets){let nn=document.querySelector(Oe.selector);if(nn)if(Ne.currentValue==="__deleted__")nn.style.removeProperty(Oe.property);else{let ot=Ne.currentPx;ot>0&&nn.style.setProperty(Oe.property,`${ot}px`,"important")}}}}for(let[_e,Ne]of re)if(!ie.has(_e)){Me=!0,Vi(_e,Ne.originalValue,c).catch(xe=>console.error("[Popmelt] Failed to restore token on undo:",xe));for(let xe of Ne.targets){let Oe=document.querySelector(xe.selector);Oe&&Oe.style.removeProperty(xe.property)}}Me&&Ct(_e=>_e+1)},[i.spacingTokenMods,c]);let[ft,qt]=St(()=>Da()),Ze=Bt(x=>{qt(x),Oa(x)},[]),[nt,lt]=St(()=>typeof window>"u"?null:localStorage.getItem(aa)||null),vn=en(null),[uo,Xn]=St(new Set),[Nn,Gt]=St(null);Tt(()=>{nt?localStorage.setItem(aa,nt):localStorage.removeItem(aa)},[nt]);let ht="popmelt-in-flight-jobs",[O,ve]=St(()=>{try{let x=localStorage.getItem(ht);return x?JSON.parse(x):{}}catch{return{}}});Tt(()=>{try{Object.keys(O).length>0?localStorage.setItem(ht,JSON.stringify(O)):localStorage.removeItem(ht)}catch{}},[O]),Tt(()=>{let x=W=>{if(W.key===ht)try{let re=W.newValue?JSON.parse(W.newValue):{};ve(re)}catch{}};return window.addEventListener("storage",x),()=>window.removeEventListener("storage",x)},[]);let De=en(new Map),Pt=en(new Map);Tt(()=>{for(let[x,W]of Object.entries(O))W.annotationIds.length>0&&De.current.set(x,W.annotationIds),W.threadId&&Pt.current.set(x,W.threadId)},[O]);let Rt=en("");Tt(()=>{if(i.annotations.length===0)return;let x=Object.keys(O).sort().join(",");if(x===Rt.current)return;Rt.current=x;let W=new Set;for(let ie of Object.values(O))for(let Me of ie.annotationIds)W.add(Me);let re=i.annotations.filter(ie=>W.has(ie.id)?!1:!!(ie.status==="in_flight"||(ie.status==="pending"||!ie.status)&&(ie.captured||ie.threadId))).map(ie=>ie.id);re.length>0&&a({type:"SET_ANNOTATION_STATUS",payload:{ids:re,status:"dismissed"}})},[i.annotations,O,a]);let hn=co(()=>{let x=new Set;for(let W of Object.values(O))for(let re of W.annotationIds)x.add(re);return x},[O]),dn=co(()=>{let x=new Set(s.activeJobIds),W=new Set;for(let[re,ie]of Object.entries(O))if(x.has(re))for(let Me of ie.annotationIds)W.add(Me);return W},[O,s.activeJobIds]),Jt=co(()=>{let x=new Set(s.activeJobIds),W=Object.entries(O).filter(([Me])=>!x.has(Me)),re=W.length,ie=new Map;return W.forEach(([,Me],_e)=>{let Ne=`(${_e+1}/${re})`;for(let xe of Me.annotationIds)ie.set(xe,Ne)}),ie},[O,s.activeJobIds]),En=co(()=>{let x=new Set;for(let W of Object.values(O))for(let re of W.styleSelectors)x.add(re);return x},[O]),un=co(()=>{let x=new Map;for(let W of Object.values(O)){for(let re of W.styleSelectors)x.set(re,W.color);for(let re of W.annotationIds){let ie=i.annotations.find(Me=>Me.id===re);if(ie&&(ie.linkedSelector&&x.set(ie.linkedSelector,W.color),ie.groupId))for(let Me of i.annotations)Me.groupId===ie.groupId&&Me.linkedSelector&&x.set(Me.linkedSelector,W.color)}}return x},[O,i.annotations]),qn=en(i.annotations);qn.current=i.annotations;let _t=en(i.styleModifications);_t.current=i.styleModifications;let po=en(O);po.current=O,Tt(()=>{let x=null,W=()=>{if(Object.keys(po.current).length>0)return;let ie=qn.current,Me=_t.current,_e=[],Ne=[];for(let xe of ie){if(!xe.linkedSelector||!xe.linkedSelector.startsWith("[data-pm=")||xe.pathname||xe.captured||xe.status&&xe.status!=="pending")continue;let Oe=document.querySelector(xe.linkedSelector);!Oe&&xe.elements?.[0]?.selector&&(Oe=document.querySelector(xe.elements[0].selector)),Oe||_e.push(xe.linkedSelector)}for(let xe of Me)document.querySelector(xe.selector)||Ne.push(xe.selector);(_e.length>0||Ne.length>0)&&a({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:_e,styleSelectors:Ne}})},re=new MutationObserver(ie=>{ie.some(Me=>Me.removedNodes.length>0)&&(x&&clearTimeout(x),x=setTimeout(W,3e3))});return re.observe(document.body,{childList:!0,subtree:!0}),()=>{re.disconnect(),x&&clearTimeout(x)}},[a]);let Zn=en(typeof window<"u"?window.location.pathname:"/");Tt(()=>{let x=ie=>{if(f.current)return;let Me=window.location.pathname;if(ie===Me)return;let _e=qn.current.filter(xe=>xe.pathname===ie&&(xe.status??"pending")==="pending");if(console.log(`[Popmelt] Navigation from ${ie} \u2192 ${Me}, ${_e.length} pending annotations on departing page`),_e.length===0)return;let Ne=l.current;if(!Ne){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if(xr(document.body,Ne,_e,{dpr:1}).then(xe=>$r(xe)).then(xe=>{xe?(p.current.set(ie,xe),console.log(`[Popmelt] Cached screenshot for ${ie} (${(xe.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${ie}`)}).catch(xe=>{console.warn("[Popmelt] Capture-on-leave failed:",xe)}),p.current.size>20){let xe=[...p.current.entries()];p.current=new Map(xe.slice(-10))}},W=ie=>{let Me=ie.detail?.prevPath;Me&&(x(Me),Zn.current=window.location.pathname)},re=()=>{let ie=Zn.current;x(ie),Zn.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",W),window.addEventListener("popstate",re),()=>{window.removeEventListener("popmelt:locationchange",W),window.removeEventListener("popstate",re)}},[]),Tt(()=>{if(s.lastCompletedJobId&&s.lastCompletedJobId in O&&ve(x=>{let{[s.lastCompletedJobId]:W,...re}=x;return re}),s.lastCompletedJobId&&s.lastCompletedJobId===Ke&&(Ct(x=>x+1),tt(null)),s.lastCompletedJobId&&s.lastCompletedJobId===te&&(Re(x=>x+1),ne(null)),s.lastCompletedJobId){let x=Object.entries(Ht).find(([,W])=>W===s.lastCompletedJobId)?.[0];x&&($t(W=>{let{[x]:re,...ie}=W;return ie}),Re(W=>W+1))}},[s.lastCompletedJobId,Ke,te,Ht]);let vo=en(new Set),Qn=en(!1);Tt(()=>{if(!s.isConnected){Qn.current=!1;return}Qn.current||(Qn.current=!0,To(c).then(async x=>{if(!x)return;let W=x.activeJobs??[],re=x.recentJobs??[],ie=new Set(W.map(Ne=>Ne.id)),Me=JSON.parse(localStorage.getItem(ht)||"{}"),_e=new Set;for(let Ne of Object.values(Me))if(Ne.annotationIds)for(let xe of Ne.annotationIds)_e.add(xe);ve(Ne=>{let xe={...Ne},Oe=Date.now();for(let ot of Object.keys(xe)){if(ot.startsWith("_pending_")){let jt=parseInt(ot.replace(/^_pending_(?:reply_)?/,""),10);!isNaN(jt)&&Oe-jt>3e4&&delete xe[ot];continue}ie.has(ot)||delete xe[ot]}for(let ot of W)if(!xe[ot.id]&&(ot.annotationIds?.length||ot.threadId)){let jt=ot.kind;xe[ot.id]={annotationIds:ot.annotationIds??[],styleSelectors:[],color:jt==="synthesize_evals"||jt==="run_eval"?Nr:ot.color??"#888",threadId:ot.threadId,kind:jt}}let nn=new Set;for(let ot of re)if(ot.annotationIds)for(let jt of ot.annotationIds)nn.add(jt);for(let ot of Object.keys(xe)){if(!ot.startsWith("_pending_"))continue;let jt=xe[ot];jt&&jt.annotationIds.some(gr=>nn.has(gr))&&delete xe[ot]}return xe});for(let Ne of re)if(Ne.status==="done"&&Ne.annotationIds?.length&&Ne.annotationIds.some(xe=>_e.has(xe))&&!vo.current.has(Ne.id))try{let xe=await Qr(c,Ne.id);if(!xe)continue;let Oe=xe.events.find(nn=>nn.type==="done");Oe&&Array.isArray(Oe.resolutions)&&(vo.current.add(Ne.id),a({type:"APPLY_RESOLUTIONS",payload:{resolutions:Oe.resolutions,threadId:Oe.threadId??void 0}}))}catch{}}))},[s.isConnected,c,a]),Tt(()=>{let x=s.events.filter(W=>W.type==="done"&&W.data.resolutions);for(let W of x){let re=W.data.jobId;vo.current.has(re)||(vo.current.add(re),Array.isArray(W.data.resolutions)&&a({type:"APPLY_RESOLUTIONS",payload:{resolutions:W.data.resolutions,threadId:W.data.threadId}}))}},[s.events,a]);let kn=en(new Set);Tt(()=>{let x=s.events.filter(W=>W.type==="error"&&W.data.cancelled);for(let W of x){let re=W.data.jobId;if(!re||kn.current.has(re))continue;kn.current.add(re);let ie=O[re];ie&&ie.annotationIds.length>0&&a({type:"SET_ANNOTATION_STATUS",payload:{ids:ie.annotationIds,status:"dismissed"}})}},[s.events,O,a]);let eo=en(0);Tt(()=>{let x=s.incrementalResolutions;if(x.length<=eo.current)return;let W=x.slice(eo.current);eo.current=x.length,a({type:"APPLY_RESOLUTIONS",payload:{resolutions:W}})},[s.incrementalResolutions,a]),Tt(()=>{s.incrementalResolutions.length===0&&(eo.current=0)},[s.incrementalResolutions.length]);let fo=Bt(async()=>{let x=l.current;if(!x)return!1;let W=await xr(document.body,x,i.annotations);if(W.length===0)return!1;let re=await $a(W,i.annotations,i.styleModifications);return re&&a({type:"MARK_CAPTURED"}),re},[i.annotations,i.styleModifications,a]),Zt=Bt((x,W)=>{let re=u.current.get(x)||[];u.current.set(x,[...re,...W])},[]),Mt=Bt(async()=>{let x=l.current;if(!x)return!1;let W=i.annotations.filter(y=>(y.status??"pending")==="pending"),re=i.spacingTokenChanges.filter(y=>!y.captured);if(W.length===0&&i.styleModifications.filter(y=>!y.captured).length===0&&re.length===0)return!1;let ie=new Map;for(let y of W){let B=y.pathname||v;ie.has(B)||ie.set(B,[]),ie.get(B).push(y)}let Me=new Map,_e=[...ie.keys()].filter(y=>y!==v);if(_e.length>0){let y=v,B={x:window.scrollX,y:window.scrollY};f.current=!0;for(let T of _e)try{console.log(`[Popmelt] Navigating to ${T} for screenshot capture`),await Nc(T,o),window.location.pathname!==T&&console.warn(`[Popmelt] Navigation to ${T} did not take effect (at ${window.location.pathname})`);let $=ie.get(T)||[],U=await xr(document.body,x,$,{dpr:1}),N=await $r(U);N&&(Me.set(T,N),console.log(`[Popmelt] Captured ${T} (${(N.size/1024).toFixed(0)}KB)`))}catch($){console.warn(`[Popmelt] Failed to capture ${T}:`,$)}await Nc(y,o),window.scrollTo(B.x,B.y),f.current=!1}let Ne=W.filter(y=>(y.pathname||v)===v),xe=await xr(document.body,x,Ne.length>0?i.annotations:[],{dpr:1});if(xe.length>0){let y=await $r(xe);y&&Me.set(v,y)}if(Me.size===0)return!1;let Oe=es(W,i.styleModifications,void 0,re.length>0?re:void 0),nn=JSON.stringify(Oe),ot=new Map;for(let y of W){let B=u.current.get(y.id);if(B&&B.length>0&&ot.set(y.id,B),y.groupId){for(let T of W)if(T.groupId===y.groupId&&T.id!==y.id){let $=u.current.get(T.id);$&&$.length>0&&ot.set(T.id,$)}}}let jt=ie.size>1;console.log(`[Popmelt] Submit: ${ie.size} page(s), ${Me.size} screenshot(s), pages: [${[...ie.keys()].join(", ")}], cached: [${[...p.current.keys()].join(", ")}]`);let gr=jt?Me:Me.get(v)??Me,m=W.map(y=>y.id),S=i.styleModifications.filter(y=>!y.captured).map(y=>y.selector),j=Qi(i.activeColor),g=`_pending_${Date.now()}`,E={annotationIds:m,styleSelectors:S,color:i.activeColor,threadId:void 0};try{let y=JSON.parse(localStorage.getItem(ht)||"{}");y[g]=E,localStorage.setItem(ht,JSON.stringify(y))}catch{}ve(y=>({...y,[g]:E}));try{let{jobId:y,threadId:B}=await ga(gr,nn,c,j,b,P.id,ot.size>0?ot:void 0,si());for(let J of ot.keys())u.current.delete(J);for(let J of ie.keys())p.current.delete(J);let T={...E,threadId:B};try{let J=JSON.parse(localStorage.getItem(ht)||"{}");delete J[g],J[y]=T,localStorage.setItem(ht,JSON.stringify(J))}catch{}ve(J=>{let{[g]:K,...V}=J;return{...V,[y]:T}}),a({type:"MARK_CAPTURED"}),B&&m.length>0&&a({type:"SET_ANNOTATION_THREAD",payload:{ids:m,threadId:B}});let $=i.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),N=(($?.[1]?parseFloat($[1]):29)+60)%360;return a({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${N})`}),!0}catch(y){try{let B=JSON.parse(localStorage.getItem(ht)||"{}");delete B[g],localStorage.setItem(ht,JSON.stringify(B))}catch{}return ve(B=>{let{[g]:T,...$}=B;return $}),console.error("[Pare] Failed to send to bridge:",y),!1}},[i.annotations,i.styleModifications,i.spacingTokenChanges,i.activeColor,a,c,b,P.id,v,o]),Yt=Bt(async()=>{if(pt){lt(pt);return}try{let{jobId:x,threadId:W}=await wa(c,b,P.id);tt(x),mt(W);let re={annotationIds:[],styleSelectors:[],color:"#6b7280",threadId:W,kind:"synthesize"};ve(ie=>({...ie,[x]:re})),lt(W)}catch(x){console.error("[Popmelt] Failed to start synthesize:",x)}},[c,b,P.id,pt]),tn=Bt(async()=>{ne(null),We(null),lt(null);try{let{jobId:x,threadId:W}=await Ca(c,b,P.id);ne(x),We(W);let re={annotationIds:[],styleSelectors:[],color:Nr,threadId:W,kind:"synthesize_evals"};ve(ie=>({...ie,[x]:re})),lt(W)}catch(x){console.error("[Popmelt] Failed to start eval synthesis:",x)}},[c,b,P.id]),On=Bt(async x=>{let W=l.current;if(W){$t(re=>({...re,[x.id]:"_pending_"}));try{let ie=(await xr(document.body,W,[],{dpr:1}))[0];if(!ie){$t(Ne=>{let{[x.id]:xe,...Oe}=Ne;return Oe});return}let{jobId:Me,threadId:_e}=await xa(x.id,ie,{url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollX:window.scrollX,scrollY:window.scrollY},c,b,P.id,si());if($t(Ne=>({...Ne,[x.id]:Me})),_e){Dn(xe=>new Set(xe).add(_e));let Ne={annotationIds:[],styleSelectors:[],color:Nr,threadId:_e,kind:"run_eval"};ve(xe=>({...xe,[Me]:Ne})),lt(_e)}}catch(re){$t(ie=>{let{[x.id]:Me,..._e}=ie;return _e}),console.error("[Popmelt] Failed to run eval:",re)}}},[c,b,P.id]),Gn=Bt(async(x,W,re)=>{let ie=Object.values(po.current).find(Oe=>Oe.threadId===x)?.color??i.annotations.find(Oe=>Oe.threadId===x)?.color??i.activeColor,Me=i.annotations.filter(Oe=>Oe.threadId===x&&(Oe.status==="waiting_input"||Oe.status==="resolved"||Oe.status==="needs_review")),_e=Me.map(Oe=>Oe.id),Ne=`_pending_reply_${Date.now()}`,xe={annotationIds:_e,styleSelectors:[],color:ie,threadId:x};try{let Oe=JSON.parse(localStorage.getItem(ht)||"{}");Oe[Ne]=xe,localStorage.setItem(ht,JSON.stringify(Oe))}catch{}ve(Oe=>({...Oe,[Ne]:xe}));try{let Oe=Qi(i.activeColor),{jobId:nn}=await Ea(x,W,c,Oe,b,P.id,re,si()),ot={...xe};try{let jt=JSON.parse(localStorage.getItem(ht)||"{}");delete jt[Ne],jt[nn]=ot,localStorage.setItem(ht,JSON.stringify(jt))}catch{}ve(jt=>{let{[Ne]:gr,...m}=jt;return{...m,[nn]:ot}}),Me.length>0&&a({type:"SET_ANNOTATION_STATUS",payload:{ids:_e,status:"in_flight"}}),s.dismissQuestion(x)}catch(Oe){try{let nn=JSON.parse(localStorage.getItem(ht)||"{}");delete nn[Ne],localStorage.setItem(ht,JSON.stringify(nn))}catch{}ve(nn=>{let{[Ne]:ot,...jt}=nn;return jt}),console.error("[Pare] Failed to send reply:",Oe)}},[i.activeColor,i.annotations,c,s.dismissQuestion,a,b,P.id]),Tn=en(new Set);Tt(()=>{for(let x of s.pendingQuestions){if(Tn.current.has(x.jobId))continue;Tn.current.add(x.jobId);let W=x.annotationIds&&x.annotationIds.length>0?x.annotationIds:void 0;!W&&x.threadId&&(W=i.annotations.filter(re=>re.threadId===x.threadId).map(re=>re.id)),W&&W.length>0&&a({type:"SET_ANNOTATION_QUESTION",payload:{ids:W,question:x.question,threadId:x.threadId}})}},[s.pendingQuestions,a,i.annotations]);let Oo=co(()=>{if(s.activeJobId&&s.activeJobId in O)return O[s.activeJobId].color;let x=Object.values(O);return x.length>0?x[x.length-1].color:void 0},[s.activeJobId,O]),Vt=Bt(x=>{lt(x)},[]),pr=Bt(x=>{Dn(W=>new Set(W).add(x)),vn.current=Nr,lt(x)},[]),xo=Bt(x=>{let W=O[x],re=W?.threadId||Pt.current.get(x);re&&(vn.current=W?.kind==="synthesize_evals"||W?.kind==="run_eval"?Nr:W?.color??null,lt(re))},[O]),to=Bt(x=>{if(!x){Gt(null);return}let W=De.current.get(x);W&&W.length>0?Gt(new Set(W)):Gt(null)},[]),So=Bt(async x=>{try{let W=x?`${c}/cancel?jobId=${x}`:`${c}/cancel`;await ko(W,{method:"POST"})}catch{}},[c]),fr=Bt(async()=>{ae("restarting"),me("Restarting bridge");let x=await Ui(c,ci,2e4);if(x.ok){C(x.status.version??ci),ae("ok"),me(x.status.version?`Bridge restarted on ${x.status.version}`:"Bridge restarted"),k(W=>W+1);return}C(x.status?.version??h),ae("error"),me(x.error)},[h,c]),wo=co(()=>{if(!nt)return null;for(let x of Object.values(O))if(x.threadId===nt&&x.kind)return x.kind;return nt===pt?"synthesize":nt===de?"synthesize_evals":Cn.has(nt)?"run_eval":null},[nt,O,pt,de,Cn]),Mn=wo==="synthesize_evals"||wo==="run_eval",Bo=wo==="synthesize";Tt(()=>{(i.activeTool==="model"&&nt&&!Bo||i.activeTool==="eval"&&nt&&!Mn)&<(null)},[i.activeTool,nt,Bo,Mn]);let H=Bt(()=>{a({type:"SET_TOOL",payload:"eval"}),Re(x=>x+1),lt(null)},[a]),z=en(null);Tt(()=>{i.isAnnotating?z.current&&(lt(z.current),z.current=null):nt&&(z.current=nt,lt(null))},[i.isAnnotating]);let q=co(()=>{if(!nt)return null;for(let[x,W]of Object.entries(O))if(W.threadId===nt)return x;for(let[x,W]of Object.entries(s.activeJobThreads))if(W===nt)return x;return null},[nt,O,s.activeJobThreads]),oe=nt?i.annotations.find(x=>x.threadId===nt):void 0,pe=co(()=>q?s.events.filter(x=>x.data.jobId===q):km,[q,s.events.length]),Se=co(()=>Mn?Nr:oe?.color??vn.current??i.activeColor,[Mn,oe?.color,i.activeColor]),ke=oe?i.annotations.indexOf(oe)+1:void 0;Tt(()=>{if(Mn)return;let x=oe?.color??vn.current;nt&&x&&a({type:"SET_COLOR",payload:x})},[nt,Mn]);let[he,yt]=St(!1),[Lt,pn]=St(0),Nt=en(null),Ve=Bt(x=>{x?(Nt.current&&(clearTimeout(Nt.current),Nt.current=null),yt(!0)):Nt.current=setTimeout(()=>{yt(!1),Nt.current=null},150)},[]),Ft=Bt(()=>{pn(x=>x+1),s.clearEvents(),lt(null),Xn(new Set),So()},[s.clearEvents,So]);Tt(()=>()=>{Nt.current&&clearTimeout(Nt.current)},[]);let[Bn,yn]=St(!1);Tt(()=>{yn(!0)},[]);let In=co(()=>({isEnabled:t}),[t]);return!t||!Bn?Fr(da.Provider,{value:In,children:e}):Fc(da.Provider,{value:In,children:[e,Fr(Jl,{state:i,dispatch:a,onScreenshot:fo,inFlightAnnotationIds:hn,activeAnnotationIds:dn,queuePositionMap:Jt,inFlightStyleSelectors:En,inFlightSelectorColors:un,onAttachImages:Zt,onReply:s.isConnected?Gn:void 0,onViewThread:s.isConnected?Vt:void 0,onCloseThread:x=>{lt(null),x&&Xn(W=>new Set(W).add(x))},onModelComponentsAdd:s.isConnected?Q:void 0,onModelComponentFocus:s.isConnected?we:void 0,onModelComponentHover:ze,modelComponentNames:Le,modelPanelHoveredComponent:rt,modelSpacingTokenHover:$e,highlightedAnnotationIds:Nn,focusedThreadAnnotationId:oe?.id,externalCanvasRef:l,toolbarRef:d}),Fr(Rc,{children:Fc(Mc,{children:[Fr(wc,{state:i,dispatch:a,onScreenshot:fo,onSendToClaude:s.isConnected?Mt:void 0,hasActiveJobs:Object.keys(O).length>0||s.activeJobIds.length>0,activeJobColor:Oo,onCrosshairHover:Ve,onClear:Ft,provider:b,onProviderChange:s.isConnected&&F.length>1?fe:void 0,availableProviders:F,modelIndex:D,modelCount:se.length,modelLabel:P.label,onModelChange:s.isConnected?ge:void 0,onViewThread:s.isConnected?Vt:void 0,isThreadPanelOpen:nt!==null&&!Bo&&!Mn,mcpStatus:w,bridgeUrl:c,isBridgeConnected:s.isConnected,packageVersion:ci,bridgeVersion:h,bridgeRestartState:M,bridgeRestartMessage:Fe,onBridgeRestart:fr,modelSelectedComponent:Qe,modelCanvasHoveredComponent:Ce,onModelComponentHover:ut,onSpacingTokenHover:X,onModifySpacingToken:s.isConnected?Ee:void 0,onDeleteSpacingToken:s.isConnected?et:void 0,modelRefreshKey:Wt,onModelComponentAdded:je,onModelComponentRemoved:st,onSynthesizeRules:s.isConnected&&b!=="copilot"?Yt:void 0,isSynthesizing:Ke!==null,onSynthesizeEvals:s.isConnected&&b!=="copilot"?tn:void 0,isSynthesizingEvals:te!==null,onRunEval:s.isConnected&&b!=="copilot"?On:void 0,onViewEvalRunThread:pr,runningEvalIds:Object.keys(Ht),evalRefreshKey:qe,toolbarRef:d,snapPosition:ft,onSnapPositionChange:Ze}),nt&&Fr(_c,{threadId:nt,bridgeUrl:c,accentColor:Se,isStreaming:q!==null,isQueued:q!==null&&!s.activeJobIds.includes(q),queuePosition:q&&!s.activeJobIds.includes(q)?(()=>{let x=new Set(s.activeJobIds),W=Object.keys(O).filter(ie=>!x.has(ie)),re=W.indexOf(q);return re>=0?`(${re+1}/${W.length})`:void 0})():void 0,streamingEvents:pe,onClose:()=>lt(null),onReply:Gn,onCancel:q?()=>So(q):void 0,lastError:s.lastErrorByJob?.[q??""]??(s.lastCompletedJobId&&Pt.current.get(s.lastCompletedJobId)===nt?s.lastErrorByJob?.[s.lastCompletedJobId]:void 0),toolbarRef:d,currentModel:P.id,currentProvider:b,annotationNumber:ke,annotationText:oe?.text,onOpenEvals:nt===de?H:void 0,preferredSide:Mn?"left":"right",modal:!Mn},`${nt}:${Mn?"eval":"default"}`),Fr(Tc,{bridge:s,bridgeUrl:c,inFlightJobs:O,isVisible:he||s.lastResponseText!==null||s.activeJobIds.length>0,onHover:Ve,clearSignal:Lt,onReply:Gn,onViewThread:Vt,onClickJob:xo,onCancel:So,onHoverJob:to,isConnected:s.isConnected,dismissedThreadIds:uo,snapPosition:ft})]})})]})}function Lm(){let e=Em(da);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{Rm as PopmeltProvider,Lm as usePopmelt};
|