@popmelt.com/core 0.8.1 → 0.8.2
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 +49 -49
- package/dist/cli.mjs +42 -42
- package/dist/index.mjs +52 -24
- package/dist/plugin-astro.mjs +1 -1
- package/dist/plugin-vite.mjs +1 -1
- package/dist/{server-AGXQFGSU.mjs → server-HJ37BEU5.mjs} +34 -34
- package/dist/server.mjs +34 -34
- package/package.json +3 -3
package/dist/index.mjs
CHANGED
|
@@ -1,26 +1,54 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{createContext as wh,useCallback as Nt,useContext as Ch,useEffect as At,useMemo as po,useRef as tn,useState as wt}from"react";import{useCallback as rl,useEffect as Ad,useSyncExternalStore as Ld}from"react";var fn="http://localhost:1111";function Ga(){return typeof window<"u"?window.__POPMELT_PROJECT_ID__??null:null}function Id(e={}){let t=Ga();if(!t)return e;let n=new Headers(e.headers);return n.set("X-Popmelt-Project-Id",t),{...e,headers:n}}function qn(e,t={}){return fetch(e,Id(t))}function kn(e,t={},n=15e3){let o=new AbortController;t.signal&&t.signal.addEventListener("abort",()=>o.abort());let r=setTimeout(()=>o.abort(),n);return qn(e,{...t,signal:o.signal}).finally(()=>clearTimeout(r))}async function Ja(e=fn){try{let t=await kn(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch{return null}}async function mo(e=fn){try{let t=new AbortController,n=setTimeout(()=>t.abort(),2e3),o=await qn(`${e}/status`,{signal:t.signal});return clearTimeout(n),o.ok?await o.json():null}catch{return null}}async function ja(e){try{let t=new AbortController,n=setTimeout(()=>t.abort(),500),o=await qn(`http://localhost:${e}/status`,{signal:t.signal});return clearTimeout(n),o.ok?await o.json():null}catch{return null}}async function Md(e){return mo(e)}async function Ss(e,t){if(e&&e!=="http://localhost:1111")try{let d=new URL(e),u=await Md(e);if(!u&&!t)return null;if(!(!u&&t)){if(!(u&&t&&u.projectId!==t)){if(u?.projectId&&!t)return null;if(u)return{url:e,port:parseInt(d.port,10)||1111,projectId:u.projectId}}}}catch{if(!t)return null}let i=typeof window<"u"?window.location.origin:null,a=await ja(1111);if(a){if(t&&a.projectId===t)return{url:"http://localhost:1111",port:1111,projectId:a.projectId};if(a.devOrigin&&i&&a.devOrigin===i&&(t||!a.projectId))return{url:"http://localhost:1111",port:1111,projectId:a.projectId}}let s=Array.from({length:8},(d,u)=>{let p=1112+u;return ja(p).then(f=>f?{status:f,port:p}:null)}),l=(await Promise.all(s)).filter(d=>d!==null),c=[];a&&c.push({port:1111,devOrigin:a.devOrigin,projectId:a.projectId});for(let d of l)c.push({port:d.port,devOrigin:d.status.devOrigin,projectId:d.status.projectId});if(t){let d=c.find(u=>u.projectId===t);if(d)return{url:`http://localhost:${d.port}`,port:d.port,projectId:d.projectId}}if(i){let d=c.find(u=>u.devOrigin===i&&(t||!u.projectId));if(d)return{url:`http://localhost:${d.port}`,port:d.port,projectId:d.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 Ei(e=fn,t,n=-1){try{let o=await kn(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return o.ok?await o.json():null}catch{return null}}async function Va(e,t,n=fn,o,r,i,a,s){let l=new FormData;if(e instanceof Map){let d=!0;for(let[u,p]of e){let f=encodeURIComponent(u);l.append(`screenshot-${f}`,p,`screenshot-${f}.webp`),d&&(l.append("screenshot",p,"screenshot.webp"),d=!1)}d&&l.append("screenshot",new Blob([],{type:"image/webp"}),"screenshot.webp")}else l.append("screenshot",e,"screenshot.webp");if(l.append("feedback",t),o&&l.append("color",o),r&&l.append("provider",r),i&&l.append("model",i),s&&l.append("sourceId",s),a)for(let[d,u]of a)for(let p=0;p<u.length;p++)l.append(`image-${d}-${p}`,u[p],`image-${d}-${p}.webp`);let c=await kn(`${n}/send`,{method:"POST",body:l},3e4);if(!c.ok){let d=await c.text();throw new Error(`Bridge returned ${c.status}: ${d}`)}return c.json()}async function Ya(e,t=fn){let n=await kn(`${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 Ua(e,t=fn){let n=await kn(`${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 ws(e,t,n=fn){let o=await kn(`${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 Ka(e,t=fn){let n=await kn(`${t}/model/token`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e})},1e4);if(!n.ok){let o=await n.text();throw new Error(`Bridge returned ${n.status}: ${o}`)}return n.json()}async function Mr(e=fn){try{let t=await kn(`${e}/model`,{},5e3);return t.ok?(await t.json()).model??null:null}catch{return null}}async function Xa(e=fn){let t=await kn(`${e}/evals`,{},5e3);return t.ok?t.json():{version:1,updatedAt:0,cases:[]}}async function ki(e,t,n=fn){let o=await kn(`${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 qa(e,t,n=fn){return ki(e,{status:t},n)}async function Za(e,t,n,o=fn,r,i,a){let s=new FormData;s.append("screenshot",t,"eval-run.webp"),s.append("feedback",JSON.stringify(n)),r&&s.append("provider",r),i&&s.append("model",i),a&&s.append("sourceId",a);let l=await kn(`${o}/evals/${encodeURIComponent(e)}/run`,{method:"POST",body:s},3e4);if(!l.ok){let c=await l.text();throw new Error(`Bridge returned ${l.status}: ${c}`)}return l.json()}function Rd(e){return new Promise(t=>setTimeout(t,e))}async function Cs(e=fn,t,n=15e3){let o=Date.now();try{let l=await kn(`${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,a=Ga();for(;Date.now()-o<n;){if(await Rd(350),r=await mo(i),!r?.ok&&a){let l=await Ss(e,a);l?.url&&(i=l.url,r=await mo(i))}if(r?.ok&&!(a&&r.projectId!==a)&&!(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 Qa(e=fn){return(await Cs(e)).ok}async function el(e=fn,t,n){let o=await kn(`${e}/model/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n})},1e4);if(!o.ok){let r=await o.text();throw new Error(`Bridge returned ${o.status}: ${r}`)}return o.json()}async function tl(e=fn,t,n){let o=await kn(`${e}/evals/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n})},1e4);if(!o.ok){let r=await o.text();throw new Error(`Bridge returned ${o.status}: ${r}`)}return o.json()}async function nl(e,t,n=fn,o,r,i,a,s){let l;if(a&&a.length>0){let c=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"});c.append("screenshot",d,"screenshot.png"),c.append("feedback",JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:s}));for(let u=0;u<a.length;u++)c.append(`image-reply-${u}`,a[u],`reply-image-${u}.webp`);l=await kn(`${n}/reply`,{method:"POST",body:c},3e4)}else l=await kn(`${n}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:s})},3e4);if(!l.ok){let c=await l.text();throw new Error(`Bridge returned ${l.status}: ${c}`)}return l.json()}async function ol(e,t=fn){let n=await kn(`${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 Mt=globalThis.__POPMELT_BRIDGE_CONNECTION__??(globalThis.__POPMELT_BRIDGE_CONNECTION__={}),Mi=Mt.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));Mt.sourceId=Mi;try{typeof localStorage<"u"&&localStorage.setItem("popmelt-source-id",Mi)}catch{}function Ri(){return Mi}var al={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},lr=Mt.store??{...al};Mt.store=lr;var Ii=Mt.listeners??new Set;Mt.listeners=Ii;var ho=Mt.activeEs??null,Ti=Mt.activeBridgeUrl??null,yo=null,Ar=Mt.connectionGeneration??0,il=Mt.expectedProjectId??null,oi=new Set,cr=new Map,bo={};function ar(e,t){if(!e)return!1;if(oi.has(e)){let o=cr.get(e);return o||(o=[],cr.set(e,o)),o.push({type:t.type??"",data:t}),!0}let n=bo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function Pd(e,t,n){let o=()=>n!==Ar;for(let r of t){if(o())return;oi.add(r),cr.set(r,[])}await Promise.all(t.map(async r=>{try{let i=await Ei(e,r);if(o())return;let a=cr.get(r)??[];if(i){if(rn(s=>{let l={...s.jobResponses,[r]:i.accumulated.response},c={...s.jobThinking,[r]:i.accumulated.thinking},d=[...s.events];for(let u of i.events)u.type==="done"||u.type==="error"||d.push({type:u.type,data:u,timestamp:Date.now()});return{...s,jobResponses:l,jobThinking:c,currentResponse:r===s.activeJobId?i.accumulated.response:s.currentResponse,currentThinking:r===s.activeJobId?i.accumulated.thinking:s.currentThinking,events:d}}),bo[r]=i.currentSeq,!i.jobActive){let s=i.events.find(l=>l.type==="done"||l.type==="error");s&&Es(s.type,s,r)}for(let s of a)typeof s.data.seq=="number"&&s.data.seq<=i.currentSeq||Es(s.type,s.data,r)}else for(let s of a)Es(s.type,s.data,r)}finally{oi.delete(r),cr.delete(r)}}))}function Es(e,t,n){if(e==="delta"){let o=t.text||"";rn(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||"";rn(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 bo[n],rn(o=>{let r=o.activeJobIds.filter(c=>c!==n),i={...o.jobResponses},a={...o.jobThinking},s=i[n];delete i[n],delete a[n];let l=n===o.activeJobId?r.length>0?r[r.length-1]:null:o.activeJobId;return{...o,activeJobIds:r,activeJobId:l,jobResponses:i,jobThinking:a,lastCompletedJobId:n,lastResponseText:s||o.currentResponse||t.responseText||null,lastThreadId:t.threadId??null,...n===o.activeJobId?{currentResponse:l&&i[l]||"",currentThinking:l&&a[l]||""}:{},events:[...o.events,{type:"done",data:t,timestamp:Date.now()}]}});else if(e==="error"){delete bo[n];let o=t.message??"";rn(r=>{let i=r.activeJobIds.filter(s=>s!==n),a=i.length>0?r.status:"error";return{...r,status:a,activeJobIds:i,lastCompletedJobId:n,lastErrorByJob:o?{...r.lastErrorByJob,[n]:o}:r.lastErrorByJob,events:[...r.events,{type:"error",data:t,timestamp:Date.now()}]}})}else rn(o=>({...o,events:[...o.events,{type:e,data:t,timestamp:Date.now()}]}))}var Zn=Mt.discoveredBridgeUrl??null,Gn=Mt.discoveredBridgeProjectId??null,qo=null,Rr=null;function Bd(e){let t=e??null;if(il!==t){ho&&(ho.close(),ho=null,Mt.activeEs=null),yo&&(clearTimeout(yo),yo=null),Ti=null,Mt.activeBridgeUrl=null,Zn=null,Gn=null,Mt.discoveredBridgeUrl=null,Mt.discoveredBridgeProjectId=null,qo=null,Rr=null,oi.clear(),cr.clear();for(let n of Object.keys(bo))delete bo[n];il=t,Mt.expectedProjectId=t,Ar+=1,Mt.connectionGeneration=Ar,rn(()=>({...al}))}}async function ll(e,t){return Zn&&(t?Gn===t:!Gn)?Zn:(!t&&Gn&&(Zn=null,Gn=null,Mt.discoveredBridgeUrl=Zn,Mt.discoveredBridgeProjectId=Gn),t&&Gn&&Gn!==t&&(Zn=null,Gn=null,Mt.discoveredBridgeUrl=Zn,Mt.discoveredBridgeProjectId=Gn),qo&&Rr===(t??null)||(Rr=t??null,qo=Ss(e,t).then(n=>(Zn=n?.url??null,Gn=n?.projectId??t??null,Mt.discoveredBridgeUrl=Zn,Mt.discoveredBridgeProjectId=Gn,qo=null,Rr=null,Zn)).catch(()=>(qo=null,Rr=null,null))),qo)}function cl(){return Zn}async function dl(e,t){Zn=null,Gn=null,Mt.discoveredBridgeUrl=null,Mt.discoveredBridgeProjectId=null,qo=null,Rr=null;let n=await ll(e,t);return n&&ks(n),n}function sl(){return lr}function Dd(e){return Ii.add(e),()=>{Ii.delete(e)}}function rn(e){lr=e(lr),Mt.store=lr;for(let t of Ii)t()}function _d(){return typeof window<"u"?window.__POPMELT_PROJECT_ID__??null:null}function ks(e){if(ho&&ho.readyState!==EventSource.CLOSED&&Ti===e)return;ho&&(ho.close(),ho=null,Mt.activeEs=null),yo&&(clearTimeout(yo),yo=null),Ti=e,Mt.activeBridgeUrl=Ti;let t=++Ar;Mt.connectionGeneration=Ar;let n=new URLSearchParams({sourceId:Mi}),o=_d();o&&n.set("projectId",o);let r=new EventSource(`${e}/events?${n.toString()}`);ho=r,Mt.activeEs=ho;let i=()=>t!==Ar;r.addEventListener("connected",()=>{i()||mo(e).then(a=>{if(i())return;let s=a?.activeJobs??(a?.activeJob?[a.activeJob]:[]),l=new Set(s.map(v=>v.id)),c=a?.recentJobs??[],d=new Map(c.map(v=>[v.id,v])),u=s.length>0;rn(v=>{let C={...v.lastErrorByJob},x=v.activeJobIds.filter(T=>!l.has(T));for(let T of x){let R=d.get(T);R?.status==="error"&&R.error&&(C[T]=R.error)}let I=v.activeJobIds.filter(T=>l.has(T));for(let T of l)I.includes(T)||I.push(T);let B={};for(let T of s)T.threadId&&(B[T.id]=T.threadId);return{...v,isConnected:!0,status:u?"streaming":x.length>0||v.status==="disconnected"?"idle":v.status,activeJobId:u?s[s.length-1].id:I.length>0?I[I.length-1]:null,activeJobIds:I,activeJobThreads:B,lastErrorByJob:C,lastCompletedJobId:x.length>0?x[x.length-1]:v.lastCompletedJobId}});let p=lr.activeJobIds.filter(v=>!l.has(v)),f=[...Array.from(l),...p];f.length>0&&Pd(e,f,t).catch(()=>{})})}),r.addEventListener("job_started",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;if(ar(l,s))return;let c=s.threadId;rn(d=>({...d,status:"streaming",activeJobId:l,activeJobIds:d.activeJobIds.includes(l)?d.activeJobIds:[...d.activeJobIds,l],activeJobThreads:c?{...d.activeJobThreads,[l]:c}:d.activeJobThreads,jobResponses:{...d.jobResponses,[l]:d.jobResponses[l]??""},jobThinking:{...d.jobThinking,[l]:d.jobThinking[l]??""},currentResponse:d.jobResponses[l]??"",currentThinking:d.jobThinking[l]??"",lastResponseText:null,lastThreadId:null,events:[...d.events,{type:"job_started",data:s,timestamp:Date.now()}]}))}),r.addEventListener("delta",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;if(ar(l,s))return;let c=s.text||"";rn(d=>({...d,jobResponses:l?{...d.jobResponses,[l]:(d.jobResponses[l]||"")+c}:d.jobResponses,currentResponse:!l||l===d.activeJobId?d.currentResponse+c:d.currentResponse,events:[...d.events,{type:"delta",data:s,timestamp:Date.now()}]}))}),r.addEventListener("thinking",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;if(ar(l,s))return;let c=s.text||"";rn(d=>({...d,jobThinking:l?{...d.jobThinking,[l]:(d.jobThinking[l]||"")+c}:d.jobThinking,currentThinking:!l||l===d.activeJobId?d.currentThinking+c:d.currentThinking,events:[...d.events,{type:"thinking",data:s,timestamp:Date.now()}]}))}),r.addEventListener("tool_use",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;ar(l,s)||rn(c=>({...c,events:[...c.events,{type:"tool_use",data:s,timestamp:Date.now()}]}))}),r.addEventListener("done",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;ar(l,s)||(l&&delete bo[l],rn(c=>{let d=l?c.activeJobIds.filter(x=>x!==l):c.activeJobIds,u={...c.jobResponses},p={...c.jobThinking},f={...c.activeJobThreads},v=l?u[l]:void 0;l&&(delete u[l],delete p[l],delete f[l]);let C=l===c.activeJobId?d.length>0?d[d.length-1]:null:c.activeJobId;return{...c,activeJobIds:d,activeJobId:C,jobResponses:u,jobThinking:p,lastCompletedJobId:l??c.activeJobId,lastResponseText:v||c.currentResponse||s.responseText||null,lastThreadId:s.threadId??null,...l===c.activeJobId?{currentResponse:C&&u[C]||"",currentThinking:C&&p[C]||""}:{},events:[...c.events,{type:"done",data:s,timestamp:Date.now()}]}}))}),r.addEventListener("question",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;ar(l,s)||rn(c=>({...c,pendingQuestions:[...c.pendingQuestions,{jobId:s.jobId,threadId:s.threadId,question:s.question,annotationIds:s.annotationIds,timestamp:Date.now()}],events:[...c.events,{type:"question",data:s,timestamp:Date.now()}]}))}),r.addEventListener("capabilities_changed",()=>{i()||rn(a=>({...a,capabilitiesVersion:a.capabilitiesVersion+1}))}),r.addEventListener("queue_drained",()=>{if(!i()){for(let a of Object.keys(bo))delete bo[a];oi.clear(),cr.clear(),rn(a=>({...a,status:a.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}}),r.addEventListener("error",a=>{if(!i()){if(r.readyState===EventSource.CLOSED)rn(s=>({...s,isConnected:!1,status:"disconnected"})),yo&&(clearTimeout(yo),yo=null),yo=setTimeout(()=>{mo(e).then(s=>{s&&ks(e)})},5e3);else if(a instanceof MessageEvent){let s=JSON.parse(a.data),l=s.jobId??null;if(ar(l??void 0,s))return;l&&delete bo[l];let c=s.message??"";rn(d=>{let u=l?d.activeJobIds.filter(f=>f!==l):d.activeJobIds,p=u.length>0?d.status:"error";return{...d,status:p,activeJobIds:u,lastCompletedJobId:l??d.activeJobId,lastErrorByJob:l&&c?{...d.lastErrorByJob,[l]:c}:d.lastErrorByJob,events:[...d.events,{type:"error",data:s,timestamp:Date.now()}]}})}}}),r.onerror=()=>{i()||r.readyState===EventSource.CLOSED&&rn(a=>({...a,isConnected:!1,status:"disconnected"}))}}function ul(e="http://localhost:1111",t=!0,n){let o=Ld(Dd,sl,sl);Ad(()=>{Bd(n),t&&ll(e,n).then(a=>{a&&mo(a).then(s=>{s&&(!n||s.projectId===n)&&ks(a)})})},[e,t,n]);let r=rl(()=>{rn(()=>({...lr,events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),i=rl(a=>{rn(s=>({...s,pendingQuestions:s.pendingQuestions.filter(l=>l.threadId!==a)}))},[]);return{...o,clearEvents:r,dismissQuestion:i}}import{useEffect as Od,useReducer as Hd}from"react";var Nd={isAnnotating:!1,activeTool:"inspector",activeColor:"oklch(0.628 0.258 29)",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function Ai(){return Math.random().toString(36).substring(2,9)}function pl(e){return e.status?e:e.captured?{...e,status:"in_flight"}:{...e,status:"pending"}}function On(e){return{...e,undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]}}function zd(e,t){return{...e,isAnnotating:t}}function Fd(e,t){return{...e,activeTool:t,inspectedElement:null}}function $d(e,t){return{...e,activeColor:t}}function Wd(e,t){return{...e,strokeWidth:t}}function jd(e,t){return{...e,currentPath:[t]}}function Gd(e,t){return{...e,currentPath:[...e.currentPath,t]}}function Jd(e){return{...e,currentPath:[]}}function Vd(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return{...e,currentPath:[]};let n={id:Ai(),type:e.activeTool,points:e.currentPath,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window<"u"?window.location.pathname:"/",groupId:t?.groupId,elements:t?.elements};return{...On(e),annotations:[...e.annotations,n],currentPath:[]}}function Yd(e,t){let n={id:t.id??Ai(),type:"text",points:[t.point],text:t.text,fontSize:t.fontSize||12,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window<"u"?window.location.pathname:"/",groupId:t.groupId,linkedSelector:t.linkedSelector,linkedAnchor:t.linkedAnchor,elements:t.elements,...t.imageCount?{imageCount:t.imageCount}:{}};return{...t.groupId?e:On(e),annotations:[...e.annotations,n]}}function Ud(e,t){return{...On(e),annotations:e.annotations.map(o=>o.id===t.id?{...o,text:t.text,...t.imageCount!=null?{imageCount:t.imageCount}:{}}:o)}}function Kd(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 Xd(e,t){let n=On(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 qd(e,t){let n=t.saveUndo?On(e):e,r=e.annotations.find(i=>i.id===t.id)?.groupId;return{...n,annotations:e.annotations.map(i=>{if(!(i.id===t.id||r&&i.groupId===r))return i;let s=t.delta.x,l=t.delta.y;return{...i,points:i.points.map(c=>({x:c.x+s,y:c.y+l}))}})}}function Zd(e,t){let n=t.saveUndo?On(e):e,o=e.annotations.find(a=>a.id===t.id);if(!o||o.type==="text"||o.points.length<2)return e;let r=0,i=0;if(o.type==="rectangle"&&o.groupId){let a=t.points,s=Math.min(a[0].x,a[1].x),l=Math.max(a[0].y,a[1].y),c=o.points[0],d=o.points[o.points.length-1],u=Math.min(c.x,d.x),p=Math.max(c.y,d.y);r=s-u,i=l-p}return{...n,annotations:e.annotations.map(a=>a.id===t.id?{...a,points:t.points}:o.groupId&&a.groupId===o.groupId&&a.type==="text"?{...a,points:a.points.map(s=>({x:s.x+r,y:s.y+i}))}:a)}}function Qd(e,t){return{...On(e),annotations:[...e.annotations,...t.annotations.map(pl)]}}function eu(e,t){let n=new Set,o=[];for(let r of t.annotations)n.has(r.id)||(n.add(r.id),o.push(pl(r)));return{...e,annotations:o}}function tu(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return{...e,annotations:t?.annotations||[],styleModifications:t?.styleModifications||[],spacingTokenMods:t?.spacingTokenMods||[],undoStack:e.undoStack.slice(0,-1),redoStack:[...e.redoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]}}function nu(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return{...e,annotations:t?.annotations||[],styleModifications:t?.styleModifications||[],spacingTokenMods:t?.spacingTokenMods||[],redoStack:e.redoStack.slice(0,-1),undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]}}function ou(e,t){let{id:n,addToSelection:o}=t;if(n===null)return{...e,selectedAnnotationIds:[],lastSelectedId:null};if(o)if(e.selectedAnnotationIds.includes(n)){let i=e.selectedAnnotationIds.filter(a=>a!==n);return{...e,selectedAnnotationIds:i,lastSelectedId:i.length>0?i[i.length-1]:null}}else return{...e,selectedAnnotationIds:[...e.selectedAnnotationIds,n],lastSelectedId:n};return{...e,selectedAnnotationIds:[n],lastSelectedId:n}}function ru(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 iu(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),spacingTokenChanges:e.spacingTokenChanges.map(n=>({...n,captured:!0}))}}function su(e){return{...e,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]}}function au(e,t){return{...e,inspectedElement:t}}function lu(e,t){let{selector:n,element:o,property:r,original:i,modified:a}=t,s=typeof window<"u"?window.location.pathname:"/",l=e.styleModifications.findIndex(c=>c.selector===n&&(!c.pathname||c.pathname===s));if(i===a&&l<0)return e;if(l>=0){let c=e.styleModifications[l];if(c.captured){let v=On(e),C=v.styleModifications.map((x,I)=>I===l?{...x,changes:[{property:r,original:i,modified:a}],captured:!1,pathname:s}:x);return{...v,styleModifications:C}}let d=c.changes.findIndex(v=>v.property===r),u,p=e;if(d>=0){let v=c.changes[d];a===v.original?u=c.changes.filter((C,x)=>x!==d):u=c.changes.map((C,x)=>x===d?{...C,modified:a}:C)}else{if(i===a)return e;p=On(e),u=[...c.changes,{property:r,original:i,modified:a}]}if(u.length===0)return{...p,styleModifications:p.styleModifications.filter((v,C)=>C!==l)};let f=p.styleModifications.map((v,C)=>C===l?{...v,changes:u}:v);return{...p,styleModifications:f}}else{let c=On(e),d={selector:n,element:o,changes:[{property:r,original:i,modified:a}],pathname:s};return{...c,styleModifications:[...c.styleModifications,d]}}}function cu(e,t){let{selector:n,durableSelector:o,element:r,changes:i}=t,a=typeof window<"u"?window.location.pathname:"/",s=i.filter(d=>d.original!==d.modified);if(s.length===0)return e;let l=On(e),c=l.styleModifications.findIndex(d=>d.selector===n&&(!d.pathname||d.pathname===a));if(c>=0){let d=l.styleModifications[c],u=d.captured?[]:[...d.changes];for(let p of s){let f=u.findIndex(v=>v.property===p.property);f>=0?p.modified===u[f].original?u=u.filter((v,C)=>C!==f):u=u.map((v,C)=>C===f?{...v,modified:p.modified}:v):u.push(p)}return u.length===0?{...l,styleModifications:l.styleModifications.filter((p,f)=>f!==c)}:{...l,styleModifications:l.styleModifications.map((p,f)=>f===c?{...p,changes:u,captured:!1,pathname:a}:p)}}else return{...l,styleModifications:[...l.styleModifications,{selector:n,durableSelector:o,element:r,changes:s,pathname:a}]}}function du(e,t){let{selector:n,property:o}=t,r=typeof window<"u"?window.location.pathname:"/",i=On(e),a=i.styleModifications.map(s=>s.selector!==n||s.pathname&&s.pathname!==r?s:{...s,changes:s.changes.filter(l=>l.property!==o)}).filter(s=>s.changes.length>0);return{...i,styleModifications:a}}function uu(e){return e.styleModifications.length===0?{...e,inspectedElement:null}:{...On(e),styleModifications:[],inspectedElement:null}}function pu(e,t){return{...e,styleModifications:t}}function fu(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 gu(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 mu(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 hu(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 yu(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 bu(e,t){let{linkedSelectors:n,styleSelectors:o}=t,r=new Set(n),i=new Set(o),a=typeof window<"u"?window.location.pathname:"/",s=new Set,l=new Set;for(let f of e.annotations)f.linkedSelector&&r.has(f.linkedSelector)&&(s.add(f.id),f.groupId&&l.add(f.groupId));for(let f of e.annotations)f.groupId&&l.has(f.groupId)&&s.add(f.id);let c=e.annotations.filter(f=>!s.has(f.id)),d=e.styleModifications.filter(f=>!i.has(f.selector)||f.pathname&&f.pathname!==a);if(c.length===e.annotations.length&&d.length===e.styleModifications.length)return e;let u=e.selectedAnnotationIds.filter(f=>!s.has(f)),p=e.inspectedElement&&i.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return{...e,annotations:c,styleModifications:d,selectedAnnotationIds:u,lastSelectedId:u.length>0?u[u.length-1]:null,inspectedElement:p}}function vu(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 xu(e,t){return{...e,spacingTokenChanges:t}}function Su(e,t){let n=On(e),o=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),r;if(o>=0){let i=e.spacingTokenMods[o],a={...t,originalValue:i.originalValue,originalPx:i.originalPx};r=e.spacingTokenMods.map((s,l)=>l===o?a:s)}else r=[...e.spacingTokenMods,t];return{...n,spacingTokenMods:r}}function wu(e,t){let n=On(e),o=e.spacingTokenMods.findIndex(l=>l.tokenPath===t.tokenPath),r=o>=0?e.spacingTokenMods[o].originalValue:t.originalValue,i=o>=0?e.spacingTokenMods[o].originalPx:parseFloat(t.originalValue)||0,a={tokenPath:t.tokenPath,originalValue:r,currentValue:"__deleted__",targets:o>=0?e.spacingTokenMods[o].targets:[],originalPx:i,currentPx:0},s;return o>=0?s=e.spacingTokenMods.map((l,c)=>c===o?a:l):s=[...e.spacingTokenMods,a],{...n,spacingTokenMods:s}}var Cu={SET_ANNOTATING:zd,SET_TOOL:Fd,SET_COLOR:$d,SET_STROKE_WIDTH:Wd,START_PATH:jd,CONTINUE_PATH:Gd,CANCEL_PATH:Jd,FINISH_PATH:Vd,ADD_TEXT:Yd,UPDATE_TEXT:Ud,UPDATE_TEXT_SIZE:Kd,DELETE_ANNOTATION:Xd,MOVE_ANNOTATION:qd,RESIZE_ANNOTATION:Zd,PASTE_ANNOTATIONS:Qd,RESTORE_ANNOTATIONS:eu,UNDO:tu,REDO:nu,SELECT_ANNOTATION:ou,UPDATE_ANNOTATION_COLOR:ru,MARK_CAPTURED:iu,CLEAR:su,SELECT_ELEMENT:au,MODIFY_STYLE:lu,MODIFY_STYLES_BATCH:cu,CLEAR_STYLE:du,CLEAR_ALL_STYLES:uu,RESTORE_STYLE_MODIFICATIONS:pu,UPDATE_LINKED_POSITIONS:fu,CLEANUP_ORPHANED:bu,SET_ANNOTATION_STATUS:gu,SET_ANNOTATION_THREAD:mu,SET_ANNOTATION_QUESTION:hu,APPLY_RESOLUTIONS:yu,ADD_SPACING_TOKEN_CHANGE:vu,RESTORE_SPACING_TOKEN_CHANGES:xu,MODIFY_SPACING_TOKEN:Su,DELETE_SPACING_TOKEN:wu};function Eu(e,t){let n=Cu[t.type];return n?n(e,t.payload):e}function fl(){let[e,t]=Hd(Eu,Nd);return Od(()=>{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 ku}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 Tu(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function Iu(){return window.location.pathname}function Lr(){return ku(Tu,Iu,()=>"/")}var gl="popmelt-toolbar-snap-position";function dr(e){return e.startsWith("top-")}function ur(e){return e.endsWith("-right")}function ri(e){return e.endsWith("-center")}function ml(){try{let e=localStorage.getItem(gl);if(e&&Mu(e))return e}catch{}return"bottom-right"}function hl(e){try{localStorage.setItem(gl,e)}catch{}}function Mu(e){return["bottom-right","bottom-center","bottom-left","top-right","top-center","top-left"].includes(e)}function yl(e,t,n){let o=dr(e)?16:n-16-54;return ri(e)?{position:"fixed",top:o,left:t/2,transform:"translateX(-50%)"}:ur(e)?{position:"fixed",top:o,right:16,left:"auto"}:{position:"fixed",top:o,left:16,right:"auto"}}function bl(e,t,n){let r=dr(e)?{top:82}:{bottom:82},i;return ri(e)?i={left:t/2,transform:"translateX(-50%)"}:ur(e)?i={right:16}:i={left:16},{position:"fixed",...r,...i}}function vl(e,t,n){let o=dr(e),r=o?{top:78}:{bottom:78},i,a;return ri(e)?(i={left:"50%",transform:"translateX(-50%)"},a="center"):ur(e)?(i={right:16},a="flex-end"):(i={left:16},a="flex-start"),{position:"fixed",...r,...i,zIndex:9999,display:"flex",flexDirection:"column",alignItems:a}}function Li(e){let t=dr(e),n=ur(e)||ri(e);return{position:"fixed",top:t&&n?82:16,right:16,bottom:!t&&n?82:16}}function xl(e,t,n){let r=dr(e),i,a;ur(e)||ri(e)?(i=t-16,a=i-326):(a=16,i=a+326);let s=r?82:n-16-54-12;return{left:a,right:i,y:s}}var Sl=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"];function Pi(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 Ts(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 Bi(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 wl(e){if(e.id)return`#${e.id}`;let t=e.tagName.toLowerCase(),n=Array.from(e.classList).slice(0,3).join(".");return n?`${t}.${n}`:t}function Jn(e){if(e.id&&!e.id.startsWith("radix-")&&!e.id.startsWith(":"))return`#${CSS.escape(e.id)}`;let t=[],n=e;for(;n&&n!==document.documentElement;){let o=n.tagName.toLowerCase();if(n.id&&!n.id.startsWith("radix-")&&!n.id.startsWith(":")){t.unshift(`#${CSS.escape(n.id)}`);break}let r=Array.from(n.classList).filter(a=>!a.startsWith("_")&&a.length<30).slice(0,2);r.length>0&&(o+="."+r.map(a=>CSS.escape(a)).join("."));let i=n.parentElement;if(i){let a=Array.from(i.children).filter(s=>s.tagName===n.tagName);if(a.length>1){let s=a.indexOf(n)+1;o+=`:nth-of-type(${s})`}}t.unshift(o),n=i}return t.join(" > ")}function Tn(e){try{return document.querySelector(e)}catch{return null}}function Di(e,t=0){let n=Ts(e);if(n.length===0)return null;let o=n.map(l=>l.name),r=n.length-1,i=Math.max(0,Math.min(n.length-1,r-t)),a=n[i],s=Bi(a.fiber)??e;return{name:a.name,path:o,depthIndex:i,rootElement:s}}function Cl(e,t){let n=Ts(e),o=t.toLowerCase(),r=-1;for(let i=n.length-1;i>=0;i--){let a=n[i].name;if(a===t){let s=Bi(n[i].fiber)??e;return{name:t,path:n.map(l=>l.name),depthIndex:i,rootElement:s}}if(r===-1){let s=a.toLowerCase();(s.length>=4&&o.includes(s)||o.length>=4&&s.includes(o))&&(r=i)}}if(r>=0){let i=Bi(n[r].fiber)??e;return{name:t,path:n.map(a=>a.name),depthIndex:r,rootElement:i}}return null}function Pr(e){let t=Br(),n=[],o=new Set,r=t.currentNode;for(;r=t.nextNode();){let i=Cl(r,e);i&&!o.has(i.rootElement)&&(o.add(i.rootElement),n.push(i))}return n}function Is(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),o=Br(),r=new Set,i=o.currentNode;for(;(i=o.nextNode())&&n.size>0;)for(let a of n){let s=Cl(i,a);if(!s||r.has(s.rootElement))continue;r.add(s.rootElement);let l=s.rootElement.getBoundingClientRect();t.set(a,l.top+window.scrollY),n.delete(a);break}for(let a of n)t.set(a,1/0);return t}function Br(){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:wl(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=El(e);n&&n.length>0&&n.length<200&&(t.textContent=n);let o={};for(let a of e.attributes)a.name.startsWith("data-")&&(o[a.name]=a.value);Object.keys(o).length>0&&(t.dataAttributes=o);let r=Pi(e);r&&(t.reactComponent=r.name);let i=Ru(e);return i&&(t.context=i),t}function El(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function pr(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 Ru(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 kl(e){let t=new Set,n=[],o=window.scrollX,r=window.scrollY,i=[{x:(e.minX+e.maxX)/2,y:(e.minY+e.maxY)/2},{x:e.minX,y:e.minY},{x:e.maxX,y:e.minY},{x:e.minX,y:e.maxY},{x:e.maxX,y:e.maxY}];for(let a of i){let s=a.x-o,l=a.y-r;if(s<0||l<0||s>window.innerWidth||l>window.innerHeight)continue;let c=pr(s,l);c&&!t.has(c)&&(t.add(c),n.push(Hn(c)))}return n.slice(0,3)}function Ms(e){if(e.length===0)return[];let t=e.map(o=>o.x),n=e.map(o=>o.y);return kl({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function dn(e,t){return e.style.getPropertyValue(t)!==""}function Au(e,t=30){if(e<=0)return[];let n=[],o=Br(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let a=i,s=a.getBoundingClientRect();if(s.bottom<-50||s.top>window.innerHeight+50||s.right<-50||s.left>window.innerWidth+50||s.width<1||s.height<1)continue;let l=getComputedStyle(a);!dn(a,"padding-top")&&Math.abs((parseFloat(l.paddingTop)||0)-e)<r&&n.push({element:a,property:"padding-top"}),!dn(a,"padding-bottom")&&Math.abs((parseFloat(l.paddingBottom)||0)-e)<r&&n.length<t&&n.push({element:a,property:"padding-bottom"}),!dn(a,"padding-left")&&Math.abs((parseFloat(l.paddingLeft)||0)-e)<r&&n.length<t&&n.push({element:a,property:"padding-left"}),!dn(a,"padding-right")&&Math.abs((parseFloat(l.paddingRight)||0)-e)<r&&n.length<t&&n.push({element:a,property:"padding-right"}),!dn(a,"margin-top")&&Math.abs((parseFloat(l.marginTop)||0)-e)<r&&n.length<t&&n.push({element:a,property:"margin-top"}),!dn(a,"margin-bottom")&&Math.abs((parseFloat(l.marginBottom)||0)-e)<r&&n.length<t&&n.push({element:a,property:"margin-bottom"}),!dn(a,"margin-left")&&Math.abs((parseFloat(l.marginLeft)||0)-e)<r&&n.length<t&&n.push({element:a,property:"margin-left"}),!dn(a,"margin-right")&&Math.abs((parseFloat(l.marginRight)||0)-e)<r&&n.length<t&&n.push({element:a,property:"margin-right"});let c=l.display;if((c.includes("flex")||c.includes("grid"))&&n.length<t){let d=dn(a,"gap"),u=parseFloat(l.gap)||0,p=parseFloat(l.rowGap)||0,f=parseFloat(l.columnGap)||0;!d&&Math.abs(u-e)<r?n.push({element:a,property:"gap"}):!dn(a,"row-gap")&&Math.abs(p-e)<r?n.push({element:a,property:"row-gap"}):!dn(a,"column-gap")&&Math.abs(f-e)<r&&n.push({element:a,property:"column-gap"})}}return n}function Rs(e,t=30){if(e<=0)return[];let n=[],o=Br(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let a=i,s=a.getBoundingClientRect();if(s.bottom<-50||s.top>window.innerHeight+50||s.right<-50||s.left>window.innerWidth+50||s.width<1||s.height<1)continue;let l=getComputedStyle(a),c=parseFloat(l.borderTopWidth)||0,d=parseFloat(l.borderRightWidth)||0,u=parseFloat(l.borderBottomWidth)||0,p=parseFloat(l.borderLeftWidth)||0,f=a.clientWidth,v=a.clientHeight,C=parseFloat(l.paddingTop)||0;!dn(a,"padding-top")&&Math.abs(C-e)<r&&n.push({x:s.left+p,y:s.top+c,width:f,height:e,direction:"vertical",property:"padding-top"});let x=parseFloat(l.paddingBottom)||0;!dn(a,"padding-bottom")&&Math.abs(x-e)<r&&n.length<t&&n.push({x:s.left+p,y:s.top+c+v-e,width:f,height:e,direction:"vertical",property:"padding-bottom"});let I=parseFloat(l.paddingLeft)||0;!dn(a,"padding-left")&&Math.abs(I-e)<r&&n.length<t&&n.push({x:s.left+p,y:s.top+c,width:e,height:v,direction:"horizontal",property:"padding-left"});let B=parseFloat(l.paddingRight)||0;!dn(a,"padding-right")&&Math.abs(B-e)<r&&n.length<t&&n.push({x:s.left+p+f-e,y:s.top+c,width:e,height:v,direction:"horizontal",property:"padding-right"});let T=parseFloat(l.marginTop)||0;!dn(a,"margin-top")&&Math.abs(T-e)<r&&n.length<t&&n.push({x:s.left,y:s.top-e,width:s.width,height:e,direction:"vertical",property:"margin-top"});let R=parseFloat(l.marginBottom)||0;!dn(a,"margin-bottom")&&Math.abs(R-e)<r&&n.length<t&&n.push({x:s.left,y:s.bottom,width:s.width,height:e,direction:"vertical",property:"margin-bottom"});let w=parseFloat(l.marginLeft)||0;!dn(a,"margin-left")&&Math.abs(w-e)<r&&n.length<t&&n.push({x:s.left-e,y:s.top,width:e,height:s.height,direction:"horizontal",property:"margin-left"});let z=parseFloat(l.marginRight)||0;!dn(a,"margin-right")&&Math.abs(z-e)<r&&n.length<t&&n.push({x:s.right,y:s.top,width:e,height:s.height,direction:"horizontal",property:"margin-right"});let X=l.display;if((X.includes("flex")||X.includes("grid"))&&n.length<t&&!dn(a,"gap")){let E=Array.from(a.children).filter(L=>{let g=getComputedStyle(L);return g.display!=="none"&&g.position!=="absolute"&&g.position!=="fixed"});if(E.length>=2)for(let L=0;L<E.length-1&&n.length<t;L++){let g=E[L].getBoundingClientRect(),m=E[L+1].getBoundingClientRect(),$=m.top-g.bottom;Math.abs($-e)<r&&$>.5&&n.push({x:Math.min(g.left,m.left),y:g.bottom,width:Math.max(g.right,m.right)-Math.min(g.left,m.left),height:$,direction:"vertical",property:"gap"});let ge=m.left-g.right;Math.abs(ge-e)<r&&ge>.5&&n.push({x:g.right,y:Math.min(g.top,m.top),width:ge,height:Math.max(g.bottom,m.bottom)-Math.min(g.top,m.top),direction:"horizontal",property:"gap"})}}}return n}function _i(e){return typeof e=="string"?{value:e}:e}var Il={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 Tl(e,t){let n=Il[t];return n?n.includes(e):!1}function Lu(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 Pu(e){let t=e.lastIndexOf(":"),n=t>=0?e.slice(t+1):e,o=n.indexOf("-");if(o<0)return null;let r=n.slice(0,o),i={gap:"gap","gap-x":"column-gap","gap-y":"row-gap",p:"padding",pt:"padding-top",pb:"padding-bottom",pl:"padding-left",pr:"padding-right",px:"padding-left",py:"padding-top",m:"margin",mt:"margin-top",mb:"margin-bottom",ml:"margin-left",mr:"margin-right",mx:"margin-left",my:"margin-top"},a=n.slice(0,n.indexOf("-",o+1)>0?n.indexOf("-",o+1):o);return i[a]??i[r]??null}function As(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let r=[],i=Br(),a=i.currentNode;for(;(a=i.nextNode())&&r.length<t;){let s=a,l=s.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let c=s.className;if(typeof c=="string")for(let d of e.bindings){if(!Lu(c,d))continue;let u=Pu(d);if(u&&!(e.property&&!Tl(u,e.property))){r.push({element:s,property:u});break}}}return r}let o=Au(n,t*2);return e.property?o.filter(r=>Tl(r.property,e.property)).slice(0,t):o.slice(0,t)}function Ls(e,t=30){let n=As(e,t),o=[];for(let r of n){let i=r.element,a=i.getBoundingClientRect(),s=getComputedStyle(i),l=parseFloat(s.borderTopWidth)||0,c=parseFloat(s.borderRightWidth)||0,d=parseFloat(s.borderLeftWidth)||0,u=i.clientWidth,p=i.clientHeight;switch(r.property){case"padding-top":{let f=parseFloat(s.paddingTop)||0;o.push({x:a.left+d,y:a.top+l,width:u,height:f,direction:"vertical",property:r.property});break}case"padding-bottom":{let f=parseFloat(s.paddingBottom)||0;o.push({x:a.left+d,y:a.top+l+p-f,width:u,height:f,direction:"vertical",property:r.property});break}case"padding-left":{let f=parseFloat(s.paddingLeft)||0;o.push({x:a.left+d,y:a.top+l,width:f,height:p,direction:"horizontal",property:r.property});break}case"padding-right":{let f=parseFloat(s.paddingRight)||0;o.push({x:a.left+d+u-f,y:a.top+l,width:f,height:p,direction:"horizontal",property:r.property});break}case"margin-top":{let f=parseFloat(s.marginTop)||0;o.push({x:a.left,y:a.top-f,width:a.width,height:f,direction:"vertical",property:r.property});break}case"margin-bottom":{let f=parseFloat(s.marginBottom)||0;o.push({x:a.left,y:a.bottom,width:a.width,height:f,direction:"vertical",property:r.property});break}case"margin-left":{let f=parseFloat(s.marginLeft)||0;o.push({x:a.left-f,y:a.top,width:f,height:a.height,direction:"horizontal",property:r.property});break}case"margin-right":{let f=parseFloat(s.marginRight)||0;o.push({x:a.right,y:a.top,width:f,height:a.height,direction:"horizontal",property:r.property});break}case"gap":case"row-gap":case"column-gap":{let f=Array.from(i.children).filter(v=>{let C=getComputedStyle(v);return C.display!=="none"&&C.position!=="absolute"&&C.position!=="fixed"});for(let v=0;v<f.length-1&&o.length<t;v++){let C=f[v].getBoundingClientRect(),x=f[v+1].getBoundingClientRect(),I=x.top-C.bottom;I>.5&&o.push({x:Math.min(C.left,x.left),y:C.bottom,width:Math.max(C.right,x.right)-Math.min(C.left,x.left),height:I,direction:"vertical",property:"gap"});let B=x.left-C.right;B>.5&&o.push({x:C.right,y:Math.min(C.top,x.top),width:B,height:Math.max(C.bottom,x.bottom)-Math.min(C.top,x.top),direction:"horizontal",property:"gap"})}break}}}return o}function Ml(e,t){let n=new Set,o=ii(t);for(let r of e){let i=Al[r.property];if(!i)continue;let a=r.element.className;if(typeof a=="string")for(let s of i){let l=`${s}-${o}`;for(let c of a.split(/\s+/)){let d=c.lastIndexOf(":"),u=d>=0?c.slice(d+1):c;if(u===l){n.add(u);break}}}}return[...n]}function Rl(e){let t=new Set;for(let n of e)for(let[o,r]of Object.entries(Il))if(r.includes(n.property)){t.add(o);break}if(t.size===1)return[...t][0]}function Ps(e,t,n){if(t===n)return e;let o=ii(t),r=ii(n);return e.map(i=>{let a=i.lastIndexOf("-");if(a<0)return i;let s=i.slice(0,a),l=i.slice(a+1);return l===o||l===`[${t}px]`?`${s}-${r}`:i})}var Bu={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 ii(e){return Bu[e]??`[${e}px]`}var Al={"padding-top":["pt","py","p"],"padding-bottom":["pb","py","p"],"padding-left":["pl","px","p"],"padding-right":["pr","px","p"],"margin-top":["mt","my","m"],"margin-bottom":["mb","my","m"],"margin-left":["ml","mx","m"],"margin-right":["mr","mx","m"],gap:["gap"],"row-gap":["gap-y","gap"],"column-gap":["gap-x","gap"]};function Du(e,t,n,o){let r=Al[t];if(!r)return null;let i=ii(n);for(let a of r){let s=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+a+"-(?:"+_u(i)+"|\\["+n+"px\\]))(?:\\s|$)"),l=e.match(s);if(l?.[1]){let c=ii(o),d=l[1].lastIndexOf(":"),u=d>=0?l[1].slice(0,d+1):"";return{matched:l[1],suggested:`${u}${a}-${c}`}}}return null}function _u(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function Ll(e,t,n){let o=new Set,r=[];for(let i of e){let a=Jn(i.element),s=`${a}::${i.property}`;if(o.has(s))continue;o.add(s);let l=Pi(i.element),c=i.element.className||"",d=Du(c,i.property,t,n);r.push({selector:a,reactComponent:l?.name,className:c,property:i.property,matchedClass:d?.matched,suggestedClass:d?.suggested})}return r}function Oi(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function Hi(e,t){if(e instanceof HTMLElement){let o=e.style.getPropertyValue(t);if(o)return o}let n=t.replace(/-([a-z])/g,(o,r)=>r.toUpperCase());try{for(let o of document.styleSheets)try{let r=o.cssRules||o.rules;for(let i of r)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let a=i.style.getPropertyValue(t);if(a)return a;let s=i.style[n];if(s)return s}}catch{}}catch{}return null}function Ni(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function fr(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function Ou(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 Ho(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,a=i==="column"||i==="column-reverse",s=6;for(let l=0;l<t.length-1;l++){let c=t[l].getBoundingClientRect(),d=t[l+1].getBoundingClientRect();if(d.left>c.right+.5&&n.push({axis:"column",x:c.right,y:o.top,w:d.left-c.right,h:o.height}),d.top>c.bottom+.5&&n.push({axis:"row",x:o.left,y:c.bottom,w:o.width,h:d.top-c.bottom}),!(d.left>c.right+.5)&&!(d.top>c.bottom+.5))if(a){let u=(c.bottom+d.top)/2;n.push({axis:"row",x:o.left,y:u-s/2,w:o.width,h:s})}else{let u=(c.right+d.left)/2;n.push({axis:"column",x:u-s/2,y:o.top,w:s,h:o.height})}}return Ou(n)}function Bs(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 Dr(e){let t=window.getComputedStyle(e);return{top:parseFloat(t.paddingTop)||0,right:parseFloat(t.paddingRight)||0,bottom:parseFloat(t.paddingBottom)||0,left:parseFloat(t.paddingLeft)||0}}function 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 Ds(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function _r(e){let t=document.createRange(),n=!1;for(let d of e.childNodes)d.nodeType===Node.TEXT_NODE&&(d.textContent||"").trim().length>0&&(n||(t.setStart(d,0),n=!0),t.setEnd(d,d.textContent?.length??0));if(!n)return null;let o=t.getBoundingClientRect(),r=window.getComputedStyle(e),i=parseFloat(r.fontSize)||16,a=parseFloat(r.lineHeight);isNaN(a)&&(a=i*1.2);let s=Math.max(1,t.getClientRects().length),l=Math.max(o.height,s*a),c=(l-o.height)/2;return new DOMRect(o.x,o.y-c,o.width,l)}function si(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 tt(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function Pl(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function zi(e){for(let t of e){let n=Tn(t.selector);if(!n&&t.durableSelector&&(n=Tn(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)tt(n,o.property,o.modified)}}function Fi(e){for(let t of e){let n=Tn(t.selector);if(n)for(let o of t.changes)Pl(n,o.property,o.original)}}function Dl(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){Dl(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Hu(r.style,t,n,o)}}}function Hu(e,t,n,o){for(let r=0;r<e.length;r++){let i=e[r];if(i?.startsWith("--")){if(n.has(i))continue;n.add(i);let a=t.getPropertyValue(i).trim();_l(a)&&o.push({name:i,value:a,usage:`var(${i})`})}}}var $i=null,Nu=5e3;function _s(){if($i&&Date.now()-$i.timestamp<Nu)return $i.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{Dl(i.cssRules||i.rules,n,t,e)}catch{}}catch{}let o=document.documentElement.style;for(let i=0;i<o.length;i++){let a=o[i];if(a?.startsWith("--")&&!t.has(a)){t.add(a);let s=n.getPropertyValue(a).trim();_l(s)&&e.push({name:a,value:s,usage:`var(${a})`})}}let r=e.sort((i,a)=>i.name.localeCompare(a.name));return $i={variables:r,timestamp:Date.now()},r}function _l(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 Or(e,t){let n=t.match(/var\((--[^,)]+)(?:,\s*([^)]+))?\)/);if(n){let o=n[1],r=n[2];return getComputedStyle(document.documentElement).getPropertyValue(o).trim()||r||t}return t}function ai(e,t){if(!e)return null;let n=Bl(e);if(!n)return null;for(let o of t){let r=Bl(o.value);if(r&&n===r)return o}return null}function Bl(e){if(!e)return null;let t=e.trim().toLowerCase();if(t.startsWith("oklch(")){let n=t.match(/oklch\(\s*([\d.]+%?)\s+([\d.]+%?)\s+([\d.]+)/);if(n){let o=n[1].endsWith("%")?parseFloat(n[1])/100:parseFloat(n[1]),r=n[2].endsWith("%")?parseFloat(n[2])/100:parseFloat(n[2]),i=parseFloat(n[3]);o=Math.round(o*100)/100,r=Math.round(r*1e3)/1e3;let a=Math.round(i);return`oklch(${o} ${r} ${a})`}}if(t.startsWith("rgb")){let n=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(n)return`rgb(${n[1]},${n[2]},${n[3]})`}return t.startsWith("#")?t.length===4?`#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`:t.slice(0,7):t}import{domToCanvas as zu}from"modern-screenshot";var Ol="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";function Fu(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 Os(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function Hs(e,t=[],n,o){let r=new Map,i=[];for(let s of e)if(s.groupId){let l=r.get(s.groupId)||[];l.push(s),r.set(s.groupId,l)}else i.push(s);let a=[];for(let[s,l]of r){let c=l.find(u=>u.type!=="text"),d=l.find(u=>u.type==="text");if(c){let u=c.linkedSelector||d?.linkedSelector,p=d?.imageCount||c.imageCount,f=c.pathname||d?.pathname;a.push({id:c.id,type:c.type,instruction:d?.text,...u?{linkedSelector:u}:{},...f?{pathname:f}:{},elements:c.elements||[],...p?{imageCount:p}:{}})}}for(let s of i)a.push({id:s.id,type:s.type,instruction:s.type==="text"?s.text:void 0,...s.linkedSelector?{linkedSelector:s.linkedSelector}:{},...s.pathname?{pathname:s.pathname}:{},elements:s.elements||[],...s.imageCount?{imageCount:s.imageCount}:{}});return{timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:a,styleModifications:t,...n?{inspectedElement:n}:{},...o&&o.length>0?{spacingTokenChanges:o}:{}}}function $u(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 Wu(e,t){if(e.length===0)return[];let n=e.map(d=>({annotation:d,bounds:$u(d)})).filter(d=>d.bounds!==null);if(n.length===0)return[];n.sort((d,u)=>d.bounds.minY-u.bounds.minY);let o=Math.min(...n.map(d=>d.bounds.minY)),r=Math.max(...n.map(d=>d.bounds.maxY));if(r-o<=t){let d=(o+r)/2,u=Math.max(0,d-t/2);return[{top:u,bottom:u+t,annotations:e}]}let i=[],a=50,s=Math.max(0,o-a),l=[],c=s;for(let{annotation:d,bounds:u}of n){let p=u.maxY+a;if(p-s<=t)l.push(d),c=Math.max(c,p);else{if(l.length>0){let f=(s+c)/2,v=Math.max(0,f-t/2);i.push({top:v,bottom:v+t,annotations:l})}s=Math.max(0,u.minY-a),l=[d],c=u.maxY+a}}if(l.length>0){let d=(s+c)/2,u=Math.max(0,d-t/2);i.push({top:u,bottom:u+t,annotations:l})}return i}function ju(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 Gu(e,t,n,o,r){if(e.save(),e.scale(o,o),r)for(let i of t){let a=r.get(i.id);if(!a)continue;let s=a.y-n;e.fillStyle=i.color,e.globalAlpha=.05,e.fillRect(a.x,s,a.width,a.height),e.globalAlpha=1,e.strokeStyle=i.color,e.lineWidth=1,e.setLineDash([2,4]),e.strokeRect(a.x,s,a.width,a.height),e.setLineDash([])}for(let i of t){let a=i.points.map(s=>({x:s.x,y:s.y-n}));switch(e.strokeStyle=i.color,e.fillStyle=i.color,e.lineWidth=i.strokeWidth,e.lineCap="round",e.lineJoin="round",i.type){case"freehand":if(a.length<2)break;e.beginPath(),e.moveTo(a[0].x,a[0].y);for(let s=1;s<a.length;s++)e.lineTo(a[s].x,a[s].y);e.stroke();break;case"line":if(a.length<2)break;e.beginPath(),e.moveTo(a[0].x,a[0].y),e.lineTo(a[a.length-1].x,a[a.length-1].y),e.stroke();break;case"rectangle":{if(a.length<2)break;let s=a[0],l=a[a.length-1],c=Math.min(s.x,l.x),d=Math.min(s.y,l.y),u=Math.abs(l.x-s.x),p=Math.abs(l.y-s.y);e.strokeRect(c,d,u,p);break}case"circle":{if(a.length<2)break;let s=a[0],l=a[a.length-1],c=(s.x+l.x)/2,d=(s.y+l.y)/2,u=Math.abs(l.x-s.x)/2,p=Math.abs(l.y-s.y)/2;e.beginPath(),e.ellipse(c,d,u,p,0,0,Math.PI*2),e.stroke();break}case"text":{if(!i.text||a.length<1)break;let s=a[0],l=i.fontSize||16;e.font=`${l}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=i.color;let d=(i.imageCount&&i.imageCount>0?`[${i.imageCount} image${i.imageCount>1?"s":""}] ${i.text}`:i.text).split(`
|
|
3
|
-
`),u=l*1.2,p=4,f=0;for(let v of d)f=Math.max(f,e.measureText(v).width);e.fillRect(s.x-p,s.y-p,f+p*2,d.length*u+p*2),e.fillStyle="#ffffff",d.forEach((v,C)=>{e.fillText(v,s.x,s.y+l+C*u)});break}}}e.restore()}async function Hr(e,t,n=[],o){try{let r=o?.dpr??(window.devicePixelRatio||1),i=window.innerWidth,a=window.innerHeight,s=n.filter(u=>(u.status??"pending")==="pending");console.log("[Screenshot] Starting capture with",s.length,"active annotations (filtered",n.length-s.length,"captured)");let l=ju(s),c=Wu(s,a);if(c.length===0){let u=await Hl(e,[],window.scrollY,i,a,r,l);return u?[u]:[]}let d=[];for(let u=0;u<c.length;u++){let p=c[u],f=await Hl(e,p.annotations,p.top,i,a,r,l);f?d.push(f):console.warn(`[Screenshot] Region ${u+1} failed to capture`)}return console.log("[Screenshot] Capture complete"),d}catch(r){return console.error("[Screenshot] Capture failed:",r),[]}}async function Hl(e,t,n,o,r,i,a){try{let s=getComputedStyle(document.documentElement).backgroundColor,c=await zu(e,{filter:p=>!(p instanceof HTMLElement&&(p.id==="devtools-canvas"||p.id==="devtools-toolbar"||p.id==="devtools-scrim"||p.dataset.devtools!==void 0)),scale:i,backgroundColor:s&&s!=="rgba(0, 0, 0, 0)"&&s!=="transparent"?s:"#ffffff",width:o,height:r,style:{transform:`translate(${-window.scrollX}px, ${-n}px)`},fetchFn:async p=>Fu(p)?Ol:!1,fetch:{placeholderImage:Ol}}),d=document.createElement("canvas");d.width=o*i,d.height=r*i;let u=d.getContext("2d");return u?(u.drawImage(c,0,0,o*i,r*i,0,0,o*i,r*i),Gu(u,t,n,i,a),new Promise(p=>{d.toBlob(f=>p(f),"image/webp",.8)})):null}catch(s){return console.error("Region capture failed:",s),null}}async function li(e){if(e.length===0)return null;if(e.length===1)return e[0];let t=await Promise.all(e.map(s=>new Promise((l,c)=>{let d=new Image;d.onload=()=>l(d),d.onerror=c,d.src=URL.createObjectURL(s)}))),n=t[0].width,o=t.reduce((s,l)=>s+l.height,0),r=document.createElement("canvas");r.width=n,r.height=o;let i=r.getContext("2d");if(!i)return null;let a=0;for(let s of t)i.drawImage(s,0,a),a+=s.height,URL.revokeObjectURL(s.src);return new Promise(s=>{r.toBlob(l=>s(l),"image/webp",.8)})}async function Nl(e,t,n){try{let o=Array.isArray(e)?e:[e];if(o.length===0)return!1;let r=await li(o);if(!r)return!1;let i=r;if(r.type!=="image/png"){let c=new Image,d=URL.createObjectURL(r);await new Promise(p=>{c.onload=()=>p(),c.src=d}),URL.revokeObjectURL(d);let u=document.createElement("canvas");u.width=c.naturalWidth,u.height=c.naturalHeight,u.getContext("2d").drawImage(c,0,0),i=await new Promise(p=>u.toBlob(f=>p(f),"image/png"))}let a={"image/png":i},s=t&&t.length>0,l=n&&n.length>0;if(s||l){let c=t?t.filter(d=>(d.status??"pending")==="pending"):[];if(c.length>0||l){let d=Hs(c,n||[]),u=new Blob([JSON.stringify(d,null,2)],{type:"text/plain"});a["text/plain"]=u}}return await navigator.clipboard.write([new ClipboardItem(a)]),!0}catch(o){return console.warn("Clipboard write failed:",o),!1}}var zl={name:"@popmelt.com/core",version:"0.8.1",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":">=0.400.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":"^0.487.0",prettier:"^3.5.3",react:"19.1.0","react-dom":"19.1.0",tsup:"^8.5.1",typescript:"^5.8.3"}};var Wi=zl.version;import{useCallback as sn,useEffect as In,useMemo as Yr,useRef as Jt,useState as St}from"react";import{useCallback as Nr,useRef as Uu}from"react";function Ns(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let a=(r.x+i.x)/2,s=(r.y+i.y)/2,l=Math.abs(i.x-r.x)/2,c=Math.abs(i.y-r.y)/2;e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.ellipse(a,s,l,c,0,0,Math.PI*2),e.stroke()}function zs(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!(!r||!i)){e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.moveTo(r.x,r.y);for(let a=1;a<t.length-1;a++){let s=t[a],l=t[a+1];if(!s||!l)continue;let c=(s.x+l.x)/2,d=(s.y+l.y)/2;e.quadraticCurveTo(s.x,s.y,c,d)}e.lineTo(i.x,i.y),e.stroke()}}function Fs(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 $s(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let a=Math.min(r.x,i.x),s=Math.min(r.y,i.y),l=Math.abs(i.x-r.x),c=Math.abs(i.y-r.y);e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.strokeRect(a,s,l,c)}var un='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function Vu(e,t,n){if(!t||e.measureText(t).width<=n)return[t];let o=t.split(/\s+/),r=[],i="";for(let a of o){let s=i?i+" "+a:a;i&&e.measureText(s).width>n?(r.push(i),i=a):i=s}return i&&r.push(i),r.length>0?r:[t]}function ci(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function Fl(e,t,n){let o=[];for(let r of t)o.push(...Vu(e,r,n));return o}function di(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 Yu(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 Ws(e,t,n,o,r){let i=typeof window<"u"?window.innerHeight:9999,a=0,s=i;n&&Yu(o,r,n)&&(a=n.avoidTop??a,s=n.avoidBottom??s);let l=Math.max(a,s-t);return Math.max(a,Math.min(e,l))}function js(e,t=12,n,o){let r=t*1.4+8,i=e.y-4,a=e.x-4,s=Ws(i,r,n,a,o);return s===i?e:{...e,y:s+4}}function $l(e,t,n,o,r=12,i,a,s){if(!n)return;let l=r*1.4,c=n.replace(/\n/g," "),d=i!==void 0?i+". "+c:c;e.font=`${r}px ${un}`,e.textBaseline="middle";let u=a!==void 0?Math.min(400,Math.max(60,window.innerWidth-a-16)):400,p=di(e,d,u),f=e.measureText(p).width,v=js(t,r,s,f+8);e.fillStyle=o,e.fillRect(v.x-4,v.y-4,f+8,l+8),e.fillStyle="#ffffff",e.fillText(p,v.x,v.y+l/2)}var Wl=11,Gs=4,Ku=`600 ${Wl}px system-ui, -apple-system, sans-serif`;function Js(e,t,n){return e.map(o=>({x:o.x-t,y:o.y-n}))}function Xu(e,t,n,o,r,i){let a=String(o);e.font=Ku;let l=e.measureText(a).width+Gs*2,c=Wl+Gs*2,d=t-l/2,u=n+i/2+2;e.fillStyle=r,e.fillRect(d,u,l,c),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(a,d+Gs,u+c/2)}function qu(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 jl(){let e=Uu(null),t=Nr(()=>{let s=e.current;if(!s)return;let l=s.getContext("2d");l&&l.clearRect(0,0,s.width,s.height)},[]),n=Nr((s,l,c,d)=>{let u=e.current;if(!u)return;let p=u.getContext("2d");if(!p)return;let v=(s.status??(s.captured?"in_flight":"pending"))==="pending"||c?s.color:"#999999";switch(s.type){case"freehand":zs(p,s.points,v,s.strokeWidth);break;case"line":Fs(p,s.points,v,s.strokeWidth);break;case"rectangle":$s(p,s.points,v,s.strokeWidth);break;case"circle":Ns(p,s.points,v,s.strokeWidth);break;case"text":s.text&&s.points[0]&&$l(p,s.points[0],s.text,v,s.fontSize,l,s.points[0].x,d);break}},[]),o=Nr((s,l,c,d)=>{let u=e.current;if(!u||s.length<2)return;let p=u.getContext("2d");if(p)switch(l){case"freehand":zs(p,s,c,d);break;case"line":Fs(p,s,c,d);break;case"rectangle":$s(p,s,c,d);break;case"circle":Ns(p,s,c,d);break}},[]),r=Nr((s,l)=>{let c=e.current;if(!c||s.points.length<2)return;let d=c.getContext("2d");if(d){if(d.fillStyle="#ffffff",d.strokeStyle=s.color,d.lineWidth=1.5,s.type==="line"){let u=s.points[0],p=s.points[s.points.length-1];[u,p].forEach(f=>{d.beginPath(),d.arc(f.x,f.y,l/2,0,Math.PI*2),d.fill(),d.stroke()});return}if(s.type==="circle"){let u=s.points[0],p=s.points[s.points.length-1],f=Math.min(u.x,p.x),v=Math.max(u.x,p.x),C=Math.min(u.y,p.y),x=Math.max(u.y,p.y),I=(f+v)/2,B=(C+x)/2;[{x:I,y:C},{x:I,y:x},{x:f,y:B},{x:v,y:B}].forEach(R=>{d.beginPath(),d.rect(R.x-l/2,R.y-l/2,l,l),d.fill(),d.stroke()});return}if(s.type==="rectangle"||s.type==="freehand"){let u,p,f,v;if(s.type==="freehand")u=Math.min(...s.points.map(x=>x.x)),p=Math.max(...s.points.map(x=>x.x)),f=Math.min(...s.points.map(x=>x.y)),v=Math.max(...s.points.map(x=>x.y));else{let x=s.points[0],I=s.points[s.points.length-1];u=Math.min(x.x,I.x),p=Math.max(x.x,I.x),f=Math.min(x.y,I.y),v=Math.max(x.y,I.y)}[{x:u,y:f},{x:p,y:f},{x:u,y:v},{x:p,y:v}].forEach(x=>{d.beginPath(),d.rect(x.x-l/2,x.y-l/2,l,l),d.fill(),d.stroke()})}}},[]),i=Nr((s,l,c,d,u,p,f,v=0,C=0,x,I,B)=>{if(t(),s.forEach(T=>{let R={...T,points:Js(T.points,v,C)},w=x?.get(T.id),z=I?.has(T.id)??!1;n(R,w,z,B)}),l.length>0){let T=Js(l,v,C);o(T,c,d,u)}if(p&&p.length>0&&f){let R=e.current?.getContext("2d");for(let w of p){let z=s.find(X=>X.id===w);if(z){let X={...z,points:Js(z.points,v,C)};if(r(X,f),R&&z.type!=="text"&&x&&!(z.groupId&&s.some(E=>E.groupId===z.groupId&&E.type==="text"))){let E=x.get(z.id);if(E!==void 0){let L=qu(X,f);if(L){let m=(z.status??(z.captured?"in_flight":"pending"))==="pending"?z.color:"#999999";Xu(R,L.x,L.y,E,m,f)}}}}}}},[t,n,o,r]),a=Nr(()=>{let s=e.current;if(!s)return;let l=window.devicePixelRatio||1;s.width=window.innerWidth*l,s.height=window.innerHeight*l;let c=s.getContext("2d");c&&c.scale(l,l)},[]);return{canvasRef:e,clearCanvas:t,drawAnnotation:n,drawCurrentPath:o,redrawAll:i,resizeCanvas:a}}import{useEffect as Zu,useRef as Qu}from"react";function Gl(){let e=Qu({shift:!1,cmd:!1});return Zu(()=>{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 ep}from"react";function Jl(e,t,n,o,r){ep(()=>{let i=a=>{if(e){if(e.linkedSelector)return;a.preventDefault(),a.stopPropagation();let l=a.deltaY>0?-2:2;t(c=>c?{...c,fontSize:Math.max(12,Math.min(72,c.fontSize+l))}:null);return}if(!n)return;a.preventDefault();let s=o.find(l=>l.id===n);if(s&&s.type==="text"&&!s.linkedSelector){let l=s.fontSize||12,c=a.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 Ys,useRef as tp,useState as Us}from"react";import{Fragment as ui,jsx as Xt,jsxs as Fr}from"react/jsx-runtime";var Zo=22,pi=12,zr=8,np=3,op=250,ji=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],rp=3e3;function ip(e){let t=e?.current?.getBoundingClientRect();return!t||typeof window>"u"?{}:t.top<window.innerHeight/2?{avoidTop:t.bottom+zr,avoidLeft:t.left-zr,avoidRight:t.right+zr}:{avoidBottom:t.top-zr,avoidLeft:t.left-zr,avoidRight:t.right+zr}}function sp(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 Vs(e,t,n){return sp(t,n,e)?e:{}}function ap(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 Vl(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,a=Math.max(r,i-t);return Math.max(r,Math.min(e,a))}function lp({left:e,top:t,scrollX:n,scrollY:o,avoidTop:r,avoidBottom:i,style:a,children:s,...l}){let c=`calc(${e}px - var(--popmelt-scroll-x, ${n}px))`,d=`calc(${t}px - var(--popmelt-scroll-y, ${o}px))`,u=`calc(${e+pi}px - var(--popmelt-scroll-x, ${n}px))`,p=`calc(${t+pi}px - var(--popmelt-scroll-y, ${o}px))`;return Xt("div",{"data-devtools":"badge-hit-area",...l,style:{position:"fixed",left:0,top:0,padding:pi,...a,transform:`translate3d(${c}, ${d}, 0)`,willChange:"transform"},children:Xt("div",{style:{transform:ap(u,p,{avoidTop:r,avoidBottom:i})},children:s})})}function Yl({annotations:e,supersededAnnotations:t,inFlightIds:n,activeIds:o,queuePositions:r,scrollX:i,scrollY:a,annotationGroupMap:s,onViewThread:l,onSelectAnnotation:c,onHoverAnnotation:d,canvasRef:u,toolbarRef:p}){let f=tp(null),[v,C]=Us(0),[x,I]=Us(()=>Math.floor(Math.random()*ji.length)),B=!!(n&&n.size>0);Ys(()=>{if(!B)return;let g=setInterval(()=>{C($=>($+1)%np)},op),m=setInterval(()=>{I($=>($+1)%ji.length)},rp);return()=>{clearInterval(g),clearInterval(m)}},[B]),Ys(()=>{let g=f.current;if(!g)return;let m=null,$=()=>{m=null,g.style.setProperty("--popmelt-scroll-x",`${window.scrollX}px`),g.style.setProperty("--popmelt-scroll-y",`${window.scrollY}px`)},ge=()=>{m===null&&(m=window.requestAnimationFrame($))};return $(),window.addEventListener("scroll",ge,{passive:!0}),window.addEventListener("resize",ge),()=>{window.removeEventListener("scroll",ge),window.removeEventListener("resize",ge),m!==null&&window.cancelAnimationFrame(m)}},[]);let T=[];for(let g of e){if(g.type!=="text"||!g.text||!g.points[0]||t.has(g))continue;let m=g.groupId?e.filter(te=>te.groupId===g.groupId):[g],$=g.status??"pending",ge=m.reduce((te,Oe)=>te+(Oe.replyCount??0),0),Ie=!!(n&&(n.has(g.id)||m.some(te=>n.has(te.id))))||g.status==="in_flight"||m.some(te=>te.status==="in_flight"),ue=m.some(te=>te.status==="resolved"&&(te.replyCount??0)>0||te.status==="needs_review"),ke=m.some(te=>te.threadId);if(!Ie&&$!=="resolved"&&$!=="needs_review"&&!ue&&!ke)continue;let Me=g.threadId||m.find(te=>te.threadId)?.threadId,K=$==="needs_review"||m.some(te=>te.status==="needs_review"),_=$==="waiting_input"||m.some(te=>te.status==="waiting_input"),ne=g.points[0],he=g.fontSize||12,ze=he*1.4,Ye=s.get(g.id),ie=g.text.replace(/\n/g," "),Ke=Ye!==void 0?Ye+". "+ie:ie,Ge=u?.current?.getContext("2d")??document.createElement("canvas").getContext("2d");if(!Ge)continue;Ge.font=`${he}px ${un}`;let ve=ne.x-i,Re=ci(ve),at=di(Ge,Ke,Re),G=Ge.measureText(at).width,le=Ie&&!!o&&!o.has(g.id)&&!m.some(te=>o.has(te.id));T.push({id:g.id,threadId:Me,linkedSelector:g.linkedSelector||m.find(te=>te.linkedSelector)?.linkedSelector,x:ne.x+G+4,y:ne.y-4,size:ze+8,color:g.color,isInFlight:Ie,isQueued:le,queuePosition:void 0,isNeedsReview:K,isQuestion:_,replyCount:ge})}let R=T.filter(g=>g.isQueued);if(R.length>0&&R.forEach((g,m)=>{g.queuePosition=r?.get(g.id)??`(${m+1}/${R.length})`}),T.length===0)return null;let w=2,z=u?.current?.getContext("2d")??document.createElement("canvas").getContext("2d"),X=T.map(g=>{let m;g.isQueued?m=g.queuePosition?`queued ${g.queuePosition}`:"queued":g.isInFlight?m=ji[x]??"thinking":g.isQuestion?m="? Question":g.replyCount>0?m=`${g.replyCount} ${g.replyCount===1?"reply":"replies"}`:m="View";let $=!g.isQueued,ge=$?11:0,Ie=$?4:0,ue=m.length*7.2;return z&&(z.font=`12px ${un}`,ue=z.measureText(m).width),4+ge+Ie+ue+4}),j=ip(p),E=[];for(let g=0;g<T.length;g++){let m=T[g].y-a,$=T[g].x-i,ge=Vs(j,$,X[g]),Ie=Vl(m,T[g].size,ge),ue=Ie+T[g].size,ke=$;for(let Me=0;Me<g;Me++){let K=T[Me].y-a,_=Vs(j,E[Me],X[Me]),ne=Vl(K,T[Me].size,_),he=ne+T[Me].size;if(!(Ie<he&&ue>ne))continue;let Ye=E[Me]+X[Me];ke<Ye+w&&(ke=Ye+w)}E.push(ke)}let L={position:"fixed",inset:0,pointerEvents:"none",zIndex:9999,"--popmelt-scroll-x":`${i}px`,"--popmelt-scroll-y":`${a}px`};return Xt("div",{ref:f,"data-devtools":"annotation-badge-layer",style:L,children:T.map((g,m)=>{let $=!!g.threadId,ge=Vs(j,E[m],X[m]);return Xt(lp,{left:E[m]+i-pi,top:g.y-pi,scrollX:i,scrollY:a,avoidTop:ge.avoidTop,avoidBottom:ge.avoidBottom,onMouseDown:$?Ie=>Ie.stopPropagation():void 0,onClick:$?Ie=>{if(Ie.stopPropagation(),c?.(g.id),l?.(g.threadId),g.linkedSelector)try{let ue=document.querySelector(g.linkedSelector);if(ue){let ke=ue.getBoundingClientRect();(ke.bottom<0||ke.top>window.innerHeight)&&ue.scrollIntoView({behavior:"smooth",block:"center"})}}catch{}}:void 0,onMouseEnter:d?()=>d(g.id):void 0,onMouseLeave:d?()=>d(null):void 0,style:{pointerEvents:$?"auto":"none",cursor:$?"pointer":void 0,zIndex:9999},children:Xt("div",{"data-devtools":"annotation-badge",style:{height:g.size,display:"flex",alignItems:"center",backgroundColor:g.color,fontFamily:un,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:g.isQueued?Fr("span",{style:{opacity:.5,color:"inherit"},children:["queued",g.queuePosition?` ${g.queuePosition}`:""]}):g.isInFlight?Fr(ui,{children:[Xt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:v===1?Fr(ui,{children:[Xt("circle",{cx:"7",cy:"7",r:"2"}),Xt("circle",{cx:"17",cy:"7",r:"2"}),Xt("circle",{cx:"7",cy:"17",r:"2"}),Xt("circle",{cx:"17",cy:"17",r:"2"})]}):Fr(ui,{children:[Xt("circle",{cx:"12",cy:"6",r:"2"}),Xt("circle",{cx:"6",cy:"12",r:"2"}),Xt("circle",{cx:"18",cy:"12",r:"2"}),Xt("circle",{cx:"12",cy:"18",r:"2"})]})}),Xt("span",{style:{opacity:.7,color:"inherit"},children:ji[x]})]}):Fr(ui,{children:[g.isQuestion||g.isNeedsReview?Xt("span",{style:{fontWeight:700,color:"inherit"},children:"?"}):Xt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:Xt("polyline",{points:"4 12 10 18 20 6"})}),Xt("span",{style:{opacity:.7,color:"inherit"},children:g.isQuestion?"Question":g.replyCount>0?`${g.replyCount} ${g.replyCount===1?"reply":"replies"}`:"View"})]})})},g.id)})})}function Ks({inFlightSelectorColors:e,animated:t=!0}){let[n,o]=Us([]);return Ys(()=>{if(e.size===0){o([]);return}let r=null,i=()=>{let l=[];for(let[c,d]of e){let u=Tn(c);if(!u)continue;let p=u.getBoundingClientRect();l.push({selector:c,top:p.top,left:p.left,width:p.width,height:p.height,color:d})}o(l)},a=()=>{r&&cancelAnimationFrame(r),r=requestAnimationFrame(i)};i(),window.addEventListener("scroll",a,!0),window.addEventListener("resize",a,!0);let s=new MutationObserver(a);return s.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",a,!0),window.removeEventListener("resize",a,!0),s.disconnect(),r&&cancelAnimationFrame(r)}},[e]),n.length===0?null:Fr(ui,{children:[t&&Xt("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(r=>Xt("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:Xt("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:Xt("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 Gi(e){let t=new Set,n=new Map;for(let i of e){if(!i.linkedSelector)continue;let a=n.get(i.linkedSelector)||[];a.push(i),n.set(i.linkedSelector,a)}let o=new Set,r=new Set;for(let i of n.values()){if(i.length<=1){i[0]?.groupId&&r.add(i[0].groupId);continue}i.sort((s,l)=>l.timestamp-s.timestamp);let a=i[0];a.groupId&&r.add(a.groupId);for(let s=1;s<i.length;s++){let l=i[s];t.add(l),l.groupId&&o.add(l.groupId)}}for(let i of e)i.groupId&&o.has(i.groupId)&&!r.has(i.groupId)&&t.add(i);return t}import{useEffect as Ul,useLayoutEffect as cp,useState as Kl}from"react";import{jsx as Xs,jsxs as ql}from"react/jsx-runtime";function dp(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}var Xl=["top-left","top-right","bottom-right","bottom-left"];function Zl({element:e,radius:t,accentColor:n,hoveredCorner:o,draggingCorner:r,cursorViewport:i}){let[a,s]=Kl(null),[l,c]=Kl(!1);if(Ul(()=>{let I=R=>{(R.key==="Meta"||R.key==="Control")&&c(!0)},B=R=>{(R.key==="Meta"||R.key==="Control")&&c(!1)},T=()=>c(!1);return window.addEventListener("keydown",I,!0),window.addEventListener("keyup",B,!0),window.addEventListener("blur",T),()=>{window.removeEventListener("keydown",I,!0),window.removeEventListener("keyup",B,!0),window.removeEventListener("blur",T)}},[]),Ul(()=>{if(!e){s(null);return}let I=()=>{s(e.getBoundingClientRect())};return I(),window.addEventListener("scroll",I,{passive:!0}),window.addEventListener("resize",I,{passive:!0}),()=>{window.removeEventListener("scroll",I),window.removeEventListener("resize",I)}},[e]),cp(()=>{e&&s(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!a)return null;let d=a.width,u=a.height,p=dp(n,.2),f={"top-left":{x:0,y:t["top-left"]},"top-right":{x:d,y:t["top-right"]},"bottom-right":{x:d,y:u-t["bottom-right"]},"bottom-left":{x:0,y:u-t["bottom-left"]}},v=new Set,C=r??o;if(C)if(l)v.add(C);else for(let I of Xl)v.add(I);let x={position:"fixed",top:a.top,left:a.left,width:d,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"};return ql("div",{"data-devtools":"border-radius-handles",style:x,children:[ql("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${u}`,children:[Xs("rect",{x:"0.5",y:"0.5",width:Math.max(0,d-1),height:Math.max(0,u-1),fill:"none",stroke:p,strokeWidth:"1"}),Xl.map(I=>{let B=f[I],T=v.has(I);return Xs("circle",{cx:B.x,cy:B.y,r:I===(r??o)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:I===(r??o)?4:2,paintOrder:"stroke"},I)})]}),i&&C&&(()=>{let I=Math.round(t[C]);return Xs("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:I})})()]})}import{useEffect as up,useState as pp}from"react";function mr(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);if(n)return`oklch(${n[1]} / ${t})`;let o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(o){let r=parseInt(o[1],16),i=parseInt(o[2],16),a=parseInt(o[3],16);return`rgba(${r}, ${i}, ${a}, ${t})`}return`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}import{Fragment as fp,jsx as qs,jsxs as $r}from"react/jsx-runtime";function xo({element:e,isSelected:t=!1,elementInfo:n,color:o="#3b82f6",annotationNumber:r,changeCount:i,hideTooltip:a=!1}){let[s,l]=pp(null);if(up(()=>{if(!e){l(null);return}let w=()=>{let z=e.getBoundingClientRect();l(z)};return w(),window.addEventListener("scroll",w,{passive:!0}),window.addEventListener("resize",w,{passive:!0}),()=>{window.removeEventListener("scroll",w),window.removeEventListener("resize",w)}},[e]),!s||!e)return null;let c={position:"fixed",top:s.top,left:s.left,width:s.width,height:s.height,pointerEvents:"none",zIndex:9996,overflow:"visible"},d=e.tagName.toLowerCase(),u=e.id?`#${e.id}`:"",p=e.classList.length>0?"."+Array.from(e.classList).slice(0,2).join("."):"",f=n?.reactComponent,v=f?`<${f}> ${d}${u}${p}`:`${d}${u}${p}`,C=22,x=s.height>=window.innerHeight,I=x?0:s.top>=C?s.top-C:s.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:I,left:s.left,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:o,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400},R=!a&&$r("div",{"data-devtools":"tooltip",style:B,children:[r!==void 0&&$r("span",{children:[r,"."]}),qs("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:v}),i!==void 0&&i>0&&$r("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return $r(fp,{children:[$r("div",{"data-devtools":"highlight",style:c,children:[$r("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:[qs("rect",{x:"2.5",y:"2.5",width:Math.max(0,s.width-5),height:Math.max(0,s.height-5),fill:mr(o,.05),stroke:"none"}),qs("rect",{x:"0.5",y:"0.5",width:Math.max(0,s.width-1),height:Math.max(0,s.height-1),fill:"none",stroke:o,strokeWidth:"1",...!t&&{strokeDasharray:"2 4"}})]}),x&&R]}),!x&&R]})}import{useEffect as Ql,useLayoutEffect as gp,useState as Zs}from"react";import{jsx as No,jsxs as ea}from"react/jsx-runtime";function Qs(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 ta({element:e,gap:t,accentColor:n,hoveredAxis:o,draggingAxis:r,cursorViewport:i,isAutoGap:a=!1,refreshKey:s=0}){let[l,c]=Zs(null),[d,u]=Zs([]),[p,f]=Zs(!1);if(Ql(()=>{let j=g=>{(g.key==="Meta"||g.key==="Control")&&f(!0)},E=g=>{(g.key==="Meta"||g.key==="Control")&&f(!1)},L=()=>f(!1);return window.addEventListener("keydown",j,!0),window.addEventListener("keyup",E,!0),window.addEventListener("blur",L),()=>{window.removeEventListener("keydown",j,!0),window.removeEventListener("keyup",E,!0),window.removeEventListener("blur",L)}},[]),Ql(()=>{if(!e){c(null),u([]);return}let j=()=>{c(e.getBoundingClientRect()),u(Ho(e))};return j(),window.addEventListener("scroll",j,{passive:!0}),window.addEventListener("resize",j,{passive:!0}),()=>{window.removeEventListener("scroll",j),window.removeEventListener("resize",j)}},[e]),gp(()=>{e&&(c(e.getBoundingClientRect()),u(Ho(e)))},[e,t.row,t.column,s]),!l||d.length===0)return null;let v=l.width,C=l.height,x="pm-gap-stripe-pattern",I=Qs(n,.25),B=Qs(n,.1),T=Qs(n,.2),R=8,w=2,z={position:"fixed",top:l.top,left:l.left,width:v,height:C,pointerEvents:"none",zIndex:9996,overflow:"visible"},X=r??o;return ea("div",{"data-devtools":"gap-handles",style:z,children:[ea("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${v} ${C}`,children:[No("defs",{children:No("pattern",{id:x,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:No("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:I,strokeWidth:"1.5"})})}),No("rect",{x:"0.5",y:"0.5",width:Math.max(0,v-1),height:Math.max(0,C-1),fill:"none",stroke:T,strokeWidth:"1"}),d.map((j,E)=>{let L=j.x-l.left,g=j.y-l.top,m=j.w,$=j.h,ge=p?j.axis===X:!0;return(j.axis==="row"?t.row:t.column)===0?null:ea("g",{opacity:ge?1:.6,children:[No("rect",{x:L,y:g,width:m,height:$,fill:B}),No("rect",{x:L,y:g,width:m,height:$,fill:`url(#${x})`})]},E)}),X&&(()=>{let j=d.filter(ne=>ne.axis===X);if(j.length===0)return null;let E=j[0];if(i&&j.length>1){let ne=1/0;for(let he of j){let ze=he.x+he.w/2,Ye=he.y+he.h/2,ie=Math.abs(i.x-ze)+Math.abs(i.y-Ye);ie<ne&&(ne=ie,E=he)}}let L=E.x-l.left,g=E.y-l.top,m=E.w,$=E.h,ge=L+m/2,Ie=g+$/2;if(a)return No("circle",{cx:ge,cy:Ie,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let ue=X==="column",ke=ue?w:R,Me=ue?R:w,K=ge-ke/2,_=Ie-Me/2;return No("rect",{x:K,y:_,width:ke,height:Me,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&X&&(()=>{let j=a?"auto":String(Math.round(X==="row"?t.row:t.column));return No("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:j})})()]})}import{useCallback as vp,useEffect as xp,useState as Sp}from"react";import{useEffect as mp,useState as ec}from"react";var hp=3,yp=250,na=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],bp=3e3;function tc(e){let[t,n]=ec(0),[o,r]=ec(()=>Math.floor(Math.random()*na.length));return mp(()=>{if(!e)return;let i=setInterval(()=>n(s=>(s+1)%hp),yp),a=setInterval(()=>r(s=>(s+1)%na.length),bp);return()=>{clearInterval(i),clearInterval(a)}},[e]),{charIndex:t,word:na[o]}}import{Fragment as oa,jsx as Nn,jsxs as Wr}from"react/jsx-runtime";function wp(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 nc=22,fi=12,Ji=8;function Cp(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 Ep(e,t,n){return Cp(t,n,e)?e:{}}function kp(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 Tp(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 Ip({left:e,top:t,avoidTop:n,avoidBottom:o,style:r,children:i,...a}){let s=e+fi,l=t+fi;return Nn("div",{"data-devtools":"badge-hit-area",...a,style:{position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:fi,...r},children:Nn("div",{style:{transform:Tp(s,l,n,o)},children:i})})}function oc({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:o,dispatch:r,inFlightSelectors:i,toolbarRef:a,onHoverSelector:s}){let[l,c]=Sp([]),d=i&&i.size>0,{charIndex:u,word:p}=tc(!!d);xp(()=>{if(t){c([]);return}let T=null,R=()=>{let X=[];e.forEach((j,E)=>{let L=Tn(j.selector);if(!L)return;let g=L.getBoundingClientRect();X.push({selector:j.selector,modIndex:E,top:g.top>=nc?g.top-nc:g.bottom,left:g.left,label:wp(j),changeCount:j.changes.length,annotationNumber:o+E+1})}),c(X)},w=()=>{T&&cancelAnimationFrame(T),T=requestAnimationFrame(R)};R(),window.addEventListener("scroll",w,!0),window.addEventListener("resize",w,!0);let z=new MutationObserver(w);return z.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",w),document.fonts.ready.then(w),()=>{window.removeEventListener("scroll",w,!0),window.removeEventListener("resize",w,!0),window.removeEventListener("load",w),z.disconnect(),T&&cancelAnimationFrame(T)}},[e,t,o]);let f=vp(T=>{let R=e[T];if(!R)return;let w=Tn(R.selector);w&&(r({type:"SELECT_ANNOTATION",payload:{id:null}}),r({type:"SET_TOOL",payload:"inspector"}),r({type:"SELECT_ELEMENT",payload:{el:w,info:R.element}}))},[e,r]);if(l.length===0)return null;let v=a?.current?.getBoundingClientRect(),C=v?v.top<window.innerHeight/2:!1,x=v?{avoidTop:C?v.bottom+Ji:void 0,avoidBottom:C?void 0:v.top-Ji,avoidLeft:v.left-Ji,avoidRight:v.right+Ji}:{},I={display:"flex",alignItems:"center",gap:6,backgroundColor:n,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,whiteSpace:"nowrap",maxWidth:400},B={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return Nn(oa,{children:l.map(T=>{let R=i?.has(T.selector),w=Ep(x,T.left,kp(T));return Nn(Ip,{left:T.left-fi,top:T.top-fi,avoidTop:w.avoidTop,avoidBottom:w.avoidBottom,onClick:()=>f(T.modIndex),onMouseEnter:s?()=>s(T.selector):void 0,onMouseLeave:s?()=>s(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:Wr("div",{"data-devtools":"badge",style:{...I,backgroundColor:R?"#999999":n},children:[Wr("span",{children:[T.annotationNumber,"."]}),Nn("span",{style:B,children:T.label}),Wr("span",{style:{opacity:.8},children:["(",T.changeCount," ",T.changeCount===1?"change":"changes",")"]}),R&&Wr("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[Nn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:u===1?Wr(oa,{children:[Nn("circle",{cx:"7",cy:"7",r:"2"}),Nn("circle",{cx:"17",cy:"7",r:"2"}),Nn("circle",{cx:"7",cy:"17",r:"2"}),Nn("circle",{cx:"17",cy:"17",r:"2"})]}):Wr(oa,{children:[Nn("circle",{cx:"12",cy:"6",r:"2"}),Nn("circle",{cx:"6",cy:"12",r:"2"}),Nn("circle",{cx:"18",cy:"12",r:"2"}),Nn("circle",{cx:"12",cy:"18",r:"2"})]})}),p]})]})},T.selector)})})}import{useEffect as Mp,useState as Rp}from"react";import{Fragment as Lp,jsx as rc}from"react/jsx-runtime";function Ap(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function ic({styleModifications:e,accentColor:t}){let[n,o]=Rp([]);if(Mp(()=>{let i=null,a=()=>{let c=[];for(let d of e){let u=Tn(d.selector);if(!u)continue;let p=u.getBoundingClientRect();if(p.width===0&&p.height===0)continue;let f=gr(u);c.push({selector:d.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)},s=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(a)};a(),window.addEventListener("scroll",s,{passive:!0}),window.addEventListener("resize",s,{passive:!0});let l=new MutationObserver(s);return l.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s),window.removeEventListener("resize",s),l.disconnect(),i&&cancelAnimationFrame(i)}},[e]),n.length===0)return null;let r=Ap(t,.2);return rc(Lp,{children:n.map(i=>{let a={position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${r}`,borderRadius:i.borderRadius,boxSizing:"border-box"};return rc("div",{"data-devtools":"mod-border",style:a},i.selector)})})}import{useEffect as sc,useLayoutEffect as Pp,useState as ac}from"react";import{jsx as Qo,jsxs as ia}from"react/jsx-runtime";function ra(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 Bp={top:"bottom",bottom:"top",left:"right",right:"left"};function sa({element:e,padding:t,accentColor:n,hoveredSide:o,draggingSide:r,cursorViewport:i,refreshKey:a}){let[s,l]=ac(null),[c,d]=ac(!1);if(sc(()=>{let m=Ie=>{(Ie.key==="Meta"||Ie.key==="Control")&&d(!0)},$=Ie=>{(Ie.key==="Meta"||Ie.key==="Control")&&d(!1)},ge=()=>d(!1);return window.addEventListener("keydown",m,!0),window.addEventListener("keyup",$,!0),window.addEventListener("blur",ge),()=>{window.removeEventListener("keydown",m,!0),window.removeEventListener("keyup",$,!0),window.removeEventListener("blur",ge)}},[]),sc(()=>{if(!e){l(null);return}let m=()=>{l(e.getBoundingClientRect())};return m(),window.addEventListener("scroll",m,{passive:!0}),window.addEventListener("resize",m,{passive:!0}),()=>{window.removeEventListener("scroll",m),window.removeEventListener("resize",m)}},[e]),Pp(()=>{e&&l(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,a]),!s)return null;let u=s.width,p=s.height,{top:f,right:v,bottom:C,left:x}=t,I="pm-stripe-pattern",B=ra(n,.25),T=ra(n,.1),R=ra(n,.2),w=8,z=2,X={position:"fixed",top:s.top,left:s.left,width:u,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"},j=["top","right","bottom","left"],E={top:`0,0 ${u},0 ${u-v},${f} ${x},${f}`,right:`${u},0 ${u},${p} ${u-v},${p-C} ${u-v},${f}`,bottom:`0,${p} ${x},${p-C} ${u-v},${p-C} ${u},${p}`,left:`0,0 ${x},${f} ${x},${p-C} 0,${p}`},L={top:{x:u/2-w/2,y:f/2-z/2,w,h:z},bottom:{x:u/2-w/2,y:p-C/2-z/2,w,h:z},left:{x:x/2-z/2,y:p/2-w/2,w:z,h:w},right:{x:u-v/2-z/2,y:p/2-w/2,w:z,h:w}},g=new Set;return r?g.add(r):o&&(g.add(o),c||g.add(Bp[o])),ia("div",{"data-devtools":"padding-handles",style:X,children:[ia("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${u} ${p}`,children:[Qo("defs",{children:Qo("pattern",{id:I,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Qo("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:B,strokeWidth:"1.5"})})}),Qo("rect",{x:"0.5",y:"0.5",width:Math.max(0,u-1),height:Math.max(0,p-1),fill:"none",stroke:R,strokeWidth:"1"}),j.map(m=>{if(t[m]<=0)return null;let ge=g.has(m);return ia("g",{opacity:ge?1:.6,children:[Qo("polygon",{points:E[m],fill:T}),Qo("polygon",{points:E[m],fill:`url(#${I})`})]},m)}),j.map(m=>{let $=L[m],ge=g.has(m);return Qo("rect",{x:$.x,y:$.y,width:$.w,height:$.h,fill:n,stroke:"#ffffff",strokeWidth:ge?4:2,paintOrder:"stroke"},`handle-${m}`)})]}),i&&(o||r)&&(()=>{let $=Math.round(t[r??o]);return Qo("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:$})})()]})}import{useCallback as So,useEffect as eo,useMemo as Qi,useRef as Fn,useState as vn}from"react";import{Check as Zi,ChevronDown as ga,MoveHorizontal as vc,Shrink as rf}from"lucide-react";var Dp="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",jr={borderWidth:3,borderStyle:"solid",borderImage:`url("${Dp}") 4 / 1.9 / 0 round`};function Vi({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 Yi={"font-size":["rem","px","em"],"line-height":["","rem","px","em"],"letter-spacing":["rem","px","em"],gap:["rem","px","em"],"column-gap":["rem","px","em"],"row-gap":["rem","px","em"],padding:["rem","px","em","%"],margin:["rem","px","em","%"],width:["rem","px","%","em"],height:["rem","px","%","em"],"min-width":["rem","px","%","em"],"max-width":["rem","px","%","em"],"min-height":["rem","px","%","em"],"max-height":["rem","px","%","em"],"border-width":["px","rem","em"],"border-radius":["rem","px","%","em"]};function Gr(e){return Yi[e]?.[0]??"px"}function er(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function Ui(e,t,n,o){let r=e.trim();if(!r)return"";let i=r.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i);if(i)return`${parseFloat(i[1])}${i[2].toLowerCase()}`;let a=parseFloat(r);if(!isNaN(a)){if(o){let{unit:s}=er(n);return`${a}${s||Gr(t)}`}return`${a}${Gr(t)}`}return r}function aa(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 _p,useEffect as Op,useRef as lc,useState as Hp}from"react";import{Plus as cc,X as Np}from"lucide-react";import{jsx as zn,jsxs as hr}from"react/jsx-runtime";var Ki=[{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 zp(e){if(!e||e==="none")return[];let t=[],n=/([\w-]+)\(([^)]+)\)/g,o;for(;(o=n.exec(e))!==null;){let r=o[1],i=o[2],a=parseFloat(i);isNaN(a)||t.push({name:r,value:a})}return t}function la(e){return e.length===0?"none":e.map(t=>{let o=Ki.find(r=>r.name===t.name)?.unit??"";return`${t.name}(${t.value}${o})`}).join(" ")}function dc({value:e,onChange:t,accentColor:n,modified:o,panelContentRef:r}){let i=zp(e),[a,s]=Hp(!1),l=lc(null),c=lc(null);Op(()=>{if(!a)return;let T=R=>{l.current&&!R.composedPath().includes(l.current)&&s(!1)};return document.addEventListener("mousedown",T,!0),()=>document.removeEventListener("mousedown",T,!0)},[a]);let d=Ki.filter(T=>!i.some(R=>R.name===T.name)),u=T=>{let R=[...i,{name:T.name,value:T.defaultValue}];t(la(R)),s(!1)},p=T=>{let R=i.filter((w,z)=>z!==T);t(la(R))},f=(T,R)=>{let w=i.map((z,X)=>X===T?{...z,value:R}:z);t(la(w))},v={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},C=_p(T=>{if(!c.current)return{position:"fixed",top:0,left:0};let R=c.current.getBoundingClientRect(),w=r?.current?.getBoundingClientRect(),z=T*24+8;return{position:"fixed",...window.innerHeight-R.bottom<z?{bottom:window.innerHeight-R.top+2}:{top:R.bottom+2},left:w?w.left+4:R.left,width:w?w.width-8:140,zIndex:10001}},[r]),x={backgroundColor:"rgba(255, 255, 255, 0.95)",backdropFilter:"blur(16px)",WebkitBackdropFilter:"blur(16px)",border:"1px solid rgba(0,0,0,0.1)",borderRadius:4,padding:"4px 0",boxShadow:"0 4px 12px rgba(0,0,0,0.1)"},I={display:"block",width:"100%",padding:"4px 10px",border:"none",backgroundColor:"transparent",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#334155",cursor:"pointer",textAlign:"left"},B=T=>zn("div",{ref:l,style:{...C(T.length),...x},children:T.map(R=>zn("button",{type:"button",onClick:()=>u(R),style:I,onMouseEnter:w=>{w.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:w=>{w.currentTarget.style.backgroundColor="transparent"},children:R.label},R.name))});return i.length===0?hr("div",{children:[hr("div",{style:{display:"flex",alignItems:"center",gap:4},children:[zn(zo,{modified:!1,children:zn("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:{...v,color:"#999",cursor:"default"}})}),zn("button",{ref:c,type:"button",onClick:()=>s(!a),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:zn(cc,{size:12})})]}),a&&B(Ki)]}):hr("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((T,R)=>{let w=Ki.find(z=>z.name===T.name);return w?hr("div",{style:{display:"flex",alignItems:"center",gap:4},children:[zn("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:w.label}),zn(zo,{modified:o,children:hr("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[zn("input",{type:"range",min:w.min,max:w.max,step:w.step,value:T.value,onChange:z=>f(R,parseFloat(z.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(T.value-w.min)/(w.max-w.min)*100}%, rgba(0,0,0,0.1) ${(T.value-w.min)/(w.max-w.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),zn("input",{type:"number",min:w.min,max:w.max,step:w.step,value:w.unit==="px"||w.unit==="deg"?Math.round(T.value):Math.round(T.value*100)/100,onChange:z=>f(R,parseFloat(z.target.value)||0),style:{...v,width:44,padding:"2px 4px",textAlign:"right",flexShrink:0}}),w.unit&&zn("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:w.unit})]})}),zn("button",{type:"button",onClick:()=>p(R),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:zn(Np,{size:10})})]},T.name):null}),d.length>0&&hr("div",{children:[hr("button",{ref:c,type:"button",onClick:()=>s(!a),style:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",border:"none",borderRadius:2,backgroundColor:"transparent",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#94a3b8",cursor:"pointer"},children:[zn(cc,{size:10}),"Add filter"]}),a&&B(d)]})]})}import{useCallback as so,useEffect as jp,useRef as Xi,useState as uc}from"react";import{AlignHorizontalSpaceAround as Gp,AlignVerticalSpaceAround as Jp,Columns3 as Vp,Grid2x2 as Yp,RectangleHorizontal as Up,Rows3 as Kp,UnfoldHorizontal as pc,UnfoldVertical as fc}from"lucide-react";import{useCallback as Fp,useEffect as $p,useRef as gi}from"react";import{jsx as Wp}from"react/jsx-runtime";var ca=[0,1,2,4,8,12,16,20,24,28,32];function Jr({value:e,onChange:t,onPreview:n,onScrubEnd:o,onReset:r,isModified:i,accentColor:a,defaultUnit:s="rem",snapSteps:l,color:c,style:d,children:u}){let p=gi(null),f=gi(null),v=gi(r),C=gi(i),x=gi(!1);v.current=r,C.current=i,$p(()=>{let B=R=>{let w=f.current;if(!w)return;w.hasMoved=!0,x.current=R.shiftKey;let z=w.unit==="rem"||w.unit==="em"?.1:1;w.accum+=R.movementX*z;let X=Math.max(0,Math.round((w.startValue+w.accum)*10)/10);if(R.shiftKey&&l){let j=w.unit==="rem"||w.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,E=w.unit==="rem"||w.unit==="em"?X*j:X,L=l[l.length-1];for(let g=0;g<l.length-1;g++){let m=l[g],$=l[g+1];if(E<=(m+$)/2){L=m;break}if(E<$){L=$;break}}E>l[l.length-1]&&(L=Math.round(E/8)*8),X=w.unit==="rem"||w.unit==="em"?Math.round(L/j*1e3)/1e3:L}n?.(`${X}${w.unit}`)},T=()=>{let R=f.current;if(!R)return;let w=Math.max(0,Math.round((R.startValue+R.accum)*10)/10);if(x.current&&l){let X=R.unit==="rem"||R.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,j=R.unit==="rem"||R.unit==="em"?w*X:w,E=l[l.length-1];for(let L=0;L<l.length-1;L++){let g=l[L],m=l[L+1];if(j<=(g+m)/2){E=g;break}if(j<m){E=m;break}}j>l[l.length-1]&&(E=Math.round(j/8)*8),w=R.unit==="rem"||R.unit==="em"?Math.round(E/X*1e3)/1e3:E}let z=R.hasMoved&&w!==R.startValue;f.current=null,document.exitPointerLock(),z?t(`${w}${R.unit}`):R.hasMoved?n?.(`${R.startValue}${R.unit}`):C.current&&v.current&&v.current(),o?.()};return document.addEventListener("mousemove",B),document.addEventListener("mouseup",T),()=>{document.removeEventListener("mousemove",B),document.removeEventListener("mouseup",T)}},[t,n,o]);let I=Fp(B=>{if(B.button!==0)return;B.preventDefault();let T=er(e),R=T.unit&&T.unit!=="px"?T.unit:s;f.current={startValue:T.num,unit:R,accum:0,hasMoved:!1},p.current?.requestPointerLock()},[e,s]);return Wp("span",{ref:p,onMouseDown:I,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:{color:i?a||"#3b82f6":c||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize",...d},children:u})}import{Fragment as da,jsx as _e,jsxs as gn}from"react/jsx-runtime";function Xp({gridCols:e,gridRows:t,gridModified:n,accentColor:o,onColsChange:r,onRowsChange:i}){return _e(Vn,{style:{width:100},children:gn("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"8px 4px"},children:[_e("input",{type:"number",min:1,max:12,value:e,onChange:a=>r(parseInt(a.target.value)||1),style:{...bn,width:32,textAlign:"center",padding:2}}),_e("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"}),_e("input",{type:"number",min:1,max:12,value:t,onChange:a=>i(parseInt(a.target.value)||1),style:{...bn,width:32,textAlign:"center",padding:2}})]})})}function gc({element:e,getValue:t,getOriginalValue:n,handleChange:o,isModified:r,onResetProperty:i,isCollapsed:a,onToggle:s,sectionHeaderStyle:l,activeDropdown:c,onDropdownChange:d,panelContentRef:u,accentColor:p,onFieldHover:f,preferredUnit:v,onUnitCycle:C}){let x=d,I=t("display"),B=t("flex-direction"),T=mc(I,B),R=I==="flex"||I==="inline-flex",w=I==="grid",z=R||w,X=B==="column"||B==="column-reverse",j=t("width"),E=t("height"),L=r("width")?j:Hi(e,"width"),g=r("height")?E:Hi(e,"height"),m=ua(j,L),$=ua(E,g),ge=t("min-width"),Ie=t("max-width"),ue=t("min-height"),ke=t("max-height"),Me=Vr(t("padding")),K=t("gap"),_=t("row-gap"),ne=t("column-gap"),he=t("grid-template-columns"),ze=t("grid-template-rows"),Ye=t("overflow"),ie=he.split(/\s+/).filter(V=>V&&V!=="none").length||1,Ke=ze.split(/\s+/).filter(V=>V&&V!=="none").length||1,[Ge,ve]=uc(!1),Re=c!==null,at=Re||Ge,G=Re?.3:Ge?.65:1,le=({mode:V,icon:Ae,active:qe})=>_e("button",{type:"button",onClick:()=>hc(V,o),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:qe?mr(p,.15):"transparent",color:qe?p:"#64748b",cursor:"pointer",fontSize:14},children:Ae}),te=(V,Ae,qe)=>{qe==="fixed"?o(V,Ae):o(V,qi(qe,Ae))},Oe=V=>{let Ae=Vr(t("padding")),qe=V||"0";o("padding",`${Ae.top} ${qe} ${Ae.bottom} ${qe}`)},lt=V=>{let Ae=Vr(t("padding")),qe=V||"0";o("padding",`${qe} ${Ae.right} ${qe} ${Ae.left}`)},[De,ot]=uc({}),ct=so((V,Ae)=>qe=>{Ae(qe),ot(Et=>({...Et,[V]:qe}))},[]),Je=so(V=>{ot(Ae=>{let qe={...Ae};return delete qe[V],qe})},[]),ht=so(V=>{let Ae=Vr(t("padding"));tt(e,"padding",`${Ae.top} ${V} ${Ae.bottom} ${V}`)},[e,t]),qt=so(V=>{let Ae=Vr(t("padding"));tt(e,"padding",`${V} ${Ae.right} ${V} ${Ae.left}`)},[e,t]),zt=so(V=>Ae=>{tt(e,V,Ae)},[e]),nt=X?"row":"column",Ve=nt==="row"?"row-gap":"column-gap",Ut=Ve==="row-gap"?_||K:ne||K,Xe=r(Ve)||r("gap"),Ct=so(()=>{let Ae=Ho(e).find(Et=>Et.axis===nt);if(Ae)return nt==="row"?Ae.h:Ae.w;let qe=fr(e);return nt==="row"?qe.row:qe.column},[e,nt]),Sn=so(()=>{let V=t("justify-content");return V==="space-between"?"between":V==="space-around"||V==="space-evenly"?"around":"fixed"},[t])(),Mn=so((V,Ae)=>{if(V==="fixed"){let qe=Math.max(0,Math.round(Ct()*1e3)/1e3),Et=Ae||(qe>0?`${qe}px`:"8px");o("justify-content","normal"),o(Ve,Et);return}o("justify-content",V==="between"?"space-between":"space-around"),o(Ve,"0px")},[Ve,Ct,o]),ln=so(V=>{if(Sn!=="fixed"){Mn("fixed",V);return}o(Ve,V)},[Mn,Sn,Ve,o]),Ft=so(V=>{tt(e,"justify-content","normal"),tt(e,Ve,V)},[e,Ve]),q=V=>V==="center"?1:V==="flex-end"||V==="end"?2:0,ae=q(t("justify-content")),fe=q(t("align-items")),Te=X?fe:ae,rt=X?ae:fe,dt=Xi(null),ft=Xi({x:0,y:0}),Kt=Xi({col:Te,row:rt});Kt.current={col:Te,row:rt};let Wn=so((V,Ae)=>{let qe=["flex-start","center","flex-end"];X?(o("justify-content",qe[Ae]),o("align-items",qe[V])):(o("justify-content",qe[V]),o("align-items",qe[Ae]))},[X,o]),hn=Xi(Wn);hn.current=Wn,jp(()=>{let Ae=qe=>{let Et=dt.current;if(!Et||!qe.composedPath().includes(Et))return;qe.preventDefault(),qe.stopPropagation(),ft.current.x+=qe.deltaX,ft.current.y+=qe.deltaY;let{col:cn,row:ut}=Kt.current,Le=!1;Math.abs(ft.current.x)>=30&&(cn=Math.max(0,Math.min(2,cn+(ft.current.x>0?1:-1))),ft.current.x=0,ft.current.y=0,Le=!0),!Le&&Math.abs(ft.current.y)>=30&&(ut=Math.max(0,Math.min(2,ut+(ft.current.y>0?1:-1))),ft.current.x=0,ft.current.y=0,Le=!0),Le&&(cn!==Kt.current.col||ut!==Kt.current.row)&&hn.current(cn,ut)};return document.addEventListener("wheel",Ae,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",Ae,{capture:!0})},[]);let Rn=()=>_e("div",{ref:dt,onMouseEnter:()=>{ve(!0),u.current&&(u.current.style.overflowY="hidden")},onMouseLeave:()=>{ve(!1),u.current&&(u.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:Qn,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(V=>[0,1,2].map(Ae=>_e("button",{type:"button",onClick:()=>Wn(Ae,V),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:Ae===Te&&V===rt?_e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:Ae===0?gn(da,{children:[_e("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),_e("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),_e("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):Ae===1?gn(da,{children:[_e("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),_e("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),_e("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):gn(da,{children:[_e("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),_e("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),_e("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]})}):_e("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${V}-${Ae}`)))}),He=r("grid-template-columns")||r("grid-template-rows");return gn("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[_e("div",{style:l,children:_e("span",{children:z?"Auto layout":"Layout"})}),gn("div",{style:{padding:"8px 12px"},children:[gn("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:Qn,borderRadius:2,padding:2,opacity:G,transition:"opacity 150ms ease"},children:[_e(le,{mode:"block",icon:_e(Up,{size:16}),active:T==="block"}),_e(le,{mode:"flex-col",icon:_e(Kp,{size:16}),active:T==="flex-col"}),_e(le,{mode:"flex-row",icon:_e(Vp,{size:16}),active:T==="flex-row"}),_e(le,{mode:"grid",icon:_e(Yp,{size:16}),active:T==="grid"})]}),gn("div",{style:{display:"flex",gap:4,marginBottom:8},children:[_e(pa,{label:"W",property:"width",cssValue:m==="fixed"?j:`${Math.round(e.getBoundingClientRect().width)}px`,mode:m,onValueChange:V=>o("width",V),onModeChange:V=>{if(V==="fixed"){let Ae=e.getBoundingClientRect();o("width",`${Math.round(Ae.width)}px`)}else o("width",qi(V,j))},modified:r("width"),dimmed:Re&&c!=="width",dropdownOpen:c==="width",onDropdownChange:V=>x(V?"width":null),panelContentRef:u,accentColor:p,onReset:()=>i("width"),minValue:ge!=="none"&&ge!=="0px"&&ge!=="auto"?ge:"",maxValue:Ie!=="none"&&Ie!=="auto"?Ie:"",onMinChange:V=>o("min-width",V||"0"),onMaxChange:V=>o("max-width",V||"none"),onMinReset:()=>i("min-width"),onMaxReset:()=>i("max-width"),minModified:r("min-width"),maxModified:r("max-width")}),_e(pa,{label:"H",property:"height",cssValue:$==="fixed"?E:`${Math.round(e.getBoundingClientRect().height)}px`,mode:$,onValueChange:V=>o("height",V),onModeChange:V=>{if(V==="fixed"){let Ae=e.getBoundingClientRect();o("height",`${Math.round(Ae.height)}px`)}else o("height",qi(V,E))},modified:r("height"),dimmed:Re&&c!=="height",dropdownOpen:c==="height",onDropdownChange:V=>x(V?"height":null),panelContentRef:u,minValue:ue!=="none"&&ue!=="0px"&&ue!=="auto"?ue:"",maxValue:ke!=="none"&&ke!=="auto"?ke:"",onMinChange:V=>o("min-height",V||"0"),onMaxChange:V=>o("max-height",V||"none"),onMinReset:()=>i("min-height"),onMaxReset:()=>i("max-height"),minModified:r("min-height"),maxModified:r("max-height"),accentColor:p,onReset:()=>i("height")})]}),R&&gn("div",{onMouseEnter:()=>f?.("gap"),onMouseLeave:()=>f?.("element"),style:{display:"flex",gap:8,marginBottom:8},children:[_e("div",{style:{opacity:Re?.3:1,transition:"opacity 150ms ease"},children:Rn()}),gn("div",{style:{flex:1,opacity:G,transition:"opacity 150ms ease"},children:[_e("div",{onClick:Xe?()=>{i(Ve),i("gap")}:void 0,title:Xe?"Click to reset":void 0,style:{fontSize:9,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:Xe?p:"#999",fontWeight:Xe?600:400,marginBottom:2,cursor:Xe?"pointer":"default"},children:"Gap"}),_e("div",{style:{display:"flex",gap:2,marginBottom:4,backgroundColor:Qn,borderRadius:2,padding:2},children:["fixed","between","around"].map(V=>{let Ae=Sn===V;return _e("button",{type:"button",onClick:()=>Mn(V),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"4px 6px",border:"none",borderRadius:2,backgroundColor:Ae?mr(p,.15):"transparent",color:Ae?p:"#64748b",cursor:"pointer",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:Ae?600:400,textTransform:"capitalize"},children:V},V)})}),_e(Vn,{dimmed:Re,children:gn("div",{style:{display:"flex",alignItems:"center"},children:[_e(Jr,{value:Ut,onChange:V=>{Je("gap"),ln(V)},onPreview:ct("gap",Ft),onScrubEnd:()=>Je("gap"),onReset:()=>{i(Ve),i("gap")},isModified:Xe,accentColor:p,defaultUnit:v,children:B==="column"||B==="column-reverse"?_e(fc,{size:12,strokeWidth:Xe?2.5:1.5}):_e(pc,{size:12,strokeWidth:Xe?2.5:1.5})}),_e(ao,{property:Ve,value:De.gap||(Sn==="fixed"?Ut:`${Math.max(0,Math.round(Ct()*1e3)/1e3)}px`),onChange:V=>ln(V),isModified:Xe||"gap"in De,style:{...bn,flex:1,minWidth:0},unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:C})]})})]})]}),w&&gn("div",{onMouseEnter:()=>f?.("gap"),onMouseLeave:()=>f?.("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:G,transition:"opacity 150ms ease"},children:[_e(Xp,{gridCols:ie,gridRows:Ke,gridModified:He,accentColor:p,onColsChange:V=>o("grid-template-columns",`repeat(${V}, 1fr)`),onRowsChange:V=>o("grid-template-rows",`repeat(${V}, 1fr)`)}),gn("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[_e(Vn,{dimmed:Re,children:gn("div",{style:{display:"flex",alignItems:"center"},children:[_e(Jr,{value:ne||K,onChange:V=>{Je("column-gap"),o("column-gap",V)},onPreview:ct("column-gap",zt("column-gap")),onScrubEnd:()=>Je("column-gap"),onReset:()=>i("column-gap"),isModified:r("column-gap"),accentColor:p,defaultUnit:v,children:_e(pc,{size:12,strokeWidth:r("column-gap")?2.5:1.5})}),_e(ao,{property:"column-gap",value:De["column-gap"]||ne||K,onChange:V=>o("column-gap",V),isModified:r("column-gap")||"column-gap"in De,placeholder:"col",style:{...bn,flex:1,minWidth:0},unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:C})]})}),_e(Vn,{dimmed:Re,children:gn("div",{style:{display:"flex",alignItems:"center"},children:[_e(Jr,{value:_||K,onChange:V=>{Je("row-gap"),o("row-gap",V)},onPreview:ct("row-gap",zt("row-gap")),onScrubEnd:()=>Je("row-gap"),onReset:()=>i("row-gap"),isModified:r("row-gap"),accentColor:p,defaultUnit:v,children:_e(fc,{size:12,strokeWidth:r("row-gap")?2.5:1.5})}),_e(ao,{property:"row-gap",value:De["row-gap"]||_||K,onChange:V=>o("row-gap",V),isModified:r("row-gap")||"row-gap"in De,placeholder:"row",style:{...bn,flex:1,minWidth:0},unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:C})]})})]})]}),z&&gn("div",{onMouseEnter:()=>f?.("padding"),onMouseLeave:()=>f?.("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:G,transition:"opacity 150ms ease"},children:[_e(Vn,{style:{flex:1},dimmed:Re,children:gn("div",{style:{display:"flex",alignItems:"center"},children:[_e(Jr,{value:Me.left,onChange:V=>{Je("padding-h"),Oe(V)},onPreview:ct("padding-h",ht),onScrubEnd:()=>Je("padding-h"),onReset:()=>i("padding"),isModified:r("padding"),accentColor:p,defaultUnit:v,snapSteps:ca,children:_e(Gp,{size:12,strokeWidth:r("padding")?2.5:1.5})}),_e(ao,{property:"padding",value:De["padding-h"]||Me.left,onChange:V=>Oe(V),isModified:r("padding")||"padding-h"in De,placeholder:"H pad",style:{...bn,flex:1,minWidth:0},unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:C})]})}),_e(Vn,{style:{flex:1},dimmed:Re,children:gn("div",{style:{display:"flex",alignItems:"center"},children:[_e(Jr,{value:Me.top,onChange:V=>{Je("padding-v"),lt(V)},onPreview:ct("padding-v",qt),onScrubEnd:()=>Je("padding-v"),onReset:()=>i("padding"),isModified:r("padding"),accentColor:p,defaultUnit:v,snapSteps:ca,children:_e(Jp,{size:12,strokeWidth:r("padding")?2.5:1.5})}),_e(ao,{property:"padding",value:De["padding-v"]||Me.top,onChange:V=>lt(V),isModified:r("padding")||"padding-v"in De,placeholder:"V pad",style:{...bn,flex:1,minWidth:0},unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:v,onUnitCycle:C})]})})]}),gn("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:G,transition:"opacity 150ms ease"},children:[_e("input",{type:"checkbox",checked:Ye==="hidden",onChange:V=>o("overflow",V.target.checked?"hidden":"visible"),style:{margin:0,accentColor:p}}),"Clip content"]})]})]})}import{AlignCenter as qp,AlignJustify as Zp,AlignLeft as Qp,AlignRight as ef,Baseline as tf,ChevronDown as nf,WholeWord as of}from"lucide-react";import{jsx as Lt,jsxs as Fo}from"react/jsx-runtime";var yc={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function bc({element:e,getValue:t,handleChange:n,isModified:o,onResetProperty:r,isCollapsed:i,onToggle:a,sectionHeaderStyle:s,accentColor:l,colorVariables:c,activeColorDropdown:d,onColorDropdownChange:u,panelContentRef:p,preferredUnit:f,onUnitCycle:v}){let C=t("font-family"),x=t("font-size"),I=t("font-weight"),B=t("line-height"),T=t("letter-spacing"),R=t("text-align"),w=t("color"),z=String(I),X=yc[z]||z,j=Or(e,w),E=w.includes("var(")?null:ai(j,c),L=({align:m,icon:$})=>{let ge=R===m;return Lt("button",{type:"button",onClick:()=>n("text-align",m),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:ge?mr(l,.15):"transparent",color:ge?l:"#64748b",cursor:"pointer"},children:$})},g=C.split(",")[0]?.trim().replace(/^["']|["']$/g,"")||"System";return Fo("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Lt("div",{style:s,children:Lt("span",{children:"Typography"})}),Fo("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[Lt(Vn,{children:Fo("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[Lt("input",{type:"text",value:C,onChange:m=>n("font-family",m.target.value),style:{...bn,flex:1,minWidth:0,padding:0,fontWeight:o("font-family")?600:400,color:o("font-family")?l:"inherit"},title:C}),Lt(nf,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),Fo("div",{style:{display:"flex",gap:4},children:[Lt(Vn,{style:{flex:1},children:Lt("select",{value:z,onChange:m=>n("font-weight",m.target.value),style:{...bn,padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:o("font-weight")?600:400,color:o("font-weight")?l:"inherit"},children:Object.entries(yc).map(([m,$])=>Lt("option",{value:m,children:$},m))})}),Lt(Vn,{style:{flex:1},children:Lt("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:Lt(ao,{property:"font-size",value:x,onChange:m=>n("font-size",m),isModified:o("font-size"),min:1,max:999,style:{...bn,padding:"6px 8px",paddingRight:24,fontWeight:o("font-size")?600:400,color:o("font-size")?l:"inherit"},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999"},preferredUnit:f,onUnitCycle:v})})})]}),Fo("div",{style:{display:"flex",gap:4},children:[Lt(Vn,{style:{flex:1},children:Fo("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[Lt(tf,{size:12,style:{color:o("line-height")?l:"#999",flexShrink:0}}),Lt(ao,{property:"line-height",value:B,onChange:m=>n("line-height",m),isModified:o("line-height"),step:.1,min:0,placeholder:"Auto",style:{...bn,flex:1,minWidth:0,padding:0,fontWeight:o("line-height")?600:400,color:o("line-height")?l:"inherit"},showUnit:!1})]})}),Lt(Vn,{style:{flex:1},children:Fo("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[Lt(of,{size:12,style:{color:o("letter-spacing")?l:"#999",flexShrink:0}}),Lt(ao,{property:"letter-spacing",value:T,onChange:m=>n("letter-spacing",m),isModified:o("letter-spacing"),step:.1,placeholder:"\u2014",style:{...bn,flex:1,minWidth:0,padding:0,fontWeight:o("letter-spacing")?600:400,color:o("letter-spacing")?l:"inherit"},showUnit:!1})]})})]}),Fo("div",{style:{display:"flex",gap:2,backgroundColor:Qn,borderRadius:2,padding:2},children:[Lt(L,{align:"left",icon:Lt(Qp,{size:14})}),Lt(L,{align:"center",icon:Lt(qp,{size:14})}),Lt(L,{align:"right",icon:Lt(ef,{size:14})}),Lt(L,{align:"justify",icon:Lt(Zp,{size:14})})]}),Fo("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[Lt("span",{onClick:o("color")?()=>r("color"):void 0,title:o("color")?"Click to reset":void 0,style:{fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:o("color")?l:"#64748b",fontWeight:o("color")?600:400,cursor:o("color")?"pointer":"default",width:40,flexShrink:0},children:"Color"}),Lt("div",{style:{flex:1,minWidth:0},children:Lt(fa,{value:w,resolvedValue:j,colorVariables:c,matchingVariable:E,onChange:m=>n("color",m),accentColor:l,modified:o("color"),panelContentRef:p,isDropdownOpen:d==="color",onDropdownChange:m=>u(m?"color":null)})})]})]})]})}import{Fragment as af,jsx as be,jsxs as Yt}from"react/jsx-runtime";var xc=[{name:"Background",properties:[{property:"background-color",label:"Color",type:"color"},{property:"opacity",label:"Opacity",type:"number",step:.1,min:0,max:1}]},{name:"Borders",properties:[{property:"border-width",label:"Width",type:"number",min:0,max:20},{property:"border-color",label:"Color",type:"color"},{property:"border-radius",label:"Radius",type:"number",min:0,max:100},{property:"border-style",label:"Style",type:"select",options:["none","solid","dashed","dotted","double"]}]},{name:"Effects",properties:[{property:"box-shadow",label:"Box Shadow",type:"text"},{property:"backdrop-filter",label:"Backdrop Filter",type:"backdrop-filter"},{property:"transform",label:"Transform",type:"text"}]}];function sf(e,t){let n=t.trim().toLowerCase();switch(e){case"opacity":return n==="1";case"border-width":return n==="0px"||n==="0"||n==="medium";case"border-radius":return n==="0px"||n==="0";case"border-style":return n==="none";case"box-shadow":return n==="none";case"backdrop-filter":return n==="none"||n==="";case"letter-spacing":return n==="normal"||n==="0px"||n==="0";case"background-color":return n==="rgba(0, 0, 0, 0)"||n==="transparent";default:return!1}}function ua(e,t){return!t||e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":"fixed"}function qi(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=er(t);if(typeof n.num=="number"&&!isNaN(n.num)){let o=n.unit==="%"?"px":n.unit||"px";return`${n.num}${o}`}return"auto"}}}function Vr(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 mc(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function hc(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 Qn="rgba(0, 0, 0, 0.04)",bn={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};function pa({label:e,property:t,cssValue:n,mode:o,onValueChange:r,onModeChange:i,modified:a,dimmed:s,dropdownOpen:l,onDropdownChange:c,panelContentRef:d,accentColor:u="#3b82f6",onReset:p,minValue:f,maxValue:v,onMinChange:C,onMaxChange:x,onMinReset:I,onMaxReset:B,minModified:T,maxModified:R}){let w=er(n),z=a?w.unit||Gr(t):Gr(t),X=!a&&w.unit&&w.unit!==z?aa(w.num,z):w.num,[j,E]=vn(!1),[L,g]=vn(String(X)),[m,$]=vn(!1),ge=Fn(null),Ie=Fn(null),ue=Fn(null),ke=Fn(!1);eo(()=>{j||g(String(X))},[X,j]),eo(()=>{if(!l)return;let ie=Ge=>{Ie.current&&!Ge.composedPath().includes(Ie.current)&&ue.current&&!Ge.composedPath().includes(ue.current)&&c?.(!1)},Ke=Ge=>{Ge.key==="Escape"&&c?.(!1)};return document.addEventListener("mousedown",ie),document.addEventListener("keydown",Ke),()=>{document.removeEventListener("mousedown",ie),document.removeEventListener("keydown",Ke)}},[l,c]),eo(()=>{j&&ge.current&&(ge.current.focus(),ge.current.select())},[j]);let Me=()=>{let ie=Ui(L,t,n,a);r(ie||`${Math.max(0,parseFloat(L)||0)}${z}`),E(!1)},K=()=>{if(ke.current){ke.current=!1;return}Me()},_=ie=>{if(ie.key==="Enter"){Me();return}if(ie.key==="Escape"){ke.current=!0,g(String(X)),E(!1);return}if(ie.key==="ArrowUp"||ie.key==="ArrowDown"){ie.preventDefault();let Ke=ie.key==="ArrowUp"?1:-1,Ge=ie.shiftKey?8:ie.altKey?.1:1,ve=parseFloat(L)||0,Re=Math.round(Math.max(0,ve+Ke*Ge)*1e3)/1e3;g(String(Re)),r(`${Re}${z}`)}},ne={fixed:"Fixed",hug:"Hug",fill:"Fill"},he={fixed:be(vc,{size:12}),hug:be(rf,{size:12}),fill:be(vc,{size:12})},ze=()=>{c?.(!l)},Ye=()=>{if(!ue.current||!d?.current)return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let ie=ue.current.getBoundingClientRect(),Ke=d.current.getBoundingClientRect();return{position:"fixed",top:ie.bottom+4,left:Ke.left+4,width:Ke.width-8}};return Yt("div",{ref:ue,onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:j?u:m?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Qn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:s?.3:1},children:[be("span",{onClick:a&&p?p:void 0,title:a?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:a?u:"#999",fontWeight:a?600:400,padding:"0 8px",flexShrink:0,cursor:a?"pointer":"default"},children:e}),o==="fixed"?j?be("input",{ref:ge,type:"text",inputMode:"numeric",value:L,onChange:ie=>g(ie.target.value),onKeyDown:_,onBlur:K,style:{...bn,flex:1,minWidth:0,padding:"4px 2px"}}):be("span",{onClick:()=>E(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:X}):be("span",{style:{flex:1}}),Yt("button",{type:"button",onClick:ze,style:{display:"flex",alignItems:"center",gap:2,padding:"4px 8px",border:"none",outline:"none",backgroundColor:"transparent",color:"#999",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"pointer",flexShrink:0},children:[ne[o],be(ga,{size:12})]}),l&&Yt("div",{ref:Ie,style:{...Ye(),backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:12,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[Yt("button",{type:"button",onClick:()=>{i("fixed"),c?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="fixed"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="fixed"?600:400,cursor:"pointer",textAlign:"left"},children:[he.fixed,Yt("span",{children:["Fixed ",t," (",n,")"]}),o==="fixed"&&be(Zi,{size:14,style:{marginLeft:"auto"}})]}),Yt("button",{type:"button",onClick:()=>{i("hug"),c?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="hug"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="hug"?600:400,cursor:"pointer",textAlign:"left"},children:[he.hug,be("span",{children:"Hug contents"}),o==="hug"&&be(Zi,{size:14,style:{marginLeft:"auto"}})]}),Yt("button",{type:"button",onClick:()=>{i("fill"),c?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="fill"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="fill"?600:400,cursor:"pointer",textAlign:"left"},children:[he.fill,be("span",{children:"Fill container"}),o==="fill"&&be(Zi,{size:14,style:{marginLeft:"auto"}})]}),be("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),Yt("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[Yt("div",{style:{display:"flex",alignItems:"center",backgroundColor:Qn,borderRadius:2,padding:"4px 8px"},children:[be("span",{onClick:T?ie=>{ie.stopPropagation(),I?.()}:void 0,title:T?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:T?u:"#999",fontWeight:T?600:400,marginRight:8,flexShrink:0,cursor:T?"pointer":"default"},children:"Min"}),be("input",{type:"text",value:f||"",placeholder:"\u2014",onChange:ie=>C?.(ie.target.value),onClick:ie=>ie.stopPropagation(),style:{...bn,flex:1,minWidth:0,padding:0,textAlign:"right",color:T?u:"inherit",fontWeight:T?600:400}})]}),Yt("div",{style:{display:"flex",alignItems:"center",backgroundColor:Qn,borderRadius:2,padding:"4px 8px"},children:[be("span",{onClick:R?ie=>{ie.stopPropagation(),B?.()}:void 0,title:R?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:R?u:"#999",fontWeight:R?600:400,marginRight:8,flexShrink:0,cursor:R?"pointer":"default"},children:"Max"}),be("input",{type:"text",value:v||"",placeholder:"\u2014",onChange:ie=>x?.(ie.target.value),onClick:ie=>ie.stopPropagation(),style:{...bn,flex:1,minWidth:0,padding:0,textAlign:"right",color:R?u:"inherit",fontWeight:R?600:400}})]})]})]})]})}function Vn({children:e,style:t,dimmed:n}){let[o,r]=vn(!1);return be("div",{onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:o?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Qn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:n?.3:1,...t},children:e})}function zo({children:e}){let[t,n]=vn(!1);return be("div",{onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:t?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Qn,transition:"border-color 100ms ease"},children:e})}function ao({property:e,value:t,onChange:n,isModified:o=!1,step:r=1,min:i,max:a,style:s,placeholder:l,showUnit:c=!0,unitStyle:d,preferredUnit:u,onUnitCycle:p}){let f=er(t),v=Gr(e),C=Yi[e],I=u&&C&&C.includes(u)?u:v,B=o&&f.unit||I,T=!o&&f.unit&&f.unit!==B?aa(f.num,B):f.num,[R,w]=vn(!1),[z,X]=vn(""),j=K=>{w(!0),X(String(T||"")),requestAnimationFrame(()=>K.target.select())},E=()=>{if(w(!1),z.trim()){let K=Ui(z,e,t,o);K&&n(K)}},L=K=>{let _=K.target.value;X(_);let ne=_.trim(),he=ne.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),ze=ne.match(/^(-?[\d.]+)$/);if(he){let Ye=parseFloat(he[1]);isNaN(Ye)||n(`${Ye}${he[2].toLowerCase()}`)}else if(ze){let Ye=parseFloat(ze[1]);isNaN(Ye)||n(`${Ye}${B}`)}},g=K=>{if(K.key==="Enter"){if(z.trim()){let _=Ui(z,e,t,o);_&&n(_)}K.target.blur();return}if(K.key==="ArrowUp"||K.key==="ArrowDown"){K.preventDefault();let _=K.shiftKey?10:K.altKey?.1:1,ne=(K.key==="ArrowUp"?1:-1)*r*_,he=parseFloat(z)||T||0,ze=Math.round((he+ne)*1e3)/1e3;i!==void 0&&(ze=Math.max(i,ze)),a!==void 0&&(ze=Math.min(a,ze)),X(String(ze)),n(`${ze}${B}`)}},m=/^-?[\d.]/.test(t.trim()),$=R?z:m?String(T):"",Ie=R&&/\s*(rem|em|px|%)\s*$/i.test(z)?"":B,ue=p&&(Ie==="rem"||Ie==="px"),ke={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},Me={...d??ke,pointerEvents:"auto",cursor:"pointer"};return Yt(af,{children:[be("input",{type:"text",inputMode:"decimal",value:$,onFocus:j,onBlur:E,onChange:L,onKeyDown:g,placeholder:l,style:s}),c&&Ie&&be("span",{style:ue?Me:d??ke,onClick:ue?p:void 0,title:ue?"Click to switch units":void 0,children:Ie})]})}function fa({value:e,resolvedValue:t,colorVariables:n,matchingVariable:o,onChange:r,accentColor:i="#3b82f6",modified:a,panelContentRef:s,isDropdownOpen:l,onDropdownChange:c}){let[d,u]=vn(!1),p=e,[f,v]=vn(p),[C,x]=vn(!1),[I,B]=vn(!1),[T,R]=vn(!1),w=Fn(null),z=Fn(null),X=Fn(null),j=l!==void 0?l:C,E=c||x,L=So(()=>{if(!X.current)return{position:"fixed",top:0,left:0,width:200};let K=X.current.getBoundingClientRect();if(s?.current){let _=s.current.getBoundingClientRect();return{position:"fixed",top:K.bottom+4,left:_.left+4,width:_.width-8}}return{position:"fixed",top:K.bottom+4,left:K.left,width:K.width}},[s]);eo(()=>{d||v(e)},[e,d]),eo(()=>{if(!j&&!I)return;let K=ne=>{X.current&&!ne.composedPath().includes(X.current)&&(E(!1),B(!1))},_=ne=>{ne.key==="Escape"&&(E(!1),B(!1))};return document.addEventListener("mousedown",K),document.addEventListener("keydown",_),()=>{document.removeEventListener("mousedown",K),document.removeEventListener("keydown",_)}},[j,I]),eo(()=>{d&&w.current&&(w.current.focus(),w.current.select())},[d]);let g=Qi(()=>{if(!f||f.startsWith("#")||f.startsWith("rgb")||f.startsWith("hsl")||f.startsWith("oklch"))return[];let K=f.toLowerCase();return n.filter(_=>_.name.toLowerCase().includes(K)||_.usage.toLowerCase().includes(K)).slice(0,8)},[f,n]),m=()=>{r(f),u(!1),B(!1)},$=K=>{v(K),K.includes("var")||K.includes("--")||K.length>0&&!K.startsWith("#")?B(!0):B(!1)},ge=K=>{v(K.value),r(K.value),E(!1),B(!1),u(!1)},Ie=()=>{setTimeout(()=>{!j&&!I&&m()},150)},ue=K=>{K.key==="Enter"?m():K.key==="Escape"&&(v(e),u(!1),B(!1))},ke=Qi(()=>{let K=t.trim().toLowerCase();if(K.startsWith("#"))return K.length===4?`#${K[1]}${K[1]}${K[2]}${K[2]}${K[3]}${K[3]}`:K.slice(0,7);let _=K.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(_){let he=parseInt(_[1],10).toString(16).padStart(2,"0"),ze=parseInt(_[2],10).toString(16).padStart(2,"0"),Ye=parseInt(_[3],10).toString(16).padStart(2,"0");return`#${he}${ze}${Ye}`}let ne=K.match(/oklch\(\s*([\d.]+)/);if(ne){let he=Math.max(0,Math.min(1,parseFloat(ne[1]))),ze=Math.round(he*255).toString(16).padStart(2,"0");return`#${ze}${ze}${ze}`}return"#000000"},[t]);return Yt("div",{ref:X,onMouseEnter:()=>R(!0),onMouseLeave:()=>R(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:d?i:T?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Qn,transition:"border-color 100ms ease",overflow:"hidden"},children:[Yt("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[Yt("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[be("input",{type:"color",value:ke,onChange:K=>{let _=K.target.value;v(_),r(_)},style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),be("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),d?be("input",{ref:w,type:"text",value:f,onChange:K=>$(K.target.value),onKeyDown:ue,onBlur:Ie,style:{...bn,flex:1,minWidth:0}}):be("span",{onClick:()=>u(!0),style:{flex:1,minWidth:0,padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:a?i:"inherit"},title:p,children:p}),n.length>0&&be("button",{type:"button",onClick:()=>E(!j),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:be(ga,{size:12})})]}),I&&g.length>0&&be("div",{style:{...L(),backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,maxHeight:200,overflowY:"auto",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:g.map(K=>Yt("button",{type:"button",onClick:()=>ge(K),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:"transparent",color:"#1e293b",cursor:"pointer",textAlign:"left",fontSize:12},children:[be("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:K.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),be("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:K.name})]},K.name))}),j&&be("div",{ref:z,style:{...L(),backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,maxHeight:280,overflowY:"auto",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:n.map(K=>Yt("button",{type:"button",onClick:()=>ge(K),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:o?.usage===K.usage||e===K.value?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o?.usage===K.usage||e===K.value?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[be("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:K.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),be("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:K.name}),(o?.usage===K.usage||e===K.value)&&be(Zi,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},K.name))})]})}function Sc({element:e,elementInfo:t,selector:n,styleModifications:o,dispatch:r,onClose:i,onHover:a,accentColor:s="#3b82f6",toolbarRef:l}){let c=Fn(null),d=Fn(null),[u,p]=vn(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch{return!1}});eo(()=>{if(u)return;let G=setTimeout(()=>p(!0),50);return()=>clearTimeout(G)},[u]);let[f,v]=vn(null),[C,x]=vn(null),I=f!==null||C!==null,[B,T]=vn("rem"),R=So(()=>{T(G=>G==="rem"?"px":"rem")},[]),w=Fn(new Map),[z,X]=vn(""),j=Qi(()=>_s(),[]);eo(()=>{let G=le=>{if(le.key!=="Escape")return;let te=document.activeElement;te&&c.current?.contains(te)||i()};return window.addEventListener("keydown",G),()=>window.removeEventListener("keydown",G)},[i]);let E=Fn({top:0,left:0,maxHeight:400}),[,L]=vn(0),g="devtools-panel-position",m=Fn({x:0,y:0}),$=Fn(null),ge=Fn(!1);eo(()=>{try{let G=localStorage.getItem(g);if(G){let le=JSON.parse(G);typeof le.top=="number"&&typeof le.left=="number"&&(ge.current=!0,E.current={...E.current,top:le.top,left:le.left})}}catch{}},[]),eo(()=>{let G=te=>{let Oe=$.current;if(!Oe)return;let lt=Oe.startOffsetX+(te.clientX-Oe.startX),De=Oe.startOffsetY+(te.clientY-Oe.startY),ot=280,ct=16,Je=Math.max(ct,Math.min(window.innerWidth-ot-ct,E.current.left+lt)),ht=Math.max(ct,E.current.top+De);m.current={x:Je-E.current.left,y:ht-E.current.top};let qt=c.current,zt=qt?.parentElement;if(!zt)return;zt.style.top=`${ht}px`,zt.style.left=`${Je}px`;let nt=l?.current?.getBoundingClientRect(),Ve=window.innerHeight-16;nt&&Je+ot>nt.left&&(Ve=nt.top-8);let Ut=Math.max(0,ht),Xe=Math.max(200,Ve-Ut);qt&&(qt.style.maxHeight=`${Xe}px`)},le=()=>{if(!$.current)return;let te=E.current.top+m.current.y,Oe=E.current.left+m.current.x;E.current={...E.current,top:te,left:Oe},m.current={x:0,y:0},ge.current=!0;try{localStorage.setItem(g,JSON.stringify({top:te,left:Oe}))}catch{}$.current=null};return window.addEventListener("mousemove",G),window.addEventListener("mouseup",le),()=>{window.removeEventListener("mousemove",G),window.removeEventListener("mouseup",le)}},[]);let Ie=So(G=>{G.button!==0||G.target.closest("button")||(G.preventDefault(),$.current={startX:G.clientX,startY:G.clientY,startOffsetX:m.current.x,startOffsetY:m.current.y})},[]);eo(()=>{m.current={x:0,y:0};let G=(Oe=!1)=>{let lt=c.current,De=280,ot=8,ct,Je;if(ge.current)ct=E.current.top,Je=E.current.left;else{let Ve=e.getBoundingClientRect();Je=Ve.right+ot,ct=Ve.top,Je+De>window.innerWidth-ot&&(Je=Ve.left-De-ot),Je<ot&&(Je=Math.max(ot,(window.innerWidth-De)/2))}let ht=l?.current?.getBoundingClientRect(),qt=window.innerHeight-16;ht&&Je+De>ht.left&&(qt=ht.top-ot);let zt=Math.max(0,ct),nt=Math.max(200,qt-zt);if(E.current={top:ct,left:Je,maxHeight:nt},Oe&<){let Ve=lt.parentElement;Ve&&!ge.current&&(Ve.style.top=`${ct+m.current.y}px`,Ve.style.left=`${Je+m.current.x}px`),lt.style.maxHeight=`${nt}px`}else L(Ve=>Ve+1)};G(!1);let le=()=>G(!0),te=()=>G(!1);return window.addEventListener("scroll",le,{passive:!0}),window.addEventListener("resize",te,{passive:!0}),()=>{window.removeEventListener("scroll",le),window.removeEventListener("resize",te)}},[e]),eo(()=>{let G=c.current;if(!G)return;let le=te=>{let Oe=d.current;if(!Oe){te.preventDefault();return}let{scrollTop:lt,scrollHeight:De,clientHeight:ot}=Oe,ct=lt<=0&&te.deltaY<0,Je=lt+ot>=De&&te.deltaY>0;(ct||Je)&&te.preventDefault()};return G.addEventListener("wheel",le,{passive:!1}),()=>G.removeEventListener("wheel",le)},[]);let ue=Qi(()=>o.find(G=>G.selector===n),[o,n]),ke=So(G=>{let le=ue?.changes.find(te=>te.property===G);return le?le.modified:Oi(e,G)},[e,ue]),Me=So((G,le)=>{if(!G.includes("color"))return le;let te=le.trim(),lt=j.find(De=>De.usage===te||De.name===te)?.value||te;return Or(e,lt)},[j,e]),K=So(G=>{if(w.current.has(G))return w.current.get(G);let le=ue?.changes.find(Oe=>Oe.property===G);if(le)return le.original;let te=Oi(e,G);return w.current.set(G,te),te},[e,ue]),_=So((G,le)=>{let te=K(G),Oe=Me(G,le);tt(e,G,Oe),G==="backdrop-filter"&&tt(e,"-webkit-backdrop-filter",Oe),r({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:G,original:te,modified:Oe}})},[e,n,t,r,Me,K]),ne=So(G=>{o.find(Oe=>Oe.selector===n)?.changes.find(Oe=>Oe.property===G)&&e instanceof HTMLElement&&(e.style.removeProperty(G),r({type:"CLEAR_STYLE",payload:{selector:n,property:G}}),w.current.delete(G))},[e,n,o,r]),he=So(()=>{let G=z.split(";").map(le=>le.trim()).filter(le=>le);for(let le of G){let te=le.indexOf(":");if(te>0){let Oe=le.slice(0,te).trim(),lt=le.slice(te+1).trim();Oe&<&&_(Oe,lt)}}X("")},[z,_]),ze=So(G=>ue?.changes.some(le=>le.property===G)??!1,[ue]),Ye=G=>{let le=ke(G.property),te=ze(G.property),Oe=!te&&sf(G.property,le),lt={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};if(Oe&&G.type!=="backdrop-filter")return be(zo,{modified:!1,children:be("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:De=>_(G.property,De.target.value),style:{...lt,color:"#999"}})});switch(G.type){case"color":{let De=Or(e,le),ot=le.includes("var(")?null:ai(De,j);return be(fa,{value:le,resolvedValue:De,colorVariables:j,matchingVariable:ot,onChange:ct=>_(G.property,ct),accentColor:s,modified:te,panelContentRef:d,isDropdownOpen:C===G.property,onDropdownChange:ct=>x(ct?G.property:null)})}case"number":{if(!!Yi[G.property])return be(zo,{modified:te,children:be(ao,{property:G.property,value:le,onChange:ct=>_(G.property,ct),isModified:te,min:G.min,max:G.max,step:G.step||1,style:{...lt,paddingRight:32},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999"},preferredUnit:B,onUnitCycle:R})});let{num:ot}=er(le);return be(zo,{modified:te,children:be("input",{type:"number",value:ot,min:G.min,max:G.max,step:G.step||1,onChange:ct=>_(G.property,ct.target.value),style:lt})})}case"select":return be(zo,{modified:te,children:Yt("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[be("select",{value:le,onChange:De=>_(G.property,De.target.value),style:{...lt,cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"},children:G.options?.map(De=>be("option",{value:De,children:De},De))}),be("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:be(ga,{size:12})})]})});case"spacing":return be(zo,{modified:te,children:be("input",{type:"text",value:le,onChange:De=>_(G.property,De.target.value),placeholder:"e.g., 10px or 10px 20px",style:lt})});case"backdrop-filter":return be(dc,{value:le,onChange:De=>_(G.property,De),accentColor:s,modified:te,panelContentRef:d});default:return be(zo,{modified:te,children:be("input",{type:"text",value:le,onChange:De=>_(G.property,De.target.value),style:lt})})}},ie=t.reactComponent||t.tagName,Ke={position:"fixed",top:E.current.top,left:E.current.left,width:280,maxHeight:E.current.maxHeight,backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",zIndex:10002,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,overflow:"visible",display:"flex",flexDirection:"column",opacity:u?1:0,transition:"opacity 150ms ease"},Ge={display:"flex",alignItems:"center",justifyContent:"space-between",margin:4,padding:"4px 5px 4px 10px",backgroundColor:s,color:"#ffffff",cursor:$.current?"grabbing":"grab",userSelect:"none",WebkitUserSelect:"none"},ve={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 12px 6px",userSelect:"none",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:600,color:"#475569"},Re={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},at={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return be("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:E.current.top+m.current.y,left:E.current.left+m.current.x,zIndex:10002,pointerEvents:"none"},children:Yt("div",{ref:c,"data-devtools":"panel",style:{...Ke,position:"relative",top:0,left:0,zIndex:0,pointerEvents:"auto"},onMouseEnter:()=>a?.("element"),onMouseLeave:()=>a?.(null),children:[be("div",{"aria-hidden":"true",style:Vi()}),Yt("div",{style:Ge,onMouseDown:Ie,children:[be("div",{style:{display:"flex",alignItems:"center",gap:3,overflow:"hidden",minWidth:0},children:be("span",{style:{fontWeight:600,fontSize:12,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:ie})}),be("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"})]}),Yt("div",{ref:d,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[be("div",{style:{opacity:C?.3:1,transition:"opacity 150ms ease"},children:be(gc,{element:e,getValue:ke,getOriginalValue:K,handleChange:_,isModified:ze,onResetProperty:ne,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:ve,activeDropdown:f,onDropdownChange:v,panelContentRef:d,accentColor:s,onFieldHover:a,preferredUnit:B,onUnitCycle:R})}),be("div",{style:{opacity:f?.3:1,transition:"opacity 150ms ease"},children:be(bc,{element:e,getValue:ke,handleChange:_,isModified:ze,onResetProperty:ne,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:ve,accentColor:s,colorVariables:j,activeColorDropdown:C,onColorDropdownChange:x,panelContentRef:d,preferredUnit:B,onUnitCycle:R})}),xc.map((G,le)=>{let te=le===xc.length-1,Oe=C&&G.properties.some(De=>De.property===C);return Yt("div",{style:{borderBottom:te?"none":"1px solid rgba(0,0,0,0.08)",opacity:I&&!Oe?.3:1,transition:"opacity 150ms ease"},children:[be("div",{style:ve,children:be("span",{children:G.name})}),be("div",{style:{padding:"4px 0"},children:G.properties.map(De=>{let ot=ze(De.property),ct=Oe&&De.property!==C;return Yt("div",{style:{...Re,opacity:ct?.3:1,transition:"opacity 150ms ease"},children:[be("span",{onClick:ot?()=>ne(De.property):void 0,title:ot?"Click to reset":void 0,style:{...at,color:ot?s:"#64748b",fontWeight:ot?600:400,cursor:ot?"pointer":"default"},children:De.label}),be("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:Ye(De)})]},De.property)})})]},G.name)}),Yt("div",{style:{opacity:I?.3:1,transition:"opacity 150ms ease"},children:[be("div",{style:ve,children:be("span",{children:"Raw CSS"})}),Yt("div",{style:{padding:"8px 12px"},children:[be("textarea",{value:z,onChange:G=>X(G.target.value),placeholder:"property: value; ...",style:{width:"100%",height:60,padding:8,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"1px solid rgba(0,0,0,0.1)",borderRadius:2,resize:"vertical",outline:"none"}}),z.trim()&&be("button",{type:"button",onClick:he,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:s,color:"#fff",cursor:"pointer",opacity:z.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as lf,useLayoutEffect as cf,useState as df}from"react";import{Fragment as gf,jsx as yr,jsxs as ff}from"react/jsx-runtime";var ma=["flex-start","center","flex-end"],ha=["flex-start","center","flex-end"];function uf(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function pf(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 wc(e){let t=Array.from(e.children);if(t.length===0)return null;let n=1/0,o=1/0,r=-1/0,i=-1/0;for(let a of t){let s=a.getBoundingClientRect();s.width===0&&s.height===0||(s.top<n&&(n=s.top),s.left<o&&(o=s.left),s.bottom>r&&(r=s.bottom),s.right>i&&(i=s.right))}return n===1/0?null:new DOMRect(o,n,i-o,r-n)}function Cc({element:e,modifier:t,accentColor:n,refreshKey:o=0}){let[r,i]=df(null);if(lf(()=>{if(!e){i(null);return}let C=()=>i(wc(e));return C(),window.addEventListener("scroll",C,{passive:!0}),window.addEventListener("resize",C,{passive:!0}),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}},[e]),cf(()=>{e&&i(wc(e))},[e,o]),!r)return null;let a=r,s=window.getComputedStyle(e),l=s.display;if(l!=="flex"&&l!=="inline-flex")return null;let c=s.flexDirection,d=c==="column"||c==="column-reverse"?"vertical":"horizontal",u=d==="horizontal"?"vertical":"horizontal",p=[];if(t==="shift"){let C=uf(s.justifyContent);if(C){let x=ma.indexOf(C);d==="horizontal"?(x>0&&p.push("left"),x<ma.length-1&&p.push("right")):(x>0&&p.push("up"),x<ma.length-1&&p.push("down"))}}else{let C=pf(s.alignItems);if(C){let x=ha.indexOf(C);u==="horizontal"?(x>0&&p.push("left"),x<ha.length-1&&p.push("right")):(x>0&&p.push("up"),x<ha.length-1&&p.push("down"))}}if(p.length===0)return null;let f=14,v=7;return yr(gf,{children:p.map(C=>{let x,I;switch(C){case"right":x=a.right+f,I=a.top+a.height/2;break;case"left":x=a.left-f,I=a.top+a.height/2;break;case"down":x=a.left+a.width/2,I=a.bottom+f;break;case"up":x=a.left+a.width/2,I=a.top-f;break}let B=C==="right"?0:C==="left"?180:C==="down"?90:-90,T={position:"fixed",left:x-v,top:I-v,width:v*2,height:v*2,pointerEvents:"none",zIndex:9997};return yr("div",{"data-devtools":"swipe-hint",style:T,children:yr("svg",{width:v*2,height:v*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:ff("g",{transform:`rotate(${B})`,children:[yr("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),yr("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),yr("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),yr("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},C)})})}import{useEffect as mf,useLayoutEffect as hf,useState as yf}from"react";import{jsx as ya,jsxs as ba}from"react/jsx-runtime";function bf(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 Ec({element:e,fontSize:t,lineHeight:n,accentColor:o,hoveredProperty:r,draggingProperty:i,cursorViewport:a}){let[s,l]=yf(null);if(mf(()=>{if(!e){l(null);return}let I=()=>{l(_r(e))};return I(),window.addEventListener("scroll",I,{passive:!0}),window.addEventListener("resize",I,{passive:!0}),()=>{window.removeEventListener("scroll",I),window.removeEventListener("resize",I)}},[e]),hf(()=>{e&&l(_r(e))},[e,t,n]),!s)return null;let c=s.width,d=s.height,u=bf(o,.2),p=i??r,f=8,v=2,C={position:"fixed",top:s.top,left:s.left,width:c,height:d,pointerEvents:"none",zIndex:9996,overflow:"visible"},x=I=>I==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return ba("div",{"data-devtools":"text-handles",style:C,children:[ba("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${d}`,children:[ya("rect",{x:"0.5",y:"0.5",width:Math.max(0,c-1),height:Math.max(0,d-1),fill:"none",stroke:u,strokeWidth:"1"}),(p==="font-size"||!p)&&ya("rect",{x:c-v/2,y:d/2-f/2,width:v,height:f,fill:o,stroke:"#ffffff",strokeWidth:p==="font-size"?4:2,paintOrder:"stroke"}),(p==="line-height"||!p)&&ya("rect",{x:c/2-f/2,y:d-v/2,width:f,height:v,fill:o,stroke:"#ffffff",strokeWidth:p==="line-height"?4:2,paintOrder:"stroke"})]}),a&&p&&(()=>{let I=p==="font-size"?"Aa":"Lh",B=x(p);return ba("div",{style:{position:"fixed",left:a.x+8,top:a.y-28,background:o,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:[I," ",B]})})()]})}import{Fragment as Xr,jsx as mt,jsxs as Kr}from"react/jsx-runtime";var kc=8,va=[0,1,2,4,8,12,16,20,24,28,32],Ur=8,xa="devtools-active-text";function vf(e){let t=e?.getBoundingClientRect();return!t||typeof window>"u"?{}:t.top<window.innerHeight/2?{avoidTop:t.bottom+Ur,avoidLeft:t.left-Ur,avoidRight:t.right+Ur}:{avoidBottom:t.top-Ur,avoidLeft:t.left-Ur,avoidRight:t.right+Ur}}function Tc(e,t,n=0,o,r,i=90){let a=e.left+window.scrollX+4,s=t==="top-left"?e.top+window.scrollY-Zo-n*Zo+4:e.bottom+window.scrollY+4-1+n*Zo,l=window.scrollY+4,c=window.scrollY+window.innerHeight-Zo-4,d=null;if(o&&r!==void 0){let u=o.getBoundingClientRect(),p=e.left+4;if(p+r+8+i>u.left&&p<u.right)if(u.top<window.innerHeight/2){let C=window.scrollY+u.bottom+4;C>l&&(l=C,d="top")}else{let C=window.scrollY+u.top-Zo-4;C<c&&(c=C,d="bottom")}}return l>c&&(c=l),s<l?s=d==="top"?l:e.top+window.scrollY+4:s>c&&(s=d==="bottom"?c:Math.max(e.top+window.scrollY+4,c)),{x:a,y:s}}function Ic({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:o,activeAnnotationIds:r,queuePositionMap:i,inFlightStyleSelectors:a,inFlightSelectorColors:s,onAttachImages:l,onViewThread:c,onCloseThread:d,onModelComponentsAdd:u,onModelComponentFocus:p,onModelComponentHover:f,modelComponentNames:v,modelPanelHoveredComponent:C,modelSpacingTokenHover:x,highlightedAnnotationIds:I,focusedThreadAnnotationId:B,externalCanvasRef:T,toolbarRef:R}){let{canvasRef:w,redrawAll:z,resizeCanvas:X}=jl(),j=sn(h=>{w.current=h,T&&(T.current=h)},[T,w]),E=Jt(!1);In(()=>{let h=w.current;if(!h)return;let b=()=>{E.current&&(E.current=!1,h.style.pointerEvents="")},H=y=>{y.button===0&&E.current&&b()};return window.addEventListener("mousedown",H),()=>window.removeEventListener("mousedown",H)},[w]);let[L,g]=St(!1),[m,$]=St(()=>{if(typeof window>"u")return null;try{let h=localStorage.getItem(xa);return h?JSON.parse(h):null}catch{return null}}),[ge,Ie]=St(null),[ue,ke]=St(null),[Me,K]=St(null),_=Jt(null),ne=Jt(null),he=Jt({x:0,y:0}),ze=Jt([]),Ye=Jt(0),[ie,Ke]=St(null),[Ge,ve]=St(new Map),Re=Jt(0),at=Jt(null),[G,le]=St(null),[te,Oe]=St(null),[lt,De]=St(null),[ot,ct]=St(null),Je=Jt({isDragging:!1,side:null,startX:0,startY:0,original:{top:0,right:0,bottom:0,left:0},element:null,elementInfo:null,selector:null,durableSelector:null}),[ht,qt]=St(null),[zt,nt]=St(null),[Ve,Ut]=St(null),[Xe,Ct]=St(null),$n=Jt({x:0,y:0}),[Sn,Mn]=St({x:0,y:0}),ln=Jt({isDragging:!1,hasMoved:!1,axis:null,startX:0,startY:0,originalRow:0,originalColumn:0,element:null,elementInfo:null,selector:null,durableSelector:null,isAuto:!1,originalJustifyContent:"",visualGap:0}),[Ft,q]=St(null),[ae,fe]=St(null),[Te,rt]=St(null),[dt,ft]=St(!1),[Kt,Wn]=St(0),[hn,Rn]=St(null),He=Jt({isDragging:!1,corner:null,startY:0,original:{"top-left":0,"top-right":0,"bottom-right":0,"bottom-left":0},maxRadius:0,element:null,elementInfo:null,selector:null,durableSelector:null}),[yt,V]=St(null),[Ae,qe]=St(null),[Et,cn]=St(null),ut=Jt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[Le,nn]=St(null),[Zt,jn]=St(null),[$t,To]=St(null),nr=Gl(),Io=Jt(s);Io.current=s;let jo=sn(h=>{let b=Io.current;if(!b||b.size===0)return!1;for(let H of b.keys())try{if(h.matches(H))return!0}catch{}return!1},[]),or=Jt(e);or.current=e;let yn=Jt(m);yn.current=m;let Go=Jt([]),Jo=Jt(n);Jo.current=n;let[Ze,fo]=St(null),kt=e.selectedAnnotationIds;Go.current=kt;let wn=sn((h,b=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:h,addToSelection:b}})},[t]),An=sn(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[Cn,Vo]=St(null),oo=Jt({x:window.scrollX,y:window.scrollY}),ro=Jt(null),Xn=Jt(null),[Qt,Mo]=St(oo.current);In(()=>(X(),window.addEventListener("resize",X),()=>window.removeEventListener("resize",X)),[X]),In(()=>{m?localStorage.setItem(xa,JSON.stringify(m)):localStorage.removeItem(xa)},[m]),Jl(m,$,ge,e.annotations,t);let Yo=Jt(ie);Yo.current=ie,In(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let h=b=>{if(!b.altKey||!Yo.current)return;b.preventDefault();let H=b.deltaY>0?-1:1;Re.current=Math.max(0,Re.current+H);let y=at.current;if(y){let k=Di(y,Re.current);Ke(k)}};return window.addEventListener("wheel",h,{passive:!1}),()=>window.removeEventListener("wheel",h)},[e.activeTool,e.isAnnotating]),In(()=>{e.activeTool!=="model"&&(Ke(null),ve(new Map),Re.current=0,at.current=null)},[e.activeTool]),In(()=>{let h=ie?.name??null,b=h&&v?.has(h)?h:null;f?.(b)},[ie,v,f]);let[Ro,Tr]=St(null);In(()=>{if(!C){Tr(null);return}let h=Pr(C.name),b=C.instanceIndex;Tr(h[b%h.length]??null)},[C]);let[Ao,Uo]=St([]);In(()=>{if(!x){Uo([]);return}x.token?.bindings?.length?Uo(Ls(x.token)):Uo(Rs(x.px))},[x]);let D=Jt(null),W=Jt(null);D.current=Ft,W.current=ae,In(()=>{let h=["flex-start","center","flex-end"],b=["flex-start","center","flex-end"],y=null,k=!1,M=null,N=null,P=(de,Ue)=>{let We=pr(de,Ue);for(;We&&We!==document.documentElement;){let en=window.getComputedStyle(We).display;if(en==="flex"||en==="inline-flex")return We;We=We.parentElement}return null},F=de=>{let Ue=window.getComputedStyle(de).flexDirection;return Ue==="column"||Ue==="column-reverse"?"vertical":"horizontal"},Z=de=>{let Ue=de.getAttribute("data-pm");return Ue||(Ue=Math.random().toString(36).substring(2,8),de.setAttribute("data-pm",Ue)),{selector:`[data-pm="${Ue}"]`,durableSelector:Jn(de)}},O=()=>{k=!0,y&&clearTimeout(y),y=setTimeout(()=>{k=!1,y=null},300)},J=(de,Ue,Gt)=>{let We=F(de);if(Ue===We){let _n=window.getComputedStyle(de).justifyContent,Rt=_n==="normal"||_n==="flex-start"||_n==="start"?"flex-start":_n==="flex-end"||_n==="end"?"flex-end":_n==="center"?"center":null;if(!Rt)return;let ir=h.indexOf(Rt)+Gt;if(ir<0||ir>=h.length)return;let Oo=h[ir],{selector:sr,durableSelector:xs}=Z(de);tt(de,"justify-content",Oo),t({type:"MODIFY_STYLES_BATCH",payload:{selector:sr,durableSelector:xs,element:Hn(de),changes:[{property:"justify-content",original:_n,modified:Oo}]}})}else{let _n=window.getComputedStyle(de).flexDirection,Rt=We==="horizontal"?"column":"row",{selector:_o,durableSelector:ir}=Z(de);tt(de,"flex-direction",Rt),t({type:"MODIFY_STYLES_BATCH",payload:{selector:_o,durableSelector:ir,element:Hn(de),changes:[{property:"flex-direction",original:_n,modified:Rt}]}})}Wn(en=>en+1)},Q=(de,Ue,Gt)=>{let en=F(de)==="horizontal"?"vertical":"horizontal";if(Ue!==en)return;let Rt=window.getComputedStyle(de).alignItems,_o=Rt==="normal"||Rt==="stretch"||Rt==="flex-start"||Rt==="start"?"flex-start":Rt==="flex-end"||Rt==="end"?"flex-end":Rt==="center"?"center":null;if(!_o)return;let Oo=b.indexOf(_o)+Gt;if(Oo<0||Oo>=b.length)return;let sr=b[Oo],{selector:xs,durableSelector:kd}=Z(de);tt(de,"align-items",sr),t({type:"MODIFY_STYLES_BATCH",payload:{selector:xs,durableSelector:kd,element:Hn(de),changes:[{property:"align-items",original:Rt,modified:sr}]}}),Wn(Td=>Td+1)},Y=20,Se=null,Pe=null,it=0,pt=(de,Ue,Gt)=>{let We=P(Ue,Gt);Rn(We?{modifier:de,target:We}:null)},st=de=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(de.key==="Shift"&&!de.altKey){let Ue=$n.current;pt("shift",Ue.x,Ue.y)}else if(de.key==="Alt"&&!de.shiftKey){let Ue=$n.current;pt("alt",Ue.x,Ue.y)}}},It=de=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let Ue=de.shiftKey&&!de.altKey,Gt=de.altKey&&!de.shiftKey;if(!Ue&&!Gt||de.buttons!==0){Se=null,Pe=null,it=0,M=null,N=null,Rn(null);return}if(M===null&&(M=de.clientX,N=de.clientY,pt(Ue?"shift":"alt",de.clientX,de.clientY)),k)return;Se===null&&(Se=de.clientX,Pe=de.clientY,it=0);let We=de.clientX-Se,en=de.clientY-Pe,_n=Math.abs(We)>=Math.abs(en)?We:en;if(Math.abs(_n)>3){let sr=_n>0?1:-1;if(it!==0&&sr!==it){Se=de.clientX,Pe=de.clientY,it=0;return}it=sr}if(Math.abs(We)<Y&&Math.abs(en)<Y)return;let Rt=P(M,N);if(!Rt)return;let _o=Math.abs(We)>=Math.abs(en)?"horizontal":"vertical",Oo=(_o==="horizontal"?We:en)>0?1:-1;Se=null,Pe=null,it=0,Ue?J(Rt,_o,Oo):Q(Rt,_o,Oo),O()},jt=de=>{(de.key==="Shift"||de.key==="Alt")&&(M=null,N=null,Se=null,Pe=null,it=0,Rn(null))},vt=()=>{Rn(null),Se=null,Pe=null,it=0};return window.addEventListener("keydown",st),window.addEventListener("mousemove",It),window.addEventListener("mousedown",vt),window.addEventListener("keyup",jt),()=>{window.removeEventListener("keydown",st),window.removeEventListener("mousemove",It),window.removeEventListener("mousedown",vt),window.removeEventListener("keyup",jt),y&&clearTimeout(y)}},[e.activeTool,e.isAnnotating,t]),In(()=>{let h=b=>{if(b.key==="Escape"){if(yn.current)return;if(e.activeTool==="model"&&Ge.size>0){b.preventDefault(),ve(new Map);return}if(Go.current.length>0){b.preventDefault(),An();return}}if(b.key==="Enter"&&e.activeTool==="model"&&Ge.size>0&&u){b.preventDefault();let M=[...Ge.keys()].filter(N=>!v?.has(N));M.length>0&&u(M),ve(new Map);return}if((b.metaKey||b.ctrlKey)&&b.key==="v"&&ze.current.length>0&&!yn.current){b.preventDefault(),Ye.current++;let M=Ye.current*20,P=ze.current[0]?.groupId?Math.random().toString(36).substring(2,9):void 0,F=ze.current.map(O=>({...O,id:Math.random().toString(36).substring(2,9),groupId:O.groupId?P:void 0,timestamp:Date.now(),points:O.points.map(J=>({x:J.x+M,y:J.y+M}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:F}});let Z=F.find(O=>O.type!=="text")||F[0];Z&&wn(Z.id);return}let H=Go.current;if(H.length===0||yn.current)return;let y=b.composedPath?.()[0]??b.target,k=y?.tagName;if(!(k==="INPUT"||k==="TEXTAREA"||y?.isContentEditable)&&(b.key==="Delete"||b.key==="Backspace")){if(b.preventDefault(),d){let M=or.current.annotations;for(let N of H){let P=M.find(Z=>Z.id===N);if(!P)continue;let F=P.threadId||P.groupId&&M.find(Z=>Z.groupId===P.groupId&&Z.threadId)?.threadId;F&&d(F)}}for(let M of H)t({type:"DELETE_ANNOTATION",payload:{id:M}});An()}};return window.addEventListener("keydown",h),()=>window.removeEventListener("keydown",h)},[t,An,wn,e.activeTool,Ge,v,u,d]);let oe=Lr(),re=Yr(()=>e.annotations.filter(h=>!h.pathname||h.pathname===oe),[e.annotations,oe]),ce=Yr(()=>e.styleModifications.filter(h=>!h.pathname||h.pathname===oe),[e.styleModifications,oe]),xe=vf(R?.current),Ee=xe.avoidTop,ye=xe.avoidBottom,Dt=xe.avoidLeft,Vt=xe.avoidRight,_t=Yr(()=>Gi(e.annotations),[e.annotations]),Tt=Yr(()=>{let h=new Map,b=new Set,H=1,y=[...e.annotations].sort((k,M)=>k.timestamp-M.timestamp);for(let k of y)if(!_t.has(k))if(k.groupId){if(!b.has(k.groupId)){b.add(k.groupId);let M=e.annotations.filter(N=>N.groupId===k.groupId);for(let N of M)h.set(N.id,H);H++}}else h.set(k.id,H),H++;return h},[e.annotations,_t]),Qe=Yr(()=>{if(kt.length===0)return null;let h=new Map;for(let b of kt){let H=e.annotations.find(k=>k.id===b);if(!H)continue;let y=H.groupId?e.annotations.filter(k=>k.groupId===H.groupId):[H];for(let k of y)if(k.linkedSelector&&!s?.has(k.linkedSelector)){let M=k.color||e.activeColor;h.set(k.linkedSelector,M)}}return h.size>0?h:null},[kt,e.annotations,e.activeColor,s]),En=Yr(()=>re.filter(h=>!(_t.has(h)||m&&!m.isNew&&h.id===m.id)),[re,_t,m]),Ln=sn((h=oo.current)=>{z(En,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,kt,kc,h.x,h.y,Tt,I,xe)},[En,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,kt,z,Tt,I,Ee,ye,Dt,Vt]);In(()=>{Ln(oo.current)},[Ln]),In(()=>{let h=()=>{let b={x:window.scrollX,y:window.scrollY};oo.current=b,ro.current===null&&(ro.current=window.requestAnimationFrame(()=>{ro.current=null;let H=oo.current;if(Ln(H),yn.current){Mo(y=>y.x===H.x&&y.y===H.y?y:H);return}Xn.current!==null&&window.clearTimeout(Xn.current),Xn.current=window.setTimeout(()=>{Xn.current=null;let y=oo.current;Mo(k=>k.x===y.x&&k.y===y.y?k:y)},80)}))};return window.addEventListener("scroll",h,{passive:!0}),()=>{window.removeEventListener("scroll",h),ro.current!==null&&(window.cancelAnimationFrame(ro.current),ro.current=null),Xn.current!==null&&(window.clearTimeout(Xn.current),Xn.current=null)}},[Ln]),In(()=>{if(ue){let h=Math.random().toString(36).substring(2,9);$({id:h,point:ue.point,text:"",fontSize:12,isNew:!0,groupId:ue.groupId}),ke(null)}},[ue]),In(()=>{Me&&($({id:Math.random().toString(36).substring(2,9),point:Me.point,text:"",fontSize:12,isNew:!0,linkedSelector:Me.linkedSelector,linkedAnchor:Me.linkedAnchor,elements:Me.elements}),K(null))},[Me]);let pn=Jt(null),Pn=m?.id??null;In(()=>{Pn&&_.current?requestAnimationFrame(()=>{let h=_.current;if(!h||(h.focus(),ne.current===Pn))return;ne.current=Pn;let b=yn.current;if(b){if(pn.current!==null){let H=Math.min(pn.current,h.value.length);h.setSelectionRange(H,H);return}if(!b.isNew&&b.clickPoint){let H=w.current;if(!H)return;let y=H.getContext("2d");if(!y)return;y.font=`${b.fontSize}px ${un}`;let k=b.fontSize*1.4,M=b.text.split(`
|
|
4
|
-
`),N=b.clickPoint.y-b.point.y,P=Math.max(0,Math.min(M.length-1,Math.floor(N/k))),F=b.clickPoint.x-b.point.x,Z=M[P]||"",O=0;for(let Q=0;Q<=Z.length;Q++){let Y=y.measureText(Z.substring(0,Q)).width;if(Y>F){let Se=Q>0?y.measureText(Z.substring(0,Q-1)).width:0;O=F-Se<Y-F?Q-1:Q;break}O=Q}let J=O;for(let Q=0;Q<P;Q++)J+=(M[Q]?.length||0)+1;h.setSelectionRange(J,J)}}}):(ne.current=null,pn.current=null)},[Pn,w]);let Lo=sn(h=>{let b=w.current;if(!b)return{x:0,y:0};let H=b.getBoundingClientRect(),y,k;if("touches"in h&&h.touches[0])y=h.touches[0].clientX,k=h.touches[0].clientY;else if("clientX"in h)y=h.clientX,k=h.clientY;else return{x:0,y:0};return{x:y-H.left+window.scrollX,y:k-H.top+window.scrollY}},[w]),Po=sn((h,b,H,y)=>{let k=H.x-b.x,M=H.y-b.y,N=k*k+M*M;if(N===0)return Math.sqrt((h.x-b.x)**2+(h.y-b.y)**2)<=y;let P=Math.max(0,Math.min(1,((h.x-b.x)*k+(h.y-b.y)*M)/N)),F=b.x+P*k,Z=b.y+P*M;return Math.sqrt((h.x-F)**2+(h.y-Z)**2)<=y},[]),Ir=sn(h=>{for(let H=re.length-1;H>=0;H--){let y=re[H];if(!y||_t.has(y))continue;let k=(y.strokeWidth||3)+4;switch(y.type){case"text":{if(!y.points[0]||!y.text)continue;let M=y.points[0],N=y.fontSize||12,P=w.current;if(P){let F=P.getContext("2d");if(F){F.font=`${N}px ${un}`;let Z=y.text.replace(/\n/g," "),O=M.x-Qt.x,J=ci(O),Q=di(F,Z,J),Y=F.measureText(Q).width,Se=N*1.4,Pe={x:M.x-Qt.x,y:M.y-Qt.y},it=js(Pe,N,xe,Y+8),pt={x:it.x+Qt.x,y:it.y+Qt.y};if(h.x>=pt.x-4-4&&h.x<=pt.x+Y+4+4&&h.y>=pt.y-4-4&&h.y<=pt.y+Se+4+4)return y}}break}case"rectangle":{if(y.points.length<2)continue;let M=y.points[0],N=y.points[y.points.length-1],P=Math.min(M.x,N.x),F=Math.max(M.x,N.x),Z=Math.min(M.y,N.y),O=Math.max(M.y,N.y),J=Po(h,{x:P,y:Z},{x:F,y:Z},k),Q=Po(h,{x:P,y:O},{x:F,y:O},k),Y=Po(h,{x:P,y:Z},{x:P,y:O},k),Se=Po(h,{x:F,y:Z},{x:F,y:O},k);if(J||Q||Y||Se)return y;break}case"circle":{if(y.points.length<2)continue;let M=y.points[0],N=y.points[y.points.length-1],P=(M.x+N.x)/2,F=(M.y+N.y)/2,Z=Math.abs(N.x-M.x)/2,O=Math.abs(N.y-M.y)/2,J=h.x-P,Q=h.y-F,Y=Math.sqrt((J/Z)**2+(Q/O)**2);if(Math.abs(Y-1)*Math.max(Z,O)<=k)return y;break}case"line":{if(y.points.length<2)continue;let M=y.points[0],N=y.points[y.points.length-1];if(Po(h,M,N,k))return y;break}case"freehand":{if(y.points.length<2)continue;for(let M=0;M<y.points.length-1;M++){let N=y.points[M],P=y.points[M+1];if(Po(h,N,P,k))return y}break}}}return null},[re,w,Po,_t,Qt.x,Qt.y,Ee,ye,Dt,Vt]),go=sn(h=>{let b=Ir(h);return b?.type==="text"?b:null},[Ir]),ei=sn(h=>{if(kt.length===0)return null;let b=kc/2+4;for(let H of kt){let y=e.annotations.find(k=>k.id===H);if(!(!y||y.points.length<2)){if(y.type==="line"){let k=y.points[0],M=y.points[y.points.length-1];if(Math.sqrt((h.x-k.x)**2+(h.y-k.y)**2)<=b)return{handle:"start",annotationId:H};if(Math.sqrt((h.x-M.x)**2+(h.y-M.y)**2)<=b)return{handle:"end",annotationId:H};continue}if(y.type==="circle"){let k=y.points[0],M=y.points[y.points.length-1],N=Math.min(k.x,M.x),P=Math.max(k.x,M.x),F=Math.min(k.y,M.y),Z=Math.max(k.y,M.y),O=(N+P)/2,J=(F+Z)/2,Q=[{handle:"top",x:O,y:F},{handle:"bottom",x:O,y:Z},{handle:"left",x:N,y:J},{handle:"right",x:P,y:J}];for(let{handle:Y,x:Se,y:Pe}of Q)if(Math.sqrt((h.x-Se)**2+(h.y-Pe)**2)<=b)return{handle:Y,annotationId:H};continue}if(y.type==="rectangle"||y.type==="freehand"){let k=y.points[0],M=y.points[y.points.length-1],N,P,F,Z;y.type==="freehand"?(N=Math.min(...y.points.map(J=>J.x)),P=Math.max(...y.points.map(J=>J.x)),F=Math.min(...y.points.map(J=>J.y)),Z=Math.max(...y.points.map(J=>J.y))):(N=Math.min(k.x,M.x),P=Math.max(k.x,M.x),F=Math.min(k.y,M.y),Z=Math.max(k.y,M.y));let O=[{corner:"topLeft",x:N,y:F},{corner:"topRight",x:P,y:F},{corner:"bottomLeft",x:N,y:Z},{corner:"bottomRight",x:P,y:Z}];for(let{corner:J,x:Q,y:Y}of O)if(Math.sqrt((h.x-Q)**2+(h.y-Y)**2)<=b)return{handle:J,annotationId:H}}}}return null},[kt,e.annotations]);In(()=>{let h=b=>{if(he.current={x:b.clientX+window.scrollX,y:b.clientY+window.scrollY},!m){let H=go(he.current);Ie(H?.id||null)}};return window.addEventListener("mousemove",h),()=>window.removeEventListener("mousemove",h)},[m,go]);let Ko=sn(()=>{if(!m)return;let h=m.images?.length||0;if(m.text.trim()||h>0)if(m.isNew){let b=Ai();t({type:"ADD_TEXT",payload:{point:m.point,text:m.text||(h>0?`[${h} image${h>1?"s":""}]`:""),fontSize:m.fontSize,id:b,groupId:m.groupId,linkedSelector:m.linkedSelector,linkedAnchor:m.linkedAnchor,elements:m.elements,...h>0?{imageCount:h}:{}}}),h>0&&m.images&&l&&l(b,m.images)}else t({type:"UPDATE_TEXT",payload:{id:m.id,text:m.text||(h>0?`[${h} image${h>1?"s":""}]`:""),...h>0?{imageCount:h}:{}}}),h>0&&m.images&&l&&l(m.id,m.images);else m.isNew||t({type:"DELETE_ANNOTATION",payload:{id:m.id}});$(null)},[m,t,l]),io=sn(h=>{for(let b=0;b<va.length-1;b++){let H=va[b],y=va[b+1];if(h<=(H+y)/2)return H;if(h<y)return y}return Math.round(h/8)*8},[]),wi=sn((h,b,H,y)=>{let k=H.top+Math.max(y.top,4),M=H.bottom-Math.max(y.bottom,4),N=H.left+Math.max(y.left,4),P=H.right-Math.max(y.right,4);if(h<H.left||h>H.right||b<H.top||b>H.bottom)return null;let F=b<k,Z=b>M,O=h<N,J=h>P;return F&&O?y.top>=y.left?"top":"left":F&&J?y.top>=y.right?"top":"right":Z&&O?y.bottom>=y.left?"bottom":"left":Z&&J?y.bottom>=y.right?"bottom":"right":F?"top":Z?"bottom":O?"left":J?"right":null},[]),ti=sn(h=>{if(!e.isAnnotating)return;if(e.inspectedElement&&e.activeTool==="hand"&&!("button"in h&&h.button===2)){h.preventDefault(),h.stopPropagation(),t({type:"SELECT_ELEMENT",payload:null});return}let b=Lo(h),H="shiftKey"in h&&h.shiftKey;if(e.activeTool==="inspector"){if("button"in h&&h.button===2)return;if(G&&!jo(G)){let M=e.annotations.find(st=>{if(!st.linkedSelector||!st.threadId)return!1;try{return G.matches(st.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 N=Hn(G),P=Jn(G),F=G.getBoundingClientRect(),Z=G.getAttribute("data-pm");Z||(Z=Math.random().toString(36).substring(2,8),G.setAttribute("data-pm",Z));let O=`[data-pm="${Z}"]`,J=ce.some(st=>{try{return G.matches(st.selector)}catch{return!1}}),Q=e.annotations.filter(st=>{if(!st.linkedSelector)return!1;try{return G.matches(st.linkedSelector)}catch{return!1}}).length,Y=(J?1:0)+Q,Se=F.top>=Zo*(1+Y)?"top-left":"bottom-left",Pe=w.current?.getContext("2d")??document.createElement("canvas").getContext("2d"),it;Pe&&(Pe.font=`12px ${un}`,it=Pe.measureText("Type here...").width);let pt=Tc(F,Se,Y,R?.current,it,0);K({point:pt,linkedSelector:O,linkedAnchor:Se,elements:[{...N,selector:P}]})}return}if(e.activeTool==="model"){if("button"in h&&h.button===2)return;if(ie){let M=ie.name;if(v?.has(M)){p?.(M);return}"shiftKey"in h&&h.shiftKey?ve(P=>{let F=new Map(P);return F.has(M)?F.delete(M):F.set(M,ie),F}):Ge.size===1&&Ge.has(M)?(u&&u([M]),ve(new Map)):ve(new Map([[M,ie]]))}return}if(e.activeTool==="hand"&&Ft&&ae){let M=Ft,N=M.getAttribute("data-pm");N||(N=Math.random().toString(36).substring(2,8),M.setAttribute("data-pm",N));let P=Jn(M),F=`[data-pm="${N}"]`,Z=Hn(M),O=fr(M),J=b.x-window.scrollX,Q=b.y-window.scrollY,Y=dt,Se=window.getComputedStyle(M).justifyContent,Pe=0;if(Y){let pt=Ho(M).find(st=>st.axis===ae);Pe=pt?ae==="column"?pt.w:pt.h:0}tt(M,"transition","none"),ln.current={isDragging:!0,hasMoved:!1,axis:ae,startX:J,startY:Q,originalRow:Y?Pe:O.row,originalColumn:Y?Pe:O.column,element:M,elementInfo:{...Z,selector:F},selector:F,durableSelector:P,isAuto:Y,originalJustifyContent:Se,visualGap:Pe},rt({axis:ae,row:Y?Pe:O.row,column:Y?Pe:O.column});return}if(e.activeTool==="hand"&&Le&&Zt){let M=Le,N=M.getAttribute("data-pm");N||(N=Math.random().toString(36).substring(2,8),M.setAttribute("data-pm",N));let P=`[data-pm="${N}"]`,F=Hn(M),{fontSize:Z,lineHeight:O}=si(M),J=Z>0?O/Z:1.2,Q=b.x-window.scrollX,Y=b.y-window.scrollY;tt(M,"transition","none");let Se=Jn(M);ut.current={isDragging:!0,property:Zt,startX:Q,startY:Y,originalFontSize:Z,originalLineHeight:O,originalRatio:J,element:M,elementInfo:{...F,selector:P},selector:P,durableSelector:Se},To({property:Zt,fontSize:Z,lineHeight:O});return}if(e.activeTool==="hand"&&yt&&Ae){let M=yt,N=M.getAttribute("data-pm");N||(N=Math.random().toString(36).substring(2,8),M.setAttribute("data-pm",N));let P=`[data-pm="${N}"]`,F=Jn(M),Z=Hn(M),O=gr(M),J=M.getBoundingClientRect(),Q=Math.floor(J.height/2),Y=b.y-window.scrollY;tt(M,"transition","none"),He.current={isDragging:!0,corner:Ae,startY:Y,original:O,maxRadius:Q,element:M,elementInfo:{...Z,selector:P},selector:P,durableSelector:F},cn({corner:Ae,radius:{...O}});return}if(e.activeTool==="hand"&&ht&&zt){let M=ht,N=M.getAttribute("data-pm");N||(N=Math.random().toString(36).substring(2,8),M.setAttribute("data-pm",N));let P=`[data-pm="${N}"]`,F=Jn(M),Z=Hn(M),O=Dr(M),J=b.x-window.scrollX,Q=b.y-window.scrollY;tt(M,"transition","none"),Je.current={isDragging:!0,side:zt,startX:J,startY:Q,original:O,element:M,elementInfo:{...Z,selector:P},selector:P,durableSelector:F},Ct({side:zt,padding:{...O}});return}let y=ei(b);if(y){let M=e.annotations.find(N=>N.id===y.annotationId);if(M&&M.type!=="text"&&(M.status??"pending")==="pending"){Vo({annotationId:y.annotationId,handle:y.handle,startPoint:b,originalPoints:[...M.points],hasMoved:!1});return}}let k=Ir(b);if(k&&k.points[0]){if(m&&Ko(),k.type!=="text"?(wn(k.id,H),k.color&&t({type:"SET_COLOR",payload:k.color})):H||An(),c){let M=k.threadId||(k.groupId?e.annotations.find(N=>N.groupId===k.groupId&&N.threadId)?.threadId:void 0);M&&c(M)}fo({annotation:k,startPoint:b,hasMoved:!1});return}if(H||An(),e.activeTool==="text"){m&&Ko();let M=Math.random().toString(36).substring(2,9);$({id:M,point:b,text:"",fontSize:12,isNew:!0});return}g(!0),t({type:"START_PATH",payload:b})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,m,kt,G,ht,zt,yt,Ae,Ft,ae,dt,Le,Zt,ie,Ge,v,u,p,c,Lo,Ir,ei,t,wn,An,Ko]),S=sn(h=>{let b=Lo(h);if(e.activeTool==="inspector"&&e.isAnnotating){let H=b.x-window.scrollX,y=b.y-window.scrollY,k=pr(H,y),M=k&&jo(k)?null:k;M!==G&&(le(M),Oe(M?Hn(M):null));return}if(e.activeTool==="model"&&e.isAnnotating){let H=b.x-window.scrollX,y=b.y-window.scrollY,k=pr(H,y);if(k!==at.current&&(at.current=k,Re.current=0),k){let M=Di(k,Re.current);Ke(M)}else Ke(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let H=b.x-window.scrollX,y=b.y-window.scrollY;$n.current={x:H,y},Mn({x:H,y});let k=nr.current.cmd,M=nr.current.shift;if(ln.current.isDragging){let P=ln.current,F=P.element;if(!F)return;if(!P.hasMoved){let Q=Math.abs(H-P.startX),Y=Math.abs(y-P.startY);if(Q<=2&&Y<=2)return;P.hasMoved=!0,P.isAuto&&(tt(F,"justify-content","normal"),tt(F,"row-gap",`${P.visualGap}px`),tt(F,"column-gap",`${P.visualGap}px`),ft(!1))}let Z=P.axis,O=P.originalRow,J=P.originalColumn;if(Z==="column"){let Q=H-P.startX;J=P.originalColumn+Q,k||(O=P.originalRow+Q)}else{let Q=y-P.startY;O=P.originalRow+Q,k||(J=P.originalColumn+Q)}O=Math.max(0,O),J=Math.max(0,J),M&&(O=io(O),J=io(J)),O=Math.round(O),J=Math.round(J),tt(F,"row-gap",`${O}px`),tt(F,"column-gap",`${J}px`),rt({axis:Z,row:O,column:J});return}if(He.current.isDragging){let P=He.current,F=P.element;if(!F)return;let Z=y-P.startY,O=P.corner,J=P.original,Q={...J};if(k){let Y=J[O]+Z;Y=Math.max(0,Math.min(P.maxRadius,Y)),M&&(Y=io(Y)),Y=Math.round(Y),Q[O]=Y}else{let Y=J[O]+Z;Y=Math.max(0,Math.min(P.maxRadius,Y)),M&&(Y=io(Y)),Y=Math.round(Y),Q={"top-left":Y,"top-right":Y,"bottom-right":Y,"bottom-left":Y}}tt(F,"border-top-left-radius",`${Q["top-left"]}px`),tt(F,"border-top-right-radius",`${Q["top-right"]}px`),tt(F,"border-bottom-right-radius",`${Q["bottom-right"]}px`),tt(F,"border-bottom-left-radius",`${Q["bottom-left"]}px`),cn({corner:O,radius:Q});return}if(ut.current.isDragging){let P=ut.current,F=P.element;if(!F)return;let Z=P.property,O=P.originalFontSize,J=P.originalLineHeight,Q=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(Z==="font-size"){let Se=H-P.startX;O=P.originalFontSize+Se,O=Math.max(1,O)}else{let Se=y-P.startY;J=P.originalLineHeight+Se,J=Math.max(O,J)}if(M)if(Z==="font-size"){let Se=Q[0],Pe=Math.abs(O-Se);for(let it of Q){let pt=Math.abs(O-it);pt<Pe&&(Se=it,Pe=pt)}O=Se}else{let Se=O>0?J/O:1.2,Pe=Math.round(Se*2)/2;J=O*Math.max(1,Pe)}O=Math.round(O),J=Math.round(J*10)/10,tt(F,"font-size",`${O}px`);let Y=O>0?Math.round(J/O*1e3)/1e3:1.2;tt(F,"line-height",`${Y}`),To({property:Z,fontSize:O,lineHeight:J});return}if(Je.current.isDragging){let P=Je.current,F=P.element;if(!F)return;let Z=P.side,O=P.original,J=O.top,Q=O.right,Y=O.bottom,Se=O.left;if(Z==="top"){let Pe=P.startY-y;J=O.top+Pe,k||(Y=O.bottom+Pe)}else if(Z==="bottom"){let Pe=y-P.startY;Y=O.bottom+Pe,k||(J=O.top+Pe)}else if(Z==="left"){let Pe=P.startX-H;Se=O.left+Pe,k||(Q=O.right+Pe)}else if(Z==="right"){let Pe=H-P.startX;Q=O.right+Pe,k||(Se=O.left+Pe)}J=Math.max(0,J),Q=Math.max(0,Q),Y=Math.max(0,Y),Se=Math.max(0,Se),M&&(J=io(J),Q=io(Q),Y=io(Y),Se=io(Se)),J=Math.round(J),Q=Math.round(Q),Y=Math.round(Y),Se=Math.round(Se),tt(F,"padding",`${J}px ${Q}px ${Y}px ${Se}px`),Ct({side:Z,padding:{top:J,right:Q,bottom:Y,left:Se}});return}let N=pr(H,y);for(;N&&N.tagName==="A";)N=N.parentElement;{let F=[];N&&F.push(N),yt&&yt!==N&&F.push(yt);let Z=null,O=16,J=null;for(let Q of F){let Y=Q.getBoundingClientRect(),Se=gr(Q),Pe=[["top-left",Y.left,Y.top+Se["top-left"]],["top-right",Y.right,Y.top+Se["top-right"]],["bottom-right",Y.right,Y.bottom-Se["bottom-right"]],["bottom-left",Y.left,Y.bottom-Se["bottom-left"]]];for(let[it,pt,st]of Pe){let It=Math.hypot(H-pt,y-st);It<O&&(O=It,Z=it,J=Q)}}if(Z&&J){V(J),qe(Z),ht&&qt(null),zt&&nt(null),Ft&&q(null),ae&&fe(null),ft(!1),Le&&nn(null),Zt&&jn(null);return}}yt&&V(null),Ae&&qe(null);{let P=[];N&&Ni(N)&&P.push(N);let F=N?.parentElement??null;for(;F&&F!==document.body&&P.length<3;)Ni(F)&&P.push(F),F=F.parentElement;for(let Z of P){let J=Ho(Z).find(Q=>H>=Q.x&&H<=Q.x+Q.w&&y>=Q.y&&y<=Q.y+Q.h);if(J){q(Z),fe(J.axis),ft(Bs(Z,J.axis)),ht&&qt(null),zt&&nt(null),Le&&nn(null),Zt&&jn(null);return}}}Ft&&q(null),ae&&fe(null),ft(!1);{let F=[];N&&F.push(N),Le&&Le!==N&&F.push(Le);let Z=null,O=1/0,J=null;for(let Q of F){if(!Ds(Q))continue;let Y=_r(Q);if(!Y)continue;let Se=H>=Y.left&&H<=Y.right&&y>=Y.top&&y<=Y.bottom,Pe=[["font-size",Y.right,Y.top+Y.height/2],["line-height",Y.left+Y.width/2,Y.bottom]];for(let[it,pt,st]of Pe){let It=Math.hypot(H-pt,y-st);(Se||It<12)&&It<O&&(O=It,Z=it,J=Q)}}Z&&J?(nn(J),jn(Z)):(Le&&nn(null),Zt&&jn(null))}if(N!==ht&&qt(N),N){let P=Dr(N),F=N.getBoundingClientRect(),Z=wi(H,y,F,P);nt(Z)}else nt(null);return}if(Cn){let{handle:H,originalPoints:y,hasMoved:k}=Cn,M=e.annotations.find(O=>O.id===Cn.annotationId);if(!M)return;let N="metaKey"in h,P=N&&(h.metaKey||h.ctrlKey),F=N&&h.shiftKey,Z;if(M.type==="line"){let O=y[0],J=y[y.length-1];H==="start"?Z=[b,J]:Z=[O,b]}else if(M.type==="freehand"){let O=Math.min(...y.map(We=>We.x)),J=Math.max(...y.map(We=>We.x)),Q=Math.min(...y.map(We=>We.y)),Y=Math.max(...y.map(We=>We.y)),Se=(O+J)/2,Pe=(Q+Y)/2,it=J-O||1,pt=Y-Q||1,st=it/pt,It=O,jt=J,vt=Q,de=Y;switch(H){case"topLeft":It=b.x,vt=b.y;break;case"topRight":jt=b.x,vt=b.y;break;case"bottomLeft":It=b.x,de=b.y;break;case"bottomRight":jt=b.x,de=b.y;break}if(P)switch(H){case"topLeft":jt=J+(O-It),de=Y+(Q-vt);break;case"topRight":It=O-(jt-J),de=Y+(Q-vt);break;case"bottomLeft":jt=J+(O-It),vt=Q-(de-Y);break;case"bottomRight":It=O-(jt-J),vt=Q-(de-Y);break}if(F){let We=jt-It,en=de-vt;if(Math.abs(We/en)>st){let Rt=Math.abs(en)*st*Math.sign(We);H==="topLeft"||H==="bottomLeft"?It=jt-Rt:jt=It+Rt}else{let Rt=Math.abs(We)/st*Math.sign(en);H==="topLeft"||H==="topRight"?vt=de-Rt:de=vt+Rt}}let Ue=jt-It||1,Gt=de-vt||1;Z=y.map(We=>({x:It+(We.x-O)/it*Ue,y:vt+(We.y-Q)/pt*Gt}))}else if(M.type==="circle"){let O=y[0],J=y[y.length-1],Q=Math.min(O.x,J.x),Y=Math.max(O.x,J.x),Se=Math.min(O.y,J.y),Pe=Math.max(O.y,J.y),it=(Q+Y)/2,pt=(Se+Pe)/2,st=Y-Q,It=Pe-Se,jt=Q,vt=Y,de=Se,Ue=Pe;switch(H){case"top":if(de=b.y,P&&(Ue=pt+(pt-b.y)),F){let We=(Ue-de)*(st/It)/2;jt=it-We,vt=it+We}break;case"bottom":if(Ue=b.y,P&&(de=pt-(b.y-pt)),F){let We=(Ue-de)*(st/It)/2;jt=it-We,vt=it+We}break;case"left":if(jt=b.x,P&&(vt=it+(it-b.x)),F){let We=(vt-jt)*(It/st)/2;de=pt-We,Ue=pt+We}break;case"right":if(vt=b.x,P&&(jt=it-(b.x-it)),F){let We=(vt-jt)*(It/st)/2;de=pt-We,Ue=pt+We}break}Z=[{x:jt,y:de},{x:vt,y:Ue}]}else{let O=y[0],J=y[y.length-1],Q=Math.min(O.x,J.x),Y=Math.max(O.x,J.x),Se=Math.min(O.y,J.y),Pe=Math.max(O.y,J.y),it=(Q+Y)/2,pt=(Se+Pe)/2,st=Y-Q||1,It=Pe-Se||1,jt=st/It,vt=Q,de=Y,Ue=Se,Gt=Pe;switch(H){case"topLeft":vt=b.x,Ue=b.y;break;case"topRight":de=b.x,Ue=b.y;break;case"bottomLeft":vt=b.x,Gt=b.y;break;case"bottomRight":de=b.x,Gt=b.y;break}if(P)switch(H){case"topLeft":de=Y+(Q-vt),Gt=Pe+(Se-Ue);break;case"topRight":vt=Q-(de-Y),Gt=Pe+(Se-Ue);break;case"bottomLeft":de=Y+(Q-vt),Ue=Se-(Gt-Pe);break;case"bottomRight":vt=Q-(de-Y),Ue=Se-(Gt-Pe);break}if(F){let We=de-vt,en=Gt-Ue;if(Math.abs(We/en)>jt){let Rt=Math.abs(en)*jt*Math.sign(We);H==="topLeft"||H==="bottomLeft"?vt=de-Rt:de=vt+Rt}else{let Rt=Math.abs(We)/jt*Math.sign(en);H==="topLeft"||H==="topRight"?Ue=Gt-Rt:Gt=Ue+Rt}}Z=[{x:vt,y:Ue},{x:de,y:Gt}]}t({type:"RESIZE_ANNOTATION",payload:{id:Cn.annotationId,points:Z,saveUndo:!k}}),k||Vo({...Cn,hasMoved:!0});return}if(Ze&&(Ze.annotation.status??"pending")==="pending"){let H=b.x-Ze.startPoint.x,y=b.y-Ze.startPoint.y;if((Math.abs(H)>2||Math.abs(y)>2)&&!Ze.hasMoved)fo({...Ze,hasMoved:!0,startPoint:b}),t({type:"MOVE_ANNOTATION",payload:{id:Ze.annotation.id,delta:{x:H,y},saveUndo:!0}});else if(Ze.hasMoved){let M=b.x-Ze.startPoint.x,N=b.y-Ze.startPoint.y;fo({...Ze,startPoint:b}),t({type:"MOVE_ANNOTATION",payload:{id:Ze.annotation.id,delta:{x:M,y:N}}})}return}!L||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:b})},[L,e.isAnnotating,e.activeTool,Ze,Cn,G,ht,zt,yt,Ae,Ft,ae,Le,Zt,Lo,t,io,wi]),A=sn(h=>{if(ut.current.isDragging){let y=ut.current,k=y.element;if(k&&y.selector&&y.elementInfo&&$t){k instanceof HTMLElement&&(k.style.removeProperty("font-size"),k.style.removeProperty("line-height"),k.style.removeProperty("transition"));let M=[];if(y.originalFontSize!==$t.fontSize&&(tt(k,"font-size",`${$t.fontSize}px`),M.push({property:"font-size",original:`${y.originalFontSize}px`,modified:`${$t.fontSize}px`})),y.originalLineHeight!==$t.lineHeight){let N=y.originalFontSize>0?Math.round(y.originalLineHeight/y.originalFontSize*1e3)/1e3:1.2,P=$t.fontSize>0?Math.round($t.lineHeight/$t.fontSize*1e3)/1e3:1.2;tt(k,"line-height",`${P}`),M.push({property:"line-height",original:`${N}`,modified:`${P}`})}M.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y.selector,durableSelector:y.durableSelector??void 0,element:y.elementInfo,changes:M}})}ut.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},To(null);return}if(ln.current.isDragging){let y=ln.current,k=y.element,M="button"in h&&h.button===2;if(!y.hasMoved&&!M&&k&&y.selector&&y.elementInfo){k instanceof HTMLElement&&k.style.removeProperty("transition");let N=["space-between","space-around","stretch","normal"],P=y.originalJustifyContent||"normal",F=N.indexOf(P),Z=N[(F+1)%N.length],O=[];Z==="normal"?(tt(k,"justify-content","normal"),O.push({property:"justify-content",original:y.originalJustifyContent,modified:"normal"})):Z==="stretch"?(tt(k,"justify-content",Z),tt(k,"row-gap","8px"),tt(k,"column-gap","8px"),O.push({property:"justify-content",original:y.originalJustifyContent||"normal",modified:Z}),y.originalRow!==8&&O.push({property:"row-gap",original:`${y.originalRow}px`,modified:"8px"}),y.originalColumn!==8&&O.push({property:"column-gap",original:`${y.originalColumn}px`,modified:"8px"})):(k instanceof HTMLElement&&(k.style.removeProperty("row-gap"),k.style.removeProperty("column-gap")),tt(k,"justify-content",Z),O.push({property:"justify-content",original:y.originalJustifyContent||"normal",modified:Z}),y.originalRow>0&&O.push({property:"row-gap",original:`${y.originalRow}px`,modified:"0px"}),y.originalColumn>0&&O.push({property:"column-gap",original:`${y.originalColumn}px`,modified:"0px"})),O.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y.selector,durableSelector:y.durableSelector??void 0,element:y.elementInfo,changes:O}})}else if(y.hasMoved&&k&&y.selector&&y.elementInfo&&Te){k instanceof HTMLElement&&(k.style.removeProperty("row-gap"),k.style.removeProperty("column-gap"),k.style.removeProperty("transition"));let N=[];y.isAuto?(k instanceof HTMLElement&&k.style.removeProperty("justify-content"),tt(k,"justify-content","normal"),tt(k,"row-gap",`${Te.row}px`),tt(k,"column-gap",`${Te.column}px`),N.push({property:"justify-content",original:y.originalJustifyContent,modified:"normal"}),N.push({property:"row-gap",original:"0px",modified:`${Te.row}px`}),N.push({property:"column-gap",original:"0px",modified:`${Te.column}px`})):(y.originalRow!==Te.row&&(tt(k,"row-gap",`${Te.row}px`),N.push({property:"row-gap",original:`${y.originalRow}px`,modified:`${Te.row}px`})),y.originalColumn!==Te.column&&(tt(k,"column-gap",`${Te.column}px`),N.push({property:"column-gap",original:`${y.originalColumn}px`,modified:`${Te.column}px`}))),N.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y.selector,durableSelector:y.durableSelector??void 0,element:y.elementInfo,changes:N}})}ln.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},rt(null);return}if(He.current.isDragging){let y=He.current,k=y.element;if(k&&y.selector&&y.elementInfo&&Et){k instanceof HTMLElement&&(k.style.removeProperty("border-top-left-radius"),k.style.removeProperty("border-top-right-radius"),k.style.removeProperty("border-bottom-right-radius"),k.style.removeProperty("border-bottom-left-radius"),k.style.removeProperty("transition"));let M=["top-left","top-right","bottom-right","bottom-left"],N={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},P=[];for(let F of M)y.original[F]!==Et.radius[F]&&(tt(k,N[F],`${Et.radius[F]}px`),P.push({property:N[F],original:`${y.original[F]}px`,modified:`${Et.radius[F]}px`}));P.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y.selector,durableSelector:y.durableSelector??void 0,element:y.elementInfo,changes:P}})}He.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},cn(null);return}if(Je.current.isDragging){let y=Je.current,k=y.element,M=y.selector,N=y.elementInfo;if(k&&M&&N&&Xe){let P=y.original,F=Xe.padding;k instanceof HTMLElement&&(k.style.removeProperty("padding"),k.style.removeProperty("transition"));let Z=[],O=[{prop:"padding-top",origVal:P.top,newVal:F.top},{prop:"padding-right",origVal:P.right,newVal:F.right},{prop:"padding-bottom",origVal:P.bottom,newVal:F.bottom},{prop:"padding-left",origVal:P.left,newVal:F.left}];for(let{prop:J,origVal:Q,newVal:Y}of O)Q!==Y&&(tt(k,J,`${Y}px`),Z.push({property:J,original:`${Q}px`,modified:`${Y}px`}));Z.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:M,durableSelector:y.durableSelector??void 0,element:N,changes:Z}})}Je.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},Ct(null);return}if(Cn){Vo(null);return}if(Ze){if(!Ze.hasMoved&&Ze.annotation.type==="text"&&(Ze.annotation.status??"pending")==="pending"){let y=Lo(h);$({id:Ze.annotation.id,point:Ze.annotation.points[0],text:Ze.annotation.text||"",fontSize:Ze.annotation.fontSize||12,isNew:!1,clickPoint:y,groupId:Ze.annotation.groupId})}fo(null);return}if(!L)return;let b=5;if(e.currentPath.length>=2){let y=e.currentPath[0],k=e.currentPath[e.currentPath.length-1],M=Math.abs(k.x-y.x),N=Math.abs(k.y-y.y);if((e.activeTool==="line"?Math.sqrt(M*M+N*N)<b:M<b&&N<b)&&["rectangle","circle","line"].includes(e.activeTool)){g(!1),t({type:"CANCEL_PATH"});return}}let H=Ms(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let y=e.currentPath[0],k=e.currentPath[e.currentPath.length-1],M=Math.min(y.x,k.x),N=Math.max(y.y,k.y),P=e.strokeWidth/2,F=Math.random().toString(36).substring(2,9);ke({point:{x:M-P+4,y:N+P+4},groupId:F}),g(!1),t({type:"FINISH_PATH",payload:{groupId:F,elements:H}});return}g(!1),t({type:"FINISH_PATH",payload:{elements:H}})},[L,Ze,Cn,Xe,Et,Te,$t,Lo,t,e.activeTool,e.currentPath,e.strokeWidth]),ee=sn(h=>{let b=h.target.value;pn.current=h.target.selectionStart,$(H=>H&&{...H,text:b})},[]),se=sn(h=>{h.key==="Escape"?$(null):h.key==="Enter"&&!h.shiftKey&&(h.preventDefault(),Ko())},[Ko]),we=sn(h=>{if(!m)return;let b=h.clipboardData.items,H=[];for(let y=0;y<b.length;y++){let k=b[y];if(k.type.startsWith("image/")){let M=k.getAsFile();M&&H.push(M)}}H.length>0&&(h.preventDefault(),$(y=>y?{...y,images:[...y.images||[],...H]}:null))},[m]),Ce=sn(h=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){h.preventDefault();let H=ht||Ft||yt||Le;if(H&&!jo(H)){let y=Hn(H),k=Jn(H);t({type:"SELECT_ELEMENT",payload:{el:H,info:{...y,selector:k}}})}return}h.preventDefault();let b=w.current;b&&(E.current=!0,b.style.pointerEvents="none",setTimeout(()=>{E.current&&(E.current=!1,b.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,ht,Ft,yt,Le,t,jo,w]);In(()=>{let h=re.filter(N=>N.linkedSelector);if(h.length===0)return;let b=null,H=document.createElement("canvas").getContext("2d"),y=()=>{let N=[];for(let P of h){let F=document.querySelector(P.linkedSelector);if(!F&&P.elements?.[0]?.selector&&P.linkedSelector.startsWith("[data-pm=")){try{F=document.querySelector(P.elements[0].selector)}catch{}if(F){let st=P.linkedSelector.match(/data-pm="([^"]+)"/)?.[1];st&&F.setAttribute("data-pm",st)}}if(!F)continue;let Z=F.getBoundingClientRect(),O=ce.some(st=>{try{return F.matches(st.selector)}catch{return!1}}),J=h.filter(st=>st.id!==P.id&&st.timestamp<P.timestamp&&st.linkedSelector===P.linkedSelector).length,Q=(O?1:0)+J,Y;if(P.text&&H){let st=P.fontSize||12;H.font=`${st}px ${un}`,Y=Math.max(...P.text.split(`
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
`).length)*m.fontSize*1.4+8:0,bt=Wt.height+8,Bo=Wt.isWrapped?bt-gt:0,rr=m?m.point.y-4-Qt.y-Bo:0,Xo=m?m.point.x-4-Qt.x:0,Ci=Wt.width+8,bs=m?Ws(rr,bt,xe,Xo,Ci):0,vs=m?{position:"fixed",left:Xo,top:bs,zIndex:9999,width:Ci,height:bt,padding:4,fontSize:m.fontSize,fontFamily:un,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:Wt.isWrapped?"pre-wrap":"pre",wordBreak:Wt.isWrapped?"break-word":void 0}:{},Do=h=>h?e.annotations.find(b=>b.id===h)?.linkedSelector??null:null,ni=(h,b)=>{if(!b)return!1;try{return h.matches(b)}catch{return!1}},et=[m?.linkedSelector,Me?.linkedSelector,Do(B),Do(lt),ot].filter(Boolean),on=h=>et.some(b=>ni(h,b));return Kr(Xr,{children:[mt("canvas",{ref:j,id:"devtools-canvas",style:me,onMouseDown:ti,onMouseMove:S,onMouseUp:h=>A(h),onMouseLeave:h=>{A(h),le(null),Oe(null)},onTouchStart:ti,onTouchMove:S,onTouchEnd:h=>A(h),onContextMenu:Ce}),m&&Kr(Xr,{children:[mt("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),mt("textarea",{id:"devtools-text-input",ref:_,value:m.text,onChange:ee,onKeyDown:se,onPaste:we,onBlur:Ko,placeholder:"Type here...",style:vs}),m.images&&m.images.length>0&&Kr("div",{"data-devtools":!0,style:{position:"fixed",left:m.point.x-4-Qt.x,top:m.point.y-4-Qt.y-20,zIndex:1e4,fontSize:11,fontFamily:"system-ui, sans-serif",color:"#fff",backgroundColor:"rgba(0,0,0,0.7)",padding:"2px 6px",borderRadius:3,whiteSpace:"nowrap"},children:[m.images.length," image",m.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&ce.length>0&&mt(oc,{styleModifications:ce,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(re.map(h=>h.groupId||h.id)).size,dispatch:t,inFlightSelectors:a,toolbarRef:R,onHoverSelector:ct}),e.activeTool==="hand"&&e.isAnnotating&&ce.length>0&&mt(ic,{styleModifications:ce,accentColor:e.activeColor}),e.isAnnotating&&mt(Yl,{annotations:re,supersededAnnotations:_t,inFlightIds:o,activeIds:r,queuePositions:i,scrollX:Qt.x,scrollY:Qt.y,annotationGroupMap:Tt,onViewThread:c,onSelectAnnotation:wn,onHoverAnnotation:De,canvasRef:w,toolbarRef:R}),e.isAnnotating&&s&&s.size>0&&mt(Ks,{inFlightSelectorColors:s}),e.isAnnotating&&Qe&&mt(Ks,{inFlightSelectorColors:Qe,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(Te?ln.current.element:Ft)&&mt(ta,{element:Te?ln.current.element:Ft,gap:Te?{row:Te.row,column:Te.column}:fr(Ft),accentColor:e.activeColor,hoveredAxis:ae,draggingAxis:Te?.axis??null,cursorViewport:Sn,isAutoGap:dt,refreshKey:Kt}),e.activeTool==="hand"&&e.isAnnotating&&hn&&mt(Cc,{element:hn.target,modifier:hn.modifier,accentColor:e.activeColor,refreshKey:Kt}),e.activeTool==="hand"&&e.isAnnotating&&!hn&&(Et?He.current.element:yt)&&mt(Zl,{element:Et?He.current.element:yt,radius:Et?.radius??gr(yt),accentColor:e.activeColor,hoveredCorner:Ae,draggingCorner:Et?.corner??null,cursorViewport:Sn}),e.activeTool==="hand"&&e.isAnnotating&&!hn&&($t?ut.current.element:Le)&&mt(Ec,{element:$t?ut.current.element:Le,fontSize:$t?.fontSize??si(Le).fontSize,lineHeight:$t?.lineHeight??si(Le).lineHeight,accentColor:e.activeColor,hoveredProperty:Zt,draggingProperty:$t?.property??null,cursorViewport:Sn}),e.activeTool==="hand"&&e.isAnnotating&&!hn&&(Xe?Je.current.element:ht)&&mt(sa,{element:Xe?Je.current.element:ht,padding:Xe?.padding??Dr(ht),accentColor:e.activeColor,hoveredSide:zt,draggingSide:Xe?.side??null,cursorViewport:Sn,refreshKey:$t?$t.fontSize+$t.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&mt(Xr,{children:G&&!e.inspectedElement&&(()=>{if(on(G))return null;let h=!!Me||!!m?.linkedSelector||re.some(b=>{if(!b.linkedSelector)return!1;try{return G.matches(b.linkedSelector)}catch{return!1}});return mt(xo,{element:G,isSelected:!1,elementInfo:te,color:e.activeColor,hideTooltip:h})})()}),(m?.linkedSelector||Me?.linkedSelector)&&(()=>{let h=m?.linkedSelector||Me?.linkedSelector;if(!h)return null;let b=null;try{b=document.querySelector(h)}catch{}return b?mt(xo,{element:b,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),B&&(()=>{let h=e.annotations.find(y=>y.id===B);if(!h?.linkedSelector)return null;let b=null;try{b=document.querySelector(h.linkedSelector)}catch{}if(!b)return null;let H=!!(o&&o.has(h.id));return mt(xo,{element:b,isSelected:!H,color:h.color,hideTooltip:!0})})(),lt&&(()=>{let h=e.annotations.find(k=>k.id===lt);if(!h?.linkedSelector)return null;let b=null;try{b=document.querySelector(h.linkedSelector)}catch{}if(!b)return null;let H=h.groupId?e.annotations.filter(k=>k.groupId===h.groupId):[h],y=!!(o&&H.some(k=>o.has(k.id)));return mt(xo,{element:b,isSelected:!y,color:h.color,hideTooltip:!0})})(),ot&&(()=>{let h=null;try{h=document.querySelector(ot)}catch{}if(!h)return null;let b=!!(a&&a.has(ot));return mt(xo,{element:h,isSelected:!b,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&Ge.size>0&&[...Ge.entries()].map(([h,b])=>mt(xo,{element:b.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:b.rootElement.tagName.toLowerCase(),reactComponent:h},color:"#8b5cf6"},h)),e.activeTool==="model"&&e.isAnnotating&&Ro&&mt(xo,{element:Ro.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:Ro.rootElement.tagName.toLowerCase(),reactComponent:Ro.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&Ao.length>0&&Ao.map((h,b)=>mt("div",{style:{position:"absolute",left:h.x,top:h.y,width:h.width,height:h.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:h.direction==="vertical"?Kr(Xr,{children:[mt("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),mt("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),mt("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),mt("div",{style:{position:"absolute",left:"calc(50% + 6px)",top:h.height<16?-6:"50%",transform:h.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(h.height)})]}):Kr(Xr,{children:[mt("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),mt("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),mt("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),mt("div",{style:{position:"absolute",left:h.width<30?0:"50%",top:(h.width<30,void 0),bottom:"calc(50% + 4px)",transform:h.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(h.width)})]})},b)),e.activeTool==="model"&&e.isAnnotating&&ie&&mt(xo,{element:ie.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:ie.rootElement.tagName.toLowerCase(),reactComponent:ie.name},color:v?.has(ie.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&Kr(Xr,{children:[Ve&&Ve!=="padding"&&Ve!=="gap"&&(()=>{let h=new Set(re.map(P=>P.groupId||P.id)).size,b=e.inspectedElement.info.selector,H=ce.findIndex(P=>P.selector===b),y=H>=0?h+H+1:h+ce.length+1,k=ce.find(P=>P.selector===b),M=k?.changes.length??0,N=!!k?.captured;return mt(xo,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:N?"#999999":e.activeColor,annotationNumber:y,changeCount:M})})(),Ve==="padding"&&mt(sa,{element:e.inspectedElement.el,padding:Dr(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),Ve==="gap"&&mt(ta,{element:e.inspectedElement.el,gap:fr(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),mt(Sc,{element:e.inspectedElement.el,elementInfo:e.inspectedElement.info,selector:e.inspectedElement.info.selector,styleModifications:ce,dispatch:t,onClose:()=>t({type:"SELECT_ELEMENT",payload:null}),onHover:Ut,accentColor:e.activeColor,toolbarRef:R})]})]})}import{useCallback as Un,useEffect as mn,useMemo as Sr,useRef as Ot,useState as wr}from"react";import{Check as zg,Circle as Fg,Component as $g,Fingerprint as Wg,Hand as jg,MessageCircle as Gg,Pen as Jg,RefreshCw as Vg,Slash as Yg,Square as Ug,Trash2 as Kg,Type as Xg}from"lucide-react";import{useEffect as Mc,useRef as Rc}from"react";function Ac(e,t,n,o,r){let i=Rc(0),a=Rc(t.annotations);Mc(()=>{if(!n.current||!e)return;a.current=t.annotations;let s=t.annotations.length;s>0&&(s>=i.current||!o)&&(localStorage.setItem(r.annotations,JSON.stringify(t.annotations)),i.current=s)},[t.annotations,e,o,n,r]),Mc(()=>{n.current&&(localStorage.setItem(r.expanded,String(e)),e&&(localStorage.setItem(r.styleMods,JSON.stringify(t.styleModifications)),localStorage.setItem(r.spacingChanges,JSON.stringify(t.spacingTokenChanges)),localStorage.setItem(r.tool,t.activeTool),localStorage.setItem(r.color,t.activeColor),localStorage.setItem(r.stroke,String(t.strokeWidth)),t.inspectedElement?localStorage.setItem(r.inspected,JSON.stringify({selector:t.inspectedElement.info.selector,info:t.inspectedElement.info})):localStorage.removeItem(r.inspected)))},[e,t.styleModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,n,r])}import{useCallback as Bn,useEffect as br,useMemo as Sa,useRef as mi,useState as wo}from"react";import{Fragment as Ff,jsx as Pt,jsxs as lo}from"react/jsx-runtime";var xf={width:340,backgroundColor:"#eaeaea",...jr,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"},Sf=(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"}),wf=e=>({border:0,background:"transparent",color:e?"#111827":"#6b7280",cursor:"pointer",fontFamily:"inherit",fontSize:10,fontWeight:700,padding:0,textTransform:"uppercase"}),wa={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},es={...wa,borderColor:"#111827",background:"#111827",color:"#ffffff"},Cf={...es,cursor:"default",opacity:.55},Ca={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"},Ef={...Ca,appearance:"none",resize:"none",overflow:"hidden",outline:"none"},Dc={...Ca,fontWeight:700,fontSize:11,lineHeight:1.35},kf={...Dc,appearance:"none",resize:"none",overflow:"hidden",outline:"none"},Lc={display:"grid",gridTemplateColumns:"12px minmax(0, 1fr)",columnGap:4,alignItems:"start",marginBottom:5},Tf={pass:"#2f855a",fail:"#c53030",needs_review:"#6b7280"},If={pass:"\u2611",fail:"\u2612",needs_review:"\u25A1"},Mf=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"Eval",Rf=[{id:"pending",label:"Pending"},{id:"approved",label:"Approved"},{id:"rejected",label:"Rejected"}],Pc="popmelt-eval-active-status",Af=e=>e==="pending"||e==="approved"||e==="rejected";function _c({bridgeUrl:e,refreshKey:t,onMouseEnter:n,onMouseLeave:o,onSynthesize:r,isSynthesizing:i,onRunEval:a,onViewRunThread:s,runningEvalIds:l=[],snapPosition:c="bottom-right"}){let d=mi(null),u=i||!r,[p,f]=wo({version:1,updatedAt:0,cases:[]}),[v,C]=wo(!0),[x,I]=wo(()=>{if(typeof window>"u")return"pending";try{let E=window.localStorage.getItem(Pc);return Af(E)?E:"pending"}catch{return"pending"}});br(()=>{let E=d.current;if(!E)return;let L=n,g=o;return L&&E.addEventListener("mouseenter",L),g&&E.addEventListener("mouseleave",g),()=>{L&&E.removeEventListener("mouseenter",L),g&&E.removeEventListener("mouseleave",g)}},[n,o]);let B=Bn(()=>{e&&(C(!0),Xa(e).then(E=>{f(E),C(!1)}).catch(()=>C(!1)))},[e]);br(()=>{B()},[B,t]),br(()=>{try{window.localStorage.setItem(Pc,x)}catch{}},[x]);let T=Bn((E,L)=>{e&&(f(g=>({...g,cases:g.cases.map(m=>m.id===E?{...m,status:L}:m)})),qa(E,L,e).then(g=>{g||B()}).catch(B))},[e,B]),R=Bn((E,L)=>{if(!e)return;let g=L.map(m=>m.trim()).filter(Boolean);g.length!==0&&(f(m=>({...m,cases:m.cases.map($=>$.id===E?{...$,assertions:g}:$)})),ki(E,{assertions:g},e).then(m=>{m||B()}).catch(B))},[e,B]),w=Bn((E,L)=>{if(!e)return;let g=L.trim();g&&(f(m=>({...m,cases:m.cases.map($=>$.id===E?{...$,title:g}:$)})),ki(E,{title:g},e).then(m=>{m||B()}).catch(B))},[e,B]),z=Sa(()=>{let E=p.cases.filter(m=>m.status==="pending"),L=p.cases.filter(m=>m.status==="approved"),g=p.cases.filter(m=>m.status==="rejected");return{pending:E,approved:L,rejected:g}},[p.cases]),X=z[x],j=Sa(()=>{let E=new Map,L=[...p.runs??[]].sort((g,m)=>m.completedAt-g.completedAt);for(let g of L)E.has(g.evalId)||E.set(g.evalId,g);return E},[p.runs]);return lo("div",{ref:d,style:{...xf,...Li(c)},children:[lo("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[Pt("span",{children:"Evals"}),Pt("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"E"})]}),Pt("button",{type:"button",disabled:u,onClick:r,style:Sf(u,i),children:i?"Synthesizing...":"Synthesize"}),Pt("div",{style:{display:"flex",gap:12,marginTop:8},children:Rf.map(E=>Pt(Df,{active:x===E.id,label:`${E.label} ${z[E.id].length}`,onClick:()=>I(E.id)},E.id))}),Pt("div",{style:{marginTop:10,flex:1,minHeight:0,overflowY:"auto",display:"flex",flexDirection:"column",gap:10},children:v?Pt("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):p.cases.length===0?Pt("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.5},children:"No inferred evals yet."}):X.length===0?lo("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.5},children:["No ",x," evals."]}):Pt(Lf,{cases:X,latestRunsByEvalId:j,runningEvalIds:l,onStatus:T,onRun:a,onViewRunThread:s,onTitleChange:w,onAssertionsChange:R})})]})}function Lf({cases:e,latestRunsByEvalId:t,runningEvalIds:n,onStatus:o,onRun:r,onViewRunThread:i,onTitleChange:a,onAssertionsChange:s}){return Pt("div",{style:{display:"flex",flexDirection:"column",gap:6},children:e.map(l=>{let c=new Set([...l.sourceDecisionIds,...l.sourceThreadIds]).size,d=c>0?`, ${c} ${c===1?"mention":"mentions"}`:"",u=t.get(l.id),p=n.includes(l.id);return lo("div",{style:{border:"1px solid rgba(0,0,0,0.08)",background:"rgba(255,255,255,0.35)",padding:8},children:[lo("div",{children:[Pt(_f,{value:l.title,onCommit:f=>a(l.id,f)}),lo("div",{style:{color:"#9ca3af",fontSize:10,marginTop:2},children:[Mf(l.category),d]})]}),Pt("div",{style:{marginTop:6,color:"#374151",fontSize:11,lineHeight:1.25},children:Pt(zf,{assertions:l.assertions,latestRun:u,onChange:f=>s(l.id,f)})}),Pt(Bf,{item:l,latestRun:u,isRunning:p,onStatus:o,onRun:r,onViewRunThread:i})]},l.id)})})}function Pf(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 Bf({item:e,latestRun:t,isRunning:n,onStatus:o,onRun:r,onViewRunThread:i}){if(e.status==="pending")return lo("div",{style:{display:"flex",gap:6,marginTop:8},children:[Pt("button",{type:"button",style:wa,onClick:()=>o(e.id,"rejected"),children:"Reject"}),Pt("button",{type:"button",style:es,onClick:()=>o(e.id,"approved"),children:"Accept"})]});if(e.status==="approved"){let a=n||!r;return lo("div",{style:{display:"flex",gap:6,marginTop:8},children:[t?.threadId&&i&&Pt("button",{type:"button",style:wa,onClick:()=>i(t.threadId),children:Pf(t)}),Pt("button",{type:"button",disabled:a,style:a?Cf:es,onClick:()=>r?.(e),children:n?"Running...":"Run"})]})}return Pt("div",{style:{display:"flex",gap:6,marginTop:8},children:Pt("button",{type:"button",style:es,onClick:()=>o(e.id,"approved"),children:"Approve"})})}function Df({active:e,label:t,onClick:n}){let[o,r]=wo(!1);return Pt("button",{type:"button",style:wf(e||o),onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),onClick:n,children:t})}function _f({value:e,onCommit:t}){let[n,o]=wo(!1),[r,i]=wo(e),a=mi(null);br(()=>{n||i(e)},[n,e]),br(()=>{if(!n)return;let d=a.current;d&&(d.focus(),d.select(),d.style.height="auto",d.style.height=`${d.scrollHeight}px`)},[n]);let s=Bn(()=>{let d=r.trim();o(!1),d&&d!==e?t(d):i(e)},[r,t,e]),l=Bn(()=>{i(e),o(!1)},[e]),c=Bn(d=>{d.key==="Enter"?(d.preventDefault(),s()):d.key==="Escape"&&(d.preventDefault(),l())},[l,s]);return n?Pt("textarea",{ref:a,rows:1,value:r,onChange:d=>{i(d.target.value),d.currentTarget.style.height="auto",d.currentTarget.style.height=`${d.currentTarget.scrollHeight}px`},onBlur:s,onKeyDown:c,style:kf}):Pt("button",{type:"button",onClick:()=>o(!0),style:Dc,children:e})}function Of(e){return e.map(t=>t.trim()).filter(Boolean)}function Hf(e,t){return e.length===t.length&&e.every((n,o)=>n===t[o])}function Bc(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}function Nf(e){let t=window.getComputedStyle(e),n=Number.parseFloat(t.lineHeight)||Number.parseFloat(t.fontSize)*1.2||16,o=document.createElement("div"),r=document.createElement("span"),i=document.createElement("span");o.style.position="fixed",o.style.visibility="hidden",o.style.pointerEvents="none",o.style.left="-9999px",o.style.top="0",o.style.width=`${e.clientWidth}px`,o.style.boxSizing=t.boxSizing,o.style.font=t.font,o.style.letterSpacing=t.letterSpacing,o.style.lineHeight=t.lineHeight,o.style.padding=t.padding,o.style.border=t.border,o.style.whiteSpace="pre-wrap",o.style.overflowWrap="break-word",o.style.wordBreak=t.wordBreak;let a=e.selectionStart??0;o.textContent=e.value.slice(0,a),r.textContent="\u200B",o.appendChild(r),o.appendChild(document.createTextNode(e.value.slice(a)||"\u200B")),i.textContent="\u200B",o.appendChild(i),document.body.appendChild(o);let s=Math.max(0,Math.round(r.offsetTop/n)),l=Math.max(0,Math.round(i.offsetTop/n));return o.remove(),{lineIndex:s,lastLineIndex:l}}function zf({assertions:e,latestRun:t,onChange:n}){let[o,r]=wo(null),[i,a]=wo(e),[s,l]=wo(null),[c,d]=wo(0),u=mi([]),p=mi(null),f=mi(!1),v=o!==null,C=v?i.length+1:i.length,x=Sa(()=>{let L=new Map;for(let g of t?.assertionResults??[])L.set(g.assertion.trim(),g);return L},[t]);br(()=>{v||a(e)},[e,v]),br(()=>{if(s===null)return;let L=requestAnimationFrame(()=>{let g=u.current[s];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 m=g.value.length;g.setSelectionRange(m,m)}p.current=null,Bc(g)}});return()=>cancelAnimationFrame(L)},[s,c,C]);let I=Bn((L,g=null)=>{p.current=g,r(L),l(L),d(m=>m+1)},[]),B=Bn(L=>{let g=Of(L);return g.length===0?(a(e),e):(a(g),Hf(g,e)||n(g),g)},[e,n]),T=Bn(L=>{I(L,"select")},[I]),R=Bn((L,g)=>{a(m=>{let $=[...m];if(L>=$.length){if(g.length===0)return $;$.push(g)}else $[L]=g;return $})},[]),w=Bn((L,g)=>{let m=[...i],ge=(L<m.length?m[L]??"":"").trim();if(L>=m.length){let ke=g?.focusPlaceholder?m.length:g?.focusIndex;ke!==void 0?I(ke,g?.focusMode):(r(null),l(null));return}if(!ge){if(g?.deleteEmpty){m.splice(L,1);let ke=B(m),Me=g.focusPlaceholder?ke.length:g.focusIndex;if(Me!==void 0){let K=Math.min(Me,ke.length);I(K)}else r(null),l(null)}else m[L]=e[L]??"",a(m),g?.focusIndex!==void 0?I(g.focusIndex,g.focusMode):(r(null),l(null));return}m[L]=ge;let Ie=B(m),ue=g?.focusPlaceholder?Ie.length:g?.focusIndex;if(ue!==void 0){let ke=Math.min(ue,Ie.length);I(ke,g?.focusMode)}else r(null),l(null)},[e,i,B,I]),z=Bn(()=>{a(e),r(null),l(null)},[e]),X=Bn((L,g)=>{let m=g.currentTarget.value,$=g.currentTarget.selectionStart,ge=g.currentTarget.selectionEnd,Ie=$===ge;if((g.key==="ArrowUp"||g.key==="ArrowDown")&&Ie){let{lineIndex:ue,lastLineIndex:ke}=Nf(g.currentTarget);if(g.key==="ArrowUp"&&ue===0&&L>0){g.preventDefault(),f.current=!0,w(L,{focusIndex:L-1,focusMode:"end",deleteEmpty:!1});return}if(g.key==="ArrowDown"&&ue===ke&&L<C-1){g.preventDefault(),f.current=!0,w(L,{focusIndex:L+1,focusMode:"start",deleteEmpty:!1});return}}if(g.key==="Backspace"&&m.length===0){g.preventDefault(),f.current=!0;let ue=[...i],ke=L-1;if(L<ue.length){ue.splice(L,1);let Me=B(ue);if(ke>=0){let K=Math.min(ke,Me.length-1);I(K,"end")}else r(null),l(null)}else ke>=0&&I(ke,"end");return}g.key==="Enter"?(g.preventDefault(),w(L,{focusPlaceholder:g.metaKey||g.ctrlKey,deleteEmpty:!0})):g.key==="Escape"&&(g.preventDefault(),z())},[z,w,i,B,I,C]),j=Bn((L,g)=>{if(f.current){f.current=!1;return}let m=u.current.findIndex($=>$===g.relatedTarget);w(L,{deleteEmpty:!1,focusIndex:m>=0?m:void 0})},[w]),E=Bn((L,g)=>{g.preventDefault(),o!==null?(f.current=!0,w(o,{focusIndex:L,focusMode:"select",deleteEmpty:!1})):I(L,"select")},[w,o,I]);return lo(Ff,{children:[Pt("style",{children:`
|
|
2
|
+
import{createContext as oy,useCallback as rn,useContext as ry,useEffect as Yt,useMemo as Oo,useRef as xn,useState as Pt}from"react";import{useCallback as Vl,useEffect as Bu,useSyncExternalStore as Du}from"react";var On="http://localhost:1111";function Ll(){return typeof window<"u"?window.__POPMELT_PROJECT_ID__??null:null}function Lu(e={}){let t=Ll();if(!t)return e;let n=new Headers(e.headers);return n.set("X-Popmelt-Project-Id",t),{...e,headers:n}}function Eo(e,t={}){return fetch(e,Lu(t))}function Un(e,t={},n=15e3){let o=new AbortController;t.signal&&t.signal.addEventListener("abort",()=>o.abort());let r=setTimeout(()=>o.abort(),n);return Eo(e,{...t,signal:o.signal}).finally(()=>clearTimeout(r))}async function Al(e=On){try{let t=await Un(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch{return null}}async function zo(e=On){try{let t=new AbortController,n=setTimeout(()=>t.abort(),2e3),o=await Eo(`${e}/status`,{signal:t.signal});return clearTimeout(n),o.ok?await o.json():null}catch{return null}}async function Rl(e){try{let t=new AbortController,n=setTimeout(()=>t.abort(),500),o=await Eo(`http://localhost:${e}/status`,{signal:t.signal});return clearTimeout(n),o.ok?await o.json():null}catch{return null}}async function Au(e){return zo(e)}async function na(e,t){if(e&&e!=="http://localhost:1111")try{let u=new URL(e),d=await Au(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,a=await Rl(1111);if(a){if(t&&a.projectId===t)return{url:"http://localhost:1111",port:1111,projectId:a.projectId};if(a.devOrigin&&i&&a.devOrigin===i&&(t||!a.projectId))return{url:"http://localhost:1111",port:1111,projectId:a.projectId}}let s=Array.from({length:8},(u,d)=>{let p=1112+d;return Rl(p).then(g=>g?{status:g,port:p}:null)}),l=(await Promise.all(s)).filter(u=>u!==null),c=[];a&&c.push({port:1111,devOrigin:a.devOrigin,projectId:a.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 os(e=On,t,n=-1){try{let o=await Un(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return o.ok?await o.json():null}catch{return null}}async function Pl(e,t,n=On,o,r,i,a,s){let l=new FormData;if(e instanceof Map){let u=!0;for(let[d,p]of e){let g=encodeURIComponent(d);l.append(`screenshot-${g}`,p,`screenshot-${g}.webp`),u&&(l.append("screenshot",p,"screenshot.webp"),u=!1)}u&&l.append("screenshot",new Blob([],{type:"image/webp"}),"screenshot.webp")}else l.append("screenshot",e,"screenshot.webp");if(l.append("feedback",t),o&&l.append("color",o),r&&l.append("provider",r),i&&l.append("model",i),s&&l.append("sourceId",s),a)for(let[u,d]of a)for(let p=0;p<d.length;p++)l.append(`image-${u}-${p}`,d[p],`image-${u}-${p}.webp`);let c=await Un(`${n}/send`,{method:"POST",body:l},3e4);if(!c.ok){let u=await c.text();throw new Error(`Bridge returned ${c.status}: ${u}`)}return c.json()}async function Bl(e,t=On){let n=await Un(`${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 Dl(e,t=On){let n=await Un(`${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 oa(e,t,n=On){let o=await Un(`${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 _l(e,t=On){let n=await Un(`${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 ti(e=On){try{let t=await Un(`${e}/model`,{},5e3);return t.ok?(await t.json()).model??null:null}catch{return null}}async function Ol(e=On){let t=await Un(`${e}/evals`,{},5e3);return t.ok?t.json():{version:1,updatedAt:0,cases:[]}}async function rs(e,t,n=On){let o=await Un(`${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 Hl(e,t,n=On){return rs(e,{status:t},n)}async function Fl(e,t,n,o=On,r,i,a){let s=new FormData;s.append("screenshot",t,"eval-run.webp"),s.append("feedback",JSON.stringify(n)),r&&s.append("provider",r),i&&s.append("model",i),a&&s.append("sourceId",a);let l=await Un(`${o}/evals/${encodeURIComponent(e)}/run`,{method:"POST",body:s},3e4);if(!l.ok){let c=await l.text();throw new Error(`Bridge returned ${l.status}: ${c}`)}return l.json()}function Pu(e){return new Promise(t=>setTimeout(t,e))}async function ra(e=On,t,n=15e3){let o=Date.now();try{let l=await Un(`${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,a=Ll();for(;Date.now()-o<n;){if(await Pu(350),r=await zo(i),!r?.ok&&a){let l=await na(e,a);l?.url&&(i=l.url,r=await zo(i))}if(r?.ok&&!(a&&r.projectId!==a)&&!(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 zl(e=On){return(await ra(e)).ok}async function Nl(e=On,t,n){let o=await Un(`${e}/model/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n})},1e4);if(!o.ok){let r=await o.text();throw new Error(`Bridge returned ${o.status}: ${r}`)}return o.json()}async function $l(e=On,t,n){let o=await Un(`${e}/evals/synthesize`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:t,model:n})},1e4);if(!o.ok){let r=await o.text();throw new Error(`Bridge returned ${o.status}: ${r}`)}return o.json()}async function Wl(e,t,n=On,o,r,i,a,s){let l;if(a&&a.length>0){let c=new FormData,u=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"});c.append("screenshot",u,"screenshot.png"),c.append("feedback",JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:s}));for(let d=0;d<a.length;d++)c.append(`image-reply-${d}`,a[d],`reply-image-${d}.webp`);l=await Un(`${n}/reply`,{method:"POST",body:c},3e4)}else l=await Un(`${n}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:s})},3e4);if(!l.ok){let c=await l.text();throw new Error(`Bridge returned ${l.status}: ${c}`)}return l.json()}async function jl(e,t=On){let n=await Un(`${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 Ht=globalThis.__POPMELT_BRIDGE_CONNECTION__??(globalThis.__POPMELT_BRIDGE_CONNECTION__={}),as=Ht.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));Ht.sourceId=as;try{typeof localStorage<"u"&&localStorage.setItem("popmelt-source-id",as)}catch{}function ls(){return as}var Yl={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},Ir=Ht.store??{...Yl};Ht.store=Ir;var ss=Ht.listeners??new Set;Ht.listeners=ss;var No=Ht.activeEs??null,is=Ht.activeBridgeUrl??null,$o=null,oi=Ht.connectionGeneration??0,Gl=Ht.expectedProjectId??null,Mi=new Set,Rr=new Map,Wo={};function Mr(e,t){if(!e)return!1;if(Mi.has(e)){let o=Rr.get(e);return o||(o=[],Rr.set(e,o)),o.push({type:t.type??"",data:t}),!0}let n=Wo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function _u(e,t,n){let o=()=>n!==oi;for(let r of t){if(o())return;Mi.add(r),Rr.set(r,[])}await Promise.all(t.map(async r=>{try{let i=await os(e,r);if(o())return;let a=Rr.get(r)??[];if(i){if(Cn(s=>{let l={...s.jobResponses,[r]:i.accumulated.response},c={...s.jobThinking,[r]:i.accumulated.thinking},u=[...s.events];for(let d of i.events)d.type==="done"||d.type==="error"||u.push({type:d.type,data:d,timestamp:Date.now()});return{...s,jobResponses:l,jobThinking:c,currentResponse:r===s.activeJobId?i.accumulated.response:s.currentResponse,currentThinking:r===s.activeJobId?i.accumulated.thinking:s.currentThinking,events:u}}),Wo[r]=i.currentSeq,!i.jobActive){let s=i.events.find(l=>l.type==="done"||l.type==="error");s&&ia(s.type,s,r)}for(let s of a)typeof s.data.seq=="number"&&s.data.seq<=i.currentSeq||ia(s.type,s.data,r)}else for(let s of a)ia(s.type,s.data,r)}finally{Mi.delete(r),Rr.delete(r)}}))}function ia(e,t,n){if(e==="delta"){let o=t.text||"";Cn(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||"";Cn(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 Wo[n],Cn(o=>{let r=o.activeJobIds.filter(c=>c!==n),i={...o.jobResponses},a={...o.jobThinking},s=i[n];delete i[n],delete a[n];let l=n===o.activeJobId?r.length>0?r[r.length-1]:null:o.activeJobId;return{...o,activeJobIds:r,activeJobId:l,jobResponses:i,jobThinking:a,lastCompletedJobId:n,lastResponseText:s||o.currentResponse||t.responseText||null,lastThreadId:t.threadId??null,...n===o.activeJobId?{currentResponse:l&&i[l]||"",currentThinking:l&&a[l]||""}:{},events:[...o.events,{type:"done",data:t,timestamp:Date.now()}]}});else if(e==="error"){delete Wo[n];let o=t.message??"";Cn(r=>{let i=r.activeJobIds.filter(s=>s!==n),a=i.length>0?r.status:"error";return{...r,status:a,activeJobIds:i,lastCompletedJobId:n,lastErrorByJob:o?{...r.lastErrorByJob,[n]:o}:r.lastErrorByJob,events:[...r.events,{type:"error",data:t,timestamp:Date.now()}]}})}else Cn(o=>({...o,events:[...o.events,{type:e,data:t,timestamp:Date.now()}]}))}var ko=Ht.discoveredBridgeUrl??null,vo=Ht.discoveredBridgeProjectId??null,pr=null,ni=null;function Ou(e){let t=e??null;if(Gl!==t){No&&(No.close(),No=null,Ht.activeEs=null),$o&&(clearTimeout($o),$o=null),is=null,Ht.activeBridgeUrl=null,ko=null,vo=null,Ht.discoveredBridgeUrl=null,Ht.discoveredBridgeProjectId=null,pr=null,ni=null,Mi.clear(),Rr.clear();for(let n of Object.keys(Wo))delete Wo[n];Gl=t,Ht.expectedProjectId=t,oi+=1,Ht.connectionGeneration=oi,Cn(()=>({...Yl}))}}async function Ul(e,t){return ko&&(t?vo===t:!vo)?ko:(!t&&vo&&(ko=null,vo=null,Ht.discoveredBridgeUrl=ko,Ht.discoveredBridgeProjectId=vo),t&&vo&&vo!==t&&(ko=null,vo=null,Ht.discoveredBridgeUrl=ko,Ht.discoveredBridgeProjectId=vo),pr&&ni===(t??null)||(ni=t??null,pr=na(e,t).then(n=>(ko=n?.url??null,vo=n?.projectId??t??null,Ht.discoveredBridgeUrl=ko,Ht.discoveredBridgeProjectId=vo,pr=null,ni=null,ko)).catch(()=>(pr=null,ni=null,null))),pr)}function Kl(){return ko}async function Xl(e,t){ko=null,vo=null,Ht.discoveredBridgeUrl=null,Ht.discoveredBridgeProjectId=null,pr=null,ni=null;let n=await Ul(e,t);return n&&sa(n),n}function Jl(){return Ir}function Hu(e){return ss.add(e),()=>{ss.delete(e)}}function Cn(e){Ir=e(Ir),Ht.store=Ir;for(let t of ss)t()}function Fu(){return typeof window<"u"?window.__POPMELT_PROJECT_ID__??null:null}function sa(e){if(No&&No.readyState!==EventSource.CLOSED&&is===e)return;No&&(No.close(),No=null,Ht.activeEs=null),$o&&(clearTimeout($o),$o=null),is=e,Ht.activeBridgeUrl=is;let t=++oi;Ht.connectionGeneration=oi;let n=new URLSearchParams({sourceId:as}),o=Fu();o&&n.set("projectId",o);let r=new EventSource(`${e}/events?${n.toString()}`);No=r,Ht.activeEs=No;let i=()=>t!==oi;r.addEventListener("connected",()=>{i()||zo(e).then(a=>{if(i())return;let s=a?.activeJobs??(a?.activeJob?[a.activeJob]:[]),l=new Set(s.map(b=>b.id)),c=a?.recentJobs??[],u=new Map(c.map(b=>[b.id,b])),d=s.length>0;Cn(b=>{let C={...b.lastErrorByJob},v=b.activeJobIds.filter(T=>!l.has(T));for(let T of v){let A=u.get(T);A?.status==="error"&&A.error&&(C[T]=A.error)}let x=b.activeJobIds.filter(T=>l.has(T));for(let T of l)x.includes(T)||x.push(T);let B={};for(let T of s)T.threadId&&(B[T.id]=T.threadId);return{...b,isConnected:!0,status:d?"streaming":v.length>0||b.status==="disconnected"?"idle":b.status,activeJobId:d?s[s.length-1].id:x.length>0?x[x.length-1]:null,activeJobIds:x,activeJobThreads:B,lastErrorByJob:C,lastCompletedJobId:v.length>0?v[v.length-1]:b.lastCompletedJobId}});let p=Ir.activeJobIds.filter(b=>!l.has(b)),g=[...Array.from(l),...p];g.length>0&&_u(e,g,t).catch(()=>{})})}),r.addEventListener("job_started",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;if(Mr(l,s))return;let c=s.threadId;Cn(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:s,timestamp:Date.now()}]}))}),r.addEventListener("delta",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;if(Mr(l,s))return;let c=s.text||"";Cn(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:s,timestamp:Date.now()}]}))}),r.addEventListener("thinking",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;if(Mr(l,s))return;let c=s.text||"";Cn(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:s,timestamp:Date.now()}]}))}),r.addEventListener("tool_use",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;Mr(l,s)||Cn(c=>({...c,events:[...c.events,{type:"tool_use",data:s,timestamp:Date.now()}]}))}),r.addEventListener("done",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;Mr(l,s)||(l&&delete Wo[l],Cn(c=>{let u=l?c.activeJobIds.filter(v=>v!==l):c.activeJobIds,d={...c.jobResponses},p={...c.jobThinking},g={...c.activeJobThreads},b=l?d[l]:void 0;l&&(delete d[l],delete p[l],delete g[l]);let C=l===c.activeJobId?u.length>0?u[u.length-1]:null:c.activeJobId;return{...c,activeJobIds:u,activeJobId:C,jobResponses:d,jobThinking:p,lastCompletedJobId:l??c.activeJobId,lastResponseText:b||c.currentResponse||s.responseText||null,lastThreadId:s.threadId??null,...l===c.activeJobId?{currentResponse:C&&d[C]||"",currentThinking:C&&p[C]||""}:{},events:[...c.events,{type:"done",data:s,timestamp:Date.now()}]}}))}),r.addEventListener("question",a=>{if(i())return;let s=JSON.parse(a.data),l=s.jobId;Mr(l,s)||Cn(c=>({...c,pendingQuestions:[...c.pendingQuestions,{jobId:s.jobId,threadId:s.threadId,question:s.question,annotationIds:s.annotationIds,timestamp:Date.now()}],events:[...c.events,{type:"question",data:s,timestamp:Date.now()}]}))}),r.addEventListener("capabilities_changed",()=>{i()||Cn(a=>({...a,capabilitiesVersion:a.capabilitiesVersion+1}))}),r.addEventListener("queue_drained",()=>{if(!i()){for(let a of Object.keys(Wo))delete Wo[a];Mi.clear(),Rr.clear(),Cn(a=>({...a,status:a.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}}),r.addEventListener("error",a=>{if(!i()){if(r.readyState===EventSource.CLOSED)Cn(s=>({...s,isConnected:!1,status:"disconnected"})),$o&&(clearTimeout($o),$o=null),$o=setTimeout(()=>{zo(e).then(s=>{s&&sa(e)})},5e3);else if(a instanceof MessageEvent){let s=JSON.parse(a.data),l=s.jobId??null;if(Mr(l??void 0,s))return;l&&delete Wo[l];let c=s.message??"";Cn(u=>{let d=l?u.activeJobIds.filter(g=>g!==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:s,timestamp:Date.now()}]}})}}}),r.onerror=()=>{i()||r.readyState===EventSource.CLOSED&&Cn(a=>({...a,isConnected:!1,status:"disconnected"}))}}function ql(e="http://localhost:1111",t=!0,n){let o=Du(Hu,Jl,Jl);Bu(()=>{Ou(n),t&&Ul(e,n).then(a=>{a&&zo(a).then(s=>{s&&(!n||s.projectId===n)&&sa(a)})})},[e,t,n]);let r=Vl(()=>{Cn(()=>({...Ir,events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),i=Vl(a=>{Cn(s=>({...s,pendingQuestions:s.pendingQuestions.filter(l=>l.threadId!==a)}))},[]);return{...o,clearEvents:r,dismissQuestion:i}}import{useEffect as zu,useReducer as Nu}from"react";var $u={isAnnotating:!1,activeTool:"inspector",activeColor:"oklch(0.628 0.258 29)",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function cs(){return Math.random().toString(36).substring(2,9)}function Zl(e){return e.status?e:e.captured?{...e,status:"in_flight"}:{...e,status:"pending"}}function ro(e){return{...e,undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]}}function Wu(e,t){return{...e,isAnnotating:t}}function ju(e,t){return{...e,activeTool:t,inspectedElement:null}}function Vu(e,t){return{...e,activeColor:t}}function Gu(e,t){return{...e,strokeWidth:t}}function Ju(e,t){return{...e,currentPath:[t]}}function Yu(e,t){return{...e,currentPath:[...e.currentPath,t]}}function Uu(e){return{...e,currentPath:[]}}function Ku(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return{...e,currentPath:[]};let n={id:cs(),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{...ro(e),annotations:[...e.annotations,n],currentPath:[]}}function Xu(e,t){let n={id:t.id??cs(),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:ro(e),annotations:[...e.annotations,n]}}function qu(e,t){return{...ro(e),annotations:e.annotations.map(o=>o.id===t.id?{...o,text:t.text,...t.imageCount!=null?{imageCount:t.imageCount}:{}}:o)}}function Zu(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 Qu(e,t){let n=ro(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 ep(e,t){let n=t.saveUndo?ro(e):e,r=e.annotations.find(i=>i.id===t.id)?.groupId;return{...n,annotations:e.annotations.map(i=>{if(!(i.id===t.id||r&&i.groupId===r))return i;let s=t.delta.x,l=t.delta.y;return{...i,points:i.points.map(c=>({x:c.x+s,y:c.y+l}))}})}}function tp(e,t){let n=t.saveUndo?ro(e):e,o=e.annotations.find(a=>a.id===t.id);if(!o||o.type==="text"||o.points.length<2)return e;let r=0,i=0;if(o.type==="rectangle"&&o.groupId){let a=t.points,s=Math.min(a[0].x,a[1].x),l=Math.max(a[0].y,a[1].y),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=s-d,i=l-p}return{...n,annotations:e.annotations.map(a=>a.id===t.id?{...a,points:t.points}:o.groupId&&a.groupId===o.groupId&&a.type==="text"?{...a,points:a.points.map(s=>({x:s.x+r,y:s.y+i}))}:a)}}function np(e,t){return{...ro(e),annotations:[...e.annotations,...t.annotations.map(Zl)]}}function op(e,t){let n=new Set,o=[];for(let r of t.annotations)n.has(r.id)||(n.add(r.id),o.push(Zl(r)));return{...e,annotations:o}}function rp(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return{...e,annotations:t?.annotations||[],styleModifications:t?.styleModifications||[],spacingTokenMods:t?.spacingTokenMods||[],undoStack:e.undoStack.slice(0,-1),redoStack:[...e.redoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]}}function ip(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return{...e,annotations:t?.annotations||[],styleModifications:t?.styleModifications||[],spacingTokenMods:t?.spacingTokenMods||[],redoStack:e.redoStack.slice(0,-1),undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]}}function sp(e,t){let{id:n,addToSelection:o}=t;if(n===null)return{...e,selectedAnnotationIds:[],lastSelectedId:null};if(o)if(e.selectedAnnotationIds.includes(n)){let i=e.selectedAnnotationIds.filter(a=>a!==n);return{...e,selectedAnnotationIds:i,lastSelectedId:i.length>0?i[i.length-1]:null}}else return{...e,selectedAnnotationIds:[...e.selectedAnnotationIds,n],lastSelectedId:n};return{...e,selectedAnnotationIds:[n],lastSelectedId:n}}function ap(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 lp(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),spacingTokenChanges:e.spacingTokenChanges.map(n=>({...n,captured:!0}))}}function cp(e){return{...e,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]}}function dp(e,t){return{...e,inspectedElement:t}}function up(e,t){let{selector:n,element:o,property:r,original:i,modified:a}=t,s=typeof window<"u"?window.location.pathname:"/",l=e.styleModifications.findIndex(c=>c.selector===n&&(!c.pathname||c.pathname===s));if(i===a&&l<0)return e;if(l>=0){let c=e.styleModifications[l];if(c.captured){let b=ro(e),C=b.styleModifications.map((v,x)=>x===l?{...v,changes:[{property:r,original:i,modified:a}],captured:!1,pathname:s}:v);return{...b,styleModifications:C}}let u=c.changes.findIndex(b=>b.property===r),d,p=e;if(u>=0){let b=c.changes[u];a===b.original?d=c.changes.filter((C,v)=>v!==u):d=c.changes.map((C,v)=>v===u?{...C,modified:a}:C)}else{if(i===a)return e;p=ro(e),d=[...c.changes,{property:r,original:i,modified:a}]}if(d.length===0)return{...p,styleModifications:p.styleModifications.filter((b,C)=>C!==l)};let g=p.styleModifications.map((b,C)=>C===l?{...b,changes:d}:b);return{...p,styleModifications:g}}else{let c=ro(e),u={selector:n,element:o,changes:[{property:r,original:i,modified:a}],pathname:s};return{...c,styleModifications:[...c.styleModifications,u]}}}function pp(e,t){let{selector:n,durableSelector:o,element:r,changes:i}=t,a=typeof window<"u"?window.location.pathname:"/",s=i.filter(u=>u.original!==u.modified);if(s.length===0)return e;let l=ro(e),c=l.styleModifications.findIndex(u=>u.selector===n&&(!u.pathname||u.pathname===a));if(c>=0){let u=l.styleModifications[c],d=u.captured?[]:[...u.changes];for(let p of s){let g=d.findIndex(b=>b.property===p.property);g>=0?p.modified===d[g].original?d=d.filter((b,C)=>C!==g):d=d.map((b,C)=>C===g?{...b,modified:p.modified}:b):d.push(p)}return d.length===0?{...l,styleModifications:l.styleModifications.filter((p,g)=>g!==c)}:{...l,styleModifications:l.styleModifications.map((p,g)=>g===c?{...p,changes:d,captured:!1,pathname:a}:p)}}else return{...l,styleModifications:[...l.styleModifications,{selector:n,durableSelector:o,element:r,changes:s,pathname:a}]}}function fp(e,t){let{selector:n,property:o}=t,r=typeof window<"u"?window.location.pathname:"/",i=ro(e),a=i.styleModifications.map(s=>s.selector!==n||s.pathname&&s.pathname!==r?s:{...s,changes:s.changes.filter(l=>l.property!==o)}).filter(s=>s.changes.length>0);return{...i,styleModifications:a}}function gp(e){return e.styleModifications.length===0?{...e,inspectedElement:null}:{...ro(e),styleModifications:[],inspectedElement:null}}function mp(e,t){return{...e,styleModifications:t}}function hp(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 yp(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 bp(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 vp(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 xp(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 Sp(e,t){let{linkedSelectors:n,styleSelectors:o}=t,r=new Set(n),i=new Set(o),a=typeof window<"u"?window.location.pathname:"/",s=new Set,l=new Set;for(let g of e.annotations)g.linkedSelector&&r.has(g.linkedSelector)&&(s.add(g.id),g.groupId&&l.add(g.groupId));for(let g of e.annotations)g.groupId&&l.has(g.groupId)&&s.add(g.id);let c=e.annotations.filter(g=>!s.has(g.id)),u=e.styleModifications.filter(g=>!i.has(g.selector)||g.pathname&&g.pathname!==a);if(c.length===e.annotations.length&&u.length===e.styleModifications.length)return e;let d=e.selectedAnnotationIds.filter(g=>!s.has(g)),p=e.inspectedElement&&i.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return{...e,annotations:c,styleModifications:u,selectedAnnotationIds:d,lastSelectedId:d.length>0?d[d.length-1]:null,inspectedElement:p}}function wp(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 Cp(e,t){return{...e,spacingTokenChanges:t}}function Ep(e,t){let n=ro(e),o=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),r;if(o>=0){let i=e.spacingTokenMods[o],a={...t,originalValue:i.originalValue,originalPx:i.originalPx};r=e.spacingTokenMods.map((s,l)=>l===o?a:s)}else r=[...e.spacingTokenMods,t];return{...n,spacingTokenMods:r}}function kp(e,t){let n=ro(e),o=e.spacingTokenMods.findIndex(l=>l.tokenPath===t.tokenPath),r=o>=0?e.spacingTokenMods[o].originalValue:t.originalValue,i=o>=0?e.spacingTokenMods[o].originalPx:parseFloat(t.originalValue)||0,a={tokenPath:t.tokenPath,originalValue:r,currentValue:"__deleted__",targets:o>=0?e.spacingTokenMods[o].targets:[],originalPx:i,currentPx:0},s;return o>=0?s=e.spacingTokenMods.map((l,c)=>c===o?a:l):s=[...e.spacingTokenMods,a],{...n,spacingTokenMods:s}}var Tp={SET_ANNOTATING:Wu,SET_TOOL:ju,SET_COLOR:Vu,SET_STROKE_WIDTH:Gu,START_PATH:Ju,CONTINUE_PATH:Yu,CANCEL_PATH:Uu,FINISH_PATH:Ku,ADD_TEXT:Xu,UPDATE_TEXT:qu,UPDATE_TEXT_SIZE:Zu,DELETE_ANNOTATION:Qu,MOVE_ANNOTATION:ep,RESIZE_ANNOTATION:tp,PASTE_ANNOTATIONS:np,RESTORE_ANNOTATIONS:op,UNDO:rp,REDO:ip,SELECT_ANNOTATION:sp,UPDATE_ANNOTATION_COLOR:ap,MARK_CAPTURED:lp,CLEAR:cp,SELECT_ELEMENT:dp,MODIFY_STYLE:up,MODIFY_STYLES_BATCH:pp,CLEAR_STYLE:fp,CLEAR_ALL_STYLES:gp,RESTORE_STYLE_MODIFICATIONS:mp,UPDATE_LINKED_POSITIONS:hp,CLEANUP_ORPHANED:Sp,SET_ANNOTATION_STATUS:yp,SET_ANNOTATION_THREAD:bp,SET_ANNOTATION_QUESTION:vp,APPLY_RESOLUTIONS:xp,ADD_SPACING_TOKEN_CHANGE:wp,RESTORE_SPACING_TOKEN_CHANGES:Cp,MODIFY_SPACING_TOKEN:Ep,DELETE_SPACING_TOKEN:kp};function Mp(e,t){let n=Tp[t.type];return n?n(e,t.payload):e}function Ql(){let[e,t]=Nu(Mp,$u);return zu(()=>{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 Ip}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 Rp(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function Lp(){return window.location.pathname}function ri(){return Ip(Rp,Lp,()=>"/")}var ec="popmelt-toolbar-snap-position";function Lr(e){return e.startsWith("top-")}function Ar(e){return e.endsWith("-right")}function Ii(e){return e.endsWith("-center")}function tc(){try{let e=localStorage.getItem(ec);if(e&&Ap(e))return e}catch{}return"bottom-right"}function nc(e){try{localStorage.setItem(ec,e)}catch{}}function Ap(e){return["bottom-right","bottom-center","bottom-left","top-right","top-center","top-left"].includes(e)}function oc(e,t,n){let o=Lr(e)?16:n-16-54;return Ii(e)?{position:"fixed",top:o,left:t/2,transform:"translateX(-50%)"}:Ar(e)?{position:"fixed",top:o,right:16,left:"auto"}:{position:"fixed",top:o,left:16,right:"auto"}}function rc(e,t,n){let r=Lr(e)?{top:82}:{bottom:82},i;return Ii(e)?i={left:t/2,transform:"translateX(-50%)"}:Ar(e)?i={right:16}:i={left:16},{position:"fixed",...r,...i}}function ic(e,t,n){let o=Lr(e),r=o?{top:78}:{bottom:78},i,a;return Ii(e)?(i={left:"50%",transform:"translateX(-50%)"},a="center"):Ar(e)?(i={right:16},a="flex-end"):(i={left:16},a="flex-start"),{position:"fixed",...r,...i,zIndex:9999,display:"flex",flexDirection:"column",alignItems:a}}function ds(e){let t=Lr(e),n=Ar(e)||Ii(e);return{position:"fixed",top:t&&n?82:16,right:16,bottom:!t&&n?82:16}}function sc(e,t,n){let r=Lr(e),i,a;Ar(e)||Ii(e)?(i=t-16,a=i-326):(a=16,i=a+326);let s=r?82:n-16-54-12;return{left:a,right:i,y:s}}var ac=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"];function us(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 aa(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 ps(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 lc(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 xo(e){if(e.id&&!e.id.startsWith("radix-")&&!e.id.startsWith(":"))return`#${CSS.escape(e.id)}`;let t=[],n=e;for(;n&&n!==document.documentElement;){let o=n.tagName.toLowerCase();if(n.id&&!n.id.startsWith("radix-")&&!n.id.startsWith(":")){t.unshift(`#${CSS.escape(n.id)}`);break}let r=Array.from(n.classList).filter(a=>!a.startsWith("_")&&a.length<30).slice(0,2);r.length>0&&(o+="."+r.map(a=>CSS.escape(a)).join("."));let i=n.parentElement;if(i){let a=Array.from(i.children).filter(s=>s.tagName===n.tagName);if(a.length>1){let s=a.indexOf(n)+1;o+=`:nth-of-type(${s})`}}t.unshift(o),n=i}return t.join(" > ")}function Hn(e){try{return document.querySelector(e)}catch{return null}}function fs(e,t=0){let n=aa(e);if(n.length===0)return null;let o=n.map(l=>l.name),r=n.length-1,i=Math.max(0,Math.min(n.length-1,r-t)),a=n[i],s=ps(a.fiber)??e;return{name:a.name,path:o,depthIndex:i,rootElement:s}}function cc(e,t){let n=aa(e),o=t.toLowerCase(),r=-1;for(let i=n.length-1;i>=0;i--){let a=n[i].name;if(a===t){let s=ps(n[i].fiber)??e;return{name:t,path:n.map(l=>l.name),depthIndex:i,rootElement:s}}if(r===-1){let s=a.toLowerCase();(s.length>=4&&o.includes(s)||o.length>=4&&s.includes(o))&&(r=i)}}if(r>=0){let i=ps(n[r].fiber)??e;return{name:t,path:n.map(a=>a.name),depthIndex:r,rootElement:i}}return null}function ii(e){let t=si(),n=[],o=new Set,r=t.currentNode;for(;r=t.nextNode();){let i=cc(r,e);i&&!o.has(i.rootElement)&&(o.add(i.rootElement),n.push(i))}return n}function la(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 a of n){let s=cc(i,a);if(!s||r.has(s.rootElement))continue;r.add(s.rootElement);let l=s.rootElement.getBoundingClientRect();t.set(a,l.top+window.scrollY),n.delete(a);break}for(let a of n)t.set(a,1/0);return t}function 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 Zn(e){let t={selector:lc(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=dc(e);n&&n.length>0&&n.length<200&&(t.textContent=n);let o={};for(let a of e.attributes)a.name.startsWith("data-")&&(o[a.name]=a.value);Object.keys(o).length>0&&(t.dataAttributes=o);let r=us(e);r&&(t.reactComponent=r.name);let i=Pp(e);return i&&(t.context=i),t}function dc(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function Pr(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 Pp(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 uc(e){let t=new Set,n=[],o=window.scrollX,r=window.scrollY,i=[{x:(e.minX+e.maxX)/2,y:(e.minY+e.maxY)/2},{x:e.minX,y:e.minY},{x:e.maxX,y:e.minY},{x:e.minX,y:e.maxY},{x:e.maxX,y:e.maxY}];for(let a of i){let s=a.x-o,l=a.y-r;if(s<0||l<0||s>window.innerWidth||l>window.innerHeight)continue;let c=Pr(s,l);c&&!t.has(c)&&(t.add(c),n.push(Zn(c)))}return n.slice(0,3)}function ca(e){if(e.length===0)return[];let t=e.map(o=>o.x),n=e.map(o=>o.y);return uc({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function Ln(e,t){return e.style.getPropertyValue(t)!==""}function Bp(e,t=30){if(e<=0)return[];let n=[],o=si(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let a=i,s=a.getBoundingClientRect();if(s.bottom<-50||s.top>window.innerHeight+50||s.right<-50||s.left>window.innerWidth+50||s.width<1||s.height<1)continue;let l=getComputedStyle(a);!Ln(a,"padding-top")&&Math.abs((parseFloat(l.paddingTop)||0)-e)<r&&n.push({element:a,property:"padding-top"}),!Ln(a,"padding-bottom")&&Math.abs((parseFloat(l.paddingBottom)||0)-e)<r&&n.length<t&&n.push({element:a,property:"padding-bottom"}),!Ln(a,"padding-left")&&Math.abs((parseFloat(l.paddingLeft)||0)-e)<r&&n.length<t&&n.push({element:a,property:"padding-left"}),!Ln(a,"padding-right")&&Math.abs((parseFloat(l.paddingRight)||0)-e)<r&&n.length<t&&n.push({element:a,property:"padding-right"}),!Ln(a,"margin-top")&&Math.abs((parseFloat(l.marginTop)||0)-e)<r&&n.length<t&&n.push({element:a,property:"margin-top"}),!Ln(a,"margin-bottom")&&Math.abs((parseFloat(l.marginBottom)||0)-e)<r&&n.length<t&&n.push({element:a,property:"margin-bottom"}),!Ln(a,"margin-left")&&Math.abs((parseFloat(l.marginLeft)||0)-e)<r&&n.length<t&&n.push({element:a,property:"margin-left"}),!Ln(a,"margin-right")&&Math.abs((parseFloat(l.marginRight)||0)-e)<r&&n.length<t&&n.push({element:a,property:"margin-right"});let c=l.display;if((c.includes("flex")||c.includes("grid"))&&n.length<t){let u=Ln(a,"gap"),d=parseFloat(l.gap)||0,p=parseFloat(l.rowGap)||0,g=parseFloat(l.columnGap)||0;!u&&Math.abs(d-e)<r?n.push({element:a,property:"gap"}):!Ln(a,"row-gap")&&Math.abs(p-e)<r?n.push({element:a,property:"row-gap"}):!Ln(a,"column-gap")&&Math.abs(g-e)<r&&n.push({element:a,property:"column-gap"})}}return n}function da(e,t=30){if(e<=0)return[];let n=[],o=si(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let a=i,s=a.getBoundingClientRect();if(s.bottom<-50||s.top>window.innerHeight+50||s.right<-50||s.left>window.innerWidth+50||s.width<1||s.height<1)continue;let l=getComputedStyle(a),c=parseFloat(l.borderTopWidth)||0,u=parseFloat(l.borderRightWidth)||0,d=parseFloat(l.borderBottomWidth)||0,p=parseFloat(l.borderLeftWidth)||0,g=a.clientWidth,b=a.clientHeight,C=parseFloat(l.paddingTop)||0;!Ln(a,"padding-top")&&Math.abs(C-e)<r&&n.push({x:s.left+p,y:s.top+c,width:g,height:e,direction:"vertical",property:"padding-top"});let v=parseFloat(l.paddingBottom)||0;!Ln(a,"padding-bottom")&&Math.abs(v-e)<r&&n.length<t&&n.push({x:s.left+p,y:s.top+c+b-e,width:g,height:e,direction:"vertical",property:"padding-bottom"});let x=parseFloat(l.paddingLeft)||0;!Ln(a,"padding-left")&&Math.abs(x-e)<r&&n.length<t&&n.push({x:s.left+p,y:s.top+c,width:e,height:b,direction:"horizontal",property:"padding-left"});let B=parseFloat(l.paddingRight)||0;!Ln(a,"padding-right")&&Math.abs(B-e)<r&&n.length<t&&n.push({x:s.left+p+g-e,y:s.top+c,width:e,height:b,direction:"horizontal",property:"padding-right"});let T=parseFloat(l.marginTop)||0;!Ln(a,"margin-top")&&Math.abs(T-e)<r&&n.length<t&&n.push({x:s.left,y:s.top-e,width:s.width,height:e,direction:"vertical",property:"margin-top"});let A=parseFloat(l.marginBottom)||0;!Ln(a,"margin-bottom")&&Math.abs(A-e)<r&&n.length<t&&n.push({x:s.left,y:s.bottom,width:s.width,height:e,direction:"vertical",property:"margin-bottom"});let E=parseFloat(l.marginLeft)||0;!Ln(a,"margin-left")&&Math.abs(E-e)<r&&n.length<t&&n.push({x:s.left-e,y:s.top,width:e,height:s.height,direction:"horizontal",property:"margin-left"});let V=parseFloat(l.marginRight)||0;!Ln(a,"margin-right")&&Math.abs(V-e)<r&&n.length<t&&n.push({x:s.right,y:s.top,width:e,height:s.height,direction:"horizontal",property:"margin-right"});let q=l.display;if((q.includes("flex")||q.includes("grid"))&&n.length<t&&!Ln(a,"gap")){let P=Array.from(a.children).filter(D=>{let f=getComputedStyle(D);return f.display!=="none"&&f.position!=="absolute"&&f.position!=="fixed"});if(P.length>=2)for(let D=0;D<P.length-1&&n.length<t;D++){let f=P[D].getBoundingClientRect(),m=P[D+1].getBoundingClientRect(),O=m.top-f.bottom;Math.abs(O-e)<r&&O>.5&&n.push({x:Math.min(f.left,m.left),y:f.bottom,width:Math.max(f.right,m.right)-Math.min(f.left,m.left),height:O,direction:"vertical",property:"gap"});let pe=m.left-f.right;Math.abs(pe-e)<r&&pe>.5&&n.push({x:f.right,y:Math.min(f.top,m.top),width:pe,height:Math.max(f.bottom,m.bottom)-Math.min(f.top,m.top),direction:"horizontal",property:"gap"})}}}return n}function gs(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 pc(e,t){let n=fc[t];return n?n.includes(e):!1}function Dp(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 _p(e){let t=e.lastIndexOf(":"),n=t>=0?e.slice(t+1):e,o=n.indexOf("-");if(o<0)return null;let r=n.slice(0,o),i={gap:"gap","gap-x":"column-gap","gap-y":"row-gap",p:"padding",pt:"padding-top",pb:"padding-bottom",pl:"padding-left",pr:"padding-right",px:"padding-left",py:"padding-top",m:"margin",mt:"margin-top",mb:"margin-bottom",ml:"margin-left",mr:"margin-right",mx:"margin-left",my:"margin-top"},a=n.slice(0,n.indexOf("-",o+1)>0?n.indexOf("-",o+1):o);return i[a]??i[r]??null}function ua(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(),a=i.currentNode;for(;(a=i.nextNode())&&r.length<t;){let s=a,l=s.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let c=s.className;if(typeof c=="string")for(let u of e.bindings){if(!Dp(c,u))continue;let d=_p(u);if(d&&!(e.property&&!pc(d,e.property))){r.push({element:s,property:d});break}}}return r}let o=Bp(n,t*2);return e.property?o.filter(r=>pc(r.property,e.property)).slice(0,t):o.slice(0,t)}function pa(e,t=30){let n=ua(e,t),o=[];for(let r of n){let i=r.element,a=i.getBoundingClientRect(),s=getComputedStyle(i),l=parseFloat(s.borderTopWidth)||0,c=parseFloat(s.borderRightWidth)||0,u=parseFloat(s.borderLeftWidth)||0,d=i.clientWidth,p=i.clientHeight;switch(r.property){case"padding-top":{let g=parseFloat(s.paddingTop)||0;o.push({x:a.left+u,y:a.top+l,width:d,height:g,direction:"vertical",property:r.property});break}case"padding-bottom":{let g=parseFloat(s.paddingBottom)||0;o.push({x:a.left+u,y:a.top+l+p-g,width:d,height:g,direction:"vertical",property:r.property});break}case"padding-left":{let g=parseFloat(s.paddingLeft)||0;o.push({x:a.left+u,y:a.top+l,width:g,height:p,direction:"horizontal",property:r.property});break}case"padding-right":{let g=parseFloat(s.paddingRight)||0;o.push({x:a.left+u+d-g,y:a.top+l,width:g,height:p,direction:"horizontal",property:r.property});break}case"margin-top":{let g=parseFloat(s.marginTop)||0;o.push({x:a.left,y:a.top-g,width:a.width,height:g,direction:"vertical",property:r.property});break}case"margin-bottom":{let g=parseFloat(s.marginBottom)||0;o.push({x:a.left,y:a.bottom,width:a.width,height:g,direction:"vertical",property:r.property});break}case"margin-left":{let g=parseFloat(s.marginLeft)||0;o.push({x:a.left-g,y:a.top,width:g,height:a.height,direction:"horizontal",property:r.property});break}case"margin-right":{let g=parseFloat(s.marginRight)||0;o.push({x:a.right,y:a.top,width:g,height:a.height,direction:"horizontal",property:r.property});break}case"gap":case"row-gap":case"column-gap":{let g=Array.from(i.children).filter(b=>{let C=getComputedStyle(b);return C.display!=="none"&&C.position!=="absolute"&&C.position!=="fixed"});for(let b=0;b<g.length-1&&o.length<t;b++){let C=g[b].getBoundingClientRect(),v=g[b+1].getBoundingClientRect(),x=v.top-C.bottom;x>.5&&o.push({x:Math.min(C.left,v.left),y:C.bottom,width:Math.max(C.right,v.right)-Math.min(C.left,v.left),height:x,direction:"vertical",property:"gap"});let B=v.left-C.right;B>.5&&o.push({x:C.right,y:Math.min(C.top,v.top),width:B,height:Math.max(C.bottom,v.bottom)-Math.min(C.top,v.top),direction:"horizontal",property:"gap"})}break}}}return o}function gc(e,t){let n=new Set,o=Ri(t);for(let r of e){let i=hc[r.property];if(!i)continue;let a=r.element.className;if(typeof a=="string")for(let s of i){let l=`${s}-${o}`;for(let c of a.split(/\s+/)){let u=c.lastIndexOf(":"),d=u>=0?c.slice(u+1):c;if(d===l){n.add(d);break}}}}return[...n]}function mc(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 fa(e,t,n){if(t===n)return e;let o=Ri(t),r=Ri(n);return e.map(i=>{let a=i.lastIndexOf("-");if(a<0)return i;let s=i.slice(0,a),l=i.slice(a+1);return l===o||l===`[${t}px]`?`${s}-${r}`:i})}var Op={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 Ri(e){return Op[e]??`[${e}px]`}var hc={"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 Hp(e,t,n,o){let r=hc[t];if(!r)return null;let i=Ri(n);for(let a of r){let s=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+a+"-(?:"+Fp(i)+"|\\["+n+"px\\]))(?:\\s|$)"),l=e.match(s);if(l?.[1]){let c=Ri(o),u=l[1].lastIndexOf(":"),d=u>=0?l[1].slice(0,u+1):"";return{matched:l[1],suggested:`${d}${a}-${c}`}}}return null}function Fp(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function yc(e,t,n){let o=new Set,r=[];for(let i of e){let a=xo(i.element),s=`${a}::${i.property}`;if(o.has(s))continue;o.add(s);let l=us(i.element),c=i.element.className||"",u=Hp(c,i.property,t,n);r.push({selector:a,reactComponent:l?.name,className:c,property:i.property,matchedClass:u?.matched,suggestedClass:u?.suggested})}return r}function ms(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function ai(e,t){if(e instanceof HTMLElement){let o=e.style.getPropertyValue(t);if(o)return o}let n=t.replace(/-([a-z])/g,(o,r)=>r.toUpperCase());try{for(let o of document.styleSheets)try{let r=o.cssRules||o.rules;for(let i of r)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let a=i.style.getPropertyValue(t);if(a)return a;let s=i.style[n];if(s)return s}}catch{}}catch{}return null}function hs(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function Br(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function zp(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 ar(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,a=i==="column"||i==="column-reverse",s=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(a){let d=(c.bottom+u.top)/2;n.push({axis:"row",x:o.left,y:d-s/2,w:o.width,h:s})}else{let d=(c.right+u.left)/2;n.push({axis:"column",x:d-s/2,y:o.top,w:s,h:o.height})}}return zp(n)}function ga(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 li(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 Dr(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 ma(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,a=parseFloat(r.lineHeight);isNaN(a)&&(a=i*1.2);let s=Math.max(1,t.getClientRects().length),l=Math.max(o.height,s*a),c=(l-o.height)/2;return new DOMRect(o.x,o.y-c,o.width,l)}function Li(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 dt(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function bc(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function ys(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)dt(n,o.property,o.modified)}}function bs(e){for(let t of e){let n=Hn(t.selector);if(n)for(let o of t.changes)bc(n,o.property,o.original)}}function vc(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){vc(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Np(r.style,t,n,o)}}}function Np(e,t,n,o){for(let r=0;r<e.length;r++){let i=e[r];if(i?.startsWith("--")){if(n.has(i))continue;n.add(i);let a=t.getPropertyValue(i).trim();xc(a)&&o.push({name:i,value:a,usage:`var(${i})`})}}}var vs=null,$p=5e3;function ha(){if(vs&&Date.now()-vs.timestamp<$p)return vs.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{vc(i.cssRules||i.rules,n,t,e)}catch{}}catch{}let o=document.documentElement.style;for(let i=0;i<o.length;i++){let a=o[i];if(a?.startsWith("--")&&!t.has(a)){t.add(a);let s=n.getPropertyValue(a).trim();xc(s)&&e.push({name:a,value:s,usage:`var(${a})`})}}let r=e.sort((i,a)=>i.name.localeCompare(a.name));return vs={variables:r,timestamp:Date.now()},r}function xc(e){if(!e)return!1;let t=e.toLowerCase().trim();return!!(/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)||t.startsWith("rgb")||t.startsWith("hsl")||t.startsWith("oklch")||t.startsWith("oklab")||t.startsWith("lch")||t.startsWith("lab")||["transparent","currentcolor","inherit","white","black","red","green","blue","yellow","orange","purple","pink","gray","grey"].includes(t))}function fr(e,t){let n=t.match(/var\((--[^,)]+)(?:,\s*([^)]+))?\)/);if(n){let o=n[1],r=n[2];return getComputedStyle(document.documentElement).getPropertyValue(o).trim()||r||t}return t}import{domToCanvas as Wp}from"modern-screenshot";var Sc="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";function jp(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 ya(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function ba(e,t=[],n,o){let r=new Map,i=[];for(let s of e)if(s.groupId){let l=r.get(s.groupId)||[];l.push(s),r.set(s.groupId,l)}else i.push(s);let a=[];for(let[s,l]of r){let c=l.find(d=>d.type!=="text"),u=l.find(d=>d.type==="text");if(c){let d=c.linkedSelector||u?.linkedSelector,p=u?.imageCount||c.imageCount,g=c.pathname||u?.pathname;a.push({id:c.id,type:c.type,instruction:u?.text,...d?{linkedSelector:d}:{},...g?{pathname:g}:{},elements:c.elements||[],...p?{imageCount:p}:{}})}}for(let s of i)a.push({id:s.id,type:s.type,instruction:s.type==="text"?s.text:void 0,...s.linkedSelector?{linkedSelector:s.linkedSelector}:{},...s.pathname?{pathname:s.pathname}:{},elements:s.elements||[],...s.imageCount?{imageCount:s.imageCount}:{}});return{timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:a,styleModifications:t,...n?{inspectedElement:n}:{},...o&&o.length>0?{spacingTokenChanges:o}:{}}}function Vp(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 Gp(e,t){if(e.length===0)return[];let n=e.map(u=>({annotation:u,bounds:Vp(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=[],a=50,s=Math.max(0,o-a),l=[],c=s;for(let{annotation:u,bounds:d}of n){let p=d.maxY+a;if(p-s<=t)l.push(u),c=Math.max(c,p);else{if(l.length>0){let g=(s+c)/2,b=Math.max(0,g-t/2);i.push({top:b,bottom:b+t,annotations:l})}s=Math.max(0,d.minY-a),l=[u],c=d.maxY+a}}if(l.length>0){let u=(s+c)/2,d=Math.max(0,u-t/2);i.push({top:d,bottom:d+t,annotations:l})}return i}function Jp(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 Yp(e,t,n,o,r){if(e.save(),e.scale(o,o),r)for(let i of t){let a=r.get(i.id);if(!a)continue;let s=a.y-n;e.fillStyle=i.color,e.globalAlpha=.05,e.fillRect(a.x,s,a.width,a.height),e.globalAlpha=1,e.strokeStyle=i.color,e.lineWidth=1,e.setLineDash([2,4]),e.strokeRect(a.x,s,a.width,a.height),e.setLineDash([])}for(let i of t){let a=i.points.map(s=>({x:s.x,y:s.y-n}));switch(e.strokeStyle=i.color,e.fillStyle=i.color,e.lineWidth=i.strokeWidth,e.lineCap="round",e.lineJoin="round",i.type){case"freehand":if(a.length<2)break;e.beginPath(),e.moveTo(a[0].x,a[0].y);for(let s=1;s<a.length;s++)e.lineTo(a[s].x,a[s].y);e.stroke();break;case"line":if(a.length<2)break;e.beginPath(),e.moveTo(a[0].x,a[0].y),e.lineTo(a[a.length-1].x,a[a.length-1].y),e.stroke();break;case"rectangle":{if(a.length<2)break;let s=a[0],l=a[a.length-1],c=Math.min(s.x,l.x),u=Math.min(s.y,l.y),d=Math.abs(l.x-s.x),p=Math.abs(l.y-s.y);e.strokeRect(c,u,d,p);break}case"circle":{if(a.length<2)break;let s=a[0],l=a[a.length-1],c=(s.x+l.x)/2,u=(s.y+l.y)/2,d=Math.abs(l.x-s.x)/2,p=Math.abs(l.y-s.y)/2;e.beginPath(),e.ellipse(c,u,d,p,0,0,Math.PI*2),e.stroke();break}case"text":{if(!i.text||a.length<1)break;let s=a[0],l=i.fontSize||16;e.font=`${l}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=i.color;let 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,g=0;for(let b of u)g=Math.max(g,e.measureText(b).width);e.fillRect(s.x-p,s.y-p,g+p*2,u.length*d+p*2),e.fillStyle="#ffffff",u.forEach((b,C)=>{e.fillText(b,s.x,s.y+l+C*d)});break}}}e.restore()}async function di(e,t,n=[],o){try{let r=o?.dpr??(window.devicePixelRatio||1),i=window.innerWidth,a=window.innerHeight,s=n.filter(d=>(d.status??"pending")==="pending");console.log("[Screenshot] Starting capture with",s.length,"active annotations (filtered",n.length-s.length,"captured)");let l=Jp(s),c=Gp(s,a);if(c.length===0){let d=await wc(e,[],window.scrollY,i,a,r,l);return d?[d]:[]}let u=[];for(let d=0;d<c.length;d++){let p=c[d],g=await wc(e,p.annotations,p.top,i,a,r,l);g?u.push(g):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 wc(e,t,n,o,r,i,a){try{let s=getComputedStyle(document.documentElement).backgroundColor,c=await Wp(e,{filter:p=>!(p instanceof HTMLElement&&(p.id==="devtools-canvas"||p.id==="devtools-toolbar"||p.id==="devtools-scrim"||p.dataset.devtools!==void 0)),scale:i,backgroundColor:s&&s!=="rgba(0, 0, 0, 0)"&&s!=="transparent"?s:"#ffffff",width:o,height:r,style:{transform:`translate(${-window.scrollX}px, ${-n}px)`},fetchFn:async p=>jp(p)?Sc:!1,fetch:{placeholderImage:Sc}}),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),Yp(d,t,n,i,a),new Promise(p=>{u.toBlob(g=>p(g),"image/webp",.8)})):null}catch(s){return console.error("Region capture failed:",s),null}}async function Ai(e){if(e.length===0)return null;if(e.length===1)return e[0];let t=await Promise.all(e.map(s=>new Promise((l,c)=>{let u=new Image;u.onload=()=>l(u),u.onerror=c,u.src=URL.createObjectURL(s)}))),n=t[0].width,o=t.reduce((s,l)=>s+l.height,0),r=document.createElement("canvas");r.width=n,r.height=o;let i=r.getContext("2d");if(!i)return null;let a=0;for(let s of t)i.drawImage(s,0,a),a+=s.height,URL.revokeObjectURL(s.src);return new Promise(s=>{r.toBlob(l=>s(l),"image/webp",.8)})}async function Cc(e,t,n){try{let o=Array.isArray(e)?e:[e];if(o.length===0)return!1;let r=await Ai(o);if(!r)return!1;let i=r;if(r.type!=="image/png"){let c=new Image,u=URL.createObjectURL(r);await new Promise(p=>{c.onload=()=>p(),c.src=u}),URL.revokeObjectURL(u);let d=document.createElement("canvas");d.width=c.naturalWidth,d.height=c.naturalHeight,d.getContext("2d").drawImage(c,0,0),i=await new Promise(p=>d.toBlob(g=>p(g),"image/png"))}let a={"image/png":i},s=t&&t.length>0,l=n&&n.length>0;if(s||l){let c=t?t.filter(u=>(u.status??"pending")==="pending"):[];if(c.length>0||l){let u=ba(c,n||[]),d=new Blob([JSON.stringify(u,null,2)],{type:"text/plain"});a["text/plain"]=d}}return await navigator.clipboard.write([new ClipboardItem(a)]),!0}catch(o){return console.warn("Clipboard write failed:",o),!1}}var Ec={name:"@popmelt.com/core",version:"0.8.2",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 xs=Ec.version;import{useCallback as kn,useEffect as Wn,useMemo as bi,useRef as tn,useState as Tt}from"react";import{useCallback as ui,useRef as qp}from"react";function va(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let a=(r.x+i.x)/2,s=(r.y+i.y)/2,l=Math.abs(i.x-r.x)/2,c=Math.abs(i.y-r.y)/2;e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.ellipse(a,s,l,c,0,0,Math.PI*2),e.stroke()}function xa(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!(!r||!i)){e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.moveTo(r.x,r.y);for(let a=1;a<t.length-1;a++){let s=t[a],l=t[a+1];if(!s||!l)continue;let c=(s.x+l.x)/2,u=(s.y+l.y)/2;e.quadraticCurveTo(s.x,s.y,c,u)}e.lineTo(i.x,i.y),e.stroke()}}function Sa(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 wa(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let a=Math.min(r.x,i.x),s=Math.min(r.y,i.y),l=Math.abs(i.x-r.x),c=Math.abs(i.y-r.y);e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.strokeRect(a,s,l,c)}var An='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function Kp(e,t,n){if(!t||e.measureText(t).width<=n)return[t];let o=t.split(/\s+/),r=[],i="";for(let a of o){let s=i?i+" "+a:a;i&&e.measureText(s).width>n?(r.push(i),i=a):i=s}return i&&r.push(i),r.length>0?r:[t]}function Pi(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function kc(e,t,n){let o=[];for(let r of t)o.push(...Kp(e,r,n));return o}function Bi(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 Xp(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 Ca(e,t,n,o,r){let i=typeof window<"u"?window.innerHeight:9999,a=0,s=i;n&&Xp(o,r,n)&&(a=n.avoidTop??a,s=n.avoidBottom??s);let l=Math.max(a,s-t);return Math.max(a,Math.min(e,l))}function Ea(e,t=12,n,o){let r=t*1.4+8,i=e.y-4,a=e.x-4,s=Ca(i,r,n,a,o);return s===i?e:{...e,y:s+4}}function Tc(e,t,n,o,r=12,i,a,s){if(!n)return;let l=r*1.4,c=n.replace(/\n/g," "),u=i!==void 0?i+". "+c:c;e.font=`${r}px ${An}`,e.textBaseline="middle";let d=a!==void 0?Math.min(400,Math.max(60,window.innerWidth-a-16)):400,p=Bi(e,u,d),g=e.measureText(p).width,b=Ea(t,r,s,g+8);e.fillStyle=o,e.fillRect(b.x-4,b.y-4,g+8,l+8),e.fillStyle="#ffffff",e.fillText(p,b.x,b.y+l/2)}var Mc=11,ka=4,Zp=`600 ${Mc}px system-ui, -apple-system, sans-serif`;function Ta(e,t,n){return e.map(o=>({x:o.x-t,y:o.y-n}))}function Qp(e,t,n,o,r,i){let a=String(o);e.font=Zp;let l=e.measureText(a).width+ka*2,c=Mc+ka*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(a,u+ka,d+c/2)}function ef(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 Ic(){let e=qp(null),t=ui(()=>{let s=e.current;if(!s)return;let l=s.getContext("2d");l&&l.clearRect(0,0,s.width,s.height)},[]),n=ui((s,l,c,u)=>{let d=e.current;if(!d)return;let p=d.getContext("2d");if(!p)return;let b=(s.status??(s.captured?"in_flight":"pending"))==="pending"||c?s.color:"#999999";switch(s.type){case"freehand":xa(p,s.points,b,s.strokeWidth);break;case"line":Sa(p,s.points,b,s.strokeWidth);break;case"rectangle":wa(p,s.points,b,s.strokeWidth);break;case"circle":va(p,s.points,b,s.strokeWidth);break;case"text":s.text&&s.points[0]&&Tc(p,s.points[0],s.text,b,s.fontSize,l,s.points[0].x,u);break}},[]),o=ui((s,l,c,u)=>{let d=e.current;if(!d||s.length<2)return;let p=d.getContext("2d");if(p)switch(l){case"freehand":xa(p,s,c,u);break;case"line":Sa(p,s,c,u);break;case"rectangle":wa(p,s,c,u);break;case"circle":va(p,s,c,u);break}},[]),r=ui((s,l)=>{let c=e.current;if(!c||s.points.length<2)return;let u=c.getContext("2d");if(u){if(u.fillStyle="#ffffff",u.strokeStyle=s.color,u.lineWidth=1.5,s.type==="line"){let d=s.points[0],p=s.points[s.points.length-1];[d,p].forEach(g=>{u.beginPath(),u.arc(g.x,g.y,l/2,0,Math.PI*2),u.fill(),u.stroke()});return}if(s.type==="circle"){let d=s.points[0],p=s.points[s.points.length-1],g=Math.min(d.x,p.x),b=Math.max(d.x,p.x),C=Math.min(d.y,p.y),v=Math.max(d.y,p.y),x=(g+b)/2,B=(C+v)/2;[{x,y:C},{x,y:v},{x:g,y:B},{x:b,y:B}].forEach(A=>{u.beginPath(),u.rect(A.x-l/2,A.y-l/2,l,l),u.fill(),u.stroke()});return}if(s.type==="rectangle"||s.type==="freehand"){let d,p,g,b;if(s.type==="freehand")d=Math.min(...s.points.map(v=>v.x)),p=Math.max(...s.points.map(v=>v.x)),g=Math.min(...s.points.map(v=>v.y)),b=Math.max(...s.points.map(v=>v.y));else{let v=s.points[0],x=s.points[s.points.length-1];d=Math.min(v.x,x.x),p=Math.max(v.x,x.x),g=Math.min(v.y,x.y),b=Math.max(v.y,x.y)}[{x:d,y:g},{x:p,y:g},{x:d,y:b},{x:p,y:b}].forEach(v=>{u.beginPath(),u.rect(v.x-l/2,v.y-l/2,l,l),u.fill(),u.stroke()})}}},[]),i=ui((s,l,c,u,d,p,g,b=0,C=0,v,x,B)=>{if(t(),s.forEach(T=>{let A={...T,points:Ta(T.points,b,C)},E=v?.get(T.id),V=x?.has(T.id)??!1;n(A,E,V,B)}),l.length>0){let T=Ta(l,b,C);o(T,c,u,d)}if(p&&p.length>0&&g){let A=e.current?.getContext("2d");for(let E of p){let V=s.find(q=>q.id===E);if(V){let q={...V,points:Ta(V.points,b,C)};if(r(q,g),A&&V.type!=="text"&&v&&!(V.groupId&&s.some(P=>P.groupId===V.groupId&&P.type==="text"))){let P=v.get(V.id);if(P!==void 0){let D=ef(q,g);if(D){let m=(V.status??(V.captured?"in_flight":"pending"))==="pending"?V.color:"#999999";Qp(A,D.x,D.y,P,m,g)}}}}}}},[t,n,o,r]),a=ui(()=>{let s=e.current;if(!s)return;let l=window.devicePixelRatio||1;s.width=window.innerWidth*l,s.height=window.innerHeight*l;let c=s.getContext("2d");c&&c.scale(l,l)},[]);return{canvasRef:e,clearCanvas:t,drawAnnotation:n,drawCurrentPath:o,redrawAll:i,resizeCanvas:a}}import{useEffect as tf,useRef as nf}from"react";function Rc(){let e=nf({shift:!1,cmd:!1});return tf(()=>{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 of}from"react";function Lc(e,t,n,o,r){of(()=>{let i=a=>{if(e){if(e.linkedSelector)return;a.preventDefault(),a.stopPropagation();let l=a.deltaY>0?-2:2;t(c=>c?{...c,fontSize:Math.max(12,Math.min(72,c.fontSize+l))}:null);return}if(!n)return;a.preventDefault();let s=o.find(l=>l.id===n);if(s&&s.type==="text"&&!s.linkedSelector){let l=s.fontSize||12,c=a.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 Ia,useRef as rf,useState as Ra}from"react";import{Fragment as Di,jsx as un,jsxs as _r}from"react/jsx-runtime";var gr=22,_i=12,pi=8,sf=3,af=250,Ss=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],lf=3e3;function cf(e){let t=e?.current?.getBoundingClientRect();return!t||typeof window>"u"?{}:t.top<window.innerHeight/2?{avoidTop:t.bottom+pi,avoidLeft:t.left-pi,avoidRight:t.right+pi}:{avoidBottom:t.top-pi,avoidLeft:t.left-pi,avoidRight:t.right+pi}}function df(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 Ma(e,t,n){return df(t,n,e)?e:{}}function uf(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 Ac(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,a=Math.max(r,i-t);return Math.max(r,Math.min(e,a))}function pf({left:e,top:t,scrollX:n,scrollY:o,avoidTop:r,avoidBottom:i,style:a,children:s,...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+_i}px - var(--popmelt-scroll-x, ${n}px))`,p=`calc(${t+_i}px - var(--popmelt-scroll-y, ${o}px))`;return un("div",{"data-devtools":"badge-hit-area",...l,style:{position:"fixed",left:0,top:0,padding:_i,...a,transform:`translate3d(${c}, ${u}, 0)`,willChange:"transform"},children:un("div",{style:{transform:uf(d,p,{avoidTop:r,avoidBottom:i})},children:s})})}function Pc({annotations:e,supersededAnnotations:t,inFlightIds:n,activeIds:o,queuePositions:r,scrollX:i,scrollY:a,annotationGroupMap:s,onViewThread:l,onSelectAnnotation:c,onHoverAnnotation:u,canvasRef:d,toolbarRef:p}){let g=rf(null),[b,C]=Ra(0),[v,x]=Ra(()=>Math.floor(Math.random()*Ss.length)),B=!!(n&&n.size>0);Ia(()=>{if(!B)return;let f=setInterval(()=>{C(O=>(O+1)%sf)},af),m=setInterval(()=>{x(O=>(O+1)%Ss.length)},lf);return()=>{clearInterval(f),clearInterval(m)}},[B]),Ia(()=>{let f=g.current;if(!f)return;let m=null,O=()=>{m=null,f.style.setProperty("--popmelt-scroll-x",`${window.scrollX}px`),f.style.setProperty("--popmelt-scroll-y",`${window.scrollY}px`)},pe=()=>{m===null&&(m=window.requestAnimationFrame(O))};return O(),window.addEventListener("scroll",pe,{passive:!0}),window.addEventListener("resize",pe),()=>{window.removeEventListener("scroll",pe),window.removeEventListener("resize",pe),m!==null&&window.cancelAnimationFrame(m)}},[]);let T=[];for(let f of e){if(f.type!=="text"||!f.text||!f.points[0]||t.has(f))continue;let m=f.groupId?e.filter(Ee=>Ee.groupId===f.groupId):[f],O=f.status??"pending",pe=m.reduce((Ee,Ye)=>Ee+(Ye.replyCount??0),0),ye=!!(n&&(n.has(f.id)||m.some(Ee=>n.has(Ee.id))))||f.status==="in_flight"||m.some(Ee=>Ee.status==="in_flight"),ce=m.some(Ee=>Ee.status==="resolved"&&(Ee.replyCount??0)>0||Ee.status==="needs_review"),fe=m.some(Ee=>Ee.threadId);if(!ye&&O!=="resolved"&&O!=="needs_review"&&!ce&&!fe)continue;let ge=f.threadId||m.find(Ee=>Ee.threadId)?.threadId,Ge=O==="needs_review"||m.some(Ee=>Ee.status==="needs_review"),W=O==="waiting_input"||m.some(Ee=>Ee.status==="waiting_input"),_=f.points[0],J=f.fontSize||12,Te=J*1.4,_e=s.get(f.id),Z=f.text.replace(/\n/g," "),He=_e!==void 0?_e+". "+Z:Z,rt=d?.current?.getContext("2d")??document.createElement("canvas").getContext("2d");if(!rt)continue;rt.font=`${J}px ${An}`;let ve=_.x-i,ae=Pi(ve),Ae=Bi(rt,He,ae),st=rt.measureText(Ae).width,Le=ye&&!!o&&!o.has(f.id)&&!m.some(Ee=>o.has(Ee.id));T.push({id:f.id,threadId:ge,linkedSelector:f.linkedSelector||m.find(Ee=>Ee.linkedSelector)?.linkedSelector,x:_.x+st+4,y:_.y-4,size:Te+8,color:f.color,isInFlight:ye,isQueued:Le,queuePosition:void 0,isNeedsReview:Ge,isQuestion:W,replyCount:pe})}let A=T.filter(f=>f.isQueued);if(A.length>0&&A.forEach((f,m)=>{f.queuePosition=r?.get(f.id)??`(${m+1}/${A.length})`}),T.length===0)return null;let E=2,V=d?.current?.getContext("2d")??document.createElement("canvas").getContext("2d"),q=T.map(f=>{let m;f.isQueued?m=f.queuePosition?`queued ${f.queuePosition}`:"queued":f.isInFlight?m=Ss[v]??"thinking":f.isQuestion?m="? Question":f.replyCount>0?m=`${f.replyCount} ${f.replyCount===1?"reply":"replies"}`:m="View";let O=!f.isQueued,pe=O?11:0,ye=O?4:0,ce=m.length*7.2;return V&&(V.font=`12px ${An}`,ce=V.measureText(m).width),4+pe+ye+ce+4}),se=cf(p),P=[];for(let f=0;f<T.length;f++){let m=T[f].y-a,O=T[f].x-i,pe=Ma(se,O,q[f]),ye=Ac(m,T[f].size,pe),ce=ye+T[f].size,fe=O;for(let ge=0;ge<f;ge++){let Ge=T[ge].y-a,W=Ma(se,P[ge],q[ge]),_=Ac(Ge,T[ge].size,W),J=_+T[ge].size;if(!(ye<J&&ce>_))continue;let _e=P[ge]+q[ge];fe<_e+E&&(fe=_e+E)}P.push(fe)}let D={position:"fixed",inset:0,pointerEvents:"none",zIndex:9999,"--popmelt-scroll-x":`${i}px`,"--popmelt-scroll-y":`${a}px`};return _r("div",{ref:g,"data-devtools":"annotation-badge-layer",style:D,children:[un("style",{dangerouslySetInnerHTML:{__html:`
|
|
4
|
+
[data-devtools="annotation-badge-layer"] [data-devtools="annotation-badge"]::selection,
|
|
5
|
+
[data-devtools="annotation-badge-layer"] [data-devtools="annotation-badge"] *::selection {
|
|
6
|
+
background: #000000;
|
|
7
|
+
color: #ffffff;
|
|
8
|
+
}
|
|
9
|
+
`}}),T.map((f,m)=>{let O=!!f.threadId,pe=Ma(se,P[m],q[m]);return un(pf,{left:P[m]+i-_i,top:f.y-_i,scrollX:i,scrollY:a,avoidTop:pe.avoidTop,avoidBottom:pe.avoidBottom,onMouseDown:O?ye=>ye.stopPropagation():void 0,onClick:O?ye=>{if(ye.stopPropagation(),c?.(f.id),l?.(f.threadId),f.linkedSelector)try{let ce=document.querySelector(f.linkedSelector);if(ce){let fe=ce.getBoundingClientRect();(fe.bottom<0||fe.top>window.innerHeight)&&ce.scrollIntoView({behavior:"smooth",block:"center"})}}catch{}}:void 0,onMouseEnter:u?()=>u(f.id):void 0,onMouseLeave:u?()=>u(null):void 0,style:{pointerEvents:O?"auto":"none",cursor:O?"pointer":void 0,zIndex:9999},children:un("div",{"data-devtools":"annotation-badge",style:{height:f.size,display:"flex",alignItems:"center",backgroundColor:f.color,fontFamily:An,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:f.isQueued?_r("span",{style:{opacity:.5,color:"inherit"},children:["queued",f.queuePosition?` ${f.queuePosition}`:""]}):f.isInFlight?_r(Di,{children:[un("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:b===1?_r(Di,{children:[un("circle",{cx:"7",cy:"7",r:"2"}),un("circle",{cx:"17",cy:"7",r:"2"}),un("circle",{cx:"7",cy:"17",r:"2"}),un("circle",{cx:"17",cy:"17",r:"2"})]}):_r(Di,{children:[un("circle",{cx:"12",cy:"6",r:"2"}),un("circle",{cx:"6",cy:"12",r:"2"}),un("circle",{cx:"18",cy:"12",r:"2"}),un("circle",{cx:"12",cy:"18",r:"2"})]})}),un("span",{style:{opacity:.7,color:"inherit"},children:Ss[v]})]}):_r(Di,{children:[f.isQuestion||f.isNeedsReview?un("span",{style:{fontWeight:700,color:"inherit"},children:"?"}):un("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:un("polyline",{points:"4 12 10 18 20 6"})}),un("span",{style:{opacity:.7,color:"inherit"},children:f.isQuestion?"Question":f.replyCount>0?`${f.replyCount} ${f.replyCount===1?"reply":"replies"}`:"View"})]})})},f.id)})]})}function La({inFlightSelectorColors:e,animated:t=!0}){let[n,o]=Ra([]);return Ia(()=>{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)},a=()=>{r&&cancelAnimationFrame(r),r=requestAnimationFrame(i)};i(),window.addEventListener("scroll",a,!0),window.addEventListener("resize",a,!0);let s=new MutationObserver(a);return s.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",a,!0),window.removeEventListener("resize",a,!0),s.disconnect(),r&&cancelAnimationFrame(r)}},[e]),n.length===0?null:_r(Di,{children:[t&&un("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(r=>un("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:un("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:un("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 ws(e){let t=new Set,n=new Map;for(let i of e){if(!i.linkedSelector)continue;let a=n.get(i.linkedSelector)||[];a.push(i),n.set(i.linkedSelector,a)}let o=new Set,r=new Set;for(let i of n.values()){if(i.length<=1){i[0]?.groupId&&r.add(i[0].groupId);continue}i.sort((s,l)=>l.timestamp-s.timestamp);let a=i[0];a.groupId&&r.add(a.groupId);for(let s=1;s<i.length;s++){let l=i[s];t.add(l),l.groupId&&o.add(l.groupId)}}for(let i of e)i.groupId&&o.has(i.groupId)&&!r.has(i.groupId)&&t.add(i);return t}import{useEffect as Bc,useLayoutEffect as ff,useState as Dc}from"react";import{jsx as Aa,jsxs as Oc}from"react/jsx-runtime";function gf(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 _c=["top-left","top-right","bottom-right","bottom-left"];function Hc({element:e,radius:t,accentColor:n,hoveredCorner:o,draggingCorner:r,cursorViewport:i}){let[a,s]=Dc(null),[l,c]=Dc(!1);if(Bc(()=>{let x=A=>{(A.key==="Meta"||A.key==="Control")&&c(!0)},B=A=>{(A.key==="Meta"||A.key==="Control")&&c(!1)},T=()=>c(!1);return window.addEventListener("keydown",x,!0),window.addEventListener("keyup",B,!0),window.addEventListener("blur",T),()=>{window.removeEventListener("keydown",x,!0),window.removeEventListener("keyup",B,!0),window.removeEventListener("blur",T)}},[]),Bc(()=>{if(!e){s(null);return}let x=()=>{s(e.getBoundingClientRect())};return x(),window.addEventListener("scroll",x,{passive:!0}),window.addEventListener("resize",x,{passive:!0}),()=>{window.removeEventListener("scroll",x),window.removeEventListener("resize",x)}},[e]),ff(()=>{e&&s(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!a)return null;let u=a.width,d=a.height,p=gf(n,.2),g={"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"]}},b=new Set,C=r??o;if(C)if(l)b.add(C);else for(let x of _c)b.add(x);let v={position:"fixed",top:a.top,left:a.left,width:u,height:d,pointerEvents:"none",zIndex:9996,overflow:"visible"};return Oc("div",{"data-devtools":"border-radius-handles",style:v,children:[Oc("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${u} ${d}`,children:[Aa("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"}),_c.map(x=>{let B=g[x],T=b.has(x);return Aa("circle",{cx:B.x,cy:B.y,r:x===(r??o)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:x===(r??o)?4:2,paintOrder:"stroke"},x)})]}),i&&C&&(()=>{let x=Math.round(t[C]);return Aa("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:x})})()]})}import{useEffect as mf,useLayoutEffect as hf,useState as Fc}from"react";import{jsx as mr,jsxs as Pa}from"react/jsx-runtime";function yf(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 Oi(e,t){return e.left<t.right&&e.right>t.left&&e.top<t.bottom&&e.bottom>t.top}function hr(e,t,n){return n<t?t:Math.max(t,Math.min(n,e))}function zc(e,t,n,o){let r=Math.max(e,0),i=Math.min(t,n);return(i>r?(r+i)/2:hr((e+t)/2,o,n-o))-e}function Nc(e,t){return!!t&&Oi(e,t)}function $c({element:e,axis:t,accentColor:n,avoidElement:o}){let[r,i]=Fc(null),[a,s]=Fc(null);if(mf(()=>{if(!e){i(null),s(null);return}let ve=()=>{i(e.getBoundingClientRect()),s(o?.getBoundingClientRect()??null)};return ve(),window.addEventListener("scroll",ve,{passive:!0}),window.addEventListener("resize",ve,{passive:!0}),()=>{window.removeEventListener("scroll",ve),window.removeEventListener("resize",ve)}},[e,o]),hf(()=>{e&&(i(e.getBoundingClientRect()),s(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=yf(n,.75),g=6,b=`${u} \xD7 ${d}`,C=Math.max(48,b.length*8+8),v=19,x=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},T={position:"fixed",top:r.top,left:r.left,width:l,height:c,pointerEvents:"none",zIndex:9998,overflow:"visible"},A=28,E=!!a&&Oi({left:r.left,right:r.right,top:r.top-A,bottom:r.top+A},a),V=!!a&&Oi({left:r.left,right:r.right,top:r.bottom-A,bottom:r.bottom+A},a),q=!!a&&Oi({left:r.right-A,right:r.right+A+50,top:r.top,bottom:r.bottom},a),se=!!a&&Oi({left:r.left-A-50,right:r.left+A,top:r.top,bottom:r.bottom},a),P=r.top>=0&&r.top<=window.innerHeight,D=r.bottom>=0&&r.bottom<=window.innerHeight,f=r.left>=0&&r.left<=window.innerWidth,m=r.right>=0&&r.right<=window.innerWidth,O="top";!P&&D?O="bottom":P&&!D?O="top":E&&!V&&(O="bottom");let pe="right";!m&&f?pe="left":m&&!f?pe="right":q&&!se&&(pe="left");let ye=O==="top"?P?0:hr(0-r.top,0,c):D?c:hr(window.innerHeight-r.top,0,c),ce=pe==="right"?m?l:hr(window.innerWidth-r.left,0,l):f?0:hr(0-r.left,0,l),fe=hr(zc(r.left,r.right,window.innerWidth,8),8,Math.max(8,l-8)),ge=hr(zc(r.top,r.bottom,window.innerHeight,8),8,Math.max(8,c-8)),Ge=r.left+fe-C/2,W={left:Ge,right:Ge+C,top:r.bottom+x,bottom:r.bottom+x+v},_={left:Ge,right:Ge+C,top:r.top-x-v,bottom:r.top-x},J=W.bottom<=window.innerHeight&&W.right>=0&&W.left<=window.innerWidth,Te=_.top>=0&&_.right>=0&&_.left<=window.innerWidth,_e=J&&!Nc(W,a),Z=Te&&!Nc(_,a),He=_e?"below":Z?"above":"inside",rt=He==="below"?c+x:He==="above"?-x-v:hr(ge-v/2,4,Math.max(4,c-v-4));return Pa("div",{"data-devtools":"dimension-measure-badge",style:T,children:[mr("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${l} ${c}`,children:t==="width"?Pa("g",{children:[mr("line",{x1:"0",y1:ye,x2:l,y2:ye,stroke:p,strokeWidth:"1"}),mr("line",{x1:"0",y1:ye-g/2,x2:"0",y2:ye+g/2,stroke:p,strokeWidth:"1"}),mr("line",{x1:l,y1:ye-g/2,x2:l,y2:ye+g/2,stroke:p,strokeWidth:"1"})]}):Pa("g",{children:[mr("line",{x1:ce,y1:"0",x2:ce,y2:c,stroke:p,strokeWidth:"1"}),mr("line",{x1:ce-g/2,y1:"0",x2:ce+g/2,y2:"0",stroke:p,strokeWidth:"1"}),mr("line",{x1:ce-g/2,y1:c,x2:ce+g/2,y2:c,stroke:p,strokeWidth:"1"})]})}),mr("div",{style:{...B,left:fe,top:rt,transform:"translateX(-50%)"},children:b})]})}import{useEffect as bf,useState as vf}from"react";function Cs(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);if(n)return`oklch(${n[1]} / ${t})`;let o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(o){let r=parseInt(o[1],16),i=parseInt(o[2],16),a=parseInt(o[3],16);return`rgba(${r}, ${i}, ${a}, ${t})`}return`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}import{Fragment as xf,jsx as Ba,jsxs as fi}from"react/jsx-runtime";function Vo({element:e,isSelected:t=!1,elementInfo:n,color:o="#3b82f6",annotationNumber:r,changeCount:i,hideTooltip:a=!1}){let[s,l]=vf(null);if(bf(()=>{if(!e){l(null);return}let E=()=>{let V=e.getBoundingClientRect();l(V)};return E(),window.addEventListener("scroll",E,{passive:!0}),window.addEventListener("resize",E,{passive:!0}),()=>{window.removeEventListener("scroll",E),window.removeEventListener("resize",E)}},[e]),!s||!e)return null;let c={position:"fixed",top:s.top,left:s.left,width:s.width,height:s.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("."):"",g=n?.reactComponent,b=g?`<${g}> ${u}${d}${p}`:`${u}${d}${p}`,C=22,v=s.height>=window.innerHeight,x=v?0:s.top>=C?s.top-C:s.bottom,B=v?{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:x,left:s.left,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:o,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400},A=!a&&fi("div",{"data-devtools":"tooltip",style:B,children:[r!==void 0&&fi("span",{children:[r,"."]}),Ba("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:b}),i!==void 0&&i>0&&fi("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return fi(xf,{children:[fi("div",{"data-devtools":"highlight",style:c,children:[fi("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:[Ba("rect",{x:"2.5",y:"2.5",width:Math.max(0,s.width-5),height:Math.max(0,s.height-5),fill:Cs(o,.05),stroke:"none"}),Ba("rect",{x:"0.5",y:"0.5",width:Math.max(0,s.width-1),height:Math.max(0,s.height-1),fill:"none",stroke:o,strokeWidth:"1",...!t&&{strokeDasharray:"2 4"}})]}),v&&A]}),!v&&A]})}import{useEffect as Wc,useLayoutEffect as Sf,useState as Da}from"react";import{jsx as lr,jsxs as Oa}from"react/jsx-runtime";function _a(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 Ha({element:e,gap:t,accentColor:n,hoveredAxis:o,draggingAxis:r,cursorViewport:i,isAutoGap:a=!1,refreshKey:s=0}){let[l,c]=Da(null),[u,d]=Da([]),[p,g]=Da(!1);if(Wc(()=>{let se=f=>{(f.key==="Meta"||f.key==="Control")&&g(!0)},P=f=>{(f.key==="Meta"||f.key==="Control")&&g(!1)},D=()=>g(!1);return window.addEventListener("keydown",se,!0),window.addEventListener("keyup",P,!0),window.addEventListener("blur",D),()=>{window.removeEventListener("keydown",se,!0),window.removeEventListener("keyup",P,!0),window.removeEventListener("blur",D)}},[]),Wc(()=>{if(!e){c(null),d([]);return}let se=()=>{c(e.getBoundingClientRect()),d(ar(e))};return se(),window.addEventListener("scroll",se,{passive:!0}),window.addEventListener("resize",se,{passive:!0}),()=>{window.removeEventListener("scroll",se),window.removeEventListener("resize",se)}},[e]),Sf(()=>{e&&(c(e.getBoundingClientRect()),d(ar(e)))},[e,t.row,t.column,s]),!l||u.length===0)return null;let b=l.width,C=l.height,v="pm-gap-stripe-pattern",x=_a(n,.25),B=_a(n,.1),T=_a(n,.2),A=8,E=2,V={position:"fixed",top:l.top,left:l.left,width:b,height:C,pointerEvents:"none",zIndex:9996,overflow:"visible"},q=r??o;return Oa("div",{"data-devtools":"gap-handles",style:V,children:[Oa("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${b} ${C}`,children:[lr("defs",{children:lr("pattern",{id:v,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:lr("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:x,strokeWidth:"1.5"})})}),lr("rect",{x:"0.5",y:"0.5",width:Math.max(0,b-1),height:Math.max(0,C-1),fill:"none",stroke:T,strokeWidth:"1"}),u.map((se,P)=>{let D=se.x-l.left,f=se.y-l.top,m=se.w,O=se.h,pe=p?se.axis===q:!0;return(se.axis==="row"?t.row:t.column)===0?null:Oa("g",{opacity:pe?1:.6,children:[lr("rect",{x:D,y:f,width:m,height:O,fill:B}),lr("rect",{x:D,y:f,width:m,height:O,fill:`url(#${v})`})]},P)}),q&&(()=>{let se=u.filter(_=>_.axis===q);if(se.length===0)return null;let P=se[0];if(i&&se.length>1){let _=1/0;for(let J of se){let Te=J.x+J.w/2,_e=J.y+J.h/2,Z=Math.abs(i.x-Te)+Math.abs(i.y-_e);Z<_&&(_=Z,P=J)}}let D=P.x-l.left,f=P.y-l.top,m=P.w,O=P.h,pe=D+m/2,ye=f+O/2;if(a)return lr("circle",{cx:pe,cy:ye,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let ce=q==="column",fe=ce?E:A,ge=ce?A:E,Ge=pe-fe/2,W=ye-ge/2;return lr("rect",{x:Ge,y:W,width:fe,height:ge,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&q&&(()=>{let se=a?"auto":String(Math.round(q==="row"?t.row:t.column));return lr("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 Tf,useEffect as Mf,useState as If}from"react";import{useEffect as wf,useState as jc}from"react";var Cf=3,Ef=250,Fa=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],kf=3e3;function Vc(e){let[t,n]=jc(0),[o,r]=jc(()=>Math.floor(Math.random()*Fa.length));return wf(()=>{if(!e)return;let i=setInterval(()=>n(s=>(s+1)%Cf),Ef),a=setInterval(()=>r(s=>(s+1)%Fa.length),kf);return()=>{clearInterval(i),clearInterval(a)}},[e]),{charIndex:t,word:Fa[o]}}import{Fragment as za,jsx as co,jsxs as Or}from"react/jsx-runtime";function Rf(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 Gc=22,Hi=12,Es=8;function Lf(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 Af(e,t,n){return Lf(t,n,e)?e:{}}function Pf(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 Bf(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 Df({left:e,top:t,avoidTop:n,avoidBottom:o,style:r,children:i,...a}){let s=e+Hi,l=t+Hi;return co("div",{"data-devtools":"badge-hit-area",...a,style:{position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:Hi,...r},children:co("div",{style:{transform:Bf(s,l,n,o)},children:i})})}function Jc({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:o,dispatch:r,inFlightSelectors:i,toolbarRef:a,onHoverSelector:s}){let[l,c]=If([]),u=i&&i.size>0,{charIndex:d,word:p}=Vc(!!u);Mf(()=>{if(t){c([]);return}let T=null,A=()=>{let q=[];e.forEach((se,P)=>{let D=Hn(se.selector);if(!D)return;let f=D.getBoundingClientRect();q.push({selector:se.selector,modIndex:P,top:f.top>=Gc?f.top-Gc:f.bottom,left:f.left,label:Rf(se),changeCount:se.changes.length,annotationNumber:o+P+1})}),c(q)},E=()=>{T&&cancelAnimationFrame(T),T=requestAnimationFrame(A)};A(),window.addEventListener("scroll",E,!0),window.addEventListener("resize",E,!0);let V=new MutationObserver(E);return V.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",E),document.fonts.ready.then(E),()=>{window.removeEventListener("scroll",E,!0),window.removeEventListener("resize",E,!0),window.removeEventListener("load",E),V.disconnect(),T&&cancelAnimationFrame(T)}},[e,t,o]);let g=Tf(T=>{let A=e[T];if(!A)return;let E=Hn(A.selector);E&&(r({type:"SELECT_ANNOTATION",payload:{id:null}}),r({type:"SET_TOOL",payload:"inspector"}),r({type:"SELECT_ELEMENT",payload:{el:E,info:A.element}}))},[e,r]);if(l.length===0)return null;let b=a?.current?.getBoundingClientRect(),C=b?b.top<window.innerHeight/2:!1,v=b?{avoidTop:C?b.bottom+Es:void 0,avoidBottom:C?void 0:b.top-Es,avoidLeft:b.left-Es,avoidRight:b.right+Es}:{},x={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 Or(za,{children:[co("style",{dangerouslySetInnerHTML:{__html:`
|
|
10
|
+
[data-devtools="badge"]::selection,
|
|
11
|
+
[data-devtools="badge"] *::selection {
|
|
12
|
+
background: #000000;
|
|
13
|
+
color: #ffffff;
|
|
14
|
+
}
|
|
15
|
+
`}}),l.map(T=>{let A=i?.has(T.selector),E=Af(v,T.left,Pf(T));return co(Df,{left:T.left-Hi,top:T.top-Hi,avoidTop:E.avoidTop,avoidBottom:E.avoidBottom,onClick:()=>g(T.modIndex),onMouseEnter:s?()=>s(T.selector):void 0,onMouseLeave:s?()=>s(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:Or("div",{"data-devtools":"badge",style:{...x,backgroundColor:A?"#999999":n},children:[Or("span",{children:[T.annotationNumber,"."]}),co("span",{style:B,children:T.label}),Or("span",{style:{opacity:.8},children:["(",T.changeCount," ",T.changeCount===1?"change":"changes",")"]}),A&&Or("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[co("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:d===1?Or(za,{children:[co("circle",{cx:"7",cy:"7",r:"2"}),co("circle",{cx:"17",cy:"7",r:"2"}),co("circle",{cx:"7",cy:"17",r:"2"}),co("circle",{cx:"17",cy:"17",r:"2"})]}):Or(za,{children:[co("circle",{cx:"12",cy:"6",r:"2"}),co("circle",{cx:"6",cy:"12",r:"2"}),co("circle",{cx:"18",cy:"12",r:"2"}),co("circle",{cx:"12",cy:"18",r:"2"})]})}),p]})]})},T.selector)})]})}import{useEffect as _f,useState as Of}from"react";import{Fragment as Ff,jsx as Yc}from"react/jsx-runtime";function Hf(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 Uc({styleModifications:e,accentColor:t}){let[n,o]=Of([]);if(_f(()=>{let i=null,a=()=>{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 g=Dr(d);c.push({selector:u.selector,top:p.top,left:p.left,width:p.width,height:p.height,borderRadius:`${g["top-left"]}px ${g["top-right"]}px ${g["bottom-right"]}px ${g["bottom-left"]}px`})}o(c)},s=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(a)};a(),window.addEventListener("scroll",s,{passive:!0}),window.addEventListener("resize",s,{passive:!0});let l=new MutationObserver(s);return l.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s),window.removeEventListener("resize",s),l.disconnect(),i&&cancelAnimationFrame(i)}},[e]),n.length===0)return null;let r=Hf(t,.2);return Yc(Ff,{children:n.map(i=>{let a={position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${r}`,borderRadius:i.borderRadius,boxSizing:"border-box"};return Yc("div",{"data-devtools":"mod-border",style:a},i.selector)})})}import{useEffect as Kc,useLayoutEffect as zf,useState as Xc}from"react";import{jsx as yr,jsxs as $a}from"react/jsx-runtime";function Na(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 Nf={top:"bottom",bottom:"top",left:"right",right:"left"};function Wa({element:e,padding:t,accentColor:n,hoveredSide:o,draggingSide:r,cursorViewport:i,refreshKey:a}){let[s,l]=Xc(null),[c,u]=Xc(!1);if(Kc(()=>{let m=ye=>{(ye.key==="Meta"||ye.key==="Control")&&u(!0)},O=ye=>{(ye.key==="Meta"||ye.key==="Control")&&u(!1)},pe=()=>u(!1);return window.addEventListener("keydown",m,!0),window.addEventListener("keyup",O,!0),window.addEventListener("blur",pe),()=>{window.removeEventListener("keydown",m,!0),window.removeEventListener("keyup",O,!0),window.removeEventListener("blur",pe)}},[]),Kc(()=>{if(!e){l(null);return}let m=()=>{l(e.getBoundingClientRect())};return m(),window.addEventListener("scroll",m,{passive:!0}),window.addEventListener("resize",m,{passive:!0}),()=>{window.removeEventListener("scroll",m),window.removeEventListener("resize",m)}},[e]),zf(()=>{e&&l(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,a]),!s)return null;let d=s.width,p=s.height,{top:g,right:b,bottom:C,left:v}=t,x="pm-stripe-pattern",B=Na(n,.25),T=Na(n,.1),A=Na(n,.2),E=8,V=2,q={position:"fixed",top:s.top,left:s.left,width:d,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"},se=["top","right","bottom","left"],P={top:`0,0 ${d},0 ${d-b},${g} ${v},${g}`,right:`${d},0 ${d},${p} ${d-b},${p-C} ${d-b},${g}`,bottom:`0,${p} ${v},${p-C} ${d-b},${p-C} ${d},${p}`,left:`0,0 ${v},${g} ${v},${p-C} 0,${p}`},D={top:{x:d/2-E/2,y:g/2-V/2,w:E,h:V},bottom:{x:d/2-E/2,y:p-C/2-V/2,w:E,h:V},left:{x:v/2-V/2,y:p/2-E/2,w:V,h:E},right:{x:d-b/2-V/2,y:p/2-E/2,w:V,h:E}},f=new Set;return r?f.add(r):o&&(f.add(o),c||f.add(Nf[o])),$a("div",{"data-devtools":"padding-handles",style:q,children:[$a("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${p}`,children:[yr("defs",{children:yr("pattern",{id:x,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:yr("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:B,strokeWidth:"1.5"})})}),yr("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(m=>{if(t[m]<=0)return null;let pe=f.has(m);return $a("g",{opacity:pe?1:.6,children:[yr("polygon",{points:P[m],fill:T}),yr("polygon",{points:P[m],fill:`url(#${x})`})]},m)}),se.map(m=>{let O=D[m],pe=f.has(m);return yr("rect",{x:O.x,y:O.y,width:O.w,height:O.h,fill:n,stroke:"#ffffff",strokeWidth:pe?4:2,paintOrder:"stroke"},`handle-${m}`)})]}),i&&(o||r)&&(()=>{let O=Math.round(t[r??o]);return yr("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:O})})()]})}import{useCallback as gn,useEffect as En,useMemo as $r,useRef as Ft,useState as Jt}from"react";import{Blend as bg,Check as Bs,ChevronDown as Ds,Eye as Ja,FoldHorizontal as yd,FoldVertical as bd,Hexagon as vg,Minus as fd,MoveHorizontal as Ka,Plus as xg,Shrink as Sg,Square as wg,SquareDashed as Cg,SquareDashedTopSolid as Eg,UnfoldHorizontal as vd,UnfoldVertical as xd}from"lucide-react";var $f="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",gi={borderWidth:3,borderStyle:"solid",borderImage:`url("${$f}") 4 / 1.9 / 0 round`};function ks({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 Fi={"font-size":["rem","px","em"],"line-height":["","rem","px","em"],"letter-spacing":["rem","px","em"],gap:["rem","px","em"],"column-gap":["rem","px","em"],"row-gap":["rem","px","em"],padding:["rem","px","em","%"],margin:["rem","px","em","%"],width:["rem","px","%","em"],height:["rem","px","%","em"],"min-width":["rem","px","%","em"],"max-width":["rem","px","%","em"],"min-height":["rem","px","%","em"],"max-height":["rem","px","%","em"],"border-width":["px","rem","em"],"border-radius":["rem","px","%","em"]};function Hr(e){return Fi[e]?.[0]??"px"}function To(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function Ts(e,t,n,o){let r=e.trim();if(!r)return"";let i=r.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i);if(i)return`${parseFloat(i[1])}${i[2].toLowerCase()}`;let a=parseFloat(r);if(!isNaN(a)){if(o){let{unit:s}=To(n);return`${a}${s||Hr(t)}`}return`${a}${Hr(t)}`}return r}function mi(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 Wf,useEffect as jf,useRef as qc,useState as Vf}from"react";import{Plus as Zc,X as Gf}from"lucide-react";import{jsx as uo,jsxs as Fr}from"react/jsx-runtime";var Ms=[{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 Jf(e){if(!e||e==="none")return[];let t=[],n=/([\w-]+)\(([^)]+)\)/g,o;for(;(o=n.exec(e))!==null;){let r=o[1],i=o[2],a=parseFloat(i);isNaN(a)||t.push({name:r,value:a})}return t}function ja(e){return e.length===0?"none":e.map(t=>{let o=Ms.find(r=>r.name===t.name)?.unit??"";return`${t.name}(${t.value}${o})`}).join(" ")}function Qc({value:e,onChange:t,accentColor:n,modified:o,panelContentRef:r}){let i=Jf(e),[a,s]=Vf(!1),l=qc(null),c=qc(null);jf(()=>{if(!a)return;let T=A=>{l.current&&!A.composedPath().includes(l.current)&&s(!1)};return document.addEventListener("mousedown",T,!0),()=>document.removeEventListener("mousedown",T,!0)},[a]);let u=Ms.filter(T=>!i.some(A=>A.name===T.name)),d=T=>{let A=[...i,{name:T.name,value:T.defaultValue}];t(ja(A)),s(!1)},p=T=>{let A=i.filter((E,V)=>V!==T);t(ja(A))},g=(T,A)=>{let E=i.map((V,q)=>q===T?{...V,value:A}:V);t(ja(E))},b={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:pn,border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},C=Wf(T=>{if(!c.current)return{position:"fixed",top:0,left:0};let A=c.current.getBoundingClientRect(),E=r?.current?.getBoundingClientRect(),V=T*24+8;return{position:"fixed",...window.innerHeight-A.bottom<V?{bottom:window.innerHeight-A.top+2}:{top:A.bottom+2},left:E?E.left:A.left,width:E?E.width:140,zIndex:10001}},[r]),v={backgroundColor:Mo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,padding:"4px 0"},x={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=T=>uo("div",{ref:l,style:{...C(T.length),...v},children:T.map(A=>uo("button",{type:"button",onClick:()=>d(A),style:x,onMouseEnter:E=>{E.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:E=>{E.currentTarget.style.backgroundColor="transparent"},children:A.label},A.name))});return i.length===0?Fr("div",{children:[Fr("div",{style:{display:"flex",alignItems:"center",gap:4},children:[uo(po,{modified:!1,children:uo("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:{...b,color:"#999",cursor:"default"}})}),uo("button",{ref:c,type:"button",onClick:()=>s(!a),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:uo(Zc,{size:12})})]}),a&&B(Ms)]}):Fr("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((T,A)=>{let E=Ms.find(V=>V.name===T.name);return E?Fr("div",{style:{display:"flex",alignItems:"center",gap:4},children:[uo("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:E.label}),uo(po,{modified:o,children:Fr("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[uo("input",{type:"range",min:E.min,max:E.max,step:E.step,value:T.value,onChange:V=>g(A,parseFloat(V.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(T.value-E.min)/(E.max-E.min)*100}%, rgba(0,0,0,0.1) ${(T.value-E.min)/(E.max-E.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),uo("input",{type:"number",min:E.min,max:E.max,step:E.step,value:E.unit==="px"||E.unit==="deg"?Math.round(T.value):Math.round(T.value*100)/100,onChange:V=>g(A,parseFloat(V.target.value)||0),style:{...b,width:44,padding:"2px 4px",textAlign:"right",flexShrink:0}}),E.unit&&uo("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:E.unit})]})}),uo("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:uo(Gf,{size:10})})]},T.name):null}),u.length>0&&Fr("div",{children:[Fr("button",{ref:c,type:"button",onClick:()=>s(!a),style:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",border:"none",borderRadius:2,backgroundColor:"transparent",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#94a3b8",cursor:"pointer"},children:[uo(Zc,{size:10}),"Add filter"]}),a&&B(u)]})]})}import{useCallback as fo,useEffect as Zf,useRef as Is,useState as td}from"react";import{AlignHorizontalSpaceAround as Qf,AlignVerticalSpaceAround as eg,Columns3 as tg,Grid2x2 as ng,RectangleHorizontal as og,Rows3 as rg,UnfoldHorizontal as nd,UnfoldVertical as od}from"lucide-react";import{useCallback as Yf,useEffect as Uf,useRef as zi}from"react";import{jsx as qf}from"react/jsx-runtime";var Go=[0,1,2,4,8,12,16,20,24,28,32],Kf=8;function ed(){return parseFloat(getComputedStyle(document.documentElement).fontSize)||16}function Ni(e){return e==="rem"||e==="em"}function Xf(e,t){return Ni(t)?e/ed():e}function Jo({value:e,onChange:t,onPreview:n,onScrubEnd:o,onReset:r,isModified:i,accentColor:a,defaultUnit:s="rem",min:l=0,max:c,step:u=1,snapSteps:d,color:p,style:g,children:b}){let C=zi(null),v=zi(null),x=zi(r),B=zi(i),T=zi(!1);x.current=r,B.current=i,Uf(()=>{let E=f=>(!Number.isFinite(u)||u<=0,u),V=(f,m)=>{let O=E(m);if(!Number.isFinite(O)||O<=0)return f;let pe=Math.max(0,(String(O).split(".")[1]||"").length);return Number((Math.round(f/O)*O).toFixed(Math.min(pe+2,6)))},q=(f,m)=>{let O=V(f,m);return l!==void 0&&(O=Math.max(l,O)),c!==void 0&&(O=Math.min(c,O)),O},se=(f,m)=>{if(!d)return q(f,m);let O=Ni(m)?ed():1,pe=Ni(m)?f*O:f,ye=d[d.length-1];for(let ce=0;ce<d.length-1;ce++){let fe=d[ce],ge=d[ce+1];if(pe<=(fe+ge)/2){ye=fe;break}if(pe<ge){ye=ge;break}}return pe>d[d.length-1]&&(ye=Math.round(pe/8)*8),q(Ni(m)?Math.round(ye/O*1e3)/1e3:ye,m)},P=f=>{let m=v.current;if(!m)return;m.hasMoved=!0,T.current=f.shiftKey;let O=E(m.unit)/Kf*(f.altKey?.1:1);m.accum+=f.movementX*O;let pe=m.startValue+m.accum,ye=f.shiftKey?se(pe,m.unit):q(pe,m.unit);n?.(`${ye}${m.unit}`)},D=()=>{let f=v.current;if(!f)return;let m=q(f.startValue+f.accum,f.unit);T.current&&d&&(m=se(m,f.unit));let O=f.hasMoved&&m!==f.startValue;v.current=null,document.exitPointerLock(),O?t(`${m}${f.unit}`):f.hasMoved?n?.(`${f.startValue}${f.unit}`):B.current&&x.current&&x.current(),o?.()};return document.addEventListener("mousemove",P),document.addEventListener("mouseup",D),()=>{document.removeEventListener("mousemove",P),document.removeEventListener("mouseup",D)}},[c,l,t,n,o,d,u]);let A=Yf(E=>{if(E.button!==0)return;E.preventDefault();let V=To(e),q=V.unit&&V.unit!=="px"?V.unit:s,se=V.unit==="px"&&Ni(q)?Xf(V.num,q):V.num;v.current={startValue:se,unit:q,accum:0,hasMoved:!1},C.current?.requestPointerLock()},[e,s]);return qf("span",{ref:C,onMouseDown:A,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:{color:i?a||"#3b82f6":p||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize",...g},children:b})}import{Fragment as $i,jsx as De,jsxs as en}from"react/jsx-runtime";function rd(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 id(e,t){let n=e.trim().toLowerCase();if(!n)return null;let o=To(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 Rs(e,t,n){let o=id(e,n),r=id(t,n);return o!==null&&r!==null?Math.abs(o-r)<.01:e.trim()===t.trim()}function ig({gridCols:e,gridRows:t,gridModified:n,accentColor:o,onColsChange:r,onRowsChange:i}){return De(Io,{style:{width:100},children:en("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"4px"},children:[De("input",{type:"number",min:1,max:12,value:e,onChange:a=>r(parseInt(a.target.value)||1),style:{...fn,width:32,textAlign:"center",padding:2}}),De("span",{style:{fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:n?o:"#999",fontWeight:n?600:400,fontSize:11,margin:"0 4px"},children:"\xD7"}),De("input",{type:"number",min:1,max:12,value:t,onChange:a=>i(parseInt(a.target.value)||1),style:{...fn,width:32,textAlign:"center",padding:2}})]})})}function sd({element:e,getValue:t,getOriginalValue:n,handleChange:o,isModified:r,onResetProperty:i,isCollapsed:a,onToggle:s,sectionHeaderStyle:l,activeDropdown:c,onDropdownChange:u,panelContentRef:d,accentColor:p,onFieldHover:g,preferredUnit:b,onUnitCycle:C}){let v=u,x=t("display"),B=t("flex-direction"),T=ad(x,B),A=x==="flex"||x==="inline-flex",E=x==="grid",V=A||E,q=B==="column"||B==="column-reverse",se=t("width"),P=t("height"),D=r("width")?se:ai(e,"width"),f=r("height")?P:ai(e,"height"),m=!r("width")&&rd(e,"width")?"fill":Va(se,D),O=!r("height")&&rd(e,"height")?"fill":Va(P,f),pe=t("min-width"),ye=t("max-width"),ce=t("min-height"),fe=t("max-height"),ge=pe!=="none"&&pe!=="0px"&&pe!=="auto"?pe:"",Ge=ye!=="none"&&ye!=="auto"?ye:"",W=ce!=="none"&&ce!=="0px"&&ce!=="auto"?ce:"",_=fe!=="none"&&fe!=="auto"?fe:"",J=r("min-width"),Te=r("max-width"),_e=r("min-height"),Z=r("max-height"),He=J||_e,rt=Te||Z,ve=e.getBoundingClientRect(),ae=`${Math.round(ve.width)}px`,Ae=`${Math.round(ve.height)}px`,[st,Le]=td({}),Ee=Ao(t("padding")),Ye=Ao(n("padding")),xt=!Rs(Ee.left,Ye.left,e)||!Rs(Ee.right,Ye.right,e),zt=!Rs(Ee.top,Ye.top,e)||!Rs(Ee.bottom,Ye.bottom,e),Rt=xt||"padding-h"in st,Dn=zt||"padding-v"in st,Ut=t("gap"),yt=t("row-gap"),zn=t("column-gap"),Mn=t("grid-template-columns"),Ct=t("grid-template-rows"),Nt=t("overflow"),mn=Mn.split(/\s+/).filter(z=>z&&z!=="none").length||1,bt=Ct.split(/\s+/).filter(z=>z&&z!=="none").length||1,[Lt,Kn]=td(!1),Xt=c!==null,Vn=Xt||Lt,$t=Xt?.3:Lt?.65:1,cn=({mode:z,icon:ue,active:Ue})=>De("button",{type:"button",onClick:()=>ld(z,o),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 8px",border:"none",borderRadius:2,backgroundColor:Ue?hi:"transparent",color:Ue?p:"#64748b",cursor:"pointer",fontSize:14},children:ue}),re=(z,ue,Ue)=>{Ue==="fixed"?o(z,ue):o(z,Ls(Ue,ue))},ie=fo(z=>{let ue=z.trim();if(!ue)return"0";let Ue=To(ue);if(!Number.isFinite(Ue.num))return ue;if(b==="rem"&&Ue.unit==="px")return`${mi(Ue.num,"rem")}rem`;if(b==="px"&&Ue.unit==="rem"){let qt=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return`${Math.round(Ue.num*qt*1e3)/1e3}px`}return ue},[b]),be=z=>{let ue=Ao(t("padding")),Ue=z||"0";o("padding",`${ie(ue.top)} ${Ue} ${ie(ue.bottom)} ${Ue}`)},We=z=>{let ue=Ao(t("padding")),Ue=z||"0";o("padding",`${Ue} ${ie(ue.right)} ${Ue} ${ie(ue.left)}`)},Ne=fo(()=>{let z=Ao(t("padding")),ue=Ao(n("padding"));o("padding",[ie(z.top),ie(ue.right),ie(z.bottom),ie(ue.left)].join(" "))},[ie,n,t,o]),tt=fo(()=>{let z=Ao(t("padding")),ue=Ao(n("padding"));o("padding",[ie(ue.top),ie(z.right),ie(ue.bottom),ie(z.left)].join(" "))},[ie,n,t,o]),Ze=fo((z,ue)=>Ue=>{ue(Ue),Le(qt=>({...qt,[z]:Ue}))},[]),At=fo(z=>{Le(ue=>{let Ue={...ue};return delete Ue[z],Ue})},[]),io=fo(z=>{n("padding");let ue=Ao(t("padding"));dt(e,"padding",`${ie(ue.top)} ${z} ${ie(ue.bottom)} ${z}`)},[e,ie,n,t]),Gn=fo(z=>{n("padding");let ue=Ao(t("padding"));dt(e,"padding",`${z} ${ie(ue.right)} ${z} ${ie(ue.left)}`)},[e,ie,n,t]),hn=fo(z=>ue=>{dt(e,z,ue)},[e]),Xe=q?"row":"column",gt=Xe==="row"?"row-gap":"column-gap",Nn=gt==="row-gap"?yt||Ut:zn||Ut,dn=r(gt)||r("gap"),Bt=fo(()=>{let ue=ar(e).find(qt=>qt.axis===Xe);if(ue)return Xe==="row"?ue.h:ue.w;let Ue=Br(e);return Xe==="row"?Ue.row:Ue.column},[e,Xe]),Wt=fo(()=>{let z=t("justify-content");return z==="space-between"?"between":z==="space-around"||z==="space-evenly"?"around":"fixed"},[t])(),k=fo((z,ue)=>{if(z==="fixed"){let Ue=Math.max(0,Math.round(Bt()*1e3)/1e3),qt=ue||(Ue>0?`${Ue}px`:"8px");o("justify-content","normal"),o(gt,qt);return}o("justify-content",z==="between"?"space-between":"space-around"),o(gt,"0px")},[gt,Bt,o]),M=fo(z=>{if(Wt!=="fixed"){k("fixed",z);return}o(gt,z)},[k,Wt,gt,o]),K=fo(z=>{Wt!=="fixed"&&dt(e,"justify-content","normal"),dt(e,gt,z)},[e,Wt,gt]),te=z=>z==="center"?1:z==="flex-end"||z==="end"?2:0,de=te(t("justify-content")),we=te(t("align-items")),Je=q?we:de,ze=q?de:we,it=Is(null),$e=Is({x:0,y:0}),vt=Is({col:Je,row:ze});vt.current={col:Je,row:ze};let Kt=fo((z,ue)=>{let Ue=["flex-start","center","flex-end"];q?(o("justify-content",Ue[ue]),o("align-items",Ue[z])):(o("justify-content",Ue[z]),o("align-items",Ue[ue]))},[q,o]),$n=Is(Kt);$n.current=Kt,Zf(()=>{let ue=Ue=>{let qt=it.current;if(!qt||!Ue.composedPath().includes(qt))return;Ue.preventDefault(),Ue.stopPropagation(),$e.current.x+=Ue.deltaX,$e.current.y+=Ue.deltaY;let{col:to,row:qn}=vt.current,In=!1;Math.abs($e.current.x)>=30&&(to=Math.max(0,Math.min(2,to+($e.current.x>0?1:-1))),$e.current.x=0,$e.current.y=0,In=!0),!In&&Math.abs($e.current.y)>=30&&(qn=Math.max(0,Math.min(2,qn+($e.current.y>0?1:-1))),$e.current.x=0,$e.current.y=0,In=!0),In&&(to!==vt.current.col||qn!==vt.current.row)&&$n.current(to,qn)};return document.addEventListener("wheel",ue,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",ue,{capture:!0})},[]);let Xn=()=>De("div",{ref:it,onMouseEnter:()=>{Kn(!0),d.current&&(d.current.style.overflowY="hidden")},onMouseLeave:()=>{Kn(!1),d.current&&(d.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:Po,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(z=>[0,1,2].map(ue=>De("button",{type:"button",onClick:()=>Kt(ue,z),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:ue===Je&&z===ze?De("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:ue===0?en($i,{children:[De("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),De("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),De("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):ue===1?en($i,{children:[De("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),De("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),De("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):en($i,{children:[De("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),De("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),De("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]})}):De("div",{style:{width:2.5,height:2.5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${z}-${ue}`)))}),jt=r("grid-template-columns")||r("grid-template-rows");return en("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[De("div",{style:l,children:De("span",{children:V?"Auto layout":"Layout"})}),en("div",{style:{padding:"4px 12px 8px"},children:[en("div",{style:{display:"flex",gap:2,height:Pn,boxSizing:"border-box",marginBottom:8,backgroundColor:Po,borderRadius:2,padding:2,opacity:$t,transition:"opacity 150ms ease"},children:[De(cn,{mode:"block",icon:De(og,{size:16}),active:T==="block"}),De(cn,{mode:"flex-col",icon:De(rg,{size:16}),active:T==="flex-col"}),De(cn,{mode:"flex-row",icon:De(tg,{size:16}),active:T==="flex-row"}),De(cn,{mode:"grid",icon:De(ng,{size:16}),active:T==="grid"})]}),en("div",{style:{display:"flex",gap:4,marginBottom:8},children:[De(Ga,{label:"W",property:"width",cssValue:m==="fixed"?se:`${Math.round(e.getBoundingClientRect().width)}px`,displayValue:m==="fixed"?se:"",placeholder:`${Math.round(e.getBoundingClientRect().width)}px`,mode:m,onValueChange:z=>o("width",z),onModeChange:z=>{if(z==="fixed"){let ue=e.getBoundingClientRect();o("width",`${Math.round(ue.width)}px`)}else o("width",Ls(z,se))},modified:r("width"),dimmed:Xt&&c!=="width",dropdownOpen:c==="width",onDropdownChange:z=>v(z?"width":null),panelContentRef:d,accentColor:p,onReset:()=>i("width"),canAddMinConstraint:!J,canAddMaxConstraint:!Te,onAddMinConstraint:()=>o("min-width",ae),onAddMaxConstraint:()=>o("max-width",ae),onHoverChange:z=>g?.(z?"width":"element"),onValuePreview:hn("width")}),De(Ga,{label:"H",property:"height",cssValue:O==="fixed"?P:`${Math.round(e.getBoundingClientRect().height)}px`,displayValue:O==="fixed"?P:"",placeholder:`${Math.round(e.getBoundingClientRect().height)}px`,mode:O,onValueChange:z=>o("height",z),onModeChange:z=>{if(z==="fixed"){let ue=e.getBoundingClientRect();o("height",`${Math.round(ue.height)}px`)}else o("height",Ls(z,P))},modified:r("height"),dimmed:Xt&&c!=="height",dropdownOpen:c==="height",onDropdownChange:z=>v(z?"height":null),panelContentRef:d,accentColor:p,onReset:()=>i("height"),canAddMinConstraint:!_e,canAddMaxConstraint:!Z,onAddMinConstraint:()=>o("min-height",Ae),onAddMaxConstraint:()=>o("max-height",Ae),onHoverChange:z=>g?.(z?"height":"element"),onValuePreview:hn("height")})]}),He&&en($i,{children:[en("div",{style:{display:"flex",gap:4,marginBottom:2,opacity:$t,transition:"opacity 150ms ease"},children:[De("div",{style:{flex:1,fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,visibility:J?"visible":"hidden"},children:"Min width"}),De("div",{style:{flex:1,fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,visibility:_e?"visible":"hidden"},children:"Min height"})]}),en("div",{style:{display:"flex",gap:4,marginBottom:rt?4:8,opacity:$t,transition:"opacity 150ms ease"},children:[J?De(Wi,{label:"Min width",axis:"width",kind:"min",value:ge,placeholder:"Min W",currentValue:ae,modified:r("min-width"),accentColor:p,onChange:z=>z?o("min-width",z):i("min-width"),onPreview:hn("min-width"),onReset:()=>i("min-width"),panelContentRef:d}):De("div",{style:{flex:1}}),_e?De(Wi,{label:"Min height",axis:"height",kind:"min",value:W,placeholder:"Min H",currentValue:Ae,modified:r("min-height"),accentColor:p,onChange:z=>z?o("min-height",z):i("min-height"),onPreview:hn("min-height"),onReset:()=>i("min-height"),panelContentRef:d}):De("div",{style:{flex:1}})]})]}),rt&&en($i,{children:[en("div",{style:{display:"flex",gap:4,marginBottom:2,opacity:$t,transition:"opacity 150ms ease"},children:[De("div",{style:{flex:1,fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,visibility:Te?"visible":"hidden"},children:"Max width"}),De("div",{style:{flex:1,fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,visibility:Z?"visible":"hidden"},children:"Max height"})]}),en("div",{style:{display:"flex",gap:4,marginBottom:8,opacity:$t,transition:"opacity 150ms ease"},children:[Te?De(Wi,{label:"Max width",axis:"width",kind:"max",value:Ge,placeholder:"Max W",currentValue:ae,modified:r("max-width"),accentColor:p,onChange:z=>z?o("max-width",z):i("max-width"),onPreview:hn("max-width"),onReset:()=>i("max-width"),panelContentRef:d}):De("div",{style:{flex:1}}),Z?De(Wi,{label:"Max height",axis:"height",kind:"max",value:_,placeholder:"Max H",currentValue:Ae,modified:r("max-height"),accentColor:p,onChange:z=>z?o("max-height",z):i("max-height"),onPreview:hn("max-height"),onReset:()=>i("max-height"),panelContentRef:d}):De("div",{style:{flex:1}})]})]}),A&&en("div",{onMouseEnter:()=>g?.("gap"),onMouseLeave:()=>g?.("element"),style:{display:"flex",gap:8,marginBottom:8},children:[en("div",{style:{opacity:Xt?.3:1,transition:"opacity 150ms ease"},children:[De("div",{style:{fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,marginBottom:2},children:"Alignment"}),Xn()]}),en("div",{style:{flex:1,opacity:$t,transition:"opacity 150ms ease"},children:[De("div",{onClick:dn?()=>{i(gt),i("gap")}:void 0,title:dn?"Click to reset":void 0,style:{fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,marginBottom:2,cursor:dn?"pointer":"default"},children:"Gap"}),De("div",{style:{display:"flex",gap:2,height:Pn,boxSizing:"border-box",marginBottom:4,backgroundColor:Po,borderRadius:2,padding:2},children:["fixed","between","around"].map(z=>{let ue=Wt===z;return De("button",{type:"button",onClick:()=>k(z),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 6px",border:"none",borderRadius:2,backgroundColor:ue?hi:"transparent",color:ue?"#111827":wt,cursor:"pointer",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:pt,textTransform:"capitalize"},children:z},z)})}),De(Io,{dimmed:Xt,children:en("div",{style:{display:"flex",alignItems:"center"},children:[De(Jo,{value:Nn,onChange:z=>{At("gap"),M(z)},onPreview:Ze("gap",K),onScrubEnd:()=>At("gap"),onReset:()=>{i(gt),i("gap")},isModified:dn,accentColor:p,defaultUnit:b,snapSteps:Go,children:B==="column"||B==="column-reverse"?De(od,{size:12,strokeWidth:dn?2.5:1.5}):De(nd,{size:12,strokeWidth:dn?2.5:1.5})}),De(go,{property:gt,value:st.gap||(Wt==="fixed"&&dn?Nn:Wt==="fixed"?"":`${Math.max(0,Math.round(Bt()*1e3)/1e3)}px`),onChange:z=>M(z),isModified:dn||"gap"in st,placeholder:"0",style:{...fn,flex:1,minWidth:0},unitStyle:{fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,padding:"0 8px"},preferredUnit:b,onUnitCycle:C})]})})]})]}),E&&en("div",{onMouseEnter:()=>g?.("gap"),onMouseLeave:()=>g?.("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:$t,transition:"opacity 150ms ease"},children:[De(ig,{gridCols:mn,gridRows:bt,gridModified:jt,accentColor:p,onColsChange:z=>o("grid-template-columns",`repeat(${z}, 1fr)`),onRowsChange:z=>o("grid-template-rows",`repeat(${z}, 1fr)`)}),en("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[De(Io,{dimmed:Xt,children:en("div",{style:{display:"flex",alignItems:"center"},children:[De(Jo,{value:zn||Ut,onChange:z=>{At("column-gap"),o("column-gap",z)},onPreview:Ze("column-gap",hn("column-gap")),onScrubEnd:()=>At("column-gap"),onReset:()=>i("column-gap"),isModified:r("column-gap"),accentColor:p,defaultUnit:b,snapSteps:Go,children:De(nd,{size:12,strokeWidth:r("column-gap")?2.5:1.5})}),De(go,{property:"column-gap",value:st["column-gap"]||(r("column-gap")||r("gap")?zn||Ut:""),onChange:z=>o("column-gap",z),isModified:r("column-gap")||r("gap")||"column-gap"in st,placeholder:"0",style:{...fn,flex:1,minWidth:0},unitStyle:{fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,padding:"0 8px"},preferredUnit:b,onUnitCycle:C})]})}),De(Io,{dimmed:Xt,children:en("div",{style:{display:"flex",alignItems:"center"},children:[De(Jo,{value:yt||Ut,onChange:z=>{At("row-gap"),o("row-gap",z)},onPreview:Ze("row-gap",hn("row-gap")),onScrubEnd:()=>At("row-gap"),onReset:()=>i("row-gap"),isModified:r("row-gap"),accentColor:p,defaultUnit:b,snapSteps:Go,children:De(od,{size:12,strokeWidth:r("row-gap")?2.5:1.5})}),De(go,{property:"row-gap",value:st["row-gap"]||(r("row-gap")||r("gap")?yt||Ut:""),onChange:z=>o("row-gap",z),isModified:r("row-gap")||r("gap")||"row-gap"in st,placeholder:"0",style:{...fn,flex:1,minWidth:0},unitStyle:{fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,padding:"0 8px"},preferredUnit:b,onUnitCycle:C})]})})]})]}),V&&en("div",{style:{display:"flex",gap:4,marginBottom:8,opacity:$t,transition:"opacity 150ms ease"},children:[De(Io,{style:{flex:1},dimmed:Xt,onMouseEnter:()=>g?.("padding-x"),onMouseLeave:()=>g?.("element"),children:en("div",{style:{display:"flex",alignItems:"center"},children:[De(Jo,{value:Ee.left,onChange:z=>{At("padding-h"),be(z)},onPreview:Ze("padding-h",io),onScrubEnd:()=>At("padding-h"),onReset:Ne,isModified:Rt,accentColor:p,defaultUnit:b,snapSteps:Go,children:De(Qf,{size:12,strokeWidth:Rt?2.5:1.5})}),De(go,{property:"padding",value:st["padding-h"]||Ee.left,onChange:z=>be(z),isModified:Rt,placeholder:"H pad",style:{...fn,flex:1,minWidth:0},unitStyle:{fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,padding:"0 8px"},preferredUnit:b,onUnitCycle:C})]})}),De(Io,{style:{flex:1},dimmed:Xt,onMouseEnter:()=>g?.("padding-y"),onMouseLeave:()=>g?.("element"),children:en("div",{style:{display:"flex",alignItems:"center"},children:[De(Jo,{value:Ee.top,onChange:z=>{At("padding-v"),We(z)},onPreview:Ze("padding-v",Gn),onScrubEnd:()=>At("padding-v"),onReset:tt,isModified:Dn,accentColor:p,defaultUnit:b,snapSteps:Go,children:De(eg,{size:12,strokeWidth:Dn?2.5:1.5})}),De(go,{property:"padding",value:st["padding-v"]||Ee.top,onChange:z=>We(z),isModified:Dn,placeholder:"V pad",style:{...fn,flex:1,minWidth:0},unitStyle:{fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,padding:"0 8px"},preferredUnit:b,onUnitCycle:C})]})})]}),en("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,opacity:$t,transition:"opacity 150ms ease"},children:[De("input",{type:"checkbox",checked:Nt==="hidden",onChange:z=>o("overflow",z.target.checked?"hidden":"visible"),style:{margin:0,accentColor:p}}),"Clip content"]})]})]})}import{useCallback as sg,useEffect as ag,useMemo as lg,useRef as cd,useState as cg}from"react";import{AlignCenter as dg,AlignJustify as ug,AlignLeft as pg,AlignRight as fg,Baseline as gg,Check as mg,ChevronDown as dd,WholeWord as hg}from"lucide-react";import{jsx as ft,jsxs as Yo}from"react/jsx-runtime";var ud={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"},yg=[{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 pd({element:e,getValue:t,getExplicitValue:n,handleChange:o,isModified:r,onResetProperty:i,isCollapsed:a,onToggle:s,sectionHeaderStyle:l,accentColor:c,colorVariables:u,panelContentRef:d,preferredUnit:p,onUnitCycle:g}){let b=t("font-family"),C=t("font-size"),v=t("font-weight"),x=t("line-height"),B=t("letter-spacing"),T=t("text-align"),A=t("color"),E=n("font-family")??"",V=n("font-size")??"",q=n("font-weight")??"",se=n("line-height")??"",P=n("letter-spacing")??"",D=n("color")??"",[f,m]=cg(!1),O=cd(null),pe=cd(null),ye=String(v),ce=String(q),fe=ud[ye]||ye,ge=fr(e,A),Ge=lg(()=>{let J=[{label:"Current",value:b},...yg],Te=new Set;return J.filter(_e=>{let Z=_e.value.trim();return!Z||Te.has(Z)?!1:(Te.add(Z),!0)})},[b]),W=sg(()=>{if(!O.current)return{position:"fixed",top:0,left:0,width:200};let J=O.current.getBoundingClientRect();if(d.current){let Te=d.current.getBoundingClientRect();return{position:"fixed",top:J.bottom+4,left:Te.left,width:Te.width}}return{position:"fixed",top:J.bottom+4,left:J.left,width:J.width}},[d]);ag(()=>{if(!f)return;let J=_e=>{let Z=_e.composedPath();O.current&&!Z.includes(O.current)&&pe.current&&!Z.includes(pe.current)&&m(!1)},Te=_e=>{_e.key==="Escape"&&m(!1)};return document.addEventListener("mousedown",J),document.addEventListener("keydown",Te),()=>{document.removeEventListener("mousedown",J),document.removeEventListener("keydown",Te)}},[f]);let _=({align:J,icon:Te})=>{let _e=T===J;return ft("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:_e?hi:"transparent",color:_e?c:"#64748b",cursor:"pointer"},children:Te})};return Yo("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[ft("div",{style:l,children:ft("span",{children:"Typography"})}),Yo("div",{style:{padding:"4px 12px 8px",display:"flex",flexDirection:"column",gap:4},children:[ft(Io,{style:{backgroundColor:f?Mo:"transparent"},children:Yo("div",{ref:O,style:{display:"flex",alignItems:"center",padding:"4px 8px"},children:[ft(ji,{type:"text",value:E,placeholder:zr(b),onChange:J=>o("font-family",J),onCancel:()=>i("font-family"),style:{...fn,flex:1,minWidth:0,padding:0,fontWeight:r("font-family")?600:400,color:r("font-family")?c:pn},title:E||zr(b)}),ft("button",{type:"button",onClick:()=>m(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:ft(dd,{size:12})}),f&&ft("div",{ref:pe,style:{...W(),backgroundColor:Mo,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:ut,fontWeight:pt},children:Ge.map(J=>{let Te=(E||b)===J.value;return Yo("button",{type:"button",onClick:()=>{o("font-family",J.value),m(!1)},style:{width:"100%",display:"grid",gridTemplateColumns:"80px minmax(0, 1fr) 14px",gap:8,alignItems:"center",padding:"9px 12px",border:"none",outline:"none",backgroundColor:Te?Nr:"transparent",color:wt,cursor:"pointer",textAlign:"left",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:pt},children:[ft("span",{children:J.label}),ft("span",{style:{minWidth:0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:Uo},children:J.value}),ft("span",{style:{display:"flex",justifyContent:"center",color:Te?pn:"transparent"},children:Te&&ft(mg,{size:14})})]},`${J.label}:${J.value}`)})})]})}),Yo("div",{style:{display:"flex",gap:4},children:[ft(Io,{style:{flex:1,backgroundColor:"transparent"},children:Yo("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[Yo("select",{value:ce,onChange:J=>o("font-weight",J.target.value),style:{...fn,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?pn:Uo},children:[!ce&&ft("option",{value:"",disabled:!0,children:fe}),Object.entries(ud).map(([J,Te])=>ft("option",{value:J,children:Te},J))]}),ft("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:ft(dd,{size:12})})]})}),ft("div",{style:{flex:1},children:ft(po,{children:ft("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:ft(go,{property:"font-size",value:V,onChange:J=>o("font-size",J),isModified:r("font-size"),placeholder:br("font-size",C,p),onCancel:()=>i("font-size"),min:1,max:999,style:{...fn,padding:"4px 8px",paddingRight:24,fontWeight:r("font-size")?600:400,color:r("font-size")?c:pn},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt},preferredUnit:p,onUnitCycle:g})})})})]}),Yo("div",{style:{display:"flex",gap:4},children:[ft("div",{style:{flex:1},children:ft(po,{children:ft("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:ft(go,{property:"line-height",value:se,onChange:J=>o("line-height",J),isModified:r("line-height"),step:.1,min:0,scrubIcon:ft(gg,{size:12,strokeWidth:r("line-height")?2.5:1.8}),accentColor:c,placeholder:br("line-height",x,p),onCancel:()=>i("line-height"),style:{...fn,flex:1,minWidth:0,padding:"4px 8px 4px 26px",fontWeight:r("line-height")?600:400,color:r("line-height")?c:pn},showUnit:!1})})})}),ft("div",{style:{flex:1},children:ft(po,{children:ft("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:ft(go,{property:"letter-spacing",value:P,onChange:J=>o("letter-spacing",J),isModified:r("letter-spacing"),step:.1,min:-100,scrubIcon:ft(hg,{size:12,strokeWidth:r("letter-spacing")?2.5:1.8}),accentColor:c,placeholder:br("letter-spacing",B,p),onCancel:()=>i("letter-spacing"),style:{...fn,flex:1,minWidth:0,padding:"4px 8px 4px 26px",fontWeight:r("letter-spacing")?600:400,color:r("letter-spacing")?c:pn},showUnit:!1})})})})]}),Yo("div",{style:{display:"flex",gap:2,height:Pn,boxSizing:"border-box",backgroundColor:Po,borderRadius:2,padding:2},children:[ft(_,{align:"left",icon:ft(pg,{size:14})}),ft(_,{align:"center",icon:ft(dg,{size:14})}),ft(_,{align:"right",icon:ft(fg,{size:14})}),ft(_,{align:"justify",icon:ft(ug,{size:14})})]}),Yo("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[ft("span",{onClick:r("color")?()=>i("color"):void 0,title:r("color")?"Click to reset":void 0,style:{fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,cursor:r("color")?"pointer":"default",width:40,flexShrink:0},children:"Color"}),ft("div",{style:{flex:1,minWidth:0},children:ft(As,{value:D,resolvedValue:ge,placeholder:zr(A),colorVariables:u,onChange:J=>o("color",J),onCancel:()=>i("color"),accentColor:c,modified:r("color"),panelContentRef:d})})]})]})]})}import{Fragment as $g,jsx as G,jsxs as Ke}from"react/jsx-runtime";var gd=[{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 Va(e,t){return e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":t?"fixed":"hug"}function Ls(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=To(t);if(typeof n.num=="number"&&!isNaN(n.num)){let o=n.unit==="%"?"px":n.unit||"px";return`${n.num}${o}`}return"auto"}}}function Ao(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 ad(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function ld(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 hi="#eaeaea",Mo="#ffffff",Nr="rgba(0, 0, 0, 0.04)",Po="rgba(0, 0, 0, 0.04)",Za="rgba(0, 0, 0, 0.12)",Qa="rgba(0, 0, 0, 0.22)",pn="#111827",Uo="#999999",wt="#999999",ut=9,pt=600,Pn=26,Sd=280,Bn=16,kg=8,wd=3,Tg=3,xr=Sd+2*wd,Mg=xr+2*Tg;function Vi(e,t,n){let o=2*wd,r=n?.getBoundingClientRect(),i=window.innerHeight-Bn-o;return r&&t+Mg>r.left&&(i=r.top-kg-o),Math.max(200,i-Math.max(0,e))}var fn={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:pn,border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};function zr(e){return e.trim().replace(/\s+/g," ")||"\u2014"}function br(e,t,n){let o=To(t);if(!/^-?[\d.]/.test(t.trim()))return zr(t);let i=Fi[e],a=n&&i?.includes(n)?n:Hr(e),s=o.unit&&o.unit!==a?mi(o.num,a):o.num;return String(s)}function el(e){requestAnimationFrame(()=>e.select())}function Cd(e,t){return e||(t&&t!=="\u2014"?t:"")}function Wr(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 md(e){let t=e.trim().toLowerCase().split(/\s+/).filter(Boolean);return t.length>0&&t.every(n=>n==="none"||n==="hidden")}var Ko=["top","right","bottom","left"],vr={top:"border-top-width",right:"border-right-width",bottom:"border-bottom-width",left:"border-left-width"};function Ig(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 Rg(e){let t=Ko.filter(n=>!Wr(e[n]));if(t.length===0)return"all";if(t.length===4){let[n]=Ko.map(o=>e[o].trim());return Ko.every(o=>e[o].trim()===n)?"all":"custom"}return t.length===1?t[0]:"custom"}function Lg(e,t){return Ko.map(n=>e[n]).find(n=>!Wr(n))||(Wr(t)?"1px":t)}function Ya({mode:e}){return e==="all"?G(wg,{size:15,strokeWidth:1.9}):e==="custom"?G(Cg,{size:15,strokeWidth:1.9}):G(Eg,{size:15,strokeWidth:1.9,style:{transform:`rotate(${{top:0,right:90,bottom:180,left:270}[e]}deg)`}})}function Ji(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 Ag(e){if(!e.trim())return!0;let t=Number(e);return Number.isFinite(t)&&t===1}function Pg(e){let t=e.trim();return t.startsWith("var(")||t.startsWith("--")}function Xa(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 Bg(e){return Xa(e)!==e.trim()}function Dg(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 qa(e){let t=[],n="",o=0,r=null;for(let a=0;a<e.length;a++){let s=e[a],l=e[a-1];if(r){n+=s,s===r&&l!=="\\"&&(r=null);continue}if(s==='"'||s==="'"){r=s,n+=s;continue}if(s==="("&&o++,s===")"&&(o=Math.max(0,o-1)),s===","&&o===0){let c=n.trim();c&&t.push(c),n="";continue}n+=s}let i=n.trim();return i&&t.push(i),t}function yi(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 Gi(e){let t=e.trim().toLowerCase();return!t||t==="none"||t==="transparent"||t==="none repeat scroll 0% 0% / auto padding-box border-box"}function _g(e){return/(?:repeating-)?(?:linear|radial|conic)-gradient\(/i.test(e)}function Og(e){let t=e.trim();return _g(t)||/^url\(/i.test(t)}function Hg(e){let t=e.trim()||"rgba(0, 0, 0, 0.08)";return Og(t)?t:`linear-gradient(${t}, ${t})`}function Ua(e){let t=e.trim(),n="linear-gradient(";if(t.toLowerCase().startsWith(n)&&t.endsWith(")")){let o=t.slice(n.length,-1),r=qa(o);if(r.length===2&&r[0]?.trim()===r[1]?.trim())return r[0].trim()}return t}function Fg(e){return e.map(t=>Hg(t)).join(", ")}function Ps(e){let t=e.trim().toLowerCase();if(Ji(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 hd(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 a=r[1],s=a.length===3?a.split("").map(d=>d+d).join(""):a,l=parseInt(s.slice(0,2),16),c=parseInt(s.slice(2,4),16),u=parseInt(s.slice(4,6),16);return`rgba(${l}, ${c}, ${u}, ${n})`}let i=o.match(/^rgba?\(\s*([^)]+)\)$/i);if(i){let a=i[1].split(/[\s,\/]+/).map(u=>u.trim()).filter(Boolean),[s,l,c]=a;if(s&&l&&c)return`rgba(${s}, ${l}, ${c}, ${n})`}return n===1?o:`rgba(0, 0, 0, ${n})`}function ji({type:e="text",value:t,placeholder:n,onChange:o,onCancel:r,style:i,min:a,max:s,step:l}){let[c,u]=Jt(!1),[d,p]=Jt(""),g=Ft(!1),b=Ft(!1),C=Ft("");return G("input",{type:e,value:c?d:t,placeholder:n,min:a,max:s,step:l,onFocus:A=>{let E=Cd(t,n);C.current=activeValue,p(E),u(!0),g.current=!1,b.current=!1,el(A.currentTarget)},onChange:A=>{let E=A.target.value;g.current=!0,p(E),o(E)},onBlur:()=>{!b.current&&g.current&&o(d),u(!1),g.current=!1,b.current=!1},onKeyDown:A=>{if(A.key==="Escape"){A.preventDefault(),g.current&&(C.current?o(C.current):r?.()),b.current=!0,p(t),u(!1),A.currentTarget.blur();return}A.key==="Enter"&&A.currentTarget.blur()},style:i})}function zg(e){let t=Number(e);return Number.isFinite(t)?String(Math.max(0,Math.min(100,Math.round(t)))):"0"}function Ng({value:e,placeholder:t,modified:n,onChange:o,onCancel:r,chromeless:i=!1,accentColor:a}){let[s,l]=Jt(!1),[c,u]=Jt(""),[d,p]=Jt(null),g=Ft(""),b=Ft(!1);En(()=>{d!==null&&e===d&&p(null)},[d,e]);let C=s?c:d??e,v=x=>{let B=x.trim()===""?"0":zg(x);o(B),u(B),p(B)};return Ke("div",{style:{position:"relative",minHeight:Pn,backgroundColor:i?"transparent":Po,borderRadius:2,color:pn},children:[G("input",{type:"text",inputMode:"numeric",value:C,placeholder:t,onFocus:x=>{let B=d??e;g.current=B,u(B),l(!0),b.current=!1,el(x.currentTarget)},onChange:x=>{u(x.target.value)},onBlur:()=>{if(b.current){b.current=!1,l(!1);return}if(c.trim()===""){u(g.current),p(null),l(!1),r?.();return}v(c),l(!1)},onKeyDown:x=>{if(x.key==="Escape"){x.preventDefault(),b.current=!0,u(g.current),p(null),l(!1),r?.(),x.currentTarget.blur();return}if(x.key==="Enter"){x.preventDefault(),v(c),l(!1),x.currentTarget.blur();return}if(x.key==="ArrowUp"||x.key==="ArrowDown"){x.preventDefault();let B=x.key==="ArrowUp"?1:-1,T=x.shiftKey?10:x.altKey?.1:1,A=c.trim()===""?0:Number(c),E=Math.max(0,Math.min(100,(Number.isFinite(A)?A:0)+B*T)),V=String(Math.round(E*10)/10);u(V),o(V)}},style:{...fn,paddingLeft:9,paddingRight:18,color:n?a:fn.color}}),G("span",{style:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",color:wt,fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:pt,pointerEvents:"none"},children:"%"})]})}function Ga({label:e,property:t,cssValue:n,displayValue:o,placeholder:r,mode:i,onValueChange:a,onModeChange:s,modified:l,dimmed:c,dropdownOpen:u,onDropdownChange:d,panelContentRef:p,accentColor:g="#3b82f6",onReset:b,canAddMinConstraint:C=!1,canAddMaxConstraint:v=!1,onAddMinConstraint:x,onAddMaxConstraint:B,onHoverChange:T,onValuePreview:A}){let E=o??n,[V,q]=Jt(null),se=V??E,P=To(se),D=r??"",f=l?P.unit||Hr(t):Hr(t),m=!l&&P.unit&&P.unit!==f?mi(P.num,f):P.num,[O,pe]=Jt(!1),[ye,ce]=Jt(String(m)),[fe,ge]=Jt(!1),Ge=Ft(null),W=Ft(null),_=Ft(null),J=Ft(!1);En(()=>{O||ce(String(m))},[m,O]),En(()=>{if(!u)return;let Ye=zt=>{W.current&&!zt.composedPath().includes(W.current)&&_.current&&!zt.composedPath().includes(_.current)&&d?.(!1)},xt=zt=>{zt.key==="Escape"&&d?.(!1)};return document.addEventListener("mousedown",Ye),document.addEventListener("keydown",xt),()=>{document.removeEventListener("mousedown",Ye),document.removeEventListener("keydown",xt)}},[u,d]),En(()=>{O&&Ge.current&&(Ge.current.focus(),Ge.current.select())},[O]);let Te=()=>{let Ye=Ts(ye,t,n,l);a(Ye||`${Math.max(0,parseFloat(ye)||0)}${f}`),pe(!1)},_e=()=>{if(J.current){J.current=!1;return}Te()},Z=Ye=>{if(Ye.key==="Enter"){Te();return}if(Ye.key==="Escape"){J.current=!0,ce(String(m)),pe(!1);return}if(Ye.key==="ArrowUp"||Ye.key==="ArrowDown"){Ye.preventDefault();let xt=Ye.key==="ArrowUp"?1:-1,zt=Ye.shiftKey?8:Ye.altKey?.1:1,Rt=parseFloat(ye)||0,Dn=Math.round(Math.max(0,Rt+xt*zt)*1e3)/1e3;ce(String(Dn)),a(`${Dn}${f}`)}},He={fixed:"Fixed",hug:"Hug",fill:"Fill"},rt={fixed:G(Ka,{size:12}),hug:G(Sg,{size:12}),fill:G(Ka,{size:12})},ve=t==="width"?"min width":"min height",ae=t==="width"?"max width":"max height",Ae=t==="width"?G(yd,{size:14,strokeWidth:1.8}):G(bd,{size:14,strokeWidth:1.8}),st=t==="width"?G(vd,{size:14,strokeWidth:1.8}):G(xd,{size:14,strokeWidth:1.8}),Le=()=>{d?.(!u)},Ee=()=>{if(!_.current||!p?.current)return{position:"absolute",top:"100%",left:0,right:0,width:"100%",marginTop:4};let Ye=_.current.getBoundingClientRect(),xt=p.current.getBoundingClientRect();return{position:"fixed",top:Ye.bottom+4,left:xt.left,width:xt.width}};return Ke("div",{ref:_,onMouseEnter:()=>{ge(!0),T?.(!0)},onMouseLeave:()=>{ge(!1),T?.(!1)},style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:O?g:fe?Qa:Za,backgroundColor:u?Mo:"transparent",minHeight:Pn,boxSizing:"border-box",transition:"border-color 100ms ease, opacity 150ms ease",opacity:c?.3:1},children:[G(Jo,{value:se||n||D,onChange:Ye=>{q(null),a(Ye)},onPreview:Ye=>{q(Ye),A?.(Ye)},onScrubEnd:()=>q(null),onReset:b,isModified:l||V!==null,accentColor:g,defaultUnit:"px",min:0,step:1,snapSteps:Go,style:{fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,padding:"0 8px",flexShrink:0,cursor:"ew-resize"},children:e}),i==="fixed"?O?G("input",{ref:Ge,type:"text",inputMode:"numeric",value:ye,placeholder:D,onChange:Ye=>ce(Ye.target.value),onKeyDown:Z,onBlur:_e,style:{...fn,flex:1,minWidth:0,padding:"4px 2px"}}):G("span",{onClick:()=>{ce(E||D),pe(!0)},style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text",color:E?pn:Uo},children:E?m:D}):G("span",{style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:Uo,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:D}),Ke("button",{type:"button",onClick:Le,style:{display:"flex",alignItems:"center",gap:2,padding:"4px 8px",border:"none",outline:"none",backgroundColor:"transparent",color:wt,fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:pt,cursor:"pointer",flexShrink:0},children:[He[i],G(Ds,{size:12})]}),u&&Ke("div",{ref:W,style:{...Ee(),backgroundColor:Mo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:pt},children:[Ke("button",{type:"button",onClick:()=>{s("fixed"),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:i==="fixed"?Nr:"transparent",color:wt,fontWeight:pt,cursor:"pointer",textAlign:"left",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[rt.fixed,Ke("span",{children:["Fixed ",t," (",n,")"]}),i==="fixed"&&G(Bs,{size:14,style:{marginLeft:"auto"}})]}),Ke("button",{type:"button",onClick:()=>{s("hug"),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:i==="hug"?Nr:"transparent",color:wt,fontWeight:pt,cursor:"pointer",textAlign:"left",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[rt.hug,G("span",{children:"Hug contents"}),i==="hug"&&G(Bs,{size:14,style:{marginLeft:"auto"}})]}),Ke("button",{type:"button",onClick:()=>{s("fill"),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:i==="fill"?Nr:"transparent",color:wt,fontWeight:pt,cursor:"pointer",textAlign:"left",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[rt.fill,G("span",{children:"Fill container"}),i==="fill"&&G(Bs,{size:14,style:{marginLeft:"auto"}})]}),(C||v)&&G("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),C&&Ke("button",{type:"button",onClick:()=>{x?.(),d?.(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:wt,fontWeight:pt,cursor:"pointer",textAlign:"left",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[G("span",{style:{width:18,flexShrink:0,display:"flex",alignItems:"center"},children:Ae}),Ke("span",{children:["Add ",ve,"..."]})]}),v&&Ke("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:wt,fontWeight:pt,cursor:"pointer",textAlign:"left",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[G("span",{style:{width:18,flexShrink:0,display:"flex",alignItems:"center"},children:st}),Ke("span",{children:["Add ",ae,"..."]})]})]})]})}function Wi({label:e,axis:t,kind:n,value:o,placeholder:r,currentValue:i,modified:a,accentColor:s="#3b82f6",onChange:l,onReset:c,panelContentRef:u,dimmed:d,onPreview:p}){let[g,b]=Jt(!1),[C,v]=Jt(o),[x,B]=Jt(null),[T,A]=Jt(!1),[E,V]=Jt(!1),q=Ft(null),se=Ft(null),P=Ft(null),D=Ft(!1);En(()=>{g||v(o)},[g,o]),En(()=>{g&&q.current&&(q.current.focus(),q.current.select())},[g]),En(()=>{if(!E)return;let ge=W=>{P.current&&!W.composedPath().includes(P.current)&&se.current&&!W.composedPath().includes(se.current)&&V(!1)},Ge=W=>{W.key==="Escape"&&V(!1)};return document.addEventListener("mousedown",ge),document.addEventListener("keydown",Ge),()=>{document.removeEventListener("mousedown",ge),document.removeEventListener("keydown",Ge)}},[E]);let f=n==="min"?t==="width"?G(yd,{size:14,strokeWidth:1.8}):G(bd,{size:14,strokeWidth:1.8}):t==="width"?G(vd,{size:14,strokeWidth:1.8}):G(xd,{size:14,strokeWidth:1.8}),m=n==="min"?"min":"max",O=t==="width"?"width":"height",pe=()=>{if(!se.current||!u?.current)return{position:"absolute",top:"100%",left:0,right:0,width:"100%",marginTop:4};let ge=se.current.getBoundingClientRect(),Ge=u.current.getBoundingClientRect();return{position:"fixed",top:ge.bottom+4,left:Ge.left,width:Ge.width}},ye=()=>{l(C.trim()),b(!1)};return Ke("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:g?s:T||E?Qa:"transparent",backgroundColor:E?Mo:Po,height:Pn,boxSizing:"border-box",opacity:d?.3:1,transition:"border-color 100ms ease, opacity 150ms ease"},children:[G(Jo,{value:x??(o||i),onChange:ge=>{B(null),l(ge)},onPreview:ge=>{B(ge),p?.(ge)},onScrubEnd:()=>B(null),onReset:c,isModified:a||x!==null,accentColor:s,defaultUnit:"px",min:0,step:1,snapSteps:Go,style:{width:26,height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",outline:"none",backgroundColor:"transparent",color:a?s:"#999",cursor:a?"pointer":"default",padding:0,flexShrink:0},children:f}),g?G("input",{ref:q,type:"text",value:x??C,placeholder:r,onChange:ge=>v(ge.target.value),onBlur:()=>{if(D.current){D.current=!1;return}ye()},onKeyDown:ge=>{ge.key==="Enter"&&ye(),ge.key==="Escape"&&(D.current=!0,v(o),b(!1))},style:{...fn,flex:1,minWidth:0,padding:"4px 2px",color:a?s:pn,fontWeight:a?600:400}}):G("button",{type:"button",onClick:()=>{v(o),b(!0)},style:{flex:1,minWidth:0,height:"100%",border:"none",outline:"none",backgroundColor:"transparent",color:o?a?s:pn:Uo,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:a?600:400,textAlign:"left",padding:"4px 4px 4px 0",cursor:"text",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:x??(o||r)}),G("button",{type:"button",onClick:()=>V(ge=>!ge),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(Ds,{size:12})}),E&&Ke("div",{ref:P,style:{...pe(),backgroundColor:Mo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:pt},children:[Ke("button",{type:"button",onClick:()=>{l(i),V(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:wt,fontWeight:pt,cursor:"pointer",textAlign:"left",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[G("span",{style:{width:18,flexShrink:0,display:"flex",alignItems:"center"},children:f}),Ke("span",{children:["Set to current ",O]})]}),Ke("button",{type:"button",onClick:()=>{c?.(),V(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:wt,fontWeight:pt,cursor:"pointer",textAlign:"left",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[G("span",{style:{width:18,flexShrink:0}}),Ke("span",{children:["Remove ",m," ",O]})]}),G("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),Ke("button",{type:"button",onClick:()=>V(!1),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:wt,fontWeight:pt,cursor:"pointer",textAlign:"left",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'},children:[G("span",{style:{width:18,flexShrink:0,display:"flex",alignItems:"center"},children:G(vg,{size:14,strokeWidth:1.8})}),G("span",{children:"Apply variable..."})]})]})]})}function Io({children:e,style:t,dimmed:n,onMouseEnter:o,onMouseLeave:r}){let[i,a]=Jt(!1);return G("div",{onMouseEnter:()=>{a(!0),o?.()},onMouseLeave:()=>{a(!1),r?.()},style:{position:"relative",borderRadius:2,border:"none",backgroundColor:Po,minHeight:Pn,boxSizing:"border-box",transition:"opacity 150ms ease",opacity:n?.3:1,color:pn,...t},children:e})}function po({children:e}){return G("div",{style:{position:"relative",borderRadius:2,backgroundColor:Po,minHeight:Pn,boxSizing:"border-box",color:pn},children:e})}function go({property:e,value:t,onChange:n,onPreview:o,onScrubEnd:r,isModified:i=!1,step:a=1,min:s,max:l,style:c,placeholder:u,showUnit:d=!0,unitStyle:p,preferredUnit:g,onUnitCycle:b,onCancel:C,scrubIcon:v,scrubValue:x,scrubSnapSteps:B,accentColor:T}){let[A,E]=Jt(null),V=A??t,q=To(V),se=Hr(e),P=Fi[e],f=g&&P&&P.includes(g)?g:se,m=i&&q.unit||f,O=!i&&q.unit&&q.unit!==m?mi(q.num,m):q.num,[pe,ye]=Jt(!1),[ce,fe]=Jt(""),ge=Ft(!1),Ge=Ft(!1),W=Ft(""),_=Le=>{ye(!0),W.current=t,ge.current=!1,Ge.current=!1,fe(Z?String(O):u&&u!=="\u2014"?u:""),el(Le.target)},J=()=>{if(ye(!1),!Ge.current&&ge.current&&ce.trim()){let Le=Ts(ce,e,t,i);Le&&n(Le)}ge.current=!1,Ge.current=!1},Te=Le=>{let Ee=Le.target.value;ge.current=!0,fe(Ee);let Ye=Ee.trim(),xt=Ye.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),zt=Ye.match(/^(-?[\d.]+)$/);if(xt){let Rt=parseFloat(xt[1]);isNaN(Rt)||n(`${Rt}${xt[2].toLowerCase()}`)}else if(zt){let Rt=parseFloat(zt[1]);isNaN(Rt)||n(`${Rt}${m}`)}},_e=Le=>{if(Le.key==="Escape"){Le.preventDefault(),Ge.current=!0,ge.current&&(W.current?n(W.current):C?.()),fe(W.current),ye(!1),Le.target.blur();return}if(Le.key==="Enter"){if(ce.trim()){let Ee=Ts(ce,e,t,i);Ee&&n(Ee)}Le.target.blur();return}if(Le.key==="ArrowUp"||Le.key==="ArrowDown"){Le.preventDefault();let Ee=Le.shiftKey?10:Le.altKey?.1:1,Ye=(Le.key==="ArrowUp"?1:-1)*a*Ee,xt=parseFloat(ce)||O||0,zt=Math.round((xt+Ye)*1e3)/1e3;s!==void 0&&(zt=Math.max(s,zt)),l!==void 0&&(zt=Math.min(l,zt)),fe(String(zt)),n(`${zt}${m}`)}},Z=/^-?[\d.]/.test(V.trim()),He=pe?ce:Z?String(O):"",ve=pe&&/\s*(rem|em|px|%)\s*$/i.test(ce)?"":m,ae=b&&(ve==="rem"||ve==="px"),Ae={fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,pointerEvents:"none"},st={...p??Ae,pointerEvents:"auto",cursor:"pointer"};return Ke($g,{children:[v&&G(Jo,{value:x??V,onChange:Le=>{E(null),n(Le)},onPreview:Le=>{E(Le),o?.(Le)},onScrubEnd:()=>{E(null),r?.()},onReset:C,isModified:i||A!==null,accentColor:T,defaultUnit:m,min:s,max:l,step:a,snapSteps:B??Go,style:{position:"absolute",left:4,top:"50%",transform:"translateY(-50%)",height:Pn,padding:"0 4px",zIndex:1},children:v}),G("input",{type:"text",inputMode:"decimal",value:He,onFocus:_,onBlur:J,onChange:Te,onKeyDown:_e,placeholder:u,style:c}),d&&ve&&G("span",{style:ae?st:p??Ae,onClick:ae?b:void 0,title:ae?"Click to switch units":void 0,children:ve})]})}function As({value:e,resolvedValue:t,placeholder:n,colorVariables:o,onChange:r,onCancel:i,accentColor:a="#3b82f6",modified:s,panelContentRef:l,chromeless:c=!1}){let[u,d]=Jt(!1),p=e,g=p||n||"\u2014",[b,C]=Jt(p),[v,x]=Jt(!1),[B,T]=Jt(!1),A=Ft(null),E=Ft(null),V=Ft([]),q=Ft(!1),se=Ft(!1),P=Ft(""),D=gn(()=>{if(!E.current)return{position:"fixed",top:0,left:0,width:200};let _=E.current.getBoundingClientRect();if(l?.current){let J=l.current.getBoundingClientRect();return{position:"fixed",top:_.bottom+4,left:J.left,width:J.width}}return{position:"fixed",top:_.bottom+4,left:_.left,width:_.width}},[l]);En(()=>{u||C(e)},[e,u]),En(()=>{if(!v)return;let _=Te=>{E.current&&!Te.composedPath().includes(E.current)&&x(!1)},J=Te=>{Te.key==="Escape"&&x(!1)};return document.addEventListener("mousedown",_),document.addEventListener("keydown",J),()=>{document.removeEventListener("mousedown",_),document.removeEventListener("keydown",J)}},[v]),En(()=>{u&&A.current&&(A.current.focus(),A.current.select())},[u]);let f=$r(()=>{if(!b||b.startsWith("#")||b.startsWith("rgb")||b.startsWith("hsl")||b.startsWith("oklch"))return[];let _=b.toLowerCase();return o.filter(J=>J.name.toLowerCase().includes(_)||J.usage.toLowerCase().includes(_)).slice(0,8)},[b,o]),m=()=>{if(se.current){se.current=!1,q.current=!1;return}if(!q.current){d(!1),x(!1);return}if(!b.trim()){d(!1),x(!1),q.current=!1;return}if(Dg(b)){C(""),i?.(),d(!1),x(!1),q.current=!1;return}let _=Xa(b);C(_),r(_),d(!1),x(!1),q.current=!1},O=_=>{q.current=!0,C(_),Bg(_)&&r(Xa(_)),_.includes("var")||_.includes("--")||_.length>0&&!_.startsWith("#")?x(!0):x(!1)},pe=_=>{C(_.usage),r(_.usage),x(!1),d(!1)},ye=(_,J)=>{requestAnimationFrame(()=>{_[J]?.focus()})},ce=(_,J,Te,_e)=>{if(_.key==="ArrowDown"||_.key==="ArrowUp"){_.preventDefault();let Z=_.key==="ArrowDown"?1:-1,He=(_e+Z+J.length)%J.length;Te.current[He]?.focus();return}if(_.key==="Enter"){_.preventDefault(),pe(J[_e]);return}_.key==="Escape"&&(_.preventDefault(),x(!1),A.current?.focus())},fe=()=>{setTimeout(()=>{v||m()},150)},ge=_=>{if((_.key==="ArrowDown"||_.key==="ArrowUp")&&v&&f.length>0){_.preventDefault(),ye(V.current,_.key==="ArrowDown"?0:f.length-1);return}_.key==="Enter"?m():_.key==="Escape"&&(_.preventDefault(),se.current=!0,q.current&&(P.current?r(P.current):i?.()),C(P.current),d(!1),x(!1),q.current=!1,A.current?.blur())},Ge=$r(()=>{let _=t.trim().toLowerCase();if(_.startsWith("#"))return _.length===4?`#${_[1]}${_[1]}${_[2]}${_[2]}${_[3]}${_[3]}`:_.slice(0,7);let J=_.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(J){let _e=parseInt(J[1],10).toString(16).padStart(2,"0"),Z=parseInt(J[2],10).toString(16).padStart(2,"0"),He=parseInt(J[3],10).toString(16).padStart(2,"0");return`#${_e}${Z}${He}`}let Te=_.match(/oklch\(\s*([\d.]+)/);if(Te){let _e=Math.max(0,Math.min(1,parseFloat(Te[1]))),Z=Math.round(_e*255).toString(16).padStart(2,"0");return`#${Z}${Z}${Z}`}return"#000000"},[t]);return Ke("div",{ref:E,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),style:{position:"relative",borderRadius:2,border:c?"none":"1px solid",borderColor:c?"transparent":u?a:B?Qa:Za,backgroundColor:"transparent",minHeight:Pn,boxSizing:"border-box",transition:"border-color 100ms ease",overflow:"hidden"},children:[Ke("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[Ke("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[G("input",{type:"color",value:Ge,onChange:_=>{let J=_.target.value;C(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:b,placeholder:n,onChange:_=>O(_.target.value),onKeyDown:ge,onBlur:fe,style:{...fn,flex:1,minWidth:0}}):G("span",{onClick:()=>{P.current=p,q.current=!1,se.current=!1,C(Cd(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:s?a:p?pn:Uo},title:p||n,children:g})]}),v&&f.length>0&&G("div",{"data-popmelt-dropdown":"true",style:{...D(),backgroundColor:Mo,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:f.map((_,J)=>Ke("button",{ref:Te=>{V.current[J]=Te},type:"button",onClick:()=>pe(_),onKeyDown:Te=>ce(Te,f,V,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:Te=>{Te.currentTarget.style.backgroundColor=Nr},onBlur:Te=>{Te.currentTarget.style.backgroundColor="transparent"},children:[G("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:_.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),G("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:_.name})]},_.name))})]})}function Ed({element:e,elementInfo:t,selector:n,styleModifications:o,dispatch:r,onClose:i,onHover:a,accentColor:s="#3b82f6",toolbarRef:l,panelWrapperRef:c,refreshKey:u=0}){let d=Ft(null),p=Ft(null),[g,b]=Jt(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch{return!1}});En(()=>{if(g)return;let k=setTimeout(()=>b(!0),50);return()=>clearTimeout(k)},[g]);let[C,v]=Jt(null),x=C!==null,[B,T]=Jt("rem"),A=gn(()=>{T(k=>k==="rem"?"px":"rem")},[]),E=Ft(new Map),[V,q]=Jt(""),[se,P]=Jt(!1),D=Ft(null),[f,m]=Jt(!1),[O,pe]=Jt(null),ye=Ft(null),ce=$r(()=>ha(),[u]);En(()=>{E.current.clear()},[e,u]),En(()=>{pe(null)},[e]),En(()=>{if(!se)return;let k=K=>{D.current&&!K.composedPath().includes(D.current)&&P(!1)},M=K=>{K.key==="Escape"&&P(!1)};return document.addEventListener("mousedown",k),document.addEventListener("keydown",M),()=>{document.removeEventListener("mousedown",k),document.removeEventListener("keydown",M)}},[se]),En(()=>{if(!f)return;let k=K=>{ye.current&&!K.composedPath().includes(ye.current)&&m(!1)},M=K=>{K.key==="Escape"&&m(!1)};return document.addEventListener("mousedown",k),document.addEventListener("keydown",M),()=>{document.removeEventListener("mousedown",k),document.removeEventListener("keydown",M)}},[f]),En(()=>{let k=M=>{if(M.key!=="Escape")return;let K=document.activeElement;K&&d.current?.contains(K)||i()};return window.addEventListener("keydown",k),()=>window.removeEventListener("keydown",k)},[i]);let fe=Ft({top:0,left:0,maxHeight:400}),[,ge]=Jt(0),Ge="devtools-panel-position",W=Ft({x:0,y:0}),_=Ft(null),J=Ft(!1);En(()=>{try{let k=localStorage.getItem(Ge);if(k){let M=JSON.parse(k);if(typeof M.top=="number"&&typeof M.left=="number"){J.current=!0;let K=window.innerWidth-xr-Bn,te=Math.max(Bn,Math.min(M.top,window.innerHeight-Bn-200)),de=Math.max(Bn,Math.min(M.left,K));fe.current={top:te,left:de,maxHeight:Vi(te,de,l?.current)},ge(we=>we+1)}}}catch{}},[]),En(()=>{let k=()=>{let M=window.innerWidth-xr-Bn,K=Math.max(Bn,Math.min(fe.current.top,window.innerHeight-Bn-200)),te=Math.max(Bn,Math.min(fe.current.left,M));fe.current={top:K,left:te,maxHeight:Vi(K,te,l?.current)},ge(de=>de+1)};return window.addEventListener("resize",k,{passive:!0}),()=>window.removeEventListener("resize",k)},[l]),En(()=>{let k=K=>{let te=_.current;if(!te)return;let de=te.startOffsetX+(K.clientX-te.startX),we=te.startOffsetY+(K.clientY-te.startY),Je=window.innerWidth-xr-Bn,ze=Math.max(Bn,Math.min(Je,fe.current.left+de)),it=Math.max(Bn,Math.min(window.innerHeight-Bn-200,fe.current.top+we));W.current={x:ze-fe.current.left,y:it-fe.current.top};let $e=d.current,vt=$e?.parentElement;if(!vt)return;vt.style.top=`${it}px`,vt.style.left=`${ze}px`;let Kt=Vi(it,ze,l?.current);$e&&($e.style.maxHeight=`${Kt}px`,$e.style.height=`${Kt}px`)},M=()=>{if(!_.current)return;let K=fe.current.top+W.current.y,te=fe.current.left+W.current.x;fe.current={top:K,left:te,maxHeight:Vi(K,te,l?.current)},W.current={x:0,y:0},J.current=!0;try{localStorage.setItem(Ge,JSON.stringify({top:K,left:te}))}catch{}_.current=null};return window.addEventListener("mousemove",k),window.addEventListener("mouseup",M),()=>{window.removeEventListener("mousemove",k),window.removeEventListener("mouseup",M)}},[]);let Te=gn(k=>{k.button!==0||k.target.closest("button")||(k.preventDefault(),_.current={startX:k.clientX,startY:k.clientY,startOffsetX:W.current.x,startOffsetY:W.current.y})},[]);En(()=>{W.current={x:0,y:0};let k=(te=!1)=>{let de=d.current,we=8,Je,ze;if(J.current)Je=fe.current.top,ze=fe.current.left;else{let vt=e.getBoundingClientRect();ze=vt.right+we,Je=vt.top,ze+xr>window.innerWidth-Bn&&(ze=vt.left-xr-we),ze<Bn&&(ze=Math.max(Bn,(window.innerWidth-xr)/2))}let it=window.innerWidth-xr-Bn;Je=Math.max(Bn,Math.min(Je,window.innerHeight-Bn-200)),ze=Math.max(Bn,Math.min(ze,it));let $e=Vi(Je,ze,l?.current);if(fe.current={top:Je,left:ze,maxHeight:$e},te&&de){let vt=de.parentElement;vt&&!J.current&&(vt.style.top=`${Je+W.current.y}px`,vt.style.left=`${ze+W.current.x}px`),de.style.maxHeight=`${$e}px`,de.style.height=`${$e}px`}else ge(vt=>vt+1)};k(!1);let M=()=>k(!0),K=()=>k(!1);return window.addEventListener("scroll",M,{passive:!0}),window.addEventListener("resize",K,{passive:!0}),()=>{window.removeEventListener("scroll",M),window.removeEventListener("resize",K)}},[e,l,u]),En(()=>{let k=d.current;if(!k)return;let M=K=>{if(K.composedPath().some($e=>$e instanceof HTMLElement&&$e.dataset.popmeltDropdown==="true"))return;let te=p.current;if(!te){K.preventDefault();return}let{scrollTop:de,scrollHeight:we,clientHeight:Je}=te,ze=de<=0&&K.deltaY<0,it=de+Je>=we&&K.deltaY>0;(ze||it)&&K.preventDefault()};return k.addEventListener("wheel",M,{passive:!1}),()=>k.removeEventListener("wheel",M)},[]);let _e=$r(()=>o.find(k=>k.selector===n),[o,n]),Z=gn(k=>{let M=_e?.changes.find(K=>K.property===k);return M?M.modified:ms(e,k)},[e,_e]),He=gn(k=>{let M=_e?.changes.find(K=>K.property===k);return M?M.modified:ai(e,k)},[e,_e]),rt=gn((k,M)=>{if(!k.includes("color"))return M;let K=M.trim();if(K.startsWith("var(")||K.startsWith("--"))return K;let de=ce.find(we=>we.usage===K||we.name===K)?.value||K;return fr(e,de)},[ce,e]),ve=gn(k=>{if(E.current.has(k))return E.current.get(k);let M=_e?.changes.find(te=>te.property===k);if(M)return M.original;let K=ms(e,k);return E.current.set(k,K),K},[e,_e]),ae=gn((k,M)=>{let K=ve(k),te=rt(k,M);dt(e,k,te),k==="backdrop-filter"&&dt(e,"-webkit-backdrop-filter",te),r({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:k,original:K,modified:te}})},[e,n,t,r,rt,ve]),Ae=gn(k=>{let K=o.find(te=>te.selector===n)?.changes.find(te=>te.property===k);e instanceof HTMLElement&&(e.style.removeProperty(k),k==="backdrop-filter"&&e.style.removeProperty("-webkit-backdrop-filter")),(K||e instanceof HTMLElement)&&(r({type:"CLEAR_STYLE",payload:{selector:n,property:k}}),E.current.delete(k))},[e,n,o,r]),st=gn(()=>{let k=V.split(";").map(M=>M.trim()).filter(M=>M);for(let M of k){let K=M.indexOf(":");if(K>0){let te=M.slice(0,K).trim(),de=M.slice(K+1).trim();te&&de&&ae(te,de)}}q("")},[V,ae]),Le=gn(k=>_e?.changes.some(M=>M.property===k)??!1,[_e]),Ee=gn(k=>{requestAnimationFrame(()=>{let K=d.current?.querySelector(`[data-popmelt-property="${k}"]`)?.querySelector("input, textarea, select, button");K?.focus(),(K instanceof HTMLInputElement||K instanceof HTMLTextAreaElement)&&K.select()})},[]),Ye=gn(()=>{let k=[],M=He("background-image");M&&!yi(M)&&k.push(...qa(M).map(Ua).filter(we=>!Gi(we)));let K=He("background");k.length===0&&K&&!yi(K)&&k.push(...qa(K).map(Ua).filter(we=>!Gi(we)));let te=He("background-color"),de=Z("background-color");return(te!==null&&!Gi(te)||!Ji(de))&&k.push(te||de),k},[He,Z]),xt=gn(k=>{let M=k.filter(de=>!Gi(de));if(M.length===0){ae("background","none"),ae("background-image","none"),ae("background-color","transparent"),Ae("opacity");return}let K=M[M.length-1],te=M.slice(0,-1);Ae("background"),te.length>0?ae("background-image",Fg(te)):Ae("background-image"),ae("background-color",K),Ae("opacity")},[ae,Ae]),zt=$r(()=>{let k=He("background"),M=He("background-image"),K=He("background-color"),te=Z("background-color"),de=Z("opacity"),we=K!==null&&!Gi(K);return yi(k||"")&&yi(M||"")&&!we&&Ji(te)&&(de===""||Number(de)===1)},[He,Z]),Rt=$r(()=>{let k=Z("border-width"),M=Z("border-style"),te=Ko.map(we=>Z(vr[we])).some(we=>!Wr(we));return Wr(k)&&!te||md(M)},[Z]),Dn=$r(()=>["box-shadow","filter","backdrop-filter","transform"].every(k=>{let M=Z(k);return!M||M==="none"}),[Z]),Ut=gn(()=>{let k=["rgba(0, 0, 0, 0.08)",...Ye()];xt(k),Ee("background-layer-0")},[xt,Ee,Ye]),yt=gn((k,M,K)=>{let te=ve(k);K(te)?Ae(k):ae(k,M)},[ve,ae,Ae]),zn=gn(()=>{yt("background","none",yi),yt("background-image","none",yi),yt("background-color","transparent",Ji),yt("opacity","1",Ag)},[yt]),Mn=gn(()=>{ae("border-width","1px"),ae("border-style","solid"),ae("border-color",Z("color")||"#000000"),Ee("border-width")},[Ee,Z,ae]),Ct=gn(()=>{yt("border-width","0px",Wr),Ko.forEach(k=>{yt(vr[k],"0px",Wr)}),yt("border-color","transparent",Ji),yt("border-style","none",md),pe(null)},[yt]),Nt=gn(()=>Ko.some(M=>He(vr[M])!==null)?{top:Z("border-top-width"),right:Z("border-right-width"),bottom:Z("border-bottom-width"),left:Z("border-left-width")}:Ig(Z("border-width")),[He,Z]),mn=Rg(Nt()),bt=O??mn,Lt=gn((k,M)=>{let K=Nt(),te=Z("border-width"),de=M||Lg(K,te);if(pe(k==="custom"?"custom":null),m(!1),k==="all"){ae("border-width",de),Ko.forEach(we=>Ae(vr[we]));return}if(k==="custom"){Ko.forEach(we=>{ae(vr[we],K[we]||de)});return}ae("border-width","0px"),Ko.forEach(we=>{ae(vr[we],we===k?de:"0px")})},[Nt,Z,ae,Ae]),Kn=gn((k,M)=>{ae(k,M),P(!1),Ee(k)},[Ee,ae]),Xt=gn(()=>{P(!1),ae("box-shadow","none"),ae("filter","none"),ae("backdrop-filter","none"),ae("transform","none")},[ae]),Vn=k=>{let M=Z(k.property),te=He(k.property)??"",de=zr(M),we=Le(k.property),Je={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:pn,border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};switch(k.type){case"color":{let ze=fr(e,M);return G(As,{value:te,resolvedValue:ze,placeholder:de,colorVariables:ce,onChange:it=>ae(k.property,it),onCancel:()=>Ae(k.property),accentColor:s,modified:we,panelContentRef:p})}case"number":{if(!!Fi[k.property])return G(po,{modified:we,children:G(go,{property:k.property,value:te,onChange:$e=>ae(k.property,$e),isModified:we,placeholder:br(k.property,M,B),onCancel:()=>Ae(k.property),min:k.min,max:k.max,step:k.step||1,style:{...Je,paddingRight:32},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt},preferredUnit:B,onUnitCycle:A})});let{num:it}=To(te);return G(po,{modified:we,children:G(ji,{type:"number",value:te?it:"",placeholder:de,min:k.min,max:k.max,step:k.step||1,onChange:$e=>ae(k.property,$e),onCancel:()=>Ae(k.property),style:Je})})}case"select":return G(Io,{modified:we,style:{backgroundColor:"transparent"},children:Ke("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[Ke("select",{value:te,onChange:ze=>ae(k.property,ze.target.value),style:{...Je,cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none",backgroundColor:"transparent",color:we?s:te?pn:Uo},children:[!te&&G("option",{value:"",disabled:!0,children:de}),k.options?.map(ze=>G("option",{value:ze,children:ze},ze))]}),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(Ds,{size:12})})]})});case"spacing":return G(po,{modified:we,children:G(ji,{type:"text",value:te,onChange:ze=>ae(k.property,ze),onCancel:()=>Ae(k.property),placeholder:de||"e.g., 10px or 10px 20px",style:Je})});case"backdrop-filter":return G(Qc,{value:M,onChange:ze=>ae(k.property,ze),accentColor:s,modified:we,panelContentRef:p});default:return G(po,{modified:we,children:G(ji,{type:"text",value:te,placeholder:de,onChange:ze=>ae(k.property,ze),onCancel:()=>Ae(k.property),style:Je})})}},$t={width:Pn,height:Pn,border:"none",outline:"none",backgroundColor:"transparent",color:"#1f2937",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",padding:0},cn=(k,M,K,te,de,we=!1)=>G(Ng,{value:k,placeholder:M,modified:K,onChange:te,onCancel:de,chromeless:we,accentColor:s}),re=({colorProperty:k,opacityProperty:M,colorValue:K,explicitColorValue:te,resolvedColor:de,colorModified:we,opacityDisplay:Je,opacityPlaceholder:ze,opacityModified:it,onColorChange:$e,onOpacityChange:vt,onColorCancel:Kt,onOpacityCancel:$n})=>{let Xn=Pg(te||K);return Ke("div",{style:{display:"grid",gridTemplateColumns:Xn?"minmax(0, 1fr)":"minmax(0, 1fr) 68px",alignItems:"center",minWidth:0,minHeight:Pn,borderRadius:2,backgroundColor:Po,overflow:"hidden"},children:[G("div",{"data-popmelt-property":k,style:{minWidth:0},children:G(As,{value:te,resolvedValue:de,placeholder:zr(K),colorVariables:ce,onChange:$e,onCancel:Kt,accentColor:s,modified:we,panelContentRef:p,chromeless:!0})}),!Xn&&G("div",{"data-popmelt-property":M,style:{borderLeft:"1px solid rgba(0,0,0,0.1)",minWidth:0},children:cn(Je,ze,it,vt,$n,!0)})]})},ie=()=>{let k=Ye(),M=k.length>0?k:["rgba(0, 0, 0, 0.08)"],K=Le("background")||Le("background-image")||Le("background-color")||Le("opacity");return G("div",{style:{display:"grid",gap:2,padding:"4px 0"},children:M.map((te,de)=>{let we=Ua(te),Je=fr(e,we),ze=`background-layer-${de}`,it=`background-layer-alpha-${de}`,$e=Kt=>{let $n=[...M];$n[de]=Kt,xt($n)},vt=()=>{let Kt=M.filter(($n,Xn)=>Xn!==de);xt(Kt)};return Ke("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) 22px 22px",gap:6,alignItems:"center",padding:"2px 12px"},children:[re({colorProperty:ze,opacityProperty:it,colorValue:we,explicitColorValue:we,resolvedColor:Je,colorModified:K,opacityDisplay:Ps(we),opacityPlaceholder:Ps(we),opacityModified:K,onColorChange:$e,onOpacityChange:Kt=>$e(hd(Je,Kt)),onColorCancel:()=>xt(M),onOpacityCancel:()=>xt(M)}),G("button",{type:"button",title:"Hide fill",onClick:vt,style:$t,children:G(Ja,{size:14,strokeWidth:1.8})}),G("button",{type:"button",title:"Remove fill",onClick:vt,style:$t,children:G(fd,{size:15,strokeWidth:2})})]},`${ze}-${M.length}`)})})},be=()=>{let k=Z("border-color"),M=He("border-color")??"",K=fr(e,k),te=Le("border-color");return Ke("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) 22px 22px",gap:6,alignItems:"center",padding:"4px 12px"},children:[re({colorProperty:"border-color",opacityProperty:"border-color-alpha",colorValue:k,explicitColorValue:M,resolvedColor:K,colorModified:te,opacityDisplay:Ps(k),opacityPlaceholder:Ps(k),opacityModified:te,onColorChange:de=>ae("border-color",de),onOpacityChange:de=>ae("border-color",hd(K,de)),onColorCancel:()=>Ae("border-color"),onOpacityCancel:()=>Ae("border-color")}),G("button",{type:"button",title:"Hide stroke",onClick:Ct,style:$t,children:G(Ja,{size:14,strokeWidth:1.8})}),G("button",{type:"button",title:"Remove stroke",onClick:Ct,style:$t,children:G(fd,{size:15,strokeWidth:2})})]})},We={marginBottom:4,fontSize:ut,lineHeight:1.1,color:wt,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:pt},Ne=(k,M,K,te=!1,de=!1)=>{let Je=He(k)??Z(k);return G(Io,{style:{backgroundColor:"transparent",opacity:te?.45:1,border:de?`1px solid ${Za}`:"none"},children:Ke("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[Ke("select",{value:Je,disabled:te,onChange:ze=>ae(k,ze.target.value),style:{...fn,cursor:te?"default":"pointer",paddingLeft:8,paddingRight:24,appearance:"none",WebkitAppearance:"none",backgroundColor:"transparent",color:te?Uo:pn},children:[K&&!Je&&G("option",{value:"",disabled:!0,children:K}),M.map(ze=>G("option",{value:ze,children:ze},ze))]}),G("span",{style:{position:"absolute",right:6,top:"50%",transform:"translateY(-50%)",color:"#999",pointerEvents:"none",display:"flex"},children:G(Ds,{size:12})})]})})},tt=()=>{let k=bt==="top"||bt==="right"||bt==="bottom"||bt==="left"?bt:null,M=k?vr[k]:"border-width",te=He(M)??"",de=Z(M),we=Le(M);return G(po,{modified:we,children:G(go,{property:M,value:te,onChange:Je=>{k?Lt(k,Je):ae(M,Je)},isModified:we,placeholder:br(M,de,B),onCancel:()=>{k?Lt(k,"0px"):Ae(M)},min:0,max:20,step:1,scrubIcon:G(Ka,{size:13,strokeWidth:we?2.5:1.8}),accentColor:s,style:{...fn,paddingLeft:28,paddingRight:26},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt},preferredUnit:B,onUnitCycle:A})})},Ze=k=>{let M=vr[k],K=He(M),te=Z(M),de=Le(M);return G(po,{modified:de,children:G(go,{property:M,value:K??"",onChange:we=>ae(M,we),isModified:de,placeholder:br(M,te,B),onCancel:()=>ae(M,"0px"),min:0,max:20,step:1,scrubIcon:G(Ya,{mode:k}),accentColor:s,style:{...fn,paddingLeft:28,paddingRight:26},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt},preferredUnit:B,onUnitCycle:A})})},At=()=>bt!=="custom"?null:Ke("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:Ze("left")}),G("div",{"data-popmelt-property":"border-top-width",children:Ze("top")}),G("div",{"data-popmelt-property":"border-right-width",children:Ze("right")}),G("div",{"data-popmelt-property":"border-bottom-width",children:Ze("bottom")})]}),io=(k,M=0,K=100,te=1)=>{let we=He(k)??"",Je=Z(k),ze=Le(k);return G(po,{modified:ze,children:G(go,{property:k,value:we,onChange:it=>ae(k,it),isModified:ze,placeholder:br(k,Je,B),onCancel:()=>Ae(k),min:M,max:K,step:te,style:{...fn,paddingRight:26},unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt},preferredUnit:B,onUnitCycle:A})})},Gn=()=>{let k=[{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 Ke("div",{ref:ye,style:{position:"relative",width:Pn,height:Pn},children:[G("button",{type:"button",title:"Border sides",onClick:()=>m(M=>!M),style:{...$t,width:Pn,height:Pn,color:bt!=="all"?s:"#1f2937"},children:G(Ya,{mode:bt})}),f&&G("div",{"data-popmelt-dropdown":"true",style:{position:"absolute",top:Pn+4,right:0,width:156,backgroundColor:Mo,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:k.map((M,K)=>Ke("button",{type:"button",onClick:()=>Lt(M.mode),style:{width:"100%",minHeight:34,display:"grid",gridTemplateColumns:"18px 18px minmax(0, 1fr)",columnGap:8,alignItems:"center",padding:M.mode==="custom"?"9px 12px":"7px 12px",border:"none",borderTop:M.mode==="custom"?"1px solid rgba(0,0,0,0.08)":"none",outline:"none",backgroundColor:M.mode===bt?Nr:"transparent",color:"#1f2937",cursor:"pointer",textAlign:"left",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:pt,marginTop:M.mode==="custom"&&K>0?2:0},children:[G("span",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:M.mode===bt&&G(Bs,{size:13,strokeWidth:1.9})}),G("span",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:G(Ya,{mode:M.mode})}),G("span",{children:M.label})]},M.mode))})]})},hn=()=>Ke("div",{style:{position:"relative"},children:[be(),Ke("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1fr) 22px",columnGap:6,alignItems:"end",padding:"0 12px 6px"},children:[Ke("div",{children:[G("div",{style:We,children:"Style"}),Ne("border-style",["solid","dashed","dotted","double","none"],void 0,!1,!0)]}),Ke("div",{"data-popmelt-property":"border-width",children:[G("div",{style:We,children:"Width"}),tt()]}),Gn()]}),At()]}),Xe=()=>{let k=He("opacity"),M=(k??Z("opacity"))||"1",K=Number(M),te=k&&k.trim()&&Number.isFinite(K)?String(Math.round(K*100)):"",de=Number.isFinite(K)?String(Math.round(K*100)):"100",Je=Z("visibility")==="hidden",ze=(He("mix-blend-mode")??Z("mix-blend-mode"))||"normal",it=["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"];return Ke("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)",opacity:x?.3:1,transition:"opacity 150ms ease"},children:[Ke("div",{style:{...Bt,padding:"6px 12px"},children:[G("span",{children:"Appearance"}),Ke("div",{style:{display:"flex",alignItems:"center",gap:4},children:[G("button",{type:"button",title:Je?"Show element":"Hide element",onClick:()=>{Je?Ae("visibility"):ae("visibility","hidden")},style:{...$t,color:Je?s:"#1f2937",opacity:Je?1:.9},children:G(Ja,{size:15,strokeWidth:1.8})}),Ke("div",{style:{position:"relative",width:22,height:22},children:[G("button",{type:"button",title:"Blend mode",tabIndex:-1,style:{...$t,width:22,height:22,color:ze!=="normal"?s:"#1f2937"},children:G(bg,{size:15,strokeWidth:1.8})}),G("select",{"aria-label":"Blend mode",value:ze,onChange:$e=>{$e.target.value==="normal"?Ae("mix-blend-mode"):ae("mix-blend-mode",$e.target.value)},style:{position:"absolute",inset:0,opacity:0,cursor:"pointer"},children:it.map($e=>G("option",{value:$e,children:$e},$e))})]})]})]}),Ke("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1fr)",columnGap:8,padding:"0 12px 8px"},children:[Ke("div",{"data-popmelt-property":"opacity",children:[G("div",{style:We,children:"Opacity"}),cn(te,de,Le("opacity"),$e=>{let vt=Math.max(0,Math.min(100,Number($e)))/100;Number.isFinite(vt)&&ae("opacity",String(vt))},()=>Ae("opacity"))]}),Ke("div",{"data-popmelt-property":"border-radius",children:[G("div",{style:We,children:"Corner radius"}),io("border-radius",0,100,1)]})]})]})},gt=t.reactComponent||t.tagName,Nn={position:"fixed",top:fe.current.top,left:fe.current.left,width:Sd,height:fe.current.maxHeight,maxHeight:fe.current.maxHeight,backgroundColor:hi,borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",zIndex:10002,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,color:pn,overflow:"visible",display:"flex",flexDirection:"column",opacity:g?1:0,transition:"opacity 150ms ease"},dn={display:"flex",alignItems:"center",justifyContent:"space-between",margin:4,padding:"4px 5px 4px 10px",backgroundColor:s,color:"#ffffff",cursor:_.current?"grabbing":"grab",userSelect:"none",WebkitUserSelect:"none"},Bt={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"},Jn={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},Wt={width:80,fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:wt,fontWeight:pt,flexShrink:0};return G("div",{ref:c,"data-devtools":"panel-wrapper",style:{position:"fixed",top:fe.current.top+W.current.y,left:fe.current.left+W.current.x,zIndex:10002,pointerEvents:"none"},children:Ke("div",{ref:d,"data-devtools":"panel",style:{...Nn,position:"relative",top:0,left:0,zIndex:0,pointerEvents:"auto"},onMouseEnter:()=>a?.("element"),onMouseLeave:()=>a?.(null),children:[G("style",{dangerouslySetInnerHTML:{__html:`
|
|
16
|
+
[data-devtools="panel"] ::selection {
|
|
17
|
+
background: ${Cs(s,.22)};
|
|
18
|
+
color: ${pn};
|
|
19
|
+
}
|
|
20
|
+
[data-devtools="panel"] input::placeholder,
|
|
21
|
+
[data-devtools="panel"] textarea::placeholder {
|
|
22
|
+
color: ${Uo};
|
|
23
|
+
opacity: 1;
|
|
24
|
+
}
|
|
25
|
+
`}}),G("div",{"aria-hidden":"true",style:ks()}),Ke("div",{style:dn,onMouseDown:Te,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:gt})}),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"})]}),Ke("div",{ref:p,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[G("div",{children:G(sd,{element:e,getValue:Z,getOriginalValue:ve,handleChange:ae,isModified:Le,onResetProperty:Ae,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:Bt,activeDropdown:C,onDropdownChange:v,panelContentRef:p,accentColor:s,onFieldHover:a,preferredUnit:B,onUnitCycle:A})}),Xe(),G("div",{style:{opacity:C?.3:1,transition:"opacity 150ms ease"},children:G(pd,{element:e,getValue:Z,getExplicitValue:He,handleChange:ae,isModified:Le,onResetProperty:Ae,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:Bt,accentColor:s,colorVariables:ce,panelContentRef:p,preferredUnit:B,onUnitCycle:A})}),gd.map((k,M)=>{let K=M===gd.length-1,te=k.name==="Background",de=k.name==="Borders",we=k.name==="Effects",Je=te||de||we,ze=te&&zt||de&&Rt||we&&Dn;return Ke("div",{style:{borderBottom:K?"none":"1px solid rgba(0,0,0,0.08)",opacity:x?.3:1,transition:"opacity 150ms ease"},children:[Ke("div",{style:Je?{...Bt,padding:"6px 12px"}:Bt,children:[G("span",{children:k.name}),Je&&Ke("div",{style:{position:"relative"},children:[G("button",{type:"button",onClick:()=>{te?Ut():de?Mn():P($e=>!$e)},title:`Add ${k.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(xg,{size:15,strokeWidth:2})}),we&&se&&G("div",{ref:D,"data-popmelt-dropdown":"true",style:{position:"absolute",top:24,right:0,width:190,backgroundColor:Mo,border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:pt},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($e=>G("button",{type:"button",onClick:()=>Kn($e.property,$e.value),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"9px 12px",border:"none",outline:"none",backgroundColor:"transparent",color:wt,cursor:"pointer",textAlign:"left",fontSize:ut,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:pt},children:$e.label},$e.label))})]})]}),!ze&&Ke("div",{style:{padding:"0 0 4px"},children:[te&&ie(),de&&hn(),k.properties.filter($e=>!(te||de)).map($e=>{let vt=Le($e.property);return Ke("div",{"data-popmelt-property":$e.property,style:{...Jn},children:[G("span",{onClick:vt?()=>Ae($e.property):void 0,title:vt?"Click to reset":void 0,style:{...Wt,cursor:vt?"pointer":"default"},children:$e.label}),G("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:Vn($e)})]},$e.property)})]})]},k.name)}),Ke("div",{style:{opacity:x?.3:1,transition:"opacity 150ms ease"},children:[G("div",{style:Bt,children:G("span",{children:"Raw CSS"})}),Ke("div",{style:{padding:"4px 12px 8px"},children:[G("textarea",{value:V,onChange:k=>q(k.target.value),placeholder:"property: value; ...",style:{width:"100%",height:60,padding:8,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:pn,border:"1px solid rgba(0,0,0,0.1)",borderRadius:2,resize:"vertical",outline:"none"}}),V.trim()&&G("button",{type:"button",onClick:st,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:s,color:"#fff",cursor:"pointer",opacity:V.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as Wg,useLayoutEffect as jg,useState as Vg}from"react";import{Fragment as Ug,jsx as jr,jsxs as Yg}from"react/jsx-runtime";var tl=["flex-start","center","flex-end"],nl=["flex-start","center","flex-end"];function Gg(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function Jg(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 kd(e){let t=Array.from(e.children);if(t.length===0)return null;let n=1/0,o=1/0,r=-1/0,i=-1/0;for(let a of t){let s=a.getBoundingClientRect();s.width===0&&s.height===0||(s.top<n&&(n=s.top),s.left<o&&(o=s.left),s.bottom>r&&(r=s.bottom),s.right>i&&(i=s.right))}return n===1/0?null:new DOMRect(o,n,i-o,r-n)}function Td({element:e,modifier:t,accentColor:n,refreshKey:o=0}){let[r,i]=Vg(null);if(Wg(()=>{if(!e){i(null);return}let C=()=>i(kd(e));return C(),window.addEventListener("scroll",C,{passive:!0}),window.addEventListener("resize",C,{passive:!0}),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}},[e]),jg(()=>{e&&i(kd(e))},[e,o]),!r)return null;let a=r,s=window.getComputedStyle(e),l=s.display;if(l!=="flex"&&l!=="inline-flex")return null;let c=s.flexDirection,u=c==="column"||c==="column-reverse"?"vertical":"horizontal",d=u==="horizontal"?"vertical":"horizontal",p=[];if(t==="shift"){let C=Gg(s.justifyContent);if(C){let v=tl.indexOf(C);u==="horizontal"?(v>0&&p.push("left"),v<tl.length-1&&p.push("right")):(v>0&&p.push("up"),v<tl.length-1&&p.push("down"))}}else{let C=Jg(s.alignItems);if(C){let v=nl.indexOf(C);d==="horizontal"?(v>0&&p.push("left"),v<nl.length-1&&p.push("right")):(v>0&&p.push("up"),v<nl.length-1&&p.push("down"))}}if(p.length===0)return null;let g=14,b=7;return jr(Ug,{children:p.map(C=>{let v,x;switch(C){case"right":v=a.right+g,x=a.top+a.height/2;break;case"left":v=a.left-g,x=a.top+a.height/2;break;case"down":v=a.left+a.width/2,x=a.bottom+g;break;case"up":v=a.left+a.width/2,x=a.top-g;break}let B=C==="right"?0:C==="left"?180:C==="down"?90:-90,T={position:"fixed",left:v-b,top:x-b,width:b*2,height:b*2,pointerEvents:"none",zIndex:9997};return jr("div",{"data-devtools":"swipe-hint",style:T,children:jr("svg",{width:b*2,height:b*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:Yg("g",{transform:`rotate(${B})`,children:[jr("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),jr("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),jr("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),jr("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},C)})})}import{useEffect as Kg,useLayoutEffect as Xg,useState as qg}from"react";import{jsx as ol,jsxs as rl}from"react/jsx-runtime";function Zg(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 Md({element:e,fontSize:t,lineHeight:n,accentColor:o,hoveredProperty:r,draggingProperty:i,cursorViewport:a}){let[s,l]=qg(null);if(Kg(()=>{if(!e){l(null);return}let x=()=>{l(ci(e))};return x(),window.addEventListener("scroll",x,{passive:!0}),window.addEventListener("resize",x,{passive:!0}),()=>{window.removeEventListener("scroll",x),window.removeEventListener("resize",x)}},[e]),Xg(()=>{e&&l(ci(e))},[e,t,n]),!s)return null;let c=s.width,u=s.height,d=Zg(o,.2),p=i??r,g=8,b=2,C={position:"fixed",top:s.top,left:s.left,width:c,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"},v=x=>x==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return rl("div",{"data-devtools":"text-handles",style:C,children:[rl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${u}`,children:[ol("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)&&ol("rect",{x:c-b/2,y:u/2-g/2,width:b,height:g,fill:o,stroke:"#ffffff",strokeWidth:p==="font-size"?4:2,paintOrder:"stroke"}),(p==="line-height"||!p)&&ol("rect",{x:c/2-g/2,y:u-b/2,width:g,height:b,fill:o,stroke:"#ffffff",strokeWidth:p==="line-height"?4:2,paintOrder:"stroke"})]}),a&&p&&(()=>{let x=p==="font-size"?"Aa":"Lh",B=v(p);return rl("div",{style:{position:"fixed",left:a.x+8,top:a.y-28,background:o,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:[x," ",B]})})()]})}import{Fragment as Si,jsx as Et,jsxs as xi}from"react/jsx-runtime";var Id=8,il=[0,1,2,4,8,12,16,20,24,28,32],vi=8,sl="devtools-active-text";function Qg(e){let t=e?.getBoundingClientRect();return!t||typeof window>"u"?{}:t.top<window.innerHeight/2?{avoidTop:t.bottom+vi,avoidLeft:t.left-vi,avoidRight:t.right+vi}:{avoidBottom:t.top-vi,avoidLeft:t.left-vi,avoidRight:t.right+vi}}function Rd(e,t,n=0,o,r,i=90){let a=e.left+window.scrollX+4,s=t==="top-left"?e.top+window.scrollY-gr-n*gr+4:e.bottom+window.scrollY+4-1+n*gr,l=window.scrollY+4,c=window.scrollY+window.innerHeight-gr-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 C=window.scrollY+d.bottom+4;C>l&&(l=C,u="top")}else{let C=window.scrollY+d.top-gr-4;C<c&&(c=C,u="bottom")}}return l>c&&(c=l),s<l?s=u==="top"?l:e.top+window.scrollY+4:s>c&&(s=u==="bottom"?c:Math.max(e.top+window.scrollY+4,c)),{x:a,y:s}}function Ld({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:o,activeAnnotationIds:r,queuePositionMap:i,inFlightStyleSelectors:a,inFlightSelectorColors:s,onAttachImages:l,onViewThread:c,onCloseThread:u,onModelComponentsAdd:d,onModelComponentFocus:p,onModelComponentHover:g,modelComponentNames:b,modelPanelHoveredComponent:C,modelSpacingTokenHover:v,highlightedAnnotationIds:x,focusedThreadAnnotationId:B,externalCanvasRef:T,toolbarRef:A}){let{canvasRef:E,redrawAll:V,resizeCanvas:q}=Ic(),se=kn(h=>{E.current=h,T&&(T.current=h)},[T,E]),P=tn(!1);Wn(()=>{let h=E.current;if(!h)return;let S=()=>{P.current&&(P.current=!1,h.style.pointerEvents="")},$=y=>{y.button===0&&P.current&&S()};return window.addEventListener("mousedown",$),()=>window.removeEventListener("mousedown",$)},[E]);let[D,f]=Tt(!1),[m,O]=Tt(()=>{if(typeof window>"u")return null;try{let h=localStorage.getItem(sl);return h?JSON.parse(h):null}catch{return null}}),[pe,ye]=Tt(null),[ce,fe]=Tt(null),[ge,Ge]=Tt(null),W=tn(null),_=tn(null),J=tn({x:0,y:0}),Te=tn([]),_e=tn(0),[Z,He]=Tt(null),[rt,ve]=Tt(new Map),ae=tn(0),Ae=tn(null),[st,Le]=Tt(null),[Ee,Ye]=Tt(null),[xt,zt]=Tt(null),[Rt,Dn]=Tt(null),Ut=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}),[yt,zn]=Tt(null),[Mn,Ct]=Tt(null),[Nt,mn]=Tt(null),[bt,Lt]=Tt(0),Kn=tn(null),[Xt,Vn]=Tt(null),$t=tn({x:0,y:0}),[cn,re]=Tt({x:0,y:0}),ie=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}),[be,We]=Tt(null),[Ne,tt]=Tt(null),[Ze,At]=Tt(null),[io,Gn]=Tt(!1),[hn,Xe]=Tt(0),[gt,Nn]=Tt(null),dn=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}),[Bt,Jn]=Tt(null),[Wt,k]=Tt(null),[M,K]=Tt(null),te=tn({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[de,we]=Tt(null),[Je,ze]=Tt(null),[it,$e]=Tt(null),vt=Rc(),Kt=tn(s);Kt.current=s;let $n=kn(h=>{let S=Kt.current;if(!S||S.size===0)return!1;for(let $ of S.keys())try{if(h.matches($))return!0}catch{}return!1},[]),Xn=tn(e);Xn.current=e;let jt=tn(m);jt.current=m;let Ho=tn([]),z=tn(n);z.current=n;let[ue,Ue]=Tt(null),qt=e.selectedAnnotationIds;Ho.current=qt;let to=kn((h,S=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:h,addToSelection:S}})},[t]),qn=kn(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[In,ur]=Tt(null),mo=tn({x:window.scrollX,y:window.scrollY}),ho=tn(null),yo=tn(null),[Rn,qr]=Tt(mo.current);Wn(()=>(q(),window.addEventListener("resize",q),()=>window.removeEventListener("resize",q)),[q]),Wn(()=>{m?localStorage.setItem(sl,JSON.stringify(m)):localStorage.removeItem(sl)},[m]),Lc(m,O,pe,e.annotations,t);let er=tn(Z);er.current=Z,Wn(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let h=S=>{if(!S.altKey||!er.current)return;S.preventDefault();let $=S.deltaY>0?-1:1;ae.current=Math.max(0,ae.current+$);let y=Ae.current;if(y){let I=fs(y,ae.current);He(I)}};return window.addEventListener("wheel",h,{passive:!1}),()=>window.removeEventListener("wheel",h)},[e.activeTool,e.isAnnotating]),Wn(()=>{e.activeTool!=="model"&&(He(null),ve(new Map),ae.current=0,Ae.current=null)},[e.activeTool]),Wn(()=>{let h=Z?.name??null,S=h&&b?.has(h)?h:null;g?.(S)},[Z,b,g]);let[tr,F]=Tt(null);Wn(()=>{if(!C){F(null);return}let h=ii(C.name),S=C.instanceIndex;F(h[S%h.length]??null)},[C]);let[U,me]=Tt([]);Wn(()=>{if(!v){me([]);return}v.token?.bindings?.length?me(pa(v.token)):me(da(v.px))},[v]);let xe=tn(null),Ie=tn(null);xe.current=be,Ie.current=Ne,Wn(()=>{let h=["flex-start","center","flex-end"],S=["flex-start","center","flex-end"],y=null,I=!1,R=null,j=null,L=(Se,at)=>{let nt=Pr(Se,at);for(;nt&&nt!==document.documentElement;){let vn=window.getComputedStyle(nt).display;if(vn==="flex"||vn==="inline-flex")return nt;nt=nt.parentElement}return null},Y=Se=>{let at=window.getComputedStyle(Se).flexDirection;return at==="column"||at==="column-reverse"?"vertical":"horizontal"},ne=Se=>{let at=Se.getAttribute("data-pm");return at||(at=Math.random().toString(36).substring(2,8),Se.setAttribute("data-pm",at)),{selector:`[data-pm="${at}"]`,durableSelector:xo(Se)}},N=()=>{I=!0,y&&clearTimeout(y),y=setTimeout(()=>{I=!1,y=null},300)},X=(Se,at,an)=>{let nt=Y(Se);if(at===nt){let oo=window.getComputedStyle(Se).justifyContent,Gt=oo==="normal"||oo==="flex-start"||oo==="start"?"flex-start":oo==="flex-end"||oo==="end"?"flex-end":oo==="center"?"center":null;if(!Gt)return;let kr=h.indexOf(Gt)+an;if(kr<0||kr>=h.length)return;let sr=h[kr],{selector:Tr,durableSelector:ta}=ne(Se);dt(Se,"justify-content",sr),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Tr,durableSelector:ta,element:Zn(Se),changes:[{property:"justify-content",original:oo,modified:sr}]}})}else{let oo=window.getComputedStyle(Se).flexDirection,Gt=nt==="horizontal"?"column":"row",{selector:ir,durableSelector:kr}=ne(Se);dt(Se,"flex-direction",Gt),t({type:"MODIFY_STYLES_BATCH",payload:{selector:ir,durableSelector:kr,element:Zn(Se),changes:[{property:"flex-direction",original:oo,modified:Gt}]}})}Xe(vn=>vn+1)},oe=(Se,at,an)=>{let vn=Y(Se)==="horizontal"?"vertical":"horizontal";if(at!==vn)return;let Gt=window.getComputedStyle(Se).alignItems,ir=Gt==="normal"||Gt==="stretch"||Gt==="flex-start"||Gt==="start"?"flex-start":Gt==="flex-end"||Gt==="end"?"flex-end":Gt==="center"?"center":null;if(!ir)return;let sr=S.indexOf(ir)+an;if(sr<0||sr>=S.length)return;let Tr=S[sr],{selector:ta,durableSelector:Iu}=ne(Se);dt(Se,"align-items",Tr),t({type:"MODIFY_STYLES_BATCH",payload:{selector:ta,durableSelector:Iu,element:Zn(Se),changes:[{property:"align-items",original:Gt,modified:Tr}]}}),Xe(Ru=>Ru+1)},Q=20,Be=null,je=null,mt=0,St=(Se,at,an)=>{let nt=L(at,an);Nn(nt?{modifier:Se,target:nt}:null)},ht=Se=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(Se.key==="Shift"&&!Se.altKey){let at=$t.current;St("shift",at.x,at.y)}else if(Se.key==="Alt"&&!Se.shiftKey){let at=$t.current;St("alt",at.x,at.y)}}},Ot=Se=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let at=Se.shiftKey&&!Se.altKey,an=Se.altKey&&!Se.shiftKey;if(!at&&!an||Se.buttons!==0){Be=null,je=null,mt=0,R=null,j=null,Nn(null);return}if(R===null&&(R=Se.clientX,j=Se.clientY,St(at?"shift":"alt",Se.clientX,Se.clientY)),I)return;Be===null&&(Be=Se.clientX,je=Se.clientY,mt=0);let nt=Se.clientX-Be,vn=Se.clientY-je,oo=Math.abs(nt)>=Math.abs(vn)?nt:vn;if(Math.abs(oo)>3){let Tr=oo>0?1:-1;if(mt!==0&&Tr!==mt){Be=Se.clientX,je=Se.clientY,mt=0;return}mt=Tr}if(Math.abs(nt)<Q&&Math.abs(vn)<Q)return;let Gt=L(R,j);if(!Gt)return;let ir=Math.abs(nt)>=Math.abs(vn)?"horizontal":"vertical",sr=(ir==="horizontal"?nt:vn)>0?1:-1;Be=null,je=null,mt=0,at?X(Gt,ir,sr):oe(Gt,ir,sr),N()},sn=Se=>{(Se.key==="Shift"||Se.key==="Alt")&&(R=null,j=null,Be=null,je=null,mt=0,Nn(null))},Mt=()=>{Nn(null),Be=null,je=null,mt=0};return window.addEventListener("keydown",ht),window.addEventListener("mousemove",Ot),window.addEventListener("mousedown",Mt),window.addEventListener("keyup",sn),()=>{window.removeEventListener("keydown",ht),window.removeEventListener("mousemove",Ot),window.removeEventListener("mousedown",Mt),window.removeEventListener("keyup",sn),y&&clearTimeout(y)}},[e.activeTool,e.isAnnotating,t]),Wn(()=>{let h=S=>{if(S.key==="Escape"){if(jt.current)return;if(e.activeTool==="model"&&rt.size>0){S.preventDefault(),ve(new Map);return}if(Ho.current.length>0){S.preventDefault(),qn();return}}if(S.key==="Enter"&&e.activeTool==="model"&&rt.size>0&&d){S.preventDefault();let R=[...rt.keys()].filter(j=>!b?.has(j));R.length>0&&d(R),ve(new Map);return}if((S.metaKey||S.ctrlKey)&&S.key==="v"&&Te.current.length>0&&!jt.current){S.preventDefault(),_e.current++;let R=_e.current*20,L=Te.current[0]?.groupId?Math.random().toString(36).substring(2,9):void 0,Y=Te.current.map(N=>({...N,id:Math.random().toString(36).substring(2,9),groupId:N.groupId?L:void 0,timestamp:Date.now(),points:N.points.map(X=>({x:X.x+R,y:X.y+R}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:Y}});let ne=Y.find(N=>N.type!=="text")||Y[0];ne&&to(ne.id);return}let $=Ho.current;if($.length===0||jt.current)return;let y=S.composedPath?.()[0]??S.target,I=y?.tagName;if(!(I==="INPUT"||I==="TEXTAREA"||y?.isContentEditable)&&(S.key==="Delete"||S.key==="Backspace")){if(S.preventDefault(),u){let R=Xn.current.annotations;for(let j of $){let L=R.find(ne=>ne.id===j);if(!L)continue;let Y=L.threadId||L.groupId&&R.find(ne=>ne.groupId===L.groupId&&ne.threadId)?.threadId;Y&&u(Y)}}for(let R of $)t({type:"DELETE_ANNOTATION",payload:{id:R}});qn()}};return window.addEventListener("keydown",h),()=>window.removeEventListener("keydown",h)},[t,qn,to,e.activeTool,rt,b,d,u]);let Fe=ri(),Me=bi(()=>e.annotations.filter(h=>!h.pathname||h.pathname===Fe),[e.annotations,Fe]),Ce=bi(()=>e.styleModifications.filter(h=>!h.pathname||h.pathname===Fe),[e.styleModifications,Fe]),Dt=Qg(A?.current),ln=Dt.avoidTop,Sn=Dt.avoidBottom,Vt=Dt.avoidLeft,lt=Dt.avoidRight,yn=bi(()=>ws(e.annotations),[e.annotations]),no=bi(()=>{let h=new Map,S=new Set,$=1,y=[...e.annotations].sort((I,R)=>I.timestamp-R.timestamp);for(let I of y)if(!yn.has(I))if(I.groupId){if(!S.has(I.groupId)){S.add(I.groupId);let R=e.annotations.filter(j=>j.groupId===I.groupId);for(let j of R)h.set(j.id,$);$++}}else h.set(I.id,$),$++;return h},[e.annotations,yn]),Yn=bi(()=>{if(qt.length===0)return null;let h=new Map;for(let S of qt){let $=e.annotations.find(I=>I.id===S);if(!$)continue;let y=$.groupId?e.annotations.filter(I=>I.groupId===$.groupId):[$];for(let I of y)if(I.linkedSelector&&!s?.has(I.linkedSelector)){let R=I.color||e.activeColor;h.set(I.linkedSelector,R)}}return h.size>0?h:null},[qt,e.annotations,e.activeColor,s]),so=bi(()=>Me.filter(h=>!(yn.has(h)||m&&!m.isNew&&h.id===m.id)),[Me,yn,m]),Cr=kn((h=mo.current)=>{V(so,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,qt,Id,h.x,h.y,no,x,Dt)},[so,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,qt,V,no,x,ln,Sn,Vt,lt]);Wn(()=>{Cr(mo.current)},[Cr]),Wn(()=>{let h=()=>{let S={x:window.scrollX,y:window.scrollY};mo.current=S,ho.current===null&&(ho.current=window.requestAnimationFrame(()=>{ho.current=null;let $=mo.current;if(Cr($),jt.current){qr(y=>y.x===$.x&&y.y===$.y?y:$);return}yo.current!==null&&window.clearTimeout(yo.current),yo.current=window.setTimeout(()=>{yo.current=null;let y=mo.current;qr(I=>I.x===y.x&&I.y===y.y?I:y)},80)}))};return window.addEventListener("scroll",h,{passive:!0}),()=>{window.removeEventListener("scroll",h),ho.current!==null&&(window.cancelAnimationFrame(ho.current),ho.current=null),yo.current!==null&&(window.clearTimeout(yo.current),yo.current=null)}},[Cr]),Wn(()=>{if(ce){let h=Math.random().toString(36).substring(2,9);O({id:h,point:ce.point,text:"",fontSize:12,isNew:!0,groupId:ce.groupId}),fe(null)}},[ce]),Wn(()=>{ge&&(O({id:Math.random().toString(36).substring(2,9),point:ge.point,text:"",fontSize:12,isNew:!0,linkedSelector:ge.linkedSelector,linkedAnchor:ge.linkedAnchor,elements:ge.elements}),Ge(null))},[ge]);let Zr=tn(null),Qr=m?.id??null;Wn(()=>{Qr&&W.current?requestAnimationFrame(()=>{let h=W.current;if(!h||(h.focus(),_.current===Qr))return;_.current=Qr;let S=jt.current;if(S){if(Zr.current!==null){let $=Math.min(Zr.current,h.value.length);h.setSelectionRange($,$);return}if(!S.isNew&&S.clickPoint){let $=E.current;if(!$)return;let y=$.getContext("2d");if(!y)return;y.font=`${S.fontSize}px ${An}`;let I=S.fontSize*1.4,R=S.text.split(`
|
|
26
|
+
`),j=S.clickPoint.y-S.point.y,L=Math.max(0,Math.min(R.length-1,Math.floor(j/I))),Y=S.clickPoint.x-S.point.x,ne=R[L]||"",N=0;for(let oe=0;oe<=ne.length;oe++){let Q=y.measureText(ne.substring(0,oe)).width;if(Q>Y){let Be=oe>0?y.measureText(ne.substring(0,oe-1)).width:0;N=Y-Be<Q-Y?oe-1:oe;break}N=oe}let X=N;for(let oe=0;oe<L;oe++)X+=(R[oe]?.length||0)+1;h.setSelectionRange(X,X)}}}):(_.current=null,Zr.current=null)},[Qr,E]);let ao=kn(h=>{let S=E.current;if(!S)return{x:0,y:0};let $=S.getBoundingClientRect(),y,I;if("touches"in h&&h.touches[0])y=h.touches[0].clientX,I=h.touches[0].clientY;else if("clientX"in h)y=h.clientX,I=h.clientY;else return{x:0,y:0};return{x:y-$.left+window.scrollX,y:I-$.top+window.scrollY}},[E]),Fo=kn((h,S,$,y)=>{let I=$.x-S.x,R=$.y-S.y,j=I*I+R*R;if(j===0)return Math.sqrt((h.x-S.x)**2+(h.y-S.y)**2)<=y;let L=Math.max(0,Math.min(1,((h.x-S.x)*I+(h.y-S.y)*R)/j)),Y=S.x+L*I,ne=S.y+L*R;return Math.sqrt((h.x-Y)**2+(h.y-ne)**2)<=y},[]),ei=kn(h=>{for(let $=Me.length-1;$>=0;$--){let y=Me[$];if(!y||yn.has(y))continue;let I=(y.strokeWidth||3)+4;switch(y.type){case"text":{if(!y.points[0]||!y.text)continue;let R=y.points[0],j=y.fontSize||12,L=E.current;if(L){let Y=L.getContext("2d");if(Y){Y.font=`${j}px ${An}`;let ne=y.text.replace(/\n/g," "),N=R.x-Rn.x,X=Pi(N),oe=Bi(Y,ne,X),Q=Y.measureText(oe).width,Be=j*1.4,je={x:R.x-Rn.x,y:R.y-Rn.y},mt=Ea(je,j,Dt,Q+8),St={x:mt.x+Rn.x,y:mt.y+Rn.y};if(h.x>=St.x-4-4&&h.x<=St.x+Q+4+4&&h.y>=St.y-4-4&&h.y<=St.y+Be+4+4)return y}}break}case"rectangle":{if(y.points.length<2)continue;let R=y.points[0],j=y.points[y.points.length-1],L=Math.min(R.x,j.x),Y=Math.max(R.x,j.x),ne=Math.min(R.y,j.y),N=Math.max(R.y,j.y),X=Fo(h,{x:L,y:ne},{x:Y,y:ne},I),oe=Fo(h,{x:L,y:N},{x:Y,y:N},I),Q=Fo(h,{x:L,y:ne},{x:L,y:N},I),Be=Fo(h,{x:Y,y:ne},{x:Y,y:N},I);if(X||oe||Q||Be)return y;break}case"circle":{if(y.points.length<2)continue;let R=y.points[0],j=y.points[y.points.length-1],L=(R.x+j.x)/2,Y=(R.y+j.y)/2,ne=Math.abs(j.x-R.x)/2,N=Math.abs(j.y-R.y)/2,X=h.x-L,oe=h.y-Y,Q=Math.sqrt((X/ne)**2+(oe/N)**2);if(Math.abs(Q-1)*Math.max(ne,N)<=I)return y;break}case"line":{if(y.points.length<2)continue;let R=y.points[0],j=y.points[y.points.length-1];if(Fo(h,R,j,I))return y;break}case"freehand":{if(y.points.length<2)continue;for(let R=0;R<y.points.length-1;R++){let j=y.points[R],L=y.points[R+1];if(Fo(h,j,L,I))return y}break}}}return null},[Me,E,Fo,yn,Rn.x,Rn.y,ln,Sn,Vt,lt]),Qi=kn(h=>{let S=ei(h);return S?.type==="text"?S:null},[ei]),es=kn(h=>{if(qt.length===0)return null;let S=Id/2+4;for(let $ of qt){let y=e.annotations.find(I=>I.id===$);if(!(!y||y.points.length<2)){if(y.type==="line"){let I=y.points[0],R=y.points[y.points.length-1];if(Math.sqrt((h.x-I.x)**2+(h.y-I.y)**2)<=S)return{handle:"start",annotationId:$};if(Math.sqrt((h.x-R.x)**2+(h.y-R.y)**2)<=S)return{handle:"end",annotationId:$};continue}if(y.type==="circle"){let I=y.points[0],R=y.points[y.points.length-1],j=Math.min(I.x,R.x),L=Math.max(I.x,R.x),Y=Math.min(I.y,R.y),ne=Math.max(I.y,R.y),N=(j+L)/2,X=(Y+ne)/2,oe=[{handle:"top",x:N,y:Y},{handle:"bottom",x:N,y:ne},{handle:"left",x:j,y:X},{handle:"right",x:L,y:X}];for(let{handle:Q,x:Be,y:je}of oe)if(Math.sqrt((h.x-Be)**2+(h.y-je)**2)<=S)return{handle:Q,annotationId:$};continue}if(y.type==="rectangle"||y.type==="freehand"){let I=y.points[0],R=y.points[y.points.length-1],j,L,Y,ne;y.type==="freehand"?(j=Math.min(...y.points.map(X=>X.x)),L=Math.max(...y.points.map(X=>X.x)),Y=Math.min(...y.points.map(X=>X.y)),ne=Math.max(...y.points.map(X=>X.y))):(j=Math.min(I.x,R.x),L=Math.max(I.x,R.x),Y=Math.min(I.y,R.y),ne=Math.max(I.y,R.y));let N=[{corner:"topLeft",x:j,y:Y},{corner:"topRight",x:L,y:Y},{corner:"bottomLeft",x:j,y:ne},{corner:"bottomRight",x:L,y:ne}];for(let{corner:X,x:oe,y:Q}of N)if(Math.sqrt((h.x-oe)**2+(h.y-Q)**2)<=S)return{handle:X,annotationId:$}}}}return null},[qt,e.annotations]);Wn(()=>{let h=S=>{if(J.current={x:S.clientX+window.scrollX,y:S.clientY+window.scrollY},!m){let $=Qi(J.current);ye($?.id||null)}};return window.addEventListener("mousemove",h),()=>window.removeEventListener("mousemove",h)},[m,Qi]);let nr=kn(()=>{if(!m)return;let h=m.images?.length||0;if(m.text.trim()||h>0)if(m.isNew){let S=cs();t({type:"ADD_TEXT",payload:{point:m.point,text:m.text||(h>0?`[${h} image${h>1?"s":""}]`:""),fontSize:m.fontSize,id:S,groupId:m.groupId,linkedSelector:m.linkedSelector,linkedAnchor:m.linkedAnchor,elements:m.elements,...h>0?{imageCount:h}:{}}}),h>0&&m.images&&l&&l(S,m.images)}else t({type:"UPDATE_TEXT",payload:{id:m.id,text:m.text||(h>0?`[${h} image${h>1?"s":""}]`:""),...h>0?{imageCount:h}:{}}}),h>0&&m.images&&l&&l(m.id,m.images);else m.isNew||t({type:"DELETE_ANNOTATION",payload:{id:m.id}});O(null)},[m,t,l]),w=kn(h=>{for(let S=0;S<il.length-1;S++){let $=il[S],y=il[S+1];if(h<=($+y)/2)return $;if(h<y)return y}return Math.round(h/8)*8},[]),H=kn((h,S,$,y)=>{let I=$.top+Math.max(y.top,4),R=$.bottom-Math.max(y.bottom,4),j=$.left+Math.max(y.left,4),L=$.right-Math.max(y.right,4);if(h<$.left||h>$.right||S<$.top||S>$.bottom)return null;let Y=S<I,ne=S>R,N=h<j,X=h>L;return Y&&N?y.top>=y.left?"top":"left":Y&&X?y.top>=y.right?"top":"right":ne&&N?y.bottom>=y.left?"bottom":"left":ne&&X?y.bottom>=y.right?"bottom":"right":Y?"top":ne?"bottom":N?"left":X?"right":null},[]),le=kn(h=>{if(!e.isAnnotating)return;if(e.inspectedElement&&e.activeTool==="hand"&&!("button"in h&&h.button===2)){h.preventDefault(),h.stopPropagation(),t({type:"SELECT_ELEMENT",payload:null});return}let S=ao(h),$="shiftKey"in h&&h.shiftKey;if(e.activeTool==="inspector"){if("button"in h&&h.button===2)return;if(st&&!$n(st)){let R=e.annotations.find(ht=>{if(!ht.linkedSelector||!ht.threadId)return!1;try{return st.matches(ht.linkedSelector)}catch{return!1}});if(R?.threadId&&c){c(R.threadId),requestAnimationFrame(()=>{document.querySelector("[data-popmelt-shadow-host]")?.shadowRoot?.querySelector("[data-popmelt-reply]")?.focus()});return}let j=Zn(st),L=xo(st),Y=st.getBoundingClientRect(),ne=st.getAttribute("data-pm");ne||(ne=Math.random().toString(36).substring(2,8),st.setAttribute("data-pm",ne));let N=`[data-pm="${ne}"]`,X=Ce.some(ht=>{try{return st.matches(ht.selector)}catch{return!1}}),oe=e.annotations.filter(ht=>{if(!ht.linkedSelector)return!1;try{return st.matches(ht.linkedSelector)}catch{return!1}}).length,Q=(X?1:0)+oe,Be=Y.top>=gr*(1+Q)?"top-left":"bottom-left",je=E.current?.getContext("2d")??document.createElement("canvas").getContext("2d"),mt;je&&(je.font=`12px ${An}`,mt=je.measureText("Type here...").width);let St=Rd(Y,Be,Q,A?.current,mt,0);Ge({point:St,linkedSelector:N,linkedAnchor:Be,elements:[{...j,selector:L}]})}return}if(e.activeTool==="model"){if("button"in h&&h.button===2)return;if(Z){let R=Z.name;if(b?.has(R)){p?.(R);return}"shiftKey"in h&&h.shiftKey?ve(L=>{let Y=new Map(L);return Y.has(R)?Y.delete(R):Y.set(R,Z),Y}):rt.size===1&&rt.has(R)?(d&&d([R]),ve(new Map)):ve(new Map([[R,Z]]))}return}if(e.activeTool==="hand"&&be&&Ne){let R=be,j=R.getAttribute("data-pm");j||(j=Math.random().toString(36).substring(2,8),R.setAttribute("data-pm",j));let L=xo(R),Y=`[data-pm="${j}"]`,ne=Zn(R),N=Br(R),X=S.x-window.scrollX,oe=S.y-window.scrollY,Q=io,Be=window.getComputedStyle(R).justifyContent,je=0;if(Q){let St=ar(R).find(ht=>ht.axis===Ne);je=St?Ne==="column"?St.w:St.h:0}dt(R,"transition","none"),ie.current={isDragging:!0,hasMoved:!1,axis:Ne,startX:X,startY:oe,originalRow:Q?je:N.row,originalColumn:Q?je:N.column,element:R,elementInfo:{...ne,selector:Y},selector:Y,durableSelector:L,isAuto:Q,originalJustifyContent:Be,visualGap:je},At({axis:Ne,row:Q?je:N.row,column:Q?je:N.column});return}if(e.activeTool==="hand"&&de&&Je){let R=de,j=R.getAttribute("data-pm");j||(j=Math.random().toString(36).substring(2,8),R.setAttribute("data-pm",j));let L=`[data-pm="${j}"]`,Y=Zn(R),{fontSize:ne,lineHeight:N}=Li(R),X=ne>0?N/ne:1.2,oe=S.x-window.scrollX,Q=S.y-window.scrollY;dt(R,"transition","none");let Be=xo(R);te.current={isDragging:!0,property:Je,startX:oe,startY:Q,originalFontSize:ne,originalLineHeight:N,originalRatio:X,element:R,elementInfo:{...Y,selector:L},selector:L,durableSelector:Be},$e({property:Je,fontSize:ne,lineHeight:N});return}if(e.activeTool==="hand"&&Bt&&Wt){let R=Bt,j=R.getAttribute("data-pm");j||(j=Math.random().toString(36).substring(2,8),R.setAttribute("data-pm",j));let L=`[data-pm="${j}"]`,Y=xo(R),ne=Zn(R),N=Dr(R),X=R.getBoundingClientRect(),oe=Math.floor(X.height/2),Q=S.y-window.scrollY;dt(R,"transition","none"),dn.current={isDragging:!0,corner:Wt,startY:Q,original:N,maxRadius:oe,element:R,elementInfo:{...ne,selector:L},selector:L,durableSelector:Y},K({corner:Wt,radius:{...N}});return}if(e.activeTool==="hand"&&yt&&Mn){let R=yt,j=R.getAttribute("data-pm");j||(j=Math.random().toString(36).substring(2,8),R.setAttribute("data-pm",j));let L=`[data-pm="${j}"]`,Y=xo(R),ne=Zn(R),N=li(R),X=S.x-window.scrollX,oe=S.y-window.scrollY;dt(R,"transition","none"),Ut.current={isDragging:!0,side:Mn,startX:X,startY:oe,original:N,element:R,elementInfo:{...ne,selector:L},selector:L,durableSelector:Y},Vn({side:Mn,padding:{...N}});return}let y=es(S);if(y){let R=e.annotations.find(j=>j.id===y.annotationId);if(R&&R.type!=="text"&&(R.status??"pending")==="pending"){ur({annotationId:y.annotationId,handle:y.handle,startPoint:S,originalPoints:[...R.points],hasMoved:!1});return}}let I=ei(S);if(I&&I.points[0]){if(m&&nr(),I.type!=="text"?(to(I.id,$),I.color&&t({type:"SET_COLOR",payload:I.color})):$||qn(),c){let R=I.threadId||(I.groupId?e.annotations.find(j=>j.groupId===I.groupId&&j.threadId)?.threadId:void 0);R&&c(R)}Ue({annotation:I,startPoint:S,hasMoved:!1});return}if($||qn(),e.activeTool==="text"){m&&nr();let R=Math.random().toString(36).substring(2,9);O({id:R,point:S,text:"",fontSize:12,isNew:!0});return}f(!0),t({type:"START_PATH",payload:S})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,m,qt,st,yt,Mn,Bt,Wt,be,Ne,io,de,Je,Z,rt,b,d,p,c,ao,ei,es,t,to,qn,nr]),he=kn(h=>{let S=ao(h);if(e.activeTool==="inspector"&&e.isAnnotating){let $=S.x-window.scrollX,y=S.y-window.scrollY,I=Pr($,y),R=I&&$n(I)?null:I;R!==st&&(Le(R),Ye(R?Zn(R):null));return}if(e.activeTool==="model"&&e.isAnnotating){let $=S.x-window.scrollX,y=S.y-window.scrollY,I=Pr($,y);if(I!==Ae.current&&(Ae.current=I,ae.current=0),I){let R=fs(I,ae.current);He(R)}else He(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let $=S.x-window.scrollX,y=S.y-window.scrollY;$t.current={x:$,y},re({x:$,y});let I=vt.current.cmd,R=vt.current.shift;if(ie.current.isDragging){let L=ie.current,Y=L.element;if(!Y)return;if(!L.hasMoved){let oe=Math.abs($-L.startX),Q=Math.abs(y-L.startY);if(oe<=2&&Q<=2)return;L.hasMoved=!0,L.isAuto&&(dt(Y,"justify-content","normal"),dt(Y,"row-gap",`${L.visualGap}px`),dt(Y,"column-gap",`${L.visualGap}px`),Gn(!1))}let ne=L.axis,N=L.originalRow,X=L.originalColumn;if(ne==="column"){let oe=$-L.startX;X=L.originalColumn+oe,I||(N=L.originalRow+oe)}else{let oe=y-L.startY;N=L.originalRow+oe,I||(X=L.originalColumn+oe)}N=Math.max(0,N),X=Math.max(0,X),R&&(N=w(N),X=w(X)),N=Math.round(N),X=Math.round(X),dt(Y,"row-gap",`${N}px`),dt(Y,"column-gap",`${X}px`),At({axis:ne,row:N,column:X});return}if(dn.current.isDragging){let L=dn.current,Y=L.element;if(!Y)return;let ne=y-L.startY,N=L.corner,X=L.original,oe={...X};if(I){let Q=X[N]+ne;Q=Math.max(0,Math.min(L.maxRadius,Q)),R&&(Q=w(Q)),Q=Math.round(Q),oe[N]=Q}else{let Q=X[N]+ne;Q=Math.max(0,Math.min(L.maxRadius,Q)),R&&(Q=w(Q)),Q=Math.round(Q),oe={"top-left":Q,"top-right":Q,"bottom-right":Q,"bottom-left":Q}}dt(Y,"border-top-left-radius",`${oe["top-left"]}px`),dt(Y,"border-top-right-radius",`${oe["top-right"]}px`),dt(Y,"border-bottom-right-radius",`${oe["bottom-right"]}px`),dt(Y,"border-bottom-left-radius",`${oe["bottom-left"]}px`),K({corner:N,radius:oe});return}if(te.current.isDragging){let L=te.current,Y=L.element;if(!Y)return;let ne=L.property,N=L.originalFontSize,X=L.originalLineHeight,oe=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(ne==="font-size"){let Be=$-L.startX;N=L.originalFontSize+Be,N=Math.max(1,N)}else{let Be=y-L.startY;X=L.originalLineHeight+Be,X=Math.max(N,X)}if(R)if(ne==="font-size"){let Be=oe[0],je=Math.abs(N-Be);for(let mt of oe){let St=Math.abs(N-mt);St<je&&(Be=mt,je=St)}N=Be}else{let Be=N>0?X/N:1.2,je=Math.round(Be*2)/2;X=N*Math.max(1,je)}N=Math.round(N),X=Math.round(X*10)/10,dt(Y,"font-size",`${N}px`);let Q=N>0?Math.round(X/N*1e3)/1e3:1.2;dt(Y,"line-height",`${Q}`),$e({property:ne,fontSize:N,lineHeight:X});return}if(Ut.current.isDragging){let L=Ut.current,Y=L.element;if(!Y)return;let ne=L.side,N=L.original,X=N.top,oe=N.right,Q=N.bottom,Be=N.left;if(ne==="top"){let je=L.startY-y;X=N.top+je,I||(Q=N.bottom+je)}else if(ne==="bottom"){let je=y-L.startY;Q=N.bottom+je,I||(X=N.top+je)}else if(ne==="left"){let je=L.startX-$;Be=N.left+je,I||(oe=N.right+je)}else if(ne==="right"){let je=$-L.startX;oe=N.right+je,I||(Be=N.left+je)}X=Math.max(0,X),oe=Math.max(0,oe),Q=Math.max(0,Q),Be=Math.max(0,Be),R&&(X=w(X),oe=w(oe),Q=w(Q),Be=w(Be)),X=Math.round(X),oe=Math.round(oe),Q=Math.round(Q),Be=Math.round(Be),dt(Y,"padding",`${X}px ${oe}px ${Q}px ${Be}px`),Vn({side:ne,padding:{top:X,right:oe,bottom:Q,left:Be}});return}let j=Pr($,y);for(;j&&j.tagName==="A";)j=j.parentElement;{let Y=[];j&&Y.push(j),Bt&&Bt!==j&&Y.push(Bt);let ne=null,N=16,X=null;for(let oe of Y){let Q=oe.getBoundingClientRect(),Be=Dr(oe),je=[["top-left",Q.left,Q.top+Be["top-left"]],["top-right",Q.right,Q.top+Be["top-right"]],["bottom-right",Q.right,Q.bottom-Be["bottom-right"]],["bottom-left",Q.left,Q.bottom-Be["bottom-left"]]];for(let[mt,St,ht]of je){let Ot=Math.hypot($-St,y-ht);Ot<N&&(N=Ot,ne=mt,X=oe)}}if(ne&&X){Jn(X),k(ne),yt&&zn(null),Mn&&Ct(null),be&&We(null),Ne&&tt(null),Gn(!1),de&&we(null),Je&&ze(null);return}}Bt&&Jn(null),Wt&&k(null);{let L=[];j&&hs(j)&&L.push(j);let Y=j?.parentElement??null;for(;Y&&Y!==document.body&&L.length<3;)hs(Y)&&L.push(Y),Y=Y.parentElement;for(let ne of L){let X=ar(ne).find(oe=>$>=oe.x&&$<=oe.x+oe.w&&y>=oe.y&&y<=oe.y+oe.h);if(X){We(ne),tt(X.axis),Gn(ga(ne,X.axis)),yt&&zn(null),Mn&&Ct(null),de&&we(null),Je&&ze(null);return}}}be&&We(null),Ne&&tt(null),Gn(!1);{let Y=[];j&&Y.push(j),de&&de!==j&&Y.push(de);let ne=null,N=1/0,X=null;for(let oe of Y){if(!ma(oe))continue;let Q=ci(oe);if(!Q)continue;let Be=$>=Q.left&&$<=Q.right&&y>=Q.top&&y<=Q.bottom,je=[["font-size",Q.right,Q.top+Q.height/2],["line-height",Q.left+Q.width/2,Q.bottom]];for(let[mt,St,ht]of je){let Ot=Math.hypot($-St,y-ht);(Be||Ot<12)&&Ot<N&&(N=Ot,ne=mt,X=oe)}}ne&&X?(we(X),ze(ne)):(de&&we(null),Je&&ze(null))}if(j!==yt&&zn(j),j){let L=li(j),Y=j.getBoundingClientRect(),ne=H($,y,Y,L);Ct(ne)}else Ct(null);return}if(In){let{handle:$,originalPoints:y,hasMoved:I}=In,R=e.annotations.find(N=>N.id===In.annotationId);if(!R)return;let j="metaKey"in h,L=j&&(h.metaKey||h.ctrlKey),Y=j&&h.shiftKey,ne;if(R.type==="line"){let N=y[0],X=y[y.length-1];$==="start"?ne=[S,X]:ne=[N,S]}else if(R.type==="freehand"){let N=Math.min(...y.map(nt=>nt.x)),X=Math.max(...y.map(nt=>nt.x)),oe=Math.min(...y.map(nt=>nt.y)),Q=Math.max(...y.map(nt=>nt.y)),Be=(N+X)/2,je=(oe+Q)/2,mt=X-N||1,St=Q-oe||1,ht=mt/St,Ot=N,sn=X,Mt=oe,Se=Q;switch($){case"topLeft":Ot=S.x,Mt=S.y;break;case"topRight":sn=S.x,Mt=S.y;break;case"bottomLeft":Ot=S.x,Se=S.y;break;case"bottomRight":sn=S.x,Se=S.y;break}if(L)switch($){case"topLeft":sn=X+(N-Ot),Se=Q+(oe-Mt);break;case"topRight":Ot=N-(sn-X),Se=Q+(oe-Mt);break;case"bottomLeft":sn=X+(N-Ot),Mt=oe-(Se-Q);break;case"bottomRight":Ot=N-(sn-X),Mt=oe-(Se-Q);break}if(Y){let nt=sn-Ot,vn=Se-Mt;if(Math.abs(nt/vn)>ht){let Gt=Math.abs(vn)*ht*Math.sign(nt);$==="topLeft"||$==="bottomLeft"?Ot=sn-Gt:sn=Ot+Gt}else{let Gt=Math.abs(nt)/ht*Math.sign(vn);$==="topLeft"||$==="topRight"?Mt=Se-Gt:Se=Mt+Gt}}let at=sn-Ot||1,an=Se-Mt||1;ne=y.map(nt=>({x:Ot+(nt.x-N)/mt*at,y:Mt+(nt.y-oe)/St*an}))}else if(R.type==="circle"){let N=y[0],X=y[y.length-1],oe=Math.min(N.x,X.x),Q=Math.max(N.x,X.x),Be=Math.min(N.y,X.y),je=Math.max(N.y,X.y),mt=(oe+Q)/2,St=(Be+je)/2,ht=Q-oe,Ot=je-Be,sn=oe,Mt=Q,Se=Be,at=je;switch($){case"top":if(Se=S.y,L&&(at=St+(St-S.y)),Y){let nt=(at-Se)*(ht/Ot)/2;sn=mt-nt,Mt=mt+nt}break;case"bottom":if(at=S.y,L&&(Se=St-(S.y-St)),Y){let nt=(at-Se)*(ht/Ot)/2;sn=mt-nt,Mt=mt+nt}break;case"left":if(sn=S.x,L&&(Mt=mt+(mt-S.x)),Y){let nt=(Mt-sn)*(Ot/ht)/2;Se=St-nt,at=St+nt}break;case"right":if(Mt=S.x,L&&(sn=mt-(S.x-mt)),Y){let nt=(Mt-sn)*(Ot/ht)/2;Se=St-nt,at=St+nt}break}ne=[{x:sn,y:Se},{x:Mt,y:at}]}else{let N=y[0],X=y[y.length-1],oe=Math.min(N.x,X.x),Q=Math.max(N.x,X.x),Be=Math.min(N.y,X.y),je=Math.max(N.y,X.y),mt=(oe+Q)/2,St=(Be+je)/2,ht=Q-oe||1,Ot=je-Be||1,sn=ht/Ot,Mt=oe,Se=Q,at=Be,an=je;switch($){case"topLeft":Mt=S.x,at=S.y;break;case"topRight":Se=S.x,at=S.y;break;case"bottomLeft":Mt=S.x,an=S.y;break;case"bottomRight":Se=S.x,an=S.y;break}if(L)switch($){case"topLeft":Se=Q+(oe-Mt),an=je+(Be-at);break;case"topRight":Mt=oe-(Se-Q),an=je+(Be-at);break;case"bottomLeft":Se=Q+(oe-Mt),at=Be-(an-je);break;case"bottomRight":Mt=oe-(Se-Q),at=Be-(an-je);break}if(Y){let nt=Se-Mt,vn=an-at;if(Math.abs(nt/vn)>sn){let Gt=Math.abs(vn)*sn*Math.sign(nt);$==="topLeft"||$==="bottomLeft"?Mt=Se-Gt:Se=Mt+Gt}else{let Gt=Math.abs(nt)/sn*Math.sign(vn);$==="topLeft"||$==="topRight"?at=an-Gt:an=at+Gt}}ne=[{x:Mt,y:at},{x:Se,y:an}]}t({type:"RESIZE_ANNOTATION",payload:{id:In.annotationId,points:ne,saveUndo:!I}}),I||ur({...In,hasMoved:!0});return}if(ue&&(ue.annotation.status??"pending")==="pending"){let $=S.x-ue.startPoint.x,y=S.y-ue.startPoint.y;if((Math.abs($)>2||Math.abs(y)>2)&&!ue.hasMoved)Ue({...ue,hasMoved:!0,startPoint:S}),t({type:"MOVE_ANNOTATION",payload:{id:ue.annotation.id,delta:{x:$,y},saveUndo:!0}});else if(ue.hasMoved){let R=S.x-ue.startPoint.x,j=S.y-ue.startPoint.y;Ue({...ue,startPoint:S}),t({type:"MOVE_ANNOTATION",payload:{id:ue.annotation.id,delta:{x:R,y:j}}})}return}!D||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:S})},[D,e.isAnnotating,e.activeTool,ue,In,st,yt,Mn,Bt,Wt,be,Ne,de,Je,ao,t,w,H]),Pe=kn(h=>{if(te.current.isDragging){let y=te.current,I=y.element;if(I&&y.selector&&y.elementInfo&&it){I instanceof HTMLElement&&(I.style.removeProperty("font-size"),I.style.removeProperty("line-height"),I.style.removeProperty("transition"));let R=[];if(y.originalFontSize!==it.fontSize&&(dt(I,"font-size",`${it.fontSize}px`),R.push({property:"font-size",original:`${y.originalFontSize}px`,modified:`${it.fontSize}px`})),y.originalLineHeight!==it.lineHeight){let j=y.originalFontSize>0?Math.round(y.originalLineHeight/y.originalFontSize*1e3)/1e3:1.2,L=it.fontSize>0?Math.round(it.lineHeight/it.fontSize*1e3)/1e3:1.2;dt(I,"line-height",`${L}`),R.push({property:"line-height",original:`${j}`,modified:`${L}`})}R.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y.selector,durableSelector:y.durableSelector??void 0,element:y.elementInfo,changes:R}})}te.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},$e(null);return}if(ie.current.isDragging){let y=ie.current,I=y.element,R="button"in h&&h.button===2;if(!y.hasMoved&&!R&&I&&y.selector&&y.elementInfo){I instanceof HTMLElement&&I.style.removeProperty("transition");let j=["space-between","space-around","stretch","normal"],L=y.originalJustifyContent||"normal",Y=j.indexOf(L),ne=j[(Y+1)%j.length],N=[];ne==="normal"?(dt(I,"justify-content","normal"),N.push({property:"justify-content",original:y.originalJustifyContent,modified:"normal"})):ne==="stretch"?(dt(I,"justify-content",ne),dt(I,"row-gap","8px"),dt(I,"column-gap","8px"),N.push({property:"justify-content",original:y.originalJustifyContent||"normal",modified:ne}),y.originalRow!==8&&N.push({property:"row-gap",original:`${y.originalRow}px`,modified:"8px"}),y.originalColumn!==8&&N.push({property:"column-gap",original:`${y.originalColumn}px`,modified:"8px"})):(I instanceof HTMLElement&&(I.style.removeProperty("row-gap"),I.style.removeProperty("column-gap")),dt(I,"justify-content",ne),N.push({property:"justify-content",original:y.originalJustifyContent||"normal",modified:ne}),y.originalRow>0&&N.push({property:"row-gap",original:`${y.originalRow}px`,modified:"0px"}),y.originalColumn>0&&N.push({property:"column-gap",original:`${y.originalColumn}px`,modified:"0px"})),N.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y.selector,durableSelector:y.durableSelector??void 0,element:y.elementInfo,changes:N}})}else if(y.hasMoved&&I&&y.selector&&y.elementInfo&&Ze){I instanceof HTMLElement&&(I.style.removeProperty("row-gap"),I.style.removeProperty("column-gap"),I.style.removeProperty("transition"));let j=[];y.isAuto?(I instanceof HTMLElement&&I.style.removeProperty("justify-content"),dt(I,"justify-content","normal"),dt(I,"row-gap",`${Ze.row}px`),dt(I,"column-gap",`${Ze.column}px`),j.push({property:"justify-content",original:y.originalJustifyContent,modified:"normal"}),j.push({property:"row-gap",original:"0px",modified:`${Ze.row}px`}),j.push({property:"column-gap",original:"0px",modified:`${Ze.column}px`})):(y.originalRow!==Ze.row&&(dt(I,"row-gap",`${Ze.row}px`),j.push({property:"row-gap",original:`${y.originalRow}px`,modified:`${Ze.row}px`})),y.originalColumn!==Ze.column&&(dt(I,"column-gap",`${Ze.column}px`),j.push({property:"column-gap",original:`${y.originalColumn}px`,modified:`${Ze.column}px`}))),j.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y.selector,durableSelector:y.durableSelector??void 0,element:y.elementInfo,changes:j}})}ie.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},At(null);return}if(dn.current.isDragging){let y=dn.current,I=y.element;if(I&&y.selector&&y.elementInfo&&M){I instanceof HTMLElement&&(I.style.removeProperty("border-top-left-radius"),I.style.removeProperty("border-top-right-radius"),I.style.removeProperty("border-bottom-right-radius"),I.style.removeProperty("border-bottom-left-radius"),I.style.removeProperty("transition"));let R=["top-left","top-right","bottom-right","bottom-left"],j={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},L=[];for(let Y of R)y.original[Y]!==M.radius[Y]&&(dt(I,j[Y],`${M.radius[Y]}px`),L.push({property:j[Y],original:`${y.original[Y]}px`,modified:`${M.radius[Y]}px`}));L.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y.selector,durableSelector:y.durableSelector??void 0,element:y.elementInfo,changes:L}})}dn.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},K(null);return}if(Ut.current.isDragging){let y=Ut.current,I=y.element,R=y.selector,j=y.elementInfo;if(I&&R&&j&&Xt){let L=y.original,Y=Xt.padding;I instanceof HTMLElement&&(I.style.removeProperty("padding"),I.style.removeProperty("transition"));let ne=[],N=[{prop:"padding-top",origVal:L.top,newVal:Y.top},{prop:"padding-right",origVal:L.right,newVal:Y.right},{prop:"padding-bottom",origVal:L.bottom,newVal:Y.bottom},{prop:"padding-left",origVal:L.left,newVal:Y.left}];for(let{prop:X,origVal:oe,newVal:Q}of N)oe!==Q&&(dt(I,X,`${Q}px`),ne.push({property:X,original:`${oe}px`,modified:`${Q}px`}));ne.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:R,durableSelector:y.durableSelector??void 0,element:j,changes:ne}})}Ut.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},Vn(null);return}if(In){ur(null);return}if(ue){if(!ue.hasMoved&&ue.annotation.type==="text"&&(ue.annotation.status??"pending")==="pending"){let y=ao(h);O({id:ue.annotation.id,point:ue.annotation.points[0],text:ue.annotation.text||"",fontSize:ue.annotation.fontSize||12,isNew:!1,clickPoint:y,groupId:ue.annotation.groupId})}Ue(null);return}if(!D)return;let S=5;if(e.currentPath.length>=2){let y=e.currentPath[0],I=e.currentPath[e.currentPath.length-1],R=Math.abs(I.x-y.x),j=Math.abs(I.y-y.y);if((e.activeTool==="line"?Math.sqrt(R*R+j*j)<S:R<S&&j<S)&&["rectangle","circle","line"].includes(e.activeTool)){f(!1),t({type:"CANCEL_PATH"});return}}let $=ca(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let y=e.currentPath[0],I=e.currentPath[e.currentPath.length-1],R=Math.min(y.x,I.x),j=Math.max(y.y,I.y),L=e.strokeWidth/2,Y=Math.random().toString(36).substring(2,9);fe({point:{x:R-L+4,y:j+L+4},groupId:Y}),f(!1),t({type:"FINISH_PATH",payload:{groupId:Y,elements:$}});return}f(!1),t({type:"FINISH_PATH",payload:{elements:$}})},[D,ue,In,Xt,M,Ze,it,ao,t,e.activeTool,e.currentPath,e.strokeWidth]),Oe=kn(h=>{let S=h.target.value;Zr.current=h.target.selectionStart,O($=>$&&{...$,text:S})},[]),Qe=kn(h=>{h.key==="Escape"?O(null):h.key==="Enter"&&!h.shiftKey&&(h.preventDefault(),nr())},[nr]),Re=kn(h=>{if(!m)return;let S=h.clipboardData.items,$=[];for(let y=0;y<S.length;y++){let I=S[y];if(I.type.startsWith("image/")){let R=I.getAsFile();R&&$.push(R)}}$.length>0&&(h.preventDefault(),O(y=>y?{...y,images:[...y.images||[],...$]}:null))},[m]),qe=kn(h=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){h.preventDefault();let $=yt||be||Bt||de;if($&&!$n($)){let y=Zn($),I=xo($);t({type:"SELECT_ELEMENT",payload:{el:$,info:{...y,selector:I}}})}return}h.preventDefault();let S=E.current;S&&(P.current=!0,S.style.pointerEvents="none",setTimeout(()=>{P.current&&(P.current=!1,S.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,yt,be,Bt,de,t,$n,E]);Wn(()=>{if(!(e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement))return;let h=null,S=e.inspectedElement.info.selector,$=()=>{h=null;let L=Hn(S);if(L&&L!==e.inspectedElement?.el){let Y=Zn(L);t({type:"SELECT_ELEMENT",payload:{el:L,info:{...Y,selector:S}}});return}Lt(Y=>Y+1)},y=()=>{h===null&&(h=requestAnimationFrame($))},I=L=>{let Y=L.target,ne=Y instanceof Element?Y:Y.parentElement;return ne?!ne.closest('#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel], [data-devtools="panel"], [data-devtools="panel-wrapper"]'):!0},R=new MutationObserver(L=>{L.some(I)&&y()});R.observe(document.documentElement,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["class","style","href"],characterData:!0});let j=["vite:afterUpdate","vite:beforeFullReload","turbo:before-render","turbo:render"];return j.forEach(L=>window.addEventListener(L,y)),()=>{R.disconnect(),j.forEach(L=>window.removeEventListener(L,y)),h!==null&&cancelAnimationFrame(h)}},[e.activeTool,e.isAnnotating,e.inspectedElement,t]),Wn(()=>{let h=Me.filter(j=>j.linkedSelector);if(h.length===0)return;let S=null,$=document.createElement("canvas").getContext("2d"),y=()=>{let j=[];for(let L of h){let Y=document.querySelector(L.linkedSelector);if(!Y&&L.elements?.[0]?.selector&&L.linkedSelector.startsWith("[data-pm=")){try{Y=document.querySelector(L.elements[0].selector)}catch{}if(Y){let ht=L.linkedSelector.match(/data-pm="([^"]+)"/)?.[1];ht&&Y.setAttribute("data-pm",ht)}}if(!Y)continue;let ne=Y.getBoundingClientRect(),N=Ce.some(ht=>{try{return Y.matches(ht.selector)}catch{return!1}}),X=h.filter(ht=>ht.id!==L.id&&ht.timestamp<L.timestamp&&ht.linkedSelector===L.linkedSelector).length,oe=(N?1:0)+X,Q;if(L.text&&$){let ht=L.fontSize||12;$.font=`${ht}px ${An}`,Q=Math.max(...L.text.split(`
|
|
27
|
+
`).map(Ot=>$.measureText(Ot).width))}let Be=ne.top>=gr*(1+oe)?"top-left":"bottom-left",je=Rd(ne,Be,oe,A?.current,Q),mt=L.points[0],St=Be!==L.linkedAnchor;mt&&(St||Math.abs(je.x-mt.x)>1||Math.abs(je.y-mt.y)>1)&&j.push({id:L.id,point:je,linkedAnchor:St?Be:void 0})}j.length>0&&t({type:"UPDATE_LINKED_POSITIONS",payload:{updates:j}})},I=()=>{S&&cancelAnimationFrame(S),S=requestAnimationFrame(y)};y(),window.addEventListener("scroll",I,!0),window.addEventListener("resize",I,!0),window.addEventListener("load",I),document.fonts.ready.then(I);let R=new MutationObserver(I);return R.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",I,!0),window.removeEventListener("resize",I,!0),window.removeEventListener("load",I),R.disconnect(),S&&cancelAnimationFrame(S)}},[Me,t]);let wn=()=>{if(!e.isAnnotating)return"default";if(In){let{handle:h}=In;return h==="start"||h==="end"?"move":h==="top"||h==="bottom"?"ns-resize":h==="left"||h==="right"?"ew-resize":h==="topLeft"||h==="bottomRight"?"nwse-resize":"nesw-resize"}if(e.activeTool==="text")return"text";if(e.activeTool==="hand"){let h=Ze?.axis??Ne;if(h==="row")return"ns-resize";if(h==="column")return"ew-resize";if(M||Wt)return"ns-resize";let S=it?.property??Je;if(S==="font-size")return"ew-resize";if(S==="line-height")return"ns-resize";let $=Xt?.side??Mn;return $==="top"||$==="bottom"?"ns-resize":$==="left"||$==="right"?"ew-resize":"default"}return"crosshair"},kt={position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9998,pointerEvents:e.isAnnotating?"auto":"none",visibility:e.isAnnotating?"visible":"hidden",cursor:wn()},bo=kn(()=>{let h=E.current;if(!h||!m)return{width:100,height:12*1.4,isWrapped:!1};let S=h.getContext("2d");if(!S)return{width:100,height:m.fontSize*1.4,isWrapped:!1};S.font=`${m.fontSize}px ${An}`;let y=S.measureText("Type here...").width,I=m.text.split(`
|
|
28
|
+
`),R=I.length>0?Math.max(y,...I.map(N=>S.measureText(N||" ").width)):y,j=m.point.x-Rn.x,L=Pi(j);if(R>L){let N=kc(S,I,L),X=Math.min(L,Math.max(y,...N.map(Q=>S.measureText(Q).width))),oe=Math.max(1,N.length)*m.fontSize*1.4;return{width:X,height:oe,isWrapped:!0}}let ne=Math.max(1,I.length)*m.fontSize*1.4;return{width:R,height:ne,isWrapped:!1}},[m,E,Rn.x])(),Er=m?Math.max(1,m.text.split(`
|
|
29
|
+
`).length)*m.fontSize*1.4+8:0,or=bo.height+8,Qs=bo.isWrapped?or-Er:0,ea=m?m.point.y-4-Rn.y-Qs:0,ts=m?m.point.x-4-Rn.x:0,rr=bo.width+8,Ti=m?Ca(ea,or,Dt,ts,rr):0,ct=m?{position:"fixed",left:ts,top:Ti,zIndex:9999,width:rr,height:or,padding:4,fontSize:m.fontSize,fontFamily:An,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:bo.isWrapped?"pre-wrap":"pre",wordBreak:bo.isWrapped?"break-word":void 0}:{},bn=h=>h?e.annotations.find(S=>S.id===h)?.linkedSelector??null:null,_n=(h,S)=>{if(!S)return!1;try{return h.matches(S)}catch{return!1}},lo=[m?.linkedSelector,ge?.linkedSelector,bn(B),bn(xt),Rt].filter(Boolean),ns=h=>lo.some(S=>_n(h,S));return xi(Si,{children:[Et("canvas",{ref:se,id:"devtools-canvas",style:kt,onMouseDown:le,onMouseMove:he,onMouseUp:h=>Pe(h),onMouseLeave:h=>{Pe(h),Le(null),Ye(null)},onTouchStart:le,onTouchMove:he,onTouchEnd:h=>Pe(h),onContextMenu:qe}),m&&xi(Si,{children:[Et("style",{children:`
|
|
30
|
+
#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }
|
|
31
|
+
#devtools-text-input::selection {
|
|
32
|
+
background: #000000;
|
|
33
|
+
color: #ffffff;
|
|
34
|
+
}
|
|
35
|
+
`}),Et("textarea",{id:"devtools-text-input",ref:W,value:m.text,onChange:Oe,onKeyDown:Qe,onPaste:Re,onBlur:nr,placeholder:"Type here...",style:ct}),m.images&&m.images.length>0&&xi("div",{"data-devtools":!0,style:{position:"fixed",left:m.point.x-4-Rn.x,top:m.point.y-4-Rn.y-20,zIndex:1e4,fontSize:11,fontFamily:"system-ui, sans-serif",color:"#fff",backgroundColor:"rgba(0,0,0,0.7)",padding:"2px 6px",borderRadius:3,whiteSpace:"nowrap"},children:[m.images.length," image",m.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&Ce.length>0&&Et(Jc,{styleModifications:Ce,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(Me.map(h=>h.groupId||h.id)).size,dispatch:t,inFlightSelectors:a,toolbarRef:A,onHoverSelector:Dn}),e.activeTool==="hand"&&e.isAnnotating&&Ce.length>0&&Et(Uc,{styleModifications:Ce,accentColor:e.activeColor}),e.isAnnotating&&Et(Pc,{annotations:Me,supersededAnnotations:yn,inFlightIds:o,activeIds:r,queuePositions:i,scrollX:Rn.x,scrollY:Rn.y,annotationGroupMap:no,onViewThread:c,onSelectAnnotation:to,onHoverAnnotation:zt,canvasRef:E,toolbarRef:A}),e.isAnnotating&&s&&s.size>0&&Et(La,{inFlightSelectorColors:s}),e.isAnnotating&&Yn&&Et(La,{inFlightSelectorColors:Yn,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(Ze?ie.current.element:be)&&Et(Ha,{element:Ze?ie.current.element:be,gap:Ze?{row:Ze.row,column:Ze.column}:Br(be),accentColor:e.activeColor,hoveredAxis:Ne,draggingAxis:Ze?.axis??null,cursorViewport:cn,isAutoGap:io,refreshKey:hn}),e.activeTool==="hand"&&e.isAnnotating&>&&Et(Td,{element:gt.target,modifier:gt.modifier,accentColor:e.activeColor,refreshKey:hn}),e.activeTool==="hand"&&e.isAnnotating&&!gt&&(M?dn.current.element:Bt)&&Et(Hc,{element:M?dn.current.element:Bt,radius:M?.radius??Dr(Bt),accentColor:e.activeColor,hoveredCorner:Wt,draggingCorner:M?.corner??null,cursorViewport:cn}),e.activeTool==="hand"&&e.isAnnotating&&!gt&&(it?te.current.element:de)&&Et(Md,{element:it?te.current.element:de,fontSize:it?.fontSize??Li(de).fontSize,lineHeight:it?.lineHeight??Li(de).lineHeight,accentColor:e.activeColor,hoveredProperty:Je,draggingProperty:it?.property??null,cursorViewport:cn}),e.activeTool==="hand"&&e.isAnnotating&&!gt&&(Xt?Ut.current.element:yt)&&Et(Wa,{element:Xt?Ut.current.element:yt,padding:Xt?.padding??li(yt),accentColor:e.activeColor,hoveredSide:Mn,draggingSide:Xt?.side??null,cursorViewport:cn,refreshKey:it?it.fontSize+it.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&Et(Si,{children:st&&!e.inspectedElement&&(()=>{if(ns(st))return null;let h=!!ge||!!m?.linkedSelector||Me.some(S=>{if(!S.linkedSelector)return!1;try{return st.matches(S.linkedSelector)}catch{return!1}});return Et(Vo,{element:st,isSelected:!1,elementInfo:Ee,color:e.activeColor,hideTooltip:h})})()}),(m?.linkedSelector||ge?.linkedSelector)&&(()=>{let h=m?.linkedSelector||ge?.linkedSelector;if(!h)return null;let S=null;try{S=document.querySelector(h)}catch{}return S?Et(Vo,{element:S,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),B&&(()=>{let h=e.annotations.find(y=>y.id===B);if(!h?.linkedSelector)return null;let S=null;try{S=document.querySelector(h.linkedSelector)}catch{}if(!S)return null;let $=!!(o&&o.has(h.id));return Et(Vo,{element:S,isSelected:!$,color:h.color,hideTooltip:!0})})(),xt&&(()=>{let h=e.annotations.find(I=>I.id===xt);if(!h?.linkedSelector)return null;let S=null;try{S=document.querySelector(h.linkedSelector)}catch{}if(!S)return null;let $=h.groupId?e.annotations.filter(I=>I.groupId===h.groupId):[h],y=!!(o&&$.some(I=>o.has(I.id)));return Et(Vo,{element:S,isSelected:!y,color:h.color,hideTooltip:!0})})(),Rt&&(()=>{let h=null;try{h=document.querySelector(Rt)}catch{}if(!h)return null;let S=!!(a&&a.has(Rt));return Et(Vo,{element:h,isSelected:!S,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&rt.size>0&&[...rt.entries()].map(([h,S])=>Et(Vo,{element:S.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:S.rootElement.tagName.toLowerCase(),reactComponent:h},color:"#8b5cf6"},h)),e.activeTool==="model"&&e.isAnnotating&&tr&&Et(Vo,{element:tr.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:tr.rootElement.tagName.toLowerCase(),reactComponent:tr.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&U.length>0&&U.map((h,S)=>Et("div",{style:{position:"absolute",left:h.x,top:h.y,width:h.width,height:h.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:h.direction==="vertical"?xi(Si,{children:[Et("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),Et("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),Et("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),Et("div",{style:{position:"absolute",left:"calc(50% + 6px)",top:h.height<16?-6:"50%",transform:h.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(h.height)})]}):xi(Si,{children:[Et("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),Et("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),Et("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),Et("div",{style:{position:"absolute",left:h.width<30?0:"50%",top:(h.width<30,void 0),bottom:"calc(50% + 4px)",transform:h.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(h.width)})]})},S)),e.activeTool==="model"&&e.isAnnotating&&Z&&Et(Vo,{element:Z.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:Z.rootElement.tagName.toLowerCase(),reactComponent:Z.name},color:b?.has(Z.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&xi(Si,{children:[(()=>{let h=new Set(Me.map(L=>L.groupId||L.id)).size,S=e.inspectedElement.info.selector,$=Ce.findIndex(L=>L.selector===S),y=$>=0?h+$+1:h+Ce.length+1,I=Ce.find(L=>L.selector===S),R=I?.changes.length??0,j=!!I?.captured;return Et(Vo,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:j?"#999999":e.activeColor,annotationNumber:y,changeCount:R})})(),(Nt==="padding"||Nt==="padding-x"||Nt==="padding-y")&&Et(Wa,{element:e.inspectedElement.el,padding:li(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:Nt==="padding-x"?"left":Nt==="padding-y"?"top":null,draggingSide:null}),Nt==="gap"&&Et(Ha,{element:e.inspectedElement.el,gap:Br(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),(Nt==="width"||Nt==="height")&&Et($c,{element:e.inspectedElement.el,axis:Nt,accentColor:e.activeColor,avoidElement:Kn.current}),Et(Ed,{element:e.inspectedElement.el,elementInfo:e.inspectedElement.info,selector:e.inspectedElement.info.selector,styleModifications:Ce,dispatch:t,onClose:()=>t({type:"SELECT_ELEMENT",payload:null}),onHover:mn,accentColor:e.activeColor,toolbarRef:A,panelWrapperRef:Kn,refreshKey:bt})]})]})}import{useCallback as wo,useEffect as Fn,useMemo as Yr,useRef as nn,useState as Ur}from"react";import{Check as vh,Circle as xh,Component as Sh,Fingerprint as wh,Hand as Ch,MessageCircle as Eh,Pen as kh,RefreshCw as Th,Slash as Mh,Square as Ih,Trash2 as Rh,Type as Lh}from"lucide-react";import{useEffect as Ad,useRef as Pd}from"react";function Bd(e,t,n,o,r){let i=Pd(0),a=Pd(t.annotations);Ad(()=>{if(!n.current||!e)return;a.current=t.annotations;let s=t.annotations.length;s>0&&(s>=i.current||!o)&&(localStorage.setItem(r.annotations,JSON.stringify(t.annotations)),i.current=s)},[t.annotations,e,o,n,r]),Ad(()=>{n.current&&(localStorage.setItem(r.expanded,String(e)),e&&(localStorage.setItem(r.styleMods,JSON.stringify(t.styleModifications)),localStorage.setItem(r.spacingChanges,JSON.stringify(t.spacingTokenChanges)),localStorage.setItem(r.tool,t.activeTool),localStorage.setItem(r.color,t.activeColor),localStorage.setItem(r.stroke,String(t.strokeWidth)),t.inspectedElement?localStorage.setItem(r.inspected,JSON.stringify({selector:t.inspectedElement.info.selector,info:t.inspectedElement.info})):localStorage.removeItem(r.inspected)))},[e,t.styleModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,n,r])}import{useCallback as Qn,useEffect as Vr,useMemo as al,useRef as Yi,useState as Xo}from"react";import{Fragment as xm,jsx as Zt,jsxs as Bo}from"react/jsx-runtime";var em={width:340,backgroundColor:"#eaeaea",...gi,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"},tm=(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"}),nm=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},_s={...ll,borderColor:"#111827",background:"#111827",color:"#ffffff"},om={..._s,cursor:"default",opacity:.55},cl={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"},rm={...cl,appearance:"none",resize:"none",overflow:"hidden",outline:"none"},Hd={...cl,fontWeight:700,fontSize:11,lineHeight:1.35},im={...Hd,appearance:"none",resize:"none",overflow:"hidden",outline:"none"},Dd={display:"grid",gridTemplateColumns:"12px minmax(0, 1fr)",columnGap:4,alignItems:"start",marginBottom:5},sm={pass:"#2f855a",fail:"#c53030",needs_review:"#6b7280"},am={pass:"\u2611",fail:"\u2612",needs_review:"\u25A1"},lm=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"Eval",cm=[{id:"pending",label:"Pending"},{id:"approved",label:"Approved"},{id:"rejected",label:"Rejected"}],_d="popmelt-eval-active-status",dm=e=>e==="pending"||e==="approved"||e==="rejected";function Fd({bridgeUrl:e,refreshKey:t,onMouseEnter:n,onMouseLeave:o,onSynthesize:r,isSynthesizing:i,onRunEval:a,onViewRunThread:s,runningEvalIds:l=[],snapPosition:c="bottom-right"}){let u=Yi(null),d=i||!r,[p,g]=Xo({version:1,updatedAt:0,cases:[]}),[b,C]=Xo(!0),[v,x]=Xo(()=>{if(typeof window>"u")return"pending";try{let P=window.localStorage.getItem(_d);return dm(P)?P:"pending"}catch{return"pending"}});Vr(()=>{let P=u.current;if(!P)return;let D=n,f=o;return D&&P.addEventListener("mouseenter",D),f&&P.addEventListener("mouseleave",f),()=>{D&&P.removeEventListener("mouseenter",D),f&&P.removeEventListener("mouseleave",f)}},[n,o]);let B=Qn(()=>{e&&(C(!0),Ol(e).then(P=>{g(P),C(!1)}).catch(()=>C(!1)))},[e]);Vr(()=>{B()},[B,t]),Vr(()=>{try{window.localStorage.setItem(_d,v)}catch{}},[v]);let T=Qn((P,D)=>{e&&(g(f=>({...f,cases:f.cases.map(m=>m.id===P?{...m,status:D}:m)})),Hl(P,D,e).then(f=>{f||B()}).catch(B))},[e,B]),A=Qn((P,D)=>{if(!e)return;let f=D.map(m=>m.trim()).filter(Boolean);f.length!==0&&(g(m=>({...m,cases:m.cases.map(O=>O.id===P?{...O,assertions:f}:O)})),rs(P,{assertions:f},e).then(m=>{m||B()}).catch(B))},[e,B]),E=Qn((P,D)=>{if(!e)return;let f=D.trim();f&&(g(m=>({...m,cases:m.cases.map(O=>O.id===P?{...O,title:f}:O)})),rs(P,{title:f},e).then(m=>{m||B()}).catch(B))},[e,B]),V=al(()=>{let P=p.cases.filter(m=>m.status==="pending"),D=p.cases.filter(m=>m.status==="approved"),f=p.cases.filter(m=>m.status==="rejected");return{pending:P,approved:D,rejected:f}},[p.cases]),q=V[v],se=al(()=>{let P=new Map,D=[...p.runs??[]].sort((f,m)=>m.completedAt-f.completedAt);for(let f of D)P.has(f.evalId)||P.set(f.evalId,f);return P},[p.runs]);return Bo("div",{ref:u,style:{...em,...ds(c)},children:[Bo("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[Zt("span",{children:"Evals"}),Zt("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"E"})]}),Zt("button",{type:"button",disabled:d,onClick:r,style:tm(d,i),children:i?"Synthesizing...":"Synthesize"}),Zt("div",{style:{display:"flex",gap:12,marginTop:8},children:cm.map(P=>Zt(gm,{active:v===P.id,label:`${P.label} ${V[P.id].length}`,onClick:()=>x(P.id)},P.id))}),Zt("div",{style:{marginTop:10,flex:1,minHeight:0,overflowY:"auto",display:"flex",flexDirection:"column",gap:10},children:b?Zt("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):p.cases.length===0?Zt("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.5},children:"No inferred evals yet."}):q.length===0?Bo("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.5},children:["No ",v," evals."]}):Zt(um,{cases:q,latestRunsByEvalId:se,runningEvalIds:l,onStatus:T,onRun:a,onViewRunThread:s,onTitleChange:E,onAssertionsChange:A})})]})}function um({cases:e,latestRunsByEvalId:t,runningEvalIds:n,onStatus:o,onRun:r,onViewRunThread:i,onTitleChange:a,onAssertionsChange:s}){return Zt("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 Bo("div",{style:{border:"1px solid rgba(0,0,0,0.08)",background:"rgba(255,255,255,0.35)",padding:8},children:[Bo("div",{children:[Zt(mm,{value:l.title,onCommit:g=>a(l.id,g)}),Bo("div",{style:{color:"#9ca3af",fontSize:10,marginTop:2},children:[lm(l.category),u]})]}),Zt("div",{style:{marginTop:6,color:"#374151",fontSize:11,lineHeight:1.25},children:Zt(vm,{assertions:l.assertions,latestRun:d,onChange:g=>s(l.id,g)})}),Zt(fm,{item:l,latestRun:d,isRunning:p,onStatus:o,onRun:r,onViewRunThread:i})]},l.id)})})}function pm(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 fm({item:e,latestRun:t,isRunning:n,onStatus:o,onRun:r,onViewRunThread:i}){if(e.status==="pending")return Bo("div",{style:{display:"flex",gap:6,marginTop:8},children:[Zt("button",{type:"button",style:ll,onClick:()=>o(e.id,"rejected"),children:"Reject"}),Zt("button",{type:"button",style:_s,onClick:()=>o(e.id,"approved"),children:"Accept"})]});if(e.status==="approved"){let a=n||!r;return Bo("div",{style:{display:"flex",gap:6,marginTop:8},children:[t?.threadId&&i&&Zt("button",{type:"button",style:ll,onClick:()=>i(t.threadId),children:pm(t)}),Zt("button",{type:"button",disabled:a,style:a?om:_s,onClick:()=>r?.(e),children:n?"Running...":"Run"})]})}return Zt("div",{style:{display:"flex",gap:6,marginTop:8},children:Zt("button",{type:"button",style:_s,onClick:()=>o(e.id,"approved"),children:"Approve"})})}function gm({active:e,label:t,onClick:n}){let[o,r]=Xo(!1);return Zt("button",{type:"button",style:nm(e||o),onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),onClick:n,children:t})}function mm({value:e,onCommit:t}){let[n,o]=Xo(!1),[r,i]=Xo(e),a=Yi(null);Vr(()=>{n||i(e)},[n,e]),Vr(()=>{if(!n)return;let u=a.current;u&&(u.focus(),u.select(),u.style.height="auto",u.style.height=`${u.scrollHeight}px`)},[n]);let s=Qn(()=>{let u=r.trim();o(!1),u&&u!==e?t(u):i(e)},[r,t,e]),l=Qn(()=>{i(e),o(!1)},[e]),c=Qn(u=>{u.key==="Enter"?(u.preventDefault(),s()):u.key==="Escape"&&(u.preventDefault(),l())},[l,s]);return n?Zt("textarea",{ref:a,rows:1,value:r,onChange:u=>{i(u.target.value),u.currentTarget.style.height="auto",u.currentTarget.style.height=`${u.currentTarget.scrollHeight}px`},onBlur:s,onKeyDown:c,style:im}):Zt("button",{type:"button",onClick:()=>o(!0),style:Hd,children:e})}function hm(e){return e.map(t=>t.trim()).filter(Boolean)}function ym(e,t){return e.length===t.length&&e.every((n,o)=>n===t[o])}function Od(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}function bm(e){let t=window.getComputedStyle(e),n=Number.parseFloat(t.lineHeight)||Number.parseFloat(t.fontSize)*1.2||16,o=document.createElement("div"),r=document.createElement("span"),i=document.createElement("span");o.style.position="fixed",o.style.visibility="hidden",o.style.pointerEvents="none",o.style.left="-9999px",o.style.top="0",o.style.width=`${e.clientWidth}px`,o.style.boxSizing=t.boxSizing,o.style.font=t.font,o.style.letterSpacing=t.letterSpacing,o.style.lineHeight=t.lineHeight,o.style.padding=t.padding,o.style.border=t.border,o.style.whiteSpace="pre-wrap",o.style.overflowWrap="break-word",o.style.wordBreak=t.wordBreak;let a=e.selectionStart??0;o.textContent=e.value.slice(0,a),r.textContent="\u200B",o.appendChild(r),o.appendChild(document.createTextNode(e.value.slice(a)||"\u200B")),i.textContent="\u200B",o.appendChild(i),document.body.appendChild(o);let s=Math.max(0,Math.round(r.offsetTop/n)),l=Math.max(0,Math.round(i.offsetTop/n));return o.remove(),{lineIndex:s,lastLineIndex:l}}function vm({assertions:e,latestRun:t,onChange:n}){let[o,r]=Xo(null),[i,a]=Xo(e),[s,l]=Xo(null),[c,u]=Xo(0),d=Yi([]),p=Yi(null),g=Yi(!1),b=o!==null,C=b?i.length+1:i.length,v=al(()=>{let D=new Map;for(let f of t?.assertionResults??[])D.set(f.assertion.trim(),f);return D},[t]);Vr(()=>{b||a(e)},[e,b]),Vr(()=>{if(s===null)return;let D=requestAnimationFrame(()=>{let f=d.current[s];if(f){if(f.focus(),p.current==="select"&&f.value)f.select();else if(p.current==="start")f.setSelectionRange(0,0);else if(p.current==="end"){let m=f.value.length;f.setSelectionRange(m,m)}p.current=null,Od(f)}});return()=>cancelAnimationFrame(D)},[s,c,C]);let x=Qn((D,f=null)=>{p.current=f,r(D),l(D),u(m=>m+1)},[]),B=Qn(D=>{let f=hm(D);return f.length===0?(a(e),e):(a(f),ym(f,e)||n(f),f)},[e,n]),T=Qn(D=>{x(D,"select")},[x]),A=Qn((D,f)=>{a(m=>{let O=[...m];if(D>=O.length){if(f.length===0)return O;O.push(f)}else O[D]=f;return O})},[]),E=Qn((D,f)=>{let m=[...i],pe=(D<m.length?m[D]??"":"").trim();if(D>=m.length){let fe=f?.focusPlaceholder?m.length:f?.focusIndex;fe!==void 0?x(fe,f?.focusMode):(r(null),l(null));return}if(!pe){if(f?.deleteEmpty){m.splice(D,1);let fe=B(m),ge=f.focusPlaceholder?fe.length:f.focusIndex;if(ge!==void 0){let Ge=Math.min(ge,fe.length);x(Ge)}else r(null),l(null)}else m[D]=e[D]??"",a(m),f?.focusIndex!==void 0?x(f.focusIndex,f.focusMode):(r(null),l(null));return}m[D]=pe;let ye=B(m),ce=f?.focusPlaceholder?ye.length:f?.focusIndex;if(ce!==void 0){let fe=Math.min(ce,ye.length);x(fe,f?.focusMode)}else r(null),l(null)},[e,i,B,x]),V=Qn(()=>{a(e),r(null),l(null)},[e]),q=Qn((D,f)=>{let m=f.currentTarget.value,O=f.currentTarget.selectionStart,pe=f.currentTarget.selectionEnd,ye=O===pe;if((f.key==="ArrowUp"||f.key==="ArrowDown")&&ye){let{lineIndex:ce,lastLineIndex:fe}=bm(f.currentTarget);if(f.key==="ArrowUp"&&ce===0&&D>0){f.preventDefault(),g.current=!0,E(D,{focusIndex:D-1,focusMode:"end",deleteEmpty:!1});return}if(f.key==="ArrowDown"&&ce===fe&&D<C-1){f.preventDefault(),g.current=!0,E(D,{focusIndex:D+1,focusMode:"start",deleteEmpty:!1});return}}if(f.key==="Backspace"&&m.length===0){f.preventDefault(),g.current=!0;let ce=[...i],fe=D-1;if(D<ce.length){ce.splice(D,1);let ge=B(ce);if(fe>=0){let Ge=Math.min(fe,ge.length-1);x(Ge,"end")}else r(null),l(null)}else fe>=0&&x(fe,"end");return}f.key==="Enter"?(f.preventDefault(),E(D,{focusPlaceholder:f.metaKey||f.ctrlKey,deleteEmpty:!0})):f.key==="Escape"&&(f.preventDefault(),V())},[V,E,i,B,x,C]),se=Qn((D,f)=>{if(g.current){g.current=!1;return}let m=d.current.findIndex(O=>O===f.relatedTarget);E(D,{deleteEmpty:!1,focusIndex:m>=0?m:void 0})},[E]),P=Qn((D,f)=>{f.preventDefault(),o!==null?(g.current=!0,E(o,{focusIndex:D,focusMode:"select",deleteEmpty:!1})):x(D,"select")},[E,o,x]);return Bo(xm,{children:[Zt("style",{children:`
|
|
8
36
|
.popmelt-eval-assertion-input::placeholder {
|
|
9
37
|
color: #aaa;
|
|
10
38
|
opacity: 1;
|
|
11
39
|
}
|
|
12
|
-
`}),Array.from({length:C},(
|
|
13
|
-
${t}`:`${e}: ${t}`,style:{width:28,height:28,backgroundColor:t,outline:"1px solid rgba(0,0,0,0.08)",outlineOffset:-1,position:"relative"},children:n&&$e(sg,{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 Kc({entries:e,references:t}){let n=[],o=[];for(let i of e)Vc(i[1])?n.push(i):o.push(i);let r=Wc(n);return an(xr,{children:[r.map(([i,a])=>an("div",{style:{marginBottom:4},children:[an("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[i,a.length>1?` (${a.length})`:""]}),$e("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:a.map(([s,l])=>$e(hg,{varName:s,value:l,reference:t[s]},s))})]},i)),o.length>0&&$e(ss,{entries:o})]})}var rs=[0,1,2,4,8,12,16,20,24,28,32];function yg(e){if(e<=32){let t=rs[0],n=Math.abs(e-t);for(let o=1;o<rs.length;o++){let r=Math.abs(e-rs[o]);r<n&&(t=rs[o],n=r)}return t}return Math.round(e/8)*8}function bg({label:e,value:t,px:n,tokenPath:o,rawToken:r,onHover:i,onModify:a,onDelete:s}){let[l,c]=Yn(!1),[d,u]=Yn(null),p=vr(!1),f=vr(0),v=vr(0),C=vr([]),x=d!==null?d:n,I=d!==null?`${d}px`:t,B=d!==null,T=is(w=>{w.preventDefault(),p.current=!0,f.current=w.clientX,v.current=n;let z=_i(r);C.current=As(z);let X=E=>{let L=E.clientX-f.current,g=Math.max(0,Math.round(v.current+L));E.shiftKey&&(g=yg(g));for(let m of C.current)m.element.style.setProperty(m.property,g+"px","important");u(g),i?.({name:e,px:g,token:z})},j=()=>{window.removeEventListener("mousemove",X),window.removeEventListener("mouseup",j),document.body.style.cursor="",p.current=!1,u(E=>{if(E!==null&&E!==n&&a){let L=_i(r),g=L.bindings&&L.bindings.length>0,m;if(g){let ue=Ps(L.bindings,v.current,E);m=JSON.stringify({...L,value:`${E}px`,bindings:ue})}else{let ue=Ml(C.current,v.current),ke=Rl(C.current);if(ue.length>0){let Me=Ps(ue,v.current,E);m=JSON.stringify({value:`${E}px`,property:ke,bindings:Me})}else m=`${E}px`}let $=typeof r=="string"?r:JSON.stringify(r),ge=C.current.map(ue=>({selector:Jn(ue.element),property:ue.property})),Ie=Ll(C.current,v.current,E);a({tokenPath:o,originalValue:$,currentValue:m,targets:ge,originalPx:v.current,currentPx:E},{id:Math.random().toString(36).substring(2,9),tokenPath:o,tokenName:e,originalPx:v.current,newPx:E,affectedElements:Ie})}return E})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",X),window.addEventListener("mouseup",j)},[n,e,o,r,i,a]),R=_i(r);return an("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:R}))},onMouseLeave:()=>{p.current||(c(!1),i?.(null))},onMouseDown:T,children:[$e("span",{style:{color:l||B?"#FF0000":"#9ca3af"},children:e}),an("span",{style:{display:"flex",alignItems:"center",gap:4},children:[$e("span",{style:{color:l||B?"#FF0000":"#6b7280",fontWeight:600},children:I}),s&&l&&!B&&$e("button",{type:"button",title:"Remove token",onMouseDown:w=>{w.stopPropagation();let z=typeof r=="string"?r:JSON.stringify(r);s(o,z)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:w=>{w.currentTarget.style.color="#FF0000"},onMouseLeave:w=>{w.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function vg({entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}){let a=[],s=[];for(let l of e){let c=pg(l[1]);c!==null?a.push([l[0],l[1],c]):s.push(l)}return an(xr,{children:[a.length>0&&$e("div",{style:{display:"flex",flexDirection:"column",gap:2},children:a.map(([l,c,d])=>{let u=l.split(".").pop(),p=n?xg(n,l):c,f=p&&typeof p=="object"&&"value"in p?p:c;return $e(bg,{label:u,value:c,px:d,tokenPath:`tokens.${t}.${l}`,rawToken:f,onHover:o,onModify:r,onDelete:i},l)})}),s.length>0&&$e(ss,{entries:s})]})}function xg(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 ss({entries:e}){return $e("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>an("div",{style:{fontSize:11},children:[$e("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),$e("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function Sg({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:o,onModifyToken:r,onDeleteToken:i}){let a=fg(e);return a==="colors"?$e(Kc,{entries:e}):a==="spacing"?$e(vg,{entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}):$e(ss,{entries:e})}function wg(e){let t=e.toLowerCase(),n=null,o=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(i){return i.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),r=o.currentNode;for(;r=o.nextNode();){let i=r,a=Object.keys(i).find(l=>l.startsWith("__reactFiber$")||l.startsWith("__reactInternalInstance$"));if(!a)continue;let s=i[a];for(;s;){let l=s.type,c=typeof l=="function"||typeof l=="object"?l?.displayName||l?.name:null;if(typeof c=="string"){let d=c.toLowerCase();if(d===t){let u={...s.memoizedProps};return delete u.ref,{type:l,props:u}}if(!n){if(d.length>=4&&t.includes(d)){let u={...s.memoizedProps};delete u.ref,n={type:l,props:u}}else if(t.length>=4&&d.includes(t)){let u={...s.memoizedProps};delete u.ref,n={type:l,props:u}}}}s=s.return}}return n}var ka=class extends rg{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}},Xc="popmelt-principles-collapsed";function Cg(){try{let e=localStorage.getItem(Xc);if(e)return new Set(JSON.parse(e))}catch{}return new Set}function Eg(e){try{localStorage.setItem(Xc,JSON.stringify([...e]))}catch{}}function kg({id:e,label:t,count:n,children:o,collapsed:r,onToggle:i}){return an("div",{style:{marginBottom:14},children:[an("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:[$e("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:r?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,$e("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!r&&o]})}var Tg={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},Jc=["colors","fonts","typeScale","spacing","radii","shadows","other"];function Ig(){let[e,t]=Yn(null),[n,o]=Yn(Cg);tr(()=>{t(jc())},[]);let r=is(a=>{o(s=>{let l=new Set(s);return l.has(a)?l.delete(a):l.add(a),Eg(l),l})},[]);return e?Jc.some(a=>e[a].length>0)?$e(xr,{children:Jc.map(a=>{let s=e[a];return s.length===0?null:$e(kg,{id:a,label:Tg[a],count:s.length,collapsed:n.has(a),onToggle:r,children:a==="colors"?$e(Kc,{entries:s,references:e.references}):$e(ss,{entries:s})},a)})}):$e("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function Mg({rules:e,onSynthesize:t,isSynthesizing:n}){if(!e||e.length===0)return $e("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."});if(!e.some(i=>typeof i=="object"&&i!==null&&"scope"in i))return $e(xr,{children:e.map((i,a)=>an("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[an("span",{style:{color:"#9ca3af",flexShrink:0},children:[a+1,"."]}),$e("span",{children:typeof i=="string"?i:i.text})]},a))});let r=new Map;for(let i of e)if(typeof i=="string")r.has("general")||r.set("general",[]),r.get("general").push({id:"",text:i});else{let a=i.scope||"general";r.has(a)||r.set(a,[]),r.get(a).push({id:i.id,text:i.text})}return an(xr,{children:[t&&$e("button",{type:"button",disabled:n,onClick:t,style:{width:"100%",border:"1px solid rgba(0,0,0,0.12)",background:n?"rgba(0,0,0,0.04)":"rgba(0,0,0,0.02)",cursor:n?"default":"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"5px 8px",marginBottom:10,color:n?"#9ca3af":"#6b7280"},children:n?"Synthesizing\u2026":"Synthesize"}),Array.from(r.entries()).map(([i,a])=>an("div",{style:{marginBottom:10},children:[$e("div",{style:{fontWeight:700,fontSize:10,color:"#6b7280",letterSpacing:"0.05em",textTransform:"uppercase",marginBottom:4},children:i}),a.map((s,l)=>an("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4,fontSize:11},children:[$e("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2022"}),$e("span",{children:s.text})]},s.id||l))]},i))]})}function Rg({name:e,value:t,selected:n,highlighted:o,onRemove:r,onHover:i}){let[a,s]=Yn(!1),[l,c]=Yn(!1),d=vr(null),u=vr(0),[p,f]=Yn(0),[v,C]=Yn(0),x=Yc(t),I=x.find(([E])=>E==="description")?.[1];tr(()=>{if(!l&&!o){f(0),C(0),u.current=0;return}let E=Pr(e);f(E.length)},[l,o,e]),tr(()=>{n&&d.current&&d.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let B=n||o||l,T=n?"139,92,246":"34,197,94",R=n?"#8b5cf6":"#22c55e",w=B?`rgba(${T},0.06)`:void 0,z=B?`inset 0 0 0 1.5px rgba(${T},0.35)`:void 0,X=o||l,j=is(()=>{let E=Pr(e);if(E.length===0)return;let L=u.current%E.length;E[L].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),C(L),u.current=L+1,i?.({name:e,instanceIndex:L})},[e,i]);return an("div",{ref:d,onClick:j,onMouseEnter:()=>{c(!0),i?.({name:e,instanceIndex:0})},onMouseLeave:()=>{c(!1),i?.(null)},style:{marginBottom:8,background:w,padding:6,boxShadow:z,cursor:"pointer"},children:[an("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[an("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[$e("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:X?R:"transparent",color:X?"#fff":"#6b7280"},children:e}),X&&p>1&&an("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[v+1,"/",p]})]}),r&&l&&$e("button",{type:"button",title:"Remove from model",onClick:E=>{E.stopPropagation(),r(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:E=>{E.currentTarget.style.color="#FF0000"},onMouseLeave:E=>{E.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),I&&$e("div",{style:{fontSize:11,color:X?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:I}),a?$e(Sg,{entries:x.filter(([E])=>E!=="description"),categoryKey:""}):$e(Ag,{name:e,onNotFound:()=>s(!0),entries:x})]})}function Ag({name:e,onNotFound:t}){let[n,o]=Yn(null),[r,i]=Yn(!1);return tr(()=>{let a=wg(e);a||t(),o(a),i(!0)},[e,t]),!r||!n?null:$e(ka,{onError:t,children:$e("div",{"data-popmelt-panel":!0,onClick:a=>{a.preventDefault(),a.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center",contain:"layout paint",position:"relative",isolation:"isolate"},children:$e("div",{style:{zoom:.5,pointerEvents:"none"},children:ig(n.type,n.props)})})})}function Lg({components:e,selectedComponent:t,hoveredComponent:n,onRemove:o,onHover:r}){if(!e||Object.keys(e).length===0)return $e("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),a=Is(i),s=Object.entries(e).sort(([l],[c])=>(a.get(l)??1/0)-(a.get(c)??1/0));return $e(xr,{children:s.map(([l,c])=>$e(Rg,{name:l,value:c,selected:t===l,highlighted:n===l,onRemove:o,onHover:r},l))})}function qc({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:o,selectedComponent:r,hoveredComponent:i,onComponentHover:a,onSpacingTokenHover:s,onModifySpacingToken:l,onDeleteSpacingToken:c,onComponentAdded:d,onComponentRemoved:u,onSynthesizeRules:p,isSynthesizing:f,snapPosition:v="bottom-right"}){let[C,x]=Yn(void 0),[I,B]=Yn(!0),[T,R]=Yn(()=>{try{let g=localStorage.getItem(Gc);if(g==="patterns"||g==="principles"||g==="rules")return g}catch{}return"patterns"});tr(()=>{Mr(e).then(g=>{x(g),B(!1)})},[e,t]),tr(()=>{try{localStorage.setItem(Gc,T)}catch{}},[T]),tr(()=>{r&&(R("patterns"),Mr(e).then(g=>{g&&x(g)}))},[r,e]);let w=is(g=>{x(m=>{if(!m?.components)return m;let{[g]:$,...ge}=m.components;return{...m,components:ge}}),u?.(g)},[u]),z=C?.components,X=C?.rules,j=z&&Object.keys(z).length>0,E=X&&X.length>0,L=vr(null);return tr(()=>{let g=L.current;if(!g)return;let m=n,$=o;return m&&g.addEventListener("mouseenter",m),$&&g.addEventListener("mouseleave",$),()=>{m&&g.removeEventListener("mouseenter",m),$&&g.removeEventListener("mouseleave",$)}},[n,o]),an("div",{ref:L,style:{...gg,...Li(v)},children:[an("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[$e("span",{children:"Model"}),$e("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),$e("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(g=>$e("button",{type:"button",style:T===g?mg:Uc,onClick:()=>R(g),children:g.charAt(0).toUpperCase()+g.slice(1)},g))}),$e("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:T==="principles"?$e(Ig,{}):I?$e("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!C||!j&&!E?$e("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):an(xr,{children:[T==="patterns"&&$e(Lg,{components:z,selectedComponent:r,hoveredComponent:i,onRemove:w,onHover:a}),T==="rules"&&$e(Mg,{rules:X,onSynthesize:p,isSynthesizing:f})]})})]})}import{jsx as $o}from"react/jsx-runtime";var Pg="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",Bg="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",Dg="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 _g({size:e=16,style:t}){return $o("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:$o("path",{d:Pg})})}function Og({size:e=16,style:t}){return $o("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:$o("path",{d:Bg})})}function Hg({size:e=16,style:t}){return $o("svg",{width:e,height:e,viewBox:"0 0 49.7202 40.0402",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:$o("path",{d:Dg,fillRule:"evenodd",clipRule:"evenodd"})})}function hi({provider:e,size:t=16,style:n}){return e==="codex"?$o(Og,{size:t,style:n}):e==="copilot"?$o(Hg,{size:t,style:n}):$o(_g,{size:t,style:n})}var as=[{id:"claude-opus-4-6",label:"Opus 4.6",source:"static"},{id:"claude-sonnet-4-6",label:"Sonn 4.6",source:"static"}],ls=[{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"}],Ta=[{id:"",label:"Default",source:"static"}];var Ng=[...as,...ls,...Ta];function Ia(e,t){if(t==="copilot"&&!e)return"Copilot";if(!e)return t==="codex"?"Codex":"Claude Code";let n=Ng.find(o=>o.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as Qc}from"react/jsx-runtime";var to={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function Wo({children:e,active:t,siblingActive:n,disabled:o,onClick:r,title:i}){let a=()=>o?.4:n&&!t?.5:1,s={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:0,border:"none",cursor:o?"default":"pointer",transition:"background-color 150ms ease, color 150ms ease, transform 100ms ease, opacity 150ms ease",backgroundColor:t?to.bgActive:"transparent",color:t?to.iconActive:to.iconDefault,opacity:a()};return Qc("button",{type:"button",onClick:o?void 0:r,title:i,disabled:o,style:s,onMouseEnter:l=>{o||(l.currentTarget.style.opacity="1",t||(l.currentTarget.style.backgroundColor=to.bgHover))},onMouseLeave:l=>{o||(l.currentTarget.style.opacity=String(a()),t||(l.currentTarget.style.backgroundColor="transparent"))},onMouseDown:l=>{o||(l.currentTarget.style.transform="scale(0.95)")},onMouseUp:l=>{o||(l.currentTarget.style.transform="scale(1)")},children:e})}function Zc(){return Qc("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as yi,jsx as pe,jsxs as Bt}from"react/jsx-runtime";function qg(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 Cr=[{type:"rectangle",icon:Ug,label:"Rectangle",shortcut:"R"},{type:"circle",icon:Fg,label:"Oval",shortcut:"O"},{type:"line",icon:Yg,label:"Line",shortcut:"L"},{type:"freehand",icon:Jg,label:"Pen",shortcut:"P"}],Zg=new Set(Cr.map(e=>e.type));function Qg(e,t,n,o,r,i,a,s){let l=(e-r)*(o-i)-(n-r)*(t-i),c=(e-a)*(i-s)-(r-a)*(t-s),d=(e-n)*(s-o)-(a-n)*(t-o),u=l<0||c<0||d<0,p=l>0||c>0||d>0;return!(u&&p)}function em(e="bottom-right"){return xl(e,window.innerWidth,window.innerHeight)}var tm=[{type:"text",icon:Xg,label:"Text",shortcut:"T"}],ed={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:C},(D,f)=>{let m=i[f]??"",O=b&&f>=i.length,pe=o===f||O,ce=(O?void 0:v.get(m.trim()))?.status,fe=ce?sm[ce]:"#374151",ge=ce?am[ce]:"\u25A1",Ge=ce?{color:fe}:{},W=ce?{color:fe}:{};return pe?Bo("div",{style:Dd,children:[Zt("span",{style:Ge,children:ge}),Zt("textarea",{className:"popmelt-eval-assertion-input",ref:_=>{d.current[f]=_},rows:1,value:m,placeholder:O?"cmd+enter to add new assertion":void 0,onFocus:()=>r(f),onChange:_=>{A(f,_.target.value),Od(_.currentTarget)},onBlur:_=>se(f,_),onKeyDown:_=>q(f,_),style:{...rm,...W}})]},`assertion-${f}`):Bo("div",{style:Dd,children:[Zt("span",{style:Ge,children:ge}),Zt("button",{type:"button",onMouseDown:_=>P(f,_),onClick:()=>T(f),style:{...cl,...W},children:m})]},`assertion-${f}`)})]})}import{Component as Fm,createElement as zm,useCallback as Ns,useEffect as Sr,useRef as Gr,useState as So}from"react";import{Link2 as Nm}from"lucide-react";var Sm={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},wm=/^#[0-9a-fA-F]{3,8}$/,Cm=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,Em=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 Nd(e){let t=e.trim().toLowerCase();return wm.test(t)||Cm.test(t)||Em.has(t)}var km=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function dl(e){return km.test(e.trim())}var zd=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function Tm(e){let t=e.trim().toLowerCase();return!!(zd.has(t)||t.includes(",")&&t.split(",").some(n=>zd.has(n.trim().replace(/['"]/g,""))))}function Mm(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(Nd(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var Im=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,Rm=/^--(font-family|font|ff|family)/i,Lm=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,Am=/^--(space|gap|padding|margin|inset)/i,Pm=/^--(radius|rounded|br|border-radius)/i,Bm=/^--(shadow|elevation|drop-shadow)/i;function $d(e,t){let n=e.toLowerCase();return Bm.test(n)?"shadows":Pm.test(n)?"radii":Rm.test(n)?"fonts":Lm.test(n)&&dl(t)?"typeScale":Im.test(n)||Nd(t)?"colors":Tm(t)?"fonts":Mm(t)?"shadows":Am.test(n)&&dl(t)||dl(t)?"spacing":"other"}function Wd(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){Wd(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Dm(r.style,t,n,o)}}}var jd=/var\((--[^,)]+)/;function Dm(e,t,n,o){for(let r=0;r<e.length;r++){let i=e[r];if(!i?.startsWith("--")||n.has(i))continue;n.add(i);let a=t.getPropertyValue(i).trim();if(!a)continue;let s=$d(i,a);o[s].push([i,a]);let c=e.getPropertyValue(i).trim().match(jd);c&&(o.references[i]=c[1])}}function Os(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function Fs(e){let t=e.trim().toLowerCase(),n=t.match(/oklch\(\s*([\d.]+%?)/);if(n){let i=n[1];return i.endsWith("%")?parseFloat(i)/100:parseFloat(i)}let o=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(o){let[i,a,s]=[parseInt(o[1],10),parseInt(o[2],10),parseInt(o[3],10)];return(.2126*i+.7152*a+.0722*s)/255}let r=t.match(/hsla?\(\s*[\d.]+[,\s]+[\d.]+%?[,\s]+([\d.]+)%?/);if(r)return parseFloat(r[1])/100;if(t.startsWith("#")){let i=t.slice(1);(i.length===3||i.length===4)&&(i=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]);let a=parseInt(i.slice(0,2),16),s=parseInt(i.slice(2,4),16),l=parseInt(i.slice(4,6),16);if(!isNaN(a))return(.2126*a+.7152*s+.0722*l)/255}return null}function Vd(e){return e==="colors"?(t,n)=>{let o=Fs(t[1]),r=Fs(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let o=Os(t[1]),r=Os(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let o=Os(t[1]),r=Os(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:(t,n)=>t[0].localeCompare(n[0])}function _m(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 Gd(e){let t=new Map;for(let r of e){let i=_m(r[0]),a=t.get(i);a||(a=[],t.set(i,a)),a.push(r)}let n=Vd("colors");for(let r of t.values())r.sort(n);let o=[...t.entries()];return o.sort((r,i)=>{let a=Fs(r[1][0][1])??0,s=Fs(i[1][0][1])??0;return a-s}),o}var Om=["colors","fonts","typeScale","spacing","radii","shadows","other"],Hs=null,Hm=5e3;function Jd(){if(typeof document>"u")return Sm;if(Hs&&Date.now()-Hs.timestamp<Hm)return Hs.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{Wd(r.cssRules||r.rules,n,t,e)}catch{}}catch{}let o=document.documentElement.style;for(let r=0;r<o.length;r++){let i=o[r];if(!i?.startsWith("--")||t.has(i))continue;t.add(i);let a=n.getPropertyValue(i).trim();if(!a)continue;let s=$d(i,a);e[s].push([i,a]);let c=o.getPropertyValue(i).trim().match(jd);c&&(e.references[i]=c[1])}for(let r of Om)e[r].sort(Vd(r));return Hs={tokens:e,timestamp:Date.now()},e}import{Fragment as Jr,jsx as et,jsxs as Tn}from"react/jsx-runtime";var Yd="popmelt-library-tab",$m=/^#[0-9a-fA-F]{3,8}$/,Wm=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,jm=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),Vm=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Kd(e){let t=e.trim();return $m.test(t)||Wm.test(t)||jm.has(t.toLowerCase())}function Gm(e){return Vm.test(e.trim())}function Jm(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function Xd(e,t=""){if(e==null)return[];if(typeof e!="object")return[[t,String(e)]];if(Array.isArray(e))return[[t,e.map(String).join(", ")]];let n=[];for(let[o,r]of Object.entries(e)){let i=t?`${t}.${o}`:o;if(r!==null&&typeof r=="object"&&!Array.isArray(r)){let a=r;typeof a.value=="string"?n.push([i,a.value]):n.push(...Xd(r,i))}else n.push([i,Array.isArray(r)?r.map(String).join(", "):String(r??"")])}return n}function Ym(e){return e.length===0?"generic":e.filter(([,o])=>Kd(o)).length>e.length/2?"colors":e.filter(([,o])=>Gm(o)).length>e.length/2?"spacing":"generic"}var Um={width:300,backgroundColor:"#eaeaea",...gi,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"},qd={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},Km={...qd,color:"#1f2937",borderBottom:"1.5px solid #1f2937"};function Xm({varName:e,value:t,reference:n}){return et("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&&et(Nm,{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 Zd({entries:e,references:t}){let n=[],o=[];for(let i of e)Kd(i[1])?n.push(i):o.push(i);let r=Gd(n);return Tn(Jr,{children:[r.map(([i,a])=>Tn("div",{style:{marginBottom:4},children:[Tn("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[i,a.length>1?` (${a.length})`:""]}),et("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:a.map(([s,l])=>et(Xm,{varName:s,value:l,reference:t[s]},s))})]},i)),o.length>0&&et($s,{entries:o})]})}var zs=[0,1,2,4,8,12,16,20,24,28,32];function qm(e){if(e<=32){let t=zs[0],n=Math.abs(e-t);for(let o=1;o<zs.length;o++){let r=Math.abs(e-zs[o]);r<n&&(t=zs[o],n=r)}return t}return Math.round(e/8)*8}function Zm({label:e,value:t,px:n,tokenPath:o,rawToken:r,onHover:i,onModify:a,onDelete:s}){let[l,c]=So(!1),[u,d]=So(null),p=Gr(!1),g=Gr(0),b=Gr(0),C=Gr([]),v=u!==null?u:n,x=u!==null?`${u}px`:t,B=u!==null,T=Ns(E=>{E.preventDefault(),p.current=!0,g.current=E.clientX,b.current=n;let V=gs(r);C.current=ua(V);let q=P=>{let D=P.clientX-g.current,f=Math.max(0,Math.round(b.current+D));P.shiftKey&&(f=qm(f));for(let m of C.current)m.element.style.setProperty(m.property,f+"px","important");d(f),i?.({name:e,px:f,token:V})},se=()=>{window.removeEventListener("mousemove",q),window.removeEventListener("mouseup",se),document.body.style.cursor="",p.current=!1,d(P=>{if(P!==null&&P!==n&&a){let D=gs(r),f=D.bindings&&D.bindings.length>0,m;if(f){let ce=fa(D.bindings,b.current,P);m=JSON.stringify({...D,value:`${P}px`,bindings:ce})}else{let ce=gc(C.current,b.current),fe=mc(C.current);if(ce.length>0){let ge=fa(ce,b.current,P);m=JSON.stringify({value:`${P}px`,property:fe,bindings:ge})}else m=`${P}px`}let O=typeof r=="string"?r:JSON.stringify(r),pe=C.current.map(ce=>({selector:xo(ce.element),property:ce.property})),ye=yc(C.current,b.current,P);a({tokenPath:o,originalValue:O,currentValue:m,targets:pe,originalPx:b.current,currentPx:P},{id:Math.random().toString(36).substring(2,9),tokenPath:o,tokenName:e,originalPx:b.current,newPx:P,affectedElements:ye})}return P})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",q),window.addEventListener("mouseup",se)},[n,e,o,r,i,a]),A=gs(r);return Tn("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:v,token:A}))},onMouseLeave:()=>{p.current||(c(!1),i?.(null))},onMouseDown:T,children:[et("span",{style:{color:l||B?"#FF0000":"#9ca3af"},children:e}),Tn("span",{style:{display:"flex",alignItems:"center",gap:4},children:[et("span",{style:{color:l||B?"#FF0000":"#6b7280",fontWeight:600},children:x}),s&&l&&!B&&et("button",{type:"button",title:"Remove token",onMouseDown:E=>{E.stopPropagation();let V=typeof r=="string"?r:JSON.stringify(r);s(o,V)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:E=>{E.currentTarget.style.color="#FF0000"},onMouseLeave:E=>{E.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function Qm({entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}){let a=[],s=[];for(let l of e){let c=Jm(l[1]);c!==null?a.push([l[0],l[1],c]):s.push(l)}return Tn(Jr,{children:[a.length>0&&et("div",{style:{display:"flex",flexDirection:"column",gap:2},children:a.map(([l,c,u])=>{let d=l.split(".").pop(),p=n?eh(n,l):c,g=p&&typeof p=="object"&&"value"in p?p:c;return et(Zm,{label:d,value:c,px:u,tokenPath:`tokens.${t}.${l}`,rawToken:g,onHover:o,onModify:r,onDelete:i},l)})}),s.length>0&&et($s,{entries:s})]})}function eh(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 $s({entries:e}){return et("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>Tn("div",{style:{fontSize:11},children:[et("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),et("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function th({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:o,onModifyToken:r,onDeleteToken:i}){let a=Ym(e);return a==="colors"?et(Zd,{entries:e}):a==="spacing"?et(Qm,{entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}):et($s,{entries:e})}function nh(e){let t=e.toLowerCase(),n=null,o=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(i){return i.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),r=o.currentNode;for(;r=o.nextNode();){let i=r,a=Object.keys(i).find(l=>l.startsWith("__reactFiber$")||l.startsWith("__reactInternalInstance$"));if(!a)continue;let s=i[a];for(;s;){let l=s.type,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={...s.memoizedProps};return delete d.ref,{type:l,props:d}}if(!n){if(u.length>=4&&t.includes(u)){let d={...s.memoizedProps};delete d.ref,n={type:l,props:d}}else if(t.length>=4&&u.includes(t)){let d={...s.memoizedProps};delete d.ref,n={type:l,props:d}}}}s=s.return}}return n}var ul=class extends Fm{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}},Qd="popmelt-principles-collapsed";function oh(){try{let e=localStorage.getItem(Qd);if(e)return new Set(JSON.parse(e))}catch{}return new Set}function rh(e){try{localStorage.setItem(Qd,JSON.stringify([...e]))}catch{}}function ih({id:e,label:t,count:n,children:o,collapsed:r,onToggle:i}){return Tn("div",{style:{marginBottom:14},children:[Tn("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:[et("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:r?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,et("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!r&&o]})}var sh={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},Ud=["colors","fonts","typeScale","spacing","radii","shadows","other"];function ah(){let[e,t]=So(null),[n,o]=So(oh);Sr(()=>{t(Jd())},[]);let r=Ns(a=>{o(s=>{let l=new Set(s);return l.has(a)?l.delete(a):l.add(a),rh(l),l})},[]);return e?Ud.some(a=>e[a].length>0)?et(Jr,{children:Ud.map(a=>{let s=e[a];return s.length===0?null:et(ih,{id:a,label:sh[a],count:s.length,collapsed:n.has(a),onToggle:r,children:a==="colors"?et(Zd,{entries:s,references:e.references}):et($s,{entries:s})},a)})}):et("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function lh({rules:e,onSynthesize:t,isSynthesizing:n}){if(!e||e.length===0)return et("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."});if(!e.some(i=>typeof i=="object"&&i!==null&&"scope"in i))return et(Jr,{children:e.map((i,a)=>Tn("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[Tn("span",{style:{color:"#9ca3af",flexShrink:0},children:[a+1,"."]}),et("span",{children:typeof i=="string"?i:i.text})]},a))});let r=new Map;for(let i of e)if(typeof i=="string")r.has("general")||r.set("general",[]),r.get("general").push({id:"",text:i});else{let a=i.scope||"general";r.has(a)||r.set(a,[]),r.get(a).push({id:i.id,text:i.text})}return Tn(Jr,{children:[t&&et("button",{type:"button",disabled:n,onClick:t,style:{width:"100%",border:"1px solid rgba(0,0,0,0.12)",background:n?"rgba(0,0,0,0.04)":"rgba(0,0,0,0.02)",cursor:n?"default":"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"5px 8px",marginBottom:10,color:n?"#9ca3af":"#6b7280"},children:n?"Synthesizing\u2026":"Synthesize"}),Array.from(r.entries()).map(([i,a])=>Tn("div",{style:{marginBottom:10},children:[et("div",{style:{fontWeight:700,fontSize:10,color:"#6b7280",letterSpacing:"0.05em",textTransform:"uppercase",marginBottom:4},children:i}),a.map((s,l)=>Tn("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4,fontSize:11},children:[et("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2022"}),et("span",{children:s.text})]},s.id||l))]},i))]})}function ch({name:e,value:t,selected:n,highlighted:o,onRemove:r,onHover:i}){let[a,s]=So(!1),[l,c]=So(!1),u=Gr(null),d=Gr(0),[p,g]=So(0),[b,C]=So(0),v=Xd(t),x=v.find(([P])=>P==="description")?.[1];Sr(()=>{if(!l&&!o){g(0),C(0),d.current=0;return}let P=ii(e);g(P.length)},[l,o,e]),Sr(()=>{n&&u.current&&u.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let B=n||o||l,T=n?"139,92,246":"34,197,94",A=n?"#8b5cf6":"#22c55e",E=B?`rgba(${T},0.06)`:void 0,V=B?`inset 0 0 0 1.5px rgba(${T},0.35)`:void 0,q=o||l,se=Ns(()=>{let P=ii(e);if(P.length===0)return;let D=d.current%P.length;P[D].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),C(D),d.current=D+1,i?.({name:e,instanceIndex:D})},[e,i]);return Tn("div",{ref:u,onClick:se,onMouseEnter:()=>{c(!0),i?.({name:e,instanceIndex:0})},onMouseLeave:()=>{c(!1),i?.(null)},style:{marginBottom:8,background:E,padding:6,boxShadow:V,cursor:"pointer"},children:[Tn("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[Tn("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[et("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:q?A:"transparent",color:q?"#fff":"#6b7280"},children:e}),q&&p>1&&Tn("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[b+1,"/",p]})]}),r&&l&&et("button",{type:"button",title:"Remove from model",onClick:P=>{P.stopPropagation(),r(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:P=>{P.currentTarget.style.color="#FF0000"},onMouseLeave:P=>{P.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),x&&et("div",{style:{fontSize:11,color:q?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:x}),a?et(th,{entries:v.filter(([P])=>P!=="description"),categoryKey:""}):et(dh,{name:e,onNotFound:()=>s(!0),entries:v})]})}function dh({name:e,onNotFound:t}){let[n,o]=So(null),[r,i]=So(!1);return Sr(()=>{let a=nh(e);a||t(),o(a),i(!0)},[e,t]),!r||!n?null:et(ul,{onError:t,children:et("div",{"data-popmelt-panel":!0,onClick:a=>{a.preventDefault(),a.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center",contain:"layout paint",position:"relative",isolation:"isolate"},children:et("div",{style:{zoom:.5,pointerEvents:"none"},children:zm(n.type,n.props)})})})}function uh({components:e,selectedComponent:t,hoveredComponent:n,onRemove:o,onHover:r}){if(!e||Object.keys(e).length===0)return et("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),a=la(i),s=Object.entries(e).sort(([l],[c])=>(a.get(l)??1/0)-(a.get(c)??1/0));return et(Jr,{children:s.map(([l,c])=>et(ch,{name:l,value:c,selected:t===l,highlighted:n===l,onRemove:o,onHover:r},l))})}function eu({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:o,selectedComponent:r,hoveredComponent:i,onComponentHover:a,onSpacingTokenHover:s,onModifySpacingToken:l,onDeleteSpacingToken:c,onComponentAdded:u,onComponentRemoved:d,onSynthesizeRules:p,isSynthesizing:g,snapPosition:b="bottom-right"}){let[C,v]=So(void 0),[x,B]=So(!0),[T,A]=So(()=>{try{let f=localStorage.getItem(Yd);if(f==="patterns"||f==="principles"||f==="rules")return f}catch{}return"patterns"});Sr(()=>{ti(e).then(f=>{v(f),B(!1)})},[e,t]),Sr(()=>{try{localStorage.setItem(Yd,T)}catch{}},[T]),Sr(()=>{r&&(A("patterns"),ti(e).then(f=>{f&&v(f)}))},[r,e]);let E=Ns(f=>{v(m=>{if(!m?.components)return m;let{[f]:O,...pe}=m.components;return{...m,components:pe}}),d?.(f)},[d]),V=C?.components,q=C?.rules,se=V&&Object.keys(V).length>0,P=q&&q.length>0,D=Gr(null);return Sr(()=>{let f=D.current;if(!f)return;let m=n,O=o;return m&&f.addEventListener("mouseenter",m),O&&f.addEventListener("mouseleave",O),()=>{m&&f.removeEventListener("mouseenter",m),O&&f.removeEventListener("mouseleave",O)}},[n,o]),Tn("div",{ref:D,style:{...Um,...ds(b)},children:[Tn("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[et("span",{children:"Model"}),et("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),et("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(f=>et("button",{type:"button",style:T===f?Km:qd,onClick:()=>A(f),children:f.charAt(0).toUpperCase()+f.slice(1)},f))}),et("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:T==="principles"?et(ah,{}):x?et("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!C||!se&&!P?et("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):Tn(Jr,{children:[T==="patterns"&&et(uh,{components:V,selectedComponent:r,hoveredComponent:i,onRemove:E,onHover:a}),T==="rules"&&et(lh,{rules:q,onSynthesize:p,isSynthesizing:g})]})})]})}import{jsx as cr}from"react/jsx-runtime";var ph="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",fh="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",gh="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 mh({size:e=16,style:t}){return cr("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:cr("path",{d:ph})})}function hh({size:e=16,style:t}){return cr("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:cr("path",{d:fh})})}function yh({size:e=16,style:t}){return cr("svg",{width:e,height:e,viewBox:"0 0 49.7202 40.0402",fill:"currentColor",stroke:"none",style:{flexShrink:0,...t},children:cr("path",{d:gh,fillRule:"evenodd",clipRule:"evenodd"})})}function Ui({provider:e,size:t=16,style:n}){return e==="codex"?cr(hh,{size:t,style:n}):e==="copilot"?cr(yh,{size:t,style:n}):cr(mh,{size:t,style:n})}var Ws=[{id:"claude-opus-4-6",label:"Opus 4.6",source:"static"},{id:"claude-sonnet-4-6",label:"Sonn 4.6",source:"static"}],js=[{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 bh=[...Ws,...js,...pl];function fl(e,t){if(t==="copilot"&&!e)return"Copilot";if(!e)return t==="codex"?"Codex":"Claude Code";let n=bh.find(o=>o.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as nu}from"react/jsx-runtime";var Ro={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function dr({children:e,active:t,siblingActive:n,disabled:o,onClick:r,title:i}){let a=()=>o?.4:n&&!t?.5:1,s={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:0,border:"none",cursor:o?"default":"pointer",transition:"background-color 150ms ease, color 150ms ease, transform 100ms ease, opacity 150ms ease",backgroundColor:t?Ro.bgActive:"transparent",color:t?Ro.iconActive:Ro.iconDefault,opacity:a()};return nu("button",{type:"button",onClick:o?void 0:r,title:i,disabled:o,style:s,onMouseEnter:l=>{o||(l.currentTarget.style.opacity="1",t||(l.currentTarget.style.backgroundColor=Ro.bgHover))},onMouseLeave:l=>{o||(l.currentTarget.style.opacity=String(a()),t||(l.currentTarget.style.backgroundColor="transparent"))},onMouseDown:l=>{o||(l.currentTarget.style.transform="scale(0.95)")},onMouseUp:l=>{o||(l.currentTarget.style.transform="scale(1)")},children:e})}function tu(){return nu("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as Ki,jsx as ke,jsxs as Qt}from"react/jsx-runtime";function Ah(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 Kr=[{type:"rectangle",icon:Ih,label:"Rectangle",shortcut:"R"},{type:"circle",icon:xh,label:"Oval",shortcut:"O"},{type:"line",icon:Mh,label:"Line",shortcut:"L"},{type:"freehand",icon:kh,label:"Pen",shortcut:"P"}],Ph=new Set(Kr.map(e=>e.type));function Bh(e,t,n,o,r,i,a,s){let l=(e-r)*(o-i)-(n-r)*(t-i),c=(e-a)*(i-s)-(r-a)*(t-s),u=(e-n)*(s-o)-(a-n)*(t-o),d=l<0||c<0||u<0,p=l>0||c>0||u>0;return!(d&&p)}function Dh(e="bottom-right"){return sc(e,window.innerWidth,window.innerHeight)}var _h=[{type:"text",icon:Lh,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.
|
|
14
42
|
|
|
15
|
-
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},nm={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"},Ma="devtools-toolbar-expanded",Ra="devtools-annotations",Aa="devtools-style-modifications",La="devtools-active-tool",td="devtools-active-color",nd="devtools-stroke-width",od="devtools-inspected-element",Pa="devtools-spacing-changes",om={expanded:Ma,annotations:Ra,styleMods:Aa,spacingChanges:Pa,tool:La,color:td,stroke:nd,inspected:od};function rd({state:e,dispatch:t,onScreenshot:n,onSendToClaude:o,hasActiveJobs:r,activeJobColor:i,onCrosshairHover:a,onClear:s,provider:l="claude",onProviderChange:c,availableProviders:d,modelIndex:u=0,modelCount:p=2,modelLabel:f="Opus 4.6",onModelChange:v,onViewThread:C,isThreadPanelOpen:x,mcpStatus:I,bridgeUrl:B,isBridgeConnected:T,packageVersion:R,bridgeVersion:w,bridgeRestartState:z="idle",bridgeRestartMessage:X,onBridgeRestart:j,modelSelectedComponent:E,modelCanvasHoveredComponent:L,onModelComponentHover:g,onSpacingTokenHover:m,onModifySpacingToken:$,onDeleteSpacingToken:ge,modelRefreshKey:Ie,evalRefreshKey:ue,onModelComponentAdded:ke,onModelComponentRemoved:Me,onSynthesizeRules:K,isSynthesizing:_,onSynthesizeEvals:ne,isSynthesizingEvals:he,onRunEval:ze,onViewEvalRunThread:Ye,runningEvalIds:ie,onMouseEnter:Ke,toolbarRef:Ge,snapPosition:ve="bottom-right",onSnapPositionChange:Re}){let[at,G]=wr(()=>typeof window<"u"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});mn(()=>{let D=()=>G({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",D),()=>window.removeEventListener("resize",D)},[]);let[le,te]=wr(()=>typeof window>"u"?!1:localStorage.getItem(Ma)==="true"),[Oe,lt]=wr(0),De=Ot(0),ot=Ot(0),ct=Ot(e.isAnnotating),Je=Ot(!1),ht=Ot(typeof window<"u"?localStorage.getItem(La):null),qt=Ot(typeof window<"u"?localStorage.getItem(td):null),zt=Ot(typeof window<"u"?localStorage.getItem(nd):null),[nt,Ve]=wr(null),Ut=Ot(!1),Xe=Ot(null),Ct=Ot(null),$n=Ot(null),[Sn,Mn]=wr([]),ln=Ot({x:0,y:0}),Ft=Ot(null),q=Ot(null),ae=Ot(null),fe=Un(()=>{Ft.current=null,q.current=null,ae.current&&(clearTimeout(ae.current),ae.current=null)},[]),Te=Un(D=>{Ct.current&&(clearTimeout(Ct.current),Ct.current=null),Ut.current?(Ft.current=D,q.current={...ln.current},ae.current&&clearTimeout(ae.current),ae.current=setTimeout(()=>{Ft.current&&(Ve(Ft.current),fe())},300)):(Xe.current&&clearTimeout(Xe.current),Xe.current=setTimeout(()=>{Ut.current=!0,Ve(D),Xe.current=null},500))},[fe]),rt=Un(()=>{fe(),Xe.current&&(clearTimeout(Xe.current),Xe.current=null),Ct.current=setTimeout(()=>{Ut.current=!1,Ve(null)},150)},[fe]);mn(()=>{let D=$n.current;if(!D)return;let W=()=>{fe(),Ct.current&&(clearTimeout(Ct.current),Ct.current=null)},oe=()=>{Ct.current=setTimeout(()=>{Ut.current=!1,Ve(null)},150)};return D.addEventListener("mouseenter",W),D.addEventListener("mouseleave",oe),()=>{D.removeEventListener("mouseenter",W),D.removeEventListener("mouseleave",oe)}},[nt,fe]),mn(()=>{if(nt!=="counter"||!B)return;let D=!1;return qn(`${B}/threads/recent?limit=5`).then(W=>W.ok?W.json():[]).then(W=>{D||Mn(W)}).catch(()=>{}),()=>{D=!0}},[nt,B]);let dt=Un(D=>{if(ln.current={x:D.clientX,y:D.clientY},Ft.current&&q.current){let W=q.current,oe=em(ve);Qg(D.clientX,D.clientY,W.x,W.y,oe.left,oe.y,oe.right,oe.y)||(Ve(Ft.current),fe())}},[fe,ve]),ft=Sr(()=>{let D=(d??[]).map(W=>W==="claude"?"Claude":W==="codex"?"Codex":W==="copilot"?"Copilot":W);return{name:"AI Model",desc:D.length>1?`${D.join(" and ")} are available.`:D.length===1?`Connected to ${D[0]}.`:"No AI providers detected.",usage:D.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:D.length>1?[{key:"Click",desc:"Switch"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]:[{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]}},[d]),Kt=Sr(()=>{let D=d&&d.length>0?d:["claude","codex","copilot"],W=D.indexOf(l);return D[(W>=0?W+1:0)%D.length]??l},[d,l]),Wn=Sr(()=>qg(p,u),[p,u]);Ac(le,e,Je,!!r,om),mn(()=>{let D=new URLSearchParams(window.location.search);if(!D.has("popmelt"))return;let W=document.createElement("style");W.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(W);let oe=parseInt(D.get("popmelt")||"0",10)||0,re=()=>{te(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})};if(oe>0){let ce=setTimeout(re,oe);return()=>clearTimeout(ce)}re()},[]),mn(()=>{if(localStorage.getItem(Ma)==="true"&&!e.isAnnotating){if(le||te(!0),t({type:"SET_TOOL",payload:ht.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),qt.current&&t({type:"SET_COLOR",payload:qt.current}),zt.current){let ye=parseFloat(zt.current);isNaN(ye)||t({type:"SET_STROKE_WIDTH",payload:ye})}let oe=localStorage.getItem(Ra);if(oe)try{let ye=JSON.parse(oe);if(Array.isArray(ye)&&ye.length>0){for(let Dt of ye)(Dt.status==="waiting_input"||Dt.status==="in_flight")&&(Dt.status=Dt.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:ye}})}}catch{}let re=localStorage.getItem(Aa);if(re)try{let ye=JSON.parse(re);Array.isArray(ye)&&ye.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:ye}),zi(ye))}catch{}let ce=localStorage.getItem(Pa);if(ce)try{let ye=JSON.parse(ce);Array.isArray(ye)&&ye.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:ye})}catch{}let xe=localStorage.getItem(od);if(xe)try{let{selector:ye,info:Dt}=JSON.parse(xe);if(ye){let Vt=Tn(ye);if(Vt){let _t=Dt||{...Hn(Vt),selector:ye};t({type:"SELECT_ELEMENT",payload:{el:Vt,info:_t}})}}}catch{}let Ee=sessionStorage.getItem("popmelt-pending-focus");if(Ee){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:ye}=JSON.parse(Ee);if(ye){let Dt=oe?JSON.parse(oe)??[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:ye}});let Vt=Dt.find(_t=>_t.id===ye);if(Vt){let Tt=(Vt.groupId?Dt.filter(Qe=>Qe.groupId===Vt.groupId):[Vt]).flatMap(Qe=>Qe.points);if(Tt.length>0){let Qe=Math.min(...Tt.map(Pn=>Pn.x)),En=Math.max(...Tt.map(Pn=>Pn.x)),Ln=Math.min(...Tt.map(Pn=>Pn.y)),pn=Math.max(...Tt.map(Pn=>Pn.y));window.scrollTo({left:(Qe+En)/2-window.innerWidth/2,top:(Ln+pn)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch{}}}let W=sessionStorage.getItem("popmelt-pending-thread");if(W){sessionStorage.removeItem("popmelt-pending-thread");try{let{threadId:oe,selector:re,preview:ce}=JSON.parse(W);oe&&requestAnimationFrame(()=>{if(re)try{let xe=document.querySelector(re);if(xe){let Ee=xe.getBoundingClientRect(),ye=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:ye,point:{x:Ee.left+Ee.width,y:Ee.top},text:ce||"[thread]",linkedSelector:re,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[ye],threadId:oe}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[ye],status:"resolved"}})}}catch{}C&&C(oe)})}catch{}}return Je.current=!0,()=>{Je.current=!1}},[]);let hn=Ot(e.styleModifications);mn(()=>{let D=hn.current,W=e.styleModifications;D!==W&&(Fi(D),zi(W),hn.current=W)},[e.styleModifications]),mn(()=>{let D=ct.current;ct.current=e.isAnnotating,D&&!e.isAnnotating&&le&&te(!1)},[e.isAnnotating,le]);let Rn=Ot(le);Rn.current=le,mn(()=>{let D=oe=>{if(oe.key==="Meta"||oe.key==="Control"){let re=Date.now();if(re-De.current<300){if(ot.current++,ot.current>=2){if(Rn.current)t({type:"SET_ANNOTATING",payload:!1}),te(!1);else{let Ee=localStorage.getItem(La);t({type:"SET_TOOL",payload:Ee||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),te(!0)}ot.current=0}}else ot.current=1;De.current=re}else ot.current=0},W=oe=>{oe.key!=="Meta"&&oe.key!=="Control"&&(ot.current=0)};return window.addEventListener("keydown",D),window.addEventListener("keyup",W),()=>{window.removeEventListener("keydown",D),window.removeEventListener("keyup",W)}},[t]);let He=Un(D=>{fe(),t({type:"SET_TOOL",payload:D}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),Ut.current=!1,Ve(null),Xe.current&&(clearTimeout(Xe.current),Xe.current=null),Ct.current&&(clearTimeout(Ct.current),Ct.current=null)},[t,e.isAnnotating,fe]),yt=Un(async()=>{window.focus(),await n()},[n]),V=Un(async()=>{o&&await o()},[o]),Ae=Un(()=>{t({type:"SET_ANNOTATING",payload:!1}),te(!1)},[t]),qe=Un(()=>{Fi(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(D=>D.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(Ra),localStorage.removeItem(Aa),localStorage.removeItem(Pa),wn(null),s?.()},[t,e.styleModifications,s]),[Et,cn]=wr(()=>{if(qt.current){let D=qt.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(D?.[1])return parseFloat(D[1])}return 29}),ut=Ot(null),Le=Ot(null),nn=Ot(!1),Zt=Un(D=>{let W=D.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return W&&W[1]?parseFloat(W[1]):null},[]);mn(()=>{nn.current=!0;let D=`oklch(0.628 0.258 ${Et})`;t({type:"SET_COLOR",payload:D}),requestAnimationFrame(()=>{nn.current=!1})},[Et,t]),mn(()=>{if(nn.current)return;let D=Zt(e.activeColor);D!==null&&Math.abs(D-Et)>.5&&cn(D)},[e.activeColor,Zt,Et]);let jn=Ot(null);mn(()=>{if(r&&i){let D=Zt(i);D!==null&&Math.abs(D-Et)>.5&&(jn.current===null&&(jn.current=Et),cn(D))}else jn.current!==null&&(cn(jn.current),jn.current=null)},[r,i,Zt]);let $t=e.annotations.length>0;mn(()=>{let D=Le.current;if(!D||!$t)return;let W=oe=>{oe.preventDefault(),oe.stopPropagation();let re=oe.deltaY>0?-1:1,ce=((Et+re)%360+360)%360,xe=`oklch(0.628 0.258 ${ce})`;cn(ce),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:xe}})};return D.addEventListener("wheel",W,{passive:!1}),()=>D.removeEventListener("wheel",W)},[$t,e.selectedAnnotationIds,e.lastSelectedId,Et,t]);let To=Ot(!1),nr=Ot(0);mn(()=>{let D=e.annotations.some(re=>!re.status||re.status==="pending"),W=To.current;To.current=D;let oe=nr.current===0&&e.annotations.length>0;if(nr.current=e.annotations.length,(W&&!D||oe&&!D)&&e.annotations.length>0){let re=e.annotations.map(ce=>Zt(ce.color)).filter(ce=>ce!==null);if(re.length>0){let ce=0,xe=-1;for(let Ee=0;Ee<360;Ee++){let ye=Math.min(...re.map(Dt=>{let Vt=Math.abs(Ee-Dt);return Math.min(Vt,360-Vt)}));ye>xe&&(xe=ye,ce=Ee)}cn(ce)}}},[e.annotations,Zt]);let Io=Ot(!1),jo=Un(()=>{Io.current=!1,ut.current=setTimeout(()=>{Io.current=!0,cn(29)},500)},[]),or=Un(()=>{ut.current&&(clearTimeout(ut.current),ut.current=null)},[]);mn(()=>()=>{ut.current&&clearTimeout(ut.current),ae.current&&clearTimeout(ae.current)},[]);let yn=Lr(),Go=Sr(()=>e.annotations.filter(D=>!D.pathname||D.pathname===yn),[e.annotations,yn]),Jo=Sr(()=>Gi(e.annotations),[e.annotations]),Ze=Sr(()=>{let D=[],W=new Set,oe=[...e.annotations].sort((re,ce)=>re.timestamp-ce.timestamp);for(let re of oe)if(!Jo.has(re))if(re.groupId){if(!W.has(re.groupId)){W.add(re.groupId);let ce=e.annotations.filter(ye=>ye.groupId===re.groupId&&!Jo.has(ye)),xe=ce.find(ye=>ye.type!=="text")||ce[0],Ee=Math.min(...ce.map(ye=>ye.timestamp));D.push({id:xe.id,pathname:re.pathname,annotations:ce,timestamp:Ee})}}else D.push({id:re.id,pathname:re.pathname,annotations:[re],timestamp:re.timestamp});return D},[e.annotations,Jo]),fo=Sr(()=>Ze.filter(D=>!D.pathname||D.pathname===yn),[Ze,yn]),[kt,wn]=wr(null),An=Ze.length+e.styleModifications.length;mn(()=>{(An===0||kt!==null&&kt>=An)&&wn(null)},[An,kt]),mn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){wn(null);return}if(e.selectedAnnotationIds.length>0){let D=e.selectedAnnotationIds[0],W=Ze.findIndex(oe=>oe.id===D||oe.annotations.some(re=>re.id===D));W>=0&&W!==kt&&wn(W)}},[e.selectedAnnotationIds,e.inspectedElement,Ze]);let Cn=Un(()=>{if(An===0)return;let D;if(kt===null?D=0:kt+1>=An?D=null:D=kt+1,wn(D),D===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(D<Ze.length){let W=Ze[D];if(!(!W.pathname||W.pathname===yn)){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 re=W.annotations.find(Qe=>Qe.type!=="text")||W.annotations[0];if(W.annotations.some(Qe=>Qe.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(re?.type&&re.type!=="text"&&re.type!=="inspector"){t({type:"SET_TOOL",payload:re.type});let Qe=Cr.findIndex(En=>En.type===re.type);Qe>=0&<(Qe)}if(re?.color){t({type:"SET_COLOR",payload:re.color});let Qe=Zt(re.color);Qe!==null&&cn(Qe)}let xe=W.annotations.flatMap(Qe=>Qe.points);if(xe.length===0)return;let Ee=Math.min(...xe.map(Qe=>Qe.x)),ye=Math.max(...xe.map(Qe=>Qe.x)),Dt=Math.min(...xe.map(Qe=>Qe.y)),Vt=Math.max(...xe.map(Qe=>Qe.y)),_t=(Ee+ye)/2,Tt=(Dt+Vt)/2;if(window.scrollTo({left:_t-window.innerWidth/2,top:Tt-window.innerHeight/2,behavior:"smooth"}),x&&C){let Qe=W.annotations.find(En=>En.threadId)?.threadId;Qe&&C(Qe)}}else{let W=D-Ze.length,oe=e.styleModifications[W];if(!oe)return;let re=Tn(oe.selector);if(!re)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:re,info:oe.element}});let ce=re.getBoundingClientRect(),xe=ce.left+ce.width/2+window.scrollX,Ee=ce.top+ce.height/2+window.scrollY;window.scrollTo({left:xe-window.innerWidth/2,top:Ee-window.innerHeight/2,behavior:"smooth"})}},[Ze,yn,e.styleModifications,An,kt,t,Zt,x,C]);mn(()=>{if(!le)return;let D=W=>{let oe=document.activeElement;for(;oe?.shadowRoot?.activeElement;)oe=oe.shadowRoot.activeElement;if(oe?.tagName==="INPUT"||oe?.tagName==="TEXTAREA"||oe?.isContentEditable)return;if((W.metaKey||W.ctrlKey)&&W.key==="Enter"){o&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(xe=>!xe.captured).length>0)&&(W.preventDefault(),V());return}if((W.metaKey||W.ctrlKey)&&(W.key==="c"||W.key==="C"||W.code==="KeyC")){let xe=window.getSelection();if(xe&&xe.toString().length>0)return;(e.annotations.length>0||e.styleModifications.length>0)&&(W.preventDefault(),window.focus(),yt());return}if((W.metaKey||W.ctrlKey)&&(W.key==="Backspace"||W.key==="Delete")){W.preventDefault(),qe();return}if(W.metaKey||W.ctrlKey||W.altKey)return;let re={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand",e:"eval"};if(W.key.toLowerCase()==="m"){W.preventDefault(),He("model");return}let ce=re[W.key.toLowerCase()];if(ce){W.preventDefault();let xe=Cr.findIndex(Ee=>Ee.type===ce);xe>=0&<(xe),He(ce)}};return window.addEventListener("keydown",D),()=>window.removeEventListener("keydown",D)},[le,He,yt,V,o,qe,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,nt]);let Vo=yl(ve,at.w,at.h),oo={...nm,...Vo,borderRadius:0,padding:le?"0 8px":"0",width:le?"auto":48,height:48,gap:0,justifyContent:le?"flex-start":"center"},ro=pe("div",{style:Vi({color:r&&i?i:"rgb(0,0,0)",animated:!!r})}),Xn=T===!1?"rgba(239, 68, 68, 0.4)":r&&i?i:to.iconActive,Qt=!!(R&&w&&R!==w),Mo=z==="restarting"||!j&&!B,Yo=z==="error"?"#dc2626":z==="ok"?to.iconDefault:Qt?"#b45309":to.iconDefault,Ro=z==="restarting"?"Restarting":z==="error"?"Restart failed":z==="ok"?"Restarted":Qt?"Update bridge":null,Tr=X??(Qt?`Bridge ${w} is older than package ${R}. Restart bridge.`:w?`Bridge ${w}. Restart bridge.`:"Restart bridge"),Ao=Ot(null);mn(()=>{if(!le)return;let D=Ao.current;if(!D)return;let W=()=>{a?.(!0),Te("collapse")},oe=()=>{a?.(!1),rt()};return D.addEventListener("mouseenter",W),D.addEventListener("mouseleave",oe),()=>{D.removeEventListener("mouseenter",W),D.removeEventListener("mouseleave",oe)}},[le,r,a,Te,rt]);let Uo=Ot(null);return mn(()=>{if(le)return;let D=Uo.current;if(!D)return;let W=D.querySelector("[data-popmelt-logo]"),oe=()=>{D.style.opacity="1",!r&&W&&(W.style.fill="#000"),Ke?.()},re=()=>{D.style.opacity=r?"1":"0.5",!r&&W&&(W.style.fill="none")};return D.addEventListener("mouseenter",oe),D.addEventListener("mouseleave",re),()=>{D.removeEventListener("mouseenter",oe),D.removeEventListener("mouseleave",re)}},[le,r,Ke]),le?Bt(yi,{children:[pe("style",{children:`
|
|
43
|
+
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},Oh={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"},gl="devtools-toolbar-expanded",ml="devtools-annotations",hl="devtools-style-modifications",yl="devtools-active-tool",ru="devtools-active-color",iu="devtools-stroke-width",su="devtools-inspected-element",bl="devtools-spacing-changes",Hh={expanded:gl,annotations:ml,styleMods:hl,spacingChanges:bl,tool:yl,color:ru,stroke:iu,inspected:su};function au({state:e,dispatch:t,onScreenshot:n,onSendToClaude:o,hasActiveJobs:r,activeJobColor:i,onCrosshairHover:a,onClear:s,provider:l="claude",onProviderChange:c,availableProviders:u,modelIndex:d=0,modelCount:p=2,modelLabel:g="Opus 4.6",onModelChange:b,onViewThread:C,isThreadPanelOpen:v,mcpStatus:x,bridgeUrl:B,isBridgeConnected:T,packageVersion:A,bridgeVersion:E,bridgeRestartState:V="idle",bridgeRestartMessage:q,onBridgeRestart:se,modelSelectedComponent:P,modelCanvasHoveredComponent:D,onModelComponentHover:f,onSpacingTokenHover:m,onModifySpacingToken:O,onDeleteSpacingToken:pe,modelRefreshKey:ye,evalRefreshKey:ce,onModelComponentAdded:fe,onModelComponentRemoved:ge,onSynthesizeRules:Ge,isSynthesizing:W,onSynthesizeEvals:_,isSynthesizingEvals:J,onRunEval:Te,onViewEvalRunThread:_e,runningEvalIds:Z,onMouseEnter:He,toolbarRef:rt,snapPosition:ve="bottom-right",onSnapPositionChange:ae}){let[Ae,st]=Ur(()=>typeof window<"u"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});Fn(()=>{let F=()=>st({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",F),()=>window.removeEventListener("resize",F)},[]);let[Le,Ee]=Ur(()=>typeof window>"u"?!1:localStorage.getItem(gl)==="true"),[Ye,xt]=Ur(0),zt=nn(0),Rt=nn(0),Dn=nn(e.isAnnotating),Ut=nn(!1),yt=nn(typeof window<"u"?localStorage.getItem(yl):null),zn=nn(typeof window<"u"?localStorage.getItem(ru):null),Mn=nn(typeof window<"u"?localStorage.getItem(iu):null),[Ct,Nt]=Ur(null),mn=nn(!1),bt=nn(null),Lt=nn(null),Kn=nn(null),[Xt,Vn]=Ur([]),$t=nn({x:0,y:0}),cn=nn(null),re=nn(null),ie=nn(null),be=wo(()=>{cn.current=null,re.current=null,ie.current&&(clearTimeout(ie.current),ie.current=null)},[]),We=wo(F=>{Lt.current&&(clearTimeout(Lt.current),Lt.current=null),mn.current?(cn.current=F,re.current={...$t.current},ie.current&&clearTimeout(ie.current),ie.current=setTimeout(()=>{cn.current&&(Nt(cn.current),be())},300)):(bt.current&&clearTimeout(bt.current),bt.current=setTimeout(()=>{mn.current=!0,Nt(F),bt.current=null},500))},[be]),Ne=wo(()=>{be(),bt.current&&(clearTimeout(bt.current),bt.current=null),Lt.current=setTimeout(()=>{mn.current=!1,Nt(null)},150)},[be]);Fn(()=>{let F=Kn.current;if(!F)return;let U=()=>{be(),Lt.current&&(clearTimeout(Lt.current),Lt.current=null)},me=()=>{Lt.current=setTimeout(()=>{mn.current=!1,Nt(null)},150)};return F.addEventListener("mouseenter",U),F.addEventListener("mouseleave",me),()=>{F.removeEventListener("mouseenter",U),F.removeEventListener("mouseleave",me)}},[Ct,be]),Fn(()=>{if(Ct!=="counter"||!B)return;let F=!1;return Eo(`${B}/threads/recent?limit=5`).then(U=>U.ok?U.json():[]).then(U=>{F||Vn(U)}).catch(()=>{}),()=>{F=!0}},[Ct,B]);let tt=wo(F=>{if($t.current={x:F.clientX,y:F.clientY},cn.current&&re.current){let U=re.current,me=Dh(ve);Bh(F.clientX,F.clientY,U.x,U.y,me.left,me.y,me.right,me.y)||(Nt(cn.current),be())}},[be,ve]),Ze=Yr(()=>{let F=(u??[]).map(U=>U==="claude"?"Claude":U==="codex"?"Codex":U==="copilot"?"Copilot":U);return{name:"AI Model",desc:F.length>1?`${F.join(" and ")} are available.`:F.length===1?`Connected to ${F[0]}.`:"No AI providers detected.",usage:F.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:F.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]),At=Yr(()=>{let F=u&&u.length>0?u:["claude","codex","copilot"],U=F.indexOf(l);return F[(U>=0?U+1:0)%F.length]??l},[u,l]),io=Yr(()=>Ah(p,d),[p,d]);Bd(Le,e,Ut,!!r,Hh),Fn(()=>{let F=new URLSearchParams(window.location.search);if(!F.has("popmelt"))return;let U=document.createElement("style");U.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(U);let me=parseInt(F.get("popmelt")||"0",10)||0,xe=()=>{Ee(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})};if(me>0){let Ie=setTimeout(xe,me);return()=>clearTimeout(Ie)}xe()},[]),Fn(()=>{if(localStorage.getItem(gl)==="true"&&!e.isAnnotating){if(Le||Ee(!0),t({type:"SET_TOOL",payload:yt.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),zn.current&&t({type:"SET_COLOR",payload:zn.current}),Mn.current){let Ce=parseFloat(Mn.current);isNaN(Ce)||t({type:"SET_STROKE_WIDTH",payload:Ce})}let me=localStorage.getItem(ml);if(me)try{let Ce=JSON.parse(me);if(Array.isArray(Ce)&&Ce.length>0){for(let Dt of Ce)(Dt.status==="waiting_input"||Dt.status==="in_flight")&&(Dt.status=Dt.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:Ce}})}}catch{}let xe=localStorage.getItem(hl);if(xe)try{let Ce=JSON.parse(xe);Array.isArray(Ce)&&Ce.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:Ce}),ys(Ce))}catch{}let Ie=localStorage.getItem(bl);if(Ie)try{let Ce=JSON.parse(Ie);Array.isArray(Ce)&&Ce.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:Ce})}catch{}let Fe=localStorage.getItem(su);if(Fe)try{let{selector:Ce,info:Dt}=JSON.parse(Fe);if(Ce){let ln=Hn(Ce);if(ln){let Sn=Dt||{...Zn(ln),selector:Ce};t({type:"SELECT_ELEMENT",payload:{el:ln,info:Sn}})}}}catch{}let Me=sessionStorage.getItem("popmelt-pending-focus");if(Me){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:Ce}=JSON.parse(Me);if(Ce){let Dt=me?JSON.parse(me)??[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:Ce}});let ln=Dt.find(Sn=>Sn.id===Ce);if(ln){let Vt=(ln.groupId?Dt.filter(lt=>lt.groupId===ln.groupId):[ln]).flatMap(lt=>lt.points);if(Vt.length>0){let lt=Math.min(...Vt.map(so=>so.x)),yn=Math.max(...Vt.map(so=>so.x)),no=Math.min(...Vt.map(so=>so.y)),Yn=Math.max(...Vt.map(so=>so.y));window.scrollTo({left:(lt+yn)/2-window.innerWidth/2,top:(no+Yn)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch{}}}let U=sessionStorage.getItem("popmelt-pending-thread");if(U){sessionStorage.removeItem("popmelt-pending-thread");try{let{threadId:me,selector:xe,preview:Ie}=JSON.parse(U);me&&requestAnimationFrame(()=>{if(xe)try{let Fe=document.querySelector(xe);if(Fe){let Me=Fe.getBoundingClientRect(),Ce=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:Ce,point:{x:Me.left+Me.width,y:Me.top},text:Ie||"[thread]",linkedSelector:xe,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[Ce],threadId:me}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[Ce],status:"resolved"}})}}catch{}C&&C(me)})}catch{}}return Ut.current=!0,()=>{Ut.current=!1}},[]);let Gn=nn(e.styleModifications);Fn(()=>{let F=Gn.current,U=e.styleModifications;F!==U&&(bs(F),ys(U),Gn.current=U)},[e.styleModifications]),Fn(()=>{let F=Dn.current;Dn.current=e.isAnnotating,F&&!e.isAnnotating&&Le&&Ee(!1)},[e.isAnnotating,Le]);let hn=nn(Le);hn.current=Le,Fn(()=>{let F=me=>{if(me.key==="Meta"||me.key==="Control"){let xe=Date.now();if(xe-zt.current<300){if(Rt.current++,Rt.current>=2){if(hn.current)t({type:"SET_ANNOTATING",payload:!1}),Ee(!1);else{let Me=localStorage.getItem(yl);t({type:"SET_TOOL",payload:Me||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),Ee(!0)}Rt.current=0}}else Rt.current=1;zt.current=xe}else Rt.current=0},U=me=>{me.key!=="Meta"&&me.key!=="Control"&&(Rt.current=0)};return window.addEventListener("keydown",F),window.addEventListener("keyup",U),()=>{window.removeEventListener("keydown",F),window.removeEventListener("keyup",U)}},[t]);let Xe=wo(F=>{be(),t({type:"SET_TOOL",payload:F}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),mn.current=!1,Nt(null),bt.current&&(clearTimeout(bt.current),bt.current=null),Lt.current&&(clearTimeout(Lt.current),Lt.current=null)},[t,e.isAnnotating,be]),gt=wo(async()=>{window.focus(),await n()},[n]),Nn=wo(async()=>{o&&await o()},[o]),dn=wo(()=>{t({type:"SET_ANNOTATING",payload:!1}),Ee(!1)},[t]),Bt=wo(()=>{bs(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(F=>F.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(ml),localStorage.removeItem(hl),localStorage.removeItem(bl),ue(null),s?.()},[t,e.styleModifications,s]),[Jn,Wt]=Ur(()=>{if(zn.current){let F=zn.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(F?.[1])return parseFloat(F[1])}return 29}),k=nn(null),M=nn(null),K=nn(!1),te=wo(F=>{let U=F.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return U&&U[1]?parseFloat(U[1]):null},[]);Fn(()=>{K.current=!0;let F=`oklch(0.628 0.258 ${Jn})`;t({type:"SET_COLOR",payload:F}),requestAnimationFrame(()=>{K.current=!1})},[Jn,t]),Fn(()=>{if(K.current)return;let F=te(e.activeColor);F!==null&&Math.abs(F-Jn)>.5&&Wt(F)},[e.activeColor,te,Jn]);let de=nn(null);Fn(()=>{if(r&&i){let F=te(i);F!==null&&Math.abs(F-Jn)>.5&&(de.current===null&&(de.current=Jn),Wt(F))}else de.current!==null&&(Wt(de.current),de.current=null)},[r,i,te]);let we=e.annotations.length>0;Fn(()=>{let F=M.current;if(!F||!we)return;let U=me=>{me.preventDefault(),me.stopPropagation();let xe=me.deltaY>0?-1:1,Ie=((Jn+xe)%360+360)%360,Fe=`oklch(0.628 0.258 ${Ie})`;Wt(Ie),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:Fe}})};return F.addEventListener("wheel",U,{passive:!1}),()=>F.removeEventListener("wheel",U)},[we,e.selectedAnnotationIds,e.lastSelectedId,Jn,t]);let Je=nn(!1),ze=nn(0);Fn(()=>{let F=e.annotations.some(xe=>!xe.status||xe.status==="pending"),U=Je.current;Je.current=F;let me=ze.current===0&&e.annotations.length>0;if(ze.current=e.annotations.length,(U&&!F||me&&!F)&&e.annotations.length>0){let xe=e.annotations.map(Ie=>te(Ie.color)).filter(Ie=>Ie!==null);if(xe.length>0){let Ie=0,Fe=-1;for(let Me=0;Me<360;Me++){let Ce=Math.min(...xe.map(Dt=>{let ln=Math.abs(Me-Dt);return Math.min(ln,360-ln)}));Ce>Fe&&(Fe=Ce,Ie=Me)}Wt(Ie)}}},[e.annotations,te]);let it=nn(!1),$e=wo(()=>{it.current=!1,k.current=setTimeout(()=>{it.current=!0,Wt(29)},500)},[]),vt=wo(()=>{k.current&&(clearTimeout(k.current),k.current=null)},[]);Fn(()=>()=>{k.current&&clearTimeout(k.current),ie.current&&clearTimeout(ie.current)},[]);let Kt=ri(),$n=Yr(()=>e.annotations.filter(F=>!F.pathname||F.pathname===Kt),[e.annotations,Kt]),Xn=Yr(()=>ws(e.annotations),[e.annotations]),jt=Yr(()=>{let F=[],U=new Set,me=[...e.annotations].sort((xe,Ie)=>xe.timestamp-Ie.timestamp);for(let xe of me)if(!Xn.has(xe))if(xe.groupId){if(!U.has(xe.groupId)){U.add(xe.groupId);let Ie=e.annotations.filter(Ce=>Ce.groupId===xe.groupId&&!Xn.has(Ce)),Fe=Ie.find(Ce=>Ce.type!=="text")||Ie[0],Me=Math.min(...Ie.map(Ce=>Ce.timestamp));F.push({id:Fe.id,pathname:xe.pathname,annotations:Ie,timestamp:Me})}}else F.push({id:xe.id,pathname:xe.pathname,annotations:[xe],timestamp:xe.timestamp});return F},[e.annotations,Xn]),Ho=Yr(()=>jt.filter(F=>!F.pathname||F.pathname===Kt),[jt,Kt]),[z,ue]=Ur(null),Ue=jt.length+e.styleModifications.length;Fn(()=>{(Ue===0||z!==null&&z>=Ue)&&ue(null)},[Ue,z]),Fn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){ue(null);return}if(e.selectedAnnotationIds.length>0){let F=e.selectedAnnotationIds[0],U=jt.findIndex(me=>me.id===F||me.annotations.some(xe=>xe.id===F));U>=0&&U!==z&&ue(U)}},[e.selectedAnnotationIds,e.inspectedElement,jt]);let qt=wo(()=>{if(Ue===0)return;let F;if(z===null?F=0:z+1>=Ue?F=null:F=z+1,ue(F),F===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(F<jt.length){let U=jt[F];if(!(!U.pathname||U.pathname===Kt)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:U.id,pathname:U.pathname})),window.location.href=U.pathname;return}t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:U.id}});let xe=U.annotations.find(lt=>lt.type!=="text")||U.annotations[0];if(U.annotations.some(lt=>lt.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(xe?.type&&xe.type!=="text"&&xe.type!=="inspector"){t({type:"SET_TOOL",payload:xe.type});let lt=Kr.findIndex(yn=>yn.type===xe.type);lt>=0&&xt(lt)}if(xe?.color){t({type:"SET_COLOR",payload:xe.color});let lt=te(xe.color);lt!==null&&Wt(lt)}let Fe=U.annotations.flatMap(lt=>lt.points);if(Fe.length===0)return;let Me=Math.min(...Fe.map(lt=>lt.x)),Ce=Math.max(...Fe.map(lt=>lt.x)),Dt=Math.min(...Fe.map(lt=>lt.y)),ln=Math.max(...Fe.map(lt=>lt.y)),Sn=(Me+Ce)/2,Vt=(Dt+ln)/2;if(window.scrollTo({left:Sn-window.innerWidth/2,top:Vt-window.innerHeight/2,behavior:"smooth"}),v&&C){let lt=U.annotations.find(yn=>yn.threadId)?.threadId;lt&&C(lt)}}else{let U=F-jt.length,me=e.styleModifications[U];if(!me)return;let xe=Hn(me.selector);if(!xe)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:xe,info:me.element}});let Ie=xe.getBoundingClientRect(),Fe=Ie.left+Ie.width/2+window.scrollX,Me=Ie.top+Ie.height/2+window.scrollY;window.scrollTo({left:Fe-window.innerWidth/2,top:Me-window.innerHeight/2,behavior:"smooth"})}},[jt,Kt,e.styleModifications,Ue,z,t,te,v,C]);Fn(()=>{if(!Le)return;let F=U=>{let me=document.activeElement;for(;me?.shadowRoot?.activeElement;)me=me.shadowRoot.activeElement;if(me?.tagName==="INPUT"||me?.tagName==="TEXTAREA"||me?.isContentEditable)return;if((U.metaKey||U.ctrlKey)&&U.key==="Enter"){o&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(Fe=>!Fe.captured).length>0)&&(U.preventDefault(),Nn());return}if((U.metaKey||U.ctrlKey)&&(U.key==="c"||U.key==="C"||U.code==="KeyC")){let Fe=window.getSelection();if(Fe&&Fe.toString().length>0)return;(e.annotations.length>0||e.styleModifications.length>0)&&(U.preventDefault(),window.focus(),gt());return}if((U.metaKey||U.ctrlKey)&&(U.key==="Backspace"||U.key==="Delete")){U.preventDefault(),Bt();return}if(U.metaKey||U.ctrlKey||U.altKey)return;let xe={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand",e:"eval"};if(U.key.toLowerCase()==="m"){U.preventDefault(),Xe("model");return}let Ie=xe[U.key.toLowerCase()];if(Ie){U.preventDefault();let Fe=Kr.findIndex(Me=>Me.type===Ie);Fe>=0&&xt(Fe),Xe(Ie)}};return window.addEventListener("keydown",F),()=>window.removeEventListener("keydown",F)},[Le,Xe,gt,Nn,o,Bt,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,Ct]);let to=oc(ve,Ae.w,Ae.h),qn={...Oh,...to,borderRadius:0,padding:Le?"0 8px":"0",width:Le?"auto":48,height:48,gap:0,justifyContent:Le?"flex-start":"center"},In=ke("div",{style:ks({color:r&&i?i:"rgb(0,0,0)",animated:!!r})}),ur=T===!1?"rgba(239, 68, 68, 0.4)":r&&i?i:Ro.iconActive,mo=!!(A&&E&&A!==E),ho=V==="restarting"||!se&&!B,yo=V==="error"?"#dc2626":V==="ok"?Ro.iconDefault:mo?"#b45309":Ro.iconDefault,Rn=V==="restarting"?"Restarting":V==="error"?"Restart failed":V==="ok"?"Restarted":mo?"Update bridge":null,qr=q??(mo?`Bridge ${E} is older than package ${A}. Restart bridge.`:E?`Bridge ${E}. Restart bridge.`:"Restart bridge"),er=nn(null);Fn(()=>{if(!Le)return;let F=er.current;if(!F)return;let U=()=>{a?.(!0),We("collapse")},me=()=>{a?.(!1),Ne()};return F.addEventListener("mouseenter",U),F.addEventListener("mouseleave",me),()=>{F.removeEventListener("mouseenter",U),F.removeEventListener("mouseleave",me)}},[Le,r,a,We,Ne]);let tr=nn(null);return Fn(()=>{if(Le)return;let F=tr.current;if(!F)return;let U=F.querySelector("[data-popmelt-logo]"),me=()=>{F.style.opacity="1",!r&&U&&(U.style.fill="#000"),He?.()},xe=()=>{F.style.opacity=r?"1":"0.5",!r&&U&&(U.style.fill="none")};return F.addEventListener("mouseenter",me),F.addEventListener("mouseleave",xe),()=>{F.removeEventListener("mouseenter",me),F.removeEventListener("mouseleave",xe)}},[Le,r,He]),Le?Qt(Ki,{children:[ke("style",{children:`
|
|
16
44
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
17
45
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
18
|
-
`}),
|
|
46
|
+
`}),ke("div",{id:"devtools-scrim",style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.06)",zIndex:9997,pointerEvents:"none"}}),!v&&(Ct==="eval"||e.activeTool==="eval")&&ke(Fd,{bridgeUrl:B,refreshKey:ce,snapPosition:ve,onSynthesize:_,isSynthesizing:J,onRunEval:Te,onViewRunThread:_e,runningEvalIds:Z,onMouseEnter:()=>{be(),Lt.current&&(clearTimeout(Lt.current),Lt.current=null)},onMouseLeave:e.activeTool==="eval"?void 0:Ne}),!v&&(Ct==="model"||e.activeTool==="model")&&ke(eu,{bridgeUrl:B,selectedComponent:P,hoveredComponent:D,onComponentHover:f,onSpacingTokenHover:m,onModifySpacingToken:O,onDeleteSpacingToken:pe,modelRefreshKey:ye,onComponentAdded:fe,onComponentRemoved:ge,onSynthesizeRules:Ge,isSynthesizing:W,snapPosition:ve,onMouseEnter:()=>{be(),Lt.current&&(clearTimeout(Lt.current),Lt.current=null)},onMouseLeave:e.activeTool==="model"?void 0:Ne}),Ct&&Ct!=="model"&&Ct!=="eval"&&(Ct==="provider"||ou[Ct])&&(()=>{let F=Ct==="provider"?Ze:ou[Ct];return Qt("div",{ref:Kn,style:{...rc(ve,Ae.w,Ae.h),width:300,backgroundColor:"#eaeaea",...gi,boxSizing:"content-box",zIndex:10001,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:12,color:"#1f2937",padding:12,...Ct!=="collapse"&&Ct!=="counter"?{pointerEvents:"none"}:{}},children:[Ct==="collapse"&&ke("div",{style:{marginBottom:10,width:"fit-content",color:Ro.iconDefault},children:ke("svg",{width:"48",height:"48",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:ke("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"})})}),Qt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[ke("span",{children:F.name}),F.keys[0]&&ke("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:F.keys[0].key})]}),ke("div",{style:{color:"#6b7280",lineHeight:1.5,marginBottom:Ct==="collapse"?0:10},children:F.desc.split(`
|
|
19
47
|
|
|
20
|
-
`).map((W,oe)=>pe("p",{style:{margin:0,marginTop:oe>0?8:0},children:W},oe))}),D.usage.map((W,oe)=>Bt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[pe("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),pe("span",{children:W})]},oe)),nt==="collapse"&&Re&&Bt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8},children:[pe("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:6,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Position"}),pe("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:3,width:"fit-content"},children:Sl.map(W=>{let oe=W===ve;return pe("button",{type:"button",onClick:()=>{Ve(null),Ut.current=!1,fe(),Re(W)},title:W,style:{width:24,height:16,border:"none",cursor:"pointer",padding:0,backgroundColor:oe?"#1f2937":"rgba(0,0,0,0.08)",transition:"background-color 100ms ease"},onMouseEnter:re=>{oe||(re.currentTarget.style.backgroundColor="rgba(0,0,0,0.15)")},onMouseLeave:re=>{oe||(re.currentTarget.style.backgroundColor="rgba(0,0,0,0.08)")}},W)})})]}),nt==="collapse"&&(()=>{let W=Object.entries(I??{}),oe=W.filter(([,Ee])=>Ee.found&&!Ee.disabled).map(([Ee])=>Ee.charAt(0).toUpperCase()+Ee.slice(1)),re=W.filter(([,Ee])=>!Ee.found).map(([Ee])=>Ee);if(!B&&!j&&oe.length===0&&re.length===0)return null;let ce=re.map(Ee=>Ee.charAt(0).toUpperCase()+Ee.slice(1)),xe=[...oe,...ce];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:[(j||B)&&pe("button",{type:"button",onClick:()=>{Mo||(j?j():Qa(B))},disabled:Mo,title:Tr,"aria-label":Ro??"Restart bridge",style:{display:"flex",alignItems:"center",justifyContent:"center",width:22,height:22,border:"none",borderRadius:0,backgroundColor:Qt||z!=="idle"?"rgba(0,0,0,0.07)":"rgba(0,0,0,0.04)",color:Yo,cursor:Mo?"default":"pointer",padding:0,opacity:Mo?.55:1,flexShrink:0},children:z==="ok"?pe(zg,{size:14,strokeWidth:1.8}):pe(Vg,{size:13,strokeWidth:1.7,style:{animation:z==="restarting"?"spin 0.8s linear infinite":void 0}})}),oe.length>0?Bt("span",{style:{color:"#6b7280"},children:["Available in ",xe.join(", ")]}):re.length>0?Bt("span",{style:{color:"#6b7280"},children:["Available in ",ce.join(", ")]}):null]})})(),D.keys.length>1&&pe("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:D.keys.slice(1).map((W,oe)=>Bt("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:W.accent?"#fff":"#6b7280"},children:[pe("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}),pe("span",{style:{color:W.accent?e.activeColor:void 0,fontWeight:W.accent?600:void 0},children:W.desc})]},oe))}),nt==="counter"&&Ze.length>0&&(()=>{let W=pe("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:pe("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Active"})}),oe=new Map;for(let xe of Ze){let Ee=xe.pathname||yn;oe.has(Ee)||oe.set(Ee,[]),oe.get(Ee).push(xe)}let re=[...oe.entries()],ce=re.length>1;return Bt("div",{children:[W,pe("div",{style:{maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:re.map(([xe,Ee])=>pe("div",{style:{marginBottom:ce?4:0},children:Ee.map(ye=>{let Vt=ye.annotations.find(Ln=>Ln.type==="text"&&Ln.text)?.text||`[${ye.annotations[0]?.type??"annotation"}]`,_t=e.selectedAnnotationIds.includes(ye.id),Tt=Ze.indexOf(ye),Qe=Tt+1,En=ye.annotations[0]?.color??e.activeColor;return Bt("div",{onClick:()=>{if(!(!ye.pathname||ye.pathname===yn)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:ye.id,pathname:ye.pathname})),window.location.href=ye.pathname;return}if(wn(Tt),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:ye.id}}),C){let pn=ye.annotations.find(Pn=>Pn.threadId)?.threadId;pn&&C(pn)}Ut.current=!1,Ve(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:Ln=>{let pn=Ln.currentTarget.querySelector("[data-route-badge]");pn&&(pn.style.backgroundColor=En,pn.style.color="#fff")},onMouseLeave:Ln=>{if(_t)return;let pn=Ln.currentTarget.querySelector("[data-route-badge]");pn&&(pn.style.backgroundColor="rgba(0,0,0,0.06)",pn.style.color="#6b7280")},children:[Bt("code",{"data-route-badge":!0,style:{fontSize:10,color:_t?"#fff":"#6b7280",backgroundColor:_t?En:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[Qe,". ",ce?xe:""]}),pe("span",{style:{fontSize:11,color:_t?"#1f2937":"#6b7280",fontWeight:_t?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Vt})]},ye.id)})},xe))})]})})(),nt==="counter"&&(()=>{let W=new Set(Ze.flatMap(ce=>ce.annotations.map(xe=>xe.threadId).filter(Boolean))),oe=Sn.filter(ce=>!W.has(ce.id));if(oe.length===0)return null;let re=ce=>{let xe=Math.floor((Date.now()-ce)/1e3);if(xe<60)return"now";let Ee=Math.floor(xe/60);if(Ee<60)return`${Ee}m`;let ye=Math.floor(Ee/60);return ye<24?`${ye}h`:`${Math.floor(ye/24)}d`};return Bt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:[pe("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Recent"}),oe.map(ce=>Bt("div",{onClick:()=>{let xe=ce.elementIdentifiers[0];if(xe){let Ee=xe.indexOf(":"),ye=Ee>0&&xe[0]==="/",Dt=ye?xe.slice(0,Ee):void 0,Vt=ye?xe.slice(Ee+1):xe;if(!(!Dt||Dt===yn)){sessionStorage.setItem("popmelt-pending-thread",JSON.stringify({threadId:ce.id,selector:Vt,preview:ce.preview})),window.location.href=Dt;return}try{let Tt=document.querySelector(Vt);if(Tt){let Qe=Tt.getBoundingClientRect(),En=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:En,point:{x:Qe.left+Qe.width,y:Qe.top},text:ce.preview,linkedSelector:Vt,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[En],threadId:ce.id}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[En],status:"resolved"}})}}catch{}}C&&C(ce.id),Ut.current=!1,Ve(null)},style:{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:8,padding:"2px 0",cursor:"pointer",color:"#6b7280",fontSize:11},onMouseEnter:xe=>{xe.currentTarget.style.color="#1f2937"},onMouseLeave:xe=>{xe.currentTarget.style.color="#6b7280"},children:[pe("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:ce.preview}),pe("span",{style:{flexShrink:0,fontSize:10,color:"#9ca3af"},children:re(ce.createdAt)})]},ce.id))]})})()]})})(),Bt("div",{ref:D=>{Ge&&(Ge.current=D)},id:"devtools-toolbar",style:oo,onMouseEnter:Ke,onMouseMove:dt,children:[ro,Bt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[pe("span",{onMouseEnter:()=>Te("inspector"),onMouseLeave:rt,children:pe(Wo,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>He("inspector"),children:pe(Gg,{size:20,strokeWidth:1.5})})}),pe("span",{onMouseEnter:()=>Te("hand"),onMouseLeave:rt,children:pe(Wo,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>He("hand"),children:Bt("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[pe(jg,{size:20,strokeWidth:1.5}),e.styleModifications.filter(D=>!D.captured).length>0&&pe("div",{style:{position:"absolute",top:-7,right:-9,minWidth:14,height:14,borderRadius:0,backgroundColor:e.activeColor,color:"#fff",fontSize:9,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 2px",lineHeight:1},children:e.styleModifications.filter(D=>!D.captured).length})]})})}),(()=>{let D=Cr[Oe],W=D.icon,oe=e.isAnnotating&&Zg.has(e.activeTool);return pe("span",{onMouseEnter:()=>Te(D.type),onMouseLeave:rt,children:Bt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[pe(Wo,{active:oe,siblingActive:e.isAnnotating,onClick:()=>He(D.type),children:pe(W,{size:20,strokeWidth:1.5})}),pe("button",{type:"button",onClick:()=>{let re=(Oe+1)%Cr.length;lt(re),He(Cr[re].type)},title:"Cycle shape tool",style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2,width:12,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 2px",opacity:e.isAnnotating&&!oe?.5:1,transition:"opacity 150ms ease"},children:Cr.map((re,ce)=>pe("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:ce===Oe?to.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},ce))})]})})})(),tm.map(({type:D,icon:W,label:oe,shortcut:re})=>pe("span",{onMouseEnter:()=>Te(D),onMouseLeave:rt,children:pe(Wo,{active:e.isAnnotating&&e.activeTool===D,siblingActive:e.isAnnotating,onClick:()=>He(D),children:pe(W,{size:20,strokeWidth:1.5})})},D)),pe("span",{onMouseEnter:()=>Te("eval"),onMouseLeave:rt,children:pe(Wo,{active:e.isAnnotating&&e.activeTool==="eval",siblingActive:e.isAnnotating,onClick:()=>He("eval"),children:pe(Wg,{size:18,strokeWidth:1.5})})}),pe("span",{onMouseEnter:()=>Te("model"),onMouseLeave:rt,children:pe(Wo,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>He("model"),children:pe($g,{size:17,strokeWidth:1.5})})})]}),pe(Zc,{}),Bt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(Ze.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(D=>!D.captured).length>0)&&(()=>{let D=kt!==null&&kt<Ze.length?Ze[kt]:null,W=e.annotations.length>0&&e.annotations.every(ce=>ce.status&&ce.status!=="pending"),oe=kt!==null?D?.annotations.some(ce=>ce.status&&ce.status!=="pending")??!1:W,re=`oklch(0.628 0.258 ${Et})`;return pe("span",{onMouseEnter:()=>Te("counter"),onMouseLeave:rt,children:pe("button",{ref:Le,type:"button",onClick:()=>{if(Io.current){Io.current=!1;return}Cn()},onMouseDown:jo,onMouseUp:or,onMouseLeave:or,title:"",style:{display:"flex",alignItems:"center",justifyContent:"center",gap:4,minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:oe&&kt===null?"#999999":re,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let ce=Ze.length+e.styleModifications.length+e.spacingTokenChanges.filter(Ee=>!Ee.captured).length;if(kt!==null)return Bt(yi,{children:[kt+1,Bt("span",{style:{opacity:.4,display:"flex",gap:4},children:[pe("span",{children:"/"}),pe("span",{children:ce})]})]});let xe=fo.length+e.styleModifications.length+e.spacingTokenChanges.filter(Ee=>!Ee.captured).length;return ce>xe?Bt(yi,{children:[xe,Bt("span",{style:{opacity:.4,display:"flex",gap:4},children:[pe("span",{children:"/"}),pe("span",{children:ce})]})]}):ce})()})})})(),(e.annotations.length>0||e.styleModifications.length>0)&&pe("span",{onMouseEnter:()=>Te("clear"),onMouseLeave:rt,children:pe(Wo,{siblingActive:e.isAnnotating,onClick:qe,title:"Clear all (\u2318\u232B)",children:pe(Kg,{size:17,strokeWidth:1.5})})}),c&&Bt(yi,{children:[pe("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),pe("span",{onMouseEnter:()=>Te("provider"),onMouseLeave:rt,style:{display:"contents"},children:Bt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[pe(Wo,{onClick:()=>c(Kt),children:pe(hi,{provider:l})}),Bt("button",{type:"button",onClick:()=>{let D=(u+1)%p;v?.(D)},style:{display:"flex",alignItems:"center",gap:6,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 4px 0 0",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:10,fontWeight:500,color:to.iconDefault,whiteSpace:"nowrap"},children:[pe("span",{children:f}),pe("span",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:2},children:Wn.map(D=>pe("div",{style:{width:D.overflow?2:3,height:D.overflow?2:3,borderRadius:"50%",backgroundColor:D.active?to.iconDefault:"rgba(0,0,0,0.2)",opacity:D.overflow?.65:1,transition:"background-color 150ms ease, opacity 150ms ease"}},D.key))})]})]})})]}),pe("div",{ref:Ao,style:{display:"inline-flex",cursor:"pointer"},children:pe("button",{type:"button",onClick:Ae,title:"Collapse (\u2318\u2318)",style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,border:"none",background:"none",padding:0,cursor:"inherit"},children:pe("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:Xn,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:pe("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(yi,{children:[pe("style",{children:`
|
|
48
|
+
`).map((U,me)=>ke("p",{style:{margin:0,marginTop:me>0?8:0},children:U},me))}),F.usage.map((U,me)=>Qt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[ke("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),ke("span",{children:U})]},me)),Ct==="collapse"&&ae&&Qt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8},children:[ke("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:6,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Position"}),ke("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:3,width:"fit-content"},children:ac.map(U=>{let me=U===ve;return ke("button",{type:"button",onClick:()=>{Nt(null),mn.current=!1,be(),ae(U)},title:U,style:{width:24,height:16,border:"none",cursor:"pointer",padding:0,backgroundColor:me?"#1f2937":"rgba(0,0,0,0.08)",transition:"background-color 100ms ease"},onMouseEnter:xe=>{me||(xe.currentTarget.style.backgroundColor="rgba(0,0,0,0.15)")},onMouseLeave:xe=>{me||(xe.currentTarget.style.backgroundColor="rgba(0,0,0,0.08)")}},U)})})]}),Ct==="collapse"&&(()=>{let U=Object.entries(x??{}),me=U.filter(([,Me])=>Me.found&&!Me.disabled).map(([Me])=>Me.charAt(0).toUpperCase()+Me.slice(1)),xe=U.filter(([,Me])=>!Me.found).map(([Me])=>Me);if(!B&&!se&&me.length===0&&xe.length===0)return null;let Ie=xe.map(Me=>Me.charAt(0).toUpperCase()+Me.slice(1)),Fe=[...me,...Ie];return Qt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[(se||B)&&ke("button",{type:"button",onClick:()=>{ho||(se?se():zl(B))},disabled:ho,title:qr,"aria-label":Rn??"Restart bridge",style:{display:"flex",alignItems:"center",justifyContent:"center",width:22,height:22,border:"none",borderRadius:0,backgroundColor:mo||V!=="idle"?"rgba(0,0,0,0.07)":"rgba(0,0,0,0.04)",color:yo,cursor:ho?"default":"pointer",padding:0,opacity:ho?.55:1,flexShrink:0},children:V==="ok"?ke(vh,{size:14,strokeWidth:1.8}):ke(Th,{size:13,strokeWidth:1.7,style:{animation:V==="restarting"?"spin 0.8s linear infinite":void 0}})}),me.length>0?Qt("span",{style:{color:"#6b7280"},children:["Available in ",Fe.join(", ")]}):xe.length>0?Qt("span",{style:{color:"#6b7280"},children:["Available in ",Ie.join(", ")]}):null]})})(),F.keys.length>1&&ke("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:F.keys.slice(1).map((U,me)=>Qt("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:U.accent?"#fff":"#6b7280"},children:[ke("code",{style:{fontSize:10,backgroundColor:U.accent?e.activeColor:"rgba(0,0,0,0.06)",color:U.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:U.key}),ke("span",{style:{color:U.accent?e.activeColor:void 0,fontWeight:U.accent?600:void 0},children:U.desc})]},me))}),Ct==="counter"&&jt.length>0&&(()=>{let U=ke("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:ke("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Active"})}),me=new Map;for(let Fe of jt){let Me=Fe.pathname||Kt;me.has(Me)||me.set(Me,[]),me.get(Me).push(Fe)}let xe=[...me.entries()],Ie=xe.length>1;return Qt("div",{children:[U,ke("div",{style:{maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:xe.map(([Fe,Me])=>ke("div",{style:{marginBottom:Ie?4:0},children:Me.map(Ce=>{let ln=Ce.annotations.find(no=>no.type==="text"&&no.text)?.text||`[${Ce.annotations[0]?.type??"annotation"}]`,Sn=e.selectedAnnotationIds.includes(Ce.id),Vt=jt.indexOf(Ce),lt=Vt+1,yn=Ce.annotations[0]?.color??e.activeColor;return Qt("div",{onClick:()=>{if(!(!Ce.pathname||Ce.pathname===Kt)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:Ce.id,pathname:Ce.pathname})),window.location.href=Ce.pathname;return}if(ue(Vt),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:Ce.id}}),C){let Yn=Ce.annotations.find(so=>so.threadId)?.threadId;Yn&&C(Yn)}mn.current=!1,Nt(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:no=>{let Yn=no.currentTarget.querySelector("[data-route-badge]");Yn&&(Yn.style.backgroundColor=yn,Yn.style.color="#fff")},onMouseLeave:no=>{if(Sn)return;let Yn=no.currentTarget.querySelector("[data-route-badge]");Yn&&(Yn.style.backgroundColor="rgba(0,0,0,0.06)",Yn.style.color="#6b7280")},children:[Qt("code",{"data-route-badge":!0,style:{fontSize:10,color:Sn?"#fff":"#6b7280",backgroundColor:Sn?yn:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[lt,". ",Ie?Fe:""]}),ke("span",{style:{fontSize:11,color:Sn?"#1f2937":"#6b7280",fontWeight:Sn?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:ln})]},Ce.id)})},Fe))})]})})(),Ct==="counter"&&(()=>{let U=new Set(jt.flatMap(Ie=>Ie.annotations.map(Fe=>Fe.threadId).filter(Boolean))),me=Xt.filter(Ie=>!U.has(Ie.id));if(me.length===0)return null;let xe=Ie=>{let Fe=Math.floor((Date.now()-Ie)/1e3);if(Fe<60)return"now";let Me=Math.floor(Fe/60);if(Me<60)return`${Me}m`;let Ce=Math.floor(Me/60);return Ce<24?`${Ce}h`:`${Math.floor(Ce/24)}d`};return Qt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:[ke("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Recent"}),me.map(Ie=>Qt("div",{onClick:()=>{let Fe=Ie.elementIdentifiers[0];if(Fe){let Me=Fe.indexOf(":"),Ce=Me>0&&Fe[0]==="/",Dt=Ce?Fe.slice(0,Me):void 0,ln=Ce?Fe.slice(Me+1):Fe;if(!(!Dt||Dt===Kt)){sessionStorage.setItem("popmelt-pending-thread",JSON.stringify({threadId:Ie.id,selector:ln,preview:Ie.preview})),window.location.href=Dt;return}try{let Vt=document.querySelector(ln);if(Vt){let lt=Vt.getBoundingClientRect(),yn=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:yn,point:{x:lt.left+lt.width,y:lt.top},text:Ie.preview,linkedSelector:ln,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[yn],threadId:Ie.id}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[yn],status:"resolved"}})}}catch{}}C&&C(Ie.id),mn.current=!1,Nt(null)},style:{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:8,padding:"2px 0",cursor:"pointer",color:"#6b7280",fontSize:11},onMouseEnter:Fe=>{Fe.currentTarget.style.color="#1f2937"},onMouseLeave:Fe=>{Fe.currentTarget.style.color="#6b7280"},children:[ke("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Ie.preview}),ke("span",{style:{flexShrink:0,fontSize:10,color:"#9ca3af"},children:xe(Ie.createdAt)})]},Ie.id))]})})()]})})(),Qt("div",{ref:F=>{rt&&(rt.current=F)},id:"devtools-toolbar",style:qn,onMouseEnter:He,onMouseMove:tt,children:[In,Qt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[ke("span",{onMouseEnter:()=>We("inspector"),onMouseLeave:Ne,children:ke(dr,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>Xe("inspector"),children:ke(Eh,{size:20,strokeWidth:1.5})})}),ke("span",{onMouseEnter:()=>We("hand"),onMouseLeave:Ne,children:ke(dr,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>Xe("hand"),children:Qt("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[ke(Ch,{size:20,strokeWidth:1.5}),e.styleModifications.filter(F=>!F.captured).length>0&&ke("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(F=>!F.captured).length})]})})}),(()=>{let F=Kr[Ye],U=F.icon,me=e.isAnnotating&&Ph.has(e.activeTool);return ke("span",{onMouseEnter:()=>We(F.type),onMouseLeave:Ne,children:Qt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[ke(dr,{active:me,siblingActive:e.isAnnotating,onClick:()=>Xe(F.type),children:ke(U,{size:20,strokeWidth:1.5})}),ke("button",{type:"button",onClick:()=>{let xe=(Ye+1)%Kr.length;xt(xe),Xe(Kr[xe].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&&!me?.5:1,transition:"opacity 150ms ease"},children:Kr.map((xe,Ie)=>ke("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:Ie===Ye?Ro.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},Ie))})]})})})(),_h.map(({type:F,icon:U,label:me,shortcut:xe})=>ke("span",{onMouseEnter:()=>We(F),onMouseLeave:Ne,children:ke(dr,{active:e.isAnnotating&&e.activeTool===F,siblingActive:e.isAnnotating,onClick:()=>Xe(F),children:ke(U,{size:20,strokeWidth:1.5})})},F)),ke("span",{onMouseEnter:()=>We("eval"),onMouseLeave:Ne,children:ke(dr,{active:e.isAnnotating&&e.activeTool==="eval",siblingActive:e.isAnnotating,onClick:()=>Xe("eval"),children:ke(wh,{size:18,strokeWidth:1.5})})}),ke("span",{onMouseEnter:()=>We("model"),onMouseLeave:Ne,children:ke(dr,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>Xe("model"),children:ke(Sh,{size:17,strokeWidth:1.5})})})]}),ke(tu,{}),Qt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(jt.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(F=>!F.captured).length>0)&&(()=>{let F=z!==null&&z<jt.length?jt[z]:null,U=e.annotations.length>0&&e.annotations.every(Ie=>Ie.status&&Ie.status!=="pending"),me=z!==null?F?.annotations.some(Ie=>Ie.status&&Ie.status!=="pending")??!1:U,xe=`oklch(0.628 0.258 ${Jn})`;return ke("span",{onMouseEnter:()=>We("counter"),onMouseLeave:Ne,children:ke("button",{ref:M,type:"button",onClick:()=>{if(it.current){it.current=!1;return}qt()},onMouseDown:$e,onMouseUp:vt,onMouseLeave:vt,title:"",style:{display:"flex",alignItems:"center",justifyContent:"center",gap:4,minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:me&&z===null?"#999999":xe,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let Ie=jt.length+e.styleModifications.length+e.spacingTokenChanges.filter(Me=>!Me.captured).length;if(z!==null)return Qt(Ki,{children:[z+1,Qt("span",{style:{opacity:.4,display:"flex",gap:4},children:[ke("span",{children:"/"}),ke("span",{children:Ie})]})]});let Fe=Ho.length+e.styleModifications.length+e.spacingTokenChanges.filter(Me=>!Me.captured).length;return Ie>Fe?Qt(Ki,{children:[Fe,Qt("span",{style:{opacity:.4,display:"flex",gap:4},children:[ke("span",{children:"/"}),ke("span",{children:Ie})]})]}):Ie})()})})})(),(e.annotations.length>0||e.styleModifications.length>0)&&ke("span",{onMouseEnter:()=>We("clear"),onMouseLeave:Ne,children:ke(dr,{siblingActive:e.isAnnotating,onClick:Bt,title:"Clear all (\u2318\u232B)",children:ke(Rh,{size:17,strokeWidth:1.5})})}),c&&Qt(Ki,{children:[ke("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),ke("span",{onMouseEnter:()=>We("provider"),onMouseLeave:Ne,style:{display:"contents"},children:Qt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[ke(dr,{onClick:()=>c(At),children:ke(Ui,{provider:l})}),Qt("button",{type:"button",onClick:()=>{let F=(d+1)%p;b?.(F)},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:Ro.iconDefault,whiteSpace:"nowrap"},children:[ke("span",{children:g}),ke("span",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:2},children:io.map(F=>ke("div",{style:{width:F.overflow?2:3,height:F.overflow?2:3,borderRadius:"50%",backgroundColor:F.active?Ro.iconDefault:"rgba(0,0,0,0.2)",opacity:F.overflow?.65:1,transition:"background-color 150ms ease, opacity 150ms ease"}},F.key))})]})]})})]}),ke("div",{ref:er,style:{display:"inline-flex",cursor:"pointer"},children:ke("button",{type:"button",onClick:dn,title:"Collapse (\u2318\u2318)",style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,border:"none",background:"none",padding:0,cursor:"inherit"},children:ke("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:ur,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:ke("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"})})})})]})]})]}):Qt(Ki,{children:[ke("style",{children:`
|
|
21
49
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
22
|
-
`}),
|
|
23
|
-
`)[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
|
+
`}),Qt("div",{ref:F=>{tr.current=F,rt&&(rt.current=F)},id:"devtools-toolbar",style:{...qn,overflow:"visible",opacity:r?1:.5},children:[In,ke("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,border:"none",background:"none",cursor:"pointer",padding:0},onClick:()=>{Ee(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})},onMouseEnter:()=>a?.(!0),onMouseLeave:()=>a?.(!1),title:"Open annotation toolbar (\u2318\u2318)",children:ke("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:"none",stroke:ur,strokeWidth:"1",strokeLinejoin:"round",xmlns:"http://www.w3.org/2000/svg",children:ke("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 lu,useEffect as Do,useMemo as Fh,useRef as Xi,useState as Gs}from"react";import{Fragment as uu,jsx as on,jsxs as qi}from"react/jsx-runtime";function cu(e){return e.status==="done"||e.status==="error"}function Vs(e){return e==="materialize_model"}var zh=20,Nh=6,$h=zh-Nh,Wh=8,du={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 jh(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||""),a=r.data.file?String(r.data.file):null,s=a?a.split("/").pop()??a:null,l=r.data.content?String(r.data.content):null;switch(i){case"Read":return s?`Reading ${s}`:"Reading file";case"Edit":return s?`Editing ${s}`:"Editing file";case"Write":return s?`Writing ${s}`:"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 Vh(e){let t=e.replace(/^Error:\s*/i,"");return t.length>40?t.slice(0,37)+"...":t}function Gh(e,t){let o=e.find(s=>s.type==="job_started"&&s.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(s=>s.type==="question"&&s.data.jobId===t))return"Has a question";let i=new Set(["Edit","Write"]);return e.some(s=>s.type==="tool_use"&&s.data.jobId===t&&i.has(String(s.data.tool||"")))?"Applied changes":"Replied"}function Jh({color:e}){let[t,n]=Gs(0);return Do(()=>{let o=setInterval(()=>{n(r=>(r+1)%2)},250);return()=>clearInterval(o)},[]),on("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?qi(uu,{children:[on("circle",{cx:"7",cy:"7",r:"2"}),on("circle",{cx:"17",cy:"7",r:"2"}),on("circle",{cx:"7",cy:"17",r:"2"}),on("circle",{cx:"17",cy:"17",r:"2"})]}):qi(uu,{children:[on("circle",{cx:"12",cy:"6",r:"2"}),on("circle",{cx:"6",cy:"12",r:"2"}),on("circle",{cx:"18",cy:"12",r:"2"}),on("circle",{cx:"12",cy:"18",r:"2"})]})})}function Yh({color:e}){return on("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:e,opacity:.6}})}function Uh({color:e}){return on("span",{style:{color:e,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function Kh(){return on("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function Xh({onCancel:e}){let t=Xi(null);return Do(()=>{let n=t.current;if(!n)return;let o=a=>{a.stopPropagation(),e()},r=()=>{n.style.opacity="0.5"},i=()=>{n.style.opacity="0.7"};return n.addEventListener("click",o),n.addEventListener("mouseenter",r),n.addEventListener("mouseleave",i),()=>{n.removeEventListener("click",o),n.removeEventListener("mouseenter",r),n.removeEventListener("mouseleave",i)}},[e]),on("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 qh({onDismiss:e}){let t=Xi(null);return Do(()=>{let n=t.current;if(!n)return;let o=a=>{a.stopPropagation(),e()},r=()=>{n.style.opacity="0.5"},i=()=>{n.style.opacity="0.7"};return n.addEventListener("click",o),n.addEventListener("mouseenter",r),n.addEventListener("mouseleave",i),()=>{n.removeEventListener("click",o),n.removeEventListener("mouseenter",r),n.removeEventListener("mouseleave",i)}},[e]),on("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 pu({bridge:e,inFlightJobs:t,isVisible:n,onHover:o,clearSignal:r,onViewThread:i,onClickJob:a,onCancel:s,onHoverJob:l,isConnected:c,dismissedThreadIds:u,snapPosition:d="bottom-right",currentPathname:p}){let[g,b]=Gs([]),[C,v]=Gs(!1),[x,B]=Gs(()=>typeof window<"u"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});Do(()=>{let W=()=>B({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",W),()=>window.removeEventListener("resize",W)},[]);let T=ic(d,x.w,x.h);Do(()=>{r>0&&b([])},[r]),Do(()=>{!u||u.size===0||b(W=>{let _=W.filter(J=>!J.threadId||!u.has(J.threadId)||!cu(J));return _.length===W.length?W:_})},[u]),Do(()=>{b(W=>{let _=new Set(W.map(ve=>ve.jobId)),J=!1,Te=W.map(ve=>{let ae=t[ve.jobId];return ae&&(!ve.threadId||ve.color==="#888"||!ve.kind||!ve.routePathnames&&ae.routePathnames||ve.global==null&&ae.global!=null)?(J=!0,{...ve,threadId:ve.threadId||ae.threadId,color:ve.color==="#888"?ae.color:ve.color,kind:ve.kind??ae.kind,routePathnames:ve.routePathnames??ae.routePathnames,global:ve.global??ae.global}):ve});for(let[ve,ae]of Object.entries(t))Vs(ae.kind)||_.has(ve)||(Te.push({jobId:ve,color:ae.color,status:"queued",kind:ae.kind,threadId:ae.threadId,routePathnames:ae.routePathnames,global:ae.global}),J=!0);let _e=new Set(Object.keys(t)),Z=new Set(e.activeJobIds),He=Te.filter(ve=>Vs(ve.kind)?!1:ve.status!=="queued"?!0:_e.has(ve.jobId)||Z.has(ve.jobId));He.length!==Te.length&&(J=!0);let rt=new Set(He.map(ve=>ve.jobId));for(let ve of e.activeJobIds)if(!rt.has(ve)){let ae=e.events.find(Le=>Le.type==="job_started"&&Le.data.jobId===ve),Ae=ae?.data.kind;if(Vs(Ae))continue;let st=typeof ae?.data.color=="string"?ae.data.color:Ae==="synthesize"||Ae==="synthesize_evals"||Ae==="run_eval"||Ae==="materialize_model"?"#000000":"#888";He.push({jobId:ve,color:st,status:"working",kind:Ae,threadId:ae?.data?.threadId,routePathnames:void 0,global:ae?.data.global===!0||Ae==="synthesize"||Ae==="synthesize_evals"||Ae==="run_eval"||Ae==="materialize_model"}),J=!0}return J?He:W})},[t,e.activeJobIds,e.events]),Do(()=>{if(e.activeJobIds.length===0)return;let W=new Set(e.activeJobIds);b(_=>_.map(J=>W.has(J.jobId)&&J.status!=="done"&&J.status!=="error"?{...J,status:"working"}:J))},[e.activeJobIds]);let A=Xi(null);Do(()=>{let W=e.lastCompletedJobId;if(!W||W===A.current)return;A.current=W;let _=e.events.find(rt=>rt.type==="error"&&(rt.data.jobId===W||e.status==="error")),J=!!_,Te=J?void 0:Gh(e.events,W),_e=_?String(_.data.message||""):void 0,Z=_?!!_.data.cancelled:void 0,He=_?.data.threadId;b(rt=>{let ve=rt.map(Ae=>Ae.jobId===W?{...Ae,status:J?"error":"done",doneLabel:Te,errorMessage:_e,cancelled:Z,threadId:Ae.threadId||He}:Ae);if(!u||u.size===0)return ve;let ae=ve.filter(Ae=>!Ae.threadId||!u.has(Ae.threadId)||!cu(Ae));return ae.length===ve.length?ve:ae})},[e.lastCompletedJobId,e.events,e.status,u]);let E=lu(W=>W.global||!p||!W.routePathnames||W.routePathnames.length===0?!0:W.routePathnames.includes(p),[p]),V=Fh(()=>g.filter(W=>!Vs(W.kind)&&E(W)),[g,E]),q=n&&(V.length>0||c===!1),se=Xi(null);Do(()=>{if(!q)return;let W=se.current;if(!W)return;let _=()=>{v(!0),o(!0)},J=()=>{v(!1),o(!1),l?.(null)};return W.addEventListener("mouseenter",_),W.addEventListener("mouseleave",J),()=>{W.removeEventListener("mouseenter",_),W.removeEventListener("mouseleave",J)}},[q,o,l]);let P=Xi(new Map),D=lu((W,_)=>{_?P.current.set(W,_):P.current.delete(W)},[]);if(Do(()=>{if(!q)return;let W=[];for(let _ of V){let J=P.current.get(_.jobId);if(J){if(a){let Te=_.jobId,_e=_.threadId,Z=()=>a(Te,_e);J.addEventListener("click",Z),W.push(()=>J.removeEventListener("click",Z))}if(l){let Te=_.jobId,_e=()=>l(Te),Z=()=>l(null);J.addEventListener("mouseenter",_e),J.addEventListener("mouseleave",Z),W.push(()=>{J.removeEventListener("mouseenter",_e),J.removeEventListener("mouseleave",Z)})}}}return()=>W.forEach(_=>_())},[q,V,a,l]),!q)return null;let f={working:3,queued:2,error:1,done:0},m=[],O=new Map;for(let W of V){if(!W.threadId){m.push(W);continue}let _=O.get(W.threadId);(!_||f[W.status]>f[_.status]||f[W.status]===f[_.status])&&O.set(W.threadId,W)}for(let W of O.values())m.push(W);let pe=m.filter(W=>W.status==="queued"),ye=new Map;pe.forEach((W,_)=>{ye.set(W.jobId,`(${_+1}/${pe.length})`)});let ce=!C&&m.length>1,fe=Lr(d),ge=Ar(d),Ge=fe?m:[...m].reverse();return qi("div",{ref:se,style:T,"data-devtools":!0,children:[Ge.map((W,_)=>{let J=_===m.length-1,Te=m.length-1-_,_e=W.status==="working"?jh(e.events.filter(Z=>Z.data.jobId===W.jobId)):W.status==="queued"?`Queued ${ye.get(W.jobId)??""}`:W.status==="done"?W.doneLabel||"Done":W.cancelled?"Cancelled":W.errorMessage?Vh(W.errorMessage):"Error";return on("div",{style:{position:"relative",zIndex:m.length-_,marginBottom:ce?J?0:-$h:J?0:Wh,transform:ce?`scale(${Math.max(.94,1-Te*.02)})`:"scale(1)",opacity:1,transformOrigin:`${fe?"top":"bottom"} ${ge?"right":"left"}`,transition:"margin-bottom 250ms ease, transform 250ms ease, opacity 250ms ease"},children:on("div",{ref:Z=>D(W.jobId,Z),style:{...du,position:"relative",overflow:"visible",cursor:a?"pointer":void 0},title:W.errorMessage||void 0,children:qi("div",{style:{display:"flex",alignItems:"center",gap:3,padding:"3px 5px 3px 8px",margin:0,backgroundColor:W.status==="error"?"#ef4444":W.color,color:"#ffffff"},children:[W.status==="working"&&on(Jh,{color:"#ffffff"}),W.status==="queued"&&on(Yh,{color:"#ffffff"}),W.status==="done"&&on(Uh,{color:"#ffffff"}),W.status==="error"&&on(Kh,{}),on("span",{style:{opacity:W.status==="queued"?.6:1,maxWidth:160,overflow:"hidden",textOverflow:"ellipsis"},children:_e}),W.status==="working"&&s&&on(Xh,{onCancel:()=>s(W.jobId)}),(W.status==="done"||W.status==="error")&&on(qh,{onDismiss:()=>b(Z=>Z.filter(He=>W.threadId?He.threadId!==W.threadId:He.jobId!==W.jobId))})]})})},W.jobId)}),c===!1&&g.length>0&&on("div",{style:du,children:qi("div",{style:{display:"flex",alignItems:"center",gap:3,padding:"3px 5px 3px 8px",margin:0,backgroundColor:"#f59e0b",color:"#ffffff"},children:[on("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ffffff",opacity:.6}}),on("span",{children:"Reconnecting\u2026"})]})})]})}import{Fragment as e0,jsx as Qh,jsxs as t0}from"react/jsx-runtime";var Zh=`
|
|
24
52
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
25
53
|
:host {
|
|
26
54
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
@@ -49,9 +77,9 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
49
77
|
color: initial;
|
|
50
78
|
-webkit-font-smoothing: auto;
|
|
51
79
|
}
|
|
52
|
-
`;function
|
|
53
|
-
`),n=[],o=0;for(;o<t.length;){let r=t[o];if(r.trimStart().startsWith("```")){let l=[];for(o++;o<t.length&&!t[o].trimStart().startsWith("```");)l.push(t[o]),o++;o++,n.push(
|
|
54
|
-
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(r)){n.push(
|
|
80
|
+
`;function fu({children:e}){return t0(e0,{children:[Qh("style",{children:Zh}),e]})}import{useEffect as n0,useLayoutEffect as o0,useRef as r0,useState as gu}from"react";import{createPortal as i0}from"react-dom";import{Fragment as c0,jsx as l0,jsxs as d0}from"react/jsx-runtime";function s0(e){return e.tagName==="STYLE"||e.tagName==="LINK"&&e.rel==="stylesheet"}function a0(e){let t=new Map,n=e.firstChild;function o(a){if(t.has(a)||a.hasAttribute("data-pm-mirror"))return;let s=a.cloneNode(!0);s.setAttribute("data-pm-mirror",""),e.insertBefore(s,n),t.set(a,s)}function r(a){let s=t.get(a);s&&(s.remove(),t.delete(a))}for(let a of document.querySelectorAll('link[rel="stylesheet"], style'))a.getRootNode()===document&&o(a);try{document.adoptedStyleSheets.length>0&&(e.adoptedStyleSheets=[...document.adoptedStyleSheets,...e.adoptedStyleSheets])}catch{}let i=new MutationObserver(a=>{for(let s of a)if(s.type==="childList"){for(let l of s.addedNodes)l instanceof Element&&s0(l)&&o(l);for(let l of s.removedNodes)l instanceof Element&&r(l)}});return i.observe(document.head,{childList:!0}),document.body&&i.observe(document.body,{childList:!0}),()=>{i.disconnect();for(let a of t.values())a.remove();t.clear()}}function mu({children:e}){let t=r0(null),[n,o]=gu(null),[r,i]=gu(null);return o0(()=>{let a=t.current;if(!a||a.shadowRoot)return;let s=a.attachShadow({mode:"open"}),l=document.createElement("div");l.setAttribute("data-popmelt-root",""),s.appendChild(l),o(s),i(l)},[]),n0(()=>{if(n)return a0(n)},[n]),d0(c0,{children:[l0("div",{ref:t,"data-popmelt-shadow-host":!0,style:{position:"absolute",width:0,height:0,overflow:"visible",zIndex:1e4}}),r&&i0(e,r)]})}import{Fragment as y0,memo as b0,useCallback as _o,useEffect as Lo,useMemo as wr,useRef as Co,useState as jn}from"react";import{jsx as ot,jsxs as Xr}from"react/jsx-runtime";var xl="ui-monospace, SFMono-Regular, Menlo, monospace",u0=0;function p0({size:e=11}){let t=++u0,n=`pm-vs-m${t}`,o=`pm-vs-f0-${t}`,r=`pm-vs-f1-${t}`,i=`pm-vs-g${t}`;return Xr("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:[ot("mask",{id:n,maskType:"alpha",maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"100",height:"100",children:ot("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"})}),Xr("g",{mask:`url(#${n})`,children:[ot("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"}),ot("g",{filter:`url(#${o})`,children:ot("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"})}),ot("g",{filter:`url(#${r})`,children:ot("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"})}),ot("g",{style:{mixBlendMode:"overlay"},opacity:"0.25",children:ot("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})`})})]}),Xr("defs",{children:[Xr("filter",{id:o,x:"-8.39411",y:"15.8291",width:"116.727",height:"92.2456",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[ot("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),ot("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"}),ot("feOffset",{}),ot("feGaussianBlur",{stdDeviation:"4.16667"}),ot("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"}),ot("feBlend",{mode:"overlay",in2:"BackgroundImageFix",result:"effect1_dropShadow"}),ot("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"})]}),Xr("filter",{id:r,x:"60.4167",y:"-8.07558",width:"47.9167",height:"116.151",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[ot("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),ot("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"}),ot("feOffset",{}),ot("feGaussianBlur",{stdDeviation:"4.16667"}),ot("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"}),ot("feBlend",{mode:"overlay",in2:"BackgroundImageFix",result:"effect1_dropShadow"}),ot("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"})]}),Xr("linearGradient",{id:i,x1:"49.9392",y1:"0.257812",x2:"49.9392",y2:"99.7423",gradientUnits:"userSpaceOnUse",children:[ot("stop",{stopColor:"white"}),ot("stop",{offset:"1",stopColor:"white",stopOpacity:"0"})]})]})]})}var f0=/^#[0-9a-fA-F]{3,8}$/,g0=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,m0=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 h0(e){let t=e.trim();return f0.test(t)||g0.test(t)||m0.has(t.toLowerCase())}function vl(e,t){return ot("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 Zi(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);h0(i)&&t.push(vl(i,`sw-${r.index}`)),t.push(ot("code",{style:{fontFamily:xl,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(ot("strong",{children:ot("em",{children:r[3]})},r.index));else if(r[5]!==void 0)t.push(ot("strong",{children:r[5]},r.index));else if(r[7]!==void 0)t.push(ot("em",{children:r[7]},r.index));else if(r[9]!==void 0)t.push(ot("em",{children:r[9]},r.index));else if(r[11]!==void 0&&r[12]!==void 0){let i=r[12],a=!/^https?:\/\/|^mailto:/i.test(i),s=a?`vscode://file/${i}`:i;a?t.push(Xr("a",{href:s,target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline",whiteSpace:"nowrap",backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",borderRadius:2,fontFamily:xl,fontSize:"0.9em"},children:[r[11],ot(p0,{})]},r.index)):t.push(ot("a",{href:s,target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline"},children:r[11]},r.index))}else r[13]!==void 0?(t.push(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 qo(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(ot("pre",{style:{fontFamily:xl,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(ot("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(ot("div",{style:{fontWeight:700,fontSize:c[l]??12,margin:"8px 0 2px"},children:Zi(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=v=>/^\|[\s\-:|]+\|$/.test(v),u=l.filter(v=>!c(v)),d=v=>v.split("|").slice(1,-1).map(x=>x.trim()),p=v=>/^\*\*.+\*\*$/.test(v)||/^__.+__$/.test(v),g=u.map(d),b=g.length>1&&g.slice(1).every(v=>v[0]&&p(v[0])),C=g.length>0&&g[0].every(v=>p(v));n.push(ot("div",{style:{overflowX:"auto",margin:"4px 0",paddingBottom:4},children:ot("table",{style:{borderCollapse:"separate",borderSpacing:0,fontSize:"0.95em",width:"max-content",minWidth:"100%"},children:ot("tbody",{children:u.map((v,x)=>ot("tr",{children:d(v).map((B,T)=>ot(x===0?"th":"td",{style:{border:"1px solid rgba(0,0,0,0.1)",padding:"3px 6px",textAlign:"left",fontWeight:x===0?600:400,minWidth:60,whiteSpace:"nowrap",...T===0&&b||x===0&&C?{position:"sticky",...T===0&&b?{left:0}:{},...x===0&&C?{top:0}:{},background:"#fff",zIndex:T===0&&b&&x===0&&C?2:1}:{}},children:Zi(B)},T))},x))})})},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(ot("ul",{style:{margin:0,paddingLeft:20,listStyleType:"disc",display:"flex",flexDirection:"column",gap:8},children:l.map((c,u)=>ot("li",{children:Zi(c)},u))},n.length));continue}let s=r.match(/^(\s*)(\d+)\.\s+(.+)/);if(s){let l=s[1].length,c=parseInt(s[2],10)||1,u=[],d=null;for(;o<t.length;){let p=t[o],g=p.match(/^(\s*)(\d+)\.\s+(.+)/);if(g&&g[1].length===l)d=[g[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(ot("ol",{start:c,style:{margin:0,paddingLeft:20,listStyleType:"decimal",display:"flex",flexDirection:"column",gap:8},children:u.map((p,g)=>ot("li",{children:ot("div",{style:{display:"flex",flexDirection:"column",gap:6},children:p.map((b,C)=>ot("div",{children:Zi(b)},C))})},g))},n.length));continue}if(r.trim()===""){o++;continue}n.push(ot("div",{children:Zi(r)},n.length)),o++}return ot("div",{style:{display:"flex",flexDirection:"column",gap:8},children:n})}import{Fragment as Qo,jsx as ee,jsxs as Ve}from"react/jsx-runtime";var xu=400,eo=16,Su=3,v0=3,wu=4,x0=8,S0="devtools-thread-panel-position",wi=xu+2*Su+2*wu,w0=wi+2*v0;function Sl(e="right"){return{top:eo,left:e==="left"?eo:window.innerWidth-wi-eo}}function hu(e,t,n){let o=n?.getBoundingClientRect(),r=2*Su+2*wu,i=window.innerHeight-eo-r;return o&&t+w0>o.left&&(i=o.top-x0-r),Math.max(200,i-Math.max(0,e))}var C0={width:xu,backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",display:"flex",flexDirection:"column",overflow:"visible",padding:4,fontFamily:An,fontSize:12,color:"#1f2937",pointerEvents:"auto"},E0={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 5px 4px 10px",margin:0,fontWeight:600,fontSize:12,overflow:"hidden"},k0={flex:1,overflowY:"auto",padding:0,scrollbarWidth:"none"},T0=`
|
|
55
83
|
[data-devtools="thread-panel-messages"]:hover {
|
|
56
84
|
scrollbar-width: thin !important;
|
|
57
85
|
}
|
|
@@ -65,15 +93,15 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
65
93
|
background: rgba(0,0,0,0.15);
|
|
66
94
|
border-radius: 3px;
|
|
67
95
|
}
|
|
68
|
-
`,
|
|
96
|
+
`,M0={borderTop:"1px solid rgba(0, 0, 0, 0.12)",display:"flex",alignItems:"center",gap:4,padding:"0 8px 0 10px"};function Ys(e){return e.replace(/<resolution>[\s\S]*?<\/resolution>/g,"").replace(/<question>[\s\S]*?<\/question>/g,"").replace(/<plan>[\s\S]*?<\/plan>/g,"").replace(/<review>[\s\S]*?<\/review>/g,"").replace(/<novel>[\s\S]*?<\/novel>/g,"").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 I0(e){return e.split(`
|
|
69
97
|
`).filter(t=>!/^\s*[☑☒□]\s*(pass|fail|needs[_ ]review)\b/i.test(t)).join(`
|
|
70
98
|
`).replace(/\n{3,}/g,`
|
|
71
99
|
|
|
72
|
-
`).trim()}function
|
|
73
|
-
`)[0].trim();return t.length<=60?t:t.slice(0,57)+"\u2026"}var
|
|
74
|
-
`)?
|
|
75
|
-
`)?
|
|
76
|
-
`)?Co(u):u}),!c&&v&&t.segments.map((I,B)=>{if(I.kind==="tool_group")return U(xd,{tool:I.tool,items:I.items},B);let T=d?Um(ps(I.text)):ps(I.text);return T?U("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:Co(T)},B):null}),!c&&!v&&u&&U("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:Co(u)}),!c&&d&&U(Zm,{result:d}),c&&t.replyToQuestion&&(()=>{let I=oh(t,o);return I.length===0?null:U("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:I.map((B,T)=>U("img",{src:B.url,title:B.label,style:us,onClick:()=>i(B.url)},T))})})(),c&&!t.replyToQuestion&&(()=>{let I=rh(t,o);return I.length===0?null:U("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:I.map((B,T)=>U("img",{src:B.url,title:B.label,style:us,onClick:()=>i(B.url)},T))})})(),p&&U("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:Co(p)}),(C||f)&&Be("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151"},children:[C&&U("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:t.toolsUsed.map((I,B)=>U("div",{children:I},B))}),f&&t.resolutions.map((I,B)=>{let T=I.finalScope??I.inferredScope;return Be("div",{style:{marginTop:C?4:0},children:[U("span",{style:{color:I.status==="resolved"?"#10b981":"#f59e0b"},children:I.status==="resolved"?"Done":"Needs review"}),I.summary?` \u2014 ${I.summary}`:""]},B)})]}),!c&&t.responseText&&(()=>{let I=Km(t.responseText);return I.length===0?null:U("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151",marginTop:2},children:I.map((B,T)=>Be("div",{style:{marginTop:T>0?6:0},children:[U("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}),U("strong",{children:B.element})," \u2014 ",B.decision,U("div",{style:{color:"#9ca3af",fontStyle:"italic",marginTop:1},children:B.reason})]},T))})})()]},`${t.jobId}-${n}`)});function hd(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 yh(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:e.role==="assistant"&&!!e.responseText?.includes("Model suggestion ready")}function bh(e){return e.role==="assistant"&&!!(e.responseText?.includes("<eval_proposals>")||e.responseText?.includes("<evals>"))}function Eo(e){return!!(e&&typeof e=="object"&&!Array.isArray(e))}function ms(e){if(e===void 0)return"undefined";try{return JSON.stringify(e)}catch{return String(e)}}function hs(e,t){return ms(e)===ms(t)}function Si(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(Eo(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 Sd(e,t,n,o){if(!Eo(e)){hs(e,t)||o.push({id:`token:${n.join(".")}`,group:"tokens",label:n.join("."),detail:Si(e),path:n,value:e,currentValue:t});return}if("value"in e){hs(e,t)||o.push({id:`token:${n.join(".")}`,group:"tokens",label:n.join("."),detail:Si(e),path:n,value:e,currentValue:t});return}for(let r of Object.keys(e))Sd(e[r],Eo(t)?t[r]:void 0,[...n,r],o)}function vh(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(!Eo(c))continue;let d=typeof c.id=="string"?c.id:`rule-${l}`,u=r.find(p=>Eo(p)&&(typeof p.id=="string"&&p.id===d||ms(p)===ms(c)));hs(u,c)||o.push({id:`rule:${d}`,group:"rules",label:typeof c.scope=="string"?c.scope:"rule",detail:typeof c.text=="string"?c.text:Si(c),path:["rules"],value:c,currentValue:u,ruleValue:c})}let a=Eo(n.components)?n.components:{},s=Eo(e?.components)?e.components:{};for(let l of Object.keys(a)){let c=a[l],d=s[l];hs(c,d)||o.push({id:`component:${l}`,group:"components",label:l,detail:Si(c),path:["components",l],value:c,currentValue:d})}return Eo(n.tokens)&&Sd(n.tokens,e?.tokens,["tokens"],o),o}function xh(e,t,n){let o=t.filter(a=>n.has(a.id)),r=o.filter(a=>a.group==="rules"&&a.ruleValue),i=o.filter(a=>a.group!=="rules").map(a=>({path:a.path,value:a.value}));if(r.length>0){let a=Array.isArray(e?.rules)?[...e.rules]:[];for(let s of r){let l=s.ruleValue,c=Eo(l)&&typeof l.id=="string"?l.id:null,d=c?a.findIndex(u=>Eo(u)&&u.id===c):-1;d>=0?a[d]=l:a.push(l)}i.push({path:["rules"],value:a})}return i}function Sh({proposal:e,bridgeUrl:t,accentColor:n,busy:o,onApplySelected:r,onDismiss:i,onProjectEvals:a}){let s=(e.generatedEvalIds?.length??0)>0,[l,c]=xn(!1),[d,u]=xn(null),[p,f]=xn(()=>new Set),[v,C]=xn(!1),x=kr(()=>vh(d,e),[d,e]),I=kr(()=>xh(d,x,p),[x,d,p]),B=kr(()=>{let j={rules:[],components:[],tokens:[],model:[]};for(let E of x)j[E.group].push(E);return j},[x]);no(()=>{let j=!1;return qn(`${t}/model`).then(E=>E.ok?E.json():null).then(E=>{j||u(E?.model&&typeof E.model=="object"?E.model:null)}).catch(()=>{j||u(null)}),()=>{j=!0}},[t,e.id]),no(()=>{f(new Set),C(!1)},[e.id,x.map(j=>j.id).join("|")]);let T=uo(j=>{f(E=>{let L=new Set(E);return L.has(j)?L.delete(j):L.add(j),L})},[]),R=uo(()=>{f(new Set(x.map(j=>j.id)))},[x]),w=uo(()=>{f(new Set)},[]),z=`${e.decisionIds.length} decision${e.decisionIds.length===1?"":"s"}`,X=`${x.length} proposed change${x.length===1?"":"s"}`;return U("div",{style:{padding:"0 16px 12px"},children:Be("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:[Be("button",{type:"button",onClick:()=>c(j=>!j),style:{border:0,background:"transparent",color:"#111827",cursor:"pointer",fontFamily:un,padding:0,textAlign:"left",display:"flex",alignItems:"baseline",gap:6},children:[U("span",{style:{fontSize:12},children:l?"\u25BE":"\u25B8"}),U("span",{style:{fontWeight:700,fontSize:12},children:"Model suggestion"}),U("span",{style:{color:"#9ca3af",fontSize:10,textTransform:"uppercase"},children:e.status})]}),Be("div",{style:{color:"#6b7280",fontSize:11,lineHeight:1.35},children:[z,e.status==="pending"?`, ${X}`:"",s?`, ${e.generatedEvalIds.length} eval draft${e.generatedEvalIds.length===1?"":"s"}`:""]}),l&&e.status==="pending"&&U(ko,{children:x.length>0?Be(ko,{children:[Be("div",{style:{display:"flex",gap:8},children:[U("button",{type:"button",disabled:o,onClick:R,style:{...Ha,padding:"4px 7px"},children:"Select all"}),U("button",{type:"button",disabled:o,onClick:w,style:{...Ha,padding:"4px 7px"},children:"Clear"})]}),["rules","components","tokens"].map(j=>{let E=B[j];return E.length===0?null:Be("div",{style:{display:"flex",flexDirection:"column",gap:5},children:[Be("div",{style:{color:"#9ca3af",fontSize:10,textTransform:"uppercase"},children:[j," ",E.length]}),E.map(L=>{let g=p.has(L.id);return Be("label",{style:{display:"grid",gridTemplateColumns:"14px minmax(0, 1fr)",columnGap:7,alignItems:"start",cursor:"pointer",color:g?"#111827":"#6b7280",fontSize:11,lineHeight:1.35},children:[U("input",{type:"checkbox",checked:g,disabled:o,onChange:()=>T(L.id),style:{WebkitAppearance:"none",appearance:"none",margin:"1px 0 0",width:11,height:11,backgroundColor:g?n:"transparent",border:`1px solid ${g?n:"rgba(0,0,0,0.34)"}`,borderRadius:2,boxSizing:"border-box",cursor:o?"default":"pointer"}}),Be("span",{style:{minWidth:0},children:[U("span",{style:{fontWeight:700},children:L.label}),Be("span",{children:[" \u2014 ",L.detail]}),L.currentValue!==void 0&&Be("span",{style:{display:"block",color:"#9ca3af",marginTop:2},children:["was ",Si(L.currentValue)]})]})]},L.id)})]},j)})]}):U("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.4},children:"No concrete model diff could be derived from this proposal."})}),e.status==="pending"&&Be("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8},children:[U("button",{type:"button",disabled:o,onClick:i,style:Ha,children:"Dismiss"}),Be("button",{type:"button",disabled:o||I.length===0,onClick:()=>r(I),style:{...fs,opacity:o||I.length===0?.45:1,cursor:o||I.length===0?"not-allowed":"pointer"},children:["Apply selected ",I.length||""]})]}),e.status==="applied"&&!s&&U("button",{type:"button",disabled:o||v,onClick:()=>{C(!0),a()},style:{...fs,opacity:o||v?.45:1,cursor:o||v?"not-allowed":"pointer"},children:v?"Drafting evals":"Create draft evals"}),e.status==="applied"&&s&&Be("button",{type:"button",disabled:!0,style:{...fs,opacity:.45,cursor:"not-allowed"},children:[e.generatedEvalIds.length," eval",e.generatedEvalIds.length===1?"":"s"," drafted"]})]})})}var fs={border:"1px solid #111827",background:"#111827",color:"#fff",cursor:"pointer",fontFamily:un,fontSize:11,fontWeight:700,padding:"6px 8px"},Ha={border:"1px solid rgba(0,0,0,0.12)",background:"rgba(0,0,0,0.02)",color:"#6b7280",cursor:"pointer",fontFamily:un,fontSize:11,fontWeight:700,padding:"6px 8px"};function wd({threadId:e,bridgeUrl:t,accentColor:n,isStreaming:o,isQueued:r,queuePosition:i,activeJobId:a,streamingEvents:s,onClose:l,onReply:c,onCancel:d,lastError:u,onMouseEnter:p,toolbarRef:f,currentModel:v,currentProvider:C,annotationNumber:x,annotationText:I,onOpenEvals:B,preferredSide:T="right",modal:R=!0}){let[w,z]=xn([]),[X,j]=xn(null),[E,L]=xn(!1),[g,m]=xn(!0),[$,ge]=xn(""),[Ie,ue]=xn([]),ke=Kn(!1),Me=Kn(null),[K,_]=xn(!0),[ne,he]=xn(0),[ze,Ye]=xn(null),ie=uo(q=>Ye(q),[]),Ke=Kn(null),Ge=Kn(null),ve=Kn(0),Re=uo((q,ae)=>{let fe=q&&ae.trim();Ke.current&&(Ke.current.style.opacity=fe?"0.65":"1"),Me.current&&(Me.current.style.borderTop=`1px solid ${fe?n:"rgba(0,0,0,0.12)"}`)},[n]),at=Kn(null),G=Kn(null),le=Kn(o),te=Kn(_a(T)),Oe=Kn({x:0,y:0}),lt=Kn(!1),De=Kn({x:0,y:0,offsetX:0,offsetY:0}),ot=Kn(T==="right"),[,ct]=xn(0),Je=`${$m}:${T}`;no(()=>{try{let q=localStorage.getItem(Je);if(q){let ae=JSON.parse(q);if(typeof ae.top=="number"&&typeof ae.left=="number"){let fe=window.innerWidth-qr-Dn,Te={top:Math.max(Dn,Math.min(ae.top,window.innerHeight-Dn-200)),left:Math.max(Dn,Math.min(ae.left,fe))};ot.current=Te.left>=fe-2,te.current=Te,ct(rt=>rt+1)}}}catch{}},[Je]),no(()=>{let q=()=>{if(ot.current)te.current=_a(T);else{let ae=te.current,fe=window.innerWidth-qr-Dn;te.current={top:Math.max(Dn,Math.min(ae.top,window.innerHeight-Dn-200)),left:Math.max(Dn,Math.min(ae.left,fe))}}ct(ae=>ae+1)};return window.addEventListener("resize",q,{passive:!0}),()=>window.removeEventListener("resize",q)},[T]),no(()=>{let q=G.current;if(!q)return;let ae=dt=>{dt.button!==0||dt.target.closest("button")||(dt.preventDefault(),dt.stopPropagation(),lt.current=!0,De.current={x:dt.clientX,y:dt.clientY,offsetX:Oe.current.x,offsetY:Oe.current.y})},fe=dt=>{if(!lt.current)return;let ft=De.current,Kt=ft.offsetX+(dt.clientX-ft.x),Wn=ft.offsetY+(dt.clientY-ft.y),hn=Math.max(Dn,Math.min(window.innerWidth-qr-Dn,te.current.left+Kt)),Rn=Math.max(Dn,te.current.top+Wn);Oe.current={x:hn-te.current.left,y:Rn-te.current.top};let He=at.current;He&&(He.style.top=`${Rn}px`,He.style.left=`${hn}px`,He.style.height=`${fd(Rn,hn,f?.current)}px`)},Te=()=>{if(!lt.current)return;let dt=te.current.top+Oe.current.y,ft=te.current.left+Oe.current.x;te.current={top:dt,left:ft},Oe.current={x:0,y:0};let Kt=window.innerWidth-qr-Dn;ot.current=ft>=Kt-2;try{localStorage.setItem(Je,JSON.stringify({top:dt,left:ft}))}catch{}lt.current=!1},rt=()=>{te.current=_a(T),Oe.current={x:0,y:0},ot.current=T==="right";try{localStorage.removeItem(Je)}catch{}ct(dt=>dt+1)};return q.addEventListener("mousedown",ae),window.addEventListener("mousemove",fe),window.addEventListener("mouseup",Te),q.addEventListener("dblclick",rt),()=>{q.removeEventListener("mousedown",ae),window.removeEventListener("mousemove",fe),window.removeEventListener("mouseup",Te),q.removeEventListener("dblclick",rt)}},[Je,T]);let ht=uo(async()=>{try{let q=await qn(`${t}/thread/${e}`);if(!q.ok)throw new Error(`Thread fetch failed: ${q.status}`);let ae=await q.json(),fe=ae.messages??[];return z(fe),j(ae.modelProposal??null),m(!1),fe.length}catch{return m(!1),null}},[t,e]),qt=uo(async q=>{if(!(!X||E)){L(!0);try{let ae=await qn(`${t}/model/proposals/${encodeURIComponent(X.id)}/${q}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:C,model:v})});if(ae.ok){let fe=await ae.json();fe.proposal&&j(fe.proposal),await ht()}}finally{L(!1)}}},[t,v,C,ht,X,E]),zt=uo(async q=>{if(!(!X||E||q.length===0)){L(!0);try{let ae=await qn(`${t}/model/proposals/${encodeURIComponent(X.id)}/apply-selected`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({changes:q,provider:C,model:v})});if(ae.ok){let fe=await ae.json();fe.proposal&&j(fe.proposal),await ht()}}finally{L(!1)}}},[t,v,C,ht,X,E]);no(()=>{let q=!1;ve.current=0,m(!0),Ge.current&&(clearTimeout(Ge.current),Ge.current=null);let ae=async()=>{let fe=await ht();q||fe!==0||ve.current>=5||(ve.current+=1,Ge.current=setTimeout(ae,200*ve.current))};return ae(),()=>{q=!0,Ge.current&&(clearTimeout(Ge.current),Ge.current=null)}},[ht]),no(()=>{le.current&&!o&&ht(),le.current=o},[o]);let nt=kr(()=>s?uh(s):[],[s]),Ve=kr(()=>s?dh(s):null,[s]),Ut=kr(()=>w.filter(q=>q.role==="human"&&q.replyToQuestion&&q.queued&&q.jobId!==a),[a,w]),Xe=kr(()=>w.filter(q=>!(q.role==="human"&&q.replyToQuestion&&q.queued&&q.jobId!==a)),[a,w]);no(()=>{let q=Ke.current;if(!q)return;let ae=()=>{_(q.scrollHeight-q.scrollTop-q.clientHeight<40);let Te=q.scrollTop+q.clientHeight,rt=q.querySelectorAll("[data-msg]"),dt=0;for(let ft=0;ft<rt.length;ft++){let Kt=rt[ft];Kt.offsetTop+Kt.offsetHeight>Te+20&&dt++}he(dt)};return q.addEventListener("scroll",ae,{passive:!0}),()=>q.removeEventListener("scroll",ae)},[]),no(()=>{K&&Ke.current&&(Ke.current.scrollTop=Ke.current.scrollHeight)},[w,nt.length,o,K]),no(()=>{let q=ae=>{ae.key==="Escape"&&(ae.stopPropagation(),l())};return document.addEventListener("keydown",q),()=>document.removeEventListener("keydown",q)},[l]);let Ct=uo(()=>{if(!$.trim()||!c)return;let q=$.trim(),ae=Ie.length>0?Ie:void 0,fe=`_pending_reply_${Date.now()}`,Te=!!o,rt=ae?ae.map(dt=>URL.createObjectURL(dt)):void 0;z(dt=>[...dt,{role:"human",timestamp:Date.now(),jobId:fe,replyToQuestion:q,...Te?{queued:!0}:{},...rt?{replyImageUrls:rt}:{}}]),Promise.resolve(c(e,q,ae)).then(dt=>{dt?.jobId&&z(ft=>ft.map(Kt=>Kt.jobId===fe?{...Kt,jobId:dt.jobId}:Kt))}).catch(()=>{}),ge(""),ue([])},[o,$,Ie,e,c]),$n=uo(q=>{let ae=q.clipboardData.items,fe=[];for(let Te=0;Te<ae.length;Te++){let rt=ae[Te];if(rt.type.startsWith("image/")){let dt=rt.getAsFile();dt&&fe.push(dt)}}fe.length>0&&(q.preventDefault(),ue(Te=>[...Te,...fe]))},[]),Sn=uo(q=>{q.key==="Enter"&&(q.metaKey||q.ctrlKey)&&(q.preventDefault(),Ct())},[Ct]),Mn=te.current.top+Oe.current.y,ln=te.current.left+Oe.current.x,Ft=fd(Mn,ln,f?.current);return Be(ko,{children:[R&&U("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:q=>{q.target===q.currentTarget&&l()},style:{position:"fixed",inset:0,zIndex:9999}}),Be("div",{ref:at,style:{...jm,height:Ft,position:"fixed",top:Mn,left:ln,zIndex:1e4},"data-devtools":"thread-panel",onMouseEnter:p,children:[(()=>{let ae=`<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>`,fe=`url("data:image/svg+xml,${encodeURIComponent(ae)}")`;return Be(ko,{children:[U("style",{children:`@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
77
|
-
[data-popmelt-reply]::placeholder { opacity: 0.35; }`}),
|
|
100
|
+
`).trim()}function R0(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 L0(e){let t=e.match(/<eval_run_result>\s*([\s\S]*?)\s*<\/eval_run_result>/);if(!t?.[1])return null;try{let n=JSON.parse(t[1]);if(!n||typeof n!="object")return null;let o=n,r=o.status,i=r==="pass"||r==="fail"||r==="needs_review"?r:"needs_review",s=(Array.isArray(o.assertionResults)?o.assertionResults:[]).flatMap(l=>{if(!l||typeof l!="object")return[];let 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:s}}catch{return null}}function A0(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 P0({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 Ve("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.35,color:"#374151"},children:[Ve("div",{style:{display:"flex",alignItems:"baseline",gap:6,marginBottom:7},children:[ee("span",{style:{fontWeight:700,color:"#111827"},children:e.title??"Eval result"}),ee("span",{style:{color:o,fontWeight:700,marginLeft:"auto"},children:n})]}),e.summary&&ee("div",{style:{color:"#6b7280",marginBottom:8},children:e.summary}),ee("div",{style:{display:"flex",flexDirection:"column",gap:6},children:t.map((r,i)=>{let a=r.status==="pass"?"\u2611":r.status==="fail"?"\u2612":"\u25A1",s=r.status==="pass"?"Pass":r.status==="fail"?"Fail":"Needs review",l=r.status==="pass"?"#047857":r.status==="fail"?"#b91c1c":"#6b7280",c=r.status==="needs_review"?"inherit":l;return Ve("div",{style:{display:"grid",gridTemplateColumns:"18px minmax(0, 1fr)",columnGap:5,alignItems:"start"},children:[ee("span",{style:{color:l,fontSize:15,lineHeight:1},children:a}),Ve("div",{style:{minWidth:0},children:[ee("div",{style:{color:c},children:r.assertion}),r.status==="needs_review"?Ve("div",{style:{marginTop:1,color:"#6b7280"},children:[ee("span",{style:{color:l,fontWeight:700},children:s}),r.summary?Ve("span",{children:[": ",r.summary]}):null]}):r.summary?ee("div",{style:{marginTop:1,color:"#6b7280"},children:r.summary}):null]})]},`${r.assertion}-${i}`)})})]})}function yu(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}var wl=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],B0=3e3,D0=250;function _0({color:e}){let[t,n]=jn(0),[o,r]=jn(()=>Math.floor(Math.random()*wl.length));return Lo(()=>{let i=setInterval(()=>n(s=>(s+1)%2),D0),a=setInterval(()=>r(s=>(s+1)%wl.length),B0);return()=>{clearInterval(i),clearInterval(a)}},[]),Ve("span",{style:{display:"inline-flex",alignItems:"center",gap:4},children:[ee("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?Ve(Qo,{children:[ee("circle",{cx:"7",cy:"7",r:"2"}),ee("circle",{cx:"17",cy:"7",r:"2"}),ee("circle",{cx:"7",cy:"17",r:"2"}),ee("circle",{cx:"17",cy:"17",r:"2"})]}):Ve(Qo,{children:[ee("circle",{cx:"12",cy:"6",r:"2"}),ee("circle",{cx:"6",cy:"12",r:"2"}),ee("circle",{cx:"18",cy:"12",r:"2"}),ee("circle",{cx:"12",cy:"18",r:"2"})]})}),ee("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:wl[o]})]})}var Ks=32,Js={width:Ks,height:Ks,objectFit:"cover",cursor:"pointer",border:"1px solid rgba(0,0,0,0.1)"};function O0(e){let t=/^`(\/[^`]*)`$/gm,n=[...e.matchAll(t)];if(n.length===0)return null;let o=[];for(let r=0;r<n.length;r++){let i=n[r],a=i[1],s=i.index+i[0].length,l=r+1<n.length?n[r+1].index:e.length,c=e.slice(s,l).trim();o.push({route:a,text:c})}return o}function H0(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 F0(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 z0({src:e,onClose:t}){return Lo(()=>{let n=o=>{o.key==="Escape"&&(o.stopPropagation(),t())};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[t]),ee("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:ee("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 N0(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?$0(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 $0(e){let t=e.split(`
|
|
101
|
+
`)[0].trim();return t.length<=60?t:t.slice(0,57)+"\u2026"}var W0=new Set(["Read","Glob","Grep","WebFetch","WebSearch"]),j0=new Set(["Edit","Write","Bash"]);function V0(e){let t=0,n=!1;for(let o of e){if(o.type!=="tool_use")continue;let r=String(o.data.tool||"");j0.has(r)?n=!0:W0.has(r)&&t++}return!n&&t>=3?"researching":n?"applying changes":null}function G0(e){let t=[];for(let n of e)if(n.type==="tool_use"){let o=N0(n),r=String(n.data.tool||""),i=n.data.file?String(n.data.file):null,a=n.data.content?String(n.data.content):null,s=i??a??void 0;if(o){let l=t[t.length-1];l&&l.kind==="tool_group"&&l.tool===r?l.items.push({label:o,detail:s}):t.push({kind:"tool_group",tool:r,items:[{label:o,detail:s}]})}if(a&&i){let l=i.includes(".")?`.${i.split(".").pop().toLowerCase()}`:"",c=i.includes(".claude/plans/");t.push({kind:"file_content",file:i,content:a,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 J0({file:e,content:t,ext:n,isPlan:o,onAccept:r}){let[i,a]=jn(o),s=e.split("/").pop()??e;return Ve("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:[Ve("div",{onClick:()=>a(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:[ee("span",{style:{fontSize:9,color:"#9ca3af"},children:i?"\u25BC":"\u25B6"}),ee("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:s}),o&&ee("span",{style:{fontSize:9,color:"#6366f1",fontFamily:"inherit"},children:"plan"})]}),i&&Ve(Qo,{children:[ee("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"?qo(t):ee("pre",{style:{margin:0,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,whiteSpace:"pre-wrap"},children:t})}),o&&r&&ee("div",{style:{padding:"4px 8px",borderTop:"1px solid rgba(0,0,0,0.06)",display:"flex",justifyContent:"flex-end"},children:ee("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 Y0(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 U0(e,t){switch(e){case"Bash":{let n=t.map(o=>(o.label||"").split(/\s/)[0]).filter(Boolean);return`Used Bash: ${Y0(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 K0={fontSize:11,color:"#9ca3af",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",lineHeight:1.6};function X0({label:e}){let t=e.indexOf(" ");return t===-1?ee(Qo,{children:e}):Ve(Qo,{children:[ee("b",{children:e.slice(0,t)}),e.slice(t)]})}function Cu({tool:e,items:t}){let[n,o]=jn(!1),r=t.length>1;return Ve("div",{style:K0,children:[Ve("div",{onClick:r?()=>o(i=>!i):void 0,style:{cursor:r?"pointer":"default",userSelect:"none",color:"#9ca3af"},children:[r&&ee("span",{style:{fontSize:13,marginRight:4},children:n?"\u25BE":"\u25B8"}),U0(e,t)]}),n&&ee("div",{style:{marginLeft:17},children:t.map((i,a)=>ee("div",{children:ee(X0,{label:i.detail??i.label})},a))})]})}var bu=b0(function({msg:t,index:n,bridgeUrl:o,accentColor:r,onLightbox:i,hideSender:a=!1,hideTimestamp:s=!1,compactSpacing:l=!1}){let c=t.role==="human";if(t.cancelled||t.error)return Ve("div",{"data-msg":!0,style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:[Ve("div",{style:{display:"flex",alignItems:"center",gap:4},children:[ee("span",{style:{fontSize:11,color:t.error?"#dc2626":"#9ca3af",fontStyle:"italic"},children:t.error?"Error":"Cancelled"}),ee("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:yu(t.timestamp)})]}),t.error&&ee("div",{style:{fontSize:12,color:"#6b7280",lineHeight:1.4},children:t.error})]},`${t.jobId}-${n}`);let u=c?null:A0(t.evalRun)??(t.responseText?L0(t.responseText):null),d=c?t.replyToQuestion||t.feedbackSummary||"(annotation)":u?"":Ys(t.responseText||""),p=c?void 0:t.question,g=!c&&t.resolutions&&t.resolutions.length>0,b=!c&&t.segments&&t.segments.length>0,C=!c&&!b&&t.toolsUsed&&t.toolsUsed.length>0,v=!a||!s;return!d&&!p&&!g&&!b&&!u?null:Ve("div",{"data-msg":!0,style:{padding:l?"8px 16px":16,display:"flex",flexDirection:"column",gap:8},children:[v&&Ve("div",{style:{display:"flex",alignItems:"center",gap:4},children:[!a&&!c&&ee(Ui,{provider:t.provider,size:11,style:{color:"#6b7280"}}),!a&&ee("span",{style:{fontWeight:600,fontSize:11,color:c?r:"#6b7280"},children:c?"You":fl(t.model,t.provider)}),!s&&ee("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:yu(t.timestamp)})]}),c&&!t.replyToQuestion&&(()=>{let x=d?O0(d):null;if(x&&t.screenshotUrls)return ee("div",{style:{display:"flex",flexDirection:"column",gap:4},children:x.map((T,A)=>{let E=t.screenshotUrls?.[T.route],V=E?`${o}${E}`:null;return Ve("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[V?ee("img",{src:V,title:T.route,style:{...Js,flexShrink:0,marginTop:1},onClick:()=>i(V)}):ee("div",{style:{width:Ks,height:Ks,flexShrink:0}}),Ve("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:[ee("code",{style:{fontSize:10,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px"},children:T.route}),T.text&&ee("div",{style:{marginTop:2},children:qo(T.text)})]})]},A)})});let B=t.screenshotUrl?`${o}${t.screenshotUrl}`:null;return B&&d?Ve("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[ee("img",{src:B,title:"screenshot",style:{...Js,flexShrink:0,marginTop:1},onClick:()=>i(B)}),ee("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:d.includes(`
|
|
102
|
+
`)?qo(d):d})]}):d?ee("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:d.includes(`
|
|
103
|
+
`)?qo(d):d}):null})(),c&&t.replyToQuestion&&d&&ee("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:d.includes(`
|
|
104
|
+
`)?qo(d):d}),!c&&b&&t.segments.map((x,B)=>{if(x.kind==="tool_group")return ee(Cu,{tool:x.tool,items:x.items},B);let T=u?I0(Ys(x.text)):Ys(x.text);return T?ee("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:qo(T)},B):null}),!c&&!b&&d&&ee("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:qo(d)}),!c&&u&&ee(P0,{result:u}),c&&t.replyToQuestion&&(()=>{let x=H0(t,o);return x.length===0?null:ee("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:x.map((B,T)=>ee("img",{src:B.url,title:B.label,style:Js,onClick:()=>i(B.url)},T))})})(),c&&!t.replyToQuestion&&(()=>{let x=F0(t,o);return x.length===0?null:ee("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:x.map((B,T)=>ee("img",{src:B.url,title:B.label,style:Js,onClick:()=>i(B.url)},T))})})(),p&&ee("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:qo(p)}),(C||g)&&Ve("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151"},children:[C&&ee("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:t.toolsUsed.map((x,B)=>ee("div",{children:x},B))}),g&&t.resolutions.map((x,B)=>{let T=x.finalScope??x.inferredScope;return Ve("div",{style:{marginTop:C?4:0},children:[ee("span",{style:{color:x.status==="resolved"?"#10b981":"#f59e0b"},children:x.status==="resolved"?"Done":"Needs review"}),x.summary?` \u2014 ${x.summary}`:""]},B)})]}),!c&&t.responseText&&(()=>{let x=R0(t.responseText);return x.length===0?null:ee("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151",marginTop:2},children:x.map((B,T)=>Ve("div",{style:{marginTop:T>0?6:0},children:[ee("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}),ee("strong",{children:B.element})," \u2014 ",B.decision,ee("div",{style:{color:"#9ca3af",fontStyle:"italic",marginTop:1},children:B.reason})]},T))})})()]},`${t.jobId}-${n}`)});function vu(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 q0(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 Z0(e){return e.role==="assistant"&&!!(e.responseText?.includes("<eval_proposals>")||e.responseText?.includes("<evals>"))}function Zo(e){return!!(e&&typeof e=="object"&&!Array.isArray(e))}function Xs(e){if(e===void 0)return"undefined";try{return JSON.stringify(e)}catch{return String(e)}}function qs(e,t){return Xs(e)===Xs(t)}function Ci(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(Zo(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 Eu(e,t,n,o){if(!Zo(e)){qs(e,t)||o.push({id:`token:${n.join(".")}`,group:"tokens",label:n.join("."),detail:Ci(e),path:n,value:e,currentValue:t});return}if("value"in e){qs(e,t)||o.push({id:`token:${n.join(".")}`,group:"tokens",label:n.join("."),detail:Ci(e),path:n,value:e,currentValue:t});return}for(let r of Object.keys(e))Eu(e[r],Zo(t)?t[r]:void 0,[...n,r],o)}function Q0(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(!Zo(c))continue;let u=typeof c.id=="string"?c.id:`rule-${l}`,d=r.find(p=>Zo(p)&&(typeof p.id=="string"&&p.id===u||Xs(p)===Xs(c)));qs(d,c)||o.push({id:`rule:${u}`,group:"rules",label:typeof c.scope=="string"?c.scope:"rule",detail:typeof c.text=="string"?c.text:Ci(c),path:["rules"],value:c,currentValue:d,ruleValue:c})}let a=Zo(n.components)?n.components:{},s=Zo(e?.components)?e.components:{};for(let l of Object.keys(a)){let c=a[l],u=s[l];qs(c,u)||o.push({id:`component:${l}`,group:"components",label:l,detail:Ci(c),path:["components",l],value:c,currentValue:u})}return Zo(n.tokens)&&Eu(n.tokens,e?.tokens,["tokens"],o),o}function ey(e,t,n){let o=t.filter(a=>n.has(a.id)),r=o.filter(a=>a.group==="rules"&&a.ruleValue),i=o.filter(a=>a.group!=="rules").map(a=>({path:a.path,value:a.value}));if(r.length>0){let a=Array.isArray(e?.rules)?[...e.rules]:[];for(let s of r){let l=s.ruleValue,c=Zo(l)&&typeof l.id=="string"?l.id:null,u=c?a.findIndex(d=>Zo(d)&&d.id===c):-1;u>=0?a[u]=l:a.push(l)}i.push({path:["rules"],value:a})}return i}function ty(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??Ci(t.value),path:t.path??[],value:t.value,currentValue:t.currentValue}]})}function ny({proposal:e,bridgeUrl:t,accentColor:n,busy:o,onApplySelected:r,onDismiss:i,onProjectEvals:a}){let s=(e.generatedEvalIds?.length??0)>0,l=e.status==="pending",[c,u]=jn(!1),[d,p]=jn(null),[g,b]=jn(()=>new Set),[C,v]=jn(!1),x=wr(()=>{let D=ty(e);return!l&&D.length>0?D:Q0(d,e)},[d,l,e]),B=wr(()=>ey(d,x,g),[x,d,g]),T=wr(()=>x.filter(D=>g.has(D.id)),[x,g]),A=wr(()=>{let D={rules:[],components:[],tokens:[],model:[]};for(let f of x)D[f.group].push(f);return D},[x]);Lo(()=>{let D=!1;return Eo(`${t}/model`).then(f=>f.ok?f.json():null).then(f=>{D||p(f?.model&&typeof f.model=="object"?f.model:null)}).catch(()=>{D||p(null)}),()=>{D=!0}},[t,e.id]),Lo(()=>{b(new Set),v(!1)},[e.id,x.map(D=>D.id).join("|")]);let E=_o(D=>{b(f=>{let m=new Set(f);return m.has(D)?m.delete(D):m.add(D),m})},[]),V=_o(()=>{b(new Set(x.map(D=>D.id)))},[x]),q=_o(()=>{b(new Set)},[]),se=`${e.decisionIds.length} decision${e.decisionIds.length===1?"":"s"}`,P=`${x.length} proposed change${x.length===1?"":"s"}`;return ee("div",{style:{padding:"0 16px 12px"},children:Ve("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:[Ve("button",{type:"button",onClick:()=>u(D=>!D),style:{border:0,background:"transparent",color:"#111827",cursor:"pointer",fontFamily:An,padding:0,textAlign:"left",display:"flex",alignItems:"baseline",gap:6},children:[ee("span",{style:{fontSize:12},children:c?"\u25BE":"\u25B8"}),ee("span",{style:{fontWeight:700,fontSize:12},children:"Model suggestion"}),ee("span",{style:{color:"#9ca3af",fontSize:10,textTransform:"uppercase"},children:e.status})]}),Ve("div",{style:{color:"#6b7280",fontSize:11,lineHeight:1.35},children:[se,x.length>0?`, ${P}`:"",s?`, ${e.generatedEvalIds.length} eval draft${e.generatedEvalIds.length===1?"":"s"}`:""]}),c&&ee(Qo,{children:x.length>0?Ve(Qo,{children:[l&&Ve("div",{style:{display:"flex",gap:8},children:[ee("button",{type:"button",disabled:o,onClick:V,style:{...Cl,padding:"4px 7px"},children:"Select all"}),ee("button",{type:"button",disabled:o,onClick:q,style:{...Cl,padding:"4px 7px"},children:"Clear"})]}),["rules","components","tokens"].map(D=>{let f=A[D];return f.length===0?null:Ve("div",{style:{display:"flex",flexDirection:"column",gap:5},children:[Ve("div",{style:{color:"#9ca3af",fontSize:10,textTransform:"uppercase"},children:[D," ",f.length]}),f.map(m=>{let O=g.has(m.id);return Ve("label",{style:{display:"grid",gridTemplateColumns:l?"14px minmax(0, 1fr)":"minmax(0, 1fr)",columnGap:7,alignItems:"start",cursor:l?"pointer":"default",color:O?"#111827":"#6b7280",fontSize:11,lineHeight:1.35},children:[l&&ee("input",{type:"checkbox",checked:O,disabled:o,onChange:()=>E(m.id),style:{WebkitAppearance:"none",appearance:"none",margin:"1px 0 0",width:11,height:11,backgroundColor:O?n:"transparent",border:`1px solid ${O?n:"rgba(0,0,0,0.34)"}`,borderRadius:2,boxSizing:"border-box",cursor:o?"default":"pointer"}}),Ve("span",{style:{minWidth:0},children:[ee("span",{style:{fontWeight:700},children:m.label}),Ve("span",{children:[" \u2014 ",m.detail]}),m.currentValue!==void 0&&Ve("span",{style:{display:"block",color:"#9ca3af",marginTop:2},children:["was ",Ci(m.currentValue)]})]})]},m.id)})]},D)})]}):ee("div",{style:{color:"#9ca3af",fontSize:11,lineHeight:1.4},children:"No concrete model diff could be derived from this proposal."})}),e.status==="pending"&&Ve("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8},children:[ee("button",{type:"button",disabled:o,onClick:i,style:Cl,children:"Dismiss"}),Ve("button",{type:"button",disabled:o||B.length===0,onClick:()=>r(e,B,T),style:{...Us,opacity:o||B.length===0?.45:1,cursor:o||B.length===0?"not-allowed":"pointer"},children:["Apply selected ",B.length||""]})]}),e.status==="applied"&&!s&&ee("button",{type:"button",disabled:o||C,onClick:()=>{v(!0),a()},style:{...Us,opacity:o||C?.45:1,cursor:o||C?"not-allowed":"pointer"},children:C?"Drafting evals":"Create draft evals"}),e.status==="applied"&&s&&Ve("button",{type:"button",disabled:!0,style:{...Us,opacity:.45,cursor:"not-allowed"},children:[e.generatedEvalIds.length," eval",e.generatedEvalIds.length===1?"":"s"," drafted"]})]})})}var Us={border:"1px solid #111827",background:"#111827",color:"#fff",cursor:"pointer",fontFamily:An,fontSize:11,fontWeight:700,padding:"6px 8px"},Cl={border:"1px solid rgba(0,0,0,0.12)",background:"rgba(0,0,0,0.02)",color:"#6b7280",cursor:"pointer",fontFamily:An,fontSize:11,fontWeight:700,padding:"6px 8px"};function ku({threadId:e,bridgeUrl:t,accentColor:n,isStreaming:o,isQueued:r,queuePosition:i,activeJobId:a,streamingEvents:s,onClose:l,onReply:c,onCancel:u,lastError:d,onMouseEnter:p,toolbarRef:g,currentModel:b,currentProvider:C,annotationNumber:v,annotationText:x,onOpenEvals:B,preferredSide:T="right",modal:A=!0}){let[E,V]=jn([]),[q,se]=jn([]),[P,D]=jn(!1),[f,m]=jn(!0),[O,pe]=jn(""),[ye,ce]=jn([]),fe=Co(!1),ge=Co(null),[Ge,W]=jn(!0),[_,J]=jn(0),[Te,_e]=jn(null),Z=_o(re=>_e(re),[]),He=Co(null),rt=Co(null),ve=Co(0),ae=_o((re,ie)=>{let be=re&&ie.trim();He.current&&(He.current.style.opacity=be?"0.65":"1"),ge.current&&(ge.current.style.borderTop=`1px solid ${be?n:"rgba(0,0,0,0.12)"}`)},[n]),Ae=Co(null),st=Co(null),Le=Co(o),Ee=Co(Sl(T)),Ye=Co({x:0,y:0}),xt=Co(!1),zt=Co({x:0,y:0,offsetX:0,offsetY:0}),Rt=Co(T==="right"),[,Dn]=jn(0),Ut=`${S0}:${T}`;Lo(()=>{try{let re=localStorage.getItem(Ut);if(re){let ie=JSON.parse(re);if(typeof ie.top=="number"&&typeof ie.left=="number"){let be=window.innerWidth-wi-eo,We={top:Math.max(eo,Math.min(ie.top,window.innerHeight-eo-200)),left:Math.max(eo,Math.min(ie.left,be))};Rt.current=We.left>=be-2,Ee.current=We,Dn(Ne=>Ne+1)}}}catch{}},[Ut]),Lo(()=>{let re=()=>{if(Rt.current)Ee.current=Sl(T);else{let ie=Ee.current,be=window.innerWidth-wi-eo;Ee.current={top:Math.max(eo,Math.min(ie.top,window.innerHeight-eo-200)),left:Math.max(eo,Math.min(ie.left,be))}}Dn(ie=>ie+1)};return window.addEventListener("resize",re,{passive:!0}),()=>window.removeEventListener("resize",re)},[T]),Lo(()=>{let re=st.current;if(!re)return;let ie=tt=>{tt.button!==0||tt.target.closest("button")||(tt.preventDefault(),tt.stopPropagation(),xt.current=!0,zt.current={x:tt.clientX,y:tt.clientY,offsetX:Ye.current.x,offsetY:Ye.current.y})},be=tt=>{if(!xt.current)return;let Ze=zt.current,At=Ze.offsetX+(tt.clientX-Ze.x),io=Ze.offsetY+(tt.clientY-Ze.y),Gn=Math.max(eo,Math.min(window.innerWidth-wi-eo,Ee.current.left+At)),hn=Math.max(eo,Ee.current.top+io);Ye.current={x:Gn-Ee.current.left,y:hn-Ee.current.top};let Xe=Ae.current;Xe&&(Xe.style.top=`${hn}px`,Xe.style.left=`${Gn}px`,Xe.style.height=`${hu(hn,Gn,g?.current)}px`)},We=()=>{if(!xt.current)return;let tt=Ee.current.top+Ye.current.y,Ze=Ee.current.left+Ye.current.x;Ee.current={top:tt,left:Ze},Ye.current={x:0,y:0};let At=window.innerWidth-wi-eo;Rt.current=Ze>=At-2;try{localStorage.setItem(Ut,JSON.stringify({top:tt,left:Ze}))}catch{}xt.current=!1},Ne=()=>{Ee.current=Sl(T),Ye.current={x:0,y:0},Rt.current=T==="right";try{localStorage.removeItem(Ut)}catch{}Dn(tt=>tt+1)};return re.addEventListener("mousedown",ie),window.addEventListener("mousemove",be),window.addEventListener("mouseup",We),re.addEventListener("dblclick",Ne),()=>{re.removeEventListener("mousedown",ie),window.removeEventListener("mousemove",be),window.removeEventListener("mouseup",We),re.removeEventListener("dblclick",Ne)}},[Ut,T]);let yt=_o(async()=>{try{let re=await Eo(`${t}/thread/${e}`);if(!re.ok)throw new Error(`Thread fetch failed: ${re.status}`);let ie=await re.json(),be=ie.messages??[];V(be);let We=Array.isArray(ie.modelProposals)?ie.modelProposals:ie.modelProposal?[ie.modelProposal]:[];return se(We),m(!1),be.length}catch{return m(!1),null}},[t,e]),zn=_o(async(re,ie)=>{if(!P){D(!0);try{let be=await Eo(`${t}/model/proposals/${encodeURIComponent(re.id)}/${ie}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({provider:C,model:b})});if(be.ok){let We=await be.json();We.proposal&&se(Ne=>Ne.map(tt=>tt.id===We.proposal.id?We.proposal:tt)),await yt()}}finally{D(!1)}}},[t,b,C,yt,P]),Mn=_o((async(re,ie,be)=>{if(!(P||ie.length===0)){D(!0);try{let We=await Eo(`${t}/model/proposals/${encodeURIComponent(re.id)}/apply-selected`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({changes:ie,changeSummaries:be.map(Ne=>({group:Ne.group,label:Ne.label,detail:Ne.detail,path:Ne.path,value:Ne.value,currentValue:Ne.currentValue})),provider:C,model:b})});if(We.ok){let Ne=await We.json();Ne.proposal&&se(tt=>tt.map(Ze=>Ze.id===Ne.proposal.id?Ne.proposal:Ze)),await yt()}}finally{D(!1)}}}),[t,b,C,yt,P]);Lo(()=>{let re=!1;ve.current=0,m(!0),rt.current&&(clearTimeout(rt.current),rt.current=null);let ie=async()=>{let be=await yt();re||be!==0||ve.current>=5||(ve.current+=1,rt.current=setTimeout(ie,200*ve.current))};return ie(),()=>{re=!0,rt.current&&(clearTimeout(rt.current),rt.current=null)}},[yt]),Lo(()=>{Le.current&&!o&&yt(),Le.current=o},[o]);let Ct=wr(()=>s?G0(s):[],[s]),Nt=wr(()=>s?V0(s):null,[s]),mn=wr(()=>E.filter(re=>re.role==="human"&&re.replyToQuestion&&re.queued&&re.jobId!==a),[a,E]),bt=wr(()=>E.filter(re=>!(re.role==="human"&&re.replyToQuestion&&re.queued&&re.jobId!==a)),[a,E]);Lo(()=>{let re=He.current;if(!re)return;let ie=()=>{W(re.scrollHeight-re.scrollTop-re.clientHeight<40);let We=re.scrollTop+re.clientHeight,Ne=re.querySelectorAll("[data-msg]"),tt=0;for(let Ze=0;Ze<Ne.length;Ze++){let At=Ne[Ze];At.offsetTop+At.offsetHeight>We+20&&tt++}J(tt)};return re.addEventListener("scroll",ie,{passive:!0}),()=>re.removeEventListener("scroll",ie)},[]),Lo(()=>{Ge&&He.current&&(He.current.scrollTop=He.current.scrollHeight)},[E,Ct.length,o,Ge]),Lo(()=>{let re=ie=>{ie.key==="Escape"&&(ie.stopPropagation(),l())};return document.addEventListener("keydown",re),()=>document.removeEventListener("keydown",re)},[l]);let Lt=_o(()=>{if(!O.trim()||!c)return;let re=O.trim(),ie=ye.length>0?ye:void 0,be=`_pending_reply_${Date.now()}`,We=!!o,Ne=ie?ie.map(tt=>URL.createObjectURL(tt)):void 0;V(tt=>[...tt,{role:"human",timestamp:Date.now(),jobId:be,replyToQuestion:re,...We?{queued:!0}:{},...Ne?{replyImageUrls:Ne}:{}}]),Promise.resolve(c(e,re,ie)).then(tt=>{tt?.jobId&&V(Ze=>Ze.map(At=>At.jobId===be?{...At,jobId:tt.jobId}:At))}).catch(()=>{}),pe(""),ce([])},[o,O,ye,e,c]),Kn=_o(re=>{let ie=re.clipboardData.items,be=[];for(let We=0;We<ie.length;We++){let Ne=ie[We];if(Ne.type.startsWith("image/")){let tt=Ne.getAsFile();tt&&be.push(tt)}}be.length>0&&(re.preventDefault(),ce(We=>[...We,...be]))},[]),Xt=_o(re=>{re.key==="Enter"&&(re.metaKey||re.ctrlKey)&&(re.preventDefault(),Lt())},[Lt]),Vn=Ee.current.top+Ye.current.y,$t=Ee.current.left+Ye.current.x,cn=hu(Vn,$t,g?.current);return Ve(Qo,{children:[A&&ee("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:re=>{re.target===re.currentTarget&&l()},style:{position:"fixed",inset:0,zIndex:9999}}),Ve("div",{ref:Ae,style:{...C0,height:cn,position:"fixed",top:Vn,left:$t,zIndex:1e4},"data-devtools":"thread-panel",onMouseEnter:p,children:[(()=>{let ie=`<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>`,be=`url("data:image/svg+xml,${encodeURIComponent(ie)}")`;return Ve(Qo,{children:[ee("style",{children:`@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
105
|
+
[data-popmelt-reply]::placeholder { opacity: 0.35; }`}),ee("div",{style:{position:"absolute",inset:-3,padding:5,backgroundImage:be,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"}}})]})})(),Ve("div",{style:{display:"flex",flexDirection:"column",overflow:"hidden",flex:1,minHeight:0},children:[Ve("div",{ref:st,style:{...E0,backgroundColor:n,color:"#ffffff",cursor:"grab",userSelect:"none",WebkitUserSelect:"none"},children:[Ve("span",{style:{display:"flex",alignItems:"center",gap:3,minWidth:0},children:[ee("span",{style:{flexShrink:0},children:v?`${v}.`:"Conversation"}),x&&ee("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:x})]}),ee("button",{onClick:l,style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1},children:"\xD7"})]}),ee("style",{dangerouslySetInnerHTML:{__html:T0+`
|
|
78
106
|
[data-devtools="thread-panel"] ::selection { background: color-mix(in srgb, ${n} 15%, transparent); }
|
|
79
|
-
`}}),Be("div",{ref:Ke,style:{...Jm,transition:"opacity 150ms ease"},"data-devtools":"thread-panel-messages",children:[g&&U("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!g&&Xe.length===0&&Ut.length===0&&!o&&U("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),Xe.map((q,ae)=>{let fe=hd(q,Xe[ae-1]),Te=!g&&X&&yh(q,X),rt=!o&&B&&bh(q);return Be(Hm,{children:[U(md,{msg:q,index:ae,bridgeUrl:t,accentColor:n,onLightbox:ie,hideSender:fe,hideTimestamp:fe,compactSpacing:fe}),Te&&U(Sh,{proposal:X,bridgeUrl:t,accentColor:n,busy:E,onApplySelected:zt,onDismiss:()=>qt("dismiss"),onProjectEvals:()=>qt("project-evals")}),rt&&U("div",{style:{padding:"0 16px 12px"},children:U("button",{type:"button",onClick:B,style:fs,children:"Review proposals"})})]},`${q.jobId}-${ae}`)}),o&&U("div",{style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:r?Be("div",{style:{display:"flex",alignItems:"center",gap:6},children:[Be("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:n,style:{verticalAlign:"middle",flexShrink:0,opacity:.5},children:[U("circle",{cx:"12",cy:"6",r:"2"}),U("circle",{cx:"6",cy:"12",r:"2"}),U("circle",{cx:"18",cy:"12",r:"2"}),U("circle",{cx:"12",cy:"18",r:"2"})]}),Be("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:["queued",i?` ${i}`:""]})]}):Be(ko,{children:[Be("div",{style:{display:"flex",alignItems:"center",gap:4},children:[U(hi,{provider:C,size:11,style:{color:"#6b7280"}}),U("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:Ia(v,C)})]}),nt.map((q,ae)=>{if(q.kind==="tool_group")return U(xd,{tool:q.tool,items:q.items},ae);if(q.kind==="file_content")return U(ph,{file:q.file,content:q.content,ext:q.ext,isPlan:q.isPlan,onAccept:q.isPlan&&c?()=>c(e,"Looks good, please proceed with implementation."):void 0},ae);if(q.kind==="thinking")return U("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:q.text},ae);let fe=ps(q.text);return fe?U("div",{style:{paddingLeft:12,lineHeight:1.5,wordBreak:"break-word"},children:Co(fe)},ae):null}),Be("div",{style:{display:"flex",alignItems:"center",gap:6},children:[U(th,{color:n}),d&&U("button",{onClick:d,style:{background:"none",border:"1px solid rgba(0,0,0,0.1)",color:"#6b7280",fontSize:10,padding:"2px 8px",cursor:"pointer",fontFamily:"inherit",marginLeft:"auto"},children:"Cancel"})]})]})}),Ut.length>0&&Be("div",{style:{display:"flex",flexDirection:"column",borderTop:"1px solid rgba(0,0,0,0.08)"},children:[U("div",{style:{padding:"8px 16px 0",fontSize:10,color:"#9ca3af",fontStyle:"italic"},children:"queued"}),Ut.map((q,ae)=>(()=>{let fe=hd(q,Ut[ae-1]);return U(md,{msg:q,index:Xe.length+ae,bridgeUrl:t,accentColor:n,onLightbox:ie,hideSender:fe,hideTimestamp:fe,compactSpacing:fe},`${q.jobId}-staged-${ae}`)})())]}),!K&&w.length>0&&U("div",{style:{position:"sticky",bottom:5,display:"flex",justifyContent:"flex-end",paddingRight:3,pointerEvents:"none"},children:U("button",{onClick:()=>{Ke.current&&Ke.current.scrollTo({top:Ke.current.scrollHeight,behavior:"smooth"})},style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:4,fontSize:10,fontFamily:un,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:Be("span",{style:{position:"relative",backgroundColor:"#eaeaea",padding:"0 6px",color:"#374151",fontFamily:un,lineHeight:1.4},children:[ne," message",ne!==1?"s":""," \u2193"]})})})]}),!o&&u&&Be("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[U("span",{style:{fontWeight:600},children:"Error: "}),u]}),c&&Be("div",{style:{flexShrink:0,position:"relative"},children:[Ie.length>0&&U("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:Ie.map((q,ae)=>Be("span",{onClick:()=>ue(fe=>fe.filter((Te,rt)=>rt!==ae)),onMouseEnter:fe=>{let Te=fe.currentTarget.querySelector("[data-chip-x]");Te&&(Te.style.color="#fff")},onMouseLeave:fe=>{let Te=fe.currentTarget.querySelector("[data-chip-x]");Te&&(Te.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 ",ae+1,U("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"rgba(255,255,255,0.4)"},children:"\xD7"})]},ae))}),Be("div",{ref:Me,style:{...Ym,borderTop:"1px solid rgba(0,0,0,0.12)"},children:[U("input",{"data-popmelt-reply":!0,autoFocus:!0,value:$,onChange:q=>{ge(q.target.value),Re(ke.current,q.target.value)},onFocus:()=>{ke.current=!0,Re(!0,$)},onBlur:()=>{ke.current=!1,Re(!1,$)},onKeyDown:Sn,onPaste:$n,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:un,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),U("button",{onClick:Ct,disabled:!$.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:$.trim()?"pointer":"default",color:$.trim()?n:"rgba(0,0,0,0.2)",flexShrink:0},children:Be("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[U("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"}),U("path",{d:"M6 12h16"})]})})]})]})]})]}),ze&&U(ih,{src:ze,onClose:()=>Ye(null)})]})}import{jsx as Qr,jsxs as Ed}from"react/jsx-runtime";var Eh=[],Wa=wh(null),Na="devtools-provider",ys="devtools-model",za="devtools-open-thread-id",Fa="popmelt-synthesize-thread",$a="popmelt-eval-synthesize-thread",Zr="#000000";function kh(e){let t=e.getBoundingClientRect();return t.bottom<0||t.top>window.innerHeight||t.right<0||t.left>window.innerWidth}function Th(e){for(let t of e){let n=Tn(t);if(n){kh(n)&&n.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"});return}}}async function Cd(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 Ih={0:0,1:1},Mh={0:0,1:1,2:1};function Rh(e,t,n){if(t==="copilot")return 0;let o=t==="codex"?ls:as;return e==="copilot"?0:e==="claude"&&t==="codex"?Ih[n]??Math.min(n,o.length-1):e==="codex"&&t==="claude"?Mh[n]??Math.min(n,o.length-1):Math.min(n,o.length-1)}function Ah({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,[a,s]=wt(i),[l,c]=wt(!!i),d=a,[u,p]=fl(),f=ul(n,t&&!!d,d);At(()=>{i&&(typeof window<"u"&&(window.__POPMELT_PROJECT_ID__=i),s(i),c(!0))},[i]);let v=tn(null),C=tn(null),x=cl()??n,I=tn(new Map),B=tn(new Map),T=tn(!1),R=Lr(),[w,z]=wt(()=>typeof window>"u"?"claude":localStorage.getItem(Na)||"claude"),[X,j]=wt(()=>{if(typeof window>"u")return 0;let S=localStorage.getItem(ys);return S&&parseInt(S,10)||0}),[E,L]=wt([]),[g,m]=wt({}),[$,ge]=wt(0),[Ie,ue]=wt({}),[ke,Me]=wt(null),[K,_]=wt("idle"),[ne,he]=wt(null);At(()=>{f.isConnected&&Ja(x).then(S=>{if(!S)return;let A=Object.entries(S.providers).filter(([,we])=>we.available).map(([we])=>we);A.length>0&&L(A);let ee={};for(let[we,Ce]of Object.entries(S.providers))Ce.models&&Ce.models.length>0&&(ee[we]=Ce.models);m(ee);let se={};for(let[we,Ce]of Object.entries(S.providers))Ce.mcp&&(se[we]=Ce.mcp);ue(se)})},[f.isConnected,f.capabilitiesVersion,$,x]),At(()=>{if(!f.isConnected){Me(null);return}let S=!1;return mo(x).then(A=>{S||Me(A?.version??null)}),()=>{S=!0}},[f.isConnected,f.capabilitiesVersion,$,x]),At(()=>{if(K==="idle"||K==="restarting")return;let S=window.setTimeout(()=>{_("idle"),he(null)},K==="ok"?4e3:8e3);return()=>window.clearTimeout(S)},[K]),At(()=>{if(E.length>0&&!E.includes(w)){let S=E[0];z(S),localStorage.setItem(Na,S)}},[E,w]);let ze=w==="codex"?[...ls]:w==="copilot"?[...Ta]:[...as],Ye=g[w]&&g[w].length>0?g[w]:ze,ie=Ye[X]??Ye[0];At(()=>{if(!t||d||l)return;let S=!1;return fetch("/popmelt/status").then(A=>A.ok?A.json():null).then(A=>{if(S)return;let ee=typeof window<"u"&&A?.devOrigin===window.location.origin,se=A?.projectId&&(ee||A.projectIdVerified===!0)?A.projectId:null;se&&typeof window<"u"&&(window.__POPMELT_PROJECT_ID__=se),s(se),c(!0)}).catch(()=>{S||c(!0)}),()=>{S=!0}},[t,d,l]),At(()=>{X>=Ye.length&&(j(0),localStorage.setItem(ys,"0"))},[X,Ye.length]);let Ke=Nt(S=>{let A=w;z(S),localStorage.setItem(Na,S);let ee=Rh(A,S,X);j(ee),localStorage.setItem(ys,String(ee))},[w,X]),Ge=Nt(S=>{j(S),localStorage.setItem(ys,String(S))},[]),[ve,Re]=wt(new Set),[at,G]=wt(null),[le,te]=wt(null),[Oe,lt]=wt(null),[De,ot]=wt(null);At(()=>{f.isConnected&&Mr(x).then(S=>{S?.components&&Re(new Set(Object.keys(S.components)))})},[f.isConnected,x]);let ct=Nt(async S=>{let A=[];for(let ee of S)try{(await Ya(ee,x)).added&&A.push(ee)}catch(se){console.error("[Popmelt] Failed to add component to model:",ee,se)}A.length>0&&(Re(ee=>{let se=new Set(ee);for(let we of A)se.add(we);return se}),G(A[A.length-1]))},[x]),Je=Nt(S=>{G(S)},[]),ht=Nt(()=>{Mr(x).then(S=>{S?.components&&Re(new Set(Object.keys(S.components)))})},[x]),qt=Nt(async S=>{try{(await Ua(S,x)).removed&&Re(ee=>{let se=new Set(ee);return se.delete(S),se})}catch(A){console.error("[Popmelt] Failed to remove component from model:",A)}},[x]),zt=Nt((S,A)=>{p({type:"MODIFY_SPACING_TOKEN",payload:S}),p({type:"ADD_SPACING_TOKEN_CHANGE",payload:A})},[p]),nt=Nt((S,A)=>{p({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:S,originalValue:A}})},[p]),[Ve,Ut]=wt(null),[Xe,Ct]=wt(()=>typeof window>"u"?null:localStorage.getItem(Fa)||null),[$n,Sn]=wt(null),[Mn,ln]=wt(()=>typeof window>"u"?null:localStorage.getItem($a)||null),[Ft,q]=wt(0),[ae,fe]=wt({}),[Te,rt]=wt(new Set);At(()=>{Xe?localStorage.setItem(Fa,Xe):localStorage.removeItem(Fa)},[Xe]),At(()=>{Mn?localStorage.setItem($a,Mn):localStorage.removeItem($a)},[Mn]);let[dt,ft]=wt(0),Kt=tn([]);At(()=>{let S=Kt.current,A=u.spacingTokenMods;Kt.current=A;let ee=new Map(S.map(Ce=>[Ce.tokenPath,Ce])),se=new Map(A.map(Ce=>[Ce.tokenPath,Ce])),we=!1;for(let[Ce,Fe]of se){let me=ee.get(Ce);if(!(me&&me.currentValue===Fe.currentValue)){we=!0,Fe.currentValue==="__deleted__"?Ka(Ce,x).catch(Ne=>console.error("[Popmelt] Failed to sync token delete:",Ne)):ws(Ce,Fe.currentValue,x).catch(Ne=>console.error("[Popmelt] Failed to sync token update:",Ne));for(let Ne of Fe.targets){let Wt=document.querySelector(Ne.selector);if(Wt)if(Fe.currentValue==="__deleted__")Wt.style.removeProperty(Ne.property);else{let gt=Fe.currentPx;gt>0&&Wt.style.setProperty(Ne.property,`${gt}px`,"important")}}}}for(let[Ce,Fe]of ee)if(!se.has(Ce)){we=!0,ws(Ce,Fe.originalValue,x).catch(me=>console.error("[Popmelt] Failed to restore token on undo:",me));for(let me of Fe.targets){let Ne=document.querySelector(me.selector);Ne&&Ne.style.removeProperty(me.property)}}we&&ft(Ce=>Ce+1)},[u.spacingTokenMods,x]);let[Wn,hn]=wt(()=>ml()),Rn=Nt(S=>{hn(S),hl(S)},[]),[He,yt]=wt(()=>typeof window>"u"?null:localStorage.getItem(za)||null),V=tn(null),[Ae,qe]=wt(new Set),[Et,cn]=wt(null);At(()=>{He?localStorage.setItem(za,He):localStorage.removeItem(za)},[He]);let ut="popmelt-in-flight-jobs",[Le,nn]=wt(()=>{try{let S=localStorage.getItem(ut);return S?JSON.parse(S):{}}catch{return{}}});At(()=>{try{Object.keys(Le).length>0?localStorage.setItem(ut,JSON.stringify(Le)):localStorage.removeItem(ut)}catch{}},[Le]),At(()=>{let S=A=>{if(A.key===ut)try{let ee=A.newValue?JSON.parse(A.newValue):{};nn(ee)}catch{}};return window.addEventListener("storage",S),()=>window.removeEventListener("storage",S)},[]);let Zt=tn(new Map),jn=tn(new Map),$t=tn(new Map);At(()=>{for(let[S,A]of Object.entries(Le)){A.annotationIds.length>0&&Zt.current.set(S,A.annotationIds);let ee=new Set(A.styleSelectors);for(let se of A.annotationIds){let we=u.annotations.find(Ce=>Ce.id===se);if(we&&(we.linkedSelector&&ee.add(we.linkedSelector),we.groupId))for(let Ce of u.annotations)Ce.groupId===we.groupId&&Ce.linkedSelector&&ee.add(Ce.linkedSelector)}ee.size>0&&jn.current.set(S,Array.from(ee)),A.threadId&&$t.current.set(S,A.threadId)}},[Le,u.annotations]);let To=tn("");At(()=>{if(u.annotations.length===0)return;let S=Object.keys(Le).sort().join(",");if(S===To.current)return;To.current=S;let A=new Set;for(let se of Object.values(Le))for(let we of se.annotationIds)A.add(we);let ee=u.annotations.filter(se=>A.has(se.id)?!1:!!(se.status==="in_flight"||(se.status==="pending"||!se.status)&&(se.captured||se.threadId))).map(se=>se.id);ee.length>0&&p({type:"SET_ANNOTATION_STATUS",payload:{ids:ee,status:"dismissed"}})},[u.annotations,Le,p]);let nr=po(()=>{let S=new Set;for(let A of Object.values(Le))for(let ee of A.annotationIds)S.add(ee);return S},[Le]),Io=po(()=>{let S=new Set(f.activeJobIds),A=new Set;for(let[ee,se]of Object.entries(Le))if(S.has(ee))for(let we of se.annotationIds)A.add(we);return A},[Le,f.activeJobIds]),jo=po(()=>{let S=new Set(f.activeJobIds),A=Object.entries(Le).filter(([we])=>!S.has(we)),ee=A.length,se=new Map;return A.forEach(([,we],Ce)=>{let Fe=`(${Ce+1}/${ee})`;for(let me of we.annotationIds)se.set(me,Fe)}),se},[Le,f.activeJobIds]),or=po(()=>{let S=new Set;for(let A of Object.values(Le))if(!(!A.global&&A.routePathnames?.length&&!A.routePathnames.includes(R)))for(let ee of A.styleSelectors)S.add(ee);return S},[Le,R]),yn=po(()=>{let S=new Map;for(let A of Object.values(Le))if(!(!A.global&&A.routePathnames?.length&&!A.routePathnames.includes(R))){for(let ee of A.styleSelectors)S.set(ee,A.color);for(let ee of A.annotationIds){let se=u.annotations.find(we=>we.id===ee);if(se&&(se.linkedSelector&&S.set(se.linkedSelector,A.color),se.groupId))for(let we of u.annotations)we.groupId===se.groupId&&we.linkedSelector&&S.set(we.linkedSelector,A.color)}}return S},[Le,u.annotations,R]),Go=tn(u.annotations);Go.current=u.annotations;let Jo=tn(u.styleModifications);Jo.current=u.styleModifications;let Ze=tn(Le);Ze.current=Le,At(()=>{let S=null,A=()=>{if(Object.keys(Ze.current).length>0)return;let se=Go.current,we=Jo.current,Ce=[],Fe=[];for(let me of se){if(!me.linkedSelector||!me.linkedSelector.startsWith("[data-pm=")||me.pathname||me.captured||me.status&&me.status!=="pending")continue;let Ne=document.querySelector(me.linkedSelector);!Ne&&me.elements?.[0]?.selector&&(Ne=document.querySelector(me.elements[0].selector)),Ne||Ce.push(me.linkedSelector)}for(let me of we)me.pathname&&me.pathname!==window.location.pathname||document.querySelector(me.selector)||Fe.push(me.selector);(Ce.length>0||Fe.length>0)&&p({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:Ce,styleSelectors:Fe}})},ee=new MutationObserver(se=>{se.some(we=>we.removedNodes.length>0)&&(S&&clearTimeout(S),S=setTimeout(A,3e3))});return ee.observe(document.body,{childList:!0,subtree:!0}),()=>{ee.disconnect(),S&&clearTimeout(S)}},[p]);let fo=tn(typeof window<"u"?window.location.pathname:"/");At(()=>{let S=se=>{if(T.current)return;let we=window.location.pathname;if(se===we)return;let Ce=Go.current.filter(me=>me.pathname===se&&(me.status??"pending")==="pending");if(console.log(`[Popmelt] Navigation from ${se} \u2192 ${we}, ${Ce.length} pending annotations on departing page`),Ce.length===0)return;let Fe=v.current;if(!Fe){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if(Hr(document.body,Fe,Ce,{dpr:1}).then(me=>li(me)).then(me=>{me?(B.current.set(se,me),console.log(`[Popmelt] Cached screenshot for ${se} (${(me.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${se}`)}).catch(me=>{console.warn("[Popmelt] Capture-on-leave failed:",me)}),B.current.size>20){let me=[...B.current.entries()];B.current=new Map(me.slice(-10))}},A=se=>{let we=se.detail?.prevPath;we&&(S(we),fo.current=window.location.pathname)},ee=()=>{let se=fo.current;S(se),fo.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",A),window.addEventListener("popstate",ee),()=>{window.removeEventListener("popmelt:locationchange",A),window.removeEventListener("popstate",ee)}},[]),At(()=>{if(f.lastCompletedJobId&&f.lastCompletedJobId in Le&&nn(S=>{let{[f.lastCompletedJobId]:A,...ee}=S;return ee}),f.lastCompletedJobId&&f.lastCompletedJobId===Ve&&(ft(S=>S+1),Ut(null)),f.lastCompletedJobId&&f.lastCompletedJobId===$n&&(q(S=>S+1),Sn(null)),f.lastCompletedJobId){let S=Object.entries(ae).find(([,A])=>A===f.lastCompletedJobId)?.[0];S&&(fe(A=>{let{[S]:ee,...se}=A;return se}),q(A=>A+1))}},[f.lastCompletedJobId,Ve,$n,ae]);let kt=tn(new Set),wn=tn(!1);At(()=>{if(!f.isConnected){wn.current=!1;return}wn.current||(wn.current=!0,mo(x).then(async S=>{if(!S)return;let A=S.activeJobs??[],ee=S.recentJobs??[],se=new Set(A.map(Fe=>Fe.id)),we=JSON.parse(localStorage.getItem(ut)||"{}"),Ce=new Set;for(let Fe of Object.values(we))if(Fe.annotationIds)for(let me of Fe.annotationIds)Ce.add(me);nn(Fe=>{let me={...Fe},Ne=Date.now();for(let gt of Object.keys(me)){if(gt.startsWith("_pending_")){let bt=parseInt(gt.replace(/^_pending_(?:reply_)?/,""),10);!isNaN(bt)&&Ne-bt>3e4&&delete me[gt];continue}se.has(gt)||delete me[gt]}for(let gt of A)if(!me[gt.id]&&(gt.annotationIds?.length||gt.threadId)){let bt=gt.kind,Bo=Array.from(new Set((gt.annotationIds??[]).map(rr=>u.annotations.find(Xo=>Xo.id===rr)?.pathname||R).filter(Boolean)));me[gt.id]={annotationIds:gt.annotationIds??[],styleSelectors:[],color:bt==="synthesize_evals"||bt==="run_eval"||bt==="materialize_model"&>.standalone===!0?Zr:gt.color??"#888",threadId:gt.threadId,kind:bt,routePathnames:Bo.length>0?Bo:void 0,global:bt==="synthesize"||bt==="synthesize_evals"||bt==="run_eval"||bt==="materialize_model"&>.standalone===!0}}let Wt=new Set;for(let gt of ee)if(gt.annotationIds)for(let bt of gt.annotationIds)Wt.add(bt);for(let gt of Object.keys(me)){if(!gt.startsWith("_pending_"))continue;let bt=me[gt];bt&&bt.annotationIds.some(Bo=>Wt.has(Bo))&&delete me[gt]}return me});for(let Fe of ee)if(Fe.status==="done"&&Fe.annotationIds?.length&&Fe.annotationIds.some(me=>Ce.has(me))&&!kt.current.has(Fe.id))try{let me=await Ei(x,Fe.id);if(!me)continue;let Ne=me.events.find(Wt=>Wt.type==="done");Ne&&Array.isArray(Ne.resolutions)&&(kt.current.add(Fe.id),p({type:"APPLY_RESOLUTIONS",payload:{resolutions:Ne.resolutions,threadId:Ne.threadId??void 0}}))}catch{}}))},[f.isConnected,x,p,u.annotations,R]),At(()=>{let S=f.events.filter(A=>A.type==="done"&&A.data.resolutions);for(let A of S){let ee=A.data.jobId;kt.current.has(ee)||(kt.current.add(ee),Array.isArray(A.data.resolutions)&&p({type:"APPLY_RESOLUTIONS",payload:{resolutions:A.data.resolutions,threadId:A.data.threadId}}))}},[f.events,p]);let An=tn(new Set);At(()=>{let S=f.events.filter(A=>A.type==="error"&&A.data.cancelled);for(let A of S){let ee=A.data.jobId;if(!ee||An.current.has(ee))continue;An.current.add(ee);let se=Le[ee];se&&se.annotationIds.length>0&&p({type:"SET_ANNOTATION_STATUS",payload:{ids:se.annotationIds,status:"dismissed"}})}},[f.events,Le,p]);let Cn=tn(0);At(()=>{let S=f.incrementalResolutions;if(S.length<=Cn.current)return;let A=S.slice(Cn.current);Cn.current=S.length,p({type:"APPLY_RESOLUTIONS",payload:{resolutions:A}})},[f.incrementalResolutions,p]),At(()=>{f.incrementalResolutions.length===0&&(Cn.current=0)},[f.incrementalResolutions.length]);let Vo=Nt(async()=>{let S=v.current;if(!S)return!1;let A=await Hr(document.body,S,u.annotations);if(A.length===0)return!1;let ee=await Nl(A,u.annotations,u.styleModifications);return ee&&p({type:"MARK_CAPTURED"}),ee},[u.annotations,u.styleModifications,p]),oo=Nt((S,A)=>{let ee=I.current.get(S)||[];I.current.set(S,[...ee,...A])},[]),ro=Nt(async()=>{let S=v.current;if(!S)return!1;let A=u.annotations.filter(et=>(et.status??"pending")==="pending"),ee=u.styleModifications.filter(et=>!et.captured&&(!et.pathname||et.pathname===R)),se=u.spacingTokenChanges.filter(et=>!et.captured);if(A.length===0&&ee.length===0&&se.length===0)return!1;let we=new Map;for(let et of A){let on=et.pathname||R;we.has(on)||we.set(on,[]),we.get(on).push(et)}let Ce=new Map,Fe=[...we.keys()].filter(et=>et!==R);if(Fe.length>0){let et=R,on={x:window.scrollX,y:window.scrollY};T.current=!0;for(let h of Fe)try{console.log(`[Popmelt] Navigating to ${h} for screenshot capture`),await Cd(h,r),window.location.pathname!==h&&console.warn(`[Popmelt] Navigation to ${h} did not take effect (at ${window.location.pathname})`);let b=we.get(h)||[],H=await Hr(document.body,S,b,{dpr:1}),y=await li(H);y&&(Ce.set(h,y),console.log(`[Popmelt] Captured ${h} (${(y.size/1024).toFixed(0)}KB)`))}catch(b){console.warn(`[Popmelt] Failed to capture ${h}:`,b)}await Cd(et,r),window.scrollTo(on.x,on.y),T.current=!1}let me=A.filter(et=>(et.pathname||R)===R),Ne=await Hr(document.body,S,me.length>0?u.annotations:[],{dpr:1});if(Ne.length>0){let et=await li(Ne);et&&Ce.set(R,et)}if(Ce.size===0)return!1;let Wt=Hs(A,ee,void 0,se.length>0?se:void 0),gt=JSON.stringify(Wt),bt=new Map;for(let et of A){let on=I.current.get(et.id);if(on&&on.length>0&&bt.set(et.id,on),et.groupId){for(let h of A)if(h.groupId===et.groupId&&h.id!==et.id){let b=I.current.get(h.id);b&&b.length>0&&bt.set(h.id,b)}}}let Bo=we.size>1;console.log(`[Popmelt] Submit: ${we.size} page(s), ${Ce.size} screenshot(s), pages: [${[...we.keys()].join(", ")}], cached: [${[...B.current.keys()].join(", ")}]`);let rr=Bo?Ce:Ce.get(R)??Ce,Xo=A.map(et=>et.id),Ci=ee.map(et=>et.selector),bs=Array.from(new Set([...A.map(et=>et.pathname||R),...ee.map(et=>et.pathname||R)])),vs=Os(u.activeColor),Do=`_pending_${Date.now()}`,ni={annotationIds:Xo,styleSelectors:Ci,color:u.activeColor,threadId:void 0,routePathnames:bs};try{let et=JSON.parse(localStorage.getItem(ut)||"{}");et[Do]=ni,localStorage.setItem(ut,JSON.stringify(et))}catch{}nn(et=>({...et,[Do]:ni}));try{let{jobId:et,threadId:on}=await Va(rr,gt,x,vs,w,ie.id,bt.size>0?bt:void 0,Ri());for(let k of bt.keys())I.current.delete(k);for(let k of we.keys())B.current.delete(k);let h={...ni,threadId:on};try{let k=JSON.parse(localStorage.getItem(ut)||"{}");delete k[Do],k[et]=h,localStorage.setItem(ut,JSON.stringify(k))}catch{}nn(k=>{let{[Do]:M,...N}=k;return{...N,[et]:h}}),p({type:"MARK_CAPTURED"}),on&&Xo.length>0&&p({type:"SET_ANNOTATION_THREAD",payload:{ids:Xo,threadId:on}});let b=u.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),y=((b?.[1]?parseFloat(b[1]):29)+60)%360;return p({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${y})`}),!0}catch(et){try{let on=JSON.parse(localStorage.getItem(ut)||"{}");delete on[Do],localStorage.setItem(ut,JSON.stringify(on))}catch{}return nn(on=>{let{[Do]:h,...b}=on;return b}),console.error("[Pare] Failed to send to bridge:",et),!1}},[u.annotations,u.styleModifications,u.spacingTokenChanges,u.activeColor,p,x,w,ie.id,R,r]),Xn=Nt(async()=>{if(Xe){yt(Xe);return}try{let{jobId:S,threadId:A}=await el(x,w,ie.id);Ut(S),Ct(A);let ee={annotationIds:[],styleSelectors:[],color:"#6b7280",threadId:A,kind:"synthesize",global:!0};nn(se=>({...se,[S]:ee})),yt(A)}catch(S){console.error("[Popmelt] Failed to start synthesize:",S)}},[x,w,ie.id,Xe]),Qt=Nt(async()=>{Sn(null),ln(null),yt(null);try{let{jobId:S,threadId:A}=await tl(x,w,ie.id);Sn(S),ln(A);let ee={annotationIds:[],styleSelectors:[],color:Zr,threadId:A,kind:"synthesize_evals",global:!0};nn(se=>({...se,[S]:ee})),yt(A)}catch(S){console.error("[Popmelt] Failed to start eval synthesis:",S)}},[x,w,ie.id]),Mo=Nt(async S=>{let A=v.current;if(A){fe(ee=>({...ee,[S.id]:"_pending_"}));try{let se=(await Hr(document.body,A,[],{dpr:1}))[0];if(!se){fe(Fe=>{let{[S.id]:me,...Ne}=Fe;return Ne});return}let{jobId:we,threadId:Ce}=await Za(S.id,se,{url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollX:window.scrollX,scrollY:window.scrollY},x,w,ie.id,Ri());if(fe(Fe=>({...Fe,[S.id]:we})),Ce){rt(me=>new Set(me).add(Ce));let Fe={annotationIds:[],styleSelectors:[],color:Zr,threadId:Ce,kind:"run_eval",global:!0};nn(me=>({...me,[we]:Fe})),yt(Ce)}}catch(ee){fe(se=>{let{[S.id]:we,...Ce}=se;return Ce}),console.error("[Popmelt] Failed to run eval:",ee)}}},[x,w,ie.id]),Yo=Nt(async(S,A,ee)=>{let se=Object.values(Ze.current).find(Ne=>Ne.threadId===S)?.color??u.annotations.find(Ne=>Ne.threadId===S)?.color??u.activeColor,we=u.annotations.filter(Ne=>Ne.threadId===S&&(Ne.status==="waiting_input"||Ne.status==="resolved"||Ne.status==="needs_review")),Ce=we.map(Ne=>Ne.id),Fe=`_pending_reply_${Date.now()}`,me={annotationIds:Ce,styleSelectors:[],color:se,threadId:S};try{let Ne=JSON.parse(localStorage.getItem(ut)||"{}");Ne[Fe]=me,localStorage.setItem(ut,JSON.stringify(Ne))}catch{}nn(Ne=>({...Ne,[Fe]:me}));try{let Ne=Os(u.activeColor),{jobId:Wt}=await nl(S,A,x,Ne,w,ie.id,ee,Ri()),gt={...me};try{let bt=JSON.parse(localStorage.getItem(ut)||"{}");delete bt[Fe],bt[Wt]=gt,localStorage.setItem(ut,JSON.stringify(bt))}catch{}return nn(bt=>{let{[Fe]:Bo,...rr}=bt;return{...rr,[Wt]:gt}}),we.length>0&&p({type:"SET_ANNOTATION_STATUS",payload:{ids:Ce,status:"in_flight"}}),f.dismissQuestion(S),{jobId:Wt}}catch(Ne){try{let Wt=JSON.parse(localStorage.getItem(ut)||"{}");delete Wt[Fe],localStorage.setItem(ut,JSON.stringify(Wt))}catch{}nn(Wt=>{let{[Fe]:gt,...bt}=Wt;return bt}),console.error("[Pare] Failed to send reply:",Ne)}},[u.activeColor,u.annotations,x,f.dismissQuestion,p,w,ie.id]),Ro=tn(new Set);At(()=>{for(let S of f.pendingQuestions){if(Ro.current.has(S.jobId))continue;Ro.current.add(S.jobId);let A=S.annotationIds&&S.annotationIds.length>0?S.annotationIds:void 0;!A&&S.threadId&&(A=u.annotations.filter(ee=>ee.threadId===S.threadId).map(ee=>ee.id)),A&&A.length>0&&p({type:"SET_ANNOTATION_QUESTION",payload:{ids:A,question:S.question,threadId:S.threadId}})}},[f.pendingQuestions,p,u.annotations]);let Tr=po(()=>{if(f.activeJobId&&f.activeJobId in Le)return Le[f.activeJobId].color;let S=Object.values(Le);return S.length>0?S[S.length-1].color:void 0},[f.activeJobId,Le]),Ao=Nt(S=>{yt(S)},[]),Uo=Nt(S=>{rt(A=>new Set(A).add(S)),V.current=Zr,yt(S)},[]),D=Nt(S=>{yt(null),S&&(qe(A=>new Set(A).add(S)),ol(S,x).catch(A=>{console.warn("[Popmelt] Failed to delete thread:",A)}))},[x]),W=Nt((S,A)=>{let ee=Le[S],se=jn.current.get(S);if(ee){let Ce=new Set(ee.styleSelectors);for(let Fe of ee.annotationIds){let me=u.annotations.find(Ne=>Ne.id===Fe);if(me&&(me.linkedSelector&&Ce.add(me.linkedSelector),me.groupId))for(let Ne of u.annotations)Ne.groupId===me.groupId&&Ne.linkedSelector&&Ce.add(Ne.linkedSelector)}Ce.size>0&&(se=Array.from(Ce))}se?.length&&Th(se);let we=ee?.threadId||A||$t.current.get(S);if(we){let Ce=ee?.kind==="materialize_model"&&(ee.annotationIds?.length??0)===0;V.current=ee?.kind==="synthesize_evals"||ee?.kind==="run_eval"||Ce?Zr:ee?.color??null,yt(we)}},[Le,u.annotations]),oe=Nt(S=>{if(!S){cn(null);return}let A=Zt.current.get(S);A&&A.length>0?cn(new Set(A)):cn(null)},[]),re=Nt(async S=>{try{let A=S?`${x}/cancel?jobId=${S}`:`${x}/cancel`;await qn(A,{method:"POST"})}catch{}},[x]),ce=Nt(async()=>{_("restarting"),he("Restarting bridge");let S=await Cs(x,Wi,2e4);if(S.ok){await dl(S.bridgeUrl??n,d),Me(S.status.version??Wi),_("ok"),he(S.status.version?`Bridge restarted on ${S.status.version}`:"Bridge restarted"),ge(A=>A+1);return}Me(S.status?.version??ke),_("error"),he(S.error)},[ke,n,d,x]),xe=po(()=>{if(!He)return null;for(let S of Object.values(Le))if(S.threadId===He&&S.kind){if(S.kind==="materialize_model"&&S.annotationIds.length>0)continue;return S.kind}return He===Xe?"synthesize":He===Mn?"synthesize_evals":Te.has(He)?"run_eval":null},[He,Le,Xe,Mn,Te]),Ee=xe==="synthesize_evals"||xe==="run_eval",ye=xe==="materialize_model",Dt=xe==="synthesize";At(()=>{(u.activeTool==="model"&&He&&!Dt||u.activeTool==="eval"&&He&&!Ee)&&yt(null)},[u.activeTool,He,Dt,Ee]);let Vt=Nt(()=>{p({type:"SET_TOOL",payload:"eval"}),q(S=>S+1),yt(null)},[p]),_t=tn(null);At(()=>{u.isAnnotating?_t.current&&(yt(_t.current),_t.current=null):He&&(_t.current=He,yt(null))},[u.isAnnotating]);let Tt=po(()=>{if(!He)return null;for(let[S,A]of Object.entries(Le))if(A.threadId===He)return S;for(let[S,A]of Object.entries(f.activeJobThreads))if(A===He)return S;return null},[He,Le,f.activeJobThreads]),Qe=He?u.annotations.find(S=>S.threadId===He):void 0,En=po(()=>Tt?f.events.filter(S=>S.data.jobId===Tt):Eh,[Tt,f.events.length]),Ln=po(()=>Ee||ye?Zr:Qe?.color??V.current??u.activeColor,[Ee,ye,Qe?.color,u.activeColor]),pn=Qe?u.annotations.indexOf(Qe)+1:void 0;At(()=>{if(Ee)return;let S=Qe?.color??V.current;He&&S&&p({type:"SET_COLOR",payload:S})},[He,Ee]);let[Pn,Lo]=wt(!1),[Po,Ir]=wt(0),go=tn(null),ei=Nt(S=>{S?(go.current&&(clearTimeout(go.current),go.current=null),Lo(!0)):go.current=setTimeout(()=>{Lo(!1),go.current=null},150)},[]),Ko=Nt(()=>{Ir(S=>S+1),f.clearEvents(),yt(null),qe(new Set),re()},[f.clearEvents,re]);At(()=>()=>{go.current&&clearTimeout(go.current)},[]);let[io,wi]=wt(!1);At(()=>{wi(!0)},[]);let ti=po(()=>({isEnabled:t}),[t]);return!t||!io?Qr(Wa.Provider,{value:ti,children:e}):Ed(Wa.Provider,{value:ti,children:[e,Qr(Ic,{state:u,dispatch:p,onScreenshot:Vo,inFlightAnnotationIds:nr,activeAnnotationIds:Io,queuePositionMap:jo,inFlightStyleSelectors:or,inFlightSelectorColors:yn,onAttachImages:oo,onReply:f.isConnected?Yo:void 0,onViewThread:f.isConnected?Ao:void 0,onCloseThread:D,onModelComponentsAdd:f.isConnected?ct:void 0,onModelComponentFocus:f.isConnected?Je:void 0,onModelComponentHover:te,modelComponentNames:ve,modelPanelHoveredComponent:Oe,modelSpacingTokenHover:De,highlightedAnnotationIds:Et,focusedThreadAnnotationId:Qe?.id,externalCanvasRef:v,toolbarRef:C}),Qr(pd,{children:Ed(dd,{children:[Qr(rd,{state:u,dispatch:p,onScreenshot:Vo,onSendToClaude:f.isConnected?ro:void 0,hasActiveJobs:Object.keys(Le).length>0||f.activeJobIds.length>0,activeJobColor:Tr,onCrosshairHover:ei,onClear:Ko,provider:w,onProviderChange:f.isConnected&&E.length>1?Ke:void 0,availableProviders:E,modelIndex:X,modelCount:Ye.length,modelLabel:ie.label,onModelChange:f.isConnected?Ge:void 0,onViewThread:f.isConnected?Ao:void 0,isThreadPanelOpen:He!==null&&!Dt&&!Ee,mcpStatus:Ie,bridgeUrl:x,isBridgeConnected:f.isConnected,packageVersion:Wi,bridgeVersion:ke,bridgeRestartState:K,bridgeRestartMessage:ne,onBridgeRestart:ce,modelSelectedComponent:at,modelCanvasHoveredComponent:le,onModelComponentHover:lt,onSpacingTokenHover:ot,onModifySpacingToken:f.isConnected?zt:void 0,onDeleteSpacingToken:f.isConnected?nt:void 0,modelRefreshKey:dt,onModelComponentAdded:ht,onModelComponentRemoved:qt,onSynthesizeRules:f.isConnected&&w!=="copilot"?Xn:void 0,isSynthesizing:Ve!==null,onSynthesizeEvals:f.isConnected&&w!=="copilot"?Qt:void 0,isSynthesizingEvals:$n!==null,onRunEval:f.isConnected&&w!=="copilot"?Mo:void 0,onViewEvalRunThread:Uo,runningEvalIds:Object.keys(ae),evalRefreshKey:Ft,toolbarRef:C,snapPosition:Wn,onSnapPositionChange:Rn}),He&&Qr(wd,{threadId:He,bridgeUrl:x,accentColor:Ln,isStreaming:Tt!==null,isQueued:Tt!==null&&!f.activeJobIds.includes(Tt),queuePosition:Tt&&!f.activeJobIds.includes(Tt)?(()=>{let S=new Set(f.activeJobIds),A=Object.keys(Le).filter(se=>!S.has(se)),ee=A.indexOf(Tt);return ee>=0?`(${ee+1}/${A.length})`:void 0})():void 0,activeJobId:Tt,streamingEvents:En,onClose:()=>yt(null),onReply:Yo,onCancel:Tt?()=>re(Tt):void 0,lastError:f.lastErrorByJob?.[Tt??""]??(f.lastCompletedJobId&&$t.current.get(f.lastCompletedJobId)===He?f.lastErrorByJob?.[f.lastCompletedJobId]:void 0),toolbarRef:C,currentModel:ie.id,currentProvider:w,annotationNumber:pn,annotationText:Qe?.text,onOpenEvals:Vt,preferredSide:Ee||ye?"left":"right",modal:!Ee&&!ye},`${He}:${Ee||ye?"workflow":"default"}`),Qr(cd,{bridge:f,bridgeUrl:x,inFlightJobs:Le,isVisible:Pn||f.lastResponseText!==null||f.activeJobIds.length>0,onHover:ei,clearSignal:Po,onReply:Yo,onViewThread:Ao,onClickJob:W,onCancel:re,onHoverJob:oe,isConnected:f.isConnected,dismissedThreadIds:Ae,snapPosition:Wn,currentPathname:R})]})})]})}function Lh(){let e=Ch(Wa);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{Ah as PopmeltProvider,Lh as usePopmelt};
|
|
107
|
+
`}}),Ve("div",{ref:He,style:{...k0,transition:"opacity 150ms ease"},"data-devtools":"thread-panel-messages",children:[f&&ee("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!f&&bt.length===0&&mn.length===0&&!o&&ee("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),bt.map((re,ie)=>{let be=vu(re,bt[ie-1]),We=f?[]:q.filter(tt=>q0(re,tt)),Ne=!o&&B&&Z0(re);return Ve(y0,{children:[ee(bu,{msg:re,index:ie,bridgeUrl:t,accentColor:n,onLightbox:Z,hideSender:be,hideTimestamp:be,compactSpacing:be}),We.map(tt=>ee(ny,{proposal:tt,bridgeUrl:t,accentColor:n,busy:P,onApplySelected:Mn,onDismiss:()=>zn(tt,"dismiss"),onProjectEvals:()=>zn(tt,"project-evals")},tt.id)),Ne&&ee("div",{style:{padding:"0 16px 12px"},children:ee("button",{type:"button",onClick:B,style:Us,children:"Review proposals"})})]},`${re.jobId}-${ie}`)}),o&&ee("div",{style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:r?Ve("div",{style:{display:"flex",alignItems:"center",gap:6},children:[Ve("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:n,style:{verticalAlign:"middle",flexShrink:0,opacity:.5},children:[ee("circle",{cx:"12",cy:"6",r:"2"}),ee("circle",{cx:"6",cy:"12",r:"2"}),ee("circle",{cx:"18",cy:"12",r:"2"}),ee("circle",{cx:"12",cy:"18",r:"2"})]}),Ve("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:["queued",i?` ${i}`:""]})]}):Ve(Qo,{children:[Ve("div",{style:{display:"flex",alignItems:"center",gap:4},children:[ee(Ui,{provider:C,size:11,style:{color:"#6b7280"}}),ee("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:fl(b,C)})]}),Ct.map((re,ie)=>{if(re.kind==="tool_group")return ee(Cu,{tool:re.tool,items:re.items},ie);if(re.kind==="file_content")return ee(J0,{file:re.file,content:re.content,ext:re.ext,isPlan:re.isPlan,onAccept:re.isPlan&&c?()=>c(e,"Looks good, please proceed with implementation."):void 0},ie);if(re.kind==="thinking")return ee("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:re.text},ie);let be=Ys(re.text);return be?ee("div",{style:{paddingLeft:12,lineHeight:1.5,wordBreak:"break-word"},children:qo(be)},ie):null}),Ve("div",{style:{display:"flex",alignItems:"center",gap:6},children:[ee(_0,{color:n}),u&&ee("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"})]})]})}),mn.length>0&&Ve("div",{style:{display:"flex",flexDirection:"column",borderTop:"1px solid rgba(0,0,0,0.08)"},children:[ee("div",{style:{padding:"8px 16px 0",fontSize:10,color:"#9ca3af",fontStyle:"italic"},children:"queued"}),mn.map((re,ie)=>(()=>{let be=vu(re,mn[ie-1]);return ee(bu,{msg:re,index:bt.length+ie,bridgeUrl:t,accentColor:n,onLightbox:Z,hideSender:be,hideTimestamp:be,compactSpacing:be},`${re.jobId}-staged-${ie}`)})())]}),!Ge&&E.length>0&&ee("div",{style:{position:"sticky",bottom:5,display:"flex",justifyContent:"flex-end",paddingRight:3,pointerEvents:"none"},children:ee("button",{onClick:()=>{He.current&&He.current.scrollTo({top:He.current.scrollHeight,behavior:"smooth"})},style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:4,fontSize:10,fontFamily:An,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:Ve("span",{style:{position:"relative",backgroundColor:"#eaeaea",padding:"0 6px",color:"#374151",fontFamily:An,lineHeight:1.4},children:[_," message",_!==1?"s":""," \u2193"]})})})]}),!o&&d&&Ve("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[ee("span",{style:{fontWeight:600},children:"Error: "}),d]}),c&&Ve("div",{style:{flexShrink:0,position:"relative"},children:[ye.length>0&&ee("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:ye.map((re,ie)=>Ve("span",{onClick:()=>ce(be=>be.filter((We,Ne)=>Ne!==ie)),onMouseEnter:be=>{let We=be.currentTarget.querySelector("[data-chip-x]");We&&(We.style.color="#fff")},onMouseLeave:be=>{let We=be.currentTarget.querySelector("[data-chip-x]");We&&(We.style.color="rgba(255,255,255,0.4)")},style:{display:"inline-flex",alignItems:"center",gap:4,fontSize:10,color:"#fff",backgroundColor:n,backdropFilter:"blur(4px)",padding:"2px 6px 2px 6px",cursor:"pointer"},children:["image ",ie+1,ee("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"rgba(255,255,255,0.4)"},children:"\xD7"})]},ie))}),Ve("div",{ref:ge,style:{...M0,borderTop:"1px solid rgba(0,0,0,0.12)"},children:[ee("input",{"data-popmelt-reply":!0,autoFocus:!0,value:O,onChange:re=>{pe(re.target.value),ae(fe.current,re.target.value)},onFocus:()=>{fe.current=!0,ae(!0,O)},onBlur:()=>{fe.current=!1,ae(!1,O)},onKeyDown:Xt,onPaste:Kn,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:An,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),ee("button",{onClick:Lt,disabled:!O.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:O.trim()?"pointer":"default",color:O.trim()?n:"rgba(0,0,0,0.2)",flexShrink:0},children:Ve("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[ee("path",{d:"M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z"}),ee("path",{d:"M6 12h16"})]})})]})]})]})]}),Te&&ee(z0,{src:Te,onClose:()=>_e(null)})]})}import{jsx as ki,jsxs as Mu}from"react/jsx-runtime";var iy=[],Il=oy(null),El="devtools-provider",Zs="devtools-model",kl="devtools-open-thread-id",Tl="popmelt-synthesize-thread",Ml="popmelt-eval-synthesize-thread",Ei="#000000";function sy(e){let t=e.getBoundingClientRect();return t.bottom<0||t.top>window.innerHeight||t.right<0||t.left>window.innerWidth}function ay(e){for(let t of e){let n=Hn(t);if(n){sy(n)&&n.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"});return}}}async function Tu(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 ly={0:0,1:1},cy={0:0,1:1,2:1};function dy(e,t,n){if(t==="copilot")return 0;let o=t==="codex"?js:Ws;return e==="copilot"?0:e==="claude"&&t==="codex"?ly[n]??Math.min(n,o.length-1):e==="codex"&&t==="claude"?cy[n]??Math.min(n,o.length-1):Math.min(n,o.length-1)}function uy({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,[a,s]=Pt(i),[l,c]=Pt(!!i),u=a,[d,p]=Ql(),g=ql(n,t&&!!u,u);Yt(()=>{i&&(typeof window<"u"&&(window.__POPMELT_PROJECT_ID__=i),s(i),c(!0))},[i]);let b=xn(null),C=xn(null),v=Kl()??n,x=xn(new Map),B=xn(new Map),T=xn(!1),A=ri(),[E,V]=Pt(()=>typeof window>"u"?"claude":localStorage.getItem(El)||"claude"),[q,se]=Pt(()=>{if(typeof window>"u")return 0;let w=localStorage.getItem(Zs);return w&&parseInt(w,10)||0}),[P,D]=Pt([]),[f,m]=Pt({}),[O,pe]=Pt(0),[ye,ce]=Pt({}),[fe,ge]=Pt(null),[Ge,W]=Pt("idle"),[_,J]=Pt(null);Yt(()=>{g.isConnected&&Al(v).then(w=>{if(!w)return;let H=Object.entries(w.providers).filter(([,Pe])=>Pe.available).map(([Pe])=>Pe);H.length>0&&D(H);let le={};for(let[Pe,Oe]of Object.entries(w.providers))Oe.models&&Oe.models.length>0&&(le[Pe]=Oe.models);m(le);let he={};for(let[Pe,Oe]of Object.entries(w.providers))Oe.mcp&&(he[Pe]=Oe.mcp);ce(he)})},[g.isConnected,g.capabilitiesVersion,O,v]),Yt(()=>{if(!g.isConnected){ge(null);return}let w=!1;return zo(v).then(H=>{w||ge(H?.version??null)}),()=>{w=!0}},[g.isConnected,g.capabilitiesVersion,O,v]),Yt(()=>{if(Ge==="idle"||Ge==="restarting")return;let w=window.setTimeout(()=>{W("idle"),J(null)},Ge==="ok"?4e3:8e3);return()=>window.clearTimeout(w)},[Ge]),Yt(()=>{if(P.length>0&&!P.includes(E)){let w=P[0];V(w),localStorage.setItem(El,w)}},[P,E]);let Te=E==="codex"?[...js]:E==="copilot"?[...pl]:[...Ws],_e=f[E]&&f[E].length>0?f[E]:Te,Z=_e[q]??_e[0];Yt(()=>{if(!t||u||l)return;let w=!1;return fetch("/popmelt/status").then(H=>H.ok?H.json():null).then(H=>{if(w)return;let le=typeof window<"u"&&H?.devOrigin===window.location.origin,he=H?.projectId&&(le||H.projectIdVerified===!0)?H.projectId:null;he&&typeof window<"u"&&(window.__POPMELT_PROJECT_ID__=he),s(he),c(!0)}).catch(()=>{w||c(!0)}),()=>{w=!0}},[t,u,l]),Yt(()=>{q>=_e.length&&(se(0),localStorage.setItem(Zs,"0"))},[q,_e.length]);let He=rn(w=>{let H=E;V(w),localStorage.setItem(El,w);let le=dy(H,w,q);se(le),localStorage.setItem(Zs,String(le))},[E,q]),rt=rn(w=>{se(w),localStorage.setItem(Zs,String(w))},[]),[ve,ae]=Pt(new Set),[Ae,st]=Pt(null),[Le,Ee]=Pt(null),[Ye,xt]=Pt(null),[zt,Rt]=Pt(null);Yt(()=>{g.isConnected&&ti(v).then(w=>{w?.components&&ae(new Set(Object.keys(w.components)))})},[g.isConnected,v]);let Dn=rn(async w=>{let H=[];for(let le of w)try{(await Bl(le,v)).added&&H.push(le)}catch(he){console.error("[Popmelt] Failed to add component to model:",le,he)}H.length>0&&(ae(le=>{let he=new Set(le);for(let Pe of H)he.add(Pe);return he}),st(H[H.length-1]))},[v]),Ut=rn(w=>{st(w)},[]),yt=rn(()=>{ti(v).then(w=>{w?.components&&ae(new Set(Object.keys(w.components)))})},[v]),zn=rn(async w=>{try{(await Dl(w,v)).removed&&ae(le=>{let he=new Set(le);return he.delete(w),he})}catch(H){console.error("[Popmelt] Failed to remove component from model:",H)}},[v]),Mn=rn((w,H)=>{p({type:"MODIFY_SPACING_TOKEN",payload:w}),p({type:"ADD_SPACING_TOKEN_CHANGE",payload:H})},[p]),Ct=rn((w,H)=>{p({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:w,originalValue:H}})},[p]),[Nt,mn]=Pt(null),[bt,Lt]=Pt(()=>typeof window>"u"?null:localStorage.getItem(Tl)||null),[Kn,Xt]=Pt(null),[Vn,$t]=Pt(()=>typeof window>"u"?null:localStorage.getItem(Ml)||null),[cn,re]=Pt(0),[ie,be]=Pt({}),[We,Ne]=Pt(new Set);Yt(()=>{bt?localStorage.setItem(Tl,bt):localStorage.removeItem(Tl)},[bt]),Yt(()=>{Vn?localStorage.setItem(Ml,Vn):localStorage.removeItem(Ml)},[Vn]);let[tt,Ze]=Pt(0),At=xn([]);Yt(()=>{let w=At.current,H=d.spacingTokenMods;At.current=H;let le=new Map(w.map(Oe=>[Oe.tokenPath,Oe])),he=new Map(H.map(Oe=>[Oe.tokenPath,Oe])),Pe=!1;for(let[Oe,Qe]of he){let Re=le.get(Oe);if(!(Re&&Re.currentValue===Qe.currentValue)){Pe=!0,Qe.currentValue==="__deleted__"?_l(Oe,v).catch(qe=>console.error("[Popmelt] Failed to sync token delete:",qe)):oa(Oe,Qe.currentValue,v).catch(qe=>console.error("[Popmelt] Failed to sync token update:",qe));for(let qe of Qe.targets){let wn=document.querySelector(qe.selector);if(wn)if(Qe.currentValue==="__deleted__")wn.style.removeProperty(qe.property);else{let kt=Qe.currentPx;kt>0&&wn.style.setProperty(qe.property,`${kt}px`,"important")}}}}for(let[Oe,Qe]of le)if(!he.has(Oe)){Pe=!0,oa(Oe,Qe.originalValue,v).catch(Re=>console.error("[Popmelt] Failed to restore token on undo:",Re));for(let Re of Qe.targets){let qe=document.querySelector(Re.selector);qe&&qe.style.removeProperty(Re.property)}}Pe&&Ze(Oe=>Oe+1)},[d.spacingTokenMods,v]);let[io,Gn]=Pt(()=>tc()),hn=rn(w=>{Gn(w),nc(w)},[]),[Xe,gt]=Pt(()=>typeof window>"u"?null:localStorage.getItem(kl)||null),Nn=xn(null),[dn,Bt]=Pt(new Set),[Jn,Wt]=Pt(null);Yt(()=>{Xe?localStorage.setItem(kl,Xe):localStorage.removeItem(kl)},[Xe]);let k="popmelt-in-flight-jobs",[M,K]=Pt(()=>{try{let w=localStorage.getItem(k);return w?JSON.parse(w):{}}catch{return{}}});Yt(()=>{try{Object.keys(M).length>0?localStorage.setItem(k,JSON.stringify(M)):localStorage.removeItem(k)}catch{}},[M]),Yt(()=>{let w=H=>{if(H.key===k)try{let le=H.newValue?JSON.parse(H.newValue):{};K(le)}catch{}};return window.addEventListener("storage",w),()=>window.removeEventListener("storage",w)},[]);let te=xn(new Map),de=xn(new Map),we=xn(new Map);Yt(()=>{for(let[w,H]of Object.entries(M)){H.annotationIds.length>0&&te.current.set(w,H.annotationIds);let le=new Set(H.styleSelectors);for(let he of H.annotationIds){let Pe=d.annotations.find(Oe=>Oe.id===he);if(Pe&&(Pe.linkedSelector&&le.add(Pe.linkedSelector),Pe.groupId))for(let Oe of d.annotations)Oe.groupId===Pe.groupId&&Oe.linkedSelector&&le.add(Oe.linkedSelector)}le.size>0&&de.current.set(w,Array.from(le)),H.threadId&&we.current.set(w,H.threadId)}},[M,d.annotations]);let Je=xn("");Yt(()=>{if(d.annotations.length===0)return;let w=Object.keys(M).sort().join(",");if(w===Je.current)return;Je.current=w;let H=new Set;for(let he of Object.values(M))for(let Pe of he.annotationIds)H.add(Pe);let le=d.annotations.filter(he=>H.has(he.id)?!1:!!(he.status==="in_flight"||(he.status==="pending"||!he.status)&&(he.captured||he.threadId))).map(he=>he.id);le.length>0&&p({type:"SET_ANNOTATION_STATUS",payload:{ids:le,status:"dismissed"}})},[d.annotations,M,p]);let ze=Oo(()=>{let w=new Set;for(let H of Object.values(M))for(let le of H.annotationIds)w.add(le);return w},[M]),it=Oo(()=>{let w=new Set(g.activeJobIds),H=new Set;for(let[le,he]of Object.entries(M))if(w.has(le))for(let Pe of he.annotationIds)H.add(Pe);return H},[M,g.activeJobIds]),$e=Oo(()=>{let w=new Set(g.activeJobIds),H=Object.entries(M).filter(([Pe])=>!w.has(Pe)),le=H.length,he=new Map;return H.forEach(([,Pe],Oe)=>{let Qe=`(${Oe+1}/${le})`;for(let Re of Pe.annotationIds)he.set(Re,Qe)}),he},[M,g.activeJobIds]),vt=Oo(()=>{let w=new Set;for(let H of Object.values(M))if(!(!H.global&&H.routePathnames?.length&&!H.routePathnames.includes(A)))for(let le of H.styleSelectors)w.add(le);return w},[M,A]),Kt=Oo(()=>{let w=new Map;for(let H of Object.values(M))if(!(!H.global&&H.routePathnames?.length&&!H.routePathnames.includes(A))){for(let le of H.styleSelectors)w.set(le,H.color);for(let le of H.annotationIds){let he=d.annotations.find(Pe=>Pe.id===le);if(he&&(he.linkedSelector&&w.set(he.linkedSelector,H.color),he.groupId))for(let Pe of d.annotations)Pe.groupId===he.groupId&&Pe.linkedSelector&&w.set(Pe.linkedSelector,H.color)}}return w},[M,d.annotations,A]),$n=xn(d.annotations);$n.current=d.annotations;let Xn=xn(d.styleModifications);Xn.current=d.styleModifications;let jt=xn(M);jt.current=M,Yt(()=>{let w=null,H=()=>{if(Object.keys(jt.current).length>0)return;let he=$n.current,Pe=Xn.current,Oe=[],Qe=[];for(let Re of he){if(!Re.linkedSelector||!Re.linkedSelector.startsWith("[data-pm=")||Re.pathname||Re.captured||Re.status&&Re.status!=="pending")continue;let qe=document.querySelector(Re.linkedSelector);!qe&&Re.elements?.[0]?.selector&&(qe=document.querySelector(Re.elements[0].selector)),qe||Oe.push(Re.linkedSelector)}for(let Re of Pe)Re.pathname&&Re.pathname!==window.location.pathname||document.querySelector(Re.selector)||Qe.push(Re.selector);(Oe.length>0||Qe.length>0)&&p({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:Oe,styleSelectors:Qe}})},le=new MutationObserver(he=>{he.some(Pe=>Pe.removedNodes.length>0)&&(w&&clearTimeout(w),w=setTimeout(H,3e3))});return le.observe(document.body,{childList:!0,subtree:!0}),()=>{le.disconnect(),w&&clearTimeout(w)}},[p]);let Ho=xn(typeof window<"u"?window.location.pathname:"/");Yt(()=>{let w=he=>{if(T.current)return;let Pe=window.location.pathname;if(he===Pe)return;let Oe=$n.current.filter(Re=>Re.pathname===he&&(Re.status??"pending")==="pending");if(console.log(`[Popmelt] Navigation from ${he} \u2192 ${Pe}, ${Oe.length} pending annotations on departing page`),Oe.length===0)return;let Qe=b.current;if(!Qe){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if(di(document.body,Qe,Oe,{dpr:1}).then(Re=>Ai(Re)).then(Re=>{Re?(B.current.set(he,Re),console.log(`[Popmelt] Cached screenshot for ${he} (${(Re.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${he}`)}).catch(Re=>{console.warn("[Popmelt] Capture-on-leave failed:",Re)}),B.current.size>20){let Re=[...B.current.entries()];B.current=new Map(Re.slice(-10))}},H=he=>{let Pe=he.detail?.prevPath;Pe&&(w(Pe),Ho.current=window.location.pathname)},le=()=>{let he=Ho.current;w(he),Ho.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",H),window.addEventListener("popstate",le),()=>{window.removeEventListener("popmelt:locationchange",H),window.removeEventListener("popstate",le)}},[]),Yt(()=>{if(g.lastCompletedJobId&&g.lastCompletedJobId in M&&K(w=>{let{[g.lastCompletedJobId]:H,...le}=w;return le}),g.lastCompletedJobId&&g.lastCompletedJobId===Nt&&(Ze(w=>w+1),mn(null)),g.lastCompletedJobId&&g.lastCompletedJobId===Kn&&(re(w=>w+1),Xt(null)),g.lastCompletedJobId){let w=Object.entries(ie).find(([,H])=>H===g.lastCompletedJobId)?.[0];w&&(be(H=>{let{[w]:le,...he}=H;return he}),re(H=>H+1))}},[g.lastCompletedJobId,Nt,Kn,ie]);let z=xn(new Set),ue=xn(!1);Yt(()=>{if(!g.isConnected){ue.current=!1;return}ue.current||(ue.current=!0,zo(v).then(async w=>{if(!w)return;let H=w.activeJobs??[],le=w.recentJobs??[],he=new Set(H.map(Qe=>Qe.id)),Pe=JSON.parse(localStorage.getItem(k)||"{}"),Oe=new Set;for(let Qe of Object.values(Pe))if(Qe.annotationIds)for(let Re of Qe.annotationIds)Oe.add(Re);K(Qe=>{let Re={...Qe},qe=Date.now();for(let kt of Object.keys(Re)){if(kt.startsWith("_pending_")){let _t=parseInt(kt.replace(/^_pending_(?:reply_)?/,""),10);!isNaN(_t)&&qe-_t>3e4&&delete Re[kt];continue}he.has(kt)||delete Re[kt]}for(let kt of H)if(!Re[kt.id]&&(kt.annotationIds?.length||kt.threadId)){let _t=kt.kind,bo=Array.from(new Set((kt.annotationIds??[]).map(Er=>d.annotations.find(or=>or.id===Er)?.pathname||A).filter(Boolean)));Re[kt.id]={annotationIds:kt.annotationIds??[],styleSelectors:[],color:_t==="synthesize_evals"||_t==="run_eval"||_t==="materialize_model"&&kt.standalone===!0?Ei:kt.color??"#888",threadId:kt.threadId,kind:_t,routePathnames:bo.length>0?bo:void 0,global:_t==="synthesize"||_t==="synthesize_evals"||_t==="run_eval"||_t==="materialize_model"&&kt.standalone===!0}}let wn=new Set;for(let kt of le)if(kt.annotationIds)for(let _t of kt.annotationIds)wn.add(_t);for(let kt of Object.keys(Re)){if(!kt.startsWith("_pending_"))continue;let _t=Re[kt];_t&&_t.annotationIds.some(bo=>wn.has(bo))&&delete Re[kt]}return Re});for(let Qe of le)if(Qe.status==="done"&&Qe.annotationIds?.length&&Qe.annotationIds.some(Re=>Oe.has(Re))&&!z.current.has(Qe.id))try{let Re=await os(v,Qe.id);if(!Re)continue;let qe=Re.events.find(wn=>wn.type==="done");qe&&Array.isArray(qe.resolutions)&&(z.current.add(Qe.id),p({type:"APPLY_RESOLUTIONS",payload:{resolutions:qe.resolutions,threadId:qe.threadId??void 0}}))}catch{}}))},[g.isConnected,v,p,d.annotations,A]),Yt(()=>{let w=g.events.filter(H=>H.type==="done"&&H.data.resolutions);for(let H of w){let le=H.data.jobId;z.current.has(le)||(z.current.add(le),Array.isArray(H.data.resolutions)&&p({type:"APPLY_RESOLUTIONS",payload:{resolutions:H.data.resolutions,threadId:H.data.threadId}}))}},[g.events,p]);let Ue=xn(new Set);Yt(()=>{let w=g.events.filter(H=>H.type==="error"&&H.data.cancelled);for(let H of w){let le=H.data.jobId;if(!le||Ue.current.has(le))continue;Ue.current.add(le);let he=M[le];he&&he.annotationIds.length>0&&p({type:"SET_ANNOTATION_STATUS",payload:{ids:he.annotationIds,status:"dismissed"}})}},[g.events,M,p]);let qt=xn(0);Yt(()=>{let w=g.incrementalResolutions;if(w.length<=qt.current)return;let H=w.slice(qt.current);qt.current=w.length,p({type:"APPLY_RESOLUTIONS",payload:{resolutions:H}})},[g.incrementalResolutions,p]),Yt(()=>{g.incrementalResolutions.length===0&&(qt.current=0)},[g.incrementalResolutions.length]);let to=rn(async()=>{let w=b.current;if(!w)return!1;let H=await di(document.body,w,d.annotations);if(H.length===0)return!1;let le=await Cc(H,d.annotations,d.styleModifications);return le&&p({type:"MARK_CAPTURED"}),le},[d.annotations,d.styleModifications,p]),qn=rn((w,H)=>{let le=x.current.get(w)||[];x.current.set(w,[...le,...H])},[]),In=rn(async()=>{let w=b.current;if(!w)return!1;let H=d.annotations.filter(ct=>(ct.status??"pending")==="pending"),le=d.styleModifications.filter(ct=>!ct.captured&&(!ct.pathname||ct.pathname===A)),he=d.spacingTokenChanges.filter(ct=>!ct.captured);if(H.length===0&&le.length===0&&he.length===0)return!1;let Pe=new Map;for(let ct of H){let bn=ct.pathname||A;Pe.has(bn)||Pe.set(bn,[]),Pe.get(bn).push(ct)}let Oe=new Map,Qe=[...Pe.keys()].filter(ct=>ct!==A);if(Qe.length>0){let ct=A,bn={x:window.scrollX,y:window.scrollY};T.current=!0;for(let _n of Qe)try{console.log(`[Popmelt] Navigating to ${_n} for screenshot capture`),await Tu(_n,r),window.location.pathname!==_n&&console.warn(`[Popmelt] Navigation to ${_n} did not take effect (at ${window.location.pathname})`);let lo=Pe.get(_n)||[],ns=await di(document.body,w,lo,{dpr:1}),h=await Ai(ns);h&&(Oe.set(_n,h),console.log(`[Popmelt] Captured ${_n} (${(h.size/1024).toFixed(0)}KB)`))}catch(lo){console.warn(`[Popmelt] Failed to capture ${_n}:`,lo)}await Tu(ct,r),window.scrollTo(bn.x,bn.y),T.current=!1}let Re=H.filter(ct=>(ct.pathname||A)===A),qe=await di(document.body,w,Re.length>0?d.annotations:[],{dpr:1});if(qe.length>0){let ct=await Ai(qe);ct&&Oe.set(A,ct)}if(Oe.size===0)return!1;let wn=ba(H,le,void 0,he.length>0?he:void 0),kt=JSON.stringify(wn),_t=new Map;for(let ct of H){let bn=x.current.get(ct.id);if(bn&&bn.length>0&&_t.set(ct.id,bn),ct.groupId){for(let _n of H)if(_n.groupId===ct.groupId&&_n.id!==ct.id){let lo=x.current.get(_n.id);lo&&lo.length>0&&_t.set(_n.id,lo)}}}let bo=Pe.size>1;console.log(`[Popmelt] Submit: ${Pe.size} page(s), ${Oe.size} screenshot(s), pages: [${[...Pe.keys()].join(", ")}], cached: [${[...B.current.keys()].join(", ")}]`);let Er=bo?Oe:Oe.get(A)??Oe,or=H.map(ct=>ct.id),Qs=le.map(ct=>ct.selector),ea=Array.from(new Set([...H.map(ct=>ct.pathname||A),...le.map(ct=>ct.pathname||A)])),ts=ya(d.activeColor),rr=`_pending_${Date.now()}`,Ti={annotationIds:or,styleSelectors:Qs,color:d.activeColor,threadId:void 0,routePathnames:ea};try{let ct=JSON.parse(localStorage.getItem(k)||"{}");ct[rr]=Ti,localStorage.setItem(k,JSON.stringify(ct))}catch{}K(ct=>({...ct,[rr]:Ti}));try{let{jobId:ct,threadId:bn}=await Pl(Er,kt,v,ts,E,Z.id,_t.size>0?_t:void 0,ls());for(let S of _t.keys())x.current.delete(S);for(let S of Pe.keys())B.current.delete(S);let _n={...Ti,threadId:bn};try{let S=JSON.parse(localStorage.getItem(k)||"{}");delete S[rr],S[ct]=_n,localStorage.setItem(k,JSON.stringify(S))}catch{}K(S=>{let{[rr]:$,...y}=S;return{...y,[ct]:_n}}),p({type:"MARK_CAPTURED"}),bn&&or.length>0&&p({type:"SET_ANNOTATION_THREAD",payload:{ids:or,threadId:bn}});let lo=d.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),h=((lo?.[1]?parseFloat(lo[1]):29)+60)%360;return p({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${h})`}),!0}catch(ct){try{let bn=JSON.parse(localStorage.getItem(k)||"{}");delete bn[rr],localStorage.setItem(k,JSON.stringify(bn))}catch{}return K(bn=>{let{[rr]:_n,...lo}=bn;return lo}),console.error("[Pare] Failed to send to bridge:",ct),!1}},[d.annotations,d.styleModifications,d.spacingTokenChanges,d.activeColor,p,v,E,Z.id,A,r]),ur=rn(async()=>{if(bt){gt(bt);return}try{let{jobId:w,threadId:H}=await Nl(v,E,Z.id);mn(w),Lt(H);let le={annotationIds:[],styleSelectors:[],color:"#6b7280",threadId:H,kind:"synthesize",global:!0};K(he=>({...he,[w]:le})),gt(H)}catch(w){console.error("[Popmelt] Failed to start synthesize:",w)}},[v,E,Z.id,bt]),mo=rn(async()=>{Xt(null),$t(null),gt(null);try{let{jobId:w,threadId:H}=await $l(v,E,Z.id);Xt(w),$t(H);let le={annotationIds:[],styleSelectors:[],color:Ei,threadId:H,kind:"synthesize_evals",global:!0};K(he=>({...he,[w]:le})),gt(H)}catch(w){console.error("[Popmelt] Failed to start eval synthesis:",w)}},[v,E,Z.id]),ho=rn(async w=>{let H=b.current;if(H){be(le=>({...le,[w.id]:"_pending_"}));try{let he=(await di(document.body,H,[],{dpr:1}))[0];if(!he){be(Qe=>{let{[w.id]:Re,...qe}=Qe;return qe});return}let{jobId:Pe,threadId:Oe}=await Fl(w.id,he,{url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollX:window.scrollX,scrollY:window.scrollY},v,E,Z.id,ls());if(be(Qe=>({...Qe,[w.id]:Pe})),Oe){Ne(Re=>new Set(Re).add(Oe));let Qe={annotationIds:[],styleSelectors:[],color:Ei,threadId:Oe,kind:"run_eval",global:!0};K(Re=>({...Re,[Pe]:Qe})),gt(Oe)}}catch(le){be(he=>{let{[w.id]:Pe,...Oe}=he;return Oe}),console.error("[Popmelt] Failed to run eval:",le)}}},[v,E,Z.id]),yo=rn(async(w,H,le)=>{let he=Object.values(jt.current).find(qe=>qe.threadId===w)?.color??d.annotations.find(qe=>qe.threadId===w)?.color??d.activeColor,Pe=d.annotations.filter(qe=>qe.threadId===w&&(qe.status==="waiting_input"||qe.status==="resolved"||qe.status==="needs_review")),Oe=Pe.map(qe=>qe.id),Qe=`_pending_reply_${Date.now()}`,Re={annotationIds:Oe,styleSelectors:[],color:he,threadId:w};try{let qe=JSON.parse(localStorage.getItem(k)||"{}");qe[Qe]=Re,localStorage.setItem(k,JSON.stringify(qe))}catch{}K(qe=>({...qe,[Qe]:Re}));try{let qe=ya(d.activeColor),{jobId:wn}=await Wl(w,H,v,qe,E,Z.id,le,ls()),kt={...Re};try{let _t=JSON.parse(localStorage.getItem(k)||"{}");delete _t[Qe],_t[wn]=kt,localStorage.setItem(k,JSON.stringify(_t))}catch{}return K(_t=>{let{[Qe]:bo,...Er}=_t;return{...Er,[wn]:kt}}),Pe.length>0&&p({type:"SET_ANNOTATION_STATUS",payload:{ids:Oe,status:"in_flight"}}),g.dismissQuestion(w),{jobId:wn}}catch(qe){try{let wn=JSON.parse(localStorage.getItem(k)||"{}");delete wn[Qe],localStorage.setItem(k,JSON.stringify(wn))}catch{}K(wn=>{let{[Qe]:kt,..._t}=wn;return _t}),console.error("[Pare] Failed to send reply:",qe)}},[d.activeColor,d.annotations,v,g.dismissQuestion,p,E,Z.id]),Rn=xn(new Set);Yt(()=>{for(let w of g.pendingQuestions){if(Rn.current.has(w.jobId))continue;Rn.current.add(w.jobId);let H=w.annotationIds&&w.annotationIds.length>0?w.annotationIds:void 0;!H&&w.threadId&&(H=d.annotations.filter(le=>le.threadId===w.threadId).map(le=>le.id)),H&&H.length>0&&p({type:"SET_ANNOTATION_QUESTION",payload:{ids:H,question:w.question,threadId:w.threadId}})}},[g.pendingQuestions,p,d.annotations]);let qr=Oo(()=>{if(g.activeJobId&&g.activeJobId in M)return M[g.activeJobId].color;let w=Object.values(M);return w.length>0?w[w.length-1].color:void 0},[g.activeJobId,M]),er=rn(w=>{gt(w)},[]),tr=rn(w=>{Ne(H=>new Set(H).add(w)),Nn.current=Ei,gt(w)},[]),F=rn(w=>{gt(null),w&&(Bt(H=>new Set(H).add(w)),jl(w,v).catch(H=>{console.warn("[Popmelt] Failed to delete thread:",H)}))},[v]),U=rn((w,H)=>{let le=M[w],he=de.current.get(w);if(le){let Oe=new Set(le.styleSelectors);for(let Qe of le.annotationIds){let Re=d.annotations.find(qe=>qe.id===Qe);if(Re&&(Re.linkedSelector&&Oe.add(Re.linkedSelector),Re.groupId))for(let qe of d.annotations)qe.groupId===Re.groupId&&qe.linkedSelector&&Oe.add(qe.linkedSelector)}Oe.size>0&&(he=Array.from(Oe))}he?.length&&ay(he);let Pe=le?.threadId||H||we.current.get(w);if(Pe){let Oe=le?.kind==="materialize_model"&&(le.annotationIds?.length??0)===0;Nn.current=le?.kind==="synthesize_evals"||le?.kind==="run_eval"||Oe?Ei:le?.color??null,gt(Pe)}},[M,d.annotations]),me=rn(w=>{if(!w){Wt(null);return}let H=te.current.get(w);H&&H.length>0?Wt(new Set(H)):Wt(null)},[]),xe=rn(async w=>{try{let H=w?`${v}/cancel?jobId=${w}`:`${v}/cancel`;await Eo(H,{method:"POST"})}catch{}},[v]),Ie=rn(async()=>{W("restarting"),J("Restarting bridge");let w=await ra(v,xs,2e4);if(w.ok){await Xl(w.bridgeUrl??n,u),ge(w.status.version??xs),W("ok"),J(w.status.version?`Bridge restarted on ${w.status.version}`:"Bridge restarted"),pe(H=>H+1);return}ge(w.status?.version??fe),W("error"),J(w.error)},[fe,n,u,v]),Fe=Oo(()=>{if(!Xe)return null;for(let w of Object.values(M))if(w.threadId===Xe&&w.kind){if(w.kind==="materialize_model"&&w.annotationIds.length>0)continue;return w.kind}return Xe===bt?"synthesize":Xe===Vn?"synthesize_evals":We.has(Xe)?"run_eval":null},[Xe,M,bt,Vn,We]),Me=Fe==="synthesize_evals"||Fe==="run_eval",Ce=Fe==="materialize_model",Dt=Fe==="synthesize";Yt(()=>{(d.activeTool==="model"&&Xe&&!Dt||d.activeTool==="eval"&&Xe&&!Me)&>(null)},[d.activeTool,Xe,Dt,Me]);let ln=rn(()=>{p({type:"SET_TOOL",payload:"eval"}),re(w=>w+1),gt(null)},[p]),Sn=xn(null);Yt(()=>{d.isAnnotating?Sn.current&&(gt(Sn.current),Sn.current=null):Xe&&(Sn.current=Xe,gt(null))},[d.isAnnotating]);let Vt=Oo(()=>{if(!Xe)return null;for(let[w,H]of Object.entries(M))if(H.threadId===Xe)return w;for(let[w,H]of Object.entries(g.activeJobThreads))if(H===Xe)return w;return null},[Xe,M,g.activeJobThreads]),lt=Xe?d.annotations.find(w=>w.threadId===Xe):void 0,yn=Oo(()=>Vt?g.events.filter(w=>w.data.jobId===Vt):iy,[Vt,g.events.length]),no=Oo(()=>Me||Ce?Ei:lt?.color??Nn.current??d.activeColor,[Me,Ce,lt?.color,d.activeColor]),Yn=lt?d.annotations.indexOf(lt)+1:void 0;Yt(()=>{if(Me)return;let w=lt?.color??Nn.current;Xe&&w&&p({type:"SET_COLOR",payload:w})},[Xe,Me]);let[so,Cr]=Pt(!1),[Zr,Qr]=Pt(0),ao=xn(null),Fo=rn(w=>{w?(ao.current&&(clearTimeout(ao.current),ao.current=null),Cr(!0)):ao.current=setTimeout(()=>{Cr(!1),ao.current=null},150)},[]),ei=rn(()=>{Qr(w=>w+1),g.clearEvents(),gt(null),Bt(new Set),xe()},[g.clearEvents,xe]);Yt(()=>()=>{ao.current&&clearTimeout(ao.current)},[]);let[Qi,es]=Pt(!1);Yt(()=>{es(!0)},[]);let nr=Oo(()=>({isEnabled:t}),[t]);return!t||!Qi?ki(Il.Provider,{value:nr,children:e}):Mu(Il.Provider,{value:nr,children:[e,ki(Ld,{state:d,dispatch:p,onScreenshot:to,inFlightAnnotationIds:ze,activeAnnotationIds:it,queuePositionMap:$e,inFlightStyleSelectors:vt,inFlightSelectorColors:Kt,onAttachImages:qn,onReply:g.isConnected?yo:void 0,onViewThread:g.isConnected?er:void 0,onCloseThread:F,onModelComponentsAdd:g.isConnected?Dn:void 0,onModelComponentFocus:g.isConnected?Ut:void 0,onModelComponentHover:Ee,modelComponentNames:ve,modelPanelHoveredComponent:Ye,modelSpacingTokenHover:zt,highlightedAnnotationIds:Jn,focusedThreadAnnotationId:lt?.id,externalCanvasRef:b,toolbarRef:C}),ki(mu,{children:Mu(fu,{children:[ki(au,{state:d,dispatch:p,onScreenshot:to,onSendToClaude:g.isConnected?In:void 0,hasActiveJobs:Object.keys(M).length>0||g.activeJobIds.length>0,activeJobColor:qr,onCrosshairHover:Fo,onClear:ei,provider:E,onProviderChange:g.isConnected&&P.length>1?He:void 0,availableProviders:P,modelIndex:q,modelCount:_e.length,modelLabel:Z.label,onModelChange:g.isConnected?rt:void 0,onViewThread:g.isConnected?er:void 0,isThreadPanelOpen:Xe!==null&&!Dt&&!Me,mcpStatus:ye,bridgeUrl:v,isBridgeConnected:g.isConnected,packageVersion:xs,bridgeVersion:fe,bridgeRestartState:Ge,bridgeRestartMessage:_,onBridgeRestart:Ie,modelSelectedComponent:Ae,modelCanvasHoveredComponent:Le,onModelComponentHover:xt,onSpacingTokenHover:Rt,onModifySpacingToken:g.isConnected?Mn:void 0,onDeleteSpacingToken:g.isConnected?Ct:void 0,modelRefreshKey:tt,onModelComponentAdded:yt,onModelComponentRemoved:zn,onSynthesizeRules:g.isConnected&&E!=="copilot"?ur:void 0,isSynthesizing:Nt!==null,onSynthesizeEvals:g.isConnected&&E!=="copilot"?mo:void 0,isSynthesizingEvals:Kn!==null,onRunEval:g.isConnected&&E!=="copilot"?ho:void 0,onViewEvalRunThread:tr,runningEvalIds:Object.keys(ie),evalRefreshKey:cn,toolbarRef:C,snapPosition:io,onSnapPositionChange:hn}),Xe&&ki(ku,{threadId:Xe,bridgeUrl:v,accentColor:no,isStreaming:Vt!==null,isQueued:Vt!==null&&!g.activeJobIds.includes(Vt),queuePosition:Vt&&!g.activeJobIds.includes(Vt)?(()=>{let w=new Set(g.activeJobIds),H=Object.keys(M).filter(he=>!w.has(he)),le=H.indexOf(Vt);return le>=0?`(${le+1}/${H.length})`:void 0})():void 0,activeJobId:Vt,streamingEvents:yn,onClose:()=>gt(null),onReply:yo,onCancel:Vt?()=>xe(Vt):void 0,lastError:g.lastErrorByJob?.[Vt??""]??(g.lastCompletedJobId&&we.current.get(g.lastCompletedJobId)===Xe?g.lastErrorByJob?.[g.lastCompletedJobId]:void 0),toolbarRef:C,currentModel:Z.id,currentProvider:E,annotationNumber:Yn,annotationText:lt?.text,onOpenEvals:ln,preferredSide:Me||Ce?"left":"right",modal:!Me&&!Ce},`${Xe}:${Me||Ce?"workflow":"default"}`),ki(pu,{bridge:g,bridgeUrl:v,inFlightJobs:M,isVisible:so||g.lastResponseText!==null||g.activeJobIds.length>0,onHover:Fo,clearSignal:Zr,onReply:yo,onViewThread:er,onClickJob:U,onCancel:xe,onHoverJob:me,isConnected:g.isConnected,dismissedThreadIds:dn,snapPosition:io,currentPathname:A})]})})]})}function py(){let e=ry(Il);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{uy as PopmeltProvider,py as usePopmelt};
|