@popmelt.com/core 0.8.3 → 0.8.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 +52 -52
- package/dist/canvas.mjs +1 -1
- package/dist/chunk-3TS7MVTZ.mjs +1 -0
- package/dist/chunk-RBFQCZQP.mjs +1 -0
- package/dist/cli.mjs +54 -54
- package/dist/dev-server-rQIWJcSX.d.mts +26 -0
- package/dist/index.d.mts +7 -5
- package/dist/index.mjs +27 -27
- package/dist/plugin-astro.d.mts +8 -7
- package/dist/plugin-astro.mjs +1 -1
- package/dist/plugin-next.mjs +1 -1
- package/dist/plugin-vite.d.mts +4 -7
- package/dist/plugin-vite.mjs +1 -1
- package/dist/server-7UMGXB6S.mjs +421 -0
- package/dist/server.d.mts +7 -3
- package/dist/server.mjs +53 -53
- package/package.json +18 -5
- package/dist/server-2X6UD5RQ.mjs +0 -421
package/dist/index.mjs
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{createContext as qy,useCallback as on,useContext as Zy,useEffect as Ut,useMemo as Wo,useRef as Rn,useState as Ht}from"react";import{useCallback as mc,useEffect as fp,useSyncExternalStore as gp}from"react";var Zn="http://localhost:1111";function ec(){return typeof window<"u"?window.__POPMELT_PROJECT_ID__??null:null}function dp(e={}){let t=ec();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,dp(t))}function no(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))}function tc(e,t){t?.reasoningEffort&&e.append("reasoningEffort",t.reasoningEffort),t?.serviceTier&&e.append("serviceTier",t.serviceTier)}async function nc(e=Zn){try{let t=await no(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch{return null}}async function Yo(e=Zn){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 Ql(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 up(e){return Yo(e)}async function ba(e,t){if(e&&e!=="http://localhost:1111")try{let u=new URL(e),d=await up(e);if(!d&&!t)return null;if(!(!d&&t)){if(!(d&&t&&d.projectId!==t)){if(d?.projectId&&!t)return null;if(d)return{url:e,port:parseInt(u.port,10)||1111,projectId:d.projectId}}}}catch{if(!t)return null}let i=typeof window<"u"?window.location.origin:null,s=await Ql(1111);if(s){if(t&&s.projectId===t)return{url:"http://localhost:1111",port:1111,projectId:s.projectId};if(s.devOrigin&&i&&s.devOrigin===i&&(t||!s.projectId))return{url:"http://localhost:1111",port:1111,projectId:s.projectId}}let a=Array.from({length:8},(u,d)=>{let p=1112+d;return Ql(p).then(f=>f?{status:f,port:p}:null)}),l=(await Promise.all(a)).filter(u=>u!==null),c=[];s&&c.push({port:1111,devOrigin:s.devOrigin,projectId:s.projectId});for(let u of l)c.push({port:u.port,devOrigin:u.status.devOrigin,projectId:u.status.projectId});if(t){let u=c.find(d=>d.projectId===t);if(u)return{url:`http://localhost:${u.port}`,port:u.port,projectId:u.projectId}}if(i){let u=c.find(d=>d.devOrigin===i&&(t||!d.projectId));if(u)return{url:`http://localhost:${u.port}`,port:u.port,projectId:u.projectId}}return c.length===1&&!c[0].projectId?{url:`http://localhost:${c[0].port}`,port:c[0].port,projectId:c[0].projectId}:null}async function ys(e=Zn,t,n=-1){try{let o=await no(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return o.ok?await o.json():null}catch{return null}}async function oc(e,t,n=Zn,o,r,i,s,a,l){let c=new FormData;if(e instanceof Map){let d=!0;for(let[p,f]of e){let m=encodeURIComponent(p);c.append(`screenshot-${m}`,f,`screenshot-${m}.webp`),d&&(c.append("screenshot",f,"screenshot.webp"),d=!1)}d&&c.append("screenshot",new Blob([],{type:"image/webp"}),"screenshot.webp")}else c.append("screenshot",e,"screenshot.webp");if(c.append("feedback",t),o&&c.append("color",o),r&&c.append("provider",r),i&&c.append("model",i),tc(c,l),a&&c.append("sourceId",a),s)for(let[d,p]of s)for(let f=0;f<p.length;f++)c.append(`image-${d}-${f}`,p[f],`image-${d}-${f}.webp`);let u=await no(`${n}/send`,{method:"POST",body:c},3e4);if(!u.ok){let d=await u.text();throw new Error(`Bridge returned ${u.status}: ${d}`)}return u.json()}async function rc(e,t=Zn){let n=await no(`${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 ic(e,t=Zn){let n=await no(`${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 va(e,t,n=Zn){let o=await no(`${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 sc(e,t=Zn){let n=await no(`${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 gi(e=Zn){try{let t=await no(`${e}/model`,{},5e3);return t.ok?(await t.json()).model??null:null}catch{return null}}async function ac(e=Zn){let t=await no(`${e}/evals`,{},5e3);return t.ok?t.json():{version:1,updatedAt:0,cases:[]}}async function bs(e,t,n=Zn){let o=await no(`${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 lc(e,t,n=Zn){return bs(e,{status:t},n)}async function cc(e,t,n,o=Zn,r,i,s,a){let l=new FormData;l.append("screenshot",t,"eval-run.webp"),l.append("feedback",JSON.stringify(n)),r&&l.append("provider",r),i&&l.append("model",i),tc(l,a),s&&l.append("sourceId",s);let c=await no(`${o}/evals/${encodeURIComponent(e)}/run`,{method:"POST",body:l},3e4);if(!c.ok){let u=await c.text();throw new Error(`Bridge returned ${c.status}: ${u}`)}return c.json()}function pp(e){return new Promise(t=>setTimeout(t,e))}async function xa(e=Zn,t,n=15e3){let o=Date.now();try{let l=await no(`${e}/restart`,{method:"POST"},5e3);if(!l.ok){let c=await l.text().catch(()=>"");return{ok:!1,error:c?`Bridge restart returned ${l.status}: ${c}`:`Bridge restart returned ${l.status}`,elapsedMs:Date.now()-o}}}catch(l){return{ok:!1,error:l instanceof Error?l.message:"Bridge restart request failed",elapsedMs:Date.now()-o}}let r=null,i=e,s=ec();for(;Date.now()-o<n;){if(await pp(350),r=await Yo(i),!r?.ok&&s){let l=await ba(e,s);l?.url&&(i=l.url,r=await Yo(i))}if(r?.ok&&!(s&&r.projectId!==s)&&!(t&&r.version!==t))return{ok:!0,status:r,elapsedMs:Date.now()-o,bridgeUrl:i}}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 dc(e=Zn){return(await xa(e)).ok}async function uc(e=Zn,t,n,o){let r=await no(`${e}/model/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n,...o})},1e4);if(!r.ok){let i=await r.text();throw new Error(`Bridge returned ${r.status}: ${i}`)}return r.json()}async function pc(e=Zn,t,n,o){let r=await no(`${e}/evals/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n,...o})},1e4);if(!r.ok){let i=await r.text();throw new Error(`Bridge returned ${r.status}: ${i}`)}return r.json()}async function fc(e,t,n=Zn,o,r,i,s,a,l){let c;if(s&&s.length>0){let u=new FormData,d=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"});u.append("screenshot",d,"screenshot.png"),u.append("feedback",JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:a,...l}));for(let p=0;p<s.length;p++)u.append(`image-reply-${p}`,s[p],`reply-image-${p}.webp`);c=await no(`${n}/reply`,{method:"POST",body:u},3e4)}else c=await no(`${n}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:a,...l})},3e4);if(!c.ok){let u=await c.text();throw new Error(`Bridge returned ${c.status}: ${u}`)}return c.json()}async function gc(e,t=Zn){let n=await no(`${t}/thread/${encodeURIComponent(e)}`,{method:"DELETE"},5e3);if(!n.ok&&n.status!==404){let o=await n.text();throw new Error(`Bridge returned ${n.status}: ${o}`)}return n.json()}var zt=globalThis.__POPMELT_BRIDGE_CONNECTION__??(globalThis.__POPMELT_BRIDGE_CONNECTION__={}),Ss=zt.sourceId??(typeof localStorage<"u"?localStorage.getItem("popmelt-source-id"):null)??(typeof crypto<"u"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2));zt.sourceId=Ss;try{typeof localStorage<"u"&&localStorage.setItem("popmelt-source-id",Ss)}catch{}function ws(){return Ss}var bc={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},zr=zt.store??{...bc};zt.store=zr;var xs=zt.listeners??new Set;zt.listeners=xs;var Uo=zt.activeEs??null,vs=zt.activeBridgeUrl??null,Ko=null,hi=zt.connectionGeneration??0,hc=zt.expectedProjectId??null,Wi=new Set,$r=new Map,Xo={};function Nr(e,t){if(!e)return!1;if(Wi.has(e)){let o=$r.get(e);return o||(o=[],$r.set(e,o)),o.push({type:t.type??"",data:t}),!0}let n=Xo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function mp(e,t,n){let o=()=>n!==hi;for(let r of t){if(o())return;Wi.add(r),$r.set(r,[])}await Promise.all(t.map(async r=>{try{let i=await ys(e,r);if(o())return;let s=$r.get(r)??[];if(i){if(_n(a=>{let l={...a.jobResponses,[r]:i.accumulated.response},c={...a.jobThinking,[r]:i.accumulated.thinking},u=[...a.events];for(let d of i.events)d.type==="done"||d.type==="error"||u.push({type:d.type,data:d,timestamp:Date.now()});return{...a,jobResponses:l,jobThinking:c,currentResponse:r===a.activeJobId?i.accumulated.response:a.currentResponse,currentThinking:r===a.activeJobId?i.accumulated.thinking:a.currentThinking,events:u}}),Xo[r]=i.currentSeq,!i.jobActive){let a=i.events.find(l=>l.type==="done"||l.type==="error");a&&Sa(a.type,a,r)}for(let a of s)typeof a.data.seq=="number"&&a.data.seq<=i.currentSeq||Sa(a.type,a.data,r)}else for(let a of s)Sa(a.type,a.data,r)}finally{Wi.delete(r),$r.delete(r)}}))}function Sa(e,t,n){if(e==="delta"){let o=t.text||"";_n(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||"";_n(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 Xo[n],_n(o=>{let r=o.activeJobIds.filter(c=>c!==n),i={...o.jobResponses},s={...o.jobThinking},a=i[n];delete i[n],delete s[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:s,lastCompletedJobId:n,lastResponseText:a||o.currentResponse||t.responseText||null,lastThreadId:t.threadId??null,...n===o.activeJobId?{currentResponse:l&&i[l]||"",currentThinking:l&&s[l]||""}:{},events:[...o.events,{type:"done",data:t,timestamp:Date.now()}]}});else if(e==="error"){delete Xo[n];let o=t.message??"";_n(r=>{let i=r.activeJobIds.filter(a=>a!==n),s=i.length>0?r.status:"error";return{...r,status:s,activeJobIds:i,lastCompletedJobId:n,lastErrorByJob:o?{...r.lastErrorByJob,[n]:o}:r.lastErrorByJob,events:[...r.events,{type:"error",data:t,timestamp:Date.now()}]}})}else _n(o=>({...o,events:[...o.events,{type:e,data:t,timestamp:Date.now()}]}))}var Io=zt.discoveredBridgeUrl??null,wo=zt.discoveredBridgeProjectId??null,Sr=null,mi=null;function hp(e){let t=e??null;if(hc!==t){Uo&&(Uo.close(),Uo=null,zt.activeEs=null),Ko&&(clearTimeout(Ko),Ko=null),vs=null,zt.activeBridgeUrl=null,Io=null,wo=null,zt.discoveredBridgeUrl=null,zt.discoveredBridgeProjectId=null,Sr=null,mi=null,Wi.clear(),$r.clear();for(let n of Object.keys(Xo))delete Xo[n];hc=t,zt.expectedProjectId=t,hi+=1,zt.connectionGeneration=hi,_n(()=>({...bc}))}}async function vc(e,t){return Io&&(t?wo===t:!wo)?Io:(!t&&wo&&(Io=null,wo=null,zt.discoveredBridgeUrl=Io,zt.discoveredBridgeProjectId=wo),t&&wo&&wo!==t&&(Io=null,wo=null,zt.discoveredBridgeUrl=Io,zt.discoveredBridgeProjectId=wo),Sr&&mi===(t??null)||(mi=t??null,Sr=ba(e,t).then(n=>(Io=n?.url??null,wo=n?.projectId??t??null,zt.discoveredBridgeUrl=Io,zt.discoveredBridgeProjectId=wo,Sr=null,mi=null,Io)).catch(()=>(Sr=null,mi=null,null))),Sr)}function xc(){return Io}async function Sc(e,t){Io=null,wo=null,zt.discoveredBridgeUrl=null,zt.discoveredBridgeProjectId=null,Sr=null,mi=null;let n=await vc(e,t);return n&&wa(n),n}function yc(){return zr}function yp(e){return xs.add(e),()=>{xs.delete(e)}}function _n(e){zr=e(zr),zt.store=zr;for(let t of xs)t()}function bp(){return typeof window<"u"?window.__POPMELT_PROJECT_ID__??null:null}function wa(e){if(Uo&&Uo.readyState!==EventSource.CLOSED&&vs===e)return;Uo&&(Uo.close(),Uo=null,zt.activeEs=null),Ko&&(clearTimeout(Ko),Ko=null),vs=e,zt.activeBridgeUrl=vs;let t=++hi;zt.connectionGeneration=hi;let n=new URLSearchParams({sourceId:Ss}),o=bp();o&&n.set("projectId",o);let r=new EventSource(`${e}/events?${n.toString()}`);Uo=r,zt.activeEs=Uo;let i=()=>t!==hi;r.addEventListener("connected",()=>{i()||Yo(e).then(s=>{if(i())return;let a=s?.activeJobs??(s?.activeJob?[s.activeJob]:[]),l=new Set(a.map(m=>m.id)),c=s?.recentJobs??[],u=new Map(c.map(m=>[m.id,m])),d=a.length>0;_n(m=>{let E={...m.lastErrorByJob},x=m.activeJobIds.filter(L=>!l.has(L));for(let L of x){let A=u.get(L);A?.status==="error"&&A.error&&(E[L]=A.error)}let S=m.activeJobIds.filter(L=>l.has(L));for(let L of l)S.includes(L)||S.push(L);let B={};for(let L of a)L.threadId&&(B[L.id]=L.threadId);return{...m,isConnected:!0,status:d?"streaming":x.length>0||m.status==="disconnected"?"idle":m.status,activeJobId:d?a[a.length-1].id:S.length>0?S[S.length-1]:null,activeJobIds:S,activeJobThreads:B,lastErrorByJob:E,lastCompletedJobId:x.length>0?x[x.length-1]:m.lastCompletedJobId}});let p=zr.activeJobIds.filter(m=>!l.has(m)),f=[...Array.from(l),...p];f.length>0&&mp(e,f,t).catch(()=>{})})}),r.addEventListener("job_started",s=>{if(i())return;let a=JSON.parse(s.data),l=a.jobId;if(Nr(l,a))return;let c=a.threadId;_n(u=>({...u,status:"streaming",activeJobId:l,activeJobIds:u.activeJobIds.includes(l)?u.activeJobIds:[...u.activeJobIds,l],activeJobThreads:c?{...u.activeJobThreads,[l]:c}:u.activeJobThreads,jobResponses:{...u.jobResponses,[l]:u.jobResponses[l]??""},jobThinking:{...u.jobThinking,[l]:u.jobThinking[l]??""},currentResponse:u.jobResponses[l]??"",currentThinking:u.jobThinking[l]??"",lastResponseText:null,lastThreadId:null,events:[...u.events,{type:"job_started",data:a,timestamp:Date.now()}]}))}),r.addEventListener("delta",s=>{if(i())return;let a=JSON.parse(s.data),l=a.jobId;if(Nr(l,a))return;let c=a.text||"";_n(u=>({...u,jobResponses:l?{...u.jobResponses,[l]:(u.jobResponses[l]||"")+c}:u.jobResponses,currentResponse:!l||l===u.activeJobId?u.currentResponse+c:u.currentResponse,events:[...u.events,{type:"delta",data:a,timestamp:Date.now()}]}))}),r.addEventListener("thinking",s=>{if(i())return;let a=JSON.parse(s.data),l=a.jobId;if(Nr(l,a))return;let c=a.text||"";_n(u=>({...u,jobThinking:l?{...u.jobThinking,[l]:(u.jobThinking[l]||"")+c}:u.jobThinking,currentThinking:!l||l===u.activeJobId?u.currentThinking+c:u.currentThinking,events:[...u.events,{type:"thinking",data:a,timestamp:Date.now()}]}))}),r.addEventListener("tool_use",s=>{if(i())return;let a=JSON.parse(s.data),l=a.jobId;Nr(l,a)||_n(c=>({...c,events:[...c.events,{type:"tool_use",data:a,timestamp:Date.now()}]}))}),r.addEventListener("done",s=>{if(i())return;let a=JSON.parse(s.data),l=a.jobId;Nr(l,a)||(l&&delete Xo[l],_n(c=>{let u=l?c.activeJobIds.filter(x=>x!==l):c.activeJobIds,d={...c.jobResponses},p={...c.jobThinking},f={...c.activeJobThreads},m=l?d[l]:void 0;l&&(delete d[l],delete p[l],delete f[l]);let E=l===c.activeJobId?u.length>0?u[u.length-1]:null:c.activeJobId;return{...c,activeJobIds:u,activeJobId:E,jobResponses:d,jobThinking:p,lastCompletedJobId:l??c.activeJobId,lastResponseText:m||c.currentResponse||a.responseText||null,lastThreadId:a.threadId??null,...l===c.activeJobId?{currentResponse:E&&d[E]||"",currentThinking:E&&p[E]||""}:{},events:[...c.events,{type:"done",data:a,timestamp:Date.now()}]}}))}),r.addEventListener("question",s=>{if(i())return;let a=JSON.parse(s.data),l=a.jobId;Nr(l,a)||_n(c=>({...c,pendingQuestions:[...c.pendingQuestions,{jobId:a.jobId,threadId:a.threadId,question:a.question,annotationIds:a.annotationIds,timestamp:Date.now()}],events:[...c.events,{type:"question",data:a,timestamp:Date.now()}]}))}),r.addEventListener("capabilities_changed",()=>{i()||_n(s=>({...s,capabilitiesVersion:s.capabilitiesVersion+1}))}),r.addEventListener("queue_drained",()=>{if(!i()){for(let s of Object.keys(Xo))delete Xo[s];Wi.clear(),$r.clear(),_n(s=>({...s,status:s.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}}),r.addEventListener("error",s=>{if(!i()){if(r.readyState===EventSource.CLOSED)_n(a=>({...a,isConnected:!1,status:"disconnected"})),Ko&&(clearTimeout(Ko),Ko=null),Ko=setTimeout(()=>{Yo(e).then(a=>{a&&wa(e)})},5e3);else if(s instanceof MessageEvent){let a=JSON.parse(s.data),l=a.jobId??null;if(Nr(l??void 0,a))return;l&&delete Xo[l];let c=a.message??"";_n(u=>{let d=l?u.activeJobIds.filter(f=>f!==l):u.activeJobIds,p=d.length>0?u.status:"error";return{...u,status:p,activeJobIds:d,lastCompletedJobId:l??u.activeJobId,lastErrorByJob:l&&c?{...u.lastErrorByJob,[l]:c}:u.lastErrorByJob,events:[...u.events,{type:"error",data:a,timestamp:Date.now()}]}})}}}),r.onerror=()=>{i()||r.readyState===EventSource.CLOSED&&_n(s=>({...s,isConnected:!1,status:"disconnected"}))}}function wc(e="http://localhost:1111",t=!0,n){let o=gp(yp,yc,yc);fp(()=>{hp(n),t&&vc(e,n).then(s=>{s&&Yo(s).then(a=>{a&&(!n||a.projectId===n)&&wa(s)})})},[e,t,n]);let r=mc(()=>{_n(()=>({...zr,events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),i=mc(s=>{_n(a=>({...a,pendingQuestions:a.pendingQuestions.filter(l=>l.threadId!==s)}))},[]);return{...o,clearEvents:r,dismissQuestion:i}}import{useEffect as vp,useReducer as xp}from"react";var Sp={isAnnotating:!1,activeTool:"inspector",activeColor:"oklch(0.628 0.258 29)",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],textModifications:[],domModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function yi(){return Math.random().toString(36).substring(2,9)}function Ec(e){return e.status?e:e.captured?{...e,status:"in_flight"}:{...e,status:"pending"}}function eo(e){return{...e,undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,textModifications:e.textModifications,domModifications:e.domModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]}}function wp(e,t){return{...e,isAnnotating:t}}function Ep(e,t){return{...e,activeTool:t,inspectedElement:null}}function Cp(e,t){return{...e,activeColor:t}}function Mp(e,t){return{...e,strokeWidth:t}}function Tp(e,t){return{...e,currentPath:[t]}}function kp(e,t){return{...e,currentPath:[...e.currentPath,t]}}function Ip(e){return{...e,currentPath:[]}}function Rp(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return{...e,currentPath:[]};let n={id:yi(),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{...eo(e),annotations:[...e.annotations,n],currentPath:[]}}function Lp(e,t){let n={id:t.id??yi(),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:eo(e),annotations:[...e.annotations,n]}}function Ap(e,t){return{...eo(e),annotations:e.annotations.map(o=>o.id===t.id?{...o,text:t.text,...t.imageCount!=null?{imageCount:t.imageCount}:{}}:o)}}function Pp(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 Bp(e,t){let n=eo(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 Dp(e,t){let n=t.saveUndo?eo(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 a=t.delta.x,l=t.delta.y;return{...i,points:i.points.map(c=>({x:c.x+a,y:c.y+l}))}})}}function Op(e,t){let n=t.saveUndo?eo(e):e,o=e.annotations.find(s=>s.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 s=t.points,a=Math.min(s[0].x,s[1].x),l=Math.max(s[0].y,s[1].y),c=o.points[0],u=o.points[o.points.length-1],d=Math.min(c.x,u.x),p=Math.max(c.y,u.y);r=a-d,i=l-p}return{...n,annotations:e.annotations.map(s=>s.id===t.id?{...s,points:t.points}:o.groupId&&s.groupId===o.groupId&&s.type==="text"?{...s,points:s.points.map(a=>({x:a.x+r,y:a.y+i}))}:s)}}function _p(e,t){return{...eo(e),annotations:[...e.annotations,...t.annotations.map(Ec)]}}function Hp(e,t){let n=new Set,o=[];for(let r of t.annotations)n.has(r.id)||(n.add(r.id),o.push(Ec(r)));return{...e,annotations:o}}function Fp(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return{...e,annotations:t?.annotations||[],styleModifications:t?.styleModifications||[],textModifications:t?.textModifications||[],domModifications:t?.domModifications||[],spacingTokenMods:t?.spacingTokenMods||[],undoStack:e.undoStack.slice(0,-1),redoStack:[...e.redoStack,{annotations:e.annotations,styleModifications:e.styleModifications,textModifications:e.textModifications,domModifications:e.domModifications,spacingTokenMods:e.spacingTokenMods}]}}function Np(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return{...e,annotations:t?.annotations||[],styleModifications:t?.styleModifications||[],textModifications:t?.textModifications||[],domModifications:t?.domModifications||[],spacingTokenMods:t?.spacingTokenMods||[],redoStack:e.redoStack.slice(0,-1),undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,textModifications:e.textModifications,domModifications:e.domModifications,spacingTokenMods:e.spacingTokenMods}]}}function zp(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(s=>s!==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 $p(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 Wp(e){let t=typeof window<"u"?window.location.pathname:"/";return{...e,annotations:e.annotations.map(n=>({...n,captured:!0,status:n.status==="pending"||!n.status?"in_flight":n.status})),styleModifications:e.styleModifications.map(n=>!n.pathname||n.pathname===t?{...n,captured:!0}:n),textModifications:e.textModifications.map(n=>!n.pathname||n.pathname===t?{...n,captured:!0}:n),domModifications:e.domModifications.map(n=>!n.pathname||n.pathname===t?{...n,captured:!0}:n),spacingTokenChanges:e.spacingTokenChanges.map(n=>({...n,captured:!0}))}}function jp(e){return{...e,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,textModifications:[],domModifications:[],spacingTokenChanges:[],spacingTokenMods:[]}}function Vp(e,t){return{...e,inspectedElement:t}}function Gp(e,t){let{selector:n,element:o,property:r,original:i,modified:s}=t,a=typeof window<"u"?window.location.pathname:"/",l=e.styleModifications.findIndex(c=>c.selector===n&&(!c.pathname||c.pathname===a));if(i===s&&l<0)return e;if(l>=0){let c=e.styleModifications[l];if(c.captured){let m=eo(e),E=m.styleModifications.map((x,S)=>S===l?{...x,changes:[{property:r,original:i,modified:s}],captured:!1,pathname:a}:x);return{...m,styleModifications:E}}let u=c.changes.findIndex(m=>m.property===r),d,p=e;if(u>=0){let m=c.changes[u];s===m.original?d=c.changes.filter((E,x)=>x!==u):d=c.changes.map((E,x)=>x===u?{...E,modified:s}:E)}else{if(i===s)return e;p=eo(e),d=[...c.changes,{property:r,original:i,modified:s}]}if(d.length===0)return{...p,styleModifications:p.styleModifications.filter((m,E)=>E!==l)};let f=p.styleModifications.map((m,E)=>E===l?{...m,changes:d}:m);return{...p,styleModifications:f}}else{let c=eo(e),u={selector:n,element:o,changes:[{property:r,original:i,modified:s}],pathname:a};return{...c,styleModifications:[...c.styleModifications,u]}}}function Jp(e,t){let{selector:n,durableSelector:o,element:r,changes:i}=t,s=typeof window<"u"?window.location.pathname:"/",a=i.filter(u=>u.original!==u.modified);if(a.length===0)return e;let l=eo(e),c=l.styleModifications.findIndex(u=>u.selector===n&&(!u.pathname||u.pathname===s));if(c>=0){let u=l.styleModifications[c],d=u.captured?[]:[...u.changes];for(let p of a){let f=d.findIndex(m=>m.property===p.property);f>=0?p.modified===d[f].original?d=d.filter((m,E)=>E!==f):d=d.map((m,E)=>E===f?{...m,modified:p.modified}:m):d.push(p)}return d.length===0?{...l,styleModifications:l.styleModifications.filter((p,f)=>f!==c)}:{...l,styleModifications:l.styleModifications.map((p,f)=>f===c?{...p,changes:d,captured:!1,pathname:s}:p)}}else return{...l,styleModifications:[...l.styleModifications,{selector:n,durableSelector:o,element:r,changes:a,pathname:s}]}}function Yp(e,t){let{selector:n,property:o}=t,r=typeof window<"u"?window.location.pathname:"/",i=eo(e),s=i.styleModifications.map(a=>a.selector!==n||a.pathname&&a.pathname!==r?a:{...a,changes:a.changes.filter(l=>l.property!==o)}).filter(a=>a.changes.length>0);return{...i,styleModifications:s}}function Up(e){return e.styleModifications.length===0?{...e,inspectedElement:null}:{...eo(e),styleModifications:[],inspectedElement:null}}function Kp(e,t){return{...e,styleModifications:t}}function Xp(e,t,n,o){return e.selector===t&&(!e.pathname||e.pathname===o)&&e.textNodePath.length===n.length&&e.textNodePath.every((r,i)=>r===n[i])}function qp(e,t){let{selector:n,durableSelector:o,element:r,textNodePath:i,original:s,modified:a}=t,l=typeof window<"u"?window.location.pathname:"/",c=e.textModifications.findIndex(d=>Xp(d,n,i,l));if(s===a&&c<0)return e;if(c>=0){let d=e.textModifications[c],p=d.captured?eo(e):e,f=d.captured?s:d.original;return a===f?{...p,textModifications:p.textModifications.filter((m,E)=>E!==c)}:{...p,textModifications:p.textModifications.map((m,E)=>E===c?{...m,durableSelector:o,element:r,original:f,modified:a,captured:!1,pathname:l}:m)}}let u=eo(e);return{...u,textModifications:[...u.textModifications,{selector:n,durableSelector:o,element:r,textNodePath:i,original:s,modified:a,pathname:l}]}}function Zp(e,t){return{...e,textModifications:t}}function Qp(e,t){let n=eo(e),o=n.domModifications.findIndex(r=>r.id===t.id);return o>=0?{...n,domModifications:n.domModifications.map((r,i)=>i===o?{...t,captured:!1}:r)}:{...n,domModifications:[...n.domModifications,t]}}function ef(e,t){return{...e,domModifications:t}}function tf(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 nf(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 of(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 rf(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 sf(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 af(e,t){let{linkedSelectors:n,styleSelectors:o}=t,r=new Set(n),i=new Set(o),s=typeof window<"u"?window.location.pathname:"/",a=new Set,l=new Set;for(let m of e.annotations)m.linkedSelector&&r.has(m.linkedSelector)&&(a.add(m.id),m.groupId&&l.add(m.groupId));for(let m of e.annotations)m.groupId&&l.has(m.groupId)&&a.add(m.id);let c=e.annotations.filter(m=>!a.has(m.id)),u=e.styleModifications.filter(m=>!i.has(m.selector)||m.pathname&&m.pathname!==s),d=e.domModifications.filter(m=>!i.has(m.selector)||m.pathname&&m.pathname!==s);if(c.length===e.annotations.length&&u.length===e.styleModifications.length&&d.length===e.domModifications.length)return e;let p=e.selectedAnnotationIds.filter(m=>!a.has(m)),f=e.inspectedElement&&i.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return{...e,annotations:c,styleModifications:u,domModifications:d,selectedAnnotationIds:p,lastSelectedId:p.length>0?p[p.length-1]:null,inspectedElement:f}}function lf(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 cf(e,t){return{...e,spacingTokenChanges:t}}function df(e,t){let n=eo(e),o=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),r;if(o>=0){let i=e.spacingTokenMods[o],s={...t,originalValue:i.originalValue,originalPx:i.originalPx};r=e.spacingTokenMods.map((a,l)=>l===o?s:a)}else r=[...e.spacingTokenMods,t];return{...n,spacingTokenMods:r}}function uf(e,t){let n=eo(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,s={tokenPath:t.tokenPath,originalValue:r,currentValue:"__deleted__",targets:o>=0?e.spacingTokenMods[o].targets:[],originalPx:i,currentPx:0},a;return o>=0?a=e.spacingTokenMods.map((l,c)=>c===o?s:l):a=[...e.spacingTokenMods,s],{...n,spacingTokenMods:a}}var pf={SET_ANNOTATING:wp,SET_TOOL:Ep,SET_COLOR:Cp,SET_STROKE_WIDTH:Mp,START_PATH:Tp,CONTINUE_PATH:kp,CANCEL_PATH:Ip,FINISH_PATH:Rp,ADD_TEXT:Lp,UPDATE_TEXT:Ap,UPDATE_TEXT_SIZE:Pp,DELETE_ANNOTATION:Bp,MOVE_ANNOTATION:Dp,RESIZE_ANNOTATION:Op,PASTE_ANNOTATIONS:_p,RESTORE_ANNOTATIONS:Hp,UNDO:Fp,REDO:Np,SELECT_ANNOTATION:zp,UPDATE_ANNOTATION_COLOR:$p,MARK_CAPTURED:Wp,CLEAR:jp,SELECT_ELEMENT:Vp,MODIFY_STYLE:Gp,MODIFY_STYLES_BATCH:Jp,CLEAR_STYLE:Yp,CLEAR_ALL_STYLES:Up,RESTORE_STYLE_MODIFICATIONS:Kp,MODIFY_TEXT_CONTENT:qp,RESTORE_TEXT_MODIFICATIONS:Zp,MODIFY_DOM_STRUCTURE:Qp,RESTORE_DOM_MODIFICATIONS:ef,UPDATE_LINKED_POSITIONS:tf,CLEANUP_ORPHANED:af,SET_ANNOTATION_STATUS:nf,SET_ANNOTATION_THREAD:of,SET_ANNOTATION_QUESTION:rf,APPLY_RESOLUTIONS:sf,ADD_SPACING_TOKEN_CHANGE:lf,RESTORE_SPACING_TOKEN_CHANGES:cf,MODIFY_SPACING_TOKEN:df,DELETE_SPACING_TOKEN:uf};function ff(e,t){let n=pf[t.type];return n?n(e,t.payload):e}function Cc(){let[e,t]=xp(ff,Sp);return vp(()=>{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 gf}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 mf(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function hf(){return window.location.pathname}function bi(){return gf(mf,hf,()=>"/")}var Mc="popmelt-toolbar-snap-position";function Wr(e){return e.startsWith("top-")}function jr(e){return e.endsWith("-right")}function ji(e){return e.endsWith("-center")}function Tc(){try{let e=localStorage.getItem(Mc);if(e&&yf(e))return e}catch{}return"bottom-right"}function kc(e){try{localStorage.setItem(Mc,e)}catch{}}function yf(e){return["bottom-right","bottom-center","bottom-left","top-right","top-center","top-left"].includes(e)}function Ic(e,t,n){let o=Wr(e)?16:n-16-54;return ji(e)?{position:"fixed",top:o,left:t/2,transform:"translateX(-50%)"}:jr(e)?{position:"fixed",top:o,right:16,left:"auto"}:{position:"fixed",top:o,left:16,right:"auto"}}function Rc(e,t,n){let r=Wr(e)?{top:82}:{bottom:82},i;return ji(e)?i={left:t/2,transform:"translateX(-50%)"}:jr(e)?i={right:16}:i={left:16},{position:"fixed",...r,...i}}function Lc(e,t,n){let o=Wr(e),r=o?{top:78}:{bottom:78},i,s;return ji(e)?(i={left:"50%",transform:"translateX(-50%)"},s="center"):jr(e)?(i={right:16},s="flex-end"):(i={left:16},s="flex-start"),{position:"fixed",...r,...i,zIndex:9999,display:"flex",flexDirection:"column",alignItems:s}}function Es(e){let t=Wr(e),n=jr(e)||ji(e);return{position:"fixed",top:t&&n?82:16,right:16,bottom:!t&&n?82:16}}function Ac(e,t,n){let r=Wr(e),i,s;jr(e)||ji(e)?(i=t-16,s=i-326):(s=16,i=s+326);let a=r?82:n-16-54-12;return{left:s,right:i,y:a}}var Pc=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"];function Cs(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 Ea(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 Ms(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 Bc(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 mn(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(s=>!s.startsWith("_")&&s.length<30).slice(0,2);r.length>0&&(o+="."+r.map(s=>CSS.escape(s)).join("."));let i=n.parentElement;if(i){let s=Array.from(i.children).filter(a=>a.tagName===n.tagName);if(s.length>1){let a=s.indexOf(n)+1;o+=`:nth-of-type(${a})`}}t.unshift(o),n=i}return t.join(" > ")}function hn(e){try{return document.querySelector(e)}catch{return null}}function Ts(e,t=0){let n=Ea(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)),s=n[i],a=Ms(s.fiber)??e;return{name:s.name,path:o,depthIndex:i,rootElement:a}}function Dc(e,t){let n=Ea(e),o=t.toLowerCase(),r=-1;for(let i=n.length-1;i>=0;i--){let s=n[i].name;if(s===t){let a=Ms(n[i].fiber)??e;return{name:t,path:n.map(l=>l.name),depthIndex:i,rootElement:a}}if(r===-1){let a=s.toLowerCase();(a.length>=4&&o.includes(a)||o.length>=4&&a.includes(o))&&(r=i)}}if(r>=0){let i=Ms(n[r].fiber)??e;return{name:t,path:n.map(s=>s.name),depthIndex:r,rootElement:i}}return null}function vi(e){let t=xi(),n=[],o=new Set,r=t.currentNode;for(;r=t.nextNode();){let i=Dc(r,e);i&&!o.has(i.rootElement)&&(o.add(i.rootElement),n.push(i))}return n}function Ca(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),o=xi(),r=new Set,i=o.currentNode;for(;(i=o.nextNode())&&n.size>0;)for(let s of n){let a=Dc(i,s);if(!a||r.has(a.rootElement))continue;r.add(a.rootElement);let l=a.rootElement.getBoundingClientRect();t.set(s,l.top+window.scrollY),n.delete(s);break}for(let s of n)t.set(s,1/0);return t}function xi(){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 Hn(e){let t={selector:Bc(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=Oc(e);n&&n.length>0&&n.length<200&&(t.textContent=n);let o={};for(let s of e.attributes)s.name.startsWith("data-")&&(o[s.name]=s.value);Object.keys(o).length>0&&(t.dataAttributes=o);let r=Cs(e);r&&(t.reactComponent=r.name);let i=bf(e);return i&&(t.context=i),t}function Oc(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function wr(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 bf(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 _c(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 s of i){let a=s.x-o,l=s.y-r;if(a<0||l<0||a>window.innerWidth||l>window.innerHeight)continue;let c=wr(a,l);c&&!t.has(c)&&(t.add(c),n.push(Hn(c)))}return n.slice(0,3)}function Ma(e){if(e.length===0)return[];let t=e.map(o=>o.x),n=e.map(o=>o.y);return _c({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function $n(e,t){return e.style.getPropertyValue(t)!==""}function vf(e,t=30){if(e<=0)return[];let n=[],o=xi(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let s=i,a=s.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let l=getComputedStyle(s);!$n(s,"padding-top")&&Math.abs((parseFloat(l.paddingTop)||0)-e)<r&&n.push({element:s,property:"padding-top"}),!$n(s,"padding-bottom")&&Math.abs((parseFloat(l.paddingBottom)||0)-e)<r&&n.length<t&&n.push({element:s,property:"padding-bottom"}),!$n(s,"padding-left")&&Math.abs((parseFloat(l.paddingLeft)||0)-e)<r&&n.length<t&&n.push({element:s,property:"padding-left"}),!$n(s,"padding-right")&&Math.abs((parseFloat(l.paddingRight)||0)-e)<r&&n.length<t&&n.push({element:s,property:"padding-right"}),!$n(s,"margin-top")&&Math.abs((parseFloat(l.marginTop)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-top"}),!$n(s,"margin-bottom")&&Math.abs((parseFloat(l.marginBottom)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-bottom"}),!$n(s,"margin-left")&&Math.abs((parseFloat(l.marginLeft)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-left"}),!$n(s,"margin-right")&&Math.abs((parseFloat(l.marginRight)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-right"});let c=l.display;if((c.includes("flex")||c.includes("grid"))&&n.length<t){let u=$n(s,"gap"),d=parseFloat(l.gap)||0,p=parseFloat(l.rowGap)||0,f=parseFloat(l.columnGap)||0;!u&&Math.abs(d-e)<r?n.push({element:s,property:"gap"}):!$n(s,"row-gap")&&Math.abs(p-e)<r?n.push({element:s,property:"row-gap"}):!$n(s,"column-gap")&&Math.abs(f-e)<r&&n.push({element:s,property:"column-gap"})}}return n}function Ta(e,t=30){if(e<=0)return[];let n=[],o=xi(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let s=i,a=s.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let l=getComputedStyle(s),c=parseFloat(l.borderTopWidth)||0,u=parseFloat(l.borderRightWidth)||0,d=parseFloat(l.borderBottomWidth)||0,p=parseFloat(l.borderLeftWidth)||0,f=s.clientWidth,m=s.clientHeight,E=parseFloat(l.paddingTop)||0;!$n(s,"padding-top")&&Math.abs(E-e)<r&&n.push({x:a.left+p,y:a.top+c,width:f,height:e,direction:"vertical",property:"padding-top"});let x=parseFloat(l.paddingBottom)||0;!$n(s,"padding-bottom")&&Math.abs(x-e)<r&&n.length<t&&n.push({x:a.left+p,y:a.top+c+m-e,width:f,height:e,direction:"vertical",property:"padding-bottom"});let S=parseFloat(l.paddingLeft)||0;!$n(s,"padding-left")&&Math.abs(S-e)<r&&n.length<t&&n.push({x:a.left+p,y:a.top+c,width:e,height:m,direction:"horizontal",property:"padding-left"});let B=parseFloat(l.paddingRight)||0;!$n(s,"padding-right")&&Math.abs(B-e)<r&&n.length<t&&n.push({x:a.left+p+f-e,y:a.top+c,width:e,height:m,direction:"horizontal",property:"padding-right"});let L=parseFloat(l.marginTop)||0;!$n(s,"margin-top")&&Math.abs(L-e)<r&&n.length<t&&n.push({x:a.left,y:a.top-e,width:a.width,height:e,direction:"vertical",property:"margin-top"});let A=parseFloat(l.marginBottom)||0;!$n(s,"margin-bottom")&&Math.abs(A-e)<r&&n.length<t&&n.push({x:a.left,y:a.bottom,width:a.width,height:e,direction:"vertical",property:"margin-bottom"});let C=parseFloat(l.marginLeft)||0;!$n(s,"margin-left")&&Math.abs(C-e)<r&&n.length<t&&n.push({x:a.left-e,y:a.top,width:e,height:a.height,direction:"horizontal",property:"margin-left"});let U=parseFloat(l.marginRight)||0;!$n(s,"margin-right")&&Math.abs(U-e)<r&&n.length<t&&n.push({x:a.right,y:a.top,width:e,height:a.height,direction:"horizontal",property:"margin-right"});let ee=l.display;if((ee.includes("flex")||ee.includes("grid"))&&n.length<t&&!$n(s,"gap")){let O=Array.from(s.children).filter(D=>{let g=getComputedStyle(D);return g.display!=="none"&&g.position!=="absolute"&&g.position!=="fixed"});if(O.length>=2)for(let D=0;D<O.length-1&&n.length<t;D++){let g=O[D].getBoundingClientRect(),v=O[D+1].getBoundingClientRect(),b=v.top-g.bottom;Math.abs(b-e)<r&&b>.5&&n.push({x:Math.min(g.left,v.left),y:g.bottom,width:Math.max(g.right,v.right)-Math.min(g.left,v.left),height:b,direction:"vertical",property:"gap"});let ie=v.left-g.right;Math.abs(ie-e)<r&&ie>.5&&n.push({x:g.right,y:Math.min(g.top,v.top),width:ie,height:Math.max(g.bottom,v.bottom)-Math.min(g.top,v.top),direction:"horizontal",property:"gap"})}}}return n}function ks(e){return typeof e=="string"?{value:e}:e}var Fc={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 Hc(e,t){let n=Fc[t];return n?n.includes(e):!1}function xf(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 Sf(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"},s=n.slice(0,n.indexOf("-",o+1)>0?n.indexOf("-",o+1):o);return i[s]??i[r]??null}function ka(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let r=[],i=xi(),s=i.currentNode;for(;(s=i.nextNode())&&r.length<t;){let a=s,l=a.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let c=a.className;if(typeof c=="string")for(let u of e.bindings){if(!xf(c,u))continue;let d=Sf(u);if(d&&!(e.property&&!Hc(d,e.property))){r.push({element:a,property:d});break}}}return r}let o=vf(n,t*2);return e.property?o.filter(r=>Hc(r.property,e.property)).slice(0,t):o.slice(0,t)}function Ia(e,t=30){let n=ka(e,t),o=[];for(let r of n){let i=r.element,s=i.getBoundingClientRect(),a=getComputedStyle(i),l=parseFloat(a.borderTopWidth)||0,c=parseFloat(a.borderRightWidth)||0,u=parseFloat(a.borderLeftWidth)||0,d=i.clientWidth,p=i.clientHeight;switch(r.property){case"padding-top":{let f=parseFloat(a.paddingTop)||0;o.push({x:s.left+u,y:s.top+l,width:d,height:f,direction:"vertical",property:r.property});break}case"padding-bottom":{let f=parseFloat(a.paddingBottom)||0;o.push({x:s.left+u,y:s.top+l+p-f,width:d,height:f,direction:"vertical",property:r.property});break}case"padding-left":{let f=parseFloat(a.paddingLeft)||0;o.push({x:s.left+u,y:s.top+l,width:f,height:p,direction:"horizontal",property:r.property});break}case"padding-right":{let f=parseFloat(a.paddingRight)||0;o.push({x:s.left+u+d-f,y:s.top+l,width:f,height:p,direction:"horizontal",property:r.property});break}case"margin-top":{let f=parseFloat(a.marginTop)||0;o.push({x:s.left,y:s.top-f,width:s.width,height:f,direction:"vertical",property:r.property});break}case"margin-bottom":{let f=parseFloat(a.marginBottom)||0;o.push({x:s.left,y:s.bottom,width:s.width,height:f,direction:"vertical",property:r.property});break}case"margin-left":{let f=parseFloat(a.marginLeft)||0;o.push({x:s.left-f,y:s.top,width:f,height:s.height,direction:"horizontal",property:r.property});break}case"margin-right":{let f=parseFloat(a.marginRight)||0;o.push({x:s.right,y:s.top,width:f,height:s.height,direction:"horizontal",property:r.property});break}case"gap":case"row-gap":case"column-gap":{let f=Array.from(i.children).filter(m=>{let E=getComputedStyle(m);return E.display!=="none"&&E.position!=="absolute"&&E.position!=="fixed"});for(let m=0;m<f.length-1&&o.length<t;m++){let E=f[m].getBoundingClientRect(),x=f[m+1].getBoundingClientRect(),S=x.top-E.bottom;S>.5&&o.push({x:Math.min(E.left,x.left),y:E.bottom,width:Math.max(E.right,x.right)-Math.min(E.left,x.left),height:S,direction:"vertical",property:"gap"});let B=x.left-E.right;B>.5&&o.push({x:E.right,y:Math.min(E.top,x.top),width:B,height:Math.max(E.bottom,x.bottom)-Math.min(E.top,x.top),direction:"horizontal",property:"gap"})}break}}}return o}function Nc(e,t){let n=new Set,o=Vi(t);for(let r of e){let i=$c[r.property];if(!i)continue;let s=r.element.className;if(typeof s=="string")for(let a of i){let l=`${a}-${o}`;for(let c of s.split(/\s+/)){let u=c.lastIndexOf(":"),d=u>=0?c.slice(u+1):c;if(d===l){n.add(d);break}}}}return[...n]}function zc(e){let t=new Set;for(let n of e)for(let[o,r]of Object.entries(Fc))if(r.includes(n.property)){t.add(o);break}if(t.size===1)return[...t][0]}function Ra(e,t,n){if(t===n)return e;let o=Vi(t),r=Vi(n);return e.map(i=>{let s=i.lastIndexOf("-");if(s<0)return i;let a=i.slice(0,s),l=i.slice(s+1);return l===o||l===`[${t}px]`?`${a}-${r}`:i})}var wf={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 Vi(e){return wf[e]??`[${e}px]`}var $c={"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 Ef(e,t,n,o){let r=$c[t];if(!r)return null;let i=Vi(n);for(let s of r){let a=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+s+"-(?:"+Cf(i)+"|\\["+n+"px\\]))(?:\\s|$)"),l=e.match(a);if(l?.[1]){let c=Vi(o),u=l[1].lastIndexOf(":"),d=u>=0?l[1].slice(0,u+1):"";return{matched:l[1],suggested:`${d}${s}-${c}`}}}return null}function Cf(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function Wc(e,t,n){let o=new Set,r=[];for(let i of e){let s=mn(i.element),a=`${s}::${i.property}`;if(o.has(a))continue;o.add(a);let l=Cs(i.element),c=i.element.className||"",u=Ef(c,i.property,t,n);r.push({selector:s,reactComponent:l?.name,className:c,property:i.property,matchedClass:u?.matched,suggestedClass:u?.suggested})}return r}function Is(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function Si(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 s=i.style.getPropertyValue(t);if(s)return s;let a=i.style[n];if(a)return a}}catch{}}catch{}return null}function Rs(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function Vr(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function Mf(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 gr(e){let t=Array.from(e.children).filter(l=>{if(!(l instanceof HTMLElement))return!1;let c=window.getComputedStyle(l);return c.display!=="none"&&c.position!=="absolute"&&c.position!=="fixed"});if(t.length<2)return[];let n=[],o=e.getBoundingClientRect(),i=window.getComputedStyle(e).flexDirection,s=i==="column"||i==="column-reverse",a=6;for(let l=0;l<t.length-1;l++){let c=t[l].getBoundingClientRect(),u=t[l+1].getBoundingClientRect();if(u.left>c.right+.5&&n.push({axis:"column",x:c.right,y:o.top,w:u.left-c.right,h:o.height}),u.top>c.bottom+.5&&n.push({axis:"row",x:o.left,y:c.bottom,w:o.width,h:u.top-c.bottom}),!(u.left>c.right+.5)&&!(u.top>c.bottom+.5))if(s){let d=(c.bottom+u.top)/2;n.push({axis:"row",x:o.left,y:d-a/2,w:o.width,h:a})}else{let d=(c.right+u.left)/2;n.push({axis:"column",x:d-a/2,y:o.top,w:a,h:o.height})}}return Mf(n)}function La(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 wi(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 Gr(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 Aa(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function Ei(e){let t=document.createRange(),n=!1;for(let u of e.childNodes)u.nodeType===Node.TEXT_NODE&&(u.textContent||"").trim().length>0&&(n||(t.setStart(u,0),n=!0),t.setEnd(u,u.textContent?.length??0));if(!n)return null;let o=t.getBoundingClientRect(),r=window.getComputedStyle(e),i=parseFloat(r.fontSize)||16,s=parseFloat(r.lineHeight);isNaN(s)&&(s=i*1.2);let a=Math.max(1,t.getClientRects().length),l=Math.max(o.height,a*s),c=(l-o.height)/2;return new DOMRect(o.x,o.y-c,o.width,l)}function Gi(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 ut(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function jc(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function Ls(e){for(let t of e){let n=hn(t.selector);if(!n&&t.durableSelector&&(n=hn(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)ut(n,o.property,o.modified)}}function As(e){for(let t of e){let n=hn(t.selector);if(n)for(let o of t.changes)jc(n,o.property,o.original)}}function Vc(e){let t=hn(e.selector);if(!t&&e.durableSelector&&(t=hn(e.durableSelector),t)){let n=e.selector.match(/\[data-pm="([^"]+)"\]/)?.[1];n&&t.setAttribute("data-pm",n)}return t}function Gc(e,t){let n=e;for(let o of t)n=n?.childNodes[o]??null;return n?.nodeType===Node.TEXT_NODE?n:null}function Ps(e){for(let t of e){let n=Vc(t);if(!n)continue;let o=Gc(n,t.textNodePath);o&&(o.nodeValue=t.modified)}}function Bs(e){for(let t of e){let n=Vc(t);if(!n)continue;let o=Gc(n,t.textNodePath);o&&(o.nodeValue=t.original)}}function Jr(e,t){if(!e)return null;let n=hn(e);if(!n&&t&&(n=hn(t),n)){let o=e.match(/\[data-pm="([^"]+)"\]/)?.[1];o&&n.setAttribute("data-pm",o)}return n}function Tf(e){e.removeAttribute("data-pm"),e.querySelectorAll("[data-pm]").forEach(t=>t.removeAttribute("data-pm"))}function kf(e,t){let n=t.match(/\[data-pm="([^"]+)"\]/)?.[1];n&&e.setAttribute("data-pm",n)}function Pa(e,t,n){let o=Array.from(e.children).filter(i=>i!==t),r=Math.max(0,Math.min(n,o.length));e.insertBefore(t,o[r]??null)}function Ds(e){for(let t of e){let n=Jr(t.targetParentSelector,t.targetParentDurableSelector);if(!n)continue;if(t.operation==="move"){let i=Jr(t.selector,t.durableSelector);if(!i||i===n||i.contains(n))continue;Pa(n,i,t.targetIndex);continue}if(Jr(t.selector,t.durableSelector))continue;let o=Jr(t.sourceSelector,t.sourceDurableSelector);if(!o)continue;let r=o.cloneNode(!0);r instanceof Element&&(Tf(r),kf(r,t.selector),Pa(n,r,t.targetIndex))}}function Os(e){for(let t of[...e].reverse()){if(t.operation==="copy"){Jr(t.selector,t.durableSelector)?.remove();continue}let n=Jr(t.selector,t.durableSelector),o=Jr(t.originalParentSelector,t.originalParentDurableSelector);!n||!o||n===o||n.contains(o)||Pa(o,n,t.originalIndex??o.children.length)}}function Jc(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){Jc(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&If(r.style,t,n,o)}}}function If(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 s=t.getPropertyValue(i).trim();Yc(s)&&o.push({name:i,value:s,usage:`var(${i})`})}}}var _s=null,Rf=5e3;function Ba(){if(_s&&Date.now()-_s.timestamp<Rf)return _s.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{Jc(i.cssRules||i.rules,n,t,e)}catch{}}catch{}let o=document.documentElement.style;for(let i=0;i<o.length;i++){let s=o[i];if(s?.startsWith("--")&&!t.has(s)){t.add(s);let a=n.getPropertyValue(s).trim();Yc(a)&&e.push({name:s,value:a,usage:`var(${s})`})}}let r=e.sort((i,s)=>i.name.localeCompare(s.name));return _s={variables:r,timestamp:Date.now()},r}function Yc(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 Er(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}import{domToCanvas as Lf}from"modern-screenshot";var Uc="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";function Af(e){if(typeof window>"u")return!1;try{let t=new URL(e,window.location.href);return t.protocol!=="http:"&&t.protocol!=="https:"?!1:t.origin!==window.location.origin}catch{return!1}}function Da(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function Oa(e,t=[],n,o,r=[],i=[]){let s=new Map,a=[];for(let c of e)if(c.groupId){let u=s.get(c.groupId)||[];u.push(c),s.set(c.groupId,u)}else a.push(c);let l=[];for(let[c,u]of s){let d=u.find(f=>f.type!=="text"),p=u.find(f=>f.type==="text");if(d){let f=d.linkedSelector||p?.linkedSelector,m=p?.imageCount||d.imageCount,E=d.pathname||p?.pathname;l.push({id:d.id,type:d.type,instruction:p?.text,...f?{linkedSelector:f}:{},...E?{pathname:E}:{},elements:d.elements||[],...m?{imageCount:m}:{}})}}for(let c of a)l.push({id:c.id,type:c.type,instruction:c.type==="text"?c.text:void 0,...c.linkedSelector?{linkedSelector:c.linkedSelector}:{},...c.pathname?{pathname:c.pathname}:{},elements:c.elements||[],...c.imageCount?{imageCount:c.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:l,styleModifications:t,...r.length>0?{textModifications:r}:{},...i.length>0?{domModifications:i}:{},...n?{inspectedElement:n}:{},...o&&o.length>0?{spacingTokenChanges:o}:{}}}function Pf(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 Bf(e,t){if(e.length===0)return[];let n=e.map(u=>({annotation:u,bounds:Pf(u)})).filter(u=>u.bounds!==null);if(n.length===0)return[];n.sort((u,d)=>u.bounds.minY-d.bounds.minY);let o=Math.min(...n.map(u=>u.bounds.minY)),r=Math.max(...n.map(u=>u.bounds.maxY));if(r-o<=t){let u=(o+r)/2,d=Math.max(0,u-t/2);return[{top:d,bottom:d+t,annotations:e}]}let i=[],s=50,a=Math.max(0,o-s),l=[],c=a;for(let{annotation:u,bounds:d}of n){let p=d.maxY+s;if(p-a<=t)l.push(u),c=Math.max(c,p);else{if(l.length>0){let f=(a+c)/2,m=Math.max(0,f-t/2);i.push({top:m,bottom:m+t,annotations:l})}a=Math.max(0,d.minY-s),l=[u],c=d.maxY+s}}if(l.length>0){let u=(a+c)/2,d=Math.max(0,u-t/2);i.push({top:d,bottom:d+t,annotations:l})}return i}function Df(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 Of(e,t,n,o,r){if(e.save(),e.scale(o,o),r)for(let i of t){let s=r.get(i.id);if(!s)continue;let a=s.y-n;e.fillStyle=i.color,e.globalAlpha=.05,e.fillRect(s.x,a,s.width,s.height),e.globalAlpha=1,e.strokeStyle=i.color,e.lineWidth=1,e.setLineDash([2,4]),e.strokeRect(s.x,a,s.width,s.height),e.setLineDash([])}for(let i of t){let s=i.points.map(a=>({x:a.x,y:a.y-n}));switch(e.strokeStyle=i.color,e.fillStyle=i.color,e.lineWidth=i.strokeWidth,e.lineCap="round",e.lineJoin="round",i.type){case"freehand":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y);for(let a=1;a<s.length;a++)e.lineTo(s[a].x,s[a].y);e.stroke();break;case"line":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y),e.lineTo(s[s.length-1].x,s[s.length-1].y),e.stroke();break;case"rectangle":{if(s.length<2)break;let a=s[0],l=s[s.length-1],c=Math.min(a.x,l.x),u=Math.min(a.y,l.y),d=Math.abs(l.x-a.x),p=Math.abs(l.y-a.y);e.strokeRect(c,u,d,p);break}case"circle":{if(s.length<2)break;let a=s[0],l=s[s.length-1],c=(a.x+l.x)/2,u=(a.y+l.y)/2,d=Math.abs(l.x-a.x)/2,p=Math.abs(l.y-a.y)/2;e.beginPath(),e.ellipse(c,u,d,p,0,0,Math.PI*2),e.stroke();break}case"text":{if(!i.text||s.length<1)break;let a=s[0],l=i.fontSize||16;e.font=`${l}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=i.color;let u=(i.imageCount&&i.imageCount>0?`[${i.imageCount} image${i.imageCount>1?"s":""}] ${i.text}`:i.text).split(`
|
|
3
|
-
`),d=l*1.2,p=4,f=0;for(let m of u)f=Math.max(f,e.measureText(m).width);e.fillRect(a.x-p,a.y-p,f+p*2,u.length*d+p*2),e.fillStyle="#ffffff",u.forEach((m,E)=>{e.fillText(m,a.x,a.y+l+E*d)});break}}}e.restore()}async function Ci(e,t,n=[],o){try{let r=o?.dpr??(window.devicePixelRatio||1),i=window.innerWidth,s=window.innerHeight,a=n.filter(d=>(d.status??"pending")==="pending");console.log("[Screenshot] Starting capture with",a.length,"active annotations (filtered",n.length-a.length,"captured)");let l=Df(a),c=Bf(a,s);if(c.length===0){let d=await Kc(e,[],window.scrollY,i,s,r,l);return d?[d]:[]}let u=[];for(let d=0;d<c.length;d++){let p=c[d],f=await Kc(e,p.annotations,p.top,i,s,r,l);f?u.push(f):console.warn(`[Screenshot] Region ${d+1} failed to capture`)}return console.log("[Screenshot] Capture complete"),u}catch(r){return console.error("[Screenshot] Capture failed:",r),[]}}async function Kc(e,t,n,o,r,i,s){try{let a=getComputedStyle(document.documentElement).backgroundColor,c=await Lf(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:a&&a!=="rgba(0, 0, 0, 0)"&&a!=="transparent"?a:"#ffffff",width:o,height:r,style:{transform:`translate(${-window.scrollX}px, ${-n}px)`},fetchFn:async p=>Af(p)?Uc:!1,fetch:{placeholderImage:Uc}}),u=document.createElement("canvas");u.width=o*i,u.height=r*i;let d=u.getContext("2d");return d?(d.drawImage(c,0,0,o*i,r*i,0,0,o*i,r*i),Of(d,t,n,i,s),new Promise(p=>{u.toBlob(f=>p(f),"image/webp",.8)})):null}catch(a){return console.error("Region capture failed:",a),null}}async function Ji(e){if(e.length===0)return null;if(e.length===1)return e[0];let t=await Promise.all(e.map(a=>new Promise((l,c)=>{let u=new Image;u.onload=()=>l(u),u.onerror=c,u.src=URL.createObjectURL(a)}))),n=t[0].width,o=t.reduce((a,l)=>a+l.height,0),r=document.createElement("canvas");r.width=n,r.height=o;let i=r.getContext("2d");if(!i)return null;let s=0;for(let a of t)i.drawImage(a,0,s),s+=a.height,URL.revokeObjectURL(a.src);return new Promise(a=>{r.toBlob(l=>a(l),"image/webp",.8)})}async function Xc(e,t,n,o,r){try{let i=Array.isArray(e)?e:[e];if(i.length===0)return!1;let s=await Ji(i);if(!s)return!1;let a=s;if(s.type!=="image/png"){let f=new Image,m=URL.createObjectURL(s);await new Promise(x=>{f.onload=()=>x(),f.src=m}),URL.revokeObjectURL(m);let E=document.createElement("canvas");E.width=f.naturalWidth,E.height=f.naturalHeight,E.getContext("2d").drawImage(f,0,0),a=await new Promise(x=>E.toBlob(S=>x(S),"image/png"))}let l={"image/png":a},c=t&&t.length>0,u=n&&n.length>0,d=o&&o.length>0,p=r&&r.length>0;if(c||u||d||p){let f=t?t.filter(m=>(m.status??"pending")==="pending"):[];if(f.length>0||u||d||p){let m=Oa(f,n||[],void 0,void 0,o||[],r||[]),E=new Blob([JSON.stringify(m,null,2)],{type:"text/plain"});l["text/plain"]=E}}return await navigator.clipboard.write([new ClipboardItem(l)]),!0}catch(i){return console.warn("Clipboard write failed:",i),!1}}var qc={name:"@popmelt.com/core",version:"0.8.3",description:"The design collaboration layer for AI coding agents",license:"PolyForm-Shield-1.0.0",author:"Popmelt <reb@popmelt.com> (https://popmelt.com)",homepage:"https://github.com/popmelt/core",bugs:{url:"https://github.com/popmelt/core/issues"},repository:{type:"git",url:"git+https://github.com/popmelt/core.git"},keywords:["ai","annotations","collaboration","devtools","react","visual-feedback"],bin:{popmelt:"dist/cli.mjs"},sideEffects:!1,engines:{node:">=18.0.0"},scripts:{build:"tsup",clean:"git clean -xdf .turbo node_modules dist",format:'prettier --check "**/*.{ts,tsx}"',lint:"eslint .",prepublishOnly:"pnpm run build",typecheck:"tsc --noEmit"},exports:{".":{source:"./src/index.ts",types:"./dist/index.d.mts",import:"./dist/index.mjs"},"./provider":{source:"./src/components/PopmeltProvider.tsx",types:"./dist/index.d.mts",import:"./dist/index.mjs"},"./server":{source:"./src/server/index.ts",types:"./dist/server.d.mts",import:"./dist/server.mjs"},"./canvas":{source:"./src/canvas/index.ts",import:"./dist/canvas.mjs"},"./next":{source:"./src/plugins/next.ts",import:"./dist/plugin-next.mjs",default:"./dist/plugin-next.mjs"},"./vite":{source:"./src/plugins/vite.ts",types:"./dist/plugin-vite.d.mts",import:"./dist/plugin-vite.mjs",default:"./dist/plugin-vite.mjs"},"./astro":{source:"./src/plugins/astro.ts",types:"./dist/plugin-astro.d.mts",import:"./dist/plugin-astro.mjs",default:"./dist/plugin-astro.mjs"}},files:["dist","LICENSE","README.md"],dependencies:{"modern-screenshot":"4.4.39"},peerDependencies:{"lucide-react":">=1.23.0",react:">=18.0.0","react-dom":">=18.0.0"},peerDependenciesMeta:{},devDependencies:{"@types/react":"19.1.0","@types/react-dom":"19.1.2",eslint:"^9.24.0","lucide-react":"^1.23.0",prettier:"^3.5.3",react:"19.1.0","react-dom":"19.1.0",tsup:"^8.5.1",typescript:"^5.8.3"}};var Hs=qc.version;import{useCallback as kn,useEffect as Gn,useMemo as Pi,useRef as tn,useState as Lt}from"react";import{useCallback as Mi,useRef as Nf}from"react";function _a(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let s=(r.x+i.x)/2,a=(r.y+i.y)/2,l=Math.abs(i.x-r.x)/2,c=Math.abs(i.y-r.y)/2;e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.ellipse(s,a,l,c,0,0,Math.PI*2),e.stroke()}function Ha(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 s=1;s<t.length-1;s++){let a=t[s],l=t[s+1];if(!a||!l)continue;let c=(a.x+l.x)/2,u=(a.y+l.y)/2;e.quadraticCurveTo(a.x,a.y,c,u)}e.lineTo(i.x,i.y),e.stroke()}}function Fa(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 Na(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let s=Math.min(r.x,i.x),a=Math.min(r.y,i.y),l=Math.abs(i.x-r.x),c=Math.abs(i.y-r.y);e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.strokeRect(s,a,l,c)}var Wn='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function Hf(e,t,n){if(!t||e.measureText(t).width<=n)return[t];let o=t.split(/\s+/),r=[],i="";for(let s of o){let a=i?i+" "+s:s;i&&e.measureText(a).width>n?(r.push(i),i=s):i=a}return i&&r.push(i),r.length>0?r:[t]}function Yi(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function Zc(e,t,n){let o=[];for(let r of t)o.push(...Hf(e,r,n));return o}function Ui(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 Ff(e,t,n){if(e===void 0||t===void 0||n.avoidLeft===void 0&&n.avoidRight===void 0)return!0;let o=typeof window<"u"?window.innerWidth:9999,r=n.avoidLeft??0,i=n.avoidRight??o;return e+t>r&&e<i}function za(e,t,n,o,r){let i=typeof window<"u"?window.innerHeight:9999,s=0,a=i;n&&Ff(o,r,n)&&(s=n.avoidTop??s,a=n.avoidBottom??a);let l=Math.max(s,a-t);return Math.max(s,Math.min(e,l))}function $a(e,t=12,n,o){let r=t*1.4+8,i=e.y-4,s=e.x-4,a=za(i,r,n,s,o);return a===i?e:{...e,y:a+4}}function Qc(e,t,n,o,r=12,i,s,a){if(!n)return;let l=r*1.4,c=n.replace(/\n/g," "),u=i!==void 0?i+". "+c:c;e.font=`${r}px ${Wn}`,e.textBaseline="middle";let d=s!==void 0?Math.min(400,Math.max(60,window.innerWidth-s-16)):400,p=Ui(e,u,d),f=e.measureText(p).width,m=$a(t,r,a,f+8);e.fillStyle=o,e.fillRect(m.x-4,m.y-4,f+8,l+8),e.fillStyle="#ffffff",e.fillText(p,m.x,m.y+l/2)}var ed=11,Wa=4,zf=`600 ${ed}px system-ui, -apple-system, sans-serif`;function ja(e,t,n){return e.map(o=>({x:o.x-t,y:o.y-n}))}function $f(e,t,n,o,r,i){let s=String(o);e.font=zf;let l=e.measureText(s).width+Wa*2,c=ed+Wa*2,u=t-l/2,d=n+i/2+2;e.fillStyle=r,e.fillRect(u,d,l,c),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(s,u+Wa,d+c/2)}function Wf(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 td(){let e=Nf(null),t=Mi(()=>{let a=e.current;if(!a)return;let l=a.getContext("2d");l&&l.clearRect(0,0,a.width,a.height)},[]),n=Mi((a,l,c,u)=>{let d=e.current;if(!d)return;let p=d.getContext("2d");if(!p)return;let m=(a.status??(a.captured?"in_flight":"pending"))==="pending"||c?a.color:"#999999";switch(a.type){case"freehand":Ha(p,a.points,m,a.strokeWidth);break;case"line":Fa(p,a.points,m,a.strokeWidth);break;case"rectangle":Na(p,a.points,m,a.strokeWidth);break;case"circle":_a(p,a.points,m,a.strokeWidth);break;case"text":a.text&&a.points[0]&&Qc(p,a.points[0],a.text,m,a.fontSize,l,a.points[0].x,u);break}},[]),o=Mi((a,l,c,u)=>{let d=e.current;if(!d||a.length<2)return;let p=d.getContext("2d");if(p)switch(l){case"freehand":Ha(p,a,c,u);break;case"line":Fa(p,a,c,u);break;case"rectangle":Na(p,a,c,u);break;case"circle":_a(p,a,c,u);break}},[]),r=Mi((a,l)=>{let c=e.current;if(!c||a.points.length<2)return;let u=c.getContext("2d");if(u){if(u.fillStyle="#ffffff",u.strokeStyle=a.color,u.lineWidth=1.5,a.type==="line"){let d=a.points[0],p=a.points[a.points.length-1];[d,p].forEach(f=>{u.beginPath(),u.arc(f.x,f.y,l/2,0,Math.PI*2),u.fill(),u.stroke()});return}if(a.type==="circle"){let d=a.points[0],p=a.points[a.points.length-1],f=Math.min(d.x,p.x),m=Math.max(d.x,p.x),E=Math.min(d.y,p.y),x=Math.max(d.y,p.y),S=(f+m)/2,B=(E+x)/2;[{x:S,y:E},{x:S,y:x},{x:f,y:B},{x:m,y:B}].forEach(A=>{u.beginPath(),u.rect(A.x-l/2,A.y-l/2,l,l),u.fill(),u.stroke()});return}if(a.type==="rectangle"||a.type==="freehand"){let d,p,f,m;if(a.type==="freehand")d=Math.min(...a.points.map(x=>x.x)),p=Math.max(...a.points.map(x=>x.x)),f=Math.min(...a.points.map(x=>x.y)),m=Math.max(...a.points.map(x=>x.y));else{let x=a.points[0],S=a.points[a.points.length-1];d=Math.min(x.x,S.x),p=Math.max(x.x,S.x),f=Math.min(x.y,S.y),m=Math.max(x.y,S.y)}[{x:d,y:f},{x:p,y:f},{x:d,y:m},{x:p,y:m}].forEach(x=>{u.beginPath(),u.rect(x.x-l/2,x.y-l/2,l,l),u.fill(),u.stroke()})}}},[]),i=Mi((a,l,c,u,d,p,f,m=0,E=0,x,S,B)=>{if(t(),a.forEach(L=>{let A={...L,points:ja(L.points,m,E)},C=x?.get(L.id),U=S?.has(L.id)??!1;n(A,C,U,B)}),l.length>0){let L=ja(l,m,E);o(L,c,u,d)}if(p&&p.length>0&&f){let A=e.current?.getContext("2d");for(let C of p){let U=a.find(ee=>ee.id===C);if(U){let ee={...U,points:ja(U.points,m,E)};if(r(ee,f),A&&U.type!=="text"&&x&&!(U.groupId&&a.some(O=>O.groupId===U.groupId&&O.type==="text"))){let O=x.get(U.id);if(O!==void 0){let D=Wf(ee,f);if(D){let v=(U.status??(U.captured?"in_flight":"pending"))==="pending"?U.color:"#999999";$f(A,D.x,D.y,O,v,f)}}}}}}},[t,n,o,r]),s=Mi(()=>{let a=e.current;if(!a)return;let l=window.devicePixelRatio||1;a.width=window.innerWidth*l,a.height=window.innerHeight*l;let c=a.getContext("2d");c&&c.scale(l,l)},[]);return{canvasRef:e,clearCanvas:t,drawAnnotation:n,drawCurrentPath:o,redrawAll:i,resizeCanvas:s}}import{useEffect as jf,useRef as Vf}from"react";function nd(){let e=Vf({shift:!1,cmd:!1});return jf(()=>{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 Gf}from"react";function od(e,t,n,o,r){Gf(()=>{let i=s=>{if(e){if(e.domEdit||e.linkedSelector)return;s.preventDefault(),s.stopPropagation();let l=s.deltaY>0?-2:2;t(c=>c?{...c,fontSize:Math.max(12,Math.min(72,c.fontSize+l))}:null);return}if(!n)return;s.preventDefault();let a=o.find(l=>l.id===n);if(a&&a.type==="text"&&!a.linkedSelector){let l=a.fontSize||12,c=s.deltaY>0?-2:2;r({type:"UPDATE_TEXT_SIZE",payload:{id:n,fontSize:l+c}})}};return window.addEventListener("wheel",i,{passive:!1}),()=>{window.removeEventListener("wheel",i)}},[n,e,o,r,t])}import{useEffect as Ga,useRef as Jf,useState as Ja}from"react";import{Fragment as Ki,jsx as yn,jsxs as Yr}from"react/jsx-runtime";var Cr=22,Xi=12,Ti=8,Yf=3,Uf=250,Fs=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Kf=3e3;function Xf(e){let t=e?.current?.getBoundingClientRect();return!t||typeof window>"u"?{}:t.top<window.innerHeight/2?{avoidTop:t.bottom+Ti,avoidLeft:t.left-Ti,avoidRight:t.right+Ti}:{avoidBottom:t.top-Ti,avoidLeft:t.left-Ti,avoidRight:t.right+Ti}}function qf(e,t,n){if(n.avoidLeft===void 0&&n.avoidRight===void 0)return!0;let o=typeof window<"u"?window.innerWidth:9999,r=n.avoidLeft??0,i=n.avoidRight??o;return e+t>r&&e<i}function Va(e,t,n){return qf(t,n,e)?e:{}}function Zf(e,t,n){let o=n.avoidTop!==void 0?`${n.avoidTop}px`:"0px",r=n.avoidBottom!==void 0?`${n.avoidBottom}px`:"100vh";return`translate(min(0px, calc(100vw - ${e} - 100%)), min(max(0px, calc(${o} - ${t})), calc(${r} - ${t} - 100%)))`}function rd(e,t,n){if(n.avoidTop===void 0&&n.avoidBottom===void 0)return e;let o=typeof window<"u"?window.innerHeight:9999,r=n.avoidTop??0,i=n.avoidBottom??o,s=Math.max(r,i-t);return Math.max(r,Math.min(e,s))}function Qf({left:e,top:t,scrollX:n,scrollY:o,avoidTop:r,avoidBottom:i,style:s,children:a,...l}){let c=`calc(${e}px - var(--popmelt-scroll-x, ${n}px))`,u=`calc(${t}px - var(--popmelt-scroll-y, ${o}px))`,d=`calc(${e+Xi}px - var(--popmelt-scroll-x, ${n}px))`,p=`calc(${t+Xi}px - var(--popmelt-scroll-y, ${o}px))`;return yn("div",{"data-devtools":"badge-hit-area",...l,style:{position:"fixed",left:0,top:0,padding:Xi,...s,transform:`translate3d(${c}, ${u}, 0)`,willChange:"transform"},children:yn("div",{style:{transform:Zf(d,p,{avoidTop:r,avoidBottom:i})},children:a})})}function id({annotations:e,supersededAnnotations:t,inFlightIds:n,activeIds:o,queuePositions:r,scrollX:i,scrollY:s,annotationGroupMap:a,onViewThread:l,onSelectAnnotation:c,onHoverAnnotation:u,canvasRef:d,toolbarRef:p}){let f=Jf(null),[m,E]=Ja(0),[x,S]=Ja(()=>Math.floor(Math.random()*Fs.length)),B=!!(n&&n.size>0);Ga(()=>{if(!B)return;let g=setInterval(()=>{E(b=>(b+1)%Yf)},Uf),v=setInterval(()=>{S(b=>(b+1)%Fs.length)},Kf);return()=>{clearInterval(g),clearInterval(v)}},[B]),Ga(()=>{let g=f.current;if(!g)return;let v=null,b=()=>{v=null,g.style.setProperty("--popmelt-scroll-x",`${window.scrollX}px`),g.style.setProperty("--popmelt-scroll-y",`${window.scrollY}px`)},ie=()=>{v===null&&(v=window.requestAnimationFrame(b))};return b(),window.addEventListener("scroll",ie,{passive:!0}),window.addEventListener("resize",ie),()=>{window.removeEventListener("scroll",ie),window.removeEventListener("resize",ie),v!==null&&window.cancelAnimationFrame(v)}},[]);let L=[];for(let g of e){if(g.type!=="text"||!g.text||!g.points[0]||t.has(g))continue;let v=g.groupId?e.filter(Oe=>Oe.groupId===g.groupId):[g],b=g.status??"pending",ie=v.reduce((Oe,He)=>Oe+(He.replyCount??0),0),ve=!!(n&&(n.has(g.id)||v.some(Oe=>n.has(Oe.id))))||g.status==="in_flight"||v.some(Oe=>Oe.status==="in_flight"),ce=v.some(Oe=>Oe.status==="resolved"&&(Oe.replyCount??0)>0||Oe.status==="needs_review"),ue=v.some(Oe=>Oe.threadId);if(!ve&&b!=="resolved"&&b!=="needs_review"&&!ce&&!ue)continue;let we=g.threadId||v.find(Oe=>Oe.threadId)?.threadId,Ue=b==="needs_review"||v.some(Oe=>Oe.status==="needs_review"),V=b==="waiting_input"||v.some(Oe=>Oe.status==="waiting_input"),P=g.points[0],J=g.fontSize||12,ke=J*1.4,De=a.get(g.id),pe=g.text.replace(/\n/g," "),Ge=De!==void 0?De+". "+pe:pe,Ze=d?.current?.getContext("2d")??document.createElement("canvas").getContext("2d");if(!Ze)continue;Ze.font=`${J}px ${Wn}`;let Me=P.x-i,Q=Yi(Me),Ie=Ui(Ze,Ge,Q),mt=Ze.measureText(Ie).width,We=ve&&!!o&&!o.has(g.id)&&!v.some(Oe=>o.has(Oe.id));L.push({id:g.id,threadId:we,linkedSelector:g.linkedSelector||v.find(Oe=>Oe.linkedSelector)?.linkedSelector,x:P.x+mt+4,y:P.y-4,size:ke+8,color:g.color,isInFlight:ve,isQueued:We,queuePosition:void 0,isNeedsReview:Ue,isQuestion:V,replyCount:ie})}let A=L.filter(g=>g.isQueued);if(A.length>0&&A.forEach((g,v)=>{g.queuePosition=r?.get(g.id)??`(${v+1}/${A.length})`}),L.length===0)return null;let C=2,U=d?.current?.getContext("2d")??document.createElement("canvas").getContext("2d"),ee=L.map(g=>{let v;g.isQueued?v=g.queuePosition?`queued ${g.queuePosition}`:"queued":g.isInFlight?v=Fs[x]??"thinking":g.isQuestion?v="? Question":g.replyCount>0?v=`${g.replyCount} ${g.replyCount===1?"reply":"replies"}`:v="View";let b=!g.isQueued,ie=b?11:0,ve=b?4:0,ce=v.length*7.2;return U&&(U.font=`12px ${Wn}`,ce=U.measureText(v).width),4+ie+ve+ce+4}),se=Xf(p),O=[];for(let g=0;g<L.length;g++){let v=L[g].y-s,b=L[g].x-i,ie=Va(se,b,ee[g]),ve=rd(v,L[g].size,ie),ce=ve+L[g].size,ue=b;for(let we=0;we<g;we++){let Ue=L[we].y-s,V=Va(se,O[we],ee[we]),P=rd(Ue,L[we].size,V),J=P+L[we].size;if(!(ve<J&&ce>P))continue;let De=O[we]+ee[we];ue<De+C&&(ue=De+C)}O.push(ue)}let D={position:"fixed",inset:0,pointerEvents:"none",zIndex:9999,"--popmelt-scroll-x":`${i}px`,"--popmelt-scroll-y":`${s}px`};return Yr("div",{ref:f,"data-devtools":"annotation-badge-layer",style:D,children:[yn("style",{dangerouslySetInnerHTML:{__html:`
|
|
2
|
+
import{createContext as tb,useCallback as on,useContext as nb,useEffect as Jt,useMemo as Wo,useRef as Rn,useState as Ht}from"react";import{useCallback as yc,useEffect as mp,useSyncExternalStore as hp}from"react";var Zn="http://localhost:1111";function nc(){return typeof window<"u"?window.__POPMELT_PROJECT_ID__??null:null}function pp(e={}){let t=nc();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,pp(t))}function no(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))}function oc(e,t){t?.reasoningEffort&&e.append("reasoningEffort",t.reasoningEffort),t?.serviceTier&&e.append("serviceTier",t.serviceTier)}async function rc(e=Zn){try{let t=await no(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch{return null}}async function Yo(e=Zn){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 tc(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 fp(e){return Yo(e)}async function xa(e,t){if(e&&e!=="http://localhost:1111")try{let u=new URL(e),d=await fp(e);if(!d&&!t)return null;if(!(!d&&t)){if(!(d&&t&&d.projectId!==t)){if(d?.projectId&&!t)return null;if(d)return{url:e,port:parseInt(u.port,10)||1111,projectId:d.projectId}}}}catch{if(!t)return null}let i=typeof window<"u"?window.location.origin:null,s=await tc(1111);if(s){if(t&&s.projectId===t)return{url:"http://localhost:1111",port:1111,projectId:s.projectId};if(s.devOrigin&&i&&s.devOrigin===i&&(t||!s.projectId))return{url:"http://localhost:1111",port:1111,projectId:s.projectId}}let a=Array.from({length:8},(u,d)=>{let p=1112+d;return tc(p).then(f=>f?{status:f,port:p}:null)}),l=(await Promise.all(a)).filter(u=>u!==null),c=[];s&&c.push({port:1111,devOrigin:s.devOrigin,projectId:s.projectId});for(let u of l)c.push({port:u.port,devOrigin:u.status.devOrigin,projectId:u.status.projectId});if(t){let u=c.find(d=>d.projectId===t);if(u)return{url:`http://localhost:${u.port}`,port:u.port,projectId:u.projectId}}if(i){let u=c.find(d=>d.devOrigin===i&&(t||!d.projectId));if(u)return{url:`http://localhost:${u.port}`,port:u.port,projectId:u.projectId}}return c.length===1&&!c[0].projectId?{url:`http://localhost:${c[0].port}`,port:c[0].port,projectId:c[0].projectId}:null}async function bs(e=Zn,t,n=-1){try{let o=await no(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return o.ok?await o.json():null}catch{return null}}async function ic(e,t,n=Zn,o,r,i,s,a,l){let c=new FormData;if(e instanceof Map){let d=!0;for(let[p,f]of e){let m=encodeURIComponent(p);c.append(`screenshot-${m}`,f,`screenshot-${m}.webp`),d&&(c.append("screenshot",f,"screenshot.webp"),d=!1)}d&&c.append("screenshot",new Blob([],{type:"image/webp"}),"screenshot.webp")}else c.append("screenshot",e,"screenshot.webp");if(c.append("feedback",t),o&&c.append("color",o),r&&c.append("provider",r),i&&c.append("model",i),oc(c,l),a&&c.append("sourceId",a),s)for(let[d,p]of s)for(let f=0;f<p.length;f++)c.append(`image-${d}-${f}`,p[f],`image-${d}-${f}.webp`);let u=await no(`${n}/send`,{method:"POST",body:c},3e4);if(!u.ok){let d=await u.text();throw new Error(`Bridge returned ${u.status}: ${d}`)}return u.json()}async function sc(e,t=Zn){let n=await no(`${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 ac(e,t=Zn){let n=await no(`${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 Sa(e,t,n=Zn){let o=await no(`${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 lc(e,t=Zn){let n=await no(`${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 mi(e=Zn){try{let t=await no(`${e}/model`,{},5e3);return t.ok?(await t.json()).model??null:null}catch{return null}}async function cc(e=Zn){let t=await no(`${e}/evals`,{},5e3);return t.ok?t.json():{version:1,updatedAt:0,cases:[]}}async function vs(e,t,n=Zn){let o=await no(`${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 dc(e,t,n=Zn){return vs(e,{status:t},n)}async function uc(e,t,n,o=Zn,r,i,s,a){let l=new FormData;l.append("screenshot",t,"eval-run.webp"),l.append("feedback",JSON.stringify(n)),r&&l.append("provider",r),i&&l.append("model",i),oc(l,a),s&&l.append("sourceId",s);let c=await no(`${o}/evals/${encodeURIComponent(e)}/run`,{method:"POST",body:l},3e4);if(!c.ok){let u=await c.text();throw new Error(`Bridge returned ${c.status}: ${u}`)}return c.json()}function gp(e){return new Promise(t=>setTimeout(t,e))}async function wa(e=Zn,t,n=15e3){let o=Date.now();try{let l=await no(`${e}/restart`,{method:"POST"},5e3);if(!l.ok){let c=await l.text().catch(()=>"");return{ok:!1,error:c?`Bridge restart returned ${l.status}: ${c}`:`Bridge restart returned ${l.status}`,elapsedMs:Date.now()-o}}}catch(l){return{ok:!1,error:l instanceof Error?l.message:"Bridge restart request failed",elapsedMs:Date.now()-o}}let r=null,i=e,s=nc();for(;Date.now()-o<n;){if(await gp(350),r=await Yo(i),!r?.ok&&s){let l=await xa(e,s);l?.url&&(i=l.url,r=await Yo(i))}if(r?.ok&&!(s&&r.projectId!==s)&&!(t&&r.version!==t))return{ok:!0,status:r,elapsedMs:Date.now()-o,bridgeUrl:i}}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 pc(e=Zn){return(await wa(e)).ok}async function fc(e=Zn,t,n,o){let r=await no(`${e}/model/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n,...o})},1e4);if(!r.ok){let i=await r.text();throw new Error(`Bridge returned ${r.status}: ${i}`)}return r.json()}async function gc(e=Zn,t,n,o){let r=await no(`${e}/evals/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n,...o})},1e4);if(!r.ok){let i=await r.text();throw new Error(`Bridge returned ${r.status}: ${i}`)}return r.json()}async function mc(e,t,n=Zn,o,r,i,s,a,l){let c;if(s&&s.length>0){let u=new FormData,d=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"});u.append("screenshot",d,"screenshot.png"),u.append("feedback",JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:a,...l}));for(let p=0;p<s.length;p++)u.append(`image-reply-${p}`,s[p],`reply-image-${p}.webp`);c=await no(`${n}/reply`,{method:"POST",body:u},3e4)}else c=await no(`${n}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:a,...l})},3e4);if(!c.ok){let u=await c.text();throw new Error(`Bridge returned ${c.status}: ${u}`)}return c.json()}async function hc(e,t=Zn){let n=await no(`${t}/thread/${encodeURIComponent(e)}`,{method:"DELETE"},5e3);if(!n.ok&&n.status!==404){let o=await n.text();throw new Error(`Bridge returned ${n.status}: ${o}`)}return n.json()}var zt=globalThis.__POPMELT_BRIDGE_CONNECTION__??(globalThis.__POPMELT_BRIDGE_CONNECTION__={}),ws=zt.sourceId??(typeof localStorage<"u"?localStorage.getItem("popmelt-source-id"):null)??(typeof crypto<"u"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2));zt.sourceId=ws;try{typeof localStorage<"u"&&localStorage.setItem("popmelt-source-id",ws)}catch{}function Es(){return ws}var xc={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},zr=zt.store??{...xc};zt.store=zr;var Ss=zt.listeners??new Set;zt.listeners=Ss;var Uo=zt.activeEs??null,xs=zt.activeBridgeUrl??null,Ko=null,yi=zt.connectionGeneration??0,bc=zt.expectedProjectId??null,ji=new Set,$r=new Map,Xo={};function Nr(e,t){if(!e)return!1;if(ji.has(e)){let o=$r.get(e);return o||(o=[],$r.set(e,o)),o.push({type:t.type??"",data:t}),!0}let n=Xo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function yp(e,t,n){let o=()=>n!==yi;for(let r of t){if(o())return;ji.add(r),$r.set(r,[])}await Promise.all(t.map(async r=>{try{let i=await bs(e,r);if(o())return;let s=$r.get(r)??[];if(i){if(_n(a=>{let l={...a.jobResponses,[r]:i.accumulated.response},c={...a.jobThinking,[r]:i.accumulated.thinking},u=[...a.events];for(let d of i.events)d.type==="done"||d.type==="error"||u.push({type:d.type,data:d,timestamp:Date.now()});return{...a,jobResponses:l,jobThinking:c,currentResponse:r===a.activeJobId?i.accumulated.response:a.currentResponse,currentThinking:r===a.activeJobId?i.accumulated.thinking:a.currentThinking,events:u}}),Xo[r]=i.currentSeq,!i.jobActive){let a=i.events.find(l=>l.type==="done"||l.type==="error");a&&Ea(a.type,a,r)}for(let a of s)typeof a.data.seq=="number"&&a.data.seq<=i.currentSeq||Ea(a.type,a.data,r)}else for(let a of s)Ea(a.type,a.data,r)}finally{ji.delete(r),$r.delete(r)}}))}function Ea(e,t,n){if(e==="delta"){let o=t.text||"";_n(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||"";_n(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 Xo[n],_n(o=>{let r=o.activeJobIds.filter(c=>c!==n),i={...o.jobResponses},s={...o.jobThinking},a=i[n];delete i[n],delete s[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:s,lastCompletedJobId:n,lastResponseText:a||o.currentResponse||t.responseText||null,lastThreadId:t.threadId??null,...n===o.activeJobId?{currentResponse:l&&i[l]||"",currentThinking:l&&s[l]||""}:{},events:[...o.events,{type:"done",data:t,timestamp:Date.now()}]}});else if(e==="error"){delete Xo[n];let o=t.message??"";_n(r=>{let i=r.activeJobIds.filter(a=>a!==n),s=i.length>0?r.status:"error";return{...r,status:s,activeJobIds:i,lastCompletedJobId:n,lastErrorByJob:o?{...r.lastErrorByJob,[n]:o}:r.lastErrorByJob,events:[...r.events,{type:"error",data:t,timestamp:Date.now()}]}})}else _n(o=>({...o,events:[...o.events,{type:e,data:t,timestamp:Date.now()}]}))}var Io=zt.discoveredBridgeUrl??null,wo=zt.discoveredBridgeProjectId??null,Sr=null,hi=null;function bp(e){let t=e??null;if(bc!==t){Uo&&(Uo.close(),Uo=null,zt.activeEs=null),Ko&&(clearTimeout(Ko),Ko=null),xs=null,zt.activeBridgeUrl=null,Io=null,wo=null,zt.discoveredBridgeUrl=null,zt.discoveredBridgeProjectId=null,Sr=null,hi=null,ji.clear(),$r.clear();for(let n of Object.keys(Xo))delete Xo[n];bc=t,zt.expectedProjectId=t,yi+=1,zt.connectionGeneration=yi,_n(()=>({...xc}))}}async function Sc(e,t){return Io&&(t?wo===t:!wo)?Io:(!t&&wo&&(Io=null,wo=null,zt.discoveredBridgeUrl=Io,zt.discoveredBridgeProjectId=wo),t&&wo&&wo!==t&&(Io=null,wo=null,zt.discoveredBridgeUrl=Io,zt.discoveredBridgeProjectId=wo),Sr&&hi===(t??null)||(hi=t??null,Sr=xa(e,t).then(n=>(Io=n?.url??null,wo=n?.projectId??t??null,zt.discoveredBridgeUrl=Io,zt.discoveredBridgeProjectId=wo,Sr=null,hi=null,Io)).catch(()=>(Sr=null,hi=null,null))),Sr)}function wc(){return Io}async function Ec(e,t){Io=null,wo=null,zt.discoveredBridgeUrl=null,zt.discoveredBridgeProjectId=null,Sr=null,hi=null;let n=await Sc(e,t);return n&&Ca(n),n}function vc(){return zr}function vp(e){return Ss.add(e),()=>{Ss.delete(e)}}function _n(e){zr=e(zr),zt.store=zr;for(let t of Ss)t()}function xp(){return typeof window<"u"?window.__POPMELT_PROJECT_ID__??null:null}function Ca(e){if(Uo&&Uo.readyState!==EventSource.CLOSED&&xs===e)return;Uo&&(Uo.close(),Uo=null,zt.activeEs=null),Ko&&(clearTimeout(Ko),Ko=null),xs=e,zt.activeBridgeUrl=xs;let t=++yi;zt.connectionGeneration=yi;let n=new URLSearchParams({sourceId:ws}),o=xp();o&&n.set("projectId",o);let r=new EventSource(`${e}/events?${n.toString()}`);Uo=r,zt.activeEs=Uo;let i=()=>t!==yi;r.addEventListener("connected",()=>{i()||Yo(e).then(s=>{if(i())return;let a=s?.activeJobs??(s?.activeJob?[s.activeJob]:[]),l=new Set(a.map(m=>m.id)),c=s?.recentJobs??[],u=new Map(c.map(m=>[m.id,m])),d=a.length>0;_n(m=>{let E={...m.lastErrorByJob},x=m.activeJobIds.filter(L=>!l.has(L));for(let L of x){let D=u.get(L);D?.status==="error"&&D.error&&(E[L]=D.error)}let S=m.activeJobIds.filter(L=>l.has(L));for(let L of l)S.includes(L)||S.push(L);let P={};for(let L of a)L.threadId&&(P[L.id]=L.threadId);return{...m,isConnected:!0,status:d?"streaming":x.length>0||m.status==="disconnected"?"idle":m.status,activeJobId:d?a[a.length-1].id:S.length>0?S[S.length-1]:null,activeJobIds:S,activeJobThreads:P,lastErrorByJob:E,lastCompletedJobId:x.length>0?x[x.length-1]:m.lastCompletedJobId}});let p=zr.activeJobIds.filter(m=>!l.has(m)),f=[...Array.from(l),...p];f.length>0&&yp(e,f,t).catch(()=>{})})}),r.addEventListener("job_started",s=>{if(i())return;let a=JSON.parse(s.data),l=a.jobId;if(Nr(l,a))return;let c=a.threadId;_n(u=>({...u,status:"streaming",activeJobId:l,activeJobIds:u.activeJobIds.includes(l)?u.activeJobIds:[...u.activeJobIds,l],activeJobThreads:c?{...u.activeJobThreads,[l]:c}:u.activeJobThreads,jobResponses:{...u.jobResponses,[l]:u.jobResponses[l]??""},jobThinking:{...u.jobThinking,[l]:u.jobThinking[l]??""},currentResponse:u.jobResponses[l]??"",currentThinking:u.jobThinking[l]??"",lastResponseText:null,lastThreadId:null,events:[...u.events,{type:"job_started",data:a,timestamp:Date.now()}]}))}),r.addEventListener("delta",s=>{if(i())return;let a=JSON.parse(s.data),l=a.jobId;if(Nr(l,a))return;let c=a.text||"";_n(u=>({...u,jobResponses:l?{...u.jobResponses,[l]:(u.jobResponses[l]||"")+c}:u.jobResponses,currentResponse:!l||l===u.activeJobId?u.currentResponse+c:u.currentResponse,events:[...u.events,{type:"delta",data:a,timestamp:Date.now()}]}))}),r.addEventListener("thinking",s=>{if(i())return;let a=JSON.parse(s.data),l=a.jobId;if(Nr(l,a))return;let c=a.text||"";_n(u=>({...u,jobThinking:l?{...u.jobThinking,[l]:(u.jobThinking[l]||"")+c}:u.jobThinking,currentThinking:!l||l===u.activeJobId?u.currentThinking+c:u.currentThinking,events:[...u.events,{type:"thinking",data:a,timestamp:Date.now()}]}))}),r.addEventListener("tool_use",s=>{if(i())return;let a=JSON.parse(s.data),l=a.jobId;Nr(l,a)||_n(c=>({...c,events:[...c.events,{type:"tool_use",data:a,timestamp:Date.now()}]}))}),r.addEventListener("done",s=>{if(i())return;let a=JSON.parse(s.data),l=a.jobId;Nr(l,a)||(l&&delete Xo[l],_n(c=>{let u=l?c.activeJobIds.filter(x=>x!==l):c.activeJobIds,d={...c.jobResponses},p={...c.jobThinking},f={...c.activeJobThreads},m=l?d[l]:void 0;l&&(delete d[l],delete p[l],delete f[l]);let E=l===c.activeJobId?u.length>0?u[u.length-1]:null:c.activeJobId;return{...c,activeJobIds:u,activeJobId:E,jobResponses:d,jobThinking:p,lastCompletedJobId:l??c.activeJobId,lastResponseText:m||c.currentResponse||a.responseText||null,lastThreadId:a.threadId??null,...l===c.activeJobId?{currentResponse:E&&d[E]||"",currentThinking:E&&p[E]||""}:{},events:[...c.events,{type:"done",data:a,timestamp:Date.now()}]}}))}),r.addEventListener("question",s=>{if(i())return;let a=JSON.parse(s.data),l=a.jobId;Nr(l,a)||_n(c=>({...c,pendingQuestions:[...c.pendingQuestions,{jobId:a.jobId,threadId:a.threadId,question:a.question,annotationIds:a.annotationIds,timestamp:Date.now()}],events:[...c.events,{type:"question",data:a,timestamp:Date.now()}]}))}),r.addEventListener("capabilities_changed",()=>{i()||_n(s=>({...s,capabilitiesVersion:s.capabilitiesVersion+1}))}),r.addEventListener("queue_drained",()=>{if(!i()){for(let s of Object.keys(Xo))delete Xo[s];ji.clear(),$r.clear(),_n(s=>({...s,status:s.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}}),r.addEventListener("error",s=>{if(!i()){if(r.readyState===EventSource.CLOSED)_n(a=>({...a,isConnected:!1,status:"disconnected"})),Ko&&(clearTimeout(Ko),Ko=null),Ko=setTimeout(()=>{Yo(e).then(a=>{a&&Ca(e)})},5e3);else if(s instanceof MessageEvent){let a=JSON.parse(s.data),l=a.jobId??null;if(Nr(l??void 0,a))return;l&&delete Xo[l];let c=a.message??"";_n(u=>{let d=l?u.activeJobIds.filter(f=>f!==l):u.activeJobIds,p=d.length>0?u.status:"error";return{...u,status:p,activeJobIds:d,lastCompletedJobId:l??u.activeJobId,lastErrorByJob:l&&c?{...u.lastErrorByJob,[l]:c}:u.lastErrorByJob,events:[...u.events,{type:"error",data:a,timestamp:Date.now()}]}})}}}),r.onerror=()=>{i()||r.readyState===EventSource.CLOSED&&_n(s=>({...s,isConnected:!1,status:"disconnected"}))}}function Cc(e="http://localhost:1111",t=!0,n){let o=hp(vp,vc,vc);mp(()=>{bp(n),t&&Sc(e,n).then(s=>{s&&Yo(s).then(a=>{a&&(!n||a.projectId===n)&&Ca(s)})})},[e,t,n]);let r=yc(()=>{_n(()=>({...zr,events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),i=yc(s=>{_n(a=>({...a,pendingQuestions:a.pendingQuestions.filter(l=>l.threadId!==s)}))},[]);return{...o,clearEvents:r,dismissQuestion:i}}import{useEffect as Sp,useReducer as wp}from"react";var Ep={isAnnotating:!1,activeTool:"inspector",activeColor:"oklch(0.628 0.258 29)",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],textModifications:[],domModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function bi(){return Math.random().toString(36).substring(2,9)}function Tc(e){return e.status?e:e.captured?{...e,status:"in_flight"}:{...e,status:"pending"}}function eo(e){return{...e,undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,textModifications:e.textModifications,domModifications:e.domModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]}}function Cp(e,t){return{...e,isAnnotating:t}}function Tp(e,t){return{...e,activeTool:t,inspectedElement:null}}function Mp(e,t){return{...e,activeColor:t}}function kp(e,t){return{...e,strokeWidth:t}}function Ip(e,t){return{...e,currentPath:[t]}}function Rp(e,t){return{...e,currentPath:[...e.currentPath,t]}}function Lp(e){return{...e,currentPath:[]}}function Ap(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return{...e,currentPath:[]};let n={id:bi(),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{...eo(e),annotations:[...e.annotations,n],currentPath:[]}}function Pp(e,t){let n={id:t.id??bi(),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:eo(e),annotations:[...e.annotations,n]}}function Bp(e,t){return{...eo(e),annotations:e.annotations.map(o=>o.id===t.id?{...o,text:t.text,...t.imageCount!=null?{imageCount:t.imageCount}:{}}:o)}}function Dp(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 Op(e,t){let n=eo(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 _p(e,t){let n=t.saveUndo?eo(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 a=t.delta.x,l=t.delta.y;return{...i,points:i.points.map(c=>({x:c.x+a,y:c.y+l}))}})}}function Hp(e,t){let n=t.saveUndo?eo(e):e,o=e.annotations.find(s=>s.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 s=t.points,a=Math.min(s[0].x,s[1].x),l=Math.max(s[0].y,s[1].y),c=o.points[0],u=o.points[o.points.length-1],d=Math.min(c.x,u.x),p=Math.max(c.y,u.y);r=a-d,i=l-p}return{...n,annotations:e.annotations.map(s=>s.id===t.id?{...s,points:t.points}:o.groupId&&s.groupId===o.groupId&&s.type==="text"?{...s,points:s.points.map(a=>({x:a.x+r,y:a.y+i}))}:s)}}function Fp(e,t){return{...eo(e),annotations:[...e.annotations,...t.annotations.map(Tc)]}}function Np(e,t){let n=new Set,o=[];for(let r of t.annotations)n.has(r.id)||(n.add(r.id),o.push(Tc(r)));return{...e,annotations:o}}function zp(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return{...e,annotations:t?.annotations||[],styleModifications:t?.styleModifications||[],textModifications:t?.textModifications||[],domModifications:t?.domModifications||[],spacingTokenMods:t?.spacingTokenMods||[],undoStack:e.undoStack.slice(0,-1),redoStack:[...e.redoStack,{annotations:e.annotations,styleModifications:e.styleModifications,textModifications:e.textModifications,domModifications:e.domModifications,spacingTokenMods:e.spacingTokenMods}]}}function $p(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return{...e,annotations:t?.annotations||[],styleModifications:t?.styleModifications||[],textModifications:t?.textModifications||[],domModifications:t?.domModifications||[],spacingTokenMods:t?.spacingTokenMods||[],redoStack:e.redoStack.slice(0,-1),undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,textModifications:e.textModifications,domModifications:e.domModifications,spacingTokenMods:e.spacingTokenMods}]}}function Wp(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(s=>s!==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 jp(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 Vp(e){let t=typeof window<"u"?window.location.pathname:"/";return{...e,annotations:e.annotations.map(n=>({...n,captured:!0,status:n.status==="pending"||!n.status?"in_flight":n.status})),styleModifications:e.styleModifications.map(n=>!n.pathname||n.pathname===t?{...n,captured:!0}:n),textModifications:e.textModifications.map(n=>!n.pathname||n.pathname===t?{...n,captured:!0}:n),domModifications:e.domModifications.map(n=>!n.pathname||n.pathname===t?{...n,captured:!0}:n),spacingTokenChanges:e.spacingTokenChanges.map(n=>({...n,captured:!0}))}}function Gp(e){return{...e,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,textModifications:[],domModifications:[],spacingTokenChanges:[],spacingTokenMods:[]}}function Jp(e,t){return{...e,inspectedElement:t}}function Yp(e,t){let{selector:n,element:o,property:r,original:i,modified:s}=t,a=typeof window<"u"?window.location.pathname:"/",l=e.styleModifications.findIndex(c=>c.selector===n&&(!c.pathname||c.pathname===a));if(i===s&&l<0)return e;if(l>=0){let c=e.styleModifications[l];if(c.captured){let m=eo(e),E=m.styleModifications.map((x,S)=>S===l?{...x,changes:[{property:r,original:i,modified:s}],captured:!1,pathname:a}:x);return{...m,styleModifications:E}}let u=c.changes.findIndex(m=>m.property===r),d,p=e;if(u>=0){let m=c.changes[u];s===m.original?d=c.changes.filter((E,x)=>x!==u):d=c.changes.map((E,x)=>x===u?{...E,modified:s}:E)}else{if(i===s)return e;p=eo(e),d=[...c.changes,{property:r,original:i,modified:s}]}if(d.length===0)return{...p,styleModifications:p.styleModifications.filter((m,E)=>E!==l)};let f=p.styleModifications.map((m,E)=>E===l?{...m,changes:d}:m);return{...p,styleModifications:f}}else{let c=eo(e),u={selector:n,element:o,changes:[{property:r,original:i,modified:s}],pathname:a};return{...c,styleModifications:[...c.styleModifications,u]}}}function Up(e,t){let{selector:n,durableSelector:o,element:r,changes:i}=t,s=typeof window<"u"?window.location.pathname:"/",a=i.filter(u=>u.original!==u.modified);if(a.length===0)return e;let l=eo(e),c=l.styleModifications.findIndex(u=>u.selector===n&&(!u.pathname||u.pathname===s));if(c>=0){let u=l.styleModifications[c],d=u.captured?[]:[...u.changes];for(let p of a){let f=d.findIndex(m=>m.property===p.property);f>=0?p.modified===d[f].original?d=d.filter((m,E)=>E!==f):d=d.map((m,E)=>E===f?{...m,modified:p.modified}:m):d.push(p)}return d.length===0?{...l,styleModifications:l.styleModifications.filter((p,f)=>f!==c)}:{...l,styleModifications:l.styleModifications.map((p,f)=>f===c?{...p,changes:d,captured:!1,pathname:s}:p)}}else return{...l,styleModifications:[...l.styleModifications,{selector:n,durableSelector:o,element:r,changes:a,pathname:s}]}}function Kp(e,t){let{selector:n,property:o}=t,r=typeof window<"u"?window.location.pathname:"/",i=eo(e),s=i.styleModifications.map(a=>a.selector!==n||a.pathname&&a.pathname!==r?a:{...a,changes:a.changes.filter(l=>l.property!==o)}).filter(a=>a.changes.length>0);return{...i,styleModifications:s}}function Xp(e){return e.styleModifications.length===0?{...e,inspectedElement:null}:{...eo(e),styleModifications:[],inspectedElement:null}}function qp(e,t){return{...e,styleModifications:t}}function Zp(e,t,n,o){return e.selector===t&&(!e.pathname||e.pathname===o)&&e.textNodePath.length===n.length&&e.textNodePath.every((r,i)=>r===n[i])}function Qp(e,t){let{selector:n,durableSelector:o,element:r,textNodePath:i,original:s,modified:a}=t,l=typeof window<"u"?window.location.pathname:"/",c=e.textModifications.findIndex(d=>Zp(d,n,i,l));if(s===a&&c<0)return e;if(c>=0){let d=e.textModifications[c],p=d.captured?eo(e):e,f=d.captured?s:d.original;return a===f?{...p,textModifications:p.textModifications.filter((m,E)=>E!==c)}:{...p,textModifications:p.textModifications.map((m,E)=>E===c?{...m,durableSelector:o,element:r,original:f,modified:a,captured:!1,pathname:l}:m)}}let u=eo(e);return{...u,textModifications:[...u.textModifications,{selector:n,durableSelector:o,element:r,textNodePath:i,original:s,modified:a,pathname:l}]}}function ef(e,t){return{...e,textModifications:t}}function tf(e,t){let n=eo(e),o=n.domModifications.findIndex(r=>r.id===t.id);return o>=0?{...n,domModifications:n.domModifications.map((r,i)=>i===o?{...t,captured:!1}:r)}:{...n,domModifications:[...n.domModifications,t]}}function nf(e,t){return{...e,domModifications:t}}function of(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 rf(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 sf(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 af(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 lf(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 cf(e,t){let{linkedSelectors:n,styleSelectors:o}=t,r=new Set(n),i=new Set(o),s=typeof window<"u"?window.location.pathname:"/",a=new Set,l=new Set;for(let m of e.annotations)m.linkedSelector&&r.has(m.linkedSelector)&&(a.add(m.id),m.groupId&&l.add(m.groupId));for(let m of e.annotations)m.groupId&&l.has(m.groupId)&&a.add(m.id);let c=e.annotations.filter(m=>!a.has(m.id)),u=e.styleModifications.filter(m=>!i.has(m.selector)||m.pathname&&m.pathname!==s),d=e.domModifications.filter(m=>!i.has(m.selector)||m.pathname&&m.pathname!==s);if(c.length===e.annotations.length&&u.length===e.styleModifications.length&&d.length===e.domModifications.length)return e;let p=e.selectedAnnotationIds.filter(m=>!a.has(m)),f=e.inspectedElement&&i.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return{...e,annotations:c,styleModifications:u,domModifications:d,selectedAnnotationIds:p,lastSelectedId:p.length>0?p[p.length-1]:null,inspectedElement:f}}function df(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 uf(e,t){return{...e,spacingTokenChanges:t}}function pf(e,t){let n=eo(e),o=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),r;if(o>=0){let i=e.spacingTokenMods[o],s={...t,originalValue:i.originalValue,originalPx:i.originalPx};r=e.spacingTokenMods.map((a,l)=>l===o?s:a)}else r=[...e.spacingTokenMods,t];return{...n,spacingTokenMods:r}}function ff(e,t){let n=eo(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,s={tokenPath:t.tokenPath,originalValue:r,currentValue:"__deleted__",targets:o>=0?e.spacingTokenMods[o].targets:[],originalPx:i,currentPx:0},a;return o>=0?a=e.spacingTokenMods.map((l,c)=>c===o?s:l):a=[...e.spacingTokenMods,s],{...n,spacingTokenMods:a}}function gf(e,t){switch(t.type){case"SET_ANNOTATING":return Cp(e,t.payload);case"SET_TOOL":return Tp(e,t.payload);case"SET_COLOR":return Mp(e,t.payload);case"SET_STROKE_WIDTH":return kp(e,t.payload);case"START_PATH":return Ip(e,t.payload);case"CONTINUE_PATH":return Rp(e,t.payload);case"CANCEL_PATH":return Lp(e);case"FINISH_PATH":return Ap(e,t.payload);case"ADD_TEXT":return Pp(e,t.payload);case"UPDATE_TEXT":return Bp(e,t.payload);case"UPDATE_TEXT_SIZE":return Dp(e,t.payload);case"DELETE_ANNOTATION":return Op(e,t.payload);case"MOVE_ANNOTATION":return _p(e,t.payload);case"RESIZE_ANNOTATION":return Hp(e,t.payload);case"PASTE_ANNOTATIONS":return Fp(e,t.payload);case"RESTORE_ANNOTATIONS":return Np(e,t.payload);case"UNDO":return zp(e);case"REDO":return $p(e);case"SELECT_ANNOTATION":return Wp(e,t.payload);case"UPDATE_ANNOTATION_COLOR":return jp(e,t.payload);case"MARK_CAPTURED":return Vp(e);case"CLEAR":return Gp(e);case"SELECT_ELEMENT":return Jp(e,t.payload);case"MODIFY_STYLE":return Yp(e,t.payload);case"MODIFY_STYLES_BATCH":return Up(e,t.payload);case"CLEAR_STYLE":return Kp(e,t.payload);case"CLEAR_ALL_STYLES":return Xp(e);case"RESTORE_STYLE_MODIFICATIONS":return qp(e,t.payload);case"MODIFY_TEXT_CONTENT":return Qp(e,t.payload);case"RESTORE_TEXT_MODIFICATIONS":return ef(e,t.payload);case"MODIFY_DOM_STRUCTURE":return tf(e,t.payload);case"RESTORE_DOM_MODIFICATIONS":return nf(e,t.payload);case"UPDATE_LINKED_POSITIONS":return of(e,t.payload);case"CLEANUP_ORPHANED":return cf(e,t.payload);case"SET_ANNOTATION_STATUS":return rf(e,t.payload);case"SET_ANNOTATION_THREAD":return sf(e,t.payload);case"SET_ANNOTATION_QUESTION":return af(e,t.payload);case"APPLY_RESOLUTIONS":return lf(e,t.payload);case"ADD_SPACING_TOKEN_CHANGE":return df(e,t.payload);case"RESTORE_SPACING_TOKEN_CHANGES":return uf(e,t.payload);case"MODIFY_SPACING_TOKEN":return pf(e,t.payload);case"DELETE_SPACING_TOKEN":return ff(e,t.payload);default:return t}}function Mc(){let[e,t]=wp(gf,Ep);return Sp(()=>{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 mf}from"react";function hf(){let e=window.__POPMELT_PATH_PATCH__;if(e){e.subscribers+=1;return}let t=window.history.pushState,n=window.history.replaceState,o=s=>{window.dispatchEvent(new CustomEvent("popmelt:locationchange",{detail:{prevPath:s}}))},r=function(s,a,l){let c=window.location.pathname;t.call(window.history,s,a,l),o(c)},i=function(s,a,l){let c=window.location.pathname;n.call(window.history,s,a,l),o(c)};window.history.pushState=r,window.history.replaceState=i,window.__POPMELT_PATH_PATCH__={subscribers:1,originalPushState:t,originalReplaceState:n,wrappedPushState:r,wrappedReplaceState:i}}function yf(){let e=window.__POPMELT_PATH_PATCH__;e&&(e.subscribers-=1,!(e.subscribers>0)&&(window.history.pushState===e.wrappedPushState&&(window.history.pushState=e.originalPushState),window.history.replaceState===e.wrappedReplaceState&&(window.history.replaceState=e.originalReplaceState),delete window.__POPMELT_PATH_PATCH__))}function bf(e){return hf(),window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e),yf()}}function vf(){return window.location.pathname}function vi(){return mf(bf,vf,()=>"/")}var kc="popmelt-toolbar-snap-position";function Wr(e){return e.startsWith("top-")}function jr(e){return e.endsWith("-right")}function Vi(e){return e.endsWith("-center")}function Ic(){try{let e=localStorage.getItem(kc);if(e&&xf(e))return e}catch{}return"bottom-right"}function Rc(e){try{localStorage.setItem(kc,e)}catch{}}function xf(e){return["bottom-right","bottom-center","bottom-left","top-right","top-center","top-left"].includes(e)}function Lc(e,t,n){let o=Wr(e)?16:n-16-54;return Vi(e)?{position:"fixed",top:o,left:t/2,transform:"translateX(-50%)"}:jr(e)?{position:"fixed",top:o,right:16,left:"auto"}:{position:"fixed",top:o,left:16,right:"auto"}}function Ac(e,t,n){let r=Wr(e)?{top:82}:{bottom:82},i;return Vi(e)?i={left:t/2,transform:"translateX(-50%)"}:jr(e)?i={right:16}:i={left:16},{position:"fixed",...r,...i}}function Pc(e,t,n){let o=Wr(e),r=o?{top:78}:{bottom:78},i,s;return Vi(e)?(i={left:"50%",transform:"translateX(-50%)"},s="center"):jr(e)?(i={right:16},s="flex-end"):(i={left:16},s="flex-start"),{position:"fixed",...r,...i,zIndex:9999,display:"flex",flexDirection:"column",alignItems:s}}function Cs(e){let t=Wr(e),n=jr(e)||Vi(e);return{position:"fixed",top:t&&n?82:16,right:16,bottom:!t&&n?82:16}}function Bc(e,t,n){let r=Wr(e),i,s;jr(e)||Vi(e)?(i=t-16,s=i-326):(s=16,i=s+326);let a=r?82:n-16-54-12;return{left:s,right:i,y:a}}var Dc=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"];function Ts(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 Ta(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 Ms(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 Oc(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 mn(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(s=>!s.startsWith("_")&&s.length<30).slice(0,2);r.length>0&&(o+="."+r.map(s=>CSS.escape(s)).join("."));let i=n.parentElement;if(i){let s=Array.from(i.children).filter(a=>a.tagName===n.tagName);if(s.length>1){let a=s.indexOf(n)+1;o+=`:nth-of-type(${a})`}}t.unshift(o),n=i}return t.join(" > ")}function hn(e){try{return document.querySelector(e)}catch{return null}}function ks(e,t=0){let n=Ta(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)),s=n[i],a=Ms(s.fiber)??e;return{name:s.name,path:o,depthIndex:i,rootElement:a}}function _c(e,t){let n=Ta(e),o=t.toLowerCase(),r=-1;for(let i=n.length-1;i>=0;i--){let s=n[i].name;if(s===t){let a=Ms(n[i].fiber)??e;return{name:t,path:n.map(l=>l.name),depthIndex:i,rootElement:a}}if(r===-1){let a=s.toLowerCase();(a.length>=4&&o.includes(a)||o.length>=4&&a.includes(o))&&(r=i)}}if(r>=0){let i=Ms(n[r].fiber)??e;return{name:t,path:n.map(s=>s.name),depthIndex:r,rootElement:i}}return null}function xi(e){let t=Si(),n=[],o=new Set,r=t.currentNode;for(;r=t.nextNode();){let i=_c(r,e);i&&!o.has(i.rootElement)&&(o.add(i.rootElement),n.push(i))}return n}function Ma(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),o=Si(),r=new Set,i=o.currentNode;for(;(i=o.nextNode())&&n.size>0;)for(let s of n){let a=_c(i,s);if(!a||r.has(a.rootElement))continue;r.add(a.rootElement);let l=a.rootElement.getBoundingClientRect();t.set(s,l.top+window.scrollY),n.delete(s);break}for(let s of n)t.set(s,1/0);return t}function Si(){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 Hn(e){let t={selector:Oc(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=Hc(e);n&&n.length>0&&n.length<200&&(t.textContent=n);let o={};for(let s of e.attributes)s.name.startsWith("data-")&&(o[s.name]=s.value);Object.keys(o).length>0&&(t.dataAttributes=o);let r=Ts(e);r&&(t.reactComponent=r.name);let i=Sf(e);return i&&(t.context=i),t}function Hc(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function wr(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 Sf(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 Fc(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 s of i){let a=s.x-o,l=s.y-r;if(a<0||l<0||a>window.innerWidth||l>window.innerHeight)continue;let c=wr(a,l);c&&!t.has(c)&&(t.add(c),n.push(Hn(c)))}return n.slice(0,3)}function ka(e){if(e.length===0)return[];let t=e.map(o=>o.x),n=e.map(o=>o.y);return Fc({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function $n(e,t){return e.style.getPropertyValue(t)!==""}function wf(e,t=30){if(e<=0)return[];let n=[],o=Si(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let s=i,a=s.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let l=getComputedStyle(s);!$n(s,"padding-top")&&Math.abs((parseFloat(l.paddingTop)||0)-e)<r&&n.push({element:s,property:"padding-top"}),!$n(s,"padding-bottom")&&Math.abs((parseFloat(l.paddingBottom)||0)-e)<r&&n.length<t&&n.push({element:s,property:"padding-bottom"}),!$n(s,"padding-left")&&Math.abs((parseFloat(l.paddingLeft)||0)-e)<r&&n.length<t&&n.push({element:s,property:"padding-left"}),!$n(s,"padding-right")&&Math.abs((parseFloat(l.paddingRight)||0)-e)<r&&n.length<t&&n.push({element:s,property:"padding-right"}),!$n(s,"margin-top")&&Math.abs((parseFloat(l.marginTop)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-top"}),!$n(s,"margin-bottom")&&Math.abs((parseFloat(l.marginBottom)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-bottom"}),!$n(s,"margin-left")&&Math.abs((parseFloat(l.marginLeft)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-left"}),!$n(s,"margin-right")&&Math.abs((parseFloat(l.marginRight)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-right"});let c=l.display;if((c.includes("flex")||c.includes("grid"))&&n.length<t){let u=$n(s,"gap"),d=parseFloat(l.gap)||0,p=parseFloat(l.rowGap)||0,f=parseFloat(l.columnGap)||0;!u&&Math.abs(d-e)<r?n.push({element:s,property:"gap"}):!$n(s,"row-gap")&&Math.abs(p-e)<r?n.push({element:s,property:"row-gap"}):!$n(s,"column-gap")&&Math.abs(f-e)<r&&n.push({element:s,property:"column-gap"})}}return n}function Ia(e,t=30){if(e<=0)return[];let n=[],o=Si(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let s=i,a=s.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let l=getComputedStyle(s),c=parseFloat(l.borderTopWidth)||0,u=parseFloat(l.borderRightWidth)||0,d=parseFloat(l.borderBottomWidth)||0,p=parseFloat(l.borderLeftWidth)||0,f=s.clientWidth,m=s.clientHeight,E=parseFloat(l.paddingTop)||0;!$n(s,"padding-top")&&Math.abs(E-e)<r&&n.push({x:a.left+p,y:a.top+c,width:f,height:e,direction:"vertical",property:"padding-top"});let x=parseFloat(l.paddingBottom)||0;!$n(s,"padding-bottom")&&Math.abs(x-e)<r&&n.length<t&&n.push({x:a.left+p,y:a.top+c+m-e,width:f,height:e,direction:"vertical",property:"padding-bottom"});let S=parseFloat(l.paddingLeft)||0;!$n(s,"padding-left")&&Math.abs(S-e)<r&&n.length<t&&n.push({x:a.left+p,y:a.top+c,width:e,height:m,direction:"horizontal",property:"padding-left"});let P=parseFloat(l.paddingRight)||0;!$n(s,"padding-right")&&Math.abs(P-e)<r&&n.length<t&&n.push({x:a.left+p+f-e,y:a.top+c,width:e,height:m,direction:"horizontal",property:"padding-right"});let L=parseFloat(l.marginTop)||0;!$n(s,"margin-top")&&Math.abs(L-e)<r&&n.length<t&&n.push({x:a.left,y:a.top-e,width:a.width,height:e,direction:"vertical",property:"margin-top"});let D=parseFloat(l.marginBottom)||0;!$n(s,"margin-bottom")&&Math.abs(D-e)<r&&n.length<t&&n.push({x:a.left,y:a.bottom,width:a.width,height:e,direction:"vertical",property:"margin-bottom"});let C=parseFloat(l.marginLeft)||0;!$n(s,"margin-left")&&Math.abs(C-e)<r&&n.length<t&&n.push({x:a.left-e,y:a.top,width:e,height:a.height,direction:"horizontal",property:"margin-left"});let G=parseFloat(l.marginRight)||0;!$n(s,"margin-right")&&Math.abs(G-e)<r&&n.length<t&&n.push({x:a.right,y:a.top,width:e,height:a.height,direction:"horizontal",property:"margin-right"});let ee=l.display;if((ee.includes("flex")||ee.includes("grid"))&&n.length<t&&!$n(s,"gap")){let O=Array.from(s.children).filter(B=>{let g=getComputedStyle(B);return g.display!=="none"&&g.position!=="absolute"&&g.position!=="fixed"});if(O.length>=2)for(let B=0;B<O.length-1&&n.length<t;B++){let g=O[B].getBoundingClientRect(),v=O[B+1].getBoundingClientRect(),b=v.top-g.bottom;Math.abs(b-e)<r&&b>.5&&n.push({x:Math.min(g.left,v.left),y:g.bottom,width:Math.max(g.right,v.right)-Math.min(g.left,v.left),height:b,direction:"vertical",property:"gap"});let ie=v.left-g.right;Math.abs(ie-e)<r&&ie>.5&&n.push({x:g.right,y:Math.min(g.top,v.top),width:ie,height:Math.max(g.bottom,v.bottom)-Math.min(g.top,v.top),direction:"horizontal",property:"gap"})}}}return n}function Is(e){return typeof e=="string"?{value:e}:e}var zc={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 Nc(e,t){let n=zc[t];return n?n.includes(e):!1}function Ef(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 Cf(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"},s=n.slice(0,n.indexOf("-",o+1)>0?n.indexOf("-",o+1):o);return i[s]??i[r]??null}function Ra(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let r=[],i=Si(),s=i.currentNode;for(;(s=i.nextNode())&&r.length<t;){let a=s,l=a.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let c=a.className;if(typeof c=="string")for(let u of e.bindings){if(!Ef(c,u))continue;let d=Cf(u);if(d&&!(e.property&&!Nc(d,e.property))){r.push({element:a,property:d});break}}}return r}let o=wf(n,t*2);return e.property?o.filter(r=>Nc(r.property,e.property)).slice(0,t):o.slice(0,t)}function La(e,t=30){let n=Ra(e,t),o=[];for(let r of n){let i=r.element,s=i.getBoundingClientRect(),a=getComputedStyle(i),l=parseFloat(a.borderTopWidth)||0,c=parseFloat(a.borderRightWidth)||0,u=parseFloat(a.borderLeftWidth)||0,d=i.clientWidth,p=i.clientHeight;switch(r.property){case"padding-top":{let f=parseFloat(a.paddingTop)||0;o.push({x:s.left+u,y:s.top+l,width:d,height:f,direction:"vertical",property:r.property});break}case"padding-bottom":{let f=parseFloat(a.paddingBottom)||0;o.push({x:s.left+u,y:s.top+l+p-f,width:d,height:f,direction:"vertical",property:r.property});break}case"padding-left":{let f=parseFloat(a.paddingLeft)||0;o.push({x:s.left+u,y:s.top+l,width:f,height:p,direction:"horizontal",property:r.property});break}case"padding-right":{let f=parseFloat(a.paddingRight)||0;o.push({x:s.left+u+d-f,y:s.top+l,width:f,height:p,direction:"horizontal",property:r.property});break}case"margin-top":{let f=parseFloat(a.marginTop)||0;o.push({x:s.left,y:s.top-f,width:s.width,height:f,direction:"vertical",property:r.property});break}case"margin-bottom":{let f=parseFloat(a.marginBottom)||0;o.push({x:s.left,y:s.bottom,width:s.width,height:f,direction:"vertical",property:r.property});break}case"margin-left":{let f=parseFloat(a.marginLeft)||0;o.push({x:s.left-f,y:s.top,width:f,height:s.height,direction:"horizontal",property:r.property});break}case"margin-right":{let f=parseFloat(a.marginRight)||0;o.push({x:s.right,y:s.top,width:f,height:s.height,direction:"horizontal",property:r.property});break}case"gap":case"row-gap":case"column-gap":{let f=Array.from(i.children).filter(m=>{let E=getComputedStyle(m);return E.display!=="none"&&E.position!=="absolute"&&E.position!=="fixed"});for(let m=0;m<f.length-1&&o.length<t;m++){let E=f[m].getBoundingClientRect(),x=f[m+1].getBoundingClientRect(),S=x.top-E.bottom;S>.5&&o.push({x:Math.min(E.left,x.left),y:E.bottom,width:Math.max(E.right,x.right)-Math.min(E.left,x.left),height:S,direction:"vertical",property:"gap"});let P=x.left-E.right;P>.5&&o.push({x:E.right,y:Math.min(E.top,x.top),width:P,height:Math.max(E.bottom,x.bottom)-Math.min(E.top,x.top),direction:"horizontal",property:"gap"})}break}}}return o}function $c(e,t){let n=new Set,o=Gi(t);for(let r of e){let i=jc[r.property];if(!i)continue;let s=r.element.className;if(typeof s=="string")for(let a of i){let l=`${a}-${o}`;for(let c of s.split(/\s+/)){let u=c.lastIndexOf(":"),d=u>=0?c.slice(u+1):c;if(d===l){n.add(d);break}}}}return[...n]}function Wc(e){let t=new Set;for(let n of e)for(let[o,r]of Object.entries(zc))if(r.includes(n.property)){t.add(o);break}if(t.size===1)return[...t][0]}function Aa(e,t,n){if(t===n)return e;let o=Gi(t),r=Gi(n);return e.map(i=>{let s=i.lastIndexOf("-");if(s<0)return i;let a=i.slice(0,s),l=i.slice(s+1);return l===o||l===`[${t}px]`?`${a}-${r}`:i})}var Tf={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 Gi(e){return Tf[e]??`[${e}px]`}var jc={"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 Mf(e,t,n,o){let r=jc[t];if(!r)return null;let i=Gi(n);for(let s of r){let a=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+s+"-(?:"+kf(i)+"|\\["+n+"px\\]))(?:\\s|$)"),l=e.match(a);if(l?.[1]){let c=Gi(o),u=l[1].lastIndexOf(":"),d=u>=0?l[1].slice(0,u+1):"";return{matched:l[1],suggested:`${d}${s}-${c}`}}}return null}function kf(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function Vc(e,t,n){let o=new Set,r=[];for(let i of e){let s=mn(i.element),a=`${s}::${i.property}`;if(o.has(a))continue;o.add(a);let l=Ts(i.element),c=i.element.className||"",u=Mf(c,i.property,t,n);r.push({selector:s,reactComponent:l?.name,className:c,property:i.property,matchedClass:u?.matched,suggestedClass:u?.suggested})}return r}function Rs(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function wi(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 s=i.style.getPropertyValue(t);if(s)return s;let a=i.style[n];if(a)return a}}catch{}}catch{}return null}function Ls(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function Vr(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function If(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 gr(e){let t=Array.from(e.children).filter(l=>{if(!(l instanceof HTMLElement))return!1;let c=window.getComputedStyle(l);return c.display!=="none"&&c.position!=="absolute"&&c.position!=="fixed"});if(t.length<2)return[];let n=[],o=e.getBoundingClientRect(),i=window.getComputedStyle(e).flexDirection,s=i==="column"||i==="column-reverse",a=6;for(let l=0;l<t.length-1;l++){let c=t[l].getBoundingClientRect(),u=t[l+1].getBoundingClientRect();if(u.left>c.right+.5&&n.push({axis:"column",x:c.right,y:o.top,w:u.left-c.right,h:o.height}),u.top>c.bottom+.5&&n.push({axis:"row",x:o.left,y:c.bottom,w:o.width,h:u.top-c.bottom}),!(u.left>c.right+.5)&&!(u.top>c.bottom+.5))if(s){let d=(c.bottom+u.top)/2;n.push({axis:"row",x:o.left,y:d-a/2,w:o.width,h:a})}else{let d=(c.right+u.left)/2;n.push({axis:"column",x:d-a/2,y:o.top,w:a,h:o.height})}}return If(n)}function Pa(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 Ei(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 Gr(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 Ba(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function Ci(e){let t=document.createRange(),n=!1;for(let u of e.childNodes)u.nodeType===Node.TEXT_NODE&&(u.textContent||"").trim().length>0&&(n||(t.setStart(u,0),n=!0),t.setEnd(u,u.textContent?.length??0));if(!n)return null;let o=t.getBoundingClientRect(),r=window.getComputedStyle(e),i=parseFloat(r.fontSize)||16,s=parseFloat(r.lineHeight);isNaN(s)&&(s=i*1.2);let a=Math.max(1,t.getClientRects().length),l=Math.max(o.height,a*s),c=(l-o.height)/2;return new DOMRect(o.x,o.y-c,o.width,l)}function Ji(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 ut(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function Gc(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function As(e){for(let t of e){let n=hn(t.selector);if(!n&&t.durableSelector&&(n=hn(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)ut(n,o.property,o.modified)}}function Ps(e){for(let t of e){let n=hn(t.selector);if(n)for(let o of t.changes)Gc(n,o.property,o.original)}}function Jc(e){let t=hn(e.selector);if(!t&&e.durableSelector&&(t=hn(e.durableSelector),t)){let n=e.selector.match(/\[data-pm="([^"]+)"\]/)?.[1];n&&t.setAttribute("data-pm",n)}return t}function Yc(e,t){let n=e;for(let o of t)n=n?.childNodes[o]??null;return n?.nodeType===Node.TEXT_NODE?n:null}function Bs(e){for(let t of e){let n=Jc(t);if(!n)continue;let o=Yc(n,t.textNodePath);o&&(o.nodeValue=t.modified)}}function Ds(e){for(let t of e){let n=Jc(t);if(!n)continue;let o=Yc(n,t.textNodePath);o&&(o.nodeValue=t.original)}}function Jr(e,t){if(!e)return null;let n=hn(e);if(!n&&t&&(n=hn(t),n)){let o=e.match(/\[data-pm="([^"]+)"\]/)?.[1];o&&n.setAttribute("data-pm",o)}return n}function Rf(e){e.removeAttribute("data-pm"),e.querySelectorAll("[data-pm]").forEach(t=>t.removeAttribute("data-pm"))}function Lf(e,t){let n=t.match(/\[data-pm="([^"]+)"\]/)?.[1];n&&e.setAttribute("data-pm",n)}function Da(e,t,n){let o=Array.from(e.children).filter(i=>i!==t),r=Math.max(0,Math.min(n,o.length));e.insertBefore(t,o[r]??null)}function Os(e){for(let t of e){let n=Jr(t.targetParentSelector,t.targetParentDurableSelector);if(!n)continue;if(t.operation==="move"){let i=Jr(t.selector,t.durableSelector);if(!i||i===n||i.contains(n))continue;Da(n,i,t.targetIndex);continue}if(Jr(t.selector,t.durableSelector))continue;let o=Jr(t.sourceSelector,t.sourceDurableSelector);if(!o)continue;let r=o.cloneNode(!0);r instanceof Element&&(Rf(r),Lf(r,t.selector),Da(n,r,t.targetIndex))}}function _s(e){for(let t of[...e].reverse()){if(t.operation==="copy"){Jr(t.selector,t.durableSelector)?.remove();continue}let n=Jr(t.selector,t.durableSelector),o=Jr(t.originalParentSelector,t.originalParentDurableSelector);!n||!o||n===o||n.contains(o)||Da(o,n,t.originalIndex??o.children.length)}}function Uc(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){Uc(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Af(r.style,t,n,o)}}}function Af(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 s=t.getPropertyValue(i).trim();Kc(s)&&o.push({name:i,value:s,usage:`var(${i})`})}}}var Hs=null,Pf=5e3;function Oa(){if(Hs&&Date.now()-Hs.timestamp<Pf)return Hs.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{Uc(i.cssRules||i.rules,n,t,e)}catch{}}catch{}let o=document.documentElement.style;for(let i=0;i<o.length;i++){let s=o[i];if(s?.startsWith("--")&&!t.has(s)){t.add(s);let a=n.getPropertyValue(s).trim();Kc(a)&&e.push({name:s,value:a,usage:`var(${s})`})}}let r=e.sort((i,s)=>i.name.localeCompare(s.name));return Hs={variables:r,timestamp:Date.now()},r}function Kc(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 Er(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}import{domToCanvas as Bf}from"modern-screenshot";var Xc="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";function Df(e){if(typeof window>"u")return!1;try{let t=new URL(e,window.location.href);return t.protocol!=="http:"&&t.protocol!=="https:"?!1:t.origin!==window.location.origin}catch{return!1}}function _a(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function Ha(e,t=[],n,o,r=[],i=[]){let s=new Map,a=[];for(let c of e)if(c.groupId){let u=s.get(c.groupId)||[];u.push(c),s.set(c.groupId,u)}else a.push(c);let l=[];for(let[c,u]of s){let d=u.find(f=>f.type!=="text"),p=u.find(f=>f.type==="text");if(d){let f=d.linkedSelector||p?.linkedSelector,m=p?.imageCount||d.imageCount,E=d.pathname||p?.pathname;l.push({id:d.id,type:d.type,instruction:p?.text,...f?{linkedSelector:f}:{},...E?{pathname:E}:{},elements:d.elements||[],...m?{imageCount:m}:{}})}}for(let c of a)l.push({id:c.id,type:c.type,instruction:c.type==="text"?c.text:void 0,...c.linkedSelector?{linkedSelector:c.linkedSelector}:{},...c.pathname?{pathname:c.pathname}:{},elements:c.elements||[],...c.imageCount?{imageCount:c.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:l,styleModifications:t,...r.length>0?{textModifications:r}:{},...i.length>0?{domModifications:i}:{},...n?{inspectedElement:n}:{},...o&&o.length>0?{spacingTokenChanges:o}:{}}}function Of(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 _f(e,t){if(e.length===0)return[];let n=e.map(u=>({annotation:u,bounds:Of(u)})).filter(u=>u.bounds!==null);if(n.length===0)return[];n.sort((u,d)=>u.bounds.minY-d.bounds.minY);let o=Math.min(...n.map(u=>u.bounds.minY)),r=Math.max(...n.map(u=>u.bounds.maxY));if(r-o<=t){let u=(o+r)/2,d=Math.max(0,u-t/2);return[{top:d,bottom:d+t,annotations:e}]}let i=[],s=50,a=Math.max(0,o-s),l=[],c=a;for(let{annotation:u,bounds:d}of n){let p=d.maxY+s;if(p-a<=t)l.push(u),c=Math.max(c,p);else{if(l.length>0){let f=(a+c)/2,m=Math.max(0,f-t/2);i.push({top:m,bottom:m+t,annotations:l})}a=Math.max(0,d.minY-s),l=[u],c=d.maxY+s}}if(l.length>0){let u=(a+c)/2,d=Math.max(0,u-t/2);i.push({top:d,bottom:d+t,annotations:l})}return i}function Hf(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 Ff(e,t,n,o,r){if(e.save(),e.scale(o,o),r)for(let i of t){let s=r.get(i.id);if(!s)continue;let a=s.y-n;e.fillStyle=i.color,e.globalAlpha=.05,e.fillRect(s.x,a,s.width,s.height),e.globalAlpha=1,e.strokeStyle=i.color,e.lineWidth=1,e.setLineDash([2,4]),e.strokeRect(s.x,a,s.width,s.height),e.setLineDash([])}for(let i of t){let s=i.points.map(a=>({x:a.x,y:a.y-n}));switch(e.strokeStyle=i.color,e.fillStyle=i.color,e.lineWidth=i.strokeWidth,e.lineCap="round",e.lineJoin="round",i.type){case"freehand":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y);for(let a=1;a<s.length;a++)e.lineTo(s[a].x,s[a].y);e.stroke();break;case"line":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y),e.lineTo(s[s.length-1].x,s[s.length-1].y),e.stroke();break;case"rectangle":{if(s.length<2)break;let a=s[0],l=s[s.length-1],c=Math.min(a.x,l.x),u=Math.min(a.y,l.y),d=Math.abs(l.x-a.x),p=Math.abs(l.y-a.y);e.strokeRect(c,u,d,p);break}case"circle":{if(s.length<2)break;let a=s[0],l=s[s.length-1],c=(a.x+l.x)/2,u=(a.y+l.y)/2,d=Math.abs(l.x-a.x)/2,p=Math.abs(l.y-a.y)/2;e.beginPath(),e.ellipse(c,u,d,p,0,0,Math.PI*2),e.stroke();break}case"text":{if(!i.text||s.length<1)break;let a=s[0],l=i.fontSize||16;e.font=`${l}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=i.color;let u=(i.imageCount&&i.imageCount>0?`[${i.imageCount} image${i.imageCount>1?"s":""}] ${i.text}`:i.text).split(`
|
|
3
|
+
`),d=l*1.2,p=4,f=0;for(let m of u)f=Math.max(f,e.measureText(m).width);e.fillRect(a.x-p,a.y-p,f+p*2,u.length*d+p*2),e.fillStyle="#ffffff",u.forEach((m,E)=>{e.fillText(m,a.x,a.y+l+E*d)});break}}}e.restore()}async function Ti(e,t,n=[],o){try{let r=o?.dpr??(window.devicePixelRatio||1),i=window.innerWidth,s=window.innerHeight,a=n.filter(d=>(d.status??"pending")==="pending");console.log("[Screenshot] Starting capture with",a.length,"active annotations (filtered",n.length-a.length,"captured)");let l=Hf(a),c=_f(a,s);if(c.length===0){let d=await qc(e,[],window.scrollY,i,s,r,l);return d?[d]:[]}let u=[];for(let d=0;d<c.length;d++){let p=c[d],f=await qc(e,p.annotations,p.top,i,s,r,l);f?u.push(f):console.warn(`[Screenshot] Region ${d+1} failed to capture`)}return console.log("[Screenshot] Capture complete"),u}catch(r){return console.error("[Screenshot] Capture failed:",r),[]}}async function qc(e,t,n,o,r,i,s){try{let a=getComputedStyle(document.documentElement).backgroundColor,c=await Bf(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:a&&a!=="rgba(0, 0, 0, 0)"&&a!=="transparent"?a:"#ffffff",width:o,height:r,style:{transform:`translate(${-window.scrollX}px, ${-n}px)`},fetchFn:async p=>Df(p)?Xc:!1,fetch:{placeholderImage:Xc}}),u=document.createElement("canvas");u.width=o*i,u.height=r*i;let d=u.getContext("2d");return d?(d.drawImage(c,0,0,o*i,r*i,0,0,o*i,r*i),Ff(d,t,n,i,s),new Promise(p=>{u.toBlob(f=>p(f),"image/webp",.8)})):null}catch(a){return console.error("Region capture failed:",a),null}}async function Yi(e){if(e.length===0)return null;if(e.length===1)return e[0];let t=await Promise.all(e.map(a=>new Promise((l,c)=>{let u=new Image;u.onload=()=>l(u),u.onerror=c,u.src=URL.createObjectURL(a)}))),n=t[0].width,o=t.reduce((a,l)=>a+l.height,0),r=document.createElement("canvas");r.width=n,r.height=o;let i=r.getContext("2d");if(!i)return null;let s=0;for(let a of t)i.drawImage(a,0,s),s+=a.height,URL.revokeObjectURL(a.src);return new Promise(a=>{r.toBlob(l=>a(l),"image/webp",.8)})}async function Zc(e,t,n,o,r){try{let i=Array.isArray(e)?e:[e];if(i.length===0)return!1;let s=await Yi(i);if(!s)return!1;let a=s;if(s.type!=="image/png"){let f=new Image,m=URL.createObjectURL(s);await new Promise(x=>{f.onload=()=>x(),f.src=m}),URL.revokeObjectURL(m);let E=document.createElement("canvas");E.width=f.naturalWidth,E.height=f.naturalHeight,E.getContext("2d").drawImage(f,0,0),a=await new Promise(x=>E.toBlob(S=>x(S),"image/png"))}let l={"image/png":a},c=t&&t.length>0,u=n&&n.length>0,d=o&&o.length>0,p=r&&r.length>0;if(c||u||d||p){let f=t?t.filter(m=>(m.status??"pending")==="pending"):[];if(f.length>0||u||d||p){let m=Ha(f,n||[],void 0,void 0,o||[],r||[]),E=new Blob([JSON.stringify(m,null,2)],{type:"text/plain"});l["text/plain"]=E}}return await navigator.clipboard.write([new ClipboardItem(l)]),!0}catch(i){return console.warn("Clipboard write failed:",i),!1}}var Qc={name:"@popmelt.com/core",version:"0.8.4",description:"The design collaboration layer for AI coding agents",license:"PolyForm-Shield-1.0.0",author:"Popmelt <reb@popmelt.com> (https://popmelt.com)",homepage:"https://github.com/popmelt/core",bugs:{url:"https://github.com/popmelt/core/issues"},repository:{type:"git",url:"git+https://github.com/popmelt/core.git"},keywords:["ai","annotations","collaboration","devtools","react","visual-feedback"],bin:{popmelt:"dist/cli.mjs"},sideEffects:!1,engines:{node:">=18.0.0"},scripts:{build:"tsup",clean:"git clean -xdf .turbo node_modules dist",format:'prettier --check "**/*.{ts,tsx}"',lint:"eslint .","pack:smoke":"node scripts/pack-smoke.mjs",prepublishOnly:"pnpm run verify",test:"vitest run","test:watch":"vitest",typecheck:"tsc --noEmit --incremental false",verify:"pnpm run typecheck && pnpm run lint && pnpm run test && pnpm run build && pnpm run pack:smoke"},exports:{".":{source:"./src/index.ts",types:"./dist/index.d.mts",import:"./dist/index.mjs"},"./provider":{source:"./src/components/PopmeltProvider.tsx",types:"./dist/index.d.mts",import:"./dist/index.mjs"},"./server":{source:"./src/server/index.ts",types:"./dist/server.d.mts",import:"./dist/server.mjs"},"./canvas":{source:"./src/canvas/index.ts",import:"./dist/canvas.mjs"},"./next":{source:"./src/plugins/next.ts",import:"./dist/plugin-next.mjs",default:"./dist/plugin-next.mjs"},"./vite":{source:"./src/plugins/vite.ts",types:"./dist/plugin-vite.d.mts",import:"./dist/plugin-vite.mjs",default:"./dist/plugin-vite.mjs"},"./astro":{source:"./src/plugins/astro.ts",types:"./dist/plugin-astro.d.mts",import:"./dist/plugin-astro.mjs",default:"./dist/plugin-astro.mjs"}},files:["dist","LICENSE","README.md"],dependencies:{"modern-screenshot":"4.4.39"},peerDependencies:{"lucide-react":">=1.23.0",next:">=14.0.0",react:">=18.0.0","react-dom":">=18.0.0"},peerDependenciesMeta:{next:{optional:!0}},devDependencies:{"@kit/eslint-config":"workspace:^","@types/react":"19.1.0","@types/react-dom":"19.1.2",eslint:"^9.24.0",jsdom:"26.1.0","lucide-react":"^1.23.0",next:"15.3.8",prettier:"^3.5.3",react:"19.1.0","react-dom":"19.1.0",tsup:"^8.5.1",typescript:"^5.8.3",vitest:"^3.2.4"}};var Fs=Qc.version;import{useCallback as kn,useEffect as Gn,useMemo as Bi,useRef as tn,useState as Lt}from"react";import{useCallback as Mi,useRef as Wf}from"react";function Fa(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let s=(r.x+i.x)/2,a=(r.y+i.y)/2,l=Math.abs(i.x-r.x)/2,c=Math.abs(i.y-r.y)/2;e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.ellipse(s,a,l,c,0,0,Math.PI*2),e.stroke()}function Na(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 s=1;s<t.length-1;s++){let a=t[s],l=t[s+1];if(!a||!l)continue;let c=(a.x+l.x)/2,u=(a.y+l.y)/2;e.quadraticCurveTo(a.x,a.y,c,u)}e.lineTo(i.x,i.y),e.stroke()}}function za(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 $a(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let s=Math.min(r.x,i.x),a=Math.min(r.y,i.y),l=Math.abs(i.x-r.x),c=Math.abs(i.y-r.y);e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.strokeRect(s,a,l,c)}var Wn='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function zf(e,t,n){if(!t||e.measureText(t).width<=n)return[t];let o=t.split(/\s+/),r=[],i="";for(let s of o){let a=i?i+" "+s:s;i&&e.measureText(a).width>n?(r.push(i),i=s):i=a}return i&&r.push(i),r.length>0?r:[t]}function Ui(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function ed(e,t,n){let o=[];for(let r of t)o.push(...zf(e,r,n));return o}function Ki(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 $f(e,t,n){if(e===void 0||t===void 0||n.avoidLeft===void 0&&n.avoidRight===void 0)return!0;let o=typeof window<"u"?window.innerWidth:9999,r=n.avoidLeft??0,i=n.avoidRight??o;return e+t>r&&e<i}function Wa(e,t,n,o,r){let i=typeof window<"u"?window.innerHeight:9999,s=0,a=i;n&&$f(o,r,n)&&(s=n.avoidTop??s,a=n.avoidBottom??a);let l=Math.max(s,a-t);return Math.max(s,Math.min(e,l))}function ja(e,t=12,n,o){let r=t*1.4+8,i=e.y-4,s=e.x-4,a=Wa(i,r,n,s,o);return a===i?e:{...e,y:a+4}}function td(e,t,n,o,r=12,i,s,a){if(!n)return;let l=r*1.4,c=n.replace(/\n/g," "),u=i!==void 0?i+". "+c:c;e.font=`${r}px ${Wn}`,e.textBaseline="middle";let d=s!==void 0?Math.min(400,Math.max(60,window.innerWidth-s-16)):400,p=Ki(e,u,d),f=e.measureText(p).width,m=ja(t,r,a,f+8);e.fillStyle=o,e.fillRect(m.x-4,m.y-4,f+8,l+8),e.fillStyle="#ffffff",e.fillText(p,m.x,m.y+l/2)}var nd=11,Va=4,jf=`600 ${nd}px system-ui, -apple-system, sans-serif`;function Ga(e,t,n){return e.map(o=>({x:o.x-t,y:o.y-n}))}function Vf(e,t,n,o,r,i){let s=String(o);e.font=jf;let l=e.measureText(s).width+Va*2,c=nd+Va*2,u=t-l/2,d=n+i/2+2;e.fillStyle=r,e.fillRect(u,d,l,c),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(s,u+Va,d+c/2)}function Gf(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 od(){let e=Wf(null),t=Mi(()=>{let a=e.current;if(!a)return;let l=a.getContext("2d");l&&l.clearRect(0,0,a.width,a.height)},[]),n=Mi((a,l,c,u)=>{let d=e.current;if(!d)return;let p=d.getContext("2d");if(!p)return;let m=(a.status??(a.captured?"in_flight":"pending"))==="pending"||c?a.color:"#999999";switch(a.type){case"freehand":Na(p,a.points,m,a.strokeWidth);break;case"line":za(p,a.points,m,a.strokeWidth);break;case"rectangle":$a(p,a.points,m,a.strokeWidth);break;case"circle":Fa(p,a.points,m,a.strokeWidth);break;case"text":a.text&&a.points[0]&&td(p,a.points[0],a.text,m,a.fontSize,l,a.points[0].x,u);break}},[]),o=Mi((a,l,c,u)=>{let d=e.current;if(!d||a.length<2)return;let p=d.getContext("2d");if(p)switch(l){case"freehand":Na(p,a,c,u);break;case"line":za(p,a,c,u);break;case"rectangle":$a(p,a,c,u);break;case"circle":Fa(p,a,c,u);break}},[]),r=Mi((a,l)=>{let c=e.current;if(!c||a.points.length<2)return;let u=c.getContext("2d");if(u){if(u.fillStyle="#ffffff",u.strokeStyle=a.color,u.lineWidth=1.5,a.type==="line"){let d=a.points[0],p=a.points[a.points.length-1];[d,p].forEach(f=>{u.beginPath(),u.arc(f.x,f.y,l/2,0,Math.PI*2),u.fill(),u.stroke()});return}if(a.type==="circle"){let d=a.points[0],p=a.points[a.points.length-1],f=Math.min(d.x,p.x),m=Math.max(d.x,p.x),E=Math.min(d.y,p.y),x=Math.max(d.y,p.y),S=(f+m)/2,P=(E+x)/2;[{x:S,y:E},{x:S,y:x},{x:f,y:P},{x:m,y:P}].forEach(D=>{u.beginPath(),u.rect(D.x-l/2,D.y-l/2,l,l),u.fill(),u.stroke()});return}if(a.type==="rectangle"||a.type==="freehand"){let d,p,f,m;if(a.type==="freehand")d=Math.min(...a.points.map(x=>x.x)),p=Math.max(...a.points.map(x=>x.x)),f=Math.min(...a.points.map(x=>x.y)),m=Math.max(...a.points.map(x=>x.y));else{let x=a.points[0],S=a.points[a.points.length-1];d=Math.min(x.x,S.x),p=Math.max(x.x,S.x),f=Math.min(x.y,S.y),m=Math.max(x.y,S.y)}[{x:d,y:f},{x:p,y:f},{x:d,y:m},{x:p,y:m}].forEach(x=>{u.beginPath(),u.rect(x.x-l/2,x.y-l/2,l,l),u.fill(),u.stroke()})}}},[]),i=Mi((a,l,c,u,d,p,f,m=0,E=0,x,S,P)=>{if(t(),a.forEach(L=>{let D={...L,points:Ga(L.points,m,E)},C=x?.get(L.id),G=S?.has(L.id)??!1;n(D,C,G,P)}),l.length>0){let L=Ga(l,m,E);o(L,c,u,d)}if(p&&p.length>0&&f){let D=e.current?.getContext("2d");for(let C of p){let G=a.find(ee=>ee.id===C);if(G){let ee={...G,points:Ga(G.points,m,E)};if(r(ee,f),D&&G.type!=="text"&&x&&!(G.groupId&&a.some(O=>O.groupId===G.groupId&&O.type==="text"))){let O=x.get(G.id);if(O!==void 0){let B=Gf(ee,f);if(B){let v=(G.status??(G.captured?"in_flight":"pending"))==="pending"?G.color:"#999999";Vf(D,B.x,B.y,O,v,f)}}}}}}},[t,n,o,r]),s=Mi(()=>{let a=e.current;if(!a)return;let l=window.devicePixelRatio||1;a.width=window.innerWidth*l,a.height=window.innerHeight*l;let c=a.getContext("2d");c&&c.scale(l,l)},[]);return{canvasRef:e,clearCanvas:t,drawAnnotation:n,drawCurrentPath:o,redrawAll:i,resizeCanvas:s}}import{useEffect as Jf,useRef as Yf}from"react";function rd(){let e=Yf({shift:!1,cmd:!1});return Jf(()=>{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 Uf}from"react";function id(e,t,n,o,r){Uf(()=>{let i=s=>{if(e){if(e.domEdit||e.linkedSelector)return;s.preventDefault(),s.stopPropagation();let l=s.deltaY>0?-2:2;t(c=>c?{...c,fontSize:Math.max(12,Math.min(72,c.fontSize+l))}:null);return}if(!n)return;s.preventDefault();let a=o.find(l=>l.id===n);if(a&&a.type==="text"&&!a.linkedSelector){let l=a.fontSize||12,c=s.deltaY>0?-2:2;r({type:"UPDATE_TEXT_SIZE",payload:{id:n,fontSize:l+c}})}};return window.addEventListener("wheel",i,{passive:!1}),()=>{window.removeEventListener("wheel",i)}},[n,e,o,r,t])}import{useEffect as Ya,useRef as Kf,useState as Ua}from"react";import{Fragment as Xi,jsx as yn,jsxs as Yr}from"react/jsx-runtime";var Cr=22,qi=12,ki=8,Xf=3,qf=250,Ns=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Zf=3e3;function Qf(e){let t=e?.current?.getBoundingClientRect();return!t||typeof window>"u"?{}:t.top<window.innerHeight/2?{avoidTop:t.bottom+ki,avoidLeft:t.left-ki,avoidRight:t.right+ki}:{avoidBottom:t.top-ki,avoidLeft:t.left-ki,avoidRight:t.right+ki}}function eg(e,t,n){if(n.avoidLeft===void 0&&n.avoidRight===void 0)return!0;let o=typeof window<"u"?window.innerWidth:9999,r=n.avoidLeft??0,i=n.avoidRight??o;return e+t>r&&e<i}function Ja(e,t,n){return eg(t,n,e)?e:{}}function tg(e,t,n){let o=n.avoidTop!==void 0?`${n.avoidTop}px`:"0px",r=n.avoidBottom!==void 0?`${n.avoidBottom}px`:"100vh";return`translate(min(0px, calc(100vw - ${e} - 100%)), min(max(0px, calc(${o} - ${t})), calc(${r} - ${t} - 100%)))`}function sd(e,t,n){if(n.avoidTop===void 0&&n.avoidBottom===void 0)return e;let o=typeof window<"u"?window.innerHeight:9999,r=n.avoidTop??0,i=n.avoidBottom??o,s=Math.max(r,i-t);return Math.max(r,Math.min(e,s))}function ng({left:e,top:t,scrollX:n,scrollY:o,avoidTop:r,avoidBottom:i,style:s,children:a,...l}){let c=`calc(${e}px - var(--popmelt-scroll-x, ${n}px))`,u=`calc(${t}px - var(--popmelt-scroll-y, ${o}px))`,d=`calc(${e+qi}px - var(--popmelt-scroll-x, ${n}px))`,p=`calc(${t+qi}px - var(--popmelt-scroll-y, ${o}px))`;return yn("div",{"data-devtools":"badge-hit-area",...l,style:{position:"fixed",left:0,top:0,padding:qi,...s,transform:`translate3d(${c}, ${u}, 0)`,willChange:"transform"},children:yn("div",{style:{transform:tg(d,p,{avoidTop:r,avoidBottom:i})},children:a})})}function ad({annotations:e,supersededAnnotations:t,inFlightIds:n,activeIds:o,queuePositions:r,scrollX:i,scrollY:s,annotationGroupMap:a,onViewThread:l,onSelectAnnotation:c,onHoverAnnotation:u,canvasRef:d,toolbarRef:p}){let f=Kf(null),[m,E]=Ua(0),[x,S]=Ua(()=>Math.floor(Math.random()*Ns.length)),P=!!(n&&n.size>0);Ya(()=>{if(!P)return;let g=setInterval(()=>{E(b=>(b+1)%Xf)},qf),v=setInterval(()=>{S(b=>(b+1)%Ns.length)},Zf);return()=>{clearInterval(g),clearInterval(v)}},[P]),Ya(()=>{let g=f.current;if(!g)return;let v=null,b=()=>{v=null,g.style.setProperty("--popmelt-scroll-x",`${window.scrollX}px`),g.style.setProperty("--popmelt-scroll-y",`${window.scrollY}px`)},ie=()=>{v===null&&(v=window.requestAnimationFrame(b))};return b(),window.addEventListener("scroll",ie,{passive:!0}),window.addEventListener("resize",ie),()=>{window.removeEventListener("scroll",ie),window.removeEventListener("resize",ie),v!==null&&window.cancelAnimationFrame(v)}},[]);let L=[];for(let g of e){if(g.type!=="text"||!g.text||!g.points[0]||t.has(g))continue;let v=g.groupId?e.filter(Oe=>Oe.groupId===g.groupId):[g],b=g.status??"pending",ie=v.reduce((Oe,He)=>Oe+(He.replyCount??0),0),ve=!!(n&&(n.has(g.id)||v.some(Oe=>n.has(Oe.id))))||g.status==="in_flight"||v.some(Oe=>Oe.status==="in_flight"),ce=v.some(Oe=>Oe.status==="resolved"&&(Oe.replyCount??0)>0||Oe.status==="needs_review"),ue=v.some(Oe=>Oe.threadId);if(!ve&&b!=="resolved"&&b!=="needs_review"&&!ce&&!ue)continue;let we=g.threadId||v.find(Oe=>Oe.threadId)?.threadId,Ue=b==="needs_review"||v.some(Oe=>Oe.status==="needs_review"),V=b==="waiting_input"||v.some(Oe=>Oe.status==="waiting_input"),A=g.points[0],J=g.fontSize||12,ke=J*1.4,De=a.get(g.id),pe=g.text.replace(/\n/g," "),Ge=De!==void 0?De+". "+pe:pe,Ze=d?.current?.getContext("2d")??document.createElement("canvas").getContext("2d");if(!Ze)continue;Ze.font=`${J}px ${Wn}`;let Te=A.x-i,Q=Ui(Te),Ie=Ki(Ze,Ge,Q),mt=Ze.measureText(Ie).width,We=ve&&!!o&&!o.has(g.id)&&!v.some(Oe=>o.has(Oe.id));L.push({id:g.id,threadId:we,linkedSelector:g.linkedSelector||v.find(Oe=>Oe.linkedSelector)?.linkedSelector,x:A.x+mt+4,y:A.y-4,size:ke+8,color:g.color,isInFlight:ve,isQueued:We,queuePosition:void 0,isNeedsReview:Ue,isQuestion:V,replyCount:ie})}let D=L.filter(g=>g.isQueued);if(D.length>0&&D.forEach((g,v)=>{g.queuePosition=r?.get(g.id)??`(${v+1}/${D.length})`}),L.length===0)return null;let C=2,G=d?.current?.getContext("2d")??document.createElement("canvas").getContext("2d"),ee=L.map(g=>{let v;g.isQueued?v=g.queuePosition?`queued ${g.queuePosition}`:"queued":g.isInFlight?v=Ns[x]??"thinking":g.isQuestion?v="? Question":g.replyCount>0?v=`${g.replyCount} ${g.replyCount===1?"reply":"replies"}`:v="View";let b=!g.isQueued,ie=b?11:0,ve=b?4:0,ce=v.length*7.2;return G&&(G.font=`12px ${Wn}`,ce=G.measureText(v).width),4+ie+ve+ce+4}),se=Qf(p),O=[];for(let g=0;g<L.length;g++){let v=L[g].y-s,b=L[g].x-i,ie=Ja(se,b,ee[g]),ve=sd(v,L[g].size,ie),ce=ve+L[g].size,ue=b;for(let we=0;we<g;we++){let Ue=L[we].y-s,V=Ja(se,O[we],ee[we]),A=sd(Ue,L[we].size,V),J=A+L[we].size;if(!(ve<J&&ce>A))continue;let De=O[we]+ee[we];ue<De+C&&(ue=De+C)}O.push(ue)}let B={position:"fixed",inset:0,pointerEvents:"none",zIndex:9999,"--popmelt-scroll-x":`${i}px`,"--popmelt-scroll-y":`${s}px`};return Yr("div",{ref:f,"data-devtools":"annotation-badge-layer",style:B,children:[yn("style",{dangerouslySetInnerHTML:{__html:`
|
|
4
4
|
[data-devtools="annotation-badge-layer"] [data-devtools="annotation-badge"]::selection,
|
|
5
5
|
[data-devtools="annotation-badge-layer"] [data-devtools="annotation-badge"] *::selection {
|
|
6
6
|
background: #000000;
|
|
7
7
|
color: #ffffff;
|
|
8
8
|
}
|
|
9
|
-
`}}),L.map((g,v)=>{let b=!!g.threadId,ie=Va(se,O[v],ee[v]);return yn(Qf,{left:O[v]+i-Xi,top:g.y-Xi,scrollX:i,scrollY:s,avoidTop:ie.avoidTop,avoidBottom:ie.avoidBottom,onMouseDown:b?ve=>ve.stopPropagation():void 0,onClick:b?ve=>{if(ve.stopPropagation(),c?.(g.id),l?.(g.threadId),g.linkedSelector)try{let ce=document.querySelector(g.linkedSelector);if(ce){let ue=ce.getBoundingClientRect();(ue.bottom<0||ue.top>window.innerHeight)&&ce.scrollIntoView({behavior:"smooth",block:"center"})}}catch{}}:void 0,onMouseEnter:u?()=>u(g.id):void 0,onMouseLeave:u?()=>u(null):void 0,style:{pointerEvents:b?"auto":"none",cursor:b?"pointer":void 0,zIndex:9999},children:yn("div",{"data-devtools":"annotation-badge",style:{height:g.size,display:"flex",alignItems:"center",backgroundColor:g.color,fontFamily:Wn,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:g.isQueued?Yr("span",{style:{opacity:.5,color:"inherit"},children:["queued",g.queuePosition?` ${g.queuePosition}`:""]}):g.isInFlight?Yr(Ki,{children:[yn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:m===1?Yr(Ki,{children:[yn("circle",{cx:"7",cy:"7",r:"2"}),yn("circle",{cx:"17",cy:"7",r:"2"}),yn("circle",{cx:"7",cy:"17",r:"2"}),yn("circle",{cx:"17",cy:"17",r:"2"})]}):Yr(Ki,{children:[yn("circle",{cx:"12",cy:"6",r:"2"}),yn("circle",{cx:"6",cy:"12",r:"2"}),yn("circle",{cx:"18",cy:"12",r:"2"}),yn("circle",{cx:"12",cy:"18",r:"2"})]})}),yn("span",{style:{opacity:.7,color:"inherit"},children:Fs[x]})]}):Yr(Ki,{children:[g.isQuestion||g.isNeedsReview?yn("span",{style:{fontWeight:700,color:"inherit"},children:"?"}):yn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:yn("polyline",{points:"4 12 10 18 20 6"})}),yn("span",{style:{opacity:.7,color:"inherit"},children:g.isQuestion?"Question":g.replyCount>0?`${g.replyCount} ${g.replyCount===1?"reply":"replies"}`:"View"})]})})},g.id)})]})}function Ya({inFlightSelectorColors:e,animated:t=!0}){let[n,o]=Ja([]);return Ga(()=>{if(e.size===0){o([]);return}let r=null,i=()=>{let l=[];for(let[c,u]of e){let d=hn(c);if(!d)continue;let p=d.getBoundingClientRect();l.push({selector:c,top:p.top,left:p.left,width:p.width,height:p.height,color:u})}o(l)},s=()=>{r&&cancelAnimationFrame(r),r=requestAnimationFrame(i)};i(),window.addEventListener("scroll",s,!0),window.addEventListener("resize",s,!0);let a=new MutationObserver(s);return a.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s,!0),a.disconnect(),r&&cancelAnimationFrame(r)}},[e]),n.length===0?null:Yr(Ki,{children:[t&&yn("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(r=>yn("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:yn("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:yn("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 Ur(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),s=parseInt(o[3],16);return`rgba(${r}, ${i}, ${s}, ${t})`}return`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function Ns(e){let t=new Set,n=new Map;for(let i of e){if(!i.linkedSelector)continue;let s=n.get(i.linkedSelector)||[];s.push(i),n.set(i.linkedSelector,s)}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((a,l)=>l.timestamp-a.timestamp);let s=i[0];s.groupId&&r.add(s.groupId);for(let a=1;a<i.length;a++){let l=i[a];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 sd,useLayoutEffect as eg,useState as ad}from"react";import{jsx as Ua,jsxs as cd}from"react/jsx-runtime";function tg(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 ld=["top-left","top-right","bottom-right","bottom-left"];function dd({element:e,radius:t,accentColor:n,hoveredCorner:o,draggingCorner:r,cursorViewport:i}){let[s,a]=ad(null),[l,c]=ad(!1);if(sd(()=>{let S=A=>{(A.key==="Meta"||A.key==="Control")&&c(!0)},B=A=>{(A.key==="Meta"||A.key==="Control")&&c(!1)},L=()=>c(!1);return window.addEventListener("keydown",S,!0),window.addEventListener("keyup",B,!0),window.addEventListener("blur",L),()=>{window.removeEventListener("keydown",S,!0),window.removeEventListener("keyup",B,!0),window.removeEventListener("blur",L)}},[]),sd(()=>{if(!e){a(null);return}let S=()=>{a(e.getBoundingClientRect())};return S(),window.addEventListener("scroll",S,{passive:!0}),window.addEventListener("resize",S,{passive:!0}),()=>{window.removeEventListener("scroll",S),window.removeEventListener("resize",S)}},[e]),eg(()=>{e&&a(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!s)return null;let u=s.width,d=s.height,p=tg(n,.2),f={"top-left":{x:0,y:t["top-left"]},"top-right":{x:u,y:t["top-right"]},"bottom-right":{x:u,y:d-t["bottom-right"]},"bottom-left":{x:0,y:d-t["bottom-left"]}},m=new Set,E=r??o;if(E)if(l)m.add(E);else for(let S of ld)m.add(S);let x={position:"fixed",top:s.top,left:s.left,width:u,height:d,pointerEvents:"none",zIndex:9996,overflow:"visible"};return cd("div",{"data-devtools":"border-radius-handles",style:x,children:[cd("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${u} ${d}`,children:[Ua("rect",{x:"0.5",y:"0.5",width:Math.max(0,u-1),height:Math.max(0,d-1),fill:"none",stroke:p,strokeWidth:"1"}),ld.map(S=>{let B=f[S],L=m.has(S);return Ua("circle",{cx:B.x,cy:B.y,r:S===(r??o)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:S===(r??o)?4:2,paintOrder:"stroke"},S)})]}),i&&E&&(()=>{let S=Math.round(t[E]);return Ua("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:S})})()]})}import{useEffect as ng,useLayoutEffect as og,useState as ud}from"react";import{jsx as Mr,jsxs as Ka}from"react/jsx-runtime";function rg(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 qi(e,t){return e.left<t.right&&e.right>t.left&&e.top<t.bottom&&e.bottom>t.top}function Tr(e,t,n){return n<t?t:Math.max(t,Math.min(n,e))}function pd(e,t,n,o){let r=Math.max(e,0),i=Math.min(t,n);return(i>r?(r+i)/2:Tr((e+t)/2,o,n-o))-e}function fd(e,t){return!!t&&qi(e,t)}function gd({element:e,axis:t,accentColor:n,avoidElement:o}){let[r,i]=ud(null),[s,a]=ud(null);if(ng(()=>{if(!e){i(null),a(null);return}let Me=()=>{i(e.getBoundingClientRect()),a(o?.getBoundingClientRect()??null)};return Me(),window.addEventListener("scroll",Me,{passive:!0}),window.addEventListener("resize",Me,{passive:!0}),()=>{window.removeEventListener("scroll",Me),window.removeEventListener("resize",Me)}},[e,o]),og(()=>{e&&(i(e.getBoundingClientRect()),a(o?.getBoundingClientRect()??null))},[e,t,o]),!r)return null;let l=r.width,c=r.height,u=Math.round(l),d=Math.round(c),p=rg(n,.75),f=6,m=`${u} \xD7 ${d}`,E=Math.max(48,m.length*8+8),x=19,S=6,B={position:"absolute",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:1},L={position:"fixed",top:r.top,left:r.left,width:l,height:c,pointerEvents:"none",zIndex:9998,overflow:"visible"},A=28,C=!!s&&qi({left:r.left,right:r.right,top:r.top-A,bottom:r.top+A},s),U=!!s&&qi({left:r.left,right:r.right,top:r.bottom-A,bottom:r.bottom+A},s),ee=!!s&&qi({left:r.right-A,right:r.right+A+50,top:r.top,bottom:r.bottom},s),se=!!s&&qi({left:r.left-A-50,right:r.left+A,top:r.top,bottom:r.bottom},s),O=r.top>=0&&r.top<=window.innerHeight,D=r.bottom>=0&&r.bottom<=window.innerHeight,g=r.left>=0&&r.left<=window.innerWidth,v=r.right>=0&&r.right<=window.innerWidth,b="top";!O&&D?b="bottom":O&&!D?b="top":C&&!U&&(b="bottom");let ie="right";!v&&g?ie="left":v&&!g?ie="right":ee&&!se&&(ie="left");let ve=b==="top"?O?0:Tr(0-r.top,0,c):D?c:Tr(window.innerHeight-r.top,0,c),ce=ie==="right"?v?l:Tr(window.innerWidth-r.left,0,l):g?0:Tr(0-r.left,0,l),ue=Tr(pd(r.left,r.right,window.innerWidth,8),8,Math.max(8,l-8)),we=Tr(pd(r.top,r.bottom,window.innerHeight,8),8,Math.max(8,c-8)),Ue=r.left+ue-E/2,V={left:Ue,right:Ue+E,top:r.bottom+S,bottom:r.bottom+S+x},P={left:Ue,right:Ue+E,top:r.top-S-x,bottom:r.top-S},J=V.bottom<=window.innerHeight&&V.right>=0&&V.left<=window.innerWidth,ke=P.top>=0&&P.right>=0&&P.left<=window.innerWidth,De=J&&!fd(V,s),pe=ke&&!fd(P,s),Ge=De?"below":pe?"above":"inside",Ze=Ge==="below"?c+S:Ge==="above"?-S-x:Tr(we-x/2,4,Math.max(4,c-x-4));return Ka("div",{"data-devtools":"dimension-measure-badge",style:L,children:[Mr("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${l} ${c}`,children:t==="width"?Ka("g",{children:[Mr("line",{x1:"0",y1:ve,x2:l,y2:ve,stroke:p,strokeWidth:"1"}),Mr("line",{x1:"0",y1:ve-f/2,x2:"0",y2:ve+f/2,stroke:p,strokeWidth:"1"}),Mr("line",{x1:l,y1:ve-f/2,x2:l,y2:ve+f/2,stroke:p,strokeWidth:"1"})]}):Ka("g",{children:[Mr("line",{x1:ce,y1:"0",x2:ce,y2:c,stroke:p,strokeWidth:"1"}),Mr("line",{x1:ce-f/2,y1:"0",x2:ce+f/2,y2:"0",stroke:p,strokeWidth:"1"}),Mr("line",{x1:ce-f/2,y1:c,x2:ce+f/2,y2:c,stroke:p,strokeWidth:"1"})]})}),Mr("div",{style:{...B,left:ue,top:Ze,transform:"translateX(-50%)"},children:m})]})}import{useEffect as ig,useState as sg}from"react";import{Fragment as ag,jsx as Xa,jsxs as ki}from"react/jsx-runtime";function Zo({element:e,isSelected:t=!1,elementInfo:n,color:o="#3b82f6",annotationNumber:r,changeCount:i,hideTooltip:s=!1}){let[a,l]=sg(null);if(ig(()=>{if(!e){l(null);return}let C=()=>{let U=e.getBoundingClientRect();l(U)};return C(),window.addEventListener("scroll",C,{passive:!0}),window.addEventListener("resize",C,{passive:!0}),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}},[e]),!a||!e)return null;let c={position:"fixed",top:a.top,left:a.left,width:a.width,height:a.height,pointerEvents:"none",zIndex:9996,overflow:"visible"},u=e.tagName.toLowerCase(),d=e.id?`#${e.id}`:"",p=e.classList.length>0?"."+Array.from(e.classList).slice(0,2).join("."):"",f=n?.reactComponent,m=f?`<${f}> ${u}${d}${p}`:`${u}${d}${p}`,E=22,x=a.height>=window.innerHeight,S=x?0:a.top>=E?a.top-E:a.bottom,B=x?{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:S,left:a.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=!s&&ki("div",{"data-devtools":"tooltip",style:B,children:[r!==void 0&&ki("span",{children:[r,"."]}),Xa("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:m}),i!==void 0&&i>0&&ki("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return ki(ag,{children:[ki("div",{"data-devtools":"highlight",style:c,children:[ki("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:[Xa("rect",{x:"2.5",y:"2.5",width:Math.max(0,a.width-5),height:Math.max(0,a.height-5),fill:Ur(o,.05),stroke:"none"}),Xa("rect",{x:"0.5",y:"0.5",width:Math.max(0,a.width-1),height:Math.max(0,a.height-1),fill:"none",stroke:o,strokeWidth:"1",...!t&&{strokeDasharray:"2 4"}})]}),x&&A]}),!x&&A]})}import{useEffect as md,useLayoutEffect as lg,useState as qa}from"react";import{jsx as mr,jsxs as Qa}from"react/jsx-runtime";function Za(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 el({element:e,gap:t,accentColor:n,hoveredAxis:o,draggingAxis:r,cursorViewport:i,isAutoGap:s=!1,refreshKey:a=0}){let[l,c]=qa(null),[u,d]=qa([]),[p,f]=qa(!1);if(md(()=>{let se=g=>{(g.key==="Meta"||g.key==="Control")&&f(!0)},O=g=>{(g.key==="Meta"||g.key==="Control")&&f(!1)},D=()=>f(!1);return window.addEventListener("keydown",se,!0),window.addEventListener("keyup",O,!0),window.addEventListener("blur",D),()=>{window.removeEventListener("keydown",se,!0),window.removeEventListener("keyup",O,!0),window.removeEventListener("blur",D)}},[]),md(()=>{if(!e){c(null),d([]);return}let se=()=>{c(e.getBoundingClientRect()),d(gr(e))};return se(),window.addEventListener("scroll",se,{passive:!0}),window.addEventListener("resize",se,{passive:!0}),()=>{window.removeEventListener("scroll",se),window.removeEventListener("resize",se)}},[e]),lg(()=>{e&&(c(e.getBoundingClientRect()),d(gr(e)))},[e,t.row,t.column,a]),!l||u.length===0)return null;let m=l.width,E=l.height,x="pm-gap-stripe-pattern",S=Za(n,.25),B=Za(n,.1),L=Za(n,.2),A=8,C=2,U={position:"fixed",top:l.top,left:l.left,width:m,height:E,pointerEvents:"none",zIndex:9996,overflow:"visible"},ee=r??o;return Qa("div",{"data-devtools":"gap-handles",style:U,children:[Qa("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${m} ${E}`,children:[mr("defs",{children:mr("pattern",{id:x,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:mr("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:S,strokeWidth:"1.5"})})}),mr("rect",{x:"0.5",y:"0.5",width:Math.max(0,m-1),height:Math.max(0,E-1),fill:"none",stroke:L,strokeWidth:"1"}),u.map((se,O)=>{let D=se.x-l.left,g=se.y-l.top,v=se.w,b=se.h,ie=p?se.axis===ee:!0;return(se.axis==="row"?t.row:t.column)===0?null:Qa("g",{opacity:ie?1:.6,children:[mr("rect",{x:D,y:g,width:v,height:b,fill:B}),mr("rect",{x:D,y:g,width:v,height:b,fill:`url(#${x})`})]},O)}),ee&&(()=>{let se=u.filter(P=>P.axis===ee);if(se.length===0)return null;let O=se[0];if(i&&se.length>1){let P=1/0;for(let J of se){let ke=J.x+J.w/2,De=J.y+J.h/2,pe=Math.abs(i.x-ke)+Math.abs(i.y-De);pe<P&&(P=pe,O=J)}}let D=O.x-l.left,g=O.y-l.top,v=O.w,b=O.h,ie=D+v/2,ve=g+b/2;if(s)return mr("circle",{cx:ie,cy:ve,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let ce=ee==="column",ue=ce?C:A,we=ce?A:C,Ue=ie-ue/2,V=ve-we/2;return mr("rect",{x:Ue,y:V,width:ue,height:we,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&ee&&(()=>{let se=s?"auto":String(Math.round(ee==="row"?t.row:t.column));return mr("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:se})})()]})}import{useCallback as fg,useEffect as gg,useState as mg}from"react";import{useEffect as cg,useState as hd}from"react";var dg=3,ug=250,tl=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],pg=3e3;function yd(e){let[t,n]=hd(0),[o,r]=hd(()=>Math.floor(Math.random()*tl.length));return cg(()=>{if(!e)return;let i=setInterval(()=>n(a=>(a+1)%dg),ug),s=setInterval(()=>r(a=>(a+1)%tl.length),pg);return()=>{clearInterval(i),clearInterval(s)}},[e]),{charIndex:t,word:tl[o]}}import{Fragment as nl,jsx as mo,jsxs as Kr}from"react/jsx-runtime";function hg(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 bd=22,Zi=12,zs=8;function yg(e,t,n){if(n.avoidLeft===void 0&&n.avoidRight===void 0)return!0;let o=typeof window<"u"?window.innerWidth:9999,r=n.avoidLeft??0,i=n.avoidRight??o;return e+t>r&&e<i}function bg(e,t,n){return yg(t,n,e)?e:{}}function vg(e){let t=`(${e.changeCount} ${e.changeCount===1?"change":"changes"})`;return Math.min(400,44+e.label.length*7.2+t.length*7.2)}function xg(e,t,n,o){let r=n!==void 0?`${n}px`:"0px",i=o!==void 0?`${o}px`:"100vh";return`translate(min(0px, calc(100vw - max(0px, ${e}px) - 100%)), min(max(0px, calc(${r} - max(0px, ${t}px))), calc(${i} - max(0px, ${t}px) - 100%)))`}function Sg({left:e,top:t,avoidTop:n,avoidBottom:o,style:r,children:i,...s}){let a=e+Zi,l=t+Zi;return mo("div",{"data-devtools":"badge-hit-area",...s,style:{position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:Zi,...r},children:mo("div",{style:{transform:xg(a,l,n,o)},children:i})})}function vd({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:o,dispatch:r,inFlightSelectors:i,toolbarRef:s,onHoverSelector:a}){let[l,c]=mg([]),u=i&&i.size>0,{charIndex:d,word:p}=yd(!!u);gg(()=>{if(t){c([]);return}let L=null,A=()=>{let ee=[];e.forEach((se,O)=>{let D=hn(se.selector);if(!D)return;let g=D.getBoundingClientRect();ee.push({selector:se.selector,modIndex:O,top:g.top>=bd?g.top-bd:g.bottom,left:g.left,label:hg(se),changeCount:se.changes.length,annotationNumber:o+O+1})}),c(ee)},C=()=>{L&&cancelAnimationFrame(L),L=requestAnimationFrame(A)};A(),window.addEventListener("scroll",C,!0),window.addEventListener("resize",C,!0);let U=new MutationObserver(C);return U.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",C),document.fonts.ready.then(C),()=>{window.removeEventListener("scroll",C,!0),window.removeEventListener("resize",C,!0),window.removeEventListener("load",C),U.disconnect(),L&&cancelAnimationFrame(L)}},[e,t,o]);let f=fg(L=>{let A=e[L];if(!A)return;let C=hn(A.selector);C&&(r({type:"SELECT_ANNOTATION",payload:{id:null}}),r({type:"SET_TOOL",payload:"inspector"}),r({type:"SELECT_ELEMENT",payload:{el:C,info:A.element}}))},[e,r]);if(l.length===0)return null;let m=s?.current?.getBoundingClientRect(),E=m?m.top<window.innerHeight/2:!1,x=m?{avoidTop:E?m.bottom+zs:void 0,avoidBottom:E?void 0:m.top-zs,avoidLeft:m.left-zs,avoidRight:m.right+zs}:{},S={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},B={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return Kr(nl,{children:[mo("style",{dangerouslySetInnerHTML:{__html:`
|
|
9
|
+
`}}),L.map((g,v)=>{let b=!!g.threadId,ie=Ja(se,O[v],ee[v]);return yn(ng,{left:O[v]+i-qi,top:g.y-qi,scrollX:i,scrollY:s,avoidTop:ie.avoidTop,avoidBottom:ie.avoidBottom,onMouseDown:b?ve=>ve.stopPropagation():void 0,onClick:b?ve=>{if(ve.stopPropagation(),c?.(g.id),l?.(g.threadId),g.linkedSelector)try{let ce=document.querySelector(g.linkedSelector);if(ce){let ue=ce.getBoundingClientRect();(ue.bottom<0||ue.top>window.innerHeight)&&ce.scrollIntoView({behavior:"smooth",block:"center"})}}catch{}}:void 0,onMouseEnter:u?()=>u(g.id):void 0,onMouseLeave:u?()=>u(null):void 0,style:{pointerEvents:b?"auto":"none",cursor:b?"pointer":void 0,zIndex:9999},children:yn("div",{"data-devtools":"annotation-badge",style:{height:g.size,display:"flex",alignItems:"center",backgroundColor:g.color,fontFamily:Wn,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:g.isQueued?Yr("span",{style:{opacity:.5,color:"inherit"},children:["queued",g.queuePosition?` ${g.queuePosition}`:""]}):g.isInFlight?Yr(Xi,{children:[yn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:m===1?Yr(Xi,{children:[yn("circle",{cx:"7",cy:"7",r:"2"}),yn("circle",{cx:"17",cy:"7",r:"2"}),yn("circle",{cx:"7",cy:"17",r:"2"}),yn("circle",{cx:"17",cy:"17",r:"2"})]}):Yr(Xi,{children:[yn("circle",{cx:"12",cy:"6",r:"2"}),yn("circle",{cx:"6",cy:"12",r:"2"}),yn("circle",{cx:"18",cy:"12",r:"2"}),yn("circle",{cx:"12",cy:"18",r:"2"})]})}),yn("span",{style:{opacity:.7,color:"inherit"},children:Ns[x]})]}):Yr(Xi,{children:[g.isQuestion||g.isNeedsReview?yn("span",{style:{fontWeight:700,color:"inherit"},children:"?"}):yn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:yn("polyline",{points:"4 12 10 18 20 6"})}),yn("span",{style:{opacity:.7,color:"inherit"},children:g.isQuestion?"Question":g.replyCount>0?`${g.replyCount} ${g.replyCount===1?"reply":"replies"}`:"View"})]})})},g.id)})]})}function Ka({inFlightSelectorColors:e,animated:t=!0}){let[n,o]=Ua([]);return Ya(()=>{if(e.size===0){o([]);return}let r=null,i=()=>{let l=[];for(let[c,u]of e){let d=hn(c);if(!d)continue;let p=d.getBoundingClientRect();l.push({selector:c,top:p.top,left:p.left,width:p.width,height:p.height,color:u})}o(l)},s=()=>{r&&cancelAnimationFrame(r),r=requestAnimationFrame(i)};i(),window.addEventListener("scroll",s,!0),window.addEventListener("resize",s,!0);let a=new MutationObserver(s);return a.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s,!0),a.disconnect(),r&&cancelAnimationFrame(r)}},[e]),n.length===0?null:Yr(Xi,{children:[t&&yn("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(r=>yn("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:yn("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:yn("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 Ur(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),s=parseInt(o[3],16);return`rgba(${r}, ${i}, ${s}, ${t})`}return`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function zs(e){let t=new Set,n=new Map;for(let i of e){if(!i.linkedSelector)continue;let s=n.get(i.linkedSelector)||[];s.push(i),n.set(i.linkedSelector,s)}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((a,l)=>l.timestamp-a.timestamp);let s=i[0];s.groupId&&r.add(s.groupId);for(let a=1;a<i.length;a++){let l=i[a];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 ld,useLayoutEffect as og,useState as cd}from"react";import{jsx as Xa,jsxs as ud}from"react/jsx-runtime";function rg(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 dd=["top-left","top-right","bottom-right","bottom-left"];function pd({element:e,radius:t,accentColor:n,hoveredCorner:o,draggingCorner:r,cursorViewport:i}){let[s,a]=cd(null),[l,c]=cd(!1);if(ld(()=>{let S=D=>{(D.key==="Meta"||D.key==="Control")&&c(!0)},P=D=>{(D.key==="Meta"||D.key==="Control")&&c(!1)},L=()=>c(!1);return window.addEventListener("keydown",S,!0),window.addEventListener("keyup",P,!0),window.addEventListener("blur",L),()=>{window.removeEventListener("keydown",S,!0),window.removeEventListener("keyup",P,!0),window.removeEventListener("blur",L)}},[]),ld(()=>{if(!e){a(null);return}let S=()=>{a(e.getBoundingClientRect())};return S(),window.addEventListener("scroll",S,{passive:!0}),window.addEventListener("resize",S,{passive:!0}),()=>{window.removeEventListener("scroll",S),window.removeEventListener("resize",S)}},[e]),og(()=>{e&&a(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!s)return null;let u=s.width,d=s.height,p=rg(n,.2),f={"top-left":{x:0,y:t["top-left"]},"top-right":{x:u,y:t["top-right"]},"bottom-right":{x:u,y:d-t["bottom-right"]},"bottom-left":{x:0,y:d-t["bottom-left"]}},m=new Set,E=r??o;if(E)if(l)m.add(E);else for(let S of dd)m.add(S);let x={position:"fixed",top:s.top,left:s.left,width:u,height:d,pointerEvents:"none",zIndex:9996,overflow:"visible"};return ud("div",{"data-devtools":"border-radius-handles",style:x,children:[ud("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${u} ${d}`,children:[Xa("rect",{x:"0.5",y:"0.5",width:Math.max(0,u-1),height:Math.max(0,d-1),fill:"none",stroke:p,strokeWidth:"1"}),dd.map(S=>{let P=f[S],L=m.has(S);return Xa("circle",{cx:P.x,cy:P.y,r:S===(r??o)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:S===(r??o)?4:2,paintOrder:"stroke"},S)})]}),i&&E&&(()=>{let S=Math.round(t[E]);return Xa("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:S})})()]})}import{useEffect as ig,useLayoutEffect as sg,useState as fd}from"react";import{jsx as Tr,jsxs as qa}from"react/jsx-runtime";function ag(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 Zi(e,t){return e.left<t.right&&e.right>t.left&&e.top<t.bottom&&e.bottom>t.top}function Mr(e,t,n){return n<t?t:Math.max(t,Math.min(n,e))}function gd(e,t,n,o){let r=Math.max(e,0),i=Math.min(t,n);return(i>r?(r+i)/2:Mr((e+t)/2,o,n-o))-e}function md(e,t){return!!t&&Zi(e,t)}function hd({element:e,axis:t,accentColor:n,avoidElement:o}){let[r,i]=fd(null),[s,a]=fd(null);if(ig(()=>{if(!e){i(null),a(null);return}let Te=()=>{i(e.getBoundingClientRect()),a(o?.getBoundingClientRect()??null)};return Te(),window.addEventListener("scroll",Te,{passive:!0}),window.addEventListener("resize",Te,{passive:!0}),()=>{window.removeEventListener("scroll",Te),window.removeEventListener("resize",Te)}},[e,o]),sg(()=>{e&&(i(e.getBoundingClientRect()),a(o?.getBoundingClientRect()??null))},[e,t,o]),!r)return null;let l=r.width,c=r.height,u=Math.round(l),d=Math.round(c),p=ag(n,.75),f=6,m=`${u} \xD7 ${d}`,E=Math.max(48,m.length*8+8),x=19,S=6,P={position:"absolute",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:1},L={position:"fixed",top:r.top,left:r.left,width:l,height:c,pointerEvents:"none",zIndex:9998,overflow:"visible"},D=28,C=!!s&&Zi({left:r.left,right:r.right,top:r.top-D,bottom:r.top+D},s),G=!!s&&Zi({left:r.left,right:r.right,top:r.bottom-D,bottom:r.bottom+D},s),ee=!!s&&Zi({left:r.right-D,right:r.right+D+50,top:r.top,bottom:r.bottom},s),se=!!s&&Zi({left:r.left-D-50,right:r.left+D,top:r.top,bottom:r.bottom},s),O=r.top>=0&&r.top<=window.innerHeight,B=r.bottom>=0&&r.bottom<=window.innerHeight,g=r.left>=0&&r.left<=window.innerWidth,v=r.right>=0&&r.right<=window.innerWidth,b="top";!O&&B?b="bottom":O&&!B?b="top":C&&!G&&(b="bottom");let ie="right";!v&&g?ie="left":v&&!g?ie="right":ee&&!se&&(ie="left");let ve=b==="top"?O?0:Mr(0-r.top,0,c):B?c:Mr(window.innerHeight-r.top,0,c),ce=ie==="right"?v?l:Mr(window.innerWidth-r.left,0,l):g?0:Mr(0-r.left,0,l),ue=Mr(gd(r.left,r.right,window.innerWidth,8),8,Math.max(8,l-8)),we=Mr(gd(r.top,r.bottom,window.innerHeight,8),8,Math.max(8,c-8)),Ue=r.left+ue-E/2,V={left:Ue,right:Ue+E,top:r.bottom+S,bottom:r.bottom+S+x},A={left:Ue,right:Ue+E,top:r.top-S-x,bottom:r.top-S},J=V.bottom<=window.innerHeight&&V.right>=0&&V.left<=window.innerWidth,ke=A.top>=0&&A.right>=0&&A.left<=window.innerWidth,De=J&&!md(V,s),pe=ke&&!md(A,s),Ge=De?"below":pe?"above":"inside",Ze=Ge==="below"?c+S:Ge==="above"?-S-x:Mr(we-x/2,4,Math.max(4,c-x-4));return qa("div",{"data-devtools":"dimension-measure-badge",style:L,children:[Tr("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${l} ${c}`,children:t==="width"?qa("g",{children:[Tr("line",{x1:"0",y1:ve,x2:l,y2:ve,stroke:p,strokeWidth:"1"}),Tr("line",{x1:"0",y1:ve-f/2,x2:"0",y2:ve+f/2,stroke:p,strokeWidth:"1"}),Tr("line",{x1:l,y1:ve-f/2,x2:l,y2:ve+f/2,stroke:p,strokeWidth:"1"})]}):qa("g",{children:[Tr("line",{x1:ce,y1:"0",x2:ce,y2:c,stroke:p,strokeWidth:"1"}),Tr("line",{x1:ce-f/2,y1:"0",x2:ce+f/2,y2:"0",stroke:p,strokeWidth:"1"}),Tr("line",{x1:ce-f/2,y1:c,x2:ce+f/2,y2:c,stroke:p,strokeWidth:"1"})]})}),Tr("div",{style:{...P,left:ue,top:Ze,transform:"translateX(-50%)"},children:m})]})}import{useEffect as lg,useState as cg}from"react";import{Fragment as dg,jsx as Za,jsxs as Ii}from"react/jsx-runtime";function Zo({element:e,isSelected:t=!1,elementInfo:n,color:o="#3b82f6",annotationNumber:r,changeCount:i,hideTooltip:s=!1}){let[a,l]=cg(null);if(lg(()=>{if(!e){l(null);return}let C=()=>{let G=e.getBoundingClientRect();l(G)};return C(),window.addEventListener("scroll",C,{passive:!0}),window.addEventListener("resize",C,{passive:!0}),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}},[e]),!a||!e)return null;let c={position:"fixed",top:a.top,left:a.left,width:a.width,height:a.height,pointerEvents:"none",zIndex:9996,overflow:"visible"},u=e.tagName.toLowerCase(),d=e.id?`#${e.id}`:"",p=e.classList.length>0?"."+Array.from(e.classList).slice(0,2).join("."):"",f=n?.reactComponent,m=f?`<${f}> ${u}${d}${p}`:`${u}${d}${p}`,E=22,x=a.height>=window.innerHeight,S=x?0:a.top>=E?a.top-E:a.bottom,P=x?{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:S,left:a.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},D=!s&&Ii("div",{"data-devtools":"tooltip",style:P,children:[r!==void 0&&Ii("span",{children:[r,"."]}),Za("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:m}),i!==void 0&&i>0&&Ii("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return Ii(dg,{children:[Ii("div",{"data-devtools":"highlight",style:c,children:[Ii("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:[Za("rect",{x:"2.5",y:"2.5",width:Math.max(0,a.width-5),height:Math.max(0,a.height-5),fill:Ur(o,.05),stroke:"none"}),Za("rect",{x:"0.5",y:"0.5",width:Math.max(0,a.width-1),height:Math.max(0,a.height-1),fill:"none",stroke:o,strokeWidth:"1",...!t&&{strokeDasharray:"2 4"}})]}),x&&D]}),!x&&D]})}import{useEffect as yd,useLayoutEffect as ug,useState as Qa}from"react";import{jsx as mr,jsxs as tl}from"react/jsx-runtime";function el(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 nl({element:e,gap:t,accentColor:n,hoveredAxis:o,draggingAxis:r,cursorViewport:i,isAutoGap:s=!1,refreshKey:a=0}){let[l,c]=Qa(null),[u,d]=Qa([]),[p,f]=Qa(!1);if(yd(()=>{let se=g=>{(g.key==="Meta"||g.key==="Control")&&f(!0)},O=g=>{(g.key==="Meta"||g.key==="Control")&&f(!1)},B=()=>f(!1);return window.addEventListener("keydown",se,!0),window.addEventListener("keyup",O,!0),window.addEventListener("blur",B),()=>{window.removeEventListener("keydown",se,!0),window.removeEventListener("keyup",O,!0),window.removeEventListener("blur",B)}},[]),yd(()=>{if(!e){c(null),d([]);return}let se=()=>{c(e.getBoundingClientRect()),d(gr(e))};return se(),window.addEventListener("scroll",se,{passive:!0}),window.addEventListener("resize",se,{passive:!0}),()=>{window.removeEventListener("scroll",se),window.removeEventListener("resize",se)}},[e]),ug(()=>{e&&(c(e.getBoundingClientRect()),d(gr(e)))},[e,t.row,t.column,a]),!l||u.length===0)return null;let m=l.width,E=l.height,x="pm-gap-stripe-pattern",S=el(n,.25),P=el(n,.1),L=el(n,.2),D=8,C=2,G={position:"fixed",top:l.top,left:l.left,width:m,height:E,pointerEvents:"none",zIndex:9996,overflow:"visible"},ee=r??o;return tl("div",{"data-devtools":"gap-handles",style:G,children:[tl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${m} ${E}`,children:[mr("defs",{children:mr("pattern",{id:x,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:mr("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:S,strokeWidth:"1.5"})})}),mr("rect",{x:"0.5",y:"0.5",width:Math.max(0,m-1),height:Math.max(0,E-1),fill:"none",stroke:L,strokeWidth:"1"}),u.map((se,O)=>{let B=se.x-l.left,g=se.y-l.top,v=se.w,b=se.h,ie=p?se.axis===ee:!0;return(se.axis==="row"?t.row:t.column)===0?null:tl("g",{opacity:ie?1:.6,children:[mr("rect",{x:B,y:g,width:v,height:b,fill:P}),mr("rect",{x:B,y:g,width:v,height:b,fill:`url(#${x})`})]},O)}),ee&&(()=>{let se=u.filter(A=>A.axis===ee);if(se.length===0)return null;let O=se[0];if(i&&se.length>1){let A=1/0;for(let J of se){let ke=J.x+J.w/2,De=J.y+J.h/2,pe=Math.abs(i.x-ke)+Math.abs(i.y-De);pe<A&&(A=pe,O=J)}}let B=O.x-l.left,g=O.y-l.top,v=O.w,b=O.h,ie=B+v/2,ve=g+b/2;if(s)return mr("circle",{cx:ie,cy:ve,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let ce=ee==="column",ue=ce?C:D,we=ce?D:C,Ue=ie-ue/2,V=ve-we/2;return mr("rect",{x:Ue,y:V,width:ue,height:we,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&ee&&(()=>{let se=s?"auto":String(Math.round(ee==="row"?t.row:t.column));return mr("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:se})})()]})}import{useCallback as hg,useEffect as yg,useState as bg}from"react";import{useEffect as pg,useState as bd}from"react";var fg=3,gg=250,ol=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],mg=3e3;function vd(e){let[t,n]=bd(0),[o,r]=bd(()=>Math.floor(Math.random()*ol.length));return pg(()=>{if(!e)return;let i=setInterval(()=>n(a=>(a+1)%fg),gg),s=setInterval(()=>r(a=>(a+1)%ol.length),mg);return()=>{clearInterval(i),clearInterval(s)}},[e]),{charIndex:t,word:ol[o]}}import{Fragment as rl,jsx as mo,jsxs as Kr}from"react/jsx-runtime";function vg(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 xd=22,Qi=12,$s=8;function xg(e,t,n){if(n.avoidLeft===void 0&&n.avoidRight===void 0)return!0;let o=typeof window<"u"?window.innerWidth:9999,r=n.avoidLeft??0,i=n.avoidRight??o;return e+t>r&&e<i}function Sg(e,t,n){return xg(t,n,e)?e:{}}function wg(e){let t=`(${e.changeCount} ${e.changeCount===1?"change":"changes"})`;return Math.min(400,44+e.label.length*7.2+t.length*7.2)}function Eg(e,t,n,o){let r=n!==void 0?`${n}px`:"0px",i=o!==void 0?`${o}px`:"100vh";return`translate(min(0px, calc(100vw - max(0px, ${e}px) - 100%)), min(max(0px, calc(${r} - max(0px, ${t}px))), calc(${i} - max(0px, ${t}px) - 100%)))`}function Cg({left:e,top:t,avoidTop:n,avoidBottom:o,style:r,children:i,...s}){let a=e+Qi,l=t+Qi;return mo("div",{"data-devtools":"badge-hit-area",...s,style:{position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:Qi,...r},children:mo("div",{style:{transform:Eg(a,l,n,o)},children:i})})}function Sd({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:o,dispatch:r,inFlightSelectors:i,toolbarRef:s,onHoverSelector:a}){let[l,c]=bg([]),u=i&&i.size>0,{charIndex:d,word:p}=vd(!!u);yg(()=>{if(t){c([]);return}let L=null,D=()=>{let ee=[];e.forEach((se,O)=>{let B=hn(se.selector);if(!B)return;let g=B.getBoundingClientRect();ee.push({selector:se.selector,modIndex:O,top:g.top>=xd?g.top-xd:g.bottom,left:g.left,label:vg(se),changeCount:se.changes.length,annotationNumber:o+O+1})}),c(ee)},C=()=>{L&&cancelAnimationFrame(L),L=requestAnimationFrame(D)};D(),window.addEventListener("scroll",C,!0),window.addEventListener("resize",C,!0);let G=new MutationObserver(C);return G.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",C),document.fonts.ready.then(C),()=>{window.removeEventListener("scroll",C,!0),window.removeEventListener("resize",C,!0),window.removeEventListener("load",C),G.disconnect(),L&&cancelAnimationFrame(L)}},[e,t,o]);let f=hg(L=>{let D=e[L];if(!D)return;let C=hn(D.selector);C&&(r({type:"SELECT_ANNOTATION",payload:{id:null}}),r({type:"SET_TOOL",payload:"inspector"}),r({type:"SELECT_ELEMENT",payload:{el:C,info:D.element}}))},[e,r]);if(l.length===0)return null;let m=s?.current?.getBoundingClientRect(),E=m?m.top<window.innerHeight/2:!1,x=m?{avoidTop:E?m.bottom+$s:void 0,avoidBottom:E?void 0:m.top-$s,avoidLeft:m.left-$s,avoidRight:m.right+$s}:{},S={display:"flex",alignItems:"center",gap:6,backgroundColor:n,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,whiteSpace:"nowrap",maxWidth:400},P={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return Kr(rl,{children:[mo("style",{dangerouslySetInnerHTML:{__html:`
|
|
10
10
|
[data-devtools="badge"]::selection,
|
|
11
11
|
[data-devtools="badge"] *::selection {
|
|
12
12
|
background: #000000;
|
|
13
13
|
color: #ffffff;
|
|
14
14
|
}
|
|
15
|
-
`}}),l.map(L=>{let A=i?.has(L.selector),C=bg(x,L.left,vg(L));return mo(Sg,{left:L.left-Zi,top:L.top-Zi,avoidTop:C.avoidTop,avoidBottom:C.avoidBottom,onClick:()=>f(L.modIndex),onMouseEnter:a?()=>a(L.selector):void 0,onMouseLeave:a?()=>a(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:Kr("div",{"data-devtools":"badge",style:{...S,backgroundColor:A?"#999999":n},children:[Kr("span",{children:[L.annotationNumber,"."]}),mo("span",{style:B,children:L.label}),Kr("span",{style:{opacity:.8},children:["(",L.changeCount," ",L.changeCount===1?"change":"changes",")"]}),A&&Kr("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[mo("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:d===1?Kr(nl,{children:[mo("circle",{cx:"7",cy:"7",r:"2"}),mo("circle",{cx:"17",cy:"7",r:"2"}),mo("circle",{cx:"7",cy:"17",r:"2"}),mo("circle",{cx:"17",cy:"17",r:"2"})]}):Kr(nl,{children:[mo("circle",{cx:"12",cy:"6",r:"2"}),mo("circle",{cx:"6",cy:"12",r:"2"}),mo("circle",{cx:"18",cy:"12",r:"2"}),mo("circle",{cx:"12",cy:"18",r:"2"})]})}),p]})]})},L.selector)})]})}import{useEffect as wg,useState as Eg}from"react";import{Fragment as Mg,jsx as xd}from"react/jsx-runtime";function Cg(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 Sd({styleModifications:e,accentColor:t}){let[n,o]=Eg([]);if(wg(()=>{let i=null,s=()=>{let c=[];for(let u of e){let d=hn(u.selector);if(!d)continue;let p=d.getBoundingClientRect();if(p.width===0&&p.height===0)continue;let f=Gr(d);c.push({selector:u.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(c)},a=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(s)};s(),window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a,{passive:!0});let l=new MutationObserver(a);return l.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",a),window.removeEventListener("resize",a),l.disconnect(),i&&cancelAnimationFrame(i)}},[e]),n.length===0)return null;let r=Cg(t,.2);return xd(Mg,{children:n.map(i=>{let s={position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${r}`,borderRadius:i.borderRadius,boxSizing:"border-box"};return xd("div",{"data-devtools":"mod-border",style:s},i.selector)})})}import{useEffect as wd,useLayoutEffect as Tg,useState as Ed}from"react";import{jsx as kr,jsxs as rl}from"react/jsx-runtime";function ol(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 kg={top:"bottom",bottom:"top",left:"right",right:"left"};function il({element:e,padding:t,accentColor:n,hoveredSide:o,draggingSide:r,cursorViewport:i,refreshKey:s}){let[a,l]=Ed(null),[c,u]=Ed(!1);if(wd(()=>{let v=ve=>{(ve.key==="Meta"||ve.key==="Control")&&u(!0)},b=ve=>{(ve.key==="Meta"||ve.key==="Control")&&u(!1)},ie=()=>u(!1);return window.addEventListener("keydown",v,!0),window.addEventListener("keyup",b,!0),window.addEventListener("blur",ie),()=>{window.removeEventListener("keydown",v,!0),window.removeEventListener("keyup",b,!0),window.removeEventListener("blur",ie)}},[]),wd(()=>{if(!e){l(null);return}let v=()=>{l(e.getBoundingClientRect())};return v(),window.addEventListener("scroll",v,{passive:!0}),window.addEventListener("resize",v,{passive:!0}),()=>{window.removeEventListener("scroll",v),window.removeEventListener("resize",v)}},[e]),Tg(()=>{e&&l(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,s]),!a)return null;let d=a.width,p=a.height,{top:f,right:m,bottom:E,left:x}=t,S="pm-stripe-pattern",B=ol(n,.25),L=ol(n,.1),A=ol(n,.2),C=8,U=2,ee={position:"fixed",top:a.top,left:a.left,width:d,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"},se=["top","right","bottom","left"],O={top:`0,0 ${d},0 ${d-m},${f} ${x},${f}`,right:`${d},0 ${d},${p} ${d-m},${p-E} ${d-m},${f}`,bottom:`0,${p} ${x},${p-E} ${d-m},${p-E} ${d},${p}`,left:`0,0 ${x},${f} ${x},${p-E} 0,${p}`},D={top:{x:d/2-C/2,y:f/2-U/2,w:C,h:U},bottom:{x:d/2-C/2,y:p-E/2-U/2,w:C,h:U},left:{x:x/2-U/2,y:p/2-C/2,w:U,h:C},right:{x:d-m/2-U/2,y:p/2-C/2,w:U,h:C}},g=new Set;return r?g.add(r):o&&(g.add(o),c||g.add(kg[o])),rl("div",{"data-devtools":"padding-handles",style:ee,children:[rl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${p}`,children:[kr("defs",{children:kr("pattern",{id:S,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:kr("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:B,strokeWidth:"1.5"})})}),kr("rect",{x:"0.5",y:"0.5",width:Math.max(0,d-1),height:Math.max(0,p-1),fill:"none",stroke:A,strokeWidth:"1"}),se.map(v=>{if(t[v]<=0)return null;let ie=g.has(v);return rl("g",{opacity:ie?1:.6,children:[kr("polygon",{points:O[v],fill:L}),kr("polygon",{points:O[v],fill:`url(#${S})`})]},v)}),se.map(v=>{let b=D[v],ie=g.has(v);return kr("rect",{x:b.x,y:b.y,width:b.w,height:b.h,fill:n,stroke:"#ffffff",strokeWidth:ie?4:2,paintOrder:"stroke"},`handle-${v}`)})]}),i&&(o||r)&&(()=>{let b=Math.round(t[r??o]);return kr("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:b})})()]})}import{useCallback as xn,useEffect as Fn,useMemo as ei,useRef as $t,useState as Jt}from"react";import{Blend as im,Check as Ks,ChevronDown as Xs,Eye as cl,FoldHorizontal as Vd,FoldVertical as Gd,Hexagon as sm,Minus as zd,MoveHorizontal as pl,Plus as am,Shrink as lm,Square as cm,SquareDashed as dm,SquareDashedTopSolid as um,UnfoldHorizontal as Jd,UnfoldVertical as Yd}from"lucide-react";var Ig="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",Ii={borderWidth:3,borderStyle:"solid",borderImage:`url("${Ig}") 4 / 1.9 / 0 round`};function $s({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 Qi={"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 Xr(e){return Qi[e]?.[0]??"px"}function Ro(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function Ws(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 s=parseFloat(r);if(!isNaN(s)){if(o){let{unit:a}=Ro(n);return`${s}${a||Xr(t)}`}return`${s}${Xr(t)}`}return r}function Ri(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 Rg,useEffect as Lg,useRef as Cd,useState as Ag}from"react";import{Plus as Md,X as Pg}from"lucide-react";import{jsx as ho,jsxs as qr}from"react/jsx-runtime";var js=[{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 Bg(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],s=parseFloat(i);isNaN(s)||t.push({name:r,value:s})}return t}function sl(e){return e.length===0?"none":e.map(t=>{let o=js.find(r=>r.name===t.name)?.unit??"";return`${t.name}(${t.value}${o})`}).join(" ")}function Td({value:e,onChange:t,accentColor:n,modified:o,panelContentRef:r}){let i=Bg(e),[s,a]=Ag(!1),l=Cd(null),c=Cd(null);Lg(()=>{if(!s)return;let L=A=>{l.current&&!A.composedPath().includes(l.current)&&a(!1)};return document.addEventListener("mousedown",L,!0),()=>document.removeEventListener("mousedown",L,!0)},[s]);let u=js.filter(L=>!i.some(A=>A.name===L.name)),d=L=>{let A=[...i,{name:L.name,value:L.defaultValue}];t(sl(A)),a(!1)},p=L=>{let A=i.filter((C,U)=>U!==L);t(sl(A))},f=(L,A)=>{let C=i.map((U,ee)=>ee===L?{...U,value:A}:U);t(sl(C))},m={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:bn,border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},E=Rg(L=>{if(!c.current)return{position:"fixed",top:0,left:0};let A=c.current.getBoundingClientRect(),C=r?.current?.getBoundingClientRect(),U=L*24+8;return{position:"fixed",...window.innerHeight-A.bottom<U?{bottom:window.innerHeight-A.top+2}:{top:A.bottom+2},left:C?C.left:A.left,width:C?C.width:140,zIndex:10001}},[r]),x={backgroundColor:Lo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,padding:"4px 0"},S={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"},B=L=>ho("div",{ref:l,style:{...E(L.length),...x},children:L.map(A=>ho("button",{type:"button",onClick:()=>d(A),style:S,onMouseEnter:C=>{C.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:C=>{C.currentTarget.style.backgroundColor="transparent"},children:A.label},A.name))});return i.length===0?qr("div",{children:[qr("div",{style:{display:"flex",alignItems:"center",gap:4},children:[ho(yo,{modified:!1,children:ho("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:{...m,color:"#999",cursor:"default"}})}),ho("button",{ref:c,type:"button",onClick:()=>a(!s),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:ho(Md,{size:12})})]}),s&&B(js)]}):qr("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((L,A)=>{let C=js.find(U=>U.name===L.name);return C?qr("div",{style:{display:"flex",alignItems:"center",gap:4},children:[ho("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:C.label}),ho(yo,{modified:o,children:qr("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[ho("input",{type:"range",min:C.min,max:C.max,step:C.step,value:L.value,onChange:U=>f(A,parseFloat(U.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(L.value-C.min)/(C.max-C.min)*100}%, rgba(0,0,0,0.1) ${(L.value-C.min)/(C.max-C.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),ho("input",{type:"number",min:C.min,max:C.max,step:C.step,value:C.unit==="px"||C.unit==="deg"?Math.round(L.value):Math.round(L.value*100)/100,onChange:U=>f(A,parseFloat(U.target.value)||0),style:{...m,width:44,padding:"2px 4px",textAlign:"right",flexShrink:0}}),C.unit&&ho("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:C.unit})]})}),ho("button",{type:"button",onClick:()=>p(A),style:{display:"flex",alignItems:"center",justifyContent:"center",width:16,height:16,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:ho(Pg,{size:10})})]},L.name):null}),u.length>0&&qr("div",{children:[qr("button",{ref:c,type:"button",onClick:()=>a(!s),style:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",border:"none",borderRadius:2,backgroundColor:"transparent",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#94a3b8",cursor:"pointer"},children:[ho(Md,{size:10}),"Add filter"]}),s&&B(u)]})]})}import{useCallback as bo,useEffect as Ng,useRef as Vs,useState as Id}from"react";import{AlignHorizontalSpaceAround as zg,AlignVerticalSpaceAround as $g,Columns3 as Wg,Grid2x2 as jg,RectangleHorizontal as Vg,Rows3 as Gg,UnfoldHorizontal as Rd,UnfoldVertical as Ld}from"lucide-react";import{useCallback as Dg,useEffect as Og,useRef as es}from"react";import{jsx as Fg}from"react/jsx-runtime";var Qo=[0,1,2,4,8,12,16,20,24,28,32],_g=8;function kd(){return parseFloat(getComputedStyle(document.documentElement).fontSize)||16}function ts(e){return e==="rem"||e==="em"}function Hg(e,t){return ts(t)?e/kd():e}function er({value:e,onChange:t,onPreview:n,onScrubEnd:o,onReset:r,isModified:i,accentColor:s,defaultUnit:a="rem",min:l=0,max:c,step:u=1,snapSteps:d,color:p,style:f,children:m}){let E=es(null),x=es(null),S=es(r),B=es(i),L=es(!1);S.current=r,B.current=i,Og(()=>{let C=g=>(!Number.isFinite(u)||u<=0,u),U=(g,v)=>{let b=C(v);if(!Number.isFinite(b)||b<=0)return g;let ie=Math.max(0,(String(b).split(".")[1]||"").length);return Number((Math.round(g/b)*b).toFixed(Math.min(ie+2,6)))},ee=(g,v)=>{let b=U(g,v);return l!==void 0&&(b=Math.max(l,b)),c!==void 0&&(b=Math.min(c,b)),b},se=(g,v)=>{if(!d)return ee(g,v);let b=ts(v)?kd():1,ie=ts(v)?g*b:g,ve=d[d.length-1];for(let ce=0;ce<d.length-1;ce++){let ue=d[ce],we=d[ce+1];if(ie<=(ue+we)/2){ve=ue;break}if(ie<we){ve=we;break}}return ie>d[d.length-1]&&(ve=Math.round(ie/8)*8),ee(ts(v)?Math.round(ve/b*1e3)/1e3:ve,v)},O=g=>{let v=x.current;if(!v)return;v.hasMoved=!0,L.current=g.shiftKey;let b=C(v.unit)/_g*(g.altKey?.1:1);v.accum+=g.movementX*b;let ie=v.startValue+v.accum,ve=g.shiftKey?se(ie,v.unit):ee(ie,v.unit);n?.(`${ve}${v.unit}`)},D=()=>{let g=x.current;if(!g)return;let v=ee(g.startValue+g.accum,g.unit);L.current&&d&&(v=se(v,g.unit));let b=g.hasMoved&&v!==g.startValue;x.current=null,document.exitPointerLock(),b?t(`${v}${g.unit}`):g.hasMoved?n?.(`${g.startValue}${g.unit}`):B.current&&S.current&&S.current(),o?.()};return document.addEventListener("mousemove",O),document.addEventListener("mouseup",D),()=>{document.removeEventListener("mousemove",O),document.removeEventListener("mouseup",D)}},[c,l,t,n,o,d,u]);let A=Dg(C=>{if(C.button!==0)return;C.preventDefault();let U=Ro(e),ee=U.unit&&U.unit!=="px"?U.unit:a,se=U.unit==="px"&&ts(ee)?Hg(U.num,ee):U.num;x.current={startValue:se,unit:ee,accum:0,hasMoved:!1},E.current?.requestPointerLock()},[e,a]);return Fg("span",{ref:E,onMouseDown:A,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:{color:i?s||"#3b82f6":p||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize",...f},children:m})}import{Fragment as ns,jsx as Be,jsxs as an}from"react/jsx-runtime";function Ad(e,t){if(!(e instanceof HTMLElement))return!1;let n=t==="width"?new Set(["w-full","w-screen","w-dvw","w-lvw","w-svw"]):new Set(["h-full","h-screen","h-dvh","h-lvh","h-svh"]);return Array.from(e.classList).some(o=>n.has(o))}function Pd(e,t){let n=e.trim().toLowerCase();if(!n)return null;let o=Ro(n);if(!Number.isFinite(o.num))return null;if(o.num===0)return 0;if(o.unit==="px"||o.unit==="")return o.num;if(o.unit==="rem"){let r=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return o.num*r}if(o.unit==="em"){let r=t instanceof HTMLElement&&parseFloat(getComputedStyle(t).fontSize)||16;return o.num*r}return null}function Gs(e,t,n){let o=Pd(e,n),r=Pd(t,n);return o!==null&&r!==null?Math.abs(o-r)<.01:e.trim()===t.trim()}function Jg({gridCols:e,gridRows:t,gridModified:n,accentColor:o,onColsChange:r,onRowsChange:i}){return Be(Ao,{style:{width:100},children:an("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"4px"},children:[Be("input",{type:"number",min:1,max:12,value:e,onChange:s=>r(parseInt(s.target.value)||1),style:{...vn,width:32,textAlign:"center",padding:2}}),Be("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"}),Be("input",{type:"number",min:1,max:12,value:t,onChange:s=>i(parseInt(s.target.value)||1),style:{...vn,width:32,textAlign:"center",padding:2}})]})})}function Bd({element:e,getValue:t,getOriginalValue:n,handleChange:o,isModified:r,onResetProperty:i,isCollapsed:s,onToggle:a,sectionHeaderStyle:l,activeDropdown:c,onDropdownChange:u,panelContentRef:d,accentColor:p,onFieldHover:f,preferredUnit:m,onUnitCycle:E}){let x=u,S=t("display"),B=t("flex-direction"),L=Dd(S,B),A=S==="flex"||S==="inline-flex",C=S==="grid",U=A||C,ee=B==="column"||B==="column-reverse",se=t("width"),O=t("height"),D=r("width")?se:Si(e,"width"),g=r("height")?O:Si(e,"height"),v=!r("width")&&Ad(e,"width")?"fill":al(se,D),b=!r("height")&&Ad(e,"height")?"fill":al(O,g),ie=t("min-width"),ve=t("max-width"),ce=t("min-height"),ue=t("max-height"),we=ie!=="none"&&ie!=="0px"&&ie!=="auto"?ie:"",Ue=ve!=="none"&&ve!=="auto"?ve:"",V=ce!=="none"&&ce!=="0px"&&ce!=="auto"?ce:"",P=ue!=="none"&&ue!=="auto"?ue:"",J=r("min-width"),ke=r("max-width"),De=r("min-height"),pe=r("max-height"),Ge=J||De,Ze=ke||pe,Me=e.getBoundingClientRect(),Q=`${Math.round(Me.width)}px`,Ie=`${Math.round(Me.height)}px`,[mt,We]=Id({}),Oe=Ho(t("padding")),He=Ho(n("padding")),Pe=!Gs(Oe.left,He.left,e)||!Gs(Oe.right,He.right,e),Et=!Gs(Oe.top,He.top,e)||!Gs(Oe.bottom,He.bottom,e),dn=Pe||"padding-h"in mt,Sn=Et||"padding-v"in mt,Ln=t("gap"),Nt=t("row-gap"),wn=t("column-gap"),co=t("grid-template-columns"),Jn=t("grid-template-rows"),En=t("overflow"),At=co.split(/\s+/).filter(K=>K&&K!=="none").length||1,at=Jn.split(/\s+/).filter(K=>K&&K!=="none").length||1,[Dt,un]=Id(!1),ht=c!==null,Kt=ht||Dt,bt=ht?.3:Dt?.65:1,oo=({mode:K,icon:_e,active:ot})=>Be("button",{type:"button",onClick:()=>Od(K,o),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 8px",border:"none",borderRadius:2,backgroundColor:ot?Li:"transparent",color:ot?p:"#64748b",cursor:"pointer",fontSize:14},children:_e}),xo=(K,_e,ot)=>{ot==="fixed"?o(K,_e):o(K,Js(ot,_e))},Z=bo(K=>{let _e=K.trim();if(!_e)return"0";let ot=Ro(_e);if(!Number.isFinite(ot.num))return _e;if(m==="rem"&&ot.unit==="px")return`${Ri(ot.num,"rem")}rem`;if(m==="px"&&ot.unit==="rem"){let qt=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return`${Math.round(ot.num*qt*1e3)/1e3}px`}return _e},[m]),xe=K=>{let _e=Ho(t("padding")),ot=K||"0";o("padding",`${Z(_e.top)} ${ot} ${Z(_e.bottom)} ${ot}`)},Re=K=>{let _e=Ho(t("padding")),ot=K||"0";o("padding",`${ot} ${Z(_e.right)} ${ot} ${Z(_e.left)}`)},et=bo(()=>{let K=Ho(t("padding")),_e=Ho(n("padding"));o("padding",[Z(K.top),Z(_e.right),Z(K.bottom),Z(_e.left)].join(" "))},[Z,n,t,o]),Ke=bo(()=>{let K=Ho(t("padding")),_e=Ho(n("padding"));o("padding",[Z(_e.top),Z(K.right),Z(_e.bottom),Z(K.left)].join(" "))},[Z,n,t,o]),Le=bo((K,_e)=>ot=>{_e(ot),We(qt=>({...qt,[K]:ot}))},[]),tt=bo(K=>{We(_e=>{let ot={..._e};return delete ot[K],ot})},[]),Qt=bo(K=>{n("padding");let _e=Ho(t("padding"));ut(e,"padding",`${Z(_e.top)} ${K} ${Z(_e.bottom)} ${K}`)},[e,Z,n,t]),pn=bo(K=>{n("padding");let _e=Ho(t("padding"));ut(e,"padding",`${K} ${Z(_e.right)} ${K} ${Z(_e.left)}`)},[e,Z,n,t]),Cn=bo(K=>_e=>{ut(e,K,_e)},[e]),Xt=ee?"row":"column",Wt=Xt==="row"?"row-gap":"column-gap",jt=Wt==="row-gap"?Nt||Ln:wn||Ln,Yn=r(Wt)||r("gap"),Un=bo(()=>{let _e=gr(e).find(qt=>qt.axis===Xt);if(_e)return Xt==="row"?_e.h:_e.w;let ot=Vr(e);return Xt==="row"?ot.row:ot.column},[e,Xt]),Ft=bo(()=>{let K=t("justify-content");return K==="space-between"?"between":K==="space-around"||K==="space-evenly"?"around":"fixed"},[t])(),I=bo((K,_e)=>{if(K==="fixed"){let ot=Math.max(0,Math.round(Un()*1e3)/1e3),qt=_e||(ot>0?`${ot}px`:"8px");o("justify-content","normal"),o(Wt,qt);return}o("justify-content",K==="between"?"space-between":"space-around"),o(Wt,"0px")},[Wt,Un,o]),j=bo(K=>{if(Ft!=="fixed"){I("fixed",K);return}o(Wt,K)},[I,Ft,Wt,o]),ne=bo(K=>{Ft!=="fixed"&&ut(e,"justify-content","normal"),ut(e,Wt,K)},[e,Ft,Wt]),ae=K=>K==="center"?1:K==="flex-end"||K==="end"?2:0,fe=ae(t("justify-content")),ge=ae(t("align-items")),le=ee?ge:fe,Ce=ee?fe:ge,pt=Vs(null),Fe=Vs({x:0,y:0}),lt=Vs({col:le,row:Ce});lt.current={col:le,row:Ce};let ft=bo((K,_e)=>{let ot=["flex-start","center","flex-end"];ee?(o("justify-content",ot[_e]),o("align-items",ot[K])):(o("justify-content",ot[K]),o("align-items",ot[_e]))},[ee,o]),An=Vs(ft);An.current=ft,Ng(()=>{let _e=ot=>{let qt=pt.current;if(!qt||!ot.composedPath().includes(qt))return;ot.preventDefault(),ot.stopPropagation(),Fe.current.x+=ot.deltaX,Fe.current.y+=ot.deltaY;let{col:To,row:rn}=lt.current,Vt=!1;Math.abs(Fe.current.x)>=30&&(To=Math.max(0,Math.min(2,To+(Fe.current.x>0?1:-1))),Fe.current.x=0,Fe.current.y=0,Vt=!0),!Vt&&Math.abs(Fe.current.y)>=30&&(rn=Math.max(0,Math.min(2,rn+(Fe.current.y>0?1:-1))),Fe.current.x=0,Fe.current.y=0,Vt=!0),Vt&&(To!==lt.current.col||rn!==lt.current.row)&&An.current(To,rn)};return document.addEventListener("wheel",_e,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",_e,{capture:!0})},[]);let Mn=()=>Be("div",{ref:pt,onMouseEnter:()=>{un(!0),d.current&&(d.current.style.overflowY="hidden")},onMouseLeave:()=>{un(!1),d.current&&(d.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:Fo,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(K=>[0,1,2].map(_e=>Be("button",{type:"button",onClick:()=>ft(_e,K),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:_e===le&&K===Ce?Be("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:_e===0?an(ns,{children:[Be("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),Be("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),Be("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):_e===1?an(ns,{children:[Be("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),Be("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),Be("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):an(ns,{children:[Be("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),Be("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),Be("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]})}):Be("div",{style:{width:2.5,height:2.5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${K}-${_e}`)))}),Do=r("grid-template-columns")||r("grid-template-rows");return an("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Be("div",{style:l,children:Be("span",{children:U?"Auto layout":"Layout"})}),an("div",{style:{padding:"4px 12px 8px"},children:[an("div",{style:{display:"flex",gap:2,height:jn,boxSizing:"border-box",marginBottom:8,backgroundColor:Fo,borderRadius:2,padding:2,opacity:bt,transition:"opacity 150ms ease"},children:[Be(oo,{mode:"block",icon:Be(Vg,{size:16}),active:L==="block"}),Be(oo,{mode:"flex-col",icon:Be(Gg,{size:16}),active:L==="flex-col"}),Be(oo,{mode:"flex-row",icon:Be(Wg,{size:16}),active:L==="flex-row"}),Be(oo,{mode:"grid",icon:Be(jg,{size:16}),active:L==="grid"})]}),an("div",{style:{display:"flex",gap:4,marginBottom:8},children:[Be(ll,{label:"W",property:"width",cssValue:v==="fixed"?se:`${Math.round(e.getBoundingClientRect().width)}px`,displayValue:v==="fixed"?se:"",placeholder:`${Math.round(e.getBoundingClientRect().width)}px`,mode:v,onValueChange:K=>o("width",K),onModeChange:K=>{if(K==="fixed"){let _e=e.getBoundingClientRect();o("width",`${Math.round(_e.width)}px`)}else o("width",Js(K,se))},modified:r("width"),dimmed:ht&&c!=="width",dropdownOpen:c==="width",onDropdownChange:K=>x(K?"width":null),panelContentRef:d,accentColor:p,onReset:()=>i("width"),canAddMinConstraint:!J,canAddMaxConstraint:!ke,onAddMinConstraint:()=>o("min-width",Q),onAddMaxConstraint:()=>o("max-width",Q),onHoverChange:K=>f?.(K?"width":"element"),onValuePreview:Cn("width")}),Be(ll,{label:"H",property:"height",cssValue:b==="fixed"?O:`${Math.round(e.getBoundingClientRect().height)}px`,displayValue:b==="fixed"?O:"",placeholder:`${Math.round(e.getBoundingClientRect().height)}px`,mode:b,onValueChange:K=>o("height",K),onModeChange:K=>{if(K==="fixed"){let _e=e.getBoundingClientRect();o("height",`${Math.round(_e.height)}px`)}else o("height",Js(K,O))},modified:r("height"),dimmed:ht&&c!=="height",dropdownOpen:c==="height",onDropdownChange:K=>x(K?"height":null),panelContentRef:d,accentColor:p,onReset:()=>i("height"),canAddMinConstraint:!De,canAddMaxConstraint:!pe,onAddMinConstraint:()=>o("min-height",Ie),onAddMaxConstraint:()=>o("max-height",Ie),onHoverChange:K=>f?.(K?"height":"element"),onValuePreview:Cn("height")})]}),Ge&&an(ns,{children:[an("div",{style:{display:"flex",gap:4,marginBottom:2,opacity:bt,transition:"opacity 150ms ease"},children:[Be("div",{style:{flex:1,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,visibility:J?"visible":"hidden"},children:"Min width"}),Be("div",{style:{flex:1,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,visibility:De?"visible":"hidden"},children:"Min height"})]}),an("div",{style:{display:"flex",gap:4,marginBottom:Ze?4:8,opacity:bt,transition:"opacity 150ms ease"},children:[J?Be(os,{label:"Min width",axis:"width",kind:"min",value:we,placeholder:"Min W",currentValue:Q,modified:r("min-width"),accentColor:p,onChange:K=>K?o("min-width",K):i("min-width"),onPreview:Cn("min-width"),onReset:()=>i("min-width"),panelContentRef:d}):Be("div",{style:{flex:1}}),De?Be(os,{label:"Min height",axis:"height",kind:"min",value:V,placeholder:"Min H",currentValue:Ie,modified:r("min-height"),accentColor:p,onChange:K=>K?o("min-height",K):i("min-height"),onPreview:Cn("min-height"),onReset:()=>i("min-height"),panelContentRef:d}):Be("div",{style:{flex:1}})]})]}),Ze&&an(ns,{children:[an("div",{style:{display:"flex",gap:4,marginBottom:2,opacity:bt,transition:"opacity 150ms ease"},children:[Be("div",{style:{flex:1,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,visibility:ke?"visible":"hidden"},children:"Max width"}),Be("div",{style:{flex:1,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,visibility:pe?"visible":"hidden"},children:"Max height"})]}),an("div",{style:{display:"flex",gap:4,marginBottom:8,opacity:bt,transition:"opacity 150ms ease"},children:[ke?Be(os,{label:"Max width",axis:"width",kind:"max",value:Ue,placeholder:"Max W",currentValue:Q,modified:r("max-width"),accentColor:p,onChange:K=>K?o("max-width",K):i("max-width"),onPreview:Cn("max-width"),onReset:()=>i("max-width"),panelContentRef:d}):Be("div",{style:{flex:1}}),pe?Be(os,{label:"Max height",axis:"height",kind:"max",value:P,placeholder:"Max H",currentValue:Ie,modified:r("max-height"),accentColor:p,onChange:K=>K?o("max-height",K):i("max-height"),onPreview:Cn("max-height"),onReset:()=>i("max-height"),panelContentRef:d}):Be("div",{style:{flex:1}})]})]}),A&&an("div",{onMouseEnter:()=>f?.("gap"),onMouseLeave:()=>f?.("element"),style:{display:"flex",gap:8,marginBottom:8},children:[an("div",{style:{opacity:ht?.3:1,transition:"opacity 150ms ease"},children:[Be("div",{style:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,marginBottom:2},children:"Alignment"}),Mn()]}),an("div",{style:{flex:1,opacity:bt,transition:"opacity 150ms ease"},children:[Be("div",{onClick:Yn?()=>{i(Wt),i("gap")}:void 0,title:Yn?"Click to reset":void 0,style:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,marginBottom:2,cursor:Yn?"pointer":"default"},children:"Gap"}),Be("div",{style:{display:"flex",gap:2,height:jn,boxSizing:"border-box",marginBottom:4,backgroundColor:Fo,borderRadius:2,padding:2},children:["fixed","between","around"].map(K=>{let _e=Ft===K;return Be("button",{type:"button",onClick:()=>I(K),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 6px",border:"none",borderRadius:2,backgroundColor:_e?Li:"transparent",color:_e?"#111827":It,cursor:"pointer",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt,textTransform:"capitalize"},children:K},K)})}),Be(Ao,{dimmed:ht,children:an("div",{style:{display:"flex",alignItems:"center"},children:[Be(er,{value:jt,onChange:K=>{tt("gap"),j(K)},onPreview:Le("gap",ne),onScrubEnd:()=>tt("gap"),onReset:()=>{i(Wt),i("gap")},isModified:Yn,accentColor:p,defaultUnit:m,snapSteps:Qo,children:B==="column"||B==="column-reverse"?Be(Ld,{size:12,strokeWidth:Yn?2.5:1.5}):Be(Rd,{size:12,strokeWidth:Yn?2.5:1.5})}),Be(vo,{property:Wt,value:mt.gap||(Ft==="fixed"&&Yn?jt:Ft==="fixed"?"":`${Math.max(0,Math.round(Un()*1e3)/1e3)}px`),onChange:K=>j(K),isModified:Yn||"gap"in mt,placeholder:"0",style:{...vn,flex:1,minWidth:0},unitStyle:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,padding:"0 8px"},preferredUnit:m,onUnitCycle:E})]})})]})]}),C&&an("div",{onMouseEnter:()=>f?.("gap"),onMouseLeave:()=>f?.("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:bt,transition:"opacity 150ms ease"},children:[Be(Jg,{gridCols:At,gridRows:at,gridModified:Do,accentColor:p,onColsChange:K=>o("grid-template-columns",`repeat(${K}, 1fr)`),onRowsChange:K=>o("grid-template-rows",`repeat(${K}, 1fr)`)}),an("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[Be(Ao,{dimmed:ht,children:an("div",{style:{display:"flex",alignItems:"center"},children:[Be(er,{value:wn||Ln,onChange:K=>{tt("column-gap"),o("column-gap",K)},onPreview:Le("column-gap",Cn("column-gap")),onScrubEnd:()=>tt("column-gap"),onReset:()=>i("column-gap"),isModified:r("column-gap"),accentColor:p,defaultUnit:m,snapSteps:Qo,children:Be(Rd,{size:12,strokeWidth:r("column-gap")?2.5:1.5})}),Be(vo,{property:"column-gap",value:mt["column-gap"]||(r("column-gap")||r("gap")?wn||Ln:""),onChange:K=>o("column-gap",K),isModified:r("column-gap")||r("gap")||"column-gap"in mt,placeholder:"0",style:{...vn,flex:1,minWidth:0},unitStyle:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,padding:"0 8px"},preferredUnit:m,onUnitCycle:E})]})}),Be(Ao,{dimmed:ht,children:an("div",{style:{display:"flex",alignItems:"center"},children:[Be(er,{value:Nt||Ln,onChange:K=>{tt("row-gap"),o("row-gap",K)},onPreview:Le("row-gap",Cn("row-gap")),onScrubEnd:()=>tt("row-gap"),onReset:()=>i("row-gap"),isModified:r("row-gap"),accentColor:p,defaultUnit:m,snapSteps:Qo,children:Be(Ld,{size:12,strokeWidth:r("row-gap")?2.5:1.5})}),Be(vo,{property:"row-gap",value:mt["row-gap"]||(r("row-gap")||r("gap")?Nt||Ln:""),onChange:K=>o("row-gap",K),isModified:r("row-gap")||r("gap")||"row-gap"in mt,placeholder:"0",style:{...vn,flex:1,minWidth:0},unitStyle:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,padding:"0 8px"},preferredUnit:m,onUnitCycle:E})]})})]})]}),U&&an("div",{style:{display:"flex",gap:4,marginBottom:8,opacity:bt,transition:"opacity 150ms ease"},children:[Be(Ao,{style:{flex:1},dimmed:ht,onMouseEnter:()=>f?.("padding-x"),onMouseLeave:()=>f?.("element"),children:an("div",{style:{display:"flex",alignItems:"center"},children:[Be(er,{value:Oe.left,onChange:K=>{tt("padding-h"),xe(K)},onPreview:Le("padding-h",Qt),onScrubEnd:()=>tt("padding-h"),onReset:et,isModified:dn,accentColor:p,defaultUnit:m,snapSteps:Qo,children:Be(zg,{size:12,strokeWidth:dn?2.5:1.5})}),Be(vo,{property:"padding",value:mt["padding-h"]||Oe.left,onChange:K=>xe(K),isModified:dn,placeholder:"H pad",style:{...vn,flex:1,minWidth:0},unitStyle:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,padding:"0 8px"},preferredUnit:m,onUnitCycle:E})]})}),Be(Ao,{style:{flex:1},dimmed:ht,onMouseEnter:()=>f?.("padding-y"),onMouseLeave:()=>f?.("element"),children:an("div",{style:{display:"flex",alignItems:"center"},children:[Be(er,{value:Oe.top,onChange:K=>{tt("padding-v"),Re(K)},onPreview:Le("padding-v",pn),onScrubEnd:()=>tt("padding-v"),onReset:Ke,isModified:Sn,accentColor:p,defaultUnit:m,snapSteps:Qo,children:Be($g,{size:12,strokeWidth:Sn?2.5:1.5})}),Be(vo,{property:"padding",value:mt["padding-v"]||Oe.top,onChange:K=>Re(K),isModified:Sn,placeholder:"V pad",style:{...vn,flex:1,minWidth:0},unitStyle:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,padding:"0 8px"},preferredUnit:m,onUnitCycle:E})]})})]}),an("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,opacity:bt,transition:"opacity 150ms ease"},children:[Be("input",{type:"checkbox",checked:En==="hidden",onChange:K=>o("overflow",K.target.checked?"hidden":"visible"),style:{margin:0,accentColor:p}}),"Clip content"]})]})]})}import{useCallback as Yg,useEffect as Ug,useMemo as Kg,useRef as _d,useState as Xg}from"react";import{AlignCenter as qg,AlignJustify as Zg,AlignLeft as Qg,AlignRight as em,Baseline as tm,Check as nm,ChevronDown as Hd,WholeWord as om}from"lucide-react";import{jsx as St,jsxs as tr}from"react/jsx-runtime";var Fd={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"},rm=[{label:"System Sans",value:"ui-sans-serif, system-ui, sans-serif"},{label:"System Mono",value:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},{label:"System Serif",value:'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif'},{label:"Inter",value:"Inter, ui-sans-serif, system-ui, sans-serif"},{label:"Geist Mono",value:'"Geist Mono", ui-monospace, SFMono-Regular, monospace'}];function Nd({element:e,getValue:t,getExplicitValue:n,handleChange:o,isModified:r,onResetProperty:i,isCollapsed:s,onToggle:a,sectionHeaderStyle:l,accentColor:c,colorVariables:u,panelContentRef:d,preferredUnit:p,onUnitCycle:f}){let m=t("font-family"),E=t("font-size"),x=t("font-weight"),S=t("line-height"),B=t("letter-spacing"),L=t("text-align"),A=t("color"),C=n("font-family")??"",U=n("font-size")??"",ee=n("font-weight")??"",se=n("line-height")??"",O=n("letter-spacing")??"",D=n("color")??"",[g,v]=Xg(!1),b=_d(null),ie=_d(null),ve=String(x),ce=String(ee),ue=Fd[ve]||ve,we=Er(e,A),Ue=Kg(()=>{let J=[{label:"Current",value:m},...rm],ke=new Set;return J.filter(De=>{let pe=De.value.trim();return!pe||ke.has(pe)?!1:(ke.add(pe),!0)})},[m]),V=Yg(()=>{if(!b.current)return{position:"fixed",top:0,left:0,width:200};let J=b.current.getBoundingClientRect();if(d.current){let ke=d.current.getBoundingClientRect();return{position:"fixed",top:J.bottom+4,left:ke.left,width:ke.width}}return{position:"fixed",top:J.bottom+4,left:J.left,width:J.width}},[d]);Ug(()=>{if(!g)return;let J=De=>{let pe=De.composedPath();b.current&&!pe.includes(b.current)&&ie.current&&!pe.includes(ie.current)&&v(!1)},ke=De=>{De.key==="Escape"&&v(!1)};return document.addEventListener("mousedown",J),document.addEventListener("keydown",ke),()=>{document.removeEventListener("mousedown",J),document.removeEventListener("keydown",ke)}},[g]);let P=({align:J,icon:ke})=>{let De=L===J;return St("button",{type:"button",onClick:()=>o("text-align",J),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 8px",border:"none",borderRadius:2,backgroundColor:De?Li:"transparent",color:De?c:"#64748b",cursor:"pointer"},children:ke})};return tr("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[St("div",{style:l,children:St("span",{children:"Typography"})}),tr("div",{style:{padding:"4px 12px 8px",display:"flex",flexDirection:"column",gap:4},children:[St(Ao,{style:{backgroundColor:g?Lo:"transparent"},children:tr("div",{ref:b,style:{display:"flex",alignItems:"center",padding:"4px 8px"},children:[St(rs,{type:"text",value:C,placeholder:Zr(m),onChange:J=>o("font-family",J),onCancel:()=>i("font-family"),style:{...vn,flex:1,minWidth:0,padding:0,fontWeight:r("font-family")?600:400,color:r("font-family")?c:bn},title:C||Zr(m)}),St("button",{type:"button",onClick:()=>v(J=>!J),style:{alignSelf:"stretch",display:"flex",alignItems:"center",justifyContent:"center",paddingLeft:8,marginLeft:6,border:"none",outline:"none",backgroundColor:"transparent",color:"#999",flexShrink:0,cursor:"pointer"},children:St(Hd,{size:12})}),g&&St("div",{ref:ie,style:{...V(),backgroundColor:Lo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:vt,fontWeight:xt},children:Ue.map(J=>{let ke=(C||m)===J.value;return tr("button",{type:"button",onClick:()=>{o("font-family",J.value),v(!1)},style:{width:"100%",display:"grid",gridTemplateColumns:"80px minmax(0, 1fr) 14px",gap:8,alignItems:"center",padding:"9px 12px",border:"none",outline:"none",backgroundColor:ke?Qr:"transparent",color:It,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt},children:[St("span",{children:J.label}),St("span",{style:{minWidth:0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:nr},children:J.value}),St("span",{style:{display:"flex",justifyContent:"center",color:ke?bn:"transparent"},children:ke&&St(nm,{size:14})})]},`${J.label}:${J.value}`)})})]})}),tr("div",{style:{display:"flex",gap:4},children:[St(Ao,{style:{flex:1,backgroundColor:"transparent"},children:tr("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[tr("select",{value:ce,onChange:J=>o("font-weight",J.target.value),style:{...vn,padding:"4px 8px",paddingLeft:4,paddingRight:24,cursor:"pointer",appearance:"none",WebkitAppearance:"none",backgroundColor:"transparent",fontWeight:r("font-weight")?600:400,color:r("font-weight")?c:ce?bn:nr},children:[!ce&&St("option",{value:"",disabled:!0,children:ue}),Object.entries(Fd).map(([J,ke])=>St("option",{value:J,children:ke},J))]}),St("div",{style:{position:"absolute",right:0,top:0,bottom:0,width:20,pointerEvents:"none",color:"#999",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"},children:St(Hd,{size:12})})]})}),St("div",{style:{flex:1},children:St(yo,{children:St("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:St(vo,{property:"font-size",value:U,onChange:J=>o("font-size",J),isModified:r("font-size"),placeholder:Ir("font-size",E,p),onCancel:()=>i("font-size"),min:1,max:999,style:{...vn,padding:"4px 8px",paddingRight:24,fontWeight:r("font-size")?600:400,color:r("font-size")?c:bn},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt},preferredUnit:p,onUnitCycle:f})})})})]}),tr("div",{style:{display:"flex",gap:4},children:[St("div",{style:{flex:1},children:St(yo,{children:St("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:St(vo,{property:"line-height",value:se,onChange:J=>o("line-height",J),isModified:r("line-height"),step:.1,min:0,scrubIcon:St(tm,{size:12,strokeWidth:r("line-height")?2.5:1.8}),accentColor:c,placeholder:Ir("line-height",S,p),onCancel:()=>i("line-height"),style:{...vn,flex:1,minWidth:0,padding:"4px 8px 4px 26px",fontWeight:r("line-height")?600:400,color:r("line-height")?c:bn},showUnit:!1})})})}),St("div",{style:{flex:1},children:St(yo,{children:St("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:St(vo,{property:"letter-spacing",value:O,onChange:J=>o("letter-spacing",J),isModified:r("letter-spacing"),step:.1,min:-100,scrubIcon:St(om,{size:12,strokeWidth:r("letter-spacing")?2.5:1.8}),accentColor:c,placeholder:Ir("letter-spacing",B,p),onCancel:()=>i("letter-spacing"),style:{...vn,flex:1,minWidth:0,padding:"4px 8px 4px 26px",fontWeight:r("letter-spacing")?600:400,color:r("letter-spacing")?c:bn},showUnit:!1})})})})]}),tr("div",{style:{display:"flex",gap:2,height:jn,boxSizing:"border-box",backgroundColor:Fo,borderRadius:2,padding:2},children:[St(P,{align:"left",icon:St(Qg,{size:14})}),St(P,{align:"center",icon:St(qg,{size:14})}),St(P,{align:"right",icon:St(em,{size:14})}),St(P,{align:"justify",icon:St(Zg,{size:14})})]}),tr("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[St("span",{onClick:r("color")?()=>i("color"):void 0,title:r("color")?"Click to reset":void 0,style:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,cursor:r("color")?"pointer":"default",width:40,flexShrink:0},children:"Color"}),St("div",{style:{flex:1,minWidth:0},children:St(Ys,{value:D,resolvedValue:we,placeholder:Zr(A),colorVariables:u,onChange:J=>o("color",J),onCancel:()=>i("color"),accentColor:c,modified:r("color"),panelContentRef:d})})]})]})]})}import{Fragment as Im,jsx as G,jsxs as qe}from"react/jsx-runtime";var $d=[{name:"Background",properties:[{property:"background-color",label:"Color",type:"color"}]},{name:"Borders",properties:[{property:"border-width",label:"Width",type:"number",min:0,max:20},{property:"border-color",label:"Color",type:"color"},{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:"filter",label:"Filter",type:"text"},{property:"backdrop-filter",label:"Backdrop Filter",type:"backdrop-filter"},{property:"transform",label:"Transform",type:"text"}]}];function al(e,t){return e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":t?"fixed":"hug"}function Js(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=Ro(t);if(typeof n.num=="number"&&!isNaN(n.num)){let o=n.unit==="%"?"px":n.unit||"px";return`${n.num}${o}`}return"auto"}}}function Ho(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 Dd(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function Od(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 Li="#eaeaea",Lo="#ffffff",Qr="rgba(0, 0, 0, 0.04)",Fo="rgba(0, 0, 0, 0.04)",ml="rgba(0, 0, 0, 0.12)",hl="rgba(0, 0, 0, 0.22)",bn="#111827",nr="#999999",It="#999999",vt=9,xt=600,jn=26,Ud=280,Vn=16,pm=8,Kd=3,fm=3,Lr=Ud+2*Kd,gm=Lr+2*fm;function is(e,t,n){let o=2*Kd,r=n?.getBoundingClientRect(),i=window.innerHeight-Vn-o;return r&&t+gm>r.left&&(i=r.top-pm-o),Math.max(200,i-Math.max(0,e))}var vn={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:bn,border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};function Zr(e){return e.trim().replace(/\s+/g," ")||"\u2014"}function Ir(e,t,n){let o=Ro(t);if(!/^-?[\d.]/.test(t.trim()))return Zr(t);let i=Qi[e],s=n&&i?.includes(n)?n:Xr(e),a=o.unit&&o.unit!==s?Ri(o.num,s):o.num;return String(a)}function yl(e){requestAnimationFrame(()=>e.select())}function Xd(e,t){return e||(t&&t!=="\u2014"?t:"")}function ti(e){let t=e.trim().toLowerCase().split(/\s+/).filter(Boolean);return t.length===0?!1:t.every(n=>{if(n==="0")return!0;let o=n.match(/^(-?\d*\.?\d+)(px|rem|em|%|vh|vw|dvh|dvw|svh|svw|lvh|lvw)?$/);return!!o&&Number(o[1])===0})}function Wd(e){let t=e.trim().toLowerCase().split(/\s+/).filter(Boolean);return t.length>0&&t.every(n=>n==="none"||n==="hidden")}var or=["top","right","bottom","left"],Rr={top:"border-top-width",right:"border-right-width",bottom:"border-bottom-width",left:"border-left-width"};function mm(e){let t=e.trim().split(/\s+/).filter(Boolean),[n="0px",o=n,r=n,i=o]=t;return t.length===1?{top:n,right:n,bottom:n,left:n}:t.length===2?{top:n,right:o,bottom:n,left:o}:t.length===3?{top:n,right:o,bottom:r,left:o}:{top:n,right:o,bottom:r,left:i}}function hm(e){let t=or.filter(n=>!ti(e[n]));if(t.length===0)return"all";if(t.length===4){let[n]=or.map(o=>e[o].trim());return or.every(o=>e[o].trim()===n)?"all":"custom"}return t.length===1?t[0]:"custom"}function ym(e,t){return or.map(n=>e[n]).find(n=>!ti(n))||(ti(t)?"1px":t)}function dl({mode:e}){return e==="all"?G(cm,{size:15,strokeWidth:1.9}):e==="custom"?G(dm,{size:15,strokeWidth:1.9}):G(um,{size:15,strokeWidth:1.9,style:{transform:`rotate(${{top:0,right:90,bottom:180,left:270}[e]}deg)`}})}function as(e){let t=e.trim().toLowerCase();if(!t||t==="transparent")return!0;let n=t.match(/^rgba?\(\s*([^)]+)\)$/);if(!n)return!1;let o=n[1].split(/[\s,\/]+/).map(r=>r.trim()).filter(Boolean);if(t.startsWith("rgba")||o.length>=4){let r=Number(o[3]);return!Number.isNaN(r)&&r===0}return!1}function bm(e){if(!e.trim())return!0;let t=Number(e);return Number.isFinite(t)&&t===1}function vm(e){let t=e.trim();return t.startsWith("var(")||t.startsWith("--")}function fl(e){let t=e.trim(),n=t.toLowerCase();if(!/^[a-z]+$/i.test(t)||["currentcolor","transparent","inherit","initial","unset","revert","revert-layer"].includes(n)||typeof document>"u"||typeof CSS>"u"||!CSS.supports?.("color",t))return t;let o=document.createElement("span");o.style.color=t,o.style.display="none",(document.body||document.documentElement).appendChild(o);let r=getComputedStyle(o).color.trim();return o.remove(),r||t}function xm(e){return fl(e)!==e.trim()}function Sm(e){let t=e.trim(),n=t.toLowerCase();return!/^[a-z]+$/i.test(t)||["currentcolor","transparent","inherit","initial","unset","revert","revert-layer"].includes(n)?!1:typeof CSS<"u"&&!!CSS.supports&&!CSS.supports("color",t)}function gl(e){let t=[],n="",o=0,r=null;for(let s=0;s<e.length;s++){let a=e[s],l=e[s-1];if(r){n+=a,a===r&&l!=="\\"&&(r=null);continue}if(a==='"'||a==="'"){r=a,n+=a;continue}if(a==="("&&o++,a===")"&&(o=Math.max(0,o-1)),a===","&&o===0){let c=n.trim();c&&t.push(c),n="";continue}n+=a}let i=n.trim();return i&&t.push(i),t}function Ai(e){let t=e.trim().toLowerCase();return!t||t==="none"||t==="transparent"||t==="rgba(0, 0, 0, 0)"||t==="rgba(0,0,0,0)"||t==="none repeat scroll 0% 0% / auto padding-box border-box"}function ss(e){let t=e.trim().toLowerCase();return!t||t==="none"||t==="transparent"||t==="none repeat scroll 0% 0% / auto padding-box border-box"}function wm(e){return/(?:repeating-)?(?:linear|radial|conic)-gradient\(/i.test(e)}function Em(e){let t=e.trim();return wm(t)||/^url\(/i.test(t)}function Cm(e){let t=e.trim()||"rgba(0, 0, 0, 0.08)";return Em(t)?t:`linear-gradient(${t}, ${t})`}function ul(e){let t=e.trim(),n="linear-gradient(";if(t.toLowerCase().startsWith(n)&&t.endsWith(")")){let o=t.slice(n.length,-1),r=gl(o);if(r.length===2&&r[0]?.trim()===r[1]?.trim())return r[0].trim()}return t}function Mm(e){return e.map(t=>Cm(t)).join(", ")}function Us(e){let t=e.trim().toLowerCase();if(as(t))return"0";let n=t.match(/^rgba?\(\s*([^)]+)\)$/);if(n){let r=n[1].split(/[\s,\/]+/).map(i=>i.trim()).filter(Boolean)[3];if(r){if(r.endsWith("%"))return String(Math.round(Number(r.slice(0,-1))));let i=Number(r);if(Number.isFinite(i))return String(Math.round(i<=1?i*100:i))}}return"100"}function jd(e,t){let n=Math.max(0,Math.min(100,Number(t)))/100,o=e.trim(),r=o.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);if(r){let s=r[1],a=s.length===3?s.split("").map(d=>d+d).join(""):s,l=parseInt(a.slice(0,2),16),c=parseInt(a.slice(2,4),16),u=parseInt(a.slice(4,6),16);return`rgba(${l}, ${c}, ${u}, ${n})`}let i=o.match(/^rgba?\(\s*([^)]+)\)$/i);if(i){let s=i[1].split(/[\s,\/]+/).map(u=>u.trim()).filter(Boolean),[a,l,c]=s;if(a&&l&&c)return`rgba(${a}, ${l}, ${c}, ${n})`}return n===1?o:`rgba(0, 0, 0, ${n})`}function rs({type:e="text",value:t,placeholder:n,onChange:o,onCancel:r,style:i,min:s,max:a,step:l}){let[c,u]=Jt(!1),[d,p]=Jt(""),f=$t(!1),m=$t(!1),E=$t("");return G("input",{type:e,value:c?d:t,placeholder:n,min:s,max:a,step:l,onFocus:A=>{let C=Xd(t,n);E.current=activeValue,p(C),u(!0),f.current=!1,m.current=!1,yl(A.currentTarget)},onChange:A=>{let C=A.target.value;f.current=!0,p(C),o(C)},onBlur:()=>{!m.current&&f.current&&o(d),u(!1),f.current=!1,m.current=!1},onKeyDown:A=>{if(A.key==="Escape"){A.preventDefault(),f.current&&(E.current?o(E.current):r?.()),m.current=!0,p(t),u(!1),A.currentTarget.blur();return}A.key==="Enter"&&A.currentTarget.blur()},style:i})}function Tm(e){let t=Number(e);return Number.isFinite(t)?String(Math.max(0,Math.min(100,Math.round(t)))):"0"}function km({value:e,placeholder:t,modified:n,onChange:o,onCancel:r,chromeless:i=!1,accentColor:s}){let[a,l]=Jt(!1),[c,u]=Jt(""),[d,p]=Jt(null),f=$t(""),m=$t(!1);Fn(()=>{d!==null&&e===d&&p(null)},[d,e]);let E=a?c:d??e,x=S=>{let B=S.trim()===""?"0":Tm(S);o(B),u(B),p(B)};return qe("div",{style:{position:"relative",minHeight:jn,backgroundColor:i?"transparent":Fo,borderRadius:2,color:bn},children:[G("input",{type:"text",inputMode:"numeric",value:E,placeholder:t,onFocus:S=>{let B=d??e;f.current=B,u(B),l(!0),m.current=!1,yl(S.currentTarget)},onChange:S=>{u(S.target.value)},onBlur:()=>{if(m.current){m.current=!1,l(!1);return}if(c.trim()===""){u(f.current),p(null),l(!1),r?.();return}x(c),l(!1)},onKeyDown:S=>{if(S.key==="Escape"){S.preventDefault(),m.current=!0,u(f.current),p(null),l(!1),r?.(),S.currentTarget.blur();return}if(S.key==="Enter"){S.preventDefault(),x(c),l(!1),S.currentTarget.blur();return}if(S.key==="ArrowUp"||S.key==="ArrowDown"){S.preventDefault();let B=S.key==="ArrowUp"?1:-1,L=S.shiftKey?10:S.altKey?.1:1,A=c.trim()===""?0:Number(c),C=Math.max(0,Math.min(100,(Number.isFinite(A)?A:0)+B*L)),U=String(Math.round(C*10)/10);u(U),o(U)}},style:{...vn,paddingLeft:9,paddingRight:18,color:n?s:vn.color}}),G("span",{style:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",color:It,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt,pointerEvents:"none"},children:"%"})]})}function ll({label:e,property:t,cssValue:n,displayValue:o,placeholder:r,mode:i,onValueChange:s,onModeChange:a,modified:l,dimmed:c,dropdownOpen:u,onDropdownChange:d,panelContentRef:p,accentColor:f="#3b82f6",onReset:m,canAddMinConstraint:E=!1,canAddMaxConstraint:x=!1,onAddMinConstraint:S,onAddMaxConstraint:B,onHoverChange:L,onValuePreview:A}){let C=o??n,[U,ee]=Jt(null),se=U??C,O=Ro(se),D=r??"",g=l?O.unit||Xr(t):Xr(t),v=!l&&O.unit&&O.unit!==g?Ri(O.num,g):O.num,[b,ie]=Jt(!1),[ve,ce]=Jt(String(v)),[ue,we]=Jt(!1),Ue=$t(null),V=$t(null),P=$t(null),J=$t(!1);Fn(()=>{b||ce(String(v))},[v,b]),Fn(()=>{if(!u)return;let He=Et=>{V.current&&!Et.composedPath().includes(V.current)&&P.current&&!Et.composedPath().includes(P.current)&&d?.(!1)},Pe=Et=>{Et.key==="Escape"&&d?.(!1)};return document.addEventListener("mousedown",He),document.addEventListener("keydown",Pe),()=>{document.removeEventListener("mousedown",He),document.removeEventListener("keydown",Pe)}},[u,d]),Fn(()=>{b&&Ue.current&&(Ue.current.focus(),Ue.current.select())},[b]);let ke=()=>{let He=Ws(ve,t,n,l);s(He||`${Math.max(0,parseFloat(ve)||0)}${g}`),ie(!1)},De=()=>{if(J.current){J.current=!1;return}ke()},pe=He=>{if(He.key==="Enter"){ke();return}if(He.key==="Escape"){J.current=!0,ce(String(v)),ie(!1);return}if(He.key==="ArrowUp"||He.key==="ArrowDown"){He.preventDefault();let Pe=He.key==="ArrowUp"?1:-1,Et=He.shiftKey?8:He.altKey?.1:1,dn=parseFloat(ve)||0,Sn=Math.round(Math.max(0,dn+Pe*Et)*1e3)/1e3;ce(String(Sn)),s(`${Sn}${g}`)}},Ge={fixed:"Fixed",hug:"Hug",fill:"Fill"},Ze={fixed:G(pl,{size:12}),hug:G(lm,{size:12}),fill:G(pl,{size:12})},Me=t==="width"?"min width":"min height",Q=t==="width"?"max width":"max height",Ie=t==="width"?G(Vd,{size:14,strokeWidth:1.8}):G(Gd,{size:14,strokeWidth:1.8}),mt=t==="width"?G(Jd,{size:14,strokeWidth:1.8}):G(Yd,{size:14,strokeWidth:1.8}),We=()=>{d?.(!u)},Oe=()=>{if(!P.current||!p?.current)return{position:"absolute",top:"100%",left:0,right:0,width:"100%",marginTop:4};let He=P.current.getBoundingClientRect(),Pe=p.current.getBoundingClientRect();return{position:"fixed",top:He.bottom+4,left:Pe.left,width:Pe.width}};return qe("div",{ref:P,onMouseEnter:()=>{we(!0),L?.(!0)},onMouseLeave:()=>{we(!1),L?.(!1)},style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:b?f:ue?hl:ml,backgroundColor:u?Lo:"transparent",minHeight:jn,boxSizing:"border-box",transition:"border-color 100ms ease, opacity 150ms ease",opacity:c?.3:1},children:[G(er,{value:se||n||D,onChange:He=>{ee(null),s(He)},onPreview:He=>{ee(He),A?.(He)},onScrubEnd:()=>ee(null),onReset:m,isModified:l||U!==null,accentColor:f,defaultUnit:"px",min:0,step:1,snapSteps:Qo,style:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,padding:"0 8px",flexShrink:0,cursor:"ew-resize"},children:e}),i==="fixed"?b?G("input",{ref:Ue,type:"text",inputMode:"numeric",value:ve,placeholder:D,onChange:He=>ce(He.target.value),onKeyDown:pe,onBlur:De,style:{...vn,flex:1,minWidth:0,padding:"4px 2px"}}):G("span",{onClick:()=>{ce(C||D),ie(!0)},style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text",color:C?bn:nr},children:C?v:D}):G("span",{style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:nr,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:D}),qe("button",{type:"button",onClick:We,style:{display:"flex",alignItems:"center",gap:2,padding:"4px 8px",border:"none",outline:"none",backgroundColor:"transparent",color:It,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt,cursor:"pointer",flexShrink:0},children:[Ge[i],G(Xs,{size:12})]}),u&&qe("div",{ref:V,style:{...Oe(),backgroundColor:Lo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt},children:[qe("button",{type:"button",onClick:()=>{a("fixed"),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:i==="fixed"?Qr:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[Ze.fixed,qe("span",{children:["Fixed ",t," (",n,")"]}),i==="fixed"&&G(Ks,{size:14,style:{marginLeft:"auto"}})]}),qe("button",{type:"button",onClick:()=>{a("hug"),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:i==="hug"?Qr:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[Ze.hug,G("span",{children:"Hug contents"}),i==="hug"&&G(Ks,{size:14,style:{marginLeft:"auto"}})]}),qe("button",{type:"button",onClick:()=>{a("fill"),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:i==="fill"?Qr:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[Ze.fill,G("span",{children:"Fill container"}),i==="fill"&&G(Ks,{size:14,style:{marginLeft:"auto"}})]}),(E||x)&&G("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),E&&qe("button",{type:"button",onClick:()=>{S?.(),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[G("span",{style:{width:18,flexShrink:0,display:"flex",alignItems:"center"},children:Ie}),qe("span",{children:["Add ",Me,"..."]})]}),x&&qe("button",{type:"button",onClick:()=>{B?.(),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[G("span",{style:{width:18,flexShrink:0,display:"flex",alignItems:"center"},children:mt}),qe("span",{children:["Add ",Q,"..."]})]})]})]})}function os({label:e,axis:t,kind:n,value:o,placeholder:r,currentValue:i,modified:s,accentColor:a="#3b82f6",onChange:l,onReset:c,panelContentRef:u,dimmed:d,onPreview:p}){let[f,m]=Jt(!1),[E,x]=Jt(o),[S,B]=Jt(null),[L,A]=Jt(!1),[C,U]=Jt(!1),ee=$t(null),se=$t(null),O=$t(null),D=$t(!1);Fn(()=>{f||x(o)},[f,o]),Fn(()=>{f&&ee.current&&(ee.current.focus(),ee.current.select())},[f]),Fn(()=>{if(!C)return;let we=V=>{O.current&&!V.composedPath().includes(O.current)&&se.current&&!V.composedPath().includes(se.current)&&U(!1)},Ue=V=>{V.key==="Escape"&&U(!1)};return document.addEventListener("mousedown",we),document.addEventListener("keydown",Ue),()=>{document.removeEventListener("mousedown",we),document.removeEventListener("keydown",Ue)}},[C]);let g=n==="min"?t==="width"?G(Vd,{size:14,strokeWidth:1.8}):G(Gd,{size:14,strokeWidth:1.8}):t==="width"?G(Jd,{size:14,strokeWidth:1.8}):G(Yd,{size:14,strokeWidth:1.8}),v=n==="min"?"min":"max",b=t==="width"?"width":"height",ie=()=>{if(!se.current||!u?.current)return{position:"absolute",top:"100%",left:0,right:0,width:"100%",marginTop:4};let we=se.current.getBoundingClientRect(),Ue=u.current.getBoundingClientRect();return{position:"fixed",top:we.bottom+4,left:Ue.left,width:Ue.width}},ve=()=>{l(E.trim()),m(!1)};return qe("div",{ref:se,onMouseEnter:()=>A(!0),onMouseLeave:()=>A(!1),style:{flex:1,minWidth:0,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:f?a:L||C?hl:"transparent",backgroundColor:C?Lo:Fo,height:jn,boxSizing:"border-box",opacity:d?.3:1,transition:"border-color 100ms ease, opacity 150ms ease"},children:[G(er,{value:S??(o||i),onChange:we=>{B(null),l(we)},onPreview:we=>{B(we),p?.(we)},onScrubEnd:()=>B(null),onReset:c,isModified:s||S!==null,accentColor:a,defaultUnit:"px",min:0,step:1,snapSteps:Qo,style:{width:26,height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",outline:"none",backgroundColor:"transparent",color:s?a:"#999",cursor:s?"pointer":"default",padding:0,flexShrink:0},children:g}),f?G("input",{ref:ee,type:"text",value:S??E,placeholder:r,onChange:we=>x(we.target.value),onBlur:()=>{if(D.current){D.current=!1;return}ve()},onKeyDown:we=>{we.key==="Enter"&&ve(),we.key==="Escape"&&(D.current=!0,x(o),m(!1))},style:{...vn,flex:1,minWidth:0,padding:"4px 2px",color:s?a:bn,fontWeight:s?600:400}}):G("button",{type:"button",onClick:()=>{x(o),m(!0)},style:{flex:1,minWidth:0,height:"100%",border:"none",outline:"none",backgroundColor:"transparent",color:o?s?a:bn:nr,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:s?600:400,textAlign:"left",padding:"4px 4px 4px 0",cursor:"text",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:S??(o||r)}),G("button",{type:"button",onClick:()=>U(we=>!we),style:{width:28,height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",outline:"none",backgroundColor:"transparent",color:"#999",cursor:"pointer",padding:0,flexShrink:0},children:G(Xs,{size:12})}),C&&qe("div",{ref:O,style:{...ie(),backgroundColor:Lo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt},children:[qe("button",{type:"button",onClick:()=>{l(i),U(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[G("span",{style:{width:18,flexShrink:0,display:"flex",alignItems:"center"},children:g}),qe("span",{children:["Set to current ",b]})]}),qe("button",{type:"button",onClick:()=>{c?.(),U(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[G("span",{style:{width:18,flexShrink:0}}),qe("span",{children:["Remove ",v," ",b]})]}),G("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),qe("button",{type:"button",onClick:()=>U(!1),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[G("span",{style:{width:18,flexShrink:0,display:"flex",alignItems:"center"},children:G(sm,{size:14,strokeWidth:1.8})}),G("span",{children:"Apply variable..."})]})]})]})}function Ao({children:e,style:t,dimmed:n,onMouseEnter:o,onMouseLeave:r}){let[i,s]=Jt(!1);return G("div",{onMouseEnter:()=>{s(!0),o?.()},onMouseLeave:()=>{s(!1),r?.()},style:{position:"relative",borderRadius:2,border:"none",backgroundColor:Fo,minHeight:jn,boxSizing:"border-box",transition:"opacity 150ms ease",opacity:n?.3:1,color:bn,...t},children:e})}function yo({children:e}){return G("div",{style:{position:"relative",borderRadius:2,backgroundColor:Fo,minHeight:jn,boxSizing:"border-box",color:bn},children:e})}function vo({property:e,value:t,onChange:n,onPreview:o,onScrubEnd:r,isModified:i=!1,step:s=1,min:a,max:l,style:c,placeholder:u,showUnit:d=!0,unitStyle:p,preferredUnit:f,onUnitCycle:m,onCancel:E,scrubIcon:x,scrubValue:S,scrubSnapSteps:B,accentColor:L}){let[A,C]=Jt(null),U=A??t,ee=Ro(U),se=Xr(e),O=Qi[e],g=f&&O&&O.includes(f)?f:se,v=i&&ee.unit||g,b=!i&&ee.unit&&ee.unit!==v?Ri(ee.num,v):ee.num,[ie,ve]=Jt(!1),[ce,ue]=Jt(""),we=$t(!1),Ue=$t(!1),V=$t(""),P=We=>{ve(!0),V.current=t,we.current=!1,Ue.current=!1,ue(pe?String(b):u&&u!=="\u2014"?u:""),yl(We.target)},J=()=>{if(ve(!1),!Ue.current&&we.current&&ce.trim()){let We=Ws(ce,e,t,i);We&&n(We)}we.current=!1,Ue.current=!1},ke=We=>{let Oe=We.target.value;we.current=!0,ue(Oe);let He=Oe.trim(),Pe=He.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),Et=He.match(/^(-?[\d.]+)$/);if(Pe){let dn=parseFloat(Pe[1]);isNaN(dn)||n(`${dn}${Pe[2].toLowerCase()}`)}else if(Et){let dn=parseFloat(Et[1]);isNaN(dn)||n(`${dn}${v}`)}},De=We=>{if(We.key==="Escape"){We.preventDefault(),Ue.current=!0,we.current&&(V.current?n(V.current):E?.()),ue(V.current),ve(!1),We.target.blur();return}if(We.key==="Enter"){if(ce.trim()){let Oe=Ws(ce,e,t,i);Oe&&n(Oe)}We.target.blur();return}if(We.key==="ArrowUp"||We.key==="ArrowDown"){We.preventDefault();let Oe=We.shiftKey?10:We.altKey?.1:1,He=(We.key==="ArrowUp"?1:-1)*s*Oe,Pe=parseFloat(ce)||b||0,Et=Math.round((Pe+He)*1e3)/1e3;a!==void 0&&(Et=Math.max(a,Et)),l!==void 0&&(Et=Math.min(l,Et)),ue(String(Et)),n(`${Et}${v}`)}},pe=/^-?[\d.]/.test(U.trim()),Ge=ie?ce:pe?String(b):"",Me=ie&&/\s*(rem|em|px|%)\s*$/i.test(ce)?"":v,Q=m&&(Me==="rem"||Me==="px"),Ie={fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,pointerEvents:"none"},mt={...p??Ie,pointerEvents:"auto",cursor:"pointer"};return qe(Im,{children:[x&&G(er,{value:S??U,onChange:We=>{C(null),n(We)},onPreview:We=>{C(We),o?.(We)},onScrubEnd:()=>{C(null),r?.()},onReset:E,isModified:i||A!==null,accentColor:L,defaultUnit:v,min:a,max:l,step:s,snapSteps:B??Qo,style:{position:"absolute",left:4,top:"50%",transform:"translateY(-50%)",height:jn,padding:"0 4px",zIndex:1},children:x}),G("input",{type:"text",inputMode:"decimal",value:Ge,onFocus:P,onBlur:J,onChange:ke,onKeyDown:De,placeholder:u,style:c}),d&&Me&&G("span",{style:Q?mt:p??Ie,onClick:Q?m:void 0,title:Q?"Click to switch units":void 0,children:Me})]})}function Ys({value:e,resolvedValue:t,placeholder:n,colorVariables:o,onChange:r,onCancel:i,accentColor:s="#3b82f6",modified:a,panelContentRef:l,chromeless:c=!1}){let[u,d]=Jt(!1),p=e,f=p||n||"\u2014",[m,E]=Jt(p),[x,S]=Jt(!1),[B,L]=Jt(!1),A=$t(null),C=$t(null),U=$t([]),ee=$t(!1),se=$t(!1),O=$t(""),D=xn(()=>{if(!C.current)return{position:"fixed",top:0,left:0,width:200};let P=C.current.getBoundingClientRect();if(l?.current){let J=l.current.getBoundingClientRect();return{position:"fixed",top:P.bottom+4,left:J.left,width:J.width}}return{position:"fixed",top:P.bottom+4,left:P.left,width:P.width}},[l]);Fn(()=>{u||E(e)},[e,u]),Fn(()=>{if(!x)return;let P=ke=>{C.current&&!ke.composedPath().includes(C.current)&&S(!1)},J=ke=>{ke.key==="Escape"&&S(!1)};return document.addEventListener("mousedown",P),document.addEventListener("keydown",J),()=>{document.removeEventListener("mousedown",P),document.removeEventListener("keydown",J)}},[x]),Fn(()=>{u&&A.current&&(A.current.focus(),A.current.select())},[u]);let g=ei(()=>{if(!m||m.startsWith("#")||m.startsWith("rgb")||m.startsWith("hsl")||m.startsWith("oklch"))return[];let P=m.toLowerCase();return o.filter(J=>J.name.toLowerCase().includes(P)||J.usage.toLowerCase().includes(P)).slice(0,8)},[m,o]),v=()=>{if(se.current){se.current=!1,ee.current=!1;return}if(!ee.current){d(!1),S(!1);return}if(!m.trim()){d(!1),S(!1),ee.current=!1;return}if(Sm(m)){E(""),i?.(),d(!1),S(!1),ee.current=!1;return}let P=fl(m);E(P),r(P),d(!1),S(!1),ee.current=!1},b=P=>{ee.current=!0,E(P),xm(P)&&r(fl(P)),P.includes("var")||P.includes("--")||P.length>0&&!P.startsWith("#")?S(!0):S(!1)},ie=P=>{E(P.usage),r(P.usage),S(!1),d(!1)},ve=(P,J)=>{requestAnimationFrame(()=>{P[J]?.focus()})},ce=(P,J,ke,De)=>{if(P.key==="ArrowDown"||P.key==="ArrowUp"){P.preventDefault();let pe=P.key==="ArrowDown"?1:-1,Ge=(De+pe+J.length)%J.length;ke.current[Ge]?.focus();return}if(P.key==="Enter"){P.preventDefault(),ie(J[De]);return}P.key==="Escape"&&(P.preventDefault(),S(!1),A.current?.focus())},ue=()=>{setTimeout(()=>{x||v()},150)},we=P=>{if((P.key==="ArrowDown"||P.key==="ArrowUp")&&x&&g.length>0){P.preventDefault(),ve(U.current,P.key==="ArrowDown"?0:g.length-1);return}P.key==="Enter"?v():P.key==="Escape"&&(P.preventDefault(),se.current=!0,ee.current&&(O.current?r(O.current):i?.()),E(O.current),d(!1),S(!1),ee.current=!1,A.current?.blur())},Ue=ei(()=>{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 J=P.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(J){let De=parseInt(J[1],10).toString(16).padStart(2,"0"),pe=parseInt(J[2],10).toString(16).padStart(2,"0"),Ge=parseInt(J[3],10).toString(16).padStart(2,"0");return`#${De}${pe}${Ge}`}let ke=P.match(/oklch\(\s*([\d.]+)/);if(ke){let De=Math.max(0,Math.min(1,parseFloat(ke[1]))),pe=Math.round(De*255).toString(16).padStart(2,"0");return`#${pe}${pe}${pe}`}return"#000000"},[t]);return qe("div",{ref:C,onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1),style:{position:"relative",borderRadius:2,border:c?"none":"1px solid",borderColor:c?"transparent":u?s:B?hl:ml,backgroundColor:"transparent",minHeight:jn,boxSizing:"border-box",transition:"border-color 100ms ease",overflow:"hidden"},children:[qe("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[qe("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[G("input",{type:"color",value:Ue,onChange:P=>{let J=P.target.value;E(J),r(J)},style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),G("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),u?G("input",{ref:A,type:"text",value:m,placeholder:n,onChange:P=>b(P.target.value),onKeyDown:we,onBlur:ue,style:{...vn,flex:1,minWidth:0}}):G("span",{onClick:()=>{O.current=p,ee.current=!1,se.current=!1,E(Xd(p,n)),d(!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?s:p?bn:nr},title:p||n,children:f})]}),x&&g.length>0&&G("div",{"data-popmelt-dropdown":"true",style:{...D(),backgroundColor:Lo,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:g.map((P,J)=>qe("button",{ref:ke=>{U.current[J]=ke},type:"button",onClick:()=>ie(P),onKeyDown:ke=>ce(ke,g,U,J),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",backgroundColor:"transparent",color:"#1e293b",cursor:"pointer",textAlign:"left",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',outline:"none"},onFocus:ke=>{ke.currentTarget.style.backgroundColor=Qr},onBlur:ke=>{ke.currentTarget.style.backgroundColor="transparent"},children:[G("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:P.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),G("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:P.name})]},P.name))})]})}function qd({element:e,elementInfo:t,selector:n,styleModifications:o,dispatch:r,onClose:i,onHover:s,accentColor:a="#3b82f6",toolbarRef:l,panelWrapperRef:c,refreshKey:u=0}){let d=$t(null),p=$t(null),[f,m]=Jt(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch{return!1}});Fn(()=>{if(f)return;let I=setTimeout(()=>m(!0),50);return()=>clearTimeout(I)},[f]);let[E,x]=Jt(null),S=E!==null,[B,L]=Jt("rem"),A=xn(()=>{L(I=>I==="rem"?"px":"rem")},[]),C=$t(new Map),[U,ee]=Jt(""),[se,O]=Jt(!1),D=$t(null),[g,v]=Jt(!1),[b,ie]=Jt(null),ve=$t(null),ce=ei(()=>Ba(),[u]);Fn(()=>{C.current.clear()},[e,u]),Fn(()=>{ie(null)},[e]),Fn(()=>{if(!se)return;let I=ne=>{D.current&&!ne.composedPath().includes(D.current)&&O(!1)},j=ne=>{ne.key==="Escape"&&O(!1)};return document.addEventListener("mousedown",I),document.addEventListener("keydown",j),()=>{document.removeEventListener("mousedown",I),document.removeEventListener("keydown",j)}},[se]),Fn(()=>{if(!g)return;let I=ne=>{ve.current&&!ne.composedPath().includes(ve.current)&&v(!1)},j=ne=>{ne.key==="Escape"&&v(!1)};return document.addEventListener("mousedown",I),document.addEventListener("keydown",j),()=>{document.removeEventListener("mousedown",I),document.removeEventListener("keydown",j)}},[g]),Fn(()=>{let I=j=>{if(j.key!=="Escape")return;let ne=document.activeElement;ne&&d.current?.contains(ne)||i()};return window.addEventListener("keydown",I),()=>window.removeEventListener("keydown",I)},[i]);let ue=$t({top:0,left:0,maxHeight:400}),[,we]=Jt(0),Ue="devtools-panel-position",V=$t({x:0,y:0}),P=$t(null),J=$t(!1);Fn(()=>{try{let I=localStorage.getItem(Ue);if(I){let j=JSON.parse(I);if(typeof j.top=="number"&&typeof j.left=="number"){J.current=!0;let ne=window.innerWidth-Lr-Vn,ae=Math.max(Vn,Math.min(j.top,window.innerHeight-Vn-200)),fe=Math.max(Vn,Math.min(j.left,ne));ue.current={top:ae,left:fe,maxHeight:is(ae,fe,l?.current)},we(ge=>ge+1)}}}catch{}},[]),Fn(()=>{let I=()=>{let j=window.innerWidth-Lr-Vn,ne=Math.max(Vn,Math.min(ue.current.top,window.innerHeight-Vn-200)),ae=Math.max(Vn,Math.min(ue.current.left,j));ue.current={top:ne,left:ae,maxHeight:is(ne,ae,l?.current)},we(fe=>fe+1)};return window.addEventListener("resize",I,{passive:!0}),()=>window.removeEventListener("resize",I)},[l]),Fn(()=>{let I=ne=>{let ae=P.current;if(!ae)return;let fe=ae.startOffsetX+(ne.clientX-ae.startX),ge=ae.startOffsetY+(ne.clientY-ae.startY),le=window.innerWidth-Lr-Vn,Ce=Math.max(Vn,Math.min(le,ue.current.left+fe)),pt=Math.max(Vn,Math.min(window.innerHeight-Vn-200,ue.current.top+ge));V.current={x:Ce-ue.current.left,y:pt-ue.current.top};let Fe=d.current,lt=Fe?.parentElement;if(!lt)return;lt.style.top=`${pt}px`,lt.style.left=`${Ce}px`;let ft=is(pt,Ce,l?.current);Fe&&(Fe.style.maxHeight=`${ft}px`,Fe.style.height=`${ft}px`)},j=()=>{if(!P.current)return;let ne=ue.current.top+V.current.y,ae=ue.current.left+V.current.x;ue.current={top:ne,left:ae,maxHeight:is(ne,ae,l?.current)},V.current={x:0,y:0},J.current=!0;try{localStorage.setItem(Ue,JSON.stringify({top:ne,left:ae}))}catch{}P.current=null};return window.addEventListener("mousemove",I),window.addEventListener("mouseup",j),()=>{window.removeEventListener("mousemove",I),window.removeEventListener("mouseup",j)}},[]);let ke=xn(I=>{I.button!==0||I.target.closest("button")||(I.preventDefault(),P.current={startX:I.clientX,startY:I.clientY,startOffsetX:V.current.x,startOffsetY:V.current.y})},[]);Fn(()=>{V.current={x:0,y:0};let I=(ae=!1)=>{let fe=d.current,ge=8,le,Ce;if(J.current)le=ue.current.top,Ce=ue.current.left;else{let lt=e.getBoundingClientRect();Ce=lt.right+ge,le=lt.top,Ce+Lr>window.innerWidth-Vn&&(Ce=lt.left-Lr-ge),Ce<Vn&&(Ce=Math.max(Vn,(window.innerWidth-Lr)/2))}let pt=window.innerWidth-Lr-Vn;le=Math.max(Vn,Math.min(le,window.innerHeight-Vn-200)),Ce=Math.max(Vn,Math.min(Ce,pt));let Fe=is(le,Ce,l?.current);if(ue.current={top:le,left:Ce,maxHeight:Fe},ae&&fe){let lt=fe.parentElement;lt&&!J.current&&(lt.style.top=`${le+V.current.y}px`,lt.style.left=`${Ce+V.current.x}px`),fe.style.maxHeight=`${Fe}px`,fe.style.height=`${Fe}px`}else we(lt=>lt+1)};I(!1);let j=()=>I(!0),ne=()=>I(!1);return window.addEventListener("scroll",j,{passive:!0}),window.addEventListener("resize",ne,{passive:!0}),()=>{window.removeEventListener("scroll",j),window.removeEventListener("resize",ne)}},[e,l,u]),Fn(()=>{let I=d.current;if(!I)return;let j=ne=>{if(ne.composedPath().some(Fe=>Fe instanceof HTMLElement&&Fe.dataset.popmeltDropdown==="true"))return;let ae=p.current;if(!ae){ne.preventDefault();return}let{scrollTop:fe,scrollHeight:ge,clientHeight:le}=ae,Ce=fe<=0&&ne.deltaY<0,pt=fe+le>=ge&&ne.deltaY>0;(Ce||pt)&&ne.preventDefault()};return I.addEventListener("wheel",j,{passive:!1}),()=>I.removeEventListener("wheel",j)},[]);let De=ei(()=>o.find(I=>I.selector===n),[o,n]),pe=xn(I=>{let j=De?.changes.find(ne=>ne.property===I);return j?j.modified:Is(e,I)},[e,De]),Ge=xn(I=>{let j=De?.changes.find(ne=>ne.property===I);return j?j.modified:Si(e,I)},[e,De]),Ze=xn((I,j)=>{if(!I.includes("color"))return j;let ne=j.trim();if(ne.startsWith("var(")||ne.startsWith("--"))return ne;let fe=ce.find(ge=>ge.usage===ne||ge.name===ne)?.value||ne;return Er(e,fe)},[ce,e]),Me=xn(I=>{if(C.current.has(I))return C.current.get(I);let j=De?.changes.find(ae=>ae.property===I);if(j)return j.original;let ne=Is(e,I);return C.current.set(I,ne),ne},[e,De]),Q=xn((I,j)=>{let ne=Me(I),ae=Ze(I,j);ut(e,I,ae),I==="backdrop-filter"&&ut(e,"-webkit-backdrop-filter",ae),r({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:I,original:ne,modified:ae}})},[e,n,t,r,Ze,Me]),Ie=xn(I=>{let ne=o.find(ae=>ae.selector===n)?.changes.find(ae=>ae.property===I);e instanceof HTMLElement&&(e.style.removeProperty(I),I==="backdrop-filter"&&e.style.removeProperty("-webkit-backdrop-filter")),(ne||e instanceof HTMLElement)&&(r({type:"CLEAR_STYLE",payload:{selector:n,property:I}}),C.current.delete(I))},[e,n,o,r]),mt=xn(()=>{let I=U.split(";").map(j=>j.trim()).filter(j=>j);for(let j of I){let ne=j.indexOf(":");if(ne>0){let ae=j.slice(0,ne).trim(),fe=j.slice(ne+1).trim();ae&&fe&&Q(ae,fe)}}ee("")},[U,Q]),We=xn(I=>De?.changes.some(j=>j.property===I)??!1,[De]),Oe=xn(I=>{requestAnimationFrame(()=>{let ne=d.current?.querySelector(`[data-popmelt-property="${I}"]`)?.querySelector("input, textarea, select, button");ne?.focus(),(ne instanceof HTMLInputElement||ne instanceof HTMLTextAreaElement)&&ne.select()})},[]),He=xn(()=>{let I=[],j=Ge("background-image");j&&!Ai(j)&&I.push(...gl(j).map(ul).filter(ge=>!ss(ge)));let ne=Ge("background");I.length===0&&ne&&!Ai(ne)&&I.push(...gl(ne).map(ul).filter(ge=>!ss(ge)));let ae=Ge("background-color"),fe=pe("background-color");return(ae!==null&&!ss(ae)||!as(fe))&&I.push(ae||fe),I},[Ge,pe]),Pe=xn(I=>{let j=I.filter(fe=>!ss(fe));if(j.length===0){Q("background","none"),Q("background-image","none"),Q("background-color","transparent"),Ie("opacity");return}let ne=j[j.length-1],ae=j.slice(0,-1);Ie("background"),ae.length>0?Q("background-image",Mm(ae)):Ie("background-image"),Q("background-color",ne),Ie("opacity")},[Q,Ie]),Et=ei(()=>{let I=Ge("background"),j=Ge("background-image"),ne=Ge("background-color"),ae=pe("background-color"),fe=pe("opacity"),ge=ne!==null&&!ss(ne);return Ai(I||"")&&Ai(j||"")&&!ge&&as(ae)&&(fe===""||Number(fe)===1)},[Ge,pe]),dn=ei(()=>{let I=pe("border-width"),j=pe("border-style"),ae=or.map(ge=>pe(Rr[ge])).some(ge=>!ti(ge));return ti(I)&&!ae||Wd(j)},[pe]),Sn=ei(()=>["box-shadow","filter","backdrop-filter","transform"].every(I=>{let j=pe(I);return!j||j==="none"}),[pe]),Ln=xn(()=>{let I=["rgba(0, 0, 0, 0.08)",...He()];Pe(I),Oe("background-layer-0")},[Pe,Oe,He]),Nt=xn((I,j,ne)=>{let ae=Me(I);ne(ae)?Ie(I):Q(I,j)},[Me,Q,Ie]),wn=xn(()=>{Nt("background","none",Ai),Nt("background-image","none",Ai),Nt("background-color","transparent",as),Nt("opacity","1",bm)},[Nt]),co=xn(()=>{Q("border-width","1px"),Q("border-style","solid"),Q("border-color",pe("color")||"#000000"),Oe("border-width")},[Oe,pe,Q]),Jn=xn(()=>{Nt("border-width","0px",ti),or.forEach(I=>{Nt(Rr[I],"0px",ti)}),Nt("border-color","transparent",as),Nt("border-style","none",Wd),ie(null)},[Nt]),En=xn(()=>or.some(j=>Ge(Rr[j])!==null)?{top:pe("border-top-width"),right:pe("border-right-width"),bottom:pe("border-bottom-width"),left:pe("border-left-width")}:mm(pe("border-width")),[Ge,pe]),At=hm(En()),at=b??At,Dt=xn((I,j)=>{let ne=En(),ae=pe("border-width"),fe=j||ym(ne,ae);if(ie(I==="custom"?"custom":null),v(!1),I==="all"){Q("border-width",fe),or.forEach(ge=>Ie(Rr[ge]));return}if(I==="custom"){or.forEach(ge=>{Q(Rr[ge],ne[ge]||fe)});return}Q("border-width","0px"),or.forEach(ge=>{Q(Rr[ge],ge===I?fe:"0px")})},[En,pe,Q,Ie]),un=xn((I,j)=>{Q(I,j),O(!1),Oe(I)},[Oe,Q]),ht=xn(()=>{O(!1),Q("box-shadow","none"),Q("filter","none"),Q("backdrop-filter","none"),Q("transform","none")},[Q]),Kt=I=>{let j=pe(I.property),ae=Ge(I.property)??"",fe=Zr(j),ge=We(I.property),le={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:bn,border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};switch(I.type){case"color":{let Ce=Er(e,j);return G(Ys,{value:ae,resolvedValue:Ce,placeholder:fe,colorVariables:ce,onChange:pt=>Q(I.property,pt),onCancel:()=>Ie(I.property),accentColor:a,modified:ge,panelContentRef:p})}case"number":{if(!!Qi[I.property])return G(yo,{modified:ge,children:G(vo,{property:I.property,value:ae,onChange:Fe=>Q(I.property,Fe),isModified:ge,placeholder:Ir(I.property,j,B),onCancel:()=>Ie(I.property),min:I.min,max:I.max,step:I.step||1,style:{...le,paddingRight:32},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt},preferredUnit:B,onUnitCycle:A})});let{num:pt}=Ro(ae);return G(yo,{modified:ge,children:G(rs,{type:"number",value:ae?pt:"",placeholder:fe,min:I.min,max:I.max,step:I.step||1,onChange:Fe=>Q(I.property,Fe),onCancel:()=>Ie(I.property),style:le})})}case"select":return G(Ao,{modified:ge,style:{backgroundColor:"transparent"},children:qe("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[qe("select",{value:ae,onChange:Ce=>Q(I.property,Ce.target.value),style:{...le,cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none",backgroundColor:"transparent",color:ge?a:ae?bn:nr},children:[!ae&&G("option",{value:"",disabled:!0,children:fe}),I.options?.map(Ce=>G("option",{value:Ce,children:Ce},Ce))]}),G("div",{style:{position:"absolute",right:0,top:0,bottom:0,width:20,pointerEvents:"none",color:"#999",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"},children:G(Xs,{size:12})})]})});case"spacing":return G(yo,{modified:ge,children:G(rs,{type:"text",value:ae,onChange:Ce=>Q(I.property,Ce),onCancel:()=>Ie(I.property),placeholder:fe||"e.g., 10px or 10px 20px",style:le})});case"backdrop-filter":return G(Td,{value:j,onChange:Ce=>Q(I.property,Ce),accentColor:a,modified:ge,panelContentRef:p});default:return G(yo,{modified:ge,children:G(rs,{type:"text",value:ae,placeholder:fe,onChange:Ce=>Q(I.property,Ce),onCancel:()=>Ie(I.property),style:le})})}},bt={width:jn,height:jn,border:"none",outline:"none",backgroundColor:"transparent",color:"#1f2937",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",padding:0},oo=(I,j,ne,ae,fe,ge=!1)=>G(km,{value:I,placeholder:j,modified:ne,onChange:ae,onCancel:fe,chromeless:ge,accentColor:a}),xo=({colorProperty:I,opacityProperty:j,colorValue:ne,explicitColorValue:ae,resolvedColor:fe,colorModified:ge,opacityDisplay:le,opacityPlaceholder:Ce,opacityModified:pt,onColorChange:Fe,onOpacityChange:lt,onColorCancel:ft,onOpacityCancel:An})=>{let Mn=vm(ae||ne);return qe("div",{style:{display:"grid",gridTemplateColumns:Mn?"minmax(0, 1fr)":"minmax(0, 1fr) 68px",alignItems:"center",minWidth:0,minHeight:jn,borderRadius:2,backgroundColor:Fo,overflow:"hidden"},children:[G("div",{"data-popmelt-property":I,style:{minWidth:0},children:G(Ys,{value:ae,resolvedValue:fe,placeholder:Zr(ne),colorVariables:ce,onChange:Fe,onCancel:ft,accentColor:a,modified:ge,panelContentRef:p,chromeless:!0})}),!Mn&&G("div",{"data-popmelt-property":j,style:{borderLeft:"1px solid rgba(0,0,0,0.1)",minWidth:0},children:oo(le,Ce,pt,lt,An,!0)})]})},Z=()=>{let I=He(),j=I.length>0?I:["rgba(0, 0, 0, 0.08)"],ne=We("background")||We("background-image")||We("background-color")||We("opacity");return G("div",{style:{display:"grid",gap:2,padding:"4px 0"},children:j.map((ae,fe)=>{let ge=ul(ae),le=Er(e,ge),Ce=`background-layer-${fe}`,pt=`background-layer-alpha-${fe}`,Fe=ft=>{let An=[...j];An[fe]=ft,Pe(An)},lt=()=>{let ft=j.filter((An,Mn)=>Mn!==fe);Pe(ft)};return qe("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) 22px 22px",gap:6,alignItems:"center",padding:"2px 12px"},children:[xo({colorProperty:Ce,opacityProperty:pt,colorValue:ge,explicitColorValue:ge,resolvedColor:le,colorModified:ne,opacityDisplay:Us(ge),opacityPlaceholder:Us(ge),opacityModified:ne,onColorChange:Fe,onOpacityChange:ft=>Fe(jd(le,ft)),onColorCancel:()=>Pe(j),onOpacityCancel:()=>Pe(j)}),G("button",{type:"button",title:"Hide fill",onClick:lt,style:bt,children:G(cl,{size:14,strokeWidth:1.8})}),G("button",{type:"button",title:"Remove fill",onClick:lt,style:bt,children:G(zd,{size:15,strokeWidth:2})})]},`${Ce}-${j.length}`)})})},xe=()=>{let I=pe("border-color"),j=Ge("border-color")??"",ne=Er(e,I),ae=We("border-color");return qe("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) 22px 22px",gap:6,alignItems:"center",padding:"4px 12px"},children:[xo({colorProperty:"border-color",opacityProperty:"border-color-alpha",colorValue:I,explicitColorValue:j,resolvedColor:ne,colorModified:ae,opacityDisplay:Us(I),opacityPlaceholder:Us(I),opacityModified:ae,onColorChange:fe=>Q("border-color",fe),onOpacityChange:fe=>Q("border-color",jd(ne,fe)),onColorCancel:()=>Ie("border-color"),onOpacityCancel:()=>Ie("border-color")}),G("button",{type:"button",title:"Hide stroke",onClick:Jn,style:bt,children:G(cl,{size:14,strokeWidth:1.8})}),G("button",{type:"button",title:"Remove stroke",onClick:Jn,style:bt,children:G(zd,{size:15,strokeWidth:2})})]})},Re={marginBottom:4,fontSize:vt,lineHeight:1.1,color:It,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt},et=(I,j,ne,ae=!1,fe=!1)=>{let le=Ge(I)??pe(I);return G(Ao,{style:{backgroundColor:"transparent",opacity:ae?.45:1,border:fe?`1px solid ${ml}`:"none"},children:qe("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[qe("select",{value:le,disabled:ae,onChange:Ce=>Q(I,Ce.target.value),style:{...vn,cursor:ae?"default":"pointer",paddingLeft:8,paddingRight:24,appearance:"none",WebkitAppearance:"none",backgroundColor:"transparent",color:ae?nr:bn},children:[ne&&!le&&G("option",{value:"",disabled:!0,children:ne}),j.map(Ce=>G("option",{value:Ce,children:Ce},Ce))]}),G("span",{style:{position:"absolute",right:6,top:"50%",transform:"translateY(-50%)",color:"#999",pointerEvents:"none",display:"flex"},children:G(Xs,{size:12})})]})})},Ke=()=>{let I=at==="top"||at==="right"||at==="bottom"||at==="left"?at:null,j=I?Rr[I]:"border-width",ae=Ge(j)??"",fe=pe(j),ge=We(j);return G(yo,{modified:ge,children:G(vo,{property:j,value:ae,onChange:le=>{I?Dt(I,le):Q(j,le)},isModified:ge,placeholder:Ir(j,fe,B),onCancel:()=>{I?Dt(I,"0px"):Ie(j)},min:0,max:20,step:1,scrubIcon:G(pl,{size:13,strokeWidth:ge?2.5:1.8}),accentColor:a,style:{...vn,paddingLeft:28,paddingRight:26},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt},preferredUnit:B,onUnitCycle:A})})},Le=I=>{let j=Rr[I],ne=Ge(j),ae=pe(j),fe=We(j);return G(yo,{modified:fe,children:G(vo,{property:j,value:ne??"",onChange:ge=>Q(j,ge),isModified:fe,placeholder:Ir(j,ae,B),onCancel:()=>Q(j,"0px"),min:0,max:20,step:1,scrubIcon:G(dl,{mode:I}),accentColor:a,style:{...vn,paddingLeft:28,paddingRight:26},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt},preferredUnit:B,onUnitCycle:A})})},tt=()=>at!=="custom"?null:qe("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1fr)",gap:8,padding:"0 12px 8px"},children:[G("div",{"data-popmelt-property":"border-left-width",children:Le("left")}),G("div",{"data-popmelt-property":"border-top-width",children:Le("top")}),G("div",{"data-popmelt-property":"border-right-width",children:Le("right")}),G("div",{"data-popmelt-property":"border-bottom-width",children:Le("bottom")})]}),Qt=(I,j=0,ne=100,ae=1)=>{let ge=Ge(I)??"",le=pe(I),Ce=We(I);return G(yo,{modified:Ce,children:G(vo,{property:I,value:ge,onChange:pt=>Q(I,pt),isModified:Ce,placeholder:Ir(I,le,B),onCancel:()=>Ie(I),min:j,max:ne,step:ae,style:{...vn,paddingRight:26},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt},preferredUnit:B,onUnitCycle:A})})},pn=()=>{let I=[{mode:"all",label:"All"},{mode:"top",label:"Top"},{mode:"bottom",label:"Bottom"},{mode:"left",label:"Left"},{mode:"right",label:"Right"},{mode:"custom",label:"Custom"}];return qe("div",{ref:ve,style:{position:"relative",width:jn,height:jn},children:[G("button",{type:"button",title:"Border sides",onClick:()=>v(j=>!j),style:{...bt,width:jn,height:jn,color:at!=="all"?a:"#1f2937"},children:G(dl,{mode:at})}),g&&G("div",{"data-popmelt-dropdown":"true",style:{position:"absolute",top:jn+4,right:0,width:156,backgroundColor:Lo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',boxShadow:"0 10px 28px rgba(0,0,0,0.18)"},children:I.map((j,ne)=>qe("button",{type:"button",onClick:()=>Dt(j.mode),style:{width:"100%",minHeight:34,display:"grid",gridTemplateColumns:"18px 18px minmax(0, 1fr)",columnGap:8,alignItems:"center",padding:j.mode==="custom"?"9px 12px":"7px 12px",border:"none",borderTop:j.mode==="custom"?"1px solid rgba(0,0,0,0.08)":"none",outline:"none",backgroundColor:j.mode===at?Qr:"transparent",color:"#1f2937",cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt,marginTop:j.mode==="custom"&&ne>0?2:0},children:[G("span",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:j.mode===at&&G(Ks,{size:13,strokeWidth:1.9})}),G("span",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:G(dl,{mode:j.mode})}),G("span",{children:j.label})]},j.mode))})]})},Cn=()=>qe("div",{style:{position:"relative"},children:[xe(),qe("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1fr) 22px",columnGap:6,alignItems:"end",padding:"0 12px 6px"},children:[qe("div",{children:[G("div",{style:Re,children:"Style"}),et("border-style",["solid","dashed","dotted","double","none"],void 0,!1,!0)]}),qe("div",{"data-popmelt-property":"border-width",children:[G("div",{style:Re,children:"Width"}),Ke()]}),pn()]}),tt()]}),Xt=()=>{let I=Ge("opacity"),j=(I??pe("opacity"))||"1",ne=Number(j),ae=I&&I.trim()&&Number.isFinite(ne)?String(Math.round(ne*100)):"",fe=Number.isFinite(ne)?String(Math.round(ne*100)):"100",le=pe("visibility")==="hidden",Ce=(Ge("mix-blend-mode")??pe("mix-blend-mode"))||"normal",pt=["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"];return qe("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)",opacity:S?.3:1,transition:"opacity 150ms ease"},children:[qe("div",{style:{...Un,padding:"6px 12px"},children:[G("span",{children:"Appearance"}),qe("div",{style:{display:"flex",alignItems:"center",gap:4},children:[G("button",{type:"button",title:le?"Show element":"Hide element",onClick:()=>{le?Ie("visibility"):Q("visibility","hidden")},style:{...bt,color:le?a:"#1f2937",opacity:le?1:.9},children:G(cl,{size:15,strokeWidth:1.8})}),qe("div",{style:{position:"relative",width:22,height:22},children:[G("button",{type:"button",title:"Blend mode",tabIndex:-1,style:{...bt,width:22,height:22,color:Ce!=="normal"?a:"#1f2937"},children:G(im,{size:15,strokeWidth:1.8})}),G("select",{"aria-label":"Blend mode",value:Ce,onChange:Fe=>{Fe.target.value==="normal"?Ie("mix-blend-mode"):Q("mix-blend-mode",Fe.target.value)},style:{position:"absolute",inset:0,opacity:0,cursor:"pointer"},children:pt.map(Fe=>G("option",{value:Fe,children:Fe},Fe))})]})]})]}),qe("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1fr)",columnGap:8,padding:"0 12px 8px"},children:[qe("div",{"data-popmelt-property":"opacity",children:[G("div",{style:Re,children:"Opacity"}),oo(ae,fe,We("opacity"),Fe=>{let lt=Math.max(0,Math.min(100,Number(Fe)))/100;Number.isFinite(lt)&&Q("opacity",String(lt))},()=>Ie("opacity"))]}),qe("div",{"data-popmelt-property":"border-radius",children:[G("div",{style:Re,children:"Corner radius"}),Qt("border-radius",0,100,1)]})]})]})},Wt=t.reactComponent||t.tagName,jt={position:"fixed",top:ue.current.top,left:ue.current.left,width:Ud,height:ue.current.maxHeight,maxHeight:ue.current.maxHeight,backgroundColor:Li,borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",zIndex:10002,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,color:bn,overflow:"visible",display:"flex",flexDirection:"column",opacity:f?1:0,transition:"opacity 150ms ease"},Yn={display:"flex",alignItems:"center",justifyContent:"space-between",margin:4,padding:"4px 5px 4px 10px",backgroundColor:a,color:"#ffffff",cursor:P.current?"grabbing":"grab",userSelect:"none",WebkitUserSelect:"none"},Un={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 12px 3px",userSelect:"none",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:600,color:"#475569"},Mt={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},Ft={width:80,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,flexShrink:0};return G("div",{ref:c,"data-devtools":"panel-wrapper",style:{position:"fixed",top:ue.current.top+V.current.y,left:ue.current.left+V.current.x,zIndex:10002,pointerEvents:"none"},children:qe("div",{ref:d,"data-devtools":"panel",style:{...jt,position:"relative",top:0,left:0,zIndex:0,pointerEvents:"auto"},onMouseEnter:()=>s?.("element"),onMouseLeave:()=>s?.(null),children:[G("style",{dangerouslySetInnerHTML:{__html:`
|
|
15
|
+
`}}),l.map(L=>{let D=i?.has(L.selector),C=Sg(x,L.left,wg(L));return mo(Cg,{left:L.left-Qi,top:L.top-Qi,avoidTop:C.avoidTop,avoidBottom:C.avoidBottom,onClick:()=>f(L.modIndex),onMouseEnter:a?()=>a(L.selector):void 0,onMouseLeave:a?()=>a(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:Kr("div",{"data-devtools":"badge",style:{...S,backgroundColor:D?"#999999":n},children:[Kr("span",{children:[L.annotationNumber,"."]}),mo("span",{style:P,children:L.label}),Kr("span",{style:{opacity:.8},children:["(",L.changeCount," ",L.changeCount===1?"change":"changes",")"]}),D&&Kr("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[mo("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:d===1?Kr(rl,{children:[mo("circle",{cx:"7",cy:"7",r:"2"}),mo("circle",{cx:"17",cy:"7",r:"2"}),mo("circle",{cx:"7",cy:"17",r:"2"}),mo("circle",{cx:"17",cy:"17",r:"2"})]}):Kr(rl,{children:[mo("circle",{cx:"12",cy:"6",r:"2"}),mo("circle",{cx:"6",cy:"12",r:"2"}),mo("circle",{cx:"18",cy:"12",r:"2"}),mo("circle",{cx:"12",cy:"18",r:"2"})]})}),p]})]})},L.selector)})]})}import{useEffect as Tg,useState as Mg}from"react";import{Fragment as Ig,jsx as wd}from"react/jsx-runtime";function kg(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 Ed({styleModifications:e,accentColor:t}){let[n,o]=Mg([]);if(Tg(()=>{let i=null,s=()=>{let c=[];for(let u of e){let d=hn(u.selector);if(!d)continue;let p=d.getBoundingClientRect();if(p.width===0&&p.height===0)continue;let f=Gr(d);c.push({selector:u.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(c)},a=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(s)};s(),window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a,{passive:!0});let l=new MutationObserver(a);return l.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",a),window.removeEventListener("resize",a),l.disconnect(),i&&cancelAnimationFrame(i)}},[e]),n.length===0)return null;let r=kg(t,.2);return wd(Ig,{children:n.map(i=>{let s={position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${r}`,borderRadius:i.borderRadius,boxSizing:"border-box"};return wd("div",{"data-devtools":"mod-border",style:s},i.selector)})})}import{useEffect as Cd,useLayoutEffect as Rg,useState as Td}from"react";import{jsx as kr,jsxs as sl}from"react/jsx-runtime";function il(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 Lg={top:"bottom",bottom:"top",left:"right",right:"left"};function al({element:e,padding:t,accentColor:n,hoveredSide:o,draggingSide:r,cursorViewport:i,refreshKey:s}){let[a,l]=Td(null),[c,u]=Td(!1);if(Cd(()=>{let v=ve=>{(ve.key==="Meta"||ve.key==="Control")&&u(!0)},b=ve=>{(ve.key==="Meta"||ve.key==="Control")&&u(!1)},ie=()=>u(!1);return window.addEventListener("keydown",v,!0),window.addEventListener("keyup",b,!0),window.addEventListener("blur",ie),()=>{window.removeEventListener("keydown",v,!0),window.removeEventListener("keyup",b,!0),window.removeEventListener("blur",ie)}},[]),Cd(()=>{if(!e){l(null);return}let v=()=>{l(e.getBoundingClientRect())};return v(),window.addEventListener("scroll",v,{passive:!0}),window.addEventListener("resize",v,{passive:!0}),()=>{window.removeEventListener("scroll",v),window.removeEventListener("resize",v)}},[e]),Rg(()=>{e&&l(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,s]),!a)return null;let d=a.width,p=a.height,{top:f,right:m,bottom:E,left:x}=t,S="pm-stripe-pattern",P=il(n,.25),L=il(n,.1),D=il(n,.2),C=8,G=2,ee={position:"fixed",top:a.top,left:a.left,width:d,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"},se=["top","right","bottom","left"],O={top:`0,0 ${d},0 ${d-m},${f} ${x},${f}`,right:`${d},0 ${d},${p} ${d-m},${p-E} ${d-m},${f}`,bottom:`0,${p} ${x},${p-E} ${d-m},${p-E} ${d},${p}`,left:`0,0 ${x},${f} ${x},${p-E} 0,${p}`},B={top:{x:d/2-C/2,y:f/2-G/2,w:C,h:G},bottom:{x:d/2-C/2,y:p-E/2-G/2,w:C,h:G},left:{x:x/2-G/2,y:p/2-C/2,w:G,h:C},right:{x:d-m/2-G/2,y:p/2-C/2,w:G,h:C}},g=new Set;return r?g.add(r):o&&(g.add(o),c||g.add(Lg[o])),sl("div",{"data-devtools":"padding-handles",style:ee,children:[sl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${p}`,children:[kr("defs",{children:kr("pattern",{id:S,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:kr("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:P,strokeWidth:"1.5"})})}),kr("rect",{x:"0.5",y:"0.5",width:Math.max(0,d-1),height:Math.max(0,p-1),fill:"none",stroke:D,strokeWidth:"1"}),se.map(v=>{if(t[v]<=0)return null;let ie=g.has(v);return sl("g",{opacity:ie?1:.6,children:[kr("polygon",{points:O[v],fill:L}),kr("polygon",{points:O[v],fill:`url(#${S})`})]},v)}),se.map(v=>{let b=B[v],ie=g.has(v);return kr("rect",{x:b.x,y:b.y,width:b.w,height:b.h,fill:n,stroke:"#ffffff",strokeWidth:ie?4:2,paintOrder:"stroke"},`handle-${v}`)})]}),i&&(o||r)&&(()=>{let b=Math.round(t[r??o]);return kr("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:b})})()]})}import{useCallback as xn,useEffect as Fn,useMemo as ti,useRef as Qt,useState as en}from"react";import{Blend as cm,Check as qs,ChevronDown as Zs,Eye as pl,FoldHorizontal as Yd,FoldVertical as Ud,Hexagon as dm,Minus as jd,MoveHorizontal as ml,Plus as um,Shrink as pm,Square as fm,SquareDashed as gm,SquareDashedTopSolid as mm,UnfoldHorizontal as Kd,UnfoldVertical as Xd}from"lucide-react";var Ag="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",Ri={borderWidth:3,borderStyle:"solid",borderImage:`url("${Ag}") 4 / 1.9 / 0 round`};function Ws({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 es={"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 Xr(e){return es[e]?.[0]??"px"}function Ro(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function js(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 s=parseFloat(r);if(!isNaN(s)){if(o){let{unit:a}=Ro(n);return`${s}${a||Xr(t)}`}return`${s}${Xr(t)}`}return r}function Li(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 Pg,useEffect as Bg,useRef as Md,useState as Dg}from"react";import{Plus as kd,X as Og}from"lucide-react";import{jsx as ho,jsxs as qr}from"react/jsx-runtime";var Vs=[{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 _g(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],s=parseFloat(i);isNaN(s)||t.push({name:r,value:s})}return t}function ll(e){return e.length===0?"none":e.map(t=>{let o=Vs.find(r=>r.name===t.name)?.unit??"";return`${t.name}(${t.value}${o})`}).join(" ")}function Id({value:e,onChange:t,accentColor:n,modified:o,panelContentRef:r}){let i=_g(e),[s,a]=Dg(!1),l=Md(null),c=Md(null);Bg(()=>{if(!s)return;let L=D=>{l.current&&!D.composedPath().includes(l.current)&&a(!1)};return document.addEventListener("mousedown",L,!0),()=>document.removeEventListener("mousedown",L,!0)},[s]);let u=Vs.filter(L=>!i.some(D=>D.name===L.name)),d=L=>{let D=[...i,{name:L.name,value:L.defaultValue}];t(ll(D)),a(!1)},p=L=>{let D=i.filter((C,G)=>G!==L);t(ll(D))},f=(L,D)=>{let C=i.map((G,ee)=>ee===L?{...G,value:D}:G);t(ll(C))},m={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:bn,border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},E=Pg(L=>{if(!c.current)return{position:"fixed",top:0,left:0};let D=c.current.getBoundingClientRect(),C=r?.current?.getBoundingClientRect(),G=L*24+8;return{position:"fixed",...window.innerHeight-D.bottom<G?{bottom:window.innerHeight-D.top+2}:{top:D.bottom+2},left:C?C.left:D.left,width:C?C.width:140,zIndex:10001}},[r]),x={backgroundColor:Lo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,padding:"4px 0"},S={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"},P=L=>ho("div",{ref:l,style:{...E(L.length),...x},children:L.map(D=>ho("button",{type:"button",onClick:()=>d(D),style:S,onMouseEnter:C=>{C.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:C=>{C.currentTarget.style.backgroundColor="transparent"},children:D.label},D.name))});return i.length===0?qr("div",{children:[qr("div",{style:{display:"flex",alignItems:"center",gap:4},children:[ho(yo,{modified:!1,children:ho("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:{...m,color:"#999",cursor:"default"}})}),ho("button",{ref:c,type:"button",onClick:()=>a(!s),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:ho(kd,{size:12})})]}),s&&P(Vs)]}):qr("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((L,D)=>{let C=Vs.find(G=>G.name===L.name);return C?qr("div",{style:{display:"flex",alignItems:"center",gap:4},children:[ho("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:C.label}),ho(yo,{modified:o,children:qr("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[ho("input",{type:"range",min:C.min,max:C.max,step:C.step,value:L.value,onChange:G=>f(D,parseFloat(G.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(L.value-C.min)/(C.max-C.min)*100}%, rgba(0,0,0,0.1) ${(L.value-C.min)/(C.max-C.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),ho("input",{type:"number",min:C.min,max:C.max,step:C.step,value:C.unit==="px"||C.unit==="deg"?Math.round(L.value):Math.round(L.value*100)/100,onChange:G=>f(D,parseFloat(G.target.value)||0),style:{...m,width:44,padding:"2px 4px",textAlign:"right",flexShrink:0}}),C.unit&&ho("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:C.unit})]})}),ho("button",{type:"button",onClick:()=>p(D),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:ho(Og,{size:10})})]},L.name):null}),u.length>0&&qr("div",{children:[qr("button",{ref:c,type:"button",onClick:()=>a(!s),style:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",border:"none",borderRadius:2,backgroundColor:"transparent",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#94a3b8",cursor:"pointer"},children:[ho(kd,{size:10}),"Add filter"]}),s&&P(u)]})]})}import{useCallback as bo,useEffect as Wg,useRef as Gs,useState as Ld}from"react";import{AlignHorizontalSpaceAround as jg,AlignVerticalSpaceAround as Vg,Columns3 as Gg,Grid2x2 as Jg,RectangleHorizontal as Yg,Rows3 as Ug,UnfoldHorizontal as Ad,UnfoldVertical as Pd}from"lucide-react";import{useCallback as Hg,useEffect as Fg,useRef as ts}from"react";import{jsx as $g}from"react/jsx-runtime";var Qo=[0,1,2,4,8,12,16,20,24,28,32],Ng=8;function Rd(){return parseFloat(getComputedStyle(document.documentElement).fontSize)||16}function ns(e){return e==="rem"||e==="em"}function zg(e,t){return ns(t)?e/Rd():e}function er({value:e,onChange:t,onPreview:n,onScrubEnd:o,onReset:r,isModified:i,accentColor:s,defaultUnit:a="rem",min:l=0,max:c,step:u=1,snapSteps:d,color:p,style:f,children:m}){let E=ts(null),x=ts(null),S=ts(r),P=ts(i),L=ts(!1);S.current=r,P.current=i,Fg(()=>{let C=g=>(!Number.isFinite(u)||u<=0,u),G=(g,v)=>{let b=C(v);if(!Number.isFinite(b)||b<=0)return g;let ie=Math.max(0,(String(b).split(".")[1]||"").length);return Number((Math.round(g/b)*b).toFixed(Math.min(ie+2,6)))},ee=(g,v)=>{let b=G(g,v);return l!==void 0&&(b=Math.max(l,b)),c!==void 0&&(b=Math.min(c,b)),b},se=(g,v)=>{if(!d)return ee(g,v);let b=ns(v)?Rd():1,ie=ns(v)?g*b:g,ve=d[d.length-1];for(let ce=0;ce<d.length-1;ce++){let ue=d[ce],we=d[ce+1];if(ie<=(ue+we)/2){ve=ue;break}if(ie<we){ve=we;break}}return ie>d[d.length-1]&&(ve=Math.round(ie/8)*8),ee(ns(v)?Math.round(ve/b*1e3)/1e3:ve,v)},O=g=>{let v=x.current;if(!v)return;v.hasMoved=!0,L.current=g.shiftKey;let b=C(v.unit)/Ng*(g.altKey?.1:1);v.accum+=g.movementX*b;let ie=v.startValue+v.accum,ve=g.shiftKey?se(ie,v.unit):ee(ie,v.unit);n?.(`${ve}${v.unit}`)},B=()=>{let g=x.current;if(!g)return;let v=ee(g.startValue+g.accum,g.unit);L.current&&d&&(v=se(v,g.unit));let b=g.hasMoved&&v!==g.startValue;x.current=null,document.exitPointerLock(),b?t(`${v}${g.unit}`):g.hasMoved?n?.(`${g.startValue}${g.unit}`):P.current&&S.current&&S.current(),o?.()};return document.addEventListener("mousemove",O),document.addEventListener("mouseup",B),()=>{document.removeEventListener("mousemove",O),document.removeEventListener("mouseup",B)}},[c,l,t,n,o,d,u]);let D=Hg(C=>{if(C.button!==0)return;C.preventDefault();let G=Ro(e),ee=G.unit&&G.unit!=="px"?G.unit:a,se=G.unit==="px"&&ns(ee)?zg(G.num,ee):G.num;x.current={startValue:se,unit:ee,accum:0,hasMoved:!1},E.current?.requestPointerLock()},[e,a]);return $g("span",{ref:E,onMouseDown:D,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:{color:i?s||"#3b82f6":p||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize",...f},children:m})}import{Fragment as os,jsx as Be,jsxs as an}from"react/jsx-runtime";function Bd(e,t){if(!(e instanceof HTMLElement))return!1;let n=t==="width"?new Set(["w-full","w-screen","w-dvw","w-lvw","w-svw"]):new Set(["h-full","h-screen","h-dvh","h-lvh","h-svh"]);return Array.from(e.classList).some(o=>n.has(o))}function Dd(e,t){let n=e.trim().toLowerCase();if(!n)return null;let o=Ro(n);if(!Number.isFinite(o.num))return null;if(o.num===0)return 0;if(o.unit==="px"||o.unit==="")return o.num;if(o.unit==="rem"){let r=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return o.num*r}if(o.unit==="em"){let r=t instanceof HTMLElement&&parseFloat(getComputedStyle(t).fontSize)||16;return o.num*r}return null}function Js(e,t,n){let o=Dd(e,n),r=Dd(t,n);return o!==null&&r!==null?Math.abs(o-r)<.01:e.trim()===t.trim()}function Kg({gridCols:e,gridRows:t,gridModified:n,accentColor:o,onColsChange:r,onRowsChange:i}){return Be(Ao,{style:{width:100},children:an("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"4px"},children:[Be("input",{type:"number",min:1,max:12,value:e,onChange:s=>r(parseInt(s.target.value)||1),style:{...vn,width:32,textAlign:"center",padding:2}}),Be("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"}),Be("input",{type:"number",min:1,max:12,value:t,onChange:s=>i(parseInt(s.target.value)||1),style:{...vn,width:32,textAlign:"center",padding:2}})]})})}function Od({element:e,getValue:t,getOriginalValue:n,handleChange:o,isModified:r,onResetProperty:i,isCollapsed:s,onToggle:a,sectionHeaderStyle:l,activeDropdown:c,onDropdownChange:u,panelContentRef:d,accentColor:p,onFieldHover:f,preferredUnit:m,onUnitCycle:E}){let x=u,S=t("display"),P=t("flex-direction"),L=_d(S,P),D=S==="flex"||S==="inline-flex",C=S==="grid",G=D||C,ee=P==="column"||P==="column-reverse",se=t("width"),O=t("height"),B=r("width")?se:wi(e,"width"),g=r("height")?O:wi(e,"height"),v=!r("width")&&Bd(e,"width")?"fill":cl(se,B),b=!r("height")&&Bd(e,"height")?"fill":cl(O,g),ie=t("min-width"),ve=t("max-width"),ce=t("min-height"),ue=t("max-height"),we=ie!=="none"&&ie!=="0px"&&ie!=="auto"?ie:"",Ue=ve!=="none"&&ve!=="auto"?ve:"",V=ce!=="none"&&ce!=="0px"&&ce!=="auto"?ce:"",A=ue!=="none"&&ue!=="auto"?ue:"",J=r("min-width"),ke=r("max-width"),De=r("min-height"),pe=r("max-height"),Ge=J||De,Ze=ke||pe,Te=e.getBoundingClientRect(),Q=`${Math.round(Te.width)}px`,Ie=`${Math.round(Te.height)}px`,[mt,We]=Ld({}),Oe=Ho(t("padding")),He=Ho(n("padding")),Pe=!Js(Oe.left,He.left,e)||!Js(Oe.right,He.right,e),Et=!Js(Oe.top,He.top,e)||!Js(Oe.bottom,He.bottom,e),dn=Pe||"padding-h"in mt,Sn=Et||"padding-v"in mt,Ln=t("gap"),Nt=t("row-gap"),wn=t("column-gap"),co=t("grid-template-columns"),Jn=t("grid-template-rows"),En=t("overflow"),At=co.split(/\s+/).filter(K=>K&&K!=="none").length||1,at=Jn.split(/\s+/).filter(K=>K&&K!=="none").length||1,[Dt,un]=Ld(!1),ht=c!==null,Yt=ht||Dt,bt=ht?.3:Dt?.65:1,oo=({mode:K,icon:_e,active:ot})=>Be("button",{type:"button",onClick:()=>Hd(K,o),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 8px",border:"none",borderRadius:2,backgroundColor:ot?Ai:"transparent",color:ot?p:"#64748b",cursor:"pointer",fontSize:14},children:_e}),xo=(K,_e,ot)=>{ot==="fixed"?o(K,_e):o(K,Ys(ot,_e))},Z=bo(K=>{let _e=K.trim();if(!_e)return"0";let ot=Ro(_e);if(!Number.isFinite(ot.num))return _e;if(m==="rem"&&ot.unit==="px")return`${Li(ot.num,"rem")}rem`;if(m==="px"&&ot.unit==="rem"){let Kt=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return`${Math.round(ot.num*Kt*1e3)/1e3}px`}return _e},[m]),xe=K=>{let _e=Ho(t("padding")),ot=K||"0";o("padding",`${Z(_e.top)} ${ot} ${Z(_e.bottom)} ${ot}`)},Re=K=>{let _e=Ho(t("padding")),ot=K||"0";o("padding",`${ot} ${Z(_e.right)} ${ot} ${Z(_e.left)}`)},et=bo(()=>{let K=Ho(t("padding")),_e=Ho(n("padding"));o("padding",[Z(K.top),Z(_e.right),Z(K.bottom),Z(_e.left)].join(" "))},[Z,n,t,o]),Ke=bo(()=>{let K=Ho(t("padding")),_e=Ho(n("padding"));o("padding",[Z(_e.top),Z(K.right),Z(_e.bottom),Z(K.left)].join(" "))},[Z,n,t,o]),Le=bo((K,_e)=>ot=>{_e(ot),We(Kt=>({...Kt,[K]:ot}))},[]),tt=bo(K=>{We(_e=>{let ot={..._e};return delete ot[K],ot})},[]),qt=bo(K=>{n("padding");let _e=Ho(t("padding"));ut(e,"padding",`${Z(_e.top)} ${K} ${Z(_e.bottom)} ${K}`)},[e,Z,n,t]),pn=bo(K=>{n("padding");let _e=Ho(t("padding"));ut(e,"padding",`${K} ${Z(_e.right)} ${K} ${Z(_e.left)}`)},[e,Z,n,t]),Cn=bo(K=>_e=>{ut(e,K,_e)},[e]),Ut=ee?"row":"column",$t=Ut==="row"?"row-gap":"column-gap",Wt=$t==="row-gap"?Nt||Ln:wn||Ln,Yn=r($t)||r("gap"),Un=bo(()=>{let _e=gr(e).find(Kt=>Kt.axis===Ut);if(_e)return Ut==="row"?_e.h:_e.w;let ot=Vr(e);return Ut==="row"?ot.row:ot.column},[e,Ut]),Ft=bo(()=>{let K=t("justify-content");return K==="space-between"?"between":K==="space-around"||K==="space-evenly"?"around":"fixed"},[t])(),I=bo((K,_e)=>{if(K==="fixed"){let ot=Math.max(0,Math.round(Un()*1e3)/1e3),Kt=_e||(ot>0?`${ot}px`:"8px");o("justify-content","normal"),o($t,Kt);return}o("justify-content",K==="between"?"space-between":"space-around"),o($t,"0px")},[$t,Un,o]),j=bo(K=>{if(Ft!=="fixed"){I("fixed",K);return}o($t,K)},[I,Ft,$t,o]),ne=bo(K=>{Ft!=="fixed"&&ut(e,"justify-content","normal"),ut(e,$t,K)},[e,Ft,$t]),ae=K=>K==="center"?1:K==="flex-end"||K==="end"?2:0,fe=ae(t("justify-content")),ge=ae(t("align-items")),le=ee?ge:fe,Ce=ee?fe:ge,pt=Gs(null),Fe=Gs({x:0,y:0}),lt=Gs({col:le,row:Ce});lt.current={col:le,row:Ce};let ft=bo((K,_e)=>{let ot=["flex-start","center","flex-end"];ee?(o("justify-content",ot[_e]),o("align-items",ot[K])):(o("justify-content",ot[K]),o("align-items",ot[_e]))},[ee,o]),An=Gs(ft);An.current=ft,Wg(()=>{let _e=ot=>{let Kt=pt.current;if(!Kt||!ot.composedPath().includes(Kt))return;ot.preventDefault(),ot.stopPropagation(),Fe.current.x+=ot.deltaX,Fe.current.y+=ot.deltaY;let{col:Mo,row:rn}=lt.current,jt=!1;Math.abs(Fe.current.x)>=30&&(Mo=Math.max(0,Math.min(2,Mo+(Fe.current.x>0?1:-1))),Fe.current.x=0,Fe.current.y=0,jt=!0),!jt&&Math.abs(Fe.current.y)>=30&&(rn=Math.max(0,Math.min(2,rn+(Fe.current.y>0?1:-1))),Fe.current.x=0,Fe.current.y=0,jt=!0),jt&&(Mo!==lt.current.col||rn!==lt.current.row)&&An.current(Mo,rn)};return document.addEventListener("wheel",_e,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",_e,{capture:!0})},[]);let Tn=()=>Be("div",{ref:pt,onMouseEnter:()=>{un(!0),d.current&&(d.current.style.overflowY="hidden")},onMouseLeave:()=>{un(!1),d.current&&(d.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:Fo,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(K=>[0,1,2].map(_e=>Be("button",{type:"button",onClick:()=>ft(_e,K),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:_e===le&&K===Ce?Be("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:_e===0?an(os,{children:[Be("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),Be("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),Be("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):_e===1?an(os,{children:[Be("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),Be("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),Be("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):an(os,{children:[Be("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),Be("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),Be("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]})}):Be("div",{style:{width:2.5,height:2.5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${K}-${_e}`)))}),Do=r("grid-template-columns")||r("grid-template-rows");return an("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Be("div",{style:l,children:Be("span",{children:G?"Auto layout":"Layout"})}),an("div",{style:{padding:"4px 12px 8px"},children:[an("div",{style:{display:"flex",gap:2,height:jn,boxSizing:"border-box",marginBottom:8,backgroundColor:Fo,borderRadius:2,padding:2,opacity:bt,transition:"opacity 150ms ease"},children:[Be(oo,{mode:"block",icon:Be(Yg,{size:16}),active:L==="block"}),Be(oo,{mode:"flex-col",icon:Be(Ug,{size:16}),active:L==="flex-col"}),Be(oo,{mode:"flex-row",icon:Be(Gg,{size:16}),active:L==="flex-row"}),Be(oo,{mode:"grid",icon:Be(Jg,{size:16}),active:L==="grid"})]}),an("div",{style:{display:"flex",gap:4,marginBottom:8},children:[Be(dl,{label:"W",property:"width",cssValue:v==="fixed"?se:`${Math.round(e.getBoundingClientRect().width)}px`,displayValue:v==="fixed"?se:"",placeholder:`${Math.round(e.getBoundingClientRect().width)}px`,mode:v,onValueChange:K=>o("width",K),onModeChange:K=>{if(K==="fixed"){let _e=e.getBoundingClientRect();o("width",`${Math.round(_e.width)}px`)}else o("width",Ys(K,se))},modified:r("width"),dimmed:ht&&c!=="width",dropdownOpen:c==="width",onDropdownChange:K=>x(K?"width":null),panelContentRef:d,accentColor:p,onReset:()=>i("width"),canAddMinConstraint:!J,canAddMaxConstraint:!ke,onAddMinConstraint:()=>o("min-width",Q),onAddMaxConstraint:()=>o("max-width",Q),onHoverChange:K=>f?.(K?"width":"element"),onValuePreview:Cn("width")}),Be(dl,{label:"H",property:"height",cssValue:b==="fixed"?O:`${Math.round(e.getBoundingClientRect().height)}px`,displayValue:b==="fixed"?O:"",placeholder:`${Math.round(e.getBoundingClientRect().height)}px`,mode:b,onValueChange:K=>o("height",K),onModeChange:K=>{if(K==="fixed"){let _e=e.getBoundingClientRect();o("height",`${Math.round(_e.height)}px`)}else o("height",Ys(K,O))},modified:r("height"),dimmed:ht&&c!=="height",dropdownOpen:c==="height",onDropdownChange:K=>x(K?"height":null),panelContentRef:d,accentColor:p,onReset:()=>i("height"),canAddMinConstraint:!De,canAddMaxConstraint:!pe,onAddMinConstraint:()=>o("min-height",Ie),onAddMaxConstraint:()=>o("max-height",Ie),onHoverChange:K=>f?.(K?"height":"element"),onValuePreview:Cn("height")})]}),Ge&&an(os,{children:[an("div",{style:{display:"flex",gap:4,marginBottom:2,opacity:bt,transition:"opacity 150ms ease"},children:[Be("div",{style:{flex:1,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,visibility:J?"visible":"hidden"},children:"Min width"}),Be("div",{style:{flex:1,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,visibility:De?"visible":"hidden"},children:"Min height"})]}),an("div",{style:{display:"flex",gap:4,marginBottom:Ze?4:8,opacity:bt,transition:"opacity 150ms ease"},children:[J?Be(rs,{label:"Min width",axis:"width",kind:"min",value:we,placeholder:"Min W",currentValue:Q,modified:r("min-width"),accentColor:p,onChange:K=>K?o("min-width",K):i("min-width"),onPreview:Cn("min-width"),onReset:()=>i("min-width"),panelContentRef:d}):Be("div",{style:{flex:1}}),De?Be(rs,{label:"Min height",axis:"height",kind:"min",value:V,placeholder:"Min H",currentValue:Ie,modified:r("min-height"),accentColor:p,onChange:K=>K?o("min-height",K):i("min-height"),onPreview:Cn("min-height"),onReset:()=>i("min-height"),panelContentRef:d}):Be("div",{style:{flex:1}})]})]}),Ze&&an(os,{children:[an("div",{style:{display:"flex",gap:4,marginBottom:2,opacity:bt,transition:"opacity 150ms ease"},children:[Be("div",{style:{flex:1,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,visibility:ke?"visible":"hidden"},children:"Max width"}),Be("div",{style:{flex:1,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,visibility:pe?"visible":"hidden"},children:"Max height"})]}),an("div",{style:{display:"flex",gap:4,marginBottom:8,opacity:bt,transition:"opacity 150ms ease"},children:[ke?Be(rs,{label:"Max width",axis:"width",kind:"max",value:Ue,placeholder:"Max W",currentValue:Q,modified:r("max-width"),accentColor:p,onChange:K=>K?o("max-width",K):i("max-width"),onPreview:Cn("max-width"),onReset:()=>i("max-width"),panelContentRef:d}):Be("div",{style:{flex:1}}),pe?Be(rs,{label:"Max height",axis:"height",kind:"max",value:A,placeholder:"Max H",currentValue:Ie,modified:r("max-height"),accentColor:p,onChange:K=>K?o("max-height",K):i("max-height"),onPreview:Cn("max-height"),onReset:()=>i("max-height"),panelContentRef:d}):Be("div",{style:{flex:1}})]})]}),D&&an("div",{onMouseEnter:()=>f?.("gap"),onMouseLeave:()=>f?.("element"),style:{display:"flex",gap:8,marginBottom:8},children:[an("div",{style:{opacity:ht?.3:1,transition:"opacity 150ms ease"},children:[Be("div",{style:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,marginBottom:2},children:"Alignment"}),Tn()]}),an("div",{style:{flex:1,opacity:bt,transition:"opacity 150ms ease"},children:[Be("div",{onClick:Yn?()=>{i($t),i("gap")}:void 0,title:Yn?"Click to reset":void 0,style:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,marginBottom:2,cursor:Yn?"pointer":"default"},children:"Gap"}),Be("div",{style:{display:"flex",gap:2,height:jn,boxSizing:"border-box",marginBottom:4,backgroundColor:Fo,borderRadius:2,padding:2},children:["fixed","between","around"].map(K=>{let _e=Ft===K;return Be("button",{type:"button",onClick:()=>I(K),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 6px",border:"none",borderRadius:2,backgroundColor:_e?Ai:"transparent",color:_e?"#111827":It,cursor:"pointer",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt,textTransform:"capitalize"},children:K},K)})}),Be(Ao,{dimmed:ht,children:an("div",{style:{display:"flex",alignItems:"center"},children:[Be(er,{value:Wt,onChange:K=>{tt("gap"),j(K)},onPreview:Le("gap",ne),onScrubEnd:()=>tt("gap"),onReset:()=>{i($t),i("gap")},isModified:Yn,accentColor:p,defaultUnit:m,snapSteps:Qo,children:P==="column"||P==="column-reverse"?Be(Pd,{size:12,strokeWidth:Yn?2.5:1.5}):Be(Ad,{size:12,strokeWidth:Yn?2.5:1.5})}),Be(vo,{property:$t,value:mt.gap||(Ft==="fixed"&&Yn?Wt:Ft==="fixed"?"":`${Math.max(0,Math.round(Un()*1e3)/1e3)}px`),onChange:K=>j(K),isModified:Yn||"gap"in mt,placeholder:"0",style:{...vn,flex:1,minWidth:0},unitStyle:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,padding:"0 8px"},preferredUnit:m,onUnitCycle:E})]})})]})]}),C&&an("div",{onMouseEnter:()=>f?.("gap"),onMouseLeave:()=>f?.("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:bt,transition:"opacity 150ms ease"},children:[Be(Kg,{gridCols:At,gridRows:at,gridModified:Do,accentColor:p,onColsChange:K=>o("grid-template-columns",`repeat(${K}, 1fr)`),onRowsChange:K=>o("grid-template-rows",`repeat(${K}, 1fr)`)}),an("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[Be(Ao,{dimmed:ht,children:an("div",{style:{display:"flex",alignItems:"center"},children:[Be(er,{value:wn||Ln,onChange:K=>{tt("column-gap"),o("column-gap",K)},onPreview:Le("column-gap",Cn("column-gap")),onScrubEnd:()=>tt("column-gap"),onReset:()=>i("column-gap"),isModified:r("column-gap"),accentColor:p,defaultUnit:m,snapSteps:Qo,children:Be(Ad,{size:12,strokeWidth:r("column-gap")?2.5:1.5})}),Be(vo,{property:"column-gap",value:mt["column-gap"]||(r("column-gap")||r("gap")?wn||Ln:""),onChange:K=>o("column-gap",K),isModified:r("column-gap")||r("gap")||"column-gap"in mt,placeholder:"0",style:{...vn,flex:1,minWidth:0},unitStyle:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,padding:"0 8px"},preferredUnit:m,onUnitCycle:E})]})}),Be(Ao,{dimmed:ht,children:an("div",{style:{display:"flex",alignItems:"center"},children:[Be(er,{value:Nt||Ln,onChange:K=>{tt("row-gap"),o("row-gap",K)},onPreview:Le("row-gap",Cn("row-gap")),onScrubEnd:()=>tt("row-gap"),onReset:()=>i("row-gap"),isModified:r("row-gap"),accentColor:p,defaultUnit:m,snapSteps:Qo,children:Be(Pd,{size:12,strokeWidth:r("row-gap")?2.5:1.5})}),Be(vo,{property:"row-gap",value:mt["row-gap"]||(r("row-gap")||r("gap")?Nt||Ln:""),onChange:K=>o("row-gap",K),isModified:r("row-gap")||r("gap")||"row-gap"in mt,placeholder:"0",style:{...vn,flex:1,minWidth:0},unitStyle:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,padding:"0 8px"},preferredUnit:m,onUnitCycle:E})]})})]})]}),G&&an("div",{style:{display:"flex",gap:4,marginBottom:8,opacity:bt,transition:"opacity 150ms ease"},children:[Be(Ao,{style:{flex:1},dimmed:ht,onMouseEnter:()=>f?.("padding-x"),onMouseLeave:()=>f?.("element"),children:an("div",{style:{display:"flex",alignItems:"center"},children:[Be(er,{value:Oe.left,onChange:K=>{tt("padding-h"),xe(K)},onPreview:Le("padding-h",qt),onScrubEnd:()=>tt("padding-h"),onReset:et,isModified:dn,accentColor:p,defaultUnit:m,snapSteps:Qo,children:Be(jg,{size:12,strokeWidth:dn?2.5:1.5})}),Be(vo,{property:"padding",value:mt["padding-h"]||Oe.left,onChange:K=>xe(K),isModified:dn,placeholder:"H pad",style:{...vn,flex:1,minWidth:0},unitStyle:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,padding:"0 8px"},preferredUnit:m,onUnitCycle:E})]})}),Be(Ao,{style:{flex:1},dimmed:ht,onMouseEnter:()=>f?.("padding-y"),onMouseLeave:()=>f?.("element"),children:an("div",{style:{display:"flex",alignItems:"center"},children:[Be(er,{value:Oe.top,onChange:K=>{tt("padding-v"),Re(K)},onPreview:Le("padding-v",pn),onScrubEnd:()=>tt("padding-v"),onReset:Ke,isModified:Sn,accentColor:p,defaultUnit:m,snapSteps:Qo,children:Be(Vg,{size:12,strokeWidth:Sn?2.5:1.5})}),Be(vo,{property:"padding",value:mt["padding-v"]||Oe.top,onChange:K=>Re(K),isModified:Sn,placeholder:"V pad",style:{...vn,flex:1,minWidth:0},unitStyle:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,padding:"0 8px"},preferredUnit:m,onUnitCycle:E})]})})]}),an("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,opacity:bt,transition:"opacity 150ms ease"},children:[Be("input",{type:"checkbox",checked:En==="hidden",onChange:K=>o("overflow",K.target.checked?"hidden":"visible"),style:{margin:0,accentColor:p}}),"Clip content"]})]})]})}import{useRef as ul,useState as Fd}from"react";function is(e){requestAnimationFrame(()=>e.select())}function Us(e,t){return e||(t&&t!=="\u2014"?t:"")}import{jsx as Xg}from"react/jsx-runtime";function Zr({type:e="text",value:t,placeholder:n,onChange:o,onCancel:r,style:i,min:s,max:a,step:l,title:c}){let[u,d]=Fd(!1),[p,f]=Fd(""),m=ul(!1),E=ul(!1),x=ul("");return Xg("input",{type:e,value:u?p:t,placeholder:n,min:s,max:a,step:l,title:c,onFocus:C=>{let G=Us(t,n);x.current=G,f(G),d(!0),m.current=!1,E.current=!1,is(C.currentTarget)},onChange:C=>{let G=C.target.value;m.current=!0,f(G),o(G)},onBlur:()=>{!E.current&&m.current&&o(p),d(!1),m.current=!1,E.current=!1},onKeyDown:C=>{if(C.key==="Escape"){C.preventDefault(),m.current&&(x.current?o(x.current):r?.()),E.current=!0,f(t),d(!1),C.currentTarget.blur();return}C.key==="Enter"&&C.currentTarget.blur()},style:i})}import{useCallback as qg,useEffect as Zg,useMemo as Qg,useRef as Nd,useState as em}from"react";import{AlignCenter as tm,AlignJustify as nm,AlignLeft as om,AlignRight as rm,Baseline as im,Check as sm,ChevronDown as zd,WholeWord as am}from"lucide-react";import{jsx as St,jsxs as tr}from"react/jsx-runtime";var $d={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"},lm=[{label:"System Sans",value:"ui-sans-serif, system-ui, sans-serif"},{label:"System Mono",value:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},{label:"System Serif",value:'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif'},{label:"Inter",value:"Inter, ui-sans-serif, system-ui, sans-serif"},{label:"Geist Mono",value:'"Geist Mono", ui-monospace, SFMono-Regular, monospace'}];function Wd({element:e,getValue:t,getExplicitValue:n,handleChange:o,isModified:r,onResetProperty:i,isCollapsed:s,onToggle:a,sectionHeaderStyle:l,accentColor:c,colorVariables:u,panelContentRef:d,preferredUnit:p,onUnitCycle:f}){let m=t("font-family"),E=t("font-size"),x=t("font-weight"),S=t("line-height"),P=t("letter-spacing"),L=t("text-align"),D=t("color"),C=n("font-family")??"",G=n("font-size")??"",ee=n("font-weight")??"",se=n("line-height")??"",O=n("letter-spacing")??"",B=n("color")??"",[g,v]=em(!1),b=Nd(null),ie=Nd(null),ve=String(x),ce=String(ee),ue=$d[ve]||ve,we=Er(e,D),Ue=Qg(()=>{let J=[{label:"Current",value:m},...lm],ke=new Set;return J.filter(De=>{let pe=De.value.trim();return!pe||ke.has(pe)?!1:(ke.add(pe),!0)})},[m]),V=qg(()=>{if(!b.current)return{position:"fixed",top:0,left:0,width:200};let J=b.current.getBoundingClientRect();if(d.current){let ke=d.current.getBoundingClientRect();return{position:"fixed",top:J.bottom+4,left:ke.left,width:ke.width}}return{position:"fixed",top:J.bottom+4,left:J.left,width:J.width}},[d]);Zg(()=>{if(!g)return;let J=De=>{let pe=De.composedPath();b.current&&!pe.includes(b.current)&&ie.current&&!pe.includes(ie.current)&&v(!1)},ke=De=>{De.key==="Escape"&&v(!1)};return document.addEventListener("mousedown",J),document.addEventListener("keydown",ke),()=>{document.removeEventListener("mousedown",J),document.removeEventListener("keydown",ke)}},[g]);let A=({align:J,icon:ke})=>{let De=L===J;return St("button",{type:"button",onClick:()=>o("text-align",J),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 8px",border:"none",borderRadius:2,backgroundColor:De?Ai:"transparent",color:De?c:"#64748b",cursor:"pointer"},children:ke})};return tr("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[St("div",{style:l,children:St("span",{children:"Typography"})}),tr("div",{style:{padding:"4px 12px 8px",display:"flex",flexDirection:"column",gap:4},children:[St(Ao,{style:{backgroundColor:g?Lo:"transparent"},children:tr("div",{ref:b,style:{display:"flex",alignItems:"center",padding:"4px 8px"},children:[St(Zr,{type:"text",value:C,placeholder:Qr(m),onChange:J=>o("font-family",J),onCancel:()=>i("font-family"),style:{...vn,flex:1,minWidth:0,padding:0,fontWeight:r("font-family")?600:400,color:r("font-family")?c:bn},title:C||Qr(m)}),St("button",{type:"button",onClick:()=>v(J=>!J),style:{alignSelf:"stretch",display:"flex",alignItems:"center",justifyContent:"center",paddingLeft:8,marginLeft:6,border:"none",outline:"none",backgroundColor:"transparent",color:"#999",flexShrink:0,cursor:"pointer"},children:St(zd,{size:12})}),g&&St("div",{ref:ie,style:{...V(),backgroundColor:Lo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:vt,fontWeight:xt},children:Ue.map(J=>{let ke=(C||m)===J.value;return tr("button",{type:"button",onClick:()=>{o("font-family",J.value),v(!1)},style:{width:"100%",display:"grid",gridTemplateColumns:"80px minmax(0, 1fr) 14px",gap:8,alignItems:"center",padding:"9px 12px",border:"none",outline:"none",backgroundColor:ke?ei:"transparent",color:It,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt},children:[St("span",{children:J.label}),St("span",{style:{minWidth:0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:nr},children:J.value}),St("span",{style:{display:"flex",justifyContent:"center",color:ke?bn:"transparent"},children:ke&&St(sm,{size:14})})]},`${J.label}:${J.value}`)})})]})}),tr("div",{style:{display:"flex",gap:4},children:[St(Ao,{style:{flex:1,backgroundColor:"transparent"},children:tr("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[tr("select",{value:ce,onChange:J=>o("font-weight",J.target.value),style:{...vn,padding:"4px 8px",paddingLeft:4,paddingRight:24,cursor:"pointer",appearance:"none",WebkitAppearance:"none",backgroundColor:"transparent",fontWeight:r("font-weight")?600:400,color:r("font-weight")?c:ce?bn:nr},children:[!ce&&St("option",{value:"",disabled:!0,children:ue}),Object.entries($d).map(([J,ke])=>St("option",{value:J,children:ke},J))]}),St("div",{style:{position:"absolute",right:0,top:0,bottom:0,width:20,pointerEvents:"none",color:"#999",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"},children:St(zd,{size:12})})]})}),St("div",{style:{flex:1},children:St(yo,{children:St("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:St(vo,{property:"font-size",value:G,onChange:J=>o("font-size",J),isModified:r("font-size"),placeholder:Ir("font-size",E,p),onCancel:()=>i("font-size"),min:1,max:999,style:{...vn,padding:"4px 8px",paddingRight:24,fontWeight:r("font-size")?600:400,color:r("font-size")?c:bn},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt},preferredUnit:p,onUnitCycle:f})})})})]}),tr("div",{style:{display:"flex",gap:4},children:[St("div",{style:{flex:1},children:St(yo,{children:St("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:St(vo,{property:"line-height",value:se,onChange:J=>o("line-height",J),isModified:r("line-height"),step:.1,min:0,scrubIcon:St(im,{size:12,strokeWidth:r("line-height")?2.5:1.8}),accentColor:c,placeholder:Ir("line-height",S,p),onCancel:()=>i("line-height"),style:{...vn,flex:1,minWidth:0,padding:"4px 8px 4px 26px",fontWeight:r("line-height")?600:400,color:r("line-height")?c:bn},showUnit:!1})})})}),St("div",{style:{flex:1},children:St(yo,{children:St("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:St(vo,{property:"letter-spacing",value:O,onChange:J=>o("letter-spacing",J),isModified:r("letter-spacing"),step:.1,min:-100,scrubIcon:St(am,{size:12,strokeWidth:r("letter-spacing")?2.5:1.8}),accentColor:c,placeholder:Ir("letter-spacing",P,p),onCancel:()=>i("letter-spacing"),style:{...vn,flex:1,minWidth:0,padding:"4px 8px 4px 26px",fontWeight:r("letter-spacing")?600:400,color:r("letter-spacing")?c:bn},showUnit:!1})})})})]}),tr("div",{style:{display:"flex",gap:2,height:jn,boxSizing:"border-box",backgroundColor:Fo,borderRadius:2,padding:2},children:[St(A,{align:"left",icon:St(om,{size:14})}),St(A,{align:"center",icon:St(tm,{size:14})}),St(A,{align:"right",icon:St(rm,{size:14})}),St(A,{align:"justify",icon:St(nm,{size:14})})]}),tr("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[St("span",{onClick:r("color")?()=>i("color"):void 0,title:r("color")?"Click to reset":void 0,style:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,cursor:r("color")?"pointer":"default",width:40,flexShrink:0},children:"Color"}),St("div",{style:{flex:1,minWidth:0},children:St(Ks,{value:B,resolvedValue:we,placeholder:Qr(D),colorVariables:u,onChange:J=>o("color",J),onCancel:()=>i("color"),accentColor:c,modified:r("color"),panelContentRef:d})})]})]})]})}import{Fragment as Pm,jsx as Y,jsxs as qe}from"react/jsx-runtime";var Vd=[{name:"Background",properties:[{property:"background-color",label:"Color",type:"color"}]},{name:"Borders",properties:[{property:"border-width",label:"Width",type:"number",min:0,max:20},{property:"border-color",label:"Color",type:"color"},{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:"filter",label:"Filter",type:"text"},{property:"backdrop-filter",label:"Backdrop Filter",type:"backdrop-filter"},{property:"transform",label:"Transform",type:"text"}]}];function cl(e,t){return e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":t?"fixed":"hug"}function Ys(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=Ro(t);if(typeof n.num=="number"&&!isNaN(n.num)){let o=n.unit==="%"?"px":n.unit||"px";return`${n.num}${o}`}return"auto"}}}function Ho(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 _d(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function Hd(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 Ai="#eaeaea",Lo="#ffffff",ei="rgba(0, 0, 0, 0.04)",Fo="rgba(0, 0, 0, 0.04)",bl="rgba(0, 0, 0, 0.12)",vl="rgba(0, 0, 0, 0.22)",bn="#111827",nr="#999999",It="#999999",vt=9,xt=600,jn=26,qd=280,Vn=16,hm=8,Zd=3,ym=3,Lr=qd+2*Zd,bm=Lr+2*ym;function ss(e,t,n){let o=2*Zd,r=n?.getBoundingClientRect(),i=window.innerHeight-Vn-o;return r&&t+bm>r.left&&(i=r.top-hm-o),Math.max(200,i-Math.max(0,e))}var vn={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:bn,border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};function Qr(e){return e.trim().replace(/\s+/g," ")||"\u2014"}function Ir(e,t,n){let o=Ro(t);if(!/^-?[\d.]/.test(t.trim()))return Qr(t);let i=es[e],s=n&&i?.includes(n)?n:Xr(e),a=o.unit&&o.unit!==s?Li(o.num,s):o.num;return String(a)}function ni(e){let t=e.trim().toLowerCase().split(/\s+/).filter(Boolean);return t.length===0?!1:t.every(n=>{if(n==="0")return!0;let o=n.match(/^(-?\d*\.?\d+)(px|rem|em|%|vh|vw|dvh|dvw|svh|svw|lvh|lvw)?$/);return!!o&&Number(o[1])===0})}function Gd(e){let t=e.trim().toLowerCase().split(/\s+/).filter(Boolean);return t.length>0&&t.every(n=>n==="none"||n==="hidden")}var or=["top","right","bottom","left"],Rr={top:"border-top-width",right:"border-right-width",bottom:"border-bottom-width",left:"border-left-width"};function vm(e){let t=e.trim().split(/\s+/).filter(Boolean),[n="0px",o=n,r=n,i=o]=t;return t.length===1?{top:n,right:n,bottom:n,left:n}:t.length===2?{top:n,right:o,bottom:n,left:o}:t.length===3?{top:n,right:o,bottom:r,left:o}:{top:n,right:o,bottom:r,left:i}}function xm(e){let t=or.filter(n=>!ni(e[n]));if(t.length===0)return"all";if(t.length===4){let[n]=or.map(o=>e[o].trim());return or.every(o=>e[o].trim()===n)?"all":"custom"}return t.length===1?t[0]:"custom"}function Sm(e,t){return or.map(n=>e[n]).find(n=>!ni(n))||(ni(t)?"1px":t)}function fl({mode:e}){return e==="all"?Y(fm,{size:15,strokeWidth:1.9}):e==="custom"?Y(gm,{size:15,strokeWidth:1.9}):Y(mm,{size:15,strokeWidth:1.9,style:{transform:`rotate(${{top:0,right:90,bottom:180,left:270}[e]}deg)`}})}function ls(e){let t=e.trim().toLowerCase();if(!t||t==="transparent")return!0;let n=t.match(/^rgba?\(\s*([^)]+)\)$/);if(!n)return!1;let o=n[1].split(/[\s,\/]+/).map(r=>r.trim()).filter(Boolean);if(t.startsWith("rgba")||o.length>=4){let r=Number(o[3]);return!Number.isNaN(r)&&r===0}return!1}function wm(e){if(!e.trim())return!0;let t=Number(e);return Number.isFinite(t)&&t===1}function Em(e){let t=e.trim();return t.startsWith("var(")||t.startsWith("--")}function hl(e){let t=e.trim(),n=t.toLowerCase();if(!/^[a-z]+$/i.test(t)||["currentcolor","transparent","inherit","initial","unset","revert","revert-layer"].includes(n)||typeof document>"u"||typeof CSS>"u"||!CSS.supports?.("color",t))return t;let o=document.createElement("span");o.style.color=t,o.style.display="none",(document.body||document.documentElement).appendChild(o);let r=getComputedStyle(o).color.trim();return o.remove(),r||t}function Cm(e){return hl(e)!==e.trim()}function Tm(e){let t=e.trim(),n=t.toLowerCase();return!/^[a-z]+$/i.test(t)||["currentcolor","transparent","inherit","initial","unset","revert","revert-layer"].includes(n)?!1:typeof CSS<"u"&&!!CSS.supports&&!CSS.supports("color",t)}function yl(e){let t=[],n="",o=0,r=null;for(let s=0;s<e.length;s++){let a=e[s],l=e[s-1];if(r){n+=a,a===r&&l!=="\\"&&(r=null);continue}if(a==='"'||a==="'"){r=a,n+=a;continue}if(a==="("&&o++,a===")"&&(o=Math.max(0,o-1)),a===","&&o===0){let c=n.trim();c&&t.push(c),n="";continue}n+=a}let i=n.trim();return i&&t.push(i),t}function Pi(e){let t=e.trim().toLowerCase();return!t||t==="none"||t==="transparent"||t==="rgba(0, 0, 0, 0)"||t==="rgba(0,0,0,0)"||t==="none repeat scroll 0% 0% / auto padding-box border-box"}function as(e){let t=e.trim().toLowerCase();return!t||t==="none"||t==="transparent"||t==="none repeat scroll 0% 0% / auto padding-box border-box"}function Mm(e){return/(?:repeating-)?(?:linear|radial|conic)-gradient\(/i.test(e)}function km(e){let t=e.trim();return Mm(t)||/^url\(/i.test(t)}function Im(e){let t=e.trim()||"rgba(0, 0, 0, 0.08)";return km(t)?t:`linear-gradient(${t}, ${t})`}function gl(e){let t=e.trim(),n="linear-gradient(";if(t.toLowerCase().startsWith(n)&&t.endsWith(")")){let o=t.slice(n.length,-1),r=yl(o);if(r.length===2&&r[0]?.trim()===r[1]?.trim())return r[0].trim()}return t}function Rm(e){return e.map(t=>Im(t)).join(", ")}function Xs(e){let t=e.trim().toLowerCase();if(ls(t))return"0";let n=t.match(/^rgba?\(\s*([^)]+)\)$/);if(n){let r=n[1].split(/[\s,\/]+/).map(i=>i.trim()).filter(Boolean)[3];if(r){if(r.endsWith("%"))return String(Math.round(Number(r.slice(0,-1))));let i=Number(r);if(Number.isFinite(i))return String(Math.round(i<=1?i*100:i))}}return"100"}function Jd(e,t){let n=Math.max(0,Math.min(100,Number(t)))/100,o=e.trim(),r=o.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);if(r){let s=r[1],a=s.length===3?s.split("").map(d=>d+d).join(""):s,l=parseInt(a.slice(0,2),16),c=parseInt(a.slice(2,4),16),u=parseInt(a.slice(4,6),16);return`rgba(${l}, ${c}, ${u}, ${n})`}let i=o.match(/^rgba?\(\s*([^)]+)\)$/i);if(i){let s=i[1].split(/[\s,\/]+/).map(u=>u.trim()).filter(Boolean),[a,l,c]=s;if(a&&l&&c)return`rgba(${a}, ${l}, ${c}, ${n})`}return n===1?o:`rgba(0, 0, 0, ${n})`}function Lm(e){let t=Number(e);return Number.isFinite(t)?String(Math.max(0,Math.min(100,Math.round(t)))):"0"}function Am({value:e,placeholder:t,modified:n,onChange:o,onCancel:r,chromeless:i=!1,accentColor:s}){let[a,l]=en(!1),[c,u]=en(""),[d,p]=en(null),f=Qt(""),m=Qt(!1);Fn(()=>{d!==null&&e===d&&p(null)},[d,e]);let E=a?c:d??e,x=S=>{let P=S.trim()===""?"0":Lm(S);o(P),u(P),p(P)};return qe("div",{style:{position:"relative",minHeight:jn,backgroundColor:i?"transparent":Fo,borderRadius:2,color:bn},children:[Y("input",{type:"text",inputMode:"numeric",value:E,placeholder:t,onFocus:S=>{let P=d??e;f.current=P,u(P),l(!0),m.current=!1,is(S.currentTarget)},onChange:S=>{u(S.target.value)},onBlur:()=>{if(m.current){m.current=!1,l(!1);return}if(c.trim()===""){u(f.current),p(null),l(!1),r?.();return}x(c),l(!1)},onKeyDown:S=>{if(S.key==="Escape"){S.preventDefault(),m.current=!0,u(f.current),p(null),l(!1),r?.(),S.currentTarget.blur();return}if(S.key==="Enter"){S.preventDefault(),x(c),l(!1),S.currentTarget.blur();return}if(S.key==="ArrowUp"||S.key==="ArrowDown"){S.preventDefault();let P=S.key==="ArrowUp"?1:-1,L=S.shiftKey?10:S.altKey?.1:1,D=c.trim()===""?0:Number(c),C=Math.max(0,Math.min(100,(Number.isFinite(D)?D:0)+P*L)),G=String(Math.round(C*10)/10);u(G),o(G)}},style:{...vn,paddingLeft:9,paddingRight:18,color:n?s:vn.color}}),Y("span",{style:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",color:It,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt,pointerEvents:"none"},children:"%"})]})}function dl({label:e,property:t,cssValue:n,displayValue:o,placeholder:r,mode:i,onValueChange:s,onModeChange:a,modified:l,dimmed:c,dropdownOpen:u,onDropdownChange:d,panelContentRef:p,accentColor:f="#3b82f6",onReset:m,canAddMinConstraint:E=!1,canAddMaxConstraint:x=!1,onAddMinConstraint:S,onAddMaxConstraint:P,onHoverChange:L,onValuePreview:D}){let C=o??n,[G,ee]=en(null),se=G??C,O=Ro(se),B=r??"",g=l?O.unit||Xr(t):Xr(t),v=!l&&O.unit&&O.unit!==g?Li(O.num,g):O.num,[b,ie]=en(!1),[ve,ce]=en(String(v)),[ue,we]=en(!1),Ue=Qt(null),V=Qt(null),A=Qt(null),J=Qt(!1);Fn(()=>{b||ce(String(v))},[v,b]),Fn(()=>{if(!u)return;let He=Et=>{V.current&&!Et.composedPath().includes(V.current)&&A.current&&!Et.composedPath().includes(A.current)&&d?.(!1)},Pe=Et=>{Et.key==="Escape"&&d?.(!1)};return document.addEventListener("mousedown",He),document.addEventListener("keydown",Pe),()=>{document.removeEventListener("mousedown",He),document.removeEventListener("keydown",Pe)}},[u,d]),Fn(()=>{b&&Ue.current&&(Ue.current.focus(),Ue.current.select())},[b]);let ke=()=>{let He=js(ve,t,n,l);s(He||`${Math.max(0,parseFloat(ve)||0)}${g}`),ie(!1)},De=()=>{if(J.current){J.current=!1;return}ke()},pe=He=>{if(He.key==="Enter"){ke();return}if(He.key==="Escape"){J.current=!0,ce(String(v)),ie(!1);return}if(He.key==="ArrowUp"||He.key==="ArrowDown"){He.preventDefault();let Pe=He.key==="ArrowUp"?1:-1,Et=He.shiftKey?8:He.altKey?.1:1,dn=parseFloat(ve)||0,Sn=Math.round(Math.max(0,dn+Pe*Et)*1e3)/1e3;ce(String(Sn)),s(`${Sn}${g}`)}},Ge={fixed:"Fixed",hug:"Hug",fill:"Fill"},Ze={fixed:Y(ml,{size:12}),hug:Y(pm,{size:12}),fill:Y(ml,{size:12})},Te=t==="width"?"min width":"min height",Q=t==="width"?"max width":"max height",Ie=t==="width"?Y(Yd,{size:14,strokeWidth:1.8}):Y(Ud,{size:14,strokeWidth:1.8}),mt=t==="width"?Y(Kd,{size:14,strokeWidth:1.8}):Y(Xd,{size:14,strokeWidth:1.8}),We=()=>{d?.(!u)},Oe=()=>{if(!A.current||!p?.current)return{position:"absolute",top:"100%",left:0,right:0,width:"100%",marginTop:4};let He=A.current.getBoundingClientRect(),Pe=p.current.getBoundingClientRect();return{position:"fixed",top:He.bottom+4,left:Pe.left,width:Pe.width}};return qe("div",{ref:A,onMouseEnter:()=>{we(!0),L?.(!0)},onMouseLeave:()=>{we(!1),L?.(!1)},style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:b?f:ue?vl:bl,backgroundColor:u?Lo:"transparent",minHeight:jn,boxSizing:"border-box",transition:"border-color 100ms ease, opacity 150ms ease",opacity:c?.3:1},children:[Y(er,{value:se||n||B,onChange:He=>{ee(null),s(He)},onPreview:He=>{ee(He),D?.(He)},onScrubEnd:()=>ee(null),onReset:m,isModified:l||G!==null,accentColor:f,defaultUnit:"px",min:0,step:1,snapSteps:Qo,style:{fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,padding:"0 8px",flexShrink:0,cursor:"ew-resize"},children:e}),i==="fixed"?b?Y("input",{ref:Ue,type:"text",inputMode:"numeric",value:ve,placeholder:B,onChange:He=>ce(He.target.value),onKeyDown:pe,onBlur:De,style:{...vn,flex:1,minWidth:0,padding:"4px 2px"}}):Y("span",{onClick:()=>{ce(C||B),ie(!0)},style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text",color:C?bn:nr},children:C?v:B}):Y("span",{style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:nr,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:B}),qe("button",{type:"button",onClick:We,style:{display:"flex",alignItems:"center",gap:2,padding:"4px 8px",border:"none",outline:"none",backgroundColor:"transparent",color:It,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt,cursor:"pointer",flexShrink:0},children:[Ge[i],Y(Zs,{size:12})]}),u&&qe("div",{ref:V,style:{...Oe(),backgroundColor:Lo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt},children:[qe("button",{type:"button",onClick:()=>{a("fixed"),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:i==="fixed"?ei:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[Ze.fixed,qe("span",{children:["Fixed ",t," (",n,")"]}),i==="fixed"&&Y(qs,{size:14,style:{marginLeft:"auto"}})]}),qe("button",{type:"button",onClick:()=>{a("hug"),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:i==="hug"?ei:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[Ze.hug,Y("span",{children:"Hug contents"}),i==="hug"&&Y(qs,{size:14,style:{marginLeft:"auto"}})]}),qe("button",{type:"button",onClick:()=>{a("fill"),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:i==="fill"?ei:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[Ze.fill,Y("span",{children:"Fill container"}),i==="fill"&&Y(qs,{size:14,style:{marginLeft:"auto"}})]}),(E||x)&&Y("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),E&&qe("button",{type:"button",onClick:()=>{S?.(),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[Y("span",{style:{width:18,flexShrink:0,display:"flex",alignItems:"center"},children:Ie}),qe("span",{children:["Add ",Te,"..."]})]}),x&&qe("button",{type:"button",onClick:()=>{P?.(),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[Y("span",{style:{width:18,flexShrink:0,display:"flex",alignItems:"center"},children:mt}),qe("span",{children:["Add ",Q,"..."]})]})]})]})}function rs({label:e,axis:t,kind:n,value:o,placeholder:r,currentValue:i,modified:s,accentColor:a="#3b82f6",onChange:l,onReset:c,panelContentRef:u,dimmed:d,onPreview:p}){let[f,m]=en(!1),[E,x]=en(o),[S,P]=en(null),[L,D]=en(!1),[C,G]=en(!1),ee=Qt(null),se=Qt(null),O=Qt(null),B=Qt(!1);Fn(()=>{f||x(o)},[f,o]),Fn(()=>{f&&ee.current&&(ee.current.focus(),ee.current.select())},[f]),Fn(()=>{if(!C)return;let we=V=>{O.current&&!V.composedPath().includes(O.current)&&se.current&&!V.composedPath().includes(se.current)&&G(!1)},Ue=V=>{V.key==="Escape"&&G(!1)};return document.addEventListener("mousedown",we),document.addEventListener("keydown",Ue),()=>{document.removeEventListener("mousedown",we),document.removeEventListener("keydown",Ue)}},[C]);let g=n==="min"?t==="width"?Y(Yd,{size:14,strokeWidth:1.8}):Y(Ud,{size:14,strokeWidth:1.8}):t==="width"?Y(Kd,{size:14,strokeWidth:1.8}):Y(Xd,{size:14,strokeWidth:1.8}),v=n==="min"?"min":"max",b=t==="width"?"width":"height",ie=()=>{if(!se.current||!u?.current)return{position:"absolute",top:"100%",left:0,right:0,width:"100%",marginTop:4};let we=se.current.getBoundingClientRect(),Ue=u.current.getBoundingClientRect();return{position:"fixed",top:we.bottom+4,left:Ue.left,width:Ue.width}},ve=()=>{l(E.trim()),m(!1)};return qe("div",{ref:se,onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1),style:{flex:1,minWidth:0,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:f?a:L||C?vl:"transparent",backgroundColor:C?Lo:Fo,height:jn,boxSizing:"border-box",opacity:d?.3:1,transition:"border-color 100ms ease, opacity 150ms ease"},children:[Y(er,{value:S??(o||i),onChange:we=>{P(null),l(we)},onPreview:we=>{P(we),p?.(we)},onScrubEnd:()=>P(null),onReset:c,isModified:s||S!==null,accentColor:a,defaultUnit:"px",min:0,step:1,snapSteps:Qo,style:{width:26,height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",outline:"none",backgroundColor:"transparent",color:s?a:"#999",cursor:s?"pointer":"default",padding:0,flexShrink:0},children:g}),f?Y("input",{ref:ee,type:"text",value:S??E,placeholder:r,onChange:we=>x(we.target.value),onBlur:()=>{if(B.current){B.current=!1;return}ve()},onKeyDown:we=>{we.key==="Enter"&&ve(),we.key==="Escape"&&(B.current=!0,x(o),m(!1))},style:{...vn,flex:1,minWidth:0,padding:"4px 2px",color:s?a:bn,fontWeight:s?600:400}}):Y("button",{type:"button",onClick:()=>{x(o),m(!0)},style:{flex:1,minWidth:0,height:"100%",border:"none",outline:"none",backgroundColor:"transparent",color:o?s?a:bn:nr,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:s?600:400,textAlign:"left",padding:"4px 4px 4px 0",cursor:"text",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:S??(o||r)}),Y("button",{type:"button",onClick:()=>G(we=>!we),style:{width:28,height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",outline:"none",backgroundColor:"transparent",color:"#999",cursor:"pointer",padding:0,flexShrink:0},children:Y(Zs,{size:12})}),C&&qe("div",{ref:O,style:{...ie(),backgroundColor:Lo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt},children:[qe("button",{type:"button",onClick:()=>{l(i),G(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[Y("span",{style:{width:18,flexShrink:0,display:"flex",alignItems:"center"},children:g}),qe("span",{children:["Set to current ",b]})]}),qe("button",{type:"button",onClick:()=>{c?.(),G(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[Y("span",{style:{width:18,flexShrink:0}}),qe("span",{children:["Remove ",v," ",b]})]}),Y("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),qe("button",{type:"button",onClick:()=>G(!1),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:It,fontWeight:xt,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[Y("span",{style:{width:18,flexShrink:0,display:"flex",alignItems:"center"},children:Y(dm,{size:14,strokeWidth:1.8})}),Y("span",{children:"Apply variable..."})]})]})]})}function Ao({children:e,style:t,dimmed:n,onMouseEnter:o,onMouseLeave:r}){let[i,s]=en(!1);return Y("div",{onMouseEnter:()=>{s(!0),o?.()},onMouseLeave:()=>{s(!1),r?.()},style:{position:"relative",borderRadius:2,border:"none",backgroundColor:Fo,minHeight:jn,boxSizing:"border-box",transition:"opacity 150ms ease",opacity:n?.3:1,color:bn,...t},children:e})}function yo({children:e}){return Y("div",{style:{position:"relative",borderRadius:2,backgroundColor:Fo,minHeight:jn,boxSizing:"border-box",color:bn},children:e})}function vo({property:e,value:t,onChange:n,onPreview:o,onScrubEnd:r,isModified:i=!1,step:s=1,min:a,max:l,style:c,placeholder:u,showUnit:d=!0,unitStyle:p,preferredUnit:f,onUnitCycle:m,onCancel:E,scrubIcon:x,scrubValue:S,scrubSnapSteps:P,accentColor:L}){let[D,C]=en(null),G=D??t,ee=Ro(G),se=Xr(e),O=es[e],g=f&&O&&O.includes(f)?f:se,v=i&&ee.unit||g,b=!i&&ee.unit&&ee.unit!==v?Li(ee.num,v):ee.num,[ie,ve]=en(!1),[ce,ue]=en(""),we=Qt(!1),Ue=Qt(!1),V=Qt(""),A=We=>{ve(!0),V.current=t,we.current=!1,Ue.current=!1,ue(pe?String(b):u&&u!=="\u2014"?u:""),is(We.target)},J=()=>{if(ve(!1),!Ue.current&&we.current&&ce.trim()){let We=js(ce,e,t,i);We&&n(We)}we.current=!1,Ue.current=!1},ke=We=>{let Oe=We.target.value;we.current=!0,ue(Oe);let He=Oe.trim(),Pe=He.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),Et=He.match(/^(-?[\d.]+)$/);if(Pe){let dn=parseFloat(Pe[1]);isNaN(dn)||n(`${dn}${Pe[2].toLowerCase()}`)}else if(Et){let dn=parseFloat(Et[1]);isNaN(dn)||n(`${dn}${v}`)}},De=We=>{if(We.key==="Escape"){We.preventDefault(),Ue.current=!0,we.current&&(V.current?n(V.current):E?.()),ue(V.current),ve(!1),We.target.blur();return}if(We.key==="Enter"){if(ce.trim()){let Oe=js(ce,e,t,i);Oe&&n(Oe)}We.target.blur();return}if(We.key==="ArrowUp"||We.key==="ArrowDown"){We.preventDefault();let Oe=We.shiftKey?10:We.altKey?.1:1,He=(We.key==="ArrowUp"?1:-1)*s*Oe,Pe=parseFloat(ce)||b||0,Et=Math.round((Pe+He)*1e3)/1e3;a!==void 0&&(Et=Math.max(a,Et)),l!==void 0&&(Et=Math.min(l,Et)),ue(String(Et)),n(`${Et}${v}`)}},pe=/^-?[\d.]/.test(G.trim()),Ge=ie?ce:pe?String(b):"",Te=ie&&/\s*(rem|em|px|%)\s*$/i.test(ce)?"":v,Q=m&&(Te==="rem"||Te==="px"),Ie={fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,pointerEvents:"none"},mt={...p??Ie,pointerEvents:"auto",cursor:"pointer"};return qe(Pm,{children:[x&&Y(er,{value:S??G,onChange:We=>{C(null),n(We)},onPreview:We=>{C(We),o?.(We)},onScrubEnd:()=>{C(null),r?.()},onReset:E,isModified:i||D!==null,accentColor:L,defaultUnit:v,min:a,max:l,step:s,snapSteps:P??Qo,style:{position:"absolute",left:4,top:"50%",transform:"translateY(-50%)",height:jn,padding:"0 4px",zIndex:1},children:x}),Y("input",{type:"text",inputMode:"decimal",value:Ge,onFocus:A,onBlur:J,onChange:ke,onKeyDown:De,placeholder:u,style:c}),d&&Te&&Y("span",{style:Q?mt:p??Ie,onClick:Q?m:void 0,title:Q?"Click to switch units":void 0,children:Te})]})}function Ks({value:e,resolvedValue:t,placeholder:n,colorVariables:o,onChange:r,onCancel:i,accentColor:s="#3b82f6",modified:a,panelContentRef:l,chromeless:c=!1}){let[u,d]=en(!1),p=e,f=p||n||"\u2014",[m,E]=en(p),[x,S]=en(!1),[P,L]=en(!1),D=Qt(null),C=Qt(null),G=Qt([]),ee=Qt(!1),se=Qt(!1),O=Qt(""),B=xn(()=>{if(!C.current)return{position:"fixed",top:0,left:0,width:200};let A=C.current.getBoundingClientRect();if(l?.current){let J=l.current.getBoundingClientRect();return{position:"fixed",top:A.bottom+4,left:J.left,width:J.width}}return{position:"fixed",top:A.bottom+4,left:A.left,width:A.width}},[l]);Fn(()=>{u||E(e)},[e,u]),Fn(()=>{if(!x)return;let A=ke=>{C.current&&!ke.composedPath().includes(C.current)&&S(!1)},J=ke=>{ke.key==="Escape"&&S(!1)};return document.addEventListener("mousedown",A),document.addEventListener("keydown",J),()=>{document.removeEventListener("mousedown",A),document.removeEventListener("keydown",J)}},[x]),Fn(()=>{u&&D.current&&(D.current.focus(),D.current.select())},[u]);let g=ti(()=>{if(!m||m.startsWith("#")||m.startsWith("rgb")||m.startsWith("hsl")||m.startsWith("oklch"))return[];let A=m.toLowerCase();return o.filter(J=>J.name.toLowerCase().includes(A)||J.usage.toLowerCase().includes(A)).slice(0,8)},[m,o]),v=()=>{if(se.current){se.current=!1,ee.current=!1;return}if(!ee.current){d(!1),S(!1);return}if(!m.trim()){d(!1),S(!1),ee.current=!1;return}if(Tm(m)){E(""),i?.(),d(!1),S(!1),ee.current=!1;return}let A=hl(m);E(A),r(A),d(!1),S(!1),ee.current=!1},b=A=>{ee.current=!0,E(A),Cm(A)&&r(hl(A)),A.includes("var")||A.includes("--")||A.length>0&&!A.startsWith("#")?S(!0):S(!1)},ie=A=>{E(A.usage),r(A.usage),S(!1),d(!1)},ve=(A,J)=>{requestAnimationFrame(()=>{A[J]?.focus()})},ce=(A,J,ke,De)=>{if(A.key==="ArrowDown"||A.key==="ArrowUp"){A.preventDefault();let pe=A.key==="ArrowDown"?1:-1,Ge=(De+pe+J.length)%J.length;ke.current[Ge]?.focus();return}if(A.key==="Enter"){A.preventDefault(),ie(J[De]);return}A.key==="Escape"&&(A.preventDefault(),S(!1),D.current?.focus())},ue=()=>{setTimeout(()=>{x||v()},150)},we=A=>{if((A.key==="ArrowDown"||A.key==="ArrowUp")&&x&&g.length>0){A.preventDefault(),ve(G.current,A.key==="ArrowDown"?0:g.length-1);return}A.key==="Enter"?v():A.key==="Escape"&&(A.preventDefault(),se.current=!0,ee.current&&(O.current?r(O.current):i?.()),E(O.current),d(!1),S(!1),ee.current=!1,D.current?.blur())},Ue=ti(()=>{let A=t.trim().toLowerCase();if(A.startsWith("#"))return A.length===4?`#${A[1]}${A[1]}${A[2]}${A[2]}${A[3]}${A[3]}`:A.slice(0,7);let J=A.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(J){let De=parseInt(J[1],10).toString(16).padStart(2,"0"),pe=parseInt(J[2],10).toString(16).padStart(2,"0"),Ge=parseInt(J[3],10).toString(16).padStart(2,"0");return`#${De}${pe}${Ge}`}let ke=A.match(/oklch\(\s*([\d.]+)/);if(ke){let De=Math.max(0,Math.min(1,parseFloat(ke[1]))),pe=Math.round(De*255).toString(16).padStart(2,"0");return`#${pe}${pe}${pe}`}return"#000000"},[t]);return qe("div",{ref:C,onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1),style:{position:"relative",borderRadius:2,border:c?"none":"1px solid",borderColor:c?"transparent":u?s:P?vl:bl,backgroundColor:"transparent",minHeight:jn,boxSizing:"border-box",transition:"border-color 100ms ease",overflow:"hidden"},children:[qe("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[qe("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[Y("input",{type:"color",value:Ue,onChange:A=>{let J=A.target.value;E(J),r(J)},style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),Y("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),u?Y("input",{ref:D,type:"text",value:m,placeholder:n,onChange:A=>b(A.target.value),onKeyDown:we,onBlur:ue,style:{...vn,flex:1,minWidth:0}}):Y("span",{onClick:()=>{O.current=p,ee.current=!1,se.current=!1,E(Us(p,n)),d(!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?s:p?bn:nr},title:p||n,children:f})]}),x&&g.length>0&&Y("div",{"data-popmelt-dropdown":"true",style:{...B(),backgroundColor:Lo,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:g.map((A,J)=>qe("button",{ref:ke=>{G.current[J]=ke},type:"button",onClick:()=>ie(A),onKeyDown:ke=>ce(ke,g,G,J),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",backgroundColor:"transparent",color:"#1e293b",cursor:"pointer",textAlign:"left",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',outline:"none"},onFocus:ke=>{ke.currentTarget.style.backgroundColor=ei},onBlur:ke=>{ke.currentTarget.style.backgroundColor="transparent"},children:[Y("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:A.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),Y("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:A.name})]},A.name))})]})}function Qd({element:e,elementInfo:t,selector:n,styleModifications:o,dispatch:r,onClose:i,onHover:s,accentColor:a="#3b82f6",toolbarRef:l,panelWrapperRef:c,refreshKey:u=0}){let d=Qt(null),p=Qt(null),[f,m]=en(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch{return!1}});Fn(()=>{if(f)return;let I=setTimeout(()=>m(!0),50);return()=>clearTimeout(I)},[f]);let[E,x]=en(null),S=E!==null,[P,L]=en("rem"),D=xn(()=>{L(I=>I==="rem"?"px":"rem")},[]),C=Qt(new Map),[G,ee]=en(""),[se,O]=en(!1),B=Qt(null),[g,v]=en(!1),[b,ie]=en(null),ve=Qt(null),ce=ti(()=>Oa(),[u]);Fn(()=>{C.current.clear()},[e,u]),Fn(()=>{ie(null)},[e]),Fn(()=>{if(!se)return;let I=ne=>{B.current&&!ne.composedPath().includes(B.current)&&O(!1)},j=ne=>{ne.key==="Escape"&&O(!1)};return document.addEventListener("mousedown",I),document.addEventListener("keydown",j),()=>{document.removeEventListener("mousedown",I),document.removeEventListener("keydown",j)}},[se]),Fn(()=>{if(!g)return;let I=ne=>{ve.current&&!ne.composedPath().includes(ve.current)&&v(!1)},j=ne=>{ne.key==="Escape"&&v(!1)};return document.addEventListener("mousedown",I),document.addEventListener("keydown",j),()=>{document.removeEventListener("mousedown",I),document.removeEventListener("keydown",j)}},[g]),Fn(()=>{let I=j=>{if(j.key!=="Escape")return;let ne=document.activeElement;ne&&d.current?.contains(ne)||i()};return window.addEventListener("keydown",I),()=>window.removeEventListener("keydown",I)},[i]);let ue=Qt({top:0,left:0,maxHeight:400}),[,we]=en(0),Ue="devtools-panel-position",V=Qt({x:0,y:0}),A=Qt(null),J=Qt(!1);Fn(()=>{try{let I=localStorage.getItem(Ue);if(I){let j=JSON.parse(I);if(typeof j.top=="number"&&typeof j.left=="number"){J.current=!0;let ne=window.innerWidth-Lr-Vn,ae=Math.max(Vn,Math.min(j.top,window.innerHeight-Vn-200)),fe=Math.max(Vn,Math.min(j.left,ne));ue.current={top:ae,left:fe,maxHeight:ss(ae,fe,l?.current)},we(ge=>ge+1)}}}catch{}},[]),Fn(()=>{let I=()=>{let j=window.innerWidth-Lr-Vn,ne=Math.max(Vn,Math.min(ue.current.top,window.innerHeight-Vn-200)),ae=Math.max(Vn,Math.min(ue.current.left,j));ue.current={top:ne,left:ae,maxHeight:ss(ne,ae,l?.current)},we(fe=>fe+1)};return window.addEventListener("resize",I,{passive:!0}),()=>window.removeEventListener("resize",I)},[l]),Fn(()=>{let I=ne=>{let ae=A.current;if(!ae)return;let fe=ae.startOffsetX+(ne.clientX-ae.startX),ge=ae.startOffsetY+(ne.clientY-ae.startY),le=window.innerWidth-Lr-Vn,Ce=Math.max(Vn,Math.min(le,ue.current.left+fe)),pt=Math.max(Vn,Math.min(window.innerHeight-Vn-200,ue.current.top+ge));V.current={x:Ce-ue.current.left,y:pt-ue.current.top};let Fe=d.current,lt=Fe?.parentElement;if(!lt)return;lt.style.top=`${pt}px`,lt.style.left=`${Ce}px`;let ft=ss(pt,Ce,l?.current);Fe&&(Fe.style.maxHeight=`${ft}px`,Fe.style.height=`${ft}px`)},j=()=>{if(!A.current)return;let ne=ue.current.top+V.current.y,ae=ue.current.left+V.current.x;ue.current={top:ne,left:ae,maxHeight:ss(ne,ae,l?.current)},V.current={x:0,y:0},J.current=!0;try{localStorage.setItem(Ue,JSON.stringify({top:ne,left:ae}))}catch{}A.current=null};return window.addEventListener("mousemove",I),window.addEventListener("mouseup",j),()=>{window.removeEventListener("mousemove",I),window.removeEventListener("mouseup",j)}},[]);let ke=xn(I=>{I.button!==0||I.target.closest("button")||(I.preventDefault(),A.current={startX:I.clientX,startY:I.clientY,startOffsetX:V.current.x,startOffsetY:V.current.y})},[]);Fn(()=>{V.current={x:0,y:0};let I=(ae=!1)=>{let fe=d.current,ge=8,le,Ce;if(J.current)le=ue.current.top,Ce=ue.current.left;else{let lt=e.getBoundingClientRect();Ce=lt.right+ge,le=lt.top,Ce+Lr>window.innerWidth-Vn&&(Ce=lt.left-Lr-ge),Ce<Vn&&(Ce=Math.max(Vn,(window.innerWidth-Lr)/2))}let pt=window.innerWidth-Lr-Vn;le=Math.max(Vn,Math.min(le,window.innerHeight-Vn-200)),Ce=Math.max(Vn,Math.min(Ce,pt));let Fe=ss(le,Ce,l?.current);if(ue.current={top:le,left:Ce,maxHeight:Fe},ae&&fe){let lt=fe.parentElement;lt&&!J.current&&(lt.style.top=`${le+V.current.y}px`,lt.style.left=`${Ce+V.current.x}px`),fe.style.maxHeight=`${Fe}px`,fe.style.height=`${Fe}px`}else we(lt=>lt+1)};I(!1);let j=()=>I(!0),ne=()=>I(!1);return window.addEventListener("scroll",j,{passive:!0}),window.addEventListener("resize",ne,{passive:!0}),()=>{window.removeEventListener("scroll",j),window.removeEventListener("resize",ne)}},[e,l,u]),Fn(()=>{let I=d.current;if(!I)return;let j=ne=>{if(ne.composedPath().some(Fe=>Fe instanceof HTMLElement&&Fe.dataset.popmeltDropdown==="true"))return;let ae=p.current;if(!ae){ne.preventDefault();return}let{scrollTop:fe,scrollHeight:ge,clientHeight:le}=ae,Ce=fe<=0&&ne.deltaY<0,pt=fe+le>=ge&&ne.deltaY>0;(Ce||pt)&&ne.preventDefault()};return I.addEventListener("wheel",j,{passive:!1}),()=>I.removeEventListener("wheel",j)},[]);let De=ti(()=>o.find(I=>I.selector===n),[o,n]),pe=xn(I=>{let j=De?.changes.find(ne=>ne.property===I);return j?j.modified:Rs(e,I)},[e,De]),Ge=xn(I=>{let j=De?.changes.find(ne=>ne.property===I);return j?j.modified:wi(e,I)},[e,De]),Ze=xn((I,j)=>{if(!I.includes("color"))return j;let ne=j.trim();if(ne.startsWith("var(")||ne.startsWith("--"))return ne;let fe=ce.find(ge=>ge.usage===ne||ge.name===ne)?.value||ne;return Er(e,fe)},[ce,e]),Te=xn(I=>{if(C.current.has(I))return C.current.get(I);let j=De?.changes.find(ae=>ae.property===I);if(j)return j.original;let ne=Rs(e,I);return C.current.set(I,ne),ne},[e,De]),Q=xn((I,j)=>{let ne=Te(I),ae=Ze(I,j);ut(e,I,ae),I==="backdrop-filter"&&ut(e,"-webkit-backdrop-filter",ae),r({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:I,original:ne,modified:ae}})},[e,n,t,r,Ze,Te]),Ie=xn(I=>{let ne=o.find(ae=>ae.selector===n)?.changes.find(ae=>ae.property===I);e instanceof HTMLElement&&(e.style.removeProperty(I),I==="backdrop-filter"&&e.style.removeProperty("-webkit-backdrop-filter")),(ne||e instanceof HTMLElement)&&(r({type:"CLEAR_STYLE",payload:{selector:n,property:I}}),C.current.delete(I))},[e,n,o,r]),mt=xn(()=>{let I=G.split(";").map(j=>j.trim()).filter(j=>j);for(let j of I){let ne=j.indexOf(":");if(ne>0){let ae=j.slice(0,ne).trim(),fe=j.slice(ne+1).trim();ae&&fe&&Q(ae,fe)}}ee("")},[G,Q]),We=xn(I=>De?.changes.some(j=>j.property===I)??!1,[De]),Oe=xn(I=>{requestAnimationFrame(()=>{let ne=d.current?.querySelector(`[data-popmelt-property="${I}"]`)?.querySelector("input, textarea, select, button");ne?.focus(),(ne instanceof HTMLInputElement||ne instanceof HTMLTextAreaElement)&&ne.select()})},[]),He=xn(()=>{let I=[],j=Ge("background-image");j&&!Pi(j)&&I.push(...yl(j).map(gl).filter(ge=>!as(ge)));let ne=Ge("background");I.length===0&&ne&&!Pi(ne)&&I.push(...yl(ne).map(gl).filter(ge=>!as(ge)));let ae=Ge("background-color"),fe=pe("background-color");return(ae!==null&&!as(ae)||!ls(fe))&&I.push(ae||fe),I},[Ge,pe]),Pe=xn(I=>{let j=I.filter(fe=>!as(fe));if(j.length===0){Q("background","none"),Q("background-image","none"),Q("background-color","transparent"),Ie("opacity");return}let ne=j[j.length-1],ae=j.slice(0,-1);Ie("background"),ae.length>0?Q("background-image",Rm(ae)):Ie("background-image"),Q("background-color",ne),Ie("opacity")},[Q,Ie]),Et=ti(()=>{let I=Ge("background"),j=Ge("background-image"),ne=Ge("background-color"),ae=pe("background-color"),fe=pe("opacity"),ge=ne!==null&&!as(ne);return Pi(I||"")&&Pi(j||"")&&!ge&&ls(ae)&&(fe===""||Number(fe)===1)},[Ge,pe]),dn=ti(()=>{let I=pe("border-width"),j=pe("border-style"),ae=or.map(ge=>pe(Rr[ge])).some(ge=>!ni(ge));return ni(I)&&!ae||Gd(j)},[pe]),Sn=ti(()=>["box-shadow","filter","backdrop-filter","transform"].every(I=>{let j=pe(I);return!j||j==="none"}),[pe]),Ln=xn(()=>{let I=["rgba(0, 0, 0, 0.08)",...He()];Pe(I),Oe("background-layer-0")},[Pe,Oe,He]),Nt=xn((I,j,ne)=>{let ae=Te(I);ne(ae)?Ie(I):Q(I,j)},[Te,Q,Ie]),wn=xn(()=>{Nt("background","none",Pi),Nt("background-image","none",Pi),Nt("background-color","transparent",ls),Nt("opacity","1",wm)},[Nt]),co=xn(()=>{Q("border-width","1px"),Q("border-style","solid"),Q("border-color",pe("color")||"#000000"),Oe("border-width")},[Oe,pe,Q]),Jn=xn(()=>{Nt("border-width","0px",ni),or.forEach(I=>{Nt(Rr[I],"0px",ni)}),Nt("border-color","transparent",ls),Nt("border-style","none",Gd),ie(null)},[Nt]),En=xn(()=>or.some(j=>Ge(Rr[j])!==null)?{top:pe("border-top-width"),right:pe("border-right-width"),bottom:pe("border-bottom-width"),left:pe("border-left-width")}:vm(pe("border-width")),[Ge,pe]),At=xm(En()),at=b??At,Dt=xn((I,j)=>{let ne=En(),ae=pe("border-width"),fe=j||Sm(ne,ae);if(ie(I==="custom"?"custom":null),v(!1),I==="all"){Q("border-width",fe),or.forEach(ge=>Ie(Rr[ge]));return}if(I==="custom"){or.forEach(ge=>{Q(Rr[ge],ne[ge]||fe)});return}Q("border-width","0px"),or.forEach(ge=>{Q(Rr[ge],ge===I?fe:"0px")})},[En,pe,Q,Ie]),un=xn((I,j)=>{Q(I,j),O(!1),Oe(I)},[Oe,Q]),ht=xn(()=>{O(!1),Q("box-shadow","none"),Q("filter","none"),Q("backdrop-filter","none"),Q("transform","none")},[Q]),Yt=I=>{let j=pe(I.property),ae=Ge(I.property)??"",fe=Qr(j),ge=We(I.property),le={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:bn,border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};switch(I.type){case"color":{let Ce=Er(e,j);return Y(Ks,{value:ae,resolvedValue:Ce,placeholder:fe,colorVariables:ce,onChange:pt=>Q(I.property,pt),onCancel:()=>Ie(I.property),accentColor:a,modified:ge,panelContentRef:p})}case"number":{if(!!es[I.property])return Y(yo,{modified:ge,children:Y(vo,{property:I.property,value:ae,onChange:Fe=>Q(I.property,Fe),isModified:ge,placeholder:Ir(I.property,j,P),onCancel:()=>Ie(I.property),min:I.min,max:I.max,step:I.step||1,style:{...le,paddingRight:32},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt},preferredUnit:P,onUnitCycle:D})});let{num:pt}=Ro(ae);return Y(yo,{modified:ge,children:Y(Zr,{type:"number",value:ae?String(pt):"",placeholder:fe,min:I.min,max:I.max,step:I.step||1,onChange:Fe=>Q(I.property,Fe),onCancel:()=>Ie(I.property),style:le})})}case"select":return Y(Ao,{modified:ge,style:{backgroundColor:"transparent"},children:qe("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[qe("select",{value:ae,onChange:Ce=>Q(I.property,Ce.target.value),style:{...le,cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none",backgroundColor:"transparent",color:ge?a:ae?bn:nr},children:[!ae&&Y("option",{value:"",disabled:!0,children:fe}),I.options?.map(Ce=>Y("option",{value:Ce,children:Ce},Ce))]}),Y("div",{style:{position:"absolute",right:0,top:0,bottom:0,width:20,pointerEvents:"none",color:"#999",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"transparent"},children:Y(Zs,{size:12})})]})});case"spacing":return Y(yo,{modified:ge,children:Y(Zr,{type:"text",value:ae,onChange:Ce=>Q(I.property,Ce),onCancel:()=>Ie(I.property),placeholder:fe||"e.g., 10px or 10px 20px",style:le})});case"backdrop-filter":return Y(Id,{value:j,onChange:Ce=>Q(I.property,Ce),accentColor:a,modified:ge,panelContentRef:p});default:return Y(yo,{modified:ge,children:Y(Zr,{type:"text",value:ae,placeholder:fe,onChange:Ce=>Q(I.property,Ce),onCancel:()=>Ie(I.property),style:le})})}},bt={width:jn,height:jn,border:"none",outline:"none",backgroundColor:"transparent",color:"#1f2937",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",padding:0},oo=(I,j,ne,ae,fe,ge=!1)=>Y(Am,{value:I,placeholder:j,modified:ne,onChange:ae,onCancel:fe,chromeless:ge,accentColor:a}),xo=({colorProperty:I,opacityProperty:j,colorValue:ne,explicitColorValue:ae,resolvedColor:fe,colorModified:ge,opacityDisplay:le,opacityPlaceholder:Ce,opacityModified:pt,onColorChange:Fe,onOpacityChange:lt,onColorCancel:ft,onOpacityCancel:An})=>{let Tn=Em(ae||ne);return qe("div",{style:{display:"grid",gridTemplateColumns:Tn?"minmax(0, 1fr)":"minmax(0, 1fr) 68px",alignItems:"center",minWidth:0,minHeight:jn,borderRadius:2,backgroundColor:Fo,overflow:"hidden"},children:[Y("div",{"data-popmelt-property":I,style:{minWidth:0},children:Y(Ks,{value:ae,resolvedValue:fe,placeholder:Qr(ne),colorVariables:ce,onChange:Fe,onCancel:ft,accentColor:a,modified:ge,panelContentRef:p,chromeless:!0})}),!Tn&&Y("div",{"data-popmelt-property":j,style:{borderLeft:"1px solid rgba(0,0,0,0.1)",minWidth:0},children:oo(le,Ce,pt,lt,An,!0)})]})},Z=()=>{let I=He(),j=I.length>0?I:["rgba(0, 0, 0, 0.08)"],ne=We("background")||We("background-image")||We("background-color")||We("opacity");return Y("div",{style:{display:"grid",gap:2,padding:"4px 0"},children:j.map((ae,fe)=>{let ge=gl(ae),le=Er(e,ge),Ce=`background-layer-${fe}`,pt=`background-layer-alpha-${fe}`,Fe=ft=>{let An=[...j];An[fe]=ft,Pe(An)},lt=()=>{let ft=j.filter((An,Tn)=>Tn!==fe);Pe(ft)};return qe("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) 22px 22px",gap:6,alignItems:"center",padding:"2px 12px"},children:[xo({colorProperty:Ce,opacityProperty:pt,colorValue:ge,explicitColorValue:ge,resolvedColor:le,colorModified:ne,opacityDisplay:Xs(ge),opacityPlaceholder:Xs(ge),opacityModified:ne,onColorChange:Fe,onOpacityChange:ft=>Fe(Jd(le,ft)),onColorCancel:()=>Pe(j),onOpacityCancel:()=>Pe(j)}),Y("button",{type:"button",title:"Hide fill",onClick:lt,style:bt,children:Y(pl,{size:14,strokeWidth:1.8})}),Y("button",{type:"button",title:"Remove fill",onClick:lt,style:bt,children:Y(jd,{size:15,strokeWidth:2})})]},`${Ce}-${j.length}`)})})},xe=()=>{let I=pe("border-color"),j=Ge("border-color")??"",ne=Er(e,I),ae=We("border-color");return qe("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) 22px 22px",gap:6,alignItems:"center",padding:"4px 12px"},children:[xo({colorProperty:"border-color",opacityProperty:"border-color-alpha",colorValue:I,explicitColorValue:j,resolvedColor:ne,colorModified:ae,opacityDisplay:Xs(I),opacityPlaceholder:Xs(I),opacityModified:ae,onColorChange:fe=>Q("border-color",fe),onOpacityChange:fe=>Q("border-color",Jd(ne,fe)),onColorCancel:()=>Ie("border-color"),onOpacityCancel:()=>Ie("border-color")}),Y("button",{type:"button",title:"Hide stroke",onClick:Jn,style:bt,children:Y(pl,{size:14,strokeWidth:1.8})}),Y("button",{type:"button",title:"Remove stroke",onClick:Jn,style:bt,children:Y(jd,{size:15,strokeWidth:2})})]})},Re={marginBottom:4,fontSize:vt,lineHeight:1.1,color:It,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt},et=(I,j,ne,ae=!1,fe=!1)=>{let le=Ge(I)??pe(I);return Y(Ao,{style:{backgroundColor:"transparent",opacity:ae?.45:1,border:fe?`1px solid ${bl}`:"none"},children:qe("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[qe("select",{value:le,disabled:ae,onChange:Ce=>Q(I,Ce.target.value),style:{...vn,cursor:ae?"default":"pointer",paddingLeft:8,paddingRight:24,appearance:"none",WebkitAppearance:"none",backgroundColor:"transparent",color:ae?nr:bn},children:[ne&&!le&&Y("option",{value:"",disabled:!0,children:ne}),j.map(Ce=>Y("option",{value:Ce,children:Ce},Ce))]}),Y("span",{style:{position:"absolute",right:6,top:"50%",transform:"translateY(-50%)",color:"#999",pointerEvents:"none",display:"flex"},children:Y(Zs,{size:12})})]})})},Ke=()=>{let I=at==="top"||at==="right"||at==="bottom"||at==="left"?at:null,j=I?Rr[I]:"border-width",ae=Ge(j)??"",fe=pe(j),ge=We(j);return Y(yo,{modified:ge,children:Y(vo,{property:j,value:ae,onChange:le=>{I?Dt(I,le):Q(j,le)},isModified:ge,placeholder:Ir(j,fe,P),onCancel:()=>{I?Dt(I,"0px"):Ie(j)},min:0,max:20,step:1,scrubIcon:Y(ml,{size:13,strokeWidth:ge?2.5:1.8}),accentColor:a,style:{...vn,paddingLeft:28,paddingRight:26},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt},preferredUnit:P,onUnitCycle:D})})},Le=I=>{let j=Rr[I],ne=Ge(j),ae=pe(j),fe=We(j);return Y(yo,{modified:fe,children:Y(vo,{property:j,value:ne??"",onChange:ge=>Q(j,ge),isModified:fe,placeholder:Ir(j,ae,P),onCancel:()=>Q(j,"0px"),min:0,max:20,step:1,scrubIcon:Y(fl,{mode:I}),accentColor:a,style:{...vn,paddingLeft:28,paddingRight:26},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt},preferredUnit:P,onUnitCycle:D})})},tt=()=>at!=="custom"?null:qe("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1fr)",gap:8,padding:"0 12px 8px"},children:[Y("div",{"data-popmelt-property":"border-left-width",children:Le("left")}),Y("div",{"data-popmelt-property":"border-top-width",children:Le("top")}),Y("div",{"data-popmelt-property":"border-right-width",children:Le("right")}),Y("div",{"data-popmelt-property":"border-bottom-width",children:Le("bottom")})]}),qt=(I,j=0,ne=100,ae=1)=>{let ge=Ge(I)??"",le=pe(I),Ce=We(I);return Y(yo,{modified:Ce,children:Y(vo,{property:I,value:ge,onChange:pt=>Q(I,pt),isModified:Ce,placeholder:Ir(I,le,P),onCancel:()=>Ie(I),min:j,max:ne,step:ae,style:{...vn,paddingRight:26},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt},preferredUnit:P,onUnitCycle:D})})},pn=()=>{let I=[{mode:"all",label:"All"},{mode:"top",label:"Top"},{mode:"bottom",label:"Bottom"},{mode:"left",label:"Left"},{mode:"right",label:"Right"},{mode:"custom",label:"Custom"}];return qe("div",{ref:ve,style:{position:"relative",width:jn,height:jn},children:[Y("button",{type:"button",title:"Border sides",onClick:()=>v(j=>!j),style:{...bt,width:jn,height:jn,color:at!=="all"?a:"#1f2937"},children:Y(fl,{mode:at})}),g&&Y("div",{"data-popmelt-dropdown":"true",style:{position:"absolute",top:jn+4,right:0,width:156,backgroundColor:Lo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',boxShadow:"0 10px 28px rgba(0,0,0,0.18)"},children:I.map((j,ne)=>qe("button",{type:"button",onClick:()=>Dt(j.mode),style:{width:"100%",minHeight:34,display:"grid",gridTemplateColumns:"18px 18px minmax(0, 1fr)",columnGap:8,alignItems:"center",padding:j.mode==="custom"?"9px 12px":"7px 12px",border:"none",borderTop:j.mode==="custom"?"1px solid rgba(0,0,0,0.08)":"none",outline:"none",backgroundColor:j.mode===at?ei:"transparent",color:"#1f2937",cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt,marginTop:j.mode==="custom"&&ne>0?2:0},children:[Y("span",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:j.mode===at&&Y(qs,{size:13,strokeWidth:1.9})}),Y("span",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:Y(fl,{mode:j.mode})}),Y("span",{children:j.label})]},j.mode))})]})},Cn=()=>qe("div",{style:{position:"relative"},children:[xe(),qe("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1fr) 22px",columnGap:6,alignItems:"end",padding:"0 12px 6px"},children:[qe("div",{children:[Y("div",{style:Re,children:"Style"}),et("border-style",["solid","dashed","dotted","double","none"],void 0,!1,!0)]}),qe("div",{"data-popmelt-property":"border-width",children:[Y("div",{style:Re,children:"Width"}),Ke()]}),pn()]}),tt()]}),Ut=()=>{let I=Ge("opacity"),j=(I??pe("opacity"))||"1",ne=Number(j),ae=I&&I.trim()&&Number.isFinite(ne)?String(Math.round(ne*100)):"",fe=Number.isFinite(ne)?String(Math.round(ne*100)):"100",le=pe("visibility")==="hidden",Ce=(Ge("mix-blend-mode")??pe("mix-blend-mode"))||"normal",pt=["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"];return qe("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)",opacity:S?.3:1,transition:"opacity 150ms ease"},children:[qe("div",{style:{...Un,padding:"6px 12px"},children:[Y("span",{children:"Appearance"}),qe("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Y("button",{type:"button",title:le?"Show element":"Hide element",onClick:()=>{le?Ie("visibility"):Q("visibility","hidden")},style:{...bt,color:le?a:"#1f2937",opacity:le?1:.9},children:Y(pl,{size:15,strokeWidth:1.8})}),qe("div",{style:{position:"relative",width:22,height:22},children:[Y("button",{type:"button",title:"Blend mode",tabIndex:-1,style:{...bt,width:22,height:22,color:Ce!=="normal"?a:"#1f2937"},children:Y(cm,{size:15,strokeWidth:1.8})}),Y("select",{"aria-label":"Blend mode",value:Ce,onChange:Fe=>{Fe.target.value==="normal"?Ie("mix-blend-mode"):Q("mix-blend-mode",Fe.target.value)},style:{position:"absolute",inset:0,opacity:0,cursor:"pointer"},children:pt.map(Fe=>Y("option",{value:Fe,children:Fe},Fe))})]})]})]}),qe("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1fr)",columnGap:8,padding:"0 12px 8px"},children:[qe("div",{"data-popmelt-property":"opacity",children:[Y("div",{style:Re,children:"Opacity"}),oo(ae,fe,We("opacity"),Fe=>{let lt=Math.max(0,Math.min(100,Number(Fe)))/100;Number.isFinite(lt)&&Q("opacity",String(lt))},()=>Ie("opacity"))]}),qe("div",{"data-popmelt-property":"border-radius",children:[Y("div",{style:Re,children:"Corner radius"}),qt("border-radius",0,100,1)]})]})]})},$t=t.reactComponent||t.tagName,Wt={position:"fixed",top:ue.current.top,left:ue.current.left,width:qd,height:ue.current.maxHeight,maxHeight:ue.current.maxHeight,backgroundColor:Ai,borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",zIndex:10002,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,color:bn,overflow:"visible",display:"flex",flexDirection:"column",opacity:f?1:0,transition:"opacity 150ms ease"},Yn={display:"flex",alignItems:"center",justifyContent:"space-between",margin:4,padding:"4px 5px 4px 10px",backgroundColor:a,color:"#ffffff",cursor:A.current?"grabbing":"grab",userSelect:"none",WebkitUserSelect:"none"},Un={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 12px 3px",userSelect:"none",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:600,color:"#475569"},Tt={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},Ft={width:80,fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:It,fontWeight:xt,flexShrink:0};return Y("div",{ref:c,"data-devtools":"panel-wrapper",style:{position:"fixed",top:ue.current.top+V.current.y,left:ue.current.left+V.current.x,zIndex:10002,pointerEvents:"none"},children:qe("div",{ref:d,"data-devtools":"panel",style:{...Wt,position:"relative",top:0,left:0,zIndex:0,pointerEvents:"auto"},onMouseEnter:()=>s?.("element"),onMouseLeave:()=>s?.(null),children:[Y("style",{dangerouslySetInnerHTML:{__html:`
|
|
16
16
|
[data-devtools="panel"] ::selection {
|
|
17
17
|
background: ${Ur(a,.22)};
|
|
18
18
|
color: ${bn};
|
|
@@ -22,33 +22,33 @@ import{createContext as qy,useCallback as on,useContext as Zy,useEffect as Ut,us
|
|
|
22
22
|
color: ${nr};
|
|
23
23
|
opacity: 1;
|
|
24
24
|
}
|
|
25
|
-
`}}),G("div",{"aria-hidden":"true",style:$s()}),qe("div",{style:Yn,onMouseDown:ke,children:[G("div",{style:{display:"flex",alignItems:"center",gap:3,overflow:"hidden",minWidth:0},children:G("span",{style:{fontWeight:600,fontSize:12,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Wt})}),G("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"})]}),qe("div",{ref:p,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[G("div",{children:G(Bd,{element:e,getValue:pe,getOriginalValue:Me,handleChange:Q,isModified:We,onResetProperty:Ie,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:Un,activeDropdown:E,onDropdownChange:x,panelContentRef:p,accentColor:a,onFieldHover:s,preferredUnit:B,onUnitCycle:A})}),Xt(),G("div",{style:{opacity:E?.3:1,transition:"opacity 150ms ease"},children:G(Nd,{element:e,getValue:pe,getExplicitValue:Ge,handleChange:Q,isModified:We,onResetProperty:Ie,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:Un,accentColor:a,colorVariables:ce,panelContentRef:p,preferredUnit:B,onUnitCycle:A})}),$d.map((I,j)=>{let ne=j===$d.length-1,ae=I.name==="Background",fe=I.name==="Borders",ge=I.name==="Effects",le=ae||fe||ge,Ce=ae&&Et||fe&&dn||ge&&Sn;return qe("div",{style:{borderBottom:ne?"none":"1px solid rgba(0,0,0,0.08)",opacity:S?.3:1,transition:"opacity 150ms ease"},children:[qe("div",{style:le?{...Un,padding:"6px 12px"}:Un,children:[G("span",{children:I.name}),le&&qe("div",{style:{position:"relative"},children:[G("button",{type:"button",onClick:()=>{ae?Ln():fe?co():O(Fe=>!Fe)},title:`Add ${I.name.toLowerCase()}`,style:{width:22,height:22,border:"none",outline:"none",backgroundColor:"transparent",color:"#1f2937",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",padding:0},children:G(am,{size:15,strokeWidth:2})}),ge&&se&&G("div",{ref:D,"data-popmelt-dropdown":"true",style:{position:"absolute",top:24,right:0,width:190,backgroundColor:Lo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt},children:[{label:"Drop shadow",property:"box-shadow",value:"0 4px 12px rgba(0, 0, 0, 0.18)"},{label:"Inner shadow",property:"box-shadow",value:"inset 0 2px 6px rgba(0, 0, 0, 0.18)"},{label:"Layer blur",property:"filter",value:"blur(4px)"},{label:"Background blur",property:"backdrop-filter",value:"blur(8px)"},{label:"Scale transform",property:"transform",value:"scale(1)"}].map(Fe=>G("button",{type:"button",onClick:()=>un(Fe.property,Fe.value),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:It,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt},children:Fe.label},Fe.label))})]})]}),!Ce&&qe("div",{style:{padding:"0 0 4px"},children:[ae&&Z(),fe&&Cn(),I.properties.filter(Fe=>!(ae||fe)).map(Fe=>{let lt=We(Fe.property);return qe("div",{"data-popmelt-property":Fe.property,style:{...Mt},children:[G("span",{onClick:lt?()=>Ie(Fe.property):void 0,title:lt?"Click to reset":void 0,style:{...Ft,cursor:lt?"pointer":"default"},children:Fe.label}),G("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:Kt(Fe)})]},Fe.property)})]})]},I.name)}),qe("div",{style:{opacity:S?.3:1,transition:"opacity 150ms ease"},children:[G("div",{style:Un,children:G("span",{children:"Raw CSS"})}),qe("div",{style:{padding:"4px 12px 8px"},children:[G("textarea",{value:U,onChange:I=>ee(I.target.value),placeholder:"property: value; ...",style:{width:"100%",height:60,padding:8,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:bn,border:"1px solid rgba(0,0,0,0.1)",borderRadius:2,resize:"vertical",outline:"none"}}),U.trim()&&G("button",{type:"button",onClick:mt,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:a,color:"#fff",cursor:"pointer",opacity:U.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as Rm,useLayoutEffect as Lm,useState as Am}from"react";import{Fragment as Om,jsx as ni,jsxs as Dm}from"react/jsx-runtime";var bl=["flex-start","center","flex-end"],vl=["flex-start","center","flex-end"];function Pm(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function Bm(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 Zd(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 s of t){let a=s.getBoundingClientRect();a.width===0&&a.height===0||(a.top<n&&(n=a.top),a.left<o&&(o=a.left),a.bottom>r&&(r=a.bottom),a.right>i&&(i=a.right))}return n===1/0?null:new DOMRect(o,n,i-o,r-n)}function Qd({element:e,modifier:t,accentColor:n,refreshKey:o=0}){let[r,i]=Am(null);if(Rm(()=>{if(!e){i(null);return}let E=()=>i(Zd(e));return E(),window.addEventListener("scroll",E,{passive:!0}),window.addEventListener("resize",E,{passive:!0}),()=>{window.removeEventListener("scroll",E),window.removeEventListener("resize",E)}},[e]),Lm(()=>{e&&i(Zd(e))},[e,o]),!r)return null;let s=r,a=window.getComputedStyle(e),l=a.display;if(l!=="flex"&&l!=="inline-flex")return null;let c=a.flexDirection,u=c==="column"||c==="column-reverse"?"vertical":"horizontal",d=u==="horizontal"?"vertical":"horizontal",p=[];if(t==="shift"){let E=Pm(a.justifyContent);if(E){let x=bl.indexOf(E);u==="horizontal"?(x>0&&p.push("left"),x<bl.length-1&&p.push("right")):(x>0&&p.push("up"),x<bl.length-1&&p.push("down"))}}else{let E=Bm(a.alignItems);if(E){let x=vl.indexOf(E);d==="horizontal"?(x>0&&p.push("left"),x<vl.length-1&&p.push("right")):(x>0&&p.push("up"),x<vl.length-1&&p.push("down"))}}if(p.length===0)return null;let f=14,m=7;return ni(Om,{children:p.map(E=>{let x,S;switch(E){case"right":x=s.right+f,S=s.top+s.height/2;break;case"left":x=s.left-f,S=s.top+s.height/2;break;case"down":x=s.left+s.width/2,S=s.bottom+f;break;case"up":x=s.left+s.width/2,S=s.top-f;break}let B=E==="right"?0:E==="left"?180:E==="down"?90:-90,L={position:"fixed",left:x-m,top:S-m,width:m*2,height:m*2,pointerEvents:"none",zIndex:9997};return ni("div",{"data-devtools":"swipe-hint",style:L,children:ni("svg",{width:m*2,height:m*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:Dm("g",{transform:`rotate(${B})`,children:[ni("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),ni("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),ni("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),ni("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},E)})})}import{useEffect as _m,useLayoutEffect as Hm,useState as Fm}from"react";import{jsx as xl,jsxs as Sl}from"react/jsx-runtime";function Nm(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 eu({element:e,fontSize:t,lineHeight:n,accentColor:o,hoveredProperty:r,draggingProperty:i,cursorViewport:s}){let[a,l]=Fm(null);if(_m(()=>{if(!e){l(null);return}let S=()=>{l(Ei(e))};return S(),window.addEventListener("scroll",S,{passive:!0}),window.addEventListener("resize",S,{passive:!0}),()=>{window.removeEventListener("scroll",S),window.removeEventListener("resize",S)}},[e]),Hm(()=>{e&&l(Ei(e))},[e,t,n]),!a)return null;let c=a.width,u=a.height,d=Nm(o,.2),p=i??r,f=8,m=2,E={position:"fixed",top:a.top,left:a.left,width:c,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"},x=S=>S==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return Sl("div",{"data-devtools":"text-handles",style:E,children:[Sl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${u}`,children:[xl("rect",{x:"0.5",y:"0.5",width:Math.max(0,c-1),height:Math.max(0,u-1),fill:"none",stroke:d,strokeWidth:"1"}),(p==="font-size"||!p)&&xl("rect",{x:c-m/2,y:u/2-f/2,width:m,height:f,fill:o,stroke:"#ffffff",strokeWidth:p==="font-size"?4:2,paintOrder:"stroke"}),(p==="line-height"||!p)&&xl("rect",{x:c/2-f/2,y:u-m/2,width:f,height:m,fill:o,stroke:"#ffffff",strokeWidth:p==="line-height"?4:2,paintOrder:"stroke"})]}),s&&p&&(()=>{let S=p==="font-size"?"Aa":"Lh",B=x(p);return Sl("div",{style:{position:"fixed",left:s.x+8,top:s.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:[S," ",B]})})()]})}import{Fragment as Oi,jsx as kt,jsxs as Di}from"react/jsx-runtime";var tu=8,wl=[0,1,2,4,8,12,16,20,24,28,32],Bi=8,El="devtools-active-text";function qs(e){if(!e||e===document.body||e===document.documentElement||Tl(e))return!1;let t=e.tagName.toLowerCase();return["script","style","link","meta","head","html","body","input","textarea","select","option","button"].includes(t)?!1:!!e.parentElement}function hr(e){let t=e.getAttribute("data-pm");return t||(t=Math.random().toString(36).substring(2,8),e.setAttribute("data-pm",t)),`[data-pm="${t}"]`}function Ml(e){return e.parentElement?Array.from(e.parentElement.children).indexOf(e):-1}function nu(e){e.removeAttribute("data-pm"),e.querySelectorAll("[data-pm]").forEach(t=>t.removeAttribute("data-pm"))}function ou(e,t,n,o){let r=n.parentElement;if(!r)return null;let i=wr(e,t);for(;i&&i!==document.body;){if(i===n||n.contains(i)){i=i.parentElement;continue}if(i.parentElement===r&&qs(i))break;i=i.parentElement}if(!i||i===document.body||i.parentElement!==r||i===o)return null;let s=i.getBoundingClientRect(),l=s.height>=s.width?t<s.top+s.height/2?"before":"after":e<s.left+s.width/2?"before":"after",c=Ml(i),u=l==="before"?c:c+1;return{parent:r,reference:i,placement:l,index:u}}function Cl(e,t,n){let o=Array.from(e.children).filter(i=>i!==t),r=Math.max(0,Math.min(n,o.length));e.insertBefore(t,o[r]??null)}function zm(e){let t=e?.getBoundingClientRect();return!t||typeof window>"u"?{}:t.top<window.innerHeight/2?{avoidTop:t.bottom+Bi,avoidLeft:t.left-Bi,avoidRight:t.right+Bi}:{avoidBottom:t.top-Bi,avoidLeft:t.left-Bi,avoidRight:t.right+Bi}}function Tl(e){return e?!!e.closest("#devtools-toolbar, #devtools-scrim, #devtools-text-input, [data-devtools], [data-popmelt-panel], [data-popmelt-shadow-host]"):!1}function $m(e,t){let n=document,o=n.caretPositionFromPoint?.(e,t);if(o?.offsetNode?.nodeType===Node.TEXT_NODE)return o.offsetNode;let r=n.caretRangeFromPoint?.(e,t);return r?.startContainer?.nodeType===Node.TEXT_NODE?r.startContainer:null}function Wm(e,t){if(!e)return t();let n=e.style.pointerEvents;e.style.pointerEvents="none";try{return t()}finally{e.style.pointerEvents=n}}function jm(e,t,n){let o=document.createTreeWalker(e,NodeFilter.SHOW_TEXT,{acceptNode(i){return i.textContent?.trim()?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT}}),r=o.nextNode();for(;r;){let i=r,s=document.createRange();s.selectNodeContents(i);let a=Array.from(s.getClientRects());if(s.detach(),a.some(l=>t>=l.left&&t<=l.right&&n>=l.top&&n<=l.bottom))return i;r=o.nextNode()}return null}function ru(e,t,n){return Wm(n,()=>{let o=$m(e,t);if(!o){let d=document.elementFromPoint(e,t);d&&!Tl(d)&&(o=jm(d,e,t))}let r=o?.parentElement;if(!o||!(r instanceof HTMLElement)||Tl(r))return null;let i=r.tagName.toLowerCase();if(i==="script"||i==="style"||i==="textarea"||i==="input")return null;let s=o.nodeValue??"";if(!s.trim())return null;let a=Gm(r,o);if(!a)return null;let l=su(o,r);if(l.width<=0||l.height<=0)return null;let c=window.getComputedStyle(r),u=parseFloat(c.fontSize)||12;return{textNode:o,targetElement:r,textNodePath:a,originalText:s,rect:l,styles:c,fontSize:u}})}function Vm(e,t){return e===t?!0:!e||!t?!1:e.textNode===t.textNode&&e.rect.left===t.rect.left&&e.rect.top===t.rect.top&&e.rect.width===t.rect.width&&e.rect.height===t.rect.height}function Gm(e,t){let n=[],o=t;for(;o&&o!==e;){let r=o.parentNode;if(!r)return null;n.unshift(Array.prototype.indexOf.call(r.childNodes,o)),o=r}return o===e?n:null}function su(e,t){let n=document.createRange();n.selectNodeContents(e);let o=n.getBoundingClientRect();if(n.detach(),o.width>0&&o.height>0)return{left:o.left,top:o.top,width:o.width,height:o.height};let r=t.getBoundingClientRect();return{left:r.left,top:r.top,width:r.width,height:r.height}}function Jm(e,t){return Math.abs(e.left-t.left)<.5&&Math.abs(e.top-t.top)<.5&&Math.abs(e.width-t.width)<.5&&Math.abs(e.height-t.height)<.5}function iu(e,t,n=0,o,r,i=90){let s=e.left+window.scrollX+4,a=t==="top-left"?e.top+window.scrollY-Cr-n*Cr+4:e.bottom+window.scrollY+4-1+n*Cr,l=window.scrollY+4,c=window.scrollY+window.innerHeight-Cr-4,u=null;if(o&&r!==void 0){let d=o.getBoundingClientRect(),p=e.left+4;if(p+r+8+i>d.left&&p<d.right)if(d.top<window.innerHeight/2){let E=window.scrollY+d.bottom+4;E>l&&(l=E,u="top")}else{let E=window.scrollY+d.top-Cr-4;E<c&&(c=E,u="bottom")}}return l>c&&(c=l),a<l?a=u==="top"?l:e.top+window.scrollY+4:a>c&&(a=u==="bottom"?c:Math.max(e.top+window.scrollY+4,c)),{x:s,y:a}}function au({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:o,activeAnnotationIds:r,queuePositionMap:i,inFlightStyleSelectors:s,inFlightSelectorColors:a,onAttachImages:l,onViewThread:c,onCloseThread:u,onModelComponentsAdd:d,onModelComponentFocus:p,onModelComponentHover:f,modelComponentNames:m,modelPanelHoveredComponent:E,modelSpacingTokenHover:x,highlightedAnnotationIds:S,focusedThreadAnnotationId:B,externalCanvasRef:L,toolbarRef:A}){let{canvasRef:C,redrawAll:U,resizeCanvas:ee}=td(),se=bi(),O=kn(y=>{C.current=y,L&&(L.current=y)},[L,C]),D=tn(!1);Gn(()=>{let y=C.current;if(!y)return;let w=()=>{D.current&&(D.current=!1,y.style.pointerEvents="")},H=h=>{h.button===0&&D.current&&w()};return window.addEventListener("mousedown",H),()=>window.removeEventListener("mousedown",H)},[C]);let[g,v]=Lt(!1),[b,ie]=Lt(()=>{if(typeof window>"u")return null;try{let y=localStorage.getItem(El);return y?JSON.parse(y):null}catch{return null}}),[ve,ce]=Lt(null),[ue,we]=Lt(null),[Ue,V]=Lt(null),[P,J]=Lt(null),ke=tn(null),De=tn(null),pe=tn({x:0,y:0}),Ge=tn([]),Ze=tn(0),Me=tn(null),[Q,Ie]=Lt(null),[mt,We]=Lt(new Map),Oe=tn(0),He=tn(null),[Pe,Et]=Lt(null),[dn,Sn]=Lt(null),[Ln,Nt]=Lt(null),[wn,co]=Lt(null),Jn=tn({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}),En=tn({isDragging:!1,hasMoved:!1,mode:"move",startX:0,startY:0,element:null,originalParent:null,originalIndex:-1,selector:null,durableSelector:null,elementInfo:null}),[At,at]=Lt(null),[Dt,un]=Lt(null),[ht,Kt]=Lt(null),[bt,oo]=Lt(null),[xo,Z]=Lt(0),xe=tn(null),[Re,et]=Lt(null),Ke=tn({x:0,y:0}),[Le,tt]=Lt({x:0,y:0}),Qt=tn({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}),[pn,Cn]=Lt(null),[Xt,Wt]=Lt(null),[jt,Yn]=Lt(null),[Un,Mt]=Lt(!1),[Ft,I]=Lt(0),[j,ne]=Lt(null),ae=tn({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}),[fe,ge]=Lt(null),[le,Ce]=Lt(null),[pt,Fe]=Lt(null),lt=tn({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[ft,An]=Lt(null),[Mn,Do]=Lt(null),[fn,K]=Lt(null),_e=nd(),ot=tn(a);ot.current=a;let qt=kn(y=>{let w=ot.current;if(!w||w.size===0)return!1;for(let H of w.keys())try{if(y.matches(H))return!0}catch{}return!1},[]),To=tn(e);To.current=e;let rn=tn(b);rn.current=b,Gn(()=>{if(!b?.domEdit)return;let y=null,w=()=>{ie(H=>{if(!H?.domEdit)return H;let{textNode:h,targetElement:R,rect:T}=H.domEdit;if(!h.isConnected||!R.isConnected)return H;let F=su(h,R);return Jm(T,F)?H:{...H,point:{x:F.left+window.scrollX,y:F.top+window.scrollY},domEdit:{...H.domEdit,rect:F}}}),y=window.requestAnimationFrame(w)};return y=window.requestAnimationFrame(w),()=>{y!==null&&window.cancelAnimationFrame(y)}},[b?.domEdit?.textNode]),Gn(()=>{(e.activeTool!=="text"||b)&&we(null)},[e.activeTool,b]);let Vt=tn([]),ci=tn(n);ci.current=n;let[gt,so]=Lt(null),Kn=e.selectedAnnotationIds;Vt.current=Kn;let lr=kn((y,w=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:y,addToSelection:w}})},[t]),jo=kn(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[ao,xr]=Lt(null),So=tn({x:window.scrollX,y:window.scrollY}),uo=tn(null),po=tn(null),[Pn,di]=Lt(So.current);Gn(()=>(ee(),window.addEventListener("resize",ee),()=>window.removeEventListener("resize",ee)),[ee]),Gn(()=>{b&&!b.domEdit?localStorage.setItem(El,JSON.stringify(b)):localStorage.removeItem(El)},[b]),od(b,ie,ve,e.annotations,t);let ui=tn(Q);ui.current=Q,Gn(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let y=w=>{if(!w.altKey||!ui.current)return;w.preventDefault();let H=w.deltaY>0?-1:1;Oe.current=Math.max(0,Oe.current+H);let h=He.current;if(h){let R=Ts(h,Oe.current);Ie(R)}};return window.addEventListener("wheel",y,{passive:!1}),()=>window.removeEventListener("wheel",y)},[e.activeTool,e.isAnnotating]),Gn(()=>{e.activeTool!=="model"&&(Ie(null),We(new Map),Oe.current=0,He.current=null)},[e.activeTool]),Gn(()=>{let y=Q?.name??null,w=y&&m?.has(y)?y:null;f?.(w)},[Q,m,f]);let[cr,Br]=Lt(null);Gn(()=>{if(!E){Br(null);return}let y=vi(E.name),w=E.instanceIndex;Br(y[w%y.length]??null)},[E]);let[_,W]=Lt([]);Gn(()=>{if(!x){W([]);return}x.token?.bindings?.length?W(Ia(x.token)):W(Ta(x.px))},[x]);let de=tn(null),be=tn(null);de.current=pn,be.current=Xt,Gn(()=>{let y=["flex-start","center","flex-end"],w=["flex-start","center","flex-end"],h=null,R=!1,T=null,F=null,k=(Se,st)=>{let rt=wr(Se,st);for(;rt&&rt!==document.documentElement;){let Tn=window.getComputedStyle(rt).display;if(Tn==="flex"||Tn==="inline-flex")return rt;rt=rt.parentElement}return null},N=Se=>{let st=window.getComputedStyle(Se).flexDirection;return st==="column"||st==="column-reverse"?"vertical":"horizontal"},Y=Se=>{let st=Se.getAttribute("data-pm");return st||(st=Math.random().toString(36).substring(2,8),Se.setAttribute("data-pm",st)),{selector:`[data-pm="${st}"]`,durableSelector:mn(Se)}},$=()=>{R=!0,h&&clearTimeout(h),h=setTimeout(()=>{R=!1,h=null},300)},X=(Se,st,cn)=>{let rt=N(Se);if(st===rt){let lo=window.getComputedStyle(Se).justifyContent,Gt=lo==="normal"||lo==="flex-start"||lo==="start"?"flex-start":lo==="flex-end"||lo==="end"?"flex-end":lo==="center"?"center":null;if(!Gt)return;let Hr=y.indexOf(Gt)+cn;if(Hr<0||Hr>=y.length)return;let fr=y[Hr],{selector:Fr,durableSelector:ya}=Y(Se);ut(Se,"justify-content",fr),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Fr,durableSelector:ya,element:Hn(Se),changes:[{property:"justify-content",original:lo,modified:fr}]}})}else{let lo=window.getComputedStyle(Se).flexDirection,Gt=rt==="horizontal"?"column":"row",{selector:pr,durableSelector:Hr}=Y(Se);ut(Se,"flex-direction",Gt),t({type:"MODIFY_STYLES_BATCH",payload:{selector:pr,durableSelector:Hr,element:Hn(Se),changes:[{property:"flex-direction",original:lo,modified:Gt}]}})}I(Tn=>Tn+1)},te=(Se,st,cn)=>{let Tn=N(Se)==="horizontal"?"vertical":"horizontal";if(st!==Tn)return;let Gt=window.getComputedStyle(Se).alignItems,pr=Gt==="normal"||Gt==="stretch"||Gt==="flex-start"||Gt==="start"?"flex-start":Gt==="flex-end"||Gt==="end"?"flex-end":Gt==="center"?"center":null;if(!pr)return;let fr=w.indexOf(pr)+cn;if(fr<0||fr>=w.length)return;let Fr=w[fr],{selector:ya,durableSelector:lp}=Y(Se);ut(Se,"align-items",Fr),t({type:"MODIFY_STYLES_BATCH",payload:{selector:ya,durableSelector:lp,element:Hn(Se),changes:[{property:"align-items",original:Gt,modified:Fr}]}}),I(cp=>cp+1)},q=20,Te=null,ze=null,dt=0,wt=(Se,st,cn)=>{let rt=k(st,cn);ne(rt?{modifier:Se,target:rt}:null)},yt=Se=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(Se.key==="Shift"&&!Se.altKey){let st=Ke.current;wt("shift",st.x,st.y)}else if(Se.key==="Alt"&&!Se.shiftKey){let st=Ke.current;wt("alt",st.x,st.y)}}},Ot=Se=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let st=Se.shiftKey&&!Se.altKey,cn=Se.altKey&&!Se.shiftKey;if(!st&&!cn||Se.buttons!==0){Te=null,ze=null,dt=0,T=null,F=null,ne(null);return}if(T===null&&(T=Se.clientX,F=Se.clientY,wt(st?"shift":"alt",Se.clientX,Se.clientY)),R)return;Te===null&&(Te=Se.clientX,ze=Se.clientY,dt=0);let rt=Se.clientX-Te,Tn=Se.clientY-ze,lo=Math.abs(rt)>=Math.abs(Tn)?rt:Tn;if(Math.abs(lo)>3){let Fr=lo>0?1:-1;if(dt!==0&&Fr!==dt){Te=Se.clientX,ze=Se.clientY,dt=0;return}dt=Fr}if(Math.abs(rt)<q&&Math.abs(Tn)<q)return;let Gt=k(T,F);if(!Gt)return;let pr=Math.abs(rt)>=Math.abs(Tn)?"horizontal":"vertical",fr=(pr==="horizontal"?rt:Tn)>0?1:-1;Te=null,ze=null,dt=0,st?X(Gt,pr,fr):te(Gt,pr,fr),$()},Tt=Se=>{(Se.key==="Shift"||Se.key==="Alt")&&(T=null,F=null,Te=null,ze=null,dt=0,ne(null))},Pt=()=>{ne(null),Te=null,ze=null,dt=0};return window.addEventListener("keydown",yt),window.addEventListener("mousemove",Ot),window.addEventListener("mousedown",Pt),window.addEventListener("keyup",Tt),()=>{window.removeEventListener("keydown",yt),window.removeEventListener("mousemove",Ot),window.removeEventListener("mousedown",Pt),window.removeEventListener("keyup",Tt),h&&clearTimeout(h)}},[e.activeTool,e.isAnnotating,t]),Gn(()=>{let y=w=>{if(w.key==="Escape"){if(rn.current)return;if(e.activeTool==="model"&&mt.size>0){w.preventDefault(),We(new Map);return}if(Vt.current.length>0){w.preventDefault(),jo();return}}if(w.key==="Enter"&&e.activeTool==="model"&&mt.size>0&&d){w.preventDefault();let T=[...mt.keys()].filter(F=>!m?.has(F));T.length>0&&d(T),We(new Map);return}if((w.metaKey||w.ctrlKey)&&w.key.toLowerCase()==="c"&&e.activeTool==="hand"&&At&&!rn.current){if(qs(At)){w.preventDefault();let T=hr(At);Me.current={source:At,sourceSelector:T,sourceDurableSelector:mn(At),sourceElement:{...Hn(At),selector:T}}}return}if((w.metaKey||w.ctrlKey)&&w.key.toLowerCase()==="v"&&e.activeTool==="hand"&&Me.current&&!rn.current){let T=Me.current,F=At&&qs(At)?At:T.source,k=F.parentElement;if(k){w.preventDefault();let N=mn(k),Y=hr(k),$=mn(F),X=hr(F),te=Ml(F)+1,q=T.source.cloneNode(!0);if(q instanceof Element){nu(q),Cl(k,q,te);let Te=hr(q),ze=mn(q),dt={...Hn(q),selector:Te};t({type:"MODIFY_DOM_STRUCTURE",payload:{id:yi(),operation:"copy",selector:Te,durableSelector:ze,element:dt,sourceSelector:T.sourceSelector,sourceDurableSelector:T.sourceDurableSelector,sourceElement:T.sourceElement,targetParentSelector:Y,targetParentDurableSelector:N,targetIndex:te,referenceSelector:X,referenceDurableSelector:$,placement:"after",pathname:se}})}}return}if((w.metaKey||w.ctrlKey)&&w.key==="v"&&Ge.current.length>0&&!rn.current){w.preventDefault(),Ze.current++;let T=Ze.current*20,k=Ge.current[0]?.groupId?Math.random().toString(36).substring(2,9):void 0,N=Ge.current.map($=>({...$,id:Math.random().toString(36).substring(2,9),groupId:$.groupId?k:void 0,timestamp:Date.now(),points:$.points.map(X=>({x:X.x+T,y:X.y+T}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:N}});let Y=N.find($=>$.type!=="text")||N[0];Y&&lr(Y.id);return}let H=Vt.current;if(H.length===0||rn.current)return;let h=w.composedPath?.()[0]??w.target,R=h?.tagName;if(!(R==="INPUT"||R==="TEXTAREA"||h?.isContentEditable)&&(w.key==="Delete"||w.key==="Backspace")){if(w.preventDefault(),u){let T=To.current.annotations;for(let F of H){let k=T.find(Y=>Y.id===F);if(!k)continue;let N=k.threadId||k.groupId&&T.find(Y=>Y.groupId===k.groupId&&Y.threadId)?.threadId;N&&u(N)}}for(let T of H)t({type:"DELETE_ANNOTATION",payload:{id:T}});jo()}};return window.addEventListener("keydown",y),()=>window.removeEventListener("keydown",y)},[t,jo,lr,e.activeTool,At,mt,m,d,u,se]);let ye=Pi(()=>e.annotations.filter(y=>!y.pathname||y.pathname===se),[e.annotations,se]),Ae=Pi(()=>e.styleModifications.filter(y=>!y.pathname||y.pathname===se),[e.styleModifications,se]),je=zm(A?.current),ct=je.avoidTop,Zt=je.avoidBottom,Xe=je.avoidLeft,gn=je.avoidRight,sn=Pi(()=>Ns(e.annotations),[e.annotations]),Ct=Pi(()=>{let y=new Map,w=new Set,H=1,h=[...e.annotations].sort((R,T)=>R.timestamp-T.timestamp);for(let R of h)if(!sn.has(R))if(R.groupId){if(!w.has(R.groupId)){w.add(R.groupId);let T=e.annotations.filter(F=>F.groupId===R.groupId);for(let F of T)y.set(F.id,H);H++}}else y.set(R.id,H),H++;return y},[e.annotations,sn]),Bn=Pi(()=>{if(Kn.length===0)return null;let y=new Map;for(let w of Kn){let H=e.annotations.find(R=>R.id===w);if(!H)continue;let h=H.groupId?e.annotations.filter(R=>R.groupId===H.groupId):[H];for(let R of h)if(R.linkedSelector&&!a?.has(R.linkedSelector)){let T=R.color||e.activeColor;y.set(R.linkedSelector,T)}}return y.size>0?y:null},[Kn,e.annotations,e.activeColor,a]),Xn=Pi(()=>ye.filter(y=>!(sn.has(y)||b&&!b.isNew&&y.id===b.id)),[ye,sn,b]),qn=kn((y=So.current)=>{U(Xn,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,Kn,tu,y.x,y.y,Ct,S,je)},[Xn,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,Kn,U,Ct,S,ct,Zt,Xe,gn]);Gn(()=>{qn(So.current)},[qn]),Gn(()=>{let y=()=>{let w={x:window.scrollX,y:window.scrollY};So.current=w,uo.current===null&&(uo.current=window.requestAnimationFrame(()=>{uo.current=null;let H=So.current;if(qn(H),rn.current){di(h=>h.x===H.x&&h.y===H.y?h:H);return}po.current!==null&&window.clearTimeout(po.current),po.current=window.setTimeout(()=>{po.current=null;let h=So.current;di(R=>R.x===h.x&&R.y===h.y?R:h)},80)}))};return window.addEventListener("scroll",y,{passive:!0}),()=>{window.removeEventListener("scroll",y),uo.current!==null&&(window.cancelAnimationFrame(uo.current),uo.current=null),po.current!==null&&(window.clearTimeout(po.current),po.current=null)}},[qn]),Gn(()=>{if(Ue){let y=Math.random().toString(36).substring(2,9);ie({id:y,point:Ue.point,text:"",fontSize:12,isNew:!0,groupId:Ue.groupId}),V(null)}},[Ue]),Gn(()=>{P&&(ie({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}),J(null))},[P]);let Vo=tn(null),fo=b?.id??null;Gn(()=>{fo&&ke.current?requestAnimationFrame(()=>{let y=ke.current;if(!y||(y.focus(),De.current===fo))return;De.current=fo;let w=rn.current;if(w){if(w.domEdit){y.setSelectionRange(0,y.value.length);return}if(Vo.current!==null){let H=Math.min(Vo.current,y.value.length);y.setSelectionRange(H,H);return}if(!w.isNew&&w.clickPoint){let H=C.current;if(!H)return;let h=H.getContext("2d");if(!h)return;h.font=`${w.fontSize}px ${Wn}`;let R=w.fontSize*1.4,T=w.text.split(`
|
|
26
|
-
`),F=w.clickPoint.y-w.point.y,k=Math.max(0,Math.min(T.length-1,Math.floor(F/R))),N=w.clickPoint.x-w.point.x,Y=T[k]||"",$=0;for(let te=0;te<=Y.length;te++){let q=h.measureText(Y.substring(0,te)).width;if(q>N){let Te=te>0?h.measureText(Y.substring(0,te-1)).width:0;$=N-Te<q-N?te-1:te;break}$=te}let X=$;for(let te=0;te<k;te++)X+=(T[te]?.length||0)+1;y.setSelectionRange(X,X)}}}):(De.current=null,Vo.current=null)},[fo,C]);let Qn=kn(y=>{let w=C.current;if(!w)return{x:0,y:0};let H=w.getBoundingClientRect(),h,R;if("touches"in y&&y.touches[0])h=y.touches[0].clientX,R=y.touches[0].clientY;else if("clientX"in y)h=y.clientX,R=y.clientY;else return{x:0,y:0};return{x:h-H.left+window.scrollX,y:R-H.top+window.scrollY}},[C]),dr=kn((y,w,H,h)=>{let R=H.x-w.x,T=H.y-w.y,F=R*R+T*T;if(F===0)return Math.sqrt((y.x-w.x)**2+(y.y-w.y)**2)<=h;let k=Math.max(0,Math.min(1,((y.x-w.x)*R+(y.y-w.y)*T)/F)),N=w.x+k*R,Y=w.y+k*T;return Math.sqrt((y.x-N)**2+(y.y-Y)**2)<=h},[]),pi=kn(y=>{for(let H=ye.length-1;H>=0;H--){let h=ye[H];if(!h||sn.has(h))continue;let R=(h.strokeWidth||3)+4;switch(h.type){case"text":{if(!h.points[0]||!h.text)continue;let T=h.points[0],F=h.fontSize||12,k=C.current;if(k){let N=k.getContext("2d");if(N){N.font=`${F}px ${Wn}`;let Y=h.text.replace(/\n/g," "),$=T.x-Pn.x,X=Yi($),te=Ui(N,Y,X),q=N.measureText(te).width,Te=F*1.4,ze={x:T.x-Pn.x,y:T.y-Pn.y},dt=$a(ze,F,je,q+8),wt={x:dt.x+Pn.x,y:dt.y+Pn.y};if(y.x>=wt.x-4-4&&y.x<=wt.x+q+4+4&&y.y>=wt.y-4-4&&y.y<=wt.y+Te+4+4)return h}}break}case"rectangle":{if(h.points.length<2)continue;let T=h.points[0],F=h.points[h.points.length-1],k=Math.min(T.x,F.x),N=Math.max(T.x,F.x),Y=Math.min(T.y,F.y),$=Math.max(T.y,F.y),X=dr(y,{x:k,y:Y},{x:N,y:Y},R),te=dr(y,{x:k,y:$},{x:N,y:$},R),q=dr(y,{x:k,y:Y},{x:k,y:$},R),Te=dr(y,{x:N,y:Y},{x:N,y:$},R);if(X||te||q||Te)return h;break}case"circle":{if(h.points.length<2)continue;let T=h.points[0],F=h.points[h.points.length-1],k=(T.x+F.x)/2,N=(T.y+F.y)/2,Y=Math.abs(F.x-T.x)/2,$=Math.abs(F.y-T.y)/2,X=y.x-k,te=y.y-N,q=Math.sqrt((X/Y)**2+(te/$)**2);if(Math.abs(q-1)*Math.max(Y,$)<=R)return h;break}case"line":{if(h.points.length<2)continue;let T=h.points[0],F=h.points[h.points.length-1];if(dr(y,T,F,R))return h;break}case"freehand":{if(h.points.length<2)continue;for(let T=0;T<h.points.length-1;T++){let F=h.points[T],k=h.points[T+1];if(dr(y,F,k,R))return h}break}}}return null},[ye,C,dr,sn,Pn.x,Pn.y,ct,Zt,Xe,gn]),gs=kn(y=>{let w=pi(y);return w?.type==="text"?w:null},[pi]),zi=kn(y=>{if(Kn.length===0)return null;let w=tu/2+4;for(let H of Kn){let h=e.annotations.find(R=>R.id===H);if(!(!h||h.points.length<2)){if(h.type==="line"){let R=h.points[0],T=h.points[h.points.length-1];if(Math.sqrt((y.x-R.x)**2+(y.y-R.y)**2)<=w)return{handle:"start",annotationId:H};if(Math.sqrt((y.x-T.x)**2+(y.y-T.y)**2)<=w)return{handle:"end",annotationId:H};continue}if(h.type==="circle"){let R=h.points[0],T=h.points[h.points.length-1],F=Math.min(R.x,T.x),k=Math.max(R.x,T.x),N=Math.min(R.y,T.y),Y=Math.max(R.y,T.y),$=(F+k)/2,X=(N+Y)/2,te=[{handle:"top",x:$,y:N},{handle:"bottom",x:$,y:Y},{handle:"left",x:F,y:X},{handle:"right",x:k,y:X}];for(let{handle:q,x:Te,y:ze}of te)if(Math.sqrt((y.x-Te)**2+(y.y-ze)**2)<=w)return{handle:q,annotationId:H};continue}if(h.type==="rectangle"||h.type==="freehand"){let R=h.points[0],T=h.points[h.points.length-1],F,k,N,Y;h.type==="freehand"?(F=Math.min(...h.points.map(X=>X.x)),k=Math.max(...h.points.map(X=>X.x)),N=Math.min(...h.points.map(X=>X.y)),Y=Math.max(...h.points.map(X=>X.y))):(F=Math.min(R.x,T.x),k=Math.max(R.x,T.x),N=Math.min(R.y,T.y),Y=Math.max(R.y,T.y));let $=[{corner:"topLeft",x:F,y:N},{corner:"topRight",x:k,y:N},{corner:"bottomLeft",x:F,y:Y},{corner:"bottomRight",x:k,y:Y}];for(let{corner:X,x:te,y:q}of $)if(Math.sqrt((y.x-te)**2+(y.y-q)**2)<=w)return{handle:X,annotationId:H}}}}return null},[Kn,e.annotations]);Gn(()=>{let y=w=>{if(pe.current={x:w.clientX+window.scrollX,y:w.clientY+window.scrollY},!b){let H=gs(pe.current);ce(H?.id||null)}};return window.addEventListener("mousemove",y),()=>window.removeEventListener("mousemove",y)},[b,gs]);let M=kn(()=>{if(!b)return;if(b.domEdit){let w=b.text;w!==b.domEdit.originalText&&t({type:"MODIFY_TEXT_CONTENT",payload:{selector:b.domEdit.selector,durableSelector:b.domEdit.durableSelector,element:b.domEdit.element,textNodePath:b.domEdit.textNodePath,original:b.domEdit.originalText,modified:w}}),ie(null);return}let y=b.images?.length||0;if(b.text.trim()||y>0)if(b.isNew){let w=yi();t({type:"ADD_TEXT",payload:{point:b.point,text:b.text||(y>0?`[${y} image${y>1?"s":""}]`:""),fontSize:b.fontSize,id:w,groupId:b.groupId,linkedSelector:b.linkedSelector,linkedAnchor:b.linkedAnchor,elements:b.elements,...y>0?{imageCount:y}:{}}}),y>0&&b.images&&l&&l(w,b.images)}else t({type:"UPDATE_TEXT",payload:{id:b.id,text:b.text||(y>0?`[${y} image${y>1?"s":""}]`:""),...y>0?{imageCount:y}:{}}}),y>0&&b.images&&l&&l(b.id,b.images);else b.isNew||t({type:"DELETE_ANNOTATION",payload:{id:b.id}});ie(null)},[b,t,l]),z=kn((y,w,H)=>{let h=ru(y,w,C.current);if(!h)return null;let{textNode:R,targetElement:T,textNodePath:F,originalText:k,rect:N,styles:Y,fontSize:$}=h,X=T.getAttribute("data-pm");X||(X=Math.random().toString(36).substring(2,8),T.setAttribute("data-pm",X));let te=`[data-pm="${X}"]`,q=mn(T),Te={...Hn(T),selector:te};return{id:Math.random().toString(36).substring(2,9),point:{x:N.left+window.scrollX,y:N.top+window.scrollY},text:k,fontSize:$,isNew:!0,clickPoint:H,domEdit:{selector:te,durableSelector:q,element:Te,textNodePath:F,originalText:k,textNode:R,targetElement:T,rect:N,fontFamily:Y.fontFamily,fontWeight:Y.fontWeight,fontStyle:Y.fontStyle,lineHeight:Y.lineHeight==="normal"?`${Math.round($*1.2*10)/10}px`:Y.lineHeight,letterSpacing:Y.letterSpacing,color:Y.color,textTransform:Y.textTransform,textAlign:Y.textAlign,wordSpacing:Y.wordSpacing,textDecoration:Y.textDecoration,textShadow:Y.textShadow}}},[C]),re=kn(y=>{for(let w=0;w<wl.length-1;w++){let H=wl[w],h=wl[w+1];if(y<=(H+h)/2)return H;if(y<h)return h}return Math.round(y/8)*8},[]),me=kn((y,w,H,h)=>{let R=H.top+Math.max(h.top,4),T=H.bottom-Math.max(h.bottom,4),F=H.left+Math.max(h.left,4),k=H.right-Math.max(h.right,4);if(y<H.left||y>H.right||w<H.top||w>H.bottom)return null;let N=w<R,Y=w>T,$=y<F,X=y>k;return N&&$?h.top>=h.left?"top":"left":N&&X?h.top>=h.right?"top":"right":Y&&$?h.bottom>=h.left?"bottom":"left":Y&&X?h.bottom>=h.right?"bottom":"right":N?"top":Y?"bottom":$?"left":X?"right":null},[]),$e=kn(y=>{if(!e.isAnnotating)return;if(e.inspectedElement&&e.activeTool==="hand"&&!("button"in y&&y.button===2)){y.preventDefault(),y.stopPropagation(),t({type:"SELECT_ELEMENT",payload:null});return}let w=Qn(y),H="shiftKey"in y&&y.shiftKey;if(e.activeTool==="inspector"){if("button"in y&&y.button===2)return;if(Pe&&!qt(Pe)){let T=e.annotations.find(yt=>{if(!yt.linkedSelector||!yt.threadId)return!1;try{return Pe.matches(yt.linkedSelector)}catch{return!1}});if(T?.threadId&&c){c(T.threadId),requestAnimationFrame(()=>{document.querySelector("[data-popmelt-shadow-host]")?.shadowRoot?.querySelector("[data-popmelt-reply]")?.focus()});return}let F=Hn(Pe),k=mn(Pe),N=Pe.getBoundingClientRect(),Y=Pe.getAttribute("data-pm");Y||(Y=Math.random().toString(36).substring(2,8),Pe.setAttribute("data-pm",Y));let $=`[data-pm="${Y}"]`,X=Ae.some(yt=>{try{return Pe.matches(yt.selector)}catch{return!1}}),te=e.annotations.filter(yt=>{if(!yt.linkedSelector)return!1;try{return Pe.matches(yt.linkedSelector)}catch{return!1}}).length,q=(X?1:0)+te,Te=N.top>=Cr*(1+q)?"top-left":"bottom-left",ze=C.current?.getContext("2d")??document.createElement("canvas").getContext("2d"),dt;ze&&(ze.font=`12px ${Wn}`,dt=ze.measureText("Type here...").width);let wt=iu(N,Te,q,A?.current,dt,0);J({point:wt,linkedSelector:$,linkedAnchor:Te,elements:[{...F,selector:k}]})}return}if(e.activeTool==="model"){if("button"in y&&y.button===2)return;if(Q){let T=Q.name;if(m?.has(T)){p?.(T);return}"shiftKey"in y&&y.shiftKey?We(k=>{let N=new Map(k);return N.has(T)?N.delete(T):N.set(T,Q),N}):mt.size===1&&mt.has(T)?(d&&d([T]),We(new Map)):We(new Map([[T,Q]]))}return}if(e.activeTool==="hand"&&At&&qs(At)&&!pn&&!fe&&!ft&&!Dt){let T=At,F=hr(T),k=mn(T),N=Hn(T),Y="altKey"in y&&y.altKey;En.current={isDragging:!0,hasMoved:!1,mode:Y?"copy":"move",startX:w.x-window.scrollX,startY:w.y-window.scrollY,element:T,originalParent:T.parentElement,originalIndex:Ml(T),selector:F,durableSelector:k,elementInfo:{...N,selector:F}},y.preventDefault();return}if(e.activeTool==="hand"&&pn&&Xt){let T=pn,F=T.getAttribute("data-pm");F||(F=Math.random().toString(36).substring(2,8),T.setAttribute("data-pm",F));let k=mn(T),N=`[data-pm="${F}"]`,Y=Hn(T),$=Vr(T),X=w.x-window.scrollX,te=w.y-window.scrollY,q=Un,Te=window.getComputedStyle(T).justifyContent,ze=0;if(q){let wt=gr(T).find(yt=>yt.axis===Xt);ze=wt?Xt==="column"?wt.w:wt.h:0}ut(T,"transition","none"),Qt.current={isDragging:!0,hasMoved:!1,axis:Xt,startX:X,startY:te,originalRow:q?ze:$.row,originalColumn:q?ze:$.column,element:T,elementInfo:{...Y,selector:N},selector:N,durableSelector:k,isAuto:q,originalJustifyContent:Te,visualGap:ze},Yn({axis:Xt,row:q?ze:$.row,column:q?ze:$.column});return}if(e.activeTool==="hand"&&ft&&Mn){let T=ft,F=T.getAttribute("data-pm");F||(F=Math.random().toString(36).substring(2,8),T.setAttribute("data-pm",F));let k=`[data-pm="${F}"]`,N=Hn(T),{fontSize:Y,lineHeight:$}=Gi(T),X=Y>0?$/Y:1.2,te=w.x-window.scrollX,q=w.y-window.scrollY;ut(T,"transition","none");let Te=mn(T);lt.current={isDragging:!0,property:Mn,startX:te,startY:q,originalFontSize:Y,originalLineHeight:$,originalRatio:X,element:T,elementInfo:{...N,selector:k},selector:k,durableSelector:Te},K({property:Mn,fontSize:Y,lineHeight:$});return}if(e.activeTool==="hand"&&fe&&le){let T=fe,F=T.getAttribute("data-pm");F||(F=Math.random().toString(36).substring(2,8),T.setAttribute("data-pm",F));let k=`[data-pm="${F}"]`,N=mn(T),Y=Hn(T),$=Gr(T),X=T.getBoundingClientRect(),te=Math.floor(X.height/2),q=w.y-window.scrollY;ut(T,"transition","none"),ae.current={isDragging:!0,corner:le,startY:q,original:$,maxRadius:te,element:T,elementInfo:{...Y,selector:k},selector:k,durableSelector:N},Fe({corner:le,radius:{...$}});return}if(e.activeTool==="hand"&&At&&Dt){let T=At,F=T.getAttribute("data-pm");F||(F=Math.random().toString(36).substring(2,8),T.setAttribute("data-pm",F));let k=`[data-pm="${F}"]`,N=mn(T),Y=Hn(T),$=wi(T),X=w.x-window.scrollX,te=w.y-window.scrollY;ut(T,"transition","none"),Jn.current={isDragging:!0,side:Dt,startX:X,startY:te,original:$,element:T,elementInfo:{...Y,selector:k},selector:k,durableSelector:N},et({side:Dt,padding:{...$}});return}let h=zi(w);if(h){let T=e.annotations.find(F=>F.id===h.annotationId);if(T&&T.type!=="text"&&(T.status??"pending")==="pending"){xr({annotationId:h.annotationId,handle:h.handle,startPoint:w,originalPoints:[...T.points],hasMoved:!1});return}}let R=pi(w);if(R&&R.points[0]){if(b&&M(),R.type!=="text"?(lr(R.id,H),R.color&&t({type:"SET_COLOR",payload:R.color})):H||jo(),c){let T=R.threadId||(R.groupId?e.annotations.find(F=>F.groupId===R.groupId&&F.threadId)?.threadId:void 0);T&&c(T)}so({annotation:R,startPoint:w,hasMoved:!1});return}if(H||jo(),e.activeTool==="text"){b&&M();let T="touches"in y?y.touches[0]??y.changedTouches[0]:y;if(T){let k=z(T.clientX,T.clientY,w);if(k){ie(k);return}}let F=Math.random().toString(36).substring(2,9);ie({id:F,point:w,text:"",fontSize:12,isNew:!0});return}v(!0),t({type:"START_PATH",payload:w})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,b,Kn,Pe,At,Dt,fe,le,pn,Xt,Un,ft,Mn,Q,mt,m,d,p,c,Qn,pi,zi,t,lr,jo,M,z]),Ne=kn(y=>{let w=Qn(y);if(e.activeTool==="text"&&e.isAnnotating){let H="touches"in y?y.touches[0]??y.changedTouches[0]:y,h=H&&!rn.current?ru(H.clientX,H.clientY,C.current):null;we(R=>Vm(R,h)?R:h);return}if(e.activeTool==="inspector"&&e.isAnnotating){let H=w.x-window.scrollX,h=w.y-window.scrollY,R=wr(H,h),T=R&&qt(R)?null:R;T!==Pe&&(Et(T),Sn(T?Hn(T):null));return}if(e.activeTool==="model"&&e.isAnnotating){let H=w.x-window.scrollX,h=w.y-window.scrollY,R=wr(H,h);if(R!==He.current&&(He.current=R,Oe.current=0),R){let T=Ts(R,Oe.current);Ie(T)}else Ie(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let H=w.x-window.scrollX,h=w.y-window.scrollY;Ke.current={x:H,y:h},tt({x:H,y:h});let R=_e.current.cmd,T=_e.current.shift;if(En.current.isDragging){let k=En.current,N=k.element;if(!N)return;if(!k.hasMoved){let X=Math.abs(H-k.startX),te=Math.abs(h-k.startY);if(X<=3&&te<=3)return;k.hasMoved=!0}let Y=ou(H,h,N,C.current);if(!Y){Kt(null);return}let $=Y.reference.getBoundingClientRect();Kt({rect:$,placement:Y.placement,mode:k.mode});return}if(Qt.current.isDragging){let k=Qt.current,N=k.element;if(!N)return;if(!k.hasMoved){let te=Math.abs(H-k.startX),q=Math.abs(h-k.startY);if(te<=2&&q<=2)return;k.hasMoved=!0,k.isAuto&&(ut(N,"justify-content","normal"),ut(N,"row-gap",`${k.visualGap}px`),ut(N,"column-gap",`${k.visualGap}px`),Mt(!1))}let Y=k.axis,$=k.originalRow,X=k.originalColumn;if(Y==="column"){let te=H-k.startX;X=k.originalColumn+te,R||($=k.originalRow+te)}else{let te=h-k.startY;$=k.originalRow+te,R||(X=k.originalColumn+te)}$=Math.max(0,$),X=Math.max(0,X),T&&($=re($),X=re(X)),$=Math.round($),X=Math.round(X),ut(N,"row-gap",`${$}px`),ut(N,"column-gap",`${X}px`),Yn({axis:Y,row:$,column:X});return}if(ae.current.isDragging){let k=ae.current,N=k.element;if(!N)return;let Y=h-k.startY,$=k.corner,X=k.original,te={...X};if(R){let q=X[$]+Y;q=Math.max(0,Math.min(k.maxRadius,q)),T&&(q=re(q)),q=Math.round(q),te[$]=q}else{let q=X[$]+Y;q=Math.max(0,Math.min(k.maxRadius,q)),T&&(q=re(q)),q=Math.round(q),te={"top-left":q,"top-right":q,"bottom-right":q,"bottom-left":q}}ut(N,"border-top-left-radius",`${te["top-left"]}px`),ut(N,"border-top-right-radius",`${te["top-right"]}px`),ut(N,"border-bottom-right-radius",`${te["bottom-right"]}px`),ut(N,"border-bottom-left-radius",`${te["bottom-left"]}px`),Fe({corner:$,radius:te});return}if(lt.current.isDragging){let k=lt.current,N=k.element;if(!N)return;let Y=k.property,$=k.originalFontSize,X=k.originalLineHeight,te=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(Y==="font-size"){let Te=H-k.startX;$=k.originalFontSize+Te,$=Math.max(1,$)}else{let Te=h-k.startY;X=k.originalLineHeight+Te,X=Math.max($,X)}if(T)if(Y==="font-size"){let Te=te[0],ze=Math.abs($-Te);for(let dt of te){let wt=Math.abs($-dt);wt<ze&&(Te=dt,ze=wt)}$=Te}else{let Te=$>0?X/$:1.2,ze=Math.round(Te*2)/2;X=$*Math.max(1,ze)}$=Math.round($),X=Math.round(X*10)/10,ut(N,"font-size",`${$}px`);let q=$>0?Math.round(X/$*1e3)/1e3:1.2;ut(N,"line-height",`${q}`),K({property:Y,fontSize:$,lineHeight:X});return}if(Jn.current.isDragging){let k=Jn.current,N=k.element;if(!N)return;let Y=k.side,$=k.original,X=$.top,te=$.right,q=$.bottom,Te=$.left;if(Y==="top"){let ze=k.startY-h;X=$.top+ze,R||(q=$.bottom+ze)}else if(Y==="bottom"){let ze=h-k.startY;q=$.bottom+ze,R||(X=$.top+ze)}else if(Y==="left"){let ze=k.startX-H;Te=$.left+ze,R||(te=$.right+ze)}else if(Y==="right"){let ze=H-k.startX;te=$.right+ze,R||(Te=$.left+ze)}X=Math.max(0,X),te=Math.max(0,te),q=Math.max(0,q),Te=Math.max(0,Te),T&&(X=re(X),te=re(te),q=re(q),Te=re(Te)),X=Math.round(X),te=Math.round(te),q=Math.round(q),Te=Math.round(Te),ut(N,"padding",`${X}px ${te}px ${q}px ${Te}px`),et({side:Y,padding:{top:X,right:te,bottom:q,left:Te}});return}let F=wr(H,h);for(;F&&F.tagName==="A";)F=F.parentElement;{let N=[];F&&N.push(F),fe&&fe!==F&&N.push(fe);let Y=null,$=16,X=null;for(let te of N){let q=te.getBoundingClientRect(),Te=Gr(te),ze=[["top-left",q.left,q.top+Te["top-left"]],["top-right",q.right,q.top+Te["top-right"]],["bottom-right",q.right,q.bottom-Te["bottom-right"]],["bottom-left",q.left,q.bottom-Te["bottom-left"]]];for(let[dt,wt,yt]of ze){let Ot=Math.hypot(H-wt,h-yt);Ot<$&&($=Ot,Y=dt,X=te)}}if(Y&&X){ge(X),Ce(Y),At&&at(null),Dt&&un(null),pn&&Cn(null),Xt&&Wt(null),Mt(!1),ft&&An(null),Mn&&Do(null);return}}fe&&ge(null),le&&Ce(null);{let k=[];F&&Rs(F)&&k.push(F);let N=F?.parentElement??null;for(;N&&N!==document.body&&k.length<3;)Rs(N)&&k.push(N),N=N.parentElement;for(let Y of k){let X=gr(Y).find(te=>H>=te.x&&H<=te.x+te.w&&h>=te.y&&h<=te.y+te.h);if(X){Cn(Y),Wt(X.axis),Mt(La(Y,X.axis)),At&&at(null),Dt&&un(null),ft&&An(null),Mn&&Do(null);return}}}pn&&Cn(null),Xt&&Wt(null),Mt(!1);{let N=[];F&&N.push(F),ft&&ft!==F&&N.push(ft);let Y=null,$=1/0,X=null;for(let te of N){if(!Aa(te))continue;let q=Ei(te);if(!q)continue;let Te=H>=q.left&&H<=q.right&&h>=q.top&&h<=q.bottom,ze=[["font-size",q.right,q.top+q.height/2],["line-height",q.left+q.width/2,q.bottom]];for(let[dt,wt,yt]of ze){let Ot=Math.hypot(H-wt,h-yt);(Te||Ot<12)&&Ot<$&&($=Ot,Y=dt,X=te)}}Y&&X?(An(X),Do(Y)):(ft&&An(null),Mn&&Do(null))}if(F!==At&&at(F),F){let k=wi(F),N=F.getBoundingClientRect(),Y=me(H,h,N,k);un(Y)}else un(null);return}if(ao){let{handle:H,originalPoints:h,hasMoved:R}=ao,T=e.annotations.find($=>$.id===ao.annotationId);if(!T)return;let F="metaKey"in y,k=F&&(y.metaKey||y.ctrlKey),N=F&&y.shiftKey,Y;if(T.type==="line"){let $=h[0],X=h[h.length-1];H==="start"?Y=[w,X]:Y=[$,w]}else if(T.type==="freehand"){let $=Math.min(...h.map(rt=>rt.x)),X=Math.max(...h.map(rt=>rt.x)),te=Math.min(...h.map(rt=>rt.y)),q=Math.max(...h.map(rt=>rt.y)),Te=($+X)/2,ze=(te+q)/2,dt=X-$||1,wt=q-te||1,yt=dt/wt,Ot=$,Tt=X,Pt=te,Se=q;switch(H){case"topLeft":Ot=w.x,Pt=w.y;break;case"topRight":Tt=w.x,Pt=w.y;break;case"bottomLeft":Ot=w.x,Se=w.y;break;case"bottomRight":Tt=w.x,Se=w.y;break}if(k)switch(H){case"topLeft":Tt=X+($-Ot),Se=q+(te-Pt);break;case"topRight":Ot=$-(Tt-X),Se=q+(te-Pt);break;case"bottomLeft":Tt=X+($-Ot),Pt=te-(Se-q);break;case"bottomRight":Ot=$-(Tt-X),Pt=te-(Se-q);break}if(N){let rt=Tt-Ot,Tn=Se-Pt;if(Math.abs(rt/Tn)>yt){let Gt=Math.abs(Tn)*yt*Math.sign(rt);H==="topLeft"||H==="bottomLeft"?Ot=Tt-Gt:Tt=Ot+Gt}else{let Gt=Math.abs(rt)/yt*Math.sign(Tn);H==="topLeft"||H==="topRight"?Pt=Se-Gt:Se=Pt+Gt}}let st=Tt-Ot||1,cn=Se-Pt||1;Y=h.map(rt=>({x:Ot+(rt.x-$)/dt*st,y:Pt+(rt.y-te)/wt*cn}))}else if(T.type==="circle"){let $=h[0],X=h[h.length-1],te=Math.min($.x,X.x),q=Math.max($.x,X.x),Te=Math.min($.y,X.y),ze=Math.max($.y,X.y),dt=(te+q)/2,wt=(Te+ze)/2,yt=q-te,Ot=ze-Te,Tt=te,Pt=q,Se=Te,st=ze;switch(H){case"top":if(Se=w.y,k&&(st=wt+(wt-w.y)),N){let rt=(st-Se)*(yt/Ot)/2;Tt=dt-rt,Pt=dt+rt}break;case"bottom":if(st=w.y,k&&(Se=wt-(w.y-wt)),N){let rt=(st-Se)*(yt/Ot)/2;Tt=dt-rt,Pt=dt+rt}break;case"left":if(Tt=w.x,k&&(Pt=dt+(dt-w.x)),N){let rt=(Pt-Tt)*(Ot/yt)/2;Se=wt-rt,st=wt+rt}break;case"right":if(Pt=w.x,k&&(Tt=dt-(w.x-dt)),N){let rt=(Pt-Tt)*(Ot/yt)/2;Se=wt-rt,st=wt+rt}break}Y=[{x:Tt,y:Se},{x:Pt,y:st}]}else{let $=h[0],X=h[h.length-1],te=Math.min($.x,X.x),q=Math.max($.x,X.x),Te=Math.min($.y,X.y),ze=Math.max($.y,X.y),dt=(te+q)/2,wt=(Te+ze)/2,yt=q-te||1,Ot=ze-Te||1,Tt=yt/Ot,Pt=te,Se=q,st=Te,cn=ze;switch(H){case"topLeft":Pt=w.x,st=w.y;break;case"topRight":Se=w.x,st=w.y;break;case"bottomLeft":Pt=w.x,cn=w.y;break;case"bottomRight":Se=w.x,cn=w.y;break}if(k)switch(H){case"topLeft":Se=q+(te-Pt),cn=ze+(Te-st);break;case"topRight":Pt=te-(Se-q),cn=ze+(Te-st);break;case"bottomLeft":Se=q+(te-Pt),st=Te-(cn-ze);break;case"bottomRight":Pt=te-(Se-q),st=Te-(cn-ze);break}if(N){let rt=Se-Pt,Tn=cn-st;if(Math.abs(rt/Tn)>Tt){let Gt=Math.abs(Tn)*Tt*Math.sign(rt);H==="topLeft"||H==="bottomLeft"?Pt=Se-Gt:Se=Pt+Gt}else{let Gt=Math.abs(rt)/Tt*Math.sign(Tn);H==="topLeft"||H==="topRight"?st=cn-Gt:cn=st+Gt}}Y=[{x:Pt,y:st},{x:Se,y:cn}]}t({type:"RESIZE_ANNOTATION",payload:{id:ao.annotationId,points:Y,saveUndo:!R}}),R||xr({...ao,hasMoved:!0});return}if(gt&&(gt.annotation.status??"pending")==="pending"){let H=w.x-gt.startPoint.x,h=w.y-gt.startPoint.y;if((Math.abs(H)>2||Math.abs(h)>2)&&!gt.hasMoved)so({...gt,hasMoved:!0,startPoint:w}),t({type:"MOVE_ANNOTATION",payload:{id:gt.annotation.id,delta:{x:H,y:h},saveUndo:!0}});else if(gt.hasMoved){let T=w.x-gt.startPoint.x,F=w.y-gt.startPoint.y;so({...gt,startPoint:w}),t({type:"MOVE_ANNOTATION",payload:{id:gt.annotation.id,delta:{x:T,y:F}}})}return}!g||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:w})},[g,e.isAnnotating,e.activeTool,gt,ao,Pe,At,Dt,fe,le,pn,Xt,ft,Mn,Qn,t,re,me,C]),Ve=kn(y=>{if(En.current.isDragging){let h=En.current,R=Qn(y),T=R.x-window.scrollX,F=R.y-window.scrollY,k=h.element,N=k?ou(T,F,k,C.current):null;if(k&&N&&h.selector&&h.durableSelector&&h.elementInfo){let Y=N.index,$=h.originalParent===N.parent&&Y>h.originalIndex?Y-1:Y;if(!(h.mode==="move"&&h.originalParent===N.parent&&($===h.originalIndex||$===h.originalIndex+1))){let te=mn(N.parent),q=hr(N.parent),Te=mn(N.reference),ze=hr(N.reference),dt=k,wt=h.selector,yt=h.durableSelector,Ot=h.elementInfo;if(h.mode==="copy"){let Tt=k.cloneNode(!0);Tt instanceof Element&&(nu(Tt),Cl(N.parent,Tt,$),wt=hr(Tt),yt=mn(Tt),Ot={...Hn(Tt),selector:wt},dt=Tt)}else Cl(N.parent,k,$),dt=k;if(dt){let Tt=h.originalParent,Pt=Tt?mn(Tt):void 0,Se=Tt?hr(Tt):void 0,st={id:yi(),operation:h.mode,selector:wt,durableSelector:yt,element:Ot,sourceSelector:h.mode==="copy"?h.selector:void 0,sourceDurableSelector:h.mode==="copy"?h.durableSelector:void 0,sourceElement:h.mode==="copy"?h.elementInfo:void 0,originalParentSelector:Se,originalParentDurableSelector:Pt,originalIndex:h.originalIndex,targetParentSelector:q,targetParentDurableSelector:te,targetIndex:$,referenceSelector:ze,referenceDurableSelector:Te,placement:N.placement,pathname:se};t({type:"MODIFY_DOM_STRUCTURE",payload:st})}}}En.current={isDragging:!1,hasMoved:!1,mode:"move",startX:0,startY:0,element:null,originalParent:null,originalIndex:-1,selector:null,durableSelector:null,elementInfo:null},Kt(null);return}if(lt.current.isDragging){let h=lt.current,R=h.element;if(R&&h.selector&&h.elementInfo&&fn){R instanceof HTMLElement&&(R.style.removeProperty("font-size"),R.style.removeProperty("line-height"),R.style.removeProperty("transition"));let T=[];if(h.originalFontSize!==fn.fontSize&&(ut(R,"font-size",`${fn.fontSize}px`),T.push({property:"font-size",original:`${h.originalFontSize}px`,modified:`${fn.fontSize}px`})),h.originalLineHeight!==fn.lineHeight){let F=h.originalFontSize>0?Math.round(h.originalLineHeight/h.originalFontSize*1e3)/1e3:1.2,k=fn.fontSize>0?Math.round(fn.lineHeight/fn.fontSize*1e3)/1e3:1.2;ut(R,"line-height",`${k}`),T.push({property:"line-height",original:`${F}`,modified:`${k}`})}T.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:h.selector,durableSelector:h.durableSelector??void 0,element:h.elementInfo,changes:T}})}lt.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},K(null);return}if(Qt.current.isDragging){let h=Qt.current,R=h.element,T="button"in y&&y.button===2;if(!h.hasMoved&&!T&&R&&h.selector&&h.elementInfo){R instanceof HTMLElement&&R.style.removeProperty("transition");let F=["space-between","space-around","stretch","normal"],k=h.originalJustifyContent||"normal",N=F.indexOf(k),Y=F[(N+1)%F.length],$=[];Y==="normal"?(ut(R,"justify-content","normal"),$.push({property:"justify-content",original:h.originalJustifyContent,modified:"normal"})):Y==="stretch"?(ut(R,"justify-content",Y),ut(R,"row-gap","8px"),ut(R,"column-gap","8px"),$.push({property:"justify-content",original:h.originalJustifyContent||"normal",modified:Y}),h.originalRow!==8&&$.push({property:"row-gap",original:`${h.originalRow}px`,modified:"8px"}),h.originalColumn!==8&&$.push({property:"column-gap",original:`${h.originalColumn}px`,modified:"8px"})):(R instanceof HTMLElement&&(R.style.removeProperty("row-gap"),R.style.removeProperty("column-gap")),ut(R,"justify-content",Y),$.push({property:"justify-content",original:h.originalJustifyContent||"normal",modified:Y}),h.originalRow>0&&$.push({property:"row-gap",original:`${h.originalRow}px`,modified:"0px"}),h.originalColumn>0&&$.push({property:"column-gap",original:`${h.originalColumn}px`,modified:"0px"})),$.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:h.selector,durableSelector:h.durableSelector??void 0,element:h.elementInfo,changes:$}})}else if(h.hasMoved&&R&&h.selector&&h.elementInfo&&jt){R instanceof HTMLElement&&(R.style.removeProperty("row-gap"),R.style.removeProperty("column-gap"),R.style.removeProperty("transition"));let F=[];h.isAuto?(R instanceof HTMLElement&&R.style.removeProperty("justify-content"),ut(R,"justify-content","normal"),ut(R,"row-gap",`${jt.row}px`),ut(R,"column-gap",`${jt.column}px`),F.push({property:"justify-content",original:h.originalJustifyContent,modified:"normal"}),F.push({property:"row-gap",original:"0px",modified:`${jt.row}px`}),F.push({property:"column-gap",original:"0px",modified:`${jt.column}px`})):(h.originalRow!==jt.row&&(ut(R,"row-gap",`${jt.row}px`),F.push({property:"row-gap",original:`${h.originalRow}px`,modified:`${jt.row}px`})),h.originalColumn!==jt.column&&(ut(R,"column-gap",`${jt.column}px`),F.push({property:"column-gap",original:`${h.originalColumn}px`,modified:`${jt.column}px`}))),F.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:h.selector,durableSelector:h.durableSelector??void 0,element:h.elementInfo,changes:F}})}Qt.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},Yn(null);return}if(ae.current.isDragging){let h=ae.current,R=h.element;if(R&&h.selector&&h.elementInfo&&pt){R instanceof HTMLElement&&(R.style.removeProperty("border-top-left-radius"),R.style.removeProperty("border-top-right-radius"),R.style.removeProperty("border-bottom-right-radius"),R.style.removeProperty("border-bottom-left-radius"),R.style.removeProperty("transition"));let T=["top-left","top-right","bottom-right","bottom-left"],F={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},k=[];for(let N of T)h.original[N]!==pt.radius[N]&&(ut(R,F[N],`${pt.radius[N]}px`),k.push({property:F[N],original:`${h.original[N]}px`,modified:`${pt.radius[N]}px`}));k.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:h.selector,durableSelector:h.durableSelector??void 0,element:h.elementInfo,changes:k}})}ae.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},Fe(null);return}if(Jn.current.isDragging){let h=Jn.current,R=h.element,T=h.selector,F=h.elementInfo;if(R&&T&&F&&Re){let k=h.original,N=Re.padding;R instanceof HTMLElement&&(R.style.removeProperty("padding"),R.style.removeProperty("transition"));let Y=[],$=[{prop:"padding-top",origVal:k.top,newVal:N.top},{prop:"padding-right",origVal:k.right,newVal:N.right},{prop:"padding-bottom",origVal:k.bottom,newVal:N.bottom},{prop:"padding-left",origVal:k.left,newVal:N.left}];for(let{prop:X,origVal:te,newVal:q}of $)te!==q&&(ut(R,X,`${q}px`),Y.push({property:X,original:`${te}px`,modified:`${q}px`}));Y.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:T,durableSelector:h.durableSelector??void 0,element:F,changes:Y}})}Jn.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},et(null);return}if(ao){xr(null);return}if(gt){if(!gt.hasMoved&>.annotation.type==="text"&&(gt.annotation.status??"pending")==="pending"){let h=Qn(y);ie({id:gt.annotation.id,point:gt.annotation.points[0],text:gt.annotation.text||"",fontSize:gt.annotation.fontSize||12,isNew:!1,clickPoint:h,groupId:gt.annotation.groupId})}so(null);return}if(!g)return;let w=5;if(e.currentPath.length>=2){let h=e.currentPath[0],R=e.currentPath[e.currentPath.length-1],T=Math.abs(R.x-h.x),F=Math.abs(R.y-h.y);if((e.activeTool==="line"?Math.sqrt(T*T+F*F)<w:T<w&&F<w)&&["rectangle","circle","line"].includes(e.activeTool)){v(!1),t({type:"CANCEL_PATH"});return}}let H=Ma(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let h=e.currentPath[0],R=e.currentPath[e.currentPath.length-1],T=Math.min(h.x,R.x),F=Math.max(h.y,R.y),k=e.strokeWidth/2,N=Math.random().toString(36).substring(2,9);V({point:{x:T-k+4,y:F+k+4},groupId:N}),v(!1),t({type:"FINISH_PATH",payload:{groupId:N,elements:H}});return}v(!1),t({type:"FINISH_PATH",payload:{elements:H}})},[g,gt,ao,Re,pt,jt,fn,Qn,t,e.activeTool,e.currentPath,e.strokeWidth,se]),Ee=kn(y=>{let w=y.target.value;Vo.current=y.target.selectionStart,ie(H=>(H?.domEdit&&(H.domEdit.textNode.nodeValue=w),H&&{...H,text:w}))},[]),Qe=kn(y=>{y.key==="Escape"?(rn.current?.domEdit&&(rn.current.domEdit.textNode.nodeValue=rn.current.domEdit.originalText),ie(null)):y.key==="Enter"&&!y.shiftKey&&(y.preventDefault(),M())},[M]),Dn=kn(y=>{if(!b||b.domEdit)return;let w=y.clipboardData.items,H=[];for(let h=0;h<w.length;h++){let R=w[h];if(R.type.startsWith("image/")){let T=R.getAsFile();T&&H.push(T)}}H.length>0&&(y.preventDefault(),ie(h=>h?{...h,images:[...h.images||[],...H]}:null))},[b]),Rt=kn(y=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){y.preventDefault();let H=At||pn||fe||ft;if(H&&!qt(H)){let h=Hn(H),R=mn(H);t({type:"SELECT_ELEMENT",payload:{el:H,info:{...h,selector:R}}})}return}y.preventDefault();let w=C.current;w&&(D.current=!0,w.style.pointerEvents="none",setTimeout(()=>{D.current&&(D.current=!1,w.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,At,pn,fe,ft,t,qt,C]);Gn(()=>{if(!(e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement))return;let y=null,w=e.inspectedElement.info.selector,H=()=>{y=null;let k=hn(w);if(k&&k!==e.inspectedElement?.el){let N=Hn(k);t({type:"SELECT_ELEMENT",payload:{el:k,info:{...N,selector:w}}});return}Z(N=>N+1)},h=()=>{y===null&&(y=requestAnimationFrame(H))},R=k=>{let N=k.target,Y=N instanceof Element?N:N.parentElement;return Y?!Y.closest('#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel], [data-devtools="panel"], [data-devtools="panel-wrapper"]'):!0},T=new MutationObserver(k=>{k.some(R)&&h()});T.observe(document.documentElement,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["class","style","href"],characterData:!0});let F=["vite:afterUpdate","vite:beforeFullReload","turbo:before-render","turbo:render"];return F.forEach(k=>window.addEventListener(k,h)),()=>{T.disconnect(),F.forEach(k=>window.removeEventListener(k,h)),y!==null&&cancelAnimationFrame(y)}},[e.activeTool,e.isAnnotating,e.inspectedElement,t]),Gn(()=>{let y=ye.filter(F=>F.linkedSelector);if(y.length===0)return;let w=null,H=document.createElement("canvas").getContext("2d"),h=()=>{let F=[];for(let k of y){let N=document.querySelector(k.linkedSelector);if(!N&&k.elements?.[0]?.selector&&k.linkedSelector.startsWith("[data-pm=")){try{N=document.querySelector(k.elements[0].selector)}catch{}if(N){let yt=k.linkedSelector.match(/data-pm="([^"]+)"/)?.[1];yt&&N.setAttribute("data-pm",yt)}}if(!N)continue;let Y=N.getBoundingClientRect(),$=Ae.some(yt=>{try{return N.matches(yt.selector)}catch{return!1}}),X=y.filter(yt=>yt.id!==k.id&&yt.timestamp<k.timestamp&&yt.linkedSelector===k.linkedSelector).length,te=($?1:0)+X,q;if(k.text&&H){let yt=k.fontSize||12;H.font=`${yt}px ${Wn}`,q=Math.max(...k.text.split(`
|
|
27
|
-
`).map(Ot=>H.measureText(Ot).width))}let
|
|
28
|
-
`),
|
|
29
|
-
`).length)*b.fontSize*1.4+8:0,
|
|
25
|
+
`}}),Y("div",{"aria-hidden":"true",style:Ws()}),qe("div",{style:Yn,onMouseDown:ke,children:[Y("div",{style:{display:"flex",alignItems:"center",gap:3,overflow:"hidden",minWidth:0},children:Y("span",{style:{fontWeight:600,fontSize:12,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:$t})}),Y("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"})]}),qe("div",{ref:p,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[Y("div",{children:Y(Od,{element:e,getValue:pe,getOriginalValue:Te,handleChange:Q,isModified:We,onResetProperty:Ie,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:Un,activeDropdown:E,onDropdownChange:x,panelContentRef:p,accentColor:a,onFieldHover:s,preferredUnit:P,onUnitCycle:D})}),Ut(),Y("div",{style:{opacity:E?.3:1,transition:"opacity 150ms ease"},children:Y(Wd,{element:e,getValue:pe,getExplicitValue:Ge,handleChange:Q,isModified:We,onResetProperty:Ie,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:Un,accentColor:a,colorVariables:ce,panelContentRef:p,preferredUnit:P,onUnitCycle:D})}),Vd.map((I,j)=>{let ne=j===Vd.length-1,ae=I.name==="Background",fe=I.name==="Borders",ge=I.name==="Effects",le=ae||fe||ge,Ce=ae&&Et||fe&&dn||ge&&Sn;return qe("div",{style:{borderBottom:ne?"none":"1px solid rgba(0,0,0,0.08)",opacity:S?.3:1,transition:"opacity 150ms ease"},children:[qe("div",{style:le?{...Un,padding:"6px 12px"}:Un,children:[Y("span",{children:I.name}),le&&qe("div",{style:{position:"relative"},children:[Y("button",{type:"button",onClick:()=>{ae?Ln():fe?co():O(Fe=>!Fe)},title:`Add ${I.name.toLowerCase()}`,style:{width:22,height:22,border:"none",outline:"none",backgroundColor:"transparent",color:"#1f2937",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",padding:0},children:Y(um,{size:15,strokeWidth:2})}),ge&&se&&Y("div",{ref:B,"data-popmelt-dropdown":"true",style:{position:"absolute",top:24,right:0,width:190,backgroundColor:Lo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt},children:[{label:"Drop shadow",property:"box-shadow",value:"0 4px 12px rgba(0, 0, 0, 0.18)"},{label:"Inner shadow",property:"box-shadow",value:"inset 0 2px 6px rgba(0, 0, 0, 0.18)"},{label:"Layer blur",property:"filter",value:"blur(4px)"},{label:"Background blur",property:"backdrop-filter",value:"blur(8px)"},{label:"Scale transform",property:"transform",value:"scale(1)"}].map(Fe=>Y("button",{type:"button",onClick:()=>un(Fe.property,Fe.value),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:It,cursor:"pointer",textAlign:"left",fontSize:vt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:xt},children:Fe.label},Fe.label))})]})]}),!Ce&&qe("div",{style:{padding:"0 0 4px"},children:[ae&&Z(),fe&&Cn(),I.properties.filter(Fe=>!(ae||fe)).map(Fe=>{let lt=We(Fe.property);return qe("div",{"data-popmelt-property":Fe.property,style:{...Tt},children:[Y("span",{onClick:lt?()=>Ie(Fe.property):void 0,title:lt?"Click to reset":void 0,style:{...Ft,cursor:lt?"pointer":"default"},children:Fe.label}),Y("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:Yt(Fe)})]},Fe.property)})]})]},I.name)}),qe("div",{style:{opacity:S?.3:1,transition:"opacity 150ms ease"},children:[Y("div",{style:Un,children:Y("span",{children:"Raw CSS"})}),qe("div",{style:{padding:"4px 12px 8px"},children:[Y("textarea",{value:G,onChange:I=>ee(I.target.value),placeholder:"property: value; ...",style:{width:"100%",height:60,padding:8,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:bn,border:"1px solid rgba(0,0,0,0.1)",borderRadius:2,resize:"vertical",outline:"none"}}),G.trim()&&Y("button",{type:"button",onClick:mt,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:a,color:"#fff",cursor:"pointer",opacity:G.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as Bm,useLayoutEffect as Dm,useState as Om}from"react";import{Fragment as Nm,jsx as oi,jsxs as Fm}from"react/jsx-runtime";var xl=["flex-start","center","flex-end"],Sl=["flex-start","center","flex-end"];function _m(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function Hm(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 eu(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 s of t){let a=s.getBoundingClientRect();a.width===0&&a.height===0||(a.top<n&&(n=a.top),a.left<o&&(o=a.left),a.bottom>r&&(r=a.bottom),a.right>i&&(i=a.right))}return n===1/0?null:new DOMRect(o,n,i-o,r-n)}function tu({element:e,modifier:t,accentColor:n,refreshKey:o=0}){let[r,i]=Om(null);if(Bm(()=>{if(!e){i(null);return}let E=()=>i(eu(e));return E(),window.addEventListener("scroll",E,{passive:!0}),window.addEventListener("resize",E,{passive:!0}),()=>{window.removeEventListener("scroll",E),window.removeEventListener("resize",E)}},[e]),Dm(()=>{e&&i(eu(e))},[e,o]),!r)return null;let s=r,a=window.getComputedStyle(e),l=a.display;if(l!=="flex"&&l!=="inline-flex")return null;let c=a.flexDirection,u=c==="column"||c==="column-reverse"?"vertical":"horizontal",d=u==="horizontal"?"vertical":"horizontal",p=[];if(t==="shift"){let E=_m(a.justifyContent);if(E){let x=xl.indexOf(E);u==="horizontal"?(x>0&&p.push("left"),x<xl.length-1&&p.push("right")):(x>0&&p.push("up"),x<xl.length-1&&p.push("down"))}}else{let E=Hm(a.alignItems);if(E){let x=Sl.indexOf(E);d==="horizontal"?(x>0&&p.push("left"),x<Sl.length-1&&p.push("right")):(x>0&&p.push("up"),x<Sl.length-1&&p.push("down"))}}if(p.length===0)return null;let f=14,m=7;return oi(Nm,{children:p.map(E=>{let x,S;switch(E){case"right":x=s.right+f,S=s.top+s.height/2;break;case"left":x=s.left-f,S=s.top+s.height/2;break;case"down":x=s.left+s.width/2,S=s.bottom+f;break;case"up":x=s.left+s.width/2,S=s.top-f;break}let P=E==="right"?0:E==="left"?180:E==="down"?90:-90,L={position:"fixed",left:x-m,top:S-m,width:m*2,height:m*2,pointerEvents:"none",zIndex:9997};return oi("div",{"data-devtools":"swipe-hint",style:L,children:oi("svg",{width:m*2,height:m*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:Fm("g",{transform:`rotate(${P})`,children:[oi("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),oi("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),oi("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),oi("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},E)})})}import{useEffect as zm,useLayoutEffect as $m,useState as Wm}from"react";import{jsx as wl,jsxs as El}from"react/jsx-runtime";function jm(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 nu({element:e,fontSize:t,lineHeight:n,accentColor:o,hoveredProperty:r,draggingProperty:i,cursorViewport:s}){let[a,l]=Wm(null);if(zm(()=>{if(!e){l(null);return}let S=()=>{l(Ci(e))};return S(),window.addEventListener("scroll",S,{passive:!0}),window.addEventListener("resize",S,{passive:!0}),()=>{window.removeEventListener("scroll",S),window.removeEventListener("resize",S)}},[e]),$m(()=>{e&&l(Ci(e))},[e,t,n]),!a)return null;let c=a.width,u=a.height,d=jm(o,.2),p=i??r,f=8,m=2,E={position:"fixed",top:a.top,left:a.left,width:c,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"},x=S=>S==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return El("div",{"data-devtools":"text-handles",style:E,children:[El("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${u}`,children:[wl("rect",{x:"0.5",y:"0.5",width:Math.max(0,c-1),height:Math.max(0,u-1),fill:"none",stroke:d,strokeWidth:"1"}),(p==="font-size"||!p)&&wl("rect",{x:c-m/2,y:u/2-f/2,width:m,height:f,fill:o,stroke:"#ffffff",strokeWidth:p==="font-size"?4:2,paintOrder:"stroke"}),(p==="line-height"||!p)&&wl("rect",{x:c/2-f/2,y:u-m/2,width:f,height:m,fill:o,stroke:"#ffffff",strokeWidth:p==="line-height"?4:2,paintOrder:"stroke"})]}),s&&p&&(()=>{let S=p==="font-size"?"Aa":"Lh",P=x(p);return El("div",{style:{position:"fixed",left:s.x+8,top:s.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:[S," ",P]})})()]})}import{Fragment as _i,jsx as kt,jsxs as Oi}from"react/jsx-runtime";var ou=8,Cl=[0,1,2,4,8,12,16,20,24,28,32],Di=8,Tl="devtools-active-text";function Qs(e){if(!e||e===document.body||e===document.documentElement||Il(e))return!1;let t=e.tagName.toLowerCase();return["script","style","link","meta","head","html","body","input","textarea","select","option","button"].includes(t)?!1:!!e.parentElement}function hr(e){let t=e.getAttribute("data-pm");return t||(t=Math.random().toString(36).substring(2,8),e.setAttribute("data-pm",t)),`[data-pm="${t}"]`}function kl(e){return e.parentElement?Array.from(e.parentElement.children).indexOf(e):-1}function ru(e){e.removeAttribute("data-pm"),e.querySelectorAll("[data-pm]").forEach(t=>t.removeAttribute("data-pm"))}function iu(e,t,n,o){let r=n.parentElement;if(!r)return null;let i=wr(e,t);for(;i&&i!==document.body;){if(i===n||n.contains(i)){i=i.parentElement;continue}if(i.parentElement===r&&Qs(i))break;i=i.parentElement}if(!i||i===document.body||i.parentElement!==r||i===o)return null;let s=i.getBoundingClientRect(),l=s.height>=s.width?t<s.top+s.height/2?"before":"after":e<s.left+s.width/2?"before":"after",c=kl(i),u=l==="before"?c:c+1;return{parent:r,reference:i,placement:l,index:u}}function Ml(e,t,n){let o=Array.from(e.children).filter(i=>i!==t),r=Math.max(0,Math.min(n,o.length));e.insertBefore(t,o[r]??null)}function Vm(e){let t=e?.getBoundingClientRect();return!t||typeof window>"u"?{}:t.top<window.innerHeight/2?{avoidTop:t.bottom+Di,avoidLeft:t.left-Di,avoidRight:t.right+Di}:{avoidBottom:t.top-Di,avoidLeft:t.left-Di,avoidRight:t.right+Di}}function Il(e){return e?!!e.closest("#devtools-toolbar, #devtools-scrim, #devtools-text-input, [data-devtools], [data-popmelt-panel], [data-popmelt-shadow-host]"):!1}function Gm(e,t){let n=document,o=n.caretPositionFromPoint?.(e,t);if(o?.offsetNode?.nodeType===Node.TEXT_NODE)return o.offsetNode;let r=n.caretRangeFromPoint?.(e,t);return r?.startContainer?.nodeType===Node.TEXT_NODE?r.startContainer:null}function Jm(e,t){if(!e)return t();let n=e.style.pointerEvents;e.style.pointerEvents="none";try{return t()}finally{e.style.pointerEvents=n}}function Ym(e,t,n){let o=document.createTreeWalker(e,NodeFilter.SHOW_TEXT,{acceptNode(i){return i.textContent?.trim()?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT}}),r=o.nextNode();for(;r;){let i=r,s=document.createRange();s.selectNodeContents(i);let a=Array.from(s.getClientRects());if(s.detach(),a.some(l=>t>=l.left&&t<=l.right&&n>=l.top&&n<=l.bottom))return i;r=o.nextNode()}return null}function su(e,t,n){return Jm(n,()=>{let o=Gm(e,t);if(!o){let d=document.elementFromPoint(e,t);d&&!Il(d)&&(o=Ym(d,e,t))}let r=o?.parentElement;if(!o||!(r instanceof HTMLElement)||Il(r))return null;let i=r.tagName.toLowerCase();if(i==="script"||i==="style"||i==="textarea"||i==="input")return null;let s=o.nodeValue??"";if(!s.trim())return null;let a=Km(r,o);if(!a)return null;let l=lu(o,r);if(l.width<=0||l.height<=0)return null;let c=window.getComputedStyle(r),u=parseFloat(c.fontSize)||12;return{textNode:o,targetElement:r,textNodePath:a,originalText:s,rect:l,styles:c,fontSize:u}})}function Um(e,t){return e===t?!0:!e||!t?!1:e.textNode===t.textNode&&e.rect.left===t.rect.left&&e.rect.top===t.rect.top&&e.rect.width===t.rect.width&&e.rect.height===t.rect.height}function Km(e,t){let n=[],o=t;for(;o&&o!==e;){let r=o.parentNode;if(!r)return null;n.unshift(Array.prototype.indexOf.call(r.childNodes,o)),o=r}return o===e?n:null}function lu(e,t){let n=document.createRange();n.selectNodeContents(e);let o=n.getBoundingClientRect();if(n.detach(),o.width>0&&o.height>0)return{left:o.left,top:o.top,width:o.width,height:o.height};let r=t.getBoundingClientRect();return{left:r.left,top:r.top,width:r.width,height:r.height}}function Xm(e,t){return Math.abs(e.left-t.left)<.5&&Math.abs(e.top-t.top)<.5&&Math.abs(e.width-t.width)<.5&&Math.abs(e.height-t.height)<.5}function au(e,t,n=0,o,r,i=90){let s=e.left+window.scrollX+4,a=t==="top-left"?e.top+window.scrollY-Cr-n*Cr+4:e.bottom+window.scrollY+4-1+n*Cr,l=window.scrollY+4,c=window.scrollY+window.innerHeight-Cr-4,u=null;if(o&&r!==void 0){let d=o.getBoundingClientRect(),p=e.left+4;if(p+r+8+i>d.left&&p<d.right)if(d.top<window.innerHeight/2){let E=window.scrollY+d.bottom+4;E>l&&(l=E,u="top")}else{let E=window.scrollY+d.top-Cr-4;E<c&&(c=E,u="bottom")}}return l>c&&(c=l),a<l?a=u==="top"?l:e.top+window.scrollY+4:a>c&&(a=u==="bottom"?c:Math.max(e.top+window.scrollY+4,c)),{x:s,y:a}}function cu({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:o,activeAnnotationIds:r,queuePositionMap:i,inFlightStyleSelectors:s,inFlightSelectorColors:a,onAttachImages:l,onViewThread:c,onCloseThread:u,onModelComponentsAdd:d,onModelComponentFocus:p,onModelComponentHover:f,modelComponentNames:m,modelPanelHoveredComponent:E,modelSpacingTokenHover:x,highlightedAnnotationIds:S,focusedThreadAnnotationId:P,externalCanvasRef:L,toolbarRef:D}){let{canvasRef:C,redrawAll:G,resizeCanvas:ee}=od(),se=vi(),O=kn(y=>{C.current=y,L&&(L.current=y)},[L,C]),B=tn(!1);Gn(()=>{let y=C.current;if(!y)return;let w=()=>{B.current&&(B.current=!1,y.style.pointerEvents="")},H=h=>{h.button===0&&B.current&&w()};return window.addEventListener("mousedown",H),()=>window.removeEventListener("mousedown",H)},[C]);let[g,v]=Lt(!1),[b,ie]=Lt(()=>{if(typeof window>"u")return null;try{let y=localStorage.getItem(Tl);return y?JSON.parse(y):null}catch{return null}}),[ve,ce]=Lt(null),[ue,we]=Lt(null),[Ue,V]=Lt(null),[A,J]=Lt(null),ke=tn(null),De=tn(null),pe=tn({x:0,y:0}),Ge=tn([]),Ze=tn(0),Te=tn(null),[Q,Ie]=Lt(null),[mt,We]=Lt(new Map),Oe=tn(0),He=tn(null),[Pe,Et]=Lt(null),[dn,Sn]=Lt(null),[Ln,Nt]=Lt(null),[wn,co]=Lt(null),Jn=tn({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}),En=tn({isDragging:!1,hasMoved:!1,mode:"move",startX:0,startY:0,element:null,originalParent:null,originalIndex:-1,selector:null,durableSelector:null,elementInfo:null}),[At,at]=Lt(null),[Dt,un]=Lt(null),[ht,Yt]=Lt(null),[bt,oo]=Lt(null),[xo,Z]=Lt(0),xe=tn(null),[Re,et]=Lt(null),Ke=tn({x:0,y:0}),[Le,tt]=Lt({x:0,y:0}),qt=tn({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}),[pn,Cn]=Lt(null),[Ut,$t]=Lt(null),[Wt,Yn]=Lt(null),[Un,Tt]=Lt(!1),[Ft,I]=Lt(0),[j,ne]=Lt(null),ae=tn({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}),[fe,ge]=Lt(null),[le,Ce]=Lt(null),[pt,Fe]=Lt(null),lt=tn({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[ft,An]=Lt(null),[Tn,Do]=Lt(null),[fn,K]=Lt(null),_e=rd(),ot=tn(a);ot.current=a;let Kt=kn(y=>{let w=ot.current;if(!w||w.size===0)return!1;for(let H of w.keys())try{if(y.matches(H))return!0}catch{}return!1},[]),Mo=tn(e);Mo.current=e;let rn=tn(b);rn.current=b,Gn(()=>{if(!b?.domEdit)return;let y=null,w=()=>{ie(H=>{if(!H?.domEdit)return H;let{textNode:h,targetElement:R,rect:M}=H.domEdit;if(!h.isConnected||!R.isConnected)return H;let F=lu(h,R);return Xm(M,F)?H:{...H,point:{x:F.left+window.scrollX,y:F.top+window.scrollY},domEdit:{...H.domEdit,rect:F}}}),y=window.requestAnimationFrame(w)};return y=window.requestAnimationFrame(w),()=>{y!==null&&window.cancelAnimationFrame(y)}},[b?.domEdit?.textNode]),Gn(()=>{(e.activeTool!=="text"||b)&&we(null)},[e.activeTool,b]);let jt=tn([]),di=tn(n);di.current=n;let[gt,so]=Lt(null),Kn=e.selectedAnnotationIds;jt.current=Kn;let lr=kn((y,w=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:y,addToSelection:w}})},[t]),jo=kn(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[ao,xr]=Lt(null),So=tn({x:window.scrollX,y:window.scrollY}),uo=tn(null),po=tn(null),[Pn,ui]=Lt(So.current);Gn(()=>(ee(),window.addEventListener("resize",ee),()=>window.removeEventListener("resize",ee)),[ee]),Gn(()=>{b&&!b.domEdit?localStorage.setItem(Tl,JSON.stringify(b)):localStorage.removeItem(Tl)},[b]),id(b,ie,ve,e.annotations,t);let pi=tn(Q);pi.current=Q,Gn(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let y=w=>{if(!w.altKey||!pi.current)return;w.preventDefault();let H=w.deltaY>0?-1:1;Oe.current=Math.max(0,Oe.current+H);let h=He.current;if(h){let R=ks(h,Oe.current);Ie(R)}};return window.addEventListener("wheel",y,{passive:!1}),()=>window.removeEventListener("wheel",y)},[e.activeTool,e.isAnnotating]),Gn(()=>{e.activeTool!=="model"&&(Ie(null),We(new Map),Oe.current=0,He.current=null)},[e.activeTool]),Gn(()=>{let y=Q?.name??null,w=y&&m?.has(y)?y:null;f?.(w)},[Q,m,f]);let[cr,Br]=Lt(null);Gn(()=>{if(!E){Br(null);return}let y=xi(E.name),w=E.instanceIndex;Br(y[w%y.length]??null)},[E]);let[_,W]=Lt([]);Gn(()=>{if(!x){W([]);return}x.token?.bindings?.length?W(La(x.token)):W(Ia(x.px))},[x]);let de=tn(null),be=tn(null);de.current=pn,be.current=Ut,Gn(()=>{let y=["flex-start","center","flex-end"],w=["flex-start","center","flex-end"],h=null,R=!1,M=null,F=null,k=(Se,st)=>{let rt=wr(Se,st);for(;rt&&rt!==document.documentElement;){let Mn=window.getComputedStyle(rt).display;if(Mn==="flex"||Mn==="inline-flex")return rt;rt=rt.parentElement}return null},N=Se=>{let st=window.getComputedStyle(Se).flexDirection;return st==="column"||st==="column-reverse"?"vertical":"horizontal"},U=Se=>{let st=Se.getAttribute("data-pm");return st||(st=Math.random().toString(36).substring(2,8),Se.setAttribute("data-pm",st)),{selector:`[data-pm="${st}"]`,durableSelector:mn(Se)}},$=()=>{R=!0,h&&clearTimeout(h),h=setTimeout(()=>{R=!1,h=null},300)},X=(Se,st,cn)=>{let rt=N(Se);if(st===rt){let lo=window.getComputedStyle(Se).justifyContent,Vt=lo==="normal"||lo==="flex-start"||lo==="start"?"flex-start":lo==="flex-end"||lo==="end"?"flex-end":lo==="center"?"center":null;if(!Vt)return;let Hr=y.indexOf(Vt)+cn;if(Hr<0||Hr>=y.length)return;let fr=y[Hr],{selector:Fr,durableSelector:va}=U(Se);ut(Se,"justify-content",fr),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Fr,durableSelector:va,element:Hn(Se),changes:[{property:"justify-content",original:lo,modified:fr}]}})}else{let lo=window.getComputedStyle(Se).flexDirection,Vt=rt==="horizontal"?"column":"row",{selector:pr,durableSelector:Hr}=U(Se);ut(Se,"flex-direction",Vt),t({type:"MODIFY_STYLES_BATCH",payload:{selector:pr,durableSelector:Hr,element:Hn(Se),changes:[{property:"flex-direction",original:lo,modified:Vt}]}})}I(Mn=>Mn+1)},te=(Se,st,cn)=>{let Mn=N(Se)==="horizontal"?"vertical":"horizontal";if(st!==Mn)return;let Vt=window.getComputedStyle(Se).alignItems,pr=Vt==="normal"||Vt==="stretch"||Vt==="flex-start"||Vt==="start"?"flex-start":Vt==="flex-end"||Vt==="end"?"flex-end":Vt==="center"?"center":null;if(!pr)return;let fr=w.indexOf(pr)+cn;if(fr<0||fr>=w.length)return;let Fr=w[fr],{selector:va,durableSelector:dp}=U(Se);ut(Se,"align-items",Fr),t({type:"MODIFY_STYLES_BATCH",payload:{selector:va,durableSelector:dp,element:Hn(Se),changes:[{property:"align-items",original:Vt,modified:Fr}]}}),I(up=>up+1)},q=20,Me=null,ze=null,dt=0,wt=(Se,st,cn)=>{let rt=k(st,cn);ne(rt?{modifier:Se,target:rt}:null)},yt=Se=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(Se.key==="Shift"&&!Se.altKey){let st=Ke.current;wt("shift",st.x,st.y)}else if(Se.key==="Alt"&&!Se.shiftKey){let st=Ke.current;wt("alt",st.x,st.y)}}},Ot=Se=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let st=Se.shiftKey&&!Se.altKey,cn=Se.altKey&&!Se.shiftKey;if(!st&&!cn||Se.buttons!==0){Me=null,ze=null,dt=0,M=null,F=null,ne(null);return}if(M===null&&(M=Se.clientX,F=Se.clientY,wt(st?"shift":"alt",Se.clientX,Se.clientY)),R)return;Me===null&&(Me=Se.clientX,ze=Se.clientY,dt=0);let rt=Se.clientX-Me,Mn=Se.clientY-ze,lo=Math.abs(rt)>=Math.abs(Mn)?rt:Mn;if(Math.abs(lo)>3){let Fr=lo>0?1:-1;if(dt!==0&&Fr!==dt){Me=Se.clientX,ze=Se.clientY,dt=0;return}dt=Fr}if(Math.abs(rt)<q&&Math.abs(Mn)<q)return;let Vt=k(M,F);if(!Vt)return;let pr=Math.abs(rt)>=Math.abs(Mn)?"horizontal":"vertical",fr=(pr==="horizontal"?rt:Mn)>0?1:-1;Me=null,ze=null,dt=0,st?X(Vt,pr,fr):te(Vt,pr,fr),$()},Mt=Se=>{(Se.key==="Shift"||Se.key==="Alt")&&(M=null,F=null,Me=null,ze=null,dt=0,ne(null))},Pt=()=>{ne(null),Me=null,ze=null,dt=0};return window.addEventListener("keydown",yt),window.addEventListener("mousemove",Ot),window.addEventListener("mousedown",Pt),window.addEventListener("keyup",Mt),()=>{window.removeEventListener("keydown",yt),window.removeEventListener("mousemove",Ot),window.removeEventListener("mousedown",Pt),window.removeEventListener("keyup",Mt),h&&clearTimeout(h)}},[e.activeTool,e.isAnnotating,t]),Gn(()=>{let y=w=>{if(w.key==="Escape"){if(rn.current)return;if(e.activeTool==="model"&&mt.size>0){w.preventDefault(),We(new Map);return}if(jt.current.length>0){w.preventDefault(),jo();return}}if(w.key==="Enter"&&e.activeTool==="model"&&mt.size>0&&d){w.preventDefault();let M=[...mt.keys()].filter(F=>!m?.has(F));M.length>0&&d(M),We(new Map);return}if((w.metaKey||w.ctrlKey)&&w.key.toLowerCase()==="c"&&e.activeTool==="hand"&&At&&!rn.current){if(Qs(At)){w.preventDefault();let M=hr(At);Te.current={source:At,sourceSelector:M,sourceDurableSelector:mn(At),sourceElement:{...Hn(At),selector:M}}}return}if((w.metaKey||w.ctrlKey)&&w.key.toLowerCase()==="v"&&e.activeTool==="hand"&&Te.current&&!rn.current){let M=Te.current,F=At&&Qs(At)?At:M.source,k=F.parentElement;if(k){w.preventDefault();let N=mn(k),U=hr(k),$=mn(F),X=hr(F),te=kl(F)+1,q=M.source.cloneNode(!0);if(q instanceof Element){ru(q),Ml(k,q,te);let Me=hr(q),ze=mn(q),dt={...Hn(q),selector:Me};t({type:"MODIFY_DOM_STRUCTURE",payload:{id:bi(),operation:"copy",selector:Me,durableSelector:ze,element:dt,sourceSelector:M.sourceSelector,sourceDurableSelector:M.sourceDurableSelector,sourceElement:M.sourceElement,targetParentSelector:U,targetParentDurableSelector:N,targetIndex:te,referenceSelector:X,referenceDurableSelector:$,placement:"after",pathname:se}})}}return}if((w.metaKey||w.ctrlKey)&&w.key==="v"&&Ge.current.length>0&&!rn.current){w.preventDefault(),Ze.current++;let M=Ze.current*20,k=Ge.current[0]?.groupId?Math.random().toString(36).substring(2,9):void 0,N=Ge.current.map($=>({...$,id:Math.random().toString(36).substring(2,9),groupId:$.groupId?k:void 0,timestamp:Date.now(),points:$.points.map(X=>({x:X.x+M,y:X.y+M}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:N}});let U=N.find($=>$.type!=="text")||N[0];U&&lr(U.id);return}let H=jt.current;if(H.length===0||rn.current)return;let h=w.composedPath?.()[0]??w.target,R=h?.tagName;if(!(R==="INPUT"||R==="TEXTAREA"||h?.isContentEditable)&&(w.key==="Delete"||w.key==="Backspace")){if(w.preventDefault(),u){let M=Mo.current.annotations;for(let F of H){let k=M.find(U=>U.id===F);if(!k)continue;let N=k.threadId||k.groupId&&M.find(U=>U.groupId===k.groupId&&U.threadId)?.threadId;N&&u(N)}}for(let M of H)t({type:"DELETE_ANNOTATION",payload:{id:M}});jo()}};return window.addEventListener("keydown",y),()=>window.removeEventListener("keydown",y)},[t,jo,lr,e.activeTool,At,mt,m,d,u,se]);let me=Bi(()=>e.annotations.filter(y=>!y.pathname||y.pathname===se),[e.annotations,se]),Ae=Bi(()=>e.styleModifications.filter(y=>!y.pathname||y.pathname===se),[e.styleModifications,se]),je=Vm(D?.current),ct=je.avoidTop,Xt=je.avoidBottom,Xe=je.avoidLeft,gn=je.avoidRight,sn=Bi(()=>zs(e.annotations),[e.annotations]),Ct=Bi(()=>{let y=new Map,w=new Set,H=1,h=[...e.annotations].sort((R,M)=>R.timestamp-M.timestamp);for(let R of h)if(!sn.has(R))if(R.groupId){if(!w.has(R.groupId)){w.add(R.groupId);let M=e.annotations.filter(F=>F.groupId===R.groupId);for(let F of M)y.set(F.id,H);H++}}else y.set(R.id,H),H++;return y},[e.annotations,sn]),Bn=Bi(()=>{if(Kn.length===0)return null;let y=new Map;for(let w of Kn){let H=e.annotations.find(R=>R.id===w);if(!H)continue;let h=H.groupId?e.annotations.filter(R=>R.groupId===H.groupId):[H];for(let R of h)if(R.linkedSelector&&!a?.has(R.linkedSelector)){let M=R.color||e.activeColor;y.set(R.linkedSelector,M)}}return y.size>0?y:null},[Kn,e.annotations,e.activeColor,a]),Xn=Bi(()=>me.filter(y=>!(sn.has(y)||b&&!b.isNew&&y.id===b.id)),[me,sn,b]),qn=kn((y=So.current)=>{G(Xn,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,Kn,ou,y.x,y.y,Ct,S,je)},[Xn,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,Kn,G,Ct,S,ct,Xt,Xe,gn]);Gn(()=>{qn(So.current)},[qn]),Gn(()=>{let y=()=>{let w={x:window.scrollX,y:window.scrollY};So.current=w,uo.current===null&&(uo.current=window.requestAnimationFrame(()=>{uo.current=null;let H=So.current;if(qn(H),rn.current){ui(h=>h.x===H.x&&h.y===H.y?h:H);return}po.current!==null&&window.clearTimeout(po.current),po.current=window.setTimeout(()=>{po.current=null;let h=So.current;ui(R=>R.x===h.x&&R.y===h.y?R:h)},80)}))};return window.addEventListener("scroll",y,{passive:!0}),()=>{window.removeEventListener("scroll",y),uo.current!==null&&(window.cancelAnimationFrame(uo.current),uo.current=null),po.current!==null&&(window.clearTimeout(po.current),po.current=null)}},[qn]),Gn(()=>{if(Ue){let y=Math.random().toString(36).substring(2,9);ie({id:y,point:Ue.point,text:"",fontSize:12,isNew:!0,groupId:Ue.groupId}),V(null)}},[Ue]),Gn(()=>{A&&(ie({id:Math.random().toString(36).substring(2,9),point:A.point,text:"",fontSize:12,isNew:!0,linkedSelector:A.linkedSelector,linkedAnchor:A.linkedAnchor,elements:A.elements}),J(null))},[A]);let Vo=tn(null),fo=b?.id??null;Gn(()=>{fo&&ke.current?requestAnimationFrame(()=>{let y=ke.current;if(!y||(y.focus(),De.current===fo))return;De.current=fo;let w=rn.current;if(w){if(w.domEdit){y.setSelectionRange(0,y.value.length);return}if(Vo.current!==null){let H=Math.min(Vo.current,y.value.length);y.setSelectionRange(H,H);return}if(!w.isNew&&w.clickPoint){let H=C.current;if(!H)return;let h=H.getContext("2d");if(!h)return;h.font=`${w.fontSize}px ${Wn}`;let R=w.fontSize*1.4,M=w.text.split(`
|
|
26
|
+
`),F=w.clickPoint.y-w.point.y,k=Math.max(0,Math.min(M.length-1,Math.floor(F/R))),N=w.clickPoint.x-w.point.x,U=M[k]||"",$=0;for(let te=0;te<=U.length;te++){let q=h.measureText(U.substring(0,te)).width;if(q>N){let Me=te>0?h.measureText(U.substring(0,te-1)).width:0;$=N-Me<q-N?te-1:te;break}$=te}let X=$;for(let te=0;te<k;te++)X+=(M[te]?.length||0)+1;y.setSelectionRange(X,X)}}}):(De.current=null,Vo.current=null)},[fo,C]);let Qn=kn(y=>{let w=C.current;if(!w)return{x:0,y:0};let H=w.getBoundingClientRect(),h,R;if("touches"in y&&y.touches[0])h=y.touches[0].clientX,R=y.touches[0].clientY;else if("clientX"in y)h=y.clientX,R=y.clientY;else return{x:0,y:0};return{x:h-H.left+window.scrollX,y:R-H.top+window.scrollY}},[C]),dr=kn((y,w,H,h)=>{let R=H.x-w.x,M=H.y-w.y,F=R*R+M*M;if(F===0)return Math.sqrt((y.x-w.x)**2+(y.y-w.y)**2)<=h;let k=Math.max(0,Math.min(1,((y.x-w.x)*R+(y.y-w.y)*M)/F)),N=w.x+k*R,U=w.y+k*M;return Math.sqrt((y.x-N)**2+(y.y-U)**2)<=h},[]),fi=kn(y=>{for(let H=me.length-1;H>=0;H--){let h=me[H];if(!h||sn.has(h))continue;let R=(h.strokeWidth||3)+4;switch(h.type){case"text":{if(!h.points[0]||!h.text)continue;let M=h.points[0],F=h.fontSize||12,k=C.current;if(k){let N=k.getContext("2d");if(N){N.font=`${F}px ${Wn}`;let U=h.text.replace(/\n/g," "),$=M.x-Pn.x,X=Ui($),te=Ki(N,U,X),q=N.measureText(te).width,Me=F*1.4,ze={x:M.x-Pn.x,y:M.y-Pn.y},dt=ja(ze,F,je,q+8),wt={x:dt.x+Pn.x,y:dt.y+Pn.y};if(y.x>=wt.x-4-4&&y.x<=wt.x+q+4+4&&y.y>=wt.y-4-4&&y.y<=wt.y+Me+4+4)return h}}break}case"rectangle":{if(h.points.length<2)continue;let M=h.points[0],F=h.points[h.points.length-1],k=Math.min(M.x,F.x),N=Math.max(M.x,F.x),U=Math.min(M.y,F.y),$=Math.max(M.y,F.y),X=dr(y,{x:k,y:U},{x:N,y:U},R),te=dr(y,{x:k,y:$},{x:N,y:$},R),q=dr(y,{x:k,y:U},{x:k,y:$},R),Me=dr(y,{x:N,y:U},{x:N,y:$},R);if(X||te||q||Me)return h;break}case"circle":{if(h.points.length<2)continue;let M=h.points[0],F=h.points[h.points.length-1],k=(M.x+F.x)/2,N=(M.y+F.y)/2,U=Math.abs(F.x-M.x)/2,$=Math.abs(F.y-M.y)/2,X=y.x-k,te=y.y-N,q=Math.sqrt((X/U)**2+(te/$)**2);if(Math.abs(q-1)*Math.max(U,$)<=R)return h;break}case"line":{if(h.points.length<2)continue;let M=h.points[0],F=h.points[h.points.length-1];if(dr(y,M,F,R))return h;break}case"freehand":{if(h.points.length<2)continue;for(let M=0;M<h.points.length-1;M++){let F=h.points[M],k=h.points[M+1];if(dr(y,F,k,R))return h}break}}}return null},[me,C,dr,sn,Pn.x,Pn.y,ct,Xt,Xe,gn]),ms=kn(y=>{let w=fi(y);return w?.type==="text"?w:null},[fi]),$i=kn(y=>{if(Kn.length===0)return null;let w=ou/2+4;for(let H of Kn){let h=e.annotations.find(R=>R.id===H);if(!(!h||h.points.length<2)){if(h.type==="line"){let R=h.points[0],M=h.points[h.points.length-1];if(Math.sqrt((y.x-R.x)**2+(y.y-R.y)**2)<=w)return{handle:"start",annotationId:H};if(Math.sqrt((y.x-M.x)**2+(y.y-M.y)**2)<=w)return{handle:"end",annotationId:H};continue}if(h.type==="circle"){let R=h.points[0],M=h.points[h.points.length-1],F=Math.min(R.x,M.x),k=Math.max(R.x,M.x),N=Math.min(R.y,M.y),U=Math.max(R.y,M.y),$=(F+k)/2,X=(N+U)/2,te=[{handle:"top",x:$,y:N},{handle:"bottom",x:$,y:U},{handle:"left",x:F,y:X},{handle:"right",x:k,y:X}];for(let{handle:q,x:Me,y:ze}of te)if(Math.sqrt((y.x-Me)**2+(y.y-ze)**2)<=w)return{handle:q,annotationId:H};continue}if(h.type==="rectangle"||h.type==="freehand"){let R=h.points[0],M=h.points[h.points.length-1],F,k,N,U;h.type==="freehand"?(F=Math.min(...h.points.map(X=>X.x)),k=Math.max(...h.points.map(X=>X.x)),N=Math.min(...h.points.map(X=>X.y)),U=Math.max(...h.points.map(X=>X.y))):(F=Math.min(R.x,M.x),k=Math.max(R.x,M.x),N=Math.min(R.y,M.y),U=Math.max(R.y,M.y));let $=[{corner:"topLeft",x:F,y:N},{corner:"topRight",x:k,y:N},{corner:"bottomLeft",x:F,y:U},{corner:"bottomRight",x:k,y:U}];for(let{corner:X,x:te,y:q}of $)if(Math.sqrt((y.x-te)**2+(y.y-q)**2)<=w)return{handle:X,annotationId:H}}}}return null},[Kn,e.annotations]);Gn(()=>{let y=w=>{if(pe.current={x:w.clientX+window.scrollX,y:w.clientY+window.scrollY},!b){let H=ms(pe.current);ce(H?.id||null)}};return window.addEventListener("mousemove",y),()=>window.removeEventListener("mousemove",y)},[b,ms]);let T=kn(()=>{if(!b)return;if(b.domEdit){let w=b.text;w!==b.domEdit.originalText&&t({type:"MODIFY_TEXT_CONTENT",payload:{selector:b.domEdit.selector,durableSelector:b.domEdit.durableSelector,element:b.domEdit.element,textNodePath:b.domEdit.textNodePath,original:b.domEdit.originalText,modified:w}}),ie(null);return}let y=b.images?.length||0;if(b.text.trim()||y>0)if(b.isNew){let w=bi();t({type:"ADD_TEXT",payload:{point:b.point,text:b.text||(y>0?`[${y} image${y>1?"s":""}]`:""),fontSize:b.fontSize,id:w,groupId:b.groupId,linkedSelector:b.linkedSelector,linkedAnchor:b.linkedAnchor,elements:b.elements,...y>0?{imageCount:y}:{}}}),y>0&&b.images&&l&&l(w,b.images)}else t({type:"UPDATE_TEXT",payload:{id:b.id,text:b.text||(y>0?`[${y} image${y>1?"s":""}]`:""),...y>0?{imageCount:y}:{}}}),y>0&&b.images&&l&&l(b.id,b.images);else b.isNew||t({type:"DELETE_ANNOTATION",payload:{id:b.id}});ie(null)},[b,t,l]),z=kn((y,w,H)=>{let h=su(y,w,C.current);if(!h)return null;let{textNode:R,targetElement:M,textNodePath:F,originalText:k,rect:N,styles:U,fontSize:$}=h,X=M.getAttribute("data-pm");X||(X=Math.random().toString(36).substring(2,8),M.setAttribute("data-pm",X));let te=`[data-pm="${X}"]`,q=mn(M),Me={...Hn(M),selector:te};return{id:Math.random().toString(36).substring(2,9),point:{x:N.left+window.scrollX,y:N.top+window.scrollY},text:k,fontSize:$,isNew:!0,clickPoint:H,domEdit:{selector:te,durableSelector:q,element:Me,textNodePath:F,originalText:k,textNode:R,targetElement:M,rect:N,fontFamily:U.fontFamily,fontWeight:U.fontWeight,fontStyle:U.fontStyle,lineHeight:U.lineHeight==="normal"?`${Math.round($*1.2*10)/10}px`:U.lineHeight,letterSpacing:U.letterSpacing,color:U.color,textTransform:U.textTransform,textAlign:U.textAlign,wordSpacing:U.wordSpacing,textDecoration:U.textDecoration,textShadow:U.textShadow}}},[C]),re=kn(y=>{for(let w=0;w<Cl.length-1;w++){let H=Cl[w],h=Cl[w+1];if(y<=(H+h)/2)return H;if(y<h)return h}return Math.round(y/8)*8},[]),he=kn((y,w,H,h)=>{let R=H.top+Math.max(h.top,4),M=H.bottom-Math.max(h.bottom,4),F=H.left+Math.max(h.left,4),k=H.right-Math.max(h.right,4);if(y<H.left||y>H.right||w<H.top||w>H.bottom)return null;let N=w<R,U=w>M,$=y<F,X=y>k;return N&&$?h.top>=h.left?"top":"left":N&&X?h.top>=h.right?"top":"right":U&&$?h.bottom>=h.left?"bottom":"left":U&&X?h.bottom>=h.right?"bottom":"right":N?"top":U?"bottom":$?"left":X?"right":null},[]),$e=kn(y=>{if(!e.isAnnotating)return;if(e.inspectedElement&&e.activeTool==="hand"&&!("button"in y&&y.button===2)){y.preventDefault(),y.stopPropagation(),t({type:"SELECT_ELEMENT",payload:null});return}let w=Qn(y),H="shiftKey"in y&&y.shiftKey;if(e.activeTool==="inspector"){if("button"in y&&y.button===2)return;if(Pe&&!Kt(Pe)){let M=e.annotations.find(yt=>{if(!yt.linkedSelector||!yt.threadId)return!1;try{return Pe.matches(yt.linkedSelector)}catch{return!1}});if(M?.threadId&&c){c(M.threadId),requestAnimationFrame(()=>{document.querySelector("[data-popmelt-shadow-host]")?.shadowRoot?.querySelector("[data-popmelt-reply]")?.focus()});return}let F=Hn(Pe),k=mn(Pe),N=Pe.getBoundingClientRect(),U=Pe.getAttribute("data-pm");U||(U=Math.random().toString(36).substring(2,8),Pe.setAttribute("data-pm",U));let $=`[data-pm="${U}"]`,X=Ae.some(yt=>{try{return Pe.matches(yt.selector)}catch{return!1}}),te=e.annotations.filter(yt=>{if(!yt.linkedSelector)return!1;try{return Pe.matches(yt.linkedSelector)}catch{return!1}}).length,q=(X?1:0)+te,Me=N.top>=Cr*(1+q)?"top-left":"bottom-left",ze=C.current?.getContext("2d")??document.createElement("canvas").getContext("2d"),dt;ze&&(ze.font=`12px ${Wn}`,dt=ze.measureText("Type here...").width);let wt=au(N,Me,q,D?.current,dt,0);J({point:wt,linkedSelector:$,linkedAnchor:Me,elements:[{...F,selector:k}]})}return}if(e.activeTool==="model"){if("button"in y&&y.button===2)return;if(Q){let M=Q.name;if(m?.has(M)){p?.(M);return}"shiftKey"in y&&y.shiftKey?We(k=>{let N=new Map(k);return N.has(M)?N.delete(M):N.set(M,Q),N}):mt.size===1&&mt.has(M)?(d&&d([M]),We(new Map)):We(new Map([[M,Q]]))}return}if(e.activeTool==="hand"&&At&&Qs(At)&&!pn&&!fe&&!ft&&!Dt){let M=At,F=hr(M),k=mn(M),N=Hn(M),U="altKey"in y&&y.altKey;En.current={isDragging:!0,hasMoved:!1,mode:U?"copy":"move",startX:w.x-window.scrollX,startY:w.y-window.scrollY,element:M,originalParent:M.parentElement,originalIndex:kl(M),selector:F,durableSelector:k,elementInfo:{...N,selector:F}},y.preventDefault();return}if(e.activeTool==="hand"&&pn&&Ut){let M=pn,F=M.getAttribute("data-pm");F||(F=Math.random().toString(36).substring(2,8),M.setAttribute("data-pm",F));let k=mn(M),N=`[data-pm="${F}"]`,U=Hn(M),$=Vr(M),X=w.x-window.scrollX,te=w.y-window.scrollY,q=Un,Me=window.getComputedStyle(M).justifyContent,ze=0;if(q){let wt=gr(M).find(yt=>yt.axis===Ut);ze=wt?Ut==="column"?wt.w:wt.h:0}ut(M,"transition","none"),qt.current={isDragging:!0,hasMoved:!1,axis:Ut,startX:X,startY:te,originalRow:q?ze:$.row,originalColumn:q?ze:$.column,element:M,elementInfo:{...U,selector:N},selector:N,durableSelector:k,isAuto:q,originalJustifyContent:Me,visualGap:ze},Yn({axis:Ut,row:q?ze:$.row,column:q?ze:$.column});return}if(e.activeTool==="hand"&&ft&&Tn){let M=ft,F=M.getAttribute("data-pm");F||(F=Math.random().toString(36).substring(2,8),M.setAttribute("data-pm",F));let k=`[data-pm="${F}"]`,N=Hn(M),{fontSize:U,lineHeight:$}=Ji(M),X=U>0?$/U:1.2,te=w.x-window.scrollX,q=w.y-window.scrollY;ut(M,"transition","none");let Me=mn(M);lt.current={isDragging:!0,property:Tn,startX:te,startY:q,originalFontSize:U,originalLineHeight:$,originalRatio:X,element:M,elementInfo:{...N,selector:k},selector:k,durableSelector:Me},K({property:Tn,fontSize:U,lineHeight:$});return}if(e.activeTool==="hand"&&fe&&le){let M=fe,F=M.getAttribute("data-pm");F||(F=Math.random().toString(36).substring(2,8),M.setAttribute("data-pm",F));let k=`[data-pm="${F}"]`,N=mn(M),U=Hn(M),$=Gr(M),X=M.getBoundingClientRect(),te=Math.floor(X.height/2),q=w.y-window.scrollY;ut(M,"transition","none"),ae.current={isDragging:!0,corner:le,startY:q,original:$,maxRadius:te,element:M,elementInfo:{...U,selector:k},selector:k,durableSelector:N},Fe({corner:le,radius:{...$}});return}if(e.activeTool==="hand"&&At&&Dt){let M=At,F=M.getAttribute("data-pm");F||(F=Math.random().toString(36).substring(2,8),M.setAttribute("data-pm",F));let k=`[data-pm="${F}"]`,N=mn(M),U=Hn(M),$=Ei(M),X=w.x-window.scrollX,te=w.y-window.scrollY;ut(M,"transition","none"),Jn.current={isDragging:!0,side:Dt,startX:X,startY:te,original:$,element:M,elementInfo:{...U,selector:k},selector:k,durableSelector:N},et({side:Dt,padding:{...$}});return}let h=$i(w);if(h){let M=e.annotations.find(F=>F.id===h.annotationId);if(M&&M.type!=="text"&&(M.status??"pending")==="pending"){xr({annotationId:h.annotationId,handle:h.handle,startPoint:w,originalPoints:[...M.points],hasMoved:!1});return}}let R=fi(w);if(R&&R.points[0]){if(b&&T(),R.type!=="text"?(lr(R.id,H),R.color&&t({type:"SET_COLOR",payload:R.color})):H||jo(),c){let M=R.threadId||(R.groupId?e.annotations.find(F=>F.groupId===R.groupId&&F.threadId)?.threadId:void 0);M&&c(M)}so({annotation:R,startPoint:w,hasMoved:!1});return}if(H||jo(),e.activeTool==="text"){b&&T();let M="touches"in y?y.touches[0]??y.changedTouches[0]:y;if(M){let k=z(M.clientX,M.clientY,w);if(k){ie(k);return}}let F=Math.random().toString(36).substring(2,9);ie({id:F,point:w,text:"",fontSize:12,isNew:!0});return}v(!0),t({type:"START_PATH",payload:w})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,b,Kn,Pe,At,Dt,fe,le,pn,Ut,Un,ft,Tn,Q,mt,m,d,p,c,Qn,fi,$i,t,lr,jo,T,z]),Ne=kn(y=>{let w=Qn(y);if(e.activeTool==="text"&&e.isAnnotating){let H="touches"in y?y.touches[0]??y.changedTouches[0]:y,h=H&&!rn.current?su(H.clientX,H.clientY,C.current):null;we(R=>Um(R,h)?R:h);return}if(e.activeTool==="inspector"&&e.isAnnotating){let H=w.x-window.scrollX,h=w.y-window.scrollY,R=wr(H,h),M=R&&Kt(R)?null:R;M!==Pe&&(Et(M),Sn(M?Hn(M):null));return}if(e.activeTool==="model"&&e.isAnnotating){let H=w.x-window.scrollX,h=w.y-window.scrollY,R=wr(H,h);if(R!==He.current&&(He.current=R,Oe.current=0),R){let M=ks(R,Oe.current);Ie(M)}else Ie(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let H=w.x-window.scrollX,h=w.y-window.scrollY;Ke.current={x:H,y:h},tt({x:H,y:h});let R=_e.current.cmd,M=_e.current.shift;if(En.current.isDragging){let k=En.current,N=k.element;if(!N)return;if(!k.hasMoved){let X=Math.abs(H-k.startX),te=Math.abs(h-k.startY);if(X<=3&&te<=3)return;k.hasMoved=!0}let U=iu(H,h,N,C.current);if(!U){Yt(null);return}let $=U.reference.getBoundingClientRect();Yt({rect:$,placement:U.placement,mode:k.mode});return}if(qt.current.isDragging){let k=qt.current,N=k.element;if(!N)return;if(!k.hasMoved){let te=Math.abs(H-k.startX),q=Math.abs(h-k.startY);if(te<=2&&q<=2)return;k.hasMoved=!0,k.isAuto&&(ut(N,"justify-content","normal"),ut(N,"row-gap",`${k.visualGap}px`),ut(N,"column-gap",`${k.visualGap}px`),Tt(!1))}let U=k.axis,$=k.originalRow,X=k.originalColumn;if(U==="column"){let te=H-k.startX;X=k.originalColumn+te,R||($=k.originalRow+te)}else{let te=h-k.startY;$=k.originalRow+te,R||(X=k.originalColumn+te)}$=Math.max(0,$),X=Math.max(0,X),M&&($=re($),X=re(X)),$=Math.round($),X=Math.round(X),ut(N,"row-gap",`${$}px`),ut(N,"column-gap",`${X}px`),Yn({axis:U,row:$,column:X});return}if(ae.current.isDragging){let k=ae.current,N=k.element;if(!N)return;let U=h-k.startY,$=k.corner,X=k.original,te={...X};if(R){let q=X[$]+U;q=Math.max(0,Math.min(k.maxRadius,q)),M&&(q=re(q)),q=Math.round(q),te[$]=q}else{let q=X[$]+U;q=Math.max(0,Math.min(k.maxRadius,q)),M&&(q=re(q)),q=Math.round(q),te={"top-left":q,"top-right":q,"bottom-right":q,"bottom-left":q}}ut(N,"border-top-left-radius",`${te["top-left"]}px`),ut(N,"border-top-right-radius",`${te["top-right"]}px`),ut(N,"border-bottom-right-radius",`${te["bottom-right"]}px`),ut(N,"border-bottom-left-radius",`${te["bottom-left"]}px`),Fe({corner:$,radius:te});return}if(lt.current.isDragging){let k=lt.current,N=k.element;if(!N)return;let U=k.property,$=k.originalFontSize,X=k.originalLineHeight,te=[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 Me=H-k.startX;$=k.originalFontSize+Me,$=Math.max(1,$)}else{let Me=h-k.startY;X=k.originalLineHeight+Me,X=Math.max($,X)}if(M)if(U==="font-size"){let Me=te[0],ze=Math.abs($-Me);for(let dt of te){let wt=Math.abs($-dt);wt<ze&&(Me=dt,ze=wt)}$=Me}else{let Me=$>0?X/$:1.2,ze=Math.round(Me*2)/2;X=$*Math.max(1,ze)}$=Math.round($),X=Math.round(X*10)/10,ut(N,"font-size",`${$}px`);let q=$>0?Math.round(X/$*1e3)/1e3:1.2;ut(N,"line-height",`${q}`),K({property:U,fontSize:$,lineHeight:X});return}if(Jn.current.isDragging){let k=Jn.current,N=k.element;if(!N)return;let U=k.side,$=k.original,X=$.top,te=$.right,q=$.bottom,Me=$.left;if(U==="top"){let ze=k.startY-h;X=$.top+ze,R||(q=$.bottom+ze)}else if(U==="bottom"){let ze=h-k.startY;q=$.bottom+ze,R||(X=$.top+ze)}else if(U==="left"){let ze=k.startX-H;Me=$.left+ze,R||(te=$.right+ze)}else if(U==="right"){let ze=H-k.startX;te=$.right+ze,R||(Me=$.left+ze)}X=Math.max(0,X),te=Math.max(0,te),q=Math.max(0,q),Me=Math.max(0,Me),M&&(X=re(X),te=re(te),q=re(q),Me=re(Me)),X=Math.round(X),te=Math.round(te),q=Math.round(q),Me=Math.round(Me),ut(N,"padding",`${X}px ${te}px ${q}px ${Me}px`),et({side:U,padding:{top:X,right:te,bottom:q,left:Me}});return}let F=wr(H,h);for(;F&&F.tagName==="A";)F=F.parentElement;{let N=[];F&&N.push(F),fe&&fe!==F&&N.push(fe);let U=null,$=16,X=null;for(let te of N){let q=te.getBoundingClientRect(),Me=Gr(te),ze=[["top-left",q.left,q.top+Me["top-left"]],["top-right",q.right,q.top+Me["top-right"]],["bottom-right",q.right,q.bottom-Me["bottom-right"]],["bottom-left",q.left,q.bottom-Me["bottom-left"]]];for(let[dt,wt,yt]of ze){let Ot=Math.hypot(H-wt,h-yt);Ot<$&&($=Ot,U=dt,X=te)}}if(U&&X){ge(X),Ce(U),At&&at(null),Dt&&un(null),pn&&Cn(null),Ut&&$t(null),Tt(!1),ft&&An(null),Tn&&Do(null);return}}fe&&ge(null),le&&Ce(null);{let k=[];F&&Ls(F)&&k.push(F);let N=F?.parentElement??null;for(;N&&N!==document.body&&k.length<3;)Ls(N)&&k.push(N),N=N.parentElement;for(let U of k){let X=gr(U).find(te=>H>=te.x&&H<=te.x+te.w&&h>=te.y&&h<=te.y+te.h);if(X){Cn(U),$t(X.axis),Tt(Pa(U,X.axis)),At&&at(null),Dt&&un(null),ft&&An(null),Tn&&Do(null);return}}}pn&&Cn(null),Ut&&$t(null),Tt(!1);{let N=[];F&&N.push(F),ft&&ft!==F&&N.push(ft);let U=null,$=1/0,X=null;for(let te of N){if(!Ba(te))continue;let q=Ci(te);if(!q)continue;let Me=H>=q.left&&H<=q.right&&h>=q.top&&h<=q.bottom,ze=[["font-size",q.right,q.top+q.height/2],["line-height",q.left+q.width/2,q.bottom]];for(let[dt,wt,yt]of ze){let Ot=Math.hypot(H-wt,h-yt);(Me||Ot<12)&&Ot<$&&($=Ot,U=dt,X=te)}}U&&X?(An(X),Do(U)):(ft&&An(null),Tn&&Do(null))}if(F!==At&&at(F),F){let k=Ei(F),N=F.getBoundingClientRect(),U=he(H,h,N,k);un(U)}else un(null);return}if(ao){let{handle:H,originalPoints:h,hasMoved:R}=ao,M=e.annotations.find($=>$.id===ao.annotationId);if(!M)return;let F="metaKey"in y,k=F&&(y.metaKey||y.ctrlKey),N=F&&y.shiftKey,U;if(M.type==="line"){let $=h[0],X=h[h.length-1];H==="start"?U=[w,X]:U=[$,w]}else if(M.type==="freehand"){let $=Math.min(...h.map(rt=>rt.x)),X=Math.max(...h.map(rt=>rt.x)),te=Math.min(...h.map(rt=>rt.y)),q=Math.max(...h.map(rt=>rt.y)),Me=($+X)/2,ze=(te+q)/2,dt=X-$||1,wt=q-te||1,yt=dt/wt,Ot=$,Mt=X,Pt=te,Se=q;switch(H){case"topLeft":Ot=w.x,Pt=w.y;break;case"topRight":Mt=w.x,Pt=w.y;break;case"bottomLeft":Ot=w.x,Se=w.y;break;case"bottomRight":Mt=w.x,Se=w.y;break}if(k)switch(H){case"topLeft":Mt=X+($-Ot),Se=q+(te-Pt);break;case"topRight":Ot=$-(Mt-X),Se=q+(te-Pt);break;case"bottomLeft":Mt=X+($-Ot),Pt=te-(Se-q);break;case"bottomRight":Ot=$-(Mt-X),Pt=te-(Se-q);break}if(N){let rt=Mt-Ot,Mn=Se-Pt;if(Math.abs(rt/Mn)>yt){let Vt=Math.abs(Mn)*yt*Math.sign(rt);H==="topLeft"||H==="bottomLeft"?Ot=Mt-Vt:Mt=Ot+Vt}else{let Vt=Math.abs(rt)/yt*Math.sign(Mn);H==="topLeft"||H==="topRight"?Pt=Se-Vt:Se=Pt+Vt}}let st=Mt-Ot||1,cn=Se-Pt||1;U=h.map(rt=>({x:Ot+(rt.x-$)/dt*st,y:Pt+(rt.y-te)/wt*cn}))}else if(M.type==="circle"){let $=h[0],X=h[h.length-1],te=Math.min($.x,X.x),q=Math.max($.x,X.x),Me=Math.min($.y,X.y),ze=Math.max($.y,X.y),dt=(te+q)/2,wt=(Me+ze)/2,yt=q-te,Ot=ze-Me,Mt=te,Pt=q,Se=Me,st=ze;switch(H){case"top":if(Se=w.y,k&&(st=wt+(wt-w.y)),N){let rt=(st-Se)*(yt/Ot)/2;Mt=dt-rt,Pt=dt+rt}break;case"bottom":if(st=w.y,k&&(Se=wt-(w.y-wt)),N){let rt=(st-Se)*(yt/Ot)/2;Mt=dt-rt,Pt=dt+rt}break;case"left":if(Mt=w.x,k&&(Pt=dt+(dt-w.x)),N){let rt=(Pt-Mt)*(Ot/yt)/2;Se=wt-rt,st=wt+rt}break;case"right":if(Pt=w.x,k&&(Mt=dt-(w.x-dt)),N){let rt=(Pt-Mt)*(Ot/yt)/2;Se=wt-rt,st=wt+rt}break}U=[{x:Mt,y:Se},{x:Pt,y:st}]}else{let $=h[0],X=h[h.length-1],te=Math.min($.x,X.x),q=Math.max($.x,X.x),Me=Math.min($.y,X.y),ze=Math.max($.y,X.y),dt=(te+q)/2,wt=(Me+ze)/2,yt=q-te||1,Ot=ze-Me||1,Mt=yt/Ot,Pt=te,Se=q,st=Me,cn=ze;switch(H){case"topLeft":Pt=w.x,st=w.y;break;case"topRight":Se=w.x,st=w.y;break;case"bottomLeft":Pt=w.x,cn=w.y;break;case"bottomRight":Se=w.x,cn=w.y;break}if(k)switch(H){case"topLeft":Se=q+(te-Pt),cn=ze+(Me-st);break;case"topRight":Pt=te-(Se-q),cn=ze+(Me-st);break;case"bottomLeft":Se=q+(te-Pt),st=Me-(cn-ze);break;case"bottomRight":Pt=te-(Se-q),st=Me-(cn-ze);break}if(N){let rt=Se-Pt,Mn=cn-st;if(Math.abs(rt/Mn)>Mt){let Vt=Math.abs(Mn)*Mt*Math.sign(rt);H==="topLeft"||H==="bottomLeft"?Pt=Se-Vt:Se=Pt+Vt}else{let Vt=Math.abs(rt)/Mt*Math.sign(Mn);H==="topLeft"||H==="topRight"?st=cn-Vt:cn=st+Vt}}U=[{x:Pt,y:st},{x:Se,y:cn}]}t({type:"RESIZE_ANNOTATION",payload:{id:ao.annotationId,points:U,saveUndo:!R}}),R||xr({...ao,hasMoved:!0});return}if(gt&&(gt.annotation.status??"pending")==="pending"){let H=w.x-gt.startPoint.x,h=w.y-gt.startPoint.y;if((Math.abs(H)>2||Math.abs(h)>2)&&!gt.hasMoved)so({...gt,hasMoved:!0,startPoint:w}),t({type:"MOVE_ANNOTATION",payload:{id:gt.annotation.id,delta:{x:H,y:h},saveUndo:!0}});else if(gt.hasMoved){let M=w.x-gt.startPoint.x,F=w.y-gt.startPoint.y;so({...gt,startPoint:w}),t({type:"MOVE_ANNOTATION",payload:{id:gt.annotation.id,delta:{x:M,y:F}}})}return}!g||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:w})},[g,e.isAnnotating,e.activeTool,gt,ao,Pe,At,Dt,fe,le,pn,Ut,ft,Tn,Qn,t,re,he,C]),Ve=kn(y=>{if(En.current.isDragging){let h=En.current,R=Qn(y),M=R.x-window.scrollX,F=R.y-window.scrollY,k=h.element,N=k?iu(M,F,k,C.current):null;if(k&&N&&h.selector&&h.durableSelector&&h.elementInfo){let U=N.index,$=h.originalParent===N.parent&&U>h.originalIndex?U-1:U;if(!(h.mode==="move"&&h.originalParent===N.parent&&($===h.originalIndex||$===h.originalIndex+1))){let te=mn(N.parent),q=hr(N.parent),Me=mn(N.reference),ze=hr(N.reference),dt=k,wt=h.selector,yt=h.durableSelector,Ot=h.elementInfo;if(h.mode==="copy"){let Mt=k.cloneNode(!0);Mt instanceof Element&&(ru(Mt),Ml(N.parent,Mt,$),wt=hr(Mt),yt=mn(Mt),Ot={...Hn(Mt),selector:wt},dt=Mt)}else Ml(N.parent,k,$),dt=k;if(dt){let Mt=h.originalParent,Pt=Mt?mn(Mt):void 0,Se=Mt?hr(Mt):void 0,st={id:bi(),operation:h.mode,selector:wt,durableSelector:yt,element:Ot,sourceSelector:h.mode==="copy"?h.selector:void 0,sourceDurableSelector:h.mode==="copy"?h.durableSelector:void 0,sourceElement:h.mode==="copy"?h.elementInfo:void 0,originalParentSelector:Se,originalParentDurableSelector:Pt,originalIndex:h.originalIndex,targetParentSelector:q,targetParentDurableSelector:te,targetIndex:$,referenceSelector:ze,referenceDurableSelector:Me,placement:N.placement,pathname:se};t({type:"MODIFY_DOM_STRUCTURE",payload:st})}}}En.current={isDragging:!1,hasMoved:!1,mode:"move",startX:0,startY:0,element:null,originalParent:null,originalIndex:-1,selector:null,durableSelector:null,elementInfo:null},Yt(null);return}if(lt.current.isDragging){let h=lt.current,R=h.element;if(R&&h.selector&&h.elementInfo&&fn){R instanceof HTMLElement&&(R.style.removeProperty("font-size"),R.style.removeProperty("line-height"),R.style.removeProperty("transition"));let M=[];if(h.originalFontSize!==fn.fontSize&&(ut(R,"font-size",`${fn.fontSize}px`),M.push({property:"font-size",original:`${h.originalFontSize}px`,modified:`${fn.fontSize}px`})),h.originalLineHeight!==fn.lineHeight){let F=h.originalFontSize>0?Math.round(h.originalLineHeight/h.originalFontSize*1e3)/1e3:1.2,k=fn.fontSize>0?Math.round(fn.lineHeight/fn.fontSize*1e3)/1e3:1.2;ut(R,"line-height",`${k}`),M.push({property:"line-height",original:`${F}`,modified:`${k}`})}M.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:h.selector,durableSelector:h.durableSelector??void 0,element:h.elementInfo,changes:M}})}lt.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},K(null);return}if(qt.current.isDragging){let h=qt.current,R=h.element,M="button"in y&&y.button===2;if(!h.hasMoved&&!M&&R&&h.selector&&h.elementInfo){R instanceof HTMLElement&&R.style.removeProperty("transition");let F=["space-between","space-around","stretch","normal"],k=h.originalJustifyContent||"normal",N=F.indexOf(k),U=F[(N+1)%F.length],$=[];U==="normal"?(ut(R,"justify-content","normal"),$.push({property:"justify-content",original:h.originalJustifyContent,modified:"normal"})):U==="stretch"?(ut(R,"justify-content",U),ut(R,"row-gap","8px"),ut(R,"column-gap","8px"),$.push({property:"justify-content",original:h.originalJustifyContent||"normal",modified:U}),h.originalRow!==8&&$.push({property:"row-gap",original:`${h.originalRow}px`,modified:"8px"}),h.originalColumn!==8&&$.push({property:"column-gap",original:`${h.originalColumn}px`,modified:"8px"})):(R instanceof HTMLElement&&(R.style.removeProperty("row-gap"),R.style.removeProperty("column-gap")),ut(R,"justify-content",U),$.push({property:"justify-content",original:h.originalJustifyContent||"normal",modified:U}),h.originalRow>0&&$.push({property:"row-gap",original:`${h.originalRow}px`,modified:"0px"}),h.originalColumn>0&&$.push({property:"column-gap",original:`${h.originalColumn}px`,modified:"0px"})),$.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:h.selector,durableSelector:h.durableSelector??void 0,element:h.elementInfo,changes:$}})}else if(h.hasMoved&&R&&h.selector&&h.elementInfo&&Wt){R instanceof HTMLElement&&(R.style.removeProperty("row-gap"),R.style.removeProperty("column-gap"),R.style.removeProperty("transition"));let F=[];h.isAuto?(R instanceof HTMLElement&&R.style.removeProperty("justify-content"),ut(R,"justify-content","normal"),ut(R,"row-gap",`${Wt.row}px`),ut(R,"column-gap",`${Wt.column}px`),F.push({property:"justify-content",original:h.originalJustifyContent,modified:"normal"}),F.push({property:"row-gap",original:"0px",modified:`${Wt.row}px`}),F.push({property:"column-gap",original:"0px",modified:`${Wt.column}px`})):(h.originalRow!==Wt.row&&(ut(R,"row-gap",`${Wt.row}px`),F.push({property:"row-gap",original:`${h.originalRow}px`,modified:`${Wt.row}px`})),h.originalColumn!==Wt.column&&(ut(R,"column-gap",`${Wt.column}px`),F.push({property:"column-gap",original:`${h.originalColumn}px`,modified:`${Wt.column}px`}))),F.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:h.selector,durableSelector:h.durableSelector??void 0,element:h.elementInfo,changes:F}})}qt.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},Yn(null);return}if(ae.current.isDragging){let h=ae.current,R=h.element;if(R&&h.selector&&h.elementInfo&&pt){R instanceof HTMLElement&&(R.style.removeProperty("border-top-left-radius"),R.style.removeProperty("border-top-right-radius"),R.style.removeProperty("border-bottom-right-radius"),R.style.removeProperty("border-bottom-left-radius"),R.style.removeProperty("transition"));let M=["top-left","top-right","bottom-right","bottom-left"],F={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},k=[];for(let N of M)h.original[N]!==pt.radius[N]&&(ut(R,F[N],`${pt.radius[N]}px`),k.push({property:F[N],original:`${h.original[N]}px`,modified:`${pt.radius[N]}px`}));k.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:h.selector,durableSelector:h.durableSelector??void 0,element:h.elementInfo,changes:k}})}ae.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},Fe(null);return}if(Jn.current.isDragging){let h=Jn.current,R=h.element,M=h.selector,F=h.elementInfo;if(R&&M&&F&&Re){let k=h.original,N=Re.padding;R instanceof HTMLElement&&(R.style.removeProperty("padding"),R.style.removeProperty("transition"));let U=[],$=[{prop:"padding-top",origVal:k.top,newVal:N.top},{prop:"padding-right",origVal:k.right,newVal:N.right},{prop:"padding-bottom",origVal:k.bottom,newVal:N.bottom},{prop:"padding-left",origVal:k.left,newVal:N.left}];for(let{prop:X,origVal:te,newVal:q}of $)te!==q&&(ut(R,X,`${q}px`),U.push({property:X,original:`${te}px`,modified:`${q}px`}));U.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:M,durableSelector:h.durableSelector??void 0,element:F,changes:U}})}Jn.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},et(null);return}if(ao){xr(null);return}if(gt){if(!gt.hasMoved&>.annotation.type==="text"&&(gt.annotation.status??"pending")==="pending"){let h=Qn(y);ie({id:gt.annotation.id,point:gt.annotation.points[0],text:gt.annotation.text||"",fontSize:gt.annotation.fontSize||12,isNew:!1,clickPoint:h,groupId:gt.annotation.groupId})}so(null);return}if(!g)return;let w=5;if(e.currentPath.length>=2){let h=e.currentPath[0],R=e.currentPath[e.currentPath.length-1],M=Math.abs(R.x-h.x),F=Math.abs(R.y-h.y);if((e.activeTool==="line"?Math.sqrt(M*M+F*F)<w:M<w&&F<w)&&["rectangle","circle","line"].includes(e.activeTool)){v(!1),t({type:"CANCEL_PATH"});return}}let H=ka(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let h=e.currentPath[0],R=e.currentPath[e.currentPath.length-1],M=Math.min(h.x,R.x),F=Math.max(h.y,R.y),k=e.strokeWidth/2,N=Math.random().toString(36).substring(2,9);V({point:{x:M-k+4,y:F+k+4},groupId:N}),v(!1),t({type:"FINISH_PATH",payload:{groupId:N,elements:H}});return}v(!1),t({type:"FINISH_PATH",payload:{elements:H}})},[g,gt,ao,Re,pt,Wt,fn,Qn,t,e.activeTool,e.currentPath,e.strokeWidth,se]),Ee=kn(y=>{let w=y.target.value;Vo.current=y.target.selectionStart,ie(H=>(H?.domEdit&&(H.domEdit.textNode.nodeValue=w),H&&{...H,text:w}))},[]),Qe=kn(y=>{y.key==="Escape"?(rn.current?.domEdit&&(rn.current.domEdit.textNode.nodeValue=rn.current.domEdit.originalText),ie(null)):y.key==="Enter"&&!y.shiftKey&&(y.preventDefault(),T())},[T]),Dn=kn(y=>{if(!b||b.domEdit)return;let w=y.clipboardData.items,H=[];for(let h=0;h<w.length;h++){let R=w[h];if(R.type.startsWith("image/")){let M=R.getAsFile();M&&H.push(M)}}H.length>0&&(y.preventDefault(),ie(h=>h?{...h,images:[...h.images||[],...H]}:null))},[b]),Rt=kn(y=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){y.preventDefault();let H=At||pn||fe||ft;if(H&&!Kt(H)){let h=Hn(H),R=mn(H);t({type:"SELECT_ELEMENT",payload:{el:H,info:{...h,selector:R}}})}return}y.preventDefault();let w=C.current;w&&(B.current=!0,w.style.pointerEvents="none",setTimeout(()=>{B.current&&(B.current=!1,w.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,At,pn,fe,ft,t,Kt,C]);Gn(()=>{if(!(e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement))return;let y=null,w=e.inspectedElement.info.selector,H=()=>{y=null;let k=hn(w);if(k&&k!==e.inspectedElement?.el){let N=Hn(k);t({type:"SELECT_ELEMENT",payload:{el:k,info:{...N,selector:w}}});return}Z(N=>N+1)},h=()=>{y===null&&(y=requestAnimationFrame(H))},R=k=>{let N=k.target,U=N instanceof Element?N:N.parentElement;return U?!U.closest('#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel], [data-devtools="panel"], [data-devtools="panel-wrapper"]'):!0},M=new MutationObserver(k=>{k.some(R)&&h()});M.observe(document.documentElement,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["class","style","href"],characterData:!0});let F=["vite:afterUpdate","vite:beforeFullReload","turbo:before-render","turbo:render"];return F.forEach(k=>window.addEventListener(k,h)),()=>{M.disconnect(),F.forEach(k=>window.removeEventListener(k,h)),y!==null&&cancelAnimationFrame(y)}},[e.activeTool,e.isAnnotating,e.inspectedElement,t]),Gn(()=>{let y=me.filter(F=>F.linkedSelector);if(y.length===0)return;let w=null,H=document.createElement("canvas").getContext("2d"),h=()=>{let F=[];for(let k of y){let N=document.querySelector(k.linkedSelector);if(!N&&k.elements?.[0]?.selector&&k.linkedSelector.startsWith("[data-pm=")){try{N=document.querySelector(k.elements[0].selector)}catch{}if(N){let yt=k.linkedSelector.match(/data-pm="([^"]+)"/)?.[1];yt&&N.setAttribute("data-pm",yt)}}if(!N)continue;let U=N.getBoundingClientRect(),$=Ae.some(yt=>{try{return N.matches(yt.selector)}catch{return!1}}),X=y.filter(yt=>yt.id!==k.id&&yt.timestamp<k.timestamp&&yt.linkedSelector===k.linkedSelector).length,te=($?1:0)+X,q;if(k.text&&H){let yt=k.fontSize||12;H.font=`${yt}px ${Wn}`,q=Math.max(...k.text.split(`
|
|
27
|
+
`).map(Ot=>H.measureText(Ot).width))}let Me=U.top>=Cr*(1+te)?"top-left":"bottom-left",ze=au(U,Me,te,D?.current,q),dt=k.points[0],wt=Me!==k.linkedAnchor;dt&&(wt||Math.abs(ze.x-dt.x)>1||Math.abs(ze.y-dt.y)>1)&&F.push({id:k.id,point:ze,linkedAnchor:wt?Me:void 0})}F.length>0&&t({type:"UPDATE_LINKED_POSITIONS",payload:{updates:F}})},R=()=>{w&&cancelAnimationFrame(w),w=requestAnimationFrame(h)};h(),window.addEventListener("scroll",R,!0),window.addEventListener("resize",R,!0),window.addEventListener("load",R),document.fonts.ready.then(R);let M=new MutationObserver(R);return M.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",R,!0),window.removeEventListener("resize",R,!0),window.removeEventListener("load",R),M.disconnect(),w&&cancelAnimationFrame(w)}},[me,t]);let Zt=()=>{if(!e.isAnnotating)return"default";if(ao){let{handle:y}=ao;return y==="start"||y==="end"?"move":y==="top"||y==="bottom"?"ns-resize":y==="left"||y==="right"?"ew-resize":y==="topLeft"||y==="bottomRight"?"nwse-resize":"nesw-resize"}if(e.activeTool==="text")return"text";if(e.activeTool==="hand"){let y=Wt?.axis??Ut;if(y==="row")return"ns-resize";if(y==="column")return"ew-resize";if(pt||le)return"ns-resize";let w=fn?.property??Tn;if(w==="font-size")return"ew-resize";if(w==="line-height")return"ns-resize";let H=Re?.side??Dt;return H==="top"||H==="bottom"?"ns-resize":H==="left"||H==="right"?"ew-resize":"default"}return"crosshair"},ur={position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9998,pointerEvents:e.isAnnotating?"auto":"none",visibility:e.isAnnotating?"visible":"hidden",cursor:Zt()},Oo=kn(()=>{let y=C.current;if(!y||!b)return{width:100,height:12*1.4,isWrapped:!1};if(b.domEdit)return{width:Math.max(1,b.domEdit.rect.width),height:Math.max(1,b.domEdit.rect.height),isWrapped:!1};let w=y.getContext("2d");if(!w)return{width:100,height:b.fontSize*1.4,isWrapped:!1};w.font=`${b.fontSize}px ${Wn}`;let h=w.measureText("Type here...").width,R=b.text.split(`
|
|
28
|
+
`),M=R.length>0?Math.max(h,...R.map($=>w.measureText($||" ").width)):h,F=b.point.x-Pn.x,k=Ui(F);if(M>k){let $=ed(w,R,k),X=Math.min(k,Math.max(h,...$.map(q=>w.measureText(q).width))),te=Math.max(1,$.length)*b.fontSize*1.4;return{width:X,height:te,isWrapped:!0}}let U=Math.max(1,R.length)*b.fontSize*1.4;return{width:M,height:U,isWrapped:!1}},[b,C,Pn.x])(),Dr=!!b?.domEdit,Wi=b?Math.max(1,b.text.split(`
|
|
29
|
+
`).length)*b.fontSize*1.4+8:0,gi=Dr?Oo.height:Oo.height+8,ba=Oo.isWrapped?gi-Wi:0,hs=b?Dr?b.domEdit.rect.top:b.point.y-4-Pn.y-ba:0,Jo=b?Dr?b.domEdit.rect.left:b.point.x-4-Pn.x:0,Or=Dr?Oo.width:Oo.width+8,Je=b?Dr?hs:Wa(hs,gi,je,Jo,Or):0,On=b?b.domEdit?{position:"fixed",left:Jo,top:Je,zIndex:9999,width:Or,height:gi,minHeight:0,padding:0,margin:0,boxSizing:"border-box",appearance:"none",fontSize:b.fontSize,fontFamily:b.domEdit.fontFamily,fontWeight:b.domEdit.fontWeight,fontStyle:b.domEdit.fontStyle,color:"transparent",caretColor:e.activeColor,WebkitTextFillColor:"transparent",backgroundColor:"transparent",border:`1px solid ${e.activeColor}`,borderRadius:0,outline:"none",boxShadow:"none",lineHeight:b.domEdit.lineHeight,letterSpacing:b.domEdit.letterSpacing,textTransform:b.domEdit.textTransform,textAlign:b.domEdit.textAlign,wordSpacing:b.domEdit.wordSpacing,textDecoration:b.domEdit.textDecoration,textShadow:b.domEdit.textShadow,resize:"none",overflow:"hidden",whiteSpace:"pre",wordBreak:"normal",overflowWrap:"normal"}:{position:"fixed",left:Jo,top:Je,zIndex:9999,width:Or,height:gi,padding:4,fontSize:b.fontSize,fontFamily:Wn,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:Oo.isWrapped?"pre-wrap":"pre",wordBreak:Oo.isWrapped?"break-word":void 0}:{},zn=y=>y?e.annotations.find(w=>w.id===y)?.linkedSelector??null:null,go=(y,w)=>{if(!w)return!1;try{return y.matches(w)}catch{return!1}},ys=[b?.linkedSelector,A?.linkedSelector,zn(P),zn(Ln),wn].filter(Boolean),_r=y=>ys.some(w=>go(y,w)),_o=b?.domEdit?Ur(e.activeColor,.28):"#000000",ec=b?.domEdit?"transparent":"#ffffff";return Oi(_i,{children:[kt("canvas",{ref:O,id:"devtools-canvas",style:ur,onMouseDown:$e,onMouseMove:Ne,onMouseUp:y=>Ve(y),onMouseLeave:y=>{Ve(y),Et(null),Sn(null),we(null)},onTouchStart:$e,onTouchMove:Ne,onTouchEnd:y=>Ve(y),onContextMenu:Rt}),e.activeTool==="text"&&e.isAnnotating&&ue&&!b&&kt("div",{"data-devtools":"text-edit-hover",style:{position:"fixed",left:ue.rect.left-3,top:ue.rect.top-3,width:ue.rect.width+6,height:ue.rect.height+6,pointerEvents:"none",zIndex:9996,border:`1px solid ${e.activeColor}`,backgroundColor:Ur(e.activeColor,.08),boxSizing:"border-box"}}),b&&Oi(_i,{children:[kt("style",{children:`
|
|
30
30
|
#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }
|
|
31
31
|
#devtools-text-input::selection {
|
|
32
32
|
background: ${_o};
|
|
33
|
-
color: ${
|
|
33
|
+
color: ${ec};
|
|
34
34
|
}
|
|
35
|
-
`}),kt("textarea",{id:"devtools-text-input",ref:ke,value:b.text,onChange:Ee,onKeyDown:Qe,onPaste:Dn,onBlur:M,placeholder:"Type here...",wrap:b.domEdit?"off":void 0,spellCheck:!1,style:On}),b.images&&b.images.length>0&&Di("div",{"data-devtools":!0,style:{position:"fixed",left:b.point.x-4-Pn.x,top:b.point.y-4-Pn.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:[b.images.length," image",b.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&Ae.length>0&&kt(vd,{styleModifications:Ae,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(ye.map(y=>y.groupId||y.id)).size,dispatch:t,inFlightSelectors:s,toolbarRef:A,onHoverSelector:co}),e.activeTool==="hand"&&e.isAnnotating&&Ae.length>0&&kt(Sd,{styleModifications:Ae,accentColor:e.activeColor}),e.isAnnotating&&kt(id,{annotations:ye,supersededAnnotations:sn,inFlightIds:o,activeIds:r,queuePositions:i,scrollX:Pn.x,scrollY:Pn.y,annotationGroupMap:Ct,onViewThread:c,onSelectAnnotation:lr,onHoverAnnotation:Nt,canvasRef:C,toolbarRef:A}),e.isAnnotating&&a&&a.size>0&&kt(Ya,{inFlightSelectorColors:a}),e.isAnnotating&&Bn&&kt(Ya,{inFlightSelectorColors:Bn,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&ht&&kt("div",{"data-devtools":"dom-drop-preview",style:{position:"fixed",zIndex:9997,pointerEvents:"none",backgroundColor:e.activeColor,boxShadow:`0 0 0 1px ${e.activeColor}`,opacity:ht.mode==="copy"?.72:1,...ht.rect.height>=ht.rect.width?{left:ht.rect.left-2,top:ht.placement==="before"?ht.rect.top-2:ht.rect.bottom,width:ht.rect.width+4,height:2}:{left:ht.placement==="before"?ht.rect.left-2:ht.rect.right,top:ht.rect.top-2,width:2,height:ht.rect.height+4}}}),e.activeTool==="hand"&&e.isAnnotating&&(jt?Qt.current.element:pn)&&kt(el,{element:jt?Qt.current.element:pn,gap:jt?{row:jt.row,column:jt.column}:Vr(pn),accentColor:e.activeColor,hoveredAxis:Xt,draggingAxis:jt?.axis??null,cursorViewport:Le,isAutoGap:Un,refreshKey:Ft}),e.activeTool==="hand"&&e.isAnnotating&&j&&kt(Qd,{element:j.target,modifier:j.modifier,accentColor:e.activeColor,refreshKey:Ft}),e.activeTool==="hand"&&e.isAnnotating&&!j&&(pt?ae.current.element:fe)&&kt(dd,{element:pt?ae.current.element:fe,radius:pt?.radius??Gr(fe),accentColor:e.activeColor,hoveredCorner:le,draggingCorner:pt?.corner??null,cursorViewport:Le}),e.activeTool==="hand"&&e.isAnnotating&&!j&&(fn?lt.current.element:ft)&&kt(eu,{element:fn?lt.current.element:ft,fontSize:fn?.fontSize??Gi(ft).fontSize,lineHeight:fn?.lineHeight??Gi(ft).lineHeight,accentColor:e.activeColor,hoveredProperty:Mn,draggingProperty:fn?.property??null,cursorViewport:Le}),e.activeTool==="hand"&&e.isAnnotating&&!j&&(Re?Jn.current.element:At)&&kt(il,{element:Re?Jn.current.element:At,padding:Re?.padding??wi(At),accentColor:e.activeColor,hoveredSide:Dt,draggingSide:Re?.side??null,cursorViewport:Le,refreshKey:fn?fn.fontSize+fn.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&kt(Oi,{children:Pe&&!e.inspectedElement&&(()=>{if(_r(Pe))return null;let y=!!P||!!b?.linkedSelector||ye.some(w=>{if(!w.linkedSelector)return!1;try{return Pe.matches(w.linkedSelector)}catch{return!1}});return kt(Zo,{element:Pe,isSelected:!1,elementInfo:dn,color:e.activeColor,hideTooltip:y})})()}),(b?.linkedSelector||P?.linkedSelector)&&(()=>{let y=b?.linkedSelector||P?.linkedSelector;if(!y)return null;let w=null;try{w=document.querySelector(y)}catch{}return w?kt(Zo,{element:w,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),B&&(()=>{let y=e.annotations.find(h=>h.id===B);if(!y?.linkedSelector)return null;let w=null;try{w=document.querySelector(y.linkedSelector)}catch{}if(!w)return null;let H=!!(o&&o.has(y.id));return kt(Zo,{element:w,isSelected:!H,color:y.color,hideTooltip:!0})})(),Ln&&(()=>{let y=e.annotations.find(R=>R.id===Ln);if(!y?.linkedSelector)return null;let w=null;try{w=document.querySelector(y.linkedSelector)}catch{}if(!w)return null;let H=y.groupId?e.annotations.filter(R=>R.groupId===y.groupId):[y],h=!!(o&&H.some(R=>o.has(R.id)));return kt(Zo,{element:w,isSelected:!h,color:y.color,hideTooltip:!0})})(),wn&&(()=>{let y=null;try{y=document.querySelector(wn)}catch{}if(!y)return null;let w=!!(s&&s.has(wn));return kt(Zo,{element:y,isSelected:!w,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&mt.size>0&&[...mt.entries()].map(([y,w])=>kt(Zo,{element:w.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:w.rootElement.tagName.toLowerCase(),reactComponent:y},color:"#8b5cf6"},y)),e.activeTool==="model"&&e.isAnnotating&&cr&&kt(Zo,{element:cr.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:cr.rootElement.tagName.toLowerCase(),reactComponent:cr.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&_.length>0&&_.map((y,w)=>kt("div",{style:{position:"absolute",left:y.x,top:y.y,width:y.width,height:y.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:y.direction==="vertical"?Di(Oi,{children:[kt("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),kt("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),kt("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),kt("div",{style:{position:"absolute",left:"calc(50% + 6px)",top:y.height<16?-6:"50%",transform:y.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(y.height)})]}):Di(Oi,{children:[kt("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),kt("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),kt("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),kt("div",{style:{position:"absolute",left:y.width<30?0:"50%",top:(y.width<30,void 0),bottom:"calc(50% + 4px)",transform:y.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(y.width)})]})},w)),e.activeTool==="model"&&e.isAnnotating&&Q&&kt(Zo,{element:Q.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:Q.rootElement.tagName.toLowerCase(),reactComponent:Q.name},color:m?.has(Q.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&Di(Oi,{children:[(()=>{let y=new Set(ye.map(k=>k.groupId||k.id)).size,w=e.inspectedElement.info.selector,H=Ae.findIndex(k=>k.selector===w),h=H>=0?y+H+1:y+Ae.length+1,R=Ae.find(k=>k.selector===w),T=R?.changes.length??0,F=!!R?.captured;return kt(Zo,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:F?"#999999":e.activeColor,annotationNumber:h,changeCount:T})})(),(bt==="padding"||bt==="padding-x"||bt==="padding-y")&&kt(il,{element:e.inspectedElement.el,padding:wi(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:bt==="padding-x"?"left":bt==="padding-y"?"top":null,draggingSide:null}),bt==="gap"&&kt(el,{element:e.inspectedElement.el,gap:Vr(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),(bt==="width"||bt==="height")&&kt(gd,{element:e.inspectedElement.el,axis:bt,accentColor:e.activeColor,avoidElement:xe.current}),kt(qd,{element:e.inspectedElement.el,elementInfo:e.inspectedElement.info,selector:e.inspectedElement.info.selector,styleModifications:Ae,dispatch:t,onClose:()=>t({type:"SELECT_ELEMENT",payload:null}),onHover:oo,accentColor:e.activeColor,toolbarRef:A,panelWrapperRef:xe,refreshKey:xo})]})]})}import{useCallback as Co,useEffect as In,useLayoutEffect as p0,useMemo as si,useRef as Yt,useState as vr}from"react";import{Check as _u,ChevronDown as f0,Circle as g0,Component as m0,Fingerprint as h0,Hand as y0,MessageCircle as b0,Pen as v0,RefreshCw as x0,Slash as S0,Square as w0,Trash2 as E0,Type as C0}from"lucide-react";import{useEffect as lu,useRef as cu}from"react";function du(e,t,n,o,r){let i=cu(0),s=cu(t.annotations);lu(()=>{if(!n.current||!e)return;s.current=t.annotations;let a=t.annotations.length;a>0&&(a>=i.current||!o)&&(localStorage.setItem(r.annotations,JSON.stringify(t.annotations)),i.current=a)},[t.annotations,e,o,n,r]),lu(()=>{n.current&&(localStorage.setItem(r.expanded,String(e)),e&&(localStorage.setItem(r.styleMods,JSON.stringify(t.styleModifications)),localStorage.setItem(r.textMods,JSON.stringify(t.textModifications)),localStorage.setItem(r.domMods,JSON.stringify(t.domModifications)),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.textModifications,t.domModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,n,r])}import{useCallback as ro,useEffect as oi,useMemo as kl,useRef as ls,useState as rr}from"react";import{Fragment as fh,jsx as nn,jsxs as No}from"react/jsx-runtime";var Ym={width:340,backgroundColor:"#eaeaea",...Ii,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"},Um=(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"}),Km=e=>({border:0,background:"transparent",color:e?"#111827":"#6b7280",cursor:"pointer",fontFamily:"inherit",fontSize:10,fontWeight:700,padding:0,textTransform:"uppercase"}),Il={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},Zs={...Il,borderColor:"#111827",background:"#111827",color:"#ffffff"},Xm={...Zs,cursor:"default",opacity:.55},Rl={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"},qm={...Rl,appearance:"none",resize:"none",overflow:"hidden",outline:"none"},gu={...Rl,fontWeight:700,fontSize:11,lineHeight:1.35},Zm={...gu,appearance:"none",resize:"none",overflow:"hidden",outline:"none"},uu={display:"grid",gridTemplateColumns:"12px minmax(0, 1fr)",columnGap:4,alignItems:"start",marginBottom:5},Qm={pass:"#2f855a",fail:"#c53030",needs_review:"#6b7280"},eh={pass:"\u2611",fail:"\u2612",needs_review:"\u25A1"},th=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"Eval",nh=[{id:"pending",label:"Pending"},{id:"approved",label:"Approved"},{id:"rejected",label:"Rejected"}],pu="popmelt-eval-active-status",oh=e=>e==="pending"||e==="approved"||e==="rejected";function mu({bridgeUrl:e,refreshKey:t,onMouseEnter:n,onMouseLeave:o,onSynthesize:r,isSynthesizing:i,onRunEval:s,onViewRunThread:a,runningEvalIds:l=[],snapPosition:c="bottom-right"}){let u=ls(null),d=i||!r,[p,f]=rr({version:1,updatedAt:0,cases:[]}),[m,E]=rr(!0),[x,S]=rr(()=>{if(typeof window>"u")return"pending";try{let O=window.localStorage.getItem(pu);return oh(O)?O:"pending"}catch{return"pending"}});oi(()=>{let O=u.current;if(!O)return;let D=n,g=o;return D&&O.addEventListener("mouseenter",D),g&&O.addEventListener("mouseleave",g),()=>{D&&O.removeEventListener("mouseenter",D),g&&O.removeEventListener("mouseleave",g)}},[n,o]);let B=ro(()=>{e&&(E(!0),ac(e).then(O=>{f(O),E(!1)}).catch(()=>E(!1)))},[e]);oi(()=>{B()},[B,t]),oi(()=>{try{window.localStorage.setItem(pu,x)}catch{}},[x]);let L=ro((O,D)=>{e&&(f(g=>({...g,cases:g.cases.map(v=>v.id===O?{...v,status:D}:v)})),lc(O,D,e).then(g=>{g||B()}).catch(B))},[e,B]),A=ro((O,D)=>{if(!e)return;let g=D.map(v=>v.trim()).filter(Boolean);g.length!==0&&(f(v=>({...v,cases:v.cases.map(b=>b.id===O?{...b,assertions:g}:b)})),bs(O,{assertions:g},e).then(v=>{v||B()}).catch(B))},[e,B]),C=ro((O,D)=>{if(!e)return;let g=D.trim();g&&(f(v=>({...v,cases:v.cases.map(b=>b.id===O?{...b,title:g}:b)})),bs(O,{title:g},e).then(v=>{v||B()}).catch(B))},[e,B]),U=kl(()=>{let O=p.cases.filter(v=>v.status==="pending"),D=p.cases.filter(v=>v.status==="approved"),g=p.cases.filter(v=>v.status==="rejected");return{pending:O,approved:D,rejected:g}},[p.cases]),ee=U[x],se=kl(()=>{let O=new Map,D=[...p.runs??[]].sort((g,v)=>v.completedAt-g.completedAt);for(let g of D)O.has(g.evalId)||O.set(g.evalId,g);return O},[p.runs]);return No("div",{ref:u,style:{...Ym,...Es(c)},children:[No("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[nn("span",{children:"Evals"}),nn("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"E"})]}),nn("button",{type:"button",disabled:d,onClick:r,style:Um(d,i),children:i?"Synthesizing...":"Synthesize"}),nn("div",{style:{display:"flex",gap:12,marginTop:8},children:nh.map(O=>nn(ah,{active:x===O.id,label:`${O.label} ${U[O.id].length}`,onClick:()=>S(O.id)},O.id))}),nn("div",{style:{marginTop:10,flex:1,minHeight:0,overflowY:"auto",display:"flex",flexDirection:"column",gap:10},children:m?nn("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):p.cases.length===0?nn("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.5},children:"No inferred evals yet."}):ee.length===0?No("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.5},children:["No ",x," evals."]}):nn(rh,{cases:ee,latestRunsByEvalId:se,runningEvalIds:l,onStatus:L,onRun:s,onViewRunThread:a,onTitleChange:C,onAssertionsChange:A})})]})}function rh({cases:e,latestRunsByEvalId:t,runningEvalIds:n,onStatus:o,onRun:r,onViewRunThread:i,onTitleChange:s,onAssertionsChange:a}){return nn("div",{style:{display:"flex",flexDirection:"column",gap:6},children:e.map(l=>{let c=new Set([...l.sourceDecisionIds,...l.sourceThreadIds]).size,u=c>0?`, ${c} ${c===1?"mention":"mentions"}`:"",d=t.get(l.id),p=n.includes(l.id);return No("div",{style:{border:"1px solid rgba(0,0,0,0.08)",background:"rgba(255,255,255,0.35)",padding:8},children:[No("div",{children:[nn(lh,{value:l.title,onCommit:f=>s(l.id,f)}),No("div",{style:{color:"#9ca3af",fontSize:10,marginTop:2},children:[th(l.category),u]})]}),nn("div",{style:{marginTop:6,color:"#374151",fontSize:11,lineHeight:1.25},children:nn(ph,{assertions:l.assertions,latestRun:d,onChange:f=>a(l.id,f)})}),nn(sh,{item:l,latestRun:d,isRunning:p,onStatus:o,onRun:r,onViewRunThread:i})]},l.id)})})}function ih(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 sh({item:e,latestRun:t,isRunning:n,onStatus:o,onRun:r,onViewRunThread:i}){if(e.status==="pending")return No("div",{style:{display:"flex",gap:6,marginTop:8},children:[nn("button",{type:"button",style:Il,onClick:()=>o(e.id,"rejected"),children:"Reject"}),nn("button",{type:"button",style:Zs,onClick:()=>o(e.id,"approved"),children:"Accept"})]});if(e.status==="approved"){let s=n||!r;return No("div",{style:{display:"flex",gap:6,marginTop:8},children:[t?.threadId&&i&&nn("button",{type:"button",style:Il,onClick:()=>i(t.threadId),children:ih(t)}),nn("button",{type:"button",disabled:s,style:s?Xm:Zs,onClick:()=>r?.(e),children:n?"Running...":"Run"})]})}return nn("div",{style:{display:"flex",gap:6,marginTop:8},children:nn("button",{type:"button",style:Zs,onClick:()=>o(e.id,"approved"),children:"Approve"})})}function ah({active:e,label:t,onClick:n}){let[o,r]=rr(!1);return nn("button",{type:"button",style:Km(e||o),onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),onClick:n,children:t})}function lh({value:e,onCommit:t}){let[n,o]=rr(!1),[r,i]=rr(e),s=ls(null);oi(()=>{n||i(e)},[n,e]),oi(()=>{if(!n)return;let u=s.current;u&&(u.focus(),u.select(),u.style.height="auto",u.style.height=`${u.scrollHeight}px`)},[n]);let a=ro(()=>{let u=r.trim();o(!1),u&&u!==e?t(u):i(e)},[r,t,e]),l=ro(()=>{i(e),o(!1)},[e]),c=ro(u=>{u.key==="Enter"?(u.preventDefault(),a()):u.key==="Escape"&&(u.preventDefault(),l())},[l,a]);return n?nn("textarea",{ref:s,rows:1,value:r,onChange:u=>{i(u.target.value),u.currentTarget.style.height="auto",u.currentTarget.style.height=`${u.currentTarget.scrollHeight}px`},onBlur:a,onKeyDown:c,style:Zm}):nn("button",{type:"button",onClick:()=>o(!0),style:gu,children:e})}function ch(e){return e.map(t=>t.trim()).filter(Boolean)}function dh(e,t){return e.length===t.length&&e.every((n,o)=>n===t[o])}function fu(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}function uh(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 s=e.selectionStart??0;o.textContent=e.value.slice(0,s),r.textContent="\u200B",o.appendChild(r),o.appendChild(document.createTextNode(e.value.slice(s)||"\u200B")),i.textContent="\u200B",o.appendChild(i),document.body.appendChild(o);let a=Math.max(0,Math.round(r.offsetTop/n)),l=Math.max(0,Math.round(i.offsetTop/n));return o.remove(),{lineIndex:a,lastLineIndex:l}}function ph({assertions:e,latestRun:t,onChange:n}){let[o,r]=rr(null),[i,s]=rr(e),[a,l]=rr(null),[c,u]=rr(0),d=ls([]),p=ls(null),f=ls(!1),m=o!==null,E=m?i.length+1:i.length,x=kl(()=>{let D=new Map;for(let g of t?.assertionResults??[])D.set(g.assertion.trim(),g);return D},[t]);oi(()=>{m||s(e)},[e,m]),oi(()=>{if(a===null)return;let D=requestAnimationFrame(()=>{let g=d.current[a];if(g){if(g.focus(),p.current==="select"&&g.value)g.select();else if(p.current==="start")g.setSelectionRange(0,0);else if(p.current==="end"){let v=g.value.length;g.setSelectionRange(v,v)}p.current=null,fu(g)}});return()=>cancelAnimationFrame(D)},[a,c,E]);let S=ro((D,g=null)=>{p.current=g,r(D),l(D),u(v=>v+1)},[]),B=ro(D=>{let g=ch(D);return g.length===0?(s(e),e):(s(g),dh(g,e)||n(g),g)},[e,n]),L=ro(D=>{S(D,"select")},[S]),A=ro((D,g)=>{s(v=>{let b=[...v];if(D>=b.length){if(g.length===0)return b;b.push(g)}else b[D]=g;return b})},[]),C=ro((D,g)=>{let v=[...i],ie=(D<v.length?v[D]??"":"").trim();if(D>=v.length){let ue=g?.focusPlaceholder?v.length:g?.focusIndex;ue!==void 0?S(ue,g?.focusMode):(r(null),l(null));return}if(!ie){if(g?.deleteEmpty){v.splice(D,1);let ue=B(v),we=g.focusPlaceholder?ue.length:g.focusIndex;if(we!==void 0){let Ue=Math.min(we,ue.length);S(Ue)}else r(null),l(null)}else v[D]=e[D]??"",s(v),g?.focusIndex!==void 0?S(g.focusIndex,g.focusMode):(r(null),l(null));return}v[D]=ie;let ve=B(v),ce=g?.focusPlaceholder?ve.length:g?.focusIndex;if(ce!==void 0){let ue=Math.min(ce,ve.length);S(ue,g?.focusMode)}else r(null),l(null)},[e,i,B,S]),U=ro(()=>{s(e),r(null),l(null)},[e]),ee=ro((D,g)=>{let v=g.currentTarget.value,b=g.currentTarget.selectionStart,ie=g.currentTarget.selectionEnd,ve=b===ie;if((g.key==="ArrowUp"||g.key==="ArrowDown")&&ve){let{lineIndex:ce,lastLineIndex:ue}=uh(g.currentTarget);if(g.key==="ArrowUp"&&ce===0&&D>0){g.preventDefault(),f.current=!0,C(D,{focusIndex:D-1,focusMode:"end",deleteEmpty:!1});return}if(g.key==="ArrowDown"&&ce===ue&&D<E-1){g.preventDefault(),f.current=!0,C(D,{focusIndex:D+1,focusMode:"start",deleteEmpty:!1});return}}if(g.key==="Backspace"&&v.length===0){g.preventDefault(),f.current=!0;let ce=[...i],ue=D-1;if(D<ce.length){ce.splice(D,1);let we=B(ce);if(ue>=0){let Ue=Math.min(ue,we.length-1);S(Ue,"end")}else r(null),l(null)}else ue>=0&&S(ue,"end");return}g.key==="Enter"?(g.preventDefault(),C(D,{focusPlaceholder:g.metaKey||g.ctrlKey,deleteEmpty:!0})):g.key==="Escape"&&(g.preventDefault(),U())},[U,C,i,B,S,E]),se=ro((D,g)=>{if(f.current){f.current=!1;return}let v=d.current.findIndex(b=>b===g.relatedTarget);C(D,{deleteEmpty:!1,focusIndex:v>=0?v:void 0})},[C]),O=ro((D,g)=>{g.preventDefault(),o!==null?(f.current=!0,C(o,{focusIndex:D,focusMode:"select",deleteEmpty:!1})):S(D,"select")},[C,o,S]);return No(fh,{children:[nn("style",{children:`
|
|
35
|
+
`}),kt("textarea",{id:"devtools-text-input",ref:ke,value:b.text,onChange:Ee,onKeyDown:Qe,onPaste:Dn,onBlur:T,placeholder:"Type here...",wrap:b.domEdit?"off":void 0,spellCheck:!1,style:On}),b.images&&b.images.length>0&&Oi("div",{"data-devtools":!0,style:{position:"fixed",left:b.point.x-4-Pn.x,top:b.point.y-4-Pn.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:[b.images.length," image",b.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&Ae.length>0&&kt(Sd,{styleModifications:Ae,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(me.map(y=>y.groupId||y.id)).size,dispatch:t,inFlightSelectors:s,toolbarRef:D,onHoverSelector:co}),e.activeTool==="hand"&&e.isAnnotating&&Ae.length>0&&kt(Ed,{styleModifications:Ae,accentColor:e.activeColor}),e.isAnnotating&&kt(ad,{annotations:me,supersededAnnotations:sn,inFlightIds:o,activeIds:r,queuePositions:i,scrollX:Pn.x,scrollY:Pn.y,annotationGroupMap:Ct,onViewThread:c,onSelectAnnotation:lr,onHoverAnnotation:Nt,canvasRef:C,toolbarRef:D}),e.isAnnotating&&a&&a.size>0&&kt(Ka,{inFlightSelectorColors:a}),e.isAnnotating&&Bn&&kt(Ka,{inFlightSelectorColors:Bn,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&ht&&kt("div",{"data-devtools":"dom-drop-preview",style:{position:"fixed",zIndex:9997,pointerEvents:"none",backgroundColor:e.activeColor,boxShadow:`0 0 0 1px ${e.activeColor}`,opacity:ht.mode==="copy"?.72:1,...ht.rect.height>=ht.rect.width?{left:ht.rect.left-2,top:ht.placement==="before"?ht.rect.top-2:ht.rect.bottom,width:ht.rect.width+4,height:2}:{left:ht.placement==="before"?ht.rect.left-2:ht.rect.right,top:ht.rect.top-2,width:2,height:ht.rect.height+4}}}),e.activeTool==="hand"&&e.isAnnotating&&(Wt?qt.current.element:pn)&&kt(nl,{element:Wt?qt.current.element:pn,gap:Wt?{row:Wt.row,column:Wt.column}:Vr(pn),accentColor:e.activeColor,hoveredAxis:Ut,draggingAxis:Wt?.axis??null,cursorViewport:Le,isAutoGap:Un,refreshKey:Ft}),e.activeTool==="hand"&&e.isAnnotating&&j&&kt(tu,{element:j.target,modifier:j.modifier,accentColor:e.activeColor,refreshKey:Ft}),e.activeTool==="hand"&&e.isAnnotating&&!j&&(pt?ae.current.element:fe)&&kt(pd,{element:pt?ae.current.element:fe,radius:pt?.radius??Gr(fe),accentColor:e.activeColor,hoveredCorner:le,draggingCorner:pt?.corner??null,cursorViewport:Le}),e.activeTool==="hand"&&e.isAnnotating&&!j&&(fn?lt.current.element:ft)&&kt(nu,{element:fn?lt.current.element:ft,fontSize:fn?.fontSize??Ji(ft).fontSize,lineHeight:fn?.lineHeight??Ji(ft).lineHeight,accentColor:e.activeColor,hoveredProperty:Tn,draggingProperty:fn?.property??null,cursorViewport:Le}),e.activeTool==="hand"&&e.isAnnotating&&!j&&(Re?Jn.current.element:At)&&kt(al,{element:Re?Jn.current.element:At,padding:Re?.padding??Ei(At),accentColor:e.activeColor,hoveredSide:Dt,draggingSide:Re?.side??null,cursorViewport:Le,refreshKey:fn?fn.fontSize+fn.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&kt(_i,{children:Pe&&!e.inspectedElement&&(()=>{if(_r(Pe))return null;let y=!!A||!!b?.linkedSelector||me.some(w=>{if(!w.linkedSelector)return!1;try{return Pe.matches(w.linkedSelector)}catch{return!1}});return kt(Zo,{element:Pe,isSelected:!1,elementInfo:dn,color:e.activeColor,hideTooltip:y})})()}),(b?.linkedSelector||A?.linkedSelector)&&(()=>{let y=b?.linkedSelector||A?.linkedSelector;if(!y)return null;let w=null;try{w=document.querySelector(y)}catch{}return w?kt(Zo,{element:w,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),P&&(()=>{let y=e.annotations.find(h=>h.id===P);if(!y?.linkedSelector)return null;let w=null;try{w=document.querySelector(y.linkedSelector)}catch{}if(!w)return null;let H=!!(o&&o.has(y.id));return kt(Zo,{element:w,isSelected:!H,color:y.color,hideTooltip:!0})})(),Ln&&(()=>{let y=e.annotations.find(R=>R.id===Ln);if(!y?.linkedSelector)return null;let w=null;try{w=document.querySelector(y.linkedSelector)}catch{}if(!w)return null;let H=y.groupId?e.annotations.filter(R=>R.groupId===y.groupId):[y],h=!!(o&&H.some(R=>o.has(R.id)));return kt(Zo,{element:w,isSelected:!h,color:y.color,hideTooltip:!0})})(),wn&&(()=>{let y=null;try{y=document.querySelector(wn)}catch{}if(!y)return null;let w=!!(s&&s.has(wn));return kt(Zo,{element:y,isSelected:!w,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&mt.size>0&&[...mt.entries()].map(([y,w])=>kt(Zo,{element:w.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:w.rootElement.tagName.toLowerCase(),reactComponent:y},color:"#8b5cf6"},y)),e.activeTool==="model"&&e.isAnnotating&&cr&&kt(Zo,{element:cr.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:cr.rootElement.tagName.toLowerCase(),reactComponent:cr.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&_.length>0&&_.map((y,w)=>kt("div",{style:{position:"absolute",left:y.x,top:y.y,width:y.width,height:y.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:y.direction==="vertical"?Oi(_i,{children:[kt("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),kt("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),kt("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),kt("div",{style:{position:"absolute",left:"calc(50% + 6px)",top:y.height<16?-6:"50%",transform:y.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(y.height)})]}):Oi(_i,{children:[kt("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),kt("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),kt("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),kt("div",{style:{position:"absolute",left:y.width<30?0:"50%",top:(y.width<30,void 0),bottom:"calc(50% + 4px)",transform:y.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(y.width)})]})},w)),e.activeTool==="model"&&e.isAnnotating&&Q&&kt(Zo,{element:Q.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:Q.rootElement.tagName.toLowerCase(),reactComponent:Q.name},color:m?.has(Q.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&Oi(_i,{children:[(()=>{let y=new Set(me.map(k=>k.groupId||k.id)).size,w=e.inspectedElement.info.selector,H=Ae.findIndex(k=>k.selector===w),h=H>=0?y+H+1:y+Ae.length+1,R=Ae.find(k=>k.selector===w),M=R?.changes.length??0,F=!!R?.captured;return kt(Zo,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:F?"#999999":e.activeColor,annotationNumber:h,changeCount:M})})(),(bt==="padding"||bt==="padding-x"||bt==="padding-y")&&kt(al,{element:e.inspectedElement.el,padding:Ei(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:bt==="padding-x"?"left":bt==="padding-y"?"top":null,draggingSide:null}),bt==="gap"&&kt(nl,{element:e.inspectedElement.el,gap:Vr(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),(bt==="width"||bt==="height")&&kt(hd,{element:e.inspectedElement.el,axis:bt,accentColor:e.activeColor,avoidElement:xe.current}),kt(Qd,{element:e.inspectedElement.el,elementInfo:e.inspectedElement.info,selector:e.inspectedElement.info.selector,styleModifications:Ae,dispatch:t,onClose:()=>t({type:"SELECT_ELEMENT",payload:null}),onHover:oo,accentColor:e.activeColor,toolbarRef:D,panelWrapperRef:xe,refreshKey:xo})]})]})}import{useCallback as Co,useEffect as In,useLayoutEffect as h0,useMemo as ai,useRef as Gt,useState as vr}from"react";import{Check as Fu,ChevronDown as y0,Circle as b0,Component as v0,Fingerprint as x0,Hand as S0,MessageCircle as w0,Pen as E0,RefreshCw as C0,Slash as T0,Square as M0,Trash2 as k0,Type as I0}from"lucide-react";import{useEffect as du,useRef as uu}from"react";function pu(e,t,n,o,r){let i=uu(0),s=uu(t.annotations);du(()=>{if(!n.current||!e)return;s.current=t.annotations;let a=t.annotations.length;a>0&&(a>=i.current||!o)&&(localStorage.setItem(r.annotations,JSON.stringify(t.annotations)),i.current=a)},[t.annotations,e,o,n,r]),du(()=>{n.current&&(localStorage.setItem(r.expanded,String(e)),e&&(localStorage.setItem(r.styleMods,JSON.stringify(t.styleModifications)),localStorage.setItem(r.textMods,JSON.stringify(t.textModifications)),localStorage.setItem(r.domMods,JSON.stringify(t.domModifications)),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.textModifications,t.domModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,n,r])}import{useCallback as ro,useEffect as ri,useMemo as Rl,useRef as cs,useState as rr}from"react";import{Fragment as yh,jsx as nn,jsxs as No}from"react/jsx-runtime";var qm={width:340,backgroundColor:"#eaeaea",...Ri,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"},Zm=(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"}),Qm=e=>({border:0,background:"transparent",color:e?"#111827":"#6b7280",cursor:"pointer",fontFamily:"inherit",fontSize:10,fontWeight:700,padding:0,textTransform:"uppercase"}),Ll={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},ea={...Ll,borderColor:"#111827",background:"#111827",color:"#ffffff"},eh={...ea,cursor:"default",opacity:.55},Al={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"},th={...Al,appearance:"none",resize:"none",overflow:"hidden",outline:"none"},hu={...Al,fontWeight:700,fontSize:11,lineHeight:1.35},nh={...hu,appearance:"none",resize:"none",overflow:"hidden",outline:"none"},fu={display:"grid",gridTemplateColumns:"12px minmax(0, 1fr)",columnGap:4,alignItems:"start",marginBottom:5},oh={pass:"#2f855a",fail:"#c53030",needs_review:"#6b7280"},rh={pass:"\u2611",fail:"\u2612",needs_review:"\u25A1"},ih=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"Eval",sh=[{id:"pending",label:"Pending"},{id:"approved",label:"Approved"},{id:"rejected",label:"Rejected"}],gu="popmelt-eval-active-status",ah=e=>e==="pending"||e==="approved"||e==="rejected";function yu({bridgeUrl:e,refreshKey:t,onMouseEnter:n,onMouseLeave:o,onSynthesize:r,isSynthesizing:i,onRunEval:s,onViewRunThread:a,runningEvalIds:l=[],snapPosition:c="bottom-right"}){let u=cs(null),d=i||!r,[p,f]=rr({version:1,updatedAt:0,cases:[]}),[m,E]=rr(!0),[x,S]=rr(()=>{if(typeof window>"u")return"pending";try{let O=window.localStorage.getItem(gu);return ah(O)?O:"pending"}catch{return"pending"}});ri(()=>{let O=u.current;if(!O)return;let B=n,g=o;return B&&O.addEventListener("mouseenter",B),g&&O.addEventListener("mouseleave",g),()=>{B&&O.removeEventListener("mouseenter",B),g&&O.removeEventListener("mouseleave",g)}},[n,o]);let P=ro(()=>{e&&(E(!0),cc(e).then(O=>{f(O),E(!1)}).catch(()=>E(!1)))},[e]);ri(()=>{P()},[P,t]),ri(()=>{try{window.localStorage.setItem(gu,x)}catch{}},[x]);let L=ro((O,B)=>{e&&(f(g=>({...g,cases:g.cases.map(v=>v.id===O?{...v,status:B}:v)})),dc(O,B,e).then(g=>{g||P()}).catch(P))},[e,P]),D=ro((O,B)=>{if(!e)return;let g=B.map(v=>v.trim()).filter(Boolean);g.length!==0&&(f(v=>({...v,cases:v.cases.map(b=>b.id===O?{...b,assertions:g}:b)})),vs(O,{assertions:g},e).then(v=>{v||P()}).catch(P))},[e,P]),C=ro((O,B)=>{if(!e)return;let g=B.trim();g&&(f(v=>({...v,cases:v.cases.map(b=>b.id===O?{...b,title:g}:b)})),vs(O,{title:g},e).then(v=>{v||P()}).catch(P))},[e,P]),G=Rl(()=>{let O=p.cases.filter(v=>v.status==="pending"),B=p.cases.filter(v=>v.status==="approved"),g=p.cases.filter(v=>v.status==="rejected");return{pending:O,approved:B,rejected:g}},[p.cases]),ee=G[x],se=Rl(()=>{let O=new Map,B=[...p.runs??[]].sort((g,v)=>v.completedAt-g.completedAt);for(let g of B)O.has(g.evalId)||O.set(g.evalId,g);return O},[p.runs]);return No("div",{ref:u,style:{...qm,...Cs(c)},children:[No("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[nn("span",{children:"Evals"}),nn("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"E"})]}),nn("button",{type:"button",disabled:d,onClick:r,style:Zm(d,i),children:i?"Synthesizing...":"Synthesize"}),nn("div",{style:{display:"flex",gap:12,marginTop:8},children:sh.map(O=>nn(uh,{active:x===O.id,label:`${O.label} ${G[O.id].length}`,onClick:()=>S(O.id)},O.id))}),nn("div",{style:{marginTop:10,flex:1,minHeight:0,overflowY:"auto",display:"flex",flexDirection:"column",gap:10},children:m?nn("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):p.cases.length===0?nn("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.5},children:"No inferred evals yet."}):ee.length===0?No("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.5},children:["No ",x," evals."]}):nn(lh,{cases:ee,latestRunsByEvalId:se,runningEvalIds:l,onStatus:L,onRun:s,onViewRunThread:a,onTitleChange:C,onAssertionsChange:D})})]})}function lh({cases:e,latestRunsByEvalId:t,runningEvalIds:n,onStatus:o,onRun:r,onViewRunThread:i,onTitleChange:s,onAssertionsChange:a}){return nn("div",{style:{display:"flex",flexDirection:"column",gap:6},children:e.map(l=>{let c=new Set([...l.sourceDecisionIds,...l.sourceThreadIds]).size,u=c>0?`, ${c} ${c===1?"mention":"mentions"}`:"",d=t.get(l.id),p=n.includes(l.id);return No("div",{style:{border:"1px solid rgba(0,0,0,0.08)",background:"rgba(255,255,255,0.35)",padding:8},children:[No("div",{children:[nn(ph,{value:l.title,onCommit:f=>s(l.id,f)}),No("div",{style:{color:"#9ca3af",fontSize:10,marginTop:2},children:[ih(l.category),u]})]}),nn("div",{style:{marginTop:6,color:"#374151",fontSize:11,lineHeight:1.25},children:nn(hh,{assertions:l.assertions,latestRun:d,onChange:f=>a(l.id,f)})}),nn(dh,{item:l,latestRun:d,isRunning:p,onStatus:o,onRun:r,onViewRunThread:i})]},l.id)})})}function ch(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 dh({item:e,latestRun:t,isRunning:n,onStatus:o,onRun:r,onViewRunThread:i}){if(e.status==="pending")return No("div",{style:{display:"flex",gap:6,marginTop:8},children:[nn("button",{type:"button",style:Ll,onClick:()=>o(e.id,"rejected"),children:"Reject"}),nn("button",{type:"button",style:ea,onClick:()=>o(e.id,"approved"),children:"Accept"})]});if(e.status==="approved"){let s=n||!r;return No("div",{style:{display:"flex",gap:6,marginTop:8},children:[t?.threadId&&i&&nn("button",{type:"button",style:Ll,onClick:()=>i(t.threadId),children:ch(t)}),nn("button",{type:"button",disabled:s,style:s?eh:ea,onClick:()=>r?.(e),children:n?"Running...":"Run"})]})}return nn("div",{style:{display:"flex",gap:6,marginTop:8},children:nn("button",{type:"button",style:ea,onClick:()=>o(e.id,"approved"),children:"Approve"})})}function uh({active:e,label:t,onClick:n}){let[o,r]=rr(!1);return nn("button",{type:"button",style:Qm(e||o),onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),onClick:n,children:t})}function ph({value:e,onCommit:t}){let[n,o]=rr(!1),[r,i]=rr(e),s=cs(null);ri(()=>{n||i(e)},[n,e]),ri(()=>{if(!n)return;let u=s.current;u&&(u.focus(),u.select(),u.style.height="auto",u.style.height=`${u.scrollHeight}px`)},[n]);let a=ro(()=>{let u=r.trim();o(!1),u&&u!==e?t(u):i(e)},[r,t,e]),l=ro(()=>{i(e),o(!1)},[e]),c=ro(u=>{u.key==="Enter"?(u.preventDefault(),a()):u.key==="Escape"&&(u.preventDefault(),l())},[l,a]);return n?nn("textarea",{ref:s,rows:1,value:r,onChange:u=>{i(u.target.value),u.currentTarget.style.height="auto",u.currentTarget.style.height=`${u.currentTarget.scrollHeight}px`},onBlur:a,onKeyDown:c,style:nh}):nn("button",{type:"button",onClick:()=>o(!0),style:hu,children:e})}function fh(e){return e.map(t=>t.trim()).filter(Boolean)}function gh(e,t){return e.length===t.length&&e.every((n,o)=>n===t[o])}function mu(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}function mh(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 s=e.selectionStart??0;o.textContent=e.value.slice(0,s),r.textContent="\u200B",o.appendChild(r),o.appendChild(document.createTextNode(e.value.slice(s)||"\u200B")),i.textContent="\u200B",o.appendChild(i),document.body.appendChild(o);let a=Math.max(0,Math.round(r.offsetTop/n)),l=Math.max(0,Math.round(i.offsetTop/n));return o.remove(),{lineIndex:a,lastLineIndex:l}}function hh({assertions:e,latestRun:t,onChange:n}){let[o,r]=rr(null),[i,s]=rr(e),[a,l]=rr(null),[c,u]=rr(0),d=cs([]),p=cs(null),f=cs(!1),m=o!==null,E=m?i.length+1:i.length,x=Rl(()=>{let B=new Map;for(let g of t?.assertionResults??[])B.set(g.assertion.trim(),g);return B},[t]);ri(()=>{m||s(e)},[e,m]),ri(()=>{if(a===null)return;let B=requestAnimationFrame(()=>{let g=d.current[a];if(g){if(g.focus(),p.current==="select"&&g.value)g.select();else if(p.current==="start")g.setSelectionRange(0,0);else if(p.current==="end"){let v=g.value.length;g.setSelectionRange(v,v)}p.current=null,mu(g)}});return()=>cancelAnimationFrame(B)},[a,c,E]);let S=ro((B,g=null)=>{p.current=g,r(B),l(B),u(v=>v+1)},[]),P=ro(B=>{let g=fh(B);return g.length===0?(s(e),e):(s(g),gh(g,e)||n(g),g)},[e,n]),L=ro(B=>{S(B,"select")},[S]),D=ro((B,g)=>{s(v=>{let b=[...v];if(B>=b.length){if(g.length===0)return b;b.push(g)}else b[B]=g;return b})},[]),C=ro((B,g)=>{let v=[...i],ie=(B<v.length?v[B]??"":"").trim();if(B>=v.length){let ue=g?.focusPlaceholder?v.length:g?.focusIndex;ue!==void 0?S(ue,g?.focusMode):(r(null),l(null));return}if(!ie){if(g?.deleteEmpty){v.splice(B,1);let ue=P(v),we=g.focusPlaceholder?ue.length:g.focusIndex;if(we!==void 0){let Ue=Math.min(we,ue.length);S(Ue)}else r(null),l(null)}else v[B]=e[B]??"",s(v),g?.focusIndex!==void 0?S(g.focusIndex,g.focusMode):(r(null),l(null));return}v[B]=ie;let ve=P(v),ce=g?.focusPlaceholder?ve.length:g?.focusIndex;if(ce!==void 0){let ue=Math.min(ce,ve.length);S(ue,g?.focusMode)}else r(null),l(null)},[e,i,P,S]),G=ro(()=>{s(e),r(null),l(null)},[e]),ee=ro((B,g)=>{let v=g.currentTarget.value,b=g.currentTarget.selectionStart,ie=g.currentTarget.selectionEnd,ve=b===ie;if((g.key==="ArrowUp"||g.key==="ArrowDown")&&ve){let{lineIndex:ce,lastLineIndex:ue}=mh(g.currentTarget);if(g.key==="ArrowUp"&&ce===0&&B>0){g.preventDefault(),f.current=!0,C(B,{focusIndex:B-1,focusMode:"end",deleteEmpty:!1});return}if(g.key==="ArrowDown"&&ce===ue&&B<E-1){g.preventDefault(),f.current=!0,C(B,{focusIndex:B+1,focusMode:"start",deleteEmpty:!1});return}}if(g.key==="Backspace"&&v.length===0){g.preventDefault(),f.current=!0;let ce=[...i],ue=B-1;if(B<ce.length){ce.splice(B,1);let we=P(ce);if(ue>=0){let Ue=Math.min(ue,we.length-1);S(Ue,"end")}else r(null),l(null)}else ue>=0&&S(ue,"end");return}g.key==="Enter"?(g.preventDefault(),C(B,{focusPlaceholder:g.metaKey||g.ctrlKey,deleteEmpty:!0})):g.key==="Escape"&&(g.preventDefault(),G())},[G,C,i,P,S,E]),se=ro((B,g)=>{if(f.current){f.current=!1;return}let v=d.current.findIndex(b=>b===g.relatedTarget);C(B,{deleteEmpty:!1,focusIndex:v>=0?v:void 0})},[C]),O=ro((B,g)=>{g.preventDefault(),o!==null?(f.current=!0,C(o,{focusIndex:B,focusMode:"select",deleteEmpty:!1})):S(B,"select")},[C,o,S]);return No(yh,{children:[nn("style",{children:`
|
|
36
36
|
.popmelt-eval-assertion-input::placeholder {
|
|
37
37
|
color: #aaa;
|
|
38
38
|
opacity: 1;
|
|
39
39
|
}
|
|
40
|
-
`}),Array.from({length:E},(
|
|
41
|
-
${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&&nt(Bh,{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 Ru({entries:e,references:t}){let n=[],o=[];for(let i of e)Tu(i[1])?n.push(i):o.push(i);let r=wu(n);return Nn(ii,{children:[r.map(([i,s])=>Nn("div",{style:{marginBottom:4},children:[Nn("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[i,s.length>1?` (${s.length})`:""]}),nt("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:s.map(([a,l])=>nt(jh,{varName:a,value:l,reference:t[a]},a))})]},i)),o.length>0&&nt(ra,{entries:o})]})}var na=[0,1,2,4,8,12,16,20,24,28,32];function Vh(e){if(e<=32){let t=na[0],n=Math.abs(e-t);for(let o=1;o<na.length;o++){let r=Math.abs(e-na[o]);r<n&&(t=na[o],n=r)}return t}return Math.round(e/8)*8}function Gh({label:e,value:t,px:n,tokenPath:o,rawToken:r,onHover:i,onModify:s,onDelete:a}){let[l,c]=Eo(!1),[u,d]=Eo(null),p=ri(!1),f=ri(0),m=ri(0),E=ri([]),x=u!==null?u:n,S=u!==null?`${u}px`:t,B=u!==null,L=oa(C=>{C.preventDefault(),p.current=!0,f.current=C.clientX,m.current=n;let U=ks(r);E.current=ka(U);let ee=O=>{let D=O.clientX-f.current,g=Math.max(0,Math.round(m.current+D));O.shiftKey&&(g=Vh(g));for(let v of E.current)v.element.style.setProperty(v.property,g+"px","important");d(g),i?.({name:e,px:g,token:U})},se=()=>{window.removeEventListener("mousemove",ee),window.removeEventListener("mouseup",se),document.body.style.cursor="",p.current=!1,d(O=>{if(O!==null&&O!==n&&s){let D=ks(r),g=D.bindings&&D.bindings.length>0,v;if(g){let ce=Ra(D.bindings,m.current,O);v=JSON.stringify({...D,value:`${O}px`,bindings:ce})}else{let ce=Nc(E.current,m.current),ue=zc(E.current);if(ce.length>0){let we=Ra(ce,m.current,O);v=JSON.stringify({value:`${O}px`,property:ue,bindings:we})}else v=`${O}px`}let b=typeof r=="string"?r:JSON.stringify(r),ie=E.current.map(ce=>({selector:mn(ce.element),property:ce.property})),ve=Wc(E.current,m.current,O);s({tokenPath:o,originalValue:b,currentValue:v,targets:ie,originalPx:m.current,currentPx:O},{id:Math.random().toString(36).substring(2,9),tokenPath:o,tokenName:e,originalPx:m.current,newPx:O,affectedElements:ve})}return O})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",ee),window.addEventListener("mouseup",se)},[n,e,o,r,i,s]),A=ks(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||(c(!0),i?.({name:e,px:x,token:A}))},onMouseLeave:()=>{p.current||(c(!1),i?.(null))},onMouseDown:L,children:[nt("span",{style:{color:l||B?"#FF0000":"#9ca3af"},children:e}),Nn("span",{style:{display:"flex",alignItems:"center",gap:4},children:[nt("span",{style:{color:l||B?"#FF0000":"#6b7280",fontWeight:600},children:S}),a&&l&&!B&&nt("button",{type:"button",title:"Remove token",onMouseDown:C=>{C.stopPropagation();let U=typeof r=="string"?r:JSON.stringify(r);a(o,U)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:C=>{C.currentTarget.style.color="#FF0000"},onMouseLeave:C=>{C.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function Jh({entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}){let s=[],a=[];for(let l of e){let c=Nh(l[1]);c!==null?s.push([l[0],l[1],c]):a.push(l)}return Nn(ii,{children:[s.length>0&&nt("div",{style:{display:"flex",flexDirection:"column",gap:2},children:s.map(([l,c,u])=>{let d=l.split(".").pop(),p=n?Yh(n,l):c,f=p&&typeof p=="object"&&"value"in p?p:c;return nt(Gh,{label:d,value:c,px:u,tokenPath:`tokens.${t}.${l}`,rawToken:f,onHover:o,onModify:r,onDelete:i},l)})}),a.length>0&&nt(ra,{entries:a})]})}function Yh(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 ra({entries:e}){return nt("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>Nn("div",{style:{fontSize:11},children:[nt("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),nt("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function Uh({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:o,onModifyToken:r,onDeleteToken:i}){let s=zh(e);return s==="colors"?nt(Ru,{entries:e}):s==="spacing"?nt(Jh,{entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}):nt(ra,{entries:e})}function Kh(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,s=Object.keys(i).find(l=>l.startsWith("__reactFiber$")||l.startsWith("__reactInternalInstance$"));if(!s)continue;let a=i[s];for(;a;){let l=a.type,c=typeof l=="function"||typeof l=="object"?l?.displayName||l?.name:null;if(typeof c=="string"){let u=c.toLowerCase();if(u===t){let d={...a.memoizedProps};return delete d.ref,{type:l,props:d}}if(!n){if(u.length>=4&&t.includes(u)){let d={...a.memoizedProps};delete d.ref,n={type:l,props:d}}else if(t.length>=4&&u.includes(t)){let d={...a.memoizedProps};delete d.ref,n={type:l,props:d}}}}a=a.return}}return n}var Al=class extends Ah{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}},Lu="popmelt-principles-collapsed";function Xh(){try{let e=localStorage.getItem(Lu);if(e)return new Set(JSON.parse(e))}catch{}return new Set}function qh(e){try{localStorage.setItem(Lu,JSON.stringify([...e]))}catch{}}function Zh({id:e,label:t,count:n,children:o,collapsed:r,onToggle:i}){return Nn("div",{style:{marginBottom:14},children:[Nn("div",{onClick:()=>i(e),style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:r?0:6,cursor:"pointer",display:"flex",alignItems:"center",gap:4,userSelect:"none"},children:[nt("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:r?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,nt("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!r&&o]})}var Qh={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},Mu=["colors","fonts","typeScale","spacing","radii","shadows","other"];function e0(){let[e,t]=Eo(null),[n,o]=Eo(Xh);Ar(()=>{t(Eu())},[]);let r=oa(s=>{o(a=>{let l=new Set(a);return l.has(s)?l.delete(s):l.add(s),qh(l),l})},[]);return e?Mu.some(s=>e[s].length>0)?nt(ii,{children:Mu.map(s=>{let a=e[s];return a.length===0?null:nt(Zh,{id:s,label:Qh[s],count:a.length,collapsed:n.has(s),onToggle:r,children:s==="colors"?nt(Ru,{entries:a,references:e.references}):nt(ra,{entries:a})},s)})}):nt("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function t0({rules:e,onSynthesize:t,isSynthesizing:n}){if(!e||e.length===0)return nt("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."});if(!e.some(i=>typeof i=="object"&&i!==null&&"scope"in i))return nt(ii,{children:e.map((i,s)=>Nn("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[Nn("span",{style:{color:"#9ca3af",flexShrink:0},children:[s+1,"."]}),nt("span",{children:typeof i=="string"?i:i.text})]},s))});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 s=i.scope||"general";r.has(s)||r.set(s,[]),r.get(s).push({id:i.id,text:i.text})}return Nn(ii,{children:[t&&nt("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,s])=>Nn("div",{style:{marginBottom:10},children:[nt("div",{style:{fontWeight:700,fontSize:10,color:"#6b7280",letterSpacing:"0.05em",textTransform:"uppercase",marginBottom:4},children:i}),s.map((a,l)=>Nn("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4,fontSize:11},children:[nt("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2022"}),nt("span",{children:a.text})]},a.id||l))]},i))]})}function n0({name:e,value:t,selected:n,highlighted:o,onRemove:r,onHover:i}){let[s,a]=Eo(!1),[l,c]=Eo(!1),u=ri(null),d=ri(0),[p,f]=Eo(0),[m,E]=Eo(0),x=ku(t),S=x.find(([O])=>O==="description")?.[1];Ar(()=>{if(!l&&!o){f(0),E(0),d.current=0;return}let O=vi(e);f(O.length)},[l,o,e]),Ar(()=>{n&&u.current&&u.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let B=n||o||l,L=n?"139,92,246":"34,197,94",A=n?"#8b5cf6":"#22c55e",C=B?`rgba(${L},0.06)`:void 0,U=B?`inset 0 0 0 1.5px rgba(${L},0.35)`:void 0,ee=o||l,se=oa(()=>{let O=vi(e);if(O.length===0)return;let D=d.current%O.length;O[D].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),E(D),d.current=D+1,i?.({name:e,instanceIndex:D})},[e,i]);return Nn("div",{ref:u,onClick:se,onMouseEnter:()=>{c(!0),i?.({name:e,instanceIndex:0})},onMouseLeave:()=>{c(!1),i?.(null)},style:{marginBottom:8,background:C,padding:6,boxShadow:U,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:[nt("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:ee?A:"transparent",color:ee?"#fff":"#6b7280"},children:e}),ee&&p>1&&Nn("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[m+1,"/",p]})]}),r&&l&&nt("button",{type:"button",title:"Remove from model",onClick:O=>{O.stopPropagation(),r(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:O=>{O.currentTarget.style.color="#FF0000"},onMouseLeave:O=>{O.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),S&&nt("div",{style:{fontSize:11,color:ee?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:S}),s?nt(Uh,{entries:x.filter(([O])=>O!=="description"),categoryKey:""}):nt(o0,{name:e,onNotFound:()=>a(!0),entries:x})]})}function o0({name:e,onNotFound:t}){let[n,o]=Eo(null),[r,i]=Eo(!1);return Ar(()=>{let s=Kh(e);s||t(),o(s),i(!0)},[e,t]),!r||!n?null:nt(Al,{onError:t,children:nt("div",{"data-popmelt-panel":!0,onClick:s=>{s.preventDefault(),s.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center",contain:"layout paint",position:"relative",isolation:"isolate"},children:nt("div",{style:{zoom:.5,pointerEvents:"none"},children:Ph(n.type,n.props)})})})}function r0({components:e,selectedComponent:t,hoveredComponent:n,onRemove:o,onHover:r}){if(!e||Object.keys(e).length===0)return nt("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),s=Ca(i),a=Object.entries(e).sort(([l],[c])=>(s.get(l)??1/0)-(s.get(c)??1/0));return nt(ii,{children:a.map(([l,c])=>nt(n0,{name:l,value:c,selected:t===l,highlighted:n===l,onRemove:o,onHover:r},l))})}function Au({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:o,selectedComponent:r,hoveredComponent:i,onComponentHover:s,onSpacingTokenHover:a,onModifySpacingToken:l,onDeleteSpacingToken:c,onComponentAdded:u,onComponentRemoved:d,onSynthesizeRules:p,isSynthesizing:f,snapPosition:m="bottom-right"}){let[E,x]=Eo(void 0),[S,B]=Eo(!0),[L,A]=Eo(()=>{try{let g=localStorage.getItem(Cu);if(g==="patterns"||g==="principles"||g==="rules")return g}catch{}return"patterns"});Ar(()=>{gi(e).then(g=>{x(g),B(!1)})},[e,t]),Ar(()=>{try{localStorage.setItem(Cu,L)}catch{}},[L]),Ar(()=>{r&&(A("patterns"),gi(e).then(g=>{g&&x(g)}))},[r,e]);let C=oa(g=>{x(v=>{if(!v?.components)return v;let{[g]:b,...ie}=v.components;return{...v,components:ie}}),d?.(g)},[d]),U=E?.components,ee=E?.rules,se=U&&Object.keys(U).length>0,O=ee&&ee.length>0,D=ri(null);return Ar(()=>{let g=D.current;if(!g)return;let v=n,b=o;return v&&g.addEventListener("mouseenter",v),b&&g.addEventListener("mouseleave",b),()=>{v&&g.removeEventListener("mouseenter",v),b&&g.removeEventListener("mouseleave",b)}},[n,o]),Nn("div",{ref:D,style:{...$h,...Es(m)},children:[Nn("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[nt("span",{children:"Model"}),nt("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),nt("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(g=>nt("button",{type:"button",style:L===g?Wh:Iu,onClick:()=>A(g),children:g.charAt(0).toUpperCase()+g.slice(1)},g))}),nt("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:L==="principles"?nt(e0,{}):S?nt("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!E||!se&&!O?nt("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):Nn(ii,{children:[L==="patterns"&&nt(r0,{components:U,selectedComponent:r,hoveredComponent:i,onRemove:C,onHover:s}),L==="rules"&&nt(t0,{rules:ee,onSynthesize:p,isSynthesizing:f})]})})]})}import{jsx as yr}from"react/jsx-runtime";var i0="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",s0="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",a0="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 l0({size:e=16,style:t}){return yr("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:yr("path",{d:i0})})}function c0({size:e=16,style:t}){return yr("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:yr("path",{d:s0})})}function d0({size:e=16,style:t}){return yr("svg",{width:e,height:e,viewBox:"0 0 49.7202 40.0402",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:yr("path",{d:a0,fillRule:"evenodd",clipRule:"evenodd"})})}function cs({provider:e,size:t=16,style:n}){return e==="codex"?yr(c0,{size:t,style:n}):e==="copilot"?yr(d0,{size:t,style:n}):yr(l0,{size:t,style:n})}var Pu=[{effort:"low",description:"Faster responses with lighter reasoning"},{effort:"medium",description:"Balanced reasoning depth"},{effort:"high",description:"Deeper reasoning for complex work"},{effort:"xhigh",description:"Extra-high reasoning depth"},{effort:"max",description:"Maximum reasoning depth"}],ia=[{id:"claude-opus-4-6",label:"Opus 4.6",source:"static",supportedReasoningLevels:Pu},{id:"claude-sonnet-4-6",label:"Sonn 4.6",source:"static",supportedReasoningLevels:Pu}],sa=[{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"}],Pl=[{id:"",label:"Default",source:"static"}];var u0=[...ia,...sa,...Pl];function Bl(e,t){if(t==="copilot"&&!e)return"Copilot";if(!e)return t==="codex"?"Codex":"Claude Code";let n=u0.find(o=>o.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as Du}from"react/jsx-runtime";var Po={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function br({children:e,active:t,siblingActive:n,disabled:o,onClick:r,title:i}){let s=()=>o?.4:n&&!t?.5:1,a={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?Po.bgActive:"transparent",color:t?Po.iconActive:Po.iconDefault,opacity:s()};return Du("button",{type:"button",onClick:o?void 0:r,title:i,disabled:o,style:a,onMouseEnter:l=>{o||(l.currentTarget.style.opacity="1",t||(l.currentTarget.style.backgroundColor=Po.bgHover))},onMouseLeave:l=>{o||(l.currentTarget.style.opacity=String(s()),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 Bu(){return Du("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as ds,jsx as he,jsxs as Bt}from"react/jsx-runtime";function Dl({value:e,options:t,onChange:n,disabled:o=!1}){let[r,i]=vr(!1),[s,a]=vr({side:"below",maxHeight:220}),l=Yt(null),c=Yt(null),u=t.find(d=>d.value===e)??t[0];return p0(()=>{if(!r||!l.current)return;let d=()=>{let f=l.current?.getBoundingClientRect();if(!f)return;let m=8,E=Math.max(0,window.innerHeight-f.bottom-m),x=Math.max(0,f.top-m),S=Math.min(220,t.length*30+2),B=E>=Math.min(S,120)||E>=x?"below":"above";a({side:B,maxHeight:Math.max(48,Math.min(S,B==="below"?E:x))})};d(),window.addEventListener("resize",d),window.addEventListener("scroll",d,!0);let p=requestAnimationFrame(()=>{c.current?.scrollIntoView({block:"nearest"})});return()=>{cancelAnimationFrame(p),window.removeEventListener("resize",d),window.removeEventListener("scroll",d,!0)}},[r,t.length,e]),In(()=>{if(!r)return;let d=f=>{!l.current||f.composedPath().includes(l.current)||i(!1)},p=f=>{f.key==="Escape"&&i(!1)};return document.addEventListener("mousedown",d),document.addEventListener("keydown",p),()=>{document.removeEventListener("mousedown",d),document.removeEventListener("keydown",p)}},[r]),Bt("div",{ref:l,style:{position:"relative",minWidth:0},children:[Bt("button",{type:"button",disabled:o,"aria-expanded":r,onClick:()=>i(d=>!d),style:{width:"100%",height:28,display:"flex",alignItems:"center",justifyContent:"space-between",gap:6,border:"1px solid rgba(0,0,0,0.14)",borderRadius:0,backgroundColor:r?"#fff":"transparent",color:r?"#1f2937":"#8f8f8f",font:"inherit",fontSize:11,padding:"0 7px",cursor:o?"default":"pointer",opacity:o?.45:1,textAlign:"left"},children:[he("span",{style:{minWidth:0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:u?.label??""}),he(f0,{size:12,style:{flexShrink:0}})]}),r&&he("div",{style:{position:"absolute",...s.side==="below"?{top:"100%",marginTop:2}:{bottom:"100%",marginBottom:2},left:0,right:0,maxHeight:s.maxHeight,backgroundColor:"#fff",border:"1px solid rgba(0,0,0,0.1)",zIndex:10002,overflowX:"hidden",overflowY:"auto"},children:t.map(d=>{let p=d.value===e;return Bt("button",{ref:p?c:void 0,type:"button",onClick:()=>{n?.(d.value),i(!1)},style:{width:"100%",minHeight:30,display:"flex",alignItems:"center",gap:7,border:"none",backgroundColor:p?"#f3f4f6":"#fff",color:"#1f2937",font:"inherit",fontSize:11,padding:"6px 8px",cursor:"pointer",textAlign:"left"},children:[he("span",{style:{width:14,display:"flex",flexShrink:0},children:p&&he(_u,{size:13,strokeWidth:2})}),he("span",{children:d.label})]},d.value)})})]})}function M0(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 ai=[{type:"rectangle",icon:w0,label:"Rectangle",shortcut:"R"},{type:"circle",icon:g0,label:"Oval",shortcut:"O"},{type:"line",icon:S0,label:"Line",shortcut:"L"},{type:"freehand",icon:v0,label:"Pen",shortcut:"P"}],T0=new Set(ai.map(e=>e.type));function k0(e,t,n,o,r,i,s,a){let l=(e-r)*(o-i)-(n-r)*(t-i),c=(e-s)*(i-a)-(r-s)*(t-a),u=(e-n)*(a-o)-(s-n)*(t-o),d=l<0||c<0||u<0,p=l>0||c>0||u>0;return!(d&&p)}function I0(e="bottom-right"){return Ac(e,window.innerWidth,window.innerHeight)}var R0=[{type:"text",icon:C0,label:"Text",shortcut:"T"}],Ou={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.
|
|
40
|
+
`}),Array.from({length:E},(B,g)=>{let v=i[g]??"",b=m&&g>=i.length,ie=o===g||b,ce=(b?void 0:x.get(v.trim()))?.status,ue=ce?oh[ce]:"#374151",we=ce?rh[ce]:"\u25A1",Ue=ce?{color:ue}:{},V=ce?{color:ue}:{};return ie?No("div",{style:fu,children:[nn("span",{style:Ue,children:we}),nn("textarea",{className:"popmelt-eval-assertion-input",ref:A=>{d.current[g]=A},rows:1,value:v,placeholder:b?"cmd+enter to add new assertion":void 0,onFocus:()=>r(g),onChange:A=>{D(g,A.target.value),mu(A.currentTarget)},onBlur:A=>se(g,A),onKeyDown:A=>ee(g,A),style:{...th,...V}})]},`assertion-${g}`):No("div",{style:fu,children:[nn("span",{style:Ue,children:we}),nn("button",{type:"button",onMouseDown:A=>O(g,A),onClick:()=>L(g),style:{...Al,...V},children:v})]},`assertion-${g}`)})]})}import{Component as Oh,createElement as _h,useCallback as ia,useEffect as Ar,useRef as ii,useState as Eo}from"react";import{Link2 as Hh}from"lucide-react";var bh={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},vh=/^#[0-9a-fA-F]{3,8}$/,xh=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,Sh=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 vu(e){let t=e.trim().toLowerCase();return vh.test(t)||xh.test(t)||Sh.has(t)}var wh=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Pl(e){return wh.test(e.trim())}var bu=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function Eh(e){let t=e.trim().toLowerCase();return!!(bu.has(t)||t.includes(",")&&t.split(",").some(n=>bu.has(n.trim().replace(/['"]/g,""))))}function Ch(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(vu(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var Th=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,Mh=/^--(font-family|font|ff|family)/i,kh=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,Ih=/^--(space|gap|padding|margin|inset)/i,Rh=/^--(radius|rounded|br|border-radius)/i,Lh=/^--(shadow|elevation|drop-shadow)/i;function xu(e,t){let n=e.toLowerCase();return Lh.test(n)?"shadows":Rh.test(n)?"radii":Mh.test(n)?"fonts":kh.test(n)&&Pl(t)?"typeScale":Th.test(n)||vu(t)?"colors":Eh(t)?"fonts":Ch(t)?"shadows":Ih.test(n)&&Pl(t)||Pl(t)?"spacing":"other"}function Su(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){Su(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Ah(r.style,t,n,o)}}}var wu=/var\((--[^,)]+)/;function Ah(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 s=t.getPropertyValue(i).trim();if(!s)continue;let a=xu(i,s);o[a].push([i,s]);let c=e.getPropertyValue(i).trim().match(wu);c&&(o.references[i]=c[1])}}function ta(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function oa(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,s,a]=[parseInt(o[1],10),parseInt(o[2],10),parseInt(o[3],10)];return(.2126*i+.7152*s+.0722*a)/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 s=parseInt(i.slice(0,2),16),a=parseInt(i.slice(2,4),16),l=parseInt(i.slice(4,6),16);if(!isNaN(s))return(.2126*s+.7152*a+.0722*l)/255}return null}function Eu(e){return e==="colors"?(t,n)=>{let o=oa(t[1]),r=oa(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let o=ta(t[1]),r=ta(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let o=ta(t[1]),r=ta(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:(t,n)=>t[0].localeCompare(n[0])}function Ph(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 Cu(e){let t=new Map;for(let r of e){let i=Ph(r[0]),s=t.get(i);s||(s=[],t.set(i,s)),s.push(r)}let n=Eu("colors");for(let r of t.values())r.sort(n);let o=[...t.entries()];return o.sort((r,i)=>{let s=oa(r[1][0][1])??0,a=oa(i[1][0][1])??0;return s-a}),o}var Bh=["colors","fonts","typeScale","spacing","radii","shadows","other"],na=null,Dh=5e3;function Tu(){if(typeof document>"u")return bh;if(na&&Date.now()-na.timestamp<Dh)return na.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{Su(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 s=n.getPropertyValue(i).trim();if(!s)continue;let a=xu(i,s);e[a].push([i,s]);let c=o.getPropertyValue(i).trim().match(wu);c&&(e.references[i]=c[1])}for(let r of Bh)e[r].sort(Eu(r));return na={tokens:e,timestamp:Date.now()},e}import{Fragment as si,jsx as nt,jsxs as Nn}from"react/jsx-runtime";var Mu="popmelt-library-tab",Fh=/^#[0-9a-fA-F]{3,8}$/,Nh=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,zh=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),$h=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Iu(e){let t=e.trim();return Fh.test(t)||Nh.test(t)||zh.has(t.toLowerCase())}function Wh(e){return $h.test(e.trim())}function jh(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function Ru(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 s=r;typeof s.value=="string"?n.push([i,s.value]):n.push(...Ru(r,i))}else n.push([i,Array.isArray(r)?r.map(String).join(", "):String(r??"")])}return n}function Vh(e){return e.length===0?"generic":e.filter(([,o])=>Iu(o)).length>e.length/2?"colors":e.filter(([,o])=>Wh(o)).length>e.length/2?"spacing":"generic"}var Gh={width:300,backgroundColor:"#eaeaea",...Ri,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"},Lu={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},Jh={...Lu,color:"#1f2937",borderBottom:"1.5px solid #1f2937"};function Yh({varName:e,value:t,reference:n}){return nt("div",{title:n?`${e} \u2192 ${n}
|
|
41
|
+
${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&&nt(Hh,{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 Au({entries:e,references:t}){let n=[],o=[];for(let i of e)Iu(i[1])?n.push(i):o.push(i);let r=Cu(n);return Nn(si,{children:[r.map(([i,s])=>Nn("div",{style:{marginBottom:4},children:[Nn("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[i,s.length>1?` (${s.length})`:""]}),nt("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:s.map(([a,l])=>nt(Yh,{varName:a,value:l,reference:t[a]},a))})]},i)),o.length>0&&nt(sa,{entries:o})]})}var ra=[0,1,2,4,8,12,16,20,24,28,32];function Uh(e){if(e<=32){let t=ra[0],n=Math.abs(e-t);for(let o=1;o<ra.length;o++){let r=Math.abs(e-ra[o]);r<n&&(t=ra[o],n=r)}return t}return Math.round(e/8)*8}function Kh({label:e,value:t,px:n,tokenPath:o,rawToken:r,onHover:i,onModify:s,onDelete:a}){let[l,c]=Eo(!1),[u,d]=Eo(null),p=ii(!1),f=ii(0),m=ii(0),E=ii([]),x=u!==null?u:n,S=u!==null?`${u}px`:t,P=u!==null,L=ia(C=>{C.preventDefault(),p.current=!0,f.current=C.clientX,m.current=n;let G=Is(r);E.current=Ra(G);let ee=O=>{let B=O.clientX-f.current,g=Math.max(0,Math.round(m.current+B));O.shiftKey&&(g=Uh(g));for(let v of E.current)v.element.style.setProperty(v.property,g+"px","important");d(g),i?.({name:e,px:g,token:G})},se=()=>{window.removeEventListener("mousemove",ee),window.removeEventListener("mouseup",se),document.body.style.cursor="",p.current=!1,d(O=>{if(O!==null&&O!==n&&s){let B=Is(r),g=B.bindings&&B.bindings.length>0,v;if(g){let ce=Aa(B.bindings,m.current,O);v=JSON.stringify({...B,value:`${O}px`,bindings:ce})}else{let ce=$c(E.current,m.current),ue=Wc(E.current);if(ce.length>0){let we=Aa(ce,m.current,O);v=JSON.stringify({value:`${O}px`,property:ue,bindings:we})}else v=`${O}px`}let b=typeof r=="string"?r:JSON.stringify(r),ie=E.current.map(ce=>({selector:mn(ce.element),property:ce.property})),ve=Vc(E.current,m.current,O);s({tokenPath:o,originalValue:b,currentValue:v,targets:ie,originalPx:m.current,currentPx:O},{id:Math.random().toString(36).substring(2,9),tokenPath:o,tokenName:e,originalPx:m.current,newPx:O,affectedElements:ve})}return O})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",ee),window.addEventListener("mouseup",se)},[n,e,o,r,i,s]),D=Is(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||(c(!0),i?.({name:e,px:x,token:D}))},onMouseLeave:()=>{p.current||(c(!1),i?.(null))},onMouseDown:L,children:[nt("span",{style:{color:l||P?"#FF0000":"#9ca3af"},children:e}),Nn("span",{style:{display:"flex",alignItems:"center",gap:4},children:[nt("span",{style:{color:l||P?"#FF0000":"#6b7280",fontWeight:600},children:S}),a&&l&&!P&&nt("button",{type:"button",title:"Remove token",onMouseDown:C=>{C.stopPropagation();let G=typeof r=="string"?r:JSON.stringify(r);a(o,G)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:C=>{C.currentTarget.style.color="#FF0000"},onMouseLeave:C=>{C.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function Xh({entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}){let s=[],a=[];for(let l of e){let c=jh(l[1]);c!==null?s.push([l[0],l[1],c]):a.push(l)}return Nn(si,{children:[s.length>0&&nt("div",{style:{display:"flex",flexDirection:"column",gap:2},children:s.map(([l,c,u])=>{let d=l.split(".").pop(),p=n?qh(n,l):c,f=p&&typeof p=="object"&&"value"in p?p:c;return nt(Kh,{label:d,value:c,px:u,tokenPath:`tokens.${t}.${l}`,rawToken:f,onHover:o,onModify:r,onDelete:i},l)})}),a.length>0&&nt(sa,{entries:a})]})}function qh(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 sa({entries:e}){return nt("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>Nn("div",{style:{fontSize:11},children:[nt("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),nt("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function Zh({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:o,onModifyToken:r,onDeleteToken:i}){let s=Vh(e);return s==="colors"?nt(Au,{entries:e,references:{}}):s==="spacing"?nt(Xh,{entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}):nt(sa,{entries:e})}function Qh(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,s=Object.keys(i).find(l=>l.startsWith("__reactFiber$")||l.startsWith("__reactInternalInstance$"));if(!s)continue;let a=i[s];for(;a;){let l=a.type,c=typeof l=="function"||typeof l=="object"?l?.displayName||l?.name:null;if(typeof c=="string"){let u=c.toLowerCase();if(u===t){let d={...a.memoizedProps};return delete d.ref,{type:l,props:d}}if(!n){if(u.length>=4&&t.includes(u)){let d={...a.memoizedProps};delete d.ref,n={type:l,props:d}}else if(t.length>=4&&u.includes(t)){let d={...a.memoizedProps};delete d.ref,n={type:l,props:d}}}}a=a.return}}return n}var Bl=class extends Oh{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}},Pu="popmelt-principles-collapsed";function e0(){try{let e=localStorage.getItem(Pu);if(e)return new Set(JSON.parse(e))}catch{}return new Set}function t0(e){try{localStorage.setItem(Pu,JSON.stringify([...e]))}catch{}}function n0({id:e,label:t,count:n,children:o,collapsed:r,onToggle:i}){return Nn("div",{style:{marginBottom:14},children:[Nn("div",{onClick:()=>i(e),style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:r?0:6,cursor:"pointer",display:"flex",alignItems:"center",gap:4,userSelect:"none"},children:[nt("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:r?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,nt("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!r&&o]})}var o0={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},ku=["colors","fonts","typeScale","spacing","radii","shadows","other"];function r0(){let[e,t]=Eo(null),[n,o]=Eo(e0);Ar(()=>{t(Tu())},[]);let r=ia(s=>{o(a=>{let l=new Set(a);return l.has(s)?l.delete(s):l.add(s),t0(l),l})},[]);return e?ku.some(s=>e[s].length>0)?nt(si,{children:ku.map(s=>{let a=e[s];return a.length===0?null:nt(n0,{id:s,label:o0[s],count:a.length,collapsed:n.has(s),onToggle:r,children:s==="colors"?nt(Au,{entries:a,references:e.references}):nt(sa,{entries:a})},s)})}):nt("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function i0({rules:e,onSynthesize:t,isSynthesizing:n}){if(!e||e.length===0)return nt("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."});if(!e.some(i=>typeof i=="object"&&i!==null&&"scope"in i))return nt(si,{children:e.map((i,s)=>Nn("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[Nn("span",{style:{color:"#9ca3af",flexShrink:0},children:[s+1,"."]}),nt("span",{children:typeof i=="string"?i:i.text})]},s))});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 s=i.scope||"general";r.has(s)||r.set(s,[]),r.get(s).push({id:i.id,text:i.text})}return Nn(si,{children:[t&&nt("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,s])=>Nn("div",{style:{marginBottom:10},children:[nt("div",{style:{fontWeight:700,fontSize:10,color:"#6b7280",letterSpacing:"0.05em",textTransform:"uppercase",marginBottom:4},children:i}),s.map((a,l)=>Nn("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4,fontSize:11},children:[nt("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2022"}),nt("span",{children:a.text})]},a.id||l))]},i))]})}function s0({name:e,value:t,selected:n,highlighted:o,onRemove:r,onHover:i}){let[s,a]=Eo(!1),[l,c]=Eo(!1),u=ii(null),d=ii(0),[p,f]=Eo(0),[m,E]=Eo(0),x=Ru(t),S=x.find(([O])=>O==="description")?.[1];Ar(()=>{if(!l&&!o){f(0),E(0),d.current=0;return}let O=xi(e);f(O.length)},[l,o,e]),Ar(()=>{n&&u.current&&u.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let P=n||o||l,L=n?"139,92,246":"34,197,94",D=n?"#8b5cf6":"#22c55e",C=P?`rgba(${L},0.06)`:void 0,G=P?`inset 0 0 0 1.5px rgba(${L},0.35)`:void 0,ee=o||l,se=ia(()=>{let O=xi(e);if(O.length===0)return;let B=d.current%O.length;O[B].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),E(B),d.current=B+1,i?.({name:e,instanceIndex:B})},[e,i]);return Nn("div",{ref:u,onClick:se,onMouseEnter:()=>{c(!0),i?.({name:e,instanceIndex:0})},onMouseLeave:()=>{c(!1),i?.(null)},style:{marginBottom:8,background:C,padding:6,boxShadow:G,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:[nt("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:ee?D:"transparent",color:ee?"#fff":"#6b7280"},children:e}),ee&&p>1&&Nn("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[m+1,"/",p]})]}),r&&l&&nt("button",{type:"button",title:"Remove from model",onClick:O=>{O.stopPropagation(),r(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:O=>{O.currentTarget.style.color="#FF0000"},onMouseLeave:O=>{O.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),S&&nt("div",{style:{fontSize:11,color:ee?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:S}),s?nt(Zh,{entries:x.filter(([O])=>O!=="description"),categoryKey:""}):nt(a0,{name:e,onNotFound:()=>a(!0),entries:x})]})}function a0({name:e,onNotFound:t}){let[n,o]=Eo(null),[r,i]=Eo(!1);return Ar(()=>{let s=Qh(e);s||t(),o(s),i(!0)},[e,t]),!r||!n?null:nt(Bl,{onError:t,children:nt("div",{"data-popmelt-panel":!0,onClick:s=>{s.preventDefault(),s.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center",contain:"layout paint",position:"relative",isolation:"isolate"},children:nt("div",{style:{zoom:.5,pointerEvents:"none"},children:_h(n.type,n.props)})})})}function l0({components:e,selectedComponent:t,hoveredComponent:n,onRemove:o,onHover:r}){if(!e||Object.keys(e).length===0)return nt("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),s=Ma(i),a=Object.entries(e).sort(([l],[c])=>(s.get(l)??1/0)-(s.get(c)??1/0));return nt(si,{children:a.map(([l,c])=>nt(s0,{name:l,value:c,selected:t===l,highlighted:n===l,onRemove:o,onHover:r},l))})}function Bu({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:o,selectedComponent:r,hoveredComponent:i,onComponentHover:s,onSpacingTokenHover:a,onModifySpacingToken:l,onDeleteSpacingToken:c,onComponentAdded:u,onComponentRemoved:d,onSynthesizeRules:p,isSynthesizing:f,snapPosition:m="bottom-right"}){let[E,x]=Eo(void 0),[S,P]=Eo(!0),[L,D]=Eo(()=>{try{let g=localStorage.getItem(Mu);if(g==="patterns"||g==="principles"||g==="rules")return g}catch{}return"patterns"});Ar(()=>{mi(e).then(g=>{x(g),P(!1)})},[e,t]),Ar(()=>{try{localStorage.setItem(Mu,L)}catch{}},[L]),Ar(()=>{r&&(D("patterns"),mi(e).then(g=>{g&&x(g)}))},[r,e]);let C=ia(g=>{x(v=>{if(!v?.components)return v;let{[g]:b,...ie}=v.components;return{...v,components:ie}}),d?.(g)},[d]),G=E?.components,ee=E?.rules,se=G&&Object.keys(G).length>0,O=ee&&ee.length>0,B=ii(null);return Ar(()=>{let g=B.current;if(!g)return;let v=n,b=o;return v&&g.addEventListener("mouseenter",v),b&&g.addEventListener("mouseleave",b),()=>{v&&g.removeEventListener("mouseenter",v),b&&g.removeEventListener("mouseleave",b)}},[n,o]),Nn("div",{ref:B,style:{...Gh,...Cs(m)},children:[Nn("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[nt("span",{children:"Model"}),nt("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),nt("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(g=>nt("button",{type:"button",style:L===g?Jh:Lu,onClick:()=>D(g),children:g.charAt(0).toUpperCase()+g.slice(1)},g))}),nt("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:L==="principles"?nt(r0,{}):S?nt("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!E||!se&&!O?nt("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):Nn(si,{children:[L==="patterns"&&nt(l0,{components:G,selectedComponent:r,hoveredComponent:i,onRemove:C,onHover:s}),L==="rules"&&nt(i0,{rules:ee,onSynthesize:p,isSynthesizing:f})]})})]})}import{jsx as yr}from"react/jsx-runtime";var c0="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",d0="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",u0="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 p0({size:e=16,style:t}){return yr("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:yr("path",{d:c0})})}function f0({size:e=16,style:t}){return yr("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:yr("path",{d:d0})})}function g0({size:e=16,style:t}){return yr("svg",{width:e,height:e,viewBox:"0 0 49.7202 40.0402",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:yr("path",{d:u0,fillRule:"evenodd",clipRule:"evenodd"})})}function ds({provider:e,size:t=16,style:n}){return e==="codex"?yr(f0,{size:t,style:n}):e==="copilot"?yr(g0,{size:t,style:n}):yr(p0,{size:t,style:n})}var Du=[{effort:"low",description:"Faster responses with lighter reasoning"},{effort:"medium",description:"Balanced reasoning depth"},{effort:"high",description:"Deeper reasoning for complex work"},{effort:"xhigh",description:"Extra-high reasoning depth"},{effort:"max",description:"Maximum reasoning depth"}],aa=[{id:"claude-opus-4-6",label:"Opus 4.6",source:"static",supportedReasoningLevels:Du},{id:"claude-sonnet-4-6",label:"Sonn 4.6",source:"static",supportedReasoningLevels:Du}],la=[{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"}],Dl=[{id:"",label:"Default",source:"static"}];var m0=[...aa,...la,...Dl];function Ol(e,t){if(t==="copilot"&&!e)return"Copilot";if(!e)return t==="codex"?"Codex":"Claude Code";let n=m0.find(o=>o.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as _u}from"react/jsx-runtime";var Po={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function br({children:e,active:t,siblingActive:n,disabled:o,onClick:r,title:i}){let s=()=>o?.4:n&&!t?.5:1,a={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?Po.bgActive:"transparent",color:t?Po.iconActive:Po.iconDefault,opacity:s()};return _u("button",{type:"button",onClick:o?void 0:r,title:i,disabled:o,style:a,onMouseEnter:l=>{o||(l.currentTarget.style.opacity="1",t||(l.currentTarget.style.backgroundColor=Po.bgHover))},onMouseLeave:l=>{o||(l.currentTarget.style.opacity=String(s()),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 Ou(){return _u("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as us,jsx as ye,jsxs as Bt}from"react/jsx-runtime";function _l({value:e,options:t,onChange:n,disabled:o=!1}){let[r,i]=vr(!1),[s,a]=vr({side:"below",maxHeight:220}),l=Gt(null),c=Gt(null),u=t.find(d=>d.value===e)??t[0];return h0(()=>{if(!r||!l.current)return;let d=()=>{let f=l.current?.getBoundingClientRect();if(!f)return;let m=8,E=Math.max(0,window.innerHeight-f.bottom-m),x=Math.max(0,f.top-m),S=Math.min(220,t.length*30+2),P=E>=Math.min(S,120)||E>=x?"below":"above";a({side:P,maxHeight:Math.max(48,Math.min(S,P==="below"?E:x))})};d(),window.addEventListener("resize",d),window.addEventListener("scroll",d,!0);let p=requestAnimationFrame(()=>{c.current?.scrollIntoView({block:"nearest"})});return()=>{cancelAnimationFrame(p),window.removeEventListener("resize",d),window.removeEventListener("scroll",d,!0)}},[r,t.length,e]),In(()=>{if(!r)return;let d=f=>{!l.current||f.composedPath().includes(l.current)||i(!1)},p=f=>{f.key==="Escape"&&i(!1)};return document.addEventListener("mousedown",d),document.addEventListener("keydown",p),()=>{document.removeEventListener("mousedown",d),document.removeEventListener("keydown",p)}},[r]),Bt("div",{ref:l,style:{position:"relative",minWidth:0},children:[Bt("button",{type:"button",disabled:o,"aria-expanded":r,onClick:()=>i(d=>!d),style:{width:"100%",height:28,display:"flex",alignItems:"center",justifyContent:"space-between",gap:6,border:"1px solid rgba(0,0,0,0.14)",borderRadius:0,backgroundColor:r?"#fff":"transparent",color:r?"#1f2937":"#8f8f8f",font:"inherit",fontSize:11,padding:"0 7px",cursor:o?"default":"pointer",opacity:o?.45:1,textAlign:"left"},children:[ye("span",{style:{minWidth:0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:u?.label??""}),ye(y0,{size:12,style:{flexShrink:0}})]}),r&&ye("div",{style:{position:"absolute",...s.side==="below"?{top:"100%",marginTop:2}:{bottom:"100%",marginBottom:2},left:0,right:0,maxHeight:s.maxHeight,backgroundColor:"#fff",border:"1px solid rgba(0,0,0,0.1)",zIndex:10002,overflowX:"hidden",overflowY:"auto"},children:t.map(d=>{let p=d.value===e;return Bt("button",{ref:p?c:void 0,type:"button",onClick:()=>{n?.(d.value),i(!1)},style:{width:"100%",minHeight:30,display:"flex",alignItems:"center",gap:7,border:"none",backgroundColor:p?"#f3f4f6":"#fff",color:"#1f2937",font:"inherit",fontSize:11,padding:"6px 8px",cursor:"pointer",textAlign:"left"},children:[ye("span",{style:{width:14,display:"flex",flexShrink:0},children:p&&ye(Fu,{size:13,strokeWidth:2})}),ye("span",{children:d.label})]},d.value)})})]})}function R0(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 li=[{type:"rectangle",icon:M0,label:"Rectangle",shortcut:"R"},{type:"circle",icon:b0,label:"Oval",shortcut:"O"},{type:"line",icon:T0,label:"Line",shortcut:"L"},{type:"freehand",icon:E0,label:"Pen",shortcut:"P"}],L0=new Set(li.map(e=>e.type));function A0(e,t,n,o,r,i,s,a){let l=(e-r)*(o-i)-(n-r)*(t-i),c=(e-s)*(i-a)-(r-s)*(t-a),u=(e-n)*(a-o)-(s-n)*(t-o),d=l<0||c<0||u<0,p=l>0||c>0||u>0;return!(d&&p)}function P0(e="bottom-right"){return Bc(e,window.innerWidth,window.innerHeight)}var B0=[{type:"text",icon:I0,label:"Text",shortcut:"T"}],Hu={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.
|
|
42
42
|
|
|
43
|
-
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},L0={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"},Ol="devtools-toolbar-expanded",_l="devtools-annotations",Hl="devtools-style-modifications",Fl="devtools-text-modifications",Nl="devtools-dom-modifications",zl="devtools-active-tool",Hu="devtools-active-color",Fu="devtools-stroke-width",Nu="devtools-inspected-element",$l="devtools-spacing-changes",A0={expanded:Ol,annotations:_l,styleMods:Hl,textMods:Fl,domMods:Nl,spacingChanges:$l,tool:zl,color:Hu,stroke:Fu,inspected:Nu};function zu({state:e,dispatch:t,onScreenshot:n,onSendToClaude:o,hasActiveJobs:r,activeJobColor:i,onCrosshairHover:s,onClear:a,provider:l="claude",onProviderChange:c,availableProviders:u,modelIndex:d=0,modelCount:p=2,modelLabel:f="Opus 4.6",models:m=[],agentSettings:E={},onModelChange:x,onAgentSettingsChange:S,onViewThread:B,isThreadPanelOpen:L,mcpStatus:A,bridgeUrl:C,isBridgeConnected:U,packageVersion:ee,bridgeVersion:se,bridgeRestartState:O="idle",bridgeRestartMessage:D,onBridgeRestart:g,modelSelectedComponent:v,modelCanvasHoveredComponent:b,onModelComponentHover:ie,onSpacingTokenHover:ve,onModifySpacingToken:ce,onDeleteSpacingToken:ue,modelRefreshKey:we,evalRefreshKey:Ue,onModelComponentAdded:V,onModelComponentRemoved:P,onSynthesizeRules:J,isSynthesizing:ke,onSynthesizeEvals:De,isSynthesizingEvals:pe,onRunEval:Ge,onViewEvalRunThread:Ze,runningEvalIds:Me,onMouseEnter:Q,toolbarRef:Ie,snapPosition:mt="bottom-right",onSnapPositionChange:We}){let[Oe,He]=vr(()=>typeof window<"u"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});In(()=>{let _=()=>He({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",_),()=>window.removeEventListener("resize",_)},[]);let[Pe,Et]=vr(()=>typeof window>"u"?!1:localStorage.getItem(Ol)==="true"),[dn,Sn]=vr(0),Ln=Yt(0),Nt=Yt(0),wn=Yt(e.isAnnotating),co=Yt(!1),Jn=Yt(typeof window<"u"?localStorage.getItem(zl):null),En=Yt(typeof window<"u"?localStorage.getItem(Hu):null),At=Yt(typeof window<"u"?localStorage.getItem(Fu):null),[at,Dt]=vr(null),un=Yt(!1),ht=Yt(null),Kt=Yt(null),bt=Yt(null),[oo,xo]=vr([]),Z=Yt({x:0,y:0}),xe=Yt(null),Re=Yt(null),et=Yt(null),Ke=Co(()=>{xe.current=null,Re.current=null,et.current&&(clearTimeout(et.current),et.current=null)},[]),Le=Co(_=>{Kt.current&&(clearTimeout(Kt.current),Kt.current=null),un.current?(xe.current=_,Re.current={...Z.current},et.current&&clearTimeout(et.current),et.current=setTimeout(()=>{xe.current&&(Dt(xe.current),Ke())},300)):(ht.current&&clearTimeout(ht.current),ht.current=setTimeout(()=>{un.current=!0,Dt(_),ht.current=null},500))},[Ke]),tt=Co(()=>{Ke(),ht.current&&(clearTimeout(ht.current),ht.current=null),Kt.current=setTimeout(()=>{un.current=!1,Dt(null)},150)},[Ke]);In(()=>{let _=bt.current;if(!_)return;let W=()=>{Ke(),Kt.current&&(clearTimeout(Kt.current),Kt.current=null)},de=()=>{Kt.current=setTimeout(()=>{un.current=!1,Dt(null)},150)};return _.addEventListener("mouseenter",W),_.addEventListener("mouseleave",de),()=>{_.removeEventListener("mouseenter",W),_.removeEventListener("mouseleave",de)}},[at,Ke]),In(()=>{if(at!=="counter"||!C)return;let _=!1;return ko(`${C}/threads/recent?limit=5`).then(W=>W.ok?W.json():[]).then(W=>{_||xo(W)}).catch(()=>{}),()=>{_=!0}},[at,C]);let Qt=Co(_=>{if(Z.current={x:_.clientX,y:_.clientY},xe.current&&Re.current){let W=Re.current,de=I0(mt);k0(_.clientX,_.clientY,W.x,W.y,de.left,de.y,de.right,de.y)||(Dt(xe.current),Ke())}},[Ke,mt]),pn=si(()=>{let _=(u??[]).map(W=>W==="claude"?"Claude":W==="codex"?"Codex":W==="copilot"?"Copilot":W);return{name:"AI Model",desc:_.length>1?`${_.join(" and ")} are available.`:_.length===1?`Connected to ${_[0]}.`:"No AI providers detected.",usage:_.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:_.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}]}},[u]),Cn=si(()=>{let _=u&&u.length>0?u:["claude","codex","copilot"],W=_.indexOf(l);return _[(W>=0?W+1:0)%_.length]??l},[u,l]),Xt=si(()=>M0(p,d),[p,d]),Wt=m[d],jt=Wt?.supportedReasoningLevels??[],Yn=Wt?.speedTiers??[];du(Pe,e,co,!!r,A0),In(()=>{let _=new URLSearchParams(window.location.search);if(!_.has("popmelt"))return;let W=document.createElement("style");W.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(W);let de=parseInt(_.get("popmelt")||"0",10)||0,be=()=>{Et(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})};if(de>0){let ye=setTimeout(be,de);return()=>clearTimeout(ye)}be()},[]),In(()=>{if(localStorage.getItem(Ol)==="true"&&!e.isAnnotating){if(Pe||Et(!0),t({type:"SET_TOOL",payload:Jn.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),En.current&&t({type:"SET_COLOR",payload:En.current}),At.current){let Xe=parseFloat(At.current);isNaN(Xe)||t({type:"SET_STROKE_WIDTH",payload:Xe})}let de=localStorage.getItem(_l);if(de)try{let Xe=JSON.parse(de);if(Array.isArray(Xe)&&Xe.length>0){for(let gn of Xe)(gn.status==="waiting_input"||gn.status==="in_flight")&&(gn.status=gn.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:Xe}})}}catch{}let be=localStorage.getItem(Hl);if(be)try{let Xe=JSON.parse(be);Array.isArray(Xe)&&Xe.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:Xe}),Ls(Xe))}catch{}let ye=localStorage.getItem(Fl);if(ye)try{let Xe=JSON.parse(ye);Array.isArray(Xe)&&Xe.length>0&&(t({type:"RESTORE_TEXT_MODIFICATIONS",payload:Xe}),Ps(Xe))}catch{}let Ae=localStorage.getItem(Nl);if(Ae)try{let Xe=JSON.parse(Ae);Array.isArray(Xe)&&Xe.length>0&&(t({type:"RESTORE_DOM_MODIFICATIONS",payload:Xe}),Ds(Xe))}catch{}let je=localStorage.getItem($l);if(je)try{let Xe=JSON.parse(je);Array.isArray(Xe)&&Xe.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:Xe})}catch{}let ct=localStorage.getItem(Nu);if(ct)try{let{selector:Xe,info:gn}=JSON.parse(ct);if(Xe){let sn=hn(Xe);if(sn){let Ct=gn||{...Hn(sn),selector:Xe};t({type:"SELECT_ELEMENT",payload:{el:sn,info:Ct}})}}}catch{}let Zt=sessionStorage.getItem("popmelt-pending-focus");if(Zt){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:Xe}=JSON.parse(Zt);if(Xe){let gn=de?JSON.parse(de)??[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:Xe}});let sn=gn.find(Ct=>Ct.id===Xe);if(sn){let Bn=(sn.groupId?gn.filter(Xn=>Xn.groupId===sn.groupId):[sn]).flatMap(Xn=>Xn.points);if(Bn.length>0){let Xn=Math.min(...Bn.map(Qn=>Qn.x)),qn=Math.max(...Bn.map(Qn=>Qn.x)),Vo=Math.min(...Bn.map(Qn=>Qn.y)),fo=Math.max(...Bn.map(Qn=>Qn.y));window.scrollTo({left:(Xn+qn)/2-window.innerWidth/2,top:(Vo+fo)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch{}}}let W=sessionStorage.getItem("popmelt-pending-thread");if(W){sessionStorage.removeItem("popmelt-pending-thread");try{let{threadId:de,selector:be,preview:ye}=JSON.parse(W);de&&requestAnimationFrame(()=>{if(be)try{let Ae=document.querySelector(be);if(Ae){let je=Ae.getBoundingClientRect(),ct=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:ct,point:{x:je.left+je.width,y:je.top},text:ye||"[thread]",linkedSelector:be,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[ct],threadId:de}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[ct],status:"resolved"}})}}catch{}B&&B(de)})}catch{}}return co.current=!0,()=>{co.current=!1}},[]);let Un=Yt(e.styleModifications),Mt=Yt(e.textModifications),Ft=Yt(e.domModifications);In(()=>{let _=Un.current,W=e.styleModifications;_!==W&&(As(_),Ls(W),Un.current=W)},[e.styleModifications]),In(()=>{let _=Mt.current,W=e.textModifications;_!==W&&(Bs(_),Ps(W),Mt.current=W)},[e.textModifications]),In(()=>{let _=Ft.current,W=e.domModifications;_!==W&&(Os(_),Ds(W),Ft.current=W)},[e.domModifications]),In(()=>{let _=wn.current;wn.current=e.isAnnotating,_&&!e.isAnnotating&&Pe&&Et(!1)},[e.isAnnotating,Pe]);let I=Yt(Pe);I.current=Pe,In(()=>{let _=de=>{if(de.key==="Meta"||de.key==="Control"){let be=Date.now();if(be-Ln.current<300){if(Nt.current++,Nt.current>=2){if(I.current)t({type:"SET_ANNOTATING",payload:!1}),Et(!1);else{let je=localStorage.getItem(zl);t({type:"SET_TOOL",payload:je||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),Et(!0)}Nt.current=0}}else Nt.current=1;Ln.current=be}else Nt.current=0},W=de=>{de.key!=="Meta"&&de.key!=="Control"&&(Nt.current=0)};return window.addEventListener("keydown",_),window.addEventListener("keyup",W),()=>{window.removeEventListener("keydown",_),window.removeEventListener("keyup",W)}},[t]);let j=Co(_=>{Ke(),t({type:"SET_TOOL",payload:_}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),un.current=!1,Dt(null),ht.current&&(clearTimeout(ht.current),ht.current=null),Kt.current&&(clearTimeout(Kt.current),Kt.current=null)},[t,e.isAnnotating,Ke]),ne=Co(async()=>{window.focus(),await n()},[n]),ae=Co(async()=>{o&&await o()},[o]),fe=Co(()=>{t({type:"SET_ANNOTATING",payload:!1}),Et(!1)},[t]),ge=Co(()=>{As(e.styleModifications),Bs(e.textModifications),Os(e.domModifications),document.querySelectorAll("[data-pm]").forEach(_=>_.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(_l),localStorage.removeItem(Hl),localStorage.removeItem(Fl),localStorage.removeItem(Nl),localStorage.removeItem($l),so(null),a?.()},[t,e.styleModifications,e.textModifications,e.domModifications,a]),[le,Ce]=vr(()=>{if(En.current){let _=En.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(_?.[1])return parseFloat(_[1])}return 29}),pt=Yt(null),Fe=Yt(null),lt=Yt(!1),ft=Co(_=>{let W=_.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return W&&W[1]?parseFloat(W[1]):null},[]);In(()=>{lt.current=!0;let _=`oklch(0.628 0.258 ${le})`;t({type:"SET_COLOR",payload:_}),requestAnimationFrame(()=>{lt.current=!1})},[le,t]),In(()=>{if(lt.current)return;let _=ft(e.activeColor);_!==null&&Math.abs(_-le)>.5&&Ce(_)},[e.activeColor,ft,le]);let An=Yt(null);In(()=>{if(r&&i){let _=ft(i);_!==null&&Math.abs(_-le)>.5&&(An.current===null&&(An.current=le),Ce(_))}else An.current!==null&&(Ce(An.current),An.current=null)},[r,i,ft]);let Mn=e.annotations.length>0;In(()=>{let _=Fe.current;if(!_||!Mn)return;let W=de=>{de.preventDefault(),de.stopPropagation();let be=de.deltaY>0?-1:1,ye=((le+be)%360+360)%360,Ae=`oklch(0.628 0.258 ${ye})`;Ce(ye),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:Ae}})};return _.addEventListener("wheel",W,{passive:!1}),()=>_.removeEventListener("wheel",W)},[Mn,e.selectedAnnotationIds,e.lastSelectedId,le,t]);let Do=Yt(!1),fn=Yt(0);In(()=>{let _=e.annotations.some(be=>!be.status||be.status==="pending"),W=Do.current;Do.current=_;let de=fn.current===0&&e.annotations.length>0;if(fn.current=e.annotations.length,(W&&!_||de&&!_)&&e.annotations.length>0){let be=e.annotations.map(ye=>ft(ye.color)).filter(ye=>ye!==null);if(be.length>0){let ye=0,Ae=-1;for(let je=0;je<360;je++){let ct=Math.min(...be.map(Zt=>{let Xe=Math.abs(je-Zt);return Math.min(Xe,360-Xe)}));ct>Ae&&(Ae=ct,ye=je)}Ce(ye)}}},[e.annotations,ft]);let K=Yt(!1),_e=Co(()=>{K.current=!1,pt.current=setTimeout(()=>{K.current=!0,Ce(29)},500)},[]),ot=Co(()=>{pt.current&&(clearTimeout(pt.current),pt.current=null)},[]);In(()=>()=>{pt.current&&clearTimeout(pt.current),et.current&&clearTimeout(et.current)},[]);let qt=bi(),To=si(()=>e.annotations.filter(_=>!_.pathname||_.pathname===qt),[e.annotations,qt]),rn=si(()=>Ns(e.annotations),[e.annotations]),Vt=si(()=>{let _=[],W=new Set,de=[...e.annotations].sort((be,ye)=>be.timestamp-ye.timestamp);for(let be of de)if(!rn.has(be))if(be.groupId){if(!W.has(be.groupId)){W.add(be.groupId);let ye=e.annotations.filter(ct=>ct.groupId===be.groupId&&!rn.has(ct)),Ae=ye.find(ct=>ct.type!=="text")||ye[0],je=Math.min(...ye.map(ct=>ct.timestamp));_.push({id:Ae.id,pathname:be.pathname,annotations:ye,timestamp:je})}}else _.push({id:be.id,pathname:be.pathname,annotations:[be],timestamp:be.timestamp});return _},[e.annotations,rn]),ci=si(()=>Vt.filter(_=>!_.pathname||_.pathname===qt),[Vt,qt]),[gt,so]=vr(null),Kn=Vt.length+e.styleModifications.length;In(()=>{(Kn===0||gt!==null&>>=Kn)&&so(null)},[Kn,gt]),In(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){so(null);return}if(e.selectedAnnotationIds.length>0){let _=e.selectedAnnotationIds[0],W=Vt.findIndex(de=>de.id===_||de.annotations.some(be=>be.id===_));W>=0&&W!==gt&&so(W)}},[e.selectedAnnotationIds,e.inspectedElement,Vt]);let lr=Co(()=>{if(Kn===0)return;let _;if(gt===null?_=0:gt+1>=Kn?_=null:_=gt+1,so(_),_===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(_<Vt.length){let W=Vt[_];if(!(!W.pathname||W.pathname===qt)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:W.id,pathname:W.pathname})),window.location.href=W.pathname;return}t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:W.id}});let be=W.annotations.find(Ct=>Ct.type!=="text")||W.annotations[0];if(W.annotations.some(Ct=>Ct.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(be?.type&&be.type!=="text"&&be.type!=="inspector"){t({type:"SET_TOOL",payload:be.type});let Ct=ai.findIndex(Bn=>Bn.type===be.type);Ct>=0&&Sn(Ct)}if(be?.color){t({type:"SET_COLOR",payload:be.color});let Ct=ft(be.color);Ct!==null&&Ce(Ct)}let Ae=W.annotations.flatMap(Ct=>Ct.points);if(Ae.length===0)return;let je=Math.min(...Ae.map(Ct=>Ct.x)),ct=Math.max(...Ae.map(Ct=>Ct.x)),Zt=Math.min(...Ae.map(Ct=>Ct.y)),Xe=Math.max(...Ae.map(Ct=>Ct.y)),gn=(je+ct)/2,sn=(Zt+Xe)/2;if(window.scrollTo({left:gn-window.innerWidth/2,top:sn-window.innerHeight/2,behavior:"smooth"}),L&&B){let Ct=W.annotations.find(Bn=>Bn.threadId)?.threadId;Ct&&B(Ct)}}else{let W=_-Vt.length,de=e.styleModifications[W];if(!de)return;let be=hn(de.selector);if(!be)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:be,info:de.element}});let ye=be.getBoundingClientRect(),Ae=ye.left+ye.width/2+window.scrollX,je=ye.top+ye.height/2+window.scrollY;window.scrollTo({left:Ae-window.innerWidth/2,top:je-window.innerHeight/2,behavior:"smooth"})}},[Vt,qt,e.styleModifications,Kn,gt,t,ft,L,B]);In(()=>{if(!Pe)return;let _=W=>{let de=document.activeElement;for(;de?.shadowRoot?.activeElement;)de=de.shadowRoot.activeElement;if(de?.tagName==="INPUT"||de?.tagName==="TEXTAREA"||de?.isContentEditable)return;if((W.metaKey||W.ctrlKey)&&W.key==="Enter"){o&&(e.annotations.length>0||e.styleModifications.length>0||e.textModifications.length>0||e.spacingTokenChanges.filter(Ae=>!Ae.captured).length>0)&&(W.preventDefault(),ae());return}if((W.metaKey||W.ctrlKey)&&(W.key==="c"||W.key==="C"||W.code==="KeyC")){let Ae=window.getSelection();if(Ae&&Ae.toString().length>0)return;(e.annotations.length>0||e.styleModifications.length>0||e.textModifications.length>0)&&(W.preventDefault(),window.focus(),ne());return}if((W.metaKey||W.ctrlKey)&&(W.key==="Backspace"||W.key==="Delete")){W.preventDefault(),ge();return}if(W.metaKey||W.ctrlKey||W.altKey)return;let be={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand",e:"eval"};if(W.key.toLowerCase()==="m"){W.preventDefault(),j("model");return}let ye=be[W.key.toLowerCase()];if(ye){W.preventDefault();let Ae=ai.findIndex(je=>je.type===ye);Ae>=0&&Sn(Ae),j(ye)}};return window.addEventListener("keydown",_),()=>window.removeEventListener("keydown",_)},[Pe,j,ne,ae,o,ge,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,at]);let jo=Ic(mt,Oe.w,Oe.h),ao={...L0,...jo,borderRadius:0,padding:Pe?"0 8px":"0",width:Pe?"auto":48,height:48,gap:0,justifyContent:Pe?"flex-start":"center"},xr=he("div",{style:$s({color:r&&i?i:"rgb(0,0,0)",animated:!!r})}),So=U===!1?"rgba(239, 68, 68, 0.4)":r&&i?i:Po.iconActive,uo=!!(ee&&se&&ee!==se),po=O==="restarting"||!g&&!C,Pn=O==="error"?"#dc2626":O==="ok"?Po.iconDefault:uo?"#b45309":Po.iconDefault,di=O==="restarting"?"Restarting":O==="error"?"Restart failed":O==="ok"?"Restarted":uo?"Update bridge":null,ui=D??(uo?`Bridge ${se} is older than package ${ee}. Restart bridge.`:se?`Bridge ${se}. Restart bridge.`:"Restart bridge"),cr=Yt(null);In(()=>{if(!Pe)return;let _=cr.current;if(!_)return;let W=()=>{s?.(!0),Le("collapse")},de=()=>{s?.(!1),tt()};return _.addEventListener("mouseenter",W),_.addEventListener("mouseleave",de),()=>{_.removeEventListener("mouseenter",W),_.removeEventListener("mouseleave",de)}},[Pe,r,s,Le,tt]);let Br=Yt(null);return In(()=>{if(Pe)return;let _=Br.current;if(!_)return;let W=_.querySelector("[data-popmelt-logo]"),de=()=>{_.style.opacity="1",!r&&W&&(W.style.fill="#000"),Q?.()},be=()=>{_.style.opacity=r?"1":"0.5",!r&&W&&(W.style.fill="none")};return _.addEventListener("mouseenter",de),_.addEventListener("mouseleave",be),()=>{_.removeEventListener("mouseenter",de),_.removeEventListener("mouseleave",be)}},[Pe,r,Q]),Pe?Bt(ds,{children:[he("style",{children:`
|
|
43
|
+
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},D0={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"},Hl="devtools-toolbar-expanded",Fl="devtools-annotations",Nl="devtools-style-modifications",zl="devtools-text-modifications",$l="devtools-dom-modifications",Wl="devtools-active-tool",Nu="devtools-active-color",zu="devtools-stroke-width",$u="devtools-inspected-element",jl="devtools-spacing-changes",O0={expanded:Hl,annotations:Fl,styleMods:Nl,textMods:zl,domMods:$l,spacingChanges:jl,tool:Wl,color:Nu,stroke:zu,inspected:$u};function Wu({state:e,dispatch:t,onScreenshot:n,onSendToClaude:o,hasActiveJobs:r,activeJobColor:i,onCrosshairHover:s,onClear:a,provider:l="claude",onProviderChange:c,availableProviders:u,modelIndex:d=0,modelCount:p=2,modelLabel:f="Opus 4.6",models:m=[],agentSettings:E={},onModelChange:x,onAgentSettingsChange:S,onViewThread:P,isThreadPanelOpen:L,mcpStatus:D,bridgeUrl:C,isBridgeConnected:G,packageVersion:ee,bridgeVersion:se,bridgeRestartState:O="idle",bridgeRestartMessage:B,onBridgeRestart:g,modelSelectedComponent:v,modelCanvasHoveredComponent:b,onModelComponentHover:ie,onSpacingTokenHover:ve,onModifySpacingToken:ce,onDeleteSpacingToken:ue,modelRefreshKey:we,evalRefreshKey:Ue,onModelComponentAdded:V,onModelComponentRemoved:A,onSynthesizeRules:J,isSynthesizing:ke,onSynthesizeEvals:De,isSynthesizingEvals:pe,onRunEval:Ge,onViewEvalRunThread:Ze,runningEvalIds:Te,onMouseEnter:Q,toolbarRef:Ie,snapPosition:mt="bottom-right",onSnapPositionChange:We}){let[Oe,He]=vr(()=>typeof window<"u"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});In(()=>{let _=()=>He({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",_),()=>window.removeEventListener("resize",_)},[]);let[Pe,Et]=vr(()=>typeof window>"u"?!1:localStorage.getItem(Hl)==="true"),[dn,Sn]=vr(0),Ln=Gt(0),Nt=Gt(0),wn=Gt(e.isAnnotating),co=Gt(!1),Jn=Gt(typeof window<"u"?localStorage.getItem(Wl):null),En=Gt(typeof window<"u"?localStorage.getItem(Nu):null),At=Gt(typeof window<"u"?localStorage.getItem(zu):null),[at,Dt]=vr(null),un=Gt(!1),ht=Gt(null),Yt=Gt(null),bt=Gt(null),[oo,xo]=vr([]),Z=Gt({x:0,y:0}),xe=Gt(null),Re=Gt(null),et=Gt(null),Ke=Co(()=>{xe.current=null,Re.current=null,et.current&&(clearTimeout(et.current),et.current=null)},[]),Le=Co(_=>{Yt.current&&(clearTimeout(Yt.current),Yt.current=null),un.current?(xe.current=_,Re.current={...Z.current},et.current&&clearTimeout(et.current),et.current=setTimeout(()=>{xe.current&&(Dt(xe.current),Ke())},300)):(ht.current&&clearTimeout(ht.current),ht.current=setTimeout(()=>{un.current=!0,Dt(_),ht.current=null},500))},[Ke]),tt=Co(()=>{Ke(),ht.current&&(clearTimeout(ht.current),ht.current=null),Yt.current=setTimeout(()=>{un.current=!1,Dt(null)},150)},[Ke]);In(()=>{let _=bt.current;if(!_)return;let W=()=>{Ke(),Yt.current&&(clearTimeout(Yt.current),Yt.current=null)},de=()=>{Yt.current=setTimeout(()=>{un.current=!1,Dt(null)},150)};return _.addEventListener("mouseenter",W),_.addEventListener("mouseleave",de),()=>{_.removeEventListener("mouseenter",W),_.removeEventListener("mouseleave",de)}},[at,Ke]),In(()=>{if(at!=="counter"||!C)return;let _=!1;return ko(`${C}/threads/recent?limit=5`).then(W=>W.ok?W.json():[]).then(W=>{_||xo(W)}).catch(()=>{}),()=>{_=!0}},[at,C]);let qt=Co(_=>{if(Z.current={x:_.clientX,y:_.clientY},xe.current&&Re.current){let W=Re.current,de=P0(mt);A0(_.clientX,_.clientY,W.x,W.y,de.left,de.y,de.right,de.y)||(Dt(xe.current),Ke())}},[Ke,mt]),pn=ai(()=>{let _=(u??[]).map(W=>W==="claude"?"Claude":W==="codex"?"Codex":W==="copilot"?"Copilot":W);return{name:"AI Model",desc:_.length>1?`${_.join(" and ")} are available.`:_.length===1?`Connected to ${_[0]}.`:"No AI providers detected.",usage:_.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:_.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}]}},[u]),Cn=ai(()=>{let _=u&&u.length>0?u:["claude","codex","copilot"],W=_.indexOf(l);return _[(W>=0?W+1:0)%_.length]??l},[u,l]),Ut=ai(()=>R0(p,d),[p,d]),$t=m[d],Wt=$t?.supportedReasoningLevels??[],Yn=$t?.speedTiers??[];pu(Pe,e,co,!!r,O0),In(()=>{let _=new URLSearchParams(window.location.search);if(!_.has("popmelt"))return;let W=document.createElement("style");W.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(W);let de=parseInt(_.get("popmelt")||"0",10)||0,be=()=>{Et(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})},me=de>0?setTimeout(be,de):null;return me||be(),()=>{me&&clearTimeout(me),W.remove()}},[]),In(()=>{if(localStorage.getItem(Hl)==="true"&&!e.isAnnotating){if(Pe||Et(!0),t({type:"SET_TOOL",payload:Jn.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),En.current&&t({type:"SET_COLOR",payload:En.current}),At.current){let Xe=parseFloat(At.current);isNaN(Xe)||t({type:"SET_STROKE_WIDTH",payload:Xe})}let de=localStorage.getItem(Fl);if(de)try{let Xe=JSON.parse(de);if(Array.isArray(Xe)&&Xe.length>0){for(let gn of Xe)(gn.status==="waiting_input"||gn.status==="in_flight")&&(gn.status=gn.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:Xe}})}}catch{}let be=localStorage.getItem(Nl);if(be)try{let Xe=JSON.parse(be);Array.isArray(Xe)&&Xe.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:Xe}),As(Xe))}catch{}let me=localStorage.getItem(zl);if(me)try{let Xe=JSON.parse(me);Array.isArray(Xe)&&Xe.length>0&&(t({type:"RESTORE_TEXT_MODIFICATIONS",payload:Xe}),Bs(Xe))}catch{}let Ae=localStorage.getItem($l);if(Ae)try{let Xe=JSON.parse(Ae);Array.isArray(Xe)&&Xe.length>0&&(t({type:"RESTORE_DOM_MODIFICATIONS",payload:Xe}),Os(Xe))}catch{}let je=localStorage.getItem(jl);if(je)try{let Xe=JSON.parse(je);Array.isArray(Xe)&&Xe.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:Xe})}catch{}let ct=localStorage.getItem($u);if(ct)try{let{selector:Xe,info:gn}=JSON.parse(ct);if(Xe){let sn=hn(Xe);if(sn){let Ct=gn||{...Hn(sn),selector:Xe};t({type:"SELECT_ELEMENT",payload:{el:sn,info:Ct}})}}}catch{}let Xt=sessionStorage.getItem("popmelt-pending-focus");if(Xt){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:Xe}=JSON.parse(Xt);if(Xe){let gn=de?JSON.parse(de)??[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:Xe}});let sn=gn.find(Ct=>Ct.id===Xe);if(sn){let Bn=(sn.groupId?gn.filter(Xn=>Xn.groupId===sn.groupId):[sn]).flatMap(Xn=>Xn.points);if(Bn.length>0){let Xn=Math.min(...Bn.map(Qn=>Qn.x)),qn=Math.max(...Bn.map(Qn=>Qn.x)),Vo=Math.min(...Bn.map(Qn=>Qn.y)),fo=Math.max(...Bn.map(Qn=>Qn.y));window.scrollTo({left:(Xn+qn)/2-window.innerWidth/2,top:(Vo+fo)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch{}}}let W=sessionStorage.getItem("popmelt-pending-thread");if(W){sessionStorage.removeItem("popmelt-pending-thread");try{let{threadId:de,selector:be,preview:me}=JSON.parse(W);de&&requestAnimationFrame(()=>{if(be)try{let Ae=document.querySelector(be);if(Ae){let je=Ae.getBoundingClientRect(),ct=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:ct,point:{x:je.left+je.width,y:je.top},text:me||"[thread]",linkedSelector:be,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[ct],threadId:de}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[ct],status:"resolved"}})}}catch{}P&&P(de)})}catch{}}return co.current=!0,()=>{co.current=!1}},[]);let Un=Gt(e.styleModifications),Tt=Gt(e.textModifications),Ft=Gt(e.domModifications);In(()=>{let _=Un.current,W=e.styleModifications;_!==W&&(Ps(_),As(W),Un.current=W)},[e.styleModifications]),In(()=>{let _=Tt.current,W=e.textModifications;_!==W&&(Ds(_),Bs(W),Tt.current=W)},[e.textModifications]),In(()=>{let _=Ft.current,W=e.domModifications;_!==W&&(_s(_),Os(W),Ft.current=W)},[e.domModifications]),In(()=>{let _=wn.current;wn.current=e.isAnnotating,_&&!e.isAnnotating&&Pe&&Et(!1)},[e.isAnnotating,Pe]);let I=Gt(Pe);I.current=Pe,In(()=>{let _=de=>{if(de.key==="Meta"||de.key==="Control"){let be=Date.now();if(be-Ln.current<300){if(Nt.current++,Nt.current>=2){if(I.current)t({type:"SET_ANNOTATING",payload:!1}),Et(!1);else{let je=localStorage.getItem(Wl);t({type:"SET_TOOL",payload:je||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),Et(!0)}Nt.current=0}}else Nt.current=1;Ln.current=be}else Nt.current=0},W=de=>{de.key!=="Meta"&&de.key!=="Control"&&(Nt.current=0)};return window.addEventListener("keydown",_),window.addEventListener("keyup",W),()=>{window.removeEventListener("keydown",_),window.removeEventListener("keyup",W)}},[t]);let j=Co(_=>{Ke(),t({type:"SET_TOOL",payload:_}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),un.current=!1,Dt(null),ht.current&&(clearTimeout(ht.current),ht.current=null),Yt.current&&(clearTimeout(Yt.current),Yt.current=null)},[t,e.isAnnotating,Ke]),ne=Co(async()=>{window.focus(),await n()},[n]),ae=Co(async()=>{o&&await o()},[o]),fe=Co(()=>{t({type:"SET_ANNOTATING",payload:!1}),Et(!1)},[t]),ge=Co(()=>{Ps(e.styleModifications),Ds(e.textModifications),_s(e.domModifications),document.querySelectorAll("[data-pm]").forEach(_=>_.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(Fl),localStorage.removeItem(Nl),localStorage.removeItem(zl),localStorage.removeItem($l),localStorage.removeItem(jl),so(null),a?.()},[t,e.styleModifications,e.textModifications,e.domModifications,a]),[le,Ce]=vr(()=>{if(En.current){let _=En.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(_?.[1])return parseFloat(_[1])}return 29}),pt=Gt(null),Fe=Gt(null),lt=Gt(!1),ft=Co(_=>{let W=_.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return W&&W[1]?parseFloat(W[1]):null},[]);In(()=>{lt.current=!0;let _=`oklch(0.628 0.258 ${le})`;t({type:"SET_COLOR",payload:_}),requestAnimationFrame(()=>{lt.current=!1})},[le,t]),In(()=>{if(lt.current)return;let _=ft(e.activeColor);_!==null&&Math.abs(_-le)>.5&&Ce(_)},[e.activeColor,ft,le]);let An=Gt(null);In(()=>{if(r&&i){let _=ft(i);_!==null&&Math.abs(_-le)>.5&&(An.current===null&&(An.current=le),Ce(_))}else An.current!==null&&(Ce(An.current),An.current=null)},[r,i,ft]);let Tn=e.annotations.length>0;In(()=>{let _=Fe.current;if(!_||!Tn)return;let W=de=>{de.preventDefault(),de.stopPropagation();let be=de.deltaY>0?-1:1,me=((le+be)%360+360)%360,Ae=`oklch(0.628 0.258 ${me})`;Ce(me),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:Ae}})};return _.addEventListener("wheel",W,{passive:!1}),()=>_.removeEventListener("wheel",W)},[Tn,e.selectedAnnotationIds,e.lastSelectedId,le,t]);let Do=Gt(!1),fn=Gt(0);In(()=>{let _=e.annotations.some(be=>!be.status||be.status==="pending"),W=Do.current;Do.current=_;let de=fn.current===0&&e.annotations.length>0;if(fn.current=e.annotations.length,(W&&!_||de&&!_)&&e.annotations.length>0){let be=e.annotations.map(me=>ft(me.color)).filter(me=>me!==null);if(be.length>0){let me=0,Ae=-1;for(let je=0;je<360;je++){let ct=Math.min(...be.map(Xt=>{let Xe=Math.abs(je-Xt);return Math.min(Xe,360-Xe)}));ct>Ae&&(Ae=ct,me=je)}Ce(me)}}},[e.annotations,ft]);let K=Gt(!1),_e=Co(()=>{K.current=!1,pt.current=setTimeout(()=>{K.current=!0,Ce(29)},500)},[]),ot=Co(()=>{pt.current&&(clearTimeout(pt.current),pt.current=null)},[]);In(()=>()=>{pt.current&&clearTimeout(pt.current),et.current&&clearTimeout(et.current)},[]);let Kt=vi(),Mo=ai(()=>e.annotations.filter(_=>!_.pathname||_.pathname===Kt),[e.annotations,Kt]),rn=ai(()=>zs(e.annotations),[e.annotations]),jt=ai(()=>{let _=[],W=new Set,de=[...e.annotations].sort((be,me)=>be.timestamp-me.timestamp);for(let be of de)if(!rn.has(be))if(be.groupId){if(!W.has(be.groupId)){W.add(be.groupId);let me=e.annotations.filter(ct=>ct.groupId===be.groupId&&!rn.has(ct)),Ae=me.find(ct=>ct.type!=="text")||me[0],je=Math.min(...me.map(ct=>ct.timestamp));_.push({id:Ae.id,pathname:be.pathname,annotations:me,timestamp:je})}}else _.push({id:be.id,pathname:be.pathname,annotations:[be],timestamp:be.timestamp});return _},[e.annotations,rn]),di=ai(()=>jt.filter(_=>!_.pathname||_.pathname===Kt),[jt,Kt]),[gt,so]=vr(null),Kn=jt.length+e.styleModifications.length;In(()=>{(Kn===0||gt!==null&>>=Kn)&&so(null)},[Kn,gt]),In(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){so(null);return}if(e.selectedAnnotationIds.length>0){let _=e.selectedAnnotationIds[0],W=jt.findIndex(de=>de.id===_||de.annotations.some(be=>be.id===_));W>=0&&W!==gt&&so(W)}},[e.selectedAnnotationIds,e.inspectedElement,jt]);let lr=Co(()=>{if(Kn===0)return;let _;if(gt===null?_=0:gt+1>=Kn?_=null:_=gt+1,so(_),_===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(_<jt.length){let W=jt[_];if(!(!W.pathname||W.pathname===Kt)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:W.id,pathname:W.pathname})),window.location.href=W.pathname;return}t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:W.id}});let be=W.annotations.find(Ct=>Ct.type!=="text")||W.annotations[0];if(W.annotations.some(Ct=>Ct.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(be?.type&&be.type!=="text"&&be.type!=="inspector"){t({type:"SET_TOOL",payload:be.type});let Ct=li.findIndex(Bn=>Bn.type===be.type);Ct>=0&&Sn(Ct)}if(be?.color){t({type:"SET_COLOR",payload:be.color});let Ct=ft(be.color);Ct!==null&&Ce(Ct)}let Ae=W.annotations.flatMap(Ct=>Ct.points);if(Ae.length===0)return;let je=Math.min(...Ae.map(Ct=>Ct.x)),ct=Math.max(...Ae.map(Ct=>Ct.x)),Xt=Math.min(...Ae.map(Ct=>Ct.y)),Xe=Math.max(...Ae.map(Ct=>Ct.y)),gn=(je+ct)/2,sn=(Xt+Xe)/2;if(window.scrollTo({left:gn-window.innerWidth/2,top:sn-window.innerHeight/2,behavior:"smooth"}),L&&P){let Ct=W.annotations.find(Bn=>Bn.threadId)?.threadId;Ct&&P(Ct)}}else{let W=_-jt.length,de=e.styleModifications[W];if(!de)return;let be=hn(de.selector);if(!be)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:be,info:de.element}});let me=be.getBoundingClientRect(),Ae=me.left+me.width/2+window.scrollX,je=me.top+me.height/2+window.scrollY;window.scrollTo({left:Ae-window.innerWidth/2,top:je-window.innerHeight/2,behavior:"smooth"})}},[jt,Kt,e.styleModifications,Kn,gt,t,ft,L,P]);In(()=>{if(!Pe)return;let _=W=>{let de=document.activeElement;for(;de?.shadowRoot?.activeElement;)de=de.shadowRoot.activeElement;if(de?.tagName==="INPUT"||de?.tagName==="TEXTAREA"||de?.isContentEditable)return;if((W.metaKey||W.ctrlKey)&&W.key==="Enter"){o&&(e.annotations.length>0||e.styleModifications.length>0||e.textModifications.length>0||e.spacingTokenChanges.filter(Ae=>!Ae.captured).length>0)&&(W.preventDefault(),ae());return}if((W.metaKey||W.ctrlKey)&&(W.key==="c"||W.key==="C"||W.code==="KeyC")){let Ae=window.getSelection();if(Ae&&Ae.toString().length>0)return;(e.annotations.length>0||e.styleModifications.length>0||e.textModifications.length>0)&&(W.preventDefault(),window.focus(),ne());return}if((W.metaKey||W.ctrlKey)&&(W.key==="Backspace"||W.key==="Delete")){W.preventDefault(),ge();return}if(W.metaKey||W.ctrlKey||W.altKey)return;let be={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand",e:"eval"};if(W.key.toLowerCase()==="m"){W.preventDefault(),j("model");return}let me=be[W.key.toLowerCase()];if(me){W.preventDefault();let Ae=li.findIndex(je=>je.type===me);Ae>=0&&Sn(Ae),j(me)}};return window.addEventListener("keydown",_),()=>window.removeEventListener("keydown",_)},[Pe,j,ne,ae,o,ge,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,at]);let jo=Lc(mt,Oe.w,Oe.h),ao={...D0,...jo,borderRadius:0,padding:Pe?"0 8px":"0",width:Pe?"auto":48,height:48,gap:0,justifyContent:Pe?"flex-start":"center"},xr=ye("div",{style:Ws({color:r&&i?i:"rgb(0,0,0)",animated:!!r})}),So=G===!1?"rgba(239, 68, 68, 0.4)":r&&i?i:Po.iconActive,uo=!!(ee&&se&&ee!==se),po=O==="restarting"||!g&&!C,Pn=O==="error"?"#dc2626":O==="ok"?Po.iconDefault:uo?"#b45309":Po.iconDefault,ui=O==="restarting"?"Restarting":O==="error"?"Restart failed":O==="ok"?"Restarted":uo?"Update bridge":null,pi=B??(uo?`Bridge ${se} is older than package ${ee}. Restart bridge.`:se?`Bridge ${se}. Restart bridge.`:"Restart bridge"),cr=Gt(null);In(()=>{if(!Pe)return;let _=cr.current;if(!_)return;let W=()=>{s?.(!0),Le("collapse")},de=()=>{s?.(!1),tt()};return _.addEventListener("mouseenter",W),_.addEventListener("mouseleave",de),()=>{_.removeEventListener("mouseenter",W),_.removeEventListener("mouseleave",de)}},[Pe,r,s,Le,tt]);let Br=Gt(null);return In(()=>{if(Pe)return;let _=Br.current;if(!_)return;let W=_.querySelector("[data-popmelt-logo]"),de=()=>{_.style.opacity="1",!r&&W&&(W.style.fill="#000"),Q?.()},be=()=>{_.style.opacity=r?"1":"0.5",!r&&W&&(W.style.fill="none")};return _.addEventListener("mouseenter",de),_.addEventListener("mouseleave",be),()=>{_.removeEventListener("mouseenter",de),_.removeEventListener("mouseleave",be)}},[Pe,r,Q]),Pe?Bt(us,{children:[ye("style",{children:`
|
|
44
44
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
45
45
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
46
|
-
`}),
|
|
46
|
+
`}),ye("div",{id:"devtools-scrim",style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.06)",zIndex:9997,pointerEvents:"none"}}),!L&&(at==="eval"||e.activeTool==="eval")&&ye(yu,{bridgeUrl:C,refreshKey:Ue,snapPosition:mt,onSynthesize:De,isSynthesizing:pe,onRunEval:Ge,onViewRunThread:Ze,runningEvalIds:Te,onMouseEnter:()=>{Ke(),Yt.current&&(clearTimeout(Yt.current),Yt.current=null)},onMouseLeave:e.activeTool==="eval"?void 0:tt}),!L&&(at==="model"||e.activeTool==="model")&&ye(Bu,{bridgeUrl:C,selectedComponent:v,hoveredComponent:b,onComponentHover:ie,onSpacingTokenHover:ve,onModifySpacingToken:ce,onDeleteSpacingToken:ue,modelRefreshKey:we,onComponentAdded:V,onComponentRemoved:A,onSynthesizeRules:J,isSynthesizing:ke,snapPosition:mt,onMouseEnter:()=>{Ke(),Yt.current&&(clearTimeout(Yt.current),Yt.current=null)},onMouseLeave:e.activeTool==="model"?void 0:tt}),at&&at!=="model"&&at!=="eval"&&(at==="provider"||Hu[at])&&(()=>{let _=at==="provider"?pn:Hu[at];return Bt("div",{ref:bt,style:{...Ac(mt,Oe.w,Oe.h),width:300,backgroundColor:"#eaeaea",...Ri,boxSizing:"content-box",zIndex:10001,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:12,color:"#1f2937",padding:12,...at!=="collapse"&&at!=="counter"&&at!=="provider"?{pointerEvents:"none"}:{}},children:[at==="collapse"&&ye("div",{style:{marginBottom:10,width:"fit-content",color:Po.iconDefault},children:ye("svg",{width:"48",height:"48",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:ye("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"})})}),Bt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[ye("span",{children:_.name}),_.keys[0]&&ye("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:_.keys[0].key})]}),ye("div",{style:{color:"#6b7280",lineHeight:1.5,marginBottom:at==="collapse"?0:10},children:_.desc.split(`
|
|
47
47
|
|
|
48
|
-
`).map((W,de)=>he("p",{style:{margin:0,marginTop:de>0?8:0},children:W},de))}),at==="provider"?Bt("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[Bt("label",{style:{display:"grid",gridTemplateColumns:"72px minmax(0, 1fr)",alignItems:"center",gap:8},children:[he("span",{style:{color:"#6b7280",fontSize:11},children:"Model"}),he(Dl,{value:String(d),options:m.map((W,de)=>({value:String(de),label:W.label})),onChange:W=>x?.(Number(W)),disabled:!x||m.length===0})]}),jt.length>0&&Bt("label",{style:{display:"grid",gridTemplateColumns:"72px minmax(0, 1fr)",alignItems:"center",gap:8},children:[he("span",{style:{color:"#6b7280",fontSize:11},children:"Thinking"}),he(Dl,{value:E.reasoningEffort??"",onChange:W=>S?.({...E,reasoningEffort:W||void 0}),disabled:!S,options:[{value:"",label:"Inherit"},...jt.map(W=>({value:W.effort,label:`${W.effort.charAt(0).toUpperCase()}${W.effort.slice(1)}${W.effort===Wt?.defaultReasoningLevel?" (model default)":""}`}))]})]}),Yn.length>0&&Bt("label",{style:{display:"grid",gridTemplateColumns:"72px minmax(0, 1fr)",alignItems:"center",gap:8},children:[he("span",{style:{color:"#6b7280",fontSize:11},children:"Speed"}),he(Dl,{value:E.serviceTier??"",onChange:W=>S?.({...E,serviceTier:W||void 0}),disabled:!S,options:[{value:"",label:"Inherit"},{value:"default",label:"Standard"},...Yn.map(W=>({value:W.id,label:W.label}))]})]})]}):_.usage.map((W,de)=>Bt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[he("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),he("span",{children:W})]},de)),at==="collapse"&&We&&Bt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8},children:[he("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:6,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Position"}),he("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:3,width:"fit-content"},children:Pc.map(W=>{let de=W===mt;return he("button",{type:"button",onClick:()=>{Dt(null),un.current=!1,Ke(),We(W)},title:W,style:{width:24,height:16,border:"none",cursor:"pointer",padding:0,backgroundColor:de?"#1f2937":"rgba(0,0,0,0.08)",transition:"background-color 100ms ease"},onMouseEnter:be=>{de||(be.currentTarget.style.backgroundColor="rgba(0,0,0,0.15)")},onMouseLeave:be=>{de||(be.currentTarget.style.backgroundColor="rgba(0,0,0,0.08)")}},W)})})]}),at==="collapse"&&(()=>{let W=Object.entries(A??{}),de=W.filter(([,je])=>je.found&&!je.disabled).map(([je])=>je.charAt(0).toUpperCase()+je.slice(1)),be=W.filter(([,je])=>!je.found).map(([je])=>je);if(!C&&!g&&de.length===0&&be.length===0)return null;let ye=be.map(je=>je.charAt(0).toUpperCase()+je.slice(1)),Ae=[...de,...ye];return Bt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[(g||C)&&he("button",{type:"button",onClick:()=>{po||(g?g():dc(C))},disabled:po,title:ui,"aria-label":di??"Restart bridge",style:{display:"flex",alignItems:"center",justifyContent:"center",width:22,height:22,border:"none",borderRadius:0,backgroundColor:uo||O!=="idle"?"rgba(0,0,0,0.07)":"rgba(0,0,0,0.04)",color:Pn,cursor:po?"default":"pointer",padding:0,opacity:po?.55:1,flexShrink:0},children:O==="ok"?he(_u,{size:14,strokeWidth:1.8}):he(x0,{size:13,strokeWidth:1.7,style:{animation:O==="restarting"?"spin 0.8s linear infinite":void 0}})}),de.length>0?Bt("span",{style:{color:"#6b7280"},children:["Available in ",Ae.join(", ")]}):be.length>0?Bt("span",{style:{color:"#6b7280"},children:["Available in ",ye.join(", ")]}):null]})})(),_.keys.length>1&&he("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:_.keys.slice(1).map((W,de)=>Bt("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:W.accent?"#fff":"#6b7280"},children:[he("code",{style:{fontSize:10,backgroundColor:W.accent?e.activeColor:"rgba(0,0,0,0.06)",color:W.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:W.key}),he("span",{style:{color:W.accent?e.activeColor:void 0,fontWeight:W.accent?600:void 0},children:W.desc})]},de))}),at==="counter"&&Vt.length>0&&(()=>{let W=he("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:he("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Active"})}),de=new Map;for(let Ae of Vt){let je=Ae.pathname||qt;de.has(je)||de.set(je,[]),de.get(je).push(Ae)}let be=[...de.entries()],ye=be.length>1;return Bt("div",{children:[W,he("div",{style:{maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:be.map(([Ae,je])=>he("div",{style:{marginBottom:ye?4:0},children:je.map(ct=>{let Xe=ct.annotations.find(Xn=>Xn.type==="text"&&Xn.text)?.text||`[${ct.annotations[0]?.type??"annotation"}]`,gn=e.selectedAnnotationIds.includes(ct.id),sn=Vt.indexOf(ct),Ct=sn+1,Bn=ct.annotations[0]?.color??e.activeColor;return Bt("div",{onClick:()=>{if(!(!ct.pathname||ct.pathname===qt)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:ct.id,pathname:ct.pathname})),window.location.href=ct.pathname;return}if(so(sn),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:ct.id}}),B){let qn=ct.annotations.find(Vo=>Vo.threadId)?.threadId;qn&&B(qn)}un.current=!1,Dt(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:Xn=>{let qn=Xn.currentTarget.querySelector("[data-route-badge]");qn&&(qn.style.backgroundColor=Bn,qn.style.color="#fff")},onMouseLeave:Xn=>{if(gn)return;let qn=Xn.currentTarget.querySelector("[data-route-badge]");qn&&(qn.style.backgroundColor="rgba(0,0,0,0.06)",qn.style.color="#6b7280")},children:[Bt("code",{"data-route-badge":!0,style:{fontSize:10,color:gn?"#fff":"#6b7280",backgroundColor:gn?Bn:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[Ct,". ",ye?Ae:""]}),he("span",{style:{fontSize:11,color:gn?"#1f2937":"#6b7280",fontWeight:gn?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Xe})]},ct.id)})},Ae))})]})})(),at==="counter"&&(()=>{let W=new Set(Vt.flatMap(ye=>ye.annotations.map(Ae=>Ae.threadId).filter(Boolean))),de=oo.filter(ye=>!W.has(ye.id));if(de.length===0)return null;let be=ye=>{let Ae=Math.floor((Date.now()-ye)/1e3);if(Ae<60)return"now";let je=Math.floor(Ae/60);if(je<60)return`${je}m`;let ct=Math.floor(je/60);return ct<24?`${ct}h`:`${Math.floor(ct/24)}d`};return Bt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:[he("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Recent"}),de.map(ye=>Bt("div",{onClick:()=>{let Ae=ye.elementIdentifiers[0];if(Ae){let je=Ae.indexOf(":"),ct=je>0&&Ae[0]==="/",Zt=ct?Ae.slice(0,je):void 0,Xe=ct?Ae.slice(je+1):Ae;if(!(!Zt||Zt===qt)){sessionStorage.setItem("popmelt-pending-thread",JSON.stringify({threadId:ye.id,selector:Xe,preview:ye.preview})),window.location.href=Zt;return}try{let sn=document.querySelector(Xe);if(sn){let Ct=sn.getBoundingClientRect(),Bn=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:Bn,point:{x:Ct.left+Ct.width,y:Ct.top},text:ye.preview,linkedSelector:Xe,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[Bn],threadId:ye.id}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[Bn],status:"resolved"}})}}catch{}}B&&B(ye.id),un.current=!1,Dt(null)},style:{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:8,padding:"2px 0",cursor:"pointer",color:"#6b7280",fontSize:11},onMouseEnter:Ae=>{Ae.currentTarget.style.color="#1f2937"},onMouseLeave:Ae=>{Ae.currentTarget.style.color="#6b7280"},children:[he("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:ye.preview}),he("span",{style:{flexShrink:0,fontSize:10,color:"#9ca3af"},children:be(ye.createdAt)})]},ye.id))]})})()]})})(),Bt("div",{ref:_=>{Ie&&(Ie.current=_)},id:"devtools-toolbar",style:ao,onMouseEnter:Q,onMouseMove:Qt,children:[xr,Bt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[he("span",{onMouseEnter:()=>Le("inspector"),onMouseLeave:tt,children:he(br,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>j("inspector"),children:he(b0,{size:20,strokeWidth:1.5})})}),he("span",{onMouseEnter:()=>Le("hand"),onMouseLeave:tt,children:he(br,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>j("hand"),children:Bt("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[he(y0,{size:20,strokeWidth:1.5}),e.styleModifications.filter(_=>!_.captured).length>0&&he("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(_=>!_.captured).length})]})})}),(()=>{let _=ai[dn],W=_.icon,de=e.isAnnotating&&T0.has(e.activeTool);return he("span",{onMouseEnter:()=>Le(_.type),onMouseLeave:tt,children:Bt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[he(br,{active:de,siblingActive:e.isAnnotating,onClick:()=>j(_.type),children:he(W,{size:20,strokeWidth:1.5})}),he("button",{type:"button",onClick:()=>{let be=(dn+1)%ai.length;Sn(be),j(ai[be].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&&!de?.5:1,transition:"opacity 150ms ease"},children:ai.map((be,ye)=>he("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:ye===dn?Po.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},ye))})]})})})(),R0.map(({type:_,icon:W,label:de,shortcut:be})=>he("span",{onMouseEnter:()=>Le(_),onMouseLeave:tt,children:he(br,{active:e.isAnnotating&&e.activeTool===_,siblingActive:e.isAnnotating,onClick:()=>j(_),children:he(W,{size:20,strokeWidth:1.5})})},_)),he("span",{onMouseEnter:()=>Le("eval"),onMouseLeave:tt,children:he(br,{active:e.isAnnotating&&e.activeTool==="eval",siblingActive:e.isAnnotating,onClick:()=>j("eval"),children:he(h0,{size:18,strokeWidth:1.5})})}),he("span",{onMouseEnter:()=>Le("model"),onMouseLeave:tt,children:he(br,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>j("model"),children:he(m0,{size:17,strokeWidth:1.5})})})]}),he(Bu,{}),Bt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(Vt.length>0||e.styleModifications.length>0||e.textModifications.length>0||e.spacingTokenChanges.filter(_=>!_.captured).length>0)&&(()=>{let _=gt!==null&><Vt.length?Vt[gt]:null,W=e.annotations.length>0&&e.annotations.every(ye=>ye.status&&ye.status!=="pending"),de=gt!==null?_?.annotations.some(ye=>ye.status&&ye.status!=="pending")??!1:W,be=`oklch(0.628 0.258 ${le})`;return he("span",{onMouseEnter:()=>Le("counter"),onMouseLeave:tt,children:he("button",{ref:Fe,type:"button",onClick:()=>{if(K.current){K.current=!1;return}lr()},onMouseDown:_e,onMouseUp:ot,onMouseLeave:ot,title:"",style:{display:"flex",alignItems:"center",justifyContent:"center",gap:4,minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:de&>===null?"#999999":be,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let ye=Vt.length+e.styleModifications.length+e.textModifications.length+e.spacingTokenChanges.filter(je=>!je.captured).length;if(gt!==null)return Bt(ds,{children:[gt+1,Bt("span",{style:{opacity:.4,display:"flex",gap:4},children:[he("span",{children:"/"}),he("span",{children:ye})]})]});let Ae=ci.length+e.styleModifications.length+e.textModifications.length+e.spacingTokenChanges.filter(je=>!je.captured).length;return ye>Ae?Bt(ds,{children:[Ae,Bt("span",{style:{opacity:.4,display:"flex",gap:4},children:[he("span",{children:"/"}),he("span",{children:ye})]})]}):ye})()})})})(),(e.annotations.length>0||e.styleModifications.length>0||e.textModifications.length>0)&&he("span",{onMouseEnter:()=>Le("clear"),onMouseLeave:tt,children:he(br,{siblingActive:e.isAnnotating,onClick:ge,title:"Clear all (\u2318\u232B)",children:he(E0,{size:17,strokeWidth:1.5})})}),c&&Bt(ds,{children:[he("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),he("span",{onMouseEnter:()=>Le("provider"),onMouseLeave:tt,style:{display:"contents"},children:Bt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[he(br,{onClick:()=>c(Cn),children:he(cs,{provider:l})}),Bt("button",{type:"button",onClick:()=>{let _=(d+1)%p;x?.(_)},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:Po.iconDefault,whiteSpace:"nowrap"},children:[he("span",{children:f}),he("span",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:2},children:Xt.map(_=>he("div",{style:{width:_.overflow?2:3,height:_.overflow?2:3,borderRadius:"50%",backgroundColor:_.active?Po.iconDefault:"rgba(0,0,0,0.2)",opacity:_.overflow?.65:1,transition:"background-color 150ms ease, opacity 150ms ease"}},_.key))})]})]})})]}),he("div",{ref:cr,style:{display:"inline-flex",cursor:"pointer"},children:he("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:he("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:So,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:he("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"})})})})]})]})]}):Bt(ds,{children:[he("style",{children:`
|
|
48
|
+
`).map((W,de)=>ye("p",{style:{margin:0,marginTop:de>0?8:0},children:W},de))}),at==="provider"?Bt("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[Bt("label",{style:{display:"grid",gridTemplateColumns:"72px minmax(0, 1fr)",alignItems:"center",gap:8},children:[ye("span",{style:{color:"#6b7280",fontSize:11},children:"Model"}),ye(_l,{value:String(d),options:m.map((W,de)=>({value:String(de),label:W.label})),onChange:W=>x?.(Number(W)),disabled:!x||m.length===0})]}),Wt.length>0&&Bt("label",{style:{display:"grid",gridTemplateColumns:"72px minmax(0, 1fr)",alignItems:"center",gap:8},children:[ye("span",{style:{color:"#6b7280",fontSize:11},children:"Thinking"}),ye(_l,{value:E.reasoningEffort??"",onChange:W=>S?.({...E,reasoningEffort:W||void 0}),disabled:!S,options:[{value:"",label:"Inherit"},...Wt.map(W=>({value:W.effort,label:`${W.effort.charAt(0).toUpperCase()}${W.effort.slice(1)}${W.effort===$t?.defaultReasoningLevel?" (model default)":""}`}))]})]}),Yn.length>0&&Bt("label",{style:{display:"grid",gridTemplateColumns:"72px minmax(0, 1fr)",alignItems:"center",gap:8},children:[ye("span",{style:{color:"#6b7280",fontSize:11},children:"Speed"}),ye(_l,{value:E.serviceTier??"",onChange:W=>S?.({...E,serviceTier:W||void 0}),disabled:!S,options:[{value:"",label:"Inherit"},{value:"default",label:"Standard"},...Yn.map(W=>({value:W.id,label:W.label}))]})]})]}):_.usage.map((W,de)=>Bt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[ye("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),ye("span",{children:W})]},de)),at==="collapse"&&We&&Bt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8},children:[ye("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:6,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Position"}),ye("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:3,width:"fit-content"},children:Dc.map(W=>{let de=W===mt;return ye("button",{type:"button",onClick:()=>{Dt(null),un.current=!1,Ke(),We(W)},title:W,style:{width:24,height:16,border:"none",cursor:"pointer",padding:0,backgroundColor:de?"#1f2937":"rgba(0,0,0,0.08)",transition:"background-color 100ms ease"},onMouseEnter:be=>{de||(be.currentTarget.style.backgroundColor="rgba(0,0,0,0.15)")},onMouseLeave:be=>{de||(be.currentTarget.style.backgroundColor="rgba(0,0,0,0.08)")}},W)})})]}),at==="collapse"&&(()=>{let W=Object.entries(D??{}),de=W.filter(([,je])=>je.found&&!je.disabled).map(([je])=>je.charAt(0).toUpperCase()+je.slice(1)),be=W.filter(([,je])=>!je.found).map(([je])=>je);if(!C&&!g&&de.length===0&&be.length===0)return null;let me=be.map(je=>je.charAt(0).toUpperCase()+je.slice(1)),Ae=[...de,...me];return Bt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[(g||C)&&ye("button",{type:"button",onClick:()=>{po||(g?g():pc(C))},disabled:po,title:pi,"aria-label":ui??"Restart bridge",style:{display:"flex",alignItems:"center",justifyContent:"center",width:22,height:22,border:"none",borderRadius:0,backgroundColor:uo||O!=="idle"?"rgba(0,0,0,0.07)":"rgba(0,0,0,0.04)",color:Pn,cursor:po?"default":"pointer",padding:0,opacity:po?.55:1,flexShrink:0},children:O==="ok"?ye(Fu,{size:14,strokeWidth:1.8}):ye(C0,{size:13,strokeWidth:1.7,style:{animation:O==="restarting"?"spin 0.8s linear infinite":void 0}})}),de.length>0?Bt("span",{style:{color:"#6b7280"},children:["Available in ",Ae.join(", ")]}):be.length>0?Bt("span",{style:{color:"#6b7280"},children:["Available in ",me.join(", ")]}):null]})})(),_.keys.length>1&&ye("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:_.keys.slice(1).map((W,de)=>Bt("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:W.accent?"#fff":"#6b7280"},children:[ye("code",{style:{fontSize:10,backgroundColor:W.accent?e.activeColor:"rgba(0,0,0,0.06)",color:W.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:W.key}),ye("span",{style:{color:W.accent?e.activeColor:void 0,fontWeight:W.accent?600:void 0},children:W.desc})]},de))}),at==="counter"&&jt.length>0&&(()=>{let W=ye("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:ye("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Active"})}),de=new Map;for(let Ae of jt){let je=Ae.pathname||Kt;de.has(je)||de.set(je,[]),de.get(je).push(Ae)}let be=[...de.entries()],me=be.length>1;return Bt("div",{children:[W,ye("div",{style:{maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:be.map(([Ae,je])=>ye("div",{style:{marginBottom:me?4:0},children:je.map(ct=>{let Xe=ct.annotations.find(Xn=>Xn.type==="text"&&Xn.text)?.text||`[${ct.annotations[0]?.type??"annotation"}]`,gn=e.selectedAnnotationIds.includes(ct.id),sn=jt.indexOf(ct),Ct=sn+1,Bn=ct.annotations[0]?.color??e.activeColor;return Bt("div",{onClick:()=>{if(!(!ct.pathname||ct.pathname===Kt)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:ct.id,pathname:ct.pathname})),window.location.href=ct.pathname;return}if(so(sn),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:ct.id}}),P){let qn=ct.annotations.find(Vo=>Vo.threadId)?.threadId;qn&&P(qn)}un.current=!1,Dt(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:Xn=>{let qn=Xn.currentTarget.querySelector("[data-route-badge]");qn&&(qn.style.backgroundColor=Bn,qn.style.color="#fff")},onMouseLeave:Xn=>{if(gn)return;let qn=Xn.currentTarget.querySelector("[data-route-badge]");qn&&(qn.style.backgroundColor="rgba(0,0,0,0.06)",qn.style.color="#6b7280")},children:[Bt("code",{"data-route-badge":!0,style:{fontSize:10,color:gn?"#fff":"#6b7280",backgroundColor:gn?Bn:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[Ct,". ",me?Ae:""]}),ye("span",{style:{fontSize:11,color:gn?"#1f2937":"#6b7280",fontWeight:gn?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Xe})]},ct.id)})},Ae))})]})})(),at==="counter"&&(()=>{let W=new Set(jt.flatMap(me=>me.annotations.map(Ae=>Ae.threadId).filter(Boolean))),de=oo.filter(me=>!W.has(me.id));if(de.length===0)return null;let be=me=>{let Ae=Math.floor((Date.now()-me)/1e3);if(Ae<60)return"now";let je=Math.floor(Ae/60);if(je<60)return`${je}m`;let ct=Math.floor(je/60);return ct<24?`${ct}h`:`${Math.floor(ct/24)}d`};return Bt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:[ye("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Recent"}),de.map(me=>Bt("div",{onClick:()=>{let Ae=me.elementIdentifiers[0];if(Ae){let je=Ae.indexOf(":"),ct=je>0&&Ae[0]==="/",Xt=ct?Ae.slice(0,je):void 0,Xe=ct?Ae.slice(je+1):Ae;if(!(!Xt||Xt===Kt)){sessionStorage.setItem("popmelt-pending-thread",JSON.stringify({threadId:me.id,selector:Xe,preview:me.preview})),window.location.href=Xt;return}try{let sn=document.querySelector(Xe);if(sn){let Ct=sn.getBoundingClientRect(),Bn=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:Bn,point:{x:Ct.left+Ct.width,y:Ct.top},text:me.preview,linkedSelector:Xe,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[Bn],threadId:me.id}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[Bn],status:"resolved"}})}}catch{}}P&&P(me.id),un.current=!1,Dt(null)},style:{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:8,padding:"2px 0",cursor:"pointer",color:"#6b7280",fontSize:11},onMouseEnter:Ae=>{Ae.currentTarget.style.color="#1f2937"},onMouseLeave:Ae=>{Ae.currentTarget.style.color="#6b7280"},children:[ye("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:me.preview}),ye("span",{style:{flexShrink:0,fontSize:10,color:"#9ca3af"},children:be(me.createdAt)})]},me.id))]})})()]})})(),Bt("div",{ref:_=>{Ie&&(Ie.current=_)},id:"devtools-toolbar",style:ao,onMouseEnter:Q,onMouseMove:qt,children:[xr,Bt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[ye("span",{onMouseEnter:()=>Le("inspector"),onMouseLeave:tt,children:ye(br,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>j("inspector"),children:ye(w0,{size:20,strokeWidth:1.5})})}),ye("span",{onMouseEnter:()=>Le("hand"),onMouseLeave:tt,children:ye(br,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>j("hand"),children:Bt("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[ye(S0,{size:20,strokeWidth:1.5}),e.styleModifications.filter(_=>!_.captured).length>0&&ye("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(_=>!_.captured).length})]})})}),(()=>{let _=li[dn],W=_.icon,de=e.isAnnotating&&L0.has(e.activeTool);return ye("span",{onMouseEnter:()=>Le(_.type),onMouseLeave:tt,children:Bt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[ye(br,{active:de,siblingActive:e.isAnnotating,onClick:()=>j(_.type),children:ye(W,{size:20,strokeWidth:1.5})}),ye("button",{type:"button",onClick:()=>{let be=(dn+1)%li.length;Sn(be),j(li[be].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&&!de?.5:1,transition:"opacity 150ms ease"},children:li.map((be,me)=>ye("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:me===dn?Po.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},me))})]})})})(),B0.map(({type:_,icon:W,label:de,shortcut:be})=>ye("span",{onMouseEnter:()=>Le(_),onMouseLeave:tt,children:ye(br,{active:e.isAnnotating&&e.activeTool===_,siblingActive:e.isAnnotating,onClick:()=>j(_),children:ye(W,{size:20,strokeWidth:1.5})})},_)),ye("span",{onMouseEnter:()=>Le("eval"),onMouseLeave:tt,children:ye(br,{active:e.isAnnotating&&e.activeTool==="eval",siblingActive:e.isAnnotating,onClick:()=>j("eval"),children:ye(x0,{size:18,strokeWidth:1.5})})}),ye("span",{onMouseEnter:()=>Le("model"),onMouseLeave:tt,children:ye(br,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>j("model"),children:ye(v0,{size:17,strokeWidth:1.5})})})]}),ye(Ou,{}),Bt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(jt.length>0||e.styleModifications.length>0||e.textModifications.length>0||e.spacingTokenChanges.filter(_=>!_.captured).length>0)&&(()=>{let _=gt!==null&><jt.length?jt[gt]:null,W=e.annotations.length>0&&e.annotations.every(me=>me.status&&me.status!=="pending"),de=gt!==null?_?.annotations.some(me=>me.status&&me.status!=="pending")??!1:W,be=`oklch(0.628 0.258 ${le})`;return ye("span",{onMouseEnter:()=>Le("counter"),onMouseLeave:tt,children:ye("button",{ref:Fe,type:"button",onClick:()=>{if(K.current){K.current=!1;return}lr()},onMouseDown:_e,onMouseUp:ot,onMouseLeave:ot,title:"",style:{display:"flex",alignItems:"center",justifyContent:"center",gap:4,minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:de&>===null?"#999999":be,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let me=jt.length+e.styleModifications.length+e.textModifications.length+e.spacingTokenChanges.filter(je=>!je.captured).length;if(gt!==null)return Bt(us,{children:[gt+1,Bt("span",{style:{opacity:.4,display:"flex",gap:4},children:[ye("span",{children:"/"}),ye("span",{children:me})]})]});let Ae=di.length+e.styleModifications.length+e.textModifications.length+e.spacingTokenChanges.filter(je=>!je.captured).length;return me>Ae?Bt(us,{children:[Ae,Bt("span",{style:{opacity:.4,display:"flex",gap:4},children:[ye("span",{children:"/"}),ye("span",{children:me})]})]}):me})()})})})(),(e.annotations.length>0||e.styleModifications.length>0||e.textModifications.length>0)&&ye("span",{onMouseEnter:()=>Le("clear"),onMouseLeave:tt,children:ye(br,{siblingActive:e.isAnnotating,onClick:ge,title:"Clear all (\u2318\u232B)",children:ye(k0,{size:17,strokeWidth:1.5})})}),c&&Bt(us,{children:[ye("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),ye("span",{onMouseEnter:()=>Le("provider"),onMouseLeave:tt,style:{display:"contents"},children:Bt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[ye(br,{onClick:()=>c(Cn),children:ye(ds,{provider:l})}),Bt("button",{type:"button",onClick:()=>{let _=(d+1)%p;x?.(_)},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:Po.iconDefault,whiteSpace:"nowrap"},children:[ye("span",{children:f}),ye("span",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:2},children:Ut.map(_=>ye("div",{style:{width:_.overflow?2:3,height:_.overflow?2:3,borderRadius:"50%",backgroundColor:_.active?Po.iconDefault:"rgba(0,0,0,0.2)",opacity:_.overflow?.65:1,transition:"background-color 150ms ease, opacity 150ms ease"}},_.key))})]})]})})]}),ye("div",{ref:cr,style:{display:"inline-flex",cursor:"pointer"},children:ye("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:ye("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:So,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:ye("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"})})})})]})]})]}):Bt(us,{children:[ye("style",{children:`
|
|
49
49
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
50
|
-
`}),Bt("div",{ref:_=>{Br.current=_,Ie&&(Ie.current=_)},id:"devtools-toolbar",style:{...ao,overflow:"visible",opacity:r?1:.5},children:[xr,
|
|
51
|
-
`)[0].trim();return c.length<=40?c:c.slice(0,37)+"\u2026"}case"Glob":return"Searching files";case"Grep":return"Searching code";default:return i?`Using ${i}`:"Working\u2026"}}function
|
|
50
|
+
`}),Bt("div",{ref:_=>{Br.current=_,Ie&&(Ie.current=_)},id:"devtools-toolbar",style:{...ao,overflow:"visible",opacity:r?1:.5},children:[xr,ye("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,border:"none",background:"none",cursor:"pointer",padding:0},onClick:()=>{Et(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})},onMouseEnter:()=>s?.(!0),onMouseLeave:()=>s?.(!1),title:"Open annotation toolbar (\u2318\u2318)",children:ye("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:"none",stroke:So,strokeWidth:"1",strokeLinejoin:"round",xmlns:"http://www.w3.org/2000/svg",children:ye("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 ju,useEffect as zo,useMemo as _0,useRef as ps,useState as da}from"react";import{Fragment as Ju,jsx as ln,jsxs as fs}from"react/jsx-runtime";function Vu(e){return e.status==="done"||e.status==="error"}function ca(e){return e==="materialize_model"}var H0=20,F0=6,N0=H0-F0,z0=8,Gu={display:"flex",alignItems:"center",gap:3,padding:0,backgroundColor:"transparent",border:"none",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,whiteSpace:"nowrap",transition:"transform 200ms ease, opacity 200ms ease"};function $0(e){let n=e.find(c=>c.type==="job_started")?.data.kind;if(n==="materialize_model")return"Materializing model";if(n==="synthesize_evals")return"Synthesizing evals";if(n==="run_eval")return"Running eval";let o=e.filter(c=>c.type==="tool_use");if(o.length===0)return"Starting\u2026";let r=o[o.length-1],i=String(r.data.tool||""),s=r.data.file?String(r.data.file):null,a=s?s.split("/").pop()??s:null,l=r.data.content?String(r.data.content):null;switch(i){case"Read":return a?`Reading ${a}`:"Reading file";case"Edit":return a?`Editing ${a}`:"Editing file";case"Write":return a?`Writing ${a}`:"Writing file";case"Bash":{if(!l)return"Running command";let c=l.split(`
|
|
51
|
+
`)[0].trim();return c.length<=40?c:c.slice(0,37)+"\u2026"}case"Glob":return"Searching files";case"Grep":return"Searching code";default:return i?`Using ${i}`:"Working\u2026"}}function W0(e){let t=e.replace(/^Error:\s*/i,"");return t.length>40?t.slice(0,37)+"...":t}function j0(e,t){let o=e.find(a=>a.type==="job_started"&&a.data.jobId===t)?.data.kind;if(o==="materialize_model")return"Model";if(o==="synthesize_evals")return"Evals";if(o==="run_eval")return"Reviewed";if(e.some(a=>a.type==="question"&&a.data.jobId===t))return"Has a question";let i=new Set(["Edit","Write"]);return e.some(a=>a.type==="tool_use"&&a.data.jobId===t&&i.has(String(a.data.tool||"")))?"Applied changes":"Replied"}function V0({color:e}){let[t,n]=da(0);return zo(()=>{let o=setInterval(()=>{n(r=>(r+1)%2)},250);return()=>clearInterval(o)},[]),ln("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?fs(Ju,{children:[ln("circle",{cx:"7",cy:"7",r:"2"}),ln("circle",{cx:"17",cy:"7",r:"2"}),ln("circle",{cx:"7",cy:"17",r:"2"}),ln("circle",{cx:"17",cy:"17",r:"2"})]}):fs(Ju,{children:[ln("circle",{cx:"12",cy:"6",r:"2"}),ln("circle",{cx:"6",cy:"12",r:"2"}),ln("circle",{cx:"18",cy:"12",r:"2"}),ln("circle",{cx:"12",cy:"18",r:"2"})]})})}function G0({color:e}){return ln("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:e,opacity:.6}})}function J0({color:e}){return ln("span",{style:{color:e,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function Y0(){return ln("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function U0({onCancel:e}){let t=ps(null);return zo(()=>{let n=t.current;if(!n)return;let o=s=>{s.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]),ln("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 K0({onDismiss:e}){let t=ps(null);return zo(()=>{let n=t.current;if(!n)return;let o=s=>{s.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]),ln("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 Yu({bridge:e,inFlightJobs:t,isVisible:n,onHover:o,clearSignal:r,onViewThread:i,onClickJob:s,onCancel:a,onHoverJob:l,isConnected:c,dismissedThreadIds:u,snapPosition:d="bottom-right",currentPathname:p}){let[f,m]=da([]),[E,x]=da(!1),[S,P]=da(()=>typeof window<"u"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});zo(()=>{let V=()=>P({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",V),()=>window.removeEventListener("resize",V)},[]);let L=Pc(d,S.w,S.h);zo(()=>{r>0&&m([])},[r]),zo(()=>{!u||u.size===0||m(V=>{let A=V.filter(J=>!J.threadId||!u.has(J.threadId)||!Vu(J));return A.length===V.length?V:A})},[u]),zo(()=>{m(V=>{let A=new Set(V.map(Te=>Te.jobId)),J=!1,ke=V.map(Te=>{let Q=t[Te.jobId];return Q&&(!Te.threadId||Te.color==="#888"||!Te.kind||!Te.routePathnames&&Q.routePathnames||Te.global==null&&Q.global!=null)?(J=!0,{...Te,threadId:Te.threadId||Q.threadId,color:Te.color==="#888"?Q.color:Te.color,kind:Te.kind??Q.kind,routePathnames:Te.routePathnames??Q.routePathnames,global:Te.global??Q.global}):Te});for(let[Te,Q]of Object.entries(t))ca(Q.kind)||A.has(Te)||(ke.push({jobId:Te,color:Q.color,status:"queued",kind:Q.kind,threadId:Q.threadId,routePathnames:Q.routePathnames,global:Q.global}),J=!0);let De=new Set(Object.keys(t)),pe=new Set(e.activeJobIds),Ge=ke.filter(Te=>ca(Te.kind)?!1:Te.status!=="queued"?!0:De.has(Te.jobId)||pe.has(Te.jobId));Ge.length!==ke.length&&(J=!0);let Ze=new Set(Ge.map(Te=>Te.jobId));for(let Te of e.activeJobIds)if(!Ze.has(Te)){let Q=e.events.find(We=>We.type==="job_started"&&We.data.jobId===Te),Ie=Q?.data.kind;if(ca(Ie))continue;let mt=typeof Q?.data.color=="string"?Q.data.color:Ie==="synthesize"||Ie==="synthesize_evals"||Ie==="run_eval"||Ie==="materialize_model"?"#000000":"#888";Ge.push({jobId:Te,color:mt,status:"working",kind:Ie,threadId:Q?.data?.threadId,routePathnames:void 0,global:Q?.data.global===!0||Ie==="synthesize"||Ie==="synthesize_evals"||Ie==="run_eval"||Ie==="materialize_model"}),J=!0}return J?Ge:V})},[t,e.activeJobIds,e.events]),zo(()=>{if(e.activeJobIds.length===0)return;let V=new Set(e.activeJobIds);m(A=>A.map(J=>V.has(J.jobId)&&J.status!=="done"&&J.status!=="error"?{...J,status:"working"}:J))},[e.activeJobIds]);let D=ps(null);zo(()=>{let V=e.lastCompletedJobId;if(!V||V===D.current)return;D.current=V;let A=e.events.find(Ze=>Ze.type==="error"&&(Ze.data.jobId===V||e.status==="error")),J=!!A,ke=J?void 0:j0(e.events,V),De=A?String(A.data.message||""):void 0,pe=A?!!A.data.cancelled:void 0,Ge=A?.data.threadId;m(Ze=>{let Te=Ze.map(Ie=>Ie.jobId===V?{...Ie,status:J?"error":"done",doneLabel:ke,errorMessage:De,cancelled:pe,threadId:Ie.threadId||Ge}:Ie);if(!u||u.size===0)return Te;let Q=Te.filter(Ie=>!Ie.threadId||!u.has(Ie.threadId)||!Vu(Ie));return Q.length===Te.length?Te:Q})},[e.lastCompletedJobId,e.events,e.status,u]);let C=ju(V=>V.global||!p||!V.routePathnames||V.routePathnames.length===0?!0:V.routePathnames.includes(p),[p]),G=_0(()=>f.filter(V=>!ca(V.kind)&&C(V)),[f,C]),ee=n&&(G.length>0||c===!1),se=ps(null);zo(()=>{if(!ee)return;let V=se.current;if(!V)return;let A=()=>{x(!0),o(!0)},J=()=>{x(!1),o(!1),l?.(null)};return V.addEventListener("mouseenter",A),V.addEventListener("mouseleave",J),()=>{V.removeEventListener("mouseenter",A),V.removeEventListener("mouseleave",J)}},[ee,o,l]);let O=ps(new Map),B=ju((V,A)=>{A?O.current.set(V,A):O.current.delete(V)},[]);if(zo(()=>{if(!ee)return;let V=[];for(let A of G){let J=O.current.get(A.jobId);if(J){if(s){let ke=A.jobId,De=A.threadId,pe=()=>s(ke,De);J.addEventListener("click",pe),V.push(()=>J.removeEventListener("click",pe))}if(l){let ke=A.jobId,De=()=>l(ke),pe=()=>l(null);J.addEventListener("mouseenter",De),J.addEventListener("mouseleave",pe),V.push(()=>{J.removeEventListener("mouseenter",De),J.removeEventListener("mouseleave",pe)})}}}return()=>V.forEach(A=>A())},[ee,G,s,l]),!ee)return null;let g={working:3,queued:2,error:1,done:0},v=[],b=new Map;for(let V of G){if(!V.threadId){v.push(V);continue}let A=b.get(V.threadId);(!A||g[V.status]>g[A.status]||g[V.status]===g[A.status])&&b.set(V.threadId,V)}for(let V of b.values())v.push(V);let ie=v.filter(V=>V.status==="queued"),ve=new Map;ie.forEach((V,A)=>{ve.set(V.jobId,`(${A+1}/${ie.length})`)});let ce=!E&&v.length>1,ue=Wr(d),we=jr(d),Ue=ue?v:[...v].reverse();return fs("div",{ref:se,style:L,"data-devtools":!0,children:[Ue.map((V,A)=>{let J=A===v.length-1,ke=v.length-1-A,De=V.status==="working"?$0(e.events.filter(pe=>pe.data.jobId===V.jobId)):V.status==="queued"?`Queued ${ve.get(V.jobId)??""}`:V.status==="done"?V.doneLabel||"Done":V.cancelled?"Cancelled":V.errorMessage?W0(V.errorMessage):"Error";return ln("div",{style:{position:"relative",zIndex:v.length-A,marginBottom:ce?J?0:-N0:J?0:z0,transform:ce?`scale(${Math.max(.94,1-ke*.02)})`:"scale(1)",opacity:1,transformOrigin:`${ue?"top":"bottom"} ${we?"right":"left"}`,transition:"margin-bottom 250ms ease, transform 250ms ease, opacity 250ms ease"},children:ln("div",{ref:pe=>B(V.jobId,pe),style:{...Gu,position:"relative",overflow:"visible",cursor:s?"pointer":void 0},title:V.errorMessage||void 0,children:fs("div",{style:{display:"flex",alignItems:"center",gap:3,padding:"3px 5px 3px 8px",margin:0,backgroundColor:V.status==="error"?"#ef4444":V.color,color:"#ffffff"},children:[V.status==="working"&&ln(V0,{color:"#ffffff"}),V.status==="queued"&&ln(G0,{color:"#ffffff"}),V.status==="done"&&ln(J0,{color:"#ffffff"}),V.status==="error"&&ln(Y0,{}),ln("span",{style:{opacity:V.status==="queued"?.6:1,maxWidth:160,overflow:"hidden",textOverflow:"ellipsis"},children:De}),V.status==="working"&&a&&ln(U0,{onCancel:()=>a(V.jobId)}),(V.status==="done"||V.status==="error")&&ln(K0,{onDismiss:()=>m(pe=>pe.filter(Ge=>V.threadId?Ge.threadId!==V.threadId:Ge.jobId!==V.jobId))})]})})},V.jobId)}),c===!1&&f.length>0&&ln("div",{style:Gu,children:fs("div",{style:{display:"flex",alignItems:"center",gap:3,padding:"3px 5px 3px 8px",margin:0,backgroundColor:"#f59e0b",color:"#ffffff"},children:[ln("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ffffff",opacity:.6}}),ln("span",{children:"Reconnecting\u2026"})]})})]})}import{Fragment as Z0,jsx as q0,jsxs as Q0}from"react/jsx-runtime";var X0=`
|
|
52
52
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
53
53
|
:host {
|
|
54
54
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
@@ -77,9 +77,9 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
77
77
|
color: initial;
|
|
78
78
|
-webkit-font-smoothing: auto;
|
|
79
79
|
}
|
|
80
|
-
`;function
|
|
81
|
-
`),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(it("pre",{style:{fontFamily:
|
|
82
|
-
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(r)){n.push(it("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,c={1:16,2:14,3:13,4:12};n.push(it("div",{style:{fontWeight:700,fontSize:c[l]??12,margin:"8px 0 2px"},children:
|
|
80
|
+
`;function Uu({children:e}){return Q0(Z0,{children:[q0("style",{children:X0}),e]})}import{useEffect as ey,useLayoutEffect as ty,useRef as ny,useState as Ku}from"react";import{createPortal as oy}from"react-dom";import{Fragment as ay,jsx as sy,jsxs as ly}from"react/jsx-runtime";function ry(e){return e.tagName==="STYLE"||e.tagName==="LINK"&&e.rel==="stylesheet"}function iy(e){let t=new Map,n=e.firstChild;function o(s){if(t.has(s)||s.hasAttribute("data-pm-mirror"))return;let a=s.cloneNode(!0);a.setAttribute("data-pm-mirror",""),e.insertBefore(a,n),t.set(s,a)}function r(s){let a=t.get(s);a&&(a.remove(),t.delete(s))}for(let s of document.querySelectorAll('link[rel="stylesheet"], style'))s.getRootNode()===document&&o(s);try{document.adoptedStyleSheets.length>0&&(e.adoptedStyleSheets=[...document.adoptedStyleSheets,...e.adoptedStyleSheets])}catch{}let i=new MutationObserver(s=>{for(let a of s)if(a.type==="childList"){for(let l of a.addedNodes)l instanceof Element&&ry(l)&&o(l);for(let l of a.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 s of t.values())s.remove();t.clear()}}function Xu({children:e}){let t=ny(null),[n,o]=Ku(null),[r,i]=Ku(null);return ty(()=>{let s=t.current;if(!s||s.shadowRoot)return;let a=s.attachShadow({mode:"open"}),l=document.createElement("div");l.setAttribute("data-popmelt-root",""),a.appendChild(l),o(a),i(l)},[]),ey(()=>{if(n)return iy(n)},[n]),ly(ay,{children:[sy("div",{ref:t,"data-popmelt-shadow-host":!0,style:{position:"absolute",width:0,height:0,overflow:"visible",zIndex:1e4}}),r&&oy(e,r)]})}import{Fragment as my,memo as hy,useCallback as $o,useEffect as Bo,useMemo as Pr,useRef as To,useState as to}from"react";import{jsx as it,jsxs as ci}from"react/jsx-runtime";var Gl="ui-monospace, SFMono-Regular, Menlo, monospace",cy=0;function dy({size:e=11}){let t=++cy,n=`pm-vs-m${t}`,o=`pm-vs-f0-${t}`,r=`pm-vs-f1-${t}`,i=`pm-vs-g${t}`;return ci("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:[it("mask",{id:n,style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"100",height:"100",children:it("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"})}),ci("g",{mask:`url(#${n})`,children:[it("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"}),it("g",{filter:`url(#${o})`,children:it("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"})}),it("g",{filter:`url(#${r})`,children:it("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"})}),it("g",{style:{mixBlendMode:"overlay"},opacity:"0.25",children:it("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})`})})]}),ci("defs",{children:[ci("filter",{id:o,x:"-8.39411",y:"15.8291",width:"116.727",height:"92.2456",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[it("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),it("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"}),it("feOffset",{}),it("feGaussianBlur",{stdDeviation:"4.16667"}),it("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"}),it("feBlend",{mode:"overlay",in2:"BackgroundImageFix",result:"effect1_dropShadow"}),it("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"})]}),ci("filter",{id:r,x:"60.4167",y:"-8.07558",width:"47.9167",height:"116.151",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[it("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),it("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"}),it("feOffset",{}),it("feGaussianBlur",{stdDeviation:"4.16667"}),it("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"}),it("feBlend",{mode:"overlay",in2:"BackgroundImageFix",result:"effect1_dropShadow"}),it("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"})]}),ci("linearGradient",{id:i,x1:"49.9392",y1:"0.257812",x2:"49.9392",y2:"99.7423",gradientUnits:"userSpaceOnUse",children:[it("stop",{stopColor:"white"}),it("stop",{offset:"1",stopColor:"white",stopOpacity:"0"})]})]})]})}var uy=/^#[0-9a-fA-F]{3,8}$/,py=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,fy=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 gy(e){let t=e.trim();return uy.test(t)||py.test(t)||fy.has(t.toLowerCase())}function Vl(e,t){return it("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 gs(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);gy(i)&&t.push(Vl(i,`sw-${r.index}`)),t.push(it("code",{style:{fontFamily:Gl,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(it("strong",{children:it("em",{children:r[3]})},r.index));else if(r[5]!==void 0)t.push(it("strong",{children:r[5]},r.index));else if(r[7]!==void 0)t.push(it("em",{children:r[7]},r.index));else if(r[9]!==void 0)t.push(it("em",{children:r[9]},r.index));else if(r[11]!==void 0&&r[12]!==void 0){let i=r[12],s=!/^https?:\/\/|^mailto:/i.test(i),a=s?`vscode://file/${i}`:i;s?t.push(ci("a",{href:a,target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline",whiteSpace:"nowrap",backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",borderRadius:2,fontFamily:Gl,fontSize:"0.9em"},children:[r[11],it(dy,{})]},r.index)):t.push(it("a",{href:a,target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline"},children:r[11]},r.index))}else r[13]!==void 0?(t.push(Vl(r[13],`sw-${r.index}`)),t.push(r[13])):r[14]!==void 0&&(t.push(Vl(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 ir(e){let t=e.split(`
|
|
81
|
+
`),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(it("pre",{style:{fontFamily:Gl,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(`
|
|
82
|
+
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(r)){n.push(it("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,c={1:16,2:14,3:13,4:12};n.push(it("div",{style:{fontWeight:700,fontSize:c[l]??12,margin:"8px 0 2px"},children:gs(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 c=x=>/^\|[\s\-:|]+\|$/.test(x),u=l.filter(x=>!c(x)),d=x=>x.split("|").slice(1,-1).map(S=>S.trim()),p=x=>/^\*\*.+\*\*$/.test(x)||/^__.+__$/.test(x),f=u.map(d),m=f.length>1&&f.slice(1).every(x=>x[0]&&p(x[0])),E=f.length>0&&f[0].every(x=>p(x));n.push(it("div",{style:{overflowX:"auto",margin:"4px 0",paddingBottom:4},children:it("table",{style:{borderCollapse:"separate",borderSpacing:0,fontSize:"0.95em",width:"max-content",minWidth:"100%"},children:it("tbody",{children:u.map((x,S)=>it("tr",{children:d(x).map((P,L)=>it(S===0?"th":"td",{style:{border:"1px solid rgba(0,0,0,0.1)",padding:"3px 6px",textAlign:"left",fontWeight:S===0?600:400,minWidth:60,whiteSpace:"nowrap",...L===0&&m||S===0&&E?{position:"sticky",...L===0&&m?{left:0}:{},...S===0&&E?{top:0}:{},background:"#fff",zIndex:L===0&&m&&S===0&&E?2:1}:{}},children:gs(P)},L))},S))})})},n.length));continue}if(r.match(/^(\s*)([-*])\s+(.+)/)){let l=[];for(;o<t.length;){let c=t[o].match(/^\s*[-*]\s+(.+)/);if(c)l.push(c[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(it("ul",{style:{margin:0,paddingLeft:20,listStyleType:"disc",display:"flex",flexDirection:"column",gap:8},children:l.map((c,u)=>it("li",{children:gs(c)},u))},n.length));continue}let a=r.match(/^(\s*)(\d+)\.\s+(.+)/);if(a){let l=a[1].length,c=parseInt(a[2],10)||1,u=[],d=null;for(;o<t.length;){let p=t[o],f=p.match(/^(\s*)(\d+)\.\s+(.+)/);if(f&&f[1].length===l)d=[f[3]],u.push(d),o++;else if(d&&p.trim()==="")o++;else if(u.length>0&&t[o].match(/^\s+\S/)&&!t[o].match(/^\s*\d+\.\s/)&&!t[o].match(/^\s*[-*]\s+/))d.push(t[o].trim()),o++;else if(d&&/^(Eval|Checks|Sources|Rationale|Prompt|Assertions?|Reason|Why|Expected|Notes?):/i.test(p.trim()))d.push(p.trim()),o++;else if(d&&d.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()))d.push(p.trim()),o++;else break}n.push(it("ol",{start:c,style:{margin:0,paddingLeft:20,listStyleType:"decimal",display:"flex",flexDirection:"column",gap:8},children:u.map((p,f)=>it("li",{children:it("div",{style:{display:"flex",flexDirection:"column",gap:6},children:p.map((m,E)=>it("div",{children:gs(m)},E))})},f))},n.length));continue}if(r.trim()===""){o++;continue}n.push(it("div",{children:gs(r)},n.length)),o++}return it("div",{style:{display:"flex",flexDirection:"column",gap:8},children:n})}import{Fragment as ar,jsx as oe,jsxs as Ye}from"react/jsx-runtime";var tp=400,io=16,np=3,yy=3,op=4,by=8,vy="devtools-thread-panel-position",Hi=tp+2*np+2*op,xy=Hi+2*yy;function Jl(e="right"){return{top:io,left:e==="left"?io:window.innerWidth-Hi-io}}function qu(e,t,n){let o=n?.getBoundingClientRect(),r=2*np+2*op,i=window.innerHeight-io-r;return o&&t+xy>o.left&&(i=o.top-by-r),Math.max(200,i-Math.max(0,e))}var Sy={width:tp,backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",display:"flex",flexDirection:"column",overflow:"visible",padding:4,fontFamily:Wn,fontSize:12,color:"#1f2937",pointerEvents:"auto"},wy={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 5px 4px 10px",margin:0,fontWeight:600,fontSize:12,overflow:"hidden"},Ey={flex:1,overflowY:"auto",padding:0,scrollbarWidth:"none"},Cy=`
|
|
83
83
|
[data-devtools="thread-panel-messages"]:hover {
|
|
84
84
|
scrollbar-width: thin !important;
|
|
85
85
|
}
|
|
@@ -93,15 +93,15 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
93
93
|
background: rgba(0,0,0,0.15);
|
|
94
94
|
border-radius: 3px;
|
|
95
95
|
}
|
|
96
|
-
`,
|
|
96
|
+
`,Ty={borderTop:"1px solid rgba(0, 0, 0, 0.12)",display:"flex",alignItems:"center",gap:4,padding:"0 8px 0 10px"};function pa(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 My(e){return e.split(`
|
|
97
97
|
`).filter(t=>!/^\s*[☑☒□]\s*(pass|fail|needs[_ ]review)\b/i.test(t)).join(`
|
|
98
98
|
`).replace(/\n{3,}/g,`
|
|
99
99
|
|
|
100
|
-
`).trim()}function
|
|
101
|
-
`)[0].trim();return t.length<=60?t:t.slice(0,57)+"\u2026"}var
|
|
100
|
+
`).trim()}function ky(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 Iy(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",a=(Array.isArray(o.assertionResults)?o.assertionResults:[]).flatMap(l=>{if(!l||typeof l!="object")return[];let c=l,u=typeof c.assertion=="string"?c.assertion.trim():"";if(!u)return[];let d=c.status;return[{assertion:u,status:d==="pass"||d==="fail"||d==="needs_review"?d:"needs_review",summary:typeof c.summary=="string"?c.summary.trim():""}]});return{title:typeof o.title=="string"?o.title.trim():void 0,status:i,summary:typeof o.summary=="string"?o.summary.trim():"",assertionResults:a}}catch{return null}}function Ry(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 Ly({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 Ye("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.35,color:"#374151"},children:[Ye("div",{style:{display:"flex",alignItems:"baseline",gap:6,marginBottom:7},children:[oe("span",{style:{fontWeight:700,color:"#111827"},children:e.title??"Eval result"}),oe("span",{style:{color:o,fontWeight:700,marginLeft:"auto"},children:n})]}),e.summary&&oe("div",{style:{color:"#6b7280",marginBottom:8},children:e.summary}),oe("div",{style:{display:"flex",flexDirection:"column",gap:6},children:t.map((r,i)=>{let s=r.status==="pass"?"\u2611":r.status==="fail"?"\u2612":"\u25A1",a=r.status==="pass"?"Pass":r.status==="fail"?"Fail":"Needs review",l=r.status==="pass"?"#047857":r.status==="fail"?"#b91c1c":"#6b7280",c=r.status==="needs_review"?"inherit":l;return Ye("div",{style:{display:"grid",gridTemplateColumns:"18px minmax(0, 1fr)",columnGap:5,alignItems:"start"},children:[oe("span",{style:{color:l,fontSize:15,lineHeight:1},children:s}),Ye("div",{style:{minWidth:0},children:[oe("div",{style:{color:c},children:r.assertion}),r.status==="needs_review"?Ye("div",{style:{marginTop:1,color:"#6b7280"},children:[oe("span",{style:{color:l,fontWeight:700},children:a}),r.summary?Ye("span",{children:[": ",r.summary]}):null]}):r.summary?oe("div",{style:{marginTop:1,color:"#6b7280"},children:r.summary}):null]})]},`${r.assertion}-${i}`)})})]})}function Zu(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}var Yl=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Ay=3e3,Py=250;function By({color:e}){let[t,n]=to(0),[o,r]=to(()=>Math.floor(Math.random()*Yl.length));return Bo(()=>{let i=setInterval(()=>n(a=>(a+1)%2),Py),s=setInterval(()=>r(a=>(a+1)%Yl.length),Ay);return()=>{clearInterval(i),clearInterval(s)}},[]),Ye("span",{style:{display:"inline-flex",alignItems:"center",gap:4},children:[oe("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?Ye(ar,{children:[oe("circle",{cx:"7",cy:"7",r:"2"}),oe("circle",{cx:"17",cy:"7",r:"2"}),oe("circle",{cx:"7",cy:"17",r:"2"}),oe("circle",{cx:"17",cy:"17",r:"2"})]}):Ye(ar,{children:[oe("circle",{cx:"12",cy:"6",r:"2"}),oe("circle",{cx:"6",cy:"12",r:"2"}),oe("circle",{cx:"18",cy:"12",r:"2"}),oe("circle",{cx:"12",cy:"18",r:"2"})]})}),oe("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:Yl[o]})]})}var ga=32,ua={width:ga,height:ga,objectFit:"cover",cursor:"pointer",border:"1px solid rgba(0,0,0,0.1)"};function Dy(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],s=i[1],a=i.index+i[0].length,l=r+1<n.length?n[r+1].index:e.length,c=e.slice(a,l).trim();o.push({route:s,text:c})}return o}function Oy(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 _y(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 Hy({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]),oe("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:oe("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 Fy(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?Ny(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 Ny(e){let t=e.split(`
|
|
101
|
+
`)[0].trim();return t.length<=60?t:t.slice(0,57)+"\u2026"}var zy=new Set(["Read","Glob","Grep","WebFetch","WebSearch"]),$y=new Set(["Edit","Write","Bash"]);function Wy(e){let t=0,n=!1;for(let o of e){if(o.type!=="tool_use")continue;let r=String(o.data.tool||"");$y.has(r)?n=!0:zy.has(r)&&t++}return!n&&t>=3?"researching":n?"applying changes":null}function jy(e){let t=[];for(let n of e)if(n.type==="tool_use"){let o=Fy(n),r=String(n.data.tool||""),i=n.data.file?String(n.data.file):null,s=n.data.content?String(n.data.content):null,a=i??s??void 0;if(o){let l=t[t.length-1];l&&l.kind==="tool_group"&&l.tool===r?l.items.push({label:o,detail:a}):t.push({kind:"tool_group",tool:r,items:[{label:o,detail:a}]})}if(s&&i){let l=i.includes(".")?`.${i.split(".").pop().toLowerCase()}`:"",c=i.includes(".claude/plans/");t.push({kind:"file_content",file:i,content:s,ext:l,isPlan:c})}}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 Vy({file:e,content:t,ext:n,isPlan:o,onAccept:r}){let[i,s]=to(o),a=e.split("/").pop()??e;return Ye("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:[Ye("div",{onClick:()=>s(c=>!c),style:{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",cursor:"pointer",userSelect:"none",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",color:"#374151"},children:[oe("span",{style:{fontSize:9,color:"#9ca3af"},children:i?"\u25BC":"\u25B6"}),oe("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:a}),o&&oe("span",{style:{fontSize:9,color:"#6366f1",fontFamily:"inherit"},children:"plan"})]}),i&&Ye(ar,{children:[oe("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"?ir(t):oe("pre",{style:{margin:0,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,whiteSpace:"pre-wrap"},children:t})}),o&&r&&oe("div",{style:{padding:"4px 8px",borderTop:"1px solid rgba(0,0,0,0.06)",display:"flex",justifyContent:"flex-end"},children:oe("button",{onClick:c=>{c.stopPropagation(),r()},style:{background:"#111",color:"#fff",border:"none",padding:"4px 12px",fontSize:11,cursor:"pointer",fontFamily:"inherit"},children:"Accept"})})]})]})}function Gy(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 Jy(e,t){switch(e){case"Bash":{let n=t.map(o=>(o.label||"").split(/\s/)[0]).filter(Boolean);return`Used Bash: ${Gy(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 Yy={fontSize:11,color:"#9ca3af",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",lineHeight:1.6};function Uy({label:e}){let t=e.indexOf(" ");return t===-1?oe(ar,{children:e}):Ye(ar,{children:[oe("b",{children:e.slice(0,t)}),e.slice(t)]})}function rp({tool:e,items:t}){let[n,o]=to(!1),r=t.length>1;return Ye("div",{style:Yy,children:[Ye("div",{onClick:r?()=>o(i=>!i):void 0,style:{cursor:r?"pointer":"default",userSelect:"none",color:"#9ca3af"},children:[r&&oe("span",{style:{fontSize:13,marginRight:4},children:n?"\u25BE":"\u25B8"}),Jy(e,t)]}),n&&oe("div",{style:{marginLeft:17},children:t.map((i,s)=>oe("div",{children:oe(Uy,{label:i.detail??i.label})},s))})]})}var Qu=hy(function({msg:t,index:n,bridgeUrl:o,accentColor:r,onLightbox:i,hideSender:s=!1,hideTimestamp:a=!1,compactSpacing:l=!1}){let c=t.role==="human";if(t.cancelled||t.error)return Ye("div",{"data-msg":!0,style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:[Ye("div",{style:{display:"flex",alignItems:"center",gap:4},children:[oe("span",{style:{fontSize:11,color:t.error?"#dc2626":"#9ca3af",fontStyle:"italic"},children:t.error?"Error":"Cancelled"}),oe("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Zu(t.timestamp)})]}),t.error&&oe("div",{style:{fontSize:12,color:"#6b7280",lineHeight:1.4},children:t.error})]},`${t.jobId}-${n}`);let u=c?null:Ry(t.evalRun)??(t.responseText?Iy(t.responseText):null),d=c?t.replyToQuestion||t.feedbackSummary||"(annotation)":u?"":pa(t.responseText||""),p=c?void 0:t.question,f=!c&&t.resolutions&&t.resolutions.length>0,m=!c&&t.segments&&t.segments.length>0,E=!c&&!m&&t.toolsUsed&&t.toolsUsed.length>0,x=!s||!a;return!d&&!p&&!f&&!m&&!u?null:Ye("div",{"data-msg":!0,style:{padding:l?"8px 16px":16,display:"flex",flexDirection:"column",gap:8},children:[x&&Ye("div",{style:{display:"flex",alignItems:"center",gap:4},children:[!s&&!c&&oe(ds,{provider:t.provider,size:11,style:{color:"#6b7280"}}),!s&&oe("span",{style:{fontWeight:600,fontSize:11,color:c?r:"#6b7280"},children:c?"You":Ol(t.model,t.provider)}),!a&&oe("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Zu(t.timestamp)})]}),c&&!t.replyToQuestion&&(()=>{let S=d?Dy(d):null;if(S&&t.screenshotUrls)return oe("div",{style:{display:"flex",flexDirection:"column",gap:4},children:S.map((L,D)=>{let C=t.screenshotUrls?.[L.route],G=C?`${o}${C}`:null;return Ye("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[G?oe("img",{src:G,title:L.route,style:{...ua,flexShrink:0,marginTop:1},onClick:()=>i(G)}):oe("div",{style:{width:ga,height:ga,flexShrink:0}}),Ye("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:[oe("code",{style:{fontSize:10,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px"},children:L.route}),L.text&&oe("div",{style:{marginTop:2},children:ir(L.text)})]})]},D)})});let P=t.screenshotUrl?`${o}${t.screenshotUrl}`:null;return P&&d?Ye("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[oe("img",{src:P,title:"screenshot",style:{...ua,flexShrink:0,marginTop:1},onClick:()=>i(P)}),oe("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:d.includes(`
|
|
102
102
|
`)?ir(d):d})]}):d?oe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:d.includes(`
|
|
103
103
|
`)?ir(d):d}):null})(),c&&t.replyToQuestion&&d&&oe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:d.includes(`
|
|
104
|
-
`)?ir(d):d}),!c&&m&&t.segments.map((S,B)=>{if(S.kind==="tool_group")return oe(np,{tool:S.tool,items:S.items},B);let L=u?wy(da(S.text)):da(S.text);return L?oe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:ir(L)},B):null}),!c&&!m&&d&&oe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:ir(d)}),!c&&u&&oe(Ty,{result:u}),c&&t.replyToQuestion&&(()=>{let S=Ay(t,o);return S.length===0?null:oe("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:S.map((B,L)=>oe("img",{src:B.url,title:B.label,style:ca,onClick:()=>i(B.url)},L))})})(),c&&!t.replyToQuestion&&(()=>{let S=Py(t,o);return S.length===0?null:oe("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:S.map((B,L)=>oe("img",{src:B.url,title:B.label,style:ca,onClick:()=>i(B.url)},L))})})(),p&&oe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:ir(p)}),(E||f)&&Ye("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151"},children:[E&&oe("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:t.toolsUsed.map((S,B)=>oe("div",{children:S},B))}),f&&t.resolutions.map((S,B)=>{let L=S.finalScope??S.inferredScope;return Ye("div",{style:{marginTop:E?4:0},children:[oe("span",{style:{color:S.status==="resolved"?"#10b981":"#f59e0b"},children:S.status==="resolved"?"Done":"Needs review"}),S.summary?` \u2014 ${S.summary}`:""]},B)})]}),!c&&t.responseText&&(()=>{let S=Ey(t.responseText);return S.length===0?null:oe("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151",marginTop:2},children:S.map((B,L)=>Ye("div",{style:{marginTop:L>0?6:0},children:[oe("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:B.category}),oe("strong",{children:B.element})," \u2014 ",B.decision,oe("div",{style:{color:"#9ca3af",fontStyle:"italic",marginTop:1},children:B.reason})]},L))})})()]},`${t.jobId}-${n}`)});function Zu(e,t){return!t||e.role!=="human"||t.role!=="human"||!e.replyToQuestion||!t.replyToQuestion?!1:e.jobId===t.jobId||e.timestamp-t.timestamp<6e4}function Gy(e,t){return t.status==="applied"?e.jobId===`apply-${t.id}`:t.status==="dismissed"?e.jobId===`dismiss-${t.id}`:t.runId&&e.jobId===t.runId?!0:!t.runId&&e.role==="assistant"&&!!e.responseText?.includes("Model suggestion ready")}function Jy(e){return e.role==="assistant"&&!!(e.responseText?.includes("<eval_proposals>")||e.responseText?.includes("<evals>"))}function sr(e){return!!(e&&typeof e=="object"&&!Array.isArray(e))}function fa(e){if(e===void 0)return"undefined";try{return JSON.stringify(e)}catch{return String(e)}}function ga(e,t){return fa(e)===fa(t)}function Hi(e){if(typeof e=="string")return e;if(typeof e=="number"||typeof e=="boolean")return String(e);if(Array.isArray(e))return`${e.length} item${e.length===1?"":"s"}`;if(sr(e)){let t=Object.keys(e);return typeof e.value=="string"||typeof e.value=="number"?String(e.value):`{ ${t.slice(0,4).join(", ")}${t.length>4?", ...":""} }`}return String(e)}function op(e,t,n,o){if(!sr(e)){ga(e,t)||o.push({id:`token:${n.join(".")}`,group:"tokens",label:n.join("."),detail:Hi(e),path:n,value:e,currentValue:t});return}if("value"in e){ga(e,t)||o.push({id:`token:${n.join(".")}`,group:"tokens",label:n.join("."),detail:Hi(e),path:n,value:e,currentValue:t});return}for(let r of Object.keys(e))op(e[r],sr(t)?t[r]:void 0,[...n,r],o)}function Yy(e,t){let n=t.proposedModel;if(!n)return[];let o=[],r=Array.isArray(e?.rules)?e.rules:[],i=Array.isArray(n.rules)?n.rules:[];for(let l=0;l<i.length;l++){let c=i[l];if(!sr(c))continue;let u=typeof c.id=="string"?c.id:`rule-${l}`,d=r.find(p=>sr(p)&&(typeof p.id=="string"&&p.id===u||fa(p)===fa(c)));ga(d,c)||o.push({id:`rule:${u}`,group:"rules",label:typeof c.scope=="string"?c.scope:"rule",detail:typeof c.text=="string"?c.text:Hi(c),path:["rules"],value:c,currentValue:d,ruleValue:c})}let s=sr(n.components)?n.components:{},a=sr(e?.components)?e.components:{};for(let l of Object.keys(s)){let c=s[l],u=a[l];ga(c,u)||o.push({id:`component:${l}`,group:"components",label:l,detail:Hi(c),path:["components",l],value:c,currentValue:u})}return sr(n.tokens)&&op(n.tokens,e?.tokens,["tokens"],o),o}function Uy(e,t,n){let o=t.filter(s=>n.has(s.id)),r=o.filter(s=>s.group==="rules"&&s.ruleValue),i=o.filter(s=>s.group!=="rules").map(s=>({path:s.path,value:s.value}));if(r.length>0){let s=Array.isArray(e?.rules)?[...e.rules]:[];for(let a of r){let l=a.ruleValue,c=sr(l)&&typeof l.id=="string"?l.id:null,u=c?s.findIndex(d=>sr(d)&&d.id===c):-1;u>=0?s[u]=l:s.push(l)}i.push({path:["rules"],value:s})}return i}function Ky(e){return(e.selectedChanges??[]).flatMap((t,n)=>{if(!t.label&&!t.detail)return[];let o=t.group==="rules"||t.group==="components"||t.group==="tokens"||t.group==="model"?t.group:"model";return[{id:`selected:${e.id}:${n}`,group:o,label:t.label??o,detail:t.detail??Hi(t.value),path:t.path??[],value:t.value,currentValue:t.currentValue}]})}function Xy({proposal:e,bridgeUrl:t,accentColor:n,busy:o,onApplySelected:r,onDismiss:i,onProjectEvals:s}){let a=(e.generatedEvalIds?.length??0)>0,l=e.status==="pending",[c,u]=to(!1),[d,p]=to(null),[f,m]=to(()=>new Set),[E,x]=to(!1),S=Pr(()=>{let D=Ky(e);return!l&&D.length>0?D:Yy(d,e)},[d,l,e]),B=Pr(()=>Uy(d,S,f),[S,d,f]),L=Pr(()=>S.filter(D=>f.has(D.id)),[S,f]),A=Pr(()=>{let D={rules:[],components:[],tokens:[],model:[]};for(let g of S)D[g.group].push(g);return D},[S]);Bo(()=>{let D=!1;return ko(`${t}/model`).then(g=>g.ok?g.json():null).then(g=>{D||p(g?.model&&typeof g.model=="object"?g.model:null)}).catch(()=>{D||p(null)}),()=>{D=!0}},[t,e.id]),Bo(()=>{m(new Set),x(!1)},[e.id,S.map(D=>D.id).join("|")]);let C=$o(D=>{m(g=>{let v=new Set(g);return v.has(D)?v.delete(D):v.add(D),v})},[]),U=$o(()=>{m(new Set(S.map(D=>D.id)))},[S]),ee=$o(()=>{m(new Set)},[]),se=`${e.decisionIds.length} decision${e.decisionIds.length===1?"":"s"}`,O=`${S.length} proposed change${S.length===1?"":"s"}`;return oe("div",{style:{padding:"0 16px 12px"},children:Ye("div",{style:{border:"1px solid rgba(0,0,0,0.12)",background:"rgba(255,255,255,0.28)",padding:10,display:"flex",flexDirection:"column",gap:8},children:[Ye("button",{type:"button",onClick:()=>u(D=>!D),style:{border:0,background:"transparent",color:"#111827",cursor:"pointer",fontFamily:Wn,padding:0,textAlign:"left",display:"flex",alignItems:"baseline",gap:6},children:[oe("span",{style:{fontSize:12},children:c?"\u25BE":"\u25B8"}),oe("span",{style:{fontWeight:700,fontSize:12},children:"Model suggestion"}),oe("span",{style:{color:"#9ca3af",fontSize:10,textTransform:"uppercase"},children:e.status})]}),Ye("div",{style:{color:"#6b7280",fontSize:11,lineHeight:1.35},children:[se,S.length>0?`, ${O}`:"",a?`, ${e.generatedEvalIds.length} eval draft${e.generatedEvalIds.length===1?"":"s"}`:""]}),c&&oe(ar,{children:S.length>0?Ye(ar,{children:[l&&Ye("div",{style:{display:"flex",gap:8},children:[oe("button",{type:"button",disabled:o,onClick:U,style:{...Jl,padding:"4px 7px"},children:"Select all"}),oe("button",{type:"button",disabled:o,onClick:ee,style:{...Jl,padding:"4px 7px"},children:"Clear"})]}),["rules","components","tokens"].map(D=>{let g=A[D];return g.length===0?null:Ye("div",{style:{display:"flex",flexDirection:"column",gap:5},children:[Ye("div",{style:{color:"#9ca3af",fontSize:10,textTransform:"uppercase"},children:[D," ",g.length]}),g.map(v=>{let b=f.has(v.id);return Ye("label",{style:{display:"grid",gridTemplateColumns:l?"14px minmax(0, 1fr)":"minmax(0, 1fr)",columnGap:7,alignItems:"start",cursor:l?"pointer":"default",color:b?"#111827":"#6b7280",fontSize:11,lineHeight:1.35},children:[l&&oe("input",{type:"checkbox",checked:b,disabled:o,onChange:()=>C(v.id),style:{WebkitAppearance:"none",appearance:"none",margin:"1px 0 0",width:11,height:11,backgroundColor:b?n:"transparent",border:`1px solid ${b?n:"rgba(0,0,0,0.34)"}`,borderRadius:2,boxSizing:"border-box",cursor:o?"default":"pointer"}}),Ye("span",{style:{minWidth:0},children:[oe("span",{style:{fontWeight:700},children:v.label}),Ye("span",{children:[" \u2014 ",v.detail]}),v.currentValue!==void 0&&Ye("span",{style:{display:"block",color:"#9ca3af",marginTop:2},children:["was ",Hi(v.currentValue)]})]})]},v.id)})]},D)})]}):oe("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.4},children:"No concrete model diff could be derived from this proposal."})}),e.status==="pending"&&Ye("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8},children:[oe("button",{type:"button",disabled:o,onClick:i,style:Jl,children:"Dismiss"}),Ye("button",{type:"button",disabled:o||B.length===0,onClick:()=>r(e,B,L),style:{...ua,opacity:o||B.length===0?.45:1,cursor:o||B.length===0?"not-allowed":"pointer"},children:["Apply selected ",B.length||""]})]}),e.status==="applied"&&!a&&oe("button",{type:"button",disabled:o||E,onClick:()=>{x(!0),s()},style:{...ua,opacity:o||E?.45:1,cursor:o||E?"not-allowed":"pointer"},children:E?"Drafting evals":"Create draft evals"}),e.status==="applied"&&a&&Ye("button",{type:"button",disabled:!0,style:{...ua,opacity:.45,cursor:"not-allowed"},children:[e.generatedEvalIds.length," eval",e.generatedEvalIds.length===1?"":"s"," drafted"]})]})})}var ua={border:"1px solid #111827",background:"#111827",color:"#fff",cursor:"pointer",fontFamily:Wn,fontSize:11,fontWeight:700,padding:"6px 8px"},Jl={border:"1px solid rgba(0,0,0,0.12)",background:"rgba(0,0,0,0.02)",color:"#6b7280",cursor:"pointer",fontFamily:Wn,fontSize:11,fontWeight:700,padding:"6px 8px"};function rp({threadId:e,bridgeUrl:t,accentColor:n,isStreaming:o,isQueued:r,queuePosition:i,activeJobId:s,streamingEvents:a,onClose:l,onReply:c,onCancel:u,lastError:d,onMouseEnter:p,toolbarRef:f,currentModel:m,currentProvider:E,agentSettings:x,annotationNumber:S,annotationText:B,onOpenEvals:L,preferredSide:A="right",modal:C=!0}){let[U,ee]=to([]),[se,O]=to([]),[D,g]=to(!1),[v,b]=to(!0),[ie,ve]=to(""),[ce,ue]=to([]),we=Mo(!1),Ue=Mo(null),[V,P]=to(!0),[J,ke]=to(0),[De,pe]=to(null),Ge=$o(Z=>pe(Z),[]),Ze=Mo(null),Me=Mo(null),Q=Mo(0),Ie=$o((Z,xe)=>{let Re=Z&&xe.trim();Ze.current&&(Ze.current.style.opacity=Re?"0.65":"1"),Ue.current&&(Ue.current.style.borderTop=`1px solid ${Re?n:"rgba(0,0,0,0.12)"}`)},[n]),mt=Mo(null),We=Mo(null),Oe=Mo(o),He=Mo(Vl(A)),Pe=Mo({x:0,y:0}),Et=Mo(!1),dn=Mo({x:0,y:0,offsetX:0,offsetY:0}),Sn=Mo(A==="right"),[,Ln]=to(0),Nt=`${my}:${A}`;Bo(()=>{try{let Z=localStorage.getItem(Nt);if(Z){let xe=JSON.parse(Z);if(typeof xe.top=="number"&&typeof xe.left=="number"){let Re=window.innerWidth-_i-io,et={top:Math.max(io,Math.min(xe.top,window.innerHeight-io-200)),left:Math.max(io,Math.min(xe.left,Re))};Sn.current=et.left>=Re-2,He.current=et,Ln(Ke=>Ke+1)}}}catch{}},[Nt]),Bo(()=>{let Z=()=>{if(Sn.current)He.current=Vl(A);else{let xe=He.current,Re=window.innerWidth-_i-io;He.current={top:Math.max(io,Math.min(xe.top,window.innerHeight-io-200)),left:Math.max(io,Math.min(xe.left,Re))}}Ln(xe=>xe+1)};return window.addEventListener("resize",Z,{passive:!0}),()=>window.removeEventListener("resize",Z)},[A]),Bo(()=>{let Z=We.current;if(!Z)return;let xe=Le=>{Le.button!==0||Le.target.closest("button")||(Le.preventDefault(),Le.stopPropagation(),Et.current=!0,dn.current={x:Le.clientX,y:Le.clientY,offsetX:Pe.current.x,offsetY:Pe.current.y})},Re=Le=>{if(!Et.current)return;let tt=dn.current,Qt=tt.offsetX+(Le.clientX-tt.x),pn=tt.offsetY+(Le.clientY-tt.y),Cn=Math.max(io,Math.min(window.innerWidth-_i-io,He.current.left+Qt)),Xt=Math.max(io,He.current.top+pn);Pe.current={x:Cn-He.current.left,y:Xt-He.current.top};let Wt=mt.current;Wt&&(Wt.style.top=`${Xt}px`,Wt.style.left=`${Cn}px`,Wt.style.height=`${Ku(Xt,Cn,f?.current)}px`)},et=()=>{if(!Et.current)return;let Le=He.current.top+Pe.current.y,tt=He.current.left+Pe.current.x;He.current={top:Le,left:tt},Pe.current={x:0,y:0};let Qt=window.innerWidth-_i-io;Sn.current=tt>=Qt-2;try{localStorage.setItem(Nt,JSON.stringify({top:Le,left:tt}))}catch{}Et.current=!1},Ke=()=>{He.current=Vl(A),Pe.current={x:0,y:0},Sn.current=A==="right";try{localStorage.removeItem(Nt)}catch{}Ln(Le=>Le+1)};return Z.addEventListener("mousedown",xe),window.addEventListener("mousemove",Re),window.addEventListener("mouseup",et),Z.addEventListener("dblclick",Ke),()=>{Z.removeEventListener("mousedown",xe),window.removeEventListener("mousemove",Re),window.removeEventListener("mouseup",et),Z.removeEventListener("dblclick",Ke)}},[Nt,A]);let wn=$o(async()=>{try{let Z=await ko(`${t}/thread/${e}`);if(!Z.ok)throw new Error(`Thread fetch failed: ${Z.status}`);let xe=await Z.json(),Re=xe.messages??[];ee(Re);let et=Array.isArray(xe.modelProposals)?xe.modelProposals:xe.modelProposal?[xe.modelProposal]:[];return O(et),b(!1),Re.length}catch{return b(!1),null}},[t,e]),co=$o(async(Z,xe)=>{if(!D){g(!0);try{let Re=await ko(`${t}/model/proposals/${encodeURIComponent(Z.id)}/${xe}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:E,model:m,...x})});if(Re.ok){let et=await Re.json();et.proposal&&O(Ke=>Ke.map(Le=>Le.id===et.proposal.id?et.proposal:Le)),await wn()}}finally{g(!1)}}},[x,t,m,E,wn,D]),Jn=$o((async(Z,xe,Re)=>{if(!(D||xe.length===0)){g(!0);try{let et=await ko(`${t}/model/proposals/${encodeURIComponent(Z.id)}/apply-selected`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({changes:xe,changeSummaries:Re.map(Ke=>({group:Ke.group,label:Ke.label,detail:Ke.detail,path:Ke.path,value:Ke.value,currentValue:Ke.currentValue})),provider:E,model:m,...x})});if(et.ok){let Ke=await et.json();Ke.proposal&&O(Le=>Le.map(tt=>tt.id===Ke.proposal.id?Ke.proposal:tt)),await wn()}}finally{g(!1)}}}),[x,t,m,E,wn,D]);Bo(()=>{let Z=!1;Q.current=0,b(!0),Me.current&&(clearTimeout(Me.current),Me.current=null);let xe=async()=>{let Re=await wn();Z||Re!==0||Q.current>=5||(Q.current+=1,Me.current=setTimeout(xe,200*Q.current))};return xe(),()=>{Z=!0,Me.current&&(clearTimeout(Me.current),Me.current=null)}},[wn]),Bo(()=>{Oe.current&&!o&&wn(),Oe.current=o},[o]);let En=Pr(()=>a?Ny(a):[],[a]),At=Pr(()=>a?Fy(a):null,[a]),at=Pr(()=>U.filter(Z=>Z.role==="human"&&Z.replyToQuestion&&Z.queued&&Z.jobId!==s),[s,U]),Dt=Pr(()=>U.filter(Z=>!(Z.role==="human"&&Z.replyToQuestion&&Z.queued&&Z.jobId!==s)),[s,U]);Bo(()=>{let Z=Ze.current;if(!Z)return;let xe=()=>{P(Z.scrollHeight-Z.scrollTop-Z.clientHeight<40);let et=Z.scrollTop+Z.clientHeight,Ke=Z.querySelectorAll("[data-msg]"),Le=0;for(let tt=0;tt<Ke.length;tt++){let Qt=Ke[tt];Qt.offsetTop+Qt.offsetHeight>et+20&&Le++}ke(Le)};return Z.addEventListener("scroll",xe,{passive:!0}),()=>Z.removeEventListener("scroll",xe)},[]),Bo(()=>{V&&Ze.current&&(Ze.current.scrollTop=Ze.current.scrollHeight)},[U,En.length,o,V]),Bo(()=>{let Z=xe=>{xe.key==="Escape"&&(xe.stopPropagation(),l())};return document.addEventListener("keydown",Z),()=>document.removeEventListener("keydown",Z)},[l]);let un=$o(()=>{if(!ie.trim()||!c)return;let Z=ie.trim(),xe=ce.length>0?ce:void 0,Re=`_pending_reply_${Date.now()}`,et=!!o,Ke=xe?xe.map(Le=>URL.createObjectURL(Le)):void 0;ee(Le=>[...Le,{role:"human",timestamp:Date.now(),jobId:Re,replyToQuestion:Z,...et?{queued:!0}:{},...Ke?{replyImageUrls:Ke}:{}}]),Promise.resolve(c(e,Z,xe)).then(Le=>{Le?.jobId&&ee(tt=>tt.map(Qt=>Qt.jobId===Re?{...Qt,jobId:Le.jobId}:Qt))}).catch(()=>{}),ve(""),ue([])},[o,ie,ce,e,c]),ht=$o(Z=>{let xe=Z.clipboardData.items,Re=[];for(let et=0;et<xe.length;et++){let Ke=xe[et];if(Ke.type.startsWith("image/")){let Le=Ke.getAsFile();Le&&Re.push(Le)}}Re.length>0&&(Z.preventDefault(),ue(et=>[...et,...Re]))},[]),Kt=$o(Z=>{Z.key==="Enter"&&(Z.metaKey||Z.ctrlKey)&&(Z.preventDefault(),un())},[un]),bt=He.current.top+Pe.current.y,oo=He.current.left+Pe.current.x,xo=Ku(bt,oo,f?.current);return Ye(ar,{children:[C&&oe("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:Z=>{Z.target===Z.currentTarget&&l()},style:{position:"fixed",inset:0,zIndex:9999}}),Ye("div",{ref:mt,style:{...yy,height:xo,position:"fixed",top:bt,left:oo,zIndex:1e4},"data-devtools":"thread-panel",onMouseEnter:p,children:[(()=>{let xe=`<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>`,Re=`url("data:image/svg+xml,${encodeURIComponent(xe)}")`;return Ye(ar,{children:[oe("style",{children:`@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
105
|
-
[data-popmelt-reply]::placeholder { opacity: 0.35; }`}),oe("div",{style:{position:"absolute",inset:-3,padding:5,backgroundImage:Re,backgroundSize:"5px 5px",WebkitMask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",WebkitMaskComposite:"xor",mask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",maskComposite:"exclude",pointerEvents:"none",...o&&{animation:"popmelt-border-march 0.8s linear infinite"}}})]})})(),Ye("div",{style:{display:"flex",flexDirection:"column",overflow:"hidden",flex:1,minHeight:0},children:[Ye("div",{ref:We,style:{...
|
|
104
|
+
`)?ir(d):d}),!c&&m&&t.segments.map((S,P)=>{if(S.kind==="tool_group")return oe(rp,{tool:S.tool,items:S.items},P);let L=u?My(pa(S.text)):pa(S.text);return L?oe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:ir(L)},P):null}),!c&&!m&&d&&oe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:ir(d)}),!c&&u&&oe(Ly,{result:u}),c&&t.replyToQuestion&&(()=>{let S=Oy(t,o);return S.length===0?null:oe("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:S.map((P,L)=>oe("img",{src:P.url,title:P.label,style:ua,onClick:()=>i(P.url)},L))})})(),c&&!t.replyToQuestion&&(()=>{let S=_y(t,o);return S.length===0?null:oe("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:S.map((P,L)=>oe("img",{src:P.url,title:P.label,style:ua,onClick:()=>i(P.url)},L))})})(),p&&oe("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:ir(p)}),(E||f)&&Ye("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151"},children:[E&&oe("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:t.toolsUsed.map((S,P)=>oe("div",{children:S},P))}),f&&t.resolutions.map((S,P)=>{let L=S.finalScope??S.inferredScope;return Ye("div",{style:{marginTop:E?4:0},children:[oe("span",{style:{color:S.status==="resolved"?"#10b981":"#f59e0b"},children:S.status==="resolved"?"Done":"Needs review"}),S.summary?` \u2014 ${S.summary}`:""]},P)})]}),!c&&t.responseText&&(()=>{let S=ky(t.responseText);return S.length===0?null:oe("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151",marginTop:2},children:S.map((P,L)=>Ye("div",{style:{marginTop:L>0?6:0},children:[oe("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:P.category}),oe("strong",{children:P.element})," \u2014 ",P.decision,oe("div",{style:{color:"#9ca3af",fontStyle:"italic",marginTop:1},children:P.reason})]},L))})})()]},`${t.jobId}-${n}`)});function ep(e,t){return!t||e.role!=="human"||t.role!=="human"||!e.replyToQuestion||!t.replyToQuestion?!1:e.jobId===t.jobId||e.timestamp-t.timestamp<6e4}function Ky(e,t){return t.status==="applied"?e.jobId===`apply-${t.id}`:t.status==="dismissed"?e.jobId===`dismiss-${t.id}`:t.runId&&e.jobId===t.runId?!0:!t.runId&&e.role==="assistant"&&!!e.responseText?.includes("Model suggestion ready")}function Xy(e){return e.role==="assistant"&&!!(e.responseText?.includes("<eval_proposals>")||e.responseText?.includes("<evals>"))}function sr(e){return!!(e&&typeof e=="object"&&!Array.isArray(e))}function ma(e){if(e===void 0)return"undefined";try{return JSON.stringify(e)}catch{return String(e)}}function ha(e,t){return ma(e)===ma(t)}function Fi(e){if(typeof e=="string")return e;if(typeof e=="number"||typeof e=="boolean")return String(e);if(Array.isArray(e))return`${e.length} item${e.length===1?"":"s"}`;if(sr(e)){let t=Object.keys(e);return typeof e.value=="string"||typeof e.value=="number"?String(e.value):`{ ${t.slice(0,4).join(", ")}${t.length>4?", ...":""} }`}return String(e)}function ip(e,t,n,o){if(!sr(e)){ha(e,t)||o.push({id:`token:${n.join(".")}`,group:"tokens",label:n.join("."),detail:Fi(e),path:n,value:e,currentValue:t});return}if("value"in e){ha(e,t)||o.push({id:`token:${n.join(".")}`,group:"tokens",label:n.join("."),detail:Fi(e),path:n,value:e,currentValue:t});return}for(let r of Object.keys(e))ip(e[r],sr(t)?t[r]:void 0,[...n,r],o)}function qy(e,t){let n=t.proposedModel;if(!n)return[];let o=[],r=Array.isArray(e?.rules)?e.rules:[],i=Array.isArray(n.rules)?n.rules:[];for(let l=0;l<i.length;l++){let c=i[l];if(!sr(c))continue;let u=typeof c.id=="string"?c.id:`rule-${l}`,d=r.find(p=>sr(p)&&(typeof p.id=="string"&&p.id===u||ma(p)===ma(c)));ha(d,c)||o.push({id:`rule:${u}`,group:"rules",label:typeof c.scope=="string"?c.scope:"rule",detail:typeof c.text=="string"?c.text:Fi(c),path:["rules"],value:c,currentValue:d,ruleValue:c})}let s=sr(n.components)?n.components:{},a=sr(e?.components)?e.components:{};for(let l of Object.keys(s)){let c=s[l],u=a[l];ha(c,u)||o.push({id:`component:${l}`,group:"components",label:l,detail:Fi(c),path:["components",l],value:c,currentValue:u})}return sr(n.tokens)&&ip(n.tokens,e?.tokens,["tokens"],o),o}function Zy(e,t,n){let o=t.filter(s=>n.has(s.id)),r=o.filter(s=>s.group==="rules"&&s.ruleValue),i=o.filter(s=>s.group!=="rules").map(s=>({path:s.path,value:s.value}));if(r.length>0){let s=Array.isArray(e?.rules)?[...e.rules]:[];for(let a of r){let l=a.ruleValue,c=sr(l)&&typeof l.id=="string"?l.id:null,u=c?s.findIndex(d=>sr(d)&&d.id===c):-1;u>=0?s[u]=l:s.push(l)}i.push({path:["rules"],value:s})}return i}function Qy(e){return(e.selectedChanges??[]).flatMap((t,n)=>{if(!t.label&&!t.detail)return[];let o=t.group==="rules"||t.group==="components"||t.group==="tokens"||t.group==="model"?t.group:"model";return[{id:`selected:${e.id}:${n}`,group:o,label:t.label??o,detail:t.detail??Fi(t.value),path:t.path??[],value:t.value,currentValue:t.currentValue}]})}function eb({proposal:e,bridgeUrl:t,accentColor:n,busy:o,onApplySelected:r,onDismiss:i,onProjectEvals:s}){let a=(e.generatedEvalIds?.length??0)>0,l=e.status==="pending",[c,u]=to(!1),[d,p]=to(null),[f,m]=to(()=>new Set),[E,x]=to(!1),S=Pr(()=>{let B=Qy(e);return!l&&B.length>0?B:qy(d,e)},[d,l,e]),P=Pr(()=>Zy(d,S,f),[S,d,f]),L=Pr(()=>S.filter(B=>f.has(B.id)),[S,f]),D=Pr(()=>{let B={rules:[],components:[],tokens:[],model:[]};for(let g of S)B[g.group].push(g);return B},[S]);Bo(()=>{let B=!1;return ko(`${t}/model`).then(g=>g.ok?g.json():null).then(g=>{B||p(g?.model&&typeof g.model=="object"?g.model:null)}).catch(()=>{B||p(null)}),()=>{B=!0}},[t,e.id]),Bo(()=>{m(new Set),x(!1)},[e.id,S.map(B=>B.id).join("|")]);let C=$o(B=>{m(g=>{let v=new Set(g);return v.has(B)?v.delete(B):v.add(B),v})},[]),G=$o(()=>{m(new Set(S.map(B=>B.id)))},[S]),ee=$o(()=>{m(new Set)},[]),se=`${e.decisionIds.length} decision${e.decisionIds.length===1?"":"s"}`,O=`${S.length} proposed change${S.length===1?"":"s"}`;return oe("div",{style:{padding:"0 16px 12px"},children:Ye("div",{style:{border:"1px solid rgba(0,0,0,0.12)",background:"rgba(255,255,255,0.28)",padding:10,display:"flex",flexDirection:"column",gap:8},children:[Ye("button",{type:"button",onClick:()=>u(B=>!B),style:{border:0,background:"transparent",color:"#111827",cursor:"pointer",fontFamily:Wn,padding:0,textAlign:"left",display:"flex",alignItems:"baseline",gap:6},children:[oe("span",{style:{fontSize:12},children:c?"\u25BE":"\u25B8"}),oe("span",{style:{fontWeight:700,fontSize:12},children:"Model suggestion"}),oe("span",{style:{color:"#9ca3af",fontSize:10,textTransform:"uppercase"},children:e.status})]}),Ye("div",{style:{color:"#6b7280",fontSize:11,lineHeight:1.35},children:[se,S.length>0?`, ${O}`:"",a?`, ${e.generatedEvalIds.length} eval draft${e.generatedEvalIds.length===1?"":"s"}`:""]}),c&&oe(ar,{children:S.length>0?Ye(ar,{children:[l&&Ye("div",{style:{display:"flex",gap:8},children:[oe("button",{type:"button",disabled:o,onClick:G,style:{...Ul,padding:"4px 7px"},children:"Select all"}),oe("button",{type:"button",disabled:o,onClick:ee,style:{...Ul,padding:"4px 7px"},children:"Clear"})]}),["rules","components","tokens"].map(B=>{let g=D[B];return g.length===0?null:Ye("div",{style:{display:"flex",flexDirection:"column",gap:5},children:[Ye("div",{style:{color:"#9ca3af",fontSize:10,textTransform:"uppercase"},children:[B," ",g.length]}),g.map(v=>{let b=f.has(v.id);return Ye("label",{style:{display:"grid",gridTemplateColumns:l?"14px minmax(0, 1fr)":"minmax(0, 1fr)",columnGap:7,alignItems:"start",cursor:l?"pointer":"default",color:b?"#111827":"#6b7280",fontSize:11,lineHeight:1.35},children:[l&&oe("input",{type:"checkbox",checked:b,disabled:o,onChange:()=>C(v.id),style:{WebkitAppearance:"none",appearance:"none",margin:"1px 0 0",width:11,height:11,backgroundColor:b?n:"transparent",border:`1px solid ${b?n:"rgba(0,0,0,0.34)"}`,borderRadius:2,boxSizing:"border-box",cursor:o?"default":"pointer"}}),Ye("span",{style:{minWidth:0},children:[oe("span",{style:{fontWeight:700},children:v.label}),Ye("span",{children:[" \u2014 ",v.detail]}),v.currentValue!==void 0&&Ye("span",{style:{display:"block",color:"#9ca3af",marginTop:2},children:["was ",Fi(v.currentValue)]})]})]},v.id)})]},B)})]}):oe("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.4},children:"No concrete model diff could be derived from this proposal."})}),e.status==="pending"&&Ye("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8},children:[oe("button",{type:"button",disabled:o,onClick:i,style:Ul,children:"Dismiss"}),Ye("button",{type:"button",disabled:o||P.length===0,onClick:()=>r(e,P,L),style:{...fa,opacity:o||P.length===0?.45:1,cursor:o||P.length===0?"not-allowed":"pointer"},children:["Apply selected ",P.length||""]})]}),e.status==="applied"&&!a&&oe("button",{type:"button",disabled:o||E,onClick:()=>{x(!0),s()},style:{...fa,opacity:o||E?.45:1,cursor:o||E?"not-allowed":"pointer"},children:E?"Drafting evals":"Create draft evals"}),e.status==="applied"&&a&&Ye("button",{type:"button",disabled:!0,style:{...fa,opacity:.45,cursor:"not-allowed"},children:[e.generatedEvalIds.length," eval",e.generatedEvalIds.length===1?"":"s"," drafted"]})]})})}var fa={border:"1px solid #111827",background:"#111827",color:"#fff",cursor:"pointer",fontFamily:Wn,fontSize:11,fontWeight:700,padding:"6px 8px"},Ul={border:"1px solid rgba(0,0,0,0.12)",background:"rgba(0,0,0,0.02)",color:"#6b7280",cursor:"pointer",fontFamily:Wn,fontSize:11,fontWeight:700,padding:"6px 8px"};function sp({threadId:e,bridgeUrl:t,accentColor:n,isStreaming:o,isQueued:r,queuePosition:i,activeJobId:s,streamingEvents:a,onClose:l,onReply:c,onCancel:u,lastError:d,onMouseEnter:p,toolbarRef:f,currentModel:m,currentProvider:E,agentSettings:x,annotationNumber:S,annotationText:P,onOpenEvals:L,preferredSide:D="right",modal:C=!0}){let[G,ee]=to([]),[se,O]=to([]),[B,g]=to(!1),[v,b]=to(!0),[ie,ve]=to(""),[ce,ue]=to([]),we=To(!1),Ue=To(null),[V,A]=to(!0),[J,ke]=to(0),[De,pe]=to(null),Ge=$o(Z=>pe(Z),[]),Ze=To(null),Te=To(null),Q=To(0),Ie=$o((Z,xe)=>{let Re=Z&&xe.trim();Ze.current&&(Ze.current.style.opacity=Re?"0.65":"1"),Ue.current&&(Ue.current.style.borderTop=`1px solid ${Re?n:"rgba(0,0,0,0.12)"}`)},[n]),mt=To(null),We=To(null),Oe=To(o),He=To(Jl(D)),Pe=To({x:0,y:0}),Et=To(!1),dn=To({x:0,y:0,offsetX:0,offsetY:0}),Sn=To(D==="right"),[,Ln]=to(0),Nt=`${vy}:${D}`;Bo(()=>{try{let Z=localStorage.getItem(Nt);if(Z){let xe=JSON.parse(Z);if(typeof xe.top=="number"&&typeof xe.left=="number"){let Re=window.innerWidth-Hi-io,et={top:Math.max(io,Math.min(xe.top,window.innerHeight-io-200)),left:Math.max(io,Math.min(xe.left,Re))};Sn.current=et.left>=Re-2,He.current=et,Ln(Ke=>Ke+1)}}}catch{}},[Nt]),Bo(()=>{let Z=()=>{if(Sn.current)He.current=Jl(D);else{let xe=He.current,Re=window.innerWidth-Hi-io;He.current={top:Math.max(io,Math.min(xe.top,window.innerHeight-io-200)),left:Math.max(io,Math.min(xe.left,Re))}}Ln(xe=>xe+1)};return window.addEventListener("resize",Z,{passive:!0}),()=>window.removeEventListener("resize",Z)},[D]),Bo(()=>{let Z=We.current;if(!Z)return;let xe=Le=>{Le.button!==0||Le.target.closest("button")||(Le.preventDefault(),Le.stopPropagation(),Et.current=!0,dn.current={x:Le.clientX,y:Le.clientY,offsetX:Pe.current.x,offsetY:Pe.current.y})},Re=Le=>{if(!Et.current)return;let tt=dn.current,qt=tt.offsetX+(Le.clientX-tt.x),pn=tt.offsetY+(Le.clientY-tt.y),Cn=Math.max(io,Math.min(window.innerWidth-Hi-io,He.current.left+qt)),Ut=Math.max(io,He.current.top+pn);Pe.current={x:Cn-He.current.left,y:Ut-He.current.top};let $t=mt.current;$t&&($t.style.top=`${Ut}px`,$t.style.left=`${Cn}px`,$t.style.height=`${qu(Ut,Cn,f?.current)}px`)},et=()=>{if(!Et.current)return;let Le=He.current.top+Pe.current.y,tt=He.current.left+Pe.current.x;He.current={top:Le,left:tt},Pe.current={x:0,y:0};let qt=window.innerWidth-Hi-io;Sn.current=tt>=qt-2;try{localStorage.setItem(Nt,JSON.stringify({top:Le,left:tt}))}catch{}Et.current=!1},Ke=()=>{He.current=Jl(D),Pe.current={x:0,y:0},Sn.current=D==="right";try{localStorage.removeItem(Nt)}catch{}Ln(Le=>Le+1)};return Z.addEventListener("mousedown",xe),window.addEventListener("mousemove",Re),window.addEventListener("mouseup",et),Z.addEventListener("dblclick",Ke),()=>{Z.removeEventListener("mousedown",xe),window.removeEventListener("mousemove",Re),window.removeEventListener("mouseup",et),Z.removeEventListener("dblclick",Ke)}},[Nt,D]);let wn=$o(async()=>{try{let Z=await ko(`${t}/thread/${e}`);if(!Z.ok)throw new Error(`Thread fetch failed: ${Z.status}`);let xe=await Z.json(),Re=xe.messages??[];ee(Re);let et=Array.isArray(xe.modelProposals)?xe.modelProposals:xe.modelProposal?[xe.modelProposal]:[];return O(et),b(!1),Re.length}catch{return b(!1),null}},[t,e]),co=$o(async(Z,xe)=>{if(!B){g(!0);try{let Re=await ko(`${t}/model/proposals/${encodeURIComponent(Z.id)}/${xe}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:E,model:m,...x})});if(Re.ok){let et=await Re.json();et.proposal&&O(Ke=>Ke.map(Le=>Le.id===et.proposal.id?et.proposal:Le)),await wn()}}finally{g(!1)}}},[x,t,m,E,wn,B]),Jn=$o((async(Z,xe,Re)=>{if(!(B||xe.length===0)){g(!0);try{let et=await ko(`${t}/model/proposals/${encodeURIComponent(Z.id)}/apply-selected`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({changes:xe,changeSummaries:Re.map(Ke=>({group:Ke.group,label:Ke.label,detail:Ke.detail,path:Ke.path,value:Ke.value,currentValue:Ke.currentValue})),provider:E,model:m,...x})});if(et.ok){let Ke=await et.json();Ke.proposal&&O(Le=>Le.map(tt=>tt.id===Ke.proposal.id?Ke.proposal:tt)),await wn()}}finally{g(!1)}}}),[x,t,m,E,wn,B]);Bo(()=>{let Z=!1;Q.current=0,b(!0),Te.current&&(clearTimeout(Te.current),Te.current=null);let xe=async()=>{let Re=await wn();Z||Re!==0||Q.current>=5||(Q.current+=1,Te.current=setTimeout(xe,200*Q.current))};return xe(),()=>{Z=!0,Te.current&&(clearTimeout(Te.current),Te.current=null)}},[wn]),Bo(()=>{Oe.current&&!o&&wn(),Oe.current=o},[o]);let En=Pr(()=>a?jy(a):[],[a]),At=Pr(()=>a?Wy(a):null,[a]),at=Pr(()=>G.filter(Z=>Z.role==="human"&&Z.replyToQuestion&&Z.queued&&Z.jobId!==s),[s,G]),Dt=Pr(()=>G.filter(Z=>!(Z.role==="human"&&Z.replyToQuestion&&Z.queued&&Z.jobId!==s)),[s,G]);Bo(()=>{let Z=Ze.current;if(!Z)return;let xe=()=>{A(Z.scrollHeight-Z.scrollTop-Z.clientHeight<40);let et=Z.scrollTop+Z.clientHeight,Ke=Z.querySelectorAll("[data-msg]"),Le=0;for(let tt=0;tt<Ke.length;tt++){let qt=Ke[tt];qt.offsetTop+qt.offsetHeight>et+20&&Le++}ke(Le)};return Z.addEventListener("scroll",xe,{passive:!0}),()=>Z.removeEventListener("scroll",xe)},[]),Bo(()=>{V&&Ze.current&&(Ze.current.scrollTop=Ze.current.scrollHeight)},[G,En.length,o,V]),Bo(()=>{let Z=xe=>{xe.key==="Escape"&&(xe.stopPropagation(),l())};return document.addEventListener("keydown",Z),()=>document.removeEventListener("keydown",Z)},[l]);let un=$o(()=>{if(!ie.trim()||!c)return;let Z=ie.trim(),xe=ce.length>0?ce:void 0,Re=`_pending_reply_${Date.now()}`,et=!!o,Ke=xe?xe.map(Le=>URL.createObjectURL(Le)):void 0;ee(Le=>[...Le,{role:"human",timestamp:Date.now(),jobId:Re,replyToQuestion:Z,...et?{queued:!0}:{},...Ke?{replyImageUrls:Ke}:{}}]),Promise.resolve(c(e,Z,xe)).then(Le=>{Le?.jobId&&ee(tt=>tt.map(qt=>qt.jobId===Re?{...qt,jobId:Le.jobId}:qt))}).catch(()=>{}),ve(""),ue([])},[o,ie,ce,e,c]),ht=$o(Z=>{let xe=Z.clipboardData.items,Re=[];for(let et=0;et<xe.length;et++){let Ke=xe[et];if(Ke.type.startsWith("image/")){let Le=Ke.getAsFile();Le&&Re.push(Le)}}Re.length>0&&(Z.preventDefault(),ue(et=>[...et,...Re]))},[]),Yt=$o(Z=>{Z.key==="Enter"&&(Z.metaKey||Z.ctrlKey)&&(Z.preventDefault(),un())},[un]),bt=He.current.top+Pe.current.y,oo=He.current.left+Pe.current.x,xo=qu(bt,oo,f?.current);return Ye(ar,{children:[C&&oe("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:Z=>{Z.target===Z.currentTarget&&l()},style:{position:"fixed",inset:0,zIndex:9999}}),Ye("div",{ref:mt,style:{...Sy,height:xo,position:"fixed",top:bt,left:oo,zIndex:1e4},"data-devtools":"thread-panel",onMouseEnter:p,children:[(()=>{let xe=`<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>`,Re=`url("data:image/svg+xml,${encodeURIComponent(xe)}")`;return Ye(ar,{children:[oe("style",{children:`@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
105
|
+
[data-popmelt-reply]::placeholder { opacity: 0.35; }`}),oe("div",{style:{position:"absolute",inset:-3,padding:5,backgroundImage:Re,backgroundSize:"5px 5px",WebkitMask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",WebkitMaskComposite:"xor",mask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",maskComposite:"exclude",pointerEvents:"none",...o&&{animation:"popmelt-border-march 0.8s linear infinite"}}})]})})(),Ye("div",{style:{display:"flex",flexDirection:"column",overflow:"hidden",flex:1,minHeight:0},children:[Ye("div",{ref:We,style:{...wy,backgroundColor:n,color:"#ffffff",cursor:"grab",userSelect:"none",WebkitUserSelect:"none"},children:[Ye("span",{style:{display:"flex",alignItems:"center",gap:3,minWidth:0},children:[oe("span",{style:{flexShrink:0},children:S?`${S}.`:"Conversation"}),P&&oe("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:P})]}),oe("button",{onClick:l,style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1},children:"\xD7"})]}),oe("style",{dangerouslySetInnerHTML:{__html:Cy+`
|
|
106
106
|
[data-devtools="thread-panel"] ::selection { background: color-mix(in srgb, ${n} 15%, transparent); }
|
|
107
|
-
`}}),Ye("div",{ref:Ze,style:{...vy,transition:"opacity 150ms ease"},"data-devtools":"thread-panel-messages",children:[v&&oe("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!v&&Dt.length===0&&at.length===0&&!o&&oe("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),Dt.map((Z,xe)=>{let Re=Zu(Z,Dt[xe-1]),et=v?[]:se.filter(Le=>Gy(Z,Le)),Ke=!o&&L&&Jy(Z);return Ye(uy,{children:[oe(qu,{msg:Z,index:xe,bridgeUrl:t,accentColor:n,onLightbox:Ge,hideSender:Re,hideTimestamp:Re,compactSpacing:Re}),et.map(Le=>oe(Xy,{proposal:Le,bridgeUrl:t,accentColor:n,busy:D,onApplySelected:Jn,onDismiss:()=>co(Le,"dismiss"),onProjectEvals:()=>co(Le,"project-evals")},Le.id)),Ke&&oe("div",{style:{padding:"0 16px 12px"},children:oe("button",{type:"button",onClick:L,style:ua,children:"Review proposals"})})]},`${Z.jobId}-${xe}`)}),o&&oe("div",{style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:r?Ye("div",{style:{display:"flex",alignItems:"center",gap:6},children:[Ye("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:n,style:{verticalAlign:"middle",flexShrink:0,opacity:.5},children:[oe("circle",{cx:"12",cy:"6",r:"2"}),oe("circle",{cx:"6",cy:"12",r:"2"}),oe("circle",{cx:"18",cy:"12",r:"2"}),oe("circle",{cx:"12",cy:"18",r:"2"})]}),Ye("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:["queued",i?` ${i}`:""]})]}):Ye(ar,{children:[Ye("div",{style:{display:"flex",alignItems:"center",gap:4},children:[oe(cs,{provider:E,size:11,style:{color:"#6b7280"}}),oe("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:Bl(m,E)})]}),En.map((Z,xe)=>{if(Z.kind==="tool_group")return oe(np,{tool:Z.tool,items:Z.items},xe);if(Z.kind==="file_content")return oe(zy,{file:Z.file,content:Z.content,ext:Z.ext,isPlan:Z.isPlan,onAccept:Z.isPlan&&c?()=>c(e,"Looks good, please proceed with implementation."):void 0},xe);if(Z.kind==="thinking")return oe("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:Z.text},xe);let Re=da(Z.text);return Re?oe("div",{style:{paddingLeft:12,lineHeight:1.5,wordBreak:"break-word"},children:ir(Re)},xe):null}),Ye("div",{style:{display:"flex",alignItems:"center",gap:6},children:[oe(Ry,{color:n}),u&&oe("button",{onClick:u,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"})]})]})}),at.length>0&&Ye("div",{style:{display:"flex",flexDirection:"column",borderTop:"1px solid rgba(0,0,0,0.08)"},children:[oe("div",{style:{padding:"8px 16px 0",fontSize:10,color:"#9ca3af",fontStyle:"italic"},children:"queued"}),at.map((Z,xe)=>(()=>{let Re=Zu(Z,at[xe-1]);return oe(qu,{msg:Z,index:Dt.length+xe,bridgeUrl:t,accentColor:n,onLightbox:Ge,hideSender:Re,hideTimestamp:Re,compactSpacing:Re},`${Z.jobId}-staged-${xe}`)})())]}),!V&&U.length>0&&oe("div",{style:{position:"sticky",bottom:5,display:"flex",justifyContent:"flex-end",paddingRight:3,pointerEvents:"none"},children:oe("button",{onClick:()=>{Ze.current&&Ze.current.scrollTo({top:Ze.current.scrollHeight,behavior:"smooth"})},style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:4,fontSize:10,fontFamily:Wn,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:Ye("span",{style:{position:"relative",backgroundColor:"#eaeaea",padding:"0 6px",color:"#374151",fontFamily:Wn,lineHeight:1.4},children:[J," message",J!==1?"s":""," \u2193"]})})})]}),!o&&d&&Ye("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[oe("span",{style:{fontWeight:600},children:"Error: "}),d]}),c&&Ye("div",{style:{flexShrink:0,position:"relative"},children:[ce.length>0&&oe("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:ce.map((Z,xe)=>Ye("span",{onClick:()=>ue(Re=>Re.filter((et,Ke)=>Ke!==xe)),onMouseEnter:Re=>{let et=Re.currentTarget.querySelector("[data-chip-x]");et&&(et.style.color="#fff")},onMouseLeave:Re=>{let et=Re.currentTarget.querySelector("[data-chip-x]");et&&(et.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 ",xe+1,oe("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"rgba(255,255,255,0.4)"},children:"\xD7"})]},xe))}),Ye("div",{ref:Ue,style:{...Sy,borderTop:"1px solid rgba(0,0,0,0.12)"},children:[oe("input",{"data-popmelt-reply":!0,autoFocus:!0,value:ie,onChange:Z=>{ve(Z.target.value),Ie(we.current,Z.target.value)},onFocus:()=>{we.current=!0,Ie(!0,ie)},onBlur:()=>{we.current=!1,Ie(!1,ie)},onKeyDown:Kt,onPaste:ht,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:Wn,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),oe("button",{onClick:un,disabled:!ie.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:ie.trim()?"pointer":"default",color:ie.trim()?n:"rgba(0,0,0,0.2)",flexShrink:0},children:Ye("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[oe("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"}),oe("path",{d:"M6 12h16"})]})})]})]})]})]}),De&&oe(By,{src:De,onClose:()=>pe(null)})]})}import{jsx as Ni,jsxs as ap}from"react/jsx-runtime";var Qy=[],ql=qy(null),Yl="devtools-provider",ma="devtools-model",ip="devtools-agent-settings",Ul="devtools-open-thread-id",Kl="popmelt-synthesize-thread",Xl="popmelt-eval-synthesize-thread",Fi="#000000";function eb(e){let t=e.getBoundingClientRect();return t.bottom<0||t.top>window.innerHeight||t.right<0||t.left>window.innerWidth}function tb(e){for(let t of e){let n=hn(t);if(n){eb(n)&&n.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"});return}}}async function sp(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 nb={0:0,1:1},ob={0:0,1:1,2:1};function rb(e,t,n){if(t==="copilot")return 0;let o=t==="codex"?sa:ia;return e==="copilot"?0:e==="claude"&&t==="codex"?nb[n]??Math.min(n,o.length-1):e==="codex"&&t==="claude"?ob[n]??Math.min(n,o.length-1):Math.min(n,o.length-1)}function ib({children:e,enabled:t=process.env.NODE_ENV==="development",bridgeUrl:n=typeof window<"u"?window.__POPMELT_BRIDGE_URL__??"http://localhost:1111":"http://localhost:1111",projectId:o,navigate:r}){let i=typeof window<"u"?o??window.__POPMELT_PROJECT_ID__??null:null,[s,a]=Ht(i),[l,c]=Ht(!!i),u=s,[d,p]=Cc(),f=wc(n,t&&!!u,u);Ut(()=>{i&&(typeof window<"u"&&(window.__POPMELT_PROJECT_ID__=i),a(i),c(!0))},[i]);let m=Rn(null),E=Rn(null),x=xc()??n,S=Rn(new Map),B=Rn(new Map),L=Rn(!1),A=bi(),[C,U]=Ht(()=>typeof window>"u"?"claude":localStorage.getItem(Yl)||"claude"),[ee,se]=Ht(()=>{if(typeof window>"u")return 0;let M=localStorage.getItem(ma);return M&&parseInt(M,10)||0}),[O,D]=Ht(()=>{if(typeof window>"u")return{};try{return JSON.parse(localStorage.getItem(ip)||"{}")}catch{return{}}}),[g,v]=Ht([]),[b,ie]=Ht({}),[ve,ce]=Ht(0),[ue,we]=Ht({}),[Ue,V]=Ht(null),[P,J]=Ht("idle"),[ke,De]=Ht(null);Ut(()=>{f.isConnected&&nc(x).then(M=>{if(!M)return;let z=Object.entries(M.providers).filter(([,$e])=>$e.available).map(([$e])=>$e);z.length>0&&v(z);let re={};for(let[$e,Ne]of Object.entries(M.providers))Ne.models&&Ne.models.length>0&&(re[$e]=Ne.models);ie(re);let me={};for(let[$e,Ne]of Object.entries(M.providers))Ne.mcp&&(me[$e]=Ne.mcp);we(me)})},[f.isConnected,f.capabilitiesVersion,ve,x]),Ut(()=>{if(!f.isConnected){V(null);return}let M=!1;return Yo(x).then(z=>{M||V(z?.version??null)}),()=>{M=!0}},[f.isConnected,f.capabilitiesVersion,ve,x]),Ut(()=>{if(P==="idle"||P==="restarting")return;let M=window.setTimeout(()=>{J("idle"),De(null)},P==="ok"?4e3:8e3);return()=>window.clearTimeout(M)},[P]),Ut(()=>{if(g.length>0&&!g.includes(C)){let M=g[0];U(M),localStorage.setItem(Yl,M)}},[g,C]);let pe=C==="codex"?[...sa]:C==="copilot"?[...Pl]:[...ia],Ge=b[C]&&b[C].length>0?b[C]:pe,Ze=Ge[ee]??Ge[0],Me=`${C}:${Ze.id||"default"}`,Q=O[Me]??{};Ut(()=>{if(!t||u||l)return;let M=!1;return fetch("/popmelt/status").then(z=>z.ok?z.json():null).then(z=>{if(M)return;let re=typeof window<"u"&&z?.devOrigin===window.location.origin,me=z?.projectId&&(re||z.projectIdVerified===!0)?z.projectId:null;me&&typeof window<"u"&&(window.__POPMELT_PROJECT_ID__=me),a(me),c(!0)}).catch(()=>{M||c(!0)}),()=>{M=!0}},[t,u,l]),Ut(()=>{ee>=Ge.length&&(se(0),localStorage.setItem(ma,"0"))},[ee,Ge.length]);let Ie=on(M=>{let z=C;U(M),localStorage.setItem(Yl,M);let re=rb(z,M,ee);se(re),localStorage.setItem(ma,String(re))},[C,ee]),mt=on(M=>{se(M),localStorage.setItem(ma,String(M))},[]),We=on(M=>{D(z=>{let re={...z,[Me]:M};return localStorage.setItem(ip,JSON.stringify(re)),re})},[Me]),[Oe,He]=Ht(new Set),[Pe,Et]=Ht(null),[dn,Sn]=Ht(null),[Ln,Nt]=Ht(null),[wn,co]=Ht(null);Ut(()=>{f.isConnected&&gi(x).then(M=>{M?.components&&He(new Set(Object.keys(M.components)))})},[f.isConnected,x]);let Jn=on(async M=>{let z=[];for(let re of M)try{(await rc(re,x)).added&&z.push(re)}catch(me){console.error("[Popmelt] Failed to add component to model:",re,me)}z.length>0&&(He(re=>{let me=new Set(re);for(let $e of z)me.add($e);return me}),Et(z[z.length-1]))},[x]),En=on(M=>{Et(M)},[]),At=on(()=>{gi(x).then(M=>{M?.components&&He(new Set(Object.keys(M.components)))})},[x]),at=on(async M=>{try{(await ic(M,x)).removed&&He(re=>{let me=new Set(re);return me.delete(M),me})}catch(z){console.error("[Popmelt] Failed to remove component from model:",z)}},[x]),Dt=on((M,z)=>{p({type:"MODIFY_SPACING_TOKEN",payload:M}),p({type:"ADD_SPACING_TOKEN_CHANGE",payload:z})},[p]),un=on((M,z)=>{p({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:M,originalValue:z}})},[p]),[ht,Kt]=Ht(null),[bt,oo]=Ht(()=>typeof window>"u"?null:localStorage.getItem(Kl)||null),[xo,Z]=Ht(null),[xe,Re]=Ht(()=>typeof window>"u"?null:localStorage.getItem(Xl)||null),[et,Ke]=Ht(0),[Le,tt]=Ht({}),[Qt,pn]=Ht(new Set);Ut(()=>{bt?localStorage.setItem(Kl,bt):localStorage.removeItem(Kl)},[bt]),Ut(()=>{xe?localStorage.setItem(Xl,xe):localStorage.removeItem(Xl)},[xe]);let[Cn,Xt]=Ht(0),Wt=Rn([]);Ut(()=>{let M=Wt.current,z=d.spacingTokenMods;Wt.current=z;let re=new Map(M.map(Ne=>[Ne.tokenPath,Ne])),me=new Map(z.map(Ne=>[Ne.tokenPath,Ne])),$e=!1;for(let[Ne,Ve]of me){let Ee=re.get(Ne);if(!(Ee&&Ee.currentValue===Ve.currentValue)){$e=!0,Ve.currentValue==="__deleted__"?sc(Ne,x).catch(Qe=>console.error("[Popmelt] Failed to sync token delete:",Qe)):va(Ne,Ve.currentValue,x).catch(Qe=>console.error("[Popmelt] Failed to sync token update:",Qe));for(let Qe of Ve.targets){let Dn=document.querySelector(Qe.selector);if(Dn)if(Ve.currentValue==="__deleted__")Dn.style.removeProperty(Qe.property);else{let Rt=Ve.currentPx;Rt>0&&Dn.style.setProperty(Qe.property,`${Rt}px`,"important")}}}}for(let[Ne,Ve]of re)if(!me.has(Ne)){$e=!0,va(Ne,Ve.originalValue,x).catch(Ee=>console.error("[Popmelt] Failed to restore token on undo:",Ee));for(let Ee of Ve.targets){let Qe=document.querySelector(Ee.selector);Qe&&Qe.style.removeProperty(Ee.property)}}$e&&Xt(Ne=>Ne+1)},[d.spacingTokenMods,x]);let[jt,Yn]=Ht(()=>Tc()),Un=on(M=>{Yn(M),kc(M)},[]),[Mt,Ft]=Ht(()=>typeof window>"u"?null:localStorage.getItem(Ul)||null),I=Rn(null),[j,ne]=Ht(new Set),[ae,fe]=Ht(null);Ut(()=>{Mt?localStorage.setItem(Ul,Mt):localStorage.removeItem(Ul)},[Mt]);let ge="popmelt-in-flight-jobs",[le,Ce]=Ht(()=>{try{let M=localStorage.getItem(ge);return M?JSON.parse(M):{}}catch{return{}}});Ut(()=>{try{Object.keys(le).length>0?localStorage.setItem(ge,JSON.stringify(le)):localStorage.removeItem(ge)}catch{}},[le]),Ut(()=>{let M=z=>{if(z.key===ge)try{let re=z.newValue?JSON.parse(z.newValue):{};Ce(re)}catch{}};return window.addEventListener("storage",M),()=>window.removeEventListener("storage",M)},[]);let pt=Rn(new Map),Fe=Rn(new Map),lt=Rn(new Map);Ut(()=>{for(let[M,z]of Object.entries(le)){z.annotationIds.length>0&&pt.current.set(M,z.annotationIds);let re=new Set(z.styleSelectors);for(let me of z.annotationIds){let $e=d.annotations.find(Ne=>Ne.id===me);if($e&&($e.linkedSelector&&re.add($e.linkedSelector),$e.groupId))for(let Ne of d.annotations)Ne.groupId===$e.groupId&&Ne.linkedSelector&&re.add(Ne.linkedSelector)}re.size>0&&Fe.current.set(M,Array.from(re)),z.threadId&<.current.set(M,z.threadId)}},[le,d.annotations]);let ft=Rn("");Ut(()=>{if(d.annotations.length===0)return;let M=Object.keys(le).sort().join(",");if(M===ft.current)return;ft.current=M;let z=new Set;for(let me of Object.values(le))for(let $e of me.annotationIds)z.add($e);let re=d.annotations.filter(me=>z.has(me.id)?!1:!!(me.status==="in_flight"||(me.status==="pending"||!me.status)&&(me.captured||me.threadId))).map(me=>me.id);re.length>0&&p({type:"SET_ANNOTATION_STATUS",payload:{ids:re,status:"dismissed"}})},[d.annotations,le,p]);let An=Wo(()=>{let M=new Set;for(let z of Object.values(le))for(let re of z.annotationIds)M.add(re);return M},[le]),Mn=Wo(()=>{let M=new Set(f.activeJobIds),z=new Set;for(let[re,me]of Object.entries(le))if(M.has(re))for(let $e of me.annotationIds)z.add($e);return z},[le,f.activeJobIds]),Do=Wo(()=>{let M=new Set(f.activeJobIds),z=Object.entries(le).filter(([$e])=>!M.has($e)),re=z.length,me=new Map;return z.forEach(([,$e],Ne)=>{let Ve=`(${Ne+1}/${re})`;for(let Ee of $e.annotationIds)me.set(Ee,Ve)}),me},[le,f.activeJobIds]),fn=Wo(()=>{let M=new Set;for(let z of Object.values(le))if(!(!z.global&&z.routePathnames?.length&&!z.routePathnames.includes(A)))for(let re of z.styleSelectors)M.add(re);return M},[le,A]),K=Wo(()=>{let M=new Map;for(let z of Object.values(le))if(!(!z.global&&z.routePathnames?.length&&!z.routePathnames.includes(A))){for(let re of z.styleSelectors)M.set(re,z.color);for(let re of z.annotationIds){let me=d.annotations.find($e=>$e.id===re);if(me&&(me.linkedSelector&&M.set(me.linkedSelector,z.color),me.groupId))for(let $e of d.annotations)$e.groupId===me.groupId&&$e.linkedSelector&&M.set($e.linkedSelector,z.color)}}return M},[le,d.annotations,A]),_e=Rn(d.annotations);_e.current=d.annotations;let ot=Rn(d.styleModifications);ot.current=d.styleModifications;let qt=Rn(le);qt.current=le,Ut(()=>{let M=null,z=()=>{if(Object.keys(qt.current).length>0)return;let me=_e.current,$e=ot.current,Ne=[],Ve=[];for(let Ee of me){if(!Ee.linkedSelector||!Ee.linkedSelector.startsWith("[data-pm=")||Ee.pathname||Ee.captured||Ee.status&&Ee.status!=="pending")continue;let Qe=document.querySelector(Ee.linkedSelector);!Qe&&Ee.elements?.[0]?.selector&&(Qe=document.querySelector(Ee.elements[0].selector)),Qe||Ne.push(Ee.linkedSelector)}for(let Ee of $e)Ee.pathname&&Ee.pathname!==window.location.pathname||document.querySelector(Ee.selector)||Ve.push(Ee.selector);(Ne.length>0||Ve.length>0)&&p({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:Ne,styleSelectors:Ve}})},re=new MutationObserver(me=>{me.some($e=>$e.removedNodes.length>0)&&(M&&clearTimeout(M),M=setTimeout(z,3e3))});return re.observe(document.body,{childList:!0,subtree:!0}),()=>{re.disconnect(),M&&clearTimeout(M)}},[p]);let To=Rn(typeof window<"u"?window.location.pathname:"/");Ut(()=>{let M=me=>{if(L.current)return;let $e=window.location.pathname;if(me===$e)return;let Ne=_e.current.filter(Ee=>Ee.pathname===me&&(Ee.status??"pending")==="pending");if(console.log(`[Popmelt] Navigation from ${me} \u2192 ${$e}, ${Ne.length} pending annotations on departing page`),Ne.length===0)return;let Ve=m.current;if(!Ve){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if(Ci(document.body,Ve,Ne,{dpr:1}).then(Ee=>Ji(Ee)).then(Ee=>{Ee?(B.current.set(me,Ee),console.log(`[Popmelt] Cached screenshot for ${me} (${(Ee.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${me}`)}).catch(Ee=>{console.warn("[Popmelt] Capture-on-leave failed:",Ee)}),B.current.size>20){let Ee=[...B.current.entries()];B.current=new Map(Ee.slice(-10))}},z=me=>{let $e=me.detail?.prevPath;$e&&(M($e),To.current=window.location.pathname)},re=()=>{let me=To.current;M(me),To.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",z),window.addEventListener("popstate",re),()=>{window.removeEventListener("popmelt:locationchange",z),window.removeEventListener("popstate",re)}},[]),Ut(()=>{if(f.lastCompletedJobId&&f.lastCompletedJobId in le&&Ce(M=>{let{[f.lastCompletedJobId]:z,...re}=M;return re}),f.lastCompletedJobId&&f.lastCompletedJobId===ht&&(Xt(M=>M+1),Kt(null)),f.lastCompletedJobId&&f.lastCompletedJobId===xo&&(Ke(M=>M+1),Z(null)),f.lastCompletedJobId){let M=Object.entries(Le).find(([,z])=>z===f.lastCompletedJobId)?.[0];M&&(tt(z=>{let{[M]:re,...me}=z;return me}),Ke(z=>z+1))}},[f.lastCompletedJobId,ht,xo,Le]);let rn=Rn(new Set),Vt=Rn(!1);Ut(()=>{if(!f.isConnected){Vt.current=!1;return}Vt.current||(Vt.current=!0,Yo(x).then(async M=>{if(!M)return;let z=M.activeJobs??[],re=M.recentJobs??[],me=new Set(z.map(Ve=>Ve.id)),$e=JSON.parse(localStorage.getItem(ge)||"{}"),Ne=new Set;for(let Ve of Object.values($e))if(Ve.annotationIds)for(let Ee of Ve.annotationIds)Ne.add(Ee);Ce(Ve=>{let Ee={...Ve},Qe=Date.now();for(let Rt of Object.keys(Ee)){if(Rt.startsWith("_pending_")){let en=parseInt(Rt.replace(/^_pending_(?:reply_)?/,""),10);!isNaN(en)&&Qe-en>3e4&&delete Ee[Rt];continue}me.has(Rt)||delete Ee[Rt]}for(let Rt of z)if(!Ee[Rt.id]&&(Rt.annotationIds?.length||Rt.threadId)){let en=Rt.kind,ur=Array.from(new Set((Rt.annotationIds??[]).map(Go=>d.annotations.find(Oo=>Oo.id===Go)?.pathname||A).filter(Boolean)));Ee[Rt.id]={annotationIds:Rt.annotationIds??[],styleSelectors:[],color:en==="synthesize_evals"||en==="run_eval"||en==="materialize_model"&&Rt.standalone===!0?Fi:Rt.color??"#888",threadId:Rt.threadId,kind:en,routePathnames:ur.length>0?ur:void 0,global:en==="synthesize"||en==="synthesize_evals"||en==="run_eval"||en==="materialize_model"&&Rt.standalone===!0}}let Dn=new Set;for(let Rt of re)if(Rt.annotationIds)for(let en of Rt.annotationIds)Dn.add(en);for(let Rt of Object.keys(Ee)){if(!Rt.startsWith("_pending_"))continue;let en=Ee[Rt];en&&en.annotationIds.some(ur=>Dn.has(ur))&&delete Ee[Rt]}return Ee});for(let Ve of re)if(Ve.status==="done"&&Ve.annotationIds?.length&&Ve.annotationIds.some(Ee=>Ne.has(Ee))&&!rn.current.has(Ve.id))try{let Ee=await ys(x,Ve.id);if(!Ee)continue;let Qe=Ee.events.find(Dn=>Dn.type==="done");Qe&&Array.isArray(Qe.resolutions)&&(rn.current.add(Ve.id),p({type:"APPLY_RESOLUTIONS",payload:{resolutions:Qe.resolutions,threadId:Qe.threadId??void 0}}))}catch{}}))},[f.isConnected,x,p,d.annotations,A]),Ut(()=>{let M=f.events.filter(z=>z.type==="done"&&z.data.resolutions);for(let z of M){let re=z.data.jobId;rn.current.has(re)||(rn.current.add(re),Array.isArray(z.data.resolutions)&&p({type:"APPLY_RESOLUTIONS",payload:{resolutions:z.data.resolutions,threadId:z.data.threadId}}))}},[f.events,p]);let ci=Rn(new Set);Ut(()=>{let M=f.events.filter(z=>z.type==="error"&&z.data.cancelled);for(let z of M){let re=z.data.jobId;if(!re||ci.current.has(re))continue;ci.current.add(re);let me=le[re];me&&me.annotationIds.length>0&&p({type:"SET_ANNOTATION_STATUS",payload:{ids:me.annotationIds,status:"dismissed"}})}},[f.events,le,p]);let gt=Rn(0);Ut(()=>{let M=f.incrementalResolutions;if(M.length<=gt.current)return;let z=M.slice(gt.current);gt.current=M.length,p({type:"APPLY_RESOLUTIONS",payload:{resolutions:z}})},[f.incrementalResolutions,p]),Ut(()=>{f.incrementalResolutions.length===0&&(gt.current=0)},[f.incrementalResolutions.length]);let so=on(async()=>{let M=m.current;if(!M)return!1;let z=await Ci(document.body,M,d.annotations);if(z.length===0)return!1;let re=await Xc(z,d.annotations,d.styleModifications,d.textModifications,d.domModifications);return re&&p({type:"MARK_CAPTURED"}),re},[d.annotations,d.styleModifications,d.textModifications,d.domModifications,p]),Kn=on((M,z)=>{let re=S.current.get(M)||[];S.current.set(M,[...re,...z])},[]),lr=on(async()=>{let M=m.current;if(!M)return!1;let z=d.annotations.filter(Je=>(Je.status??"pending")==="pending"),re=d.styleModifications.filter(Je=>!Je.captured&&(!Je.pathname||Je.pathname===A)),me=d.textModifications.filter(Je=>!Je.captured&&(!Je.pathname||Je.pathname===A)),$e=d.domModifications.filter(Je=>!Je.captured&&(!Je.pathname||Je.pathname===A)),Ne=d.spacingTokenChanges.filter(Je=>!Je.captured);if(z.length===0&&re.length===0&&me.length===0&&$e.length===0&&Ne.length===0)return!1;let Ve=new Map;for(let Je of z){let On=Je.pathname||A;Ve.has(On)||Ve.set(On,[]),Ve.get(On).push(Je)}let Ee=new Map,Qe=[...Ve.keys()].filter(Je=>Je!==A);if(Qe.length>0){let Je=A,On={x:window.scrollX,y:window.scrollY};L.current=!0;for(let zn of Qe)try{console.log(`[Popmelt] Navigating to ${zn} for screenshot capture`),await sp(zn,r),window.location.pathname!==zn&&console.warn(`[Popmelt] Navigation to ${zn} did not take effect (at ${window.location.pathname})`);let go=Ve.get(zn)||[],hs=await Ci(document.body,M,go,{dpr:1}),_r=await Ji(hs);_r&&(Ee.set(zn,_r),console.log(`[Popmelt] Captured ${zn} (${(_r.size/1024).toFixed(0)}KB)`))}catch(go){console.warn(`[Popmelt] Failed to capture ${zn}:`,go)}await sp(Je,r),window.scrollTo(On.x,On.y),L.current=!1}let Dn=z.filter(Je=>(Je.pathname||A)===A),Rt=await Ci(document.body,M,Dn.length>0?d.annotations:[],{dpr:1});if(Rt.length>0){let Je=await Ji(Rt);Je&&Ee.set(A,Je)}if(Ee.size===0)return!1;let en=Oa(z,re,void 0,Ne.length>0?Ne:void 0,me,$e),ur=JSON.stringify(en),Go=new Map;for(let Je of z){let On=S.current.get(Je.id);if(On&&On.length>0&&Go.set(Je.id,On),Je.groupId){for(let zn of z)if(zn.groupId===Je.groupId&&zn.id!==Je.id){let go=S.current.get(zn.id);go&&go.length>0&&Go.set(zn.id,go)}}}let Oo=Ve.size>1;console.log(`[Popmelt] Submit: ${Ve.size} page(s), ${Ee.size} screenshot(s), pages: [${[...Ve.keys()].join(", ")}], cached: [${[...B.current.keys()].join(", ")}]`);let Dr=Oo?Ee:Ee.get(A)??Ee,$i=z.map(Je=>Je.id),fi=[...re.map(Je=>Je.selector),...$e.map(Je=>Je.selector)],ha=Array.from(new Set([...z.map(Je=>Je.pathname||A),...re.map(Je=>Je.pathname||A),...me.map(Je=>Je.pathname||A),...$e.map(Je=>Je.pathname||A)])),ms=Da(d.activeColor),Jo=`_pending_${Date.now()}`,Or={annotationIds:$i,styleSelectors:fi,color:d.activeColor,threadId:void 0,routePathnames:ha};try{let Je=JSON.parse(localStorage.getItem(ge)||"{}");Je[Jo]=Or,localStorage.setItem(ge,JSON.stringify(Je))}catch{}Ce(Je=>({...Je,[Jo]:Or}));try{let{jobId:Je,threadId:On}=await oc(Dr,ur,x,ms,C,Ze.id,Go.size>0?Go:void 0,ws(),Q);for(let _o of Go.keys())S.current.delete(_o);for(let _o of Ve.keys())B.current.delete(_o);let zn={...Or,threadId:On};try{let _o=JSON.parse(localStorage.getItem(ge)||"{}");delete _o[Jo],_o[Je]=zn,localStorage.setItem(ge,JSON.stringify(_o))}catch{}Ce(_o=>{let{[Jo]:Zl,...y}=_o;return{...y,[Je]:zn}}),p({type:"MARK_CAPTURED"}),On&&$i.length>0&&p({type:"SET_ANNOTATION_THREAD",payload:{ids:$i,threadId:On}});let go=d.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),_r=((go?.[1]?parseFloat(go[1]):29)+60)%360;return p({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${_r})`}),!0}catch(Je){try{let On=JSON.parse(localStorage.getItem(ge)||"{}");delete On[Jo],localStorage.setItem(ge,JSON.stringify(On))}catch{}return Ce(On=>{let{[Jo]:zn,...go}=On;return go}),console.error("[Pare] Failed to send to bridge:",Je),!1}},[d.annotations,d.styleModifications,d.textModifications,d.domModifications,d.spacingTokenChanges,d.activeColor,p,x,C,Ze.id,Q,A,r]),jo=on(async()=>{if(bt){Ft(bt);return}try{let{jobId:M,threadId:z}=await uc(x,C,Ze.id,Q);Kt(M),oo(z);let re={annotationIds:[],styleSelectors:[],color:"#6b7280",threadId:z,kind:"synthesize",global:!0};Ce(me=>({...me,[M]:re})),Ft(z)}catch(M){console.error("[Popmelt] Failed to start synthesize:",M)}},[x,C,Ze.id,Q,bt]),ao=on(async()=>{Z(null),Re(null),Ft(null);try{let{jobId:M,threadId:z}=await pc(x,C,Ze.id,Q);Z(M),Re(z);let re={annotationIds:[],styleSelectors:[],color:Fi,threadId:z,kind:"synthesize_evals",global:!0};Ce(me=>({...me,[M]:re})),Ft(z)}catch(M){console.error("[Popmelt] Failed to start eval synthesis:",M)}},[x,C,Ze.id,Q]),xr=on(async M=>{let z=m.current;if(z){tt(re=>({...re,[M.id]:"_pending_"}));try{let me=(await Ci(document.body,z,[],{dpr:1}))[0];if(!me){tt(Ve=>{let{[M.id]:Ee,...Qe}=Ve;return Qe});return}let{jobId:$e,threadId:Ne}=await cc(M.id,me,{url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollX:window.scrollX,scrollY:window.scrollY},x,C,Ze.id,ws(),Q);if(tt(Ve=>({...Ve,[M.id]:$e})),Ne){pn(Ee=>new Set(Ee).add(Ne));let Ve={annotationIds:[],styleSelectors:[],color:Fi,threadId:Ne,kind:"run_eval",global:!0};Ce(Ee=>({...Ee,[$e]:Ve})),Ft(Ne)}}catch(re){tt(me=>{let{[M.id]:$e,...Ne}=me;return Ne}),console.error("[Popmelt] Failed to run eval:",re)}}},[x,C,Ze.id,Q]),So=on(async(M,z,re)=>{let me=Object.values(qt.current).find(Qe=>Qe.threadId===M)?.color??d.annotations.find(Qe=>Qe.threadId===M)?.color??d.activeColor,$e=d.annotations.filter(Qe=>Qe.threadId===M&&(Qe.status==="waiting_input"||Qe.status==="resolved"||Qe.status==="needs_review")),Ne=$e.map(Qe=>Qe.id),Ve=`_pending_reply_${Date.now()}`,Ee={annotationIds:Ne,styleSelectors:[],color:me,threadId:M};try{let Qe=JSON.parse(localStorage.getItem(ge)||"{}");Qe[Ve]=Ee,localStorage.setItem(ge,JSON.stringify(Qe))}catch{}Ce(Qe=>({...Qe,[Ve]:Ee}));try{let Qe=Da(d.activeColor),{jobId:Dn}=await fc(M,z,x,Qe,C,Ze.id,re,ws(),Q),Rt={...Ee};try{let en=JSON.parse(localStorage.getItem(ge)||"{}");delete en[Ve],en[Dn]=Rt,localStorage.setItem(ge,JSON.stringify(en))}catch{}return Ce(en=>{let{[Ve]:ur,...Go}=en;return{...Go,[Dn]:Rt}}),$e.length>0&&p({type:"SET_ANNOTATION_STATUS",payload:{ids:Ne,status:"in_flight"}}),f.dismissQuestion(M),{jobId:Dn}}catch(Qe){try{let Dn=JSON.parse(localStorage.getItem(ge)||"{}");delete Dn[Ve],localStorage.setItem(ge,JSON.stringify(Dn))}catch{}Ce(Dn=>{let{[Ve]:Rt,...en}=Dn;return en}),console.error("[Pare] Failed to send reply:",Qe)}},[d.activeColor,d.annotations,x,f.dismissQuestion,p,C,Ze.id,Q]),uo=Rn(new Set);Ut(()=>{for(let M of f.pendingQuestions){if(uo.current.has(M.jobId))continue;uo.current.add(M.jobId);let z=M.annotationIds&&M.annotationIds.length>0?M.annotationIds:void 0;!z&&M.threadId&&(z=d.annotations.filter(re=>re.threadId===M.threadId).map(re=>re.id)),z&&z.length>0&&p({type:"SET_ANNOTATION_QUESTION",payload:{ids:z,question:M.question,threadId:M.threadId}})}},[f.pendingQuestions,p,d.annotations]);let po=Wo(()=>{if(f.activeJobId&&f.activeJobId in le)return le[f.activeJobId].color;let M=Object.values(le);return M.length>0?M[M.length-1].color:void 0},[f.activeJobId,le]),Pn=on(M=>{Ft(M)},[]),di=on(M=>{pn(z=>new Set(z).add(M)),I.current=Fi,Ft(M)},[]),ui=on(M=>{Ft(null),M&&(ne(z=>new Set(z).add(M)),gc(M,x).catch(z=>{console.warn("[Popmelt] Failed to delete thread:",z)}))},[x]),cr=on((M,z)=>{let re=le[M],me=Fe.current.get(M);if(re){let Ne=new Set(re.styleSelectors);for(let Ve of re.annotationIds){let Ee=d.annotations.find(Qe=>Qe.id===Ve);if(Ee&&(Ee.linkedSelector&&Ne.add(Ee.linkedSelector),Ee.groupId))for(let Qe of d.annotations)Qe.groupId===Ee.groupId&&Qe.linkedSelector&&Ne.add(Qe.linkedSelector)}Ne.size>0&&(me=Array.from(Ne))}me?.length&&tb(me);let $e=re?.threadId||z||lt.current.get(M);if($e){let Ne=re?.kind==="materialize_model"&&(re.annotationIds?.length??0)===0;I.current=re?.kind==="synthesize_evals"||re?.kind==="run_eval"||Ne?Fi:re?.color??null,Ft($e)}},[le,d.annotations]),Br=on(M=>{if(!M){fe(null);return}let z=pt.current.get(M);z&&z.length>0?fe(new Set(z)):fe(null)},[]),_=on(async M=>{try{let z=M?`${x}/cancel?jobId=${M}`:`${x}/cancel`;await ko(z,{method:"POST"})}catch{}},[x]),W=on(async()=>{J("restarting"),De("Restarting bridge");let M=await xa(x,Hs,2e4);if(M.ok){await Sc(M.bridgeUrl??n,u),V(M.status.version??Hs),J("ok"),De(M.status.version?`Bridge restarted on ${M.status.version}`:"Bridge restarted"),ce(z=>z+1);return}V(M.status?.version??Ue),J("error"),De(M.error)},[Ue,n,u,x]),de=Wo(()=>{if(!Mt)return null;for(let M of Object.values(le))if(M.threadId===Mt&&M.kind){if(M.kind==="materialize_model"&&M.annotationIds.length>0)continue;return M.kind}return Mt===bt?"synthesize":Mt===xe?"synthesize_evals":Qt.has(Mt)?"run_eval":null},[Mt,le,bt,xe,Qt]),be=de==="synthesize_evals"||de==="run_eval",ye=de==="materialize_model",Ae=de==="synthesize";Ut(()=>{(d.activeTool==="model"&&Mt&&!Ae||d.activeTool==="eval"&&Mt&&!be)&&Ft(null)},[d.activeTool,Mt,Ae,be]);let je=on(()=>{p({type:"SET_TOOL",payload:"eval"}),Ke(M=>M+1),Ft(null)},[p]),ct=Rn(null);Ut(()=>{d.isAnnotating?ct.current&&(Ft(ct.current),ct.current=null):Mt&&(ct.current=Mt,Ft(null))},[d.isAnnotating]);let Zt=Wo(()=>{if(!Mt)return null;for(let[M,z]of Object.entries(le))if(z.threadId===Mt)return M;for(let[M,z]of Object.entries(f.activeJobThreads))if(z===Mt)return M;return null},[Mt,le,f.activeJobThreads]),Xe=Mt?d.annotations.find(M=>M.threadId===Mt):void 0,gn=Wo(()=>Zt?f.events.filter(M=>M.data.jobId===Zt):Qy,[Zt,f.events.length]),sn=Wo(()=>be||ye?Fi:Xe?.color??I.current??d.activeColor,[be,ye,Xe?.color,d.activeColor]),Ct=Xe?d.annotations.indexOf(Xe)+1:void 0;Ut(()=>{if(be)return;let M=Xe?.color??I.current;Mt&&M&&p({type:"SET_COLOR",payload:M})},[Mt,be]);let[Bn,Xn]=Ht(!1),[qn,Vo]=Ht(0),fo=Rn(null),Qn=on(M=>{M?(fo.current&&(clearTimeout(fo.current),fo.current=null),Xn(!0)):fo.current=setTimeout(()=>{Xn(!1),fo.current=null},150)},[]),dr=on(()=>{Vo(M=>M+1),f.clearEvents(),Ft(null),ne(new Set),_()},[f.clearEvents,_]);Ut(()=>()=>{fo.current&&clearTimeout(fo.current)},[]);let[pi,gs]=Ht(!1);Ut(()=>{gs(!0)},[]);let zi=Wo(()=>({isEnabled:t}),[t]);return!t||!pi?Ni(ql.Provider,{value:zi,children:e}):ap(ql.Provider,{value:zi,children:[e,Ni(au,{state:d,dispatch:p,onScreenshot:so,inFlightAnnotationIds:An,activeAnnotationIds:Mn,queuePositionMap:Do,inFlightStyleSelectors:fn,inFlightSelectorColors:K,onAttachImages:Kn,onReply:f.isConnected?So:void 0,onViewThread:f.isConnected?Pn:void 0,onCloseThread:ui,onModelComponentsAdd:f.isConnected?Jn:void 0,onModelComponentFocus:f.isConnected?En:void 0,onModelComponentHover:Sn,modelComponentNames:Oe,modelPanelHoveredComponent:Ln,modelSpacingTokenHover:wn,highlightedAnnotationIds:ae,focusedThreadAnnotationId:Xe?.id,externalCanvasRef:m,toolbarRef:E}),Ni(Uu,{children:ap(Ju,{children:[Ni(zu,{state:d,dispatch:p,onScreenshot:so,onSendToClaude:f.isConnected?lr:void 0,hasActiveJobs:Object.keys(le).length>0||f.activeJobIds.length>0,activeJobColor:po,onCrosshairHover:Qn,onClear:dr,provider:C,onProviderChange:f.isConnected&&g.length>1?Ie:void 0,availableProviders:g,modelIndex:ee,modelCount:Ge.length,modelLabel:Ze.label,models:Ge,agentSettings:Q,onModelChange:f.isConnected?mt:void 0,onAgentSettingsChange:f.isConnected?We:void 0,onViewThread:f.isConnected?Pn:void 0,isThreadPanelOpen:Mt!==null&&!Ae&&!be,mcpStatus:ue,bridgeUrl:x,isBridgeConnected:f.isConnected,packageVersion:Hs,bridgeVersion:Ue,bridgeRestartState:P,bridgeRestartMessage:ke,onBridgeRestart:W,modelSelectedComponent:Pe,modelCanvasHoveredComponent:dn,onModelComponentHover:Nt,onSpacingTokenHover:co,onModifySpacingToken:f.isConnected?Dt:void 0,onDeleteSpacingToken:f.isConnected?un:void 0,modelRefreshKey:Cn,onModelComponentAdded:At,onModelComponentRemoved:at,onSynthesizeRules:f.isConnected&&C!=="copilot"?jo:void 0,isSynthesizing:ht!==null,onSynthesizeEvals:f.isConnected&&C!=="copilot"?ao:void 0,isSynthesizingEvals:xo!==null,onRunEval:f.isConnected&&C!=="copilot"?xr:void 0,onViewEvalRunThread:di,runningEvalIds:Object.keys(Le),evalRefreshKey:et,toolbarRef:E,snapPosition:jt,onSnapPositionChange:Un}),Mt&&Ni(rp,{threadId:Mt,bridgeUrl:x,accentColor:sn,isStreaming:Zt!==null,isQueued:Zt!==null&&!f.activeJobIds.includes(Zt),queuePosition:Zt&&!f.activeJobIds.includes(Zt)?(()=>{let M=new Set(f.activeJobIds),z=Object.keys(le).filter(me=>!M.has(me)),re=z.indexOf(Zt);return re>=0?`(${re+1}/${z.length})`:void 0})():void 0,activeJobId:Zt,streamingEvents:gn,onClose:()=>Ft(null),onReply:So,onCancel:Zt?()=>_(Zt):void 0,lastError:f.lastErrorByJob?.[Zt??""]??(f.lastCompletedJobId&<.current.get(f.lastCompletedJobId)===Mt?f.lastErrorByJob?.[f.lastCompletedJobId]:void 0),toolbarRef:E,currentModel:Ze.id,currentProvider:C,agentSettings:Q,annotationNumber:Ct,annotationText:Xe?.text,onOpenEvals:je,preferredSide:be||ye?"left":"right",modal:!be&&!ye},`${Mt}:${be||ye?"workflow":"default"}`),Ni(Gu,{bridge:f,bridgeUrl:x,inFlightJobs:le,isVisible:Bn||f.lastResponseText!==null||f.activeJobIds.length>0,onHover:Qn,clearSignal:qn,onReply:So,onViewThread:Pn,onClickJob:cr,onCancel:_,onHoverJob:Br,isConnected:f.isConnected,dismissedThreadIds:j,snapPosition:jt,currentPathname:A})]})})]})}function sb(){let e=Zy(ql);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{ib as PopmeltProvider,sb as usePopmelt};
|
|
107
|
+
`}}),Ye("div",{ref:Ze,style:{...Ey,transition:"opacity 150ms ease"},"data-devtools":"thread-panel-messages",children:[v&&oe("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!v&&Dt.length===0&&at.length===0&&!o&&oe("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),Dt.map((Z,xe)=>{let Re=ep(Z,Dt[xe-1]),et=v?[]:se.filter(Le=>Ky(Z,Le)),Ke=!o&&L&&Xy(Z);return Ye(my,{children:[oe(Qu,{msg:Z,index:xe,bridgeUrl:t,accentColor:n,onLightbox:Ge,hideSender:Re,hideTimestamp:Re,compactSpacing:Re}),et.map(Le=>oe(eb,{proposal:Le,bridgeUrl:t,accentColor:n,busy:B,onApplySelected:Jn,onDismiss:()=>co(Le,"dismiss"),onProjectEvals:()=>co(Le,"project-evals")},Le.id)),Ke&&oe("div",{style:{padding:"0 16px 12px"},children:oe("button",{type:"button",onClick:L,style:fa,children:"Review proposals"})})]},`${Z.jobId}-${xe}`)}),o&&oe("div",{style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:r?Ye("div",{style:{display:"flex",alignItems:"center",gap:6},children:[Ye("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:n,style:{verticalAlign:"middle",flexShrink:0,opacity:.5},children:[oe("circle",{cx:"12",cy:"6",r:"2"}),oe("circle",{cx:"6",cy:"12",r:"2"}),oe("circle",{cx:"18",cy:"12",r:"2"}),oe("circle",{cx:"12",cy:"18",r:"2"})]}),Ye("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:["queued",i?` ${i}`:""]})]}):Ye(ar,{children:[Ye("div",{style:{display:"flex",alignItems:"center",gap:4},children:[oe(ds,{provider:E,size:11,style:{color:"#6b7280"}}),oe("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:Ol(m,E)})]}),En.map((Z,xe)=>{if(Z.kind==="tool_group")return oe(rp,{tool:Z.tool,items:Z.items},xe);if(Z.kind==="file_content")return oe(Vy,{file:Z.file,content:Z.content,ext:Z.ext,isPlan:Z.isPlan,onAccept:Z.isPlan&&c?()=>c(e,"Looks good, please proceed with implementation."):void 0},xe);if(Z.kind==="thinking")return oe("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:Z.text},xe);let Re=pa(Z.text);return Re?oe("div",{style:{paddingLeft:12,lineHeight:1.5,wordBreak:"break-word"},children:ir(Re)},xe):null}),Ye("div",{style:{display:"flex",alignItems:"center",gap:6},children:[oe(By,{color:n}),u&&oe("button",{onClick:u,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"})]})]})}),at.length>0&&Ye("div",{style:{display:"flex",flexDirection:"column",borderTop:"1px solid rgba(0,0,0,0.08)"},children:[oe("div",{style:{padding:"8px 16px 0",fontSize:10,color:"#9ca3af",fontStyle:"italic"},children:"queued"}),at.map((Z,xe)=>(()=>{let Re=ep(Z,at[xe-1]);return oe(Qu,{msg:Z,index:Dt.length+xe,bridgeUrl:t,accentColor:n,onLightbox:Ge,hideSender:Re,hideTimestamp:Re,compactSpacing:Re},`${Z.jobId}-staged-${xe}`)})())]}),!V&&G.length>0&&oe("div",{style:{position:"sticky",bottom:5,display:"flex",justifyContent:"flex-end",paddingRight:3,pointerEvents:"none"},children:oe("button",{onClick:()=>{Ze.current&&Ze.current.scrollTo({top:Ze.current.scrollHeight,behavior:"smooth"})},style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:4,fontSize:10,fontFamily:Wn,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:Ye("span",{style:{position:"relative",backgroundColor:"#eaeaea",padding:"0 6px",color:"#374151",fontFamily:Wn,lineHeight:1.4},children:[J," message",J!==1?"s":""," \u2193"]})})})]}),!o&&d&&Ye("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[oe("span",{style:{fontWeight:600},children:"Error: "}),d]}),c&&Ye("div",{style:{flexShrink:0,position:"relative"},children:[ce.length>0&&oe("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:ce.map((Z,xe)=>Ye("span",{onClick:()=>ue(Re=>Re.filter((et,Ke)=>Ke!==xe)),onMouseEnter:Re=>{let et=Re.currentTarget.querySelector("[data-chip-x]");et&&(et.style.color="#fff")},onMouseLeave:Re=>{let et=Re.currentTarget.querySelector("[data-chip-x]");et&&(et.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 ",xe+1,oe("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"rgba(255,255,255,0.4)"},children:"\xD7"})]},xe))}),Ye("div",{ref:Ue,style:{...Ty,borderTop:"1px solid rgba(0,0,0,0.12)"},children:[oe("input",{"data-popmelt-reply":!0,autoFocus:!0,value:ie,onChange:Z=>{ve(Z.target.value),Ie(we.current,Z.target.value)},onFocus:()=>{we.current=!0,Ie(!0,ie)},onBlur:()=>{we.current=!1,Ie(!1,ie)},onKeyDown:Yt,onPaste:ht,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:Wn,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),oe("button",{onClick:un,disabled:!ie.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:ie.trim()?"pointer":"default",color:ie.trim()?n:"rgba(0,0,0,0.2)",flexShrink:0},children:Ye("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[oe("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"}),oe("path",{d:"M6 12h16"})]})})]})]})]})]}),De&&oe(Hy,{src:De,onClose:()=>pe(null)})]})}import{jsx as zi,jsxs as cp}from"react/jsx-runtime";var ob=[],Ql=tb(null),Kl="devtools-provider",ya="devtools-model",ap="devtools-agent-settings",Xl="devtools-open-thread-id",ql="popmelt-synthesize-thread",Zl="popmelt-eval-synthesize-thread",Ni="#000000";function rb(e){let t=e.getBoundingClientRect();return t.bottom<0||t.top>window.innerHeight||t.right<0||t.left>window.innerWidth}function ib(e){for(let t of e){let n=hn(t);if(n){rb(n)&&n.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"});return}}}async function lp(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 sb={0:0,1:1},ab={0:0,1:1,2:1};function lb(e,t,n){if(t==="copilot")return 0;let o=t==="codex"?la:aa;return e==="copilot"?0:e==="claude"&&t==="codex"?sb[n]??Math.min(n,o.length-1):e==="codex"&&t==="claude"?ab[n]??Math.min(n,o.length-1):Math.min(n,o.length-1)}function cb({children:e,enabled:t=process.env.NODE_ENV==="development",bridgeUrl:n=typeof window<"u"?window.__POPMELT_BRIDGE_URL__??"http://localhost:1111":"http://localhost:1111",projectId:o,navigate:r}){let i=typeof window<"u"?o??window.__POPMELT_PROJECT_ID__??null:null,[s,a]=Ht(i),[l,c]=Ht(!!i),u=s,[d,p]=Mc(),f=Cc(n,t&&!!u,u);Jt(()=>{i&&(typeof window<"u"&&(window.__POPMELT_PROJECT_ID__=i),a(i),c(!0))},[i]);let m=Rn(null),E=Rn(null),x=wc()??n,S=Rn(new Map),P=Rn(new Map),L=Rn(!1),D=vi(),[C,G]=Ht(()=>typeof window>"u"?"claude":localStorage.getItem(Kl)||"claude"),[ee,se]=Ht(()=>{if(typeof window>"u")return 0;let T=localStorage.getItem(ya);return T&&parseInt(T,10)||0}),[O,B]=Ht(()=>{if(typeof window>"u")return{};try{return JSON.parse(localStorage.getItem(ap)||"{}")}catch{return{}}}),[g,v]=Ht([]),[b,ie]=Ht({}),[ve,ce]=Ht(0),[ue,we]=Ht({}),[Ue,V]=Ht(null),[A,J]=Ht("idle"),[ke,De]=Ht(null);Jt(()=>{f.isConnected&&rc(x).then(T=>{if(!T)return;let z=Object.entries(T.providers).filter(([,$e])=>$e.available).map(([$e])=>$e);z.length>0&&v(z);let re={};for(let[$e,Ne]of Object.entries(T.providers))Ne.models&&Ne.models.length>0&&(re[$e]=Ne.models);ie(re);let he={};for(let[$e,Ne]of Object.entries(T.providers))Ne.mcp&&(he[$e]=Ne.mcp);we(he)})},[f.isConnected,f.capabilitiesVersion,ve,x]),Jt(()=>{if(!f.isConnected){V(null);return}let T=!1;return Yo(x).then(z=>{T||V(z?.version??null)}),()=>{T=!0}},[f.isConnected,f.capabilitiesVersion,ve,x]),Jt(()=>{if(A==="idle"||A==="restarting")return;let T=window.setTimeout(()=>{J("idle"),De(null)},A==="ok"?4e3:8e3);return()=>window.clearTimeout(T)},[A]),Jt(()=>{if(g.length>0&&!g.includes(C)){let T=g[0];G(T),localStorage.setItem(Kl,T)}},[g,C]);let pe=C==="codex"?[...la]:C==="copilot"?[...Dl]:[...aa],Ge=b[C]&&b[C].length>0?b[C]:pe,Ze=Ge[ee]??Ge[0],Te=`${C}:${Ze.id||"default"}`,Q=O[Te]??{};Jt(()=>{if(!t||u||l)return;let T=!1;return fetch("/popmelt/status").then(z=>z.ok?z.json():null).then(z=>{if(T)return;let re=typeof window<"u"&&z?.devOrigin===window.location.origin,he=z?.projectId&&(re||z.projectIdVerified===!0)?z.projectId:null;he&&typeof window<"u"&&(window.__POPMELT_PROJECT_ID__=he),a(he),c(!0)}).catch(()=>{T||c(!0)}),()=>{T=!0}},[t,u,l]),Jt(()=>{ee>=Ge.length&&(se(0),localStorage.setItem(ya,"0"))},[ee,Ge.length]);let Ie=on(T=>{let z=C;G(T),localStorage.setItem(Kl,T);let re=lb(z,T,ee);se(re),localStorage.setItem(ya,String(re))},[C,ee]),mt=on(T=>{se(T),localStorage.setItem(ya,String(T))},[]),We=on(T=>{B(z=>{let re={...z,[Te]:T};return localStorage.setItem(ap,JSON.stringify(re)),re})},[Te]),[Oe,He]=Ht(new Set),[Pe,Et]=Ht(null),[dn,Sn]=Ht(null),[Ln,Nt]=Ht(null),[wn,co]=Ht(null);Jt(()=>{f.isConnected&&mi(x).then(T=>{T?.components&&He(new Set(Object.keys(T.components)))})},[f.isConnected,x]);let Jn=on(async T=>{let z=[];for(let re of T)try{(await sc(re,x)).added&&z.push(re)}catch(he){console.error("[Popmelt] Failed to add component to model:",re,he)}z.length>0&&(He(re=>{let he=new Set(re);for(let $e of z)he.add($e);return he}),Et(z[z.length-1]))},[x]),En=on(T=>{Et(T)},[]),At=on(()=>{mi(x).then(T=>{T?.components&&He(new Set(Object.keys(T.components)))})},[x]),at=on(async T=>{try{(await ac(T,x)).removed&&He(re=>{let he=new Set(re);return he.delete(T),he})}catch(z){console.error("[Popmelt] Failed to remove component from model:",z)}},[x]),Dt=on((T,z)=>{p({type:"MODIFY_SPACING_TOKEN",payload:T}),p({type:"ADD_SPACING_TOKEN_CHANGE",payload:z})},[p]),un=on((T,z)=>{p({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:T,originalValue:z}})},[p]),[ht,Yt]=Ht(null),[bt,oo]=Ht(()=>typeof window>"u"?null:localStorage.getItem(ql)||null),[xo,Z]=Ht(null),[xe,Re]=Ht(()=>typeof window>"u"?null:localStorage.getItem(Zl)||null),[et,Ke]=Ht(0),[Le,tt]=Ht({}),[qt,pn]=Ht(new Set);Jt(()=>{bt?localStorage.setItem(ql,bt):localStorage.removeItem(ql)},[bt]),Jt(()=>{xe?localStorage.setItem(Zl,xe):localStorage.removeItem(Zl)},[xe]);let[Cn,Ut]=Ht(0),$t=Rn([]);Jt(()=>{let T=$t.current,z=d.spacingTokenMods;$t.current=z;let re=new Map(T.map(Ne=>[Ne.tokenPath,Ne])),he=new Map(z.map(Ne=>[Ne.tokenPath,Ne])),$e=!1;for(let[Ne,Ve]of he){let Ee=re.get(Ne);if(!(Ee&&Ee.currentValue===Ve.currentValue)){$e=!0,Ve.currentValue==="__deleted__"?lc(Ne,x).catch(Qe=>console.error("[Popmelt] Failed to sync token delete:",Qe)):Sa(Ne,Ve.currentValue,x).catch(Qe=>console.error("[Popmelt] Failed to sync token update:",Qe));for(let Qe of Ve.targets){let Dn=document.querySelector(Qe.selector);if(Dn)if(Ve.currentValue==="__deleted__")Dn.style.removeProperty(Qe.property);else{let Rt=Ve.currentPx;Rt>0&&Dn.style.setProperty(Qe.property,`${Rt}px`,"important")}}}}for(let[Ne,Ve]of re)if(!he.has(Ne)){$e=!0,Sa(Ne,Ve.originalValue,x).catch(Ee=>console.error("[Popmelt] Failed to restore token on undo:",Ee));for(let Ee of Ve.targets){let Qe=document.querySelector(Ee.selector);Qe&&Qe.style.removeProperty(Ee.property)}}$e&&Ut(Ne=>Ne+1)},[d.spacingTokenMods,x]);let[Wt,Yn]=Ht(()=>Ic()),Un=on(T=>{Yn(T),Rc(T)},[]),[Tt,Ft]=Ht(()=>typeof window>"u"?null:localStorage.getItem(Xl)||null),I=Rn(null),[j,ne]=Ht(new Set),[ae,fe]=Ht(null);Jt(()=>{Tt?localStorage.setItem(Xl,Tt):localStorage.removeItem(Xl)},[Tt]);let ge="popmelt-in-flight-jobs",[le,Ce]=Ht(()=>{try{let T=localStorage.getItem(ge);return T?JSON.parse(T):{}}catch{return{}}});Jt(()=>{try{Object.keys(le).length>0?localStorage.setItem(ge,JSON.stringify(le)):localStorage.removeItem(ge)}catch{}},[le]),Jt(()=>{let T=z=>{if(z.key===ge)try{let re=z.newValue?JSON.parse(z.newValue):{};Ce(re)}catch{}};return window.addEventListener("storage",T),()=>window.removeEventListener("storage",T)},[]);let pt=Rn(new Map),Fe=Rn(new Map),lt=Rn(new Map);Jt(()=>{for(let[T,z]of Object.entries(le)){z.annotationIds.length>0&&pt.current.set(T,z.annotationIds);let re=new Set(z.styleSelectors);for(let he of z.annotationIds){let $e=d.annotations.find(Ne=>Ne.id===he);if($e&&($e.linkedSelector&&re.add($e.linkedSelector),$e.groupId))for(let Ne of d.annotations)Ne.groupId===$e.groupId&&Ne.linkedSelector&&re.add(Ne.linkedSelector)}re.size>0&&Fe.current.set(T,Array.from(re)),z.threadId&<.current.set(T,z.threadId)}},[le,d.annotations]);let ft=Rn("");Jt(()=>{if(d.annotations.length===0)return;let T=Object.keys(le).sort().join(",");if(T===ft.current)return;ft.current=T;let z=new Set;for(let he of Object.values(le))for(let $e of he.annotationIds)z.add($e);let re=d.annotations.filter(he=>z.has(he.id)?!1:!!(he.status==="in_flight"||(he.status==="pending"||!he.status)&&(he.captured||he.threadId))).map(he=>he.id);re.length>0&&p({type:"SET_ANNOTATION_STATUS",payload:{ids:re,status:"dismissed"}})},[d.annotations,le,p]);let An=Wo(()=>{let T=new Set;for(let z of Object.values(le))for(let re of z.annotationIds)T.add(re);return T},[le]),Tn=Wo(()=>{let T=new Set(f.activeJobIds),z=new Set;for(let[re,he]of Object.entries(le))if(T.has(re))for(let $e of he.annotationIds)z.add($e);return z},[le,f.activeJobIds]),Do=Wo(()=>{let T=new Set(f.activeJobIds),z=Object.entries(le).filter(([$e])=>!T.has($e)),re=z.length,he=new Map;return z.forEach(([,$e],Ne)=>{let Ve=`(${Ne+1}/${re})`;for(let Ee of $e.annotationIds)he.set(Ee,Ve)}),he},[le,f.activeJobIds]),fn=Wo(()=>{let T=new Set;for(let z of Object.values(le))if(!(!z.global&&z.routePathnames?.length&&!z.routePathnames.includes(D)))for(let re of z.styleSelectors)T.add(re);return T},[le,D]),K=Wo(()=>{let T=new Map;for(let z of Object.values(le))if(!(!z.global&&z.routePathnames?.length&&!z.routePathnames.includes(D))){for(let re of z.styleSelectors)T.set(re,z.color);for(let re of z.annotationIds){let he=d.annotations.find($e=>$e.id===re);if(he&&(he.linkedSelector&&T.set(he.linkedSelector,z.color),he.groupId))for(let $e of d.annotations)$e.groupId===he.groupId&&$e.linkedSelector&&T.set($e.linkedSelector,z.color)}}return T},[le,d.annotations,D]),_e=Rn(d.annotations);_e.current=d.annotations;let ot=Rn(d.styleModifications);ot.current=d.styleModifications;let Kt=Rn(le);Kt.current=le,Jt(()=>{let T=null,z=()=>{if(Object.keys(Kt.current).length>0)return;let he=_e.current,$e=ot.current,Ne=[],Ve=[];for(let Ee of he){if(!Ee.linkedSelector||!Ee.linkedSelector.startsWith("[data-pm=")||Ee.pathname||Ee.captured||Ee.status&&Ee.status!=="pending")continue;let Qe=document.querySelector(Ee.linkedSelector);!Qe&&Ee.elements?.[0]?.selector&&(Qe=document.querySelector(Ee.elements[0].selector)),Qe||Ne.push(Ee.linkedSelector)}for(let Ee of $e)Ee.pathname&&Ee.pathname!==window.location.pathname||document.querySelector(Ee.selector)||Ve.push(Ee.selector);(Ne.length>0||Ve.length>0)&&p({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:Ne,styleSelectors:Ve}})},re=new MutationObserver(he=>{he.some($e=>$e.removedNodes.length>0)&&(T&&clearTimeout(T),T=setTimeout(z,3e3))});return re.observe(document.body,{childList:!0,subtree:!0}),()=>{re.disconnect(),T&&clearTimeout(T)}},[p]);let Mo=Rn(typeof window<"u"?window.location.pathname:"/");Jt(()=>{let T=he=>{if(L.current)return;let $e=window.location.pathname;if(he===$e)return;let Ne=_e.current.filter(Ee=>Ee.pathname===he&&(Ee.status??"pending")==="pending");if(console.log(`[Popmelt] Navigation from ${he} \u2192 ${$e}, ${Ne.length} pending annotations on departing page`),Ne.length===0)return;let Ve=m.current;if(!Ve){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if(Ti(document.body,Ve,Ne,{dpr:1}).then(Ee=>Yi(Ee)).then(Ee=>{Ee?(P.current.set(he,Ee),console.log(`[Popmelt] Cached screenshot for ${he} (${(Ee.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${he}`)}).catch(Ee=>{console.warn("[Popmelt] Capture-on-leave failed:",Ee)}),P.current.size>20){let Ee=[...P.current.entries()];P.current=new Map(Ee.slice(-10))}},z=he=>{let $e=he.detail?.prevPath;$e&&(T($e),Mo.current=window.location.pathname)},re=()=>{let he=Mo.current;T(he),Mo.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",z),window.addEventListener("popstate",re),()=>{window.removeEventListener("popmelt:locationchange",z),window.removeEventListener("popstate",re)}},[]),Jt(()=>{if(f.lastCompletedJobId&&f.lastCompletedJobId in le&&Ce(T=>{let{[f.lastCompletedJobId]:z,...re}=T;return re}),f.lastCompletedJobId&&f.lastCompletedJobId===ht&&(Ut(T=>T+1),Yt(null)),f.lastCompletedJobId&&f.lastCompletedJobId===xo&&(Ke(T=>T+1),Z(null)),f.lastCompletedJobId){let T=Object.entries(Le).find(([,z])=>z===f.lastCompletedJobId)?.[0];T&&(tt(z=>{let{[T]:re,...he}=z;return he}),Ke(z=>z+1))}},[f.lastCompletedJobId,ht,xo,Le]);let rn=Rn(new Set),jt=Rn(!1);Jt(()=>{if(!f.isConnected){jt.current=!1;return}jt.current||(jt.current=!0,Yo(x).then(async T=>{if(!T)return;let z=T.activeJobs??[],re=T.recentJobs??[],he=new Set(z.map(Ve=>Ve.id)),$e=JSON.parse(localStorage.getItem(ge)||"{}"),Ne=new Set;for(let Ve of Object.values($e))if(Ve.annotationIds)for(let Ee of Ve.annotationIds)Ne.add(Ee);Ce(Ve=>{let Ee={...Ve},Qe=Date.now();for(let Rt of Object.keys(Ee)){if(Rt.startsWith("_pending_")){let Zt=parseInt(Rt.replace(/^_pending_(?:reply_)?/,""),10);!isNaN(Zt)&&Qe-Zt>3e4&&delete Ee[Rt];continue}he.has(Rt)||delete Ee[Rt]}for(let Rt of z)if(!Ee[Rt.id]&&(Rt.annotationIds?.length||Rt.threadId)){let Zt=Rt.kind,ur=Array.from(new Set((Rt.annotationIds??[]).map(Go=>d.annotations.find(Oo=>Oo.id===Go)?.pathname||D).filter(Boolean)));Ee[Rt.id]={annotationIds:Rt.annotationIds??[],styleSelectors:[],color:Zt==="synthesize_evals"||Zt==="run_eval"||Zt==="materialize_model"&&Rt.standalone===!0?Ni:Rt.color??"#888",threadId:Rt.threadId,kind:Zt,routePathnames:ur.length>0?ur:void 0,global:Zt==="synthesize"||Zt==="synthesize_evals"||Zt==="run_eval"||Zt==="materialize_model"&&Rt.standalone===!0}}let Dn=new Set;for(let Rt of re)if(Rt.annotationIds)for(let Zt of Rt.annotationIds)Dn.add(Zt);for(let Rt of Object.keys(Ee)){if(!Rt.startsWith("_pending_"))continue;let Zt=Ee[Rt];Zt&&Zt.annotationIds.some(ur=>Dn.has(ur))&&delete Ee[Rt]}return Ee});for(let Ve of re)if(Ve.status==="done"&&Ve.annotationIds?.length&&Ve.annotationIds.some(Ee=>Ne.has(Ee))&&!rn.current.has(Ve.id))try{let Ee=await bs(x,Ve.id);if(!Ee)continue;let Qe=Ee.events.find(Dn=>Dn.type==="done");Qe&&Array.isArray(Qe.resolutions)&&(rn.current.add(Ve.id),p({type:"APPLY_RESOLUTIONS",payload:{resolutions:Qe.resolutions,threadId:Qe.threadId??void 0}}))}catch{}}))},[f.isConnected,x,p,d.annotations,D]),Jt(()=>{let T=f.events.filter(z=>z.type==="done"&&z.data.resolutions);for(let z of T){let re=z.data.jobId;rn.current.has(re)||(rn.current.add(re),Array.isArray(z.data.resolutions)&&p({type:"APPLY_RESOLUTIONS",payload:{resolutions:z.data.resolutions,threadId:z.data.threadId}}))}},[f.events,p]);let di=Rn(new Set);Jt(()=>{let T=f.events.filter(z=>z.type==="error"&&z.data.cancelled);for(let z of T){let re=z.data.jobId;if(!re||di.current.has(re))continue;di.current.add(re);let he=le[re];he&&he.annotationIds.length>0&&p({type:"SET_ANNOTATION_STATUS",payload:{ids:he.annotationIds,status:"dismissed"}})}},[f.events,le,p]);let gt=Rn(0);Jt(()=>{let T=f.incrementalResolutions;if(T.length<=gt.current)return;let z=T.slice(gt.current);gt.current=T.length,p({type:"APPLY_RESOLUTIONS",payload:{resolutions:z}})},[f.incrementalResolutions,p]),Jt(()=>{f.incrementalResolutions.length===0&&(gt.current=0)},[f.incrementalResolutions.length]);let so=on(async()=>{let T=m.current;if(!T)return!1;let z=await Ti(document.body,T,d.annotations);if(z.length===0)return!1;let re=await Zc(z,d.annotations,d.styleModifications,d.textModifications,d.domModifications);return re&&p({type:"MARK_CAPTURED"}),re},[d.annotations,d.styleModifications,d.textModifications,d.domModifications,p]),Kn=on((T,z)=>{let re=S.current.get(T)||[];S.current.set(T,[...re,...z])},[]),lr=on(async()=>{let T=m.current;if(!T)return!1;let z=d.annotations.filter(Je=>(Je.status??"pending")==="pending"),re=d.styleModifications.filter(Je=>!Je.captured&&(!Je.pathname||Je.pathname===D)),he=d.textModifications.filter(Je=>!Je.captured&&(!Je.pathname||Je.pathname===D)),$e=d.domModifications.filter(Je=>!Je.captured&&(!Je.pathname||Je.pathname===D)),Ne=d.spacingTokenChanges.filter(Je=>!Je.captured);if(z.length===0&&re.length===0&&he.length===0&&$e.length===0&&Ne.length===0)return!1;let Ve=new Map;for(let Je of z){let On=Je.pathname||D;Ve.has(On)||Ve.set(On,[]),Ve.get(On).push(Je)}let Ee=new Map,Qe=[...Ve.keys()].filter(Je=>Je!==D);if(Qe.length>0){let Je=D,On={x:window.scrollX,y:window.scrollY};L.current=!0;for(let zn of Qe)try{console.log(`[Popmelt] Navigating to ${zn} for screenshot capture`),await lp(zn,r),window.location.pathname!==zn&&console.warn(`[Popmelt] Navigation to ${zn} did not take effect (at ${window.location.pathname})`);let go=Ve.get(zn)||[],ys=await Ti(document.body,T,go,{dpr:1}),_r=await Yi(ys);_r&&(Ee.set(zn,_r),console.log(`[Popmelt] Captured ${zn} (${(_r.size/1024).toFixed(0)}KB)`))}catch(go){console.warn(`[Popmelt] Failed to capture ${zn}:`,go)}await lp(Je,r),window.scrollTo(On.x,On.y),L.current=!1}let Dn=z.filter(Je=>(Je.pathname||D)===D),Rt=await Ti(document.body,T,Dn.length>0?d.annotations:[],{dpr:1});if(Rt.length>0){let Je=await Yi(Rt);Je&&Ee.set(D,Je)}if(Ee.size===0)return!1;let Zt=Ha(z,re,void 0,Ne.length>0?Ne:void 0,he,$e),ur=JSON.stringify(Zt),Go=new Map;for(let Je of z){let On=S.current.get(Je.id);if(On&&On.length>0&&Go.set(Je.id,On),Je.groupId){for(let zn of z)if(zn.groupId===Je.groupId&&zn.id!==Je.id){let go=S.current.get(zn.id);go&&go.length>0&&Go.set(zn.id,go)}}}let Oo=Ve.size>1;console.log(`[Popmelt] Submit: ${Ve.size} page(s), ${Ee.size} screenshot(s), pages: [${[...Ve.keys()].join(", ")}], cached: [${[...P.current.keys()].join(", ")}]`);let Dr=Oo?Ee:Ee.get(D)??Ee,Wi=z.map(Je=>Je.id),gi=[...re.map(Je=>Je.selector),...$e.map(Je=>Je.selector)],ba=Array.from(new Set([...z.map(Je=>Je.pathname||D),...re.map(Je=>Je.pathname||D),...he.map(Je=>Je.pathname||D),...$e.map(Je=>Je.pathname||D)])),hs=_a(d.activeColor),Jo=`_pending_${Date.now()}`,Or={annotationIds:Wi,styleSelectors:gi,color:d.activeColor,threadId:void 0,routePathnames:ba};try{let Je=JSON.parse(localStorage.getItem(ge)||"{}");Je[Jo]=Or,localStorage.setItem(ge,JSON.stringify(Je))}catch{}Ce(Je=>({...Je,[Jo]:Or}));try{let{jobId:Je,threadId:On}=await ic(Dr,ur,x,hs,C,Ze.id,Go.size>0?Go:void 0,Es(),Q);for(let _o of Go.keys())S.current.delete(_o);for(let _o of Ve.keys())P.current.delete(_o);let zn={...Or,threadId:On};try{let _o=JSON.parse(localStorage.getItem(ge)||"{}");delete _o[Jo],_o[Je]=zn,localStorage.setItem(ge,JSON.stringify(_o))}catch{}Ce(_o=>{let{[Jo]:ec,...y}=_o;return{...y,[Je]:zn}}),p({type:"MARK_CAPTURED"}),On&&Wi.length>0&&p({type:"SET_ANNOTATION_THREAD",payload:{ids:Wi,threadId:On}});let go=d.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),_r=((go?.[1]?parseFloat(go[1]):29)+60)%360;return p({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${_r})`}),!0}catch(Je){try{let On=JSON.parse(localStorage.getItem(ge)||"{}");delete On[Jo],localStorage.setItem(ge,JSON.stringify(On))}catch{}return Ce(On=>{let{[Jo]:zn,...go}=On;return go}),console.error("[Pare] Failed to send to bridge:",Je),!1}},[d.annotations,d.styleModifications,d.textModifications,d.domModifications,d.spacingTokenChanges,d.activeColor,p,x,C,Ze.id,Q,D,r]),jo=on(async()=>{if(bt){Ft(bt);return}try{let{jobId:T,threadId:z}=await fc(x,C,Ze.id,Q);Yt(T),oo(z);let re={annotationIds:[],styleSelectors:[],color:"#6b7280",threadId:z,kind:"synthesize",global:!0};Ce(he=>({...he,[T]:re})),Ft(z)}catch(T){console.error("[Popmelt] Failed to start synthesize:",T)}},[x,C,Ze.id,Q,bt]),ao=on(async()=>{Z(null),Re(null),Ft(null);try{let{jobId:T,threadId:z}=await gc(x,C,Ze.id,Q);Z(T),Re(z);let re={annotationIds:[],styleSelectors:[],color:Ni,threadId:z,kind:"synthesize_evals",global:!0};Ce(he=>({...he,[T]:re})),Ft(z)}catch(T){console.error("[Popmelt] Failed to start eval synthesis:",T)}},[x,C,Ze.id,Q]),xr=on(async T=>{let z=m.current;if(z){tt(re=>({...re,[T.id]:"_pending_"}));try{let he=(await Ti(document.body,z,[],{dpr:1}))[0];if(!he){tt(Ve=>{let{[T.id]:Ee,...Qe}=Ve;return Qe});return}let{jobId:$e,threadId:Ne}=await uc(T.id,he,{url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollX:window.scrollX,scrollY:window.scrollY},x,C,Ze.id,Es(),Q);if(tt(Ve=>({...Ve,[T.id]:$e})),Ne){pn(Ee=>new Set(Ee).add(Ne));let Ve={annotationIds:[],styleSelectors:[],color:Ni,threadId:Ne,kind:"run_eval",global:!0};Ce(Ee=>({...Ee,[$e]:Ve})),Ft(Ne)}}catch(re){tt(he=>{let{[T.id]:$e,...Ne}=he;return Ne}),console.error("[Popmelt] Failed to run eval:",re)}}},[x,C,Ze.id,Q]),So=on(async(T,z,re)=>{let he=Object.values(Kt.current).find(Qe=>Qe.threadId===T)?.color??d.annotations.find(Qe=>Qe.threadId===T)?.color??d.activeColor,$e=d.annotations.filter(Qe=>Qe.threadId===T&&(Qe.status==="waiting_input"||Qe.status==="resolved"||Qe.status==="needs_review")),Ne=$e.map(Qe=>Qe.id),Ve=`_pending_reply_${Date.now()}`,Ee={annotationIds:Ne,styleSelectors:[],color:he,threadId:T};try{let Qe=JSON.parse(localStorage.getItem(ge)||"{}");Qe[Ve]=Ee,localStorage.setItem(ge,JSON.stringify(Qe))}catch{}Ce(Qe=>({...Qe,[Ve]:Ee}));try{let Qe=_a(d.activeColor),{jobId:Dn}=await mc(T,z,x,Qe,C,Ze.id,re,Es(),Q),Rt={...Ee};try{let Zt=JSON.parse(localStorage.getItem(ge)||"{}");delete Zt[Ve],Zt[Dn]=Rt,localStorage.setItem(ge,JSON.stringify(Zt))}catch{}return Ce(Zt=>{let{[Ve]:ur,...Go}=Zt;return{...Go,[Dn]:Rt}}),$e.length>0&&p({type:"SET_ANNOTATION_STATUS",payload:{ids:Ne,status:"in_flight"}}),f.dismissQuestion(T),{jobId:Dn}}catch(Qe){try{let Dn=JSON.parse(localStorage.getItem(ge)||"{}");delete Dn[Ve],localStorage.setItem(ge,JSON.stringify(Dn))}catch{}Ce(Dn=>{let{[Ve]:Rt,...Zt}=Dn;return Zt}),console.error("[Pare] Failed to send reply:",Qe)}},[d.activeColor,d.annotations,x,f.dismissQuestion,p,C,Ze.id,Q]),uo=Rn(new Set);Jt(()=>{for(let T of f.pendingQuestions){if(uo.current.has(T.jobId))continue;uo.current.add(T.jobId);let z=T.annotationIds&&T.annotationIds.length>0?T.annotationIds:void 0;!z&&T.threadId&&(z=d.annotations.filter(re=>re.threadId===T.threadId).map(re=>re.id)),z&&z.length>0&&p({type:"SET_ANNOTATION_QUESTION",payload:{ids:z,question:T.question,threadId:T.threadId}})}},[f.pendingQuestions,p,d.annotations]);let po=Wo(()=>{if(f.activeJobId&&f.activeJobId in le)return le[f.activeJobId].color;let T=Object.values(le);return T.length>0?T[T.length-1].color:void 0},[f.activeJobId,le]),Pn=on(T=>{Ft(T)},[]),ui=on(T=>{pn(z=>new Set(z).add(T)),I.current=Ni,Ft(T)},[]),pi=on(T=>{Ft(null),T&&(ne(z=>new Set(z).add(T)),hc(T,x).catch(z=>{console.warn("[Popmelt] Failed to delete thread:",z)}))},[x]),cr=on((T,z)=>{let re=le[T],he=Fe.current.get(T);if(re){let Ne=new Set(re.styleSelectors);for(let Ve of re.annotationIds){let Ee=d.annotations.find(Qe=>Qe.id===Ve);if(Ee&&(Ee.linkedSelector&&Ne.add(Ee.linkedSelector),Ee.groupId))for(let Qe of d.annotations)Qe.groupId===Ee.groupId&&Qe.linkedSelector&&Ne.add(Qe.linkedSelector)}Ne.size>0&&(he=Array.from(Ne))}he?.length&&ib(he);let $e=re?.threadId||z||lt.current.get(T);if($e){let Ne=re?.kind==="materialize_model"&&(re.annotationIds?.length??0)===0;I.current=re?.kind==="synthesize_evals"||re?.kind==="run_eval"||Ne?Ni:re?.color??null,Ft($e)}},[le,d.annotations]),Br=on(T=>{if(!T){fe(null);return}let z=pt.current.get(T);z&&z.length>0?fe(new Set(z)):fe(null)},[]),_=on(async T=>{try{let z=T?`${x}/cancel?jobId=${T}`:`${x}/cancel`;await ko(z,{method:"POST"})}catch{}},[x]),W=on(async()=>{J("restarting"),De("Restarting bridge");let T=await wa(x,Fs,2e4);if(T.ok){await Ec(T.bridgeUrl??n,u),V(T.status.version??Fs),J("ok"),De(T.status.version?`Bridge restarted on ${T.status.version}`:"Bridge restarted"),ce(z=>z+1);return}V(T.status?.version??Ue),J("error"),De(T.error)},[Ue,n,u,x]),de=Wo(()=>{if(!Tt)return null;for(let T of Object.values(le))if(T.threadId===Tt&&T.kind){if(T.kind==="materialize_model"&&T.annotationIds.length>0)continue;return T.kind}return Tt===bt?"synthesize":Tt===xe?"synthesize_evals":qt.has(Tt)?"run_eval":null},[Tt,le,bt,xe,qt]),be=de==="synthesize_evals"||de==="run_eval",me=de==="materialize_model",Ae=de==="synthesize";Jt(()=>{(d.activeTool==="model"&&Tt&&!Ae||d.activeTool==="eval"&&Tt&&!be)&&Ft(null)},[d.activeTool,Tt,Ae,be]);let je=on(()=>{p({type:"SET_TOOL",payload:"eval"}),Ke(T=>T+1),Ft(null)},[p]),ct=Rn(null);Jt(()=>{d.isAnnotating?ct.current&&(Ft(ct.current),ct.current=null):Tt&&(ct.current=Tt,Ft(null))},[d.isAnnotating]);let Xt=Wo(()=>{if(!Tt)return null;for(let[T,z]of Object.entries(le))if(z.threadId===Tt)return T;for(let[T,z]of Object.entries(f.activeJobThreads))if(z===Tt)return T;return null},[Tt,le,f.activeJobThreads]),Xe=Tt?d.annotations.find(T=>T.threadId===Tt):void 0,gn=Wo(()=>Xt?f.events.filter(T=>T.data.jobId===Xt):ob,[Xt,f.events.length]),sn=Wo(()=>be||me?Ni:Xe?.color??I.current??d.activeColor,[be,me,Xe?.color,d.activeColor]),Ct=Xe?d.annotations.indexOf(Xe)+1:void 0;Jt(()=>{if(be)return;let T=Xe?.color??I.current;Tt&&T&&p({type:"SET_COLOR",payload:T})},[Tt,be]);let[Bn,Xn]=Ht(!1),[qn,Vo]=Ht(0),fo=Rn(null),Qn=on(T=>{T?(fo.current&&(clearTimeout(fo.current),fo.current=null),Xn(!0)):fo.current=setTimeout(()=>{Xn(!1),fo.current=null},150)},[]),dr=on(()=>{Vo(T=>T+1),f.clearEvents(),Ft(null),ne(new Set),_()},[f.clearEvents,_]);Jt(()=>()=>{fo.current&&clearTimeout(fo.current)},[]);let[fi,ms]=Ht(!1);Jt(()=>{ms(!0)},[]);let $i=Wo(()=>({isEnabled:t}),[t]);return!t||!fi?zi(Ql.Provider,{value:$i,children:e}):cp(Ql.Provider,{value:$i,children:[e,zi(cu,{state:d,dispatch:p,onScreenshot:so,inFlightAnnotationIds:An,activeAnnotationIds:Tn,queuePositionMap:Do,inFlightStyleSelectors:fn,inFlightSelectorColors:K,onAttachImages:Kn,onReply:f.isConnected?So:void 0,onViewThread:f.isConnected?Pn:void 0,onCloseThread:pi,onModelComponentsAdd:f.isConnected?Jn:void 0,onModelComponentFocus:f.isConnected?En:void 0,onModelComponentHover:Sn,modelComponentNames:Oe,modelPanelHoveredComponent:Ln,modelSpacingTokenHover:wn,highlightedAnnotationIds:ae,focusedThreadAnnotationId:Xe?.id,externalCanvasRef:m,toolbarRef:E}),zi(Xu,{children:cp(Uu,{children:[zi(Wu,{state:d,dispatch:p,onScreenshot:so,onSendToClaude:f.isConnected?lr:void 0,hasActiveJobs:Object.keys(le).length>0||f.activeJobIds.length>0,activeJobColor:po,onCrosshairHover:Qn,onClear:dr,provider:C,onProviderChange:f.isConnected&&g.length>1?Ie:void 0,availableProviders:g,modelIndex:ee,modelCount:Ge.length,modelLabel:Ze.label,models:Ge,agentSettings:Q,onModelChange:f.isConnected?mt:void 0,onAgentSettingsChange:f.isConnected?We:void 0,onViewThread:f.isConnected?Pn:void 0,isThreadPanelOpen:Tt!==null&&!Ae&&!be,mcpStatus:ue,bridgeUrl:x,isBridgeConnected:f.isConnected,packageVersion:Fs,bridgeVersion:Ue,bridgeRestartState:A,bridgeRestartMessage:ke,onBridgeRestart:W,modelSelectedComponent:Pe,modelCanvasHoveredComponent:dn,onModelComponentHover:Nt,onSpacingTokenHover:co,onModifySpacingToken:f.isConnected?Dt:void 0,onDeleteSpacingToken:f.isConnected?un:void 0,modelRefreshKey:Cn,onModelComponentAdded:At,onModelComponentRemoved:at,onSynthesizeRules:f.isConnected&&C!=="copilot"?jo:void 0,isSynthesizing:ht!==null,onSynthesizeEvals:f.isConnected&&C!=="copilot"?ao:void 0,isSynthesizingEvals:xo!==null,onRunEval:f.isConnected&&C!=="copilot"?xr:void 0,onViewEvalRunThread:ui,runningEvalIds:Object.keys(Le),evalRefreshKey:et,toolbarRef:E,snapPosition:Wt,onSnapPositionChange:Un}),Tt&&zi(sp,{threadId:Tt,bridgeUrl:x,accentColor:sn,isStreaming:Xt!==null,isQueued:Xt!==null&&!f.activeJobIds.includes(Xt),queuePosition:Xt&&!f.activeJobIds.includes(Xt)?(()=>{let T=new Set(f.activeJobIds),z=Object.keys(le).filter(he=>!T.has(he)),re=z.indexOf(Xt);return re>=0?`(${re+1}/${z.length})`:void 0})():void 0,activeJobId:Xt,streamingEvents:gn,onClose:()=>Ft(null),onReply:So,onCancel:Xt?()=>_(Xt):void 0,lastError:f.lastErrorByJob?.[Xt??""]??(f.lastCompletedJobId&<.current.get(f.lastCompletedJobId)===Tt?f.lastErrorByJob?.[f.lastCompletedJobId]:void 0),toolbarRef:E,currentModel:Ze.id,currentProvider:C,agentSettings:Q,annotationNumber:Ct,annotationText:Xe?.text,onOpenEvals:je,preferredSide:be||me?"left":"right",modal:!be&&!me},`${Tt}:${be||me?"workflow":"default"}`),zi(Yu,{bridge:f,bridgeUrl:x,inFlightJobs:le,isVisible:Bn||f.lastResponseText!==null||f.activeJobIds.length>0,onHover:Qn,clearSignal:qn,onReply:So,onViewThread:Pn,onClickJob:cr,onCancel:_,onHoverJob:Br,isConnected:f.isConnected,dismissedThreadIds:j,snapPosition:Wt,currentPathname:D})]})})]})}function db(){let e=nb(Ql);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{cb as PopmeltProvider,db as usePopmelt};
|