@popmelt.com/core 0.6.8 → 0.7.0
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 +39 -36
- package/dist/cli.mjs +39 -36
- package/dist/index.mjs +22 -22
- package/dist/plugin-astro.mjs +1 -1
- package/dist/plugin-next.mjs +1 -1
- package/dist/plugin-vite.mjs +1 -1
- package/dist/server-TB2KIKX7.mjs +228 -0
- package/dist/server.d.mts +1 -0
- package/dist/server.mjs +37 -34
- package/package.json +3 -3
- package/dist/server-YNYT7TDP.mjs +0 -225
package/dist/index.mjs
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var Wc=Object.defineProperty,Gc=Object.defineProperties;var jc=Object.getOwnPropertyDescriptors;var Gr=Object.getOwnPropertySymbols;var sa=Object.prototype.hasOwnProperty,aa=Object.prototype.propertyIsEnumerable;var ia=(e,t,n)=>t in e?Wc(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))sa.call(t,n)&&ia(e,n,t[n]);if(Gr)for(var n of Gr(t))aa.call(t,n)&&ia(e,n,t[n]);return e},h=(e,t)=>Gc(e,jc(t));var Co=e=>typeof e=="symbol"?e:e+"",jn=(e,t)=>{var n={};for(var o in e)sa.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(e!=null&&Gr)for(var o of Gr(e))t.indexOf(o)<0&&aa.call(e,o)&&(n[o]=e[o]);return n};import{createContext as Jg,useCallback as dn,useContext as Ug,useEffect as zt,useMemo as fo,useRef as tn,useState as nn}from"react";import{useCallback as ba,useEffect as Yc,useSyncExternalStore as Jc}from"react";var Yn="http://localhost:1111";function On(e,t={},n=15e3){let o=new AbortController;t.signal&&t.signal.addEventListener("abort",()=>o.abort());let r=setTimeout(()=>o.abort(),n);return fetch(e,h(f({},t),{signal:o.signal})).finally(()=>clearTimeout(r))}async function ca(e=Yn){try{let t=await On(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch(t){return null}}async function rr(e=Yn){try{let t=new AbortController,n=setTimeout(()=>t.abort(),2e3),o=await fetch(`${e}/status`,{signal:t.signal});return clearTimeout(n),o.ok?await o.json():null}catch(t){return null}}async function la(e){try{let t=new AbortController,n=setTimeout(()=>t.abort(),500),o=await fetch(`http://localhost:${e}/status`,{signal:t.signal});return clearTimeout(n),o.ok?await o.json():null}catch(t){return null}}async function da(e){if(e&&e!=="http://localhost:1111")try{let d=new URL(e);return{url:e,port:parseInt(d.port,10)||1111}}catch(d){return null}let r=typeof window!="undefined"?window.location.origin:null,i=await la(1111);if(i&&i.devOrigin&&r&&i.devOrigin===r)return{url:"http://localhost:1111",port:1111};let s=Array.from({length:8},(d,c)=>{let p=1112+c;return la(p).then(u=>u?{status:u,port:p}:null)}),a=(await Promise.all(s)).filter(d=>d!==null),l=[];i&&l.push({port:1111,devOrigin:i.devOrigin});for(let d of a)l.push({port:d.port,devOrigin:d.status.devOrigin});if(r){let d=l.find(c=>c.devOrigin===r);if(d)return{url:`http://localhost:${d.port}`,port:d.port}}return l.length===1?{url:`http://localhost:${l[0].port}`,port:l[0].port}:i?{url:"http://localhost:1111",port:1111}:l.length>0?{url:`http://localhost:${l[0].port}`,port:l[0].port}:null}async function jr(e=Yn,t,n=-1){try{let o=await On(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return o.ok?await o.json():null}catch(o){return null}}async function ua(e,t,n=Yn,o,r,i,s,a){let l=new FormData;if(e instanceof Map){let c=!0;for(let[p,u]of e){let g=encodeURIComponent(p);l.append(`screenshot-${g}`,u,`screenshot-${g}.webp`),c&&(l.append("screenshot",u,"screenshot.webp"),c=!1)}c&&l.append("screenshot",new Blob([],{type:"image/webp"}),"screenshot.webp")}else l.append("screenshot",e,"screenshot.webp");if(l.append("feedback",t),o&&l.append("color",o),r&&l.append("provider",r),i&&l.append("model",i),a&&l.append("sourceId",a),s)for(let[c,p]of s)for(let u=0;u<p.length;u++)l.append(`image-${c}-${u}`,p[u],`image-${c}-${u}.webp`);let d=await On(`${n}/send`,{method:"POST",body:l},3e4);if(!d.ok){let c=await d.text();throw new Error(`Bridge returned ${d.status}: ${c}`)}return d.json()}async function pa(e,t=Yn){let n=await On(`${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 fa(e,t=Yn){let n=await On(`${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 Bi(e,t,n=Yn){let o=await On(`${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 ga(e,t=Yn){let n=await On(`${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 ir(e=Yn){var t;try{let n=await On(`${e}/model`,{},5e3);return n.ok&&(t=(await n.json()).model)!=null?t:null}catch(n){return null}}async function ma(e=Yn){try{return(await On(`${e}/restart`,{method:"POST"},5e3)).ok||await On(`${e}/shutdown`,{method:"POST"},5e3),!0}catch(t){try{await On(`${e}/shutdown`,{method:"POST"},5e3)}catch(n){}return!0}}async function ha(e=Yn,t,n){let o=await On(`${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 ya(e,t,n=Yn,o,r,i,s,a){let l;if(s&&s.length>0){let d=new FormData,c=new Blob([new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,1,0,0,0,1,8,6,0,0,0,31,21,196,137,0,0,0,10,73,68,65,84,120,156,98,0,0,0,2,0,1,229,39,222,252,0,0,0,0,73,69,78,68,174,66,96,130])],{type:"image/png"});d.append("screenshot",c,"screenshot.png"),d.append("feedback",JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:a}));for(let p=0;p<s.length;p++)d.append(`image-reply-${p}`,s[p],`reply-image-${p}.webp`);l=await On(`${n}/reply`,{method:"POST",body:d},3e4)}else l=await On(`${n}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:a})},3e4);if(!l.ok){let d=await l.text();throw new Error(`Bridge returned ${l.status}: ${d}`)}return l.json()}var Vr={};var Fo=typeof Vr!="undefined"?Vr.hot:void 0,va,Sa,wa,Xr=(wa=(Sa=(va=Fo==null?void 0:Fo.data)==null?void 0:va.sourceId)!=null?Sa:typeof localStorage!="undefined"&&localStorage.getItem("popmelt-source-id"))!=null?wa:typeof crypto!="undefined"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2);Fo!=null&&Fo.data&&(Fo.data.sourceId=Xr);try{typeof localStorage!="undefined"&&localStorage.setItem("popmelt-source-id",Xr)}catch(e){}function Ni(){return Xr}var $o=typeof Vr!="undefined"?Vr.hot:void 0,mn=$o==null?void 0:$o.data,Uc={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},Ca,lr=(Ca=mn==null?void 0:mn.store)!=null?Ca:f({},Uc),Ea,Yr=(Ea=mn==null?void 0:mn.listeners)!=null?Ea:new Set,ka,No=(ka=mn==null?void 0:mn.activeEs)!=null?ka:null,Ta,_i=(Ta=mn==null?void 0:mn.activeBridgeUrl)!=null?Ta:null,Do=null,Ma,Jr=(Ma=mn==null?void 0:mn.connectionGeneration)!=null?Ma:0;$o!=null&&$o.data&&Object.defineProperties($o.data,{store:{get:()=>lr,configurable:!0},listeners:{get:()=>Yr,configurable:!0},activeEs:{get:()=>No,configurable:!0},activeBridgeUrl:{get:()=>_i,configurable:!0},connectionGeneration:{get:()=>Jr,configurable:!0},discoveredBridgeUrl:{get:()=>Ho,configurable:!0}});var Ur=new Set,ar=new Map,Eo={};function _o(e,t){var o;if(!e)return!1;if(Ur.has(e)){let r=ar.get(e);return r||(r=[],ar.set(e,r)),r.push({type:(o=t.type)!=null?o:"",data:t}),!0}let n=Eo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function Vc(e,t,n){let o=()=>n!==Jr;for(let r of t){if(o())return;Ur.add(r),ar.set(r,[])}await Promise.all(t.map(async r=>{var i;try{let s=await jr(e,r);if(o())return;let a=(i=ar.get(r))!=null?i:[];if(s){if(an(l=>{let d=h(f({},l.jobResponses),{[r]:s.accumulated.response}),c=h(f({},l.jobThinking),{[r]:s.accumulated.thinking}),p=[...l.events];for(let u of s.events)u.type==="done"||u.type==="error"||p.push({type:u.type,data:u,timestamp:Date.now()});return h(f({},l),{jobResponses:d,jobThinking:c,currentResponse:r===l.activeJobId?s.accumulated.response:l.currentResponse,currentThinking:r===l.activeJobId?s.accumulated.thinking:l.currentThinking,events:p})}),Eo[r]=s.currentSeq,!s.jobActive){let l=s.events.find(d=>d.type==="done"||d.type==="error");l&&Di(l.type,l,r)}for(let l of a)typeof l.data.seq=="number"&&l.data.seq<=s.currentSeq||Di(l.type,l.data,r)}else for(let l of a)Di(l.type,l.data,r)}finally{Ur.delete(r),ar.delete(r)}}))}function Di(e,t,n){var o;if(e==="delta"){let r=t.text||"";an(i=>h(f({},i),{jobResponses:h(f({},i.jobResponses),{[n]:(i.jobResponses[n]||"")+r}),currentResponse:n===i.activeJobId?i.currentResponse+r:i.currentResponse,events:[...i.events,{type:"delta",data:t,timestamp:Date.now()}]}))}else if(e==="thinking"){let r=t.text||"";an(i=>h(f({},i),{jobThinking:h(f({},i.jobThinking),{[n]:(i.jobThinking[n]||"")+r}),currentThinking:n===i.activeJobId?i.currentThinking+r:i.currentThinking,events:[...i.events,{type:"thinking",data:t,timestamp:Date.now()}]}))}else if(e==="done")delete Eo[n],an(r=>{var c;let i=r.activeJobIds.filter(p=>p!==n),s=f({},r.jobResponses),a=f({},r.jobThinking),l=s[n];delete s[n],delete a[n];let d=n===r.activeJobId?i.length>0?i[i.length-1]:null:r.activeJobId;return h(f(h(f({},r),{activeJobIds:i,activeJobId:d,jobResponses:s,jobThinking:a,lastCompletedJobId:n,lastResponseText:l||r.currentResponse||t.responseText||null,lastThreadId:(c=t.threadId)!=null?c:null}),n===r.activeJobId?{currentResponse:d&&s[d]||"",currentThinking:d&&a[d]||""}:{}),{events:[...r.events,{type:"done",data:t,timestamp:Date.now()}]})});else if(e==="error"){delete Eo[n];let r=(o=t.message)!=null?o:"";an(i=>{let s=i.activeJobIds.filter(l=>l!==n),a=s.length>0?i.status:"error";return h(f({},i),{status:a,activeJobIds:s,lastCompletedJobId:n,lastErrorByJob:r?h(f({},i.lastErrorByJob),{[n]:r}):i.lastErrorByJob,events:[...i.events,{type:"error",data:t,timestamp:Date.now()}]})})}else an(r=>h(f({},r),{events:[...r.events,{type:e,data:t,timestamp:Date.now()}]}))}var Ia,Ho=(Ia=mn==null?void 0:mn.discoveredBridgeUrl)!=null?Ia:null,sr=null;async function Xc(e){return e&&e!=="http://localhost:1111"?(Ho=e,e):Ho||sr||(sr=da(e).then(n=>{var o;return Ho=(o=n==null?void 0:n.url)!=null?o:null,sr=null,Ho}).catch(()=>(sr=null,null)),sr)}function La(){return Ho}function xa(){return lr}function Kc(e){return Yr.add(e),()=>{Yr.delete(e)}}function an(e){lr=e(lr);for(let t of Yr)t()}function Ra(e){if(No&&No.readyState!==EventSource.CLOSED&&_i===e)return;No&&(No.close(),No=null),Do&&(clearTimeout(Do),Do=null),_i=e;let t=++Jr,n=new EventSource(`${e}/events?sourceId=${Xr}`);No=n;let o=()=>t!==Jr;n.addEventListener("connected",()=>{o()||rr(e).then(r=>{var u,g;if(o())return;let i=(u=r==null?void 0:r.activeJobs)!=null?u:r!=null&&r.activeJob?[r.activeJob]:[],s=new Set(i.map(b=>b.id)),a=(g=r==null?void 0:r.recentJobs)!=null?g:[],l=new Map(a.map(b=>[b.id,b])),d=i.length>0;an(b=>{let x=f({},b.lastErrorByJob),A=b.activeJobIds.filter(P=>!s.has(P));for(let P of A){let O=l.get(P);(O==null?void 0:O.status)==="error"&&O.error&&(x[P]=O.error)}let T=b.activeJobIds.filter(P=>s.has(P));for(let P of s)T.includes(P)||T.push(P);let z={};for(let P of i)P.threadId&&(z[P.id]=P.threadId);return h(f({},b),{isConnected:!0,status:d?"streaming":A.length>0||b.status==="disconnected"?"idle":b.status,activeJobId:d?i[i.length-1].id:T.length>0?T[T.length-1]:null,activeJobIds:T,activeJobThreads:z,lastErrorByJob:x,lastCompletedJobId:A.length>0?A[A.length-1]:b.lastCompletedJobId})});let c=lr.activeJobIds.filter(b=>!s.has(b)),p=[...Array.from(s),...c];p.length>0&&Vc(e,p,t).catch(()=>{})})}),n.addEventListener("job_started",r=>{if(o())return;let i=JSON.parse(r.data),s=i.jobId;if(_o(s,i))return;let a=i.threadId;an(l=>{var d,c,p,u;return h(f({},l),{status:"streaming",activeJobId:s,activeJobIds:l.activeJobIds.includes(s)?l.activeJobIds:[...l.activeJobIds,s],activeJobThreads:a?h(f({},l.activeJobThreads),{[s]:a}):l.activeJobThreads,jobResponses:h(f({},l.jobResponses),{[s]:(d=l.jobResponses[s])!=null?d:""}),jobThinking:h(f({},l.jobThinking),{[s]:(c=l.jobThinking[s])!=null?c:""}),currentResponse:(p=l.jobResponses[s])!=null?p:"",currentThinking:(u=l.jobThinking[s])!=null?u:"",lastResponseText:null,lastThreadId:null,events:[...l.events,{type:"job_started",data:i,timestamp:Date.now()}]})})}),n.addEventListener("delta",r=>{if(o())return;let i=JSON.parse(r.data),s=i.jobId;if(_o(s,i))return;let a=i.text||"";an(l=>h(f({},l),{jobResponses:s?h(f({},l.jobResponses),{[s]:(l.jobResponses[s]||"")+a}):l.jobResponses,currentResponse:!s||s===l.activeJobId?l.currentResponse+a:l.currentResponse,events:[...l.events,{type:"delta",data:i,timestamp:Date.now()}]}))}),n.addEventListener("thinking",r=>{if(o())return;let i=JSON.parse(r.data),s=i.jobId;if(_o(s,i))return;let a=i.text||"";an(l=>h(f({},l),{jobThinking:s?h(f({},l.jobThinking),{[s]:(l.jobThinking[s]||"")+a}):l.jobThinking,currentThinking:!s||s===l.activeJobId?l.currentThinking+a:l.currentThinking,events:[...l.events,{type:"thinking",data:i,timestamp:Date.now()}]}))}),n.addEventListener("tool_use",r=>{if(o())return;let i=JSON.parse(r.data),s=i.jobId;_o(s,i)||an(a=>h(f({},a),{events:[...a.events,{type:"tool_use",data:i,timestamp:Date.now()}]}))}),n.addEventListener("done",r=>{if(o())return;let i=JSON.parse(r.data),s=i.jobId;_o(s,i)||(s&&delete Eo[s],an(a=>{var b;let l=s?a.activeJobIds.filter(x=>x!==s):a.activeJobIds,d=f({},a.jobResponses),c=f({},a.jobThinking),p=f({},a.activeJobThreads),u=s?d[s]:void 0;s&&(delete d[s],delete c[s],delete p[s]);let g=s===a.activeJobId?l.length>0?l[l.length-1]:null:a.activeJobId;return h(f(h(f({},a),{activeJobIds:l,activeJobId:g,jobResponses:d,jobThinking:c,lastCompletedJobId:s!=null?s:a.activeJobId,lastResponseText:u||a.currentResponse||i.responseText||null,lastThreadId:(b=i.threadId)!=null?b:null}),s===a.activeJobId?{currentResponse:g&&d[g]||"",currentThinking:g&&c[g]||""}:{}),{events:[...a.events,{type:"done",data:i,timestamp:Date.now()}]})}))}),n.addEventListener("question",r=>{if(o())return;let i=JSON.parse(r.data),s=i.jobId;_o(s,i)||an(a=>h(f({},a),{pendingQuestions:[...a.pendingQuestions,{jobId:i.jobId,threadId:i.threadId,question:i.question,annotationIds:i.annotationIds,timestamp:Date.now()}],events:[...a.events,{type:"question",data:i,timestamp:Date.now()}]}))}),n.addEventListener("capabilities_changed",()=>{o()||an(r=>h(f({},r),{capabilitiesVersion:r.capabilitiesVersion+1}))}),n.addEventListener("queue_drained",()=>{if(!o()){for(let r of Object.keys(Eo))delete Eo[r];Ur.clear(),ar.clear(),an(r=>h(f({},r),{status:r.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}}),n.addEventListener("error",r=>{var i,s;if(!o()){if(n.readyState===EventSource.CLOSED)an(a=>h(f({},a),{isConnected:!1,status:"disconnected"})),Do&&(clearTimeout(Do),Do=null),Do=setTimeout(()=>{rr(e).then(a=>{a&&Ra(e)})},5e3);else if(r instanceof MessageEvent){let a=JSON.parse(r.data),l=(i=a.jobId)!=null?i:null;if(_o(l!=null?l:void 0,a))return;l&&delete Eo[l];let d=(s=a.message)!=null?s:"";an(c=>{let p=l?c.activeJobIds.filter(g=>g!==l):c.activeJobIds,u=p.length>0?c.status:"error";return h(f({},c),{status:u,activeJobIds:p,lastCompletedJobId:l!=null?l:c.activeJobId,lastErrorByJob:l&&d?h(f({},c.lastErrorByJob),{[l]:d}):c.lastErrorByJob,events:[...c.events,{type:"error",data:a,timestamp:Date.now()}]})})}}}),n.onerror=()=>{o()||n.readyState===EventSource.CLOSED&&an(r=>h(f({},r),{isConnected:!1,status:"disconnected"}))}}function Aa(e="http://localhost:1111",t=!0){let n=Jc(Kc,xa,xa);Yc(()=>{t&&Xc(e).then(i=>{i&&rr(i).then(s=>{s&&Ra(i)})})},[e,t]);let o=ba(()=>{an(()=>h(f({},lr),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),r=ba(i=>{an(s=>h(f({},s),{pendingQuestions:s.pendingQuestions.filter(a=>a.threadId!==i)}))},[]);return h(f({},n),{clearEvents:o,dismissQuestion:r})}import{useEffect as qc,useReducer as Zc}from"react";var Qc={isAnnotating:!1,activeTool:"inspector",activeColor:"oklch(0.628 0.258 29)",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function Kr(){return Math.random().toString(36).substring(2,9)}function Pa(e){return e.status?e:e.captured?h(f({},e),{status:"in_flight"}):h(f({},e),{status:"pending"})}function Mn(e){return h(f({},e),{undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]})}function ed(e,t){return h(f({},e),{isAnnotating:t})}function td(e,t){return h(f({},e),{activeTool:t,inspectedElement:null})}function nd(e,t){return h(f({},e),{activeColor:t})}function od(e,t){return h(f({},e),{strokeWidth:t})}function rd(e,t){return h(f({},e),{currentPath:[t]})}function id(e,t){return h(f({},e),{currentPath:[...e.currentPath,t]})}function sd(e){return h(f({},e),{currentPath:[]})}function ad(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return h(f({},e),{currentPath:[]});let n={id:Kr(),type:e.activeTool,points:e.currentPath,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window!="undefined"?window.location.pathname:"/",groupId:t==null?void 0:t.groupId,elements:t==null?void 0:t.elements},o=Mn(e);return h(f({},o),{annotations:[...e.annotations,n],currentPath:[]})}function ld(e,t){var r;let n=f({id:(r=t.id)!=null?r:Kr(),type:"text",points:[t.point],text:t.text,fontSize:t.fontSize||12,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window!="undefined"?window.location.pathname:"/",groupId:t.groupId,linkedSelector:t.linkedSelector,linkedAnchor:t.linkedAnchor,elements:t.elements},t.imageCount?{imageCount:t.imageCount}:{}),o=t.groupId?e:Mn(e);return h(f({},o),{annotations:[...e.annotations,n]})}function cd(e,t){let n=Mn(e);return h(f({},n),{annotations:e.annotations.map(o=>o.id===t.id?f(h(f({},o),{text:t.text}),t.imageCount!=null?{imageCount:t.imageCount}:{}):o)})}function dd(e,t){return h(f({},e),{annotations:e.annotations.map(n=>n.id===t.id?h(f({},n),{fontSize:Math.max(12,Math.min(72,t.fontSize))}):n)})}function ud(e,t){let n=Mn(e),o=e.annotations.find(i=>i.id===t.id),r=o==null?void 0:o.groupId;return h(f({},n),{annotations:e.annotations.filter(i=>i.id!==t.id&&!(r&&i.groupId===r))})}function pd(e,t){let n=t.saveUndo?Mn(e):e,o=e.annotations.find(i=>i.id===t.id),r=o==null?void 0:o.groupId;return h(f({},n),{annotations:e.annotations.map(i=>{if(!(i.id===t.id||r&&i.groupId===r))return i;let a=t.delta.x,l=t.delta.y;return h(f({},i),{points:i.points.map(d=>({x:d.x+a,y:d.y+l}))})})})}function fd(e,t){let n=t.saveUndo?Mn(e):e,o=e.annotations.find(s=>s.id===t.id);if(!o||o.type==="text"||o.points.length<2)return e;let r=0,i=0;if(o.type==="rectangle"&&o.groupId){let s=t.points,a=Math.min(s[0].x,s[1].x),l=Math.max(s[0].y,s[1].y),d=o.points[0],c=o.points[o.points.length-1],p=Math.min(d.x,c.x),u=Math.max(d.y,c.y);r=a-p,i=l-u}return h(f({},n),{annotations:e.annotations.map(s=>s.id===t.id?h(f({},s),{points:t.points}):o.groupId&&s.groupId===o.groupId&&s.type==="text"?h(f({},s),{points:s.points.map(a=>({x:a.x+r,y:a.y+i}))}):s)})}function gd(e,t){let n=Mn(e);return h(f({},n),{annotations:[...e.annotations,...t.annotations.map(Pa)]})}function md(e,t){let n=new Set,o=[];for(let r of t.annotations)n.has(r.id)||(n.add(r.id),o.push(Pa(r)));return h(f({},e),{annotations:o})}function hd(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return h(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],undoStack:e.undoStack.slice(0,-1),redoStack:[...e.redoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function yd(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return h(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],redoStack:e.redoStack.slice(0,-1),undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function bd(e,t){let{id:n,addToSelection:o}=t;if(n===null)return h(f({},e),{selectedAnnotationIds:[],lastSelectedId:null});if(o)if(e.selectedAnnotationIds.includes(n)){let i=e.selectedAnnotationIds.filter(s=>s!==n);return h(f({},e),{selectedAnnotationIds:i,lastSelectedId:i.length>0?i[i.length-1]:null})}else return h(f({},e),{selectedAnnotationIds:[...e.selectedAnnotationIds,n],lastSelectedId:n});return h(f({},e),{selectedAnnotationIds:[n],lastSelectedId:n})}function xd(e,t){let n=new Set;for(let o of e.selectedAnnotationIds){let r=e.annotations.find(i=>i.id===o);r!=null&&r.groupId&&n.add(r.groupId)}return h(f({},e),{annotations:e.annotations.map(o=>{let r=e.selectedAnnotationIds.includes(o.id),i=o.groupId&&n.has(o.groupId);return!r&&!i?o:h(f({},o),{color:t.color})})})}function vd(e){return h(f({},e),{annotations:e.annotations.map(t=>h(f({},t),{captured:!0,status:t.status==="pending"||!t.status?"in_flight":t.status})),styleModifications:e.styleModifications.map(t=>h(f({},t),{captured:!0})),spacingTokenChanges:e.spacingTokenChanges.map(t=>h(f({},t),{captured:!0}))})}function Sd(e){return h(f({},e),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function wd(e,t){return h(f({},e),{inspectedElement:t})}function Cd(e,t){let{selector:n,element:o,property:r,original:i,modified:s}=t,a=e.styleModifications.findIndex(l=>l.selector===n);if(i===s&&a<0)return e;if(a>=0){let l=e.styleModifications[a];if(l.captured){let g=Mn(e),b=g.styleModifications.map((x,A)=>A===a?h(f({},x),{changes:[{property:r,original:i,modified:s}],captured:!1}):x);return h(f({},g),{styleModifications:b})}let d=l.changes.findIndex(g=>g.property===r),c,p=e;if(d>=0){let g=l.changes[d];s===g.original?c=l.changes.filter((b,x)=>x!==d):c=l.changes.map((b,x)=>x===d?h(f({},b),{modified:s}):b)}else{if(i===s)return e;p=Mn(e),c=[...l.changes,{property:r,original:i,modified:s}]}if(c.length===0)return h(f({},p),{styleModifications:p.styleModifications.filter((g,b)=>b!==a)});let u=p.styleModifications.map((g,b)=>b===a?h(f({},g),{changes:c}):g);return h(f({},p),{styleModifications:u})}else{let l=Mn(e),d={selector:n,element:o,changes:[{property:r,original:i,modified:s}]};return h(f({},l),{styleModifications:[...l.styleModifications,d]})}}function Ed(e,t){let{selector:n,durableSelector:o,element:r,changes:i}=t,s=i.filter(d=>d.original!==d.modified);if(s.length===0)return e;let a=Mn(e),l=a.styleModifications.findIndex(d=>d.selector===n);if(l>=0){let d=a.styleModifications[l],c=d.captured?[]:[...d.changes];for(let p of s){let u=c.findIndex(g=>g.property===p.property);u>=0?p.modified===c[u].original?c=c.filter((g,b)=>b!==u):c=c.map((g,b)=>b===u?h(f({},g),{modified:p.modified}):g):c.push(p)}return c.length===0?h(f({},a),{styleModifications:a.styleModifications.filter((p,u)=>u!==l)}):h(f({},a),{styleModifications:a.styleModifications.map((p,u)=>u===l?h(f({},p),{changes:c,captured:!1}):p)})}else return h(f({},a),{styleModifications:[...a.styleModifications,{selector:n,durableSelector:o,element:r,changes:s}]})}function kd(e,t){let{selector:n,property:o}=t,r=Mn(e),i=r.styleModifications.map(s=>s.selector!==n?s:h(f({},s),{changes:s.changes.filter(a=>a.property!==o)})).filter(s=>s.changes.length>0);return h(f({},r),{styleModifications:i})}function Td(e){if(e.styleModifications.length===0)return h(f({},e),{inspectedElement:null});let t=Mn(e);return h(f({},t),{styleModifications:[],inspectedElement:null})}function Md(e,t){return h(f({},e),{styleModifications:t})}function Id(e,t){let{updates:n}=t,o=new Map(n.map(r=>[r.id,r]));return h(f({},e),{annotations:e.annotations.map(r=>{let i=o.get(r.id);return i?f(h(f({},r),{points:[i.point,...r.points.slice(1)]}),i.linkedAnchor?{linkedAnchor:i.linkedAnchor}:{}):r})})}function Ld(e,t){let n=new Set(t.ids);return h(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)?h(f({},o),{status:t.status}):o)})}function Rd(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 h(f({},e),{annotations:e.annotations.map(r=>n.has(r.id)||r.groupId&&o.has(r.groupId)?h(f({},r),{threadId:t.threadId}):r)})}function Ad(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 h(f({},e),{annotations:e.annotations.map(r=>n.has(r.id)||r.groupId&&o.has(r.groupId)?h(f({},r),{status:"waiting_input",question:t.question,threadId:t.threadId}):r)})}function Pd(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 h(f({},e),{annotations:e.annotations.map(r=>{var s,a,l;let i=n.get(r.id)||(r.groupId?o.get(r.groupId):void 0);return i?h(f({},r),{status:i.status,resolutionSummary:i.summary,scope:(a=(s=i.finalScope)!=null?s:i.inferredScope)!=null?a:null,replyCount:((l=r.replyCount)!=null?l:0)+1,question:void 0,threadId:r.threadId||t.threadId}):r})})}function Od(e,t){let{linkedSelectors:n,styleSelectors:o}=t,r=new Set(n),i=new Set(o),s=new Set,a=new Set;for(let u of e.annotations)u.linkedSelector&&r.has(u.linkedSelector)&&(s.add(u.id),u.groupId&&a.add(u.groupId));for(let u of e.annotations)u.groupId&&a.has(u.groupId)&&s.add(u.id);let l=e.annotations.filter(u=>!s.has(u.id)),d=e.styleModifications.filter(u=>!i.has(u.selector));if(l.length===e.annotations.length&&d.length===e.styleModifications.length)return e;let c=e.selectedAnnotationIds.filter(u=>!s.has(u)),p=e.inspectedElement&&i.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return h(f({},e),{annotations:l,styleModifications:d,selectedAnnotationIds:c,lastSelectedId:c.length>0?c[c.length-1]:null,inspectedElement:p})}function Bd(e,t){let n=e.spacingTokenChanges.findIndex(o=>o.tokenPath===t.tokenPath);return n>=0?h(f({},e),{spacingTokenChanges:e.spacingTokenChanges.map((o,r)=>r===n?t:o)}):h(f({},e),{spacingTokenChanges:[...e.spacingTokenChanges,t]})}function Dd(e,t){return h(f({},e),{spacingTokenChanges:t})}function _d(e,t){let n=Mn(e),o=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),r;if(o>=0){let i=e.spacingTokenMods[o],s=h(f({},t),{originalValue:i.originalValue,originalPx:i.originalPx});r=e.spacingTokenMods.map((a,l)=>l===o?s:a)}else r=[...e.spacingTokenMods,t];return h(f({},n),{spacingTokenMods:r})}function Nd(e,t){let n=Mn(e),o=e.spacingTokenMods.findIndex(l=>l.tokenPath===t.tokenPath),r=o>=0?e.spacingTokenMods[o].originalValue:t.originalValue,i=o>=0?e.spacingTokenMods[o].originalPx:parseFloat(t.originalValue)||0,s={tokenPath:t.tokenPath,originalValue:r,currentValue:"__deleted__",targets:o>=0?e.spacingTokenMods[o].targets:[],originalPx:i,currentPx:0},a;return o>=0?a=e.spacingTokenMods.map((l,d)=>d===o?s:l):a=[...e.spacingTokenMods,s],h(f({},n),{spacingTokenMods:a})}var Hd={SET_ANNOTATING:ed,SET_TOOL:td,SET_COLOR:nd,SET_STROKE_WIDTH:od,START_PATH:rd,CONTINUE_PATH:id,CANCEL_PATH:sd,FINISH_PATH:ad,ADD_TEXT:ld,UPDATE_TEXT:cd,UPDATE_TEXT_SIZE:dd,DELETE_ANNOTATION:ud,MOVE_ANNOTATION:pd,RESIZE_ANNOTATION:fd,PASTE_ANNOTATIONS:gd,RESTORE_ANNOTATIONS:md,UNDO:hd,REDO:yd,SELECT_ANNOTATION:bd,UPDATE_ANNOTATION_COLOR:xd,MARK_CAPTURED:vd,CLEAR:Sd,SELECT_ELEMENT:wd,MODIFY_STYLE:Cd,MODIFY_STYLES_BATCH:Ed,CLEAR_STYLE:kd,CLEAR_ALL_STYLES:Td,RESTORE_STYLE_MODIFICATIONS:Md,UPDATE_LINKED_POSITIONS:Id,CLEANUP_ORPHANED:Od,SET_ANNOTATION_STATUS:Ld,SET_ANNOTATION_THREAD:Rd,SET_ANNOTATION_QUESTION:Ad,APPLY_RESOLUTIONS:Pd,ADD_SPACING_TOKEN_CHANGE:Bd,RESTORE_SPACING_TOKEN_CHANGES:Dd,MODIFY_SPACING_TOKEN:_d,DELETE_SPACING_TOKEN:Nd};function Fd(e,t){let n=Hd[t.type];return n?n(e,t.payload):e}function Oa(){let[e,t]=Zc(Fd,Qc);return qc(()=>{let n=o=>{(o.metaKey||o.ctrlKey)&&o.key==="z"&&(o.preventDefault(),o.shiftKey?t({type:"REDO"}):t({type:"UNDO"}))};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[]),[e,t]}import{useSyncExternalStore as $d}from"react";if(typeof window!="undefined"&&!window.__popmeltPathPatch){window.__popmeltPathPatch=!0;for(let e of["pushState","replaceState"]){let t=History.prototype[e];History.prototype[e]=function(...n){let o=window.location.pathname;t.apply(this,n),window.dispatchEvent(new CustomEvent("popmelt:locationchange",{detail:{prevPath:o}}))}}}function zd(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function Wd(){return window.location.pathname}function cr(){return $d(zd,Wd,()=>"/")}var Ba="popmelt-toolbar-snap-position";function zo(e){return e.startsWith("top-")}function Wo(e){return e.endsWith("-right")}function Rr(e){return e.endsWith("-center")}function Da(){try{let e=localStorage.getItem(Ba);if(e&&Gd(e))return e}catch(e){}return"bottom-right"}function _a(e){try{localStorage.setItem(Ba,e)}catch(t){}}function Gd(e){return["bottom-right","bottom-center","bottom-left","top-right","top-center","top-left"].includes(e)}function Na(e,t,n){let o=zo(e)?16:n-16-54;return Rr(e)?{position:"fixed",top:o,left:t/2,transform:"translateX(-50%)"}:Wo(e)?{position:"fixed",top:o,right:16,left:"auto"}:{position:"fixed",top:o,left:16,right:"auto"}}function Ha(e,t,n){let r=zo(e)?{top:82}:{bottom:82},i;return Rr(e)?i={left:t/2,transform:"translateX(-50%)"}:Wo(e)?i={right:16}:i={left:16},f(f({position:"fixed"},r),i)}function Fa(e,t,n){let o=zo(e),r=o?{top:78}:{bottom:78},i,s;return Rr(e)?(i={left:"50%",transform:"translateX(-50%)"},s="center"):Wo(e)?(i={right:16},s="flex-end"):(i={left:16},s="flex-start"),h(f(f({position:"fixed"},r),i),{zIndex:9999,display:"flex",flexDirection:"column",alignItems:s})}function $a(e){let t=zo(e),n=Wo(e)||Rr(e);return{position:"fixed",top:t&&n?82:16,right:16,bottom:!t&&n?82:16}}function za(e,t,n){let r=zo(e),i,s;Wo(e)||Rr(e)?(i=t-16,s=i-326):(s=16,i=s+326);let a=r?82:n-16-54-12;return{left:s,right:i,y:a}}var Wa=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"];import{domToCanvas as jd}from"modern-screenshot";function Hi(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function Fi(e,t=[],n,o){let r=new Map,i=[];for(let a of e)if(a.groupId){let l=r.get(a.groupId)||[];l.push(a),r.set(a.groupId,l)}else i.push(a);let s=[];for(let[a,l]of r){let d=l.find(p=>p.type!=="text"),c=l.find(p=>p.type==="text");if(d){let p=d.linkedSelector||(c==null?void 0:c.linkedSelector),u=(c==null?void 0:c.imageCount)||d.imageCount,g=d.pathname||(c==null?void 0:c.pathname);s.push(f(h(f(f({id:d.id,type:d.type,instruction:c==null?void 0:c.text},p?{linkedSelector:p}:{}),g?{pathname:g}:{}),{elements:d.elements||[]}),u?{imageCount:u}:{}))}}for(let a of i)s.push(f(h(f(f({id:a.id,type:a.type,instruction:a.type==="text"?a.text:void 0},a.linkedSelector?{linkedSelector:a.linkedSelector}:{}),a.pathname?{pathname:a.pathname}:{}),{elements:a.elements||[]}),a.imageCount?{imageCount:a.imageCount}:{}));return f(f({timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:s,styleModifications:t},n?{inspectedElement:n}:{}),o&&o.length>0?{spacingTokenChanges:o}:{})}function Yd(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 Jd(e,t){if(e.length===0)return[];let n=e.map(c=>({annotation:c,bounds:Yd(c)})).filter(c=>c.bounds!==null);if(n.length===0)return[];n.sort((c,p)=>c.bounds.minY-p.bounds.minY);let o=Math.min(...n.map(c=>c.bounds.minY)),r=Math.max(...n.map(c=>c.bounds.maxY));if(r-o<=t){let c=(o+r)/2,p=Math.max(0,c-t/2);return[{top:p,bottom:p+t,annotations:e}]}let i=[],s=50,a=Math.max(0,o-s),l=[],d=a;for(let{annotation:c,bounds:p}of n){let u=p.maxY+s;if(u-a<=t)l.push(c),d=Math.max(d,u);else{if(l.length>0){let g=(a+d)/2,b=Math.max(0,g-t/2);i.push({top:b,bottom:b+t,annotations:l})}a=Math.max(0,p.minY-s),l=[c],d=p.maxY+s}}if(l.length>0){let c=(a+d)/2,p=Math.max(0,c-t/2);i.push({top:p,bottom:p+t,annotations:l})}return i}function Ud(e){let t=new Map;for(let n of e)if(n.linkedSelector)try{let o=document.querySelector(n.linkedSelector);if(o){let r=o.getBoundingClientRect();t.set(n.id,{x:r.left+window.scrollX,y:r.top+window.scrollY,width:r.width,height:r.height})}}catch(o){}return t}function Vd(e,t,n,o,r){if(e.save(),e.scale(o,o),r)for(let i of t){let s=r.get(i.id);if(!s)continue;let a=s.y-n;e.fillStyle=i.color,e.globalAlpha=.05,e.fillRect(s.x,a,s.width,s.height),e.globalAlpha=1,e.strokeStyle=i.color,e.lineWidth=1,e.setLineDash([2,4]),e.strokeRect(s.x,a,s.width,s.height),e.setLineDash([])}for(let i of t){let s=i.points.map(a=>({x:a.x,y:a.y-n}));switch(e.strokeStyle=i.color,e.fillStyle=i.color,e.lineWidth=i.strokeWidth,e.lineCap="round",e.lineJoin="round",i.type){case"freehand":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y);for(let a=1;a<s.length;a++)e.lineTo(s[a].x,s[a].y);e.stroke();break;case"line":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y),e.lineTo(s[s.length-1].x,s[s.length-1].y),e.stroke();break;case"rectangle":{if(s.length<2)break;let a=s[0],l=s[s.length-1],d=Math.min(a.x,l.x),c=Math.min(a.y,l.y),p=Math.abs(l.x-a.x),u=Math.abs(l.y-a.y);e.strokeRect(d,c,p,u);break}case"circle":{if(s.length<2)break;let a=s[0],l=s[s.length-1],d=(a.x+l.x)/2,c=(a.y+l.y)/2,p=Math.abs(l.x-a.x)/2,u=Math.abs(l.y-a.y)/2;e.beginPath(),e.ellipse(d,c,p,u,0,0,Math.PI*2),e.stroke();break}case"text":{if(!i.text||s.length<1)break;let a=s[0],l=i.fontSize||16;e.font=`${l}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=i.color;let c=(i.imageCount&&i.imageCount>0?`[${i.imageCount} image${i.imageCount>1?"s":""}] ${i.text}`:i.text).split(`
|
|
3
|
-
`),p=l*1.2,u=4,g=0;for(let b of c)g=Math.max(g,e.measureText(b).width);e.fillRect(a.x-u,a.y-u,g+u*2,c.length*p+u*2),e.fillStyle="#ffffff",c.forEach((b,x)=>{e.fillText(b,a.x,a.y+l+x*p)});break}}}e.restore()}async function Ar(e,t,n=[],o){var r;try{let i=(r=o==null?void 0:o.dpr)!=null?r:window.devicePixelRatio||1,s=window.innerWidth,a=window.innerHeight,l=n.filter(u=>{var g;return((g=u.status)!=null?g:"pending")==="pending"});console.log("[Screenshot] Starting capture with",l.length,"active annotations (filtered",n.length-l.length,"captured)");let d=Ud(l),c=Jd(l,a);if(c.length===0){let u=await Ga(e,[],window.scrollY,s,a,i,d);return u?[u]:[]}let p=[];for(let u=0;u<c.length;u++){let g=c[u],b=await Ga(e,g.annotations,g.top,s,a,i,d);b?p.push(b):console.warn(`[Screenshot] Region ${u+1} failed to capture`)}return console.log("[Screenshot] Capture complete"),p}catch(i){return console.error("[Screenshot] Capture failed:",i),[]}}async function Ga(e,t,n,o,r,i,s){try{let a=getComputedStyle(document.documentElement).backgroundColor,d=await jd(e,{filter:u=>!(u instanceof HTMLElement&&(u.id==="devtools-canvas"||u.id==="devtools-toolbar"||u.id==="devtools-scrim"||u.dataset.devtools!==void 0)),scale:i,backgroundColor:a&&a!=="rgba(0, 0, 0, 0)"&&a!=="transparent"?a:"#ffffff",width:o,height:r,style:{transform:`translate(${-window.scrollX}px, ${-n}px)`}}),c=document.createElement("canvas");c.width=o*i,c.height=r*i;let p=c.getContext("2d");return p?(p.drawImage(d,0,0,o*i,r*i,0,0,o*i,r*i),Vd(p,t,n,i,s),new Promise(u=>{c.toBlob(g=>u(g),"image/webp",.8)})):null}catch(a){return console.error("Region capture failed:",a),null}}async function Pr(e){if(e.length===0)return null;if(e.length===1)return e[0];let t=await Promise.all(e.map(a=>new Promise((l,d)=>{let c=new Image;c.onload=()=>l(c),c.onerror=d,c.src=URL.createObjectURL(a)}))),n=t[0].width,o=t.reduce((a,l)=>a+l.height,0),r=document.createElement("canvas");r.width=n,r.height=o;let i=r.getContext("2d");if(!i)return null;let s=0;for(let a of t)i.drawImage(a,0,s),s+=a.height,URL.revokeObjectURL(a.src);return new Promise(a=>{r.toBlob(l=>a(l),"image/webp",.8)})}async function ja(e,t,n){try{let o=Array.isArray(e)?e:[e];if(o.length===0)return!1;let r=await Pr(o);if(!r)return!1;let i=r;if(r.type!=="image/png"){let d=new Image,c=URL.createObjectURL(r);await new Promise(u=>{d.onload=()=>u(),d.src=c}),URL.revokeObjectURL(c);let p=document.createElement("canvas");p.width=d.naturalWidth,p.height=d.naturalHeight,p.getContext("2d").drawImage(d,0,0),i=await new Promise(u=>p.toBlob(g=>u(g),"image/png"))}let s={"image/png":i},a=t&&t.length>0,l=n&&n.length>0;if(a||l){let d=t?t.filter(c=>{var p;return((p=c.status)!=null?p:"pending")==="pending"}):[];if(d.length>0||l){let c=Fi(d,n||[]),p=new Blob([JSON.stringify(c,null,2)],{type:"text/plain"});s["text/plain"]=p}}return await navigator.clipboard.write([new ClipboardItem(s)]),!0}catch(o){return console.warn("Clipboard write failed:",o),!1}}import{useCallback as cn,useEffect as xn,useMemo as bi,useRef as Xt,useState as vt}from"react";import{useCallback as pr,useRef as Kd}from"react";function $i(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let s=(r.x+i.x)/2,a=(r.y+i.y)/2,l=Math.abs(i.x-r.x)/2,d=Math.abs(i.y-r.y)/2;e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.ellipse(s,a,l,d,0,0,Math.PI*2),e.stroke()}function zi(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!(!r||!i)){e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.moveTo(r.x,r.y);for(let s=1;s<t.length-1;s++){let a=t[s],l=t[s+1];if(!a||!l)continue;let d=(a.x+l.x)/2,c=(a.y+l.y)/2;e.quadraticCurveTo(a.x,a.y,d,c)}e.lineTo(i.x,i.y),e.stroke()}}function Wi(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 Gi(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let s=Math.min(r.x,i.x),a=Math.min(r.y,i.y),l=Math.abs(i.x-r.x),d=Math.abs(i.y-r.y);e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.strokeRect(s,a,l,d)}var Qt='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function Xd(e,t,n){if(!t||e.measureText(t).width<=n)return[t];let o=t.split(/\s+/),r=[],i="";for(let s of o){let a=i?i+" "+s:s;i&&e.measureText(a).width>n?(r.push(i),i=s):i=a}return i&&r.push(i),r.length>0?r:[t]}function dr(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function Ya(e,t,n){let o=[];for(let r of t)o.push(...Xd(e,r,n));return o}function ur(e,t,n){if(e.measureText(t).width<=n)return t;let o="\u2026";for(let r=t.length-1;r>0;r--){let i=t.slice(0,r)+o;if(e.measureText(i).width<=n)return i}return o}function Ja(e,t,n,o,r=12,i,s){if(!n)return;let a=r*1.4,l=n.replace(/\n/g," "),d=i!==void 0?i+". "+l:l;e.font=`${r}px ${Qt}`,e.textBaseline="middle";let c=s!==void 0?Math.min(400,Math.max(60,window.innerWidth-s-16)):400,p=ur(e,d,c),u=e.measureText(p).width;e.fillStyle=o,e.fillRect(t.x-4,t.y-4,u+8,a+8),e.fillStyle="#ffffff",e.fillText(p,t.x,t.y+a/2)}var Ua=11,ji=4,qd=`600 ${Ua}px system-ui, -apple-system, sans-serif`;function Yi(e,t,n){return e.map(o=>({x:o.x-t,y:o.y-n}))}function Zd(e,t,n,o,r,i){let s=String(o);e.font=qd;let l=e.measureText(s).width+ji*2,d=Ua+ji*2,c=t-l/2,p=n+i/2+2;e.fillStyle=r,e.fillRect(c,p,l,d),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(s,c+ji,p+d/2)}function Qd(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 Va(){let e=Kd(null),t=pr(()=>{let a=e.current;if(!a)return;let l=a.getContext("2d");l&&l.clearRect(0,0,a.width,a.height)},[]),n=pr((a,l,d)=>{var b;let c=e.current;if(!c)return;let p=c.getContext("2d");if(!p)return;let g=((b=a.status)!=null?b:a.captured?"in_flight":"pending")==="pending"||d?a.color:"#999999";switch(a.type){case"freehand":zi(p,a.points,g,a.strokeWidth);break;case"line":Wi(p,a.points,g,a.strokeWidth);break;case"rectangle":Gi(p,a.points,g,a.strokeWidth);break;case"circle":$i(p,a.points,g,a.strokeWidth);break;case"text":a.text&&a.points[0]&&Ja(p,a.points[0],a.text,g,a.fontSize,l,a.points[0].x);break}},[]),o=pr((a,l,d,c)=>{let p=e.current;if(!p||a.length<2)return;let u=p.getContext("2d");if(u)switch(l){case"freehand":zi(u,a,d,c);break;case"line":Wi(u,a,d,c);break;case"rectangle":Gi(u,a,d,c);break;case"circle":$i(u,a,d,c);break}},[]),r=pr((a,l)=>{let d=e.current;if(!d||a.points.length<2)return;let c=d.getContext("2d");if(c){if(c.fillStyle="#ffffff",c.strokeStyle=a.color,c.lineWidth=1.5,a.type==="line"){let p=a.points[0],u=a.points[a.points.length-1];[p,u].forEach(g=>{c.beginPath(),c.arc(g.x,g.y,l/2,0,Math.PI*2),c.fill(),c.stroke()});return}if(a.type==="circle"){let p=a.points[0],u=a.points[a.points.length-1],g=Math.min(p.x,u.x),b=Math.max(p.x,u.x),x=Math.min(p.y,u.y),A=Math.max(p.y,u.y),T=(g+b)/2,z=(x+A)/2;[{x:T,y:x},{x:T,y:A},{x:g,y:z},{x:b,y:z}].forEach(O=>{c.beginPath(),c.rect(O.x-l/2,O.y-l/2,l,l),c.fill(),c.stroke()});return}if(a.type==="rectangle"||a.type==="freehand"){let p,u,g,b;if(a.type==="freehand")p=Math.min(...a.points.map(A=>A.x)),u=Math.max(...a.points.map(A=>A.x)),g=Math.min(...a.points.map(A=>A.y)),b=Math.max(...a.points.map(A=>A.y));else{let A=a.points[0],T=a.points[a.points.length-1];p=Math.min(A.x,T.x),u=Math.max(A.x,T.x),g=Math.min(A.y,T.y),b=Math.max(A.y,T.y)}[{x:p,y:g},{x:u,y:g},{x:p,y:b},{x:u,y:b}].forEach(A=>{c.beginPath(),c.rect(A.x-l/2,A.y-l/2,l,l),c.fill(),c.stroke()})}}},[]),i=pr((a,l,d,c,p,u,g,b=0,x=0,A,T)=>{var z;if(t(),a.forEach(P=>{var re;let O=h(f({},P),{points:Yi(P.points,b,x)}),k=A==null?void 0:A.get(P.id),G=(re=T==null?void 0:T.has(P.id))!=null?re:!1;n(O,k,G)}),l.length>0){let P=Yi(l,b,x);o(P,d,c,p)}if(u&&u.length>0&&g){let P=e.current,O=P==null?void 0:P.getContext("2d");for(let k of u){let G=a.find(re=>re.id===k);if(G){let re=h(f({},G),{points:Yi(G.points,b,x)});if(r(re,g),O&&G.type!=="text"&&A&&!(G.groupId&&a.some(W=>W.groupId===G.groupId&&W.type==="text"))){let W=A.get(G.id);if(W!==void 0){let Q=Qd(re,g);if(Q){let ee=((z=G.status)!=null?z:G.captured?"in_flight":"pending")==="pending"?G.color:"#999999";Zd(O,Q.x,Q.y,W,ee,g)}}}}}}},[t,n,o,r]),s=pr(()=>{let a=e.current;if(!a)return;let l=window.devicePixelRatio||1;a.width=window.innerWidth*l,a.height=window.innerHeight*l;let d=a.getContext("2d");d&&d.scale(l,l)},[]);return{canvasRef:e,clearCanvas:t,drawAnnotation:n,drawCurrentPath:o,redrawAll:i,resizeCanvas:s}}import{useEffect as eu,useRef as tu}from"react";function Xa(){let e=tu({shift:!1,cmd:!1});return eu(()=>{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 nu}from"react";function Ka(e,t,n,o,r){nu(()=>{let i=s=>{if(e){if(e.linkedSelector)return;s.preventDefault(),s.stopPropagation();let l=s.deltaY>0?-2:2;t(d=>d?h(f({},d),{fontSize:Math.max(12,Math.min(72,d.fontSize+l))}):null);return}if(!n)return;s.preventDefault();let a=o.find(l=>l.id===n);if(a&&a.type==="text"&&!a.linkedSelector){let l=a.fontSize||12,d=s.deltaY>0?-2:2;r({type:"UPDATE_TEXT_SIZE",payload:{id:n,fontSize:l+d}})}};return window.addEventListener("wheel",i,{passive:!1}),()=>{window.removeEventListener("wheel",i)}},[n,e,o,r,t])}import{useCallback as ul,useEffect as li,useRef as pl,useState as _r}from"react";function qr(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==null?void 0:r.displayName)||(r==null?void 0: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 Ji(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==null?void 0:r.displayName)||(r==null?void 0: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 Zr(e){let t=e,n=new Set;for(;t&&!n.has(t);){if(n.add(t),t.stateNode instanceof Element)return t.stateNode;t.child?t=t.child:t=null}return null}function qa(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 Hn(e){if(e.id&&!e.id.startsWith("radix-")&&!e.id.startsWith(":"))return`#${CSS.escape(e.id)}`;let t=[],n=e;for(;n&&n!==document.documentElement;){let o=n.tagName.toLowerCase();if(n.id&&!n.id.startsWith("radix-")&&!n.id.startsWith(":")){t.unshift(`#${CSS.escape(n.id)}`);break}let r=Array.from(n.classList).filter(s=>!s.startsWith("_")&&s.length<30).slice(0,2);r.length>0&&(o+="."+r.map(s=>CSS.escape(s)).join("."));let i=n.parentElement;if(i){let s=Array.from(i.children).filter(a=>a.tagName===n.tagName);if(s.length>1){let a=s.indexOf(n)+1;o+=`:nth-of-type(${a})`}}t.unshift(o),n=i}return t.join(" > ")}function In(e){try{return document.querySelector(e)}catch(t){return null}}function Qr(e,t=0){var l;let n=Ji(e);if(n.length===0)return null;let o=n.map(d=>d.name),r=n.length-1,i=Math.max(0,Math.min(n.length-1,r-t)),s=n[i],a=(l=Zr(s.fiber))!=null?l:e;return{name:s.name,path:o,depthIndex:i,rootElement:a}}function Za(e,t){var i,s;let n=Ji(e),o=t.toLowerCase(),r=-1;for(let a=n.length-1;a>=0;a--){let l=n[a].name;if(l===t){let d=(i=Zr(n[a].fiber))!=null?i:e;return{name:t,path:n.map(c=>c.name),depthIndex:a,rootElement:d}}if(r===-1){let d=l.toLowerCase();(d.length>=4&&o.includes(d)||o.length>=4&&d.includes(o))&&(r=a)}}if(r>=0){let a=(s=Zr(n[r].fiber))!=null?s:e;return{name:t,path:n.map(l=>l.name),depthIndex:r,rootElement:a}}return null}function fr(e){let t=gr(),n=[],o=new Set,r=t.currentNode;for(;r=t.nextNode();){let i=Za(r,e);i&&!o.has(i.rootElement)&&(o.add(i.rootElement),n.push(i))}return n}function Ui(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),o=gr(),r=new Set,i=o.currentNode;for(;(i=o.nextNode())&&n.size>0;)for(let s of n){let a=Za(i,s);if(!a||r.has(a.rootElement))continue;r.add(a.rootElement);let l=a.rootElement.getBoundingClientRect();t.set(s,l.top+window.scrollY),n.delete(s);break}for(let s of n)t.set(s,1/0);return t}function gr(){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 Ln(e){let t={selector:qa(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=Qa(e);n&&n.length>0&&n.length<200&&(t.textContent=n);let o={};for(let s of e.attributes)s.name.startsWith("data-")&&(o[s.name]=s.value);Object.keys(o).length>0&&(t.dataAttributes=o);let r=qr(e);r&&(t.reactComponent=r.name);let i=ou(e);return i&&(t.context=i),t}function Qa(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function Go(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 ou(e){let t=e.parentElement,n=["section","article","nav","aside","header","footer","main"];for(;t&&t!==document.body;){let o=t.tagName.toLowerCase();if(n.includes(o)&&t.id)return`${o}#${t.id}`;if(t.id&&!t.id.startsWith("radix-")&&!t.id.startsWith(":"))return`${o}#${t.id}`;t=t.parentElement}return null}function el(e){let t=new Set,n=[],o=window.scrollX,r=window.scrollY,i=[{x:(e.minX+e.maxX)/2,y:(e.minY+e.maxY)/2},{x:e.minX,y:e.minY},{x:e.maxX,y:e.minY},{x:e.minX,y:e.maxY},{x:e.maxX,y:e.maxY}];for(let s of i){let a=s.x-o,l=s.y-r;if(a<0||l<0||a>window.innerWidth||l>window.innerHeight)continue;let d=Go(a,l);d&&!t.has(d)&&(t.add(d),n.push(Ln(d)))}return n.slice(0,3)}function Vi(e){if(e.length===0)return[];let t=e.map(o=>o.x),n=e.map(o=>o.y);return el({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function ln(e,t){return e.style.getPropertyValue(t)!==""}function ru(e,t=30){if(e<=0)return[];let n=[],o=gr(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let s=i,a=s.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let l=getComputedStyle(s);!ln(s,"padding-top")&&Math.abs((parseFloat(l.paddingTop)||0)-e)<r&&n.push({element:s,property:"padding-top"}),!ln(s,"padding-bottom")&&Math.abs((parseFloat(l.paddingBottom)||0)-e)<r&&n.length<t&&n.push({element:s,property:"padding-bottom"}),!ln(s,"padding-left")&&Math.abs((parseFloat(l.paddingLeft)||0)-e)<r&&n.length<t&&n.push({element:s,property:"padding-left"}),!ln(s,"padding-right")&&Math.abs((parseFloat(l.paddingRight)||0)-e)<r&&n.length<t&&n.push({element:s,property:"padding-right"}),!ln(s,"margin-top")&&Math.abs((parseFloat(l.marginTop)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-top"}),!ln(s,"margin-bottom")&&Math.abs((parseFloat(l.marginBottom)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-bottom"}),!ln(s,"margin-left")&&Math.abs((parseFloat(l.marginLeft)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-left"}),!ln(s,"margin-right")&&Math.abs((parseFloat(l.marginRight)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-right"});let d=l.display;if((d.includes("flex")||d.includes("grid"))&&n.length<t){let c=ln(s,"gap"),p=parseFloat(l.gap)||0,u=parseFloat(l.rowGap)||0,g=parseFloat(l.columnGap)||0;!c&&Math.abs(p-e)<r?n.push({element:s,property:"gap"}):!ln(s,"row-gap")&&Math.abs(u-e)<r?n.push({element:s,property:"row-gap"}):!ln(s,"column-gap")&&Math.abs(g-e)<r&&n.push({element:s,property:"column-gap"})}}return n}function Xi(e,t=30){if(e<=0)return[];let n=[],o=gr(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let s=i,a=s.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let l=getComputedStyle(s),d=parseFloat(l.borderTopWidth)||0,c=parseFloat(l.borderRightWidth)||0,p=parseFloat(l.borderBottomWidth)||0,u=parseFloat(l.borderLeftWidth)||0,g=s.clientWidth,b=s.clientHeight,x=parseFloat(l.paddingTop)||0;!ln(s,"padding-top")&&Math.abs(x-e)<r&&n.push({x:a.left+u,y:a.top+d,width:g,height:e,direction:"vertical",property:"padding-top"});let A=parseFloat(l.paddingBottom)||0;!ln(s,"padding-bottom")&&Math.abs(A-e)<r&&n.length<t&&n.push({x:a.left+u,y:a.top+d+b-e,width:g,height:e,direction:"vertical",property:"padding-bottom"});let T=parseFloat(l.paddingLeft)||0;!ln(s,"padding-left")&&Math.abs(T-e)<r&&n.length<t&&n.push({x:a.left+u,y:a.top+d,width:e,height:b,direction:"horizontal",property:"padding-left"});let z=parseFloat(l.paddingRight)||0;!ln(s,"padding-right")&&Math.abs(z-e)<r&&n.length<t&&n.push({x:a.left+u+g-e,y:a.top+d,width:e,height:b,direction:"horizontal",property:"padding-right"});let P=parseFloat(l.marginTop)||0;!ln(s,"margin-top")&&Math.abs(P-e)<r&&n.length<t&&n.push({x:a.left,y:a.top-e,width:a.width,height:e,direction:"vertical",property:"margin-top"});let O=parseFloat(l.marginBottom)||0;!ln(s,"margin-bottom")&&Math.abs(O-e)<r&&n.length<t&&n.push({x:a.left,y:a.bottom,width:a.width,height:e,direction:"vertical",property:"margin-bottom"});let k=parseFloat(l.marginLeft)||0;!ln(s,"margin-left")&&Math.abs(k-e)<r&&n.length<t&&n.push({x:a.left-e,y:a.top,width:e,height:a.height,direction:"horizontal",property:"margin-left"});let G=parseFloat(l.marginRight)||0;!ln(s,"margin-right")&&Math.abs(G-e)<r&&n.length<t&&n.push({x:a.right,y:a.top,width:e,height:a.height,direction:"horizontal",property:"margin-right"});let re=l.display;if((re.includes("flex")||re.includes("grid"))&&n.length<t&&!ln(s,"gap")){let W=Array.from(s.children).filter(Q=>{let N=getComputedStyle(Q);return N.display!=="none"&&N.position!=="absolute"&&N.position!=="fixed"});if(W.length>=2)for(let Q=0;Q<W.length-1&&n.length<t;Q++){let N=W[Q].getBoundingClientRect(),ee=W[Q+1].getBoundingClientRect(),M=ee.top-N.bottom;Math.abs(M-e)<r&&M>.5&&n.push({x:Math.min(N.left,ee.left),y:N.bottom,width:Math.max(N.right,ee.right)-Math.min(N.left,ee.left),height:M,direction:"vertical",property:"gap"});let Le=ee.left-N.right;Math.abs(Le-e)<r&&Le>.5&&n.push({x:N.right,y:Math.min(N.top,ee.top),width:Le,height:Math.max(N.bottom,ee.bottom)-Math.min(N.top,ee.top),direction:"horizontal",property:"gap"})}}}return n}function ei(e){return typeof e=="string"?{value:e}:e}var nl={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=nl[t];return n?n.includes(e):!1}function iu(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 su(e){var a,l;let t=e.lastIndexOf(":"),n=t>=0?e.slice(t+1):e,o=n.indexOf("-");if(o<0)return null;let r=n.slice(0,o),i={gap:"gap","gap-x":"column-gap","gap-y":"row-gap",p:"padding",pt:"padding-top",pb:"padding-bottom",pl:"padding-left",pr:"padding-right",px:"padding-left",py:"padding-top",m:"margin",mt:"margin-top",mb:"margin-bottom",ml:"margin-left",mr:"margin-right",mx:"margin-left",my:"margin-top"},s=n.slice(0,n.indexOf("-",o+1)>0?n.indexOf("-",o+1):o);return(l=(a=i[s])!=null?a:i[r])!=null?l:null}function Ki(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let r=[],i=gr(),s=i.currentNode;for(;(s=i.nextNode())&&r.length<t;){let a=s,l=a.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let d=a.className;if(typeof d=="string")for(let c of e.bindings){if(!iu(d,c))continue;let p=su(c);if(p&&!(e.property&&!tl(p,e.property))){r.push({element:a,property:p});break}}}return r}let o=ru(n,t*2);return e.property?o.filter(r=>tl(r.property,e.property)).slice(0,t):o.slice(0,t)}function qi(e,t=30){let n=Ki(e,t),o=[];for(let r of n){let i=r.element,s=i.getBoundingClientRect(),a=getComputedStyle(i),l=parseFloat(a.borderTopWidth)||0,d=parseFloat(a.borderRightWidth)||0,c=parseFloat(a.borderLeftWidth)||0,p=i.clientWidth,u=i.clientHeight;switch(r.property){case"padding-top":{let g=parseFloat(a.paddingTop)||0;o.push({x:s.left+c,y:s.top+l,width:p,height:g,direction:"vertical",property:r.property});break}case"padding-bottom":{let g=parseFloat(a.paddingBottom)||0;o.push({x:s.left+c,y:s.top+l+u-g,width:p,height:g,direction:"vertical",property:r.property});break}case"padding-left":{let g=parseFloat(a.paddingLeft)||0;o.push({x:s.left+c,y:s.top+l,width:g,height:u,direction:"horizontal",property:r.property});break}case"padding-right":{let g=parseFloat(a.paddingRight)||0;o.push({x:s.left+c+p-g,y:s.top+l,width:g,height:u,direction:"horizontal",property:r.property});break}case"margin-top":{let g=parseFloat(a.marginTop)||0;o.push({x:s.left,y:s.top-g,width:s.width,height:g,direction:"vertical",property:r.property});break}case"margin-bottom":{let g=parseFloat(a.marginBottom)||0;o.push({x:s.left,y:s.bottom,width:s.width,height:g,direction:"vertical",property:r.property});break}case"margin-left":{let g=parseFloat(a.marginLeft)||0;o.push({x:s.left-g,y:s.top,width:g,height:s.height,direction:"horizontal",property:r.property});break}case"margin-right":{let g=parseFloat(a.marginRight)||0;o.push({x:s.right,y:s.top,width:g,height:s.height,direction:"horizontal",property:r.property});break}case"gap":case"row-gap":case"column-gap":{let g=Array.from(i.children).filter(b=>{let x=getComputedStyle(b);return x.display!=="none"&&x.position!=="absolute"&&x.position!=="fixed"});for(let b=0;b<g.length-1&&o.length<t;b++){let x=g[b].getBoundingClientRect(),A=g[b+1].getBoundingClientRect(),T=A.top-x.bottom;T>.5&&o.push({x:Math.min(x.left,A.left),y:x.bottom,width:Math.max(x.right,A.right)-Math.min(x.left,A.left),height:T,direction:"vertical",property:"gap"});let z=A.left-x.right;z>.5&&o.push({x:x.right,y:Math.min(x.top,A.top),width:z,height:Math.max(x.bottom,A.bottom)-Math.min(x.top,A.top),direction:"horizontal",property:"gap"})}break}}}return o}function ol(e,t){let n=new Set,o=Or(t);for(let r of e){let i=il[r.property];if(!i)continue;let s=r.element.className;if(typeof s=="string")for(let a of i){let l=`${a}-${o}`;for(let d of s.split(/\s+/)){let c=d.lastIndexOf(":"),p=c>=0?d.slice(c+1):d;if(p===l){n.add(p);break}}}}return[...n]}function rl(e){let t=new Set;for(let n of e)for(let[o,r]of Object.entries(nl))if(r.includes(n.property)){t.add(o);break}if(t.size===1)return[...t][0]}function Zi(e,t,n){if(t===n)return e;let o=Or(t),r=Or(n);return e.map(i=>{let s=i.lastIndexOf("-");if(s<0)return i;let a=i.slice(0,s),l=i.slice(s+1);return l===o||l===`[${t}px]`?`${a}-${r}`:i})}var au={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 Or(e){var t;return(t=au[e])!=null?t:`[${e}px]`}var il={"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 lu(e,t,n,o){let r=il[t];if(!r)return null;let i=Or(n);for(let s of r){let a=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+s+"-(?:"+cu(i)+"|\\["+n+"px\\]))(?:\\s|$)"),l=e.match(a);if(l!=null&&l[1]){let d=Or(o),c=l[1].lastIndexOf(":"),p=c>=0?l[1].slice(0,c+1):"";return{matched:l[1],suggested:`${p}${s}-${d}`}}}return null}function cu(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function sl(e,t,n){let o=new Set,r=[];for(let i of e){let s=Hn(i.element),a=`${s}::${i.property}`;if(o.has(a))continue;o.add(a);let l=qr(i.element),d=i.element.className||"",c=lu(d,i.property,t,n);r.push({selector:s,reactComponent:l==null?void 0:l.name,className:d,property:i.property,matchedClass:c==null?void 0:c.matched,suggestedClass:c==null?void 0:c.suggested})}return r}function ti(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function ni(e,t){if(e instanceof HTMLElement){let o=e.style.getPropertyValue(t);if(o)return o}let n=t.replace(/-([a-z])/g,(o,r)=>r.toUpperCase());try{for(let o of document.styleSheets)try{let r=o.cssRules||o.rules;for(let i of r)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let s=i.style.getPropertyValue(t);if(s)return s;let a=i.style[n];if(a)return a}}catch(r){}}catch(o){}return null}function oi(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function jo(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function du(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(f({},n))}return t}function yo(e){let t=Array.from(e.children).filter(l=>{if(!(l instanceof HTMLElement))return!1;let d=window.getComputedStyle(l);return d.display!=="none"&&d.position!=="absolute"&&d.position!=="fixed"});if(t.length<2)return[];let n=[],o=e.getBoundingClientRect(),i=window.getComputedStyle(e).flexDirection,s=i==="column"||i==="column-reverse",a=6;for(let l=0;l<t.length-1;l++){let d=t[l].getBoundingClientRect(),c=t[l+1].getBoundingClientRect();if(c.left>d.right+.5&&n.push({axis:"column",x:d.right,y:o.top,w:c.left-d.right,h:o.height}),c.top>d.bottom+.5&&n.push({axis:"row",x:o.left,y:d.bottom,w:o.width,h:c.top-d.bottom}),!(c.left>d.right+.5)&&!(c.top>d.bottom+.5))if(s){let p=(d.bottom+c.top)/2;n.push({axis:"row",x:o.left,y:p-a/2,w:o.width,h:a})}else{let p=(d.right+c.left)/2;n.push({axis:"column",x:p-a/2,y:o.top,w:a,h:o.height})}}return du(n)}function Qi(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 mr(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 Yo(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 es(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function hr(e){var c,p;let t=document.createRange(),n=!1;for(let u of e.childNodes)u.nodeType===Node.TEXT_NODE&&(u.textContent||"").trim().length>0&&(n||(t.setStart(u,0),n=!0),t.setEnd(u,(p=(c=u.textContent)==null?void 0:c.length)!=null?p:0));if(!n)return null;let o=t.getBoundingClientRect(),r=window.getComputedStyle(e),i=parseFloat(r.fontSize)||16,s=parseFloat(r.lineHeight);isNaN(s)&&(s=i*1.2);let a=Math.max(1,t.getClientRects().length),l=Math.max(o.height,a*s),d=(l-o.height)/2;return new DOMRect(o.x,o.y-d,o.width,l)}function Br(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 Qe(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function al(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function ri(e){var t;for(let n of e){let o=In(n.selector);if(!o&&n.durableSelector&&(o=In(n.durableSelector),o)){let r=(t=n.selector.match(/\[data-pm="([^"]+)"\]/))==null?void 0:t[1];r&&o.setAttribute("data-pm",r)}if(o)for(let r of n.changes)Qe(o,r.property,r.modified)}}function ii(e){for(let t of e){let n=In(t.selector);if(n)for(let o of t.changes)al(n,o.property,o.original)}}function cl(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){cl(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&uu(r.style,t,n,o)}}}function uu(e,t,n,o){for(let r=0;r<e.length;r++){let i=e[r];if(i!=null&&i.startsWith("--")){if(n.has(i))continue;n.add(i);let s=t.getPropertyValue(i).trim();dl(s)&&o.push({name:i,value:s,usage:`var(${i})`})}}}var si=null,pu=5e3;function ts(){if(si&&Date.now()-si.timestamp<pu)return si.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{cl(i.cssRules||i.rules,n,t,e)}catch(s){}}catch(i){}let o=document.documentElement.style;for(let i=0;i<o.length;i++){let s=o[i];if(s!=null&&s.startsWith("--")&&!t.has(s)){t.add(s);let a=n.getPropertyValue(s).trim();dl(a)&&e.push({name:s,value:a,usage:`var(${s})`})}}let r=e.sort((i,s)=>i.name.localeCompare(s.name));return si={variables:r,timestamp:Date.now()},r}function dl(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 yr(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 Dr(e,t){if(!e)return null;let n=ll(e);if(!n)return null;for(let o of t){let r=ll(o.value);if(r&&n===r)return o}return null}function ll(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 s=Math.round(i);return`oklch(${o} ${r} ${s})`}}if(t.startsWith("rgb")){let n=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(n)return`rgb(${n[1]},${n[2]},${n[3]})`}return t.startsWith("#")?t.length===4?`#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`:t.slice(0,7):t}import{Fragment as Jo,jsx as yt,jsxs as to}from"react/jsx-runtime";var Jn=22,ko=12,fu=3,gu=250,ai=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],mu=3e3;function hu(s){var a=s,{left:e,top:t,avoidBottom:n,style:o,children:r}=a,i=jn(a,["left","top","avoidBottom","style","children"]);let l=e+ko,d=t+ko,c=n!==void 0?`${n}px`:"100vh";return yt("div",h(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:e,top:t,padding:ko},o),children:yt("div",{style:{transform:`translate(min(0px, calc(100vw - ${l}px - 100%)), min(0px, calc(${c} - ${d}px - 100%)))`},children:r})}))}function fl({annotations:e,supersededAnnotations:t,inFlightIds:n,activeIds:o,queuePositions:r,scrollX:i,scrollY:s,annotationGroupMap:a,onViewThread:l,onSelectAnnotation:d,onHoverAnnotation:c,canvasRef:p}){var oe,W,Q,N,ee,M,Le;let[u,g]=_r(0),[b,x]=_r(()=>Math.floor(Math.random()*ai.length)),A=!!(n&&n.size>0);li(()=>{if(!A)return;let V=setInterval(()=>{g(D=>(D+1)%fu)},gu),fe=setInterval(()=>{x(D=>(D+1)%ai.length)},mu);return()=>{clearInterval(V),clearInterval(fe)}},[A]);let T=[];for(let V of e){if(V.type!=="text"||!V.text||!V.points[0]||t.has(V))continue;let fe=V.groupId?e.filter(he=>he.groupId===V.groupId):[V],D=(oe=V.status)!=null?oe:"pending",ae=fe.reduce((he,te)=>{var ie;return he+((ie=te.replyCount)!=null?ie:0)},0),I=he=>he==="resolved"&&ae===0,pe=!!(n&&(n.has(V.id)||fe.some(he=>n.has(he.id))))||V.status==="in_flight"||fe.some(he=>he.status==="in_flight")||I(V.status)||fe.some(he=>I(he.status)),me=fe.some(he=>{var te;return he.status==="resolved"&&((te=he.replyCount)!=null?te:0)>0||he.status==="needs_review"}),Fe=fe.some(he=>he.threadId);if(!pe&&D!=="resolved"&&D!=="needs_review"&&!me&&!Fe)continue;let we=V.threadId||((W=fe.find(he=>he.threadId))==null?void 0:W.threadId),Je=D==="needs_review"||fe.some(he=>he.status==="needs_review"),Re=V.points[0],Ce=V.fontSize||12,at=Ce*1.4,gt=a.get(V.id),bt=V.text.replace(/\n/g," "),Yt=gt!==void 0?gt+". "+bt:bt,K=(N=(Q=p==null?void 0:p.current)==null?void 0:Q.getContext("2d"))!=null?N:document.createElement("canvas").getContext("2d");if(!K)continue;K.font=`${Ce}px ${Qt}`;let X=Re.x-i,Te=dr(X),Oe=ur(K,Yt,Te),Xe=K.measureText(Oe).width,Pe=pe&&!!o&&!o.has(V.id)&&!fe.some(he=>o.has(he.id));T.push({id:V.id,threadId:we,linkedSelector:V.linkedSelector||((ee=fe.find(he=>he.linkedSelector))==null?void 0:ee.linkedSelector),x:Re.x+Xe+4,y:Re.y-4,size:at+8,color:V.color,isInFlight:pe,isQueued:Pe,queuePosition:void 0,isNeedsReview:Je,replyCount:ae})}let z=T.filter(V=>V.isQueued);if(z.length>0&&z.forEach((V,fe)=>{var D;V.queuePosition=(D=r==null?void 0:r.get(V.id))!=null?D:`(${fe+1}/${z.length})`}),T.length===0)return null;let P=2,O=(Le=(M=p==null?void 0:p.current)==null?void 0:M.getContext("2d"))!=null?Le:document.createElement("canvas").getContext("2d"),k=T.map(V=>{var me;let fe;V.isQueued?fe=V.queuePosition?`queued ${V.queuePosition}`:"queued":V.isInFlight?fe=(me=ai[b])!=null?me:"thinking":V.replyCount>0?fe=`${V.replyCount} ${V.replyCount===1?"reply":"replies"}`:fe="Cancelled";let D=!V.isQueued,ae=D?11:0,I=D?4:0,pe=fe.length*7.2;return O&&(O.font=`12px ${Qt}`,pe=O.measureText(fe).width),4+ae+I+pe+4}),G=typeof window!="undefined"?window.innerHeight:9999,re=[];for(let V=0;V<T.length;V++){let fe=T[V].y-s,D=Math.min(fe,G-Jn),ae=D+Jn,pe=T[V].x-i;for(let me=0;me<V;me++){let Fe=T[me].y-s,we=Math.min(Fe,G-Jn),Je=we+Jn;if(!(D<Je&&ae>we))continue;let Ce=re[me]+k[me];pe<Ce+P&&(pe=Ce+P)}re.push(pe)}return yt(Jo,{children:T.map((V,fe)=>{let D=!!V.threadId;return yt(hu,{left:re[fe]-ko,top:V.y-s-ko,onMouseDown:D?ae=>ae.stopPropagation():void 0,onClick:D?ae=>{if(ae.stopPropagation(),d==null||d(V.id),l==null||l(V.threadId),V.linkedSelector)try{let I=document.querySelector(V.linkedSelector);if(I){let pe=I.getBoundingClientRect();(pe.bottom<0||pe.top>window.innerHeight)&&I.scrollIntoView({behavior:"smooth",block:"center"})}}catch(I){}}:void 0,onMouseEnter:c?()=>c(V.id):void 0,onMouseLeave:c?()=>c(null):void 0,style:{pointerEvents:D?"auto":"none",cursor:D?"pointer":void 0,zIndex:9999},children:yt("div",{"data-devtools":"annotation-badge",style:{height:V.size,display:"flex",alignItems:"center",backgroundColor:V.color,fontFamily:Qt,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:V.isQueued?to("span",{style:{opacity:.5,color:"inherit"},children:["queued",V.queuePosition?` ${V.queuePosition}`:""]}):V.isInFlight?to(Jo,{children:[yt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:u===1?to(Jo,{children:[yt("circle",{cx:"7",cy:"7",r:"2"}),yt("circle",{cx:"17",cy:"7",r:"2"}),yt("circle",{cx:"7",cy:"17",r:"2"}),yt("circle",{cx:"17",cy:"17",r:"2"})]}):to(Jo,{children:[yt("circle",{cx:"12",cy:"6",r:"2"}),yt("circle",{cx:"6",cy:"12",r:"2"}),yt("circle",{cx:"18",cy:"12",r:"2"}),yt("circle",{cx:"12",cy:"18",r:"2"})]})}),yt("span",{style:{opacity:.7,color:"inherit"},children:ai[b]})]}):to(Jo,{children:[V.isNeedsReview?yt("span",{style:{fontWeight:700,color:"inherit"},children:"?"}):yt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:yt("polyline",{points:"4 12 10 18 20 6"})}),yt("span",{style:{opacity:.7,color:"inherit"},children:V.replyCount>0?`${V.replyCount} ${V.replyCount===1?"reply":"replies"}`:"Cancelled"})]})})},V.id)})})}function ns({inFlightSelectorColors:e,animated:t=!0}){let[n,o]=_r([]);return li(()=>{if(e.size===0){o([]);return}let r=null,i=()=>{let l=[];for(let[d,c]of e){let p=In(d);if(!p)continue;let u=p.getBoundingClientRect();l.push({selector:d,top:u.top,left:u.left,width:u.width,height:u.height,color:c})}o(l)},s=()=>{r&&cancelAnimationFrame(r),r=requestAnimationFrame(i)};i(),window.addEventListener("scroll",s,!0),window.addEventListener("resize",s,!0);let a=new MutationObserver(s);return a.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s,!0),a.disconnect(),r&&cancelAnimationFrame(r)}},[e]),n.length===0?null:to(Jo,{children:[t&&yt("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(r=>yt("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:yt("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:yt("rect",{x:"0.5",y:"0.5",width:Math.max(0,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 gl({annotations:e,supersededAnnotations:t,scrollX:n,scrollY:o,onReply:r,annotationGroupMap:i,canvasRef:s,onHoverAnnotation:a}){let l=e.filter(p=>t.has(p)?!1:p.status==="waiting_input"&&p.question&&p.threadId);if(l.length===0)return null;let d=new Set,c=[];for(let p of l){if(!p.threadId||d.has(p.threadId))continue;d.add(p.threadId);let u=p.type==="text"?p:e.find(g=>g.groupId&&g.groupId===p.groupId&&g.type==="text")||p;if(u.type==="text"&&u.text&&u.points[0]){let g=u.points[0],b=u.fontSize||12,x=b*1.4,A=i.get(u.id),T=u.text.replace(/\n/g," "),z=A!==void 0?A+". "+T:T,O=document.createElement("canvas").getContext("2d");if(!O)continue;O.font=`${b}px ${Qt}`;let k=g.x-n,G=dr(k),re=ur(O,z,G),oe=O.measureText(re).width;c.push({annotation:p,x:g.x+oe+4,y:g.y-4,size:x+8})}}return c.length===0?null:yt(Jo,{children:c.map(({annotation:p,x:u,y:g,size:b})=>yt(yu,{annotation:p,x:u-n,y:g-o,size:b,onReply:r,onHoverAnnotation:a},`question-${p.threadId}`))})}function yu({annotation:e,x:t,y:n,size:o,onReply:r,onHoverAnnotation:i}){let[s,a]=_r(!1),[l,d]=_r(""),c=pl(null),p=pl(null);li(()=>{s&&c.current&&c.current.focus()},[s]),li(()=>{if(!s)return;let A=z=>{p.current&&!z.composedPath().includes(p.current)&&a(!1)},T=z=>{z.key==="Escape"&&a(!1)};return document.addEventListener("mousedown",A),document.addEventListener("keydown",T),()=>{document.removeEventListener("mousedown",A),document.removeEventListener("keydown",T)}},[s]);let u=ul(()=>{!l.trim()||!e.threadId||(r(e.threadId,l.trim()),d(""),a(!1))},[l,e.threadId,r]),g=ul(A=>{A.key==="Enter"&&(A.metaKey||A.ctrlKey)&&(A.preventDefault(),u())},[u]),b=s?t:t-ko,x=s?n:n-ko;return to("div",{ref:p,"data-devtools":"question-badge",onMouseEnter:i?()=>i(e.id):void 0,onMouseLeave:i?()=>i(null):void 0,style:{position:"fixed",left:`max(0px, ${b}px)`,top:`max(0px, ${x}px)`,padding:s?0:ko,transform:`translate(min(0px, calc(100vw - max(0px, ${b}px) - 100%)), min(0px, calc(100vh - max(0px, ${x}px) - 100%)))`,zIndex:s?10002:9999,pointerEvents:"auto",cursor:s?void 0:"pointer"},children:[!s&&to("div",{onClick:()=>a(!0),style:{height:o,display:"flex",alignItems:"center",backgroundColor:e.color,padding:`0 ${4}px`,gap:4,fontFamily:Qt,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[to("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",children:[yt("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),yt("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),yt("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),yt("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]}),yt("span",{style:{opacity:.7},children:"reply?"})]}),s&&to("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#eaeaea",fontFamily:Qt,fontSize:12,color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)"},children:[yt("div",{style:{padding:`${6}px ${8}px`,lineHeight:1.4},children:e.question}),to("div",{style:{padding:`0 ${4}px ${4}px`},children:[yt("textarea",{ref:c,value:l,onChange:A=>d(A.target.value),onKeyDown:g,placeholder:"Type your reply...",style:{width:"100%",minHeight:40,padding:4,fontSize:12,fontFamily:Qt,backgroundColor:"rgba(0, 0, 0, 0.04)",color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)",borderRadius:0,outline:"none",resize:"vertical",lineHeight:1.4,boxSizing:"border-box"}}),yt("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:4},children:yt("button",{onClick:u,disabled:!l.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:Qt,fontWeight:600,backgroundColor:l.trim()?e.color:"rgba(0,0,0,0.1)",color:l.trim()?"#ffffff":"rgba(0,0,0,0.3)",border:"none",cursor:l.trim()?"pointer":"default"},children:"Send \u2318\u23CE"})})]})]})]})}function ci(e){var i;let t=new Set,n=new Map;for(let s of e){if(!s.linkedSelector)continue;let a=n.get(s.linkedSelector)||[];a.push(s),n.set(s.linkedSelector,a)}let o=new Set,r=new Set;for(let s of n.values()){if(s.length<=1){(i=s[0])!=null&&i.groupId&&r.add(s[0].groupId);continue}s.sort((l,d)=>d.timestamp-l.timestamp);let a=s[0];a.groupId&&r.add(a.groupId);for(let l=1;l<s.length;l++){let d=s[l];t.add(d),d.groupId&&o.add(d.groupId)}}for(let s of e)s.groupId&&o.has(s.groupId)&&!r.has(s.groupId)&&t.add(s);return t}import{useEffect as ml,useLayoutEffect as bu,useState as hl}from"react";import{jsx as os,jsxs as bl}from"react/jsx-runtime";function xu(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}var yl=["top-left","top-right","bottom-right","bottom-left"];function xl({element:e,radius:t,accentColor:n,hoveredCorner:o,draggingCorner:r,cursorViewport:i}){let[s,a]=hl(null),[l,d]=hl(!1);if(ml(()=>{let T=O=>{(O.key==="Meta"||O.key==="Control")&&d(!0)},z=O=>{(O.key==="Meta"||O.key==="Control")&&d(!1)},P=()=>d(!1);return window.addEventListener("keydown",T,!0),window.addEventListener("keyup",z,!0),window.addEventListener("blur",P),()=>{window.removeEventListener("keydown",T,!0),window.removeEventListener("keyup",z,!0),window.removeEventListener("blur",P)}},[]),ml(()=>{if(!e){a(null);return}let T=()=>{a(e.getBoundingClientRect())};return T(),window.addEventListener("scroll",T,{passive:!0}),window.addEventListener("resize",T,{passive:!0}),()=>{window.removeEventListener("scroll",T),window.removeEventListener("resize",T)}},[e]),bu(()=>{e&&a(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!s)return null;let c=s.width,p=s.height,u=xu(n,.2),g={"top-left":{x:0,y:t["top-left"]},"top-right":{x:c,y:t["top-right"]},"bottom-right":{x:c,y:p-t["bottom-right"]},"bottom-left":{x:0,y:p-t["bottom-left"]}},b=new Set,x=r!=null?r:o;if(x)if(l)b.add(x);else for(let T of yl)b.add(T);let A={position:"fixed",top:s.top,left:s.left,width:c,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"};return bl("div",{"data-devtools":"border-radius-handles",style:A,children:[bl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${p}`,children:[os("rect",{x:"0.5",y:"0.5",width:Math.max(0,c-1),height:Math.max(0,p-1),fill:"none",stroke:u,strokeWidth:"1"}),yl.map(T=>{let z=g[T],P=b.has(T);return os("circle",{cx:z.x,cy:z.y,r:T===(r!=null?r:o)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:T===(r!=null?r:o)?4:2,paintOrder:"stroke"},T)})]}),i&&x&&(()=>{let T=Math.round(t[x]);return os("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:T})})()]})}import{useEffect as vu,useState as Su}from"react";function Uo(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);if(n)return`oklch(${n[1]} / ${t})`;let o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(o){let r=parseInt(o[1],16),i=parseInt(o[2],16),s=parseInt(o[3],16);return`rgba(${r}, ${i}, ${s}, ${t})`}return`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}import{Fragment as wu,jsx as rs,jsxs as Nr}from"react/jsx-runtime";function lo({element:e,isSelected:t=!1,elementInfo:n,color:o="#3b82f6",annotationNumber:r,changeCount:i,hideTooltip:s=!1}){let[a,l]=Su(null);if(vu(()=>{if(!e){l(null);return}let k=()=>{let G=e.getBoundingClientRect();l(G)};return k(),window.addEventListener("scroll",k,{passive:!0}),window.addEventListener("resize",k,{passive:!0}),()=>{window.removeEventListener("scroll",k),window.removeEventListener("resize",k)}},[e]),!a||!e)return null;let d={position:"fixed",top:a.top,left:a.left,width:a.width,height:a.height,pointerEvents:"none",zIndex:9996,backgroundColor:Uo(o,.05),overflow:"visible"},c=e.tagName.toLowerCase(),p=e.id?`#${e.id}`:"",u=e.classList.length>0?"."+Array.from(e.classList).slice(0,2).join("."):"",g=n==null?void 0:n.reactComponent,b=g?`<${g}> ${c}${p}${u}`:`${c}${p}${u}`,x=22,A=a.height>=window.innerHeight,T=A?0:a.top>=x?a.top-x:a.bottom,z=A?{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:T,left:a.left,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:o,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400},O=!s&&Nr("div",{"data-devtools":"tooltip",style:z,children:[r!==void 0&&Nr("span",{children:[r,"."]}),rs("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:b}),i!==void 0&&i>0&&Nr("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return Nr(wu,{children:[Nr("div",{"data-devtools":"highlight",style:d,children:[rs("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:rs("rect",f({x:"0.5",y:"0.5",width:Math.max(0,a.width-1),height:Math.max(0,a.height-1),fill:"none",stroke:o,strokeWidth:"1"},!t&&{strokeDasharray:"2 4"}))}),A&&O]}),!A&&O]})}import{useEffect as vl,useLayoutEffect as Cu,useState as is}from"react";import{jsx as bo,jsxs as as}from"react/jsx-runtime";function ss(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function ls({element:e,gap:t,accentColor:n,hoveredAxis:o,draggingAxis:r,cursorViewport:i,isAutoGap:s=!1,refreshKey:a=0}){let[l,d]=is(null),[c,p]=is([]),[u,g]=is(!1);if(vl(()=>{let oe=N=>{(N.key==="Meta"||N.key==="Control")&&g(!0)},W=N=>{(N.key==="Meta"||N.key==="Control")&&g(!1)},Q=()=>g(!1);return window.addEventListener("keydown",oe,!0),window.addEventListener("keyup",W,!0),window.addEventListener("blur",Q),()=>{window.removeEventListener("keydown",oe,!0),window.removeEventListener("keyup",W,!0),window.removeEventListener("blur",Q)}},[]),vl(()=>{if(!e){d(null),p([]);return}let oe=()=>{d(e.getBoundingClientRect()),p(yo(e))};return oe(),window.addEventListener("scroll",oe,{passive:!0}),window.addEventListener("resize",oe,{passive:!0}),()=>{window.removeEventListener("scroll",oe),window.removeEventListener("resize",oe)}},[e]),Cu(()=>{e&&(d(e.getBoundingClientRect()),p(yo(e)))},[e,t.row,t.column,a]),!l||c.length===0)return null;let b=l.width,x=l.height,A="pm-gap-stripe-pattern",T=ss(n,.25),z=ss(n,.1),P=ss(n,.2),O=8,k=2,G={position:"fixed",top:l.top,left:l.left,width:b,height:x,pointerEvents:"none",zIndex:9996,overflow:"visible"},re=r!=null?r:o;return as("div",{"data-devtools":"gap-handles",style:G,children:[as("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${b} ${x}`,children:[bo("defs",{children:bo("pattern",{id:A,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:bo("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:T,strokeWidth:"1.5"})})}),bo("rect",{x:"0.5",y:"0.5",width:Math.max(0,b-1),height:Math.max(0,x-1),fill:"none",stroke:P,strokeWidth:"1"}),c.map((oe,W)=>{let Q=oe.x-l.left,N=oe.y-l.top,ee=oe.w,M=oe.h,Le=u?oe.axis===re:!0;return(oe.axis==="row"?t.row:t.column)===0?null:as("g",{opacity:Le?1:.6,children:[bo("rect",{x:Q,y:N,width:ee,height:M,fill:z}),bo("rect",{x:Q,y:N,width:ee,height:M,fill:`url(#${A})`})]},W)}),re&&(()=>{let oe=c.filter(me=>me.axis===re);if(oe.length===0)return null;let W=oe[0];if(i&&oe.length>1){let me=1/0;for(let Fe of oe){let we=Fe.x+Fe.w/2,Je=Fe.y+Fe.h/2,Re=Math.abs(i.x-we)+Math.abs(i.y-Je);Re<me&&(me=Re,W=Fe)}}let Q=W.x-l.left,N=W.y-l.top,ee=W.w,M=W.h,Le=Q+ee/2,V=N+M/2;if(s)return bo("circle",{cx:Le,cy:V,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let fe=re==="column",D=fe?k:O,ae=fe?O:k,I=Le-D/2,pe=V-ae/2;return bo("rect",{x:I,y:pe,width:D,height:ae,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&re&&(()=>{let oe=s?"auto":String(Math.round(re==="row"?t.row:t.column));return bo("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:oe})})()]})}import{useCallback as Iu,useEffect as Lu,useState as Ru}from"react";import{useEffect as Eu,useState as Sl}from"react";var ku=3,Tu=250,cs=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Mu=3e3;function wl(e){let[t,n]=Sl(0),[o,r]=Sl(()=>Math.floor(Math.random()*cs.length));return Eu(()=>{if(!e)return;let i=setInterval(()=>n(a=>(a+1)%ku),Tu),s=setInterval(()=>r(a=>(a+1)%cs.length),Mu);return()=>{clearInterval(i),clearInterval(s)}},[e]),{charIndex:t,word:cs[o]}}import{Fragment as ds,jsx as Fn,jsxs as br}from"react/jsx-runtime";function Au(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 Cl=22,us=12;function Pu(s){var a=s,{left:e,top:t,avoidBottom:n,style:o,children:r}=a,i=jn(a,["left","top","avoidBottom","style","children"]);let l=n!==void 0?`${n}px`:"100vh";return Fn("div",h(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:us,transform:`translate(min(0px, calc(100vw - max(0px, ${e}px) - 100%)), min(0px, calc(${l} - max(0px, ${t}px) - 100%)))`},o),children:r}))}function El({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:o,dispatch:r,inFlightSelectors:i,toolbarRef:s,onHoverSelector:a}){var z;let[l,d]=Ru([]),c=i&&i.size>0,{charIndex:p,word:u}=wl(!!c);Lu(()=>{if(t){d([]);return}let P=null,O=()=>{let re=[];e.forEach((oe,W)=>{let Q=In(oe.selector);if(!Q)return;let N=Q.getBoundingClientRect();re.push({selector:oe.selector,modIndex:W,top:N.top>=Cl?N.top-Cl:N.bottom,left:N.left,label:Au(oe),changeCount:oe.changes.length,annotationNumber:o+W+1})}),d(re)},k=()=>{P&&cancelAnimationFrame(P),P=requestAnimationFrame(O)};O(),window.addEventListener("scroll",k,!0),window.addEventListener("resize",k,!0);let G=new MutationObserver(k);return G.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",k),document.fonts.ready.then(k),()=>{window.removeEventListener("scroll",k,!0),window.removeEventListener("resize",k,!0),window.removeEventListener("load",k),G.disconnect(),P&&cancelAnimationFrame(P)}},[e,t,o]);let g=Iu(P=>{let O=e[P];if(!O)return;let k=In(O.selector);k&&(r({type:"SELECT_ANNOTATION",payload:{id:null}}),r({type:"SET_TOOL",payload:"inspector"}),r({type:"SELECT_ELEMENT",payload:{el:k,info:O.element}}))},[e,r]);if(l.length===0)return null;let b=(z=s==null?void 0:s.current)==null?void 0:z.getBoundingClientRect(),x=b?b.top-8:void 0,A={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},T={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return Fn(ds,{children:l.map(P=>{let O=i==null?void 0:i.has(P.selector);return Fn(Pu,{left:P.left-us,top:P.top-us,avoidBottom:x,onClick:()=>g(P.modIndex),onMouseEnter:a?()=>a(P.selector):void 0,onMouseLeave:a?()=>a(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:br("div",{"data-devtools":"badge",style:h(f({},A),{backgroundColor:O?"#999999":n}),children:[br("span",{children:[P.annotationNumber,"."]}),Fn("span",{style:T,children:P.label}),br("span",{style:{opacity:.8},children:["(",P.changeCount," ",P.changeCount===1?"change":"changes",")"]}),O&&br("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[Fn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:p===1?br(ds,{children:[Fn("circle",{cx:"7",cy:"7",r:"2"}),Fn("circle",{cx:"17",cy:"7",r:"2"}),Fn("circle",{cx:"7",cy:"17",r:"2"}),Fn("circle",{cx:"17",cy:"17",r:"2"})]}):br(ds,{children:[Fn("circle",{cx:"12",cy:"6",r:"2"}),Fn("circle",{cx:"6",cy:"12",r:"2"}),Fn("circle",{cx:"18",cy:"12",r:"2"}),Fn("circle",{cx:"12",cy:"18",r:"2"})]})}),u]})]})},P.selector)})})}import{useEffect as Ou,useState as Bu}from"react";import{Fragment as _u,jsx as kl}from"react/jsx-runtime";function Du(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 Tl({styleModifications:e,accentColor:t}){let[n,o]=Bu([]);if(Ou(()=>{let i=null,s=()=>{let d=[];for(let c of e){let p=In(c.selector);if(!p)continue;let u=p.getBoundingClientRect();if(u.width===0&&u.height===0)continue;let g=Yo(p);d.push({selector:c.selector,top:u.top,left:u.left,width:u.width,height:u.height,borderRadius:`${g["top-left"]}px ${g["top-right"]}px ${g["bottom-right"]}px ${g["bottom-left"]}px`})}o(d)},a=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(s)};s(),window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a,{passive:!0});let l=new MutationObserver(a);return l.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",a),window.removeEventListener("resize",a),l.disconnect(),i&&cancelAnimationFrame(i)}},[e]),n.length===0)return null;let r=Du(t,.2);return kl(_u,{children:n.map(i=>{let s={position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${r}`,borderRadius:i.borderRadius,boxSizing:"border-box"};return kl("div",{"data-devtools":"mod-border",style:s},i.selector)})})}import{useEffect as Ml,useLayoutEffect as Nu,useState as Il}from"react";import{jsx as To,jsxs as fs}from"react/jsx-runtime";function ps(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}var Hu={top:"bottom",bottom:"top",left:"right",right:"left"};function gs({element:e,padding:t,accentColor:n,hoveredSide:o,draggingSide:r,cursorViewport:i,refreshKey:s}){let[a,l]=Il(null),[d,c]=Il(!1);if(Ml(()=>{let ee=V=>{(V.key==="Meta"||V.key==="Control")&&c(!0)},M=V=>{(V.key==="Meta"||V.key==="Control")&&c(!1)},Le=()=>c(!1);return window.addEventListener("keydown",ee,!0),window.addEventListener("keyup",M,!0),window.addEventListener("blur",Le),()=>{window.removeEventListener("keydown",ee,!0),window.removeEventListener("keyup",M,!0),window.removeEventListener("blur",Le)}},[]),Ml(()=>{if(!e){l(null);return}let ee=()=>{l(e.getBoundingClientRect())};return ee(),window.addEventListener("scroll",ee,{passive:!0}),window.addEventListener("resize",ee,{passive:!0}),()=>{window.removeEventListener("scroll",ee),window.removeEventListener("resize",ee)}},[e]),Nu(()=>{e&&l(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,s]),!a)return null;let p=a.width,u=a.height,{top:g,right:b,bottom:x,left:A}=t,T="pm-stripe-pattern",z=ps(n,.25),P=ps(n,.1),O=ps(n,.2),k=8,G=2,re={position:"fixed",top:a.top,left:a.left,width:p,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"},oe=["top","right","bottom","left"],W={top:`0,0 ${p},0 ${p-b},${g} ${A},${g}`,right:`${p},0 ${p},${u} ${p-b},${u-x} ${p-b},${g}`,bottom:`0,${u} ${A},${u-x} ${p-b},${u-x} ${p},${u}`,left:`0,0 ${A},${g} ${A},${u-x} 0,${u}`},Q={top:{x:p/2-k/2,y:g/2-G/2,w:k,h:G},bottom:{x:p/2-k/2,y:u-x/2-G/2,w:k,h:G},left:{x:A/2-G/2,y:u/2-k/2,w:G,h:k},right:{x:p-b/2-G/2,y:u/2-k/2,w:G,h:k}},N=new Set;return r?N.add(r):o&&(N.add(o),d||N.add(Hu[o])),fs("div",{"data-devtools":"padding-handles",style:re,children:[fs("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${p} ${u}`,children:[To("defs",{children:To("pattern",{id:T,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:To("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:z,strokeWidth:"1.5"})})}),To("rect",{x:"0.5",y:"0.5",width:Math.max(0,p-1),height:Math.max(0,u-1),fill:"none",stroke:O,strokeWidth:"1"}),oe.map(ee=>{if(t[ee]<=0)return null;let Le=N.has(ee);return fs("g",{opacity:Le?1:.6,children:[To("polygon",{points:W[ee],fill:P}),To("polygon",{points:W[ee],fill:`url(#${T})`})]},ee)}),oe.map(ee=>{let M=Q[ee],Le=N.has(ee);return To("rect",{x:M.x,y:M.y,width:M.w,height:M.h,fill:n,stroke:"#ffffff",strokeWidth:Le?4:2,paintOrder:"stroke"},`handle-${ee}`)})]}),i&&(o||r)&&(()=>{let ee=r!=null?r:o,M=Math.round(t[ee]);return To("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:M})})()]})}import{useCallback as co,useEffect as Vn,useMemo as yi,useRef as Dn,useState as yn}from"react";import{Check as hi,ChevronDown as ws,MoveHorizontal as $l,Shrink as cp}from"lucide-react";var Fu="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",xr={borderWidth:3,borderStyle:"solid",borderImage:`url("${Fu}") 4 / 1.9 / 0 round`};function di({color:e="rgb(0,0,0)",animated:t=!1}={}){let n=`<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='${e}' stroke-width='.75'/></svg>`;return f({position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(n)}")`,backgroundSize:"5px 5px",WebkitMask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",WebkitMaskComposite:"xor",mask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",maskComposite:"exclude",pointerEvents:"none"},t?{animation:"popmelt-border-march 0.8s linear infinite"}:{})}var ui={"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 vr(e){var t,n;return(n=(t=ui[e])==null?void 0:t[0])!=null?n:"px"}function Mo(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function pi(e,t,n,o){let r=e.trim();if(!r)return"";let i=r.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i);if(i)return`${parseFloat(i[1])}${i[2].toLowerCase()}`;let s=parseFloat(r);if(!isNaN(s)){if(o){let{unit:a}=Mo(n);return`${s}${a||vr(t)}`}return`${s}${vr(t)}`}return r}function ms(e,t){if(!t||t==="px")return e;if(t==="rem"){let n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return Math.round(e/n*1e3)/1e3}return e}import{useCallback as $u,useEffect as zu,useRef as Ll,useState as Wu}from"react";import{Plus as Rl,X as Gu}from"lucide-react";import{jsx as Bn,jsxs as Vo}from"react/jsx-runtime";var fi=[{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 ju(e){if(!e||e==="none")return[];let t=[],n=/([\w-]+)\(([^)]+)\)/g,o;for(;(o=n.exec(e))!==null;){let r=o[1],i=o[2],s=parseFloat(i);isNaN(s)||t.push({name:r,value:s})}return t}function hs(e){return e.length===0?"none":e.map(t=>{var r;let n=fi.find(i=>i.name===t.name),o=(r=n==null?void 0:n.unit)!=null?r:"";return`${t.name}(${t.value}${o})`}).join(" ")}function Al({value:e,onChange:t,accentColor:n,modified:o,panelContentRef:r}){let i=ju(e),[s,a]=Wu(!1),l=Ll(null),d=Ll(null);zu(()=>{if(!s)return;let P=O=>{l.current&&!O.composedPath().includes(l.current)&&a(!1)};return document.addEventListener("mousedown",P,!0),()=>document.removeEventListener("mousedown",P,!0)},[s]);let c=fi.filter(P=>!i.some(O=>O.name===P.name)),p=P=>{let O=[...i,{name:P.name,value:P.defaultValue}];t(hs(O)),a(!1)},u=P=>{let O=i.filter((k,G)=>G!==P);t(hs(O))},g=(P,O)=>{let k=i.map((G,re)=>re===P?h(f({},G),{value:O}):G);t(hs(k))},b={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},x=$u(P=>{var W;if(!d.current)return{position:"fixed",top:0,left:0};let O=d.current.getBoundingClientRect(),k=(W=r==null?void 0:r.current)==null?void 0:W.getBoundingClientRect(),G=P*24+8,oe=window.innerHeight-O.bottom<G;return h(f({position:"fixed"},oe?{bottom:window.innerHeight-O.top+2}:{top:O.bottom+2}),{left:k?k.left+4:O.left,width:k?k.width-8:140,zIndex:10001})},[r]),A={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)"},T={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"},z=P=>Bn("div",{ref:l,style:f(f({},x(P.length)),A),children:P.map(O=>Bn("button",{type:"button",onClick:()=>p(O),style:T,onMouseEnter:k=>{k.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:k=>{k.currentTarget.style.backgroundColor="transparent"},children:O.label},O.name))});return i.length===0?Vo("div",{children:[Vo("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Bn(xo,{modified:!1,children:Bn("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:h(f({},b),{color:"#999",cursor:"default"})})}),Bn("button",{ref:d,type:"button",onClick:()=>a(!s),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:Bn(Rl,{size:12})})]}),s&&z(fi)]}):Vo("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((P,O)=>{let k=fi.find(G=>G.name===P.name);return k?Vo("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Bn("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:k.label}),Bn(xo,{modified:o,children:Vo("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[Bn("input",{type:"range",min:k.min,max:k.max,step:k.step,value:P.value,onChange:G=>g(O,parseFloat(G.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(P.value-k.min)/(k.max-k.min)*100}%, rgba(0,0,0,0.1) ${(P.value-k.min)/(k.max-k.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),Bn("input",{type:"number",min:k.min,max:k.max,step:k.step,value:k.unit==="px"||k.unit==="deg"?Math.round(P.value):Math.round(P.value*100)/100,onChange:G=>g(O,parseFloat(G.target.value)||0),style:h(f({},b),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),k.unit&&Bn("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:k.unit})]})}),Bn("button",{type:"button",onClick:()=>u(O),style:{display:"flex",alignItems:"center",justifyContent:"center",width:16,height:16,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:Bn(Gu,{size:10})})]},P.name):null}),c.length>0&&Vo("div",{children:[Vo("button",{ref:d,type:"button",onClick:()=>a(!s),style:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",border:"none",borderRadius:2,backgroundColor:"transparent",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#94a3b8",cursor:"pointer"},children:[Bn(Rl,{size:10}),"Add filter"]}),s&&z(c)]})]})}import{useCallback as oo,useEffect as Vu,useRef as gi,useState as Pl}from"react";import{AlignHorizontalSpaceAround as Xu,AlignVerticalSpaceAround as Ku,Columns3 as qu,Grid2x2 as Zu,RectangleHorizontal as Qu,Rows3 as ep,UnfoldHorizontal as Ol,UnfoldVertical as Bl}from"lucide-react";import{useCallback as Yu,useEffect as Ju,useRef as Hr}from"react";import{jsx as Uu}from"react/jsx-runtime";var ys=[0,1,2,4,8,12,16,20,24,28,32];function Sr({value:e,onChange:t,onPreview:n,onScrubEnd:o,onReset:r,isModified:i,accentColor:s,defaultUnit:a="rem",snapSteps:l,color:d,style:c,children:p}){let u=Hr(null),g=Hr(null),b=Hr(r),x=Hr(i),A=Hr(!1);b.current=r,x.current=i,Ju(()=>{let z=O=>{let k=g.current;if(!k)return;k.hasMoved=!0,A.current=O.shiftKey;let G=k.unit==="rem"||k.unit==="em"?.1:1;k.accum+=O.movementX*G;let re=Math.max(0,Math.round((k.startValue+k.accum)*10)/10);if(O.shiftKey&&l){let oe=k.unit==="rem"||k.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,W=k.unit==="rem"||k.unit==="em"?re*oe:re,Q=l[l.length-1];for(let N=0;N<l.length-1;N++){let ee=l[N],M=l[N+1];if(W<=(ee+M)/2){Q=ee;break}if(W<M){Q=M;break}}W>l[l.length-1]&&(Q=Math.round(W/8)*8),re=k.unit==="rem"||k.unit==="em"?Math.round(Q/oe*1e3)/1e3:Q}n==null||n(`${re}${k.unit}`)},P=()=>{let O=g.current;if(!O)return;let k=Math.max(0,Math.round((O.startValue+O.accum)*10)/10);if(A.current&&l){let re=O.unit==="rem"||O.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,oe=O.unit==="rem"||O.unit==="em"?k*re:k,W=l[l.length-1];for(let Q=0;Q<l.length-1;Q++){let N=l[Q],ee=l[Q+1];if(oe<=(N+ee)/2){W=N;break}if(oe<ee){W=ee;break}}oe>l[l.length-1]&&(W=Math.round(oe/8)*8),k=O.unit==="rem"||O.unit==="em"?Math.round(W/re*1e3)/1e3:W}let G=O.hasMoved&&k!==O.startValue;g.current=null,document.exitPointerLock(),G?t(`${k}${O.unit}`):O.hasMoved?n==null||n(`${O.startValue}${O.unit}`):x.current&&b.current&&b.current(),o==null||o()};return document.addEventListener("mousemove",z),document.addEventListener("mouseup",P),()=>{document.removeEventListener("mousemove",z),document.removeEventListener("mouseup",P)}},[t,n,o]);let T=Yu(z=>{var k;if(z.button!==0)return;z.preventDefault();let P=Mo(e),O=P.unit&&P.unit!=="px"?P.unit:a;g.current={startValue:P.num,unit:O,accum:0,hasMoved:!1},(k=u.current)==null||k.requestPointerLock()},[e,a]);return Uu("span",{ref:u,onMouseDown:T,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:f({color:i?s||"#3b82f6":d||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize"},c),children:p})}import{Fragment as bs,jsx as Be,jsxs as fn}from"react/jsx-runtime";function tp({gridCols:e,gridRows:t,gridModified:n,accentColor:o,onColsChange:r,onRowsChange:i}){return Be($n,{style:{width:100},children:fn("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"8px 4px"},children:[Be("input",{type:"number",min:1,max:12,value:e,onChange:s=>r(parseInt(s.target.value)||1),style:h(f({},hn),{width:32,textAlign:"center",padding:2})}),Be("span",{style:{fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:n?o:"#999",fontWeight:n?600:400,fontSize:11,margin:"0 4px"},children:"\xD7"}),Be("input",{type:"number",min:1,max:12,value:t,onChange:s=>i(parseInt(s.target.value)||1),style:h(f({},hn),{width:32,textAlign:"center",padding:2})})]})})}function Dl({element:e,getValue:t,getOriginalValue:n,handleChange:o,isModified:r,onResetProperty:i,isCollapsed:s,onToggle:a,sectionHeaderStyle:l,activeDropdown:d,onDropdownChange:c,panelContentRef:p,accentColor:u,onFieldHover:g,preferredUnit:b,onUnitCycle:x}){let A=c,T=t("display"),z=t("flex-direction"),P=_l(T,z),O=T==="flex"||T==="inline-flex",k=T==="grid",G=O||k,re=z==="column"||z==="column-reverse",oe=t("width"),W=t("height"),Q=r("width")?oe:ni(e,"width"),N=r("height")?W:ni(e,"height"),ee=xs(oe,Q),M=xs(W,N),Le=t("min-width"),V=t("max-width"),fe=t("min-height"),D=t("max-height"),ae=wr(t("padding")),I=t("gap"),pe=t("row-gap"),me=t("column-gap"),Fe=t("grid-template-columns"),we=t("grid-template-rows"),Je=t("overflow"),Re=Fe.split(/\s+/).filter($=>$&&$!=="none").length||1,Ce=we.split(/\s+/).filter($=>$&&$!=="none").length||1,[at,gt]=Pl(!1),bt=d!==null,Yt=bt||at,K=bt?.3:at?.65:1,X=({mode:$,icon:De,active:Ge})=>Be("button",{type:"button",onClick:()=>Nl($,o),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:Ge?Uo(u,.15):"transparent",color:Ge?u:"#64748b",cursor:"pointer",fontSize:14},children:De}),Te=($,De,Ge)=>{Ge==="fixed"?o($,De):o($,mi(Ge,De))},Oe=$=>{let De=wr(t("padding")),Ge=$||"0";o("padding",`${De.top} ${Ge} ${De.bottom} ${Ge}`)},Xe=$=>{let De=wr(t("padding")),Ge=$||"0";o("padding",`${Ge} ${De.right} ${Ge} ${De.left}`)},[Pe,he]=Pl({}),te=oo(($,De)=>Ge=>{De(Ge),he(En=>h(f({},En),{[$]:Ge}))},[]),ie=oo($=>{he(De=>{let Ge=f({},De);return delete Ge[$],Ge})},[]),ve=oo($=>{let De=wr(t("padding"));Qe(e,"padding",`${De.top} ${$} ${De.bottom} ${$}`)},[e,t]),Me=oo($=>{let De=wr(t("padding"));Qe(e,"padding",`${$} ${De.right} ${$} ${De.left}`)},[e,t]),mt=oo($=>De=>{Qe(e,$,De)},[e]),Ne=re?"row":"column",ze=Ne==="row"?"row-gap":"column-gap",nt=ze==="row-gap"?pe||I:me||I,St=r(ze)||r("gap"),Ke=oo(()=>{let De=yo(e).find(En=>En.axis===Ne);if(De)return Ne==="row"?De.h:De.w;let Ge=jo(e);return Ne==="row"?Ge.row:Ge.column},[e,Ne]),Rt=oo(()=>{let $=t("justify-content");return $==="space-between"?"between":$==="space-around"||$==="space-evenly"?"around":"fixed"},[t])(),_n=oo(($,De)=>{if($==="fixed"){let Ge=Math.max(0,Math.round(Ke()*1e3)/1e3),En=De||(Ge>0?`${Ge}px`:"8px");o("justify-content","normal"),o(ze,En);return}o("justify-content",$==="between"?"space-between":"space-around"),o(ze,"0px")},[ze,Ke,o]),Kn=oo($=>{if(Rt!=="fixed"){_n("fixed",$);return}o(ze,$)},[_n,Rt,ze,o]),vn=oo($=>{Qe(e,"justify-content","normal"),Qe(e,ze,$)},[e,ze]),It=$=>$==="center"?1:$==="flex-end"||$==="end"?2:0,qn=It(t("justify-content")),on=It(t("align-items")),Zn=re?on:qn,xt=re?qn:on,rn=gi(null),_t=gi({x:0,y:0}),sn=gi({col:Zn,row:xt});sn.current={col:Zn,row:xt};let Nn=oo(($,De)=>{let Ge=["flex-start","center","flex-end"];re?(o("justify-content",Ge[De]),o("align-items",Ge[$])):(o("justify-content",Ge[$]),o("align-items",Ge[De]))},[re,o]),An=gi(Nn);An.current=Nn,Vu(()=>{let De=Ge=>{let En=rn.current;if(!En||!Ge.composedPath().includes(En))return;Ge.preventDefault(),Ge.stopPropagation(),_t.current.x+=Ge.deltaX,_t.current.y+=Ge.deltaY;let{col:At,row:qt}=sn.current,wn=!1;Math.abs(_t.current.x)>=30&&(At=Math.max(0,Math.min(2,At+(_t.current.x>0?1:-1))),_t.current.x=0,_t.current.y=0,wn=!0),!wn&&Math.abs(_t.current.y)>=30&&(qt=Math.max(0,Math.min(2,qt+(_t.current.y>0?1:-1))),_t.current.x=0,_t.current.y=0,wn=!0),wn&&(At!==sn.current.col||qt!==sn.current.row)&&An.current(At,qt)};return document.addEventListener("wheel",De,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",De,{capture:!0})},[]);let Kt=()=>Be("div",{ref:rn,onMouseEnter:()=>{gt(!0),p.current&&(p.current.style.overflowY="hidden")},onMouseLeave:()=>{gt(!1),p.current&&(p.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:Un,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map($=>[0,1,2].map(De=>Be("button",{type:"button",onClick:()=>Nn(De,$),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:De===Zn&&$===xt?Be("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:De===0?fn(bs,{children:[Be("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Be("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Be("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]}):De===1?fn(bs,{children:[Be("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Be("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Be("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]}):fn(bs,{children:[Be("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Be("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Be("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]})}):Be("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${$}-${De}`)))}),Sn=r("grid-template-columns")||r("grid-template-rows");return fn("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Be("div",{style:l,children:Be("span",{children:G?"Auto layout":"Layout"})}),fn("div",{style:{padding:"8px 12px"},children:[fn("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:Un,borderRadius:2,padding:2,opacity:K,transition:"opacity 150ms ease"},children:[Be(X,{mode:"block",icon:Be(Qu,{size:16}),active:P==="block"}),Be(X,{mode:"flex-col",icon:Be(ep,{size:16}),active:P==="flex-col"}),Be(X,{mode:"flex-row",icon:Be(qu,{size:16}),active:P==="flex-row"}),Be(X,{mode:"grid",icon:Be(Zu,{size:16}),active:P==="grid"})]}),fn("div",{style:{display:"flex",gap:4,marginBottom:8},children:[Be(vs,{label:"W",property:"width",cssValue:ee==="fixed"?oe:`${Math.round(e.getBoundingClientRect().width)}px`,mode:ee,onValueChange:$=>o("width",$),onModeChange:$=>{if($==="fixed"){let De=e.getBoundingClientRect();o("width",`${Math.round(De.width)}px`)}else o("width",mi($,oe))},modified:r("width"),dimmed:bt&&d!=="width",dropdownOpen:d==="width",onDropdownChange:$=>A($?"width":null),panelContentRef:p,accentColor:u,onReset:()=>i("width"),minValue:Le!=="none"&&Le!=="0px"&&Le!=="auto"?Le:"",maxValue:V!=="none"&&V!=="auto"?V:"",onMinChange:$=>o("min-width",$||"0"),onMaxChange:$=>o("max-width",$||"none"),onMinReset:()=>i("min-width"),onMaxReset:()=>i("max-width"),minModified:r("min-width"),maxModified:r("max-width")}),Be(vs,{label:"H",property:"height",cssValue:M==="fixed"?W:`${Math.round(e.getBoundingClientRect().height)}px`,mode:M,onValueChange:$=>o("height",$),onModeChange:$=>{if($==="fixed"){let De=e.getBoundingClientRect();o("height",`${Math.round(De.height)}px`)}else o("height",mi($,W))},modified:r("height"),dimmed:bt&&d!=="height",dropdownOpen:d==="height",onDropdownChange:$=>A($?"height":null),panelContentRef:p,minValue:fe!=="none"&&fe!=="0px"&&fe!=="auto"?fe:"",maxValue:D!=="none"&&D!=="auto"?D:"",onMinChange:$=>o("min-height",$||"0"),onMaxChange:$=>o("max-height",$||"none"),onMinReset:()=>i("min-height"),onMaxReset:()=>i("max-height"),minModified:r("min-height"),maxModified:r("max-height"),accentColor:u,onReset:()=>i("height")})]}),O&&fn("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8},children:[Be("div",{style:{opacity:bt?.3:1,transition:"opacity 150ms ease"},children:Kt()}),fn("div",{style:{flex:1,opacity:K,transition:"opacity 150ms ease"},children:[Be("div",{onClick:St?()=>{i(ze),i("gap")}:void 0,title:St?"Click to reset":void 0,style:{fontSize:9,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:St?u:"#999",fontWeight:St?600:400,marginBottom:2,cursor:St?"pointer":"default"},children:"Gap"}),Be("div",{style:{display:"flex",gap:2,marginBottom:4,backgroundColor:Un,borderRadius:2,padding:2},children:["fixed","between","around"].map($=>{let De=Rt===$;return Be("button",{type:"button",onClick:()=>_n($),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"4px 6px",border:"none",borderRadius:2,backgroundColor:De?Uo(u,.15):"transparent",color:De?u:"#64748b",cursor:"pointer",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:De?600:400,textTransform:"capitalize"},children:$},$)})}),Be($n,{dimmed:bt,children:fn("div",{style:{display:"flex",alignItems:"center"},children:[Be(Sr,{value:nt,onChange:$=>{ie("gap"),Kn($)},onPreview:te("gap",vn),onScrubEnd:()=>ie("gap"),onReset:()=>{i(ze),i("gap")},isModified:St,accentColor:u,defaultUnit:b,children:z==="column"||z==="column-reverse"?Be(Bl,{size:12,strokeWidth:St?2.5:1.5}):Be(Ol,{size:12,strokeWidth:St?2.5:1.5})}),Be(ro,{property:ze,value:Pe.gap||(Rt==="fixed"?nt:`${Math.max(0,Math.round(Ke()*1e3)/1e3)}px`),onChange:$=>Kn($),isModified:St||"gap"in Pe,style:h(f({},hn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:x})]})})]})]}),k&&fn("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:K,transition:"opacity 150ms ease"},children:[Be(tp,{gridCols:Re,gridRows:Ce,gridModified:Sn,accentColor:u,onColsChange:$=>o("grid-template-columns",`repeat(${$}, 1fr)`),onRowsChange:$=>o("grid-template-rows",`repeat(${$}, 1fr)`)}),fn("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[Be($n,{dimmed:bt,children:fn("div",{style:{display:"flex",alignItems:"center"},children:[Be(Sr,{value:me||I,onChange:$=>{ie("column-gap"),o("column-gap",$)},onPreview:te("column-gap",mt("column-gap")),onScrubEnd:()=>ie("column-gap"),onReset:()=>i("column-gap"),isModified:r("column-gap"),accentColor:u,defaultUnit:b,children:Be(Ol,{size:12,strokeWidth:r("column-gap")?2.5:1.5})}),Be(ro,{property:"column-gap",value:Pe["column-gap"]||me||I,onChange:$=>o("column-gap",$),isModified:r("column-gap")||"column-gap"in Pe,placeholder:"col",style:h(f({},hn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:x})]})}),Be($n,{dimmed:bt,children:fn("div",{style:{display:"flex",alignItems:"center"},children:[Be(Sr,{value:pe||I,onChange:$=>{ie("row-gap"),o("row-gap",$)},onPreview:te("row-gap",mt("row-gap")),onScrubEnd:()=>ie("row-gap"),onReset:()=>i("row-gap"),isModified:r("row-gap"),accentColor:u,defaultUnit:b,children:Be(Bl,{size:12,strokeWidth:r("row-gap")?2.5:1.5})}),Be(ro,{property:"row-gap",value:Pe["row-gap"]||pe||I,onChange:$=>o("row-gap",$),isModified:r("row-gap")||"row-gap"in Pe,placeholder:"row",style:h(f({},hn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:x})]})})]})]}),G&&fn("div",{onMouseEnter:()=>g==null?void 0:g("padding"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:K,transition:"opacity 150ms ease"},children:[Be($n,{style:{flex:1},dimmed:bt,children:fn("div",{style:{display:"flex",alignItems:"center"},children:[Be(Sr,{value:ae.left,onChange:$=>{ie("padding-h"),Oe($)},onPreview:te("padding-h",ve),onScrubEnd:()=>ie("padding-h"),onReset:()=>i("padding"),isModified:r("padding"),accentColor:u,defaultUnit:b,snapSteps:ys,children:Be(Xu,{size:12,strokeWidth:r("padding")?2.5:1.5})}),Be(ro,{property:"padding",value:Pe["padding-h"]||ae.left,onChange:$=>Oe($),isModified:r("padding")||"padding-h"in Pe,placeholder:"H pad",style:h(f({},hn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:x})]})}),Be($n,{style:{flex:1},dimmed:bt,children:fn("div",{style:{display:"flex",alignItems:"center"},children:[Be(Sr,{value:ae.top,onChange:$=>{ie("padding-v"),Xe($)},onPreview:te("padding-v",Me),onScrubEnd:()=>ie("padding-v"),onReset:()=>i("padding"),isModified:r("padding"),accentColor:u,defaultUnit:b,snapSteps:ys,children:Be(Ku,{size:12,strokeWidth:r("padding")?2.5:1.5})}),Be(ro,{property:"padding",value:Pe["padding-v"]||ae.top,onChange:$=>Xe($),isModified:r("padding")||"padding-v"in Pe,placeholder:"V pad",style:h(f({},hn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:x})]})})]}),fn("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:K,transition:"opacity 150ms ease"},children:[Be("input",{type:"checkbox",checked:Je==="hidden",onChange:$=>o("overflow",$.target.checked?"hidden":"visible"),style:{margin:0,accentColor:u}}),"Clip content"]})]})]})}import{AlignCenter as np,AlignJustify as op,AlignLeft as rp,AlignRight as ip,Baseline as sp,ChevronDown as ap,WholeWord as lp}from"lucide-react";import{jsx as Tt,jsxs as vo}from"react/jsx-runtime";var Hl={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function Fl({element:e,getValue:t,handleChange:n,isModified:o,onResetProperty:r,isCollapsed:i,onToggle:s,sectionHeaderStyle:a,accentColor:l,colorVariables:d,activeColorDropdown:c,onColorDropdownChange:p,panelContentRef:u,preferredUnit:g,onUnitCycle:b}){var ee;let x=t("font-family"),A=t("font-size"),T=t("font-weight"),z=t("line-height"),P=t("letter-spacing"),O=t("text-align"),k=t("color"),G=String(T),re=Hl[G]||G,oe=yr(e,k),W=k.includes("var(")?null:Dr(oe,d),Q=({align:M,icon:Le})=>{let V=O===M;return Tt("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:V?Uo(l,.15):"transparent",color:V?l:"#64748b",cursor:"pointer"},children:Le})},N=((ee=x.split(",")[0])==null?void 0:ee.trim().replace(/^["']|["']$/g,""))||"System";return vo("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Tt("div",{style:a,children:Tt("span",{children:"Typography"})}),vo("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[Tt($n,{children:vo("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[Tt("input",{type:"text",value:x,onChange:M=>n("font-family",M.target.value),style:h(f({},hn),{flex:1,minWidth:0,padding:0,fontWeight:o("font-family")?600:400,color:o("font-family")?l:"inherit"}),title:x}),Tt(ap,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),vo("div",{style:{display:"flex",gap:4},children:[Tt($n,{style:{flex:1},children:Tt("select",{value:G,onChange:M=>n("font-weight",M.target.value),style:h(f({},hn),{padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:o("font-weight")?600:400,color:o("font-weight")?l:"inherit"}),children:Object.entries(Hl).map(([M,Le])=>Tt("option",{value:M,children:Le},M))})}),Tt($n,{style:{flex:1},children:Tt("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:Tt(ro,{property:"font-size",value:A,onChange:M=>n("font-size",M),isModified:o("font-size"),min:1,max:999,style:h(f({},hn),{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:g,onUnitCycle:b})})})]}),vo("div",{style:{display:"flex",gap:4},children:[Tt($n,{style:{flex:1},children:vo("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[Tt(sp,{size:12,style:{color:o("line-height")?l:"#999",flexShrink:0}}),Tt(ro,{property:"line-height",value:z,onChange:M=>n("line-height",M),isModified:o("line-height"),step:.1,min:0,placeholder:"Auto",style:h(f({},hn),{flex:1,minWidth:0,padding:0,fontWeight:o("line-height")?600:400,color:o("line-height")?l:"inherit"}),showUnit:!1})]})}),Tt($n,{style:{flex:1},children:vo("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[Tt(lp,{size:12,style:{color:o("letter-spacing")?l:"#999",flexShrink:0}}),Tt(ro,{property:"letter-spacing",value:P,onChange:M=>n("letter-spacing",M),isModified:o("letter-spacing"),step:.1,placeholder:"\u2014",style:h(f({},hn),{flex:1,minWidth:0,padding:0,fontWeight:o("letter-spacing")?600:400,color:o("letter-spacing")?l:"inherit"}),showUnit:!1})]})})]}),vo("div",{style:{display:"flex",gap:2,backgroundColor:Un,borderRadius:2,padding:2},children:[Tt(Q,{align:"left",icon:Tt(rp,{size:14})}),Tt(Q,{align:"center",icon:Tt(np,{size:14})}),Tt(Q,{align:"right",icon:Tt(ip,{size:14})}),Tt(Q,{align:"justify",icon:Tt(op,{size:14})})]}),vo("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[Tt("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"}),Tt("div",{style:{flex:1,minWidth:0},children:Tt(Ss,{value:k,resolvedValue:oe,colorVariables:d,matchingVariable:W,onChange:M=>n("color",M),accentColor:l,modified:o("color"),panelContentRef:u,isDropdownOpen:c==="color",onDropdownChange:M=>p(M?"color":null)})})]})]})]})}import{Fragment as up,jsx as Ee,jsxs as jt}from"react/jsx-runtime";var zl=[{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 dp(e,t){let n=t.trim().toLowerCase();switch(e){case"opacity":return n==="1";case"border-width":return n==="0px"||n==="0"||n==="medium";case"border-radius":return n==="0px"||n==="0";case"border-style":return n==="none";case"box-shadow":return n==="none";case"backdrop-filter":return n==="none"||n==="";case"letter-spacing":return n==="normal"||n==="0px"||n==="0";case"background-color":return n==="rgba(0, 0, 0, 0)"||n==="transparent";default:return!1}}function xs(e,t){return!t||e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":"fixed"}function mi(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=Mo(t);if(typeof n.num=="number"&&!isNaN(n.num)){let o=n.unit==="%"?"px":n.unit||"px";return`${n.num}${o}`}return"auto"}}}function wr(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 _l(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function Nl(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 Un="rgba(0, 0, 0, 0.04)",hn={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};function vs({label:e,property:t,cssValue:n,mode:o,onValueChange:r,onModeChange:i,modified:s,dimmed:a,dropdownOpen:l,onDropdownChange:d,panelContentRef:c,accentColor:p="#3b82f6",onReset:u,minValue:g,maxValue:b,onMinChange:x,onMaxChange:A,onMinReset:T,onMaxReset:z,minModified:P,maxModified:O}){let k=Mo(n),G=s?k.unit||vr(t):vr(t),re=!s&&k.unit&&k.unit!==G?ms(k.num,G):k.num,[oe,W]=yn(!1),[Q,N]=yn(String(re)),[ee,M]=yn(!1),Le=Dn(null),V=Dn(null),fe=Dn(null),D=Dn(!1);Vn(()=>{oe||N(String(re))},[re,oe]),Vn(()=>{if(!l)return;let Re=at=>{V.current&&!at.composedPath().includes(V.current)&&fe.current&&!at.composedPath().includes(fe.current)&&(d==null||d(!1))},Ce=at=>{at.key==="Escape"&&(d==null||d(!1))};return document.addEventListener("mousedown",Re),document.addEventListener("keydown",Ce),()=>{document.removeEventListener("mousedown",Re),document.removeEventListener("keydown",Ce)}},[l,d]),Vn(()=>{oe&&Le.current&&(Le.current.focus(),Le.current.select())},[oe]);let ae=()=>{let Re=pi(Q,t,n,s);r(Re||`${Math.max(0,parseFloat(Q)||0)}${G}`),W(!1)},I=()=>{if(D.current){D.current=!1;return}ae()},pe=Re=>{if(Re.key==="Enter"){ae();return}if(Re.key==="Escape"){D.current=!0,N(String(re)),W(!1);return}if(Re.key==="ArrowUp"||Re.key==="ArrowDown"){Re.preventDefault();let Ce=Re.key==="ArrowUp"?1:-1,at=Re.shiftKey?8:Re.altKey?.1:1,gt=parseFloat(Q)||0,bt=Math.round(Math.max(0,gt+Ce*at)*1e3)/1e3;N(String(bt)),r(`${bt}${G}`)}},me={fixed:"Fixed",hug:"Hug",fill:"Fill"},Fe={fixed:Ee($l,{size:12}),hug:Ee(cp,{size:12}),fill:Ee($l,{size:12})},we=()=>{d==null||d(!l)},Je=()=>{if(!fe.current||!(c!=null&&c.current))return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let Re=fe.current.getBoundingClientRect(),Ce=c.current.getBoundingClientRect();return{position:"fixed",top:Re.bottom+4,left:Ce.left+4,width:Ce.width-8}};return jt("div",{ref:fe,onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:oe?p:ee?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Un,transition:"border-color 100ms ease, opacity 150ms ease",opacity:a?.3:1},children:[Ee("span",{onClick:s&&u?u:void 0,title:s?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:s?p:"#999",fontWeight:s?600:400,padding:"0 8px",flexShrink:0,cursor:s?"pointer":"default"},children:e}),o==="fixed"?oe?Ee("input",{ref:Le,type:"text",inputMode:"numeric",value:Q,onChange:Re=>N(Re.target.value),onKeyDown:pe,onBlur:I,style:h(f({},hn),{flex:1,minWidth:0,padding:"4px 2px"})}):Ee("span",{onClick:()=>W(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:re}):Ee("span",{style:{flex:1}}),jt("button",{type:"button",onClick:we,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:[me[o],Ee(ws,{size:12})]}),l&&jt("div",{ref:V,style:h(f({},Je()),{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:[jt("button",{type:"button",onClick:()=>{i("fixed"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="fixed"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="fixed"?600:400,cursor:"pointer",textAlign:"left"},children:[Fe.fixed,jt("span",{children:["Fixed ",t," (",n,")"]}),o==="fixed"&&Ee(hi,{size:14,style:{marginLeft:"auto"}})]}),jt("button",{type:"button",onClick:()=>{i("hug"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="hug"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="hug"?600:400,cursor:"pointer",textAlign:"left"},children:[Fe.hug,Ee("span",{children:"Hug contents"}),o==="hug"&&Ee(hi,{size:14,style:{marginLeft:"auto"}})]}),jt("button",{type:"button",onClick:()=>{i("fill"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="fill"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="fill"?600:400,cursor:"pointer",textAlign:"left"},children:[Fe.fill,Ee("span",{children:"Fill container"}),o==="fill"&&Ee(hi,{size:14,style:{marginLeft:"auto"}})]}),Ee("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),jt("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[jt("div",{style:{display:"flex",alignItems:"center",backgroundColor:Un,borderRadius:2,padding:"4px 8px"},children:[Ee("span",{onClick:P?Re=>{Re.stopPropagation(),T==null||T()}:void 0,title:P?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:P?p:"#999",fontWeight:P?600:400,marginRight:8,flexShrink:0,cursor:P?"pointer":"default"},children:"Min"}),Ee("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:Re=>x==null?void 0:x(Re.target.value),onClick:Re=>Re.stopPropagation(),style:h(f({},hn),{flex:1,minWidth:0,padding:0,textAlign:"right",color:P?p:"inherit",fontWeight:P?600:400})})]}),jt("div",{style:{display:"flex",alignItems:"center",backgroundColor:Un,borderRadius:2,padding:"4px 8px"},children:[Ee("span",{onClick:O?Re=>{Re.stopPropagation(),z==null||z()}:void 0,title:O?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:O?p:"#999",fontWeight:O?600:400,marginRight:8,flexShrink:0,cursor:O?"pointer":"default"},children:"Max"}),Ee("input",{type:"text",value:b||"",placeholder:"\u2014",onChange:Re=>A==null?void 0:A(Re.target.value),onClick:Re=>Re.stopPropagation(),style:h(f({},hn),{flex:1,minWidth:0,padding:0,textAlign:"right",color:O?p:"inherit",fontWeight:O?600:400})})]})]})]})]})}function $n({children:e,style:t,dimmed:n}){let[o,r]=yn(!1);return Ee("div",{onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),style:f({position:"relative",borderRadius:2,border:"1px solid",borderColor:o?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Un,transition:"border-color 100ms ease, opacity 150ms ease",opacity:n?.3:1},t),children:e})}function xo({children:e}){let[t,n]=yn(!1);return Ee("div",{onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:t?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Un,transition:"border-color 100ms ease"},children:e})}function ro({property:e,value:t,onChange:n,isModified:o=!1,step:r=1,min:i,max:s,style:a,placeholder:l,showUnit:d=!0,unitStyle:c,preferredUnit:p,onUnitCycle:u}){let g=Mo(t),b=vr(e),x=ui[e],T=p&&x&&x.includes(p)?p:b,z=o&&g.unit||T,P=!o&&g.unit&&g.unit!==z?ms(g.num,z):g.num,[O,k]=yn(!1),[G,re]=yn(""),oe=I=>{k(!0),re(String(P||"")),requestAnimationFrame(()=>I.target.select())},W=()=>{if(k(!1),G.trim()){let I=pi(G,e,t,o);I&&n(I)}},Q=I=>{let pe=I.target.value;re(pe);let me=pe.trim(),Fe=me.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),we=me.match(/^(-?[\d.]+)$/);if(Fe){let Je=parseFloat(Fe[1]);isNaN(Je)||n(`${Je}${Fe[2].toLowerCase()}`)}else if(we){let Je=parseFloat(we[1]);isNaN(Je)||n(`${Je}${z}`)}},N=I=>{if(I.key==="Enter"){if(G.trim()){let pe=pi(G,e,t,o);pe&&n(pe)}I.target.blur();return}if(I.key==="ArrowUp"||I.key==="ArrowDown"){I.preventDefault();let pe=I.shiftKey?10:I.altKey?.1:1,me=(I.key==="ArrowUp"?1:-1)*r*pe,Fe=parseFloat(G)||P||0,we=Math.round((Fe+me)*1e3)/1e3;i!==void 0&&(we=Math.max(i,we)),s!==void 0&&(we=Math.min(s,we)),re(String(we)),n(`${we}${z}`)}},ee=/^-?[\d.]/.test(t.trim()),M=O?G:ee?String(P):"",V=O&&/\s*(rem|em|px|%)\s*$/i.test(G)?"":z,fe=u&&(V==="rem"||V==="px"),D={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},ae=h(f({},c!=null?c:D),{pointerEvents:"auto",cursor:"pointer"});return jt(up,{children:[Ee("input",{type:"text",inputMode:"decimal",value:M,onFocus:oe,onBlur:W,onChange:Q,onKeyDown:N,placeholder:l,style:a}),d&&V&&Ee("span",{style:fe?ae:c!=null?c:D,onClick:fe?u:void 0,title:fe?"Click to switch units":void 0,children:V})]})}function Ss({value:e,resolvedValue:t,colorVariables:n,matchingVariable:o,onChange:r,accentColor:i="#3b82f6",modified:s,panelContentRef:a,isDropdownOpen:l,onDropdownChange:d}){let[c,p]=yn(!1),u=e,[g,b]=yn(u),[x,A]=yn(!1),[T,z]=yn(!1),[P,O]=yn(!1),k=Dn(null),G=Dn(null),re=Dn(null),oe=l!==void 0?l:x,W=d||A,Q=co(()=>{if(!re.current)return{position:"fixed",top:0,left:0,width:200};let I=re.current.getBoundingClientRect();if(a!=null&&a.current){let pe=a.current.getBoundingClientRect();return{position:"fixed",top:I.bottom+4,left:pe.left+4,width:pe.width-8}}return{position:"fixed",top:I.bottom+4,left:I.left,width:I.width}},[a]);Vn(()=>{c||b(e)},[e,c]),Vn(()=>{if(!oe&&!T)return;let I=me=>{re.current&&!me.composedPath().includes(re.current)&&(W(!1),z(!1))},pe=me=>{me.key==="Escape"&&(W(!1),z(!1))};return document.addEventListener("mousedown",I),document.addEventListener("keydown",pe),()=>{document.removeEventListener("mousedown",I),document.removeEventListener("keydown",pe)}},[oe,T]),Vn(()=>{c&&k.current&&(k.current.focus(),k.current.select())},[c]);let N=yi(()=>{if(!g||g.startsWith("#")||g.startsWith("rgb")||g.startsWith("hsl")||g.startsWith("oklch"))return[];let I=g.toLowerCase();return n.filter(pe=>pe.name.toLowerCase().includes(I)||pe.usage.toLowerCase().includes(I)).slice(0,8)},[g,n]),ee=()=>{r(g),p(!1),z(!1)},M=I=>{b(I),I.includes("var")||I.includes("--")||I.length>0&&!I.startsWith("#")?z(!0):z(!1)},Le=I=>{b(I.value),r(I.value),W(!1),z(!1),p(!1)},V=()=>{setTimeout(()=>{!oe&&!T&&ee()},150)},fe=I=>{I.key==="Enter"?ee():I.key==="Escape"&&(b(e),p(!1),z(!1))},D=yi(()=>{let I=t.trim().toLowerCase();if(I.startsWith("#"))return I.length===4?`#${I[1]}${I[1]}${I[2]}${I[2]}${I[3]}${I[3]}`:I.slice(0,7);let pe=I.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(pe){let Fe=parseInt(pe[1],10).toString(16).padStart(2,"0"),we=parseInt(pe[2],10).toString(16).padStart(2,"0"),Je=parseInt(pe[3],10).toString(16).padStart(2,"0");return`#${Fe}${we}${Je}`}let me=I.match(/oklch\(\s*([\d.]+)/);if(me){let Fe=Math.max(0,Math.min(1,parseFloat(me[1]))),we=Math.round(Fe*255).toString(16).padStart(2,"0");return`#${we}${we}${we}`}return"#000000"},[t]);return jt("div",{ref:re,onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:c?i:P?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Un,transition:"border-color 100ms ease",overflow:"hidden"},children:[jt("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[jt("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[Ee("input",{type:"color",value:D,onChange:I=>{let pe=I.target.value;b(pe),r(pe)},style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),Ee("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),c?Ee("input",{ref:k,type:"text",value:g,onChange:I=>M(I.target.value),onKeyDown:fe,onBlur:V,style:h(f({},hn),{flex:1,minWidth:0})}):Ee("span",{onClick:()=>p(!0),style:{flex:1,minWidth:0,padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:s?i:"inherit"},title:u,children:u}),n.length>0&&Ee("button",{type:"button",onClick:()=>W(!oe),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:Ee(ws,{size:12})})]}),T&&N.length>0&&Ee("div",{style:h(f({},Q()),{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:N.map(I=>jt("button",{type:"button",onClick:()=>Le(I),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:"transparent",color:"#1e293b",cursor:"pointer",textAlign:"left",fontSize:12},children:[Ee("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:I.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),Ee("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:I.name})]},I.name))}),oe&&Ee("div",{ref:G,style:h(f({},Q()),{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(I=>jt("button",{type:"button",onClick:()=>Le(I),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:(o==null?void 0:o.usage)===I.usage||e===I.value?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:(o==null?void 0:o.usage)===I.usage||e===I.value?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[Ee("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:I.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),Ee("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:I.name}),((o==null?void 0:o.usage)===I.usage||e===I.value)&&Ee(hi,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},I.name))})]})}function Wl({element:e,elementInfo:t,selector:n,styleModifications:o,dispatch:r,onClose:i,onHover:s,accentColor:a="#3b82f6",toolbarRef:l}){let d=Dn(null),c=Dn(null),[p,u]=yn(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch(K){return!1}});Vn(()=>{if(p)return;let K=setTimeout(()=>u(!0),50);return()=>clearTimeout(K)},[p]);let[g,b]=yn(null),[x,A]=yn(null),T=g!==null||x!==null,[z,P]=yn("rem"),O=co(()=>{P(K=>K==="rem"?"px":"rem")},[]),k=Dn(new Map),[G,re]=yn(""),oe=yi(()=>ts(),[]);Vn(()=>{let K=X=>{var Oe;if(X.key!=="Escape")return;let Te=document.activeElement;Te&&((Oe=d.current)!=null&&Oe.contains(Te))||i()};return window.addEventListener("keydown",K),()=>window.removeEventListener("keydown",K)},[i]);let W=Dn({top:0,left:0,maxHeight:400}),[,Q]=yn(0),N="devtools-panel-position",ee=Dn({x:0,y:0}),M=Dn(null),Le=Dn(!1);Vn(()=>{try{let K=localStorage.getItem(N);if(K){let X=JSON.parse(K);typeof X.top=="number"&&typeof X.left=="number"&&(Le.current=!0,W.current=h(f({},W.current),{top:X.top,left:X.left}))}}catch(K){}},[]),Vn(()=>{let K=Te=>{var Ke;let Oe=M.current;if(!Oe)return;let Xe=Oe.startOffsetX+(Te.clientX-Oe.startX),Pe=Oe.startOffsetY+(Te.clientY-Oe.startY),he=280,te=16,ie=Math.max(te,Math.min(window.innerWidth-he-te,W.current.left+Xe)),ve=Math.max(te,W.current.top+Pe);ee.current={x:ie-W.current.left,y:ve-W.current.top};let Me=d.current,mt=Me==null?void 0:Me.parentElement;if(!mt)return;mt.style.top=`${ve}px`,mt.style.left=`${ie}px`;let Ne=(Ke=l==null?void 0:l.current)==null?void 0:Ke.getBoundingClientRect(),ze=window.innerHeight-16;Ne&&ie+he>Ne.left&&(ze=Ne.top-8);let nt=Math.max(0,ve),St=Math.max(200,ze-nt);Me&&(Me.style.maxHeight=`${St}px`)},X=()=>{if(!M.current)return;let Te=W.current.top+ee.current.y,Oe=W.current.left+ee.current.x;W.current=h(f({},W.current),{top:Te,left:Oe}),ee.current={x:0,y:0},Le.current=!0;try{localStorage.setItem(N,JSON.stringify({top:Te,left:Oe}))}catch(Xe){}M.current=null};return window.addEventListener("mousemove",K),window.addEventListener("mouseup",X),()=>{window.removeEventListener("mousemove",K),window.removeEventListener("mouseup",X)}},[]);let V=co(K=>{K.button!==0||K.target.closest("button")||(K.preventDefault(),M.current={startX:K.clientX,startY:K.clientY,startOffsetX:ee.current.x,startOffsetY:ee.current.y})},[]);Vn(()=>{ee.current={x:0,y:0};let K=(Oe=!1)=>{var ze;let Xe=d.current,Pe=280,he=8,te,ie;if(Le.current)te=W.current.top,ie=W.current.left;else{let nt=e.getBoundingClientRect();ie=nt.right+he,te=nt.top,ie+Pe>window.innerWidth-he&&(ie=nt.left-Pe-he),ie<he&&(ie=Math.max(he,(window.innerWidth-Pe)/2))}let ve=(ze=l==null?void 0:l.current)==null?void 0:ze.getBoundingClientRect(),Me=window.innerHeight-16;ve&&ie+Pe>ve.left&&(Me=ve.top-he);let mt=Math.max(0,te),Ne=Math.max(200,Me-mt);if(W.current={top:te,left:ie,maxHeight:Ne},Oe&&Xe){let nt=Xe.parentElement;nt&&!Le.current&&(nt.style.top=`${te+ee.current.y}px`,nt.style.left=`${ie+ee.current.x}px`),Xe.style.maxHeight=`${Ne}px`}else Q(nt=>nt+1)};K(!1);let X=()=>K(!0),Te=()=>K(!1);return window.addEventListener("scroll",X,{passive:!0}),window.addEventListener("resize",Te,{passive:!0}),()=>{window.removeEventListener("scroll",X),window.removeEventListener("resize",Te)}},[e]),Vn(()=>{let K=d.current;if(!K)return;let X=Te=>{let Oe=c.current;if(!Oe){Te.preventDefault();return}let{scrollTop:Xe,scrollHeight:Pe,clientHeight:he}=Oe,te=Xe<=0&&Te.deltaY<0,ie=Xe+he>=Pe&&Te.deltaY>0;(te||ie)&&Te.preventDefault()};return K.addEventListener("wheel",X,{passive:!1}),()=>K.removeEventListener("wheel",X)},[]);let fe=yi(()=>o.find(K=>K.selector===n),[o,n]),D=co(K=>{let X=fe==null?void 0:fe.changes.find(Te=>Te.property===K);return X?X.modified:ti(e,K)},[e,fe]),ae=co((K,X)=>{if(!K.includes("color"))return X;let Te=X.trim(),Oe=oe.find(Pe=>Pe.usage===Te||Pe.name===Te),Xe=(Oe==null?void 0:Oe.value)||Te;return yr(e,Xe)},[oe,e]),I=co(K=>{if(k.current.has(K))return k.current.get(K);let X=fe==null?void 0:fe.changes.find(Oe=>Oe.property===K);if(X)return X.original;let Te=ti(e,K);return k.current.set(K,Te),Te},[e,fe]),pe=co((K,X)=>{let Te=I(K),Oe=ae(K,X);Qe(e,K,Oe),K==="backdrop-filter"&&Qe(e,"-webkit-backdrop-filter",Oe),r({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:K,original:Te,modified:Oe}})},[e,n,t,r,ae,I]),me=co(K=>{let X=o.find(Oe=>Oe.selector===n);X!=null&&X.changes.find(Oe=>Oe.property===K)&&e instanceof HTMLElement&&(e.style.removeProperty(K),r({type:"CLEAR_STYLE",payload:{selector:n,property:K}}),k.current.delete(K))},[e,n,o,r]),Fe=co(()=>{let K=G.split(";").map(X=>X.trim()).filter(X=>X);for(let X of K){let Te=X.indexOf(":");if(Te>0){let Oe=X.slice(0,Te).trim(),Xe=X.slice(Te+1).trim();Oe&&Xe&&pe(Oe,Xe)}}re("")},[G,pe]),we=co(K=>{var X;return(X=fe==null?void 0:fe.changes.some(Te=>Te.property===K))!=null?X:!1},[fe]),Je=K=>{var Pe;let X=D(K.property),Te=we(K.property),Oe=!Te&&dp(K.property,X),Xe={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&&K.type!=="backdrop-filter")return Ee(xo,{modified:!1,children:Ee("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:he=>pe(K.property,he.target.value),style:h(f({},Xe),{color:"#999"})})});switch(K.type){case"color":{let he=yr(e,X),te=X.includes("var(")?null:Dr(he,oe);return Ee(Ss,{value:X,resolvedValue:he,colorVariables:oe,matchingVariable:te,onChange:ie=>pe(K.property,ie),accentColor:a,modified:Te,panelContentRef:c,isDropdownOpen:x===K.property,onDropdownChange:ie=>A(ie?K.property:null)})}case"number":{if(!!ui[K.property])return Ee(xo,{modified:Te,children:Ee(ro,{property:K.property,value:X,onChange:ie=>pe(K.property,ie),isModified:Te,min:K.min,max:K.max,step:K.step||1,style:h(f({},Xe),{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:z,onUnitCycle:O})});let{num:te}=Mo(X);return Ee(xo,{modified:Te,children:Ee("input",{type:"number",value:te,min:K.min,max:K.max,step:K.step||1,onChange:ie=>pe(K.property,ie.target.value),style:Xe})})}case"select":return Ee(xo,{modified:Te,children:jt("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[Ee("select",{value:X,onChange:he=>pe(K.property,he.target.value),style:h(f({},Xe),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(Pe=K.options)==null?void 0:Pe.map(he=>Ee("option",{value:he,children:he},he))}),Ee("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:Ee(ws,{size:12})})]})});case"spacing":return Ee(xo,{modified:Te,children:Ee("input",{type:"text",value:X,onChange:he=>pe(K.property,he.target.value),placeholder:"e.g., 10px or 10px 20px",style:Xe})});case"backdrop-filter":return Ee(Al,{value:X,onChange:he=>pe(K.property,he),accentColor:a,modified:Te,panelContentRef:c});default:return Ee(xo,{modified:Te,children:Ee("input",{type:"text",value:X,onChange:he=>pe(K.property,he.target.value),style:Xe})})}},Re=t.reactComponent||t.tagName,Ce={position:"fixed",top:W.current.top,left:W.current.left,width:280,maxHeight:W.current.maxHeight,backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",zIndex:10002,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,overflow:"visible",display:"flex",flexDirection:"column",opacity:p?1:0,transition:"opacity 150ms ease"},at={display:"flex",alignItems:"center",justifyContent:"space-between",margin:4,padding:"4px 5px 4px 10px",backgroundColor:a,color:"#ffffff",cursor:M.current?"grabbing":"grab",userSelect:"none",WebkitUserSelect:"none"},gt={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"},bt={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},Yt={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return Ee("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:W.current.top+ee.current.y,left:W.current.left+ee.current.x,zIndex:10002,pointerEvents:"none"},children:jt("div",{ref:d,"data-devtools":"panel",style:h(f({},Ce),{position:"relative",top:0,left:0,zIndex:0,pointerEvents:"auto"}),onMouseEnter:()=>s==null?void 0:s("element"),onMouseLeave:()=>s==null?void 0:s(null),children:[Ee("div",{"aria-hidden":"true",style:di()}),jt("div",{style:at,onMouseDown:V,children:[Ee("div",{style:{display:"flex",alignItems:"center",gap:3,overflow:"hidden",minWidth:0},children:Ee("span",{style:{fontWeight:600,fontSize:12,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Re})}),Ee("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"})]}),jt("div",{ref:c,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[Ee("div",{style:{opacity:x?.3:1,transition:"opacity 150ms ease"},children:Ee(Dl,{element:e,getValue:D,getOriginalValue:I,handleChange:pe,isModified:we,onResetProperty:me,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:gt,activeDropdown:g,onDropdownChange:b,panelContentRef:c,accentColor:a,onFieldHover:s,preferredUnit:z,onUnitCycle:O})}),Ee("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:Ee(Fl,{element:e,getValue:D,handleChange:pe,isModified:we,onResetProperty:me,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:gt,accentColor:a,colorVariables:oe,activeColorDropdown:x,onColorDropdownChange:A,panelContentRef:c,preferredUnit:z,onUnitCycle:O})}),zl.map((K,X)=>{let Te=X===zl.length-1,Oe=x&&K.properties.some(Pe=>Pe.property===x);return jt("div",{style:{borderBottom:Te?"none":"1px solid rgba(0,0,0,0.08)",opacity:T&&!Oe?.3:1,transition:"opacity 150ms ease"},children:[Ee("div",{style:gt,children:Ee("span",{children:K.name})}),Ee("div",{style:{padding:"4px 0"},children:K.properties.map(Pe=>{let he=we(Pe.property),te=Oe&&Pe.property!==x;return jt("div",{style:h(f({},bt),{opacity:te?.3:1,transition:"opacity 150ms ease"}),children:[Ee("span",{onClick:he?()=>me(Pe.property):void 0,title:he?"Click to reset":void 0,style:h(f({},Yt),{color:he?a:"#64748b",fontWeight:he?600:400,cursor:he?"pointer":"default"}),children:Pe.label}),Ee("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:Je(Pe)})]},Pe.property)})})]},K.name)}),jt("div",{style:{opacity:T?.3:1,transition:"opacity 150ms ease"},children:[Ee("div",{style:gt,children:Ee("span",{children:"Raw CSS"})}),jt("div",{style:{padding:"8px 12px"},children:[Ee("textarea",{value:G,onChange:K=>re(K.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"}}),G.trim()&&Ee("button",{type:"button",onClick:Fe,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:a,color:"#fff",cursor:"pointer",opacity:G.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as pp,useLayoutEffect as fp,useState as gp}from"react";import{Fragment as bp,jsx as Xo,jsxs as yp}from"react/jsx-runtime";var Cs=["flex-start","center","flex-end"],Es=["flex-start","center","flex-end"];function mp(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function hp(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 Gl(e){let t=Array.from(e.children);if(t.length===0)return null;let n=1/0,o=1/0,r=-1/0,i=-1/0;for(let s of t){let a=s.getBoundingClientRect();a.width===0&&a.height===0||(a.top<n&&(n=a.top),a.left<o&&(o=a.left),a.bottom>r&&(r=a.bottom),a.right>i&&(i=a.right))}return n===1/0?null:new DOMRect(o,n,i-o,r-n)}function jl({element:e,modifier:t,accentColor:n,refreshKey:o=0}){let[r,i]=gp(null);if(pp(()=>{if(!e){i(null);return}let x=()=>i(Gl(e));return x(),window.addEventListener("scroll",x,{passive:!0}),window.addEventListener("resize",x,{passive:!0}),()=>{window.removeEventListener("scroll",x),window.removeEventListener("resize",x)}},[e]),fp(()=>{e&&i(Gl(e))},[e,o]),!r)return null;let s=r,a=window.getComputedStyle(e),l=a.display;if(l!=="flex"&&l!=="inline-flex")return null;let d=a.flexDirection,c=d==="column"||d==="column-reverse"?"vertical":"horizontal",p=c==="horizontal"?"vertical":"horizontal",u=[];if(t==="shift"){let x=mp(a.justifyContent);if(x){let A=Cs.indexOf(x);c==="horizontal"?(A>0&&u.push("left"),A<Cs.length-1&&u.push("right")):(A>0&&u.push("up"),A<Cs.length-1&&u.push("down"))}}else{let x=hp(a.alignItems);if(x){let A=Es.indexOf(x);p==="horizontal"?(A>0&&u.push("left"),A<Es.length-1&&u.push("right")):(A>0&&u.push("up"),A<Es.length-1&&u.push("down"))}}if(u.length===0)return null;let g=14,b=7;return Xo(bp,{children:u.map(x=>{let A,T;switch(x){case"right":A=s.right+g,T=s.top+s.height/2;break;case"left":A=s.left-g,T=s.top+s.height/2;break;case"down":A=s.left+s.width/2,T=s.bottom+g;break;case"up":A=s.left+s.width/2,T=s.top-g;break}let z=x==="right"?0:x==="left"?180:x==="down"?90:-90,P={position:"fixed",left:A-b,top:T-b,width:b*2,height:b*2,pointerEvents:"none",zIndex:9997};return Xo("div",{"data-devtools":"swipe-hint",style:P,children:Xo("svg",{width:b*2,height:b*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:yp("g",{transform:`rotate(${z})`,children:[Xo("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),Xo("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),Xo("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),Xo("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},x)})})}import{useEffect as xp,useLayoutEffect as vp,useState as Sp}from"react";import{jsx as ks,jsxs as Ts}from"react/jsx-runtime";function wp(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 Yl({element:e,fontSize:t,lineHeight:n,accentColor:o,hoveredProperty:r,draggingProperty:i,cursorViewport:s}){let[a,l]=Sp(null);if(xp(()=>{if(!e){l(null);return}let T=()=>{l(hr(e))};return T(),window.addEventListener("scroll",T,{passive:!0}),window.addEventListener("resize",T,{passive:!0}),()=>{window.removeEventListener("scroll",T),window.removeEventListener("resize",T)}},[e]),vp(()=>{e&&l(hr(e))},[e,t,n]),!a)return null;let d=a.width,c=a.height,p=wp(o,.2),u=i!=null?i:r,g=8,b=2,x={position:"fixed",top:a.top,left:a.left,width:d,height:c,pointerEvents:"none",zIndex:9996,overflow:"visible"},A=T=>T==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return Ts("div",{"data-devtools":"text-handles",style:x,children:[Ts("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${c}`,children:[ks("rect",{x:"0.5",y:"0.5",width:Math.max(0,d-1),height:Math.max(0,c-1),fill:"none",stroke:p,strokeWidth:"1"}),(u==="font-size"||!u)&&ks("rect",{x:d-b/2,y:c/2-g/2,width:b,height:g,fill:o,stroke:"#ffffff",strokeWidth:u==="font-size"?4:2,paintOrder:"stroke"}),(u==="line-height"||!u)&&ks("rect",{x:d/2-g/2,y:c-b/2,width:g,height:b,fill:o,stroke:"#ffffff",strokeWidth:u==="line-height"?4:2,paintOrder:"stroke"})]}),s&&u&&(()=>{let T=u==="font-size"?"Aa":"Lh",z=A(u);return Ts("div",{style:{position:"fixed",left:s.x+8,top:s.y-28,background:o,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:[T," ",z]})})()]})}import{Fragment as Er,jsx as ft,jsxs as Cr}from"react/jsx-runtime";var Jl=8,Ms=[0,1,2,4,8,12,16,20,24,28,32],Is="devtools-active-text";function Ul(e,t,n=0,o,r){let i=e.left+window.scrollX+4,s=t==="top-left"?e.top+window.scrollY-Jn-n*Jn+4:e.bottom+window.scrollY+4-1+n*Jn,a=window.scrollY+4,l=window.scrollY+window.innerHeight-Jn-4,d=90,c=!1;if(o&&r!==void 0){let p=o.getBoundingClientRect();if(e.left+4+r+4+d>p.left){let g=window.scrollY+p.top-Jn-4;g<l&&(l=g,c=!0)}}return s<a?s=e.top+window.scrollY+4:s>l&&(s=c?l:Math.max(e.top+window.scrollY+4,l)),{x:i,y:s}}function Vl({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:o,activeAnnotationIds:r,queuePositionMap:i,inFlightStyleSelectors:s,inFlightSelectorColors:a,onAttachImages:l,onReply:d,onViewThread:c,onCloseThread:p,onModelComponentsAdd:u,onModelComponentFocus:g,onModelComponentHover:b,modelComponentNames:x,modelPanelHoveredComponent:A,modelSpacingTokenHover:T,highlightedAnnotationIds:z,focusedThreadAnnotationId:P,externalCanvasRef:O,toolbarRef:k}){var Ks,qs,Zs,Qs,ea,ta,na,oa,ra;let{canvasRef:G,redrawAll:re,resizeCanvas:oe}=Va(),W=cn(m=>{G.current=m,O&&(O.current=m)},[O,G]),Q=Xt(!1);xn(()=>{let m=G.current;if(!m)return;let y=()=>{Q.current&&(Q.current=!1,m.style.pointerEvents="")},Z=L=>{L.button===0&&Q.current&&y()};return window.addEventListener("mousedown",Z),()=>window.removeEventListener("mousedown",Z)},[G]);let[N,ee]=vt(!1),[M,Le]=vt(()=>{if(typeof window=="undefined")return null;try{let m=localStorage.getItem(Is);return m?JSON.parse(m):null}catch(m){return null}}),[V,fe]=vt(null),[D,ae]=vt(null),[I,pe]=vt(null),me=Xt(null),Fe=Xt(null),we=Xt({x:0,y:0}),Je=Xt([]),Re=Xt(0),[Ce,at]=vt(null),[gt,bt]=vt(new Map),Yt=Xt(0),K=Xt(null),[X,Te]=vt(null),[Oe,Xe]=vt(null),[Pe,he]=vt(null),[te,ie]=vt(null),ve=Xt({isDragging:!1,side:null,startX:0,startY:0,original:{top:0,right:0,bottom:0,left:0},element:null,elementInfo:null,selector:null,durableSelector:null}),[Me,mt]=vt(null),[Ne,ze]=vt(null),[nt,St]=vt(null),[Ke,qe]=vt(null),Rt=Xt({x:0,y:0}),[_n,Kn]=vt({x:0,y:0}),vn=Xt({isDragging:!1,hasMoved:!1,axis:null,startX:0,startY:0,originalRow:0,originalColumn:0,element:null,elementInfo:null,selector:null,durableSelector:null,isAuto:!1,originalJustifyContent:"",visualGap:0}),[It,qn]=vt(null),[on,Zn]=vt(null),[xt,rn]=vt(null),[_t,sn]=vt(!1),[Nn,An]=vt(0),[Kt,Sn]=vt(null),bn=Xt({isDragging:!1,corner:null,startY:0,original:{"top-left":0,"top-right":0,"bottom-right":0,"bottom-left":0},maxRadius:0,element:null,elementInfo:null,selector:null,durableSelector:null}),[$,De]=vt(null),[Ge,En]=vt(null),[At,qt]=vt(null),wn=Xt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[Wt,Gt]=vt(null),[Pn,Nt]=vt(null),[lt,Ht]=vt(null),Jt=Xa(),nr=Xt(a);nr.current=a;let go=cn(m=>{let y=nr.current;if(!y||y.size===0)return!1;for(let Z of y.keys())try{if(m.matches(Z))return!0}catch(L){}return!1},[]),Ao=Xt(e);Ao.current=e;let ao=Xt(M);ao.current=M;let mo=Xt([]),or=Xt(n);or.current=n;let[w,H]=vt(null),q=e.selectedAnnotationIds;mo.current=q;let ye=cn((m,y=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:m,addToSelection:y}})},[t]),de=cn(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[ge,He]=vt(null),[Ie,je]=vt({x:window.scrollX,y:window.scrollY});xn(()=>(oe(),window.addEventListener("resize",oe),()=>window.removeEventListener("resize",oe)),[oe]),xn(()=>{let m=()=>{je({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",m,{passive:!0}),()=>window.removeEventListener("scroll",m)},[]),xn(()=>{M?localStorage.setItem(Is,JSON.stringify(M)):localStorage.removeItem(Is)},[M]),Ka(M,Le,V,e.annotations,t);let Pt=Xt(Ce);Pt.current=Ce,xn(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let m=y=>{if(!y.altKey||!Pt.current)return;y.preventDefault();let Z=y.deltaY>0?-1:1;Yt.current=Math.max(0,Yt.current+Z);let L=K.current;if(L){let R=Qr(L,Yt.current);at(R)}};return window.addEventListener("wheel",m,{passive:!1}),()=>window.removeEventListener("wheel",m)},[e.activeTool,e.isAnnotating]),xn(()=>{e.activeTool!=="model"&&(at(null),bt(new Map),Yt.current=0,K.current=null)},[e.activeTool]),xn(()=>{var Z;let m=(Z=Ce==null?void 0:Ce.name)!=null?Z:null,y=m&&(x!=null&&x.has(m))?m:null;b==null||b(y)},[Ce,x,b]);let[Ft,un]=vt(null);xn(()=>{var Z;if(!A){un(null);return}let m=fr(A.name),y=A.instanceIndex;un((Z=m[y%m.length])!=null?Z:null)},[A]);let[S,C]=vt([]);xn(()=>{var m,y;if(!T){C([]);return}(y=(m=T.token)==null?void 0:m.bindings)!=null&&y.length?C(qi(T.token)):C(Xi(T.px))},[T]);let le=Xt(null),ce=Xt(null);le.current=It,ce.current=on,xn(()=>{let m=["flex-start","center","flex-end"],y=["flex-start","center","flex-end"],L=null,R=!1,j=null,ue=null,F=(be,_e)=>{let it=Go(be,_e);for(;it&&it!==document.documentElement;){let Ct=window.getComputedStyle(it).display;if(Ct==="flex"||Ct==="inline-flex")return it;it=it.parentElement}return null},ne=be=>{let _e=window.getComputedStyle(be).flexDirection;return _e==="column"||_e==="column-reverse"?"vertical":"horizontal"},v=be=>{let _e=be.getAttribute("data-pm");return _e||(_e=Math.random().toString(36).substring(2,8),be.setAttribute("data-pm",_e)),{selector:`[data-pm="${_e}"]`,durableSelector:Hn(be)}},E=()=>{R=!0,L&&clearTimeout(L),L=setTimeout(()=>{R=!1,L=null},300)},J=(be,_e,ct)=>{let it=ne(be);if(_e===it){let et=window.getComputedStyle(be).justifyContent,Bt=et==="normal"||et==="flex-start"||et==="start"?"flex-start":et==="flex-end"||et==="end"?"flex-end":et==="center"?"center":null;if(!Bt)return;let pn=m.indexOf(Bt)+ct;if(pn<0||pn>=m.length)return;let ho=m[pn],{selector:Bo,durableSelector:Oi}=v(be);Qe(be,"justify-content",ho),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Bo,durableSelector:Oi,element:Ln(be),changes:[{property:"justify-content",original:et,modified:ho}]}})}else{let et=window.getComputedStyle(be).flexDirection,Bt=it==="horizontal"?"column":"row",{selector:eo,durableSelector:pn}=v(be);Qe(be,"flex-direction",Bt),t({type:"MODIFY_STYLES_BATCH",payload:{selector:eo,durableSelector:pn,element:Ln(be),changes:[{property:"flex-direction",original:et,modified:Bt}]}})}An(Ct=>Ct+1)},B=(be,_e,ct)=>{let Ct=ne(be)==="horizontal"?"vertical":"horizontal";if(_e!==Ct)return;let Bt=window.getComputedStyle(be).alignItems,eo=Bt==="normal"||Bt==="stretch"||Bt==="flex-start"||Bt==="start"?"flex-start":Bt==="flex-end"||Bt==="end"?"flex-end":Bt==="center"?"center":null;if(!eo)return;let ho=y.indexOf(eo)+ct;if(ho<0||ho>=y.length)return;let Bo=y[ho],{selector:Oi,durableSelector:$c}=v(be);Qe(be,"align-items",Bo),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Oi,durableSelector:$c,element:Ln(be),changes:[{property:"align-items",original:Bt,modified:Bo}]}}),An(zc=>zc+1)},_=20,Y=null,U=null,xe=0,$e=(be,_e,ct)=>{let it=F(_e,ct);Sn(it?{modifier:be,target:it}:null)},tt=be=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(be.key==="Shift"&&!be.altKey){let _e=Rt.current;$e("shift",_e.x,_e.y)}else if(be.key==="Alt"&&!be.shiftKey){let _e=Rt.current;$e("alt",_e.x,_e.y)}}},ot=be=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let _e=be.shiftKey&&!be.altKey,ct=be.altKey&&!be.shiftKey;if(!_e&&!ct||be.buttons!==0){Y=null,U=null,xe=0,j=null,ue=null,Sn(null);return}if(j===null&&(j=be.clientX,ue=be.clientY,$e(_e?"shift":"alt",be.clientX,be.clientY)),R)return;Y===null&&(Y=be.clientX,U=be.clientY,xe=0);let it=be.clientX-Y,Ct=be.clientY-U,et=Math.abs(it)>=Math.abs(Ct)?it:Ct;if(Math.abs(et)>3){let Bo=et>0?1:-1;if(xe!==0&&Bo!==xe){Y=be.clientX,U=be.clientY,xe=0;return}xe=Bo}if(Math.abs(it)<_&&Math.abs(Ct)<_)return;let Bt=F(j,ue);if(!Bt)return;let eo=Math.abs(it)>=Math.abs(Ct)?"horizontal":"vertical",ho=(eo==="horizontal"?it:Ct)>0?1:-1;Y=null,U=null,xe=0,_e?J(Bt,eo,ho):B(Bt,eo,ho),E()},$t=be=>{(be.key==="Shift"||be.key==="Alt")&&(j=null,ue=null,Y=null,U=null,xe=0,Sn(null))},rt=()=>{Sn(null),Y=null,U=null,xe=0};return window.addEventListener("keydown",tt),window.addEventListener("mousemove",ot),window.addEventListener("mousedown",rt),window.addEventListener("keyup",$t),()=>{window.removeEventListener("keydown",tt),window.removeEventListener("mousemove",ot),window.removeEventListener("mousedown",rt),window.removeEventListener("keyup",$t),L&&clearTimeout(L)}},[e.activeTool,e.isAnnotating,t]),xn(()=>{let m=y=>{var j,ue,F,ne;if(y.key==="Escape"){if(ao.current)return;if(e.activeTool==="model"&>.size>0){y.preventDefault(),bt(new Map);return}if(mo.current.length>0){y.preventDefault(),de();return}}if(y.key==="Enter"&&e.activeTool==="model"&>.size>0&&u){y.preventDefault();let v=[...gt.keys()].filter(E=>!(x!=null&&x.has(E)));v.length>0&&u(v),bt(new Map);return}if((y.metaKey||y.ctrlKey)&&y.key==="v"&&Je.current.length>0&&!ao.current){y.preventDefault(),Re.current++;let v=Re.current*20,J=((j=Je.current[0])==null?void 0:j.groupId)?Math.random().toString(36).substring(2,9):void 0,B=Je.current.map(Y=>h(f({},Y),{id:Math.random().toString(36).substring(2,9),groupId:Y.groupId?J:void 0,timestamp:Date.now(),points:Y.points.map(U=>({x:U.x+v,y:U.y+v}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:B}});let _=B.find(Y=>Y.type!=="text")||B[0];_&&ye(_.id);return}let Z=mo.current;if(Z.length===0||ao.current)return;let L=(F=(ue=y.composedPath)==null?void 0:ue.call(y)[0])!=null?F:y.target,R=L==null?void 0:L.tagName;if(!(R==="INPUT"||R==="TEXTAREA"||L!=null&&L.isContentEditable)&&(y.key==="Delete"||y.key==="Backspace")){if(y.preventDefault(),p){let v=Ao.current.annotations;for(let E of Z){let J=v.find(_=>_.id===E);if(!J)continue;let B=J.threadId||J.groupId&&((ne=v.find(_=>_.groupId===J.groupId&&_.threadId))==null?void 0:ne.threadId);B&&p(B)}}for(let v of Z)t({type:"DELETE_ANNOTATION",payload:{id:v}});de()}};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[t,de,ye,e.activeTool,gt,x,u,p]);let Ae=cr(),ke=bi(()=>e.annotations.filter(m=>!m.pathname||m.pathname===Ae),[e.annotations,Ae]),Ue=bi(()=>ci(e.annotations),[e.annotations]),Ye=bi(()=>{let m=new Map,y=new Set,Z=1,L=[...e.annotations].sort((R,j)=>R.timestamp-j.timestamp);for(let R of L)if(!Ue.has(R))if(R.groupId){if(!y.has(R.groupId)){y.add(R.groupId);let j=e.annotations.filter(ue=>ue.groupId===R.groupId);for(let ue of j)m.set(ue.id,Z);Z++}}else m.set(R.id,Z),Z++;return m},[e.annotations,Ue]),Et=bi(()=>{if(q.length===0)return null;let m=new Map;for(let y of q){let Z=e.annotations.find(R=>R.id===y);if(!Z)continue;let L=Z.groupId?e.annotations.filter(R=>R.groupId===Z.groupId):[Z];for(let R of L)if(R.linkedSelector&&!(a!=null&&a.has(R.linkedSelector))){let j=R.color||e.activeColor;m.set(R.linkedSelector,j)}}return m.size>0?m:null},[q,e.annotations,e.activeColor,a]);xn(()=>{let m=ke.filter(y=>!(Ue.has(y)||M&&!M.isNew&&y.id===M.id));re(m,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,q,Jl,Ie.x,Ie.y,Ye,z)},[ke,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,re,M,q,Ie,Ye,Ue,z]),xn(()=>{if(D){let m=Math.random().toString(36).substring(2,9);Le({id:m,point:D.point,text:"",fontSize:12,isNew:!0,groupId:D.groupId}),ae(null)}},[D]),xn(()=>{I&&(Le({id:Math.random().toString(36).substring(2,9),point:I.point,text:"",fontSize:12,isNew:!0,linkedSelector:I.linkedSelector,linkedAnchor:I.linkedAnchor,elements:I.elements}),pe(null))},[I]);let wt=Xt(null),ht=(Ks=M==null?void 0:M.id)!=null?Ks:null;xn(()=>{ht&&me.current?requestAnimationFrame(()=>{var Z;let m=me.current;if(!m||(m.focus(),Fe.current===ht))return;Fe.current=ht;let y=ao.current;if(y){if(wt.current!==null){let L=Math.min(wt.current,m.value.length);m.setSelectionRange(L,L);return}if(!y.isNew&&y.clickPoint){let L=G.current;if(!L)return;let R=L.getContext("2d");if(!R)return;R.font=`${y.fontSize}px ${Qt}`;let j=y.fontSize*1.4,ue=y.text.split(`
|
|
4
|
-
`),F=y.clickPoint.y-y.point.y,ne=Math.max(0,Math.min(ue.length-1,Math.floor(F/j))),v=y.clickPoint.x-y.point.x,E=ue[ne]||"",J=0;for(let _=0;_<=E.length;_++){let Y=R.measureText(E.substring(0,_)).width;if(Y>v){let U=_>0?R.measureText(E.substring(0,_-1)).width:0;J=v-U<Y-v?_-1:_;break}J=_}let B=J;for(let _=0;_<ne;_++)B+=(((Z=ue[_])==null?void 0:Z.length)||0)+1;m.setSelectionRange(B,B)}}}):(Fe.current=null,wt.current=null)},[ht,G]);let kt=cn(m=>{let y=G.current;if(!y)return{x:0,y:0};let Z=y.getBoundingClientRect(),L,R;if("touches"in m&&m.touches[0])L=m.touches[0].clientX,R=m.touches[0].clientY;else if("clientX"in m)L=m.clientX,R=m.clientY;else return{x:0,y:0};return{x:L-Z.left+window.scrollX,y:R-Z.top+window.scrollY}},[G]),ut=cn((m,y,Z,L)=>{let R=Z.x-y.x,j=Z.y-y.y,ue=R*R+j*j;if(ue===0)return Math.sqrt((m.x-y.x)**2+(m.y-y.y)**2)<=L;let F=Math.max(0,Math.min(1,((m.x-y.x)*R+(m.y-y.y)*j)/ue)),ne=y.x+F*R,v=y.y+F*j;return Math.sqrt((m.x-ne)**2+(m.y-v)**2)<=L},[]),Ut=cn(m=>{for(let Z=ke.length-1;Z>=0;Z--){let L=ke[Z];if(!L||Ue.has(L))continue;let R=(L.strokeWidth||3)+4;switch(L.type){case"text":{if(!L.points[0]||!L.text)continue;let j=L.points[0],ue=L.fontSize||12,F=G.current;if(F){let ne=F.getContext("2d");if(ne){ne.font=`${ue}px ${Qt}`;let v=L.text.replace(/\n/g," "),E=j.x-Ie.x,J=dr(E),B=ur(ne,v,J),_=ne.measureText(B).width,Y=ue*1.4;if(m.x>=j.x-4-4&&m.x<=j.x+_+4+4&&m.y>=j.y-4-4&&m.y<=j.y+Y+4+4)return L}}break}case"rectangle":{if(L.points.length<2)continue;let j=L.points[0],ue=L.points[L.points.length-1],F=Math.min(j.x,ue.x),ne=Math.max(j.x,ue.x),v=Math.min(j.y,ue.y),E=Math.max(j.y,ue.y),J=ut(m,{x:F,y:v},{x:ne,y:v},R),B=ut(m,{x:F,y:E},{x:ne,y:E},R),_=ut(m,{x:F,y:v},{x:F,y:E},R),Y=ut(m,{x:ne,y:v},{x:ne,y:E},R);if(J||B||_||Y)return L;break}case"circle":{if(L.points.length<2)continue;let j=L.points[0],ue=L.points[L.points.length-1],F=(j.x+ue.x)/2,ne=(j.y+ue.y)/2,v=Math.abs(ue.x-j.x)/2,E=Math.abs(ue.y-j.y)/2,J=m.x-F,B=m.y-ne,_=Math.sqrt((J/v)**2+(B/E)**2);if(Math.abs(_-1)*Math.max(v,E)<=R)return L;break}case"line":{if(L.points.length<2)continue;let j=L.points[0],ue=L.points[L.points.length-1];if(ut(m,j,ue,R))return L;break}case"freehand":{if(L.points.length<2)continue;for(let j=0;j<L.points.length-1;j++){let ue=L.points[j],F=L.points[j+1];if(ut(m,ue,F,R))return L}break}}}return null},[ke,G,ut,Ue,Ie.x]),Qn=cn(m=>{let y=Ut(m);return(y==null?void 0:y.type)==="text"?y:null},[Ut]),kn=cn(m=>{if(q.length===0)return null;let y=Jl/2+4;for(let Z of q){let L=e.annotations.find(R=>R.id===Z);if(!(!L||L.points.length<2)){if(L.type==="line"){let R=L.points[0],j=L.points[L.points.length-1];if(Math.sqrt((m.x-R.x)**2+(m.y-R.y)**2)<=y)return{handle:"start",annotationId:Z};if(Math.sqrt((m.x-j.x)**2+(m.y-j.y)**2)<=y)return{handle:"end",annotationId:Z};continue}if(L.type==="circle"){let R=L.points[0],j=L.points[L.points.length-1],ue=Math.min(R.x,j.x),F=Math.max(R.x,j.x),ne=Math.min(R.y,j.y),v=Math.max(R.y,j.y),E=(ue+F)/2,J=(ne+v)/2,B=[{handle:"top",x:E,y:ne},{handle:"bottom",x:E,y:v},{handle:"left",x:ue,y:J},{handle:"right",x:F,y:J}];for(let{handle:_,x:Y,y:U}of B)if(Math.sqrt((m.x-Y)**2+(m.y-U)**2)<=y)return{handle:_,annotationId:Z};continue}if(L.type==="rectangle"||L.type==="freehand"){let R=L.points[0],j=L.points[L.points.length-1],ue,F,ne,v;L.type==="freehand"?(ue=Math.min(...L.points.map(J=>J.x)),F=Math.max(...L.points.map(J=>J.x)),ne=Math.min(...L.points.map(J=>J.y)),v=Math.max(...L.points.map(J=>J.y))):(ue=Math.min(R.x,j.x),F=Math.max(R.x,j.x),ne=Math.min(R.y,j.y),v=Math.max(R.y,j.y));let E=[{corner:"topLeft",x:ue,y:ne},{corner:"topRight",x:F,y:ne},{corner:"bottomLeft",x:ue,y:v},{corner:"bottomRight",x:F,y:v}];for(let{corner:J,x:B,y:_}of E)if(Math.sqrt((m.x-B)**2+(m.y-_)**2)<=y)return{handle:J,annotationId:Z}}}}return null},[q,e.annotations]);xn(()=>{let m=y=>{if(we.current={x:y.clientX+window.scrollX,y:y.clientY+window.scrollY},!M){let Z=Qn(we.current);fe((Z==null?void 0:Z.id)||null)}};return window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m)},[M,Qn]);let Vt=cn(()=>{var y;if(!M)return;let m=((y=M.images)==null?void 0:y.length)||0;if(M.text.trim()||m>0)if(M.isNew){let Z=Kr();t({type:"ADD_TEXT",payload:f({point:M.point,text:M.text||(m>0?`[${m} image${m>1?"s":""}]`:""),fontSize:M.fontSize,id:Z,groupId:M.groupId,linkedSelector:M.linkedSelector,linkedAnchor:M.linkedAnchor,elements:M.elements},m>0?{imageCount:m}:{})}),m>0&&M.images&&l&&l(Z,M.images)}else t({type:"UPDATE_TEXT",payload:f({id:M.id,text:M.text||(m>0?`[${m} image${m>1?"s":""}]`:"")},m>0?{imageCount:m}:{})}),m>0&&M.images&&l&&l(M.id,M.images);else M.isNew||t({type:"DELETE_ANNOTATION",payload:{id:M.id}});Le(null)},[M,t,l]),pt=cn(m=>{for(let y=0;y<Ms.length-1;y++){let Z=Ms[y],L=Ms[y+1];if(m<=(Z+L)/2)return Z;if(m<L)return L}return Math.round(m/8)*8},[]),Cn=cn((m,y,Z,L)=>{let R=Z.top+Math.max(L.top,4),j=Z.bottom-Math.max(L.bottom,4),ue=Z.left+Math.max(L.left,4),F=Z.right-Math.max(L.right,4);if(m<Z.left||m>Z.right||y<Z.top||y>Z.bottom)return null;let ne=y<R,v=y>j,E=m<ue,J=m>F;return ne&&E?L.top>=L.left?"top":"left":ne&&J?L.top>=L.right?"top":"right":v&&E?L.bottom>=L.left?"bottom":"left":v&&J?L.bottom>=L.right?"bottom":"right":ne?"top":v?"bottom":E?"left":J?"right":null},[]),Ze=cn(m=>{var j,ue;if(!e.isAnnotating)return;if(e.inspectedElement&&e.activeTool==="hand"&&!("button"in m&&m.button===2)){m.preventDefault(),m.stopPropagation(),t({type:"SELECT_ELEMENT",payload:null});return}let y=kt(m),Z="shiftKey"in m&&m.shiftKey;if(e.activeTool==="inspector"){if("button"in m&&m.button===2)return;if(X&&!go(X)){let F=e.annotations.find(tt=>{if(!tt.linkedSelector||!tt.threadId)return!1;try{return X.matches(tt.linkedSelector)}catch(ot){return!1}});if(F!=null&&F.threadId&&c){c(F.threadId),requestAnimationFrame(()=>{var $t;let tt=document.querySelector("[data-popmelt-shadow-host]"),ot=($t=tt==null?void 0:tt.shadowRoot)==null?void 0:$t.querySelector("[data-popmelt-reply]");ot==null||ot.focus()});return}let ne=Ln(X),v=Hn(X),E=X.getBoundingClientRect(),J=X.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),X.setAttribute("data-pm",J));let B=`[data-pm="${J}"]`,_=e.styleModifications.some(tt=>{try{return X.matches(tt.selector)}catch(ot){return!1}}),Y=e.annotations.filter(tt=>{if(!tt.linkedSelector)return!1;try{return X.matches(tt.linkedSelector)}catch(ot){return!1}}).length,U=(_?1:0)+Y,xe=E.top>=Jn*(1+U)?"top-left":"bottom-left",$e=Ul(E,xe,U,k==null?void 0:k.current);pe({point:$e,linkedSelector:B,linkedAnchor:xe,elements:[h(f({},ne),{selector:v})]})}return}if(e.activeTool==="model"){if("button"in m&&m.button===2)return;if(Ce){let F=Ce.name;if(x!=null&&x.has(F)){g==null||g(F);return}"shiftKey"in m&&m.shiftKey?bt(v=>{let E=new Map(v);return E.has(F)?E.delete(F):E.set(F,Ce),E}):gt.size===1&>.has(F)?(u&&u([F]),bt(new Map)):bt(new Map([[F,Ce]]))}return}if(e.activeTool==="hand"&&It&&on){let F=It,ne=F.getAttribute("data-pm");ne||(ne=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",ne));let v=Hn(F),E=`[data-pm="${ne}"]`,J=Ln(F),B=jo(F),_=y.x-window.scrollX,Y=y.y-window.scrollY,U=_t,xe=window.getComputedStyle(F).justifyContent,$e=0;if(U){let ot=yo(F).find($t=>$t.axis===on);$e=ot?on==="column"?ot.w:ot.h:0}Qe(F,"transition","none"),vn.current={isDragging:!0,hasMoved:!1,axis:on,startX:_,startY:Y,originalRow:U?$e:B.row,originalColumn:U?$e:B.column,element:F,elementInfo:h(f({},J),{selector:E}),selector:E,durableSelector:v,isAuto:U,originalJustifyContent:xe,visualGap:$e},rn({axis:on,row:U?$e:B.row,column:U?$e:B.column});return}if(e.activeTool==="hand"&&Wt&&Pn){let F=Wt,ne=F.getAttribute("data-pm");ne||(ne=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",ne));let v=`[data-pm="${ne}"]`,E=Ln(F),{fontSize:J,lineHeight:B}=Br(F),_=J>0?B/J:1.2,Y=y.x-window.scrollX,U=y.y-window.scrollY;Qe(F,"transition","none");let xe=Hn(F);wn.current={isDragging:!0,property:Pn,startX:Y,startY:U,originalFontSize:J,originalLineHeight:B,originalRatio:_,element:F,elementInfo:h(f({},E),{selector:v}),selector:v,durableSelector:xe},Ht({property:Pn,fontSize:J,lineHeight:B});return}if(e.activeTool==="hand"&&$&&Ge){let F=$,ne=F.getAttribute("data-pm");ne||(ne=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",ne));let v=`[data-pm="${ne}"]`,E=Hn(F),J=Ln(F),B=Yo(F),_=F.getBoundingClientRect(),Y=Math.floor(_.height/2),U=y.y-window.scrollY;Qe(F,"transition","none"),bn.current={isDragging:!0,corner:Ge,startY:U,original:B,maxRadius:Y,element:F,elementInfo:h(f({},J),{selector:v}),selector:v,durableSelector:E},qt({corner:Ge,radius:f({},B)});return}if(e.activeTool==="hand"&&Me&&Ne){let F=Me,ne=F.getAttribute("data-pm");ne||(ne=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",ne));let v=`[data-pm="${ne}"]`,E=Hn(F),J=Ln(F),B=mr(F),_=y.x-window.scrollX,Y=y.y-window.scrollY;Qe(F,"transition","none"),ve.current={isDragging:!0,side:Ne,startX:_,startY:Y,original:B,element:F,elementInfo:h(f({},J),{selector:v}),selector:v,durableSelector:E},qe({side:Ne,padding:f({},B)});return}let L=kn(y);if(L){let F=e.annotations.find(ne=>ne.id===L.annotationId);if(F&&F.type!=="text"&&((j=F.status)!=null?j:"pending")==="pending"){He({annotationId:L.annotationId,handle:L.handle,startPoint:y,originalPoints:[...F.points],hasMoved:!1});return}}let R=Ut(y);if(R&&R.points[0]){if(M&&Vt(),R.type!=="text"?(ye(R.id,Z),R.color&&t({type:"SET_COLOR",payload:R.color})):Z||de(),c){let F=R.threadId||(R.groupId?(ue=e.annotations.find(ne=>ne.groupId===R.groupId&&ne.threadId))==null?void 0:ue.threadId:void 0);F&&c(F)}H({annotation:R,startPoint:y,hasMoved:!1});return}if(Z||de(),e.activeTool==="text"){M&&Vt();let F=Math.random().toString(36).substring(2,9);Le({id:F,point:y,text:"",fontSize:12,isNew:!0});return}ee(!0),t({type:"START_PATH",payload:y})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,M,q,X,Me,Ne,$,Ge,It,on,_t,Wt,Pn,Ce,gt,x,u,g,c,kt,Ut,kn,t,ye,de,Vt]),Ot=cn(m=>{var Z,L;let y=kt(m);if(e.activeTool==="inspector"&&e.isAnnotating){let R=y.x-window.scrollX,j=y.y-window.scrollY,ue=Go(R,j),F=ue&&go(ue)?null:ue;F!==X&&(Te(F),Xe(F?Ln(F):null));return}if(e.activeTool==="model"&&e.isAnnotating){let R=y.x-window.scrollX,j=y.y-window.scrollY,ue=Go(R,j);if(ue!==K.current&&(K.current=ue,Yt.current=0),ue){let F=Qr(ue,Yt.current);at(F)}else at(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let R=y.x-window.scrollX,j=y.y-window.scrollY;Rt.current={x:R,y:j},Kn({x:R,y:j});let ue=Jt.current.cmd,F=Jt.current.shift;if(vn.current.isDragging){let v=vn.current,E=v.element;if(!E)return;if(!v.hasMoved){let Y=Math.abs(R-v.startX),U=Math.abs(j-v.startY);if(Y<=2&&U<=2)return;v.hasMoved=!0,v.isAuto&&(Qe(E,"justify-content","normal"),Qe(E,"row-gap",`${v.visualGap}px`),Qe(E,"column-gap",`${v.visualGap}px`),sn(!1))}let J=v.axis,B=v.originalRow,_=v.originalColumn;if(J==="column"){let Y=R-v.startX;_=v.originalColumn+Y,ue||(B=v.originalRow+Y)}else{let Y=j-v.startY;B=v.originalRow+Y,ue||(_=v.originalColumn+Y)}B=Math.max(0,B),_=Math.max(0,_),F&&(B=pt(B),_=pt(_)),B=Math.round(B),_=Math.round(_),Qe(E,"row-gap",`${B}px`),Qe(E,"column-gap",`${_}px`),rn({axis:J,row:B,column:_});return}if(bn.current.isDragging){let v=bn.current,E=v.element;if(!E)return;let J=j-v.startY,B=v.corner,_=v.original,Y=f({},_);if(ue){let U=_[B]+J;U=Math.max(0,Math.min(v.maxRadius,U)),F&&(U=pt(U)),U=Math.round(U),Y[B]=U}else{let U=_[B]+J;U=Math.max(0,Math.min(v.maxRadius,U)),F&&(U=pt(U)),U=Math.round(U),Y={"top-left":U,"top-right":U,"bottom-right":U,"bottom-left":U}}Qe(E,"border-top-left-radius",`${Y["top-left"]}px`),Qe(E,"border-top-right-radius",`${Y["top-right"]}px`),Qe(E,"border-bottom-right-radius",`${Y["bottom-right"]}px`),Qe(E,"border-bottom-left-radius",`${Y["bottom-left"]}px`),qt({corner:B,radius:Y});return}if(wn.current.isDragging){let v=wn.current,E=v.element;if(!E)return;let J=v.property,B=v.originalFontSize,_=v.originalLineHeight,Y=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(J==="font-size"){let xe=R-v.startX;B=v.originalFontSize+xe,B=Math.max(1,B)}else{let xe=j-v.startY;_=v.originalLineHeight+xe,_=Math.max(B,_)}if(F)if(J==="font-size"){let xe=Y[0],$e=Math.abs(B-xe);for(let tt of Y){let ot=Math.abs(B-tt);ot<$e&&(xe=tt,$e=ot)}B=xe}else{let xe=B>0?_/B:1.2,$e=Math.round(xe*2)/2;_=B*Math.max(1,$e)}B=Math.round(B),_=Math.round(_*10)/10,Qe(E,"font-size",`${B}px`);let U=B>0?Math.round(_/B*1e3)/1e3:1.2;Qe(E,"line-height",`${U}`),Ht({property:J,fontSize:B,lineHeight:_});return}if(ve.current.isDragging){let v=ve.current,E=v.element;if(!E)return;let J=v.side,B=v.original,_=B.top,Y=B.right,U=B.bottom,xe=B.left;if(J==="top"){let $e=v.startY-j;_=B.top+$e,ue||(U=B.bottom+$e)}else if(J==="bottom"){let $e=j-v.startY;U=B.bottom+$e,ue||(_=B.top+$e)}else if(J==="left"){let $e=v.startX-R;xe=B.left+$e,ue||(Y=B.right+$e)}else if(J==="right"){let $e=R-v.startX;Y=B.right+$e,ue||(xe=B.left+$e)}_=Math.max(0,_),Y=Math.max(0,Y),U=Math.max(0,U),xe=Math.max(0,xe),F&&(_=pt(_),Y=pt(Y),U=pt(U),xe=pt(xe)),_=Math.round(_),Y=Math.round(Y),U=Math.round(U),xe=Math.round(xe),Qe(E,"padding",`${_}px ${Y}px ${U}px ${xe}px`),qe({side:J,padding:{top:_,right:Y,bottom:U,left:xe}});return}let ne=Go(R,j);for(;ne&&ne.tagName==="A";)ne=ne.parentElement;{let E=[];ne&&E.push(ne),$&&$!==ne&&E.push($);let J=null,B=16,_=null;for(let Y of E){let U=Y.getBoundingClientRect(),xe=Yo(Y),$e=[["top-left",U.left,U.top+xe["top-left"]],["top-right",U.right,U.top+xe["top-right"]],["bottom-right",U.right,U.bottom-xe["bottom-right"]],["bottom-left",U.left,U.bottom-xe["bottom-left"]]];for(let[tt,ot,$t]of $e){let rt=Math.hypot(R-ot,j-$t);rt<B&&(B=rt,J=tt,_=Y)}}if(J&&_){De(_),En(J),Me&&mt(null),Ne&&ze(null),It&&qn(null),on&&Zn(null),sn(!1),Wt&&Gt(null),Pn&&Nt(null);return}}$&&De(null),Ge&&En(null);{let v=[];ne&&oi(ne)&&v.push(ne);let E=(Z=ne==null?void 0:ne.parentElement)!=null?Z:null;for(;E&&E!==document.body&&v.length<3;)oi(E)&&v.push(E),E=E.parentElement;for(let J of v){let _=yo(J).find(Y=>R>=Y.x&&R<=Y.x+Y.w&&j>=Y.y&&j<=Y.y+Y.h);if(_){qn(J),Zn(_.axis),sn(Qi(J,_.axis)),Me&&mt(null),Ne&&ze(null),Wt&&Gt(null),Pn&&Nt(null);return}}}It&&qn(null),on&&Zn(null),sn(!1);{let E=[];ne&&E.push(ne),Wt&&Wt!==ne&&E.push(Wt);let J=null,B=1/0,_=null;for(let Y of E){if(!es(Y))continue;let U=hr(Y);if(!U)continue;let xe=R>=U.left&&R<=U.right&&j>=U.top&&j<=U.bottom,$e=[["font-size",U.right,U.top+U.height/2],["line-height",U.left+U.width/2,U.bottom]];for(let[tt,ot,$t]of $e){let rt=Math.hypot(R-ot,j-$t);(xe||rt<12)&&rt<B&&(B=rt,J=tt,_=Y)}}J&&_?(Gt(_),Nt(J)):(Wt&&Gt(null),Pn&&Nt(null))}if(ne!==Me&&mt(ne),ne){let v=mr(ne),E=ne.getBoundingClientRect(),J=Cn(R,j,E,v);ze(J)}else ze(null);return}if(ge){let{handle:R,originalPoints:j,hasMoved:ue}=ge,F=e.annotations.find(B=>B.id===ge.annotationId);if(!F)return;let ne="metaKey"in m,v=ne&&(m.metaKey||m.ctrlKey),E=ne&&m.shiftKey,J;if(F.type==="line"){let B=j[0],_=j[j.length-1];R==="start"?J=[y,_]:J=[B,y]}else if(F.type==="freehand"){let B=Math.min(...j.map(et=>et.x)),_=Math.max(...j.map(et=>et.x)),Y=Math.min(...j.map(et=>et.y)),U=Math.max(...j.map(et=>et.y)),xe=(B+_)/2,$e=(Y+U)/2,tt=_-B||1,ot=U-Y||1,$t=tt/ot,rt=B,be=_,_e=Y,ct=U;switch(R){case"topLeft":rt=y.x,_e=y.y;break;case"topRight":be=y.x,_e=y.y;break;case"bottomLeft":rt=y.x,ct=y.y;break;case"bottomRight":be=y.x,ct=y.y;break}if(v)switch(R){case"topLeft":be=_+(B-rt),ct=U+(Y-_e);break;case"topRight":rt=B-(be-_),ct=U+(Y-_e);break;case"bottomLeft":be=_+(B-rt),_e=Y-(ct-U);break;case"bottomRight":rt=B-(be-_),_e=Y-(ct-U);break}if(E){let et=be-rt,Bt=ct-_e;if(Math.abs(et/Bt)>$t){let pn=Math.abs(Bt)*$t*Math.sign(et);R==="topLeft"||R==="bottomLeft"?rt=be-pn:be=rt+pn}else{let pn=Math.abs(et)/$t*Math.sign(Bt);R==="topLeft"||R==="topRight"?_e=ct-pn:ct=_e+pn}}let it=be-rt||1,Ct=ct-_e||1;J=j.map(et=>({x:rt+(et.x-B)/tt*it,y:_e+(et.y-Y)/ot*Ct}))}else if(F.type==="circle"){let B=j[0],_=j[j.length-1],Y=Math.min(B.x,_.x),U=Math.max(B.x,_.x),xe=Math.min(B.y,_.y),$e=Math.max(B.y,_.y),tt=(Y+U)/2,ot=(xe+$e)/2,$t=U-Y,rt=$e-xe,be=Y,_e=U,ct=xe,it=$e;switch(R){case"top":if(ct=y.y,v&&(it=ot+(ot-y.y)),E){let et=(it-ct)*($t/rt)/2;be=tt-et,_e=tt+et}break;case"bottom":if(it=y.y,v&&(ct=ot-(y.y-ot)),E){let et=(it-ct)*($t/rt)/2;be=tt-et,_e=tt+et}break;case"left":if(be=y.x,v&&(_e=tt+(tt-y.x)),E){let et=(_e-be)*(rt/$t)/2;ct=ot-et,it=ot+et}break;case"right":if(_e=y.x,v&&(be=tt-(y.x-tt)),E){let et=(_e-be)*(rt/$t)/2;ct=ot-et,it=ot+et}break}J=[{x:be,y:ct},{x:_e,y:it}]}else{let B=j[0],_=j[j.length-1],Y=Math.min(B.x,_.x),U=Math.max(B.x,_.x),xe=Math.min(B.y,_.y),$e=Math.max(B.y,_.y),tt=(Y+U)/2,ot=(xe+$e)/2,$t=U-Y||1,rt=$e-xe||1,be=$t/rt,_e=Y,ct=U,it=xe,Ct=$e;switch(R){case"topLeft":_e=y.x,it=y.y;break;case"topRight":ct=y.x,it=y.y;break;case"bottomLeft":_e=y.x,Ct=y.y;break;case"bottomRight":ct=y.x,Ct=y.y;break}if(v)switch(R){case"topLeft":ct=U+(Y-_e),Ct=$e+(xe-it);break;case"topRight":_e=Y-(ct-U),Ct=$e+(xe-it);break;case"bottomLeft":ct=U+(Y-_e),it=xe-(Ct-$e);break;case"bottomRight":_e=Y-(ct-U),it=xe-(Ct-$e);break}if(E){let et=ct-_e,Bt=Ct-it;if(Math.abs(et/Bt)>be){let pn=Math.abs(Bt)*be*Math.sign(et);R==="topLeft"||R==="bottomLeft"?_e=ct-pn:ct=_e+pn}else{let pn=Math.abs(et)/be*Math.sign(Bt);R==="topLeft"||R==="topRight"?it=Ct-pn:Ct=it+pn}}J=[{x:_e,y:it},{x:ct,y:Ct}]}t({type:"RESIZE_ANNOTATION",payload:{id:ge.annotationId,points:J,saveUndo:!ue}}),ue||He(h(f({},ge),{hasMoved:!0}));return}if(w&&((L=w.annotation.status)!=null?L:"pending")==="pending"){let R=y.x-w.startPoint.x,j=y.y-w.startPoint.y;if((Math.abs(R)>2||Math.abs(j)>2)&&!w.hasMoved)H(h(f({},w),{hasMoved:!0,startPoint:y})),t({type:"MOVE_ANNOTATION",payload:{id:w.annotation.id,delta:{x:R,y:j},saveUndo:!0}});else if(w.hasMoved){let F=y.x-w.startPoint.x,ne=y.y-w.startPoint.y;H(h(f({},w),{startPoint:y})),t({type:"MOVE_ANNOTATION",payload:{id:w.annotation.id,delta:{x:F,y:ne}}})}return}!N||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:y})},[N,e.isAnnotating,e.activeTool,w,ge,X,Me,Ne,$,Ge,It,on,Wt,Pn,kt,t,pt,Cn]),Zt=cn(m=>{var L,R,j,ue,F,ne;if(wn.current.isDragging){let v=wn.current,E=v.element;if(E&&v.selector&&v.elementInfo&<){E instanceof HTMLElement&&(E.style.removeProperty("font-size"),E.style.removeProperty("line-height"),E.style.removeProperty("transition"));let J=[];if(v.originalFontSize!==lt.fontSize&&(Qe(E,"font-size",`${lt.fontSize}px`),J.push({property:"font-size",original:`${v.originalFontSize}px`,modified:`${lt.fontSize}px`})),v.originalLineHeight!==lt.lineHeight){let B=v.originalFontSize>0?Math.round(v.originalLineHeight/v.originalFontSize*1e3)/1e3:1.2,_=lt.fontSize>0?Math.round(lt.lineHeight/lt.fontSize*1e3)/1e3:1.2;Qe(E,"line-height",`${_}`),J.push({property:"line-height",original:`${B}`,modified:`${_}`})}J.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:v.selector,durableSelector:(L=v.durableSelector)!=null?L:void 0,element:v.elementInfo,changes:J}})}wn.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},Ht(null);return}if(vn.current.isDragging){let v=vn.current,E=v.element,J="button"in m&&m.button===2;if(!v.hasMoved&&!J&&E&&v.selector&&v.elementInfo){E instanceof HTMLElement&&E.style.removeProperty("transition");let B=["space-between","space-around","stretch","normal"],_=v.originalJustifyContent||"normal",Y=B.indexOf(_),U=B[(Y+1)%B.length],xe=[];U==="normal"?(Qe(E,"justify-content","normal"),xe.push({property:"justify-content",original:v.originalJustifyContent,modified:"normal"})):U==="stretch"?(Qe(E,"justify-content",U),Qe(E,"row-gap","8px"),Qe(E,"column-gap","8px"),xe.push({property:"justify-content",original:v.originalJustifyContent||"normal",modified:U}),v.originalRow!==8&&xe.push({property:"row-gap",original:`${v.originalRow}px`,modified:"8px"}),v.originalColumn!==8&&xe.push({property:"column-gap",original:`${v.originalColumn}px`,modified:"8px"})):(E instanceof HTMLElement&&(E.style.removeProperty("row-gap"),E.style.removeProperty("column-gap")),Qe(E,"justify-content",U),xe.push({property:"justify-content",original:v.originalJustifyContent||"normal",modified:U}),v.originalRow>0&&xe.push({property:"row-gap",original:`${v.originalRow}px`,modified:"0px"}),v.originalColumn>0&&xe.push({property:"column-gap",original:`${v.originalColumn}px`,modified:"0px"})),xe.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:v.selector,durableSelector:(R=v.durableSelector)!=null?R:void 0,element:v.elementInfo,changes:xe}})}else if(v.hasMoved&&E&&v.selector&&v.elementInfo&&xt){E instanceof HTMLElement&&(E.style.removeProperty("row-gap"),E.style.removeProperty("column-gap"),E.style.removeProperty("transition"));let B=[];v.isAuto?(E instanceof HTMLElement&&E.style.removeProperty("justify-content"),Qe(E,"justify-content","normal"),Qe(E,"row-gap",`${xt.row}px`),Qe(E,"column-gap",`${xt.column}px`),B.push({property:"justify-content",original:v.originalJustifyContent,modified:"normal"}),B.push({property:"row-gap",original:"0px",modified:`${xt.row}px`}),B.push({property:"column-gap",original:"0px",modified:`${xt.column}px`})):(v.originalRow!==xt.row&&(Qe(E,"row-gap",`${xt.row}px`),B.push({property:"row-gap",original:`${v.originalRow}px`,modified:`${xt.row}px`})),v.originalColumn!==xt.column&&(Qe(E,"column-gap",`${xt.column}px`),B.push({property:"column-gap",original:`${v.originalColumn}px`,modified:`${xt.column}px`}))),B.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:v.selector,durableSelector:(j=v.durableSelector)!=null?j:void 0,element:v.elementInfo,changes:B}})}vn.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},rn(null);return}if(bn.current.isDragging){let v=bn.current,E=v.element;if(E&&v.selector&&v.elementInfo&&At){E instanceof HTMLElement&&(E.style.removeProperty("border-top-left-radius"),E.style.removeProperty("border-top-right-radius"),E.style.removeProperty("border-bottom-right-radius"),E.style.removeProperty("border-bottom-left-radius"),E.style.removeProperty("transition"));let J=["top-left","top-right","bottom-right","bottom-left"],B={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},_=[];for(let Y of J)v.original[Y]!==At.radius[Y]&&(Qe(E,B[Y],`${At.radius[Y]}px`),_.push({property:B[Y],original:`${v.original[Y]}px`,modified:`${At.radius[Y]}px`}));_.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:v.selector,durableSelector:(ue=v.durableSelector)!=null?ue:void 0,element:v.elementInfo,changes:_}})}bn.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},qt(null);return}if(ve.current.isDragging){let v=ve.current,E=v.element,J=v.selector,B=v.elementInfo;if(E&&J&&B&&Ke){let _=v.original,Y=Ke.padding;E instanceof HTMLElement&&(E.style.removeProperty("padding"),E.style.removeProperty("transition"));let U=[],xe=[{prop:"padding-top",origVal:_.top,newVal:Y.top},{prop:"padding-right",origVal:_.right,newVal:Y.right},{prop:"padding-bottom",origVal:_.bottom,newVal:Y.bottom},{prop:"padding-left",origVal:_.left,newVal:Y.left}];for(let{prop:$e,origVal:tt,newVal:ot}of xe)tt!==ot&&(Qe(E,$e,`${ot}px`),U.push({property:$e,original:`${tt}px`,modified:`${ot}px`}));U.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:J,durableSelector:(F=v.durableSelector)!=null?F:void 0,element:B,changes:U}})}ve.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},qe(null);return}if(ge){He(null);return}if(w){if(!w.hasMoved&&w.annotation.type==="text"&&((ne=w.annotation.status)!=null?ne:"pending")==="pending"){let v=kt(m);Le({id:w.annotation.id,point:w.annotation.points[0],text:w.annotation.text||"",fontSize:w.annotation.fontSize||12,isNew:!1,clickPoint:v,groupId:w.annotation.groupId})}H(null);return}if(!N)return;let y=5;if(e.currentPath.length>=2){let v=e.currentPath[0],E=e.currentPath[e.currentPath.length-1],J=Math.abs(E.x-v.x),B=Math.abs(E.y-v.y);if((e.activeTool==="line"?Math.sqrt(J*J+B*B)<y:J<y&&B<y)&&["rectangle","circle","line"].includes(e.activeTool)){ee(!1),t({type:"CANCEL_PATH"});return}}let Z=Vi(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let v=e.currentPath[0],E=e.currentPath[e.currentPath.length-1],J=Math.min(v.x,E.x),B=Math.max(v.y,E.y),_=e.strokeWidth/2,Y=Math.random().toString(36).substring(2,9);ae({point:{x:J-_+4,y:B+_+4},groupId:Y}),ee(!1),t({type:"FINISH_PATH",payload:{groupId:Y,elements:Z}});return}ee(!1),t({type:"FINISH_PATH",payload:{elements:Z}})},[N,w,ge,Ke,At,xt,lt,kt,t,e.activeTool,e.currentPath,e.strokeWidth]),Tn=cn(m=>{let y=m.target.value;wt.current=m.target.selectionStart,Le(Z=>Z&&h(f({},Z),{text:y}))},[]),Po=cn(m=>{m.key==="Escape"?Le(null):m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),Vt())},[Vt]),Oo=cn(m=>{if(!M)return;let y=m.clipboardData.items,Z=[];for(let L=0;L<y.length;L++){let R=y[L];if(R.type.startsWith("image/")){let j=R.getAsFile();j&&Z.push(j)}}Z.length>0&&(m.preventDefault(),Le(L=>L?h(f({},L),{images:[...L.images||[],...Z]}):null))},[M]),Gn=cn(m=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){m.preventDefault();let Z=Me||It||$||Wt;if(Z&&!go(Z)){let L=Ln(Z),R=Hn(Z);t({type:"SELECT_ELEMENT",payload:{el:Z,info:h(f({},L),{selector:R})}})}return}m.preventDefault();let y=G.current;y&&(Q.current=!0,y.style.pointerEvents="none",setTimeout(()=>{Q.current&&(Q.current=!1,y.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,Me,It,$,Wt,t,go,G]);xn(()=>{let m=ke.filter(ue=>ue.linkedSelector);if(m.length===0)return;let y=null,Z=document.createElement("canvas").getContext("2d"),L=()=>{var F,ne,v;let ue=[];for(let E of m){let J=document.querySelector(E.linkedSelector);if(!J&&((ne=(F=E.elements)==null?void 0:F[0])!=null&&ne.selector)&&E.linkedSelector.startsWith("[data-pm=")){try{J=document.querySelector(E.elements[0].selector)}catch(rt){}if(J){let rt=(v=E.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:v[1];rt&&J.setAttribute("data-pm",rt)}}if(!J)continue;let B=J.getBoundingClientRect(),_=e.styleModifications.some(rt=>{try{return J.matches(rt.selector)}catch(be){return!1}}),Y=m.filter(rt=>rt.id!==E.id&&rt.timestamp<E.timestamp&&rt.linkedSelector===E.linkedSelector).length,U=(_?1:0)+Y,xe;if(E.text&&Z){let rt=E.fontSize||12;Z.font=`${rt}px ${Qt}`,xe=Math.max(...E.text.split(`
|
|
5
|
-
`).map(
|
|
6
|
-
`),j=R.length>0?Math.max(
|
|
7
|
-
`).length)*M.fontSize*1.4+8:0,Xs=Lr.height+8,Hc=Lr.isWrapped?Xs-Nc:0,Fc=M?{position:"fixed",left:M.point.x-4-Ie.x,top:M.point.y-4-Ie.y-Hc,zIndex:9999,width:Lr.width+8,height:Xs,padding:4,fontSize:M.fontSize,fontFamily:Qt,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:Lr.isWrapped?"pre-wrap":"pre",wordBreak:Lr.isWrapped?"break-word":void 0}:{};return Cr(Er,{children:[ft("canvas",{ref:W,id:"devtools-canvas",style:Ai,onMouseDown:Ze,onMouseMove:Ot,onMouseUp:m=>Zt(m),onMouseLeave:m=>{Zt(m),Te(null),Xe(null)},onTouchStart:Ze,onTouchMove:Ot,onTouchEnd:m=>Zt(m),onContextMenu:Gn}),M&&Cr(Er,{children:[ft("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),ft("textarea",{id:"devtools-text-input",ref:me,value:M.text,onChange:Tn,onKeyDown:Po,onPaste:Oo,onBlur:Vt,placeholder:"Type here...",style:Fc}),M.images&&M.images.length>0&&Cr("div",{"data-devtools":!0,style:{position:"fixed",left:M.point.x-4-Ie.x,top:M.point.y-4-Ie.y-20,zIndex:1e4,fontSize:11,fontFamily:"system-ui, sans-serif",color:"#fff",backgroundColor:"rgba(0,0,0,0.7)",padding:"2px 6px",borderRadius:3,whiteSpace:"nowrap"},children:[M.images.length," image",M.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&&ft(El,{styleModifications:e.styleModifications,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(ke.map(m=>m.groupId||m.id)).size,dispatch:t,inFlightSelectors:s,toolbarRef:k,onHoverSelector:ie}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&&ft(Tl,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&&ft(fl,{annotations:ke,supersededAnnotations:Ue,inFlightIds:o,activeIds:r,queuePositions:i,scrollX:Ie.x,scrollY:Ie.y,annotationGroupMap:Ye,onViewThread:c,onSelectAnnotation:ye,onHoverAnnotation:he,canvasRef:G}),e.isAnnotating&&d&&ft(gl,{annotations:ke,supersededAnnotations:Ue,scrollX:Ie.x,scrollY:Ie.y,onReply:d,annotationGroupMap:Ye,canvasRef:G,onHoverAnnotation:he}),e.isAnnotating&&a&&a.size>0&&ft(ns,{inFlightSelectorColors:a}),e.isAnnotating&&Et&&ft(ns,{inFlightSelectorColors:Et,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(xt?vn.current.element:It)&&ft(ls,{element:xt?vn.current.element:It,gap:xt?{row:xt.row,column:xt.column}:jo(It),accentColor:e.activeColor,hoveredAxis:on,draggingAxis:(qs=xt==null?void 0:xt.axis)!=null?qs:null,cursorViewport:_n,isAutoGap:_t,refreshKey:Nn}),e.activeTool==="hand"&&e.isAnnotating&&Kt&&ft(jl,{element:Kt.target,modifier:Kt.modifier,accentColor:e.activeColor,refreshKey:Nn}),e.activeTool==="hand"&&e.isAnnotating&&!Kt&&(At?bn.current.element:$)&&ft(xl,{element:At?bn.current.element:$,radius:(Zs=At==null?void 0:At.radius)!=null?Zs:Yo($),accentColor:e.activeColor,hoveredCorner:Ge,draggingCorner:(Qs=At==null?void 0:At.corner)!=null?Qs:null,cursorViewport:_n}),e.activeTool==="hand"&&e.isAnnotating&&!Kt&&(lt?wn.current.element:Wt)&&ft(Yl,{element:lt?wn.current.element:Wt,fontSize:(ea=lt==null?void 0:lt.fontSize)!=null?ea:Br(Wt).fontSize,lineHeight:(ta=lt==null?void 0:lt.lineHeight)!=null?ta:Br(Wt).lineHeight,accentColor:e.activeColor,hoveredProperty:Pn,draggingProperty:(na=lt==null?void 0:lt.property)!=null?na:null,cursorViewport:_n}),e.activeTool==="hand"&&e.isAnnotating&&!Kt&&(Ke?ve.current.element:Me)&&ft(gs,{element:Ke?ve.current.element:Me,padding:(oa=Ke==null?void 0:Ke.padding)!=null?oa:mr(Me),accentColor:e.activeColor,hoveredSide:Ne,draggingSide:(ra=Ke==null?void 0:Ke.side)!=null?ra:null,cursorViewport:_n,refreshKey:lt?lt.fontSize+lt.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&ft(Er,{children:X&&!e.inspectedElement&&(()=>{let m=(M==null?void 0:M.linkedSelector)||(I==null?void 0:I.linkedSelector);if(m)try{if(X.matches(m))return null}catch(Z){}let y=!!I||!!(M!=null&&M.linkedSelector)||ke.some(Z=>{if(!Z.linkedSelector)return!1;try{return X.matches(Z.linkedSelector)}catch(L){return!1}});return ft(lo,{element:X,isSelected:!1,elementInfo:Oe,color:e.activeColor,hideTooltip:y})})()}),((M==null?void 0:M.linkedSelector)||(I==null?void 0:I.linkedSelector))&&(()=>{let m=(M==null?void 0:M.linkedSelector)||(I==null?void 0:I.linkedSelector);if(!m)return null;let y=null;try{y=document.querySelector(m)}catch(Z){}return y?ft(lo,{element:y,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),P&&(()=>{let m=e.annotations.find(L=>L.id===P);if(!(m!=null&&m.linkedSelector))return null;let y=null;try{y=document.querySelector(m.linkedSelector)}catch(L){}if(!y)return null;let Z=!!(o&&o.has(m.id));return ft(lo,{element:y,isSelected:!Z,color:m.color,hideTooltip:!0})})(),Pe&&(()=>{let m=e.annotations.find(R=>R.id===Pe);if(!(m!=null&&m.linkedSelector))return null;let y=null;try{y=document.querySelector(m.linkedSelector)}catch(R){}if(!y)return null;let Z=m.groupId?e.annotations.filter(R=>R.groupId===m.groupId):[m],L=!!(o&&Z.some(R=>o.has(R.id)));return ft(lo,{element:y,isSelected:!L,color:m.color,hideTooltip:!0})})(),te&&(()=>{let m=null;try{m=document.querySelector(te)}catch(Z){}if(!m)return null;let y=!!(s&&s.has(te));return ft(lo,{element:m,isSelected:!y,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&>.size>0&&[...gt.entries()].map(([m,y])=>ft(lo,{element:y.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:y.rootElement.tagName.toLowerCase(),reactComponent:m},color:"#8b5cf6"},m)),e.activeTool==="model"&&e.isAnnotating&&Ft&&ft(lo,{element:Ft.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:Ft.rootElement.tagName.toLowerCase(),reactComponent:Ft.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&S.length>0&&S.map((m,y)=>ft("div",{style:{position:"absolute",left:m.x,top:m.y,width:m.width,height:m.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:m.direction==="vertical"?Cr(Er,{children:[ft("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),ft("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),ft("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),ft("div",{style:{position:"absolute",left:"calc(50% + 6px)",top:m.height<16?-6:"50%",transform:m.height<16?"none":"translateY(-50%)",fontSize:11,fontWeight:600,color:"#fff",backgroundColor:"#FF0000",padding:"2px 4px",whiteSpace:"nowrap",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1},children:Math.round(m.height)})]}):Cr(Er,{children:[ft("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),ft("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),ft("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),ft("div",{style:{position:"absolute",left:m.width<30?0:"50%",top:(m.width<30,void 0),bottom:"calc(50% + 4px)",transform:m.width<30?"none":"translateX(-50%)",fontSize:11,fontWeight:600,color:"#fff",backgroundColor:"#FF0000",padding:"2px 4px",whiteSpace:"nowrap",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1},children:Math.round(m.width)})]})},y)),e.activeTool==="model"&&e.isAnnotating&&Ce&&ft(lo,{element:Ce.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:Ce.rootElement.tagName.toLowerCase(),reactComponent:Ce.name},color:x!=null&&x.has(Ce.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&Cr(Er,{children:[nt&&nt!=="padding"&&nt!=="gap"&&(()=>{var F;let m=new Set(ke.map(ne=>ne.groupId||ne.id)).size,y=e.inspectedElement.info.selector,Z=e.styleModifications.findIndex(ne=>ne.selector===y),L=Z>=0?m+Z+1:m+e.styleModifications.length+1,R=e.styleModifications.find(ne=>ne.selector===y),j=(F=R==null?void 0:R.changes.length)!=null?F:0,ue=!!(R!=null&&R.captured);return ft(lo,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:ue?"#999999":e.activeColor,annotationNumber:L,changeCount:j})})(),nt==="padding"&&ft(gs,{element:e.inspectedElement.el,padding:mr(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),nt==="gap"&&ft(ls,{element:e.inspectedElement.el,gap:jo(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),ft(Wl,{element:e.inspectedElement.el,elementInfo:e.inspectedElement.info,selector:e.inspectedElement.info.selector,styleModifications:e.styleModifications,dispatch:t,onClose:()=>t({type:"SELECT_ELEMENT",payload:null}),onHover:St,accentColor:e.activeColor,toolbarRef:k})]})]})}import{useCallback as Wn,useEffect as gn,useMemo as Zo,useRef as Dt,useState as Qo}from"react";import{Circle as wf,Component as Cf,Hand as Ef,MessageCircle as kf,Pen as Tf,Slash as Mf,Square as If,Trash2 as Lf,Type as Rf}from"lucide-react";import{useEffect as Xl,useRef as Kl}from"react";function ql(e,t,n,o,r){let i=Kl(0),s=Kl(t.annotations);Xl(()=>{if(!n.current||!e)return;s.current=t.annotations;let a=t.annotations.length;a>0&&(a>=i.current||!o)&&(localStorage.setItem(r.annotations,JSON.stringify(t.annotations)),i.current=a)},[t.annotations,e,o,n,r]),Xl(()=>{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{Component as $p,createElement as zp,useCallback as Ci,useEffect as Io,useRef as Ko,useState as zn}from"react";import{Link2 as Wp}from"lucide-react";var Cp={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},Ep=/^#[0-9a-fA-F]{3,8}$/,kp=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,Tp=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 Ql(e){let t=e.trim().toLowerCase();return Ep.test(t)||kp.test(t)||Tp.has(t)}var Mp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Ls(e){return Mp.test(e.trim())}var Zl=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function Ip(e){let t=e.trim().toLowerCase();return!!(Zl.has(t)||t.includes(",")&&t.split(",").some(n=>Zl.has(n.trim().replace(/['"]/g,""))))}function Lp(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(Ql(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var Rp=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,Ap=/^--(font-family|font|ff|family)/i,Pp=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,Op=/^--(space|gap|padding|margin|inset)/i,Bp=/^--(radius|rounded|br|border-radius)/i,Dp=/^--(shadow|elevation|drop-shadow)/i;function ec(e,t){let n=e.toLowerCase();return Dp.test(n)?"shadows":Bp.test(n)?"radii":Ap.test(n)?"fonts":Pp.test(n)&&Ls(t)?"typeScale":Rp.test(n)||Ql(t)?"colors":Ip(t)?"fonts":Lp(t)?"shadows":Op.test(n)&&Ls(t)||Ls(t)?"spacing":"other"}function tc(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){tc(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&_p(r.style,t,n,o)}}}var nc=/var\((--[^,)]+)/;function _p(e,t,n,o){for(let r=0;r<e.length;r++){let i=e[r];if(!(i!=null&&i.startsWith("--"))||n.has(i))continue;n.add(i);let s=t.getPropertyValue(i).trim();if(!s)continue;let a=ec(i,s);o[a].push([i,s]);let d=e.getPropertyValue(i).trim().match(nc);d&&(o.references[i]=d[1])}}function xi(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function Si(e){let t=e.trim().toLowerCase(),n=t.match(/oklch\(\s*([\d.]+%?)/);if(n){let i=n[1];return i.endsWith("%")?parseFloat(i)/100:parseFloat(i)}let o=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(o){let[i,s,a]=[parseInt(o[1],10),parseInt(o[2],10),parseInt(o[3],10)];return(.2126*i+.7152*s+.0722*a)/255}let r=t.match(/hsla?\(\s*[\d.]+[,\s]+[\d.]+%?[,\s]+([\d.]+)%?/);if(r)return parseFloat(r[1])/100;if(t.startsWith("#")){let i=t.slice(1);(i.length===3||i.length===4)&&(i=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]);let s=parseInt(i.slice(0,2),16),a=parseInt(i.slice(2,4),16),l=parseInt(i.slice(4,6),16);if(!isNaN(s))return(.2126*s+.7152*a+.0722*l)/255}return null}function oc(e){return e==="colors"?(t,n)=>{let o=Si(t[1]),r=Si(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let o=xi(t[1]),r=xi(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let o=xi(t[1]),r=xi(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:(t,n)=>t[0].localeCompare(n[0])}function Np(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 rc(e){let t=new Map;for(let r of e){let i=Np(r[0]),s=t.get(i);s||(s=[],t.set(i,s)),s.push(r)}let n=oc("colors");for(let r of t.values())r.sort(n);let o=[...t.entries()];return o.sort((r,i)=>{var l,d;let s=(l=Si(r[1][0][1]))!=null?l:0,a=(d=Si(i[1][0][1]))!=null?d:0;return s-a}),o}var Hp=["colors","fonts","typeScale","spacing","radii","shadows","other"],vi=null,Fp=5e3;function ic(){if(typeof document=="undefined")return Cp;if(vi&&Date.now()-vi.timestamp<Fp)return vi.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{tc(r.cssRules||r.rules,n,t,e)}catch(i){}}catch(r){}let o=document.documentElement.style;for(let r=0;r<o.length;r++){let i=o[r];if(!(i!=null&&i.startsWith("--"))||t.has(i))continue;t.add(i);let s=n.getPropertyValue(i).trim();if(!s)continue;let a=ec(i,s);e[a].push([i,s]);let d=o.getPropertyValue(i).trim().match(nc);d&&(e.references[i]=d[1])}for(let r of Hp)e[r].sort(oc(r));return vi={tokens:e,timestamp:Date.now()},e}import{Fragment as qo,jsx as We,jsxs as en}from"react/jsx-runtime";var sc="popmelt-library-tab",Gp=/^#[0-9a-fA-F]{3,8}$/,jp=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,Yp=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),Jp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function lc(e){let t=e.trim();return Gp.test(t)||jp.test(t)||Yp.has(t.toLowerCase())}function Up(e){return Jp.test(e.trim())}function Vp(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function cc(e,t=""){if(e==null)return[];if(typeof e!="object")return[[t,String(e)]];if(Array.isArray(e))return[[t,e.map(String).join(", ")]];let n=[];for(let[o,r]of Object.entries(e)){let i=t?`${t}.${o}`:o;if(r!==null&&typeof r=="object"&&!Array.isArray(r)){let s=r;typeof s.value=="string"?n.push([i,s.value]):n.push(...cc(r,i))}else n.push([i,Array.isArray(r)?r.map(String).join(", "):String(r!=null?r:"")])}return n}function Xp(e){return e.length===0?"generic":e.filter(([,o])=>lc(o)).length>e.length/2?"colors":e.filter(([,o])=>Up(o)).length>e.length/2?"spacing":"generic"}var Kp=h(f({width:300,backgroundColor:"#eaeaea"},xr),{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"}),dc={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},qp=h(f({},dc),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function Zp({varName:e,value:t,reference:n}){return We("div",{title:n?`${e} \u2192 ${n}
|
|
8
|
-
${t}`:`${e}: ${t}`,style:{width:28,height:28,backgroundColor:t,outline:"1px solid rgba(0,0,0,0.08)",outlineOffset:-1,position:"relative"},children:n&&We(Wp,{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 uc({entries:e,references:t}){let n=[],o=[];for(let i of e)lc(i[1])?n.push(i):o.push(i);let r=rc(n);return en(qo,{children:[r.map(([i,s])=>en("div",{style:{marginBottom:4},children:[en("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[i,s.length>1?` (${s.length})`:""]}),We("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:s.map(([a,l])=>We(Zp,{varName:a,value:l,reference:t[a]},a))})]},i)),o.length>0&&We(Ei,{entries:o})]})}var wi=[0,1,2,4,8,12,16,20,24,28,32];function Qp(e){if(e<=32){let t=wi[0],n=Math.abs(e-t);for(let o=1;o<wi.length;o++){let r=Math.abs(e-wi[o]);r<n&&(t=wi[o],n=r)}return t}return Math.round(e/8)*8}function ef({label:e,value:t,px:n,tokenPath:o,rawToken:r,onHover:i,onModify:s,onDelete:a}){let[l,d]=zn(!1),[c,p]=zn(null),u=Ko(!1),g=Ko(0),b=Ko(0),x=Ko([]),A=c!==null?c:n,T=c!==null?`${c}px`:t,z=c!==null,P=Ci(k=>{k.preventDefault(),u.current=!0,g.current=k.clientX,b.current=n;let G=ei(r);x.current=Ki(G);let re=W=>{let Q=W.clientX-g.current,N=Math.max(0,Math.round(b.current+Q));W.shiftKey&&(N=Qp(N));for(let ee of x.current)ee.element.style.setProperty(ee.property,N+"px","important");p(N),i==null||i({name:e,px:N,token:G})},oe=()=>{window.removeEventListener("mousemove",re),window.removeEventListener("mouseup",oe),document.body.style.cursor="",u.current=!1,p(W=>{if(W!==null&&W!==n&&s){let Q=ei(r),N=Q.bindings&&Q.bindings.length>0,ee;if(N){let fe=Zi(Q.bindings,b.current,W);ee=JSON.stringify(h(f({},Q),{value:`${W}px`,bindings:fe}))}else{let fe=ol(x.current,b.current),D=rl(x.current);if(fe.length>0){let ae=Zi(fe,b.current,W);ee=JSON.stringify({value:`${W}px`,property:D,bindings:ae})}else ee=`${W}px`}let M=typeof r=="string"?r:JSON.stringify(r),Le=x.current.map(fe=>({selector:Hn(fe.element),property:fe.property})),V=sl(x.current,b.current,W);s({tokenPath:o,originalValue:M,currentValue:ee,targets:Le,originalPx:b.current,currentPx:W},{id:Math.random().toString(36).substring(2,9),tokenPath:o,tokenName:e,originalPx:b.current,newPx:W,affectedElements:V})}return W})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",re),window.addEventListener("mouseup",oe)},[n,e,o,r,i,s]),O=ei(r);return en("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,padding:"1px 0",cursor:"ew-resize",userSelect:"none"},onMouseEnter:()=>{u.current||(d(!0),i==null||i({name:e,px:A,token:O}))},onMouseLeave:()=>{u.current||(d(!1),i==null||i(null))},onMouseDown:P,children:[We("span",{style:{color:l||z?"#FF0000":"#9ca3af"},children:e}),en("span",{style:{display:"flex",alignItems:"center",gap:4},children:[We("span",{style:{color:l||z?"#FF0000":"#6b7280",fontWeight:600},children:T}),a&&l&&!z&&We("button",{type:"button",title:"Remove token",onMouseDown:k=>{k.stopPropagation();let G=typeof r=="string"?r:JSON.stringify(r);a(o,G)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:k=>{k.currentTarget.style.color="#FF0000"},onMouseLeave:k=>{k.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function tf({entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}){let s=[],a=[];for(let l of e){let d=Vp(l[1]);d!==null?s.push([l[0],l[1],d]):a.push(l)}return en(qo,{children:[s.length>0&&We("div",{style:{display:"flex",flexDirection:"column",gap:2},children:s.map(([l,d,c])=>{let p=l.split(".").pop(),u=n?nf(n,l):d,g=u&&typeof u=="object"&&"value"in u?u:d;return We(ef,{label:p,value:d,px:c,tokenPath:`tokens.${t}.${l}`,rawToken:g,onHover:o,onModify:r,onDelete:i},l)})}),a.length>0&&We(Ei,{entries:a})]})}function nf(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 Ei({entries:e}){return We("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>en("div",{style:{fontSize:11},children:[We("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),We("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function of({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:o,onModifyToken:r,onDeleteToken:i}){let s=Xp(e);return s==="colors"?We(uc,{entries:e}):s==="spacing"?We(tf,{entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}):We(Ei,{entries:e})}function rf(e){let t=e.toLowerCase(),n=null,o=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(i){return i.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),r=o.currentNode;for(;r=o.nextNode();){let i=r,s=Object.keys(i).find(l=>l.startsWith("__reactFiber$")||l.startsWith("__reactInternalInstance$"));if(!s)continue;let a=i[s];for(;a;){let l=a.type,d=typeof l=="function"||typeof l=="object"?(l==null?void 0:l.displayName)||(l==null?void 0:l.name):null;if(typeof d=="string"){let c=d.toLowerCase();if(c===t){let p=f({},a.memoizedProps);return delete p.ref,{type:l,props:p}}if(!n){if(c.length>=4&&t.includes(c)){let p=f({},a.memoizedProps);delete p.ref,n={type:l,props:p}}else if(t.length>=4&&c.includes(t)){let p=f({},a.memoizedProps);delete p.ref,n={type:l,props:p}}}}a=a.return}}return n}var Rs=class extends $p{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}},pc="popmelt-principles-collapsed";function sf(){try{let e=localStorage.getItem(pc);if(e)return new Set(JSON.parse(e))}catch(e){}return new Set}function af(e){try{localStorage.setItem(pc,JSON.stringify([...e]))}catch(t){}}function lf({id:e,label:t,count:n,children:o,collapsed:r,onToggle:i}){return en("div",{style:{marginBottom:14},children:[en("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:[We("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:r?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,We("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!r&&o]})}var cf={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},ac=["colors","fonts","typeScale","spacing","radii","shadows","other"];function df(){let[e,t]=zn(null),[n,o]=zn(sf);Io(()=>{t(ic())},[]);let r=Ci(s=>{o(a=>{let l=new Set(a);return l.has(s)?l.delete(s):l.add(s),af(l),l})},[]);return e?ac.some(s=>e[s].length>0)?We(qo,{children:ac.map(s=>{let a=e[s];return a.length===0?null:We(lf,{id:s,label:cf[s],count:a.length,collapsed:n.has(s),onToggle:r,children:s==="colors"?We(uc,{entries:a,references:e.references}):We(Ei,{entries:a})},s)})}):We("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function uf({rules:e,onSynthesize:t,isSynthesizing:n}){if(!e||e.length===0)return We("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."});if(!e.some(i=>typeof i=="object"&&i!==null&&"scope"in i))return We(qo,{children:e.map((i,s)=>en("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[en("span",{style:{color:"#9ca3af",flexShrink:0},children:[s+1,"."]}),We("span",{children:typeof i=="string"?i:i.text})]},s))});let r=new Map;for(let i of e)if(typeof i=="string")r.has("general")||r.set("general",[]),r.get("general").push({id:"",text:i});else{let s=i.scope||"general";r.has(s)||r.set(s,[]),r.get(s).push({id:i.id,text:i.text})}return en(qo,{children:[t&&We("button",{type:"button",disabled:n,onClick:t,style:{width:"100%",border:"1px solid rgba(0,0,0,0.12)",background:n?"rgba(0,0,0,0.04)":"rgba(0,0,0,0.02)",cursor:n?"default":"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"5px 8px",marginBottom:10,color:n?"#9ca3af":"#6b7280"},children:n?"Synthesizing\u2026":"Synthesize"}),Array.from(r.entries()).map(([i,s])=>en("div",{style:{marginBottom:10},children:[We("div",{style:{fontWeight:700,fontSize:10,color:"#6b7280",letterSpacing:"0.05em",textTransform:"uppercase",marginBottom:4},children:i}),s.map((a,l)=>en("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4,fontSize:11},children:[We("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2022"}),We("span",{children:a.text})]},a.id||l))]},i))]})}function pf({name:e,value:t,selected:n,highlighted:o,onRemove:r,onHover:i}){var W;let[s,a]=zn(!1),[l,d]=zn(!1),c=Ko(null),p=Ko(0),[u,g]=zn(0),[b,x]=zn(0),A=cc(t),T=(W=A.find(([Q])=>Q==="description"))==null?void 0:W[1];Io(()=>{if(!l&&!o){g(0),x(0),p.current=0;return}let Q=fr(e);g(Q.length)},[l,o,e]),Io(()=>{n&&c.current&&c.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let z=n||o||l,P=n?"139,92,246":"34,197,94",O=n?"#8b5cf6":"#22c55e",k=z?`rgba(${P},0.06)`:void 0,G=z?`inset 0 0 0 1.5px rgba(${P},0.35)`:void 0,re=o||l,oe=Ci(()=>{let Q=fr(e);if(Q.length===0)return;let N=p.current%Q.length;Q[N].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),x(N),p.current=N+1,i==null||i({name:e,instanceIndex:N})},[e,i]);return en("div",{ref:c,onClick:oe,onMouseEnter:()=>{d(!0),i==null||i({name:e,instanceIndex:0})},onMouseLeave:()=>{d(!1),i==null||i(null)},style:{marginBottom:8,background:k,padding:6,boxShadow:G,cursor:"pointer"},children:[en("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[en("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[We("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:re?O:"transparent",color:re?"#fff":"#6b7280"},children:e}),re&&u>1&&en("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[b+1,"/",u]})]}),r&&l&&We("button",{type:"button",title:"Remove from model",onClick:Q=>{Q.stopPropagation(),r(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:Q=>{Q.currentTarget.style.color="#FF0000"},onMouseLeave:Q=>{Q.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),T&&We("div",{style:{fontSize:11,color:re?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:T}),s?We(of,{entries:A.filter(([Q])=>Q!=="description"),categoryKey:""}):We(ff,{name:e,onNotFound:()=>a(!0),entries:A})]})}function ff({name:e,onNotFound:t}){let[n,o]=zn(null),[r,i]=zn(!1);return Io(()=>{let s=rf(e);s||t(),o(s),i(!0)},[e,t]),!r||!n?null:We(Rs,{onError:t,children:We("div",{"data-popmelt-panel":!0,onClick:s=>{s.preventDefault(),s.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center",contain:"layout paint",position:"relative",isolation:"isolate"},children:We("div",{style:{zoom:.5,pointerEvents:"none"},children:zp(n.type,n.props)})})})}function gf({components:e,selectedComponent:t,hoveredComponent:n,onRemove:o,onHover:r}){if(!e||Object.keys(e).length===0)return We("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),s=Ui(i),a=Object.entries(e).sort(([l],[d])=>{var c,p;return((c=s.get(l))!=null?c:1/0)-((p=s.get(d))!=null?p:1/0)});return We(qo,{children:a.map(([l,d])=>We(pf,{name:l,value:d,selected:t===l,highlighted:n===l,onRemove:o,onHover:r},l))})}function fc({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:o,selectedComponent:r,hoveredComponent:i,onComponentHover:s,onSpacingTokenHover:a,onModifySpacingToken:l,onDeleteSpacingToken:d,onComponentAdded:c,onComponentRemoved:p,onSynthesizeRules:u,isSynthesizing:g,snapPosition:b="bottom-right"}){let[x,A]=zn(void 0),[T,z]=zn(!0),[P,O]=zn(()=>{try{let N=localStorage.getItem(sc);if(N==="patterns"||N==="principles"||N==="rules")return N}catch(N){}return"patterns"});Io(()=>{ir(e).then(N=>{A(N),z(!1)})},[e,t]),Io(()=>{try{localStorage.setItem(sc,P)}catch(N){}},[P]),Io(()=>{r&&(O("patterns"),ir(e).then(N=>{N&&A(N)}))},[r,e]);let k=Ci(N=>{A(ee=>{if(!(ee!=null&&ee.components))return ee;let V=ee.components,{[N]:M}=V,Le=jn(V,[Co(N)]);return h(f({},ee),{components:Le})}),p==null||p(N)},[p]),G=x==null?void 0:x.components,re=x==null?void 0:x.rules,oe=G&&Object.keys(G).length>0,W=re&&re.length>0,Q=Ko(null);return Io(()=>{let N=Q.current;if(!N)return;let ee=n,M=o;return ee&&N.addEventListener("mouseenter",ee),M&&N.addEventListener("mouseleave",M),()=>{ee&&N.removeEventListener("mouseenter",ee),M&&N.removeEventListener("mouseleave",M)}},[n,o]),en("div",{ref:Q,style:f(f({},Kp),$a(b)),children:[en("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[We("span",{children:"Model"}),We("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),We("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(N=>We("button",{type:"button",style:P===N?qp:dc,onClick:()=>O(N),children:N.charAt(0).toUpperCase()+N.slice(1)},N))}),We("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:P==="principles"?We(df,{}):T?We("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!x||!oe&&!W?We("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):en(qo,{children:[P==="patterns"&&We(gf,{components:G,selectedComponent:r,hoveredComponent:i,onRemove:k,onHover:s}),P==="rules"&&We(uf,{rules:re,onSynthesize:u,isSynthesizing:g})]})})]})}import{jsx as So}from"react/jsx-runtime";var mf="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",hf="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",yf="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 bf({size:e=16,style:t}){return So("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:So("path",{d:mf})})}function xf({size:e=16,style:t}){return So("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:So("path",{d:hf})})}function vf({size:e=16,style:t}){return So("svg",{width:e,height:e,viewBox:"0 0 49.7202 40.0402",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:So("path",{d:yf,fillRule:"evenodd",clipRule:"evenodd"})})}function Fr({provider:e,size:t=16,style:n}){return e==="codex"?So(xf,{size:t,style:n}):e==="copilot"?So(vf,{size:t,style:n}):So(bf,{size:t,style:n})}var ki=[{id:"claude-opus-4-6",label:"Opus 4.6",source:"static"},{id:"claude-sonnet-4-6",label:"Sonn 4.6",source:"static"}],Ti=[{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"}],As=[{id:"",label:"Default",source:"static"}];var Sf=[...ki,...Ti,...As];function Ps(e,t){if(t==="copilot"&&!e)return"Copilot";if(!e)return t==="codex"?"Codex":"Claude Code";let n=Sf.find(o=>o.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as mc}from"react/jsx-runtime";var wo={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function Lo({children:e,active:t,siblingActive:n,disabled:o,onClick:r,title:i}){let s=()=>o?.4:n&&!t?.5:1,a={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:0,border:"none",cursor:o?"default":"pointer",transition:"background-color 150ms ease, color 150ms ease, transform 100ms ease, opacity 150ms ease",backgroundColor:t?wo.bgActive:"transparent",color:t?wo.iconActive:wo.iconDefault,opacity:s()};return mc("button",{type:"button",onClick:o?void 0:r,title:i,disabled:o,style:a,onMouseEnter:l=>{o||(l.currentTarget.style.opacity="1",t||(l.currentTarget.style.backgroundColor=wo.bgHover))},onMouseLeave:l=>{o||(l.currentTarget.style.opacity=String(s()),t||(l.currentTarget.style.backgroundColor="transparent"))},onMouseDown:l=>{o||(l.currentTarget.style.transform="scale(0.95)")},onMouseUp:l=>{o||(l.currentTarget.style.transform="scale(1)")},children:e})}function gc(){return mc("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as $r,jsx as Se,jsxs as Mt}from"react/jsx-runtime";function Af(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 er=[{type:"rectangle",icon:If,label:"Rectangle",shortcut:"R"},{type:"circle",icon:wf,label:"Oval",shortcut:"O"},{type:"line",icon:Mf,label:"Line",shortcut:"L"},{type:"freehand",icon:Tf,label:"Pen",shortcut:"P"}],Pf=new Set(er.map(e=>e.type));function Of(e,t,n,o,r,i,s,a){let l=(e-r)*(o-i)-(n-r)*(t-i),d=(e-s)*(i-a)-(r-s)*(t-a),c=(e-n)*(a-o)-(s-n)*(t-o),p=l<0||d<0||c<0,u=l>0||d>0||c>0;return!(p&&u)}function Bf(e="bottom-right"){return za(e,window.innerWidth,window.innerHeight)}var Df=[{type:"text",icon:Rf,label:"Text",shortcut:"T"}],hc={inspector:{name:"Comment",desc:"Pin feedback to specific elements on the page.",usage:["Click any element to attach a comment","Type your note, then hand off to your AI","Your AI may ask clarifying questions","Replies get threaded"],keys:[{key:"C",desc:"Select tool"},{key:"Click",desc:"Pin comment to element"},{key:"Esc",desc:"Deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},hand:{name:"Handle",desc:"Quickly finetune layout and typescale.",usage:["Edges \u2192 padding","Between items \u2192 spacing","Corners \u2192 rounding","Right of text \u2192 font size","Below text \u2192 line height","Click a spacing handle to cycle distribution","Right-click \u2192 inspect element styles"],keys:[{key:"H",desc:"Select tool"},{key:"Shift",desc:"Snap to scale"},{key:"\u2325 + swipe",desc:"Cycle justify / flip direction"},{key:"\u21E7 + swipe",desc:"Cycle align-items"},{key:"Right-click",desc:"Inspect styles"},{key:"Esc",desc:"Deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},rectangle:{name:"Rectangle",desc:"Draw rectangular highlights to mark areas of interest.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"R",desc:"Rectangle"},{key:"O",desc:"Oval"},{key:"L",desc:"Line"},{key:"P",desc:"Pen"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},circle:{name:"Oval",desc:"Draw oval highlights to mark areas of interest.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"O",desc:"Oval"},{key:"R",desc:"Rectangle"},{key:"L",desc:"Line"},{key:"P",desc:"Pen"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},line:{name:"Line",desc:"Draw line annotations to point at or connect elements.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"L",desc:"Line"},{key:"R",desc:"Rectangle"},{key:"O",desc:"Oval"},{key:"P",desc:"Pen"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},freehand:{name:"Pen",desc:"Draw freehand paths to annotate freely.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"P",desc:"Pen"},{key:"R",desc:"Rectangle"},{key:"O",desc:"Oval"},{key:"L",desc:"Line"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},text:{name:"Text",desc:"Place text labels anywhere on the page.",usage:["Click to place, then start typing","Click away or press Enter to finish","Scroll while hovering a label to resize it"],keys:[{key:"T",desc:"Select tool"},{key:"Esc",desc:"Cancel text or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},model:{name:"Model",desc:"Promote components into the local design model.",usage:["Hover to highlight component boundaries","Scroll to walk up/down the component tree","Click to add to model.json","Green = already in model"],keys:[{key:"M",desc:"Select tool"},{key:"Scroll",desc:"Walk tree depth"},{key:"Click",desc:"Promote component"},{key:"Esc",desc:"Deselect"}]},counter:{name:"Annotations",desc:"Click to cycle, scroll to change color, long press to reset.",usage:[],keys:[{key:"Click",desc:"Cycle annotations"},{key:"Scroll",desc:"Change color"},{key:"Hold",desc:"Reset to red"}]},clear:{name:"Clear",desc:"Remove all annotations and style changes.",usage:[],keys:[{key:"\u2318 \u232B",desc:"Clear all"},{key:"\u232B",desc:"Delete selected annotation"},{key:"\u2318 Z",desc:"Undo"},{key:"\u2318 \u21E7 Z",desc:"Redo"}]},collapse:{name:"Popmelt",desc:`Comment and zhuzh, then hand off.
|
|
2
|
+
var jc=Object.defineProperty,Yc=Object.defineProperties;var Jc=Object.getOwnPropertyDescriptors;var Qr=Object.getOwnPropertySymbols;var ua=Object.prototype.hasOwnProperty,pa=Object.prototype.propertyIsEnumerable;var da=(e,t,n)=>t in e?jc(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))ua.call(t,n)&&da(e,n,t[n]);if(Qr)for(var n of Qr(t))pa.call(t,n)&&da(e,n,t[n]);return e},h=(e,t)=>Yc(e,Jc(t));var Ao=e=>typeof e=="symbol"?e:e+"",Zn=(e,t)=>{var n={};for(var o in e)ua.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(e!=null&&Qr)for(var o of Qr(e))t.indexOf(o)<0&&pa.call(e,o)&&(n[o]=e[o]);return n};import{createContext as qg,useCallback as en,useContext as Zg,useEffect as Dt,useMemo as wo,useRef as tn,useState as Wt}from"react";import{useCallback as Ca,useEffect as Vc,useSyncExternalStore as Xc}from"react";var Gn="http://localhost:1111";function Qn(e,t={},n=15e3){let o=new AbortController;t.signal&&t.signal.addEventListener("abort",()=>o.abort());let r=setTimeout(()=>o.abort(),n);return fetch(e,h(f({},t),{signal:o.signal})).finally(()=>clearTimeout(r))}async function ga(e=Gn){try{let t=await Qn(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch(t){return null}}async function Po(e=Gn){try{let t=new AbortController,n=setTimeout(()=>t.abort(),2e3),o=await fetch(`${e}/status`,{signal:t.signal});return clearTimeout(n),o.ok?await o.json():null}catch(t){return null}}async function fa(e){try{let t=new AbortController,n=setTimeout(()=>t.abort(),500),o=await fetch(`http://localhost:${e}/status`,{signal:t.signal});return clearTimeout(n),o.ok?await o.json():null}catch(t){return null}}async function ma(e){if(e&&e!=="http://localhost:1111")try{let d=new URL(e);return{url:e,port:parseInt(d.port,10)||1111}}catch(d){return null}let r=typeof window!="undefined"?window.location.origin:null,i=await fa(1111);if(i&&i.devOrigin&&r&&i.devOrigin===r)return{url:"http://localhost:1111",port:1111};let s=Array.from({length:8},(d,c)=>{let p=1112+c;return fa(p).then(u=>u?{status:u,port:p}:null)}),a=(await Promise.all(s)).filter(d=>d!==null),l=[];i&&l.push({port:1111,devOrigin:i.devOrigin});for(let d of a)l.push({port:d.port,devOrigin:d.status.devOrigin});if(r){let d=l.find(c=>c.devOrigin===r);if(d)return{url:`http://localhost:${d.port}`,port:d.port}}return l.length===1?{url:`http://localhost:${l[0].port}`,port:l[0].port}:i?{url:"http://localhost:1111",port:1111}:l.length>0?{url:`http://localhost:${l[0].port}`,port:l[0].port}:null}async function ei(e=Gn,t,n=-1){try{let o=await Qn(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return o.ok?await o.json():null}catch(o){return null}}async function ha(e,t,n=Gn,o,r,i,s,a){let l=new FormData;if(e instanceof Map){let c=!0;for(let[p,u]of e){let g=encodeURIComponent(p);l.append(`screenshot-${g}`,u,`screenshot-${g}.webp`),c&&(l.append("screenshot",u,"screenshot.webp"),c=!1)}c&&l.append("screenshot",new Blob([],{type:"image/webp"}),"screenshot.webp")}else l.append("screenshot",e,"screenshot.webp");if(l.append("feedback",t),o&&l.append("color",o),r&&l.append("provider",r),i&&l.append("model",i),a&&l.append("sourceId",a),s)for(let[c,p]of s)for(let u=0;u<p.length;u++)l.append(`image-${c}-${u}`,p[u],`image-${c}-${u}.webp`);let d=await Qn(`${n}/send`,{method:"POST",body:l},3e4);if(!d.ok){let c=await d.text();throw new Error(`Bridge returned ${d.status}: ${c}`)}return d.json()}async function ya(e,t=Gn){let n=await Qn(`${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 ba(e,t=Gn){let n=await Qn(`${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 ji(e,t,n=Gn){let o=await Qn(`${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 xa(e,t=Gn){let n=await Qn(`${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 fr(e=Gn){var t;try{let n=await Qn(`${e}/model`,{},5e3);return n.ok&&(t=(await n.json()).model)!=null?t:null}catch(n){return null}}function Uc(e){return new Promise(t=>setTimeout(t,e))}async function Yi(e=Gn,t,n=15e3){let o=Date.now();try{let s=await Qn(`${e}/restart`,{method:"POST"},5e3);if(!s.ok){let a=await s.text().catch(()=>"");return{ok:!1,error:a?`Bridge restart returned ${s.status}: ${a}`:`Bridge restart returned ${s.status}`,elapsedMs:Date.now()-o}}}catch(s){return{ok:!1,error:s instanceof Error?s.message:"Bridge restart request failed",elapsedMs:Date.now()-o}}let r=null;for(;Date.now()-o<n;)if(await Uc(350),r=await Po(e),!!(r!=null&&r.ok)&&!(t&&r.version!==t))return{ok:!0,status:r,elapsedMs:Date.now()-o};return{ok:!1,error:`Bridge did not come back${t?` with version ${t}`:""} within ${Math.round(n/1e3)}s`,status:r,elapsedMs:Date.now()-o}}async function va(e=Gn){return(await Yi(e)).ok}async function Sa(e=Gn,t,n){let o=await Qn(`${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 wa(e,t,n=Gn,o,r,i,s,a){let l;if(s&&s.length>0){let d=new FormData,c=new Blob([new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,1,0,0,0,1,8,6,0,0,0,31,21,196,137,0,0,0,10,73,68,65,84,120,156,98,0,0,0,2,0,1,229,39,222,252,0,0,0,0,73,69,78,68,174,66,96,130])],{type:"image/png"});d.append("screenshot",c,"screenshot.png"),d.append("feedback",JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:a}));for(let p=0;p<s.length;p++)d.append(`image-reply-${p}`,s[p],`reply-image-${p}.webp`);l=await Qn(`${n}/reply`,{method:"POST",body:d},3e4)}else l=await Qn(`${n}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:e,reply:t,color:o,provider:r,model:i,sourceId:a})},3e4);if(!l.ok){let d=await l.text();throw new Error(`Bridge returned ${l.status}: ${d}`)}return l.json()}var ri={};var Vo=typeof ri!="undefined"?ri.hot:void 0,ka,Ta,Ma,ii=(Ma=(Ta=(ka=Vo==null?void 0:Vo.data)==null?void 0:ka.sourceId)!=null?Ta:typeof localStorage!="undefined"&&localStorage.getItem("popmelt-source-id"))!=null?Ma:typeof crypto!="undefined"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2);Vo!=null&&Vo.data&&(Vo.data.sourceId=ii);try{typeof localStorage!="undefined"&&localStorage.setItem("popmelt-source-id",ii)}catch(e){}function Vi(){return ii}var Xo=typeof ri!="undefined"?ri.hot:void 0,xn=Xo==null?void 0:Xo.data,Kc={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},Ia,hr=(Ia=xn==null?void 0:xn.store)!=null?Ia:f({},Kc),Ra,ti=(Ra=xn==null?void 0:xn.listeners)!=null?Ra:new Set,La,Jo=(La=xn==null?void 0:xn.activeEs)!=null?La:null,Aa,Ui=(Aa=xn==null?void 0:xn.activeBridgeUrl)!=null?Aa:null,jo=null,Pa,ni=(Pa=xn==null?void 0:xn.connectionGeneration)!=null?Pa:0;Xo!=null&&Xo.data&&Object.defineProperties(Xo.data,{store:{get:()=>hr,configurable:!0},listeners:{get:()=>ti,configurable:!0},activeEs:{get:()=>Jo,configurable:!0},activeBridgeUrl:{get:()=>Ui,configurable:!0},connectionGeneration:{get:()=>ni,configurable:!0},discoveredBridgeUrl:{get:()=>Uo,configurable:!0}});var oi=new Set,mr=new Map,Oo={};function Yo(e,t){var o;if(!e)return!1;if(oi.has(e)){let r=mr.get(e);return r||(r=[],mr.set(e,r)),r.push({type:(o=t.type)!=null?o:"",data:t}),!0}let n=Oo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function qc(e,t,n){let o=()=>n!==ni;for(let r of t){if(o())return;oi.add(r),mr.set(r,[])}await Promise.all(t.map(async r=>{var i;try{let s=await ei(e,r);if(o())return;let a=(i=mr.get(r))!=null?i:[];if(s){if(rn(l=>{let d=h(f({},l.jobResponses),{[r]:s.accumulated.response}),c=h(f({},l.jobThinking),{[r]:s.accumulated.thinking}),p=[...l.events];for(let u of s.events)u.type==="done"||u.type==="error"||p.push({type:u.type,data:u,timestamp:Date.now()});return h(f({},l),{jobResponses:d,jobThinking:c,currentResponse:r===l.activeJobId?s.accumulated.response:l.currentResponse,currentThinking:r===l.activeJobId?s.accumulated.thinking:l.currentThinking,events:p})}),Oo[r]=s.currentSeq,!s.jobActive){let l=s.events.find(d=>d.type==="done"||d.type==="error");l&&Ji(l.type,l,r)}for(let l of a)typeof l.data.seq=="number"&&l.data.seq<=s.currentSeq||Ji(l.type,l.data,r)}else for(let l of a)Ji(l.type,l.data,r)}finally{oi.delete(r),mr.delete(r)}}))}function Ji(e,t,n){var o;if(e==="delta"){let r=t.text||"";rn(i=>h(f({},i),{jobResponses:h(f({},i.jobResponses),{[n]:(i.jobResponses[n]||"")+r}),currentResponse:n===i.activeJobId?i.currentResponse+r:i.currentResponse,events:[...i.events,{type:"delta",data:t,timestamp:Date.now()}]}))}else if(e==="thinking"){let r=t.text||"";rn(i=>h(f({},i),{jobThinking:h(f({},i.jobThinking),{[n]:(i.jobThinking[n]||"")+r}),currentThinking:n===i.activeJobId?i.currentThinking+r:i.currentThinking,events:[...i.events,{type:"thinking",data:t,timestamp:Date.now()}]}))}else if(e==="done")delete Oo[n],rn(r=>{var c;let i=r.activeJobIds.filter(p=>p!==n),s=f({},r.jobResponses),a=f({},r.jobThinking),l=s[n];delete s[n],delete a[n];let d=n===r.activeJobId?i.length>0?i[i.length-1]:null:r.activeJobId;return h(f(h(f({},r),{activeJobIds:i,activeJobId:d,jobResponses:s,jobThinking:a,lastCompletedJobId:n,lastResponseText:l||r.currentResponse||t.responseText||null,lastThreadId:(c=t.threadId)!=null?c:null}),n===r.activeJobId?{currentResponse:d&&s[d]||"",currentThinking:d&&a[d]||""}:{}),{events:[...r.events,{type:"done",data:t,timestamp:Date.now()}]})});else if(e==="error"){delete Oo[n];let r=(o=t.message)!=null?o:"";rn(i=>{let s=i.activeJobIds.filter(l=>l!==n),a=s.length>0?i.status:"error";return h(f({},i),{status:a,activeJobIds:s,lastCompletedJobId:n,lastErrorByJob:r?h(f({},i.lastErrorByJob),{[n]:r}):i.lastErrorByJob,events:[...i.events,{type:"error",data:t,timestamp:Date.now()}]})})}else rn(r=>h(f({},r),{events:[...r.events,{type:e,data:t,timestamp:Date.now()}]}))}var Oa,Uo=(Oa=xn==null?void 0:xn.discoveredBridgeUrl)!=null?Oa:null,gr=null;async function Zc(e){return e&&e!=="http://localhost:1111"?(Uo=e,e):Uo||gr||(gr=ma(e).then(n=>{var o;return Uo=(o=n==null?void 0:n.url)!=null?o:null,gr=null,Uo}).catch(()=>(gr=null,null)),gr)}function Ba(){return Uo}function Ea(){return hr}function Qc(e){return ti.add(e),()=>{ti.delete(e)}}function rn(e){hr=e(hr);for(let t of ti)t()}function Da(e){if(Jo&&Jo.readyState!==EventSource.CLOSED&&Ui===e)return;Jo&&(Jo.close(),Jo=null),jo&&(clearTimeout(jo),jo=null),Ui=e;let t=++ni,n=new EventSource(`${e}/events?sourceId=${ii}`);Jo=n;let o=()=>t!==ni;n.addEventListener("connected",()=>{o()||Po(e).then(r=>{var u,g;if(o())return;let i=(u=r==null?void 0:r.activeJobs)!=null?u:r!=null&&r.activeJob?[r.activeJob]:[],s=new Set(i.map(b=>b.id)),a=(g=r==null?void 0:r.recentJobs)!=null?g:[],l=new Map(a.map(b=>[b.id,b])),d=i.length>0;rn(b=>{let v=f({},b.lastErrorByJob),A=b.activeJobIds.filter(P=>!s.has(P));for(let P of A){let O=l.get(P);(O==null?void 0:O.status)==="error"&&O.error&&(v[P]=O.error)}let T=b.activeJobIds.filter(P=>s.has(P));for(let P of s)T.includes(P)||T.push(P);let $={};for(let P of i)P.threadId&&($[P.id]=P.threadId);return h(f({},b),{isConnected:!0,status:d?"streaming":A.length>0||b.status==="disconnected"?"idle":b.status,activeJobId:d?i[i.length-1].id:T.length>0?T[T.length-1]:null,activeJobIds:T,activeJobThreads:$,lastErrorByJob:v,lastCompletedJobId:A.length>0?A[A.length-1]:b.lastCompletedJobId})});let c=hr.activeJobIds.filter(b=>!s.has(b)),p=[...Array.from(s),...c];p.length>0&&qc(e,p,t).catch(()=>{})})}),n.addEventListener("job_started",r=>{if(o())return;let i=JSON.parse(r.data),s=i.jobId;if(Yo(s,i))return;let a=i.threadId;rn(l=>{var d,c,p,u;return h(f({},l),{status:"streaming",activeJobId:s,activeJobIds:l.activeJobIds.includes(s)?l.activeJobIds:[...l.activeJobIds,s],activeJobThreads:a?h(f({},l.activeJobThreads),{[s]:a}):l.activeJobThreads,jobResponses:h(f({},l.jobResponses),{[s]:(d=l.jobResponses[s])!=null?d:""}),jobThinking:h(f({},l.jobThinking),{[s]:(c=l.jobThinking[s])!=null?c:""}),currentResponse:(p=l.jobResponses[s])!=null?p:"",currentThinking:(u=l.jobThinking[s])!=null?u:"",lastResponseText:null,lastThreadId:null,events:[...l.events,{type:"job_started",data:i,timestamp:Date.now()}]})})}),n.addEventListener("delta",r=>{if(o())return;let i=JSON.parse(r.data),s=i.jobId;if(Yo(s,i))return;let a=i.text||"";rn(l=>h(f({},l),{jobResponses:s?h(f({},l.jobResponses),{[s]:(l.jobResponses[s]||"")+a}):l.jobResponses,currentResponse:!s||s===l.activeJobId?l.currentResponse+a:l.currentResponse,events:[...l.events,{type:"delta",data:i,timestamp:Date.now()}]}))}),n.addEventListener("thinking",r=>{if(o())return;let i=JSON.parse(r.data),s=i.jobId;if(Yo(s,i))return;let a=i.text||"";rn(l=>h(f({},l),{jobThinking:s?h(f({},l.jobThinking),{[s]:(l.jobThinking[s]||"")+a}):l.jobThinking,currentThinking:!s||s===l.activeJobId?l.currentThinking+a:l.currentThinking,events:[...l.events,{type:"thinking",data:i,timestamp:Date.now()}]}))}),n.addEventListener("tool_use",r=>{if(o())return;let i=JSON.parse(r.data),s=i.jobId;Yo(s,i)||rn(a=>h(f({},a),{events:[...a.events,{type:"tool_use",data:i,timestamp:Date.now()}]}))}),n.addEventListener("done",r=>{if(o())return;let i=JSON.parse(r.data),s=i.jobId;Yo(s,i)||(s&&delete Oo[s],rn(a=>{var b;let l=s?a.activeJobIds.filter(v=>v!==s):a.activeJobIds,d=f({},a.jobResponses),c=f({},a.jobThinking),p=f({},a.activeJobThreads),u=s?d[s]:void 0;s&&(delete d[s],delete c[s],delete p[s]);let g=s===a.activeJobId?l.length>0?l[l.length-1]:null:a.activeJobId;return h(f(h(f({},a),{activeJobIds:l,activeJobId:g,jobResponses:d,jobThinking:c,lastCompletedJobId:s!=null?s:a.activeJobId,lastResponseText:u||a.currentResponse||i.responseText||null,lastThreadId:(b=i.threadId)!=null?b:null}),s===a.activeJobId?{currentResponse:g&&d[g]||"",currentThinking:g&&c[g]||""}:{}),{events:[...a.events,{type:"done",data:i,timestamp:Date.now()}]})}))}),n.addEventListener("question",r=>{if(o())return;let i=JSON.parse(r.data),s=i.jobId;Yo(s,i)||rn(a=>h(f({},a),{pendingQuestions:[...a.pendingQuestions,{jobId:i.jobId,threadId:i.threadId,question:i.question,annotationIds:i.annotationIds,timestamp:Date.now()}],events:[...a.events,{type:"question",data:i,timestamp:Date.now()}]}))}),n.addEventListener("capabilities_changed",()=>{o()||rn(r=>h(f({},r),{capabilitiesVersion:r.capabilitiesVersion+1}))}),n.addEventListener("queue_drained",()=>{if(!o()){for(let r of Object.keys(Oo))delete Oo[r];oi.clear(),mr.clear(),rn(r=>h(f({},r),{status:r.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],activeJobThreads:{},currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}}),n.addEventListener("error",r=>{var i,s;if(!o()){if(n.readyState===EventSource.CLOSED)rn(a=>h(f({},a),{isConnected:!1,status:"disconnected"})),jo&&(clearTimeout(jo),jo=null),jo=setTimeout(()=>{Po(e).then(a=>{a&&Da(e)})},5e3);else if(r instanceof MessageEvent){let a=JSON.parse(r.data),l=(i=a.jobId)!=null?i:null;if(Yo(l!=null?l:void 0,a))return;l&&delete Oo[l];let d=(s=a.message)!=null?s:"";rn(c=>{let p=l?c.activeJobIds.filter(g=>g!==l):c.activeJobIds,u=p.length>0?c.status:"error";return h(f({},c),{status:u,activeJobIds:p,lastCompletedJobId:l!=null?l:c.activeJobId,lastErrorByJob:l&&d?h(f({},c.lastErrorByJob),{[l]:d}):c.lastErrorByJob,events:[...c.events,{type:"error",data:a,timestamp:Date.now()}]})})}}}),n.onerror=()=>{o()||n.readyState===EventSource.CLOSED&&rn(r=>h(f({},r),{isConnected:!1,status:"disconnected"}))}}function _a(e="http://localhost:1111",t=!0){let n=Xc(Qc,Ea,Ea);Vc(()=>{t&&Zc(e).then(i=>{i&&Po(i).then(s=>{s&&Da(i)})})},[e,t]);let o=Ca(()=>{rn(()=>h(f({},hr),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),r=Ca(i=>{rn(s=>h(f({},s),{pendingQuestions:s.pendingQuestions.filter(a=>a.threadId!==i)}))},[]);return h(f({},n),{clearEvents:o,dismissQuestion:r})}import{useEffect as ed,useReducer as td}from"react";var nd={isAnnotating:!1,activeTool:"inspector",activeColor:"oklch(0.628 0.258 29)",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function si(){return Math.random().toString(36).substring(2,9)}function Na(e){return e.status?e:e.captured?h(f({},e),{status:"in_flight"}):h(f({},e),{status:"pending"})}function Pn(e){return h(f({},e),{undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]})}function od(e,t){return h(f({},e),{isAnnotating:t})}function rd(e,t){return h(f({},e),{activeTool:t,inspectedElement:null})}function id(e,t){return h(f({},e),{activeColor:t})}function sd(e,t){return h(f({},e),{strokeWidth:t})}function ad(e,t){return h(f({},e),{currentPath:[t]})}function ld(e,t){return h(f({},e),{currentPath:[...e.currentPath,t]})}function cd(e){return h(f({},e),{currentPath:[]})}function dd(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return h(f({},e),{currentPath:[]});let n={id:si(),type:e.activeTool,points:e.currentPath,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window!="undefined"?window.location.pathname:"/",groupId:t==null?void 0:t.groupId,elements:t==null?void 0:t.elements},o=Pn(e);return h(f({},o),{annotations:[...e.annotations,n],currentPath:[]})}function ud(e,t){var r;let n=f({id:(r=t.id)!=null?r:si(),type:"text",points:[t.point],text:t.text,fontSize:t.fontSize||12,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window!="undefined"?window.location.pathname:"/",groupId:t.groupId,linkedSelector:t.linkedSelector,linkedAnchor:t.linkedAnchor,elements:t.elements},t.imageCount?{imageCount:t.imageCount}:{}),o=t.groupId?e:Pn(e);return h(f({},o),{annotations:[...e.annotations,n]})}function pd(e,t){let n=Pn(e);return h(f({},n),{annotations:e.annotations.map(o=>o.id===t.id?f(h(f({},o),{text:t.text}),t.imageCount!=null?{imageCount:t.imageCount}:{}):o)})}function fd(e,t){return h(f({},e),{annotations:e.annotations.map(n=>n.id===t.id?h(f({},n),{fontSize:Math.max(12,Math.min(72,t.fontSize))}):n)})}function gd(e,t){let n=Pn(e),o=e.annotations.find(i=>i.id===t.id),r=o==null?void 0:o.groupId;return h(f({},n),{annotations:e.annotations.filter(i=>i.id!==t.id&&!(r&&i.groupId===r))})}function md(e,t){let n=t.saveUndo?Pn(e):e,o=e.annotations.find(i=>i.id===t.id),r=o==null?void 0:o.groupId;return h(f({},n),{annotations:e.annotations.map(i=>{if(!(i.id===t.id||r&&i.groupId===r))return i;let a=t.delta.x,l=t.delta.y;return h(f({},i),{points:i.points.map(d=>({x:d.x+a,y:d.y+l}))})})})}function hd(e,t){let n=t.saveUndo?Pn(e):e,o=e.annotations.find(s=>s.id===t.id);if(!o||o.type==="text"||o.points.length<2)return e;let r=0,i=0;if(o.type==="rectangle"&&o.groupId){let s=t.points,a=Math.min(s[0].x,s[1].x),l=Math.max(s[0].y,s[1].y),d=o.points[0],c=o.points[o.points.length-1],p=Math.min(d.x,c.x),u=Math.max(d.y,c.y);r=a-p,i=l-u}return h(f({},n),{annotations:e.annotations.map(s=>s.id===t.id?h(f({},s),{points:t.points}):o.groupId&&s.groupId===o.groupId&&s.type==="text"?h(f({},s),{points:s.points.map(a=>({x:a.x+r,y:a.y+i}))}):s)})}function yd(e,t){let n=Pn(e);return h(f({},n),{annotations:[...e.annotations,...t.annotations.map(Na)]})}function bd(e,t){let n=new Set,o=[];for(let r of t.annotations)n.has(r.id)||(n.add(r.id),o.push(Na(r)));return h(f({},e),{annotations:o})}function xd(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return h(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],undoStack:e.undoStack.slice(0,-1),redoStack:[...e.redoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function vd(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return h(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],redoStack:e.redoStack.slice(0,-1),undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function Sd(e,t){let{id:n,addToSelection:o}=t;if(n===null)return h(f({},e),{selectedAnnotationIds:[],lastSelectedId:null});if(o)if(e.selectedAnnotationIds.includes(n)){let i=e.selectedAnnotationIds.filter(s=>s!==n);return h(f({},e),{selectedAnnotationIds:i,lastSelectedId:i.length>0?i[i.length-1]:null})}else return h(f({},e),{selectedAnnotationIds:[...e.selectedAnnotationIds,n],lastSelectedId:n});return h(f({},e),{selectedAnnotationIds:[n],lastSelectedId:n})}function wd(e,t){let n=new Set;for(let o of e.selectedAnnotationIds){let r=e.annotations.find(i=>i.id===o);r!=null&&r.groupId&&n.add(r.groupId)}return h(f({},e),{annotations:e.annotations.map(o=>{let r=e.selectedAnnotationIds.includes(o.id),i=o.groupId&&n.has(o.groupId);return!r&&!i?o:h(f({},o),{color:t.color})})})}function Cd(e){return h(f({},e),{annotations:e.annotations.map(t=>h(f({},t),{captured:!0,status:t.status==="pending"||!t.status?"in_flight":t.status})),styleModifications:e.styleModifications.map(t=>h(f({},t),{captured:!0})),spacingTokenChanges:e.spacingTokenChanges.map(t=>h(f({},t),{captured:!0}))})}function Ed(e){return h(f({},e),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function kd(e,t){return h(f({},e),{inspectedElement:t})}function Td(e,t){let{selector:n,element:o,property:r,original:i,modified:s}=t,a=e.styleModifications.findIndex(l=>l.selector===n);if(i===s&&a<0)return e;if(a>=0){let l=e.styleModifications[a];if(l.captured){let g=Pn(e),b=g.styleModifications.map((v,A)=>A===a?h(f({},v),{changes:[{property:r,original:i,modified:s}],captured:!1}):v);return h(f({},g),{styleModifications:b})}let d=l.changes.findIndex(g=>g.property===r),c,p=e;if(d>=0){let g=l.changes[d];s===g.original?c=l.changes.filter((b,v)=>v!==d):c=l.changes.map((b,v)=>v===d?h(f({},b),{modified:s}):b)}else{if(i===s)return e;p=Pn(e),c=[...l.changes,{property:r,original:i,modified:s}]}if(c.length===0)return h(f({},p),{styleModifications:p.styleModifications.filter((g,b)=>b!==a)});let u=p.styleModifications.map((g,b)=>b===a?h(f({},g),{changes:c}):g);return h(f({},p),{styleModifications:u})}else{let l=Pn(e),d={selector:n,element:o,changes:[{property:r,original:i,modified:s}]};return h(f({},l),{styleModifications:[...l.styleModifications,d]})}}function Md(e,t){let{selector:n,durableSelector:o,element:r,changes:i}=t,s=i.filter(d=>d.original!==d.modified);if(s.length===0)return e;let a=Pn(e),l=a.styleModifications.findIndex(d=>d.selector===n);if(l>=0){let d=a.styleModifications[l],c=d.captured?[]:[...d.changes];for(let p of s){let u=c.findIndex(g=>g.property===p.property);u>=0?p.modified===c[u].original?c=c.filter((g,b)=>b!==u):c=c.map((g,b)=>b===u?h(f({},g),{modified:p.modified}):g):c.push(p)}return c.length===0?h(f({},a),{styleModifications:a.styleModifications.filter((p,u)=>u!==l)}):h(f({},a),{styleModifications:a.styleModifications.map((p,u)=>u===l?h(f({},p),{changes:c,captured:!1}):p)})}else return h(f({},a),{styleModifications:[...a.styleModifications,{selector:n,durableSelector:o,element:r,changes:s}]})}function Id(e,t){let{selector:n,property:o}=t,r=Pn(e),i=r.styleModifications.map(s=>s.selector!==n?s:h(f({},s),{changes:s.changes.filter(a=>a.property!==o)})).filter(s=>s.changes.length>0);return h(f({},r),{styleModifications:i})}function Rd(e){if(e.styleModifications.length===0)return h(f({},e),{inspectedElement:null});let t=Pn(e);return h(f({},t),{styleModifications:[],inspectedElement:null})}function Ld(e,t){return h(f({},e),{styleModifications:t})}function Ad(e,t){let{updates:n}=t,o=new Map(n.map(r=>[r.id,r]));return h(f({},e),{annotations:e.annotations.map(r=>{let i=o.get(r.id);return i?f(h(f({},r),{points:[i.point,...r.points.slice(1)]}),i.linkedAnchor?{linkedAnchor:i.linkedAnchor}:{}):r})})}function Pd(e,t){let n=new Set(t.ids);return h(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)?h(f({},o),{status:t.status}):o)})}function Od(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 h(f({},e),{annotations:e.annotations.map(r=>n.has(r.id)||r.groupId&&o.has(r.groupId)?h(f({},r),{threadId:t.threadId}):r)})}function Bd(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 h(f({},e),{annotations:e.annotations.map(r=>n.has(r.id)||r.groupId&&o.has(r.groupId)?h(f({},r),{status:"waiting_input",question:t.question,threadId:t.threadId}):r)})}function Dd(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 h(f({},e),{annotations:e.annotations.map(r=>{var s,a,l;let i=n.get(r.id)||(r.groupId?o.get(r.groupId):void 0);return i?h(f({},r),{status:i.status,resolutionSummary:i.summary,scope:(a=(s=i.finalScope)!=null?s:i.inferredScope)!=null?a:null,replyCount:((l=r.replyCount)!=null?l:0)+1,question:void 0,threadId:r.threadId||t.threadId}):r})})}function _d(e,t){let{linkedSelectors:n,styleSelectors:o}=t,r=new Set(n),i=new Set(o),s=new Set,a=new Set;for(let u of e.annotations)u.linkedSelector&&r.has(u.linkedSelector)&&(s.add(u.id),u.groupId&&a.add(u.groupId));for(let u of e.annotations)u.groupId&&a.has(u.groupId)&&s.add(u.id);let l=e.annotations.filter(u=>!s.has(u.id)),d=e.styleModifications.filter(u=>!i.has(u.selector));if(l.length===e.annotations.length&&d.length===e.styleModifications.length)return e;let c=e.selectedAnnotationIds.filter(u=>!s.has(u)),p=e.inspectedElement&&i.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return h(f({},e),{annotations:l,styleModifications:d,selectedAnnotationIds:c,lastSelectedId:c.length>0?c[c.length-1]:null,inspectedElement:p})}function Nd(e,t){let n=e.spacingTokenChanges.findIndex(o=>o.tokenPath===t.tokenPath);return n>=0?h(f({},e),{spacingTokenChanges:e.spacingTokenChanges.map((o,r)=>r===n?t:o)}):h(f({},e),{spacingTokenChanges:[...e.spacingTokenChanges,t]})}function Hd(e,t){return h(f({},e),{spacingTokenChanges:t})}function Fd(e,t){let n=Pn(e),o=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),r;if(o>=0){let i=e.spacingTokenMods[o],s=h(f({},t),{originalValue:i.originalValue,originalPx:i.originalPx});r=e.spacingTokenMods.map((a,l)=>l===o?s:a)}else r=[...e.spacingTokenMods,t];return h(f({},n),{spacingTokenMods:r})}function $d(e,t){let n=Pn(e),o=e.spacingTokenMods.findIndex(l=>l.tokenPath===t.tokenPath),r=o>=0?e.spacingTokenMods[o].originalValue:t.originalValue,i=o>=0?e.spacingTokenMods[o].originalPx:parseFloat(t.originalValue)||0,s={tokenPath:t.tokenPath,originalValue:r,currentValue:"__deleted__",targets:o>=0?e.spacingTokenMods[o].targets:[],originalPx:i,currentPx:0},a;return o>=0?a=e.spacingTokenMods.map((l,d)=>d===o?s:l):a=[...e.spacingTokenMods,s],h(f({},n),{spacingTokenMods:a})}var zd={SET_ANNOTATING:od,SET_TOOL:rd,SET_COLOR:id,SET_STROKE_WIDTH:sd,START_PATH:ad,CONTINUE_PATH:ld,CANCEL_PATH:cd,FINISH_PATH:dd,ADD_TEXT:ud,UPDATE_TEXT:pd,UPDATE_TEXT_SIZE:fd,DELETE_ANNOTATION:gd,MOVE_ANNOTATION:md,RESIZE_ANNOTATION:hd,PASTE_ANNOTATIONS:yd,RESTORE_ANNOTATIONS:bd,UNDO:xd,REDO:vd,SELECT_ANNOTATION:Sd,UPDATE_ANNOTATION_COLOR:wd,MARK_CAPTURED:Cd,CLEAR:Ed,SELECT_ELEMENT:kd,MODIFY_STYLE:Td,MODIFY_STYLES_BATCH:Md,CLEAR_STYLE:Id,CLEAR_ALL_STYLES:Rd,RESTORE_STYLE_MODIFICATIONS:Ld,UPDATE_LINKED_POSITIONS:Ad,CLEANUP_ORPHANED:_d,SET_ANNOTATION_STATUS:Pd,SET_ANNOTATION_THREAD:Od,SET_ANNOTATION_QUESTION:Bd,APPLY_RESOLUTIONS:Dd,ADD_SPACING_TOKEN_CHANGE:Nd,RESTORE_SPACING_TOKEN_CHANGES:Hd,MODIFY_SPACING_TOKEN:Fd,DELETE_SPACING_TOKEN:$d};function Wd(e,t){let n=zd[t.type];return n?n(e,t.payload):e}function Ha(){let[e,t]=td(Wd,nd);return ed(()=>{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 Gd}from"react";if(typeof window!="undefined"&&!window.__popmeltPathPatch){window.__popmeltPathPatch=!0;for(let e of["pushState","replaceState"]){let t=History.prototype[e];History.prototype[e]=function(...n){let o=window.location.pathname;t.apply(this,n),window.dispatchEvent(new CustomEvent("popmelt:locationchange",{detail:{prevPath:o}}))}}}function jd(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function Yd(){return window.location.pathname}function yr(){return Gd(jd,Yd,()=>"/")}var Fa="popmelt-toolbar-snap-position";function Ko(e){return e.startsWith("top-")}function qo(e){return e.endsWith("-right")}function Fr(e){return e.endsWith("-center")}function $a(){try{let e=localStorage.getItem(Fa);if(e&&Jd(e))return e}catch(e){}return"bottom-right"}function za(e){try{localStorage.setItem(Fa,e)}catch(t){}}function Jd(e){return["bottom-right","bottom-center","bottom-left","top-right","top-center","top-left"].includes(e)}function Wa(e,t,n){let o=Ko(e)?16:n-16-54;return Fr(e)?{position:"fixed",top:o,left:t/2,transform:"translateX(-50%)"}:qo(e)?{position:"fixed",top:o,right:16,left:"auto"}:{position:"fixed",top:o,left:16,right:"auto"}}function Ga(e,t,n){let r=Ko(e)?{top:82}:{bottom:82},i;return Fr(e)?i={left:t/2,transform:"translateX(-50%)"}:qo(e)?i={right:16}:i={left:16},f(f({position:"fixed"},r),i)}function ja(e,t,n){let o=Ko(e),r=o?{top:78}:{bottom:78},i,s;return Fr(e)?(i={left:"50%",transform:"translateX(-50%)"},s="center"):qo(e)?(i={right:16},s="flex-end"):(i={left:16},s="flex-start"),h(f(f({position:"fixed"},r),i),{zIndex:9999,display:"flex",flexDirection:"column",alignItems:s})}function Ya(e){let t=Ko(e),n=qo(e)||Fr(e);return{position:"fixed",top:t&&n?82:16,right:16,bottom:!t&&n?82:16}}function Ja(e,t,n){let r=Ko(e),i,s;qo(e)||Fr(e)?(i=t-16,s=i-326):(s=16,i=s+326);let a=r?82:n-16-54-12;return{left:s,right:i,y:a}}var Ua=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"];import{domToCanvas as Ud}from"modern-screenshot";function Xi(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function Ki(e,t=[],n,o){let r=new Map,i=[];for(let a of e)if(a.groupId){let l=r.get(a.groupId)||[];l.push(a),r.set(a.groupId,l)}else i.push(a);let s=[];for(let[a,l]of r){let d=l.find(p=>p.type!=="text"),c=l.find(p=>p.type==="text");if(d){let p=d.linkedSelector||(c==null?void 0:c.linkedSelector),u=(c==null?void 0:c.imageCount)||d.imageCount,g=d.pathname||(c==null?void 0:c.pathname);s.push(f(h(f(f({id:d.id,type:d.type,instruction:c==null?void 0:c.text},p?{linkedSelector:p}:{}),g?{pathname:g}:{}),{elements:d.elements||[]}),u?{imageCount:u}:{}))}}for(let a of i)s.push(f(h(f(f({id:a.id,type:a.type,instruction:a.type==="text"?a.text:void 0},a.linkedSelector?{linkedSelector:a.linkedSelector}:{}),a.pathname?{pathname:a.pathname}:{}),{elements:a.elements||[]}),a.imageCount?{imageCount:a.imageCount}:{}));return f(f({timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:s,styleModifications:t},n?{inspectedElement:n}:{}),o&&o.length>0?{spacingTokenChanges:o}:{})}function Vd(e){if(!e.points||e.points.length===0)return null;let t=e.points.map(o=>o.x),n=e.points.map(o=>o.y);return{minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)}}function Xd(e,t){if(e.length===0)return[];let n=e.map(c=>({annotation:c,bounds:Vd(c)})).filter(c=>c.bounds!==null);if(n.length===0)return[];n.sort((c,p)=>c.bounds.minY-p.bounds.minY);let o=Math.min(...n.map(c=>c.bounds.minY)),r=Math.max(...n.map(c=>c.bounds.maxY));if(r-o<=t){let c=(o+r)/2,p=Math.max(0,c-t/2);return[{top:p,bottom:p+t,annotations:e}]}let i=[],s=50,a=Math.max(0,o-s),l=[],d=a;for(let{annotation:c,bounds:p}of n){let u=p.maxY+s;if(u-a<=t)l.push(c),d=Math.max(d,u);else{if(l.length>0){let g=(a+d)/2,b=Math.max(0,g-t/2);i.push({top:b,bottom:b+t,annotations:l})}a=Math.max(0,p.minY-s),l=[c],d=p.maxY+s}}if(l.length>0){let c=(a+d)/2,p=Math.max(0,c-t/2);i.push({top:p,bottom:p+t,annotations:l})}return i}function Kd(e){let t=new Map;for(let n of e)if(n.linkedSelector)try{let o=document.querySelector(n.linkedSelector);if(o){let r=o.getBoundingClientRect();t.set(n.id,{x:r.left+window.scrollX,y:r.top+window.scrollY,width:r.width,height:r.height})}}catch(o){}return t}function qd(e,t,n,o,r){if(e.save(),e.scale(o,o),r)for(let i of t){let s=r.get(i.id);if(!s)continue;let a=s.y-n;e.fillStyle=i.color,e.globalAlpha=.05,e.fillRect(s.x,a,s.width,s.height),e.globalAlpha=1,e.strokeStyle=i.color,e.lineWidth=1,e.setLineDash([2,4]),e.strokeRect(s.x,a,s.width,s.height),e.setLineDash([])}for(let i of t){let s=i.points.map(a=>({x:a.x,y:a.y-n}));switch(e.strokeStyle=i.color,e.fillStyle=i.color,e.lineWidth=i.strokeWidth,e.lineCap="round",e.lineJoin="round",i.type){case"freehand":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y);for(let a=1;a<s.length;a++)e.lineTo(s[a].x,s[a].y);e.stroke();break;case"line":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y),e.lineTo(s[s.length-1].x,s[s.length-1].y),e.stroke();break;case"rectangle":{if(s.length<2)break;let a=s[0],l=s[s.length-1],d=Math.min(a.x,l.x),c=Math.min(a.y,l.y),p=Math.abs(l.x-a.x),u=Math.abs(l.y-a.y);e.strokeRect(d,c,p,u);break}case"circle":{if(s.length<2)break;let a=s[0],l=s[s.length-1],d=(a.x+l.x)/2,c=(a.y+l.y)/2,p=Math.abs(l.x-a.x)/2,u=Math.abs(l.y-a.y)/2;e.beginPath(),e.ellipse(d,c,p,u,0,0,Math.PI*2),e.stroke();break}case"text":{if(!i.text||s.length<1)break;let a=s[0],l=i.fontSize||16;e.font=`${l}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=i.color;let c=(i.imageCount&&i.imageCount>0?`[${i.imageCount} image${i.imageCount>1?"s":""}] ${i.text}`:i.text).split(`
|
|
3
|
+
`),p=l*1.2,u=4,g=0;for(let b of c)g=Math.max(g,e.measureText(b).width);e.fillRect(a.x-u,a.y-u,g+u*2,c.length*p+u*2),e.fillStyle="#ffffff",c.forEach((b,v)=>{e.fillText(b,a.x,a.y+l+v*p)});break}}}e.restore()}async function $r(e,t,n=[],o){var r;try{let i=(r=o==null?void 0:o.dpr)!=null?r:window.devicePixelRatio||1,s=window.innerWidth,a=window.innerHeight,l=n.filter(u=>{var g;return((g=u.status)!=null?g:"pending")==="pending"});console.log("[Screenshot] Starting capture with",l.length,"active annotations (filtered",n.length-l.length,"captured)");let d=Kd(l),c=Xd(l,a);if(c.length===0){let u=await Va(e,[],window.scrollY,s,a,i,d);return u?[u]:[]}let p=[];for(let u=0;u<c.length;u++){let g=c[u],b=await Va(e,g.annotations,g.top,s,a,i,d);b?p.push(b):console.warn(`[Screenshot] Region ${u+1} failed to capture`)}return console.log("[Screenshot] Capture complete"),p}catch(i){return console.error("[Screenshot] Capture failed:",i),[]}}async function Va(e,t,n,o,r,i,s){try{let a=getComputedStyle(document.documentElement).backgroundColor,d=await Ud(e,{filter:u=>!(u instanceof HTMLElement&&(u.id==="devtools-canvas"||u.id==="devtools-toolbar"||u.id==="devtools-scrim"||u.dataset.devtools!==void 0)),scale:i,backgroundColor:a&&a!=="rgba(0, 0, 0, 0)"&&a!=="transparent"?a:"#ffffff",width:o,height:r,style:{transform:`translate(${-window.scrollX}px, ${-n}px)`}}),c=document.createElement("canvas");c.width=o*i,c.height=r*i;let p=c.getContext("2d");return p?(p.drawImage(d,0,0,o*i,r*i,0,0,o*i,r*i),qd(p,t,n,i,s),new Promise(u=>{c.toBlob(g=>u(g),"image/webp",.8)})):null}catch(a){return console.error("Region capture failed:",a),null}}async function zr(e){if(e.length===0)return null;if(e.length===1)return e[0];let t=await Promise.all(e.map(a=>new Promise((l,d)=>{let c=new Image;c.onload=()=>l(c),c.onerror=d,c.src=URL.createObjectURL(a)}))),n=t[0].width,o=t.reduce((a,l)=>a+l.height,0),r=document.createElement("canvas");r.width=n,r.height=o;let i=r.getContext("2d");if(!i)return null;let s=0;for(let a of t)i.drawImage(a,0,s),s+=a.height,URL.revokeObjectURL(a.src);return new Promise(a=>{r.toBlob(l=>a(l),"image/webp",.8)})}async function Xa(e,t,n){try{let o=Array.isArray(e)?e:[e];if(o.length===0)return!1;let r=await zr(o);if(!r)return!1;let i=r;if(r.type!=="image/png"){let d=new Image,c=URL.createObjectURL(r);await new Promise(u=>{d.onload=()=>u(),d.src=c}),URL.revokeObjectURL(c);let p=document.createElement("canvas");p.width=d.naturalWidth,p.height=d.naturalHeight,p.getContext("2d").drawImage(d,0,0),i=await new Promise(u=>p.toBlob(g=>u(g),"image/png"))}let s={"image/png":i},a=t&&t.length>0,l=n&&n.length>0;if(a||l){let d=t?t.filter(c=>{var p;return((p=c.status)!=null?p:"pending")==="pending"}):[];if(d.length>0||l){let c=Ki(d,n||[]),p=new Blob([JSON.stringify(c,null,2)],{type:"text/plain"});s["text/plain"]=p}}return await navigator.clipboard.write([new ClipboardItem(s)]),!0}catch(o){return console.warn("Clipboard write failed:",o),!1}}var ai="0.7.0";import{useCallback as an,useEffect as En,useMemo as Ri,useRef as Xt,useState as vt}from"react";import{useCallback as vr,useRef as Qd}from"react";function qi(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let s=(r.x+i.x)/2,a=(r.y+i.y)/2,l=Math.abs(i.x-r.x)/2,d=Math.abs(i.y-r.y)/2;e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.ellipse(s,a,l,d,0,0,Math.PI*2),e.stroke()}function Zi(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!(!r||!i)){e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.moveTo(r.x,r.y);for(let s=1;s<t.length-1;s++){let a=t[s],l=t[s+1];if(!a||!l)continue;let d=(a.x+l.x)/2,c=(a.y+l.y)/2;e.quadraticCurveTo(a.x,a.y,d,c)}e.lineTo(i.x,i.y),e.stroke()}}function Qi(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 es(e,t,n,o){if(t.length<2)return;let r=t[0],i=t[t.length-1];if(!r||!i)return;let s=Math.min(r.x,i.x),a=Math.min(r.y,i.y),l=Math.abs(i.x-r.x),d=Math.abs(i.y-r.y);e.beginPath(),e.strokeStyle=n,e.lineWidth=o,e.lineCap="round",e.lineJoin="round",e.strokeRect(s,a,l,d)}var Zt='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function Zd(e,t,n){if(!t||e.measureText(t).width<=n)return[t];let o=t.split(/\s+/),r=[],i="";for(let s of o){let a=i?i+" "+s:s;i&&e.measureText(a).width>n?(r.push(i),i=s):i=a}return i&&r.push(i),r.length>0?r:[t]}function br(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function Ka(e,t,n){let o=[];for(let r of t)o.push(...Zd(e,r,n));return o}function xr(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 qa(e,t,n,o,r=12,i,s){if(!n)return;let a=r*1.4,l=n.replace(/\n/g," "),d=i!==void 0?i+". "+l:l;e.font=`${r}px ${Zt}`,e.textBaseline="middle";let c=s!==void 0?Math.min(400,Math.max(60,window.innerWidth-s-16)):400,p=xr(e,d,c),u=e.measureText(p).width;e.fillStyle=o,e.fillRect(t.x-4,t.y-4,u+8,a+8),e.fillStyle="#ffffff",e.fillText(p,t.x,t.y+a/2)}var Za=11,ts=4,eu=`600 ${Za}px system-ui, -apple-system, sans-serif`;function ns(e,t,n){return e.map(o=>({x:o.x-t,y:o.y-n}))}function tu(e,t,n,o,r,i){let s=String(o);e.font=eu;let l=e.measureText(s).width+ts*2,d=Za+ts*2,c=t-l/2,p=n+i/2+2;e.fillStyle=r,e.fillRect(c,p,l,d),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(s,c+ts,p+d/2)}function nu(e,t){if(e.points.length<2&&e.type!=="text")return null;switch(e.type){case"rectangle":case"freehand":{let n,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 Qa(){let e=Qd(null),t=vr(()=>{let a=e.current;if(!a)return;let l=a.getContext("2d");l&&l.clearRect(0,0,a.width,a.height)},[]),n=vr((a,l,d)=>{var b;let c=e.current;if(!c)return;let p=c.getContext("2d");if(!p)return;let g=((b=a.status)!=null?b:a.captured?"in_flight":"pending")==="pending"||d?a.color:"#999999";switch(a.type){case"freehand":Zi(p,a.points,g,a.strokeWidth);break;case"line":Qi(p,a.points,g,a.strokeWidth);break;case"rectangle":es(p,a.points,g,a.strokeWidth);break;case"circle":qi(p,a.points,g,a.strokeWidth);break;case"text":a.text&&a.points[0]&&qa(p,a.points[0],a.text,g,a.fontSize,l,a.points[0].x);break}},[]),o=vr((a,l,d,c)=>{let p=e.current;if(!p||a.length<2)return;let u=p.getContext("2d");if(u)switch(l){case"freehand":Zi(u,a,d,c);break;case"line":Qi(u,a,d,c);break;case"rectangle":es(u,a,d,c);break;case"circle":qi(u,a,d,c);break}},[]),r=vr((a,l)=>{let d=e.current;if(!d||a.points.length<2)return;let c=d.getContext("2d");if(c){if(c.fillStyle="#ffffff",c.strokeStyle=a.color,c.lineWidth=1.5,a.type==="line"){let p=a.points[0],u=a.points[a.points.length-1];[p,u].forEach(g=>{c.beginPath(),c.arc(g.x,g.y,l/2,0,Math.PI*2),c.fill(),c.stroke()});return}if(a.type==="circle"){let p=a.points[0],u=a.points[a.points.length-1],g=Math.min(p.x,u.x),b=Math.max(p.x,u.x),v=Math.min(p.y,u.y),A=Math.max(p.y,u.y),T=(g+b)/2,$=(v+A)/2;[{x:T,y:v},{x:T,y:A},{x:g,y:$},{x:b,y:$}].forEach(O=>{c.beginPath(),c.rect(O.x-l/2,O.y-l/2,l,l),c.fill(),c.stroke()});return}if(a.type==="rectangle"||a.type==="freehand"){let p,u,g,b;if(a.type==="freehand")p=Math.min(...a.points.map(A=>A.x)),u=Math.max(...a.points.map(A=>A.x)),g=Math.min(...a.points.map(A=>A.y)),b=Math.max(...a.points.map(A=>A.y));else{let A=a.points[0],T=a.points[a.points.length-1];p=Math.min(A.x,T.x),u=Math.max(A.x,T.x),g=Math.min(A.y,T.y),b=Math.max(A.y,T.y)}[{x:p,y:g},{x:u,y:g},{x:p,y:b},{x:u,y:b}].forEach(A=>{c.beginPath(),c.rect(A.x-l/2,A.y-l/2,l,l),c.fill(),c.stroke()})}}},[]),i=vr((a,l,d,c,p,u,g,b=0,v=0,A,T)=>{var $;if(t(),a.forEach(P=>{var se;let O=h(f({},P),{points:ns(P.points,b,v)}),w=A==null?void 0:A.get(P.id),N=(se=T==null?void 0:T.has(P.id))!=null?se:!1;n(O,w,N)}),l.length>0){let P=ns(l,b,v);o(P,d,c,p)}if(u&&u.length>0&&g){let P=e.current,O=P==null?void 0:P.getContext("2d");for(let w of u){let N=a.find(se=>se.id===w);if(N){let se=h(f({},N),{points:ns(N.points,b,v)});if(r(se,g),O&&N.type!=="text"&&A&&!(N.groupId&&a.some(G=>G.groupId===N.groupId&&G.type==="text"))){let G=A.get(N.id);if(G!==void 0){let oe=nu(se,g);if(oe){let Z=(($=N.status)!=null?$:N.captured?"in_flight":"pending")==="pending"?N.color:"#999999";tu(O,oe.x,oe.y,G,Z,g)}}}}}}},[t,n,o,r]),s=vr(()=>{let a=e.current;if(!a)return;let l=window.devicePixelRatio||1;a.width=window.innerWidth*l,a.height=window.innerHeight*l;let d=a.getContext("2d");d&&d.scale(l,l)},[]);return{canvasRef:e,clearCanvas:t,drawAnnotation:n,drawCurrentPath:o,redrawAll:i,resizeCanvas:s}}import{useEffect as ou,useRef as ru}from"react";function el(){let e=ru({shift:!1,cmd:!1});return ou(()=>{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 iu}from"react";function tl(e,t,n,o,r){iu(()=>{let i=s=>{if(e){if(e.linkedSelector)return;s.preventDefault(),s.stopPropagation();let l=s.deltaY>0?-2:2;t(d=>d?h(f({},d),{fontSize:Math.max(12,Math.min(72,d.fontSize+l))}):null);return}if(!n)return;s.preventDefault();let a=o.find(l=>l.id===n);if(a&&a.type==="text"&&!a.linkedSelector){let l=a.fontSize||12,d=s.deltaY>0?-2:2;r({type:"UPDATE_TEXT_SIZE",payload:{id:n,fontSize:l+d}})}};return window.addEventListener("wheel",i,{passive:!1}),()=>{window.removeEventListener("wheel",i)}},[n,e,o,r,t])}import{useCallback as hl,useEffect as xi,useRef as yl,useState as Yr}from"react";function li(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==null?void 0:r.displayName)||(r==null?void 0: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 os(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==null?void 0:r.displayName)||(r==null?void 0: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 ci(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 nl(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(s=>!s.startsWith("_")&&s.length<30).slice(0,2);r.length>0&&(o+="."+r.map(s=>CSS.escape(s)).join("."));let i=n.parentElement;if(i){let s=Array.from(i.children).filter(a=>a.tagName===n.tagName);if(s.length>1){let a=s.indexOf(n)+1;o+=`:nth-of-type(${a})`}}t.unshift(o),n=i}return t.join(" > ")}function On(e){try{return document.querySelector(e)}catch(t){return null}}function di(e,t=0){var l;let n=os(e);if(n.length===0)return null;let o=n.map(d=>d.name),r=n.length-1,i=Math.max(0,Math.min(n.length-1,r-t)),s=n[i],a=(l=ci(s.fiber))!=null?l:e;return{name:s.name,path:o,depthIndex:i,rootElement:a}}function ol(e,t){var i,s;let n=os(e),o=t.toLowerCase(),r=-1;for(let a=n.length-1;a>=0;a--){let l=n[a].name;if(l===t){let d=(i=ci(n[a].fiber))!=null?i:e;return{name:t,path:n.map(c=>c.name),depthIndex:a,rootElement:d}}if(r===-1){let d=l.toLowerCase();(d.length>=4&&o.includes(d)||o.length>=4&&d.includes(o))&&(r=a)}}if(r>=0){let a=(s=ci(n[r].fiber))!=null?s:e;return{name:t,path:n.map(l=>l.name),depthIndex:r,rootElement:a}}return null}function Sr(e){let t=wr(),n=[],o=new Set,r=t.currentNode;for(;r=t.nextNode();){let i=ol(r,e);i&&!o.has(i.rootElement)&&(o.add(i.rootElement),n.push(i))}return n}function rs(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),o=wr(),r=new Set,i=o.currentNode;for(;(i=o.nextNode())&&n.size>0;)for(let s of n){let a=ol(i,s);if(!a||r.has(a.rootElement))continue;r.add(a.rootElement);let l=a.rootElement.getBoundingClientRect();t.set(s,l.top+window.scrollY),n.delete(s);break}for(let s of n)t.set(s,1/0);return t}function wr(){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 Bn(e){let t={selector:nl(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=rl(e);n&&n.length>0&&n.length<200&&(t.textContent=n);let o={};for(let s of e.attributes)s.name.startsWith("data-")&&(o[s.name]=s.value);Object.keys(o).length>0&&(t.dataAttributes=o);let r=li(e);r&&(t.reactComponent=r.name);let i=su(e);return i&&(t.context=i),t}function rl(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function Zo(e,t){let n=document.elementsFromPoint(e,t);for(let o of n)if(o instanceof HTMLElement&&!(o.id==="devtools-canvas"||o.id==="devtools-toolbar"||o.id==="devtools-scrim")&&!o.closest("#devtools-toolbar")&&!(o.dataset.devtools||o.closest("[data-devtools]"))&&!["html","body"].includes(o.tagName.toLowerCase()))return o;return null}function su(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 il(e){let t=new Set,n=[],o=window.scrollX,r=window.scrollY,i=[{x:(e.minX+e.maxX)/2,y:(e.minY+e.maxY)/2},{x:e.minX,y:e.minY},{x:e.maxX,y:e.minY},{x:e.minX,y:e.maxY},{x:e.maxX,y:e.maxY}];for(let s of i){let a=s.x-o,l=s.y-r;if(a<0||l<0||a>window.innerWidth||l>window.innerHeight)continue;let d=Zo(a,l);d&&!t.has(d)&&(t.add(d),n.push(Bn(d)))}return n.slice(0,3)}function is(e){if(e.length===0)return[];let t=e.map(o=>o.x),n=e.map(o=>o.y);return il({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function sn(e,t){return e.style.getPropertyValue(t)!==""}function au(e,t=30){if(e<=0)return[];let n=[],o=wr(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let s=i,a=s.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let l=getComputedStyle(s);!sn(s,"padding-top")&&Math.abs((parseFloat(l.paddingTop)||0)-e)<r&&n.push({element:s,property:"padding-top"}),!sn(s,"padding-bottom")&&Math.abs((parseFloat(l.paddingBottom)||0)-e)<r&&n.length<t&&n.push({element:s,property:"padding-bottom"}),!sn(s,"padding-left")&&Math.abs((parseFloat(l.paddingLeft)||0)-e)<r&&n.length<t&&n.push({element:s,property:"padding-left"}),!sn(s,"padding-right")&&Math.abs((parseFloat(l.paddingRight)||0)-e)<r&&n.length<t&&n.push({element:s,property:"padding-right"}),!sn(s,"margin-top")&&Math.abs((parseFloat(l.marginTop)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-top"}),!sn(s,"margin-bottom")&&Math.abs((parseFloat(l.marginBottom)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-bottom"}),!sn(s,"margin-left")&&Math.abs((parseFloat(l.marginLeft)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-left"}),!sn(s,"margin-right")&&Math.abs((parseFloat(l.marginRight)||0)-e)<r&&n.length<t&&n.push({element:s,property:"margin-right"});let d=l.display;if((d.includes("flex")||d.includes("grid"))&&n.length<t){let c=sn(s,"gap"),p=parseFloat(l.gap)||0,u=parseFloat(l.rowGap)||0,g=parseFloat(l.columnGap)||0;!c&&Math.abs(p-e)<r?n.push({element:s,property:"gap"}):!sn(s,"row-gap")&&Math.abs(u-e)<r?n.push({element:s,property:"row-gap"}):!sn(s,"column-gap")&&Math.abs(g-e)<r&&n.push({element:s,property:"column-gap"})}}return n}function ss(e,t=30){if(e<=0)return[];let n=[],o=wr(),r=.5,i=o.currentNode;for(;(i=o.nextNode())&&n.length<t;){let s=i,a=s.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let l=getComputedStyle(s),d=parseFloat(l.borderTopWidth)||0,c=parseFloat(l.borderRightWidth)||0,p=parseFloat(l.borderBottomWidth)||0,u=parseFloat(l.borderLeftWidth)||0,g=s.clientWidth,b=s.clientHeight,v=parseFloat(l.paddingTop)||0;!sn(s,"padding-top")&&Math.abs(v-e)<r&&n.push({x:a.left+u,y:a.top+d,width:g,height:e,direction:"vertical",property:"padding-top"});let A=parseFloat(l.paddingBottom)||0;!sn(s,"padding-bottom")&&Math.abs(A-e)<r&&n.length<t&&n.push({x:a.left+u,y:a.top+d+b-e,width:g,height:e,direction:"vertical",property:"padding-bottom"});let T=parseFloat(l.paddingLeft)||0;!sn(s,"padding-left")&&Math.abs(T-e)<r&&n.length<t&&n.push({x:a.left+u,y:a.top+d,width:e,height:b,direction:"horizontal",property:"padding-left"});let $=parseFloat(l.paddingRight)||0;!sn(s,"padding-right")&&Math.abs($-e)<r&&n.length<t&&n.push({x:a.left+u+g-e,y:a.top+d,width:e,height:b,direction:"horizontal",property:"padding-right"});let P=parseFloat(l.marginTop)||0;!sn(s,"margin-top")&&Math.abs(P-e)<r&&n.length<t&&n.push({x:a.left,y:a.top-e,width:a.width,height:e,direction:"vertical",property:"margin-top"});let O=parseFloat(l.marginBottom)||0;!sn(s,"margin-bottom")&&Math.abs(O-e)<r&&n.length<t&&n.push({x:a.left,y:a.bottom,width:a.width,height:e,direction:"vertical",property:"margin-bottom"});let w=parseFloat(l.marginLeft)||0;!sn(s,"margin-left")&&Math.abs(w-e)<r&&n.length<t&&n.push({x:a.left-e,y:a.top,width:e,height:a.height,direction:"horizontal",property:"margin-left"});let N=parseFloat(l.marginRight)||0;!sn(s,"margin-right")&&Math.abs(N-e)<r&&n.length<t&&n.push({x:a.right,y:a.top,width:e,height:a.height,direction:"horizontal",property:"margin-right"});let se=l.display;if((se.includes("flex")||se.includes("grid"))&&n.length<t&&!sn(s,"gap")){let G=Array.from(s.children).filter(oe=>{let W=getComputedStyle(oe);return W.display!=="none"&&W.position!=="absolute"&&W.position!=="fixed"});if(G.length>=2)for(let oe=0;oe<G.length-1&&n.length<t;oe++){let W=G[oe].getBoundingClientRect(),Z=G[oe+1].getBoundingClientRect(),k=Z.top-W.bottom;Math.abs(k-e)<r&&k>.5&&n.push({x:Math.min(W.left,Z.left),y:W.bottom,width:Math.max(W.right,Z.right)-Math.min(W.left,Z.left),height:k,direction:"vertical",property:"gap"});let Ce=Z.left-W.right;Math.abs(Ce-e)<r&&Ce>.5&&n.push({x:W.right,y:Math.min(W.top,Z.top),width:Ce,height:Math.max(W.bottom,Z.bottom)-Math.min(W.top,Z.top),direction:"horizontal",property:"gap"})}}}return n}function ui(e){return typeof e=="string"?{value:e}:e}var al={gap:["gap","row-gap","column-gap"],padding:["padding-top","padding-bottom","padding-left","padding-right"],margin:["margin-top","margin-bottom","margin-left","margin-right"]};function sl(e,t){let n=al[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 cu(e){var a,l;let t=e.lastIndexOf(":"),n=t>=0?e.slice(t+1):e,o=n.indexOf("-");if(o<0)return null;let r=n.slice(0,o),i={gap:"gap","gap-x":"column-gap","gap-y":"row-gap",p:"padding",pt:"padding-top",pb:"padding-bottom",pl:"padding-left",pr:"padding-right",px:"padding-left",py:"padding-top",m:"margin",mt:"margin-top",mb:"margin-bottom",ml:"margin-left",mr:"margin-right",mx:"margin-left",my:"margin-top"},s=n.slice(0,n.indexOf("-",o+1)>0?n.indexOf("-",o+1):o);return(l=(a=i[s])!=null?a:i[r])!=null?l: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=wr(),s=i.currentNode;for(;(s=i.nextNode())&&r.length<t;){let a=s,l=a.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let d=a.className;if(typeof d=="string")for(let c of e.bindings){if(!lu(d,c))continue;let p=cu(c);if(p&&!(e.property&&!sl(p,e.property))){r.push({element:a,property:p});break}}}return r}let o=au(n,t*2);return e.property?o.filter(r=>sl(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,s=i.getBoundingClientRect(),a=getComputedStyle(i),l=parseFloat(a.borderTopWidth)||0,d=parseFloat(a.borderRightWidth)||0,c=parseFloat(a.borderLeftWidth)||0,p=i.clientWidth,u=i.clientHeight;switch(r.property){case"padding-top":{let g=parseFloat(a.paddingTop)||0;o.push({x:s.left+c,y:s.top+l,width:p,height:g,direction:"vertical",property:r.property});break}case"padding-bottom":{let g=parseFloat(a.paddingBottom)||0;o.push({x:s.left+c,y:s.top+l+u-g,width:p,height:g,direction:"vertical",property:r.property});break}case"padding-left":{let g=parseFloat(a.paddingLeft)||0;o.push({x:s.left+c,y:s.top+l,width:g,height:u,direction:"horizontal",property:r.property});break}case"padding-right":{let g=parseFloat(a.paddingRight)||0;o.push({x:s.left+c+p-g,y:s.top+l,width:g,height:u,direction:"horizontal",property:r.property});break}case"margin-top":{let g=parseFloat(a.marginTop)||0;o.push({x:s.left,y:s.top-g,width:s.width,height:g,direction:"vertical",property:r.property});break}case"margin-bottom":{let g=parseFloat(a.marginBottom)||0;o.push({x:s.left,y:s.bottom,width:s.width,height:g,direction:"vertical",property:r.property});break}case"margin-left":{let g=parseFloat(a.marginLeft)||0;o.push({x:s.left-g,y:s.top,width:g,height:s.height,direction:"horizontal",property:r.property});break}case"margin-right":{let g=parseFloat(a.marginRight)||0;o.push({x:s.right,y:s.top,width:g,height:s.height,direction:"horizontal",property:r.property});break}case"gap":case"row-gap":case"column-gap":{let g=Array.from(i.children).filter(b=>{let v=getComputedStyle(b);return v.display!=="none"&&v.position!=="absolute"&&v.position!=="fixed"});for(let b=0;b<g.length-1&&o.length<t;b++){let v=g[b].getBoundingClientRect(),A=g[b+1].getBoundingClientRect(),T=A.top-v.bottom;T>.5&&o.push({x:Math.min(v.left,A.left),y:v.bottom,width:Math.max(v.right,A.right)-Math.min(v.left,A.left),height:T,direction:"vertical",property:"gap"});let $=A.left-v.right;$>.5&&o.push({x:v.right,y:Math.min(v.top,A.top),width:$,height:Math.max(v.bottom,A.bottom)-Math.min(v.top,A.top),direction:"horizontal",property:"gap"})}break}}}return o}function ll(e,t){let n=new Set,o=Wr(t);for(let r of e){let i=dl[r.property];if(!i)continue;let s=r.element.className;if(typeof s=="string")for(let a of i){let l=`${a}-${o}`;for(let d of s.split(/\s+/)){let c=d.lastIndexOf(":"),p=c>=0?d.slice(c+1):d;if(p===l){n.add(p);break}}}}return[...n]}function cl(e){let t=new Set;for(let n of e)for(let[o,r]of Object.entries(al))if(r.includes(n.property)){t.add(o);break}if(t.size===1)return[...t][0]}function cs(e,t,n){if(t===n)return e;let o=Wr(t),r=Wr(n);return e.map(i=>{let s=i.lastIndexOf("-");if(s<0)return i;let a=i.slice(0,s),l=i.slice(s+1);return l===o||l===`[${t}px]`?`${a}-${r}`:i})}var du={0:"0",1:"px",2:"0.5",4:"1",6:"1.5",8:"2",12:"3",16:"4",20:"5",24:"6",28:"7",32:"8",40:"10",48:"12",64:"16",80:"20",96:"24"};function Wr(e){var t;return(t=du[e])!=null?t:`[${e}px]`}var dl={"padding-top":["pt","py","p"],"padding-bottom":["pb","py","p"],"padding-left":["pl","px","p"],"padding-right":["pr","px","p"],"margin-top":["mt","my","m"],"margin-bottom":["mb","my","m"],"margin-left":["ml","mx","m"],"margin-right":["mr","mx","m"],gap:["gap"],"row-gap":["gap-y","gap"],"column-gap":["gap-x","gap"]};function uu(e,t,n,o){let r=dl[t];if(!r)return null;let i=Wr(n);for(let s of r){let a=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+s+"-(?:"+pu(i)+"|\\["+n+"px\\]))(?:\\s|$)"),l=e.match(a);if(l!=null&&l[1]){let d=Wr(o),c=l[1].lastIndexOf(":"),p=c>=0?l[1].slice(0,c+1):"";return{matched:l[1],suggested:`${p}${s}-${d}`}}}return null}function pu(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function ul(e,t,n){let o=new Set,r=[];for(let i of e){let s=jn(i.element),a=`${s}::${i.property}`;if(o.has(a))continue;o.add(a);let l=li(i.element),d=i.element.className||"",c=uu(d,i.property,t,n);r.push({selector:s,reactComponent:l==null?void 0:l.name,className:d,property:i.property,matchedClass:c==null?void 0:c.matched,suggestedClass:c==null?void 0:c.suggested})}return r}function pi(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function fi(e,t){if(e instanceof HTMLElement){let o=e.style.getPropertyValue(t);if(o)return o}let n=t.replace(/-([a-z])/g,(o,r)=>r.toUpperCase());try{for(let o of document.styleSheets)try{let r=o.cssRules||o.rules;for(let i of r)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let s=i.style.getPropertyValue(t);if(s)return s;let a=i.style[n];if(a)return a}}catch(r){}}catch(o){}return null}function gi(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function Qo(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function fu(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(f({},n))}return t}function To(e){let t=Array.from(e.children).filter(l=>{if(!(l instanceof HTMLElement))return!1;let d=window.getComputedStyle(l);return d.display!=="none"&&d.position!=="absolute"&&d.position!=="fixed"});if(t.length<2)return[];let n=[],o=e.getBoundingClientRect(),i=window.getComputedStyle(e).flexDirection,s=i==="column"||i==="column-reverse",a=6;for(let l=0;l<t.length-1;l++){let d=t[l].getBoundingClientRect(),c=t[l+1].getBoundingClientRect();if(c.left>d.right+.5&&n.push({axis:"column",x:d.right,y:o.top,w:c.left-d.right,h:o.height}),c.top>d.bottom+.5&&n.push({axis:"row",x:o.left,y:d.bottom,w:o.width,h:c.top-d.bottom}),!(c.left>d.right+.5)&&!(c.top>d.bottom+.5))if(s){let p=(d.bottom+c.top)/2;n.push({axis:"row",x:o.left,y:p-a/2,w:o.width,h:a})}else{let p=(d.right+c.left)/2;n.push({axis:"column",x:p-a/2,y:o.top,w:a,h:o.height})}}return fu(n)}function ds(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 Cr(e){let t=window.getComputedStyle(e);return{top:parseFloat(t.paddingTop)||0,right:parseFloat(t.paddingRight)||0,bottom:parseFloat(t.paddingBottom)||0,left:parseFloat(t.paddingLeft)||0}}function er(e){let t=window.getComputedStyle(e);return{"top-left":parseFloat(t.borderTopLeftRadius)||0,"top-right":parseFloat(t.borderTopRightRadius)||0,"bottom-right":parseFloat(t.borderBottomRightRadius)||0,"bottom-left":parseFloat(t.borderBottomLeftRadius)||0}}function us(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function Er(e){var c,p;let t=document.createRange(),n=!1;for(let u of e.childNodes)u.nodeType===Node.TEXT_NODE&&(u.textContent||"").trim().length>0&&(n||(t.setStart(u,0),n=!0),t.setEnd(u,(p=(c=u.textContent)==null?void 0:c.length)!=null?p:0));if(!n)return null;let o=t.getBoundingClientRect(),r=window.getComputedStyle(e),i=parseFloat(r.fontSize)||16,s=parseFloat(r.lineHeight);isNaN(s)&&(s=i*1.2);let a=Math.max(1,t.getClientRects().length),l=Math.max(o.height,a*s),d=(l-o.height)/2;return new DOMRect(o.x,o.y-d,o.width,l)}function Gr(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 Ke(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 mi(e){var t;for(let n of e){let o=On(n.selector);if(!o&&n.durableSelector&&(o=On(n.durableSelector),o)){let r=(t=n.selector.match(/\[data-pm="([^"]+)"\]/))==null?void 0:t[1];r&&o.setAttribute("data-pm",r)}if(o)for(let r of n.changes)Ke(o,r.property,r.modified)}}function hi(e){for(let t of e){let n=On(t.selector);if(n)for(let o of t.changes)pl(n,o.property,o.original)}}function gl(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){gl(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&gu(r.style,t,n,o)}}}function gu(e,t,n,o){for(let r=0;r<e.length;r++){let i=e[r];if(i!=null&&i.startsWith("--")){if(n.has(i))continue;n.add(i);let s=t.getPropertyValue(i).trim();ml(s)&&o.push({name:i,value:s,usage:`var(${i})`})}}}var yi=null,mu=5e3;function ps(){if(yi&&Date.now()-yi.timestamp<mu)return yi.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{gl(i.cssRules||i.rules,n,t,e)}catch(s){}}catch(i){}let o=document.documentElement.style;for(let i=0;i<o.length;i++){let s=o[i];if(s!=null&&s.startsWith("--")&&!t.has(s)){t.add(s);let a=n.getPropertyValue(s).trim();ml(a)&&e.push({name:s,value:a,usage:`var(${s})`})}}let r=e.sort((i,s)=>i.name.localeCompare(s.name));return yi={variables:r,timestamp:Date.now()},r}function ml(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 kr(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 jr(e,t){if(!e)return null;let n=fl(e);if(!n)return null;for(let o of t){let r=fl(o.value);if(r&&n===r)return o}return null}function fl(e){if(!e)return null;let t=e.trim().toLowerCase();if(t.startsWith("oklch(")){let n=t.match(/oklch\(\s*([\d.]+%?)\s+([\d.]+%?)\s+([\d.]+)/);if(n){let 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 s=Math.round(i);return`oklch(${o} ${r} ${s})`}}if(t.startsWith("rgb")){let n=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(n)return`rgb(${n[1]},${n[2]},${n[3]})`}return t.startsWith("#")?t.length===4?`#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`:t.slice(0,7):t}import{Fragment as tr,jsx as bt,jsxs as lo}from"react/jsx-runtime";var eo=22,Bo=12,hu=3,yu=250,bi=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],bu=3e3;function xu(s){var a=s,{left:e,top:t,avoidBottom:n,style:o,children:r}=a,i=Zn(a,["left","top","avoidBottom","style","children"]);let l=e+Bo,d=t+Bo,c=n!==void 0?`${n}px`:"100vh";return bt("div",h(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:e,top:t,padding:Bo},o),children:bt("div",{style:{transform:`translate(min(0px, calc(100vw - ${l}px - 100%)), min(0px, calc(${c} - ${d}px - 100%)))`},children:r})}))}function bl({annotations:e,supersededAnnotations:t,inFlightIds:n,activeIds:o,queuePositions:r,scrollX:i,scrollY:s,annotationGroupMap:a,onViewThread:l,onSelectAnnotation:d,onHoverAnnotation:c,canvasRef:p}){var ee,G,oe,W,Z,k,Ce;let[u,g]=Yr(0),[b,v]=Yr(()=>Math.floor(Math.random()*bi.length)),A=!!(n&&n.size>0);xi(()=>{if(!A)return;let Q=setInterval(()=>{g(_=>(_+1)%hu)},yu),fe=setInterval(()=>{v(_=>(_+1)%bi.length)},bu);return()=>{clearInterval(Q),clearInterval(fe)}},[A]);let T=[];for(let Q of e){if(Q.type!=="text"||!Q.text||!Q.points[0]||t.has(Q))continue;let fe=Q.groupId?e.filter(ae=>ae.groupId===Q.groupId):[Q],_=(ee=Q.status)!=null?ee:"pending",le=fe.reduce((ae,X)=>{var ie;return ae+((ie=X.replyCount)!=null?ie:0)},0),M=ae=>ae==="resolved"&&le===0,ue=!!(n&&(n.has(Q.id)||fe.some(ae=>n.has(ae.id))))||Q.status==="in_flight"||fe.some(ae=>ae.status==="in_flight")||M(Q.status)||fe.some(ae=>M(ae.status)),Me=fe.some(ae=>{var X;return ae.status==="resolved"&&((X=ae.replyCount)!=null?X:0)>0||ae.status==="needs_review"}),Ne=fe.some(ae=>ae.threadId);if(!ue&&_!=="resolved"&&_!=="needs_review"&&!Me&&!Ne)continue;let ve=Q.threadId||((G=fe.find(ae=>ae.threadId))==null?void 0:G.threadId),We=_==="needs_review"||fe.some(ae=>ae.status==="needs_review"),Re=Q.points[0],ge=Q.fontSize||12,qe=ge*1.4,ft=a.get(Q.id),gt=Q.text.replace(/\n/g," "),ln=ft!==void 0?ft+". "+gt:gt,K=(W=(oe=p==null?void 0:p.current)==null?void 0:oe.getContext("2d"))!=null?W:document.createElement("canvas").getContext("2d");if(!K)continue;K.font=`${ge}px ${Zt}`;let ce=Re.x-i,Ae=br(ce),$e=xr(K,ln,Ae),rt=K.measureText($e).width,Je=ue&&!!o&&!o.has(Q.id)&&!fe.some(ae=>o.has(ae.id));T.push({id:Q.id,threadId:ve,linkedSelector:Q.linkedSelector||((Z=fe.find(ae=>ae.linkedSelector))==null?void 0:Z.linkedSelector),x:Re.x+rt+4,y:Re.y-4,size:qe+8,color:Q.color,isInFlight:ue,isQueued:Je,queuePosition:void 0,isNeedsReview:We,replyCount:le})}let $=T.filter(Q=>Q.isQueued);if($.length>0&&$.forEach((Q,fe)=>{var _;Q.queuePosition=(_=r==null?void 0:r.get(Q.id))!=null?_:`(${fe+1}/${$.length})`}),T.length===0)return null;let P=2,O=(Ce=(k=p==null?void 0:p.current)==null?void 0:k.getContext("2d"))!=null?Ce:document.createElement("canvas").getContext("2d"),w=T.map(Q=>{var Me;let fe;Q.isQueued?fe=Q.queuePosition?`queued ${Q.queuePosition}`:"queued":Q.isInFlight?fe=(Me=bi[b])!=null?Me:"thinking":Q.replyCount>0?fe=`${Q.replyCount} ${Q.replyCount===1?"reply":"replies"}`:fe="Cancelled";let _=!Q.isQueued,le=_?11:0,M=_?4:0,ue=fe.length*7.2;return O&&(O.font=`12px ${Zt}`,ue=O.measureText(fe).width),4+le+M+ue+4}),N=typeof window!="undefined"?window.innerHeight:9999,se=[];for(let Q=0;Q<T.length;Q++){let fe=T[Q].y-s,_=Math.min(fe,N-eo),le=_+eo,ue=T[Q].x-i;for(let Me=0;Me<Q;Me++){let Ne=T[Me].y-s,ve=Math.min(Ne,N-eo),We=ve+eo;if(!(_<We&&le>ve))continue;let ge=se[Me]+w[Me];ue<ge+P&&(ue=ge+P)}se.push(ue)}return bt(tr,{children:T.map((Q,fe)=>{let _=!!Q.threadId;return bt(xu,{left:se[fe]-Bo,top:Q.y-s-Bo,onMouseDown:_?le=>le.stopPropagation():void 0,onClick:_?le=>{if(le.stopPropagation(),d==null||d(Q.id),l==null||l(Q.threadId),Q.linkedSelector)try{let M=document.querySelector(Q.linkedSelector);if(M){let ue=M.getBoundingClientRect();(ue.bottom<0||ue.top>window.innerHeight)&&M.scrollIntoView({behavior:"smooth",block:"center"})}}catch(M){}}:void 0,onMouseEnter:c?()=>c(Q.id):void 0,onMouseLeave:c?()=>c(null):void 0,style:{pointerEvents:_?"auto":"none",cursor:_?"pointer":void 0,zIndex:9999},children:bt("div",{"data-devtools":"annotation-badge",style:{height:Q.size,display:"flex",alignItems:"center",backgroundColor:Q.color,fontFamily:Zt,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:Q.isQueued?lo("span",{style:{opacity:.5,color:"inherit"},children:["queued",Q.queuePosition?` ${Q.queuePosition}`:""]}):Q.isInFlight?lo(tr,{children:[bt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:u===1?lo(tr,{children:[bt("circle",{cx:"7",cy:"7",r:"2"}),bt("circle",{cx:"17",cy:"7",r:"2"}),bt("circle",{cx:"7",cy:"17",r:"2"}),bt("circle",{cx:"17",cy:"17",r:"2"})]}):lo(tr,{children:[bt("circle",{cx:"12",cy:"6",r:"2"}),bt("circle",{cx:"6",cy:"12",r:"2"}),bt("circle",{cx:"18",cy:"12",r:"2"}),bt("circle",{cx:"12",cy:"18",r:"2"})]})}),bt("span",{style:{opacity:.7,color:"inherit"},children:bi[b]})]}):lo(tr,{children:[Q.isNeedsReview?bt("span",{style:{fontWeight:700,color:"inherit"},children:"?"}):bt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:bt("polyline",{points:"4 12 10 18 20 6"})}),bt("span",{style:{opacity:.7,color:"inherit"},children:Q.replyCount>0?`${Q.replyCount} ${Q.replyCount===1?"reply":"replies"}`:"Cancelled"})]})})},Q.id)})})}function fs({inFlightSelectorColors:e,animated:t=!0}){let[n,o]=Yr([]);return xi(()=>{if(e.size===0){o([]);return}let r=null,i=()=>{let l=[];for(let[d,c]of e){let p=On(d);if(!p)continue;let u=p.getBoundingClientRect();l.push({selector:d,top:u.top,left:u.left,width:u.width,height:u.height,color:c})}o(l)},s=()=>{r&&cancelAnimationFrame(r),r=requestAnimationFrame(i)};i(),window.addEventListener("scroll",s,!0),window.addEventListener("resize",s,!0);let a=new MutationObserver(s);return a.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s,!0),a.disconnect(),r&&cancelAnimationFrame(r)}},[e]),n.length===0?null:lo(tr,{children:[t&&bt("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(r=>bt("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:bt("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:bt("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 xl({annotations:e,supersededAnnotations:t,scrollX:n,scrollY:o,onReply:r,annotationGroupMap:i,canvasRef:s,onHoverAnnotation:a}){let l=e.filter(p=>t.has(p)?!1:p.status==="waiting_input"&&p.question&&p.threadId);if(l.length===0)return null;let d=new Set,c=[];for(let p of l){if(!p.threadId||d.has(p.threadId))continue;d.add(p.threadId);let u=p.type==="text"?p:e.find(g=>g.groupId&&g.groupId===p.groupId&&g.type==="text")||p;if(u.type==="text"&&u.text&&u.points[0]){let g=u.points[0],b=u.fontSize||12,v=b*1.4,A=i.get(u.id),T=u.text.replace(/\n/g," "),$=A!==void 0?A+". "+T:T,O=document.createElement("canvas").getContext("2d");if(!O)continue;O.font=`${b}px ${Zt}`;let w=g.x-n,N=br(w),se=xr(O,$,N),ee=O.measureText(se).width;c.push({annotation:p,x:g.x+ee+4,y:g.y-4,size:v+8})}}return c.length===0?null:bt(tr,{children:c.map(({annotation:p,x:u,y:g,size:b})=>bt(vu,{annotation:p,x:u-n,y:g-o,size:b,onReply:r,onHoverAnnotation:a},`question-${p.threadId}`))})}function vu({annotation:e,x:t,y:n,size:o,onReply:r,onHoverAnnotation:i}){let[s,a]=Yr(!1),[l,d]=Yr(""),c=yl(null),p=yl(null);xi(()=>{s&&c.current&&c.current.focus()},[s]),xi(()=>{if(!s)return;let A=$=>{p.current&&!$.composedPath().includes(p.current)&&a(!1)},T=$=>{$.key==="Escape"&&a(!1)};return document.addEventListener("mousedown",A),document.addEventListener("keydown",T),()=>{document.removeEventListener("mousedown",A),document.removeEventListener("keydown",T)}},[s]);let u=hl(()=>{!l.trim()||!e.threadId||(r(e.threadId,l.trim()),d(""),a(!1))},[l,e.threadId,r]),g=hl(A=>{A.key==="Enter"&&(A.metaKey||A.ctrlKey)&&(A.preventDefault(),u())},[u]),b=s?t:t-Bo,v=s?n:n-Bo;return lo("div",{ref:p,"data-devtools":"question-badge",onMouseEnter:i?()=>i(e.id):void 0,onMouseLeave:i?()=>i(null):void 0,style:{position:"fixed",left:`max(0px, ${b}px)`,top:`max(0px, ${v}px)`,padding:s?0:Bo,transform:`translate(min(0px, calc(100vw - max(0px, ${b}px) - 100%)), min(0px, calc(100vh - max(0px, ${v}px) - 100%)))`,zIndex:s?10002:9999,pointerEvents:"auto",cursor:s?void 0:"pointer"},children:[!s&&lo("div",{onClick:()=>a(!0),style:{height:o,display:"flex",alignItems:"center",backgroundColor:e.color,padding:`0 ${4}px`,gap:4,fontFamily:Zt,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[lo("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",children:[bt("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),bt("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),bt("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),bt("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]}),bt("span",{style:{opacity:.7},children:"reply?"})]}),s&&lo("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#eaeaea",fontFamily:Zt,fontSize:12,color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)"},children:[bt("div",{style:{padding:`${6}px ${8}px`,lineHeight:1.4},children:e.question}),lo("div",{style:{padding:`0 ${4}px ${4}px`},children:[bt("textarea",{ref:c,value:l,onChange:A=>d(A.target.value),onKeyDown:g,placeholder:"Type your reply...",style:{width:"100%",minHeight:40,padding:4,fontSize:12,fontFamily:Zt,backgroundColor:"rgba(0, 0, 0, 0.04)",color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)",borderRadius:0,outline:"none",resize:"vertical",lineHeight:1.4,boxSizing:"border-box"}}),bt("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:4},children:bt("button",{onClick:u,disabled:!l.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:Zt,fontWeight:600,backgroundColor:l.trim()?e.color:"rgba(0,0,0,0.1)",color:l.trim()?"#ffffff":"rgba(0,0,0,0.3)",border:"none",cursor:l.trim()?"pointer":"default"},children:"Send \u2318\u23CE"})})]})]})]})}function vi(e){var i;let t=new Set,n=new Map;for(let s of e){if(!s.linkedSelector)continue;let a=n.get(s.linkedSelector)||[];a.push(s),n.set(s.linkedSelector,a)}let o=new Set,r=new Set;for(let s of n.values()){if(s.length<=1){(i=s[0])!=null&&i.groupId&&r.add(s[0].groupId);continue}s.sort((l,d)=>d.timestamp-l.timestamp);let a=s[0];a.groupId&&r.add(a.groupId);for(let l=1;l<s.length;l++){let d=s[l];t.add(d),d.groupId&&o.add(d.groupId)}}for(let s of e)s.groupId&&o.has(s.groupId)&&!r.has(s.groupId)&&t.add(s);return t}import{useEffect as vl,useLayoutEffect as Su,useState as Sl}from"react";import{jsx as gs,jsxs as Cl}from"react/jsx-runtime";function wu(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 wl=["top-left","top-right","bottom-right","bottom-left"];function El({element:e,radius:t,accentColor:n,hoveredCorner:o,draggingCorner:r,cursorViewport:i}){let[s,a]=Sl(null),[l,d]=Sl(!1);if(vl(()=>{let T=O=>{(O.key==="Meta"||O.key==="Control")&&d(!0)},$=O=>{(O.key==="Meta"||O.key==="Control")&&d(!1)},P=()=>d(!1);return window.addEventListener("keydown",T,!0),window.addEventListener("keyup",$,!0),window.addEventListener("blur",P),()=>{window.removeEventListener("keydown",T,!0),window.removeEventListener("keyup",$,!0),window.removeEventListener("blur",P)}},[]),vl(()=>{if(!e){a(null);return}let T=()=>{a(e.getBoundingClientRect())};return T(),window.addEventListener("scroll",T,{passive:!0}),window.addEventListener("resize",T,{passive:!0}),()=>{window.removeEventListener("scroll",T),window.removeEventListener("resize",T)}},[e]),Su(()=>{e&&a(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!s)return null;let c=s.width,p=s.height,u=wu(n,.2),g={"top-left":{x:0,y:t["top-left"]},"top-right":{x:c,y:t["top-right"]},"bottom-right":{x:c,y:p-t["bottom-right"]},"bottom-left":{x:0,y:p-t["bottom-left"]}},b=new Set,v=r!=null?r:o;if(v)if(l)b.add(v);else for(let T of wl)b.add(T);let A={position:"fixed",top:s.top,left:s.left,width:c,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"};return Cl("div",{"data-devtools":"border-radius-handles",style:A,children:[Cl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${p}`,children:[gs("rect",{x:"0.5",y:"0.5",width:Math.max(0,c-1),height:Math.max(0,p-1),fill:"none",stroke:u,strokeWidth:"1"}),wl.map(T=>{let $=g[T],P=b.has(T);return gs("circle",{cx:$.x,cy:$.y,r:T===(r!=null?r:o)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:T===(r!=null?r:o)?4:2,paintOrder:"stroke"},T)})]}),i&&v&&(()=>{let T=Math.round(t[v]);return gs("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:T})})()]})}import{useEffect as Cu,useState as Eu}from"react";function nr(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);if(n)return`oklch(${n[1]} / ${t})`;let o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(o){let r=parseInt(o[1],16),i=parseInt(o[2],16),s=parseInt(o[3],16);return`rgba(${r}, ${i}, ${s}, ${t})`}return`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}import{Fragment as ku,jsx as ms,jsxs as Jr}from"react/jsx-runtime";function bo({element:e,isSelected:t=!1,elementInfo:n,color:o="#3b82f6",annotationNumber:r,changeCount:i,hideTooltip:s=!1}){let[a,l]=Eu(null);if(Cu(()=>{if(!e){l(null);return}let w=()=>{let N=e.getBoundingClientRect();l(N)};return w(),window.addEventListener("scroll",w,{passive:!0}),window.addEventListener("resize",w,{passive:!0}),()=>{window.removeEventListener("scroll",w),window.removeEventListener("resize",w)}},[e]),!a||!e)return null;let d={position:"fixed",top:a.top,left:a.left,width:a.width,height:a.height,pointerEvents:"none",zIndex:9996,backgroundColor:nr(o,.05),overflow:"visible"},c=e.tagName.toLowerCase(),p=e.id?`#${e.id}`:"",u=e.classList.length>0?"."+Array.from(e.classList).slice(0,2).join("."):"",g=n==null?void 0:n.reactComponent,b=g?`<${g}> ${c}${p}${u}`:`${c}${p}${u}`,v=22,A=a.height>=window.innerHeight,T=A?0:a.top>=v?a.top-v:a.bottom,$=A?{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:T,left:a.left,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:o,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400},O=!s&&Jr("div",{"data-devtools":"tooltip",style:$,children:[r!==void 0&&Jr("span",{children:[r,"."]}),ms("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:b}),i!==void 0&&i>0&&Jr("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return Jr(ku,{children:[Jr("div",{"data-devtools":"highlight",style:d,children:[ms("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:ms("rect",f({x:"0.5",y:"0.5",width:Math.max(0,a.width-1),height:Math.max(0,a.height-1),fill:"none",stroke:o,strokeWidth:"1"},!t&&{strokeDasharray:"2 4"}))}),A&&O]}),!A&&O]})}import{useEffect as kl,useLayoutEffect as Tu,useState as hs}from"react";import{jsx as Mo,jsxs as bs}from"react/jsx-runtime";function ys(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 xs({element:e,gap:t,accentColor:n,hoveredAxis:o,draggingAxis:r,cursorViewport:i,isAutoGap:s=!1,refreshKey:a=0}){let[l,d]=hs(null),[c,p]=hs([]),[u,g]=hs(!1);if(kl(()=>{let ee=W=>{(W.key==="Meta"||W.key==="Control")&&g(!0)},G=W=>{(W.key==="Meta"||W.key==="Control")&&g(!1)},oe=()=>g(!1);return window.addEventListener("keydown",ee,!0),window.addEventListener("keyup",G,!0),window.addEventListener("blur",oe),()=>{window.removeEventListener("keydown",ee,!0),window.removeEventListener("keyup",G,!0),window.removeEventListener("blur",oe)}},[]),kl(()=>{if(!e){d(null),p([]);return}let ee=()=>{d(e.getBoundingClientRect()),p(To(e))};return ee(),window.addEventListener("scroll",ee,{passive:!0}),window.addEventListener("resize",ee,{passive:!0}),()=>{window.removeEventListener("scroll",ee),window.removeEventListener("resize",ee)}},[e]),Tu(()=>{e&&(d(e.getBoundingClientRect()),p(To(e)))},[e,t.row,t.column,a]),!l||c.length===0)return null;let b=l.width,v=l.height,A="pm-gap-stripe-pattern",T=ys(n,.25),$=ys(n,.1),P=ys(n,.2),O=8,w=2,N={position:"fixed",top:l.top,left:l.left,width:b,height:v,pointerEvents:"none",zIndex:9996,overflow:"visible"},se=r!=null?r:o;return bs("div",{"data-devtools":"gap-handles",style:N,children:[bs("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${b} ${v}`,children:[Mo("defs",{children:Mo("pattern",{id:A,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Mo("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:T,strokeWidth:"1.5"})})}),Mo("rect",{x:"0.5",y:"0.5",width:Math.max(0,b-1),height:Math.max(0,v-1),fill:"none",stroke:P,strokeWidth:"1"}),c.map((ee,G)=>{let oe=ee.x-l.left,W=ee.y-l.top,Z=ee.w,k=ee.h,Ce=u?ee.axis===se:!0;return(ee.axis==="row"?t.row:t.column)===0?null:bs("g",{opacity:Ce?1:.6,children:[Mo("rect",{x:oe,y:W,width:Z,height:k,fill:$}),Mo("rect",{x:oe,y:W,width:Z,height:k,fill:`url(#${A})`})]},G)}),se&&(()=>{let ee=c.filter(Me=>Me.axis===se);if(ee.length===0)return null;let G=ee[0];if(i&&ee.length>1){let Me=1/0;for(let Ne of ee){let ve=Ne.x+Ne.w/2,We=Ne.y+Ne.h/2,Re=Math.abs(i.x-ve)+Math.abs(i.y-We);Re<Me&&(Me=Re,G=Ne)}}let oe=G.x-l.left,W=G.y-l.top,Z=G.w,k=G.h,Ce=oe+Z/2,Q=W+k/2;if(s)return Mo("circle",{cx:Ce,cy:Q,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let fe=se==="column",_=fe?w:O,le=fe?O:w,M=Ce-_/2,ue=Q-le/2;return Mo("rect",{x:M,y:ue,width:_,height:le,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&se&&(()=>{let ee=s?"auto":String(Math.round(se==="row"?t.row:t.column));return Mo("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:ee})})()]})}import{useCallback as Au,useEffect as Pu,useState as Ou}from"react";import{useEffect as Mu,useState as Tl}from"react";var Iu=3,Ru=250,vs=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Lu=3e3;function Ml(e){let[t,n]=Tl(0),[o,r]=Tl(()=>Math.floor(Math.random()*vs.length));return Mu(()=>{if(!e)return;let i=setInterval(()=>n(a=>(a+1)%Iu),Ru),s=setInterval(()=>r(a=>(a+1)%vs.length),Lu);return()=>{clearInterval(i),clearInterval(s)}},[e]),{charIndex:t,word:vs[o]}}import{Fragment as Ss,jsx as Yn,jsxs as Tr}from"react/jsx-runtime";function Bu(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 Il=22,ws=12;function Du(s){var a=s,{left:e,top:t,avoidBottom:n,style:o,children:r}=a,i=Zn(a,["left","top","avoidBottom","style","children"]);let l=n!==void 0?`${n}px`:"100vh";return Yn("div",h(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:ws,transform:`translate(min(0px, calc(100vw - max(0px, ${e}px) - 100%)), min(0px, calc(${l} - max(0px, ${t}px) - 100%)))`},o),children:r}))}function Rl({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:o,dispatch:r,inFlightSelectors:i,toolbarRef:s,onHoverSelector:a}){var $;let[l,d]=Ou([]),c=i&&i.size>0,{charIndex:p,word:u}=Ml(!!c);Pu(()=>{if(t){d([]);return}let P=null,O=()=>{let se=[];e.forEach((ee,G)=>{let oe=On(ee.selector);if(!oe)return;let W=oe.getBoundingClientRect();se.push({selector:ee.selector,modIndex:G,top:W.top>=Il?W.top-Il:W.bottom,left:W.left,label:Bu(ee),changeCount:ee.changes.length,annotationNumber:o+G+1})}),d(se)},w=()=>{P&&cancelAnimationFrame(P),P=requestAnimationFrame(O)};O(),window.addEventListener("scroll",w,!0),window.addEventListener("resize",w,!0);let N=new MutationObserver(w);return N.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),N.disconnect(),P&&cancelAnimationFrame(P)}},[e,t,o]);let g=Au(P=>{let O=e[P];if(!O)return;let w=On(O.selector);w&&(r({type:"SELECT_ANNOTATION",payload:{id:null}}),r({type:"SET_TOOL",payload:"inspector"}),r({type:"SELECT_ELEMENT",payload:{el:w,info:O.element}}))},[e,r]);if(l.length===0)return null;let b=($=s==null?void 0:s.current)==null?void 0:$.getBoundingClientRect(),v=b?b.top-8:void 0,A={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},T={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return Yn(Ss,{children:l.map(P=>{let O=i==null?void 0:i.has(P.selector);return Yn(Du,{left:P.left-ws,top:P.top-ws,avoidBottom:v,onClick:()=>g(P.modIndex),onMouseEnter:a?()=>a(P.selector):void 0,onMouseLeave:a?()=>a(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:Tr("div",{"data-devtools":"badge",style:h(f({},A),{backgroundColor:O?"#999999":n}),children:[Tr("span",{children:[P.annotationNumber,"."]}),Yn("span",{style:T,children:P.label}),Tr("span",{style:{opacity:.8},children:["(",P.changeCount," ",P.changeCount===1?"change":"changes",")"]}),O&&Tr("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[Yn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:p===1?Tr(Ss,{children:[Yn("circle",{cx:"7",cy:"7",r:"2"}),Yn("circle",{cx:"17",cy:"7",r:"2"}),Yn("circle",{cx:"7",cy:"17",r:"2"}),Yn("circle",{cx:"17",cy:"17",r:"2"})]}):Tr(Ss,{children:[Yn("circle",{cx:"12",cy:"6",r:"2"}),Yn("circle",{cx:"6",cy:"12",r:"2"}),Yn("circle",{cx:"18",cy:"12",r:"2"}),Yn("circle",{cx:"12",cy:"18",r:"2"})]})}),u]})]})},P.selector)})})}import{useEffect as _u,useState as Nu}from"react";import{Fragment as Fu,jsx as Ll}from"react/jsx-runtime";function Hu(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function Al({styleModifications:e,accentColor:t}){let[n,o]=Nu([]);if(_u(()=>{let i=null,s=()=>{let d=[];for(let c of e){let p=On(c.selector);if(!p)continue;let u=p.getBoundingClientRect();if(u.width===0&&u.height===0)continue;let g=er(p);d.push({selector:c.selector,top:u.top,left:u.left,width:u.width,height:u.height,borderRadius:`${g["top-left"]}px ${g["top-right"]}px ${g["bottom-right"]}px ${g["bottom-left"]}px`})}o(d)},a=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(s)};s(),window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a,{passive:!0});let l=new MutationObserver(a);return l.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",a),window.removeEventListener("resize",a),l.disconnect(),i&&cancelAnimationFrame(i)}},[e]),n.length===0)return null;let r=Hu(t,.2);return Ll(Fu,{children:n.map(i=>{let s={position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${r}`,borderRadius:i.borderRadius,boxSizing:"border-box"};return Ll("div",{"data-devtools":"mod-border",style:s},i.selector)})})}import{useEffect as Pl,useLayoutEffect as $u,useState as Ol}from"react";import{jsx as Do,jsxs as Es}from"react/jsx-runtime";function Cs(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}var zu={top:"bottom",bottom:"top",left:"right",right:"left"};function ks({element:e,padding:t,accentColor:n,hoveredSide:o,draggingSide:r,cursorViewport:i,refreshKey:s}){let[a,l]=Ol(null),[d,c]=Ol(!1);if(Pl(()=>{let Z=Q=>{(Q.key==="Meta"||Q.key==="Control")&&c(!0)},k=Q=>{(Q.key==="Meta"||Q.key==="Control")&&c(!1)},Ce=()=>c(!1);return window.addEventListener("keydown",Z,!0),window.addEventListener("keyup",k,!0),window.addEventListener("blur",Ce),()=>{window.removeEventListener("keydown",Z,!0),window.removeEventListener("keyup",k,!0),window.removeEventListener("blur",Ce)}},[]),Pl(()=>{if(!e){l(null);return}let Z=()=>{l(e.getBoundingClientRect())};return Z(),window.addEventListener("scroll",Z,{passive:!0}),window.addEventListener("resize",Z,{passive:!0}),()=>{window.removeEventListener("scroll",Z),window.removeEventListener("resize",Z)}},[e]),$u(()=>{e&&l(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,s]),!a)return null;let p=a.width,u=a.height,{top:g,right:b,bottom:v,left:A}=t,T="pm-stripe-pattern",$=Cs(n,.25),P=Cs(n,.1),O=Cs(n,.2),w=8,N=2,se={position:"fixed",top:a.top,left:a.left,width:p,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"},ee=["top","right","bottom","left"],G={top:`0,0 ${p},0 ${p-b},${g} ${A},${g}`,right:`${p},0 ${p},${u} ${p-b},${u-v} ${p-b},${g}`,bottom:`0,${u} ${A},${u-v} ${p-b},${u-v} ${p},${u}`,left:`0,0 ${A},${g} ${A},${u-v} 0,${u}`},oe={top:{x:p/2-w/2,y:g/2-N/2,w,h:N},bottom:{x:p/2-w/2,y:u-v/2-N/2,w,h:N},left:{x:A/2-N/2,y:u/2-w/2,w:N,h:w},right:{x:p-b/2-N/2,y:u/2-w/2,w:N,h:w}},W=new Set;return r?W.add(r):o&&(W.add(o),d||W.add(zu[o])),Es("div",{"data-devtools":"padding-handles",style:se,children:[Es("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${p} ${u}`,children:[Do("defs",{children:Do("pattern",{id:T,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Do("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:$,strokeWidth:"1.5"})})}),Do("rect",{x:"0.5",y:"0.5",width:Math.max(0,p-1),height:Math.max(0,u-1),fill:"none",stroke:O,strokeWidth:"1"}),ee.map(Z=>{if(t[Z]<=0)return null;let Ce=W.has(Z);return Es("g",{opacity:Ce?1:.6,children:[Do("polygon",{points:G[Z],fill:P}),Do("polygon",{points:G[Z],fill:`url(#${T})`})]},Z)}),ee.map(Z=>{let k=oe[Z],Ce=W.has(Z);return Do("rect",{x:k.x,y:k.y,width:k.w,height:k.h,fill:n,stroke:"#ffffff",strokeWidth:Ce?4:2,paintOrder:"stroke"},`handle-${Z}`)})]}),i&&(o||r)&&(()=>{let Z=r!=null?r:o,k=Math.round(t[Z]);return Do("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:k})})()]})}import{useCallback as xo,useEffect as no,useMemo as Ii,useRef as $n,useState as Sn}from"react";import{Check as Mi,ChevronDown as Os,MoveHorizontal as Yl,Shrink as pp}from"lucide-react";var Wu="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",Mr={borderWidth:3,borderStyle:"solid",borderImage:`url("${Wu}") 4 / 1.9 / 0 round`};function Si({color:e="rgb(0,0,0)",animated:t=!1}={}){let n=`<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='${e}' stroke-width='.75'/></svg>`;return f({position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(n)}")`,backgroundSize:"5px 5px",WebkitMask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",WebkitMaskComposite:"xor",mask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",maskComposite:"exclude",pointerEvents:"none"},t?{animation:"popmelt-border-march 0.8s linear infinite"}:{})}var wi={"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 Ir(e){var t,n;return(n=(t=wi[e])==null?void 0:t[0])!=null?n:"px"}function _o(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function Ci(e,t,n,o){let r=e.trim();if(!r)return"";let i=r.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i);if(i)return`${parseFloat(i[1])}${i[2].toLowerCase()}`;let s=parseFloat(r);if(!isNaN(s)){if(o){let{unit:a}=_o(n);return`${s}${a||Ir(t)}`}return`${s}${Ir(t)}`}return r}function Ts(e,t){if(!t||t==="px")return e;if(t==="rem"){let n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return Math.round(e/n*1e3)/1e3}return e}import{useCallback as Gu,useEffect as ju,useRef as Bl,useState as Yu}from"react";import{Plus as Dl,X as Ju}from"lucide-react";import{jsx as Fn,jsxs as or}from"react/jsx-runtime";var Ei=[{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 Uu(e){if(!e||e==="none")return[];let t=[],n=/([\w-]+)\(([^)]+)\)/g,o;for(;(o=n.exec(e))!==null;){let r=o[1],i=o[2],s=parseFloat(i);isNaN(s)||t.push({name:r,value:s})}return t}function Ms(e){return e.length===0?"none":e.map(t=>{var r;let n=Ei.find(i=>i.name===t.name),o=(r=n==null?void 0:n.unit)!=null?r:"";return`${t.name}(${t.value}${o})`}).join(" ")}function _l({value:e,onChange:t,accentColor:n,modified:o,panelContentRef:r}){let i=Uu(e),[s,a]=Yu(!1),l=Bl(null),d=Bl(null);ju(()=>{if(!s)return;let P=O=>{l.current&&!O.composedPath().includes(l.current)&&a(!1)};return document.addEventListener("mousedown",P,!0),()=>document.removeEventListener("mousedown",P,!0)},[s]);let c=Ei.filter(P=>!i.some(O=>O.name===P.name)),p=P=>{let O=[...i,{name:P.name,value:P.defaultValue}];t(Ms(O)),a(!1)},u=P=>{let O=i.filter((w,N)=>N!==P);t(Ms(O))},g=(P,O)=>{let w=i.map((N,se)=>se===P?h(f({},N),{value:O}):N);t(Ms(w))},b={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},v=Gu(P=>{var G;if(!d.current)return{position:"fixed",top:0,left:0};let O=d.current.getBoundingClientRect(),w=(G=r==null?void 0:r.current)==null?void 0:G.getBoundingClientRect(),N=P*24+8,ee=window.innerHeight-O.bottom<N;return h(f({position:"fixed"},ee?{bottom:window.innerHeight-O.top+2}:{top:O.bottom+2}),{left:w?w.left+4:O.left,width:w?w.width-8:140,zIndex:10001})},[r]),A={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)"},T={display:"block",width:"100%",padding:"4px 10px",border:"none",backgroundColor:"transparent",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#334155",cursor:"pointer",textAlign:"left"},$=P=>Fn("div",{ref:l,style:f(f({},v(P.length)),A),children:P.map(O=>Fn("button",{type:"button",onClick:()=>p(O),style:T,onMouseEnter:w=>{w.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:w=>{w.currentTarget.style.backgroundColor="transparent"},children:O.label},O.name))});return i.length===0?or("div",{children:[or("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Fn(Io,{modified:!1,children:Fn("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:h(f({},b),{color:"#999",cursor:"default"})})}),Fn("button",{ref:d,type:"button",onClick:()=>a(!s),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:Fn(Dl,{size:12})})]}),s&&$(Ei)]}):or("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((P,O)=>{let w=Ei.find(N=>N.name===P.name);return w?or("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Fn("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}),Fn(Io,{modified:o,children:or("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[Fn("input",{type:"range",min:w.min,max:w.max,step:w.step,value:P.value,onChange:N=>g(O,parseFloat(N.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(P.value-w.min)/(w.max-w.min)*100}%, rgba(0,0,0,0.1) ${(P.value-w.min)/(w.max-w.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),Fn("input",{type:"number",min:w.min,max:w.max,step:w.step,value:w.unit==="px"||w.unit==="deg"?Math.round(P.value):Math.round(P.value*100)/100,onChange:N=>g(O,parseFloat(N.target.value)||0),style:h(f({},b),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),w.unit&&Fn("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:w.unit})]})}),Fn("button",{type:"button",onClick:()=>u(O),style:{display:"flex",alignItems:"center",justifyContent:"center",width:16,height:16,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:Fn(Ju,{size:10})})]},P.name):null}),c.length>0&&or("div",{children:[or("button",{ref:d,type:"button",onClick:()=>a(!s),style:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",border:"none",borderRadius:2,backgroundColor:"transparent",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#94a3b8",cursor:"pointer"},children:[Fn(Dl,{size:10}),"Add filter"]}),s&&$(c)]})]})}import{useCallback as uo,useEffect as qu,useRef as ki,useState as Nl}from"react";import{AlignHorizontalSpaceAround as Zu,AlignVerticalSpaceAround as Qu,Columns3 as ep,Grid2x2 as tp,RectangleHorizontal as np,Rows3 as op,UnfoldHorizontal as Hl,UnfoldVertical as Fl}from"lucide-react";import{useCallback as Vu,useEffect as Xu,useRef as Ur}from"react";import{jsx as Ku}from"react/jsx-runtime";var Is=[0,1,2,4,8,12,16,20,24,28,32];function Rr({value:e,onChange:t,onPreview:n,onScrubEnd:o,onReset:r,isModified:i,accentColor:s,defaultUnit:a="rem",snapSteps:l,color:d,style:c,children:p}){let u=Ur(null),g=Ur(null),b=Ur(r),v=Ur(i),A=Ur(!1);b.current=r,v.current=i,Xu(()=>{let $=O=>{let w=g.current;if(!w)return;w.hasMoved=!0,A.current=O.shiftKey;let N=w.unit==="rem"||w.unit==="em"?.1:1;w.accum+=O.movementX*N;let se=Math.max(0,Math.round((w.startValue+w.accum)*10)/10);if(O.shiftKey&&l){let ee=w.unit==="rem"||w.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,G=w.unit==="rem"||w.unit==="em"?se*ee:se,oe=l[l.length-1];for(let W=0;W<l.length-1;W++){let Z=l[W],k=l[W+1];if(G<=(Z+k)/2){oe=Z;break}if(G<k){oe=k;break}}G>l[l.length-1]&&(oe=Math.round(G/8)*8),se=w.unit==="rem"||w.unit==="em"?Math.round(oe/ee*1e3)/1e3:oe}n==null||n(`${se}${w.unit}`)},P=()=>{let O=g.current;if(!O)return;let w=Math.max(0,Math.round((O.startValue+O.accum)*10)/10);if(A.current&&l){let se=O.unit==="rem"||O.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,ee=O.unit==="rem"||O.unit==="em"?w*se:w,G=l[l.length-1];for(let oe=0;oe<l.length-1;oe++){let W=l[oe],Z=l[oe+1];if(ee<=(W+Z)/2){G=W;break}if(ee<Z){G=Z;break}}ee>l[l.length-1]&&(G=Math.round(ee/8)*8),w=O.unit==="rem"||O.unit==="em"?Math.round(G/se*1e3)/1e3:G}let N=O.hasMoved&&w!==O.startValue;g.current=null,document.exitPointerLock(),N?t(`${w}${O.unit}`):O.hasMoved?n==null||n(`${O.startValue}${O.unit}`):v.current&&b.current&&b.current(),o==null||o()};return document.addEventListener("mousemove",$),document.addEventListener("mouseup",P),()=>{document.removeEventListener("mousemove",$),document.removeEventListener("mouseup",P)}},[t,n,o]);let T=Vu($=>{var w;if($.button!==0)return;$.preventDefault();let P=_o(e),O=P.unit&&P.unit!=="px"?P.unit:a;g.current={startValue:P.num,unit:O,accum:0,hasMoved:!1},(w=u.current)==null||w.requestPointerLock()},[e,a]);return Ku("span",{ref:u,onMouseDown:T,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:f({color:i?s||"#3b82f6":d||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize"},c),children:p})}import{Fragment as Rs,jsx as De,jsxs as mn}from"react/jsx-runtime";function rp({gridCols:e,gridRows:t,gridModified:n,accentColor:o,onColsChange:r,onRowsChange:i}){return De(Jn,{style:{width:100},children:mn("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"8px 4px"},children:[De("input",{type:"number",min:1,max:12,value:e,onChange:s=>r(parseInt(s.target.value)||1),style:h(f({},vn),{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:s=>i(parseInt(s.target.value)||1),style:h(f({},vn),{width:32,textAlign:"center",padding:2})})]})})}function $l({element:e,getValue:t,getOriginalValue:n,handleChange:o,isModified:r,onResetProperty:i,isCollapsed:s,onToggle:a,sectionHeaderStyle:l,activeDropdown:d,onDropdownChange:c,panelContentRef:p,accentColor:u,onFieldHover:g,preferredUnit:b,onUnitCycle:v}){let A=c,T=t("display"),$=t("flex-direction"),P=zl(T,$),O=T==="flex"||T==="inline-flex",w=T==="grid",N=O||w,se=$==="column"||$==="column-reverse",ee=t("width"),G=t("height"),oe=r("width")?ee:fi(e,"width"),W=r("height")?G:fi(e,"height"),Z=Ls(ee,oe),k=Ls(G,W),Ce=t("min-width"),Q=t("max-width"),fe=t("min-height"),_=t("max-height"),le=Lr(t("padding")),M=t("gap"),ue=t("row-gap"),Me=t("column-gap"),Ne=t("grid-template-columns"),ve=t("grid-template-rows"),We=t("overflow"),Re=Ne.split(/\s+/).filter(H=>H&&H!=="none").length||1,ge=ve.split(/\s+/).filter(H=>H&&H!=="none").length||1,[qe,ft]=Nl(!1),gt=d!==null,ln=gt||qe,K=gt?.3:qe?.65:1,ce=({mode:H,icon:Pe,active:Be})=>De("button",{type:"button",onClick:()=>Wl(H,o),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:Be?nr(u,.15):"transparent",color:Be?u:"#64748b",cursor:"pointer",fontSize:14},children:Pe}),Ae=(H,Pe,Be)=>{Be==="fixed"?o(H,Pe):o(H,Ti(Be,Pe))},$e=H=>{let Pe=Lr(t("padding")),Be=H||"0";o("padding",`${Pe.top} ${Be} ${Pe.bottom} ${Be}`)},rt=H=>{let Pe=Lr(t("padding")),Be=H||"0";o("padding",`${Be} ${Pe.right} ${Be} ${Pe.left}`)},[Je,ae]=Nl({}),X=uo((H,Pe)=>Be=>{Pe(Be),ae(qt=>h(f({},qt),{[H]:Be}))},[]),ie=uo(H=>{ae(Pe=>{let Be=f({},Pe);return delete Be[H],Be})},[]),we=uo(H=>{let Pe=Lr(t("padding"));Ke(e,"padding",`${Pe.top} ${H} ${Pe.bottom} ${H}`)},[e,t]),ke=uo(H=>{let Pe=Lr(t("padding"));Ke(e,"padding",`${H} ${Pe.right} ${H} ${Pe.left}`)},[e,t]),Tt=uo(H=>Pe=>{Ke(e,H,Pe)},[e]),je=se?"row":"column",tt=je==="row"?"row-gap":"column-gap",ht=tt==="row-gap"?ue||M:Me||M,Ft=r(tt)||r("gap"),St=uo(()=>{let Pe=To(e).find(qt=>qt.axis===je);if(Pe)return je==="row"?Pe.h:Pe.w;let Be=Qo(e);return je==="row"?Be.row:Be.column},[e,je]),ut=uo(()=>{let H=t("justify-content");return H==="space-between"?"between":H==="space-around"||H==="space-evenly"?"around":"fixed"},[t])(),Yt=uo((H,Pe)=>{if(H==="fixed"){let Be=Math.max(0,Math.round(St()*1e3)/1e3),qt=Pe||(Be>0?`${Be}px`:"8px");o("justify-content","normal"),o(tt,qt);return}o("justify-content",H==="between"?"space-between":"space-around"),o(tt,"0px")},[tt,St,o]),yn=uo(H=>{if(ut!=="fixed"){Yt("fixed",H);return}o(tt,H)},[Yt,ut,tt,o]),Mn=uo(H=>{Ke(e,"justify-content","normal"),Ke(e,tt,H)},[e,tt]),cn=H=>H==="center"?1:H==="flex-end"||H==="end"?2:0,Xn=cn(t("justify-content")),mt=cn(t("align-items")),Ve=se?mt:Xn,nt=se?Xn:mt,dn=ki(null),Kt=ki({x:0,y:0}),In=ki({col:Ve,row:nt});In.current={col:Ve,row:nt};let mo=uo((H,Pe)=>{let Be=["flex-start","center","flex-end"];se?(o("justify-content",Be[Pe]),o("align-items",Be[H])):(o("justify-content",Be[H]),o("align-items",Be[Pe]))},[se,o]),io=ki(mo);io.current=mo,qu(()=>{let Pe=Be=>{let qt=dn.current;if(!qt||!Be.composedPath().includes(qt))return;Be.preventDefault(),Be.stopPropagation(),Kt.current.x+=Be.deltaX,Kt.current.y+=Be.deltaY;let{col:Ot,row:Rn}=In.current,un=!1;Math.abs(Kt.current.x)>=30&&(Ot=Math.max(0,Math.min(2,Ot+(Kt.current.x>0?1:-1))),Kt.current.x=0,Kt.current.y=0,un=!0),!un&&Math.abs(Kt.current.y)>=30&&(Rn=Math.max(0,Math.min(2,Rn+(Kt.current.y>0?1:-1))),Kt.current.x=0,Kt.current.y=0,un=!0),un&&(Ot!==In.current.col||Rn!==In.current.row)&&io.current(Ot,Rn)};return document.addEventListener("wheel",Pe,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",Pe,{capture:!0})},[]);let nn=()=>De("div",{ref:dn,onMouseEnter:()=>{ft(!0),p.current&&(p.current.style.overflowY="hidden")},onMouseLeave:()=>{ft(!1),p.current&&(p.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:to,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(H=>[0,1,2].map(Pe=>De("button",{type:"button",onClick:()=>mo(Pe,H),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:Pe===Ve&&H===nt?De("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:Pe===0?mn(Rs,{children:[De("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),De("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),De("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]}):Pe===1?mn(Rs,{children:[De("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),De("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),De("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]}):mn(Rs,{children:[De("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),De("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),De("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]})}):De("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${H}-${Pe}`)))}),wn=r("grid-template-columns")||r("grid-template-rows");return mn("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[De("div",{style:l,children:De("span",{children:N?"Auto layout":"Layout"})}),mn("div",{style:{padding:"8px 12px"},children:[mn("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:to,borderRadius:2,padding:2,opacity:K,transition:"opacity 150ms ease"},children:[De(ce,{mode:"block",icon:De(np,{size:16}),active:P==="block"}),De(ce,{mode:"flex-col",icon:De(op,{size:16}),active:P==="flex-col"}),De(ce,{mode:"flex-row",icon:De(ep,{size:16}),active:P==="flex-row"}),De(ce,{mode:"grid",icon:De(tp,{size:16}),active:P==="grid"})]}),mn("div",{style:{display:"flex",gap:4,marginBottom:8},children:[De(As,{label:"W",property:"width",cssValue:Z==="fixed"?ee:`${Math.round(e.getBoundingClientRect().width)}px`,mode:Z,onValueChange:H=>o("width",H),onModeChange:H=>{if(H==="fixed"){let Pe=e.getBoundingClientRect();o("width",`${Math.round(Pe.width)}px`)}else o("width",Ti(H,ee))},modified:r("width"),dimmed:gt&&d!=="width",dropdownOpen:d==="width",onDropdownChange:H=>A(H?"width":null),panelContentRef:p,accentColor:u,onReset:()=>i("width"),minValue:Ce!=="none"&&Ce!=="0px"&&Ce!=="auto"?Ce:"",maxValue:Q!=="none"&&Q!=="auto"?Q:"",onMinChange:H=>o("min-width",H||"0"),onMaxChange:H=>o("max-width",H||"none"),onMinReset:()=>i("min-width"),onMaxReset:()=>i("max-width"),minModified:r("min-width"),maxModified:r("max-width")}),De(As,{label:"H",property:"height",cssValue:k==="fixed"?G:`${Math.round(e.getBoundingClientRect().height)}px`,mode:k,onValueChange:H=>o("height",H),onModeChange:H=>{if(H==="fixed"){let Pe=e.getBoundingClientRect();o("height",`${Math.round(Pe.height)}px`)}else o("height",Ti(H,G))},modified:r("height"),dimmed:gt&&d!=="height",dropdownOpen:d==="height",onDropdownChange:H=>A(H?"height":null),panelContentRef:p,minValue:fe!=="none"&&fe!=="0px"&&fe!=="auto"?fe:"",maxValue:_!=="none"&&_!=="auto"?_:"",onMinChange:H=>o("min-height",H||"0"),onMaxChange:H=>o("max-height",H||"none"),onMinReset:()=>i("min-height"),onMaxReset:()=>i("max-height"),minModified:r("min-height"),maxModified:r("max-height"),accentColor:u,onReset:()=>i("height")})]}),O&&mn("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8},children:[De("div",{style:{opacity:gt?.3:1,transition:"opacity 150ms ease"},children:nn()}),mn("div",{style:{flex:1,opacity:K,transition:"opacity 150ms ease"},children:[De("div",{onClick:Ft?()=>{i(tt),i("gap")}:void 0,title:Ft?"Click to reset":void 0,style:{fontSize:9,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:Ft?u:"#999",fontWeight:Ft?600:400,marginBottom:2,cursor:Ft?"pointer":"default"},children:"Gap"}),De("div",{style:{display:"flex",gap:2,marginBottom:4,backgroundColor:to,borderRadius:2,padding:2},children:["fixed","between","around"].map(H=>{let Pe=ut===H;return De("button",{type:"button",onClick:()=>Yt(H),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"4px 6px",border:"none",borderRadius:2,backgroundColor:Pe?nr(u,.15):"transparent",color:Pe?u:"#64748b",cursor:"pointer",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontWeight:Pe?600:400,textTransform:"capitalize"},children:H},H)})}),De(Jn,{dimmed:gt,children:mn("div",{style:{display:"flex",alignItems:"center"},children:[De(Rr,{value:ht,onChange:H=>{ie("gap"),yn(H)},onPreview:X("gap",Mn),onScrubEnd:()=>ie("gap"),onReset:()=>{i(tt),i("gap")},isModified:Ft,accentColor:u,defaultUnit:b,children:$==="column"||$==="column-reverse"?De(Fl,{size:12,strokeWidth:Ft?2.5:1.5}):De(Hl,{size:12,strokeWidth:Ft?2.5:1.5})}),De(po,{property:tt,value:Je.gap||(ut==="fixed"?ht:`${Math.max(0,Math.round(St()*1e3)/1e3)}px`),onChange:H=>yn(H),isModified:Ft||"gap"in Je,style:h(f({},vn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:v})]})})]})]}),w&&mn("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:K,transition:"opacity 150ms ease"},children:[De(rp,{gridCols:Re,gridRows:ge,gridModified:wn,accentColor:u,onColsChange:H=>o("grid-template-columns",`repeat(${H}, 1fr)`),onRowsChange:H=>o("grid-template-rows",`repeat(${H}, 1fr)`)}),mn("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[De(Jn,{dimmed:gt,children:mn("div",{style:{display:"flex",alignItems:"center"},children:[De(Rr,{value:Me||M,onChange:H=>{ie("column-gap"),o("column-gap",H)},onPreview:X("column-gap",Tt("column-gap")),onScrubEnd:()=>ie("column-gap"),onReset:()=>i("column-gap"),isModified:r("column-gap"),accentColor:u,defaultUnit:b,children:De(Hl,{size:12,strokeWidth:r("column-gap")?2.5:1.5})}),De(po,{property:"column-gap",value:Je["column-gap"]||Me||M,onChange:H=>o("column-gap",H),isModified:r("column-gap")||"column-gap"in Je,placeholder:"col",style:h(f({},vn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:v})]})}),De(Jn,{dimmed:gt,children:mn("div",{style:{display:"flex",alignItems:"center"},children:[De(Rr,{value:ue||M,onChange:H=>{ie("row-gap"),o("row-gap",H)},onPreview:X("row-gap",Tt("row-gap")),onScrubEnd:()=>ie("row-gap"),onReset:()=>i("row-gap"),isModified:r("row-gap"),accentColor:u,defaultUnit:b,children:De(Fl,{size:12,strokeWidth:r("row-gap")?2.5:1.5})}),De(po,{property:"row-gap",value:Je["row-gap"]||ue||M,onChange:H=>o("row-gap",H),isModified:r("row-gap")||"row-gap"in Je,placeholder:"row",style:h(f({},vn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:v})]})})]})]}),N&&mn("div",{onMouseEnter:()=>g==null?void 0:g("padding"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:K,transition:"opacity 150ms ease"},children:[De(Jn,{style:{flex:1},dimmed:gt,children:mn("div",{style:{display:"flex",alignItems:"center"},children:[De(Rr,{value:le.left,onChange:H=>{ie("padding-h"),$e(H)},onPreview:X("padding-h",we),onScrubEnd:()=>ie("padding-h"),onReset:()=>i("padding"),isModified:r("padding"),accentColor:u,defaultUnit:b,snapSteps:Is,children:De(Zu,{size:12,strokeWidth:r("padding")?2.5:1.5})}),De(po,{property:"padding",value:Je["padding-h"]||le.left,onChange:H=>$e(H),isModified:r("padding")||"padding-h"in Je,placeholder:"H pad",style:h(f({},vn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:v})]})}),De(Jn,{style:{flex:1},dimmed:gt,children:mn("div",{style:{display:"flex",alignItems:"center"},children:[De(Rr,{value:le.top,onChange:H=>{ie("padding-v"),rt(H)},onPreview:X("padding-v",ke),onScrubEnd:()=>ie("padding-v"),onReset:()=>i("padding"),isModified:r("padding"),accentColor:u,defaultUnit:b,snapSteps:Is,children:De(Qu,{size:12,strokeWidth:r("padding")?2.5:1.5})}),De(po,{property:"padding",value:Je["padding-v"]||le.top,onChange:H=>rt(H),isModified:r("padding")||"padding-v"in Je,placeholder:"V pad",style:h(f({},vn),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:b,onUnitCycle:v})]})})]}),mn("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:K,transition:"opacity 150ms ease"},children:[De("input",{type:"checkbox",checked:We==="hidden",onChange:H=>o("overflow",H.target.checked?"hidden":"visible"),style:{margin:0,accentColor:u}}),"Clip content"]})]})]})}import{AlignCenter as ip,AlignJustify as sp,AlignLeft as ap,AlignRight as lp,Baseline as cp,ChevronDown as dp,WholeWord as up}from"lucide-react";import{jsx as Rt,jsxs as Ro}from"react/jsx-runtime";var Gl={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function jl({element:e,getValue:t,handleChange:n,isModified:o,onResetProperty:r,isCollapsed:i,onToggle:s,sectionHeaderStyle:a,accentColor:l,colorVariables:d,activeColorDropdown:c,onColorDropdownChange:p,panelContentRef:u,preferredUnit:g,onUnitCycle:b}){var Z;let v=t("font-family"),A=t("font-size"),T=t("font-weight"),$=t("line-height"),P=t("letter-spacing"),O=t("text-align"),w=t("color"),N=String(T),se=Gl[N]||N,ee=kr(e,w),G=w.includes("var(")?null:jr(ee,d),oe=({align:k,icon:Ce})=>{let Q=O===k;return Rt("button",{type:"button",onClick:()=>n("text-align",k),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:Q?nr(l,.15):"transparent",color:Q?l:"#64748b",cursor:"pointer"},children:Ce})},W=((Z=v.split(",")[0])==null?void 0:Z.trim().replace(/^["']|["']$/g,""))||"System";return Ro("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Rt("div",{style:a,children:Rt("span",{children:"Typography"})}),Ro("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[Rt(Jn,{children:Ro("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[Rt("input",{type:"text",value:v,onChange:k=>n("font-family",k.target.value),style:h(f({},vn),{flex:1,minWidth:0,padding:0,fontWeight:o("font-family")?600:400,color:o("font-family")?l:"inherit"}),title:v}),Rt(dp,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),Ro("div",{style:{display:"flex",gap:4},children:[Rt(Jn,{style:{flex:1},children:Rt("select",{value:N,onChange:k=>n("font-weight",k.target.value),style:h(f({},vn),{padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:o("font-weight")?600:400,color:o("font-weight")?l:"inherit"}),children:Object.entries(Gl).map(([k,Ce])=>Rt("option",{value:k,children:Ce},k))})}),Rt(Jn,{style:{flex:1},children:Rt("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:Rt(po,{property:"font-size",value:A,onChange:k=>n("font-size",k),isModified:o("font-size"),min:1,max:999,style:h(f({},vn),{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:g,onUnitCycle:b})})})]}),Ro("div",{style:{display:"flex",gap:4},children:[Rt(Jn,{style:{flex:1},children:Ro("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[Rt(cp,{size:12,style:{color:o("line-height")?l:"#999",flexShrink:0}}),Rt(po,{property:"line-height",value:$,onChange:k=>n("line-height",k),isModified:o("line-height"),step:.1,min:0,placeholder:"Auto",style:h(f({},vn),{flex:1,minWidth:0,padding:0,fontWeight:o("line-height")?600:400,color:o("line-height")?l:"inherit"}),showUnit:!1})]})}),Rt(Jn,{style:{flex:1},children:Ro("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[Rt(up,{size:12,style:{color:o("letter-spacing")?l:"#999",flexShrink:0}}),Rt(po,{property:"letter-spacing",value:P,onChange:k=>n("letter-spacing",k),isModified:o("letter-spacing"),step:.1,placeholder:"\u2014",style:h(f({},vn),{flex:1,minWidth:0,padding:0,fontWeight:o("letter-spacing")?600:400,color:o("letter-spacing")?l:"inherit"}),showUnit:!1})]})})]}),Ro("div",{style:{display:"flex",gap:2,backgroundColor:to,borderRadius:2,padding:2},children:[Rt(oe,{align:"left",icon:Rt(ap,{size:14})}),Rt(oe,{align:"center",icon:Rt(ip,{size:14})}),Rt(oe,{align:"right",icon:Rt(lp,{size:14})}),Rt(oe,{align:"justify",icon:Rt(sp,{size:14})})]}),Ro("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[Rt("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"}),Rt("div",{style:{flex:1,minWidth:0},children:Rt(Ps,{value:w,resolvedValue:ee,colorVariables:d,matchingVariable:G,onChange:k=>n("color",k),accentColor:l,modified:o("color"),panelContentRef:u,isDropdownOpen:c==="color",onDropdownChange:k=>p(k?"color":null)})})]})]})]})}import{Fragment as gp,jsx as Se,jsxs as jt}from"react/jsx-runtime";var Jl=[{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 fp(e,t){let n=t.trim().toLowerCase();switch(e){case"opacity":return n==="1";case"border-width":return n==="0px"||n==="0"||n==="medium";case"border-radius":return n==="0px"||n==="0";case"border-style":return n==="none";case"box-shadow":return n==="none";case"backdrop-filter":return n==="none"||n==="";case"letter-spacing":return n==="normal"||n==="0px"||n==="0";case"background-color":return n==="rgba(0, 0, 0, 0)"||n==="transparent";default:return!1}}function Ls(e,t){return!t||e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":"fixed"}function Ti(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=_o(t);if(typeof n.num=="number"&&!isNaN(n.num)){let o=n.unit==="%"?"px":n.unit||"px";return`${n.num}${o}`}return"auto"}}}function Lr(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 zl(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function Wl(e,t){switch(e){case"block":t("display","block");break;case"flex-row":t("display","flex"),t("flex-direction","row");break;case"flex-col":t("display","flex"),t("flex-direction","column");break;case"grid":t("display","grid");break}}var to="rgba(0, 0, 0, 0.04)",vn={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};function As({label:e,property:t,cssValue:n,mode:o,onValueChange:r,onModeChange:i,modified:s,dimmed:a,dropdownOpen:l,onDropdownChange:d,panelContentRef:c,accentColor:p="#3b82f6",onReset:u,minValue:g,maxValue:b,onMinChange:v,onMaxChange:A,onMinReset:T,onMaxReset:$,minModified:P,maxModified:O}){let w=_o(n),N=s?w.unit||Ir(t):Ir(t),se=!s&&w.unit&&w.unit!==N?Ts(w.num,N):w.num,[ee,G]=Sn(!1),[oe,W]=Sn(String(se)),[Z,k]=Sn(!1),Ce=$n(null),Q=$n(null),fe=$n(null),_=$n(!1);no(()=>{ee||W(String(se))},[se,ee]),no(()=>{if(!l)return;let Re=qe=>{Q.current&&!qe.composedPath().includes(Q.current)&&fe.current&&!qe.composedPath().includes(fe.current)&&(d==null||d(!1))},ge=qe=>{qe.key==="Escape"&&(d==null||d(!1))};return document.addEventListener("mousedown",Re),document.addEventListener("keydown",ge),()=>{document.removeEventListener("mousedown",Re),document.removeEventListener("keydown",ge)}},[l,d]),no(()=>{ee&&Ce.current&&(Ce.current.focus(),Ce.current.select())},[ee]);let le=()=>{let Re=Ci(oe,t,n,s);r(Re||`${Math.max(0,parseFloat(oe)||0)}${N}`),G(!1)},M=()=>{if(_.current){_.current=!1;return}le()},ue=Re=>{if(Re.key==="Enter"){le();return}if(Re.key==="Escape"){_.current=!0,W(String(se)),G(!1);return}if(Re.key==="ArrowUp"||Re.key==="ArrowDown"){Re.preventDefault();let ge=Re.key==="ArrowUp"?1:-1,qe=Re.shiftKey?8:Re.altKey?.1:1,ft=parseFloat(oe)||0,gt=Math.round(Math.max(0,ft+ge*qe)*1e3)/1e3;W(String(gt)),r(`${gt}${N}`)}},Me={fixed:"Fixed",hug:"Hug",fill:"Fill"},Ne={fixed:Se(Yl,{size:12}),hug:Se(pp,{size:12}),fill:Se(Yl,{size:12})},ve=()=>{d==null||d(!l)},We=()=>{if(!fe.current||!(c!=null&&c.current))return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let Re=fe.current.getBoundingClientRect(),ge=c.current.getBoundingClientRect();return{position:"fixed",top:Re.bottom+4,left:ge.left+4,width:ge.width-8}};return jt("div",{ref:fe,onMouseEnter:()=>k(!0),onMouseLeave:()=>k(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:ee?p:Z?"rgba(0,0,0,0.15)":"transparent",backgroundColor:to,transition:"border-color 100ms ease, opacity 150ms ease",opacity:a?.3:1},children:[Se("span",{onClick:s&&u?u:void 0,title:s?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:s?p:"#999",fontWeight:s?600:400,padding:"0 8px",flexShrink:0,cursor:s?"pointer":"default"},children:e}),o==="fixed"?ee?Se("input",{ref:Ce,type:"text",inputMode:"numeric",value:oe,onChange:Re=>W(Re.target.value),onKeyDown:ue,onBlur:M,style:h(f({},vn),{flex:1,minWidth:0,padding:"4px 2px"})}):Se("span",{onClick:()=>G(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:se}):Se("span",{style:{flex:1}}),jt("button",{type:"button",onClick:ve,style:{display:"flex",alignItems:"center",gap:2,padding:"4px 8px",border:"none",outline:"none",backgroundColor:"transparent",color:"#999",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"pointer",flexShrink:0},children:[Me[o],Se(Os,{size:12})]}),l&&jt("div",{ref:Q,style:h(f({},We()),{backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:12,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'}),children:[jt("button",{type:"button",onClick:()=>{i("fixed"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="fixed"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="fixed"?600:400,cursor:"pointer",textAlign:"left"},children:[Ne.fixed,jt("span",{children:["Fixed ",t," (",n,")"]}),o==="fixed"&&Se(Mi,{size:14,style:{marginLeft:"auto"}})]}),jt("button",{type:"button",onClick:()=>{i("hug"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="hug"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="hug"?600:400,cursor:"pointer",textAlign:"left"},children:[Ne.hug,Se("span",{children:"Hug contents"}),o==="hug"&&Se(Mi,{size:14,style:{marginLeft:"auto"}})]}),jt("button",{type:"button",onClick:()=>{i("fill"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:o==="fill"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:o==="fill"?600:400,cursor:"pointer",textAlign:"left"},children:[Ne.fill,Se("span",{children:"Fill container"}),o==="fill"&&Se(Mi,{size:14,style:{marginLeft:"auto"}})]}),Se("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),jt("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[jt("div",{style:{display:"flex",alignItems:"center",backgroundColor:to,borderRadius:2,padding:"4px 8px"},children:[Se("span",{onClick:P?Re=>{Re.stopPropagation(),T==null||T()}:void 0,title:P?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:P?p:"#999",fontWeight:P?600:400,marginRight:8,flexShrink:0,cursor:P?"pointer":"default"},children:"Min"}),Se("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:Re=>v==null?void 0:v(Re.target.value),onClick:Re=>Re.stopPropagation(),style:h(f({},vn),{flex:1,minWidth:0,padding:0,textAlign:"right",color:P?p:"inherit",fontWeight:P?600:400})})]}),jt("div",{style:{display:"flex",alignItems:"center",backgroundColor:to,borderRadius:2,padding:"4px 8px"},children:[Se("span",{onClick:O?Re=>{Re.stopPropagation(),$==null||$()}:void 0,title:O?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:O?p:"#999",fontWeight:O?600:400,marginRight:8,flexShrink:0,cursor:O?"pointer":"default"},children:"Max"}),Se("input",{type:"text",value:b||"",placeholder:"\u2014",onChange:Re=>A==null?void 0:A(Re.target.value),onClick:Re=>Re.stopPropagation(),style:h(f({},vn),{flex:1,minWidth:0,padding:0,textAlign:"right",color:O?p:"inherit",fontWeight:O?600:400})})]})]})]})]})}function Jn({children:e,style:t,dimmed:n}){let[o,r]=Sn(!1);return Se("div",{onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),style:f({position:"relative",borderRadius:2,border:"1px solid",borderColor:o?"rgba(0,0,0,0.15)":"transparent",backgroundColor:to,transition:"border-color 100ms ease, opacity 150ms ease",opacity:n?.3:1},t),children:e})}function Io({children:e}){let[t,n]=Sn(!1);return Se("div",{onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:t?"rgba(0,0,0,0.15)":"transparent",backgroundColor:to,transition:"border-color 100ms ease"},children:e})}function po({property:e,value:t,onChange:n,isModified:o=!1,step:r=1,min:i,max:s,style:a,placeholder:l,showUnit:d=!0,unitStyle:c,preferredUnit:p,onUnitCycle:u}){let g=_o(t),b=Ir(e),v=wi[e],T=p&&v&&v.includes(p)?p:b,$=o&&g.unit||T,P=!o&&g.unit&&g.unit!==$?Ts(g.num,$):g.num,[O,w]=Sn(!1),[N,se]=Sn(""),ee=M=>{w(!0),se(String(P||"")),requestAnimationFrame(()=>M.target.select())},G=()=>{if(w(!1),N.trim()){let M=Ci(N,e,t,o);M&&n(M)}},oe=M=>{let ue=M.target.value;se(ue);let Me=ue.trim(),Ne=Me.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),ve=Me.match(/^(-?[\d.]+)$/);if(Ne){let We=parseFloat(Ne[1]);isNaN(We)||n(`${We}${Ne[2].toLowerCase()}`)}else if(ve){let We=parseFloat(ve[1]);isNaN(We)||n(`${We}${$}`)}},W=M=>{if(M.key==="Enter"){if(N.trim()){let ue=Ci(N,e,t,o);ue&&n(ue)}M.target.blur();return}if(M.key==="ArrowUp"||M.key==="ArrowDown"){M.preventDefault();let ue=M.shiftKey?10:M.altKey?.1:1,Me=(M.key==="ArrowUp"?1:-1)*r*ue,Ne=parseFloat(N)||P||0,ve=Math.round((Ne+Me)*1e3)/1e3;i!==void 0&&(ve=Math.max(i,ve)),s!==void 0&&(ve=Math.min(s,ve)),se(String(ve)),n(`${ve}${$}`)}},Z=/^-?[\d.]/.test(t.trim()),k=O?N:Z?String(P):"",Q=O&&/\s*(rem|em|px|%)\s*$/i.test(N)?"":$,fe=u&&(Q==="rem"||Q==="px"),_={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},le=h(f({},c!=null?c:_),{pointerEvents:"auto",cursor:"pointer"});return jt(gp,{children:[Se("input",{type:"text",inputMode:"decimal",value:k,onFocus:ee,onBlur:G,onChange:oe,onKeyDown:W,placeholder:l,style:a}),d&&Q&&Se("span",{style:fe?le:c!=null?c:_,onClick:fe?u:void 0,title:fe?"Click to switch units":void 0,children:Q})]})}function Ps({value:e,resolvedValue:t,colorVariables:n,matchingVariable:o,onChange:r,accentColor:i="#3b82f6",modified:s,panelContentRef:a,isDropdownOpen:l,onDropdownChange:d}){let[c,p]=Sn(!1),u=e,[g,b]=Sn(u),[v,A]=Sn(!1),[T,$]=Sn(!1),[P,O]=Sn(!1),w=$n(null),N=$n(null),se=$n(null),ee=l!==void 0?l:v,G=d||A,oe=xo(()=>{if(!se.current)return{position:"fixed",top:0,left:0,width:200};let M=se.current.getBoundingClientRect();if(a!=null&&a.current){let ue=a.current.getBoundingClientRect();return{position:"fixed",top:M.bottom+4,left:ue.left+4,width:ue.width-8}}return{position:"fixed",top:M.bottom+4,left:M.left,width:M.width}},[a]);no(()=>{c||b(e)},[e,c]),no(()=>{if(!ee&&!T)return;let M=Me=>{se.current&&!Me.composedPath().includes(se.current)&&(G(!1),$(!1))},ue=Me=>{Me.key==="Escape"&&(G(!1),$(!1))};return document.addEventListener("mousedown",M),document.addEventListener("keydown",ue),()=>{document.removeEventListener("mousedown",M),document.removeEventListener("keydown",ue)}},[ee,T]),no(()=>{c&&w.current&&(w.current.focus(),w.current.select())},[c]);let W=Ii(()=>{if(!g||g.startsWith("#")||g.startsWith("rgb")||g.startsWith("hsl")||g.startsWith("oklch"))return[];let M=g.toLowerCase();return n.filter(ue=>ue.name.toLowerCase().includes(M)||ue.usage.toLowerCase().includes(M)).slice(0,8)},[g,n]),Z=()=>{r(g),p(!1),$(!1)},k=M=>{b(M),M.includes("var")||M.includes("--")||M.length>0&&!M.startsWith("#")?$(!0):$(!1)},Ce=M=>{b(M.value),r(M.value),G(!1),$(!1),p(!1)},Q=()=>{setTimeout(()=>{!ee&&!T&&Z()},150)},fe=M=>{M.key==="Enter"?Z():M.key==="Escape"&&(b(e),p(!1),$(!1))},_=Ii(()=>{let M=t.trim().toLowerCase();if(M.startsWith("#"))return M.length===4?`#${M[1]}${M[1]}${M[2]}${M[2]}${M[3]}${M[3]}`:M.slice(0,7);let ue=M.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(ue){let Ne=parseInt(ue[1],10).toString(16).padStart(2,"0"),ve=parseInt(ue[2],10).toString(16).padStart(2,"0"),We=parseInt(ue[3],10).toString(16).padStart(2,"0");return`#${Ne}${ve}${We}`}let Me=M.match(/oklch\(\s*([\d.]+)/);if(Me){let Ne=Math.max(0,Math.min(1,parseFloat(Me[1]))),ve=Math.round(Ne*255).toString(16).padStart(2,"0");return`#${ve}${ve}${ve}`}return"#000000"},[t]);return jt("div",{ref:se,onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:c?i:P?"rgba(0,0,0,0.15)":"transparent",backgroundColor:to,transition:"border-color 100ms ease",overflow:"hidden"},children:[jt("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[jt("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[Se("input",{type:"color",value:_,onChange:M=>{let ue=M.target.value;b(ue),r(ue)},style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),Se("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),c?Se("input",{ref:w,type:"text",value:g,onChange:M=>k(M.target.value),onKeyDown:fe,onBlur:Q,style:h(f({},vn),{flex:1,minWidth:0})}):Se("span",{onClick:()=>p(!0),style:{flex:1,minWidth:0,padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:s?i:"inherit"},title:u,children:u}),n.length>0&&Se("button",{type:"button",onClick:()=>G(!ee),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:Se(Os,{size:12})})]}),T&&W.length>0&&Se("div",{style:h(f({},oe()),{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:W.map(M=>jt("button",{type:"button",onClick:()=>Ce(M),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:[Se("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:M.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),Se("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:M.name})]},M.name))}),ee&&Se("div",{ref:N,style:h(f({},oe()),{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(M=>jt("button",{type:"button",onClick:()=>Ce(M),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:(o==null?void 0:o.usage)===M.usage||e===M.value?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:(o==null?void 0:o.usage)===M.usage||e===M.value?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[Se("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:M.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),Se("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:M.name}),((o==null?void 0:o.usage)===M.usage||e===M.value)&&Se(Mi,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},M.name))})]})}function Ul({element:e,elementInfo:t,selector:n,styleModifications:o,dispatch:r,onClose:i,onHover:s,accentColor:a="#3b82f6",toolbarRef:l}){let d=$n(null),c=$n(null),[p,u]=Sn(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch(K){return!1}});no(()=>{if(p)return;let K=setTimeout(()=>u(!0),50);return()=>clearTimeout(K)},[p]);let[g,b]=Sn(null),[v,A]=Sn(null),T=g!==null||v!==null,[$,P]=Sn("rem"),O=xo(()=>{P(K=>K==="rem"?"px":"rem")},[]),w=$n(new Map),[N,se]=Sn(""),ee=Ii(()=>ps(),[]);no(()=>{let K=ce=>{var $e;if(ce.key!=="Escape")return;let Ae=document.activeElement;Ae&&(($e=d.current)!=null&&$e.contains(Ae))||i()};return window.addEventListener("keydown",K),()=>window.removeEventListener("keydown",K)},[i]);let G=$n({top:0,left:0,maxHeight:400}),[,oe]=Sn(0),W="devtools-panel-position",Z=$n({x:0,y:0}),k=$n(null),Ce=$n(!1);no(()=>{try{let K=localStorage.getItem(W);if(K){let ce=JSON.parse(K);typeof ce.top=="number"&&typeof ce.left=="number"&&(Ce.current=!0,G.current=h(f({},G.current),{top:ce.top,left:ce.left}))}}catch(K){}},[]),no(()=>{let K=Ae=>{var St;let $e=k.current;if(!$e)return;let rt=$e.startOffsetX+(Ae.clientX-$e.startX),Je=$e.startOffsetY+(Ae.clientY-$e.startY),ae=280,X=16,ie=Math.max(X,Math.min(window.innerWidth-ae-X,G.current.left+rt)),we=Math.max(X,G.current.top+Je);Z.current={x:ie-G.current.left,y:we-G.current.top};let ke=d.current,Tt=ke==null?void 0:ke.parentElement;if(!Tt)return;Tt.style.top=`${we}px`,Tt.style.left=`${ie}px`;let je=(St=l==null?void 0:l.current)==null?void 0:St.getBoundingClientRect(),tt=window.innerHeight-16;je&&ie+ae>je.left&&(tt=je.top-8);let ht=Math.max(0,we),Ft=Math.max(200,tt-ht);ke&&(ke.style.maxHeight=`${Ft}px`)},ce=()=>{if(!k.current)return;let Ae=G.current.top+Z.current.y,$e=G.current.left+Z.current.x;G.current=h(f({},G.current),{top:Ae,left:$e}),Z.current={x:0,y:0},Ce.current=!0;try{localStorage.setItem(W,JSON.stringify({top:Ae,left:$e}))}catch(rt){}k.current=null};return window.addEventListener("mousemove",K),window.addEventListener("mouseup",ce),()=>{window.removeEventListener("mousemove",K),window.removeEventListener("mouseup",ce)}},[]);let Q=xo(K=>{K.button!==0||K.target.closest("button")||(K.preventDefault(),k.current={startX:K.clientX,startY:K.clientY,startOffsetX:Z.current.x,startOffsetY:Z.current.y})},[]);no(()=>{Z.current={x:0,y:0};let K=($e=!1)=>{var tt;let rt=d.current,Je=280,ae=8,X,ie;if(Ce.current)X=G.current.top,ie=G.current.left;else{let ht=e.getBoundingClientRect();ie=ht.right+ae,X=ht.top,ie+Je>window.innerWidth-ae&&(ie=ht.left-Je-ae),ie<ae&&(ie=Math.max(ae,(window.innerWidth-Je)/2))}let we=(tt=l==null?void 0:l.current)==null?void 0:tt.getBoundingClientRect(),ke=window.innerHeight-16;we&&ie+Je>we.left&&(ke=we.top-ae);let Tt=Math.max(0,X),je=Math.max(200,ke-Tt);if(G.current={top:X,left:ie,maxHeight:je},$e&&rt){let ht=rt.parentElement;ht&&!Ce.current&&(ht.style.top=`${X+Z.current.y}px`,ht.style.left=`${ie+Z.current.x}px`),rt.style.maxHeight=`${je}px`}else oe(ht=>ht+1)};K(!1);let ce=()=>K(!0),Ae=()=>K(!1);return window.addEventListener("scroll",ce,{passive:!0}),window.addEventListener("resize",Ae,{passive:!0}),()=>{window.removeEventListener("scroll",ce),window.removeEventListener("resize",Ae)}},[e]),no(()=>{let K=d.current;if(!K)return;let ce=Ae=>{let $e=c.current;if(!$e){Ae.preventDefault();return}let{scrollTop:rt,scrollHeight:Je,clientHeight:ae}=$e,X=rt<=0&&Ae.deltaY<0,ie=rt+ae>=Je&&Ae.deltaY>0;(X||ie)&&Ae.preventDefault()};return K.addEventListener("wheel",ce,{passive:!1}),()=>K.removeEventListener("wheel",ce)},[]);let fe=Ii(()=>o.find(K=>K.selector===n),[o,n]),_=xo(K=>{let ce=fe==null?void 0:fe.changes.find(Ae=>Ae.property===K);return ce?ce.modified:pi(e,K)},[e,fe]),le=xo((K,ce)=>{if(!K.includes("color"))return ce;let Ae=ce.trim(),$e=ee.find(Je=>Je.usage===Ae||Je.name===Ae),rt=($e==null?void 0:$e.value)||Ae;return kr(e,rt)},[ee,e]),M=xo(K=>{if(w.current.has(K))return w.current.get(K);let ce=fe==null?void 0:fe.changes.find($e=>$e.property===K);if(ce)return ce.original;let Ae=pi(e,K);return w.current.set(K,Ae),Ae},[e,fe]),ue=xo((K,ce)=>{let Ae=M(K),$e=le(K,ce);Ke(e,K,$e),K==="backdrop-filter"&&Ke(e,"-webkit-backdrop-filter",$e),r({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:K,original:Ae,modified:$e}})},[e,n,t,r,le,M]),Me=xo(K=>{let ce=o.find($e=>$e.selector===n);ce!=null&&ce.changes.find($e=>$e.property===K)&&e instanceof HTMLElement&&(e.style.removeProperty(K),r({type:"CLEAR_STYLE",payload:{selector:n,property:K}}),w.current.delete(K))},[e,n,o,r]),Ne=xo(()=>{let K=N.split(";").map(ce=>ce.trim()).filter(ce=>ce);for(let ce of K){let Ae=ce.indexOf(":");if(Ae>0){let $e=ce.slice(0,Ae).trim(),rt=ce.slice(Ae+1).trim();$e&&rt&&ue($e,rt)}}se("")},[N,ue]),ve=xo(K=>{var ce;return(ce=fe==null?void 0:fe.changes.some(Ae=>Ae.property===K))!=null?ce:!1},[fe]),We=K=>{var Je;let ce=_(K.property),Ae=ve(K.property),$e=!Ae&&fp(K.property,ce),rt={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};if($e&&K.type!=="backdrop-filter")return Se(Io,{modified:!1,children:Se("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:ae=>ue(K.property,ae.target.value),style:h(f({},rt),{color:"#999"})})});switch(K.type){case"color":{let ae=kr(e,ce),X=ce.includes("var(")?null:jr(ae,ee);return Se(Ps,{value:ce,resolvedValue:ae,colorVariables:ee,matchingVariable:X,onChange:ie=>ue(K.property,ie),accentColor:a,modified:Ae,panelContentRef:c,isDropdownOpen:v===K.property,onDropdownChange:ie=>A(ie?K.property:null)})}case"number":{if(!!wi[K.property])return Se(Io,{modified:Ae,children:Se(po,{property:K.property,value:ce,onChange:ie=>ue(K.property,ie),isModified:Ae,min:K.min,max:K.max,step:K.step||1,style:h(f({},rt),{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:$,onUnitCycle:O})});let{num:X}=_o(ce);return Se(Io,{modified:Ae,children:Se("input",{type:"number",value:X,min:K.min,max:K.max,step:K.step||1,onChange:ie=>ue(K.property,ie.target.value),style:rt})})}case"select":return Se(Io,{modified:Ae,children:jt("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[Se("select",{value:ce,onChange:ae=>ue(K.property,ae.target.value),style:h(f({},rt),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(Je=K.options)==null?void 0:Je.map(ae=>Se("option",{value:ae,children:ae},ae))}),Se("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:Se(Os,{size:12})})]})});case"spacing":return Se(Io,{modified:Ae,children:Se("input",{type:"text",value:ce,onChange:ae=>ue(K.property,ae.target.value),placeholder:"e.g., 10px or 10px 20px",style:rt})});case"backdrop-filter":return Se(_l,{value:ce,onChange:ae=>ue(K.property,ae),accentColor:a,modified:Ae,panelContentRef:c});default:return Se(Io,{modified:Ae,children:Se("input",{type:"text",value:ce,onChange:ae=>ue(K.property,ae.target.value),style:rt})})}},Re=t.reactComponent||t.tagName,ge={position:"fixed",top:G.current.top,left:G.current.left,width:280,maxHeight:G.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:p?1:0,transition:"opacity 150ms ease"},qe={display:"flex",alignItems:"center",justifyContent:"space-between",margin:4,padding:"4px 5px 4px 10px",backgroundColor:a,color:"#ffffff",cursor:k.current?"grabbing":"grab",userSelect:"none",WebkitUserSelect:"none"},ft={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"},gt={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},ln={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return Se("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:G.current.top+Z.current.y,left:G.current.left+Z.current.x,zIndex:10002,pointerEvents:"none"},children:jt("div",{ref:d,"data-devtools":"panel",style:h(f({},ge),{position:"relative",top:0,left:0,zIndex:0,pointerEvents:"auto"}),onMouseEnter:()=>s==null?void 0:s("element"),onMouseLeave:()=>s==null?void 0:s(null),children:[Se("div",{"aria-hidden":"true",style:Si()}),jt("div",{style:qe,onMouseDown:Q,children:[Se("div",{style:{display:"flex",alignItems:"center",gap:3,overflow:"hidden",minWidth:0},children:Se("span",{style:{fontWeight:600,fontSize:12,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Re})}),Se("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"})]}),jt("div",{ref:c,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[Se("div",{style:{opacity:v?.3:1,transition:"opacity 150ms ease"},children:Se($l,{element:e,getValue:_,getOriginalValue:M,handleChange:ue,isModified:ve,onResetProperty:Me,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:ft,activeDropdown:g,onDropdownChange:b,panelContentRef:c,accentColor:a,onFieldHover:s,preferredUnit:$,onUnitCycle:O})}),Se("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:Se(jl,{element:e,getValue:_,handleChange:ue,isModified:ve,onResetProperty:Me,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:ft,accentColor:a,colorVariables:ee,activeColorDropdown:v,onColorDropdownChange:A,panelContentRef:c,preferredUnit:$,onUnitCycle:O})}),Jl.map((K,ce)=>{let Ae=ce===Jl.length-1,$e=v&&K.properties.some(Je=>Je.property===v);return jt("div",{style:{borderBottom:Ae?"none":"1px solid rgba(0,0,0,0.08)",opacity:T&&!$e?.3:1,transition:"opacity 150ms ease"},children:[Se("div",{style:ft,children:Se("span",{children:K.name})}),Se("div",{style:{padding:"4px 0"},children:K.properties.map(Je=>{let ae=ve(Je.property),X=$e&&Je.property!==v;return jt("div",{style:h(f({},gt),{opacity:X?.3:1,transition:"opacity 150ms ease"}),children:[Se("span",{onClick:ae?()=>Me(Je.property):void 0,title:ae?"Click to reset":void 0,style:h(f({},ln),{color:ae?a:"#64748b",fontWeight:ae?600:400,cursor:ae?"pointer":"default"}),children:Je.label}),Se("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:We(Je)})]},Je.property)})})]},K.name)}),jt("div",{style:{opacity:T?.3:1,transition:"opacity 150ms ease"},children:[Se("div",{style:ft,children:Se("span",{children:"Raw CSS"})}),jt("div",{style:{padding:"8px 12px"},children:[Se("textarea",{value:N,onChange:K=>se(K.target.value),placeholder:"property: value; ...",style:{width:"100%",height:60,padding:8,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"1px solid rgba(0,0,0,0.1)",borderRadius:2,resize:"vertical",outline:"none"}}),N.trim()&&Se("button",{type:"button",onClick:Ne,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:a,color:"#fff",cursor:"pointer",opacity:N.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as mp,useLayoutEffect as hp,useState as yp}from"react";import{Fragment as Sp,jsx as rr,jsxs as vp}from"react/jsx-runtime";var Bs=["flex-start","center","flex-end"],Ds=["flex-start","center","flex-end"];function bp(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function xp(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 Vl(e){let t=Array.from(e.children);if(t.length===0)return null;let n=1/0,o=1/0,r=-1/0,i=-1/0;for(let s of t){let a=s.getBoundingClientRect();a.width===0&&a.height===0||(a.top<n&&(n=a.top),a.left<o&&(o=a.left),a.bottom>r&&(r=a.bottom),a.right>i&&(i=a.right))}return n===1/0?null:new DOMRect(o,n,i-o,r-n)}function Xl({element:e,modifier:t,accentColor:n,refreshKey:o=0}){let[r,i]=yp(null);if(mp(()=>{if(!e){i(null);return}let v=()=>i(Vl(e));return v(),window.addEventListener("scroll",v,{passive:!0}),window.addEventListener("resize",v,{passive:!0}),()=>{window.removeEventListener("scroll",v),window.removeEventListener("resize",v)}},[e]),hp(()=>{e&&i(Vl(e))},[e,o]),!r)return null;let s=r,a=window.getComputedStyle(e),l=a.display;if(l!=="flex"&&l!=="inline-flex")return null;let d=a.flexDirection,c=d==="column"||d==="column-reverse"?"vertical":"horizontal",p=c==="horizontal"?"vertical":"horizontal",u=[];if(t==="shift"){let v=bp(a.justifyContent);if(v){let A=Bs.indexOf(v);c==="horizontal"?(A>0&&u.push("left"),A<Bs.length-1&&u.push("right")):(A>0&&u.push("up"),A<Bs.length-1&&u.push("down"))}}else{let v=xp(a.alignItems);if(v){let A=Ds.indexOf(v);p==="horizontal"?(A>0&&u.push("left"),A<Ds.length-1&&u.push("right")):(A>0&&u.push("up"),A<Ds.length-1&&u.push("down"))}}if(u.length===0)return null;let g=14,b=7;return rr(Sp,{children:u.map(v=>{let A,T;switch(v){case"right":A=s.right+g,T=s.top+s.height/2;break;case"left":A=s.left-g,T=s.top+s.height/2;break;case"down":A=s.left+s.width/2,T=s.bottom+g;break;case"up":A=s.left+s.width/2,T=s.top-g;break}let $=v==="right"?0:v==="left"?180:v==="down"?90:-90,P={position:"fixed",left:A-b,top:T-b,width:b*2,height:b*2,pointerEvents:"none",zIndex:9997};return rr("div",{"data-devtools":"swipe-hint",style:P,children:rr("svg",{width:b*2,height:b*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:vp("g",{transform:`rotate(${$})`,children:[rr("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),rr("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),rr("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),rr("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},v)})})}import{useEffect as wp,useLayoutEffect as Cp,useState as Ep}from"react";import{jsx as _s,jsxs as Ns}from"react/jsx-runtime";function kp(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 Kl({element:e,fontSize:t,lineHeight:n,accentColor:o,hoveredProperty:r,draggingProperty:i,cursorViewport:s}){let[a,l]=Ep(null);if(wp(()=>{if(!e){l(null);return}let T=()=>{l(Er(e))};return T(),window.addEventListener("scroll",T,{passive:!0}),window.addEventListener("resize",T,{passive:!0}),()=>{window.removeEventListener("scroll",T),window.removeEventListener("resize",T)}},[e]),Cp(()=>{e&&l(Er(e))},[e,t,n]),!a)return null;let d=a.width,c=a.height,p=kp(o,.2),u=i!=null?i:r,g=8,b=2,v={position:"fixed",top:a.top,left:a.left,width:d,height:c,pointerEvents:"none",zIndex:9996,overflow:"visible"},A=T=>T==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return Ns("div",{"data-devtools":"text-handles",style:v,children:[Ns("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${c}`,children:[_s("rect",{x:"0.5",y:"0.5",width:Math.max(0,d-1),height:Math.max(0,c-1),fill:"none",stroke:p,strokeWidth:"1"}),(u==="font-size"||!u)&&_s("rect",{x:d-b/2,y:c/2-g/2,width:b,height:g,fill:o,stroke:"#ffffff",strokeWidth:u==="font-size"?4:2,paintOrder:"stroke"}),(u==="line-height"||!u)&&_s("rect",{x:d/2-g/2,y:c-b/2,width:g,height:b,fill:o,stroke:"#ffffff",strokeWidth:u==="line-height"?4:2,paintOrder:"stroke"})]}),s&&u&&(()=>{let T=u==="font-size"?"Aa":"Lh",$=A(u);return Ns("div",{style:{position:"fixed",left:s.x+8,top:s.y-28,background:o,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:[T," ",$]})})()]})}import{Fragment as Pr,jsx as pt,jsxs as Ar}from"react/jsx-runtime";var ql=8,Hs=[0,1,2,4,8,12,16,20,24,28,32],Fs="devtools-active-text";function Zl(e,t,n=0,o,r){let i=e.left+window.scrollX+4,s=t==="top-left"?e.top+window.scrollY-eo-n*eo+4:e.bottom+window.scrollY+4-1+n*eo,a=window.scrollY+4,l=window.scrollY+window.innerHeight-eo-4,d=90,c=!1;if(o&&r!==void 0){let p=o.getBoundingClientRect();if(e.left+4+r+4+d>p.left){let g=window.scrollY+p.top-eo-4;g<l&&(l=g,c=!0)}}return s<a?s=e.top+window.scrollY+4:s>l&&(s=c?l:Math.max(e.top+window.scrollY+4,l)),{x:i,y:s}}function Ql({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:o,activeAnnotationIds:r,queuePositionMap:i,inFlightStyleSelectors:s,inFlightSelectorColors:a,onAttachImages:l,onReply:d,onViewThread:c,onCloseThread:p,onModelComponentsAdd:u,onModelComponentFocus:g,onModelComponentHover:b,modelComponentNames:v,modelPanelHoveredComponent:A,modelSpacingTokenHover:T,highlightedAnnotationIds:$,focusedThreadAnnotationId:P,externalCanvasRef:O,toolbarRef:w}){var Wn,Wi,Zr,Hr,ia,sa,aa,la,ca;let{canvasRef:N,redrawAll:se,resizeCanvas:ee}=Qa(),G=an(m=>{N.current=m,O&&(O.current=m)},[O,N]),oe=Xt(!1);En(()=>{let m=N.current;if(!m)return;let y=()=>{oe.current&&(oe.current=!1,m.style.pointerEvents="")},q=I=>{I.button===0&&oe.current&&y()};return window.addEventListener("mousedown",q),()=>window.removeEventListener("mousedown",q)},[N]);let[W,Z]=vt(!1),[k,Ce]=vt(()=>{if(typeof window=="undefined")return null;try{let m=localStorage.getItem(Fs);return m?JSON.parse(m):null}catch(m){return null}}),[Q,fe]=vt(null),[_,le]=vt(null),[M,ue]=vt(null),Me=Xt(null),Ne=Xt(null),ve=Xt({x:0,y:0}),We=Xt([]),Re=Xt(0),[ge,qe]=vt(null),[ft,gt]=vt(new Map),ln=Xt(0),K=Xt(null),[ce,Ae]=vt(null),[$e,rt]=vt(null),[Je,ae]=vt(null),[X,ie]=vt(null),we=Xt({isDragging:!1,side:null,startX:0,startY:0,original:{top:0,right:0,bottom:0,left:0},element:null,elementInfo:null,selector:null,durableSelector:null}),[ke,Tt]=vt(null),[je,tt]=vt(null),[ht,Ft]=vt(null),[St,lt]=vt(null),ut=Xt({x:0,y:0}),[Yt,yn]=vt({x:0,y:0}),Mn=Xt({isDragging:!1,hasMoved:!1,axis:null,startX:0,startY:0,originalRow:0,originalColumn:0,element:null,elementInfo:null,selector:null,durableSelector:null,isAuto:!1,originalJustifyContent:"",visualGap:0}),[cn,Xn]=vt(null),[mt,Ve]=vt(null),[nt,dn]=vt(null),[Kt,In]=vt(!1),[mo,io]=vt(0),[nn,wn]=vt(null),bn=Xt({isDragging:!1,corner:null,startY:0,original:{"top-left":0,"top-right":0,"bottom-right":0,"bottom-left":0},maxRadius:0,element:null,elementInfo:null,selector:null,durableSelector:null}),[H,Pe]=vt(null),[Be,qt]=vt(null),[Ot,Rn]=vt(null),un=Xt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[_t,Co]=vt(null),[Ln,kn]=vt(null),[Mt,so]=vt(null),Jt=el(),ur=Xt(a);ur.current=a;let Gt=an(m=>{let y=ur.current;if(!y||y.size===0)return!1;for(let q of y.keys())try{if(m.matches(q))return!0}catch(I){}return!1},[]),Kn=Xt(e);Kn.current=e;let _n=Xt(k);_n.current=k;let ho=Xt([]),Nr=Xt(n);Nr.current=n;let[wt,Vt]=vt(null),Ct=e.selectedAnnotationIds;ho.current=Ct;let qn=an((m,y=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:m,addToSelection:y}})},[t]),zn=an(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[Nn,Eo]=vt(null),[on,pr]=vt({x:window.scrollX,y:window.scrollY});En(()=>(ee(),window.addEventListener("resize",ee),()=>window.removeEventListener("resize",ee)),[ee]),En(()=>{let m=()=>{pr({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",m,{passive:!0}),()=>window.removeEventListener("scroll",m)},[]),En(()=>{k?localStorage.setItem(Fs,JSON.stringify(k)):localStorage.removeItem(Fs)},[k]),tl(k,Ce,Q,e.annotations,t);let $o=Xt(ge);$o.current=ge,En(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let m=y=>{if(!y.altKey||!$o.current)return;y.preventDefault();let q=y.deltaY>0?-1:1;ln.current=Math.max(0,ln.current+q);let I=K.current;if(I){let R=di(I,ln.current);qe(R)}};return window.addEventListener("wheel",m,{passive:!1}),()=>window.removeEventListener("wheel",m)},[e.activeTool,e.isAnnotating]),En(()=>{e.activeTool!=="model"&&(qe(null),gt(new Map),ln.current=0,K.current=null)},[e.activeTool]),En(()=>{var q;let m=(q=ge==null?void 0:ge.name)!=null?q:null,y=m&&(v!=null&&v.has(m))?m:null;b==null||b(y)},[ge,v,b]);let[C,J]=vt(null);En(()=>{var q;if(!A){J(null);return}let m=Sr(A.name),y=A.instanceIndex;J((q=m[y%m.length])!=null?q:null)},[A]);let[ne,ye]=vt([]);En(()=>{var m,y;if(!T){ye([]);return}(y=(m=T.token)==null?void 0:m.bindings)!=null&&y.length?ye(ls(T.token)):ye(ss(T.px))},[T]);let me=Xt(null),Le=Xt(null);me.current=cn,Le.current=mt,En(()=>{let m=["flex-start","center","flex-end"],y=["flex-start","center","flex-end"],I=null,R=!1,j=null,pe=null,F=(he,_e)=>{let st=Zo(he,_e);for(;st&&st!==document.documentElement;){let kt=window.getComputedStyle(st).display;if(kt==="flex"||kt==="inline-flex")return st;st=st.parentElement}return null},te=he=>{let _e=window.getComputedStyle(he).flexDirection;return _e==="column"||_e==="column-reverse"?"vertical":"horizontal"},S=he=>{let _e=he.getAttribute("data-pm");return _e||(_e=Math.random().toString(36).substring(2,8),he.setAttribute("data-pm",_e)),{selector:`[data-pm="${_e}"]`,durableSelector:jn(he)}},E=()=>{R=!0,I&&clearTimeout(I),I=setTimeout(()=>{R=!1,I=null},300)},U=(he,_e,ct)=>{let st=te(he);if(_e===st){let Ze=window.getComputedStyle(he).justifyContent,Nt=Ze==="normal"||Ze==="flex-start"||Ze==="start"?"flex-start":Ze==="flex-end"||Ze==="end"?"flex-end":Ze==="center"?"center":null;if(!Nt)return;let gn=m.indexOf(Nt)+ct;if(gn<0||gn>=m.length)return;let ko=m[gn],{selector:Go,durableSelector:Gi}=S(he);Ke(he,"justify-content",ko),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Go,durableSelector:Gi,element:Bn(he),changes:[{property:"justify-content",original:Ze,modified:ko}]}})}else{let Ze=window.getComputedStyle(he).flexDirection,Nt=st==="horizontal"?"column":"row",{selector:ao,durableSelector:gn}=S(he);Ke(he,"flex-direction",Nt),t({type:"MODIFY_STYLES_BATCH",payload:{selector:ao,durableSelector:gn,element:Bn(he),changes:[{property:"flex-direction",original:Ze,modified:Nt}]}})}io(kt=>kt+1)},B=(he,_e,ct)=>{let kt=te(he)==="horizontal"?"vertical":"horizontal";if(_e!==kt)return;let Nt=window.getComputedStyle(he).alignItems,ao=Nt==="normal"||Nt==="stretch"||Nt==="flex-start"||Nt==="start"?"flex-start":Nt==="flex-end"||Nt==="end"?"flex-end":Nt==="center"?"center":null;if(!ao)return;let ko=y.indexOf(ao)+ct;if(ko<0||ko>=y.length)return;let Go=y[ko],{selector:Gi,durableSelector:Wc}=S(he);Ke(he,"align-items",Go),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Gi,durableSelector:Wc,element:Bn(he),changes:[{property:"align-items",original:Nt,modified:Go}]}}),io(Gc=>Gc+1)},D=20,Y=null,V=null,be=0,He=(he,_e,ct)=>{let st=F(_e,ct);wn(st?{modifier:he,target:st}:null)},et=he=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(he.key==="Shift"&&!he.altKey){let _e=ut.current;He("shift",_e.x,_e.y)}else if(he.key==="Alt"&&!he.shiftKey){let _e=ut.current;He("alt",_e.x,_e.y)}}},ot=he=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let _e=he.shiftKey&&!he.altKey,ct=he.altKey&&!he.shiftKey;if(!_e&&!ct||he.buttons!==0){Y=null,V=null,be=0,j=null,pe=null,wn(null);return}if(j===null&&(j=he.clientX,pe=he.clientY,He(_e?"shift":"alt",he.clientX,he.clientY)),R)return;Y===null&&(Y=he.clientX,V=he.clientY,be=0);let st=he.clientX-Y,kt=he.clientY-V,Ze=Math.abs(st)>=Math.abs(kt)?st:kt;if(Math.abs(Ze)>3){let Go=Ze>0?1:-1;if(be!==0&&Go!==be){Y=he.clientX,V=he.clientY,be=0;return}be=Go}if(Math.abs(st)<D&&Math.abs(kt)<D)return;let Nt=F(j,pe);if(!Nt)return;let ao=Math.abs(st)>=Math.abs(kt)?"horizontal":"vertical",ko=(ao==="horizontal"?st:kt)>0?1:-1;Y=null,V=null,be=0,_e?U(Nt,ao,ko):B(Nt,ao,ko),E()},zt=he=>{(he.key==="Shift"||he.key==="Alt")&&(j=null,pe=null,Y=null,V=null,be=0,wn(null))},it=()=>{wn(null),Y=null,V=null,be=0};return window.addEventListener("keydown",et),window.addEventListener("mousemove",ot),window.addEventListener("mousedown",it),window.addEventListener("keyup",zt),()=>{window.removeEventListener("keydown",et),window.removeEventListener("mousemove",ot),window.removeEventListener("mousedown",it),window.removeEventListener("keyup",zt),I&&clearTimeout(I)}},[e.activeTool,e.isAnnotating,t]),En(()=>{let m=y=>{var j,pe,F,te;if(y.key==="Escape"){if(_n.current)return;if(e.activeTool==="model"&&ft.size>0){y.preventDefault(),gt(new Map);return}if(ho.current.length>0){y.preventDefault(),zn();return}}if(y.key==="Enter"&&e.activeTool==="model"&&ft.size>0&&u){y.preventDefault();let S=[...ft.keys()].filter(E=>!(v!=null&&v.has(E)));S.length>0&&u(S),gt(new Map);return}if((y.metaKey||y.ctrlKey)&&y.key==="v"&&We.current.length>0&&!_n.current){y.preventDefault(),Re.current++;let S=Re.current*20,U=((j=We.current[0])==null?void 0:j.groupId)?Math.random().toString(36).substring(2,9):void 0,B=We.current.map(Y=>h(f({},Y),{id:Math.random().toString(36).substring(2,9),groupId:Y.groupId?U:void 0,timestamp:Date.now(),points:Y.points.map(V=>({x:V.x+S,y:V.y+S}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:B}});let D=B.find(Y=>Y.type!=="text")||B[0];D&&qn(D.id);return}let q=ho.current;if(q.length===0||_n.current)return;let I=(F=(pe=y.composedPath)==null?void 0:pe.call(y)[0])!=null?F:y.target,R=I==null?void 0:I.tagName;if(!(R==="INPUT"||R==="TEXTAREA"||I!=null&&I.isContentEditable)&&(y.key==="Delete"||y.key==="Backspace")){if(y.preventDefault(),p){let S=Kn.current.annotations;for(let E of q){let U=S.find(D=>D.id===E);if(!U)continue;let B=U.threadId||U.groupId&&((te=S.find(D=>D.groupId===U.groupId&&D.threadId))==null?void 0:te.threadId);B&&p(B)}}for(let S of q)t({type:"DELETE_ANNOTATION",payload:{id:S}});zn()}};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[t,zn,qn,e.activeTool,ft,v,u,p]);let Ee=yr(),Ie=Ri(()=>e.annotations.filter(m=>!m.pathname||m.pathname===Ee),[e.annotations,Ee]),Oe=Ri(()=>vi(e.annotations),[e.annotations]),Lt=Ri(()=>{let m=new Map,y=new Set,q=1,I=[...e.annotations].sort((R,j)=>R.timestamp-j.timestamp);for(let R of I)if(!Oe.has(R))if(R.groupId){if(!y.has(R.groupId)){y.add(R.groupId);let j=e.annotations.filter(pe=>pe.groupId===R.groupId);for(let pe of j)m.set(pe.id,q);q++}}else m.set(R.id,q),q++;return m},[e.annotations,Oe]),Ut=Ri(()=>{if(Ct.length===0)return null;let m=new Map;for(let y of Ct){let q=e.annotations.find(R=>R.id===y);if(!q)continue;let I=q.groupId?e.annotations.filter(R=>R.groupId===q.groupId):[q];for(let R of I)if(R.linkedSelector&&!(a!=null&&a.has(R.linkedSelector))){let j=R.color||e.activeColor;m.set(R.linkedSelector,j)}}return m.size>0?m:null},[Ct,e.annotations,e.activeColor,a]);En(()=>{let m=Ie.filter(y=>!(Oe.has(y)||k&&!k.isNew&&y.id===k.id));se(m,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,Ct,ql,on.x,on.y,Lt,$)},[Ie,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,se,k,Ct,on,Lt,Oe,$]),En(()=>{if(_){let m=Math.random().toString(36).substring(2,9);Ce({id:m,point:_.point,text:"",fontSize:12,isNew:!0,groupId:_.groupId}),le(null)}},[_]),En(()=>{M&&(Ce({id:Math.random().toString(36).substring(2,9),point:M.point,text:"",fontSize:12,isNew:!0,linkedSelector:M.linkedSelector,linkedAnchor:M.linkedAnchor,elements:M.elements}),ue(null))},[M]);let x=Xt(null),L=(Wn=k==null?void 0:k.id)!=null?Wn:null;En(()=>{L&&Me.current?requestAnimationFrame(()=>{var q;let m=Me.current;if(!m||(m.focus(),Ne.current===L))return;Ne.current=L;let y=_n.current;if(y){if(x.current!==null){let I=Math.min(x.current,m.value.length);m.setSelectionRange(I,I);return}if(!y.isNew&&y.clickPoint){let I=N.current;if(!I)return;let R=I.getContext("2d");if(!R)return;R.font=`${y.fontSize}px ${Zt}`;let j=y.fontSize*1.4,pe=y.text.split(`
|
|
4
|
+
`),F=y.clickPoint.y-y.point.y,te=Math.max(0,Math.min(pe.length-1,Math.floor(F/j))),S=y.clickPoint.x-y.point.x,E=pe[te]||"",U=0;for(let D=0;D<=E.length;D++){let Y=R.measureText(E.substring(0,D)).width;if(Y>S){let V=D>0?R.measureText(E.substring(0,D-1)).width:0;U=S-V<Y-S?D-1:D;break}U=D}let B=U;for(let D=0;D<te;D++)B+=(((q=pe[D])==null?void 0:q.length)||0)+1;m.setSelectionRange(B,B)}}}):(Ne.current=null,x.current=null)},[L,N]);let z=an(m=>{let y=N.current;if(!y)return{x:0,y:0};let q=y.getBoundingClientRect(),I,R;if("touches"in m&&m.touches[0])I=m.touches[0].clientX,R=m.touches[0].clientY;else if("clientX"in m)I=m.clientX,R=m.clientY;else return{x:0,y:0};return{x:I-q.left+window.scrollX,y:R-q.top+window.scrollY}},[N]),re=an((m,y,q,I)=>{let R=q.x-y.x,j=q.y-y.y,pe=R*R+j*j;if(pe===0)return Math.sqrt((m.x-y.x)**2+(m.y-y.y)**2)<=I;let F=Math.max(0,Math.min(1,((m.x-y.x)*R+(m.y-y.y)*j)/pe)),te=y.x+F*R,S=y.y+F*j;return Math.sqrt((m.x-te)**2+(m.y-S)**2)<=I},[]),Te=an(m=>{for(let q=Ie.length-1;q>=0;q--){let I=Ie[q];if(!I||Oe.has(I))continue;let R=(I.strokeWidth||3)+4;switch(I.type){case"text":{if(!I.points[0]||!I.text)continue;let j=I.points[0],pe=I.fontSize||12,F=N.current;if(F){let te=F.getContext("2d");if(te){te.font=`${pe}px ${Zt}`;let S=I.text.replace(/\n/g," "),E=j.x-on.x,U=br(E),B=xr(te,S,U),D=te.measureText(B).width,Y=pe*1.4;if(m.x>=j.x-4-4&&m.x<=j.x+D+4+4&&m.y>=j.y-4-4&&m.y<=j.y+Y+4+4)return I}}break}case"rectangle":{if(I.points.length<2)continue;let j=I.points[0],pe=I.points[I.points.length-1],F=Math.min(j.x,pe.x),te=Math.max(j.x,pe.x),S=Math.min(j.y,pe.y),E=Math.max(j.y,pe.y),U=re(m,{x:F,y:S},{x:te,y:S},R),B=re(m,{x:F,y:E},{x:te,y:E},R),D=re(m,{x:F,y:S},{x:F,y:E},R),Y=re(m,{x:te,y:S},{x:te,y:E},R);if(U||B||D||Y)return I;break}case"circle":{if(I.points.length<2)continue;let j=I.points[0],pe=I.points[I.points.length-1],F=(j.x+pe.x)/2,te=(j.y+pe.y)/2,S=Math.abs(pe.x-j.x)/2,E=Math.abs(pe.y-j.y)/2,U=m.x-F,B=m.y-te,D=Math.sqrt((U/S)**2+(B/E)**2);if(Math.abs(D-1)*Math.max(S,E)<=R)return I;break}case"line":{if(I.points.length<2)continue;let j=I.points[0],pe=I.points[I.points.length-1];if(re(m,j,pe,R))return I;break}case"freehand":{if(I.points.length<2)continue;for(let j=0;j<I.points.length-1;j++){let pe=I.points[j],F=I.points[j+1];if(re(m,pe,F,R))return I}break}}}return null},[Ie,N,re,Oe,on.x]),ze=an(m=>{let y=Te(m);return(y==null?void 0:y.type)==="text"?y:null},[Te]),Ue=an(m=>{if(Ct.length===0)return null;let y=ql/2+4;for(let q of Ct){let I=e.annotations.find(R=>R.id===q);if(!(!I||I.points.length<2)){if(I.type==="line"){let R=I.points[0],j=I.points[I.points.length-1];if(Math.sqrt((m.x-R.x)**2+(m.y-R.y)**2)<=y)return{handle:"start",annotationId:q};if(Math.sqrt((m.x-j.x)**2+(m.y-j.y)**2)<=y)return{handle:"end",annotationId:q};continue}if(I.type==="circle"){let R=I.points[0],j=I.points[I.points.length-1],pe=Math.min(R.x,j.x),F=Math.max(R.x,j.x),te=Math.min(R.y,j.y),S=Math.max(R.y,j.y),E=(pe+F)/2,U=(te+S)/2,B=[{handle:"top",x:E,y:te},{handle:"bottom",x:E,y:S},{handle:"left",x:pe,y:U},{handle:"right",x:F,y:U}];for(let{handle:D,x:Y,y:V}of B)if(Math.sqrt((m.x-Y)**2+(m.y-V)**2)<=y)return{handle:D,annotationId:q};continue}if(I.type==="rectangle"||I.type==="freehand"){let R=I.points[0],j=I.points[I.points.length-1],pe,F,te,S;I.type==="freehand"?(pe=Math.min(...I.points.map(U=>U.x)),F=Math.max(...I.points.map(U=>U.x)),te=Math.min(...I.points.map(U=>U.y)),S=Math.max(...I.points.map(U=>U.y))):(pe=Math.min(R.x,j.x),F=Math.max(R.x,j.x),te=Math.min(R.y,j.y),S=Math.max(R.y,j.y));let E=[{corner:"topLeft",x:pe,y:te},{corner:"topRight",x:F,y:te},{corner:"bottomLeft",x:pe,y:S},{corner:"bottomRight",x:F,y:S}];for(let{corner:U,x:B,y:D}of E)if(Math.sqrt((m.x-B)**2+(m.y-D)**2)<=y)return{handle:U,annotationId:q}}}}return null},[Ct,e.annotations]);En(()=>{let m=y=>{if(ve.current={x:y.clientX+window.scrollX,y:y.clientY+window.scrollY},!k){let q=ze(ve.current);fe((q==null?void 0:q.id)||null)}};return window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m)},[k,ze]);let Ge=an(()=>{var y;if(!k)return;let m=((y=k.images)==null?void 0:y.length)||0;if(k.text.trim()||m>0)if(k.isNew){let q=si();t({type:"ADD_TEXT",payload:f({point:k.point,text:k.text||(m>0?`[${m} image${m>1?"s":""}]`:""),fontSize:k.fontSize,id:q,groupId:k.groupId,linkedSelector:k.linkedSelector,linkedAnchor:k.linkedAnchor,elements:k.elements},m>0?{imageCount:m}:{})}),m>0&&k.images&&l&&l(q,k.images)}else t({type:"UPDATE_TEXT",payload:f({id:k.id,text:k.text||(m>0?`[${m} image${m>1?"s":""}]`:"")},m>0?{imageCount:m}:{})}),m>0&&k.images&&l&&l(k.id,k.images);else k.isNew||t({type:"DELETE_ANNOTATION",payload:{id:k.id}});Ce(null)},[k,t,l]),Xe=an(m=>{for(let y=0;y<Hs.length-1;y++){let q=Hs[y],I=Hs[y+1];if(m<=(q+I)/2)return q;if(m<I)return I}return Math.round(m/8)*8},[]),Et=an((m,y,q,I)=>{let R=q.top+Math.max(I.top,4),j=q.bottom-Math.max(I.bottom,4),pe=q.left+Math.max(I.left,4),F=q.right-Math.max(I.right,4);if(m<q.left||m>q.right||y<q.top||y>q.bottom)return null;let te=y<R,S=y>j,E=m<pe,U=m>F;return te&&E?I.top>=I.left?"top":"left":te&&U?I.top>=I.right?"top":"right":S&&E?I.bottom>=I.left?"bottom":"left":S&&U?I.bottom>=I.right?"bottom":"right":te?"top":S?"bottom":E?"left":U?"right":null},[]),yt=an(m=>{var j,pe;if(!e.isAnnotating)return;if(e.inspectedElement&&e.activeTool==="hand"&&!("button"in m&&m.button===2)){m.preventDefault(),m.stopPropagation(),t({type:"SELECT_ELEMENT",payload:null});return}let y=z(m),q="shiftKey"in m&&m.shiftKey;if(e.activeTool==="inspector"){if("button"in m&&m.button===2)return;if(ce&&!Gt(ce)){let F=e.annotations.find(et=>{if(!et.linkedSelector||!et.threadId)return!1;try{return ce.matches(et.linkedSelector)}catch(ot){return!1}});if(F!=null&&F.threadId&&c){c(F.threadId),requestAnimationFrame(()=>{var zt;let et=document.querySelector("[data-popmelt-shadow-host]"),ot=(zt=et==null?void 0:et.shadowRoot)==null?void 0:zt.querySelector("[data-popmelt-reply]");ot==null||ot.focus()});return}let te=Bn(ce),S=jn(ce),E=ce.getBoundingClientRect(),U=ce.getAttribute("data-pm");U||(U=Math.random().toString(36).substring(2,8),ce.setAttribute("data-pm",U));let B=`[data-pm="${U}"]`,D=e.styleModifications.some(et=>{try{return ce.matches(et.selector)}catch(ot){return!1}}),Y=e.annotations.filter(et=>{if(!et.linkedSelector)return!1;try{return ce.matches(et.linkedSelector)}catch(ot){return!1}}).length,V=(D?1:0)+Y,be=E.top>=eo*(1+V)?"top-left":"bottom-left",He=Zl(E,be,V,w==null?void 0:w.current);ue({point:He,linkedSelector:B,linkedAnchor:be,elements:[h(f({},te),{selector:S})]})}return}if(e.activeTool==="model"){if("button"in m&&m.button===2)return;if(ge){let F=ge.name;if(v!=null&&v.has(F)){g==null||g(F);return}"shiftKey"in m&&m.shiftKey?gt(S=>{let E=new Map(S);return E.has(F)?E.delete(F):E.set(F,ge),E}):ft.size===1&&ft.has(F)?(u&&u([F]),gt(new Map)):gt(new Map([[F,ge]]))}return}if(e.activeTool==="hand"&&cn&&mt){let F=cn,te=F.getAttribute("data-pm");te||(te=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",te));let S=jn(F),E=`[data-pm="${te}"]`,U=Bn(F),B=Qo(F),D=y.x-window.scrollX,Y=y.y-window.scrollY,V=Kt,be=window.getComputedStyle(F).justifyContent,He=0;if(V){let ot=To(F).find(zt=>zt.axis===mt);He=ot?mt==="column"?ot.w:ot.h:0}Ke(F,"transition","none"),Mn.current={isDragging:!0,hasMoved:!1,axis:mt,startX:D,startY:Y,originalRow:V?He:B.row,originalColumn:V?He:B.column,element:F,elementInfo:h(f({},U),{selector:E}),selector:E,durableSelector:S,isAuto:V,originalJustifyContent:be,visualGap:He},dn({axis:mt,row:V?He:B.row,column:V?He:B.column});return}if(e.activeTool==="hand"&&_t&&Ln){let F=_t,te=F.getAttribute("data-pm");te||(te=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",te));let S=`[data-pm="${te}"]`,E=Bn(F),{fontSize:U,lineHeight:B}=Gr(F),D=U>0?B/U:1.2,Y=y.x-window.scrollX,V=y.y-window.scrollY;Ke(F,"transition","none");let be=jn(F);un.current={isDragging:!0,property:Ln,startX:Y,startY:V,originalFontSize:U,originalLineHeight:B,originalRatio:D,element:F,elementInfo:h(f({},E),{selector:S}),selector:S,durableSelector:be},so({property:Ln,fontSize:U,lineHeight:B});return}if(e.activeTool==="hand"&&H&&Be){let F=H,te=F.getAttribute("data-pm");te||(te=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",te));let S=`[data-pm="${te}"]`,E=jn(F),U=Bn(F),B=er(F),D=F.getBoundingClientRect(),Y=Math.floor(D.height/2),V=y.y-window.scrollY;Ke(F,"transition","none"),bn.current={isDragging:!0,corner:Be,startY:V,original:B,maxRadius:Y,element:F,elementInfo:h(f({},U),{selector:S}),selector:S,durableSelector:E},Rn({corner:Be,radius:f({},B)});return}if(e.activeTool==="hand"&&ke&&je){let F=ke,te=F.getAttribute("data-pm");te||(te=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",te));let S=`[data-pm="${te}"]`,E=jn(F),U=Bn(F),B=Cr(F),D=y.x-window.scrollX,Y=y.y-window.scrollY;Ke(F,"transition","none"),we.current={isDragging:!0,side:je,startX:D,startY:Y,original:B,element:F,elementInfo:h(f({},U),{selector:S}),selector:S,durableSelector:E},lt({side:je,padding:f({},B)});return}let I=Ue(y);if(I){let F=e.annotations.find(te=>te.id===I.annotationId);if(F&&F.type!=="text"&&((j=F.status)!=null?j:"pending")==="pending"){Eo({annotationId:I.annotationId,handle:I.handle,startPoint:y,originalPoints:[...F.points],hasMoved:!1});return}}let R=Te(y);if(R&&R.points[0]){if(k&&Ge(),R.type!=="text"?(qn(R.id,q),R.color&&t({type:"SET_COLOR",payload:R.color})):q||zn(),c){let F=R.threadId||(R.groupId?(pe=e.annotations.find(te=>te.groupId===R.groupId&&te.threadId))==null?void 0:pe.threadId:void 0);F&&c(F)}Vt({annotation:R,startPoint:y,hasMoved:!1});return}if(q||zn(),e.activeTool==="text"){k&&Ge();let F=Math.random().toString(36).substring(2,9);Ce({id:F,point:y,text:"",fontSize:12,isNew:!0});return}Z(!0),t({type:"START_PATH",payload:y})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,k,Ct,ce,ke,je,H,Be,cn,mt,Kt,_t,Ln,ge,ft,v,u,g,c,z,Te,Ue,t,qn,zn,Ge]),$t=an(m=>{var q,I;let y=z(m);if(e.activeTool==="inspector"&&e.isAnnotating){let R=y.x-window.scrollX,j=y.y-window.scrollY,pe=Zo(R,j),F=pe&&Gt(pe)?null:pe;F!==ce&&(Ae(F),rt(F?Bn(F):null));return}if(e.activeTool==="model"&&e.isAnnotating){let R=y.x-window.scrollX,j=y.y-window.scrollY,pe=Zo(R,j);if(pe!==K.current&&(K.current=pe,ln.current=0),pe){let F=di(pe,ln.current);qe(F)}else qe(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let R=y.x-window.scrollX,j=y.y-window.scrollY;ut.current={x:R,y:j},yn({x:R,y:j});let pe=Jt.current.cmd,F=Jt.current.shift;if(Mn.current.isDragging){let S=Mn.current,E=S.element;if(!E)return;if(!S.hasMoved){let Y=Math.abs(R-S.startX),V=Math.abs(j-S.startY);if(Y<=2&&V<=2)return;S.hasMoved=!0,S.isAuto&&(Ke(E,"justify-content","normal"),Ke(E,"row-gap",`${S.visualGap}px`),Ke(E,"column-gap",`${S.visualGap}px`),In(!1))}let U=S.axis,B=S.originalRow,D=S.originalColumn;if(U==="column"){let Y=R-S.startX;D=S.originalColumn+Y,pe||(B=S.originalRow+Y)}else{let Y=j-S.startY;B=S.originalRow+Y,pe||(D=S.originalColumn+Y)}B=Math.max(0,B),D=Math.max(0,D),F&&(B=Xe(B),D=Xe(D)),B=Math.round(B),D=Math.round(D),Ke(E,"row-gap",`${B}px`),Ke(E,"column-gap",`${D}px`),dn({axis:U,row:B,column:D});return}if(bn.current.isDragging){let S=bn.current,E=S.element;if(!E)return;let U=j-S.startY,B=S.corner,D=S.original,Y=f({},D);if(pe){let V=D[B]+U;V=Math.max(0,Math.min(S.maxRadius,V)),F&&(V=Xe(V)),V=Math.round(V),Y[B]=V}else{let V=D[B]+U;V=Math.max(0,Math.min(S.maxRadius,V)),F&&(V=Xe(V)),V=Math.round(V),Y={"top-left":V,"top-right":V,"bottom-right":V,"bottom-left":V}}Ke(E,"border-top-left-radius",`${Y["top-left"]}px`),Ke(E,"border-top-right-radius",`${Y["top-right"]}px`),Ke(E,"border-bottom-right-radius",`${Y["bottom-right"]}px`),Ke(E,"border-bottom-left-radius",`${Y["bottom-left"]}px`),Rn({corner:B,radius:Y});return}if(un.current.isDragging){let S=un.current,E=S.element;if(!E)return;let U=S.property,B=S.originalFontSize,D=S.originalLineHeight,Y=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(U==="font-size"){let be=R-S.startX;B=S.originalFontSize+be,B=Math.max(1,B)}else{let be=j-S.startY;D=S.originalLineHeight+be,D=Math.max(B,D)}if(F)if(U==="font-size"){let be=Y[0],He=Math.abs(B-be);for(let et of Y){let ot=Math.abs(B-et);ot<He&&(be=et,He=ot)}B=be}else{let be=B>0?D/B:1.2,He=Math.round(be*2)/2;D=B*Math.max(1,He)}B=Math.round(B),D=Math.round(D*10)/10,Ke(E,"font-size",`${B}px`);let V=B>0?Math.round(D/B*1e3)/1e3:1.2;Ke(E,"line-height",`${V}`),so({property:U,fontSize:B,lineHeight:D});return}if(we.current.isDragging){let S=we.current,E=S.element;if(!E)return;let U=S.side,B=S.original,D=B.top,Y=B.right,V=B.bottom,be=B.left;if(U==="top"){let He=S.startY-j;D=B.top+He,pe||(V=B.bottom+He)}else if(U==="bottom"){let He=j-S.startY;V=B.bottom+He,pe||(D=B.top+He)}else if(U==="left"){let He=S.startX-R;be=B.left+He,pe||(Y=B.right+He)}else if(U==="right"){let He=R-S.startX;Y=B.right+He,pe||(be=B.left+He)}D=Math.max(0,D),Y=Math.max(0,Y),V=Math.max(0,V),be=Math.max(0,be),F&&(D=Xe(D),Y=Xe(Y),V=Xe(V),be=Xe(be)),D=Math.round(D),Y=Math.round(Y),V=Math.round(V),be=Math.round(be),Ke(E,"padding",`${D}px ${Y}px ${V}px ${be}px`),lt({side:U,padding:{top:D,right:Y,bottom:V,left:be}});return}let te=Zo(R,j);for(;te&&te.tagName==="A";)te=te.parentElement;{let E=[];te&&E.push(te),H&&H!==te&&E.push(H);let U=null,B=16,D=null;for(let Y of E){let V=Y.getBoundingClientRect(),be=er(Y),He=[["top-left",V.left,V.top+be["top-left"]],["top-right",V.right,V.top+be["top-right"]],["bottom-right",V.right,V.bottom-be["bottom-right"]],["bottom-left",V.left,V.bottom-be["bottom-left"]]];for(let[et,ot,zt]of He){let it=Math.hypot(R-ot,j-zt);it<B&&(B=it,U=et,D=Y)}}if(U&&D){Pe(D),qt(U),ke&&Tt(null),je&&tt(null),cn&&Xn(null),mt&&Ve(null),In(!1),_t&&Co(null),Ln&&kn(null);return}}H&&Pe(null),Be&&qt(null);{let S=[];te&&gi(te)&&S.push(te);let E=(q=te==null?void 0:te.parentElement)!=null?q:null;for(;E&&E!==document.body&&S.length<3;)gi(E)&&S.push(E),E=E.parentElement;for(let U of S){let D=To(U).find(Y=>R>=Y.x&&R<=Y.x+Y.w&&j>=Y.y&&j<=Y.y+Y.h);if(D){Xn(U),Ve(D.axis),In(ds(U,D.axis)),ke&&Tt(null),je&&tt(null),_t&&Co(null),Ln&&kn(null);return}}}cn&&Xn(null),mt&&Ve(null),In(!1);{let E=[];te&&E.push(te),_t&&_t!==te&&E.push(_t);let U=null,B=1/0,D=null;for(let Y of E){if(!us(Y))continue;let V=Er(Y);if(!V)continue;let be=R>=V.left&&R<=V.right&&j>=V.top&&j<=V.bottom,He=[["font-size",V.right,V.top+V.height/2],["line-height",V.left+V.width/2,V.bottom]];for(let[et,ot,zt]of He){let it=Math.hypot(R-ot,j-zt);(be||it<12)&&it<B&&(B=it,U=et,D=Y)}}U&&D?(Co(D),kn(U)):(_t&&Co(null),Ln&&kn(null))}if(te!==ke&&Tt(te),te){let S=Cr(te),E=te.getBoundingClientRect(),U=Et(R,j,E,S);tt(U)}else tt(null);return}if(Nn){let{handle:R,originalPoints:j,hasMoved:pe}=Nn,F=e.annotations.find(B=>B.id===Nn.annotationId);if(!F)return;let te="metaKey"in m,S=te&&(m.metaKey||m.ctrlKey),E=te&&m.shiftKey,U;if(F.type==="line"){let B=j[0],D=j[j.length-1];R==="start"?U=[y,D]:U=[B,y]}else if(F.type==="freehand"){let B=Math.min(...j.map(Ze=>Ze.x)),D=Math.max(...j.map(Ze=>Ze.x)),Y=Math.min(...j.map(Ze=>Ze.y)),V=Math.max(...j.map(Ze=>Ze.y)),be=(B+D)/2,He=(Y+V)/2,et=D-B||1,ot=V-Y||1,zt=et/ot,it=B,he=D,_e=Y,ct=V;switch(R){case"topLeft":it=y.x,_e=y.y;break;case"topRight":he=y.x,_e=y.y;break;case"bottomLeft":it=y.x,ct=y.y;break;case"bottomRight":he=y.x,ct=y.y;break}if(S)switch(R){case"topLeft":he=D+(B-it),ct=V+(Y-_e);break;case"topRight":it=B-(he-D),ct=V+(Y-_e);break;case"bottomLeft":he=D+(B-it),_e=Y-(ct-V);break;case"bottomRight":it=B-(he-D),_e=Y-(ct-V);break}if(E){let Ze=he-it,Nt=ct-_e;if(Math.abs(Ze/Nt)>zt){let gn=Math.abs(Nt)*zt*Math.sign(Ze);R==="topLeft"||R==="bottomLeft"?it=he-gn:he=it+gn}else{let gn=Math.abs(Ze)/zt*Math.sign(Nt);R==="topLeft"||R==="topRight"?_e=ct-gn:ct=_e+gn}}let st=he-it||1,kt=ct-_e||1;U=j.map(Ze=>({x:it+(Ze.x-B)/et*st,y:_e+(Ze.y-Y)/ot*kt}))}else if(F.type==="circle"){let B=j[0],D=j[j.length-1],Y=Math.min(B.x,D.x),V=Math.max(B.x,D.x),be=Math.min(B.y,D.y),He=Math.max(B.y,D.y),et=(Y+V)/2,ot=(be+He)/2,zt=V-Y,it=He-be,he=Y,_e=V,ct=be,st=He;switch(R){case"top":if(ct=y.y,S&&(st=ot+(ot-y.y)),E){let Ze=(st-ct)*(zt/it)/2;he=et-Ze,_e=et+Ze}break;case"bottom":if(st=y.y,S&&(ct=ot-(y.y-ot)),E){let Ze=(st-ct)*(zt/it)/2;he=et-Ze,_e=et+Ze}break;case"left":if(he=y.x,S&&(_e=et+(et-y.x)),E){let Ze=(_e-he)*(it/zt)/2;ct=ot-Ze,st=ot+Ze}break;case"right":if(_e=y.x,S&&(he=et-(y.x-et)),E){let Ze=(_e-he)*(it/zt)/2;ct=ot-Ze,st=ot+Ze}break}U=[{x:he,y:ct},{x:_e,y:st}]}else{let B=j[0],D=j[j.length-1],Y=Math.min(B.x,D.x),V=Math.max(B.x,D.x),be=Math.min(B.y,D.y),He=Math.max(B.y,D.y),et=(Y+V)/2,ot=(be+He)/2,zt=V-Y||1,it=He-be||1,he=zt/it,_e=Y,ct=V,st=be,kt=He;switch(R){case"topLeft":_e=y.x,st=y.y;break;case"topRight":ct=y.x,st=y.y;break;case"bottomLeft":_e=y.x,kt=y.y;break;case"bottomRight":ct=y.x,kt=y.y;break}if(S)switch(R){case"topLeft":ct=V+(Y-_e),kt=He+(be-st);break;case"topRight":_e=Y-(ct-V),kt=He+(be-st);break;case"bottomLeft":ct=V+(Y-_e),st=be-(kt-He);break;case"bottomRight":_e=Y-(ct-V),st=be-(kt-He);break}if(E){let Ze=ct-_e,Nt=kt-st;if(Math.abs(Ze/Nt)>he){let gn=Math.abs(Nt)*he*Math.sign(Ze);R==="topLeft"||R==="bottomLeft"?_e=ct-gn:ct=_e+gn}else{let gn=Math.abs(Ze)/he*Math.sign(Nt);R==="topLeft"||R==="topRight"?st=kt-gn:kt=st+gn}}U=[{x:_e,y:st},{x:ct,y:kt}]}t({type:"RESIZE_ANNOTATION",payload:{id:Nn.annotationId,points:U,saveUndo:!pe}}),pe||Eo(h(f({},Nn),{hasMoved:!0}));return}if(wt&&((I=wt.annotation.status)!=null?I:"pending")==="pending"){let R=y.x-wt.startPoint.x,j=y.y-wt.startPoint.y;if((Math.abs(R)>2||Math.abs(j)>2)&&!wt.hasMoved)Vt(h(f({},wt),{hasMoved:!0,startPoint:y})),t({type:"MOVE_ANNOTATION",payload:{id:wt.annotation.id,delta:{x:R,y:j},saveUndo:!0}});else if(wt.hasMoved){let F=y.x-wt.startPoint.x,te=y.y-wt.startPoint.y;Vt(h(f({},wt),{startPoint:y})),t({type:"MOVE_ANNOTATION",payload:{id:wt.annotation.id,delta:{x:F,y:te}}})}return}!W||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:y})},[W,e.isAnnotating,e.activeTool,wt,Nn,ce,ke,je,H,Be,cn,mt,_t,Ln,z,t,Xe,Et]),xt=an(m=>{var I,R,j,pe,F,te;if(un.current.isDragging){let S=un.current,E=S.element;if(E&&S.selector&&S.elementInfo&&Mt){E instanceof HTMLElement&&(E.style.removeProperty("font-size"),E.style.removeProperty("line-height"),E.style.removeProperty("transition"));let U=[];if(S.originalFontSize!==Mt.fontSize&&(Ke(E,"font-size",`${Mt.fontSize}px`),U.push({property:"font-size",original:`${S.originalFontSize}px`,modified:`${Mt.fontSize}px`})),S.originalLineHeight!==Mt.lineHeight){let B=S.originalFontSize>0?Math.round(S.originalLineHeight/S.originalFontSize*1e3)/1e3:1.2,D=Mt.fontSize>0?Math.round(Mt.lineHeight/Mt.fontSize*1e3)/1e3:1.2;Ke(E,"line-height",`${D}`),U.push({property:"line-height",original:`${B}`,modified:`${D}`})}U.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:S.selector,durableSelector:(I=S.durableSelector)!=null?I:void 0,element:S.elementInfo,changes:U}})}un.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},so(null);return}if(Mn.current.isDragging){let S=Mn.current,E=S.element,U="button"in m&&m.button===2;if(!S.hasMoved&&!U&&E&&S.selector&&S.elementInfo){E instanceof HTMLElement&&E.style.removeProperty("transition");let B=["space-between","space-around","stretch","normal"],D=S.originalJustifyContent||"normal",Y=B.indexOf(D),V=B[(Y+1)%B.length],be=[];V==="normal"?(Ke(E,"justify-content","normal"),be.push({property:"justify-content",original:S.originalJustifyContent,modified:"normal"})):V==="stretch"?(Ke(E,"justify-content",V),Ke(E,"row-gap","8px"),Ke(E,"column-gap","8px"),be.push({property:"justify-content",original:S.originalJustifyContent||"normal",modified:V}),S.originalRow!==8&&be.push({property:"row-gap",original:`${S.originalRow}px`,modified:"8px"}),S.originalColumn!==8&&be.push({property:"column-gap",original:`${S.originalColumn}px`,modified:"8px"})):(E instanceof HTMLElement&&(E.style.removeProperty("row-gap"),E.style.removeProperty("column-gap")),Ke(E,"justify-content",V),be.push({property:"justify-content",original:S.originalJustifyContent||"normal",modified:V}),S.originalRow>0&&be.push({property:"row-gap",original:`${S.originalRow}px`,modified:"0px"}),S.originalColumn>0&&be.push({property:"column-gap",original:`${S.originalColumn}px`,modified:"0px"})),be.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:S.selector,durableSelector:(R=S.durableSelector)!=null?R:void 0,element:S.elementInfo,changes:be}})}else if(S.hasMoved&&E&&S.selector&&S.elementInfo&&nt){E instanceof HTMLElement&&(E.style.removeProperty("row-gap"),E.style.removeProperty("column-gap"),E.style.removeProperty("transition"));let B=[];S.isAuto?(E instanceof HTMLElement&&E.style.removeProperty("justify-content"),Ke(E,"justify-content","normal"),Ke(E,"row-gap",`${nt.row}px`),Ke(E,"column-gap",`${nt.column}px`),B.push({property:"justify-content",original:S.originalJustifyContent,modified:"normal"}),B.push({property:"row-gap",original:"0px",modified:`${nt.row}px`}),B.push({property:"column-gap",original:"0px",modified:`${nt.column}px`})):(S.originalRow!==nt.row&&(Ke(E,"row-gap",`${nt.row}px`),B.push({property:"row-gap",original:`${S.originalRow}px`,modified:`${nt.row}px`})),S.originalColumn!==nt.column&&(Ke(E,"column-gap",`${nt.column}px`),B.push({property:"column-gap",original:`${S.originalColumn}px`,modified:`${nt.column}px`}))),B.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:S.selector,durableSelector:(j=S.durableSelector)!=null?j:void 0,element:S.elementInfo,changes:B}})}Mn.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},dn(null);return}if(bn.current.isDragging){let S=bn.current,E=S.element;if(E&&S.selector&&S.elementInfo&&Ot){E instanceof HTMLElement&&(E.style.removeProperty("border-top-left-radius"),E.style.removeProperty("border-top-right-radius"),E.style.removeProperty("border-bottom-right-radius"),E.style.removeProperty("border-bottom-left-radius"),E.style.removeProperty("transition"));let U=["top-left","top-right","bottom-right","bottom-left"],B={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},D=[];for(let Y of U)S.original[Y]!==Ot.radius[Y]&&(Ke(E,B[Y],`${Ot.radius[Y]}px`),D.push({property:B[Y],original:`${S.original[Y]}px`,modified:`${Ot.radius[Y]}px`}));D.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:S.selector,durableSelector:(pe=S.durableSelector)!=null?pe:void 0,element:S.elementInfo,changes:D}})}bn.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},Rn(null);return}if(we.current.isDragging){let S=we.current,E=S.element,U=S.selector,B=S.elementInfo;if(E&&U&&B&&St){let D=S.original,Y=St.padding;E instanceof HTMLElement&&(E.style.removeProperty("padding"),E.style.removeProperty("transition"));let V=[],be=[{prop:"padding-top",origVal:D.top,newVal:Y.top},{prop:"padding-right",origVal:D.right,newVal:Y.right},{prop:"padding-bottom",origVal:D.bottom,newVal:Y.bottom},{prop:"padding-left",origVal:D.left,newVal:Y.left}];for(let{prop:He,origVal:et,newVal:ot}of be)et!==ot&&(Ke(E,He,`${ot}px`),V.push({property:He,original:`${et}px`,modified:`${ot}px`}));V.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:U,durableSelector:(F=S.durableSelector)!=null?F:void 0,element:B,changes:V}})}we.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},lt(null);return}if(Nn){Eo(null);return}if(wt){if(!wt.hasMoved&&wt.annotation.type==="text"&&((te=wt.annotation.status)!=null?te:"pending")==="pending"){let S=z(m);Ce({id:wt.annotation.id,point:wt.annotation.points[0],text:wt.annotation.text||"",fontSize:wt.annotation.fontSize||12,isNew:!1,clickPoint:S,groupId:wt.annotation.groupId})}Vt(null);return}if(!W)return;let y=5;if(e.currentPath.length>=2){let S=e.currentPath[0],E=e.currentPath[e.currentPath.length-1],U=Math.abs(E.x-S.x),B=Math.abs(E.y-S.y);if((e.activeTool==="line"?Math.sqrt(U*U+B*B)<y:U<y&&B<y)&&["rectangle","circle","line"].includes(e.activeTool)){Z(!1),t({type:"CANCEL_PATH"});return}}let q=is(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let S=e.currentPath[0],E=e.currentPath[e.currentPath.length-1],U=Math.min(S.x,E.x),B=Math.max(S.y,E.y),D=e.strokeWidth/2,Y=Math.random().toString(36).substring(2,9);le({point:{x:U-D+4,y:B+D+4},groupId:Y}),Z(!1),t({type:"FINISH_PATH",payload:{groupId:Y,elements:q}});return}Z(!1),t({type:"FINISH_PATH",payload:{elements:q}})},[W,wt,Nn,St,Ot,nt,Mt,z,t,e.activeTool,e.currentPath,e.strokeWidth]),pn=an(m=>{let y=m.target.value;x.current=m.target.selectionStart,Ce(q=>q&&h(f({},q),{text:y}))},[]),yo=an(m=>{m.key==="Escape"?Ce(null):m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),Ge())},[Ge]),Hn=an(m=>{if(!k)return;let y=m.clipboardData.items,q=[];for(let I=0;I<y.length;I++){let R=y[I];if(R.type.startsWith("image/")){let j=R.getAsFile();j&&q.push(j)}}q.length>0&&(m.preventDefault(),Ce(I=>I?h(f({},I),{images:[...I.images||[],...q]}):null))},[k]),Cn=an(m=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){m.preventDefault();let q=ke||cn||H||_t;if(q&&!Gt(q)){let I=Bn(q),R=jn(q);t({type:"SELECT_ELEMENT",payload:{el:q,info:h(f({},I),{selector:R})}})}return}m.preventDefault();let y=N.current;y&&(oe.current=!0,y.style.pointerEvents="none",setTimeout(()=>{oe.current&&(oe.current=!1,y.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,ke,cn,H,_t,t,Gt,N]);En(()=>{let m=Ie.filter(pe=>pe.linkedSelector);if(m.length===0)return;let y=null,q=document.createElement("canvas").getContext("2d"),I=()=>{var F,te,S;let pe=[];for(let E of m){let U=document.querySelector(E.linkedSelector);if(!U&&((te=(F=E.elements)==null?void 0:F[0])!=null&&te.selector)&&E.linkedSelector.startsWith("[data-pm=")){try{U=document.querySelector(E.elements[0].selector)}catch(it){}if(U){let it=(S=E.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:S[1];it&&U.setAttribute("data-pm",it)}}if(!U)continue;let B=U.getBoundingClientRect(),D=e.styleModifications.some(it=>{try{return U.matches(it.selector)}catch(he){return!1}}),Y=m.filter(it=>it.id!==E.id&&it.timestamp<E.timestamp&&it.linkedSelector===E.linkedSelector).length,V=(D?1:0)+Y,be;if(E.text&&q){let it=E.fontSize||12;q.font=`${it}px ${Zt}`,be=Math.max(...E.text.split(`
|
|
5
|
+
`).map(he=>q.measureText(he).width))}let He=B.top>=eo*(1+V)?"top-left":"bottom-left",et=Zl(B,He,V,w==null?void 0:w.current,be),ot=E.points[0],zt=He!==E.linkedAnchor;ot&&(zt||Math.abs(et.x-ot.x)>1||Math.abs(et.y-ot.y)>1)&&pe.push({id:E.id,point:et,linkedAnchor:zt?He:void 0})}pe.length>0&&t({type:"UPDATE_LINKED_POSITIONS",payload:{updates:pe}})},R=()=>{y&&cancelAnimationFrame(y),y=requestAnimationFrame(I)};I(),window.addEventListener("scroll",R,!0),window.addEventListener("resize",R,!0),window.addEventListener("load",R),document.fonts.ready.then(R);let j=new MutationObserver(R);return j.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",R,!0),window.removeEventListener("resize",R,!0),window.removeEventListener("load",R),j.disconnect(),y&&cancelAnimationFrame(y)}},[Ie,t]);let At=()=>{var m,y,q;if(!e.isAnnotating)return"default";if(Nn){let{handle:I}=Nn;return I==="start"||I==="end"?"move":I==="top"||I==="bottom"?"ns-resize":I==="left"||I==="right"?"ew-resize":I==="topLeft"||I==="bottomRight"?"nwse-resize":"nesw-resize"}if(e.activeTool==="text")return"text";if(e.activeTool==="hand"){let I=(m=nt==null?void 0:nt.axis)!=null?m:mt;if(I==="row")return"ns-resize";if(I==="column")return"ew-resize";if(Ot||Be)return"ns-resize";let R=(y=Mt==null?void 0:Mt.property)!=null?y:Ln;if(R==="font-size")return"ew-resize";if(R==="line-height")return"ns-resize";let j=(q=St==null?void 0:St.side)!=null?q:je;return j==="top"||j==="bottom"?"ns-resize":j==="left"||j==="right"?"ew-resize":"default"}return"crosshair"},An={position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9998,pointerEvents:e.isAnnotating?"auto":"none",visibility:e.isAnnotating?"visible":"hidden",cursor:At()},It=an(()=>{let m=N.current;if(!m||!k)return{width:100,height:12*1.4,isWrapped:!1};let y=m.getContext("2d");if(!y)return{width:100,height:k.fontSize*1.4,isWrapped:!1};y.font=`${k.fontSize}px ${Zt}`;let I=y.measureText("Type here...").width,R=k.text.split(`
|
|
6
|
+
`),j=R.length>0?Math.max(I,...R.map(E=>y.measureText(E||" ").width)):I,pe=k.point.x-on.x,F=br(pe);if(j>F){let E=Ka(y,R,F),U=Math.min(F,Math.max(I,...E.map(D=>y.measureText(D).width))),B=Math.max(1,E.length)*k.fontSize*1.4;return{width:U,height:B,isWrapped:!0}}let S=Math.max(1,R.length)*k.fontSize*1.4;return{width:j,height:S,isWrapped:!1}},[k,N,on.x])(),fn=k?Math.max(1,k.text.split(`
|
|
7
|
+
`).length)*k.fontSize*1.4+8:0,Tn=It.height+8,zo=It.isWrapped?Tn-fn:0,Wo=k?{position:"fixed",left:k.point.x-4-on.x,top:k.point.y-4-on.y-zo,zIndex:9999,width:It.width+8,height:Tn,padding:4,fontSize:k.fontSize,fontFamily:Zt,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:It.isWrapped?"pre-wrap":"pre",wordBreak:It.isWrapped?"break-word":void 0}:{};return Ar(Pr,{children:[pt("canvas",{ref:G,id:"devtools-canvas",style:An,onMouseDown:yt,onMouseMove:$t,onMouseUp:m=>xt(m),onMouseLeave:m=>{xt(m),Ae(null),rt(null)},onTouchStart:yt,onTouchMove:$t,onTouchEnd:m=>xt(m),onContextMenu:Cn}),k&&Ar(Pr,{children:[pt("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),pt("textarea",{id:"devtools-text-input",ref:Me,value:k.text,onChange:pn,onKeyDown:yo,onPaste:Hn,onBlur:Ge,placeholder:"Type here...",style:Wo}),k.images&&k.images.length>0&&Ar("div",{"data-devtools":!0,style:{position:"fixed",left:k.point.x-4-on.x,top:k.point.y-4-on.y-20,zIndex:1e4,fontSize:11,fontFamily:"system-ui, sans-serif",color:"#fff",backgroundColor:"rgba(0,0,0,0.7)",padding:"2px 6px",borderRadius:3,whiteSpace:"nowrap"},children:[k.images.length," image",k.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&&pt(Rl,{styleModifications:e.styleModifications,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(Ie.map(m=>m.groupId||m.id)).size,dispatch:t,inFlightSelectors:s,toolbarRef:w,onHoverSelector:ie}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&&pt(Al,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&&pt(bl,{annotations:Ie,supersededAnnotations:Oe,inFlightIds:o,activeIds:r,queuePositions:i,scrollX:on.x,scrollY:on.y,annotationGroupMap:Lt,onViewThread:c,onSelectAnnotation:qn,onHoverAnnotation:ae,canvasRef:N}),e.isAnnotating&&d&&pt(xl,{annotations:Ie,supersededAnnotations:Oe,scrollX:on.x,scrollY:on.y,onReply:d,annotationGroupMap:Lt,canvasRef:N,onHoverAnnotation:ae}),e.isAnnotating&&a&&a.size>0&&pt(fs,{inFlightSelectorColors:a}),e.isAnnotating&&Ut&&pt(fs,{inFlightSelectorColors:Ut,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(nt?Mn.current.element:cn)&&pt(xs,{element:nt?Mn.current.element:cn,gap:nt?{row:nt.row,column:nt.column}:Qo(cn),accentColor:e.activeColor,hoveredAxis:mt,draggingAxis:(Wi=nt==null?void 0:nt.axis)!=null?Wi:null,cursorViewport:Yt,isAutoGap:Kt,refreshKey:mo}),e.activeTool==="hand"&&e.isAnnotating&&nn&&pt(Xl,{element:nn.target,modifier:nn.modifier,accentColor:e.activeColor,refreshKey:mo}),e.activeTool==="hand"&&e.isAnnotating&&!nn&&(Ot?bn.current.element:H)&&pt(El,{element:Ot?bn.current.element:H,radius:(Zr=Ot==null?void 0:Ot.radius)!=null?Zr:er(H),accentColor:e.activeColor,hoveredCorner:Be,draggingCorner:(Hr=Ot==null?void 0:Ot.corner)!=null?Hr:null,cursorViewport:Yt}),e.activeTool==="hand"&&e.isAnnotating&&!nn&&(Mt?un.current.element:_t)&&pt(Kl,{element:Mt?un.current.element:_t,fontSize:(ia=Mt==null?void 0:Mt.fontSize)!=null?ia:Gr(_t).fontSize,lineHeight:(sa=Mt==null?void 0:Mt.lineHeight)!=null?sa:Gr(_t).lineHeight,accentColor:e.activeColor,hoveredProperty:Ln,draggingProperty:(aa=Mt==null?void 0:Mt.property)!=null?aa:null,cursorViewport:Yt}),e.activeTool==="hand"&&e.isAnnotating&&!nn&&(St?we.current.element:ke)&&pt(ks,{element:St?we.current.element:ke,padding:(la=St==null?void 0:St.padding)!=null?la:Cr(ke),accentColor:e.activeColor,hoveredSide:je,draggingSide:(ca=St==null?void 0:St.side)!=null?ca:null,cursorViewport:Yt,refreshKey:Mt?Mt.fontSize+Mt.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&pt(Pr,{children:ce&&!e.inspectedElement&&(()=>{let m=(k==null?void 0:k.linkedSelector)||(M==null?void 0:M.linkedSelector);if(m)try{if(ce.matches(m))return null}catch(q){}let y=!!M||!!(k!=null&&k.linkedSelector)||Ie.some(q=>{if(!q.linkedSelector)return!1;try{return ce.matches(q.linkedSelector)}catch(I){return!1}});return pt(bo,{element:ce,isSelected:!1,elementInfo:$e,color:e.activeColor,hideTooltip:y})})()}),((k==null?void 0:k.linkedSelector)||(M==null?void 0:M.linkedSelector))&&(()=>{let m=(k==null?void 0:k.linkedSelector)||(M==null?void 0:M.linkedSelector);if(!m)return null;let y=null;try{y=document.querySelector(m)}catch(q){}return y?pt(bo,{element:y,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),P&&(()=>{let m=e.annotations.find(I=>I.id===P);if(!(m!=null&&m.linkedSelector))return null;let y=null;try{y=document.querySelector(m.linkedSelector)}catch(I){}if(!y)return null;let q=!!(o&&o.has(m.id));return pt(bo,{element:y,isSelected:!q,color:m.color,hideTooltip:!0})})(),Je&&(()=>{let m=e.annotations.find(R=>R.id===Je);if(!(m!=null&&m.linkedSelector))return null;let y=null;try{y=document.querySelector(m.linkedSelector)}catch(R){}if(!y)return null;let q=m.groupId?e.annotations.filter(R=>R.groupId===m.groupId):[m],I=!!(o&&q.some(R=>o.has(R.id)));return pt(bo,{element:y,isSelected:!I,color:m.color,hideTooltip:!0})})(),X&&(()=>{let m=null;try{m=document.querySelector(X)}catch(q){}if(!m)return null;let y=!!(s&&s.has(X));return pt(bo,{element:m,isSelected:!y,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&ft.size>0&&[...ft.entries()].map(([m,y])=>pt(bo,{element:y.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:y.rootElement.tagName.toLowerCase(),reactComponent:m},color:"#8b5cf6"},m)),e.activeTool==="model"&&e.isAnnotating&&C&&pt(bo,{element:C.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:C.rootElement.tagName.toLowerCase(),reactComponent:C.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&ne.length>0&&ne.map((m,y)=>pt("div",{style:{position:"absolute",left:m.x,top:m.y,width:m.width,height:m.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:m.direction==="vertical"?Ar(Pr,{children:[pt("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),pt("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),pt("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),pt("div",{style:{position:"absolute",left:"calc(50% + 6px)",top:m.height<16?-6:"50%",transform:m.height<16?"none":"translateY(-50%)",fontSize:11,fontWeight:600,color:"#fff",backgroundColor:"#FF0000",padding:"2px 4px",whiteSpace:"nowrap",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1},children:Math.round(m.height)})]}):Ar(Pr,{children:[pt("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),pt("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),pt("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),pt("div",{style:{position:"absolute",left:m.width<30?0:"50%",top:(m.width<30,void 0),bottom:"calc(50% + 4px)",transform:m.width<30?"none":"translateX(-50%)",fontSize:11,fontWeight:600,color:"#fff",backgroundColor:"#FF0000",padding:"2px 4px",whiteSpace:"nowrap",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1},children:Math.round(m.width)})]})},y)),e.activeTool==="model"&&e.isAnnotating&&ge&&pt(bo,{element:ge.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:ge.rootElement.tagName.toLowerCase(),reactComponent:ge.name},color:v!=null&&v.has(ge.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&Ar(Pr,{children:[ht&&ht!=="padding"&&ht!=="gap"&&(()=>{var F;let m=new Set(Ie.map(te=>te.groupId||te.id)).size,y=e.inspectedElement.info.selector,q=e.styleModifications.findIndex(te=>te.selector===y),I=q>=0?m+q+1:m+e.styleModifications.length+1,R=e.styleModifications.find(te=>te.selector===y),j=(F=R==null?void 0:R.changes.length)!=null?F:0,pe=!!(R!=null&&R.captured);return pt(bo,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:pe?"#999999":e.activeColor,annotationNumber:I,changeCount:j})})(),ht==="padding"&&pt(ks,{element:e.inspectedElement.el,padding:Cr(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),ht==="gap"&&pt(xs,{element:e.inspectedElement.el,gap:Qo(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),pt(Ul,{element:e.inspectedElement.el,elementInfo:e.inspectedElement.info,selector:e.inspectedElement.info.selector,styleModifications:e.styleModifications,dispatch:t,onClose:()=>t({type:"SELECT_ELEMENT",payload:null}),onHover:Ft,accentColor:e.activeColor,toolbarRef:w})]})]})}import{useCallback as Vn,useEffect as hn,useMemo as ar,useRef as Ht,useState as lr}from"react";import{Check as kf,Circle as Tf,Component as Mf,Hand as If,MessageCircle as Rf,Pen as Lf,RefreshCw as Af,Slash as Pf,Square as Of,Trash2 as Bf,Type as Df}from"lucide-react";import{useEffect as ec,useRef as tc}from"react";function nc(e,t,n,o,r){let i=tc(0),s=tc(t.annotations);ec(()=>{if(!n.current||!e)return;s.current=t.annotations;let a=t.annotations.length;a>0&&(a>=i.current||!o)&&(localStorage.setItem(r.annotations,JSON.stringify(t.annotations)),i.current=a)},[t.annotations,e,o,n,r]),ec(()=>{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{Component as Gp,createElement as jp,useCallback as Bi,useEffect as No,useRef as ir,useState as Un}from"react";import{Link2 as Yp}from"lucide-react";var Tp={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},Mp=/^#[0-9a-fA-F]{3,8}$/,Ip=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,Rp=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 rc(e){let t=e.trim().toLowerCase();return Mp.test(t)||Ip.test(t)||Rp.has(t)}var Lp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function $s(e){return Lp.test(e.trim())}var oc=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function Ap(e){let t=e.trim().toLowerCase();return!!(oc.has(t)||t.includes(",")&&t.split(",").some(n=>oc.has(n.trim().replace(/['"]/g,""))))}function Pp(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(rc(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var Op=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,Bp=/^--(font-family|font|ff|family)/i,Dp=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,_p=/^--(space|gap|padding|margin|inset)/i,Np=/^--(radius|rounded|br|border-radius)/i,Hp=/^--(shadow|elevation|drop-shadow)/i;function ic(e,t){let n=e.toLowerCase();return Hp.test(n)?"shadows":Np.test(n)?"radii":Bp.test(n)?"fonts":Dp.test(n)&&$s(t)?"typeScale":Op.test(n)||rc(t)?"colors":Ap(t)?"fonts":Pp(t)?"shadows":_p.test(n)&&$s(t)||$s(t)?"spacing":"other"}function sc(e,t,n,o){if(e)for(let r of e){if(r instanceof CSSGroupingRule){sc(r.cssRules,t,n,o);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Fp(r.style,t,n,o)}}}var ac=/var\((--[^,)]+)/;function Fp(e,t,n,o){for(let r=0;r<e.length;r++){let i=e[r];if(!(i!=null&&i.startsWith("--"))||n.has(i))continue;n.add(i);let s=t.getPropertyValue(i).trim();if(!s)continue;let a=ic(i,s);o[a].push([i,s]);let d=e.getPropertyValue(i).trim().match(ac);d&&(o.references[i]=d[1])}}function Li(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function Pi(e){let t=e.trim().toLowerCase(),n=t.match(/oklch\(\s*([\d.]+%?)/);if(n){let i=n[1];return i.endsWith("%")?parseFloat(i)/100:parseFloat(i)}let o=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(o){let[i,s,a]=[parseInt(o[1],10),parseInt(o[2],10),parseInt(o[3],10)];return(.2126*i+.7152*s+.0722*a)/255}let r=t.match(/hsla?\(\s*[\d.]+[,\s]+[\d.]+%?[,\s]+([\d.]+)%?/);if(r)return parseFloat(r[1])/100;if(t.startsWith("#")){let i=t.slice(1);(i.length===3||i.length===4)&&(i=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]);let s=parseInt(i.slice(0,2),16),a=parseInt(i.slice(2,4),16),l=parseInt(i.slice(4,6),16);if(!isNaN(s))return(.2126*s+.7152*a+.0722*l)/255}return null}function lc(e){return e==="colors"?(t,n)=>{let o=Pi(t[1]),r=Pi(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let o=Li(t[1]),r=Li(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let o=Li(t[1]),r=Li(n[1]);return o!==null&&r!==null?o-r:t[0].localeCompare(n[0])}:(t,n)=>t[0].localeCompare(n[0])}function $p(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 cc(e){let t=new Map;for(let r of e){let i=$p(r[0]),s=t.get(i);s||(s=[],t.set(i,s)),s.push(r)}let n=lc("colors");for(let r of t.values())r.sort(n);let o=[...t.entries()];return o.sort((r,i)=>{var l,d;let s=(l=Pi(r[1][0][1]))!=null?l:0,a=(d=Pi(i[1][0][1]))!=null?d:0;return s-a}),o}var zp=["colors","fonts","typeScale","spacing","radii","shadows","other"],Ai=null,Wp=5e3;function dc(){if(typeof document=="undefined")return Tp;if(Ai&&Date.now()-Ai.timestamp<Wp)return Ai.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{sc(r.cssRules||r.rules,n,t,e)}catch(i){}}catch(r){}let o=document.documentElement.style;for(let r=0;r<o.length;r++){let i=o[r];if(!(i!=null&&i.startsWith("--"))||t.has(i))continue;t.add(i);let s=n.getPropertyValue(i).trim();if(!s)continue;let a=ic(i,s);e[a].push([i,s]);let d=o.getPropertyValue(i).trim().match(ac);d&&(e.references[i]=d[1])}for(let r of zp)e[r].sort(lc(r));return Ai={tokens:e,timestamp:Date.now()},e}import{Fragment as sr,jsx as Fe,jsxs as Qt}from"react/jsx-runtime";var uc="popmelt-library-tab",Jp=/^#[0-9a-fA-F]{3,8}$/,Up=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,Vp=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),Xp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function fc(e){let t=e.trim();return Jp.test(t)||Up.test(t)||Vp.has(t.toLowerCase())}function Kp(e){return Xp.test(e.trim())}function qp(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function gc(e,t=""){if(e==null)return[];if(typeof e!="object")return[[t,String(e)]];if(Array.isArray(e))return[[t,e.map(String).join(", ")]];let n=[];for(let[o,r]of Object.entries(e)){let i=t?`${t}.${o}`:o;if(r!==null&&typeof r=="object"&&!Array.isArray(r)){let s=r;typeof s.value=="string"?n.push([i,s.value]):n.push(...gc(r,i))}else n.push([i,Array.isArray(r)?r.map(String).join(", "):String(r!=null?r:"")])}return n}function Zp(e){return e.length===0?"generic":e.filter(([,o])=>fc(o)).length>e.length/2?"colors":e.filter(([,o])=>Kp(o)).length>e.length/2?"spacing":"generic"}var Qp=h(f({width:300,backgroundColor:"#eaeaea"},Mr),{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"}),mc={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},ef=h(f({},mc),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function tf({varName:e,value:t,reference:n}){return Fe("div",{title:n?`${e} \u2192 ${n}
|
|
8
|
+
${t}`:`${e}: ${t}`,style:{width:28,height:28,backgroundColor:t,outline:"1px solid rgba(0,0,0,0.08)",outlineOffset:-1,position:"relative"},children:n&&Fe(Yp,{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 hc({entries:e,references:t}){let n=[],o=[];for(let i of e)fc(i[1])?n.push(i):o.push(i);let r=cc(n);return Qt(sr,{children:[r.map(([i,s])=>Qt("div",{style:{marginBottom:4},children:[Qt("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[i,s.length>1?` (${s.length})`:""]}),Fe("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:s.map(([a,l])=>Fe(tf,{varName:a,value:l,reference:t[a]},a))})]},i)),o.length>0&&Fe(Di,{entries:o})]})}var Oi=[0,1,2,4,8,12,16,20,24,28,32];function nf(e){if(e<=32){let t=Oi[0],n=Math.abs(e-t);for(let o=1;o<Oi.length;o++){let r=Math.abs(e-Oi[o]);r<n&&(t=Oi[o],n=r)}return t}return Math.round(e/8)*8}function of({label:e,value:t,px:n,tokenPath:o,rawToken:r,onHover:i,onModify:s,onDelete:a}){let[l,d]=Un(!1),[c,p]=Un(null),u=ir(!1),g=ir(0),b=ir(0),v=ir([]),A=c!==null?c:n,T=c!==null?`${c}px`:t,$=c!==null,P=Bi(w=>{w.preventDefault(),u.current=!0,g.current=w.clientX,b.current=n;let N=ui(r);v.current=as(N);let se=G=>{let oe=G.clientX-g.current,W=Math.max(0,Math.round(b.current+oe));G.shiftKey&&(W=nf(W));for(let Z of v.current)Z.element.style.setProperty(Z.property,W+"px","important");p(W),i==null||i({name:e,px:W,token:N})},ee=()=>{window.removeEventListener("mousemove",se),window.removeEventListener("mouseup",ee),document.body.style.cursor="",u.current=!1,p(G=>{if(G!==null&&G!==n&&s){let oe=ui(r),W=oe.bindings&&oe.bindings.length>0,Z;if(W){let fe=cs(oe.bindings,b.current,G);Z=JSON.stringify(h(f({},oe),{value:`${G}px`,bindings:fe}))}else{let fe=ll(v.current,b.current),_=cl(v.current);if(fe.length>0){let le=cs(fe,b.current,G);Z=JSON.stringify({value:`${G}px`,property:_,bindings:le})}else Z=`${G}px`}let k=typeof r=="string"?r:JSON.stringify(r),Ce=v.current.map(fe=>({selector:jn(fe.element),property:fe.property})),Q=ul(v.current,b.current,G);s({tokenPath:o,originalValue:k,currentValue:Z,targets:Ce,originalPx:b.current,currentPx:G},{id:Math.random().toString(36).substring(2,9),tokenPath:o,tokenName:e,originalPx:b.current,newPx:G,affectedElements:Q})}return G})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",se),window.addEventListener("mouseup",ee)},[n,e,o,r,i,s]),O=ui(r);return Qt("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,padding:"1px 0",cursor:"ew-resize",userSelect:"none"},onMouseEnter:()=>{u.current||(d(!0),i==null||i({name:e,px:A,token:O}))},onMouseLeave:()=>{u.current||(d(!1),i==null||i(null))},onMouseDown:P,children:[Fe("span",{style:{color:l||$?"#FF0000":"#9ca3af"},children:e}),Qt("span",{style:{display:"flex",alignItems:"center",gap:4},children:[Fe("span",{style:{color:l||$?"#FF0000":"#6b7280",fontWeight:600},children:T}),a&&l&&!$&&Fe("button",{type:"button",title:"Remove token",onMouseDown:w=>{w.stopPropagation();let N=typeof r=="string"?r:JSON.stringify(r);a(o,N)},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 rf({entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}){let s=[],a=[];for(let l of e){let d=qp(l[1]);d!==null?s.push([l[0],l[1],d]):a.push(l)}return Qt(sr,{children:[s.length>0&&Fe("div",{style:{display:"flex",flexDirection:"column",gap:2},children:s.map(([l,d,c])=>{let p=l.split(".").pop(),u=n?sf(n,l):d,g=u&&typeof u=="object"&&"value"in u?u:d;return Fe(of,{label:p,value:d,px:c,tokenPath:`tokens.${t}.${l}`,rawToken:g,onHover:o,onModify:r,onDelete:i},l)})}),a.length>0&&Fe(Di,{entries:a})]})}function sf(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 Di({entries:e}){return Fe("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>Qt("div",{style:{fontSize:11},children:[Fe("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),Fe("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function af({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:o,onModifyToken:r,onDeleteToken:i}){let s=Zp(e);return s==="colors"?Fe(hc,{entries:e}):s==="spacing"?Fe(rf,{entries:e,categoryKey:t,rawTokens:n,onHover:o,onModify:r,onDelete:i}):Fe(Di,{entries:e})}function lf(e){let t=e.toLowerCase(),n=null,o=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(i){return i.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),r=o.currentNode;for(;r=o.nextNode();){let i=r,s=Object.keys(i).find(l=>l.startsWith("__reactFiber$")||l.startsWith("__reactInternalInstance$"));if(!s)continue;let a=i[s];for(;a;){let l=a.type,d=typeof l=="function"||typeof l=="object"?(l==null?void 0:l.displayName)||(l==null?void 0:l.name):null;if(typeof d=="string"){let c=d.toLowerCase();if(c===t){let p=f({},a.memoizedProps);return delete p.ref,{type:l,props:p}}if(!n){if(c.length>=4&&t.includes(c)){let p=f({},a.memoizedProps);delete p.ref,n={type:l,props:p}}else if(t.length>=4&&c.includes(t)){let p=f({},a.memoizedProps);delete p.ref,n={type:l,props:p}}}}a=a.return}}return n}var zs=class extends Gp{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}},yc="popmelt-principles-collapsed";function cf(){try{let e=localStorage.getItem(yc);if(e)return new Set(JSON.parse(e))}catch(e){}return new Set}function df(e){try{localStorage.setItem(yc,JSON.stringify([...e]))}catch(t){}}function uf({id:e,label:t,count:n,children:o,collapsed:r,onToggle:i}){return Qt("div",{style:{marginBottom:14},children:[Qt("div",{onClick:()=>i(e),style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:r?0:6,cursor:"pointer",display:"flex",alignItems:"center",gap:4,userSelect:"none"},children:[Fe("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:r?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,Fe("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!r&&o]})}var pf={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},pc=["colors","fonts","typeScale","spacing","radii","shadows","other"];function ff(){let[e,t]=Un(null),[n,o]=Un(cf);No(()=>{t(dc())},[]);let r=Bi(s=>{o(a=>{let l=new Set(a);return l.has(s)?l.delete(s):l.add(s),df(l),l})},[]);return e?pc.some(s=>e[s].length>0)?Fe(sr,{children:pc.map(s=>{let a=e[s];return a.length===0?null:Fe(uf,{id:s,label:pf[s],count:a.length,collapsed:n.has(s),onToggle:r,children:s==="colors"?Fe(hc,{entries:a,references:e.references}):Fe(Di,{entries:a})},s)})}):Fe("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function gf({rules:e,onSynthesize:t,isSynthesizing:n}){if(!e||e.length===0)return Fe("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."});if(!e.some(i=>typeof i=="object"&&i!==null&&"scope"in i))return Fe(sr,{children:e.map((i,s)=>Qt("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[Qt("span",{style:{color:"#9ca3af",flexShrink:0},children:[s+1,"."]}),Fe("span",{children:typeof i=="string"?i:i.text})]},s))});let r=new Map;for(let i of e)if(typeof i=="string")r.has("general")||r.set("general",[]),r.get("general").push({id:"",text:i});else{let s=i.scope||"general";r.has(s)||r.set(s,[]),r.get(s).push({id:i.id,text:i.text})}return Qt(sr,{children:[t&&Fe("button",{type:"button",disabled:n,onClick:t,style:{width:"100%",border:"1px solid rgba(0,0,0,0.12)",background:n?"rgba(0,0,0,0.04)":"rgba(0,0,0,0.02)",cursor:n?"default":"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"5px 8px",marginBottom:10,color:n?"#9ca3af":"#6b7280"},children:n?"Synthesizing\u2026":"Synthesize"}),Array.from(r.entries()).map(([i,s])=>Qt("div",{style:{marginBottom:10},children:[Fe("div",{style:{fontWeight:700,fontSize:10,color:"#6b7280",letterSpacing:"0.05em",textTransform:"uppercase",marginBottom:4},children:i}),s.map((a,l)=>Qt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4,fontSize:11},children:[Fe("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2022"}),Fe("span",{children:a.text})]},a.id||l))]},i))]})}function mf({name:e,value:t,selected:n,highlighted:o,onRemove:r,onHover:i}){var G;let[s,a]=Un(!1),[l,d]=Un(!1),c=ir(null),p=ir(0),[u,g]=Un(0),[b,v]=Un(0),A=gc(t),T=(G=A.find(([oe])=>oe==="description"))==null?void 0:G[1];No(()=>{if(!l&&!o){g(0),v(0),p.current=0;return}let oe=Sr(e);g(oe.length)},[l,o,e]),No(()=>{n&&c.current&&c.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let $=n||o||l,P=n?"139,92,246":"34,197,94",O=n?"#8b5cf6":"#22c55e",w=$?`rgba(${P},0.06)`:void 0,N=$?`inset 0 0 0 1.5px rgba(${P},0.35)`:void 0,se=o||l,ee=Bi(()=>{let oe=Sr(e);if(oe.length===0)return;let W=p.current%oe.length;oe[W].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),v(W),p.current=W+1,i==null||i({name:e,instanceIndex:W})},[e,i]);return Qt("div",{ref:c,onClick:ee,onMouseEnter:()=>{d(!0),i==null||i({name:e,instanceIndex:0})},onMouseLeave:()=>{d(!1),i==null||i(null)},style:{marginBottom:8,background:w,padding:6,boxShadow:N,cursor:"pointer"},children:[Qt("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[Qt("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[Fe("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:se?O:"transparent",color:se?"#fff":"#6b7280"},children:e}),se&&u>1&&Qt("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[b+1,"/",u]})]}),r&&l&&Fe("button",{type:"button",title:"Remove from model",onClick:oe=>{oe.stopPropagation(),r(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:oe=>{oe.currentTarget.style.color="#FF0000"},onMouseLeave:oe=>{oe.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),T&&Fe("div",{style:{fontSize:11,color:se?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:T}),s?Fe(af,{entries:A.filter(([oe])=>oe!=="description"),categoryKey:""}):Fe(hf,{name:e,onNotFound:()=>a(!0),entries:A})]})}function hf({name:e,onNotFound:t}){let[n,o]=Un(null),[r,i]=Un(!1);return No(()=>{let s=lf(e);s||t(),o(s),i(!0)},[e,t]),!r||!n?null:Fe(zs,{onError:t,children:Fe("div",{"data-popmelt-panel":!0,onClick:s=>{s.preventDefault(),s.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center",contain:"layout paint",position:"relative",isolation:"isolate"},children:Fe("div",{style:{zoom:.5,pointerEvents:"none"},children:jp(n.type,n.props)})})})}function yf({components:e,selectedComponent:t,hoveredComponent:n,onRemove:o,onHover:r}){if(!e||Object.keys(e).length===0)return Fe("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),s=rs(i),a=Object.entries(e).sort(([l],[d])=>{var c,p;return((c=s.get(l))!=null?c:1/0)-((p=s.get(d))!=null?p:1/0)});return Fe(sr,{children:a.map(([l,d])=>Fe(mf,{name:l,value:d,selected:t===l,highlighted:n===l,onRemove:o,onHover:r},l))})}function bc({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:o,selectedComponent:r,hoveredComponent:i,onComponentHover:s,onSpacingTokenHover:a,onModifySpacingToken:l,onDeleteSpacingToken:d,onComponentAdded:c,onComponentRemoved:p,onSynthesizeRules:u,isSynthesizing:g,snapPosition:b="bottom-right"}){let[v,A]=Un(void 0),[T,$]=Un(!0),[P,O]=Un(()=>{try{let W=localStorage.getItem(uc);if(W==="patterns"||W==="principles"||W==="rules")return W}catch(W){}return"patterns"});No(()=>{fr(e).then(W=>{A(W),$(!1)})},[e,t]),No(()=>{try{localStorage.setItem(uc,P)}catch(W){}},[P]),No(()=>{r&&(O("patterns"),fr(e).then(W=>{W&&A(W)}))},[r,e]);let w=Bi(W=>{A(Z=>{if(!(Z!=null&&Z.components))return Z;let Q=Z.components,{[W]:k}=Q,Ce=Zn(Q,[Ao(W)]);return h(f({},Z),{components:Ce})}),p==null||p(W)},[p]),N=v==null?void 0:v.components,se=v==null?void 0:v.rules,ee=N&&Object.keys(N).length>0,G=se&&se.length>0,oe=ir(null);return No(()=>{let W=oe.current;if(!W)return;let Z=n,k=o;return Z&&W.addEventListener("mouseenter",Z),k&&W.addEventListener("mouseleave",k),()=>{Z&&W.removeEventListener("mouseenter",Z),k&&W.removeEventListener("mouseleave",k)}},[n,o]),Qt("div",{ref:oe,style:f(f({},Qp),Ya(b)),children:[Qt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[Fe("span",{children:"Model"}),Fe("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),Fe("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(W=>Fe("button",{type:"button",style:P===W?ef:mc,onClick:()=>O(W),children:W.charAt(0).toUpperCase()+W.slice(1)},W))}),Fe("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:P==="principles"?Fe(ff,{}):T?Fe("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!v||!ee&&!G?Fe("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):Qt(sr,{children:[P==="patterns"&&Fe(yf,{components:N,selectedComponent:r,hoveredComponent:i,onRemove:w,onHover:s}),P==="rules"&&Fe(gf,{rules:se,onSynthesize:u,isSynthesizing:g})]})})]})}import{jsx as Lo}from"react/jsx-runtime";var bf="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",xf="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",vf="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 Sf({size:e=16,style:t}){return Lo("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:Lo("path",{d:bf})})}function wf({size:e=16,style:t}){return Lo("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:Lo("path",{d:xf})})}function Cf({size:e=16,style:t}){return Lo("svg",{width:e,height:e,viewBox:"0 0 49.7202 40.0402",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:Lo("path",{d:vf,fillRule:"evenodd",clipRule:"evenodd"})})}function Vr({provider:e,size:t=16,style:n}){return e==="codex"?Lo(wf,{size:t,style:n}):e==="copilot"?Lo(Cf,{size:t,style:n}):Lo(Sf,{size:t,style:n})}var _i=[{id:"claude-opus-4-6",label:"Opus 4.6",source:"static"},{id:"claude-sonnet-4-6",label:"Sonn 4.6",source:"static"}],Ni=[{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"}],Ws=[{id:"",label:"Default",source:"static"}];var Ef=[..._i,...Ni,...Ws];function Gs(e,t){if(t==="copilot"&&!e)return"Copilot";if(!e)return t==="codex"?"Codex":"Claude Code";let n=Ef.find(o=>o.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as vc}from"react/jsx-runtime";var oo={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function Ho({children:e,active:t,siblingActive:n,disabled:o,onClick:r,title:i}){let s=()=>o?.4:n&&!t?.5:1,a={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:0,border:"none",cursor:o?"default":"pointer",transition:"background-color 150ms ease, color 150ms ease, transform 100ms ease, opacity 150ms ease",backgroundColor:t?oo.bgActive:"transparent",color:t?oo.iconActive:oo.iconDefault,opacity:s()};return vc("button",{type:"button",onClick:o?void 0:r,title:i,disabled:o,style:a,onMouseEnter:l=>{o||(l.currentTarget.style.opacity="1",t||(l.currentTarget.style.backgroundColor=oo.bgHover))},onMouseLeave:l=>{o||(l.currentTarget.style.opacity=String(s()),t||(l.currentTarget.style.backgroundColor="transparent"))},onMouseDown:l=>{o||(l.currentTarget.style.transform="scale(0.95)")},onMouseUp:l=>{o||(l.currentTarget.style.transform="scale(1)")},children:e})}function xc(){return vc("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as Xr,jsx as xe,jsxs as Pt}from"react/jsx-runtime";function _f(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:Of,label:"Rectangle",shortcut:"R"},{type:"circle",icon:Tf,label:"Oval",shortcut:"O"},{type:"line",icon:Pf,label:"Line",shortcut:"L"},{type:"freehand",icon:Lf,label:"Pen",shortcut:"P"}],Nf=new Set(cr.map(e=>e.type));function Hf(e,t,n,o,r,i,s,a){let l=(e-r)*(o-i)-(n-r)*(t-i),d=(e-s)*(i-a)-(r-s)*(t-a),c=(e-n)*(a-o)-(s-n)*(t-o),p=l<0||d<0||c<0,u=l>0||d>0||c>0;return!(p&&u)}function Ff(e="bottom-right"){return Ja(e,window.innerWidth,window.innerHeight)}var $f=[{type:"text",icon:Df,label:"Text",shortcut:"T"}],Sc={inspector:{name:"Comment",desc:"Pin feedback to specific elements on the page.",usage:["Click any element to attach a comment","Type your note, then hand off to your AI","Your AI may ask clarifying questions","Replies get threaded"],keys:[{key:"C",desc:"Select tool"},{key:"Click",desc:"Pin comment to element"},{key:"Esc",desc:"Deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},hand:{name:"Handle",desc:"Quickly finetune layout and typescale.",usage:["Edges \u2192 padding","Between items \u2192 spacing","Corners \u2192 rounding","Right of text \u2192 font size","Below text \u2192 line height","Click a spacing handle to cycle distribution","Right-click \u2192 inspect element styles"],keys:[{key:"H",desc:"Select tool"},{key:"Shift",desc:"Snap to scale"},{key:"\u2325 + swipe",desc:"Cycle justify / flip direction"},{key:"\u21E7 + swipe",desc:"Cycle align-items"},{key:"Right-click",desc:"Inspect styles"},{key:"Esc",desc:"Deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},rectangle:{name:"Rectangle",desc:"Draw rectangular highlights to mark areas of interest.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"R",desc:"Rectangle"},{key:"O",desc:"Oval"},{key:"L",desc:"Line"},{key:"P",desc:"Pen"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},circle:{name:"Oval",desc:"Draw oval highlights to mark areas of interest.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"O",desc:"Oval"},{key:"R",desc:"Rectangle"},{key:"L",desc:"Line"},{key:"P",desc:"Pen"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},line:{name:"Line",desc:"Draw line annotations to point at or connect elements.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"L",desc:"Line"},{key:"R",desc:"Rectangle"},{key:"O",desc:"Oval"},{key:"P",desc:"Pen"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},freehand:{name:"Pen",desc:"Draw freehand paths to annotate freely.",usage:["Click and drag to draw","Cycle between shapes with the dot selector"],keys:[{key:"P",desc:"Pen"},{key:"R",desc:"Rectangle"},{key:"O",desc:"Oval"},{key:"L",desc:"Line"},{key:"Esc",desc:"Cancel or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},text:{name:"Text",desc:"Place text labels anywhere on the page.",usage:["Click to place, then start typing","Click away or press Enter to finish","Scroll while hovering a label to resize it"],keys:[{key:"T",desc:"Select tool"},{key:"Esc",desc:"Cancel text or deselect"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]},model:{name:"Model",desc:"Promote components into the local design model.",usage:["Hover to highlight component boundaries","Scroll to walk up/down the component tree","Click to add to model.json","Green = already in model"],keys:[{key:"M",desc:"Select tool"},{key:"Scroll",desc:"Walk tree depth"},{key:"Click",desc:"Promote component"},{key:"Esc",desc:"Deselect"}]},counter:{name:"Annotations",desc:"Click to cycle, scroll to change color, long press to reset.",usage:[],keys:[{key:"Click",desc:"Cycle annotations"},{key:"Scroll",desc:"Change color"},{key:"Hold",desc:"Reset to red"}]},clear:{name:"Clear",desc:"Remove all annotations and style changes.",usage:[],keys:[{key:"\u2318 \u232B",desc:"Clear all"},{key:"\u232B",desc:"Delete selected annotation"},{key:"\u2318 Z",desc:"Undo"},{key:"\u2318 \u21E7 Z",desc:"Redo"}]},collapse:{name:"Popmelt",desc:`Comment and zhuzh, then hand off.
|
|
9
9
|
|
|
10
|
-
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},_f={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"},Os="devtools-toolbar-expanded",Bs="devtools-annotations",Ds="devtools-style-modifications",_s="devtools-active-tool",yc="devtools-active-color",bc="devtools-stroke-width",xc="devtools-inspected-element",Ns="devtools-spacing-changes",Nf={expanded:Os,annotations:Bs,styleMods:Ds,spacingChanges:Ns,tool:_s,color:yc,stroke:bc,inspected:xc};function vc({state:e,dispatch:t,onScreenshot:n,onSendToClaude:o,hasActiveJobs:r,activeJobColor:i,onCrosshairHover:s,onClear:a,provider:l="claude",onProviderChange:d,availableProviders:c,modelIndex:p=0,modelCount:u=2,modelLabel:g="Opus 4.6",onModelChange:b,onViewThread:x,isThreadPanelOpen:A,mcpStatus:T,bridgeUrl:z,isBridgeConnected:P,modelSelectedComponent:O,modelCanvasHoveredComponent:k,onModelComponentHover:G,onSpacingTokenHover:re,onModifySpacingToken:oe,onDeleteSpacingToken:W,modelRefreshKey:Q,onModelComponentAdded:N,onModelComponentRemoved:ee,onSynthesizeRules:M,isSynthesizing:Le,onMouseEnter:V,toolbarRef:fe,snapPosition:D="bottom-right",onSnapPositionChange:ae}){let[I,pe]=Qo(()=>typeof window!="undefined"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});gn(()=>{let w=()=>pe({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",w),()=>window.removeEventListener("resize",w)},[]);let[me,Fe]=Qo(()=>typeof window=="undefined"?!1:localStorage.getItem(Os)==="true"),[we,Je]=Qo(0),Re=Dt(0),Ce=Dt(0),at=Dt(e.isAnnotating),gt=Dt(!1),bt=Dt(typeof window!="undefined"?localStorage.getItem(_s):null),Yt=Dt(typeof window!="undefined"?localStorage.getItem(yc):null),K=Dt(typeof window!="undefined"?localStorage.getItem(bc):null),[X,Te]=Qo(null),Oe=Dt(!1),Xe=Dt(null),Pe=Dt(null),he=Dt(null),[te,ie]=Qo([]),ve=Dt({x:0,y:0}),Me=Dt(null),mt=Dt(null),Ne=Dt(null),ze=Wn(()=>{Me.current=null,mt.current=null,Ne.current&&(clearTimeout(Ne.current),Ne.current=null)},[]),nt=Wn(w=>{Pe.current&&(clearTimeout(Pe.current),Pe.current=null),Oe.current?(Me.current=w,mt.current=f({},ve.current),Ne.current&&clearTimeout(Ne.current),Ne.current=setTimeout(()=>{Me.current&&(Te(Me.current),ze())},300)):(Xe.current&&clearTimeout(Xe.current),Xe.current=setTimeout(()=>{Oe.current=!0,Te(w),Xe.current=null},500))},[ze]),St=Wn(()=>{ze(),Xe.current&&(clearTimeout(Xe.current),Xe.current=null),Pe.current=setTimeout(()=>{Oe.current=!1,Te(null)},150)},[ze]);gn(()=>{let w=he.current;if(!w)return;let H=()=>{ze(),Pe.current&&(clearTimeout(Pe.current),Pe.current=null)},q=()=>{Pe.current=setTimeout(()=>{Oe.current=!1,Te(null)},150)};return w.addEventListener("mouseenter",H),w.addEventListener("mouseleave",q),()=>{w.removeEventListener("mouseenter",H),w.removeEventListener("mouseleave",q)}},[X,ze]),gn(()=>{if(X!=="counter"||!z)return;let w=!1;return fetch(`${z}/threads/recent?limit=5`).then(H=>H.ok?H.json():[]).then(H=>{w||ie(H)}).catch(()=>{}),()=>{w=!0}},[X,z]);let Ke=Wn(w=>{if(ve.current={x:w.clientX,y:w.clientY},Me.current&&mt.current){let H=mt.current,q=Bf(D);Of(w.clientX,w.clientY,H.x,H.y,q.left,q.y,q.right,q.y)||(Te(Me.current),ze())}},[ze,D]),qe=Zo(()=>{let w=(c!=null?c:[]).map(H=>H==="claude"?"Claude":H==="codex"?"Codex":H==="copilot"?"Copilot":H);return{name:"AI Model",desc:w.length>1?`${w.join(" and ")} are available.`:w.length===1?`Connected to ${w[0]}.`:"No AI providers detected.",usage:w.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:w.length>1?[{key:"Click",desc:"Switch"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]:[{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]}},[c]),Rt=Zo(()=>{var q;let w=c&&c.length>0?c:["claude","codex","copilot"],H=w.indexOf(l);return(q=w[(H>=0?H+1:0)%w.length])!=null?q:l},[c,l]),_n=Zo(()=>Af(u,p),[u,p]);ql(me,e,gt,!!r,Nf),gn(()=>{let w=new URLSearchParams(window.location.search);if(!w.has("popmelt"))return;let H=document.createElement("style");H.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(H);let q=parseInt(w.get("popmelt")||"0",10)||0,ye=()=>{Fe(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})};if(q>0){let de=setTimeout(ye,q);return()=>clearTimeout(de)}ye()},[]),gn(()=>{var q;if(localStorage.getItem(Os)==="true"&&!e.isAnnotating){if(me||Fe(!0),t({type:"SET_TOOL",payload:bt.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),Yt.current&&t({type:"SET_COLOR",payload:Yt.current}),K.current){let je=parseFloat(K.current);isNaN(je)||t({type:"SET_STROKE_WIDTH",payload:je})}let ye=localStorage.getItem(Bs);if(ye)try{let je=JSON.parse(ye);if(Array.isArray(je)&&je.length>0){for(let Pt of je)(Pt.status==="waiting_input"||Pt.status==="in_flight")&&(Pt.status=Pt.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:je}})}}catch(je){}let de=localStorage.getItem(Ds);if(de)try{let je=JSON.parse(de);Array.isArray(je)&&je.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:je}),ri(je))}catch(je){}let ge=localStorage.getItem(Ns);if(ge)try{let je=JSON.parse(ge);Array.isArray(je)&&je.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:je})}catch(je){}let He=localStorage.getItem(xc);if(He)try{let{selector:je,info:Pt}=JSON.parse(He);if(je){let Ft=In(je);if(Ft){let un=Pt||h(f({},Ln(Ft)),{selector:je});t({type:"SELECT_ELEMENT",payload:{el:Ft,info:un}})}}}catch(je){}let Ie=sessionStorage.getItem("popmelt-pending-focus");if(Ie){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:je}=JSON.parse(Ie);if(je){let Pt=ye?(q=JSON.parse(ye))!=null?q:[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:je}});let Ft=Pt.find(un=>un.id===je);if(Ft){let S=(Ft.groupId?Pt.filter(C=>C.groupId===Ft.groupId):[Ft]).flatMap(C=>C.points);if(S.length>0){let C=Math.min(...S.map(ke=>ke.x)),le=Math.max(...S.map(ke=>ke.x)),ce=Math.min(...S.map(ke=>ke.y)),Ae=Math.max(...S.map(ke=>ke.y));window.scrollTo({left:(C+le)/2-window.innerWidth/2,top:(ce+Ae)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch(je){}}}let H=sessionStorage.getItem("popmelt-pending-thread");if(H){sessionStorage.removeItem("popmelt-pending-thread");try{let{threadId:ye,selector:de,preview:ge}=JSON.parse(H);ye&&requestAnimationFrame(()=>{if(de)try{let He=document.querySelector(de);if(He){let Ie=He.getBoundingClientRect(),je=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:je,point:{x:Ie.left+Ie.width,y:Ie.top},text:ge||"[thread]",linkedSelector:de,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[je],threadId:ye}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[je],status:"resolved"}})}}catch(He){}x&&x(ye)})}catch(ye){}}return gt.current=!0,()=>{gt.current=!1}},[]);let Kn=Dt(e.styleModifications);gn(()=>{let w=Kn.current,H=e.styleModifications;w!==H&&(ii(w),ri(H),Kn.current=H)},[e.styleModifications]),gn(()=>{let w=at.current;at.current=e.isAnnotating,w&&!e.isAnnotating&&me&&Fe(!1)},[e.isAnnotating,me]);let vn=Dt(me);vn.current=me,gn(()=>{let w=q=>{if(q.key==="Meta"||q.key==="Control"){let ye=Date.now();if(ye-Re.current<300){if(Ce.current++,Ce.current>=2){if(vn.current)t({type:"SET_ANNOTATING",payload:!1}),Fe(!1);else{let He=localStorage.getItem(_s);t({type:"SET_TOOL",payload:He||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),Fe(!0)}Ce.current=0}}else Ce.current=1;Re.current=ye}else Ce.current=0},H=q=>{q.key!=="Meta"&&q.key!=="Control"&&(Ce.current=0)};return window.addEventListener("keydown",w),window.addEventListener("keyup",H),()=>{window.removeEventListener("keydown",w),window.removeEventListener("keyup",H)}},[t]);let It=Wn(w=>{ze(),t({type:"SET_TOOL",payload:w}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),Oe.current=!1,Te(null),Xe.current&&(clearTimeout(Xe.current),Xe.current=null),Pe.current&&(clearTimeout(Pe.current),Pe.current=null)},[t,e.isAnnotating,ze]),qn=Wn(async()=>{window.focus(),await n()},[n]),on=Wn(async()=>{o&&await o()},[o]),Zn=Wn(()=>{t({type:"SET_ANNOTATING",payload:!1}),Fe(!1)},[t]),xt=Wn(()=>{ii(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(w=>w.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(Bs),localStorage.removeItem(Ds),localStorage.removeItem(Ns),lt(null),a==null||a()},[t,e.styleModifications,a]),[rn,_t]=Qo(()=>{if(Yt.current){let w=Yt.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(w!=null&&w[1])return parseFloat(w[1])}return 29}),sn=Dt(null),Nn=Dt(null),An=Dt(!1),Kt=Wn(w=>{let H=w.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return H&&H[1]?parseFloat(H[1]):null},[]);gn(()=>{An.current=!0;let w=`oklch(0.628 0.258 ${rn})`;t({type:"SET_COLOR",payload:w}),requestAnimationFrame(()=>{An.current=!1})},[rn,t]),gn(()=>{if(An.current)return;let w=Kt(e.activeColor);w!==null&&Math.abs(w-rn)>.5&&_t(w)},[e.activeColor,Kt,rn]);let Sn=Dt(null);gn(()=>{if(r&&i){let w=Kt(i);w!==null&&Math.abs(w-rn)>.5&&(Sn.current===null&&(Sn.current=rn),_t(w))}else Sn.current!==null&&(_t(Sn.current),Sn.current=null)},[r,i,Kt]);let bn=e.annotations.length>0;gn(()=>{let w=Nn.current;if(!w||!bn)return;let H=q=>{q.preventDefault(),q.stopPropagation();let ye=q.deltaY>0?-1:1,de=((rn+ye)%360+360)%360,ge=`oklch(0.628 0.258 ${de})`;_t(de),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:ge}})};return w.addEventListener("wheel",H,{passive:!1}),()=>w.removeEventListener("wheel",H)},[bn,e.selectedAnnotationIds,e.lastSelectedId,rn,t]);let $=Dt(!1),De=Dt(0);gn(()=>{let w=e.annotations.some(ye=>!ye.status||ye.status==="pending"),H=$.current;$.current=w;let q=De.current===0&&e.annotations.length>0;if(De.current=e.annotations.length,(H&&!w||q&&!w)&&e.annotations.length>0){let ye=e.annotations.map(de=>Kt(de.color)).filter(de=>de!==null);if(ye.length>0){let de=0,ge=-1;for(let He=0;He<360;He++){let Ie=Math.min(...ye.map(je=>{let Pt=Math.abs(He-je);return Math.min(Pt,360-Pt)}));Ie>ge&&(ge=Ie,de=He)}_t(de)}}},[e.annotations,Kt]);let Ge=Dt(!1),En=Wn(()=>{Ge.current=!1,sn.current=setTimeout(()=>{Ge.current=!0,_t(29)},500)},[]),At=Wn(()=>{sn.current&&(clearTimeout(sn.current),sn.current=null)},[]);gn(()=>()=>{sn.current&&clearTimeout(sn.current),Ne.current&&clearTimeout(Ne.current)},[]);let qt=cr(),wn=Zo(()=>e.annotations.filter(w=>!w.pathname||w.pathname===qt),[e.annotations,qt]),Wt=Zo(()=>ci(e.annotations),[e.annotations]),Gt=Zo(()=>{let w=[],H=new Set,q=[...e.annotations].sort((ye,de)=>ye.timestamp-de.timestamp);for(let ye of q)if(!Wt.has(ye))if(ye.groupId){if(!H.has(ye.groupId)){H.add(ye.groupId);let de=e.annotations.filter(Ie=>Ie.groupId===ye.groupId&&!Wt.has(Ie)),ge=de.find(Ie=>Ie.type!=="text")||de[0],He=Math.min(...de.map(Ie=>Ie.timestamp));w.push({id:ge.id,pathname:ye.pathname,annotations:de,timestamp:He})}}else w.push({id:ye.id,pathname:ye.pathname,annotations:[ye],timestamp:ye.timestamp});return w},[e.annotations,Wt]),Pn=Zo(()=>Gt.filter(w=>!w.pathname||w.pathname===qt),[Gt,qt]),[Nt,lt]=Qo(null),Ht=Gt.length+e.styleModifications.length;gn(()=>{(Ht===0||Nt!==null&&Nt>=Ht)&<(null)},[Ht,Nt]),gn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){lt(null);return}if(e.selectedAnnotationIds.length>0){let w=e.selectedAnnotationIds[0],H=Gt.findIndex(q=>q.id===w||q.annotations.some(ye=>ye.id===w));H>=0&&H!==Nt&<(H)}},[e.selectedAnnotationIds,e.inspectedElement,Gt]);let Jt=Wn(()=>{var H;if(Ht===0)return;let w;if(Nt===null?w=0:Nt+1>=Ht?w=null:w=Nt+1,lt(w),w===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(w<Gt.length){let q=Gt[w];if(!(!q.pathname||q.pathname===qt)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:q.id,pathname:q.pathname})),window.location.href=q.pathname;return}t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:q.id}});let de=q.annotations.find(C=>C.type!=="text")||q.annotations[0];if(q.annotations.some(C=>C.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(de!=null&&de.type&&de.type!=="text"&&de.type!=="inspector"){t({type:"SET_TOOL",payload:de.type});let C=er.findIndex(le=>le.type===de.type);C>=0&&Je(C)}if(de!=null&&de.color){t({type:"SET_COLOR",payload:de.color});let C=Kt(de.color);C!==null&&_t(C)}let He=q.annotations.flatMap(C=>C.points);if(He.length===0)return;let Ie=Math.min(...He.map(C=>C.x)),je=Math.max(...He.map(C=>C.x)),Pt=Math.min(...He.map(C=>C.y)),Ft=Math.max(...He.map(C=>C.y)),un=(Ie+je)/2,S=(Pt+Ft)/2;if(window.scrollTo({left:un-window.innerWidth/2,top:S-window.innerHeight/2,behavior:"smooth"}),A&&x){let C=(H=q.annotations.find(le=>le.threadId))==null?void 0:H.threadId;C&&x(C)}}else{let q=w-Gt.length,ye=e.styleModifications[q];if(!ye)return;let de=In(ye.selector);if(!de)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:de,info:ye.element}});let ge=de.getBoundingClientRect(),He=ge.left+ge.width/2+window.scrollX,Ie=ge.top+ge.height/2+window.scrollY;window.scrollTo({left:He-window.innerWidth/2,top:Ie-window.innerHeight/2,behavior:"smooth"})}},[Gt,qt,e.styleModifications,Ht,Nt,t,Kt,A,x]);gn(()=>{if(!me)return;let w=H=>{var ge;let q=document.activeElement;for(;(ge=q==null?void 0:q.shadowRoot)!=null&&ge.activeElement;)q=q.shadowRoot.activeElement;if((q==null?void 0:q.tagName)==="INPUT"||(q==null?void 0:q.tagName)==="TEXTAREA"||q!=null&&q.isContentEditable)return;if((H.metaKey||H.ctrlKey)&&H.key==="Enter"){o&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(He=>!He.captured).length>0)&&(H.preventDefault(),on());return}if((H.metaKey||H.ctrlKey)&&(H.key==="c"||H.key==="C"||H.code==="KeyC")){let He=window.getSelection();if(He&&He.toString().length>0)return;(e.annotations.length>0||e.styleModifications.length>0)&&(H.preventDefault(),window.focus(),qn());return}if((H.metaKey||H.ctrlKey)&&(H.key==="Backspace"||H.key==="Delete")){H.preventDefault(),xt();return}if(H.metaKey||H.ctrlKey||H.altKey)return;let ye={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(H.key.toLowerCase()==="m"){H.preventDefault(),It("model");return}let de=ye[H.key.toLowerCase()];if(de){H.preventDefault();let He=er.findIndex(Ie=>Ie.type===de);He>=0&&Je(He),It(de)}};return window.addEventListener("keydown",w),()=>window.removeEventListener("keydown",w)},[me,It,qn,on,o,xt,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,X]);let nr=Na(D,I.w,I.h),go=h(f(f({},_f),nr),{borderRadius:0,padding:me?"0 8px":"0",width:me?"auto":48,height:48,gap:0,justifyContent:me?"flex-start":"center"}),Ao=Se("div",{style:di({color:r&&i?i:"rgb(0,0,0)",animated:!!r})}),ao=P===!1?"rgba(239, 68, 68, 0.4)":r&&i?i:wo.iconActive,mo=Dt(null);gn(()=>{if(!me)return;let w=mo.current;if(!w)return;let H=()=>{s==null||s(!0),nt("collapse")},q=()=>{s==null||s(!1),St()};return w.addEventListener("mouseenter",H),w.addEventListener("mouseleave",q),()=>{w.removeEventListener("mouseenter",H),w.removeEventListener("mouseleave",q)}},[me,r,s,nt,St]);let or=Dt(null);return gn(()=>{if(me)return;let w=or.current;if(!w)return;let H=w.querySelector("[data-popmelt-logo]"),q=()=>{w.style.opacity="1",!r&&H&&(H.style.fill="#000"),V==null||V()},ye=()=>{w.style.opacity=r?"1":"0.5",!r&&H&&(H.style.fill="none")};return w.addEventListener("mouseenter",q),w.addEventListener("mouseleave",ye),()=>{w.removeEventListener("mouseenter",q),w.removeEventListener("mouseleave",ye)}},[me,r,V]),me?Mt($r,{children:[Se("style",{children:`
|
|
10
|
+
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},zf={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"},js="devtools-toolbar-expanded",Ys="devtools-annotations",Js="devtools-style-modifications",Us="devtools-active-tool",wc="devtools-active-color",Cc="devtools-stroke-width",Ec="devtools-inspected-element",Vs="devtools-spacing-changes",Wf={expanded:js,annotations:Ys,styleMods:Js,spacingChanges:Vs,tool:Us,color:wc,stroke:Cc,inspected:Ec};function kc({state:e,dispatch:t,onScreenshot:n,onSendToClaude:o,hasActiveJobs:r,activeJobColor:i,onCrosshairHover:s,onClear:a,provider:l="claude",onProviderChange:d,availableProviders:c,modelIndex:p=0,modelCount:u=2,modelLabel:g="Opus 4.6",onModelChange:b,onViewThread:v,isThreadPanelOpen:A,mcpStatus:T,bridgeUrl:$,isBridgeConnected:P,packageVersion:O,bridgeVersion:w,bridgeRestartState:N="idle",bridgeRestartMessage:se,onBridgeRestart:ee,modelSelectedComponent:G,modelCanvasHoveredComponent:oe,onModelComponentHover:W,onSpacingTokenHover:Z,onModifySpacingToken:k,onDeleteSpacingToken:Ce,modelRefreshKey:Q,onModelComponentAdded:fe,onModelComponentRemoved:_,onSynthesizeRules:le,isSynthesizing:M,onMouseEnter:ue,toolbarRef:Me,snapPosition:Ne="bottom-right",onSnapPositionChange:ve}){let[We,Re]=lr(()=>typeof window!="undefined"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});hn(()=>{let C=()=>Re({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",C),()=>window.removeEventListener("resize",C)},[]);let[ge,qe]=lr(()=>typeof window=="undefined"?!1:localStorage.getItem(js)==="true"),[ft,gt]=lr(0),ln=Ht(0),K=Ht(0),ce=Ht(e.isAnnotating),Ae=Ht(!1),$e=Ht(typeof window!="undefined"?localStorage.getItem(Us):null),rt=Ht(typeof window!="undefined"?localStorage.getItem(wc):null),Je=Ht(typeof window!="undefined"?localStorage.getItem(Cc):null),[ae,X]=lr(null),ie=Ht(!1),we=Ht(null),ke=Ht(null),Tt=Ht(null),[je,tt]=lr([]),ht=Ht({x:0,y:0}),Ft=Ht(null),St=Ht(null),lt=Ht(null),ut=Vn(()=>{Ft.current=null,St.current=null,lt.current&&(clearTimeout(lt.current),lt.current=null)},[]),Yt=Vn(C=>{ke.current&&(clearTimeout(ke.current),ke.current=null),ie.current?(Ft.current=C,St.current=f({},ht.current),lt.current&&clearTimeout(lt.current),lt.current=setTimeout(()=>{Ft.current&&(X(Ft.current),ut())},300)):(we.current&&clearTimeout(we.current),we.current=setTimeout(()=>{ie.current=!0,X(C),we.current=null},500))},[ut]),yn=Vn(()=>{ut(),we.current&&(clearTimeout(we.current),we.current=null),ke.current=setTimeout(()=>{ie.current=!1,X(null)},150)},[ut]);hn(()=>{let C=Tt.current;if(!C)return;let J=()=>{ut(),ke.current&&(clearTimeout(ke.current),ke.current=null)},ne=()=>{ke.current=setTimeout(()=>{ie.current=!1,X(null)},150)};return C.addEventListener("mouseenter",J),C.addEventListener("mouseleave",ne),()=>{C.removeEventListener("mouseenter",J),C.removeEventListener("mouseleave",ne)}},[ae,ut]),hn(()=>{if(ae!=="counter"||!$)return;let C=!1;return fetch(`${$}/threads/recent?limit=5`).then(J=>J.ok?J.json():[]).then(J=>{C||tt(J)}).catch(()=>{}),()=>{C=!0}},[ae,$]);let Mn=Vn(C=>{if(ht.current={x:C.clientX,y:C.clientY},Ft.current&&St.current){let J=St.current,ne=Ff(Ne);Hf(C.clientX,C.clientY,J.x,J.y,ne.left,ne.y,ne.right,ne.y)||(X(Ft.current),ut())}},[ut,Ne]),cn=ar(()=>{let C=(c!=null?c:[]).map(J=>J==="claude"?"Claude":J==="codex"?"Codex":J==="copilot"?"Copilot":J);return{name:"AI Model",desc:C.length>1?`${C.join(" and ")} are available.`:C.length===1?`Connected to ${C[0]}.`:"No AI providers detected.",usage:C.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:C.length>1?[{key:"Click",desc:"Switch"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]:[{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]}},[c]),Xn=ar(()=>{var ne;let C=c&&c.length>0?c:["claude","codex","copilot"],J=C.indexOf(l);return(ne=C[(J>=0?J+1:0)%C.length])!=null?ne:l},[c,l]),mt=ar(()=>_f(u,p),[u,p]);nc(ge,e,Ae,!!r,Wf),hn(()=>{let C=new URLSearchParams(window.location.search);if(!C.has("popmelt"))return;let J=document.createElement("style");J.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(J);let ne=parseInt(C.get("popmelt")||"0",10)||0,ye=()=>{qe(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})};if(ne>0){let me=setTimeout(ye,ne);return()=>clearTimeout(me)}ye()},[]),hn(()=>{var ne;if(localStorage.getItem(js)==="true"&&!e.isAnnotating){if(ge||qe(!0),t({type:"SET_TOOL",payload:$e.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),rt.current&&t({type:"SET_COLOR",payload:rt.current}),Je.current){let Oe=parseFloat(Je.current);isNaN(Oe)||t({type:"SET_STROKE_WIDTH",payload:Oe})}let ye=localStorage.getItem(Ys);if(ye)try{let Oe=JSON.parse(ye);if(Array.isArray(Oe)&&Oe.length>0){for(let Lt of Oe)(Lt.status==="waiting_input"||Lt.status==="in_flight")&&(Lt.status=Lt.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:Oe}})}}catch(Oe){}let me=localStorage.getItem(Js);if(me)try{let Oe=JSON.parse(me);Array.isArray(Oe)&&Oe.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:Oe}),mi(Oe))}catch(Oe){}let Le=localStorage.getItem(Vs);if(Le)try{let Oe=JSON.parse(Le);Array.isArray(Oe)&&Oe.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:Oe})}catch(Oe){}let Ee=localStorage.getItem(Ec);if(Ee)try{let{selector:Oe,info:Lt}=JSON.parse(Ee);if(Oe){let Ut=On(Oe);if(Ut){let x=Lt||h(f({},Bn(Ut)),{selector:Oe});t({type:"SELECT_ELEMENT",payload:{el:Ut,info:x}})}}}catch(Oe){}let Ie=sessionStorage.getItem("popmelt-pending-focus");if(Ie){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:Oe}=JSON.parse(Ie);if(Oe){let Lt=ye?(ne=JSON.parse(ye))!=null?ne:[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:Oe}});let Ut=Lt.find(x=>x.id===Oe);if(Ut){let L=(Ut.groupId?Lt.filter(z=>z.groupId===Ut.groupId):[Ut]).flatMap(z=>z.points);if(L.length>0){let z=Math.min(...L.map(Ue=>Ue.x)),re=Math.max(...L.map(Ue=>Ue.x)),Te=Math.min(...L.map(Ue=>Ue.y)),ze=Math.max(...L.map(Ue=>Ue.y));window.scrollTo({left:(z+re)/2-window.innerWidth/2,top:(Te+ze)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch(Oe){}}}let J=sessionStorage.getItem("popmelt-pending-thread");if(J){sessionStorage.removeItem("popmelt-pending-thread");try{let{threadId:ye,selector:me,preview:Le}=JSON.parse(J);ye&&requestAnimationFrame(()=>{if(me)try{let Ee=document.querySelector(me);if(Ee){let Ie=Ee.getBoundingClientRect(),Oe=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:Oe,point:{x:Ie.left+Ie.width,y:Ie.top},text:Le||"[thread]",linkedSelector:me,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[Oe],threadId:ye}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[Oe],status:"resolved"}})}}catch(Ee){}v&&v(ye)})}catch(ye){}}return Ae.current=!0,()=>{Ae.current=!1}},[]);let Ve=Ht(e.styleModifications);hn(()=>{let C=Ve.current,J=e.styleModifications;C!==J&&(hi(C),mi(J),Ve.current=J)},[e.styleModifications]),hn(()=>{let C=ce.current;ce.current=e.isAnnotating,C&&!e.isAnnotating&&ge&&qe(!1)},[e.isAnnotating,ge]);let nt=Ht(ge);nt.current=ge,hn(()=>{let C=ne=>{if(ne.key==="Meta"||ne.key==="Control"){let ye=Date.now();if(ye-ln.current<300){if(K.current++,K.current>=2){if(nt.current)t({type:"SET_ANNOTATING",payload:!1}),qe(!1);else{let Ee=localStorage.getItem(Us);t({type:"SET_TOOL",payload:Ee||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),qe(!0)}K.current=0}}else K.current=1;ln.current=ye}else K.current=0},J=ne=>{ne.key!=="Meta"&&ne.key!=="Control"&&(K.current=0)};return window.addEventListener("keydown",C),window.addEventListener("keyup",J),()=>{window.removeEventListener("keydown",C),window.removeEventListener("keyup",J)}},[t]);let dn=Vn(C=>{ut(),t({type:"SET_TOOL",payload:C}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),ie.current=!1,X(null),we.current&&(clearTimeout(we.current),we.current=null),ke.current&&(clearTimeout(ke.current),ke.current=null)},[t,e.isAnnotating,ut]),Kt=Vn(async()=>{window.focus(),await n()},[n]),In=Vn(async()=>{o&&await o()},[o]),mo=Vn(()=>{t({type:"SET_ANNOTATING",payload:!1}),qe(!1)},[t]),io=Vn(()=>{hi(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(C=>C.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(Ys),localStorage.removeItem(Js),localStorage.removeItem(Vs),Kn(null),a==null||a()},[t,e.styleModifications,a]),[nn,wn]=lr(()=>{if(rt.current){let C=rt.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(C!=null&&C[1])return parseFloat(C[1])}return 29}),bn=Ht(null),H=Ht(null),Pe=Ht(!1),Be=Vn(C=>{let J=C.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return J&&J[1]?parseFloat(J[1]):null},[]);hn(()=>{Pe.current=!0;let C=`oklch(0.628 0.258 ${nn})`;t({type:"SET_COLOR",payload:C}),requestAnimationFrame(()=>{Pe.current=!1})},[nn,t]),hn(()=>{if(Pe.current)return;let C=Be(e.activeColor);C!==null&&Math.abs(C-nn)>.5&&wn(C)},[e.activeColor,Be,nn]);let qt=Ht(null);hn(()=>{if(r&&i){let C=Be(i);C!==null&&Math.abs(C-nn)>.5&&(qt.current===null&&(qt.current=nn),wn(C))}else qt.current!==null&&(wn(qt.current),qt.current=null)},[r,i,Be]);let Ot=e.annotations.length>0;hn(()=>{let C=H.current;if(!C||!Ot)return;let J=ne=>{ne.preventDefault(),ne.stopPropagation();let ye=ne.deltaY>0?-1:1,me=((nn+ye)%360+360)%360,Le=`oklch(0.628 0.258 ${me})`;wn(me),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:Le}})};return C.addEventListener("wheel",J,{passive:!1}),()=>C.removeEventListener("wheel",J)},[Ot,e.selectedAnnotationIds,e.lastSelectedId,nn,t]);let Rn=Ht(!1),un=Ht(0);hn(()=>{let C=e.annotations.some(ye=>!ye.status||ye.status==="pending"),J=Rn.current;Rn.current=C;let ne=un.current===0&&e.annotations.length>0;if(un.current=e.annotations.length,(J&&!C||ne&&!C)&&e.annotations.length>0){let ye=e.annotations.map(me=>Be(me.color)).filter(me=>me!==null);if(ye.length>0){let me=0,Le=-1;for(let Ee=0;Ee<360;Ee++){let Ie=Math.min(...ye.map(Oe=>{let Lt=Math.abs(Ee-Oe);return Math.min(Lt,360-Lt)}));Ie>Le&&(Le=Ie,me=Ee)}wn(me)}}},[e.annotations,Be]);let _t=Ht(!1),Co=Vn(()=>{_t.current=!1,bn.current=setTimeout(()=>{_t.current=!0,wn(29)},500)},[]),Ln=Vn(()=>{bn.current&&(clearTimeout(bn.current),bn.current=null)},[]);hn(()=>()=>{bn.current&&clearTimeout(bn.current),lt.current&&clearTimeout(lt.current)},[]);let kn=yr(),Mt=ar(()=>e.annotations.filter(C=>!C.pathname||C.pathname===kn),[e.annotations,kn]),so=ar(()=>vi(e.annotations),[e.annotations]),Jt=ar(()=>{let C=[],J=new Set,ne=[...e.annotations].sort((ye,me)=>ye.timestamp-me.timestamp);for(let ye of ne)if(!so.has(ye))if(ye.groupId){if(!J.has(ye.groupId)){J.add(ye.groupId);let me=e.annotations.filter(Ie=>Ie.groupId===ye.groupId&&!so.has(Ie)),Le=me.find(Ie=>Ie.type!=="text")||me[0],Ee=Math.min(...me.map(Ie=>Ie.timestamp));C.push({id:Le.id,pathname:ye.pathname,annotations:me,timestamp:Ee})}}else C.push({id:ye.id,pathname:ye.pathname,annotations:[ye],timestamp:ye.timestamp});return C},[e.annotations,so]),ur=ar(()=>Jt.filter(C=>!C.pathname||C.pathname===kn),[Jt,kn]),[Gt,Kn]=lr(null),_n=Jt.length+e.styleModifications.length;hn(()=>{(_n===0||Gt!==null&&Gt>=_n)&&Kn(null)},[_n,Gt]),hn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){Kn(null);return}if(e.selectedAnnotationIds.length>0){let C=e.selectedAnnotationIds[0],J=Jt.findIndex(ne=>ne.id===C||ne.annotations.some(ye=>ye.id===C));J>=0&&J!==Gt&&Kn(J)}},[e.selectedAnnotationIds,e.inspectedElement,Jt]);let ho=Vn(()=>{var J;if(_n===0)return;let C;if(Gt===null?C=0:Gt+1>=_n?C=null:C=Gt+1,Kn(C),C===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(C<Jt.length){let ne=Jt[C];if(!(!ne.pathname||ne.pathname===kn)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:ne.id,pathname:ne.pathname})),window.location.href=ne.pathname;return}t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:ne.id}});let me=ne.annotations.find(z=>z.type!=="text")||ne.annotations[0];if(ne.annotations.some(z=>z.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(me!=null&&me.type&&me.type!=="text"&&me.type!=="inspector"){t({type:"SET_TOOL",payload:me.type});let z=cr.findIndex(re=>re.type===me.type);z>=0&>(z)}if(me!=null&&me.color){t({type:"SET_COLOR",payload:me.color});let z=Be(me.color);z!==null&&wn(z)}let Ee=ne.annotations.flatMap(z=>z.points);if(Ee.length===0)return;let Ie=Math.min(...Ee.map(z=>z.x)),Oe=Math.max(...Ee.map(z=>z.x)),Lt=Math.min(...Ee.map(z=>z.y)),Ut=Math.max(...Ee.map(z=>z.y)),x=(Ie+Oe)/2,L=(Lt+Ut)/2;if(window.scrollTo({left:x-window.innerWidth/2,top:L-window.innerHeight/2,behavior:"smooth"}),A&&v){let z=(J=ne.annotations.find(re=>re.threadId))==null?void 0:J.threadId;z&&v(z)}}else{let ne=C-Jt.length,ye=e.styleModifications[ne];if(!ye)return;let me=On(ye.selector);if(!me)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:me,info:ye.element}});let Le=me.getBoundingClientRect(),Ee=Le.left+Le.width/2+window.scrollX,Ie=Le.top+Le.height/2+window.scrollY;window.scrollTo({left:Ee-window.innerWidth/2,top:Ie-window.innerHeight/2,behavior:"smooth"})}},[Jt,kn,e.styleModifications,_n,Gt,t,Be,A,v]);hn(()=>{if(!ge)return;let C=J=>{var Le;let ne=document.activeElement;for(;(Le=ne==null?void 0:ne.shadowRoot)!=null&&Le.activeElement;)ne=ne.shadowRoot.activeElement;if((ne==null?void 0:ne.tagName)==="INPUT"||(ne==null?void 0:ne.tagName)==="TEXTAREA"||ne!=null&&ne.isContentEditable)return;if((J.metaKey||J.ctrlKey)&&J.key==="Enter"){o&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(Ee=>!Ee.captured).length>0)&&(J.preventDefault(),In());return}if((J.metaKey||J.ctrlKey)&&(J.key==="c"||J.key==="C"||J.code==="KeyC")){let Ee=window.getSelection();if(Ee&&Ee.toString().length>0)return;(e.annotations.length>0||e.styleModifications.length>0)&&(J.preventDefault(),window.focus(),Kt());return}if((J.metaKey||J.ctrlKey)&&(J.key==="Backspace"||J.key==="Delete")){J.preventDefault(),io();return}if(J.metaKey||J.ctrlKey||J.altKey)return;let ye={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(J.key.toLowerCase()==="m"){J.preventDefault(),dn("model");return}let me=ye[J.key.toLowerCase()];if(me){J.preventDefault();let Ee=cr.findIndex(Ie=>Ie.type===me);Ee>=0&>(Ee),dn(me)}};return window.addEventListener("keydown",C),()=>window.removeEventListener("keydown",C)},[ge,dn,Kt,In,o,io,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,ae]);let Nr=Wa(Ne,We.w,We.h),wt=h(f(f({},zf),Nr),{borderRadius:0,padding:ge?"0 8px":"0",width:ge?"auto":48,height:48,gap:0,justifyContent:ge?"flex-start":"center"}),Vt=xe("div",{style:Si({color:r&&i?i:"rgb(0,0,0)",animated:!!r})}),Ct=P===!1?"rgba(239, 68, 68, 0.4)":r&&i?i:oo.iconActive,qn=!!(O&&w&&O!==w),zn=N==="restarting"||!ee&&!$,Nn=N==="error"?"#dc2626":N==="ok"?oo.iconDefault:qn?"#b45309":oo.iconDefault,Eo=N==="restarting"?"Restarting":N==="error"?"Restart failed":N==="ok"?"Restarted":qn?"Update bridge":null,on=se!=null?se:qn?`Bridge ${w} is older than package ${O}. Restart bridge.`:w?`Bridge ${w}. Restart bridge.`:"Restart bridge",pr=Ht(null);hn(()=>{if(!ge)return;let C=pr.current;if(!C)return;let J=()=>{s==null||s(!0),Yt("collapse")},ne=()=>{s==null||s(!1),yn()};return C.addEventListener("mouseenter",J),C.addEventListener("mouseleave",ne),()=>{C.removeEventListener("mouseenter",J),C.removeEventListener("mouseleave",ne)}},[ge,r,s,Yt,yn]);let $o=Ht(null);return hn(()=>{if(ge)return;let C=$o.current;if(!C)return;let J=C.querySelector("[data-popmelt-logo]"),ne=()=>{C.style.opacity="1",!r&&J&&(J.style.fill="#000"),ue==null||ue()},ye=()=>{C.style.opacity=r?"1":"0.5",!r&&J&&(J.style.fill="none")};return C.addEventListener("mouseenter",ne),C.addEventListener("mouseleave",ye),()=>{C.removeEventListener("mouseenter",ne),C.removeEventListener("mouseleave",ye)}},[ge,r,ue]),ge?Pt(Xr,{children:[xe("style",{children:`
|
|
11
11
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
12
12
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
13
|
-
`}),
|
|
13
|
+
`}),xe("div",{id:"devtools-scrim",style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.06)",zIndex:9997,pointerEvents:"none"}}),!A&&(ae==="model"||e.activeTool==="model")&&xe(bc,{bridgeUrl:$,selectedComponent:G,hoveredComponent:oe,onComponentHover:W,onSpacingTokenHover:Z,onModifySpacingToken:k,onDeleteSpacingToken:Ce,modelRefreshKey:Q,onComponentAdded:fe,onComponentRemoved:_,onSynthesizeRules:le,isSynthesizing:M,snapPosition:Ne,onMouseEnter:()=>{ut(),ke.current&&(clearTimeout(ke.current),ke.current=null)},onMouseLeave:e.activeTool==="model"?void 0:yn}),ae&&ae!=="model"&&(ae==="provider"||Sc[ae])&&(()=>{let C=ae==="provider"?cn:Sc[ae];return Pt("div",{ref:Tt,style:f(h(f(h(f({},Ga(Ne,We.w,We.h)),{width:300,backgroundColor:"#eaeaea"}),Mr),{boxSizing:"content-box",zIndex:10001,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:12,color:"#1f2937",padding:12}),ae!=="collapse"&&ae!=="counter"?{pointerEvents:"none"}:{}),children:[ae==="collapse"&&xe("div",{style:{marginBottom:10,width:"fit-content",color:oo.iconDefault},children:xe("svg",{width:"48",height:"48",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:xe("path",{d:"M11.1406 31.2559C11.2407 31.3875 11.351 31.5132 11.4697 31.6338L3.10449 40H2.39746L11.1406 31.2559ZM8.05371 40H7.34668L14.5498 32.7959C14.8554 32.7706 15.1541 32.7063 15.4414 32.6113L8.05371 40ZM18.2197 34.0762C18.3788 34.1569 18.5445 34.2272 18.7168 34.2861L13.0039 40H12.2969L18.2197 34.0762ZM17.9531 40H17.2461L26.1338 31.1113C26.438 31.0829 26.7427 31.0148 27.0439 30.9082L17.9531 40ZM40 22.9023L22.9033 40H22.1963L40 22.1953V22.9023ZM40 27.8525L27.8525 40H27.1455L40 27.1455V27.8525ZM40 32.8027L32.8027 40H32.0957L40 32.0957V32.8027ZM40 37.752L37.752 40H37.0449L40 37.0449V37.752ZM9.06543 28.3809C9.25255 28.4332 9.45183 28.4715 9.66504 28.4883L0 38.1543V37.4473L9.06543 28.3809ZM6.59375 25.9023C6.65822 26.0626 6.73171 26.2263 6.81445 26.3896L0 33.2041V32.4971L6.59375 25.9023ZM20.25 8.00293H20.249C21.5098 8.0286 22.7219 8.25094 23.8584 8.63672L23.8604 8.63574C23.8961 8.64787 23.9312 8.66145 23.9668 8.67383C24.0611 8.70686 24.1548 8.74106 24.248 8.77637C24.2915 8.79273 24.3357 8.80727 24.3789 8.82422L24.376 8.82617C27.6145 10.0955 30.1646 12.7301 31.3213 16.0234L31.3232 16.0225C31.3327 16.0493 31.3404 16.0766 31.3496 16.1035C31.7691 17.3256 32 18.6356 32 20C32 20.8726 31.9366 21.6706 31.7598 22.4902L31.7197 22.6328C31.6412 23.0066 31.5136 23.6108 31.3408 24.2217L31.3398 24.2246C31.2967 24.377 31.251 24.5299 31.2021 24.6797C30.9215 25.5403 30.5473 26.2998 30.0879 26.2998C29.7613 26.2996 29.5995 25.9674 29.4316 25.6221C29.2501 25.2487 29.0614 24.8605 28.6484 24.8604C27.8532 24.8604 27.2081 25.5046 27.208 26.2998V27.0771C27.2079 27.6079 26.9661 28.112 26.5205 28.4004C25.9146 28.7925 25.2357 28.6462 24.7959 28.2061L24.7949 28.208C24.7897 28.2028 24.7854 28.1967 24.7803 28.1914C24.7654 28.1761 24.7507 28.1606 24.7363 28.1445C24.7105 28.1156 24.6858 28.0857 24.6621 28.0547C24.6461 28.0339 24.6302 28.013 24.6152 27.9912C24.5931 27.9591 24.5726 27.9257 24.5527 27.8916C24.5392 27.8685 24.5261 27.8452 24.5137 27.8213C24.5093 27.8128 24.5043 27.8045 24.5 27.7959L24.501 27.7939C24.3932 27.5763 24.3282 27.3276 24.3281 27.0576V26.2998C24.328 25.5993 23.8278 25.0158 23.165 24.8867V24.8877C23.0752 24.8702 22.9826 24.8604 22.8877 24.8604C22.8446 24.8604 22.8019 24.8624 22.7598 24.8662C22.0247 24.9312 21.4483 25.5479 21.4482 26.2998C21.4482 26.9127 21.4608 27.5305 21.4736 28.1494L21.4951 29.3135C21.5 29.7013 21.5015 30.089 21.4971 30.4756C21.4874 31.3103 20.8426 32 20.0078 32C19.1732 31.9998 18.5292 31.3102 18.5195 30.4756C18.5159 30.1613 18.5176 29.8464 18.5205 29.5312V29.5322C18.5212 29.4593 18.5206 29.3864 18.5215 29.3135L18.5303 28.8154V28.8145C18.5343 28.5927 18.5384 28.371 18.543 28.1494C18.5558 27.5305 18.5684 28.1129 18.5684 27.5C18.5684 26.7047 17.9232 26.0596 17.1279 26.0596C16.907 26.0596 16.6978 26.1103 16.5107 26.1992C16.2161 26.3393 15.9767 26.5769 15.834 26.8701C15.8269 26.8846 15.8201 26.8993 15.8135 26.9141C15.7821 26.9845 15.7562 27.0579 15.7363 27.1338C15.7243 27.1798 15.7155 27.2267 15.708 27.2744C15.7012 27.3175 15.6953 27.361 15.6924 27.4053C15.6903 27.4366 15.6885 27.4681 15.6885 27.5V28.7383C15.6883 29.9234 14.4911 30.7248 13.4961 30.0811C13.0505 29.7926 12.8086 29.2886 12.8086 28.7578V26.2998C12.8086 25.9737 12.6984 25.674 12.5156 25.4326C12.4437 25.3381 12.3612 25.2521 12.2686 25.1777V25.1768C12.0219 24.9788 11.709 24.8604 11.3682 24.8604C10.9892 24.8604 10.8622 24.8872 10.7295 25.2295C10.5837 25.6055 10.4302 26 9.92773 26C9.33081 25.9996 8.95963 25.2403 8.71484 24.3799C8.5591 23.8325 8.45907 23.571 8.3623 23.0107C8.3501 22.9401 8.33284 22.8403 8.31738 22.7529C8.12812 21.9466 8.02043 21.1089 8.00293 20.249V20.25L8 20C8 19.8617 8.00317 19.724 8.00781 19.5869C8.00837 19.5703 8.00816 19.5537 8.00879 19.5371L8.00977 19.5352C8.0998 17.1716 8.87444 14.9844 10.1396 13.1631C10.1488 13.1499 10.1587 13.1372 10.168 13.124C12.255 10.1453 15.6582 8.15745 19.5352 8.00977L19.5371 8.00879C19.5537 8.00816 19.5703 8.00837 19.5869 8.00781C19.724 8.00317 19.8617 8 20 8L20.25 8.00293ZM5.72266 22.5303L0 28.2539V27.5469L5.62793 21.918C5.6553 22.1234 5.6868 22.3275 5.72266 22.5303ZM16.2637 26.8398L16.2617 26.8408C16.2784 26.8013 16.2954 26.7627 16.3135 26.7256C16.3203 26.7116 16.3275 26.6982 16.334 26.6855C16.3125 26.7277 16.289 26.7808 16.2637 26.8398ZM40 17.9531L33.9854 23.9668C34.051 23.6832 34.1043 23.4321 34.1445 23.2412L34.1641 23.1748L34.1865 23.0967L34.1963 23.0488L40 17.2461V17.9531ZM5.87012 16.7266C5.80321 17.0165 5.74649 17.3101 5.69727 17.6064L0 23.3047V22.5977L5.87012 16.7266ZM40 13.0039L34.4297 18.5732C34.409 18.3615 34.3832 18.1513 34.3535 17.9424L40 12.2969V13.0039ZM0 18.3555V17.6484L17.6484 0H18.3555L0 18.3555ZM40 8.05371L33.458 14.5947C33.3909 14.4277 33.3202 14.2625 33.2471 14.0986L40 7.34668V8.05371ZM0 13.4053V12.6982L12.6992 0H13.4062L0 13.4053ZM40 3.10352L31.6865 11.416C31.5868 11.2805 31.4851 11.1465 31.3809 11.0146L40 2.39648V3.10352ZM29.2881 8.86523C29.1595 8.75783 29.0288 8.65278 28.8965 8.5498L37.4473 0H38.1543L29.2881 8.86523ZM0 8.45508V7.74805L7.74805 0H8.45508L0 8.45508ZM26.2783 6.92578C26.1183 6.84878 25.9562 6.77534 25.793 6.7041L32.498 0H33.2051L26.2783 6.92578ZM17.6064 5.69727C17.3101 5.74649 17.0165 5.80321 16.7266 5.87012L22.5977 0H23.3047L17.6064 5.69727ZM22.5322 5.7207C22.3295 5.685 22.1254 5.65316 21.9199 5.62598L27.5469 0H28.2539L22.5322 5.7207ZM0 3.50586V2.79883L2.79883 0H3.50586L0 3.50586Z",fill:"currentColor"})})}),Pt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[xe("span",{children:C.name}),C.keys[0]&&xe("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:C.keys[0].key})]}),xe("div",{style:{color:"#6b7280",lineHeight:1.5,marginBottom:ae==="collapse"?0:10},children:C.desc.split(`
|
|
14
14
|
|
|
15
|
-
`).map((H,q)=>Se("p",{style:{margin:0,marginTop:q>0?8:0},children:H},q))}),w.usage.map((H,q)=>Mt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[Se("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),Se("span",{children:H})]},q)),X==="collapse"&&ae&&Mt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8},children:[Se("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:6,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Position"}),Se("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:3,width:"fit-content"},children:Wa.map(H=>{let q=H===D;return Se("button",{type:"button",onClick:()=>{Te(null),Oe.current=!1,ze(),ae(H)},title:H,style:{width:24,height:16,border:"none",cursor:"pointer",padding:0,backgroundColor:q?"#1f2937":"rgba(0,0,0,0.08)",transition:"background-color 100ms ease"},onMouseEnter:ye=>{q||(ye.currentTarget.style.backgroundColor="rgba(0,0,0,0.15)")},onMouseLeave:ye=>{q||(ye.currentTarget.style.backgroundColor="rgba(0,0,0,0.08)")}},H)})})]}),X==="collapse"&&T&&Object.keys(T).length>0&&(()=>{let H=Object.entries(T).filter(([,ge])=>ge.found&&!ge.disabled).map(([ge])=>ge.charAt(0).toUpperCase()+ge.slice(1)),q=Object.entries(T).filter(([,ge])=>!ge.found).map(([ge])=>ge);if(H.length===0&&q.length===0)return null;let ye=q.map(ge=>ge.charAt(0).toUpperCase()+ge.slice(1)),de=[...H,...ye];return Mt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[Se("span",{style:{width:6,height:6,borderRadius:"50%",backgroundColor:H.length>0?"#22c55e":"rgba(0,0,0,0.2)",flexShrink:0}}),H.length>0?Mt("span",{style:{color:"#6b7280"},children:["Registry available in ",de.join(", ")]}):q.length>0?Mt("span",{style:{color:"#6b7280"},children:["Registry available in ",ye.join(", ")]}):null]})})(),w.keys.length>1&&Se("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:w.keys.slice(1).map((H,q)=>Mt("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:H.accent?"#fff":"#6b7280"},children:[Se("code",{style:{fontSize:10,backgroundColor:H.accent?e.activeColor:"rgba(0,0,0,0.06)",color:H.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:H.key}),Se("span",{style:{color:H.accent?e.activeColor:void 0,fontWeight:H.accent?600:void 0},children:H.desc})]},q))}),X==="counter"&&Gt.length>0&&(()=>{let H=Se("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:Se("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Active"})}),q=new Map;for(let ge of Gt){let He=ge.pathname||qt;q.has(He)||q.set(He,[]),q.get(He).push(ge)}let ye=[...q.entries()],de=ye.length>1;return Mt("div",{children:[H,Se("div",{style:{maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:ye.map(([ge,He])=>Se("div",{style:{marginBottom:de?4:0},children:He.map(Ie=>{var le,ce,Ae,ke;let je=Ie.annotations.find(Ue=>Ue.type==="text"&&Ue.text),Pt=(je==null?void 0:je.text)||`[${(ce=(le=Ie.annotations[0])==null?void 0:le.type)!=null?ce:"annotation"}]`,Ft=e.selectedAnnotationIds.includes(Ie.id),un=Gt.indexOf(Ie),S=un+1,C=(ke=(Ae=Ie.annotations[0])==null?void 0:Ae.color)!=null?ke:e.activeColor;return Mt("div",{onClick:()=>{var Ye;if(!(!Ie.pathname||Ie.pathname===qt)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:Ie.id,pathname:Ie.pathname})),window.location.href=Ie.pathname;return}if(lt(un),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:Ie.id}}),x){let Et=(Ye=Ie.annotations.find(wt=>wt.threadId))==null?void 0:Ye.threadId;Et&&x(Et)}Oe.current=!1,Te(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:Ue=>{let Ye=Ue.currentTarget.querySelector("[data-route-badge]");Ye&&(Ye.style.backgroundColor=C,Ye.style.color="#fff")},onMouseLeave:Ue=>{if(Ft)return;let Ye=Ue.currentTarget.querySelector("[data-route-badge]");Ye&&(Ye.style.backgroundColor="rgba(0,0,0,0.06)",Ye.style.color="#6b7280")},children:[Mt("code",{"data-route-badge":!0,style:{fontSize:10,color:Ft?"#fff":"#6b7280",backgroundColor:Ft?C:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[S,". ",de?ge:""]}),Se("span",{style:{fontSize:11,color:Ft?"#1f2937":"#6b7280",fontWeight:Ft?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Pt})]},Ie.id)})},ge))})]})})(),X==="counter"&&(()=>{let H=new Set(Gt.flatMap(de=>de.annotations.map(ge=>ge.threadId).filter(Boolean))),q=te.filter(de=>!H.has(de.id));if(q.length===0)return null;let ye=de=>{let ge=Math.floor((Date.now()-de)/1e3);if(ge<60)return"now";let He=Math.floor(ge/60);if(He<60)return`${He}m`;let Ie=Math.floor(He/60);return Ie<24?`${Ie}h`:`${Math.floor(Ie/24)}d`};return Mt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:[Se("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Recent"}),q.map(de=>Mt("div",{onClick:()=>{let ge=de.elementIdentifiers[0];if(ge){let He=ge.indexOf(":"),Ie=He>0&&ge[0]==="/",je=Ie?ge.slice(0,He):void 0,Pt=Ie?ge.slice(He+1):ge;if(!(!je||je===qt)){sessionStorage.setItem("popmelt-pending-thread",JSON.stringify({threadId:de.id,selector:Pt,preview:de.preview})),window.location.href=je;return}try{let un=document.querySelector(Pt);if(un){let S=un.getBoundingClientRect(),C=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:C,point:{x:S.left+S.width,y:S.top},text:de.preview,linkedSelector:Pt,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[C],threadId:de.id}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[C],status:"resolved"}})}}catch(un){}}x&&x(de.id),Oe.current=!1,Te(null)},style:{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:8,padding:"2px 0",cursor:"pointer",color:"#6b7280",fontSize:11},onMouseEnter:ge=>{ge.currentTarget.style.color="#1f2937"},onMouseLeave:ge=>{ge.currentTarget.style.color="#6b7280"},children:[Se("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:de.preview}),Se("span",{style:{flexShrink:0,fontSize:10,color:"#9ca3af"},children:ye(de.createdAt)})]},de.id))]})})()]})})(),Mt("div",{ref:w=>{fe&&(fe.current=w)},id:"devtools-toolbar",style:go,onMouseEnter:V,onMouseMove:Ke,children:[Ao,Mt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[Se("span",{onMouseEnter:()=>nt("inspector"),onMouseLeave:St,children:Se(Lo,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>It("inspector"),children:Se(kf,{size:20,strokeWidth:1.5})})}),Se("span",{onMouseEnter:()=>nt("hand"),onMouseLeave:St,children:Se(Lo,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>It("hand"),children:Mt("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[Se(Ef,{size:20,strokeWidth:1.5}),e.styleModifications.filter(w=>!w.captured).length>0&&Se("div",{style:{position:"absolute",top:-7,right:-9,minWidth:14,height:14,borderRadius:0,backgroundColor:e.activeColor,color:"#fff",fontSize:9,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 2px",lineHeight:1},children:e.styleModifications.filter(w=>!w.captured).length})]})})}),(()=>{let w=er[we],H=w.icon,q=e.isAnnotating&&Pf.has(e.activeTool);return Se("span",{onMouseEnter:()=>nt(w.type),onMouseLeave:St,children:Mt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[Se(Lo,{active:q,siblingActive:e.isAnnotating,onClick:()=>It(w.type),children:Se(H,{size:20,strokeWidth:1.5})}),Se("button",{type:"button",onClick:()=>{let ye=(we+1)%er.length;Je(ye),It(er[ye].type)},title:"Cycle shape tool",style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2,width:12,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 2px",opacity:e.isAnnotating&&!q?.5:1,transition:"opacity 150ms ease"},children:er.map((ye,de)=>Se("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:de===we?wo.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},de))})]})})})(),Df.map(({type:w,icon:H,label:q,shortcut:ye})=>Se("span",{onMouseEnter:()=>nt(w),onMouseLeave:St,children:Se(Lo,{active:e.isAnnotating&&e.activeTool===w,siblingActive:e.isAnnotating,onClick:()=>It(w),children:Se(H,{size:20,strokeWidth:1.5})})},w)),Se("span",{onMouseEnter:()=>nt("model"),onMouseLeave:St,children:Se(Lo,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>It("model"),children:Se(Cf,{size:17,strokeWidth:1.5})})})]}),Se(gc,{}),Mt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(Gt.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(w=>!w.captured).length>0)&&(()=>{var de;let w=Nt!==null&&Nt<Gt.length?Gt[Nt]:null,H=e.annotations.length>0&&e.annotations.every(ge=>ge.status&&ge.status!=="pending"),q=Nt!==null?(de=w==null?void 0:w.annotations.some(ge=>ge.status&&ge.status!=="pending"))!=null?de:!1:H,ye=`oklch(0.628 0.258 ${rn})`;return Se("span",{onMouseEnter:()=>nt("counter"),onMouseLeave:St,children:Se("button",{ref:Nn,type:"button",onClick:()=>{if(Ge.current){Ge.current=!1;return}Jt()},onMouseDown:En,onMouseUp:At,onMouseLeave:At,title:"",style:{display:"flex",alignItems:"center",justifyContent:"center",gap:4,minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:q&&Nt===null?"#999999":ye,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let ge=Gt.length+e.styleModifications.length+e.spacingTokenChanges.filter(Ie=>!Ie.captured).length;if(Nt!==null)return Mt($r,{children:[Nt+1,Mt("span",{style:{opacity:.4,display:"flex",gap:4},children:[Se("span",{children:"/"}),Se("span",{children:ge})]})]});let He=Pn.length+e.styleModifications.length+e.spacingTokenChanges.filter(Ie=>!Ie.captured).length;return ge>He?Mt($r,{children:[He,Mt("span",{style:{opacity:.4,display:"flex",gap:4},children:[Se("span",{children:"/"}),Se("span",{children:ge})]})]}):ge})()})})})(),(e.annotations.length>0||e.styleModifications.length>0)&&Se("span",{onMouseEnter:()=>nt("clear"),onMouseLeave:St,children:Se(Lo,{siblingActive:e.isAnnotating,onClick:xt,title:"Clear all (\u2318\u232B)",children:Se(Lf,{size:17,strokeWidth:1.5})})}),d&&Mt($r,{children:[Se("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),Se("span",{onMouseEnter:()=>nt("provider"),onMouseLeave:St,style:{display:"contents"},children:Mt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[Se(Lo,{onClick:()=>d(Rt),children:Se(Fr,{provider:l})}),Mt("button",{type:"button",onClick:()=>{let w=(p+1)%u;b==null||b(w)},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:wo.iconDefault,whiteSpace:"nowrap"},children:[Se("span",{children:g}),Se("span",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:2},children:_n.map(w=>Se("div",{style:{width:w.overflow?2:3,height:w.overflow?2:3,borderRadius:"50%",backgroundColor:w.active?wo.iconDefault:"rgba(0,0,0,0.2)",opacity:w.overflow?.65:1,transition:"background-color 150ms ease, opacity 150ms ease"}},w.key))})]})]})})]}),Se("div",{ref:mo,style:{display:"inline-flex",cursor:"pointer"},children:Se("button",{type:"button",onClick:Zn,title:"Collapse (\u2318\u2318)",style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,border:"none",background:"none",padding:0,cursor:"inherit"},children:Se("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:ao,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:Se("path",{d:"M20.25 8.00293H20.249C21.5098 8.0286 22.7219 8.25094 23.8584 8.63672L23.8604 8.63574C23.8961 8.64787 23.9312 8.66145 23.9668 8.67383C24.0611 8.70686 24.1548 8.74106 24.248 8.77637C24.2915 8.79273 24.3357 8.80727 24.3789 8.82422L24.376 8.82617C27.6145 10.0955 30.1646 12.7301 31.3213 16.0234L31.3232 16.0225C31.3327 16.0493 31.3404 16.0766 31.3496 16.1035C31.7691 17.3256 32 18.6356 32 20C32 20.8726 31.9366 21.6706 31.7598 22.4902L31.7197 22.6328C31.6412 23.0066 31.5136 23.6108 31.3408 24.2217L31.3398 24.2246C31.2967 24.377 31.251 24.5299 31.2021 24.6797C30.9215 25.5403 30.5473 26.2998 30.0879 26.2998C29.7613 26.2996 29.5995 25.9674 29.4316 25.6221C29.2501 25.2487 29.0614 24.8605 28.6484 24.8604C27.8532 24.8604 27.2081 25.5046 27.208 26.2998V27.0771C27.2079 27.6079 26.9661 28.112 26.5205 28.4004C25.9146 28.7925 25.2357 28.6462 24.7959 28.2061L24.7949 28.208C24.7897 28.2028 24.7854 28.1967 24.7803 28.1914C24.7654 28.1761 24.7507 28.1606 24.7363 28.1445C24.7105 28.1156 24.6858 28.0857 24.6621 28.0547C24.6461 28.0339 24.6302 28.013 24.6152 27.9912C24.5931 27.9591 24.5726 27.9257 24.5527 27.8916C24.5392 27.8685 24.5261 27.8452 24.5137 27.8213C24.5093 27.8128 24.5043 27.8045 24.5 27.7959L24.501 27.7939C24.3932 27.5763 24.3282 27.3276 24.3281 27.0576V26.2998C24.328 25.5993 23.8278 25.0158 23.165 24.8867V24.8877C23.0752 24.8702 22.9826 24.8604 22.8877 24.8604C22.8446 24.8604 22.8019 24.8624 22.7598 24.8662C22.0247 24.9312 21.4483 25.5479 21.4482 26.2998C21.4482 26.9127 21.4608 27.5305 21.4736 28.1494L21.4951 29.3135C21.5 29.7013 21.5015 30.089 21.4971 30.4756C21.4874 31.3103 20.8426 32 20.0078 32C19.1732 31.9998 18.5292 31.3102 18.5195 30.4756C18.5159 30.1613 18.5176 29.8464 18.5205 29.5312V29.5322C18.5212 29.4593 18.5206 29.3864 18.5215 29.3135L18.5303 28.8154V28.8145C18.5343 28.5927 18.5384 28.371 18.543 28.1494C18.5558 27.5305 18.5684 28.1129 18.5684 27.5C18.5684 26.7047 17.9232 26.0596 17.1279 26.0596C16.907 26.0596 16.6978 26.1103 16.5107 26.1992C16.2161 26.3393 15.9767 26.5769 15.834 26.8701C15.8269 26.8846 15.8201 26.8993 15.8135 26.9141C15.7821 26.9845 15.7562 27.0579 15.7363 27.1338C15.7243 27.1798 15.7155 27.2267 15.708 27.2744C15.7012 27.3175 15.6953 27.361 15.6924 27.4053C15.6903 27.4366 15.6885 27.4681 15.6885 27.5V28.7383C15.6883 29.9234 14.4911 30.7248 13.4961 30.0811C13.0505 29.7926 12.8086 29.2886 12.8086 28.7578V26.2998C12.8086 25.9737 12.6984 25.674 12.5156 25.4326C12.4437 25.3381 12.3612 25.2521 12.2686 25.1777V25.1768C12.0219 24.9788 11.709 24.8604 11.3682 24.8604C10.9892 24.8604 10.8622 24.8872 10.7295 25.2295C10.5837 25.6055 10.4302 26 9.92773 26C9.33081 25.9996 8.95963 25.2403 8.71484 24.3799C8.5591 23.8325 8.45907 23.571 8.3623 23.0107C8.3501 22.9401 8.33284 22.8403 8.31738 22.7529C8.12812 21.9466 8.02043 21.1089 8.00293 20.249V20.25L8 20C8 19.8617 8.00317 19.724 8.00781 19.5869C8.00837 19.5703 8.00816 19.5537 8.00879 19.5371L8.00977 19.5352C8.0998 17.1716 8.87444 14.9844 10.1396 13.1631C10.1488 13.1499 10.1587 13.1372 10.168 13.124C12.255 10.1453 15.6582 8.15745 19.5352 8.00977L19.5371 8.00879C19.5537 8.00816 19.5703 8.00837 19.5869 8.00781C19.724 8.00317 19.8617 8 20 8L20.25 8.00293Z"})})})})]})]})]}):Mt($r,{children:[Se("style",{children:`
|
|
15
|
+
`).map((J,ne)=>xe("p",{style:{margin:0,marginTop:ne>0?8:0},children:J},ne))}),C.usage.map((J,ne)=>Pt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[xe("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),xe("span",{children:J})]},ne)),ae==="collapse"&&ve&&Pt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8},children:[xe("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:6,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Position"}),xe("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:3,width:"fit-content"},children:Ua.map(J=>{let ne=J===Ne;return xe("button",{type:"button",onClick:()=>{X(null),ie.current=!1,ut(),ve(J)},title:J,style:{width:24,height:16,border:"none",cursor:"pointer",padding:0,backgroundColor:ne?"#1f2937":"rgba(0,0,0,0.08)",transition:"background-color 100ms ease"},onMouseEnter:ye=>{ne||(ye.currentTarget.style.backgroundColor="rgba(0,0,0,0.15)")},onMouseLeave:ye=>{ne||(ye.currentTarget.style.backgroundColor="rgba(0,0,0,0.08)")}},J)})})]}),ae==="collapse"&&(()=>{let J=Object.entries(T!=null?T:{}),ne=J.filter(([,Ee])=>Ee.found&&!Ee.disabled).map(([Ee])=>Ee.charAt(0).toUpperCase()+Ee.slice(1)),ye=J.filter(([,Ee])=>!Ee.found).map(([Ee])=>Ee);if(!$&&!ee&&ne.length===0&&ye.length===0)return null;let me=ye.map(Ee=>Ee.charAt(0).toUpperCase()+Ee.slice(1)),Le=[...ne,...me];return Pt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[(ee||$)&&xe("button",{type:"button",onClick:()=>{zn||(ee?ee():va($))},disabled:zn,title:on,"aria-label":Eo!=null?Eo:"Restart bridge",style:{display:"flex",alignItems:"center",justifyContent:"center",width:22,height:22,border:"none",borderRadius:0,backgroundColor:qn||N!=="idle"?"rgba(0,0,0,0.07)":"rgba(0,0,0,0.04)",color:Nn,cursor:zn?"default":"pointer",padding:0,opacity:zn?.55:1,flexShrink:0},children:N==="ok"?xe(kf,{size:14,strokeWidth:1.8}):xe(Af,{size:13,strokeWidth:1.7,style:{animation:N==="restarting"?"spin 0.8s linear infinite":void 0}})}),ne.length>0?Pt("span",{style:{color:"#6b7280"},children:["Available in ",Le.join(", ")]}):ye.length>0?Pt("span",{style:{color:"#6b7280"},children:["Available in ",me.join(", ")]}):null]})})(),C.keys.length>1&&xe("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:C.keys.slice(1).map((J,ne)=>Pt("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:J.accent?"#fff":"#6b7280"},children:[xe("code",{style:{fontSize:10,backgroundColor:J.accent?e.activeColor:"rgba(0,0,0,0.06)",color:J.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:J.key}),xe("span",{style:{color:J.accent?e.activeColor:void 0,fontWeight:J.accent?600:void 0},children:J.desc})]},ne))}),ae==="counter"&&Jt.length>0&&(()=>{let J=xe("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:xe("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Active"})}),ne=new Map;for(let Le of Jt){let Ee=Le.pathname||kn;ne.has(Ee)||ne.set(Ee,[]),ne.get(Ee).push(Le)}let ye=[...ne.entries()],me=ye.length>1;return Pt("div",{children:[J,xe("div",{style:{maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:ye.map(([Le,Ee])=>xe("div",{style:{marginBottom:me?4:0},children:Ee.map(Ie=>{var re,Te,ze,Ue;let Oe=Ie.annotations.find(Ge=>Ge.type==="text"&&Ge.text),Lt=(Oe==null?void 0:Oe.text)||`[${(Te=(re=Ie.annotations[0])==null?void 0:re.type)!=null?Te:"annotation"}]`,Ut=e.selectedAnnotationIds.includes(Ie.id),x=Jt.indexOf(Ie),L=x+1,z=(Ue=(ze=Ie.annotations[0])==null?void 0:ze.color)!=null?Ue:e.activeColor;return Pt("div",{onClick:()=>{var Xe;if(!(!Ie.pathname||Ie.pathname===kn)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:Ie.id,pathname:Ie.pathname})),window.location.href=Ie.pathname;return}if(Kn(x),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:Ie.id}}),v){let Et=(Xe=Ie.annotations.find(yt=>yt.threadId))==null?void 0:Xe.threadId;Et&&v(Et)}ie.current=!1,X(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:Ge=>{let Xe=Ge.currentTarget.querySelector("[data-route-badge]");Xe&&(Xe.style.backgroundColor=z,Xe.style.color="#fff")},onMouseLeave:Ge=>{if(Ut)return;let Xe=Ge.currentTarget.querySelector("[data-route-badge]");Xe&&(Xe.style.backgroundColor="rgba(0,0,0,0.06)",Xe.style.color="#6b7280")},children:[Pt("code",{"data-route-badge":!0,style:{fontSize:10,color:Ut?"#fff":"#6b7280",backgroundColor:Ut?z:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[L,". ",me?Le:""]}),xe("span",{style:{fontSize:11,color:Ut?"#1f2937":"#6b7280",fontWeight:Ut?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:Lt})]},Ie.id)})},Le))})]})})(),ae==="counter"&&(()=>{let J=new Set(Jt.flatMap(me=>me.annotations.map(Le=>Le.threadId).filter(Boolean))),ne=je.filter(me=>!J.has(me.id));if(ne.length===0)return null;let ye=me=>{let Le=Math.floor((Date.now()-me)/1e3);if(Le<60)return"now";let Ee=Math.floor(Le/60);if(Ee<60)return`${Ee}m`;let Ie=Math.floor(Ee/60);return Ie<24?`${Ie}h`:`${Math.floor(Ie/24)}d`};return Pt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8},children:[xe("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:4,textTransform:"uppercase",letterSpacing:"0.05em"},children:"Recent"}),ne.map(me=>Pt("div",{onClick:()=>{let Le=me.elementIdentifiers[0];if(Le){let Ee=Le.indexOf(":"),Ie=Ee>0&&Le[0]==="/",Oe=Ie?Le.slice(0,Ee):void 0,Lt=Ie?Le.slice(Ee+1):Le;if(!(!Oe||Oe===kn)){sessionStorage.setItem("popmelt-pending-thread",JSON.stringify({threadId:me.id,selector:Lt,preview:me.preview})),window.location.href=Oe;return}try{let x=document.querySelector(Lt);if(x){let L=x.getBoundingClientRect(),z=Math.random().toString(36).slice(2,9);t({type:"ADD_TEXT",payload:{id:z,point:{x:L.left+L.width,y:L.top},text:me.preview,linkedSelector:Lt,linkedAnchor:"top-left"}}),t({type:"SET_ANNOTATION_THREAD",payload:{ids:[z],threadId:me.id}}),t({type:"SET_ANNOTATION_STATUS",payload:{ids:[z],status:"resolved"}})}}catch(x){}}v&&v(me.id),ie.current=!1,X(null)},style:{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:8,padding:"2px 0",cursor:"pointer",color:"#6b7280",fontSize:11},onMouseEnter:Le=>{Le.currentTarget.style.color="#1f2937"},onMouseLeave:Le=>{Le.currentTarget.style.color="#6b7280"},children:[xe("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:me.preview}),xe("span",{style:{flexShrink:0,fontSize:10,color:"#9ca3af"},children:ye(me.createdAt)})]},me.id))]})})()]})})(),Pt("div",{ref:C=>{Me&&(Me.current=C)},id:"devtools-toolbar",style:wt,onMouseEnter:ue,onMouseMove:Mn,children:[Vt,Pt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[xe("span",{onMouseEnter:()=>Yt("inspector"),onMouseLeave:yn,children:xe(Ho,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>dn("inspector"),children:xe(Rf,{size:20,strokeWidth:1.5})})}),xe("span",{onMouseEnter:()=>Yt("hand"),onMouseLeave:yn,children:xe(Ho,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>dn("hand"),children:Pt("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[xe(If,{size:20,strokeWidth:1.5}),e.styleModifications.filter(C=>!C.captured).length>0&&xe("div",{style:{position:"absolute",top:-7,right:-9,minWidth:14,height:14,borderRadius:0,backgroundColor:e.activeColor,color:"#fff",fontSize:9,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 2px",lineHeight:1},children:e.styleModifications.filter(C=>!C.captured).length})]})})}),(()=>{let C=cr[ft],J=C.icon,ne=e.isAnnotating&&Nf.has(e.activeTool);return xe("span",{onMouseEnter:()=>Yt(C.type),onMouseLeave:yn,children:Pt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[xe(Ho,{active:ne,siblingActive:e.isAnnotating,onClick:()=>dn(C.type),children:xe(J,{size:20,strokeWidth:1.5})}),xe("button",{type:"button",onClick:()=>{let ye=(ft+1)%cr.length;gt(ye),dn(cr[ye].type)},title:"Cycle shape tool",style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2,width:12,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 2px",opacity:e.isAnnotating&&!ne?.5:1,transition:"opacity 150ms ease"},children:cr.map((ye,me)=>xe("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:me===ft?oo.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},me))})]})})})(),$f.map(({type:C,icon:J,label:ne,shortcut:ye})=>xe("span",{onMouseEnter:()=>Yt(C),onMouseLeave:yn,children:xe(Ho,{active:e.isAnnotating&&e.activeTool===C,siblingActive:e.isAnnotating,onClick:()=>dn(C),children:xe(J,{size:20,strokeWidth:1.5})})},C)),xe("span",{onMouseEnter:()=>Yt("model"),onMouseLeave:yn,children:xe(Ho,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>dn("model"),children:xe(Mf,{size:17,strokeWidth:1.5})})})]}),xe(xc,{}),Pt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(Jt.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(C=>!C.captured).length>0)&&(()=>{var me;let C=Gt!==null&&Gt<Jt.length?Jt[Gt]:null,J=e.annotations.length>0&&e.annotations.every(Le=>Le.status&&Le.status!=="pending"),ne=Gt!==null?(me=C==null?void 0:C.annotations.some(Le=>Le.status&&Le.status!=="pending"))!=null?me:!1:J,ye=`oklch(0.628 0.258 ${nn})`;return xe("span",{onMouseEnter:()=>Yt("counter"),onMouseLeave:yn,children:xe("button",{ref:H,type:"button",onClick:()=>{if(_t.current){_t.current=!1;return}ho()},onMouseDown:Co,onMouseUp:Ln,onMouseLeave:Ln,title:"",style:{display:"flex",alignItems:"center",justifyContent:"center",gap:4,minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:ne&&Gt===null?"#999999":ye,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let Le=Jt.length+e.styleModifications.length+e.spacingTokenChanges.filter(Ie=>!Ie.captured).length;if(Gt!==null)return Pt(Xr,{children:[Gt+1,Pt("span",{style:{opacity:.4,display:"flex",gap:4},children:[xe("span",{children:"/"}),xe("span",{children:Le})]})]});let Ee=ur.length+e.styleModifications.length+e.spacingTokenChanges.filter(Ie=>!Ie.captured).length;return Le>Ee?Pt(Xr,{children:[Ee,Pt("span",{style:{opacity:.4,display:"flex",gap:4},children:[xe("span",{children:"/"}),xe("span",{children:Le})]})]}):Le})()})})})(),(e.annotations.length>0||e.styleModifications.length>0)&&xe("span",{onMouseEnter:()=>Yt("clear"),onMouseLeave:yn,children:xe(Ho,{siblingActive:e.isAnnotating,onClick:io,title:"Clear all (\u2318\u232B)",children:xe(Bf,{size:17,strokeWidth:1.5})})}),d&&Pt(Xr,{children:[xe("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),xe("span",{onMouseEnter:()=>Yt("provider"),onMouseLeave:yn,style:{display:"contents"},children:Pt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[xe(Ho,{onClick:()=>d(Xn),children:xe(Vr,{provider:l})}),Pt("button",{type:"button",onClick:()=>{let C=(p+1)%u;b==null||b(C)},style:{display:"flex",alignItems:"center",gap:6,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 4px 0 0",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:10,fontWeight:500,color:oo.iconDefault,whiteSpace:"nowrap"},children:[xe("span",{children:g}),xe("span",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:2},children:mt.map(C=>xe("div",{style:{width:C.overflow?2:3,height:C.overflow?2:3,borderRadius:"50%",backgroundColor:C.active?oo.iconDefault:"rgba(0,0,0,0.2)",opacity:C.overflow?.65:1,transition:"background-color 150ms ease, opacity 150ms ease"}},C.key))})]})]})})]}),xe("div",{ref:pr,style:{display:"inline-flex",cursor:"pointer"},children:xe("button",{type:"button",onClick:mo,title:"Collapse (\u2318\u2318)",style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,border:"none",background:"none",padding:0,cursor:"inherit"},children:xe("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:Ct,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:xe("path",{d:"M20.25 8.00293H20.249C21.5098 8.0286 22.7219 8.25094 23.8584 8.63672L23.8604 8.63574C23.8961 8.64787 23.9312 8.66145 23.9668 8.67383C24.0611 8.70686 24.1548 8.74106 24.248 8.77637C24.2915 8.79273 24.3357 8.80727 24.3789 8.82422L24.376 8.82617C27.6145 10.0955 30.1646 12.7301 31.3213 16.0234L31.3232 16.0225C31.3327 16.0493 31.3404 16.0766 31.3496 16.1035C31.7691 17.3256 32 18.6356 32 20C32 20.8726 31.9366 21.6706 31.7598 22.4902L31.7197 22.6328C31.6412 23.0066 31.5136 23.6108 31.3408 24.2217L31.3398 24.2246C31.2967 24.377 31.251 24.5299 31.2021 24.6797C30.9215 25.5403 30.5473 26.2998 30.0879 26.2998C29.7613 26.2996 29.5995 25.9674 29.4316 25.6221C29.2501 25.2487 29.0614 24.8605 28.6484 24.8604C27.8532 24.8604 27.2081 25.5046 27.208 26.2998V27.0771C27.2079 27.6079 26.9661 28.112 26.5205 28.4004C25.9146 28.7925 25.2357 28.6462 24.7959 28.2061L24.7949 28.208C24.7897 28.2028 24.7854 28.1967 24.7803 28.1914C24.7654 28.1761 24.7507 28.1606 24.7363 28.1445C24.7105 28.1156 24.6858 28.0857 24.6621 28.0547C24.6461 28.0339 24.6302 28.013 24.6152 27.9912C24.5931 27.9591 24.5726 27.9257 24.5527 27.8916C24.5392 27.8685 24.5261 27.8452 24.5137 27.8213C24.5093 27.8128 24.5043 27.8045 24.5 27.7959L24.501 27.7939C24.3932 27.5763 24.3282 27.3276 24.3281 27.0576V26.2998C24.328 25.5993 23.8278 25.0158 23.165 24.8867V24.8877C23.0752 24.8702 22.9826 24.8604 22.8877 24.8604C22.8446 24.8604 22.8019 24.8624 22.7598 24.8662C22.0247 24.9312 21.4483 25.5479 21.4482 26.2998C21.4482 26.9127 21.4608 27.5305 21.4736 28.1494L21.4951 29.3135C21.5 29.7013 21.5015 30.089 21.4971 30.4756C21.4874 31.3103 20.8426 32 20.0078 32C19.1732 31.9998 18.5292 31.3102 18.5195 30.4756C18.5159 30.1613 18.5176 29.8464 18.5205 29.5312V29.5322C18.5212 29.4593 18.5206 29.3864 18.5215 29.3135L18.5303 28.8154V28.8145C18.5343 28.5927 18.5384 28.371 18.543 28.1494C18.5558 27.5305 18.5684 28.1129 18.5684 27.5C18.5684 26.7047 17.9232 26.0596 17.1279 26.0596C16.907 26.0596 16.6978 26.1103 16.5107 26.1992C16.2161 26.3393 15.9767 26.5769 15.834 26.8701C15.8269 26.8846 15.8201 26.8993 15.8135 26.9141C15.7821 26.9845 15.7562 27.0579 15.7363 27.1338C15.7243 27.1798 15.7155 27.2267 15.708 27.2744C15.7012 27.3175 15.6953 27.361 15.6924 27.4053C15.6903 27.4366 15.6885 27.4681 15.6885 27.5V28.7383C15.6883 29.9234 14.4911 30.7248 13.4961 30.0811C13.0505 29.7926 12.8086 29.2886 12.8086 28.7578V26.2998C12.8086 25.9737 12.6984 25.674 12.5156 25.4326C12.4437 25.3381 12.3612 25.2521 12.2686 25.1777V25.1768C12.0219 24.9788 11.709 24.8604 11.3682 24.8604C10.9892 24.8604 10.8622 24.8872 10.7295 25.2295C10.5837 25.6055 10.4302 26 9.92773 26C9.33081 25.9996 8.95963 25.2403 8.71484 24.3799C8.5591 23.8325 8.45907 23.571 8.3623 23.0107C8.3501 22.9401 8.33284 22.8403 8.31738 22.7529C8.12812 21.9466 8.02043 21.1089 8.00293 20.249V20.25L8 20C8 19.8617 8.00317 19.724 8.00781 19.5869C8.00837 19.5703 8.00816 19.5537 8.00879 19.5371L8.00977 19.5352C8.0998 17.1716 8.87444 14.9844 10.1396 13.1631C10.1488 13.1499 10.1587 13.1372 10.168 13.124C12.255 10.1453 15.6582 8.15745 19.5352 8.00977L19.5371 8.00879C19.5537 8.00816 19.5703 8.00837 19.5869 8.00781C19.724 8.00317 19.8617 8 20 8L20.25 8.00293Z"})})})})]})]})]}):Pt(Xr,{children:[xe("style",{children:`
|
|
16
16
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
17
|
-
`}),
|
|
18
|
-
`)[0].trim();return l.length<=40?l:l.slice(0,37)+"\u2026"}case"Glob":return"Searching files";case"Grep":return"Searching code";default:return o?`Using ${o}`:"Working\u2026"}}function
|
|
17
|
+
`}),Pt("div",{ref:C=>{$o.current=C,Me&&(Me.current=C)},id:"devtools-toolbar",style:h(f({},wt),{overflow:"visible",opacity:r?1:.5}),children:[Vt,xe("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,border:"none",background:"none",cursor:"pointer",padding:0},onClick:()=>{qe(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})},onMouseEnter:()=>s==null?void 0:s(!0),onMouseLeave:()=>s==null?void 0:s(!1),title:"Open annotation toolbar (\u2318\u2318)",children:xe("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:"none",stroke:Ct,strokeWidth:"1",strokeLinejoin:"round",xmlns:"http://www.w3.org/2000/svg",children:xe("path",{d:"M20.25 8.00293H20.249C21.5098 8.0286 22.7219 8.25094 23.8584 8.63672L23.8604 8.63574C23.8961 8.64787 23.9312 8.66145 23.9668 8.67383C24.0611 8.70686 24.1548 8.74106 24.248 8.77637C24.2915 8.79273 24.3357 8.80727 24.3789 8.82422L24.376 8.82617C27.6145 10.0955 30.1646 12.7301 31.3213 16.0234L31.3232 16.0225C31.3327 16.0493 31.3404 16.0766 31.3496 16.1035C31.7691 17.3256 32 18.6356 32 20C32 20.8726 31.9366 21.6706 31.7598 22.4902L31.7197 22.6328C31.6412 23.0066 31.5136 23.6108 31.3408 24.2217L31.3398 24.2246C31.2967 24.377 31.251 24.5299 31.2021 24.6797C30.9215 25.5403 30.5473 26.2998 30.0879 26.2998C29.7613 26.2996 29.5995 25.9674 29.4316 25.6221C29.2501 25.2487 29.0614 24.8605 28.6484 24.8604C27.8532 24.8604 27.2081 25.5046 27.208 26.2998V27.0771C27.2079 27.6079 26.9661 28.112 26.5205 28.4004C25.9146 28.7925 25.2357 28.6462 24.7959 28.2061L24.7949 28.208C24.7897 28.2028 24.7854 28.1967 24.7803 28.1914C24.7654 28.1761 24.7507 28.1606 24.7363 28.1445C24.7105 28.1156 24.6858 28.0857 24.6621 28.0547C24.6461 28.0339 24.6302 28.013 24.6152 27.9912C24.5931 27.9591 24.5726 27.9257 24.5527 27.8916C24.5392 27.8685 24.5261 27.8452 24.5137 27.8213C24.5093 27.8128 24.5043 27.8045 24.5 27.7959L24.501 27.7939C24.3932 27.5763 24.3282 27.3276 24.3281 27.0576V26.2998C24.328 25.5993 23.8278 25.0158 23.165 24.8867V24.8877C23.0752 24.8702 22.9826 24.8604 22.8877 24.8604C22.8446 24.8604 22.8019 24.8624 22.7598 24.8662C22.0247 24.9312 21.4483 25.5479 21.4482 26.2998C21.4482 26.9127 21.4608 27.5305 21.4736 28.1494L21.4951 29.3135C21.5 29.7013 21.5015 30.089 21.4971 30.4756C21.4874 31.3103 20.8426 32 20.0078 32C19.1732 31.9998 18.5292 31.3102 18.5195 30.4756C18.5159 30.1613 18.5176 29.8464 18.5205 29.5312V29.5322C18.5212 29.4593 18.5206 29.3864 18.5215 29.3135L18.5303 28.8154V28.8145C18.5343 28.5927 18.5384 28.371 18.543 28.1494C18.5558 27.5305 18.5684 28.1129 18.5684 27.5C18.5684 26.7047 17.9232 26.0596 17.1279 26.0596C16.907 26.0596 16.6978 26.1103 16.5107 26.1992C16.2161 26.3393 15.9767 26.5769 15.834 26.8701C15.8269 26.8846 15.8201 26.8993 15.8135 26.9141C15.7821 26.9845 15.7562 27.0579 15.7363 27.1338C15.7243 27.1798 15.7155 27.2267 15.708 27.2744C15.7012 27.3175 15.6953 27.361 15.6924 27.4053C15.6903 27.4366 15.6885 27.4681 15.6885 27.5V28.7383C15.6883 29.9234 14.4911 30.7248 13.4961 30.0811C13.0505 29.7926 12.8086 29.2886 12.8086 28.7578V26.2998C12.8086 25.9737 12.6984 25.674 12.5156 25.4326C12.4437 25.3381 12.3612 25.2521 12.2686 25.1777V25.1768C12.0219 24.9788 11.709 24.8604 11.3682 24.8604C10.9892 24.8604 10.8622 24.8872 10.7295 25.2295C10.5837 25.6055 10.4302 26 9.92773 26C9.33081 25.9996 8.95963 25.2403 8.71484 24.3799C8.5591 23.8325 8.45907 23.571 8.3623 23.0107C8.3501 22.9401 8.33284 22.8403 8.31738 22.7529C8.12812 21.9466 8.02043 21.1089 8.00293 20.249V20.25L8 20C8 19.8617 8.00317 19.724 8.00781 19.5869C8.00837 19.5703 8.00816 19.5537 8.00879 19.5371L8.00977 19.5352C8.0998 17.1716 8.87444 14.9844 10.1396 13.1631C10.1488 13.1499 10.1587 13.1372 10.168 13.124C12.255 10.1453 15.6582 8.15745 19.5352 8.00977L19.5371 8.00879C19.5537 8.00816 19.5703 8.00837 19.5869 8.00781C19.724 8.00317 19.8617 8 20 8L20.25 8.00293Z"})})})]})]})}import{useCallback as Gf,useEffect as fo,useRef as Kr,useState as Hi}from"react";import{Fragment as Mc,jsx as Bt,jsxs as Or}from"react/jsx-runtime";var jf=24,Yf=6,Jf=jf-Yf,Uf=8,Tc=h(f({display:"flex",alignItems:"center",gap:3,padding:0,backgroundColor:"#eaeaea"},Mr),{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,whiteSpace:"nowrap",transition:"transform 200ms ease, opacity 200ms ease"});function Vf(e){var a;let t=e.filter(l=>l.type==="tool_use");if(t.length===0)return"Starting\u2026";let n=t[t.length-1],o=String(n.data.tool||""),r=n.data.file?String(n.data.file):null,i=r?(a=r.split("/").pop())!=null?a:r:null,s=n.data.content?String(n.data.content):null;switch(o){case"Read":return i?`Reading ${i}`:"Reading file";case"Edit":return i?`Editing ${i}`:"Editing file";case"Write":return i?`Writing ${i}`:"Writing file";case"Bash":{if(!s)return"Running command";let l=s.split(`
|
|
18
|
+
`)[0].trim();return l.length<=40?l:l.slice(0,37)+"\u2026"}case"Glob":return"Searching files";case"Grep":return"Searching code";default:return o?`Using ${o}`:"Working\u2026"}}function Xf(e){let t=e.replace(/^Error:\s*/i,"");return t.length>40?t.slice(0,37)+"...":t}function Kf(e,t){if(e.some(i=>i.type==="question"&&i.data.jobId===t))return"Has a question";let o=new Set(["Edit","Write"]);return e.some(i=>i.type==="tool_use"&&i.data.jobId===t&&o.has(String(i.data.tool||"")))?"Applied changes":"Replied"}function qf({color:e}){let[t,n]=Hi(0);return fo(()=>{let o=setInterval(()=>{n(r=>(r+1)%2)},250);return()=>clearInterval(o)},[]),Bt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?Or(Mc,{children:[Bt("circle",{cx:"7",cy:"7",r:"2"}),Bt("circle",{cx:"17",cy:"7",r:"2"}),Bt("circle",{cx:"7",cy:"17",r:"2"}),Bt("circle",{cx:"17",cy:"17",r:"2"})]}):Or(Mc,{children:[Bt("circle",{cx:"12",cy:"6",r:"2"}),Bt("circle",{cx:"6",cy:"12",r:"2"}),Bt("circle",{cx:"18",cy:"12",r:"2"}),Bt("circle",{cx:"12",cy:"18",r:"2"})]})})}function Zf({color:e}){return Bt("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:e,opacity:.6}})}function Qf({color:e}){return Bt("span",{style:{color:e,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function eg(){return Bt("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function tg({onCancel:e}){let t=Kr(null);return fo(()=>{let n=t.current;if(!n)return;let o=s=>{s.stopPropagation(),e()},r=()=>{n.style.opacity="0.5"},i=()=>{n.style.opacity="0.7"};return n.addEventListener("click",o),n.addEventListener("mouseenter",r),n.addEventListener("mouseleave",i),()=>{n.removeEventListener("click",o),n.removeEventListener("mouseenter",r),n.removeEventListener("mouseleave",i)}},[e]),Bt("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 ng({onDismiss:e}){let t=Kr(null);return fo(()=>{let n=t.current;if(!n)return;let o=s=>{s.stopPropagation(),e()},r=()=>{n.style.opacity="0.5"},i=()=>{n.style.opacity="0.7"};return n.addEventListener("click",o),n.addEventListener("mouseenter",r),n.addEventListener("mouseleave",i),()=>{n.removeEventListener("click",o),n.removeEventListener("mouseenter",r),n.removeEventListener("mouseleave",i)}},[e]),Bt("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 Ic({bridge:e,inFlightJobs:t,isVisible:n,onHover:o,clearSignal:r,onViewThread:i,onClickJob:s,onCancel:a,onHoverJob:l,isConnected:d,dismissedThreadIds:c,snapPosition:p="bottom-right"}){let[u,g]=Hi([]),[b,v]=Hi(!1),[A,T]=Hi(()=>typeof window!="undefined"?{w:window.innerWidth,h:window.innerHeight}:{w:1920,h:1080});fo(()=>{let _=()=>T({w:window.innerWidth,h:window.innerHeight});return window.addEventListener("resize",_),()=>window.removeEventListener("resize",_)},[]);let $=ja(p,A.w,A.h);fo(()=>{r>0&&g([])},[r]),fo(()=>{!c||c.size===0||g(_=>{let le=_.filter(M=>!M.threadId||!c.has(M.threadId));return le.length===_.length?_:le})},[c]),fo(()=>{g(_=>{var Re;let le=new Set(_.map(ge=>ge.jobId)),M=!1,ue=_.map(ge=>{let qe=t[ge.jobId];return qe&&(!ge.threadId||ge.color==="#888")?(M=!0,h(f({},ge),{threadId:ge.threadId||qe.threadId,color:ge.color==="#888"?qe.color:ge.color})):ge});for(let[ge,qe]of Object.entries(t))le.has(ge)||(ue.push({jobId:ge,color:qe.color,status:"queued",threadId:qe.threadId}),M=!0);let Me=new Set(Object.keys(t)),Ne=new Set(e.activeJobIds),ve=ue.filter(ge=>ge.status!=="queued"?!0:Me.has(ge.jobId)||Ne.has(ge.jobId));ve.length!==ue.length&&(M=!0);let We=new Set(ve.map(ge=>ge.jobId));for(let ge of e.activeJobIds)if(!We.has(ge)){let qe=e.events.find(ft=>ft.type==="job_started"&&ft.data.jobId===ge);ve.push({jobId:ge,color:"#888",status:"working",threadId:(Re=qe==null?void 0:qe.data)==null?void 0:Re.threadId}),M=!0}return M?ve:_})},[t,e.activeJobIds]),fo(()=>{if(e.activeJobIds.length===0)return;let _=new Set(e.activeJobIds);g(le=>le.map(M=>_.has(M.jobId)&&M.status!=="done"&&M.status!=="error"?h(f({},M),{status:"working"}):M))},[e.activeJobIds]);let P=Kr(null);fo(()=>{let _=e.lastCompletedJobId;if(!_||_===P.current)return;P.current=_;let le=e.events.find(We=>We.type==="error"&&(We.data.jobId===_||e.status==="error")),M=!!le,ue=M?void 0:Kf(e.events,_),Me=le?String(le.data.message||""):void 0,Ne=le?!!le.data.cancelled:void 0,ve=le==null?void 0:le.data.threadId;g(We=>We.map(Re=>Re.jobId===_?h(f({},Re),{status:M?"error":"done",doneLabel:ue,errorMessage:Me,cancelled:Ne,threadId:Re.threadId||ve}):Re))},[e.lastCompletedJobId,e.events,e.status]);let O=n&&(u.length>0||d===!1),w=Kr(null);fo(()=>{if(!O)return;let _=w.current;if(!_)return;let le=()=>{v(!0),o(!0)},M=()=>{v(!1),o(!1),l==null||l(null)};return _.addEventListener("mouseenter",le),_.addEventListener("mouseleave",M),()=>{_.removeEventListener("mouseenter",le),_.removeEventListener("mouseleave",M)}},[O,o,l]);let N=Kr(new Map),se=Gf((_,le)=>{le?N.current.set(_,le):N.current.delete(_)},[]);if(fo(()=>{if(!O)return;let _=[];for(let le of u){let M=N.current.get(le.jobId);if(M){if(s){let ue=le.jobId,Me=()=>s(ue);M.addEventListener("click",Me),_.push(()=>M.removeEventListener("click",Me))}if(l){let ue=le.jobId,Me=()=>l(ue),Ne=()=>l(null);M.addEventListener("mouseenter",Me),M.addEventListener("mouseleave",Ne),_.push(()=>{M.removeEventListener("mouseenter",Me),M.removeEventListener("mouseleave",Ne)})}}}return()=>_.forEach(le=>le())},[O,u,s,l]),!O)return null;let ee={working:3,queued:2,error:1,done:0},G=[],oe=new Map;for(let _ of u){if(!_.threadId){G.push(_);continue}let le=oe.get(_.threadId);(!le||ee[_.status]>ee[le.status]||ee[_.status]===ee[le.status])&&oe.set(_.threadId,_)}for(let _ of oe.values())G.push(_);let W=G.filter(_=>_.status==="queued"),Z=new Map;W.forEach((_,le)=>{Z.set(_.jobId,`(${le+1}/${W.length})`)});let k=!b&&G.length>1,Ce=Ko(p),Q=qo(p),fe=Ce?G:[...G].reverse();return Or("div",{ref:w,style:$,"data-devtools":!0,children:[Bt("style",{children:"@keyframes popmelt-badge-march { to { background-position: 0 -5px; } }"}),fe.map((_,le)=>{var Ne;let M=le===G.length-1,ue=G.length-1-le,Me=_.status==="working"?Vf(e.events.filter(ve=>ve.data.jobId===_.jobId)):_.status==="queued"?`Queued ${(Ne=Z.get(_.jobId))!=null?Ne:""}`:_.status==="done"?_.doneLabel||"Done":_.cancelled?"Cancelled":_.errorMessage?Xf(_.errorMessage):"Error";return Bt("div",{style:{position:"relative",zIndex:G.length-le,marginBottom:k?M?0:-Jf:M?0:Uf,transform:k?`scale(${Math.max(.94,1-ue*.02)})`:"scale(1)",opacity:1,transformOrigin:`${Ce?"top":"bottom"} ${Q?"right":"left"}`,transition:"margin-bottom 250ms ease, transform 250ms ease, opacity 250ms ease"},children:Or("div",{ref:ve=>se(_.jobId,ve),style:f(h(f({},Tc),{position:"relative",overflow:"visible",cursor:s?"pointer":void 0}),_.status==="working"&&{borderImage:"none",borderColor:"transparent"}),title:_.errorMessage||void 0,children:[_.status==="working"&&(()=>{let ve=`<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='${_.color}' stroke-width='.75'/></svg>`;return Bt("div",{style:{position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(ve)}")`,backgroundSize:"5px 5px",WebkitMask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",WebkitMaskComposite:"xor",mask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",maskComposite:"exclude",pointerEvents:"none",animation:"popmelt-badge-march 0.8s linear infinite"}})})(),Or("div",{style:{display:"flex",alignItems:"center",gap:3,padding:"3px 5px 3px 8px",margin:3,backgroundColor:_.status==="error"?"#ef4444":_.color,color:"#ffffff"},children:[_.status==="working"&&Bt(qf,{color:"#ffffff"}),_.status==="queued"&&Bt(Zf,{color:"#ffffff"}),_.status==="done"&&Bt(Qf,{color:"#ffffff"}),_.status==="error"&&Bt(eg,{}),Bt("span",{style:{opacity:_.status==="queued"?.6:1,maxWidth:160,overflow:"hidden",textOverflow:"ellipsis"},children:Me}),_.status==="working"&&a&&Bt(tg,{onCancel:()=>a(_.jobId)}),(_.status==="done"||_.status==="error")&&Bt(ng,{onDismiss:()=>g(ve=>ve.filter(We=>_.threadId?We.threadId!==_.threadId:We.jobId!==_.jobId))})]})]})},_.jobId)}),d===!1&&u.length>0&&Bt("div",{style:Tc,children:Or("div",{style:{display:"flex",alignItems:"center",gap:3,padding:"3px 5px 3px 8px",margin:3,backgroundColor:"#f59e0b",color:"#ffffff"},children:[Bt("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ffffff",opacity:.6}}),Bt("span",{children:"Reconnecting\u2026"})]})})]})}import{Fragment as ig,jsx as rg,jsxs as sg}from"react/jsx-runtime";var og=`
|
|
19
19
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
20
20
|
:host {
|
|
21
21
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
@@ -44,9 +44,9 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
44
44
|
color: initial;
|
|
45
45
|
-webkit-font-smoothing: auto;
|
|
46
46
|
}
|
|
47
|
-
`;function
|
|
48
|
-
`),n=[],o=0;for(;o<t.length;){let i=t[o];if(i.trimStart().startsWith("```")){let d=[];for(o++;o<t.length&&!t[o].trimStart().startsWith("```");)d.push(t[o]),o++;o++,n.push(
|
|
49
|
-
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(i)){n.push(
|
|
47
|
+
`;function Rc({children:e}){return sg(ig,{children:[rg("style",{children:og}),e]})}import{useEffect as ag,useLayoutEffect as lg,useRef as cg,useState as Lc}from"react";import{createPortal as dg}from"react-dom";import{Fragment as gg,jsx as fg,jsxs as mg}from"react/jsx-runtime";function ug(e){return e.tagName==="STYLE"||e.tagName==="LINK"&&e.rel==="stylesheet"}function pg(e){let t=new Map,n=e.firstChild;function o(s){if(t.has(s)||s.hasAttribute("data-pm-mirror"))return;let a=s.cloneNode(!0);a.setAttribute("data-pm-mirror",""),e.insertBefore(a,n),t.set(s,a)}function r(s){let a=t.get(s);a&&(a.remove(),t.delete(s))}for(let s of document.querySelectorAll('link[rel="stylesheet"], style'))s.getRootNode()===document&&o(s);try{document.adoptedStyleSheets.length>0&&(e.adoptedStyleSheets=[...document.adoptedStyleSheets,...e.adoptedStyleSheets])}catch(s){}let i=new MutationObserver(s=>{for(let a of s)if(a.type==="childList"){for(let l of a.addedNodes)l instanceof Element&&ug(l)&&o(l);for(let l of a.removedNodes)l instanceof Element&&r(l)}});return i.observe(document.head,{childList:!0}),document.body&&i.observe(document.body,{childList:!0}),()=>{i.disconnect();for(let s of t.values())s.remove();t.clear()}}function Ac({children:e}){let t=cg(null),[n,o]=Lc(null),[r,i]=Lc(null);return lg(()=>{let s=t.current;if(!s||s.shadowRoot)return;let a=s.attachShadow({mode:"open"}),l=document.createElement("div");l.setAttribute("data-popmelt-root",""),a.appendChild(l),o(a),i(l)},[]),ag(()=>{if(n)return pg(n)},[n]),mg(gg,{children:[fg("div",{ref:t,"data-popmelt-shadow-host":!0,style:{position:"absolute",width:0,height:0,overflow:"visible",zIndex:1e4}}),r&&dg(e,r)]})}import{memo as wg,useCallback as Br,useEffect as So,useMemo as Pc,useRef as go,useState as ro}from"react";import{jsx as Ye,jsxs as dr}from"react/jsx-runtime";var Ks="ui-monospace, SFMono-Regular, Menlo, monospace",hg=0;function yg({size:e=11}){let t=++hg,n=`pm-vs-m${t}`,o=`pm-vs-f0-${t}`,r=`pm-vs-f1-${t}`,i=`pm-vs-g${t}`;return dr("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:[Ye("mask",{id:n,maskType:"alpha",maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"100",height:"100",children:Ye("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"})}),dr("g",{mask:`url(#${n})`,children:[Ye("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"}),Ye("g",{filter:`url(#${o})`,children:Ye("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"})}),Ye("g",{filter:`url(#${r})`,children:Ye("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"})}),Ye("g",{style:{mixBlendMode:"overlay"},opacity:"0.25",children:Ye("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})`})})]}),dr("defs",{children:[dr("filter",{id:o,x:"-8.39411",y:"15.8291",width:"116.727",height:"92.2456",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[Ye("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),Ye("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"}),Ye("feOffset",{}),Ye("feGaussianBlur",{stdDeviation:"4.16667"}),Ye("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"}),Ye("feBlend",{mode:"overlay",in2:"BackgroundImageFix",result:"effect1_dropShadow"}),Ye("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"})]}),dr("filter",{id:r,x:"60.4167",y:"-8.07558",width:"47.9167",height:"116.151",filterUnits:"userSpaceOnUse",colorInterpolationFilters:"sRGB",children:[Ye("feFlood",{floodOpacity:"0",result:"BackgroundImageFix"}),Ye("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"}),Ye("feOffset",{}),Ye("feGaussianBlur",{stdDeviation:"4.16667"}),Ye("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"}),Ye("feBlend",{mode:"overlay",in2:"BackgroundImageFix",result:"effect1_dropShadow"}),Ye("feBlend",{mode:"normal",in:"SourceGraphic",in2:"effect1_dropShadow",result:"shape"})]}),dr("linearGradient",{id:i,x1:"49.9392",y1:"0.257812",x2:"49.9392",y2:"99.7423",gradientUnits:"userSpaceOnUse",children:[Ye("stop",{stopColor:"white"}),Ye("stop",{offset:"1",stopColor:"white",stopOpacity:"0"})]})]})]})}var bg=/^#[0-9a-fA-F]{3,8}$/,xg=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,vg=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 Sg(e){let t=e.trim();return bg.test(t)||xg.test(t)||vg.has(t.toLowerCase())}function Xs(e,t){return Ye("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 qr(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);Sg(i)&&t.push(Xs(i,`sw-${r.index}`)),t.push(Ye("code",{style:{fontFamily:Ks,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(Ye("strong",{children:Ye("em",{children:r[3]})},r.index));else if(r[5]!==void 0)t.push(Ye("strong",{children:r[5]},r.index));else if(r[7]!==void 0)t.push(Ye("em",{children:r[7]},r.index));else if(r[9]!==void 0)t.push(Ye("em",{children:r[9]},r.index));else if(r[11]!==void 0&&r[12]!==void 0){let i=r[12],s=!/^https?:\/\/|^mailto:/i.test(i),a=s?`vscode://file/${i}`:i;s?t.push(dr("a",{href:a,target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline",whiteSpace:"nowrap",backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",borderRadius:2,fontFamily:Ks,fontSize:"0.9em"},children:[r[11],Ye(yg,{})]},r.index)):t.push(Ye("a",{href:a,target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline"},children:r[11]},r.index))}else r[13]!==void 0?(t.push(Xs(r[13],`sw-${r.index}`)),t.push(r[13])):r[14]!==void 0&&(t.push(Xs(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 vo(e){var r;let t=e.split(`
|
|
48
|
+
`),n=[],o=0;for(;o<t.length;){let i=t[o];if(i.trimStart().startsWith("```")){let d=[];for(o++;o<t.length&&!t[o].trimStart().startsWith("```");)d.push(t[o]),o++;o++,n.push(Ye("pre",{style:{fontFamily:Ks,fontSize:"0.9em",lineHeight:1.4,backgroundColor:"rgba(0,0,0,0.04)",padding:"6px 8px",margin:"4px 0",overflowX:"auto",whiteSpace:"pre"},children:d.join(`
|
|
49
|
+
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(i)){n.push(Ye("hr",{style:{border:"none",borderTop:"1px solid rgba(0,0,0,0.1)",margin:"6px 0"}},n.length)),o++;continue}let s=i.match(/^(#{1,4})\s+(.+)/);if(s){let d=s[1].length,c={1:16,2:14,3:13,4:12};n.push(Ye("div",{style:{fontWeight:700,fontSize:(r=c[d])!=null?r:12,margin:"8px 0 2px"},children:qr(s[2])},n.length)),o++;continue}if(i.trimStart().startsWith("|")&&i.trimEnd().endsWith("|")){let d=[];for(;o<t.length&&t[o].trimStart().startsWith("|")&&t[o].trimEnd().endsWith("|");)d.push(t[o]),o++;let c=T=>/^\|[\s\-:|]+\|$/.test(T),p=d.filter(T=>!c(T)),u=T=>T.split("|").slice(1,-1).map($=>$.trim()),g=T=>/^\*\*.+\*\*$/.test(T)||/^__.+__$/.test(T),b=p.map(u),v=b.length>1&&b.slice(1).every(T=>T[0]&&g(T[0])),A=b.length>0&&b[0].every(T=>g(T));n.push(Ye("div",{style:{overflowX:"auto",margin:"4px 0",paddingBottom:4},children:Ye("table",{style:{borderCollapse:"separate",borderSpacing:0,fontSize:"0.95em",width:"max-content",minWidth:"100%"},children:Ye("tbody",{children:p.map((T,$)=>Ye("tr",{children:u(T).map((P,O)=>Ye($===0?"th":"td",{style:f({border:"1px solid rgba(0,0,0,0.1)",padding:"3px 6px",textAlign:"left",fontWeight:$===0?600:400,minWidth:60,whiteSpace:"nowrap"},O===0&&v||$===0&&A?h(f(f({position:"sticky"},O===0&&v?{left:0}:{}),$===0&&A?{top:0}:{}),{background:"#fff",zIndex:O===0&&v&&$===0&&A?2:1}):{}),children:qr(P)},O))},$))})})},n.length));continue}if(i.match(/^(\s*)([-*])\s+(.+)/)){let d=[];for(;o<t.length;){let c=t[o].match(/^\s*[-*]\s+(.+)/);if(c)d.push(c[1]),o++;else if(d.length>0&&t[o].match(/^\s+\S/)&&!t[o].match(/^\s*\d+\.\s/)&&!t[o].match(/^\s*[-*]\s+/))d[d.length-1]+=" "+t[o].trim(),o++;else break}n.push(Ye("ul",{style:{margin:0,paddingLeft:20,listStyleType:"disc",display:"flex",flexDirection:"column",gap:8},children:d.map((c,p)=>Ye("li",{children:qr(c)},p))},n.length));continue}if(i.match(/^(\s*)\d+\.\s+(.+)/)){let d=[];for(;o<t.length;){let c=t[o].match(/^\s*\d+\.\s+(.+)/);if(c)d.push(c[1]),o++;else if(d.length>0&&t[o].match(/^\s+\S/)&&!t[o].match(/^\s*\d+\.\s/)&&!t[o].match(/^\s*[-*]\s+/))d[d.length-1]+=" "+t[o].trim(),o++;else break}n.push(Ye("ol",{style:{margin:0,paddingLeft:20,listStyleType:"decimal",display:"flex",flexDirection:"column",gap:8},children:d.map((c,p)=>Ye("li",{children:qr(c)},p))},n.length));continue}if(i.trim()===""){o++;continue}n.push(Ye("div",{children:qr(i)},n.length)),o++}return Ye("div",{style:{display:"flex",flexDirection:"column",gap:8},children:n})}import{Fragment as Fo,jsx as de,jsxs as dt}from"react/jsx-runtime";var Dc=400,Dn=16,_c=3,Cg=3,Nc=4,Eg=8,qs="devtools-thread-panel-position",Dr=Dc+2*_c+2*Nc,kg=Dr+2*Cg;function Zs(){return{top:Dn,left:window.innerWidth-Dr-Dn}}function Oc(e,t,n){let o=n==null?void 0:n.getBoundingClientRect(),r=2*_c+2*Nc,i=window.innerHeight-Dn-r;return o&&t+kg>o.left&&(i=o.top-Eg-r),Math.max(200,i-Math.max(0,e))}var Tg={width:Dc,backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",display:"flex",flexDirection:"column",overflow:"visible",padding:4,fontFamily:Zt,fontSize:12,color:"#1f2937",pointerEvents:"auto"},Mg={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 5px 4px 10px",margin:0,fontWeight:600,fontSize:12,overflow:"hidden"},Ig={flex:1,overflowY:"auto",padding:0,scrollbarWidth:"none"},Rg=`
|
|
50
50
|
[data-devtools="thread-panel-messages"]:hover {
|
|
51
51
|
scrollbar-width: thin !important;
|
|
52
52
|
}
|
|
@@ -60,11 +60,11 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
60
60
|
background: rgba(0,0,0,0.15);
|
|
61
61
|
border-radius: 3px;
|
|
62
62
|
}
|
|
63
|
-
`,
|
|
64
|
-
`)[0].trim();return t.length<=60?t:t.slice(0,57)+"\u2026"}var
|
|
65
|
-
`)?
|
|
66
|
-
`)?
|
|
67
|
-
`)?
|
|
68
|
-
[data-popmelt-reply]::placeholder { opacity: 0.35; }`}),
|
|
63
|
+
`,Lg={borderTop:"1px solid rgba(0, 0, 0, 0.12)",display:"flex",alignItems:"center",gap:4,padding:"0 8px 0 10px"};function ea(e){return e.replace(/<resolution>[\s\S]*?<\/resolution>/g,"").replace(/<question>[\s\S]*?<\/question>/g,"").replace(/<plan>[\s\S]*?<\/plan>/g,"").replace(/<review>[\s\S]*?<\/review>/g,"").replace(/<novel>[\s\S]*?<\/novel>/g,"").trim()}function Ag(e){let t=e.match(/<novel>\s*([\s\S]*?)\s*<\/novel>/);if(!(t!=null&&t[1]))return[];try{let n=JSON.parse(t[1]);return Array.isArray(n)?n.filter(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(n){return[]}}function Bc(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}var Qs=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Pg=3e3,Og=250;function Bg({color:e}){let[t,n]=ro(0),[o,r]=ro(()=>Math.floor(Math.random()*Qs.length));return So(()=>{let i=setInterval(()=>n(a=>(a+1)%2),Og),s=setInterval(()=>r(a=>(a+1)%Qs.length),Pg);return()=>{clearInterval(i),clearInterval(s)}},[]),dt("span",{style:{display:"inline-flex",alignItems:"center",gap:4},children:[de("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?dt(Fo,{children:[de("circle",{cx:"7",cy:"7",r:"2"}),de("circle",{cx:"17",cy:"7",r:"2"}),de("circle",{cx:"7",cy:"17",r:"2"}),de("circle",{cx:"17",cy:"17",r:"2"})]}):dt(Fo,{children:[de("circle",{cx:"12",cy:"6",r:"2"}),de("circle",{cx:"6",cy:"12",r:"2"}),de("circle",{cx:"18",cy:"12",r:"2"}),de("circle",{cx:"12",cy:"18",r:"2"})]})}),de("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:Qs[o]})]})}var $i=32,Fi={width:$i,height:$i,objectFit:"cover",cursor:"pointer",border:"1px solid rgba(0,0,0,0.1)"};function Dg(e){let t=/^`(\/[^`]*)`$/gm,n=[...e.matchAll(t)];if(n.length===0)return null;let o=[];for(let r=0;r<n.length;r++){let i=n[r],s=i[1],a=i.index+i[0].length,l=r+1<n.length?n[r+1].index:e.length,d=e.slice(a,l).trim();o.push({route:s,text:d})}return o}function _g(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 Ng(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 Hg({src:e,onClose:t}){return So(()=>{let n=o=>{o.key==="Escape"&&(o.stopPropagation(),t())};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[t]),de("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:de("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 Fg(e){var i;let t=String(e.data.tool||""),n=e.data.file?String(e.data.file):null,o=n?(i=n.split("/").pop())!=null?i: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?$g(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 $g(e){let t=e.split(`
|
|
64
|
+
`)[0].trim();return t.length<=60?t:t.slice(0,57)+"\u2026"}var zg=new Set(["Read","Glob","Grep","WebFetch","WebSearch"]),Wg=new Set(["Edit","Write","Bash"]);function Gg(e){let t=0,n=!1;for(let o of e){if(o.type!=="tool_use")continue;let r=String(o.data.tool||"");Wg.has(r)?n=!0:zg.has(r)&&t++}return!n&&t>=3?"researching":n?"applying changes":null}function jg(e){var n;let t=[];for(let o of e)if(o.type==="tool_use"){let r=Fg(o),i=String(o.data.tool||""),s=o.data.file?String(o.data.file):null,a=o.data.content?String(o.data.content):null,l=(n=s!=null?s:a)!=null?n:void 0;if(r){let d=t[t.length-1];d&&d.kind==="tool_group"&&d.tool===i?d.items.push({label:r,detail:l}):t.push({kind:"tool_group",tool:i,items:[{label:r,detail:l}]})}if(a&&s){let d=s.includes(".")?`.${s.split(".").pop().toLowerCase()}`:"",c=s.includes(".claude/plans/");t.push({kind:"file_content",file:s,content:a,ext:d,isPlan:c})}}else if(o.type==="delta"){let r=String(o.data.text||"");if(!r)continue;let i=t[t.length-1];i&&i.kind==="text"?i.text+=r:t.push({kind:"text",text:r})}else if(o.type==="thinking"){let r=String(o.data.text||"");if(!r)continue;let i=t[t.length-1];i&&i.kind==="thinking"?i.text+=r:t.push({kind:"thinking",text:r})}return t}function Yg({file:e,content:t,ext:n,isPlan:o,onAccept:r}){var d;let[i,s]=ro(o),a=(d=e.split("/").pop())!=null?d:e;return dt("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:[dt("div",{onClick:()=>s(c=>!c),style:{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",cursor:"pointer",userSelect:"none",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",color:"#374151"},children:[de("span",{style:{fontSize:9,color:"#9ca3af"},children:i?"\u25BC":"\u25B6"}),de("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:a}),o&&de("span",{style:{fontSize:9,color:"#6366f1",fontFamily:"inherit"},children:"plan"})]}),i&&dt(Fo,{children:[de("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"?vo(t):de("pre",{style:{margin:0,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,whiteSpace:"pre-wrap"},children:t})}),o&&r&&de("div",{style:{padding:"4px 8px",borderTop:"1px solid rgba(0,0,0,0.06)",display:"flex",justifyContent:"flex-end"},children:de("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 Jg(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 Ug(e,t){switch(e){case"Bash":{let n=t.map(o=>(o.label||"").split(/\s/)[0]).filter(Boolean);return`Used Bash: ${Jg(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 Vg={fontSize:11,color:"#9ca3af",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",lineHeight:1.6};function Xg({label:e}){let t=e.indexOf(" ");return t===-1?de(Fo,{children:e}):dt(Fo,{children:[de("b",{children:e.slice(0,t)}),e.slice(t)]})}function Hc({tool:e,items:t}){let[n,o]=ro(!1),r=t.length>1;return dt("div",{style:Vg,children:[dt("div",{onClick:r?()=>o(i=>!i):void 0,style:{cursor:r?"pointer":"default",userSelect:"none",color:"#9ca3af"},children:[r&&de("span",{style:{fontSize:13,marginRight:4},children:n?"\u25BE":"\u25B8"}),Ug(e,t)]}),n&&de("div",{style:{marginLeft:17},children:t.map((i,s)=>{var a;return de("div",{children:de(Xg,{label:(a=i.detail)!=null?a:i.label})},s)})})]})}var Kg=wg(function({msg:t,index:n,bridgeUrl:o,accentColor:r,onLightbox:i}){let s=t.role==="human";if(t.cancelled||t.error)return dt("div",{"data-msg":!0,style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:[dt("div",{style:{display:"flex",alignItems:"center",gap:4},children:[de("span",{style:{fontSize:11,color:t.error?"#dc2626":"#9ca3af",fontStyle:"italic"},children:t.error?"Error":"Cancelled"}),de("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Bc(t.timestamp)})]}),t.error&&de("div",{style:{fontSize:12,color:"#6b7280",lineHeight:1.4},children:t.error})]},`${t.jobId}-${n}`);let a=s?t.replyToQuestion||t.feedbackSummary||"(annotation)":ea(t.responseText||""),l=s?void 0:t.question,d=!s&&t.resolutions&&t.resolutions.length>0,c=!s&&t.segments&&t.segments.length>0,p=!s&&!c&&t.toolsUsed&&t.toolsUsed.length>0;return!a&&!l&&!d&&!c?null:dt("div",{"data-msg":!0,style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:[dt("div",{style:{display:"flex",alignItems:"center",gap:4},children:[!s&&de(Vr,{provider:t.provider,size:11,style:{color:"#6b7280"}}),de("span",{style:{fontWeight:600,fontSize:11,color:s?r:"#6b7280"},children:s?"You":Gs(t.model,t.provider)}),de("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Bc(t.timestamp)})]}),s&&!t.replyToQuestion&&(()=>{let u=a?Dg(a):null;if(u&&t.screenshotUrls)return de("div",{style:{display:"flex",flexDirection:"column",gap:4},children:u.map((b,v)=>{var $;let A=($=t.screenshotUrls)==null?void 0:$[b.route],T=A?`${o}${A}`:null;return dt("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[T?de("img",{src:T,title:b.route,style:h(f({},Fi),{flexShrink:0,marginTop:1}),onClick:()=>i(T)}):de("div",{style:{width:$i,height:$i,flexShrink:0}}),dt("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:[de("code",{style:{fontSize:10,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px"},children:b.route}),b.text&&de("div",{style:{marginTop:2},children:vo(b.text)})]})]},v)})});let g=t.screenshotUrl?`${o}${t.screenshotUrl}`:null;return g&&a?dt("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[de("img",{src:g,title:"screenshot",style:h(f({},Fi),{flexShrink:0,marginTop:1}),onClick:()=>i(g)}),de("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:a.includes(`
|
|
65
|
+
`)?vo(a):a})]}):a?de("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:a.includes(`
|
|
66
|
+
`)?vo(a):a}):null})(),s&&t.replyToQuestion&&a&&de("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:a.includes(`
|
|
67
|
+
`)?vo(a):a}),!s&&c&&t.segments.map((u,g)=>{if(u.kind==="tool_group")return de(Hc,{tool:u.tool,items:u.items},g);let b=ea(u.text);return b?de("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:vo(b)},g):null}),!s&&!c&&a&&de("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:vo(a)}),s&&t.replyToQuestion&&(()=>{let u=_g(t,o);return u.length===0?null:de("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:u.map((g,b)=>de("img",{src:g.url,title:g.label,style:Fi,onClick:()=>i(g.url)},b))})})(),s&&!t.replyToQuestion&&(()=>{let u=Ng(t,o);return u.length===0?null:de("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:u.map((g,b)=>de("img",{src:g.url,title:g.label,style:Fi,onClick:()=>i(g.url)},b))})})(),l&&de("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:vo(l)}),(p||d)&&dt("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151"},children:[p&&de("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:t.toolsUsed.map((u,g)=>de("div",{children:u},g))}),d&&t.resolutions.map((u,g)=>{var v;let b=(v=u.finalScope)!=null?v:u.inferredScope;return dt("div",{style:{marginTop:p?4:0},children:[de("span",{style:{color:u.status==="resolved"?"#10b981":"#f59e0b"},children:u.status==="resolved"?"Done":"Needs review"}),u.summary?` \u2014 ${u.summary}`:""]},g)})]}),!s&&t.responseText&&(()=>{let u=Ag(t.responseText);return u.length===0?null:de("div",{style:{padding:"8px 16px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#374151",marginTop:2},children:u.map((g,b)=>dt("div",{style:{marginTop:b>0?6:0},children:[de("span",{style:{display:"inline-block",backgroundColor:"#8b5cf6",color:"#fff",fontSize:9,fontWeight:600,textTransform:"uppercase",padding:"1px 5px",borderRadius:3,marginRight:6,verticalAlign:"middle"},children:g.category}),de("strong",{children:g.element})," \u2014 ",g.decision,de("div",{style:{color:"#9ca3af",fontStyle:"italic",marginTop:1},children:g.reason})]},b))})})()]},`${t.jobId}-${n}`)});function Fc({threadId:e,bridgeUrl:t,accentColor:n,isStreaming:o,isQueued:r,queuePosition:i,streamingEvents:s,onClose:a,onReply:l,onCancel:d,lastError:c,onMouseEnter:p,toolbarRef:u,currentModel:g,currentProvider:b,annotationNumber:v,annotationText:A}){let[T,$]=ro([]),[P,O]=ro(!0),[w,N]=ro(""),[se,ee]=ro([]),G=go(!1),oe=go(null),[W,Z]=ro(!0),[k,Ce]=ro(0),[Q,fe]=ro(null),_=Br(X=>fe(X),[]),le=go(null),M=Br((X,ie)=>{let we=X&&ie.trim();le.current&&(le.current.style.opacity=we?"0.65":"1"),oe.current&&(oe.current.style.borderTop=`1px solid ${we?n:"rgba(0,0,0,0.12)"}`)},[n]),ue=go(null),Me=go(null),Ne=go(o),ve=go(Zs()),We=go({x:0,y:0}),Re=go(!1),ge=go({x:0,y:0,offsetX:0,offsetY:0}),qe=go(!0),[,ft]=ro(0);So(()=>{try{let X=localStorage.getItem(qs);if(X){let ie=JSON.parse(X);if(typeof ie.top=="number"&&typeof ie.left=="number"){let we=window.innerWidth-Dr-Dn,ke={top:Math.max(Dn,Math.min(ie.top,window.innerHeight-Dn-200)),left:Math.max(Dn,Math.min(ie.left,we))};qe.current=ke.left>=we-2,ve.current=ke,ft(Tt=>Tt+1)}}}catch(X){}},[]),So(()=>{let X=()=>{if(qe.current)ve.current=Zs();else{let ie=ve.current,we=window.innerWidth-Dr-Dn;ve.current={top:Math.max(Dn,Math.min(ie.top,window.innerHeight-Dn-200)),left:Math.max(Dn,Math.min(ie.left,we))}}ft(ie=>ie+1)};return window.addEventListener("resize",X,{passive:!0}),()=>window.removeEventListener("resize",X)},[]),So(()=>{let X=Me.current;if(!X)return;let ie=je=>{je.button!==0||je.target.closest("button")||(je.preventDefault(),je.stopPropagation(),Re.current=!0,ge.current={x:je.clientX,y:je.clientY,offsetX:We.current.x,offsetY:We.current.y})},we=je=>{if(!Re.current)return;let tt=ge.current,ht=tt.offsetX+(je.clientX-tt.x),Ft=tt.offsetY+(je.clientY-tt.y),St=Math.max(Dn,Math.min(window.innerWidth-Dr-Dn,ve.current.left+ht)),lt=Math.max(Dn,ve.current.top+Ft);We.current={x:St-ve.current.left,y:lt-ve.current.top};let ut=ue.current;ut&&(ut.style.top=`${lt}px`,ut.style.left=`${St}px`,ut.style.height=`${Oc(lt,St,u==null?void 0:u.current)}px`)},ke=()=>{if(!Re.current)return;let je=ve.current.top+We.current.y,tt=ve.current.left+We.current.x;ve.current={top:je,left:tt},We.current={x:0,y:0};let ht=window.innerWidth-Dr-Dn;qe.current=tt>=ht-2;try{localStorage.setItem(qs,JSON.stringify({top:je,left:tt}))}catch(Ft){}Re.current=!1},Tt=()=>{ve.current=Zs(),We.current={x:0,y:0},qe.current=!0;try{localStorage.removeItem(qs)}catch(je){}ft(je=>je+1)};return X.addEventListener("mousedown",ie),window.addEventListener("mousemove",we),window.addEventListener("mouseup",ke),X.addEventListener("dblclick",Tt),()=>{X.removeEventListener("mousedown",ie),window.removeEventListener("mousemove",we),window.removeEventListener("mouseup",ke),X.removeEventListener("dblclick",Tt)}},[]);let gt=Br(()=>{fetch(`${t}/thread/${e}`).then(X=>X.json()).then(X=>{var ie;$((ie=X.messages)!=null?ie:[]),O(!1)}).catch(()=>O(!1))},[t,e]);So(()=>{O(!0),gt()},[gt]),So(()=>{Ne.current&&!o&>(),Ne.current=o},[o]);let ln=Pc(()=>s?jg(s):[],[s]),K=Pc(()=>s?Gg(s):null,[s]);So(()=>{let X=le.current;if(!X)return;let ie=()=>{Z(X.scrollHeight-X.scrollTop-X.clientHeight<40);let ke=X.scrollTop+X.clientHeight,Tt=X.querySelectorAll("[data-msg]"),je=0;for(let tt=0;tt<Tt.length;tt++){let ht=Tt[tt];ht.offsetTop+ht.offsetHeight>ke+20&&je++}Ce(je)};return X.addEventListener("scroll",ie,{passive:!0}),()=>X.removeEventListener("scroll",ie)},[]),So(()=>{W&&le.current&&(le.current.scrollTop=le.current.scrollHeight)},[T,ln.length,o,W]),So(()=>{let X=ie=>{ie.key==="Escape"&&(ie.stopPropagation(),a())};return document.addEventListener("keydown",X),()=>document.removeEventListener("keydown",X)},[a]);let ce=Br(()=>{if(!w.trim()||!l)return;let X=w.trim(),ie=se.length>0?se:void 0,we=ie?ie.map(ke=>URL.createObjectURL(ke)):void 0;$(ke=>[...ke,f({role:"human",timestamp:Date.now(),jobId:"pending",replyToQuestion:X},we?{replyImageUrls:we}:{})]),l(e,X,ie),N(""),ee([])},[w,se,e,l]),Ae=Br(X=>{let ie=X.clipboardData.items,we=[];for(let ke=0;ke<ie.length;ke++){let Tt=ie[ke];if(Tt.type.startsWith("image/")){let je=Tt.getAsFile();je&&we.push(je)}}we.length>0&&(X.preventDefault(),ee(ke=>[...ke,...we]))},[]),$e=Br(X=>{X.key==="Enter"&&(X.metaKey||X.ctrlKey)&&(X.preventDefault(),ce())},[ce]),rt=ve.current.top+We.current.y,Je=ve.current.left+We.current.x,ae=Oc(rt,Je,u==null?void 0:u.current);return dt(Fo,{children:[de("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:X=>{X.target===X.currentTarget&&a()},style:{position:"fixed",inset:0,zIndex:9999}}),dt("div",{ref:ue,style:h(f({},Tg),{height:ae,position:"fixed",top:rt,left:Je,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>`,we=`url("data:image/svg+xml,${encodeURIComponent(ie)}")`;return dt(Fo,{children:[de("style",{children:`@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
68
|
+
[data-popmelt-reply]::placeholder { opacity: 0.35; }`}),de("div",{style:f({position:"absolute",inset:-3,padding:5,backgroundImage:we,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"})})]})})(),dt("div",{style:{display:"flex",flexDirection:"column",overflow:"hidden",flex:1,minHeight:0},children:[dt("div",{ref:Me,style:h(f({},Mg),{backgroundColor:n,color:"#ffffff",cursor:"grab",userSelect:"none",WebkitUserSelect:"none"}),children:[dt("span",{style:{display:"flex",alignItems:"center",gap:3,minWidth:0},children:[de("span",{style:{flexShrink:0},children:v?`${v}.`:"Conversation"}),A&&de("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:A})]}),de("button",{onClick:a,style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1},children:"\xD7"})]}),de("style",{dangerouslySetInnerHTML:{__html:Rg+`
|
|
69
69
|
[data-devtools="thread-panel"] ::selection { background: color-mix(in srgb, ${n} 15%, transparent); }
|
|
70
|
-
`}}),dt("div",{ref:ae,style:h(f({},Cg),{transition:"opacity 150ms ease"}),"data-devtools":"thread-panel-messages",children:[P&&se("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!P&&T.length===0&&!o&&se("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),T.map((te,ie)=>se(Yg,{msg:te,index:ie,bridgeUrl:t,accentColor:n,onLightbox:D},`${te.jobId}-${ie}`)),o&&se("div",{style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:r?dt("div",{style:{display:"flex",alignItems:"center",gap:6},children:[dt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:n,style:{verticalAlign:"middle",flexShrink:0,opacity:.5},children:[se("circle",{cx:"12",cy:"6",r:"2"}),se("circle",{cx:"6",cy:"12",r:"2"}),se("circle",{cx:"18",cy:"12",r:"2"}),se("circle",{cx:"12",cy:"18",r:"2"})]}),dt("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:["queued",i?` ${i}`:""]})]}):dt(Ro,{children:[dt("div",{style:{display:"flex",alignItems:"center",gap:4},children:[se(Fr,{provider:b,size:11,style:{color:"#6b7280"}}),se("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:Ps(g,b)})]}),Yt.map((te,ie)=>{if(te.kind==="tool_group")return se(Oc,{tool:te.tool,items:te.items},ie);if(te.kind==="file_content")return se($g,{file:te.file,content:te.content,ext:te.ext,isPlan:te.isPlan,onAccept:te.isPlan&&l?()=>l(e,"Looks good, please proceed with implementation."):void 0},ie);if(te.kind==="thinking")return se("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:te.text},ie);let ve=Gs(te.text);return ve?se("div",{style:{paddingLeft:12,lineHeight:1.5,wordBreak:"break-word"},children:uo(ve)},ie):null}),dt("div",{style:{display:"flex",alignItems:"center",gap:6},children:[se(Lg,{color:n}),d&&se("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"})]})]})}),!N&&T.length>0&&se("div",{style:{position:"sticky",bottom:5,display:"flex",justifyContent:"flex-end",paddingRight:3,pointerEvents:"none"},children:se("button",{onClick:()=>{ae.current&&ae.current.scrollTo({top:ae.current.scrollHeight,behavior:"smooth"})},style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:4,fontSize:10,fontFamily:Qt,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:dt("span",{style:{position:"relative",backgroundColor:"#eaeaea",padding:"0 6px",color:"#374151",fontFamily:Qt,lineHeight:1.4},children:[M," message",M!==1?"s":""," \u2193"]})})})]}),!o&&c&&dt("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[se("span",{style:{fontWeight:600},children:"Error: "}),c]}),l&&dt("div",{style:{flexShrink:0,position:"relative"},children:[re.length>0&&se("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:re.map((te,ie)=>dt("span",{onClick:()=>oe(ve=>ve.filter((Me,mt)=>mt!==ie)),onMouseEnter:ve=>{let Me=ve.currentTarget.querySelector("[data-chip-x]");Me&&(Me.style.color="#fff")},onMouseLeave:ve=>{let Me=ve.currentTarget.querySelector("[data-chip-x]");Me&&(Me.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,se("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"rgba(255,255,255,0.4)"},children:"\xD7"})]},ie))}),dt("div",{ref:Q,style:h(f({},kg),{borderTop:"1px solid rgba(0,0,0,0.12)"}),children:[se("input",{"data-popmelt-reply":!0,autoFocus:!0,value:k,onChange:te=>{G(te.target.value),I(W.current,te.target.value)},onFocus:()=>{W.current=!0,I(!0,k)},onBlur:()=>{W.current=!1,I(!1,k)},onKeyDown:Oe,onPaste:Te,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:Qt,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),se("button",{onClick:X,disabled:!k.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:k.trim()?"pointer":"default",color:k.trim()?n:"rgba(0,0,0,0.2)",flexShrink:0},children:dt("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[se("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"}),se("path",{d:"M6 12h16"})]})})]})]})]})]}),V&&se(Og,{src:V,onClose:()=>fe(null)})]})}import{jsx as Ir,jsxs as _c}from"react/jsx-runtime";var Vg=[],Us=Jg(null),js="devtools-provider",Ri="devtools-model",Ys="devtools-open-thread-id",Js="popmelt-synthesize-thread";async function Dc(e,t){t?await t(e):(window.history.pushState(window.history.state,"",e),window.dispatchEvent(new PopStateEvent("popstate",{state:window.history.state}))),await new Promise(n=>{requestAnimationFrame(()=>requestAnimationFrame(()=>{setTimeout(n,600)}))})}var Xg={0:0,1:1},Kg={0:0,1:1,2:1};function qg(e,t,n){var r,i;if(t==="copilot")return 0;let o=t==="codex"?Ti:ki;return e==="copilot"?0:e==="claude"&&t==="codex"?(r=Xg[n])!=null?r:Math.min(n,o.length-1):e==="codex"&&t==="claude"&&(i=Kg[n])!=null?i:Math.min(n,o.length-1)}function Zg({children:e,enabled:t=process.env.NODE_ENV==="development",bridgeUrl:n=typeof window!="undefined"?(r=>(r=window.__POPMELT_BRIDGE_URL__)!=null?r:"http://localhost:1111")():"http://localhost:1111",navigate:o}){var Ie,je,Pt,Ft,un;let[i,s]=Oa(),a=Aa(n,t),l=tn(null),d=tn(null),c=(Ie=La())!=null?Ie:n,p=tn(new Map),u=tn(new Map),g=tn(!1),b=cr(),[x,A]=nn(()=>typeof window=="undefined"?"claude":localStorage.getItem(js)||"claude"),[T,z]=nn(()=>{if(typeof window=="undefined")return 0;let S=localStorage.getItem(Ri);return S&&parseInt(S,10)||0}),[P,O]=nn([]),[k,G]=nn({}),[re,oe]=nn({});zt(()=>{a.isConnected&&ca(c).then(S=>{if(!S)return;let C=Object.entries(S.providers).filter(([,Ae])=>Ae.available).map(([Ae])=>Ae);C.length>0&&O(C);let le={};for(let[Ae,ke]of Object.entries(S.providers))ke.models&&ke.models.length>0&&(le[Ae]=ke.models);G(le);let ce={};for(let[Ae,ke]of Object.entries(S.providers))ke.mcp&&(ce[Ae]=ke.mcp);oe(ce)})},[a.isConnected,a.capabilitiesVersion,c]),zt(()=>{if(P.length>0&&!P.includes(x)){let S=P[0];A(S),localStorage.setItem(js,S)}},[P,x]);let W=x==="codex"?[...Ti]:x==="copilot"?[...As]:[...ki],Q=k[x]&&k[x].length>0?k[x]:W,N=(je=Q[T])!=null?je:Q[0];zt(()=>{T>=Q.length&&(z(0),localStorage.setItem(Ri,"0"))},[T,Q.length]);let ee=dn(S=>{let C=x;A(S),localStorage.setItem(js,S);let le=qg(C,S,T);z(le),localStorage.setItem(Ri,String(le))},[x,T]),M=dn(S=>{z(S),localStorage.setItem(Ri,String(S))},[]),[Le,V]=nn(new Set),[fe,D]=nn(null),[ae,I]=nn(null),[pe,me]=nn(null),[Fe,we]=nn(null);zt(()=>{a.isConnected&&ir(c).then(S=>{S!=null&&S.components&&V(new Set(Object.keys(S.components)))})},[a.isConnected,c]);let Je=dn(async S=>{let C=[];for(let le of S)try{(await pa(le,c)).added&&C.push(le)}catch(ce){console.error("[Popmelt] Failed to add component to model:",le,ce)}C.length>0&&(V(le=>{let ce=new Set(le);for(let Ae of C)ce.add(Ae);return ce}),D(C[C.length-1]))},[c]),Re=dn(S=>{D(S)},[]),Ce=dn(()=>{ir(c).then(S=>{S!=null&&S.components&&V(new Set(Object.keys(S.components)))})},[c]),at=dn(async S=>{try{(await fa(S,c)).removed&&V(le=>{let ce=new Set(le);return ce.delete(S),ce})}catch(C){console.error("[Popmelt] Failed to remove component from model:",C)}},[c]),gt=dn((S,C)=>{s({type:"MODIFY_SPACING_TOKEN",payload:S}),s({type:"ADD_SPACING_TOKEN_CHANGE",payload:C})},[s]),bt=dn((S,C)=>{s({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:S,originalValue:C}})},[s]),[Yt,K]=nn(null),[X,Te]=nn(()=>typeof window=="undefined"?null:localStorage.getItem(Js)||null);zt(()=>{X?localStorage.setItem(Js,X):localStorage.removeItem(Js)},[X]);let[Oe,Xe]=nn(0),Pe=tn([]);zt(()=>{let S=Pe.current,C=i.spacingTokenMods;Pe.current=C;let le=new Map(S.map(ke=>[ke.tokenPath,ke])),ce=new Map(C.map(ke=>[ke.tokenPath,ke])),Ae=!1;for(let[ke,Ue]of ce){let Ye=le.get(ke);if(!(Ye&&Ye.currentValue===Ue.currentValue)){Ae=!0,Ue.currentValue==="__deleted__"?ga(ke,c).catch(Et=>console.error("[Popmelt] Failed to sync token delete:",Et)):Bi(ke,Ue.currentValue,c).catch(Et=>console.error("[Popmelt] Failed to sync token update:",Et));for(let Et of Ue.targets){let wt=document.querySelector(Et.selector);if(wt)if(Ue.currentValue==="__deleted__")wt.style.removeProperty(Et.property);else{let ht=Ue.currentPx;ht>0&&wt.style.setProperty(Et.property,`${ht}px`,"important")}}}}for(let[ke,Ue]of le)if(!ce.has(ke)){Ae=!0,Bi(ke,Ue.originalValue,c).catch(Ye=>console.error("[Popmelt] Failed to restore token on undo:",Ye));for(let Ye of Ue.targets){let Et=document.querySelector(Ye.selector);Et&&Et.style.removeProperty(Ye.property)}}Ae&&Xe(ke=>ke+1)},[i.spacingTokenMods,c]);let[he,te]=nn(()=>Da()),ie=dn(S=>{te(S),_a(S)},[]),[ve,Me]=nn(()=>typeof window=="undefined"?null:localStorage.getItem(Ys)||null),mt=tn(null),[Ne,ze]=nn(new Set),[nt,St]=nn(null);zt(()=>{ve?localStorage.setItem(Ys,ve):localStorage.removeItem(Ys)},[ve]);let Ke="popmelt-in-flight-jobs",[qe,Rt]=nn(()=>{try{let S=localStorage.getItem(Ke);return S?JSON.parse(S):{}}catch(S){return{}}});zt(()=>{try{Object.keys(qe).length>0?localStorage.setItem(Ke,JSON.stringify(qe)):localStorage.removeItem(Ke)}catch(S){}},[qe]),zt(()=>{let S=C=>{if(C.key===Ke)try{let le=C.newValue?JSON.parse(C.newValue):{};Rt(le)}catch(le){}};return window.addEventListener("storage",S),()=>window.removeEventListener("storage",S)},[]);let _n=tn(new Map),Kn=tn(new Map);zt(()=>{for(let[S,C]of Object.entries(qe))C.annotationIds.length>0&&_n.current.set(S,C.annotationIds),C.threadId&&Kn.current.set(S,C.threadId)},[qe]);let vn=tn("");zt(()=>{if(i.annotations.length===0)return;let S=Object.keys(qe).sort().join(",");if(S===vn.current)return;vn.current=S;let C=new Set;for(let ce of Object.values(qe))for(let Ae of ce.annotationIds)C.add(Ae);let le=i.annotations.filter(ce=>C.has(ce.id)?!1:!!(ce.status==="in_flight"||(ce.status==="pending"||!ce.status)&&(ce.captured||ce.threadId))).map(ce=>ce.id);le.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:le,status:"dismissed"}})},[i.annotations,qe,s]);let It=fo(()=>{let S=new Set;for(let C of Object.values(qe))for(let le of C.annotationIds)S.add(le);return S},[qe]),qn=fo(()=>{let S=new Set(a.activeJobIds),C=new Set;for(let[le,ce]of Object.entries(qe))if(S.has(le))for(let Ae of ce.annotationIds)C.add(Ae);return C},[qe,a.activeJobIds]),on=fo(()=>{let S=new Set(a.activeJobIds),C=Object.entries(qe).filter(([Ae])=>!S.has(Ae)),le=C.length,ce=new Map;return C.forEach(([,Ae],ke)=>{let Ue=`(${ke+1}/${le})`;for(let Ye of Ae.annotationIds)ce.set(Ye,Ue)}),ce},[qe,a.activeJobIds]),Zn=fo(()=>{let S=new Set;for(let C of Object.values(qe))for(let le of C.styleSelectors)S.add(le);return S},[qe]),xt=fo(()=>{let S=new Map;for(let C of Object.values(qe)){for(let le of C.styleSelectors)S.set(le,C.color);for(let le of C.annotationIds){let ce=i.annotations.find(Ae=>Ae.id===le);if(ce&&(ce.linkedSelector&&S.set(ce.linkedSelector,C.color),ce.groupId))for(let Ae of i.annotations)Ae.groupId===ce.groupId&&Ae.linkedSelector&&S.set(Ae.linkedSelector,C.color)}}return S},[qe,i.annotations]),rn=tn(i.annotations);rn.current=i.annotations;let _t=tn(i.styleModifications);_t.current=i.styleModifications;let sn=tn(qe);sn.current=qe,zt(()=>{let S=null,C=()=>{var Ye,Et;if(Object.keys(sn.current).length>0)return;let ce=rn.current,Ae=_t.current,ke=[],Ue=[];for(let wt of ce){if(!wt.linkedSelector||!wt.linkedSelector.startsWith("[data-pm=")||wt.pathname||wt.captured||wt.status&&wt.status!=="pending")continue;let ht=document.querySelector(wt.linkedSelector);!ht&&((Et=(Ye=wt.elements)==null?void 0:Ye[0])!=null&&Et.selector)&&(ht=document.querySelector(wt.elements[0].selector)),ht||ke.push(wt.linkedSelector)}for(let wt of Ae)document.querySelector(wt.selector)||Ue.push(wt.selector);(ke.length>0||Ue.length>0)&&s({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:ke,styleSelectors:Ue}})},le=new MutationObserver(ce=>{ce.some(Ae=>Ae.removedNodes.length>0)&&(S&&clearTimeout(S),S=setTimeout(C,3e3))});return le.observe(document.body,{childList:!0,subtree:!0}),()=>{le.disconnect(),S&&clearTimeout(S)}},[s]);let Nn=tn(typeof window!="undefined"?window.location.pathname:"/");zt(()=>{let S=ce=>{if(g.current)return;let Ae=window.location.pathname;if(ce===Ae)return;let ke=rn.current.filter(Ye=>{var Et;return Ye.pathname===ce&&((Et=Ye.status)!=null?Et:"pending")==="pending"});if(console.log(`[Popmelt] Navigation from ${ce} \u2192 ${Ae}, ${ke.length} pending annotations on departing page`),ke.length===0)return;let Ue=l.current;if(!Ue){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if(Ar(document.body,Ue,ke,{dpr:1}).then(Ye=>Pr(Ye)).then(Ye=>{Ye?(u.current.set(ce,Ye),console.log(`[Popmelt] Cached screenshot for ${ce} (${(Ye.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${ce}`)}).catch(Ye=>{console.warn("[Popmelt] Capture-on-leave failed:",Ye)}),u.current.size>20){let Ye=[...u.current.entries()];u.current=new Map(Ye.slice(-10))}},C=ce=>{var ke;let Ae=(ke=ce.detail)==null?void 0:ke.prevPath;Ae&&(S(Ae),Nn.current=window.location.pathname)},le=()=>{let ce=Nn.current;S(ce),Nn.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",C),window.addEventListener("popstate",le),()=>{window.removeEventListener("popmelt:locationchange",C),window.removeEventListener("popstate",le)}},[]),zt(()=>{a.lastCompletedJobId&&a.lastCompletedJobId in qe&&Rt(S=>{var ce;let Ae=S,{[ce=a.lastCompletedJobId]:C}=Ae;return jn(Ae,[Co(ce)])}),a.lastCompletedJobId&&a.lastCompletedJobId===Yt&&(Xe(S=>S+1),K(null))},[a.lastCompletedJobId,Yt]);let An=tn(new Set),Kt=tn(!1);zt(()=>{if(!a.isConnected){Kt.current=!1;return}Kt.current||(Kt.current=!0,rr(c).then(async S=>{var Ue,Ye,Et,wt;if(!S)return;let C=(Ue=S.activeJobs)!=null?Ue:[],le=(Ye=S.recentJobs)!=null?Ye:[],ce=new Set(C.map(ht=>ht.id)),Ae=JSON.parse(localStorage.getItem(Ke)||"{}"),ke=new Set;for(let ht of Object.values(Ae))if(ht.annotationIds)for(let kt of ht.annotationIds)ke.add(kt);Rt(ht=>{var Qn,kn,Vt;let kt=f({},ht),ut=Date.now();for(let pt of Object.keys(kt)){if(pt.startsWith("_pending_")){let Cn=parseInt(pt.replace(/^_pending_(?:reply_)?/,""),10);!isNaN(Cn)&&ut-Cn>3e4&&delete kt[pt];continue}ce.has(pt)||delete kt[pt]}for(let pt of C)!kt[pt.id]&&((Qn=pt.annotationIds)!=null&&Qn.length||pt.threadId)&&(kt[pt.id]={annotationIds:(kn=pt.annotationIds)!=null?kn:[],styleSelectors:[],color:(Vt=pt.color)!=null?Vt:"#888",threadId:pt.threadId});let Ut=new Set;for(let pt of le)if(pt.annotationIds)for(let Cn of pt.annotationIds)Ut.add(Cn);for(let pt of Object.keys(kt)){if(!pt.startsWith("_pending_"))continue;let Cn=kt[pt];Cn&&Cn.annotationIds.some(Ze=>Ut.has(Ze))&&delete kt[pt]}return kt});for(let ht of le)if(ht.status==="done"&&(Et=ht.annotationIds)!=null&&Et.length&&ht.annotationIds.some(kt=>ke.has(kt))&&!An.current.has(ht.id))try{let kt=await jr(c,ht.id);if(!kt)continue;let ut=kt.events.find(Ut=>Ut.type==="done");ut&&Array.isArray(ut.resolutions)&&(An.current.add(ht.id),s({type:"APPLY_RESOLUTIONS",payload:{resolutions:ut.resolutions,threadId:(wt=ut.threadId)!=null?wt:void 0}}))}catch(kt){}}))},[a.isConnected,c,s]),zt(()=>{let S=a.events.filter(C=>C.type==="done"&&C.data.resolutions);for(let C of S){let le=C.data.jobId;An.current.has(le)||(An.current.add(le),Array.isArray(C.data.resolutions)&&s({type:"APPLY_RESOLUTIONS",payload:{resolutions:C.data.resolutions,threadId:C.data.threadId}}))}},[a.events,s]);let Sn=tn(new Set);zt(()=>{let S=a.events.filter(C=>C.type==="error"&&C.data.cancelled);for(let C of S){let le=C.data.jobId;if(!le||Sn.current.has(le))continue;Sn.current.add(le);let ce=qe[le];ce&&ce.annotationIds.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:ce.annotationIds,status:"dismissed"}})}},[a.events,qe,s]);let bn=tn(0);zt(()=>{let S=a.incrementalResolutions;if(S.length<=bn.current)return;let C=S.slice(bn.current);bn.current=S.length,s({type:"APPLY_RESOLUTIONS",payload:{resolutions:C}})},[a.incrementalResolutions,s]),zt(()=>{a.incrementalResolutions.length===0&&(bn.current=0)},[a.incrementalResolutions.length]);let $=dn(async()=>{let S=l.current;if(!S)return!1;let C=await Ar(document.body,S,i.annotations);if(C.length===0)return!1;let le=await ja(C,i.annotations,i.styleModifications);return le&&s({type:"MARK_CAPTURED"}),le},[i.annotations,i.styleModifications,s]),De=dn((S,C)=>{let le=p.current.get(S)||[];p.current.set(S,[...le,...C])},[]),Ge=dn(async()=>{var Cn;let S=l.current;if(!S)return!1;let C=i.annotations.filter(Ze=>{var Ot;return((Ot=Ze.status)!=null?Ot:"pending")==="pending"}),le=i.spacingTokenChanges.filter(Ze=>!Ze.captured);if(C.length===0&&i.styleModifications.filter(Ze=>!Ze.captured).length===0&&le.length===0)return!1;let ce=new Map;for(let Ze of C){let Ot=Ze.pathname||b;ce.has(Ot)||ce.set(Ot,[]),ce.get(Ot).push(Ze)}let Ae=new Map,ke=[...ce.keys()].filter(Ze=>Ze!==b);if(ke.length>0){let Ze=b,Ot={x:window.scrollX,y:window.scrollY};g.current=!0;for(let Zt of ke)try{console.log(`[Popmelt] Navigating to ${Zt} for screenshot capture`),await Dc(Zt,o),window.location.pathname!==Zt&&console.warn(`[Popmelt] Navigation to ${Zt} did not take effect (at ${window.location.pathname})`);let Tn=ce.get(Zt)||[],Po=await Ar(document.body,S,Tn,{dpr:1}),Oo=await Pr(Po);Oo&&(Ae.set(Zt,Oo),console.log(`[Popmelt] Captured ${Zt} (${(Oo.size/1024).toFixed(0)}KB)`))}catch(Tn){console.warn(`[Popmelt] Failed to capture ${Zt}:`,Tn)}await Dc(Ze,o),window.scrollTo(Ot.x,Ot.y),g.current=!1}let Ue=C.filter(Ze=>(Ze.pathname||b)===b),Ye=await Ar(document.body,S,Ue.length>0?i.annotations:[],{dpr:1});if(Ye.length>0){let Ze=await Pr(Ye);Ze&&Ae.set(b,Ze)}if(Ae.size===0)return!1;let Et=Fi(C,i.styleModifications,void 0,le.length>0?le:void 0),wt=JSON.stringify(Et),ht=new Map;for(let Ze of C){let Ot=p.current.get(Ze.id);if(Ot&&Ot.length>0&&ht.set(Ze.id,Ot),Ze.groupId){for(let Zt of C)if(Zt.groupId===Ze.groupId&&Zt.id!==Ze.id){let Tn=p.current.get(Zt.id);Tn&&Tn.length>0&&ht.set(Zt.id,Tn)}}}let kt=ce.size>1;console.log(`[Popmelt] Submit: ${ce.size} page(s), ${Ae.size} screenshot(s), pages: [${[...ce.keys()].join(", ")}], cached: [${[...u.current.keys()].join(", ")}]`);let ut=kt?Ae:(Cn=Ae.get(b))!=null?Cn:Ae,Ut=C.map(Ze=>Ze.id),Qn=i.styleModifications.filter(Ze=>!Ze.captured).map(Ze=>Ze.selector),kn=Hi(i.activeColor),Vt=`_pending_${Date.now()}`,pt={annotationIds:Ut,styleSelectors:Qn,color:i.activeColor,threadId:void 0};try{let Ze=JSON.parse(localStorage.getItem(Ke)||"{}");Ze[Vt]=pt,localStorage.setItem(Ke,JSON.stringify(Ze))}catch(Ze){}Rt(Ze=>h(f({},Ze),{[Vt]:pt}));try{let{jobId:Ze,threadId:Ot}=await ua(ut,wt,c,kn,x,N.id,ht.size>0?ht:void 0,Ni());for(let Gn of ht.keys())p.current.delete(Gn);for(let Gn of ce.keys())u.current.delete(Gn);let Zt=h(f({},pt),{threadId:Ot});try{let Gn=JSON.parse(localStorage.getItem(Ke)||"{}");delete Gn[Vt],Gn[Ze]=Zt,localStorage.setItem(Ke,JSON.stringify(Gn))}catch(Gn){}Rt(Gn=>{let Pi=Gn,{[Vt]:Vs}=Pi,Ai=jn(Pi,[Co(Vt)]);return h(f({},Ai),{[Ze]:Zt})}),s({type:"MARK_CAPTURED"}),Ot&&Ut.length>0&&s({type:"SET_ANNOTATION_THREAD",payload:{ids:Ut,threadId:Ot}});let Tn=i.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),Oo=((Tn!=null&&Tn[1]?parseFloat(Tn[1]):29)+60)%360;return s({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${Oo})`}),!0}catch(Ze){try{let Ot=JSON.parse(localStorage.getItem(Ke)||"{}");delete Ot[Vt],localStorage.setItem(Ke,JSON.stringify(Ot))}catch(Ot){}return Rt(Ot=>{let Po=Ot,{[Vt]:Zt}=Po;return jn(Po,[Co(Vt)])}),console.error("[Pare] Failed to send to bridge:",Ze),!1}},[i.annotations,i.styleModifications,i.spacingTokenChanges,i.activeColor,s,c,x,N.id,b,o]),En=dn(async()=>{if(X){Me(X);return}try{let{jobId:S,threadId:C}=await ha(c,x,N.id);K(S),Te(C);let le={annotationIds:[],styleSelectors:[],color:"#6b7280",threadId:C};Rt(ce=>h(f({},ce),{[S]:le})),Me(C)}catch(S){console.error("[Popmelt] Failed to start synthesize:",S)}},[c,x,N.id,X]),At=dn(async(S,C,le)=>{var Et,wt,ht,kt;let ce=(kt=(ht=(Et=Object.values(sn.current).find(ut=>ut.threadId===S))==null?void 0:Et.color)!=null?ht:(wt=i.annotations.find(ut=>ut.threadId===S))==null?void 0:wt.color)!=null?kt:i.activeColor,Ae=i.annotations.filter(ut=>ut.threadId===S&&(ut.status==="waiting_input"||ut.status==="resolved"||ut.status==="needs_review")),ke=Ae.map(ut=>ut.id),Ue=`_pending_reply_${Date.now()}`,Ye={annotationIds:ke,styleSelectors:[],color:ce,threadId:S};try{let ut=JSON.parse(localStorage.getItem(Ke)||"{}");ut[Ue]=Ye,localStorage.setItem(Ke,JSON.stringify(ut))}catch(ut){}Rt(ut=>h(f({},ut),{[Ue]:Ye}));try{let ut=Hi(i.activeColor),{jobId:Ut}=await ya(S,C,c,ut,x,N.id,le,Ni()),Qn=f({},Ye);try{let kn=JSON.parse(localStorage.getItem(Ke)||"{}");delete kn[Ue],kn[Ut]=Qn,localStorage.setItem(Ke,JSON.stringify(kn))}catch(kn){}Rt(kn=>{let Cn=kn,{[Ue]:Vt}=Cn,pt=jn(Cn,[Co(Ue)]);return h(f({},pt),{[Ut]:Qn})}),Ae.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:ke,status:"in_flight"}}),a.dismissQuestion(S)}catch(ut){try{let Ut=JSON.parse(localStorage.getItem(Ke)||"{}");delete Ut[Ue],localStorage.setItem(Ke,JSON.stringify(Ut))}catch(Ut){}Rt(Ut=>{let Vt=Ut,{[Ue]:Qn}=Vt;return jn(Vt,[Co(Ue)])}),console.error("[Pare] Failed to send reply:",ut)}},[i.activeColor,i.annotations,c,a.dismissQuestion,s,x,N.id]),qt=tn(new Set);zt(()=>{for(let S of a.pendingQuestions){if(qt.current.has(S.jobId))continue;qt.current.add(S.jobId);let C=S.annotationIds&&S.annotationIds.length>0?S.annotationIds:void 0;!C&&S.threadId&&(C=i.annotations.filter(le=>le.threadId===S.threadId).map(le=>le.id)),C&&C.length>0&&s({type:"SET_ANNOTATION_QUESTION",payload:{ids:C,question:S.question,threadId:S.threadId}})}},[a.pendingQuestions,s,i.annotations]);let wn=fo(()=>{if(a.activeJobId&&a.activeJobId in qe)return qe[a.activeJobId].color;let S=Object.values(qe);return S.length>0?S[S.length-1].color:void 0},[a.activeJobId,qe]),Wt=dn(S=>{Me(S)},[]),Gt=dn(S=>{var ce;let C=qe[S],le=(C==null?void 0:C.threadId)||Kn.current.get(S);le&&(mt.current=(ce=C==null?void 0:C.color)!=null?ce:null,Me(le))},[qe]),Pn=dn(S=>{if(!S){St(null);return}let C=_n.current.get(S);C&&C.length>0?St(new Set(C)):St(null)},[]),Nt=dn(async S=>{try{let C=S?`${c}/cancel?jobId=${S}`:`${c}/cancel`;await fetch(C,{method:"POST"})}catch(C){}},[c]);zt(()=>{i.activeTool==="model"&&ve&&ve!==X&&Me(null)},[i.activeTool]);let lt=tn(null);zt(()=>{i.isAnnotating?lt.current&&(Me(lt.current),lt.current=null):ve&&(lt.current=ve,Me(null))},[i.isAnnotating]);let Ht=fo(()=>{if(!ve)return null;for(let[S,C]of Object.entries(qe))if(C.threadId===ve)return S;for(let[S,C]of Object.entries(a.activeJobThreads))if(C===ve)return S;return null},[ve,qe,a.activeJobThreads]),Jt=ve?i.annotations.find(S=>S.threadId===ve):void 0,nr=fo(()=>Ht?a.events.filter(S=>S.data.jobId===Ht):Vg,[Ht,a.events.length]),go=fo(()=>{var S,C;return(C=(S=Jt==null?void 0:Jt.color)!=null?S:mt.current)!=null?C:i.activeColor},[Jt==null?void 0:Jt.color,i.activeColor]),Ao=Jt?i.annotations.indexOf(Jt)+1:void 0;zt(()=>{var C;let S=(C=Jt==null?void 0:Jt.color)!=null?C:mt.current;ve&&S&&s({type:"SET_COLOR",payload:S})},[ve]);let[ao,mo]=nn(!1),[or,w]=nn(0),H=tn(null),q=dn(S=>{S?(H.current&&(clearTimeout(H.current),H.current=null),mo(!0)):H.current=setTimeout(()=>{mo(!1),H.current=null},150)},[]),ye=dn(()=>{w(S=>S+1),a.clearEvents(),Me(null),ze(new Set),Nt()},[a.clearEvents,Nt]);zt(()=>()=>{H.current&&clearTimeout(H.current)},[]);let[de,ge]=nn(!1);zt(()=>{ge(!0)},[]);let He=fo(()=>({isEnabled:t}),[t]);return!t||!de?Ir(Us.Provider,{value:He,children:e}):_c(Us.Provider,{value:He,children:[e,Ir(Vl,{state:i,dispatch:s,onScreenshot:$,inFlightAnnotationIds:It,activeAnnotationIds:qn,queuePositionMap:on,inFlightStyleSelectors:Zn,inFlightSelectorColors:xt,onAttachImages:De,onReply:a.isConnected?At:void 0,onViewThread:a.isConnected?Wt:void 0,onCloseThread:S=>{Me(null),S&&ze(C=>new Set(C).add(S))},onModelComponentsAdd:a.isConnected?Je:void 0,onModelComponentFocus:a.isConnected?Re:void 0,onModelComponentHover:I,modelComponentNames:Le,modelPanelHoveredComponent:pe,modelSpacingTokenHover:Fe,highlightedAnnotationIds:nt,focusedThreadAnnotationId:Jt==null?void 0:Jt.id,externalCanvasRef:l,toolbarRef:d}),Ir(Tc,{children:_c(Ec,{children:[Ir(vc,{state:i,dispatch:s,onScreenshot:$,onSendToClaude:a.isConnected?Ge:void 0,hasActiveJobs:Object.keys(qe).length>0||a.activeJobIds.length>0,activeJobColor:wn,onCrosshairHover:q,onClear:ye,provider:x,onProviderChange:a.isConnected&&P.length>1?ee:void 0,availableProviders:P,modelIndex:T,modelCount:Q.length,modelLabel:N.label,onModelChange:a.isConnected?M:void 0,onViewThread:a.isConnected?Wt:void 0,isThreadPanelOpen:ve!==null&&ve!==X,mcpStatus:re,bridgeUrl:c,isBridgeConnected:a.isConnected,modelSelectedComponent:fe,modelCanvasHoveredComponent:ae,onModelComponentHover:me,onSpacingTokenHover:we,onModifySpacingToken:a.isConnected?gt:void 0,onDeleteSpacingToken:a.isConnected?bt:void 0,modelRefreshKey:Oe,onModelComponentAdded:Ce,onModelComponentRemoved:at,onSynthesizeRules:a.isConnected&&x!=="copilot"?En:void 0,isSynthesizing:Yt!==null,toolbarRef:d,snapPosition:he,onSnapPositionChange:ie}),ve&&Ir(Bc,{threadId:ve,bridgeUrl:c,accentColor:go,isStreaming:Ht!==null,isQueued:Ht!==null&&!a.activeJobIds.includes(Ht),queuePosition:Ht&&!a.activeJobIds.includes(Ht)?(()=>{let S=new Set(a.activeJobIds),C=Object.keys(qe).filter(ce=>!S.has(ce)),le=C.indexOf(Ht);return le>=0?`(${le+1}/${C.length})`:void 0})():void 0,streamingEvents:nr,onClose:()=>Me(null),onReply:At,onCancel:Ht?()=>Nt(Ht):void 0,lastError:(un=(Pt=a.lastErrorByJob)==null?void 0:Pt[Ht!=null?Ht:""])!=null?un:a.lastCompletedJobId&&Kn.current.get(a.lastCompletedJobId)===ve?(Ft=a.lastErrorByJob)==null?void 0:Ft[a.lastCompletedJobId]:void 0,toolbarRef:d,currentModel:N.id,currentProvider:x,annotationNumber:Ao,annotationText:Jt==null?void 0:Jt.text}),Ir(Cc,{bridge:a,bridgeUrl:c,inFlightJobs:qe,isVisible:ao||a.lastResponseText!==null||a.activeJobIds.length>0,onHover:q,clearSignal:or,onReply:At,onViewThread:Wt,onClickJob:Gt,onCancel:Nt,onHoverJob:Pn,isConnected:a.isConnected,dismissedThreadIds:Ne,snapPosition:he})]})})]})}function Qg(){let e=Ug(Us);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{Zg as PopmeltProvider,Qg as usePopmelt};
|
|
70
|
+
`}}),dt("div",{ref:le,style:h(f({},Ig),{transition:"opacity 150ms ease"}),"data-devtools":"thread-panel-messages",children:[P&&de("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!P&&T.length===0&&!o&&de("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),T.map((X,ie)=>de(Kg,{msg:X,index:ie,bridgeUrl:t,accentColor:n,onLightbox:_},`${X.jobId}-${ie}`)),o&&de("div",{style:{padding:16,display:"flex",flexDirection:"column",gap:8},children:r?dt("div",{style:{display:"flex",alignItems:"center",gap:6},children:[dt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:n,style:{verticalAlign:"middle",flexShrink:0,opacity:.5},children:[de("circle",{cx:"12",cy:"6",r:"2"}),de("circle",{cx:"6",cy:"12",r:"2"}),de("circle",{cx:"18",cy:"12",r:"2"}),de("circle",{cx:"12",cy:"18",r:"2"})]}),dt("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:["queued",i?` ${i}`:""]})]}):dt(Fo,{children:[dt("div",{style:{display:"flex",alignItems:"center",gap:4},children:[de(Vr,{provider:b,size:11,style:{color:"#6b7280"}}),de("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:Gs(g,b)})]}),ln.map((X,ie)=>{if(X.kind==="tool_group")return de(Hc,{tool:X.tool,items:X.items},ie);if(X.kind==="file_content")return de(Yg,{file:X.file,content:X.content,ext:X.ext,isPlan:X.isPlan,onAccept:X.isPlan&&l?()=>l(e,"Looks good, please proceed with implementation."):void 0},ie);if(X.kind==="thinking")return de("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:X.text},ie);let we=ea(X.text);return we?de("div",{style:{paddingLeft:12,lineHeight:1.5,wordBreak:"break-word"},children:vo(we)},ie):null}),dt("div",{style:{display:"flex",alignItems:"center",gap:6},children:[de(Bg,{color:n}),d&&de("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"})]})]})}),!W&&T.length>0&&de("div",{style:{position:"sticky",bottom:5,display:"flex",justifyContent:"flex-end",paddingRight:3,pointerEvents:"none"},children:de("button",{onClick:()=>{le.current&&le.current.scrollTo({top:le.current.scrollHeight,behavior:"smooth"})},style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:4,fontSize:10,fontFamily:Zt,color:"transparent",backgroundColor:"#eaeaea",backgroundImage:`url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='rgb(0,0,0)' stroke-width='.75'/></svg>")}")`,backgroundSize:"5px 5px",border:"none",borderRadius:0,cursor:"pointer",pointerEvents:"auto",userSelect:"none"},children:dt("span",{style:{position:"relative",backgroundColor:"#eaeaea",padding:"0 6px",color:"#374151",fontFamily:Zt,lineHeight:1.4},children:[k," message",k!==1?"s":""," \u2193"]})})})]}),!o&&c&&dt("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[de("span",{style:{fontWeight:600},children:"Error: "}),c]}),l&&dt("div",{style:{flexShrink:0,position:"relative"},children:[se.length>0&&de("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:se.map((X,ie)=>dt("span",{onClick:()=>ee(we=>we.filter((ke,Tt)=>Tt!==ie)),onMouseEnter:we=>{let ke=we.currentTarget.querySelector("[data-chip-x]");ke&&(ke.style.color="#fff")},onMouseLeave:we=>{let ke=we.currentTarget.querySelector("[data-chip-x]");ke&&(ke.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,de("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"rgba(255,255,255,0.4)"},children:"\xD7"})]},ie))}),dt("div",{ref:oe,style:h(f({},Lg),{borderTop:"1px solid rgba(0,0,0,0.12)"}),children:[de("input",{"data-popmelt-reply":!0,autoFocus:!0,value:w,onChange:X=>{N(X.target.value),M(G.current,X.target.value)},onFocus:()=>{G.current=!0,M(!0,w)},onBlur:()=>{G.current=!1,M(!1,w)},onKeyDown:$e,onPaste:Ae,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:Zt,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),de("button",{onClick:ce,disabled:!w.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:w.trim()?"pointer":"default",color:w.trim()?n:"rgba(0,0,0,0.2)",flexShrink:0},children:dt("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[de("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"}),de("path",{d:"M6 12h16"})]})})]})]})]})]}),Q&&de(Hg,{src:Q,onClose:()=>fe(null)})]})}import{jsx as _r,jsxs as zc}from"react/jsx-runtime";var Qg=[],ra=qg(null),ta="devtools-provider",zi="devtools-model",na="devtools-open-thread-id",oa="popmelt-synthesize-thread";async function $c(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 em={0:0,1:1},tm={0:0,1:1,2:1};function nm(e,t,n){var r,i;if(t==="copilot")return 0;let o=t==="codex"?Ni:_i;return e==="copilot"?0:e==="claude"&&t==="codex"?(r=em[n])!=null?r:Math.min(n,o.length-1):e==="codex"&&t==="claude"&&(i=tm[n])!=null?i:Math.min(n,o.length-1)}function om({children:e,enabled:t=process.env.NODE_ENV==="development",bridgeUrl:n=typeof window!="undefined"?(r=>(r=window.__POPMELT_BRIDGE_URL__)!=null?r:"http://localhost:1111")():"http://localhost:1111",navigate:o}){var Ee,Ie,Oe,Lt,Ut;let[i,s]=Ha(),a=_a(n,t),l=tn(null),d=tn(null),c=(Ee=Ba())!=null?Ee:n,p=tn(new Map),u=tn(new Map),g=tn(!1),b=yr(),[v,A]=Wt(()=>typeof window=="undefined"?"claude":localStorage.getItem(ta)||"claude"),[T,$]=Wt(()=>{if(typeof window=="undefined")return 0;let x=localStorage.getItem(zi);return x&&parseInt(x,10)||0}),[P,O]=Wt([]),[w,N]=Wt({}),[se,ee]=Wt(0),[G,oe]=Wt({}),[W,Z]=Wt(null),[k,Ce]=Wt("idle"),[Q,fe]=Wt(null);Dt(()=>{a.isConnected&&ga(c).then(x=>{if(!x)return;let L=Object.entries(x.providers).filter(([,Te])=>Te.available).map(([Te])=>Te);L.length>0&&O(L);let z={};for(let[Te,ze]of Object.entries(x.providers))ze.models&&ze.models.length>0&&(z[Te]=ze.models);N(z);let re={};for(let[Te,ze]of Object.entries(x.providers))ze.mcp&&(re[Te]=ze.mcp);oe(re)})},[a.isConnected,a.capabilitiesVersion,se,c]),Dt(()=>{if(!a.isConnected){Z(null);return}let x=!1;return Po(c).then(L=>{var z;x||Z((z=L==null?void 0:L.version)!=null?z:null)}),()=>{x=!0}},[a.isConnected,a.capabilitiesVersion,se,c]),Dt(()=>{if(k==="idle"||k==="restarting")return;let x=window.setTimeout(()=>{Ce("idle"),fe(null)},k==="ok"?4e3:8e3);return()=>window.clearTimeout(x)},[k]),Dt(()=>{if(P.length>0&&!P.includes(v)){let x=P[0];A(x),localStorage.setItem(ta,x)}},[P,v]);let _=v==="codex"?[...Ni]:v==="copilot"?[...Ws]:[..._i],le=w[v]&&w[v].length>0?w[v]:_,M=(Ie=le[T])!=null?Ie:le[0];Dt(()=>{T>=le.length&&($(0),localStorage.setItem(zi,"0"))},[T,le.length]);let ue=en(x=>{let L=v;A(x),localStorage.setItem(ta,x);let z=nm(L,x,T);$(z),localStorage.setItem(zi,String(z))},[v,T]),Me=en(x=>{$(x),localStorage.setItem(zi,String(x))},[]),[Ne,ve]=Wt(new Set),[We,Re]=Wt(null),[ge,qe]=Wt(null),[ft,gt]=Wt(null),[ln,K]=Wt(null);Dt(()=>{a.isConnected&&fr(c).then(x=>{x!=null&&x.components&&ve(new Set(Object.keys(x.components)))})},[a.isConnected,c]);let ce=en(async x=>{let L=[];for(let z of x)try{(await ya(z,c)).added&&L.push(z)}catch(re){console.error("[Popmelt] Failed to add component to model:",z,re)}L.length>0&&(ve(z=>{let re=new Set(z);for(let Te of L)re.add(Te);return re}),Re(L[L.length-1]))},[c]),Ae=en(x=>{Re(x)},[]),$e=en(()=>{fr(c).then(x=>{x!=null&&x.components&&ve(new Set(Object.keys(x.components)))})},[c]),rt=en(async x=>{try{(await ba(x,c)).removed&&ve(z=>{let re=new Set(z);return re.delete(x),re})}catch(L){console.error("[Popmelt] Failed to remove component from model:",L)}},[c]),Je=en((x,L)=>{s({type:"MODIFY_SPACING_TOKEN",payload:x}),s({type:"ADD_SPACING_TOKEN_CHANGE",payload:L})},[s]),ae=en((x,L)=>{s({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:x,originalValue:L}})},[s]),[X,ie]=Wt(null),[we,ke]=Wt(()=>typeof window=="undefined"?null:localStorage.getItem(oa)||null);Dt(()=>{we?localStorage.setItem(oa,we):localStorage.removeItem(oa)},[we]);let[Tt,je]=Wt(0),tt=tn([]);Dt(()=>{let x=tt.current,L=i.spacingTokenMods;tt.current=L;let z=new Map(x.map(ze=>[ze.tokenPath,ze])),re=new Map(L.map(ze=>[ze.tokenPath,ze])),Te=!1;for(let[ze,Ue]of re){let Ge=z.get(ze);if(!(Ge&&Ge.currentValue===Ue.currentValue)){Te=!0,Ue.currentValue==="__deleted__"?xa(ze,c).catch(Xe=>console.error("[Popmelt] Failed to sync token delete:",Xe)):ji(ze,Ue.currentValue,c).catch(Xe=>console.error("[Popmelt] Failed to sync token update:",Xe));for(let Xe of Ue.targets){let Et=document.querySelector(Xe.selector);if(Et)if(Ue.currentValue==="__deleted__")Et.style.removeProperty(Xe.property);else{let yt=Ue.currentPx;yt>0&&Et.style.setProperty(Xe.property,`${yt}px`,"important")}}}}for(let[ze,Ue]of z)if(!re.has(ze)){Te=!0,ji(ze,Ue.originalValue,c).catch(Ge=>console.error("[Popmelt] Failed to restore token on undo:",Ge));for(let Ge of Ue.targets){let Xe=document.querySelector(Ge.selector);Xe&&Xe.style.removeProperty(Ge.property)}}Te&&je(ze=>ze+1)},[i.spacingTokenMods,c]);let[ht,Ft]=Wt(()=>$a()),St=en(x=>{Ft(x),za(x)},[]),[lt,ut]=Wt(()=>typeof window=="undefined"?null:localStorage.getItem(na)||null),Yt=tn(null),[yn,Mn]=Wt(new Set),[cn,Xn]=Wt(null);Dt(()=>{lt?localStorage.setItem(na,lt):localStorage.removeItem(na)},[lt]);let mt="popmelt-in-flight-jobs",[Ve,nt]=Wt(()=>{try{let x=localStorage.getItem(mt);return x?JSON.parse(x):{}}catch(x){return{}}});Dt(()=>{try{Object.keys(Ve).length>0?localStorage.setItem(mt,JSON.stringify(Ve)):localStorage.removeItem(mt)}catch(x){}},[Ve]),Dt(()=>{let x=L=>{if(L.key===mt)try{let z=L.newValue?JSON.parse(L.newValue):{};nt(z)}catch(z){}};return window.addEventListener("storage",x),()=>window.removeEventListener("storage",x)},[]);let dn=tn(new Map),Kt=tn(new Map);Dt(()=>{for(let[x,L]of Object.entries(Ve))L.annotationIds.length>0&&dn.current.set(x,L.annotationIds),L.threadId&&Kt.current.set(x,L.threadId)},[Ve]);let In=tn("");Dt(()=>{if(i.annotations.length===0)return;let x=Object.keys(Ve).sort().join(",");if(x===In.current)return;In.current=x;let L=new Set;for(let re of Object.values(Ve))for(let Te of re.annotationIds)L.add(Te);let z=i.annotations.filter(re=>L.has(re.id)?!1:!!(re.status==="in_flight"||(re.status==="pending"||!re.status)&&(re.captured||re.threadId))).map(re=>re.id);z.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:z,status:"dismissed"}})},[i.annotations,Ve,s]);let mo=wo(()=>{let x=new Set;for(let L of Object.values(Ve))for(let z of L.annotationIds)x.add(z);return x},[Ve]),io=wo(()=>{let x=new Set(a.activeJobIds),L=new Set;for(let[z,re]of Object.entries(Ve))if(x.has(z))for(let Te of re.annotationIds)L.add(Te);return L},[Ve,a.activeJobIds]),nn=wo(()=>{let x=new Set(a.activeJobIds),L=Object.entries(Ve).filter(([Te])=>!x.has(Te)),z=L.length,re=new Map;return L.forEach(([,Te],ze)=>{let Ue=`(${ze+1}/${z})`;for(let Ge of Te.annotationIds)re.set(Ge,Ue)}),re},[Ve,a.activeJobIds]),wn=wo(()=>{let x=new Set;for(let L of Object.values(Ve))for(let z of L.styleSelectors)x.add(z);return x},[Ve]),bn=wo(()=>{let x=new Map;for(let L of Object.values(Ve)){for(let z of L.styleSelectors)x.set(z,L.color);for(let z of L.annotationIds){let re=i.annotations.find(Te=>Te.id===z);if(re&&(re.linkedSelector&&x.set(re.linkedSelector,L.color),re.groupId))for(let Te of i.annotations)Te.groupId===re.groupId&&Te.linkedSelector&&x.set(Te.linkedSelector,L.color)}}return x},[Ve,i.annotations]),H=tn(i.annotations);H.current=i.annotations;let Pe=tn(i.styleModifications);Pe.current=i.styleModifications;let Be=tn(Ve);Be.current=Ve,Dt(()=>{let x=null,L=()=>{var Ge,Xe;if(Object.keys(Be.current).length>0)return;let re=H.current,Te=Pe.current,ze=[],Ue=[];for(let Et of re){if(!Et.linkedSelector||!Et.linkedSelector.startsWith("[data-pm=")||Et.pathname||Et.captured||Et.status&&Et.status!=="pending")continue;let yt=document.querySelector(Et.linkedSelector);!yt&&((Xe=(Ge=Et.elements)==null?void 0:Ge[0])!=null&&Xe.selector)&&(yt=document.querySelector(Et.elements[0].selector)),yt||ze.push(Et.linkedSelector)}for(let Et of Te)document.querySelector(Et.selector)||Ue.push(Et.selector);(ze.length>0||Ue.length>0)&&s({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:ze,styleSelectors:Ue}})},z=new MutationObserver(re=>{re.some(Te=>Te.removedNodes.length>0)&&(x&&clearTimeout(x),x=setTimeout(L,3e3))});return z.observe(document.body,{childList:!0,subtree:!0}),()=>{z.disconnect(),x&&clearTimeout(x)}},[s]);let qt=tn(typeof window!="undefined"?window.location.pathname:"/");Dt(()=>{let x=re=>{if(g.current)return;let Te=window.location.pathname;if(re===Te)return;let ze=H.current.filter(Ge=>{var Xe;return Ge.pathname===re&&((Xe=Ge.status)!=null?Xe:"pending")==="pending"});if(console.log(`[Popmelt] Navigation from ${re} \u2192 ${Te}, ${ze.length} pending annotations on departing page`),ze.length===0)return;let Ue=l.current;if(!Ue){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if($r(document.body,Ue,ze,{dpr:1}).then(Ge=>zr(Ge)).then(Ge=>{Ge?(u.current.set(re,Ge),console.log(`[Popmelt] Cached screenshot for ${re} (${(Ge.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${re}`)}).catch(Ge=>{console.warn("[Popmelt] Capture-on-leave failed:",Ge)}),u.current.size>20){let Ge=[...u.current.entries()];u.current=new Map(Ge.slice(-10))}},L=re=>{var ze;let Te=(ze=re.detail)==null?void 0:ze.prevPath;Te&&(x(Te),qt.current=window.location.pathname)},z=()=>{let re=qt.current;x(re),qt.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",L),window.addEventListener("popstate",z),()=>{window.removeEventListener("popmelt:locationchange",L),window.removeEventListener("popstate",z)}},[]),Dt(()=>{a.lastCompletedJobId&&a.lastCompletedJobId in Ve&&nt(x=>{var re;let Te=x,{[re=a.lastCompletedJobId]:L}=Te;return Zn(Te,[Ao(re)])}),a.lastCompletedJobId&&a.lastCompletedJobId===X&&(je(x=>x+1),ie(null))},[a.lastCompletedJobId,X]);let Ot=tn(new Set),Rn=tn(!1);Dt(()=>{if(!a.isConnected){Rn.current=!1;return}Rn.current||(Rn.current=!0,Po(c).then(async x=>{var Ue,Ge,Xe,Et;if(!x)return;let L=(Ue=x.activeJobs)!=null?Ue:[],z=(Ge=x.recentJobs)!=null?Ge:[],re=new Set(L.map(yt=>yt.id)),Te=JSON.parse(localStorage.getItem(mt)||"{}"),ze=new Set;for(let yt of Object.values(Te))if(yt.annotationIds)for(let $t of yt.annotationIds)ze.add($t);nt(yt=>{var yo,Hn,Cn;let $t=f({},yt),xt=Date.now();for(let At of Object.keys($t)){if(At.startsWith("_pending_")){let An=parseInt(At.replace(/^_pending_(?:reply_)?/,""),10);!isNaN(An)&&xt-An>3e4&&delete $t[At];continue}re.has(At)||delete $t[At]}for(let At of L)!$t[At.id]&&((yo=At.annotationIds)!=null&&yo.length||At.threadId)&&($t[At.id]={annotationIds:(Hn=At.annotationIds)!=null?Hn:[],styleSelectors:[],color:(Cn=At.color)!=null?Cn:"#888",threadId:At.threadId});let pn=new Set;for(let At of z)if(At.annotationIds)for(let An of At.annotationIds)pn.add(An);for(let At of Object.keys($t)){if(!At.startsWith("_pending_"))continue;let An=$t[At];An&&An.annotationIds.some(Qe=>pn.has(Qe))&&delete $t[At]}return $t});for(let yt of z)if(yt.status==="done"&&(Xe=yt.annotationIds)!=null&&Xe.length&&yt.annotationIds.some($t=>ze.has($t))&&!Ot.current.has(yt.id))try{let $t=await ei(c,yt.id);if(!$t)continue;let xt=$t.events.find(pn=>pn.type==="done");xt&&Array.isArray(xt.resolutions)&&(Ot.current.add(yt.id),s({type:"APPLY_RESOLUTIONS",payload:{resolutions:xt.resolutions,threadId:(Et=xt.threadId)!=null?Et:void 0}}))}catch($t){}}))},[a.isConnected,c,s]),Dt(()=>{let x=a.events.filter(L=>L.type==="done"&&L.data.resolutions);for(let L of x){let z=L.data.jobId;Ot.current.has(z)||(Ot.current.add(z),Array.isArray(L.data.resolutions)&&s({type:"APPLY_RESOLUTIONS",payload:{resolutions:L.data.resolutions,threadId:L.data.threadId}}))}},[a.events,s]);let un=tn(new Set);Dt(()=>{let x=a.events.filter(L=>L.type==="error"&&L.data.cancelled);for(let L of x){let z=L.data.jobId;if(!z||un.current.has(z))continue;un.current.add(z);let re=Ve[z];re&&re.annotationIds.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:re.annotationIds,status:"dismissed"}})}},[a.events,Ve,s]);let _t=tn(0);Dt(()=>{let x=a.incrementalResolutions;if(x.length<=_t.current)return;let L=x.slice(_t.current);_t.current=x.length,s({type:"APPLY_RESOLUTIONS",payload:{resolutions:L}})},[a.incrementalResolutions,s]),Dt(()=>{a.incrementalResolutions.length===0&&(_t.current=0)},[a.incrementalResolutions.length]);let Co=en(async()=>{let x=l.current;if(!x)return!1;let L=await $r(document.body,x,i.annotations);if(L.length===0)return!1;let z=await Xa(L,i.annotations,i.styleModifications);return z&&s({type:"MARK_CAPTURED"}),z},[i.annotations,i.styleModifications,s]),Ln=en((x,L)=>{let z=p.current.get(x)||[];p.current.set(x,[...z,...L])},[]),kn=en(async()=>{var An;let x=l.current;if(!x)return!1;let L=i.annotations.filter(Qe=>{var It;return((It=Qe.status)!=null?It:"pending")==="pending"}),z=i.spacingTokenChanges.filter(Qe=>!Qe.captured);if(L.length===0&&i.styleModifications.filter(Qe=>!Qe.captured).length===0&&z.length===0)return!1;let re=new Map;for(let Qe of L){let It=Qe.pathname||b;re.has(It)||re.set(It,[]),re.get(It).push(Qe)}let Te=new Map,ze=[...re.keys()].filter(Qe=>Qe!==b);if(ze.length>0){let Qe=b,It={x:window.scrollX,y:window.scrollY};g.current=!0;for(let fn of ze)try{console.log(`[Popmelt] Navigating to ${fn} for screenshot capture`),await $c(fn,o),window.location.pathname!==fn&&console.warn(`[Popmelt] Navigation to ${fn} did not take effect (at ${window.location.pathname})`);let Tn=re.get(fn)||[],zo=await $r(document.body,x,Tn,{dpr:1}),Wo=await zr(zo);Wo&&(Te.set(fn,Wo),console.log(`[Popmelt] Captured ${fn} (${(Wo.size/1024).toFixed(0)}KB)`))}catch(Tn){console.warn(`[Popmelt] Failed to capture ${fn}:`,Tn)}await $c(Qe,o),window.scrollTo(It.x,It.y),g.current=!1}let Ue=L.filter(Qe=>(Qe.pathname||b)===b),Ge=await $r(document.body,x,Ue.length>0?i.annotations:[],{dpr:1});if(Ge.length>0){let Qe=await zr(Ge);Qe&&Te.set(b,Qe)}if(Te.size===0)return!1;let Xe=Ki(L,i.styleModifications,void 0,z.length>0?z:void 0),Et=JSON.stringify(Xe),yt=new Map;for(let Qe of L){let It=p.current.get(Qe.id);if(It&&It.length>0&&yt.set(Qe.id,It),Qe.groupId){for(let fn of L)if(fn.groupId===Qe.groupId&&fn.id!==Qe.id){let Tn=p.current.get(fn.id);Tn&&Tn.length>0&&yt.set(fn.id,Tn)}}}let $t=re.size>1;console.log(`[Popmelt] Submit: ${re.size} page(s), ${Te.size} screenshot(s), pages: [${[...re.keys()].join(", ")}], cached: [${[...u.current.keys()].join(", ")}]`);let xt=$t?Te:(An=Te.get(b))!=null?An:Te,pn=L.map(Qe=>Qe.id),yo=i.styleModifications.filter(Qe=>!Qe.captured).map(Qe=>Qe.selector),Hn=Xi(i.activeColor),Cn=`_pending_${Date.now()}`,At={annotationIds:pn,styleSelectors:yo,color:i.activeColor,threadId:void 0};try{let Qe=JSON.parse(localStorage.getItem(mt)||"{}");Qe[Cn]=At,localStorage.setItem(mt,JSON.stringify(Qe))}catch(Qe){}nt(Qe=>h(f({},Qe),{[Cn]:At}));try{let{jobId:Qe,threadId:It}=await ha(xt,Et,c,Hn,v,M.id,yt.size>0?yt:void 0,Vi());for(let Wn of yt.keys())p.current.delete(Wn);for(let Wn of re.keys())u.current.delete(Wn);let fn=h(f({},At),{threadId:It});try{let Wn=JSON.parse(localStorage.getItem(mt)||"{}");delete Wn[Cn],Wn[Qe]=fn,localStorage.setItem(mt,JSON.stringify(Wn))}catch(Wn){}nt(Wn=>{let Hr=Wn,{[Cn]:Wi}=Hr,Zr=Zn(Hr,[Ao(Cn)]);return h(f({},Zr),{[Qe]:fn})}),s({type:"MARK_CAPTURED"}),It&&pn.length>0&&s({type:"SET_ANNOTATION_THREAD",payload:{ids:pn,threadId:It}});let Tn=i.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),Wo=((Tn!=null&&Tn[1]?parseFloat(Tn[1]):29)+60)%360;return s({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${Wo})`}),!0}catch(Qe){try{let It=JSON.parse(localStorage.getItem(mt)||"{}");delete It[Cn],localStorage.setItem(mt,JSON.stringify(It))}catch(It){}return nt(It=>{let zo=It,{[Cn]:fn}=zo;return Zn(zo,[Ao(Cn)])}),console.error("[Pare] Failed to send to bridge:",Qe),!1}},[i.annotations,i.styleModifications,i.spacingTokenChanges,i.activeColor,s,c,v,M.id,b,o]),Mt=en(async()=>{if(we){ut(we);return}try{let{jobId:x,threadId:L}=await Sa(c,v,M.id);ie(x),ke(L);let z={annotationIds:[],styleSelectors:[],color:"#6b7280",threadId:L};nt(re=>h(f({},re),{[x]:z})),ut(L)}catch(x){console.error("[Popmelt] Failed to start synthesize:",x)}},[c,v,M.id,we]),so=en(async(x,L,z)=>{var Xe,Et,yt,$t;let re=($t=(yt=(Xe=Object.values(Be.current).find(xt=>xt.threadId===x))==null?void 0:Xe.color)!=null?yt:(Et=i.annotations.find(xt=>xt.threadId===x))==null?void 0:Et.color)!=null?$t:i.activeColor,Te=i.annotations.filter(xt=>xt.threadId===x&&(xt.status==="waiting_input"||xt.status==="resolved"||xt.status==="needs_review")),ze=Te.map(xt=>xt.id),Ue=`_pending_reply_${Date.now()}`,Ge={annotationIds:ze,styleSelectors:[],color:re,threadId:x};try{let xt=JSON.parse(localStorage.getItem(mt)||"{}");xt[Ue]=Ge,localStorage.setItem(mt,JSON.stringify(xt))}catch(xt){}nt(xt=>h(f({},xt),{[Ue]:Ge}));try{let xt=Xi(i.activeColor),{jobId:pn}=await wa(x,L,c,xt,v,M.id,z,Vi()),yo=f({},Ge);try{let Hn=JSON.parse(localStorage.getItem(mt)||"{}");delete Hn[Ue],Hn[pn]=yo,localStorage.setItem(mt,JSON.stringify(Hn))}catch(Hn){}nt(Hn=>{let An=Hn,{[Ue]:Cn}=An,At=Zn(An,[Ao(Ue)]);return h(f({},At),{[pn]:yo})}),Te.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:ze,status:"in_flight"}}),a.dismissQuestion(x)}catch(xt){try{let pn=JSON.parse(localStorage.getItem(mt)||"{}");delete pn[Ue],localStorage.setItem(mt,JSON.stringify(pn))}catch(pn){}nt(pn=>{let Cn=pn,{[Ue]:yo}=Cn;return Zn(Cn,[Ao(Ue)])}),console.error("[Pare] Failed to send reply:",xt)}},[i.activeColor,i.annotations,c,a.dismissQuestion,s,v,M.id]),Jt=tn(new Set);Dt(()=>{for(let x of a.pendingQuestions){if(Jt.current.has(x.jobId))continue;Jt.current.add(x.jobId);let L=x.annotationIds&&x.annotationIds.length>0?x.annotationIds:void 0;!L&&x.threadId&&(L=i.annotations.filter(z=>z.threadId===x.threadId).map(z=>z.id)),L&&L.length>0&&s({type:"SET_ANNOTATION_QUESTION",payload:{ids:L,question:x.question,threadId:x.threadId}})}},[a.pendingQuestions,s,i.annotations]);let ur=wo(()=>{if(a.activeJobId&&a.activeJobId in Ve)return Ve[a.activeJobId].color;let x=Object.values(Ve);return x.length>0?x[x.length-1].color:void 0},[a.activeJobId,Ve]),Gt=en(x=>{ut(x)},[]),Kn=en(x=>{var re;let L=Ve[x],z=(L==null?void 0:L.threadId)||Kt.current.get(x);z&&(Yt.current=(re=L==null?void 0:L.color)!=null?re:null,ut(z))},[Ve]),_n=en(x=>{if(!x){Xn(null);return}let L=dn.current.get(x);L&&L.length>0?Xn(new Set(L)):Xn(null)},[]),ho=en(async x=>{try{let L=x?`${c}/cancel?jobId=${x}`:`${c}/cancel`;await fetch(L,{method:"POST"})}catch(L){}},[c]),Nr=en(async()=>{var L,z,re;Ce("restarting"),fe("Restarting bridge");let x=await Yi(c,ai,2e4);if(x.ok){Z((L=x.status.version)!=null?L:ai),Ce("ok"),fe(x.status.version?`Bridge restarted on ${x.status.version}`:"Bridge restarted"),ee(Te=>Te+1);return}Z((re=(z=x.status)==null?void 0:z.version)!=null?re:W),Ce("error"),fe(x.error)},[W,c]);Dt(()=>{i.activeTool==="model"&<&<!==we&&ut(null)},[i.activeTool]);let wt=tn(null);Dt(()=>{i.isAnnotating?wt.current&&(ut(wt.current),wt.current=null):lt&&(wt.current=lt,ut(null))},[i.isAnnotating]);let Vt=wo(()=>{if(!lt)return null;for(let[x,L]of Object.entries(Ve))if(L.threadId===lt)return x;for(let[x,L]of Object.entries(a.activeJobThreads))if(L===lt)return x;return null},[lt,Ve,a.activeJobThreads]),Ct=lt?i.annotations.find(x=>x.threadId===lt):void 0,qn=wo(()=>Vt?a.events.filter(x=>x.data.jobId===Vt):Qg,[Vt,a.events.length]),zn=wo(()=>{var x,L;return(L=(x=Ct==null?void 0:Ct.color)!=null?x:Yt.current)!=null?L:i.activeColor},[Ct==null?void 0:Ct.color,i.activeColor]),Nn=Ct?i.annotations.indexOf(Ct)+1:void 0;Dt(()=>{var L;let x=(L=Ct==null?void 0:Ct.color)!=null?L:Yt.current;lt&&x&&s({type:"SET_COLOR",payload:x})},[lt]);let[Eo,on]=Wt(!1),[pr,$o]=Wt(0),C=tn(null),J=en(x=>{x?(C.current&&(clearTimeout(C.current),C.current=null),on(!0)):C.current=setTimeout(()=>{on(!1),C.current=null},150)},[]),ne=en(()=>{$o(x=>x+1),a.clearEvents(),ut(null),Mn(new Set),ho()},[a.clearEvents,ho]);Dt(()=>()=>{C.current&&clearTimeout(C.current)},[]);let[ye,me]=Wt(!1);Dt(()=>{me(!0)},[]);let Le=wo(()=>({isEnabled:t}),[t]);return!t||!ye?_r(ra.Provider,{value:Le,children:e}):zc(ra.Provider,{value:Le,children:[e,_r(Ql,{state:i,dispatch:s,onScreenshot:Co,inFlightAnnotationIds:mo,activeAnnotationIds:io,queuePositionMap:nn,inFlightStyleSelectors:wn,inFlightSelectorColors:bn,onAttachImages:Ln,onReply:a.isConnected?so:void 0,onViewThread:a.isConnected?Gt:void 0,onCloseThread:x=>{ut(null),x&&Mn(L=>new Set(L).add(x))},onModelComponentsAdd:a.isConnected?ce:void 0,onModelComponentFocus:a.isConnected?Ae:void 0,onModelComponentHover:qe,modelComponentNames:Ne,modelPanelHoveredComponent:ft,modelSpacingTokenHover:ln,highlightedAnnotationIds:cn,focusedThreadAnnotationId:Ct==null?void 0:Ct.id,externalCanvasRef:l,toolbarRef:d}),_r(Ac,{children:zc(Rc,{children:[_r(kc,{state:i,dispatch:s,onScreenshot:Co,onSendToClaude:a.isConnected?kn:void 0,hasActiveJobs:Object.keys(Ve).length>0||a.activeJobIds.length>0,activeJobColor:ur,onCrosshairHover:J,onClear:ne,provider:v,onProviderChange:a.isConnected&&P.length>1?ue:void 0,availableProviders:P,modelIndex:T,modelCount:le.length,modelLabel:M.label,onModelChange:a.isConnected?Me:void 0,onViewThread:a.isConnected?Gt:void 0,isThreadPanelOpen:lt!==null&<!==we,mcpStatus:G,bridgeUrl:c,isBridgeConnected:a.isConnected,packageVersion:ai,bridgeVersion:W,bridgeRestartState:k,bridgeRestartMessage:Q,onBridgeRestart:Nr,modelSelectedComponent:We,modelCanvasHoveredComponent:ge,onModelComponentHover:gt,onSpacingTokenHover:K,onModifySpacingToken:a.isConnected?Je:void 0,onDeleteSpacingToken:a.isConnected?ae:void 0,modelRefreshKey:Tt,onModelComponentAdded:$e,onModelComponentRemoved:rt,onSynthesizeRules:a.isConnected&&v!=="copilot"?Mt:void 0,isSynthesizing:X!==null,toolbarRef:d,snapPosition:ht,onSnapPositionChange:St}),lt&&_r(Fc,{threadId:lt,bridgeUrl:c,accentColor:zn,isStreaming:Vt!==null,isQueued:Vt!==null&&!a.activeJobIds.includes(Vt),queuePosition:Vt&&!a.activeJobIds.includes(Vt)?(()=>{let x=new Set(a.activeJobIds),L=Object.keys(Ve).filter(re=>!x.has(re)),z=L.indexOf(Vt);return z>=0?`(${z+1}/${L.length})`:void 0})():void 0,streamingEvents:qn,onClose:()=>ut(null),onReply:so,onCancel:Vt?()=>ho(Vt):void 0,lastError:(Ut=(Oe=a.lastErrorByJob)==null?void 0:Oe[Vt!=null?Vt:""])!=null?Ut:a.lastCompletedJobId&&Kt.current.get(a.lastCompletedJobId)===lt?(Lt=a.lastErrorByJob)==null?void 0:Lt[a.lastCompletedJobId]:void 0,toolbarRef:d,currentModel:M.id,currentProvider:v,annotationNumber:Nn,annotationText:Ct==null?void 0:Ct.text}),_r(Ic,{bridge:a,bridgeUrl:c,inFlightJobs:Ve,isVisible:Eo||a.lastResponseText!==null||a.activeJobIds.length>0,onHover:J,clearSignal:pr,onReply:so,onViewThread:Gt,onClickJob:Kn,onCancel:ho,onHoverJob:_n,isConnected:a.isConnected,dismissedThreadIds:yn,snapPosition:ht})]})})]})}function rm(){let e=Zg(ra);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{om as PopmeltProvider,rm as usePopmelt};
|